/*
Override CSS to give smaller menus.
*/

/* hide background line in #nav but not in the brands box */
#nav .box-content 				{background-image: none;}
#nav .nav-brands .box-content   {background: url('img/chrome-nav-hover-inner-borders.gif') repeat-y 0 0;}
#nav .box-left                  {display:none;}
#nav .nav-brands .box-left      {display: inline;}
#nav .box-right                 {float:left;}
#nav .nav-brands .box-right     {float:right;}


/* tweak some positioning in the hover states */
.nav .overlay-box, .sub-nav .overlay-box    {position:absolute; top:-999em; left:-999em; z-index:22; zoom:1; width:468px;}
.nav .overlay-whats-new    {position:absolute; z-index:22; zoom:1; width:468px !important;}
.nav-brands:hover .overlay-box              {left:2px;top:34px;width:975px;}
.nav-brands:hover .overlay-box .box-right   {float: right;}
.nav-whats-new:hover .overlay-box           {left:2px;top:34px;width:468px!important;}
.nav-makeup:hover .overlay-box              {left:2px;top:34px;}
.nav-skin-care:hover .overlay-box           {left:2px;top:34px;}
.nav-hair-care:hover .overlay-box           {left:2px;top:34px;}
.nav-bath-body:hover .overlay-box           {left:2px;top:34px;}
.nav-beauty-to-go:hover .overlay-box		{/*width:258px;*/}