/**
 * Webkit specific way of ellipsis last line of a text that is too long to fit its container.
 * Non-webkit browsers will have overflow hidden applied, just not showing the ellipsis.
 */
/**
 * Mixin to use ellipsis for texts if they go beyond their allowed width
 * @param max-width
 */
[class^="icon-"], [class*=" icon-"] {
  text-decoration: none;
  background-color: transparent;
  border: 0;
  color: transparent;
  font: 0/0 a;
  text-shadow: none; }

#base-header, .btn, .submenu > ul > li > a, .submenu > ul > li > span, .emblem-layer-options .common-cleanbutton {
  -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, #base-header .game-bar .dropdown-bar .soldierstats-box .rank .experience {
  -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 header:before, .dialog section:before, .dialog footer:before, .dialog.emblemselect .emblem-items:before, .dialog.soldierselect .soldier-list > li > a:before, .forum-search-results-item-title: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 header:after, .dialog section:after, .dialog footer:after, .dialog.emblemselect .emblem-items:after, .dialog.soldierselect .soldier-list > li > a:after, .forum-search-results-item-title: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 header:after, .dialog section:after, .dialog footer:after, .dialog.emblemselect .emblem-items:after, .dialog.soldierselect .soldier-list > li > a:after, .forum-search-results-item-title:after {
  clear: both; }

.clear {
  clear: both; }

.clear-left {
  clear: left; }

.clear-right {
  clear: right; }

.nowrap {
  white-space: nowrap; }

.noselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default; }

.pull-left {
  float: left; }

.hide {
  display: none !important; }

.show {
  display: block; }

.invisible {
  visibility: hidden; }

.affix {
  position: fixed; }

.pull-right {
  float: right; }

.fade {
  -webkit-transition-property: "opacity, background";
  -moz-transition-property: "opacity, background";
  transition-property: "opacity, background";
  -webkit-transition-duration: 0.15s;
  -moz-transition-duration: 0.15s;
  transition-duration: 0.15s; }

.center-text {
  text-align: center; }

.valign-mid {
  vertical-align: middle; }
  .valign-mid * {
    vertical-align: middle; }

.hide-text {
  color: transparent;
  font: 0/0 a;
  text-shadow: none; }

.squish-text {
  font: 0/0 serif;
  text-shadow: none;
  color: transparent; }

.percent-suffix:after {
  content: "%"; }

.uppercase {
  text-transform: uppercase; }

.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; }

body.show-section-select #community-bar .dropdown-bar {
  height: 192px; }
  body.show-section-select #community-bar .dropdown-bar .game-box {
    opacity: 1; }
body.show-section-select #community-bar .outerarrow .arrow {
  margin-top: -9px;
  border-top-color: transparent;
  border-bottom-color: #fff;
  opacity: 0.75; }
body.show-section-select #base-container:before {
  height: 304px; }

#community-bar {
  position: relative;
  background: rgba(10, 14, 20, 0.95); }
  #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.2s ease-out;
    -moz-transition: height 0.2s ease-out;
    transition: height 0.2s ease-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 .base-game-selector .game-box {
      opacity: 0; }
  #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; }

#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 #111922;
    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 #111922;
      z-index: 1;
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.95) 100%);
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.95) 100%); }
    #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 #111922;
          position: relative; }
          #base-header .game-bar .main-nav .base-section-menu > li:first-child {
            border-left: 1px solid #111922; }
          #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); }
          #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: #111922; }
          #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: #111922;
      -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; }
          #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, #base-header .game-bar .dropdown-bar .soldierstats-box .rank .experience {
            font-size: 12px;
            color: #fff;
            float: left; }
            #base-header .game-bar .dropdown-bar .soldierstats-box .rank .points em, #base-header .game-bar .dropdown-bar .soldierstats-box .rank .experience 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: #8A8A8A; }

#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: #E4B744; }
        #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: #111922; }
    #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: #111922;
  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-game-selector:before, .base-game-selector:after {
  display: table;
  content: "";
  line-height: 0; }
.base-game-selector:after {
  clear: both; }
.base-game-selector .game-box {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  width: 236px;
  display: block;
  height: 160px;
  background-position: center center;
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none; }
  .base-game-selector .game-box .game-box-text {
    line-height: 160px;
    background: rgba(0, 0, 0, 0.35); }
    .base-game-selector .game-box .game-box-text:hover {
      background: rgba(0, 0, 0, 0.7); }
  .base-game-selector .game-box .game-box-image {
    display: block;
    width: 320px;
    margin: 0;
    border: 0;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -160px;
    z-index: 0; }
  .base-game-selector .game-box.game-mohw .game-box-image {
    margin-left: -118px; }
  .base-game-selector .game-box.active {
    cursor: default; }
    .base-game-selector .game-box.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; }
  .base-game-selector .game-box:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(7, 7, 7, 0.5);
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out; }
  .base-game-selector .game-box:hover:after, .base-game-selector .game-box.active:after {
    opacity: 0;
    -webkit-transition: opacity 0 ease-out;
    -moz-transition: opacity 0 ease-out;
    transition: opacity 0 ease-out; }

.forum-link .external {
  float: right;
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  top: 16px;
  left: 2px;
  opacity: 0.7;
  background: url(../forum/linked-icon-white.png) no-repeat; }

#base-header-secondary-nav > ul > li > a.premium {
  background: url(../base/shared/header-menu-premium.png) no-repeat 0 17px;
  width: 75px; }

.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; }

.btn {
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 0.7em;
  -webkit-user-drag: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  border-radius: 3px; }
  .btn.btn-block {
    display: block;
    width: 100%; }
  .btn, .btn:visited, .btn:link {
    color: #000; }
  .btn.focus, .btn.hover, .btn:focus, .btn:hover {
    outline: none;
    text-decoration: none;
    background-position: 0 0px !important; }
  .btn.active, .btn:active {
    outline: none;
    background-position: 0 100% !important; }
  .btn:disabled {
    opacity: 0.6;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.4) !important; }
  .btn.btn-block {
    display: block;
    width: 100%; }
  .btn.btn-tiny, .btn.btn-small {
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding-top: 0; }
  .btn.btn-tiny {
    font-size: 11px;
    line-height: 24px;
    height: 26px;
    top: 2px;
    position: relative; }
  .btn.btn-small {
    font-size: 13px;
    line-height: 24px;
    height: 26px;
    top: 2px;
    position: relative; }
  .btn.btn-large, .btn.btn-xlarge, .btn.btn-xxlarge {
    font-family: "BebasNeueRegular", Arial, sans-serif;
    font-weight: normal; }
  .btn.btn-large {
    font-size: 23px;
    line-height: 31px;
    padding-top: 2px;
    height: 33px;
    top: 2px;
    position: relative; }
  .btn.btn-xlarge {
    font-size: 26px;
    line-height: 34px;
    padding-top: 3px;
    height: 36px;
    top: 2px;
    position: relative; }
  .btn.btn-xxlarge {
    font-size: 28px;
    line-height: 38px;
    padding-top: 4px;
    height: 40px;
    top: 2px;
    position: relative; }
  .btn + .btn {
    margin-left: 8px; }

.btn {
  border: 1px solid #A6A6A6;
  border-top-color: #B8B8B8;
  border-bottom-color: #929292;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  background: -webkit-linear-gradient(top, #F8F8F8 2%, #DEDEDE 30%, #CFCFCF 50%, #C6C6C6 75%, #B8B8B8 100%);
  background: linear-gradient(to bottom, #F8F8F8 2%, #DEDEDE 30%, #CFCFCF 50%, #C6C6C6 75%, #B8B8B8 100%);
  background-size: 10px 200%;
  background-position: 0 25%;
  background-repeat: repeat-x;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
  .btn.focus, .btn:focus {
    outline: 0;
    border: 1px solid #777; }
  .btn.active, .btn:active {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }

.btn.btn-primary {
  border: 1px solid #eb9f0f;
  border-top-color: #FCC42E;
  border-bottom-color: #C2770E;
  text-shadow: 0 1px 0 #fcda87;
  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.1);
  background: -webkit-linear-gradient(top, #fcd053 0, #f5a803 100%);
  background: linear-gradient(to bottom, #fcd053 0, #f5a803 100%); }
  .btn.btn-primary.hover, .btn.btn-primary:hover {
    background: -webkit-linear-gradient(top, #fcdc81 0, #f6b116 100%);
    background: linear-gradient(to bottom, #fcdc81 0, #f6b116 100%); }
  .btn.btn-primary.focus, .btn.btn-primary:focus {
    border-color: #CB7E13;
    border-top-color: #AD7A1D;
    border-bottom-color: #D46F01;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #FCE6A7; }
  .btn.btn-primary.active, .btn.btn-primary:active {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    border-color: #CB7E13;
    border-top-color: #AD7A1D;
    border-bottom-color: #D46F01;
    text-shadow: 0px 1px rgba(252, 218, 135, 0.7);
    color: rgba(0, 0, 0, 0.8); }
  .btn.btn-primary.btn-tiny, .btn.btn-primary.btn-small {
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2); }
    .btn.btn-primary.btn-tiny:active, .btn.btn-primary.btn-small:active {
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
    .btn.btn-primary.btn-tiny:focus, .btn.btn-primary.btn-small:focus {
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #FCE6A7; }

.btn.btn-subtle {
  color: #308DBF;
  border: 1px solid #d5d5d5;
  text-shadow: none;
  box-shadow: none;
  background: -webkit-linear-gradient(top, #fff 0%, #f5f5f5 100%);
  background: linear-gradient(to bottom, #fff 0%, #f5f5f5 100%);
  background-size: 10px 200%;
  background-position: 0 25%;
  background-repeat: repeat-x;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
  .btn.btn-subtle.focus, .btn.btn-subtle.hover, .btn.btn-subtle:focus, .btn.btn-subtle:hover {
    background: #fff; }
  .btn.btn-subtle.focus, .btn.btn-subtle:focus {
    border-color: #A8A8A8; }
  .btn.btn-subtle.active, .btn.btn-subtle:active {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    background: -webkit-linear-gradient(top, #f5f5f5 0%, #fff 100%);
    background: linear-gradient(to bottom, #f5f5f5 0%, #fff 100%);
    background-size: 10px 200%;
    background-position: 0 0;
    background-repeat: repeat-x; }

.btn.btn-clean {
  background: none;
  border: 0;
  color: #fff;
  text-shadow: none;
  opacity: 0.75;
  text-transform: uppercase; }
  .btn.btn-clean.focus, .btn.btn-clean.hover, .btn.btn-clean:focus, .btn.btn-clean:hover {
    opacity: 1; }

.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-chat-content .btn.btn-small.join-friend-submit-link.disabled {
    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); }

  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;
    animation-name: comcenter-friend-online;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-iteration-count: 2;
    -moz-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: 26px;
  float: left;
  background: #202020;
  border-top: 1px solid #202020; }

.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-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;
  position: -2px;
  height: 14px;
  width: 14px;
  background-size: cover;
  background: url(../ui/icons-small.png) no-repeat;
  background-position: -14px -42px;
  opacity: 0.3; }
  .comcenter-chat-party-menu-icon:hover {
    opacity: 0.8; }

.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; }

.chat-members {
  display: none;
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  bottom: 38px;
  background: #000;
  z-index: 1;
  overflow-y: auto; }
  .chat-members .chattitle {
    font-family: Tahoma, Arial, sans-serif;
    color: #8a8a8a;
    font-size: 13px;
    text-transform: uppercase;
    display: block;
    margin: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 6px;
    font-weight: normal;
    line-height: 20px; }
  .comcenter-chat-taskbar.showmembers .chat-members {
    display: block; }
  .chat-members .close-chat-members {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 30px;
    text-align: center; }
  .chat-members .comcenter-chat-member {
    padding: 6px;
    clear: both;
    position: relative;
    border-bottom: 1px solid #2E2E2E; }
    .chat-members .comcenter-chat-member .join-friend-generic-button {
      position: absolute;
      top: 8px;
      right: 8px; }
    .chat-members .comcenter-chat-member .comcenter-chat-member-actions {
      text-align: right;
      position: absolute;
      top: 4px;
      right: 6px; }
    .chat-members .comcenter-chat-member .comcenter-chat-username {
      color: #8a8a8a;
      font-weight: normal;
      line-height: 18px;
      font-size: 12px;
      margin-left: 4px; }
    .chat-members .comcenter-chat-member .comcenter-chat-member-actions li {
      float: left;
      margin-right: 6px; }

.chat-member-close {
  display: none;
  position: absolute;
  z-index: 2;
  bottom: 0;
  height: 38px;
  line-height: 38px;
  left: 0;
  right: 0;
  background: #000;
  text-align: center;
  border-top: 1px solid #2E2E2E; }
  .comcenter-chat-taskbar.showmembers .chat-member-close {
    display: block; }

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

.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: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  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-message-content .em {
    width: 18px;
    height: 18px;
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    position: relative;
    top: 3px; }

.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 .comcenter-chat-bottom-info {
    text-align: center;
    color: #a8a8a8;
    line-height: 36px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
    .comcenter-chat-bottom .comcenter-chat-bottom-info a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer; }
  .comcenter-chat-bottom.user-is-offline {
    background-position: 0 -38px; }
  .comcenter-chat-bottom.disabled {
    background-position: 0 38px; }

#comcenter-chats ::-webkit-scrollbar {
  width: 7px; }
#comcenter-chats ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5); }

#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-chat div:first-of-type {
    border-top: none; }

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

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

#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: 377px;
  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: 300px;
  position: absolute;
  top: 56px;
  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.contracted {
  width: 40px; }
.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: 4px 0;
  position: relative; }

.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-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, #comcenter-tab-chats, #comcenter-tab-search {
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 41px;
  left: 0;
  background: none;
  overflow: auto;
  margin-bottom: 0;
  outline: none; }
  .app-promotion #comcenter-tab-friends-content, .app-promotion #comcenter-tab-chats, .app-promotion #comcenter-tab-search {
    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 a {
      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: Purista;
      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 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: #8A8A8A;
        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.png);
    position: absolute;
    top: 0px;
    right: 0;
    height: 9px;
    width: 9px;
    z-index: 13; }
  #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%; }
  #comcenter-area.chats .show-cc-btn {
    opacity: 0.6; }
  #comcenter-area.chats .show-chat-btn {
    opacity: 1; }

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

.comcenter-username {
  float: left;
  position: relative;
  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;
  text-align: center;
  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; }
  .show-comcenter #comcenter-chats {
    right: 242px; }
  #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-more-users {
    color: #a8a8a8;
    text-align: center;
    width: 26px;
    height: 26px;
    line-height: 26px;
    float: left; }
    #comcenter-chats .comcenter-chat-more-users:hover {
      cursor: pointer;
      color: #fff;
      background: rgba(255, 255, 255, 0.1); }
  #comcenter-chats .comcenter-chat-taskbar-avatar {
    color: #a8a8a8; }
    #comcenter-chats .comcenter-chat-taskbar-avatar .username {
      color: #a8a8a8; }
  #comcenter-chats .comcenter-chat-taskbar-username {
    color: #a8a8a8; }
  #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 .club-emblem {
    position: relative;
    top: 10px;
    margin-right: 3px; }
  .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;
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 0;
  color: #8A8A8A;
  margin-left: 1px; }
  .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: 24px;
  width: 120px;
  background: rgba(0, 0, 0, 0.9);
  right: -42px;
  z-index: 10;
  line-height: 26px;
  border: 1px solid #302f33;
  font-size: 11px;
  text-indent: 6px;
  text-shadow: none; }
  .comcenter-chat-party-menu-dropdown li {
    border-top: 1px solid #302f33; }
    .comcenter-chat-party-menu-dropdown li:hover {
      background: rgba(255, 255, 255, 0.2); }
  .comcenter-chat-party-menu-dropdown a {
    color: #fff;
    display: block;
    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-area.show-search #friendlist-header form {
  top: 42px;
  position: relative;
  display: block; }
  #comcenter-area.show-search #friendlist-header form .icon-close {
    position: absolute;
    top: 7px;
    right: 22px;
    z-index: 1;
    cursor: pointer; }
#comcenter-area.show-search #comcenter-tab-chats, #comcenter-area.show-search #comcenter-tab-friends-content {
  display: none; }
#comcenter-area.show-search #comcenter-tab-search {
  display: block;
  top: 80px; }
#comcenter-area.show-search #comcenter-search-results p {
  padding: 10px;
  color: #fff; }
#comcenter-area.show-search #comcenter-search-results li {
  margin-bottom: 8px; }
#comcenter-area.show-search #comcenter-search-results i.icon-platform {
  display: inline-block;
  position: relative;
  top: 15px; }

.comcenter-toggle {
  display: none; }
  .comcenter-toggle.show-cc-btn, .comcenter-toggle.show-chat-btn {
    display: block; }
  .comcenter-toggle.show-chat-btn button .icon {
    background: url(../base/shared/header-icons.png) -240px 0 no-repeat; }
  .comcenter-toggle.show-chat-btn.unread button {
    color: orange !important; }
    .comcenter-toggle.show-chat-btn.unread button .icon {
      background-position: -240px -30px; }
  .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; }

#react-chats-container .chats-info {
  color: #fff;
  font-family: Tahoma, Arial, sans-serif;
  padding: 16px;
  text-align: center;
  line-height: 18px; }
  #react-chats-container .chats-info h2 {
    font-size: 14px;
    color: #8a8a8a; }
#react-chats-container .comcenter-create-chat {
  margin: 8px;
  text-align: center;
  width: 220px; }
#react-chats-container .chat-title {
  font-family: Tahoma, Arial, sans-serif;
  color: #8a8a8a;
  font-size: 13px;
  text-transform: uppercase;
  display: block;
  margin: 0px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px; }
