/* TODO: Remove and use _variables.scss */
/**
 * Mixin to generate button states
 * @param color
 * @param bg-color
 * @param border-color
 * @param hover
 * @param active
 */
/**
 * Mixin to use ellipsis for texts if they go beyond their allowed width
 * @param max-width
 */
#base-header, .btn, a.btn, .map-thumb, .loggedout-usp-container .geoleaderboards .map, #serverbrowser-filters, #serverbrowser-filters .box-content, #promo.promo-bfh .btn, #promo.promo-bfh a.btn {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }

#base-header .game-bar .dropdown-bar .soldierstats-box .rank .points {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  -o-user-select: all;
  user-select: all; }

#base-header .game-bar .grid-container:before, #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .base-login-bottom:before, .dialog.emblemselect .emblem-items:before, .dialog.soldierselect .soldier-list > li > a:before, #serverbrowser-filters .box-content:before, #server-page > header:before, #server-page-settings dl:before, #server-page-slot-info dl:before, body #base-container #user .profile-info:before, body #base-container #user .profile-info:before, .devblog .devblog-topstories-container:before, .forum-search-results-item-title:before, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-poster-name:before, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-tags:before, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-poster-enlisted:before, .base-clear:before, #base-header .game-bar .grid-container:after, #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .base-login-bottom:after, .dialog.emblemselect .emblem-items:after, .dialog.soldierselect .soldier-list > li > a:after, #serverbrowser-filters .box-content:after, #server-page > header:after, #server-page-settings dl:after, #server-page-slot-info dl:after, body #base-container #user .profile-info:after, body #base-container #user .profile-info:after, .devblog .devblog-topstories-container:after, .forum-search-results-item-title:after, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-poster-name:after, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-tags:after, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-poster-enlisted:after, .base-clear:after {
  display: table;
  content: "";
  line-height: 0; }
#base-header .game-bar .grid-container:after, #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .base-login-bottom:after, .dialog.emblemselect .emblem-items:after, .dialog.soldierselect .soldier-list > li > a:after, #serverbrowser-filters .box-content:after, #server-page > header:after, #server-page-settings dl:after, #server-page-slot-info dl:after, body #base-container #user .profile-info:after, body #base-container #user .profile-info:after, .devblog .devblog-topstories-container:after, .forum-search-results-item-title:after, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-poster-name:after, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-tags:after, .forum-threadview-post .forum-threadview-post-poster .forum-threadview-post-poster-enlisted:after, .base-clear:after {
  clear: both; }

#serverbrowser %focus-box > .server-filter, #serverbrowser %focus-box > .server-filter, #serverbrowser %focus-box-expandable.collapsed > .collapsed.server-filter {
  background-color: rgba(0, 0, 0, 0.7); }

#serverbrowser %focus-box > .server-filter, #serverbrowser %focus-box-expandable.collapsed > .collapsed.server-filter {
  background-color: rgba(0, 0, 0, 0.5); }

#serverbrowser .server-filter {
  color: #fff;
  position: relative; }
  #serverbrowser %focus-box-expandable > .server-filter {
    padding: 0 16px;
    line-height: 36px; }
  #serverbrowser %focus-box-expandable > .server-filter {
    padding: 16px; }
  #serverbrowser %focus-box-expandable > .server-filter {
    padding: 0 16px; }

#serverbrowser .server-filter.collapsed > header {
  cursor: pointer; }
#serverbrowser .server-filter.collapsed > section, #serverbrowser .server-filter.collapsed > footer {
  display: none; }

body {
  font-family: Arial, sans-serif;
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 16px;
  font-family: Purista, sans-serif;
  font-style: normal;
  font-weight: 600; }

h1, h2, h3 {
  text-transform: uppercase; }

h1 {
  font-size: 36px;
  line-height: 40px;
  margin-bottom: 8px; }

h2 {
  font-size: 36px;
  line-height: 40px;
  margin-bottom: 8px; }

h3 {
  font-size: 33px;
  line-height: 40px;
  margin-bottom: 8px; }

h4 {
  font-size: 29px;
  line-height: 32px; }

h5 {
  font-size: 23px;
  line-height: 32px;
  margin-bottom: 8px;
  text-transform: uppercase; }

h6 {
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase; }

strong, b {
  font-weight: bold; }

em, i {
  font-style: italic; }

a {
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

small {
  font-size: 70%; }

@font-face {
  font-family: 'Frutiger';
  src: url('../base/fonts/frutiger/frutigerltstd-roman-webfont.eot');
  src: url('../base/fonts/frutiger/frutigerltstd-roman-webfont.eot?#iefix') format('embedded-opentype'), url('../base/fonts/frutiger/frutigerltstd-roman-webfont.woff') format('woff'), url('../base/fonts/frutiger/frutigerltstd-roman-webfont.ttf') format('truetype'), url('../base/fonts/frutiger/frutigerltstd-roman-webfont.svg#frutiger_lt_std55_roman') format('svg');
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Frutiger Bold';
  src: url('../base/fonts/frutiger/FrutigerLTStd-Bold.woff') format('woff'), url('../base/fonts/frutiger/FrutigerLTStd-Bold.ttf') format('truetype'), url('../base/fonts/frutiger/FrutigerLTStd-Bold.svg#FrutigerLTStd-Bold') format('svg');
  font-weight: bold;
  font-style: normal; }

body, h1, h2, h3, h4, h5, a {
  color: #fff; }

.uppercase {
  text-transform: uppercase; }

.lowercase {
  text-transform: lowercase; }

h1, h2, h3, h4, h5, h6 {
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }

.header-dropdown-active #base-header .game-bar .dropdown-bar {
  box-shadow: 0 0 30px 10px rgba(185, 243, 255, 0.15); }

#base-ajax-loading {
  display: none;
  position: relative;
  top: 3px;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out; }

.ajax-loading #base-ajax-loading {
  display: inline-block; }
.ajax-loading #base-notices {
  opacity: 0; }

.base-premium #community-bar .game-logo .logo.game-bf3 {
  background-image: url(../base/bf3/header-logo-premium.png);
  width: 170px;
  background-size: 121px;
  background-position: 50% 50%; }

body.premium #base-header .grid-container.premium-bg {
  background: url(../base/bf4/overlay-p.png) no-repeat;
  background-position: 0 -48px;
  width: 992px;
  height: 48px;
  position: relative; }
body.premium #base-header .premium-bg.fade {
  background-position: 0 0;
  -webkit-transition: background-position 1s linear 1s;
  -moz-transition: background-position 1s linear 1s;
  transition: background-position 1s linear 1s; }

#community-bar {
  position: relative;
  background: #080c0f; }
  #community-bar .game-logo {
    position: relative;
    z-index: 1;
    display: inline-block; }
    #community-bar .game-logo .ajax-loading-wrapper {
      position: absolute;
      top: 9px;
      right: 100%;
      margin-right: 10px;
      z-index: 0;
      cursor: default; }
    #community-bar .game-logo .logo {
      display: block;
      width: 175px;
      height: 48px;
      background-position: 0 50%;
      background-repeat: no-repeat;
      background-size: 165px; }
      #community-bar .game-logo .logo.game-bf3 {
        background-image: url(../base/bf3/bf3-logo-m.png); }
      #community-bar .game-logo .logo.game-bf4 {
        background-image: url(../base/bf4/header-logo-bf4.png);
        width: 170px; }
        #community-bar .game-logo .logo.game-bf4.premium {
          background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/logos/logo-bf4p-73ab578c.png);
          background-size: 121px;
          background-position: 50% 50%; }
      #community-bar .game-logo .logo.cte {
        background-image: url(../base/bf4/header-logo-bf4-cte.png); }
      #community-bar .game-logo .logo.game-mohw {
        background-image: url(//d34ymitoc1pg7m.cloudfront.net/mohw/mohw-logo-9c9d7e49.png); }
  #community-bar .battlelog-logo {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-right: 0; }
    #community-bar .battlelog-logo .logo {
      display: block;
      width: 95px;
      height: 48px;
      background: url(//d34ymitoc1pg7m.cloudfront.net/common/battlelog-logo-082bd9ee.png) 0 50% no-repeat;
      background-size: contain; }
  #community-bar .user-tools {
    position: absolute;
    top: 0;
    right: 0;
    text-align: left; }
  #community-bar .dropdown-bar {
    background: #151718 url(../common/community-dropdown-bg.png);
    overflow: hidden;
    position: relative;
    height: 0;
    text-align: left;
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out; }
    #community-bar .dropdown-bar .grid-container {
      padding: 16px 0;
      text-align: center; }
      #community-bar .dropdown-bar .grid-container .row {
        display: inline-block; }
    #community-bar .dropdown-bar.tight a {
      width: 236px; }
      #community-bar .dropdown-bar.tight a.game-mohw img {
        margin-left: -118px; }
    #community-bar .dropdown-bar a {
      -webkit-transition: opacity 0.5s ease-in-out;
      -moz-transition: opacity 0.5s ease-in-out;
      transition: opacity 0.5s ease-in-out;
      display: block;
      height: 160px;
      opacity: 0;
      background-position: center center;
      position: relative;
      overflow: hidden;
      text-align: center;
      text-decoration: none; }
      #community-bar .dropdown-bar a div {
        line-height: 160px;
        background: rgba(0, 0, 0, 0.35); }
        #community-bar .dropdown-bar a div:hover {
          background: rgba(0, 0, 0, 0.7); }
      #community-bar .dropdown-bar a img {
        display: block;
        width: 320px;
        margin: 0;
        border: 0;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -160px;
        z-index: 0; }
      #community-bar .dropdown-bar a.active {
        cursor: default; }
        #community-bar .dropdown-bar a.active:before {
          content: "";
          display: block;
          position: absolute;
          z-index: 2;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          box-shadow: inset 0 0 0 4px #ff9900; }
      #community-bar .dropdown-bar a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transition: opacity 0.1s ease-out;
        -moz-transition: opacity 0.1s ease-out;
        transition: opacity 0.1s ease-out; }
      #community-bar .dropdown-bar a:hover:after, #community-bar .dropdown-bar a.active:after {
        opacity: 0;
        -webkit-transition: opacity 0 ease-out;
        -moz-transition: opacity 0 ease-out;
        transition: opacity 0 ease-out; }
  #community-bar .inner-wrapper {
    height: 48px;
    z-index: 3;
    position: relative;
    text-align: center; }
  #community-bar .outerarrow {
    position: absolute;
    top: 20%;
    left: 100%;
    width: 20px;
    height: 30px;
    cursor: pointer; }
    #community-bar .outerarrow .arrow {
      position: absolute;
      top: 50%;
      left: 0%;
      margin-top: -3px;
      margin-left: 4px;
      border: 6px solid transparent;
      border-top-color: #fff;
      opacity: 0.3;
      cursor: pointer;
      -webkit-transition: all 0.1s ease-out, opacity 0;
      -moz-transition: all 0.1s ease-out, opacity 0;
      transition: all 0.1s ease-out, opacity 0;
      -webkit-transform-origin: center 50%;
      -moz-transform-origin: center 50%;
      -ms-transform-origin: center 50%;
      -o-transform-origin: center 50%;
      transform-origin: center 50%; }
      #community-bar .outerarrow .arrow:hover {
        opacity: 0.75; }
  #community-bar.show-section-select .dropdown-bar {
    height: 192px; }
    #community-bar.show-section-select .dropdown-bar a {
      opacity: 1; }
  #community-bar.show-section-select .outerarrow .arrow {
    margin-top: -9px;
    border-top-color: transparent;
    border-bottom-color: #fff;
    opacity: 0.75; }

#base-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000; }
  #base-header .alert {
    background: black;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 0; }
  #base-header .grid-container {
    position: relative;
    width: 992px; }
  #base-header .game-bar {
    position: relative; }
    #base-header .game-bar .inner-wrapper {
      height: 47px;
      position: relative;
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      z-index: 1; }
    #base-header .game-bar .main-nav {
      position: relative;
      z-index: 2;
      float: left; }
      #base-header .game-bar .main-nav .base-section-menu {
        float: left; }
        #base-header .game-bar .main-nav .base-section-menu > li {
          float: left;
          border-right: 1px solid rgba(255, 255, 255, 0.15);
          position: relative; }
          #base-header .game-bar .main-nav .base-section-menu > li:first-child {
            border-left: 1px solid rgba(255, 255, 255, 0.15); }
          #base-header .game-bar .main-nav .base-section-menu > li.nav-home a {
            padding-left: 0; }
            #base-header .game-bar .main-nav .base-section-menu > li.nav-home a .icon-home {
              position: relative;
              top: 2px;
              opacity: 0.75;
              -webkit-transition: opacity 0.1s ease-out;
              -moz-transition: opacity 0.1s ease-out;
              transition: opacity 0.1s ease-out; }
            #base-header .game-bar .main-nav .base-section-menu > li.nav-home a:hover .icon-home {
              opacity: 1; }
          #base-header .game-bar .main-nav .base-section-menu > li.has-dropdown {
            cursor: pointer; }
            #base-header .game-bar .main-nav .base-section-menu > li.has-dropdown:after {
              content: "";
              z-index: 1;
              display: block;
              position: absolute;
              right: 2px;
              bottom: 2px;
              border: 4px solid #fff;
              border-top-color: transparent;
              border-left-color: transparent;
              opacity: 0.1; }
          #base-header .game-bar .main-nav .base-section-menu > li.soldier .profile-soldier-image {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2; }
          #base-header .game-bar .main-nav .base-section-menu > li.soldier .header-soldier-rank {
            height: 64px;
            position: absolute;
            top: -7px;
            left: 28px;
            z-index: 2;
            -webkit-transform: scale(0.75);
            -moz-transform: scale(0.75);
            -ms-transform: scale(0.75);
            -o-transform: scale(0.75);
            transform: scale(0.75);
            overflow: hidden; }
          #base-header .game-bar .main-nav .base-section-menu > li.soldier .icon-platform {
            position: absolute;
            bottom: 4px;
            left: 81px;
            z-index: 100;
            line-height: 11px; }
          #base-header .game-bar .main-nav .base-section-menu > li.soldier > a {
            padding-left: 80px; }
          #base-header .game-bar .main-nav .base-section-menu > li.active:not(.nav-home) > a, #base-header .game-bar .main-nav .base-section-menu > li.active:not(.nav-home) > a:hover, #base-header .game-bar .main-nav .base-section-menu > li.active:not(.nav-home).focused > a {
            color: #000;
            background-color: #fff;
            cursor: default;
            background-image: -webkit-linear-gradient(top, #d7d7d7 0%, rgba(215, 215, 215, 0) 50%);
            background-image: linear-gradient(to bottom, #d7d7d7 0%, rgba(215, 215, 215, 0) 50%);
            box-shadow: inset 0 10px 15px 0 rgba(0, 0, 0, 0.2), 0 0 7px 1px rgba(224, 244, 248, 0.3); }
          #base-header .game-bar .main-nav .base-section-menu > li.active.has-dropdown:after {
            border: 4px solid rgba(0, 0, 0, 0.3);
            border-top-color: transparent;
            border-left-color: transparent; }
          #base-header .game-bar .main-nav .base-section-menu > li:not(.nav-home) > a:hover, #base-header .game-bar .main-nav .base-section-menu > li:not(.nav-home).focused > a {
            color: #fff;
            background: #0a0e14; }
          #base-header .game-bar .main-nav .base-section-menu > li > div.feature-disabled {
            cursor: default; }
          #base-header .game-bar .main-nav .base-section-menu > li > div.feature-disabled, #base-header .game-bar .main-nav .base-section-menu > li > a {
            position: relative;
            display: block;
            color: #d5dde5;
            font-size: 16px;
            height: 47px;
            line-height: 47px;
            padding: 0 10px;
            text-decoration: none;
            text-transform: uppercase;
            font-family: Purista, sans-serif;
            font-style: normal;
            font-weight: 400; }
    #base-header .game-bar .dropdown-bar {
      padding: 0;
      position: relative;
      color: #fff;
      z-index: 0;
      overflow: hidden;
      height: 0;
      background-color: #0a0e14;
      -webkit-transition: height 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
      -moz-transition: height 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
      transition: height 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
      #base-header .game-bar .dropdown-bar a:not(.btn) {
        color: #fff;
        text-decoration: none; }
        #base-header .game-bar .dropdown-bar a:not(.btn):hover {
          text-decoration: underline; }
        #base-header .game-bar .dropdown-bar a:not(.btn)[disabled] {
          color: #666; }
          #base-header .game-bar .dropdown-bar a:not(.btn)[disabled] i {
            opacity: 0.75; }
      #base-header .game-bar .dropdown-bar > .dropdown-content {
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        padding-top: 16px;
        padding-bottom: 10px;
        z-index: 0;
        min-height: 190px;
        -webkit-transition: opacity 0.1s ease-out;
        -moz-transition: opacity 0.1s ease-out;
        transition: opacity 0.1s ease-out; }
        #base-header .game-bar .dropdown-bar > .dropdown-content.active {
          opacity: 1;
          z-index: 1; }
        #base-header .game-bar .dropdown-bar > .dropdown-content .recommended {
          height: 190px; }
      #base-header .game-bar .dropdown-bar section > header {
        cursor: default;
        margin-bottom: 6px; }
        #base-header .game-bar .dropdown-bar section > header h1 {
          font-size: 13px;
          color: #898989;
          line-height: 22px;
          text-transform: uppercase;
          font-family: Purista, sans-serif;
          font-style: normal;
          font-weight: 400; }
        #base-header .game-bar .dropdown-bar section > header + .dropdown-menu {
          margin-top: -11px; }
      #base-header .game-bar .dropdown-bar .dropdown-menu {
        position: relative; }
        #base-header .game-bar .dropdown-bar .dropdown-menu > a, #base-header .game-bar .dropdown-bar .dropdown-menu div {
          display: block;
          margin: 0 0 7px 0;
          padding: 1px 0 0 16px;
          line-height: 31px;
          text-transform: uppercase;
          text-decoration: none;
          font-size: 19px;
          font-family: Purista, sans-serif;
          font-style: normal;
          font-weight: 400;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box; }
          #base-header .game-bar .dropdown-bar .dropdown-menu > a [class^="icon-"], #base-header .game-bar .dropdown-bar .dropdown-menu > a [class*=" icon-"], #base-header .game-bar .dropdown-bar .dropdown-menu div [class^="icon-"], #base-header .game-bar .dropdown-bar .dropdown-menu div [class*=" icon-"] {
            margin-right: 6px; }
        #base-header .game-bar .dropdown-bar .dropdown-menu > a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          text-decoration: none; }
      #base-header .game-bar .dropdown-bar .recommended-servers {
        margin-top: 4px; }
        #base-header .game-bar .dropdown-bar .recommended-servers a:hover {
          text-decoration: none; }
        #base-header .game-bar .dropdown-bar .recommended-servers > header {
          margin-bottom: 8px; }
        #base-header .game-bar .dropdown-bar .recommended-servers:hover > .server {
          opacity: 0.75; }
        #base-header .game-bar .dropdown-bar .recommended-servers > .server {
          height: 42px;
          padding-left: 72px;
          position: relative;
          color: #fff;
          font-size: 12px;
          line-height: 14px;
          margin-bottom: 10px;
          cursor: pointer; }
          #base-header .game-bar .dropdown-bar .recommended-servers > .server:hover {
            opacity: 1; }
          #base-header .game-bar .dropdown-bar .recommended-servers > .server .map-thumb {
            position: absolute;
            top: 0;
            left: 0;
            background: red; }
          #base-header .game-bar .dropdown-bar .recommended-servers > .server .server-name {
            width: 100%;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
            top: -2px;
            padding-bottom: 1px; }
          #base-header .game-bar .dropdown-bar .recommended-servers > .server .details {
            color: #a8a8a8;
            white-space: nowrap;
            padding-bottom: 2px; }
            #base-header .game-bar .dropdown-bar .recommended-servers > .server .details > span {
              float: left;
              margin-right: 8px;
              overflow: hidden;
              width: 255px;
              text-overflow: ellipsis; }
          #base-header .game-bar .dropdown-bar .recommended-servers > .server .recommend-reason {
            color: #a8a8a8;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
            #base-header .game-bar .dropdown-bar .recommended-servers > .server .recommend-reason em {
              color: #fff;
              font-style: italic; }
      #base-header .game-bar .dropdown-bar .platoons-list:hover .platoon-item {
        opacity: 0.75; }
      #base-header .game-bar .dropdown-bar .platoons-list .platoon-item {
        min-height: 26px;
        margin-bottom: 10px; }
        #base-header .game-bar .dropdown-bar .platoons-list .platoon-item:hover {
          opacity: 1; }
        #base-header .game-bar .dropdown-bar .platoons-list .platoon-item.platoon-invite > a {
          padding-right: 72px; }
        #base-header .game-bar .dropdown-bar .platoons-list .platoon-item.platoon-invite .invite-response-actions {
          width: 62px;
          position: absolute;
          top: 0;
          right: 0; }
          #base-header .game-bar .dropdown-bar .platoons-list .platoon-item.platoon-invite .invite-response-actions .response-button {
            width: 25px;
            height: 26px;
            float: left;
            margin-left: 6px;
            border: 0;
            cursor: pointer; }
          #base-header .game-bar .dropdown-bar .platoons-list .platoon-item.platoon-invite .invite-response-actions.accept {
            background: url(../comcenter/friend-accept-button.png); }
          #base-header .game-bar .dropdown-bar .platoons-list .platoon-item.platoon-invite .invite-response-actions.deny {
            background: url(../comcenter/friend-deny-button.png); }
        #base-header .game-bar .dropdown-bar .platoons-list .platoon-item > a {
          display: block;
          height: 26px;
          padding: 0 0 0 36px;
          position: relative;
          color: #353535;
          font-size: 12px;
          cursor: pointer;
          color: #a8a8a8;
          text-decoration: none; }
        #base-header .game-bar .dropdown-bar .platoons-list .platoon-item .primary-indicator {
          position: absolute;
          top: 10px;
          left: -14px;
          width: 11px;
          height: 8px;
          background: url(../base/shared/check.png) no-repeat; }
        #base-header .game-bar .dropdown-bar .platoons-list .platoon-item .emblem {
          width: 26px;
          height: 26px;
          position: absolute;
          left: 0;
          top: 0; }
        #base-header .game-bar .dropdown-bar .platoons-list .platoon-item .name {
          line-height: 1;
          padding: 1px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: -2px; }
      #base-header .game-bar .dropdown-bar .soldierstats-box {
        color: #fff;
        position: relative;
        min-height: 190px; }
        #base-header .game-bar .dropdown-bar .soldierstats-box .loadticker-wrapper {
          text-align: center;
          padding: 50px 0; }
        #base-header .game-bar .dropdown-bar .soldierstats-box .soldier-switch {
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 12px;
          z-index: 1;
          color: #ececec;
          cursor: pointer; }
        #base-header .game-bar .dropdown-bar .soldierstats-box header {
          position: relative;
          z-index: 1; }
          #base-header .game-bar .dropdown-bar .soldierstats-box header .name {
            font-size: 23px;
            margin-bottom: 10px;
            font-family: Purista, sans-serif;
            font-style: normal;
            font-weight: 600; }
          #base-header .game-bar .dropdown-bar .soldierstats-box header .platform {
            margin-bottom: 10px; }
            #base-header .game-bar .dropdown-bar .soldierstats-box header .platform:before, #base-header .game-bar .dropdown-bar .soldierstats-box header .platform:after {
              display: table;
              content: "";
              line-height: 0; }
            #base-header .game-bar .dropdown-bar .soldierstats-box header .platform:after {
              clear: both; }
        #base-header .game-bar .dropdown-bar .soldierstats-box .rank {
          min-height: 64px;
          position: relative;
          z-index: 1; }
          #base-header .game-bar .dropdown-bar .soldierstats-box .rank:before, #base-header .game-bar .dropdown-bar .soldierstats-box .rank:after {
            display: table;
            content: "";
            line-height: 0; }
          #base-header .game-bar .dropdown-bar .soldierstats-box .rank:after {
            clear: both; }
          #base-header .game-bar .dropdown-bar .soldierstats-box .rank .rank-progress {
            padding-left: 64px; }
          #base-header .game-bar .dropdown-bar .soldierstats-box .rank .insignia {
            position: absolute;
            top: 0;
            left: 0; }
          #base-header .game-bar .dropdown-bar .soldierstats-box .rank .title {
            font-size: 14px;
            margin-bottom: 2px;
            font-family: Purista, sans-serif;
            font-style: normal;
            font-weight: 400; }
          #base-header .game-bar .dropdown-bar .soldierstats-box .rank .progress-bar {
            width: 150px; }
          #base-header .game-bar .dropdown-bar .soldierstats-box .rank .points {
            font-size: 12px;
            color: #a8a8a8;
            float: left; }
            #base-header .game-bar .dropdown-bar .soldierstats-box .rank .points em {
              color: #fff;
              font-style: normal; }
      #base-header .game-bar .dropdown-bar .soldierstats-pic-container {
        position: absolute;
        top: 30px;
        right: 0;
        bottom: 0;
        z-index: 1; }
      #base-header .game-bar .dropdown-bar .padder {
        padding-right: 16px; }
  #base-header .sticky-bar {
    position: relative;
    z-index: -3; }

#facebook-bar {
  position: relative;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  height: 168px;
  color: #fff;
  padding-top: 16px;
  margin-top: 96px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  #facebook-bar a.avatar {
    width: 136px;
    height: 136px;
    float: left;
    margin-right: 16px; }
  #facebook-bar .buy {
    float: right;
    position: relative; }
    #facebook-bar .buy i.box-art {
      display: block;
      background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/bf4-boxshots-e75e198f.png);
      background-size: 100%;
      width: 140px;
      height: 119px;
      margin-left: 30px;
      margin-bottom: 8px; }
    #facebook-bar .buy a.btn {
      position: absolute;
      right: 4px;
      bottom: -10px; }
  #facebook-bar .info-content {
    color: #a8a8a8;
    font-size: 14px; }
    #facebook-bar .info-content h3 {
      color: #F5AA25;
      font-size: 24px;
      text-transform: none;
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 600;
      margin: 0; }
    #facebook-bar .info-content p {
      margin-bottom: 12px; }
      #facebook-bar .info-content p a.learn-more {
        color: #fff; }

#base-header-secondary-nav {
  float: right;
  position: relative;
  z-index: 1;
  line-height: 47px; }
  #base-header-secondary-nav > ul {
    overflow: hidden; }
    #base-header-secondary-nav > ul > li {
      float: left;
      padding-left: 10px; }
      #base-header-secondary-nav > ul > li.active a {
        color: #fff;
        opacity: 1; }
      #base-header-secondary-nav > ul > li > a {
        display: block;
        color: #dbdbdb;
        opacity: 0.75;
        font-size: 14px;
        text-transform: uppercase;
        text-decoration: none;
        font-family: Purista, sans-serif;
        font-style: normal;
        font-weight: 400; }
        #base-header-secondary-nav > ul > li > a.premium-link {
          color: #f7da8d; }
        #base-header-secondary-nav > ul > li > a.premium {
          overflow: hidden;
          text-indent: 100%;
          color: #cda51d;
          background: url(../base/bf4/logo-p-s.png) no-repeat 0 17px;
          width: 82px; }
        #base-header-secondary-nav > ul > li > a:hover {
          opacity: 1; }

#base-header-user-tools .header-signup-link {
  font-size: 12px;
  color: #fff;
  height: 13px;
  line-height: 13px;
  border-left: 1px solid #3c4042;
  padding-left: 5px;
  margin-top: 10px;
  float: left;
  position: relative;
  left: -1px; }
#base-header-user-tools .header-login-button {
  height: 47px;
  float: left; }
  #base-header-user-tools .header-login-button.popover-visible {
    background: #0a0e14; }
    #base-header-user-tools .header-login-button.popover-visible .login-btn {
      background: transparent;
      cursor: default; }
      #base-header-user-tools .header-login-button.popover-visible .login-btn:hover {
        background: transparent; }
  #base-header-user-tools .header-login-button .login-btn {
    line-height: 33px;
    background: transparent;
    border: 0;
    padding: 0 5px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    margin: 0;
    outline: 0; }
    #base-header-user-tools .header-login-button .login-btn:hover span {
      text-decoration: underline; }
#base-header-user-tools .base-login-remember {
  font-size: 12px; }
#base-header-user-tools .tools > li {
  float: left; }
  #base-header-user-tools .tools > li:last-child .tools-item {
    right: 0;
    z-index: 0; }
#base-header-user-tools .tools .tools-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 36px;
  min-width: 36px;
  position: relative;
  right: -1px;
  z-index: 1;
  margin: 6px 0 0 0; }
  #base-header-user-tools .tools .tools-item.comcenter-toggle {
    margin-left: 8px; }
  #base-header-user-tools .tools .tools-item + .popover {
    -webkit-transform: translateY(13px);
    -moz-transform: translateY(13px);
    -ms-transform: translateY(13px);
    -o-transform: translateY(13px);
    transform: translateY(13px); }
    #base-header-user-tools .tools .tools-item + .popover .gamemanager-state.fail, #base-header-user-tools .tools .tools-item + .popover .gamemanager-state.success {
      background: transparent; }
  #base-header-user-tools .tools .tools-item:hover {
    background: #191c21; }
  #base-header-user-tools .tools .tools-item.popover-visible {
    background: #353a3f;
    z-index: 2; }
  #base-header-user-tools .tools .tools-item.pro {
    cursor: pointer;
    right: 0;
    z-index: 0; }
    #base-header-user-tools .tools .tools-item.pro.popover-visible .username, #base-header-user-tools .tools .tools-item.pro:hover .username {
      color: #fff; }
    #base-header-user-tools .tools .tools-item.pro .avatar {
      float: right;
      position: relative; }
    #base-header-user-tools .tools .tools-item.pro .username {
      padding: 0 12px 0 11px;
      font-size: 12px;
      color: #d5dde5;
      line-height: 32px;
      display: inline-block;
      margin: 2px 0 0 0; }
      #base-header-user-tools .tools .tools-item.pro .username:hover {
        text-decoration: none; }
#base-header-user-tools .tools .log {
  cursor: pointer; }
  #base-header-user-tools .tools .log:after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(../base/shared/header-icons.png) top left no-repeat;
    opacity: 0.3;
    position: relative;
    top: 3px;
    left: 3px; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
      #base-header-user-tools .tools .log:after {
        background-image: url("../base/shared/header-icons@2x.png");
        background-size: 240px 60px; } }
  #base-header-user-tools .tools .log:hover:after, #base-header-user-tools .tools .log:active:after, #base-header-user-tools .tools .log.popover-visible:after {
    opacity: 1; }
  #base-header-user-tools .tools .log.notifications:after {
    background-position: -90px 0; }
  #base-header-user-tools .tools .log.notifications.highlight:after {
    background-position: -90px -30px; }
  #base-header-user-tools .tools .log.missions:after {
    background-position: -120px 0; }
  #base-header-user-tools .tools .log.missions.highlight:after {
    background-position: -120px -30px; }
  #base-header-user-tools .tools .log.reports:after {
    background-position: -60px 0; }
  #base-header-user-tools .tools .log.reports.highlight:after {
    background-position: -60px -30px; }
  #base-header-user-tools .tools .log.matches:after {
    background-position: -30px 0; }
  #base-header-user-tools .tools .log.matches.highlight:after {
    background-position: -30px -30px; }
  #base-header-user-tools .tools .log.gamemanager:after {
    background-position: 0 0; }
  #base-header-user-tools .tools .log.gamemanager.highlight:after {
    background-position: 0 -30px; }
  #base-header-user-tools .tools .log.gamemanager {
    display: none; }
  #base-header-user-tools .tools .log.gamemanager .base-section-menu-dropdown {
    width: 304px;
    line-height: 16px; }
  #base-header-user-tools .tools .log.highlight {
    position: relative; }
    #base-header-user-tools .tools .log.highlight:after {
      opacity: 1;
      background-position-y: -30px; }
  #base-header-user-tools .tools .log > div[data-bind-toggle=popover] {
    width: 100%;
    height: 100%; }
#base-header-user-tools .tools.login-tools .tools-item, #base-header-user-tools .tools.login-tools .tools-item:hover {
  background: transparent; }
#base-header-user-tools .tools.login-tools .popover {
  padding: 0;
  color: #a8a8a8; }
  #base-header-user-tools .tools.login-tools .popover input.base-login-input {
    color: #ffffff;
    padding-left: 0; }
#base-header-user-tools .tools .popover {
  width: 272px;
  background: #0a0e14;
  margin-top: -10px;
  z-index: -1;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  border: 0;
  margin-top: -11px; }
  #base-header-user-tools .tools .popover .popover-callout {
    display: none; }
  #base-header-user-tools .tools .popover .popover-body {
    color: #a8a8a8;
    border-top: 0; }
    #base-header-user-tools .tools .popover .popover-body li {
      font-weight: bold; }
      #base-header-user-tools .tools .popover .popover-body li:hover > a {
        background: rgba(255, 255, 255, 0.1); }
      #base-header-user-tools .tools .popover .popover-body li:first-child > a {
        border-top: none; }
      #base-header-user-tools .tools .popover .popover-body li > a {
        color: #a8a8a8;
        border-top: 1px solid #302f33; }
        #base-header-user-tools .tools .popover .popover-body li > a#toggleInvisible span {
          padding-right: 25px; }
    #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown a {
      position: relative;
      padding-left: 36px;
      color: #fff;
      font-weight: normal; }
      #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown a [class^="icon-"], #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown a [class*=" icon-"] {
        position: absolute;
        top: 50%;
        left: 12px;
        margin-top: -7px; }
    #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown li.facebook i.fb-icon {
      position: absolute;
      top: 50%;
      left: 12px;
      margin-top: -7px;
      background: url(../base/shared/icon-fb-share.png);
      width: 14px;
      height: 14px; }
    #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown li.facebook div.switch {
      margin: 0;
      position: absolute;
      top: 9px;
      right: 10px; }
    #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown .signout a {
      color: #a8a8a8; }
    #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown .invisible-mode {
      height: 25px;
      line-height: 25px;
      padding-left: 35px;
      padding-right: 10px;
      font-size: 12px; }
      #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown .invisible-mode #goVisible {
        cursor: pointer;
        position: relative;
        float: right;
        top: 6px; }
    #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown .profile-progression .completion-progression {
      padding: 12px 14px 5px;
      background-color: rgba(72, 140, 90, 0.8);
      font-size: 12px; }
      #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown .profile-progression .completion-progression > div {
        margin-top: 4px; }
        #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown .profile-progression .completion-progression > div span, #base-header-user-tools .tools .popover .popover-body .header-profile-dropdown .profile-progression .completion-progression > div a {
          font-size: 12px;
          color: #fff;
          padding-left: 0; }
    #base-header-user-tools .tools .popover .popover-body .admin a {
      padding-left: 36px;
      font-weight: normal; }
    #base-header-user-tools .tools .popover .popover-body .profile-icon-box {
      width: 36px;
      height: 36px;
      float: left;
      text-align: center; }
      #base-header-user-tools .tools .popover .popover-body .profile-icon-box .profile-icon {
        width: 11px;
        height: 11px;
        display: block;
        position: relative;
        top: 18px;
        margin: auto;
        background: transparent url(../common/profilehead.png) no-repeat 100% 50%; }
      #base-header-user-tools .tools .popover .popover-body .profile-icon-box .invis-icon {
        width: 11px;
        height: 11px;
        display: block;
        position: relative;
        top: 13px;
        margin: auto;
        background: transparent url(../common/profileinvis.png) no-repeat 100% 50%; }
    #base-header-user-tools .tools .popover .popover-body li.profile > a {
      color: #fff;
      line-height: 16px;
      padding-top: 6px;
      padding-bottom: 6px;
      font-weight: normal; }
    #base-header-user-tools .tools .popover .popover-body li.profile span {
      display: block;
      color: #8a8a8a;
      font-size: 11px; }
    #base-header-user-tools .tools .popover .popover-body li.signout > a {
      text-align: right;
      padding-right: 10px;
      font-weight: normal; }
  #base-header-user-tools .tools .popover .base-header-login-dropdown {
    padding: 0; }
    #base-header-user-tools .tools .popover .base-header-login-dropdown #base-login-ajax-loader {
      position: absolute;
      margin: 0;
      display: none;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      top: 0;
      left: 0;
      z-index: 2; }
      #base-header-user-tools .tools .popover .base-header-login-dropdown #base-login-ajax-loader .loader.small {
        display: block;
        margin: 0 auto;
        position: relative;
        top: 50%;
        margin-top: -16px; }
    #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container {
      padding: 16px; }
      #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .originconnect-status {
        display: none; }
      #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .base-login-bottom {
        min-height: 28px;
        margin-top: 16px; }
        #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .base-login-bottom .base-login-rmbrme {
          float: left;
          margin-top: 3px;
          margin-left: 0;
          font-size: 12px; }
        #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .base-login-bottom label {
          position: relative;
          top: -1px; }
        #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .base-login-bottom .base-login-submitbutton {
          margin: 0; }
      #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .base-login-popup-account-actions {
        width: 272px;
        padding-top: 6px;
        padding-bottom: 6px; }
      #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .common-form-input-wrapper.base-login-input-wrapper {
        margin-bottom: 10px;
        position: relative;
        background: #fff;
        line-height: 13px; }
        #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .common-form-input-wrapper.base-login-input-wrapper:last-child {
          margin-bottom: 0; }
        #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .common-form-input-wrapper.base-login-input-wrapper input {
          width: 100%;
          box-sizing: border-box;
          border: 0;
          background: transparent;
          font-size: 12px;
          color: #000;
          padding: 8px; }
        #base-header-user-tools .tools .popover .base-header-login-dropdown .form-container .common-form-input-wrapper.base-login-input-wrapper span {
          top: 9px;
          left: 11px;
          font-size: 12px;
          color: #8a8a8a; }
    #base-header-user-tools .tools .popover .base-header-login-dropdown footer {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      text-align: center; }
      #base-header-user-tools .tools .popover .base-header-login-dropdown footer a {
        text-transform: none;
        color: #a8a8a8;
        line-height: 22px;
        font-size: 12px; }

#base-header .game-bar .inner-wrapper {
  background: #141b28; }
#base-header .game-bar .main-nav .base-section-menu > li {
  padding: 0; }
  #base-header .game-bar .main-nav .base-section-menu > li > div.feature-disabled, #base-header .game-bar .main-nav .base-section-menu > li > a {
    color: #fff;
    padding: 0 15px;
    font-family: Frutiger, sans-serif;
    font-style: normal;
    font-weight: 400; }
    #base-header .game-bar .main-nav .base-section-menu > li > div.feature-disabled.agent-link, #base-header .game-bar .main-nav .base-section-menu > li > a.agent-link {
      line-height: 1;
      padding-left: 90px; }
  #base-header .game-bar .main-nav .base-section-menu > li.active:not(.nav-home) > a, #base-header .game-bar .main-nav .base-section-menu > li.active:not(.nav-home) > a:hover, #base-header .game-bar .main-nav .base-section-menu > li.active:not(.nav-home).focused > a {
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.04) 50%), -webkit-linear-gradient(top, #b1b1b1 0%, #fff 100%);
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.04) 50%), linear-gradient(to bottom, #b1b1b1 0%, #fff 100%);
    background-size: 100% 2px, auto; }
#base-header .game-bar .dropdown-bar section > header h1 {
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }
#base-header .game-bar .dropdown-bar .dropdown-menu > a, #base-header .game-bar .dropdown-bar .dropdown-menu div {
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }
#base-header .game-bar .dropdown-bar .soldierstats-box header .name {
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }
#base-header .game-bar .dropdown-bar .soldierstats-box header .rank .title {
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }

#community-bar .game-logo .logo.game-bfh {
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/logos/bfh-logo-3b6b0417.png);
  background-size: auto 37px;
  background-position: center center; }

#base-header-user-tools .tools .popover .base-header-login-dropdown #base-login-ajax-loader .loader.small {
  margin-top: -32px; }
#base-header-user-tools .tools .username {
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

#base-header-secondary-nav {
  float: left; }
  #base-header-secondary-nav > ul > li {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0; }
    #base-header-secondary-nav > ul > li > a {
      padding: 0 20px;
      font-family: Frutiger, sans-serif;
      font-style: normal;
      font-weight: 400;
      color: #fff;
      opacity: 1; }
      #base-header-secondary-nav > ul > li > a:hover {
        background: #0a0e14; }

.bfh-preorder-btn {
  float: right;
  background-color: #d66e29;
  color: #fff;
  padding: 0 20px;
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 47px; }
  .bfh-preorder-btn:hover {
    background-color: #fff;
    color: #000;
    text-decoration: none; }

#base-header span.agent-tag {
  display: block;
  padding-top: 16px; }
#base-header span#cash-balance-container {
  position: relative;
  color: #41b946;
  font-weight: bold;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: block;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  #base-header span#cash-balance-container:hover {
    cursor: default; }

body {
  background: #191f2a; }

#base-background {
  background: #141822 url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/backgrounds/bg-bfh-b657c171.jpg) 50% 0 no-repeat;
  background-size: auto; }

#base-container {
  position: relative;
  width: 992px;
  margin: 0 auto; }

body.battlescreen #base-container {
  width: auto;
  padding: 0;
  margin: 0; }

h1.primary, #battlereport > header h1, #base-container .content > section > header h1, .forum-start-title h1, .forum-page-title h1, #forum-preview-post-area h1 {
  display: inline-block;
  line-height: 37px;
  color: #fff;
  margin: 0 0 16px 0;
  padding: 0;
  letter-spacing: 0;
  font-family: "Frutiger Bold", sans-serif;
  font-weight: bold; }

#geoleaderboard-container .primary {
  margin-left: 8px; }

#forum-preview-post-area h1 {
  margin-top: 16px;
  margin-bottom: 0; }
#forum-preview-post-area .forum-post-preview-container {
  margin-top: 8px; }

table.table-hover > tbody > tr:hover td {
  background-color: rgba(0, 0, 0, 0.7); }

/*table.table-striped {
    > tbody > tr:nth-child(odd) {
        background: rgba(0, 0, 0, 0.35);
    }

    &.table-hover {
        > tbody > tr:nth-child(odd) {
            &:hover {
                background-color: rgba(0, 0, 0, 0.5);
            }
        }
    }
}*/
html:not(.is-ios) table.table th, html:not(.is-ios) table.table td {
  background-clip: padding-box; }

table.table {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 16px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15); }
  table.table .center {
    text-align: center; }
  table.table .middle {
    vertical-align: middle; }
  table.table .right {
    text-align: right; }
  table.table th, table.table td {
    white-space: nowrap;
    padding: 10px 15px;
    position: relative;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid transparent;
    border-left: 0;
    border-top: 0; }
    table.table th:last-child, table.table th.no-separator, table.table td:last-child, table.table td.no-separator {
      box-shadow: none;
      border-right: 0; }
    table.table th.less-padding, table.table td.less-padding {
      padding: 0 6px; }
    table.table th.center, table.table td.center {
      text-align: center; }
    table.table th.right, table.table td.right {
      text-align: right; }
    table.table th .pos-rel, table.table td .pos-rel {
      position: relative;
      width: 100%;
      height: 100%; }
  table.table tbody tr:last-child td, table.table tbody tr:last-child th, table.table tfoot tr:last-child td, table.table tfoot tr:last-child th {
    border-bottom: 0; }
  table.table > thead th, table.table > tfoot th {
    background-color: rgba(7, 7, 7, 0.8);
    color: #a8a8a8;
    text-transform: uppercase;
    font-size: 11px; }
  table.table > tfoot th {
    line-height: 25px; }
  table.table > tbody > tr {
    position: relative; }
    table.table > tbody > tr.active {
      box-shadow: 0 0 7px 0 #e0f4f8; }
      table.table > tbody > tr.active > td {
        color: #000;
        background: rgba(255, 255, 255, 0.9); }
        table.table > tbody > tr.active > td.no-separator {
          box-shadow: none; }
        table.table > tbody > tr.active > td:last-child {
          box-shadow: none; }

table.table-leaderboard {
  font-size: 12px; }
  table.table-leaderboard.table-hover tbody tr {
    cursor: pointer; }
  table.table-leaderboard .position, table.table-leaderboard .score {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400; }
  table.table-leaderboard .position {
    text-align: center;
    font-size: 16px;
    width: 28px; }
  table.table-leaderboard .me .position {
    background: #ebca2f;
    color: #000; }
  table.table-leaderboard .score {
    text-align: right;
    font-size: 16px; }
  table.table-leaderboard .user {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #8a8a8a;
    line-height: 14px; }
    table.table-leaderboard .user a {
      font-weight: bold;
      color: #fff; }
  table.table-leaderboard .avatar {
    float: left;
    margin: -5px 0;
    margin-right: 8px; }
  table.table-leaderboard .common-playername-personaname {
    font-weight: bold;
    margin-bottom: 2px; }
    table.table-leaderboard .common-playername-personaname.solo {
      margin-top: 7px; }
  table.table-leaderboard .common-playername-username {
    color: #a8a8a8; }
  table.table-leaderboard .played-rounds {
    color: #808080;
    width: 50px; }
    table.table-leaderboard .played-rounds .dots {
      margin-top: -4px; }
      table.table-leaderboard .played-rounds .dots > li {
        width: 7px;
        height: 7px;
        border: 1px solid #717171;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        display: inline-block; }
        table.table-leaderboard .played-rounds .dots > li.active {
          background: #fff;
          border: none; }
  table.table-leaderboard .status {
    color: #a8a8a8;
    text-transform: uppercase; }
  table.table-leaderboard .show-more {
    cursor: pointer;
    line-height: 8px; }
    table.table-leaderboard .show-more td:after {
      position: relative;
      display: inline;
      content: "▪ ▪ ▪"; }

#footer-wrapper {
  position: absolute;
  height: 207px;
  bottom: -207px;
  clear: both;
  background: transparent;
  z-index: 0;
  color: #a8a8a8; }

.footer-mirror {
  width: 1024px;
  height: 54px;
  position: absolute;
  bottom: -54px;
  left: 1px;
  /*background: url(../footer/footer-bg-mirror.png) 50% -1px no-repeat;*/ }

.base-content-full-width .footer-mirror {
  display: none; }
.base-content-full-width #footer {
  padding-bottom: 54px;
  background: transparent; }

#footer-social {
  min-height: 201px;
  padding-top: 21px;
  margin-bottom: 22px; }
  #footer-social #footer-social {
    padding-top: 30px; }
  #footer-social .footer-box {
    width: 280px;
    min-height: 201px;
    float: left;
    margin: 0 50px 0 0;
    position: relative; }
    #footer-social .footer-box .footer-box-header {
      color: #ffffff;
      /*text-shadow: 0 0 1px #b7b7b7;*/
      font-family: Tahoma, Arial, sans-serif;
      font-weight: bold;
      font-size: 11px;
      margin-bottom: 16px;
      text-transform: uppercase; }

.base-content-full-width #footer-social .footer-box .footer-box-header {
  color: #353535; }

#footer-social .footer-box.last {
  margin-right: 0;
  width: 330px; }

#footer-poll .footer-poll-title {
  padding: 0 0 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #ffffff; }

.base-content-full-width #footer-poll .footer-poll-title {
  color: #353535; }

#footer-poll .footer-poll-novoting {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2; }
#footer-poll .footer-poll-voted-spacer {
  height: 20px; }
#footer-poll .footer-poll-totalvotes, #footer-poll .footer-poll-notloggedin {
  margin: 10px 0;
  font-size: 12px;
  color: #8a8a8a; }

.base-content-full-width #footer-poll .footer-poll-totalvotes, .base-content-full-width #footer-poll .footer-poll-notloggedin {
  color: #353535; }

#footer-poll .footer-poll-notloggedin {
  float: right;
  font-size: 10px;
  margin-top: 14px; }
  #footer-poll .footer-poll-notloggedin a {
    font-size: 10px; }
#footer-poll .footer-poll-totalvotes {
  margin-top: 15px;
  font-size: 11px;
  float: left; }
#footer-poll #footer-poll-form {
  margin: 0; }

#footer-poll-form input[type=submit] {
  margin: 10px 0 0 0; }
#footer-poll-form .footer-poll-answer {
  clear: both;
  margin: 2px 0;
  color: #a5a5a5; }

.base-content-full-width #footer-poll-form .footer-poll-answer {
  color: #606060; }

#footer-poll-form .footer-poll-answer.on label span {
  background-position: 0 -10px; }
#footer-poll-form .footer-poll-answer .checkboxicon {
  background: url(../main/poll-checkbox.png);
  width: 10px;
  height: 10px;
  top: 1px;
  margin-right: 5px;
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 0 0;
  cursor: pointer; }
#footer-poll-form .footer-poll-answer input {
  display: none; }
#footer-poll-form .footer-poll-answer label {
  font-size: 12px;
  font-weight: normal; }
#footer-poll-form .footer-pollanswer-radio {
  margin: 8px 10px 0 0; }

#footer-poll .footer-poll-answertitle {
  overflow: hidden;
  margin: 6px 0;
  color: #a5a5a5; }

.base-content-full-width #footer-poll .footer-poll-answertitle {
  color: #353535; }

#footer-poll .footer-poll-answertitle div.text-answer {
  float: left;
  font-size: 12px;
  font-weight: normal;
  width: 238px; }
#footer-poll .footer-poll-answertitle div.answer-percentage {
  float: right;
  clear: right;
  width: 40px;
  font-size: 12px;
  text-align: right;
  font-weight: normal; }

#footer-blog-list .footer-list-item {
  margin-bottom: 14px; }
#footer-blog-list .footer-item-title {
  line-height: 20px;
  font-size: 12px; }
#footer-blog-list .footer-item-info {
  color: #8a8a8a;
  font-size: 11px;
  margin-top: 4px; }
  #footer-blog-list .footer-item-info a {
    font-weight: normal;
    font-size: 11px; }
  #footer-blog-list .footer-item-info .footer-item-info-created {
    margin-right: 10px; }

#footer-twitter .main-officialupdate-item {
  padding: 0 0 4px;
  border-bottom: none; }
#footer-twitter .main-officialupdate-item-content {
  padding-top: 1px;
  font-size: 12px;
  line-height: 19px;
  padding-bottom: 6px;
  color: #a5a5a5; }
#footer-twitter .main-officialupdate-item-subcontent {
  padding-top: 2px;
  color: #8a8a8a; }

#footer-highlighted .footer-box {
  margin-top: 13px;
  float: left;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 128px; }
  #footer-highlighted .footer-box a {
    display: inline-block;
    vertical-align: middle; }
    #footer-highlighted .footer-box a + a {
      margin-left: 10px; }
  #footer-highlighted .footer-box#footer-frostbite, #footer-highlighted .footer-box#footer-esn {
    margin-left: 62px; }
  #footer-highlighted .footer-box#footer-ratings {
    float: right; }

#footer-diceea a {
  margin-top: 27px; }
  #footer-diceea a + a {
    margin-left: 20px !important; }

#footer-frostbite a {
  margin-top: 20px; }

#footer-esn a {
  margin-top: 26px;
  vertical-align: bottom !important; }

#footer-ratings .footer-rating-image a {
  margin-top: 15px;
  margin-left: 0; }

#footer-change-lang {
  font-size: 11px;
  font-weight: normal;
  text-decoration: none; }

#footer-allrightsreserved {
  font-size: 11px;
  color: #a8a8a8; }

#footer-allrightsreserved .sep, #footer-links .sep {
  padding-left: 4px;
  padding-right: 4px;
  color: rgba(255, 255, 255, 0.3); }

#footer-links {
  margin-top: 8px;
  line-height: 16px; }
  #footer-links li {
    display: inline;
    padding: 0 5px;
    padding-left: 0;
    padding-right: 5px;
    font-size: 11px; }
    #footer-links li:first-child {
      border-left: 0;
      padding-left: 0; }
    #footer-links li a {
      color: #a8a8a8;
      font-weight: normal;
      text-decoration: none;
      margin-right: 5px; }
      #footer-links li a:hover {
        text-decoration: underline; }
      #footer-links li a.footer-link-highlighted {
        font-weight: bold; }

#footer-highlighted .footer-box-header {
  color: #8a8a8a;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 180px; }

#footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  padding: 15px 0 16px; }

html.ugm-showing #footer-legal {
  padding-bottom: 80px; }

#footer-share {
  position: absolute;
  height: 20px;
  right: 0;
  top: 8px; }
  #footer-share ul {
    position: relative;
    margin: 0;
    padding: 0; }
    #footer-share ul li {
      float: left;
      margin-right: 15px;
      position: relative; }
      #footer-share ul li.last {
        margin-right: 0; }
      #footer-share ul li a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative; }
        #footer-share ul li a#footer-facebook-logo {
          width: 24px;
          height: 24px;
          background-image: url(../footer/icon-facebook.png); }
        #footer-share ul li a#footer-twitter-logo {
          margin-top: 2px;
          width: 24px;
          height: 20px;
          background-image: url(../footer/icon-twitter.png); }
        #footer-share ul li a#footer-youtube-logo {
          margin-top: 2px;
          width: 50px;
          height: 20px;
          background-image: url(../footer/icon-youtube.png); }

.footer-ratings-continent {
  color: #8A8A8A;
  font-size: 9px;
  text-transform: uppercase; }

.footer-show-poll {
  position: absolute;
  bottom: 19px;
  right: 0; }
  .footer-show-poll.footer-show-poll-vote {
    bottom: 10px; }

#footer-poll .common-percentbar-container {
  background: #000;
  border-color: #464646; }

.base-content-full-width #footer-poll .common-percentbar-container {
  background: #fff;
  border-color: #cacaca; }

#footer-poll .common-percentbar-container div {
  background-color: #fff; }

.base-content-full-width #footer-poll .common-percentbar-container div {
  background-color: #353535; }

.footer-rating-image {
  float: left; }
  .footer-rating-image.rating-eu {
    width: 75px; }
  .footer-rating-image.rating-us {
    margin-left: 55px;
    width: 170px;
    overflow: hidden; }
    .footer-rating-image.rating-us a {
      float: left; }
    .footer-rating-image.rating-us .more-info {
      line-height: 15px;
      text-align: left;
      margin-top: 20px;
      margin-left: 8px;
      float: left;
      width: 100px;
      font-size: 11px; }

#footer-logo-esrb {
  position: relative; }

/* Home footer styles */
#home-footer {
  margin-top: 16px; }
  #home-footer .row-tight .span2 .box-content {
    height: 300px; }
  #home-footer #tweets {
    float: left; }
  #home-footer .main-officialupdate-item {
    font-size: 12px;
    line-height: 16px; }
  #home-footer .main-officialupdate-item-content {
    margin-left: 40px;
    margin-bottom: 10px; }
  #home-footer .main-officialupdate-icon-twitteravatar {
    float: left;
    margin-right: 5px;
    margin-top: 3px; }

#footer-highlighted .footer-box#footer-frostbite, #footer-highlighted .footer-box#footer-esn {
  margin-left: 12px; }
#footer-highlighted .footer-box-header {
  max-width: 100%; }
#footer-highlighted .footer-box#footer-frostbite {
  margin-left: 70px; }

#footer-links {
  opacity: 0.5; }
  #footer-links:hover {
    opacity: 1; }

form.inline label, form.inline input, form.inline button, form.inline select, form.inline textarea, form fieldset.inline label, form fieldset.inline input, form fieldset.inline button, form fieldset.inline select, form fieldset.inline textarea {
  display: inline-block; }
  form.inline label + input, form.inline label + button, form.inline label + select, form.inline label + textarea, form.inline input + input, form.inline input + button, form.inline input + select, form.inline input + textarea, form.inline button + input, form.inline button + button, form.inline button + select, form.inline button + textarea, form.inline select + input, form.inline select + button, form.inline select + select, form.inline select + textarea, form.inline textarea + input, form.inline textarea + button, form.inline textarea + select, form.inline textarea + textarea, form fieldset.inline label + input, form fieldset.inline label + button, form fieldset.inline label + select, form fieldset.inline label + textarea, form fieldset.inline input + input, form fieldset.inline input + button, form fieldset.inline input + select, form fieldset.inline input + textarea, form fieldset.inline button + input, form fieldset.inline button + button, form fieldset.inline button + select, form fieldset.inline button + textarea, form fieldset.inline select + input, form fieldset.inline select + button, form fieldset.inline select + select, form fieldset.inline select + textarea, form fieldset.inline textarea + input, form fieldset.inline textarea + button, form fieldset.inline textarea + select, form fieldset.inline textarea + textarea {
    margin-left: 8px; }

.input, input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap {
  outline: none;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(250, 246, 246, 0.6);
  padding: 3px 8px;
  margin: 0;
  color: #d5dde5; }
  .input:hover, input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=number]:hover, input[type=search]:hover, select:hover, textarea:hover, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap:hover, .input:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=search]:focus, select:focus, textarea:focus, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap:focus, .input:active, input[type=text]:active, input[type=password]:active, input[type=email]:active, input[type=number]:active, input[type=search]:active, select:active, textarea:active, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap:active {
    border-color: #fff; }
  .input:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=search]:focus, select:focus, textarea:focus, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap:focus, .input:active, input[type=text]:active, input[type=password]:active, input[type=email]:active, input[type=number]:active, input[type=search]:active, select:active, textarea:active, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap:active {
    color: #fff; }
  .input:-moz-placeholder, input[type=text]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=number]:-moz-placeholder, input[type=search]:-moz-placeholder, select:-moz-placeholder, textarea:-moz-placeholder, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap:-moz-placeholder, .input::moz-placeholder, input[type=text]::moz-placeholder, input[type=password]::moz-placeholder, input[type=email]::moz-placeholder, input[type=number]::moz-placeholder, input[type=search]::moz-placeholder, select::moz-placeholder, textarea::moz-placeholder, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap::moz-placeholder, .input:-ms-input-placeholder, input[type=text]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap:-ms-input-placeholder, .input::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=search]::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder, .battlefeed .list .item .feed-story-comments .feed-comment-form .feed-comment-form-textarea-wrap::-webkit-input-placeholder {
    color: rgba(250, 246, 246, 0.6); }
  .input.block, input.block[type=text], input.block[type=password], input.block[type=email], input.block[type=number], input.block[type=search], select.block, textarea.block, .battlefeed .list .item .feed-story-comments .feed-comment-form .block.feed-comment-form-textarea-wrap {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 10px;
    height: 10px;
    line-height: 1em;
    margin-top: -2px;
    margin-right: 2px;
    border-radius: 3px;
    border: 1px solid #8e8e8e;
    cursor: pointer;
    padding: 1px;
    outline: none;
    background: rgba(0, 0, 0, 0.5); }
    input[type=radio]:checked {
      position: relative;
      border-color: #fff;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); }
      input[type=radio]:checked:after {
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        content: "";
        background: #fff;
        border-radius: 2px; }
    input[type=radio]:disabled {
      opacity: 0.5;
      cursor: default; }
  input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    line-height: 1em;
    vertical-align: middle;
    margin-right: 2px;
    margin-top: 1px;
    border: 1px solid #8e8e8e;
    cursor: pointer;
    padding: 1px;
    outline: none;
    background: rgba(0, 0, 0, 0.5); }
    input[type=checkbox]:checked {
      position: relative;
      border: 1px solid #fff;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAMAAAA40HREAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDFGMjIyNjgzRDYyMTFFM0JGNUQ4QTZBMERENkFBNkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDFGMjIyNjkzRDYyMTFFM0JGNUQ4QTZBMERENkFBNkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MUYyMjI2NjNENjIxMUUzQkY1RDhBNkEwREQ2QUE2RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MUYyMjI2NzNENjIxMUUzQkY1RDhBNkEwREQ2QUE2RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PriiGpsAAAAGUExURf///////1V89WwAAAACdFJOU/8A5bcwSgAAAB9JREFUeNpiYAQDBgYoBWYACQYwBjIZoUJgxMgIEGAAAuAAHcl9Sj8AAAAASUVORK5CYII=');
      background-position: center center;
      background-repeat: no-repeat; }
    input[type=checkbox]:active, input[type=checkbox]:focus {
      border-color: #fff; }
    input[type=checkbox]:disabled {
      opacity: 0.5;
      cursor: default; } }

.btn:before, a.btn:before, .swipe-glow:before {
  -webkit-transition: opacity 0.3s ease 0, left 0s linear 0.3s;
  -moz-transition: opacity 0.3s ease 0, left 0s linear 0.3s;
  transition: opacity 0.3s ease 0, left 0s linear 0.3s;
  opacity: 0;
  content: " ";
  -webkit-backface-visibility: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 100;
  overflow: hidden;
  background-size: cover;
  background-image: url('//eaassets-a.akamaihd.net/battlelog/bb/bfh/ui/swiping-glow-408c7792.png'); }
.btn:hover:not(.disabled):before, a.btn:hover:not(.disabled):before, .swipe-glow:hover:not(.disabled):before {
  -webkit-transition: opacity 0s ease, left 0.4s linear;
  -moz-transition: opacity 0s ease, left 0.4s linear;
  transition: opacity 0s ease, left 0.4s linear;
  left: 100%;
  opacity: 1; }
.btn:hover:not(.disabled).swipe-slow:before, a.btn:hover:not(.disabled).swipe-slow:before, .swipe-glow:hover:not(.disabled).swipe-slow:before {
  -webkit-transition: opacity 0s ease, left 0.6s linear;
  -moz-transition: opacity 0s ease, left 0.6s linear;
  transition: opacity 0s ease, left 0.6s linear; }

.btn, a.btn {
  position: relative;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  height: 34px;
  line-height: 32px;
  font-size: 14px;
  padding: 0 25px;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  border: 1px solid #e0e0e0;
  background: rgba(0, 0, 0, 0.9) url('../ui/bfh/button-gloss.svg');
  background-size: auto auto;
  box-shadow: inset 0 0 15px 1px rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 4px rgba(0, 0, 0, 0.5); }
  .btn:after, a.btn:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.15);
    opacity: 0; }
  .btn:hover:not(.disabled):after, a.btn:hover:not(.disabled):after {
    opacity: 1; }
  .btn:active:not(.disabled), a.btn:active:not(.disabled) {
    color: #000;
    background: url('../ui/bfh/button-gloss.svg'), -webkit-linear-gradient(bottom, #a2a2a2, #e6e6e6);
    background: url('../ui/bfh/button-gloss.svg'), linear-gradient(to top, #a2a2a2, #e6e6e6); }
  .btn.btn-primary, a.btn.btn-primary {
    box-shadow: inset 0 0 15px 2px rgba(255, 255, 255, 0.6);
    background-color: #d66e29; }
  .btn.btn-inverse, a.btn.btn-inverse {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #070707;
    border: 1px solid #070707;
    background-color: transparent;
    background-image: -webkit-linear-gradient(top, rgba(213, 221, 229, 0.6) 0%, rgba(213, 221, 229, 0.3) 100%);
    background-image: linear-gradient(to bottom, rgba(213, 221, 229, 0.6) 0%, rgba(213, 221, 229, 0.3) 100%); }
    .btn.btn-inverse:hover:not([disabled]):not(.disabled), a.btn.btn-inverse:hover:not([disabled]):not(.disabled) {
      background-image: -webkit-linear-gradient(top, rgba(228, 233, 238, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%);
      background-image: linear-gradient(to bottom, rgba(228, 233, 238, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%);
      color: #3a3a3a;
      text-shadow: 0 0 0.5em rgba(58, 58, 58, 0.8);
      border-color: #3a3a3a; }
    .btn.btn-inverse:active:not([disabled]):not(.disabled), .btn.btn-inverse.active:not([disabled]):not(.disabled), a.btn.btn-inverse:active:not([disabled]):not(.disabled), a.btn.btn-inverse.active:not([disabled]):not(.disabled) {
      background-color: rgba(0, 0, 0, 0);
      background-image: -webkit-linear-gradient(top, #3a3a3a 0%, #070707 50%, #000000 100%);
      background-image: linear-gradient(to bottom, #3a3a3a 0%, #070707 50%, #000000 100%);
      text-shadow: none;
      color: white;
      border: 1px solid black; }
  .btn.btn-subtle, .btn.btn-clean, a.btn.btn-subtle, a.btn.btn-clean {
    border: 1px solid transparent !important;
    background: none;
    color: #d5dde5;
    box-shadow: none; }
    .btn.btn-subtle:hover:not([disabled]):not(.disabled), .btn.btn-clean:hover:not([disabled]):not(.disabled), a.btn.btn-subtle:hover:not([disabled]):not(.disabled), a.btn.btn-clean:hover:not([disabled]):not(.disabled) {
      background: none;
      color: #fff; }
    .btn.btn-subtle:active:not([disabled]):not(.disabled), .btn.btn-clean:active:not([disabled]):not(.disabled), a.btn.btn-subtle:active:not([disabled]):not(.disabled), a.btn.btn-clean:active:not([disabled]):not(.disabled) {
      color: #fff;
      background: none;
      box-shadow: 0; }
  .btn.btn-large, a.btn.btn-large {
    height: 47px;
    line-height: 45px;
    font-size: 23px;
    padding: 0 40px; }
  .btn.btn-small, a.btn.btn-small {
    height: 32px;
    line-height: 30px;
    font-size: 16px;
    padding: 0px 25px; }
    .btn.btn-small .icon-search, a.btn.btn-small .icon-search {
      position: relative;
      top: 2px; }
  .btn.btn-tiny, a.btn.btn-tiny {
    height: 24px;
    line-height: 22px;
    font-size: 13px;
    padding: 0 10px; }
  .btn[disabled], .btn.disabled, .is-touch #serverbrowser aside .action-buttons-container .favorite-toggle.starred, a.btn[disabled], a.btn.disabled, .is-touch #serverbrowser aside .action-buttons-container a.favorite-toggle.starred {
    cursor: default;
    opacity: 0.5; }
  .btn.arrow i:before, a.btn.arrow i:before {
    position: relative;
    bottom: 0.15em;
    right: 0.2em;
    content: "► ";
    font-size: 0.7em; }
  .btn.arrow-down i:after, a.btn.arrow-down i:after {
    position: relative;
    bottom: 0.15em;
    left: 0.2em;
    content: " ▼";
    font-size: 0.7em;
    line-height: 1; }
  .btn.btn-block, a.btn.btn-block {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0; }
  .btn > [class^="icon-"], .btn > [class*=" icon-"], a.btn > [class^="icon-"], a.btn > [class*=" icon-"] {
    opacity: 0.8; }
  .btn:hover:not(.disabled) > [class^="icon-"], .btn:hover:not(.disabled) > [class*=" icon-"], a.btn:hover:not(.disabled) > [class^="icon-"], a.btn:hover:not(.disabled) > [class*=" icon-"] {
    opacity: 1; }
  .btn:hover:not(.disabled).btn-subtle, a.btn:hover:not(.disabled).btn-subtle {
    background-color: rgba(7, 7, 7, 0.35); }

/**
 * Map thumbnails
 */
.map-thumb {
  position: relative;
  width: 48px;
  height: 33px; }
  .map-thumb img {
    height: 100%;
    width: 100%; }
  .map-thumb .quick-join {
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.9);
    opacity: 0;
    width: 25px;
    height: 25px;
    top: 3px;
    left: 10px; }
    .map-thumb .quick-join:after {
      display: block;
      vertical-align: middle;
      text-align: center;
      content: "▶";
      color: rgba(255, 255, 255, 0.9);
      font-size: 19px;
      line-height: 1.2; }
  .map-thumb:hover .quick-join {
    opacity: 1; }
  .map-thumb.medium {
    width: 62px;
    height: 42px; }
    .map-thumb.medium .quick-join {
      width: 30px;
      height: 30px;
      top: 5px;
      left: 13px; }
      .map-thumb.medium .quick-join:after {
        line-height: 1.4; }

article:hover .map-thumb .quick-join, tr:hover .map-thumb .quick-join {
  opacity: 1; }

/* Firemode Icons */
.firemode-icon {
  background: transparent url(../common/warsaw/firemode-icons.png) no-repeat;
  width: 23px;
  height: 15px;
  display: inline-block; }
  .firemode-icon.disabled {
    opacity: 0.6; }
  .firemode-icon.auto {
    background-position: 0 0; }
  .firemode-icon.burst {
    background-position: 0 -18px; }
  .firemode-icon.single {
    background-position: 0 -36px; }

/* Kit icons */
.common-kit-icon {
  background: url(../profile/bf3/stats/stats-time-icons.png) no-repeat;
  width: 22px;
  height: 22px; }
  .common-kit-icon.kit-1 {
    background-position: -26px 2px; }
  .common-kit-icon.kit-2 {
    background-position: 1px -26px; }
  .common-kit-icon.kit-8 {
    background-position: 1px 1px; }
  .common-kit-icon.kit-32 {
    background-position: -26px -26px; }

/* ----------------- Warsaw kit icons ----------------- */
.kit-icon {
  display: inline-block;
  background-repeat: no-repeat; }
  .kit-icon.xsmall {
    background-image: url(../common/warsaw/kit-icons-xsmall.png);
    width: 15px;
    height: 15px; }
    .kit-icon.xsmall.kit-1, .kit-icon.xsmall.assault {
      background-position: 0 0; }
    .kit-icon.xsmall.kit-2, .kit-icon.xsmall.engineer {
      background-position: -17px 0; }
    .kit-icon.xsmall.kit-32, .kit-icon.xsmall.support {
      background-position: -30px 0; }
    .kit-icon.xsmall.kit-8, .kit-icon.xsmall.recon {
      background-position: -45px 0; }
  .kit-icon.small {
    background-image: url(../common/warsaw/kit-icons-small.png);
    width: 32px;
    height: 32px; }
    .kit-icon.small.kit-1, .kit-icon.small.assault {
      background-position: 0 0; }
    .kit-icon.small.kit-2, .kit-icon.small.engineer {
      background-position: -32px 0; }
    .kit-icon.small.kit-32, .kit-icon.small.support {
      background-position: -64px 0; }
    .kit-icon.small.kit-8, .kit-icon.small.recon {
      background-position: -96px 0; }
    .kit-icon.small.kit-2048, .kit-icon.small.commander {
      background-position: -128px 0; }
  .kit-icon.medium {
    background-image: url(../common/warsaw/kit-icons-medium.png);
    width: 52px;
    height: 52px; }
    .kit-icon.medium.kit-1, .kit-icon.medium.assault {
      background-position: 0 0; }
    .kit-icon.medium.kit-2, .kit-icon.medium.engineer {
      background-position: -52px 0; }
    .kit-icon.medium.kit-32, .kit-icon.medium.support {
      background-position: -104px 0; }
    .kit-icon.medium.kit-8, .kit-icon.medium.recon {
      background-position: -156px 0; }
    .kit-icon.medium.kit-2048, .kit-icon.medium.commander {
      background-position: -208px 0; }

/* ----------------- Warsaw vehicle icons ----------------- */
.vehicle-icon.xsmall {
  background-image: url(../common/warsaw/vehicle-icons-xsmall.png);
  background-repeat: no-repeat;
  display: inline-block;
  width: 16px;
  height: 16px; }
  .vehicle-icon.xsmall.vehicle-3, .vehicle-icon.xsmall.fast-attack-boat {
    background-position: -57px -5px; }
  .vehicle-icon.xsmall.vehicle-6, .vehicle-icon.xsmall.heli-attack {
    background-position: -109px -5px; }
  .vehicle-icon.xsmall.vehicle-5, .vehicle-icon.xsmall.heli-scout {
    background-position: -135px -5px; }
  .vehicle-icon.xsmall.vehicle-8, .vehicle-icon.xsmall.heli-transport {
    background-position: -161px -5px; }
  .vehicle-icon.xsmall.vehicle-4, .vehicle-icon.xsmall.jet-attack {
    background-position: -187px -5px; }
  .vehicle-icon.xsmall.vehicle-7, .vehicle-icon.xsmall.jet-ground-attack {
    background-position: -213px -5px; }
  .vehicle-icon.xsmall.vehicle-2, .vehicle-icon.xsmall.mobile-aa {
    background-position: -317px -5px; }
  .vehicle-icon.xsmall.vehicle-1, .vehicle-icon.xsmall.tank-ifv {
    background-position: -577px -5px; }
  .vehicle-icon.xsmall.vehicle-0, .vehicle-icon.xsmall.tank-mbt {
    background-position: -629px -5px; }

/* ----------------- List icons ----------------- */
.list-icon {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.45);
  background-image: url(../common/buttons/list-buttons.png);
  width: 76px;
  height: 24px;
  float: left;
  margin-left: 1px; }
  .list-icon.thumbs {
    background-position: 0 -24px; }
  .list-icon.rows {
    background-position: 76px -24px; }
  .list-icon.active {
    background-color: #fff;
    box-shadow: 0 0 7px 0 #e0f4f8; }
    .list-icon.active.thumbs {
      background-position: 0 0; }
    .list-icon.active.rows {
      background-position: 76px 0; }

.tag-icon-list {
  float: left;
  margin: 2px 3px 0 0; }
  .tag-icon-list li {
    float: left;
    margin-right: 2px; }

/* ----------------- Xpack icons ----------------- */
.xp-icon {
  display: inline-block;
  height: 19px;
  width: 19px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-image: url(../profile/bf4/icon-bf4-xp-17x17.png); }
  .xp-icon[data-xpack="xp1"] {
    background-position: -18px 0; }
  .xp-icon[data-xpack="xp2"] {
    background-position: -36px 0; }
  .xp-icon[data-xpack="xp3"] {
    background-position: -54px 0; }
  .xp-icon[data-xpack="xp4"] {
    background-position: -72px 0; }

/* ----------------- Bfh kit icons ----------------- */
.kit-icon.xsmall {
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/kit-icons-xsmall-d568eea8.png); }
  .kit-icon.xsmall.kit-1, .kit-icon.xsmall.operator {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/DeployLoadoutIconAss-b52390e8.png);
    background-size: cover; }
  .kit-icon.xsmall.kit-2, .kit-icon.xsmall.mechanic {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/DeployLoadoutIconEng-90f61a3d.png);
    background-size: cover; }
  .kit-icon.xsmall.kit-32, .kit-icon.xsmall.enforcer {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/DeployLoadoutIconSup-523446f5.png);
    background-size: cover; }
  .kit-icon.xsmall.kit-8, .kit-icon.xsmall.professional {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/DeployLoadoutIconRec-73cd8f7b.png);
    background-size: cover; }
.kit-icon.small {
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/kit-icons-small-08dfe891.png); }
  .kit-icon.small.kit-1, .kit-icon.small.operator {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/DeployLoadoutIconAss-b52390e8.png);
    background-size: cover; }
  .kit-icon.small.kit-2, .kit-icon.small.mechanic {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/DeployLoadoutIconEng-90f61a3d.png);
    background-size: cover; }
  .kit-icon.small.kit-32, .kit-icon.small.enforcer {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/DeployLoadoutIconSup-523446f5.png);
    background-size: cover; }
  .kit-icon.small.kit-8, .kit-icon.small.professional {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/DeployLoadoutIconRec-73cd8f7b.png);
    background-size: cover; }
  .kit-icon.small.kit-2048, .kit-icon.small.commander {
    background-position: -128px 0; }
.kit-icon.medium {
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/kit-icons-medium-509fb045.png); }
  .kit-icon.medium.kit-1, .kit-icon.medium.operator {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/kit-icon-1-medium-b80d930d.png);
    background-size: cover; }
  .kit-icon.medium.kit-2, .kit-icon.medium.mechanic {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/kit-icon-2-medium-32279473.png);
    background-size: cover; }
  .kit-icon.medium.kit-32, .kit-icon.medium.enforcer {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/kit-icon-32-medium-27784042.png);
    background-size: cover; }
  .kit-icon.medium.kit-8, .kit-icon.medium.professional {
    background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/kit-icon-8-medium-0e9cad50.png);
    background-size: cover; }
  .kit-icon.medium.kit-2048, .kit-icon.medium.commander {
    background-position: -208px 0; }

.dialog > header a {
  color: #a8a8a8; }
.dialog > header .no-transform {
  text-transform: none; }
.dialog.punkbuster {
  width: 630px; }
.dialog.emblempreview.cloning .dialog-body .loader {
  display: block; }
.dialog.emblempreview .dialog-body {
  position: relative;
  text-align: center; }
  .dialog.emblempreview .dialog-body .loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -9px; }
.dialog.emblemselect {
  width: 572px; }
  .dialog.emblemselect .emblems-loading {
    display: block;
    margin: 30px auto 10px; }
  .dialog.emblemselect .emblem-items .item {
    width: 100px;
    min-height: 148px;
    float: left;
    text-align: center;
    margin-left: 10px;
    text-decoration: none; }
    .dialog.emblemselect .emblem-items .item.item-none {
      margin-left: 0; }
    .dialog.emblemselect .emblem-items .item.active .edit-link {
      opacity: 1; }
    .dialog.emblemselect .emblem-items .item.active .emblem {
      opacity: 1;
      cursor: default;
      box-shadow: inset 0 0 10px 4px rgba(255, 255, 255, 0.2); }
    .dialog.emblemselect .emblem-items .item.disabled {
      opacity: 0.3; }
      .dialog.emblemselect .emblem-items .item.disabled .emblem {
        opacity: 1; }
      .dialog.emblemselect .emblem-items .item.disabled:hover .emblem {
        cursor: default; }
    .dialog.emblemselect .emblem-items .item.item-platoon .emblem {
      background: #a8a8a8; }
    .dialog.emblemselect .emblem-items .item.item-none .emblem, .dialog.emblemselect .emblem-items .item.item-create .emblem {
      background: none;
      text-align: center;
      color: #fff; }
      .dialog.emblemselect .emblem-items .item.item-none .emblem:before, .dialog.emblemselect .emblem-items .item.item-create .emblem:before {
        content: "X";
        font-size: 100px;
        line-height: 100px; }
    .dialog.emblemselect .emblem-items .item.item-create .emblem {
      border-radius: 0;
      box-shadow: inset 0 0 0 2px #fff; }
      .dialog.emblemselect .emblem-items .item.item-create .emblem:before {
        content: "+"; }
    .dialog.emblemselect .emblem-items .item h1 {
      text-align: left;
      text-transform: uppercase;
      color: #a8a8a8;
      font-size: 13px;
      line-height: 24px;
      font-family: Purista, sans-serif;
      font-weight: normal;
      margin: 0;
      cursor: default; }
    .dialog.emblemselect .emblem-items .item .emblem {
      width: 100px;
      height: 100px;
      display: block;
      margin-bottom: 8px;
      opacity: 0.7;
      cursor: pointer;
      border-radius: 2px;
      -webkit-transition: box-shadow 0.5s ease;
      -moz-transition: box-shadow 0.5s ease;
      transition: box-shadow 0.5s ease; }
      .dialog.emblemselect .emblem-items .item .emblem:first-child {
        margin-top: 24px; }
      .dialog.emblemselect .emblem-items .item .emblem:hover {
        opacity: 1; }
      .dialog.emblemselect .emblem-items .item .emblem img {
        width: 100px;
        height: 100px;
        display: block; }
    .dialog.emblemselect .emblem-items .item .edit-link {
      font-size: 12px; }
.dialog.soldierselect section {
  padding: 0;
  max-height: 300px;
  overflow-y: scroll; }
.dialog.soldierselect .soldier-list > li > a {
  padding: 10px;
  display: block;
  position: relative;
  line-height: 30px; }
  .dialog.soldierselect .soldier-list > li > a:hover {
    background-color: rgba(0, 0, 0, 0.1); }
.dialog.soldierselect .soldier-list > li .clan-tag, .dialog.soldierselect .soldier-list > li .name {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 2px; }
.dialog.soldierselect .soldier-list > li .gameicon {
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 10px;
  position: relative;
  top: 1px; }
.dialog .soldierselect-description {
  font-size: 11px;
  line-height: 16px;
  float: left;
  max-width: 360px;
  text-align: left; }
.dialog #soldierimage li {
  float: left;
  position: relative; }
  .dialog #soldierimage li .icon-premium-p {
    position: absolute;
    bottom: 6px;
    right: 6px; }
.dialog a:not(.btn) {
  text-decoration: underline; }
  .dialog a:not(.btn):hover, .dialog a:not(.btn):active {
    color: #808080; }
.dialog .popup-gameinvite-avatar {
  float: left;
  width: 65px;
  margin-left: 5px; }
.dialog .popup-gameinvite-serverinfo-firstrow {
  color: #a8a8a8; }
.dialog .popup-gameinvite-content {
  margin-left: 82px; }
.dialog .popup-gameinvite-serverinfo-map {
  overflow: hidden; }
  .dialog .popup-gameinvite-serverinfo-map img {
    height: 100px;
    width: auto;
    display: block;
    margin-left: -95px; }
.dialog .popup-gameinvite-serverinfo-gameicon {
  display: inline-block; }
.dialog .popup-gameinvite-serverinfo-gameicon span {
  margin-bottom: -2px; }
.dialog .popup-gameinvite-servername a {
  font-size: 14px;
  padding: 3px 0;
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap; }
.dialog .popup-party-invitetext {
  line-height: 60px; }
.dialog.popup-coop-invite .popup-gameinvite-serverinfo-map {
  float: left;
  width: 75px; }
  .dialog.popup-coop-invite .popup-gameinvite-serverinfo-map img {
    margin-left: 0;
    height: auto; }
.dialog.popup-coop-invite .popup-coop-info {
  float: left; }
.dialog.popup-bannedpersona {
  text-align: center; }
.dialog.bfh-feedback-dialog {
  width: 1020px;
  height: 90%;
  margin-left: -510px;
  background-color: #fff; }
  .dialog.bfh-feedback-dialog .dialog-body {
    background-color: #fff;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden; }
    .dialog.bfh-feedback-dialog .dialog-body .content ::-webkit-scrollbar {
      width: 7px; }
    .dialog.bfh-feedback-dialog .dialog-body .content ::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.5); }

html:not(.is-touch) body:not(.no-comcenter) #dialog-container .bfh-feedback-dialog {
  margin-left: -392px; }

#base-bf4-html .dialog.popup-coop-invite .popup-gameinvite-serverinfo-container {
  padding-top: 10px;
  padding-bottom: 6px; }

.track-item-dialog {
  width: 574px; }
  .track-item-dialog .dialog-body {
    padding-bottom: 0; }
  .track-item-dialog #selected-track-item {
    background-color: #fff;
    color: #000;
    width: 180px;
    height: 150px; }
  .track-item-dialog .suggestion-box {
    width: 180px;
    height: 150px;
    float: left;
    position: relative;
    overflow: hidden;
    background-color: #202026;
    text-align: center; }
    .track-item-dialog .suggestion-box:hover {
      background-color: #26262d; }
    .track-item-dialog .suggestion-box:first-child {
      margin-right: 1px; }
    .track-item-dialog .suggestion-box:last-child {
      margin-left: 1px; }
    .track-item-dialog .suggestion-box.active {
      background-color: rgba(255, 255, 255, 0.1); }
      .track-item-dialog .suggestion-box.active .current {
        display: none; }
    .track-item-dialog .suggestion-box strong {
      position: absolute;
      top: 10px;
      left: 15px;
      padding-right: 15px; }
    .track-item-dialog .suggestion-box .image {
      margin: 40px auto 0; }
    .track-item-dialog .suggestion-box .progress-bar {
      position: absolute;
      bottom: 0;
      margin-bottom: 0;
      width: 100%; }
    .track-item-dialog .suggestion-box .green-check-small {
      background-image: url(../battledash/images/icons/green-check-small.png);
      width: 12px;
      height: 12px;
      position: absolute;
      right: 3px;
      bottom: 10px; }

#gamenotstarting-resolve-origin {
  list-style-type: circle;
  margin-bottom: 24px;
  margin-left: 24px;
  margin-top: 8px; }

.share-br-dialog {
  width: 680px; }
  .share-br-dialog .avatar {
    float: left; }
  .share-br-dialog .content-container {
    float: left;
    width: 548px;
    margin-left: 15px; }
  .share-br-dialog .share-comment {
    margin-bottom: 8px; }
    .share-br-dialog .share-comment textarea {
      font-family: Arial, sans-serif;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 548px;
      height: 75px; }
  .share-br-dialog footer .facebook-sharing {
    float: left;
    margin-left: 75px;
    position: relative;
    padding-left: 22px; }
    .share-br-dialog footer .facebook-sharing i.fb-icon {
      position: absolute;
      top: 3px;
      left: 0px;
      background: url(../base/shared/icon-fb-share.png);
      background-size: 100%;
      width: 11px;
      height: 11px; }
    .share-br-dialog footer .facebook-sharing a {
      text-decoration: none;
      margin-right: 8px; }
    .share-br-dialog footer .facebook-sharing .switch {
      margin-top: 0;
      margin-bottom: 0;
      position: relative;
      top: 0px; }
  .share-br-dialog footer .btn-container {
    float: right;
    margin-right: 25px; }

.feed-story-body p.feed-br-share-text {
  padding: 4px 0; }

.dialog-share-content {
  background-color: #303030; }

a.feed-item-anchor-battlereport:hover {
  text-decoration: none !important; }

.battlefeed .list .battlereport-feed-item, .battlereport-feed-item {
  width: 548px;
  margin: 10px 0 3px 0; }
  .battlefeed .list .battlereport-feed-item header, .battlereport-feed-item header {
    margin: 0 !important;
    padding: 0 !important;
    height: 163px; }
  .battlefeed .list .battlereport-feed-item .prize .box-content, .battlereport-feed-item .prize .box-content {
    padding: 8px; }
  .battlefeed .list .battlereport-feed-item .info-list li, .battlereport-feed-item .info-list li {
    display: inline-block;
    width: 106px;
    float: left;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 1px 0 0 1px;
    text-align: center;
    overflow: hidden;
    color: #fff; }
    .battlefeed .list .battlereport-feed-item .info-list li h5, .battlereport-feed-item .info-list li h5 {
      font-size: 14px;
      line-height: 14px;
      margin: 10px auto 0;
      padding: 0; }
    .battlefeed .list .battlereport-feed-item .info-list li strong, .battlereport-feed-item .info-list li strong {
      font-size: 24px;
      font-weight: bold;
      line-height: 36px; }
    .battlefeed .list .battlereport-feed-item .info-list li.small, .battlereport-feed-item .info-list li.small {
      height: 65px; }
    .battlefeed .list .battlereport-feed-item .info-list li.medium, .battlereport-feed-item .info-list li.medium {
      position: relative;
      height: 85px;
      width: 213px; }
      .battlefeed .list .battlereport-feed-item .info-list li.medium h5, .battlereport-feed-item .info-list li.medium h5 {
        margin: 0 auto 4px;
        padding: 5px 0 3px;
        background-color: #000; }
      .battlefeed .list .battlereport-feed-item .info-list li.medium .na, .battlereport-feed-item .info-list li.medium .na {
        margin-top: 20px;
        color: #666;
        display: block; }
      .battlefeed .list .battlereport-feed-item .info-list li.medium .kit-icon, .battlereport-feed-item .info-list li.medium .kit-icon {
        margin-top: 10px; }
    .battlefeed .list .battlereport-feed-item .info-list li.large, .battlereport-feed-item .info-list li.large {
      width: 120px;
      height: 151px;
      margin-left: 0; }
      .battlefeed .list .battlereport-feed-item .info-list li.large .team-position, .battlereport-feed-item .info-list li.large .team-position {
        display: block;
        font-size: 38px;
        line-height: 40px;
        margin: 15px auto 32px; }

.popup-feedback-container {
  max-height: 320px; }
  .popup-feedback-container .hidden {
    display: none; }
  .popup-feedback-container .feedback-manual {
    margin-bottom: 16px; }
    .popup-feedback-container .feedback-manual p {
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 10px; }
  .popup-feedback-container .feedback-manual-download {
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px;
    text-decoration: none !important;
    margin-right: 6px;
    margin-top: 6px; }

.dialog-battlescreen {
  width: 800px; }
  .is-app .dialog-battlescreen {
    margin-left: -400px; }
  .dialog-battlescreen h6 {
    color: #a8a8a8;
    line-height: 24px; }
  .dialog-battlescreen .apps {
    color: #a8a8a8; }
    .dialog-battlescreen .apps a + a {
      margin-left: 5px; }
  .dialog-battlescreen .info {
    width: 310px;
    padding: 20px 0 0 20px; }
  .dialog-battlescreen .smartglass {
    margin-bottom: 5px; }
  .dialog-battlescreen p {
    text-transform: uppercase;
    font-weight: bold;
    padding: 2px 0 4px;
    font-size: 11px; }

@-webkit-keyframes loader-small {
  0% {
    background-position: 0 0; }

  100% {
    background-position: -480px 0; } }

@-moz-keyframes loader-small {
  0% {
    background-position: 0 0; }

  100% {
    background-position: -480px 0; } }

-o-keyframes loader-small 0% {
  background-position: 0 0; }
-o-keyframes loader-small 100% {
  background-position: -480px 0; }

@-ms-keyframes loader-small {
  0% {
    background-position: 0 0; }

  100% {
    background-position: -480px 0; } }

@keyframes loader-small {
  0% {
    background-position: 0 0; }

  100% {
    background-position: -480px 0; } }

.vjs-loading-spinner, .loader.small {
  width: 32px;
  height: 32px;
  margin-top: -3px;
  background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/loadingicon-bb4d7612.png) no-repeat;
  -webkit-animation: loader-small 1s steps(15, end) infinite;
  -moz-animation: loader-small 1s steps(15, end) infinite;
  -ms-animation: loader-small 1s steps(15, end) infinite;
  -o-animation: loader-small 1s steps(15, end) infinite;
  animation: loader-small 1s steps(15, end) infinite; }
  .vjs-loading-spinner.centered, .loader.small.centered {
    margin-left: -16px;
    margin-top: -16px; }

#unified-game-manager {
  font-family: Frutiger, sans-serif; }
  #unified-game-manager .loader {
    margin-top: 6px; }
  #unified-game-manager .ugm-title {
    font-family: Frutiger, sans-serif; }

.pagination-paginationbutton {
  margin-right: 5px;
  float: left;
  text-decoration: none;
  background-color: #efefef;
  border-bottom: 1px solid #fff; }

.pagination-paginationbutton:hover {
  text-decoration: none;
  background-color: #f9f9f9; }

.pagination-paginationbutton-border {
  border: 1px solid #d5d5d5; }

.pagination-paginationbutton-inner {
  font-size: 12px;
  text-align: center;
  display: block;
  height: 22px;
  line-height: 22px;
  padding: 1px 7px 0;
  font-weight: normal;
  box-shadow: inset 0 1px 0 #fff; }

.pagination-paginationbutton-extra {
  display: none;
  background: url(../forum/pagination-icons.png) no-repeat;
  width: 8px;
  height: 9px;
  top: 6px;
  position: relative; }

.pagination-paginationbutton.pagination-type-dots .pagination-paginationbutton-extra {
  display: block;
  height: 3px;
  background-position: 0 -38px;
  top: 12px; }

.pagination-paginationbutton.pagination-type-next .pagination-paginationbutton-extra {
  display: block;
  background-position: 0 0; }

.pagination-paginationbutton.pagination-type-next-disabled .pagination-paginationbutton-extra {
  display: block;
  background-position: 0 -9px; }

.pagination-paginationbutton.pagination-type-prev .pagination-paginationbutton-extra {
  display: block;
  background-position: 0 -19px; }

.pagination-paginationbutton.pagination-type-prev-disabled .pagination-paginationbutton-extra {
  display: block;
  background-position: 0 -28px; }

.pagination-pagination-left {
  float: right; }

.pagination-pagination-right {
  float: left; }

.pagination-paginationbutton.pagination-type-on {
  background-color: #dcdcdc; }

.pagination-paginationbutton.pagination-type-on:hover {
  cursor: default; }

.pagination-paginationbutton.pagination-type-on .pagination-paginationbutton-border {
  border: none;
  border-top: 1px solid #cacaca; }

.pagination-paginationbutton.pagination-type-on .pagination-paginationbutton-inner {
  box-shadow: inset 0 1px 0 #d5d5d5, inset 0 -1px 0 #d5d5d5;
  font-weight: bold;
  color: #353535;
  padding-bottom: 1px; }

.pagination-paginationbutton.pagination-type-next-disabled, .pagination-paginationbutton.pagination-type-prev-disabled {
  background-color: #f0f0f0;
  color: #dcdcdc; }

.pagination-paginationbutton.pagination-type-next-disabled .pagination-paginationbutton-border, .pagination-paginationbutton.pagination-type-prev-disabled .pagination-paginationbutton-border {
  border: 1px solid #e8e8e8; }

.pagination-paginationbutton.pagination-type-next, .pagination-paginationbutton.pagination-type-next-disabled {
  margin-right: 0; }

.pagination-paginationbutton.pagination-type-dots, .pagination-paginationbutton.pagination-type-dots .pagination-paginationbutton-border, .pagination-paginationbutton.pagination-type-dots .pagination-paginationbutton-inner, .pagination-paginationbutton.pagination-type-dots:hover, .pagination-paginationbutton.pagination-type-dots:hover .pagination-paginationbutton-border, .pagination-paginationbutton.pagination-type-dots:hover .pagination-paginationbutton-inner {
  background: none;
  border: none;
  cursor: default;
  height: auto; }

.pagination-paginationbutton.pagination-type-dots .pagination-paginationbutton-inner {
  padding: 0 2px; }

/* ########################## extra ########################## **/
#leaderboard-result .pagination-paginationbutton {
  margin-top: 0; }

.pagination-paginationbutton {
  background: none;
  border: none;
  margin-right: 1px; }
  .pagination-paginationbutton:hover {
    background: none; }
    .pagination-paginationbutton:hover .pagination-paginationbutton-border {
      border-color: #fff; }
    .pagination-paginationbutton:hover .pagination-paginationbutton-inner {
      color: #fff; }
  .pagination-paginationbutton.pagination-type-dots {
    margin: 0 5px; }
    .pagination-paginationbutton.pagination-type-dots .pagination-paginationbutton-extra {
      top: 11px; }

.pagination-paginationbutton-border {
  border: none;
  background-color: rgba(0, 0, 0, 0.5); }

.pagination-paginationbutton-inner {
  box-shadow: none;
  color: #d5dde5; }

.pagination-paginationbutton.pagination-type-on {
  background: none; }

.pagination-paginationbutton.pagination-type-on .pagination-paginationbutton-border {
  border: none; }

.pagination-paginationbutton.pagination-type-on .pagination-paginationbutton-inner {
  padding-bottom: 0;
  font-weight: normal;
  color: black;
  background-color: white;
  background-image: -webkit-linear-gradient(top, #c9c9c9, rgba(200, 200, 200, 0) 40%);
  background-image: linear-gradient(to bottom, #c9c9c9, rgba(200, 200, 200, 0) 40%);
  box-shadow: 0 0 7px 0 #e0f4f8; }

.pagination-paginationbutton.pagination-type-next-disabled, .pagination-paginationbutton.pagination-type-prev-disabled {
  background-color: transparent;
  color: #a8a8a8; }

.pagination-paginationbutton.pagination-type-next-disabled .pagination-paginationbutton-border, .pagination-paginationbutton.pagination-type-prev-disabled .pagination-paginationbutton-border {
  border: none; }

.pagination-paginationbutton.pagination-type-next .pagination-paginationbutton-extra, .pagination-paginationbutton.pagination-type-prev .pagination-paginationbutton-extra {
  height: 10px;
  opacity: 0.8; }

.pagination-paginationbutton.pagination-type-next:hover .pagination-paginationbutton-extra, .pagination-paginationbutton.pagination-type-prev:hover .pagination-paginationbutton-extra {
  opacity: 1; }

.pagination-paginationbutton.pagination-type-next-disabled .pagination-paginationbutton-extra, .pagination-paginationbutton.pagination-type-prev-disabled .pagination-paginationbutton-extra {
  height: 10px;
  opacity: 0.3; }

.pagination-paginationbutton.pagination-type-next .pagination-paginationbutton-extra {
  background-position: 0 -9px; }

.pagination-paginationbutton.pagination-type-prev .pagination-paginationbutton-extra {
  background-position: 0 -28px; }

.battlefeed .loading {
  text-align: center; }
.battlefeed .update {
  padding: 16px;
  border-bottom: 1px solid transparent; }
.battlefeed .feeditems .base-item-ribbon-small {
  background: "/profile/bf3/stats/ribbons/ribbons-sprite.png"; }
.battlefeed .feeditems .awards .awardcontainer {
  border: 1px solid #8a8a8a;
  padding: 10px; }
.battlefeed .list .item {
  position: relative;
  font-size: 14px;
  padding-left: 68px;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  line-height: 16px; }
  .battlefeed .list .item .avatar {
    position: absolute;
    left: 0px; }
  .battlefeed .list .item + .item {
    border-top: 1px solid transparent; }
  .battlefeed .list .item:first-child {
    padding-top: 0px; }
  .battlefeed .list .item:last-child {
    padding-bottom: 32px; }
  .battlefeed .list .item span {
    line-height: 16px;
    margin-bottom: 2px; }
  .battlefeed .list .item header {
    margin-bottom: 10px; }
    .battlefeed .list .item header .username {
      font-weight: bold; }
    .battlefeed .list .item header .hooah {
      float: right; }
  .battlefeed .list .item footer {
    text-transform: none; }
.battlefeed #profile-status-message #profile-edit-status-button {
  display: none; }
.battlefeed #profile-status-message #feed-addlinkwithpreviewarea {
  display: none;
  margin-bottom: 8px; }
.battlefeed #profile-status-message .feed-actions {
  float: right;
  text-align: right; }
.battlefeed .feed-comment-form, .battlefeed .feed-comment-text-not-clicked, .battlefeed .feed-comment-text-clicked {
  font-size: 12px; }
.battlefeed .feed-comment-form, .battlefeed .feed-comment-text-not-clicked {
  color: #a8a8a8; }

/* feed component CSS resource */
#feed-container {
  margin-top: 1px; }
  #feed-container .feed-friends .box-content {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-align: center; }
    #feed-container .feed-friends .box-content h2 {
      font-size: 20px; }
    #feed-container .feed-friends .box-content h3 {
      font-size: 16px; }
    #feed-container .feed-friends .box-content li {
      margin-bottom: 4px; }
  #feed-container .feed-statstransferlink {
    display: inline-block; }
    #feed-container .feed-statstransferlink:hover {
      text-decoration: none; }
  #feed-container .feed-statstransfer {
    margin-top: 8px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.5);
    width: 310px;
    height: 54px;
    cursor: pointer; }
    #feed-container .feed-statstransfer:hover {
      background: rgba(0, 0, 0, 0.7); }
    #feed-container .feed-statstransfer .stats {
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 400;
      display: inline-block;
      width: 140px;
      text-align: center;
      font-size: 26px;
      margin-top: 18px; }
      #feed-container .feed-statstransfer .stats.grey {
        color: #ccc; }
      #feed-container .feed-statstransfer .stats.arrow {
        width: 9px;
        height: 18px;
        background: url(../feed/arrow_thin_white.png); }
  #feed-container.feed-show-item {
    margin-top: 0; }
  #feed-container .feed-story-creationDate a {
    color: #8A8A8A; }
  #feed-container .feed-story-playingas a {
    font-size: 11px;
    font-weight: normal; }
  #feed-container .base-profile-link {
    font-weight: bold; }

#feed-single-event-container {
  padding-top: 10px;
  padding-bottom: 10px; }
  #feed-single-event-container .feed-single-item {
    border: 0; }

.feed-single-item {
  clear: both;
  font-size: 12px;
  padding: 10px 0 10px 0;
  position: relative; }

.feed-show-item {
  width: 654px;
  min-height: 200px; }
  .feed-show-item .base-big-title {
    margin-bottom: 16px; }

.feed-showlikes-popup .common-popup-content-container {
  width: 495px;
  max-height: 350px;
  overflow: hidden; }

.feed-showlikes-useritem {
  position: relative;
  clear: both;
  padding: 5px; }
  .feed-showlikes-useritem:hover {
    background: rgba(255, 255, 255, 0.1); }
  .feed-showlikes-useritem div.base-avatar-container {
    display: inline-block; }
  .feed-showlikes-useritem a.base-profile-link {
    display: inline-block;
    position: relative;
    margin-left: 5px; }
  .feed-showlikes-useritem button {
    float: right;
    right: 5px;
    top: 5px;
    position: relative; }

.feed-events:last-child, .feed-single-item:last-child {
  border-bottom: none; }

.feed-events.feed-no-border {
  border-top: none; }

.menu-item {
  padding: 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #efefee; }

.feed-post-to {
  margin-left: 3px;
  font-size: 14px; }

.menu-item.active {
  border: 0px; }

.feed-show {
  display: block; }

.feed-bundle-likes, .feed-story-likes {
  margin-left: 45px;
  font-size: 11px;
  font-family: Arial, sans-serif;
  background: transparent;
  background: rgba(0, 0, 0, 0.2); }

.feed-story-comments {
  margin-left: 45px;
  font-size: 11px;
  font-family: Arial, sans-serif; }
  .feed-story-comments.feed-show {
    margin-top: 5px; }

.feed-item-likes a {
  font-size: 11px; }

.feed-item-likescontainer {
  margin-left: 45px; }

.feed-story {
  font-size: 12px;
  font-family: Arial, sans-serif; }

.feed-comment-text-not-clicked {
  font-family: Arial, sans-serif;
  font-style: italic;
  height: 22px;
  line-height: 22px;
  width: 530px;
  max-width: 530px; }

.feed-comment-textarea {
  -webkit-transition: height 0.2s;
  -moz-transition: height 0.2s;
  transition: height 0.2s; }

.feed-comment-text-clicked {
  font-family: Arial, sans-serif;
  height: 28px;
  padding: 6px 8px;
  width: 530px;
  max-width: 530px; }

.feed-bundle-likes, .feed-story-likes, .feed-story-comments {
  clear: both;
  width: 390px;
  line-height: 18px; }

.feed-sub-events .feed-single-item {
  margin: 5px 0; }

.feed-bundle-likes {
  margin-top: 4px;
  margin-left: 42px;
  font-size: 11px; }

.feed-story-likes {
  margin-left: 0;
  margin-top: 5px;
  padding: 4px 5px 4px; }

.feed-story-comments {
  border: 0;
  padding: 0;
  width: 402px; }

.feed-events a, .feed-story a, .feed-story-likes a, .feed-story-comments a {
  text-decoration: none; }

.feed-events a:hover, .feed-story a:hover, .feed-story-likes a:hover, .feed-story-comments a:hover {
  text-decoration: underline; }

.feed-avatar-container {
  margin-right: 10px;
  float: left;
  position: relative; }

.feed-story-content {
  overflow: hidden;
  line-height: 18px; }

.feed-story-creationDate, .feed-story-playingas {
  color: #aaa;
  font-size: 11px; }

.feed-story-heading {
  color: #8A8A8A;
  line-height: 18px;
  word-wrap: break-word; }

.feed-story-body {
  color: #fff;
  line-height: 18px;
  word-wrap: break-word; }
  .feed-story-body p {
    padding-left: 46px;
    word-wrap: break-word; }

.feed-story-heading .feed-info-title {
  font-size: 12px;
  color: #fff;
  font-weight: bold; }

#feed-container .feed-story-heading .feed-info-title a, #feed-container .feed-story-body .feed-info-title a {
  font-weight: bold; }

.feed-story-heading .feed-info-description {
  font-size: 11px;
  color: #8A8A8A; }
  .feed-story-heading .feed-info-description.limit {
    width: 400px; }
  .feed-story-heading .feed-info-description ul {
    list-style: disc;
    margin-left: 15px; }

.wallpost-body {
  width: 410px;
  color: #fff;
  word-wrap: break-word; }

#main-loggedin-feed .wallpost-body {
  width: 552px; }

.feed-story-created-content {
  color: #353535; }

#feed-container {
  position: relative; }
  #feed-container .feed-unavailable {
    padding: 24px 0;
    font-size: 12px;
    font-style: italic; }

#feed-filter-content .feed-view-more-events {
  width: 991px;
  bottom: -14px;
  left: 1px; }

.feed-view-more-events {
  text-align: center;
  height: 26px;
  line-height: 26px;
  bottom: 0;
  left: -15px;
  margin-top: 16px; }

.feed-view-more-events-button {
  width: 602px;
  color: #308DBF; }

.feed-story-friend-icon {
  position: relative;
  top: 4px;
  padding-right: 5px; }

.feed-story-small-icon {
  display: inline-block; }
  .feed-story-small-icon img {
    vertical-align: middle;
    margin-right: 2px; }

.feed-story-small-likeicon {
  vertical-align: middle; }

.feed-story-infoarea-separator {
  position: relative;
  top: 1px;
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 11px;
  color: #a8a8a8; }

.feed-story-area-game {
  position: relative;
  top: 4px;
  line-height: 24px; }

.feed-story-content, .feed-events {
  font-size: 14px;
  color: #a8a8a8; }

.feed-story-area {
  display: inline-block; }

.feed-sub-events {
  margin-left: 16px;
  margin-top: 10px; }

.feed-comment-body {
  font-size: 11px;
  line-height: 18px;
  position: relative;
  margin-left: 40px;
  word-wrap: break-word; }
  .feed-comment-body a {
    font-size: 11px; }

.feed-comments-item {
  position: relative;
  clear: both;
  background: rgba(0, 0, 0, 0.2);
  margin-top: 1px;
  padding: 5px; }

.feed-comment-form {
  clear: both;
  overflow: hidden;
  margin-top: 1px;
  line-height: 0; }

.feed-comments-item .feed-avatar-container {
  margin-right: 5px; }

.feed-comment-submit-button-area {
  float: right;
  margin-right: 0px;
  margin-top: 8px;
  display: none; }

.feed-story-infoarea {
  clear: both; }
  .feed-story-infoarea a {
    font-size: 11px; }

.feed-nothing-happening {
  position: relative;
  width: 100%;
  line-height: 18px; }
  .feed-nothing-happening p {
    font-size: 12px;
    color: #525252;
    padding: 10px 0; }
    .feed-nothing-happening p.feed-nothing-happening-empty {
      text-align: center;
      color: #8a8a8a;
      font-style: italic;
      padding-top: 13px;
      font-size: 12px;
      line-height: 15px;
      padding-bottom: 0; }
  .feed-nothing-happening ul {
    list-style-type: square;
    list-style-position: inside;
    text-indent: 16px;
    color: #353535;
    color: #353535;
    font-size: 12px; }
    .feed-nothing-happening ul li {
      padding-bottom: 3px; }

.feed-livefeed-item {
  border-bottom: 1px solid #F0F0EF; }

.feed-livefeed-avatar {
  float: left;
  padding: 9px 10px 9px 0px; }

.feed-livefeed-content {
  float: left;
  font-size: 12px; }

.feed-livefeed-text {
  float: none;
  padding-top: 13px;
  color: #2F3030; }

.feed-livefeed-ago {
  float: none;
  padding-top: 5px;
  color: #8a8a8a;
  font-size: 11px; }

.battlefeed .list .item:not(:hover) .feed-story-area-comment-and-like {
  display: inline-block; }

.feed-unlike-item a {
  color: #8A8A8A;
  font-size: 11px;
  position: relative;
  padding-right: 13px;
  cursor: pointer;
  display: inline-block; }

.feed-story-content .feed-unlike-item a span.icon {
  background: url(../base/shared/row_icon_chat.png) right -26px no-repeat;
  width: 13px;
  height: 13px;
  display: inline-block; }

.feed-award-image {
  float: left;
  margin-right: 6px;
  margin-bottom: 10px; }
  .feed-award-image .common-selected-server-mapimage {
    position: relative; }

.feed-gameaccess .common-selected-feed-image {
  display: table-cell;
  vertical-align: top;
  border: none; }
  .feed-gameaccess .common-selected-feed-image.feed-image-premium img {
    background: black;
    padding: 10px; }

.feed-award-info {
  font-size: 11px;
  display: table-cell;
  vertical-align: top;
  padding-left: 10px; }

.feed-gamereport-info {
  font-size: 11px;
  float: left;
  padding-bottom: 10px; }

.feed-addedfavserver-gameicon {
  display: inline-block;
  width: 30px;
  height: 10px; }

.feed-addedfavserver-and {
  font-size: 12px;
  margin-right: 3px; }

.feed-bundle:hover .feed-story-delete, .feed-single-item:hover .feed-story-delete {
  background: url(../base/shared/row_icon_chat_light.png) 0 -26px;
  width: 13px;
  height: 13px;
  position: relative;
  float: right;
  cursor: pointer; }

.feed-bundle:hover .feed-story-delete:hover, .feed-single-item:hover .feed-story-delete:hover {
  background-position: 0 -39px; }

.feed-media-preview-remove {
  background: url(../base/shared/row_icon_chat_light.png) 0 -26px;
  width: 13px;
  height: 13px;
  position: relative;
  float: right;
  cursor: pointer; }

/*
#feed-addlinkwithpreviewarea {
    background: #fff;
    position: relative;
    top: -1px;
    padding: 10px;
    border: 1px solid #ABABAB;
    border-color: #E6E6E6 #ccc #ccc;
    label {
        color: #353535;
        font-size: 13px;
    }
}
*/
/*
.feed-link-preview {
    width: 626px;
    height: 25px;
    color: #353535;
    font-size: 16px;
    font-weight: normal;
    margin-top: 6px;
}
*/
.feed-media-preview-remove:hover {
  background-position: 0 -39px; }

.feed-bundle:hover #feed-optionsbutton, .feed-single-item:hover #feed-optionsbutton {
  background: url(../base/shared/row_icon_chat.png) 0 -26px;
  width: 13px;
  height: 13px;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer; }

.feed-bundle:hover #feed-optionsbutton:hover, .feed-single-item:hover #feed-optionsbutton:hover {
  background-position: 0 -39px; }

#feed-optionsbutton-container {
  position: absolute;
  right: 0;
  top: 0;
  background: #f00; }

.feed-bundle:hover #feed-story-options, .feed-single-item:hover #feed-story-options {
  background: url(../base/shared/row_icon_chat.png) 0 -26px;
  width: 13px;
  height: 13px;
  position: relative;
  right: 5px;
  top: 5px;
  cursor: pointer; }

.feed-bundle:hover #feed-story-options:hover, .feed-single-item:hover #feed-story-options:hover {
  background-position: 0 -39px; }

#feed-optionsbutton-dropdown {
  position: absolute;
  width: 120px;
  top: 20px;
  right: 0px;
  z-index: 100;
  display: none;
  background-color: white;
  border: 1px solid #aaa;
  display: none; }
  #feed-optionsbutton-dropdown .active {
    display: block; }

.feed-story-report-container {
  visibility: hidden;
  position: relative;
  float: right;
  margin-right: 2px;
  margin-top: 5px; }
  .feed-story-report-container .common-reportbutton {
    opacity: 0.5; }
    .feed-story-report-container .common-reportbutton:hover {
      opacity: 1; }

.feed-single-item:hover .feed-item-interaction-area .feed-story-report-container, .feed-comments-item:hover .feed-story-report-container, .feed-bundle:hover .feed-story-report-container {
  visibility: visible; }

.feed-comments-show {
  padding: 5px;
  cursor: pointer;
  color: #308DBF;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 0; }
  .feed-comments-show:hover {
    text-decoration: underline; }

.feed-textlimit-counter {
  position: absolute;
  margin-top: 4px;
  color: #a8a8a8;
  font-size: 11px; }

.feed-textlimit-fillout {
  float: right;
  position: relative;
  margin-top: 19px;
  margin-right: 12px; }

.feed-view-center-loader {
  text-align: center; }

#feed-view-more-events-loading {
  display: none;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  z-index: 20; }

.feed-comments-item:hover .feed-story-comment-delete {
  background: url(../base/shared/row_icon_chat_light.png) 0 -26px;
  width: 13px;
  height: 13px;
  position: relative;
  float: right;
  cursor: pointer;
  margin-top: 5px;
  margin-right: 5px;
  z-index: 2; }
  .feed-comments-item:hover .feed-story-comment-delete:hover {
    background-position: 0 -39px;
    z-index: 2; }

.feed-ago {
  font-size: 11px; }

.feed-item-interaction-area {
  position: absolute;
  right: 0;
  width: 40px;
  top: 4px; }

.feed-item-platoonbadge {
  margin-bottom: 6px; }

.feed-coop-level-complete-icon {
  background: url(../coop/difficulty-sprite.png) -2px 2px no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2; }

.feed-media-preview {
  position: relative;
  display: table;
  width: 100%;
  margin-top: 8px; }

#feed-media-preview-view-now-link {
  display: table-row; }

.feed-media-preview-thumb {
  display: table-cell;
  margin-left: 0px;
  margin-right: 10px;
  position: relative;
  width: 150px; }

.feed-media-preview-description {
  display: table-cell;
  padding: 0 0 0 12px;
  line-height: 18px;
  vertical-align: top; }
  .feed-media-preview-description h3 {
    font-size: 16px;
    line-height: 18px; }

.feed-media-preview-remove {
  position: absolute;
  top: 0px;
  right: 6px; }

.feed-media-preview-show-now {
  clear: both;
  position: absolute;
  top: 0px;
  left: 0px;
  width: inherit;
  height: 100%; }

.feed-media-preview-show-now-icon {
  background: url(../feed/icon-play.png) no-repeat;
  width: 34px;
  height: 34px;
  left: 50%;
  top: 50%;
  position: absolute;
  margin-left: -17px;
  margin-top: -17px; }

.feed-media-preview-show-now:hover .feed-media-preview-show-now-icon {
  background-position: 0 -34px; }

#feed-addlink-container {
  color: #8a8a8a;
  font-size: 12px;
  padding-top: 8px; }

.feed-update-status-terms {
  color: #898989;
  font-size: 11px;
  font-weight: normal;
  margin-right: 10px; }

.feed-update-status-button {
  float: right;
  margin: 10px 0;
  margin-top: 8px;
  z-index: 999;
  position: relative; }

#feed-addlinkwithpreview {
  cursor: pointer; }

.feed-addlink-container {
  font-size: 11px;
  color: #8a8a8a; }

.feed-link-preview-label {
  line-height: 24px;
  font-size: 12px; }
  .feed-link-preview-label input {
    width: 607px;
    margin-left: -1px; }

#feed-hidden-by-admin {
  color: #8A8A8A;
  display: block;
  font-size: 12px;
  padding: 30px;
  text-align: center; }

.common-reportbutton-dropdown a {
  font-weight: normal;
  color: #000; }

/*
.feed-like-item a {
    :hover {
        text-decoration: underline;
    }
    cursor: pointer;
}

.feed-unlike-item a {
    :hover {
        text-decoration: underline;
    }
    cursor: pointer;
}
*/
form.wallpost textarea {
  overflow: hidden;
  resize: none;
  width: 503px;
  resize: none;
  height: 14px;
  line-height: 14px;
  font-family: Arial, sans-serif;
  font-size: 14px; }

#feed-share-dialog {
  position: absolute;
  z-index: 5000;
  width: 145px;
  height: 92px;
  background-color: #f4f4f4;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
  #feed-share-dialog .share-container {
    width: 125px;
    height: 73px;
    padding: 10px;
    background-color: #fff;
    text-align: center; }
  #feed-share-dialog .callout:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  #feed-share-dialog .callout:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #f4f4f4;
    border-width: 10px;
    left: 50%;
    margin-left: -10px; }
  #feed-share-dialog .close-dialog {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #f4f4f4;
    padding: 5px;
    font-size: 20px;
    line-height: 10px;
    color: #222; }
  #feed-share-dialog .share-option {
    display: inline-block;
    height: 55px;
    width: 55px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: pointer; }
  #feed-share-dialog .share-tw {
    background-image: url(../feed/share_tw.png); }
  #feed-share-dialog .share-fb {
    background-image: url(../feed/share_fb.png); }
  #feed-share-dialog .share-link {
    font-size: 11px;
    display: block;
    position: absolute;
    top: 70px;
    width: 125px;
    box-sizing: border-box; }

.dialog.facebook-infopopup section.dialog-body {
  padding: 24px 30px 24px 30px;
  font-size: 14px; }
.dialog.facebook-infopopup h1 {
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 67px;
  background: url(../facebook/icon-fb-l.png) no-repeat;
  background-position: center 0px; }
.dialog.facebook-infopopup p {
  color: #a8a8a8;
  margin-top: 24px;
  margin-bottom: 24px; }
  .dialog.facebook-infopopup p b {
    font-weight: bold;
    color: #fff; }
.dialog.facebook-infopopup ul {
  padding-left: 16px; }
  .dialog.facebook-infopopup ul li {
    list-style-type: disc;
    padding-left: 5px; }
.dialog.facebook-infopopup footer button {
  margin-left: 7px;
  margin-right: 7px; }

.dialog.facebook-friendfinder .dialog-body {
  padding: 16px;
  padding-top: 22px;
  min-height: 60px; }
  .dialog.facebook-friendfinder .dialog-body .info {
    margin-bottom: 20px; }
  .dialog.facebook-friendfinder .dialog-body .friendfinder-content {
    text-align: center; }
  .dialog.facebook-friendfinder .dialog-body button.connect {
    margin-top: 4px; }
  .dialog.facebook-friendfinder .dialog-body h4 {
    margin: 4px 0 4px 0;
    font-family: "Arial";
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    color: #fff; }
  .dialog.facebook-friendfinder .dialog-body ol li {
    margin-bottom: 12px;
    padding-right: 16px; }
    .dialog.facebook-friendfinder .dialog-body ol li:hover {
      background: rgba(255, 255, 255, 0.2); }
    .dialog.facebook-friendfinder .dialog-body ol li img {
      float: left;
      margin-right: 12px; }
    .dialog.facebook-friendfinder .dialog-body ol li .user-info {
      float: left;
      text-align: left;
      margin-top: 6px; }
      .dialog.facebook-friendfinder .dialog-body ol li .user-info .username {
        display: block;
        text-decoration: inherit; }
        .dialog.facebook-friendfinder .dialog-body ol li .user-info .username:hover {
          color: #fff;
          text-decoration: underline; }
      .dialog.facebook-friendfinder .dialog-body ol li .user-info .realname {
        display: block;
        color: #a8a8a8; }
    .dialog.facebook-friendfinder .dialog-body ol li button {
      float: right;
      margin-top: 8px; }
.dialog.facebook-friendfinder footer {
  padding: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: none; }
  .dialog.facebook-friendfinder footer .sharing .switch {
    margin-right: 10px; }
  .dialog.facebook-friendfinder footer button {
    margin-top: 16px; }

#comcenter-area .facebook-friendfinder, #feed-container .facebook-friendfinder {
  background: url(../facebook/icon-fb-l.png) no-repeat;
  background-position: center 80px;
  padding-top: 140px;
  margin-right: 15px;
  text-align: center;
  position: relative;
  z-index: 1; }
  #comcenter-area .facebook-friendfinder p, #feed-container .facebook-friendfinder p {
    margin-bottom: 12px;
    text-transform: none;
    font-family: Arial;
    font-size: 14px;
    line-height: 1.5em;
    color: #a8a8a8; }
  #comcenter-area .facebook-friendfinder button, #feed-container .facebook-friendfinder button {
    cursor: pointer; }

#feed-container .facebook-friendfinder {
  background-position: center 0;
  padding-top: 55px;
  margin-bottom: 20px; }

#comcenter-area .comcenter-no-online-friends .facebook-friendfinder {
  margin-right: 0; }

@media screen and (min-width: 1261px) {
  html:not(.is-touch) body:not(.no-comcenter) .dialog.npx-console {
    width: 980px;
    margin-left: -490px; } }

.dialog.npx-console {
  min-width: 819px;
  height: 80%;
  max-height: 500px;
  width: 80%;
  margin-left: -40%;
  top: 10%; }
  .dialog.npx-console section {
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%; }
  .dialog.npx-console .dialog-body {
    padding: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%; }
  .dialog.npx-console .card {
    padding: 0;
    text-align: center;
    position: absolute;
    left: 0px;
    top: 32px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Purista;
    display: none; }
    .dialog.npx-console .card .card-content {
      position: relative;
      width: 100%;
      margin: 0px auto;
      padding-top: 50px;
      height: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      .dialog.npx-console .card .card-content:before, .dialog.npx-console .card .card-content:after {
        display: table;
        content: "";
        line-height: 0; }
      .dialog.npx-console .card .card-content:after {
        clear: both; }
      .dialog.npx-console .card .card-content figure {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        width: 50%; }
      .dialog.npx-console .card .card-content article {
        position: relative;
        height: 66%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        width: 50%;
        text-align: left;
        padding-top: 20px;
        padding-left: 80px;
        min-height: 300px; }
        .dialog.npx-console .card .card-content article h2 {
          text-transform: uppercase;
          font-size: 36px;
          margin: 0;
          padding: 0;
          line-height: 1.1em;
          margin-bottom: 16px; }
        .dialog.npx-console .card .card-content article p {
          font-size: 19px;
          margin: 0 0 1.5em 0;
          padding: 0; }
          .dialog.npx-console .card .card-content article p small {
            color: #a8a8a8; }
        .dialog.npx-console .card .card-content article .btn {
          position: absolute;
          bottom: 0; }
    .dialog.npx-console .card.show {
      display: block;
      z-index: 10; }

.dialog.npx-pc {
  width: 845px;
  background-image: url("//d34ymitoc1pg7m.cloudfront.net/bf4/npx/pc/first-login-1-23e2dc67.png");
  background-position: bottom right;
  background-repeat: no-repeat; }
  .dialog.npx-pc .dialog-body {
    padding: 25px 40px; }
  .dialog.npx-pc h6, .dialog.npx-pc p {
    width: 330px; }
  .dialog.npx-pc h1 {
    width: 670px;
    font-size: 50px;
    line-height: 50px; }
  .dialog.npx-pc h6 {
    font-size: 19px;
    line-height: 28px;
    text-transform: none;
    font-weight: 400; }
  .dialog.npx-pc p {
    font-size: 14px;
    color: #a8a8a8; }
  .dialog.npx-pc footer {
    width: 350px; }

.dialog.npx-ps4.bfh, .dialog.npx-pc.bfh {
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/npx/bfh-firstlogin2-30a3bfdd.jpg);
  background-position: top center;
  background-repeat: no-repeat; }
  .dialog.npx-ps4.bfh h6, .dialog.npx-ps4.bfh p, .dialog.npx-pc.bfh h6, .dialog.npx-pc.bfh p {
    width: 100%;
    text-align: center; }
  .dialog.npx-ps4.bfh h1, .dialog.npx-pc.bfh h1 {
    width: 100%;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 18px;
    padding-top: 120px; }
  .dialog.npx-ps4.bfh h6, .dialog.npx-pc.bfh h6 {
    font-size: 16px;
    line-height: 22px;
    text-transform: none;
    font-weight: 400;
    margin-bottom: 18px; }
  .dialog.npx-ps4.bfh p, .dialog.npx-pc.bfh p {
    font-size: 14px;
    color: #a8a8a8; }
  .dialog.npx-ps4.bfh footer, .dialog.npx-pc.bfh footer {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: relative;
    padding: 0 0 20px 0; }
    .dialog.npx-ps4.bfh footer .btn-primary, .dialog.npx-pc.bfh footer .btn-primary {
      margin-left: 6px; }

@-webkit-keyframes pulsing-icon {
  0% {
    opacity: 0.2; }

  50% {
    opacity: 1; }

  100% {
    opacity: 0.2; } }

@-moz-keyframes pulsing-icon {
  0% {
    opacity: 0.2; }

  50% {
    opacity: 1; }

  100% {
    opacity: 0.2; } }

-o-keyframes pulsing-icon 0% {
  opacity: 0.2; }
-o-keyframes pulsing-icon 50% {
  opacity: 1; }
-o-keyframes pulsing-icon 100% {
  opacity: 0.2; }

@-ms-keyframes pulsing-icon {
  0% {
    opacity: 0.2; }

  50% {
    opacity: 1; }

  100% {
    opacity: 0.2; } }

@keyframes pulsing-icon {
  0% {
    opacity: 0.2; }

  50% {
    opacity: 1; }

  100% {
    opacity: 0.2; } }

.npx-explorer-icon {
  position: absolute;
  display: inline-block;
  width: 35px;
  height: 35px;
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/icons/npx-icon-f371f6ea.png);
  cursor: pointer;
  -webkit-animation: pulsing-icon 2s ease infinite both;
  -moz-animation: pulsing-icon 2s ease infinite both;
  -ms-animation: pulsing-icon 2s ease infinite both;
  -o-animation: pulsing-icon 2s ease infinite both;
  animation: pulsing-icon 2s ease infinite both;
  z-index: 1000; }
  .npx-explorer-icon.fixed {
    position: fixed; }

.base-section-menu .npx-explorer-icon, #base-header-secondary-nav .npx-explorer-icon {
  top: 30px;
  left: 50%; }

.serverbrowser-filterstring .npx-explorer-icon {
  top: 9px;
  right: 25px; }

#ugm-action-buttons .npx-explorer-icon {
  top: -2px;
  left: 7px; }

.profile-stats-tab.loadout {
  position: relative; }
  .profile-stats-tab.loadout .npx-explorer-icon {
    top: 7px;
    left: 10px; }

.npx-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  -webkit-backface-visibility: hidden; }
  .npx-tooltip.success .npx-tooltip-box {
    border-color: #05d705;
    background: -webkit-radial-gradient(center, ellipse cover, #044903 0, #0b7a07 90%);
    background: -moz-radial-gradient(center, ellipse cover, #044903 0, #0b7a07 90%);
    background: radial, ellipse cover center, #044903 0, #0b7a07 90%; }
    .npx-tooltip.success .npx-tooltip-box:after {
      content: " ";
      display: block;
      width: 114px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -57px;
      background-image: url(../npx/check.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center; }
    .npx-tooltip.success .npx-tooltip-box h5, .npx-tooltip.success .npx-tooltip-box p, .npx-tooltip.success .npx-tooltip-box .close {
      opacity: 0; }
  .npx-tooltip.success .arrow {
    background-image: url(../npx/green-arrow.png); }
  .npx-tooltip.success.top .arrow {
    background-image: url(../npx/green-arrow-down.png); }
  .npx-tooltip .arrow {
    display: block;
    width: 21px;
    height: 12px;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    background-image: url(../npx/blue-arrow.png);
    background-repeat: no-repeat;
    z-index: 90; }
  .npx-tooltip.fixed {
    position: fixed; }
  .npx-tooltip.bottom .arrow {
    top: -12px; }
  .npx-tooltip.top .arrow {
    bottom: -12px;
    background-image: url(../npx/blue-arrow-down.png); }
  .npx-tooltip .npx-tooltip-box {
    -webkit-backface-visibility: hidden;
    display: block;
    top: 11px;
    position: absolute;
    z-index: 80;
    width: 220px;
    margin-left: -108px;
    border: #1089a3 1px solid;
    background-color: #074362;
    text-align: left;
    border-radius: 4px;
    background: -webkit-radial-gradient(center, ellipse cover, #03212f 0, #074564 90%);
    background: -moz-radial-gradient(center, ellipse cover, #03212f 0, #074564 90%);
    background: radial, ellipse cover center, #03212f 0, #074564 90%; }
    .npx-tooltip .npx-tooltip-box .content {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-backface-visibility: hidden;
      overflow: hidden;
      margin: 12px; }
    .npx-tooltip .npx-tooltip-box .close {
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 200;
      display: block;
      width: 11px;
      height: 11px;
      background-image: url(../npx/close.png);
      cursor: pointer; }
    .npx-tooltip .npx-tooltip-box h5 {
      font-size: 14px;
      line-height: 14px; }
    .npx-tooltip .npx-tooltip-box p {
      font-size: 12px;
      line-height: 18px; }
    .npx-tooltip .npx-tooltip-box .swiping-glow {
      -webkit-backface-visibility: hidden;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      overflow: hidden; }
      .npx-tooltip .npx-tooltip-box .swiping-glow > div {
        content: " ";
        width: 123px;
        height: 100%;
        background-image: url(../npx/swiping-glow.png);
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        top: 0;
        left: -150px;
        background-size: cover; }

.dialog.npx-survey-dialog h1 {
  padding-top: 50px; }
.dialog.npx-survey-dialog footer {
  padding-bottom: 40px; }
  .dialog.npx-survey-dialog footer button {
    overflow: visible; }

#base-bfh-html .odcstore .product-container.base-game {
  background-image: url(//d34ymitoc1pg7m.cloudfront.net/bfh/store/bfh-product-bg-023ebc13.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 350px;
  background-position: 0px -2px; }
#base-bfh-html .odcstore .friends-container {
  margin-top: 1px;
  background-color: rgba(7, 7, 7, 0.7);
  padding: 16px; }

#unified-game-manager .ugm-state .ugm-btn-group .btn-close {
  opacity: 0.75;
  width: 16px;
  padding: 0; }
  #unified-game-manager .ugm-state .ugm-btn-group .btn-close:hover {
    opacity: 1; }
    #unified-game-manager .ugm-state .ugm-btn-group .btn-close:hover:after, #unified-game-manager .ugm-state .ugm-btn-group .btn-close:hover:before {
      display: none; }

.comcenter-icon-notifications-container, #comcenter-icon-notifications, #comcenter-icon-game, #comcenter-icon-inbox, #comcenter-icon-matches {
  float: left;
  width: 40px;
  cursor: pointer;
  position: relative;
  height: 40px; }

.comcenter-icon-notifications-container:hover {
  background: url(../comcenter/taskbar-bg-hover.png); }

#comcenter-reports-list-loading, #comcenter-updates-list-loading {
  padding-top: 16px;
  text-align: center; }

#comcenter-icon-inbox {
  background: url(../comcenter/icons/cc-inbox-inactive.png) center center no-repeat; }
  #comcenter-icon-inbox:hover {
    background: url(../comcenter/cc-inbox-hover.png) no-repeat;
    background-position: 1px 1px; }

#comcenter-icon-game {
  background: url(../comcenter/icons/cc-reports.png) -5px 0 no-repeat; }

#comcenter-icon-matches {
  background: url(../comcenter/icons/cc-matches.png) -4px 0 no-repeat; }
  #comcenter-icon-matches:hover {
    background-position: -4px -40px; }
  #comcenter-icon-matches.open {
    background-color: #FDBF00;
    background-position: -4px -80px; }

#comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link, .comcenter-chat-content .btn.btn-small.join-friend-submit-link {
  width: 32px;
  height: 32px;
  padding: 0 11px;
  margin-top: 4px;
  opacity: 0.8;
  float: left;
  border: 1px solid #ff9900; }
  #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link:hover, .comcenter-chat-content .btn.btn-small.join-friend-submit-link:hover {
    opacity: 1; }
  #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link.disabled, #comcenter-tab-friends-content .is-touch #serverbrowser aside .action-buttons-container .btn-small.join-friend-submit-link.favorite-toggle.starred, .is-touch #serverbrowser aside .action-buttons-container #comcenter-tab-friends-content .btn-small.join-friend-submit-link.favorite-toggle.starred, .comcenter-chat-content .btn.btn-small.join-friend-submit-link.disabled, .comcenter-chat-content .is-touch #serverbrowser aside .action-buttons-container .btn-small.join-friend-submit-link.favorite-toggle.starred, .is-touch #serverbrowser aside .action-buttons-container .comcenter-chat-content .btn-small.join-friend-submit-link.favorite-toggle.starred {
    opacity: 0.5; }
  #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link.btn-primary, .comcenter-chat-content .btn.btn-small.join-friend-submit-link.btn-primary {
    opacity: 1;
    width: 23px;
    height: 24px;
    padding: 0;
    margin-top: 2px; }
    #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link.btn-primary i, .comcenter-chat-content .btn.btn-small.join-friend-submit-link.btn-primary i {
      margin-top: 0;
      margin-left: 2px;
      padding-bottom: 1px; }
  #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link i, .comcenter-chat-content .btn.btn-small.join-friend-submit-link i {
    margin-top: 8px;
    background: url(../base/shared/icon-join.png) 0 0 no-repeat;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px; }

body .comcenter-chat-content .btn.btn-small.join-friend-submit-link {
  margin-top: 0px; }

#comcenter-icon-game.unread, #comcenter-icon-game:hover {
  background: url(../comcenter/icons/cc-reports.png) -5px -40px no-repeat;
  cursor: pointer; }

/*#comcenter-icon-game.unread,*/
body #comcenter-icon-game.open {
  background: url(../comcenter/icons/cc-reports.png) -5px -80px no-repeat #fdbf00; }

#comcenter-icon-inbox.unread, #comcenter-icon-inbox.open {
  background: url(../comcenter/icons/cc-inbox-open.png) center center no-repeat #fdbf00; }

#comcenter-icon-notifications {
  background: url(../comcenter/icons/cc-notifications.png) -4px 0; }
  #comcenter-icon-notifications:hover {
    background-position: -4px -40px; }

/*
#comcenter-icon-notifications.unread
{
    background: url(../comcenter/icons/cc-notification-new.png) center center no-repeat;
}*/
/* #comcenter-icon-notifications:hover,*/
/*#comcenter-icon-notifications.unread,*/
#comcenter-icon-notifications.open {
  background-color: #FDBF00;
  background-position: -4px 40px; }

.comcenter-inbox-notifier {
  cursor: pointer; }

#base-header .comcenter-notification:hover, #base-header .comcenter-inbox-notifier:hover, #base-header .comcenter-notifications-moreinfo:hover {
  background: rgba(255, 255, 255, 0.1); }

#comcenter-icon-inbox.unread .comcenter-chat-unread {
  /* #comcenter-icon-notifications.unread .comcenter-chat-unread { */
  display: block; }

#comcenter .comcenter-chat-taskbar.unread .icon.chat.unread {
  display: block; }

body #comcenter .comcenter-chat-taskbar.active .icon.chat.unread {
  display: none; }

.chat-admin-info {
  text-align: center;
  color: #fff; }

#comcenter-icon-notifications.unread {
  background-position: -4px 80px; }
  #comcenter-icon-notifications.unread .comcenter-chat-unread {
    display: block; }

#comcenter-icon-game.unread .comcenter-chat-unread {
  display: block; }
#comcenter-icon-game.open .comcenter-chat-unread {
  display: none; }

#comcenter-icon-notifications.open .comcenter-chat-unread {
  display: none; }

#comcenter {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2000;
  font-size: 11px;
  font-weight: bold;
  color: #494949;
  line-height: 42px;
  height: 0; }
  #comcenter #comcenter-inner {
    height: 100%; }

.ugm-showing #comcenter {
  bottom: 42px; }

@-webkit-keyframes comcenter-friend-online {
  0% {
    background-color: rgba(168, 168, 168, 0); }

  100% {
    background-color: rgba(168, 168, 168, 0.6); } }

@-moz-keyframes comcenter-friend-online {
  0% {
    background-color: rgba(168, 168, 168, 0); }

  100% {
    background-color: rgba(168, 168, 168, 0.6); } }

-o-keyframes comcenter-friend-online 0% {
  background-color: rgba(168, 168, 168, 0); }
-o-keyframes comcenter-friend-online 100% {
  background-color: rgba(168, 168, 168, 0.6); }

@-ms-keyframes comcenter-friend-online {
  0% {
    background-color: rgba(168, 168, 168, 0); }

  100% {
    background-color: rgba(168, 168, 168, 0.6); } }

@keyframes comcenter-friend-online {
  0% {
    background-color: rgba(168, 168, 168, 0); }

  100% {
    background-color: rgba(168, 168, 168, 0.6); } }

#comcenter-friends .comcenter-friend {
  /* Fallback for legacy browsers (IE9) */ }
  #comcenter-friends .comcenter-friend.comcenter-friend-online.animate-ie9, #comcenter-friends .comcenter-friend.comcenter-friend-playing.animate-ie9 {
    background-color: rgba(168, 168, 168, 0.6); }
  #comcenter-friends .comcenter-friend.comcenter-friend-online.animate {
    -webkit-animation-name: comcenter-friend-online;
    -moz-animation-name: comcenter-friend-online;
    -ms-animation-name: comcenter-friend-online;
    -o-animation-name: comcenter-friend-online;
    animation-name: comcenter-friend-online;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-iteration-count: 2;
    -moz-animation-iteration-count: 2;
    -ms-animation-iteration-count: 2;
    -o-animation-iteration-count: 2;
    animation-iteration-count: 2; }
  #comcenter-friends .comcenter-friend.comcenter-friend-playing, #comcenter-friends .comcenter-friend.comcenter-friend-online {
    color: #6f6; }
  #comcenter-friends .comcenter-friend.comcenter-friend-idle {
    color: #FF0; }
  #comcenter-friends .comcenter-friend.comcenter-friend-offline {
    color: #999; }
    #comcenter-friends .comcenter-friend.comcenter-friend-offline a {
      color: #8a8a8a;
      font-weight: normal;
      text-decoration: none; }
      #comcenter-friends .comcenter-friend.comcenter-friend-offline a:hover {
        color: #8a8a8a;
        font-weight: normal;
        text-decoration: none; }
  #comcenter-friends .comcenter-friend.comcenter-friend-dnd {
    color: #F99; }

.comcenter-info {
  float: left;
  position: relative;
  margin-left: 3px; }

#patcher-events #patching, #comcenter-joinflow, #comcenter-gamereportupdates-preview, #comcenter-inbox-preview, #comcenter-notifications, #comcenter-matches {
  display: none;
  width: 213px;
  background: #fdfdfd;
  border: 1px solid #aaaaaa;
  border-bottom: 0px;
  position: absolute;
  bottom: 40px;
  left: 104px;
  z-index: 2000; }

#comcenter-notifications {
  left: 0;
  width: 230px; }

#comcenter-matches {
  left: 0;
  width: 269px; }

#patcher-events #patching, #comcenter-joinflow {
  display: none;
  height: 224px;
  top: -225px;
  left: -1px;
  width: 229px; }

#patcher-events #patching {
  display: block; }

#gamecontrol-game-launcher #comcenter-joinflow {
  display: block; }
  #gamecontrol-game-launcher #comcenter-joinflow.askForFullscreen {
    height: 264px;
    top: -265px; }

#comcenter-gamereportupdates-preview {
  left: -1px;
  width: 229px; }

#comcenter-inbox-preview {
  left: -1px; }

.comcenter-notification-icon {
  float: left;
  width: 34px;
  left: 0;
  position: absolute; }

.comcenter-notification-text {
  padding-left: 40px;
  position: relative;
  min-height: 35px;
  font-weight: normal;
  font-size: 12px; }
  .comcenter-notification-text a {
    font-size: 12px; }

.comcenter-notification-text.missions {
  min-height: 44px; }

.comcenter-notifications-bottom {
  clear: both;
  height: 4px;
  width: 100%;
  background: #ffc600; }

#comcenter-notifications a {
  color: #1c799d;
  font-size: 11px;
  text-decoration: none; }

.comcenter-notification-title {
  height: 33px;
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
  background: #ebebeb;
  border-bottom: 1px solid #221e25;
  text-transform: uppercase;
  color: #000;
  text-shadow: 0 1px #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 33px;
  overflow: hidden;
  padding-left: 12px; }

.comcenter-notification-content {
  color: #000;
  max-height: 500px;
  overflow-y: auto; }
  .comcenter-notification-content a {
    font-size: 11px; }

.comcenter-notification-list {
  position: relative; }

#challenges .iconbox {
  width: 52px; }

.comcenter-notification .iconbox, .inbox-notification .iconbox {
  position: absolute;
  width: 40px;
  height: 32px;
  left: 0; }
.comcenter-notification .icon, .inbox-notification .icon {
  margin-top: 8px;
  margin-left: 8px;
  width: 18px;
  height: 18px;
  display: inline-block;
  overflow: hidden;
  background: url(../notification/notification-icons.png) no-repeat; }
  .comcenter-notification .icon.friend, .inbox-notification .icon.friend {
    background-position: 0 -18px; }
  .comcenter-notification .icon.comment, .inbox-notification .icon.comment {
    background-position: 0 -36px; }
  .comcenter-notification .icon.platoon, .inbox-notification .icon.platoon {
    background-position: 0 -54px; }
  .comcenter-notification .icon.premium, .inbox-notification .icon.premium {
    background-position: 0 -72px; }

.comcenter-notifications-one-click {
  cursor: pointer; }

.comcenter-notification {
  line-height: 14px;
  border-bottom: 1px solid #302f33;
  padding: 10px;
  font-size: 12px;
  font-weight: normal; }
  .comcenter-notification.notfound {
    text-align: center;
    line-height: 24px;
    height: 42px;
    line-height: 42px; }
  .comcenter-notification a {
    color: #fff;
    font-weight: normal; }
  .comcenter-notification .base-profile-link {
    font-weight: bold; }
  .comcenter-notification.not-read {
    background: rgba(255, 255, 255, 0.05); }
  .comcenter-notification:last-child {
    border-bottom: 0; }

.comcenter-notification-ago {
  color: #afafaf;
  font-size: 11px;
  display: block; }

.comcenter-notifications-moreinfo {
  text-align: center;
  line-height: 28px; }
  .comcenter-notifications-moreinfo a {
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    width: 100%;
    display: inline-block; }
    .comcenter-notifications-moreinfo a:hover {
      text-decoration: underline; }

.comcenter-section {
  width: 132px;
  height: 100%;
  float: left;
  border-right: 1px solid #838382;
  text-align: center; }
  .comcenter-section img {
    margin-top: 7px; }

#comcenter-friendbutton {
  cursor: pointer;
  height: 39px;
  line-height: 14px;
  border: 1px solid #393939;
  border-bottom: 0;
  width: 235px; }

.comcenter-divider-left, .comcenter-divider {
  float: right;
  width: 1px;
  height: 40px; }

.comcenter-divider-left {
  float: left; }

#comcenter-friendbutton.active .comcenter-taskbar-info {
  background: url(../comcenter/comcenter-active.png);
  color: #131110; }
#comcenter-friendbutton .comcenter-button-info, #comcenter-friendbutton .comcenter-button-title {
  color: #FFF;
  font-weight: bold;
  margin-left: 8px;
  text-transform: uppercase; }
#comcenter-friendbutton .comcenter-button-info {
  color: #ffc600;
  font-weight: normal;
  text-transform: none;
  width: 116px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }
#comcenter-friendbutton.active .comcenter-button-info {
  color: #58410b;
  text-shadow: 0 1px #fddd82;
  font-weight: normal; }
#comcenter-friendbutton .comcenter-origin-logo {
  background: transparent url(../base/shared/origin-logo.png) no-repeat 210px center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }
#comcenter-friendbutton .comcenter-button-title {
  margin-top: 5px;
  font-size: 11px;
  font-family: Tahoma, Arial, sans-serif; }
#comcenter-friendbutton.active .comcenter-button-title {
  color: #000;
  text-shadow: 0 1px #fddd82; }

#comcenter-friends-list ul li {
  padding: 5px 0 5px 0;
  clear: both;
  overflow: auto;
  display: block; }
  #comcenter-friends-list ul li:hover {
    background-color: #e9e9e9; }

#comcenter-friends-list ul li img {
  margin: 0 5px 0 5px;
  float: left; }
#comcenter-friends-list ul li .main-profile-status-icon {
  margin: 5px 0 0 10px; }
#comcenter-friends-list ul li a {
  float: left;
  line-height: 18px;
  text-decoration: none; }

.comcenter-chat-header form.join-friend .base-general-dropdown-area {
  border: 1px solid #ccc;
  left: 86px;
  top: 30px; }

#comcenter-friends-list ul li .join-friend .base-button-arrow-tiny {
  height: 18px;
  float: right;
  margin-right: 8px;
  background: transparent url(../base/bfbc2/buttons/base-button-arrow-extra-small.png) repeat scroll 0 -36px; }
  #comcenter-friends-list ul li .join-friend .base-button-arrow-tiny:hover {
    background: url(../base/bfbc2/buttons/base-button-arrow-extra-small.png) 0 -18px; }
  #comcenter-friends-list ul li .join-friend .base-button-arrow-tiny:active {
    background: url(../base/bfbc2/buttons/base-button-arrow-extra-small.png) 0 -36px; }

#comcenter li .join-friend {
  height: 5px; }

#comcenter-friendcounter {
  position: relative;
  float: right;
  margin-right: 10px;
  width: 25px;
  height: 100%;
  background: url(../comcenter/friends-online.png) center left no-repeat;
  padding-left: 10px;
  color: #959595;
  font-size: 11px;
  font-weight: bold;
  font-family: Arial, sans-serif; }

#comcenter-friendsplaying {
  position: relative;
  float: right;
  margin-right: 0;
  width: 20px;
  height: 100%;
  background: url(../comcenter/friends-playing.png) center left no-repeat;
  padding-left: 10px;
  color: #959595;
  font-size: 11px;
  font-weight: bold;
  font-family: Arial, sans-serif; }

.comcenter-item {
  float: left; }

.comcenter-chat-status-icon {
  float: left;
  width: 18px;
  height: 100%; }

.comcenter-status-icon {
  float: left;
  width: 18px;
  height: 100%; }
  .comcenter-status-icon img {
    margin-left: 6px;
    margin-top: 14px; }

.comcenter-chat-status-icon img {
  margin-left: 6px;
  margin-top: 12px; }

.comcenter-dropdownbutton {
  height: 37px;
  width: 18px;
  position: absolute;
  right: 0px;
  top: 0px;
  display: none; }

.comcenter-dropdownbutton-inner {
  background: url(../comcenter/dropdownbutton.png);
  height: 13px;
  width: 13px;
  position: absolute;
  top: 11px; }

.comcenter-friend:hover .comcenter-dropdownbutton {
  display: block; }

.comcenter-dropdownbutton.active, .comcenter-dropdownbutton:hover {
  display: block; }
.comcenter-dropdownbutton.active .comcenter-dropdownbutton-inner, .comcenter-dropdownbutton:hover .comcenter-dropdownbutton-inner {
  background-position: 0 13px; }

.comcenter-dropdown {
  border: 1px solid #aaaaaa;
  width: 115px;
  background: #fff;
  position: absolute;
  right: 6px;
  top: 23px;
  z-index: 100; }
  .comcenter-dropdown a {
    display: block;
    font-size: 11px;
    padding: 0 10px;
    width: 95px;
    height: 25px;
    line-height: 25px; }

#comcenter-area .comcenter-dropdown li {
  border-bottom: 1px solid #ebebeb;
  height: 25px;
  font-size: 11px;
  line-height: 25px; }

.comcenter-dropdown li.inactive {
  cursor: default;
  color: #a8a8a8;
  padding: 0 10px;
  cursor: default !important; }

.comcenter-friend-item .comcenter-dropdown li:hover {
  background: #fff; }

.comcenter-chat-avatar-multi, .comcenter-chat-avatar-taskbar, .comcenter-avatar, .comcenter-chat-avatar {
  float: left;
  margin-right: 6px; }

#comcenter-friendrequests-list .comcenter-avatar {
  padding-left: 11px; }

.comcenter-chat-avatar-taskbar {
  margin: 0 2px;
  margin-top: 4px;
  line-height: normal; }

.comcenter-chat-group .comcenter-chat-avatar-taskbar {
  margin-top: 8px; }

.comcenter-chat-avatar-multi-free-slot {
  margin-top: 0px;
  margin-right: 2px;
  margin-left: 0px;
  position: relative;
  width: 26px;
  height: 27px; }

.comcenter-chat-avatar-multi {
  margin-top: 0px;
  margin-right: 2px;
  margin-left: 0px;
  position: relative;
  width: 26px;
  height: 27px;
  line-height: 1; }
  .comcenter-chat-avatar-multi:hover .base-general-dropdown-area {
    display: block; }
  .comcenter-chat-avatar-multi .base-general-dropdown-area {
    display: none;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100;
    top: 26px;
    width: 140px;
    line-height: 1; }
    .comcenter-chat-avatar-multi .base-general-dropdown-area a {
      color: #fff; }

.comcenter-chat-avatar-multi-free-slot {
  background: #e7e7e7;
  border-top: 1px solid #dedede;
  float: left;
  height: 25px;
  width: 26px; }

.comcenter-chat-serverinfo-playing {
  color: #353535;
  font-weight: normal; }

.comcenter-chat-serverinfo a {
  font-size: 11px; }

.comcenter-chat-serverinfo-notplaying {
  color: #959595;
  text-align: center; }

.comcenter-chat-empty {
  text-align: center;
  position: absolute;
  top: 120px;
  height: 120px;
  width: 200px; }

.comcenter-no-online-friends {
  text-align: center;
  padding: 4px;
  color: #959595;
  z-index: 1;
  font-size: 12px;
  line-height: 23px;
  font-weight: bold; }
  .comcenter-no-online-friends img {
    margin-top: 18px; }
  .comcenter-no-online-friends .loader {
    position: relative;
    top: 60px; }

.comcenter-origin-unavailable {
  color: #cc382c;
  padding-top: 20px; }

#comcenter-tab-settings-content {
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden; }

.chat-header {
  position: relative;
  text-transform: uppercase;
  color: #000;
  text-shadow: 0 1px #fff;
  font-size: 11px;
  font-weight: bold;
  height: 34px;
  background: #ebebeb;
  border-bottom: 1px solid #bebebe;
  font-weight: bold;
  line-height: 33px; }

.comcenter-chat-contract {
  cursor: pointer;
  position: absolute;
  right: 6px;
  background: url(../base/shared/row_icon_chat.png);
  background-position: 0px 0px;
  height: 13px;
  top: 10px;
  width: 13px; }

.chat-header .comcenter-chat-contract {
  position: absolute;
  right: 22px; }

.chat-header .comcenter-username {
  position: absolute;
  right: 36px;
  height: 34px; }

.comcenter-chat-group .chat-header .comcenter-chat-contract {
  position: relative;
  right: 6px;
  float: right; }

.comcenter-close-group, .comcenter-close {
  cursor: pointer;
  position: relative;
  float: right;
  margin-right: 4px;
  top: 14px;
  background: url(../base/shared/row_icon_chat.png);
  background-position: 0px 26px;
  height: 13px;
  width: 13px; }

.comcenter-chat-party-menu {
  cursor: pointer;
  position: relative;
  float: right;
  margin-right: 4px;
  top: 10px; }

.comcenter-chat-party-menu-icon {
  cursor: pointer;
  position: relative;
  background: url(../base/shared/row_icon_chat.png);
  background-position: 0px -26px;
  height: 13px;
  width: 13px; }

.comcenter-chat-party-menu-icon.inverted {
  background: url(../base/shared/row_icon_chat_light.png);
  background-position: 0px -26px; }

.comcenter-chat-party-menu.active .comcenter-chat-party-menu-icon, .comcenter-chat-party-menu-icon:hover {
  background-position: 0 13px; }

.comcenter-close-group {
  display: none;
  background-position: 0px 13px; }

.comcenter-close:hover {
  background-position: 0px 13px; }

.chat-header .comcenter-close-group, .chat-header .comcenter-close {
  top: 10px; }

#comcenter-notifications.comcenter-notification-padder {
  left: 2px; }

.chat-header {
  position: relative;
  z-index: 100;
  /*cursor:pointer;*/ }

.comcenter-contract:hover, .comcenter-chat-contract:hover {
  background-position: 0px -13px; }

.comcenter-chat-header, .comcenter-chat-group-header {
  border-top: 1px solid #d2d2d2;
  line-height: 35px;
  background: #f3f3f3;
  clear: both;
  position: relative;
  height: 64px; }

.comcenter-chat-header {
  height: 33px;
  position: relative;
  border-bottom: 1px solid #ccc;
  padding: 0 5px; }

.comcenter-chat-idle, .comcenter-chat-offline, .comcenter-chat-server {
  text-align: center;
  color: #8a8a8a;
  border-bottom: 1px solid #ccc; }

.comcenter-chat-header-origin {
  line-height: 17px; }

.chat-header-group-chat {
  float: left;
  padding-left: 6px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 131px;
  overflow: hidden;
  text-shadow: none; }

.chat-header-group-name-area {
  position: absolute;
  top: 0px;
  left: 5px;
  z-index: 2;
  width: 181px;
  display: none;
  background: #EBEBEB; }

.chat-header-submit {
  font-size: 11px; }

.chat-header-group-chat-editname {
  display: block;
  background: url(../comcenter/chat-edit.png) no-repeat 0 0;
  height: 14px;
  width: 14px;
  float: left;
  margin-left: 6px;
  margin-top: 9px; }
  .chat-header-group-chat-editname:hover {
    background-position: 0 -14px; }

.chat-header-group-name-area-input {
  width: 120px; }

.comcenter-chat-group-avatars {
  white-space: nowrap;
  margin-left: 4px;
  margin-top: 0px;
  position: Relative; }

.comcenter-chat-platoon .comcenter-chat-group-avatars {
  width: 135px; }

.comcenter-chat-group-expand {
  background: url(../base/shared/row_icon_collapse_expand.png);
  width: 12px;
  height: 12px;
  float: left;
  margin-top: 14px;
  margin-left: 6px;
  cursor: pointer; }
  .comcenter-chat-group-expand:hover {
    background-position: 0px -12px; }
  .comcenter-chat-group-expand.active {
    background-position: 0px 24px; }
    .comcenter-chat-group-expand.active:hover {
      background-position: 0px 12px; }

.comcenter-chat-group-expanded-header {
  background: none repeat scroll 0 0 #fdfdfd;
  height: 257px;
  position: absolute;
  top: 76px;
  z-index: 20;
  width: 230px;
  overflow-y: scroll;
  display: none; }

.comcenter-chat-group-usernames {
  clear: both;
  margin-left: 6px;
  margin-top: 0px; }
  .comcenter-chat-group-usernames a {
    font-size: 11px;
    font-weight: normal; }

.comcenter-chat-username-you {
  float: left;
  width: 154px;
  overflow: hidden;
  white-space: nowrap;
  color: #959595;
  font-weight: bold;
  font-size: 11px; }

.comcenter-chat-username-other {
  float: left;
  width: 154px;
  overflow: hidden;
  white-space: nowrap;
  color: #959595;
  font-weight: bold;
  font-size: 11px; }
  .comcenter-chat-username-other a {
    font-size: 11px; }

.comcenter-chat-timestamp {
  float: right;
  color: #cacaca;
  font-size: 9px; }

.comcenter-chat-message-content {
  clear: both;
  color: #353535;
  font-weight: normal;
  word-wrap: break-word;
  font-size: 12px; }

.comcenter-chat-same-author {
  padding: 6px;
  padding-top: 0px;
  line-height: 16px; }

.comcenter-chat-message-content a {
  font-size: 11px; }

.comcenter-chat-status-message-content {
  font-weight: bold;
  clear: both;
  color: #353535;
  text-align: left;
  line-height: 16px;
  margin-bottom: 1px;
  padding: 6px 0;
  border-top: 1px solid #EBEBEB;
  padding-left: 6px; }

.chat-game-logo {
  float: left;
  margin: 0px 6px; }

.comcenter-chat-serverinfo {
  float: left;
  overflow: hidden;
  color: #308dbf;
  line-height: 30px;
  white-space: nowrap;
  margin-left: 1px; }

.comcenter-server-joinbutton {
  position: absolute;
  right: 6px;
  top: -2px;
  display: block; }

.chat-joinbutton {
  position: absolute;
  right: 6px;
  top: -2px;
  display: block;
  top: 0px; }

.comcenter-chat-bottom {
  height: 36px;
  width: 229px;
  position: relative; }
  .comcenter-chat-bottom.user-is-offline {
    background-position: 0 -38px; }
  .comcenter-chat-bottom.disabled {
    background-position: 0 38px; }

#comcenter-chats .comcenter-chat-chat {
  overflow-y: scroll;
  height: 302px;
  width: 100%;
  color: #959595;
  background: none repeat scroll 0 0 #FFF;
  position: relative; }

#comcenter-chats .comcenter-chat-minisize {
  height: 267px; }

#comcenter-chats .comcenter-chat-group .comcenter-chat-chat {
  height: 195px; }

#comcenter-chats .comcenter-chat-platoon .comcenter-chat-chat {
  height: 257px; }

.comcenter-chat-message {
  border-top: 1px solid #ebebeb;
  padding: 6px;
  line-height: 16px; }

.chat-header {
  text-transform: none;
  width: 230px; }

.comcenter-bottom-row {
  height: 4px;
  width: 100%;
  background: url(../comcenter/bottom-yellow.png); }

.comcenter-playing-logo {
  float: left;
  right: 0px;
  margin-top: 10px;
  margin-right: 4px;
  width: 26px; }

.comcenter-chat-group-list {
  width: 213px; }

/* #draggables is where a ComCenter friend is when you drag it.. style with pleasure! */
#draggables li {
  width: 225px;
  background: #000;
  color: #fff;
  border: 0px;
  overflow: hidden;
  list-style-type: none;
  padding: 5px; }
  #draggables li, #draggables li a {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    /* There's no grabbing icon in IE, and a bug in how IE treats url()
            in cursor prevents us from using a relative url */
    cursor: url(/cdnprefix/local/public/comcenter/cursors/cursor-closedhand.cur), move; }
  #draggables li.active {
    background: #353535; }
  #draggables li .comcenter-interact-container, #draggables li .comcenter-dropdownbutton {
    display: none; }

.comcenter-friend-item {
  clear: both;
  /* width: 200px; */
  padding-right: 10px; }

#comcenter-tabs {
  height: 29px;
  line-height: 29px; }

.comcenter-tab-small, .comcenter-tab {
  float: left;
  width: 134px;
  text-transform: uppercase;
  color: #353535;
  font-size: 11px;
  font-weight: bold;
  background: url(../comcenter/tab-not-active.png);
  cursor: pointer;
  height: 29px;
  text-shadow: 0 1px #e0e0e0; }

.comcenter-tab-small.setting {
  border-left: 1px solid #9d9d9d;
  width: 31px; }

.comcenter-setting-icon {
  background: url(../comcenter/icon-settings.png);
  background-position: 0 -17px;
  width: 16px;
  height: 17px;
  margin-left: 8px;
  margin-top: 7px; }

.comcenter-tab.active .comcenter-setting-icon {
  background: url(../comcenter/icon-settings.png); }
.comcenter-tab.title {
  float: left; }
.comcenter-tab.active {
  background: url(../comcenter/tab-active.png);
  color: #ffc500;
  text-shadow: 0 1px #000000; }

.comcenter-tab .title {
  margin-left: 10px;
  float: left;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px; }

.comcenter-tab-content {
  display: block; }
  .comcenter-tab-content.active {
    display: block; }

.comcenter-tab-line {
  width: 100%;
  height: 5px;
  background: url(../comcenter/comcenter-upper-line.png);
  clear: both;
  background: #000; }

#comcenter-loading {
  position: absolute;
  top: 68px;
  left: 0px;
  width: 270px;
  height: 303px;
  background: #f1f1f1;
  z-index: 12;
  display: none; }

.comcenter-loading-area {
  background: url(../base/shared/loading16x16.gif) no-repeat top center;
  height: 100px;
  width: 100px;
  text-align: center;
  padding-top: 48px;
  font-weight: bold;
  color: #353535;
  margin: 130px auto 0;
  margin-top: 100px; }

#comcenter-friendrequests-separator {
  position: relative; }

.chat-header p {
  margin-left: 15px; }

.comcenter-notification-title {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  padding-left: 12px; }

.comcenter-friend {
  font-weight: bold;
  height: 34px; }
  .comcenter-friend .comcenter-friend-avatar {
    width: 21px;
    height: 21px;
    border: 1px solid #DCDCDC;
    margin: 6px 10px;
    background: #FFF;
    float: left; }
  .comcenter-friend .comcenter-username {
    margin-top: 9px; }
  .comcenter-friend a {
    color: #308DBF;
    text-decoration: none; }
    .comcenter-friend a:hover {
      text-decoration: underline; }
  .comcenter-friend.ui-draggable-dragging.comcenter-friend-playing .comcenter-username {
    margin-top: 0; }
  .comcenter-friend.ui-draggable-dragging .comcenter-username.comcenter-username-idle {
    margin-top: 0; }
  .comcenter-friend.ui-multidraggable {
    background: #444444;
    border-bottom-color: #212121; }
    .comcenter-friend.ui-multidraggable:hover {
      background: #444444;
      border-bottom-color: #212121; }
      .comcenter-friend.ui-multidraggable:hover .comcenter-dropdownbutton {
        display: none; }

li.comcenter-thisisyou:hover {
  background: none;
  cursor: default; }

#comcenter-surface-friends {
  display: block; }

.comcenter-chat-bottom-loader {
  position: absolute;
  right: 11px;
  top: 13px;
  display: none; }

.comcenter-chat-input-disabled {
  width: 214px;
  height: 21px;
  line-height: 19px;
  margin-left: 6px;
  font-size: 12px;
  padding: 0 3px;
  color: #000;
  position: relative;
  top: -4px;
  border: 1px solid #cccccc;
  border-top: 1px solid #abadb3;
  left: -2px; }

.comcenter-chat-input {
  width: 214px;
  height: 21px;
  line-height: 19px;
  margin-left: 6px;
  font-size: 12px;
  padding: 0 3px;
  color: #000;
  position: relative;
  top: -4px;
  border: 1px solid #cccccc;
  border-top: 1px solid #abadb3;
  left: -2px; }
  .comcenter-chat-input::-webkit-input-placeholder, .comcenter-chat-input:-moz-placeholder, .comcenter-chat-input:-ms-input-placeholder {
    color: #8a8a8a; }

.comcenter-chat-content {
  position: absolute;
  bottom: 0px;
  height: 374px;
  width: 230px;
  border: 1px solid #ccc;
  border-bottom: 0;
  background: none repeat scroll 0 0 #fff;
  cursor: default;
  display: none;
  z-index: 5;
  overflow: hidden;
  -webkit-backface-visibility: hidden; }

.comcenter-chat-droppable-content {
  position: absolute;
  top: 106px;
  text-align: center;
  width: 231px; }

.comcenter-chat-droppable-info {
  position: absolute;
  top: 10px;
  text-align: center;
  width: 216px; }

.comcenter-chat-droppable {
  background: url(../comcenter/dropzone-party.png);
  padding: 0;
  display: none;
  width: 213px;
  height: 195px;
  position: absolute;
  top: 142px;
  left: 0;
  z-index: 100;
  text-align: center;
  color: #959595;
  font-weight: normal;
  line-height: 16px; }
  .comcenter-chat-droppable b {
    color: #000; }

.comcenter-chat-content .comcenter-chat-droppable.dragging .comcenter-chat-droppable-content, .comcenter-chat-content .comcenter-chat-droppable.active .comcenter-chat-droppable-content {
  color: #353535; }
.comcenter-chat-content .comcenter-chat-droppable.dragging, .comcenter-chat-content .comcenter-chat-droppable.active {
  background: url(../comcenter/dropzone-active.png);
  width: 230px;
  height: 195px; }

.comcenter-chat-droppable.visible {
  display: block; }

.comcenter-receipt {
  width: 270px;
  height: 40px;
  line-height: 40px;
  background: #daf3c1;
  position: absolute;
  bottom: 1px;
  left: 0px;
  z-index: 100;
  text-align: center;
  color: #353535;
  font-weight: bold;
  border-top: 1px solid #9cc078;
  display: none; }

.comcenter-chat-leavechat {
  float: right;
  margin-right: 6px; }

.comcenter-chat-taskbar .comcenter-close {
  display: none; }
.comcenter-chat-taskbar:hover .comcenter-close {
  display: block;
  background: url(../base/shared/row_icon_chat_light.png);
  background-position: 0px -26px; }
.comcenter-chat-taskbar .comcenter-close:hover {
  display: block;
  background: url(../base/shared/row_icon_chat_light.png);
  background-position: 0px 13px; }

#comcenter-search .hidden {
  display: none; }

.comcenter-search-friends {
  width: 210px;
  height: 32px;
  background: url(../comcenter/search.png); }

#comcenter-search-friends-input {
  width: 174px;
  height: 14px;
  line-height: 14px;
  margin-left: 6px;
  font-size: 11px;
  padding: 3px 3px 3px 21px;
  background: none;
  color: #353535;
  position: relative;
  top: -5px;
  border: none; }

.comcenter-setting {
  float: right;
  background: url(../comcenter/fullwidth-sprite.png);
  height: 40px;
  width: 33px;
  opacity: 0.75;
  filter: alpha(opacity=75);
  border-left: 1px solid #404040;
  cursor: pointer;
  position: relative;
  z-index: 2; }

.comcenter-setting:hover, .comcenter-setting.muted {
  opacity: 1;
  filter: alpha(opacity=100); }

.comcenter-setting.noise {
  background-position: -2px -35px; }

#comcenter-friendbutton.notselectable .noise.muted {
  background-position: -39px -35px;
  background-color: #d11b1b; }

.comcenter-setting.mic {
  background-position: -2px -71px; }

.ui-dragable, .ui-slider {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; }

.comcenter-notification-content .comcenter-separator {
  padding-left: 14px;
  color: #8a8a8a;
  height: 17px;
  line-height: 18px;
  font-size: 11px;
  text-transform: uppercase;
  font-family: Purista, sans-serif;
  font-style: normal;
  font-weight: 600; }

.comcenter-chat-offlineuser {
  position: absolute;
  bottom: 0px;
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 6px;
  margin: 3px;
  width: 193px;
  color: #353535;
  line-height: 16px;
  height: 33px;
  font-weight: normal; }

.comcenter-notification-index-sendlink {
  float: left;
  margin-left: 6px; }

.comcenter-notification-index-viewlink {
  float: right; }

li.comcenter-friend-hidden {
  display: none; }

#comcenter-currentchannel {
  position: relative; }
  #comcenter-currentchannel .common-dropzone {
    width: 266px;
    height: 100%; }
    #comcenter-currentchannel .common-dropzone .common-dropzone-content {
      width: 263px;
      height: 105px; }

.comcenter-chat-platoon-header {
  height: 42px;
  padding: 0 6px;
  line-height: 18px;
  border-bottom: 1px solid #E2E2E2; }

.comcenter-platoonbadge {
  position: relative;
  top: 6px; }

.comcenter-friendrequestarea {
  float: right;
  width: 68px; }

.comcenter-friend-request-button {
  float: left;
  width: 25px;
  height: 26px;
  margin-right: 6px;
  border: 0;
  margin-top: 5px;
  cursor: pointer; }

.comcenter-taskbar-info {
  float: left;
  width: 100%;
  height: 39px;
  background: rgba(0, 0, 0, 0.9); }
  .comcenter-taskbar-info:hover {
    background: rgba(42, 42, 42, 0.9); }

.chat-list-party-privacy, .chat-toggle-party-privacy {
  float: left;
  margin-left: 6px;
  height: 10px;
  width: 11px;
  display: block;
  background: url(../base/shared/icon-lock.png);
  margin-top: 11px;
  position: relative; }

.chat-list-party-privacy:hover {
  cursor: default;
  text-decoration: none; }
.chat-list-party-privacy.open {
  background-position: -11px 0; }

.chat-toggle-party-privacy.open {
  background-position: 0px 0;
  text-decoration: none; }

.chat-list-party-privacy.closed {
  background-position: 11px 0; }

.chat-toggle-party-privacy.closed {
  background-position: 22px 0;
  text-decoration: none; }

#comcenter-create-party-area {
  background: #efefef;
  line-height: 32px;
  border-top: 2px solid #d2d2d2;
  color: #8a8a8a;
  padding-left: 6px;
  height: 32px; }

.comcenter-game-icon {
  float: left;
  margin-top: 1px;
  margin-right: 4px; }

.comcenter-interact-container {
  position: absolute;
  right: 12px;
  top: 0; }

.comcenter-manage-friends {
  display: block;
  text-decoration: none;
  background: url(../comcenter/icon-managefriends.png) no-repeat scroll 0 0 transparent;
  width: 23px;
  height: 33px;
  position: relative;
  top: 0;
  left: 6px;
  border-right: 1px solid #d2d2d2; }

.comcenter-manage-friendsn:hover {
  background-position: 0 -28px; }

#comcenter-area .join-friend-dropdown {
  width: 130px;
  top: 30px;
  left: -107px;
  border: 1px solid #A6A6A6; }

.comcenter-chat-bottom-container {
  border-top: 1px solid #d2d2d2;
  background: #f3f3f3; }

.comcenter-chat-group-avatars-container {
  margin-top: 19px; }

.comcenter-username-serverinfo {
  position: relative;
  clear: both;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.comcenter-chat-platoon-badge {
  float: left;
  height: 20px;
  position: relative;
  top: 4px;
  margin-left: 6px; }

.comcenter-chat-group-partyserverbutton {
  float: right;
  margin-right: 4px;
  position: relative;
  top: -2px;
  height: 35px; }
  .comcenter-chat-group-partyserverbutton button {
    line-height: 16px; }

.comcenter-chat-group-partyservername {
  float: left;
  line-height: 14px;
  margin-left: 6px;
  padding-top: 4px; }

.comcenter-chat-group-partyserver {
  position: relative;
  top: 0px;
  background: #F3F3F3;
  width: 230px;
  z-index: 1;
  border-bottom: 1px solid #d2d2d2;
  height: 38px;
  border-top: 1px solid #D2D2D2;
  padding-top: 2px; }

.comcenter-chat-group-partyservername .common-playing-mode {
  position: relative;
  top: 8px; }

.comcenter-chatpartyjoin {
  width: 130px;
  float: left; }

.comcenter-chatpartyjoin-icon {
  float: left;
  margin-top: 2px;
  margin-right: 4px;
  clear: left;
  line-height: 13px;
  width: 116px;
  overflow: hidden; }

.comcenter-chatpartyjoin-joinbutton {
  float: right;
  margin-right: 2px; }

.comcenter-chat-group-partyservername-players {
  color: #8a8a8a;
  float: left;
  cursor: pointer; }

.comcenter-chat-group-avatars-container {
  position: relative; }

.comcenter-chat-group-nooneplaying {
  text-align: center;
  color: #8a8a8a;
  background: #F3F3F3;
  border-bottom: 1px solid #D2D2D2;
  height: 41px;
  clear: both; }

.comcenter-chat-group-settings {
  float: right;
  display: block;
  height: 12px;
  width: 12px;
  background: url(../comcenter/settings.png);
  margin-right: 6px;
  margin-top: 7px;
  position: relative; }
  .comcenter-chat-group-settings:hover {
    background-position: 0 -12px; }

body .comcenter-chatparty-gameicon {
  margin-top: 1px;
  margin-right: 0px;
  position: relative;
  top: 4px;
  left: -4px; }

.comcenter-chat-partyowner {
  position: absolute;
  top: 0px;
  width: 2px;
  height: 2px;
  background: #000; }

.comcenter-chatparty-playingserver {
  width: 100px;
  overflow: hidden; }

#comcenter-matches-list-empty {
  color: #a8a8a8;
  padding-left: 10px;
  border-bottom: 1px solid #302f33;
  font-weight: normal;
  padding: 10px;
  font-size: 12px; }

/* Full height comcenter styling
 -------------------------------------------------------------------- */
#comcenter-friends .comcenter-friends-border {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: -1px;
  background: #dfdfdf;
  opacity: 0.25;
  filter: alpha(opacity=25); }

#comcenter-tab-friends-content {
  position: absolute;
  top: 35px;
  right: 0;
  bottom: 41px;
  left: 0;
  background: none;
  overflow: auto;
  margin-bottom: 0;
  outline: none; }
  .app-promotion #comcenter-tab-friends-content {
    bottom: 134px; }

.comcenter-taskbar-info {
  display: none; }

.base-button-party {
  background-image: url(../comcenter/fullwidth-button-party.png);
  width: 132px;
  margin-left: 2px; }

li.comcenter-found-no-online-friends {
  background: none; }
li.comcenter-separator {
  height: 19px;
  margin-top: 4px;
  padding-left: 24px;
  margin-left: 2px; }

#comcenter-friendbutton {
  border: 0; }

.comcenter-friend-online .comcenter-username a, .comcenter-friend-playing .comcenter-username a, #comcenter-surface-friendrequests .comcenter-username a {
  color: white; }

.comcenter-friend-draggable, .comcenter-friend-draggable-dummy {
  float: left;
  width: 3px;
  height: 8px;
  margin-left: 1px;
  margin-right: 6px;
  margin-top: 14px; }

.comcenter-friend-draggable {
  background: url(../comcenter/comcenter-draggable.png);
  background-position: 0 48px; }

.base-button-party {
  display: none; }

.comcenter-full-height {
  display: inline; }

.comcenter-small-height {
  display: none; }

#comcenter-friendbutton {
  bottom: 0px;
  right: 0px;
  position: absolute; }

.comcenter-full-height {
  display: none; }

.comcenter-chat-username-link {
  padding-left: 6px;
  font-size: 12px;
  float: left; }

/* NEW STUFF HERE */
#comcenter-friends {
  display: block;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1001;
  width: 237px;
  background: rgba(0, 0, 0, 0.75);
  font-size: 12px;
  /** Begin states **/
  /** End states **/ }
  #comcenter-friends .jspVerticalBar {
    right: 0; }
    #comcenter-friends .jspVerticalBar .jspDrag {
      border-radius: 0; }
  #comcenter-friends .comcenter-setting.mic.muted {
    background-color: #d11b1b;
    background-position: -38px -71px; }
  #comcenter-friends #comcenter-friendrequests-list {
    margin-bottom: 6px; }
    #comcenter-friends #comcenter-friendrequests-list .comcenter-username {
      width: 90px; }
  #comcenter-friends .comcenter-username-idle {
    float: left;
    font-size: 12px;
    white-space: nowrap;
    padding-top: 1px;
    margin-top: 0; }
  #comcenter-friends .comcenter-username-away {
    color: #8a8a8a;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px; }
  #comcenter-friends #comcenter-tab-friends-content .common-playing-link {
    font-weight: normal;
    font-size: 11px;
    color: #8a8a8a;
    line-height: 15px;
    width: 100px; }
  #comcenter-friends #comcenter-tab-friends-content li {
    position: relative;
    padding: 4px 8px; }
    #comcenter-friends #comcenter-tab-friends-content li:hover {
      background: rgba(255, 255, 255, 0.2);
      cursor: pointer; }
      #comcenter-friends #comcenter-tab-friends-content li:hover .comcenter-friend-draggable {
        background-position: 0 0px; }
    #comcenter-friends #comcenter-tab-friends-content li.comcenter-friend-playing .comcenter-username {
      color: #a0a0a0;
      margin-top: 0; }
    #comcenter-friends #comcenter-tab-friends-content li.comcenter-add-friend {
      padding: 8px;
      padding-left: 19px;
      color: #8a8a8a; }
      #comcenter-friends #comcenter-tab-friends-content li.comcenter-add-friend .icon {
        margin-right: 2px; }
    #comcenter-friends #comcenter-tab-friends-content li.comcenter-add-friend-disabled {
      opacity: 0.2;
      cursor: default; }
    #comcenter-friends #comcenter-tab-friends-content li.comcenter-found-no-online-friends {
      color: #8a8a8a;
      text-align: center;
      cursor: default;
      background: #FDFDFD; }
      #comcenter-friends #comcenter-tab-friends-content li.comcenter-found-no-online-friends:hover {
        color: #8a8a8a;
        text-align: center;
        cursor: default;
        background: #FDFDFD; }
    #comcenter-friends #comcenter-tab-friends-content li.comcenter-separator.offline {
      background: rgba(0, 0, 0, 0.4); }
      #comcenter-friends #comcenter-tab-friends-content li.comcenter-separator.offline:hover {
        background: black;
        cursor: pointer; }
    #comcenter-friends #comcenter-tab-friends-content li.comcenter-separator.online {
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 600; }
      #comcenter-friends #comcenter-tab-friends-content li.comcenter-separator.online:hover {
        background: none;
        cursor: default; }
      #comcenter-friends #comcenter-tab-friends-content li.comcenter-separator.online .origin {
        padding-left: 24px; }
        #comcenter-friends #comcenter-tab-friends-content li.comcenter-separator.online .origin:before {
          content: "";
          position: absolute;
          background: url(../base/shared/origin-logo.png);
          top: 2px;
          width: 16px;
          height: 22px;
          display: block; }
    #comcenter-friends #comcenter-tab-friends-content li.comcenter-searched-for {
      padding-left: 16px;
      color: #353535;
      height: 28px;
      line-height: 28px; }
      #comcenter-friends #comcenter-tab-friends-content li.comcenter-searched-for:hover {
        background: #FDFDFD;
        cursor: default; }
    #comcenter-friends #comcenter-tab-friends-content li.comcenter-separator {
      cursor: pointer;
      line-height: 20px;
      font-size: 13px;
      text-transform: uppercase;
      font-family: Frutiger;
      color: #8a8a8a;
      padding-left: 16px;
      white-space: nowrap; }
      #comcenter-friends #comcenter-tab-friends-content li.comcenter-separator .base-left {
        float: none; }
    #comcenter-friends #comcenter-tab-friends-content li .join-friend {
      float: right;
      margin-left: 5px; }
    #comcenter-friends #comcenter-tab-friends-content li .icon-origin, #comcenter-friends #comcenter-tab-friends-content li .icon-mobile {
      float: right;
      margin: 14px 0 0 10px; }
    #comcenter-friends #comcenter-tab-friends-content li .origin-game-title {
      width: 150px; }
  #comcenter-friends .app-promotion {
    overflow: hidden;
    position: absolute; }
    #comcenter-friends .app-promotion .box {
      bottom: 43px; }
    #comcenter-friends .app-promotion .box-content {
      padding-bottom: 0px;
      background-color: rgba(255, 255, 255, 0.08); }
      #comcenter-friends .app-promotion .box-content:before, #comcenter-friends .app-promotion .box-content:after {
        display: table;
        content: "";
        line-height: 0; }
      #comcenter-friends .app-promotion .box-content:after {
        clear: both; }
    #comcenter-friends .app-promotion img {
      float: left; }
    #comcenter-friends .app-promotion .origin {
      float: none; }
    #comcenter-friends .app-promotion .text {
      margin-left: 64px;
      font-size: 12px; }
      #comcenter-friends .app-promotion .text .title {
        color: #fff;
        font-weight: bold;
        display: inline-block;
        margin-top: 8px; }
      #comcenter-friends .app-promotion .text .upsell {
        color: #a8a8a8;
        display: inline-block;
        margin-top: 8px; }
    #comcenter-friends .app-promotion .app-promotion-interaction-area {
      position: absolute;
      right: 4px;
      top: 4px;
      width: 20px; }
      #comcenter-friends .app-promotion .app-promotion-interaction-area .app-promotion-close {
        background: url(../base/shared/row_icon_chat_light.png) 0 -26px;
        width: 13px;
        height: 13px;
        position: relative;
        float: right;
        cursor: pointer; }
      #comcenter-friends .app-promotion .app-promotion-interaction-area .app-promotion-close:hover {
        background-position: 0 -39px; }

#comcenter .comcenter-interact-party, #comcenter div.comcenter-interact-playing, #comcenter .comcenter-interact-party-invite, #comcenter .comcenter-interact-chat-offline, #comcenter .comcenter-interact-chat, #comcenter-friends .comcenter-interact-party, #comcenter-friends div.comcenter-interact-playing, #comcenter-friends .comcenter-interact-party-invite, #comcenter-friends .comcenter-interact-chat-offline, #comcenter-friends .comcenter-interact-chat {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  height: 24px;
  width: 23px;
  float: right;
  border: 0;
  cursor: pointer;
  margin-top: 4px; }
#comcenter .comcenter-interact-container .comcenter-interact-party, #comcenter .comcenter-interact-container div.comcenter-interact-playing, #comcenter .comcenter-interact-container .comcenter-interact-party-invite, #comcenter .comcenter-interact-container .comcenter-interact-chat-offline, #comcenter .comcenter-interact-container .comcenter-interact-chat, #comcenter-friends .comcenter-interact-container .comcenter-interact-party, #comcenter-friends .comcenter-interact-container div.comcenter-interact-playing, #comcenter-friends .comcenter-interact-container .comcenter-interact-party-invite, #comcenter-friends .comcenter-interact-container .comcenter-interact-chat-offline, #comcenter-friends .comcenter-interact-container .comcenter-interact-chat {
  margin-top: 9px; }
#comcenter .comcenter-interact-party, #comcenter-friends .comcenter-interact-party {
  background: transparent url(../comcenter/icons-interact.png) no-repeat;
  background-position: 0 -120px; }
  #comcenter .comcenter-interact-party.inParty, #comcenter-friends .comcenter-interact-party.inParty {
    background-position: -23px -120px; }
    #comcenter .comcenter-interact-party.inParty:hover, #comcenter-friends .comcenter-interact-party.inParty:hover {
      background-position: -46px -120px; }
    #comcenter .comcenter-interact-party.inParty:active, #comcenter-friends .comcenter-interact-party.inParty:active {
      background-position: -69px -120px; }
#comcenter .comcenter-friend-item:hover .comcenter-interact-chat, #comcenter .comcenter-friend-item:hover .comcenter-interact-party-invite, #comcenter-friends .comcenter-friend-item:hover .comcenter-interact-chat, #comcenter-friends .comcenter-friend-item:hover .comcenter-interact-party-invite {
  display: block; }
#comcenter .comcenter-interact-party-invite, #comcenter .comcenter-interact-chat-offline, #comcenter .comcenter-interact-chat, #comcenter-friends .comcenter-interact-party-invite, #comcenter-friends .comcenter-interact-chat-offline, #comcenter-friends .comcenter-interact-chat {
  display: none;
  background: transparent url(../comcenter/icons-interact.png) no-repeat;
  background-position: -23px -96px; }
  #comcenter .comcenter-interact-party-invite:hover, #comcenter .comcenter-interact-chat-offline:hover, #comcenter .comcenter-interact-chat:hover, #comcenter-friends .comcenter-interact-party-invite:hover, #comcenter-friends .comcenter-interact-chat-offline:hover, #comcenter-friends .comcenter-interact-chat:hover {
    background-position: -96px -96px;
    cursor: pointer; }
#comcenter .comcenter-interact-chat-offline, #comcenter-friends .comcenter-interact-chat-offline {
  background-position: 0 -96px; }
#comcenter .icon.chat, #comcenter-friends .icon.chat {
  display: inline-block; }
  #comcenter .icon.chat.group, #comcenter-friends .icon.chat.group {
    background: url(../comcenter/icon-party.png) no-repeat scroll 0 -5px transparent;
    width: 29px;
    height: 22px;
    vertical-align: baseline; }
  #comcenter .icon.chat.close, #comcenter .icon.chat.contract, #comcenter-friends .icon.chat.close, #comcenter-friends .icon.chat.contract {
    height: 13px;
    width: 13px;
    background: url(../base/shared/row_icon_chat.png);
    cursor: pointer; }
    #comcenter .icon.chat.close.inverted, #comcenter .icon.chat.contract.inverted, #comcenter-friends .icon.chat.close.inverted, #comcenter-friends .icon.chat.contract.inverted {
      background-image: url(../base/shared/row_icon_chat_light.png); }
  #comcenter .icon.chat.close, #comcenter-friends .icon.chat.close {
    background-position: 0 26px; }
    #comcenter .icon.chat.close:hover, #comcenter-friends .icon.chat.close:hover {
      background-position: 0 13px; }
    #comcenter .icon.chat.close:after, #comcenter-friends .icon.chat.close:after {
      display: none; }
  #comcenter .icon.chat.contract, #comcenter-friends .icon.chat.contract {
    background-position: 0 0; }
    #comcenter .icon.chat.contract:hover, #comcenter-friends .icon.chat.contract:hover {
      background-position: 0 -13px; }
  #comcenter .icon.chat.unread, #comcenter-friends .icon.chat.unread {
    display: none;
    background: url(../comcenter/unread-cc.gif);
    position: absolute;
    top: -8px;
    color: #fff;
    height: 22px;
    width: 21px;
    z-index: 13;
    margin-left: -11px;
    left: 50%; }
  #comcenter .icon.chat.add-friend, #comcenter-friends .icon.chat.add-friend {
    background: url(../comcenter/fullwidth-addfriend.png) no-repeat;
    width: 26px;
    height: 26px;
    vertical-align: middle; }

#comcenter-area {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%; }

#friendlist-header {
  margin-left: 15px;
  height: auto;
  font-size: 14px;
  line-height: 42px;
  font-family: Frutiger;
  color: #d5dde5;
  text-transform: uppercase; }

.comcenter-username {
  float: left;
  position: relative;
  width: 163px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px; }
  .comcenter-username a {
    display: inline-block;
    white-space: nowrap;
    width: 130px;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 18px; }
  .comcenter-username .comcenter-chat-username-link a {
    width: 150px;
    display: block;
    margin-top: 2px;
    margin-bottom: -2px; }
  .comcenter-username .comcenter-chat-username-link .comcenter-username-away {
    color: #8a8a8a;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    text-shadow: none; }
  .comcenter-username p {
    font-weight: normal;
    clear: both;
    font-size: 11px; }

/* COMCENTER SETTINGS */
.comcenter-settings {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  line-height: 1;
  z-index: 1;
  padding: 0 8px;
  height: 41px;
  line-height: 41px;
  border-top: 1px solid rgba(223, 223, 223, 0.15); }
  .comcenter-settings .icon.group {
    margin-bottom: -5px;
    margin-top: -1px; }
  .comcenter-settings .base-left {
    position: absolute;
    right: 112px; }

/* COMCENTER LIST */
.comcenter-list li:hover {
  background: rgba(255, 255, 255, 0.2); }

/* CHATS */
#comcenter-chats {
  position: absolute;
  margin: 0;
  height: 0;
  right: 8px;
  bottom: 40px; }
  #comcenter-chats .comcenter-chat-gameicon {
    margin-top: 6px; }
  #comcenter-chats .comcenter-divider-left {
    float: right; }
  #comcenter-chats .comcenter-chat-avatar {
    position: relative;
    margin-left: 6px;
    margin-right: 0; }
  #comcenter-chats .comcenter-username a {
    color: #000; }
  #comcenter-chats .comcenter-chat-taskbar-button {
    padding-left: 8px;
    padding-right: 8px;
    height: 40px;
    overflow: hidden; }
    #comcenter-chats .comcenter-chat-taskbar-button .avatar {
      float: left;
      display: inline-block;
      position: relative;
      margin: 8px 4px 0 0;
      line-height: 1; }
    #comcenter-chats .comcenter-chat-taskbar-button .username {
      display: inline-block;
      width: 71px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  #comcenter-chats .chat-header .icon.chat {
    float: right;
    margin: 10px 0;
    margin-right: 5px; }
  #comcenter-chats .comcenter-chat-taskbar-button:hover .icon.close {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 8px; }

.comcenter-chat-taskbar-group {
  float: left; }

.comcenter-chat-group-icon {
  background: url(../comcenter/icon-party.png) no-repeat scroll 0 -5px transparent;
  height: 22px; }

.chat-header .comcenter-chat-group-icon {
  position: relative;
  top: -5px;
  left: 4px; }

/* PARTY CHAT */
.comcenter-chat-taskbar-username {
  display: inline-block;
  white-space: nowrap;
  width: 123px;
  overflow: hidden;
  text-overflow: ellipsis; }
  .comcenter-chat-taskbar-username .icon.group {
    background-position: 0 -79px;
    position: relative;
    top: 5px; }

.comcenter-party-chat.active .icon.group {
  background-position: 0 -41px; }

.comcenter-chat-taskbar {
  position: relative;
  float: right;
  width: 136px;
  height: 40px;
  cursor: pointer;
  color: #ccc;
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 0;
  cursor: pointer;
  color: #fff; }
  .comcenter-chat-taskbar:hover {
    background: rgba(42, 42, 42, 0.9); }
  .comcenter-chat-taskbar.active {
    color: #000;
    background: url(../comcenter/comcenter-active.png);
    border-left: 0;
    border-right: 0;
    width: 232px; }
    .comcenter-chat-taskbar.active .icon-close {
      display: block; }
    .comcenter-chat-taskbar.active .comcenter-chat-taskbar-username {
      color: #000; }
  .comcenter-chat-taskbar.unread .icon.unread, .comcenter-chat-taskbar.active .comcenter-chat-content {
    display: block; }

.comcenter-chat-party-menu-dropdown {
  display: none;
  position: absolute;
  top: 12px;
  height: 26px;
  width: 115px;
  background: rgba(0, 0, 0, 0.9);
  right: 0;
  z-index: 10;
  line-height: 26px;
  font-size: 11px;
  padding-left: 6px;
  text-indent: 6px;
  text-shadow: none; }
  .comcenter-chat-party-menu-dropdown a {
    color: #fff;
    font-size: 11px; }
  .comcenter-chat-party-menu.active .comcenter-chat-party-menu-dropdown {
    display: block; }

#comcenter, #comcenter-friends {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

#comcenter-chats .comcenter-chat-chat {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text; }

.btn-yes, .btn-no {
  width: 25px;
  height: 26px;
  float: left;
  cursor: pointer; }

.btn-yes {
  background: url(../base/bfbc2/buttons/base_button_yesno.png) no-repeat 0 -26px; }
  .btn-yes.active, .btn-yes:active {
    background-position: 0 -52px; }
  .btn-yes:hover[disabled], .btn-yes:active[disabled], .btn-yes[disabled] {
    background-position: 0 -78px;
    cursor: default; }

.btn-no {
  background: url(../base/bfbc2/buttons/base_button_yesno.png) no-repeat -25px 0; }
  .btn-no:hover {
    background-position: -25px -26px; }
  .btn-no.active, .btn-no:active {
    background-position: -25px -52px; }
  .btn-no:hover[disabled], .btn-no:active[disabled], .btn-no[disabled] {
    background-position: -25px -78px;
    cursor: default; }

#friendlist-header {
  position: relative; }
  #friendlist-header .icon-search {
    background: url(../base/shared/search-icon-white.png) 0 0 no-repeat;
    height: 14px;
    width: 14px;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 16px; }
  #friendlist-header form {
    display: none;
    line-height: 1; }
    #friendlist-header form input {
      background: #000;
      outline: none;
      border: 1px solid #505050;
      color: #fff;
      width: 188px;
      padding: 4px 8px;
      margin: 0; }
      #friendlist-header form input::-ms-clear {
        display: none; }
      #friendlist-header form input:focus {
        border-color: #fff; }

#comcenter-friends.show-search #friendlist-header form {
  position: relative;
  display: block; }
  #comcenter-friends.show-search #friendlist-header form .icon-close {
    position: absolute;
    top: 7px;
    right: 22px;
    z-index: 1;
    cursor: pointer; }
#comcenter-friends.show-search #comcenter-tab-friends-content {
  top: 80px; }
#comcenter-friends.show-search #comcenter-search-results p {
  padding: 10px;
  color: #fff; }
#comcenter-friends.show-search #comcenter-search-results i.icon-platform {
  display: inline-block;
  position: relative;
  top: 15px; }

.comcenter-toggle {
  display: none; }
  .comcenter-toggle button {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400;
    position: relative;
    vertical-align: middle;
    background: none;
    border: 0;
    cursor: pointer;
    width: auto;
    color: #d5dde5;
    font-size: 16px;
    margin-top: 6px;
    padding: 7px 0 0;
    margin: 0;
    outline: 0; }
    .comcenter-toggle button:not(:hover) {
      opacity: 0.9; }
    .comcenter-toggle button .icon {
      width: 30px;
      height: 30px;
      background: url(../base/shared/header-icons.png) -180px 0 no-repeat;
      display: inline-block;
      vertical-align: middle;
      top: -3px;
      position: relative; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
        .comcenter-toggle button .icon {
          background-image: url("../base/shared/header-icons@2x.png");
          background-size: 240px 60px; } }

/* Fix for removing white background on checkboxes in chrome when using -webkit-backface-visibility: hidden;
       https://code.google.com/p/chromium/issues/detail?id=119698 */
/*
#base-header,
#base-container,
#comcenter-friends,
#comcenter-chats {
    //@include transform(translateZ(0));
    -webkit-perspective: 1000;
    //-webkit-backface-visibility: hidden;
}*/
#comcenter-challenges-list-loading {
  text-align: center; }
  #comcenter-challenges-list-loading .loader {
    margin-top: 16px; }

#challenges .comcenter-notification-text {
  padding-left: 51px;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; }

#challenges .comcenter-notification-text span.username {
  font-weight: bold;
  color: #fff; }

#challenges .comcenter-notification-text span.mission {
  color: #fff; }

#comcenter-friends #comcenter-tab-friends-content li.comcenter-separator.online {
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }

.comcenter-toggle button {
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }

#comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link, .comcenter-chat-content .btn.btn-small.join-friend-submit-link {
  margin-top: 6px; }
  #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link i, .comcenter-chat-content .btn.btn-small.join-friend-submit-link i {
    margin-top: 8px;
    background: url(../base/shared/icon-join.png) 0 -10px no-repeat;
    background-repeat: no-repeat;
    height: 10px;
    width: 10px; }

#comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link.btn-primary, #comcenter-chats .comcenter-chat-content .btn.btn-small.join-friend-submit-link.btn-primary {
  width: 26px;
  height: 27px;
  margin-top: 7px; }
  #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link.btn-primary .icon-join-friend, #comcenter-chats .comcenter-chat-content .btn.btn-small.join-friend-submit-link.btn-primary .icon-join-friend {
    position: relative;
    top: -1px;
    background-position: 0 0; }

#comcenter-chats .comcenter-chat-content .btn.btn-small.join-friend-submit-link.btn-primary {
  margin-top: 3px; }

#comcenter-chats .pull-left {
  margin: 0; }
#comcenter-chats .comcenter-chat-content {
  background-color: rgba(0, 0, 0, 0.85);
  border: 1px solid #2E2E2E; }
#comcenter-chats .comcenter-chat-message {
  border-top: 1px solid #1D1D1D; }
  #comcenter-chats .comcenter-chat-message:first-child {
    border-top: 0; }
#comcenter-chats .comcenter-chat-group .comcenter-chat-chat {
  height: 191px; }
#comcenter-chats .chat-header-group-chat {
  line-height: 32px; }
#comcenter-chats .chat-header {
  position: relative;
  border-bottom: 1px solid #2E2E2E;
  background: rgba(0, 0, 0, 0.45);
  font-family: Arial;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  height: 34px;
  margin-bottom: 1px;
  line-height: 32px;
  width: 230px;
  z-index: 100; }
  #comcenter-chats .chat-header .comcenter-close-group, #comcenter-chats .chat-header .comcenter-close {
    top: 10px; }
#comcenter-chats .comcenter-chat-chat {
  overflow-y: scroll;
  height: 298px;
  width: 229px;
  margin-top: 1px;
  color: #959595;
  background: none;
  position: relative; }
#comcenter-chats .comcenter-chat-idle {
  background: #000;
  margin-left: -5px;
  margin-right: -5px; }
#comcenter-chats .comcenter-chat-offline {
  background: #000;
  margin-left: -5px;
  margin-right: -5px; }
#comcenter-chats .comcenter-chat-idle, #comcenter-chats .comcenter-chat-offline, #comcenter-chats .comcenter-chat-server {
  border-bottom: 0; }
#comcenter-chats .comcenter-chat-input {
  background: rgba(0, 0, 0, 0.45);
  margin-left: 1px;
  padding-top: 10px;
  height: 25px;
  border: 1px solid rgba(10, 10, 10, 0.6); }
#comcenter-chats .comcenter-username a {
  color: #fff;
  text-shadow: none; }
#comcenter-chats .comcenter-chat-taskbar.active {
  background: none; }
#comcenter-chats .comcenter-chat-timestamp {
  color: #8a8a8a; }
#comcenter-chats .comcenter-chat-bottom-container {
  border-top: 1px solid #2e2e2e;
  background: #000; }
  #comcenter-chats .comcenter-chat-bottom-container .comcenter-chat-bottom {
    height: 38px;
    overflow: hidden; }
#comcenter-chats .comcenter-chat-message-content {
  color: #d3d3d3; }
#comcenter-chats .comcenter-chat-content .comcenter-chat-minisize {
  height: 264px; }
#comcenter-chats #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link, #comcenter-chats .comcenter-chat-content .btn.btn-small.join-friend-submit-link {
  width: 24px;
  height: 24px;
  padding: 0 7px;
  margin-top: 4px; }
  #comcenter-chats #comcenter-tab-friends-content .btn.btn-small.join-friend-submit-link i, #comcenter-chats .comcenter-chat-content .btn.btn-small.join-friend-submit-link i {
    position: relative;
    top: -4px; }
#comcenter-chats #comcenter-tab-friends-content:hover .btn.btn-small.join-friend-submit-link:hover, #comcenter-chats .comcenter-chat-content:hover .btn.btn-small.join-friend-submit-link:hover {
  border: 1px solid #f90; }
#comcenter-chats .comcenter-chat-header, #comcenter-chats .comcenter-chat-group-header {
  background: none;
  border-top: 0;
  border-bottom: 1px solid #2e2e2e;
  line-height: 28px; }
#comcenter-chats .comcenter-chat-group-nooneplaying {
  background: none;
  border-bottom: 1px solid #2e2e2e; }
#comcenter-chats .comcenter-chat-avatar-multi-free-slot {
  background: #202020;
  border-top: 1px solid #202020; }
#comcenter-chats .comcenter-chat-group-settings {
  float: right;
  display: block;
  height: 12px;
  width: 12px;
  opacity: 0.8;
  background: url(../comcenter/settings.png) 0 -24px;
  margin-right: 6px;
  margin-top: 7px;
  position: relative; }
  #comcenter-chats .comcenter-chat-group-settings:hover {
    opacity: 1; }
#comcenter-chats .comcenter-chat-group-partyserver {
  background: #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #2E2E2E; }
#comcenter-chats .comcenter-chat-status-message-content {
  color: #ccc; }
#comcenter-chats .comcenter-chat-status-message-content {
  border-top: 1px solid #2e2e2e; }
#comcenter-chats .base-general-dropdown-area {
  position: relative;
  background: #333;
  top: 0; }
  #comcenter-chats .base-general-dropdown-area ul li {
    height: 34px;
    line-height: 34px;
    border-top: 1px solid #666;
    cursor: pointer; }
    #comcenter-chats .base-general-dropdown-area ul li a {
      margin-left: 5px;
      color: #fff; }

.comcenter-chat-droppable-content {
  color: #a8a8a8; }

#comcenter-chats .comcenter-chat-droppable {
  background: url(../comcenter/dropzone-party-transparent.png) no-repeat; }

#comcenter-chats .comcenter-chat-droppable.dragging, #comcenter-chats .comcenter-chat-droppable.active {
  background: url(../comcenter/dropzone-active.png); }

.comcenter-chat-group-partyserverbutton button {
  margin-top: -4px; }

.error-page.unavailable .box-content {
  height: 300px;
  text-align: center;
  padding: 0; }
  .error-page.unavailable .box-content p {
    line-height: 20px;
    margin-top: 140px; }

/* main component CSS resource */
.main-404-wrapper {
  font-size: 30px;
  padding-top: 20px;
  line-height: 40px;
  color: #000;
  width: 992px;
  position: relative;
  margin: 0 auto; }

.main-404-text {
  float: left;
  padding-top: 25px;
  padding-left: 16px;
  color: #676767; }
  .main-404-text p {
    line-height: 16px;
    font-size: 14px; }
  .main-404-text h1 {
    font-size: 30px;
    font-weight: bold; }
  .main-404-text h3 {
    font-size: 14px;
    font-weight: bold; }
  .main-404-text ul {
    list-style-type: none;
    padding: 0;
    margin: 10px 0; }
  .main-404-text a {
    font-size: 14px; }
  .main-404-text ul a {
    font-weight: normal; }
  .main-404-text li {
    line-height: 28px;
    background: url(../base/shared/li-image.png) 0 18px no-repeat;
    padding-left: 10px; }

.main-is-online {
  color: #6D6D6D;
  font-size: 12px; }

.main-splashinfo-fader-content {
  top: 70px;
  position: relative; }
  .main-splashinfo-fader-content h1 {
    color: #000;
    text-shadow: #FFF 0 1px 0;
    font-size: 55px;
    position: relative; }
  .main-splashinfo-fader-content h2 {
    position: relative;
    font-size: 22px;
    font-weight: normal;
    margin-top: 20px;
    line-height: 125%;
    text-shadow: #FFF 0 1px 0; }

.main-splashbar {
  width: 100%;
  height: 89px;
  position: absolute;
  bottom: 0;
  background: url(../main/bfbc2/splashbar.png) repeat-x;
  z-index: 4; }

#main-middle {
  position: relative;
  width: 1024px;
  background-color: #f4f4f4;
  overflow: hidden;
  padding-bottom: 20px; }

.base-content-full-width #main-middle {
  width: auto;
  background: url(//d34ymitoc1pg7m.cloudfront.net/common/backgrounds/light-bg-26fc61c7.jpg) no-repeat scroll center top #f4f4f4; }

.mainloggedin-middle {
  position: relative;
  width: 100%;
  background: white url(../base/bfbc2/middle-background_column_left.jpg) top center no-repeat; }

#main-content {
  position: relative;
  width: 992px;
  margin: 0 auto;
  padding-top: 16px; }

.main-login-register-area, .main-login-area {
  width: 654px;
  position: relative;
  margin: 0 auto; }

.main-login-register-area {
  padding-bottom: 20px; }
  .main-login-register-area a {
    font-weight: normal; }

.main-login-area a {
  font-weight: normal; }

.main-register-area h1 {
  text-align: center;
  float: none;
  margin-bottom: 16px; }
.main-register-area .registration-buttons {
  width: 195px; }
.main-register-area main-login-register-title {
  padding: 5px 0 16px; }

.main-login .main-login-floating-image {
  right: -110px;
  bottom: 0;
  position: absolute;
  z-index: 2; }

.main-login-area form {
  position: relative;
  width: 310px;
  margin: 10px auto 0 auto;
  text-align: left; }

.main-login-register-title {
  width: 614px;
  position: relative;
  margin: 0 auto;
  padding: 22px 0; }

.main-login-register-description {
  width: 614px;
  position: relative;
  margin: 0 auto;
  padding: 15px 0;
  font-size: 12px; }

.main-login-register-title h1 {
  display: block;
  font-size: 35px;
  text-align: center;
  color: #000;
  font-weight: normal; }
.main-login-register-title p {
  font-weight: normal;
  font-size: 14px;
  color: #353535;
  line-height: 17px;
  margin-top: 5px;
  width: 100%;
  text-align: center; }
  .main-login-register-title p.faded {
    color: #8a8a8a;
    font-size: 12px; }

.main-login-register-subtitle {
  width: 614px;
  position: relative;
  margin: 0 auto;
  padding: 15px 0; }
  .main-login-register-subtitle h2 {
    font-size: 18px;
    font-weight: normal;
    font-family: Arial, sans-serif;
    color: #666;
    text-align: center;
    letter-spacing: 0; }

.main-login-register-closed p {
  padding: 0 20px 20px 20px;
  font-size: 14px;
  font-weight: normal;
  font-family: Arial, sans-serif;
  color: #666;
  text-align: center;
  letter-spacing: 0;
  line-height: 22px; }
.main-login-register-closed a {
  font-size: 14px; }

#main-eyecatcher {
  width: 438px;
  height: 393px;
  float: left; }

.main-login-button {
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  line-height: 42px;
  padding-left: 45px;
  text-align: left;
  border: 0;
  background: url(../base/shared/button_login.png);
  height: 42px;
  width: 195px;
  margin-bottom: 15px;
  float: left;
  font-family: Arial, sans-serif;
  font-size: 16px; }

.main-login-persist {
  margin-top: 9px;
  font-size: 12px;
  color: #666;
  text-align: left;
  float: left; }
  .main-login-persist input[type="checkbox"] {
    margin-left: 0; }

#main-login-pleasewait {
  font-size: 12px;
  color: #666; }

.main-login-links {
  margin-top: 11px; }
  .main-login-links ul {
    list-style: none; }
    .main-login-links ul li {
      margin: 0;
      font-size: 12px; }

#main-login-ajax-loader {
  position: absolute;
  right: 0;
  top: 12px;
  display: none; }

#main-splashinfo h1.main-header {
  clear: both;
  font-size: 60px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  width: 500px;
  letter-spacing: -1.5px; }
#main-splashinfo h2.main-header {
  clear: both;
  font-size: 30px;
  font-weight: normal;
  font-family: Arial, sans-serif;
  width: 500px;
  margin-top: 20px;
  letter-spacing: -1px;
  line-height: 36px; }

#main-findserver {
  position: relative;
  width: 335px;
  height: 62px;
  line-height: 62px;
  margin-top: 40px; }

.single-column {
  width: 318px;
  height: 255px;
  float: left;
  margin-right: 18px; }

.single-column-last {
  margin-right: 0; }

.single-column-height {
  height: 276px; }

.single-column.single-column-first {
  margin-left: 0; }

.single-column-header {
  width: 320px;
  height: 38px; }

.main-twitter-column ul li.main-last-li {
  font-weight: bold;
  font-size: 12px;
  color: #6b6b6b;
  border-bottom: 0; }
  .main-twitter-column ul li.main-last-li div {
    margin-left: 23px; }
  .main-twitter-column ul li.main-last-li a {
    font-weight: bold;
    text-decoration: none; }
.main-twitter-column p.main-no-tweets {
  font-size: 12px;
  margin: 0 23px 13px 23px;
  padding-top: 13px; }

.main-singlecolumn-footer {
  position: absolute;
  width: 290px;
  bottom: 0;
  left: 0;
  height: 41px;
  border-top: 1px solid #EDEDED;
  margin: 0 14px; }

.main-singlecolumn-footertext {
  line-height: 39px;
  text-align: center;
  font-size: 12px;
  color: #6b6b6b; }

.main-blogpublishdate {
  font-size: 11px;
  margin: 0 23px 8px 23px; }
  .main-blogpublishdate a {
    text-decoration: none; }

.main-poll-title {
  padding-top: 13px; }
  .main-poll-title h4 {
    font-weight: normal;
    font-size: 12px;
    line-height: 1.3;
    color: #353535; }

.feed-livefeed-avatar {
  padding-top: 10px;
  padding-bottom: 6px; }

.main-login-text {
  font-size: 14px;
  color: #353535;
  float: left;
  margin-right: 20px;
  text-align: right;
  font-weight: bold; }
  .main-login-text div {
    position: relative;
    line-height: 26px;
    height: 43px;
    margin-top: 10px; }

.main-login-input-wrapper {
  position: relative;
  border: 1px solid #ccc;
  border-top-color: #ababab;
  background: #fff;
  margin-bottom: 5px;
  float: left; }
  .main-login-input-wrapper span {
    position: absolute;
    top: 7px;
    left: 13px;
    font-size: 18px;
    color: #a7a7a7;
    z-index: 0;
    cursor: text; }
  .main-login-input-wrapper input {
    width: 284px;
    height: 32px;
    font-size: 18px;
    padding: 0 12px;
    font-family: Arial, sans-serif;
    color: #353535;
    border: none;
    margin: 0; }

.register-container .main-login-text div #personaId {
  float: left;
  margin-top: 10px; }

.main-poll-novoting {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2; }

.main-poll-voted-spacer {
  height: 20px; }

.main-poll-totalvotes, .main-poll-notloggedin {
  margin: 10px 0;
  font-size: 12px; }

.main-poll-totalvotes {
  padding-bottom: 15px;
  margin-top: 15px;
  font-size: 11px;
  color: #353535; }

#main-poll-form {
  margin: 0 15px; }
  #main-poll-form input[type=submit] {
    margin: 20px 0 0 0;
    border: 0; }
  #main-poll-form .main-poll-answer {
    clear: both;
    margin: 2px 0; }

.main-poll-answertitle {
  overflow: hidden;
  width: 288px;
  margin: 6px 0;
  color: #353535; }
  .main-poll-answertitle div.text-answer {
    float: left;
    font-size: 12px;
    font-weight: bold;
    width: 248px; }
  .main-poll-answertitle div.answer-percentage {
    float: left;
    clear: right;
    width: 40px;
    font-size: 12px;
    text-align: right;
    font-weight: normal; }

#main-poll-form .main-poll-answer label {
  font-size: 12px;
  font-weight: bold; }
#main-poll-form .main-pollanswer-radio {
  margin: 10px 10px 0 0; }

#main-loggedin-top {
  width: 992px;
  height: 324px; }

.main-index-container {
  clear: both;
  width: 100%;
  position: relative;
  overflow: auto;
  top: -15px; }

.main-loggedin-container {
  width: 520px;
  margin: 0 auto;
  padding-top: 30px; }

.main-loggedin-submit {
  position: relative;
  margin-top: 5px;
  float: right; }

#main-loggedin-newsletter {
  background: url(../main/bfbc2/newsletter.png);
  margin-left: 16px;
  margin-top: 16px;
  float: right;
  width: 320px;
  height: 203px;
  position: relative; }
  #main-loggedin-newsletter #main-newsletter-signup {
    position: absolute;
    left: 190px;
    top: 103px; }
  #main-loggedin-newsletter #main-newsletter-view {
    position: absolute;
    left: 190px;
    top: 145px; }
  #main-loggedin-newsletter #main-newsletter-signup a {
    color: #f8f8f8;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    font-family: Arial, sans-serif; }
  #main-loggedin-newsletter #main-newsletter-view a {
    color: #f8f8f8;
    font-weight: bold;
    font-size: 12px;
    line-height: 12px;
    text-decoration: none;
    font-family: Arial, sans-serif; }
    #main-loggedin-newsletter #main-newsletter-view a:hover {
      color: #e69f1f; }
  #main-loggedin-newsletter #main-newsletter-signup a:hover {
    color: #e69f1f; }

#main-loggedin-content {
  width: 992px; }

.main-loggedin-playnow-desc {
  font-size: 11px;
  color: #353535;
  padding: 12px 0 6px 0; }
  .main-loggedin-playnow-desc a {
    font-size: 11px;
    font-weight: normal; }

.main-loggedin-award {
  clear: both;
  height: 58px; }

.main-loggedin-award-img {
  float: left;
  width: 110px;
  text-align: center; }

.main-loggedin-award-info {
  float: left;
  width: 210px; }

.main-loggedin-award-progress {
  padding-bottom: 3px;
  font-size: 12px; }

.main-loggedin-awarditem-progress {
  position: relative;
  top: 1px;
  left: 1px;
  background-color: #272829;
  height: 5px; }

.main-loggedin-award-title {
  padding-top: 5px;
  padding-bottom: 5px; }

.main-loggedin-award-desc {
  font-size: 11px;
  color: #8a8a8a;
  line-height: 1.2; }

.main-splashbar-container {
  position: relative;
  width: 992px;
  margin: 0 auto; }

.main-splashbar-signup {
  position: absolute;
  right: 0;
  top: 19px; }

.main-splashbar-info {
  float: left;
  margin-right: 70px;
  margin-top: 16px; }

.main-splashbar-info-text {
  text-shadow: 0 1px #000;
  color: #cccccc;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px; }

.main-splashbar-info-amount {
  text-shadow: 0 1px #000;
  color: #fefefe;
  font-size: 35px; }

#main-loggedin-leftcolumn {
  width: 320px;
  float: right;
  margin-left: 16px;
  padding-bottom: 230px;
  /* so the soldier logo always is visible */
  margin-top: 0; }
  #main-loggedin-leftcolumn h3 {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
    color: #353535;
    margin-bottom: 6px; }
    #main-loggedin-leftcolumn h3.grey {
      font-size: 11px;
      text-transform: uppercase;
      color: #8a8a8a; }
  #main-loggedin-leftcolumn .advirticement {
    margin: 12px 0; }

.main-loggedin-leftcolumn-active-console-friends {
  padding-top: 10px; }

.main-loggedin-leftcolumn-active-console-friend-avatars {
  height: 36px; }

.main-loggedin-leftcolumn-active-console-friend-avatar {
  width: 36px;
  height: 36px;
  float: left;
  margin-right: 5px; }

.main-loggedin-leftcolumn-active-soldier {
  border-bottom: 1px solid #fcfcfc;
  position: relative;
  margin-bottom: 9px; }

.main-loggedin-leftcolumn-active-soldier-inner {
  border-bottom: 2px solid #e8e8e8;
  min-height: 144px;
  height: auto; }

.main-loggedin-leftcolumn-active-soldier-name {
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  position: absolute;
  top: 30px;
  left: 83px; }

.main-loggedin-leftcolumn-active-soldier-info {
  color: #8a8a8a;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  top: 50px;
  left: 83px; }

.main-loggedin-leftcolumn-active-soldier-info-platform {
  float: left;
  padding-right: 3px;
  padding-top: 4px; }

.main-loggedin-leftcolumn-active-soldier-info a {
  font-size: 12px;
  font-weight: normal; }

.main-loggedin-leftcolumn-active-soldier-rank {
  width: 100%;
  height: 128px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background: url(../main/sidebar_separator_texture.png) bottom left no-repeat; }

.main-loggedin-leftcolumn-active-soldier-link {
  position: absolute;
  bottom: 0;
  left: 0; }

.main-loggedin-leftcolumn-active-soldier-rank-char-image.bf3-char {
  background: url(../profile/kits/m/bf3-us-assault.png) center bottom no-repeat; }

.main-loggedin-leftcolumn-ad {
  margin-top: 14px;
  margin-bottom: 6px; }

.main-loggedin-leftcolumn-ad-inner {
  padding: 8px; }
  .main-loggedin-leftcolumn-ad-inner img {
    display: block; }

#main-loggedin-maincolumn {
  width: 656px;
  float: right;
  margin-top: 0; }

.main-loggedin-awarditem-progress-container {
  overflow: hidden;
  background: #cacaca;
  padding: 1px;
  height: 7px;
  width: 206px; }

.main-loggedin-awarditem-progress-container-inner {
  background: #fff;
  height: 7px;
  width: 100%; }

#main-loggedin-next-awards, #main-loggedin-your-targets {
  clear: both; }

#main-loggedin-feed-container {
  border: 1px solid #d7d8d8;
  border-top: 0;
  background: #fcfcfb; }

#main-loggedin-createsoldier-container {
  border: 1px solid #d7d8d8;
  border-top: 0;
  line-height: 16px;
  background: #fcfcfb;
  font-size: 12px;
  padding: 13px; }

#main-loggedin-feed {
  position: relative;
  margin-top: 1px; }
  #main-loggedin-feed .facebook-cta {
    background: rgba(0, 0, 0, 0.7) url(../facebook/icon-fb-m.png) no-repeat;
    background-position: 16px center;
    padding-left: 56px;
    padding-right: 100px;
    font-size: 14px;
    line-height: 18px;
    color: #a8a8a8;
    position: relative; }
    #main-loggedin-feed .facebook-cta b {
      cursor: pointer;
      color: #fff; }
      #main-loggedin-feed .facebook-cta b:hover {
        text-decoration: underline; }
    #main-loggedin-feed .facebook-cta .close {
      display: block;
      position: absolute;
      right: 16px;
      top: 26px;
      background: url(../unifiedgamemanager/close@2x.png);
      background-size: 100%;
      width: 16px;
      height: 16px;
      cursor: pointer; }

#main-loggedin-wb-avatar {
  position: absolute;
  left: 0;
  top: 15px; }

#main-loggedin-wb-info {
  float: left; }

.main-loggedin-wb-info-icon {
  float: left;
  background: url(../main/singedinicons.png);
  width: 27px;
  height: 25px;
  cursor: pointer;
  position: relative; }
  .main-loggedin-wb-info-icon:hover {
    background-position: -36px 0; }

.main-loggedin-icon-new {
  background: #000;
  color: #f5a905;
  font-size: 11px;
  padding: 0 3px;
  position: absolute;
  right: 2px;
  top: 0;
  height: 14px;
  line-height: 14px;
  display: none;
  text-shadow: none; }

.main-loggedin-wb-info-icon-divider {
  float: left;
  background: url(../main/singedinicons-divider.png);
  width: 1px;
  height: 25px; }

#main-loggedin-activesoldier {
  position: absolute;
  top: 0;
  left: 340px;
  width: 200px;
  height: 90px;
  background: url(../main/bfbc2/activesoldier.png) bottom left no-repeat; }

#main-loggedin-activesoldier-header {
  position: relative;
  font-size: 11px;
  font-family: Tahoma, Arial, sans-serif;
  font-weight: bold;
  color: #8a8a8a;
  top: 30px;
  left: 70px; }

#main-loggedin-activesoldier-link {
  position: absolute;
  width: 61px;
  left: -72px;
  top: -28px;
  height: 87px; }

#main-loggedin-activesoldier-header a {
  line-height: 20px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  font-weight: bold; }

#main-loggedin-activesoldier-game {
  margin-top: 0;
  width: 30px; }

#main-loggedin-wb-info-icon-inbox {
  position: relative;
  top: 47px;
  margin-left: 65px; }

#main-loggedin-wb-info-icon-gameupdates {
  position: relative;
  top: 47px;
  margin-left: 2px; }

#main-loggedin-wb-info-icon-notifications {
  position: relative;
  top: 47px;
  margin-left: 0; }

#main-loggedin-wb-info-icon-inbox.unread {
  background-position: 36px 0; }

#main-loggedin-wb-info-icon-notifications.unread .main-loggedin-icon-new, #main-loggedin-wb-info-icon-inbox.unread .main-loggedin-icon-new {
  display: block; }

#main-loggedin-wb-info-icon-gameupdates {
  background-position: 0 50px;
  position: relative;
  margin-left: 2px; }
  #main-loggedin-wb-info-icon-gameupdates:hover {
    background-position: -36px 50px; }
  #main-loggedin-wb-info-icon-gameupdates.unread {
    background-position: 36px 50px; }

#main-loggedin-wb-info-icon-notifications {
  background-position: 0 25px;
  position: relative;
  margin-left: 65px; }
  #main-loggedin-wb-info-icon-notifications:hover {
    background-position: -36px 25px; }
  #main-loggedin-wb-info-icon-notifications.unread {
    background-position: 36px 25px; }

#main-loggedin-wb-info {
  margin-top: 8px;
  margin-left: 20px; }

#main-loggedin-wb-username {
  position: absolute;
  top: 27px;
  left: 72px;
  font-size: 16px;
  font-family: Arial, sans-serif; }

#main-loggedin-wb-container {
  top: 0;
  height: 92px;
  position: relative;
  width: 992px;
  margin: 0 auto;
  border-bottom: 1px solid #fff; }

#main-loggedin-wb-bottomline {
  position: absolute;
  height: 3px;
  width: 100%;
  left: 0;
  bottom: 0;
  border-bottom: 2px solid #c0c0c0;
  opacity: 0.2;
  filter: alpha(opacity=20); }

#main-loggedin-singlecolumns {
  clear: left;
  margin: 0 16px 60px 16px; }
  #main-loggedin-singlecolumns .single-column {
    margin: 0 0 16px 18px; }
    #main-loggedin-singlecolumns .single-column:first-child {
      margin-left: 0; }

.adbox {
  height: 352px; }
  .adbox .box-content {
    background: url(../main/warsaw/soldier-box.jpg) no-repeat;
    position: relative;
    text-align: center; }
  .adbox .btn {
    margin-top: 300px; }

#main-loggedin-friends {
  width: 100%;
  position: relative; }

.profile-clean-heading, .main-loggedin-clean-heading {
  border-top: 0 solid #e0dfdf;
  padding-top: 8px;
  padding-bottom: 4px;
  background: url(../base/bfbc2/loggedin-clean-heading.png) no-repeat top left; }

#main-loggedin-friends .main-loggedin-clean-heading {
  background: none; }

.main-loggedin-clean-heading {
  font-size: 12px;
  font-weight: bold;
  color: #353535;
  font-family: Tahoma, Arial, sans-serif; }
  .main-loggedin-clean-heading h1 {
    font-family: Tahoma, sans-serif; }

.main-loggedin-heading {
  text-transform: uppercase;
  height: 38px;
  width: 100%;
  position: relative;
  background: url(../base/bfbc2/header_x1.png); }
  .main-loggedin-heading h1 {
    color: #FFF;
    font-size: 17px;
    margin-left: 16px;
    text-shadow: 0 1px #000;
    line-height: 38px;
    text-transform: uppercase; }

#main-loggedin-content #feed-container {
  width: 620px; }
#main-loggedin-content .feed-container-empty {
  text-align: center;
  padding: 10px; }
  #main-loggedin-content .feed-container-empty span {
    font-size: 14px;
    padding-bottom: 10px;
    display: block;
    color: #353535; }
  #main-loggedin-content .feed-container-empty a {
    font-size: 14px;
    font-weight: bold; }

#main-trailer-splash-content {
  position: relative;
  margin: auto;
  z-index: 210;
  width: 660px;
  height: 405px;
  display: none; }

#main-trailer-splash-darkbox {
  position: absolute;
  background-color: #151515;
  opacity: 0.95;
  filter: alpha(opacity=95);
  left: 0;
  top: -30px;
  width: 100%;
  height: 1000px;
  z-index: 200;
  display: none; }

#main-trailer-thumbnail {
  position: relative;
  margin: 0 auto;
  top: 315px;
  width: 992px;
  z-index: 190;
  cursor: pointer; }

#main-trailer-thumbnail-img {
  margin: 0 0 5px 0; }

#main-trailer-caption {
  margin: auto;
  margin-left: 5px;
  position: absolute;
  bottom: -20px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #353535;
  text-shadow: #FFF 0 1px 0; }
  #main-trailer-caption:hover {
    color: #308DBF;
    text-decoration: underline; }

#main-live-userbar {
  position: relative;
  bottom: 0;
  width: 100%;
  margin-top: 20px; }

#loginFeed {
  width: 992px;
  margin: 72px auto auto;
  margin-top: 110px;
  position: relative;
  z-index: 2; }

.main-latest-logged-in-players {
  font-size: 14px;
  font-weight: bold;
  color: #a8a8a8; }

.main-splash-separator {
  margin: 15px 0 10px 0; }

.main-all-presence {
  margin: 0 auto;
  width: 618px;
  margin-bottom: 110px; }

.main-social {
  float: left;
  margin: 0 75px 20px 0;
  text-align: center;
  background: url(../main/all/footer-sociallogos-big.png);
  overflow: hidden; }

.main-social-last {
  margin-right: 0; }

#main-social-facebook {
  width: 158px;
  height: 59px; }
  #main-social-facebook:hover {
    background-position: 0 -59px; }

#main-social-twitter {
  margin-top: 12px;
  width: 167px;
  height: 39px;
  background-position: 0 -118px; }
  #main-social-twitter:hover {
    background-position: 0 -157px; }

#main-social-youtube {
  width: 127px;
  height: 53px;
  background-position: 0 -196px; }
  #main-social-youtube:hover {
    background-position: 0 -249px; }

.main-social-a {
  position: relative;
  top: 50px;
  left: 0;
  padding-top: 80px; }

#main-social-a-twitter {
  top: 38px;
  padding-top: 68px; }

#main-moh {
  position: relative;
  top: -20px; }

#loginfeed-avatars {
  height: 32px;
  margin-top: 5px;
  overflow: hidden;
  margin-top: 5px;
  width: 989px;
  padding: 5px;
  background-color: #f3f3f3; }

#loginfeed-avatars-container {
  position: relative;
  left: 0;
  width: 1200px;
  white-space: nowrap; }

#loginfeed-avatars .base-avatar-container {
  float: left;
  margin: 0 7px 0 0; }

.main-trailer-vietnam {
  display: none; }

#main-loggedin-top {
  width: 100%;
  height: 151px;
  background: url(//d34ymitoc1pg7m.cloudfront.net/bf3/backgrounds/loggedin-top-6f944a4b.png) repeat-x;
  position: relative; }

.main-campaign {
  width: 320px;
  height: 100%;
  position: relative;
  float: left; }

.main-campaign-label {
  width: 113px;
  height: 29px;
  background: url(../main/bf3/shade.png);
  position: absolute;
  top: 5px;
  line-height: 29px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-shadow: #000 0 1px 0;
  color: #FFF;
  text-transform: uppercase; }

.main-multiplayer-info, .main-campaign-info {
  color: #fff;
  font-size: 11px;
  margin: 10px;
  position: relative;
  float: left;
  line-height: 2.4; }

.main-campaign-launch {
  float: right;
  position: relative;
  margin-top: 10px;
  margin-right: 10px; }

.main-coop {
  float: left;
  position: relative;
  width: 352px;
  height: 100%; }

.main-multiplayer {
  float: left;
  position: relative;
  width: 320px;
  height: 100%; }

.main-multiplayer-label {
  width: 145px;
  height: 29px;
  background: url(../main/bf3/shade.png);
  position: absolute;
  top: 5px;
  line-height: 29px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-shadow: #000 0 1px 0;
  color: #fff;
  text-transform: uppercase; }
  .main-multiplayer-label span {
    float: left; }
  .main-multiplayer-label img {
    float: left;
    margin: 9px 10px 0 10px; }

.main-multiplayer-info {
  position: relative;
  top: 98px; }

.main-multiplayer-launch {
  position: absolute;
  bottom: 12px;
  right: 10px; }

.main-targetsunlocks {
  width: 654px;
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #fff;
  margin-bottom: 16px; }

.main-targetsunlocks-inner {
  border: 1px solid #dbdbdb;
  background-color: #e7e7e7;
  position: relative;
  padding-bottom: 13px; }

.main-targetsunlocks-container-left, .main-targetsunlocks-container-right {
  width: 309px;
  position: relative;
  float: left; }

.main-targetsunlocks-container-left {
  left: 15px; }

.main-targetsunlocks-container-right {
  margin-right: 14px;
  float: right; }

.main-targetsunlocks-box-wrapper {
  margin-top: 9px; }

.main-targetsunlocks-box {
  width: 100px;
  height: 65px;
  margin: 0 10px 10px 0;
  position: relative;
  background-color: #dfdfdf;
  float: left; }
  .main-targetsunlocks-box.last {
    margin-right: 0; }

.main-targetstaken-closeform {
  display: none; }

.main-targetsunlocks-box:hover .main-targetstaken-closeform {
  display: block; }

.main-targetsunlocks-box-title {
  color: #8a8a8a;
  font-size: 10px; }

.main-targetsunlocks-box.taken {
  background: #b0d379; }

.main-targetsunlocks-target, .main-targetsunlocks-upcoming {
  height: 35px;
  line-height: 35px;
  color: #353535;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  position: relative; }

.main-targetsunlocks-target {
  background: url(../main/all/target.png) left no-repeat;
  text-indent: 20px;
  left: 15px;
  float: left;
  width: 309px; }

.main-targetsunlocks-upcoming {
  width: 309px;
  float: right;
  margin-right: 14px; }

.main-targetsunlocks-change {
  position: relative;
  font-weight: normal;
  line-height: 17px;
  font-size: 11px;
  padding-left: 4px; }

.main-targetsunlocks-viewall {
  position: absolute;
  bottom: 10px;
  width: 304px;
  left: 15px;
  font-weight: normal;
  text-align: center; }
  .main-targetsunlocks-viewall a {
    font-weight: normal; }

.main-targetsunlocks-progress-container {
  position: absolute;
  left: 10px;
  bottom: 6px;
  overflow: hidden;
  background: #cacaca;
  padding: 1px;
  height: 7px;
  width: 80px; }

.main-targetsunlocks-progress-container-inner {
  background: #fff;
  height: 7px;
  width: 100%; }

.main-targetsunlocks-progress {
  position: relative;
  top: 1px;
  left: 1px;
  background-color: #272829;
  height: 5px; }

.main-targetsunlocks-awardtitle {
  position: absolute;
  bottom: 7px;
  font-size: 11px;
  color: #353535;
  width: 130px;
  left: 10px;
  text-align: center;
  height: 16px;
  overflow: hidden; }

.main-targetsunlocks-statsimage {
  position: absolute; }

.main-loggedin-upcomingunlocks {
  width: 100%;
  position: relative; }

.main-loggedin-rankbar {
  width: 100%;
  position: relative;
  position: absolute;
  left: 70px;
  top: 70px;
  margin-top: 0; }

.main-loggedin-upcomingunlocks {
  min-height: 65px;
  clear: both;
  position: relative;
  left: -10px; }

.main-loggedin-rankbar a:hover {
  text-decoration: none; }

.main-loggedin-rankbar-prev {
  float: left;
  margin: 12px 0 0 0; }

.main-loggedin-rankbar-next {
  float: left;
  margin: 12px 0 0 0;
  opacity: 0.2;
  filter: alpha(opacity=20); }

.main-loggedin-rankbar-bar {
  float: left;
  font-size: 12px;
  width: 131px;
  margin-top: 15px; }

.main-loggedin-rankbar-rankName {
  line-height: 20px;
  color: #353535;
  font-size: 12px; }

.main-loggedin-rankbar-points {
  text-align: left;
  font-size: 11px;
  line-height: 18px;
  color: #8a8a8a;
  padding-top: 1px; }
  .main-loggedin-rankbar-points strong {
    font-weight: normal;
    color: #353535; }

.main-loggedin-rankbar-barmeter {
  width: 129px;
  height: 7px;
  padding: 1px;
  border: 1px solid #bebebe;
  background-color: #fff; }
  .main-loggedin-rankbar-barmeter div {
    height: 7px;
    background-color: #353535;
    max-width: 100%; }

.main-loggedin-campaign-map {
  float: left;
  width: 66px;
  height: 46px;
  border: 1px solid #e0e0df; }
  .main-loggedin-campaign-map img {
    width: 62px;
    height: 42px;
    margin: 2px; }

.main-loggedin-campaign-info {
  float: left;
  width: 154px;
  margin-left: 6px;
  overflow: hidden;
  line-height: 16px; }

.main-loggedin-campaign-chapter {
  color: #353535;
  font-size: 11px;
  font-weight: bold; }

.main-loggedin-campaign-title {
  font-size: 11px; }

.main-loggedin-campaign-ago {
  font-size: 11px;
  color: #8a8a8a; }

#main-loggedin-campaign, #main-loggedin-coop, #main-loggedin-multiplayer {
  margin-top: 14px; }

#main-loggedin-campaign {
  height: 89px; }

#main-loggedin-coop {
  height: 70px; }

.main-loggedin-sectiontitle {
  font-size: 15px;
  color: #353535;
  font-weight: bold;
  margin-bottom: 6px;
  text-indent: 5px;
  text-shadow: 0 1px #ffffff; }

.main-loggedin-coop-logo {
  background: url(../campaign/mock-cooplevels.png);
  width: 35px;
  height: 24px;
  float: left;
  margin-right: 10px;
  margin-top: 5px; }

.main-loggedin-coop-info-text {
  color: #353535;
  font-size: 12px; }

.main-loggedin-coop-info-friends {
  color: #8a8a8a;
  font-size: 11px; }

.main-loggedin-section-button {
  float: right; }

.main-loggedin-coop-info {
  width: 188px;
  float: left;
  line-height: 16px; }

.main-loggedin-multiplayer-info {
  margin-top: 6px;
  width: 240px;
  float: left; }

.main-loggedin-multiplayer-title {
  color: #8a8a8a;
  font-family: Tahoma, Arial, sans-serif;
  font-weight: bold;
  font-size: 11px; }

.main-loggedin-multiplayer-filters {
  margin-top: 6px;
  line-height: 16px;
  font-size: 11px;
  color: #8a8a8a; }
  .main-loggedin-multiplayer-filters span {
    font-weight: bold; }
  .main-loggedin-multiplayer-filters a {
    font-size: 11px;
    font-weight: normal; }

.main-loggedin-server-description {
  font-size: 11px;
  font-weight: bold;
  color: #8a8a8a;
  font-weight: bold;
  font-family: tahoma, geneva, arial, sans-serif;
  margin-bottom: 12px; }

.main-loggedin-server-infoarea {
  font-size: 11px;
  color: #8a8a8a;
  margin-left: 6px;
  line-height: 16px;
  float: left;
  margin-top: 3px; }

.main-loggedin-server {
  clear: left;
  margin-bottom: 10px; }

.main-loggedin-server-title a {
  font-size: 11px; }

.main-loggedin-server-map {
  width: 66px;
  height: 46px;
  float: left;
  border: 1px solid #e0e0df; }
  .main-loggedin-server-map img {
    width: 62px;
    height: 42px;
    margin: 2px; }

.main-targetstaken-close {
  cursor: pointer;
  position: relative;
  float: right;
  margin-right: 4px;
  background: url(../base/shared/row_icon_chat.png) 0 26px;
  height: 13px;
  width: 13px;
  margin-top: 4px;
  border: 0;
  z-index: 2; }
  .main-targetstaken-close:hover {
    background-position: 0 13px; }

.main-targetunlocks-foundnotargets {
  font-size: 12px;
  text-align: center;
  color: #353535;
  height: 70px;
  line-height: 70px; }

.main-targetunlocks-pointsneeded {
  font-size: 11px;
  position: absolute;
  top: 88px;
  left: 28px;
  color: #8a8a8a;
  text-align: center;
  width: 102px; }

#main-landing {
  height: 709px;
  background: white url(//d34ymitoc1pg7m.cloudfront.net/bf3/backgrounds/landing_bg-41a2381f.jpg) no-repeat 50% 100%;
  text-align: center;
  position: relative; }

.main-landing-bg-flick {
  width: 100%;
  height: 100%;
  background: transparent no-repeat 50% 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: none; }

.main-landing-inner {
  width: 992px;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  position: relative; }

#main-middle.main-landing-middle {
  padding-top: 62px;
  position: static; }

.main-landing-headinfo {
  height: 47px;
  padding-top: 25px; }
  .main-landing-headinfo table tr td {
    vertical-align: top; }

.main-landing-headinfo-line {
  width: 100%;
  height: 1px;
  background-color: #95a19b;
  margin-top: 24px; }

.main-landing-headinfo-title {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 14px 13px 0 12px;
  color: #c9c9cb;
  white-space: nowrap; }

#main-landing-headinfo-count {
  font-family: Arial, sans-serif;
  font-size: 47px;
  white-space: nowrap; }

.main-landing-header {
  height: 301px;
  padding-top: 70px;
  position: relative; }

.main-landing-header-action-link {
  /*padding-left: 34px;*/
  font-size: 32px;
  background: transparent no-repeat 0 50%;
  height: 34px;
  font-family: Arial, sans-serif;
  position: absolute;
  font-weight: normal; }

#base-all-body .main-landing-header {
  padding-top: 0; }

.main-landing-splashinfo {
  width: 662px;
  margin-left: 10px;
  padding-top: 14px;
  float: left; }
  .main-landing-splashinfo h1 {
    margin: 0;
    padding: 0;
    font-size: 90px;
    line-height: 75px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    text-shadow: 0 1px 2px #222222;
    letter-spacing: 0;
    font-weight: normal; }
  .main-landing-splashinfo h2 {
    margin: 20px 0 0;
    padding: 0 0 0 4px;
    font-size: 32px;
    line-height: 32px;
    color: #252525;
    font-family: Arial, sans-serif;
    letter-spacing: 0;
    font-weight: normal; }

.main-landing-logo {
  width: 320px;
  height: 270px;
  float: left;
  background: transparent url(../main/all/logo.png) no-repeat 50% 20px; }

.main-landing-joincontent {
  height: 410px;
  position: absolute;
  bottom: -62px;
  z-index: 4; }

.main-landing-joincontent-login {
  width: 320px;
  height: 410px;
  background: #222222 url(../main/all/login_bg.png) no-repeat;
  float: left;
  text-align: center; }

.main-landing-joincontent-login-padder {
  padding: 19px 30px; }

.main-landing-joincontent-login h1 {
  font-family: Arial, sans-serif;
  color: #ffffff;
  font-size: 35px;
  line-height: 35px;
  margin: 0 0 18px;
  padding: 0;
  font-weight: normal; }
.main-landing-joincontent-login h4 {
  font-size: 14px;
  line-height: 22px;
  color: #d2d2d2;
  margin: 0 0 13px;
  padding: 0; }

.main-landing-joincontent-login-seperator {
  width: 260px;
  height: 14px;
  background: transparent url(../main/all/login-or-signup-seperator.png) no-repeat;
  margin: 32px 0 28px; }

.main-landing-joincontent-login-seperator-small {
  width: 260px;
  height: 1px;
  background-color: #2d2d2d;
  margin: 15px 0 11px; }

.main-landing-joincontent-login-form-input {
  position: relative;
  margin-bottom: 5px;
  background-color: #4f4f4f;
  height: 30px; }
  .main-landing-joincontent-login-form-input label {
    position: absolute;
    top: 9px;
    left: 10px;
    font-size: 12px;
    color: #a7a7a7;
    z-index: 0;
    cursor: text;
    /* for IE */ }
  .main-landing-joincontent-login-form-input.filled label {
    display: none; }
  .main-landing-joincontent-login-form-input input {
    width: 240px;
    height: 15px;
    margin: 0;
    padding: 9px 10px 6px !important;
    background-color: transparent;
    float: left;
    font-size: 12px;
    line-height: 12px;
    border: none;
    color: #b5b4b4;
    position: relative;
    z-index: 1; }
    .main-landing-joincontent-login-form-input input:focus {
      outline: none; }
    .main-landing-joincontent-login-form-input input:-webkit-autofill {
      color: #434343; }

.main-landing-login-form-actions {
  margin-top: 10px; }

.main-landing-login-form-action-remember {
  color: #a7a7a7;
  font-size: 11px;
  float: left;
  text-align: left;
  margin-top: 4px; }
  .main-landing-login-form-action-remember input {
    margin-left: 0; }
  .main-landing-login-form-action-remember label {
    top: -2px; }

.main-landing-login-action-lostpassword {
  font-weight: normal;
  color: #55728c;
  font-size: 11px; }

.main-landing-joincontent-pitchboxes {
  width: 672px;
  float: left; }

.main-landing-joincontent-pitchboxes-pitch {
  height: 197px;
  width: 320px;
  position: relative;
  float: left;
  margin-left: 16px;
  text-align: center; }

.main-landing-joincontent-pitchboxes-pitch-link {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0; }

.main-landing-joincontent-pitchbox-bg {
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 215px;
  top: -18px;
  left: 0;
  background: transparent no-repeat; }

.main-landing-joincontent-pitchboxes-pitch h1 {
  font-size: 30px;
  font-family: Arial, sans-serif;
  line-height: 32px;
  color: #000;
  font-weight: normal;
  margin-top: 131px; }

.main-landing-joincontent-pitchboxes-pitch-info {
  color: #9e9e9e;
  font-size: 12px;
  padding-top: 5px; }

.main-landing-joincontent-pitchboxes-pitch-size2 .main-landing-joincontent-pitchboxes-pitch-info {
  padding-top: 7px; }

.main-landing-liveeventsbox .common-box-title {
  text-align: center; }
.main-landing-liveeventsbox .common-box-inner {
  padding-bottom: 13px; }
.main-landing-liveeventsbox .common-box-inner-border {
  height: 322px; }

.main-landing-stats-separator {
  height: 2px;
  background-color: #e7e7e7;
  border-bottom: 1px solid #fff;
  margin-bottom: 15px; }

.main-landing-stats {
  margin-bottom: 24px; }
  .main-landing-stats table {
    width: 100%;
    height: 78px; }
  .main-landing-stats h1 {
    font-size: 11px;
    font-family: Tahoma, Arial, sans-serif;
    color: #ababab;
    padding: 0;
    margin: 14px 0 8px 11px; }

.main-landing-stats-stat {
  font-size: 35px;
  font-family: Arial, sans-serif;
  color: #878787;
  margin: 0 0 0 11px;
  padding: 0; }

.main-landing-stats-icon-kills {
  width: 71px;
  background: transparent url(../main/stats-kills.png) no-repeat 0 6px; }

.main-landing-stats-icon-users {
  width: 68px;
  background: transparent url(../main/stats-users.png) no-repeat -6px 5px; }

.main-landing-stats-icon-time {
  width: 65px;
  background: transparent url(../main/stats-time.png) no-repeat -7px 8px; }

.main-landing-stats-icon-dogtags {
  width: 49px;
  background: transparent url(../main/stats-dogtags.png) no-repeat -23px 0; }

.main-landing-loggedin-goto-game {
  margin-top: 8px; }

.main-landing-loggedin-goto-game-title {
  text-align: left; }

#main-loggedin-closedbeta p {
  font-size: 12px;
  color: #8a8a8a;
  line-height: 1.4; }
#main-loggedin-closedbeta a {
  font-size: 12px;
  line-height: 1.4; }

.main-targetsunlocks-statsimage-padder {
  width: 25px;
  float: left;
  height: 30px; }

#main-loggedin-friendsuggest {
  margin-top: 16px; }
  #main-loggedin-friendsuggest p {
    font-size: 12px;
    color: #353535;
    margin-bottom: 16px; }
  #main-loggedin-friendsuggest li {
    margin-bottom: 10px; }
  #main-loggedin-friendsuggest .base-friends-username, #main-loggedin-friendsuggest .base-friends-avatar {
    width: auto;
    float: left;
    margin-right: 10px; }
  #main-loggedin-friendsuggest .profile-add-friend {
    float: right;
    margin-top: 5px; }

/* main.about */
.main-about-intro {
  height: 178px;
  text-align: center; }
  .main-about-intro h1 {
    font-size: 65px;
    line-height: 68px;
    color: #000;
    font-family: Arial, sans-serif;
    font-weight: normal;
    padding-top: 31px;
    text-transform: uppercase; }
  .main-about-intro p {
    font-size: 30px;
    line-height: 33px;
    color: #353535;
    font-family: Arial, sans-serif;
    font-weight: normal;
    padding-top: 13px; }

.main-about-feature {
  border-bottom: 1px solid #dfdfdf; }
  .main-about-feature .main-about-feature-info {
    width: 488px;
    float: left;
    position: relative; }
  .main-about-feature.text-right .main-about-feature-info {
    float: right; }
  .main-about-feature h2 {
    font-size: 35px;
    line-height: 38px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    color: #000;
    margin: 43px 0 0;
    text-transform: uppercase; }
  .main-about-feature img {
    float: right; }
  .main-about-feature.text-right img {
    float: left; }

.main-about-feature-info-intro {
  font-size: 20px;
  font-weight: normal;
  font-family: Arial, sans-serif;
  line-height: 23px;
  color: #353535;
  margin: 7px 0 0; }

.main-about-feature .main-about-feature-info-description {
  color: #777777;
  font-size: 16px;
  line-height: 23px;
  margin: 10px 0 0; }

.main-about-foot {
  text-align: center;
  padding: 40px 0; }

.main-about-foot-back-home {
  font-size: 50px;
  line-height: 53px;
  text-decoration: none;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  font-weight: normal; }

/* Forgot Password
 * ---------------------------------------------------------------- */
.note {
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  margin: 20px auto;
  width: 440px; }

.main-login-register-area {
  min-height: 500px;
  text-align: center; }

.main-forgotpassword-label {
  font-family: Arial, sans-serif;
  font-size: 12px;
  float: left;
  text-align: right;
  width: 110px;
  margin: 18px 10px 0 0; }

.main-forgotpassword-input {
  color: #353535;
  font-family: Arial, sans-serif;
  font-size: 18px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  width: 290px; }

.main-forgotpassword-submit {
  margin: 10px 0 0 120px; }

.main-loggedin-header {
  border-bottom: 1px solid #fcfcfc; }

.main-loggedin-header-inner {
  padding: 16px 16px 0;
  height: 226px;
  border-bottom: 1px solid #dfdfdf;
  background: rgba(0, 0, 0, 0.03); }

.main-loggedin-header-puffs {
  width: 1024px;
  margin-bottom: 10px;
  position: relative; }

.main-loggedin-header-puff {
  width: 336px;
  height: 115px;
  float: left;
  margin-right: 8px;
  position: relative;
  display: block;
  margin-bottom: 8px; }
  .main-loggedin-header-puff.last {
    margin-right: 0; }
  .main-loggedin-header-puff:hover .main-loggedin-header-puff-content {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1); }
  .main-loggedin-header-puff.disabled:hover .main-loggedin-header-puff-content {
    cursor: auto;
    background: none; }
  .main-loggedin-header-puff a {
    font-weight: normal;
    color: #3aade3; }

#main-loggedin-header-puff-multiplayer-groupjoin:hover {
  color: #ffc500; }

.main-loggedin-header-puff-overlay {
  position: absolute; }

.puff-disabled:hover {
  cursor: default; }

#main-loggedin-header-puff-campaign .main-loggedin-header-puff-background {
  background: url(../main/bf3/boxes/bg-campaign-bf3.jpg) no-repeat; }

#main-loggedin-header-puff-topstory {
  height: 238px; }
  #main-loggedin-header-puff-topstory a.main-topstory-link {
    display: block; }
  #main-loggedin-header-puff-topstory .main-loggedin-header-puff-background {
    background-image: url(../main/bf3/boxes/bg-story-bf3.jpg);
    background-size: auto 100%;
    height: 100%; }
  #main-loggedin-header-puff-topstory .main-loggedin-header-puff-content {
    height: 100%; }

#main-loggedin-header-puff-assignments .main-loggedin-header-puff-background {
  background-image: url(../main/bf3/boxes/bg-ass-bf3.jpg); }

#main-loggedin-header-puff-unlocks .main-loggedin-header-puff-background {
  background-image: url(../main/bf3/boxes/bg-unlocks-bf3.jpg); }

#main-loggedin-header-puff-loadout .main-loggedin-header-puff-background {
  background-image: url(../main/bf3/boxes/bg-loadout-bf3.jpg); }

#main-loggedin-header-puff-leaderboard .main-loggedin-header-puff-background {
  background-image: url(../main/bf3/boxes/bg-leaderboards-bf3.jpg); }

#main-loggedin-header-puff-premium .main-loggedin-header-puff-background {
  background-image: url(../main/bf3/boxes/bg-premium-bf3.jpg); }
#main-loggedin-header-puff-premium article {
  position: absolute;
  display: none;
  color: #fff;
  top: 50px;
  left: 16px;
  right: 16px;
  bottom: 16px; }
#main-loggedin-header-puff-premium i.icon {
  display: block;
  position: absolute;
  top: auto;
  left: auto;
  bottom: 0;
  right: 90px;
  z-index: 2; }
#main-loggedin-header-puff-premium .event {
  position: absolute;
  right: 57px;
  bottom: 0;
  z-index: 1; }
#main-loggedin-header-puff-premium h1 {
  width: 185px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }
#main-loggedin-header-puff-premium time {
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 15px;
  color: #8a8a8a; }
#main-loggedin-header-puff-premium .bullets {
  position: absolute;
  left: 14px;
  bottom: 5px; }
#main-loggedin-header-puff-premium span {
  font-family: Arial, sans-serif;
  font-size: 32px;
  line-height: 0;
  letter-spacing: 1px;
  color: #4f545a;
  -webkit-transition: color 0.2s; }
  #main-loggedin-header-puff-premium span.active {
    color: #cfcfcf; }

.main-loggedin-header-puff-background {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: 50% 20% !important;
  background-size: 100% auto; }

.main-loggedin-header-puff-background-dark {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: 50% 20% !important;
  background-size: 100% auto;
  background: #000;
  opacity: 0.3; }

.main-loggedin-header-puff-overlay {
  height: 100%;
  width: 100%;
  background: url(../main/topstory-overlay-home.png) left bottom repeat-x;
  box-shadow: inset 0 0 40px 0 rgba(255, 255, 255, 0.15); }

#main-loggedin-header-puff-campaign .main-loggedin-header-puff-overlay {
  width: 191px;
  height: 210px;
  background: url(//d34ymitoc1pg7m.cloudfront.net/bf3/main/1-overlay-33f290da.png) no-repeat;
  right: 0;
  top: 0; }

#main-loggedin-header-puff-coop .main-loggedin-header-puff-background {
  background: url(../main/bf3/boxes/bg-coop-bf3.jpg) no-repeat; }

#main-loggedin-header-puff-fireteams .main-loggedin-header-puff-background {
  background: url(../main/mohw/boxes/bg-fireteams-mohw.jpg) no-repeat; }

#main-loggedin-header-puff-coop .main-loggedin-header-puff-overlay {
  width: 193px;
  height: 228px;
  background: url(//d34ymitoc1pg7m.cloudfront.net/bf3/main/2-overlay-b4788212.png) no-repeat;
  left: 197px;
  top: 0; }
  #main-loggedin-header-puff-coop .main-loggedin-header-puff-overlay.disabled {
    background: url(//d34ymitoc1pg7m.cloudfront.net/bf3/main/2-overlay-inactive-b27f122e.png) no-repeat; }

#main-loggedin-header-puff-multiplayer .main-loggedin-header-puff-background {
  background: url(../main/bf3/boxes/bg-multi-bf3.jpg) no-repeat; }
#main-loggedin-header-puff-multiplayer .main-loggedin-header-puff-overlay {
  width: 148px;
  height: 118px;
  background: url(//d34ymitoc1pg7m.cloudfront.net/bf3/main/3-overlay-eef017b9.png) no-repeat;
  left: 182px;
  top: 109px; }

#main-loggedin-header-puff-buygame {
  width: 680px;
  height: 238px;
  margin-right: 0; }
  #main-loggedin-header-puff-buygame .pitch {
    position: absolute;
    bottom: 25px;
    left: 30px; }
  #main-loggedin-header-puff-buygame h1, #main-loggedin-header-puff-buygame h3 {
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase; }
  #main-loggedin-header-puff-buygame h1 {
    font-size: 24px;
    color: #ffc500;
    line-height: 1; }
  #main-loggedin-header-puff-buygame h3 {
    font-size: 14px;
    color: #fff;
    line-height: 1.9;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8); }
  #main-loggedin-header-puff-buygame .player {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    top: 27px;
    right: 27px;
    width: 288px;
    height: 186px;
    background: #000;
    /*box-shadow: 0 2px 8px rgba(0,0,0,.75)*/ }
  #main-loggedin-header-puff-buygame .video {
    background: #000;
    display: none; }
  #main-loggedin-header-puff-buygame iframe {
    display: none; }
  #main-loggedin-header-puff-buygame .player .borders {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    box-shadow: inset 0 0 1px 2px rgba(255, 255, 255, 0.3); }
  #main-loggedin-header-puff-buygame .player .mediabutton {
    display: none;
    position: absolute;
    background: url(../main/icon-play-m.png) 0 0 no-repeat;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 73px;
    margin: -36px 0 0 -36px;
    cursor: pointer;
    z-index: 2; }
  #main-loggedin-header-puff-buygame .player:hover .mediabutton {
    background-position: 0 -72px; }
  #main-loggedin-header-puff-buygame .common-title {
    font-size: 22px;
    line-height: 35px; }

.main-loggedin-header-puff-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: background 0.5s ease;
  -moz-transition: background 0.5s ease;
  -ms-transition: background 0.5s ease;
  -o-transition: background 0.5s ease;
  transition: background 0.5s ease;
  text-shadow: 1px 1px 3px black; }
  .main-loggedin-header-puff-content h2 {
    color: #fff;
    text-transform: uppercase;
    padding: 3px 0 0 16px;
    line-height: 1;
    text-shadow: 0 1px 3px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=150,strength=1.5);
    overflow: hidden; }

.main-loggedin-header-puff-info {
  width: 288px;
  position: absolute;
  left: 16px;
  top: 50px; }

.main-loggedin-header-puff-info-title {
  font-size: 11px;
  font-family: Tahoma, sans-serif;
  color: #c3c3c3;
  line-height: 15px;
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 1px;
  text-shadow: #222 2px 2px 5px; }

.puff-disabled .main-loggedin-header-puff-info-title {
  font-family: Arial, sans-serif;
  font-size: 22px;
  line-height: 22px;
  text-transform: uppercase;
  font-weight: normal;
  padding-top: 1px;
  text-shadow: none;
  color: #8a8a8a;
  padding-left: 16px; }
.puff-disabled .main-loggedin-header-puff-content h2 {
  text-shadow: none; }

.main-loggedin-header-puff-friends-avatars-wrapper {
  height: 36px;
  padding: 7px 0; }

.main-loggedin-header-puff-friends-avatar {
  width: 36px;
  height: 36px;
  float: left;
  margin-right: 5px; }

.main-view-friends-view-link {
  font-size: 11px;
  font-weight: normal;
  line-height: 14px; }

.main-loggedin-header-puff-progress-counter {
  background: black url(../coop/difficulty-sprite.png) 0 0 no-repeat;
  line-height: 19px;
  padding: 0 7px 0 27px;
  color: #fff;
  font-size: 12px; }

.main-loggedin-header-puff-play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: #fff;
  font-size: 13px; }
  .main-loggedin-header-puff-play h3 {
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    width: 300px;
    margin-bottom: 3px; }

.main-loggedin-header-puff-play-info {
  line-height: 14px;
  margin-bottom: 6px; }
  .main-loggedin-header-puff-play-info img {
    margin-bottom: -1px;
    padding-right: 4px; }
  .main-loggedin-header-puff-play-info a {
    font-weight: normal;
    font-size: 12px;
    color: #fff;
    text-decoration: none; }
    .main-loggedin-header-puff-play-info a:hover {
      font-weight: normal;
      font-size: 12px;
      color: #fff;
      text-decoration: none; }

.main-loggedin-header-puff-campaign-info-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  line-height: 20px;
  text-shadow: #222 2px 2px 5px;
  margin-top: 4px; }

.main-loggedin-header-puff-campaign-info-extra {
  font-size: 11px;
  color: #c3c3c3;
  line-height: 14px;
  text-shadow: #222 2px 2px 5px; }

.main-loggedin-leftcolumn-upcoming-unlocks {
  margin-bottom: 2px;
  min-height: 121px;
  position: relative; }

.main-loggedin-upcomingunlocks {
  min-height: 65px;
  position: relative;
  left: -10px; }

.main-loggedin-leftcolumn-upcoming-unlocks-footer-anchor-separator {
  padding-left: 4px;
  padding-right: 3px; }

#main-landing-middle-wrapper #main-middle, #main-landing-middle-wrapper #footer-wrapper {
  width: auto; }

.main-plugin-debug-contaioner {
  width: 650px;
  margin: 0 auto;
  height: 800px; }

.main-upcoming-unlock {
  width: 100px;
  float: left;
  margin-right: 6px;
  position: relative; }

body .main-upcoming-unlock .common-bubble {
  top: -50px !important; }

.main-upcoming-unlock img {
  margin-top: 5px;
  margin-left: 10px; }
.main-upcoming-unlock .common-percentbar-container {
  margin-left: 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  padding: 0;
  height: 5px; }
  .main-upcoming-unlock .common-percentbar-container div {
    background: none repeat scroll 0 0 #fff;
    margin: 0;
    height: 5px; }
.main-upcoming-unlock.last {
  margin-right: 0; }

.main-friendlist-playing {
  float: left;
  margin-top: 3px;
  margin-right: 6px; }

.main-loggedin-leftcolumn-bf3preorder {
  margin-bottom: 7px; }

.main-side-column .advirticement.ad320x200 {
  width: 320px;
  height: 200px;
  margin-bottom: 16px; }
.main-side-column .advirticement > :last-child {
  margin: 0 0 16px 0;
  display: block; }
.main-side-column .advirticement .advirticement-default {
  display: none; }
.main-side-column .advirticement.ad320x200 .advirticement-default {
  width: 320px;
  height: 200px; }

/* Latest news
 * ---------------------------------------------------------------- */
#main-postlistsmall {
  padding: 0 0 10px 0; }
  #main-postlistsmall footer {
    padding: 0; }
    #main-postlistsmall footer a {
      padding: 16px;
      display: block;
      text-decoration: none; }
    #main-postlistsmall footer:hover {
      background-color: rgba(7, 7, 7, 0.6); }

#main-latest-news {
  margin-bottom: 10px; }
  #main-latest-news h3 {
    margin-bottom: 6px; }
  #main-latest-news li {
    border-bottom: 1px solid #ddd;
    margin: 0 0 5px 0;
    padding: 0 0 5px 0; }
    #main-latest-news li.last {
      border-bottom: 0; }
    #main-latest-news li.posts-premium a:first-child {
      display: inline-block;
      padding-left: 21px;
      min-height: 14px;
      background: url(../premium/icon-p-s.png) 0 0 no-repeat; }
    #main-latest-news li p {
      color: #8A8A8A;
      font-size: 11px;
      margin: 6px 0 3px 0; }
      #main-latest-news li p a {
        font-size: 11px;
        font-weight: normal; }

#main-loggedin-maincolumn #profile-status-message-area {
  padding-left: 10px; }

.agegate {
  font-size: 14px; }

body .main-credits-bf4 {
  background-color: rgba(7, 7, 7, 0.5); }
  body .main-credits-bf4 .main-credits-header1 {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 32px; }
  body .main-credits-bf4 .main-credits-header2 {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 23px; }
  body .main-credits-bf4 .main-credits-lines {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-weight: normal; }
  body .main-credits-bf4 .main-credits-human-role {
    font-weight: 600;
    font-size: 16px; }
  body .main-credits-bf4 .main-credits-human-name {
    font-weight: 400;
    font-size: 16px; }
  body .main-credits-bf4 .main-credits-multilines {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px; }
  body .main-credits-bf4 .main-credits-line {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px; }
  body .main-credits-bf4 .logo {
    margin: 0 auto;
    margin-top: 30px;
    width: 265px;
    height: 50px;
    background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/logos/bf4-logo-3ed8cb79.png); }

.main-credits {
  margin-bottom: 50px;
  text-align: center; }

.main-credits-header1 {
  font-family: Arial, sans-serif;
  font-size: 50px;
  line-height: 50px;
  font-weight: normal;
  color: #fff;
  margin-top: 53px;
  text-transform: uppercase; }

.main-credits-header2 {
  font-family: Arial, sans-serif;
  font-size: 30px;
  line-height: 38px;
  font-weight: normal;
  color: #fff;
  margin: 27px 0 0;
  text-transform: uppercase; }

.main-credits-lines {
  color: #fff;
  line-height: 24px;
  margin: 7px auto 0; }

.main-credits-human-role {
  width: 50%;
  text-align: right;
  font-size: 14px;
  font-weight: normal;
  padding-right: 16px;
  white-space: nowrap; }

.main-credits-human-name {
  width: 47.5%;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap; }
  .main-credits-human-name.first {
    width: 50%;
    text-align: right;
    padding-right: 16px; }

.main-credits-multilines {
  color: #fff;
  line-height: 24px;
  margin: 7px auto 0; }

.main-credits-line {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding: 0 22px; }

.main-legal-image {
  float: left;
  margin-right: 16px; }

.main-legal-info {
  float: left;
  font-size: 12px;
  line-height: 18px;
  width: 188px; }

.main-legal-box {
  width: 320px;
  float: left;
  margin-right: 16px; }
  .main-legal-box:last-child {
    margin-right: 0; }

.main-legal-box-height {
  height: 142px;
  padding-top: 16px; }

.main-legal-info-subtitle {
  font-style: italic; }

.main-show-banner a {
  display: block;
  width: 100%;
  height: 100%; }
  .main-show-banner a:hover {
    text-decoration: none; }
.main-show-banner:hover .main-show-banner-info {
  text-decoration: underline; }

.main-show-banner-title {
  font-size: 25px;
  color: #fff;
  position: absolute;
  top: 16px;
  left: 16px;
  font-weight: normal; }

.main-show-banner-info {
  position: absolute;
  left: 16px;
  bottom: 20px;
  font-size: 12px;
  line-height: 16px;
  color: #3AADE3;
  font-weight: normal; }

a.main-show-banner-shop:hover {
  text-decoration: none; }
  a.main-show-banner-shop:hover .main-show-banner-info {
    text-decoration: underline; }

.main-show-banner-shop {
  display: block;
  position: relative;
  width: 320px;
  height: 107px;
  margin-bottom: 12px;
  background: url(../main/banner-shop.jpg); }

.main-show-banner-karkand {
  margin-bottom: 12px;
  position: relative; }
  .main-show-banner-karkand.karkand-not-owned, .main-show-banner-karkand.karkand-owned {
    background: url(../main/bf3/banner-b2k-bg.jpg);
    width: 320px;
    height: 200px;
    margin-bottom: 12px; }

.main-news-comments a {
  padding-bottom: 0; }

.main-selectlanguage-middle {
  text-align: center; }

.main-selectlanguage-form-wrapper {
  margin: 0 auto;
  width: 654px; }

.main-selectlanguage-form {
  margin-top: 16px; }

.main-selectlanguage-form-padder {
  padding: 14px 16px;
  text-align: left; }

.main-selectlanguage-form-submit {
  margin: 16px 0; }

.main-selectlanguage-language {
  float: left;
  width: 50%;
  margin-bottom: 10px; }
  .main-selectlanguage-language label {
    font-size: 12px; }
  .main-selectlanguage-language input[checked] + label {
    font-weight: bold; }

.main-news-comments a {
  padding-bottom: 0; }

.main-selectlanguage-middle {
  text-align: center; }

.main-selectlanguage-form-wrapper {
  margin: 0 auto;
  width: 654px; }

.main-selectlanguage-form {
  margin-top: 16px; }

.main-selectlanguage-form-padder {
  padding: 14px 16px;
  text-align: left; }

.main-selectlanguage-form-submit {
  margin: 16px 0; }

.main-selectlanguage-language {
  float: left;
  width: 50%;
  margin-bottom: 10px; }
  .main-selectlanguage-language label {
    font-size: 12px; }
  .main-selectlanguage-language input[checked] + label {
    font-weight: bold; }

/* Page Box content
 * ------------------------------------------------------------------ */
#main-loggedin-top-banner {
  overflow: hidden;
  margin-bottom: 6px;
  width: 100%; }

/* Karkand banner
 * ------------------------------------------------------------------ */
.main-show-banner-karkand {
  margin-bottom: 6px;
  position: relative;
  font-size: 11px;
  line-height: 16px; }
  .main-show-banner-karkand a {
    color: #3AADE3;
    font-size: 11px; }
  .main-show-banner-karkand.karkand-not-owned {
    background: url(../main/bf3/banner-b2k-bg.jpg);
    width: 320px;
    height: 200px; }
  .main-show-banner-karkand.karkand-owned {
    background: url(../main/bf3/banner-b2k-owned-bg.jpg);
    width: 320px;
    height: 166px; }

#main-karkandbanner-friends {
  height: 36px;
  padding: 7px 0; }

.main-loggedin-karkand-container {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 320px;
  height: 125px;
  padding-left: 12px; }

.karkand-owned .main-loggedin-karkand-container-nofriends {
  background: rgba(0, 0, 0, 0.85);
  position: absolute;
  left: 0;
  bottom: 0; }

.main-loggedin-header-puff-info-karkand {
  color: white;
  position: absolute;
  top: 46px;
  left: 16px; }

.main-bannerkarkand-avatar {
  margin: 2px 2px;
  display: inline-block; }

.main-loggedin-karkand-container-nofriends {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px 0 6px 36px;
  width: 284px; }

.main-bannerkarkand-avatar-container {
  text-align: center; }
  .main-bannerkarkand-avatar-container .base-avatar-status-overlay {
    background: none !important; }

.main-show-banner-karkand .base-button-arrow-large {
  font-family: BebasNeueRegular, Arial, sans-serif;
  font-size: 22px;
  font-weight: normal; }

#main-banner-karkand-transfooter {
  position: absolute;
  bottom: 8px;
  left: 16px; }

.main-show-banner-karkand karkand-owned #main-bannerkarkand-transfooter {
  height: 50px; }

.karkand-owned p {
  line-height: 16px;
  color: #fff;
  font-weight: bold; }

#main-bannerkarkand-checkbox {
  background: url(../coop/difficulty-sprite.png) no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  top: 6px;
  left: 10px; }

.spinner {
  text-align: center;
  margin: 6px;
  display: none; }

#main-bannerkarkand-buy-form {
  position: absolute;
  top: 0;
  left: 16px; }

/* Banner Kit Shortcuts
 -------------------------------------------------------------------- */
#main-show-banner-kitshortcuts {
  background: url(../main/banner_kit_shortcuts.jpg) left top no-repeat;
  display: block;
  height: 107px;
  width: 320px;
  position: relative;
  margin-bottom: 16px; }
  #main-show-banner-kitshortcuts h2 {
    font-family: BebasNeueRegular, Arial, sans-serif;
    font-size: 24px;
    color: white;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 12px;
    left: 16px;
    font-weight: normal; }
  #main-show-banner-kitshortcuts p {
    background: url(../main/icon_new_win.gif) right center no-repeat;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #3aade3;
    position: absolute;
    left: 16px;
    bottom: 12px;
    padding-right: 14px; }
  #main-show-banner-kitshortcuts:hover p {
    text-decoration: underline; }

.main-loggedin-leftcolumn-activity {
  margin-bottom: 10px;
  position: relative;
  overflow: hidden; }

.main-loggedin-leftcolumn-activity-intro {
  border-bottom: 1px solid #e1e1e1;
  background: #f8f3c5;
  padding: 16px 20px 16px 16px;
  position: relative;
  display: none;
  color: #353535;
  padding: 10px; }

.main-loggedin-leftcolumn-activity.show-intro .main-loggedin-leftcolumn-activity-intro {
  display: block; }

.main-loggedin-leftcolumn-activity-intro .close {
  width: 7px;
  height: 7px;
  background: url(../base/shared/row_close.png) 0 0 no-repeat;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer; }
  .main-loggedin-leftcolumn-activity-intro .close:hover {
    background-position: 0 -7px; }
.main-loggedin-leftcolumn-activity-intro h4 {
  line-height: 16px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 2px; }
.main-loggedin-leftcolumn-activity-intro p {
  line-height: 18px;
  font-size: 12px; }
.main-loggedin-leftcolumn-activity-intro a {
  font-weight: normal;
  font-size: 12px;
  line-height: 18px; }

.main-loggedin-leftcolumn-activity .activity-header-gameicon {
  float: right;
  margin: 1px 10px 0 0; }

.main-loggedin-leftcolumn-activity .base-box-push-inner {
  padding: 0;
  overflow: hidden; }

#main-loggedin-leftcolumn .main-loggedin-leftcolumn-activity .base-box-push-header {
  border-bottom: 1px solid #e1e1e1;
  padding: 0 6px 0 16px;
  height: 40px; }
  #main-loggedin-leftcolumn .main-loggedin-leftcolumn-activity .base-box-push-header h3 {
    line-height: 39px;
    margin: 0;
    font-weight: bold;
    color: #353535;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    float: left; }

.main-loggedin-leftcolumn-activity .activitystream-list-wrapper {
  width: 100%;
  overflow-y: hidden;
  height: 334px;
  position: relative;
  z-index: 0; }
  .main-loggedin-leftcolumn-activity .activitystream-list-wrapper .activitystream-noevents {
    height: 334px; }
.main-loggedin-leftcolumn-activity.show-intro .activitystream-list-wrapper .activitystream-noevents {
  height: 212px; }
.main-loggedin-leftcolumn-activity .activitystream-list-wrapper .activitystream-noevents td {
  vertical-align: middle;
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0 30px; }
  .main-loggedin-leftcolumn-activity .activitystream-list-wrapper .activitystream-noevents td h4 {
    font-size: 14px;
    text-transform: uppercase; }
  .main-loggedin-leftcolumn-activity .activitystream-list-wrapper .activitystream-noevents td p {
    font-size: 12px;
    line-height: 22px; }
.main-loggedin-leftcolumn-activity .view-more {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }
  .main-loggedin-leftcolumn-activity .view-more span {
    display: block;
    padding: 0 16px;
    text-align: left;
    line-height: 30px;
    font-size: 11px;
    font-weight: normal;
    background: #ebebeb;
    z-index: 2;
    border-top: 1px solid #d3d3d3; }
  .main-loggedin-leftcolumn-activity .view-more::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    background: transparent;
    box-shadow: 0 -2px 20px 6px rgba(0, 0, 0, 0.1);
    z-index: -1;
    border-radius: 30%; }
.main-loggedin-leftcolumn-activity .activitystream-noevents + .view-more {
  display: none; }
.main-loggedin-leftcolumn-activity.show-intro .activitystream-list-wrapper {
  height: 213px; }
.main-loggedin-leftcolumn-activity .activitystream-list {
  padding: 0 9px;
  position: relative;
  z-index: 0;
  height: 100%;
  overflow: hidden; }
.main-loggedin-leftcolumn-activity .common-scrollbar-style .activitystream-list {
  height: auto;
  overflow: visible; }
.main-loggedin-leftcolumn-activity .activitystream-list .activitystream-item:first-child {
  margin-top: 12px; }
.main-loggedin-leftcolumn-activity .activitystream-list .activitystream-item:last-child {
  margin-bottom: 12px; }
.main-loggedin-leftcolumn-activity .common-scrollbar-style .activitystream-list {
  padding: 0 18px 0 9px; }

.main-loggedin-premium-scoremultiplier {
  background: url(../main/bf3/bg-event-1024.png) top right no-repeat;
  line-height: 35px;
  color: #fb8800;
  font-size: 11px;
  margin: 0 auto;
  width: 974px;
  position: absolute;
  right: 0;
  font-weight: bold;
  text-align: right;
  padding-right: 50px;
  font-family: Tahoma, sans-serif;
  height: 35px;
  margin-top: 8px;
  margin-bottom: 16px; }
  .main-loggedin-premium-scoremultiplier.brief {
    position: absolute;
    top: 0;
    right: 0;
    width: 355px;
    bottom: 0;
    background: url(../main/bf3/bg-event-400.png) top right no-repeat; }
  .main-loggedin-premium-scoremultiplier > strong {
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 8px;
    color: #FFF;
    font-size: 11px;
    padding-top: 5px;
    clear: both;
    display: block;
    line-height: 1;
    font-family: Tahoma, sans-serif; }
  .main-loggedin-premium-scoremultiplier > span {
    clear: both;
    color: #f78513;
    line-height: 1;
    margin-right: 8px;
    display: block;
    text-transform: uppercase;
    padding-top: 2px;
    font-size: 12px;
    font-family: Tahoma, sans-serif; }
  .main-loggedin-premium-scoremultiplier > a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1; }

#main-loggedin-premium-scoremultiplier-icon {
  width: 44px;
  height: 26px;
  position: absolute;
  top: 13px;
  right: 5px;
  background: url(../main/bf3/icon-2xp.png); }

.main-loggedin-actionbar.noplaybar .main-loggedin-premium-scoremultiplier {
  position: relative; }

.main-loggedin-header-puff-loading {
  position: absolute;
  right: 10px;
  bottom: 10px; }

.main-topstory-comments {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  margin: 0 0 6px 0;
  padding: 0 6px 0 0;
  height: 18px; }
  .main-topstory-comments .icon {
    position: relative;
    top: 3px;
    display: block;
    float: left;
    background: url(../devblog/icon-comments.png) 0 -11px;
    width: 13px;
    height: 11px;
    margin: 0 6px 0 16px; }

.main-topstory-votes {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  margin: 0 0 6px 0;
  padding: 0 6px 0 0;
  height: 18px; }
  .main-topstory-votes .icon {
    display: inline-block;
    background: url(../feed/icon-hooah-activitystream.png) 0 -54px;
    width: 14px;
    height: 14px;
    margin: 0 3px 0 0; }

#main-loggedin-header-puff-topstory h3 {
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8); }

.main-loggedin-actionbar {
  position: relative; }

.main-loggedin-playbar {
  float: left;
  height: 35px;
  margin-top: 8px;
  margin-bottom: 16px;
  position: relative; }
  .main-loggedin-playbar span.title {
    font-family: BebasNeueRegular, Arial, sans-serif;
    font-size: 22px;
    font-weight: normal;
    color: #fff;
    background: url(../main/bf3/boxes/bg-playnow.png) top right no-repeat;
    float: left;
    height: 35px;
    line-height: 37px;
    margin-right: 10px;
    padding: 0 20px 0 16px;
    cursor: default; }

.main-loggedin-playbutton {
  margin-right: 6px; }
  .main-loggedin-playbutton p {
    padding: 0 20px; }

#main-loggedin-header-puff-unlocks .main-loggedin-header-puff-content {
  z-index: 2; }

.main-loggedin-header-puff-soldiers-content {
  bottom: 43px;
  left: 18px; }
  .main-loggedin-header-puff-soldiers-content > h1 {
    margin-bottom: 8px;
    font-size: 13px; }
  .main-loggedin-header-puff-soldiers-content > div {
    float: left;
    width: 88px;
    background-color: rgba(255, 255, 255, 0.3); }
    .main-loggedin-header-puff-soldiers-content > div > span {
      height: 5px;
      background: #fff;
      display: block; }

#main-loggedin-header-puff-unlocks {
  overflow: hidden; }
  #main-loggedin-header-puff-unlocks ul {
    position: absolute;
    right: 25px;
    bottom: -2px;
    z-index: 1; }
    #main-loggedin-header-puff-unlocks ul > li {
      float: left;
      width: 34px; }
      #main-loggedin-header-puff-unlocks ul > li > img {
        height: 107px; }

.main-loggedin-header-puff-platoon-content {
  width: 303px;
  position: absolute;
  top: 53px; }
  .main-loggedin-header-puff-platoon-content > h1 {
    font-size: 14px; }
  .main-loggedin-header-puff-platoon-content > span {
    display: block;
    float: none;
    margin: 3px 0 6px 2px; }
  .main-loggedin-header-puff-platoon-content > img.platoon-badge-item {
    position: absolute;
    top: -27px;
    right: 5px; }
  .main-loggedin-header-puff-platoon-content > div.main-loggedin-platoon-overlay {
    background-image: url('../main/mohw/boxes/platoon-overlay.png');
    width: 60px;
    height: 62px;
    position: absolute;
    top: -28px;
    right: 5px; }
    .main-loggedin-header-puff-platoon-content > div.main-loggedin-platoon-overlay > p {
      -webkit-transition: background 0.5s ease;
      -moz-transition: background 0.5s ease;
      -ms-transition: background 0.5s ease;
      -o-transition: background 0.5s ease;
      transition: background 0.5s ease;
      width: 60px;
      height: 62px; }

.main-loggedin-header-puff:hover div.main-loggedin-platoon-overlay > p {
  background: rgba(255, 255, 255, 0.1); }

.main-loggedin-header-puff-platoon-content > em {
  display: block;
  font-size: 11px;
  font-style: normal; }

#main-introduction {
  padding: 0;
  border: 0; }
  #main-introduction > header {
    background: url(//d34ymitoc1pg7m.cloudfront.net/bf3/intro/intro-banner-bf3-1bd910e2.png) no-repeat;
    height: 207px;
    width: 1024px;
    margin: 0;
    border-bottom: 0; }
    #main-introduction > header > h3 {
      font-family: BebasNeueRegular, Arial, sans-serif;
      font-weight: normal;
      font-size: 44px;
      color: #fff;
      text-align: center;
      top: 35px;
      position: relative; }
  #main-introduction > .common-box-inner {
    padding: 16px;
    text-align: center; }
  #main-introduction .sections {
    display: table;
    margin: 0 77px 16px 77px;
    text-align: left; }
  #main-introduction section {
    display: table-cell;
    width: 33%; }
    #main-introduction section > .image {
      width: 264px;
      height: 137px;
      background: no-repeat 50% 50% #ebebeb;
      border: 0; }
    #main-introduction section > h2 {
      font-family: BebasNeueRegular, Arial, sans-serif;
      font-size: 30px;
      color: #353535;
      margin: 20px 0 12px 0;
      font-weight: normal; }
    #main-introduction section > p {
      font-family: Arial, sans-serif;
      font-size: 14px;
      color: #898989;
      line-height: 21px; }
    #main-introduction section.friends > .image {
      background-image: url(../main/intro-icon-friends-bf3.png); }
    #main-introduction section.platoons > .image {
      background-image: url(../main/intro-icon-platoon-bf3.png); }
    #main-introduction section.stats > .image {
      background-image: url(../main/intro-icon-stats-bf3.png); }
  #main-introduction .continue-button {
    margin: 32px 0; }
    #main-introduction .continue-button p {
      padding: 2px 110px 0 110px;
      font-size: 32px;
      font-weight: normal; }
    #main-introduction .continue-button:hover {
      text-decoration: none; }
  #main-introduction.mohw > header {
    background-image: url(//d34ymitoc1pg7m.cloudfront.net/mohw/intro/intro-banner-mohw-580c25d4.png); }
    #main-introduction.mohw > header > h3 {
      color: #353535; }
  #main-introduction.mohw section.friends > .image {
    background-image: url(../main/intro-icon-friends-mohw.png); }
  #main-introduction.mohw section.platoons > .image {
    background-image: url(../main/intro-icon-platoon-mohw.png); }
  #main-introduction.mohw section.stats > .image {
    background-image: url(../main/intro-icon-stats-mohw.png); }

body.premium .main-header .persona {
  background: url(../base/bf4/overlay-p.png) no-repeat top center; }
  body.premium .main-header .persona .username {
    color: #f7da8d; }
  body.premium .main-header .persona .icon-premium-wide {
    float: left; }
  body.premium .main-header .persona .platform {
    float: left; }

.main-header .playbar {
  margin: 0;
  margin-top: 16px;
  margin-bottom: 16px; }
.main-header .tiles .box {
  height: 143px;
  background: none;
  margin-top: 1px;
  cursor: pointer; }
  .main-header .tiles .box h1 {
    font-size: 19px;
    line-height: 16px; }
  .main-header .tiles .box h2 {
    font-size: 16px;
    line-height: 16px;
    font-weight: normal;
    color: lightgrey; }
  .main-header .tiles .box h2 {
    line-height: 21px; }
    .main-header .tiles .box h2.white {
      color: #fff; }
  .main-header .tiles .box .box-content {
    background-color: transparent;
    background-position: 96% 67px;
    background-repeat: no-repeat;
    -webkit-transition: background-position 0.2s ease-in;
    -moz-transition: background-position 0.2s ease-in;
    transition: background-position 0.2s ease-in; }
  .main-header .tiles .box .box-hide {
    position: absolute; }
    .main-header .tiles .box .box-hide h1 {
      margin-top: 25px;
      font-size: 50px;
      line-height: 40px; }
    .main-header .tiles .box .box-hide h2 {
      text-transform: uppercase; }
  .main-header .tiles .box:hover > .box-content {
    background-position: 96% 62px;
    -webkit-transition: background-position 0.1s ease-in;
    -moz-transition: background-position 0.1s ease-in;
    transition: background-position 0.1s ease-in; }
    .main-header .tiles .box:hover > .box-content .box-hide {
      opacity: 0; }
    .main-header .tiles .box:hover > .box-content .box-inner {
      -webkit-transition: opacity 0.3s ease-in-out;
      -moz-transition: opacity 0.3s ease-in-out;
      transition: opacity 0.3s ease-in-out;
      opacity: 1; }
      .main-header .tiles .box:hover > .box-content .box-inner .bg-inner {
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
        opacity: 1; }
.main-header .box {
  overflow: hidden;
  position: relative;
  text-decoration: none; }
  .main-header .box .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.6;
    width: 100%;
    height: 100%; }
    .main-header .box .bg.image {
      opacity: 0.8; }
  .main-header .box:hover .bg {
    opacity: 0.8;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out; }
    .main-header .box:hover .bg.image {
      opacity: 1; }
  .main-header .box > .box-content {
    position: relative;
    z-index: 4;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .main-header .box > .box-content .box-inner {
      opacity: 0; }
.main-header .tiles a:hover {
  text-decoration: none; }
.main-header .tiles .bg {
  background: url(../main/warsaw/bg-box.jpg) 0 0; }
.main-header .tiles .leaderboards .bg {
  background: url(../main/warsaw/bg-box-lb.jpg) 0 0; }
.main-header .tiles .leaderboards .icons {
  position: absolute;
  right: 10px;
  bottom: 3px;
  -webkit-transition: bottom 0.1s ease-in;
  -moz-transition: bottom 0.1s ease-in;
  transition: bottom 0.1s ease-in; }
  .main-header .tiles .leaderboards .icons .division {
    position: absolute;
    bottom: 0;
    right: 60px; }
    .main-header .tiles .leaderboards .icons .division img {
      height: 55px; }
  .main-header .tiles .leaderboards .icons .category {
    position: absolute;
    right: 0;
    bottom: 16px; }
  .main-header .tiles .leaderboards .icons .rank {
    position: absolute;
    right: 70px;
    bottom: 0px;
    margin-top: 25px;
    font-size: 50px;
    line-height: 40px; }
  .main-header .tiles .leaderboards .icons.no-leaderboard {
    background-image: url(../main/warsaw/content-box-lb.png);
    background-repeat: no-repeat; }
.main-header .tiles .leaderboards .box:hover .icons {
  bottom: 8px; }
.main-header .tiles .leaderboards .loader {
  display: block;
  margin: 0 auto;
  margin-top: 30px; }
.main-header .tiles .club.no-club .bg img {
  opacity: 0.2; }
.main-header .tiles .club .bg img {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 160px;
  height: 160px; }
.main-header .tiles .club .club-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  height: 16px;
  display: block;
  width: 150px;
  margin-bottom: 14px; }
.main-header .tiles .club h3 {
  font-size: 12px; }
.main-header .tiles .club h2 {
  width: auto; }
.main-header .tiles .club .box-hide {
  bottom: 12px;
  width: 90%; }
  .main-header .tiles .club .box-hide .club-rank {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 600;
    margin: 6px 0;
    font-size: 19px; }
  .main-header .tiles .club .box-hide .rank-progress {
    width: 80%;
    margin-bottom: 0;
    font-size: 12px;
    color: #a8a8a8; }
  .main-header .tiles .club .box-hide .club-details {
    margin-bottom: 4px; }
.main-header .tiles .loadout .box:hover > .box-content {
  background-position: 96% 0px; }
.main-header .tiles .loadout .box-content {
  background-position: 96% 10px;
  background-image: url(../main/warsaw/content-box-loadout.png); }
.main-header .tiles .challenges .box-content {
  background-position: 96% 72px;
  background-image: url(../main/warsaw/content-box-missions.png); }
.main-header .tiles .twitch .box-content {
  background-position: 96% 108px;
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/common/logos/twitch-small-08bb4a91.png); }
.main-header .tiles .twitch .box-content:hover {
  background-position: 96% 102px; }
.main-header .tiles .premium .bg-inner {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(-315deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(45deg, #000000 0%, rgba(0, 0, 0, 0) 100%); }
.main-header .tiles .premium h2 {
  position: relative;
  z-index: 1; }
  .main-header .tiles .premium h2.no-items {
    top: 24px; }
.main-header .tiles .premium .icon-premium-p-big {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1; }
.main-header .tiles .premium .bullets {
  position: absolute;
  left: 14px;
  bottom: 5px; }
  .main-header .tiles .premium .bullets span {
    font-family: Arial, sans-serif;
    font-size: 32px;
    line-height: 0;
    letter-spacing: 1px;
    color: #4f545a;
    -webkit-transition: color 0.2s; }
    .main-header .tiles .premium .bullets span.active {
      color: #cfcfcf; }
.main-header .tiles .premium h1 {
  position: absolute;
  z-index: 1; }
.main-header .tiles .premium article {
  display: none;
  padding: 40px 16px 16px 16px;
  box-sizing: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }
  .main-header .tiles .premium article .featured-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../main/warsaw/bg-box-p.jpg); }
  .main-header .tiles .premium article .thumbnail {
    position: absolute;
    right: 16px;
    bottom: 10px; }
.main-header .tiles .battlepacks .box-content {
  width: 327px;
  background-image: url(../main/warsaw/content-box-bp.png); }
.main-header .tiles .preorder {
  position: relative; }
  .main-header .tiles .preorder .box {
    background: url(../main/preorder-home.jpg) no-repeat; }
    .main-header .tiles .preorder .box.premium {
      background: url(../main/preorder-premium-home.jpg) no-repeat; }
  .main-header .tiles .preorder .bg {
    display: none; }
  .main-header .tiles .preorder h1 {
    color: black; }
  .main-header .tiles .preorder h2 {
    color: #353535; }
  .main-header .tiles .preorder button {
    position: absolute;
    bottom: 16px;
    left: 16px; }
    body.is-hybrid.is-ios .main-header .tiles .preorder button {
      display: none; }
.main-header .tiles.cteguide {
  background-image: url(../communitytest/cte-icons-guide.png); }
.main-header .tiles.feedback {
  background-image: url(../communitytest/cte-icons-feedback.png); }
.main-header .topstory {
  height: 352px;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  background-size: 100% auto; }
  .main-header .topstory .loader {
    margin: 15px; }
  .main-header .topstory .article {
    width: 100%;
    height: 100%;
    background: none;
    background-repeat: no-repeat;
    background-size: 100% auto; }
    .main-header .topstory .article > h1 {
      font-size: 22px;
      line-height: 22px;
      color: white;
      background: none;
      text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); }
    .main-header .topstory .article > footer {
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      bottom: 0px;
      text-align: left;
      min-height: 80px;
      padding-top: 10px;
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      .main-header .topstory .article > footer h5 {
        text-transform: none;
        line-height: 24px;
        font-weight: normal; }
      .main-header .topstory .article > footer .meta {
        float: left;
        height: 16px;
        line-height: 19px; }
      .main-header .topstory .article > footer .published {
        font-size: 12px;
        text-transform: none; }
        .main-header .topstory .article > footer .published span {
          color: #a8a8a8; }
    .main-header .topstory .article:hover .box-content {
      background-color: rgba(255, 255, 255, 0.1); }
.main-header .persona {
  height: 247px;
  margin-bottom: 1px; }
  .main-header .persona .username {
    font-size: 22px;
    font-family: Purista;
    margin: -2px 0 3px 0;
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .main-header .persona .platform {
    line-height: 0;
    margin-bottom: 5px; }
  .main-header .persona .soldier-emblem {
    position: absolute;
    top: 40px;
    right: 70px; }
  .main-header .persona .dogtags-chain {
    position: relative;
    -webkit-transform: scale(0.8) translateX(-35px);
    -moz-transform: scale(0.8) translateX(-35px);
    -ms-transform: scale(0.8) translateX(-35px);
    -o-transform: scale(0.8) translateX(-35px);
    transform: scale(0.8) translateX(-35px); }
  .main-header .persona .rank {
    position: relative; }
    .main-header .persona .rank > .image {
      position: absolute;
      top: -16px; }
    .main-header .persona .rank > .number {
      font-family: Purista;
      font-size: 48px;
      position: relative;
      left: 66px;
      bottom: 9px; }
  .main-header .persona .soldier {
    position: absolute;
    top: 40px;
    right: 0;
    pointer-events: none; }
    .main-header .persona .soldier > img {
      width: 265px; }
  .main-header .persona .progress {
    position: absolute;
    bottom: 15px;
    width: 75%; }
    .main-header .persona .progress > .progress-bar {
      margin-bottom: 2px; }
    .main-header .persona .progress > .experience {
      font-size: 12px;
      color: lightgrey; }
.main-header .suggestions .suggestion {
  height: 80px;
  width: 108px;
  position: relative;
  padding: 0;
  text-align: center;
  overflow: hidden;
  margin-top: 1px;
  float: left;
  margin-right: 1px; }
  .main-header .suggestions .suggestion:last-child {
    width: 109px;
    margin-right: 0; }
  .main-header .suggestions .suggestion .image {
    margin: 15% 0; }
    .main-header .suggestions .suggestion .image.vehicleunlock {
      margin: 9% 0;
      margin-left: -45px; }
  .main-header .suggestions .suggestion .loader {
    margin-top: 23px; }
  .main-header .suggestions .suggestion .progress-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    border: 0;
    margin: 0; }
  .main-header .suggestions .suggestion .refresh {
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 5px;
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px;
    opacity: 0.8; }
    .main-header .suggestions .suggestion .refresh:hover {
      opacity: 1; }
    .main-header .suggestions .suggestion .refresh:active {
      -webkit-transition: none;
      -moz-transition: none;
      transition: none;
      opacity: 0.5; }
    .main-header .suggestions .suggestion .refresh.disabled, .main-header .suggestions .suggestion .refresh.loading {
      opacity: 0.25;
      cursor: default;
      pointer-events: none; }
  .main-header .suggestions .suggestion:not(:hover) .refresh {
    opacity: 0;
    pointer-events: none; }
  .main-header .suggestions .suggestion .green-check-small {
    background-image: url(../battledash/images/icons/green-check-small.png);
    width: 12px;
    height: 12px;
    position: absolute;
    right: 3px;
    bottom: 10px; }
  .main-header .suggestions .suggestion .xp-icon {
    position: absolute;
    left: 2px;
    bottom: 6px; }
.main-header #recommended-server {
  position: relative; }
  .main-header #recommended-server .bg-map {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 2s ease;
    -moz-transition: opacity 2s ease;
    transition: opacity 2s ease;
    background-size: cover; }
  .main-header #recommended-server .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(left top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-transition: opacity 2s ease;
    -moz-transition: opacity 2s ease;
    transition: opacity 2s ease;
    opacity: 0; }
  .main-header #recommended-server.loaded .bg-map, .main-header #recommended-server.loaded .overlay {
    opacity: 1; }
  .main-header #recommended-server .loader {
    display: block;
    margin: 0 auto;
    margin-top: 30px; }
  .main-header #recommended-server .servername {
    display: block; }
  .main-header #recommended-server .playercount {
    font-weight: bold; }
  .main-header #recommended-server .servermeta {
    margin: 6px 0; }
    .main-header #recommended-server .servermeta > .item {
      font-size: 12px;
      color: lightgrey;
      margin-top: 3px; }
  .main-header #recommended-server .players {
    position: absolute;
    bottom: 15px;
    left: 15px; }
    .main-header #recommended-server .players .avatar {
      width: 28px;
      height: 28px; }
  .main-header #recommended-server button {
    position: absolute;
    bottom: 15px;
    right: 15px; }
  .main-header #recommended-server.disabled {
    opacity: 0.5; }
.main-header .challenges {
  position: relative;
  background: url(../main/warsaw/bg-box.jpg) 0 0; }
  .main-header .challenges .badge {
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 16px;
    left: 50%;
    margin-left: -60px;
    z-index: 0; }
    .main-header .challenges .badge.focused {
      z-index: 1;
      left: 50%;
      margin-left: -10px; }
.main-header .spotlight {
  height: 287px; }
  .main-header .spotlight h1 {
    font-size: 19px;
    line-height: 16px; }
  .main-header .spotlight h2 {
    font-size: 16px;
    line-height: 16px;
    font-weight: normal;
    color: lightgrey; }
  .main-header .spotlight h1, .main-header .spotlight h2 {
    text-align: center; }
  .main-header .spotlight.video > .box-content {
    background-color: rgba(255, 255, 255, 0); }
    .main-header .spotlight.video > .box-content header {
      margin-top: 166px; }
  .main-header .spotlight.video:hover > .box-content {
    background-color: rgba(255, 255, 255, 0.1); }

#main-alphatrialinformation {
  margin-bottom: 16px; }
  #main-alphatrialinformation p {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 10px; }

.agerating-container .box-content {
  min-height: 130px; }

#rsp h6 {
  font-size: 14px;
  color: #8a8a8a; }
#rsp a {
  display: inline-block;
  margin: 0 30px; }

/*body.home-signedout-bf4 {
    background: #080a16;
}*/
body.is-loggedout #base-container, body.loggedout-usps #base-container {
  width: auto; }

body.is-loggedin:not(.loggedout-usps) .usp {
  opacity: 0; }
  body.is-loggedin:not(.loggedout-usps) .usp.is-mobile-app {
    opacity: 1; }

body.is-loggedout {
  background: #080a14; }
  body.is-loggedout #base-background {
    -webkit-transition: transform 500ms ease-out;
    -moz-transition: transform 500ms ease-out;
    transition: transform 500ms ease-out; }

body.home-signedout-bf4 #base-background {
  position: absolute;
  overflow: hidden;
  height: 940px; }
  body.home-signedout-bf4 #base-background:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 0;
    background: -webkit-linear-gradient(top, rgba(35, 13, 13, 0) 0%, #080A14 100%);
    background: linear-gradient(to bottom, rgba(35, 13, 13, 0) 0%, #080A14 100%); }

body.loggedout-usps #footer-wrapper {
  display: none !important; }

body.loggedout-usps:not(.is-loggedout) #footer-wrapper {
  display: none; }

body.is-loggedout #footer-wrapper {
  position: relative;
  margin: 0 auto;
  width: 992px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto; }

@-webkit-keyframes pulsate {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }

  to {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8); } }

@-moz-keyframes pulsate {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }

  to {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8); } }

-o-keyframes pulsate from {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }
-o-keyframes pulsate to {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8); }

@-ms-keyframes pulsate {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }

  to {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8); } }

@keyframes pulsate {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }

  to {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8); } }

.main-about-icon {
  display: inline-block;
  width: 21px;
  height: 21px;
  background: url(../base/shared/icon-info.png) no-repeat;
  text-decoration: none;
  opacity: 0.75;
  cursor: pointer; }
  .main-about-icon:hover {
    opacity: 1; }

#base-container #main-loggedout {
  padding-top: 16px;
  margin-top: -16px; }
  #base-container #main-loggedout .main-loggedout-loader {
    display: block;
    margin: 100px auto; }

.loggedout-usp-container {
  min-width: 992px;
  overflow: hidden; }
  .loggedout-usp-container #scroll-down-icon, .loggedout-usp-container #scroll-down-icon-fixed {
    left: 50%;
    margin-left: -41px;
    width: 82px;
    height: 52px;
    background: url(../main/warsaw/loggedout/arrow-down.png) no-repeat;
    cursor: pointer;
    opacity: 0.9;
    z-index: 2; }
    .loggedout-usp-container #scroll-down-icon:hover, .loggedout-usp-container #scroll-down-icon-fixed:hover {
      opacity: 1; }
  .loggedout-usp-container #scroll-down-icon {
    position: absolute;
    bottom: -60px; }
  .loggedout-usp-container #scroll-down-icon-fixed {
    position: fixed;
    bottom: 0;
    display: none; }
  .loggedout-usp-container .usp {
    width: 992px;
    margin: 0 auto;
    text-align: center;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out; }
    .loggedout-usp-container .usp h1.headline, .loggedout-usp-container .usp h2.subheading {
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 600;
      background: rgba(0, 0, 0, 0.7);
      text-transform: uppercase;
      font-size: 36px;
      display: inline-block;
      padding: 1px 16px 0;
      margin-bottom: 1px; }
    .loggedout-usp-container .usp h2.subheading {
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 23px;
      line-height: 31px; }
    .loggedout-usp-container .usp p.subheading-big {
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 23px;
      text-transform: uppercase;
      margin-bottom: 10px; }
    .loggedout-usp-container .usp h2 {
      font-size: 30px;
      margin-bottom: 4px; }
    .loggedout-usp-container .usp p.subheading-small {
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 19px;
      text-transform: uppercase;
      margin-bottom: 6px; }
    .loggedout-usp-container .usp p.subheading-tiny {
      font-size: 16px;
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 400;
      text-transform: uppercase; }
    .loggedout-usp-container .usp p.description {
      color: #a8a8a8;
      line-height: 24px;
      font-size: 14px;
      margin-bottom: 12px; }
  .loggedout-usp-container .alwayson {
    text-align: left;
    margin-top: 16px;
    position: relative; }
    .loggedout-usp-container .alwayson h1.header-headline {
      display: inline-block;
      margin: 0;
      padding: 6px 12px;
      font-size: 50px;
      background-color: rgba(0, 0, 0, 0.7); }
    .loggedout-usp-container .alwayson .battlefield-logo {
      background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/home-logo-e3e42ee9.png);
      width: 616px;
      height: 114px;
      margin-top: 24px; }
    .loggedout-usp-container .alwayson .alwayson-soldier {
      position: absolute;
      right: -375px;
      top: -75px;
      height: 940px;
      overflow: hidden; }
      .loggedout-usp-container .alwayson .alwayson-soldier:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 328px;
        right: 213px;
        height: 50px;
        z-index: 0;
        background: -webkit-linear-gradient(top, rgba(8, 10, 20, 0) 0%, #080A14 100%);
        background: linear-gradient(to bottom, rgba(8, 10, 20, 0) 0%, #080A14 100%); }
    .loggedout-usp-container .alwayson .calltoaction {
      margin-top: 32px; }
      .loggedout-usp-container .alwayson .calltoaction .btn {
        display: inline-block;
        min-width: 288px;
        width: auto; }
      .loggedout-usp-container .alwayson .calltoaction .btn-login {
        margin-right: 8px; }
      .loggedout-usp-container .alwayson .calltoaction .btn-get-game {
        position: relative;
        font-size: 19px;
        padding-left: 76px;
        overflow: visible; }
        .loggedout-usp-container .alwayson .calltoaction .btn-get-game .game-stack {
          width: 68px;
          height: 81px;
          position: absolute;
          top: -15px;
          left: 8px;
          background: url(../main/warsaw/loggedout/getbf-stack.png) no-repeat; }
    .loggedout-usp-container .alwayson.in-viewport .devices img {
      opacity: 1; }
      .loggedout-usp-container .alwayson.in-viewport .devices img.anim {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0); }
    .loggedout-usp-container .alwayson .devices {
      margin-top: 48px;
      height: 500px;
      position: relative; }
      .loggedout-usp-container .alwayson .devices img {
        position: absolute;
        opacity: 0;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out; }
        .loggedout-usp-container .alwayson .devices img.anim {
          -webkit-transition-delay: 1s;
          -moz-transition-delay: 1s;
          transition-delay: 1s; }
      .loggedout-usp-container .alwayson .devices img.tv {
        left: 215px;
        top: 0px; }
      .loggedout-usp-container .alwayson .devices img.pc {
        left: 25px;
        top: 85px;
        -webkit-transform: translateX(-50px);
        -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        -o-transform: translateX(-50px);
        transform: translateX(-50px); }
      .loggedout-usp-container .alwayson .devices img.tablet {
        left: 525px;
        top: 185px;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px); }
      .loggedout-usp-container .alwayson .devices img.mobile {
        left: 850px;
        top: 210px;
        -webkit-transform: translate(200px);
        -moz-transform: translate(200px);
        -ms-transform: translate(200px);
        -o-transform: translate(200px);
        transform: translate(200px); }
  .loggedout-usp-container .connected {
    margin-top: 100px;
    padding-top: 65px;
    margin-bottom: 65px;
    position: relative;
    text-align: left; }
    .loggedout-usp-container .connected.is-mobile-app {
      margin-top: 0px;
      padding-top: 0px; }
    .loggedout-usp-container .connected .googleplay-logo {
      margin-left: 6px; }
    .loggedout-usp-container .connected .row {
      position: relative; }
    .loggedout-usp-container .connected img.battlescreen {
      margin-top: 30px;
      margin-left: -50px;
      opacity: 0; }
      .loggedout-usp-container .connected img.battlescreen.transition {
        -webkit-transition: margin-left 0.25s ease-out, opacity 0.25s ease-out;
        -moz-transition: margin-left 0.25s ease-out, opacity 0.25s ease-out;
        transition: margin-left 0.25s ease-out, opacity 0.25s ease-out; }
    .loggedout-usp-container .connected img.remotejoin, .loggedout-usp-container .connected img.loadout {
      position: absolute;
      bottom: 0;
      right: -100px;
      opacity: 0; }
      .loggedout-usp-container .connected img.remotejoin.transition, .loggedout-usp-container .connected img.loadout.transition {
        -webkit-transition: right 0.25s ease-out, opacity 0.25s ease-out;
        -moz-transition: right 0.25s ease-out, opacity 0.25s ease-out;
        transition: right 0.25s ease-out, opacity 0.25s ease-out; }
    .loggedout-usp-container .connected img.loadout {
      right: 200px; }
    .loggedout-usp-container .connected.in-viewport img.battlescreen {
      margin-left: 0;
      opacity: 1; }
    .loggedout-usp-container .connected.in-viewport img.remotejoin {
      right: 0;
      opacity: 1; }
    .loggedout-usp-container .connected.in-viewport img.loadout {
      right: 252px;
      opacity: 1; }
  .loggedout-usp-container .commander {
    position: relative;
    padding-top: 60px;
    height: 1126px;
    overflow-y: hidden;
    width: auto;
    text-align: center;
    background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/bg-home-commander-36b3c266.jpg) 50% 0 no-repeat; }
    .loggedout-usp-container .commander p.description {
      color: white;
      display: block;
      width: 560px;
      margin-top: 8px;
      margin-left: auto;
      margin-right: auto; }
    .loggedout-usp-container .commander .commander-tablet {
      position: relative;
      margin-top: 106px;
      opacity: 0;
      margin-left: auto;
      margin-right: auto;
      width: 992px;
      height: 774px;
      -webkit-transition: margin-top 0.25s ease-out, opacity 0.25s ease-out;
      -moz-transition: margin-top 0.25s ease-out, opacity 0.25s ease-out;
      transition: margin-top 0.25s ease-out, opacity 0.25s ease-out; }
    .loggedout-usp-container .commander.in-viewport .commander-tablet {
      margin-top: 16px;
      opacity: 1; }
  .loggedout-usp-container .ingame {
    position: relative;
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
    background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/ingame-bkg-47ff6e40.jpg) no-repeat top center;
    width: auto; }
    .loggedout-usp-container .ingame p.description {
      color: white;
      margin-top: 8px;
      display: block;
      width: 550px;
      margin-left: auto;
      margin-right: auto; }
    .loggedout-usp-container .ingame .tv-carousel {
      position: relative; }
      .loggedout-usp-container .ingame .tv-carousel .arrowleft, .loggedout-usp-container .ingame .tv-carousel .arrowright {
        width: 52px;
        height: 103px;
        position: absolute;
        top: 190px;
        background-image: url(../main/warsaw/loggedout/ingame-arrows.png);
        cursor: pointer; }
      .loggedout-usp-container .ingame .tv-carousel .arrowleft {
        background-position: 0 0; }
      .loggedout-usp-container .ingame .tv-carousel .arrowright {
        right: 0px;
        background-position: -52px 0; }
      .loggedout-usp-container .ingame .tv-carousel .dots {
        margin: 22px auto 0;
        display: block; }
        .loggedout-usp-container .ingame .tv-carousel .dots .dot {
          width: 14px;
          height: 14px;
          border: 1px solid #fff;
          margin-right: 16px;
          display: inline-block; }
        .loggedout-usp-container .ingame .tv-carousel .dots .dot.last {
          margin-right: 0; }
        .loggedout-usp-container .ingame .tv-carousel .dots .dot.active {
          background: #fff; }
      .loggedout-usp-container .ingame .tv-carousel .screenshots {
        position: absolute;
        left: 112px;
        top: 16px; }
        .loggedout-usp-container .ingame .tv-carousel .screenshots img {
          position: absolute;
          left: 0;
          top: 0;
          -webkit-transition: opacity 0.4s ease-in-out;
          -moz-transition: opacity 0.4s ease-in-out;
          -o-transition: opacity 0.4s ease-in-out;
          transition: opacity 0.4s ease-in-out;
          opacity: 0;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          filter: alpha(opacity=0); }
        .loggedout-usp-container .ingame .tv-carousel .screenshots img.opaque {
          opacity: 1;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
          filter: alpha(opacity=1); }
    .loggedout-usp-container .ingame .controllers {
      position: relative;
      margin-top: -30px;
      height: 150px; }
      .loggedout-usp-container .ingame .controllers .xbox, .loggedout-usp-container .ingame .controllers .ps, .loggedout-usp-container .ingame .controllers .pc {
        position: absolute;
        top: 50px;
        -webkit-transition: top 0.5s ease-out, left 0.5s ease-out, right 0.5s ease-out;
        -moz-transition: top 0.5s ease-out, left 0.5s ease-out, right 0.5s ease-out;
        transition: top 0.5s ease-out, left 0.5s ease-out, right 0.5s ease-out; }
      .loggedout-usp-container .ingame .controllers .xbox {
        left: -50px; }
      .loggedout-usp-container .ingame .controllers .ps {
        left: 240px; }
      .loggedout-usp-container .ingame .controllers .pc {
        right: -50px; }
    .loggedout-usp-container .ingame.in-viewport .controllers .xbox, .loggedout-usp-container .ingame.in-viewport .controllers .ps, .loggedout-usp-container .ingame.in-viewport .controllers .pc {
      top: 0; }
    .loggedout-usp-container .ingame.in-viewport .controllers .xbox {
      left: 0; }
    .loggedout-usp-container .ingame.in-viewport .controllers .pc {
      right: 0; }
  .loggedout-usp-container .progress {
    height: 643px;
    position: relative;
    margin-top: 75px; }
    .loggedout-usp-container .progress .stats {
      margin-top: 16px;
      position: relative; }
    .loggedout-usp-container .progress .soldier-image {
      position: absolute;
      right: -200px;
      top: -240px; }
  .loggedout-usp-container .stats {
    width: auto;
    padding-top: 65px;
    padding-bottom: 100px;
    text-align: center;
    background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/bg-home-stats-c4afedb7.jpg) top center no-repeat; }
    .loggedout-usp-container .stats p.description {
      display: block;
      color: white;
      width: 600px;
      margin-top: 8px;
      margin-left: auto;
      margin-right: auto; }
    .loggedout-usp-container .stats #overview-info {
      width: 993px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      margin-top: 45px; }
      .loggedout-usp-container .stats #overview-info #overview-soldier .box-content {
        height: 460px;
        text-align: center; }
    .loggedout-usp-container .stats .soldier {
      position: absolute;
      top: -45px;
      right: 25px; }
  .loggedout-usp-container .missions {
    padding-top: 65px;
    height: 850px;
    width: auto;
    background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/bg-home-missions-d248322d.jpg) top center no-repeat; }
    .loggedout-usp-container .missions .mission-content {
      position: relative;
      width: 992px;
      margin-top: 65px;
      margin-left: auto;
      margin-right: auto; }
    .loggedout-usp-container .missions.in-viewport .leaderboard .leaderboard-list li {
      opacity: 1; }
      .loggedout-usp-container .missions.in-viewport .leaderboard .leaderboard-list li.item-3 .position {
        background: #ffc600;
        color: #000; }
    .loggedout-usp-container .missions.in-viewport .soldier {
      opacity: 1; }
    .loggedout-usp-container .missions.in-viewport .soldier-highlight {
      opacity: 1;
      -webkit-animation: pulsate 2s ease-in-out 0s infinite alternate;
      -moz-animation: pulsate 2s ease-in-out 0s infinite alternate;
      -ms-animation: pulsate 2s ease-in-out 0s infinite alternate;
      -o-animation: pulsate 2s ease-in-out 0s infinite alternate;
      animation: pulsate 2s ease-in-out 0s infinite alternate; }
    .loggedout-usp-container .missions .soldier {
      position: absolute;
      opacity: 0;
      z-index: 1;
      -webkit-transition: opacity 0.25s ease-in;
      -moz-transition: opacity 0.25s ease-in;
      transition: opacity 0.25s ease-in; }
      .loggedout-usp-container .missions .soldier.soldier-1 {
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        transition-delay: 0s; }
      .loggedout-usp-container .missions .soldier.soldier-2 {
        -webkit-transition-delay: 0.25s;
        -moz-transition-delay: 0.25s;
        transition-delay: 0.25s; }
      .loggedout-usp-container .missions .soldier.soldier-3 {
        -webkit-transition-delay: 0.5s;
        -moz-transition-delay: 0.5s;
        transition-delay: 0.5s; }
      .loggedout-usp-container .missions .soldier.soldier-4 {
        -webkit-transition-delay: 0.75s;
        -moz-transition-delay: 0.75s;
        transition-delay: 0.75s; }
      .loggedout-usp-container .missions .soldier.soldier-5 {
        -webkit-transition-delay: 1s;
        -moz-transition-delay: 1s;
        transition-delay: 1s; }
    .loggedout-usp-container .missions .soldier-1 {
      left: -139px;
      top: -70px; }
    .loggedout-usp-container .missions .soldier-2 {
      left: 95px;
      top: -20px; }
    .loggedout-usp-container .missions .soldier-3 {
      left: 213px;
      top: 10px; }
    .loggedout-usp-container .missions .soldier-4 {
      left: 305px;
      top: 40px; }
    .loggedout-usp-container .missions .soldier-5 {
      left: 455px;
      top: 10px; }
    .loggedout-usp-container .missions .soldier-highlight {
      width: 225px;
      height: 56px;
      position: absolute;
      left: 224px;
      top: 532px;
      background: url(../main/warsaw/loggedout/soldier-highlight.png) no-repeat;
      z-index: 0;
      opacity: 0;
      -webkit-transition: opacity 1s 2s ease-out;
      -moz-transition: opacity 1s 2s ease-out;
      transition: opacity 1s 2s ease-out; }
    .loggedout-usp-container .missions .leaderboard {
      margin-top: 125px;
      text-align: left; }
      .loggedout-usp-container .missions .leaderboard header {
        background: #04050b;
        height: 88px;
        padding: 16px;
        padding-left: 118px;
        padding-top: 48px;
        position: relative; }
        .loggedout-usp-container .missions .leaderboard header p.subheading-small {
          font-weight: 600; }
        .loggedout-usp-container .missions .leaderboard header .mission-type-image {
          position: absolute;
          left: -28px;
          top: 10px; }
      .loggedout-usp-container .missions .leaderboard .leaderboard-list {
        margin: 0;
        padding: 0;
        list-style: none; }
        .loggedout-usp-container .missions .leaderboard .leaderboard-list li {
          margin-top: 1px;
          background: #04050b;
          height: 39px;
          line-height: 39px;
          color: #fff;
          position: relative;
          font-size: 16px;
          opacity: 0;
          -webkit-transition: opacity 0.25s ease-out;
          -moz-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li.item-1 {
            -webkit-transition-delay: 0.25s;
            -moz-transition-delay: 0.25s;
            transition-delay: 0.25s; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li.item-2 {
            -webkit-transition-delay: 0.5s;
            -moz-transition-delay: 0.5s;
            transition-delay: 0.5s; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li.item-3 {
            -webkit-transition-delay: 0.75s;
            -moz-transition-delay: 0.75s;
            transition-delay: 0.75s; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li.item-4 {
            -webkit-transition-delay: 1s;
            -moz-transition-delay: 1s;
            transition-delay: 1s; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li.item-5 {
            -webkit-transition-delay: 1.25s;
            -moz-transition-delay: 1.25s;
            transition-delay: 1.25s; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li.item-3 .position {
            -webkit-transition: all 1s 2s ease-out;
            -moz-transition: all 1s 2s ease-out;
            transition: all 1s 2s ease-out; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li .position {
            float: left;
            text-align: center;
            width: 39px;
            font-family: Purista, sans-serif;
            font-style: normal;
            font-weight: 600; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li .avatar {
            width: 39px;
            height: 39px;
            display: block;
            float: left; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li .name {
            padding-left: 8px;
            float: left;
            font-family: Purista, sans-serif;
            font-style: normal;
            font-weight: 400; }
          .loggedout-usp-container .missions .leaderboard .leaderboard-list li .score {
            position: absolute;
            top: 0;
            right: 0;
            padding-right: 8px;
            font-size: 23px;
            font-family: Purista, sans-serif;
            font-style: normal;
            font-weight: 600; }
  .loggedout-usp-container .geoleaderboards {
    width: auto;
    height: 940px;
    position: relative;
    text-align: center;
    background-position: top center;
    background-repeat: no-repeat; }
    .loggedout-usp-container .geoleaderboards .map {
      width: 100%;
      height: 940px;
      position: absolute;
      left: 0;
      top: 0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      background-repeat: no-repeat;
      background-position: top center;
      cursor: default; }
      .loggedout-usp-container .geoleaderboards .map .player {
        position: absolute;
        background-size: 100%;
        top: 50%;
        left: 50%; }
        .loggedout-usp-container .geoleaderboards .map .player.p1 {
          width: 120px;
          height: 120px;
          background: url(../main/warsaw/loggedout/avatar1.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p2 {
          width: 203px;
          height: 203px;
          background: url(../main/warsaw/loggedout/avatar2.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p3 {
          width: 120px;
          height: 120px;
          background: url(../main/warsaw/loggedout/avatar3.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p4 {
          width: 72px;
          height: 72px;
          background: url(../main/warsaw/loggedout/avatar4.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p5 {
          width: 72px;
          height: 72px;
          background: url(../main/warsaw/loggedout/avatar5.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p6 {
          width: 172px;
          height: 172px;
          background: url(../main/warsaw/loggedout/avatar6.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p7 {
          width: 120px;
          height: 120px;
          background: url(../main/warsaw/loggedout/avatar7.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p8 {
          width: 120px;
          height: 120px;
          background: url(../main/warsaw/loggedout/avatar8.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p9 {
          width: 203px;
          height: 203px;
          background: url(../main/warsaw/loggedout/avatar9.png); }
        .loggedout-usp-container .geoleaderboards .map .player.p10 {
          width: 120px;
          height: 120px;
          background: url(../main/warsaw/loggedout/avatar10.png); }
        .loggedout-usp-container .geoleaderboards .map .player.me {
          width: 199px;
          height: 199px;
          background: url(../main/warsaw/loggedout/avatar_me.png); }
    .loggedout-usp-container .geoleaderboards .map.friends {
      background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/geoleaderboards-map-friends-ccd63843.jpg); }
      .loggedout-usp-container .geoleaderboards .map.friends .player.me {
        margin-left: -201px;
        margin-top: 8px; }
      .loggedout-usp-container .geoleaderboards .map.friends .player.p2 {
        margin-left: 52px;
        margin-top: -142px; }
      .loggedout-usp-container .geoleaderboards .map.friends .player.p3 {
        margin-left: -424px;
        margin-top: 238px; }
      .loggedout-usp-container .geoleaderboards .map.friends .player.p6 {
        margin-left: -255px;
        margin-top: -82px; }
    .loggedout-usp-container .geoleaderboards .map.city {
      background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/geoleaderboards-map-city-2d1eae7d.jpg); }
      .loggedout-usp-container .geoleaderboards .map.city .player.me {
        margin-left: -74px;
        margin-top: -75px; }
      .loggedout-usp-container .geoleaderboards .map.city .player.p4 {
        margin-left: -128px;
        margin-top: 8px; }
      .loggedout-usp-container .geoleaderboards .map.city .player.p7 {
        margin-left: -268px;
        margin-top: -152px; }
    .loggedout-usp-container .geoleaderboards .map.country {
      background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/geoleaderboards-map-country-08b0bccb.jpg); }
      .loggedout-usp-container .geoleaderboards .map.country .player.me {
        margin-left: -160px;
        margin-top: 65px; }
      .loggedout-usp-container .geoleaderboards .map.country .player.p1 {
        margin-left: -140px;
        margin-top: -35px; }
      .loggedout-usp-container .geoleaderboards .map.country .player.p5 {
        margin-left: -227px;
        margin-top: 192px; }
    .loggedout-usp-container .geoleaderboards .map.world {
      background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/geoleaderboards-map-world-3f3f31f4.jpg); }
      .loggedout-usp-container .geoleaderboards .map.world .player.me {
        margin-left: -288px;
        margin-top: -305px; }
      .loggedout-usp-container .geoleaderboards .map.world .player.p8 {
        margin-left: -360px;
        margin-top: 95px; }
      .loggedout-usp-container .geoleaderboards .map.world .player.p9 {
        margin-left: -808px;
        margin-top: -181px; }
      .loggedout-usp-container .geoleaderboards .map.world .player.p10 {
        margin-left: 290px;
        margin-top: -25px; }
    .loggedout-usp-container .geoleaderboards .map.opaque {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=1); }
    .loggedout-usp-container .geoleaderboards .heading {
      position: absolute;
      left: 0;
      top: 35px;
      width: 100%; }
    .loggedout-usp-container .geoleaderboards .zoom-widget {
      position: absolute;
      left: 0;
      top: 135px;
      width: 100%; }
      .loggedout-usp-container .geoleaderboards .zoom-widget ul {
        width: 608px;
        margin: 0 auto; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li {
        width: 150px; }
        .loggedout-usp-container .geoleaderboards .zoom-widget li:not(.active) span {
          cursor: pointer; }
          .loggedout-usp-container .geoleaderboards .zoom-widget li:not(.active) span:hover {
            background-color: rgba(0, 0, 0, 0.7); }
      .loggedout-usp-container .geoleaderboards .zoom-widget li span {
        padding: 63px 0 10px;
        height: 23px;
        background-image: url(../main/warsaw/loggedout/geoleaderboards-btn-icons.png);
        background-size: auto;
        display: block; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li.friends span {
        background-position: 0 0; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li.friends.active span {
        background-position: 0 -86px; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li.city span {
        background-position: -152px 0; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li.city.active span {
        background-position: -152px -86px; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li.country span {
        background-position: -304px 0; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li.country.active span {
        background-position: -304px -86px; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li.world span {
        background-position: -456px 0; }
      .loggedout-usp-container .geoleaderboards .zoom-widget li.world.active span {
        background-position: -456px -86px; }
  .loggedout-usp-container.geoleaderboard-loggedout .geoleaderboards {
    height: 1000px; }
  .loggedout-usp-container .video {
    padding-top: 60px;
    position: relative;
    text-align: center; }
    .loggedout-usp-container .video #uspVideo {
      margin-top: 32px;
      margin-bottom: 44px; }
      .loggedout-usp-container .video #uspVideo .overlay {
        position: relative;
        display: inline-block;
        cursor: pointer;
        width: 656px;
        height: 369px;
        background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/loggedout/movie-template-e7c745ff.jpg) 0 50% no-repeat;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out; }
        .loggedout-usp-container .video #uspVideo .overlay:after {
          content: "";
          width: 90px;
          height: 90px;
          background: url(../serverbrowserwarsaw/playbutton-circle.png);
          position: absolute;
          left: 50%;
          margin-left: -45px;
          top: 50%;
          margin-top: -45px;
          opacity: 0.8; }
        .loggedout-usp-container .video #uspVideo .overlay:hover:after {
          opacity: 0.9; }
  .loggedout-usp-container .footer {
    position: relative;
    text-align: center;
    padding-bottom: 50px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    .loggedout-usp-container .footer .buttons {
      padding-bottom: 46px; }
      .loggedout-usp-container .footer .buttons .btn {
        width: 318px;
        font-size: 19px; }
      .loggedout-usp-container .footer .buttons a.btn.withstack {
        padding: 0 0 0 50px;
        overflow: visible;
        position: relative;
        margin-left: 10px; }
        .loggedout-usp-container .footer .buttons a.btn.withstack img {
          position: absolute;
          left: 9px;
          top: -12px; }
    .loggedout-usp-container .footer p.learnmore {
      margin-bottom: 30px; }
    .loggedout-usp-container .footer .appicons .googleplay-logo {
      margin-left: 6px; }

.main-friends-container {
  position: absolute;
  bottom: 40px;
  width: 327px;
  height: 82px; }
  .main-friends-container .friends h3 {
    line-height: 16px;
    color: #fff;
    font-size: 14px;
    margin: 0;
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-align: center; }
  .main-friends-container .friends .outer-center {
    float: right;
    right: 50%;
    position: relative; }
  .main-friends-container .friends .inner-center {
    float: right;
    right: -50%;
    position: relative; }
  .main-friends-container .friends .clear {
    clear: both; }
  .main-friends-container .friends .avatars {
    float: left;
    padding: 0;
    padding-top: 6px; }
  .main-friends-container .friends .more-friends {
    float: left;
    text-align: center;
    font-size: 14px;
    font-family: Purista, sans-serif;
    width: 34px;
    height: 34px;
    overflow: hidden;
    line-height: 34px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #606870;
    margin-left: 3px; }

.dialog-bf4required .dialog-body {
  padding: 0;
  overflow: hidden; }
.dialog-bf4required.xp.download .dialog-content {
  height: 260px; }
  .dialog-bf4required.xp.download .dialog-content .info {
    height: 80px; }
.dialog-bf4required.xp.has-premium .dialog-content {
  height: 300px; }
  .dialog-bf4required.xp.has-premium .dialog-content .info {
    height: 130px; }
.dialog-bf4required.xp .dialog-content {
  height: 400px; }
  .dialog-bf4required.xp .dialog-content .main-friends-container {
    width: 560px;
    bottom: 70px; }
  .dialog-bf4required.xp .dialog-content .premium-xpack-info {
    position: absolute;
    bottom: 60px;
    width: 560px;
    text-align: center; }
  .dialog-bf4required.xp .dialog-content .info {
    height: 220px; }
    .dialog-bf4required.xp .dialog-content .info h3 {
      text-transform: uppercase;
      font-size: 20px;
      line-height: 18px;
      margin: 0;
      padding: 0;
      margin-top: 12px; }
    .dialog-bf4required.xp .dialog-content .info .buttons {
      position: absolute;
      bottom: 16px;
      left: 0;
      width: 560px; }
.dialog-bf4required.xp.xp1048576 {
  /* XP1 China Rising */ }
  .dialog-bf4required.xp.xp1048576 .dialog-content {
    background: url(../main/warsaw/game-dialog-bg-xp1.jpg) top center no-repeat; }
.dialog-bf4required.xp.xp524288 {
  /* XP0 Second Assault */ }
  .dialog-bf4required.xp.xp524288 .dialog-content {
    background: url(../main/warsaw/game-dialog-bg-xp0.jpg) top center no-repeat; }
.dialog-bf4required.xp.xp2097152 {
  /* XP2 Naval Strike */ }
  .dialog-bf4required.xp.xp2097152 .dialog-content {
    background: url(../main/warsaw/game-dialog-bg-xp2.jpg) top center no-repeat; }
.dialog-bf4required .dialog-content {
  width: 560px;
  height: 326px;
  background: url(../main/warsaw/game-dialog-bg.jpg) top center no-repeat;
  position: relative; }
  .dialog-bf4required .dialog-content .main-friends-container {
    width: 560px; }
  .dialog-bf4required .dialog-content .overlay {
    position: absolute;
    top: 164px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(left top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%); }
  .dialog-bf4required .dialog-content .info {
    z-index: 3;
    position: absolute;
    bottom: 0;
    height: 160px;
    text-align: center;
    width: 560px;
    left: 0; }
    .dialog-bf4required .dialog-content .info .buttons {
      position: absolute;
      bottom: 16px;
      left: 146px; }
      .dialog-bf4required .dialog-content .info .buttons .btn-primary {
        margin-right: 8px; }
    .dialog-bf4required .dialog-content .info h4 {
      font-weight: bold;
      font-family: Arial;
      font-size: 16px;
      text-transform: uppercase;
      line-height: 24px;
      margin: 0;
      padding: 0;
      margin-top: 12px; }
    .dialog-bf4required .dialog-content .info h5 {
      font-weight: normal;
      font-family: Arial;
      font-size: 14px;
      text-transform: none;
      line-height: 24px; }

#trialmessage {
  font-size: 14px;
  color: #ccc; }
  #trialmessage .expired-box {
    background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/trial/bg-gametime-786dcb2b.png);
    text-align: center;
    padding: 32px; }
    #trialmessage .expired-box h3 {
      font-size: 23px;
      line-height: 1; }
    #trialmessage .expired-box p {
      margin: 23px 0 13px 0; }
    #trialmessage .expired-box a.origin-upgrade {
      font-size: 22px;
      text-decoration: underline;
      display: inline-block;
      background-image: url(../odcstore/origin-storelogo-small.png);
      background-repeat: no-repeat;
      background-position: center right;
      line-height: 45px;
      padding-right: 45px; }
  #trialmessage .unexpired-box {
    background-image: url(//d34ymitoc1pg7m.cloudfront.net/bf4/trial/icon-gametime-cd01b474.png);
    background-repeat: no-repeat;
    background-position: 12px 12px;
    padding-left: 50px;
    font-family: Purista;
    font-size: 16px;
    line-height: 32px; }
    #trialmessage .unexpired-box .btn {
      float: right; }
    #trialmessage .unexpired-box a.origin-upgrade {
      margin-left: 12px;
      font-size: 16px;
      display: inline-block;
      text-decoration: underline;
      background-image: url(../odcstore/origin-storelogo-small.png);
      background-repeat: no-repeat;
      background-position: center right;
      background-size: contain;
      line-height: 35px;
      padding-right: 35px; }

.survey {
  font-size: 12px;
  margin-top: 16px; }
  .survey input {
    display: none; }
  .survey .checkboxicon {
    background: url(../main/poll-checkbox.png);
    width: 10px;
    height: 10px;
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 0 0;
    cursor: pointer; }
  .survey table.scores {
    color: #d5dde5;
    margin-top: 16px;
    margin-bottom: 8px; }
    .survey table.scores tr td {
      padding-right: 16px;
      margin-bottom: 8px;
      text-align: center; }
  .survey .description {
    color: #a8a8a8; }
    .survey .description .min {
      float: left; }
    .survey .description .max {
      float: right; }
  .survey .feedback textarea {
    width: 270px;
    max-width: 270px;
    height: 50px;
    overflow-y: auto;
    margin-top: 16px;
    margin-bottom: 8px; }
  .survey .feedback button {
    float: right; }

body.no-main-header header section.game-bar {
  display: None; }

.main-header {
  margin-bottom: 16px; }
  .main-header .persona .progress {
    width: 286px;
    bottom: 64px; }
  .main-header .persona .soldier {
    top: 52px; }
  .main-header .tiles .box {
    margin-top: 0; }
  .main-header .tiles .leaderboards .bg {
    background-size: cover; }
  .main-header .topstory {
    height: 354px; }
    .main-header .topstory .article > footer {
      width: auto;
      left: 0;
      right: 0;
      background: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/news/topnews-footer-bgr-87046153.png);
      background-size: cover;
      background-repeat: no-repeat;
      padding: 16px 16px 10px 16px; }
      .main-header .topstory .article > footer h5 {
        font-family: "Frutiger Bold", sans-serif;
        font-weight: bold; }
  .main-header .persona {
    height: 352px;
    margin-bottom: 0; }
    .main-header .persona .username {
      font-family: Frutiger, sans-serif;
      font-style: normal;
      font-weight: 400; }
    .main-header .persona .soldier {
      right: -70px; }

#recommended-server-row {
  position: relative;
  height: 122px;
  margin-bottom: 20px;
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }
  #recommended-server-row .map {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0; }
    #recommended-server-row .map:after {
      position: absolute;
      content: " ";
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(62, 128, 184, 0.5); }
  #recommended-server-row .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    /* IE10+ */
    background: linear, to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%;
    /* W3C */ }
    #recommended-server-row .content .names {
      position: absolute;
      left: 15px;
      top: 15px; }
    #recommended-server-row .content:hover + .player-info .server-info p.server {
      text-decoration: underline; }
  #recommended-server-row .player-info {
    z-index: 2;
    position: absolute;
    left: 15px;
    bottom: 15px; }
    #recommended-server-row .player-info .server-info {
      display: block;
      margin-left: 10px;
      padding-top: 5px;
      text-decoration: none; }
      #recommended-server-row .player-info .server-info:hover p.server {
        text-decoration: underline; }
      #recommended-server-row .player-info .server-info p {
        margin-top: 5px;
        font-size: 18px; }
        #recommended-server-row .player-info .server-info p.server {
          margin-top: 7px;
          font-size: 14px; }
  #recommended-server-row .btn-primary {
    position: absolute;
    right: 15px;
    bottom: 15px;
    min-width: 220px;
    z-index: 3; }

#main-loggedin-feed {
  margin-top: 0; }
  #main-loggedin-feed .wallpost-body {
    width: 546px; }

.bfh-loggedout .bfh-soldier {
  position: absolute;
  right: -135px;
  top: -125px;
  overflow: hidden; }
.bfh-loggedout .bfh-logo {
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/loggedout/bfh_logo-0cad73c0.png);
  background-repeat: no-repeat;
  width: 616px;
  height: 193px;
  margin-top: 24px; }
.bfh-loggedout .usp.bfh {
  min-height: 800px; }

.find-more-games {
  text-align: center;
  text-transform: uppercase;
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400; }

.main-nav-buttons {
  margin-bottom: 16px; }
  .main-nav-buttons .btn {
    width: 100%;
    font-size: 19px; }

.main-quickmatch-map-image {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%; }

.main-quickmatch-row {
  height: 236px;
  position: relative; }
  .main-quickmatch-row .span2 {
    position: relative; }
  .main-quickmatch-row .span3 {
    position: relative; }
  .main-quickmatch-row .players {
    width: 296px;
    position: relative;
    left: 16px; }
  .main-quickmatch-row .main-quickmatch-data {
    z-index: 6;
    position: relative;
    width: 100%;
    height: 236px; }
    .main-quickmatch-row .main-quickmatch-data .title {
      text-transform: uppercase;
      font-size: 16px;
      color: #fff;
      padding: 16px;
      font-family: Frutiger, sans-serif;
      font-style: normal;
      font-weight: 400; }
    .main-quickmatch-row .main-quickmatch-data .description {
      font-size: 14px;
      color: #FFF;
      padding: 0 0 10px 16px;
      width: 75%;
      position: relative;
      font-family: Arial, sans-serif;
      line-height: 1.25; }
    .main-quickmatch-row .main-quickmatch-data .gamemode {
      text-transform: uppercase;
      color: #FFF;
      font-size: 20px;
      font-weight: bold;
      padding: 0 0 10px 16px;
      font-family: Frutiger, sans-serif;
      font-style: normal;
      font-weight: 400; }
    .main-quickmatch-row .main-quickmatch-data .joinbutton {
      position: absolute;
      bottom: 16px;
      left: 16px; }
    .main-quickmatch-row .main-quickmatch-data .main-about-icon {
      position: absolute;
      top: 10px;
      right: 10px; }
    .main-quickmatch-row .main-quickmatch-data .heist-tutorial-box {
      width: 130px;
      height: 75px;
      background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/video/heist-video-tutorial-thumb-6f357e23.jpg);
      position: absolute;
      top: 10px;
      right: 10px;
      border: 1px solid #fff;
      cursor: pointer;
      box-shadow: 0 0 2px 0 #000; }
      .main-quickmatch-row .main-quickmatch-data .heist-tutorial-box .play-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        background-image: url(../video/playbutton.png);
        background-size: 40px 40px;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        margin-left: -20px;
        opacity: 0.7; }
      .main-quickmatch-row .main-quickmatch-data .heist-tutorial-box:hover .play-icon {
        opacity: 1;
        -webkit-filter: drop-shadow(0 0 7px #fff);
        -moz-filter: drop-shadow(0 0 7px #fff);
        -ms-filter: drop-shadow(0 0 7px #fff);
        -o-filter: drop-shadow(0 0 7px #fff);
        filter: drop-shadow(0 0 7px #fff); }
    .main-quickmatch-row .main-quickmatch-data .heist-tutorial-box ~ .description {
      width: 60%; }
  .main-quickmatch-row .span2 .heist-tutorial-box {
    width: 100px;
    height: 55px; }
    .main-quickmatch-row .span2 .heist-tutorial-box .play-icon {
      background-size: 30px 30px;
      width: 30px;
      height: 30px;
      margin-top: -15px;
      margin-left: -15px; }

.loggedout-usp-container .geoleaderboards .map.friends {
  background-image: url(../geoleaderboard/Leaderboards-Friends.jpg); }
.loggedout-usp-container .geoleaderboards .map.city {
  background-image: url(../geoleaderboard/Leaderboards-Stockholm.jpg); }
.loggedout-usp-container .geoleaderboards .map.country {
  background-image: url(../geoleaderboard/Leaderboards-Sweden.jpg); }
.loggedout-usp-container .geoleaderboards .map.world {
  background-image: url(../geoleaderboard/Leaderboards-World.jpg); }
.loggedout-usp-container .usp h1.headline {
  font-family: Frutiger, sans-serif; }
.loggedout-usp-container .usp h2.subheading {
  font-family: Frutiger, sans-serif; }

.gradientbg {
  position: absolute;
  z-index: 5;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.73) 17%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.23) 73%, rgba(0, 0, 0, 0) 99%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(17%, rgba(0, 0, 0, 0.73)), color-stop(48%, rgba(0, 0, 0, 0.45)), color-stop(73%, rgba(0, 0, 0, 0.23)), color-stop(99%, rgba(0, 0, 0, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.73) 17%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.23) 73%, rgba(0, 0, 0, 0) 99%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(0, 0, 0, 0.73) 17%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.23) 73%, rgba(0, 0, 0, 0) 99%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(0, 0, 0, 0.73) 17%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.23) 73%, rgba(0, 0, 0, 0) 99%);
  /* IE10+ */
  background: linear, 135deg, rgba(0, 0, 0, 0.73) 17%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.23) 73%, rgba(0, 0, 0, 0) 99%;
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba000000', endColorstr='#00000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

.persona-info-box-container {
  position: relative; }

#main-profile-customize-dropdown-button {
  z-index: 4;
  position: absolute;
  bottom: 15px;
  left: 15px; }
  #main-profile-customize-dropdown-button .btn {
    width: 287px;
    padding-left: 10px;
    white-space: nowrap;
    padding-right: 10px; }
    #main-profile-customize-dropdown-button .btn img {
      position: relative;
      top: -3px;
      right: -2px;
      opacity: 0.85; }
    #main-profile-customize-dropdown-button .btn:hover img {
      opacity: 1; }

#profile-custom-dropdown ul {
  list-style: none;
  min-width: 150px; }
  #profile-custom-dropdown ul li:first-child a {
    border-bottom: 0; }
  #profile-custom-dropdown ul li a {
    font-size: 12px;
    line-height: 34px;
    padding: 0 16px;
    color: #fff;
    border-top: 1px solid #3c4249;
    font-weight: normal;
    display: block;
    text-transform: uppercase; }
    #profile-custom-dropdown ul li a:hover {
      background: rgba(255, 255, 255, 0.1); }

#main-profile-customize-dropdown-button + .popover.visible {
  border-top: 0;
  margin-right: 16px;
  width: 286px; }
#main-profile-customize-dropdown-button + .popover .popover-body {
  border: 1px solid #d5dde5;
  background: #0a0e14; }

#alpha-trial p {
  line-height: 21px; }
  #alpha-trial p:not(last-of-type) {
    margin-bottom: 1em; }
#alpha-trial textarea {
  width: 100%;
  height: 300px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
#alpha-trial a {
  text-decoration: underline; }

html.ugm-showing #serverbrowser {
  padding-bottom: 60px; }

.icon-servertype {
  width: 11px;
  height: 16px; }

.icon-servertype-1 {
  background: url(../serverguide/icon-rank-official.png) top left no-repeat; }

.icon-servertype-2 {
  background: url(../serverguide/icon-rank-ranked.png) top left no-repeat; }

.icon-servertype-4 {
  background: url(../serverguide/icon-rank-unranked.png) top left no-repeat; }

.icon-servertype-8 {
  background: url(../serverguide/icon-rank-private.png) top left no-repeat; }

.server-row.active .icon-servertype-1 {
  background: url(../serverguide/icon-rank-official-dark.png) top left no-repeat; }
.server-row.active .icon-servertype-2 {
  background: url(../serverguide/icon-rank-ranked-dark.png) top left no-repeat; }
.server-row.active .icon-servertype-4 {
  background: url(../serverguide/icon-rank-unranked-dark.png) top left no-repeat; }
.server-row.active .icon-servertype-8 {
  background: url(../serverguide/icon-rank-private-dark.png) top left no-repeat; }

.serverguide-open-filter-box {
  position: relative;
  top: 2px; }

#serverbrowser #server-browser-refresh-global {
  padding: 1px 8px 0 12px;
  margin: 6px 0 0; }
#serverbrowser header button {
  margin: 4px 0 0 10px; }
#serverbrowser .serverbrowser-platform-filter-select {
  float: right; }
#serverbrowser .arrow-container {
  position: relative; }
  #serverbrowser .arrow-container .outerarrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 30px; }
  #serverbrowser .arrow-container .arrow {
    position: absolute;
    top: 50%;
    left: 0%;
    margin-top: -3px;
    margin-left: 4px;
    border: 6px solid transparent;
    border-top-color: #fff;
    opacity: 0.3;
    -webkit-transition: all 0.1s ease-out, opacity 0;
    -moz-transition: all 0.1s ease-out, opacity 0;
    transition: all 0.1s ease-out, opacity 0;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center; }
  #serverbrowser .arrow-container:hover .arrow, #serverbrowser .arrow-container.active .arrow {
    opacity: 0.75; }
#serverbrowser .server-filter {
  margin-bottom: 16px; }
  #serverbrowser .server-filter.collapsed {
    padding-right: 28px; }
    #serverbrowser .server-filter.collapsed > footer {
      width: 27px;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 0; }
#serverbrowser .no-results {
  margin-top: 16px;
  text-align: center; }
  #serverbrowser .no-results h2 {
    font-size: 2em; }
#serverbrowser [data-sort] {
  text-decoration: none; }
#serverbrowser .sort-desc:after {
  content: "▲";
  padding-left: 2px;
  text-decoration: none; }
#serverbrowser .sort-asc:after {
  content: "▼";
  padding-left: 2px;
  text-decoration: none; }
#serverbrowser #servers {
  margin-top: 8px; }
#serverbrowser .servers-list thead th {
  line-height: 24px;
  padding: 0 6px; }
#serverbrowser .servers-list thead .players {
  width: 55px; }
#serverbrowser .servers-list thead .ping {
  width: 40px; }
#serverbrowser .servers-list thead .server-icons {
  width: 22px; }
#serverbrowser .servers-list:not(.loading) tfoot {
  display: none; }
#serverbrowser .servers-list tfoot th {
  padding: 16px;
  text-align: center; }
#serverbrowser .servers-list tr .icon {
  background: url(../serverguide/icons_server.png) top left no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0; }
  #serverbrowser .servers-list tr .icon.punkbuster {
    background-position: -141px -166px; }
    #serverbrowser .servers-list tr .icon.punkbuster.on {
      background-position: -142px -128px; }
  #serverbrowser .servers-list tr .icon.ranked {
    background-position: -68px -167px; }
    #serverbrowser .servers-list tr .icon.ranked.on {
      background-position: -68px -128px; }
  #serverbrowser .servers-list tr .icon.type {
    background-position: -214px -128px; }
    #serverbrowser .servers-list tr .icon.type.normal {
      background-position: -214px -167px; }
#serverbrowser .servers-list .server-icons {
  padding: 0 0 0 6px; }
#serverbrowser .servers-list .active .icon.punkbuster {
  background-position: -142px -128px; }
  #serverbrowser .servers-list .active .icon.punkbuster.on {
    background-position: -141px -166px; }
#serverbrowser .servers-list .active .icon.ranked {
  background-position: -68px -128px; }
  #serverbrowser .servers-list .active .icon.ranked.on {
    background-position: -68px -167px; }
#serverbrowser .servers-list img {
  vertical-align: middle; }
#serverbrowser .servers-list tbody .server-row {
  height: 49px;
  cursor: pointer; }
  #serverbrowser .servers-list tbody .server-row:active:not(.active) > td {
    background-color: rgba(0, 0, 0, 0.7); }
  #serverbrowser .servers-list tbody .server-row .favorite {
    width: 20px;
    overflow: hidden;
    padding-right: 0; }
  #serverbrowser .servers-list tbody .server-row .star {
    display: block;
    width: 20px;
    margin: 0 auto;
    padding: 0; }
    #serverbrowser .servers-list tbody .server-row .star:after {
      position: relative;
      z-index: 1;
      display: none;
      content: "★";
      font-size: 22px;
      color: rgba(255, 255, 255, 0.3); }
  #serverbrowser .servers-list tbody .server-row .server-icons {
    padding: 10px 0 0 9px; }
  #serverbrowser .servers-list tbody .server-row:hover .star:after, #serverbrowser .servers-list tbody .server-row .star.starred:after {
    display: block;
    color: rgba(255, 255, 255, 0.3); }
  #serverbrowser .servers-list tbody .server-row .star.starred:after, #serverbrowser .servers-list tbody .server-row .star:hover:after {
    color: white; }
  #serverbrowser .servers-list tbody .server-row.loading-info td.map .loader {
    display: block; }
  #serverbrowser .servers-list tbody .server-row td {
    line-height: 28px;
    font-size: 12px;
    padding: 6px; }
    #serverbrowser .servers-list tbody .server-row td:first-child {
      width: 18px; }
    #serverbrowser .servers-list tbody .server-row td.map {
      width: 48px;
      line-height: 1;
      position: relative; }
      #serverbrowser .servers-list tbody .server-row td.map .loader {
        position: absolute;
        top: 50%;
        left: 21px;
        margin-top: -13px;
        display: none; }
      #serverbrowser .servers-list tbody .server-row td.map .map-thumb {
        width: auto; }
    #serverbrowser .servers-list tbody .server-row td.server {
      min-width: 50px;
      max-width: 480px;
      overflow: hidden; }
      #serverbrowser .servers-list tbody .server-row td.server .server-name {
        line-height: 16px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      #serverbrowser .servers-list tbody .server-row td.server .server-details {
        line-height: 12px;
        margin-top: 2px;
        font-size: 11px;
        color: #a8a8a8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
        #serverbrowser .servers-list tbody .server-row td.server .server-details .country-flag {
          float: left;
          margin-top: -2px;
          margin-right: 5px; }
      #serverbrowser .servers-list tbody .server-row td.server .friends-playing {
        position: absolute;
        line-height: 48px;
        top: 0;
        right: 8px;
        bottom: 0; }
    #serverbrowser .servers-list tbody .server-row td.players {
      text-align: center;
      width: 55px; }
    #serverbrowser .servers-list tbody .server-row td.ping {
      color: #a8a8a8;
      font-size: 11px;
      text-align: center;
      width: 40px; }
    #serverbrowser .servers-list tbody .server-row td.server-icons {
      width: 22px; }

html:not(.is-touch) #serverbrowser .servers-list tbody .server-row.active {
  -webkit-filter: drop-shadow(0 0 7px #e0f4f8);
  -moz-filter: drop-shadow(0 0 7px #e0f4f8);
  -ms-filter: drop-shadow(0 0 7px #e0f4f8);
  -o-filter: drop-shadow(0 0 7px #e0f4f8);
  filter: drop-shadow(0 0 7px #e0f4f8); }
  html:not(.is-touch) #serverbrowser .servers-list tbody .server-row.active .server-name {
    font-weight: bold; }
  html:not(.is-touch) #serverbrowser .servers-list tbody .server-row.active .star:after {
    color: rgba(0, 0, 0, 0.3); }
  html:not(.is-touch) #serverbrowser .servers-list tbody .server-row.active .star.starred:after, html:not(.is-touch) #serverbrowser .servers-list tbody .server-row.active .star:hover:after {
    color: rgba(0, 0, 0, 0.9) !important; }

.is-touch #serverbrowser aside .action-buttons-container .favorite-toggle {
  margin-top: 8px; }
  .is-touch #serverbrowser aside .action-buttons-container .favorite-toggle.starred .add-text {
    display: none; }
  .is-touch #serverbrowser aside .action-buttons-container .favorite-toggle.starred .remove-text {
    display: inline; }
  .is-touch #serverbrowser aside .action-buttons-container .favorite-toggle .remove-text {
    display: none; }

#serverbrowser-show .btn.join {
  margin-top: 8px; }
#serverbrowser-show .settings {
  margin-top: -10px; }
  #serverbrowser-show .settings li {
    font-size: 12px;
    color: #a8a8a8;
    display: block;
    margin-top: 10px;
    line-height: 16px;
    clear: both; }
    #serverbrowser-show .settings li b {
      max-width: 100px;
      padding-right: 5px;
      color: #fff;
      float: right;
      text-align: left;
      margin-right: 5px;
      width: 85px; }
    #serverbrowser-show .settings li .icon {
      vertical-align: middle;
      margin-top: -4px;
      margin-right: 2px; }
#serverbrowser-show .quick-info {
  position: relative;
  height: 160px;
  width: auto;
  overflow: hidden;
  background-position: center center; }
  #serverbrowser-show .quick-info:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-linear-gradient( rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient( rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%); }
  #serverbrowser-show .quick-info .holder {
    position: absolute;
    padding: 16px;
    bottom: 0; }
  #serverbrowser-show .quick-info .player-count, #serverbrowser-show .quick-info .map-info li {
    padding: 0 5px; }
  #serverbrowser-show .quick-info li {
    height: 18px;
    line-height: 18px;
    float: left; }
  #serverbrowser-show .quick-info .player-count {
    font-size: 18px;
    margin-bottom: 2px; }
  #serverbrowser-show .quick-info .holder ul {
    float: left; }
    #serverbrowser-show .quick-info .holder ul.friends li {
      padding: 0 5px; }
  #serverbrowser-show .quick-info .map-info {
    color: #eee;
    font-size: 12px; }
    #serverbrowser-show .quick-info .map-info img {
      vertical-align: middle; }
#serverbrowser-show #serverbrowser-show-serverjoin {
  margin-top: 5px; }
#serverbrowser-show .box {
  margin-top: 8px; }
#serverbrowser-show footer {
  padding: 0; }
  #serverbrowser-show footer a {
    padding: 16px;
    text-decoration: none;
    display: block; }
  #serverbrowser-show footer:hover {
    background-color: rgba(7, 7, 7, 0.6); }

#serverbrowser-recommended-servers ul {
  overflow: hidden; }
  #serverbrowser-recommended-servers ul.row-tight .span2.server {
    width: 330px; }
#serverbrowser-recommended-servers .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -16px;
  margin-top: -16px; }
#serverbrowser-recommended-servers .toggle {
  position: relative;
  overflow: hidden;
  cursor: pointer; }
  #serverbrowser-recommended-servers .toggle .serverbrowser-toggler {
    float: right;
    position: absolute;
    top: 1px;
    right: 10px;
    color: #aaa; }
    #serverbrowser-recommended-servers .toggle .serverbrowser-toggler:after {
      float: right;
      text-align: center;
      content: "-";
      padding-right: 3px;
      font-size: 21px; }
  #serverbrowser-recommended-servers .toggle:hover .serverbrowser-toggler {
    color: #fff; }
#serverbrowser-recommended-servers.collapsed .toggle .serverbrowser-toggler {
  top: 2px; }
  #serverbrowser-recommended-servers.collapsed .toggle .serverbrowser-toggler:after {
    float: right;
    text-align: center;
    content: "+";
    padding-right: 0;
    font-size: 21px; }
#serverbrowser-recommended-servers .server {
  height: 160px;
  position: relative;
  display: table;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden; }
  #serverbrowser-recommended-servers .server img {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 1;
    width: 100%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease; }
    #serverbrowser-recommended-servers .server img.show-on-load {
      opacity: 0; }
  #serverbrowser-recommended-servers .server:before {
    position: absolute;
    z-index: 1;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-linear-gradient( rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient( rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%); }
  #serverbrowser-recommended-servers .server > header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 8px 16px;
    min-height: 37px;
    z-index: 2; }
    #serverbrowser-recommended-servers .server > header .recommendation {
      line-height: 14px;
      font-size: 12px;
      color: #a8a8a8; }
    #serverbrowser-recommended-servers .server > header .server-name {
      color: #fff;
      font-size: 14px;
      line-height: 22px;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
    #serverbrowser-recommended-servers .server > header .server-details {
      line-height: 18px;
      font-size: 12px;
      color: #a8a8a8; }
  #serverbrowser-recommended-servers .server button {
    margin-left: 8px;
    bottom: 16px;
    right: 16px;
    position: absolute;
    z-index: 2; }
  #serverbrowser-recommended-servers .server > .server-info {
    position: absolute;
    z-index: 2;
    font-size: 11px;
    left: 16px;
    bottom: 22px;
    color: #fff; }
    #serverbrowser-recommended-servers .server > .server-info p {
      height: 32px;
      position: relative;
      top: 7px;
      line-height: 16px;
      font-size: 12px;
      display: table-cell;
      vertical-align: bottom; }
      #serverbrowser-recommended-servers .server > .server-info p span {
        display: block; }
        #serverbrowser-recommended-servers .server > .server-info p span.map {
          white-space: nowrap;
          width: 126px;
          overflow: hidden;
          text-overflow: ellipsis; }
  #serverbrowser-recommended-servers .server > .players {
    position: absolute;
    z-index: 2;
    top: 61px;
    left: 16px; }
    #serverbrowser-recommended-servers .server > .players .avatar {
      width: 32px;
      height: 32px;
      float: left;
      margin-right: 2px; }

#serverbrowser-filters .toggle {
  font-family: Arial, sans-serif !important;
  position: relative;
  overflow: hidden;
  padding: 0 16px;
  cursor: pointer;
  font-size: 12px;
  color: #aaa;
  line-height: 32px;
  margin-right: 37px; }
  #serverbrowser-filters .toggle em {
    text-transform: uppercase;
    background: url(../base/shared/search-icon-white.png) 0 1px no-repeat;
    padding-left: 18px;
    color: #fff; }
  #serverbrowser-filters .toggle:hover .serverbrowser-toggler {
    color: #fff; }
  #serverbrowser-filters .toggle #custom-filter-list-content {
    display: inline-block;
    max-width: 725px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top; }
  #serverbrowser-filters .toggle ul, #serverbrowser-filters .toggle li {
    display: inline;
    margin: 0;
    padding: 0; }
  #serverbrowser-filters .toggle ul {
    list-style: none; }
  #serverbrowser-filters .toggle li {
    margin: 0 6px 0 0;
    text-transform: none; }
  #serverbrowser-filters .toggle .outerarrow {
    top: 1px; }
#serverbrowser-filters .serverbrowser-refresh {
  cursor: pointer;
  font-size: 21px;
  line-height: 32px;
  padding: 0;
  height: 32px;
  width: 36px;
  text-align: center;
  float: right;
  color: #a8a8a8; }
  #serverbrowser-filters .serverbrowser-refresh:hover {
    color: #fff; }
#serverbrowser-filters.expanded .toggle .arrow {
  margin-top: -9px;
  border-top-color: transparent;
  border-bottom-color: #fff; }
#serverbrowser-filters.expanded .filters-container {
  display: block; }
#serverbrowser-filters.expanded.advanced-expanded .advanced-filters {
  display: block; }
#serverbrowser-filters.expanded.advanced-expanded .button-row .arrow {
  margin-top: -9px;
  border-top-color: transparent;
  border-bottom-color: #fff; }
#serverbrowser-filters .btn-primary {
  margin-left: 10px; }
#serverbrowser-filters .filters-container, #serverbrowser-filters .advanced-filters {
  display: none; }
#serverbrowser-filters .box-content {
  overflow: hidden;
  position: relative; }
  #serverbrowser-filters .box-content .serverbrowser-filter {
    padding: 2px 0;
    width: 132px;
    overflow: hidden;
    border-top: 1px solid #dadad9;
    float: left;
    border-right: 1px solid #e1e1e1;
    height: 100%;
    position: relative;
    background: #ececec;
    border-top-width: 0; }
  #serverbrowser-filters .box-content .filterextra .serverbrowser-filter {
    width: 218px; }
#serverbrowser-filters .row-tight {
  overflow: hidden;
  padding-bottom: 16px; }
#serverbrowser-filters .filter-col {
  margin-top: 0;
  padding-bottom: 1000px;
  margin-bottom: -1000px; }
  #serverbrowser-filters .filter-col.filter-player-settings {
    width: 396px; }
  #serverbrowser-filters .filter-col .filter-col {
    margin-top: 1px; }

section.filter {
  margin-bottom: 16px; }
  section.filter:last-child {
    margin-bottom: 0; }
  section.filter:after {
    clear: both;
    content: "";
    display: table; }
  section.filter h3 {
    color: #8A8A8A;
    font-size: 13px;
    line-height: 20px;
    height: 20px; }
  section.filter ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    section.filter ul li {
      min-height: 20px;
      font-size: 12px;
      margin: 0 0 4px 0;
      padding: 0;
      cursor: pointer;
      padding-left: 20px;
      background: url(../serverbrowserwarsaw/icon-checkbox-4.png) no-repeat;
      line-height: 14px;
      -webkit-transition: color 0.2s ease;
      -moz-transition: color 0.2s ease;
      transition: color 0.2s ease;
      /* -1 */
      background-position: 0 -297px; }
      section.filter ul li[data-toggle="section"] {
        font-family: Purista, sans-serif;
        font-style: normal;
        font-weight: 600;
        text-transform: uppercase;
        color: #8A8A8A !important;
        font-size: 13px;
        line-height: 1.2; }
      section.filter ul li.plain {
        padding-left: 0px;
        background: none; }
      section.filter ul li:hover {
        background-position: 0 -396px; }
        section.filter ul li:hover.on {
          background-position: 0 -97px; }
      section.filter ul li.on {
        /* 1 */
        background-position: 0 4px;
        color: #d1ffbe; }
      section.filter ul li.off {
        background-position: 0 -796px;
        color: #ffcacf; }
      section.filter ul li.filter-range {
        min-height: 20px; }
        section.filter ul li.filter-range input {
          padding: 1px 2px;
          text-align: center;
          width: 65px; }
  section.filter label {
    cursor: pointer;
    position: relative;
    top: 2px; }
    section.filter label.premium {
      display: inline-block;
      background: url(../premium/icon-p-s.png) right center no-repeat;
      padding-right: 18px; }
    section.filter label img.icon {
      margin: -3px 4px 0px -4px;
      vertical-align: middle; }
  section.filter a.popup {
    position: relative;
    top: 2px; }
    section.filter a.popup:after {
      clear: both;
      content: "";
      display: table; }
  section.filter select, section.filter input[type="checkbox"] {
    display: none; }
  section.filter input[disabled] + label {
    opacity: 0.5; }
  section.filter #serverbrowser-open-advanced-link, section.filter #serverbrowser-open-region-link {
    float: none;
    margin: 0;
    padding: 0;
    top: 2px; }
  section.filter.gameexpansion-filter li {
    margin-bottom: 16px; }
  section.filter.split ul li {
    width: 157px;
    float: left;
    margin-right: 4px; }
  section.filter .filter-range label {
    display: inline-block;
    max-width: 185px; }
  section.filter.xpack-filter .section label {
    float: left; }
    section.filter.xpack-filter .section label img.icon {
      margin-top: 0;
      float: left; }

.popup-serveradvancedfilter-value.bool-filter {
  position: relative;
  clear: both;
  width: 100%; }

#serverbrowser-filterstring em {
  margin-right: 5px;
  text-decoration: none;
  font-style: normal; }
#serverbrowser-filterstring strong {
  text-decoration: none;
  font-style: normal; }
#serverbrowser-filterstring label {
  margin-left: 3px;
  margin-right: 3px; }

#server-page > header {
  margin-bottom: 8px; }
  #server-page > header p {
    margin-bottom: 16px; }
  #server-page > header button {
    width: 220px;
    display: block; }
    #server-page > header button + button {
      margin-top: 8px; }
#server-page .ping-bar {
  margin-bottom: -1px; }
#server-page h5 {
  text-transform: none; }

#server-page-map-rotation .scroll-area {
  overflow: hidden; }
#server-page-map-rotation table {
  margin-top: 1px;
  margin-bottom: 0; }
#server-page-map-rotation td {
  vertical-align: top;
  width: 178px;
  height: 130px;
  margin-bottom: 8px;
  padding: 1px; }
  #server-page-map-rotation td.active {
    color: black;
    background-color: white;
    background-image: -webkit-linear-gradient(top, #c9c9c9, rgba(200, 200, 200, 0) 40%);
    background-image: linear-gradient(to bottom, #c9c9c9, rgba(200, 200, 200, 0) 40%);
    box-shadow: 0 0 7px 0 #e0f4f8; }
    #server-page-map-rotation td.active .xp-icon {
      border: 1px solid #000; }
  #server-page-map-rotation td:last-child {
    width: auto; }
  #server-page-map-rotation td .map-image {
    width: auto;
    min-width: 146px;
    height: 79px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover; }
  #server-page-map-rotation td .xp-icon {
    float: left;
    margin-top: -34px;
    margin-left: 6px; }
  #server-page-map-rotation td p {
    padding: 5px 14px 4px;
    font-size: 12px;
    line-height: 16px; }
    #server-page-map-rotation td p span {
      color: #a8a8a8; }
  #server-page-map-rotation td.xpack p {
    padding-left: 32px; }
#server-page-map-rotation .no-maps-rotation {
  vertical-align: middle;
  text-align: center; }
#server-page-map-rotation .jspHorizontalBar .jspTrack {
  background: rgba(0, 0, 0, 0.7); }

#server-page-settings {
  margin-bottom: 16px;
  overflow: hidden; }
  #server-page-settings .span2 .box-content {
    padding-bottom: 500px;
    margin-bottom: -484px; }
  #server-page-settings dl {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    padding-bottom: 6px;
    margin-bottom: 7px; }
    #server-page-settings dl dt {
      float: left;
      color: #a8a8a8;
      text-transform: uppercase; }
    #server-page-settings dl dd {
      float: right; }
      #server-page-settings dl dd .icon {
        vertical-align: top;
        margin-top: -1px; }
    #server-page-settings dl:last-child {
      border-bottom: 0;
      margin: 0;
      padding: 0; }

#server-page-join-buttons {
  text-align: center; }
  #server-page-join-buttons .btn + .btn {
    margin-left: 8px; }

#server-page-slot-info {
  margin-top: 6px; }
  #server-page-slot-info dl {
    font-size: 11px;
    padding-bottom: 3px; }
    #server-page-slot-info dl dt {
      float: left;
      color: #a8a8a8;
      text-transform: uppercase; }
    #server-page-slot-info dl dd {
      float: right; }
    #server-page-slot-info dl:last-child {
      border-bottom: 0;
      margin: 0;
      padding: 0; }

#server-page-info .box header {
  text-align: center; }
#server-page-info .box section {
  height: 55px;
  padding: 8px;
  text-align: center; }
  #server-page-info .box section h5 {
    margin: 0;
    font-size: 22px;
    line-height: 24px; }
#server-page-info .icon-servertype-large {
  width: 19px;
  height: 27px;
  margin-bottom: -8px; }
#server-page-info .icon-servertype-large-1 {
  background: url(../serverguide/icon-rank-official-l.png) top left no-repeat; }
#server-page-info .icon-servertype-large-2 {
  background: url(../serverguide/icon-rank-ranked-l.png) top left no-repeat; }
#server-page-info .icon-servertype-large-4 {
  background: url(../serverguide/icon-rank-unranked-l.png) top left no-repeat; }
#server-page-info .icon-servertype-large-8 {
  background: url(../serverguide/icon-rank-private-l.png) top left no-repeat; }

#server-page-gamemode {
  padding: 8px 16px;
  margin-bottom: 1px; }
  #server-page-gamemode p {
    font-size: 14px;
    line-height: 14px; }
  #server-page-gamemode .flag {
    margin: 0 8px -1px 8px; }
  #server-page-gamemode .common-gameicon-hori {
    margin-bottom: -2px; }
  #server-page-gamemode .common-gameexpansion {
    margin-bottom: -2px; }

/* serverbrowser component CSS resource */
.serverbrowser-invite-item {
  clear: both;
  height: 26px;
  line-height: 26px;
  margin-bottom: 6px; }

#serverbrowser-serverfilter-configure .base-link {
  font-weight: normal; }

.serverbrowser-invite-avatar, .serverbrowser-invite-username {
  float: left; }

.serverbrowser-invite-status {
  float: right;
  text-align: right;
  width: 100px; }

.serverbrowser-invite-list-container {
  margin-top: 16px; }

.serverbrowser-invite-username {
  width: 160px;
  margin-left: 6px;
  overflow: hidden; }

.serverbrowser-invite-status {
  width: 100px;
  font-size: 11px; }

.serverbrowser-invite-text {
  display: block;
  width: 75px;
  text-align: left;
  float: left;
  padding-left: 6px; }

.serverbrowser-invite-img-waiting, .serverbrowser-invite-img-joining, .serverbrowser-invite-img-declined {
  float: left;
  width: 16px;
  height: 16px;
  margin-top: 5px; }

.serverbrowser-invite-img-waiting {
  background: url(../serverguide/invited_loader.gif); }

.serverbrowser-invite-img-joining {
  margin-left: 2px;
  margin-top: 8px;
  width: 11px;
  height: 11px;
  background: url(../serverguide/invited_status.png); }

.serverbrowser-invite-img-declined {
  margin-top: 8px;
  width: 11px;
  height: 11px;
  background: url(../serverguide/invited_status.png) 0 11px; }

#serverbrowser-search-container {
  width: 992px;
  position: relative;
  top: 122px;
  height: 33px;
  margin: 0 auto; }

#serverbrowser-search {
  width: 405px;
  height: 34px;
  clear: both;
  background: white url(../serverguide/search.png); }

#serverbrowser-search-input {
  background: url(../base/shared/search-icon-white.png) 5px 10px no-repeat;
  width: 123px;
  font-size: 14px;
  padding: 8px 8px 8px 23px; }

#serverbrowser-search-button {
  background: url(../serverguide/search-button.png);
  float: left;
  width: 21px;
  height: 28px;
  border: 0;
  cursor: pointer;
  margin-top: 3px; }

#serverbrowser-content {
  width: 100%; }
  #serverbrowser-content .common-box-inner-border {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-right-width-value: 1px;
    border-left-width-value: 1px; }

.serverbrowser-selectable span {
  text-shadow: none;
  font-weight: normal;
  font-size: 12px;
  margin-left: 20px; }
.serverbrowser-selectable.serverbrowser-include span, .serverbrowser-selectable.serverbrowser-noinclude span {
  font-weight: bold; }

#serverbrowser-apply-filters .serverbrowser-filter-search {
  border-top: 0;
  height: 49px;
  width: 440px;
  text-align: left;
  position: absolute;
  bottom: -2px; }
  #serverbrowser-apply-filters .serverbrowser-filter-search h1 {
    position: relative;
    top: 17px;
    float: left;
    margin-left: 14px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase; }
  #serverbrowser-apply-filters .serverbrowser-filter-search input {
    position: relative;
    top: -3px;
    float: left;
    margin-left: 10px; }

#serverbrowser-filters .serverbrowser-filter-game {
  width: 227px;
  height: 160px; }
#serverbrowser-filters .serverbrowser-filter-search {
  width: 227px;
  height: 100px; }
#serverbrowser-filters .filtergameexpansionvenice {
  float: left;
  width: 228px; }
#serverbrowser-filters .filtergameexpansion {
  float: left;
  margin-left: 16px;
  width: 184px; }
#serverbrowser-filters .serverbrowser-filter-gamemode {
  width: 403px;
  border-right: none;
  min-height: 0; }
#serverbrowser-filters .serverbrowser-filter-region {
  height: 136px;
  width: 227px; }
#serverbrowser-filters .serverbrowser-filter-slots {
  width: 139px;
  position: relative;
  height: 404px; }
#serverbrowser-filters .serverbrowser-filter-gametype {
  height: 49px; }
#serverbrowser-filters .serverbrowser-filter-extra {
  min-height: 404px;
  height: 100%; }
#serverbrowser-filters .serverbrowser-filter-map {
  border-right: 0;
  width: 403px;
  height: 267px;
  padding: 0; }
#serverbrowser-filters .serverbrowser-filter-mapmode-wrapper {
  border-right: 0;
  width: 403px;
  max-height: 428px;
  overflow-y: auto;
  min-height: 328px;
  /* height: 235px; */
  float: left;
  background: #ececec; }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-name {
  width: 100%;
  height: 30px;
  float: left;
  position: relative;
  clear: both; }
  #serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-name h1 {
    font-weight: bold;
    text-shadow: none;
    float: left;
    font-size: 11px;
    margin-right: 0;
    margin-top: 12px;
    text-align: left;
    font-family: Tahoma, Arial, sans-serif;
    margin-left: 16px;
    clear: both;
    position: relative;
    text-transform: uppercase;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text; }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables {
  width: 100%;
  position: relative;
  padding-bottom: 3px;
  width: 100%;
  position: relative; }
#serverbrowser-filters .serverbrowser-filter.serverbrowser-filter-map .serverbrowser-filter-selectables {
  padding-bottom: 4px; }
  #serverbrowser-filters .serverbrowser-filter.serverbrowser-filter-map .serverbrowser-filter-selectables .serverbrowser-selectable {
    /*width: 187px;*/
    height: 21px;
    line-height: 21px;
    position: relative;
    margin-left: 16px;
    margin-top: 2px;
    width: 184px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    clear: none; }
    #serverbrowser-filters .serverbrowser-filter.serverbrowser-filter-map .serverbrowser-filter-selectables .serverbrowser-selectable.multicolumn {
      float: left;
      clear: none; }
      #serverbrowser-filters .serverbrowser-filter.serverbrowser-filter-map .serverbrowser-filter-selectables .serverbrowser-selectable.multicolumn.second {
        margin-left: 10px; }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-label {
  font-size: 14px;
  font-weight: bold;
  text-shadow: #fff 0 1px 1px;
  float: left;
  margin-right: 8px;
  margin-top: 12px; }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable {
  width: 85%;
  line-height: 16px;
  text-align: left;
  float: left;
  cursor: pointer;
  position: relative;
  clear: both;
  margin: 0 0 2px 16px;
  display: block; }
  #serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-selectable-small {
    width: 41px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin: 8px 34px 8px 0; }

/*#serverbrowser-filters .filtergameexpansionvenice .serverbrowser-filter.serverbrowser-filter-game {*/
/*min-height: 310px;*/
/*}*/
.serverbrowser-selectable {
  font-size: 13px;
  font-weight: normal;
  text-shadow: #fff 0 1px 1px;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none; }

#serverbrowser-filters.serverbrowser-filter-map .serverbrowser-filter-selectables .serverbrowser-selectable span {
  top: 1px;
  display: block;
  width: 120px; }
#serverbrowser-filters .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-exclude:hover span {
  color: #353535;
  font-weight: bold; }
#serverbrowser-filters .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-disabled span {
  color: #c7c7c7; }
#serverbrowser-filters.serverbrowser-filter-map .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-disabled img {
  opacity: 0.3;
  filter: alpha(opacity=30); }
#serverbrowser-filters .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-selectable-small span {
  margin-left: 0; }
#serverbrowser-filters .serverbrowser-filter-game.serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable {
  height: 51px; }
  #serverbrowser-filters .serverbrowser-filter-game.serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-selectable-game-bfbc2 .ticbox {
    top: 10px; }
  #serverbrowser-filters .serverbrowser-filter-game.serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-selectable-game-bfbc2nam .ticbox {
    top: 18px; }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable .serverbrowser-selectable-background-icon {
  position: relative;
  z-index: 0;
  width: 150px;
  left: 20px; }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-exclude .serverbrowser-selectable-background-icon {
  opacity: 0.7;
  filter: alpha(opacity=70); }
  #serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-exclude .serverbrowser-selectable-background-icon:hover {
    opacity: 1;
    filter: alpha(opacity=100); }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable#serverbrowser-squaddeathmatch .serverbrowser-selectable-background-icon {
  top: 7px; }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable#serverbrowser-squadrush .serverbrowser-selectable-background-icon, #serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable#serverbrowser-rush .serverbrowser-selectable-background-icon {
  top: 6px; }
#serverbrowser-filters .serverbrowser-filter .serverbrowser-filter-selectables .serverbrowser-selectable.serverbrowser-filter-gamemode-item {
  float: left;
  width: 184px;
  clear: none; }

.ticbox {
  width: 10px;
  height: 10px;
  background: url(../serverbrowserwarsaw/icon-checkbox-4.png) no-repeat;
  position: absolute;
  top: 6px;
  left: 0; }

.serverbrowser-exclude .ticbox {
  background-position: 0 -301px; }

.serverbrowser-exclude:hover .ticbox {
  background-position: 0 -400px; }

.serverbrowser-include .ticbox {
  background-position: 0 0; }

.serverbrowser-include:hover .ticbox {
  background-position: 0 -101px; }

.serverbrowser-noinclude .ticbox {
  background-position: 0 -800px; }

.serverbrowser-noinclude:hover .ticbox {
  background-position: 0 -800px; }

/*.serverbrowser-selectable-multi.serverbrowser-include:hover .ticbox {*/
/*background-position: -10px 0;*/
/*}*/
.serverbrowser-disabled .ticbox {
  opacity: 0.4;
  filter: alpha(opacity=40);
  background-position: 0 -40px; }
.serverbrowser-disabled:hover {
  background-position: 0 -40px;
  cursor: default !important; }

.serverbrowser-include.serverbrowser-selectable-small {
  width: 41px;
  height: 28px;
  background: url(../serverguide/bfbc2/selectable-small.png); }

.serverbrowser-exclude.serverbrowser-selectable-small {
  background: url(../serverguide/bfbc2/selectable-small.png) 0 56px; }

.serverbrowser-selectable-small:hover {
  background: url(../serverguide/bfbc2/selectable-small.png) 0 28px; }

.serverbrowser-ignore {
  border: 1px solid #666;
  background: #999; }

#serverbrowser-filters .serverbrowser-filter.serverbrowser-filter-map .serverbrowser-filter-selectables .serverbrowser-selectable img {
  float: left;
  width: 30px;
  height: 21px;
  margin: 2px 2px;
  margin-bottom: 0;
  margin-top: 0;
  margin-left: 18px;
  margin-right: -9px; }

#serverbrowser-apply-filters {
  text-align: right;
  margin-top: 16px; }

#serverbrowser-open-region-link, #serverbrowser-open-advanced-link {
  float: left;
  margin-left: 10px;
  font-weight: normal;
  top: 4px;
  position: relative; }

#serverbrowser-show-loading {
  display: none;
  width: 195px; }
  #serverbrowser-show-loading img {
    position: relative;
    left: 85px;
    top: 5px; }

#serverbrowser-noservers .box-content {
  text-align: center; }
  #serverbrowser-noservers .box-content p {
    background: transparent;
    font-size: 16px; }
  #serverbrowser-noservers .box-content h1 {
    font-weight: bold;
    font-size: 30px; }

.serverbrowser-list {
  width: 681px;
  margin-bottom: 16px;
  position: relative;
  float: left; }
  .serverbrowser-list .common-box-container {
    border-top: none; }

#serverbrowser-result {
  width: 679px;
  border-bottom-width: 0; }
  #serverbrowser-result #results-container {
    position: relative; }

#serverbrowser-apply-filters #serverbrowser-join-random span {
  margin-left: 10px; }

#serverbrowser-result p {
  background: #eeeeec;
  font-size: 14px;
  font-weight: normal;
  padding: 20px; }

#serverbrowser-no-result p {
  font-size: 14px;
  font-weight: normal;
  padding: 20px; }

.serverbrowser-join-ie7fix {
  margin-top: 0;
  padding-left: 5px; }

.serverbrowser-headercells {
  height: 28px;
  cursor: default;
  background: url(../common/box-title-gradient-with-lin.png) repeat-x 0 0;
  position: relative;
  top: 0;
  left: 0;
  width: 679px; }

.serverbrowser-bodycells {
  background: #fefefe;
  cursor: pointer;
  height: 40px;
  margin-top: 0;
  height: 47px;
  /*margin-top: -1px;*/
  line-height: 47px;
  position: relative;
  padding: 1px 0 0;
  border-top: 1px solid #ededed; }
  .serverbrowser-bodycells:hover {
    background-color: #f3f3f3; }
  .serverbrowser-bodycells .serverbrowser-cell-join input[type=submit] {
    visibility: hidden; }

.serverbrowser-server-friends-playing {
  background: #e7eef1;
  border-top-color: #dbe2e5; }

.serverbrowser-bodycells.active {
  /*background: url(../serverguide/row-active.png) no-repeat 100% 0;*/
  /*width: 691px;*/
  background: #353535;
  margin-top: 1px;
  z-index: 10;
  border-top: none; }
  .serverbrowser-bodycells.active:before {
    content: "";
    position: absolute;
    background: #353535;
    right: -1px;
    top: 2px;
    width: 1px;
    height: 44px;
    display: block; }
  .serverbrowser-bodycells.active:after {
    position: absolute;
    content: "";
    top: 0;
    left: 100%;
    border-left: 12px solid #353535;
    border-right: none;
    border-top: 26px solid transparent;
    border-bottom: 22px solid transparent; }

.serverbrowser-headercell {
  float: left;
  height: 30px;
  font-size: 11px;
  font-family: Arial, sans-serif;
  line-height: 30px;
  border: 0; }

.serverbrowser-bodycell {
  float: left;
  height: 30px;
  font-size: 11px;
  font-family: Arial, sans-serif;
  line-height: 30px;
  border: 0;
  float: left;
  height: 47px;
  font-size: 11px;
  font-family: Arial, sans-serif;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #f2f2f2;
  padding-right: 1px; }

.serverbrowser-server-friends-playing .serverbrowser-bodycell {
  border-right-color: #e0e7e9; }

.serverbrowser-bodycells:hover .serverbrowser-bodycell {
  border-right-color: #e8e8e8; }
.serverbrowser-bodycells.active .serverbrowser-bodycell {
  border-right: 1px solid #2c2c2c;
  height: 47px; }

.serverbrowser-bodycell.serverbrowser-cell-noborder {
  padding-right: 0; }

.serverbrowser-bodycell .serverbrowser-bodycell-border {
  width: 1px;
  height: 38px;
  position: relative;
  float: right;
  background-color: #f2f2f2;
  margin-top: 1px; }

.serverbrowser-bodycells.active .serverbrowser-bodycell .serverbrowser-bodycell-border {
  background-color: #2c2c2c; }
.serverbrowser-bodycells.active .serverbrowser-bodycell a {
  font-weight: bold; }
.serverbrowser-bodycells .serverbrowser-bodycell.serverbrowser-cell-noborder {
  border: 0; }

.serverbrowser-headercell {
  font-weight: normal;
  text-shadow: none;
  position: relative;
  font-size: 11px; }

.serverbrowser-sort-down, .serverbrowser-sort-up {
  background: url(../common/box-title-gradient-active.png) repeat-x 0 0; }

.serverbrowser-headersep {
  float: left;
  width: 1px;
  margin-left: 0;
  height: 28px;
  background-color: #d7d7d7; }

.serverbrowser-bodycell {
  color: #8a8a8a;
  font-weight: normal;
  line-height: 47px;
  font-size: 11px;
  margin-top: 0; }

.serverbrowser-cell-expansion {
  width: 39px;
  position: relative; }
  .serverbrowser-cell-expansion > .premium {
    position: absolute;
    height: 43px;
    background-color: #FFC17F;
    width: 3px;
    left: 2px;
    top: 2px; }

.serverbrowser-bodycells.active .serverbrowser-cell-expansion > .premium {
  background-color: #CC700D; }

.serverbrowser-headercell.serverbrowser-cell-expansion {
  width: 40px; }

.serverbrowser-cell-official {
  width: 32px;
  display: none; }

.serverbrowser-cell-fav {
  width: 32px; }

.serverbrowser-cell-friendfavs, .serverbrowser-cell-friend {
  width: 32px;
  text-align: center;
  font-size: 12px;
  color: #353535;
  font-weight: bold; }

.serverbrowser-cell-name {
  width: 418px;
  line-height: normal; }

.special-column .serverbrowser-cell-name {
  width: 151px; }

.serverbrowser-cell-players {
  width: 65px;
  font-size: 11px; }

.serverbrowser-cell-free {
  width: 54px; }

.serverbrowser-cell-map {
  width: 136px;
  position: relative; }

.serverbrowser-cell-mode {
  width: 77px; }

.serverbrowser-cell-type-wrapper {
  width: 22px; }
  .serverbrowser-cell-type-wrapper .serverbrowser-cell-type {
    height: 26px;
    margin-top: 4px; }

.serverbrowser-cell-pb-wrapper {
  width: 23px;
  border-right: none; }
  .serverbrowser-cell-pb-wrapper .serverbrowser-cell-pb {
    height: 26px;
    margin-top: 4px; }

.serverbrowser-cell-lock {
  width: 34px; }

.serverbrowser-cell-ranked-wrapper {
  width: 23px;
  border-right: none; }
  .serverbrowser-cell-ranked-wrapper .serverbrowser-cell-ranked {
    height: 26px;
    margin-top: 4px; }

.serverbrowser-cell-ping {
  width: 62px; }

.serverbrowser-cell-join {
  width: 86px; }

.serverbrowser-cell-expand {
  width: 12px; }

.serverbrowser-cellend {
  clear: both; }

.serverbrowser-favorite-off, .serverbrowser-favorite-on, .serverbrowser-favorite-header, .serverbrowser-friends-off, .serverbrowser-friends-on, .serverbrowser-friends-header, .serverbrowser-friendfavs-header, .serverbrowser-password-off, .serverbrowser-password-on, .serverbrowser-password-header, .serverbrowser-punkbuster-on, .serverbrowser-punkbuster-off, .serverbrowser-ranked-on, .serverbrowser-ranked-off, .serverbrowser-expansion-header, .serverbrowser-official-on, .serverbrowser-official-off, .serverbrowser-official-header {
  background-repeat: no-repeat; }

.serverbrowser-friendfavs-header, .serverbrowser-friends-header {
  background-image: url(../serverguide/icons_server.png);
  background-position: 11px -44px;
  width: 33px; }

.serverbrowser-friendfavs-header {
  background-position: -99px -43px; }

.serverbrowser-sort-up.serverbrowser-friends-header, .serverbrowser-sort-down.serverbrowser-friends-header {
  background-position: 11px -5px; }

.serverbrowser-sort-up.serverbrowser-friendfavs-header, .serverbrowser-sort-down.serverbrowser-friendfavs-header {
  background-position: -79px -4px; }

.serverbrowser-sort-up.serverbrowser-ranked-header, .serverbrowser-sort-down.serverbrowser-ranked-header {
  background-position: -67px -3px; }

.serverbrowser-sort-up.serverbrowser-pb-header, .serverbrowser-sort-down.serverbrowser-pb-header {
  background-position: -138px -3px; }

.serverbrowser-sort-up.serverbrowser-type-header, .serverbrowser-sort-down.serverbrowser-type-header {
  background-position: -212px -4px; }

.serverbrowser-cell-type, .serverbrowser-ranked-on, .serverbrowser-punkbuster-on, .serverbrowser-ranked-off, .serverbrowser-punkbuster-off {
  background-image: url(../serverguide/icons_server.png); }

.serverbrowser-punkbuster-on {
  background-position: -138px 0; }

.serverbrowser-bodycells.active .serverbrowser-punkbuster-on {
  background-position: -137px -116px; }

.serverbrowser-punkbuster-off {
  background-position: -138px -78px; }

.serverbrowser-bodycells.active .serverbrowser-punkbuster-off {
  background-position: -137px -156px; }

.serverbrowser-ranked-on {
  background-position: -64px 0; }

.serverbrowser-bodycells.active .serverbrowser-ranked-on {
  background-position: -62px -116px; }

.serverbrowser-ranked-off {
  background-position: -62px -78px; }

.serverbrowser-bodycells.active .serverbrowser-ranked-off {
  background-position: -62px -156px; }

.serverbrowser-type-hardcore {
  background-position: -211px 0; }

.serverbrowser-bodycells.active .serverbrowser-type-hardcore {
  background-position: -211px -116px; }

.serverbrowser-type-normal, .serverbrowser-type-custom {
  background-position: -211px -78px; }

.serverbrowser-bodycells.active .serverbrowser-type-normal {
  background-position: -211px -156px; }
.serverbrowser-bodycells.active .serverbrowser-type-infantry {
  background-position: 0 -116px; }
.serverbrowser-bodycells.active .serverbrowser-type-custom {
  background-position: -211px -156px; }

.serverbrowser-cell-expansion-normal {
  display: block; }

.serverbrowser-cell-expansion-hover {
  display: none; }

.serverbrowser-bodycells:hover .serverbrowser-cell-expansion-normal {
  display: none; }
.serverbrowser-bodycells:hover .serverbrowser-cell-expansion-hover {
  display: block; }

.serverbrowser-cell-expansion-button-play {
  background: url(../comcenter/icons-interact.png) repeat scroll -23px 0 transparent;
  height: 24px;
  width: 23px;
  float: left;
  margin-top: 11px;
  margin-left: 7px;
  cursor: pointer;
  border: none; }
  .serverbrowser-cell-expansion-button-play:hover {
    background-position: -46px 0; }
  .serverbrowser-cell-expansion-button-play:active {
    background-position: -69px 0; }

.serverbrowser-bodycells.active .serverbrowser-cell-expansion-button-play {
  background-position: -161px 0; }
  .serverbrowser-bodycells.active .serverbrowser-cell-expansion-button-play:hover {
    background-position: -184px 0; }
  .serverbrowser-bodycells.active .serverbrowser-cell-expansion-button-play.active, .serverbrowser-bodycells.active .serverbrowser-cell-expansion-button-play:active {
    background-position: -207px 0; }

.serverbrowser-cell-expansion-button-play.base-button-general-dropdown:hover {
  background-position: -92px 0; }
.serverbrowser-cell-expansion-button-play.base-button-general-dropdown.active, .serverbrowser-cell-expansion-button-play.base-button-general-dropdown:active {
  background-position: -115px 0; }

.serverbrowser-bodycells.active .serverbrowser-cell-expansion-button-play.base-button-general-dropdown:hover {
  background-position: -230px 0; }
.serverbrowser-bodycells.active .serverbrowser-cell-expansion-button-play.base-button-general-dropdown.active, .serverbrowser-bodycells.active .serverbrowser-cell-expansion-button-play.base-button-general-dropdown:active {
  background-position: -253px 0; }
.serverbrowser-bodycells .serverbrowser-cell-expansion-hover .base-general-dropdown-area {
  width: 130px;
  top: 35px;
  left: 5px;
  border: 1px solid #A6A6A6; }
  .serverbrowser-bodycells .serverbrowser-cell-expansion-hover .base-general-dropdown-area a {
    color: #353535 !important; }
  .serverbrowser-bodycells .serverbrowser-cell-expansion-hover .base-general-dropdown-area li:hover a {
    color: #FFC500 !important; }
.serverbrowser-bodycells.active .serverbrowser-cell-expansion-hover .base-general-dropdown-area span {
  display: block; }

.serverbrowser-sort-arrow {
  position: relative;
  height: 4px;
  left: 0;
  width: 7px;
  top: 0;
  visibility: hidden;
  margin: 0 auto;
  z-index: 10; }

.serverbrowser-sort-down .serverbrowser-sort-arrow {
  visibility: visible;
  background: url(../serverguide/serverbrowser-sort.gif) no-repeat scroll center bottom;
  top: -6px; }

.serverbrowser-sort-up .serverbrowser-sort-arrow {
  visibility: visible;
  top: -28px;
  background: url(../serverguide/serverbrowser-sort.gif) no-repeat; }

.serverbrowser-cell-name span, .serverbrowser-cell-map span, .serverbrowser-cell-type span, .serverbrowser-cell-mode span {
  padding-left: 10px;
  padding-top: 8px;
  float: left; }

.serverbrowser-cell-name .serverbrowser-hasPassword {
  width: 8px;
  height: 12px;
  float: left;
  margin-left: 2px;
  margin-right: 1px;
  margin-top: 7px;
  background-image: url(../serverguide/icons_server.png);
  background-position: -288px -13px; }

.serverbrowser-bodycells.active .serverbrowser-cell-name .serverbrowser-hasPassword {
  margin-top: 8px;
  background-position: -288px -131px; }

.serverbrowser-cell-mode span {
  text-transform: capitalize; }

.serverbrowser-bodycells .serverbrowser-cell-map span {
  padding-left: 49px; }

.serverbrowser-cell-map img {
  position: absolute;
  top: 8px;
  left: 10px; }

.serverbrowser-cell-players, .serverbrowser-cell-free, .serverbrowser-cell-pb, .serverbrowser-cell-ranked, .serverbrowser-cell-ping {
  text-align: center; }

.serverbrowser-bodycell.serverbrowser-cell-players {
  font-size: 12px; }

.serverbrowser-cell-players, .serverbrowser-cell-ping {
  text-align: left;
  padding-left: 10px; }

.serverbrowser-headercell.serverbrowser-cell-players, .serverbrowser-headercell.serverbrowser-cell-ping {
  color: #2f8dbf; }

.serverbrowser-punkbuster, .serverbrowser-ranked, .serverbrowser-slots {
  margin-top: 6px;
  float: left;
  margin-right: 32px; }

.serverbrowser-cell-name-server-ping-lines-wrapper {
  width: 12px;
  height: 8px;
  float: left;
  margin: 20px 6px 0 0; }

.serverbrowser-cell-name-server-ping-line {
  width: 2px;
  float: left;
  margin-right: 1px;
  background-color: #ededed; }

.serverbrowser-bodycells:hover .serverbrowser-cell-name-server-ping-line {
  background-color: #e5e5e5; }
.serverbrowser-bodycells.active .serverbrowser-cell-name-server-ping-line {
  background-color: #606060; }

.serverbrowser-cell-name-server-ping-line.worst {
  height: 2px;
  margin-top: 6px; }
.serverbrowser-cell-name-server-ping-line.bad {
  height: 4px;
  margin-top: 4px; }
.serverbrowser-cell-name-server-ping-line.good {
  height: 6px;
  margin-top: 2px; }
.serverbrowser-cell-name-server-ping-line.best {
  height: 8px; }

.serverbrowser-cell-name-server-ping-lines-wrapper.ping-worst .serverbrowser-cell-name-server-ping-line.worst {
  background-color: #ff0000; }
.serverbrowser-cell-name-server-ping-lines-wrapper.ping-bad .serverbrowser-cell-name-server-ping-line.worst, .serverbrowser-cell-name-server-ping-lines-wrapper.ping-bad .serverbrowser-cell-name-server-ping-line.bad {
  background-color: #ffaa07; }
.serverbrowser-cell-name-server-ping-lines-wrapper.ping-good .serverbrowser-cell-name-server-ping-line.worst, .serverbrowser-cell-name-server-ping-lines-wrapper.ping-good .serverbrowser-cell-name-server-ping-line.bad, .serverbrowser-cell-name-server-ping-lines-wrapper.ping-good .serverbrowser-cell-name-server-ping-line.good {
  background-color: #99b839; }
.serverbrowser-cell-name-server-ping-lines-wrapper.ping-best .serverbrowser-cell-name-server-ping-line.worst, .serverbrowser-cell-name-server-ping-lines-wrapper.ping-best .serverbrowser-cell-name-server-ping-line.bad, .serverbrowser-cell-name-server-ping-lines-wrapper.ping-best .serverbrowser-cell-name-server-ping-line.good, .serverbrowser-cell-name-server-ping-lines-wrapper.ping-best .serverbrowser-cell-name-server-ping-line.best {
  background-color: #39b54a; }

.serverbrowser-cell-name-server-map-image {
  float: left;
  margin-top: 6px;
  margin-right: 8px; }

.serverbrowser-cell-name-server-wrapper {
  float: left;
  width: 358px;
  overflow: hidden;
  position: relative; }

.serverbrowser-cell-name-server-name {
  font-weight: bold;
  padding: 7px 0 3px 2px;
  display: block;
  overflow: hidden;
  height: 15px;
  max-width: 345px;
  white-space: nowrap;
  float: left;
  text-overflow: ellipsis;
  color: #353535; }

body .serverbrowser-cell-name-server-name:hover {
  text-decoration: none; }

.serverbrowser-cell-name-server-info {
  color: #c5c5c5;
  font-size: 11px;
  font-weight: normal;
  padding: 1px 0 0 2px; }
  .serverbrowser-cell-name-server-info span {
    color: #8a8a8a;
    padding: 0 2px;
    float: none;
    position: relative;
    top: -1px; }

.serverbrowser-bodycells.active .serverbrowser-cell-name-server-info {
  color: #8a8a8a; }
  .serverbrowser-bodycells.active .serverbrowser-cell-name-server-info span {
    color: #c5c5c5; }

.serverbrowser-name-header-sorting-extra {
  font-weight: normal;
  font-size: 11px;
  color: #8a8a8a;
  float: right;
  padding: 8px 10px 0 0; }
  .serverbrowser-name-header-sorting-extra a {
    font-weight: normal;
    font-size: 11px; }
    .serverbrowser-name-header-sorting-extra a.serverbrowser-sort-up, .serverbrowser-name-header-sorting-extra a.serverbrowser-sort-down {
      color: #000;
      background: none; }
    .serverbrowser-name-header-sorting-extra a.serverbrowser-sort-up:hover, .serverbrowser-name-header-sorting-extra a.serverbrowser-sort-down:hover {
      cursor: default;
      text-decoration: none; }

.serverbrowser-list[data-sorting=map] .serverbrowser-cell-name-server-info-map, .serverbrowser-list[data-sorting=friend] .serverbrowser-cell-name-server-info-friend, .serverbrowser-list[data-sorting=mode] .serverbrowser-cell-name-server-info-mode {
  font-weight: bold;
  colohideFooterr: #353535; }

#serverbrowser-show-column .serverbrowser-offline-info {
  min-height: 400px; }
#serverbrowser-show-column .common-secondary-column-line, #serverbrowser-show-column .common-secondary-simple-column-line {
  width: 295px;
  margin: 6px 0; }
#serverbrowser-show-column .common-gameicon {
  position: relative;
  float: left;
  top: 17px;
  margin-right: 5px; }
#serverbrowser-show-column h1 {
  padding-top: 16px;
  word-wrap: break-word;
  float: left;
  width: 264px; }
#serverbrowser-show-column hr {
  color: #dfdfdf;
  background-color: #dfdfdf;
  border-width: 0;
  float: left;
  height: 1px;
  width: 295px;
  margin: 10px 0; }

#serverbrowser-region-serverfilter-popup {
  float: left;
  width: 214px;
  margin-left: 16px; }

#serverbrowser-country-serverfilter-popup {
  float: left;
  width: 420px; }

#serverbrowser-region-serverfilter-popup h1, #serverbrowser-country-serverfilter-popup h1 {
  font-weight: bold;
  color: #8a8a8a;
  text-shadow: none;
  float: left;
  font-size: 11px;
  margin: 12px 0 0;
  text-align: left;
  font-family: Tahoma, Arial, sans-serif;
  width: 100%;
  clear: both;
  position: relative;
  text-transform: uppercase;
  line-height: 11px; }

.serverbrowser-region-countries {
  display: none; }

.serverbrowser-region-filter-show {
  position: relative;
  clear: both;
  width: 100%;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  line-height: 25px;
  cursor: pointer; }
  .serverbrowser-region-filter-show span.label:hover {
    text-decoration: underline; }
  .serverbrowser-region-filter-show.showing {
    font-weight: bold;
    cursor: default; }
    .serverbrowser-region-filter-show.showing:hover {
      text-decoration: none; }

.region-server-filter div h1 {
  padding-bottom: 16px; }

.serverbrowser-regionfilter-selectable {
  position: relative;
  clear: both;
  width: 100%;
  line-height: 1.7;
  height: 20px;
  font-size: 12px; }
  .serverbrowser-regionfilter-selectable:hover {
    font-weight: bold; }

.serverbrowser-regionfilter-selectable, #popup-serveradvancedfilter-settings-gamesettings .serverguide-advancedfilter-selectable {
  text-indent: 16px; }

.serverbrowser-regionfilter-selectable .ticbox:hover, .serverbrowser-regionfilter-selectable span:hover, #popup-serveradvancedfilter-settings-gamesettings .serverguide-advancedfilter-selectable .ticbox:hover, #popup-serveradvancedfilter-settings-gamesettings .serverguide-advancedfilter-selectable span:hover {
  cursor: pointer;
  font-weight: bold; }

.serverbrowser-regionfilter-selectable.even-column, .serverbrowser-regionfilter-selectable.odd-column {
  float: left;
  clear: none;
  width: 200px; }

.region-server-filter {
  width: 682px; }

.region-server-filter h1, .advanced-server-filter h1 {
  font-weight: bold;
  color: #8a8a8a;
  text-shadow: none;
  float: left;
  font-size: 11px;
  margin-right: 0;
  margin-top: 12px;
  text-align: left;
  font-family: Tahoma, Arial, sans-serif;
  width: 100%;
  clear: both;
  position: relative;
  text-transform: uppercase; }

#serverbrowser-filters .serverguide-filter #serverbrowser-region-settings-checkbox {
  width: auto;
  float: left; }

.serverbrowser-show-join-button-wrapper {
  position: absolute;
  top: 0;
  right: 0; }

.serverbrowser-regionfilter-selectable-selectall {
  position: relative;
  clear: both;
  width: 100%;
  line-height: 24px;
  padding-bottom: 6px;
  text-indent: 16px; }
  .serverbrowser-regionfilter-selectable-selectall:hover {
    font-weight: bold;
    cursor: pointer; }

.serverbrowser-regionfilter-selectable {
  position: relative;
  clear: both;
  width: 100%;
  line-height: 1.7;
  height: 20px;
  font-size: 12px; }

.serverbrowser-regionfilter-selectable:hover {
  font-weight: bold; }

.play-now-menu > ul {
  width: 100%;
  margin-top: 1px; }
  .play-now-menu > ul > li {
    width: 100%;
    padding: 0;
    margin-bottom: 1px;
    position: relative; }
    .play-now-menu > ul > li.active > a, .play-now-menu > ul > li.active > a:active {
      color: black;
      background-color: white;
      background-image: -webkit-linear-gradient(top, #c9c9c9, rgba(200, 200, 200, 0) 40%);
      background-image: linear-gradient(to bottom, #c9c9c9, rgba(200, 200, 200, 0) 40%);
      box-shadow: 0 0 7px 0 #e0f4f8;
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 600; }
    .play-now-menu > ul > li > div {
      position: absolute;
      left: 8px;
      top: 8px;
      width: 57px;
      height: 32px;
      background: #182937; }
    .play-now-menu > ul > li:not(.active) > a:hover {
      background-color: rgba(0, 0, 0, 0.7); }
    .play-now-menu > ul > li > a {
      display: block;
      padding: 8px 0px 8px 80px;
      line-height: 31px;
      font-size: 19px;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 400;
      background-color: rgba(0, 0, 0, 0.5);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: auto; }

.playnow-tab-content {
  position: relative;
  min-height: 432px; }
  .playnow-tab-content div.game-mode-image {
    margin: 0px -16px 0 -16px;
    overflow: hidden;
    position: relative;
    text-align: center;
    min-height: 164px; }
    .playnow-tab-content div.game-mode-image img {
      width: 100%;
      opacity: 1;
      -webkit-filter: blur(0px);
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transition: all 0.5s ease; }
      .playnow-tab-content div.game-mode-image img.show-on-load {
        -webkit-filter: blur(10px);
        opacity: 0; }
    .playnow-tab-content div.game-mode-image .play-button {
      width: 90px;
      height: 90px;
      position: absolute;
      left: 287px;
      z-index: 1;
      top: 37px;
      cursor: pointer;
      background-image: url(../serverbrowserwarsaw/playbutton-circle.png);
      opacity: 0.5;
      background-repeat: no-repeat; }
      .playnow-tab-content div.game-mode-image .play-button:hover {
        opacity: 0.75; }
  .playnow-tab-content p.objective-text {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400;
    padding-right: 200px;
    text-transform: uppercase;
    line-height: 22px;
    margin-bottom: 16px;
    height: 88px;
    overflow: hidden;
    text-overflow: ellipsis; }
  .playnow-tab-content .game-mode-objectives {
    float: left;
    width: 450px;
    margin-top: 16px; }
    .playnow-tab-content .game-mode-objectives p {
      color: #a8a8a8;
      font-size: 12px;
      line-height: 22px; }
    .playnow-tab-content .game-mode-objectives ul.objectives {
      list-style-type: disc;
      list-style-position: inside;
      margin-bottom: 16px; }
      .playnow-tab-content .game-mode-objectives ul.objectives > li {
        color: #a8a8a8;
        font-size: 14px;
        padding: 4px;
        margin-left: 16px;
        list-style-position: outside; }
    .playnow-tab-content .game-mode-objectives ul.maps > li {
      float: left;
      margin-right: 6px;
      width: 62px;
      height: 42px; }
    .playnow-tab-content .game-mode-objectives h5 {
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 0px; }
  .playnow-tab-content button {
    position: absolute;
    top: 16px;
    right: 16px; }
  .playnow-tab-content .game-mode-legends {
    float: right;
    width: 150px;
    margin-top: 16px; }
    .playnow-tab-content .game-mode-legends ul > li {
      color: #fff;
      font-size: 12px;
      text-transform: uppercase;
      margin-bottom: 4px; }
      .playnow-tab-content .game-mode-legends ul > li#legend-squad {
        color: #9EC555; }
      .playnow-tab-content .game-mode-legends ul > li#legend-friendly, .playnow-tab-content .game-mode-legends ul > li#legend-friendly-base {
        color: #65BBEE; }
      .playnow-tab-content .game-mode-legends ul > li#legend-enemy, .playnow-tab-content .game-mode-legends ul > li#legend-enemy-base {
        color: #D6757D; }
      .playnow-tab-content .game-mode-legends ul > li span {
        padding-left: 6px; }

.legend-icon {
  background: url(../serverbrowserwarsaw/icons-gameexplain.png) no-repeat;
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle; }
  .legend-icon.neutral {
    background-position: 0 0px;
    opacity: 1; }
  .legend-icon.friendly-base {
    background-position: 0 -25px;
    opacity: 1; }
  .legend-icon.enemy-base {
    background-position: 0 -50px;
    opacity: 1; }
  .legend-icon.squad {
    background-position: 0 -75px;
    opacity: 1; }
  .legend-icon.friendly {
    background-position: 0 -100px;
    opacity: 1; }
  .legend-icon.enemy {
    background-position: 0 -125px;
    opacity: 1; }

#server-page header .server-buttons + .server-title {
  width: 850px; }
#server-page header .server-buttons.can-favorite + .server-title {
  width: 760px; }
#server-page header .server-buttons {
  padding-top: 6px; }
  #server-page header .server-buttons .btn {
    padding-left: 8px;
    padding-right: 10px; }
    #server-page header .server-buttons .btn.refresh {
      padding-left: 8px;
      padding-right: 8px;
      line-height: 32px; }
    #server-page header .server-buttons .btn .star {
      display: inline-block;
      vertical-align: top;
      padding-right: 5px; }
      #server-page header .server-buttons .btn .star:after {
        position: relative;
        z-index: 1;
        content: "★";
        font-size: 22px;
        color: rgba(255, 255, 255, 0.3); }
    #server-page header .server-buttons .btn.starred .star:after {
      color: #FFF; }

#live-header {
  margin-bottom: 4px; }
  #live-header header {
    padding: 0 5px 0 8px; }
    #live-header header .switch-container {
      margin-top: 5px; }
    #live-header header p {
      margin: -2px 8px 0 0;
      line-height: 17px;
      font-size: 13px; }
  #live-header .box-content {
    padding: 8px 16px;
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400; }

#selected-server-scoreboard .box {
  position: relative; }
#selected-server-scoreboard .box-content {
  min-height: 32px; }
#selected-server-scoreboard .error {
  font-size: 12px;
  line-height: 14px;
  color: #a8a8a8; }
#selected-server-scoreboard .team {
  font-family: Purista, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #ff9f80; }
  #selected-server-scoreboard .team:first-child {
    color: #94cdf3; }
  #selected-server-scoreboard .team.pull-right {
    text-align: right; }
  #selected-server-scoreboard .team .team-score {
    margin-top: 4px;
    font-size: 20px;
    line-height: 24px;
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 600; }
#selected-server-scoreboard .progress-bar {
  width: 64px;
  margin: 1px 8px; }
  #selected-server-scoreboard .progress-bar.home {
    background-color: rgba(151, 215, 246, 0.4); }
  #selected-server-scoreboard .progress-bar.away {
    background-color: rgba(233, 167, 137, 0.4); }
#selected-server-scoreboard .round-time {
  position: absolute;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  color: #a8a8a8;
  bottom: 16px;
  left: 0;
  width: 100%; }
#selected-server-scoreboard .targets {
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 4px; }
  #selected-server-scoreboard .targets .target {
    display: inline-block;
    border: 1px solid;
    text-align: center;
    padding: 1px;
    width: 12px;
    height: 12px; }
    #selected-server-scoreboard .targets .target.destroyed {
      opacity: 0.3; }
#selected-server-scoreboard .lspace {
  letter-spacing: 0.13em;
  margin-right: -0.13em; }
#selected-server-scoreboard .gamemode-8 .team {
  margin-bottom: 2px; }
#selected-server-scoreboard .gamemode-8 .team-name {
  width: 56px;
  padding-right: 8px;
  text-align: right; }
#selected-server-scoreboard .gamemode-8 .team-score {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  width: 36px; }
#selected-server-scoreboard .gamemode-8 .progress-bar {
  width: 96px;
  margin-right: 0; }
#selected-server-scoreboard .gamemode-8 .round-time {
  position: inherit;
  line-height: 12px;
  margin-top: 8px; }
#selected-server-scoreboard .gamemode-32 .round-time {
  bottom: 34px; }
#selected-server-scoreboard .gamemode-33554432 .round-time {
  top: 19px;
  bottom: auto; }
#selected-server-scoreboard .gamemode-33554432 .team-score {
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 20px; }
#selected-server-scoreboard .gamemode-33554432 .objectives {
  margin-top: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 600; }
#selected-server-scoreboard .gamemode-2 .team-score {
  color: #94cdf3; }
  #selected-server-scoreboard .gamemode-2 .team-score:first-child {
    margin-right: 16px; }
  #selected-server-scoreboard .gamemode-2 .team-score:last-child {
    color: #ff9f80; }
#selected-server-scoreboard .gamemode-2 .progress-bar {
  width: 112px; }
#selected-server-scoreboard .gamemode-2 .team-name {
  margin-top: 8px;
  color: #94cdf3;
  text-transform: uppercase; }
#selected-server-scoreboard .gamemode-2 .round-time {
  text-align: right;
  right: 16px;
  bottom: 12px;
  width: auto; }
#selected-server-scoreboard .gamemode-34359738368 .pull-left {
  text-align: left; }
  #selected-server-scoreboard .gamemode-34359738368 .pull-left .link-icon {
    background: url(../serverguide/chainlink-blue.png) top left no-repeat; }
#selected-server-scoreboard .gamemode-34359738368 .pull-right {
  text-align: right; }
  #selected-server-scoreboard .gamemode-34359738368 .pull-right .link-icon {
    background: url(../serverguide/chainlink-orange.png) top left no-repeat; }
#selected-server-scoreboard .gamemode-34359738368 .round-time {
  line-height: 70px;
  font-weight: bold;
  font-size: 14px; }

#server-page-map-rotation .round-status {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  color: #FFF; }

#serverbrowser-filters .filter-col.filter-player-settings {
  width: 395px; }

section.filter label {
  font-family: Frutiger, sans-serif; }

section.filter ul li[data-toggle="section"] {
  font-family: Frutiger, sans-serif; }

#server-page-settings {
  margin-bottom: 0; }

#server-page > header {
  margin-bottom: 0px; }

#server-page-map-rotation td {
  width: 146px; }

#serverbrowser-show .quick-info .holder ul.friends {
  float: none;
  height: 26px;
  margin-bottom: 6px; }
  #serverbrowser-show .quick-info .holder ul.friends li {
    padding: 0 4px; }
    #serverbrowser-show .quick-info .holder ul.friends li.more {
      width: 26px;
      height: 26px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.8);
      padding: 0;
      text-align: center;
      line-height: 26px;
      font-size: 12px; }

.quickmatch-box {
  border: 1px solid rgba(255, 255, 255, 0.15);
  height: 400px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 200px; }
  .quickmatch-box:after {
    content: " ";
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    transition: opacity 1s ease;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 10;
    background-size: cover;
    background-position-x: right; }
  .quickmatch-box:hover:after {
    opacity: 0.8; }
  .quickmatch-box.blood-money:after {
    background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/serverbrowser/quickmatch-box-blood-money-04e003c1.jpg); }
  .quickmatch-box.heist:after {
    background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/serverbrowser/quickmatch-box-heist-592c539e.jpg); }
  .quickmatch-box > div {
    z-index: 100;
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px; }
    .quickmatch-box > div h4 {
      font-family: "Frutiger Bold", sans-serif;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 22px;
      margin-bottom: 4px;
      -webkit-font-smoothing: antialiased; }
    .quickmatch-box > div .info {
      line-height: 26px;
      color: #a2a2a2; }
    .quickmatch-box > div .tutorial {
      color: #fff;
      text-align: center;
      font-size: 12px;
      text-transform: uppercase;
      width: 200px;
      display: block;
      position: absolute;
      top: 130px;
      left: 50%;
      margin-left: -100px;
      cursor: pointer; }
      .quickmatch-box > div .tutorial:before {
        content: " ";
        display: block;
        background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/serverbrowser/play-btn-232d49c9.png);
        width: 84px;
        height: 84px;
        background-size: 80px;
        background-repeat: no-repeat;
        text-align: center;
        margin: 10px auto;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        opacity: 0.4; }
      .quickmatch-box > div .tutorial:hover {
        text-decoration: none; }
        .quickmatch-box > div .tutorial:hover:before {
          opacity: 0.9;
          -webkit-filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.25));
          -moz-filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.25));
          -ms-filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.25));
          -o-filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.25));
          filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.25)); }
    .quickmatch-box > div .btn {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      font-size: 19px; }

#serverbrowser-filters .toggle {
  line-height: 40px;
  font-size: 14px; }
  #serverbrowser-filters .toggle .outerarrow {
    top: 5px; }
#serverbrowser-filters .serverbrowser-refresh {
  height: 40px;
  line-height: 40px; }

/* Overview */
#overview-info {
  margin-bottom: 16px;
  /* Temp fix for the none working no-padding class.. */ }
  #overview-info .edit-link {
    opacity: 0;
    display: inline-block;
    padding: 0 16px;
    background: rgba(0, 0, 0, 0.5);
    line-height: 30px;
    font-size: 11px;
    position: absolute;
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out; }
    #overview-info .edit-link.force-visible {
      opacity: 1; }
  #overview-info .leaderboard-highlight {
    height: 55px;
    margin-bottom: 1px;
    overflow: hidden;
    text-transform: uppercase;
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 600; }
    #overview-info .leaderboard-highlight .position, #overview-info .leaderboard-highlight .icon, #overview-info .leaderboard-highlight .description, #overview-info .leaderboard-highlight .item-info-icon {
      float: left;
      margin-top: 8px;
      margin-left: 8px;
      line-height: 40px;
      color: #fff; }
    #overview-info .leaderboard-highlight img {
      height: 40px; }
    #overview-info .leaderboard-highlight .position {
      font-size: 23px; }
    #overview-info .leaderboard-highlight .description {
      font-size: 19px; }
    #overview-info .leaderboard-highlight .item-info-icon {
      background: no-repeat transparent 0 0 url('../loadout/icon-info-s.png');
      width: 17px;
      height: 17px;
      cursor: pointer;
      opacity: 0.7;
      display: inline-block;
      margin-top: 19px; }
      #overview-info .leaderboard-highlight .item-info-icon:hover {
        opacity: 1; }
  #overview-info #replay-nodes-container, #overview-info .progress-bar-inner {
    -webkit-transform: translate3d(0, 0, 0); }
  #overview-info a:not(.edit-link):hover {
    text-decoration: none; }
  #overview-info .overview-info-box.small {
    margin-top: 1px; }
    #overview-info .overview-info-box.small .box-content {
      height: 180px; }
  #overview-info .progress-bar {
    height: 14px;
    overflow: hidden;
    padding-right: 1px; }
    #overview-info .progress-bar .progress-bar-inner.warning {
      z-index: 100; }
    #overview-info .progress-bar .progress-bar-inner.success {
      z-index: 50; }
    #overview-info .progress-bar .progress-bar-inner + .progress-bar-inner {
      margin-left: 0; }
  #overview-info #overview-rank {
    position: relative;
    height: 231px; }
    #overview-info #overview-rank > .rank {
      position: absolute;
      left: 50%;
      top: 40px;
      margin-left: -64px;
      -webkit-transition: transform 0.5s ease 0.01s;
      -moz-transition: transform 0.5s ease 0.01s;
      transition: transform 0.5s ease 0.01s; }
      #overview-info #overview-rank > .rank.highlighted {
        -webkit-transform: scale(1.12);
        -moz-transform: scale(1.12);
        -ms-transform: scale(1.12);
        -o-transform: scale(1.12);
        transform: scale(1.12); }
    #overview-info #overview-rank .rank-progress {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 20px; }
      #overview-info #overview-rank .rank-progress .progress-bar {
        position: relative; }
      #overview-info #overview-rank .rank-progress .progress-bar-info {
        font-size: 12px; }
        #overview-info #overview-rank .rank-progress .progress-bar-info p:first-child {
          float: left;
          color: #a8a8a8; }
        #overview-info #overview-rank .rank-progress .progress-bar-info p:last-child {
          float: right; }
  #overview-info .overview-service-stars .progress-bar {
    height: 20px; }
  #overview-info.replay-drag .progress-bar-inner {
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    transition: width 0.3s ease; }
  #overview-info #overview-skill .box-content {
    height: 105px;
    text-align: center; }
    #overview-info #overview-skill .box-content p {
      font-family: Purista, sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 58px;
      margin: 10px auto;
      -webkit-transition: 0.8s;
      -moz-transition: 0.8s;
      transition: 0.8s; }
      #overview-info #overview-skill .box-content p.animating {
        -webkit-transition: 0.1s;
        -moz-transition: 0.1s;
        transition: 0.1s; }
    #overview-info #overview-skill .box-content .overview-skill-bar {
      position: relative;
      width: 150px;
      height: 8px;
      margin: 0 auto;
      border: 1px solid #fff;
      background-color: rgba(0, 0, 0, 0.6); }
      #overview-info #overview-skill .box-content .overview-skill-bar > div {
        position: absolute;
        left: 0;
        width: 8px;
        height: 8px;
        background-color: #fff;
        -webkit-transition: left 0.8s ease;
        -moz-transition: left 0.8s ease;
        transition: left 0.8s ease; }
  #overview-info #overview-info-list li {
    float: left;
    width: 111px;
    height: 62px;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 1px 1px 0 0;
    text-align: center; }
    #overview-info #overview-info-list li.last {
      margin-right: 0; }
    #overview-info #overview-info-list li span {
      display: block;
      margin: 12px auto 2px;
      color: #a8a8a8;
      font-size: 14px;
      text-transform: uppercase; }
    #overview-info #overview-info-list li strong {
      display: block;
      font-weight: bold;
      line-height: 30px;
      font-size: 14px; }
      #overview-info #overview-info-list li strong.focus {
        font-size: 22px;
        font-family: Purista, sans-serif;
        font-style: normal;
        font-weight: 600; }
  #overview-info #overview-soldier .box-content {
    height: 255px;
    position: relative; }
    #overview-info #overview-soldier .box-content .soldier-emblem {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 0;
      width: 200px;
      height: 200px; }
      #overview-info #overview-soldier .box-content .soldier-emblem .emblem-preview-link {
        display: block;
        height: 100%; }
      #overview-info #overview-soldier .box-content .soldier-emblem.click-area {
        z-index: 2; }
        #overview-info #overview-soldier .box-content .soldier-emblem.click-area .edit-link {
          top: -10px;
          left: -10px; }
        #overview-info #overview-soldier .box-content .soldier-emblem.click-area:hover .edit-link {
          opacity: 1; }
    #overview-info #overview-soldier .box-content .soldier-portrait {
      width: 287px;
      height: 310px;
      overflow: hidden;
      position: absolute;
      bottom: 0;
      right: 0; }
      #overview-info #overview-soldier .box-content .soldier-portrait.click-area {
        z-index: 1; }
        #overview-info #overview-soldier .box-content .soldier-portrait.click-area .edit-link {
          right: 0;
          bottom: 0; }
        #overview-info #overview-soldier .box-content .soldier-portrait.click-area:hover .edit-link {
          opacity: 1; }
    #overview-info #overview-soldier .box-content .profile-soldier-image {
      position: absolute;
      top: 0;
      right: -65px;
      width: 327px;
      height: 430px; }
  #overview-info .box > header + .box-content.no-padding {
    padding: 0; }

.overview-missions-empty {
  line-height: 36px;
  font-weight: bold;
  font-size: 20px;
  text-align: center; }

.overview-missions-top-opponent .inner-wrapper {
  position: relative;
  padding-left: 57px;
  height: 46px; }
.overview-missions-top-opponent .avatar {
  position: absolute;
  top: 0;
  left: 3px; }
.overview-missions-top-opponent .title {
  font-size: 14px;
  color: #a8a8a8;
  text-transform: uppercase; }
.overview-missions-top-opponent .name {
  font-weight: bold;
  font-size: 12px;
  padding-top: 6px; }

.overview-most-played-mission .inner-wrapper {
  padding-left: 58px;
  position: relative; }
.overview-most-played-mission .thumb {
  position: absolute;
  bottom: 0;
  left: 0; }
.overview-most-played-mission .title {
  font-size: 14px;
  color: #a8a8a8;
  text-transform: uppercase; }
.overview-most-played-mission .mission-name {
  width: 100%;
  overflow: hidden;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1;
  padding-top: 6px;
  font-family: Purista, sans-serif;
  font-style: normal;
  font-weight: 600; }
.overview-most-played-mission p {
  padding-top: 2px;
  font-size: 16px;
  text-transform: uppercase;
  font-family: Purista, sans-serif;
  font-style: normal;
  font-weight: 400; }

.overview-service-stars {
  margin: 6px 16px 0 12px; }
  .overview-service-stars li {
    height: 34px;
    position: relative; }
  .overview-service-stars .kit-icon {
    position: absolute;
    top: 1px; }
  .overview-service-stars .progress-bar {
    position: absolute;
    top: 5px;
    right: 0;
    width: 252px;
    margin: 0; }
  .overview-service-stars .star-count {
    position: absolute;
    top: 8px;
    left: 150px;
    z-index: 200;
    height: 18px;
    min-width: 18px;
    background: url(../profile/warsaw/stats/servicestars/servicestar-18x18.png) no-repeat; }
    .overview-service-stars .star-count span {
      padding-left: 25px;
      line-height: 18px; }
  .overview-service-stars.gamemodes {
    margin: 6px 0; }
    .overview-service-stars.gamemodes .star-count {
      left: 200px; }
    .overview-service-stars.gamemodes .gamemode {
      padding-top: 12px;
      font-size: 12px;
      color: #a8a8a8; }
    .overview-service-stars.gamemodes .progress-bar {
      width: 150px; }

#overview-dogtags img {
  width: 190px;
  height: 95px; }
#overview-dogtags .box-content {
  text-align: center;
  position: relative; }
  #overview-dogtags .box-content .edit-link {
    top: 0;
    left: 0; }
  #overview-dogtags .box-content:hover .edit-link {
    opacity: 1; }
#overview-dogtags .dogtags {
  margin-top: 45px; }

#overview-stats .box-content {
  padding: 20px 0;
  text-align: center;
  margin-bottom: 1px; }
  #overview-stats .box-content.double-row {
    padding: 12px 0; }
  #overview-stats .box-content p {
    font-size: 22px; }
  #overview-stats .box-content span {
    font-size: 12px; }

/* Assignments
* ---------------------------------------------------------------- */
.assignments-list li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid transparent;
  position: relative;
  height: 108px;
  background-color: rgba(0, 0, 0, 0.5); }
  .assignments-list li .award_mission {
    opacity: 0.3; }
  .assignments-list li.active .award_mission, .assignments-list li.completed .award_mission {
    opacity: 1; }
.assignments-list .tmp-code {
  position: absolute;
  top: 56px;
  left: 50%;
  margin-left: -27px;
  width: 50px;
  color: #000;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2px 0;
  font-size: 10px;
  text-align: center; }
.assignments-list .dependencies {
  position: absolute;
  bottom: 1px;
  right: 1px; }
  .assignments-list .dependencies li {
    float: right;
    height: 19px;
    width: 19px;
    border: 1px solid #fff;
    margin-left: 1px; }
.assignments-list li.has-progress .dependencies {
  bottom: 5px; }

.assignment-rewards {
  text-align: center; }
  .assignment-rewards p {
    margin-top: 5px;
    font-weight: bold; }

.assignment-info {
  text-align: center; }

.dependency-icon {
  height: 19px;
  width: 19px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .dependency-icon[data-code^="rk"] {
    background-image: url(../profile/bf4/icon-dependencies.png);
    background-position: -1px -1px; }
  .dependency-icon[data-code^="as"], .dependency-icon[data-code^="xp"], .dependency-icon[data-code^="axp"], .dependency-icon[data-code="amaster"], .dependency-icon[data-code="apremium"] {
    background-image: url(../profile/bf4/icon-dependencies.png);
    background-position: -20px -1px; }

#assignment-criterias li .pull-left {
  max-width: 270px;
  line-height: 14px; }
#assignment-criterias li .in-a-round {
  clear: both;
  color: #a8a8a8;
  padding-top: 4px; }

#assignment-dependencies li .dependency-icon {
  float: left; }
#assignment-dependencies li a {
  cursor: pointer; }
#assignment-dependencies li span, #assignment-dependencies li a {
  float: left;
  margin: 4px 0 0 10px; }
#assignment-dependencies li .green-check-small {
  float: right;
  background-image: url(../battledash/images/icons/green-check-small.png);
  width: 12px;
  height: 12px;
  margin-top: 3px; }
#assignment-dependencies li.nottaken .green-check-small {
  opacity: 0.2; }

/* Awards
* ---------------------------------------------------------------- */
.awards-list li {
  height: 170px; }
  .awards-list li .nottaken .image {
    opacity: 0.3; }
  .awards-list li .award-medal {
    position: relative;
    height: 105px;
    margin-bottom: 1px;
    background-color: rgba(0, 0, 0, 0.5); }
    .awards-list li .award-medal .progress-bar {
      position: absolute;
      bottom: 0;
      margin-bottom: 0;
      width: 100%; }
  .awards-list li.ribbon-empty:hover {
    background: inherit;
    cursor: inherit; }
  .awards-list li .award-ribbon {
    position: relative;
    height: 64px;
    background-color: rgba(0, 0, 0, 0.5); }
    .awards-list li .award-ribbon div {
      margin-top: -16px;
      /* TMP, TODO: Remove this when the gamedata award_ribbons is ok */ }
  .awards-list li .times-taken {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 11px;
    color: #bec3c7; }
  .awards-list li.active .award-medal, .awards-list li.active .award-ribbon {
    background-color: #fff; }
  .awards-list li.active .image {
    opacity: 1; }
  .awards-list li.has-icon .award-ribbon .times-taken {
    right: 25px; }
.awards-list .xp-icon {
  position: absolute;
  right: 2px;
  bottom: 2px; }

#awards-details .image-container {
  text-align: center; }
#awards-details .award-medal {
  margin-bottom: 1px; }
#awards-details .award-info {
  margin: 16px 0 0; }
#awards-details .progress-bar {
  margin: 8px 0; }
#awards-details .progress-info {
  font-size: 12px;
  color: #a8a8a8; }
#awards-details .award-info strong, #awards-details .progress-info .pull-left {
  width: 245px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }
#awards-details .award-xpack {
  margin-bottom: 15px; }
  #awards-details .award-xpack .xp-icon {
    position: relative;
    top: 5px; }
  #awards-details .award-xpack span {
    font-size: 12px;
    color: #a8a8a8; }
  #awards-details .award-xpack strong {
    font-weight: normal;
    color: #fff; }

/* Unlocks
* ---------------------------------------------------------------- */
.upcoming-unlocks-container .upcoming-unlock header img {
  float: right;
  margin-top: 2px; }
.upcoming-unlocks-container .upcoming-unlock header span {
  color: #a8a8a8;
  font-size: 14px; }
.upcoming-unlocks-container .upcoming-unlock header strong {
  display: block;
  margin-top: 3px; }
.upcoming-unlocks-container .upcoming-unlock > a {
  display: block;
  text-align: center; }
.upcoming-unlocks-container .upcoming-unlock > div {
  font-size: 12px; }
  .upcoming-unlocks-container .upcoming-unlock > div .progress-info {
    text-align: right;
    color: #666; }
  .upcoming-unlocks-container .upcoming-unlock > div .progress-bar {
    margin: 3px auto 5px; }

#upcoming-unlocks-progression {
  margin-top: 16px; }
  #upcoming-unlocks-progression td {
    height: 60px;
    padding: 0;
    box-shadow: none; }
  #upcoming-unlocks-progression .value-cell {
    position: relative;
    width: 100px;
    font-size: 30px;
    vertical-align: top;
    line-height: 60px; }
    #upcoming-unlocks-progression .value-cell div {
      position: absolute;
      background-color: rgba(200, 200, 200, 0.2);
      height: 60px; }
  #upcoming-unlocks-progression .kit-cell {
    width: 20px; }
  #upcoming-unlocks-progression .image-cell {
    width: 90px; }
  #upcoming-unlocks-progression .desc-cell a {
    text-decoration: none;
    color: #a8a8a8; }
  #upcoming-unlocks-progression .desc-cell p {
    margin-left: 20px;
    font-size: 13px; }
    #upcoming-unlocks-progression .desc-cell p:first-child {
      margin-bottom: 5px;
      font-size: 15px; }

/* Battlereports
* ---------------------------------------------------------------- */
table.battlereports-table {
  font-size: 14px;
  margin: 0; }
  table.battlereports-table.show-first-ten tr:nth-child(n+11) {
    display: none; }
  table.battlereports-table tr {
    cursor: pointer; }
    table.battlereports-table tr .star {
      display: block;
      width: 20px;
      margin: 0;
      padding: 0; }
      table.battlereports-table tr .star:after {
        position: relative;
        z-index: 1;
        display: none;
        content: "★";
        font-size: 22px;
        color: rgba(255, 255, 255, 0.3); }
      table.battlereports-table tr .star.starred:after {
        display: block;
        color: white; }
    table.battlereports-table tr.active {
      -webkit-filter: drop-shadow(0 0 1px #e0f4f8);
      -moz-filter: drop-shadow(0 0 1px #e0f4f8);
      -ms-filter: drop-shadow(0 0 1px #e0f4f8);
      -o-filter: drop-shadow(0 0 1px #e0f4f8);
      filter: drop-shadow(0 0 1px #e0f4f8); }
      table.battlereports-table tr.active [class*='winstatus-'] {
        color: #000; }
      table.battlereports-table tr.active .star:after {
        color: rgba(0, 0, 0, 0.3); }
      table.battlereports-table tr.active .star.starred:after {
        color: #000; }
      table.battlereports-table tr.active td.favcell:hover .star:after {
        color: #000; }
    table.battlereports-table tr td.favcell {
      width: 22px;
      text-align: center; }
      table.battlereports-table tr td.favcell:hover .star:after {
        color: #fff; }
    table.battlereports-table tr .favorite {
      width: 20px;
      overflow: hidden; }
    table.battlereports-table tr .server-icons {
      padding: 0 0 0 6px; }
  table.battlereports-table.own-reports tr:hover .star:after {
    display: block; }
  table.battlereports-table thead th {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 24px; }
  table.battlereports-table .map-thumb {
    margin-right: 8px; }
  table.battlereports-table .map-info {
    max-width: 268px; }
    table.battlereports-table .map-info p {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
  table.battlereports-table td p:nth-of-type(1) {
    line-height: 20px; }
  table.battlereports-table td p:nth-of-type(2) {
    font-size: 11px;
    line-height: 13px;
    color: #a8a8a8; }
  table.battlereports-table .winstatus {
    text-transform: uppercase; }
  table.battlereports-table .winstatus-1 {
    color: #94cdf3; }
  table.battlereports-table .winstatus--1 {
    color: #ff9f80; }
  table.battlereports-table .winstatus-0 {
    color: #86B886; }

#battlereports img.map {
  width: 100%; }
#battlereports .row {
  float: left; }
#battlereports .box {
  margin-bottom: 1px; }
#battlereports aside .box header {
  padding: 0; }
#battlereports aside .box ul {
  display: table;
  width: 100%;
  font-size: 12px; }
  #battlereports aside .box ul li {
    display: table-row; }
    #battlereports aside .box ul li span {
      text-align: left;
      display: table-cell;
      padding-top: 8px; }
      #battlereports aside .box ul li span:first-child {
        width: 30%;
        color: #a8a8a8;
        padding: 0; }
#battlereports aside footer {
  padding: 0; }
  #battlereports aside footer a {
    display: block;
    padding: 16px;
    text-decoration: none; }
  #battlereports aside footer:hover {
    background-color: rgba(7, 7, 7, 0.6); }
#battlereports .premium-requirement-box .btn {
  width: auto; }
#battlereports .btn {
  width: 100%;
  margin-top: 4px; }
#battlereports section footer {
  padding: 0; }
  #battlereports section footer .btn {
    margin-top: 0; }
#battlereports #battlereports-favorites {
  margin-bottom: 16px; }
  #battlereports #battlereports-favorites footer {
    margin-top: 0; }
#battlereports #battlereports-latest {
  margin-bottom: 20px; }

.no-reports.hide {
  display: none; }

.is-touch .star:after {
  display: block !important; }

/* Stat details
* ---------------------------------------------------------------- */
#stats-detailed .name {
  font-size: 14px; }