@charset "UTF-8";
/* CSS Document */


/* Color Info
black - #000000
blue - #0081c6
dark gray - #666666
sky blue - #6fccdd
purple - #9966cc
medium gray - #b2b2b2
dark lime green - #b2ce40
gray - #cccccc
lime green - #ccff00
pink - #ec008c
light gray - #f0f0f0
orange - #ff6600
white - #ffffff
*/




a, p, body, div, ul, li, h1, h2, h3, h4, h5, h6 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#666666;
	list-style:none;
	margin:0px; padding:0px;
	text-decoration:none;
	outline:none;
}

body {
	background:url(images/body_bg_wide4.jpg) no-repeat center top;
}

#wrapper {
	background:url(images/wrapper_bg.gif) repeat-x bottom left;
}

#container {
	margin:0 auto; padding:0px;
	width:950px;
}


/*-------------------- tip top nav (grey bg with white text) ----- ***** ---------------*/
#top_nav {
	margin:0px; padding:0px;
	height:32px;
	background:#B2B2B2;
	text-align:center;
}


#top_nav li {
	display:inline;
	position:relative;
	bottom:5px;
	padding-left:8px;
	padding-right:8px;
	color:#FFF;
}

#top_nav a {
	color:#FFF;
	font-size:11px;
}

#top_nav a:hover {
	text-decoration:underline;
}

#top_nav li.go {
	background-color:#666666;
	height:20px;
	width:20px;
}

#top_nav li.go:hover {
	background-color:#333333;
}

#top_nav li.go a:hover {
	text-decoration:none;
}

#top_nav li.cart img {
	border:none;
	position:relative;
	top:6px;
	left:4px;
}


/*-------------------- header (blue bg with white text) ----- ***** ---------------*/
#header {
	background:#0081C6;
	height:115px;
}

#header a {
	color:#FFF;
}

#header p {
	color:#FFF;
}


/*-------------------- branding (logo) --------------------*/
#branding h1 {
	background:url(images/dermaware_logo.gif) no-repeat;
	float:left;
	width:220px;
	text-indent:-9999px;
	height:60px;
	display:block;
	position:relative;
	top:25px;
	right:7px;
}

#branding a {
	display:block;
	height:60px;
}


/*-------------------- main_nav (white text in grid) --------------------*/
#main_nav {
	float:right;
	width:700px;
	padding-top:30px;
	position:relative;
	right:-15px;
	z-index:1;
	top:-10px;
}

#main_nav ul {
	float:left;
}

#main_nav li {
	padding:0px 8px;
	display:inline;
}

#main_nav li a {
	color:#FFF;
	position:relative;
	top:5px;
}

#main_nav a:hover {
	text-decoration:underline;
}

#main_nav p {
	padding-left:10px;
}



#main_nav ul.get_started p {
	border-bottom:#FFF solid 1px;
}



#main_nav p.shop {
	border-left:#FFF solid 1px;
	border-right:#FFF solid 1px;
}

#main_nav p.shop li.skin {
	padding-right:0px;
}

#main_nav p.shop li.pro {
	padding-left:0px;
}

#main_nav p.shop {
	border-bottom:#FFF solid 1px;
}



#main_nav li.skin {
	border-left:#FFF solid 1px;
}

#main_nav li.body_care {
	border-left:#FFF solid 1px;
	border-right:#FFF solid 1px;
}

#main_nav li.pro {
	border-right:#FFF solid 1px;
}



#main_nav ul.science p {
	border-bottom:#FFF solid 1px;
}



#main_nav p.treatments {
	border-right:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
}

#main_nav li.peels {
	border-right:#FFF solid 1px;
}

#main_nav li.facials {
	border-right:#FFF solid 1px;
}

#main_nav li.body {
	border-right:#FFF solid 1px;
}


/*-------------------- promo_nav (green/yellow navigation) --------------------*/
ul#promo_nav {
	clear:both;
	width:700px;
	position:relative;
	top:5px;
}

