body.spp { background: #000 url('../../../../images/products/bg/spp/generic_2.jpg') no-repeat left top; }
body.spp#color_sustain { background: #000 url('../../../../images/products/bg/spp/color_sustain_2.jpg') no-repeat left top; }
body.spp#damage_reverse { background: #000 url('../../../../images/products/bg/spp/damage_reverse_2.jpg') no-repeat left top; }
body.spp#dry_recovery { background: #000 url('../../../../images/products/bg/spp/dry_recovery_2.jpg') no-repeat left top; }
body.spp#full_detox { background: #000 url('../../../../images/products/bg/spp/full_detox_2.jpg') no-repeat left top; }
body.spp#volume_advance { background: #000 url('../../../../images/products/bg/spp/volume_advance_2.jpg') no-repeat left top; }

body.spp ul.error_messages_display{color:#DF7A1C;width:452px;position:absolute;top:25px;left:220px;}

h1, h2 {
    color: #f5f5ef;
    font-weight: bold;
	font-family: Interstate, Arial, Helvetica, Verdana, sans-serif;
	font-size: 26px;
	text-transform: lowercase;
	overflow: hidden;
    height: 1%;
    overflow:hidden;
    line-height:29px;
	
}

h1 {
	margin: 0 0 15px;
}

.description-container h1 {display: none; }
.quickshop .description-container h1 {display: inline; }

h2 {
	padding: 0;
	margin: 0;
}

h2, .addl_spp_content a {
	color: #df7a1c;
	text-decoration: none;
	font-weight: bold;
}

body#color_sustain h2 a, body#color_sustain .addl_spp_content a { color: #dd83a6; }
body#damage_reverse h2 a, body#damage_reverse .addl_spp_content a { color: #df7a1c; }
body#dry_recovery h2 a, body#dry_recovery .addl_spp_content a { color: #cab5a2; }
body#full_detox h2 a, body#full_detox .addl_spp_content a { color: #38939b; }
body#volume_advance h2 a, body#volume_advance .addl_spp_content a { color: #9fa617; }

h4 {
	margin: 0 0 5px;
}

.spp-left-col, .spp-right-col {   
    float: left;
    margin: 45px 20px 0 18px;
    padding: 0;
    width: 452px;
}
.spp-right-col {
    margin: 54px 0 0 0; 
    width: 210px;
	height: 445px;
	position: relative;
}

.spp-right-col img {
    margin: 0 auto;
	position: absolute;
	bottom: 0;
}

div.description-container {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}

.spp-left-col div.description-container {
    float: left;
}
/*
div.recommend-container {    
    float: left;
    margin: 5px;
    padding: 5px;
    width: 200px;    
}
*/

#sku_select_container { margin: 0 0 25px; }

div.review-container {    
    margin: 0;
    padding: 0;
    width: 100%;    
}
div.shades-container {    
    margin: 0;
    padding: 0;
    width: 100%;    
}
div.share-container {    
    margin: 0;
    padding: 0;
    width: 100%;
	font-size: 10px;
}
div.share-container img {
	vertical-align: -3px;
	margin-left: 4px;
}

.description-add-link {
	text-indent: -9999px;
	background-image: url('../../../../images/btns/btn_add_to_bag.png');
	width: 98px;
	height: 22px;
	display: block;
	margin-bottom: 20px;
}

#product-options {
	margin-top: 35px;
}

/* Featured Content
---------------------------- */
#feature-content { margin: 0 0 15px; }

#detail-container { 
	margin: 45px 0;
	padding: 25px 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#product-description {
	width: 500px;
	float: left;
}


/* Wrapper
---------------------------- */
#wrapper #sidebar {
	width: 250px;
	float: left;
	margin: 0 25px 0 0;
}

#wrapper #content {
	width: 685px;
	float: left;
}


/* Shadded Products
----------------------------- */
div.swatch-container {
	margin:0 0 3px;
	overflow:hidden;
	position:relative;
	z-index:1;
}
div.swatch-container div.onstate {
    border:3px solid #ff0000;
    display:none;
    left:0;
    position:absolute;
    top:0;
    z-index:50;
}

