/*
 * Reset Stylesheet
 * Creates a baseline that smooths out differences imposed by various default browser styles
 *
 * Thanks to http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */
 
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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/**
 * Global CSS Styles
 */

/*Index
	--------------------------
	Text Reset
	Full Wides
	Header
	Main
	Footer
	Common Elements 
	Containers - Blocks
	CSS Hacks	
	--------------------------*/

/* =Text Reset
Taken from:
http://www.alistapart.com/articles/howtosizetextincss

Note: 
Default browser text size roughly 16px.
A font-size of 0.875em is equal to 14px.
eg: 16 x 0.875 = 14
-----------------------------------------------------*/


body {
	font-size:100%;
	line-height:1.125em; /* !- will need to change */
	font-family: Arial, sans-serif;
}

td {
	font-family: Arial, sans-serif;
}

body, input {
	color: #666;
}

img.collapse {
  height: 0 !important;
}

sup{
	font-size: 0.75em;
	font-weight: 100;
	position: relative;
	top:-2px;
}

a {
	color: #4E6780;
}

a:hover {
	color: #102942;
}

button {
	cursor: pointer;
}

#header,
#main,
#footer{
	font-size:0.75em;/* = 12px. May  have to change */
}

em{
	font-style:italic;
}

/* =Full Wides
-----------------------------------------------------*/
body{
	width:100%;
}

.headerWide{
	width:100%;
	height: 114px;
	background: url(../img/interface/nav-bkd.png) repeat-x left bottom #fff;
}

.mainWide{
	width:100%;
	background: url(../img/interface/main-bkd.png) repeat-x left top #fff;
}

.footerWide{
	width:100%;
	background: url(../img/interface/footer-bkd.png) repeat-x left top #fff;
	margin: 38px 0 0 0;
}

/* =Header 
-----------------------------------------------------*/
#header {
	width: 895px;
	margin:0 auto;
	height:114px;
	position:relative;
	z-index:1; /* Float the country selector over the main content area */
}

#header #proactivSolutionLogo {
  width: 116px;
	position: absolute;
	left: -3px;
	top: -65px;
}
#header #proactivSolutionLogo a {
	display: block;
	height: 42px;
	width: 125px;
	background: url(../img/proactiv-logo.png) 0 0 no-repeat;
	text-indent: -99999em;
}

#header a {
	color: #4e6780;
	text-decoration: none;
}

#header a:hover {
	color: #102942;
}


#header strong {
	font-weight: bold;
}


/*Primary Navigation*/
#header .primaryNavigation {
	left:44px;
	position:absolute;
	top:84px;
}

#header .primaryNavigation li {
	float:left;
}

#header .primaryNavigation li a {
	display:block;
	height: 30px;
	text-indent: -5000px;
	overflow:hidden;
	background-repeat:no-repeat;
	background-position: 0 0;
}


#header .primaryNavigation li a:hover {
	background-position: 0px -50px;
}

#header .primaryNavigation li a:active{
	background-position: 0px -100px;
}


#header .primaryNavigation .home a{
	background: url(../img/interface_nav-50-300.png) 0px 0px;
	width:61px;
}
#header .primaryNavigation .home a:hover {
	background: url(../img/interface_nav-50-300.png) 0px -50px;
}
.body_homepage #header .primaryNavigation .home a,
#header .primaryNavigation .home a:active {
	background: url(../img/interface_nav-50-300.png) 0px -100px;
}


#header .primaryNavigation .system a{
	background: url(../img/interface_nav-50-300.png) -300px 0px;
	width:122px;
}
#header .primaryNavigation .system a:hover{
	background: url(../img/interface_nav-50-300.png) -300px -50px;
}
.body_system #header .primaryNavigation .system a,
.system.dermatologists #header .primaryNavigation .system a,
#header .primaryNavigation .system a:active {
	background: url(../img/interface_nav-50-300.png) -300px -100px;
}


#header .primaryNavigation .about a{
	background: url(../img/interface_nav-50-300.png) -600px 0px;
	width:94px;
}
#header .primaryNavigation .about a:hover{
	background: url(../img/interface_nav-50-300.png) -600px -50px;
}
.aboutacne #header .primaryNavigation .about a,
#header .primaryNavigation .about a:active{
	background: url(../img/interface_nav-50-300.png) -600px -100px;
}



#header .primaryNavigation .how a{
	background: url(../img/interface_nav-50-300.png) -900px 0px;
	width:105px;
}
#header .primaryNavigation .how a:hover{
	background: url(../img/interface_nav-50-300.png) -900px -50px;
}
.body_howtouse #header .primaryNavigation .how a,
#header .primaryNavigation .how a:active{
	background: url(../img/interface_nav-50-300.png) -900px -100px;
}



#header .primaryNavigation .stories a{
	background: url(../img/interface_nav-50-300.png) -1200px 0px;
	width:96px;
}
#header .primaryNavigation .stories a:hover{
	background: url(../img/interface_nav-50-300.png) -1200px -50px;
}
.stories #header .primaryNavigation .stories a,
#header .primaryNavigation .stories a:active{
	background: url(../img/interface_nav-50-300.png) -1200px -100px;
}



#header .primaryNavigation .celebrity a{
	background: url(../img/interface_nav-50-300.png) -1500px 0px;
	width:133px;
}
#header .primaryNavigation .celebrity a:hover{
	background: url(../img/interface_nav-50-300.png) -1500px -50px;
}
.body_celebrity #header .primaryNavigation .celebrity a,
#header .primaryNavigation .celebrity a:active{
	background: url(../img/interface_nav-50-300.png) -1500px -100px;
}



#header .primaryNavigation .club a{
	background: url(../img/interface_nav-50-300.png) -1800px 0px;
	width:99px;
}
#header .primaryNavigation .club a:hover{
	background: url(../img/interface_nav-50-300.png) -1800px -50px;
}
.body_clubcatalog #header .primaryNavigation .club a,
#header .primaryNavigation .club a:active{
	background: url(../img/interface_nav-50-300.png) -1800px -100px;
}



#header .primaryNavigation .order a{
	background: url(../img/interface_nav-50-300.png) -2100px 0px;
	width:199px;
	margin: 0 0 0 41px;
}
#header .primaryNavigation .order a:hover{
	background: url(../img/interface_nav-50-300.png) -2100px -50px;
}
.body_order #header .primaryNavigation .order a,
#page_quiz #header .primaryNavigation .order a,
#header .primaryNavigation .order a:active{
	background: url(../img/interface_nav-50-300.png) -2100px -100px;
}

#header	.cAbsPH_TopPHFlagHeader
{
	position:absolute;
	right:15px;
	bottom:83px;
	float:left;
}

#header .cAbsUS_TopUSFlagHeader
{
	position:absolute;
	right:105px;
	bottom:83px;
	float:left;
}

#header .cAbsPH_TopsubHeader 
{
	position:absolute;
	right:50px;
	bottom:90px;
	font-size: 0.95em;
	float:left;
	color:#4e6780;
}

#header .cAbsUS_TopsubHeader
{
	position:absolute;
	right:140px;
	bottom:90px;
	font-size: 0.95em;
	float:left;
	color:#4e6780;
}

/*Secondary Navigation*/
#header .secondaryNavigation{
	position:absolute;
	bottom:55px;
	right:17px;
	font-size: 0.95em;	
}

#header .secondaryNavigation li{
	float:left;
}

#header .secondaryNavigation a{
	color:#4e6780;
	text-decoration: none;
	background-image:url(../img/interface/btn-arrow.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	padding-left: 22px;
	display:block;
	height: 18px;
	float:left;
}

#header .secondaryNavigation a:hover{
	color:#102942;
	background-position: -300px 0;
}

#header .secondaryNavigation a:active{
	color:#102942;
	background-position: -600px 0;
}

#header .secondaryNavigation .customercare,
#header .secondaryNavigation .cart{
	margin-left: 10px;
}

#header .secondaryNavigation .cart span {
  display: block;
  margin-left: 0.34em;
  float: left;
  font-size: 0.96491228em; /* 11 points */
  color: #4E6780;
}

/*Custom Drop Down*/
#header .secondaryNavigation .swapped{
	width: 267px;
}

/* Info Panel*/

/*
	'On' styles for tab are in js_on_styles.css
*/

body #header #welcome ul.accountLinks li.signOut a {
	background: url(../img/interface/link-dottedline.gif) left bottom repeat-x;
	position: relative;	
}

#header .infoPanel {
	position: absolute;
	right: 17px;
	top:18px;
	text-align: right;
}
#header #infopanel_loggedin {
  top: 13px;
}

#header .infoPanel div{
	float:left;
}

#header .infoPanel a,
a.dotted {
	background: url(../img/interface/link-dottedline.gif) left bottom repeat-x;
}

#header .infoPanel a:hover,
a.dotted:hover{
	background: url(../img/interface/link-dottedline-hover.gif) left bottom repeat-x;
}

#header .infoPanel #emailGroup{
	position:relative;
	left:-8px;
}

#header .infoPanel label{
	position: relative;
	z-index:8;
	color:#999999;
	font-size: 0.93em;
	font-weight:100;
}

#header #emailGroup label{
	left:-2px;
	top: -1px;
	height:22px;
}

#header #passwordGroup label{
	left:-1px;
	top: -1px;
	height:22px;
}

#header #emailGroup input,
#header #passwordGroup input{
	height:16px;
	position: relative;
	/*ADDED*/
	z-index:9;
}


#header .infoPanel input,
.notFocussed input {
	background-color: #fff;
	
}

#header #emailGroup.notFocussed input,
#header #passwordGroup.notFocussed input {
	z-index: 1;
}

.focussed input,
#header .infoPanel input:focus{
	position: relative;
	background-color: #fff;
	/*z-index:9;*/
}

#login_email{
	width: 138px;
}

#login_password{
	width: 108px;
}

#login_email,
#login_password{
	border:1px solid #ccc;
}

.infoPanel button{
	border:none;
	cursor:pointer;	
	background: url(../img/interface/btn-sign-in.png) 0 0 no-repeat;
	width:67px;
	height:22px;
	margin: 0 5px;
}

.infoPanel button:hover{
	background-position: -300px  0px;
}

#header .infoPanel #rememberGroup {
	text-align: left;
	line-height: 1.0em;
	width: 104px;
}

#header .infoPanel #rememberGroup a {
		font-size: 0.9em;
		background: url(../img/interface/link-dottedline.gif) left bottom repeat-x transparent;
		position: relative;
}

#header .infoPanel #rememberGroup input {
	float: left;
}

#header .infoPanel #rememberGroup div {
	font-size: 0.9em;
	margin: 0 0 0 5px;
	color: #666;
}

#header .infoPanel #rememberGroup label{
	color: #666;
	line-height: 1.0em;

}

#header .infoPanel #forgotGroup {
	text-align: left;
	line-height: 1.0em;
	border-left: 1px solid #999;
	padding: 1px 0 0 10px;
	font-size: 0.9em;
	width: 45px;
}