#react-chats-container ul {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; }
#react-chats-container li {
  list-style: none;
  position: relative;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 16px;
  font-size: 13px;
  color: #8a8a8a;
  cursor: pointer; }
  #react-chats-container li.kicked {
    opacity: 0.5; }
    #react-chats-container li.kicked:hover {
      opacity: 1; }
      #react-chats-container li.kicked:hover .leave-btn {
        display: block; }
  #react-chats-container li .leave-btn {
    display: none;
    position: absolute;
    top: 10px;
    right: 18px; }
  #react-chats-container li.unread .chat-row-info .unreadCount {
    display: block; }
  #react-chats-container li.unread:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 9px;
    height: 9px;
    background: url('../comcenter/unread.png');
    content: ""; }
  #react-chats-container li:hover {
    background: rgba(255, 255, 255, 0.2); }
  #react-chats-container li.selected {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
    box-shadow: 0 0 5px white; }
  #react-chats-container li .chat-club-emblem, #react-chats-container li .chat-icon {
    float: left;
    width: 44px;
    height: 36px; }
  #react-chats-container li .chat-icon {
    position: relative; }
    #react-chats-container li .chat-icon.group {
      background: url('../comcenter/chat/group-icon.png') no-repeat top left; }
    #react-chats-container li .chat-icon .avatar-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
  #react-chats-container li .chat-club-emblem {
    position: relative; }
    #react-chats-container li .chat-club-emblem img {
      position: absolute;
      top: 6px;
      left: 6px; }
  #react-chats-container li .chat-row-info {
    float: left;
    width: 174px; }
    #react-chats-container li .chat-row-info .usernames {
      margin-right: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: bold;
      font-size: 14px; }
    #react-chats-container li .chat-row-info .unreadCount {
      font-size: 12px;
      color: orange;
      display: none;
      position: absolute;
      bottom: 8px;
      right: 6px; }
  #react-chats-container li .lastmessage {
    margin-top: 4px;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    #react-chats-container li .lastmessage .em {
      width: 18px;
      height: 18px;
      display: -moz-inline-stack;
      display: inline-block;
      *display: inline;
      zoom: 1;
      position: relative;
      top: 3px; }
  #react-chats-container li.no-user .lastmessage {
    margin-top: 11px; }

.show-chat-btn {
  position: absolute;
  top: 0;
  left: 116px;
  opacity: 0.6; }

.show-cc-btn {
  position: absolute;
  top: 0;
  left: 46px;
  opacity: 1; }

/*
Fix for platform icons in search tab being stacked in top right corner.
*/
#comcenter-tab-search #comcenter-search-results li {
  padding: 4px 8px; }
#comcenter-tab-search #comcenter-search-results .comcenter-friend .comcenter-username {
  margin-top: 1px; }
#comcenter-tab-search #comcenter-search-results .comcenter-friend .comcenter-interact-container {
  position: relative;
  display: inline-block;
  right: 0;
  width: 130px; }
  #comcenter-tab-search #comcenter-search-results .comcenter-friend .comcenter-interact-container i.icon-platform {
    top: 0; }

#gamereportupdates .comcenter-notification:last-child {
  border-bottom: 0; }

#comcenter .comcenter-chat-content .chat-members {
  background: #fff; }
#comcenter .comcenter-chat-party-menu-icon {
  background-position: -42px -42px; }
#comcenter .chat-member-close {
  background: #fff;
  border-top: 1px solid #ccc; }
#comcenter .comcenter-chat-member {
  border-bottom: 1px solid #ccc; }
#comcenter .comcenter-chat-bottom-info a {
  color: #000; }
#comcenter .comcenter-chat-more-users:hover {
  background: #ccc;
  border-top: 1px solid #ccc; }

#comcenter-area .app-promotion.box {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  box-shadow: none;
  min-height: 90px;
  bottom: 42px; }
  #comcenter-area .app-promotion.box .box-content {
    background: none; }
  #comcenter-area .app-promotion.box .text .title {
    color: #fff;
    font-weight: bold;
    display: inline-block;
    margin-top: 8px; }

.breadcrumb {
  margin: 0 0 5px 0;
  padding: 0;
  list-style: none; }
  .breadcrumb.small li {
    margin-right: 5px; }
    .breadcrumb.small li:before, .breadcrumb.small li:after {
      border-width: 12px 0 12px 7px; }
    .breadcrumb.small li:before {
      left: -7px; }
    .breadcrumb.small li:after {
      right: -7px; }
  .breadcrumb.small a {
    font-size: 12px;
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px; }
  .breadcrumb.small li a {
    font-family: arial, sans-serif; }
  .breadcrumb.medium a {
    height: 30px;
    line-height: 30px;
    font-size: 16px; }
  .breadcrumb.large a {
    font-size: 23px;
    line-height: 32px;
    height: 32px; }
  .breadcrumb.large li:before, .breadcrumb.large li:after {
    border-width: 16px 0 16px 9px; }
  .breadcrumb.large li a {
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-weight: 600; }
  .breadcrumb li {
    display: inline-block;
    margin: 0 7px 0 0;
    position: relative;
    background: rgba(0, 0, 0, 0.5); }
    .breadcrumb li:before, .breadcrumb li:after {
      content: " ";
      position: absolute;
      top: 0;
      background: transparent;
      border-style: solid;
      height: 0;
      width: 0;
      border-width: 15px 0 15px 9px; }
    .breadcrumb li:before {
      left: -9px;
      border-color: rgba(0, 0, 0, 0.5) transparent; }
    .breadcrumb li:after {
      right: -9px;
      border-color: transparent transparent transparent rgba(0, 0, 0, 0.5); }
    .breadcrumb li a {
      display: block;
      padding: 0 12px 0 10px;
      cursor: pointer;
      text-decoration: none; }
    .breadcrumb li:first-of-type:before {
      display: none; }
    .breadcrumb li:first-of-type:after {
      border-color: transparent transparent transparent rgba(0, 0, 0, 0.5); }
    .breadcrumb li:first-of-type a {
      padding-left: 16px; }
    .breadcrumb li:hover, .breadcrumb li:active {
      background: rgba(0, 0, 0, 0.7); }
      .breadcrumb li:hover:before, .breadcrumb li:active:before {
        border-color: rgba(0, 0, 0, 0.7) transparent; }
      .breadcrumb li:hover:after, .breadcrumb li:active:after {
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.7); }
      .breadcrumb li:hover:first-of-type:before, .breadcrumb li:active:first-of-type:before {
        display: none; }
      .breadcrumb li:hover:first-of-type:after, .breadcrumb li:active:first-of-type:after {
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.7); }
    .breadcrumb li:last-of-type {
      cursor: default;
      background: rgba(0, 0, 0, 0.6); }
      .breadcrumb li:last-of-type:before {
        border-color: rgba(0, 0, 0, 0.6) transparent; }
      .breadcrumb li:last-of-type:after {
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.6); }
      .breadcrumb li:last-of-type:first-of-type:before {
        display: none; }
      .breadcrumb li:last-of-type:first-of-type:after {
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.6); }

@-webkit-keyframes icon-distort {
  0% {
    -webkit-transform: translateX(-1px); }

  25% {
    -webkit-transform: translateX(0);
    -webkit-filter: drop-shadow(red -2px 0 0);
    -moz-filter: drop-shadow(red -2px 0 0);
    -ms-filter: drop-shadow(red -2px 0 0);
    -o-filter: drop-shadow(red -2px 0 0);
    filter: drop-shadow(red -2px 0 0); }

  50% {
    -webkit-transform: translateX(1px);
    -webkit-filter: drop-shadow(green 2px 0 0);
    -moz-filter: drop-shadow(green 2px 0 0);
    -ms-filter: drop-shadow(green 2px 0 0);
    -o-filter: drop-shadow(green 2px 0 0);
    filter: drop-shadow(green 2px 0 0); }

  75% {
    -webkit-transform: translateX(0);
    -webkit-filter: drop-shadow(red -5px 0 0);
    -moz-filter: drop-shadow(red -5px 0 0);
    -ms-filter: drop-shadow(red -5px 0 0);
    -o-filter: drop-shadow(red -5px 0 0);
    filter: drop-shadow(red -5px 0 0); }

  100% {
    -webkit-filter: drop-shadow(green 5px 0 0);
    -moz-filter: drop-shadow(green 5px 0 0);
    -ms-filter: drop-shadow(green 5px 0 0);
    -o-filter: drop-shadow(green 5px 0 0);
    filter: drop-shadow(green 5px 0 0); } }

@-moz-keyframes icon-distort {
  0% {
    -moz-transform: translateX(-1px); }

  25% {
    -moz-transform: translateX(0);
    -webkit-filter: drop-shadow(red -2px 0 0);
    -moz-filter: drop-shadow(red -2px 0 0);
    -ms-filter: drop-shadow(red -2px 0 0);
    -o-filter: drop-shadow(red -2px 0 0);
    filter: drop-shadow(red -2px 0 0); }

  50% {
    -moz-transform: translateX(1px);
    -webkit-filter: drop-shadow(green 2px 0 0);
    -moz-filter: drop-shadow(green 2px 0 0);
    -ms-filter: drop-shadow(green 2px 0 0);
    -o-filter: drop-shadow(green 2px 0 0);
    filter: drop-shadow(green 2px 0 0); }

  75% {
    -moz-transform: translateX(0);
    -webkit-filter: drop-shadow(red -5px 0 0);
    -moz-filter: drop-shadow(red -5px 0 0);
    -ms-filter: drop-shadow(red -5px 0 0);
    -o-filter: drop-shadow(red -5px 0 0);
    filter: drop-shadow(red -5px 0 0); }

  100% {
    -webkit-filter: drop-shadow(green 5px 0 0);
    -moz-filter: drop-shadow(green 5px 0 0);
    -ms-filter: drop-shadow(green 5px 0 0);
    -o-filter: drop-shadow(green 5px 0 0);
    filter: drop-shadow(green 5px 0 0); } }

@-o-keyframes icon-distort {
  0% {
    -o-transform: translateX(-1px); }

  25% {
    -o-transform: translateX(0);
    -webkit-filter: drop-shadow(red -2px 0 0);
    -moz-filter: drop-shadow(red -2px 0 0);
    -ms-filter: drop-shadow(red -2px 0 0);
    -o-filter: drop-shadow(red -2px 0 0);
    filter: drop-shadow(red -2px 0 0); }

  50% {
    -o-transform: translateX(1px);
    -webkit-filter: drop-shadow(green 2px 0 0);
    -moz-filter: drop-shadow(green 2px 0 0);
    -ms-filter: drop-shadow(green 2px 0 0);
    -o-filter: drop-shadow(green 2px 0 0);
    filter: drop-shadow(green 2px 0 0); }

  75% {
    -o-transform: translateX(0);
    -webkit-filter: drop-shadow(red -5px 0 0);
    -moz-filter: drop-shadow(red -5px 0 0);
    -ms-filter: drop-shadow(red -5px 0 0);
    -o-filter: drop-shadow(red -5px 0 0);
    filter: drop-shadow(red -5px 0 0); }

  100% {
    -webkit-filter: drop-shadow(green 5px 0 0);
    -moz-filter: drop-shadow(green 5px 0 0);
    -ms-filter: drop-shadow(green 5px 0 0);
    -o-filter: drop-shadow(green 5px 0 0);
    filter: drop-shadow(green 5px 0 0); } }

