/*

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300);

@font-face {
  font-family: realheadpro;
  src: url(../_fonts/realheadpro/RealHeadPro-Medium.otf);
}


* {
   box-sizing: border-box;
}

html, body {
   height: 100%;
   font-family: realheadpro;
   font-size: 0.95em;
}
html, body, div { padding: 0; margin: 0;}
h1 { color:#333; font-weight:normal; font-size:2.5em; margin:0em;}
h2 { color:#333; font-weight:normal; font-size:2.0em; margin:0em;}
h3 { color:#333; font-weight:normal; font-size:1.5em; margin:0em;}
p  { color:#333; font-weight:normal; font-size:1.0em; margin:0.5em 0 0.5em; }
strong {
   font-weight: 1500; 
   color: #111;
}
a,
a:link,
a:visited,
a:hover,
a:active
{
   text-decoration: none;
   color: #07B;
}



#home {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    color: #111;
    flex: 100%;
    width: 32px;
    height: 32px;
}
#home img {
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
}





#adminbar {
   background: #06C;
   color: #FFF;
   text-align: right;
   padding: 2px 20px;

}
#adminbar a,
#adminbar a:link,
#adminbar a:visited,
#adminbar a:hover,
#adminbar a:active
{
   text-decoration: none;
   font-size: 12px;
   font-weight: 300;
   color: #FFF;
   margin: 0;
   padding: 0;
}


.center {
   text-align: center;
}


#content {
   padding: 5% 20% 5% 20%;
}




.row {
  display: flex;
  height: 100%;
}


#nav-pane {
  flex: 220px;
  height: 100%;
  padding: 0;
  overflow: scroll;
  background-color: #EEE;
  font-size: 11px;
}


.nav-item {
  flex: 100%;
  height: 2em;
  padding: 1em;
  background-color: #EEE;
  font-size: 13px;
}


#chart-pane {
  flex: 100%;
  height: 100%;
  overflow: scroll;
  background-color: #FFF;
}

#chart {
   margin: 0 auto;
   width: 90vw;
/*   max-width: 1600px;*/
   height: 90vh;
}


#chart-subtext {
   text-align:center;
   font-size: 10px;
   color: #333;
   white-space: nowrap;
}
#chart-credits {
   padding-right: 16px;
}

#chart-title {
   display:flex;
   justify-content:space-between;
   margin-left: 80px;
   font-size: 24px;
   font-weight: bold;
   font-family: realheadpro;
}



@media (max-width: 800px) {
  #nav-pane {
    flex: 0%;
  }
  #chart {
   margin: 0 auto;
   width: 100vw;
   max-width: 1200px;
   height: 75vh;
   
   }
}