/* Remove default padding from commonly used elements so that we may define our own. */

html, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, p, form, input, select { margin:0; padding:0; }

body{
	text-align:center;
	background-color:#EFCC89;
	background-image: url(/images/bg_titleWood03.jpg);
}

/*font colours --- NAMING SYSTEM //.fontColorBackgroundColor//
THE REASON FOR PRODUCING THE FONT IN THIS WAY IS SO THAT WITHIN THE CMS THE USER CAN SELECT THE COLOR THEME OF THE FONT*/

.white{
	color:#fff;
}

.whiteBg{
	background-color:#fff;
}

.whiteGrey{
	color: #fff;
	background-color: #647e77;
}

.whiteRed {
	color: #fff;
	background-color: #c60062;
}

.red{	
	color: #c60062;
}

.whiteBrightRed {
	color: #fff;
	background-color: #df005e;
}

.whiteGreen {
	background-color: #5dae2d;
	color: #fff;
}

.whiteLightBlue02{
		color: #fff;
		background-color: #a5d9ec;
}


.redWhite {
	background-color: #fff;
	color: #c60062;
}

.yellow{
	color:#ffff99;
}

.yellowRed {
		color: #fff25e;
		background-color: #c60062;
}
.yellowOrange {
		color: #ffff99;
		background-color: #ff9900;
}
.whiteOrange {
		color: #fff;
		background-color: #ff9900;
}
.orangewhite {
	    color: #FF9900;  
		background-color: #fff;
	}
.yellowGreen {
		color: #fff25e;
		background-color: #5dae2d;
}

.yellowLightBlue {
		color: #fff25e;
		background-color:#73c2df;
}	

.yellowDarkBlue {
		color: #fff25e;
		background-color: #072568;
}

.yellowGrey {
	color: #fff25e;
	background-color: #647e77;
}
.whitelightblue {
		color:#fff;
		background-color:#0090c4;
}

.lighterbluewhite {
		color:#0090c4;
		background-color:#fff;
}

.lightbluewhite {
		color:#0090c4;
		background-color:#fff;
}

.whitePink {
		color:#fff;
		background-color:#eaa1c5;
}

.yellowbgBlue {
		color: #072568;
		background-color: #ffff99;		
		font-family: "Courier New", Courier, monospace;
		font-size: 1.1em;
		text-decoration:none;
		text-transform: uppercase;
}
.darkBlueLightBlue {
	color:#002065;
	background-color:#73c2df;
}

.darkBlueLightGreen {
	color:#002065;
	background-color:#daecce;
}

.darkBlueLightOrange {
	color:#002065;
	background-color:#ffd699;
}

.darkBluewhite {
	color:#002065;
	background-color: #fff;
}

.skingreenwhite {
	color:#fff;
	background-color:#5dae2c;
}
		
.lightBlueDarkBlue {
		color: #a5d9ec;
		background-color: #072568;
}

.greenWhite {
	color: #5dae2d;
		background-color: #fff;
}

.whiteGreen {
	color: #fff;
		background-color: #5dae2d;
}

.darkgreyWhite{
	color:#fff;
	background-color:#999999;
}

.grey {
	background-color: #e0e5e4;
}	

.blackYellow {
	color: #000000;
	background-color: #fff25e;
}	

	
a {
		 text-decoration: none;
	}
	
	a:hover {
		color: #df005e ;
		 text-decoration: none;
	}
a:visited {	
		 text-decoration: none;
	}
	
/* -------------------------------------------LAYOUT GLOBAL------------------------------------------------ */
/* We use a table to centre the site within the middle of a browser window. Tables are used rather than divs as the div solution causes a problem with IE5 on a mac. */

	.wood{
		width:100%;
		height:100%;
		background-image: url(/images/bg_titleWood03.jpg);
		text-align: center;	
	}
	
	div.bottom-postit{
	float:right;
	margin-right:20px;
	width:260px;
	height:50px;
	}
	
	
	.containerTable {
		width:100%;
	}
	
