/**
 * games_html5_style.css - CSS fuer Spiele in HTML(5)
 *
 * 1.0.0        2020-11-11  Gerhard Loosch
 *              - Anpassungen fuer Auslagerung auf HanisauLand-Forever.de aus 1.14.0 aus cB2-HanisauLand.
 *
 * @package     contentBLUE-HanisauLand-Forever
 * @subpackage  Frontend
 * @author      Gehard Loosch <loosch@glamus.de>
 */


html, body {
    height: 100%;
    overflow: hidden;
}

.manual-image {
    height: 84.20348058902276%;
    left: 60%;
    position: absolute;
    top: 7.89825970548862%;
    display: inline;
}

.variants-image {
    height: 84.20348058902276%;
    left: 60%;
    position: absolute;
    top: 7.89825970548862%;
    display: inline;
}

.question-image {
    height: 84.20348058902276%;
    left: 60%;
    position: absolute;
    top: 7.89825970548862%;
    display: inline;
}

.manual-text {
    width: 50%;
    line-height: 1.5;
    font-size: 1.5em;
    position: absolute;
    top: 8.56760374832664%;
    left: 7.009760425909494%;
}

.variants-text {
    width: 50%;
    line-height: 1.5;
    font-size: 1.5em;
    position: absolute;
    top: 8.56760374832664%;
    left: 7.009760425909494%;
}

.table-question {
    width: 50%;
    height: 84.20348058902276%;
    position: absolute;
    left: 6.211180124223602%;
    top: 7.89825970548862%
}

@media (max-width: 650px) {
    html {
        font-size: 8px;
    }

    .manual-image {
        display: none;
    }

    .variants-image {
        display: none;
    }

    .question-image {
        display: none;
    }

    .manual-text {
        width: 84.56078083407276%;
        line-height: 1.5;
        font-size: 1.5em;
        position: absolute;
        top: 8.56760374832664%;
        left: 7.009760425909494%;
    }

    .variants-text {
        width: 84.56078083407276%;
        line-height: 1.5;
        font-size: 1.5em;
        position: absolute;
        top: 8.56760374832664%;
        left: 7.009760425909494%;
    }

    .table-question {
        width: 87.5%;
        height: 84.20348058902276%;
        position: absolute;
        left: 6.211180124223602%;
        top: 7.89825970548862%
    }
}

@media (min-width: 651px) {
    html {
        font-size: 9px;
    }

    .manual-image {
        display: none;
    }

    .variants-image {
        display: none;
    }

    .question-image {
        display: none;
    }

    .manual-text {
        width: 84.56078083407276%;
        line-height: 1.5;
        font-size: 1.5em;
        position: absolute;
        top: 8.56760374832664%;
        left: 7.009760425909494%;
    }

    .variants-text {
        width: 84.56078083407276%;
        line-height: 1.5;
        font-size: 1.5em;
        position: absolute;
        top: 8.56760374832664%;
        left: 7.009760425909494%;
    }

    .table-question {
        width: 87.5%;
        height: 84.20348058902276%;
        position: absolute;
        left: 6.211180124223602%;
        top: 7.89825970548862%
    }
}

@media (min-width: 800px) {
    html {
        font-size: 10px;
    }

    .manual-image {
        height: 84.20348058902276%;
        left: 60%;
        position: absolute;
        top: 7.89825970548862%;
        display: inline;
    }

    .variants-image {
        height: 84.20348058902276%;
        left: 60%;
        position: absolute;
        top: 7.89825970548862%;
        display: inline;
    }

    .question-image {
        height: 84.20348058902276%;
        left: 60%;
        position: absolute;
        top: 7.89825970548862%;
        display: inline;
    }

    .manual-text {
        width: 50%;
        line-height: 1.5;
        font-size: 1.5em;
        position: absolute;
        top: 8.56760374832664%;
        left: 7.009760425909494%;
    }

    .variants-text {
        width: 50%;
        line-height: 1.5;
        font-size: 1.5em;
        position: absolute;
        top: 8.56760374832664%;
        left: 7.009760425909494%;
    }

    .table-question {
        width: 50%;
        height: 84.20348058902276%;
        position: absolute;
        left: 6.211180124223602%;
        top: 7.89825970548862%
    }
}

