/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

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

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

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

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

input, select { vertical-align: middle; }



/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */


body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }

/* Normalize monospace sizing:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Minimal base styles.
 */

/* Prevent mobile zooming while remain desktop zooming: github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14 */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active, a:focus { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
strong, th, b { font-weight: bold; }

td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
    /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
    white-space: pre; white-space: pre-wrap; word-wrap: break-word;
    padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; }

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* Colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
    /*border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red;
    -webkit-box-shadow: 0px 0px 5px red;
    box-shadow: 0px 0px 5px red;*/
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink! */
::-moz-selection{ background: #a500a3; color:#fff; text-shadow: none; }
::selection { background:#a500a3; color:#fff; text-shadow: none; }

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #84f75e; }

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.iem7 img { -ms-interpolation-mode: bicubic; }


/**
 * You might tweak these..
 */

body, select, input, textarea {
    color: #010100;
    /* Set your base font here, to apply evenly */
    font-family: Arial, sans-serif;
}

/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

a { color: #004c8c; }

.formBox div a:hover, .formBox div a:hover b,
.outerShell div a:hover, .outerShell div a:hover b { color: #a500a3; }


/*
 * Helper classes
 */

/* prevent callout */
.nocallout {-webkit-touch-callout: none;}

/* Text overflow with ellipsis */
.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* A hack for HTML5 contenteditable attribute on mobile */
textarea.contenteditable {-webkit-appearance: none;}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
.gifhidden {position: absolute; left: -100%;}

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.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: drupal.org/node/897638 */
.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; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

/* Primary Styles
Default Layout    */

body {
    background: #000 url(../img/h/body_bg.jpg) center top repeat-y;
}

.outerShell {
    background: url(../img/h/header_bg.jpg) center top no-repeat;
    overflow: hidden;
    max-width: 100%;
    min-width: 944px;
}

/* header */

.pageIntro {
    padding: 315px 0 0;
    margin-bottom: 10px;
    position: relative;
    z-index: 999;
}

.logo {
    position: absolute;
    top: 0;
    background: url(../img/h/logo.png) no-repeat;
    width: 308px;
    height: 180px;
    background-size: 100%;
    z-index: 10;
}

.popout:hover, .popout:focus, .charSelect img {
    -moz-transform: scale(1.1) rotate(-5deg); -webkit-transform: scale(1.1) rotate(-5deg); -o-transform: scale(1.1) rotate(-5deg); -ms-transform: scale(1.1) rotate(-5deg); transform: scale(1.1) rotate(-5deg);
}

#user .charImg img {
    -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9);
}

#user .charImg:hover img {
    -moz-transform: scale(1.0) rotate(-5deg); -webkit-transform: scale(1.0) rotate(-5deg); -o-transform: scale(1.0) rotate(-5deg); -ms-transform: scale(1.0) rotate(-5deg); transform: scale(1.0) rotate(-5deg);
}

/* footer */

.pageOutro {
    width: 944px;
    margin: 0 auto;
    background: #000;
    padding-top: 210px;
    overflow: hidden;
}

.pageOutro ul {
    margin-left: 0;
    margin-bottom: 20px;
    list-style: none;
}

.copyright ul {
    margin-left: 0;
    margin-bottom: 20px;
    list-style: none;
}

.copyright ul li { margin-bottom: 0.3em; }

.socialBar { position: absolute; }

.box_full .socialBar {
    right: 40px;
    top: 20px;
}

.gf { background: url(../img/h/GF4D_Logo.png); width: 200px; height: 36px; display: inline-block; }
.gf:hover { background-position: 0 -36px; }
.kog { background: url(../img/h/kog_logo.png); width: 69px; height: 29px; display: inline-block; }
.kog:hover { background-position: 0 -29px; }
.usk { background: url(../img/h/usk_icon.gif); width: 70px; height: 70px; display: inline-block; }

.copyright {
    width: 210px;
    color: #fff;
    font-size: 0.85em;
    float: left;
    position: relative;
}

.copyright span { display: block; margin: 3px 0 20px; }

.copyright a { color: #fff; }
.copyright a span { text-decoration: underline; }

.outerShell #container { margin-bottom: -220px; }

#nav_footer.dropdown {
    background: #000;
    height: auto;
    width: 700px;
    float: right;
    position: static;
    overflow: hidden;
    padding-bottom: 20px;
}

#nav_footer.dropdown > ul { height: auto; background: none; margin: 0; width: 704px; float: right; }

#nav_footer.dropdown > ul > li { height: auto; top: 0; margin: 0 5px 0 0; background: #fff; padding: 0 15px 5px; border-radius: 10px; min-height: 320px; -webkit-box-shadow: inset 1px 1px 3px 1px #666; -moz-box-shadow: inset 1px 1px 3px 1px #666; box-shadow: inset 1px 1px 3px 1px #666; }

#nav_footer.dropdown > ul > li > ul { display: block; background: none; max-width: 156px; position: relative; }

#nav_footer.dropdown > ul > li > a { font-size: 1.2em; text-shadow: none; color: #000; font-weight: bold; }

#nav_footer.dropdown * { width: auto; }

#nav_footer.dropdown ul ul li { font-size: 1em; margin-bottom: 1em; }

/* mainframe */

#container {
    width: 944px;
    margin: 0 auto;
    background: url(../img/h/footer_bg.jpg) center bottom no-repeat;
    min-height: 1365px;
    position: relative;
    padding: 0 0 320px 0;
}

#main {
    padding: 0 6px 0 25px;
    width: 594px;
    float: left;
}

#main.noRelatedInfo { width: auto; }

#related {
    width: 293px;
    float: left;
}

/* theming - characters beside the main frame */

#container:before, #container:after, .pageIntro:before, .pageIntro:after {
    content: "";
    display: block;
    z-index: 0;
    position: absolute;
    top: 130px;
}

.pageIntro:before, .pageIntro:after {
    z-index: 991005;
}

/* tabs */

ul.tabs {
    width: 100%;
    margin: 0 0 0 1em;
    list-style: none;
    position: relative;
    top: 3px;
}

ul.tabs li {
    float: left;
    height: 27px;
    line-height: 27px;
    margin: 0 4px 0 0;
    overflow: hidden;
    position: relative;
    border: 3px solid #fff;
    border-bottom: 0 none;
}

ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 0.9em;
    padding: 0 6px;
    background: #fff;
    border: 4px solid #000;
    border-bottom: 0 none;
}

ul.tabs li a:hover { background: #ccc; }
ul.tabs li.ui-state-active { overflow: visible; }
ul.tabs li.ui-state-active a  { height: 27px; }

.teaser_box li.active { overflow: visible; }
.teaser_box li.active a { height: 27px; }

.tab_container {
    overflow: hidden;
    clear: both;
    background: #fff;
    border: 3px solid #fff;
    margin: 0 7px 1.5em;
}

.tab_content {
    padding: 15px 10px;
    display: none;
    border: 4px solid #000;
}

.tab_contentAct { display: block; }

.tab_content ul {
    list-style: none;
}

/* teaser elements */

.teaser_box {
    background-image: url(../img/h/teaser_box.gif), url(../img/h/teaser_box.gif), url(../img/h/teaser_box.gif);
    background-position: -293px bottom, 0 0, -604px 0;
    background-repeat: no-repeat;
    background-origin: padding-box, padding-box, content-box;
    background-size: auto auto, auto auto, 1465px 100%;
    padding: 22px 18px;
    margin-bottom: 1em;
    min-height: 145px;
}

.teaser_minibox, .teaser_smallbox {
    background: url(../img/h/teaser_box.gif) -879px 0 no-repeat;
    height: 64px;
    padding: 18px 18px 0;
    margin-bottom: 1em;
}

.teaser_smallbox {
    background-position: right top;
    height: 117px;
}

.teaser_box p {
    color: #fff;
}

.teaser_box h2, .teaser_minibox h2, .teaser_smallbox h2, .toolbox a b {
    font-size: 1.5em;
    display: block;
    font-weight: 900;
    margin: 0 0 0.5em;
    color: #56c9f9;
    overflow: hidden;
}

/* teaser - first_steps */

.toolbox a {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 0.8em;
    padding: 0 0 0 45px;
    background-image: url(../img/h/icons.png);
    background-repeat: no-repeat;
}

.toolbox a:hover span { color: #fff; }

.toolbox a b {
    color: #fff;
    margin: 0;
}

.toolbox .download { background-position: 0 3px; }
.toolbox .first_steps { background-position: 0 -66px; }
.toolbox .forum { background-position: 0 -120px; }
.toolbox .support { background-position: 0 -187px; }

/* teaser - server */

.server { background: url(../img/h/icons.png) right -260px no-repeat; }
.server_fail { background-position: right -330px; }

.server h2  {
    color: #fdff40;
    margin-bottom: 0.1em;
}

.server span  {
    font-weight: bold;
    font-size: 1.1em;
    color: #fff;
}

/* teaser - poll */

.poll {
    padding: 15px 0 0;
    margin: 0 -10px -13px 0;
    min-height: 190px;
    background: url(../img/h/poll_bg.gif) right bottom no-repeat;
}

label {
    font-weight: bold;
    display: block;
    margin: 0 0 0.3em;
    text-indent: 0.3em;
}

.poll label {
    margin: 0 0 1em 1.5em;
    color: #fff;
    font-size: 1.1em;
}

.poll .button, .poll .button:hover { margin-top: 2em; }

/* teaser - highscore */

.highscore {
    margin-bottom: -15px;
}

.highscore ul {
    list-style: none;
    margin: 0;
}

.highscore li {
    position: relative;
    clear: both;
    overflow: hidden;
    margin: -0 0 1.2em 0;
}

.highscore li span, .highscore b {
    overflow: hidden;
    white-space: nowrap;
    float: left;
    max-width: 65%;
}

.highscore li span {
    font-size: 0.9em;
    width: 60%;
    text-overflow: ellipsis;
}

.highscore li b:last-child {
    color: #1a679d;
    font-size: 1em;
    width: 20%;
    text-align: right;
}

.highscore b {
    color: #000;
    font-size: 1.1em;
    width: 18%;
    margin: -0.1em 0 0;
}

.highscore li:nth-child(2) span { color: #006cc0; }
.highscore li:nth-child(3) span { color: #26a408; }
.highscore li:nth-child(4) span { color: #a46008; }
.highscore li:nth-child(5) span { color: #a40c08; }

.highscore .legend {
    border-bottom: 3px solid #000;
    text-align: right;
    font-weight: 900;
    margin: 20px 0  10px 0;
    padding-bottom: 5px;
    position: relative;
    min-height: 1.2em;
}

.highscore .legend span {
    position: absolute;
    left: 0;
}

.highscore form { margin-bottom: 1.2em; }

.socialScore {
    margin-left: 18%;
    font-weight: bold;
    background: url(../img/h/icons.png) 0 -573px no-repeat;
    display: block;
    padding: 0.5em 0 0.6em 35px;
    text-decoration: none;
    color: #000;
}

input[type=text], input[type=password], input[type=search], input[type=email], select {
    margin: 0.4em 0 1em 0;
    padding: 4px 6px;
    border: 1px solid #a8a8a8;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 3px 3px 3px 0px #999;
    -moz-box-shadow: inset 3px 3px 3px 0px #999;
    box-shadow: inset 3px 3px 3px 0px #999;
}

.no-boxshadow input[type=text], .no-boxshadow input[type=search], .no-boxshadow input[type=password] {
    background: #ccc;
}

input:not([type=submit]):focus {
    -webkit-box-shadow: inset 1px 1px 3px 0px #a500a2;
    -moz-box-shadow: inset 1px 1px 3px 0px #a500a2;
    box-shadow: inset 1px 1px 3px 0px #a500a2;
}

input[type=radio] {
    position: relative;
    top: -0.3em;
}

input[type=checkbox] {
    float: left;
    width: auto !important;
    margin: 0 0.8em 0.8em;
}

.checkboxes label {
    margin-bottom: 1em;
    font-size: 0.85em;
    line-height: 160%;
    clear: both;
}

.search input[type=submit] {
    border: none;
    width: 25px;
    height: 20px;
    background: url(../img/h/icons.png) 5px -402px no-repeat;
    text-indent: -9999px;
}

.search input[type=search] {
    width: 170px;
    box-sizing: content-box;
    -webkit-appearance: textfield;
}

.newsSearch { margin: 15px 0 0 20px; }

/* teaser - social media */

.fb, .twitter, .insta {
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 44px 44px;
    color: #fff;
    display: table;
    font-weight: bold;
    height: 44px;
    margin: 1.25em 0 0.5em 0;
    padding-left: 55px;
    text-decoration: none;
    vertical-align: middle;
}

.fb span, .insta span {
    display: table-cell;
    vertical-align: middle;
    line-height: 140%;
}

.fb svg, .insta svg {
    height: 44px;
    width: 44px;
}

.fb { background-image: url(../img/h/fb.svg); }
.twitter { background-position: 0 -490px; }
.insta { background-image: url(../img/h/insta.svg); }

#fb {
    height: 96px;
    width: 254px;
    overflow: hidden;
}

#fb iframe {
    margin: -66px -2px 0;
}

.twtr-ft { visibility: hidden; }

/* teaser - filter */

.filter ul { padding: 1em 0 0 1.8em; }

.filter li { margin: 0 0 1.25em; }

.filter a, .teaser h4 a, .teaser .more {
    font-size: 1.1em;
    color: #fff;
    padding: 0 16px 0 0;
    background: url(../img/h/more.png) right -20px no-repeat;
}

.teaser .more { font-size: 0.85em; text-decoration: underline; }

.filter a { position: relative; }

.generatedcontent .filter .icon a, .generatedcontent .mediaFilter a { padding-left: 42px; }

.mediaFilter ul ul { padding: 5px 0; }

.mediaFilter .movies, .mediaFilter .pictures { position: relative; margin-bottom: 0; }

.mediaFilter .movies:before, .mediaFilter .pictures:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 34px;
    background: red;
    background: url(../img/h/icons.gif) 0 -778px no-repeat;
}
.movies.current:before { background-position: 0 -812px; }
.mediaFilter .pictures:before { background-position: 0 -850px; }
.pictures.current:before { background-position: 0 -886px; }

/* teaser - download */

.downloadTeaser { text-align: center; padding-top: 135px;  }
.downloadTeaser .button { position: relative; }
.downloadTeaser .button img { position: absolute; top: -180px; left: 30px; }

/* teaser - latest media */

    .teaser .media_list figure, .teaser .page_list figure {
        margin: 0 auto 0.5em;
        float: none;
    }

/* teaser - media archive */

.goMediaArchive {
    background: url(../img/h/teaserMediaArchive.png) right bottom no-repeat;
    margin: -15px -10px -13px 0;
    padding: 160px 0 10px;
}

/* teaser - manga */

.manga {
    background: url(../img/h/frames.png) -196px -587px no-repeat;
    padding: 8px 8px 8px 5px;
    margin: 0 0 15px 5px;
    height:160px;
}

.manga img {
    display: block;
    width:233px;
}

.manga_small img {
    display: block;
    margin-bottom: 5px;
}

.manga_small { margin: 0 0 0 5px; }

.manga_small li {
    display: inline-block;
    margin: 0 5px 5px 0;
    text-align: center;
}

.manga_small li, .manga_small a {
    color: #fff;
    font-weight: bold;
}

.manga a {
    height:156px;
    overflow:hidden;
}

/* teaser - related Articles and Media */

.teaser h3 {
    color: #fff;
    padding-top: 0.5em;
    margin-bottom: 1em;
}

.teaser h4 a { color: #fff; }

.related, .tip { margin: 0 0 1em 15px; clear: both; }

.outerShell .related .badge {
    margin-top: 1em;
    position: static;
    display: block;
}

.related time { font-size: 0.85em; }

.related img, .tip img {
    margin: 0.3em 1em 1em 0;
    background: url(../img/h/frames.png) right -12px no-repeat;
    width: 75px;
    height: 55px;
    padding: 5px 6px 6px;
    float: left;
}

/* main navigation */

.dropdown {
    width: 885px;
    height: 110px;
    background: url(../img/h/nav_main_bg.gif) center top no-repeat;
    text-align: center;
    position: absolute;
    top: 195px;
    left: 28px;
    z-index: 1004;
}

.dropdown > ul {
    height: 0;
    margin-top: 96px;
    overflow: visible !important;
    background: url(../img/h/megadropdown.png) 15px bottom no-repeat;
}

.dropdown > ul > li {
    display: inline-block;
    position: relative;
    top: -96px;
    vertical-align: top;
    /*margin: 1em 25px;*/
    margin-left: 25px;
    padding: 1em 25px 1em 0;
    text-align: left;
    height: 96px;
    overflow: hidden;
}

.dropdown > ul > li:last-child {
    padding-right: 50px;
}

.dropdown > ul > li > a {
    font-size: 2.308em;
    color: #fff;
    letter-spacing: -1px;
    text-decoration: none;
    padding: 1em 0;
    display: inline-block;
    text-shadow: 4px -4px 4px #000000, -4px 4px 4px #000000;
}

/* level 2 */

.dropdown > ul > li > ul {
    position: absolute;
    left: 0;
    text-align: left;
    display: none;
    width: 102%;
}

.dropdown ul ul li {
    font-size: 1.25em;
    margin: 0 0 0.6em;

    /*word-wrap: break-word;*/
}

/* level 3 */

.dropdown ul ul ul { margin: 0.5em 0 0; }
.dropdown ul ul ul li {
    font-size: 1em;
}
.dropdown ul ul ul li a {
    position: relative;
    padding-left: 20px;
    display: block;
}
.dropdown ul ul ul a:before, .dropdown .icon a:before, .filter .icon a:before {
    background: url(../img/h/icons.gif) -5px -448px no-repeat;
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px;
}

/* nav icons */

.dropdown .icon a, .dropdown .nav_media ul a {
    position: relative;
    padding-left: 35px !important;
    display: block;
}
.dropdown .icon a:before, .filter .icon a:before {
    width: 38px;
    height: 28px;
    margin-top: -13px;
}

.no-generatedcontent .dropdown ul ul a { padding-left: 0 !important; }
.no-generatedcontent .dropdown ul ul ul a { padding-left: 10px !important; }

.dropdown li, .dropdown li * { vertical-align: middle; }

.outerShell .forum a:before { background-position: -3px -3px; }
.outerShell .support a:before { background-position: -3px -32px; }
.outerShell .ranks a:before { background-position: -3px -60px; }
.outerShell .downloads a:before { background-position: -3px -176px; }
.outerShell .movies a:before { background-position: -3px -236px; }
.outerShell .images a:before { background-position: -3px -265px; }
.outerShell .galeries a:before { background-position: 0 -293px; }
.filter .galeries a:before { background-position: 0 -678px; }

/* hover states */

.outerShell .nav_news a:hover:before { background-position: -22px -448px; }
.outerShell .nav_comm a:hover:before { background-position: -5px -487px; }
.outerShell .nav_game a:hover:before { background-position: -4px -468px; }
.outerShell .nav_media a:hover:before { background-position: -22px -468px; }

.outerShell .forum a:hover:before { background-position: -3px -90px; }
.outerShell .support a:hover:before { background-position: -3px -119px; }
.outerShell .ranks a:hover:before { background-position: -3px -147px; }
.outerShell .downloads a:hover:before { background-position: -3px -205px; }
.outerShell .movies a:hover:before { background-position: -3px -325px; }
.outerShell .images a:hover:before { background-position: -4px -353px; }
.outerShell .galeries a:hover:before { background-position: 0 -381px; }
.outerShell .comics a:before, .dropdown .comics a:hover:before { background-position: 0 -417px; }
.filter .comics a:before { background-position: 0 -742px; }
.filter .galeries a.current:before, .filter .galeries a:hover:before { background-position: 0 -708px; }

/* color coding */

.dropdown ul ul a:link,.dropdown ul ul a:visited { color: #000; text-decoration: none; }
.dropdown > ul > li > a:hover { text-decoration: underline; }
.dropdown:hover > ul > .nav_news > a, .dropdown .nav_news a:hover, .channelNews a.current { color: #56c9f9; }
.dropdown:hover > ul > .nav_comm > a, .dropdown .nav_comm a:hover, .channelCommunity a.current, .channelCommunity  .teaser h2 { color: #ffa800; }
.dropdown:hover > ul > .nav_game > a, .dropdown .nav_game a:hover, .channelGame a.current, .channelGame  .teaser h2 { color: #b161f3; }
.dropdown:hover > ul > .nav_media > a, .dropdown .nav_media a:hover, .channelMedia a.current, .channelMedia  .teaser h2 { color: #98be23; }

.groupTitle {
    color: #bababa;
}

/* breadcrumbs */

.breadcrumbs {
    padding: 5px 0 0 85px;
}

.breadcrumbs li {
    display: inline-block;
    margin: 0 0.3em 0 0;
    padding-left: 1em;
    background: url(../img/h/icons.png) 0 -719px no-repeat;
}

.breadcrumbs li:first-child {
    padding-left: 0;
    background: none;
}

.breadcrumbs li:last-child a { color: #000; }

.breadcrumbs a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #47b4cc;
}

/* prev/next article */

.nav_siblings { margin: 0 35px 4em; }

.nav_siblings a {
    text-decoration: none;
    overflow: hidden;
    width: 40%;
    background-image: url(../img/h/more.png);
    background-repeat: no-repeat;
    color: #000;
}

.nav_siblings span { text-decoration: underline; }

.nav_siblings time {
    color: #666;
    font-size: 0.9em;
    display: block;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.prevArticle {
    background-position: 0 -47px;
    padding-left: 18px;
    float: left;
}

.nextArticle {
    background-position: right 2px;
    padding-right: 18px;
    float: right;
    text-align: right;
}

/* showcase box */

#showcase {
    width: 591px;
    height: 427px;
    margin: 0 0 1em;
    overflow: hidden;
    background: url(../img/h/frames.png) 0 -153px no-repeat;
    position: relative;
}

.slidecontrol {
    position: absolute;
    bottom: 0;
    left: 15px;
    margin: 0;
    padding: 0 0 7px 0;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.5);
    text-align: center;
    width: 565px;
    z-index: 100;
}

.slidecontrol li, .newsPreview {
    display: inline-block;
    position: relative;
    background: url(../img/h/frames.png) 0 -13px no-repeat !important;
    width: 119px;
    height: 74px;
    padding: 6px;
    overflow: hidden;
    margin: 0 3px;
    cursor: pointer;
}

.slidecontrol li.active {
    background-position: -138px 0 !important;
    width: 119px;
    height: 74px;
    padding: 19px 6px 6px;
}

.slidecontrol li span {
    display: block;
    width: 119px;
    height: 74px;
    overflow: hidden;
}

.slidecontrol li b, .actionBox span, figcaption, .tocItem b {
    position: absolute;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    padding: 0.2em 0;
}

.slidecontrol li b {
    bottom: 6px;
    left: 6px;
    font-size: 0.9em;
    width: 119px;
    font-family: Arial, sans-serif;
}

.slidecontrol li.active b, .slidecontrol li:hover b {
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.7);
    color: #000;
}

.slidecontainer {
    overflow: hidden;
    height: 400px !important;
    width: 566px !important;
    margin: 15px 0 0 15px;
}

.slide {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: none;
}

.slidetext {
    position: absolute;
    right: 10px;
    top: 25px;
    width: 21em;
    overflow: hidden;
}

.slide h3 {
    font-size: 2.5em;
    line-height: 0.9em;
    margin: 0 0 0.6em;
    letter-spacing: -2px;
}

.slide hgroup {
    margin-bottom: 1em;
}

/* comic boxes */

.box {
    background-image: url(../img/h/news_box.png), url(../img/h/news_box.png), url(../img/h/news_box_middle.png);
    background-position: -593px bottom, 0 0, 0 0;
    background-repeat:  no-repeat;
    background-origin:  padding-box, padding-box, content-box;
    background-size:  auto auto, auto auto, 593px 100%;
    padding: 30px 0;
    margin-bottom: 1em;
    min-height: 300px;
    position: relative;
}

.boxIntro { margin: -30px 22px 30px; }

.box h2, .boxIntro h1 {
    color: #000;
    font-size: 1.6em;
    letter-spacing: -1px;
}

.box { padding-bottom: 10em; }

.box section > h2 { margin: 0 0 0.8em; }

.box > h2, .box > p, .box > section > h2, .box > section > p { margin: 0 22px 0.8em; }

.box p.categories {
    border-bottom: 1px solid #000000;
}
.box a.category {
    margin: 0 10px 0.4em 10px;
    padding: 2px 5px;
    color: #FFFFFF;
    background-color: #333333;
    opacity: 0.5;
    font-weight: bold;
    text-decoration: none;
}
.box a.category.active, .box a.category:hover {
    color: #FFFFFF;
    background-color: #000000;
    opacity: 1.0;
}

.boxIntro h2, .boxIntro h1 {
    color: #fff;
    background: url(../img/h/section_header.png) right top no-repeat;
    height: 49px;
    min-width: 250px;
    max-width: 365px;
    overflow: hidden;
    display: inline-block;
    padding: 8px 155px 0 0;
    margin-top: 8px;
}

.boxIntro h2 span, .boxIntro h1 span {
    white-space: nowrap;
    display: block;
    overflow: hidden;
}

article .boxIntro h1 {
    display: block;
    margin: 5px -14px 0 -15px;
    max-width: none;
    height: auto;
    padding: 34px 0 0 0;
    background-image: url(../img/h/section_header.png), url(../img/h/section_header.png);
    background-position: 0 -112px, right bottom;
    background-clip:  padding-box, content-box;
    overflow: hidden;
}

article .boxIntro h1 span {
    margin: -26px 30px 40px 15px;
    white-space: normal;
}

article .boxIntro time {
    margin: -38px 0 30px;
    display: block;
}

time, .skillMP {
    font-size: 0.9em;
    color: #7f7f7f;
    font-weight: bold;
}

/* info boxes */

.extraInfo {
    background-image: url(../img/h/extraInfo.gif), url(../img/h/extraInfo.gif), url(../img/h/extraInfo.gif);
    background-position: -536px bottom, 0 0, -1072px 0;
    background-repeat:  no-repeat;
    background-origin:  padding-box, padding-box, content-box;
    background-size:  auto auto, auto auto, 1608px 100%;
    padding: 42px 0;
    margin: 2em 22px 3em;
    width: 536px;
    min-height: 190px;
    position: relative;
}

.extraInfo p { margin: 0 35px 1em; }

.extraInfo:before {
    content: "";
    display: block;
    float: left;
    background: url(../img/h/icons.gif) 0 -629px no-repeat;
    margin: 0 15px 15px 35px;
    width: 45px;
    height: 45px;
}

/* big box (full width) */

.box_full {
    background-image: url(../img/h/big_box.png), url(../img/h/big_box.png), url(../img/h/big_box.png);
    background-position: -895px bottom, 0 0, -1790px 0;
    background-size:  auto auto, auto auto, 2685px 100%;
    min-height: 520px;
    width: 895px;
    position: relative;
}

/* comic box variations */

.box.media_box { background-image: url(../img/h/media_box.png), url(../img/h/media_box.png), url(../img/h/media_box_middle.png); }
.box.comm_box { background-image: url(../img/h/forum_box.png), url(../img/h/forum_box.png), url(../img/h/forum_box_middle.png); }
.box.game_box { background-image: url(../img/h/game_box.png), url(../img/h/game_box.png), url(../img/h/game_box_middle.png); }

.media_box .boxIntro {
    margin: -30px 22px 30px;
}

.media_box .boxIntro h2, .media_box .boxIntro h1 {
    background: url(../img/h/section_header.png) right -57px no-repeat;
    height: 48px;
    min-width: 170px;
    max-width: none;
    padding: 6px 125px 0 0;
    margin-bottom: 8px;
}

.comm_box .boxIntro h2 {
    margin-top: 9px;
}

/*  no-multiplebgs fallback */

.no-multiplebgs .box, .no-backgroundsize .box {
    background-color: #dff3fd;
    background-image: url(../img/h/box_fallback.jpg) !important;
    background-position: 0 0;
    background-repeat:  no-repeat;
    border: 5px solid #000;
    padding-bottom: 10px;
}

.no-multiplebgs .box_full { background-image: none !important; }
.no-multiplebgs .box_full .boxIntro h1 { padding-left: 18px; }

.no-multiplebgs .box.media_box, .no-backgroundsize .box.media_box {
    background-color: #ebf8d9;
    background-position: -588px 0;
}

.no-multiplebgs .box.comm_box, .no-backgroundsize .box.comm_box {
    background-color: #f8eadb;
    background-position: -1178px 0;
}

.no-multiplebgs .box.game_box, .no-backgroundsize .box.game_box {
    background-color: #eeedfd;
    background-position: -1767px 0;
}

.no-multiplebgs .boxIntro, .no-backgroundsize .boxIntro { margin: -39px 0 30px !important; }

.no-multiplebgs .boxIntro p, .no-multiplebgs .boxIntro h1, .no-multiplebgs .boxIntro h2, .no-multiplebgs .boxIntro h3 { padding-left: 18px !important; }
.no-multiplebgs article .boxIntro p { padding-left: 0 !important; }

.no-multiplebgs article .boxIntro h1 {
    background: #000;
    height: auto;
    margin: 5px 0 0;
    padding: 10px 0 0 22px !important;
    border-bottom: 8px solid #fff;
}

.no-multiplebgs article .boxIntro h1 span { margin: 0 0 30px; }

.no-multiplebgs article .boxIntro p { margin: 0 22px 2em; }

.no-multiplebgs article .boxIntro time { margin: -35px 22px 30px; display: block; }

.no-multiplebgs .box .page_list, .no-backgroundsize .box .page_list,
.no-multiplebgs .box .media_list, .no-backgroundsize .box .media_list { margin: 0 14px 2em; }

.no-multiplebgs .teaser_box, .no-backgroundsize .teaser_box {
    background-image: none;
    background-color: #000;
    border: 6px solid #fff;
}

/* buttons */

.button, .button:hover, .button:link, .button:visited {
    background: transparent url(../img/h/buttons.png) no-repeat;
    border: 0 none;
    width: 226px;
    display: block;
    color: #fff !important;
    height: 42px;
    font-size: 1.308em;
    padding: 9px 0 0;
    margin: 0 auto 0;
    text-decoration: none;
    text-align: center;
    text-shadow: 2px 2px 2px #000;
}



.button.buttonS, .button.buttonS2 {
    width: 176px;
    background-position: 0 -290px;
}

.button.buttonS2 { background-position: 0 -341px; }

.button.buttonXXL {
    width: 275px;
    background-position: 0 -237px;
}

input.button, input.button:hover {
    padding: 0;
    background-position: 0 2px;
}

#register input.button { background-position: 0 -394px; }

.box .button, .teaser a.button { margin-bottom: -5px; }
.teaser a.button { margin-top: 15px; }
.formBox .button{ margin-bottom: 2em; }
.formBox p { font-size: 0.85em; margin-bottom: 1.5em; }

.slide .button {
    background-position: 0 -50px;
    width: 200px;
    height: 58px;
    padding: 21px 83px 0 0;
    text-align: right;
    margin: 0 0 0 -6px;
    font-size: 1.4em;
}

/* button hover states */

.button:hover { background-position: -226px 0; }
.button.buttonS:hover, .charItem:hover .buttonS { background-position: -174px -290px; }
.button.buttonS2:hover, .charItem:hover .buttonS2 { background-position: -174px -341px; }
.button.buttonXXL:hover { background-position: -273px -237px; }
input.button:hover { background-position: -226px 2px; }
#register input.button:hover { background-position: -226px -394px; }
.slide .button:hover { background-position: -284px -50px; }

/* media */

.box .media_list, .box .page_list {
    margin: 0 22px 2em;
}

figure {
    float: left;
    background: url(../img/h/frames.png) -281px 0 no-repeat;
    margin: 0 6px 6px 0;
    width: 165px;
    height: 125px;
    padding: 7px;
    position: relative;
}

figure:hover figcaption, figure:focus figcaption {
    padding: 0.2em 0 0.6em 0;
}

.box .media_list figure:nth-child(3n+3) {
    margin-right: 0;
}

figure img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

figure a {
    overflow: hidden;
    display: block;
    height: 125px;
}

figcaption {
    left: 7px;
    bottom: 7px;
    width: 165px;
}

figure div.video { display: none; }

figure a.video:after {
    background: url(../img/h/icons.png) no-repeat scroll 45px -602px rgba(0, 0, 0, 0.5);
    content: "";
    height: 125px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 165px;
}

figure a[data-v]:hover:after { background-color: rgba(0, 0, 0, 0.2); }

/* galleries */

.gallery {
    position: relative;
    margin: 0 22px 1em 18px;
    overflow: hidden;
}

.gallery img {
    position: absolute;
    left: 5px;
    top: 6px;
}

.gallery h3, .gallery p {
    color: #fff;
    line-height: 110%;
}

.gallery h3 {
    font-size: 1.3em;
    margin: 0.2em 0 0.5em 0;
}

.gallery p {
    font-size: 0.85em;
    font-weight: bold;
}

.gallery a { font-weight: bold; color: #1278c3; }

.gInfos {
    background: url(../img/h/frames.png) 0 -759px no-repeat;
    height: 152px;
    position: relative;
    z-index: 1;
    padding: 14px 15px 0 360px;
    pointer-events: none;
}

.gInfos a { pointer-events: all; }

.gallery:nth-child(odd) .gInfos {
    background-position: 0 -927px;
    padding: 14px 360px 0 15px;
}

.gallery:nth-child(odd) img { left: auto; right: 5px; }

/* transformations */

.popout, figure img, .slidecontrol li img, .charSelect .charImg img, .gallery img, .charItem img, .charHigh img, .charNotice, .charNavBottom a, .classNav li {
    -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; transition: all 100ms ease-in;
}

figure:hover img, figure:focus img, .gallery:hover img {
    -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);
}

#fancybox-content > div { overflow: hidden !important; }

/* news */

.news, .thread {
    position: relative;
    padding: 0 0 0 130px;
    margin: 0 22px 2.5em;
}

.news h3, .thread h3 {
    font-size: 1.1em;
}

.news h3 a, .thread h3 a { color: #000; }

.collapsed .news h3 a {
    background: url(../img/h/more.png) no-repeat scroll right 4px transparent;
    padding: 0 16px 0 0;
}

.news_date, .thread_meta {
    color: #555;
    font-weight: bold;
    font-size: 0.85em;
    display: block;
    margin-bottom: 1em;
}

summary .news_date { margin-top: 0.3em; }

.no-details details > :not(summary) { display: none; }

.newsPreview img { width: 100%; height: 100%; }

.outerShell .badge {
    position: absolute;
    left: 0;
    top: 0;
    width: 112px;
    height: 23px;
    padding-top: 9px;
    background: url(../img/h/badges.png) no-repeat;
    color: #fff !important;
    text-decoration: none;
    text-align: center;
    font-size: 0.9em;
    overflow: hidden;
}

.outerShell .update_badge { background-position: 0 -32px; }
.outerShell .event_badge { background-position: 0 -64px; }
.outerShell .help_badge { background-position: 0 -96px; }
.outerShell .general_badge { background-position: 0 -128px; }

.teaser .community_badge { background-position: -112px 0; }
.teaser .update_badge { background-position: -112px -32px; }
.teaser .event_badge { background-position: -112px -64px; }
.teaser .help_badge { background-position: -112px -96px; }
.teaser .general_badge { background-position: -112px -128px; }

.more {
    padding: 0 16px 0 0;
    background: url(../img/h/more.png) right 1px no-repeat;
    font-size: 0.85em;
    text-decoration: none;
}

.more:hover, .socialScore:hover {
    text-decoration: underline;
}

.newsDisplay {
    position: absolute;
    right: 30px;
    top: 35px;
}

.newsDisplay span {
    display: inline-block;
    width: 25px;
    height: 24px;
    cursor: pointer;
}

#listCollapsed { background: url(../img/h/icons.gif) 0 -581px; }
#listCollapsed.chosenMode, #listCollapsed:hover { background-position: -25px -581px; }

#listStandard { background: url(../img/h/icons.gif) 0 -605px; }
#listStandard.chosenMode, #listStandard:hover { background-position: -25px -605px; }

/* paginator */

#paginator ul {
    display: block;
    padding: 2em 0 1em;
    margin: 0 0 1em;
    text-align: center;
}

#paginator li {
    display: inline-block;
}

#paginator li > * {
    color: #000;
    font-size: 1.1em;
    padding: 0 0.3em;
    margin: 0 0.1em;
}

#paginator a {
    background: #fff;
    text-decoration: none;
}

#paginator li:last-child:not(.current) a:after { content: "\00A0\003E" }
#paginator li:first-child:not(.current) a:before { content: "\003C\00A0" }

#paginator .current a, #paginator a:hover {
    background: #000;
    color: #fff;
    position: relative;
    top: -0.1em;
    padding: 0.2em 0.4em;
    margin: 0 0em;
}

/* user info at top */

#user, #userLogin {
    position: absolute;
    right: 20px;
    top: 0;
}

#user .toggle {
    background: url(../img/h/charTab_bg.png) 0 -154px no-repeat;
    width: 24px;
    height: 37px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}

#user .charPreview .toggle {
    background-position: -24px -154px;
    left: -22px;
}