#promo_nav li a {
	color:#CCFF00;
}

#promo_nav a:hover {
	text-decoration:underline;
}

#promo_nav li {
	display:inline;
	padding-left:6px;
}

/*-------------------- professional_nav (orange navigation) --------------------*/
ul#professional_nav {
	clear:both;
	width:700px;
	position:relative;
	top:8px;
}

#professional_nav li a {
//	color:#ff6600;  /* original orange */
// 	color:#fca870;	/* 60% */
 	color:#febd91;	/* 40% */
}

#professional_nav a:hover {
	text-decoration:underline;
}

#professional_nav li {
	display:inline;
	padding-left:6px;
}


/*-------------------- professional_nav (skyblue navigation) --------------------*/
ul#professional_nav_skyblue {
	clear:both;
	width:700px;
	position:relative;
	top:8px;
}

#professional_nav_skyblue li a {
//	color:#ff6600;
 	color:#6fccdd;	
}

#professional_nav_skyblue a:hover {
	text-decoration:underline;
}

#professional_nav_skyblue li {
	display:inline;
	padding-left:6px;
}


/*-------------------- sidebar (left side structure) ----- ***** ---------------*/
#sidebar {
	width:155px;
	float:left;
	padding-bottom:5px;
	
}

#sidebar li, a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#666666;
	height:32px;
}


/*-------------------- skin_care_nav (colored navigation on left side, top) --------------------*/
#skin_care_nav {
	padding-top:7px;
}


#skin_care_nav li {
	margin-top:3px;
	padding-left:10px;
}


#skin_care_nav li.aging {
	border-left:#EC008C solid 8px;
	border-bottom:#EC008C solid 2px;
}

#skin_care_nav li.aging a:hover {
	color:#EC008C;
}

#skin_care_nav li.pigmentation {
	border-left:#6FCCDD solid 8px;
	border-bottom:#6FCCDD solid 2px;
}

#skin_care_nav li.pigmentation a:hover {
	color:#6FCCDD;
}

#skin_care_nav li.acne {
	border-left:#FF6600 solid 8px;
	border-bottom:#FF6600 solid 2px;
}

#skin_care_nav li.acne a:hover {
	color:#FF6600;
}

#skin_care_nav li.redness {
	border-left:#9966CC solid 8px;
	border-bottom:#9966CC solid 2px;
}

#skin_care_nav li.redness a:hover {
	color:#9966CC;
}

#skin_care_nav li.healthy {
	border-left:#0081C6 solid 8px;
	border-bottom:#0081C6 solid 2px;
}

#skin_care_nav li.healthy a:hover {
	color:#0081C6;
}

#skin_care_nav li.body {
	border-left:#B2CE40 solid 8px;
	border-bottom:#B2CE40 solid 2px;
}

#skin_care_nav li.body a:hover {
	color:#B2CE40;
}


/*-------------------- box_nav (box nav on left side) --------------------*/
#box_nav {
	padding-bottom:15px;
}

#box_nav li {
	height:150px;
	width:150px;
	padding-bottom:15px;
	text-decoration:none;
}

#box_nav img {
	border:none;
}

#box_nav p {
	text-indent:-9999px;
}

#box_nav li.pink img:hover {
	border:#EC008C solid 1px;
}

#box_nav li.orange img:hover {
	border:#ff6600 solid 1px;
}

#box_nav li.blue img:hover {
	border:#0081C6 solid 1px;
}

#box_nav li.green img:hover {
	border:#B2CE40 solid 1px;
}


/*-------------------- content (will need classes for different inside pages) ----- ***** ---------------*/
/*-------------------- content classes around line 615 --------------------*/
#content {
	padding-top:10px;
	width:770px;
	float:right;
}


#container.body_care #column1 h4 {
	color:#0081C6;
	margin:0; padding:0;
	font-size:17px;
	padding-bottom:5px;
}

/*-------------------- content  column1 (left column) --------------------*/
#column1 {
	width:330px;
	float:left;
	padding-left:10px;
}


#column1 p {
	font-size:13px;
	line-height:1.5em;
	margin-left:5px;
}


#column1 table.price p {
position:absolute;
left:5px;
float:left;

}

#column1 table.price {
position:absolute;
left:5px;
float:left;

}


#column1 h2 {
}

#column1 h3.about_us {
	font-size:28px;
	color:#ec008c;
	letter-spacing:2px;
	line-height:1.5em;
	font-weight:lighter;

}

#column1 h4 {
	margin:0; padding:0;
	font-size:17px;
	padding-bottom:5px;
}

#column1 h5 {
	margin:0; padding:0;
	color:#D010B1;
	padding-bottom:5px;
	font-size:18px;
}

#column1 h6 {
text-transform:uppercase;
font-size:14px;
color:#888;
position:relative;
left:175px;
padding-top:10px;
}


/*-------------------- content  column2 (right column) --------------------*/
#column2 {
	margin:0; padding:0;
	width:370px;
	float:right;
	position:relative;
}

#column2 p {
	line-height:2em;
	padding-bottom:10px;
}

#column2 a {
	color:#0081C6;
}

#column2 a:hover {
	text-decoration:underline;
}

#column2 h2 {
	color:#0081C6;
}

#column2 h3 {
	color:#ec008c;
	font-size:18px;
	text-align:left;
}

#column2 h3.blue {
	color:#0081C6;
	font-size:18px;
	text-align:left;
}


/*-------------------- content  column2.reverse (right column - 2nd style) --------------------*/
#column2.reverse {
	margin:0; padding:0;
	padding-top:10px;
	padding-bottom:10px;
	background:#0081C6;
	padding-bottom:45px;
}

#column2.reverse h2 {
	color:#FFF;
	padding-left:6px;
}

#column2.reverse p {
	color:#FFF;
	padding-left:6px;
	padding-right:5px;
}

#column2.reverse a {
	color:#fff;
}

#column2.reverse a:hover {
	text-decoration:underline;
}

#column2.reverse h6 {
	margin:0; padding:0;
	padding-bottom:5px;
	color:#CCFF00;
	font-size:12px;
	padding-left:6px;
}

#column2.reverse li {
	list-style:disc;
	margin-left:20px;
	color:#fff;
}

#column2.reverse li p {
	line-height:1.5em;
	margin-bottom:6px;
	margin-left:-5px;
}

#column2.reverse img {
	padding-right:10px;
}


/*-------------------- content  favorites_recommendations (products on bottom) ----- ***** ---------------*/
#favorites_recommendations {
	clear:both;
	position:relative;
	top:10px;
	padding-left:10px;
	padding-top:10px;
	border-top:#B2B2B2 dashed 1px;
}

#favorites_recommendations h2 {
	padding-left:20px;
}

#favorites_recommendations p, h3 {
	text-align:center;
}

#favorites_recommendations img {
	border:none;
}

#favorites_recommendations img:hover {
	border:none;
/*	border:#0081C6 solid 1px;*/
}


/*-------------------- content  customer_favorites (bottom, left side products) --------------------*/
#customer_favorites li {
	padding-top:5px;
	height:150px;
	width:90px;
	float:left;
	padding-right:20px;
	padding-bottom:15px;

}

#customer_favorites h2 {
	color:#0081C6;
}

#customer_favorites li a p:hover {
	text-decoration:underline;
}

#customer_favorites li a h3:hover {
	text-decoration:underline;
}


/*-------------------- content  professional_recommendation (bottom, right side products) --------------------*/
#professional_recommendations {
	position:relative;
	left:65px;
}

#professional_recommendations li {
	padding-top:5px;
	height:180px;
	width:90px;
	float:left;
	padding-right:20px;
	position:relative;
	bottom:15px;
	padding-bottom:15px;
}

