
/*  =========================================================== 
    General text-color: #acacac;
    Link hover (blue): #005e7d;
    =========================================================== */



/* =========================================================== Global Styles */

* { 
  margin: 0;
  padding: 0;
}

img { border: none; }

body { 
  background: #fff;
  font: 62.5%/1.7 Arial, Helvetica, Verdana, sans-serif; 
  color: #acacac;
}

input {
  font-family: Arial, sans-serif;
}

ul { list-style: none; }
th { text-align: left; }

label { 
display: block; 
padding-bottom: 1px;
}

table, label { 
color: #005e7d; 
text-transform: uppercase; 
}

.clear {
clear: both;
height: 0;
line-height: 0;
overflow: hidden;
}

/* =========================================================== Basic Typography */

a { 
  text-decoration: none; 
  color: #acacac;
}

a:hover { color: #005e7d; }

h2, h3, th  { 
font-size: 1.0em; 
font-weight: bold;
text-transform: uppercase;
color: #005e7d;
}

p {
  font-size: 1.0em;
  color: #acacac;
  line-height: 1.38em;
  margin-bottom: 1em;
}

.error {
  color: #af0000;
}
#keyIngredients p  {
  margin-bottom: 1.2em;
}

#portfolio p, #contact p  {
  margin-top: 1em;
}

#content, #portfolio, .ml-content, .m-content { font-size: 1.1em;}
#content h2 { margin-top: 19px; }

.upcase {
  text-transform: uppercase;
}

/* =========================================================== Basic Page Layout */

#pageContainer {
  width: 784px;
  margin-left: 96px;
  padding-bottom: 40px;
}

#main-area {
  float: left;
  width: 884px;
}

#header { 
  height: 101px;
  margin-top: 46px;
}

#header img { 
  float: left; 
  margin-top: -6px;
}

#content {
  width: 680px;
  float: left;
}

/* #contens without menu */
#portfolio, #pressClips , #contact, .ml-content {
  float: left;
  width: 600px;
  margin-left: 196px;
  padding-bottom: 30px;
}

/* #contens with menu */
.m-content {
  float: left;
  margin-left: 10px;
}

.without-navigation {
  margin-left: 196px;
}

#logo { 
  float: left; 
  margin-top: -6px;
}

#navigation { 
  width: 588px; 
  float: right; 
  position: relative;
  height: 40px;
}

input { 
  width: 188px;
  padding: 1px 3px 1px 3px;
  background: #fff;
  border: 1px solid #005e7d;
  color: #464646;
}


input.submit {
  font-size: 1.1em;
  text-align: left;
  padding: 0;
  margin: 0 0 0 -3px;
  border: 0px solid #acacac;
}

select { 
  width: 196px;
  padding: 1px;
  background: #fff;
  color: #464646;
  border: 1px solid #005e7d;
  font-size: 11px;
}


/* =========================================================== Global Navigation */

#navigation ul.top-level { 
  position: absolute;
  width: 680px;
  text-transform: uppercase; 
}

#navigation ul li { 
line-height: 1.2em;
float: left; 
margin-right: 19px; 
}

#navigation a {
  font-size: 1.6em;
  outline: none;
}

#navigation a span { 
background: url(../images/bullet.gif) center left no-repeat;
padding-left: 8px;
}

#navigation a.selected span { background: url(../images/bullet-selected.gif) center left no-repeat; }
#navigation a:hover span { background: url(../images/bullet-selected.gif) center left no-repeat; }
#navigation li.selected span { background: url(../images/bullet-selected.gif) center left no-repeat; }
#navigation #totalQuantityEmpty { background: none!important; }

#navigation li.selected a, #navigation a:hover, #navigation a:active  { color: #005e7d; }
#navigation ul ul a { color: #acacac!important;}
#navigation ul ul li.selected a, #navigation ul ul a:hover, #navigation ul ul a:active  { color: #005e7d!important; }
#navigation ul ul a.selected , #navigation ul ul a:hover, #navigation ul ul a:active  { color: #005e7d!important; }
/* Level two */

#navigation ul ul { 
  position: absolute;
  bottom: -2.4em;
  left: 0;
}