.gotoAccount {
    position: absolute;
    right: 35px;
    bottom: 35px;
    color: #fff;
}

.gotoAccount a {
    color: #fff;
    text-decoration:none;
}

.gotoAccount a:hover { text-decoration: underline; }

.char {
    background: url(../img/h/charTab_bg.png) 0 0 no-repeat;
    height: 154px;
    width: 371px;
}

.logout {
    width: 29px;
    height: 27px;
    background: url(../img/h/logout.png);
    position: absolute;
    right: 28px;
    top: 15px;
}

.logout:hover { background-position: 0 -27px; }

.charName {
    color: #2ea5fd;
    font-size: 1.3em;
    display: block;
    padding: 15px 60px 2px 0;
}

.charClass, .charCoins { font-size: 0.9em; }

.charImg {
    float: left;
    margin: -3px 15px 0 25px;
    height: 125px;
    width: 119px;
    overflow: hidden;
}

.charSelect .charImg { cursor: pointer; }

.coinButton {
    display: inline-block;
    width: 179px;
    height: 26px;
    line-height: 26px;
    vertical-align: middle;
    text-indent: 30px;
    margin-top: 5px;
    background: url(../img/h/charTab_bg.png) right -154px no-repeat;
    text-decoration: none;
    color: #000;
}

