/* ========================================================================================
   eu_buero.css: Europa-Büro Iframe und Quiz
   ======================================================================================== */

/*
 * iframe-Wechsel
 */

.iframe-scale {
  display: none; }
.iframe-adapt {
  display: block; }

@media only all and (min-width: 500px) {
  .iframe-scale {
	display: block; }
  .iframe-adapt {
	display: none; }
}

@media only all and (min-width: 590px) {
  .iframe-scale {
	display: none; }
  .iframe-adapt {
	display: block; }
}

@media only all and (min-width: 700px) {
  .iframe-scale {
	display: block; }
  .iframe-adapt {
	display: none; }
}

/* ==========================================================================
   _quiz.scss: Quiz
   ========================================================================== */
/*
 * Basis-Styles, Klassen werden ueber JS ausgetauscht
 */

 .startQuiz,
 .newQuiz,
 .nextQuestion,
 .backToQuestion,
 .questions li.question,
 .questions li.question .responses,
 .questions li.question .responses .correct,
 .questions li.question .responses .incorrect,
 .quizResults {
     display: none;
 }

 /* If response messages are disabled or only shown on quiz completion,
    nextQuestion button IS checkAnswer button - so it must be displayed */
 .nextQuestion.checkAnswer {
     display: block;
 }

 ol.questions,
 ul.answers,
 ul.responses,
 ol.questions li,
 ul.answers li,
 ul.responses li {
     list-style-type: none;
 }

 #slickQuiz {
     position: relative;
 }

 .questions {
     margin: 0 auto;
 }

 .question {
     display: block;
 }

 .button-quiz {
     font-size: 16px; /* fuer IE 9 */
     font-size: 1rem;
     padding: 5px 15px;
     padding: 5px .9375rem;
     color:#ffffff;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-decoration: none;
 }
 .button-quiz:hover {
     background-color: #0092bc;
     border: 1px solid #0092bc;
     text-decoration: none;
 }

 .start-wrapper {
     margin: 0 0 24px 0;
     margin: 0 0 1.5rem 0;
     display: block;
     text-align: center;
 }

 .new-wrapper {
     padding: 24px 0;
     padding: 1.5rem 0;
     display: block;
     text-align: center;
 }

 .back-wrapper {
     margin: 0;
     padding: 5px;
     position: absolute;
     bottom: 0;
     left: 0;
 }

 .start {
     background-color: #0092bc;
     border: 1px solid #0092bc;
 }

 .back {
     float: left;
     background-color:#b9b9b9;
     border: 1px solid #b9b9b9;
 }

 .forward {
     float: right;
     background-color:#0092bc;
     border: 1px solid #0092bc;
 }

 .new {
     background-color:#b9b9b9;
     border: 1px solid #b9b9b9;
 }

 .quizHeader  {
     text-align: center;
 }

 .quizHeader h1 {
     margin-top: 24px;
     margin-top: 1.5rem;
     margin-bottom: 48px;
     margin-bottom: 3rem;
 }

 .questionCount {
     margin-bottom: 24px;
     margin-bottom: 1.5rem;
     font-style: italic;
 }
 .questionCount span {
     font-weight: bold;
 }

 ol.questions li {
     margin-left: 0;
 }

 .questions h3 {
     margin-bottom: 24px;
     margin-bottom: 1.5rem;
 }

 ul.answers {
     margin-left: 80px;
     padding-top: 15px;
     margin-bottom: 40px;
 }

 ul.answers input{
     margin-right: 15px;
     margin-right: .9375rem;
 }

 ul.responses li {
     margin: 10px 0 20px 0;
 }

 ul.responses li p {
     padding-bottom: 15px;
 }

 ul.responses li p.accent-quiz {
     font-size: 18px; /* fuer IE 9 */
     font-size: 1.125rem;
     text-align: center;
 }

 ul.responses li.correct p span.emoticon,
 ul.responses li.incorrect p span.emoticon {
     font-weight: normal;
     font-size: 48px;
 }

 ul.responses li.correct p span {
     font-weight: bold;
     color: #0080a5;
 }

 ul.responses li.incorrect p span {
     font-weight: bold;
     color: #d70f00;
 }

 .sound {
     display: hidden;
 }

 .quizResults  {
     text-align: center;
 }

 .quizResults h2 {
     margin: 0;
     padding: 24px;
     padding: 1.5rem;
     line-height: 2em;
 }

 .quizResults h2 .counter {
     font-weight: normal;
     font-size: 32px;
 }
 .quizResultsCopy {
     margin-top: 20px;
     margin-bottom: 20px;
 }

 /* ==========================================================================
    Media queries
    ========================================================================== */

 @media only all and (min-width: 36.875em) {
     .back-wrapper {
         padding-left: 2.63157895%;
         padding-right: 2.63157895%;
         padding-top: 15px; /* fuer IE 9 */
         padding-top: .9375rem;
         padding-bottom: 15px; /* fuer IE 9 */
         padding-bottom: .9375rem;
     }
 }