/*
Theme Name: The Face Beauty Website
Theme URI: Description: The 2011 theme for the Face Beauty
Version: 1.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
*/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
	
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

html a:active { outline:none;}
:focus {-moz-outline-style: none;}
a {text-decoration: none;}

/* GLOBAL STYLES
------------------------------------------------------------------------------------*/
* {
	margin:0; 
	padding:0;
}

body {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:62.5%; 
	color:#6a737b; 
	border-top:3px solid #979DA3;
	background:#f1f1f1 url(/images/theFaceSkin/body_bg.jpg) no-repeat 50% 178px;
	/*background:#f1f1f1 url(/images/theFaceSkin/background-the-face-christmas2011.jpg) repeat-x fixed 50% 0px;  */
}

/* LAYOUT 
------------------------------------------------------------------------------------*/
#wrapper {
	position:relative; 
	width:960px; 	
	margin:0 auto; 
	border:0px solid #eee;
}

#content {
	padding:19px; 
	border-left:1px solid #c9d1d8; 
	border-right:1px solid #c9d1d8; 
	background-color:#fff;
}

#content #subContent #borderedCont {
	padding:15px 15px; 
	margin-bottom:20px; 
	border:1px solid #f1f1f1; 
	background-color:rgb(100%, 100%, 100%);  
	background-color:rgba(100%, 100%, 100%, 0.95); 
	*background-color:#fff; 
	_background-color:#fff;
}

/* Product Page */
#content.product #mainContent {
	float:left; 
	width:680px; 
	padding-right:20px;
}

#content.product #subContent {
	float:left; 
	width:218px;
}

/* Product Listing Page */
#content.productList #mainContent {
	float:right;
	width:698px; 
	padding-left:25px; 
}

#content.productList #subContent {
	float:right;
	width:197px; 
}

/* Info Page */
#content.infoPage #mainContent {
	float:right;
	width:698px; 
	padding-left:25px; 
}

#content.infoPage #subContent {
	float:right;
	width:197px; 
}

/* Accounts */
#content.accounts #mainContent {
	float:left; 
	width:660px;
}

#content.accounts #subContent {
	float:left; 
	width:218px;
}

/* 2 col when #mainContent is full width*/
div.cols {
	width:920px;
	overflow:hidden; 
}

div.cols .col1, div.cols .col2 {
	float:left; 
	width:440px;
}

div.cols .col1 {
	margin-right:0px;
}

.left, 
.right {
	float:left;
}

.right {
	float:right;
}

/* ELEMENTS
------------------------------------------------------------------------------------*/
h1, h2, h3 {
	font-weight:normal;
	color:#2a333a; 
}

h1 {
	padding-bottom:15px;
	font-size:2.5em; 
}

h2 {
	padding-bottom:10px;
	font-size:1.5em; 
}

#checkout h2 {
	font-size:1.8em !important;
}

h3 {
	padding-bottom:10px;
	font-size:1.5em; 
}

p {
	padding-bottom:10px;
	font-size:1.2em; 
	line-height:1.5em; 
}

	p.leadingCopy {
		padding-bottom:40px;
		font-size:1.5em; 
	}
	
	#header	#dermalogica-facts p {
		padding-bottom:0px;
		line-height:normal;
	}
	
		#header	#dermalogica-facts p#post_date {
			margin-top:3px;
			font-size:.9em;
			color:#999;
			letter-spacing:1px;
		}
		
		#header	#dermalogica-facts p#post_title {
			margin-top:2px;
			font-size:1.2em;
			text-decoration:underline;
		}

a {
	text-decoration:none; 
	color:#6a737b;
}

#mainContent p a {
	color:#5793d6;
	text-decoration:underline;
}

ol, ul {
	list-style-type:none; 
	list-style-position:outside;
}

ul {
	font-size:1.2em;
}

input {
	padding:2px 2px 2px 2px;
}

option {
	padding-right:10px;
}

small {
	font-size:90%;
}

table {
	border-collapse:collapse; 
	border-spacing:0;
}

img {
	border:0;
}


/* CLEARFIX 
------------------------------------------------------------------------------------*/
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-block;}

/* Hides from IE-mac */
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */


/* GLOBAL CLASSES
------------------------------------------------------------------------------------*/
.imgBlock {
	display:block; 
	height:0; 
	overflow:hidden;
}

.price {
	color:#e79326;
}

.green {
	color:#0E8108;
}

.red {
	font-weight:bold;
	color:#900; 
}


/* HEADER 
------------------------------------------------------------------------------------*/
#header {
	height:116px; 
	padding-top:25px; 
	padding-left:20px; 
	background:#f1f1f1 url(/images/theFaceSkin/headerBackground.png) no-repeat top center;
	/*background:#f1f1f1 url(/images/theFaceSkin/headerBackgroundXmas2011.png) no-repeat top center;*/
}