.charPreview {
    position: absolute;
    right: 20px;
    top: 5px;
    background: #000;
    padding: 5px 20px 3px 7px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    z-index: -1;
}

.open .charPreview {
    display: block;
}

.charPreview .row {
    white-space: nowrap;
    height: 54px;
}

.charPreview .row div {
    width: 50px;
    line-height: 50px;
    overflow: hidden;
    display: inline-block;
    background-image: url(../img/h/previewChars.png);
    background-repeat: no-repeat;
    cursor: pointer;
}

.charPreview .elsword { background-position: 0 0; }
.charPreview .rena { background-position: 0 -71px; }
.charPreview .aisha { background-position: 0 -142px; }
.charPreview .raven { background-position: 0 -213px; }
.charPreview .eve { background-position: 0 -275px; }
.charPreview .chung { background-position: 0 -345px; }
.charPreview .ara { background-position: 0 -411px; }
.charPreview .elesis { background-position: 0 -482px; }
.charPreview .add { background-position: 0 -553px; }
.charPreview .luciel { background-position: 0 -624px; }
.charPreview .rose { background-position: 0 -695px; }
.charPreview .ain { background-position: 0 -766px; }
.charPreview .laby { background-position: 0 -837px; }

.charPreview .elsword:hover, .charActive.elsword { background-position: -71px 0; }
.charPreview .rena:hover, .charActive.rena { background-position: -71px -71px; }
.charPreview .aisha:hover, .charActive.aisha { background-position: -71px -142px; }
.charPreview .raven:hover, .charActive.raven { background-position: -71px -213px; }
.charPreview .eve:hover, .charActive.eve { background-position: -71px -275px; }
.charPreview .chung:hover, .charActive.chung { background-position: -72px -345px; }
.charPreview .ara:hover, .charActive.ara { background-position: -72px -411px; }
.charPreview .elesis:hover, .charActive.elesis { background-position: -72px -482px; }
.charPreview .add:hover, .charActive.add { background-position: -72px -553px; }
.charPreview .luciel:hover, .charActive.luciel { background-position: -71px -624px; }
.charPreview .rose:hover, .charActive.rose { background-position: -71px -695px; }
.charPreview .ain:hover, .charActive.ain { background-position: -71px -766px; }
.charPreview .laby:hover, .charActive.laby { background-position: -71px -837px; }

/* user login */

#userLogin {
    background: url(../img/h/login.png) 0 0 no-repeat;
    height: 96px;
    right: 0;
    text-align: center;
    width: 500px;
}

.button.loginButton, .button.regButton, .button.steamButton {
    display: inline-block;
    font-size: 1.15em;
    height: 34px;
    padding: 15px 42px 0 0;
    position: relative;
    text-align: right;
    width: 160px;
}

.button.loginButton { background-position: 0 -129px; }
.button.steamButton, .button.regButton { background-position: 0 -183px; }

.button.loginButton:hover { background-position: -226px -129px; }
.button.regButton:hover, .button.steamButton:hover { background-position: -226px -183px; }

.steam_icon {
    background: url(../img/h/steam-icon.png) center center no-repeat;
    display: inline-block;
    height: 20px;
    left: 20px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    width: 20px;
}


/* form boxes */
.formBox {
    display: block;
    position: relative;
    margin: 20px auto 150px;
    padding: 35px 30px;
    width: 286px;
    left: 0;
    top: 0;
    z-index: 99;
    background: url(../img/h/form_bg.png) no-repeat scroll left top transparent;
    text-align: left;
}

.formBoxHelp {
    position: absolute;
    padding: 0 30px 35px;
    width: 286px;
    min-height: 80px;
    left: 1px;
    bottom: auto;
    background: url(../img/h/form_bg.png) no-repeat scroll -347px bottom transparent;
}

.formBox input:not([type=submit]), select {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.formBoxHelp a {
    font-size: 1.1em;
    font-weight: bold;
    display: block;
    color: #000;
    margin-bottom: 0.8em;
    text-decoration: none;
    clear: both;
    min-height: 30px;
}

.formBoxHelp a span {
    font-size: 0.8em;
    text-decoration: underline;
    color: #0c7edd;
    display: block;
}

.formBoxHelp a:before {
    content: "";
    width: 30px;
    height: 30px;
    background: url(../img/h/icons.gif) 0 -512px no-repeat;
    float: left;
    margin: 0 5px 1em 0.5em;
}

.formBoxHelp a.tip2:before { background-position: 0 -550px; }

.formBoxHelp a span:after, .socialScore:after {
    content: "";
    width: 10px;
    height: 11px;
    background: url(../img/h/more.png) 0 0 no-repeat;
    display: inline-block;
    margin: 0 0 0 0.5em;
    text-decoration: none !important;
}

/* overlays */

.overlay.formBox {
    display: none;
    position: fixed;
    margin: 0 0 0 -191px;
    padding: 80px 48px 0;
    width: 286px;
    left: 50%;
    top: 80px;
    z-index: 9999;
    background: url(../img/h/overlay_form_bg.png) left top no-repeat;
    text-align: left;
}

.overlay .formBoxHelp {
    background: url(../img/h/overlay_form_bg.png) no-repeat scroll -382px bottom transparent;
    left: 0;
    bottom: auto;
    min-height: 102px;
    padding: 10px 48px 50px;
    position: absolute;
    width: 286px;
}

.overlay .close, .skill .close {
    position: absolute;
    right: 16px;
    top: 12px;
    width: 30px;
    height: 30px;
    background: url(../img/h/icons.png) -36px -541px no-repeat;
    cursor: pointer;
}

#shade {
    background: #000;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    display: none;
}

