body{height:100%; width:100%; font-family: 'proxima_novasemibold', Helvetica, Arial, Sans-serif; margin: 0}

.mapContainer{position: absolute; bottom: 181px; top: 0; z-index: 1;}
.mapContainer h2{width: 270px; position: absolute; bottom: 20px; left: 20px; z-index: 2; font-size: 17px; color: #FFF; font-weight: regular; line-height: 20px; text-shadow: 0 0 5px #000; margin: 0;}
.mapContainer .logo{position: absolute; top: 12px; right: 12px; display: block; width: 210px; height: 90px; background: transparent url('../assets/img/bbva_map_logo.png') 0 0 no-repeat;}

.left{left: 0; right: 50%;}
.right{left: 50%; right: 0; text-align: right}
.right h2{right: 20px;left: auto;}

.vseparator{position: absolute; top: 38px; bottom: 204px; left: 50%; width: 4px; background-color: #FFF; margin-left: -1px; z-index: 2;}
.vseparator.dark{position: absolute; bottom: 40px; left: 50%; width: 4px; background-color: #ccc; margin-left: -1px; z-index: 1;}

.aboutTab{display: block; position: absolute; top: -1px; left: 50%; z-index: 2; width: 40px; height: 40px; background-color:#FFF; border: 1px solid #111; -webkit-border-bottom-right-radius: 20px;-webkit-border-bottom-left-radius: 20px;-moz-border-radius-bottomright: 20px;-moz-border-radius-bottomleft: 20px;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px; margin: 0 0 0 -20px;}
.aboutTab a, .aboutTab a:visited{position: absolute; bottom: 7px; background-color: #ddd; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding: 5px 10px 2px 10px; margin: 12px 0 0 6px; text-decoration: none; color: #FFF;}
.aboutTab a:hover{background-color: #333;}

#dateControl{display: block; position: absolute; bottom: 156px; left: 50%; z-index: 2; width: 192px; height: 50px; background-color:#FFF; border: 1px solid #111; -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; margin: 0 0 0 -96px; text-align: center;}
#dateControl ul{padding: 0; margin: 12px 0 auto 0;}
#dateControl ul li{list-style-type: none; display: inline-block; vertical-align: middle;}
#dateControl ul li span{display: block; font-family: 'proxima_nova_rgbold', Helvetica, Arial, Sans-serif; color: #333; text-align: center; width: 68px; padding-top: 2px;}
#dateControl ul li p{margin: 0; display: inline;}

#daySelector{width: 147px; margin: 9px 0 0 22px; display: none; overflow: hidden; background: url('../assets/img/arrows.png') no-repeat right;}
#daySelector select{background: transparent; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; font-family: 'proxima_nova_rgbold', Helvetica, Arial, Sans-serif; font-size: 17px; width: 100%; outline: none;}

#dayvsnight{
  display: block;
  width: 27px;
  height: 27px;
  -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
  background: #333;
}

#bottomArea{display: block; width: 100%; height: 180px; position: absolute; bottom: 0;  border-top: 1px solid #111;}
#bottomArea .menuBar{display: block; height: 40px; width: 100%; position: absolute; bottom: 0; background-color:#eee; border-top: 1px solid #ccc; text-align: center;}
#bottomArea .menuBar a.swtichButton, #bottomArea .menuBar a.swtichButton:visited{display: block; width: 100%; font-family: 'proxima_nova_rgbold', Helvetica, Arial, Sans-serif; font-size: 13px; color: #999; text-decoration: none; line-height: 40px;}
#bottomArea .menuBar a.swtichButton:hover{color:#333;}

#bottomArea .chartsArea .legend{
  position: absolute;
  top: 18px;
  left: 5px;
  color: #333;
  font-size: 13px;
}

#bottomArea .chartsArea .legend span{
  margin: 0 0 0 15px;
}

#bottomArea .chartsArea .legend .es{color: #26C9FF;}
#bottomArea .chartsArea .legend .no_es{color: #FF00FF;}

#buttonContainer{margin: 42px 0 0 0; display:none;}
#buttonContainer ul{padding: 0;}
#buttonContainer ul li{list-style-type: none; display: inline-block; margin: 0 6px 0 0;}
#buttonContainer ul li a, #buttonContainer ul li a:visited{position: relative; font-family: 'proxima_nova_rgbold', Helvetica, Arial, Sans-serif; display: block; max-width: 200px; font-size: 13px; color: #333; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 113px 40px 17px 40px; text-decoration: none; line-height: 15px;}
#buttonContainer ul li a:hover{background-color: #E5E5E5;}
#buttonContainer ul li a.selected{color: #BBBBBB; background-color: #E5E5E5;}
#buttonContainer ul li a span{position: absolute; top: 24px; left: 50%; margin: 0 0 0 -35px; display: block; width: 71px; height: 71px;}
#buttonContainer ul li a.static span{background:transparent url('../assets/img/icons.png') no-repeat 0 0;}
#buttonContainer ul li a.static.selected span{background:transparent url('../assets/img/icons.png') no-repeat 0 -71px;}
#buttonContainer ul li a.time span{background:transparent url('../assets/img/icons.png') no-repeat -71px 0;}
#buttonContainer ul li a.time.selected span{background:transparent url('../assets/img/icons.png') no-repeat -71px -71px;}

.chart {
  position: absolute;
  height: 140px;
}

.chart.left{
  left: 0;
  overflow:hidden;
}

.chart.right{
  right: 0;
  left: 50%;
  overflow:hidden;
}

.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#cover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url('../assets/img/white_bkg.png') repeat; z-index: 4; text-align: center;}
#cover .wrapper{width: 1066px; height: 500px; text-align: left; margin: 105px auto 0 auto;}
#cover .wrapper .preview{width: 480px; height: 100%; display: inline-block; vertical-align: top; zoom: 1; *display: inline; background: transparent url('../assets/img/coverImg.png') 0 0 no-repeat;}
#cover .wrapper .preview:hover{cursor: pointer; }
#cover .wrapper .preview .spinner{position: absolute; top: 276px; left:216px;}
#cover .wrapper .preview .playBtn{margin: 223px 0 0 170px; border: none; display: none;}
#cover .wrapper .textBlock{width: 580px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; margin: 62px 0 0 0; font-family: 'proxima_novasemibold', Helvetica, Arial, Sans-serif; color: #333;}
#cover .wrapper .textBlock h1{font-family: 'proxima_nova_rgbold', Helvetica, Arial, Sans-serif; font-size: 51px; letter-spacing: -1px; line-height: 51px; margin: 0 0 24px 0;}
#cover .wrapper .textBlock h2{font-size: 23px; font-weight: normal; margin: 0 0 26px 0;}
#cover .wrapper .textBlock p{font-size: 15px; color: #666;}
#cover .wrapper .textBlock ul.logos{padding: 0; margin: 30px 0 0 0;}
#cover .wrapper .textBlock ul.logos li{display: inline-block; vertical-align: top; zoom: 1; *display: inline; list-style-type: none;}
#cover .wrapper .textBlock ul.logos li a, .logos li a:visited{display: block; height: 67px; font-family: 'proxima_nova_rgbold', Helvetica, Arial, Sans-serif; font-size: 11px; text-decoration: none; color: #ccc;}
#cover .wrapper .textBlock ul.logos li a:hover{color: #666;}
#cover .wrapper .textBlock ul.logos .bbva{width: 143px; background: transparent url('../assets/img/bbva_logo.png') 0 18px no-repeat;}
#cover .wrapper .textBlock ul.logos .cartodb{width: 194px; background: transparent url('../assets/img/cartodb_logo.png') 0 20px no-repeat;}



body.special .vseparator.dark {bottom:0!important;}
body.special .chartsArea .chart {height:180px;}
body.special .chart canvas {top:40px;}