/* 
 * All GrüneQuiz code is released under the GNU General Public License V3.
 * See COPYRIGHT.txt and LICENSE.txt.
 */


@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src:
       url('font/pt-sans-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('font/pt-sans-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
body {  
    font-family: 'PT Sans', sans-serif;
}

#top-bar, #footer {
    text-align: left;
    background: #46962b;
    position: relative;		
    width: 100% !important;
    padding: 20px 0 20px 10px;
    box-sizing: border-box;
    overflow: auto;
}

#top-bar h2 {font-size: 1.75em; font-weight: bold; float: left; display:inline-block;}

#top-bar h2#counter {float: right; margin-right: 10px; }

#footer a{
    color: #ffee00;
}

#top-inside, #footer-inside {
    width: 800px;
    margin: 0 auto;
    position: relative;
}

#page-wrap{
    width:800px;
    margin:0 auto; 
    border: 1px solid #46962b;
    border-bottom : 0;
    border-top: 0;
}


#page-inside {padding: 20px 20px;}

#page-wrap h1 {font-size: 1.5em; font-weight: bold; line-height: 1.4; margin:25px 0 5px 0;}
#page-wrap h2 {font-size: 1.75em; font-weight: bold; line-height: 1.4; margin:20px 0;}
#page-wrap h3 {font-size: 1.3em; font-weight: bold; line-height: 1.4; margin:15px 0;}
#page-wrap h4 {font-size: 1.2em; font-weight: bold; line-height: 1.4; margin:10px 0;}

#page-wrap p {margin: 10px 0; font-size: 1em; line-height: 1.4;}

#quiz label {padding: 0; display: block; }

#quiz .option {border: 4px solid white; border-radius: 4px; margin: 7px 0; padding: 8px 5px 5px 5px; overflow: auto;}
#quiz .option:hover {border-color: #AAEE88;}


#quiz.aufloesen .option.richtig {border-color: #AAEE88;}
#quiz.aufloesen .option.falsch {border-color: #CCC;}

#quiz .option { box-sizing: border-box; }
#quiz .option span {}
#quiz label span {padding-top: 3px; display: inline-block; } 
#quiz input.opt {padding-top: 3px; display: inline-block; }

#quiz span.inpu {width: 12%;  display: inline-block; float: left; }
#quiz span.antwort {font-weight: bold; font-size: 1.2em; display: block; }
#quiz span.hinweis {padding-top: 6px; font-size: 1en; display: block; }


#quiz span.labelhint { width: 85%; float: left; box-sizing: border-box;}
#quiz span.labelhint span {margin: 0; padding: 3px 0; display: inline-block;}

#quiz input {
    vertical-align:top; 
    margin-left: 10px; 
    margin-top: 7px;
}

#quiz .submit {text-align: center;}
#quiz .submit input, #aufloesung .folgefrage a {font-size: 1.5em; font-weight: bold; padding: 6px 12px; margin: 10px 0 0 0; background-color: #88CC66; border: 1px solid black; border-radius: 8px; color: #000; text-decoration:none;}
#quiz .submit input:hover, #aufloesung .folgefrage a:hover {background-color: #AAEE88;}

#quiz ol{margin:0 0 10px 20px}
#quiz ol li{margin:0 0 20px}
#quiz ol li div{padding:4px 0}

#result p.auswertung {padding: 6px 12px; border: 1px solid gray; border-radius: 4px; font-size: 1.2em;}
#result p.auswertung.richtig  {background-color: #AAEE88;}
#result p.auswertung.falsch {background-color: #CCC;}

#result p.erneut {font-size: 1.2em; font-weight: bold;}

#aufloesung ul {margin: 10px 20px;}
#aufloesung ul li {line-height: 1.8;}

#aufloesung img {width:100%}
#aufloesung figcaption {font-size: 0.75em; text-align: center;}

#aufloesung .folgefrage {padding: 15px 0; text-align: center; }

.clearfix {
  overflow: auto;
}

@media only screen and (max-width: 800px) {
		
     #top-inside, #footer-inside, #page-wrap	{
        width: 100% !important;
        border: 0;
    }

}