@keyframes icon-distort {
  0% {
    transform: translateX(-1px); }

  25% {
    transform: translateX(0);
    -webkit-filter: drop-shadow(red -2px 0 0);
    -moz-filter: drop-shadow(red -2px 0 0);
    -ms-filter: drop-shadow(red -2px 0 0);
    -o-filter: drop-shadow(red -2px 0 0);
    filter: drop-shadow(red -2px 0 0); }

  50% {
    transform: translateX(1px);
    -webkit-filter: drop-shadow(green 2px 0 0);
    -moz-filter: drop-shadow(green 2px 0 0);
    -ms-filter: drop-shadow(green 2px 0 0);
    -o-filter: drop-shadow(green 2px 0 0);
    filter: drop-shadow(green 2px 0 0); }

  75% {
    transform: translateX(0);
    -webkit-filter: drop-shadow(red -5px 0 0);
    -moz-filter: drop-shadow(red -5px 0 0);
    -ms-filter: drop-shadow(red -5px 0 0);
    -o-filter: drop-shadow(red -5px 0 0);
    filter: drop-shadow(red -5px 0 0); }

  100% {
    -webkit-filter: drop-shadow(green 5px 0 0);
    -moz-filter: drop-shadow(green 5px 0 0);
    -ms-filter: drop-shadow(green 5px 0 0);
    -o-filter: drop-shadow(green 5px 0 0);
    filter: drop-shadow(green 5px 0 0); } }

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: baseline;
  background: url(../ui/icons-small.png) no-repeat; }
  [class^="icon-"]:after, [class*=" icon-"]:after {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 0.7;
    color: #8A8A8A; }
  [class^="icon-"] + span, [class*=" icon-"] + span {
    margin-left: 4px; }
  [class^="icon-"].icon-fairfight, [class*=" icon-"].icon-fairfight {
    background: url("../base/shared/icon-ff.png");
    width: 17px;
    height: 13px;
    vertical-align: middle; }
  [class^="icon-"].icon-punkbuster, [class*=" icon-"].icon-punkbuster {
    background: url("../base/shared/icon-pb.png");
    width: 17px;
    height: 13px;
    vertical-align: middle; }
  [class^="icon-"].disabled, [class*=" icon-"].disabled {
    opacity: 0.25; }

.distort-icon:hover [class^="icon-"], .distort-icon:hover [class*=" icon-"] {
  -webkit-animation: icon-distort 0.1s linear 2;
  -moz-animation: icon-distort 0.1s linear 2;
  animation: icon-distort 0.1s linear 2; }

.icon-blue.icon-home {
  background-position: -0px -0px; }
.icon-blue.icon-friends {
  background-position: -0px -14px; }
.icon-blue.icon-servers {
  background-position: -0px -28px; }
.icon-blue.icon-cogwheel {
  background-position: -0px -42px; }
.icon-blue.icon-pen {
  background-position: -0px -56px; }
.icon-blue.icon-fan {
  background-position: -0px -70px; }
.icon-blue.icon-pulse {
  background-position: -0px -84px; }
.icon-blue.icon-check {
  background-position: -0px -98px; }
.icon-blue.icon-person {
  background-position: -0px -112px; }
.icon-blue.icon-insignia {
  background-position: -0px -126px; }
.icon-blue.icon-weapon {
  background-position: -0px -140px; }
.icon-blue.icon-wheel {
  background-position: -0px -154px; }
.icon-blue.icon-medal {
  background-position: -0px -168px; }
.icon-blue.icon-dogtags {
  background-position: -0px -182px; }
.icon-blue.icon-lock {
  background-position: -0px -196px; }
.icon-blue.icon-clock {
  background-position: -0px -210px; }
.icon-blue.icon-star {
  background-position: -0px -224px; }
.icon-blue.icon-briefcase {
  background-position: -0px -238px; }
.icon-blue.icon-checkbox {
  background-position: -0px -252px; }
.icon-blue.icon-chartbars {
  background-position: -0px -266px; }
.icon-blue.icon-skull {
  background-position: -0px -280px; }
.icon-blue.icon-ring {
  background-position: -0px -294px; }
.icon-blue.icon-tank {
  background-position: -0px -308px; }
.icon-blue.icon-jet {
  background-position: -0px -322px; }
.icon-blue.icon-friends2 {
  background-position: -0px -336px; }
.icon-blue.icon-matches {
  background-position: -0px -350px; }
.icon-blue.icon-mobile {
  background-position: -0px -364px; }
.icon-blue.icon-origin {
  background-position: -0px -378px; }
.icon-blue.icon-search {
  background-position: -0px -392px; }
.icon-blue.icon-help {
  background-position: -0px -406px; }
.icon-blue.icon-club {
  background-position: -0px -420px; }
.icon-blue.icon-battlepack {
  background-position: -0px -434px; }
.icon-blue.icon-mission {
  background-position: -0px -448px; }

.icon-white.icon-home {
  background-position: -14px -0px; }
.icon-white.icon-friends {
  background-position: -14px -14px; }
.icon-white.icon-servers {
  background-position: -14px -28px; }
.icon-white.icon-cogwheel {
  background-position: -14px -42px; }
.icon-white.icon-pen {
  background-position: -14px -56px; }
.icon-white.icon-fan {
  background-position: -14px -70px; }
.icon-white.icon-pulse {
  background-position: -14px -84px; }
.icon-white.icon-check {
  background-position: -14px -98px; }
.icon-white.icon-person {
  background-position: -14px -112px; }
.icon-white.icon-insignia {
  background-position: -14px -126px; }
.icon-white.icon-weapon {
  background-position: -14px -140px; }
.icon-white.icon-wheel {
  background-position: -14px -154px; }
.icon-white.icon-medal {
  background-position: -14px -168px; }
.icon-white.icon-dogtags {
  background-position: -14px -182px; }
.icon-white.icon-lock {
  background-position: -14px -196px; }
.icon-white.icon-clock {
  background-position: -14px -210px; }
.icon-white.icon-star {
  background-position: -14px -224px; }
.icon-white.icon-briefcase {
  background-position: -14px -238px; }
.icon-white.icon-checkbox {
  background-position: -14px -252px; }
.icon-white.icon-chartbars {
  background-position: -14px -266px; }
.icon-white.icon-skull {
  background-position: -14px -280px; }
.icon-white.icon-ring {
  background-position: -14px -294px; }
.icon-white.icon-tank {
  background-position: -14px -308px; }
.icon-white.icon-jet {
  background-position: -14px -322px; }
.icon-white.icon-friends2 {
  background-position: -14px -336px; }
.icon-white.icon-matches {
  background-position: -14px -350px; }
.icon-white.icon-mobile {
  background-position: -14px -364px; }
.icon-white.icon-origin {
  background-position: -14px -378px; }
.icon-white.icon-search {
  background-position: -14px -392px; }
.icon-white.icon-help {
  background-position: -14px -406px; }
.icon-white.icon-club {
  background-position: -14px -420px; }
.icon-white.icon-battlepack {
  background-position: -14px -434px; }
.icon-white.icon-mission {
  background-position: -14px -448px; }

.icon-grey.icon-home {
  background-position: -28px -0px; }
.icon-grey.icon-friends {
  background-position: -28px -14px; }
.icon-grey.icon-servers {
  background-position: -28px -28px; }
.icon-grey.icon-cogwheel {
  background-position: -28px -42px; }
.icon-grey.icon-pen {
  background-position: -28px -56px; }
.icon-grey.icon-fan {
  background-position: -28px -70px; }
.icon-grey.icon-pulse {
  background-position: -28px -84px; }
.icon-grey.icon-check {
  background-position: -28px -98px; }
.icon-grey.icon-person {
  background-position: -28px -112px; }
.icon-grey.icon-insignia {
  background-position: -28px -126px; }
.icon-grey.icon-weapon {
  background-position: -28px -140px; }
.icon-grey.icon-wheel {
  background-position: -28px -154px; }
.icon-grey.icon-medal {
  background-position: -28px -168px; }
.icon-grey.icon-dogtags {
  background-position: -28px -182px; }
.icon-grey.icon-lock {
  background-position: -28px -196px; }
.icon-grey.icon-clock {
  background-position: -28px -210px; }
.icon-grey.icon-star {
  background-position: -28px -224px; }
.icon-grey.icon-briefcase {
  background-position: -28px -238px; }
.icon-grey.icon-checkbox {
  background-position: -28px -252px; }
.icon-grey.icon-chartbars {
  background-position: -28px -266px; }
.icon-grey.icon-skull {
  background-position: -28px -280px; }
.icon-grey.icon-ring {
  background-position: -28px -294px; }
.icon-grey.icon-tank {
  background-position: -28px -308px; }
.icon-grey.icon-jet {
  background-position: -28px -322px; }
.icon-grey.icon-friends2 {
  background-position: -28px -336px; }
.icon-grey.icon-matches {
  background-position: -28px -350px; }
.icon-grey.icon-mobile {
  background-position: -28px -364px; }
.icon-grey.icon-origin {
  background-position: -28px -378px; }
.icon-grey.icon-search {
  background-position: -28px -392px; }
.icon-grey.icon-help {
  background-position: -28px -406px; }
.icon-grey.icon-club {
  background-position: -28px -420px; }
.icon-grey.icon-battlepack {
  background-position: -28px -434px; }
.icon-grey.icon-mission {
  background-position: -28px -448px; }

.icon-black.icon-home {
  background-position: -42px -0px; }
.icon-black.icon-friends {
  background-position: -42px -14px; }
.icon-black.icon-servers {
  background-position: -42px -28px; }
.icon-black.icon-cogwheel {
  background-position: -42px -42px; }
.icon-black.icon-pen {
  background-position: -42px -56px; }
.icon-black.icon-fan {
  background-position: -42px -70px; }
.icon-black.icon-pulse {
  background-position: -42px -84px; }
.icon-black.icon-check {
  background-position: -42px -98px; }
.icon-black.icon-person {
  background-position: -42px -112px; }
.icon-black.icon-insignia {
  background-position: -42px -126px; }
.icon-black.icon-weapon {
  background-position: -42px -140px; }
.icon-black.icon-wheel {
  background-position: -42px -154px; }
.icon-black.icon-medal {
  background-position: -42px -168px; }
.icon-black.icon-dogtags {
  background-position: -42px -182px; }
.icon-black.icon-lock {
  background-position: -42px -196px; }
.icon-black.icon-clock {
  background-position: -42px -210px; }
.icon-black.icon-star {
  background-position: -42px -224px; }
.icon-black.icon-briefcase {
  background-position: -42px -238px; }
.icon-black.icon-checkbox {
  background-position: -42px -252px; }
.icon-black.icon-chartbars {
  background-position: -42px -266px; }
.icon-black.icon-skull {
  background-position: -42px -280px; }
.icon-black.icon-ring {
  background-position: -42px -294px; }
.icon-black.icon-tank {
  background-position: -42px -308px; }
.icon-black.icon-jet {
  background-position: -42px -322px; }
.icon-black.icon-friends2 {
  background-position: -42px -336px; }
.icon-black.icon-matches {
  background-position: -42px -350px; }
.icon-black.icon-mobile {
  background-position: -42px -364px; }
.icon-black.icon-origin {
  background-position: -42px -378px; }
.icon-black.icon-search {
  background-position: -42px -392px; }
.icon-black.icon-help {
  background-position: -42px -406px; }
.icon-black.icon-club {
  background-position: -42px -420px; }
.icon-black.icon-battlepack {
  background-position: -42px -434px; }
.icon-black.icon-mission {
  background-position: -42px -448px; }

.icon-yellow.icon-home {
  background-position: -56px -0px; }
.icon-yellow.icon-friends {
  background-position: -56px -14px; }
.icon-yellow.icon-servers {
  background-position: -56px -28px; }
.icon-yellow.icon-cogwheel {
  background-position: -56px -42px; }
.icon-yellow.icon-pen {
  background-position: -56px -56px; }
.icon-yellow.icon-fan {
  background-position: -56px -70px; }
.icon-yellow.icon-pulse {
  background-position: -56px -84px; }
.icon-yellow.icon-check {
  background-position: -56px -98px; }
.icon-yellow.icon-person {
  background-position: -56px -112px; }
.icon-yellow.icon-insignia {
  background-position: -56px -126px; }
.icon-yellow.icon-weapon {
  background-position: -56px -140px; }
.icon-yellow.icon-wheel {
  background-position: -56px -154px; }
.icon-yellow.icon-medal {
  background-position: -56px -168px; }
.icon-yellow.icon-dogtags {
  background-position: -56px -182px; }
.icon-yellow.icon-lock {
  background-position: -56px -196px; }
.icon-yellow.icon-clock {
  background-position: -56px -210px; }
.icon-yellow.icon-star {
  background-position: -56px -224px; }
.icon-yellow.icon-briefcase {
  background-position: -56px -238px; }
.icon-yellow.icon-checkbox {
  background-position: -56px -252px; }
.icon-yellow.icon-chartbars {
  background-position: -56px -266px; }
.icon-yellow.icon-skull {
  background-position: -56px -280px; }
.icon-yellow.icon-ring {
  background-position: -56px -294px; }
.icon-yellow.icon-tank {
  background-position: -56px -308px; }
.icon-yellow.icon-jet {
  background-position: -56px -322px; }
.icon-yellow.icon-friends2 {
  background-position: -56px -336px; }
.icon-yellow.icon-matches {
  background-position: -56px -350px; }
.icon-yellow.icon-mobile {
  background-position: -56px -364px; }
.icon-yellow.icon-origin {
  background-position: -56px -378px; }
.icon-yellow.icon-search {
  background-position: -56px -392px; }
.icon-yellow.icon-help {
  background-position: -56px -406px; }
.icon-yellow.icon-club {
  background-position: -56px -420px; }
.icon-yellow.icon-battlepack {
  background-position: -56px -434px; }
.icon-yellow.icon-mission {
  background-position: -56px -448px; }

.icon-lined.icon-home {
  background-position: -70px -0px; }
.icon-lined.icon-friends {
  background-position: -70px -14px; }
.icon-lined.icon-servers {
  background-position: -70px -28px; }
.icon-lined.icon-cogwheel {
  background-position: -70px -42px; }
.icon-lined.icon-pen {
  background-position: -70px -56px; }
.icon-lined.icon-fan {
  background-position: -70px -70px; }
.icon-lined.icon-pulse {
  background-position: -70px -84px; }
.icon-lined.icon-check {
  background-position: -70px -98px; }
.icon-lined.icon-person {
  background-position: -70px -112px; }
.icon-lined.icon-insignia {
  background-position: -70px -126px; }
.icon-lined.icon-weapon {
  background-position: -70px -140px; }
.icon-lined.icon-wheel {
  background-position: -70px -154px; }
.icon-lined.icon-medal {
  background-position: -70px -168px; }
.icon-lined.icon-dogtags {
  background-position: -70px -182px; }
.icon-lined.icon-lock {
  background-position: -70px -196px; }
.icon-lined.icon-clock {
  background-position: -70px -210px; }
.icon-lined.icon-star {
  background-position: -70px -224px; }
.icon-lined.icon-briefcase {
  background-position: -70px -238px; }
.icon-lined.icon-checkbox {
  background-position: -70px -252px; }
.icon-lined.icon-chartbars {
  background-position: -70px -266px; }
.icon-lined.icon-skull {
  background-position: -70px -280px; }
.icon-lined.icon-ring {
  background-position: -70px -294px; }
.icon-lined.icon-tank {
  background-position: -70px -308px; }
.icon-lined.icon-jet {
  background-position: -70px -322px; }
.icon-lined.icon-friends2 {
  background-position: -70px -336px; }
.icon-lined.icon-matches {
  background-position: -70px -350px; }
.icon-lined.icon-mobile {
  background-position: -70px -364px; }
.icon-lined.icon-origin {
  background-position: -70px -378px; }
.icon-lined.icon-search {
  background-position: -70px -392px; }
.icon-lined.icon-help {
  background-position: -70px -406px; }
.icon-lined.icon-club {
  background-position: -70px -420px; }
.icon-lined.icon-battlepack {
  background-position: -70px -434px; }
.icon-lined.icon-mission {
  background-position: -70px -448px; }

.icon-custom {
  background: none;
  vertical-align: text-top; }
  .icon-custom.icon-origin {
    width: 15px;
    height: 20px;
    background-image: url(../originconnect/originicon.png);
    margin-top: -1px; }
  .icon-custom.icon-close {
    background: url("../base/shared/row_icon_chat.png");
    background-position: 0 26px;
    width: 13px;
    height: 13px; }
    .icon-custom.icon-close:hover {
      background-position: 0 13px; }
    .icon-custom.icon-close.inverted {
      background-image: url("../base/shared/row_icon_chat_light.png"); }

.icon-dialog-close {
  background: url("../base/shared/dark-close.png") center center no-repeat;
  width: 30px;
  height: 30px;
  padding-right: 6px;
  right: 0 !important;
  top: 1px !important;
  opacity: 0.6; }
  .icon-dialog-close:hover {
    opacity: 1; }

.icon-platform, .icon-platform-big {
  background: url(../common/icons/platforms.png);
  height: 10px; }
  .icon-platform.ps3, .icon-platform-big.ps3 {
    background-position: 0 0;
    width: 41px; }
    .active .icon-platform.ps3, .icon-platform.ps3.inverted, .active .icon-platform-big.ps3, .icon-platform-big.ps3.inverted {
      background-position: -61px 50px; }
  .icon-platform.pc, .icon-platform-big.pc {
    width: 18px;
    background-position: 0 -10px; }
    .active .icon-platform.pc, .icon-platform.pc.black, .icon-platform.pc.inverted, .active .icon-platform-big.pc, .icon-platform-big.pc.black, .icon-platform-big.pc.inverted {
      background-position: -61px -10px; }
  .icon-platform.xbox, .icon-platform-big.xbox {
    background-position: -61px -18px; }
    .active .icon-platform.xbox, .icon-platform.xbox.inverted, .active .icon-platform-big.xbox, .icon-platform-big.xbox.inverted {
      background-position: 0 -18px; }
  .icon-platform.xbox360, .icon-platform-big.xbox360 {
    width: 58px;
    background-position: 0 -20px; }
    .icon-platform.xbox360.inverted, .icon-platform-big.xbox360.inverted {
      background-position: -61px -20px; }
  .icon-platform.ps4, .icon-platform-big.ps4 {
    width: 42px;
    background-position: -61px -30px; }
    .icon-platform.ps4.inverted, .icon-platform-big.ps4.inverted {
      background-position: 0 -30px; }
  .icon-platform.xboxone, .icon-platform-big.xboxone {
    width: 60px;
    background-position: -61px -40px; }
    .icon-platform.xboxone.inverted, .icon-platform-big.xboxone.inverted {
      background-position: 0 -40px; }

.icon-game {
  width: 16px;
  height: 13px;
  vertical-align: middle; }
  .icon-game.bf3 {
    background-image: url(../common/game_icons_venice_hori.png);
    background-position: 0 0; }
    .icon-game.bf3.bright {
      background-position: -41px 0; }
  .icon-game.mohw {
    width: 30px;
    background-image: url(../common/game_icons_mohw_hori.png);
    background-position: 0 0; }
    .icon-game.mohw.bright {
      background-position: -70px 0; }
  .icon-game.bf4 {
    background-image: url(../common/icons/bf4-platforms-horizontal.png);
    background-position: 0 0; }
  .icon-game.bfh {
    background-image: url(../common/icons/bfh-platforms-horizontal.png);
    background-position: -66px -1px;
    width: 19px;
    height: 12px; }
    .icon-game.bfh.bright {
      background-position: 0 -1px; }

.icon-skillmatch {
  background-image: url(../common/competitive_icon_2.png);
  height: 14px;
  width: 18px;
  margin-right: 4px !important;
  margin-left: -2px; }
  .icon-skillmatch.inverted {
    background-image: url(../common/competitive_icon_2_inverted.png); }

/* \\\\\\\\\\\\\\\\\ START GAMEICONS ///////////////// */
.common-gameicon-hori {
  display: inline-block;
  width: 26px;
  height: 13px;
  background-image: url(../common/game_icons_venice_hori.png); }

.common-gameicon {
  display: inline-block;
  width: 26px;
  height: 19px;
  background-image: url(../common/game_icons_venice.png); }

/* ----------------- BFBC2 ----------------- */
.common-game-1-4 {
  background-position: 0 0; }

.common-game-1-1 {
  background-position: 0 -20px; }

.common-game-1-2 {
  background-position: 0 -40px; }

.common-game-1-4-exp {
  background-position: 0 -60px; }

.common-game-1-1-exp {
  background-position: 0 -80px; }

.common-game-1-2-exp {
  background-position: 0 -100px; }

/* ----------------- Unknown & Unknown bright ----------------- */
.common-game-0-1, .common-game-0-2, .common-game-0-4, .common-game-0-1.bright, .common-game-0-2.bright, .common-game-0-4.bright, .common-game-0-1-exp.bright, .common-game-0-2-exp.bright, .common-game-0-4-exp.bright, .common-gameicon-hori.common-game-0-1.bright, .common-gameicon-hori.common-game-0-2.bright, .common-gameicon-hori.common-game-0-4.bright, .common-gameicon-hori.common-game-0-1-exp.bright, .common-gameicon-hori.common-game-0-2-exp.bright, .common-gameicon-hori.common-game-0-4-exp.bright, .common-gameicon-hori.common-game-0-1, .common-gameicon-hori.common-game-0-2, .common-gameicon-hori.common-game-0-4 {
  background: red; }

/* ----------------- BFBC2 bright ----------------- */
.common-game-1-4.bright {
  background-position: 26px 0; }

.common-game-1-1.bright {
  background-position: 26px -20px; }

.common-game-1-2.bright {
  background-position: 26px -40px; }

.common-game-1-4-exp.bright {
  background-position: 26px -60px; }

.common-game-1-1-exp.bright {
  background-position: 26px -80px; }

.common-game-1-2-exp.bright {
  background-position: 26px -100px; }

/* ----------------- BFBC2 horizontal bright ----------------- */
.common-gameicon-hori.common-game-1-4.bright {
  width: 50px;
  background-position: -50px 0; }

.common-gameicon-hori.common-game-1-1.bright {
  width: 41px;
  background-position: -32px -13px; }

.common-gameicon-hori.common-game-1-2.bright {
  width: 48px;
  background-position: -48px -26px; }

.common-gameicon-hori.common-game-1-4-exp.bright {
  width: 52px;
  background-position: -52px -39px; }

.common-gameicon-hori.common-game-1-1-exp.bright {
  width: 43px;
  background-position: -43px -52px; }

.common-gameicon-hori.common-game-1-2-exp.bright {
  width: 50px;
  background-position: -50px -65px; }

/* ----------------- BFBC2 horizontal ----------------- */
.common-gameicon-hori.common-game-1-4 {
  width: 50px;
  background-position: 0 0; }

.common-gameicon-hori.common-game-1-1 {
  width: 32px;
  background-position: 0 -13px; }

.common-gameicon-hori.common-game-1-2 {
  width: 48px;
  background-position: 0 -26px; }

.common-gameicon-hori.common-game-1-4-exp {
  width: 52px;
  background-position: 0 -39px; }

.common-gameicon-hori.common-game-1-1-exp {
  width: 43px;
  background-position: 0 -52px; }

.common-gameicon-hori.common-game-1-2-exp {
  width: 50px;
  background-position: 0 -65px; }

/* ----------------- BF3 ----------------- */
.common-game-2-1-exp, .common-game-2-2-exp, .common-game-2-4-exp, .common-game-2-4, .common-game-2-1, .common-game-2-2 {
  background-image: url(../common/game_icons_venice.png); }

.common-game-2-4 {
  background-position: 0 0; }

.common-game-2-1 {
  background-position: 0 -20px; }

.common-game-2-2 {
  background-position: 0 -40px; }

.common-game-2-4-exp {
  background-position: 0 -72px; }

.common-game-2-1-exp {
  background-position: 0 40px; }

.common-game-2-2-exp {
  background-position: 0 -100px; }

/* ----------------- BF3 horizontal ----------------- */
.common-gameicon-hori.common-game-2-0-exp, .common-gameicon-hori.common-game-2-4-exp, .common-gameicon-hori.common-game-2-1-exp, .common-gameicon-hori.common-game-2-2-exp, .common-gameicon-hori.common-game-2-0, .common-gameicon-hori.common-game-2-4, .common-gameicon-hori.common-game-2-1, .common-gameicon-hori.common-game-2-2 {
  background-image: url(../common/game_icons_venice_hori.png); }

.common-gameicon-hori.common-game-2-0 {
  width: 15px;
  background-position: 0 0; }

.common-gameicon-hori.common-game-2-4 {
  width: 41px;
  background-position: 0 0; }

.common-gameicon-hori.common-game-2-1 {
  width: 32px;
  background-position: 0 -14px; }

.common-gameicon-hori.common-game-2-2 {
  width: 39px;
  background-position: 0 -26px; }

.common-gameicon-hori.common-game-2-0-exp {
  width: 20px;
  background-position: 0 39px; }

.common-gameicon-hori.common-game-2-4-exp {
  width: 46px;
  background-position: 0 39px; }

.common-gameicon-hori.common-game-2-1-exp {
  width: 37px;
  background-position: 0 -52px; }

.common-gameicon-hori.common-game-2-2-exp {
  width: 44px;
  background-position: 0 13px; }

/* ----------------- BF3 bright ----------------- */
.common-game-2-4-exp.bright, .common-game-2-1-exp.bright, .common-game-2-2-exp.bright, .common-game-2-4.bright, .common-game-2-1.bright, .common-game-2-2.bright {
  background-image: url(../common/game_icons_venice.png); }

.common-game-2-4.bright {
  background-position: 26px 0; }

.common-game-2-1.bright {
  background-position: 26px -20px; }

.common-game-2-2.bright {
  background-position: 26px -40px; }

.common-game-2-4-exp.bright {
  background-position: 26px -60px; }

.common-game-2-1-exp.bright {
  background-position: 26px -80px; }

.common-game-2-2-exp.bright {
  background-position: 26px -100px; }

/* ----------------- BF3 horizontal bright ----------------- */
.common-gameicon-hori.common-game-2-0-exp.bright, .common-gameicon-hori.common-game-2-4-exp.bright, .common-gameicon-hori.common-game-2-1-exp.bright, .common-gameicon-hori.common-game-2-2-exp.bright, .common-gameicon-hori.common-game-2-0.bright, .common-gameicon-hori.common-game-2-4.bright, .common-gameicon-hori.common-game-2-1.bright, .common-gameicon-hori.common-game-2-2.bright {
  background-image: url(../common/game_icons_venice_hori.png); }

.common-gameicon-hori.common-game-2-0.bright {
  width: 15px;
  background-position: -41px 0; }

.common-gameicon-hori.common-game-2-4.bright {
  width: 41px;
  background-position: -41px 0; }

.common-gameicon-hori.common-game-2-1.bright {
  width: 32px;
  background-position: -32px -14px; }

.common-gameicon-hori.common-game-2-2.bright {
  width: 39px;
  background-position: -39px -26px; }

.common-gameicon-hori.common-game-2-0-exp.bright {
  width: 20px;
  background-position: -46px 39px; }

.common-gameicon-hori.common-game-2-4-exp.bright {
  width: 45px;
  background-position: -46px 39px; }

.common-gameicon-hori.common-game-2-1-exp.bright {
  width: 37px;
  background-position: -37px 25px; }

.common-gameicon-hori.common-game-2-2-exp.bright {
  width: 44px;
  background-position: 0 -65px; }

/* ----------------- MOHW horizontal ----------------- */
.common-gameicon-hori.common-game-4096-0-exp, .common-gameicon-hori.common-game-4096-4-exp, .common-gameicon-hori.common-game-4096-1-exp, .common-gameicon-hori.common-game-4096-2-exp, .common-gameicon-hori.common-game-4096-0, .common-gameicon-hori.common-game-4096-4, .common-gameicon-hori.common-game-4096-1, .common-gameicon-hori.common-game-4096-2 {
  background-image: url(../common/game_icons_mohw_hori.png);
  height: 13px; }

.common-gameicon-hori.common-game-4096-0 {
  width: 30px;
  background-position: 0 0; }

.common-gameicon-hori.common-game-4096-4 {
  width: 57px;
  background-position: 0 0; }

.common-gameicon-hori.common-game-4096-1 {
  width: 47px;
  background-position: 0 -14px; }

.common-gameicon-hori.common-game-4096-2 {
  width: 54px;
  background-position: 0 -26px; }

.common-gameicon-hori.common-game-4096-0-exp {
  width: 37px;
  background-position: 0 -52px; }

.common-gameicon-hori.common-game-4096-4-exp {
  width: 64px;
  background-position: 0 39px; }

.common-gameicon-hori.common-game-4096-1-exp {
  width: 37px;
  background-position: 0 -52px; }

.common-gameicon-hori.common-game-4096-2-exp {
  width: 62px;
  background-position: 0 13px; }

/* ----------------- MOHW horizontal bright-----------------  */
.common-gameicon-hori.common-game-4096-0-exp.bright, .common-gameicon-hori.common-game-4096-4-exp.bright, .common-gameicon-hori.common-game-4096-1-exp.bright, .common-gameicon-hori.common-game-4096-2-exp.bright, .common-gameicon-hori.common-game-4096-0.bright, .common-gameicon-hori.common-game-4096-4.bright, .common-gameicon-hori.common-game-4096-1.bright, .common-gameicon-hori.common-game-4096-2.bright {
  background-image: url(../common/game_icons_mohw_hori.png);
  height: 13px; }

.common-gameicon-hori.common-game-4096-0.bright {
  width: 30px;
  background-position: -70px 0; }

.common-gameicon-hori.common-game-4096-4.bright {
  width: 57px;
  background-position: -70px 0; }

.common-gameicon-hori.common-game-4096-1.bright {
  width: 48px;
  background-position: -70px -13px; }

.common-gameicon-hori.common-game-4096-2.bright {
  width: 55px;
  background-position: -70px -25px; }

.common-gameicon-hori.common-game-4096-0-exp.bright {
  width: 37px;
  background-position: -70px 39px; }

.common-gameicon-hori.common-game-4096-4-exp.bright {
  width: 64px;
  background-position: -70px 39px; }

.common-gameicon-hori.common-game-4096-1-exp.bright {
  width: 54px;
  background-position: -70px 25px; }

.common-gameicon-hori.common-game-4096-2-exp.bright {
  width: 63px;
  background-position: -70px -65px; }

/* ----------------- MOHW ----------------- */
.common-game-4096-1-exp, .common-game-4096-2-exp, .common-game-4096-4-exp, .common-game-4096-4, .common-game-4096-1, .common-game-4096-2 {
  background-image: url(../common/game_icons_mohw.png);
  height: 17px; }

.common-game-4096-4 {
  background-position: 0 0;
  width: 31px; }

.common-game-4096-1 {
  background-position: 0 -16px;
  width: 31px; }

.common-game-4096-2 {
  background-position: 0 -32px;
  width: 30px; }

.common-game-4096-4-exp {
  background-position: 0 -48px;
  width: 38px; }

.common-game-4096-1-exp {
  background-position: 0 -64px;
  width: 38px; }

.common-game-4096-2-exp {
  background-position: 0 -81px;
  width: 38px; }

/* ----------------- MOHW bright ----------------- */
.common-game-4096-4-exp.bright, .common-game-4096-1-exp.bright, .common-game-4096-2-exp.bright, .common-game-4096-4.bright, .common-game-4096-1.bright, .common-game-4096-2.bright {
  background-image: url(../common/game_icons_mohw.png);
  height: 17px; }

.common-game-4096-4.bright {
  background-position: -47px 0;
  width: 31px; }

.common-game-4096-1.bright {
  background-position: -47px -16px;
  width: 31px; }

.common-game-4096-2.bright {
  background-position: -47px -32px;
  width: 30px; }

.common-game-4096-4-exp.bright {
  background-position: -47px -48px;
  width: 38px; }

.common-game-4096-1-exp.bright {
  background-position: -47px -64px;
  width: 38px; }

.common-game-4096-2-exp.bright {
  background-position: -47px -81px;
  width: 38px; }

/* ----------------- Warsaw ----------------- */
.common-game-2048-0-exp, .common-game-2048-1-exp, .common-game-2048-2-exp, .common-game-2048-4-exp, .common-game-2048-8-exp, .common-game-2048-32-exp, .common-game-2048-64-exp, .common-game-2048-4, .common-game-2048-8, .common-game-2048-0, .common-game-2048-1, .common-game-2048-2, .common-game-2048-32, .common-game-2048-64 {
  background-image: url(../common/warsaw/game_icons_warsaw.png);
  height: 19px; }

.common-game-2048-0 {
  background-position: 0 158px;
  width: 26px; }

.common-game-2048-0-exp {
  background-position: 26px 158px;
  width: 26px; }

.common-game-2048-4 {
  background-position: 0 0;
  width: 26px; }

.common-game-2048-8 {
  background-position: 0 -40px;
  width: 26px; }

.common-game-2048-32 {
  background-position: 0 0;
  width: 26px; }

.common-game-2048-1 {
  background-position: -6px -20px;
  width: 17px; }

.common-game-2048-2 {
  background-position: -1px -40px;
  width: 25px; }

.common-game-2048-64 {
  background-position: -1px -40px;
  width: 25px; }

.common-game-2048-4-exp {
  background-position: 0 -59px;
  width: 26px; }

.common-game-2048-8-exp {
  background-position: 0 -100px;
  width: 26px; }

.common-game-2048-32-exp {
  background-position: 0 -59px;
  width: 26px; }

.common-game-2048-1-exp {
  background-position: -5px -79px;
  width: 21px; }

.common-game-2048-2-exp {
  background-position: -1px -100px;
  width: 25px; }

.common-game-2048-64-exp {
  background-position: -1px -100px;
  width: 25px; }

/* ----------------- Warsaw bright ----------------- */
.common-game-2048-4.bright {
  background-position: -26px 0;
  width: 26px; }

.common-game-2048-8.bright {
  background-position: -26px -40px;
  width: 26px; }

.common-game-2048-1.bright {
  background-position: -31px -20px;
  width: 17px; }

.common-game-2048-2.bright {
  background-position: -27px -40px;
  width: 25px; }

.common-game-2048-4-exp.bright {
  background-position: -27px -59px;
  width: 26px; }

.common-game-2048-8-exp.bright {
  background-position: -27px -100px;
  width: 26px; }

.common-game-2048-1-exp.bright {
  background-position: -31px -79px;
  width: 21px; }

.common-game-2048-2-exp.bright {
  background-position: -27px -100px;
  width: 25px; }

.common-gameicon-hori[class*="common-game-2048-"] {
  background: url(../common/icons/bf4-platforms-horizontal.png) no-repeat -60px -13px;
  height: 13px;
  width: 16px; }

.common-gameicon-hori.common-game-2048-1 {
  width: 32px;
  background-position: -60px -13px; }
  .common-gameicon-hori.common-game-2048-1.bright {
    background-position: 0 -13px; }

.common-gameicon-hori.common-game-2048-2 {
  width: 60px;
  background-position: -60px -26px; }
  .common-gameicon-hori.common-game-2048-2.bright {
    background-position: 0 -26px; }

.common-gameicon-hori.common-game-2048-4 {
  width: 41px;
  background-position: -60px 0; }
  .common-gameicon-hori.common-game-2048-4.bright {
    background-position: 0 0; }

.common-gameicon-hori.common-game-2048-8 {
  width: 41px;
  background-position: -60px -26px; }
  .common-gameicon-hori.common-game-2048-8.bright {
    background-position: 0 -26px; }

.common-gameicon-hori.common-game-2048-32 {
  width: 41px;
  background-position: -60px -39px; }
  .common-gameicon-hori.common-game-2048-32.bright {
    background-position: 0 -39px; }

.common-gameicon-hori.common-game-2048-64 {
  width: 60px;
  background-position: -60px -52px; }
  .common-gameicon-hori.common-game-2048-64.bright {
    background-position: 0 -52px; }

/* ----------------- BFH ----------------- */
.common-game-8192-4, .common-game-8192-8, .common-game-8192-0, .common-game-8192-1, .common-game-8192-2, .common-game-8192-32, .common-game-8192-64 {
  background-image: url(../common/game_icons_bfh.png);
  height: 19px; }

.common-game-8192-0 {
  background-position: 0 158px;
  width: 31px; }

.common-game-8192-4 {
  background-position: 0 0;
  width: 25px; }

.common-game-8192-8 {
  background-position: -2px -40px;
  width: 22px; }

.common-game-8192-32 {
  background-position: -1px -124px;
  width: 25px; }

.common-game-8192-1 {
  background-position: -4px -20px;
  width: 18px; }

.common-game-8192-2 {
  background-position: -2px -40px;
  width: 22px; }

.common-game-8192-64 {
  background-position: -2px -40px;
  width: 22px; }

/* ----------------- BFH bright ----------------- */
.common-game-8192-4.bright {
  background-position: -27px 0;
  width: 24px; }

.common-game-8192-8.bright {
  background-position: -28px -40px;
  width: 22px; }

.common-game-8192-1.bright {
  background-position: -31px -20px;
  width: 17px; }

.common-game-8192-2.bright {
  background-position: -28px -40px;
  width: 22px; }

.common-game-8192-32.bright {
  background-position: -28px -124px;
  width: 25px; }

.common-gameicon-hori[class*="common-game-8192-"] {
  background: url(../common/icons/bfh-platforms-horizontal.png) no-repeat -66px -13px;
  height: 13px;
  width: 37px; }

.common-gameicon-hori.common-game-8192-1-exp, .common-gameicon-hori.common-game-8192-1 {
  width: 37px;
  background-position: -66px -13px; }
  .common-gameicon-hori.common-game-8192-1-exp.bright, .common-gameicon-hori.common-game-8192-1.bright {
    background-position: 0 -13px; }

.common-gameicon-hori.common-game-8192-2-exp, .common-gameicon-hori.common-game-8192-2 {
  width: 65px;
  background-position: -66px -26px; }
  .common-gameicon-hori.common-game-8192-2-exp.bright, .common-gameicon-hori.common-game-8192-2.bright {
    background-position: 0 -26px; }

.common-gameicon-hori.common-game-8192-4-exp, .common-gameicon-hori.common-game-8192-4 {
  width: 46px;
  background-position: -66px 0; }
  .common-gameicon-hori.common-game-8192-4-exp.bright, .common-gameicon-hori.common-game-8192-4.bright {
    background-position: 0 0; }

.common-gameicon-hori.common-game-8192-8-exp, .common-gameicon-hori.common-game-8192-8 {
  width: 46px;
  background-position: -66px -26px; }
  .common-gameicon-hori.common-game-8192-8-exp.bright, .common-gameicon-hori.common-game-8192-8.bright {
    background-position: 0 -26px; }

.common-gameicon-hori.common-game-8192-32-exp, .common-gameicon-hori.common-game-8192-32 {
  width: 46px;
  background-position: -66px -39px; }
  .common-gameicon-hori.common-game-8192-32-exp.bright, .common-gameicon-hori.common-game-8192-32.bright {
    background-position: 0 -39px; }

.common-gameicon-hori.common-game-8192-64-exp, .common-gameicon-hori.common-game-8192-64 {
  width: 65px;
  background-position: -66px -52px; }
  .common-gameicon-hori.common-game-8192-64-exp.bright, .common-gameicon-hori.common-game-8192-64.bright {
    background-position: 0 -52px; }

/* \\\\\\\\\\\\\\\\\ END GAMEICONS ///////////////// */
/* Hooah */
.icon-like {
  vertical-align: middle;
  display: inline-block;
  background: url(../feed/icon-hooah-activitystream.png) no-repeat;
  width: 18px;
  height: 18px; }

.icon-premium-wide {
  background: url(../base/bf4/logo-p-s.png) no-repeat;
  width: 82px;
  height: 12px; }

.icon-premium-wide.bfh {
  background: url(../base/bfh/logo-p-s.png) no-repeat; }

.icon-premium-p-big {
  background: url(../premium/premium-p.png) no-repeat;
  width: 28px;
  height: 30px; }

.btn-small .icon-premium-p {
  top: 1px; }

.icon-premium-p {
  background: url(../base/bf4/icon-p-s.png) no-repeat;
  width: 14px;
  height: 14px; }

.icon-premium-shield {
  background: url(../base/bf4/icon-p-shield.png) no-repeat;
  width: 18px;
  height: 19px; }

.icon-veteran {
  background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/icons/veteran-310bcd37.png) no-repeat;
  width: 17px;
  height: 30px; }