#navigation ul ul li { margin-right: 14px; }
#navigation ul ul a { font-size: 11px; }

#navigation #currencies.no-items {
  left: 43.4em!important;
}

#navigation #currencies.one-item {
  left: 49.9em!important;
}

#navigation #currencies.many-items {
  left: 50.9em!important;
}

#navigation #currencies.more-then-ten {
  left: 51.7em!important;
}

#navigation #currencies a.selected {
  color: #005e7d;
}
/* =========================================================== Local Navigation */

#local-navigation {
  line-height: 1.3em;
  text-transform: uppercase;
  color: #acacac;
  font-weight: bold;
  font-size: 1.1em;
  width: 186px;
  float: left;
}

#local-navigation li { padding-bottom: 4px; }
#local-navigation a.selected, #local-navigation li.selected a { color: #005e7d; }
#local-navigation .new-group { margin-top: 9px; }

/* =========================================================== Product Listing Page */


.buy .moreInfo {
  float: right;
}
.buy .productCount, .buy .productPrice {
  color: #005e7d;
}
.buy input {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  border: 0;
  float: left;
  clear: none;
  padding: 1px 0 0 0;
  margin: 0;
  cursor: pointer;
}

input.add {
  padding: 1px 0 0 0;
  margin: 0 0 0 -3px;
  width: 14em;
}

input.remove {
  width: 12px;
}

#product-list li { 
  clear: both; 
  padding-bottom: 10px;
}

#product-list .productDetails {
  margin-top: -1em;
}

#product-list.thin .image { 
  padding: 0 42px 70px 0;
  float: left;
  width: 90px;
}

#product-list.wide .image { 
  padding: 0 50px 70px 0;
  float: left;
  width: 197px;
}

#product-list.thin .info {
  float: left;
  width: 372px;
  margin-bottom: 68px;
}

#product-list.wide .info {
  float: left;
  width: 340px;
  margin-bottom: 68px;
}

#product-list li h2 {
  line-height: 1.7em;
  margin: -2px 0 3px 0;
}

 #product-list li h3 {
  line-height: 1.7em;
  margin: 14px 0 3px 0;
}

#product-list .buy { 
  font-weight: bold;
  text-transform: uppercase;
  color: #acacac;
  margin: 6px 0 -4px 0;
}

#product-list .add_to_cart, #product-list .remove_from_cart {
  font-size: 1.4em;
  font-weight: normal;
  line-height: 1em;
}

#product-list a.add_to_cart {
  top: 0.0667em;
  position: relative;
}

/* =========================================================== Know-How  - Looks*/
#looks {
  width: 700px;
}

#looks h2 {
  margin-bottom: 1em;
}

#looks #info {
  width: 500px;
  color: #005e7d;
}

#looks #index  {
  margin-top: 2.5em;
}

#looks #index li  {
  margin: 0 1em 2em 0;
  float: left;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

#looks #index img {
  border: 1px solid #fff;
}

#looks #index li:hover img {
  border: 1px solid #005e7d;
}

#looks #index li:hover a {
  color: #005e7d;
}

#look-products {
  margin: 30px 0 0 195px;
  padding-bottom: 80px;
  font-size: 0.9em!important;
  font-weight: bold;
  clear: both;
  float: left;
  position: relative;
}

#look-products li  {
  margin-right: 3em;
  text-align: center;
  float: left;
  position: relative;
}

#look-products li.last {
  margin-right: 0;
}

#look-products li img {
  margin-bottom: 1em;
}

#look-products li:hover a {
  color: #005e7d;
}

#look-products #buy-the-look {
  position: absolute;
  text-transform: uppercase;
  font-size: 1.222em;
  right: 0;
  top: 246px;
  width: 400px;
  text-align: right;
}


#productsInLooks {
  width: 220px;
  height: 323px;
  margin-top: -3px;
  position: relative;
  float: left;
  font-weight: bold;
}

#productsInLooks div {
  position: absolute;
  bottom: 0;
}

#productsInLooks li:hover a {
  color: #005e7d;
}

