/* Change the styles below in order to customize your template */

body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #CBCBCB; background-color: #333; margin: 0;}
h1{font-weight: bold; font-size: 24px; letter-spacing: -1px; color: #FFF; line-height: 33px;}
h3{font-weight: bold; font-size: 12px; color: #777; text-transform: uppercase; margin: 18px 0 0 0;}
p{margin: 8px 0 20px 0; line-height: 18px;}
a, a:visited{color: #72B6E5; text-decoration: none;}
a:hover{text-decoration: underline;}

.wrapper{display: block; padding: 4px 30px 0 30px;}

.map{background: black; position: absolute; top: 0; left: 0; bottom: 0; width: 76%; *height:100%;}
.sidepanel{background-color:#333; position: absolute; top: 0; right: 0; bottom: 0; width: 25%; height: 100%; overflow: auto;}

.context{font-family: Helvetica, Arial; font-size: 13px; color: #999; padding: 10px 0 0 0;}
.subheader{border-bottom: 1px solid #555;}
.footer{border-top: 1px solid #555; margin-top: 30px;}
.titleBlock{text-align: right;}

#menu { position: absolute; 
        top: 5px; 
        left: 10px; 
        width: 400px; 
        height:60px; 
        background: transparent; 
        z-index:10;
        }
#menu a { 
  margin: 15px 10px 0 0;
  float: right;
  vertical-align: baseline;
  width: 70px;
  padding: 10px;
  text-align: center;
  font: bold 11px "Helvetica",Arial;
  line-height: normal;
  color: #555;
  border-radius: 4px;
  border: 1px solid #777777;
  background: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
#menu a.selected,
#menu a:hover { 
  color: #F84F40;
}

div.cartodb-timeslider {
  position: absolute;
  display: inline-block;
  height: 40px;
  width: auto!important;
  margin-bottom: 30px;
  padding: 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
  z-index: 5;
  background: white;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #999999;
  text-align: left;
  z-index: 5;
}
  
.btn {
  background: #787b7d;
  background-image: -webkit-linear-gradient(top, #787b7d, #333333);
  background-image: -moz-linear-gradient(top, #787b7d, #333333);
  background-image: -ms-linear-gradient(top, #787b7d, #333333);
  background-image: -o-linear-gradient(top, #787b7d, #333333);
  background-image: linear-gradient(to bottom, #787b7d, #333333);
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  font-family: Arial;
  color: #d9d9d9;
  font-size: 8px;
  padding: 2px 4px 2px 4px;
  text-decoration: none;
}

.btn:hover {
  background: #949494;
  background-image: -webkit-linear-gradient(top, #949494, #6b6b6b);
  background-image: -moz-linear-gradient(top, #949494, #6b6b6b);
  background-image: -ms-linear-gradient(top, #949494, #6b6b6b);
  background-image: -o-linear-gradient(top, #949494, #6b6b6b);
  background-image: linear-gradient(to bottom, #949494, #6b6b6b);
  text-decoration: none;
}