@charset "utf-8";
/* CSS Document */
/*-----------------------------------------------------------------------------
[client] Screen Stylesheet
version:   1.0
date:      01/03/07
author:    Peter Koopman
email:    peter@zulu.co.nz

website:   http://www.scribbledesign.co.nz

-----------------------------------------------------------------------------*/
/* Import other stylesheets
-----------------------------------------------------------------------------*/
@import url("reset.css");


/* Set up the document
-----------------------------------------------------------------------------*/
body{
	font: 62.5%/1.5 Arial, Helvetica, sans-serif;
	color: #000;	
	text-align:center;
	background-color:#806f51;
}
#topBar{
	height:28px;	
	background:repeat-x top url(../img/layout/top-bar-background.png);
}
#middleBar{
	background:#fff repeat-x bottom url(../img/layout/bottom-line.png);
	position:relative;
	z-index:100;
}
#wrapper{ 
	width: 998px;
	text-align:left;  
	margin:0 auto; 
	background:repeat-y left url(../img/layout/wrapper-background.png) ;
	position:relative;
}
#wrapper.home{ 
	background:repeat-y left url(../img/layout/wrapper-background-home.png) ;
}

/* Typography
-----------------------------------------------------------------------------*/
h1{font-size: 2.2em; /* Equivalent to 22pt */}
h2{font-size: 2.0em; /* Equivalent to 20pt */}
h3{font-size: 1.8em; /* Equivalent to 18pt */}
h4{font-size: 1.6em; /* Equivalent to 18pt */}
h5{font-size: 1.4em; /* Equivalent to 14pt */}
p, q, cite{font-size: 1.2em; /* Equivalent to 12pt */}
li, dt{
	list-style: none;
	font-size: 1.2em; /* Equivalent to 12pt */
}
li, dd, dt{
	font-size: 1.2em; /* Equivalent to 12pt */	
}

/* Header
-----------------------------------------------------------------------------*/
#content #branding h1{
	width:818px;
	height:50px;
	background:#f9f4d6 no-repeat left top url(../img/layout/rw-logo.png);
	float:left;
	text-indent:-9999px;
}	

#content.home #branding h1{
	width:470px;
}
/* Navigation
-----------------------------------------------------------------------------*/
#navMain{
	width:180px;
	float:left;
	background-color:#c0a869;
}
#navMain li{
	border-bottom:dashed 1px #fff;	
	position:relative;
}
#navMain li a{
	height:35px;
	width:130px;
	display:block;
	font:normal 13px/16px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#fff;
	text-decoration:none;
	padding:15px 25px;
}
#navMain li a:hover{
	background-color:#e0d19a;

}
#navMain li a span{
	display:block;
	font:normal 10px/12px Arial, Helvetica, sans-serif;
	color:#746547;
	text-transform:none;
}
#navMain li.menuHome a{
	height:30px;
	padding:20px 0 0 25px;
	background-color:#e0d19a;
	color:#806f51;
	width:155px;
}

#navMain li ul{
	display:none;
	position:absolute;
	width:380px;
	left:180px;
	top:0;
	min-height:57px;
	_height:57px;
	background-color:#e0d19a;
	z-index:100;
	padding:4px 0 4px 25px;
}
#navMain li ul li{
	border:none;
	float:left;
	width:180px;
}
#navMain li ul li a{
	height:auto;
	width:180px;
	font:normal 12px/16px Arial, Helvetica, sans-serif;
	text-transform:none;
	color:#746547;
	text-decoration:none;
	text-align:left;
	padding:5px 10px;
	overflow:visible;
}
#navMain li ul li a:hover{
	text-decoration:underline;

}

/* Content
-----------------------------------------------------------------------------*/
/*All Pages*/
#content{
	/*background:no-repeat left top url(../img/layout/content-background.jpg);*/
	width:818px;
	float:left;
	margin-bottom:25px;
}
#content p, #content a{
	background-color:#fff;	
}
#content #mainContent{
	width:798px;
	padding:20px 0 20px 20px;
	float:left;
}
#content h1{
	font:normal 22px/24px 'Century Gothic', Arial, Helvetica, sans-serif;
	color:#C7C295;
	background-color:#fff;
	text-transform:uppercase;
	clear:both;
}
#content h2{
	font:bold 14px/24px Arial, Helvetica, sans-serif;
	color:#C7C295;
	background-color:#fff;
}
#content h3{
	font:bold 12px/20px Arial, Helvetica, sans-serif;
	color:#C7C295;
	clear:both;
	background-color:#fff;
}
#content p{
	margin:5px 0 10px;
	text-align:justify;
	background-color:#fff;
	color:#746547;
}
#content .emphasis{
	font-weight:bold;
	color:#C7C295;
	background-color:#fff;
}
#content #rwSmallLogo{
	position:absolute;
	bottom:3px;
	right:20px;
}
.layout{
	clear:both;
	height:25px;
	background:repeat-x bottom url(../img/layout/bottom-line.png);
}

