@font-face {
    font-family: 'regular';
    src: url('fonts/instrumentsans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'medium';
    src: url('fonts/instrumentsans-medium-webfont.woff') format('woff');
    font-weight: medium;
    font-style: medium;
}
@font-face {
    font-family: 'bold';
    src: url('fonts/instrumentsans-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: bold;
}
@font-face {
    font-family: 'logo';
    src: url('fonts/ericaone-regular-webfont.woff') format('woff');
    font-weight: regular;
    font-style: regular;
}
body{
    margin:3em;
    margin-top:10em;
    font-family:medium;
    font-size:12.0pt;
    color:#333333;
    line-height:1.2em;
    background-color:#dae1e8;
}
div.topbar{
    display:block;
    position:fixed;
    top:0;
    left:0;
    padding:0;
    padding-top:1em;
    padding-bottom:1em;
    text-align:center;
    min-width:100vw;
    max-width:100vw;
    font-family:logo;
    font-size:2.2em;
    color: #203141;;
    background-color:#499ce9;
    box-shadow: 0 0 0.5em 0 #333333;
}
span.question{
    display:block;
    margin-top:1em;
    margin-bottom:1em;
    line-height:1.1em;
    font-family:bold;
    font-size:1.3em;
}
input[type=text], input[type=submit]{
    display:inline-block;
    font-family:regular;
    font-size:1.2em;
    color:#203141;
    padding:0;
    padding-left:1em;
    min-width:calc(100% - 4em);
    max-width:calc(100% - 4em);
    min-height:3em;
    max-height:3em;
    border:0;    
    border-radius:0.5em 0 0 0.5em;
}
input[type=submit]{
    min-width:calc(3em);
    max-width:calc(3em);
    min-height:3em;
    max-height:3em;
    padding-left:0;
    font-family:bold;
    font-size:1.2em;
    color:#203141;
    background-color:#499ce9;
    border-radius:0 0.5em 0.5em 0;
}
input[type=text]:focus{
    outline:none;
}
p, p.story_title, p.feedback_correct, p.feedback_wrong{
    display:block;
    margin:0;
    padding:0;
    margin-bottom:1em;
}
p.intro{
		font-family:bold;
}
p.story_title{
    font-family:bold;
    font-size:1.3em;
    color:#499ce9;
    text-shadow:0.05em 0.05em #666666;
}
p.feedback_correct, p.feedback_wrong{
    padding:0.5em;
    border-radius:0.5em;
    background-color:#6bd069;
}
p.feedback_wrong{
    background-color:#e0af3c;
}
p.note{
    position:relative;
    padding:1em;
    background-color:#c9ace1;
    border-radius:0.5em;
    font-size:0.9em;
}