#lookImage {
  height: 323px;
  width: 294px;
  margin-left: 80px;
  position: relative;
  float: left;
  text-transform: uppercase;
  font-weight: bold;
}

#lookImage #equals {
  position: absolute;
  top: 148.5px; 
  margin-left: -73px;
}

#lookMovie {
  margin-top: 75px;
  float: left;
  clear: both;
  text-transform: uppercase;
  font-weight: bold;
}

#viewLookMovie {
  float: left;
}

/* =========================================================== Know-How - Combinations */

#combinations {
  margin-left: 0;
}

#combinations-index #combinations {
  width: 770px;
}

#combinations h2 {
  margin-bottom: 1em;
}

#combinations #info {
  width: 500px;
  color: #005e7d;
}

#combinations #index  {
  margin-top: 2.5em;
}

#combinations #index li  {
  margin: 0 1em 2em 0;
  float: left;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

#combinations #index img {
  border: 1px solid #fff;
}

#combinations #index li:hover img {
  border: 1px solid #005e7d;
}
#combinations #index li:hover a, #combinations #products li:hover a {
  color: #005e7d;
}

#combinations #image {
  float: left;
}

#combinations #image #equals {
  margin: 0 20px 79px 20px;
}

#combinations #products {
  margin-top: 132px;
  font-size: 0.818em!important;
  font-weight: bold;
  float: left;
  position: relative;
}

#combinations #products li  {
  margin-right: 3em;
  text-align: center;
  float: left;
}

#combinations #products li.last {
  margin-right: 0;
}

#combinations #products li img {
  margin-bottom: 1em;
}

#combinations #products #buy-the-combination {
  position: absolute;
  text-transform: uppercase;
  font-size: 1.222em;
  right: 0;
  top: 246px;
  width: 400px;
  text-align: right;
}

#combinations #combination-list {
  width: 250px;
  float: left;
  margin-top: 25px;
  clear: both;
  text-transform: uppercase;
  font-weight: bold;
}

#combinations #combination-list li.selected a {
  color: #005e7d;
}


/* =========================================================== Know-How - FAQ */
#faq {
  width: 600px;
}

#faq p {
  width: 390px;
}
#faq a {
  outline: none;
}

.faq-selected a, .faq-selected p {
  color: #005e7d!important;
}

#faq a {
  font-weight: bold;
}

.faq-unselected a, .faq-unselected p, .faq-unselected-link {
  color: #acacac!important;
}

.faq-unselected a:hover {
  color: #005e7d!important;
}

.faq-unselected p {
  display: none;
}

.faq-grey, .faq-grey a {
  color: #acacac!important;
}

/* =========================================================== About  */
#portfolio {
  width: 710px;
  float: left;
  margin-left: 196px;
  padding-bottom: 30px;
}

#portfolio #text {
  width: 370px;
  float: left;
}

#portfolio p {
  color: #005e7d; 
}

#portfolio #image {
  margin: 1.4em 0 0 45px;
  float: left;
}


/* =========================================================== Press */

#pressClips h2 {
  margin-bottom: 1em;
}

#pressClips #p1, #pressClips #p2 {
  float: left;
}

#pressClips #p2 {
  margin-left: 100px;
}


#pressClip {
  position: relative;
  width: 710px;
  margin-left: 147px;
}

#showPressClipPrev, #showPressClipNext {
  text-transform: uppercase;
  font-weight: bold;
  padding-top: 5.363em;
  float: left;
}

#showPressClipNext {
  margin-left: 20px;
}

#showPressClipNext img, #showPressClipPrev img {
  padding: 10px;
}

#showPressClipPrev {
  margin-right: 20px;
  width: 25px;
}

#showPressClip {
  float: left;
}

#showPressClip h2 {
  margin-bottom: 1em;
}

#showPressClip img {
  border: 1px solid #f0f0f0
}

/* =========================================================== Awards  */

#awards {
  width: 500px;
  color: #005e7d;
}

#awards h2 {
  margin-bottom: 1.4em; 
}

#awards ul li {
  float: left;
  height: 180px;
  width: 200px;
}

#awards ul li.p1 {
  margin-right: 50px;
}

