/* FILE: game.css                                   */
/* (c) 2015-2016 by TeleWord UG haftungsbeschraenkt */
/* All rights reserved!                             */
/* Layout erstellt von teleword.info                */

    * {
      margin:0;
      padding:0;
    }
    ul {
      list-style-type:none
    }
    a:hover {
      color:#202020;
    }
    img {
      border:0
    }
    html, body {
      height:100%
    }
    body {
      background:#78FFFF;
      background-image:url("/images/background_480x800.png");
      background-filter:blur(3px);
      background-position:top;
      background-size:cover;
      color:#000000;
      font-family:Arial, sans-serif;
      font-size:14px;
      font-weight:lighter;
/*
      background-image:url("/images/game_math_pluseasy.png"); url("/images/background_480x800.png");
      background-image:url("/game/math/images/background_graypinkbright.jpg");
      background-size:cover;
      background-position:0% 0%;
*/
    }
    .bar_links {
      width:100%;
      min-width:300px;
      height:24px;
      //position:relative;
      padding-bottom:0px;
      padding-left:0px;
      padding-right:0px;
      padding-top:0px;
      margin-bottom:0px;
      margin-left:0px;
      margin-right:0px;
      margin-top:0px;
      border-bottom-width:1px;
      border-bottom-color:#E0E0E0;
      border-bottom-style:solid;
      color:#FFFFFF;
      background-attachment:scroll;
      background-clip:border-box;
      background-color:#101010;
      background-image:none;
      background-origin:padding-box;
      background-position:0px 0px;
      background-repeat:repeat;
      background-size:auto auto;
    } 
    .bar_links_sub {
      width:100%;
      height:20px;
      display:block;
      padding-top:2px;
      padding-right:0px;
      padding-bottom:2px;
      padding-left:0px;
    } 
    .bar_links_sub_title {
      float:left;
      display:inline-block;
      position:relative;
      width:auto;
      margin-left:20px;
      margin-right:10px;
      color:#FFFFFF;
      font-weight:bold;
      text-decoration:none;
      letter-spacing:-0.5px;
    }
    .bar_links_sub_link {
      display:inline-block;
      position:relative;
      float:left;
      height:20px;
      padding-left:10px;
      padding-right:10px;
      margin-right:5px;
      overflow:hidden;
      text-decoration:none;
      color:#FFFFFF;
      white-space:nowrap;
    }
    .bar_links_sub_link:hover {
      background-color:#FFFFFF;
      color:#000000;
      cursor:pointer;
      text-decoration:underline;
    }
    .bar_links_sub_more {
      display:inline-block;
      position:relative;
      float:left;
      height:20px;
      padding-left:10px;
      padding-right:10px;
      margin-right:5px;
      overflow:hidden;
      text-decoration:none;
    }
    .bar_links_sub_more:hover {
      background-color:#FFFFFF;
      color:#000000;
      cursor:pointer;
      text-decoration:underline;
    }
    .bar_title {
      width:100%;
      height:40px;   /* 60px */
      position:relative;
      padding-bottom:0px;
      padding-left:0px;
      padding-right:0px;
      padding-top:0px;
      margin-bottom:7px;   /* 0px or 7px, depending on topmenu */
      margin-left:0px;
      margin-right:0px;
      margin-top:0px;
      border-bottom-width:2px;
      border-bottom-color:#4080FF;
      border-bottom-style:solid;
      background-attachment:scroll;
      background-clip:border-box;
      background-color:#505050;
      background-image:none;
      background-origin:padding-box;
      background-position:0px 0px;
      background-repeat:repeat;
      background-size:auto auto;
    } 
    .bar_title button {
      padding:0px;
      border-style:none;
      border-width:0px;
      background-image:none;
      cursor:pointer;
      outline-width:0px;
      outline-style:none;
      outline-color:-mox-use-text-color;
      margin:0px;
    }
    .bar_title #button_menu {
      width:80px;     /* 80px */
      height:38px;    /* 58px */
      top:0px;
      left:5px;
      position:absolute;
      background-color:rgba(80,80,80,0.5);
    }
    .bar_title #button_menu:hover i{background-position:-75px 0px}
    .menuActive .bar_title #button_menu:hover i{background-position:-75px -30px}
    .bar_title #button_home {
      position:absolute;
      top:0px;
      /*left:100px;*/
      right:10px;
      width:40px;
      height:38px;
      z-index:1;
      background-color:rgba(80,80,80,0.5);
    }
    .bar_title #button_home:hover i{
      background-position:-107px -60px;
    }
    .bar_title #button_search {
      width:40px;     /* 40px(!) */
      height:38px;    /* 58px    */
      top:0px;
      right:50px;
      position:absolute;
      background-color:#505050;
    }
    .bar_title #logo, .bar_title #brain_logo {
      width:440px;
      height:40px;
      margin:0px auto 0px auto;
      background-color:transparent;
      background-image:url("logo_321pot.png");
      background-position:50% 50%;
      background-size:contain;
      background-repeat:no-repeat;
      display:block;
      outline-style:none;
      text-decoration:none;
    }
    .bar_title #brain_logo {
      background-image:url("logo_321brain.png");
    }
    .sprite_menu_inactive, .sprite_menu_active {
      width:75px;
      height:30px;
      padding:0px;
      margin-top:0px;
      margin-right:auto;
      margin-bottom:0px;
      margin-left:auto;
      display:block;
      cursor:pointer;
      background-color:transparent;
      background-image:url("/images/sprites.png");
      background-repeat:repeat;
      background-attachment:scroll;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
    }
    .sprite_menu_inactive {
      background-position:0px 0px;
    }
    .sprite_menu_active {
      background-position:0px -30px;
    }
    .sprite_search, .sprite_home {
      width:32px;
      height:32px;
      padding:0px;
      margin-top:0px;
      margin-right:auto;
      margin-bottom:0px;
      margin-left:auto;
      display:block;
      cursor:pointer;
      background-color:transparent;
      background-image:url("/images/sprites.png");
      background-repeat:repeat;
      background-attachment:scroll;
      background-position:-75px -60px;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
    }
    .bar_title #button_search:hover i{
      background-position:-107px -60px;
    }
    #contentWrapper {
      min-width:150px;
      max-width:2000px;
      position:relative;
      padding:0px;
      margin-top:0px;
      margin-right:auto;
      margin-bottom:15px;
      margin-top:auto;
    }
    #contentWrapper #menu {
      display:none;
      float:left;
      width:200px;
      margin-top:0px;
      margin-right:7px;
      margin-bottom:0px;
      margin-left:20px;
      color:#303030;
      background-color:#FFFFFF;
      background-image:none;
      background-repeat:repeat;
      background-attachment:scroll;
      background-position:0% 0%;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
      box-shadow:1px 2px 8px rgba(0,0,0,0.75);
    }
    #contentWrapper #menu p {
      //color:#4080FF;
      color:#4080FF;
      font-size:16px;
      font-weight:bold;
      padding:0px;
      margin:17px 0px 10px 20px;
    }
    #contentWrapper #menu ul.hover li a, #contentWrapper #menu ul.hover li > span {
      display:block;
      height:41px;
      line-height:41px;
      margin-top:0px;
      margin-right:auto;
      margin-bottom:0px;
      margin-left:auto;
      font-size:16px;
      font-weight:bold;
      color:#101010;
      outline-style:none;
      text-decoration:none;
    }
    #contentWrapper #menu > ul li.active {
      position:relative;
      //background-color:#4080FF;
      background-color:#4080FF;
      background-image:none;
      background-repeat:repeat;
      background-attachment:scroll;
      background-position:0% 0%;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
    }
    #contentWrapper #menu > ul li.active a {
      color:#FFFFFF;
    }
    #contentWrapper #menu > ul li.active i.activeItem {
      position:absolute;
      top:16px;
      right:0px;
      width:6px;
      height:11px;
      background-color:transparent;
      background-image:url("/images/sprites.png");
      background-repeat:repeat;
      background-attachment:scroll;
      background-position:-139px -60px;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
    }
    #contentWrapper #menu ul.hover li .wrapper {
      width:85%;
      height:40px;
      display:block;
      margin-top:0px;
      margin-right:auto;
      margin-bottom:0px;
      margin-left:auto;
      border-bottom-width:1px;
      border-bottom-style:solid;
      border-bottom-color:#E0E0E0;
    }
    #contentWrapper #menu ul.hover li:hover {
      background:#F0F0F0;
    }
    #contentWrapper #menu > ul li.active:hover {
      //background:#4080FF;
      background:#2060FF
    }
    #contentWrapper.menuActive #menu {
      display:block;
    }
    #contentWrapper #content {
      position:relative;
      display:table;
      min-width:100px;
      margin:10px auto;
    }
    @media screen and (max-width:640px) {
      #contentWrapper #content { width:98%; }     /*  400px */
    }
    @media screen and (min-width:641px) and (max-width:840px){
      #contentWrapper #content { width:98%; }     /*  600px */
    }
    @media screen and (min-width:841px) and (max-width:1040px){
      #contentWrapper #content { width:98%; }     /*  800px */
    }
    @media screen and (min-width:1041px) and (max-width:1240px){
      #contentWrapper #content { width:98%; }     /* 1000px */
    }
    @media screen and (min-width:1241px) and (max-width:1440px){
      #contentWrapper #content { width:98%; }     /* 1200px */
    }
    @media screen and (min-width:1441px) and (max-width:1640px){
      #contentWrapper #content { width:98%; }     /* 1400px */
    }
    @media screen and (min-width:1641px) and (max-width:1840px){
      #contentWrapper #content { width:98%; }     /* 1600px */
    }
    @media screen and (min-width:1841px) {
      #contentWrapper #content { width:1800px; }  /* 1800px */
    }
    #contentWrapper.menuActive { max-width:2000px; }         /* 1570px */
    #contentWrapper.menuActive #menu { display:block }
    @media screen and (max-width:690px) {
      #contentWrapper.menuActive #content { width:98%; }     /*  200px */
    }
    @media screen and (min-width:691px) and (max-width:890px) {
      #contentWrapper.menuActive #content { width:98%; }     /*  400px */
    }
    @media screen and (min-width:891px) and (max-width:1090px) {
      #contentWrapper.menuActive #content { width:98%; }     /*  600px */
    }
    @media screen and (min-width:1091px) and (max-width:1290px) {
      #contentWrapper.menuActive #content { width:98%; }     /*  800px */
    }
    @media screen and (min-width:1291px) and (max-width:1490px) {
      #contentWrapper.menuActive #content { width:98%; }     /* 1000px */
    }
    @media screen and (min-width:1491px) and (max-width:1690px) {
      #contentWrapper.menuActive #content { width:98%; }     /* 1200px */
    }
    @media screen and (min-width:1691px) and (max-width:1890px) {
      #contentWrapper.menuActive #content { width:98%; }     /* 1400px */
    }
    @media screen and (min-width:1891px) {
      #contentWrapper.menuActive #content { width:98%; }     /* 1500px */
    }
    .footer {
      width:100%;
      float:left;
      margin-top:7px;
      margin-right:0px;
      margin-bottom:0px;
      margin-top:0px;
      display:block;
    }
    .footer_title {
      display:inline-block;
      margin-left:5px;
      margin-right:5px;
      color:#FFFFFF;
      font-weight:bold;
      letter-spacing:-0.5px;
    }
    .footer_title_pre {
      display:inline-block;
      color:#E0E0E0;
      font-weight:normal;
      font-size:12px;
      letter-spacing:-0.5px;
    }
    .footer_menu {
      width:100%;
      padding-top:10px;
      padding-right:0px;
      padding-bottom:10px;
      padding-left:0px;
      margin:0px;
      text-align:center;
      color:#F0F0F0;
      background-color:#4080FF;
      background-image:none;
      background-repeat:repeat;
      background-attachment:scroll;
      background-position:0px 0px;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
    }
    .footer_menu > a {
      height:40px;
      color:#FFFFFF;
      display:inline-block;
      padding-top:0px;
      padding-right:10px;
      padding-bottom:0px;
      padding-left:10px;
      margin-top:0px;
      margin-right:10px;
      margin-bottom:0px;
      margin-left:10px;
      outline-style:none;
      text-decoration:none;
    }
    .footer_menu > a:hover {
      color:#2060FF;
      background-color:#FFFFFF
    }
    .sprite_searchlogo {
      width:25px;
      height:25px;
      padding:0px;
      margin-top:0px;
      margin-right:10px;
      margin-bottom:0px;
      margin-left:10px;
      display:inline-block;
      cursor:pointer;
      background-color:transparent;
      background-image:url("/images/sprites.png");
      background-repeat:repeat;
      background-attachment:scroll;
      background-position:-100px -117px;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
    }
    .sprite_menu1, .sprite_menu2, .sprite_menu3, .sprite_menu4, .sprite_menu5, .sprite_menu6,
    .sprite_menu7, .sprite_menu8, .sprite_menu9, .sprite_menu10, .sprite_menu11, .sprite_menu12,
    .sprite_menu13, .sprite_menu14, .sprite_menu15, .sprite_menu16, .sprite_menu17, .sprite_menu18 {
      position:relative;
      top:8px;
      width:25px;
      height:25px;
      padding:0px;
      margin-top:0px;
      margin-right:9px;
      margin-bottom:0px;
      margin-left:0px;
      display:inline-block;
      cursor:pointer;
      background-color:transparent;
      background-image:url("/images/sprites.png");
      background-repeat:repeat;
      background-attachment:scroll;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
    }
                                            .sprite_menu1  { background-position: -25px  -92px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu1,
    #topmenu a:not(:hover) i.sprite_menu1,
    .footer_menu > a:not(:hover) i.sprite_menu1            { background-position:   0px  -92px; }
                                            .sprite_menu2  { background-position: -25px -117px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu2,
    #topmenu a:not(:hover) i.sprite_menu2,
    .footer_menu > a:not(:hover) i.sprite_menu2            { background-position:   0px -117px; }
                                            .sprite_menu3  { background-position: -25px -142px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu3,
    #topmenu a:not(:hover) i.sprite_menu3,
    .footer_menu > a:not(:hover) i.sprite_menu3            { background-position:   0px -142px; }
                                            .sprite_menu4  { background-position: -25px -167px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu4,
    #topmenu a:not(:hover) i.sprite_menu4,
    .footer_menu > a:not(:hover) i.sprite_menu4            { background-position:   0px -167px; }
                                            .sprite_menu5  { background-position: -25px -192px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu5,
    #topmenu a:not(:hover) i.sprite_menu5,
    .footer_menu > a:not(:hover) i.sprite_menu5            { background-position:   0px -192px; }
                                            .sprite_menu6  { background-position: -25px -217px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu6,
    #topmenu a:not(:hover) i.sprite_menu6,
    .footer_menu > a:not(:hover) i.sprite_menu6            { background-position:   0px -217px; }
                                            .sprite_menu7  { background-position: -75px  -92px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu7,
    #topmenu a:not(:hover) i.sprite_menu7,
    .footer_menu > a:not(:hover) i.sprite_menu7            { background-position: -50px  -92px; }
                                            .sprite_menu8  { background-position: -75px -117px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu8,
    #topmenu a:not(:hover) i.sprite_menu8,
    .footer_menu > a:not(:hover) i.sprite_menu8            { background-position: -50px -117px; }
                                            .sprite_menu9  { background-position: -75px -142px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu9,
    #topmenu a:not(:hover) i.sprite_menu9,
    .footer_menu > a:not(:hover) i.sprite_menu9            { background-position: -50px -142px; }
                                            .sprite_menu10 { background-position: -75px -167px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu10,
    #topmenu a:not(:hover) i.sprite_menu10,
    .footer_menu > a:not(:hover) i.sprite_menu10           { background-position: -50px -167px; }
                                            .sprite_menu11 { background-position: -75px -192px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu11,
    #topmenu a:not(:hover) i.sprite_menu11,
    .footer_menu > a:not(:hover) i.sprite_menu11           { background-position: -50px -192px; }
                                            .sprite_menu12 { background-position: -75px -217px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu12,
    #topmenu a:not(:hover) i.sprite_menu12,
    .footer_menu > a:not(:hover) i.sprite_menu12           { background-position: -50px -217px; }
                                            .sprite_menu13 { background-position:-125px  -92px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu13,
    #topmenu a:not(:hover) i.sprite_menu13,
    .footer_menu > a:not(:hover) i.sprite_menu13           { background-position:-100px  -92px; }
                                            .sprite_menu14 { background-position:-125px -117px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu14,
    #topmenu a:not(:hover) i.sprite_menu14,
    .footer_menu > a:not(:hover) i.sprite_menu14           { background-position:-100px -117px; }
                                            .sprite_menu15 { background-position:-125px -142px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu15,
    #topmenu a:not(:hover) i.sprite_menu15,
    .footer_menu > a:not(:hover) i.sprite_menu15           { background-position:-100px -142px; }
                                            .sprite_menu16 { background-position:-125px -167px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu16,
    #topmenu a:not(:hover) i.sprite_menu16,
    .footer_menu > a:not(:hover) i.sprite_menu16           { background-position:-100px -167px; }
                                            .sprite_menu17 { background-position:-125px -192px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu17,
    #topmenu a:not(:hover) i.sprite_menu17,
    .footer_menu > a:not(:hover) i.sprite_menu17           { background-position:-100px -192px; }
                                            .sprite_menu18 { background-position:-125px -217px; }
    #contentWrapper #menu > ul li.active a i.sprite_menu18,
    #topmenu a:not(:hover) i.sprite_menu18,
    .footer_menu > a:not(:hover) i.sprite_menu18           { background-position:-100px -217px; }
    .numbox, .numbigbox, .box, .midibox, .bigbox, .big3box, .fullbox2, .magicbox2, .searchbox2 {
      position:relative;
      display:inline-block;
      padding:0px 0px 0px 0px;
      margin:0px 8px 15px 8px;
      background-color:#FFFFFF;
      box-shadow:1px 2px 8px rgba(0,0,0,0.75);
      vertical-align:top;
    }
    .numbox, .numbigbox {
      font-size:100px;
      font-weight:bold;
      text-align:center;
    }
    .numbox {
      width:380px;
      min-height:120px;
    }
    .numbigbox {
      width:180px;
      min-height:120px;
    }
    .box {
      width:180px;
      min-height:120px;
    }
    .midibox {
      width:280px;
      min-height:120px;
    }
    .bigbox {
      width:380px;
      min-height:120px;
    }
    .big3box {
      width:580px;
      min-height:120px;
    }
    .fullbox1, .magicbox1, .magicbox1off, .searchbox1on, .searchbox1off {
      width:100%;
    }
    .magicbox1off, .searchbox1off {
      display:none;
    }
    .fullbox2, .magicbox2, .searchbox2 {
      margin-right:15px;
    }
    .magicbox2, .searchbox2 {
      background-color:#E0E0E0;
    }
    .boxheader, .magicboxheader, .searchboxheader {
      width:100%;
      height:25px;
      background-color:#2060FF;
      color:#FFFFFF;
      text-align:left;
      font-size:18px;
      font-weight:bold;
    }
    .boxheaderOK, .magicboxheaderOK {
      width:100%;
      height:25px;
      background-color:#009000;
      color:#FFFFFF;
      text-align:left;
      font-size:18px;
      font-weight:bold;
    }
    .boxheaderERROR, .magicboxheaderERROR {
      width:100%;
      height:25px;
      background-color:#C00000;
      color:#FFFFFF;
      text-align:left;
      font-size:18px;
      font-weight:bold;
    }
    .magicboxheader, .searchboxheader {
      background-color:#606060;
      height:40px;
      font-size:34px;
    }
    .boxtitle, .magicboxtitle, .searchboxtitle {
      padding-left:10px;
    }
    .boxbody, .magicboxbody, .searchboxbody {
      padding-top:5px;
      padding-left:5px;
      padding-right:5px;
      OFF-text-align:left;
      text-align:justify;
      font-size:14px;
      font-weight:normal;
    }
    .NavButton {
      display:inline-block;
      padding-top:5px;
      padding-right:20px;
      padding-bottom:3px;
      padding-left:20px;
      margin:5px;
      color:#2060FF;
      background-color:#FFFFFF;
      border:2px solid #2060FF;
      cursor:pointer;
      font-size:18px;
      outline:0;
      text-decoration:none;
    }
    .NavButtonOFF {
      display:inline-block;
      padding-top:5px;
      padding-right:20px;
      padding-bottom:3px;
      padding-left:20px;
      margin:5px;
      color:#2060FF;
      background-color:#FFFFFF;
      background-image:url("/images/stripes_light.png");
      border:2px solid #2060FF;
      cursor:pointer;
      font-size:18px;
      outline:0;
      text-decoration:none;
    }
    .FormFieldTitle {
      font-family:Arial;
      font-size:12px;
      font-weight:bold;
      color:#400000;
    }
    .FormField {
      display:inline-block;
      padding-top:5px;
      padding-right:20px;
      padding-bottom:3px;
      padding-left:20px;
      margin:5px;
      color:#2060FF;
      background-color:#E0E0E0;
      border:2px solid #2060FF;
      cursor:text;
      font-size:26px;
      font-family:Arial;
      font-weight:bold;
      outline:0;
      text-decoration:none;
    }
    .magicbox2:hover .NavButton,
    .NavButton:hover {
      color:#FFFFFF;
      background-color:#2060FF;
    }
    .NavButtonOFF:hover {
      color:#000000;
      background-color:#2060FF;
      background-image:url("/images/stripes.png");
    }
    .button_close {
      width:40px;
      height:40px;
      top:0px;
      right:10px;
      position:absolute;
      background-color:#606060;
      outline:0;
      border-width:0px;
      cursor:pointer;
    }
    .sprite_close {
      width:32px;
      height:32px;
      padding:0px;
      margin-top:0px;
      margin-right:auto;
      margin-bottom:0px;
      margin-left:auto;
      display:block;
      cursor:pointer;
      background-color:transparent;
      background-image:url("/images/sprites.png");
      background-repeat:repeat;
      background-attachment:scroll;
      background-position:0px -60px;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
    }
    .magicbox2:hover .sprite_close {
      cursor:pointer;
      background-position:-32px -60px;
    }
    .magicbox2:hover {
      cursor:pointer;
    }
    .searchbox2 #searchbutton_close:hover i.sprite_close {
      cursor:pointer;
      background-position:-32px -60px;
    }
    .searchform {
      float:left;
      width:80%;
      font-size:60px;
      height:100px;
      border-width:0px;
      border-style:none;
      outline-width:0px;
      outline-style:none;
      background-color:#E0E0E0;
      cursor:wait;
    }

    body.scrolleddown .bar_header {
      position:fixed;
      top:-24px;
      z-index:400;
      box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.6);
      background-color:#FFFFFF;
    }
    body.scrolleddown {
      padding-top:64px;  /* 84px */
    }
    .bar_header {
      transition:box-shadow .15s;
      -webkit-transition:box-shadow .15s;
      width:100%;
      height:64px;  /* 84px */
      z-index:100;
      border-bottom:solid #E8E8E8 1px;
      box-sizing:border-box;
      white-space:nowrap;
    }

    .sprite_logo1, .sprite_logo2, .sprite_logo3, .sprite_logo4, .sprite_logo5, .sprite_logo6,
    .sprite_logo7, .sprite_logo8, .sprite_logo9, .sprite_logo10, .sprite_logo11, .sprite_logo12,
    .sprite_logo13, .sprite_logo14, .sprite_logo15, .sprite_logo16, .sprite_logo17, .sprite_logo18,
    .sprite_logo19, .sprite_logo20, .sprite_logo21, .sprite_logo22, .sprite_logo23, .sprite_logo24 {
      position:relative;
      top:8px;
      width:150px;
      height:100px;
      padding:0px;
      margin-top:0px;
      margin-right:0px;
      margin-bottom:15px;
      margin-left:0px;
      display:block;
      cursor:default;
      background-color:transparent;
      background-image:url("/images/logos.png");
      background-repeat:repeat;
      background-attachment:scroll;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
      filter: drop-shadow(3px 3px 5px #202020);
    }
    .sprite_logo1  { background-position:    0px    0px; width:200px; }
    .sprite_logo2  { background-position:  -25px -100px; }
    .sprite_logo3  { background-position:  -25px -200px; }
    .sprite_logo4  { background-position:  -25px -300px; }
    .sprite_logo5  { background-position:  -25px -400px; }
    .sprite_logo6  { background-position:  -25px -500px; }
    .sprite_logo7  { background-position:  -25px -600px; }
    .sprite_logo8  { background-position:  -25px -700px; }
    .sprite_logo9  { background-position: -225px    0px; }
    .sprite_logo10 { background-position: -225px -100px; }
    .sprite_logo11 { background-position: -225px -200px; }
    .sprite_logo12 { background-position: -225px -300px; }
    .sprite_logo13 { background-position: -225px -400px; }
    .sprite_logo14 { background-position: -225px -500px; }
    .sprite_logo15 { background-position: -225px -600px; }
    .sprite_logo16 { background-position: -225px -700px; }
    .sprite_logo17 { background-position: -425px    0px; }
    .sprite_logo18 { background-position: -425px -100px; }
    .sprite_logo19 { background-position: -425px -200px; }
    .sprite_logo20 { background-position: -425px -300px; }
    .sprite_logo21 { background-position: -425px -400px; }
    .sprite_logo22 { background-position: -425px -500px; }
    .sprite_logo23 { background-position: -425px -600px; }
    .sprite_logo24 { background-position: -425px -700px; }

    /* Framework: minimise black header bar for small pages */
    @media (max-width:350px) {
      .bar_links_sub_title { font-size:10px; margin-left:0px; margin-right:0px; }
      .bar_links_sub_link { font-size:10px; padding-left:0px; padding-right:0px; margin-right:0px; }
    }
    @media (min-width:351px) and (max-width:400px) {
      .bar_links_sub_title { font-size:10px; margin-left:2px; margin-right:2px; }
      .bar_links_sub_link { font-size:10px; padding-left:2px; padding-right:2px; margin-right:2px; }
    }
    @media (min-width:401px) and (max-width:450px) {
      .bar_links_sub_title { font-size:11px; margin-left:3px; margin-right:3px; }
      .bar_links_sub_link { font-size:11px; padding-left:3px; padding-right:3px; margin-right:3px; }
    }
    @media (min-width:451px) and (max-width:500px) {
      .bar_links_sub_title { font-size:12px; margin-left:4px; margin-right:4px; }
      .bar_links_sub_link { font-size:12px; padding-left:4px; padding-right:4px; margin-right:4px; }
    }
    @media (min-width:501px) and (max-width:600px) {
      .bar_links_sub_title { font-size:13px; margin-left:5px; margin-right:5px; }
      .bar_links_sub_link { font-size:13px; padding-left:5px; padding-right:5px; margin-right:5px; }
    }
    /* TopMenu */
    #topmenu {
      display:none;
      width:100%;
      height:200px;
      margin:0px 0px 7px 0px;
      padding:0px;
      background-color:#808080;
      border-bottom-width:2px;
      border-bottom-color:#4080FF;
      border-bottom-style:solid;
      text-align:center;
      font-size:0px;
    }
    #subbody.menuActive #topmenu          { display:block }
    body.scrolleddown #subbody.menuActive { padding-top:200px; }
    #subbody.menuActive .bar_header       { height:264px; }
    #subbody.menuActive .bar_title        { margin-bottom:0px; }
/* TODO: bar_topmenu  (like bar_title) */
    /* topmenu */
    #topmenu .topmenu_item {
      display:inline-block;
      width:50%;
      box-sizing:border-box;
    }
    #topmenu a {
      display:block;
      position:relative;
      margin: 1px 2% auto 2%;
      padding:0px 0px 4px 6px;
      overflow:hidden;
      text-overflow:ellipsis;
      border:solid 2px #000000;
      text-align:left;
      background:#2060FF;
      text-decoration:none;
      border-radius:10px;
      color:#FFFFFF;
      text-shadow:1px 1px 0 #000000;
      font-size:16px;
    }
    #topmenu a:hover {
      border:solid 2px #E0E0E0;
      background:#FFFFFF;
      color:#000000;
      text-shadow:1px 1px 0 #808080;
    }
    /* Adv-System */
    .adv_center {
      position:relative;
      width:100%;
      text-align:center;
    }
    .adv_container {
      position:relative;
      min-width:100px;
      max-width:516px;   /* 500 + 12 label + 4 border */
      min-height:20px;
      max-height:304px;
      width:*;
      margin:0px;
      padding:0px;
      border:solid 2px #000000;
      background-color:#808080;
      display:inline-block;
    }
    .adv_label {
      display:block;
      position:absolute;
      top:0px;
      left:0px;
      width:12px;
      height:100%;
      min-height:20px;
      margin:0px;
      padding:0px;
      background-color:transparent;
      background-image:url("/images/Lable_Sponsor_12x60.png");
      background-repeat:repeat;
      background-attachment:scroll;
      background-position:left bottom;
      background-clip:border-box;
      background-origin:padding-box;
      background-size:auto auto;
      outline-style:none;
      text-decoration:none;
      box-sizing:border-box;
    }
    .adv_content {
      display:block;
      min-height:20px;
      margin:0px 0px 0px 12px;
      padding:0px 0px 0px 0px;
      box-sizing:border-box;
    }
    .adv_content a {
      display:block;
      position:relative;
      overflow:hidden;
      text-decoration:none;
    }
    .adv_content img {
      display:inline;
      min-height:20px;
      max-height:300px;
      min-width:10px;
      max-width:500px;
      margin-bottom: -4px;  /* wg. border */
      border:0;
      box-sizing:border-box;
    }
    .adv_adfreebar {
      width:100%;
      height:15px;
      margin:0px;
      padding:0px;
      background-color:#000000;
      color:#FFFFFF;
      font-weight:normal;
    }

    /* Button-System */
    .gridbox {
      /* border-radius:10px; */
      padding:5px;
      /* background-color:#60A0FF; */
      /* background-image:linear-gradient(top, #808080 0%, #FFFFFF 100%); */
      text-align:left;
      box-sizing: border-box;
      font-size:0;
    }
    .grid {
      border-radius:10px;
      margin:0px;
      padding:8px;
      background-color:rgba(255,255,255,0.3);
      box-sizing:border-box;
    }
    #box_list li {
      display:inline-block;
      position:relative;
      width:50%;
      box-sizing:border-box;
    }
    .box2to1a {
      display:block;
      position:relative;
      width:100%;
      padding-top:50%;  /* aspect-ratio 2:1 */
    }
    .box3to4a {
      display:block;
      position:relative;
      width:100%;
      padding-top:133.333%;  /* aspect-ratio 3:4 */
    }
    .box2to1b, .box3to4b {
      display:block;
      position:absolute;
      width:100%; height:100%;
      left:0%;
      top:0%;
    }
    .box2to1c, .box3to4c {
      display:block;
      position:relative;
      width:98%; height:98%;
      padding-top:2%;
      padding-left:2%;
      /*background-color:rgba(255,0,0,0.5);*/
      box-sizing:border-box;
    }
    #box_list a {
      display:block;
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      border:solid 2px #000000;
      font-size:16px;
      text-align:left;
      background:#FFFFFF;
      text-decoration:none;
      border-radius:10px;
      box-sizing:border-box;
    }
    #box_list .boxgroup a {
      display:block;
      position:relative;
      width:100%;
      height:100%;
      left:0%;
      top:0%;
      border:none;
      background:none;
    }
    .boxgroupframe {
      display:block;
      position:absolute;
      width:100%;
      height:100%;
      left:0%;
      top:0%;
      background-image:url('/images/group_folder_new.png');
      background-size:100% 100%;
      z-index:2;
    }
    #box_list .boxgroup a:hover .boxgroupframe {
      background-image:url('/images/group_folder_new_hover.png');
    }
    .boxgroupnetto {
      display:block;
      position:absolute;
      width:60%;
      height:58%;
      left:20%;
      top:26%;
      overflow:hidden;
      border-top-left-radius:3% 6%;
      border-top-right-radius:3% 6%;
      border-bottom-left-radius:3% 6%;
      border-bottom-right-radius:3% 6%;
      border-style:solid;
      border-width:0px;
      border-color:rgba(0,0,0,0.0);
      z-index:1;
    }
    #box_list a:hover {
      border:solid 2px #FFFFFF;
    }
    #box_list .boxgroup a:hover {
      border:none;
    }
    #box_list .grid_nolink {
      cursor:not-allowed;
      margin-top:10px;
      margin-left:10px;
      display:block;
      position:relative;
      overflow:hidden;
      border:solid 2px #000000;
      font-size:16px;
      text-align:left;
      background:#FFFFFF;
      text-decoration:none;
      border-radius:10px;
    }
    #box_list #minibutton {
      height:30px;
      text-shadow:none;
      cursor:pointer;
      outline:0;
      margin:0 0 0 0;
      width:100%;
      display:inline-block;
      position:static;
      overflow:auto;
      border:solid 2px #2060FF;
      font-family:Arial;
      font-size:14px;
      font-weight:bold;
      color:#2060FF;
      text-align:center;
      background-color:#FFFFFF;
      text-decoration:none;
      border-radius:0px;
    }
    #box_list #minibutton:hover {
      border:solid 2px #FFFFFF;
      color:#FFFFFF;
      background-color:#2060FF
    }
    #box_list .item_title {
      display:block;
      position:absolute;
      overflow:hidden;
      bottom:5%;
      left:4%;
      z-index:4;
      width:92%;
      color:#FFFFFF;
      text-shadow:1px 1px 0 #000000;
      text-align:left;
      white-space:nowrap;
      text-overflow:ellipsis;
      box-sizing:border-box;
      font-weight:bold;
      font-size:16px;
    }
    #box_list .boxgroup .item_title {
      text-align:center;
      width:110%;
      left:-5%;
      top:75%;
      /* bottom:4%; */
      white-space:normal;
      line-height:14px;
      overflow:visible;
    }
    #box_list .boxgroup .item_titlecenter {
      display:block;
      position:relative;
      transform:translate(0%, -50%);
    }
    #box_list .item_gold, #box_list .item_silber, #box_list .item_bronze,
    #box_list .item_hit {
      display:block;
      position:absolute;
      overflow:hidden;
      top:32%;
      right:12%;
      z-index:2;
      width:92%;
      color:#000000;
      text-shadow:1px 1px 0 #808080;
      text-align:right;
      white-space:nowrap;
      text-overflow:ellipsis;
      box-sizing:border-box;
      font-weight:bold;
      font-size:30px;
    }
    #box_list .item_silber {
      top:56%;
      right:16%;
      font-size:26px;
    }
    #box_list .item_bronze {
      top:78%;
      right:16%;
      font-size:26px;
    }
    #box_list .item_hit {
      top:76%;
      right:7%;
      font-size:18px;
    }
    #box_list .item_news {
      display:block;
      position:absolute;
      overflow:hidden;
      z-index:2;
      width:92%;
      top:25%;
      left:4%;
      font-size:20px;
      font-weight:bold;
      color:#202020;
      text-shadow:1px 1px 0 #808080;
      text-align:center;
      text-overflow:ellipsis;
      box-sizing:border-box;
    }
    #box_list .item_turnier {
      display:block;
      position:absolute;
      overflow:hidden;
      top:25%;
      left:4%;
      z-index:2;
      width:92%;
      color:#000000;
      text-shadow:1px 1px 0 #E0E0E0;
      text-align:left;
      /* white-space:nowrap; */
      text-overflow:ellipsis;
      box-sizing:border-box;
      font-weight:bold;
      font-size:14px;
    }
    #box_list .item_turnierinfo {
      top:4%;
    }
    #box_list .item_bigtitle {
      display:block;
      position:absolute;
      overflow:hidden;
      bottom:32%;
      left:4%;
      z-index:4;
      width:92%;
      color:#FFFFFF;
      text-shadow:1px 1px 1px #000000;
      text-align:left;
      text-overflow:ellipsis;
      box-sizing:border-box;
      font-weight:bold;
      font-size:24px;
    }
    #box_list .item_minititle {
      display:block;
      position:absolute;
      overflow:hidden;
      top:68%;
      left:4%;
      z-index:4;
      width:92%;
      color:#FFFFFF;
      text-shadow:1px 1px 1px #000000;
      text-align:left;
      /* white-space:nowrap; */
      text-overflow:ellipsis;
      box-sizing:border-box;
      font-weight:bold;
      font-size:12px;
    }
    #box_list .item_titlebg {
      display:block;
      position:absolute;
      bottom:0px;
      left:0px;
      z-index: 3;
      width:100%;
      height:40%;
      border-radius:8px;
      background-repeat:no-repeat;
      background:linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 100%);
      box-sizing:border-box;
    }
    #box_list .boxgroup .item_titlebg {
      height:60%;
      background:linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.8) 100%);
    }
    #box_list .boxgroup .item_titlebg {
      /* Trapez-Style */
      /*
      border-top-left-radius:25% 50%;
      border-top-right-radius:0%;
      border-bottom-left-radius:0%;
      border-bottom-right-radius:25% 50%;
      */
      /* Folder-Style */
      border-top-left-radius:0%;
      border-top-right-radius:10% 20%;
      border-bottom-left-radius:10% 20%;
      border-bottom-right-radius:10% 20%;
    }
    #box_list .item_bigtitlebg {
      display:block;
      position:absolute;
      bottom:0px;
      left:0px;
      z-index: 3;
      width:100%;
      height:100%;
      border-radius:8px;
      background-repeat:no-repeat;
      background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.4) 57%, rgba(0,0,0,0.1) 100%);
      box-sizing:border-box;
    }
    #box_list .item_fading {
      opacity:1;
      transition:all ease 1.5s;
      transition-property: opacity background-color;
    }
    #box_list .item_foldercount {
      display:block;
      position:absolute;
      overflow:hidden;
      top:30%;
      left:50%;
      z-index:4;
      color:#FFFFFF;
      text-shadow:2px 2px 0 #000000;
      text-align:left;
      white-space:nowrap;
      text-overflow:ellipsis;
      box-sizing:border-box;
      font-weight:bold;
      font-size:40px;
      transform:translate(-50%, -50%);
      padding:0px 5px 0px 5px;
    }
    #box_list .boxgroup .item_folderbg {
      color:transparent;
      background-color:rgba(0,0,0,0.4);
      border-style:solid;
      border-width:0px;
      border-color:rgba(0,0,0,0.4);
      border-radius:50%/50%;
    }
    #box_list img {
      display:inline;
      width:100%;
      min-height:75px;
      margin-bottom: -4px;  /* wg. border */
      border:0;
      border-radius:10px;
      box-sizing:border-box;
    }
    #box_list .boxgroup img {
      margin-bottom: -4px;  /* wg. border */
    }
    #box_list .boxgroup img {
      /* Trapez-Style */
      /*
      border-top-left-radius:25% 50%;
      border-top-right-radius:0%;
      border-bottom-left-radius:0%;
      border-bottom-right-radius:25% 50%;
      */
      /* Folder-Style */
      border-top-left-radius:0%;
      border-top-right-radius:10% 20%;
      border-bottom-left-radius:10% 20%;
      border-bottom-right-radius:10% 20%;
    }
    #box_list .item_bannernew {
      position:absolute;
      right:0px;
      top:0px;
      z-index:3;
      width:30%;
      height:70%;
      background-size:100%;
      background:url("/images/flag_new.gif") right top no-repeat;
      box-sizing:border-box;
    }
    #box_list .boxgroup .item_bannernew {
      border-top-right-radius:33% 40%;
    }
    #box_list .item_bannersoon {
      position:absolute;
      right:0px;
      top:0px;
      z-index:3;
      width:30%;
      height:50%;
      background-size:100%;
      background:url("/images/flag_soon.gif") right top no-repeat;
      box-sizing:border-box;
    }
    #box_list .boxgroup .item_bannersoon {
      border-top-right-radius:33% 40%;
    }
    #box_list .item_bannermultiplayer {
      position:absolute;
      right:0px;
      top:0px;
      z-index:3;
      width:30%;
      height:50%;
      background-size:100%;
      background:url("/images/flag_multiplayer.gif") right top no-repeat;
      box-sizing:border-box;
    }
    #box_list .item_bannerpast {
      position:absolute;
      right:0px;
      top:0px;
      z-index:3;
      width:80%;
      height:80%;
      background-size:100%;
      background:url("/images/flag_past.png") right top no-repeat;
      box-sizing:border-box;
    }
    #box_list .item_bannerover {
      position:absolute;
      left:0px;
      bottom:0px;
      z-index:3;
      width:80%;
      height:80%;
      background-size:100%;
      background:url("/images/flag_over2.png") left bottom no-repeat;
      box-sizing:border-box;
      opacity:0.85;
    }
    #box_list .item_bannerotherlocation {
      position:absolute;
      right:0px;
      top:0px;
      z-index:3;
      width:80%;
      height:80%;
      background-size:100%;
      background:url("/images/flag_otherlocation.png") right top no-repeat;
      box-sizing:border-box;
      opacity:0.85;
    }
    #box_list .item_banneralmostover {
      position:absolute;
      right:0px;
      bottom:0px;
      z-index:3;
      width:80%;
      height:50%;
      background-size:100%;
      background:url("/images/flag_almostover.png") right bottom no-repeat;
      box-sizing:border-box;
      opacity:0.85;
    }
    #box_list .item_bannermlm {
      position:absolute;
      left:0px;
      top:0px;
      z-index:3;
      width:80%;
      height:50%;
      background-size:100%;
      background:url("/images/flag_mlm.png") left top no-repeat;
      box-sizing:border-box;
      opacity:0.85;
    }
    #box_list .item_bannerfree {
      position:absolute;
      left:0px;
      top:0px;
      z-index:3;
      width:80%;
      height:50%;
      background-size:100%;
      background:url("/images/flag_free.png") left top no-repeat;
      box-sizing:border-box;
      opacity:0.85;
    }
    #box_list .item_bannerjackpot {
      position:absolute;
      left:0px;
      top:0px;
      z-index:3;
      width:80%;
      height:50%;
      background-size:100%;
      background:url("/images/flag_jackpot.png") left top no-repeat;
      box-sizing:border-box;
      opacity:0.85;
    }
    #box_list .box_title {
      box-sizing:padding-box;
      padding:6px;
      width:calc(100% - 10px);
      background-color:rgba(64, 128, 255, 0.75);
      border-radius:10px;
      font-size:20px;
      font-weight:bold;
      color:#FFFFFF;
      text-shadow:1px 1px 0 #000000;
    }
    /* button-font-size */
    @media (max-width:350px) {
      #box_list .item_foldercount { font-size:25px; }
      #box_list .item_title     { font-size:12px; }
      #box_list .item_bigtitle  { font-size:16px; }
      #box_list .item_minititle { font-size: 8px; }
      #box_list .item_gold      { font-size:20px; }
      #box_list .item_silber    { font-size:18px; }
      #box_list .item_bronze    { font-size:18px; }
      #box_list .item_hit       { font-size:10px; }
      #box_list .item_turnier   { font-size:10px; }
      #topmenu a                { font-size:11px; }
    }
    @media (min-width:351px) and (max-width:400px) {
      #box_list .item_foldercount { font-size:30px; }
      #box_list .item_title     { font-size:14px; }
      #box_list .item_bigtitle  { font-size:18px; }
      #box_list .item_minititle { font-size: 9px; }
      #box_list .item_gold      { font-size:22px; }
      #box_list .item_silber    { font-size:20px; }
      #box_list .item_bronze    { font-size:20px; }
      #box_list .item_hit       { font-size:12px; }
      #box_list .item_turnier   { font-size:12px; }
      #topmenu a                { font-size:12px; }
    }
    @media (min-width:401px) and (max-width:450px) {
      #box_list .item_foldercount { font-size:35px; }
      #box_list .item_title     { font-size:15px; }
      #box_list .item_bigtitlei { font-size:20px; }
      #box_list .item_minititle { font-size:10px; }
      #box_list .item_gold      { font-size:30px; }
      #box_list .item_silber    { font-size:26px; }
      #box_list .item_bronze    { font-size:26px; }
      #box_list .item_hit       { font-size:18px; }
      #box_list .item_turnier   { font-size:14px; }
      #topmenu a                { font-size:13px; }
    }
    @media (min-width:451px) and (max-width:500px) {
      #box_list .item_bigtitle  { font-size:22px; }
      #box_list .item_minititle { font-size:11px; }
      #box_list .item_gold      { font-size:36px; }
      #box_list .item_silber    { font-size:30px; }
      #box_list .item_bronze    { font-size:30px; }
      #box_list .item_hit       { font-size:22px; }
      #box_list .item_turnier   { font-size:16px; }
    }
    @media (min-width:501px) and (max-width:600px) {
      #box_list .item_bigtitle  { font-size:24px; }
      #box_list .item_minititle { font-size:12px; }
      #box_list .item_gold      { font-size:40px; }
      #box_list .item_silber    { font-size:36px; }
      #box_list .item_bronze    { font-size:36px; }
      #box_list .item_hit       { font-size:28px; }
      #box_list .item_turnier   { font-size:18px; }
    }
    @media (min-width:601px) and (max-width:700px) {
      #box_list .item_bigtitle  { font-size:22px; }
      #box_list .item_minititle { font-size:11px; }
      #box_list .item_gold      { font-size:30px; }
      #box_list .item_silber    { font-size:26px; }
      #box_list .item_bronze    { font-size:26px; }
      #box_list .item_hit       { font-size:18px; }
      #box_list .item_turnier   { font-size:14px; }
    }
    @media (min-width:701px) and (max-width:800px) {
      #box_list .item_bigtitle  { font-size:24px; }
      #box_list .item_minititle { font-size:12px; }
      #box_list .item_gold      { font-size:36px; }
      #box_list .item_silber    { font-size:30px; }
      #box_list .item_bronze    { font-size:30px; }
      #box_list .item_hit       { font-size:18px; }
      #box_list .item_turnier   { font-size:18px; }
    }
    @media (min-width:801px) and (max-width:900px) {
      #box_list .item_bigtitle  { font-size:22px; }
      #box_list .item_minititle { font-size:11px; }
      #box_list .item_gold      { font-size:30px; }
      #box_list .item_silber    { font-size:26px; }
      #box_list .item_bronze    { font-size:26px; }
      #box_list .item_hit       { font-size:18px; }
      #box_list .item_turnier   { font-size:14px; }
    }
    @media (min-width:901px) and (max-width:1000px) {
      #box_list .item_bigtitle  { font-size:24px; }
      #box_list .item_minititle { font-size:12px; }
      #box_list .item_gold      { font-size:36px; }
      #box_list .item_silber    { font-size:30px; }
      #box_list .item_bronze    { font-size:30px; }
      #box_list .item_hit       { font-size:22px; }
      #box_list .item_turnier   { font-size:18px; }
    }
    @media (min-width:1001px) and (max-width:1100px) {
      #box_list .item_bigtitle  { font-size:22px; }
      #box_list .item_minititle { font-size:11px; }
      #box_list .item_gold      { font-size:30px; }
      #box_list .item_silber    { font-size:26px; }
      #box_list .item_bronze    { font-size:26px; }
      #box_list .item_hit       { font-size:18px; }
      #box_list .item_turnier   { font-size:14px; }
    }
    @media (min-width:1101px) and (max-width:1200px) {
      #box_list .item_bigtitle  { font-size:24px; }
      #box_list .item_minititle { font-size:12px; }
      #box_list .item_gold      { font-size:36px; }
      #box_list .item_silber    { font-size:30px; }
      #box_list .item_bronze    { font-size:30px; }
      #box_list .item_hit       { font-size:22px; }
      #box_list .item_turnier   { font-size:18px; }
    }
    @media (min-width:1201px) and (max-width:1300px) {
      #box_list .item_bigtitle  { font-size:22px; }
      #box_list .item_minititle { font-size:11px; }
      #box_list .item_gold      { font-size:30px; }
      #box_list .item_silber    { font-size:26px; }
      #box_list .item_bronze    { font-size:26px; }
      #box_list .item_hit       { font-size:18px; }
      #box_list .item_turnier   { font-size:14px; }
    }
    @media (min-width:1301px) {
      #box_list .item_bigtitle  { font-size:24px; }
      #box_list .item_minititle { font-size:12px; }
      #box_list .item_gold      { font-size:38px; }
      #box_list .item_silber    { font-size:34px; }
      #box_list .item_bronze    { font-size:34px; }
      #box_list .item_hit       { font-size:26px; }
      #box_list .item_turnier   { font-size:16px; }
    }
    /* 2, 3, 4, 5 or 6 boxes per line: */
    @media (max-width:600px) {
      #box_list li { width:50%; }
      /*#box_list a  { margin-top:4px; margin-left:4px; }*/
      #topmenu .topmenu_item { width:50%; }
    }
    @media (min-width:601px) and (max-width:800px) {
      #box_list li { width:33.33333%; }
      /*#box_list a  { margin-top:6px; margin-left:6px; }*/
      #topmenu .topmenu_item { width:33.33333%; }
    }
    @media (min-width:801px) and (max-width:1000px) {
      #box_list li { width:25%; }
      /*#box_list a  { margin-top:8px; margin-left:8px; }*/
      #topmenu .topmenu_item { width:25%; }
    }
    @media (min-width:1001px) and (max-width:1200px) {
      #box_list li { width:20%; }
      /*#box_list a  { margin-top:10px; margin-left:10px; }*/
      #topmenu .topmenu_item { width:20%; }
    }
    @media (min-width:1201px) {
      #box_list li { width:16.66666%; }
      /*#box_list a  { margin-top:10px; margin-left:10px; }*/
      #topmenu .topmenu_item { width:16.66666%; }
    }



