/*
Title:		CMB-Cosmetics Style for screen media
Author: 	keren@topleftdesign.com
Updated: 	22 October 2005
*/

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, sans-serif;
	text-align: center;
	color: #333;
	background: #E1E3DF url(images/bg_butterfly.gif) no-repeat top left;
}

/* --[ links ]------------------------------- */

a:link { 
  	color: #3080CB;	text-decoration: none;

  	}
a:visited {
	color: #3080CB; text-decoration: none;

	}
a:hover {
	color: #008DC7;text-decoration: underline;

	}
a:active { 	color: #008DC7;}


/* --[ common elements ]---------------------- */

p {padding:0;margin:10px 0;line-height:150%;}

h1 {font-size: 17px; color: #008DC7;font-family:arial, sans-serif;margin:5px 0}
h2 {font-size: 18px; color: #8C318C;font-family:arial, sans-serif;font-weight:normal}

	

/* --[ layout structure ]--------------------- */

#wrap {	width: 700px;	margin:0 auto;	padding: 0;	text-align: left;	background-color:#fff;}
	
html>body #wrap.longer {height:1700px}
html>body #wrap.swatches {height:1200px}
#content {background: url('images/bg_content.gif')repeat-y top left;line-height: 130%;padding-bottom:3em;min-height:700px;background-color:#fff;}


#content.nobg {font-size: 95%;background: none;background-color:#fff;}



/* --[ header ]------------------------------- */

#header {margin: 0;padding: 0;
background: url(images/bg_header.gif) no-repeat top left;border-bottom: 7px solid #85489C;padding: 20px 30px 0 15px;height:100px;}

#title {clear:both;margin: 0;padding: 5px 0 0 15px;
border-bottom: 1px solid #85489C;}
#title p.date {float:right;font-size:17px;color: #008DC7;font-family:arial, sans-serif;font-weight:bold; margin-top:-28px; margin-right: 16px;}
html>body #title p.date {margin-right: 30px;}

#logo {clear:both;text-align:right;}


#subnav {clear:both;margin: 0;padding: 5px 0 0 35px;
border-bottom: 1px solid #85489C;}
/* SUBNAV*/

#subnav ul {margin:0;padding:0;height:24px;}
#subnav li {font: normal bold 12px Arial, Helvetica, sans-serif;display:inline;color: #008DC7;list-style:none;
 padding-right:.5em;margin-right:.5em;border-right:1px solid #008DC7}
#subnav li.viewrange {border-right:0px solid #008DC7}
 
#subnav li a {font: normal normal 12px Arial, Helvetica, sans-serif; color: #008DC7; text-decoration: none;line-height:1.6em; }
#subnav a:hover{color:#00709E;text-decoration: underline;}
#subnav a.on{color:#00709E;text-decoration: underline;}


/* --[ NAV ]------------------------------- */
#nav {clear:both;}
html>body #nav {}
#nav ul {padding:0 10px;margin:0;padding-top:30px}

		
/* --[ top nav ]------------------------------- */
#navigation a
{color: #000;background: #E0F2FA url('images/nav_left.gif') left top no-repeat;text-decoration: none;padding-bottom: 7px;padding-left: 5px;font:normal bold 11px verdana,arial;text-transform:uppercase;color:#491859;}
#navigation a span.bg
{background: url('images/nav_middle.gif') right top repeat-x;}
#navigation a:hover span.bg
{background: url('images/nav_middle_ov.gif') right top repeat-x;}
#navigation a.on span.bg
{background: url('images/nav_middle_ov.gif') right top repeat-x;}
#navigation a span.main
{background: url('images/nav_right.gif') right top no-repeat;padding-right:2px;}
#navigation a span.last
{background: url('images/nav_right-last.gif') right top no-repeat;}
#navigation a, #navigation a span
{display: block;float: left;}


/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a, #navigation a span{float: none}
/* End IE5-Mac hack */

#navigation a:hover
{color: #fff;background: #8CBFE8 url('images/nav_left_ov.gif') left top no-repeat;text-decoration: none;padding-left: 5px; padding-bottom: 7px;}
#navigation a.on
{color: #fff;background: #8CBFE8 url('images/nav_left_ov.gif') left top no-repeat;text-decoration: none;padding-left: 5px; padding-bottom: 7px;}
#navigation a:hover span
{background: url('images/nav_right_ov.gif') right top no-repeat;}
#navigation a.on span
{background: url('images/nav_right_ov.gif') right top no-repeat;}
#navigation ul
{list-style: none;padding: 0;margin: 0;background:}
#navigation li
{float: left;margin: 0;padding: 0;list-style:none;} 
#navigation li.last
{float: left;margin: 0;padding: 0;background: url('images/nav_right-last.gif') right top no-repeat;list-style:none;} 
#navigation span.right {background: url('images/nav_right.gif') right top no-repeat;padding:0;margin:0;width:3px;float:right}








/* --[ Home left and middle Cols ]------------------------------- */
#leftcol {float:left;background-color:#F1ECF4;background: url(images/bg_leftcol.gif) no-repeat top right;width:225px;font-size:11px;padding-top:10px;}
#leftcol h1{color:#8C318C;font-size:14px;margin:0;padding:0 20px;}
#leftcol h3{color:#7E7E7E;font-size:12px;margin:0;padding:0 20px;}
#leftcol h2{padding:0 20px;margin:3px 0;}
#leftcol p{padding:0 20px 5px 20px;margin:0;line-height:150%}
#leftcol h3{padding-top:4px;}
#leftcol a{color:#7E7E7E;text-decoration: none;}
 a:hover{text-decoration: underline;}



#midcol{float:left;font-size:11px;padding:10px;color:#7E7E7E;}
#midcol img{float:left;margin-right:6px;}
#midcol h2{padding:0;margin:0;line-height:150%}
#midcol p{clear:left;width:190px;margin-top:20px;}
#midcol a{font-weight:bold;text-decoration: none;}
#midcol a:hover{text-decoration: underline;}


/* --[ RIGHT COLUMN ]------------------------------- */
#rightcol h2{font-size: 15px;font-weight:bold;color:#7E7E7E;padding:0;margin:0;line-height:110%}
#rightcol{float:right;font-size:11px;padding:10px 10px 0 15px;height:435px;width:220px;}
#rightcol p{padding:0;color:#7E7E7E;margin-top:3px}
#rightcol a{font-weight:bold;text-decoration: none;}
#rightcol a:hover{text-decoration: underline;}


/* --[ INNER bodytext ]------------------------------- */
#bodytext{float:left;font-size:12px;padding:10px;width:420px;}
#bodytext h2{width:450px;color:#7E7E7E;font: normal bold 16px Arial, Helvetica, sans-serif;padding:0;margin:0;color:#7E7E7E;margin-bottom:12px;}
#bodytext p{color:#7E7E7E;line-height:180%}

#bodytext a{color: #3080CB;	text-decoration: underline;}
#bodytext a:hover{color:#008DC7;text-decoration: underline;}
#bodytext ol{font-size:12px;}
#bodytext table td{vertical-align:top;}
#bodytext li{color:#7E7E7E;line-height:150%;padding:5px;}
#bodytext h3{font: normal bold 15px Arial, Helvetica, sans-serif;padding:0;margin:0;
color:#fff;background-color:#78C0E4;padding:3px 6px;}
#bodytext h4{font: normal bold 13px Arial, Helvetica, sans-serif;
color:#7E7E7E;}

.photo{border: 1px solid #008DC7;margin-top:12px;margin-right:12px}

.photoright{border: 1px solid #008DC7;margin-left:12px}
.photo-rightside{border: 1px solid #008DC7;margin-top:30px;margin-right:12px}



/* --[ INNER bodytext - FYC ]------------------------------- */
#bodytext-fyc{background-color:#fff;float:left;font-size:11px;padding:10px;padding-right:20px}
#bodytext-fyc h2{font-size:15px;font-weight:bold;padding:0;margin:0;width:450px;color:#7E7E7E}
#bodytext-fyc p{color:#7E7E7E}
#bodytext-fyc .recommendedproducts{padding-left:30px}
#bodytext-fyc .swatchlink{margin-top:10px}
#bodytext-fyc .swatchlink a{text-decoration:underline}
#bodytext-fyc li{color:#7E7E7E;line-height:150%;padding:5px;margin-left:10px}
/* --[ INNER bodytext - wide ]------------------------------- */
#bodytext.wide{width:95%;}

html>body #bodytext.wide{width:90%;padding-right:10%;}




.fyc {width:300px;border-bottom:1px solid #ccc;border-left:1px solid #ccc;font: normal bold 12px Arial, Helvetica, sans-serif;color:#008DC7}
.fyc  td.pic{font: normal bold 13px Arial, Helvetica, sans-serif;color:#7B7B7B;border-right:1px solid #ccc;vertical-align:top;padding-right:12px;border-top:1px solid #ccc;padding:12px;}
#bodytext-fyc .fyc td.pic h2{color:#008DC7;width:190px;}
#bodytext-fyc .fyc td.pic b{color:#7B7B7B;}
.fyc td.pic img {float:left;margin: 10px 30px 0 0;border: 1px solid #008DC7;}
.fyc td.pic ul {font: normal bold 12px Arial, Helvetica, sans-serif;color:#7B7B7B;}
.fyc td.pic li {}
.fyc td.makeup{font: normal bold 13px Arial, Helvetica sans-serif;border-right:0px solid #ccc;;color:#7B7B7B;border-top:1px solid #ccc;vertical-align:top;padding:5px;}
.fyc td.makeup h4{font: normal bold 13px Arial, Helvetica, sans-serif;color:#008DC7;clear:both;padding-left:6px;padding-right:0;margin:0}
.fyc td.makeup p{padding-left:6px;}



.findyourcolours {font: normal bold 12px Arial, Helvetica, sans-serif;color:#008DC7;width:630px;border:1px solid #ccc;padding:15px}
.findyourcolours  td.pic img{float:left; margin-left:10px;border:1px solid #7E7E7E}

.findyourcolours  td.pic ul{float:left;font-size:14px;line-height:150%;margin-left:12px;}

ul.tick{margin-left:40px;padding-left:40px;border:0px solid #000;}
ul.tick li{list-style:  url(images/tick.gif);margin-left:30px}



/* --[ COLS-find your colours ]------------------------------- */
#bodytext-narrow{float:left;font-size:12px;padding:10px;width:270px}
html>body #bodytext-narrow{float:left;font-size:12px;padding:10px;width:240px}
#bodytext-narrow h2{font-size:15px;font-weight:bold;padding:0;margin:0;color:#7E7E7E}
#bodytext-narrow p{color:#7E7E7E;}
#bodytext-narrow h3{font-size:15px;padding:0;margin:0;color:#008DC7}
#bodytext-narrow h4{font-size:13px;padding:10px 0;margin:0;color:#7E7E7E;line-height:120%;font-ffamily:arial,sans-serif;}



#findyourcolours-right{width:420px;float:right;padding:10px;}
#findyourcolours-right p img{float:left;margin-right:6px;border:1px solid #ccc}

#findyourcolours-right p{font-size:11px;height:65px;margin:0;padding:10px 15px 10px 5px;line-height:130%;color:#434343}


#findyourcolours-right p.lightblue{clear:both;background-color:#F6FEFF;}
#findyourcolours-right p.darkblue{clear:both;background-color:#E4F4FB}
#findyourcolours-right a {color:#212121;font-weight:bold;}


#footer-blue {text-align:right;clear: both;font-size: 12px;color:#fff;background-color:#008DC7;padding:5px;}

#footer-blue a {text-align:right;clear: both;font-size: 12px;color:#fff;background-color:#008DC7;padding:5px;}




hr {height:1px; width:550px;color: #008DC7}




/* --[ SHOP ]------------------------------- */

#shop{margin-left:30px;width:600px;text-align:left;}
#shop h2{font-size:16px;font-weight:normal;padding:0;margin:25px 0 10px 0 ;color:#7E7E7E;width:190px}
#shop p{margin-top:2px;}
#shop p b{font-family:arial, sans-serif}
#shop h2 b{font-weight:bold;}

#shop table td{vertical-align:top}
#shop  a{font-size: 12px;font-weight:bold;}

.skincare{float:left; border:0px solid #000;margin-left:10px;width:270px}

/* --[ SCARVES ]------------------------------- */

#bodytext table.scarves {width:400px;margin-top:20px}
#bodytext table.scarves td{vertical-align:top;font-size:12px;line-height:130%;color:#7E7E7E;}
#bodytext table.scarves td h2{width:115px;margin-bottom:0}
#bodytext table.scarves td a{vertical-align:top;font-size:12px;line-height:130%;color:#7E7E7E;text-decoration: none;}

/* --[ FOOTER ]------------------------------- */
#footer {text-align:right;margin-top:.5em;clear: both;font-size: 11px;color:#058FC8;padding:5px 0;background-color: #E1E3DF;}
#footer a {color:#058FC8;}

/* --[CASE STUDIES ]------------------------------- */
.casestudies{width:480px}
.casestudies td p, .casestudies td li{font-size:12px;margin-top:0;padding-top:0}
.casestudies td img{margin-right:10px;border:1px solid #048FC8}
.casestudies td{width:280px;}




#bodytext p.copyprob {color:#ff0033;font: normal bold 15px verdana, sans-serif;}