/* ------------------------------------------------
   The Whisky Exchange
   Designed and Built by The Whisky Exchange
   All Rights Reserved

   Header CSS file 

   Content:
   Layout
   Logo Banner
   Header Widgets
   Header Links
   Nav Button
   Basket
   Search
   ------------------------------------------------ */

/* ------------------------------------------------
   Layout
   ------------------------------------------------ */
#tweheader {
   width: 100%;
   position: relative;
}
/* ------------------------------------------------
   Logo Banner
   ------------------------------------------------ */
#tweheader .header-banner {
   width: 100%;
   position: relative;
   max-height: 135px;   
}
/* Background colours */
#tweheader .header-banner {
   background: #390021;   
}
.twe-default-header #tweheader .header-banner {
   background: #390021;
}
.twe-brown-header #tweheader .header-banner {
   background: #3b0100;
}
.twe-purple-header #tweheader .header-banner {
   background: #3a0029;
}
.twe-green-header #tweheader .header-banner {
   background: #0c3200;
}
/* Logo */
#tweheader .header-logo {
   display: block;
   max-width: 460px;
   margin: 0 auto;
}
#tweheader .header-logo .header-logo-image {
   display: block;
   width: 100%;
   min-width: 300px;
   max-width: 460px;
   max-height: 135px;
}
/* ------------------------------------------------
   Header Widgets
   ------------------------------------------------ */
#tweheader .header-widgets {
   width: 100%;
   padding: 5px 0;
}
/* Widgets bar background based on nav bar */
.twe-gold-bar #tweheader .header-widgets {
   border-top: 5px solid #b8a877;
   border-bottom: 5px solid #b8a676;
   background: #b39851;
}
.twe-silver-bar #tweheader .header-widgets {
   border-top: 5px solid #a4a4a4;
   border-bottom: 5px solid #989898;
   background: #858585;
}
@media (min-width: 660px) {
   /* Widgets bar background */
   /*.twe-gold-bar #tweheader .header-widgets {
      border-bottom: none;
   }
   .twe-silver-bar #tweheader .header-widgets {
      border-bottom: none;
   }*/
}
@media (min-width: 980px) {
   #tweheader .header-widgets {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 320px;
      border: none;
      background: none;
      height: 100px;
   }
   /* Widgets bar background */
   .twe-gold-bar #tweheader .header-widgets,
   .twe-silver-bar #tweheader .header-widgets {
      border: none;
      background: none;
   }
}
/* ------------------------------------------------
   Header Links
   ------------------------------------------------ */
/*
 *
 * Links Layout 
 *
 */
#tweheader .header-links .header-links-item {
   display: block;
   float: right;
   width: 20%;
}
@media (min-width: 450px) {
   #tweheader .header-links {
      float: right;
      width: 40%;
   }
   #tweheader .header-links .header-links-item {
      width: 25%;
   }
}
/*@media (min-width: 660px) {
   #tweheader .header-links {
      width: 30%;
   }
   #tweheader .header-links .header-links-item {
      width: 33.3333%;
   }  
}*/
@media (min-width: 980px) {
   #tweheader .header-links {
      display: block;
      position: absolute;
      top: 10px;
      right: 15px;
      width: 330%;
      padding: 0;
   }
   #tweheader .header-links .header-links-item {
      width: auto;
      text-align: right;
      margin-left: 15px;
   }
}
/*
 *
 * Links Style
 *
 */
#tweheader .header-links .link {
   display: block;
   width: 100%;
   height: 40px;
   text-align: center;
   color: #f7f8d9;
   line-height: 38px;
   font-size: 2em;
}
#tweheader .header-links .link-text {
   display: none;
}
@media (min-width: 450px) {
   /* Search Button */
   #tweheader .header-links .button-search {
      display: none;
   }   
}
@media (min-width: 980px) {
   #tweheader .header-links .link {
      display: inline;
      font-family: 'Lato',arial,sans-serif;
      font-size: 0.7em;
      text-transform: uppercase;
      line-height: 1;
      color: #b7a052;
   }
   #tweheader .header-links .link {
   
   }
   #tweheader .header-links .link:hover {
      color: #ff7010;
   }
   /* Header link colours based on Header colour */
   .twe-default-header #tweheader .link,
   .twe-default-header #tweheader .header-links {
      color: #b7a052;
   }
   .twe-brown-header #tweheader .link,
   .twe-brown-header #tweheader .header-links {
      color: #b7a052;
   }
   .twe-purple-header #tweheader .link,
   .twe-purple-header #tweheader .header-links {
      color: #b177a0;
   }
   .twe-green-header #tweheader .link,
   .twe-green-header #tweheader .header-links {
      color: #b7a052;
   }
   /* Header link Hover colours based on Header colour */
   .twe-default-header #tweheader .link:hover,
   .twe-brown-header #tweheader .link:hover,
   .twe-purple-header #tweheader .link:hover,
   .twe-green-header #tweheader .link:hover {
      color: #ff7010;
   }
   /* Basket Button */
   #tweheader .header-links .button-basket {
      display: none;
   }
   /* Link Text */
   #tweheader .header-links .link-text {
      display: inline;
   }
   /* Nav Button */
   #tweheader .header-links .button-nav {
      display: none;
   }
}
/* ------------------------------------------------
   Basket
   ------------------------------------------------ */