/* This centres the outer container element. */
	.containerTableCell {
		height: 100%;
		width:100%;
		/*border: #00FF00 solid 1px;*/
		text-align: center;
		
	}
	
	div.container {
		position:relative;
		height:100%;
		width: 100%;
		margin-left:auto;
		margin-right:auto;
		z-index: 4;
			
	}
	
	div.thePage {
		position: relative;
		width: 775px;
	}
	
	div.clear {
		position:relative;
		clear: left;
		height: 4px;
			
	}
	
	div.clear02 {
		position:relative;
		clear: left;
		}
	
	p.disclamier {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		width: 522px;
		font-size: 0.6em;
		color: #072568;
		position: relative;	
		float: left;
		margin: 0 0 14px 0;	
	}
	
	p.copy {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #072568;	
		position: relative;
		float: left;
		margin: 8px 0 0 0;
		
	}
	
	a.copy {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #072568;	
		position: relative;
		float: left;
		margin: 8px 0 0 0;
		
	}
	
	
	a.copy:hover {
		color: #df005e;	
	}
	
	a.copy2 {
		color: #072568;	
		}
		
	a.copy2:hover {
		color: #df005e;	
	}
	

	p.crumb{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #072568;	
		text-transform: uppercase;
		position: relative;
		float: left;
	}
	
	a.link {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #072568;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	p.errors{
		color:#ff0000;
		font: 0.7em Verdana, Arial, Helvetica, sans-serif;
	}
	
	div.breadCrumb a{
	color: #072568;
	text-decoration:none;
	text-transform: uppercase;
	}
/*----------------------------SUB NAV------------------------------------*/
	div.subNav{		
		width: 170px;
		/*position:relative;		
		height: 50px;
		margin:auto;
		padding: 0 1px 0 1px;*/
		background-color: #fff25e;

	}
	/*by Taim*/
	div.poll{		
		width: 170px;
		/*position:relative;		
		height: 50px;*/
		margin: 8px 0 0 0;
		padding: 0 1px 0 1px;
		background-color: #0090c4 ;

	}
	
	ul.leftNav {
		list-style:none;
		margin:0px;
		padding:0px 0 0 0;	
	}

	li.leftNav  {
		clear:left;
		width: 168px;
		background-image:url(/images/white.gif);
		background-color: #fff25e;
		background-position:bottom;
		background-repeat:repeat-x;
		margin: 0 1px 0 1px;
	}
	
	#leftNav li a {
		display: block;
		width: 100%;
		text-decoration: none;
		color: #072568;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		padding: 10px 0 10px 0;		
	}

	#leftNav li a:hover {
		color: #fff;
		background-color:#f2e65e;	
	}
	
	div.subNavCon {
		width: 185px;
		position: relative;
		margin:auto;
		float: left;
	}
	
	div.subBttm {
		position: relative;
		width: 170px;
	}
	
	span.subNav {
		display:block;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #fff;
		text-transform: uppercase;
		padding: 10px 10px 10px 10px;
	}
	
	h2.subNav {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #fff;
		text-transform: uppercase;
		padding: 10px 10px 10px 10px;
	}
	
	h2.catTitle	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;		
	}		
	
	span.catTitle	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;		
	}		
	
	p.subCatCopy {
		padding: 0 10px 0 10px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #002065;
		font-size: 0.6em;
		position:relative;
		clear:left;
	}
	
	span.subCatCopy {
		padding: 0 10px 0 10px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #002065;
		font-size: 0.6em;
		position:relative;
		clear:left;
	}
	
	div.secondNav{		
		width: 167px;
		position:relative;		
		margin:auto;
		background-color: #ffff99;
		clear: left;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		/*border: #00FF00 solid 1px;*/
	}
	
	ul.secondNav {
		list-style:none;
		margin:0px;
		padding:0px 0 0 0;	
	}

	li.secondNav  {
		clear:left;
		width: 166px;
		background-color: #ffff99;
		background-position:bottom;
		background-repeat:repeat-x;
		margin: 0 1px 0 1px;
	}
	
	#leftSub li a {
		display: block;
		text-decoration: none;
		color: #072568;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		padding: 10px 0 10px 0;		
	}

	#leftSub li a:hover {
		color: #fff;
		background-color:#ffffe3;
	}		

	