/* BIGGER CHECKBOXES */
.switchbox {
  height:32px;
  background-color:#E0E0E0;
  border-radius:1px;
  border-width:2px;
  border-style:solid;
  border-color:#2060FF;
  font-size:14px;
  font-weight:normal;
  text-align:left;
  padding-top:10px;
  margin:5px 0px 5px 0px;
}
.switch {
  float:left;
  width: 108px;
  height: 30px;
  _margin: 10px auto 10px 0px;
  margin: -5px 10px 10px 5px;
  position: relative;
}
.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.switch label {
  display: block;
  width: 100%;
  height: 100%;
  background: #4080FF;
  border-radius: 40px;
  box-shadow:
    inset 0 3px 8px 1px rgba(0,0,0,0.2),
    0 1px 0 rgba(255,255,255,0.5);
}
.switch label:after {
  content:"";
  position:absolute;
  z-index:-1;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: inherit;
  background: #ababab;
  background: -moz-linear-gradient(#f2f2f2, #ababab);
  background: -ms-linear-gradient(#f2f2f2, #ababab);
  background: -o-linear-gradient(#f2f2f2, #ababab);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}

.switch label:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18px; right: -18px; bottom: -18px; left: -18px;
  border-radius: inherit;
  background: #eee;
  background: -moz-linear-gradient(#e5e7e6, #eee);
  background: -ms-linear-gradient(#e5e7e6, #eee);
  background: -o-linear-gradient(#e5e7e6, #eee);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
  background: -webkit-linear-gradient(#e5e7e6, #eee);
  background: linear-gradient(#e5e7e6, #eee);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}
.switch label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
  background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
  background: -o-linear-gradient(#f7f2f6, #b2ac9e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
  background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
    inset 0 1px 0 white,
    0 0 8px rgba(0,0,0,0.3),
    0 5px 5px rgba(0,0,0,0.2);
}
.switch label i:after {
  content: "";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
  background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
  background: -o-linear-gradient(#cbc7bc, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
  background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}
.switch label i:before {
  content: "nein";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color:#F0F0F0;
  text-shadow: 0 1px 0 #404040, 0 -1px 0 #101010;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: -55%;
}

.switch input:checked ~ label {
  background: #9abb82;
  background: #C01010;
}

.switch input:checked ~ label i {
  right: -1%;
}
.switch input:checked ~ label i:before {
  content: "ja";
  right: 115%;
  color: #82a06a;
  color: #F0F0F0;
  text-shadow: 
    0 1px 0 #404040,
    0 -1px 0 #101010;
}




.games_logo_box {
  display:block;
  position:relative;
}
.games_logo_title {
  display:block;
  position:absolute;
  overflow:hidden;
  bottom:5%;
  left:4%;
  z-index:2;
  width:92%;
  color:#FFFFFF;
  text-shadow:2px 2px 0 #000000;
  text-align:left;
  white-space:nowrap;
  text-overflow:ellipsis;
  box-sizing:border-box;
  font-weight:bold;
  font-size:36px;
}
.games_logo_titlebg {
  display:block;
  position:absolute;
  bottom:0px;
  left:0px;
  z-index: 1;
  width:100%;
  height:40%;
  border-radius:8px;
  background-repeat:no-repeat;
  background:linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 100%);
  box-sizing:border-box;
}
.games_logo_img {
  display:inline;
  width:100%;
  min-height:75px;
  margin-bottom: -4px;  /* wg. border */
  border:0;
  border-radius:10px;
  box-sizing:border-box;
}



.lounge_title, .lounge_subtitle {
  width:94%;
  height:26px;
  font-size:20px;
  font-weight:bold;
  color:#FFFFFF;
  background-color:#4080FF;
  border-radius:10px;
  text-align:left;
  padding-left:5%;
}
.lounge_title {
  height:32px;
  font-size:24px;
}
.lounge_spacer {
  width:100%;
  height:8px;
}

.lounge_gh1 { position:relative; padding-left:5%; text-align:left; margin-bottom:10px; }
.OFFlounge_gh2 { position:relative; width:99%; display:grid; grid-template-columns:39% 59%; grid-gap:2%; background-color:rgba(255,255,255,0.4); border-radius:15px; }
.lounge_gh2 { position:relative; display:inline-block; width:99%; background-color:rgba(255,255,255,0.4); border-radius:15px; }
.OFFlounge_gh3 { position:relative; display:block; margin-left:5%; }
.lounge_gh3 { position:relative; display:inline-block; float:left; width:39%; margin-left:2%; margin-right:2%; margin-top:2%; }
.lounge_gh4 { width:100%; }
.lounge_gh5 { width:100%; border-radius:10px; border-color:#000000; border-width:1px; border-style:solid; magin-top:5px; margin-bottom:5px; }
.OFFlounge_gh6 { text-align:left; }
.lounge_gh6 { position:relative; display:inline-block; width:56%; text-align:left; }
.lounge_gh7 { font-size:24px; font-weight:bold; }
.lounge_gh8 { font-size:14px; font-weight:bold; }

.lounge_on1 { position:relative; padding-left:5%; text-align:left; }
.OFFlounge_on2 { position:relative; width:99%; display:grid; grid-template-columns:39% 59%; grid-gap:2%; background-color:rgba(255,255,255,0.4); border-radius:15px; margin-bottom:1%; }
.lounge_on2 { position:relative; width:99%; display:inline-block; background-color:rgba(255,255,255,0.4); border-radius:15px; margin-bottom:1%; }
.OFFlounge_on3 { position:relative; display:block; margin-left:5%; }
.lounge_on3 { position:relative; display:inline-block; width:39%; margin-left:5%; margin-right:2%; }
.lounge_on4 { width:100%; }
.lounge_on5 { width:100%; border-radius:10px; border-color:#000000; border-width:1px; border-style:solid; margin-top:5px; margin-bottom:5px; }
.lounge_on6 { font-size:20px; font-weight:bold; }
.OFFlounge_on7 { position:relative; display:block; text-align:left; }
.lounge_on7 { position:relative; display:inline-block; width:52%; text-align:left; }

.lounge_ogpp1 { padding-left:5%; padding-top:3px; }
.lounge_ogpp2 { height:64px; vertical-align:middle; margin-right:20px; }
.lounge_ogpp3 { font-weight:bold; font-size:180%; }

.lounge_gs1 { position:relative; padding-left:5%; text-align:left; }
.OFFlounge_gs2 { position:relative; width:99%; display:grid; grid-template-columns:24% 74%; grid-gap:2%; background-color:rgba(255,255,255,0.4); border-radius:15px; }
.lounge_gs2 { position:relative; display:inline-block; width:99%; background-color:rgba(255,255,255,0.4); border-radius:15px; margin-bottom:1%; }
.OFFlounge_gs3 { position:relative; display:block; margin-left:5%; }
.lounge_gs3 { position:relative; display:inline-block; float:left; width:24%; margin-left:5%; margin-right:2%; }
.lounge_gs4 { width:100%; }
.lounge_gs5 { width:100%; border-radius:10px; border-color:#000000; border-width:1px; border-style:solid; margin-top:5px; margin-bottom:5px }
.OFFlounge_gs6 { position:relative; display:block; text-align:left; }
.lounge_gs6 { position:relative; display:inline-block; width:68%; text-align:left; }
.lounge_gs7 { font-size:60px; font-weight:bold; overflow:hidden; }


@keyframes blink_pulsing {
  0%   { opacity: 1; }
  35%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
.blink_pulsing {
  animation: blink_pulsing 1s;
  animation-iteration-count: infinite;
}
@keyframes blink_gentlepulsing {
  0%   { opacity: 1; }
  17%  { opacity: 1; }
  25%  { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}
.blink_gentlepulsing {
  animation: blink_gentlepulsing 2s;
  animation-iteration-count: infinite;
}

.gametitle {
  display:block;
  position:absolute;
  overflow:hidden;
  bottom:5%;
  left:4%;
  z-index:2;
  width:92%;
  color:#FFFFFF;
  text-shadow:1px 1px 0 #000000;
  text-align:left;
  white-space:nowrap;
  text-overflow:ellipsis;
  box-sizing:border-box;
  font-weight:bold;
  font-size:24px;
}
.gametitlebg {
  display:block;
  position:absolute;
  bottom:0px;
  left:0px;
  z-index: 1;
  width:100%;
  height:40%;
  border-radius:8px;
  background-repeat:no-repeat;
  background:linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 100%);
  box-sizing:border-box;
}