/** ++++++ specific styles for the games page ++++++ **/
/* it's for showing always the scrollbar - otherwise you have a jumping content when you switch between the categories*/
html{overflow-y: scroll;}
#gamesPage{
    /*background-color: #e1e6e9;*/
    display: inline-block;
    margin-bottom: 10px;
}
#gamesPage h2 a{
    text-decoration: none;
}
#gamesPage .whiteSpace{
    height: 1px;
    width: 100%;
    background-color: #FFF;
}
#gamesPage #banner{
    position: relative;
    border-bottom: 1px solid #D3D3D3;
    background-color: #fff;
}
#gamesPage #banner .bannerCategory{
    bottom: -46px;
    position: absolute;
    right: 0;
    z-index: 1;
}
body.g940 #gamesPage #banner .bannerCategory{right: 80px;}
#gamesPageRightContent #sortingNavigation{
    margin-bottom: 10px;
    display: inline-block;
}
#gamesPageRightContent #sortingNavigation .sort{
    border-top: 1px solid #FFFFFF;
    cursor: pointer;
    padding: 2px 0 0 2px;
    cursor: pointer;
    height: 38px;
    padding: 6px 0 0 5px;
}
body.g940 #gamesPageRightContent #sortingNavigation .sort{
    padding: 6px 0 0 15px;
    height: 43px;
}
#gamesPageRightContent #sortingNavigation .sort span{
    color: #333333;
    margin: 0 0 0 5px;
    outline: medium none;
    padding: 0 5px 0 40px;
    text-decoration: none !important;
    vertical-align: middle;
    width: 139px;
    height: 33px;
}
body.g940 #gamesPageRightContent #sortingNavigation .sort span{width: 189px;}
#gamesPageRightContent #sortingNavigation .sort span{
    *display: block;
    *width: auto;
}
#gamesPageRightContent #sortingNavigation .sort .colored{display: none;}
#gamesPageRightContent #sortingNavigation .sort .nonColored{display: table-cell;}
/*#gamesPageRightContent #sortingNavigation .sort:hover,*/
#gamesPageRightContent #sortingNavigation .sort.active .colored{display: table-cell;}
/*#gamesPageRightContent #sortingNavigation .sort:hover,*/
#gamesPageRightContent #sortingNavigation .sort.active .nonColored{display: none;}

#gamesPage #topGamesBox,
#gamesPage #cardGamesBox,
#gamesPage #logicGamesBox,
#gamesPage #mobileBox,
#gamesPage #tournamentsBox,
#gamesPage #actionGamesBox{
    background-color: white;
    clear: both;
    position: relative;
}
#gamesPage #topGamesBox.hidden,
#gamesPage #cardGamesBox.hidden,
#gamesPage #logicGamesBox.hidden,
#gamesPage #mobileBox.hidden,
#gamesPage #tournamentsBox.hidden,
#gamesPage #actionGamesBox.hidden{display: none;}

#gamesPage #topGamesBox .headerBox,
#gamesPage #cardGamesBox .headerBox,
#gamesPage #logicGamesBox .headerBox,
#gamesPage #mobileBox .headerBox,
#gamesPage #tournamentsBox .headerBox,
#gamesPage #actionGamesBox .headerBox{
    padding-top: 7px;
    border-top: none;
    background-color: #f0f2f4;
    width: auto;
}
body.g940 #gamesPage #topGamesBox .headerBox,
body.g940 #gamesPage #cardGamesBox .headerBox,
body.g940 #gamesPage #logicGamesBox .headerBox,
body.g940 #gamesPage #mobileBox .headerBox,
body.g940 #gamesPage #tournamentsBox .headerBox,
body.g940 #gamesPage #actionGamesBox .headerBox{
    height: 57px;
    padding-top: 13px;
}
.gamesPage_sprite{background: url(../../images/gamesPage/gamesPage_sprite.png) top left no-repeat;}
.gamesPage_sprite.banner{background-position: -4px -5px;  width: 620px; height: 70px;}
body.g940 .gamesPage_sprite.banner{width: 700px;background-repeat: repeat}
.gamesPage_sprite.cardsVisuals{background-position: -3px -83px;  width: 430px; height: 120px;}
.gamesPage_sprite.categoryBG{background-position: -591px -80px;  width: 86px; height: 47px;}
.gamesPage_sprite.logicVisuals{background-position: -3px -206px;  width: 430px; height: 120px;}
.gamesPage_sprite.actionVisuals{background-position: -3px -329px;  width: 430px; height: 120px;}
.gamesPage_sprite.mobileVisuals{background-position: -3px -452px;  width: 430px; height: 120px;}
.gamesPage_sprite.tournamentsVisual{background-position: -3px -572px;  width: 430px; height: 120px;}
.gamesPage_sprite.allGamesVisual{background-position: -3px -698px;  width: 430px; height: 120px;}
.gamesPage_sprite.mobile_flu  { background-position: -472px -80px; width: 114px; height: 114px;}
.gamesPage_sprite.mobile_bub  {background-position: -472px -199px; width: 114px; height: 114px;}
.gamesPage_sprite.mobile_cpy  { background-position: -472px -318px; width: 114px; height: 114px;}
.gamesPage_sprite.mobile_jwl  {background-position: -472px -437px; width: 114px; height: 114px;}
.gamesPage_sprite.mobile_soh { background-position: -472px -557px; width: 114px; height: 114px;}
.gamesPage_sprite.mobile_mpy  {  background-position: -472px -676px; width: 114px; height: 114px;}
.gamesPage_sprite.mobile_mps {background-position: -472px -795px; width: 114px; height: 114px;}
.gamesPage_sprite.mobile_bus {background-position: -472px -915px; width: 114px; height: 114px;}
.gamesPage_sprite.mobile_ams {background-position: -472px -1035px; width: 114px; height: 114px;}

