﻿body {  
    padding: 50px;
}

.centerColumn {
    float: none; 
    margin: 0 auto;
}

.question, .studytitle, .intro p, .finished h2 {
    font-family: 'Roboto', sans-serif;
}

p, ol {
    font-size: 20px;
}
p { 
    margin-top: 1.5em;
    margin-bottom: 1em; 
}
ol {
    font-style: italic;
    margin-bottom: 2em; 
}

/****** loading ******/
@keyframes pulse {
    to { transform: scale(1.5, 1.0); opacity: 1.0; }
}
.animate {
    animation: pulse 0.5s ease-in-out infinite alternate;
    display: inline-block;
    opacity: 0.5;
    transform: scale(0.5, 1.0);
    transform-origin: left center;
}

/****** intro ******/
.intro .studytitle {
    font-size: 105px;
    margin-bottom: 0.3em;
    margin-left: -4px;
}

.intro p:last-of-type {
    margin-bottom: 50px;
}

/****** block intro ******/
.block button {
    margin-top: 2em;
}

/****** mini block intro ******/
.chartSample {
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: -20px;
}
.chartSample button {
    margin-top: 10px;
}
.chartSample.first p {
    margin-top: 0;
}

/****** response ******/
.response{
    font-size: 70px;
}
.report .question {
    font-size: 105px;
    margin-left: -0.07em;
}

.responseValue {
    display: block;
    overflow: auto;
    width: 100%;
}

.response input,
.response .responseLabel {
    margin-top: 0.5em;
    padding: 0.2em;
    float: left;
}
.response input {
    clear: left;
    border-radius: 10px;
    margin: 0.5em 0.5em 0 0;
    width: 2em;
    text-align: right;
}

.response .responseLabel {
    vertical-align: bottom;
}
.response .responseLabel svg {
    margin-top: -0.15em;
}

#next {
    margin-top: 70px;
    font-size: 40px;
}

#progressOutline {
    border: 1px solid #ccc;
    border-radius: 2px;
    height: 15px;
    width: 2.5em;
}
#progressBar {
    background: #ccc;
    height: 100%;
    width: 25%;
}

/****** cheat ******/
#cheat {
    display: none;
    font-size: 20%;
    margin: 15px;
    opacity: 0.25;
    vertical-align:bottom;
}
#cheat::after {
    content: ': ' attr(data-content);
    display: none;
    vertical-align:bottom;
}
#cheat:hover {
    opacity: 1
}
#cheat:hover::after {
    display: inline;
}

/***** finished ******/
h2 {
    font-size: 45px;
    margin-left: -4px;
    margin-bottom: 1em;
}

#resultCode {
    font-size: 100px;
}