.icon-veteran-big {
  background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/icons/veteran-big-96eb123c.png) no-repeat;
  width: 22px;
  height: 38px; }

.icon-veteran-small {
  background: url(//d34ymitoc1pg7m.cloudfront.net/bf4/icons/veteran-small-73fcf7f7.png) no-repeat;
  width: 11px;
  height: 19px; }

.icon-device {
  background-image: url(../common/icon-devices.png);
  height: 16px;
  width: 19px; }
  .icon-device.mobile {
    width: 10px;
    background-position: 0 0; }
  .icon-device.tablet {
    width: 20px;
    background-position: -10px 0; }
  .icon-device.commander {
    width: 24px;
    background-position: -30px 0; }
  .icon-device.web {
    width: 20px;
    background-position: -54px 0; }
  .icon-device.faded {
    opacity: 0.3; }

/* Dialogs should have old close button on bf3/mohw */
.dialog .icon-custom.icon-close {
  background: url(../base/shared/row_icon_chat.png) 0 26px;
  height: 13px;
  width: 13px; }
  .dialog .icon-custom.icon-close:hover {
    background-position: 0 13px; }

.box {
  background: #fff;
  border: 1px solid #e8e8e8;
  position: relative;
  z-index: 2;
  padding: 0;
  box-shadow: inset 0 0 0 1px #fefefe, 0 1px 0 #dadada; }
  .box + .box {
    margin-top: 16px; }
  .box.box-plate {
    background: #ebebeb;
    border: none;
    border-top: 1px solid #cacaca;
    border-bottom: 1px solid #fefefe;
    padding: 0;
    box-shadow: inset 0 0 0 1px #dbdbdb; }
    .box.box-plate > header {
      background: transparent;
      border-bottom: 1px solid #e1e1e1;
      margin: 0;
      padding: 0 16px; }
    .box.box-plate > .box-content {
      background: transparent; }
  .box + .box-basic {
    border-top: 1px solid #fcfcfc;
    box-shadow: 0 -2px 0 #dfdfdf; }
  .box.box-secondary {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none; }
    .box.box-secondary > header {
      background: transparent;
      border: none;
      padding: 0;
      margin: 0; }
      .box.box-secondary > header h1 {
        font-size: 11px;
        line-height: 34px;
        color: #8a8a8a;
        font-weight: bold;
        font-family: Tahoma, sans-serif;
        text-transform: uppercase; }
    .box.box-secondary > .box-content {
      background: transparent;
      padding: 0 0 8px 0;
      margin: 0; }
      .box.box-secondary > .box-content + .box-content {
        padding-top: 8px; }
  .box > header {
    background: transparent;
    border-bottom: 1px solid #ededed;
    padding: 0;
    margin: 0 15px; }
    .box > header h1 {
      font-size: 12px;
      line-height: 34px;
      font-weight: bold;
      font-family: Tahoma, sans-serif;
      color: #353535;
      text-transform: none; }
    .box > header + .box-content {
      margin-top: 0;
      padding-top: 15px; }
  .box > footer {
    background: transparent;
    margin: 0; }
  .box > a.box-content {
    text-decoration: none; }
  .box > .box-content {
    background: transparent;
    padding: 16px 0;
    margin: 0 15px;
    display: block; }
    .box > .box-content + .box-content {
      border-top: 1px solid #eee; }

.progress-bar {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #cacaca; }
  .progress-bar .progress-bar-inner {
    margin: 1px;
    background: #353535;
    float: left;
    height: 6px; }
  .progress-bar.no-border {
    border: none; }
    .progress-bar.no-border .progress-bar-inner {
      margin: 0; }
  .progress-bar.thin .progress-bar-inner {
    height: 4px; }
  .progress-bar.thick .progress-bar-inner {
    height: 10px; }
  .progress-bar.thicker .progress-bar-inner {
    height: 14px; }
  .progress-bar.thickest .progress-bar-inner {
    height: 20px; }

@-webkit-keyframes dialog-shake {
  0% {
    -webkit-transform: translateX(-10px); }

  10% {
    -webkit-transform: translateX(10px); }

  20% {
    -webkit-transform: translateX(-30px); }

  30% {
    -webkit-transform: translateX(30px); }

  40% {
    -webkit-transform: translateX(-30px); }

  50% {
    -webkit-transform: translateX(30px); }

  60% {
    -webkit-transform: translateX(-10px); }

  70% {
    -webkit-transform: translateX(10px); }

  80% {
    -webkit-transform: translateX(-5px); }

  90% {
    -webkit-transform: translateX(5px); }

  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes dialog-shake {
  0% {
    -moz-transform: translateX(-10px); }

  10% {
    -moz-transform: translateX(10px); }

  20% {
    -moz-transform: translateX(-30px); }

  30% {
    -moz-transform: translateX(30px); }

  40% {
    -moz-transform: translateX(-30px); }

  50% {
    -moz-transform: translateX(30px); }

  60% {
    -moz-transform: translateX(-10px); }

  70% {
    -moz-transform: translateX(10px); }

  80% {
    -moz-transform: translateX(-5px); }

  90% {
    -moz-transform: translateX(5px); }

  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes dialog-shake {
  0% {
    -o-transform: translateX(-10px); }

  10% {
    -o-transform: translateX(10px); }

  20% {
    -o-transform: translateX(-30px); }

  30% {
    -o-transform: translateX(30px); }

  40% {
    -o-transform: translateX(-30px); }

  50% {
    -o-transform: translateX(30px); }

  60% {
    -o-transform: translateX(-10px); }

  70% {
    -o-transform: translateX(10px); }

  80% {
    -o-transform: translateX(-5px); }

  90% {
    -o-transform: translateX(5px); }

  100% {
    -o-transform: translateX(0); } }

@keyframes dialog-shake {
  0% {
    transform: translateX(-10px); }

  10% {
    transform: translateX(10px); }

  20% {
    transform: translateX(-30px); }

  30% {
    transform: translateX(30px); }

  40% {
    transform: translateX(-30px); }

  50% {
    transform: translateX(30px); }

  60% {
    transform: translateX(-10px); }

  70% {
    transform: translateX(10px); }

  80% {
    transform: translateX(-5px); }

  90% {
    transform: translateX(5px); }

  100% {
    transform: translateX(0); } }

#dialog-container {
  position: fixed;
  z-index: 3000; }
  #dialog-container .modal-overlay {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background 0.2s ease-out;
    -moz-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out; }
    #dialog-container .modal-overlay.show {
      background: rgba(0, 0, 0, 0.4);
      pointer-events: all; }

.dialog {
  position: fixed;
  z-index: 2;
  outline: none;
  pointer-events: all;
  top: 25%;
  left: 50%;
  width: 480px;
  margin-left: -240px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  background: #fff;
  border: 6px solid rgba(0, 0, 0, 0.7);
  color: #353535; }
  .dialog header {
    background: #ebebeb;
    border-bottom: 1px solid #dfdfdf; }
    .dialog header h3 {
      font-weight: bold;
      font-size: 12px;
      font-family: Tahoma, sans-serif;
      color: #353535; }
    .dialog header .icon-close {
      float: right; }
      .dialog header .icon-close:hover:after {
        color: #000; }
  .dialog header, .dialog section, .dialog footer {
    padding: 10px;
    font-size: 12px;
    line-height: 1.5; }
    .dialog header.no-padding, .dialog section.no-padding, .dialog footer.no-padding {
      padding: 0; }
  .dialog footer {
    text-align: right;
    background: #f2f2f2;
    border-top: 1px solid #e5e5e5;
    text-align: right;
    min-height: 48px;
    line-height: 48px;
    padding: 0 10px; }
  .dialog.hide {
    display: none; }
  .dialog.fade {
    -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
    transition: opacity 0.3s linear, top 0.3s ease-out;
    opacity: 0;
    top: -25%; }
    .dialog.fade.in {
      opacity: 1;
      top: 25%; }
  .dialog.shake {
    -webkit-animation: dialog-shake 0.2s linear;
    -moz-animation: dialog-shake 0.2s linear;
    animation: dialog-shake 0.2s linear; }
  .dialog .btn-container {
    float: right; }
  .dialog.no-footer footer {
    display: none; }

.alert {
  background: #FFE8AA;
  text-align: left;
  margin-bottom: 8px;
  position: relative;
  padding: 0 8px;
  font-size: 14px;
  font-weight: normal;
  line-height: 23px;
  min-height: 32px;
  color: #000; }
  .alert button.close {
    position: relative;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: #fff; }
  .alert.danger {
    background: #f5aca7; }
    .alert.danger i {
      background-position: 0 -40px; }
  .alert.warning {
    background: #f8f3c5; }
    .alert.warning i {
      background-position: 0 0; }
  .alert.info {
    background: #b5dcef; }
    .alert.info i {
      background-position: 0 -20px; }
  .alert.large {
    padding: 19px 19px; }
  .alert.xlarge {
    padding-top: 39px;
    padding-bottom: 39px; }
  .alert i {
    background: url(../base/shared/notice-icons.png) no-repeat;
    width: 20px;
    height: 20px;
    position: relative;
    top: 6px; }

.submenu > ul {
  width: 100%;
  display: table;
  table-layout: fixed; }
  .submenu > ul + ul {
    margin-top: 1px; }
    .submenu > ul + ul > li > a, .submenu > ul + ul span {
      line-height: 37px; }
  .submenu > ul > li {
    width: 1%;
    display: table-cell;
    position: relative;
    z-index: 0;
    padding-right: 1px; }
    .submenu > ul > li:last-child {
      padding-right: 0; }
    .submenu > ul > li.active {
      z-index: 1; }
      .submenu > ul > li.active > a, .submenu > ul > li.active > span, .submenu > ul > li.active > a:hover, .submenu > ul > li.active > a:active {
        cursor: default;
        color: #000;
        border: 1px solid #353535; }
    .submenu > ul > li > a, .submenu > ul > li > span {
      display: block;
      padding: 0 10px;
      line-height: 32px;
      font-size: 16px;
      text-decoration: none;
      text-align: center;
      cursor: default;
      font-family: Arial;
      text-transform: none; }
      .submenu > ul > li > a:not(span):hover, .submenu > ul > li > a:not(span):active, .submenu > ul > li > span:not(span):hover, .submenu > ul > li > span:not(span):active {
        cursor: pointer; }

body.originconnect_in_progress #site-gate .gate-form .originconnect-status {
  opacity: 1;
  display: block; }
body.originconnect_in_progress #site-gate .gate-form .originconnect-fallback {
  max-height: 0; }

#site-gate {
  min-height: 0; }
  #site-gate .alert {
    margin-bottom: 16px; }
  #site-gate #recaptcha_widget_div {
    margin: 8px 0; }
  #site-gate .gate-actions {
    height: 50px;
    overflow: hidden; }
    #site-gate .gate-actions .btn-login, #site-gate .gate-actions .btn-get-game {
      float: right;
      min-width: 316px; }
  #site-gate .site-gate-footer {
    padding: 0 16px 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden; }
    #site-gate .site-gate-footer.show-form .gate-actions {
      height: auto; }
    #site-gate .site-gate-footer .gate-actions {
      margin: 16px 0 32px; }
    #site-gate .site-gate-footer > .btn {
      float: right;
      min-width: 288px; }
    #site-gate .site-gate-footer .btn-login {
      margin-left: 8px; }
  #site-gate .header-headline {
    display: inline-block;
    margin: 0;
    padding: 6px 0;
    font-size: 50px;
    line-height: 40px;
    color: #fff; }
  #site-gate .logo {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 0;
    width: 992px;
    margin-bottom: 48px; }
  #site-gate .promo {
    position: relative;
    z-index: 1;
    width: 992px;
    margin-top: 94px; }
  #site-gate .base-game-selector {
    margin-top: 16px; }