img.floatRight{
	float:right;
	margin:10px 0 10px 10px;
}
img.floatLeft{
	float:left;
	margin:10px 10px 10px 0;
}
strong{
	font-weight:bold;	
}
/*Index Pages*/
.subPageLink, .styleGallery{
	width:200px;
	min-height:350px;
	_height:350px;
	margin:10px;
	float:left;
}
.subPageLink p{
	font-size:11px;
	color:#746547;
}
.subPageLink img{
	float:left;
	margin:7px 10px 7px 0;
}
.subPageLink a{
	color:#C7C295;
	text-decoration:none;
}
.subPageLink a:hover{
	text-decoration:underline;	
}
.gallery{
	width:450px;	
}
.retailPartners{
	text-align:center;
}
.retailPartners img{
	vertical-align:top;
	margin:20px;
}


/*Home Page*/
#content.home{
	width:470px;
}
#content.home #mainContent{
	width:430px;
	padding:20px;
}
a.homeLink{
	padding:0 0 0 20px;
	height:16px;
	display:block;
	font-weight:bold;
	text-decoration:none;
	color:#806f51;
	background:no-repeat left top url(../img/layout/link-arrow.png);
}
a.homeLink2{
	text-decoration:none;
	color:#806f51;
}
#content.home #rwSmallLogo{
	right:368px;
	z-index:1000;
	zoom:1;
}
#content img.rwPic{
	float:right;
	margin:0 0 0 10px;
}
#content .twoColumn{
	width:50%;
	float:left;
	position:relative;
}
#content .twoColumn h1{
	overflow:visible;
	white-space:nowrap;
}
#content .twoColumn p{
	margin:5px 12px 10px 0;
}
#content .rtCol p{
	margin-right:0;	
}
.OPSM{
	position:absolute;
	right:-20px;
	top:95px;
}
#content.salon{
	background:none;	
}
/*Creative Team*/
.creativeTeam{
	color:#444;
	clear:both;
	margin:30px 0;
}
.creativeTeam img{
	float:left;
	margin:3px 10px 10px 0;
}
.creativeTeam strong{
	font-weight:bold;	
}
/*Tips and Tricks*/
.tipsAndTricks{
	float:left;
	width:30%;
	height:200px;
	padding:1%;
}
.tipsAndTricks img{
	margin:0 5px 80px 0;
}
.tipsAndTricks p{
	font-size:11px;
	color:#444;
}

