/*
############################
#### 	RESET CSS
############################
*/

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

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroupy, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

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

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

/*### WIDGET RESET###*/

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: 'Trebuchet MS';
    font-size: 14px;
}

.ui-widget-content {
    color: #2e3031;
}

.ui-widget-content a {
    color: #117DAB
}

/*### RESET END ###*/

body {
    background: #000 url('/website/faces/javax.faces.resource/aion_background_update_8_4.jpg?ln=images') center 32px no-repeat;
    color: #2e3031;
    font: 14px/140% 'Trebuchet MS';
}

.navmenu ul li a,
login_box,
h3,
h4,
.community_box h4,
.community_box h5,
a.community_link,
.registerform h2,
#registerSteps,
#registerInformation label,
#registerFormRight h4,
#registerSystemRequirements h4,
#registerSystemRequirements table th,
#ranking table th,
.showcase-caption h2,
.register_content h2,
.emailconfirmSteps h4,
#emailconfirm_Helpbox h4,
.confirmation_content h4,
.recoverpassform label,
.recoverusernamesform label,
.loginform label,
.header form,
.readytoplay_links,
.header .locale_switcher select,
#helpFaq a,
#helpSupport a,
#socialContainer,
.checktokenform h2,
.login_link,
h3 a.see_all,
.highlighted_area button, .highlighted_area a.js_download,
#ranking table > tbody tr.separator_head,
#ranking table > tbody tr td:nth-child(1),
#mapNavi {
    font-family: 'PT Sans Narrow', Arial, sans-serif;
    font-weight: bold;
}

strong {
    font-weight: bold;
}

a {
    cursor: pointer;
    color: #117dab;
    text-decoration: none;
}

a.disabled {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button:focus,
a:focus {
    outline: 0;
}

.login_link,
.login_link:hover,
span.arrow,
#twtr-widget-1,
a.community_link span.community_link_arrow,
a.community_link:hover span.community_link_arrow,
#registerSteps li,
#registerInformation,
#registerFormLeft input,
#registerFormLeft input.button,
#registerFormLeft input.button:hover,
#registerFormRight li,
#emailconfirmError,
#loginForm input,
#loginForm input .button,
#loginForm input .button:hover,
#boardForm input,
#boardForm input .button,
#boardForm input .button:hover,
.loginform input.button,
.loginform input,
.recoverusernamesform input,
.recoverpassform input,
.checktokenform input,
.checktokenform input.button,
input,
button:after,
button:hover:after,
a.btn:after,
a.btn:hover:after,
button[disabled=disabled]:after,
button:disabled:after,
button[disabled=disabled]:hover:after,
button:disabled:hover:after,
a.btn.disabled:after,
a.btn.disabled:hover:after,
.highlighted_area button span.download_sign,
.icon.info {
    background: url('/website/faces/javax.faces.resource/aion_sprite.png?ln=images') 0 0 no-repeat;
}

img.right {
    float: right;
    margin: 0 0 15px 15px;
}

img.left {
    float: left;
    margin: 0 15px 15px 0;
}

.header {
    color: #fff;
    height: 25px;
    margin: 0;
    padding: 5px 0;
    text-align: center;
    position: relative;
    width: 100%;
    z-index: 50;
}

.head_options {
    margin: 0 auto;
    width: 960px;
}

.header .gf {
    background: url('/website/faces/javax.faces.resource/gf_logo.png?ln=images') no-repeat;
    float: left;
    height: 20px;
    width: 96px;
}

.header form {
    float: right;
    text-transform: uppercase;
}

table {
    width: 100%;
}

#content .newsletter table {
    width: auto;
}

.header .locale_switcher select {
    background-color: #2e3031;
    border: 1px solid #787878;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 0 5px;
    padding: 3px;
    width: 165px;
}

.header a.veteran_link {
    color: #fff;
    font-size: 11px;
    left: 5px;
    position: absolute;
    top: 5px;
}

#localeswitcher,
.locale_switcher {
    display: none;
}

a.mmoflag {
    cursor: pointer;
}

#container {
    margin: 0 auto;
    min-height: 800px;
    position: relative;
    width: 1060px;
}

a.logo {
    display: block;
    height: 215px;
    margin: 0 0 0 234px;
    width: 579px;
}

.img_right {
    float: right;
    margin: 0 0 10px 10px;
}

.img_right.faq {
    margin: 20px 30px 10px 0;
}

.img_left {
    float: left;
    margin: 0;
}

form {
    position: relative;
}

input {
    border-radius: 3px;
    border: 1px solid #717171;
    padding: 3px;
}

input:focus {
    -moz-box-shadow: 0px 0px 5px #117dab;
    -webkit-box-shadow: 0px 0px 5px #117dab;
    box-shadow: 0px 0px 5px #117dab;
}

/*link-button fix - start*/
button {
    padding: 5px 10px;
}
/*link-button fix - ende*/

button,
a.btn {
    height: 28px;
    display: inline-block;
    min-width: 150px;
    background-color: #000;
    border: none;
    color: #fff;
    cursor: pointer;
    font: 16px 'PT Sans Narrow', sans-serif;
    position: relative;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 10px;
}
button {
    line-height:25px;
}
a.btn {
    line-height:28px;
}
button:after,
a.btn:after {
    background-position: -48px -1px;
    content: '';
    display: block;
    height: 30px;
    margin-right: -48px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
}

button:hover,
a.btn:hover {
    background-color: #03b7ff;
    text-decoration: none;
}

button:hover:after,
a.btn:hover:after {
    background-position: 0px -1px;
}

button[disabled=disabled],
button:disabled,
button[disabled=disabled]:hover,
button:disabled:hover,
a.btn.disabled,
a.btn.disabled:hover {
    color: #A09A9A;
    background-color: #dbdbdb;
    cursor: default;
}

button[disabled=disabled]:after,
button:disabled:after,
button[disabled=disabled]:hover:after,
button:disabled:hover:after,
a.btn.disabled:after,
a.btn.disabled:hover:after {
    background-position: -582px -43px;
}

#animationLeft {
    left: -219px;
    position: absolute;
    top: -7px;
    width: 276px;
}

#animationRight {
    height: 228px;
    position: absolute;
    right: -300px;
    top: 201px;
    width: 254px;
}

#animationCenter {
    height: 329px;
    left: 35px;
    position: absolute;
    top: -7px;
    width: 988px;
    z-index: -1;
}

/* ***************************** Social Links ******************************* */
#socialContainer {
    left: -9px;
    position: fixed;
    top: 265px;
    z-index: 1001;
}

.social_btn {
    border: 5px solid black;
    color: #000;
    float: none;
    font-size: 20px;
    height: 40px;
    margin-bottom: 2px;
    min-width: 40px;
    padding: 0px;
    position: absolute;
    width: 44px;
    background-color: #fff;
}

.social_txt {
    display: inline-block;
    line-height: 40px;
    margin: 0 0 0 40px;
    overflow: hidden;
    padding: 0 5px;
    position: relative;
    text-decoration: none;
    text-align: left;
    text-overflow: clip;
    width: auto;
    white-space: nowrap;
}

.social_btn_icon {
	height: 32px;
	width: 32px;
	background: url('/website/faces/javax.faces.resource/social_small.png?ln=images') no-repeat content-box content-box;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 4px;
	padding: 4px;
}

.facebook_btn {
    left: 0;
    top: 0;
}
.facebook_btn .social_btn_icon {
    background-position: 0 0;
}

.twitter_btn {
    left: 0;
    top: 52px;
}
.twitter_btn .social_btn_icon {
    background-position: -32px 0;
}


.youtube_btn {
    left: 0;
    top: 104px;
}
.youtube_btn .social_btn_icon {
    background-position: -64px -32px;
}

.instagram_btn {
    left: 0;
    top: 156px;
}
.instagram_btn .social_btn_icon {
    background-position: -32px -32px;
}

.discord_btn {
    left: 0;
    top: 208px;
}
.discord_btn .social_btn_icon {
    background-position: 0 -32px;
}

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

/*
############################
#### 	NAVIGATION
############################
*/

.navmenu {
    background-color: #000;
    height: 45px;
    margin: 11px 35px 0;
    padding: 10px 10px 0 10px;
    position: relative;
}

.navmenu ul {
    background-color: #fff;
    margin: 0 auto;
    height: 44px;
    text-align: center;
    width: 100%;
}

.navmenu ul li {
    float: left;
    margin: 0 45px;
    position: relative;
}

.navmenu ul li a {
    font-size: 24px;
    color: #000;
    line-height: 44px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}

/*.no-fontface .navmenu ul li a {
    font-family: Arial, sans-serif;
    font-size: 18px;
}*/

body.lang_fr .navmenu ul li a {
    padding: 0 14px;
}

body.lang_tr .navmenu ul li a,
body.lang_es .navmenu ul li a {
    padding: 0 19px;
}

.navmenu ul li a:hover,
.navmenu ul li.active a,
.navmenu ul li.menu_active a {
    background-color: #17a4de;
    color: #fff;
}
#overviewLink.active{
    display: none;
}

span.external_link {
    background: url('/website/faces/javax.faces.resource/external_link.gif?ln=images') no-repeat;
    display: block;
    height: 9px;
    position: absolute;
    right: 13px;
    top: 10px;
    width: 9px;
}

.lang_fr span.external_link {
    right: 2px;
}

.navmenu ul li a:hover span.external_link {
    background: url('/website/faces/javax.faces.resource/external_link.gif?ln=images') -9px 0px no-repeat;
}

.navmenu li:first-child {
    background: none;
    padding-left: 40px;
}
.navmenu li:first-child > ul {
    padding-left: 40px !important;
}
.navmenu li:first-child > ul:before {
    margin-left: 40px;
}

.lang_fr .navmenu li:first-child,
.lang_es .navmenu li:first-child {
    padding-left: 20px;
}

.lang_fr .navmenu li:first-child > ul,
.lang_es .navmenu li:first-child > ul {
    padding-left: 20px !important;
}
.lang_fr .navmenu li:first-child > ul:before,
.lang_es .navmenu li:first-child > ul:before {
    margin-left: 20px;
}