/*-----------FEEL-------------*/
	a:hover.feelLink { 
		background-color:#00FF00;
		color: #0033FF;
		}
	
	

/*-----------FUN*-------------*/

/*-----------WHAT-------------*/

/*-----------ASK*-------------*/	
	
	
	
/*----------------------------TITLE STYLES-------------------------------------*/		
				
	
	h1.pageTitle {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 2.8em;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	h2.titleStyle01 {
		font-family: "Courier New", Courier, monospace;
		font-size: 1.1em;
		color: #072568;
	}	
	
	h2.titleStyle01Narrow {
		font-family: "Courier New", Courier, monospace;
		font-size: 1.1em;
		color: #072568;
		width:400px;
	}	
	 /*by Taim*/
	h2.titleStyle02 {
		font:2em Verdana, Arial, Helvetica, sans-serif;
		color: #ff9900;
		text-decoration: none;
		text-transform: uppercase;
	}		
	
	
	h2.titleStyle03 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	}
	
	h2.titleStyle04 {
		font-family: "Courier New", Courier, monospace;
		font-size: 1.5em;
		font-weight:bolder;
	}
	
	h1.innerTitle01 {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.7em;
		text-decoration: none;
		text-transform: uppercase;
	}
	

	
/*----------------------------FOOTER-------------------------------------*/

	div.footer {
	position: relative;
	width: 747px;
	margin: 15px 0 0 10px;
	background-color:#a5d9ec;
	clear: left;
	padding-left:8px;
	}
	
	a.footerLink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #072568;
	text-decoration: none;
	text-transform: capitalize;		
	}
	
	a.footerLink:hover{
		color: #df005e ;
		 text-decoration: none;
	}
	
	p.footerCopy{
		position:relative;
		float:left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #072568;
		
		
		
	}


/*---------------------------FORM--------------------------------*/	

p.form {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #072568;	
	position: relative;
	float: left;
	margin: 0 0 0 0;
	
		
	}

div.hsn-form{
	float:left;
	clear:both;
	padding-top:20px;
}	

div.hsn-form-txt{
	float:left;
	clear:both;
	padding: 0 0 10px 0;
	}
	
div.leftForm {
	position: relative;
	float: left;
	width: 316px;
	/*border: #00CC00 solid 1px;*/

}

div.rightForm {
	position: relative;
	float: left;
	width: 170px;
	/*border: #990000 solid 1px;*/
	margin: 20px 0 0 0;
	
}

div.leftForm02 {
	position: relative;
	float: left;
	width: 118px;
	background-color:#fff;
	padding: 4px 5px 0 5px;

}

div.rightForm02 {
	position: relative;
	float: left;
	width: 390px;
	margin: 0 0 0 0;
	padding: 4px 0 0 5px;
	text-align:center;
}	

div.hsn-form-row{
	clear:both;	
	width: 316px;
}

div.hsn-form-row02{
	position: relative;
	float: left;
	margin: 0 0 0 10px;
	background-color:#fff;
	width: 170px;
}

div.hsn-form-row03{
	clear:both;
	width: 410px;
}

div.hsn-form-label{
	float:left;
	}
	
div.hsn-form-label3{
	position: relative;
	float:left;
	margin: 0 4px 0 0;
	padding: 0 0 0 0;
	}	

div.hsn-form-label2{
	float:left;
	clear:both;
	padding-bottom:5px;
	}	
	
div.hsn-form-input{
	float:right;
		
	}
	
div.hsn-form-input2 {
	position: relative;
	float:left;
	width: 380px;
	padding: 2px 0 0 0;		
	}	
	
.inputTxtStyle{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #072568;
	font-size: 0.7em;
	background-color:#fff;
	border-top: #fff5e5 solid 1px;
	border-right: #fff solid 0;
	border-bottom: #fff5e5 solid 1px;
	border-left: #fff solid 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	overflow: hidden;
}

.inputTxtStyle02{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #072568;
	font-size: 0.7em;
	background-color: #fff;
	border-top: #fff5e5 solid 2px;
	border-right: #fff solid 0;
	border-bottom: #fff5e5 solid 1px;
	border-left: #fff solid 0;
	margin: 0 0 0 4px;
	padding: 0 0 0 0;
/*	overflow: auto; */
	width: 515px;
}

