/* reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/* fonts */
body{font:13px/1.231 "Helvetica Neue", "Helvetica",arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

.line{*zoom:1;}
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.sizeOf30{width:30%;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}

/* GENERAL */
.right{float:right;text-align:right;}
body,html{height:100%;background:#000;color:#fff;}
nav, section, header, article { display: block;}
a {color: #333; text-decoration: none;}
p a {text-decoration: underline;}
p a:hover {color:#cc0000;}
footer, nav, header, article, section { display: block;}


/* LOGO */
section.page a#logo {position:absolute;top:0;left:0;display:block;width:164px;height:149px;background:transparent url(/images/logo.png) 0 0 no-repeat;text-indent:-5000px;overflow:hidden;left:-19px;top:-100px;z-index:10;}

/* MAIN CONTENT AREA */
.page {width:944px;margin:0 auto;position:relative;color:#000;}
.content{background:url(/images/bg-gradient.png) repeat-y;padding:56px 56px 33px;}
.readable{padding:120px 120px 80px 120px;}
section.page hr {border:0; border-top: 1px solid #ccc; border-bottom: 1px solid #fff; margin: 25px 0;}
section.page .widecolumn { width: 583px;}
section.page .thincolumn { width: 207px;}
section.page .widecolumn .interior {padding-right:56px;border-right: 1px solid #ccc;}
section.page .thincolumn .interior {padding-left:33px; }

/* TYPE */
.content h1 {font-size:140%; font-weight: bold; text-transform:uppercase; margin-bottom: 20px;}
.content h2 {font-weight: bold; font-size: 110%;}
.content p {margin: 5px 0; color: #444444; line-height: 133%; font-size: 100%;}
.content a {color:#000;}
.content a:hover {color:#c00;}

/* FORM */
form .line { margin: 10px 0;}
form label, form input, form select {float: left;}
form input[type=text] { border: 1px solid #ccc; padding: 3px ;}
form input[type=password] { border: 1px solid #ccc; padding: 3px ;}
form input[type=checkbox] { margin-top: 3px;}
form label {font-weight: bold; width: 75px; display: block; float: left; padding: 3px 0 0; font-size: 92%;}
form .full label {width: 490px; margin-left:10px;}
form p.instructions { font-weight: bold; color: #333;}
form .formleft {width: 236px; margin-right: 50px;}
form .formright {width: 236px;}
form .radios .unit {margin-left:20px; margin-top:10px; font-size:92%;}
form .formleft .radios .unit {margin-left: 0; margin-right: 20px; margin-top: 2px;}
form input[type=radio] {margin-right:5px; margin-top:1px;}
form .extra {margin-top: 25px;}
form input.confirm {color: #999;}
form input.pconfirm {color: #999;}
form .login {display: block;width:55px;height:22px;background:transparent url(/images/login.png) 0 0 no-repeat; border:0;line-height:0;float:right;text-indent:-5000px;overflow:hidden;cursor:pointer;}
form .signup {display: block;width:55px;height:22px;background:transparent url(/images/signup.png) 0 0 no-repeat; border:0;line-height:0;float:right;text-indent:-5000px;overflow:hidden;cursor:pointer;}
form .submit {display: block;width:55px;height:22px;background:transparent url(/images/submit.png) 0 0 no-repeat; border:0;line-height:0;float:right;text-indent:-5000px;overflow:hidden;cursor:pointer;}
/*
form input[type=submit] {display: block;width:55px;height:22px;background:transparent url(/images/signup.png) 0 0 no-repeat; border:0;line-height:0;float:right;text-indent:-5000px;overflow:hidden;cursor:pointer;}

form input[type=submit].login :hover { background-position: 0 -23px;}
*/
form input[type=submit]:hover { background-position: 0 -23px;}
form textarea {resize: vertical;}

/* CONTACT FORM */
form.mainForm {}
form.mainForm label {width: 100px;}
form.mainForm input[type=text] { width: 250px;}
textarea.formfield-message {width: 420px; height: 150px; border: 1px solid #ccc;}

form.mainForm .elect-container{width:150px;}
form.mainForm .elect-element{background:url(../images/electbg-wide.png) 0 0 no-repeat;}
form.mainForm .elect-value{background-position:95% 60%;width:inherit;height:12px;display:block;}
form.mainForm  input.focused,textarea.focused{border-color:#000;}
form.mainForm .elect-element span{padding-left:7px; display: block; width: 100px; overflow: hidden;}
form.mainForm .elect-options{max-height: 200px; overflow-y: scroll; width: 150px;}
form.mainForm .elect-options li {width:120px; font-size: 9px; height: auto; background: #eee;}
form.mainForm .elect-options li.first{border-top:none;}
form.mainForm .elect-options li.hover{background:#ddd;}
form.mainForm .elect-options li.selected{font-weight:bold;color:#000;}
span.required {color: #c00;}


/* SUBNAV */
nav.subnav { font-weight: bold; font-size: 110%; }
nav.subnav ul li {margin-bottom: 7px;}
nav.subnav ul li a {text-decoration: none; color: #000;}
nav.subnav ul li a:hover {color:#666;}
nav.subnav ul li.selected a { color: #cc0000; }

/* HEADER & NAV */
header {height:138px; border-top: 1px solid #333; margin-top: 60px;}
header nav.page {width:1080px;}
header nav ul li {float:left;display:block;margin-right:20px; height: 29px;}
header nav ul li.our-story {margin-right: 0;}
header nav ul li a {display: block; background: url(/images/nav2.png) 0 0 no-repeat;  height: 29px; text-indent: -5000px; overflow: hidden; margin-top:3px;}
header nav ul li:hover,header nav ul li.selected {}
header nav ul li:hover a, header nav ul li.selected a {border-top: 3px solid #333; margin-top:0;}

/* NAV WITH COUPONS AND PROMOTIONS
li.shampoos-and-conditioners a {width:177px;}
li.styling a {width:48px; background-position: -197px 0;}
li.conditioning-treatments a {width:170px; background-position: -267px;}
li.coupons-and-promotions a {width:158px; background-position:-458px 0;}
li.everyday-qanda a {width: 100px; background-position: -638px 0;}
li.where-to-buy a {width:96px; background-position:-760px 0;}
li.our-story a {width: 68px; background-position: -875px 0;} 
*/

li.shampoos-and-conditioners a {width:188px;}
li.perfect-hold-styling a {width:182px;background: url(/images/nav2-perfect-styling.png) 0 0 no-repeat;background-position: -4px 0;}
li.styling a {width:120px;background: url(/images/nav2-classic-hairspray.png) 0 0 no-repeat;}
li.conditioning-treatments a {width:179px; background-position:-338px 0px;}
li.everyday-qanda a {width:106px; background-position:-568px 0;}
li.where-to-buy a {width:101px; background-position:-723px 0;}
li.our-story a {width: 70px; background-position: -872px 0;}

#search form { position: absolute; right: 0; top: -61px; width: 155px;}
#search form input[type=text] { background: #000; color: #666; border: 1px solid #444; height: 11px; border-right: 0; font-size: 11px;}
#search form input[type=submit] { background: transparent url(/images/search.png) 0 0 no-repeat; height: 19px; width: 18px;}
#search form input[type=submit]:hover { background-position: 0 -20px;} 

/*FIXED NAV*/
#fixednav {position:fixed; bottom: 0; border-bottom: 2px solid #444; width:100%; z-index: 20;}
#fixednav nav {}
#fixednav nav ul {z-index:20; display: block; position:absolute;bottom:-2px;}
#fixednav nav ul li {float:left; display: block; padding: 5px 5px 5px 8px; background: #444;}
#fixednav nav ul li a {color: #888; font-weight: bold; font-size: 80%; padding-right: 15px;text-decoration:none; background: url(/images/fixednavarrow.png) 100% 0px no-repeat;}
#fixednav nav ul li a:hover {color: #fff; background-image: url(/images/fixednavarrowwhite.png);}

#dock { position: absolute; bottom: -24px; background: url(/images/transparentwhite.png) repeat; z-index: 15; width: 738px; display: none; padding-bottom: 30px; }
#dock .close-dock { background: #ccc; color: #333; font-weight: bold; padding: 3px 7px; cursor: pointer; font-size: 10px; }
#dock .close-dock:hover {background: #c00; color: #fff;}
#dock h4 { font-weight: bold; font-size: 14px; margin-bottom: 5px; margin-top: 10px; }
#dock ul { font-size: 11px; margin-bottom: 20px; display: block;}
#dock ul li {display: block; margin-top: 8px;}
#dock .unit .pad { padding: 0 10px;}
/*#dock .size2of5 .pad {padding-left: 0;}*/
/* FOOTER */
footer {border-top: 1px solid #333; height: 160px; font-size: 86%;padding-top:10px;}
footer section p {color:#666666; font-size:90%;}
footer nav ul li {float: right; margin-left:10px;}
footer nav ul li a { color: #666666; font-weight: bold; text-decoration: none;}
footer nav ul li a:hover { color: #999;}

/* ELECT */

.elect-container {display:block;width:80px; float:left;cursor:pointer;-webkit-border-radius:3px;-moz-border-radius:3px; zoom:1; z-index:1;}
.elect-container .elect-element {padding:6px 0 5px;background:#fff;color:#4d4d4d;font-size:11px;line-height:11px;outline:none;display:block;background:url(../images/electbg.png) 0 0 no-repeat;}
.elect-container.short .elect-element {background-image: url(../images/electbg.png);}
.elect-element.focused {border-color:#000;}
.elect-element.focused, .elect-element.focused * {z-index: 40; zoom:1;}
.elect-value {background-position:95% 60%;width:inherit;height:12px;display:block;}
 input.focused,textarea.focused{border-color:#000;}
.elect-element span {padding-left:7px;}
.elect-options {display:block;padding:0px;margin:0px;background:#fff;border:1px #d7d7d7 solid;background:url(../images/electbg.jpg); }
.elect-options li{display:block;color:#4d4d4d;font-size:11px;padding:5px 7px 5px 7px;width:63px;line-height:11px;height:10px;border-bottom:1px #ccc solid; }
.elect-options li.first{border-top:none;}
.elect-options li.hover{background:#ddd;}
.elect-options li.selected{font-weight:bold;color:#000;}

.elect-container.state {width:150px;}
.elect-container.state .elect-element{background:url(../images/electbg-wide.png) 0 0 no-repeat;}
.elect-container.state .elect-value{background-position:95% 60%;width:inherit;height:12px;display:block;}
.elect-container.state  input.focused,textarea.focused{border-color:#000;}
.elect-container.state .elect-element span{padding-left:7px; display: block; width: 100px; overflow: hidden;}
.elect-container.state .elect-options{max-height: 200px; overflow-y: scroll; width: 150px;}
.elect-container.state .elect-options li {width:120px; font-size: 9px; height: auto; background: #eee;}
.elect-container.state .elect-options li.first{border-top:none;}
.elect-container.state .elect-options li.hover{background:#ddd;}
.elect-container.state .elect-options li.selected{font-weight:bold;color:#000;}

.elect-container.country {width:150px;}
.elect-container .elect-element{background:url(../images/electbg-wide.png) 0 0 no-repeat;}
.elect-container .elect-value{background-position:95% 60%;width:inherit;height:12px;display:block;}
.elect-container  input.focused,textarea.focused{border-color:#000;}
.elect-container .elect-element span{padding-left:7px; display: block; width: 100px; overflow: hidden;}
.elect-container .elect-options{max-height: 200px; overflow-y: scroll; width: 150px;}
.elect-container .elect-options li {width:120px; font-size: 9px; height: auto; background: #eee;}
.elect-container .elect-options li.first{border-top:none;}
.elect-container .elect-options li.hover{background:#ddd;}
.elect-container .elect-options li.selected{font-weight:bold;color:#000;}



/* LANDING PAGE */
#home {background: url(/images/repeating_background.png) repeat; height:100%; width:100%; min-width: 1050px;}
#landing {background: url(/images/cropped_girl.png) 0 20px no-repeat; width: 100%; height:100%; position: relative; z-index:10;}
#strip {position:absolute; height:52px; top:345px; width: 100%; background: #808891;z-index:1; }
#landing #logo {position:absolute;top:295px;left:555px;display:block;width:164px;height:149px;background:transparent url(/images/logo.png) 0 0 no-repeat;text-indent:-5000px;overflow:hidden;z-index:100; }
#landing #countries {position:relative; top: 345px; left: 702px; width: 339px; height: 52px; background:#959ca6; }
#countries .country a {position:absolute; z-index:5; background: url(/images/country-bg.png) 0 -25px no-repeat; height: 20px; width: 111px; overflow:hidden; }
#countries .country.wide {background: url(/images/country-bg-wide.png) 0 -25px no-repeat;}
#countries .country:hover a{background-position: 0 0;}
#countries .country a {color: white; font-weight: bold; text-decoration: none; font-size: 88%; padding: 6px 0 0 5px; display:block; }
#countries #one a{ top: 0px; left: 0px;}
#countries #two a{ top: 0px; left: 113px;}
#countries #three a{ top:0px; left: 226px;}
#countries #four a{ top: 27px; left: 0px;}
#countries #five a{ top: 27px; left: 113px;}
#countries #six a{ top: 27px; left: 226px;}

/* WHERE TO BUY */
#where-to-buy {position:absolute; left: 550px; top: 160px; width: 300px; color:white;}
#where-to-buy h2 {letter-spacing:1px;font-size:200%; margin-bottom:10px;}
#where-to-buy p {font-size:120%; line-height:160%;}

/* OUR STORY */
#our-story {position:absolute; left:60px;top:60px; width:520px; color:#333; }
#our-story h2 {font-size:120%; font-weight: bold;}
#our-story p {margin-top:10px;line-height:130%;}

/* PRODUCTS PAGE */
.category {margin-bottom:20px; }
.category h2 {color:#666; font-size: 18px; margin-bottom: 20px; font-weight: bold; padding-top: 20px;}
.big {height:380px; margin-bottom:2px; background: #222; position: relative;}
.bank { height: 135px; overflow:hidden; width: 941px; position: relative;}
.bank .belt { width: 10000px; overflow: hidden; height: 135px; position: absolute; top: 0; left: 0;}
.bank .prev, .bank .next { display: block; width: 33px; height: 34px; text-indent: -5000px; overflow:hidden; position: absolute; bottom: 0; z-index: 10; background: transparent url(/images/products/prev-next.png) 0 0 no-repeat; cursor: pointer;}
.bank .prev {left: 0; }
.bank .next {right:0; background-position: -34px 0;}
.bank .beltunit {width:187px; height:135px; margin-right:2px; margin-left:0;float:left; position:relative;cursor:pointer;}
.bank .beltunit.selected img {filter:alpha(opacity=75);-ms-filter: 'Alpha(Opacity=75)';opacity: 0.75;-moz-opacity: 0.75;filter: alpha(opacity=75);-khtml-opacity: 0.75 ; }
.bank .beltunit img {}
.bank .beltunit a {position:absolute; top:0; left:0; display:block; color:white; background: url(/images/transparentblack.png) repeat; padding: 3px 7px; font-weight: bold; font-size: 11px;}

/****** OVERRIDE THE IMG SIZE FOR NEW GROUP ******/
.bank .beltunit.aerosol-hairspray {width:234px; height:135px; margin-right:2px; margin-left:0;float:left; position:relative;cursor:pointer;}
.bank .beltunit.styling-mousse {width:234px; height:135px; margin-right:2px; margin-left:0;float:left; position:relative;cursor:pointer;}
.bank .beltunit.styling-gel {width:234px; height:135px; margin-right:2px; margin-left:0;float:left; position:relative;cursor:pointer;}
.bank .beltunit.non-aerosol-hairspray {width:234px; height:135px; margin-right:2px; margin-left:0;float:left; position:relative;cursor:pointer;}
/****** END OVERRIDE THE IMG SIZE FOR NEW GROUP ******/

.bank img:last-child {margin-right:0;}
hr {border:0; border-top: 2px solid #222; margin: 20px 0 0;}
a.to-top {color:black; font-size: 10px; font-weight: bold; line-height: 20px; margin-top: 20px; display: block;}
a.to-top span {display: inline-block; height: 15px; width: 15px; text-indent: -5000px; overflow:hidden; background: transparent url(/images/uarr.png) 0 0 no-repeat;}
a.to-top:hover {color:#ccc;}
a.to-top:hover span {background-position: 0 -19px; text-indent: -500px; overflow: hidden; color: black;}
.hidden-content {display: none !important;}

#product { position: relative; top: 0; height: 380px; color: #000;}
#product img { position: absolute; top: 0; left: 0; z-index: 5;}
#product h2 {font-size: 24px; text-transform: uppercase; line-height: 24px; margin: 0 0 10px 0; font-weight: normal; color: #000; padding: 0; }
#product p { font-size: 14px; line-height: 20px; margin-bottom: 20px; color: #333;}
#product h4 {text-transform: uppercase; font-size: 10px; color: #666; font-weight: bold; margin-bottom: 3px;}
#product ul {text-transform: uppercase; font-size: 10px; }
#product ul li, #product ul li a {color: #666; margin-bottom: 3px;}
#product ul li a { background: transparent url(/images/rarr.png) 100% 4px no-repeat; padding-right: 10px;}
#product .text a:hover {color:#c00; background-image: url(/images/redrarr.png);}

#product .text {display: none;}
#product .half-align {position: absolute; left: 475px; z-index: 10; vertical-align: center; width: 350px;}
#product .pad-30 {padding-left: 30px;}

/* HOME */

#grid {width:943px;height:362px;}
#grid .gridunit {position:absolute; width: 133px; height: 89px; background: transparent; z-index: 2; overflow:hidden; cursor: pointer;}
#grid .gridunit .img {left: 133px; position:absolute; width:133px; height:89px; background: transparent url(/images/grid/grid.png) no-repeat; overflow:hidden;}
#grid .gridunit p.about {position:absolute; top:0; left:0; display:block; opacity:0;color:white; background: transparent url(/images/grid/grid-text-bg.png) 0 0 no-repeat; padding: 3px 7px; font-weight: bold; font-size: 11px; z-index: 3;}
#grid .gridunit .overlay {display: none !important;}
#grid .overlay {display: block; position:absolute; z-index:4; overflow:hidden; width: 270px; height: 182px;}
#grid .overlay .close {display: block; position: absolute; top: 0; right: 2px; z-index: 5; background: #ccc; color: #333; font-weight: bold; padding: 3px 7px; cursor: pointer; font-size: 10px;}
#grid .overlay .close:hover {background: #c00; color: #fff;}
#grid .col-1 {left:0px;}
#grid .col-2 {left:135px;}
#grid .col-3 {left:270px;}
#grid .col-4 {left:405px;}
#grid .col-5 {left:540px;}
#grid .col-6 {left:675px;}
#grid .col-7 {left:810px;}
#grid .row-1 {top:0px;}
#grid .row-2 {top:91px;}
#grid .row-3 {top:182px;}
#grid .row-4 {top:273px;}
#grid .wide-1 {width:135px !important;}
#grid .wide-2 {width:270px !important;}
#grid .wide-3 {width:405px !important;}
#grid .wide-4 {width:540px !important;}
#grid .wide-5 {width:675px !important;}
#grid .tall-1 {height:91px !important;}
#grid .tall-2 {height:182px !important;}
#grid .tall-3 {height:273px !important;}
#grid .tall-4 {height:364px !important;}
#grid .gridunit.row-1.col-1 p.about {top:14px;}
#grid #shadow-overlay { display: block; width: 100%; height: 100%; background: url(/images/transparentblack.png) repeat; position: absolute; top: 0; left: 0; z-index: 3; cursor: pointer;}

/* grids */
@media screen and (max-width: 319px) {.unit{float: none !important; width: auto !important;}}
.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x";}