/* -----------------------------------------------------------------------------
Engine:     Gametize
Author:     Gametize Pte Ltd
Description:  Structure styles
----------------------------------------------------------------------------- */

/* ---- BASE CONTAINER STRUCTURE ---- */

/* Outer full-width block element that spans across the screen */
.container { display : block; text-align:center; position : relative }
  .container.container-paddedvertical { padding-top : 30px; padding-bottom : 30px }

  /* Inner block element of max-width 1000px that is center-aligned on the screen */
  .container-inner { margin : 0 auto;  position : relative; text-align : left; max-width : 1000px; display: block }

  /* Inner block element of max-width 1140px that is center-aligned on the screen */
  .container-inner.container-inner-1140 { max-width : 1140px }

/* ---- OFFSETS ---- */

/* Main Body Offset */
body.offset-widget { padding-bottom : 80px }
body.offset-mainnavbar, body.offset-doublenavbar { padding-top : 45px }   /* Offset main navigation for both, no double navbar on web view */

@media screen and (max-width: 767px) {          /* Mobile screens */
  body.offset-doublenavbar { padding-top : 80px }   /* Offset main and subnavigation */
  body.offset-widget { padding-bottom : 50px }
}

/* ---- NAVIGATION ELEMENTS ---- */

/* Main Top Bar (Web and Mobile) */
.main-top-bar-wrap { position : fixed; left: 0; top : 0; right : 0; z-index : 150 }
  .main-top-bar { background : #b91d54; height : 45px; position : relative; text-transform : uppercase }
    .main-top-game-title { position : absolute; top : 10px; left : 15px; color : #fff; font-weight : bold; max-width : 550px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
      .main-top-game-title.withgameicon { left : 60px }
    .main-top-game-icon { position : absolute; top : 5px; left : 10px; width : 35px; height : 35px }
    a.main-top-game-link-overlay { position : absolute; top : 0; left : 0; height : 45px; width : 620px; z-index : 151; background : transparent }

@media screen and (max-width: 1170px) {   /* For smaller screen sizes */
  .main-top-game-title { max-width : 230px }
  a.main-top-game-link-overlay { width : 300px }
}

@media screen and (max-width: 767px) {    /* Mobile screens */
  .main-top-game-title { top : 12px; max-width : 220px; font-size : 0.875em; width : 200px }
  a.main-top-game-link-overlay { width : 270px }
}

/* Mobile Subnavigation Bar (Mobile Only) */
.mobile-subnavigation-bar { position : fixed; top : 45px; left: 0; right : 0; height : 35px ; background : #111; color : #fff; z-index : 150 }
.mobile-subnavigation-bar a, .mobile-subnavigation-bar a:hover { color : #fff }
.mobile-subnavigation-bar-left { position : absolute; top : 8px; left : 10px; font-size : 0.875em; }
.mobile-subnavigation-bar-middle { text-align : center; margin : 6px auto; width : 200px; font-size : 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

a.mobile-navigation-menu-toggle { position : absolute; top : 0; right : 0; padding : 9px 9px 10px 10px }
a.mobile-navigation-menu-toggle:hover, a.mobile-navigation-menu-toggle.active { background : #fff }
  .mobile-navigation-menu-toggle-icon { background-image : url(/images/core/consumer/game/navigation_sprite.png); width : 26px; height : 26px; display : inline-block; vertical-align : middle; background-position : -208px -26px }
  .mobile-navigation-menu-toggle:hover .mobile-navigation-menu-toggle-icon,
  .mobile-navigation-menu-toggle.active .mobile-navigation-menu-toggle-icon { background-position : -208px 0 }

.mobile-navigation-menu { position : fixed; top : 45px; right : 0;  z-index : 200; display : none; width : 250px }

/* ---- Search Elements (All) ---- */
a.search-toggle { position : absolute; top : 0; right : 0; padding : 9px 9px 10px 10px }
a.search-toggle:hover, a.search-toggle.active { background : #fff }
  .search-toggle-icon { background-image : url(/images/core/consumer/game/navigation_sprite.png); width : 26px; height : 26px; display : inline-block; vertical-align : middle; background-position : -182px -26px }
  .search-toggle:hover .search-toggle-icon, .search-toggle.active .search-toggle-icon { background-position : -182px 0 }

.search-bar-wrap { position : fixed; top : 45px; right : 0;  z-index : 200; background : #ddd; display : none; width : 500px;
    /*-moz-box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.25);*/
}
.search-bar { padding : 10px }

@media screen and (max-width: 767px) {    /* Mobile screens */
  a.search-toggle { right : 45px }
  .search-bar-wrap { width : 100% }
}

/* Breadcrumbs (Web Only) */
.breadbox { padding : 10px 0 }
.breadcrumb-spacer { vertical-align: bottom; font-size : 1.125em; margin : 0 10px }

a.breadcrumb { text-decoration : none; font-size : 0.75em; text-transform: uppercase; position : relative }
a.breadcrumb { max-width : 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.breadcrumb.active, a.breadcrumb.active:hover { font-weight : bold; margin-right : 0 }

/* Within-profile navigation (All) */
.navigation-toggle, a.navigation-toggle {
  position : fixed; top : 40%; z-index: 150; opacity : 0.6;
  background : #666; color : #fff ; padding : 5px 10px; font-size : 3em; text-transform: uppercase; cursor : pointer; text-decoration : none;
}
.navigation-toggle-left {
  left : 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}
.navigation-toggle-right {
  right : 0;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}
a.navigation-toggle:hover, a.navigation-toggle-highlight:hover { color : #fff; text-decoration : none }
a.navigation-toggle:hover { background : #333 }
a.navigation-toggle-highlight { background : #85d02f; opacity : 1 }
a.navigation-toggle-highlight:hover { background : #6fb81b }

@media screen and (max-width: 767px) {    /* Mobile screens */
  .navigation-toggle, a.navigation-toggle { line-height : 1; padding : 5px }
}

/* ---- Main Navigation Elements (All) ---- */
.game-navigation-wrap { position : absolute; top : 0; right : 0; text-align : center; background : #b91d54; height: 45px;}
.game-navigation-wrap.offset-search { right : 45px }
a.game-navigation {display : inline-block; text-decoration : none; height : 45px; padding : 10px 15px; color : #fff; font-size : 0.875em; box-sizing: border-box;}
a.game-navigation:hover, a.game-navigation.active { background : #fff; color : #111; }
  .game-navigation span { margin-left : 5px }
  .game-navigation-icon { background-image : url(/images/core/consumer/game/navigation_sprite.png); width : 26px; height : 26px; display : inline-block; vertical-align : middle }
  .game-navigation.home .game-navigation-icon { background-position : 0 -26px }
  .game-navigation.activity .game-navigation-icon { background-position : -26px -26px }
  .game-navigation.score .game-navigation-icon { background-position : -52px -26px }
  .game-navigation.achievements .game-navigation-icon { background-position : -78px -26px }
  .game-navigation.rewards .game-navigation-icon { background-position : -104px -26px }
  .game-navigation.redeemed .game-navigation-icon { background-position : -130px -26px }
  .game-navigation.teams .game-navigation-icon { background-position : -156px -26px }
  .game-navigation.search .game-navigation-icon { background-position : -182px -26px }
  .game-navigation.home:hover .game-navigation-icon, .game-navigation.home.active .game-navigation-icon { background-position : 0 0 }
  .game-navigation.activity:hover .game-navigation-icon, .game-navigation.activity.active .game-navigation-icon { background-position : -26px 0 }
  .game-navigation.score:hover .game-navigation-icon, .game-navigation.score.active .game-navigation-icon { background-position : -52px 0 }
  .game-navigation.achievements:hover .game-navigation-icon, .game-navigation.achievements.active .game-navigation-icon { background-position : -78px 0 }
  .game-navigation.rewards:hover .game-navigation-icon, .game-navigation.rewards.active .game-navigation-icon { background-position : -104px 0 }
  .game-navigation.redeemed:hover .game-navigation-icon, .game-navigation.redeemed.active .game-navigation-icon { background-position : -130px 0 }
  .game-navigation.teams:hover .game-navigation-icon, .game-navigation.teams.active .game-navigation-icon { background-position : -156px 0 }
  .game-navigation.search:hover .game-navigation-icon, .game-navigation.search.active .game-navigation-icon { background-position : -182px 0 }

@media screen and (max-width: 1170px) {   /* For smaller screen sizes */
  a.game-navigation { padding : 8px 8px; font-size : 0.75em }
}

@media screen and (max-width: 767px) {    /* Mobile screens */
  .game-navigation-wrap { position : relative; top : auto; right : auto; text-align : left }
  a.game-navigation {
    padding : 5px 10px; height : 26px; width : 280px; display : block; color : #fff; font-size : 1em
  }
  a.game-navigation.active { background : transparent; color : #fff } /* No highlights */
  a.game-navigation:hover { background : #111; color : #fff; }
  .game-navigation.home:hover .game-navigation-icon, .game-navigation.home.active .game-navigation-icon { background-position : 0 -26px }
  .game-navigation.activity:hover .game-navigation-icon, .game-navigation.activity.active .game-navigation-icon { background-position : -26px -26px }
  .game-navigation.score:hover .game-navigation-icon, .game-navigation.score.active .game-navigation-icon { background-position : -52px -26px }
  .game-navigation.achievements:hover .game-navigation-icon, .game-navigation.achievements.active .game-navigation-icon { background-position : -78px -26px }
  .game-navigation.rewards:hover .game-navigation-icon, .game-navigation.rewards.active .game-navigation-icon { background-position : -104px -26px }
  .game-navigation.redeemed:hover .game-navigation-icon, .game-navigation.redeemed.active .game-navigation-icon { background-position : -130px -26px }
  .game-navigation.teams:hover .game-navigation-icon, .game-navigation.teams.active .game-navigation-icon { background-position : -156px -26px }
}