#tweheader .header-basket-text {
   display: none;
}
#tweheader .basket-preview {
   position: absolute;
   display: none;
   right: 0;
   width: 100%;
   margin-top: 13px;
   min-width: 300px;
   text-align: left;
   color: #8b8b8b;
   z-index: 1000;
   -webkit-box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.6);
      -moz-box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.6);
           box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.6);
}
/* Triangle connector */
#tweheader .basket-preview:after {
   z-index: 3;
   position: absolute;
   top: -15px;
   right: 25%;
   margin-left: -15px;
   content:'';
   width: 0;
   height: 0;
   border-bottom: solid 15px #fff;
   border-left: solid 15px transparent;
   border-right: solid 15px transparent;
}
#tweheader .basket-preview .basket-container {
   padding: 10px;
   background: #fff;
}
#tweheader .basket-preview .basket-change .basket-change-form {
   padding: 10px 0 5px;
}
#tweheader .basket-preview .basket-change .basket-change-country,
#tweheader .basket-preview .basket-change .basket-change-currency {
   float: left;
   border: 1px solid #E5E5E5;
   padding: 10px;
   margin-bottom: 10px;
}
#tweheader .basket-preview .basket-change .basket-change-country {
   width: 59%;
   margin-right: 1%;
}
#tweheader .basket-preview .basket-change .basket-change-currency {
   width: 39%;
   margin-left: 1%;
}
/* Email basket */
#tweheader .basket-preview .basket-change {
   padding: 10px;
   background: #f6f6f6;
}
#tweheader .basket-preview .basket-email {
   display: block;
   padding: 20px 10px;
   background: #f4eac7;
   color: #8B8B8B;
}
#tweheader .basket-preview .basket-email:hover {
   background: #f7edc9;
}
@media (min-width: 450px) {
   #tweheader .basket-preview:after {
      right: 12%;
   }
}
@media (min-width: 660px) {
   #tweheader .basket-preview {
      min-width: 360px;
      max-width: 360px;
      right: 13%;
   }
   #tweheader .basket-preview:after {
      right: 0;
   }
   #tweheader .basket-preview .basket-change .basket-change-country {
      width: 170px;
      margin-right: 2px;
   }
   #tweheader .basket-preview .basket-change .basket-change-currency {
      width: 90px;
      margin-left: 2px;
   } 
}
@media (min-width: 980px) {
   #tweheader .header-basket-text {
      display: block;
      text-align: right;
   }
   #tweheader .header-basket-text .basket-show {
      font-family: 'Lato',arial,sans-serif;
      font-size: 0.7em;
      text-transform: uppercase;     
      color: #b7a052;
   }
   #tweheader .header-basket-text .basket-show:hover {
      color: #ff7010;
   }
   #tweheader .header-basket-text .header-basket-value {
      display: block;
   }
   #tweheader .header-basket-text .flag {
      display: inline-block;
      margin: 0 2px;
   }
   #tweheader .basket-preview {
      right: 0;
      top: 25px;
   }
   #tweheader .basket-preview:after {
      right: 0;
   }
}
/* ------------------------------------------------
   Search Bar
   ------------------------------------------------ */
#tweheader .header-search {
   display: none;
   padding: 5px 10px 0;
}
#tweheader .header-search .input {
   border: none;
   margin: 0;
   padding: 0 50px 0 10px;
   margin-right: -40px;
   height: 40px;
   width: 100%;
   float: left;
   background: rgba(0,0,0,0.1);
}
#tweheader .header-search .submit {
   border: none;
   margin: 0;
   padding: 0;
   width: 40px;
   height: 40px;
   background: rgba(0,0,0,0.1);
   color: #f7f8d9;
   line-height: 40px;
}
/* Input Colours */
.twe-gold-bar #tweheader .header-search .submit {
   color: #f7f8d9;
}
.twe-silver-bar #tweheader .header-search .submit {
   color: #ececec;
}
#tweheader .header-search .submit:hover,
#tweheader .header-search .submit:focus  {
   background: rgba(0,0,0,0.2);   
}
/* Searh bar text colour based on nav bar colour */
.twe-gold-bar #tweheader .header-search .input {
   color: #f7f8d9;
}
.twe-silver-bar #tweheader .header-search .input {
   color: #ececec;
}
@media (min-width: 450px) {
   #tweheader .header-search {
      display: block;
      float: left;
      width: 60%;
      padding: 0 0 0 10px;
   }
}
/*@media (min-width: 660px) {
   #tweheader .header-search {
      width: 70%;
   }
}*/
@media (min-width: 980px) {
   /* Search */
   #tweheader .header-search {
      position: absolute;
      padding: 0;
      top: 62px;
      right: 15px;
      width: 100%;
      display: block;
   }
   #tweheader .header-search .input {
      padding: 0 50px 0 10px;
      background: #560219;
      color: #b7a052;
   }
   #tweheader .header-search .submit {
      background: #560219;
   }
   /* Searh bar colours based on Header colour */
   .twe-default-header #tweheader .header-search .input,
   .twe-default-header #tweheader .header-search .submit {
      background: #690924;
      color: #b7a052;
   }
   .twe-brown-header #tweheader .header-search .input,
   .twe-brown-header #tweheader .header-search .submit {
      background: #570301;
      color: #b7a052;
   }
   .twe-purple-header #tweheader .header-search .input,
   .twe-purple-header #tweheader .header-search .submit {
      background: #50163f;
      color: #c2b1c3;
   }
   .twe-green-header #tweheader .header-search .input,
   .twe-green-header #tweheader .header-search .submit {
      background: #1e4300;
      color: #b7a052;
   }   
}