#professional_recommendations h2 {
	color:#0081C6;
	position:relative;
	bottom:15px;
	left:20px;
}

#professional_recommendations li a p:hover {
	text-decoration:underline;
}

#professional_recommendations li a h3:hover {
	text-decoration:underline;
}


/*-------------------- site_info (bottom blue bg with white text) ----- ***** ---------------*/
#site_info {
	clear:both;
	/*background:#0081C6;*/ /* 120109 jjr commented-out to "remove" the bottom blue bar */
	height:30px;
	text-align:center;
	position:relative;
	bottom:0px;
}

#site_info p {
	color:#FFF;
	position:relative;
	top:8px;
}

#site_info a {
	color:#FFF;
}

#site_info a:hover {
	text-decoration:underline;
}
/* */--

/*-------------------- content  category class ----- ***** ---------------*/
#content.category {
	width:770px;
	padding-bottom:10px;
}
 
.category #column1 {
	width:600px;
	margin-left:5px;
	border:#CCCCCC solid 2px;
	background:#FFF;
}

.category #column1 h4 {
	color:#EC008C;
	font-size:20px;
	position:relative;
	top:7px;
	display:inline;

}


/*-------------------- content  blue body class title ----- ***** ---------------*/
#column1 h4.bodyCare {
	color:#0081C6 !important;
	position:relative;
}

/*-------------------- content  pink skin care class title ----- ***** ---------------*/
#column1 h4.skinCare {
	color:#ec008c !important;
	position:relative;
}


.category #column1 h3 {
	color:#0081C6;
	font-size:12px;
}

.category #column1 li {
	float:left;
	position:relative;
	width:120px;
	text-align:center;
	padding-left:12px;
	padding-right:12px;
	padding-bottom:10px;
	padding-top:10px;
}

.category #column1 a {
	background:#0081C6;
	color:#FFF;
	padding:0px 5px 0px 5px;
}

.category #column1 a:hover {
	background:#999999;
}


.category #column2 {
	width:140px;
}

.category #column2 p {
	line-height:1.5em;
	padding-bottom:10px;
}


/*-------------------- content  regimen class ----- ***** ---------------*/
#content.regimen {
	width:770px;
	padding-bottom:10px;

}
 
.regimen #column1 {
	width:600px;
	margin-left:5px;
	border:#CCCCCC solid 2px;
	background:#FFF;

}

.regimen #column1 p.label {
	color:#0081C6;
	border:#0081C6 solid 1pt;
	width:120px;
}

.regimen #column1 h4 {
	color:#EC008C;
	font-size:20px;
	position:relative;
	display:inline;
}

.regimen #column1 h4.second_title {
	color:#0081C6;
	font-size:14px;
	padding-left:10px;
	padding-right:10px;
}

.regimen #column1 h4.advanced {
	color:#fff;
	font-size:10px;
	padding:2px;
}

/*
.regimen #column1 h4.advanced a {
	color:#fff;
	font-size:10px;
	background:#EC008C;
	padding:2px;
}


.regimen #column1 h4.advanced a:hover {
	color:#fff;
	font-size:10px;
	background:#EC008C;
	padding:2px;
}
*/


.regimen #title img {
	position:relative;
	top:15px;
	left:25px;
}

.regimen #column1 h3 {
	color:#0081C6;
	font-size:12px;
}

.regimen #column1 li {
	float:left;
	position:relative;
	width:120px;
	text-align:center;
	padding:20px 12px 20px 12px;
}


.regimen #column1 #regimen_cart {
	clear:both;
	text-align:right;
	position:relative;
	top:10px;
	padding-right:20px;
	padding-bottom:15px;
}

.regimen #column1 #regimen_cart p {
	width:400px;
}

.regimen #column1 #regimen_cart p.bottom {
	border-bottom:#999999 dashed 1pt;
	padding-bottom:10px;
}

