/* =========================================================

    RESET

  =========================================================*/

/*! normalize.css v1.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
    outline: 0;
    height: 100%;
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
    outline: 0;
    min-width:480px;
    display:block; 
    position:relative; 
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: 0;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Addresses margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/*
 * Addresses `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Addresses margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}















/*=============================================================================*/














/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}
input::-webkit-input-placeholder {
   color: #4a5e75;
}

input:-moz-placeholder { /* Firefox 18- */
   color: #4a5e75;
}

input::-moz-placeholder {  /* Firefox 19+ */
   color: #4a5e75;
}

input:-ms-input-placeholder {
   color: #4a5e75;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/*
 * IE 10/11 Fix
 * Inline elements with clearfix applied must be displayed as block.
 */
span.clearfix {
  display: block;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/*=============================================================================*/





/* =========================================================

ISOTOPE

=========================================================*/
/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}





/* =========================================================

    COMMON

  =========================================================*/

@font-face {
  font-family: 'OCRAExtended';
  src: url('../fonts/ocraext.eot');
  src: url('../fonts/ocraext.eot?#iefix') format('embedded-opentype'),
       url('../fonts/ocraext.woff') format('woff'),
       url('../fonts/ocraext.ttf') format('truetype'),
       url('../fonts/ocraext.svg#ocraext') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* All Specific Styles */
* { font-family: Tahoma, Arial, Helvetica, sans-serif; }
a {
    text-decoration: none;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6, h7 {
    font-family: 'Electrolize', Arial, Helvetica, sans-serif;
    color: white;
    font-weight:normal;
}

p { color: white; }

body { }
body.loading { cursor: wait;}
footer {position:relative; z-index:13;}

.clear { clear: both;}

.wrapper {
    width: auto;
    min-width: 120px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 30px;
}

.abs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

.trans-02s {
    transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;

    /* Fix for Chrome flickering */
    -webkit-perspective: 1000;
    /*-webkit-backface-visibility: hidden;*/
}
.trans-03s {
    transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;

    /* Fix for Chrome flickering */
    -webkit-perspective: 1000;
    /*-webkit-backface-visibility: hidden;*/
}

.trans-04s { -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; /*-webkit-backface-visibility: hidden;*/ }
.trans-05s { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; /*-webkit-backface-visibility: hidden;*/ }
.trans-06s { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; /*-webkit-backface-visibility: hidden;*/ }
.trans-08s { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; /*-webkit-backface-visibility: hidden;*/ }
.trans-10s { -webkit-transition-duration: 1.0s; -moz-transition-duration: 1.0s; -o-transition-duration: 1.0s; transition-duration: 1.0s; /*-webkit-backface-visibility: hidden;*/ }
.trans-12s { -webkit-transition-duration: 1.2s; -moz-transition-duration: 1.2s; -o-transition-duration: 1.2s; transition-duration: 1.2s; /*-webkit-backface-visibility: hidden;*/ }
.trans-14s { -webkit-transition-duration: 1.4s; -moz-transition-duration: 1.4s; -o-transition-duration: 1.4s; transition-duration: 1.4s; /*-webkit-backface-visibility: hidden;*/ }
.trans-16s { -webkit-transition-duration: 1.6s; -moz-transition-duration: 1.6s; -o-transition-duration: 1.6s; transition-duration: 1.6s; /*-webkit-backface-visibility: hidden;*/ }
.trans-18s { -webkit-transition-duration: 1.8s; -moz-transition-duration: 1.8s; -o-transition-duration: 1.8s; transition-duration: 1.8s; /*-webkit-backface-visibility: hidden;*/ }

.trans-opacity {
    transition-property: opacity;
    -moz-transition-property: opacity;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
}
.trans-background {
    transition-property: background;
    -moz-transition-property: background;
    -webkit-transition-property: background;
    -o-transition-property: background;
}
.trans-color {
    transition-property: color;
    -moz-transition-property: color;
    -webkit-transition-property: color;
    -o-transition-property: color;
}
.trans-box-shadow {
    transition-property: box-shadow;
    -moz-transition-property: box-shadow;
    -webkit-transition-property: box-shadow;
    -o-transition-property: box-shadow;
}
.trans-text-shadow {
    transition-property: text-shadow;
    -moz-transition-property: text-shadow;
    -webkit-transition-property: text-shadow;
    -o-transition-property: text-shadow;
}
.trans-height {
    transition-property: height;
    -moz-transition-property: height;
    -webkit-transition-property: height;
    -o-transition-property: height;
}
.trans-left {
    transition-property: left;
    -moz-transition-property: left;
    -webkit-transition-property: left;
    -o-transition-property: left;
}

.backfacefix {
    -webkit-perspective: 1000;
    /*-webkit-backface-visibility: hidden;*/
}

.blink {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;

  -webkit-animation-direction: normal;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: blink;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-direction: normal;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-name: blink;
  -moz-animation-timing-function: ease-in-out;
}

.medium-blink {
  -webkit-transition: all 0.05s ease-in-out;
  -moz-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  -ms-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;
  
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: blink;
  -webkit-animation-timing-function: ease-in-out;
    
  -moz-animation-direction: normal;
  -moz-animation-duration: 0.3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-name: blink;
  -moz-animation-timing-function: ease-in-out;    
}

.fast-blink {
  -webkit-transition: all 0.05s ease-in-out;
  -moz-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  -ms-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;

  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: blink;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-direction: normal;
  -moz-animation-duration: 0.1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-name: blink;
  -moz-animation-timing-function: ease-in-out;
}

/* Expand Button */
.expandbtn {
    background: url(../images/expandbtn-bg.png) repeat-x;
    height: 22px;
    display: inline-block;
    position: relative;
    margin: 8px 0 8px 60px;
    padding: 9px 13px 0 28px;
    text-transform: uppercase;
    font-family: 'Electrolize', Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #62C4EB;
}

.expandbtn-slider-left {
    background: url(../images/iconsprite.png) no-repeat -175px -99px;
    width: 42px;
    height: 31px;
    left: -60px;
}

.expandbtn-slider-right {
    background: url(../images/iconsprite.png) no-repeat -175px -131px;
    width: 42px;
    height: 31px;
    left: -47px;
}

.expandbtn-cut {
    background: url(../images/iconsprite.png) no-repeat -142px -98px;
    width: 32px;
    height: 31px;
    left: -32px;
}

.expandbtn-bullet {
    background: url(../images/iconsprite.png) no-repeat -69px -119px;
    width: 8px;
    height: 8px;
    top: 13px;
    left: 5px;
}

.expandbtn-bullet > span {
    background: url(../images/iconsprite.png) no-repeat -96px -100px;
    width: 46px;
    height: 46px;
    left: -19px;
    top: -19px;
    filter: alpha(opacity=0);
    opacity: 0;
}

.expandbtn:hover { color: white; }

.expandbtn:hover > .expandbtn-slider-left {
    transform: translate(8px,8px);
    -moz-transform: translate(8px,8px);
    -webkit-transform: translate(8px,8px);
    -o-transform: translate(8px,8px);
    -ms-transform: translate(8px,8px);
}

.expandbtn:hover > .expandbtn-slider-right {
    transform: translate(-8px,-8px);
    -moz-transform: translate(-8px,-8px);
    -webkit-transform: translate(-8px,-8px);
    -o-transform: translate(-8px,-8px);
    -ms-transform: translate(-8px,-8px);
}

.expandbtn:hover > .expandbtn-bullet > span {
    filter: alpha(opacity=100);
    opacity: 1;
}

.animbtn {
    background: url("../images/animbtn-bg.png") repeat-x scroll 0 0 transparent;
    color: #62C4EB;
    display: inline-block;
    font-family: 'Electrolize',Arial,Helvetica,sans-serif;
    font-size: 12px;
    height: 22px;
    margin: 8px 0 8px 60px;
    padding: 9px 13px 0 28px;
    position: relative;
    text-transform: uppercase;
}
.animbtn.backbtn {
    margin-left: 85px;
}
.animbtn.expandbtn .slider-left {
    background: url("../images/iconsprite.png") no-repeat scroll -175px -99px transparent;
    height: 31px;
    left: -60px;
    width: 42px;
}
.animbtn.expandbtn .slider-right {
    background: url("../images/iconsprite.png") no-repeat scroll -175px -131px transparent;
    height: 31px;
    left: -47px;
    width: 42px;
}
.animbtn.backbtn .backslant {
    background: url("../images/backbtnslant.png") no-repeat scroll center bottom transparent;
    bottom: 4px;
    height: 27px;
    left: -41px;
    top: auto;
    width: 30px;
}
.animbtn .cut {
    background: url("../images/iconsprite.png") no-repeat scroll 0 0 transparent;
    height: 31px;
    left: -32px;
    width: 32px;
}
.animbtn.expandbtn .cut {
    background-position: -142px -98px;
}
.animbtn.backbtn .cut {
    background-position: -142px -129px;
}
.animbtn.backbtn .backarrow {
    bottom: 4px;
    height: 7px;
    left: -71px;
    top: auto;
    width: 30px;
}
.animbtn.backbtn .arrowline {
    background: none repeat scroll 0 0 #004066;
    height: 100%;
    left: auto;
    right: 0;
    width: 8px;
}
.animbtn.backbtn .backarrow .arrowline .arrowhead {
    background: url("../images/iconsprite.png") no-repeat scroll -217px -99px transparent;
    height: 15px;
    left: -13px;
    top: -4px;
    width: 13px;
}
.animbtn .bullet {
    background: url("../images/iconsprite.png") no-repeat scroll -69px -119px transparent;
    height: 8px;
    left: 5px;
    top: 13px;
    width: 8px;
}
.animbtn .bullet > span {
    background: url("../images/iconsprite.png") no-repeat scroll -96px -100px transparent;
    height: 46px;
    left: -19px;
    opacity: 0;
    top: -19px;
    width: 46px;
}
.animbtn:hover {
    color: white;
}
.animbtn.expandbtn:hover > .slider-left {
    transform: translate(8px, 8px);
}
.animbtn.expandbtn:hover > .slider-right {
    transform: translate(-8px, -8px);
}
.animbtn.backbtn:hover > .backslant {
    height: 18px;
}
.animbtn.backbtn:hover > .backarrow .arrowline {
    width: 18px;
}
.animbtn:hover > .bullet > span {
    opacity: 1;
}



/* Holo Button */
.holobtn {
  width: 261px;
  height: 54px;
  display: block;
  position: relative;
}

.holobtn-top {
  background: url(../images/iconsprite.png) no-repeat -236px 0;
  width: 261px;
  height: 44px;
  z-index: 2;

  font-family: 'Electrolize', Arial, Helvetica, sans-serif;
  color: #00f7ff;
  text-align: center;
  padding-top: 10px;
}

.holobtn-bottom {
  background: url(../images/iconsprite.png) no-repeat -236px -54px;
  width: 261px;
  height: 39px;
  z-index: 1;
  left: 5px;
  top: 8px;
}

.holobtn:not(.inactive):hover > .holobtn-top {
  -webkit-transform: translate(16px,0);
  -moz-transform: translate(16px,0);
  -ms-transform: translate(16px,0);
  -o-transform: translate(16px,0);
  transform: translate(16px,0);

  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;

  color: white;
}
.holobtn:not(.inactive):hover > .holobtn-bottom {
  -webkit-transform: translate(11px,-8px);
  -moz-transform: translate(11px,-8px);
  -ms-transform: translate(11px,-8px);
  -o-transform: translate(11px,-8px);
  transform: translate(11px,-8px);
}
.holobtn.with-connector:hover {
  -webkit-transform: translate(-32px,0);
  -moz-transform: translate(-32px,0);
  -ms-transform: translate(-32px,0);
  -o-transform: translate(-32px,0);
  transform: translate(-32px,0);

  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;

  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -mst-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}


/* Holotabs */
.tabs { position: absolute; top: -47px; left: 0; text-align: center; width: 100%; height: 47px; background: url('../images/arena-commander/holotabs-holder.png') no-repeat 50%; }
.tabs .holder { position: relative; }
.tabs.tabs2 .holder { width: 506px; margin: auto; }
.tabs .holotab { position: relative; top: -14px; float: left;  }
.tabs .holotab.right { margin-left: -58px; }
.holotab.disabled { opacity: 0.5; }
.holotab { display: block; width: 282px; height: 51px; color: #17ebeb; position: relative; }
.holotab > span { display: block; width: 282px; height: 51px; position: absolute; top: 0; left: 0; background: url('../images/holotabs-sprite.png') no-repeat; }
.holotab > span.top { background-position: 0 -51px; z-index: 5; opacity: 0.5; }
.holotab > span.bottom { background-position: 0 -51px; z-index: 3; top: 14px; left: -29px; }
.holotab > span.text { background: none; z-index: 10; position: relative; font-family: "Electrolize"; font-size: 22px; text-transform: uppercase; text-align: center; padding-top: 14px; height: auto; top: 8px; left: -8px; }
.holotab.right > span.text { left: 16px; }
.holotab.right > span.top { background-position: 0 -153px; z-index: 5; opacity: 0.5; }
.holotab.right > span.bottom { background-position: 0 -153px; z-index: 3; top: 14px; left: 29px; }

/* inactive */
.holotab > span.top { background-position: 0 -51px; z-index: 10; opacity: 0.5; }
.holotab > span.bottom { background-position: 0 -51px; z-index: 5; top: 14px; left: -29px; }

/* hover */
a.holotab:hover > span.bottom {
  -webkit-transform: translate(13px, -14px);
  -moz-transform: translate(13px, -14px);
  -ms-transform: translate(13px, -14px);
  -o-transform: translate(13px, -14px);
  transform: translate(13px, -14px);
}

a.holotab:hover > span.top {
  -webkit-transform: translate(-16px, 0);
  -moz-transform: translate(-16px, 0);
  -ms-transform: translate(-16px, 0);
  -o-transform: translate(-16px, 0);
  transform: translate(-16px, 0);

  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
a.holotab:hover > span.text {
  -webkit-transform: translate(8px, -8px);
  -moz-transform: translate(8px, -8px);
  -ms-transform: translate(8px, -8px);
  -o-transform: translate(8px, -8px);
  transform: translate(8px, -8px);
}

a.holotab.right:hover > span.bottom {
  -webkit-transform: translate(-13px, -14px);
  -moz-transform: translate(-13px, -14px);
  -ms-transform: translate(-13px, -14px);
  -o-transform: translate(-13px, -14px);
  transform: translate(-13px, -14px);
}
a.holotab.right:hover > span.text {
  -webkit-transform: translate(-8px, -8px);
  -moz-transform: translate(-8px, -8px);
  -ms-transform: translate(-8px, -8px);
  -o-transform: translate(-8px, -8px);
  transform: translate(-8px, -8px);
}
a.holotab.right:hover > span.top {
  -webkit-transform: translate(16px, 0);
  -moz-transform: translate(16px, 0);
  -ms-transform: translate(16px, 0);
  -o-transform: translate(16px, 0);
  transform: translate(16px, 0);

  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
a.holotab:hover > span.text { text-shadow: 0 0 50px rgba(66, 169, 248, 1), 0 0 50px rgba(66, 169, 248, 1); color: #fff; }

/* active */
.holotab.active { top: -28px; }
.holotab.active > span.text { padding-top: 13px; text-shadow: 0 0 50px rgba(66, 169, 248, 1), 0 0 50px rgba(66, 169, 248, 1); color: #fff; top: 0; left: 0; }
.holotab.active > span.top { background-position: 0 0; opacity: 1; }
.holotab.active > span.bottom { opacity: 0.5; }
.holotab.right.active > span.top { background-position: 0 -102px; }
a.holotab.active:hover > span.top,
a.holotab.active:hover > span.text,
a.holotab.active:hover > span.bottom {
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
  opacity: 1;
}

/* Temp static Button 2 */
.button2 {background:url('../images/common/button2-bg.png') no-repeat; display:block; width:266px; height:54px; line-height:54px; text-align:center;}

.f-right { float: right;}
.f-left { float: left;}
.v-center {display: table-cell; vertical-align: middle; }
.separator { height: 5px; width: 100%; background: #8cf1ff; box-shadow: 0 0 40px rgba(0, 153, 255, 0.7); margin: 20px auto;}
.two-line-separator {height:5px; width:100%; background:url('../images/common/double-line-sep.png') no-repeat center top, url('../images/common/double-line-sep.png') no-repeat center bottom; background-size: 100% 1px;}
.clear, .cboth { display: block; clear:both; font-size: 1px; line-height: 1px; float:none;}

/* selectlist */
.autocomplete { position: relative; z-index: 3;}
.autocomplete .body { background: #000; border: 1px solid #162A3F; border-radius: 0 0 5px 5px; box-shadow: 0 3px 12px -6px #555555; color: #00D2FF; font-size: 12px; width: 100%; display: none;}
.autocomplete ul { margin: 0; padding: 0; list-style-type: none;}
.autocomplete ul li { padding: 2px 5px; cursor: pointer;}
.autocomplete ul li:hover { color: #000; background: #00D2FF;}
.autocomplete ul li.no-result,
.autocomplete ul li.no-result:hover { color: #00D2FF;}
.autocomplete input[disabled],
.autocomplete input[disabled]:hover { color: #355E78; opacity: 0.5;}
.autocomplete input[type=text] { background: no-repeat 95% 50% rgba(0,0,0,0.4); }
.autocomplete input[type=text].loading { background-image: url('../images/common/ajax-loader.gif'); }

/* Forms */
.selectlist {border:1px solid #162a3f; color:#00d2ff; height:29px; border-radius:5px; position:relative; margin:2px 0px; display:block;}
.selectlist:hover {cursor:pointer;}
.selectlist > .arrow {background:url('../images/forms/selectlist/arrow.png') no-repeat left center; height:29px; width:34px; float:right;}
.selectlist > span {line-height:22px; height:22px; width:60%; display: block; padding: 4px 10px; font-size:12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.selectlist > .body {display:none;border:1px solid #162a3f; color:#00d2ff; border-radius:0px 0px 5px 5px; margin-right:10px; position:absolute; z-index:20; width:95%; margin-top:-1px; box-shadow:0px 3px 12px -6px #555555;}
.selectlist ul {padding-left:5px;}
.selectlist option,
.selectlist ul li {font-size:12px; padding:2px 5px; line-height:16px; height:16px; list-style: none; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.selectlist ul li.selected {background-color:#A4E1E6; font-weight:bold;}
select.selectlist {line-height:22px; height:22px; font-size:12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background:url('../images/forms/selectlist/arrow.png') no-repeat right center #000;}

.selectlist.w200 { width: 200px;}
.selectlist.w170 { width: 170px;}
.selectlist > .body {}
.selectlist ul li.selected {background-color:transparent; font-weight:normal; color: #fff;}
.selectlist ul li.hover,
.selectlist ul li.hover.selected {cursor:pointer; background-color:#00D2FF; color: #000;}
.selectlist ul li img, a.selectlist span img { height: 16px; width: 16px; margin: 0; }
input { outline: none;}
/* Radio Button */
label.radio input {clear:left; float:left; left:5px; opacity:0; filter:alpha(opacity=0); position:relative; outline:0;}
label.radio input:focus {outline:0;}
label.radio {display:block;}
label.radio span {background:url("../images/forms/radio/off.png") no-repeat scroll left center transparent; display:block; font-size:9pt; padding-left:24px; position:relative; white-space:nowrap;}
label.radio.on span {background:url("../images/forms/radio/on.png") no-repeat scroll left center transparent; padding-left:24px; position:relative;}

/* Checkbox Button */
label.checkbox input {clear:left; float:left; left:5px; opacity:0; filter:alpha(opacity=0); position:relative; outline:0;}
label.checkbox input:focus {outline:0;}

label.checkbox {display:block;}
label.checkbox span {background:url("../images/forms/checkbox/off.png") no-repeat scroll left center transparent; display:block; font-size:9pt; padding-left:24px; position:relative; white-space:nowrap; cursor: pointer;}
label.checkbox.on span {background:url("../images/forms/checkbox/on.png") no-repeat scroll left center transparent; padding-left:24px; position:relative;}
label.checkbox span { background:url("../images/forms/checkbox/off_light.png") no-repeat scroll left center transparent; }
label.checkbox.on span { background:url("../images/forms/checkbox/on_light.png") no-repeat scroll left center transparent; }


label.checkbox.disabled span { cursor: default;
  filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6+ */
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    opacity: 0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */}

input[type=text],
input[type=password] { background: rgba(0,0,0,0.4); border: 1px solid rgba(22,42,63,0.8); font-size: 12px; color: #355e78; width: 100%; padding: 10px 15px; display: block; margin-bottom: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
  -webkit-transition: all 0.2s !important;
  -moz-transition: all 0.2s !important;
  -ms-transition: all 0.2s !important;
  -o-transition: all 0.2s !important;
  transition: all 0.2s !important;
}
input[type=text]:focus,
input[type=password]:focus { border: 1px solid #00b7ca; color: #42C6E7; box-shadow: inset 0 0 20px rgba(0,112,200,0.3);}
input[type=submit] { height: 34px; padding:0 0 0 42px; margin: 0; font-family: 'Electrolize'; font-size: 16px; color: #81b3c9; text-transform: uppercase; border: none; background: none; position: relative; z-index: 2;}
input[type=submit]:hover,
input[type=submit] { color: #fff;}
.submit-wrapper.disabled input[type=submit] { color: #81b3c9; cursor: default;}
input[disabled=disabled]:hover { color: #81b3c9;}
textarea { width: 100%; height: 100px; background: rgba(0,0,0,0.4); border: 1px solid rgba(22,42,63,0.8); font-size: 12px; line-height: 16px; color: #355e78; resize: none; padding: 10px 15px; outline: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-transition: all 0.2s !important;
  -moz-transition: all 0.2s !important;
  -ms-transition: all 0.2s !important;
  -o-transition: all 0.2s !important;
  transition: all 0.2s !important;
}
textarea:focus { border: 1px solid #00b7ca; color: #42C6E7; box-shadow: inset 0 0 20px rgba(0,112,200,0.3); }
label.checkbox { display: inline-block;}
fieldset { }
label { font-size: 12px; font-weight: bold; color: #7696ae; display: block; margin: 8px 0;}
.password-wrapper { position: relative; display: block; width: 100%;}
.password-wrapper .fake-password-input { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; color: #355E78; font-size: 12px; line-height: 35px; padding-left: 15px; cursor: text;}
.submit-wrapper { background: url(../images/modal_submit.png) no-repeat 0 0; display: inline-block; position: relative;}
.submit-wrapper .submit-hover { display: block; width: 47px; height: 47px; background: url(../images/modal_submit.png) no-repeat 0 -29px; position: absolute; top: -9px; left: -9px; opacity: 0; z-index: 1;}
.submit-wrapper:hover .submit-hover,
.submit-wrapper.active .submit-hover { opacity: 1;}
.submit-wrapper.disabled:hover .submit-hover { opacity: 0;}

.submit-wrapper.loading { background: none;}
.submit-wrapper.loading .submit-hover {
  -webkit-transition: all 0.05s ease-in-out;
  -moz-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  -ms-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;

  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: blink;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-direction: normal;
  -moz-animation-duration: 0.1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-name: blink;
  -moz-animation-timing-function: ease-in-out;
  opacity: 1;
}
.submit-wrapper.loading input { color: #81B3C9; cursor: default;}

.submit-wrapper.back { background: url(../images/modal_back.png) no-repeat 0 0; }
.submit-wrapper.back .submit-hover { background: url(../images/modal_back.png) no-repeat 0 -29px; }



.error-message { background: url('../images/signin_modal_error.png') no-repeat 7px 50% rgba(178,34,34,0.2); border: 1px solid #502a36; border-radius: 5px; margin-bottom: 25px; font-size: 11px; line-height: 14px; color: #bb0000; padding: 11px 30px 11px 60px; display: none; min-height: 28px;}
.error-message strong { color: #ff0000;}
.success-message { background: url('../images/signin_modal_success.png') no-repeat 7px 50% rgba(55,158,63,0.2); border: 1px solid #1f5235; border-radius: 5px; margin-bottom: 10px; font-size: 11px; line-height: 14px; color: #32aa32; padding: 11px 30px 11px 60px; display: none; min-height: 28px;}
.success-message strong { color: #00ff00;}

/* Tags */
.tag-wrapper .tag { height: 34px; float: left; margin-right: 16px; margin-bottom: 15px;}
.tag-wrapper .tag .left { height: 100%; width: 9px; background: url(../images/account/bg_tag.png); border-top: 1px solid #39a0d7; border-radius: 5px 0 0 5px; float: left; margin-right: 2px; position: relative; z-index: 2;}
.tag-wrapper .tag .left .effect { width: 9px; height: 100%; background: #00e7ff; border-radius: 5px 0 0 5px; box-shadow: 0 0 20px #00FFFF; opacity: 0;}

.tag-wrapper .tag .tag-content { line-height: 32px; font-size: 14px; color: #00e4ff; font-family: 'Electrolize'; border-top: 1px solid #39a0d7; border-radius: 0 5px 5px 0; float: left; background: url(../images/account/bg_tag.png); position: relative; height: 100%; padding-left: 15px; padding-right: 45px;}
.tag-wrapper .tag .tag-content .effect { background: url(../images/account/bg_tag_hover.png); border-radius: 0 5px 5px 0; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.tag-wrapper .tag:hover .tag-content .effect { opacity: 1;}
.tag-wrapper .tag .tag-content .text { position: relative; z-index: 2; cursor: default; font-family:"Electrolize"; font-size:14px;}
.tag-wrapper .tag .tag-content a { color: inherit; }
.tag-wrapper .tag .close { display: block; width: 16px; height: 16px; background: url(../images/common/btn_close.png); opacity: 0.45; position: absolute; top: 10px; right: 9px; z-index: 2;}
.tag-wrapper .tag:hover .close { opacity: 1;}
.tag-wrapper.red .tag .left .effect { background: #B00; box-shadow: 0 0 20px #B00; opacity: 0;}
.tag-wrapper.red .tag .tag-content { color: #B00; }
.tag-wrapper.white .tag .left .effect { background: #FFF; box-shadow: 0 0 20px #FFF; opacity: 0;}
.tag-wrapper.white .tag .tag-content { color: #FFF;}
.tag-wrapper.green .tag .left .effect { background: #0F0; box-shadow: 0 0 20px #0F0; opacity: 0;}
.tag-wrapper.green .tag .tag-content { color: #0F0;}
.tag-wrapper.yellow .tag .left .effect { background: #FFB400; box-shadow: 0 0 20px #FFB400; opacity: 0;}
.tag-wrapper.yellow .tag .tag-content { color: #FFB400;}
.tag-wrapper .tag:hover .left .effect { opacity: 1;}

/* Number Counter */
.number-counter {}
.number-counter .loading {display:none;}
.number-counter .error {display:none;}
.number-counter.show-error .error {display:block;}
.number-counter.show-error .append {display:none;}
.number-counter.show-error .prepend {display:none;}
.number-counter.show-loading .loading {display:block;}
.number-counter.show-loading .prepend {display:none;}
.number-counter.show-loading .digits {display:none;}
.number-counter.show-loading .append {display:none;}
.number-counter .digits {float:left;}
.number-counter.show-error .digits {display:none;}
.number-counter .mask {position:relative; overflow:hidden; float:left;}
.number-counter .mask .carousel {position:relative;}
.number-counter .mask .carousel .item {position:relative; text-align:center;}
.number-counter .mask .carousel .item.invisible {opacity:0;}
.number-counter .seperator {float:left;position:relative;}

/* Content Blocks */
.content-block1 {border: 1px solid #0d1f2c; padding: 49px; border-top-color: #286e80; position: relative;}
.content-block1 .content { background: url(../images/bg_large_lines.png); }
.content-block1 .top-line-thin { position: absolute; top: -1px; right: 0; width: 693px; height: 1px; background: #37aac1;}
.content-block1 .top-line { position: absolute; top: 0px; right: 0; width: 310px; height: 2px; background: #37aac1; border-bottom-left-radius: 90px;}

.content-block2 { border: 1px solid rgba(0, 162, 253, 0.15); padding:10px; position: relative;}
.content-block2 .content { }

.content-block3 { border: 1px solid #1e2f41; padding:10px; position: relative;}
.content-block3 .content { }

.content-block4 {position:relative; border-top:1px solid #00e6ff;}
.content-block4 > .content {background:url('../images/content-page/horizontal-lined-bg.png') repeat;}
.content-block4 .content .top {width:100px; height:2px; background-color:#00e6ff;}
.content-block4 .bottom {width:100%; height:7px; border-top:1px solid #1681a5; border-left:1px solid #1681a5;}
.content-block4 h3 {font-size:14px; text-transform:uppercase; color:#fff; font-family:'Electrolize'; margin-left:25px;}

.block-left-lined { background: url("../images/modal_line.png") repeat scroll 0 0 rgba(23, 29, 37, 0.5); border-bottom: 1px solid #244256; border-top: 1px solid #244256; padding: 15px; margin-left: 15px; position: relative;}
.block-left-lined .line { background: none repeat scroll 0 0 #00E7FF; box-shadow: 0 0 30px rgba(37, 228, 255, 0.75); height: 100%; left: -9px; position: absolute; top: 0; width: 5px;}
.block-left-lined h2.title { font-size: 48px; color: #00e7ff; text-transform: uppercase; margin: 0 0 -15px;}
.block-left-lined p {  font-size: 18px; color: #00E7FF; font-family: 'Electrolize'; }
.block-left-lined.info-block ul li { font-family: 'Electrolize'; color: #fff; list-style: none; }

.pager {}
.pager .selectlist { width: 140px;}
.pager .right a { display: block; width: 30px; height: 30px; border: 1px solid #0c2133; float: left; text-align: center; color: #3a4e60; font-size: 14px; font-weight: bold; line-height: 30px; margin: 0 3px;}
.pager .right a.active,
.pager .right a.active:hover { border: 1px solid #223f51; color: #fff; background: rgba(49,55,63,0.3);}
.pager .right a span { display: block; width: 100%; height: 100%; background: url(../images/common/pager.png); opacity: 0;}
.pager .right a:hover { color: #00ffff;}
.pager .right a:hover span { opacity: 1;}
.pager .spacer { width: 15px; height: 30px; display: block; float: left;}
.pager .right a.btn { background: url(../images/common/pager.png);}

.pager .right a.laquo { background-position: -60px 0;}
.pager .right a.laquo span { background-position: -60px -30px;}
.pager .right a.lt { background-position: -90px 0;}
.pager .right a.lt span { background-position: -90px -30px;}
.pager .right a.gt { background-position: 0px 0;}
.pager .right a.gt span { background-position: 0px -30px;}
.pager .right a.raquo { background-position: -30px 0;}
.pager .right a.raquo span { background-position: -30px -30px;}

.pager .left { float: left; margin-right: 50px;}
.pager .right { float: left;}

#paypal_form input[type=submit],
#amazon_form input[type=submit] { margin: 0; padding: 0;}

/* LOADER */
.loader {
  margin:10px auto;
  width:81px;
  height:50px;
  opacity:0;
}

.loader span {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  margin: 25px auto;
  background: #;
  -moz-border-radius: 50px;
  -moz-animation: loader 0.4s infinite alternate;
  -webkit-border-radius: 50px;
  -webkit-animation: loader 0.4s infinite alternate;
  -ms-border-radius: 50px;
  -ms-animation: loader 0.4s infinite alternate;
  -o-border-radius: 50px;
  -o-animation: loader 0.4s infinite alternate;
  border-radius: 50px;
  animation: loader 0.4s infinite alternate;
}

#loader_one {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

#loader_two {
  -moz-animation-delay: 0.12s;
  -webkit-animation-delay: 0.12s;
  -ms-animation-delay: 0.12s;
  -o-animation-delay: 0.12s;
  animation-delay: 0.12s;
}

#loader_three {
  -moz-animation-delay: 0.24s;
  -webkit-animation-delay: 0.24s;
  -ms-animation-delay: 0.24s;
  -o-animation-delay: 0.24s;
  animation-delay: 0.24s;
}

@-moz-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    background-color:#;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    background-color:#00FFFF;
    -moz-transform: translateY(-21px);
  }
}

@-webkit-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    background-color:#;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    background-color:#00FFFF;
    -webkit-transform: translateY(-21px);
  }
}

@-ms-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    background-color:#;
    -ms-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    background-color:#00FFFF;
    -ms-transform: translateY(-21px);
  }
}

@-o-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    background-color:#;
    -o-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    background-color:#00FFFF;
    -o-transform: translateY(-21px);
  }
}

@keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    background-color:#;
    transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    background-color:#00FFFF;
    transform: translateY(-21px);
  }
}


/* RSI Tooltip */
.tooltip-wrap { position: relative; }
.tooltip-wrap .rsi-tooltip { display: none; max-width: 428px; border: solid rgba(92, 236, 244, 0.8); border-width: 1px 1px 0 1px; background-color: rgba(0,0,0,0.8); box-shadow: 0px 0px 10px rgba(92, 236, 244, 0.5); position: absolute; }
.tooltip-wrap .rsi-tooltip > .content { padding: 10px; margin: 0; color: #fff; font-family: "Electrolize"; font-size: 14px; }
.tooltip-wrap .rsi-tooltip .bottom { display: block; height: 8px; width: 100%; background: url('../images/organization/tooltip-bottom.png') no-repeat 50% 0 ; position: absolute; bottom: -8px; left: 0; }

.rsi-autocomplete .scrollable { width: 300px; cursor: pointer; }
.rsi-autocomplete .scrollable .viewport { width: 290px; }
.rsi-autocomplete .body {
  background: linear-gradient(to bottom, rgb(9, 12, 15) 0%, rgb(14, 29, 42) 100%) repeat scroll 0% 0% transparent;
  box-shadow: none;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(48, 72, 94) rgba(48, 72, 94, 0.2) rgba(48, 72, 94, 0.2);
  border-radius: 0px;
}
.rsi-autocomplete li.autocomplete-item,
.rsi-autocomplete li.autocomplete-item:hover {
  margin: 0 4px 4px 4px;
  background: linear-gradient(to bottom, rgba(9, 12, 15, 0.9) 0%, rgba(14, 29, 42, 0.9) 100%) repeat scroll 0% 0% transparent;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(48, 72, 94) rgba(48, 72, 94, 0.2) rgba(48, 72, 94, 0.2);
  border-radius: 5px;
}
.rsi-autocomplete .body { min-height: 65px; }
.rsi-autocomplete .scrollable .scrollbar .track { width: inherit; }
.rsi-autocomplete ul { padding-top: 4px; }
.rsi-autocomplete li.autocomplete-item span { display: block; clear: both; }
.rsi-autocomplete li.autocomplete-item span.displayname { color: #ffeb01; font-size: 16px; font-family: "Electrolize"; margin-top: 4px; }
.rsi-autocomplete li.autocomplete-item span.nickname { color: #415664; font-size: 11px; font-weight: bold; }
.rsi-autocomplete li.autocomplete-item { padding-left: 60px; min-height: 50px; position: relative; }
.rsi-autocomplete li.autocomplete-item .avatar { width: 37px; height: 37px; padding: 3px; position: absolute; top: 5px; left: 5px; border: 1px solid #1e2f41; }
.rsi-autocomplete li.autocomplete-item .avatar img { width: 37px; height: 37px; }

.rsi-autocomplete li.autocomplete-item .avatar .corner { position: absolute; background: url('../images/common/thin-border-corner.png'); width: 6px; height: 6px; display: block;}
.rsi-autocomplete li.autocomplete-item .avatar .corner-top-left { top: -1px; left: -1px; background-position: 0 0;}
.rsi-autocomplete li.autocomplete-item .avatar .corner-top-right { top: -1px; right: -1px; background-position: -6px 0;}
.rsi-autocomplete li.autocomplete-item .avatar .corner-bottom-left { bottom: -1px; left: -1px; background-position: 0 -6px;}
.rsi-autocomplete li.autocomplete-item .avatar .corner-bottom-right { bottom: -1px; right: -1px; background-position: -6px -6px;}
.rsi-autocomplete li.autocomplete-item .glow { width: 1px; height: 30px; position: absolute; top: 12px; right: 0; }

.rsi-autocomplete li.autocomplete-item.active span.displayname { color: #0FF; text-shadow: 0 0 20px #09F; }
.rsi-autocomplete li.autocomplete-item.active span.nickname { color: #859DAA; }*/
.rsi-autocomplete li.autocomplete-item.active { background: rgba(76,142,197,0.1); }
.rsi-autocomplete li.autocomplete-item.active .glow { background: #0ff; box-shadow: 0px 0px 10px #0ff; }

/* Slashed button */
.slashed-button { display: block; min-width: 60px; height: 30px; padding-left: 110px; background: url('../images/profile/button-orgs-edit-left.png') no-repeat; position: absolute; top: 0; right: 0; overflow: hidden; }
.slashed-button .text { display: block; padding: 0 10px; height: 30px; line-height: 30px; color: #14e6fa; font-family: "Electrolize"; font-size: 12px;  text-align: left; text-indent: 0; background: url('../images/profile/button-orgs-edit-bg.png') repeat-x; }
.slashed-button .line { display: block; width: 41px; height: 30px; background: url('../images/profile/button-orgs-edit-line.png') no-repeat; position: absolute; top: 0; left: 0; }
.slashed-button .line.r { left: 28px; }
.slashed-button:hover .text { color: #fff; }
.slashed-button:hover .line.l {
  -webkit-transform: translate(38px,0);
  -moz-transform: translate(38px,0);
  -ms-transform: translate(38px,0);
  -o-transform: translate(38px,0);
  transform: translate(38px,0);
  opacity: 0;
}
.slashed-button:hover .line.r {
  -webkit-transform: translate(10px,0);
  -moz-transform: translate(10px,0);
  -ms-transform: translate(10px,0);
  -o-transform: translate(10px,0);
  transform: translate(10px,0);
  opacity: 0;
}

/* view more arrows */
a.viewmore span.arrow { background: url('../images/store/viewall-arrows.png') no-repeat center center; width:46px; height:43px; display:block; top:2px; position:absolute; }
a.viewmore span.arrow.arrow1 { right:21px; }
a.viewmore span.arrow.arrow2 { right:14px; }
a.viewmore span.arrow.arrow3 { right:7px; }
a.viewmore:hover span.arrow {-webkit-animation-fill-mode: forwards; }
a.viewmore:hover span.arrow.arrow1 { -webkit-animation: arrow .1s linear; -o-animation: arrow .1s linear; animation: arrow .1s linear; }
a.viewmore:hover span.arrow.arrow2 { -webkit-animation: arrow .3s linear; -o-animation: arrow .3s linear; animation: arrow .3s linear; }
a.viewmore:hover span.arrow.arrow3 { -webkit-animation: arrow .5s linear; -o-animation: arrow .5s linear; animation: arrow .5s linear; }

/* CSS fixe for forum - set in less for the website */
.hiddenlabel { text-indent: -9999px; white-space: nowrap; overflow: hidden; }