/*
Title: global.css
Authors: 
Thomas Gainar, Initial creation, 6/30/2009
Dave Ramirez - Conversion Systems
Content: Global styles.
*/

/* TOC
	1) DEFAULTS
	2) GLOBAL
	3) PAGE SPECIFIC
	4) HEADERS and BUTTONS
	5) FLOAT CLEARS/HACKS/SPECIAL CLASSES
	
	VALUES:
	
	#8A7068		Footer Font Color
	#312822  	Footer Background Color
	#794294		SubNav Background Color
*/

/* 1) DEFAULTS ---------------------------------------------------------- */
	/* Resets ---------------------------------------------- */
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;
	font-style: inherit;
	font-family: inherit;
	list-style: none;
	}

input, textarea {
	font-family: inherit;
	}
	
table	{ /* tables still need cellspacing=0 in the markup */
	border-spacing: 0;
	}

input[type='text'],
input[type='password'],
textarea,
select	{
	padding: 1px;
	}
address {
	font-style:normal;
	}
h1 a {
	display:block;
	width:100%;
	height:100%;
	}
a:link, a:visited, a:hover, a:active {color:#6e00a6;outline:none;}
	
/* /DEFAULTS ------------------------------------------------------------ */

/* 2) GLOBAL ----------------------------------------------------- */


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 60%; /* 1em is 10pt, 0.8em is 8pt, 1.6em is 16pt, etc */
	background-color:#312822;
	}
#wrapper {
	background: #fff url(../images/bg.jpg) 50% 118px no-repeat;
	}
#header {
	position: relative;
	background: #fff url(../images/bg_header.gif) left top no-repeat;
	width: 852px;
	margin: 0 auto;
}
	#header h1 {
		float: left;
		background: #fff url(../images/g_logo.gif) left top no-repeat;
		width: 131px; height: 71px;
		text-indent: -3000em;
	}
#global_search {
	position: relative;
	background: transparent url(../images/g_global_search_bg.gif) right top no-repeat;
	float: right;
	z-index: 110;
	margin-top: 36px;
	width: 140px; height: 20px;
}
	#global_search li {float: left;}
	#global_search .searchInput input {
		margin-top: 2px;
		*margin-top: 1px;
		font-size: 1.1em;
		font-weight: bold;
		width: 110px;
		background-color: transparent;
		border: none;
		color: #8b8b8b;
	}

	#global_search .searchSubmit input {
		background: transparent url(../images/btn_global_search_submit.gif) left top no-repeat;
		width: 21px; height: 24px;
	}

#nav {}
	#nav a {
		height: 47px;
		display: block;
		text-indent: -3000em;
		overflow:hidden;
	}
	#nav li {
		float: left;
		background-position: 0 0;
	}
	/* Default Nav States */
	#nav li.about_us a {background-image: url(../images/nav_about_us.gif); width: 87px;}
	#nav li.bath_body a {background-image: url(../images/nav_bath_body.gif); width: 103px;}
	#nav li.makeup_solutions a {background-image: url(../images/nav_makeup_solutions.gif); width: 139px;}
	#nav li.my_silkskin a {background-image: url(../images/nav_my_silkskin.gif); width: 101px;}
	#nav li.skin_care_systems a {background-image: url(../images/nav_skin_care_systems.gif); width: 140px;}
	#nav li.specialized_skin_care a {background-image: url(../images/nav_specialized_skin_care.gif); width: 163px;}
	#nav li.whats_new a {background-image: url(../images/nav_whats_new.gif); width: 119px;}
	/* Active Nav States */
	.about_us #nav li.about_us a,
	.bath_body #nav li.bath_body a,
	.makeup_solutions #nav li.makeup_solutions a,
	.my_silkskin #nav li.my_silkskin a,
	.skin_care_systems #nav li.skin_care_systems a,
	.whats_new #nav li.whats_new a,
	.home #nav li.whats_new a,
	.specialized_skin_care #nav li.specialized_skin_care a,
	.whats_new #nav li.whats_new a,
	.specialized_skin_care #nav li.specialized_skin_care a,
	.skin_care_systems #nav li.skin_care_systems a,
	.kit #nav li.skin_care_systems a,
	.makeup_solutions #nav li.makeup_solutions a,
	.bath_body #nav li.bath_body a,
	.about_us #nav li.about_us a,
	.my_silkskin #nav li.my_silkskin a {background-position: 0 -47px; cursor: default;}
	