#header .infoPanel #forgotGroup a {
	font-size: 0.9em;
	position: relative;
	background: url(../img/interface/link-dottedline.gif) left bottom repeat-x transparent;
	text-decoration: none;
}
#header .infoPanel #forgotGroup a:hover {
	background: url(../img/interface/link-dottedline-hover.gif) left bottom repeat-x;
}

/* JavaScript enabled style login drawer */

/*styles for remember me inbetween state*/
#header #infopanel_remember.infoPanel form {
	display: none;
	visibility: hidden;
}

#infopanel_loggedout.loginDrawer,
#infopanel_remember.loginDrawer {
  background: url(../img/interface/nav-login-bg.png) no-repeat;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 5px;
  width: 535px;
  height: 75px;
}

#header #infopanel_loggedout.loginDrawer form .validation-advice,
#header #infopanel_remember.loginDrawer form .validation-advice {
	font-size: 0.75em; /* 9 points */
	color: #993333;
	position: absolute;
	top: -27px;
	text-transform: uppercase;
}

#infopanel_loggedout.loginDrawer form#formHeadLogin,
#infopanel_remember.loginDrawer form#formHeadLogin {
  padding-top: 42px;
}

#header #infopanel_loggedout.loginDrawer #emailGroup,
#header #infopanel_remember.loginDrawer #emailGroup{
	position:relative;
	left:-17px;
	float: left;
}
#header #infopanel_loggedout.loginDrawer #emailGroup .validation-advice,
#header #infopanel_remember.loginDrawer #emailGroup .validation-advice  {
  left: 28px;
}

#header #infopanel_loggedout.loginDrawer #passwordGroup,
#header #infopanel_remember.loginDrawer #passwordGroup {
  float: left;
  left: -66px;
  position: relative;
}
#header #infopanel_loggedout.loginDrawer #login_password,
#header #infopanel_remember.loginDrawer #login_password {
  width: 96px;
}
#header #infopanel_loggedout.loginDrawer #passwordGroup .validation-advice,
#header #infopanel_remember.loginDrawer #passwordGroup .validation-advice {
  left:50px;
}

#header #infopanel_loggedout.loginDrawer #signInBtn,
#header #infopanel_remember.loginDrawer #signInBtn {
  float: left;
  position: relative;
  left: -64px;
  top: -1px;
}
#header #infopanel_loggedout.loginDrawer #signInBtn button,
#header #infopanel_remember.loginDrawer #signInBtn button {
  background-image: url(../img/interface/btn-sign-in-dark.png)
}

#header #infopanel_loggedout.loginDrawer label,
#header #infopanel_remember.loginDrawer label{
	position: relative;
	z-index:8;
	color:#999999;
	font-size: 0.93em;
	font-weight:100;
}

#header #infopanel_loggedout.loginDrawer input,
#header #infopanel_remember.loginDrawer input {
	background-color: #fff;
}

#header #infopanel_loggedout.loginDrawer input:focus,
#header #infopanel_remember.loginDrawer input:focus{
	position: relative;
	background-color: #fff;
	/*z-index:9;*/
}

#infopanel_loggedout.loginDrawer button,
#infopanel_remember.loginDrawer button{
	border:none;
	cursor:pointer;	
	background: url(../img/interface/btn-sign-in.png) 0 0 no-repeat;
	width:67px;
	height:22px;
	margin: 0 5px;
}

#infopanel_loggedout.loginDrawer button:hover,
#infopanel_remember.loginDrawer button:hover{
	background-position: -300px  0px;
}

#header #infopanel_loggedout.loginDrawer #rememberGroup,
#header #infopanel_remember.loginDrawer #rememberGroup {
	text-align: left;
	line-height: 1.0em;
	width: 104px;
  position: absolute;
  top: 40px;
  left: 424px;
}

#header #infopanel_loggedout.loginDrawer #rememberGroup a,
#header #infopanel_remember.loginDrawer #rememberGroup a {
		font-size: 0.9em;
		background: url(../img/interface/link-dottedline.gif) left bottom repeat-x transparent;
		position: relative;
}

#header #infopanel_loggedout.loginDrawer #rememberGroup input,
#header #infopanel_remember.loginDrawer #rememberGroup input {
	float: left;
	margin: 5px;
}

#header #infopanel_loggedout.loginDrawer #rememberGroup div,
#header #infopanel_remember.loginDrawer #rememberGroup div  {
	font-size: 0.9em;
	margin: 0 0 0 5px;
	color: #666;
}

#header #infopanel_loggedout.loginDrawer #rememberGroup label,
#header #infopanel_remember.loginDrawer #rememberGroup label{
	color: #666;
	line-height: 1.0em;

}

#header #infopanel_loggedout.loginDrawer #forgotGroup,
#header #infopanel_remember.loginDrawer #forgotGroup{
	position: absolute;
	top: 43px;
	left: 333px;
}
#header .loginDrawer #forgotGroup br,
#header .loginDrawer #rememberGroup br {
  float: left;
}

#header #infopanel_loggedout.loginDrawer #forgotGroup a,
#header #infopanel_remember.loginDrawer #forgotGroup a {
	font-size: 0.9em;
	position: relative;
	text-decoration: none;
	background: url(../img/interface/link-dottedline.gif) left bottom repeat-x;
}

#header #infopanel_loggedout.loginDrawer #forgotGroup a:hover,
#header #infopanel_remember.loginDrawer #forgotGroup a:hover {
	background: url(../img/interface/link-dottedline-hover.gif) left bottom repeat-x;
}

/*Logged in Welcome Message*/

#header #welcome {
	font-size: 0.95em;
	line-height:1.125em;
	white-space: nowrap;
}

#header #welcome ul.accountLinks,
#header #welcome p {float: left;}

#header #welcome a {
	background: url(../img/interface/link-dottedline.gif) left bottom repeat-x;
}

#header #welcome a:hover {
	background: url(../img/interface/link-dottedline-hover.gif) left bottom repeat-x;
}

#header #welcome ul.accountLinks li{
	float: left;
	background: url(../img/interface/pipe_grey.png) 0 center no-repeat;
	padding: 0 10px;
}

#header #welcome ul.accountLinks li a{
	display: block;
}

#header #welcome ul.accountLinks li.details {
	padding-left: 20px;
	background-position: 10px center;
}

#header #welcome ul.accountLinks li.signOut {
	padding-right: 0;
}


#header #welcome ul.accountLinks li.signOut a,
#header #welcome ul.accountLinks li.signIn a {
	font-weight: bold;
}


/* =Main 
-----------------------------------------------------*/
#main{
	width: 895px;
	margin:0 auto;
	position:relative;
	padding-top: 20px;
	color: #757777;
}

#main a {
	color: #4e6780;
	text-decoration: none;
	}

#main a:hover {
	color: #102942;
	}

/*this inherits aggressively so set to specific areas as needed*/	
#main p a,
#main ul.bulletList a,
#main dl a,
#main form a  {
	background: url(../img/interface/link-dottedline.gif) left bottom repeat-x;
}

#main p a:hover,
#main ul.bulletList a:hover,
#main dl a:hover,
#main form a:hover  {
	background: url(../img/interface/link-dottedline-hover.gif) left bottom repeat-x;
}

#main p {
	margin-bottom: 10px;
	line-height: 1.335em;
}

#main strong {
	font-weight: bold;
}

#main ul.bulletList {
	list-style: disc;
	padding: 0 10px;
	margin: 0 10px 10px 10px;
}

#main #primaryContent {
  width: 675px;
  background-color: #fff;
	padding: 5px;
  float: right;
}

#main #primaryContent .pageHead{
	padding: 0 0 20px 0;
	margin: 30px 15px 0 15px;
	}

/*For layouts that require more padding*/
#main #primaryContent .contain{
	padding: 0 14px 0 15px;
}





/*Titles*/

#main #primaryContent h1 {
	text-indent: -99999px;
	background-repeat: no-repeat;
	height: 53px;
	margin: 0 0 5px 0;
}

body.error-page #main #primaryContent h1 {
	background: url(../img/headers/titles/title-error.png) 0 0 no-repeat !Important;
}

/*h1 background images are set in section-specific files*/





#main #primaryContent h2 {
	height: 35px;
	text-indent: -99999em;	
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -700px;
}

/*h2 background images*/

/*0.4*/ .kiosklocator #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -800px;
}

/*1.0*/ .system #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -1000px;
}

/*2.0*/ .aboutacne #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt 0px;
}

/*3.0*/ .howtouse #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -400px;
}

/*4.0*/ .order #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -600px;
}

/*5.0*/ .stories #main #primaryContent h2 {
	background:  #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -900px;
}

/*6.0*/ .celebrity #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -100px;
}

/*7.0*/ .customercare #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -300px;
}

/*8.0*/.body_myaccount #main #primaryContent h2,
.body_login #main #primaryContent h2,
.nameandpassword #main #primaryContent h2,
.body_cart.myaccount #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0 -500px;
}

/*9.0*/ .clubcatalog #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -200px;
}

/*reactivate*/ .reactivation #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -1100px;
}

/*404*/ .fourohfour #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -1200px;
}

/*promo*/ .promo #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -1300px;
}

/*promo - Refer a Friend*/ .raf #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -1400px;
}

/*promo - Redeem a Promocode*/ .promocode #main #primaryContent h2 {
	background: #c4e1e2 url(../img/headers_sub-100.png) no-repeat scroll 0pt -1500px;
}

#main #primaryContent h3{
	border-bottom:1px solid #67BACB;
	color:#67BACB;
	font-weight:bold;
	margin: 0 0 10px 0;
	padding: 0 0 4px 0;
	line-height: 1.0em;
}

#main #primaryContent h4{
	font-weight: bold;
}

#main #primaryContent p.intro {
	color: #67bacb;
	font-size: 1.165em;
	line-height:1.145em;
}

#main #primaryContent form input,
#main #primaryContent form select {
	border: 1px solid #c3c3c3;
	color:#666;
}

/*Form Validation*/

/*PHP form errors*/

#main #primaryContent .contain.phpformerror {
	padding-bottom: 20px;
}

#main #primaryContent .contain.phpformerror h4,

#main #primaryContent .contain.phpformerror ul li {
	color: #993333;
}
#main #primaryContent .contain.phpformerror p.error-instruct {
	font-size: 0.95em;
	line-height: 1.1em;
}


/*JS validation errors*/

#main #primaryContent form input.validation-failed,
#main #primaryContent form select.validation-failed,
#main #primaryContent form textarea.validation-failed,
#main #primaryContent form .validation-failed input,
#main #primaryContent form .validation-failed select,
#main #primaryContent form .validation-failed textarea,
#header .infoPanel form input.validation-failed {
	border: 1px solid #993333 !Important;
	color: #993333 !Important;
}

#main #primaryContent form .validation-advice,
#header .infoPanel form .validation-advice {
	font-size: 0.95em !Important;
	color: #993333 !Important;
	float: none !important;
}

#header .infoPanel form .validation-advice {
	font-size: 0.95em;
	margin-top: -3px;
}


#main #primaryContent form .validation-passed .validation-advice {
	display: none;
}

#main #primaryContent form .checkGroup input {
	border: 0 !Important;
}

#main #primaryContent .primaryBody {
	margin: 0 210px 0 0;	
}

#main #primaryContent .contain .primaryBody {
	margin: 0 230px 0 0;
}