.navmenu ul ul li:first-child {
    padding-left: 0;
}

#toplevel {
    left: 0;
    position: absolute;
    top: 0;
}

.navmenu ul ul {
    left: -9999px;
    position: absolute;
    width: 200px;
    z-index: 1000;
}

.navmenu:hover ul ul {
    left: 0px;
    top: 30px;
}

.navmenu ul#menu ul li {
    background: url('/website/faces/javax.faces.resource/nav_hor_separator.png?ln=images') no-repeat center;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    display: block;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.navmenu ul#menu ul li:first-child {
    border-top: 1px solid #000;
}

.navmenu ul#menu ul li:last-child {
    border-bottom: 1px solid #000;
}

.navmenu ul ul li a {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    margin: 0 10px 0 0;
}

.navmenu ul ul:before {
    background: url('/website/faces/javax.faces.resource/nav_arrow_top.png?ln=images') no-repeat;
    content: "";
    height: 21px;
    left: 15px;
    position: absolute;
    top: -10px;
    width: 21px;
    z-index: 1000;
}

.navmenu.navlink {
    color: white;
    background-color: black;
    font-size: 80%;
    font-weight: 700;
    text-decoration: none;
}

.navmenu a.highlighted {
    color: #000;
}

/* Dropdown */
#menuPositioner {
    width: 100%;
    position: relative;
}

#menuHolder {
    width: 100%;
    position: relative;
}

#menu {
    margin: 0;
    list-style: none;
    position: relative;
    z-index: 1000;
    position: relative;
}

#menu li {
    float: left;
    margin-right: 1px;
}

#menu li a {
    display: block;
    float: left;
}

#menu table {
    border-collapse: collapse;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu li a:hover {
    z-index: 200;
    position: relative;
}

#menu li:hover {
    position: relative;
    z-index: 200;
}

#menu li.current a {
    color: #fff;
    background: #840;
}

#menu li.current a.sub {
    color: #fff;
}

#menu :hover ul {
    left: 0;
    top: 44px;
    width: auto;
    background: #fff;
}

/* keep the 'next' level invisible by placing it off screen. */
#menu ul,
#menu :hover ul ul {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu :hover ul ul:before {
    background: url('/website/faces/javax.faces.resource/nav_arrow_top.png?ln=images') no-repeat;
    content: "";
    height: 11px;
    position: absolute;
    left: 10px;
    top: -11px;
    width: 21px;
}

#menu :hover ul li {
    margin: 0;
}

#menu :hover ul li a {
    width: 100%;
    padding: 0;
    text-indent: 10px;
    background: #fff;
    color: #3c474c;
    line-height: 30px;
    text-align: left;
}

#menu :hover ul :hover {
    background: #233440;
    color: #fff;
    text-shadow: transparent;
}

#menu :hover ul li.currentsub a {
    background: #840;
    color: #fff;
}

#menu :hover ul :hover ul li a {
    width: 100px;
    padding: 0;
    text-indent: 10px;
    background: #3e3e3e;
    color: #ccc;
}

#menu :hover ul :hover ul :hover {
    background-color: #d70;
    color: #fff;
}

.breadcrumb {
    background-color: black;
    color: white;
    font: 10px/13px 'Trechbuchet MS', Arial;
    margin: 0 0 0 35px;
    padding: 3px 10px;
    width: 970px;
}

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

#ranking .tabs {
    margin: 0;
    width: auto;
}

.tabs > ul#tab_content,
.tabs > ul#tab_content_comming {
    font-family: 'PT Sans Narrow', Arial, sans-serif;
    font-weight: bold;
    border-top: 8px solid #000;
    border-bottom: 6px solid #000;
    height: 44px;
    padding: 0;
    text-align: center;
}

.tabs > ul#tab_content > li,
.tabs > ul#tab_content_comming > li {
    display: inline-block;
    padding: 0;
}

.tabs > ul#tab_content > li > a,
.tabs > ul#tab_content_comming > li > a {
    color: #000;
    display: block;
    font-size: 24px;
    line-height: 44px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}
.lang_es  .tabs > ul#tab_content > li > a,
.lang_es  .tabs > ul#tab_content_comming > li > a {
    padding: 0 19px;
}

.tabs > ul#tab_content > li > a:hover,
.tabs > ul#tab_content > li.active {
    background-color: #17a4de;
    color: #fff;
}

.tabs > ul#tab_content > li.active > a {
    color: #fff;
}

ul#dropdown {
    border: 2px solid #000;
    display: inline-block;
    background-color: #fff;
    padding: 4px 45px 4px 5px;
    position: relative;
}

ul#dropdown:before,
ul#dropdown:after {
    content: '';
    display: block;
    position: absolute;
}

ul#dropdown:after {
    background: #5ccaf7; /* Old browsers */
    background: -moz-linear-gradient(top, #5ccaf7 0%, #0e6b91 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5ccaf7), color-stop(100%, #0e6b91)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5ccaf7 0%, #0e6b91 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5ccaf7 0%, #0e6b91 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5ccaf7 0%, #0e6b91 100%); /* IE10+ */
    background: linear-gradient(to bottom, #5ccaf7 0%, #0e6b91 100%); /* W3C */
    cursor: pointer;
    height: 25px;
    right: 1px;
    top: 1px;
    width: 25px;
    z-index: 0;
}

ul#dropdown:hover:after {
    background: #0e6b91; /* Old browsers */
    background: -moz-linear-gradient(top, #0e6b91 0%, #5ccaf7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0e6b91), color-stop(100%, #5ccaf7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0e6b91 0%, #5ccaf7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0e6b91 0%, #5ccaf7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0e6b91 0%, #5ccaf7 100%); /* IE10+ */
    background: linear-gradient(to bottom, #0e6b91 0%, #5ccaf7 100%); /* W3C */
}

ul#dropdown:before {
    border-style: solid;
    /* border-style: inset; */
    border-width: 6px 6px 0 6px;
    border-color: #ffffff transparent transparent transparent;
    height: 0;
    right: 7px;
    margin: -4px 0;
    top: 50%;
    width: 0;
    -webkit-transform: rotate(360deg);
    z-index: 1;
}

/* Default custom select styles */
div.cs-select {
    background: #fff;
    border: 2px solid #000;
    display: inline-block;
    position: relative;
    text-align: left;
    user-select: none;
    vertical-align: middle;
    /*z-index: 100;*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

div.cs-select:focus {
    outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
    display: none;
}

.cs-select span {
    cursor: pointer;
    display: block;
    overflow: hidden;
    padding: 1em;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Placeholder and selected option */
.cs-select > span{
    padding: 4px 45px 4px 5px;
}
.cs-select ul span {
    padding: 4px 5px 4px 5px;
}

.cs-select > span::after,
.cs-select .cs-selected span::after,
.cs-select > span::before,
.cs-select .cs-selected span::before {
    content: '';
    display: block;
    position: absolute;
    speak: none;
}

.cs-select > span::after {
    background: #5ccaf7; /* Old browsers */
    background: -moz-linear-gradient(top, #5ccaf7 0%, #0e6b91 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5ccaf7), color-stop(100%, #0e6b91)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5ccaf7 0%, #0e6b91 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5ccaf7 0%, #0e6b91 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5ccaf7 0%, #0e6b91 100%); /* IE10+ */
    background: linear-gradient(to bottom, #5ccaf7 0%, #0e6b91 100%); /* W3C */
    cursor: pointer;
    height: 25px;
    right: 1px;
    top: 1px;
    width: 25px;
    z-index: 0;
}

.cs-select > span:hover:after {
    background: #0e6b91; /* Old browsers */
    background: -moz-linear-gradient(top, #0e6b91 0%, #5ccaf7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0e6b91), color-stop(100%, #5ccaf7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0e6b91 0%, #5ccaf7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0e6b91 0%, #5ccaf7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0e6b91 0%, #5ccaf7 100%); /* IE10+ */
    background: linear-gradient(to bottom, #0e6b91 0%, #5ccaf7 100%); /* W3C */
}

.cs-select > span::before {
    border-style: solid;
    /* border-style: inset; */
    border-width: 6px 6px 0 6px;
    border-color: #ffffff transparent transparent transparent;
    height: 0;
    right: 7px;
    margin: -4px 0;
    top: 50%;
    width: 0;
    -webkit-transform: rotate(360deg);
    z-index: 1;
}

/* Options */
.cs-select .cs-options {
    background: #fff;
    border: 2px solid #000;
    margin-left: -2px;
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    z-index: 100;
    min-width: 100%;
}

.cs-select .cs-options .option-inactive > span {
    background: #fff;
    cursor: default;
    color: grey;
}

.cs-select.cs-active .cs-options {
    visibility: visible;
}

.cs-select ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.cs-select ul li:hover {
    background-color: #17a4de;
    color: #fff;
}

.cs-select ul li.cs-focus span {
    background-color: #17a4de;
}

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
    padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
    cursor: default;
}

/*
############################
#### 	CONTENT
############################
*/

#content {
    background: url('/website/faces/javax.faces.resource/footerBack_bg.png?ln=images') repeat-y scroll center center transparent;
    padding: 0 10px;
    margin: 0 auto;
    position: relative;
    width: 970px;
}

/* IE 7 Hack */
* + html #content {
    z-index: -1;
}

#contentInner {
    background-color: #fff;
    min-height: 640px;
    width: 970px;
    position: relative;
}

#contentInner h3 {
    margin-top: 20px;
}

#contentFoot {
    background: url('/website/faces/javax.faces.resource/footerBack_bg.png?ln=images') repeat-y scroll center center transparent;
    height: 93px;
    margin: 0 auto;
}

#sidebar, .sidebar {
    float: right;
    width: 352px;
}

#sidebar h2 a {
    float: right;
    font-size: 12px;
    margin: 0 10px 0 0;
}

#sidebar h3 a {
    display: block;
    color: #000;
}

#twoColumn, .twoColumn {
    background: url('/website/faces/javax.faces.resource/separator_right.jpg?ln=images') no-repeat right 0;
    float: left;
    min-height: 920px;
    width: 605px;
}