/* register */


#regForm {
    position: relative;
}

.input_wrapper {
    position: relative;
    display: flex;
}

.password_info,
.error_info {
    top: -5px;
    background: #fff;
    border: 3px solid #00b4ff;
    color: #000;
    display: none;
    font-size: 1.2em;
    height: auto;
    opacity: 0;
    padding: 12px 15px;
    position: absolute;
    width: 270px;
    z-index: 201;
}
.password_info.shown,
.error_info.shown {
    display: block;
    right: -20em;
    opacity: 1;
    -o-animation-duration: .3s;
    -o-animation-name: fadeIn;
    -moz-animation-duration: .3s;
    -moz-animation-name: fadeIn;
    -webkit-animation-duration: .3s;
    -webkit-animation-name: fadeIn;
    animation-duration: .3s;
    animation-name: fadeIn;
}

.error_info.shown >a {
    color: #00b4ff;
    font-size: 14px;
}

.error_info.shown >a:hover {
    text-decoration: none;
    color: #00b4ff;
}

.password_info:after,
.error_info:after {
    /*	background-position: 0px -149px;*/
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid #00b4ff;
    content: '';
    display: block;
    height: 0;
    left: -10px;
    position: absolute;
    top: 10px;
    width: 0;
}




.error_info {
    background: #980000;
    border: 3px solid #c5233d;
    color: #fff;
}

.error_info:after {
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid #c5233d;
    content: '';
    left: -10px;
    display: block;
    top: 10px;
    position: absolute;
    height: 0;
    width: 0;
}

.password_info:after {
    background-position: 0px -193px;
}
.password_info strong {
    font-weight: bold;
}
.password_info > ul {
    list-style-image: url("../img/bullet_point.gif");
    padding-left: 18px;
    margin: 4px 0 8px 0;
}
.password_info > ul.bullet_error, .password_info > ul.bullet_ok {
    list-style-image: url("../../img/landing_sprite.png");
}








.steps { text-align: center; }

.steps span {
    padding: 90px 0 0;
    margin-bottom: 3em;
    display: inline-block;
    background-image: url(../img/h/register_steps.png);
    background-repeat: no-repeat;
    min-width: 30%;
    font-weight: bold;
    position: relative;
    opacity: 0.6;
}


.steps span.step1:after,
.steps span.step3:after
{
    content: "";
    width: 16px;
    height: 20px;
    position: absolute;
    top: 40px;
    right: -8%;
    background: url(../img/h/icons.png) 0 -757px no-repeat;
}

.steps .step1 { background-position: center 0; }
.steps .step2 { background-position: center -102px; }
.steps .step3 { background-position: center -204px; }

.steps .current { text-decoration: underline; opacity: 1; }


#steamOverlay h2 {
    font-size: 20px;
    margin: 20px 0;
}

/* forum */

#forum .thread_meta a {
    color: #a500a3;
    font-size: 1.1em;
}

#forum h3 a {
    text-decoration: none;
    position: relative;
}

#forum h3 a:after {
    content: "";
    width: 26px;
    height: 25px;
    background: url(../img/h/thread_link.png) 0 0 no-repeat;
    position: absolute;
    top: 0.2em;
    right: -40px;
}

#forum h3 a:hover:after, #forum h3 a:focus:after { background-position: 0 -25px; }

h1, h2, h3, h4, strong, label, header p, #nav_main, #paginator, b, .highscore li, .charName, ul.tabs li a, .filter a,
.button, .badge, .more, .legend, .gotoAccount, .breadcrumbs, .nav_siblings, .steps, .formBoxHelp, .invTitle {
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: 900;
}

/* download */

table {
    margin: 1em 22px 3em;
    border-bottom: 10px solid #000;
    border-radius: 10px 10px 0 0;
}

table, tbody tr > * {
    border-left: 5px solid #000;
    border-right: 5px solid #000;
    font-size: 0.9em;
}

thead th {
    font-size: 1.2em;
    color: #fff;
    background: #000;
}

th, td {
    padding: 0.8em 0.6em;
    font-weight: bold;
    text-align: left;
}