#main #primaryContent .contain .primaryBody h3 {
	margin: 12px 0 7px 0;
	position: relative;
}

#main #primaryContent .contain .primarySidebar, 
#main #primaryContent .primarySidebar  {
	float: right;
	width: 205px;
}

#main #secondaryContent {
	background: #eee;
	width: 195px; /*195px - 10px*/
	padding: 5px;
	float: left;
}

#main #primaryContent .contain #tertiaryContent .blockContent,
#main #primaryContent .contain .primarySidebar .blockContent{
	padding: 0px 10px 10px 10px
}



/* =Footer 
-----------------------------------------------------*/
#footer{
	width: 895px;
	margin: 0 auto;
	position:relative;
	color: #999;
}

#footer ul {
	padding: 27px 0;
	margin: 0 auto;
}

#footer ul li {
	float: left;
}

#footer ul li a {
	line-height: 1.0em;
	display: block;
	color: #4e6780;
	text-decoration: none;
	padding: 3px 17px;
	border-right: 1px solid #fff;
	font-size: 0.8em;
}

#footer ul li.last.privacy a {
	border-right: none;
}

#footer ul li.terms a {
	padding-left: 6px;
}

#footer div.copyright {
	text-align: center;
	font-size: 0.8em;
	/*width: 49%;*/
	width:430px;
	min-width: 49%;
	margin: 18px auto;
	white-space: nowrap;
} 

#footer ul li img.orgTapsLogo
{
	margin-left:255px
}


#footer ul li img.orgWatsonsLogo
{
	margin-left:15px
}

#footer div.copyright a.logo {
	display: block;
	text-indent: -999999em;
	background: url(../img/footer-guthy-renker-logo.png) 0 0 no-repeat;
	width: 119px;
	height: 17px;
	float: left;
	margin: 0 20px 0 0;
}

/* Footer country selector */
#locale_selector {
  display: none;
}

#footer .countryselector {
 /* position: relative;*/
	width: 200px;
}

#footer .countryselector label,
#footer .countryselector p{
 font-size: 0.8em;
 color: #4E6780;
 float: left;
 padding: 3px 20px;
 display: block;
 line-height: 1em;
 padding-right: 7px;
}

.countryselector select {
	position: absolute;
	width: 130px;
	right: 0;
}

#footer .countryselector div{
/*	position:relative;*/
	z-index: 20;
}
#footer .countryselector p{
	width:110px;

}
#footer #countryList {
	width: 130px;
	height: 18px;
	overflow:hidden;
	float: left;
	border: 1px solid #9c9c9c;
	background: #FFF;
	padding: 0;
	position: absolute;
	top: 6px;	
	right: 5px;
}

#footer #countryList ul { 
  /*overflow: auto;*/
	overflow: hidden;
}

#footer #countryList li.hideable {
  display: none;
}

#footer #countryList li a {
	float:none;
	position: relative;
	padding: 0px 5px 0px 34px;
	font-size:0.8em;
	font-weight:900;
	line-height: 1.8764442em;
	width:128px;
	color: #666;
	background-position: 10px 3px;
	background-repeat: no-repeat;
	height: 18px;
}
#footer #countryList li.usa {
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(../img/interface/country-selector-bg.png) no-repeat;
  z-index: 10;
  z-index: 10;
}

#footer #countryList li a {
	background: #fff url(../img/flags-20.png) no-repeat scroll 10px 3px;
}
#footer #countryList li.usa a{
	background-position: 10px 3px;
}
#footer #countryList li.uk a{
	background-position: 10px -17px;
}
#footer #countryList li.ca a{
	background-position: 10px -37px;
}
#footer #countryList li.ja a{
	background-position: 10px -97px;
}
#footer #countryList li.aus a{
	background-position: 10px -57px;
}
#footer #countryList li.ger a{
	background-position: 10px -77px;
}
#footer #countryList li.den a{
	background-position: 10px -157px;
}
#footer #countryList li.fin a{
	background-position: 10px -117px;
}
#footer #countryList li.nor a{
	background-position: 10px -177px;
}
#footer #countryList li.swe a{
	background-position: 10px -137px;
}
#footer #countryList li.oth a{
	background-position: 10px -197px;
}
#footer #countryList li.ind a{
	background-position: 10px -216px;
}
#footer #countryList li.china a{
	background-position: 10px -237px;
}
#footer #countryList li a:hover {
	background-color: #eee;
}
#footer #countryList li.usa a,
#footer #countryList li.usa a:hover {
	background-color: transparent;
}


/* =Containers - Blocks
-----------------------------------------------------*/

/*temp - likely handled though containers in layout instead*/
.blockGrey {
	background: #eee;
	padding: 3px;
	margin: 0 0 5px 0;
}


.block {
	background: url(../img/interface/block_left.gif) 0 0 repeat-y #fff;  
}

.blockTop {
	height: 5px;
	background: url(../img/interface/block_lefttop.gif) 0 0 no-repeat; 
	margin-bottom: 0;
}

.blockTopRight {
	/*height: 5px;*/
	padding-top: 5px;
	background: url(../img/interface/block_righttop.gif) right 0 no-repeat;   
}

.blockContent {
	/*padding: 0 10px;*/
	background:transparent url(../img/interface/block_right.gif) repeat-y scroll right 0;
	padding: 3px 12px 0px;
/*	overflow: auto;*/
	overflow: hidden;
}	

.blockContent a.bottomLink {
	font-size: 0.9em;
	display: block;
	border-top: 1px solid #ccc;
	/*margin: 10px 0 0 0;*/
	padding-top: 4px;
	font-weight: bold;
}

.blockContent a.orderNowLink 
{
	font-size: 0.9em;
	display: block;
	padding-left: 20px;
	padding-top: 394px;
	font-weight: bold;
	float:left;
}

.blockBottom {
	height: 5px;
	background: url(../img/interface/block_leftbottom.gif) 0 0 no-repeat;  
}

.blockBottomRight {
	/*height: 5px;*/
	padding-top: 5px;
	background: url(../img/interface/block_rightbottom.gif) right 0 no-repeat;    
}


#main #primaryContent .blockContent h3 {
	padding-top: 6px;
}

/*Tertiary nav variation - no padding*/

.block.nav .blockContent,
.block.related .blockContent {
	padding: 0 1px;
}

.block.nav .blockContent {
	padding-bottom: 6px;
}

.block.nav .blockContent h5,
.block.related .blockContent h5 {
	padding-left: 10px;
}


/*Tertiary Nav "order now" module*/

.block.orderNowPromo {
	margin-bottom: 5px;
}

.block.orderNowPromo .blockContent {
	padding: 1px;
}

.block.orderNowPromo .blockContent .orderContent  {
	background: url(../img/interface/order_back.png) 0 0 repeat-x;
	border-top: 2px solid #67bacb;
	margin-top: 7px;
	padding: 13px 12px;
}

.block.orderNowPromo .blockContent h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 0px -1200px;
	text-indent: -99999em;
	height: 26px;
	width: 121px;
	margin-bottom: 10px;
}

.block.orderNowPromo .blockContent p {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 0px -1300px;
	text-indent: -99999em;
	height: 41px;
	width: 136px;
}

.block.orderNowPromo a.btnOrderNow {
	display: block;
	height: 21px;
	width: 150px;
	background: url(../img/interface/btn-w-3.0.png) 0 0 no-repeat;
	text-indent: -99999em;
	margin: 20px auto 0;
}

.block.orderNowPromo a.btnOrderNow:hover {
	background-position: -300px 0;

}




/* =Containers - Tabs - inprogress
-----------------------------------------------------*/

.tabBlock {
	position: relative;
}

ul.tabs {
	height: 40px;
}

ul.tabs li {
	float: left;
}

ul.tabs li a {
	display: block;
	background: #fff;
}

ul.tabs li.active a {
	border-bottom: 0;
	margin-top: 1px;
	margin-bottom: -1px;
}




/* =Common Elements
-----------------------------------------------------*/
/*Order Steps*/
#orderSteps li{
	background-repeat: no-repeat;
	background-position: 0px 0px;
	float:left;
}

#orderSteps .l1{
	padding-left: 23px;
	background-image: url(../img/checkout-step-1.png);
}

#orderSteps .l2{
	padding-left: 37px;
	background-image: url(../img/checkout-step-2.png);
	margin-left:10px;
}

#orderSteps .l3{
	padding-left: 37px;
	background-image: url(../img/checkout-step-3.png);
	margin-left:10px;
}

#orderSteps.step1 li.l1,
#orderSteps.step2 li.l2,
#orderSteps.step3 li.l3{
	background-position: -300px 0;
	color:#102942;
	font-weight:900;
}

/* Content Footer 3 wide */
.contentFooter3Wide .contentSection{
	float:left;
}



/* =Common Elements - Related Links
-----------------------------------------------------*/

/*Related Links*/

#relatedLinks .blockContent {
	overflow: visible; /*prevents scrollbars*/
	padding-bottom: 0;
}

#relatedLinks h5 {
	background: #fff url(../img/titles_sidebar-20.png) no-repeat scroll 11px -195px;
	border-bottom: 1px solid #a7a7a7;
	padding: 6px 5px 7px 5px;	
	text-indent: -99999px;
	height: 10px;
}

#relatedLinks .panel_body a{
  display:block;
}

#relatedLinks .blockContent div.panel {
	padding: 0 0 5px 0;	
	background: url(../img/interface/related_tab_closed.gif) center bottom no-repeat;
}


#relatedLinks .blockContent div.activePanel {
	background: url(../img/interface/related_tab_open.gif) center bottom no-repeat;
	height: 1%; /*for IE7 disappearing backgrounds*/
}

#relatedLinks .blockContent div#panel5 {
	background: none;
	padding: 0;
}
#relatedLinks .blockContent div div  {
	background: none;
}

#relatedLinks #panel1 img {
	border-top: 1px solid #e9e9e9;
}


#relatedLinks span {
	display: block;
	cursor: pointer;
}

#relatedLinks span h6 {	
	margin: 10px 10px 0 10px;
	background-image: url(../img/sidebar/related_subheaders.png);
	background-repeat: no-repeat;
	text-indent: -99999em;
	height: 15px;
	width: 150px;
}

#relatedLinks span#visible {
	cursor: default;
}

#relatedLinks span p {
	font-size: 0.95em;
	margin: 0 9px;
	width: 163px;
	height:30px;
	line-height: 1.1em;
}


#relatedLinks span p a {
	background: none;
	color: #666;
}

#relatedLinks #panel1 span h6 {
	background-position: -200px 0;
}
#relatedLinks #panel1 span h6:hover,
#relatedLinks #panel1.activePanel h6 {
	background-position: 0 0;
}

#relatedLinks #panel2 span h6 {
	background-position: -200px -25px;
}
#relatedLinks #panel2 span h6:hover,
#relatedLinks #panel2.activePanel h6 {
	background-position: 0 -25px;
}

#relatedLinks #panel3 span h6 {
	background-position: -200px -50px;
}
#relatedLinks #panel3 span h6:hover,
#relatedLinks #panel3.activePanel h6 {
	background-position:  0 -50px;
}