#swatch-panel .swatch-panel-left {
	float:left;
	width:400px;
}

#swatch-panel .swatch-panel-right {
	float:right;
	padding:0 10px 10px;
	width:180px;
}

#smoosh_container .smoosh_panel_inner {
	float: left;
	width: 75px;
}

#shade_name {
	clear: both;
}

#shaded_add_link {
	width: 77px;
	height: 16px;
	background-color: #F59494;
}


/* Quickshop
-------------------- */

div.quickshop {
    color: #572600;
    width: 540px;
	position: relative;
	min-height: 430px;
}

div.quickshop div.quickshop-image {
    position: absolute;
	left: 0px;
	bottom: 0px;
	width: 240px;
}

div.quickshop div.quickshop-product-info {
    width: 280px;
	margin-left: 240px;
}

div.quickshop div.quickshop-product-info h1 {
    color: #DF7A1C;
	background: none !important;
	text-indent: 0px !important;
	width: auto;
	height: auto;
}

div.quickshop #product-options {
	margin-top: 25px;
}

div.quickshop div#sku_select_container {
    position: relative;
}

div.quickshop select.sku-menu {
    /*position: static;*/
}

div.quickshop div#sku_select_container .NFSelect {
    position: static;
} 

/* Cross-Sells (JS-loaded)
-------------------- */
div.cross_sell_container h3 {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
div.spp_cross_sell_item {
    margin-bottom: 10px;
    width: 200px;
}
div.spp_cross_sell_item a.product_image {
    border: 1px solid #ccc;
    display: block;
    height: 75px;
    margin-bottom: 10px;
    width: 75px;
}
div.spp_cross_sell_item a.product_image img {
}
div.spp_cross_sell_item div.item_info {
}
div.spp_cross_sell_item div.item_info div.shade {
    margin-top: 5px;
}
div.spp_cross_sell_item div.item_info div.shade span.swatch {
    display: block;
    height: 8px;
    width: 30px;
}
div.spp_cross_sell_item div.item_info div.add_button {
}

/* SPP additional content area */
.addl_spp_content {
	background: url('../../../../images/products/spp/spp_content_bg.png') no-repeat left top;
	clear: both;
	float: left;
	display: block;
	width: 738px;
	height: 532px;
	margin-top: 70px;
	margin-left: 18px;
}

.fans_also_love { display: block; width: 191px; height: 225px; float: left; margin: 20px 86px 0 20px; text-align: center; position: relative;}
.how_to_use { display: block; width: 441px; height: 245px; float: right;clear: right;}
.our_story { display: block; width: 369px; height: 245px; float: left;}
.key_ingredients { display: block; width: 350px; height: 245px; float: left;}

/* addl content headers - default is 'color sustain' */
.fans_also_love h2 {background: url('../../../../images/products/spp/fans_also_love_cs.png') no-repeat; text-indent: -999px; width: 208px; height: 22px;}
.how_to_use h2 {background: url('../../../../images/products/spp/how_to_use_cs.png') no-repeat; text-indent: -999px; width: 141px; height: 23px; margin-bottom: 10px;}
.our_story h2 {background: url('../../../../images/products/spp/our_story_cs.png') no-repeat; text-indent: -999px; width: 79px; height: 55px;}
.key_ingredients h2 {background: url('../../../../images/products/spp/key_ingredients_cs.png') no-repeat; text-indent: -999px; width: 140px; height: 55px;}

body#damage_reverse .fans_also_love h2 {background: url('../../../../images/products/spp/fans_also_love_da.png') no-repeat;}
body#damage_reverse .how_to_use h2 {background: url('../../../../images/products/spp/how_to_use_da.png') no-repeat;}
body#damage_reverse .our_story h2 {background: url('../../../../images/products/spp/our_story_da.png') no-repeat;}
body#damage_reverse .key_ingredients h2 {background: url('../../../../images/products/spp/key_ingredients_da.png') no-repeat;}

body#dry_recovery .fans_also_love h2 {background: url('../../../../images/products/spp/fans_also_love_dr.png') no-repeat;}
body#dry_recovery .how_to_use h2 {background: url('../../../../images/products/spp/how_to_use_dr.png') no-repeat;}
body#dry_recovery .our_story h2 {background: url('../../../../images/products/spp/our_story_dr.png') no-repeat;}
body#dry_recovery .key_ingredients h2 {background: url('../../../../images/products/spp/key_ingredients_dr.png') no-repeat;}

body#full_detox .fans_also_love h2 {background: url('../../../../images/products/spp/fans_also_love_fd.png') no-repeat;}
body#full_detox .how_to_use h2 {background: url('../../../../images/products/spp/how_to_use_fd.png') no-repeat;}
body#full_detox .our_story h2 {background: url('../../../../images/products/spp/our_story_fd.png') no-repeat;}
body#full_detox .key_ingredients h2 {background: url('../../../../images/products/spp/key_ingredients_fd.png') no-repeat;}

body#volume_advance .fans_also_love h2 {background: url('../../../../images/products/spp/fans_also_love_va.png') no-repeat;}
body#volume_advance .how_to_use h2 {background: url('../../../../images/products/spp/how_to_use_va.png') no-repeat;}
body#volume_advance .our_story h2 {background: url('../../../../images/products/spp/our_story_va.png') no-repeat;}
body#volume_advance .key_ingredients h2 {background: url('../../../../images/products/spp/key_ingredients_va.png') no-repeat;}
/* end addl content headers */

.fans_also_love #xsell_prev { position: absolute; top: 60px; left: 30px;}
.fans_also_love #xsell_next { position: absolute; top: 60px; right: 20px;}
.fans_also_love p { margin-top: 10px;}

.fans_also_love img {  margin: 16px 0 -16px; }
.how_to_use img { float: right; width: 277px; height: 245px;}
body#damage_reverse .how_to_use img { float: right; width: 276px; height: 205px;}
body#dry_recovery .how_to_use img { float: right; width: 322px; height: 214px;}
body#full_detox .how_to_use img { float: right; width: 277px; height: 205px;}
body#volume_advance .how_to_use img { float: right; width: 278px; height: 207px;}
.our_story img { float: left; margin: 10px 30px; }
.key_ingredients img { float: left; }

.how_to_use .blurb_content { width: 141px; text-align: right; float: left; margin-top: 57px;}
.our_story .blurb_content { width: 125px; text-align: left; float: right; margin-right: 20px;}
.key_ingredients .blurb_content { width: 175px; text-align: left; float: right; margin: 0 20px;}

/* style tweaks to account for addl content differences between rituals... */
body#damage_reverse .key_ingredients .blurb_content { width: 170px; text-align: left; float: right; margin: 0 20px 0 -10px;}
body#damage_reverse .key_ingredients img { margin-top: -20px; }
body#dry_recovery .fans_also_love { margin: 20px 46px 0 20px;}
body#dry_recovery .how_to_use { width: 465px;}
body#dry_recovery .key_ingredients .blurb_content { width: 170px; text-align: left; float: right; margin: 0 20px 0 -10px;}
/* end tweaks to account for addl content differences between rituals. */

#productlinks ul li{
  display:inline;
  font-size:11px;
}