tbody tr > * { background: #96dfff; }

tbody tr:nth-child(odd) > * { background: #d5f2ff; }

.downloadArea {
    padding: 40px 0 0 165px;
    background: url(../img/h/download.png) 0 0 no-repeat;
    min-height: 180px;
    width: 265px;
}

.downloadArea .button { margin: 1em 0 0.5em 0; }


/* article content */

article > p, article > h3, article > h4, article > figure, .exitpoll {
    margin-left: 22px;
    margin-right: 22px;
}

article > h2 {
    padding-top: 0.8em;
    margin-bottom: 0.8em;
}

.box header + h2 { padding-top: 0; }

article > p { margin: 0 45px 1.4em 22px !important; }

.box > ul { margin: 0.5em 22px 1em 4em; }

blockquote {
    font-size: 1.2em;
    font-style: italic;
    background: #000;
    padding: 6px 25px 10px 25px;
    position: relative;
    margin: 3em auto;
    width: 325px;
    color: #fff;
}

blockquote span {
    position: absolute;
    right: 6px;
    bottom: -28px;
    color: #B161F3;
    font-size: 0.85em;
    font-style: normal;
}

blockquote:before, blockquote:after {
    content: "";
    background-image: url(../img/h/quote.png);
    position: absolute;
    width: 385px;
    height: 37px;
}

blockquote:before {
    left: -10px;
    top: -12px;
}

blockquote:after {
    left: 0;
    bottom: -12px;
    background-position: right bottom;
}

h3 {
    color: #000;
    margin-bottom: 0.2em;
}

p {
    margin-bottom: 0.8em;
    line-height: 140%;
}

.box hgroup h3 {
    font-family: Arial, sans-serif;
    font-size: 1.15em;
}

hgroup h4 {
    font-weight: bold;
    line-height: 140%;
}

header p {
    font-size: 1.1em;
    margin: 0;
}

article p  {
    margin: 5px 0;
}

article table {
    background: none;
    border: solid 1px #000000;
}

article tr {
    border: none;
}

article td {
    background: #f1fbfd;
    border: solid 1px #000000;
    vertical-align: middle;
    text-align: center;
}

article tr:nth-child(odd)  > * {
    background: #f1fbfd;
}

/*article tr:last-child > * {
    background: none;
}*/

article th, article tr:first-child > * {
    background: #2c97cf;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
}

/* image alignment */
.alignLeft, .newsPreview { float: left; margin: 0.3em 1em 0.8em 0; }
article .alignLeft { margin-left: 22px; }
.alignRight { float: right; margin: 0.3em 0 0.8em 1em; }
article .alignRight { margin-right: 22px; }

/* forms */

input::-webkit-input-placeholder  {

}
input::-moz-placeholder {

}

.success, .fail, .info, .warning {
    overflow: hidden;
    margin: 1em 0;
    background: #DFF2BF;
    border-radius: 15px;
    padding: 10px;
}

.fail { background: #FFBABA; }
.info { background: #BDE5F8; }
.warning { background: #FEEFB3; }

.success:before, .fail:before, .info:before, .warning:before {
    content: "";
    width: 60px;
    height: 40px;
    float: left;
    background: url(../img/h/icons.png) no-repeat -30px -260px;
}

.fail:before { background-position: -30px -330px; }
.warning:before { background: url(../img/h/Attention.png) no-repeat 0 0; }
.info:before { background: url(../img/h/Info.png) no-repeat 0 0; }

.info:before, .warning:before { width: 40px; height: 38px; }

.fail strong { color: #820303; }
.success strong { color: #4C8304; }
.warning strong { color: #9F6000; }
.info strong { color: #00529B; }

/* game */

.toc {
    text-align: center;
}

.tocItem {
    width: 164px;
    height: 196px;
    padding: 7px;
    position: relative;
    margin: 0 5px 10px 0;
    background: url(../img/h/frames.png) 0 -1100px no-repeat;
    display: inline-block;
    text-align: left;
}

.tocItem a { text-decoration: none; }

.tocItem:nth-child(3n+3) { margin: 0; }

.tocItem b {
    bottom: 78px;
    left: 7px;
    width: 165px;
}

.tocItem span {
    display: block;
    color: #fff;
    padding: 5px 3px 0 5px;
    height: 4.2em;
    overflow: hidden;
    line-height: 135%;
}

.tocItem span:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 1em;
    background: url(../img/h/more.png) right -22px no-repeat;
}


/* tutorials */

.tips {
    margin: 2em 22px 4em;
    overflow: hidden;
}

.charMain .tips { margin-top: 0; }
.charMain .alignRight { margin-top: -5em; }

.tips h3 {
    margin: 0 0 1em 0;
}

.tip h4 { padding-top: 0.4em; }

.tip h4 a, .downloadArea a {
    font-size: 1.1em;
    padding-right: 15px;
    background: url(../img/h/more.png) no-repeat right 5px;
    color: #000;
}

.tips h3, .teaserTips h3 {
    padding-right: 45px;
    display: inline-block;
}

.beginner h3 { line-height: 30px; background: url(../img/h/skillLevel.gif) right top no-repeat; }
.advanced h3 { line-height: 30px; background: url(../img/h/skillLevel.gif) right -80px no-repeat; }

.tutList { padding-bottom: 2em; }

/* character background */

.charNav {
    margin: 0 0 3em 22px;
}

.charItem {
    width: 33%;
    height: 300px;
    position: relative;
    float: left;
    margin: 0 0 1em;
    text-align: center;
}

.charItem img { position: relative; top: 10px; }
.charItem:hover img { top: 0; }

.charItem .button {
    bottom: 0;
    position: absolute;
}

.charNotice {
    text-align: left;
    padding: 32px 22px 45px 22px;
    width: 175px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -112px;
    background: url(../img/h/charNotice.png) 0 0 no-repeat;
    background-size: 218px 100%;
    opacity: 0;
}

.charItem:hover .charNotice { opacity: 1; bottom: 50px; }

.charHigh {
    width: 125px;
    height: 150px;
    position: relative;
    float: left;
    margin: 0 0 1em;
    text-align: center;
}

.charHigh img { position: relative; top: 10px; width:100px; }
.charHigh:hover img, .selected img { top: 0; }

.charHigh .button {
    background: transparent url(../img/h/highscore_button.png) no-repeat;
    font-size: 0.9em;
    background-position: 0 0;
    bottom: 0;
    left: 5px;
    position: absolute;
    width:115px;
}

.charHigh:hover .charNotice { opacity: 1; bottom: 50px; }

.charHigh:hover .buttonS, .charHigh .selected {
    background-position: -112px 0;
}

.charHigh:hover .buttonS2 {

}

.charNotice:before {
    content: ""; background: url(../img/h/icons.png) 0 -788px no-repeat; width: 26px; height: 26px;
    position: absolute; top: -5px; left: 22px;
}

.nombackgroundsize .charNotice {
    background: #fff;
    padding: 15px;
    margin-left: -105px;
    border: 2px solid #000;
}

/* .charNotice .more { text-transform: none;  } */

.charInactive { cursor: help;  }
.charInactive img { opacity: 0.5;  }

.charNavBottom { clear: both;  }
.charNavBottom ul { text-align: center; padding-top: 3em;  }
.charNavBottom li { display: inline-block;  margin: 0 -8px 4em; }

.charNavBottom a {
    display: inline-block;
    background-image: url(../img/h/chars/charNavBottom.png);
    background-repeat: no-repeat;
    width: 116px;
    padding-top: 164px;
    text-align: center;
    opacity: 0.5;
    color: #6e717d;
    text-decoration: none;
    position: relative;
    top: 0;
}
.charNavBottom a:hover { top: -15px; }
.charNavBottom .current a:hover { top: 0; }
.charNavBottom .current a, .charNavBottom a:hover {
    opacity: 1;
    color: #000;
}
.charNavBottom b {
    position: relative;
    top: 20px;
}
.charNavBottom .elsword a { background-position: 0 0; }
.charNavBottom .rena a { background-position: 0 -178px; }
.charNavBottom .aisha a { background-position: 0 -356px; }
.charNavBottom .raven a { background-position: 0 -534px; }
.charNavBottom .eve a { background-position: 0 -712px; }
.charNavBottom .chung a { background-position: 0 -890px; }
.charNavBottom .ara a { background-position: 0 -1070px; }
.charNavBottom .elesis a { background-position: 0 -1246px; }
.charNavBottom .add a { background-position: 0 -1422px; }
.charNavBottom .luciel a { background-position: 0 -1602px; }
.charNavBottom .rose a { background-position: 0 -1778px; }
.charNavBottom .ain a { background-position: 0 -1958px; }
.charNavBottom .laby a { background-position: 0 -2136px; }

.charNavBottom .current a:after {
    content: "";
    width: 45px;
    height: 35px;
    background: url(../img/h/icons.png) -32px -778px no-repeat;
    position: absolute;
    top: -32px;
    left: 30px;
}

/* classe */

.checklist { margin: 0 22px 4em; }

.checklist h3 { font-size: 1.1em; }

.checklist ul { margin: 0 0 1em 3em; }
.checklist li {
    list-style: none;
    padding: 5px 0 5px 25px;
    background: url(../img/h/checklist.png) 0 0.3em no-repeat;
}

.checklist p { margin: 0 0 1.5em 3em; }

.classTree {
    margin: 0 22px 5em;
    padding-top: 40px;
    height: 300px;
    background: url(../img/h/classTree.png) 120px 110px no-repeat;
    position: relative;
}

.classTree li {
    width: 128px;
    text-align: center;
    list-style: none;
    background: url(../img/h/frames.png) -186px bottom no-repeat;
    overflow: hidden;
    position: absolute;
}

.classTree li, .classNav li { background: url(../img/h/frames.png) -186px bottom no-repeat; }

.classTree li a {
    color: #000;
    text-decoration: none;
    width: 114px;
    margin: 6px 7px 5px;
    padding: 0 0 140px;
    display: block;
    background-repeat: no-repeat;
    background-image: url(../img/h/chars/elswordClasses.png);
}

.classTree.rena { background-image: url(../img/h/chars/renaClasses.png); }
.classTree.aisha { background-image: url(../img/h/chars/aishaClasses.png); }
.classTree.raven { background-image: url(../img/h/chars/aishaClasses.png); }
.classTree.eve { background-image: url(../img/h/chars/eveClasses.png); }

.classTree .secondPathA, .classTree .secondPathB { background-position: -320px -1172px; }
.classNav .firstPathA, .classNav .firstPathB { background-position: -186px -1172px; }
.classTree .secondPathA a, .classTree .secondPathB a, .classNav a { padding: 140px 0 0 !important; }

.firstPathA { left: 240px; bottom: 150px }
.firstPathB { left: 380px; bottom: 150px }
.secondPathA { left: 240px; top: 200px; }
.secondPathB { left: 380px; top: 200px; }

.firstPathA a { background-position: 0 bottom; }
.firstPathB a { background-position: -114px bottom; }
.secondPathA a { background-position: -228px top; }
.secondPathB a { background-position: -342px top; }

.charTeaser {
    background: url(../img/h/teaserMediaArchive.png) no-repeat scroll right bottom transparent;
    margin: 0 -10px -13px 0;
    padding: 0 0 10px;
    min-height: 220px;
}

.charTeaser.elsword { background: url(../img/h/chars/elswordTeaser.png) no-repeat right bottom; }

.classNav {
    background: none;
    height: auto;
    padding-top: 0;
    margin-bottom: 2em;
}

.classNav li {
    position: static;
    float: left;
    margin: 0 8px 0 0;
    opacity: 0.6;
}

.classNav li.current, .classNav li:hover { opacity: 1; }

.classNav .secondPathA a { background-position: -228px top; }
.classNav .secondPathB a { background-position: -342px top; }
.classNav .firstPathA a { background-position: 0 top; }
.classNav .firstPathB a { background-position: -114px top; }

.combo {
    clear: both;
    margin: 0 22px 1em;
    overflow: hidden;
}

/* skills */

.skill {
    background: url(../img/h/skillBg.png);
    width: 265px;
    padding: 30px 40px 30px 30px;
    overflow: hidden;
    background-size: 327px 100%;
    min-height: 324px;
    position: relative;
    display: none;
}

.skill img { float: left; }
.skill p { margin: -5px 15px 1em 70px; }
.skill figure { margin-left: 70px; }
.skill .skillName { margin-right: 32px; }
.skill .close { right: 22px; top: 6px; }
.skillDesc { font-size: 0.9em; line-height: 145%; }

.skillTree {
    width: 410px;
    height: 724px;
    background: url(../img/h/skilltree.jpg);
    margin: 2em auto;
    cursor: pointer;
}

/* tutorials */

.tutorial {
    margin: 0 0 5em 45px;
    border-left: 2px solid #000;
}

.tutorial li {
    list-style: none;
    counter-increment: counter;
    position: relative;
    padding-left: 55px;
    margin: 0 0 2em;
}

.tutorial li:before {
    content: counter(counter);
    position: absolute;
    width: 94px;
    height: 58px;
    padding: 24px 0 0;
    background: url(../img/h/tutorialList.png);
    top: -25px;
    left: -48px;
    color: #fff;
    font-size: 2.2em;
    text-align: center;
    font-weight: bold;
}

.tutorial li:last-child { top: 25px; }

.tutorial li:last-child:before {
    content: "";
    background-position: 0 -82px;
}

.teaserTips .beginner h3 { background-position: right -170px; }
.teaserTips .advanced h3 { background-position: right -252px; }

.nav_siblings .button { float: right; }


/* account */
.accountInfos { float: left; }
.box .accountInfos > h2 {margin: 0 22px 0.8em;}

.accountInfos ul {
    list-style: none;
    margin: 0 22px 3em;
}

.accountInfos li {
    margin: 0 0 0.5em;
    line-height: 150%;
}

.accountInfos li a {
    color: #000;
    padding: 0 16px 0 0;
    background: url(../img/h/more.png) right 1px no-repeat;
    }

.characterDetails {
    margin: 0 22px;
    clear: both;
}

/* steam linking */
#steam .button { margin: 0 16px 0.8em; }

#steam a {position: relative;}
#steam .tooltip {
    background: #fff;
    border: 2px solid #fff;
    bottom: 25px;
    box-shadow: inset 2px 2px 0 #000,
                inset -2px -2px 0 #000,
                0 0 12px #000;
    display: block;
    padding: 10px;
    left: 10px;
    width: 120px;
    position: absolute;
}

#steam .tooltip .arrow {
    border-style: solid;
    border-width: 7px 7px 0 7px;
    border-color: #ffffff transparent transparent transparent;
    bottom: -9px;
    display: block;
    height: 0;
    position: absolute;
    left: 15px;
    width: 0;
}

#steam .tooltip .arrow:after,
#steam .tooltip .arrow:before {
    content: '';
    display: block;
    position: absolute;
}

#steam .tooltip .arrow:after {
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #000 transparent transparent transparent;
    left: -5px;
    bottom: 4px;
    z-index: 1;
}

#steam .tooltip .arrow:before {
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #fff transparent transparent transparent;
    left: -5px;
    bottom: 6px;
    z-index: 2;
}

.actionBox {
    width: 192px;
    height: 78px;
    float: left;
    margin-right: 8px;
    position: relative;
    background-repeat: no-repeat;
    background-position: 0 -590px, 7px 7px;
    text-align: center;
    padding-top: 90px;
}

.actionBox a { color: #fff; }

.actionBox.buyCoins { background-image: url(../img/h/frames.png), url(../img/h/buyCoins.jpg); }
.actionBox.redeemPoints {
    background-image: url(../img/h/frames.png), url(../img/h/redeemPoints.jpg);
}
.actionBox.redeemPoints input { width: 140px; position: absolute; top: 50px; left: 18px; }

.no-multiplebgs .actionBox.buyCoins { background-image: url(../img/h/buyCoins.jpg); }
.no-multiplebgs .actionBox.redeemPoints { background-image: url(../img/h/redeemPoints.jpg); }
.no-multiplebgs .actionBox {
    background-position: 7px 7px;
    background-color: #fff;
    border: 5px solid #000;
}

.actionBox span {
    left: 7px;
    top: 7px;
    width: 177px;
}

.actionBox .button {
    background-position: 0 -290px;
    width: 174px;
    margin: 0 auto;
}

.actionBox .button:hover { background-position: -174px -290px; }

/* character inspector */

.characterDetails {
    background: url(../img/h/charSelectBig.png) center top no-repeat;
    height: 724px;
    text-align: center;
    position: relative;
}

.characterDetails h2 { position: absolute; text-align: left; left: -22px; }

.characterDetails .charImg {
    position: absolute;
    height: 580px;
    width: 580px;
    margin: 0 0 0 -290px;
    top: 0;
    left: 50%;
}

.specs {
    display: none; position: static; background: none; float: none; height: auto; width: auto; padding: 0; margin: 0 auto; color: #fff;
}

.charActive .specs { display: block; }

.specs figcaption {
    background: none;
    color: #999;
    font-weight: normal;
    position: static;
    width: auto;
    font-size: 0.85em;
}

.specs .charName {
    color: #fff;
    font-size: 2.3em;
    padding-top: 5px;
}

.specs .charClass, .specs .charLevel { font-size: 1.15em; }

.ranking { padding-top: 8px; }
.ranking, .ranking * { vertical-align: middle; }

.rankingBar {
    display: inline-block;
    border: 1px solid #fff;
    padding: 1px;
    position: relative;
    width: 9px;
    height: 35px;
    margin-right: 3px;
}

.rankingBar span {
    display: block;
    position: absolute;
    bottom: 1px;
    width: 9px;
    background: #fff;
}

.rankingPoints {
    background: #fff;
    border-radius: 5px;
    padding: 5px 0;
    margin: 0 0 3px;
    font-size: 0.85em;
    font-weight: bold;
    display: inline-block;
}

.rankingPoints span {
    display: inline-block;
    padding: 0 10px;
    border-right: 1px solid #999;
    color: #000;
}

.rankingPoints span:last-child { border-right: none; }

.rankingPoints b {
    font-size: 1.5em;
    display: block;
}

.rankingPoints .r_pvp { color: #a202ca; }
.rankingPoints .r_exp { color: #e87301; }
.rankingPoints .r_social { color: #2bb800; }

/* character inventory */

.inventory {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 100;
    width: 100%;
}

.invTitle {
    color: #56cafa;
    font-size: 1.5em;
    margin-bottom: 1em;
}

.inventory ul {
    list-style: none;
    margin: 0;
}

.inventory li {
    list-style: none;
    float: left;
    width: 65px;
    height: 65px;
    margin: 0 8px 8px 0;
}

.invLeft, .invRight {
    background: url(../img/h/inventory.png) 0 0 no-repeat;
    width: 195px;
    height: 470px;
    float: left;
    text-align: left;
    padding: 20px 45px 20px 30px;
}

.invRight {
    background-position: right top;
    float: right;
    text-align: right;
    padding: 20px 30px 20px 45px;
}

.invRight li { float: right; }

/* character selector */

#charSelector {
    position: absolute;
    left: 0;
    top: 579px;
    width: 96%;
    height: 139px;
    padding: 0 2%;
    overflow: hidden;
}

#charSlide {
    position: absolute;
    width: 10000px;
}

#charSlide > div {
    background: url(../img/h/chars/charSelector.png) -10px 0;
    height: 139px;
    width: 139px;
    float: left;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    visibility: hidden;
    position: relative;
    cursor: pointer;
}

#charSlide .charBefore, #charSlide .charAfter { visibility: visible; }

#charSelector .elsword { background-position: 0 0; }
#charSelector .aisha { background-position: -20px -139px; }
#charSelector .eve { background-position: -60px -278px; }
#charSelector .rena { background-position: -60px -417px; }
#charSelector .raven { background-position: 0 -556px; }
#charSelector .chung { background-position: 0 -695px; }
#charSelector .ara { background-position: -40px -834px; }
#charSelector .elesis { background-position: -67px -973px; }
#charSelector .add { background-position: 0 -1112px; }
#charSelector .luciel { background-position: -5px -1251px; }
#charSelector .rose { background-position: -30px -1390px; }
#charSelector .ain { background-position: -40px -1529px; }
#charSelector .laby { background-position: -40px -1668px; }

#charSelector .charActive { width: 290px; background: #000; position: relative; visibility: visible; cursor: default; }

#charSelector .charActive:before, #charSelector .charActive:after, .charBefore:before, .charAfter:after {
    content: "";
    width: 55px;
    height: 139px;
    position: absolute;
    top: 0;
    left: -44px;
    background: url(../img/h/charSelectBig.png) 0 -751px;
    opacity: 1;
    z-index: 1;
}

#charSelector .charActive:after, .charAfter:after {
    left: auto;
    right: -44px;
    background-position: -57px -751px;
}

.prevChar, .nextChar {
    position: absolute;
    top: 10px;
    left: 260px;
    width: 25px;
    height: 35px;
    background: url(../img/h/charSelectBig.png) -545px -868px no-repeat;
    cursor: pointer;
    z-index: 10;
}

.nextChar {
    left: 540px;
    background-position: -830px -870px;
}

/* ie */

.ie7 div.timer, .ie8 div.timer, .ie7 details > *, .ie8 details > *, .ie7 .charNotice, .ie8 .charNotice { display: none; }
.ie7 .dropdown > ul { min-height: 5px; }
.ie7 .slidecontrol li.active { margin-top: 0; }
.ie7 .slidecontrol { bottom: -15px; }
.ie7 .slidecontrol li { display: inline; margin-top: 13px; }
.ie7 .highscore input[type=submit], .ie7 .search input[type=submit] { color: transparent; }
.ie7 .highscore li span, .ie8 .highscore li span { margin-right: 0.5em; color: #1A679D; max-width: 125px; }
.ie7 #nav_main li, .ie7 #paginator li, .ie7 .tips h3, .ie7 .breadcrumbs li, .ie7 .ranking *, .ie7 .charNavBottom li, .ie7 #nav_footer > ul > li { display: inline; }
.teaser h4 a { background: none; }
.ie7 .boxIntro { margin: -31px 0 30px !important; }
.ie7 .dropdown, .ie7 .dropdown * { zoom: 1; }
.ie7 .dropdown ul ul li { display: block !important; }
.ie7 .dropdown > ul > li > ul { /* top: -8px; */ top: 96px; }
.ie7 #nav_footer.dropdown > ul > li > ul { top: 0; }
.ie7 .formBox input, .ie8 .formBox input { width: 95%; }
.ie7 .formBox input.button, .ie8 .formBox input.button { width: 226px; }
.ie7 .charPreview .row div { float: left; margin-right: 4px; }
.ie7 details > summary, .ie8 details > summary, .ie7 .ranking b, .ie7 .charItem:hover .charNotice, .ie7 .charHigh:hover .charNotice, .ie8 .charItem:hover .charNotice, .ie8 .charHigh:hover .charNotice { display: block; }
.ie7 .extraInfo, .ie8 .extraInfo { background: #98d7fd; border: 5px solid #000; }
.ie7 #shade, .ie8 #shade { filter: alpha(opacity = 60); }
.ie7 .poll, .ie8 .poll { margin: 0 -18px -22px 0; }
.ie7 .teaser, .ie8 .teaser, .ie7 #account *{ zoom: 1; }
.ie8 .search input[type=search] { width: 160px; }
.ie7 .rankingBar span { left: 1px; }
.ie7 .box_full hgroup { margin-top: -8px; }
.ie7 .manga_small * { display: inline; margin-right: 8px; }
.ie7 .manga_small *, .ie8 .manga_small * { width: 52px; }
.ie7 .tocItem { display: inline; cursor: pointer; }
.ie7 .charItem  .button { left: 0; }
.ie7 .charHigh  .button { left: 0; }
.ie7 .classNav li, .ie8 .classNav li { margin-right: 7px; }
.ie7 .tutorial { border-left: none; }
.ie7 .tutorial li { list-style-type: decimal; padding-left: 0; }
.ie7 select, .ie8 select { width: 100%; }

/*
 * Media queries for responsive design https://github.com/shichuan/mobile-html5-boilerplate/wiki/The-Style
 */

/*    Large Assets */
@media only screen and (min-width: 768px) {

    /* performance optimization */

}/*/mediaquery*/

/*        Tablet Layout: 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {


}/*/mediaquery*/

/*        Small Mobile Layout: 320px */
@media only screen and (max-width: 767px) {


}/*/mediaquery*/

/*        Wide Mobile Layout: 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {


}/*/mediaquery*/


/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

    /* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image)
        #header { background: url(headerRatio1_5.png); background-size: 66.67%; }*/

}/*/mediaquery*/


/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
    -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
    a, a:visited { color: #444 !important; text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
    tr, img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
}/*/mediaquery*/

/* fixes */

article#news p {font-family: Arial, sans-serif; font-weight: 300;}

.charName, .charClass {overflow: hidden;}

section#receipt h3 {
    padding: 1em 4em;
}

section#receipt table {
    margin: 2em auto;
    width: 90%;
}

section#receipt table img {
    display: block;
    margin: 0 auto;
    width: 64px;
    height: 64px;
}

