@charset "UTF-8";

/**
 * 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/blendedlearningbg4.jpg) repeat center 95%;
        background-size: 75em;
    }
    
    
    /* START */
    #start {
        cursor: pointer;
    }
    #start hgroup {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50em;
        height: 10em;
        margin: 0 0 0 -25em;
    }
    #start h1,
    #start h2 {
        display: inline-block;
        position: relative;
        margin: 0;
        padding: 0 .2em;
	}
    #start h1 {
		font-size: 4.5em;
		color: white;
		background-color: #00AACC;
        transform: rotate(-2deg);
        -webkit-transform: rotate(-2deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9993908270190958, M12=0.03489949670250033, M21=-0.03489949670250033, M22=0.9993908270190958, SizingMethod='auto expand')";
        margin-top: -7px\9;
        margin-bottom: 7px\9;
	}
    #start h2 {
		font-size: 3em;
		color: #00AACC;
		background-color: white;
	}
    
    #questions > header,
    #results > header {
        top: 2em;
        left: 2em;
        right: 2em;
        height: 8em;
        z-index: 0;
        background: url(images/ARTEV_lo_zwart_zonder_baseline_RGB.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);
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF);
    }
    #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;
        margin: 0 10% 0 0;
        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;
		margin: 0px 10% 0px 0px;
		color: #CC0077;
	}

    /* 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 p {
        padding: .6em .8em;
        line-height: 1em;
		font-size: 1.4em;
		color: white;
		background-color: #00AACC;
    }
    
    
    /* 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.feedbackblok{
		margin:15px;	
	}
	#end div.feedbackblok .vraag{
		margin:15px 0;	
		font-weight: bold;
		color: #00AACC;
	}
	#end div.feedbackblok .antwoord{
		margin-left:10px;	
	}	
	#end div.feedbackblok .feedback{
		padding-left:10px;	
		padding-top:10px;
	}
	#end div.feedbackblok .feedback > span{
		font-weight: bold;
		font-size: 18px;
	}
	#end div.feedbackblok .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;
	}
}

/**
 * Fix voor Firefox outline bug
 * {@link https://bugzilla.mozilla.org/show_bug.cgi?id=480888}
 */
@-moz-document url-prefix() {
    #questions > .page input:checked + span {
        outline: none;
        box-shadow: 0 0 0 .14em  #777;
        box-shadow: 0 0 0 .25em  #777;
    }
}

@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;
    }

}