#gamesPage #tournamentsBox  .logo.ska,
#gamesPage #tournamentsBox  .logo.ska_tour{
    background: url(../../images/gamesPage/tournamentsLogos/lo_114x114_ska_txt.png) top left no-repeat;
    width: 114px;
    height: 114px;
}
#gamesPage #tournamentsBox  .logo.rom,
#gamesPage #tournamentsBox  .logo.rom_tour{
    background: url(../../images/gamesPage/tournamentsLogos/lo_114x114_rom_txt.png) top left no-repeat;
    width: 114px;
    height: 114px;
}
#gamesPage #tournamentsBox  .logo.bel,
#gamesPage #tournamentsBox  .logo.bel_tour{
    background: url(../../images/gamesPage/tournamentsLogos/im_114x114_bel_txt.png) top left no-repeat;
    width: 114px;
    height: 114px;
}
#gamesPage #tournamentsBox  .logo.dko,
#gamesPage #tournamentsBox  .logo.dko_tour{
    background: url(../../images/gamesPage/tournamentsLogos/lo_114x114_dko_txt.png) top left no-repeat;
    width: 114px;
    height: 114px;
}
body[lang=fr] #gamesPage #tournamentsBox .logo.minileagues{
    background: url(../../images/gamesPage/tournamentsLogos/lo_114x114_miniliga_fr.png) top left no-repeat;
    width: 114px;
    height: 114px;
}
body[lang=de] #gamesPage #tournamentsBox  .logo.minileagues{
    background: url(../../images/gamesPage/tournamentsLogos/lo_114x114_miniliga_de.png) top left no-repeat;
    width: 114px;
    height: 114px;
}
body[lang=en] #gamesPage #tournamentsBox  .logo.minileagues{
    background: url(../../images/gamesPage/tournamentsLogos/lo_114x114_miniliga_en.png) top left no-repeat;
    width: 114px;
    height: 114px;
}
#gamesPage #topGamesBox .headerBox h2,
#gamesPage #cardGamesBox .headerBox h2,
#gamesPage #logicGamesBox .headerBox h2,
#gamesPage #mobileBox .headerBox h2,
#gamesPage #tournamentsBox .headerBox h2,
#gamesPage #actionGamesBox .headerBox h2{
    line-height: 41px;
    margin-left: 10px;
    padding-left: 55px;
    width: auto;
}
body.g940 #gamesPage #topGamesBox .headerBox h2,
body.g940 #gamesPage #cardGamesBox .headerBox h2,
body.g940 #gamesPage #logicGamesBox .headerBox h2,
body.g940 #gamesPage #mobileBox .headerBox h2,
body.g940 #gamesPage #tournamentsBox .headerBox h2,
body.g940 #gamesPage #actionGamesBox .headerBox h2{
    margin-left: 23px;
}
/** ------ specific styles for the games page ------ **/
/** ++++++ specific style for the autoCompleteGamesSearch component  ++++++ **/
#autoCompleteGamesSearch{
    position: relative;
    width: 139px;z-index: 100;
    border-top:none;
    border-left:none;
}
body.g940 #autoCompleteGamesSearch{width: 219px;}
#leftContent #autoCompleteGamesSearch input{width: 119px; box-sizing: content-box;}
body.g940 #leftContent #autoCompleteGamesSearch input{width: 199px;}
.autoCompleteGamesSearch.base.gameMenuList{width: 138px !important;box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);}
body.g940 .autoCompleteGamesSearch.base.gameMenuList{width: 218px !important}
.autoCompleteGamesSearch.base.gameMenuList li{margin:0;}
.autoCompleteGamesSearch .gamesBox-active{background-position: 0 -282px;}
#gamesPage .shadowTop{
    border-top: 0px solid white;
    box-shadow: 0 -4px 3px -2px rgba(0, 0, 0, 0.2);
    top: -1px;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
}
/** ------ specific style for the autoCompleteGamesSearch component ------ **/



/* ++ fix zoom level boxes and make them more adaptive - overwrites some CSS which is only a "hack" ++ */
#gamesPage .contentBox * {
    box-sizing: border-box;
}
#gamesPage .contentBox {
    display: flex;
    flex-wrap: wrap;
}
#gamesPage .base.linkedFrameBox,
#gamesPage .base.linkedFrameBox.type_empty:hover {
    float: none;
    display: block;
}
#gamesPage .base.linkedFrameBox,
#gamesPage .base.linkedFrameBox.type_empty:hover{
    width: 25%;   
}
#gamesPage .base.linkedFrameBox.wide.type_empty:hover,
#gamesPage .base.linkedFrameBox.wide{
    width: 50%;
    min-width: 200px;
}
/* -- end of zoom level fix -- */