/**********************************************************************************************

	CSS Styelsheet
	Title	: Chilli Temptations Website
	Author	: Tung Truong
	Date	: February 2009 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Footer
		

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	img {
		margin-bottom: -3px;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		position: relative;
		text-align: center;
		font: 62.5% Arial, Helvetica, sans-serif;
		background: #fff url(../images/bg_pattern.png) repeat;
	}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		cursor: pointer;
		color: #223E97/*navy -blue*/;
		text-decoration: underline;
	}
	
	a:hover, 
	a:active {
		color: #5d709a /*blue*/;
		text-decoration: none;
	}
	
	.clear { clear: both; }

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
	.container {
		margin: 0 auto;
		width: 100%;
		text-align: left;
	}
	
	#header {
		position: relative;
		z-index: 100;
		margin: 15px auto 0;
		padding: 0;
		width: 775px;
		height: 165px;
	}
	
	#content {
		position: relative;
		z-index: 1;
		margin: 0 auto;
		padding:10px 0 10px 14px;
		overflow: hidden;
		width: 775px;
	}
	
	#footer {
		clear: both;
		margin: 0 auto;
		padding: 7px 0 0 0;
		background: transparent url(../images/footer-bg.jpg) no-repeat left top;
		width: 775px;
		height: 30px;
		text-align: left;
		color: #fff;	
	}
		#footer p { padding-left: 15px; }

/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	
	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 165px;
		height: 165px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#header h1,
	#header .logo {
		position: absolute;
		z-index: 30;
		top: 0;
		left: 0;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(../../_media/images/logo.jpg) no-repeat;
	}
	
	#header #navigation {
		width: 610px;
		height: 165px;
		background: transparent url(../images/global_nav.jpg) no-repeat;
		margin-top: 0;
		float: right;
	}
		#header #navigation ul {
			position: relative;
			font-size: 1.3em;
			font-weight: bold;
			margin: 90px 0 0 50px;
			padding: 7px 7px 0 0;
			height: 35px;
			width: 270px;
		}
		#header #navigation ul li{
			display: inline;
			padding: 7px 0 0 10px;
		}
		#header #navigation a { color: #fff; text-decoration: none;}
		#header #navigation a:hover, #header #navigation a:active { color: #be615b;/* red */ }
		
		/* this is to indicate which page the user is on through the navigation */
		#home .container #header #navigation #main_navigation li.home a,
		#products .container #header #navigation #main_navigation li.products a,
		#about .container #header #navigation #main_navigation li.about a,
		#contact .container #header #navigation #main_navigation li.contact a { 
			color: #be615b;/* red */ ;
			text-decoration: none;
		}
		
		#header #right-header {
		position: absolute;
		right: 20px;
		top: 0;
		padding: 35px 5px 0 0;
		width: 150px;
		text-align: right; 
	
		}
			#header #right-header p { 	
				color: #F3EFDA /*light-yellow*/;
				font-weight: bold; 
				font-size: 1.5em;
				}
			#right-header a {		
				text-decoration: none;
				color: #000 /*grey */;
			}	
			#right-header a:hover, 
			#right-header a:active {
				text-decoration: underline;
			}
			
/* 2.2	Content
-----------------------------------------------------------------------------------------------*/			
		.main-content {
			text-align: left;
			padding: 10px;
			background-color: #f0f0f0 /*light grey*/;
			width: 736px;
			border:1px dashed #A29F9F;
		}
		.main-content h2 {
			border-top: 35px solid #DEE1E2;
			padding-top: 13px;
			font-size: 1.5em;
			font-family:Georgia, "Times New Roman", Times, serif;
			margin: 8px 0 5px 0;
			color: #EEB11D /*sandy  yellow*/;
			text-transform: uppercase;
		}
		
		.main-content  p,  .main-content li{ 
			font-size: 1.2em;
			line-height: 1.6em;
			margin: 10px 0 7px 2px;

		} 
		.main-content li { list-style: square; list-style-position: inside }
		

	#content .banner {
	   position: relative;
		width: 806px;
		margin-bottom: 10px;
		height: 236px
	}
		ul#banner li img{
			border: 1px solid #ccc;
			padding: 4px;
		}
		
	.small-image { 
		width: 200px; height: 200px; 
		float: right; 
		padding: 3px;
		border: 1px dotted #ccc;
		margin: 10px 10px;	
		clear: both;
	}
	
	.image-large {
		margin: 10px;
		padding: 5px;
		border: 1px dotted #ccc;
	}
	
	.flash-slideshow {
		margin: 20px auto;
		width: 602px;
		padding: 10px;
		background-color: white;
		border:1px dotted #CCCCCC;
	}
		
	
	/* Fixes floating elements going out of flow of layout */
	/* slightly enhanced, universal clearfix hack */
	.clearfix:after {
		  visibility: hidden;
		  display: block;
		  font-size: 0;
		  content: " ";
		  clear: both;
		  height: 0;
		  }
	.clearfix { display: inline-block; }
	/* start commented backslash hack \*/
	* html .clearfix { height: 1%; }
	.clearfix { display: block; }
	/* close commented backslash hack */