.site-gate-form-wrapper {
  float: right;
  width: 408px;
  margin-left: 16px; }
  .site-gate-form-wrapper .input-wrapper {
    overflow: hidden; }
  .site-gate-form-wrapper .originconnect-status {
    background-color: #1a1a1a;
    margin: 16px 0;
    padding: 27px 20px;
    display: none;
    opacity: 0;
    position: absolute;
    width: 282px;
    -webkit-transition: opacity 0.2s ease-in;
    z-index: 1; }
  .site-gate-form-wrapper .originconnect-working, .site-gate-form-wrapper .originconnect-error {
    font-size: 14px;
    font-weight: bold;
    background-image: url(../originconnect/loading_blue.gif);
    background-repeat: no-repeat;
    background-position: 0px 50%;
    padding-left: 35px;
    line-height: 22px; }
  .site-gate-form-wrapper .originconnect-error {
    display: none; }
  .site-gate-form-wrapper .originconnect-fallback {
    overflow: hidden;
    -webkit-transition: max-height 0.2s ease-in;
    max-height: 250px; }
  .site-gate-form-wrapper .originconnect-error .originconnect-status {
    background-image: url(../originconnect/originicon.png); }
  .site-gate-form-wrapper .gate-form-checkbox label {
    padding-top: 1px;
    font-size: 13px;
    float: left; }
  .site-gate-form-wrapper .gate-login-form-submit-wrapper {
    text-align: right;
    padding-top: 5px; }
  .site-gate-form-wrapper .gate-login-form-extra {
    margin-top: 2px; }
    .site-gate-form-wrapper .gate-login-form-extra a {
      font-size: 12px;
      font-weight: normal;
      margin-right: 8px;
      color: #8a8a8a; }
  .site-gate-form-wrapper label.placeholder.gate-form-input-wrapper {
    width: 200px;
    position: relative;
    height: 30px;
    background: #fff;
    margin-bottom: 5px;
    display: block;
    float: left; }
    .site-gate-form-wrapper label.placeholder.gate-form-input-wrapper.omega {
      margin-left: 8px; }
    .site-gate-form-wrapper label.placeholder.gate-form-input-wrapper span {
      position: absolute;
      top: 0;
      left: 12px;
      line-height: 30px;
      font-size: 14px;
      color: #898989;
      z-index: 0;
      cursor: text;
      /* for IE */
      opacity: 1;
      -webkit-transition: all 1s ease-out;
      -moz-transition: all 1s ease-out;
      transition: all 1s ease-out; }
  .site-gate-form-wrapper label.placeholder:not(.filled) input:focus + span {
    opacity: 0.5;
    -webkit-transition: all 0 linear;
    -moz-transition: all 0 linear;
    transition: all 0 linear; }
  .site-gate-form-wrapper label.placeholder.filled span {
    opacity: 0;
    -webkit-transition: all 0 linear;
    -moz-transition: all 0 linear;
    transition: all 0 linear; }
  .site-gate-form-wrapper label.placeholder input {
    width: 176px;
    height: 20px;
    color: #353535;
    line-height: 20px;
    font-size: 14px;
    padding: 5px 12px;
    font-weight: normal;
    font-family: Arial, sans-serif;
    background: transparent;
    z-index: 1;
    position: relative;
    border: 0;
    outline: 0; }
    .site-gate-form-wrapper label.placeholder input:-webkit-autofill {
      color: #434343; }
  .site-gate-form-wrapper #gate-login-form-info {
    padding-top: 8px; }
  .site-gate-form-wrapper .gate-login-form-info-status {
    font-size: 16px;
    font-weight: bold;
    line-height: 22px; }
  .site-gate-form-wrapper .gate-login-form-info-secondary {
    font-size: 14px;
    font-weight: normal;
    line-height: 22px; }
  .site-gate-form-wrapper .gate-login-form-info-action-button {
    margin-top: 15px;
    min-width: 106px; }
  .site-gate-form-wrapper .gate-login-errormsg {
    color: #da3030;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 16px; }
    .site-gate-form-wrapper .gate-login-errormsg a {
      font-size: 16px;
      font-weight: bold; }
  .site-gate-form-wrapper .gate-login-queue {
    display: none; }
    .site-gate-form-wrapper .gate-login-queue.show {
      font-size: 14px;
      display: block;
      padding-bottom: 2px; }
  .site-gate-form-wrapper table.gate-login-possible {
    width: 100%;
    padding: 0;
    margin: 0; }
    .site-gate-form-wrapper table.gate-login-possible tr td {
      vertical-align: top; }

#base-bf3-html #site-gate.base-middle, #base-mohw-html #site-gate.base-middle {
  background: none;
  box-shadow: none; }
  #base-bf3-html #site-gate.base-middle .base-middle-content, #base-mohw-html #site-gate.base-middle .base-middle-content {
    padding-top: 0;
    min-height: 0; }
#base-bf3-html #site-gate .header-headline, #base-mohw-html #site-gate .header-headline {
  font-family: BebasNeueRegular, sans-serif;
  font-weight: normal; }
#base-bf3-html #site-gate .logo, #base-mohw-html #site-gate .logo {
  height: 186px;
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bf3/logos/bf3-logo-large-58400401.png); }
#base-bf3-html #site-gate .site-gate-footer, #base-mohw-html #site-gate .site-gate-footer {
  width: 1024px;
  min-height: 0;
  background: #f4f4f4;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1); }
  #base-bf3-html #site-gate .site-gate-footer.show-form .gate-actions .btn-get-game, #base-mohw-html #site-gate .site-gate-footer.show-form .gate-actions .btn-get-game {
    float: left; }
  #base-bf3-html #site-gate .site-gate-footer .btn, #base-mohw-html #site-gate .site-gate-footer .btn {
    top: 0; }
  #base-bf3-html #site-gate .site-gate-footer .header-headline, #base-mohw-html #site-gate .site-gate-footer .header-headline {
    color: #000; }
#base-bf3-html .site-gate-form-wrapper .originconnect-status, #base-mohw-html .site-gate-form-wrapper .originconnect-status {
  color: #8A8A8A; }
#base-bf3-html .site-gate-form-wrapper .gate-login-form-info-status, #base-mohw-html .site-gate-form-wrapper .gate-login-form-info-status {
  color: #8A8A8A; }
#base-bf3-html .site-gate-form-wrapper .gate-login-form-info-secondary, #base-mohw-html .site-gate-form-wrapper .gate-login-form-info-secondary {
  color: #a8a8a8; }
#base-bf3-html .site-gate-form-wrapper .gate-login-queue, #base-mohw-html .site-gate-form-wrapper .gate-login-queue {
  color: #a8a8a8; }
#base-bf3-html .site-gate-form-wrapper .gate-form-checkbox label, #base-mohw-html .site-gate-form-wrapper .gate-form-checkbox label {
  padding-top: 4px;
  color: #8a8a8a; }
#base-bf3-html .site-gate-form-wrapper .gate-login-form-extra a, #base-mohw-html .site-gate-form-wrapper .gate-login-form-extra a {
  color: #a8a8a8; }

#devguide {
  background: #f4f4f4;
  padding: 16px; }
  #devguide pre, #devguide code {
    background: rgba(0, 0, 0, 0.9); }

.box.platoon-create-box > header + .box-content {
  padding: 0; }

.box > header + .box-content.platoon-invites-list-wrapper {
  padding-bottom: 6px; }

.platoon-invites-list li {
  position: relative;
  padding: 0 60px 0 36px;
  margin-bottom: 10px; }
  .platoon-invites-list li .response-actions {
    position: absolute;
    top: 0;
    right: 0; }
    .platoon-invites-list li .response-actions button {
      border: none;
      margin-left: 6px;
      float: left; }
  .platoon-invites-list li .emblem {
    position: absolute;
    top: 0;
    left: 0; }
  .platoon-invites-list li .name {
    padding-bottom: 2px; }

.dialog .popup-reportabuse-body {
  height: 300px; }