#header #dermalogica-logo {
	float:left; 
	width:187px; 
	padding-top:101px; 
	margin-right:35px; 
	background:url(/images/theFaceSkin/the-face-beauty-logo.gif);
}

#header #latest-blog {
	position:absolute; 
	top:50px; 
	left:240px; 
	width:390px; 
	padding-top:85px; 
	background:url(/images/theFaceSkin/blog-block.jpg) no-repeat 0px 0px; 
}			

#dermalogica {
	position:absolute; 
	top:40px; 
	right:0px; 
	width:300px; 
	padding-top:37px; 
	background:url(/images/theFaceSkin/dermalogica-logo.gif) no-repeat;
}

#blog {
	position:absolute; 
	top:49px; 
	left:380px; 
	width:45px; 
	padding-top:28px; 
	background:url(/images/theFaceSkin/blog-button.jpg) no-repeat;
}

#rss {
	position:absolute; 
	top:49px; 
	left:425px; 
	width:25px; 
	padding-top:28px; 
	background:url(/images/theFaceSkin/rss-button.jpg) no-repeat;
}

#header #custHelp {
	position:absolute; 
	top:5px; 
	right:0px; 
	width:165px; 
	padding-top:35px; 
	background:url(/images/theFaceSkin/contactDetails.png) no-repeat;
}

#header #facebook {
	position:absolute; 
	top:40px; 
	left:580px; 
	width:20px; 
	padding-top:25px; 
	margin:10px 0px 0px 10px; 
	background:url(/images/theFaceSkin/facebook-button.jpg) no-repeat;
}

#header #twitter {
	position:absolute; 
	top:40px; 
	left:610px; 
	width:20px; 
	padding-top:25px; 
	margin:10px 0px 0px 0px; 
	background:url(/images/theFaceSkin/twitter-button.jpg) no-repeat;
}

#header	#dermalogica-facts {
	position:absolute; 
	top:89px; 
	left:245px; 
	width:375px; 
} 

#header	#dermalogica-facts a {
	color:#4a82bd;
}

#header	#dermalogica-facts a:hover {
	text-decoration:underline;
}


/* MINI BASKET 
------------------------------------------------------------------------------------*/
#mini_basket {
	position:absolute; 
	top:85px; 
	right:0px; 
	width:297px; 
	height:50px; 
	padding-right:3px; 
	background:url(/images/theFaceSkin/cart-background.jpg) no-repeat;
}

#mini_basket p {
	padding-bottom:0px; 
	color:#2a333a; 
	text-transform:lowercase;
}

#mini_basket a {
	color:#6a737b; 
	text-decoration:underline;
}

#mini_basket a:hover {
	color:#5992ce; 
	text-decoration:none;
}

#bag_accounts {
	width:105px; 
	padding:7px 0px 0px 3px;
}

#bag_accounts #myAccount {
	padding-left:25px; 
	background:url(/images/theFaceSkin/user-login-icon-a.jpg) 0px 0px no-repeat;
}

#bag_accounts #logout {
	padding-left:25px; 
	margin-top:2px; 
	background:url(/images/theFaceSkin/user-logoff-icon.jpg) 0px 0px no-repeat;
}

#bag_contents {
	width:50px; 
	padding:31px 0px 0px 2px;
}

#bag_total {
	width:50px; 
	padding:31px 0px 0px 8px;
}

#mini_basket #view_bag {
	width:60px; 
	margin:3px 0px 0px 0px; 
	padding-top:44px; 
	background:url(/images/theFaceSkin/view-bag.jpg) 0px 0px no-repeat;
}


/* NAVIGATION
------------------------------------------------------------------------------------*/
#nav {
	margin-bottom:42px;
}

	.nosocial #nav {
	margin-bottom: 0 !important;
	}

#nav #nav_list {
	width:731px;
}

#nav #nav_list li {
	float:left; 
	background:url(/images/theFaceSkin/nava.png) no-repeat;
}

#nav #nav_list #dermProducts {
	width:175px;
}

#nav #nav_list #delPolicy {
	width:116px;
}

#nav #nav_list #refPolicy {
	width:110px;
}

#nav #nav_list #dermAdvice {
	width:150px;
}

#nav #nav_list #ourSalon {
	width:85px;
}

#nav #nav_list #contactUs {
	width:95px;
}

#nav #nav_list li.dermProducts {
	background-position:0px -35px;
}

#nav #nav_list li.delPolicy {
	background-position:-175px -35px;
}

#nav #nav_list li.refPolicy {
	background-position:-291px -35px;
}

#nav #nav_list li.dermAdvice {
	background-position:-401px -35px;
}	

#nav #nav_list li.ourSalon {
	background-position:-551px -35px;
}

#nav #nav_list li.contactUs {
	background-position:-636px -35px;
}

