@charset "utf-8";
/*
 # Author:    Ben Allen
 # Email:     ben.allen@johnbrownmedia.com
*/ 

/*-- 01 Reset Styles --*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, 
h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, 
code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, 
strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button 
{margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

/* remember to define focus styles! */
:focus,:hover,:active { outline: 0;}

body {line-height: 1; color: #333; background:#fff; font-size: 62.5%; font-family:Arial, "Helvetica Neue",  Helvetica, FreeSans, sans-serif;}

ol, ul {list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}

caption, th, td {text-align: left; font-weight: normal;}

blockquote:before, blockquote:after, q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

/*-- 02 Font styles --*/
h1 {font-size:1.8em;}
h2 {font-size: 2em; padding:10px 0 30px; font-weight:bold;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}
h5 {font-size:1.1em;}

p {font-size: 1.4em; line-height:1.2; color:#424242;}
a {font-size: 1.2em; text-decoration:none;} 
* a {font-size: 1em;}

a {color:#741C2A;}
a:hover, a:active, a:focus, a.selected {text-decoration:underline;}

.block {display:block;}
strong, .strong {font-weight:bold;}
em {font-style:italic;}

/* Place .clear on the container that needs to be stretched to fit, alternatively if the container has a class or id add it after .clear */ 
.clear, #content, .producerExtras {display: inline-block;} 
.clear:after, #content:after, .producerExtras:after {clear: both; content: "."; display: block; height: 0; visibility: hidden;}

/* Utility classes for javascript */
.disabled{visibility:hidden !important;}
.hidden {display: none !important;} /* neater than using style="display:none" in the html when using javascript */

/* Title Colors */
.aconcagua h2 {color:#176460;}
 #producers a.aconcagua img {border-color:#176460;}

.casablancavalley h2 {color:#78bd24;}
#producers a.casablancavalley img{border-color:#78bd24;}

.leyda h2{color:#d83e22;}
#producers a.leyda img{border-color:#d83e22;}

.maipovalley h2{color:#191b4c;}
 #producers a.maipovalley img{border-color:#191b4c;}

.colchaguavalley h2{color:#795058;}
 #producers a.colchaguavalley img{border-color:#795058;}

.curicovalley h2{color:#b06f35;}
#producers a.curicovalley img{border-color:#b06f35;}

.biobiovalley h2{color:#d96a10;}
#producers a.biobiovalley img{border-color:#d96a10;}

.centralvalley h2{color:#561716;}
#producers a.centralvalley  img{border-color:#561716;}

/* page styles */

#wrapper{background:#f3f0e1; width:960px; position:absolute; top:50%; left:50%; margin:-270px 0 0 -480px; overflow:hidden;}
#header {background:#a1a089; height:65px;}
#content {width:auto; overflow:hidden; height:449px; width:960px;}

#mapHolder{width:255px; height:447px; float:left; display:block; border:1px solid #ffe4e9;}
#mapHolder img {display:block;}

#contentArea {float:left; width:702px; height:449px; display:block; overflow:hidden; z-index:9;}
  #introCopy {display:block; overflow:hidden;}
  #introCopy p {background:url(../images/chileLogo.jpg) no-repeat right bottom; margin:10px; padding:0 210px 0 0; height:150px;
   font-size:1.3em;}
   #introCopy strong {color:#741c2a; font-size:1.1em;}
  
  #mainContent {height:195px; display:none; overflow:hidden;}
      .region .regionMap{width:220px; height:195px; float:left;}
      .region .regionInfo{float:left;padding:0 0 0 10px;}
      .region h2 {width:472px; padding:10px 0 10px 0;}
      .region p {width:472px; padding:0 0 0 0; font-size:1.2em;}
  #subContent {height:255px; overflow:hidden;}
    #regionProducers{float:left; height:255px; width:220px; position: relative;}
    #producers{position:relative;  height:185px; overflow:hidden; z-index:0;}
    #producers.producerScroller {overflow:auto;}
    
    #producers .items{height:30000em; position:absolute; top:0; left:0; z-index:0;}
     #producers a {display:block; width:181px; height:90px; padding:0 0 4px 20px;}
     #producers img { border-width:5px 8px; border-style:solid; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
    
    #regionProducers .prevPage {width:56px; display:block; margin:0 0 0 40px;  height:34px; text-indent:-9999em; background:url(../images/upBtn.png) no-repeat 0 0;}
    #regionProducers .nextPage {font-size:1.4em; color:#000; display:block; margin:0 0 0 40px; padding:10px 0 0 60px; height:24px; background:url(../images/downBtn.png) no-repeat 0 0;}
    
  .wineList{float:left; height:255px; width:482px; background:#fff;}
  .navigator {padding:10px 25px 0; height:45px;float:left;width:210px;}
  .navigator a.nextPage, .navigator a.prevPage {float:left; height:35px; font-size:1.4em; color:#000; padding:8px 0 0 30px; display:block; background:url(../images/prevBtn.png) no-repeat 0 0;}
  .navigator a.nextPage{background:url(../images/nextBtn.png) no-repeat right 0; padding:8px 30px 0 0; margin:0 0 0 10px;}
  
  
  .wineList .navigator li {float:left; display:block; border:1px solid #ccc; width:15px;  margin:8px 0 0 5px; text-align:center;}
  .navigator li a {display:block; color:#919075; font-size:1.1em; height:12px; padding:3px 0 0;}
  .navigator li a.selected, .navigator li a:hover, .navigator li a:active, .navigator li a:focus{background:#adadad; color:#fff; text-decoration:none;}
  
  
  .bottleList {width:472px; height:200px;position:relative;overflow:hidden; margin:0 5px; z-index:0;clear:both;}
  .bottleList .items {width:30000em; position:absolute; z-index:0;}
  
  div.itemsScroller{overflow:auto; height:215px; margin:35px 0 5px;}
  
  .bottleList div.bottle {float:left; display:block; width:220px; height:190px; padding:0 10px;}
  .bottleList div.bottle p {font-size:1.2em; margin:10px 0 0;}
  .bottleList div.bottle p.price{height:auto; margin:5px 0 0; font-weight:bold;}
  .bottleList .wineBottleLink {float:left; position:relative;}
  .bottleList .wineBottleLink img {display:block; margin:0 15px 0 0;}
  .bottleList .regionName {margin:20px 0px 10px;}
  .bottleList .purchaseBtn {position:absolute; bottom:3px;}
  .bottleList a:hover p, .bottleList a:active p, .bottleList a:focus p {text-decoration:underline;}
  .bottleList .bottleInfo {float:left;width:140px;}
  
#producerContent{float:left; width:702px; height:448px; display:block; z-index:100;overflow:hidden; background:#F3F0E1; position:relative;}
.producerInfo {height:195px; overflow:hidden;}
.producerInfo .producerImage{width:220px; height:195px; float:left;}
    .producerInfo .producerText{float:left;padding:0 0 0 10px;}
      .producerInfo h2 {width:452px; padding:10px 20px 10px 0;}
      .producerInfo p {width:452px; padding:0 20px 0 0; font-size:1.2em;}
      .producerInfo a {font-weight:bold; text-decoration:underline;}

#producerContent .lifestyleImage {float:left; height:255px; width:220px; z-index:500;}

#footer {clear:both; height:22px; padding:2px 5px 5px;  background:#a1a089;  z-index:999; position:relative; text-align:right;}
#footer a {font-size:1.6em; font-weight:bold; color:#fff; padding:0px 20px 0;}

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox{margin:20px 0 0;}
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{width:100%; height:100%;} 
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}

/* 
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
 #cboxOverlay{background:url(../images/overlay.png) 0 0 repeat;} 

#colorbox{}
    #cboxContent{background:#fff; border:10px solid #a2a089; width:665px; height:420px; float:none !important;}
        #cboxLoadingOverlay{background:url(../images/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) center center no-repeat;}
        #cboxClose{cursor:pointer;position:absolute; top:0; right:0; background:url(../images/lightBoxClose.jpg) 0 0 no-repeat; width:38px; height:35px; text-indent:-9999px;}

/* Wine no JS */
#wineWrapper {position:relative; background:#fff;}

.wineDetailScroller {padding:10px 20px; width:663px;height:428px;position:relative; overflow:auto;}
  .wineDetailScroller .items{ position:absolute;}
  .wineDetail {float:left;width:625px; height:400px; display:block; padding:10px;}
  .wineDetail .wineInfo {float:left; width:330px; margin:70px 0 0 20px;}
  .wineDetail a {float:left;}
  
  .wineInfo h2 {color:#7a1c2a; font-size:1.4em; margin:10px 0 0;}
  .wineInfo p {font-size:1.2em; line-height:1.3; margin:0 0 10px;}
  .wineInfo a {font-size:1.4em; margin:0 0 10px; display:block; float:none;}
  .wineInfo p.price{margin:5px 0 0; font-weight:bold;}
  
  p.helperText {float:right;font-size:1.2em;padding:20px 20px 0 0;color:#741c2a;}
  p.helperTextProducer {font-size:1.2em;left:100px;position:absolute;top:10px;color:#741c2a;}