.regimen #column1 #regimen_cart a {
}

.regimen #column1 a {
	background:#0081C6;
	color:#FFF;
	padding:0px 5px 0px 5px;
}

.regimen #column1 a:hover {
	background:#999999;
}


.regimen #column2.reverse {
	margin:2px; padding:0px;
	background:#EC008C;
}

.regimen #column2.reverse h2 {
	color:#FFF;
	font-size:12px;
	padding-left:6px;
}

.regimen #column2.reverse p {
	margin:0; padding:0px;
	padding-bottom:2px;
	color:#FFF;
	text-align:center;
}

.regimen #column2 {
	width:140px;
}

.regimen #column2 p {
	line-height:1.5em;
	padding-bottom:10px;
}


/*-------------------- content  product class ----- ***** ---------------*/
#content.product {
	width:770px;
	padding-bottom:10px;

}
 
.product #column1 {
	width:600px;
	margin-left:5px;
	border:#CCCCCC solid 2px;
	background:#FFF;
}

.product #column1 p {
	margin-left:175px;
	margin-right:5px;
}


.product #column1 h4 {
	color:#EC008C;
	font-size:20px;
	position:relative;
	top:7px;
	display:inline;
	left:175px;
}

.product #column1 h3 {
	color:#0081C6;
	font-size:12px;
}

.product #column1 #left_image {
	float:left;
	width:175px;
	padding:10px 0 10px 0;
		
}

.product #column1 img {
	position:relative;
	top:8px;
}

.product #column1 a {
	background:#0081C6;
	color:#FFF;
	padding:0px 5px 0px 5px;
}

.product #column1 a:hover {
	background:#999999;
}


.product #column2 {
	width:140px;
}

.product #column2 p {
	line-height:1.5em;
	padding-bottom:10px;
}

#right_content span {
	color: #0081C6;
	font-weight: bold;
}


/*-------------------- content  complementary_products (products on bottom) ----- ***** ---------------*/
#complimentary_products {
	clear:both;
	padding-top:10px;
	border-top:#B2B2B2 dashed 1px;
}

#complimentary_products li {
	padding:0 20px 0 20px;
}

#complimentary_products h2 {
	padding-left:20px;
}

#complimentary_products p, h3 {
	text-align:center;
}

#complimentary_products img {
}

#complimentary_products img:hover {
}


/*-------------------- content  comp_products (bottom products) --------------------*/
#comp_products li {
	padding-top:5px;
	width:110px;
	float:left;
	padding-bottom:15px;
}

#comp_products img {
	width:110px;
}

#comp_products h2, h3 {
	color:#0081C6;
}

#comp_products li a p:hover {
	text-decoration:underline;
}

#comp_products li a h3:hover {
	text-decoration:underline;
}


#comp_products a.cart {
	background:#0081C6;
	color:#FFF;
	padding:0px 5px 0px 5px;
}

#comp_products a:hover {
	background:#999999;
}



/*-------------------- content  form class (will include login, registration, pro login, my account, etc) ----- ***** ---------------*/
/*---------- general form structure ----------*/
#content.form {
	width:770px;
	padding-bottom:10px;
}
 
.form #column1 {
	width:600px;
	margin-left:5px;
	border:#CCCCCC solid 2px;
	background:#FFF;
}

.form #column1.text_area {
	width:600px;
	margin-left:5px;
	background:#FFF;
}

.form table td {
width:300px;
}


.form input {
padding:3px;
border:1px solid #0081c6;
}

.form input.button {
color:#ffffff;
font-size:14px;
border:1px solid #0081c6;
background:#0081c6;
}

.form input:focus.button {
border:1px solid #666666;
background:#666666;
}