#charImgLarge img {
    max-width: 600px;
    max-height: 550px;
}

/* captcha */

#captchaContainer {
    margin: 10px 0 20px 0;
}

#captchaContainer img {
    border:1px solid #B28A45;
    margin:10px 0;
}

#captchaImageContainer {
    position:relative;
    width:255px !important;
    margin:0 auto;
}

#captchaImageContainer img {
    border:1px solid #000;
    margin:0;
    color:black;
}

#reloadCaptcha {
    position:absolute;
    right:0;
    top:0;
    padding:0 1px 2px 2px;
    background-color:#fff;
}

/* end captcha*/

/* teaser - highscore */


.highscore table {
    border: 0;
    background-color: white;
    margin-left: 0;
}

.highscore tbody tr:nth-child(2n+1) > * {
    background: white;
}

.highscore tbody tr > * {
    background: white;
}

.highscore tbody tr.searchResult td {
    background-color: yellow;
}

.highscore th {
    border: 0;
    border-bottom: 3px solid #000000;
    background-color: white;
    font-size:1.2em;
    font-weight: 900;
    padding: 0.2em 0.6em;
    min-height: 1.2em;
    text-align:center;
}

.highscore th.score {
    text-align: right;
}

.highscore td {
    border: 0;
    color: #000000;
    font-size: 1.1em;
    margin: -0.1em 0 0;
    padding: 0;
    vertical-align: middle;
    text-align:center;
}

.highscore img {
    max-height: 40px;
}

.highscore th.score {
    text-align:right;
}

.highscore td.score {
    color: #1A679D;
    font-size: 1em;
    text-align:right;
}

.tabs {
    margin: 0 0 0 1em !important;
}

.webcomic figure {
    float: left;
    background: url(../img/h/webcomicframe.png) no-repeat;
    margin: 0 6px 6px 0;
    width: 90px;
    height: 125px;
    padding: 4px;
    position: relative;
}

.webcomic figure:hover figcaption, .webcomic figure:focus figcaption {
    padding: 0.2em 0 0.6em 0;
}

.webcomic .box figure:nth-child(5n+5) {
    margin-right: 0;
}

.webcomic figure img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.webcomic figure a {
    overflow: hidden;
    display: block;
    height: 117px;
}

.webcomic figcaption {
    bottom: 9px;
    width: 93px;
    left: 3px;
}

.box .webcomic {
    margin: 0 22px 2em;
}

.webComicPage {
    width: 580px;
    height:820px;
}

.box .webcomic a.webcomic{
    margin: 0;
}

.searchError {
    color: red;
    font-weight: bold;
}

.buddy-list {
    width:915px;
    margin-left: 15px;
}

.buddy-list table {
    border: 0;
    margin: 0;
}

.buddy-list tr {

}

.buddy-list th {
    border: 0;
}

.buddy-list td {
    border: 0;
}

.buddy-list #tabs {
    margin-top: 10px;
}

.buddy-list p {
    margin-left: 15px;
    width:915px;
}

.buddy-list .header {
    border: 1px solid black;
    width: 885px;
    background-color: white;
    margin-left: 15px;
}

.buddy-list .summary {
    border: 1px solid black;
    margin-left: 15px;
    width: 885px;
    background-color: white;
}

.bite-link {
    border: 1px solid black;
    margin-top: 20px;
    margin-left: 15px;
    width: 885px;
    background-color: white;
}

.slidetext span
{
    font-weight: bold;
    color: #000000;
}