#nav #nav_list li a {
	padding:35px 0 0 0; 
	background:url(/images/theFaceSkin/nava.png) no-repeat;
}

#nav #nav_list li a:hover, 
#nav #nav_list li a.selected {
	background:none !important;
}

#nav #nav_list #dermProducts {
	width:175x; 
	background-position:0px 0px;
}
#nav #nav_list #delPolicy {
	width:116px; 
	background-position:-175px 0px;
}

#nav #nav_list #refPolicy {
	width:110px; 
	background-position:-291px 0px;
}

#nav #nav_list #dermAdvice {
	width:150px; 
	background-position:-401px 0px;
}

#nav #nav_list #ourSalon {
	width:85px; 
	background-position:-551px 0px;
}

#nav #nav_list #contactUs {
	width:95px; 
	background-position:-636px 0px;
}


/* SOCIAL BAR
------------------------------------------------------------------------------------*/
#socialNetwork {
	position:absolute; 
	top:176px; 
	left:0px; 
	display:block; 
	width:960px; 
	height:42px; 
	padding-right:0px; 
	background:#fff url(/images/theFaceSkin/socialBar-1.png) no-repeat;
}

#socialNetwork #mailchimp {
	position:absolute; 
	top:8px;left:350px; 
	display:block; 
	width:280px; 
	background:none;
}

#socialNetwork #email_add {
	width:180px; 
	padding:5px 5px 4px 5px; 
	background:none; 
	border:none;
}

#socialNetwork #mailchimp .subscribe {
	position:absolute; 
	top:0px; 
	right:5px;
}

#socialNetwork #facebookLike {
	position:absolute; 
	top:13px; 
	left:660px;
}


/* SEARCH
------------------------------------------------------------------------------------*/
#search {
	position:absolute; 
	top:141px; 
	right:0px; 
	width:229px; 
	height:35px; 
	background:url(/images/theFaceSkin/search-block-a.png) no-repeat;
}

#search form {
	padding:2px 0px 0px 5px;
}

#search form label {
	display:none !important;
}

#search	#search_text {
	width:143px; 
	padding: 6px 5px 5px 5px; 
	border: none; 
	background: none;  
}

#search #search_button {
	position:absolute; 
	top:2px; 
	right:10px; 
	display:none;
}

#search	#searchsubmit {
	width:60px; 
	padding-top:4px; 
	padding-left:7px;
	font-size:1.6em;
	color:#fff; 
	border:none; 
	background:none; 
	cursor:pointer;
}

/* ERRORS
------------------------------------------------------------------------------------*/
.systems-messages {
	margin-bottom:15px; 
	font-size:1.5em; 
}

.systems-messages td {
	padding:10px;
}

.systems-messages .messageStackError {
	background-color:#FCC; 
	color:#900;
}

.systems-messages .messageStackWarning {
	background-color:#FF9; 
	color:#F60;
}

.systems-messages .messageStackSuccess {
	background-color:#CFC; 
	color:#390;
}


/* CRUMBTRAIL 
------------------------------------------------------------------------------------*/
ul#crumbtrail {
	padding-bottom:20px; 
	padding-top:2px; 
	font-size:1.2em; 
	text-transform:lowercase;
}

ul#crumbtrail li {
	display:inline; 
	padding-right:10px; 
	color:#b5b9bd;
}

ul#crumbtrail li a {
	margin-right:10px;
	text-decoration:underline; 
}

ul#crumbtrail li a:hover {
	color:#5992ce;
}

ul#crumbtrail li.active {
	height:auto; 
	padding-top:4px; 
	color:#6a737b;
	background:none; 
}


/* FOOTER 
------------------------------------------------------------------------------------*/
#footer {
	clear:both; 
	padding:20px 20px 15px 20px;
	background-color:#e2e4e5; 
}

#footer p {
	padding-bottom:0px;
}

#footer a {
	text-decoration:underline;
}

#salonInfo {
	padding-bottom:15px;
}

#salonInfo ul {
	float:left; 
	width:225px;
}

#salonInfo ul li {
	line-height:1.5em;
}

#salonInfo h5 {
	padding-top:11px; 
	padding-bottom:15px;
	font-size:1.3em; 
	font-weight:normal; 
	color:#2a333a; 
}

#availableTreatments, 
#openingTimes, 
#address {
	float:left;
}

	#availableTreatments {
		width:480px;
	}

	#availableTreatments h5 {
		line-height:1.3em;
	}

	#availableTreatments ul {}

	#address {
		width:230px;  
		padding-top:75px; 
		background:url(/images/theFaceSkin/the-face-beauty-logo-opening-times.gif) 0 0 no-repeat;
	}

	#openingTimes {}

	#openingTimes ul {
		width:190px;
	}

	#openingTimes h5 {
		text-transform:capitalize; 
	}