#relatedLinks #panel4 span h6 {
	background-position: -200px -75px;
}
#relatedLinks #panel4 span h6:hover,
#relatedLinks #panel4.activePanel h6 {
	background-position:  0 -75px;
}

#relatedLinks #panel5 span h6 {
	background-position: -200px -100px;
}
#relatedLinks #panel5 span h6:hover,
#relatedLinks #panel5.activePanel h6 {
	background-position:  0 -100px;
}

#relatedLinks #panel0 span h6 {
	background-position: -200px -125px;
}
#relatedLinks #panel0 span h6:hover,
#relatedLinks #panel0.activePanel h6 {
	background-position:  0 -125px;
}


/*Click to Chat module*/

#relatedLinks .blockContent div#panel0.activePanel {
	background: url(../img/sidebar/related_tab_clicktochat.png) center bottom no-repeat #eee;
}

#relatedLinks div#panel0 img {
	margin: 4px 0 0 4px;
	cursor: pointer;
}

#relatedLinks div#panel0 p {
	display: none;
	position: absolute;
}

#relatedLinks div#panel0.activePanel h6 {
	background: none;
}


#relatedLinks div#panel0 div.c2c {
	height: 208px;
	margin-bottom: -20px;
	background: url(../img/sidebar/clicktochat-open.png) 4px 4px no-repeat;
}

/*Hides the panels on load; then a dynamically added css class displays them again*/
#panel0, 
#panel2-body, #panel2 p, 
#panel3-body, #panel3 p, 
#panel4-body, #panel4 p, 
#panel5-body, #panel5 p  {
	display: none;
}

.linksLoaded #panel0,
.linksLoaded #panel2-body, .linksLoaded #panel2 p,
.linksLoaded #panel3-body, .linksLoaded #panel3 p,
.linksLoaded #panel4-body, .linksLoaded #panel4 p,
.linksLoaded #panel5-body, .linksLoaded #panel5 p {
	display: block;
}

#panel0-body img,
#panel1-body img,
#panel2-body img,
#panel3-body img,
#panel4-body img,
#panel5-body img {

}

/* =Common Elements - Sidebar Navigation (Tertiary)
-----------------------------------------------------*/

.block.nav {
	margin-bottom: 5px;
}


.block.nav .blockContent ul {
	font-size: 0.95em;	
	font-weight: bold;
	border-bottom: 1px solid #d6d6d6;
}
.block.bonus .blockContent ul {
	border: none;
}

.block.nav .blockContent ul li ul {
	font-size: 1.0em;
	font-weight: normal;
	border: 0;	
	margin: 0;
	padding: 0 0 4px 0;
}

.block.nav .blockContent ul li {
	display: inline;
}
.block.bonus .blockContent ul li {
	font-size: 0.965em;
	line-height: 1.2em;
	display: block;
	padding:5px 8px 5px 42px;
	font-weight:100;
	border-bottom: 1px solid #D6D6D6;
}
.block.bonus .blockContent ul li.l1 {
	background: url(../img/interface/bonus_1.png) 15px 7px no-repeat;
}
.block.bonus .blockContent ul li.l2 {
	background: url(../img/interface/bonus_2.png) 15px 7px no-repeat;
	line-height: 23px;
}

.block.nav .blockContent ul li a{
	display: block; 
	padding: 2px 10px 3px 10px;
	border-top: 1px solid #d6d6d6;
	background: transparent;
}

#main #secondaryContent .bonus .blockContent ul li.l1 a,
#main #secondaryContent .bonus .blockContent ul li.l2 a  {
	display: inline;
	border: 0;
	padding: 0;
	font-weight: normal;
	background-color: transparent;
	color: #4E6780;
}

#main #secondaryContent .bonus.block.nav .blockContent ul li.l1 a:hover,
#main #secondaryContent .bonus.block.nav .blockContent ul li.l2 a:hover  {
	color: #102942;
}



.nowrap{ 
	white-space: nowrap;
}

/*Selected*/
/*1.0 System*/
	#page_system .block.nav .blockContent ul li.l1 a,
	#page_proactivsystem .block.nav .blockContent ul li.l2 a,
	#page_dermatologists .block.nav .blockContent ul li.l3 a,
	#page_dr-katie-rodan .block.nav .blockContent ul li.l3 .sl1 a,
	#page_dr-kathy-fields .block.nav .blockContent ul li.l3 .sl2 a,
	#page_guarantee .block.nav .blockContent ul li.l4 a,
	#page_clearskinclub .block.nav .blockContent ul li.l5 a,
	#page_tellafriend .block.nav .blockContent ul li.l6 a,
/*2.0 About Acne*/
	#page_howacnehappens .block.nav .blockContent ul li.l1 a,
	#page_anyage .block.nav .blockContent ul li.l1 .sl1 a,
	#page_myths .block.nav .blockContent ul li.l1 .sl2 a,
	.aboutacne#page_quiz .block.nav .blockContent ul li.l1 .sl3 a,
	#page_facefitness .block.nav .blockContent ul li.l1 .sl4 a,
	#page_types .block.nav .blockContent ul li.l1 .sl5 a,
	#page_howproactivworks .block.nav .blockContent ul li.l2 a,
/*3.0 How to Use It*/
	#page_howtouse .block.nav .blockContent ul li.l1 a,
	#page_enhancements  .block.nav .blockContent ul li.l2 a,
/*4.0 Order Your System*/
	#page_select .block.nav .blockContent ul li.l1 a,
	#page_quiz.order .block.nav .blockContent ul li.l2 a,
	#page_cart.order .nav .blockContent ul li.l3 a,
	.body_order#page_billingandshipping .nav .blockContent ul li.l3 a,
	.body_order#page_interstitial .nav .blockContent ul li.l3 a,
	.body_order#page_review .nav .blockContent ul li.l3 a,
	.body_order#page_confirm .nav .blockContent ul li.l3 a,
/*5.0 Real Stories*/
	#page_stories .block.nav .blockContent ul li.l1 a,
	#page_fullstory .block.nav .blockContent ul li.l1 a,
	#page_customer .block.nav .blockContent ul li.l2 a,
	.customer .block.nav .blockContent ul li.l2 a,
	#page_tellus .block.nav .blockContent ul li.l3 a,
	.body_tellus .block.nav .blockContent ul li.l3 a,
/*6.0 Celebrity Spotlight*/
	#page_celebrity .block.nav .blockContent ul li.l1 a,
	#page_jessica-simpson .block.nav .blockContent ul li.l2 a,
	#page_vanessa-williams .block.nav .blockContent ul li.l3 a,
	#page_jennifer-love-hewitt .block.nav .blockContent ul li.l4 a,
	#page_melissa-claire-egan .block.nav .blockContent ul li.l5 a,
	#page_ryan-sheckler .block.nav .blockContent ul li.l6 a,
	#page_kevin-kasper .block.nav .blockContent ul li.l7 a,
	#page_serena-williams .block.nav .blockContent ul li.l8 a,
	#page_jennifer-berry .block.nav .blockContent ul li.l9 a,
	#page_chrishell-stause .block.nav .blockContent ul li.l10 a,
	#page_julianne-hough .block.nav .blockContent ul li.l11 a,
	#page_alyssa-milano .block.nav .blockContent ul li.l12 a,
	#page_katy-perry .block.nav .blockContent ul li.l13 a, /* added this - katy perry */
	#page_justin-beiber .block.nav .blockContent ul li.l14 a, /* added this - justin beiber */
/*7.0 Customer Care*/
	#page_customercare .block.nav .blockContent ul li.l1 a,	
	#page_productquestions .block.nav .blockContent ul li.l2 a,	
	#page_medicalquestions .block.nav .blockContent ul li.l3 a,	
	#page_usage .block.nav .blockContent ul li.l4 a,	
	#page_clearskinclub .block.nav .blockContent ul li.l5 a,
	#page_purchasing-and-returns .block.nav .blockContent ul li.l6 a,
	#page_myaccount .block.nav .blockContent ul li.l7 a,
	#page_security-privacy .block.nav .blockContent ul li.l8 a,
	#page_technicalquestions .block.nav .blockContent ul li.l9 a,
	#page_glossary .block.nav .blockContent ul li.l10 a,
	#page_aboutus .block.nav .blockContent ul li.l11 a,
	#page_contact .block.nav .blockContent ul li.l12 a,
/*8.0 My Account*/
	#page_loggedin .block.nav .blockContent ul li.l1 a,
	#page_myproactiv .block.nav .blockContent ul li.l2 a,
	#page_shippingfrequency .block.nav .blockContent ul li.l3 a,
	#page_orderstatus .block.nav .blockContent ul li.l4 a,
	#page_orderdetail .block.nav .blockContent ul li.l4 a,
	#page_creditcardinfo .block.nav .blockContent ul li.l5 a, 
		#page_ppcreditcardinfo .block.nav .blockContent ul li.l5 a,
		#page_ppcreditcardinfo2 .block.nav .blockContent ul li.l5 a,
	#page_shipping .block.nav .blockContent ul li.l6 a, 
	#page_billingaddress .block.nav .blockContent ul li.l7 a, 
		#page_ppbillingaddress .block.nav .blockContent ul li.l7 a,
	#page_nameandpassword .block.nav .blockContent ul li.l8 a,
	#page_referafriend .block.nav .blockContent ul li.l9 a,
	.body_cart.myaccount.cart .block.nav .blockContent ul li.l11 a,
/*9.0 Club Catalog*/ 
	.clubcatalog #secondaryContent .nav li.current a,
	#page_clubcatalog.clubcatalog #secondaryContent .nav li.l1 a,
	#page_tips.clubcatalog #secondaryContent .nav li.l_tips a,
	#page_quickshop.clubcatalog #secondaryContent .nav li.l_quickshop a{
		background-color: #c4e1e2;
		color: #112941;
		font-weight: bold;
		background-position: 10px -93px;
	}	

.block.nav .blockContent ul li.current ul{
		padding: 0;
	}
	
/*Ensures subnav items don't 'bold' with parent*/

/*1.0 system*/
#page_dermatologists .block.nav .blockContent ul li.l3 li a,
/*2.0 about acne*/
#page_howacnehappens .block.nav .blockContent ul li.l1 li a,
/* 9.x */
.clubcatalog #secondaryContent .nav li.current li a {
		font-weight: normal;
		color: #4E6780;
		background-position: 10px 7px;
}

/* 9.x Sub-nav highlights */
.clubcatalog #main #secondaryContent .nav li.current li.current a {
		font-weight: bold;
		color: #112941;
		background-position:10px -93px;
}

/* dash*/
.clubcatalog #main #secondaryContent .nav li.current ul li a{
	background-position: 10px 7px; 
}


/* 9.x Sub-nav hover */
.clubcatalog #secondaryContent .nav li.current li.current a:hover {
		color: #fff;
}

/*highlights parent items when subnavs are selected*/
.dermatologists .block.nav .blockContent ul li.l3 a,
.dermatologists .block.nav .blockContent ul li.l3 ul,
.howacnehappens .block.nav .blockContent ul li.l1 a,
.howacnehappens .block.nav .blockContent ul li.l1 ul {
		background-color: #c4e1e2;
}	

