/* ========================================================================================
   stadtportal.css: CSS fuer Stadtportal
   ======================================================================================== */


/*
 * Rubrikfarben
 */

.rubric-1 {
    background-image: url(../images/stadtportal/bg_rubric_1.png); }

.rubric-2 {
    background-image: url(../images/stadtportal/bg_rubric_2.png); }

.rubric-3 {
    background-image: url(../images/stadtportal/bg_rubric_3.png); }

.rubric-4 {
    background-image: url(../images/stadtportal/bg_rubric_4.png); }

.rubric-5 {
    background-image: url(../images/stadtportal/bg_rubric_5.png); }

.rubric-0, .accent-rubric-0 {
    background-color: #464646; }
  
.rubric-1, .accent-rubric-1 {
    background-color: #8e026c; }

.rubric-2, .accent-rubric-2 {
    background-color: #e97319; }

.rubric-3, .accent-rubric-3 {
    background-color: #6a9519; }

.rubric-4, .accent-rubric-4 {
    background-color: #0092bc; }

.rubric-5, .accent-rubric-5 {
    background-color: #8f8f8f; }

.sos {
    background-color: #d70f00; }

/*
 * Akzentfarbe Hintergruende
 */

.header,
.accent,
.az-active:hover,
.az-choosen,
#ui-datepicker-div  td .ui-state-active,
#ui-datepicker-div  td .ui-state-hover {
    background: #464646;
}

.list-az li.aktiv {
    background-color: #464646; }
 
.list-az li a:hover {
    background-color: #464646; }


/*
 * Akzentfarbe Textlinks
 */

a,
.accent-text,
.carousel-btn:hover,
.service-login:hover,
.service-login-active,
.service-menu-link:hover,
.service-menu-link-active:hover,
.main-menu-link:hover,
.main-menu-link-active,
.main-menu-link-active:hover,
.box-linked .link,
.box-linked .headline,
.az-active,
.accordion dt,
.expand h4,
#binding .ui-widget-header a,
#binding .ui-accordion h3 {
    color: #0080a5;
}

/*
 * Sondermodule Stadtportal 
 */

.sos-iframe {
    border: none; 
    padding: 0px; 
    margin: 0px;
    width: 100%;
    float: left;
}

/*
 * Tourist Hinweis
 */

 .c-notice--tourist__wrapper {
    display: table;
}

.c-notice--tourist__a {
    display: block;
    width: 16.875rem;
    margin: 0 auto;
    color: #0080a5;
    align-items: center;
    justify-content: center;
}

.c-notice--tourist__a:hover,
.c-notice--tourist__a:hover h2,
.c-notice--tourist__a:hover .c-notice--tourist__icon {
    text-decoration: none;
	color: #009eca;
}

.c-notice--tourist__a h2 {
    color: #0080a5;
    text-align: right;
}
.c-notice--tourist__a h2:hover {
    text-decoration: none;
	color: #009eca;
}

.c-notice--tourist__icon {
    padding-top: .313rem;
    padding-bottom: .313rem;
    display: table-cell;
    border-top: 1px solid #0080a5;
    border-bottom: 1px solid #0080a5;
}

..c-notice--tourist__icon:hover {
	color: #009eca;
}

.c-notice--tourist__text {
    padding-top: .313rem;
    padding-bottom: .313rem;
    display: table-cell;
    border-top: 1px solid #0080a5;
    border-bottom: 1px solid #0080a5;
    padding-left: .938rem;
    vertical-align: middle;
}

/* ==========================================================================
   _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;
    }
}