#subnav {
	background-color: #794294;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	padding-left: 5px;
}
	#subnav li {
		display: block;
		background: transparent url(../images/subnav_divider.gif) right 3px no-repeat;
		margin: 7px 10px 0 5px; 
		padding: 0 15px 6px 0px; 
		float: left;
	}
	#subnav li.last { padding-right:0; background: none; margin-right:0; }
	#subnav #active_page a,
	.anti_aging li.anti_aging a,
	.exfoliating li.exfoliating a,
	.oily_skin li.oily_skin a,
	.dry_skin li.dry_skin a,
	.lines_wrinkles li.lines_wrinkles a,
	.uneven_skin_tone li.uneven_skin_tone a,
	.loss_firmness li.loss_firmness a,
	.sun_damage li.sun_damage a { text-decoration: none; cursor: default; }
	#subnav li a { color: #eee; }
	

	
#content {
	background-color: #990066;
	min-height: 570px;
	height: auto !important;
	height: 570px;
	padding-bottom: 17px;
	background: #fff url(../images/bg_content.gif) left bottom repeat-x;
	width: 852px;
	margin: 0 auto;
	font-size: 14px;
}

#content2 {
	padding:21px 42px 24px 22px;
	line-height:1.4em;
	}
	#content2 h2 {
		margin-bottom:26px;
		}
	#content2 p,
	#content2 ul,
	#content2 address {
		margin-bottom:20px;
		}
	
	#content2 h3 {
		font-size:14px;
		}
	#content2 h4 {
		font-weight:normal;
		}

#footer {
	background: #312822 url(../images/bg_footer.jpg) 50% 0 no-repeat;
	padding: 45px 0 20px 0;
	font-size: 11px;
	clear:both;
}
	#footer ul, #footer p {
		width: 830px;
		margin: 0 auto;
		color: #8a7068;
		text-align: center;
		padding-bottom: 5px;
	}
	#footer ul {
		padding-bottom: 25px;
	}
	#footer li {
		_display: inline;
		float: left;
		margin: 0 15px 0 15px;
	}
	#footer a {
		color: #8a7068;
		text-decoration: none;
	}
	

.error {color: #b00;}
div.actions {clear:left;}
sup {vertical-align:text-top}


	/* MAIN CONTENT */
	

.general-list li {
	padding-left: 10px;
	margin-left: 13px;
	margin-bottom: 6px;
	background-image: url(../images/g_bullet.gif);
	background-repeat: no-repeat;
	background-position: left 8px;
}
		
	/* /MAIN CONTENT */
	
	
/* /GLOBAL ------------------------------------------------------- */


/* 3) PAGE SPECIFIC ----------------------------------------------------- */
	/* SKIN CARE SYSTEMS - CATEGORY */
.category_display {
	position: relative;
	background: transparent url(../images/bg_category_display.gif) left bottom no-repeat;
	float: left;
	width: 284px;										
	min-height: 740px;
	height: auto !important;
	height: 740px;
}
	.category_display .image {margin:0 14px 0 15px;}
	.category_display p,
	.category_display ul {margin: 15px 39px 15px 40px;}
	.category_display .actions {
		position: absolute;
		width: 100%;
		bottom:30px; left: 0;
	}
	.category_display .actions .btn {margin: 0 auto;}


	/* CONTACT */
	
#inputs {
	font-family: Arial, Helvetica, sans-serif;
	color: #5b5b5b;
	width: 400px;
	margin: 30px auto 0 auto;
	font-size: 12px;
}

	.content #inputs p {margin-bottom:0;}
	#inputs .field_wrapper .error {padding-bottom: 3px;}
	#inputs .success {color: #0c6;}
	#inputs .odd {clear: left;}
	#inputs .type_text input,
	#inputs #form_message_wrapper textarea {
		border: 1px solid #c0c0c0;
		padding: 1px;
		width: 176px;
		color: #5b5b5b;
		}
	#inputs .field_wrapper {
		width: 180px;
		float: left;
		padding: 5px;
		}
	#inputs #form_message_wrapper {
		width: 400px;
		float: none;
		clear: both;
		}
	#inputs #form_message_wrapper textarea {
		width: 378px;
		height: 109px;
		font-size: 12px;
		}
	#inputs #form_submit_wrapper {
		text-align: right;
		width: auto;
		float: none;
		padding-right: 15px;
		}
	#inputs .header {
		padding-bottom: 10px;
		padding-left: 24px;
		}
	#inputs .header p {padding-bottom: 10px;}

	/* NO NAV */
