/* Reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, samp, strong, b, u, i, center,
dl, dt, dd, ol, ul, li, table, caption, tbody,
figure, figcaption, footer, header, 
menu, nav, section, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	/* font-family: "Libre Baskerville", Georgia, Times, "Times New Roman", serif; */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@font-face {
 font-family: "Libre Baskerville";
 src: url("librebaskerville-regular.eot");
 src: url("librebaskerville-regular.eot?#iefix") format("embedded-opentype"),
      url("librebaskerville-regular.woff") format("woff"),
      url("librebaskerville-regular.ttf") format("truetype");
 font-weight: normal;
 font-style: normal;
}

p {
    margin: 2px;
}
svg {
    padding-bottom: 10px;
}

body {
  background-color: #FFF;
  height: 100%;
  margin: 0;
}

.chart.title {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    font-weight: 500;
    margin-left: 10px;    
}

.chart.subtitle {
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: 200;
    margin-left: 10px;    
}

.chart.yLabel {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: 400;
    color: #727272;
}

.chart.xLabel {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #727272;
}

.chart.source {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: 200;
    color: #CCC;
}

.notes {
    margin: 0 10px 0 10px;
    color: #727272;
    font-style: italic;
    font-size: 0.8em;
}

.labels {
    display: none;
    stroke: #FFF;
    stroke-width: 0.5px;
    fill: #000;
    font-size: 1em;
    font-weight: 900;
}

.labels.active {
    display: block;
}

.dot {
    display: none;
    stroke-width: 1.5px;
}

.dot.active {
    display: block;
}

.budget_details {
    display: none;
    font-size: 0.9em;
    font-weight: 400;
}

.budget_details.active {
    display: block;
}
.axis {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.axis.y path {
    stroke: none;
}
.axis.y {
    fill: none;
    stroke: none;
    stroke-width: 0.5; 
}

.axis.x {
    fill: none;
    stroke: #727272;
    stroke-width: 0.5;
}

.axis text {
  fill: #727272;
}

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}

.grid.y, .grid.x .tick{
    stroke-dasharray: 5;
    stroke: lightgrey;
    opacity: 0.7;
}

.grid path {
    stroke-width: 0;
}


/* --------------- MENU STYLE ------------------- */
.menu {
  margin: 10px;
}

.menu div {
  display: inline-block;
  margin-bottom: 5px;
  text-align: center;
  font-size: .80em;
  width: 100px;
  height: auto;
  padding: 5px;
  border: 1px solid black;
  background-color: white;
  cursor: pointer;
  opacity: 0.5;    
}

.menu div:hover {
  background-color: #ccc;
  opacity: 0.75;
}

.menu .active {
  background-color: #fce1b6;
  pointer-events: none;
  opacity: 1.0;
}

/* --------- LEGEND STYLE ----------------- */

.legend {
  font-size: 13px;
  font-weight: 400;
  text-anchor: middle;
  cursor: pointer;
}

.legend.highlight {
  font-weight: 900;
  background-color: #727272;    
}

/* ------------- D3 LINE STYLES --------------------- */
.line.actuals {
    fill: none;
    opacity: 1;
    stroke: #727272;
    stroke-width: 5px;
}

.line.budget {
    fill: none;
    opacity: 0.5;
    stroke-width: 4px;
    cursor: pointer;
}

.line.budget:hover {
    opacity: 1;
    stroke-width: 5px;
}

.line.budget.active {
    opacity: 1;
    stroke-width: 5px;
}

/* -------------------------------------------- */

@media all and (max-width: 599px) {
    .chart.subtitle {
        font-size: 0.9em;
        font-weight: 200;
    }
    
}

/* -------------------------------------------- */

@media all and (max-width: 499px) {
    
    .chart.title {
        font-size: 1em;
        font-weight: 400;
    }

    .chart.subtitle {
        font-size: 0.75em;
        font-weight: 200;
    }
    
    .chart.source {
        font-size: 0.65em;
    }

    .line.actuals {
        stroke-width: 4px;
    }

    .line.budget{
        stroke-width: 3px;
    }    
              
}

/* -------------------------------------------- */

@media all and (max-width: 399px) {
    
    .chart.title {
        font-size: 0.75em;
        margin-bottom: 0;
        font-weight: 400;
    }

    .chart.subtitle {
        font-size: 0.7em;
        font-weight: 200;
                margin-top: 0;
    } 
    
    .line.actuals {
        stroke-width: 2px;
    }

    .line.budget{
        stroke-width: 2px;
    }
       
        
}

/* -------------------------------------------- */

@media all and (max-width: 299px) {
    
    .chart.xLabel {
        font-size: 10px;
    }
    
    .legend {
        font-size: 10px;
        font-weight: 500;
      }
      
    .menu div {
        margin-bottom: 2px;
        font-size: .7em;
        width: 90px;
        height: auto;
        padding: 2px;
        border: 1px solid black;
  
    }
    
    .notes {
        font-size: 0.7em;
    }    
        
}