/**********************************************************************************************

	CSS on Sails
	Title	: Titus Medical Spa
	Author	: XHTMLized (http://www.xhtmlized.com/)
	Date	: April 2009

***********************************************************************************************
		
	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
			1.4 Default Styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Sidebar
			2.4 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; }
	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; }
	address { font-style: normal; }

/* 1.2	Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/	

	ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* 1.3	Clearfix
-----------------------------------------------------------------------------------------------*/

	.clearfix { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.4	Default Styles
-----------------------------------------------------------------------------------------------*/	

	body { background: #c0c0c0; font: 62.5% Helvetica, Arial, sans-serif; text-align: center; }
	label { background: none; font: 90% Helvetica, Arial, sans-serif; color: #7D7E7F;}
	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:link, a:visited { color: #C57D67; text-decoration: none; cursor: pointer; }
	a:hover, a:active { color: #C57D67; text-decoration: underline; }
    

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
	
	div.wrapper-container , 
	div.container { position: relative; margin: 0 auto; width: 1024px; text-align: left; font-size: 1.2em; }
	div.container { background: url(../../_ui/images/bg-container-2.png) no-repeat 0 0; }

	body.homepage div.wrapper-container , 
	body.homepage div.container { position: relative; margin: 0 auto; width: 1024px; text-align: left; font-size: 1.2em; background: url(../../_ui/images/bg-container-wrapper.png) repeat-y 0 0; }
	body.homepage div.container { background: url(../../_ui/images/bg-container.png) no-repeat 0 0; }
	
	div#header { z-index: 10; position: relative; width: 1024px; height: 206px; }
	body.homepage div#header { width: 1024px; height: 185px; }
	div#content { z-index: 1; float: right; width: 825px; }
	div#sidebar { z-index: 1; float: left; width: 180px; }
	div#right_sidebar { z-index: 1; float: right; width: 180px; }
	body.homepage div#sidebar { padding: 25px 0; }
	
	div#wrapper-footer , 
	div#footer { overflow: hidden; clear: both; padding: 20px 0 0 0; width: 1024px; background: url(../../_ui/images/bg-footer-wrapper.png) repeat-y 0 0; }
	div#footer { padding: 0; height: 70px; background: url(../../_ui/images/bg-footer.png) repeat-y 0 0; }
	
	
/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

		div#header { z-index: 10; position: relative; width: 1024px; height: 206px; }
#header .banner {
	font-family: "Times New Roman", Times, serif;
	font-size: 28px;
	font-style: normal;
	
	color: #BCC195;
	text-decoration: none;
	display: block;
	padding-top: 40px;
	height: 50px;
}


#header .banner img {
	display: block;
	float: left;
	margin-right: 200px;
	margin-left: 20px;
}
	
	div#header p.tagline {
	position: absolute;
	left: 365px;
	top: 50px;
	width: 630px;
	font-family: "Times New Roman", Times, serif;
	text-align: right;
	
	font-size: 24px;
	color: #DCDDC8;
}
	
	#header #navigation {
	display: block;
	padding-top: 75px;
	padding-left: 200px;
}
	
	
/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
	
	
	
	q.msg { display: block; padding: 0 0 17px 0;  font-size: 1.17em; color: #ABAC81; }
	q.msg strong { text-transform: uppercase; color: #868453; }
	
	body.insidepage div.footer-content { clear: both; margin: 0 0 0 -30px; padding: 5px 10px; width: 250px; background: #E2E2E1; }
	
	
	body.insidepage div.footer-content h3 { padding: 0 0 5px 0; text-transform: uppercase; letter-spacing: .4em; font-family: "Times New Roman", Times, serif;  font-size: .83em; color: #C57D67; }
	body.insidepage div.footer-content p { padding: 0 7px 5px 7px; line-height: 1.18em; font-family: "Times New Roman", Times, serif; font-style: italic;  font-size: 0.92em; color: #666; }
	
	
	
	div.spa-services { padding: 0 7px 7px 22px; }
	div.spa-services h2 { padding: 0 0 3px 0;  font-size: 1.5em; color: #915548; }
	div.spa-services ul { margin: 0; }
	div.spa-services ul li { padding: 0 0 3px 0; line-height: 1.5em;  font-size: .92em; }
	div.spa-services ul li a { color: #E9C5AF !important; }
	div.spa-services ul li a:hover { text-decoration: none; color: #fff !important; }
	div.spa-services ul ul { margin: 1px 0 0 14px; }
	div.spa-services ul ul li { padding: 0 0 0 8px; background: url(../../_ui/images/ico-bullet-list.png) no-repeat 0 center; }
	
	div.module-ads { margin: 0 0 0 1px; }
	
	div.ads-obagi { position: relative; width: 209px; height: 117px; background: #A9AB80 url(../../_ui/images/bg-ads-obagi.png) repeat 0 0; }
	div.ads-obagi h3 { position: absolute; left: 0; top: 0; width: 126px; height: 50px; }
	div.ads-obagi h3 span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../../_ui/images/logo-obagi-medical.png) no-repeat 0 0; }
	div.ads-obagi p { position: absolute; left: 15px; top: 55px; width: 104px; height: 60px; line-height: 1.2em;  font-size: .83em; color: #fff; }
	div.ads-obagi p a { color: #F0D7C6 !important; }
	div.ads-obagi img { position: absolute; left: 126px; top: 0; }
	
	div.ads-save-big { padding: 6px 11px; width: 187px; font-family: "Times New Roman", Times, serif; background: #E2B6A0; }
	div.ads-save-big h3 { padding: 0 0 3px 0;  font-size: 1.5em; color: #A75339; }
	div.ads-save-big ul { margin: 0; }
	div.ads-save-big ul li { padding: 0 0 2px 0; text-transform: uppercase;  font-size: .83em; color: #777A44; }
	div.ads-save-big ul li a { text-transform: none; color: #5D5C5A !important; }
	
	/* Inside Page */
	div#wrapper-content { overflow: hidden; clear: both; padding: 0; width: 1024px; background: url(../../_ui/images/bg-image-content-2.png) no-repeat right 0; }
	
	div#wrapper-content div#title-page { position: relative; margin: 0 0 40px 0; width: 1024px; height: 108px; background: url(../../_ui/images/bg-title-page.png) repeat-y 0 0; }
	div#wrapper-content div#title-page h2 {
	position: absolute;
	left: 18px;
	top: 29px;
	overflow: hidden;
	width: 537px;
	height: 55px;
	margin-left: 5px;
	font-family: "Times New Roman", Times, serif;
	font-size: 36px;
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
	color: #FFF;
	display: block;
	line-height: normal;
}
	div#wrapper-content div#title-page h2 span {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(none) no-repeat 0 0;
	background-image: url(../_ui/images/bg-image-content-2.png);
}
	
	div#wrapper-content div#content div.main-content { width: 535px; }
	div#wrapper-content div#content div.main-content h3 { padding: 0 0 20px 0; line-height: 1.25em; font-weight: bold; font-size: 1.33em; color: #868453; }
	div#wrapper-content div#content div.main-content h3 span { display: block; padding: 0 0 0 60px;  }	
	
	div#wrapper-content div#content div.main-content h3 strong { display: block; padding: 0 0 0 60px;  color:#9C9B73; }	
	
	div#wrapper-content div#content div.main-content h4 { padding: 0; line-height: 1.82em; font-weight: bold; font-size: .92em; color: #C57D67; }
	div#wrapper-content div#content div.main-content p { width:475px; padding: 0 0 25px 0; line-height: 1.82em;  font-size: .92em; color: #7D7E7F; }
	
	div#wrapper-content div#content div.main-content h5 { padding-bottom: 5px; line-height: 2em; font-weight: bold; font-size: 2.5em; color: #C57D67; }
	div#wrapper-content div#content div.main-content p span { padding: 0; line-height: 18px;  font-size: 16px; color: #868453; }

	div#wrapper-content div#content div.main-content div#coupon-outline { width: 480px; border-style: dashed; border-width: medium; padding-left: 20px; border-color:#cccccc;}
	div#wrapper-content div#content div.main-content div#coupon-outline span { font-size: 1.5em; line-height: 1em; }
	
	
/* 2.3	Sidebar
-----------------------------------------------------------------------------------------------*/	
	
	div.before-after { padding: 15px 25px; }
	div.before-after h2 { position: relative; overflow: hidden; margin: 0 0 20px 0; width: 136px; height: 29px; }
	div.before-after h2 span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../../_ui/images/text-before-after.png) no-repeat 0 0; }
	div.before-after ul { margin: 0 0 0 10px; }
	div.before-after ul li { position: relative; padding: 104px 0 22px 0; }
	div.before-after ul li img { position: absolute; left: 0; top: 0; }
	div.before-after ul li p { line-height: 1.25em; text-transform: uppercase;  font-size: 0.67em; color: #C57D67; }
	div.before-after ul li p a { text-decoration: none; color: #C57D67; }
	div.before-after ul li p a:hover { text-decoration: underline; }
	
	div.quick-links { padding: 0 0 0 20px; }
	div.quick-links h2 { padding: 0 0 8px 0; line-height: 1.67em; text-transform: uppercase;  font-size: 1em; color: #9C9B73; }
	div.quick-links ul { margin: 0; }
	div.quick-links ul li { padding: 0 0 10px 3px; line-height: 1.0em;  font-size: .8em; color: #C57D67; margin-bottom:10px; }
	div.quick-links ul li a { color: #C57D67; }
	div.quick-links ul ul { margin: 0 0 0 0; }
	div.quick-links ul ul li { padding: 0 0 0 8px;  }
	
	
/* 2.4	Footer
-----------------------------------------------------------------------------------------------*/

	div#footer div.left-footer { float: left; margin: 20px 0 0 35px; text-align: left; }
	div#footer div.left-footer address { line-height: 1.5em;  font-size: .83em; color: #fff; }
	div#footer div.left-footer strong ,
	div#footer div.left-footer a { text-decoration: none; color: #5D6038; }
	div#footer div.left-footer a:hover { border-bottom: 2px solid #5D6038; }
	
	div#footer div.right-footer { float: right; margin: 20px 35px 0 0; text-align: right; }
	div#footer div.right-footer p { line-height: 1.67em;  font-size: 0.75em; color: #fff; }
	
/* 2.4	Certificate
-----------------------------------------------------------------------------------------------*/

	div#certificate div.content { float: left; margin: 20px 0 0 35px; text-align: left; }
	div#certificate div.content address { line-height: 1.5em;  font-size: .83em; color: #fff; }
	div#certificate div.content strong ,
	div#certificate div.content a { text-decoration: none; color: #5D6038; }
	div#certificate div.content a:hover { border-bottom: 2px solid #5D6038; }

	div#certificate div.content { float: right; margin: 20px 35px 0 0; text-align: right; }
	div#certificate div.content p { line-height: 1.67em;  font-size: 0.75em; color: #fff; }
	
	