#main .block.nav .blockContent ul li a:active,
#main .block.nav .blockContent ul li ul li a:active,
#main .block.nav .blockContent ul li a:hover,
#main .block.nav .blockContent ul li ul li a:hover{
		color:#112941;
}

#main .block.nav .blockContent ul ul li a{
	background-image: url(../img/interface/main-nav-list-arrow.png);
	background-position: 10px 7px;
	background-repeat:no-repeat;
	border: 0;
	border-top: 0;
	padding:0 0 1px 20px;
}

/*Turns on sub-arrow*/
#main .block.nav .blockContent ul ul li a:hover {
	background-position: 10px -93px;
}

.block.nav h5 {
	background-position: 10px 5px;
	border-bottom: 1px solid #a7a7a7;
	padding: 6px 5px 7px 5px;
	height: 24px;
	text-indent: -99999px;
	background-repeat: no-repeat;
	}
	
.block.bonus h5 {
	background-position:10px 5px;
	background-repeat:no-repeat;
	border-bottom:1px solid #A7A7A7;
	height:44px;
	padding:6px 5px 7px;
	text-indent:-99999px;
}
/*section specific headers*/

/*1.0*/ body.system .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -795px;
}

/*2.0*/ body.aboutacne .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px 5px;
}
/*2.0 - bonus*/ div.bonus div.blockContent h5.sidebarTitle {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -897px;
}

/*3.0*/ body.howtouse .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -395px;
}

/*4.0*/ body.order .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -595px;
}

/*5.0*/ body.stories .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -695px;
}

/*6.0*/ body.celebrity .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -95px;
}

/*7.0*/ body.customercare .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -295px;
}

/*8.0*/ body.myaccount .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -495px;
}

/*9.0*/ body.clubcatalog .block.nav h5 {
	background: transparent url(../img/headers_sidebar-100.png) no-repeat scroll 10px -195px;
}


/* =Common Elements - Video Players
    Including 'No Flash' and 'No JavaScript' messages
-----------------------------------------------------*/

.video {
	background: #000;
	position: relative;
	width: 177px;
	height: 132px;
	overflow: hidden;
}

.video2 {
	background: #000;
	position: relative;
	width: 440px;
	height: 345px;
	overflow: hidden;
}

.video2 a {
	cursor: pointer;	
}

#flashCarousel {
		position: relative;
		width: 665px;
		height: 410px;
}

.videoPlay {
	position: absolute;
	cursor: pointer;
	background-image: url(../swf/flv/img/video_play.png);
	height: 52px;
	width: 52px;
	left: 62px;
	top: 40px;	
}

.video#largePlayer,
.video#homeVideo {
	width: 240px;
	height: 160px;
}

.video#largePlayer .videoPlay,
.video#homeVideo .videoPlay {
	left: 94px;
	top: 54px;
}

/*No Flash Message*/

.video .noFlashOverlay,
.video .noJSMessage,
#flashCarousel .noFlashOverlay,
#flashCarousel .noJSMessage {
	position: absolute;
	background: #fff;
	border: 1px solid #ccc;
	opacity: 0.79;
	filter:alpha(opacity=79);
	height: 130px;
	width: 175px;
	z-index: 30;
	top: 0;
	left: 0;
}


#homeVideo.video .noFlashOverlay,
#largePlayer.video .noFlashOverlay,
#homeVideo.video .noJSMessage,
#largePlayer.video .noJSMessage {
	height: 158px;
	width: 238px;
}

#flashCarousel .noFlashOverlay,
#flashCarousel .noJSMessage {
	height: 410px;
	width: 665px;
	border: 0;
	filter:alpha(opacity=60);
	opacity: 0.6;
	border: 1px solid #ccc;
}

/*different opacity levels for different 'default' images*/

/*home*/
#largePlayer.video .noFlashOverlay,
#largePlayer.video .noJSMessage {opacity: 0.82;filter:alpha(opacity=82);}
#homeVideo.video .noFlashOverlay,
#homeVideo.video .noJSMessage {opacity: 0.70;filter:alpha(opacity=70);}

/*1.0*/
#page_system .ourDermatologists .video .noFlashOverlay,
#page_system .ourDermatologists .video .noJSMessage {opacity: 0.78;filter:alpha(opacity=78);}
#page_system .howWorks .video .noFlashOverlay,
#page_system .howWorks .video .noJSMessage {opacity: 0.62;filter:alpha(opacity=62);}
#page_dr-katie-rodan .video .noFlashOverlay,
#page_dr-katie-rodan .video .noJSMessage  {opacity: 0.74;filter:alpha(opacity=74);}
#page_dr-kathy-fields .video .noFlashOverlay,
#page_dr-kathy-fields .video .noJSMessage,
#page_guarantee .video .noFlashOverlay,
#page_guarantee .video .noJSMessage {opacity: 0.68;filter:alpha(opacity=68);}

/*2.0*/
#page_howacnehappens .pimplePanic .video .noFlashOverlay,
#page_howacnehappens .pimplePanic .video .noJSMessage {opacity: 0.78;filter:alpha(opacity=78);}
#page_howacnehappens .understandingAcne .video .noFlashOverlay,
#page_howacnehappens .understandingAcne .video .noJSMessage,
#page_howproactivworks .howtouse .video .noFlashOverlay,
#page_howproactivworks .howtouse .video .noJSMessage  {opacity: 0.72;filter:alpha(opacity=72);}
#page_howproactivworks .howWorks .video .noFlashOverlay,
#page_howproactivworks .howWorks .video .noJSMessage   {opacity: 0.64;filter:alpha(opacity=64);}

/*3.0*/
#page_howtouse .howtouse .video .noFlashOverlay,
#page_howtouse .howtouse .video .noJSMessage {opacity: 0.72;filter:alpha(opacity=72);}
#page_howtouse .bestResults .video .noFlashOverlay,
#page_howtouse .bestResults .video .noJSMessage {opacity: 0.62;filter:alpha(opacity=62);}

/*5.0*/
.body_customer.stories .video .noFlashOverlay,
.body_customer.stories .video .noJSMessage {opacity: 0.68;filter:alpha(opacity=68);}

/*6.0*/
#page_vanessa-williams .video .noFlashOverlay,
#page_vanessa-williams .video .noJSMessage,
#page_jessica-simpson .video .noFlashOverlay,
#page_jessica-simpson .video .noJSMessage {opacity: 0.79;filter:alpha(opacity=79);}

.video .noFlash,
.video .noJS,
#flashCarousel .noFlash,
#flashCarousel .noJS  {
	position: absolute;
	z-index: 100;
	color: #102942;
	font-size: 0.90em !Important;
	width: 177px;
	font-weight: bold;
	top: 50px;
	left: 0;
	z-index: 55;
}

.video .noFlash p,
.video .noJS p,
#flashCarousel .noFlash p,
#flashCarousel .noJS p {
	text-align: center;
	padding: 0 0 5px 0;
	margin: 0 5px !Important;
	line-height: 1.2em !Important;
}

#homeVideo.video .noFlash, 
#largePlayer.video .noFlash,
#homeVideo.video .noJS, 
#largePlayer.video .noJS{
	width: 240px;
	top: 63px;
	font-size: 0.95em;
}

#flashCarousel .noFlash,
#flashCarousel .noJS{
	width: 655px;
	top: 150px;
/*	font-size: 0.95em;*/
}

.noFlash .btnFlash {
	display: block;
	background: url(../swf/flv/img/video_installflash.png) 0 0 no-repeat;
	height: 21px;
	width: 101px;
	text-indent: -99999em;	
	margin: 0 0 0 38px;
}

.video .noFlash .btnFlash:hover {
	background-position: -300px 0;
}

#homeVideo.video .noFlash .btnFlash, 
#largePlayer.video .noFlash .btnFlash,
#flashCarousel .noFlash .btnFlash {
	background: url(../swf/flv/img/video_installflash.png) 0 -100px no-repeat;
	margin: 0 0 0 64px;
	width: 111px;
}

#flashCarousel .noFlash .btnFlash {
	margin: 0 0 0 277px;
}

#homeVideo.video .noFlash .btnFlash:hover, 
#largePlayer.video .noFlash .btnFlash:hover,
#flashCarousel .noFlash .btnFlash:hover {
	background-position: -300px -100px;
	
}



/* =Common Elements - Primary Sidebar (1.0, 2.0, 3.0)
-----------------------------------------------------*/

.primarySidebar {
	padding:3px;
	margin-bottom: 10px;
}

.primarySidebar .blockContent h5,
#order_promo h5 {
	background-repeat: no-repeat;
	text-indent: -99999em;
	padding: 5px 0;
	height: 10px;
	overflow: hidden;
	background-position: 0 5px;
}

.primarySidebar .howWorks .blockContent h5{
	background: url(../img/titles_sidebar-20.png) 0 -35px no-repeat;
}

.primarySidebar .ourDermatologists .blockContent h5{
	background: url(../img/titles_sidebar-20.png) 0 -114px no-repeat;
}

.primarySidebar .whyDeveloped .blockContent h5{
	background-image: url(../img/headers/title_whydeveloped.png);
	height: 24px;
}

.primarySidebar .dermOnPro .blockContent h5{
	background-image: url(../img/headers/title_dermonpro.png);
	height: 24px;
}

.primarySidebar .guarantee .blockContent h5{
	background: transparent url(../img/titles_sidebar-20.png) no-repeat scroll 0pt -134px;
}

.primarySidebar .understandingAcne .blockContent h5{
	background: transparent url(../img/titles_sidebar-20.png) no-repeat scroll 0pt -235px;
}

.primarySidebar .howToUse .blockContent h5,
#order_promo .howToUse h5{
	background: transparent url(../img/titles_sidebar-20.png) no-repeat scroll 0pt -75px;
}

.primarySidebar .bestResults .blockContent h5,
#order_promo .bestResults h5{
	background: transparent url(../img/titles_sidebar-20.png) no-repeat scroll 0pt -55px;
}

.primarySidebar .pimplePanic .blockContent h5{
	background: transparent url(../img/titles_sidebar-20.png) no-repeat scroll 0pt -155px;
}

.primarySidebar .order .blockContent h5 {
	background-image: url(../img/headers/title_orderproactiv.png);
}

#main #primaryContent .primarySidebar .blockContent p{
	line-height:1.2em;
	font-size:0.95em;
	margin: 5px 0 0 0;
}

/*Primary sidebar bonus module*/

#main #primaryContent .primarySidebar .block.bonus .blockContent {
	padding: 0 0 5px 0;
}

.primarySidebar .block.bonus .blockContent ul li.l1 {
	background: url(../img/interface/bonus_1.png) 15px 7px no-repeat;
}
.primarySidebar .block.bonus .blockContent ul li.l2 {
	background: url(../img/interface/bonus_2.png) 15px 7px no-repeat;
	line-height: 23px;
}

.primarySidebar .block.nav .blockContent ul li a{
	display: block; 
	padding: 2px 10px 3px 10px;
	border-top: 1px solid #d6d6d6;
	background: transparent;
}



/*Primary sidebar order now module*/

.primarySidebar .block.order a.btnOrderNow {
	display: block;
	height: 21px;
	width: 150px;
	background: url(../img/interface/btn-w-3.0.png) 0 0 no-repeat;
	text-indent: -99999em;
	margin: 20px auto 0;
}

.primarySidebar .block.order a.btnOrderNow:hover {
	background-position: -300px 0;

}


/*Common Element - PayPal Logos*/

#main #primaryContent table.ppLogoTable td a {
	background-image: none;
}


/*Footer Promos - 2.0, 3.0*/

/*Order Now module*/

#order_promo .order,
#order_promo .howToUse, 
#order_promo .bestResults {
	float: left;
	width: 180px;
}

#order_promo .order {
	width: 240px;
}

#order_promo .order h4 {
	background: transparent url(../img/titles_howtouse-75.png) no-repeat scroll 0pt -150px;
	text-indent: -99999em;
	width: 155px; 
	height: 33px;
	margin: 30px 0 0 20px;
}

#order_promo .order p {
	background: transparent url(../img/howtouse-100.png) no-repeat scroll 0pt -100px;
	text-indent: -99999em;
	width: 134px; 
	height: 69px;
	margin: 10px 0 0 20px;
}


#order_promo .order a.btnOrderNow {
	display: block;
	height: 21px;
	width: 150px;
	background: url(../img/interface/btn-w-3.0.png) 0 0 no-repeat;
	text-indent: -99999em;
	margin: 30px 0 0 20px;
}

#order_promo .order a.btnOrderNow:hover {
	background-position: -300px 0;
}

#order_promo .howToUse {
	margin-right: 35px;
}

#order_promo .howToUse h5,
#order_promo .bestResults h5 {
	height: 10px;
	text-indent: -99999em;
	margin: 7px 0 10px 0;
}

#order_promo .howToUse p,
#order_promo .bestResults p {
	font-size: 0.95em;
	line-height: 1.3em;
	margin-top: 10px;
}



/* Positioning of footer elements for JS off state*/
#footer {
	width:640px;
	position: relative;
	left: 51px;
}
#footer ul {
	padding:7px 0pt 1px;
}
#footer ul li.last a {
	border-right: none;
}
/*#footer #countryList {
	top: -2px;
}*/
#footer #countryselector{
	display:block;
	width:100%;
	margin-top: 18px;
}
#footer #countryselector label{
	padding: 4px 0px 4px 21px;
	color: #767676;
	background: url(../img/interface/btn-globe.png) 0 0 no-repeat;
}
#footer ul#locale_selector{
	display:block;
	padding:1px 0pt 0pt 0px;
}
#footer ul#locale_selector a{
	padding: 3px 0px 3px 11px;
}
#footer li.kiosk{
	display:none;
}

#footer #countryselector,
#footer .copyright{
	position: relative;
	left:-51px;
}
/* /Positioning of footer elements for JS off state*/



/* =CSS Hacks
-----------------------------------------------------*/
.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 */




/*

Classnames for different overlays
Relevant for blue background - which to display
otherwise - styles are the same

Product overlays with tabs: 'proactiv'
Invoice example: 'invoice'
Credit Card Security info overlay: 'security'
Remember Me overlay: 'remember'
Shipping table overlay: 'shipping'
How to take pic overlay: 'howto'

Promocode - generic: 'promocode' - 283x190

Promocode - login: 'promocode-login' - 283x190
Promocode - over: 'promocode-over' - 283x121
Promocode - error: 'promocode-error' - 283x131
Promocode - promoSmall: 'promocode-small' - 283x231
Promocode - promoLarge: 'promocode-large' - 433x231


*/

/* =Dialog/Overlay styling
-----------------------------------------------------*/

#overlay_modal, 
.dialog {
	position: absolute;
}

.overlay_proactiv,
.overlay_invoice,
.overlay_security,
.overlay_remember,
.overlay_shipping,
.overlay_howto,
.overlay_promocode  {
	background-color: #fff;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

.top.table_window,
.bot.table_window {
	width: 100%;
}
	
.table_window {
	border-collapse: collapse;
	border: 0;
}

.proactiv_nw,
.invoice_nw,
.security_nw,
.remember_nw,
.shipping_nw,
.howto_nw {
	background: transparent url(../img/interface/dialog/top-left.png) no-repeat 0 0;			
	width:6px;
 	height:28px;
}

.promocode_nw {
	height: 13px;
	width:6px;
	background: transparent url(../img/interface/dialog/promodialog/top-left.png) no-repeat 0 0;			
}

.proactiv_n,
.invoice_n,
.security_n,
.remember_n,
.shipping_n,
.howto_n {
/*	height:28px;*/ /*commented out for FF3*/
  background: transparent url(../img/interface/dialog/top.png) repeat-x 0 0;			
}

.promocode_n {
	/*height: 13px; commented out for FF3*/
	background: transparent url(../img/interface/dialog/promodialog/top.png) repeat-x 0 0;			
}

.proactiv_ne,
.invoice_ne,
.security_ne,
.remember_ne,
.shipping_ne,
.howto_ne {
  width:6px;
  height:28px;
	background: transparent url(../img/interface/dialog/top-right.png) no-repeat 0 0;			
}

.promocode_ne {
	height: 13px;
	width: 6px;
	background: transparent url(../img/interface/dialog/promodialog/top-right.png) no-repeat 0 0;
}

.proactiv_w,
.invoice_w,
.security_w,
.remember_w,
.shipping_w,
.howto_w,
.promocode_w {
  	background: transparent url(../img/interface/dialog/left.png) repeat-y top left;			
  	width:6px;
}

.promocode_w {
  	background: transparent url(../img/interface/dialog/promodialog/left.png) repeat-y top left;			
  	width:6px;
}

.proactiv_e,
.invoice_e,
.security_e,
.remember_e,
.shipping_e,
.howto_e {
  	background: transparent url(../img/interface/dialog/right.png) repeat-y top right;			
  	width:6px;	  
}

.promocode_e {
  	background: transparent url(../img/interface/dialog/promodialog/right.png) repeat-y top right;			
  	width:6px;	  
}

.proactiv_sw,
.invoice_sw,
.security_sw,
.remember_sw,
.shipping_sw,
.howto_sw {
 	background: transparent url(../img/interface/dialog/bottom-left.png) no-repeat 0 0;			
 	width:6px;
 	height:6px;
}

.promocode_sw {
 	background: transparent url(../img/interface/dialog/promodialog/bottom-left.png) no-repeat 0 0;			
 	width:6px;
 	height:6px;
}

.proactiv_s,
.invoice_s,
.security_s,
.remember_s,
.shipping_s,
.howto_s {
 	background: transparent url(../img/interface/dialog/bottom.png) repeat-x 0 0;			
 	height:6px;
}


.promocode_s {
 	background: transparent url(../img/interface/dialog/promodialog/bottom.png) repeat-x 0 0;			
 	height:6px;
}

.proactiv_se,
.invoice_se,
.security_se,
.remember_se,
.shipping_se,
.howto_se  {
	background: transparent url(../img/interface/dialog/bottom-right.png) no-repeat 0 0;			
 	width:6px;
 	height:6px;
}

.promocode_se  {
	background: transparent url(../img/interface/dialog/promodialog/bottom-right.png) no-repeat 0 0;			
 	width:6px;
 	height:6px;
}

.proactiv_close,
.invoice_close,
.security_close,
.remember_close,
.shipping_close,
.howto_close,
.promocode_close {
	width: 20px;
	height: 20px;
	background: transparent url(../img/interface/btn-circles.png) no-repeat 0 -300px;
	position:absolute;
	top:10px;
	right:18px;
	cursor:pointer;
	z-index:1000;
}

.promocode_close {
	right: 10px
}

.proactiv_close:hover,
.invoice_close:hover,
.security_close:hover,
.remember_close:hover,
.shipping_close:hover,
.howto_close:hover,
.promocode_close:hover {
	background-position: -300px -300px;
}

div.title_window {
	/*for FF3*/
	height: 1px;
	float: left;
}

.proactiv_title,
.invoice_title,
.security_title,
.remember_title,
.shipping_title,
.howto_title, 
.promocode_title{
	
}

.promocode_title {
	line-height: 0;
}



.proactiv_content,
.invoice_content,
.security_content,
.remember_content,
.shipping_content,
.howto_content,
.promocode_content {
	overflow: hidden;
	background:#fff;
	font-size:0.84em;
	line-height: 1.2em;
}

.proactiv_content h2,
.invoice_content h2,
.security_content h2,
.remember_content h2,
.shipping_content h2,
.howto_content h2,
.promocode_content h2 {
	border-bottom: 1px solid #ccc;
	margin: 0 15px 10px 15px;
}

.proactiv_content h3,
.invoice_content h3,
.security_content h3,
.remember_content h3,
.shipping_content h3,
.howto_content h3,
.promocode_content h3,
.proactiv_content strong,
body.body_overlay div.blockTeal h3 {
	font-weight: bold;
	margin: 10px 15px 0 15px;
}

.proactiv_content strong,
body.body_overlay div.blockTeal h3 {
	margin: 0;
}

body.body_overlay div.blockTeal.product h3 {
	color: #67bacb;
}

.proactiv_content p, .proactiv_content ul, .proactiv_content table,
.invoice_content p, .invoice_content ul, .invoice_content table,
.security_content p, .security_content ul, .security_content table,
.remember_content p, .remember_content ul, .remember_content table,
.shipping_content p, .shipping_content ul, .shipping_content table, 
.howto_content p, .howto_content ul, .howto_content table,
.promocode_content p, .promocode_content ul, .promocode_content table, .promocode_content form  {
	margin: 0 15px;
}


/*Non JS overlay layouts*/

.body_overlay .headerWide {
	background: url(../img/interface/nav-bkd-reactivation.png) repeat-x left bottom #fff;
	height: 129px;
}
.body_overlay #header {
	background: url(../img/reactivation/header-background.jpg) top right no-repeat transparent;
}

.body_overlay #header #proactivSolutionLogo a {
	margin: 10px 0 0 0;
}

.body_overlay #footer {
	width: 895px;
}

.body_overlay #footer ul {
	width: 220px;
	min-width: 220px;
}


/*for no-js overlay blocks*/
.blockTeal {
	padding: 4px;
	margin: 0 0 5px 0;
	background: #c4e1e2;
}

.blockTeal .block {
	background-image: url(../img/interface/dialog/nojs-left.png);
}

.blockTeal .blockTop {
	background-image: url(../img/interface/dialog/nojs-top-left.png); 
}

.blockTeal .blockTopRight {
	background-image: url(../img/interface/dialog/nojs-top-right.png);
}

.blockTeal .blockContent {
	background-image: url(../img/interface/dialog/nojs-right.png);
}
	
.blockTeal .blockBottom {
	background-image: url(../img/interface/dialog/nojs-bottom-left.png);
}

.blockTeal .blockBottomRight {
	background-image: url(../img/interface/dialog/nojs-bottom-right.png);
}

.blockTeal .blockContent {
	font-size: 0.95em;
	padding: 17px 21px;
}

/*non JS overlays - titles*/

.body_overlay .blockTeal h2 {
	height: 35px;
	padding-bottom: 6px;
	text-indent: -99999em;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
}

