body{
    background: white;
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top:  2rem;
}

/* Larger than tablet */
@media (min-width: 750px) {
    body{
        margin-top:  4rem;
    }
}

.mono{
    font-family: 'Roboto Mono', monospace;
}

a { color: #F84959; }
a:hover { color: #F84959; }

#footer{
    text-align: center;
}

   /*
   red: #F84959
   green: #49F871
   blue-l: #268FC5
   blue-d: #2A80AB
   yellow: #F9F462
   */

/* --------------------------------- grid ---------------------------------*/

#header {grid-area: header;}
#chart {grid-area: chart;}
#main {grid-area: main;}
#footer {grid-area: footer;}


.container{
    display: grid;
    grid-template-areas:
    'header'
    'chart'
    'main'
    'footer';
    margin-top: 1rem;
    align-items: center;
    width: 100%;
}

.container > div {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 400px;
    background-color: rgba(0,0,0,0.04);
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    border-radius: 4px;
}


/* Larger than mobile */
@media (min-width: 400px) {
    .container > div {max-width: 400px;}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .container > div {max-width: 550px;}
}

/* Larger than tablet */
@media (min-width: 750px) {
    .container > div {max-width: 750px;}
}

/* Larger than desktop */
@media (min-width: 1000px) {
    .container > div {max-width: 1000px;}
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    .container > div {max-width: 1200px;}
}

.container > div#footer{
    margin-bottom: 0rem;
}

/* --------------------------------- header ---------------------------------*/

#header{
    text-align: center !important;
}

#header > a {
    color: black;
    text-decoration: none;
}

#header > a > h1 { margin-bottom: 0;}

#header > a > h1 > span {
    color: #F84959;
    font-weight:800;
}


/* --------------------------------- chart ---------------------------------*/

.container-chart{
    display: grid;
    grid-template-areas:
    'chart-selection'
    'chart-selection-sub'
    'chart-chart'
    'chart-info'
    'chart-share'
    'chart-control'
    'chart-explanation';
    width: 100%;
    border-radius: 4px;
}

#chart-selection{
    margin-top: 0px;
    padding-bottom: 1rem;
    border-bottom: 1px solid #33333333;
}

#chart-selection-sub{
    margin-top: 0px;
    padding-bottom: 1rem;
    border-bottom: 1px solid #33333333;
}

.container-chart > div{
    margin: 1rem 0;
}

.controlSeparator{
    padding: 0px 10px;
    color: gray;
    font-weight: 900;
}


.dygraph-legend {
    background: rgba(255,255,255,0.9);
    position: absolute;
    padding: 4px;
    border-radius: 4px;
    margin-top: -3rem;
    z-index: 10;
}

.dygraph-legend > table > tbody > tr > td {
    padding-left: 0.5rem;
}

#dygraph-chart-div {
    width: 100% !important;
    height: 500px;
    background-image: url("../images/logo-transparent-small.png");
    background-repeat: no-repeat;
    background-position: 50% 100px;
}

.dygraph-roller{
    position: absolute;
}

/* Larger than mobile */
@media (min-width: 700px) {
    #dygraph-chart-div {
        background-image: url("../images/logo-transparent.png");
    }

}

#chart-info{
    display: block;
    margin: auto;
    margin-bottom: 1rem;
}



#button-permalink {
    background-color: rgba(0,0,0,0.05);
    position: relative;
    border: none;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.6s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

#button-permalink:after {
    content: "";
    background: #49F871;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

#button-permalink:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}


/* Larger than tablet */
@media (min-width: 750px) {
    #chart-explanation{
        margin: 0rem 4rem;
    }
}
.dygraph-label.dygraph-title{
    text-align: center;
}

/* ---------------------------------- tabs -------------------------------- */
ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.tabs li{
    border-radius: 4px;
    background: none;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    border: 0.0625rem solid #DDD;
    margin: 0.2rem;
}

ul.tabs li.tab-disabled{
    cursor: not-allowed;
}

ul.tabs li.current{
    background: rgba(0,0,0,0.1);
}

.tab-content{
    display: none;
}

.tab-content.current{
    display: inherit;
}

/* ----------------------------- media querys ----------------------------- */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



/* ---------------------- styles taken from skeleton ---------------------- */

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/




/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 {  line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }