/* 
	Title: Hungrybrowser - Homepage style sheet
	Description: Contains all the custom styling for the mmk homepage
	Client: MMK
	Date: 05/12/2006
	Updated: 27/11/2008
	Version 1.00
	Author: Ben Ellis
*/

/* ------------------------------------------------------------
	Content area
---------------------------------------------------------------- */

/* Styles the content div */

#home #content {
	padding: 0px;
}

/* ------------------------------------------------------------
	Styles for slideshow
---------------------------------------------------------------- */

/* Image area */

#slideshow_images {
	margin: 0px 0px 0px 0px;
	height: 265px;  
	width: 955px;  
	overflow: hidden;
	background: #FFFFFF url("../img/loader.gif") center center no-repeat;
	position: relative;
} 

#slideshow_images img {
	height: 265px;  
	width: 955px;  
	/*position: absolute;*/
	top: 0px;
	left: 0px;
}

#slideshow_images a {
	position: absolute;
}

#slideshow_image_0 {
	z-index: 5;
}

#slideshow_image_1 {
	z-index: 4;
}

#slideshow_image_2 {
	z-index: 3;
}

#slideshow_image_3 {
	z-index: 2;
}

#slideshow_image_4 {
	z-index: 1;
}

#slideshow_image_5 {
	z-index: 0;
}

/* ------------------------------------------------------------
	Styles for slideshow text area
---------------------------------------------------------------- */
 
#slideshow_content {
	background-color: #DFDBD1;  
	height: 95px; 
	width:  955px;  
	padding: 0px;  
	margin:  0px;
	overflow: hidden;
	border-bottom: 1px #B4B1A9 solid;
} 

#slideshow_content ul, #slideshow_content ul li {
	float: left;
	height: 125px; 
	padding: 0px;  
	margin:  0px;
}

ul#slide { 
	width: 855px;  
}

ul#slide li { 
	width: 855px; 
	line-height: 18px;
} 

ul#slide p {
	/*font-size: 100%;*/
	margin: 12px 10px 0px 10px;
	width: 675px;
	float: left;
}

ul#slide p.button {
	margin: 23px 10px 0px 10px;
	width: 125px;
	float: left;
}

ul#slide a.button {
	display:  block;
	background: url("../img/slide_button_bg.gif") 0px 0px no-repeat;
	padding: 5px 0px 6px 0px;
	margin: 0px;
	width: 116px;
	color:  #EEEEEE;
	text-align: center;
	font-size: 90%;
	line-height: 22px;
}

ul#slide a:hover.button {
	background-position: 0px -33px;
	text-decoration: none;
	color: #FFFFFF;
}

/* Prevous and next buttons */

ul#prev_slide li a, ul#next_slide li a {  
	width: 50px; 
	display: block; 
	height: 95px; 
	text-indent: -10000px;
}

/* Prevous button */

ul#prev_slide li a {
	background: url("../img/prev_button_off_bg.gif") center center no-repeat;
}

ul#prev_slide li a:hover {
	background-image: url("../img/prev_button_on_bg.gif");
}

/* Next button */

ul#next_slide li a {
	background: url("../img/next_button_off_bg.gif") center center no-repeat;
}

ul#next_slide li a:hover {
	background-image: url("../img/next_button_on_bg.gif");
}


/* ------------------------------------------------------------
	Styles for slideshow tabbed slideshow navigation
---------------------------------------------------------------- */

ul#slideshow_nav {
	width: 955px;
	height: 35px;
	background-color: #B4B1A9;
	padding: 0px;
	margin: 0px;
	list-style: none;
	list-style-type: none;
}

ul#slideshow_nav li, ul#slideshow_nav li a {
	float: left;
	display: block;
}

ul#slideshow_nav li a {
	padding: 7px 0px 7px 0px;
	width: 158px;
	margin: 0px;
	text-align: center;
	background-color: #B4B1A9;
	text-decoration: none;
	color: #EEEEEE;
	border-left: 1px #A2A09A solid;
	border-bottom: 1px #A2A09A solid;
	font-weight: bold; 
	font-size: 100%; 
}

ul#slideshow_nav li:first-child a {
	border-left: none;
}

ul#slideshow_nav li:list-child a {
	border-right: none;
}


ul#slideshow_nav li a:hover {
	background-color: #A5A39D;
	color: #FFFFFF;
}