#twoColumn h2 {
    padding: 20px 0 0 20px;
}

#twoColumn ul,
#twoColumn ol {
    padding: 0 0 0 40px;
}

.small_box, .big_box, .hole_box, #sidebar .loginform {
    background: url('/website/faces/javax.faces.resource/small_box_bg_comm.jpg?ln=images') no-repeat left 50px;
    float: right;
    padding: 20px 0 5px 0;
    vertical-align: top;
    width: 330px;
}

* + html .small_box, * + html #sidebar .loginform {
    width: 300px;
    margin-right: 20px;
}

#sidebar .small_box, #sidebar .loginform {
    padding: 20px 10px 5px;
}

.ui-panel .ui-panel-content {
    padding: 0 !important
}

.big_box {
    float: left;
    padding: 0;
    margin: 0 0 5px;
    width: auto;
}

.big_box.faq {
    background: none;
    width: 605px;
}

.info_graphic {
    margin: 20px;
}

.full_content {
    width: 954px;
}

h2 {
    background: url('/website/faces/javax.faces.resource/h2_footer.png?ln=images') repeat-x bottom;
    color: #000;
    text-transform: uppercase;
    font: bold 24px/34px 'PT Sans narrow';
    padding: 0 0 0 10px;
    margin: 0 0 10px 0;
}

h1 {
    font: bold 30px/50px 'PT Sans narrow';
    padding: 0px 20px;
    text-transform: uppercase;
}

h3 {
    font-size: 36px;
    line-height: 50px;
    padding: 0 0 0 20px;
    text-transform: uppercase;
}

h3.index {
    margin-top: 20px;
    width: 584px;
}

h3 a.see_all {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #d4d4d4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #d4d4d4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #d4d4d4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #d4d4d4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #d4d4d4 100%); /* IE10+ */
    background: linear-gradient(top, #ffffff 0%, #d4d4d4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4d4d4', GradientType=0); /* IE6-9 */
    border: 2px solid #000;
    border-radius: 4px;
    color: #000;
    float: right;
    font-size: 13px;
    line-height: 28px;
    font-weight: normal;
    padding: 0 15px;
    margin: 15px 20px;
}

h3 a.see_all:hover {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #d4d4d4 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d4d4), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d4d4d4 0%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d4d4d4 0%, #ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d4d4d4 0%, #ffffff 100%); /* IE10+ */
    background: linear-gradient(top, #d4d4d4 0%, #ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4d4d4', GradientType=0); /* IE6-9 */
}

h4 {
    color: #0c3d51;
    font-size: 16px;
    font-weight: normal;
    padding: 5px 10px;
}

p {
    padding: 10px 21px;
    position: relative;
}

em {
    font-style: italic;
    letter-spacing: 1px;
}

.small_box p {
    padding: 0 10px;
}

#slider {
    background: url('/website/faces/javax.faces.resource/dirt.png?ln=images') repeat-x scroll center bottom transparent;
}

#slider ul,
p.player {
    padding: 0;
}

.videoplayer {
    background: url('/website/faces/javax.faces.resource/teaser_pic.jpg?ln=images') no-repeat 0 -340px;
    display: block;
    font-size: 0;
    height: 340px;
    width: 605px;
}

.videoplayer:hover {
    background-position: 0 0px;
    text-decoration: none;
}

.videoplayer object {
    position: relative;
    z-index: 5;
}

.teaser_text span.big {
    color: #fff;
    display: block;
    font: small-caps 42px/30px 'PT Sans narrow';
    margin: 0 0 5px;
}

.teaser_text:hover a span {
    text-decoration: none;
}

.teaser_text span {
    color: #b6ff28;
    font-size: 16px;
    padding-left: 15px;
}

.teaser_text {
    bottom: 0;
    display: block;
    font-size: 18px;
    height: 70px;
    padding: 0;
    position: absolute;
    text-indent: 0;
    width: 605px;
}

/* Newselemente Startseite und Newsseite */

.news.overview {
    background: none;
    width: 600px;
}

.news.overview thead {
    display: none;
}

#content .news.overview td {
    padding: 10px 10px 0;
}

.news_article_start {
    background: url('/website/faces/javax.faces.resource/thin_seperator.jpg?ln=images') no-repeat center bottom;
    float: left;
    padding: 10px 0;
    width: 590px;
}

.news_article_start .read_more {
    float: right;
    margin: 0 30px 0 0;
}

.news_article_start a img {
    width: 70px
}

.news .publish {
    color: #666;
    display: block;
    font-size: 10px;
    padding: 0 10px;
}

#newsDetail ul.gallery,
.news_detail p, .news_detail h4 {
    width: 600px;
}

.news img {
    border: 1px solid #000;
    float: left;
    margin: 0 15px 0 0;
    padding: 1px;
}

.news a.news_title {
    color: #0c3d51;
    display: block;
    font: 19px/19px 'PT Sans narrow';
    text-transform: uppercase;
    padding: 0 0 0 20px;
}

.news a.news_title:hover {
    color: #117DAB;
}

.more_news {
    background: url('/website/faces/javax.faces.resource/bg_more_news.jpg?ln=images') no-repeat left bottom;
    float: left;
    height: 120px;
    width: 605px;
}

.more_news a {
    display: block;
    font: bold 15px 'PT Sans narrow';
    margin: 10px 0 0 15px;
    text-transform: uppercase;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
}

.ui-widget-content, .ui-datatable .ui-datatable-data td, .ui-datatable .ui-datatable-data-empty td {
    border-width: 0px !important;
}

.ui-panel {
    background: none;
}

.ui-paginator-first, .ui-paginator-last {
    display: none !important;
}

.ui-paginator-prev, .ui-paginator-next {
    background: url('/website/faces/javax.faces.resource/back.png?ln=images') no-repeat center top;
    display: block;
    float: left;
    height: 29px;
    padding: 0;
    width: 29px;
}

.ui-paginator-next {
    background-image: url('/website/faces/javax.faces.resource/next.png?ln=images');
    float: right;
}

.ui-state-active {
    font-weight: bold;
    font-size: 16px;
}

.ui-state-disabled {
    opacity: 0.5;
}

.ui-paginator-current {
    display: none !important;
}

a.read_more, .back_link a, .button a, .button input, .button, a.back_link, input.board_link {
    background: url('/website/faces/javax.faces.resource/read_more_bg.jpg?ln=images') center top repeat-x;
    border-left: 1px solid #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #d9faff;
    cursor: pointer;
    float: left;
    font: 14px/28px 'Trebuchet MS';
    height: 29px;
    margin: 10px 0;
    padding: 0 10px;
    position: relative;
    text-decoration: none;
}

a:hover.read_more, .back_link a:hover, .button a:hover, .button input:hover, input:hover.button, a:hover.back_link, input.board_link:hover {
    background-position: left -40px;
    color: #fff;
    cursor: pointer;
}

input.board_link {
    width: 170px;
    text-align: center;
    margin: 0 0 0 210px;
    text-transform: none;
}

input.board_link:disabled {
    background-position: left -40px;
    color: #A09A9A;
    cursor: default;
}

.button a {
    border-radius: 2px;
    padding: 0 20px;
}

.button.logout {
    margin: 10px;
}

a.button.features {
    margin: 20px 25px;
    text-align: center;
    width: 865px
}

.login_box {
    font-size: 16px;
    line-height: 47px;
    margin: 10px 0 0 0;
    position: absolute;
    text-align: left;
    top: 0px;
    right: 40px;
}

.logged_in {
    border: 2px solid white;
    border-radius: 5px;
    font: 16px/18px;
    margin: 10px 0 0 0;
    padding: 5px 10px;
    position: absolute;
    text-align: left;
    top: 0px;
    right: 50px;
    width: 226px;
}

.login_link {
    background-position: -380px -147px;
    color: #04354e;
    display: block;
    height: 47px;
    padding: 0 0 0 20px;
    text-decoration: none;
    text-transform: uppercase;
    width: 250px;
}

.login_link:hover {
    background-position: -656px -146px;
    color: #fff;
    text-decoration: none;

}

.logged_in {
    background: #fff url('/website/faces/javax.faces.resource/bg_loggedin_box.jpg?ln=images') no-repeat 2px 2px;
}

.logged_in input {
    background: none;
    border: 0px none;
    color: #117DAB;
    float: left;
    font-size: 14px;
    left: -3px;
    height: auto;
    padding: 0;
    position: relative;
    width: auto;
}

.logged_in input:hover {
    cursor: pointer;
    text-decoration: underline;
}

.logged_in input:focus {
    box-shadow: 0 0 0;
}

.logged_in span {
    color: #fff;
    display: block;
    line-height: 21px;
    padding: 0 0 5px 0;
}

.logged_in a.account_link {
    display: block;
    margin: 3px 0;
}

/* Buttons für die Startseite */

#sidebar p {
    margin: 0;
    padding: 0;
}

a.ad_buttons {
    display: block;
    font: bold 30px/30px 'PT Sans Narrow';
    color: #fff;
    height: 72px;
    margin: 0 0 10px 0;
    padding: 20px 0 0 20px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #000000;
    width: 320px;
    background: url('/website/faces/javax.faces.resource/sidebar_btn_sprite_v2.jpg?ln=images') no-repeat
}

a.ad_buttons:hover {
    text-decoration: none;
}

a.ad_buttons span {
    padding-right: 20px;
    display: block;
}

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

a.register, a.download {
    background-position: 0 0;
}
a#nameSuggestion{
    color: #ebeb6d;
}

a.shop {
    background-position: 0 -339px;
}

a.update {
    background-position: 0 -441px;
}

a.account_register {
    height: 99px;
    background-position: 0 -547px;
}

a:hover.register, a:hover.download {
    background-position: 0 -680px
}

a:hover.shop {
    background-position: 0 -1019px
}

a:hover.update {
    background-position: 0 -1121px
}

a:hover.account_register {
    background-position: 0 -1227px;
}

a.register,
a.download {
    height: 308px;
    margin: 13px 0 12px 0;
    text-align: center;
}

a.update span,
a.shop span {
    font-size: 16px;
    font-weight: normal;
}