.dialog.dialog-friends .dialog-body {
  height: 268px !important;
  overflow-x: hidden;
  overflow-y: auto; }
.dialog ul.avatars p {
  padding: 10px 16px;
  font-size: 12px;
  color: #575757; }
.dialog ul.avatars {
  width: 100%;
  position: relative; }
.dialog ul.avatars li {
  float: none;
  padding: 6px;
  position: relative;
  background: url(../base/bfbc2/loggedin-clean-heading2.png) bottom left no-repeat; }
  .dialog ul.avatars li.selected {
    background: rgba(255, 255, 255, 0.7);
    color: #000; }
    .dialog ul.avatars li.selected .base-friends-username {
      font-weight: bold; }
    .dialog ul.avatars li.selected .base-friends-selectbutton {
      opacity: 0.4; }
  .dialog ul.avatars li.non-selectable {
    opacity: 0.6; }
    .dialog ul.avatars li.non-selectable .base-friends-selectbutton {
      display: none; }
.dialog ul.avatars.avatar-only li {
  display: inline-block;
  background: none;
  float: left; }
.dialog ul.avatars li.last {
  background: none; }
.dialog ul.avatars li img {
  float: left; }
.dialog ul.avatars li img.main-profile-status-icon {
  margin: 5px 5px 0 12px; }
.dialog ul.avatars li a {
  line-height: 18px; }
.dialog ul.avatars .base-friends-avatar {
  float: left;
  margin-right: 10px; }
.dialog ul.avatars .base-friends-username {
  float: left; }
  .dialog ul.avatars .base-friends-username a {
    text-decoration: none; }
.dialog ul.avatars .base-friends-selectbutton {
  float: right;
  position: relative;
  top: 2px; }
.dialog > header a {
  color: #a8a8a8; }
.dialog > header .no-transform {
  text-transform: none; }
.dialog.joinflow-origin-not-started #joinflow-origin-missing-image {
  background: url(../joinflow/origin.png) center center no-repeat;
  background-size: cover;
  width: 106px;
  height: 106px;
  margin: 10px;
  float: left;
  position: relative; }
.dialog.joinflow-origin-not-started footer {
  text-align: right;
  margin-right: 8px; }
.dialog.joinflow-origin-not-started .bullet {
  margin-bottom: 12px;
  height: 30px; }
.dialog.joinflow-origin-not-started #joinflow-pluginpopup-info .loader {
  margin-right: 6px; }
.dialog.joinflow-origin-not-started .bullet-number {
  font-weight: bold;
  float: left;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  font-size: 20px;
  margin-right: 8px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc; }
.dialog.joinflow-origin-not-started .bullet-text {
  position: relative;
  top: 56%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 40px;
  line-height: 17px; }
  .dialog.joinflow-origin-not-started .bullet-text.one-line {
    line-height: 30px; }
.dialog.identity2 {
  width: 900px;
  background: #fbfbfb;
  border: 0; }
  #base-bf3-html .dialog.identity2, #base-mohw-html .dialog.identity2 {
    margin-left: -450px; }
  .dialog.identity2 .background-loader {
    z-index: 0;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -16px; }
  .dialog.identity2 .icon-dialog-close {
    z-index: 10;
    background: url("../base/shared/bright-close.png") center center no-repeat;
    width: 30px;
    height: 30px;
    padding-right: 6px;
    position: absolute;
    right: auto !important;
    left: 5px !important;
    top: 8px !important;
    cursor: pointer;
    opacity: 0.6; }
    #base-mohw-html .dialog.identity2 .icon-dialog-close {
      background-image: url("../base/shared/dark-close.png"); }
    .dialog.identity2 .icon-dialog-close:hover {
      opacity: 1; }
  .dialog.identity2 .dialog-body {
    padding: 0; }
  .dialog.identity2 iframe {
    z-index: 1;
    position: relative;
    display: block;
    width: 100%;
    height: 500px; }
  .dialog.identity2 footer {
    display: 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: #8A8A8A; }
      .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 #8A8A8A; }
      .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 .bfh-game-platform {
    display: inline-block;
    width: 100px; }
  .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 {
  min-width: 26px;
  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-reportabuse-show-type {
  margin-bottom: 10px; }
  .dialog .popup-reportabuse-show-type select {
    cursor: pointer; }
  .dialog .popup-reportabuse-show-type .popup-reportabuse-text {
    margin-right: 6px;
    font-weight: bold;
    line-height: 24px; }
.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; }

.battlefeed .list .battlereport-feed-item .info-list li, .battlereport-feed-item .info-list li {
  background-color: rgba(0, 0, 0, 0.1);
  color: #353535; }
  .battlefeed .list .battlereport-feed-item .info-list li.medium h5, .battlereport-feed-item .info-list li.medium h5 {
    background-color: rgba(0, 0, 0, 0.1); }
  .battlefeed .list .battlereport-feed-item .info-list li.medium .na, .battlereport-feed-item .info-list li.medium .na {
    color: #666; }
.battlefeed .list .battlereport-feed-item header, .battlereport-feed-item header {
  margin: 0 !important;
  padding: 0 !important;
  height: 163px; }
.battlefeed .list .battlereport-feed-item .prize, .battlereport-feed-item .prize {
  background-color: #bbb;
  color: #353535;
  border: 0; }
  .battlefeed .list .battlereport-feed-item .prize .box-content, .battlereport-feed-item .prize .box-content {
    padding: 8px;
    margin: 0 8px; }

body .dialog .popup-gameinvite-serverinfo-map img {
  height: auto;
  width: auto;
  display: block;
  margin-left: 0; }

/* Straight from .css and IDE reformated */
.forum-middle {
  position: relative;
  clear: both;
  width: 100%;
  background: url(//d34ymitoc1pg7m.cloudfront.net/common/backgrounds/light-bg-26fc61c7.jpg) repeat-x scroll center top #F3f3f3; }

.forum-create-post-similar-threads {
  margin-top: 16px; }

.forum-start-container {
  width: 990px;
  float: left;
  min-height: 400px; }

.forum-start-container .common-box-container {
  width: auto; }

.forum-start-container .common-box-inner {
  padding: 0; }

.forum-start-title {
  position: relative;
  color: #000;
  margin: 10px 0 15px 0; }

.forum-start-title h1 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  position: relative;
  font-family: Arial, sans-serif;
  color: #353535; }

.forum-start-title h1.thread-title {
  text-transform: none;
  margin: 0;
  margin-right: 80px; }

.forum-start-border {
  padding: 0;
  margin-bottom: 10px; }

.forum-start-info {
  height: 27px;
  color: #8A8A8A; }

.forum-start-info-bottom {
  height: 1px;
  width: 100%;
  background-color: #f2f2f2; }

.forum-start-sticky-thread-separator {
  height: 4px;
  background: #f4f4f4;
  margin-left: -2px;
  margin-right: -2px;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8; }

.forum-activity .forum-start-sticky-thread-separator {
  height: 1px;
  border-top: none;
  margin: 0;
  background: none; }

.forum-start-forum {
  position: relative;
  height: 56px; }

.forum-start-forum-has-official {
  border-left: 3px solid #cce3f9; }

.forum-start-forum-separator {
  height: 1px;
  background-color: #e8e8e8;
  width: 100%;
  margin-top: 1px;
  margin-bottom: 1px; }

.forum-start-form-thread-links {
  position: absolute;
  left: 53px;
  top: 31px;
  font-size: 12px; }

.forum-start-forum.forum-forumlist > a.forum-start-forum-title {
  margin-left: 10px; }

.forum-start-forum-title {
  display: inline-block;
  height: 58px;
  width: 580px;
  margin-left: 53px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d; }
  .forum-start-forum-title h4 {
    position: relative;
    display: inline-block;
    top: 14px; }
  .forum-start-forum-title .forum-start-forum-title-block h4 {
    top: 0; }
  .forum-start-forum-title .forum-icons {
    float: left;
    position: relative;
    margin-right: 13px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    .forum-start-forum-title .forum-icons div {
      position: relative;
      display: inline-block;
      width: 14px;
      height: 15px;
      background-repeat: no-repeat;
      background-position: center center; }
      .forum-start-forum-title .forum-icons div.premium {
        background-image: url(../premium/icon-p-s.png); }
      .forum-start-forum-title .forum-icons div.locked {
        background-image: url(../forum/locked-icon.png); }
      .forum-start-forum-title .forum-icons div.linked {
        background-image: url(../forum/linked-icon.png); }
  .forum-start-forum-title .forum-start-forum-title-block {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
  .forum-start-forum-title:hover h4 {
    text-decoration: underline; }

.forum-start-container .forum-start-forum-bodycell a {
  font-size: 11px;
  font-weight: normal; }
.forum-start-container .forum-start-forum-title a {
  font-size: 12px;
  font-weight: bold; }
.forum-start-container .forum-start-forum-title p a {
  font-size: 11px;
  font-weight: normal; }

.forum-title-quicklinks {
  font-size: 11px;
  position: relative;
  color: #8b8b8b;
  margin-left: 10px; }

.forum-title-quicklinks a {
  font-size: 11px; }

.forum-start-forum-title-prefix {
  display: inline-block;
  margin-right: 3px;
  font-size: 12px;
  color: #a8a8a8; }

.forum-start-forum-title p, .forum-start-forum-title p a {
  font-size: 11px;
  margin-top: 6px;
  font-weight: normal;
  padding-bottom: 1px; }

.forum-start-forum-title p {
  color: #353535; }

.forum-start-forum-title-block {
  display: inline-block; }

.forum-thread-icons {
  position: absolute;
  height: 15px;
  top: 12px;
  left: 2px;
  text-align: center;
  width: 36px; }

.forum-thread-icons .icon {
  display: inline-block; }

.forum-thread-icons .sticky {
  background: url(../forum/sticky-icon.png);
  width: 14px;
  height: 15px; }

.forum-thread-icons .locked {
  background: url(../forum/locked-icon.png) no-repeat;
  width: 14px;
  height: 15px; }

.forum-start-forum-unread {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 56px;
  background-color: #b6b6b6; }

.forum-start-forum-latest {
  width: 232px; }

.forum-start-forum-topics {
  width: 77px;
  text-align: center; }

.forum-start-forum-posts {
  width: 65px;
  text-align: center; }

.forum-start-forum-headercell {
  float: right;
  height: 27px; }

.forum-start-forum-headercellleft {
  border: 0;
  /*margin-left: 10px;*/ }

.forum-start-forum-bodycell {
  float: right;
  height: 58px;
  border-left: 1px solid #f2f2f2; }

.forum-start-forum-forum {
  float: left; }

.forum-start-forum-headercell p {
  font-weight: bold;
  line-height: 30px;
  color: #353535;
  margin-left: 9px;
  margin-right: 14px;
  font-size: 12px;
  font-family: Tahoma; }

.forum-start-forum-bodycell p {
  line-height: 56px;
  color: #8b8b8b;
  font-size: 11px; }

.forum-start-forum-latest-info {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 13px;
  font-size: 11px;
  overflow: hidden;
  color: #8a8a8a; }

.forum-start-forum-latest-info a {
  white-space: nowrap;
  font-size: 11px;
  font-weight: normal; }

.forum-start-forum-latest-info a.forum-start-forum-latest-info-title {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 179px;
  float: left;
  height: 15px; }

.forum-start-forum-latest-info div {
  margin-top: 4px; }

.forum-start-forum-latest-info {
  line-height: 14px; }

.forum-start-forum-latest-info .forum-username {
  max-width: 106px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8a8a8a;
  height: 14px; }
  .forum-start-forum-latest-info .forum-username:after {
    content: "-"; }

.forum-start-forum-latest .avatar {
  float: right;
  margin-top: 16px;
  margin-right: 8px;
  margin-left: 4px; }

.forum-start-latest-container {
  float: right;
  width: 247px; }

.forum-start-latest-container h2 {
  color: #8a8a8a;
  font-size: 11px;
  margin-bottom: 8px;
  font-family: Tahoma, Arial, sans-serif; }

.forum-start-latest-container .forum-start-forum-latest {
  padding-top: 4px;
  padding-bottom: 5px;
  width: 247px; }

.forum-start-latest-container .forum-start-forum-latest-info {
  width: 210px;
  height: 30px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0; }

.forum-start-latest-container .forum-start-forum-latest .avatar {
  margin-top: 0;
  margin-right: 0; }

.forum-search-container {
  position: absolute;
  top: 12px;
  right: 17px; }

.forum-sidebar-search-form-input {
  background-color: #fff;
  border: 1px solid #cccccc;
  border-top-color: #ababab;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  padding: 4px 6px;
  width: 204px;
  float: left;
  margin-right: 4px; }

.forum-sidebar-search-input::-webkit-input-placeholder, .forum-sidebar-search-input:-moz-placeholder {
  color: #8a8a8a; }

.forum-sidebar-search-form-line {
  margin-bottom: 11px; }

.forum-search-form {
  margin: 16px 0 15px; }

.forum-search-form-input {
  background-color: #fff;
  border: 1px solid #cccccc;
  border-top-color: #ababab;
  font-size: 14px;
  height: 18px;
  line-height: 18px;
  padding: 4px 10px;
  width: 203px;
  margin-right: 4px; }

.forum-search-form-input::-webkit-input-placeholder, .forum-search-form-input:-moz-placeholder {
  color: #8a8a8a; }

.forum-search-form .forum-advanced-search select {
  padding: 5px;
  width: 150px;
  margin-top: 4px;
  margin-bottom: 4px; }

.forum-post-preview-container {
  clear: both;
  margin-top: 16px; }

.forum-postreply-container {
  margin-top: 12px;
  position: relative;
  z-index: 1; }

.forum-postreply {
  position: relative; }

.forum-postreply .avatar {
  position: relative;
  float: left;
  top: 40px; }

.forum-postreply textarea {
  resize: none;
  font-size: 12px;
  font-family: arial, sans-serif;
  position: relative;
  float: left;
  left: 16px;
  margin-top: 5px;
  width: 875px;
  height: 97px; }

.forum-postreply-container .forum-postreply textarea {
  height: 395px; }

.forum-postreply input[type=submit] {
  float: right;
  margin-top: 15px; }

.forum-postreply-official-selector {
  float: right;
  font-size: 12px;
  margin-right: 10px;
  margin-top: 4px; }

.forum-postreply-official-selector input {
  position: relative;
  top: 1px; }

.forum-postreply-error {
  background: #FFE3E3;
  border: 1px solid #FFA0A0;
  color: #666666;
  font-weight: bold;
  font-size: 12px;
  padding: 7px 32px 7px 32px;
  width: 320px;
  position: relative;
  left: 13px;
  top: 8px; }

.forum-postreply-disabled {
  font-size: 16px;
  font-weight: bold;
  color: #353535;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px; }

.forum-preview-post {
  float: right;
  margin-right: 5px;
  margin-left: 10px; }

.forum-postreply .forum-preview-post {
  margin-top: 15px; }

.forum-bbcode-edit {
  position: relative;
  float: right; }

.forum-bbcode-quickreply {
  position: relative;
  float: right; }

.forum-bbcode-reply {
  position: relative;
  float: right;
  padding-top: 8px; }

.forum-quickreply .common-replyform-avatar {
  height: 60px;
  margin-left: 8px;
  margin-top: 47px;
  width: 60px;
  z-index: 3; }

textarea.forum-quickreply {
  width: 880px;
  margin-top: 10px;
  left: 70px;
  position: relative; }

.forum-quickreply form {
  overflow: hidden;
  padding: 8px; }

.forum-newthread-container .forum-preview-post {
  margin-top: 0; }

.forum-postreply-container .forum-preview-post {
  margin-right: 10px; }

.forum-breadcrumbs {
  margin-top: -6px; }

.forum-start-container .forum-breadcrumbs a {
  font-size: 11px;
  font-weight: normal; }

.forum-breadcrumbs span {
  font-size: 9px;
  color: #666;
  margin-left: 5px;
  margin-right: 5px; }

.forum-editpost-official-selector {
  float: right;
  margin-top: 20px;
  font-size: 12px;
  margin-right: 5px; }

.forum-newthread-container {
  width: 988px;
  margin-top: 16px;
  float: left; }

.forum-newthread {
  position: relative; }

.forum-newthread .avatar {
  position: absolute;
  left: 16px;
  top: 42px; }

.forum-newthread textarea {
  overflow-y: auto;
  font-size: 12px;
  font-family: arial, sans-serif;
  color: #434343;
  padding: 5px;
  width: 944px;
  max-width: 944px;
  height: 305px; }

.forum-newthread input[type=text] {
  padding: 5px;
  width: 301px;
  color: #434343;
  font-size: 12px;
  font-family: arial, sans-serif; }

.forum-newthread input[type=submit] {
  float: right; }

.forum-newthread label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #666; }

.forum-newthread .forum-newthread-bodylabel {
  width: 200px;
  padding-top: 14px; }

.forum-newthread-official-selector {
  float: right;
  margin-right: 10px;
  margin-top: 5px; }

.forum-newthread-official-selector label {
  font-weight: normal; }

.forum-newthread-official-selector input {
  position: relative;
  top: 1px; }

.forum-newthread-error {
  background: #FFE3E3;
  border: 1px solid #FFA0A0;
  color: #666666;
  font-weight: bold;
  font-size: 12px;
  padding: 7px 32px 7px 32px;
  position: absolute;
  left: 13px;
  bottom: 19px; }

.forum-newthread-label-cell {
  padding-right: 14px; }

.forum-newthread-label-cell.vtop {
  vertical-align: top; }

.forum-newthread-form-table td {
  padding-top: 10px; }

.forum-threadview-post {
  background: white;
  position: relative;
  overflow: hidden; }

.forum-threadview-post-ea {
  background: #e6f3ff;
  border: 3px solid #cce3f9;
  border-right-width: 1px;
  border-left-width: 1px; }

.forum-threadview-post-censored {
  opacity: 0.5;
  filter: alpha(opacity=50); }

.forum-threadview-post-poster {
  width: 175px;
  float: left;
  padding-top: 12px;
  margin-right: 18px; }

.forum-threadview-post-content {
  width: 780px;
  float: left;
  font-size: 12px;
  color: #353535;
  padding: 12px 0 16px;
  line-height: 18px;
  word-wrap: break-word;
  max-width: 734px; }

.forum-threadview-post-administrate {
  width: 50px;
  float: left;
  font-size: 12px;
  color: #353535;
  padding-top: 12px;
  line-height: 18px; }

.forum-threadview-post-poster-name {
  margin-left: 16px;
  width: 140px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16px; }

.forum-threadview-post-text {
  min-height: 56px; }
  .forum-threadview-post-text a {
    text-decoration: underline; }

.forum-threadview-post-censored .forum-threadview-post-text {
  font-style: italic; }

.forum-editpost-preview .common-box-inner {
  padding: 0px; }

#forum-preview-post-area .spoiler, .forum-threadview-post-text .spoiler {
  background: #353535;
  color: #353535;
  cursor: pointer; }

#forum-preview-post-area h1, .forum-threadview-post-text h1 {
  font-size: 20px;
  line-height: 22px; }
  #forum-preview-post-area h1 + br, .forum-threadview-post-text h1 + br {
    display: none; }

.is-touch #forum-preview-post-area .spoiler:before, .is-touch .forum-threadview-post-text .spoiler:before {
  content: attr(data-tooltip);
  color: rgba(255, 255, 255, 0.75);
  padding-left: 8px; }

.forum-threadview-post-text .spoiler a {
  color: #353535; }

.forum-threadview-post-signature {
  border-top: 1px solid #DEDEDE;
  padding-top: 5px;
  margin-top: 5px;
  color: #898989;
  word-break: break-word; }

.forum-threadview-post-tags {
  margin: 6px 0 6px 16px;
  float: left; }
  .forum-threadview-post-tags ul {
    clear: both; }
    .forum-threadview-post-tags ul li {
      float: left;
      margin-right: 2px; }

.forum-threadview-post-poster .avatar {
  display: block;
  margin-top: 8px;
  margin-left: 16px;
  clear: both; }

.forum-threadview-post-content blockquote {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  padding: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  color: #8a8a8a; }

.forum-threadview-post-content blockquote em {
  font-style: normal;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: bold; }

.forum-threadview-post-poster-country {
  margin-left: 36px;
  position: relative;
  margin-top: 11px;
  font-size: 11px;
  color: #757575; }

.forum-threadview-post-poster-country img {
  position: absolute;
  left: -20px;
  bottom: 50%;
  margin-bottom: -6px; }

.forum-threadview-post-poster-posts, .forum-threadview-post-poster-enlisted {
  margin-top: 8px;
  font-size: 11px;
  color: #acacac;
  margin-left: 16px; }

.forum-threadview-post-poster-posts em, .forum-threadview-post-poster-enlisted em {
  font-style: normal;
  font-size: 11px;
  color: #757575; }

.forum-threadview-post-poster-enlisted {
  margin-bottom: 12px; }

.forum-threadview-post-poster-enlisted img {
  margin-bottom: -1px;
  margin-right: 2px; }

.forum-threadview-post-quote {
  float: right; }

.forum-threadview-post-edit {
  float: right; }

.forum-view-latest-posts {
  padding-top: 5px; }

.forum-view-latest-posts a {
  font-weight: normal;
  font-size: 11px; }

.forum-threadview-post-report {
  height: 14px;
  float: right;
  border-right: 1px solid #ccc;
  padding-right: 5px;
  margin-top: 2px; }

.forum-threadview-post-ago {
  color: #acacac;
  font-size: 11px;
  margin-bottom: 12px; }

.forum-threadview-separator {
  height: 1px;
  margin-left: 16px;
  margin-right: 16px;
  border-top: 1px solid #f2f2f2; }

.forum-threadview-pages-top, .forum-threadview-pages-bottom {
  height: 43px;
  background: #f3f3f3 url(../forum/title-shade.png) no-repeat center center;
  border: 1px solid #dbdbdb; }

.forum-threadview-pages-bottom {
  margin-top: 1px;
  border-top: 1px solid #dbdbdb; }

.forum-post-select-checkbox {
  float: right; }

.forum-no-found {
  margin: 50px;
  text-align: center;
  color: #fff; }

.forum-page-title {
  color: #000;
  font-size: 25px;
  font-weight: bold;
  margin: 8px 0 12px;
  font-family: Arial, sans-serif; }

.forum-focus-bar-view-bottom {
  position: relative;
  /*height: 26px;*/
  margin-top: 8px; }

.forum-focus-bar-view-top {
  position: relative;
  /*height: 26px;*/
  margin-bottom: 8px; }

.forum-search-sort-container span {
  text-transform: uppercase;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: bold; }

.forum-search-sort-container select {
  padding: 5px;
  margin-left: 7px;
  min-width: 150px; }

.forum-admin-multi-container {
  float: right;
  font-size: 12px; }

.forum-start-latest-separator {
  height: 26px;
  float: right;
  width: 200px; }

.forum-report-container {
  float: right;
  padding-top: 4px;
  padding-left: 10px; }

.forum-thread-title-edit {
  margin: 9px 0 12px 0;
  position: relative;
  top: -7px;
  left: -4px; }

.forum-thread-title-edit input[type=text] {
  font-size: 22px;
  font-weight: bold; }

.forum-edit-title {
  position: absolute;
  right: 200px;
  top: 7px; }

.forum-edit-title a {
  font-weight: normal;
  font-size: 11px; }

.forum-reply-container {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 5px; }

.forum-hidden-post {
  display: none; }

.forum-thread-is-locked {
  padding-left: 20px;
  background: url(../serverguide/bfbc2/icons/padlock_black.png) no-repeat scroll 0 6px transparent;
  padding-top: 6px;
  font-weight: bold;
  font-size: 16px; }
  .forum-thread-is-locked.top {
    float: right; }

.forum-sticky-separator {
  height: 16px; }

.forum-start-forum .forum-start-forum-title-username {
  color: #a8a8a8;
  white-space: nowrap;
  overflow: hidden;
  max-width: 350px; }

.forum-search-results-heading {
  font-size: 12px;
  font-family: Tahoma, sans-serif;
  font-weight: bold;
  line-height: 23px; }

.forum-search-results-none {
  padding: 40px 0;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  width: 100%; }

.forum-search-results-item {
  padding: 0 0 12px; }

.forum-search-results-item-title {
  float: none;
  display: block; }

.forum-search-results-item-title .forum-search-results-icons {
  float: left;
  margin-right: 4px; }

.forum-search-subline {
  margin-top: 5px;
  font-size: 11px;
  font-weight: normal; }

.forum-search-subline a {
  font-size: 11px;
  font-weight: normal; }

.forum-search-results-item-title h3 {
  float: left;
  text-transform: none;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 12px; }

.forum-search-results-item-title a {
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
  float: left; }

.forum-search-results-item-title span {
  float: left;
  padding-left: 10px;
  font-size: 11px;
  color: #8a8a8a;
  line-height: 14px;
  font-weight: normal;
  padding-top: 3px; }

.forum-search-results-item-post {
  color: #353535;
  font-size: 12px;
  padding-top: 4px;
  float: none;
  display: block;
  line-height: 19px; }

.forum-search-results-item-post b {
  background-color: #fbf2d4;
  font-weight: bold;
  padding: 0 1px; }

.forum-posthistory-container {
  padding-bottom: 10px; }

.forum-posthistory-container b {
  font-size: 12px; }

.forum-posthistory-container .forum-start-border {
  margin-top: 5px; }

.forum-posthistory-container .forum-posthistory-revisions .forum-threadview-post {
  background-color: #fafafa; }

/* forum auto-search
 ------------------------------------------------------------------ */
.forum-postsimilarlist {
  float: right;
  width: 318px;
  margin: 15px 0 19px 16px;
  position: relative; }

.forum-postsimilarlist h2 {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 12px; }

.forum-postsimilarlist-hr {
  height: 1px;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 0px;
  background-color: #808080;
  opacity: 0.2;
  filter: alpha(opacity=20); }

.forum-postsimilarlist-sticky {
  position: relative;
  top: 3px; }

.forum-postsimilarlist a {
  line-height: 16px;
  margin-right: 5px; }

.forum-postsimilarlist span {
  white-space: nowrap;
  color: #6C6C6C;
  line-height: 16px;
  font-size: 11px; }

.forum-disabled-container {
  width: 600px;
  padding: 30px;
  margin: auto;
  text-align: center; }

.forum-start-container {
  padding-top: 10px; }

.forum-activity {
  position: relative;
  margin-bottom: 10px; }

.forum-activity .common-box-inner {
  padding: 0px; }

#forum-activity-view-more {
  display: block;
  text-align: center;
  border-bottom: 1px solid white;
  margin: -6px 0 6px;
  float: none; }

#forum-activity-view-more a {
  text-decoration: none;
  display: block; }

#forum-activity-view-more .common-cleanbutton-middle {
  width: 972px; }

#forum-activity-view-more a:hover {
  background-position: 0 100%; }

#content > section > header h1 {
  font-size: 28px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #353535;
  font-weight: normal;
  font-family: BebasNeueRegular, Arial, sans-serif; }

#emblem-edit {
  background: #f4f4f4;
  padding: 16px; }
  #emblem-edit header {
    margin-bottom: 16px; }
    #emblem-edit header.layers-count {
      margin-bottom: 0;
      border-bottom: 0; }
    #emblem-edit header .emblem-action-feed-post {
      line-height: 33px;
      font-size: 12px; }
    #emblem-edit header .btn {
      top: 0; }
  #emblem-edit .ugc-terms {
    color: #8a8a8a; }
  #emblem-edit .emblem-edit-background-layer {
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    cursor: default;
    font-size: 12px;
    position: relative;
    margin: 0;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #353535; }
    #emblem-edit .emblem-edit-background-layer:hover {
      background: #dfdfdf; }
    #emblem-edit .emblem-edit-background-layer.selected {
      background: #353535;
      color: #fff; }
      #emblem-edit .emblem-edit-background-layer.selected .color {
        border: 1px solid #fff; }
    #emblem-edit .emblem-edit-background-layer .title {
      font-weight: bold; }
    #emblem-edit .emblem-edit-background-layer .color {
      float: left;
      width: 10px;
      height: 10px;
      margin: 9px 8px 0 0;
      border: 1px solid #353535; }

#emblem-edit-layers .layer {
  color: #353535;
  border-bottom: 1px solid #e7e7e7; }
  #emblem-edit-layers .layer:first-child {
    border-top: 1px solid #e7e7e7; }
  #emblem-edit-layers .layer:hover, #emblem-edit-layers .layer.ui-sortable-helper {
    background: #dfdfdf; }
  #emblem-edit-layers .layer.ui-sortable-helper .actions {
    display: none; }
  #emblem-edit-layers .layer:hover .actions .action {
    opacity: 1; }
  #emblem-edit-layers .layer.placeholder {
    opacity: 0.1; }
  #emblem-edit-layers .layer.selected {
    background: #353535;
    color: #fff; }
    #emblem-edit-layers .layer.selected .color {
      border: 1px solid #fff; }
    #emblem-edit-layers .layer.selected .actions .action.action-remove {
      background-position: -39px 0; }
      #emblem-edit-layers .layer.selected .actions .action.action-remove:hover {
        background-position: -39px 100%; }
    #emblem-edit-layers .layer.selected .actions .action.action-lock {
      background-position: -106px 0; }
      #emblem-edit-layers .layer.selected .actions .action.action-lock:hover {
        background-position: -106px 100%; }
    #emblem-edit-layers .layer.selected.locked .actions .action.action-lock {
      background-position: -120px 0; }
      #emblem-edit-layers .layer.selected.locked .actions .action.action-lock:hover {
        background-position: -120px 100%; }
  #emblem-edit-layers .layer.locked .actions .action.action-lock {
    background-position: -92px 0;
    opacity: 1; }
    #emblem-edit-layers .layer.locked .actions .action.action-lock:hover {
      background-position: -92px 100%; }
  #emblem-edit-layers .layer .title {
    font-weight: bold; }
  #emblem-edit-layers .layer .color {
    border: 1px solid #353535; }
  #emblem-edit-layers .layer .actions {
    opacity: 1; }
    #emblem-edit-layers .layer .actions .action {
      width: 13px;
      height: 13px;
      background: url(../base/shared/editposition_sprite.png) no-repeat;
      text-indent: -30px;
      overflow: hidden;
      opacity: 0; }
      #emblem-edit-layers .layer .actions .action.action-remove {
        background-position: 0 0;
        right: 10px; }
        #emblem-edit-layers .layer .actions .action.action-remove:hover {
          background-position: 0 100%; }
      #emblem-edit-layers .layer .actions .action.action-lock {
        width: 14px;
        background-position: -78px 0;
        left: 10px; }
        #emblem-edit-layers .layer .actions .action.action-lock:hover {
          background-position: -78px 100%; }