#awards p {
  margin-top: 1em;
  color: #005e7d; 
  line-height: 1.7em;

}
/* =========================================================== Blog Page */

#happenings {
  line-height: 1.272em;
}

#happenings .blog-post {
  width: 688px;
  margin: 1px 0 40px 0;
  padding-bottom: 33px;
  float: left;
  clear: both;
  border-bottom: 2px solid;
}

.image-gallery { 
  margin: 3px 0 8px 0; 
  position: relative;
}

#no-thumbnails {
  float: left;
  width: 700px;
}

#no-thumbnails img {
  margin-right: 5px;
}
.blog-image { 
  width: 483px;  
  height: 368px;
}

.image-navigation { 
width: 196px;  
overflow: hidden;
position: absolute;
top:0;
left: 490px;
}

.image-navigation li { 
width: 91px;
height: 68px;
text-align: center;
background: #e1e1e1;
margin: 0 7px 7px 0;
float: left;
overflow: hidden;
position: relative;
}

.image-navigation a span {
  display: block;
  width: 91px;
  height: 68px; 
  position: absolute;
  left: 0;
  top: -200px;
  background: black;
  opacity: 0;
}

.image-navigation a:hover span, .image-navigation a.selected span {
background: black;
cursor: pointer;
top: 0px;
opacity: 0.4;
}

.post { 
  width: 581px;
  padding: 0px 0 33px 0; 
  margin-top: 0;
  color: #656565;
  float: left;
}

.post h2 {
  line-height: 1em;
  margin-bottom: 0.4em;
  clear: both;
}

.post h2, .post h3, .post p, .post h2 a { color: #656565; }
.post p { margin: 5px 0 15px 0; }
.post a:hover { color: #005e7d;}

.post-info-text {
  float: right;
  width: 190px;
  margin-top: -2px;
}

.post-info-text h2 {
  margin: 0.181em 0 0.454em 0;
}

.post-info-text dl { 
  margin-bottom: 1.09em;
}

.post-info-text dt {
  float: left; 
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 3px;
}

.post-content {
  float: left;
  width: 365px;
}

.post-divider {
  clear: both;
  position: relative;
  height: 1px;
  padding-top: 14px;
  margin-bottom: -5px;
}

.post-divider div {
position: absolute;
bottom: 0;
left: 0;
height: 1px;
overflow: hidden;
width: 680px;
background: #656565;
}


/* =========================================================== Contact  */

#contact {
  width: 684px;
}

#contact, #contact p {
  color: #005e7d; 
}

#contactLeft {
  float: left;
}

#contactLeft .first {
  margin-top: 0;
}

#contactPressLogin {
  float: left;
  margin-left: 175px;
}

#contactPressLogin label {
  float: left;
  clear: both;
  margin-top: 5px;
}

#contactPressLogin input {
  clear: both;
  float: left;
  margin-top: 5px;
}

#contactPressLogin .submit {
  text-transform: uppercase;
  color: #acacac;
  font-size: 1em;
  font-weight: bold;
  margin-top: 15px;
}

#contactPressLogin .submit:hover {
  color: #005e7d;
  cursor: pointer;
}

/* =========================================================== Press room  */
#pressRoomContainer p {
  color: #005e7d;
}

#pressRoom, #pressKit {
  width: 230px;
  float: left;
}

#pressKit {
  margin-left: 70px;
}

#pressKit #downloads  {
  text-transform: uppercase;
}

#pressRoomContainer #products {
  width: 650px;
  float: left;
  clear: both;
}

#pressRoomContainer #products li {
  float: left;
  width: 105px;
  height: 226px;
  margin: 0 45px 10px 0;
}

#pressRoomContainer #products li.last {
  float: left;
  margin-right: 0;
}

#pressRoomContainer #products .productImage {
  height: 150px;
  margin-bottom: 5px;
  position: relative;
}

#pressRoomContainer #products .productImage img {
  position: absolute;
  bottom: 0;
}

#pressRoomContainer #products a {
  text-transform: uppercase;
  color: #005e7d;
}

/* =========================================================== Store  */

#order-info {
    color: #464646!important;
}

#order-info th { padding-bottom: 2px; }