a.register > span.register_title,
a.download > span.download_title {
    font-size: 36px;
    padding-top: 12px;
    padding-bottom: 21px;
}

a.register > span.register_subtitle,
a.download > span.download_subtitle {
    font-size: 21px;
    font-weight: normal;
    height: 82px;
}

a.register > span.register_button,
a.download > span.download_button {
    font-size: 30px;
    padding-top: 31px;
}

/* SOCIAL Stuff */
.twitter-timeline {
    margin-top: 15px;
}

/* Player Ranking */
#playerRanking {
    margin: 0 16px 30px 0;
}

ul.playerRankingBox {
    padding: 0;
    border: 2px solid #000;
}

.singleplayer_login_info {
    text-align: center;
}

.legionranking_login_info {
    padding: 0 145px;
}

ul.playerRankingBox > li,
#communityContent .head {
    padding: 6px 10px;
}

ul.playerRankingBox > li.head,
.head {
    background: url('/website/faces/javax.faces.resource/head_bg.jpg?ln=images') no-repeat;
    color: #fff;
}

ul.playerRankingBox > li.player {
    border: 1px solid #fff;
    display: none;
}

/*
ul.playerRankingBox > li.player:nth-child(odd),
#communityContent ul.playerRankingBox > li:nth-child(even) {background-color: #d9d9d9;}
ul.playerRankingBox > li.player.myplayer,
#communityContent ul.playerRankingBox > li.myplayer:nth-child(even){background-color: #b7d8e6;}
*/
ul.playerRankingBox > li.myplayer {
    background-color: #b7d8e6;
}

ul.playerRankingBox > li.second_player_entry {
    background-color: #d9d9d9;
}

ul.playerRankingBox > li.player > ul {
    font: 19px/130% 'PT Sans narrow';
    overflow: hidden;
    padding: 0;
    cursor: default;
}

ul.playerRankingBox > li.player > ul li.playername {
    float: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.playerRankingBox > li.player > ul li.place {
    float: left;
    font-size: 24px;
    font-weight: bold;
    padding-right: 10px;
    text-align: center;
    width: 37px;
}

ul.playerRankingBox > li.player > ul li.score {
    float: right;
    text-align: right;
    min-width: 80px;
}

ul.playerRankingBox > li.ranking_status {
    font: 14px 'PT Sans narrow';
    text-align: left;
    padding: 6px 10px;
}

span.arrow {
    background-position: -392px -49px;
    display: inline-block;
    margin: 0 3px -2px 0;
    height: 20px;
    width: 20px;
}

span.arrow.up {
    background-position: -392px -49px;
}

span.arrow.static {
    background-position: -473px -49px;
}

span.arrow.down {
    background-position: -433px -49px;
}

span.icon.info {
    background-position: -516px -50px;
    cursor: pointer;
    height: 16px;
    display: inline-block;
    float: right;
    width: 16px;
    margin: 0 5px;
}

.tooltip_open h3 {
    font-size: 18px;
    line-height: 20px;
    padding: 0;
}

.tooltip_open p {
    padding: 0 0 7px 0;
}

.tooltip_open img {
    border: 1px solid #fff;
}

.tooltip_open > table td {
    font-size: 13px;
    vertical-align: middle;
    padding: 3px 15px 3px 0;
}

ul.playerRankingBox > li.player > ul li span.place,
ul.playerRankingBox > li.player > ul li span.race,
ul.playerRankingBox > li.player > ul li span.points {
    color: #000;
    display: block;
    font-size: 13px;
    line-height: 17px;
}

ul.playerRankingBox > li.player > ul li span.elyos {
    color: #393;
}

ul.playerRankingBox > li.player > ul li span.asmo {
    color: #5297A9;
}

ul.playerRankingBox > li.player > ul li span.points {
    color: #000;
    font-weight: normal;
}

#my_legion_ranking_status {
    text-align: center;
    position: absolute;
    width: 952px;
    margin-top: 140px;
    font-weight: bold;
}

#my_legion_ranking_no_legion {
    text-align: center;
    padding: 20px;
    font-size: 16px;
}

/* Twitter */

#twtr-widget-1 {
    background-position: -976px 0px;
}

.twtr-widget {
    float: left;
    margin: 0 0 15px;
    width: 340px;
}

.twtr-doc {
    width: 100% !important;
}

.twtr-hd, .twtr-ft {
    display: none;
}

.twtr-timeline {
    background: none;
    height: auto !important;
}

#playerRanking .heading {
    color: #000000;
    font: bold 24px/24px 'PT Sans narrow';
    line-height: 33px;
    margin: 3px 10px 4px 0;
    padding: 0 0 0 10px;
    height: auto;
}

.social_content, .blog_content {
    background: url('/website/faces/javax.faces.resource/thin_seperator.jpg?ln=images') no-repeat scroll center top transparent;
    padding: 5px 10px 0 10px;
}

.blog_content h4 {
    font-size: 17px;
    line-height: 17px;
    padding: 10px 0 0 0;
}

.blog_content h4 span {
    display: block;
    font-size: 12px;
    line-height: 15px;
    padding: 2px 0 5px 0;
}

.blog_content p a {
    display: block;
}

.social_content {
    padding: 1px 0 0;
}

.social_content h4 {
    font-size: 15px;
}

/* Account Stuff */

#accountmanagement {
    background: url('/website/faces/javax.faces.resource/bg_account.jpg?ln=images') no-repeat;
    float: left;
    height: 600px;
    padding: 20px 10px;
    width: 934px;
}

#accountmanagement ul {
    margin: 30px 0 0 0;
    width: 300px;
}

#accountmanagement ul li {
    padding: 20px 30px 10px;
}

#accountmanagement ul li a {
    font: 300 18px 'PT Sans narrow'
}

#changepass .back_link a, #resetpass .back_link a {
    margin: 35px 150px 0 30px;
}

a.downloadlink {
    background: url('/website/faces/javax.faces.resource/download_new.png?ln=images') no-repeat center top;
    color: #fff;
    display: block;
    font: bold 30px/75px 'PT Sans narrow';
    height: 80px;
    margin: 10px auto 0;
    text-align: center;
    width: 240px;
}

a:hover.downloadlink {
    background-position: center bottom;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 10px #fff;
}

.fancybox-alternative-close {
    top: 10px !important;
    right: 8px !important;
    background: url('images/fancybox/fancy_close.png') !important;
}

.registerform,
.emailconfirm,
.recoverpassform,
.recoverusernamesform,
.loginform,
.checktokenform {
    margin: 0 auto;
    overflow: visible;
    width: 320px;
}

.boardnameform div,
.recoverpassform div,
#recoverUsernamesForm div,
.change_mail_form div,
.changepasswordform div,
#changeMailForm div,
#recoverPassForm div,
#loginForm div,
.loginform form div,
.registerform div,
.checktokenform div {
    position: relative;
}

.registerform h2,
.recoverpassform h2,
.recoverusernamesform h2,
.loginform h2,
.checktokenform h2 {
    background: none;
    color: #0e2a54;
    font: bold 26px 'PT Sans narrow';
    padding-top: 10px;
    text-align: center;
    width: 306px;
}

.registerform {
    width: 710px;
}

.registerform h2 {
    font-size: 40px;
    width: 710px;
}

.registerform .step-description {
    text-align: center;
}

#registerSteps {
    color: #fff;
    list-style: none;
    margin: 5px 0 40px 0;
    padding-left: 97px;
}

#registerSteps li {
    background-position: -292px -1px;
    float: left;
    font-size: 17px;
    height: 35px;
    line-height: 37px;
    text-transform: uppercase;
    width: 183px;
}

#registerSteps li.last, #registerSteps li.lastdone {
    background-position: -632px -1px;
    width: 150px;
}

#registerSteps li.lastdone {
    background-position: -474px 0px;
}

#registerSteps li.done {
    background-position: -107px -1px;
}

#registerSteps li span {
    display: block;
    float: left;
    font-size: 24px;
    line-height: 37px;
    padding: 0 12px;
}

#emailconfirmErrorHelper {
    position: relative;
    height: 15px;
}

#emailconfirmError {
    background-position: -384px -320px;
    color: #fff;
    height: 25px;
    left: 130px;
    padding: 20px 0 0 40px;
    position: absolute;
    top: -35px;
    width: 290px;
}

.highlighted_area {
    background-color: #c0dbe0;
    background-color: rgba(38, 114, 110, 0.2);
    margin: 25px 0 20px 0;
    padding: 0 15px 1px 15px;
    position: relative;
}

.highlighted_area p {
    font: italic 15px/21px 'Trebuchet MS';
    width: 440px;
}

.highlighted_area img {
    right: -20px;
    position: absolute;
    top: -50px;
}

.highlighted_area button,
.highlighted_area a.js_download {
    background: url('/website/faces/javax.faces.resource/download_btn_bg.jpg?ln=images') -1px -1px no-repeat;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    display: block;
    font-size: 45px;
    font-style: normal;
    height: 96px;
    line-height: 40px;
    margin: 0 0 15px 0;
    text-shadow: 2px 2px 3px #000;
    text-transform: uppercase;
    width: 468px;
}
.js_download:after,
.js_download:hover:after{
    background: none;
}

.highlighted_area button div.downloadlink_text {
    background: url('/website/faces/javax.faces.resource/download_icon.png?ln=images') 0px 0px no-repeat;
    display: inline-block;
    height: auto;
    min-height: 72px;
    padding: 0 20px 0 50px;
    width: auto;
}

.highlighted_area button span.smaller_text {
    display: block;
    font-size: 30px;
    line-height: 28px;
}

.highlighted_area button:hover,
.highlighted_area a.js_download:hover {
    background: url('/website/faces/javax.faces.resource/download_btn_bg.jpg?ln=images') -1px -98px no-repeat;
}

.emailconfirmSteps {
    margin: 35px 0;
}

.emailconfirmSteps p span {
    font: normal 20px/21px 'PT Sans Narrow';
}

#emailconfirm_Helpbox {
    background: url('/website/faces/javax.faces.resource/emailconfirm_bg.jpg?ln=images') 0px 0px no-repeat;
    height: 297px;
}

#emailconfirm_Helpbox div.helpbox {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
    float: left;
    height: 160px;
    padding: 20px;
    margin-top: 40px;
    width: 310px;
}

.left {
    margin: 0 10px 0 130px;
}

.emailconfirmSteps h4,
#emailconfirm_Helpbox h4 {
    text-transform: uppercase;
}

a.register_link {
    font: bold 16px/21px 'PT Sans Narrow';
    margin: 10px 0 0 0;
    text-transform: uppercase;
}

#shugoDownload {
    top: -35px;
    right: -60px;
}

#registerInformation {
    font-size: 14px;
    background-position: -2px -394px;
    line-height: 19px;
    margin: 25px 0 0 -5px;
    width: 716px;
}

#registerFormRight, #registerFormLeft {
    float: left;
    padding: 20px 15px;
    width: 315px;
}

#registerFormRight {
    margin: 0 0 0 23px;
}

#registerFormRight ul {
    font-size: 15px;
}

#registerFormRight li {
    background-position: -893px -218px;
    padding: 0 0 0 30px;
    margin-bottom: 20px;
}

#registerFormRight li span {
    display: block;
    font-weight: bold;
}

#registerFormRight h4 {
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 10px;
    padding: 0;
    text-transform: uppercase;
}

.loginform label,
#registerFormLeft label,
#loginForm label,
#boardForm label,
.checktokenform label {
    display: block;
    font: bold 18px/24px 'PT Sans narrow';
    line-height: 18px;
    margin: 0 0 3px 0;
    text-transform: uppercase;
}

.loginform input.button,
#registerFormLeft input.button,
#loginForm input.button,
#boardForm input.button,
.recoverusernamesform input.button,
.recoverpassform input.button,
.checktokenform input.button {
    background-position: -384px -249px;
    border: none;
    height: 31px;
    width: 320px;
    margin: 0 0 5px 0;
}

.loginform.changepassword input[type="submit"] {
    margin-left: 0;
}

#registerFormLeft input.button:hover,
#loginForm input.button:hover,
#boardForm input.button:hover,
.recoverusernamesform input.button:hover,
.recoverpassform input.button:hover,
.checktokenform input.button:hover {
    background-position: -384px -281px;
}

.loginform input,
#registerFormLeft input,
#loginForm input,
#boardForm input,
.recoverusernamesform input,
.recoverpassform input,
.checktokenform input {
    background-position: -383px -212px;
    display: block;
    font-size: 15px;
    height: 22px;
    line-height: 23px;
    margin: 0 0 15px 0;
    padding-left: 5px;
    width: 306px;
}

#loginForm input, #boardForm input {
    margin: 0;
}

#registerFormLeft p.checkbox {
    font-size: 13px;
    line-height: 15px;
    padding: 0;
    margin: 0 0 15px 0;
}

#registerFormLeft p.checkbox input {
    background: none;
    border: 0;
    display: block;
    float: left;
    margin: -5px 2px 0 0;
    width: 20px;
}

.go_to_login {
    font-size: 13px;
    text-transform: uppercase;
}

#recoverUsernameBacklinkForm {
    margin-left: 10px;
}

#registerScreenshotSlider {
    background: url('/website/faces/javax.faces.resource/register_screenshots_bg.jpg?ln=images') no-repeat center top;
    height: 347px;
    padding: 20px 8px;
}

#registerSystemRequirements {
    padding: 15px 8px;
}

#registerSystemRequirements h4,
#registerSystemRequirements table thead,
#ranking table > thead,
.emailconfirmSteps h4,
#emailconfirm_Helpbox h4 {
    font-size: 22px;
    padding: 0 3px;
}

#ranking table > thead {
    font-size: 20px;
}

#registerSystemRequirements p {
    padding: 0 0 0 5px;
}

#ranking table,
#registerSystemRequirements table {
    line-height: 16px;
    margin: 35px 0 0 0;
    text-align: left;
    width: 950px;
}

#registerSystemRequirements th, #registerSystemRequirements td,
#ranking table th, #ranking table td {
    height: auto;
    min-height: 30px;
    padding: 10px;
    position: relative;
    text-align: left;
    vertical-align: top;
}

#ranking table th {
    height: 24px;
    vertical-align: middle;
}

#registerSystemRequirements td {
    width: 250px;
}

.grey_table_bg {
    background-color: #d9d9d9
}

.recoverpassform label,
.recoverusernamesform label,
.recoverpassform input,
.recoverusernamesform input,
.recoverpassform p,
.recoverusernamesform p,
.loginform label, .loginform input, .loginform input.button,
.recoverpassform input.button {
    display: inline-block;
    margin: 0 10px;
}

.confirmation_content {
    font-size: 15px;
}

.confirmation_content h4 {
    font-size: 21px;
    padding: 0 3px;
}

#shugoReadytoplay {
    text-align: center;
    position: relative;
    z-index: 1;
}

#shugoSocial a.social {
    background: url('/website/faces/javax.faces.resource/ready_social.png?ln=images') 0px 0px no-repeat;
    display: block;
    float: left;
    height: 97px;
    width: 93px;
}

#shugoSocial a.fb,
#shugoSocial a.yt {
    margin: 0 44px 0 0;
}

#shugoSocial a.fb {
    background-position: 0px -96px;
}

#shugoSocial a.fb:hover {
    background-position: 0px 0px;
}

#shugoSocial a.yt {
    background-position: -94px -96px;
}

#shugoSocial a.yt:hover {
    background-position: -94px 0px;
}

#shugoSocial a.tw {
    background-position: -188px -96px;
}

#shugoSocial a.tw:hover {
    background-position: -188px 0px;
}

#shugoSocial {
    height: auto;
    left: 170px;
    margin: 0 auto;
    position: absolute;
    bottom: 28px;
    width: 377px;
    z-index: 2;
}

.recoverpassform p,
.recoverusernamesform p,
.loginform p {
    padding: 5px 0;
}

.recoverpassform input
.recoverpassform input.button,
.recoverusernamesform input.button,
.loginform input.button,
.checktokenform input.button {
    float: none;
    margin-top: 10px;
    margin-bottom: 5px;
    width: 315px;
}

.recoverpassform label,
.recoverusernamesform label,
.loginform label {
    display: block;
    font: bold 18px/24px 'PT Sans narrow';
    line-height: 18px;
    margin: 15px 0 5px 10px;
    text-transform: uppercase;
}

.recoverpassform .checkbox input,
.recoverusernamesform .checkbox input,
.loginform .checkbox input {
    background: none;
    padding: 0;
    display: inline-block;
    margin: 0 5px 0 0;
    width: 15px;
}

.recoverpassform p.checkbox,
.recoverusernamesform p.checkbox,
.loginform p.checkbox {
    float: left;
    font-size: 12px;
    margin: 10px 0 10px 10px;
    padding: 0;
    width: 260px;
}

.changepasswordform {
    padding: 0 0 0 15px;
}

.validatechangepass {
    font-size: 26px;
    padding: 50px;
    font-weight: bold;
}

.forgot_link {
    float: left;
    font-size: 12px;
    margin: 0 0 5px 0;
    padding: 2px 10px;
    text-align: right;
    width: 305px;
}

.registerform .error.agb,
.loginform .error.agb {
    left: 321px;
    top: 0px;
}

.registerform .back_link,
.recoverpassform .back_link,
.recoverusernamesform .back_link,
.loginform .back_link {
    margin-top: 50px;
}

.beta_info {
    background: #DEDDDE;
    margin: 20px;
    width: 570px;
}

.beta_info th {
    border-bottom: 2px solid #333;
    font-weight: bold;
    padding: 3px 7px;
    text-align: left;
}

.beta_info td {
    border-bottom: 2px solid #fff;
    padding: 3px 7px;
}

#recoverUsernamesForm.beta_register .button input, #changepass .button input {
    margin-top: 10px;
}

.back_link a, a.back_link {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-left: 20px;
    padding: 0 10px;
}

a.read_more:after {
    background: url('/website/faces/javax.faces.resource/read_more_arrow.png?ln=images') no-repeat;
    content: "";
    height: 31px;
    position: absolute;
    right: -13px;
    width: 15px;
}

.back_link a:before, a.back_link:before {
    background: url('/website/faces/javax.faces.resource/back_arrow.png?ln=images') no-repeat;
    content: "";
    height: 31px;
    position: absolute;
    left: -14px;
    width: 22px;
}

/* FAQ */

.faq_landing {
    position: relative;
    font-size: 13px;
    line-height: 120%;
    padding: 50px 0 0;
    width: 954px;
}

a.all_faq_link {
    float: right;
    position: absolute;
    margin: 0;
    right: 15px;
    top: 15px;
}

.faq_big {
    background: url('/website/faces/javax.faces.resource/faq_big_bg.png?ln=images') no-repeat;
    float: left;
    height: 210px;
    margin: 0 0 10px 10px;
    width: 460px;
}

.faq_big h2 {
    background: none;
    color: #fff;
    line-height: 48px;
    padding: 0 0 0 15px;
}

.faq_small {
    background: url('/website/faces/javax.faces.resource/faq_small_bg.png?ln=images') no-repeat;
    border-bottom: 1px solid #999;
    border-radius: 5px;
    float: left;
    min-height: 340px;
    margin: 0 0 10px 10px;
    width: 304px;
}

.faq_small h2 {
    background: none;
}

.faq_small h2 a {
    color: #0c3d51;
    line-height: 40px;
    padding-left: 10px;
}

.faq_category ul.faq_list {
    margin: 25px 0 0 25px;
}

ul.faq_list {
    padding: 20px 0 0 20px;
}

.faq_landing a.read_more, .recoverpassform input.button, .recoverusernamesform input.button {
    margin: 10px;
}

.faq_landing ul.faq_list {
    margin: 0;
    padding: 10px 0 0 10px;
}

.allfaq_gameaccounts,
.allfaq_businessmodel,
.allfaq_gamecontent,
.allfaq_character,
.allfaq_general {
    margin: 20px 0 0 0;
}

.allfaq_general .faq_list {
    background: url('/website/faces/javax.faces.resource/red_bg.jpg?ln=images') no-repeat;
}

.allfaq_gameaccounts .faq_list {
    background: url('/website/faces/javax.faces.resource/blue_bg.jpg?ln=images') no-repeat;
}

.allfaq_gamecontent .faq_list {
    background: url('/website/faces/javax.faces.resource/green_bg.jpg?ln=images') no-repeat;
}

.allfaq_businessmodel .faq_list {
    background: url('/website/faces/javax.faces.resource/turquois_bg.jpg?ln=images') no-repeat;
}

.allfaq_character .faq_list {
    background: url('/website/faces/javax.faces.resource/gradient_bg.jpg?ln=images') no-repeat;
}

ul.faq_list li {
    background: url('/website/faces/javax.faces.resource/bullet.png?ln=images') no-repeat left 2px;
    padding: 0 0 10px 20px;
}

#faqAll .faq_list {
    padding: 20px;
}

ul.paginator {
    float: left;
    text-align: center;
    width: 580px;
}

ul.paginator li {
    display: inline-block;
    font-weight: bold;
    padding: 0 5px;
    vertical-align: middle;
}

.ui-paginator-pages {
    background: none;
}

/* Businessmodell */

table.f2p_small_list {
    background: url('/website/faces/javax.faces.resource/f2p_small_list_main_bg.jpg?ln=images') no-repeat center bottom;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    width: 970px;
}

.f2p_small_list tr.header, .f2p_small_list tr.subheadline {
    background: url('/website/faces/javax.faces.resource/f2p_small_list_header.jpg?ln=images') no-repeat;
    height: 60px;
}

.f2p_small_list tr.subheadline {
    background: #0d181e;
    color: #fff;
    height: 25px;
}

.f2p_small_list th {
    border-left: 5px solid #fff;
    color: #fff;
    font: bold 26px/22px 'PT Sans narrow';
    padding-top: 10px;
}

.f2p_small_list th:first-child {
    border-left: 0px;
}

.f2p_small_list tr.header th:last-child {
    border-left: 20px solid #fff;
    color: #ffe64c;
}

.f2p_small_list th span {
    font-size: 14px;
}

.f2p_small_list td {
    border-left: 5px solid #fff;
    padding: 5px 10px;
    width: 240px;
}

.f2p_small_list td:first-child {
    border-left: 0px;
    color: #112149;
    text-align: left;
    width: 130px;
}

.f2p_small_list tr.subheadline td:first-child {
    color: #fff;
}

.f2p_small_list tr.subheadline td:last-child {
    border-left: 20px solid #fff;
}

.f2p_small_list tr.even td {
    background: #c9c8c9;
}

.f2p_small_list tr.even td.last {
    border-left: 20px solid #fff;
    background: #f3d419;
}

.f2p_small_list tr.odd td.last {
    border-left: 20px solid #fff;
    background: #ffe755;
}

.f2p_small_list tr.odd td {
    background: #deddde;
}

.f2p_small_list td.cross {
    background: url('/website/faces/javax.faces.resource/cross.png?ln=images') no-repeat center;
    text-indent: -9999px;
}

.f2p_small_list td.red {
    font-size: 11px;
}

.f2p_small_list td.red span {
    color: #641000;
    font-weight: bold;
    font-size: 14px;
}

.newsRoot {
    background-color: lightgrey;
}

.news_detail {
    background: url('/website/faces/javax.faces.resource/red_bg.jpg?ln=images') no-repeat;
    padding: 25px;
}

.news_detail #twoColumn {
    background: 0;
}

.news.title {
    font-weight: 700;
}

.news.date {
    font-size: 75%;
}

.news.subtitle {
    font-style: italic;
}

#newsDetail ul.gallery {
    padding: 10px;
    margin: 15px 0;
}

#newsDetail ul.gallery li {
    float: left;
}

#newsDetail ul.gallery img {
    float: none;
}

#newsDetail ul.gallery a:hover img {
    border-color: #117DAB;
}

#accountBoxRoot {
    background-position: 0 80px;
}

#accountBoxRoot .read_more {
    margin: 10px 0 10px 10px;
}

#freeToPlay .button {
    margin: 0 0 0 20px;
}

.convertAccountLink {
    padding: 4px;
    background-color: lightblue;
    border-width: 1px;
    border-color: black;
}

.convertAccountLink:hover {
    background-color: white;
}

.separator {
    background: url('/website/faces/javax.faces.resource/tcolumn_separator.jpg?ln=images') no-repeat 50% 0;
    float: left;
    height: 10px;
    width: 605px;
}

h3.info_site_headline {
    padding: 20px 0 0 20px;
}

.info_site {
    float: left;
    width: 600px;
}

.info_site h2 {
    padding: 10px 0 0 20px;
}

.gallery ul {
    padding: 20px 20px 30px;
}

.gallery ul li {
    display: inline;
    padding: 10px 20px 0 0;
}

.gallery ul.screenshots {
    background: url('/website/faces/javax.faces.resource/red_bg.jpg?ln=images') no-repeat;
}

.gallery ul.videos {
    background: url('/website/faces/javax.faces.resource/blue_bg.jpg?ln=images') no-repeat;
}

.gallery img {
    border: 3px solid #000;
    border-radius: 3px;
    width: 120px;
}

#geoip_overlay {
    background: url('/website/faces/javax.faces.resource/geoIP_overlay.jpg?ln=images') no-repeat 0 0;
    height: 224px;
    width: 618px;
    padding: 100px;
    text-align: center;
}

#geoip_overlay h2 {
    background: none;
    color: #0c3d51;
    font-size: 30px
}

#geoip_overlay .read_more {
    margin: 0 10px;
}

#geoip_overlay .button {
    margin: 0 0 0 125px;
    float: left;
}

.news_pic {
    float: left;
    margin: 0 10px 10px 20px;
}

.news_detail .news_pic {
    display: none;
    margin: 10px 0 10px 20px;
}

/* Newsletter */

.newsletter strong {
    font: bold 20px/30px 'PT Sans narrow';
    padding: 0 10px 0 0;
    color: #0C3D51;
}

.register_form {
    padding: 10px;
}

.register_form label.long_label {
    float: left;
    width: 830px;
}

.newsletter_detail .register_input input {
    float: left;
    width: 300px;
}

.newsletter_detail table {
    float: left;
}

.newsletter_detail .button {
    float: left;
}

.newsletter_detail .button input {
    height: 25px;
    margin: 0 10px;
}

.newsletter_detail .register_form {
    padding: 0 20px 50px;
}

.error {
    border: 1px solid #d14f4f;
    background: #d51c1c; /* Old browsers */
    background: -moz-linear-gradient(top, #d51c1c 0%, #b10000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d51c1c), color-stop(100%, #b10000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d51c1c 0%, #b10000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d51c1c 0%, #b10000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d51c1c 0%, #b10000 100%); /* IE10+ */
    background: linear-gradient(top, #d51c1c 0%, #b10000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d51c1c', endColorstr='#b10000', GradientType=0); /* IE6-9 */
    color: #fff;
    display: inline;
    font-size: 15px;
    line-height: 14px;
    padding: 3px;
    position: absolute;
    right: -215px;
    top: 20px;
    width: 200px;
    z-index: 2;
}

.error:before {
    background: url(images/landing/arrow_left.png) no-repeat;
    content: "";
    height: 10px;
    left: -6px;
    position: absolute;
    width: 6px;
}

.main_error {
    color: #d51c1c;
    display: block;
    font-weight: bold;
}

.success {
    font-weight: bold;
    display: block;
}

.news_box .register_input input {
    width: 300px;
}

.register_content,
.confirmation,
#recoverpass,
#recoverusernames,
.login,
#help,
#checktoken {
    background: url('/website/faces/javax.faces.resource/bg_confirmation.jpg?ln=images') center 6px no-repeat;
    min-height: 567px;
    padding: 30px 0 0;
}

.register_content {
    font-family: 'PT Sans Narrow', Arial, sans-serif;
    font-size: 15px;
}

.register_content p {
    padding: 10px 3px;
}

.download_content {
    height: 530px;
    background: url(/website/faces/javax.faces.resource/bg_confirmation.jpg?ln=images) center 6px no-repeat;
    padding: 30px 0 0;
}
.download_content div {
    width: 710px;
    margin: 0 auto;
}

.download_content h2 {
    color: #0e2a54;
    font: bold 40px 'PT Sans narrow';
    padding-top: 10px;
    text-align: center;
    background: none;
}
.download_content .download_section,
.register_content .download_section {
    width: 500px;
    margin: 50px auto;
}

.download_content .download_client,
.register_content .download_client{
    width: 200px;
    float: left;
    text-align: center;
}
.download_content .download_steam,
.register_content .download_steam{
    width: 200px;
    float: right;
    text-align: center;
}
.download_content .download_section button,
.register_content .download_section button {
    margin-top: 20px;
}

.website_download_btn
{
    overflow: visible;
    background: #0ab6ff;
    border: none;
    cursor: pointer;
    color: #fff;
    display: inline-block;
    font: 20px 'PT Sans Narrow', sans-serif;
    height: 46px;
    margin-right: 23px;
    min-width: 150px;
    padding: 0 36px 0 20px;
    position: relative;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    z-index: 1;

    white-space: nowrap;
}

.website_download_btn:after {
    background: none;
    border-style: solid;
    border-width: 23px 0 23px 20px;
    border-color: transparent transparent transparent #0ab6ff;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 28px;
    height: 0;
    width: 0;
}
.website_download_btn:hover,
.website_download_btn.steam:hover
{background: #000;}

.website_download_btn:hover:after,
.website_download_btn.steam:hover:after
{border-color: transparent transparent transparent #000;}

.website_download_btn > span {
    background: url('/website/faces/javax.faces.resource/aion_sprite.png?ln=images') -787px -48px no-repeat;
    display: inline-block;
    height: 18px;
    right: -9px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    width: 32px;
    z-index: 2;
}
.website_download_btn.steam{background: #6fa030;}

.website_download_btn.steam:after{border-color: transparent transparent transparent #6fa030;}


.validation_unsuccessful {
    text-align: center;
    color: #c00;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 40px;
}


.validation_successful{
    text-align: center;
    color: #2dbf45;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 40px;
}

.validation_unsuccessful:before,
.validation_successful:before {
    content: "";
    background: url('/website/faces/javax.faces.resource/images/longscroller/funnel_sprite.png') 0 0 no-repeat;
    height: 35px;
    width: 35px;
    top: 13px;
    left: -5px;
    position: relative;
    display: inline-block;
}

.validation_unsuccessful:before {
    background-position: -36px 0;
}

.validation_successful:before {
    background-position: -73px 0;
}

.confirmation h3 {
    background: none;
    color: #0c3d51;
    padding: 30px 0 0 0;
    text-align: center;
}

.confirmation p {
    text-align: center;
}

.confirmation .button {
    margin: 0 auto;
}

.feedback {
    background: url('/website/faces/javax.faces.resource/bg_confirmation.jpg?ln=images') no-repeat center top;
    height: 575px;
    padding: 100px 150px 0;
}

.feedback h3 {
    background: none;
    color: #0c3d51;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
}

.feedback .back_link {
    float: left;
    margin: 0 50px 0 140px;
}

/*
############################
#### 	Help
############################
*/

#help {
    padding: 20px;
    text-align: center;
}

#helpFaq,
#helpSupport {
    border: 2px solid black;
    color: #fff;
    height: 329px;
    margin: 15px 0;
    padding: 4px;
    text-align: left;
    width: 913px;
}

#helpFaq {
    background: url('/website/faces/javax.faces.resource/helpfaq.jpg?ln=images') no-repeat center center #fff;
}

#helpSupport {
    background: url('/website/faces/javax.faces.resource/helpsupport.jpg?ln=images') no-repeat center center #fff;
}

#helpFaq h3, #helpFaq h3,
#helpFaq h3, #helpSupport h3 {
    font: normal 100px/100px 'PT Sans Narrow' !important;
    margin: 70px 0 0 0;
}

