a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:hover, a:active { outline: 0; }

@font-face {
    font-family: 'KGJuneBugRegular';
    src: url('/_fonts/kgjunebug-webfont.eot');
    src: url('/_fonts/kgjunebug-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_fonts/kgjunebug-webfont.woff') format('woff'),
         url('/_fonts/kgjunebug-webfont.ttf') format('truetype'),
         url('/_fonts/kgjunebug-webfont.svg#KGJuneBugRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
.mobile { display : none; }

.promo_sommetjes {position: absolute;width: 200px;height: 200px;display: flex;justify-content: center;align-items: center; left: -10px;top: -10px; }
/*
.promo_sommetjes .ster { -webkit-animation: rotating 65s linear infinite;
    -moz-animation: rotating 65s linear infinite;
    -ms-animation: rotating 65s linear infinite;
    -o-animation: rotating 65s linear infinite;
    animation: rotating 65s linear infinite;
    }
.promo_sommetjes:hover .ster {  -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -ms-animation-duration:  5s;
    -o-animation-duration:  5s;
    animation-duration:  5s;
    }
*/
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        }
    }
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        }
    }

.btn-deeltafels { text-decoration: none; font-family : KGJuneBugRegular, "helvetica neue", helvetica, arial, sans-serif; font-size : 26px; color : #868686 !important;  margin: 0 auto; display : block;  }
.btn-deeltafels:hover { color: #DAD024 !important }
.btn-deeltafels::before { content: ""; margin: 0 auto 20px auto; display : block; background-image : url('/_images/site/deeltafel_strip.png'); width: 126px; height: 65px }
.btn-deeltafels:hover::before { background-position : bottom; }

.keertafels { margin-top : 40px; text-align: center;  margin-bottom : 40px;}
.btn-keertafels { text-decoration: none; font-family : KGJuneBugRegular, "helvetica neue", helvetica, arial, sans-serif; font-size : 26px; color : #868686 !important;  margin: 0 auto; display : block;  }
.btn-keertafels:hover { color: #DAD024 !important }
.btn-keertafels::before { content: ""; margin: 0 auto 20px auto; display : block; background-image : url('/_images/site/keertafels_strip.png'); width: 79px; height: 76px }
.btn-keertafels:hover::before { background-position : bottom; }

.button-right { float: right }
.button-left { float: left }


header { font-family : KGJuneBugRegular, "helvetica neue", helvetica, arial, sans-serif; font-size : 30px; color : #707070; text-align: center; padding-top : 29px; padding-bottom : 38px; }

.tafel1 { background-position : 0 0  }
.tafel1hover { background-position : 0 -161px !important; }
#tafel2 { background-position : -113px 0; margin-bottom : 48px; }
.tafel2hover { background-position : -113px -161px !important; }
#tafel3 { background-position : -226px 0; margin-bottom : 48px; }
.tafel3hover { background-position : -226px -161px !important; }
#tafel4 { background-position : -339px 0; margin-bottom : 48px; }
.tafel4hover { background-position : -339px -161px !important; }
#tafel5 { background-position : -452px 0; margin-bottom : 48px; }
.tafel5hover { background-position : -452px -161px !important; }
#tafel6 { background-position : -565px 0; margin-bottom : 48px; }
.tafel6hover { background-position : -565px -161px !important; }
#tafel7 { background-position : -678px 0; margin-bottom : 54px; }
.tafel7hover { background-position : -678px -161px !important; }
#tafel8 { background-position : -791px 0; margin-bottom : 54px; }
.tafel8hover { background-position : -791px -161px !important; }
#tafel9 { background-position : -904px 0; margin-bottom : 54px; }
.tafel9hover { background-position : -904px -161px !important; }
#tafel10 { background-position : -1017px 0; margin-bottom : 54px; }
.tafel10hover { background-position : -1017px -161px !important; }
#tafel11 { background-position : -1130px 0; margin-bottom : 54px; }
.tafel11hover { background-position : -1130px -161px !important; }
#tafel12 { background-position : -1243px 0; margin-bottom : 54px; }
.tafel12hover { background-position : -1243px -161px !important; }

.tafel {  background-image : url("/_images/site/home_strip.png");  }
.deeltafel {  background-image : url("/_images/site/home_strip_deeltafels.png");  }
/*
.tafelhover { background-position : top left; margin-right : 13px; background-image : url("/_images/site/home_strip.png"); display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; width : 113px; height : 161px; }
*/
.einde { margin-right : 0 !important; }

#button_start_nl { background-image : url("/_images/site/button_start_10som.png"); width : 218px; height : 35px; float : right; position : relative; right : -9px; }
#button_start_nl:hover { background-position : 0 -35px; }
#button_start_en { background-image : url("/_images/site/button_start_10som_en.png"); width : 218px; height : 35px; float : right; position : relative; right : -9px; }
#button_start_en:hover { background-position : 0 -35px; }

#button_start_tijd_nl { background-image : url("/_images/site/button_start_2min.png"); width : 218px; height : 35px; float : left; position : relative; right : -9px; }
#button_start_tijd_nl:hover { background-position : 0 -35px; }
#button_start_tijd_en { background-image : url("/_images/site/button_start_2min_en.png"); width : 218px; height : 35px; float : left; position : relative; right : -9px; }
#button_start_tijd_en:hover { background-position : 0 -35px; }

#footer { width : 744px; }
#footer TD { vertical-align: bottom; padding-bottom : 13px; font-family : verdana, "helvetica neue", helvetica, arial, sans-serif; font-size : 11px; color : #8c8c8c; }
#footer TH { vertical-align: bottom; font-family : verdana, "helvetica neue", helvetica, arial, sans-serif;; font-size : 11px; color : #8c8c8c; }

#indicator { list-style : none; padding :0; width : 380px; margin : 0 auto; }
#indicator LI { float : left; background-image : url("/_images/site/score_strip.png"); background-repeat : no-repeat; width : 20px; height : 26px; margin-right : 18px;  }
#indicator LI.done { background-position : 0 -26px; }
#indicator LI.fout { background-position : 0 -52px; }

#button_volgende_nl { background-image : url("/_images/site/button_volgende.png"); width : 141px; height : 35px; float : right; position : relative; right : -9px; }
#button_volgende_nl:hover { background-position : 0px -35px; }

#button_volgende_en { background-image : url("/_images/site/button_volgende_en.png"); width : 141px; height : 35px; float : right; position : relative; right : -9px; }
#button_volgende_en:hover { background-position : 0px -35px; }

#tafelgroot { background-image : url("/_images/site/antwoordtafels_strip.png"); width : 264px; height : 299px; display : block; margin: 0 auto; margin-top : 60px; }
#som { font-family : KGJuneBugRegular, "helvetica neue", helvetica, arial, sans-serif;; font-size : 85px; width : 402px; position : relative; left: -217px; top : 7px; text-align: right; letter-spacing: 10px; }
#uitkomstcontainer { float : right;  height : 74px; overflow : hidden; width : 114px; }
#uitkomst { width : 114px; font-family : KGJuneBugRegular, "helvetica neue", helvetica, arial, sans-serif;; font-size : 85px; margin : 0; padding : 0; vertical-align: bottom; border : 0px solid #FFF; text-align: center; }

.tafelgroot1 { background-position : 0 0; color: #4f2833; }
.tafelgroot2 #uitkomst { color: #4f2833; }

.tafelgroot2 { background-position : -264px 0; color: #5a98e2; }
.tafelgroot2 #uitkomst { color: #5a98e2; }

.tafelgroot3 { background-position : -528px 0; color: #c5771c; }
.tafelgroot3 #uitkomst { color: #c5771c; }

.tafelgroot4 { background-position : -792px 0; color: #186c31; }
.tafelgroot4 #uitkomst { color: #186c31; }

.tafelgroot5 { background-position : -1056px 0; color: #73aea8; }
.tafelgroot5 #uitkomst { color: #73aea8; }

.tafelgroot6 { background-position : -1320px 0; color: #dad024; }
.tafelgroot6 #uitkomst { color: #dad024; }

.tafelgroot7 { background-position : -1584px 0; color: #ff6e6e; }
.tafelgroot7 #uitkomst { color: #ff6e6e; }

.tafelgroot8 { background-position : -1848px 0; color: #ff6e6e; }
.tafelgroot8 #uitkomst { color: #ff6e6e; }

.tafelgroot9 { background-position : -2112px 0; color: #c5771c; }
.tafelgroot9 #uitkomst { color: #c5771c; }

.tafelgroot10 { background-position : -2376px 0; color: #186c31; }
.tafelgroot10 #uitkomst { color: #186c31; }

.tafelgroot11 { background-position : -2640px 0; color: #869e3e; }
.tafelgroot11 #uitkomst { color: #869e3e; }

.tafelgroot12 { background-position : -2904px 0; color: #cb3027; }
.tafelgroot12 #uitkomst { color: #cb3027; }

#button_home { background-image : url(/_images/site/menu_strip.png); width : 79px; height: 81px; }
#button_home:hover { background-position : 0px -81px; }

#button_nogeens_nl{ background-image : url(/_images/site/button_nogeens.png); width : 141px; height : 35px; float : right; position : relative; right : -9px; }
#button_nogeens_nl:hover { background-position : 0px -35px; }

#button_nogeens_en{ background-image : url(/_images/site/button_nogeens_en.png); width : 141px; height : 35px; float : right; position : relative; right : -9px; }
#button_nogeens_en:hover { background-position : 0px -35px; }

#beloning { background-image : url(/_images/site/beloning.png); height : 323px; width : 247px; margin-top : 10px; margin-left : auto; margin-right : auto; }
#geenbeloning { font-family : KGJuneBugRegular,"helvetica neue", helvetica, arial, sans-serif;; font-size : 48px;  margin-bottom : 30px; width : 447px; margin-top : 10px; margin-left : auto; margin-right : auto; }
#beloningtekst { font-family : KGJuneBugRegular,"helvetica neue", helvetica, arial, sans-serif;; font-size : 48px; width : 317px; position : relative; left : -250px; top : 140px; text-align : right; }
#beloningtekstperfect { font-family : KGJuneBugRegular,"helvetica neue", helvetica, arial, sans-serif;; font-size : 48px; width : 277px; position : relative; left : -250px; top : 140px; text-align : right; }

#beloningtijd { font-family : KGJuneBugRegular,"helvetica neue", helvetica, arial, sans-serif;; font-size : 48px; width : 500px; margin-top : 0px; margin-left : auto; margin-right : auto; color: #5a98e2;  text-align: left}
#beloningtijd .aantal, #beloningtijd .score { color: #c1771e; }

.somoverzicht { text-align: left; font-family : KGJuneBugRegular,"helvetica neue", helvetica, arial, sans-serif;; font-size : 48px; color: #5a98e2; }
.somoverzicht .klein { font-size: 24px; }
.somoverzicht .goed { color : #86a03d; }
.somoverzicht .fout { color : #fe6b73; }
.somoverzicht th { font-size: 24px; font-weight: normal; text-align: left;}
.somoverzicht table { width : 100%; }
.somoverzicht table td, .somoverzicht table th { width : 50%; }
.foutlijst { width : 100%; height: 270px; overflow: auto; margin-bottom : 20px; background-color: #f3e4d2; margin-left: -20px; padding-left: 16px; padding-top: 15px; }
.foutlijst td { vertical-align: top }

.beloning0 { color : #5a98e2 !important; }
.beloning0 .score { color : #cb3027 !important; }
.beloning1 { color : #ff6e6e !important; }
.beloning1 .score { color : #4f2833 !important; }
.beloning2 { color : #869e3e !important; }
.beloning2 .score { color : #c5771c !important; }
.beloning3 { color : #73aea8 !important; }
.beloning3 .score { color : #dad024 !important; }
.beloning4 { color : #186c31 !important; }
.beloning4 .score { color : #ff6e6e !important; }
.beloning5 { color : #4f2833 !important; }
.beloning5 .score { color : #5a98e2 !important; }

.beloning6 { background-position : 0 0; }
.beloning6 #beloningtekst { color : #dad024 !important; }
.beloning7 { background-position : -247px 0; }
.beloning7 #beloningtekst { color : #186c31 !important; }
.beloning8 { background-position : -494px 0; }
.beloning8 #beloningtekst { color : #73aea8  !important; }
.beloning9 { background-position : -741px 0; }
.beloning9 #beloningtekst { color : #c5771c !important; }
.beloning10 { background-position : -988px 0; }
.beloning10 #beloningtekst { color : #5a98e2 !important; }

.error { color : red; }

#tijdindicator { text-align: center; padding-top : 29px; padding-bottom : 38px; }

.meter { margin : 0 auto; height: 20px;  /* Can be anything */ position: relative; background: #b7b7b7; width : 360px; border-radius: 14px; overflow: hidden; }
.meter > span { display: block; height: 100%; background-color: #106d65; position: relative; overflow: hidden; }
.textcenter { text-align: center}

#durfjij { position : fixed; top: 0; left: 0; }
#topo { position : fixed; top: 20px; left: 20px; }

input[type="number"]::-webkit-outer-spin-button { display: none; }
input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* ADMIN */
#admindiv { background-color:#eeeeee; filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; position:absolute; border:1px solid #000; width : 250px;top : 10px; right : 10px; z-index: 1000; }
#admindiv .header { padding:2px; background-color:#e32322; color:#FFF; font-weight:bold; background-image : url(/_images/generic/sitemanager.png); background-repeat : no-repeat; background-position : 232px 0px; height : 15px;border-bottom : 1px solid #000; }
#admindiv .header SPAN A { color:#FFF; font-weight:bold; text-decoration : none; }
#admindiv .body { padding:4px; }
#admindiv .body A { color : #000; font-weight : bold; }
#admindiv .body LI { list-style: none; }



/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* ==|== media queries ====================================================== */

@media only screen and (max-width: 480px) {

}

@media only screen and (max-width: 960px) {
    .mobile { display : block; }
    #topo { display : none }
    .promo_sommetjes { display : none }
    .tafel { float : none; display: block }


    #main { width : 100%; }
    #spacer { display : none; }
    #container { width : 100%; margin : 0 auto; }
    #button_start_nl, #button_start_tijd_nl, #button_start_en, #button_start_tijd_en  { float : none; position : relative; margin : 0 auto 20px auto; clear: both }
    #footer { display : none; }
    #indicator { text-align: center; list-style : none; padding :0; margin : 0; width : 100%; margin : 0 auto; }
    #indicator LI { display : inline-block; margin-right : 0px; float : none; }
    #tafelgroot { background-image : url("/_images/site/antwoordtafels_strip.png"); width : 264px; height : 299px; display : block; margin: 0 auto; margin-top : 100px; position : relative; }
    #som { font-size : 85px; width : 100%; position : relative; left: 0px; top : -90px; text-align: center; letter-spacing: 10px; }
    #uitkomstcontainer { clear: both; position: relative; left: -47px; top: -7px;; height : 74px; overflow : hidden; width : 180px; }
    #uitkomst { width : 114px; font-family : KGJuneBugRegular,"helvetica neue", helvetica, arial, sans-serif;; font-size : 85px; margin : 0; padding : 0; vertical-align: bottom; border : 0px solid #FFF; text-align: center; }
    #button_volgende_en, #button_volgende_nl { float : right; position : relative; right : 10px; }
    #button_nogeens_nl, #button_nogeens_en { position : relative; right : 10px; }

    #beloning { height : 323px; width : 247px; margin-top : 0px; margin-left : auto; margin-right : auto; }
    #geenbeloning {  height : 323px; width : 80%; margin-top : 0px; margin-left : auto; margin-right : auto;  text-align : center; }
    #beloningtekst { width : 100%; position : relative; left : 0px; top : -50px; text-align : center; }
    #beloningtekstperfect { width : 100%; position : relative; left : 0px; top : -50px; text-align : center; }
    #beloningtijd { width : 80%; margin-top : 0px; margin-left : auto; margin-right : auto; color: #5a98e2;  text-align: center}
    #beloningtijd .aantal, #beloningtijd .score { color: #c1771e; }
    .somoverzicht { width : 90%; margin : 0 auto; }
    .somoverzicht .fout { color : #fe6b73; }
    .somoverzicht th { font-size: 24px; font-weight: normal; text-align: left; vertical-align: top; }
    .somoverzicht table { width : 100%; }
    .somoverzicht table td, .somoverzicht table th { width : 50%; font-size:24px; }
    .foutlijst { width : 100%; height: 270px; overflow: auto; margin-bottom : 20px; background-color: #f3e4d2; margin-left: 0px; padding-left: 5px; padding-top: 15px;; }
    table.header th { padding-left: 5px }
    #button_home { margin-left: 20px; margin-bottom : 20px; }
    .meter {  width : 90%; border-radius: 14px; overflow: hidden; }
    .meter > span { display: block; height: 100%; background-color: #106d65; position: relative; overflow: hidden; }
}



/* ==|== print styles ======================================================= */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}