/* -------------------------------------------------------------------- Style organization and inheritqnce below are based on the BODY tag classes. The BODY tag classes are based on the page's directory structure. Examples: /us/collections/body_envy/defualt.jsp has the BODY classes of class="us collections body_envy index" /us/collections/body_envy/shampoo.jsp has the BODY classes of class="us collections body_envy shampoo" The JSP String "thisClass" always contains the BODY tag classes for the page being served. With that in mind, the BODY tags look like this: -------------------------------------------------------------------- */ /* Common tag based styles */ * { padding: 0; margin: 0; border: 0; font-family: Arial, Helvetica, sans-serif; } BODY, P, TH, TD, UL, OL, LI, FORM { font-size: 11px; line-height: 14px; color: #333333; background-color: inherit; } BODY { text-align: center; background-color: #FD8F1E; background-repeat: repeat-x; background-image: url(http://www.herbalessences.com/us/images/home/bg.jpg); } A { color: #FFF; background-color: inherit; text-decoration: none; position: relative; z-index: 100; outline:none; } A.arr IMG { margin: 5px 0 -5px 0; } A:hover { text-decoration: underline; } A:hover img { text-decoration: none; } H1 IMG { width: 929px; height: 130px; position: absolute; top: 0px; left: 0px; } H2 { font-size: 3.3em; font-family: Courier, serif; font-weight: normal; line-height: 1em; letter-spacing: -.075em; color: #FFF; } H3 { font-size: 1.25em; line-height: 1.4em; letter-spacing: .05em; color: #FFFE01; display: block; margin: 0 0 1em 0; } H4 { font-size: 2.1em; font-family: Courier, serif; font-weight: normal; line-height: 1em; letter-spacing: -.05em; color: #FFF683; position: absolute; } H5 { font-size: 1.0em; line-height: 1.0em; letter-spacing: .05em; color: #FFFE01; display: block; margin: 0 0 1em 0; } P { color: #FFF; margin: 0 0 1em 0; line-height: 1.5em; } /* Layout elements */ #container { margin: 0 auto; width:980px; text-align: left; background-repeat: no-repeat; position: relative; z-index: 0; } #content { position: absolute; left: 45px; top: 190px; width: 370px; } #content P { width: 250px; line-height: 1.4em; letter-spacing: 1px; } #content .product_text{ width: auto; } #ingredients { position: absolute; left: 50px; top: 500px; width: 190px; text-align: right; } #ingredients P { font-size: 1.0em; letter-spacing: .04em; color: #FFFE01; display: block; line-height: 1.5em; } #type { color:#666666; padding-left: 1px; } #type OPTION { color:#666666; padding-left: 4px; } /* footer */ #footer { position: absolute; top: 600px; left: 22px; padding: 20px 0px; color: #FFFFFF; } #footer P { float: left; margin: 0px 10px 0px 0px; } #footer A { font-size: .94em; color: #FFF; letter-spacing: .07em; } /* top nav */ UL#nav { list-style: none; width: 544px; position: absolute; top: 58px; left: 214px; z-index: 1000; } UL#nav LI { color: #FFF; text-align: center; background-repeat: no-repeat; float: left; } /* Top nav default states (Win IE uses filter) */ UL#nav LI#nav1 { width: 86px; background-image: url(/us/images/nav/btn1_rest.png); } * html UL#nav LI#nav1 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/us/images/nav/btn1_rest.png", sizingMethod="crop"); } UL#nav LI#nav2 { width: 127px; background-image: url(/us/images/nav/btn2_rest.png); } * html UL#nav LI#nav2 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/us/images/nav/btn2_rest.png", sizingMethod="crop"); } UL#nav LI#nav3 { width: 136px; background-image: url(/us/images/nav/btn3_rest.png); } * html UL#nav LI#nav3 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/us/images/nav/btn3_rest.png", sizingMethod="crop"); } UL#nav LI#nav4 { width: 195px; background-image: url(/us/images/nav/btn4_rest.png); } * html UL#nav LI#nav4 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/us/images/nav/btn4_rest.png", sizingMethod="crop"); } /* Top nav selected states (Win IE uses filter) */ UL#nav LI#nav1.on { background-image: url(/us/images/nav/btn1_sel.png); } * html UL#nav LI#nav1.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/us/images/nav/btn1_sel.png", sizingMethod="crop"); } UL#nav LI#nav2.on { background-image: url(/us/images/nav/btn2_sel.png); } * html UL#nav LI#nav2.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/us/images/nav/btn2_sel.png", sizingMethod="crop"); } UL#nav LI#nav3.on { background-image: url(/us/images/nav/btn3_sel.png); } * html UL#nav LI#nav3.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/us/images/nav/btn3_sel.png", sizingMethod="crop"); } UL#nav LI#nav4.on { background-image: url(/us/images/nav/btn4_sel.png); } * html UL#nav LI#nav4.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/us/images/nav/btn4_sel.png", sizingMethod="crop"); } /* Top nav hover states (Win IE uses JS filter) */ UL#nav LI#nav1:hover { background-image: url(/us/images/nav/btn1_roll.png); } UL#nav LI#nav2:hover { background-image: url(/us/images/nav/btn2_roll.png); } UL#nav LI#nav3:hover { background-image: url(/us/images/nav/btn3_roll.png); } UL#nav LI#nav4:hover { background-image: url(/us/images/nav/btn4_roll.png); } UL#nav LI A { color: #FFF; height: 21px; line-height: 21px; letter-spacing: .17em; text-decoration: none; display: block; position: relative; z-index: 100; } UL#nav LI#nav2:hover A, UL#nav LI#nav2.over A { color: #666; } UL#nav LI UL { display: none; list-style: none; width: 374px; height: 63px; position: absolute; top: 20px; left: -156px; } UL#nav LI UL LI { float: left; text-align: left; position: relative; background-color: #FFF; } UL#nav LI UL LI A { text-decoration: none; padding: 0; width: 119px; height: 21px; letter-spacing: 0em; } UL#nav LI UL LI.col1 A { width: 92px; } UL#nav LI UL LI.tl, UL#nav LI UL LI.tr, UL#nav LI UL LI.bl, UL#nav LI UL LI.br, UL#nav LI UL LI.mlr { background-color: transparent; background-repeat: no-repeat; padding: 0; margin: 0; width: 6px; height: 21px; } UL#nav LI UL LI.bl, UL#nav LI UL LI.br { height: 23px; } UL#nav LI UL LI.tl { background-image: url(http://www.herbalessences.com/us/images/nav/top_left.gif); } UL#nav LI UL LI.tr { background-color: #FFF; } UL#nav LI UL LI.bl { background-image: url(http://www.herbalessences.com/us/images/nav/btm_left.gif); background-position: left bottom; } UL#nav LI UL LI.br { background-image: url(http://www.herbalessences.com/us/images/nav/btm_right.gif); background-position: right bottom; } UL#nav LI UL LI.mlr { background-color: #FFF; } UL#nav LI:hover UL, UL#nav LI.over UL { display: inline; } UL#nav LI UL LI:hover A, UL#nav LI UL LI.over A { text-decoration: underline; } /* Top Right Utility Nav*/ UL#util { list-style: none; position: absolute; top: 9px; right: 160px; z-index: 100; } UL#util LI { float: left; display: block; padding: 0 15px; background-image: url(http://www.herbalessences.com/us/images/vdots_nav.gif); background-repeat: no-repeat; background-position: left center; } UL#util LI.first { background-image: url(http://www.herbalessences.com/us/images/spacer.gif); } UL#util LI.on { } UL#util LI A { font-size: .94em; color: #FFF; letter-spacing: .07em; } /* home */ /**************************************************************** Home Page ****************************************************************/ BODY.home { background-color: #C41035; } BODY.home #mainswf { position: relative; top: -110px; left: 0px; } BODY.home #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/home/bg2.jpg); background-position: top left; } BODY.home #content { left:0px; } BODY.home #subpromos { position: relative; top: -110px; left: 0px; width: 931px; } /* fun */ /**************************************************************** Just For Fun pages ****************************************************************/ BODY.fun { background-color: #FF8B14; background-image: url(http://www.herbalessences.com/us/images/fun/bg.jpg); } BODY.groove_game { background-color: #FFB020; background-image: url(http://www.herbalessences.com/us/images/fun/bg2.jpg); } BODY.fun #mainswf { position: relative; top: -10px; left: 0px; } BODY.fun #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/fun/gamelanding_landing-bknd.jpg); } BODY.groove_game #container { background-image: url(none); } BODY.fun #content { top: 90px; left:0px; width:980px; } /**/ BODY.fun DIV#justforfungames H1 { background: url(http://espanol.herbalessences.com/img/herbalessences/ES_75.png) no-repeat 0 0; width:592px; height:148px; margin:0px; padding:0px; text-indent:-9999px; } BODY.fun DIV#justforfungames H2 { display:none; margin:0px; padding:0px; text-indent:-9999px; } BODY.fun DIV#justforfungames OL.games { width:980px; height:300px; position:relative; } BODY.fun DIV#justforfungames OL.games LI { display:block; width:325px; height:295px; position:absolute; } BODY.fun DIV#justforfungames OL.games LI A { display:block; width:325px; height:295px; float:left; text-indent:-9999px; } BODY.fun DIV#justforfungames LI.l1 { top: 0px; left:0px; z-index:102; } BODY.fun DIV#justforfungames LI.l2{ top: 0px; left:300px; z-index:101; } BODY.fun DIV#justforfungames LI.l3 { top: 0px; left:600px; z-index:100; } BODY.fun DIV#justforfungames LI.l1 A { background: url(http://espanol.herbalessences.com/img/herbalessences/ES_347.png) no-repeat 0 0; } BODY.fun DIV#justforfungames LI.l2 A { background: url(http://espanol.herbalessences.com/img/herbalessences/ES_348.png) no-repeat 0 0; } BODY.fun DIV#justforfungames LI.l3 A { background: url(http://espanol.herbalessences.com/img/herbalessences/ES_349.png) no-repeat 0 0; } * html BODY.fun DIV#justforfungames H1 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://espanol.herbalessences.com/img/herbalessences/ES_75.png", sizingMethod="crop"); } * html BODY.fun DIV#justforfungames LI.l1 A { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://espanol.herbalessences.com/img/herbalessences/ES_347.png", sizingMethod="crop"); } * html BODY.fun DIV#justforfungames LI.l2 A { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://espanol.herbalessences.com/img/herbalessences/ES_348.png", sizingMethod="crop"); } * html BODY.fun DIV#justforfungames LI.l3 A { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://espanol.herbalessences.com/img/herbalessences/ES_349.png", sizingMethod="crop"); } /* get_the_look */ /**************************************************************** Get The Look pages ****************************************************************/ BODY.get_the_look { background-color: #FFFFFF; background-image: url(http://www.herbalessences.com/us/images/get_the_look/bg.jpg); } BODY.get_the_look #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/get_the_look/bg.jpg); } /* footer */ BODY.get_the_look #footer { position: absolute; top: 600px; left: 22px; padding: 20px 0px; color: #666666; } BODY.get_the_look #footer P { float: left; margin: 0px 10px 0px 0px; } BODY.get_the_look #footer A { font-size: .94em; color: #666; letter-spacing: .07em; } /* spotlight */ /**************************************************************** Herbal Spotlight pages ****************************************************************/ BODY.spotlight { background-color: #06cdb8; background-image: url(http://www.herbalessences.com/us/images/spotlight/bg.jpg); } BODY.spotlight #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/spotlight/bg.jpg); } BODY.spotlight #content { position: relative; left:0px; top:-50px; } /**************************************************************** Herbal Spotlight pages ****************************************************************/ BODY.story { background-color: #ffffff; background-image: url(http://www.herbalessences.com/us/images/spotlight/story/bg.jpg); } BODY.story #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/spotlight/story/bg.jpg); } BODY.story #content { position: relative; left:-33px; top:-50px; } /* footer */ BODY.story #footer { position: absolute; top: 600px; left: 22px; padding: 20px 0px; color: #666666; } BODY.story #footer P { float: left; margin: 0px 10px 0px 0px; } BODY.story #footer A { font-size: .94em; color: #666; letter-spacing: .07em; } /* collections */ /**************************************************************** Collections Index pages ****************************************************************/ BODY.collections { background-image: url(http://www.herbalessences.com/us/images/collections/bg.jpg); background-color: #F2A404; } BODY.collections #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/bg2.jpg); } BODY.collections #content { top: 80px; } BODY.collections #headline { top: 0px; } BODY.collections #collection_landing_buttons { position: absolute; top: 131px; left: -12px; width: 478px; } BODY.collections #right_buttons { position: absolute; top: 142px; left: 235px; } BODY.collections #find_your_collection { position: absolute; top: 460px; left: -12px; } BODY.collections DIV.button { } BODY.collections DIV.button_text { margin: 0 0 0 58px; width: 171px; height: 35px; } BODY.collections #collection_landing_buttons H2 { font-size: 1.5em; font-family: Courier, serif; font-weight: normal; line-height: 1.1em; letter-spacing: -.075em; color: #FFF; margin: 0; } BODY.collections H5 { font-size: .9em; line-height: 1em; letter-spacing: .05em; color: #FFFFFF; display: block; margin: 0; } BODY.collections DIV.dotted_line { margin: 8px 0px; } BODY.collections #collection_image { position: absolute; top: 52px; left: 466px; } BODY.collections #mainswf { position: absolute; top: 80px; right: 0px; } BODY.collections DIV#container DIV#content table tbody tr td { color: #FFF; } * HTML BODY.collections #collection_landing_buttons a img { margin-bottom: -2px; } /**************************************************************** All Product Pages ****************************************************************/ BODY.collections #subproduct { position: absolute; top: 469px; left: -6px; width: 433px; background-image: url(http://www.herbalessences.com/us/images/collections/breaks_over/flourish.png); background-repeat: no-repeat; background-position: 31px 0px; padding: 4px 0 0 0; } BODY.collections #flashsubproduct { float: left; padding: 0 9px 0 0; } BODY.collections #subproduct a img { float: left; } /**************************************************************** Overrides for the Body Envy Collections Page ****************************************************************/ BODY.body_envy #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/body_envy/collection_main.jpg); } BODY.body_envy #container.index #content { top: 335px; width: 295px; } /**************************************************************** All Pages in the Body Envy Collections ****************************************************************/ BODY.body_envy { background-image: url(http://www.herbalessences.com/us/images/collections/body_envy/bg.jpg); background-color: #FD8F1E; } BODY.body_envy #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/body_envy/bg2.jpg); } BODY.body_envy #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.body_envy #content H2 { font-size: 4em; margin:8px 0 0 0; } BODY.body_envy #content H3 { margin:0 0 8px 0; } BODY.body_envy #mainswf { position: absolute; top: 80px; right: 0px; } BODY.body_envy #ingredients { left: 80px; } BODY.body_envy FORM { background-image: url(http://www.herbalessences.com/us/images/collections/body_envy/collection.png); background-repeat: no-repeat; width: 227px; height: 137px; padding: 0 0 0 160px; position: absolute; bottom: 0px; } * html BODY.body_envy FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/body_envy/collection.png", sizingMethod="crop"); } BODY.body_envy FORM H4 { position: relative; z-index: 250; } BODY.body_envy FORM SELECT { width: 200px; font-size: 1em; } BODY.body_envy #subproduct { background-image: url(http://www.herbalessences.com/us/images/collections/body_envy/flourish.png); } * html BODY.body_envy #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/body_envy/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Breaks Over Collections Page ****************************************************************/ BODY.breaks_over #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/breaks_over/collection_main.jpg); } BODY.breaks_over #container.index #content { top: 335px; width: 300px; left: 45px; } BODY.breaks_over #container.index #content P { width: 240px; } BODY.breaks_over #container.index #content H2 { font-size: 3.3em; } /**************************************************************** All Pages in the Breaks Over Collections ****************************************************************/ BODY.breaks_over { background-image: url(http://www.herbalessences.com/us/images/collections/breaks_over/bg.jpg); background-color: #2A7CD0; } BODY.breaks_over #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/breaks_over/bg2.jpg); } BODY.breaks_over #content { top: 138px; left: 40px; width: 387px; height: 321px; } BODY.breaks_over #content H2 { font-size: 4em; margin:8px 0 0 0; } BODY.breaks_over #content H3 { margin:0 0 8px 0; } BODY.breaks_over #mainswf { position: absolute; top: 80px; right: 0px; } BODY.breaks_over #ingredients { left: 80px; } BODY.breaks_over FORM { background-image: url(http://www.herbalessences.com/us/images/collections/breaks_over/collection.png); background-repeat: no-repeat; width: 247px; height: 137px; padding: 0 0 0 140px; position: absolute; bottom: 0px; } * html BODY.breaks_over FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/breaks_over/collection.png", sizingMethod="crop"); } BODY.breaks_over FORM H4 { position: relative; z-index: 250; } BODY.breaks_over FORM SELECT { width: 200px; font-size: 1em; } BODY.breaks_over #subproduct { top: 464px; background-image: url(http://www.herbalessences.com/us/images/collections/breaks_over/flourish.png); } * html BODY.breaks_over #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/breaks_over/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Color Me Happy Collections Page ****************************************************************/ BODY.color_me_happy #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/color_me_happy/collection_main.jpg); } BODY.color_me_happy #container.index #content { top: 335px; width: 300px; left: 45px; } BODY.color_me_happy #container.index #content H2 { font-size: 3.3em; } /**************************************************************** All Pages in the Color Me Happy Collections ****************************************************************/ BODY.color_me_happy { background-image: url(http://www.herbalessences.com/us/images/collections/color_me_happy/bg.jpg); background-color: #EC30A0; } BODY.color_me_happy #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/color_me_happy/bg2.jpg); } BODY.color_me_happy #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.color_me_happy #content H2 { font-size: 4em; margin:8px 0 0 0; } BODY.color_me_happy #content H3 { margin:0 0 8px 0; } BODY.color_me_happy #mainswf { position: absolute; top: 80px; right: 0px; } BODY.color_me_happy #ingredients { left: 120px; } BODY.color_me_happy FORM { background-image: url(http://www.herbalessences.com/us/images/collections/color_me_happy/collection.png); background-repeat: no-repeat; width: 267px; height: 147px; padding: 0 0 0 120px; position: absolute; bottom: 0px; } * html BODY.color_me_happy FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/color_me_happy/collection.png", sizingMethod="crop"); } BODY.color_me_happy FORM H4 { position: relative; z-index: 250; } BODY.color_me_happy FORM SELECT { width: 200px; font-size: 1em; } BODY.color_me_happy #subproduct { background-image: url(http://www.herbalessences.com/us/images/collections/color_me_happy/flourish.png); } * html BODY.color_me_happy #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/color_me_happy/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Dangerously Straight Collections Page ****************************************************************/ BODY.dangerously_straight #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/dangerously_straight/collection_main.jpg); } BODY.dangerously_straight #container.index #content { top: 355px; width: 300px; left: 45px; } BODY.dangerously_straight #container.index #content H2 { font-size: 2.65em; } /**************************************************************** All Pages in the Dangerously Straight Collections ****************************************************************/ BODY.dangerously_straight { background-image: url(http://www.herbalessences.com/us/images/collections/dangerously_straight/bg.jpg); background-color: #DE2163; } BODY.dangerously_straight #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/dangerously_straight/bg2.jpg); } BODY.dangerously_straight #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.dangerously_straight #content H2 { font-size: 3.1em; margin:8px 0 0 0; } BODY.dangerously_straight #content H3 { margin:0 0 8px 0; } BODY.dangerously_straight #mainswf { position: absolute; top: 80px; right: 0px; } BODY.dangerously_straight #ingredients { left: 60px; } BODY.dangerously_straight FORM { background-image: url(http://www.herbalessences.com/us/images/collections/dangerously_straight/collection.png); background-repeat: no-repeat; width: 227px; height: 137px; padding: 0 0 0 160px; position: absolute; bottom: 0px; } * html BODY.dangerously_straight FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/dangerously_straight/collection.png", sizingMethod="crop"); } BODY.dangerously_straight FORM H4 { position: relative; z-index: 250; } BODY.dangerously_straight FORM SELECT { width: 200px; font-size: 1em; } BODY.dangerously_straight #subproduct { background-image: url(http://www.herbalessences.com/us/images/collections/dangerously_straight/flourish.png); } * html BODY.dangerously_straight #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/dangerously_straight/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Drama Clean Collections Page ****************************************************************/ BODY.drama_clean #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/drama_clean/collection_main.jpg); } BODY.drama_clean #container.index #content { top: 335px; width: 240px; left: 45px; } BODY.drama_clean #container.index #content H2 { font-size: 3.3em; } /**************************************************************** All Pages in the Drama Clean Collections ****************************************************************/ BODY.drama_clean { background-image: url(http://www.herbalessences.com/us/images/collections/drama_clean/bg.jpg); background-color: #81DB15; } BODY.drama_clean #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/drama_clean/bg2.jpg); } BODY.drama_clean #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.drama_clean #content H2 { font-size: 4em; margin:8px 0 0 0; } BODY.drama_clean #content H3 { margin:0 0 8px 0; } BODY.drama_clean #mainswf { position: absolute; top: 80px; right: 0px; } BODY.drama_clean #ingredients { left: 35px; } BODY.drama_clean FORM { background-image: url(http://www.herbalessences.com/us/images/collections/drama_clean/collection.png); background-repeat: no-repeat; width: 247px; height: 144px; padding: 0 0 0 140px; position: absolute; bottom: 0px; } * html BODY.drama_clean FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/drama_clean/collection.png", sizingMethod="crop"); } BODY.drama_clean FORM H4 { position: relative; z-index: 250; } BODY.drama_clean FORM SELECT { width: 200px; font-size: 1em; } BODY.drama_clean #subproduct { background-image: url(http://www.herbalessences.com/us/images/collections/drama_clean/flourish.png); } * html BODY.drama_clean #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/drama_clean/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Hello Hydration Collections Page ****************************************************************/ BODY.hello_hydration #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/hello_hydration/collection_main.jpg); } BODY.hello_hydration #container.index #content { top: 345px; width: 300px; left: 45px; } BODY.hello_hydration #container.index #content H2 { font-size: 3.3em; } BODY.hello_hydration #container.index #mainswf { position: absolute; top: 80px; right: 0px; } /**************************************************************** All Pages in the Hello Hydration Collections ****************************************************************/ BODY.hello_hydration { background-image: url(http://www.herbalessences.com/us/images/collections/hello_hydration/bg.jpg); background-color: #038EA3; } BODY.hello_hydration #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/hello_hydration/bg2.jpg); } BODY.hello_hydration #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.hello_hydration #content H2 { font-size: 4em; margin:8px 0 0 0; } BODY.hello_hydration #content H3 { margin:0 0 8px 0; } BODY.hello_hydration #mainswf { position: absolute; top: 78px; right: 0px; } BODY.hello_hydration #ingredients { left: 110px; } BODY.hello_hydration FORM { background-image: url(http://www.herbalessences.com/us/images/collections/hello_hydration/collection.png); background-repeat: no-repeat; width: 247px; height: 137px; padding: 0 0 0 140px; position: absolute; bottom: 0px; background-position: -10px center; } * html BODY.hello_hydration FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/hello_hydration/collection.png", sizingMethod="crop"); } BODY.hello_hydration FORM H4 { position: relative; z-index: 250; } BODY.hello_hydration FORM SELECT { width: 200px; font-size: 1em; } BODY.hello_hydration #subproduct { top: 466px; background-image: url(http://www.herbalessences.com/us/images/collections/hello_hydration/flourish.png); } * html BODY.hello_hydration #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/hello_hydration/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Long Term Relationship Collections Page ****************************************************************/ BODY.long_term_relationship #container.index { height: 649px; background-image: url(http://espanol.herbalessences.com/img/herbalessences/ES_385.jpg); } BODY.long_term_relationship #container.index #content { top: 350px; width: 390px; left: 45px; } BODY.long_term_relationship #container.index #content H2 { font-size: 3em; } /**************************************************************** All Pages in the Long Term Relationship Collections ****************************************************************/ BODY.long_term_relationship { background-image: url(http://www.herbalessences.com/us/images/collections/long_term_relationship/bg.jpg); background-color: #CA2438; } BODY.long_term_relationship #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/long_term_relationship/bg2.jpg); } BODY.long_term_relationship #content { top: 142px; left: 40px; width: 380px; height: 321px; } BODY.long_term_relationship #content H2 { font-size: 2.95em; margin:8px 0 0 0; } BODY.long_term_relationship #content H3 { margin:0 0 8px 0; } BODY.long_term_relationship #mainswf { position: absolute; top: 80px; right: 0px; } BODY.long_term_relationship #ingredients { left: 80px; } BODY.long_term_relationship FORM { background-image: url(http://www.herbalessences.com/us/images/collections/long_term_relationship/collection.png); background-repeat: no-repeat; width: 247px; height: 137px; padding: 0 0 0 140px; position: absolute; bottom: 0px; } * html BODY.long_term_relationship FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/long_term_relationship/collection.png", sizingMethod="crop"); } BODY.long_term_relationship FORM H4 { position: relative; z-index: 250; } BODY.long_term_relationship FORM SELECT { width: 200px; font-size: 1em; } BODY.long_term_relationship #subproduct { top: 466px; background-image: url(http://www.herbalessences.com/us/images/collections/long_term_relationship/flourish.png); } * html BODY.long_term_relationship #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/long_term_relationship/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the None Of Your frizzness Collections Page ****************************************************************/ BODY.none_of_your_frizzness #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/none_of_your_frizzness/collection_main.jpg); } BODY.none_of_your_frizzness #container.index #content { top: 355px; width: 371px; left: 45px; } BODY.none_of_your_frizzness #container.index #content H2 { font-size: 2.7em; } /**************************************************************** All Pages in the None Of Your frizzness Collections ****************************************************************/ BODY.none_of_your_frizzness { background-image: url(http://www.herbalessences.com/us/images/collections/none_of_your_frizzness/bg.jpg); background-color: #DC1011; } BODY.none_of_your_frizzness #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/none_of_your_frizzness/bg2.jpg); } BODY.none_of_your_frizzness #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.none_of_your_frizzness #content H2 { font-size: 2.8em; margin:8px 0 0 0; } BODY.none_of_your_frizzness #content H3 { margin:0 0 8px 0; } BODY.none_of_your_frizzness #mainswf { position: absolute; top: 80px; right: 0px; } BODY.none_of_your_frizzness #ingredients { left: 110px; } BODY.none_of_your_frizzness FORM { background-image: url(http://www.herbalessences.com/us/images/collections/none_of_your_frizzness/collection.png); background-repeat: no-repeat; width: 247px; height: 151px; padding: 0 0 0 140px; position: absolute; bottom: 0px; } * html BODY.none_of_your_frizzness FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/none_of_your_frizzness/collection.png", sizingMethod="crop"); } BODY.none_of_your_frizzness FORM H4 { position: relative; z-index: 250; } BODY.none_of_your_frizzness FORM SELECT { width: 200px; font-size: 1em; } BODY.none_of_your_frizzness #subproduct { background-image: url(http://www.herbalessences.com/us/images/collections/none_of_your_frizzness/flourish.png); } * html BODY.none_of_your_frizzness #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/none_of_your_frizzness/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Shimmery Nights Collections Page ****************************************************************/ BODY.shimmery_nights #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/shimmery_nights/collection_main.jpg); } BODY.shimmery_nights #container.index #content { top: 320px; width: 300px; left: 45px; } BODY.shimmery_nights #container.index #content H2 { font-size: 3.6em; width: 250px; } /**************************************************************** All Pages in the Shimmery Nights Collections ****************************************************************/ BODY.shimmery_nights { background-image: url(http://www.herbalessences.com/us/images/collections/shimmery_nights/bg.jpg); background-color: #FFD801; } BODY.shimmery_nights #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/shimmery_nights/bg2.jpg); } BODY.shimmery_nights #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.shimmery_nights #content H2 { font-size: 4em; margin:8px 0 0 0; } BODY.shimmery_nights #content H3 { margin:0 0 8px 0; } BODY.shimmery_nights #mainswf { position: absolute; top: 80px; right: 0px; } BODY.shimmery_nights #ingredients { padding-top: 15px; left: 140px; } BODY.shimmery_nights FORM { background-image: url(http://www.herbalessences.com/us/images/collections/shimmery_nights/collection.png); background-repeat: no-repeat; width: 267px; height: 144px; padding: 0 0 0 120px; position: absolute; bottom: 0px; } * html BODY.shimmery_nights FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/shimmery_nights/collection.png", sizingMethod="crop"); } BODY.shimmery_nights FORM H4 { position: relative; z-index: 250; } BODY.shimmery_nights FORM SELECT { width: 200px; font-size: 1em; } BODY.shimmery_nights #subproduct { background-image: url(http://www.herbalessences.com/us/images/collections/shimmery_nights/flourish.png); } * html BODY.shimmery_nights #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/shimmery_nights/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Set Me Up Collections Page ****************************************************************/ BODY.set_me_up #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/set_me_up/collection_main.jpg); } BODY.set_me_up #container.index #content { top: 335px; width: 300px; left: 45px; } /**************************************************************** All Pages in the Set Me Up Collections ****************************************************************/ BODY.set_me_up { background-image: url(http://www.herbalessences.com/us/images/collections/set_me_up/bg.jpg); background-color: #3AAFA6; } BODY.set_me_up #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/set_me_up/bg2.jpg); } BODY.set_me_up #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.set_me_up #content H2 { font-size: 4.5em; margin:8px 0 0 0; } BODY.set_me_up #content H3 { margin:0 0 8px 0; } BODY.set_me_up #mainswf { position: absolute; top: 80px; right: 0px; } BODY.set_me_up #ingredients { left: 140px; } BODY.set_me_up FORM { background-image: url(http://www.herbalessences.com/us/images/collections/set_me_up/collection.png); background-repeat: no-repeat; width: 227px; height: 150px; padding: 0 0 0 160px; position: absolute; bottom: 0px; } * html BODY.set_me_up FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/set_me_up/collection.png", sizingMethod="crop"); } BODY.set_me_up FORM H4 { position: relative; z-index: 250; } BODY.set_me_up FORM SELECT { width: 200px; font-size: 1em; } BODY.set_me_up #subproduct { top: 466px; background-image: url(http://www.herbalessences.com/us/images/collections/set_me_up/flourish.png); } * html BODY.set_me_up #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/set_me_up/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Totally Twisted Collections Page ****************************************************************/ BODY.totally_twisted #container.index { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/totally_twisted/collection_main.jpg); } BODY.totally_twisted #container.index #content { top: 335px; width: 300px; left: 45px; } BODY.totally_twisted #container.index #content H2 { font-size: 3.3em; } BODY.totally_twisted #container.index #mainswf { position: absolute; top: 80px; right: 0px; } /**************************************************************** All Pages in the Totally Twisted Collections ****************************************************************/ BODY.totally_twisted { background-image: url(http://www.herbalessences.com/us/images/collections/totally_twisted/bg.jpg); background-color: #95136B; } BODY.totally_twisted #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/collections/totally_twisted/bg2.jpg); } BODY.totally_twisted #content { top: 142px; left: 40px; width: 387px; height: 321px; } BODY.totally_twisted #content H2 { font-size: 4em; margin:8px 0 0 0; } BODY.totally_twisted #content H3 { margin:0 0 8px 0; } BODY.totally_twisted #mainswf { position: absolute; top: 75px; right: 0px; } BODY.totally_twisted #ingredients { left: 40px; } BODY.totally_twisted FORM { background-image: url(http://www.herbalessences.com/us/images/collections/totally_twisted/collection.png); background-repeat: no-repeat; width: 237px; height: 137px; padding: 0 0 0 150px; position: absolute; bottom: 0px; } * html BODY.totally_twisted FORM { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/totally_twisted/collection.png", sizingMethod="crop"); } BODY.totally_twisted FORM H4 { position: relative; z-index: 250; } BODY.totally_twisted FORM SELECT { width: 200px; font-size: 1em; } BODY.totally_twisted #subproduct { top: 466px; background-image: url(http://www.herbalessences.com/us/images/collections/totally_twisted/flourish.png); } * html BODY.totally_twisted #subproduct { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/totally_twisted/flourish.png", sizingMethod="crop"); } /**************************************************************** Overrides for the Hair Color Collections Page ****************************************************************/ BODY.haircolor { background-image: url(http://www.herbalessences.com/us/images/collections/haircare/strip.jpg); background-color: #FF6600; } BODY.haircolor div#headerlogo { background-image: url(http://www.herbalessences.com/us/images/collections/haircare/hec_logo.png); background-position:0px 0px; background-repeat:no-repeat; position:relative; height:90px; } * HTML BODY.haircolor div#headerlogo { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.herbalessences.com/us/images/collections/haircare/hec_logo.png", sizingMethod="crop"); } BODY.haircolor div#headerlogo IMG { visibility:hidden; display:none;} BODY.haircolor #container { height: 593px; background-image: url(http://espanol.herbalessences.com/img/herbalessences/ES_55.jpg); background-position:0px 80px; position:relative; } BODY.haircolor #container div#haircareproducts div h2, BODY.haircolor #container div#haircareproducts div h3, BODY.haircolor #container div#haircareproducts div p { color:#FFF440; } BODY.haircolor #container div#haircareproducts * { margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:1em; letter-spacing:normal;} BODY.haircolor #container div#haircareproducts div.discover { position:absolute; top:335px; left:20px; } BODY.haircolor #container div#haircareproducts h1.title {text-indent:-9999px;} BODY.haircolor #container div#haircareproducts div.discover h2 { font-size:1.4em; } BODY.haircolor #container div#haircareproducts div.vibrant h3, BODY.haircolor #container div#haircareproducts div.highlight h3 { font-size:1.2em; } BODY.haircolor #container div#haircareproducts div.discover p { font-size:1em; padding:5px 0px; color:#FFF; } BODY.haircolor #container div#haircareproducts div.vibrant { position:absolute; top:400px; left:77px; width:260px; margin:0px; padding:0px; } BODY.haircolor #container div#haircareproducts div.vibrant * {text-align:right;} BODY.haircolor #container div#haircareproducts div.highlight { position:absolute; top:355px; left:800px; width:100px; } BODY.haircolor #container div#haircareproducts div.highlight p {width:100px;} BODY.haircolor #container div#haircareproducts p.hec-link { position:absolute; top:45px; left:350px; } BODY.haircolor #container div#haircareproducts p.hec-link a { display:block; width:480px; height:470px; } /**************************************************************** Find Your Collection page - /find_your_collection/defualt.jsp ****************************************************************/ BODY.find_your_collection { background-image: url(http://www.herbalessences.com/us/images/find_your_collection/bg.jpg); background-color: #FFF; } BODY.find_your_collection #content { top: 85px; } BODY.find_your_collection #flashcontent { margin-left: -2em; } BODY.find_your_collection #footer { padding: 0.5em; } BODY.find_your_collection #footer, BODY.find_your_collection #footer p, BODY.find_your_collection #footer p a { color: #929395; } /**************************************************************** Contact us page - /contact/defualt.jsp ****************************************************************/ BODY.contact { background-image: url(http://www.herbalessences.com/us/images/contact/bg.jpg); } BODY.contact #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/contact/bg2.jpg); } BODY.contact FORM { position: relative; top: 12px; } BODY.contact FORM LABEL { width: 55px; text-align: right; display: block; float: left; padding: 0 4px 0 0; clear: both; } BODY.contact FORM INPUT, BODY.contact FORM SELECT, BODY.contact FORM TEXTAREA { width: 220px; } BODY.contact FORM TEXTAREA { height: 200px; } BODY.contact FORM .radiocheck { padding: 0 0 0 60px; } BODY.contact FORM .radiocheck LABEL { display: inline; float: none; } BODY.contact FORM .radiocheck INPUT { width: 1em; } BODY.contact FORM #subcontent { position: absolute; top: 0px; left: 310px; width: 350px; } BODY.contact FORM #subcontent LABEL { width: 115px; text-align: right; display: block; float: left; padding: 0 4px 0 0; clear: both; } BODY.contact FORM #subcontent BUTTON { position: relative; left: 119px; background-color: #FD8F1E; padding: 2px 4px 4px 4px; border-color: #FFF; border-width: 1px; border-style: solid; color: #FFFFFF; font-weight: bold; } /**************************************************************** Product Locator page - /product_locator/defualt.jsp ****************************************************************/ BODY.product_locator { background-color: #F6590A; background-image: url(http://www.herbalessences.com/us/images/product_locator/bg.jpg); } .printable_logo, .printable { display: none; } BODY.product_locator #container { height: 593px; background-image: url(http://www.herbalessences.com/us/images/product_locator/bg2.jpg); } BODY.product_locator #content { position: relative; top: 25px; } BODY.product_locator #content form fieldset { border: none; padding: 15px 32px 47px 16px; } * html BODY.product_locator #content form fieldset { padding-bottom: 34px; } BODY.product_locator #content form fieldset label { display: block; color: #FFF; margin-bottom: 4px; padding: 0; line-height: 1em; font-size: 1em; } BODY.product_locator #content form fieldset select { display: block; width: 300px; line-height: 1em; font-size: 1em; } BODY.product_locator #content form fieldset input { display: block; margin-bottom: 8px; line-height: 1em; font-size: 1em; } BODY.product_locator #content form fieldset span#errorText { font-weight: bold; color: #FFFF00; } BODY.product_locator #content form fieldset input#zipcode { width: 40px; } BODY.product_locator div#searchResults { margin: 48px 0 0 40px; color: #FFF; } BODY.product_locator #content ul { position: absolute; top: 238px; right: 32px; list-style-type: none; float: right; } BODY.product_locator #content ul li { display: inline; float: left; _height: 1%; } BODY.product_locator #content form fieldset img#printResults { visibility: hidden; cursor: pointer; } BODY.product_locator div#searchResults table.results thead tr th { text-align: left; color: #FFF; padding-right: 5px; } BODY.product_locator div#searchResults table.results thead tr th.store { width: 116px; } BODY.product_locator div#searchResults table.results thead tr th.address { width: 335px; } BODY.product_locator div#searchResults table.results thead tr th.phone { width: 95px; } BODY.product_locator div#searchResults table.results thead tr th.distance { width: 60px; padding-right: 0; } BODY.product_locator div#searchResults table.results tbody tr td { color: #FFF; } BODY.product_locator div#searchResults table.results tbody tr td a { text-decoration: underline; } BODY.product_locator div#searchResults table.results tbody tr td.sep { background-image: url(http://www.herbalessences.com/us/images/product_locator/dots.gif); background-repeat: repeat-x; background-position: left center; } BODY.product_locator div#container div#footer { position: relative; top: 0; } BODY.product_locator div#container div#footer * { position: relative; top: 0; } BODY.product_locator span#loader { display: none; } /**************************************************************** Sample page - /contact/sample.jsp ****************************************************************/ BODY.sample H4 { position: absolute; font-size: 1.5em; left: 225px; top: 40px; width: 350px; } BODY.sample FORM { top: 0px; } BODY.sample FORM #subcontent { width: 544px; } BODY.sample FORM #subcontent LABEL { text-align: left; width: 65px; display: inline; } BODY.sample #container FORM #subcontent P { padding: 0; clear: both; } BODY.sample #container FORM #subcontent .radiocheck, BODY.sample #container FORM #subcontent P.longlabel { padding: 0 0 0 69px; } BODY.sample #container FORM #subcontent .radiocheck LABEL { float: none; } BODY.sample #container FORM #subcontent .longlabel LABEL { width: 330px; } /**************************************************************** Send to a Friend and Thank You Pages ****************************************************************/ /* send to a friend footer */ BODY.send_to_a_friend #footer { position: absolute; top: 600px; left: 22px; padding: 20px 0px; color: #FFFFFF; } BODY.send_to_a_friend #footer P { float: left; margin: 0px 10px 0px 0px; color: #FFF; } BODY.send_to_a_friend #footer A { font-size: .94em; color: #FFF; letter-spacing: .07em; } BODY.send_to_a_friend #footer p a { color: #FFF; } /* thank you footer */ BODY.thank_you #footer { position: absolute; top: 600px; left: 22px; padding: 20px 0px; color: #FFFFFF; } BODY.thank_you #footer P { float: left; margin: 0px 10px 0px 0px; color: #FFF; } BODY.thank_you #footer A { font-size: .94em; color: #FFF; letter-spacing: .07em; } BODY.thank_you #footer p a { color: #FFF; } /**************************************************************** Classes ****************************************************************/ .hidden { display: none; } a#bbb_logo img { vertical-align: top; } select#geo_location { border: 1px solid #666666; }