body, html{ height:100%; padding:0px;}
body{ background:#fff; color:#333; margin:0; padding:0; overflow-y:scroll; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }

#wrap{ margin:0 40px; }

#tabs{ width:200px; position:fixed; height:100%; margin-top:70px; }
#tabs ul{ list-style-type:none; padding:0; margin:0; }
#tabs ul li{ height:34px; line-height:35px; border-bottom:1px dotted #ececec; cursor:pointer; color:#666; font-size:13px; }
#tabs ul li:after{ content:'›'; display:block; float:right; margin-right:15px; color:#ccc; font-size:16px; line-height:35px; }
#tabs ul li .picto{ margin-top:10px; margin-right:7px; }
#tabs ul li:hover, #tabs ul li:hover:after{ color:#000; }
#tabs ul li:hover .picto{ opacity:1; }

.picto{ display:block; height:14px; width:14px; float:left; background:url('/fnordmetric/sprite.png') no-repeat 14px 14px; opacity:0.7; }
.picto.piechart{ background-position:-42px -173px; width:9px; margin-right:5px; }

#viewport{ min-height:800px; float:left; margin-left:220px; padding-top:20px; border-right:1px solid #e0e0e0; border-left:1px solid #e0e0e0; }

.headbar{ height:36px; background:#f2f2f2; border-bottom:1px solid #e2e2e2; }
.headbar h2{ margin:8px; line-height:21px; float:left; height:20px; font-size:14px; }
.headbar .datepicker{ background:#fff; border:1px solid #999; height:20px; padding:0 7px; float:right; margin:8px -1px; min-width:100px; font-size:11px; font-style:italic; }
.headbar .button.mr{ margin-right:16px;  }


.headbar .button{
  margin:8px 0px; height:16px; float:right; display:block;
  margin-right:-1px;
  background:url('/fnordmetric/sprite.png') no-repeat 0 -49px #eee; 
  border:1px solid #999;
  border-bottom-color:#888;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1); 
  cursor:pointer;
  
  font-size: 11px;
  font-weight:bold;
  line-height:16px;
  padding:2px 6px;
  text-align:center;
  text-decoration:none;
  vertical-align:top;
  white-space:nowrap;
}

.headbar .button:hover, .headbar.button.active{background:#ddd;border-bottom-color:#999;-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .05)}

.numbers_container, .number{ float:left; border-right:1px solid #ececec;}
.number{ margin-left:12px; padding-right:20px; margin-right:10px; }
.number .value{ color:#333; font-size:30px; display:block; margin-bottom:5px; }
.number .desc{ color:#999; font-size:12px; }
.number:last-child{ border-right:none; }
.numbers_container{ padding-right:0px; width:33.2%; }

.numbers_container .title{ padding:4px 10px 1px 10px; color:#333; font-size:13px; display:block; background:#f2f2f2; border-bottom:1px solid #e2e2e2; margin-bottom:15px; }