/* -------------------------------------------------------------------- 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/index.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(/img/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; } div.divclear { clear:both; } 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:929px; 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: #fff; } #footer p { float: left; margin: 0px 10px 0px 0px; } #footer p.footerlogo { width:49px; height:24px; background:url(/img/logo-copyright-pg.png); text-indent:-1000em; } * html #footer p.footerlogo { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/logo-copyright-pg.png", sizingMethod="crop"); } #footer a { font-size: .94em; color: #FFF; letter-spacing: .07em; line-height:24px; } /* 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: 83px; background-image: url(/img/nav/btn1_rest.png); } * html ul#nav li#nav1 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn1_rest.png", sizingMethod="crop"); } ul#nav li#nav2 { width: 124px; background-image: url(/img/nav/btn2_rest.png); } * html ul#nav li#nav2 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn2_rest.png", sizingMethod="crop"); } ul#nav li#nav3 { width: 120px; background-image: url(/img/nav/btn3_rest.png); } * html ul#nav li#nav3 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn3_rest.png", sizingMethod="crop"); } ul#nav li#nav4 { width: 88px; background-image: url(/img/nav/btn3_rest.png); } * html ul#nav li#nav4 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn4_rest.png", sizingMethod="crop"); } ul#nav li#nav5 { width: 129px; background-image: url(/img/nav/btn5_rest.png); } * html ul#nav li#nav5 { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn4_rest.png", sizingMethod="crop"); } /* Top nav selected states (Win IE uses filter) */ ul#nav li#nav1.on { background-image: url(/img/nav/btn1_sel.png); } * html ul#nav li#nav1.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn1_sel.png", sizingMethod="crop"); } ul#nav li#nav2.on { background-image: url(/img/nav/btn2_sel.png); } * html ul#nav li#nav2.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn2_sel.png", sizingMethod="crop"); } ul#nav li#nav3.on { background-image: url(/img/nav/btn3_sel.png); } * html ul#nav li#nav3.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn3_sel.png", sizingMethod="crop"); } ul#nav li#nav4.on { background-image: url(/img/nav/btn4_sel.png); } * html ul#nav li#nav4.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn4_sel.png", sizingMethod="crop"); } ul#nav li#nav5.on { background-image: url(/img/nav/btn5_sel.png); } * html ul#nav li#nav5.on { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/nav/btn4_sel.png", sizingMethod="crop"); } /* Top nav hover states (Win IE uses JS filter) */ ul#nav li#nav1:hover { background-image: url(/img/nav/btn1_roll.png); } ul#nav li#nav2:hover { background-image: url(/img/nav/btn2_roll.png); } ul#nav li#nav3:hover { background-image: url(/img/nav/btn3_roll.png); } ul#nav li#nav4:hover { background-image: url(/img/nav/btn4_roll.png); } ul#nav li#nav5:hover { background-image: url(/img/nav/btn5_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: 216px; height: 84px; position: absolute; top: 20px; left: -9px; } ul#nav li ul li { float: left; text-align:center; position:relative; background-color:#fff; } ul#nav li ul li a { text-decoration: none; padding: 0; width: 102px; 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: 21px; } ul#nav li ul li.tl { background-image: url(/img/nav/top_left.gif); } ul#nav li ul li.tr { background-color: #fff; } ul#nav li ul li.bl { background: url(/img/nav/btm_left.gif) left bottom; } ul#nav li ul li.br { background: url(/img/nav/btm_right.gif) right bottom; } ul#nav li ul li.mlr { background-color: #fff; } ul#nav li ul li.empty { width:102px; height:21px; } 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: url(/img/vdots_nav.gif) left center no-repeat; } ul#util li.first { background-image: url(/img/spacer.gif); } ul#util li.on { } ul#util li a { font-size: .94em; color: #fff; letter-spacing: .07em; } ul#util li.first a { float:left; width:220px; height:18px; background:url(/img/toplink-1.png) no-repeat; text-indent:-1000em; } * html ul#util li.first a { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/toplink-1.png", sizingMethod="crop"); } /* 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(/img/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:#f1a504 url(/img/fun/bg.jpg) repeat-x; } body.fun #mainswf { position: relative; top: -10px; left: 0px; } body.fun #container { height: 593px; } body.groove_game #container { background-image: url(none); } body.fun #content { top: 90px; left:0px; width:980px; } body.fun #footer { top:510px; } /* get_the_look */ /**************************************************************** Get The Look pages ****************************************************************/ body.get_the_look { background-color: #fff; background-image: url(/img/get_the_look/bg.jpg); } body.get_the_look #container { height: 593px; background-image: url(/img/get_the_look/bg2.jpg); } body.get_the_look #content { width:884px;} body.get_the_look #videolist { float:left; width:200px; height:167px; margin:74px 0 0 4px;} body.get_the_look #videolist ul {} body.get_the_look #videolist ul li { list-style:none; cursor:pointer;/* text-indent:-1000em; */width:182px; height:40px; background:#f51164;} body.get_the_look #videolist ul li img { float:left;} body.get_the_look #videolist ul li.on { background:#97b70e;} body.get_the_look #videoplayer { float:left; margin:0 0 0 10px;} body.get_the_look #wplist { float:right; width:270px; margin:33px 22px 0 0;} * html body.get_the_look #wplist { margin:33px 11px 0 0;} body.get_the_look #wplist ul { margin:0; padding:0;} body.get_the_look #wplist ul li { float:left; list-style:none; width:270px; margin:0 0 11px 0;} body.get_the_look #wplist dl { margin:0; padding:0;} body.get_the_look #wplist dl dt { float:left; margin:0; padding:0; width:130px; height:96px;} body.get_the_look #wplist dl dd { float:left; margin:31px 0 0 11px; padding:0;} body.get_the_look #wplist dl dd a { float:left; text-indent:-1000em; width:90px; height:14px;} body.get_the_look #wplist dl dd a.sizeOne { background:url(/img/get_the_look/link-1024-768.gif) left top no-repeat;} body.get_the_look #wplist dl dd a.sizeTwo { background:url(/img/get_the_look/link-1280-1024.gif) left top no-repeat;} body.get_the_look #event { position:absolute; left:-29px; top:241px;} body.get_the_look #event a { float:left; text-indent:-1000em; background:url(/img/get_the_look/btn-gotoevent.png); width:232px; height:129px;} * html body.get_the_look #event a { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/get_the_look/btn-gotoevent.png", sizingMethod="crop");} /* footer */ body.get_the_look #footer { padding: 0.5em; } body.get_the_look #footer, body.get_the_look #footer p, body.get_the_look #footer p a { color: #929395; } body.get_the_look #footer p.footerlogo { width:49px; height:24px; background:url(/img/logo-copyright-pg-929395.png); text-indent:-1000em; } * html body.get_the_look #footer p.footerlogo { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/logo-copyright-pg-929395.png", sizingMethod="crop");} /* collections */ /**************************************************************** Collections Index pages ****************************************************************/ body.collections { background-image: url(/img/collections/bg.jpg); background-color: #F2A404; } body.collections #container { /*height: 593px;*/ height:600px; background-image: url(/img/collections/bg2.jpg); } body.collections #content { top: 80px; } body.collections #headline { top: 0px; } body.collections #collection_landing_buttons { position: absolute; top: 142px; left: -2px; width: 465px; } body.collections #right_buttons { position: absolute; top: 142px; left: 235px; } body.collections #find_your_collection { position: absolute; top: 410px; left: 22px; } 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 #indexswf { } body.collections #mainswf { position:absolute; top:0; left:303px; } 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:332px; left:-10px; } body.collections #subproduct a { float:left; width:212px; height:110px; text-indent:-1000em; background: url(/img/collections/ge_promo.png); } * html body.collections #subproduct a { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/collections/ge_promo.png", sizingMethod="crop"); } body.collections #flashsubproduct { float: left; padding: 0 9px 0 0; } /**************************************************************** All Pages in the Body Envy Collections ****************************************************************/ body.body_envy { background-image: url(/img/collections/body_envy/bg.jpg); background-color: #FD8F1E; } body.body_envy #container { height: 593px; background-image: url(/img/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; } /**************************************************************** All Pages in the Breaks Over Collections ****************************************************************/ body.breaks_over { background-image: url(/img/collections/breaks_over/bg.jpg); background-color: #2e8fd6; } body.breaks_over #container { height: 593px; background-image: url(/img/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; } /**************************************************************** All Pages in the Color Me Happy Collections ****************************************************************/ body.color_me_happy { background-image: url(/img/collections/color_me_happy/bg.jpg); background-color: #ff2ba4; } body.color_me_happy #container { height: 593px; background-image: url(/img/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; } /**************************************************************** All Pages in the Dangerously Straight Collections ****************************************************************/ body.dangerously_straight { background-image: url(/img/collections/dangerously_straight/bg.jpg); background-color: #ff1b66; } body.dangerously_straight #container { height: 593px; background-image: url(/img/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; } /**************************************************************** All Pages in the Hello Hydration Collections ****************************************************************/ body.hello_hydration { background-image: url(/img/collections/hello_hydration/bg.jpg); background-color: #038EA3; } body.hello_hydration #container { height: 593px; background-image: url(/img/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; } /**************************************************************** All Pages in the Hello No Flakin Way *****************************************************************/ body.no_flakin_way { background-image: url(/img/collections/no_flakin_way/bg.jpg); background-color: #2E63CD; } body.no_flakin_way div#container { height: 593px; background-image: url(/img/collections/no_flakin_way/bg2.jpg); } body.no_flakin_way #content { top: 142px; left: 40px; width: 387px; height: 321px; } body.no_flakin_way #content h2 { font-size: 2.8em; margin:8px 0 0 0; } body.no_flakin_way #content h3 { margin:0 0 8px 0; } /**************************************************************** All Pages in the None Of Your frizzness Collections ****************************************************************/ body.none_of_your_frizzness { background-image: url(/img/collections/none_of_your_frizzness/bg.jpg); background-color: #dc2213; } body.none_of_your_frizzness #container { height: 593px; background-image: url(/img/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; } /**************************************************************** Find Your Collection page - /find_your_collection/index.jsp ****************************************************************/ body.find_your_collection { background-image: url(/img/find_your_collection/bg.jpg); background-color: #FFF; } body.find_your_collection #container { width:974px; height: 593px; background: url(/img/find_your_collection/bg2.jpg); } 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; } body.find_your_collection #footer p.footerlogo { width:49px; height:24px; background:url(/img/logo-copyright-pg-929395.png); text-indent:-1000em; } * html body.find_your_collection #footer p.footerlogo { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/logo-copyright-pg-929395.png", sizingMethod="crop");} /**************************************************************** Sitempa page - /sitemap/index.html *****************************************************************/ body.sitemap { background:#f1a504 url(/img/sitemap/bg.jpg) repeat-x; } body.sitemap #container { width:967px; height: 593px; background-image: url(/img/sitemap/bg2.jpg); } body.sitemap #content { padding:28px 0 0 83px; width:450px; } body.sitemap #content div { float:left; width:150px; } body.sitemap #content a { display:block; color:#fff; font-weight:bold; line-height:24px; } body.sitemap #content div ul { margin:0 0 0 30px; padding:0; } body.sitemap #content div ul li { list-style:none; } * html body.sitemap #content div ul li a { display:inline; } body.sitemap #content div ul li a { font-weight:normal; } body.sitemap #footer { top:510px; } /**************************************************************** Classes ****************************************************************/ .hidden { display: none; }