#no_nav {margin-bottom: -3px;}

        /* RECEIPT PAGE */

#receipt {
        font-size: 12px;
        line-height: 18px;
	width: 800px;
	margin: 20px auto 0 auto;
	padding-bottom: 20px;
}
        #receipt h2 {
                font-size: 24px;
                margin-bottom: 10px;
        }
#receipt table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
}
        #receipt table td, #receipt table th {padding-right: 10px;}
        #receipt table .summary td,
        #receipt table .summary th {padding-top: 100px;}
        #receipt th, #receipt td {text-align: left;}
        #receipt .price {text-align: right;}
        #receipt tbody th {font-weight: normal; text-align: right; padding-right: 50px;}
        #receipt thead th {padding-bottom: 20px;}
        #receipt tbody .total td,
        #receipt tbody .total th {font-weight: bold;}
        #receipt .quantity {text-align: center;}
        #receipt .description {width: 500px; padding-right: 50px;}
        
#receipt .address {margin-top: 20px;}
        #receipt .address caption {
                text-align: left;
                font-weight: bold;
        }
        #receipt .address table {
                margin:0;
                float: left;    
                min-width: 290px;
                width: auto !important;
                width: 290px;
        }
.receipt {
}
	.receipt h1 {padding-bottom: 15px;}
	.receipt .receipt_details {font-size: 12px;}
	.receipt .receipt_links {padding-top: 15px;}
	
/* /PAGE SPECIFIC ------------------------------------------------------- */
/* 4) HEADERS and BUTTONS -----------------------------------------------*/
h2.skin_care_systems,
h3.silkskin_duo,
h3.silkskin_kit,
h3.silkskin_ultra
 {
	text-indent:-3000px;
	overflow:hidden;
	}


h2.skin_care_systems {
	background-image: url(../images/h2_skin_care_systems.gif); 
	width: 223px; height: 29px; 
	margin: 20px 0 0 20px;
}
h3.silkskin_duo {
	background-image: url(../images/h3_silkskin_duo.gif);
	width: 284px; height: 52px;
}
h3.silkskin_kit {
	background-image: url(../images/h3_silkskin_kit.gif);
	width: 284px; height: 52px;
}
h3.silkskin_ultra {
	background-image: url(../images/h3_silkskin_ultra.gif);
	width: 284px; height: 52px;
}
	/* category h2 */
h2.specialized_skin_care {
	background: transparent url(../images/h2_specialized_skin_care.gif) left top no-repeat;
	text-indent: -3000px;
	overflow: hidden;
	margin: 22px 0 20px 20px;
	width: 268px; height: 29px;
}
h2.bath_and_body {
	background: transparent url(../images/h2_bath_and_body.gif) left top no-repeat;
	text-indent: -3000px;
	overflow: hidden;
	margin: 22px 0 20px 20px;
	width: 159px; height: 29px;
}
h2.makup_solutions {
	background: transparent url(../images/h2_makup_solutions.gif) left top no-repeat;
	text-indent: -3000px;
	overflow: hidden;
	margin: 22px 0 20px 20px;
	width: 222px; height: 29px;
}


a.btn {text-indent: -300em; display: block; outline: none;}
a.learn_more {background-image: url(../images/btn_learn_more.gif); width: 189px; height:31px;}


/* /HEADERS and BUTTONS-------------------------------------------------- */
/* 5) FLOAT CLEARS/HACKS/SPECIAL CLASSES ------------------------------------ */
.clear	{
	clear: both !important;
	font-size: 0 !important;
	line-height: 0 !important;
	visibility: hidden !important;
	float: none !important;
	padding: 0 !important;
	display: block !important;
	}
.row, .prod_row, #header, #global_search, #nav, #footer ul, #subnav, #cart_content, #nav_prodinfo {
	zoom:1;
}
.row:after, .prod_row:after, #header:after, #global_search:after, #nav:after, #footer ul:after, #subnav:after, #cart_content:after, #nav_prodinfo:after {
	content:".";
	display:block;
	clear:both;
	height:0;
	width:0;
	line-height:0;
	visibility:hidden;
}

/* /FLOAT CLEARS/HACKS/SPECIAL CLASSES ------------------------------------ */