#slideshow_nav li.active a, #slideshow_nav li.active a:hover {
	background-color: #DFDBD1;
	color: #402570;
	border-bottom: 1px #DFDBD1 solid;
}

#slideshow_nav li.active.first a {
	border-left: none;
}

/* ------------------------------------------------------------
	Styles for main features area
---------------------------------------------------------------- */

#features {
	clear: both;
	background-color: #FFFFFF;
	overflow: auto;
}

#features div {
	width: 275px;
	padding: 0px;
	margin: 15px 20px 10px 20px;
	float: left;
}

#features h3 {
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 2px 35px;
	font-size: 110%;
	color: #333333;
	/*
	width: 200px;
	height: 17px;
	*/
}

#features h3 a {
	font-size: 100%;
}

#features img {
	margin: 0px 0px 10px 0px;
}

#features p {
	margin: 0px 0px 10px 0px;
}

#features div a.button {
	display:  block;
	padding: 6px 0px 6px 0px;
	margin: 0px;
	width: 116px;
	color:  #EEEEEE;
	text-align: center;
	font-size: 90%;
	background-position: 0px 0px;
}

#features a:hover.button {
	background-position: 0px -33px;
	text-decoration: none;
	color: #FFFFFF;
}

/* Feature 1 */

.feature_1 h3 {
	background: url("../img/feature_1_header_bg.gif") 0px 0px no-repeat;
}

.feature_1 h3 a {
	color: #981814;
}

.feature_1 a.button {
	background-image: url("../img/feature_1_button_bg.gif");
}

/* Feature 2 */

.feature_2 h3 {
	background: url("../img/feature_2_header_bg.gif") 0px 0px no-repeat;
}

.feature_2 h3 a {
	color: #E56A28;
}

.feature_2 a.button {
	background-image: url("../img/feature_2_button_bg.gif");
}

/* Feature 3 */

.feature_3 h3 {
	background: url("../img/feature_3_header_bg.gif") 0px 0px no-repeat;
}

.feature_3 h3 a {
	color: #C4944D;
}

.feature_3 a.button {
	background-image: url("../img/feature_3_button_bg.gif");
}

/* ------------------------------------------------------------
	Styles for main sub features area
---------------------------------------------------------------- */

#sub_features {
	clear: both;
	background-color: #FFFFFF;
	overflow: auto;
	border-top: 1px #CCCCCC solid;
}

#sub_features div {
	width: 275px;
	padding: 0px;
	margin: 15px 20px 10px 20px;
	float: left;
}

#sub_features h3 {
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 2px 35px;
	background: url("../img/sub_feature_header_bg.gif") 0px 0px no-repeat;
	/*
	width: 200px;
	height: 17px;
	*/
	font-size: 120%;
	color: #333333;
}

#sub_features h3 a {
	/*color: #333333;*/
	font-weight: bold;
	font-size: 100%;
}

#sub_features img {
	margin: 5px 10px 10px 0px;
	width: 135px;
	height: 85px;
	float: left;
}

#sub_features p {
	margin: 0px 0px 10px 0px;
	color: #666666;
}

#features ul, #sub_features ul {
	clear: both;
	margin: 10px 0px 15px 0px;
}

#features ul li, #sub_features ul li {
	background: url("../img/swallow_bullet.gif") 0px 6px no-repeat;
	padding: 0px 0px 0px 20px;
}

#sub_features div a.button {
	display:  block;
	padding: 6px 0px 6px 0px;
	margin: 0px;
	width: 116px;
	color:  #EEEEEE;
	text-align: center;
	font-size: 90%;
	background: url("../img/sub_feature_button_bg.gif") 0px 0px;
}

#sub_features a:hover.button {
	background-position: 0px -33px;
	text-decoration: none;
	color: #FFFFFF;
}

/* ------------------------------------------------------------
	Styles for text content area = For your protection
---------------------------------------------------------------- */

#text_content {
	background-color: #FAF8F2;
	border-top: 1px #DFDBD1 solid;
	padding: 20px 20px 20px 20px;
	overflow: auto;
}

#text_content img {
	float: right;
	margin: -20px 0px 0px 20px;
}

#text_content h3 {
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 2px 35px;
	background: url("../img/text_content_header_bg.gif") 0px 0px no-repeat;
	width: 350px;
}

#text_content h3 a {
	color: #333333;
	font-weight: bold;
	font-size: 120%;
}

#text_content p {
	margin: 0px 0px 10px 0px;
	color: #666666;
	font-size: 95%;
}