#productlinks ul li a{
    color: #ffffff;  
    text-decoration:none;
}

#overlay-container #productlinks ul li a{
    color: #000000;  
    text-decoration:none;
}

#productlinks ul li a#share_link{
    margin-left: 12px;
    background: url("../../../../images/global/fb.gif") no-repeat scroll 0px 0px transparent;
    padding-left:20px;
}

#productlinks ul li a#email_a_friend_link{
    background: url("../../../../images/global/email_icon.png") no-repeat scroll 0px 0px transparent;
    padding-left:20px;
}

#overlay-container #productlinks ul li a#email_a_friend_link{
    background: none;;
    padding-left:0px;
}

#productlinks {
    margin-bottom: 13px;
    margin-left: 1px;   
}

#facebook-like-container {
    margin-left: 1px;      
}

.fb_edge_widget_with_comment {
    z-index: 1 !important;    
}


#email-friend{
    background:#F5F5EF;
    min-height: 457px;
    overflow: hidden;
    width: 581px;
    color:#8B4523;
    height:100%;
}

#email-friend-thanks{
    background:#F5F5EF;
    overflow: hidden;
    width: 581px;
    color:#8B4523;
    height:100%;
}

#email-friend .email-friend-top{
  height:50px;
}

.email-area{
  background-color:#F5F5EF;
  margin:7px auto 0;
  width:411px;
  padding:13px;
}

