/**
 * Mixin to generate button states
 * @param color
 * @param bg-color
 * @param border-color
 * @param hover
 * @param active
 */
/**
 * Mixin to use ellipsis for texts if they go beyond their allowed width
 * @param max-width
 */
[class^="icon-"], [class*=" icon-"] {
  text-decoration: none;
  background-color: transparent;
  border: 0;
  color: transparent;
  font: 0/0 a;
  text-shadow: none; }

.submenu > ul > li > a, .submenu > ul > li > span {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }

.box-content:before, .dialog > header:before, .dialog > section:before, .dialog > footer:before, .box-content:after, .dialog > header:after, .dialog > section:after, .dialog > footer:after {
  display: table;
  content: "";
  line-height: 0; }
.box-content:after, .dialog > header:after, .dialog > section:after, .dialog > footer:after {
  clear: both; }

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

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

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

.uppercase {
  text-transform: uppercase; }

.lowercase {
  text-transform: lowercase; }

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

/*!
Video.js Default Styles (http://videojs.com)
Version 4.6.0
Create your own skin at http://designer.videojs.com
*/
/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
.vjs-default-skin {
  color: #fff; }

/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/
@font-face {
  font-family: 'VideoJS';
  src: url('../base/fonts/videojs/vjs.eot');
  src: url('../base/fonts/videojs/vjs.eot?#iefix') format('embedded-opentype'), url('../base/fonts/videojs/vjs.woff') format('woff'), url('../base/fonts/videojs/vjs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal; }

/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
  /* Replace browser focus hightlight with handle highlight */
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  /* background-color-with-alpha */
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6); }

.vjs-default-skin .vjs-slider:focus {
  box-shadow: 0 0 2em #fff; }

.vjs-default-skin .vjs-slider-handle {
  opacity: 0;
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0;
  -webkit-transition: 0.2s opacity;
  -moz-transition: 0.2s opacity;
  transition: 0.2s opacity; }

.vjs-default-skin .vjs-slider-handle:before {
  content: "";
  background-color: #666;
  border: 0.6em solid #eee;
  border-radius: 2em;
  width: 4px;
  height: 0.4em;
  position: absolute;
  top: -0.3em;
  left: 0;
  /* Rotate the square icon to make a diamond */ }

/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
*/
.vjs-default-skin .vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
     If you want more margin below the control bar, add more height. */
  bottom: 0;
  /* Use left/right to stretch to 100% width of player div */
  left: 0;
  right: 0;
  /* Height includes any margin you want above or below control items */
  height: 3em;
  /* background-color-with-alpha */
  background-color: #1d2f3b;
  background-color: rgba(29, 47, 59, 0.7); }

/* Show the control bar only once the video has started playing */
.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s; }

/* Hide the control bar when the video is playing and the user is inactive  */
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s; }

.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
  display: none; }

.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
  display: none; }

/* The control bar shouldn't show after an error */
.vjs-default-skin.vjs-error .vjs-control-bar {
  display: none; }

/* IE8 is flakey with fonts, and you have to change the actual content to force
fonts to show/hide properly.
  - "\9" IE8 hack didn't work for this
  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/
@media \0screen {
  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: ""; } }

/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3em;
  width: 4em; }

/* FontAwsome button icons */
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }

/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before, .vjs-default-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em white; }

/* Hide control text visually, but have it available for screenreaders */
.vjs-default-skin .vjs-control-text {
  /* hide-visually */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-play-control {
  width: 5em;
  cursor: pointer; }

.vjs-default-skin .vjs-play-control:before {
  content: "\e001"; }

.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e002"; }

/* Playback toggle
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value {
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }

.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
  width: 4em;
  left: -2em;
  list-style: none; }

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control, .vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right; }

.vjs-default-skin .vjs-mute-control:before, .vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e006"; }

.vjs-default-skin .vjs-mute-control.vjs-vol-0:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003"; }

.vjs-default-skin .vjs-mute-control.vjs-vol-1:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004"; }

.vjs-default-skin .vjs-mute-control.vjs-vol-2:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005"; }

.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right; }

.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0; }

.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em; }

.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  /* assuming volume starts at 1.0 */
  width: 100%;
  background: #d66e29 url('') -50% 0 repeat; }

.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
  /* Assumes volume starts at 1.0. If you change the size of the
     handle relative to the volume bar, you'll need to update this value
     too. */
  left: 4.6em; }

.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.4em;
  left: -0.2em;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 1.5em;
  background-color: #eee; }

.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em; }

/* Progress
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;
  /* Shrink the bar slower than it grows. */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s; }

/* On hover, make the progress bar grow to something that's more clickable.
    This simply changes the overall font for the progress bar, and this
    updates both the em-based widths and heights, as wells as the icon font */
.vjs-default-skin:hover .vjs-progress-control {
  font-size: 0.9em;
  /* Even though we're not changing the top/height, we need to include them in
        the transition so they're handled correctly. */
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s; }
.vjs-default-skin:hover .vjs-slider-handle {
  opacity: 1; }

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  height: 100%; }

/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress, .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* updated by javascript during playback */
  width: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0; }

.vjs-default-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprisingly works in IE8.
      Created using http://www.patternify.com
    Changing the first color value will change the bar color.
    Also using a paralax effect to make the lines move backwards.
      The -50% left position makes that happen.
  */
  background: #d66e29 url('') -50% 0 repeat; }

.vjs-default-skin .vjs-load-progress {
  background: #646464;
  /* IE8- Fallback */
  background: rgba(255, 255, 255, 0.4); }

.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%; }

.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em;
  /* Minor adjustment */ }

/* Live Mode
--------------------------------------------------------------------------------
*/
.vjs-default-skin.vjs-live .vjs-time-controls, .vjs-default-skin.vjs-live .vjs-time-divider, .vjs-default-skin.vjs-live .vjs-progress-control {
  display: none; }

.vjs-default-skin.vjs-live .vjs-live-display {
  display: block; }

