body {
  font: 14px sans-serif;
}
.chartContainer { text-align:center; }
.controls {
    margin: 0 auto 30px auto;
    max-width: 960px;
    padding: 20px 0 20px 0;
    background-color: #eee;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.spacer { margin-top: 20px; }
h4 { margin-top: 5px; }

/* give some space to bigger screens */
@media (min-height: 1080px) {
  body { padding: 50px inherit 50px inherit; }
}
@media (min-width: 1200px) {
    .controls .btn-lg { width: 100% }
    .controls .spacer { margin-top: 20px; }
}
@media (max-width: 1200px) {
    .controls .spacer { margin-top: inherit; }
    .controls h4 { margin-top: 30px; }
    .controls label h4 { margin-top: 10px; }
    .controls .ui-slider { margin-bottom: 30px; }
    .demo iframe { margin-top: 30px; }
}

/* d3 styles */
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis > path {
    stroke-width: 2;
    stroke: #999;
}

.x.axis,
.y.axis  {
    font-size: 30px;
}

.y .tick line {
    stroke: lightgrey;
    opacity: 0.7;
}
.y line.minor {
    stroke: lightgray;
    stroke-width: 1;
    opacity: 0.2;
}

.y.axis text {
    fill: #999;
}

/******* Demo only *******/

.demo #title h2 {
    margin-top: 10px;
    margin-bottom: 30px;
}

.demo #authors {
    margin-bottom: 30px;
}

.demo p {line-height: 1.4; text-align:justify;}
.demo #authors p {text-align:start;}

/* download pdf*/
@media (min-width: 768px) {
    .demo #pdf * {
        clear: both;
        float: right;
    }
}
.demo #paperImage {
    border: 1px solid #777;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    margin: 0 0 0 0;
}
.demo #paperImage:hover {
    border: 1px solid #000;
    box-shadow: 8px 8px 8px rgba(0,0,0,0.15);
    margin: -3px 6px 3px -3px;
}
.demo #paperImage:active {
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3) inset;
    margin: 2px 0 -2px 2px;
}

/* spacing out rows */
.demo .sm-spacer { margin-top:10px; }
.demo .md-spacer { margin-top:60px; }
.demo .lg-spacer { margin-top:80px; }

/* ribbon */
.demo #ribbon { margin-bottom: 20px; }
.demo #ribbon img {
    opacity: 0.4;
    margin: auto 0.5% auto 0.5%;
    width: 3.4%;
}

.demo figure {
    background: #eee;
    border-radius: 5px;
    margin-top: 20px;
    padding: 7px;
}
.demo figcaption {
    margin-top: 10px;
    margin-bottom: 5px;
}

/* guideline images */
.vertical-align {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.demo .example,
.demo .vertical-align > [class*="col-"]:last-of-type {
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center; /* justify-content */
    -webkit-box-align: center; /* align-items */
    align-items: center;
    justify-content: center;
    float: none;
    margin: 0 auto;
}
.demo .example p {margin: 20px; font-size:200%; display: inline-block;}

/* experiment links*/
.experimentLinks h3 { 
    margin-bottom: 0;
}
.experimentLinks p { 
    text-align: center;
}
.experimentLinks img { 
    width: 100%;
}
.experimentLinks a {
    display: block;
    border: 3px solid #eee;
    border-radius: 5px;
    margin-top: 30px;
    padding: 20px 10px 10px 10px;
}
.experimentLinks a:hover {
    border-color: #333;
}

/* demo chart*/
.demo .row > .chartBorder {
    margin-bottom: -4px;
}
.demo .chartBorder {
    border:  5px solid #eee;
    border-radius: 10px 10px 0 0;
    padding-top: 30px;
    padding-bottom: 10px;
    white-space: nowrap;
    width: 960px;
}