.happyhour .stoerer{
    position:absolute;
    left:155px;
    top:10px;
    width:115px;
    height:115px;
}

.happyhour .slidetext{
    height:250px;
    color:white;
}

.happyhour header {
    margin-top: 40px;
    font-size: 16px;
    color: yellow;
}

.happyhour p {
    font-size: 15px;
    margin-bottom: 0.7em;
}

.happyhour .slidetext span {
    color:yellow;
    text-transform: uppercase;
    font-weight: bold;
}

.happyhour .slidetext.pl p, .happyhour .slidetext.es p {
    font-size: 14px;
    margin-bottom: 0.7em;
}

.happyhour .button {
    position:absolute;
    bottom:0px;
    text-align:center;
}

.happyhour .button.fr {
    position:absolute;
    bottom:0px;
    font-size:14px;
    height: 45px;
    padding-top: 27px;
    width: 215px;
}

.happyhour .button.en {
    position:absolute;
    bottom:0px;
    font-size:13px;
    height: 45px;
    padding-top: 27px;
    width: 215px;
}


.happyhour .button.es {
    position:absolute;
    bottom:0px;
    font-size:15px;
    height: 51px;
    padding-top: 17px;
    width: 215px;
}

.happyhour .button.it {
    position:absolute;
    bottom:0px;
    font-size:15px;
    height: 45px;
    padding-top: 27px;
    width: 215px;
}

.happyhour .button.de {
    position:absolute;
    bottom:0px;
    font-size:17px;
    height: 48px;
    padding-top: 25px;
    width: 215px;
}

.happyhour .button.pl {
    position:absolute;
    bottom:0px;
    font-size:13px;
    height: 45px;
    padding-top: 27px;
    width: 215px;
}

.highNav {
    padding-left: 70px;
    padding-right: 70px;
}

/* layout chars left/right */

.psychicTracer #container:before {
    width: 840px;
    height: 894px;
    background: url(../img/h/layout/Add_Psychic_Tracer.png) no-repeat scroll 105px 82px;
    left: -837px;
    top: -21px;
}

.psychicTracer .pageIntro:before {
    width: 60px;
    height: 60px;
    background: url(../img/h/layout/Add_Psychic_Tracer.png) no-repeat scroll -732px -99px;
    left: 0;
    top: 160px;
    z-index: 4;
}

.lunaticPsyker #container:after {
    width: 587px;
    height: 962px;
    background: url(../img/h/layout/Add_Lunatic_Psyker.png) no-repeat scroll -61px -10px;
    right: -584px;
    top: 6px;
}

.lunaticPsyker .pageIntro:after {
    width: 100px;
    height: 125px;
    background: url(../img/h/layout/Add_Lunatic_Psyker.png) no-repeat scroll 36px -74px;
    right: 0;
    top: 70px;
}

.elswordRenewal #container:before {
    width: 748px;
    height: 711px;
    background: url(../img/h/layout/Elsword_Renewal.png) no-repeat scroll 0px 0px;
    left: -722px;
    top: 138px;
}

.elswordRenewal .pageIntro:before {
    display: none;
}

.renaRenewal #container:after {
    width: 446px;
    height: 796px;
    background: url(../img/h/layout/Rena_Renewal.png) no-repeat scroll 0px 0px;
    right: -403px;
    top: 43px;
}

.renaRenewal .pageIntro:after {
    display: none;
}

.ainThirdLeft #container:before {
    width: 748px;
    height: 820px;
    background: url(../img/h/layout/Ain_3rd_Left.png) no-repeat scroll 0px 0px;
    left: -480px;
    top: 0px;
}

.ainThirdLeft .pageIntro:before {
    display: none;
}

.ainThirdRight #container:after {
    width: 835px;
    height: 875px;
    background: url(../img/h/layout/Ain_3rd_Right.png) no-repeat scroll 0px 0px;
    right: -542px;
    top: -5px;
}

.ainThirdRight .pageIntro:after {
    display: none;
}


.ainUpdateLeft #container:before {
    width: 748px;
    height: 900px;
    background: url(../img/h/layout/Ain_Left.png) no-repeat scroll 0px 0px;
    left: -519px;
    top: 0px;
}

.ainUpdateLeft .pageIntro:before {
    display: none;
}

.ainUpdateRight #container:after {
    width: 546px;
    height: 930px;
    background: url(../img/h/layout/Ain_Right.png) no-repeat scroll 0px 0px;
    right: -516px;
    top: 0px;
}

.ainUpdateRight .pageIntro:after {
    display: none;
}

.aishaRenewal #container:before {
    width: 438px;
    height: 725px;
    background: url(../img/h/layout/Aisha_Renewal.png) no-repeat scroll 0px 0px;
    left: -420px;
    top: 130px;
}

.aishaRenewal .pageIntro:before {
    display: none;
}

.ravenRenewal #container:after {
    width: 595px;
    height: 672px;
    background: url(../img/h/layout/Raven_Renewal.png) no-repeat scroll 0px 0px;
    right: -540px;
    top: 120px;
}

.ravenRenewal .pageIntro:after {
    display: none;
}

.chungRenewal #container:before {
    width: 657px;
    height: 690px;
    background: url(../img/h/layout/Chung_Renewal.png) no-repeat scroll 0px 0px;
    left: -628px;
    top: 100px;
}

.chungRenewal .pageIntro:before {
    display: none;
}

.eveRenewal #container:after {
    width: 556px;
    height: 793px;
    background: url(../img/h/layout/Eve_Renewal.png) no-repeat scroll 0px 0px;
    right: -520px;
    top: 60px;
}

.eveRenewal .pageIntro:after {
    display: none;
}

.araRenewal #container:before {
    width: 487px;
    height: 951px;
    background: url(../img/h/layout/Ara_Renewal.png) no-repeat scroll 0px 0px;
    left: -460px;
    top: 0px;
}

.araRenewal .pageIntro:before {
    display: none;
}

.elesisRenewal #container:after {
    width: 386px;
    height: 750px;
    background: url(../img/h/layout/Elesis_Renewal.png) no-repeat scroll 0px 0px;
    right: -358px;
    top: 180px;
}

.elesisRenewal .pageIntro:after {
    display: none;
}

.addRenewal #container:before {
    width: 507px;
    height: 679px;
    background: url(../img/h/layout/Add_Renewal.png) no-repeat scroll 0px 0px;
    left: -474px;
    top: 140px;
}

.addRenewal .pageIntro:before {
    display: none;
}

.lucielRenewal #container:after {
    width: 831px;
    height: 788px;
    background: url(../img/h/layout/Luciel_Renewal.png) no-repeat scroll 0px 0px;
    right: -750px;
    top: 6px;
}

.lucielRenewal .pageIntro:after {
    display: none;
}


.roseBaseLeft #container:before {
    width: 579px;
    height: 898px;
    background: url(../img/h/layout/Rose_Base_Left.png) no-repeat scroll 0px 0px;
    left: -562px;
    top: 34px;
}

.roseBaseRight #container:after {
    width: 678px;
    height: 820px;
    background: url(../img/h/layout/Rose_Base_Right.png) no-repeat scroll 0px 0px;
    left: 874px;
    top: 73px;
}

.heavyBarrel #container:before {
    width: 780px;
    height: 797px;
    background: url(../img/h/layout/Rose_Heavy_Barrel.png) no-repeat scroll 0px 0px;
    left: -651px;
    top: 60px;
}

.stormTrooper #container:after {
    width: 761px;
    height: 913px;
    background: url(../img/h/layout/Rose_Storm_Trooper.png) no-repeat scroll -248px 0px;
    left: 910px;
    top: -2px;
}
.stormTrooper .pageIntro:before {
    width: 1009px;
    height: 300px;
    background: url(../img/h/layout/Rose_Storm_Trooper.png) no-repeat scroll 0px 0px;
    left: 662px;
    top: -2px;
    z-index: 0 !important;
}

.crimson #container:before {
    width: 446px;
    height: 869px;
    background: url(../img/h/layout/Rose_Crimson.png) no-repeat scroll 0px 0px;
    left: -413px;
    top: 73px;
}
.bloodia #container:after {
    width: 585px;
    height: 868px;
    background: url(../img/h/layout/Rose_Bloodia.png) no-repeat scroll 0px 0px;
    left: 858px;
    top: 74px;
}

.freyja #container:before {
    width: 581px;
    height: 826px;
    background: url(../img/h/layout/Rose_Freyja.png) no-repeat scroll 0px 0px;
    left: -546px;
    top: 73px;
}
.valkyrie #container:after {
    width: 719px;
    height: 938px;
    background: url(../img/h/layout/Rose_Valkyrie.png) no-repeat scroll 0px 0px;
    left: 841px;
    top: 1px;
}
.valkyrie .pageIntro:after {
    width: 75px;
    height: 100px;
    background: url(../img/h/layout/Rose_Valkyrie.png) no-repeat scroll -25px -200px;
    left: 866px;
    top: 201px;
}

.metalHeart #container:before {
    width: 556px;
    height: 882px;
    background: url(../img/h/layout/Rose_Metal_Heart.png) no-repeat scroll 0px 0px;
    left: -500px;
    top: 38px;
}
.optimus .pageIntro:before {
    width: 917px;
    height: 300px;
    background: url(../img/h/layout/Rose_Optimus.png) no-repeat scroll 0px 0px;
    left: 731px;
    top: 1px;
    z-index: 0 !important;
}
.optimus #container:after {
    width: 742px;
    height: 936px;
    background: url(../img/h/layout/Rose_Optimus.png) no-repeat scroll -175px 0px;
    left: 906px;
    top: 1px;
}

.LabyRight #container:after {
    width: 678px;
    height: 820px;
    background: url(../img/h/layout/Laby_right.png) no-repeat scroll 0px 0px;
    left: 862px;
    top: 138px;
}

.wallpaper {
    height: auto;
    background: 0;
}


.wallpaper div {
    background-image: url("../img/h/frames.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: -281px 0;
    width:165px;
    padding:7px;
}

.wallpaper figcaption {
    bottom:auto;
    top:117px;
    left:auto;
}

.wallpaper ul {
    margin-top:5px;
    margin-left:25%;
    list-style-type: none;
}

.wallpaper li a{
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.wallpaper a.wallpaper_link{
    height:20px;
}

.cashback .stoerer{
    position:absolute;
    left:155px;
    top:10px;
    width:115px;
    height:115px;
}

.cashback .slidetext{
    height:250px;
    color:white;
    margin-top:43px;
}


.cashback .slidetext.fr{
    height:250px;
    color:white;
    margin-top:43px;
    width:285px;
    left: 280px;
}


.cashback header {
    margin-top: 40px;
    font-size: 16px;
    color: yellow;
}

.cashback p {
    font-size: 13px;
    margin-bottom: 0.7em;
}

.cashback .button {
    position:absolute;
    bottom:30px;
    text-align: center;
}

.cashback .slidetext span {
    color: #FFFF00;
    font-weight: bold;
}

#adbanner {
    position: absolute;
    width: 160px;
    height: 600px;
    top: 880px;
    right: -200px;
    z-index: 1;
}