.form textarea{padding:2px; border:1px solid #0081c6; font:Arial, Helvetica, sans-serif;}

.form input:focus, textarea:focus{border:1px solid #0081c6; background:#F2F2F2; font:Arial, Helvetica, sans-serif;}


/*---------- form structure - dark gray (reg) ----------*/
.form #column1 h1.darkgray_text {
	color:#666666;
	font-size:20px;
	position:relative;
	top:7px;
	display:inline;
}


.form #column1 h2.darkgray_text {
	color:#666666;
	font-size:14px;
	position:relative;
	display:inline;
}

.form #column2 h1.darkgray_text {
	color:#666666;
	font-size:16px;
	position:relative;
	display:inline;
}

/*---------- form structure - blue (reg) ----------*/
.form #column1 h1.blue_text {
	color:#0081c6;
	font-size:20px;
	position:relative;
	top:7px;
	display:inline;
}

.form #column1 table.blue h2 {
	color:#0081c6;
	font-size:14px;
	position:relative;
	display:inline;
}

.form #column2 h1.blue_text {
	color:#0081c6;
	font-size:16px;
	position:relative;
	display:inline;
}

/*---------- form structure - orange (pro) ----------*/
.form #column1 h1.orange_text {
	color:#fe802c;  /*	color:#FF6600; */
	font-size:20px;
	position:relative;
	top:7px;
	display:inline;
}

.form #column1 table.orange h2 {
	color:#fe802c;  /*	color:#FF6600; */
	font-size:14px;
	position:relative;
	display:inline;
}

.form #column1 h2.orange_text {
	color:#fe802c;  /*	color:#FF6600; */
	font-size:14px;
	position:relative;
	display:inline;
}

.form #column2 h1.orange_text {
	color:#fe802c;  /*	color:#FF6600; */
	font-size:16px;
	position:relative;
	display:inline;
}

.form #column1 a {
	color:#0081C6;
	font-size:12px;
}

.form #column1 a:hover {
	text-decoration:underline;
}


.form #column1 h2 {
	color:#0081C6;
	font-size:12px;
}

.form #column2 {
	width:140px;
}

.form #column2 p {
	line-height:1.5em;
	padding-bottom:10px;
}

#divider {
	border-top:#B2B2B2 dashed 1px;

}


/*-------------------- content  inside no attributes ----- ***** ---------------*/


#column1.text_area {
	width:580px;
	border:none;
	padding-left:10px;
}

/*-------------------- content  form class (will include login, registration, pro login, my account, etc) ----- ***** ---------------*/
/*---------- general form structure ----------*/
#content.tables {
	width:770px;
	padding-bottom:10px;
}
 
.tables #column1 {
	width:600px;
	margin-left:5px;
	border:#CCCCCC solid 2px;
	background:#FFF;
}

.tables table td {
}

.tables #column1 h1.blue_text {
	color:#0081c6;
	font-size:20px;
	position:relative;
	top:7px;
	display:inline;
}

.tables #column1 h1.green_text {
	color:#6DB33F;
	font-size:20px;
	position:relative;
	top:7px;
	display:inline;
}

.tables #column2 h1.green_text {
	color:#6DB33F;
	font-size:16px;
	position:relative;
	display:inline;
}

.tables #column1 h1.large_blue_text {
	color:#000;
	font-size:20px;
	position:relative;
	top:7px;
	letter-spacing:2px;
	font-weight:lighter;
	display:inline;
}

.tables #column1 table.blue h2 {
	color:#0081c6;
	font-size:14px;
}

.tables #column2 h1.blue_text {
	color:#0081c6;
	font-size:16px;
	position:relative;
	display:inline;
}

.tables #column1 h2 {
	color:#0081C6;
	font-size:12px;
}

.tables #column1 a {
	color:#0081C6;
	font-size:12px;
}

.tables #column1 a.green_link {
	color:#6DB33F;
	font-size:12px;
}

.tables #column1 a:hover {
	text-decoration:underline;
}

.tables #column2 {
	width:140px;
}

.tables #column2 p {
	line-height:1.5em;
	padding-bottom:10px;
}