/* #order-info .total { background: url(../img/border-total.gif) top left no-repeat; } */

#order-info .grand-total { padding-top: 17px; font-weight: bold; }

#order-info .total-cost td { padding-top: 17px; }

#order-info h2 {
  margin-bottom: 40px;
}

#order-info td { 
  line-height: 14px; 
  padding-top: 2px;
}

#order-info span, #order-info #shipping {
  text-transform: uppercase;
  color:  #005e7d;
}

#order-info .product { 
  width: 186px; 
  padding-right: 10px; 
}

#order-info .price, #order-info .quantity { 
  width: 85px; 
  padding-right: 10px; 
}

#order-info .itemQuantity {
  width: 3.4em;
  float: left;
}

#order-info .addOrRemove {
  font-size: 1.5em;
  position: relative;
}

#order-info .removeFromCart {
  position: absolute;
  top: 0em;
}

#order-info .currencyChange, #order-info .currencyChangeSelected {
  border: 0;
  padding: 0;
  margin: 0 0 0 -0.3em;
  clear: none;
  width: 2.4em;
  font-size: 1em;
  font-weight: bold;
  color: #acacac;
  cursor: pointer;
}

#order-info .currencyChangeSelected, #order-info .currencyChange:hover, #order-info input.order:hover {
  color: #005e7d;
}

#order-info input.emptyCart, #order-info input.order, .order {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  border: 0;
  float: left;
  clear: none;
  padding: 1px 0 0 0;
  margin: 0 0 0 -2px;
  cursor: pointer;
  width: 7.2em;
  color: #acacac;
}

#order-info #shipToCheckbox {
  width: 13px;
  border: 0;
}

#order-info input.order {
  width: 10.2em;
  float: right;
}

#orderDetailsContainer {
  width: 550px;
  margin-top: 20px;
  float: left;
}

.orderDetails {
  float: left;
  width: 220px;
  margin-right: 75px;
}

.orderDetails h2, .orderShipToDetails h2 {
  margin: 0!important;
}

.orderShipToDetails {
  float: left;
  width: 220px;
}

#orderContinue {
  width: 502px;
  clear: both;
  float: left;
  margin-top: 23px;
  padding: 0;
  height: 20px;
}

#orderContinue #order-progress {
  width: 502px;
  clear: both;
  float: left;
  text-align: right;
  text-transform: uppercase;
  display: none;
}

#orderContinue #order-progress img {
  margin: 0 3px -3px 0;
}

#orderCreditCartSelection {
  float: left;
  clear: both;
}

#orderErrorMessages, #paymentErrorMessages {
  margin: 20px 0 20px 0;
  clear: both;
}

#paymentErrorMessages {
  padding-top: 20px;
}
#orderErrorMessages h2, #paymentErrorMessages h2 {
  color: #fa8085;
}

#orderErrorMessages p, #paymentErrorMessages p {
  color: #005e7d;
}

#orderErrorMessages #errorExplanation {
  color: #fa8085;
}

.fieldWithErrors input, .fieldWithErrors select {
  border: 1px solid #fa8085;
  background: #fa8085;
}

#order_different_billing_address {
  margin-top: 10px;
  width: 12px;
}

#orderCreditCard {
  width: 650px;
  margin-top: 20px;
  clear: both;
  float: left;
  position: relative;
}

#orderCreditCard #payex {
  float: left;
  position: absolute;
  margin: 26px 0 0 -198px;
}

#orderCreditCard li {
  float: left;
  margin-right: 10px;
}

#orderCreditCard #creditcardSelection {
  margin-right: -8px;
  float: left;
}

#orderCreditCard #creditcardSelection li {
  float: left;
  text-align: center;
  width: 37px;
}

#orderCreditCard #creditcardSelection input {
  width: 13px;
  border: 0;
}

#orderCreditCard #payment_creditcard_number {
  width: 10.5em;
}

#orderCreditCard #payment_creditcard_month_2i {
  width: 4em;
}

#orderCreditCard #payment_creditcard_year_1i {
  margin-left: 0.5em;
  width: 5.5em;
}

#orderCreditCard #payment_creditcard_cvc {
  width: 2em;
}


