/*------------------------------------------------------ RESET ------------------------------------------------------*/ html,body,img,h1,h2,h3,h4,h5,h6, form { margin: 0; padding: 0; border: none; } ul,ul li,dt,dd {margin: 0; padding: 0; list-style: none;} object { display:block; } /*------------------------------------------------------ BASIC ELEMENTS ------------------------------------------------------*/ html{overflow-y:scroll }/*<--FORCE SCROLL BAR IN FIREFOX*/ body{font-family: Arial, sans-serif; font-size:11px; color: #666; background: #e0dedc url(/Images/_shared/main_bg.jpg) repeat-x 0 0;} a{color:#461939;} a:hover{ color:#6A2656; } strong{font-weight:bold;} p { margin:0 0 1em 0; } sup {font-size: 8px;} /*------------------------------------------------------ FUNDAMENTAL CONTAINERS ------------------------------------------------------*/ .wrap { position:relative; width: 962px; margin: 0 auto;} .main { position: relative; min-height: 480px; background: #f3f1f1; overflow:hidden; border:1px solid #666; border-width: 0 1px 1px 1px; padding-bottom: 20px; z-index:4; } .main { height: auto !important; height: 480px; } /* clean way to make IE min-height */ .header { height:110px; position:relative; background-color: #2b0f20; z-index:1000; border-bottom: 1px solid #666; } .content_wrap { margin: 0 0 30px -240px; float: left; width: 960px; } .content { width: 670px; padding-left: 272px; } .content_body { background: url(/Images/_shared/product_content_bg.png) repeat-y left top; padding: 40px 0 30px 34px; overflow: hidden; height: 1%; } .content_body p {line-height: 17px;} .content_prelude { width: 450px; margin-top: -20px; padding-bottom: 20px; font-size: 13px; } .narrow { width: 450px; } .content_top { background: url(/Images/_shared/content_top_cap.png) no-repeat; height: 10px; } .content_bottom { background: url(/Images/_shared/content_bot_cap.png) no-repeat; height: 20px; } .wide { margin: 0 20px 0 20px ; padding-left: 0; overflow:visible; width: 920px; } .sidecol { width: 220px; float: left; padding: 40px 0 0 20px; display: inline; position: relative; z-index: 80; } .print_header { display: none; } .sub_msg{margin:3px 10px;text-align:left} .small_pop{position:absolute;z-index:100;display:none;width:100px;min-height:10px;height:auto !important; height:10px;} .swf_wrap {line-height:0;margin:0;padding:0;border:none;} .x_chk { width:1px; height:1px; } /*------------------------------------------------------ GLOBAL STYLES ------------------------------------------------------*/ /* Forms */ input, textarea, select {font: 11px Arial, Helvetica, sans-serif; padding: 2px; color: #666;} textarea{ width: 175px; border: 1px solid #999; height: 125px;} label{ margin:0; font-size:11px; font-weight:700; } h1,h2,h3{ color: #333; font-weight:700; } h1 { font-size:25px; font-weight: normal; color: #461939; margin-bottom: 35px; line-height: 26px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; text-transform: uppercase; margin-top: 42px; } h1 sup {line-height: 12px; font-size: 12px; vertical-align: top; } h2 { font-size:20px; margin-bottom: 25px; color: #461939; font-family: Georgia, "Times New Roman", Times, serif; text-transform: none; font-weight: normal; line-height: 22px; } h3 { font-size:14px; color: #461939; text-transform: uppercase; font: 14px Georgia, "Times New Roman", Times, serif;} h4 { font: bold 14px Georgia, "Times New Roman", Times, serif; color: #461939; font-weight: normal;} h5 { font-size: 12px; color: #461939; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase;} h1 a, h2 a, h3 a, h4 a, h5 a { text-decoration: none; } .content_body h2 strong, .content_body h3 strong, .content_body h4 strong, .content_body h5 strong { color: #461939; } .search { width: 166px; } .search .query { width: 146px; position: absolute; background: url(/Images/_shared/search_bg.png) no-repeat 0 1px; border: none; padding-left: 4px; } .search .icon { position: absolute; right: 0; top: 0; padding: 0; cursor: pointer; } .clickbox { cursor: pointer; } .vd_error{color: #CC3300; } div form .lbl_err{color: #CC3300; } .warning, .frm_tbl .warning{color: #CC3300; } .input_err{border:1px solid #CC3300} .alert { background: #FFFFEA url(/Images/_shared/alert.png) no-repeat 5px 5px; color: #CC3300; padding: 10px 10px 10px 30px; margin: 5px 0; } .frm_tbl div{position:relative} .content_body .RadTreeView ul li { margin-bottom: 0; } .small_pop { border: 1px solid #000; background-color: #FFFFEA; } .contact_wrap div.small_pop,.contact_wrap div.sub_msg { margin-bottom:3px; } .searchResults { width: 600px; } .searchResults dt { margin-top: 20px; font-size: 15px; } /*------------------------------------------------------ HEADER ------------------------------------------------------*/ .logo { position: absolute; top: 30px; left: 20px; color: #fff; } .pro_site { width: 176px; height: 34px; background: url(/Images/_shared/btn_salon_professional.png) no-repeat; text-indent: -999em; display: block; position: absolute; right: 202px; top: 0; overflow: hidden; } .pro_site:hover { background-position: 0 -34px; } .header .search { position: absolute; top: 8px; right: 20px; } .notpro { position:absolute; bottom:5px; right:20px; } /*------------------------------------------------------ MAIN NAV ------------------------------------------------------*/ .mainnav { position:absolute; top:79px; left: 80px; z-index:1000; } .mainnav li { float: left; position: relative; } .mainnav li ul { display: none; position: absolute; top: -999em; left: 0; background: #2b0f20; width: 230px; padding-bottom: 10px; -moz-border-radius-topRight: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -webkit-border-top-right-radius: 4px;} .mainnav li:hover ul, .mainnav li.sfHover ul { left: 0; top: 32px;} .mainnav li:hover { visibility: inherit; } .mainnav a { color:#979793; text-decoration: none; text-transform: uppercase; font-size: 10px; height: 32px; line-height: 32px; width: auto; display: block; cursor:pointer; position: relative; } .mainnav a span { display: block; height: 32px; padding-left: 12px; margin-right: 12px; } .mainnav a.active {color:#fff; font-weight: bold;} .mainnav a:hover, .mainnav li.sfHover a { color:#fff; background: url(/Images/_shared/mainnav_h_bg.png) no-repeat right top;} .mainnav a:hover span, .mainnav li.sfHover a span { background: url(/Images/_shared/mainnav_h_bg.png) no-repeat left top; } /*pulldown styles */ .mainnav li li { background: url(/Images/_shared/pulldown_line_bg.png) no-repeat center bottom; } .mainnav li li.last { background: none; } .mainnav li li a, .mainnav li.sfHover li a { text-transform: none; background: none; display: block; color: #c1c1bc; width: 206px; padding: 0 12px; margin-bottom: 1px; font-size: 11px; } .mainnav li li a:hover { background: none; color: #fff; background-color: #220c1c; } .mainnav li ul.pd_locator { left: -88px; width: 200px; -webkit-border-top-right-radius: 0; -moz-border-radius-topRight: 0; } .pd_locator li { position: relative; height: 69px; } .pd_locator p { position: absolute; top: 14px; left: 18px; font-size: 12px; width: 200px; color: #fff;} .header .pd_locator .search { left: 18px; top: 32px; } /*------------------------------------------------------ SIDE PROMOS ------------------------------------------------------*/ .sidepromos { padding-top: 30px; } .sidepromos img { margin-bottom: 10px; display: block; } .sidepromos .callout { width: 193px; height: 113px; background: url(/Images/_shared/shelf_callout_bg.png) no-repeat; position: relative; margin-bottom:10px; float: left; padding: 18px 12px 12px 12px; color: #5e5e5e; display:inline; } .sidepromos .callout h3 { padding-bottom: 5px; } .sidepromos .callout img { position: absolute; left: 0; bottom: 0; } .top_content { padding-top: 220px; } /*------------------------------------------------------ SIDE NAV ------------------------------------------------------*/ .sidenav { background: url(/Images/_shared/sidenav_bg_bot.png) no-repeat left bottom; padding-bottom: 10px; min-height: 165px; position:relative; } .sidenav { height: auto !important; height: 165px; } /* clean way to make IE min-height */ .sidenav a { color: #c1c1bc; text-decoration: none; border-bottom: 1px solid #260d1e; padding: 5px 5px 5px 0; margin: 0 13px 0 17px; display: block; height: 1%; } .sidenav a.active { color: #fff; } .sidenav a:hover { color: #fff; } /*first tier */ .sidenav li a { text-transform: uppercase; font-weight: bold; } /*second tier */ .sidenav li li a { text-transform: none; font-weight: normal; } .sidenav li li.selected{ background: #210c1b; height: 1%; } /*third tier */ .sidenav li li li a { border-bottom: none; padding-left: 20px; } .sidenav li li li a.active { background: url(/Images/_shared/sidenav_arrow.png) no-repeat 10px 50%;} .sidenav li li li.selected { background: #0e050b; padding: 10px 0 10px; margin-bottom: 10px; border: 1px solid #292826; border-width: 1px 0; height: 1%; } .sidenav li li li.selected a { text-transform: uppercase; font-weight: bold;} /*fourth tier */ .sidenav li li li.selected li a { text-transform: none; font-weight: normal; } .sidenav li li li.selected li a.active {background: url(/Images/_shared/sidenav_arrow.png) no-repeat 10px 50%; } .sidenav_top { background: url(/Images/_shared/sidenav_bg_top.png) no-repeat; padding-top: 20px; height: 1%; position: relative; top: -10px; } /*------------------------------------------------------ FOOTER ------------------------------------------------------*/ .pfooter { background: url(/Images/_shared/footer_bg.png) no-repeat left bottom; padding:41px 0 15px 0; color: #fff; position: relative; z-index:3; } .footerlinks { padding: 10px; color: #898887; } .footerlinks li { display: inline; margin-right: 10px; } .footerlinks a { color: #898887; font-size: 10px; } .connect { height:28px; display:none; position:absolute; width:660px; top:13px;} .share_links li { float: left; margin-right: 5px; } .share_links a { background: url(/Images/_shared/footer_button_bg.png) no-repeat; height: 28px; width: 126px; font-size: 9px; text-transform: uppercase; text-align: center; display: block; line-height: 26px; text-decoration: none; font-weight: bold; } .share_links a.facebook { text-indent: -99em; background: url(/Images/_shared/footer_btn_facebook.png) no-repeat; width: 29px; overflow: hidden;} .share_links a.twitter { text-indent: -99em; background: url(/Images/_shared/footer_btn_twitter.png) no-repeat; width: 29px; overflow: hidden;} .share_links a:hover { background-position: 0 -28px; color: #461939; } .share_links a.selected { background-position: 0 -56px; color: #461939; } .find_salon { position: absolute; width: 330px; right: 0; top:13px; } .find_salon .search { position: absolute; top: 3px; right: 20px; } .footer_expansion_top strong { color:#461939; } .footer_expansion_top { background: url(/Images/_shared/footer_expansion_top.png) no-repeat; min-height:150px; color:#666; padding:15px 30px; } .footer_expansion_top { height: auto !important; height: 150px; } /* clean way to make IE min-height */ .footer_expansion { background: url(/Images/_shared/footer_expansion_bottom.png) no-repeat left bottom; width:906px; position:relative; margin:0 auto; display:none;} .footer_expansion ul li { background: url(/Images/_shared/list_bullet.png) no-repeat 0 5px; padding-left: 15px; } a.footer_expansion_close { background: url(/Images/_shared/footer_expansion_close.png) no-repeat; width:17px; height:18px; position:absolute; right:5px; top:5px; } a.footer_expansion_close:hover { background-position: 0 -18px; } .pane { display:none; position: relative; } .footer label { color: #461939; } .p0 { position: relative; overflow: hidden; height:160px; } .p0 h5 { padding-bottom:5px; width:175px; } .p0 .col1 { float: left; margin: 10px 0 0 0px; width: 200px; display:inline; } .p0 .col2 { float: left; margin: 10px 0 0 0px; width: 310px; display:inline; } .p0 .col2 label { float:left; display:inline; width:90px; text-align:right; padding-right: 5px; } .p0 .col2 div { padding:5px 0; } .p0 .msg label { float:none; display:block; width:200px; text-align:left;} .p0 .msg { position:absolute; top:5px; left:440px; } .p0 .msg textarea { width:190px; height:60px; } .p0 .msg .icon { position:absolute; right:24px; bottom:-34px; } .p0 .col3 { position: absolute; right: -43px; top: 10px; width: 220px; } .p0 .col3 a { padding:3px; } .p0 .divider { position:absolute; right:198px; top:0; height:159px; } .p1 { position: relative; overflow: hidden; height:160px; } .p1 .col1 { float: left; margin: 20px 0 0 20px; width: 200px; display:inline; } .p1 .col2 { float: left; margin: 20px 0 0 30px; width: 310px; display:inline; } .p1 h5 { padding-bottom:5px; } .p1 .col2 label { float:left; display:inline; width:70px; text-align:right; padding-right: 5px; } .p1 .col2 div { padding:2px 0; } .p1 .col2 .icon { margin-left: 10px; } .p1 .col3 { position: absolute; right: 20px; top: 20px; width: 220px; } .p1 .divider { position:absolute; right:260px; top:0; height:159px; } .p2 { position: relative; overflow: hidden; height:160px; } .p2 .screen { position: absolute; bottom: 0; left: 255px; } .p2 .col1 { float: left; margin: 20px 0 0 20px; width: 200px; display:inline; } .p2 .col2 { float: left; margin: 20px 0 0 220px; width: 210px; display:inline; } .p2 .col3 { position: absolute; right: 20px; top: 20px; width: 150px; } .p3 { position: relative; overflow: hidden; height:150px; } .p3 .screen { position: absolute; height:130px; left: 420px; top:20px; } .p3 .col1 { float: left; margin: 20px 0 0 125px; width: 280px; display:inline; } .p3 .col2 { float: left; margin: 20px 0 0 320px; width: 150px; } .p3 .col3 { position: absolute; right: 120px; top: 20px; width: 150px; } .p4 { position: relative; overflow: hidden; height:150px; } .p4 .screen { position: absolute; height:130px; left: 420px; top:20px; } .p4 .col1 { float: left; margin: 20px 0 0 125px; width: 280px; display:inline; } .p4 .col2 { float: left; margin: 20px 0 0 320px; width: 150px; } .p4 .col3 { position: absolute; right: 120px; top: 20px; width: 150px; } /*------------------------------------------------------ CONNECT ------------------------------------------------------*/ .widget_download { width: 360px; position: absolute; top: 130px; right: 20px; } /*------------------------------------------------------ CONTENT ------------------------------------------------------*/ .intro_copy { color: #fff; width: 340px; height: 250px; position: absolute; left: 300px; top: 30px; z-index:100; font-size: 11px; } .intro_copy h1 { color: #fff; margin-top: 24px; margin-bottom: 15px; } .intro_copy h4 { color: #fff; text-transform: uppercase; font-size: 14px; } .intro_copy p { width: 240px; } .intro_wide p { width: 320px; } .content_body ul li { background: url(/Images/_shared/list_bullet.png) no-repeat 0 2px; padding-left: 15px; margin-bottom: 1em; } .content_body ul, .content_body ol { margin-bottom: 20px; } .content_body ul ul, .content_body ol ol { margin-top: 10px; } .content_body ol li { margin-bottom: 1em; } .content_body strong { color: #461939; } .privacy_pol h2 { margin-bottom: 5px; font-size: 16px; } .tl { background: url(/Images/_shared/corner_tl.png) no-repeat; width: 6px; height: 6px; position: relative; top:-40px; left:-34px; } .bl { background: url(/Images/_shared/corner_bl.png) no-repeat; width: 6px; height: 7px; position: relative; bottom:-30px; left:-34px; } .loader_sm{background:url(/Images/_shared/ajax-loader-sm.gif) no-repeat;width:16px;height:16px;display:none;z-index:500} .loader_cl{background:#fff url(/Images/_shared/ajax-loader.gif) no-repeat center 100px;width:100%;height:100%;display:none;z-index:500;left:0;top:0;position:absolute;} /*------------------------------------------------------ HOME ------------------------------------------------------*/ .shelf_home { background: #D8D1CB url(/Images/_shared/shelf_home_bg.png) repeat-x left bottom; margin-bottom: -20px; padding-left: 30px; padding-bottom: 10px; overflow:hidden; width: 930px; } .shelf_home .callout { width: 300px; float: left; position: relative; border-right: 1px solid #a09b96; padding-bottom: 20px; margin-top: 20px; color: #fff; overflow: hidden;} .shelf_home .desc {width: 170px; padding: 20px 0 0 120px;} .shelf_home img { position: absolute; top: 10px; left: 20px; } .shelf_home .nb { border: none; } .shelf_home .more { text-transform: uppercase; color: #fff; text-decoration: none; font-weight: bold; background: url(/Images/_shared/home_callout_arrow.png) no-repeat right center; padding-right: 13px; display:inline-block; } .shelf_home .more:hover { color: #fff; } .home_billboard { background: #000; height: 467px;} /*------------------------------------------------------ SYSTEMS ------------------------------------------------------*/ .systems_shelf { overflow: hidden; } .systems_shelf .callout { width: 193px; height: 113px; background: url(/Images/_shared/shelf_callout_bg.png) no-repeat; position: relative; margin: 20px 0 0 18px; float: left; padding: 18px 12px 12px 12px; color: #5e5e5e; display:inline; } .systems_shelf .noarrow { background-image: url(/Images/_shared/shelf_callout_bg_noarrow.png); } .systems_shelf .callout h3 { padding-bottom: 5px; } .systems_shelf .callout img { position: absolute; left: 0; bottom: 0; } .systems_shelf .callout img.icon { position: relative; } .systems_shelf .icon p{ padding-left: 80px; } /*View all products*/ .va_closed{ background: url(/Images/_shared/va_products_bg_closed.png) no-repeat; height: 20px; width: 927px; margin-left:17px; color: #fff; position:relative; z-index:100; } .va_products { background: url(/Images/_shared/va_products_bg.png) no-repeat; height: 775px; width: 927px; margin-left:17px; color: #fff; position:relative; z-index:101; margin-top:-20px; padding-bottom:20px;} .va_closed a, .va_products a { color: #fff; text-decoration: none; } .va_products li a { color: #c1c1bc; font-size: 10px; } .va_products li a:hover { color: #fff; } .va_products h4, .va_products h5 { color: #fff; text-transform: uppercase;} .va_products h5 { font-size: 10px; } .va_products .product { float: left; width: 182px; padding: 110px 13px 0 13px; position: relative; } .va_products .product img { position: absolute; top: 0; left: 0; } .va_products .last { width: 100px;} .va_toggle { position: absolute; top: 5px; right: 10px; padding-right: 16px; text-transform: uppercase; font-weight: bold; z-index: 50; font-size: 9px; } .down { background: url(/Images/_shared/icon_arrow_d.png) no-repeat right center; } .up { background: url(/Images/_shared/icon_arrow_u.png) no-repeat right center; } .va_haircare { width: 650px; } .va_stylers { width: 300px; position: absolute; left: 650px; top: 0; background: url(/Images/_shared/stylers_divider.png) no-repeat; padding-left: 20px; } .billboard_collection { background: #E2E1DC; width: 960px; height: 343px; position:relative; z-index:105; border-top: 1px solid #666; line-height:0; } .billboard_product { background: #f1f1f1 url(/Images/_shared/product_head_bg.jpg) no-repeat; width: 960px; height: 304px; } .product_desc { position: relative; z-index: 700; margin-bottom: 40px; width: 450px; } .product_desc h3 { margin: 30px 0 5px 0; } .product_desc h3:first-child { margin-top: 0; } .product_highlight { position: absolute; z-index: 50; right: 0; top: 0;} .product_callout { background: url(/Images/_shared/product_callout.png) no-repeat; width: 302px; height: 157px; float: left; margin: 10px 10px 0 0; position: relative; } .product_callout img { position: absolute; bottom: 0; } .product_callout .desc { color: #9d8a97; width: 170px; position: absolute; left: 115px; top: 35px; line-height:11px; } .product_callout h4 a { color: #fff; font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: normal; padding-bottom: 5px; display: block; } .product_callout h4 strong { color: #fff; font-weight: bold;} .product_callout strong { color: #B5A6AF; font-weight: bold;} .product_callout .stars { position: absolute; top: 80px; left: 0; } .botanicals { width: 240px; float: left; color: #666; margin: 30px 0; } .botanicals h3 { margin-bottom: 20px; } .botanicals h4 { text-transform: uppercase; color: #666; font: 11px Georgia, "Times New Roman", Times, serif; margin-top: 10px; } .ingredient { width: 110px; float: left; } .spanish { position: absolute; top: 42px; right: 20px; } .product_col { width: 160px; position: absolute; top: 40px; right: 20px; z-index: 300;} .product_col .callouts { top: 333px; position: absolute; left: 0;} .product_col .wtb { background: url(/Images/_shared/panel_wtb_bg.png) no-repeat; width: 146px; height: 46px; color: #ccc; position: relative; margin-bottom: 10px; font-size: 9px; padding: 24px 0 0 12px; } .product_col .wtb .query { background: none; width: 123px; height: 17px; background: url(/Images/_shared/panel_wtb_input.png) no-repeat; padding: 2px; font-size: 9px; border: none; position: absolute; top: 40px; left: 9px; } .product_col .wtb .icon { position: absolute; right: 5px; top: 38px; padding: 0; } .product_detail .callouts { top: 240px; } .detail_topper { height: 180px; width: 160px; position: relative; } .detail_topper h3 { font-size: 11px; } .detail_topper h3 a { text-decoration: none; padding: 6px 0; display: block;} .detail_valign { position: absolute; bottom: 0; right: 0; width: 140px; } .badge { display:none; background: url(/Images/_shared/icon_awards.png) no-repeat 0 50%; padding-left: 20px; } .profav { background: url(/Images/_shared/icon_pro_fav.png) no-repeat 0 50%; padding-left: 20px; } .horz_wrap { display:none; width:535px; right:150px; position:absolute; top:-27px; } .horz_overlay { position:absolute; background: url(/Images/_shared/awards/horz_overlay_right.png) no-repeat top right; right:0; } .horz_overlay_content { position:relative; background: transparent url(/Images/_shared/awards/horz_overlay_left.png) no-repeat top left; left:-16px; height:166px; } .horz_overlay img { float:left; display:block; width:133px; height:161px; } .rec { width: 115px; padding-top: 130px; float: left; position: relative; } .rec strong { display: block; } .rec img { position: absolute; top: 10px; left: 0; } /*------------------------------------------------------ PRO FAVORITES ------------------------------------------------------*/ .pro_highlight { position: relative; border-bottom: 1px solid #ccc; min-height: 225px; margin-bottom: 30px; width: 615px; } .pro_highlight .hl_products { position: absolute; top: 30px; left: 0; } .pro_highlight .hl_artist { position: absolute; top: 32px; left: 145px; } .pro_highlight .desc{width: 275px; margin-left: 300px;} /*------------------------------------------------------ SYSTEMS REVIEWS ------------------------------------------------------*/ .rvw_box { background: #eeebe9 url(/Images/_shared/reviews/bg_bottom.png) no-repeat left bottom; width:585px; margin-top: 15px; } .rvw_box_content { background: url(/Images/_shared/reviews/bg_top.png) no-repeat; width:585px; min-height:70px; } .rvw_box_content { height: auto !important; height:70px; } /* clean way to make IE min-height */ .rvw_box_content h5 { font-size:99%; } .rvw_avg { position:relative; } a.rvw_close { background: url(/Images/_shared/footer_expansion_close.png) no-repeat; width:17px; height:18px; position:absolute; right:9px; top:9px; } a.rvw_close:hover { background-position: 0 -18px; } .rvw_avg h5 { position:absolute; top:12px; left:20px; } .rvw_avg .stars { position:absolute; top:34px; left:20px; } .rvw_avg span { position:absolute; top:10px; right:20px; } .rvw_avg .btrght { position:absolute; top:32px; right:20px; } .rvw_addnew { display:none; visibility:hidden; padding:18px; position:relative; } .rvw_addnew textarea { width:422px; height:70px; } .rvw_addnew .left { position:absolute; top:40px; left:18px; padding-top:20px; text-align:right; } .rvw_addnew .right { margin-left:115px; padding-top:20px; position:relative; } .rvw_addnew .right p { padding-top: 20px; } .rvw_addnew .btn_syr { position:absolute; bottom:23px; right:24px; } .rvw_addnew .stars { position:relative; display:inline; } .user_review { width: 425px; padding-top: 20px; } .user_review .response { margin-bottom: 30px; } .response h5 img { margin-left:5px; } .stars ul li { background: none; padding-left:0; } .sGray, .sGray a, .sGray .current_rating { background: url(/Images/_shared/reviews/review_stars_gray.png) left -1000px repeat-x; } .sWhite, .sWhite a, .sWhite .current_rating { background: url(/Images/_shared/reviews/review_stars.png) left -1000px repeat-x; } .sPurp, .sPurp a, .sPurp .current_rating { background: url(/Images/_shared/reviews/review_stars_purp.png) left -1000px repeat-x; } .sPurp { padding-top:10px; } .star_rating { position:relative; width:75px; height:15px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left bottom; } .star_rating li{ display: inline; } .star_rating a, .star_rating .current_rating { cursor:default; position:absolute; top:0; left:0; text-indent:-1000em; height:15px; line-height:15px; outline:none; overflow:hidden; border: none; } .star_rating a.one_star { width:20%; z-index:6; } .star_rating a.two_stars { width:40%; z-index:5; } .star_rating a.three_stars { width:60%; z-index:4; } .star_rating a.four_stars { width:80%; z-index:3; } .star_rating a.five_stars { width:100%; z-index:2; } .star_rating .current_rating { z-index:1; background-position: left top; } .hover .current_rating { background-position: left bottom; } .hover a:hover, .hover a:active, .hover a:focus { cursor:pointer; background-position: left top; } .rvw_addnew .stars { position:absolute; left:140px; top:17px; } /*------------------------------------------------------ PRODUCT AWARDS ------------------------------------------------------*/ .awards_container { position:relative; color:#461939; height: 230px; } .awards_container h3 { color:#461939; padding-bottom: 10px; } .awards_wrap { background: url(/Images/_shared/awards/award_bg.png) repeat-x; width:537px; height:161px; position:absolute; top:25px; left:95px; overflow:hidden; } .awards_left { background: url(/Images/_shared/awards/left_arrow.png) no-repeat; left:95px; } .awards_right { background: url(/Images/_shared/awards/right_arrow.png) no-repeat; left:613px; } .awards_block { margin-left:21px; top:0; position:relative; } .awards_nav { position:absolute; width:20px; height:161px; top:25px; background-position:-40px; cursor:default; z-index:2; } .awards_block ul { margin-bottom: 0; } .awards_block ul li { float:left; width:165px; background: none; padding-left:0; height:161px !important; } .awards_block img { margin-left:16px; } .awards_nav_active { background-position:0; cursor:pointer; } a.awards_nav_active:hover { background-position:-20px; } .ashort { width:286px; } .ashort .awards_wrap { width:190px; } .ashort .awards_right { left:266px; } .amed { width:470px; } .amed .awards_wrap { width:370px; } .amed .awards_right { left:450px; } /*------------------------------------------------------ HAIR CONSULTATION ------------------------------------------------------*/ .con_err { position:absolute; right:0; border:1px solid #000; color:#CC3300; background-color:#FFFFEA; display:none; text-align:center; bottom:56px; width:150px; padding:5px; } .consult { background: url(/Images/_shared/consult_bg.jpg) repeat-y left top; padding: 40px 0 30px 34px; line-height: 17px; margin-top: 100px; width: 886px; position: relative; min-height: 430px; height: 1%; overflow: hidden; } .consult_bg { position: absolute; } .instruct { width: 200px; float: left; margin-top: 30px; } .consult h1 { margin: 0 0 15px 0; font-size: 20px; } .instruct h1 { text-transform: none; font-size: 22px; } .status { position: absolute; top: 6px; left: 17px; } .consult_copy { width: 608px; float: left; margin: 30px 0 0 55px; } .consult_copy .col1, .consult_copy .col2 { width: 264px; float: left; margin-right: 30px; } .consult_copy h3 { text-transform: none; font-size: 17px; } .consult_header { margin-bottom: 20px; } .nextstep { position: absolute; bottom: 20px; right: 20px; } .prevstep { position: absolute; bottom: 20px; left: 20px; } .question { margin-bottom: 20px; } .question label { display: inline; font-weight: normal; padding-left: 5px; cursor: pointer; } .question h3 { text-transform: none; font-size: 18px; padding-bottom: 5px; } .fas { background: url(/Images/_shared/panel_fas_bg.png) no-repeat; width: 146px; height: 46px; color: #fff; position: relative; margin-bottom: 10px; font-size: 8px; padding: 24px 0 0 12px; } .fas .query { background: none; width: 123px; height: 17px; background: url(/Images/_shared/panel_wtb_input.png) no-repeat; padding: 2px; font-size: 9px; border: none; position: absolute; top: 40px; left: 9px; } .fas .icon { position: absolute; right: 5px; top: 38px; padding: 0; cursor: pointer; } .modify_sel { background: url(/Images/_shared/btn_modify_sel.png) no-repeat; width: 158px; height: 0; display: block; padding-top: 24px; overflow: hidden; } .modify_sel:hover { background-position: 0 -24px; } .result_action { position: absolute; top: 70px; right: 20px; width: 160px; } .rec_primary { width: 242px; float: left; } .rec_secondary { width: 242px; padding-top: 85px; padding-left: 70px; float: left; background: url(/Images/_shared/result_med_+.png) no-repeat left 100px; } .rec_secondary img {padding-bottom: 30px; } .rec_scroll { position: relative; } .rec1 { text-align: center; } .rec2 { text-align: center; } .s_desc { width: 280px; } .s_rec1 { width: 150px; } .s_rec2 { width: 77px; } .s_plus { width: 46px; } .styler_rec { position: relative; min-height: 162px; margin-bottom: 30px; } .styler_rec td { vertical-align: top; } .rec_add { background: url(/Images/_shared/rec_add_bg_bot.png) no-repeat 0 bottom; width: 582px; min-height: 242px; position: relative;} .rec_add h1 { background: url(/Images/_shared/rec_add_bg_top.png) no-repeat; width: 562px; height: 102px; padding: 20px 0 0 20px; position: absolute; top: 0; left:0; } .rec_add .desc { width: 250px; padding: 80px 0 20px 300px; position: relative; z-index: 50; } .rec_add .addImages { position: absolute; z-index: 51; left: 20px; top: 45px; } .rec_treatment td { vertical-align: top; } .product_plus { margin: 0 10px; } .rec_pureartist {width: 157px; background: url(/Images/_shared/pure_artist_bg_bot.png) no-repeat left bottom; position: relative; margin-bottom: 20px;} .rec_pureartist .upper { background: url(/Images/_shared/pure_artist_bg_top.png) no-repeat; width: 137px; padding: 14px 10px 10px 10px; } .rec_pureartist h4 { color: #461939; font: 14px Georgia, "Times New Roman", Times, serif; text-transform: uppercase; padding-bottom: 10px; } .rec_pureartist h5 { color: #461939; text-transform: uppercase; font: 11px Arial, Helvetica, sans-serif; } .set1, .set2, .set3, .set4, .set5, .set6 { display: none; } .editMode .set1, .editMode .set2, .editMode .set3, .editMode .set4, .editMode .set5, .editMode .set6 { display: block; } /*------------------------------------------------------ DISCOVER ------------------------------------------------------*/ .flash_difference { margin: 30px 0; line-height:0; } .difbio { padding-left: 140px; background-repeat: no-repeat; padding-top: 12px; width: 430px; padding-bottom: 40px; } .comprehensive { background-image: url(/Images/_shared/difference_comprehensive.png); } .performance { background-image: url(/Images/_shared/difference_performance.png); } .indulgence { background-image: url(/Images/_shared/difference_indulgence.png); } .integrity { background-image: url(/Images/_shared/difference_integrity.png); } .promise_logo { position: absolute; top: 145px; right: 40px; } /*------------------------------------------------------ EXPERIENCE ------------------------------------------------------*/ .treatment { width: 275px; float: left; margin: 0 20px 30px 0; } .treatment h3 { margin-bottom: 10px; } /*------------------------------------------------------ NEWS ------------------------------------------------------*/ .article { width: 400px; padding-right: 50px; float: left; position: relative; display: inline; } .article .download_pdf { position: absolute; right: 20px; top: 0; } .article_img { float: right; margin: 0 0 10px 10px; } .content_sidebar { width: 172px; float: left; display: inline; } .content_sidebar .listing {background-color: #f1f1f1; border: 1px solid #c0beba; position: relative; } .content_sidebar .listing ul li { background: none; padding: 0; } .content_sidebar .rss { position: absolute; top: 8px; right: 8px; } .news_shelf { margin: 10px 0 0 20px;} .news_shelf .callout { float: left; margin-right: 15px; width: 220px; position: relative; display: inline; } .news_shelf .callout h3 { margin-bottom: 10px; } .news_shelf .more { color: #fff; position: absolute; bottom: 7px; right: 10px; text-transform: uppercase; text-decoration: none; font-weight: bold; background: url(/Images/_shared/news_callout_arrow.png) no-repeat right center; padding-right: 13px; } .news_shelf .latest { background: url(/Images/_shared/news_callout_bg.png) no-repeat; padding: 10px; height: 218px; width: 200px; } .content_body li.pressclip { float: left; margin-bottom: 0; } .pressclip a { display: block; width: 137px; text-decoration: none; padding: 16px 17px 16px 16px; line-height: 11px; } .pressclip strong { display: block; } .pressclip a.active { background-color: #ccc; } .pressclip img {display: block; margin-bottom: 5px;} .co_newsletter { padding-top: 10px; } .co_newsletter img { margin-top: 70px; } .content_body li.buzz_list, .content_body li.pressclip, .content_body li.events_list { padding-left: 0; background: none;} .press_list ul li { float: none; clear:both; background: none; padding-left: 0; margin-bottom: 15px; overflow: hidden; position: relative; } .press_list strong { display: inline } .press_list a { float: left; } .press_list div {padding-left: 155px;} .press_list .pdf { position: absolute; bottom: 0; left: 155px; } .press_list .title { display: block; } .buzz_list a, .event_list a { padding: 8px 10px 10px 20px; display: block; color: #5e5e5e; } .buzz_list a:hover, .event_list a:hover {color: #461939;} .buzz_list a.active, .event_list a.active { background-color: #deded8; color: #461939; } .buzz_list span { display: block; background: url(/Images/_shared/icon_newsart.png) no-repeat left bottom; padding-left: 20px; height: 17px;} .buzz_list .vid { background-image: url(/Images/_shared/icon_video.png); } .buzz_list .pic { background-image: url(/Images/_shared/icon_pic.png); } .buzz_archive span{ margin-left: -20px; padding-left: 20px;} .buzz_archive a { width: 350px; } .event_list strong { display: block; } .listing { overflow: hidden; height: 1%; } .sideheader_events {display: block; margin: 0 0 -3px; padding:0;} .page_top { } .page_bot {} .page_next { background: url(/Images/_shared/page_next_arrow.png) no-repeat right center; padding-right: 10px; } .page_prev { background: url(/Images/_shared/page_prev_arrow.png) no-repeat left center; padding-left: 10px; } ul.sf_newsList li { background:none;padding-left:0; } /*------------------------------------------------------ CONTACT ------------------------------------------------------*/ .contact_wrap { position:relative; } .contact_wrap div { margin-bottom: 8px; } .contact_wrap label { width:100px; float:left; text-align:right; margin-right:7px; color:#461939; } .contact_wrap label.nf { float: none; } .comments { position:absolute; top:0px; left:300px; height:180px; } .comments textarea { width:300px; height:130px; } .comments .icon { position:absolute; bottom:0; right:0; } /*------------------------------------------------------ LOCATOR ------------------------------------------------------*/ .locator_form { background: url(/Images/_shared/locator_form_bg.png) no-repeat; width: 278px; height:231px; float: left; padding: 22px 0 0 20px; } .locator_form h3 { margin-bottom: 10px; } .locator_form div { margin-bottom: 8px; } .locator_form label { width: 60px; text-align: right; display: inline-block; padding-right: 5px; } .salon_img { width: 520px; float: left; margin-left: 25px; text-align: right; } .salon_map { width: 520px; float: left; margin-left: 25px; } .submit_salon { margin: 10px 0 0 67px; } .salon_results { background: url(/Images/_shared/locator_results_bg_bot.png) no-repeat left bottom; width: 843px; min-height: 240px; clear: both;} .salon_results_top { background: url(/Images/_shared/locator_results_bg_top.png) no-repeat; padding: 45px 32px 32px 32px; position: relative; } .salon_error { width: 480px; float: left; margin-left: 25px; padding: 20px; height: 231px; line-height: 231px; } .num_results { position: absolute; top: 15px; left: 20px; } .num_results strong { padding-right: 5px; } .salon_records { border-collapse: collapse; width: 100%; position: relative;} .salon_records td { border-bottom: 1px solid #ccc; padding: 15px; } .s_pic { width: 100px; vertical-align: top;} .s_img { position: relative; overflow: hidden; width: 98px; height: 58px; z-index: 5; left: 0; top: 0; } .s_cover {background: url(/Images/_shared/locator_pic_mask.png); width: 98px; height: 58px; position: absolute; z-index: 10; top: 0; left: 0;} .frm_tbl div.s_cover { position: absolute; } .s_num { font-size: 16px; font-weight: bold; vertical-align: top; border-bottom: none; width: 20px; } .s_title { font: 14px Georgia, "Times New Roman", Times, serif; color: #461939; vertical-align: top; width: 200px;} .s_address { } .s_but { text-align: right;} .page_top { position: absolute; top: 15px; right: 10px; } .page_top a{padding:0 3px;} .page_top span{padding:0 3px;} .page_bot { position: absolute; bottom: -20px; right: 10px; } .page_bot a{padding:0 3px;} .page_bot span{padding:0 3px;} .markerLabel{display:block;width:28px;height:40px;font-size:11px;font-weight:700;font-family:Arial;color:#fff;text-align:center;padding-top:5px;} .s_infowindow {width: 225px; display: block; } /*------------------------------------------------------ SHARE ------------------------------------------------------*/ .share { position:relative; width:158px; } .addThis { position:relative; padding:30px 0 0 6px; margin-top:-25px; display:none; width:158px; height:34px; background: url(/Images/_shared/btn_share_up.png) no-repeat 0 0; } .addThis a { padding-left: 3px; } /*------------------------------------------------------ REGISTRATION ------------------------------------------------------*/ .frm_top { vertical-align:top; } .frm_tbl { margin-top: 20px; } .frm_tbl th { text-align:right; color:#461939; vertical-align:top; width: 100px; } .frm_tbl_reg { width:100%; } .frm_tbl_reg h3 { padding:10px 0 15px 0; } .cmplt_act { background:url(/Images/alert.png) no-repeat; padding-left:27px; } .salon_body { padding:0 20px 0; } .frm_wrap .btn { position:absolute; top:20px; left:310px; } .frm_wrap .btn2 { position:relative; top:20px; left:234px; } .btn_bot { padding: 20px; position: relative; } .btn_bot .save { position: absolute; right: 20px; top: 20px; } .btn_bot .reg { position: absolute; right: 35px; } .reg_col { width: 400px; float: left; margin-right: 20px; } .reg_content_full { width: 600px; float: left; margin-right: 20px; } .reg_content_form { width: 800px; float: left; margin-right: 20px; } .reg_right_wd { float: left; width: 175px; padding: 50px; } .reg_left_wd { float: left; width: 450px; padding: 10px; border-color: #461939; border-width: 0 1px 0 0; border-style: solid; } .reg_left { float: left; width: 300px; padding: 25px; border-color: #461939; border-width: 0 1px 0 0; border-style: solid; } .reg_right { float: left; width: 300px; padding: 75px; } .dup_address { width: 250px; padding: 20px; background-color: #fff; margin-bottom: 20px; } .frm_short .frm_tbl { margin-top: 0; } .frm_short .frm_tbl th { width: 200px; } .frm_tbl_brd { margin-top: 20px; } .frm_tbl_brd th { text-align:right; color:#461939; vertical-align:top; width: 100px; } .frm_tbl_line { margin-top: 20px; border-color: #461939; border-width: 0 1px 0 0; border-style: solid; } /*------------------------------------------------------ PUREOLOGIST ------------------------------------------------------*/ .frm_tbl_wide { margin-top: 20px; } .frm_tbl_wide th { text-align:left; color:#461939; vertical-align:top; width: 300px; } .frm_tbl_nw { margin-top: 20px; } .frm_tbl_nw th { text-align:right; color:#461939; vertical-align:top; width: 100px; } .frm_tbl_nw td { vertical-align:top; left:auto } /*------------------------------------------------------ UTILS ------------------------------------------------------*/ .clear { clear:both; } .fl_right { float: right; } .fl_left { float: left; } .fl_none { float: none; } .nb { border: none; } .rel_pos { position: relative; } .abs_pos { position:absolute; } .no_pointer { cursor:none; } .inline { display:inline; } .fnt_nrml { font-weight:normal; } .bold { font-weight:700; } .nobg { background: transparent none; } .w1 { width:150px; } .w2 { width:325px; } .w3 {width:100%} .hide { display:none; } .min_h1{min-height:450px;height:auto !important; height:450px;} .cnt{text-align:center} /* Datepicker ----------------------------------*/ .ui-datepicker { width: 17em; padding: .2em .2em 0; } .ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left:2px; } .ui-datepicker .ui-datepicker-next { right:2px; } .ui-datepicker .ui-datepicker-prev-hover { left:1px; } .ui-datepicker .ui-datepicker-next-hover { right:1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year {width: 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } .dataTables_wrapper { position: relative; min-height: 302px; clear: both; _height: 302px; zoom: 1; /* Feeling sorry for IE */ } .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 250px; height: 30px; margin-left: -125px; margin-top: -15px; padding: 14px 0 2px 0; border: 1px solid #ddd; text-align: center; color: #999; font-size: 14px; background-color: white; } .dataTables_length { width: 40%; float: left; } .dataTables_info { width: 60%; float: left; } .dataTables_paginate { width: 44px; * width: 50px; float: right; text-align: right; } /* Pagination nested */ .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { height: 19px; width: 19px; margin-left: 3px; float: left; } .paginate_disabled_previous { background-image: url('/images/back_disabled.jpg'); } .paginate_enabled_previous { background-image: url('/images/back_enabled.jpg'); } .paginate_disabled_next { background-image: url('/images/forward_disabled.jpg'); } .paginate_enabled_next { background-image: url('/images/forward_enabled.jpg'); } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables sorting */ .sorting_asc { background: url('/images/sort_asc.png') no-repeat center right; padding-right: 18px; } .sorting_desc { background: url('/images/sort_desc.png') no-repeat center right; padding-right: 18px; } .sorting { background: url('/images/sort_both.png') no-repeat center right; padding-right: 18px; } .sorting_asc_disabled { background: url('/images/sort_asc_disabled.png') no-repeat center right; } .sorting_desc_disabled { background: url('/images/sort_desc_disabled.png') no-repeat center right; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables display */ dt_table table.display { margin: 0 auto; width: 100%; clear: both; } dt_table table.display thead th { padding: 3px 18px 3px 10px; border-bottom: 1px solid black; font-weight: bold; cursor: pointer; * cursor: hand; } dt_table table.display tfoot th { padding: 3px 10px; border-top: 1px solid black; font-weight: bold; } dt_table table.display tr.heading2 td { border-bottom: 1px solid #aaa; } dt_table table.display td { padding: 3px 10px; } dt_table table.display td.center { text-align: center; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables sorting */ .sorting_asc { background: url('/images/sort_asc.png') no-repeat center right; } .sorting_desc { background: url('/images/sort_desc.png') no-repeat center right; } .sorting { background: url('/images/sort_both.png') no-repeat center right; } .sorting_asc_disabled { background: url('/images/sort_asc_disabled.png') no-repeat center right; } .sorting_desc_disabled { background: url('/images/sort_desc_disabled.png') no-repeat center right; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables row classes */ .dt_table tr.odd.gradeA { background-color: #ddffdd; font-size:10px; } .dt_table tr.even.gradeA { background-color: #eeffee; } dt_table dt_table table.display tr.odd.gradeA { background-color: #ddffdd; } dt_table dt_table table.display tr.even.gradeA { background-color: #eeffee; } dt_table dt_table table.display tr.odd.gradeC { background-color: #ddddff; } dt_table dt_table table.display tr.even.gradeC { background-color: #eeeeff; } dt_table dt_table table.display tr.odd.gradeX { background-color: #ffdddd; } dt_table table.display tr.even.gradeX { background-color: #ffeeee; } dt_table table.display tr.odd.gradeU { background-color: #ddd; } dt_table table.display tr.even.gradeU { background-color: #eee; } tr.odd { background-color: #E2E4FF; font-size:12px; } tr.even { background-color: white; font-size:12px; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Misc */ .top, .bottom { padding: 15px; background-color: #F5F5F5; border: 1px solid #CCCCCC; } .top .dataTables_info { float: none; } .clear { clear: both; } .dataTables_empty { text-align: center; } tfoot input { margin: 0.5em 0; width: 100%; color: #444; } tfoot input.search_init { color: #999; } td.group { background-color: #d1cfd0; border-bottom: 2px solid #A19B9E; border-top: 2px solid #A19B9E; } td.details { background-color: #d1cfd0; border: 2px solid #A19B9E; } .example_alt_pagination div.dataTables_info { width: 40%; } .paging_full_numbers { width: 400px; height: 22px; line-height: 22px; } .paging_full_numbers span.paginate_button, .paging_full_numbers span.paginate_active { border: 1px solid #aaa; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 2px 5px; margin: 0 3px; cursor: pointer; *cursor: hand; } .paging_full_numbers span.paginate_button { background-color: #ddd; } .paging_full_numbers span.paginate_button:hover { background-color: #ccc; } .paging_full_numbers span.paginate_active { background-color: #99B3FF; } dt_table table.display tr.even.row_selected td { background-color: #B0BED9; } dt_table table.display tr.odd.row_selected td { background-color: #9FAFD1; } /* * Sorting classes for columns */ /* For the standard odd/even */ tr.odd td.sorting_1 { background-color: #D3D6FF; } tr.odd td.sorting_2 { background-color: #DADCFF; } tr.odd td.sorting_3 { background-color: #E0E2FF; } tr.even td.sorting_1 { background-color: #EAEBFF; } tr.even td.sorting_2 { background-color: #F2F3FF; } tr.even td.sorting_3 { background-color: #F9F9FF; } /* For the Conditional-CSS grading rows */ /* Colour calculations (based off the main row colours) Level 1: dd > c4 ee > d5 Level 2: dd > d1 ee > e2 */ tr.odd.gradeA td.sorting_1 { background-color: #c4ffc4; } tr.odd.gradeA td.sorting_2 { background-color: #d1ffd1; } tr.odd.gradeA td.sorting_3 { background-color: #d1ffd1; } tr.even.gradeA td.sorting_1 { background-color: #d5ffd5; } tr.even.gradeA td.sorting_2 { background-color: #e2ffe2; } tr.even.gradeA td.sorting_3 { background-color: #e2ffe2; } tr.odd.gradeC td.sorting_1 { background-color: #c4c4ff; } tr.odd.gradeC td.sorting_2 { background-color: #d1d1ff; } tr.odd.gradeC td.sorting_3 { background-color: #d1d1ff; } tr.even.gradeC td.sorting_1 { background-color: #d5d5ff; } tr.even.gradeC td.sorting_2 { background-color: #e2e2ff; } tr.even.gradeC td.sorting_3 { background-color: #e2e2ff; } tr.odd.gradeX td.sorting_1 { background-color: #ffc4c4; } tr.odd.gradeX td.sorting_2 { background-color: #ffd1d1; } tr.odd.gradeX td.sorting_3 { background-color: #ffd1d1; } tr.even.gradeX td.sorting_1 { background-color: #ffd5d5; } tr.even.gradeX td.sorting_2 { background-color: #ffe2e2; } tr.even.gradeX td.sorting_3 { background-color: #ffe2e2; } tr.odd.gradeU td.sorting_1 { background-color: #c4c4c4; } tr.odd.gradeU td.sorting_2 { background-color: #d1d1d1; } tr.odd.gradeU td.sorting_3 { background-color: #d1d1d1; } tr.even.gradeU td.sorting_1 { background-color: #d5d5d5; } tr.even.gradeU td.sorting_2 { background-color: #e2e2e2; } tr.even.gradeU td.sorting_3 { background-color: #e2e2e2; } /* * Row highlighting example */ .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted { background-color: #ECFFB3; } .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted { background-color: #E6FF99; } /* * KeyTable */ table.KeyTable td { border: 3px solid transparent; } table.KeyTable td.focus { border: 3px solid #3366FF; } dt_table table.display tr.gradeA { background-color: #eeffee; } dt_table table.display tr.gradeC { background-color: #ddddff; } dt_table table.display tr.gradeX { background-color: #ffdddd; } dt_table table.display tr.gradeU { background-color: #ddd; } div.box { height: 100px; padding: 10px; overflow: auto; border: 1px solid #8080FF; background-color: #E5E5FF; }