.body_overlay .blockTeal.oilfree h2 {
	background: url(../img/order/product/title-oilfree.png) 0 0 no-repeat;	
}




/*Specific overlay styles*/

/*Remember me 'what's this' overlay*/

.blockTeal.rememberme h2,
#overlay_remember h2 {
	background: url(../img/headers/title-remember-overlay.png) 0 0 no-repeat;
	height: 14px;
	padding-bottom: 10px;
	text-indent: -99999em;
}

.blockTeal.rememberme h2 {
	margin-bottom: 10px;
}

#overlay_remember p {
	margin-bottom: 10px;
}

.blockTeal.rememberme {
	width: 333px;
	margin: 0 auto 230px;
}

.blockTeal.rememberme .blockContent {
	padding-bottom: 30px;
}

/*1.1, 4.0 and 8.12 - Product Overlays*/

#overlay_product {
	height: 480px;
	height: 430px;
}

#overlay_product .tabs{
	position: absolute;
	top: 481px;
	left: 15px;
}

#overlay_product .tabs li {
	display: inline;
}

#overlay_product .tabs li a {	
	background-image: url(../img/interface/btn-w-4.0.popup.png);
	display: block;
	float: left;
	width: 120px;
	height: 27px;
	text-indent: -99999em;
}
	

#overlay_product .tabs a#tabDescription {	
	background-position: 0 -100px;
}

#overlay_product .tabs a#tabDescription:hover {	
	background-position: -300px -100px;
}

#overlay_product .tabs a#tabDescription.selected,
#overlay_product .tabs a#tabDescription.selected:hover {	
	background-position: -600px -100px;
}


#overlay_product .tabs a#tabDirections {	
	background-position: 0 -200px;
}

#overlay_product .tabs a#tabDirections:hover {	
	background-position: -300px -200px;
}

#overlay_product .tabs a#tabDirections.selected,
#overlay_product .tabs a#tabDirections.selected:hover {	
	background-position: -600px -200px;
}


#overlay_product .tabs a#tabIngredients {	
	background-position: 0 0;
}

#overlay_product .tabs a#tabIngredients:hover {	
	background-position: -300px 0;
}

#overlay_product .tabs  a#tabIngredients.selected,
#overlay_product .tabs  a#tabIngredients.selected:hover {	
	background-position: -600px 0;
}

.body_overlay .blockTeal.product {
	width: 786px;
	margin: 0 auto;
}


.body_overlay .blockTeal.product.narrow {
	width: 535px;
	margin: 0 auto 90px;
}


#overlay_product h2 {
	height: 35px;
	padding-bottom: 6px;
	text-indent: -99999em;
	margin-bottom: 20px;
}

#overlay_product #descriptionContent,
#overlay_product #ingredientsContent ,
#overlay_product #directionsContent {
	display: none;
	visibility: hidden;
}

#overlay_product #descriptionContent.selectedTab,
#overlay_product #ingredientsContent.selectedTab ,
#overlay_product #directionsContent.selectedTab {
	display: block;
	visibility: visible;
}

#overlay_product p {
	margin-bottom: 12px;
}

#overlay_product #description p {
	width: 155px;
}


#overlay_product div.overlayImg {
	float: right;
	display: inline;
	margin: 0 35px;
	height: 375px;
	width: 107px;
}

#overlay_product img{
	float: right;
	display: inline;
	margin: 0 20px;
}

#overlay_product #ingredients .scroll {
	height: 410px;
	width: 355px;
	overflow: auto;
	overflow-y: auto;
	overflow-x: hidden;
}


.body_overlay .blockTeal.revitalizing h2,
#overlay_product.revitalizing h2 {
	background: url(../img/order/product/title-revitalizing.png) 0 0 no-repeat;	
} 

.body_overlay .blockTeal.renewing h2,
#overlay_product.renewing h2 {
	background: url(../img/order/product/title-renewing.png) 0 0 no-repeat;	
}

.body_overlay .blockTeal.repairing h2,
#overlay_product.repairing h2 {
	background: url(../img/order/product/title-repairing.png) 0 0 no-repeat;	
} 

.body_overlay .blockTeal.refining h2,
#overlay_product.refining h2 {
	background: url(../img/order/product/title-refining.png) 0 0 no-repeat;	
} 

.body_overlay .blockTeal.oilfree h2,
#overlay_product.oilfree h2 {
	background: url(../img/order/product/title-oilfree.png) 0 0 no-repeat;	
}

.body_overlay .blockTeal.oilcontrol h2,
#overlay_product.oilcontrol h2 {
	background: url(../img/order/product/title-oilcontrol.png) 0 0 no-repeat;	
}

.body_overlay .blockTeal.greentea h2,
#overlay_product.greentea h2 {
	background: url(../img/order/product/title-greentea.png) 0 0 no-repeat;	
}

.body_overlay .blockTeal.facefacts h2,
#overlay_product.facefacts h2 {
	background: url(../img/order/product/title-facefacts.png) 0 0 no-repeat;	
}

.body_overlay .blockTeal.cscmembership h2,
#overlay_product.cscmembership h2 {
	background: url(../img/order/product/title_cscmembership.png) 0 0 no-repeat;	
}

.blockTeal.product .blockContent div.nonJSCol {
	width: 230px;
	float: left;
	margin: 0 20px 0 0;
}

.blockTeal.product .blockContent div.nonJSCol.last {
	margin: 0;
}

.blockTeal.product .blockContent div.nonJSCol.prodImg {
	text-align: center;
}


.body_overlay div.blockTeal.cscmembership.narrow {
	margin-bottom: 150px;
}
.body_overlay div.blockTeal.cscmembership.narrow div.blockContent {
	padding-bottom: 70px;
}


/*Shipping overlay*/

#page_popup_shipping_nojs .blockTeal {
	width: 570px;
	margin: 0 auto 95px;
}

#page_popup_shipping_nojs .blockTeal h2,
#overlay_shipping h2 {
	background: url(../img/headers/title-shipping-overlay.png) 0 0 no-repeat;
	height: 14px;
	padding-bottom: 10px;
	text-indent: -99999em;
}

#page_popup_shipping_nojs .blockTeal table,
#overlay_shipping table {
	margin-bottom: 10px;
	margin-top: 10px;
	width: 533px;
}

#page_popup_shipping_nojs .blockTeal table,
#page_popup_shipping_nojs .blockTeal td,
#overlay_shipping table,
#overlay_shipping td {
	border-collapse: collapse;
}

#page_popup_shipping_nojs .blockTeal table th,
#overlay_shipping table th {
	color: #6e9872;
	padding: 3px 15px 3px 2px;
	font-weight: bold;
}

#page_popup_shipping_nojs .blockTeal table td,
#overlay_shipping table td {
	border-top: 1px solid #ccc;
	padding: 3px;
}




/* 
5.2 - how to take your photos Overlay 
&& non-js alternative
*/

#page_howtotakephoto_nojs .blockTeal.howto {
	width: 440px;
	margin: 0 auto;
}

#page_howtotakephoto_nojs .blockTeal.howto h2, 
#overlay_howto h2 {
	background:transparent url(../img/headers/title-howto-overlay.png) no-repeat scroll 0pt;
	height:14px;
	padding-bottom:10px;
	text-indent:-99999em;
	margin-bottom: 25px;
}

#page_howtotakephoto_nojs .blockTeal.howto h2 {
	margin-bottom: 10px;
}

#overlay_howto .scroller{
	overflow: auto;
	max-height:400px;
}

#page_howtotakephoto_nojs .blockTeal.howto p,
#overlay_howto p {
	margin-bottom: 8px;
	line-height:1.32em;
}

#page_howtotakephoto_nojs .blockTeal.howto div.tip,
#overlay_howto div.tip {
	color: #6c9973;
}


#page_howtotakephoto_nojs .blockTeal.howto div.tip p,
#overlay_howto div.tip p {
	width: 145px;
}

#page_howtotakephoto_nojs .blockTeal.howto h3 {
	font-weight: bold;
}

#page_howtotakephoto_nojs .blockTeal.howto div.tip h4,
#overlay_howto div.tip h4 {
	background: url(../img/stories/title_tip.png) 0 20px no-repeat;
	width: 61px;
	height: 18px;
	text-indent: -99999em;
	padding-top: 20px;
	margin-bottom: 5px;
}

#page_howtotakephoto_nojs .blockTeal.howto div.tip img,
#overlay_howto div.tip img{
	float: right;
}

#page_howtotakephoto_nojs .blockTeal.howto ul li,
#overlay_howto ul li{
	margin-bottom: 10px;
}

#page_howtotakephoto_nojs .blockTeal.howto ul h3,
#overlay_howto ul h3{
	margin: 0;
}

#page_howtotakephoto_nojs .blockTeal.howto ul p,
#overlay_howto ul p{
	margin: 0 0 8px 0;
}




/*8.4 - security ID overlay*/
#page_securityid_nojs h2,
#overlay_securityid h2 {
	background: url(../img/headers/title-securityid-overlay.png) 0 0 no-repeat;
	height: 14px;
	padding-bottom: 10px;
	text-indent: -99999em;
}

#page_securityid_nojs .blockTeal {
	width: 373px;
	margin: 0 auto 120px;
}

/*8.10 - invoice overlay*/

#page_invoice_nojs .blockTeal {
	width: 383px;
	margin: 0 auto 120px;
}

#page_invoice_nojs .blockTeal h2,
#overlay_invoice h2 {
	background: url(../img/headers/title-invoice-overlay.png) 0 0 no-repeat;
	height: 14px;
	padding-bottom: 10px;
	text-indent: -99999em;	
}

#overlay_invoice img {
	margin: 20px 5px;
}

#page_invoice_nojs .blockTeal img {
	margin: 10px -5px;
}





/* Appendix - Promocode overlay 
-------------------------------------------*/

div.promocode_content h2 {
	background: url(../img/interface/dialog/promodialog/headers-75.png) 0 -225px no-repeat;
	height: 19px;
	padding-bottom: 5px;
	text-indent: -99999em;
}

div.promocode_content .btnAdd {
	margin: 15px;
}

div.promocode_content input[type=text],
div.promocode_content input[type=password]{
	border: 1px solid #ccc;
}

div.promocode_content div.dialogLoading {
	text-align: center;
}

div.promocode_content button {
	background: url(../img/interface/btn-w-promocode.png) 0 0 no-repeat;
	height: 22px;
	display: block;
	border: 0;
	padding: 0;
	text-indent: -99999em;
}

/* Appendix - Promocode promo details
-------------------------------------------*/

div.promocode_content div.promoItems {
	background: #eee;
	margin: 5px 15px;
	padding: 5px;
}

div.promocode_content div.promoItems img {
	float: left;
}

div.promocode_content div.promoItems span.math {
	display: block;
	background: url(../img/promo-code/promo-math.png) 0 0 no-repeat;
	height: 10px;
	width: 8px;
	float: left;
	margin: 36px 6px 0;
	text-indent: -99999em;
}

div.promocode_content div.promoItems span.math.equals {
	background-position: 0 -75px;
	margin: 36px 0 0 8px;
}