/* Live Display
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-live-display {
  display: none;
  font-size: 1em;
  line-height: 3em; }

/* Time Display
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em; }

.vjs-default-skin .vjs-current-time {
  float: left; }

.vjs-default-skin .vjs-duration {
  float: left; }

/* Remaining time is in the HTML, but not included in default design */
.vjs-default-skin .vjs-remaining-time {
  display: none;
  float: left; }

.vjs-time-divider {
  float: left;
  line-height: 3em; }

/* Fullscreen
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right; }

.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e000"; }

/* Switch to the exit icon when the player is in fullscreen */
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b"; }

/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
.vjs-default-skin .vjs-big-play-button {
  font-size: 3em;
  display: block;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 2.5em;
  margin-left: -1.5em;
  margin-top: -1.25em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s; }

/* Optionally center */
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
  /* Center it horizontally */
  left: 50%;
  margin-left: -1.6em;
  align: 0.5em; }

/* Hide if controls are disabled */
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none; }

/* Hide when video starts playing */
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
  display: none; }

/* Hide on mobile devices. Remove when we stop using native controls
    by default on mobile  */
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none; }

.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */
  line-height: 2.5em;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  /* Needed for IE8 */
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%; }
  .vjs-default-skin:hover .vjs-default-skin .vjs-big-play-button:before, .vjs-default-skin .vjs-big-play-button:before:focus {
    outline: 0;
    text-shadow: 0 0 3em #fff;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s; }

.vjs-error .vjs-big-play-button {
  display: none; }

/* Error Display
--------------------------------------------------------------------------------
*/
.vjs-error-display {
  display: none; }

.vjs-error .vjs-error-display {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.vjs-error .vjs-error-display:before {
  content: 'X';
  font-family: Arial;
  font-size: 4em;
  color: #666666;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */
  line-height: 1;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  /* Needed for IE8 */
  vertical-align: middle;
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  width: 100%; }

.vjs-error-display div {
  position: absolute;
  font-size: 1.4em;
  text-align: center;
  bottom: 1em;
  right: 1em;
  left: 1em; }

.vjs-error-display a, .vjs-error-display a:visited {
  color: #F4A460; }

/* Loading Spinner
--------------------------------------------------------------------------------
*/
.vjs-loading-spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px; }

/* Errors are unrecoverable without user interaction,
   so hide the spinner in the case of an error */
.vjs-playing .vjs-loading-spinner, .vjs-paused .vjs-loading-spinner, .video-js.vjs-error .vjs-loading-spinner {
  /* using !important flag because currently the loading spinner
     uses hide()/show() instead of classes. The !important can be
     removed when that's updated */
  display: none !important;
  /* ensure animation doesn't continue while hidden */
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none; }

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg); }

  100% {
    -moz-transform: rotate(359deg); } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(359deg); } }

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg); }

  100% {
    -o-transform: rotate(359deg); } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(359deg); } }

/* Menu Buttons (Captions/Subtitles/etc.)
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer; }

.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em;
  /* (Width of vjs-menu - width of button) / 2 */
  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid black;
  /* Same width top as ul bottom */
  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */ }

/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  /* Same bottom as vjs-menu border-top */
  max-height: 15em;
  overflow: auto;
  left: -5em;
  /* Width of menu - width of button / 2 */
  /* background-color-with-alpha */
  background-color: #1d2f3b;
  background-color: rgba(29, 47, 59, 0.7);
  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); }

.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
  display: block; }

.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase; }

.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000; }

.vjs-default-skin .vjs-menu-button ul li:focus, .vjs-default-skin .vjs-menu-button ul li:hover, .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus, .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
  outline: 0;
  color: #111;
  /* background-color-with-alpha */
  background-color: white;
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 1em white; }

.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default; }

/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before {
  content: "\e00c"; }

/* Captions Button */
.vjs-default-skin .vjs-captions-button:before {
  content: "\e008"; }

/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before, .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  box-shadow: 0 0 1em white; }

/*
REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and
     easily calculable. */
  font-size: 10px;
  /* Allow poster to be vertially aligned. */
  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/
  /* Provide some basic defaults for fonts */
  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */
  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Playback technology elements expand to the width/height of the containing div
    <video> or <object> */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   checking fullScreenEnabled. */
.video-js:-moz-full-screen {
  position: absolute; }

/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  overflow-y: auto; }

.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  /* IE6 full-window (underscore hack) */
  _position: absolute; }

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important; }

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none; }

/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%; }

.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%; }

/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
  display: none; }

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  /* Leave padding on left and right */
  left: 1em;
  right: 1em; }

/* Move captions down when controls aren't being shown */
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em; }

/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  /* background-color-with-alpha */
  background-color: black;
  background-color: rgba(0, 0, 0, 0.5); }

.video-js .vjs-subtitles {
  color: #fff;
  /* Subtitles are white */ }

.video-js .vjs-captions {
  color: #fc6;
  /* Captions are yellow */ }

.vjs-tt-cue {
  display: block; }

/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden {
  display: none; }

.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible; }

/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
    The .video-js classname on the video tag also isn't considered.
    This optional paragraph inside the video tag can provide a message to users
    about what's required to play video. */
.vjs-no-js {
  padding: 20px;
  color: #ccc;
  background-color: #333;
  font-size: 18px;
  font-family: Arial, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto; }