.gelb .header {
    height: 9.259%;
    position: relative;
    background: url(/img/logo.png) 96% 25% / auto 69% no-repeat, url(/img/header_yellow.png) 0% 0 / auto 100% repeat-x;
    -pie-background: url(/img/logo.png) 96% 25% / auto 69% no-repeat, url(/img/header_yellow.png) 0% 0 / auto 100% repeat-x;
    behavior: url(/js/PIE.htc);
    background-position: 96% 25%, 0% 0%;
    background-size: auto 69%, auto 100%;
    background-repeat: no-repeat, repeat-x;
    background-image: url(/img/logo.png), url(/img/header_yellow.png);
}

/*.orange .header {
    height: 9.259%;
    position: relative;
    background: url(/img/games_html5/logo.png) 96% 25% / auto 69% no-repeat, url(/img/games_html5/header_orange.png) 0% 0 / auto 100% repeat-x;
    -pie-background: url(/img/games_html5/logo.png) 96% 25% / auto 69% no-repeat, url(/img/games_html5/header_orange.png) 0% 0 / auto 100% repeat-x;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-position: 96% 25%, 0% 0%;
    background-size: auto 69%, auto 100%;
    background-repeat: no-repeat, repeat-x;
    background-image: url(/img/games_html5/logo.png), url(/img/games_html5/header_orange.png);
}

.blau .header {
    height: 9.259%;
    position: relative;
    background: url(/img/games_html5/logo.png) 96% 25% / auto 69% no-repeat, url(/img/games_html5/header_blue.png) 0% 0 / auto 100% repeat-x;
    -pie-background: url(/img/games_html5/logo.png) 96% 25% / auto 69% no-repeat, url(/img/games_html5/header_blue.png) 0% 0 / auto 100% repeat-x;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-position: 96% 25%, 0% 0%;
    background-size: auto 69%, auto 100%;
    background-repeat: no-repeat, repeat-x;
    background-image: url(/img/games_html5/logo.png), url(/img/games_html5/header_blue.png);
}
*/
.gelb {
    height: 100%;
    background: url(/img/tile_feet_yellow.png) 0% 0% / 15.625% auto repeat;
    -pie-background: url(/img/tile_feet_yellow.png) 0% 0% / 15.625% auto repeat;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/tile_feet_yellow.png);
    background-position: 0% 0%;
    background-size: 15.625% auto;
    background-repeat: repeat;
}
/*
.orange {
    height: 100%;
    background: url(/img/games_html5/tile_glasses_orange.png) 0% 0% / 15.625% auto repeat;
    -pie-background: url(/img/games_html5/tile_glasses_orange.png) 0% 0% / 15.625% auto repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/tile_glasses_orange.png);
    background-position: 0% 0%;
    background-size: 15.625% auto;
    background-repeat: repeat;
}

.blau {
    height: 100%;
    background: url(/img/games_html5/tile_noses_blue_dark.png) 0% 0% / 15.625% auto repeat;
    -pie-background: url(/img/games_html5/tile_noses_blue_dark.png) 0% 0% / 15.625% auto repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/tile_noses_blue_dark.png);
    background-position: 0% 0%;
    background-size: 15.625% auto;
    background-repeat: repeat;
}
*/
.html-5-game-container .content {
    height: 81.482%;
    position: relative;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.gelb .footer {
    height: 9.259%;
    background: url(/img/footer_yellow.png) 0% 0% / auto 100% repeat-x;
    -pie-background: url(/img/footer_yellow.png) 0% 0% / auto 100% repeat-x;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/footer_yellow.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
}
/*
.orange .footer {
    height: 9.259%;
    background: url(/img/games_html5/footer_orange.png) 0% 0% / auto 100% repeat-x;
    -pie-background: url(/img/games_html5/footer_orange.png) 0% 0% / auto 100% repeat-x;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/footer_orange.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.blau .footer {
    height: 9.259%;
    background: url(/img/games_html5/footer_blue.png) 0% 0% / auto 100% repeat-x;
    -pie-background: url(/img/games_html5/footer_blue.png) 0% 0% / auto 100% repeat-x;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/footer_blue.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
}
*/
.button-container {
    height: 100%;
}

.button {
    cursor: pointer;
    height: 74%;
    width: 21.95121951219512%;
    top: 23%;
    position: relative;
    float: left;
    margin-left: 2.439024390243902%;
    background: none 0% 0% / 100% 100% no-repeat;
    -pie-background: none 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/PIE.htc);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.highscore {
    background-image: url(/img/button_highscore_off.png);
}

.highscore:hover {
    background-image: url(/img/button_highscore_on.png);
}

.retry {
    background-image: url(/img/button_retry_off.png);
}

.retry:hover {
    background-image: url(/img/button_retry_on.png);
}

.title-image {
    position: relative;
    left: 1%;
    height: 66%;
    top: 10%;
    max-width: 100%;
}

.gelb .points {
    position: absolute;
    width: 14.11458333333333%;
    left: 5px;
    background: url(/img/points.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/points.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/points.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.points .points-display {
    width: 48.70848708487085%;
    height: 17.34317343173432%;
    margin-top: 37.26937269372694%;
    margin-left: 26.5%;
    text-align: center;
    font-family: verdana, sans-serif;
    font-weight: bold;
    color: white;
    font-size: 35px;
}

.bonus .points-display {
    width: 48.70848708487085%;
    height: 17.34317343173432%;
    margin-top: 37.26937269372694%;
    margin-left: 26.5%;
    text-align: center;
    font-family: verdana, sans-serif;
    font-weight: bold;
    color: #fecb21;
    font-size: 35px;
}
/*
.orange .points {
    position: absolute;
    max-width: 14%;
    height: 26.26836081823916%;
    left: 1%;
    background: url(/img/games_html5/points.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/games_html5/points.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/points.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.orange .points-en {
    position: absolute;
    max-width: 14%;
    height: 26.26836081823916%;
    left: 1%;
    background: url(/img/games_html5/points_en.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/games_html5/points_en.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/points_en.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.orange .bonus {
    background: url(/img/games_html5/points_bonus.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/games_html5/points_bonus.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/points_bonus.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.orange .bonus {
    background: url(/img/games_html5/points_bonus_en.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/games_html5/points_bonus_en.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/points_bonus_en.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
*/
.board-frame {
    width: 80%;
    height: 93.40909090909091%;
    top: 3.295454545454545%;
    left: 17%;
    position: absolute;
    background: url(/img/frame.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/frame.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/*
.blau .board-frame:not(.board-frame-quartett) {
    width: 100%;
    height: 100%;
    background: none;
    position: absolute;
    top: 0;
    left: 0;
}
*/
.board {
    width: 94.36619718309859%;
    max-width: 94.36619718309859%;
    height: 91.72749391727494%;
    position: relative;
    top: 4.13625304136253%;
    left: 2.816901408450704%;
}
/*
.blau .board:not(.board-quartett) {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    max-width: none;
}
*/
.card-container {
    min-width: 50px;
    float: left;
    cursor: pointer;
    position: relative;
    background: url(/img/card_frame.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/card_frame.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/card_frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.card {
    width: 93.12169312169312%;
    height: 93.12169312169312%;
    position: relative;
    left: 1.058201058201058%;
    top: 1.058201058201058%;
    background: url(/img/card_back.png) 0% 0% / 100% 100% no-repeat transparent;
    -pie-background: url(/img/card_back.png) 0% 0% / 100% 100% no-repeat transparent;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/card_back.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.image-container-outer {
    width: 100%;
    height: 71.3520749665328%;
}

.image-container-inner {
    height: 96.06003752345216%;
    position: relative;
    top: 3.939962476547842%;
}

.big-image-multi {
    float: left;
    height: 100%;
    border: 1px solid black;
    margin-left: 2.839396628216504%;
    background-color: #5e7ba3;
    position: relative;
}

.big-image-multi img {
    width: 100%;
    position: relative;
}

.big-image-single {
    float: left;
    max-width: 59.62732919254658%;
    height: 88.88888888888889%;
    max-height: 88.88888888888889%;
    border: 1px solid black;
    position: relative;
    left: 2.307009760425909%;
    top: 2.811244979919679%;
    background-color: #5e7ba3;
}

.big-image-single img {
    height: 100%;
    position: relative;
}

.hide-overlay {
    position: absolute;
    height: 12.9547471162378%;
    right: 2.129547471162378%;
    bottom: 2.543507362784471%;
    cursor: pointer;
    background: url(/img/hide_button_off.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/hide_button_off.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/hide_button_off.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.hide-overlay:hover {
    background: url(/img/hide_button_on.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/hide_button_on.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/hide_button_on.png);
}

.copyright {
    position: absolute;
    bottom: 1%;
    right: 2%;
    font-size: 1em;
}

.text {
    font-size: 1.5em;
    position: absolute;
    top: 82.86479250334672%;
    padding-right: 10%;
    line-height: 1.5;
}

.gelb .manual-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.gelb .manual-overlay.hippel-manual-overlay {
    width: 99%;
    height: 99%;
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 0.5%;
    top: 0.5%;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    left: calc(100px - 100px);
    top: calc(100px - 100px);
}
/*
.orange .manual-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #ffa043;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.blau .manual-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #78c6eb;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.blau .start-overlay {
    width: 50%;
    height: 50%;
    background-color: #78c6eb;
    border: 2px solid black;
    position: absolute;
    left: 25%;
    top: 25%;
}

.blau .hide-start-overlay {
    position: absolute;
    width: 25%;
    height: 25%;
    cursor: pointer;
    left: 37.5%;
    top: 37.5%;
    border: 1px solid black;
}

.hide-manual {
    position: absolute;
    height: 12.9547471162378%;
    right: 2.129547471162378%;
    bottom: 2.543507362784471%;
    cursor: pointer;
    background: url(/img/games_html5/hide_manual_off.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/games_html5/hide_manual_off.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/hide_manual_off.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.blau .hide-manual {
    position: absolute;
    height: 12.9547471162378%;
    right: 2.129547471162378%;
    bottom: 2.543507362784471%;
    cursor: pointer;
    background: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_off.png) 0% 0% / 100% 100% no-repeat;
    background-image: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_off.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.hide-variants {
    position: absolute;
    height: 12.9547471162378%;
    right: 2.129547471162378%;
    bottom: 2.543507362784471%;
    cursor: pointer;
    background: url(/img/games_html5/hide_manual_off.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/games_html5/hide_manual_off.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/hide_manual_off.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.blau .hide-variants {
    position: absolute;
    height: 12.9547471162378%;
    right: 2.129547471162378%;
    bottom: 2.543507362784471%;
    cursor: pointer;
    background: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_off.png) 0% 0% / 100% 100% no-repeat;
    background-image: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_off.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.hide-levels {
    display: none;
}

.hide-manual:hover {
    background: url(/img/games_html5/hide_manual_on.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/games_html5/hide_manual_on.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/hide_manual_on.png);
}

.blau .hide-manual:hover {
    background: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_on.png) 0% 0% / 100% 100% no-repeat;
    background-image: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_on.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.hide-variants:hover {
    background: url(/img/games_html5/hide_manual_on.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/games_html5/hide_manual_on.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/HanisauLand/html5_games/PIE.htc);
    background-image: url(/img/games_html5/hide_manual_on.png);
}

.gelb .variants-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.gelb .variants-overlay.hippel-variants-overlay {
    width: 99%;
    height: 99%;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 0.5%;
    top: 0.5%;
    left: calc(100px - 100px);
    top: calc(100px - 100px);
}

.orange .variants-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #ffa043;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.blau .variants-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #78c6eb;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
    z-index: 889;
}

.orange .question-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #ffa043;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.gelb .question-overlay {
    width: 99%;
    height: 99%;
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 0.5%;
    top: 0.5%;
}

.gelb .question-overlay.question-overlay-hippel {
    width: 99%;
    height: 99%;
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 0.5%;
    top: 0.5%;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    left: calc(100px - 100px);
    top: calc(100px - 100px);
}

.blau .levels-overlay {
    width: 100%;
    height: 100%;
    background-image: url(/img/games_html5/rennfieber/intro_bg.png);
    background-image: no-repeat;
    background-size: cover;
}

.variant-item {
    cursor: pointer;
}

.level-item {
    cursor: pointer;
    width: 51.61290322580645%;
    height: 28.71794871794872%;
    position: absolute;
    left: -2000px;
    background-image: url(/img/games_html5/rennfieber/intro_level_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.level-item img {
    position: absolute;
}

#level-1 {
    top: 3.46153846153846%;
}

#level-2 {
    top: 35.64102564102564%;
}

#level-3 {
    bottom: 3.46153846153846%;
}
*/
.table-highscore {
    width: 68.50044365572316%;
    height: 80.32128514056225%;
    position: absolute;
    bottom: 2.543507362784471%;
    left: 6.211180124223602%;
}

.question-row {
    min-height: 16%;
    box-shadow: 1px 1px 0 1px rgb(255, 255, 255), -1px -1px 0 1px rgb(76, 63, 33), -2px -2px 0 1px rgb(134, 111, 58);
    margin-bottom: 20px;
    background: rgb(224, 186, 98);
    background: rgba(0, 0, 0, 0.12);
    cursor: pointer;
    position: relative;
}

.question-row-content {
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    width: 100%;
}

.question-row:hover {
    background: rgb(95, 188, 238);
    color: white;
}

.question-transparent {
    box-shadow: none;
    background: none;
    cursor: auto;
}

.question-transparent:hover {
    background: none;
    color: black;
}

.question-result {
    height: 51%;
    box-shadow: 1px 1px 0 1px rgb(255, 255, 255), -1px -1px 0 1px rgb(76, 63, 33), -2px -2px 0 1px rgb(134, 111, 58);
    background: rgb(224, 186, 98);
    background: rgba(0, 0, 0, 0.12);
    position: relative;
}

.question-result-content {
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    width: 100%;
}

.highscore-name {
    display: inline-block;
    margin-left: 5%;
    width: 45%;
    overflow: hidden;
    max-height: 100%;
    float: left;
}

.answer-correct:hover {
    background: none;
    color: black;
    cursor: auto;
}

.highscore-points {
    text-align: right;
    display: inline-block;
    width: 45%;
    max-height: 100%;
}

.highscore-first {
    background: rgb(95, 188, 238);
    color: white;
}

.blau .highscore-first {
    background: rgb(146, 202, 9);
    color: white;
}

.highscore-second {
    background: rgb(147, 184, 182);
    background: rgba(88, 174, 220, 0.65);
}

.blau .highscore-second {
    background: rgb(135, 194, 90);
    background: rgba(135, 187, 8, 0.65);
}

.highscore-third {
    background: rgb(185, 186, 140);
    background: rgba(74, 146, 185, 0.39);
}

.blau .highscore-third {
    background: rgb(127, 188, 150);
    background: rgba(113, 157, 7, 0.39);
}

.highscore-rest {
    background: rgb(224, 186, 98);
    background: rgba(0, 0, 0, 0.12);
}

.blau .highscore-rest {
    background: rgb(119, 183, 212);
    background: rgba(0, 0, 0, 0.12);
}

.highscore-row {
    height: 8%;
    box-shadow: 1px 1px 0 1px rgb(255, 255, 255), -1px -1px 0 1px rgb(76, 63, 33), -2px -2px 0 1px rgb(134, 111, 58);
    margin-bottom: 11px;
}

.highscore-insert {
    background-color: transparent;
    width: 100%;
    color: inherit;
    height: 100%;
    padding: 0;
    border: 0;
}

.hide-highscore {
    position: absolute;
    height: 12.9547471162378%;
    right: 2.129547471162378%;
    bottom: 2.543507362784471%;
    cursor: pointer;
    background: url(/img/hide_manual_off.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/hide_manual_off.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/hide_manual_off.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/*
.blau .hide-highscore {
    position: absolute;
    height: 12.9547471162378%;
    right: 2.129547471162378%;
    bottom: 2.543507362784471%;
    cursor: pointer;
    background: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_off.png) 0% 0% / 100% 100% no-repeat;
    background-image: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_off.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
*/
.hide-highscore:hover {
    background: url(/img/hide_manual_on.png) 0% 0% / 100% 100% no-repeat;
    -pie-background: url(/img/hide_manual_on.png) 0% 0% / 100% 100% no-repeat;
    behavior: url(/js/PIE.htc);
    background-image: url(/img/hide_manual_on.png);
}
/*
.blau .hide-highscore:hover {
    background: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_on.png) 0% 0% / 100% 100% no-repeat;
    background-image: url(/img/games_html5/rennfieber/pfeil_rechts_gruen_on.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
*/
.gelb .highscore-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.gelb .highscore-overlay.hippel-highscore-overlay {
    width: 99%;
    height: 99%;
    background-color: #ffcf61;
    border: 2px solid black;
    position: absolute;
    left: 0.5%;
    top: 0.5%;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    left: calc(100px - 100px);
    top: calc(100px - 100px);
}
/*
.orange .highscore-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #ffa043;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}

.blau .highscore-overlay {
    width: 93.37199668599834%;
    height: 90.76549210206561%;
    background-color: #78c6eb;
    border: 2px solid black;
    position: absolute;
    left: 2.899751449875725%;
    top: 4.131227217496962%;
}
*/
.highscore-title {
    height: 5.087014725568942%;
    position: absolute;
    /* left: 9.405501330967169%; */
    left: 6.211180124223602%;
    top: 7%;
    line-height: 0.75em;
    width: 90%;
}

.highscore-title.long {
    top: 5%;
}

.highscore-title > span {
    font-size: 0.5em;
}

/* vermutlich Smartphone oder kleines Tables im Hochformat */
@media screen and (max-height: 1023px) and (orientation:portrait) {
    .highscore-title {
        height: 13%;
        top: 3%;
        line-height: 0.6em;
    }

    .highscore-title.long {
        top: 4%;
        font-size: 19px !important;
    }

    .highscore-title > b {
        margin-bottom: 5px;
        display: inline-block;
    }

    .highscore-title.long > b {
        margin-bottom: 0;
        display: inline;
    }
}


@media (min-aspect-ratio: 2/1) {
    .highscore-title {
        top: 3%;
        line-height: 1em;
    }

    .highscore-title.long {
        top: 3%;
        line-height: 1em;
    }

    .highscore-title > span {
        font-size: 0.75em;
    }
}

.loading {
    top: 0;
    left: 0;
    z-index: 99999;
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    background: url(/img/trixomat_loading.gif) no-repeat center center rgba(255, 255, 255, 0.75);
    -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#55ffffff, endColorstr=#55ffffff)';
}

.loading-percentage {
    position: relative;
    font-weight: bold;
    font-size: 1.5em;
}


.hanisau-row {
    height: 12.5%;
    width: 100%;
}

.hanisau-col {
    width: 8.333333333333333%;
    height: 100%;
    float: left;
}

.stone {
    width: 100%;
    height: 12.5%;
    cursor: pointer;
}

.content.full {
    height: 98%;
    top: 1%;
}

.choose-text.smartphone {
    display: none;
}