/**
 * KLEUREN HUISSTIJL:
 * 
 * oranje:      #EE9900
 * groen:       #BBCC00
 * fuchsia:     #CC0077
 * blauw:       #00AACC
 * lichtgrijs:  #DDDDDD
 * middengrijs: #AAAAAA
 * donkergrijs: #777777
 * zwart:       #000000
 */

@import "fonts/Calibri/stylesheet.css";

@import "pages.css";
@import "slide.css";

@media screen {

    body {
        font-family: 'Calibri', sans-serif;
        font-size: 16px;
        background: url(images/joke.png) no-repeat center 40%;
        background-size: 100em;
    }
    
    
    /* START */
    #start {
        cursor: pointer;
    }
    #start hgroup {
        text-align: center;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50em;
    }
    #start h1,
    #start h2,
    #start h3 {
        display: table;
        margin: 0 auto;
        padding: .1em .5em;
    }
    #start h1 {
        font-size: 4.5em;
        color: white;
        background-color: #00AACC;
        transform: rotate(-2deg);
    }
    #start h2 {
        font-size: 3em;
        color: #00AACC;
        background-color: white;
    }
    #start h3 {
        font-size: 1.5em;
        margin-top: 5em;
        color: #00AACC;
        background-color: white;
    }
    
    #questions > header,
    #results > header {
        top: 2em;
        left: 2em;
        right: 2em;
        height: 8em;
        z-index: 0;
        background: url(images/Logo_zb_240.png) no-repeat top right;
        background-size: 15em;
    }
    #questions > footer,
    #results > footer {
        height: 4em;
        z-index: 2;
        text-align: right;
    }
    
    
    #questions > .page,
    #results > .page {
        background-color: rgba(255, 255, 255, .5);
    }
    #questions > .page > div,
    #results > .page > div {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 45em;
        height: 30em;
        margin: -15em 0 0 -25em;
    }
    #questions > .page h2,
    #results > .page h2 {
        display: inline-block;
        color: #fff;
        background-color: #00AACC;
        font-size: 2em;
        font-weight: normal;
        padding: .2em;
        line-height: 1em;
        margin: 0;
        border: solid 6px #777;
    }
    #questions > .page .voortgang{
        background-color: #777;
        color: white;
        float: left;
        padding: 5px;
        margin: 0;
        }
    button.next, footer a.next {
        padding: .2em 1em;
        margin: .2em 2em;
        border: none;
        font-family: 'Calibri', sans-serif;
        font-size: 1.5em;
        font-weight: bold;
        color: #00AACC;
        background-color: white;
        outline: none;
    }
    button.next:hover{
        cursor: pointer;
    }
    #warning{
        display: none;
        padding: .2em 1em;
        margin: .2em;
        color: white;
        background-color: #CC0077;
        font-size: 1.5em;
    }

    /* VRAGEN */
    #questions > .page ol {
        counter-reset: q;
        margin: 0;
        padding: 0 2em;
    }
    #questions > .page li {
        font-size: 1.4em;
        list-style: none;
        counter-increment: q;
        position: relative;
        margin: 2em 0 3em;
    }
    #questions > .page label {
        display: inline-block;
        cursor: pointer;
    }
    
    
    #questions > .page input {
        position: fixed;
        left: -1000em;
    }
    #questions > .page span {
        display: inline-block;
        position: relative;
        padding: .6em .8em;
        line-height: 1em;
        color: white;
        background-color: #00AACC;
    }
    #questions > .page span:before {
        content: counter(q, upper-latin);
        display: inline-block;
        position: absolute;
        left: -.75em;
        bottom: -.75em;
        z-index: 1000;
        width: 1.2em;
        height: 1.2em;
        line-height: 1.2em;
        text-align: center;
        font-weight: bold;
        font-size: 1.5em;
        color: #00AACC;
        background-color: #777;
    }
    #questions > .page input:checked + span {
        outline: .14em solid  #777;
        outline: .25em solid  #777;
    }
    
    
    /* RESULTATEN */
    #results {
    }
    #results > header {
    }
    #results > .page > div {
        overflow: auto
    }
    #results > .page p {
        padding: .6em .8em;
        line-height: 1em;
        font-size: 1.4em;
        color: white;
        background-color: #00AACC;
    }
    #results #result-positive,
    #results #result-negative {
        width: 45%;
    }
    #results #result-positive {
        float: left;
    }
    #results #result-negative {
        float: right;
    }
    
    
    /* EINDE */
    #end {
        /*font-size: 2.5em;*/
        font-weight: normal;
        color: white;
        background-color: #00AACC;
        /*background-image: url(images/Logo_320.png);*/
        background-repeat: no-repeat;
        background-position: 3em 3em;
        background-size: 8em;
        
        text-align: left;
        position: absolute;
        top: 2%;
        left: 50%;
        width: 50em;
       /* height: 10em;*/
        margin: 0 0 0 -25em;
        overflow:auto;
        height:94%;
        padding-bottom:20px;
    }
    #end div.feedback{
        margin:15px;
    }
    #end div.feedback .vraag{
        margin:15px 0;
        font-weight: bold;
        color: #00AACC;
    }
    #end div.feedback .antwoord{
        margin-left:10px;
    }    
    #end div.feedback .feedback{
        padding-left:10px;
        padding-top:10px;
    }
    #end div.feedback .feedback > span{
        font-weight: bold;
        font-size: 18px;
    }
    #end div.feedback .feedback .keywords{
        
    }
    #info {
        position: absolute;
        left: 3em;
        bottom: 3em;
    }
    #info a, .page a {
        color: white;
    } 
    .page a{
        color: #EE9900;
        text-decoration:none;
    }
    #end a.next{
        background-color: white;
        padding: 5px;
        margin: 15px;
        color: #00AACC;
    }
}

@media only screen and (orientation: portrait) {

    body {
        background-position: 30% 40%;
    }
    
    body {
        background-position: 33% 40%;
    }
    
    #start {
        font-size: 0.8em;
    }
    
    #questions > .page > div,
    #results > .page > div {
        width: 38em;
        height: 38em;
        margin: -19em 0 0 -19em;
    }
    
}

@media only screen and (max-width: 600px) and (orientation: portrait),
       only screen and (max-width: 800px) and (orientation: landscape) {

    body {
        font-size: 12px;
    }

}

@media only screen and (max-width: 360px) and (orientation: portrait),
       only screen and (max-width: 640px) and (orientation: landscape) {

    body {
        font-size: 9px;
    }

}

@media only screen and (max-width: 320px) and (orientation: portrait),
       only screen and (max-width: 480px) and (orientation: landscape) {

    body {
        font-size: 8px;
    }

}