/*Stores
-----------------------------------------------------------------------------*/
.storeLocations{
	float:left;
	width:480px;
}
.storeLocations a{
	color:#746547;
	text-decoration:none;
}
.storeLocations a:hover{
	color:#C7C295;
	text-decoration:underline;
}
.storeHours{
	float:left;
	width:230px;
	margin-right:20px;
}
.storeHours li{
	width:240px;
	color:#746547;
}
.storeHours li span{
	width:120px;
	display:inline-block;
}
/*.storePhoto{
	float:left;
	width:250px;
}*/
.storeDescription{
	float:right;
	width:530px;
	margin-top:3px;
}
.storePhoto img{
	margin-top:12px;	
}
h3.storeType{
	margin-top:20px;	
}
.storeContent{
	clear:both;
	width:350px;
	float:left;
	margin:10px 20px;
	min-height:300px;
	_height:300px;
}
/*Collections
-----------------------------------------------------------------------------*/
#collections{
	width:348px;
	float:left;
	position:relative;
	background-color:#e0d1a9;
}
#collections h2{
	top:460px;
	height:50px;
	width:348px;
	font-size:20px;
	line-height:32px;
	text-align:center;
	color:#C7C295;
	font-weight:bold;
	position:relative;
	z-index:100;

}
#collections h3, #collections h4{
	position:absolute;
	top:5px;
	right:11px;
	z-index:100;
	color:#C7C295;
	font-size:15px;
}
#collections h4{
	font-size:18px;
	top:88px;
}
#collections img.collectionsMain{
	position:relative;
	top:-50px;
	left:0;
}
#collectionsThumbs div{
	display:inline;
	position:relative;
	top:-54px;
	width:87px;
	height:140px;
	float:left;
}
#collectionsThumbs div img{
	position:relative;
	z-index:200;
}
#collectionsThumbs div p{
	width:87px;
	height:40px;
	text-align:center;
	text-transform:uppercase;
	color:#988767;
	position:relative;
	z-index:100;
}
#collections a.link{
	padding:0 0 0 20px;
	margin:0 10px 17px 0;
	text-transform:uppercase;
	clear:left;
	float:right;
	height:16px;
	display:block;
	font-weight:bold;
	text-decoration:none;
	color:#806f51;
	background:no-repeat left top url(../img/layout/link-arrow.png);
}
.makeoverSet img{
	margin:10px 20px;	
}
/*Salon Selector
-----------------------------------------------------------------------------*/
ul.openingTimes{
	width:180px;
	float:left;
}
div.storePhoto{
	width:250px;
	float:left;
}
div.salonMap{
	width:339px;
	height:369px;
	float:left;
}
/*Forms
------------------------------------------------------------*/
#forwForm, 
#empForm,
#fchForm{
	width:430px;
	float:left;
}
#forwForm label, 
#empForm label,
#fchForm label{
	width:180px;
	clear:left;
	float:left;
	text-align:left;
	font:normal 12px/15px Arial, Helvetica, sans-serif;
	padding:0 10px;
	margin:5px 0;
	color:#746547
}
#forwForm .forwText, 
#forwForm textarea, 
#empForm .empText,
#empForm textarea,
#fchForm .fchText,
#fchForm textarea{
	width:200px;
	border:1px solid #CCCCCC;
	padding:5px;
	float:left;
	margin:5px 0;
	font:normal 12px/15px Arial, Helvetica, sans-serif;
	color:#746547
}
#empForm select{
	width:80px;
	border:1px solid #CCCCCC;
	float:left;
	margin:5px 0 20px;
	font:normal 12px/15px Arial, Helvetica, sans-serif;
	color:#746547
}
#forwForm input#flexibility{
	margin:20px 0;	
}
#forwForm .fileEntry, #empForm .fileEntry{
	float:left;
}
#forwForm .forwFile{
	margin:5px 0;
}
#forwForm .forwSubmit, #empForm .eSubmit{
	width:150px;
	float:right;
	margin:8px;
}
#empForm h2{
	width:100%;
	border-bottom:1px solid #C7C295;
	clear:both;
}
#empForm .submitButton,
#fchForm .submitButton{
	clear:both;
	margin:20px 0 0 0;
	width:80px;
	float:right;
}
div.error{
	clear:both;
	width:100%;
	font-size:12px;
	font-weight:bold;
	color:#F00;
}
#fchForm fieldset{
	width:180px;
	float:left;
	text-align:left;
	font:normal 12px/15px Arial, Helvetica, sans-serif;
	padding:0 10px;
	margin:5px 0;
	color:#746547
}
#fchForm label.delivery{
	margin-top:10px;	
}

#fchForm fieldset label{
	width:80px;
	margin-left:20px;
}

#fchForm input.fchRadio{
	float:left;
	width:20px;
	margin-top:6px;
}
/* Footer
-----------------------------------------------------------------------------*/
#bottomBar{
	zoom:1;/*IE Fix*/
	background:repeat-x top url(../img/layout/page-info-background.png) #806f51;
}
#pageInfo{
	width: 1000px;
	height:40px;
	margin:0 auto;	
	padding:10px 0;
	text-align:left;
}
#pageInfo p{
	float:left;
	width:480px;
	color:#fff;
	font-size:11px;
	margin-left:10px;
}
#pageInfo p a{
	color:#fff;
	text-decoration:none;
}
#pageInfo p a:hover{
	color:#fff;
	text-decoration:underline;
}
#pageInfo p.footerRight{
	float:right;
	text-align:right;
	margin-right:10px;
}