div.promocode_content div.promoValue {
	float: left;
	width: 80px;
	padding: 24px 0 0 0;
}

div.promocode_content div.promoValue.discountSm {
	width: 100%;
	padding: 24px 0;
}

div.promocode_content div.promoValue.discountLg {
	padding: 18px 0 0 0;
}

div.promocode_content div.promoValue div.total {
	height: 32px;
	margin: 0 0 0 13px;
}

div.promocode_content div.promoValue span.number {
	display: block;
	width: 18px;
	height: 32px;
	float: left;
	background: url(../img/promo-code/numbers.png) 0 0 no-repeat;
	text-indent: -99999em;
}
div.promocode_content div.promoValue span.number.num0 {background-position: 0 0;}
div.promocode_content div.promoValue span.number.num1 {background-position: 0 -50px;}
div.promocode_content div.promoValue span.number.num2 {background-position: 0 -100px;}
div.promocode_content div.promoValue span.number.num3 {background-position: 0 -150px;}
div.promocode_content div.promoValue span.number.num4 {background-position: 0 -200px;}
div.promocode_content div.promoValue span.number.num5 {background-position: 0 -250px;}
div.promocode_content div.promoValue span.number.num6 {background-position: 0 -300px;}
div.promocode_content div.promoValue span.number.num7 {background-position: 0 -350px;}
div.promocode_content div.promoValue span.number.num8 {background-position: 0 -400px;}
div.promocode_content div.promoValue span.number.num9 {background-position: 0 -450px;}
div.promocode_content div.promoValue span.number.dollar {background-position: 0 -500px;}

div.promocode_content div.promoValue span.text-value {
	background: url(../img/promo-code/promo-text.png) 0 0 no-repeat;
	width: 43px;
	height: 14px;
	display: block;
	text-indent: -999999em;
	margin: 7px auto 0;
}

div.promocode_content div.promoValue span.text-discount {
	background: url(../img/promo-code/promo-text.png) 0 -75px no-repeat;
	width: 56px;
	height: 13px;
	display: block;
	text-indent: -99999em;
}

div.promocode_content div.promoValue.discountSm span.text-discount {
	float: left;
	margin: 10px 10px 0 53px;
}

* html div.promocode_content div.promoValue.discountSm span.text-discount {
	display: inline;
}

div.promocode_content div.promoValue.discountLg span.text-discount {
	margin: 0 0 5px 12px;
}

div.promocode_content a.btnAdd {
	display: block;
	height: 22px;
	width: 65px;
	background: url(../img/interface/btn-w-promocode.png) 0 -225px no-repeat;
	text-indent: -99999em;
	margin: 15px auto 0;
}

div.promocode_content a.btnAdd:hover {
	background-position: -300px -225px;
}

div.promocode_content a.btnApply {
	display: block;
	height: 22px;
	width: 78px;
	background: url(../img/interface/btn-w-promocode.png) 0 -300px no-repeat;
	text-indent: -99999em;
	margin: 15px auto 0;
}

div.promocode_content a.btnApply:hover {
	background-position: -300px -300px;
}


/* Appendix - Promocode login 
-------------------------------------------*/

.promocode_content #promo-login h2 {
	background-position: 0 0;
}

.promocode_content #promo-login p {
	margin-bottom: 10px;
}

.promocode_content #promo-login label {
	font-weight: bold;
	width: 62px;
	display: block;
	float: left;
	clear: both;
}

.promocode_content #promo-login input {
	margin-bottom: 5px;
	height: 16px;
	width: 170px;
}

.promocode_content #promo-login .validation-advice {
	color: #933;
	margin: -4px 0 0 63px;
	padding: 0;
}

.promocode_content #promo-login input.validation-failed {
	border: 1px solid #933;
}

.promocode_content #promo-login div.rememberMe {
	margin: 2px 0 0 63px;
}

.promocode_content #promo-login div.rememberMe input {
	padding: 0;
	margin: 0;
	height: auto;
	width: auto;
}

.promocode_content #promo-login div.rememberMe label {
	font-weight: normal;
	width: auto;
	display: inline; 
	float: none;
	clear: both;
}

.promocode_content #promo-login button.btnPromoSubmit {
	clear: both;
	width: 78px;
	margin: 5px 0 0 67px;
}

.promocode_content #promo-login button.btnPromoSubmit:hover {
	background-position: -300px 0;
}

/* Appendix - Promocode over 
-------------------------------------------*/

.promocode_content #promo-over h2 {
	background-position: 0 -75px;
	
}

.promocode_content #promo-over a.btnClose {
	display: block;
	height: 22px;
	width: 78px;
	background: url(../img/interface/btn-w-promocode.png) 0 -75px no-repeat;
	text-indent: -99999em;
	margin: 15px auto 0;
}

.promocode_content #promo-over a.btnClose:hover {
	background-position: -300px -75px;
}


/* Appendix - Promocode Redeem & Promocode Error 
-------------------------------------------*/
.promocode_content #promo-enterPromo h2.errorHeader,
.promocode_content #promo-over h2.errorHeader {
	background-position: 0 -150px;
}

.promocode_content #promo-enterPromo h2.redeemHeader {
	background-position: 0 -300px;
}

.promocode_content #promo-enterPromo form {
	position: relative;
	margin-top: 13px;
	border: 1px solid #fff;
}

.promocode_content #promo-enterPromo label {
	position: absolute;
	left: 3px;
	top: 3px;
	z-index: 10;
}

.promocode_content #promo-enterPromo input {
	float: left;
	width: 148px;
	background: #eee;
	position: relative;
	z-index: 1;
}

* html .promocode_content #promo-enterPromo input {
	position: absolute;
}


.promocode_content #promo-enterPromo input.validation-failed {
	border-color: #933;
}

.promocode_content #promo-enterPromo div.validation-advice {
	/*clear: both;*/
	position: absolute;
	top: 22px;
	left: 0;
	color: #933;
}

.promocode_content #promo-enterPromo button.btnPromoSubmit {
	width: 86px;
	background-position: 0 -150px;
	position: absolute;
	top: 0;
	right: 0;
}

.promocode_content #promo-enterPromo button.btnPromoSubmit:hover {
	background-position: -300px -150px;
}



/* For alert/confirm dialog */
.proactiv_window,
.invoice_window,
.security_window,
.remember_window,
.shipping_window,
.howto_window.
.promocode_window {
	padding:20px;
	margin-left:auto;
	margin-right:auto;
}

.proactiv_message,
.invoice_message,
.security_message,
.remember_message,
.shipping_message,
.howto_message,
.promocode_message{
	width:100%;
}
.proactiv_popBkd,
.invoice_popBkd,
.security_popBkd,
.remember_popBkd,
.shipping_popBkd,
.howto_popBkd,
.promocode_popBkd {
	position:absolute;
	z-index:-1;
	top:-19px;
	left:-19px;
}

.promocode_popBkd {
	top: -4px;
	left: -4px;
}

.proactiv_popBkd {
	background: transparent url(../img/interface/dialog/dialog-bkd.png) 0 0 no-repeat;
	height:558px;
	width:408px;
}

.invoice_popBkd {
	background: transparent url(../img/interface/dialog/dialog-invoice-bkd.png) 0 0 no-repeat;
	width: 410px;
	height: 366px;
}

.security_popBkd {
	background: transparent url(../img/interface/dialog/dialog-security-bkd.png) 0 0 no-repeat;
	width: 410px;
	height: 376px;	
}

.remember_popBkd {
	background: transparent url(../img/interface/dialog/dialog-remember-bkd.png) 0 0 no-repeat;
	width: 370px;
	height: 272px;
}

.howto_popBkd {
	background: transparent url(../img/interface/dialog/dialog-howto-bkd.png) 0 0 no-repeat;
	width: 476px;
	height: 560px;
}

.shipping_popBkd {
	background: transparent url(../img/interface/dialog/dialog-shipping-bkd.png) 0 0 no-repeat;
	width: 609px;
	height: 402px;
}

.shipping_popBkd {
	background: transparent url(../img/interface/dialog/dialog-shipping-bkd.png) 0 0 no-repeat;
	width: 609px;
	height: 402px;
}

.promocode_popBkd {
	background: #66bccb;
	border: 1px solid #ccc;
	width: 288px;
	height: 196px;
}


* html .proactiv_popBkd {background: transparent url(../img/interface/dialog/dialog-bkd-ie6.png) 0 0 no-repeat;}
* html .invoice_popBkd {background: transparent url(../img/interface/dialog/dialog-invoice-bkd-ie6.png) 0 0 no-repeat;}
* html .security_popBkd {background: transparent url(../img/interface/dialog/dialog-security-bkd-ie6.png) 0 0 no-repeat;}
* html .remember_popBkd {background: transparent url(../img/interface/dialog/dialog-remember-bkd-ie6.png) 0 0 no-repeat;}
* html .howto_popBkd {background: transparent url(../img/interface/dialog/dialog-howto-bkd-ie6.png) 0 0 no-repeat;}
* html .shipping_popBkd {background: transparent url(../img/interface/dialog/dialog-shipping-bkd-ie6.png) 0 0 no-repeat;}


/** homepage kitcustomizer promo 1 **/
#homePromo_control {
    display:block;
    background: url(../img/bg_promo_take_control.jpg) no-repeat scroll 0px 0px;
    width:295px;
    height:298px;
    font-size:11px;
    color:#757777;
    position: relative;
    margin-bottom: 5px;
}

#homePromo_control h3{
    display:block;
    position:absolute;
    background: url(../img/hdr_take_control.gif) no-repeat scroll 0px 0px;
    height:54px;
    width:198px;
    left:25px;
    top:141px;
    text-indent:-999em;
}
#homePromo_control h4{
    display:block;
    position:absolute;
    background: url(../img/hdr_your_solution.gif) no-repeat scroll 0px 0px;
    height:24px;
    width:186px;
    left:25px;
    top:30px;
    text-indent:-999em;
}

#homePromo_control p{
    left:26px;
    position:absolute;
    top:195px;
    height:50px;
    width:217px;
}


#homePromo_control a{
    display:block;
    position:relative;
    background: url(../img/btns_customize.gif) no-repeat scroll 0px 0px;
    width:140px;
    height:26px;
    top:250px;
    left:75px;
    text-indent:-999em;
}

#homePromo_control a:hover{
    background-position: -150px 0px;
}

/** homepage kitcustomizer promo 2 **/
.blockPromo {
	position:relative;
}
.blockPromo .blockPromoImg {
	background: url(../img/promo/bg-promo-save-corner.gif) no-repeat scroll 0px 0px;
	width: 165px;
	height:141px;
	position:absolute;
	z-index:4000;
	left:4px;
	top:4px;
}
.blockPromo #homePromo_save {
	padding: 20px 12px 0 175px;
	min-height:120px;
	_height:120px;
}

#main #primaryContent .blockContent #homePromo_save h3 {
	padding-left:14px;
	font-size: 14px;
}

#homePromo_save a{
	display:block;
	background: url(../img/btns_customize.gif) no-repeat scroll 0px -49px;
	width:140px;
	height:26px;	
	text-indent:-999em;
}

#homePromo_save a:hover{
	background-position: -151px -50px;
}