#helpFaq h3,
#helpFaq p {
    margin-left: 15px;
}

#helpFaq a.faq_link {
    margin: 0 0 0 35px;
}

#helpSupport h3 {
    margin-top: 70px;
}

#helpSupport h3,
#helpSupport p {
    margin-left: 450px;
}

#helpSupport a.faq_link {
    margin: 0 0 0 470px;
}

#helpFaq a.faq_link,
#helpSupport a.faq_link {
    background: url('/website/faces/javax.faces.resource/aion_sprite.png?ln=images') no-repeat -712px -279px;
    color: #000;
    display: block;
    height: 27px;
    line-height: 27px;
    padding: 0 0 0 8px;
    text-decoration: none;
    text-transform: uppercase;
    width: 175px;
}

#helpFaq a.faq_link:hover,
#helpSupport a.faq_link:hover {
    background: url('/website/faces/javax.faces.resource/aion_sprite.png?ln=images') no-repeat -712px -250px;
    color: #fff;
}

/*
############################
#### 	Community
############################
*/

#community .head > h4 {
    color: #fff;
    padding: 5px 10px;
}

#communityContent .section h4 {
    padding: 5px 0 0;
}

#communityContent .head {
    font: 19px/130% 'PT Sans narrow';
    text-transform: uppercase;
}

#communityContent h5 {
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    padding: 7px 0 0;
}

#gamescom  .separator_line,
#ranking  .separator_line,
#communityContent .separator_line {
    background: url('/website/faces/javax.faces.resource/h2_footer.png?ln=images') left bottom repeat-x;
}

.section {
    margin: 0 21px 10px 21px;
    padding: 0 0 15px;
}
#ranking .section > p{
    padding: 15px 0 0 0;
}
#communityContent .section.upper {
    margin: 0 21px;
}

#communityContent .section img {
    margin: 0 10px 5px 0;
}

#communityContent .section > a.link,
#ranking a.link {
    color: #03b7ff;
    display: block;
    font: 19px/130% 'PT Sans narrow';
    padding: 5px 0 0;
    text-align: right;
    cursor: pointer;
}

#ranking a.link {
    display: inline-block;
}

#ranking a.link.right {
    float: right;
}

#ranking a.link.left {
    text-align: left;
    float: left;
    margin: 0;
}

#communityContent p {
    padding: 5px 0 15px;
}

#communityContent p span {
    display: block;
    font-weight: bold;
    padding: 0 0 8px 0;
}

.community_box {
    background: -moz-linear-gradient(top, rgba(212, 222, 226, 1) 0%, rgba(212, 222, 226, 0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(212, 222, 226, 1)), color-stop(100%, rgba(212, 222, 226, 0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(212, 222, 226, 1) 0%, rgba(212, 222, 226, 0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(212, 222, 226, 1) 0%, rgba(212, 222, 226, 0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(212, 222, 226, 1) 0%, rgba(212, 222, 226, 0) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(212, 222, 226, 1) 0%, rgba(212, 222, 226, 0) 100%); /* W3C */
    height: auto;
    margin: 10px;
    padding: 10px 15px 30px 15px;
    position: relative;
    vertical-align: top;
    width: 290px;
    /*  width: 225px;*/
}

.community_box span.social_icon {
    background: url('/website/faces/javax.faces.resource/social_large.png?ln=images');
    display: inline-block;
    height: 50px;
    margin: 10px 10px -2px 0;
    width: 50px;
}

.community_box a.social {
    margin: 0;
    padding: 0;
}

.community_box span.fb {
    background-position: 0px 0px;
}

.community_box span.tw {
    background-position: -50px 0px;
}

.community_box span.blog {
    background-position: -100px 0px;
}

.community_box span.forum {
    background-position: -150px 0px;
}

.community_box span.dc {
    background-position: 0px -50px;
}

.community_box span.ig {
    background-position: -50px -50px;
}

.community_box span.yt {
    background-position: -100px -50px;
}

.community_box h4 {
    border-bottom: 7px solid black;
    padding: 0;
    text-transform: uppercase;
}

.community_box h5 {
    font-size: 18px;
    line-height: 18px;
    margin: 15px 0 5px 0;
}

#sidebar > h4 {
    padding: 15px 0 0 10px;
}

#sidebar .community_box > p {
    padding-bottom: 15px;
}

#communityContent ul {
    padding: 0;
}

#communityContent ul.playerRankingBox:nth-child(1) {
    margin-right: 10px;
}

#communityContent ul.playerRankingBox {
    border: 0;
    float: left;
    margin-bottom: 6px;
    width: 276px;
}


#ranking .intro {
    float: left;
    width: 605px;
}

#ranking .intro > p {
    padding: 5px 21px;
}

#ranking .intro_aside {
    background: #cbcbcb; /* Old browsers */
    background: -moz-linear-gradient(left, #cbcbcb 0%, #ffffff 48%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cbcbcb), color-stop(48%, #ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #cbcbcb 0%, #ffffff 48%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #cbcbcb 0%, #ffffff 48%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #cbcbcb 0%, #ffffff 48%); /* IE10+ */
    background: linear-gradient(to right, #cbcbcb 0%, #ffffff 48%); /* W3C */
    float: left;
    padding: 20px;
}

#ranking .aside_pic > img {
    border: 5px solid #000;
}

#ranking .head > h4 {
    padding-top: 0;
    color: #fff;
    font-size: 28px;
    line-height: 50px;
    text-transform: uppercase;
}

#ranking .filter_wrapper {
    border-bottom: 3px solid black;
    padding: 8px 10px;
}

#ranking .filter {
    float: left;
    position: relative;
}

#ranking .filter > a.link {
    font-weight: bold;
    padding: 0 15px 0 10px;
    position: relative;
}

#ranking .map_wrapper {
    padding: 10px 21px;
    width: 100%;
}

#ranking .map {
    position: relative;
    float: left;
}

#ranking .map_wrapper > h3,
#ranking .map > h3 {
    padding: 0;
}

#ranking .map_wrapper > img,
#ranking .map > img {
    border: 4px solid #000;
    margin-right: 12px;
    padding: 0;
    width: auto;
}

#ranking .map .caption {
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 6px;
    left: 23px;
    position: absolute;
    right: 23px;
    width: auto;
}

#ranking .map .caption > h4 {
    text-align: left;
    padding: 10px 20px;
    color: #fff;
}

#ranking .map .artifact {
    background: url('/website/faces/javax.faces.resource/maps/fortress_artefakt_sprite.png?ln=images') no-repeat;
    height: 17px;
    width: 17px;
    position: absolute;
}
#ranking .map .a-green {
    background-position: -65px -65px;
}
#ranking .map .a-blue {
    background-position: -115px -65px;
}
#ranking .map .a-red {
    background-position: -165px -65px;
}

#ranking .map .fortress {
    background: url('/website/faces/javax.faces.resource/maps/fortress_artefakt_sprite.png?ln=images') no-repeat;
    height: 32px;
    width: 32px;
    position: absolute;
}
#fortress_select_server {
    margin: 0 0 20px 0;
}
#ranking .map .f-green {
    background-position: -60px -10px;
}
#ranking .map .f-blue {
    background-position: -110px -10px;
}
#ranking .map .f-red {
    background-position: -160px -10px;
}

#ranking .map .position {
    background: url('/website/faces/javax.faces.resource/maps/fortress_artefakt_sprite.png?ln=images') no-repeat;
    height: 24px;
    width: 28px;
    position: absolute;
}
#ranking .map .p-green {
    background-position: -60px -100px;
}
#ranking .map .p-blue {
    background-position: -110px -100px;
}
#ranking .map .p-red {
    background-position: -160px -100px;
}

#mapNavi {
    font-size: 18px;
    padding-bottom: 20px;
    margin: 15px 0 10px 0;
}

#mapNavi > li {
    border-left: 2px solid #000;
    float: left;
    padding: 0 10px;
}

#mapNavi > li:first-child,
#mapNavi > li:nth-child(2) {
    border-left: 0;
    padding-left: 0;
}

#mapNavi > li:first-child {
    float: none;
    margin-bottom: 15px;
}

#mapNavi > li > a {
    color: #03b7ff;
}

map > area {
    outline: none;
}