#email-friend .email-title{
  background:url(../../../../images/email/generic_imgs/email-to-a-friend.gif) no-repeat #F5F5EF;
  width:186px;
  height:22px;
  text-indent: -9999px;
}

#email-friend .email-title p{
  display:none;
}

#email-friend-thanks .email-title {
    font-size:24px;
    color: #D79242;
}

#email-friend-thanks .email-desc {
    font-size: 24px;
    margin-top: 15px;
    width: 320px;  
    float:left;
    margin-right: 80px; 
    line-height: 25px;
}

#email-friend-thanks img {
    position:relative;
    top:-18px;
    float:left;
    
}

.email-friend-form-container{
  height:230px;
  background-image:url(http://www.ojon.co.uk/images/email-area_gradient.jpg);
  background-position:center bottom;
  background-repeat:no-repeat;
  background-color:#faf9f3;
  padding:5px 0px;
}

.email-friend-form-container div{
  clear:left;
  margin-left:50px;
  margin-top:9px;
}

.email-friend-form-container div label{
  float:left;
  width:100px;
  margin:0px 10px 0px 0px;
  padding:0px;
  text-align:right;
}

.email-friend-description{
  height:56px;
  margin:10px 0px 0px 0px;
  background-image:url('http://www.ojon.co.uk/images/email-friend-grad.jpg');
  background-position:top left;
  background-repeat:no-repeat;
  padding:0px;
  background-color:#faf9f3;
  margin-top:-13px;
}

.email-friend-description .checkbox-top{
  padding-top:8px;
  margin-top:12px;
}

#email-friend .closebutton{
  margin:10px 10px 0px 0px;
}

#email-friend .field-note{
    display: block;
    letter-spacing: 0.05em;
    padding: 10px 0 0;
    width: 100%;
}

#email-friend input.submit{
  background-image:url('../../../../images/btns/btn_submit_brown.gif');
  background-position:top left;
  background-repeat:no-repeat;
  text-indent:-9999px;
  width:72px;
  height:28px;
  float:right;
  text-indent: -9999px;
  width: 72px;
  border:none;
  outline:none;
  cursor:pointer;
}

#email-friend input{
  margin:9px 0 0 0;
  width:252px;
  height:18px;
}

#email-friend input.checkbox_input{
  width:16px;
  float:left;
  height:16px;
  margin:10px 5px 0 0px;
  border:none;
}

#email-friend input.input-top{
  margin:4px 0 0 0;
}

#email-friend textarea{
    background: none repeat scroll 0 0 #F5F5EF;
    border: 1px solid #BDBDBD;
    outline: medium none;
    text-align: left;
    width: 99%;
}

.email_a_friend_error_wrapper ul.error_messages li{
    color:red;
}

.label-input {
    float:left;
    width: 262px;    
}

.fullwidth {
    width:100% !important;   
}

.label-input label {
    display:block;
    margin-top:11px;
  
}

.m-top-20px {
    margin-top:20px;   
}

.m-left-20px {
    margin-left:20px;   
}

.email-friend-links{
    margin-top: 10px;
}

.email-friend-links .disclaimer{
  float:left;
}

body.spp #overlay-container ul.error_messages_display{
    color:#DF7A1C;
    width:99%;
    position:static;
    top:0;
    left:0;
    margin-top: 15px;
}

.oos_image{
    background-image: url("../../../../media/images/btns/btn_outofstock.png") !important;
    height: 25px !important;
    width: 108px !important;
}