#emblem-edit-shapes .jspVerticalBar {
  right: 0;
  width: 8px; }
  #emblem-edit-shapes .jspVerticalBar .jspCap {
    display: none; }
#emblem-edit-shapes .shape-wrapper {
  border-right: 1px solid #ededed;
  border-bottom: 1px solid #ededed; }
  #emblem-edit-shapes .shape-wrapper:nth-child(3n+3) {
    border-right: 0; }
  #emblem-edit-shapes .shape-wrapper.bottom {
    border-bottom: 0; }
  #emblem-edit-shapes .shape-wrapper:hover {
    background-color: #f1f1f1; }
#emblem-edit-shapes .shape {
  width: 58px;
  height: 58px; }

.emblem-layer-options.disabled {
  opacity: 1; }
  .emblem-layer-options.disabled .layer-colors, .emblem-layer-options.disabled .layer-modinputs {
    z-index: 2; }
  .emblem-layer-options.disabled .layer-actions {
    opacity: 0.5; }
.emblem-layer-options .common-cleanbutton {
  cursor: default;
  margin-left: 5px; }
  .emblem-layer-options .common-cleanbutton:first-child {
    margin-left: 0; }
.emblem-layer-options .layer-actions {
  margin: 8px 0; }
  .emblem-layer-options .layer-actions .action .icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../emblem/edit-emblem.png) no-repeat;
    position: relative;
    top: 3px; }
  .emblem-layer-options .layer-actions .action.action-duplicate .icon {
    background-position: 0 0; }
  .emblem-layer-options .layer-actions .action.action-flipx .icon {
    background-position: -14px 0; }
  .emblem-layer-options .layer-actions .action.action-flipy .icon {
    background-position: -28px 0; }
  .emblem-layer-options .layer-actions .action.action-rotate .icon {
    background-position: -42px 0; }
.emblem-layer-options .layer-colors {
  background: #e7e7e7;
  position: relative; }
  .emblem-layer-options .layer-colors .color:hover, .emblem-layer-options .layer-colors .color.active {
    box-shadow: 0 0 0 1px #000; }
.emblem-layer-options .layer-modinputs {
  position: relative; }
  .emblem-layer-options .layer-modinputs .modinput {
    background: #fff;
    border: 0; }
    .emblem-layer-options .layer-modinputs .modinput.color {
      width: auto;
      float: none;
      padding-left: 232px; }
      .emblem-layer-options .layer-modinputs .modinput.color:after {
        content: "";
        display: block;
        width: 89px;
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        background: #fff;
        z-index: 0; }

/* TODO: SASSify code */
/* friendrecommendation component CSS resource */
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges; }

.line {
  fill: none;
  stroke-width: 1.5px; }

.queued {
  stroke: steelblue; }

.completed {
  stroke: maroon; }

#friendrecommendation-stats-vals {
  /*margin-left: 40px;*/
  margin: 0 auto; }

#friendrecommendation-stats-vals thead {
  font-weight: bold; }

#friendrecommendation-stats-vals td {
  text-align: right;
  padding-right: 14px;
  padding-top: 8px; }

/* recommendedfriends component CSS resource */
#friendrecommendation-main-container {
  display: none;
  margin-top: 15px;
  margin-bottom: 16px; }
  #friendrecommendation-main-container .box-content {
    padding-bottom: 4px; }
  #friendrecommendation-main-container .facebook-friendfinder {
    background: url(../facebook/icon-fb-m.png) no-repeat;
    margin-top: 1px;
    padding: 0 15px;
    padding-left: 63px;
    background-position: 16px center;
    font-size: 12px;
    text-align: left; }

#friendrecommendation-main-container a.avatar {
  margin-right: 10px; }

#friendrecommendation-main-container button.add-recommended-friend {
  float: right;
  margin-top: 4px;
  margin-right: 10px; }

#friendrecommendation-main-container .avatar {
  float: left; }

#friendrecommendation-main-container .textinfo {
  float: left;
  margin-bottom: 10px;
  color: #a8a8a8; }

#friendrecommendation-main-container .textinfo a {
  font-weight: bold; }

#friendrecommendation-main-container .remove-recommended-friend {
  float: right;
  margin-top: 9px; }
  #friendrecommendation-main-container .remove-recommended-friend:hover {
    cursor: pointer; }

#friendrecommendation-main-container .devblog-item {
  height: 50px; }
  #friendrecommendation-main-container .devblog-item .textinfo {
    font-size: 12px; }

/* ============================== EOR ============================*/
/* ============================== @@ ============================= */
.battlereport-section-container {
  margin-bottom: 16px; }

.eor-bg {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
  height: 345px;
  opacity: 1; }
  .eor-bg.aside {
    width: 320px;
    height: 163px; }
  .eor-bg.mobile {
    width: 324px;
    height: 163px; }
  .eor-bg.feed, .eor-bg.battlereport-eor.battledash {
    width: 548px;
    height: 163px;
    opacity: 1 !important; }
  .eor-bg.battledash {
    width: 530px;
    height: 163px;
    opacity: 1 !important; }
  .eor-bg.hide {
    display: block !important;
    opacity: 0; }

