/**********************************************
 ******************* MASTER *******************
**********************************************/

/* Created: 4 Sep 2009 & 9am
 * Author: Joshua Deidun <www.ivt.com.au>
*/

/*	TOC
 *	1. Colors
 *	2. Reset
 *	3. Links
 *	4. Typography
 *	5. Structure
*/


/*	1. COLORS
 *	----------------------------------------------
 *	brown		=		#3c151a
 *	pink		=		#e11a5b
 * 	black		=		#000
 * 	grey		=		#666666
*/


/*	2. RESET - do not remove or modify
 *	----------------------------------------------
*/
	
	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, 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: inherit; 
		font-family: inherit; 
		list-style: none; 
		}	
 	
	table { 
		border-collapse: collapse; 
		border-spacing: 0; 
		}

	ol, ul { 
		list-style: none; 
		}

	q:before, q:after, blockquote:before, blockquote:after { 
		content: ""; 
		}
		
	:focus {
		outline: 0;
		}
		
	legend {
		display: none;
		}
		
	hr {
		height: 1px;
		border: 1px solid #CCC;
		}
		
	/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
	.clearfix:after {
		clear: both;
		content: ' ';
		display: block;
		font-size: 0;
		line-height: 0;
		visibility: hidden;
		width: 0;
		height: 0;
		}

	.clearfix {
		display: inline-block;
		}

	* html .clearfix {
		height: 1%;
		}

	.clearfix {
		display: block;
		}


/*	3. LINKS
 *	----------------------------------------------
*/

	a:link, a:active, a:visited, a:hover {
		color: #e11a5b;
		outline: none;
		}
		
	a:hover {
		text-decoration: none;
		}

		
/*	4. TYPOGRAPHY
 *	----------------------------------------------
*/


	h1, h2, h3, h4, h5, h6 {
		color: #e11a5b;
		font-weight: normal;
		}
		
	h1 {
		font-size: 4.6em; 
		line-height: 1.2;
		}
		
	p, label {
		font-size: 1.1em;
		}
		
	p { margin: 0 0 .5em; }					
		

/*	5. STRUCTURE
 *	----------------------------------------------
*/	


	body {
		font: 62.5%/1.6 "Trebuchet MS", "Lucida Grande", Arial, Helvetica;
		color: #666;
		background: #fff url(../images/bg.gif) repeat-x;
		}
		
	#container {
		width: 960px;
		margin: 150px auto 0;
		background: url(../images/bg-container3.gif) 0 70px no-repeat;
		font-size: 1.1em;
		}
	
	#header {
		height: 90px;
		padding: 0 30px 0 0; 
		}
	
	#banner {
		margin: 8px 0 0;
		text-align: center;
		padding: 0 30px;	
		}

	#banner #upper {
		height: 276px;
		}
		
	#banner .fade {
		float: left; 
		display: inline;
		height: 269px;
		width: 584px;
		margin: 0 0 0 8px;
		overflow: hidden;
		}

	#banner #bannerAdvert {
		float: left;
		width: 293px;
		height: 269px;
		padding-left: 7px;
		background: url(../images/bg-fadeline.gif) 0 0 no-repeat;
		}

	
		
	#banner ul {
		margin: 3px 0 1px 10px;
		padding: 0;
		background: #000;
		}
		
	#banner ul li {
		float: left;
		display: inline;
		padding: 0 11px 0 0;
		margin: 10px 0 0;
		height: 145px;
		}
		
	#banner iframe {
		margin: 0;
		padding: 0;
		line-height: 0;
		display: none;
		}	
		
	#extra {
		margin: 10px auto;
		padding: 15px 20px; 
		border-bottom: 1px solid #d8d8d8;
		width: 860px;	
		}
		
	#footer {
		margin: 0 30px 20px;
		padding: 10px 20px 30px;
		}
		
		/* << ----------- HEADER --------------- */						
		
		#header h1 {
			float: left; 
			padding: 0 10px 0 30px;
			background: #fff;
			}
		
		h1 span {
			position: absolute;
			left: -999em;
			}
			
		/* << ----------- NAVIGATION ----------- */			
		
		ul#nav { 
			float: right; 
			width: 569px; 
			margin: 48px 0 0;
			}
		
		ul#nav li {
			float: left; 
			}
		
		ul#nav li a { 
			float: left;
			height: 42px;
			display: block;
			background: #e11a5b url(../images/bg-nav2.gif) no-repeat;
			text-indent: -999em;
			}
		
			/* << --------- NAVIGATION OFF STATE --------- */	
			
			ul#nav li a.treatment { width: 117px; background-position: 0 0; }
			ul#nav li a.products { width: 82px; background-position: -117px 0; }
			ul#nav li a.appointments { width: 107px; background-position: -199px 0; }
			ul#nav li a.giftvoucher { width: 109px; background-position: -306px 0; }
			ul#nav li a.whatsnew { width: 90px; background-position: -415px 0; }	
			ul#nav li a.about { width: 64px; background-position: -505px 0; }
			
			/* << --------- NAVIGATION HOVER STATE --------- */	
			
			ul#nav li a.treatment:hover { background-position: 0 -42px; }
			ul#nav li a.products:hover { background-position: -117px -42px; }
			ul#nav li a.appointments:hover { background-position: -199px -42px; }
			ul#nav li a.giftvoucher:hover { background-position: -306px -42px; }
			ul#nav li a.whatsnew:hover { background-position: -415px -42px; }	
			ul#nav li a.about:hover { background-position: -505px -42px; }
				
		/* << ----------- EXTRA ---------------- */
		#extra {
			
			}
		#extra ul { 
			width: 180px;
			float: left;
			display: inline-block;
			margin: 0 !important;
			padding: 0 !important;
			}
			
		#extra ul li {
			float: left;
			width: 180px;
			margin: 0 !important;
			padding: 0 !important;
			}
		#extra form {
			float: left;
			display: block;
			width: 180px;  
			height: 25px;
			margin: 0;
			padding: 0;
			}
			
		#extra input {
			width: 150px;
			background: 0;
			margin: 0;
			padding: 7px 3px 5px 23px;
			border: 0;
			font-style: italic;
			}	
		
		#extra p#address {
			float: right;
			padding: 3px 0;			
			}
			
		/* << ----------- FOOTER ---------------- */		
		#footer .footright {
			float: right;
			}	
		#footerlink, #ivtlink {
			float: right;
			}	
		#footerlink p {
			margin: 0 30px;
			}			
		
		#footer p#copyright {
			float: left;
			}
		#footer a {
			color: #666;
			}