.vjs-no-js a, .vjs-no-js a:visited {
  color: #F4A460; }

/* -----------------------------------------------------------------------------
The original source of this file lives at
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
.box-collection {
  border: 1px solid rgba(255, 255, 255, 0.15); }
  .box-collection .box {
    border: none;
    box-shadow: none; }

.box table.table, .box-collection table.table {
  border: none; }

.box {
  border: 1px solid rgba(255, 255, 255, 0.15); }
  .box.box-secondary > header {
    background-color: rgba(0, 0, 0, 0.2); }
  .box.box-secondary > .box-content {
    background-color: rgba(0, 0, 0, 0.2); }
  .box.no-border {
    border: none; }
  .box > header {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0 15px; }
    .box > header h1 {
      line-height: 24px;
      color: #d5dde5;
      font-size: 16px;
      text-transform: uppercase;
      margin: 0;
      font-family: Frutiger, sans-serif;
      font-style: normal;
      font-weight: 400; }
    .box > header + .box-content {
      margin-top: 1px;
      padding-top: 15px; }
      .box > header + .box-content.no-padding {
        padding: 0; }
      .box > header + .box-content.no-margin {
        margin: 0; }
    .box > header + table.table, .box > header + .spacing-top-tight {
      margin-top: 1px; }
  .box > footer {
    background-color: rgba(0, 0, 0, 0.35);
    margin-top: 1px;
    padding: 16px;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    color: #8a8a8a; }
  .box .box-padding {
    padding: 16px; }

a.box {
  display: block;
  text-decoration: none; }
  a.box:not([disabled]) {
    cursor: pointer; }
    a.box:not([disabled]):hover .box-content, a.box:not([disabled]):active .box-content {
      background-color: rgba(0, 0, 0, 0.35); }
    a.box:not([disabled]).box-secondary:hover > .box-content, a.box:not([disabled]).box-secondary:active > .box-content {
      background-color: rgba(0, 0, 0, 0.1); }
    a.box:not([disabled]):active .box-content {
      -webkit-transition-duration: 0;
      -moz-transition-duration: 0;
      transition-duration: 0; }
  a.box[disabled] {
    cursor: default;
    opacity: 0.5; }

a.box-content {
  text-decoration: none; }

.box-content {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 16px;
  display: block;
  word-wrap: break-word; }
  .box-content + .box-content {
    margin-top: 1px;
    padding-top: 15px; }
  .box-content + header {
    margin-top: 1px; }
    .box-content + header h1 {
      line-height: 31px; }
  .box-content.no-padding {
    padding: 0; }
  .box-content.box-hover:hover {
    background-color: rgba(0, 0, 0, 0.6); }
  .box-content.no-background {
    background: transparent; }

.box .box {
  border: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-o-keyframes dialog-shake 0% {
  -webkit-transform: translateX(-10px);
  -moz-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  -o-transform: translateX(-10px);
  transform: translateX(-10px); }
-o-keyframes dialog-shake 10% {
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px); }
-o-keyframes dialog-shake 20% {
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  -o-transform: translateX(-30px);
  transform: translateX(-30px); }
-o-keyframes dialog-shake 30% {
  -webkit-transform: translateX(30px);
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
  transform: translateX(30px); }
-o-keyframes dialog-shake 40% {
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  -o-transform: translateX(-30px);
  transform: translateX(-30px); }
-o-keyframes dialog-shake 50% {
  -webkit-transform: translateX(30px);
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
  transform: translateX(30px); }
-o-keyframes dialog-shake 60% {
  -webkit-transform: translateX(-10px);
  -moz-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  -o-transform: translateX(-10px);
  transform: translateX(-10px); }
-o-keyframes dialog-shake 70% {
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px); }
-o-keyframes dialog-shake 80% {
  -webkit-transform: translateX(-5px);
  -moz-transform: translateX(-5px);
  -ms-transform: translateX(-5px);
  -o-transform: translateX(-5px);
  transform: translateX(-5px); }
-o-keyframes dialog-shake 90% {
  -webkit-transform: translateX(5px);
  -moz-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -o-transform: translateX(5px);
  transform: translateX(5px); }
-o-keyframes dialog-shake 100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#dialog-container {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  pointer-events: none; }
  #dialog-container .modal-overlay {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    -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; }

.no-csstransitions #dialog-container .modal-overlay, .is-touch #dialog-container .modal-overlay, .commander-body #dialog-container .modal-overlay {
  display: none; }
  .no-csstransitions #dialog-container .modal-overlay.show, .is-touch #dialog-container .modal-overlay.show, .commander-body #dialog-container .modal-overlay.show {
    display: block; }

.dialog {
  position: absolute;
  z-index: 2;
  outline: none;
  pointer-events: all;
  top: 20%;
  left: 50%;
  width: 560px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  background: #070707;
  border: 1px solid #ffffff;
  overflow: hidden; }
  .dialog.auto-size {
    height: 60%; }
  .dialog > header {
    position: relative;
    background: -webkit-linear-gradient(top, #dbdbdb, #ffffff 75%);
    background: linear-gradient(to bottom, #dbdbdb, #ffffff 75%);
    border-bottom: 1px solid #ffffff;
    height: 31px;
    line-height: 30px;
    padding: 0; }
    .dialog > header h3 {
      color: #000;
      font-size: 18px;
      margin-bottom: 0;
      height: 31px;
      line-height: 30px;
      text-align: center; }
    .dialog > header .icon-dialog-close, .dialog > header .icon-close {
      position: absolute;
      right: 6px;
      top: 9px; }
  .dialog > section, .dialog > footer {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 16px;
    font-size: 12px;
    line-height: 1.5; }
    .dialog > section.no-padding, .dialog > footer.no-padding {
      padding: 0; }
  .dialog > section {
    overflow: auto; }
    .dialog > section h2 {
      font-size: 20px; }
  .dialog > footer {
    text-align: center;
    background: #070707; }
  .dialog.hide {
    display: none; }
  .dialog.fade {
    -webkit-transition: opacity 0.15s linear, transform 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -moz-transition: opacity 0.15s linear, transform 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    transition: opacity 0.15s linear, transform 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    opacity: 0;
    -webkit-transform: scale3d(0.75, 0.75, 1);
    -moz-transform: scale3d(0.75, 0.75, 1);
    -ms-transform: scale3d(0.75, 0.75, 1);
    -o-transform: scale3d(0.75, 0.75, 1);
    transform: scale3d(0.75, 0.75, 1); }
    .dialog.fade.in {
      -webkit-transform: scale3d(1, 1, 1);
      -moz-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      -o-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      -moz-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      opacity: 1; }
  .dialog.shake {
    -webkit-animation: dialog-shake 0.2s linear;
    -moz-animation: dialog-shake 0.2s linear;
    -ms-animation: dialog-shake 0.2s linear;
    -o-animation: dialog-shake 0.2s linear;
    animation: dialog-shake 0.2s linear; }
  .dialog.no-footer footer {
    display: none; }
  .dialog .dialog-body {
    overflow-x: hidden;
    overflow-y: auto; }
  .dialog ::-webkit-scrollbar {
    width: 7px; }
  .dialog ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5); }
  .dialog.video-player-dialog {
    width: 672px; }
  .dialog .video-container .video-errormessage {
    display: none; }
  .dialog .video-container.error .video-loader {
    display: none; }
  .dialog .video-container.error .video-errormessage {
    display: block; }
  .dialog .video-container.error .video-mediabutton {
    display: none; }

.is-touch .dialog.fade {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none; }
.is-touch .dialog.shake {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none; }

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

  25% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    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);
    -moz-transform: translateX(1px);
    -ms-transform: translateX(1px);
    -o-transform: translateX(1px);
    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);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    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% {
    -webkit-transform: translateX(-1px);
    -moz-transform: translateX(-1px);
    -ms-transform: translateX(-1px);
    -o-transform: translateX(-1px);
    transform: translateX(-1px); }

  25% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    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);
    -moz-transform: translateX(1px);
    -ms-transform: translateX(1px);
    -o-transform: translateX(1px);
    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);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    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% {
  -webkit-transform: translateX(-1px);
  -moz-transform: translateX(-1px);
  -ms-transform: translateX(-1px);
  -o-transform: translateX(-1px);
  transform: translateX(-1px); }
-o-keyframes icon-distort 25% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  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); }
-o-keyframes icon-distort 50% {
  -webkit-transform: translateX(1px);
  -moz-transform: translateX(1px);
  -ms-transform: translateX(1px);
  -o-transform: translateX(1px);
  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); }
-o-keyframes icon-distort 75% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  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); }
-o-keyframes icon-distort 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); }

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

  25% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    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);
    -moz-transform: translateX(1px);
    -ms-transform: translateX(1px);
    -o-transform: translateX(1px);
    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);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    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% {
    -webkit-transform: translateX(-1px);
    -moz-transform: translateX(-1px);
    -ms-transform: translateX(-1px);
    -o-transform: translateX(-1px);
    transform: translateX(-1px); }

  25% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    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);
    -moz-transform: translateX(1px);
    -ms-transform: translateX(1px);
    -o-transform: translateX(1px);
    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);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    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: #fff; }
  [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;
  -ms-animation: icon-distort 0.1s linear 2;
  -o-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: -61px -20px; }
    .icon-platform.xbox360.inverted, .icon-platform-big.xbox360.inverted {
      background-position: 0 -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: 0 -1px;
    width: 19px;
    height: 12px; }

/* \\\\\\\\\\\\\\\\\ 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-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 {
  width: 37px;
  background-position: -66px -13px; }
  .common-gameicon-hori.common-game-8192-1.bright {
    background-position: 0 -13px; }

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

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

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

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

.common-gameicon-hori.common-game-8192-64 {
  width: 65px;
  background-position: -66px -52px; }
  .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-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; }

.icon-like {
  background-position: 0 -54px; }

.track-icon {
  background: transparent url(../common/warsaw/icon-track.png) no-repeat;
  width: 19px;
  height: 19px;
  display: inline-block;
  position: absolute;
  top: 3px;
  right: 2px;
  z-index: 10; }

.active .track-icon {
  background-position: 0 -19px; }

.submenu {
  border: 1px solid rgba(255, 255, 255, 0.15); }
  .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: 31px; }
    .submenu > ul > li {
      width: 1%;
      display: table-cell;
      position: relative;
      z-index: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.15); }
      .submenu > ul > li:last-child {
        border-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;
          background-color: #949494;
          background: -webkit-linear-gradient(top, #949494 0%, #ffffff 100%);
          /* Chrome10+,Safari5.1+ */
          background: -ms-linear-gradient(top, #949494 0%, #ffffff 100%);
          /* IE10+ */
          background: linear, to bottom, #949494 0%, #ffffff 100%;
          /* W3C */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$activeTabTop', endColorstr='$activeTabBottom',GradientType=0 );
          /* IE6-9 */ }
      .submenu > ul > li > a, .submenu > ul > li > span {
        position: relative;
        display: block;
        padding: 0 10px;
        background-color: rgba(8, 40, 74, 0.7);
        line-height: 30px;
        font-size: 16px;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        color: #fff;
        cursor: default;
        font-family: Frutiger, sans-serif;
        font-style: normal;
        font-weight: 400; }
      .submenu > ul > li > a:hover {
        cursor: pointer;
        background-color: #373737; }
      .submenu > ul > li > a:active {
        cursor: pointer;
        color: #000;
        background-color: #373737; }

.ping-bar {
  display: inline-block;
  position: relative;
  width: 11px;
  height: 8px;
  overflow: hidden;
  -webkit-filter: blur(0px); }
  .ping-bar:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 2px;
    height: 10px;
    background: rgba(138, 138, 138, 0.3);
    box-shadow: rgba(138, 138, 138, 0.3) -3px 2px 0, rgba(138, 138, 138, 0.3) -6px 4px 0, rgba(138, 138, 138, 0.3) -9px 6px 0; }
  .ping-bar.worst:before {
    background: rgba(138, 138, 138, 0.3);
    box-shadow: rgba(138, 138, 138, 0.3) -3px 2px 0, rgba(138, 138, 138, 0.3) -6px 4px 0, #ff0000 -9px 6px 0; }
  .ping-bar.bad:before {
    background: rgba(138, 138, 138, 0.3);
    box-shadow: rgba(138, 138, 138, 0.3) -3px 2px 0, #b8bd35 -6px 4px 0, #b8bd35 -9px 6px 0; }
  .ping-bar.good:before {
    background: rgba(138, 138, 138, 0.3);
    box-shadow: #99b839 -3px 2px 0, #99b839 -6px 4px 0, #99b839 -9px 6px 0; }
  .ping-bar.best:before {
    background: #39b54a;
    box-shadow: #39b54a -3px 2px 0, #39b54a -6px 4px 0, #39b54a -9px 6px 0; }
  .ping-bar.large {
    width: 19px;
    height: 15px; }
    .ping-bar.large:before {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      display: block;
      width: 4px;
      height: 16px;
      background: rgba(138, 138, 138, 0.3);
      box-shadow: rgba(138, 138, 138, 0.3) -5px 4px 0, rgba(138, 138, 138, 0.3) -10px 8px 0, rgba(138, 138, 138, 0.3) -15px 12px 0; }
    .ping-bar.large.worst:before {
      background: rgba(138, 138, 138, 0.3);
      box-shadow: rgba(138, 138, 138, 0.3) -5px 4px 0, rgba(138, 138, 138, 0.3) -10px 8px 0, #ff0000 -15px 12px 0; }
    .ping-bar.large.bad:before {
      background: rgba(138, 138, 138, 0.3);
      box-shadow: rgba(138, 138, 138, 0.3) -5px 4px 0, #b8bd35 -10px 8px 0, #b8bd35 -15px 12px 0; }
    .ping-bar.large.good:before {
      background: rgba(138, 138, 138, 0.3);
      box-shadow: #99b839 -5px 4px 0, #99b839 -10px 8px 0, #99b839 -15px 12px 0; }
    .ping-bar.large.best:before {
      background: #39b54a;
      box-shadow: #39b54a -5px 4px 0, #39b54a -10px 8px 0, #39b54a -15px 12px 0; }

.ui-selector {
  color: #8a8a8a;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 23px;
  overflow: hidden;
  float: left; }

.ui-selector-side-title {
  float: left;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
  color: #858585;
  font-size: 12px;
  line-height: 27px;
  padding-right: 6px; }

.ui-selector li {
  background-color: rgba(0, 0, 0, 0.2);
  border-right: none;
  float: left;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer; }
  .ui-selector li:hover {
    background-color: rgba(0, 0, 0, 0.45); }
  .ui-selector li div {
    padding: 0 8px; }
  .ui-selector li p {
    font-family: Tahoma, sans-serif;
    font-size: 11px; }
  .ui-selector li.selected {
    color: #a8a8a8;
    border-top-color: #fff;
    background-color: black; }
    .ui-selector li.selected:hover {
      color: #a8a8a8;
      border-top-color: #c2c2c2;
      background-color: black; }
    .ui-selector li.selected div, .ui-selector li.selected:hover div {
      border-top-color: #d5d5d5; }
    .ui-selector li.selected div:hover {
      cursor: default; }

/* COMMON SELECTOR ALTERNATIVE, FOR DIFFICULTY ETC.
 * ---------------------------------------------------------------- */
.ui-selector-alt {
  color: #bcbcbc;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 26px;
  margin-bottom: 8px;
  overflow: hidden; }
  .ui-selector-alt li {
    float: left; }
    .ui-selector-alt li div {
      background: url(../common/selector-sprite.png) right -36px no-repeat;
      padding: 0 8px;
      height: 26px; }
      .ui-selector-alt li div:hover {
        color: white;
        cursor: pointer; }
    .ui-selector-alt li.first {
      background: url(../common/selector-sprite.png) left top no-repeat;
      padding-left: 3px; }
      .ui-selector-alt li.first div {
        padding-left: 5px; }
    .ui-selector-alt li.last div {
      background-position: right -72px; }
    .ui-selector-alt li.selected {
      background: url(../common/selector-sprite.png) left -108px no-repeat;
      color: #262626;
      padding-left: 3px; }
      .ui-selector-alt li.selected div {
        background-position: right -144px;
        padding-left: 5px; }
        .ui-selector-alt li.selected div:hover {
          color: #262626;
          cursor: default; }
    .ui-selector-alt li.first.selected {
      background-position: left -180px;
      padding-left: 3px; }
      .ui-selector-alt li.first.selected div {
        padding-left: 5px; }
    .ui-selector-alt li.last.selected div {
      background-position: right -216px; }

/* COMMON SELECTOR OPTIONS
 * ---------------------------------------------------------------- */
.ui-selector div.xbox360 p {
  background: url(../common/selector-sprite.png) left -721px no-repeat;
  width: 64px;
  height: 25px;
  text-indent: -9000px; }
.ui-selector div.ps3 p {
  background: url(../common/selector-sprite.png) -70px -721px no-repeat;
  width: 54px;
  height: 25px;
  text-indent: -9000px; }
.ui-selector div.pc p {
  background: url(../common/selector-sprite.png) -143px -721px no-repeat;
  width: 35px;
  height: 25px;
  text-indent: -9000px; }
.ui-selector div.kit-assault p {
  background: url(../profile/bf3/kit-icons.png) 0 -37px no-repeat;
  width: 18px;
  height: 23px;
  text-indent: -9000px; }
.ui-selector div.kit-support p {
  background: url(../profile/bf3/kit-icons.png) 0 -2px no-repeat;
  width: 18px;
  height: 23px;
  text-indent: -9000px;
  background-position: 0 4px; }
.ui-selector div.kit-medic p {
  background: url(../profile/kit_medic.png) 50% no-repeat;
  width: 18px;
  height: 23px;
  text-indent: -9000px; }
.ui-selector div.kit-engineer p {
  background: url(../profile/bf3/kit-icons.png) 0 -59px no-repeat;
  width: 18px;
  height: 23px;
  text-indent: -9000px;
  background-position: 0 -57px; }
.ui-selector div.kit-recon p {
  background: url(../profile/bf3/kit-icons.png) 0 -20px no-repeat;
  width: 18px;
  height: 23px;
  text-indent: -9000px;
  background-position: 0 -17px; }

.progress-bar {
  position: relative;
  overflow: hidden;
  background-color: #0f1214;
  background-size: 3px 3px, 1px 100%;
  height: 6px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 10px; }
  .progress-bar .progress-bar-inner {
    position: relative;
    float: left;
    height: 6px;
    background-color: #b0b0b1;
    box-shadow: 0 0 0.2em 1px #a3a3a3 inset; }
    .progress-bar .progress-bar-inner:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0; }
    .progress-bar .progress-bar-inner.info {
      background-color: #97d7f6;
      box-shadow: 0 0 0.2em 1px #52b0df inset; }
    .progress-bar .progress-bar-inner.success {
      background-color: #9cca80;
      box-shadow: 0 0 0.2em 1px #79c54d inset; }
    .progress-bar .progress-bar-inner.warning {
      background-color: #eba115;
      box-shadow: 0 0 0.2em 1px #eba115 inset; }
      .progress-bar .progress-bar-inner.warning:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: -webkit-linear-gradient(left, #bd620d, rgba(189, 98, 13, 0));
        background: linear-gradient(to right, #bd620d, rgba(189, 98, 13, 0));
        box-shadow: 0 0 0.2em 1px #eba115 inset; }
    .progress-bar .progress-bar-inner.warning[style="width:100%"] {
      background: #bd620d; }
    .progress-bar .progress-bar-inner.danger {
      background-color: #85696c;
      box-shadow: 0 0 0.2em 1px #7f5256 inset; }
    .progress-bar .progress-bar-inner.home {
      background-color: #97d7f6;
      box-shadow: 0 0 0.2em 1px #52b0df inset; }
    .progress-bar .progress-bar-inner.away {
      background-color: #e9a789;
      box-shadow: 0 0 0.2em 1px #e37237 inset; }
    .progress-bar .progress-bar-inner.clear {
      background-color: #fff; }
    .progress-bar .progress-bar-inner.animated {
      -webkit-animation: progress-bar-animated 2s linear infinite;
      -moz-animation: progress-bar-animated 2s linear infinite;
      -ms-animation: progress-bar-animated 2s linear infinite;
      -o-animation: progress-bar-animated 2s linear infinite;
      animation: progress-bar-animated 2s linear infinite; }
    .progress-bar .progress-bar-inner + .progress-bar-inner {
      margin-left: 0; }
  .progress-bar .progress-bar-text {
    position: absolute;
    font-family: Purista, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-indent: 4px;
    text-align: right; }
  .progress-bar.animate .progress-bar-inner {
    -webkit-transition: width 0.4s ease-out;
    -moz-transition: width 0.4s ease-out;
    transition: width 0.4s ease-out; }
  .progress-bar.thin {
    height: 4px; }
    .progress-bar.thin .progress-bar-inner {
      height: 4px; }
    .progress-bar.thin .progress-bar-text {
      line-height: 4px; }
  .progress-bar.medium {
    height: 8px; }
    .progress-bar.medium .progress-bar-inner {
      height: 8px; }
    .progress-bar.medium .progress-bar-text {
      line-height: 8px; }
  .progress-bar.thick {
    height: 12px; }
    .progress-bar.thick .progress-bar-inner {
      height: 12px; }
    .progress-bar.thick .progress-bar-text {
      line-height: 12px; }
  .progress-bar.thicker {
    height: 14px; }
    .progress-bar.thicker .progress-bar-inner {
      height: 14px; }
    .progress-bar.thicker .progress-bar-text {
      line-height: 14px;
      font-size: 12px; }
  .progress-bar.thickest {
    height: 20px; }
    .progress-bar.thickest .progress-bar-inner {
      height: 20px; }
    .progress-bar.thickest .progress-bar-text {
      line-height: 20px;
      font-size: 16px; }
  .progress-bar.no-border {
    padding: 0;
    border: 0; }
    .progress-bar.no-border .progress-bar-inner {
      margin: 0; }
  .progress-bar.vertical {
    position: relative; }
    .progress-bar.vertical .progress-bar-inner {
      position: absolute;
      bottom: 0;
      background-color: #b0b0b1;
      box-shadow: 0 0 0.2em 1px #a3a3a3 inset; }
      .progress-bar.vertical .progress-bar-inner:after {
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 24%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0));
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 24%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0)); }
      .progress-bar.vertical .progress-bar-inner.info {
        background-color: #97d7f6;
        box-shadow: 0 0 0.2em 1px #52b0df inset; }
      .progress-bar.vertical .progress-bar-inner.success {
        background-color: #9cca80;
        box-shadow: 0 0 0.2em 1px #79c54d inset; }
      .progress-bar.vertical .progress-bar-inner.warning {
        background-color: #eba115;
        box-shadow: 0 0 0.2em 1px #eba115 inset; }
      .progress-bar.vertical .progress-bar-inner.danger {
        background-color: #85696c;
        box-shadow: 0 0 0.2em 1px #7f5256 inset; }
      .progress-bar.vertical .progress-bar-inner.clear {
        background-color: #fff; }
    .progress-bar.vertical.thickest {
      width: 40px; }
      .progress-bar.vertical.thickest .progress-bar-inner {
        width: 38px; }
  .progress-bar.reversed .progress-bar-inner {
    float: right; }
  .progress-bar.split .progress-bar-middle-wrapper {
    width: 50%;
    float: left; }
  .progress-bar.split .progress-bar-inner.split-left {
    float: right; }
  .progress-bar.split .progress-bar-inner.split-right {
    float: left; }
  .progress-bar.split.reversed .progress-bar-inner.split-left {
    float: left; }
  .progress-bar.split.reversed .progress-bar-inner.split-right {
    float: right; }
  .progress-bar.split .split-middle {
    margin: 0 auto;
    float: none; }
  .progress-bar.difference {
    background-color: rgba(176, 176, 177, 0.5);
    overflow: visible;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 24%, transparent 25%, transparent);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 24%, transparent 25%, transparent);
    background-size: 3px 100%; }
    .progress-bar.difference .progress-bar-inner {
      background-color: #b0b0b1;
      box-shadow: 0 0 0.2em 1px #a3a3a3 inset, 0 0 0.15em 1px rgba(163, 163, 163, 0.5); }
      .progress-bar.difference .progress-bar-inner.success {
        background-color: #9cca80;
        box-shadow: 0 0 0.2em 1px #79c54d inset, 0 0 0.15em 1px rgba(121, 197, 77, 0.5); }
      .progress-bar.difference .progress-bar-inner.danger {
        background-color: #85696c;
        box-shadow: 0 0 0.2em 1px #7f5256 inset, 0 0 0.15em 1px rgba(127, 82, 86, 0.5); }
  .progress-bar.home {
    background-color: rgba(151, 215, 246, 0.5);
    overflow: visible;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 24%, transparent 25%, transparent);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 24%, transparent 25%, transparent);
    background-size: 3px 100%; }
    .progress-bar.home .progress-bar-inner {
      background-color: #97d7f6;
      box-shadow: 0 0 0.2em 1px #52b0df inset, 0 0 0.15em 1px rgba(40, 169, 235, 0.5); }
  .progress-bar.away {
    background-color: rgba(233, 167, 137, 0.5);
    overflow: visible;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 24%, transparent 25%, transparent);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 24%, transparent 25%, transparent);
    background-size: 3px 100%; }
    .progress-bar.away .progress-bar-inner {
      background-color: #e9a789;
      box-shadow: 0 0 0.2em 1px #e37237 inset, 0 0 0.15em 1px rgba(227, 117, 60, 0.5); }

.jspScrollable:focus {
  outline: none; }

.jspContainer {
  overflow: hidden;
  position: relative; }

.jspPane {
  position: absolute; }

.jspCap {
  display: block;
  height: 2px; }

.jspTrack {
  position: relative; }

.jspDrag {
  position: relative;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  cursor: pointer; }

.jspScrollable .jspDrag {
  opacity: 0; }
.jspScrollable:hover .jspDrag, .jspScrollable.scrollbar-visible .jspDrag {
  background: rgba(255, 255, 255, 0.5);
  opacity: 1; }

.jspArrow {
  background: #50506d;
  text-indent: -20000px;
  display: block;
  cursor: pointer; }
  .jspArrow.jspDisabled {
    cursor: default;
    background: #80808d; }

.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%; }

.jspVerticalBar *, .jspHorizontalBar * {
  margin: 0;
  padding: 0; }

.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 4px;
  height: 100%;
  width: 7px; }
  .jspVerticalBar .jspArrow {
    height: 16px; }
    .jspVerticalBar .jspArrow:focus {
      outline: none; }

.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px; }
  .jspHorizontalBar .jspCap {
    float: left; }
  .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
    opacity: 0.7; }
  .jspHorizontalBar .jspArrow {
    width: 16px;
    float: left;
    height: 100%; }

.service-star {
  display: inline-block;
  font-family: Purista, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  height: 20px;
  line-height: 20px;
  background: url(../profile/warsaw/stats/servicestars/servicestar-20x20.png) no-repeat;
  padding-left: 28px; }
  .service-star.no-service-star {
    opacity: 0.7;
    color: transparent;
    padding-left: 20px; }

.winlossgraph {
  position: relative;
  padding-left: 4px; }
  .winlossgraph .column {
    width: 18px;
    height: 40px;
    position: relative;
    float: left; }
  .winlossgraph .line {
    position: absolute;
    left: -12px;
    width: 9px;
    height: 1px;
    background: #94969a;
    z-index: 0; }
  .winlossgraph .win.last-win .line {
    bottom: 32px; }
  .winlossgraph .win.last-loss .line {
    -webkit-transform: rotate(-55deg);
    -moz-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    -o-transform: rotate(-55deg);
    transform: rotate(-55deg);
    left: -19px;
    bottom: 22px;
    width: 24px; }
  .winlossgraph .win .dot:after {
    background: -webkit-radial-gradient(center,  ellipse, #77bdec 15%, #148ec1 100%);
    background: radial-gradient(  ellipse at center, #77bdec 15%, #148ec1 100%); }
  .winlossgraph .loss.last-loss .line {
    bottom: 12px; }
  .winlossgraph .loss.last-win .line {
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
    left: -20px;
    bottom: 22px;
    width: 24px; }
  .winlossgraph .loss .dot:after {
    top: 23px;
    background: -webkit-radial-gradient(center,  ellipse, #a0434d 15%, #c14c35 100%);
    background: radial-gradient(  ellipse at center, #a0434d 15%, #c14c35 100%); }
  .winlossgraph .dot {
    display: block;
    position: absolute;
    height: 40px;
    width: 9px;
    left: -4px; }
    .winlossgraph .dot:after {
      display: block;
      content: "";
      position: absolute;
      left: 50%;
      top: 3px;
      margin-left: -4px;
      height: 9px;
      width: 9px;
      z-index: 1; }
    .winlossgraph .dot:hover:after {
      opacity: 0.8; }

.alert {
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0 8px;
  font-family: Frutiger, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  min-height: 23px;
  margin-bottom: 1px;
  text-transform: uppercase;
  text-align: left;
  color: #fff; }
  .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;
    opacity: 0.2; }
    .alert button.close:hover {
      opacity: 1; }
  .alert.warning {
    color: #fff5c4;
    text-shadow: -1px -1px 5px #f7ca00, 1px 1px 5px #f7ca00; }
  .alert.info {
    color: #bce8f1;
    text-shadow: -1px -1px 5px #27a2ba, 1px 1px 5px #27a2ba; }
  .alert.success {
    color: #d6e9c6;
    text-shadow: -1px -1px 4px #6ea43f, 1px 1px 4px #6ea43f; }
  .alert.danger, .alert.error {
    color: #ebc6b5;
    text-shadow: -1px -1px 4px #b74b19, 1px 1px 4px #b74b19; }
  .alert.large {
    padding: 8px 16px; }
  .alert.xlarge {
    padding: 16px; }
  .alert .icon-error, .alert .icon-danger {
    vertical-align: middle;
    width: 24px;
    height: 22px;
    margin-top: -4px;
    background: url(../ui/icons/icon-error.png) no-repeat;
    margin-right: 5px; }
  .alert .icon-warning, .alert .icon-success, .alert .icon-info, .alert .icon-warning {
    display: none; }

.intro-overlay {
  display: none;
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.75);
  background: transparent-webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.5) 0, #000000 90%);
  background: transparent-moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.5) 0, #000000 90%);
  background: transparent radial, ellipse cover center, rgba(0, 0, 0, 0.5) 0, black 90%;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  pointer-events: all; }
  .no-csstransitions .intro-overlay {
    display: none; }
  .intro-overlay.show {
    opacity: 1; }
    .no-csstransitions .intro-overlay.show {
      display: block; }

.intro-helper {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 3001;
  padding: 16px; }
  .no-csstransitions .intro-helper {
    display: none; }
  .intro-helper.show {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
    .no-csstransitions .intro-helper.show {
      display: block; }

.intro-element {
  position: relative;
  z-index: 3002 !important; }

.intro-infobox {
  position: absolute;
  z-index: 3002;
  opacity: 0;
  border: 1px solid #fe9a00;
  background: rgba(0, 0, 0, 0.8);
  padding: 16px;
  height: auto;
  border-radius: 2px;
  max-width: 350px;
  -webkit-transition: opacity 0.2s ease-out, height 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out, height 0.2s ease-out;
  transition: opacity 0.2s ease-out, height 0.2s ease-out; }
  .no-csstransitions .intro-infobox {
    display: none; }
  .intro-infobox.show {
    opacity: 1;
    height: auto; }
    .no-csstransitions .intro-infobox.show {
      display: block; }
  .intro-infobox .icon-close {
    float: right;
    cursor: pointer;
    margin: -8px; }
  .intro-infobox h1 {
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 16px;
    margin: 0;
    margin-bottom: 8px; }
  .intro-infobox p {
    font-size: 14px;
    line-height: 20px;
    margin: 0; }

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

  6% {
    background-position: -32px 0; }

  14% {
    background-position: -64px 0; }

  20% {
    background-position: -96px 0; }

  28% {
    background-position: -128px 0; }

  36% {
    background-position: -160px 0; }

  42% {
    background-position: -192px 0; }

  48% {
    background-position: -224px 0; }

  56% {
    background-position: -256px 0; }

  64% {
    background-position: -288px 0; }

  70% {
    background-position: -320px 0; }

  78% {
    background-position: -352px 0; }

  86% {
    background-position: -384px 0; }

  94% {
    background-position: -416px 0; }

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

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

  6% {
    background-position: -32px 0; }

  14% {
    background-position: -64px 0; }

  20% {
    background-position: -96px 0; }

  28% {
    background-position: -128px 0; }

  36% {
    background-position: -160px 0; }

  42% {
    background-position: -192px 0; }

  48% {
    background-position: -224px 0; }

  56% {
    background-position: -256px 0; }

  64% {
    background-position: -288px 0; }

  70% {
    background-position: -320px 0; }

  78% {
    background-position: -352px 0; }

  86% {
    background-position: -384px 0; }

  94% {
    background-position: -416px 0; }

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

-o-keyframes loader-small 0% {
  background-position: 0 0; }
-o-keyframes loader-small 6% {
  background-position: -32px 0; }
-o-keyframes loader-small 14% {
  background-position: -64px 0; }
-o-keyframes loader-small 20% {
  background-position: -96px 0; }
-o-keyframes loader-small 28% {
  background-position: -128px 0; }
-o-keyframes loader-small 36% {
  background-position: -160px 0; }
-o-keyframes loader-small 42% {
  background-position: -192px 0; }
-o-keyframes loader-small 48% {
  background-position: -224px 0; }
-o-keyframes loader-small 56% {
  background-position: -256px 0; }
-o-keyframes loader-small 64% {
  background-position: -288px 0; }
-o-keyframes loader-small 70% {
  background-position: -320px 0; }
-o-keyframes loader-small 78% {
  background-position: -352px 0; }
-o-keyframes loader-small 86% {
  background-position: -384px 0; }
-o-keyframes loader-small 94% {
  background-position: -416px 0; }
-o-keyframes loader-small 100% {
  background-position: -448px 0; }

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

  6% {
    background-position: -32px 0; }

  14% {
    background-position: -64px 0; }

  20% {
    background-position: -96px 0; }

  28% {
    background-position: -128px 0; }

  36% {
    background-position: -160px 0; }

  42% {
    background-position: -192px 0; }

  48% {
    background-position: -224px 0; }

  56% {
    background-position: -256px 0; }

  64% {
    background-position: -288px 0; }

  70% {
    background-position: -320px 0; }

  78% {
    background-position: -352px 0; }

  86% {
    background-position: -384px 0; }

  94% {
    background-position: -416px 0; }

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

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

  6% {
    background-position: -32px 0; }

  14% {
    background-position: -64px 0; }

  20% {
    background-position: -96px 0; }

  28% {
    background-position: -128px 0; }

  36% {
    background-position: -160px 0; }

  42% {
    background-position: -192px 0; }

  48% {
    background-position: -224px 0; }

  56% {
    background-position: -256px 0; }

  64% {
    background-position: -288px 0; }

  70% {
    background-position: -320px 0; }

  78% {
    background-position: -352px 0; }

  86% {
    background-position: -384px 0; }

  94% {
    background-position: -416px 0; }

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

.loader.small {
  width: 32px;
  height: 32px;
  margin-top: -3px;
  background: url(../common/warsaw/loadingicon.png) no-repeat;
  -webkit-animation: loader-small 0.675s infinite step-start;
  -moz-animation: loader-small 0.675s infinite step-start;
  -ms-animation: loader-small 0.675s infinite step-start;
  -o-animation: loader-small 0.675s infinite step-start;
  animation: loader-small 0.675s infinite step-start; }
  .loader.small.centered {
    margin-left: -16px;
    margin-top: -16px; }

.no-cssanimations .loader.small {
  background-image: url(../common/warsaw/loadingicon-bf4-ondark.gif); }

.no-cssanimations .loader.small.ondark {
  background-image: url(../common/warsaw/loadingicon-bf4-ondarker.gif); }

.no-cssanimations .loader.small.onblue, .no-cssanimations .loader.small.alternate {
  background-image: url(../common/warsaw/loadingicon-bf4-onblue.gif); }

.no-cssanimations .loader {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none; }
  .no-cssanimations .loader.small {
    background-position: 50% 50%;
    background-repeat: no-repeat; }