.battlereport-eor.feed .teams > .team .name.flag-THIEVES, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash, .battlereport-eor.aside .teams > .team .name.flag-THIEVES, .battlereport-eor .teams > .team .name.flag-THIEVES {
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/badges/criminals-0d307da2.png); }

.battlereport-eor.feed .teams > .team .name.flag-SWAT, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash, .battlereport-eor.aside .teams > .team .name.flag-SWAT, .battlereport-eor .teams > .team .name.flag-SWAT {
  background-image: url(//eaassets-a.akamaihd.net/battlelog/bb/bfh/badges/cops-e802ebde.png); }

.battlereport-eor.feed .teams > .team .name.flag-SWAT, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash, .battlereport-eor.feed .teams > .team .name.flag-THIEVES, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash, .battlereport-eor.aside .teams > .team .name.flag-SWAT, .battlereport-eor.aside .teams > .team .name.flag-THIEVES {
  height: 42px;
  line-height: 42px; }

.battlereport-eor {
  font-family: Purista, sans-serif;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 1px;
  height: 345px;
  background-color: #000;
  color: #fff;
  overflow: hidden;
  position: relative; }
  .battlereport-eor .eor-bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; }
  .battlereport-eor:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1; }
  .battlereport-eor p {
    padding: 0;
    margin: 0; }
  .battlereport-eor .winning-team {
    position: relative;
    z-index: 2;
    padding-top: 54px;
    text-align: center; }
    .battlereport-eor .winning-team h2 {
      font-size: 36px;
      margin-bottom: 16px;
      line-height: 36px;
      white-space: nowrap; }
  .battlereport-eor .info {
    position: relative;
    z-index: 2;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 16px; }
  .battlereport-eor .teams {
    position: relative;
    width: 440px;
    margin: 0 auto;
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 36px;
    z-index: 2; }
    .battlereport-eor .teams > .team {
      width: 200px;
      display: inline-block;
      margin-bottom: 2px; }
      .battlereport-eor .teams > .team .score-label {
        text-transform: uppercase;
        font-weight: normal;
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 4px; }
        .battlereport-eor .teams > .team .score-label strong {
          font-family: Purista, sans-serif;
          font-style: normal;
          font-weight: 600; }
      .battlereport-eor .teams > .team:nth-child(n+3) {
        margin-top: 8px; }
      .battlereport-eor .teams > .team:nth-child(odd) .score {
        text-align: left; }
      .battlereport-eor .teams > .team:nth-child(odd) .score-label {
        text-align: right; }
      .battlereport-eor .teams > .team:nth-child(odd) .score-label + .score {
        text-align: right; }
      .battlereport-eor .teams > .team:nth-child(odd) [class*=flag-] {
        background-position: center left;
        padding-left: 96px; }
      .battlereport-eor .teams > .team:nth-child(even) {
        float: right; }
        .battlereport-eor .teams > .team:nth-child(even) .score, .battlereport-eor .teams > .team:nth-child(even) .name {
          text-align: right; }
        .battlereport-eor .teams > .team:nth-child(even) .score-label {
          text-align: left; }
        .battlereport-eor .teams > .team:nth-child(even) .score-label + .score {
          text-align: left; }
        .battlereport-eor .teams > .team:nth-child(even) [class*=flag-] {
          background-position: center right;
          padding-right: 96px; }
          .battlereport-eor .teams > .team:nth-child(even) [class*=flag-] + .score {
            float: right; }
      .battlereport-eor .teams > .team [class*=flag-] + .score {
        width: 80px;
        text-align: center; }
      .battlereport-eor .teams > .team .name {
        line-height: 64px; }
        .battlereport-eor .teams > .team .name[class*=flag-] {
          background-repeat: no-repeat; }
        .battlereport-eor .teams > .team .name.flag-US {
          background-image: url(../battlereport/flags/US.png); }
        .battlereport-eor .teams > .team .name.flag-RU {
          background-image: url(../battlereport/flags/RU.png); }
        .battlereport-eor .teams > .team .name.flag-CN {
          background-image: url(../battlereport/flags/CN.png); }
  .battlereport-eor .vs, .battlereport-eor .score-type {
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: normal; }
  .battlereport-eor .vs {
    top: 16px; }
  .battlereport-eor .score-type {
    top: 64px;
    line-height: 36px; }
  .battlereport-eor.gamemode-8 .winning-team {
    padding-top: 32px; }
  .battlereport-eor.gamemode-8.full .teams {
    width: 560px; }
    .battlereport-eor.gamemode-8.full .teams > .team .name {
      line-height: 32px; }
    .battlereport-eor.gamemode-8.full .teams > .team:nth-child(n+2) {
      float: right; }
      .battlereport-eor.gamemode-8.full .teams > .team:nth-child(n+2) .score, .battlereport-eor.gamemode-8.full .teams > .team:nth-child(n+2) .name {
        text-align: left; }
    .battlereport-eor.gamemode-8.full .teams > .team:nth-child(n+4) {
      float: left; }
      .battlereport-eor.gamemode-8.full .teams > .team:nth-child(n+4) .score, .battlereport-eor.gamemode-8.full .teams > .team:nth-child(n+4) .name {
        text-align: right; }
    .battlereport-eor.gamemode-8.full .teams > .team:first-child {
      float: left; }
      .battlereport-eor.gamemode-8.full .teams > .team:first-child .score, .battlereport-eor.gamemode-8.full .teams > .team:first-child .name {
        text-align: right; }
  .battlereport-eor.aside, .battlereport-eor.feed, .battlereport-eor.battledash {
    height: 163px; }
    .battlereport-eor.aside .winning-team, .battlereport-eor.feed .winning-team, .battlereport-eor.feed .battlereport-eor.battledash {
      padding-top: 16px; }
    .battlereport-eor.aside .info, .battlereport-eor.feed .info, .battlereport-eor.feed .battlereport-eor.battledash {
      display: none; }
    .battlereport-eor.aside h2, .battlereport-eor.feed h2, .battlereport-eor.feed .battlereport-eor.battledash {
      font-size: 24px;
      line-height: 28px;
      margin-bottom: 2px; }
    .battlereport-eor.aside .teams, .battlereport-eor.feed .teams, .battlereport-eor.feed .battlereport-eor.battledash {
      top: 8px;
      font-size: 24px;
      line-height: 24px; }
      .battlereport-eor.aside .teams > .team .name, .battlereport-eor.feed .teams > .team .name, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash {
        line-height: 24px;
        margin-bottom: 8px; }
        .battlereport-eor.aside .teams > .team .name[class*=flag-], .battlereport-eor.feed .teams > .team .name[class*=flag-], .battlereport-eor.feed .teams > .team .battlereport-eor.battledash {
          background-size: contain; }
        .battlereport-eor.aside .teams > .team .name.flag-US, .battlereport-eor.feed .teams > .team .name.flag-US, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash {
          background-image: url(../battlereport/flags/US.png); }
        .battlereport-eor.aside .teams > .team .name.flag-RU, .battlereport-eor.feed .teams > .team .name.flag-RU, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash {
          background-image: url(../battlereport/flags/RU.png); }
        .battlereport-eor.aside .teams > .team .name.flag-CN, .battlereport-eor.feed .teams > .team .name.flag-CN, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash {
          background-image: url(../battlereport/flags/CN.png); }
      .battlereport-eor.aside .teams > .team:nth-child(n+3), .battlereport-eor.feed .teams > .team:nth-child(n+3), .battlereport-eor.feed .teams > .battlereport-eor.battledash {
        margin-top: 2px; }
      .battlereport-eor.aside .teams > .team:nth-child(odd) [class*=flag-], .battlereport-eor.feed .teams > .team:nth-child(odd) [class*=flag-], .battlereport-eor.feed .teams > .team:nth-child(odd) .battlereport-eor.battledash {
        padding-left: 55px; }
      .battlereport-eor.aside .teams > .team:nth-child(even) [class*=flag-], .battlereport-eor.feed .teams > .team:nth-child(even) [class*=flag-], .battlereport-eor.feed .teams > .team:nth-child(even) .battlereport-eor.battledash {
        padding-right: 55px; }
      .battlereport-eor.aside .teams > .team [class*=flag-] + .score, .battlereport-eor.feed .teams > .team [class*=flag-] + .score, .battlereport-eor.feed .teams > .team [class*=flag-] + .battlereport-eor.battledash {
        width: 70px;
        margin-right: -10px;
        margin-left: -10px; }
      .battlereport-eor.aside .teams > .team .score-label, .battlereport-eor.feed .teams > .team .score-label, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash {
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; }
    .battlereport-eor.aside .vs, .battlereport-eor.aside .score-type, .battlereport-eor.feed .vs, .battlereport-eor.feed .battlereport-eor.battledash, .battlereport-eor.feed .score-type, .battlereport-eor.feed .battlereport-eor.battledash {
      font-size: 14px; }
    .battlereport-eor.aside .vs, .battlereport-eor.feed .vs, .battlereport-eor.feed .battlereport-eor.battledash {
      top: 1px; }
    .battlereport-eor.aside .score-type, .battlereport-eor.feed .score-type, .battlereport-eor.feed .battlereport-eor.battledash {
      top: 33px;
      line-height: 24px; }
    .battlereport-eor.aside.gamemode-8 .winning-team, .battlereport-eor.feed.gamemode-8 .winning-team, .battlereport-eor.feed.gamemode-8 .battlereport-eor.gamemode-8.battledash {
      padding-top: 12px; }
    .battlereport-eor.aside.gamemode-8 h2, .battlereport-eor.feed.gamemode-8 h2, .battlereport-eor.feed.gamemode-8 .battlereport-eor.gamemode-8.battledash {
      margin-bottom: 0; }
    .battlereport-eor.aside.gamemode-8 .teams, .battlereport-eor.feed.gamemode-8 .teams, .battlereport-eor.feed.gamemode-8 .battlereport-eor.gamemode-8.battledash {
      font-size: 20px;
      width: 320px; }
      .battlereport-eor.aside.gamemode-8 .teams > .team .name, .battlereport-eor.feed.gamemode-8 .teams > .team .name, .battlereport-eor.feed.gamemode-8 .teams > .team .battlereport-eor.gamemode-8.battledash {
        margin-bottom: 0; }
      .battlereport-eor.aside.gamemode-8 .teams > .team:nth-child(odd) .name, .battlereport-eor.aside.gamemode-8 .teams > .team:nth-child(odd) .score, .battlereport-eor.feed.gamemode-8 .teams > .team:nth-child(odd) .name, .battlereport-eor.feed.gamemode-8 .teams > .team:nth-child(odd) .battlereport-eor.gamemode-8.battledash, .battlereport-eor.feed.gamemode-8 .teams > .team:nth-child(odd) .score, .battlereport-eor.feed.gamemode-8 .teams > .team:nth-child(odd) .battlereport-eor.gamemode-8.battledash {
        text-align: right; }
      .battlereport-eor.aside.gamemode-8 .teams > .team:nth-child(even) .name, .battlereport-eor.aside.gamemode-8 .teams > .team:nth-child(even) .score, .battlereport-eor.feed.gamemode-8 .teams > .team:nth-child(even) .name, .battlereport-eor.feed.gamemode-8 .teams > .team:nth-child(even) .battlereport-eor.gamemode-8.battledash, .battlereport-eor.feed.gamemode-8 .teams > .team:nth-child(even) .score, .battlereport-eor.feed.gamemode-8 .teams > .team:nth-child(even) .battlereport-eor.gamemode-8.battledash {
        text-align: left; }
    .battlereport-eor.aside.gamemode-8 .score-type, .battlereport-eor.feed.gamemode-8 .score-type, .battlereport-eor.feed.gamemode-8 .battlereport-eor.gamemode-8.battledash {
      top: 22px; }
  .battlereport-eor.aside .teams {
    width: 292px; }
    .battlereport-eor.aside .teams > .team {
      width: 131px; }
      .battlereport-eor.aside .teams > .team .score-label {
        font-size: 12px;
        line-height: 14px; }
        .battlereport-eor.aside .teams > .team .score-label:nth-of-type(2) {
          font-size: 11px;
          line-height: 12px; }
  .battlereport-eor.aside.gamemode-8 {
    width: 320px; }
  .battlereport-eor.feed .teams, .battlereport-eor.feed .battlereport-eor.battledash {
    width: 360px; }
    .battlereport-eor.feed .teams > .team, .battlereport-eor.feed .teams > .battlereport-eor.battledash {
      width: 165px; }
      .battlereport-eor.feed .teams > .team .score-label, .battlereport-eor.feed .teams > .team .battlereport-eor.battledash {
        font-size: 14px;
        line-height: 16px; }
  .battlereport-eor.feed.gamemode-8 .teams, .battlereport-eor.feed.gamemode-8 .battlereport-eor.gamemode-8.battledash {
    width: 495px; }
    .battlereport-eor.feed.gamemode-8 .teams > .team, .battlereport-eor.feed.gamemode-8 .teams > .battlereport-eor.gamemode-8.battledash {
      width: 200px; }

#grid-overlay {
  right: 16px;
  left: 16px; }

#base-header .grid-container {
  width: 1024px; }

body:not(.no-comcenter) {
  /* More than container-width + comcenter width + spacing */
  /* Less then $container-width + comcenter width */
  /* Less than container-width */ }
  @media screen and (min-width: 1263px) {
    body:not(.no-comcenter) #base-background {
      margin-left: -237px; }
    body:not(.no-comcenter) .no-comcenter #base-background {
      margin-left: 0; }
    body:not(.no-comcenter) .no-comcenter #viewport {
      padding-right: 0; }
    body:not(.no-comcenter) #viewport {
      position: relative;
      padding-right: 237px; }
    body:not(.no-comcenter) #geomap {
      right: 237px; }
    body:not(.no-comcenter) #base-header, body:not(.no-comcenter) #unified-game-manager {
      right: 237px; }
    body:not(.no-comcenter) #comcenter-chats {
      right: 245px; }
    body:not(.no-comcenter) #dialog-container {
      margin-left: -237px; } }
  @media screen and (max-width: 1263px) {
    body:not(.no-comcenter) body {
      min-width: 1026px; }
    body:not(.no-comcenter) #base-header, body:not(.no-comcenter) #unified-game-manager {
      right: 0; }
    body:not(.no-comcenter) #viewport {
      position: relative;
      padding-right: 0; }
    body:not(.no-comcenter) #geomap {
      right: 0; }
    body:not(.no-comcenter) .comcenter-toggle {
      display: block; }
    body:not(.no-comcenter) #base-header-user-tools .tools .tools-item.pro .username {
      max-width: 120px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
    body:not(.no-comcenter) #unified-game-manager .grid-container {
      width: 100%; }
      body:not(.no-comcenter) #unified-game-manager .grid-container #ugm-action-buttons {
        float: right; }
    body:not(.no-comcenter) #comcenter-friends {
      z-index: 0;
      background: #131313;
      display: block;
      visibility: hidden; }
    body:not(.no-comcenter) #base-background .video-container {
      display: none; }
    body:not(.no-comcenter).show-comcenter #comcenter-friends {
      z-index: 1001;
      visibility: visible; }
    body:not(.no-comcenter).show-comcenter #viewport, body:not(.no-comcenter).show-comcenter #base-background, body:not(.no-comcenter).show-comcenter #base-header, body:not(.no-comcenter).show-comcenter #geomap {
      -webkit-transform: translate3d(-237px, 0, 0);
      -moz-transform: translate3d(-237px, 0, 0);
      -ms-transform: translate3d(-237px, 0, 0);
      -o-transform: translate3d(-237px, 0, 0);
      transform: translate3d(-237px, 0, 0);
      -ms-transform: translate(-237px, 0); }
    body:not(.no-comcenter).show-comcenter #base-header .community-bar, body:not(.no-comcenter).show-comcenter #base-header .game-bar .inner-wrapper {
      padding-right: 16px; }
    body:not(.no-comcenter).show-comcenter #base-page {
      position: absolute;
      margin: 0; }
    body:not(.no-comcenter).show-comcenter #base-background {
      right: 0; }
    body:not(.no-comcenter).show-comcenter #base-page {
      right: 16px; } }
  @media screen and (max-width: 1043px) {
    body:not(.no-comcenter) #receipt-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1001; }
    body:not(.no-comcenter) #base-container:before {
      height: 0; }
    body:not(.no-comcenter) #base-header {
      min-width: 1026px;
      position: relative; }
      body:not(.no-comcenter) #base-header .game-bar > .grid-container {
        position: absolute; }
      body:not(.no-comcenter) #base-header #comcenter-chats {
        width: 1026px; }
      body:not(.no-comcenter) #base-header > section .grid-container {
        width: 992px;
        padding: 0 16px; }
    body:not(.no-comcenter) #geoleaderboard-container {
      margin-top: 0; }
    body:not(.no-comcenter) #geomap {
      right: 0; }
    body:not(.no-comcenter) #base-container, body:not(.no-comcenter) .has-facebook-bar #base-container {
      padding-top: 16px; }
    body:not(.no-comcenter) #facebook-bar {
      margin-top: 0; }
    body:not(.no-comcenter) #base-background .video-container {
      display: none; }
    body:not(.no-comcenter) #comcenter-friends {
      width: 237px;
      right: 0; }
    body:not(.no-comcenter).show-comcenter #base-background, body:not(.no-comcenter).show-comcenter #base-header, body:not(.no-comcenter).show-comcenter #viewport, body:not(.no-comcenter).show-comcenter #geomap {
      -webkit-transform: translate3d(-237px, 0, 0);
      -moz-transform: translate3d(-237px, 0, 0);
      -ms-transform: translate3d(-237px, 0, 0);
      -o-transform: translate3d(-237px, 0, 0);
      transform: translate3d(-237px, 0, 0);
      -ms-transform: translate(-237px, 0); } }