.filter_dropdown {
    background-color: #fff;
    box-shadow: 1px 2px 4px #333;
    border: 3px solid #000;
    display: none;
    font-size: 16px;
    height: auto;
    padding: 5px 0 35px 0;
    position: absolute;
    top: 26px;
    width: 945px;
    z-index: 2;
}

.filter_dropdown.filter_open {
    display: block;
}

.filter_dropdown:before,
.filter_dropdown:after {
    content: '';
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}

.filter_dropdown:before {
    border-style: solid;
    border-width: 0 11px 12px 11px;
    border-color: transparent transparent #000 transparent;
    left: 114px;
    top: -12px;
}

.filter_dropdown:after {
    border-style: solid;
    border-width: 0 7px 8px 7px;
    border-color: transparent transparent #fff transparent;
    left: 118px;
    top: -8px;
}

.filter_dropdown .section {
    float: left;
}

.filter_dropdown .section label {
    font-weight: bold;
}

.filter_dropdown .section > form, .filter_dropdown .section > div > form {
    width: 125px;
}

.filter_dropdown .section.classes > form {
    width: 420px;
}

.filter_dropdown .section.server > form {
    width: 420px;
}

.filter > a:after {
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #000000 transparent transparent transparent;
    content: '';
    display: block;
    height: 0;
    margin: -4px 0;
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
}

.filter > a.filter_open:after {
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #000000 transparent;
}

.filter_dropdown .btn_wrapper {
    bottom: 15px;
    position: absolute;
    right: 0px;
    text-align: right;
}

.filter_dropdown .btn_wrapper button {
    width: 180px;
    margin: 10px 65px 0 0;
}

.dropdown_wrapper {
    float: right;
    margin: 0 0 0 21px;
}

.dropdown_wrapper.le {
    float: left;
    margin: 0 21px 0 0;
}

.dropdown_wrapper > label,
.dropdown_wrapper > span {
    font-weight: bold;
    margin: 0 0 4px;
}

.dropdown_wrapper > span {
    display: inline-block;
    margin: 0 4px 0 0;
}

.dropdown_wrapper > label {
    margin-right: 5px;
}

#ranking .loading_data{
    cursor: wait;
}
#ranking .loading_content{
    text-align: center;
}
#ranking .loading_table{
    padding: 100px 0;
    text-align: center;
}
#ranking .loading_footer {
    margin: 0 15px;
    position: absolute;
}

#ranking .loading_data>.runner{
    width: 50px;
    height: 70px;
    display: inline-block;
    vertical-align: top;
    background: url('/website/faces/javax.faces.resource/loading_data.gif?ln=images') no-repeat;
    margin: auto;
}
#ranking .loading_data>span{
    display: inline-block;
    line-height: 70px;
    font-size: 16px;
}
#ranking table {
    font-size: 16px;
    margin: 10px;
}

#ranking table.scroll {
    border-spacing: 0;
}

#ranking table.scroll tbody,
#ranking table.scroll thead {
    /*border: 1px solid;*/
    display: block;
    padding: 0;
    cursor: default;
}

#ranking table.scroll td > div {
    text-overflow: ellipsis;
    overflow: hidden;
}

#ranking table.scroll td,
#ranking table.scroll th {
    /*border: 1px solid;*/
}

#ranking table.scroll tbody {
    width: 952px;
    overflow-y: auto;
    overflow-x: hidden;
}

#ranking table span.position {
    float: left;
}

#ranking table span.arrow {
    float: right;
    font-size: 15px;
    font-weight: normal;
    text-align: right;
    width: 40px;
}

#ranking table span.sort{
    cursor:pointer;
}
#ranking table span.sort:after {
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #000000 transparent transparent transparent;
    content: '';
    height: 0;
    margin: -4px 3px;
    position: absolute;
    top: 50%;
    width: 0;
}
#ranking table span.asc.sort:after {
    border-color: #03b7ff transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}
#ranking table span.desc.sort:after {
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #03b7ff transparent;
}

#ranking table span.char {
    font-size: 12px;
    display: block;
    margin-top: 3px;
}

#ranking table tfoot {
    background: url('/website/faces/javax.faces.resource/table_footer.jpg?ln=images') top center no-repeat;
    height: 40px;
}

#ranking table > tbody tr:nth-child(odd) {
    background-color: #d9d9d9;
}

#ranking table > tbody tr.not_rated {
    background-color: #b7d8e6;
}

#ranking table > tbody tr.not_rated:nth-child(odd),
.selected {
    background-color: #94c4d9 !important;
}

#ranking table > tbody tr td:nth-child(1) {
    font-size: 18px;
}

#ranking table > tbody tr td.place {
    font-size: 22px;
}

#ranking table > tbody tr.separator_head {
    background-color: #666;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
}

#evolution {
    background: url('/website/faces/javax.faces.resource/evolution_bg.jpg?ln=images') center top no-repeat;
    min-height: 300px;
}

#evolution .section {
    font-size: 16px;
    padding-top: 15px;
}

#evolution .evolution_graph {
    float: left;
}

#evolution .evolution_graph > span {
    font-weight: bold;
}

#evolution .section > form,
.filter_dropdown .section > form,
.filter_dropdown .section > div > form {
    float: left;
}

#evolution .section > form {
    margin-right: 20px;
    width: 300px;
}

#evolution .section > form > label,
.filter_dropdown .section > form > label,
.filter_dropdown .section > form > div > label {
    display: block;
    height: 25px;
    font-weight: bold;
    white-space:nowrap;
}

#evolution .section > form > span,
#evolution .section > form > div > span{
    display: block;
    height: 25px;
}
.filter_dropdown .section > form > span,
.filter_dropdown .section > div > form > span {
    display: inline-block;
    height: 25px;
    width: 150px;
}

#evolution .section > form input[type="checkbox"],
.filter_dropdown .section > form input[type="checkbox"],
.filter_dropdown .section > div > form input[type="checkbox"] {
    margin: 2px 5px 0 0;
}

#evolution .characters,
#evolution .characters > .span{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
}
#evolution .section > form .info {
    font-size: 11px;
    line-height: 130%;
    padding: 8px 0 0;
}

#evolution .graph {
    border-left: 8px solid #000;
    border-bottom: 8px solid #000;
    height: 200px;
    margin: 20px 0 0;
    width: 600px;
}

/*
############################
#### 	FOOTER
############################
*/

.footerBack {
    background: url('/website/faces/javax.faces.resource/footerBack_bg.png?ln=images') repeat-y scroll center center transparent;
    margin: 0 auto;
    width: 100%;
}

.footer {
    background: url('/website/faces/javax.faces.resource/footer_bg_comm_v3.png?ln=images') no-repeat center bottom;
    margin: 0 auto;
    text-align: center;
}

.footer ul {
    margin: 0 auto;
    width: 970px;
}

.footer ul#footerNav {
    margin: 0 auto 50px;
    padding-bottom: 13px;
    width: 970px;
}

.footer ul#footerNav li {
    border-left: 1px solid black;
    display: inline-block;
    text-align: center;
    padding: 0 15px;
}

.footer ul#footerNav li:first-child {
    border: none;
}

.footer ul#footerNav li a {
    color: #000;
    font: bold 16px/14px 'PT Sans Narrow';
    padding: 2px 0 0 0;
    text-transform: uppercase;
}

.footer ul#footerNav li img {
    margin: 0 0 -2px 0;
}

.footer ul li:first-child {
    background: none;
}

.footer ul.logos {
    height: 65px;
    padding: 10px 150px 0 150px;
    text-align: center;
}

.footer ul.logos li {
    background: none;
    display: inline-block;
}

.footer ul.logos li a {
    display: block;
    float: left;
    margin: 0 0 60px 10px;
}

.footer ul.logos li a.gf4d {
    background: url('/website/faces/javax.faces.resource/gf4d_logo.png?ln=images/landing') no-repeat;
    height: 50px;
    margin-right: 130px;
    width: 127px;
}

.footer ul.logos li a.nc_soft {
    background: url('/website/faces/javax.faces.resource/nc-white.png?ln=images/landing_3.0') no-repeat;
	background-size: contain;
    height: 50px;
    width: 92px;
}

.lang_fr .footer ul.logos li a.pegi,
.lang_es .footer ul.logos li a.pegi,
.lang_pl .footer ul.logos li a.pegi,
.lang_it .footer ul.logos li a.pegi,
.footer ul.logos li a.safe_play,
.lang_en .footer ul.logos li a.pegi {
    background: url('/website/faces/javax.faces.resource/Pegi_AION_DE.png?ln=images') no-repeat;
    height: 50px;
    width: 48px;
}

.lang_de .footer ul.logos li a.pegi {
    background: url('/website/faces/javax.faces.resource/Pegi_AION_DE.png?ln=images/landing') no-repeat;
}

.lang_fr .footer ul.logos li a.pegi {
    background: url('/website/faces/javax.faces.resource/Pegi_AION_DE.png?ln=images') no-repeat;
}

.footer ul.logos li a.usk {
    background: url('/website/faces/javax.faces.resource/usk_logo.png?ln=images') no-repeat;
    height: 50px;
    width: 48px;
}

.footer ul.logos li a.safe_play {
    background: url('/website/faces/javax.faces.resource/safe_play_logo.png?ln=images') no-repeat;
    background-size: 50px 50px;
    margin-right: 135px;
}

.footer p {
    color: #FFF;
    font-size: 10px;
    line-height: 13px;
    margin: 0 auto;
    padding: 10px 0 0 0;
    text-transform: uppercase;
    width: 920px;
}

/*
############################
####  HELPER CLASSES
############################
*/

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.clearfloat {
    font-size: 1px;
    clear: both;
    height: 0;
}

.no-margin {
    margin: 0 !important;
}

/*
############################
####  BANNER
############################
*/
#banner {
    background-color: #000;
    height: 90px;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    z-index: 50;
    bottom: 0;
    left: 0;
}

.content_message{
    text-align: center;
    font-size: 20px;
    font-family: 'PT Sans Narrow', Arial, sans-serif;
    display: table-cell;
    vertical-align: middle;
    height: 400px;
    width: 900px;
}