.inputTxtStyle03{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #072568;
	font-size: 0.7em;
	background-color: #fff;
	border-top: #f6fbfd solid 2px;
	border-right: #fff solid 0;
	border-bottom: #f6fbfd solid 1px;
	border-left: #fff solid 0;
	margin: 0 0 0 4px;
	padding: 0 0 0 0;
/*	overflow: auto; */
	width: 515px;
}



div.hsn-form-input input, div.hsn-form-input select{
	width: 168px;
	margin: 0 0 0 0;
	}	
	
div.hsn-optin-input{
	float:left;
	}
	
div.hsn-optin-label{
	float:left;
	margin-left:10px;
	width:320px;
	}
	
div.hsn-optin-label02{
	position: relative;
	float:left;
	margin: 0 5px 0 8px;
	width:135px;
	}			
	
div.hsn-submit{
	float:right;
	clear:both;
	margin-top:20px;
	}
	
div.hsn-submit02{
	clear:left;
	margin-top:20px;
	}		

div.hsn-hdr-pic{
	float:left;
	width:535px;
	clear:both;
	text-align:center;
}

div.hsn-intro{
	float:left;
	width:535px;
	clear:both;
	padding: 10px 0 20px 20px;
}

div.hsn-intro li{
	list-style:square;
}

div.hsn-intro ul{
	list-style-position: inside;
}

.submitBttn {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform:capitalize;
	color: #072568;
	font-size: 0.7em;
	background-color: #fff25e;
	border: 0;
	margin: 0 4px 0 0;
	padding: 2px 2px 2px 2px;
}

.submitBttn2 {
	font: bold 0.7em Verdana, Arial, Helvetica, sans-serif;
	text-transform:capitalize;
	color: #fff;
	background-color: #a5d9ec;
	border: 0;
	margin: 0 4px 0 0;
	padding: 2px 2px 2px 2px;
}

.submitBttn3 {
	font: bold 0.7em Verdana, Arial, Helvetica, sans-serif;
	text-transform:capitalize;
	color: #fff;
	background-color: #647e77;
	border: 0;
	margin: 0 4px 0 0;
	padding: 2px 2px 2px 2px;
}

/*--------------------------------------------------------------------------------*/

/*------ styles for left side poll include --------*/

div.poll-container{
	float:left;
	clear:both;
	width: 170px;
	text-align:left;
	padding-bottom:20px;
	}	
	
div.poll-header{
	float:left;
	}	

div.poll-blue-bg{
	float:left;
	width: 160px;
	background-color: #a5d9ec;
	padding:5px;
	clear:both;
}

div.poll-green-bg{
	float:left;
	width: 160px;
	background-color: #cee7bf;
	padding:5px;
	clear:both;
}

label.poll{
		font: 0.7em Verdana, Arial, Helvetica, sans-serif;
		color: #072568;		
	}

input.poll-submit-btn {
	font: bold 0.7em Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	background-color: #0090c4;
	border: 0;
	margin: 0 4px 0 0;
	padding: 2px;
	text-transform:uppercase;
}

div.poll-result{
	float:left;
	clear:both;
	width:inherit;
	vertical-align:baseline;
	}

a.no-style{
	text-decoration:none;
	color: #072568;	
	}
	
	div.sins-callout{
	position:absolute;
	margin-top:-10px;
	right:5px;
	float:right;
	width:66px;
	height:70px;
	background-repeat:no-repeat;
	}
	
	.optout{
		 font: 0.7em Verdana, Arial, Helvetica, sans-serif;
		 }

#skincare { background-color:#e3f3f9; font:normal .9em Verdana, Helvetica, san-serif; }
    #skincare a { color:#072568; }
    #skincare div { margin:8px 8px 0 8px; }
    #skincare img { display:block; border:0; margin-bottom:8px; }
    #skincare h3 { display:inline; background-color:#fff; }
    #skincare p { margin:1em 0 0 0; font-size:.8em; }