@import url('base.css?ver=2');

/* general page layout */
body {
    background-color: #000000;
    color: #ffffff;
    font-size: 0.8em;
    font-family: Century Gothic, Trebuchet MS, Arial, Geneva, sans-serif;
    margin: 0px;
    padding: 0px;
    }
    
.clear {
	clear: both;
	}
	
.centered {
	margin: 0 auto;
	}
	
/* global navigation */
#global-navigation {
    background: url('../images/global-navigation-bg.jpg') top left repeat-x;
    overflow: hidden;
    height: 32px;
    text-align: center;
    }

#global-navigation ul.links {
    list-style-type: none;
    margin: 0px auto;
    padding: 0px;
    width: 960px;
    display: block;
    }
    
#global-navigation ul.links li {
    float: left;
    margin: 0px;
    padding: 0px;
    }

#global-navigation ul.links li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    }

#global-navigation ul.links li a, #global-navigation ul.links li a span {
    float: left;
    display: block;
    height: 32px;
    background: url('../images/global-navigation-item-bg.jpg') top left no-repeat;
    cursor: pointer;
    }
    
#global-navigation ul.links li a span {
    padding: 6px 9px 0px 9px;
    }
    
#global-navigation ul.links li a:hover span {
    background-position: left -64px;
    }
    
#global-navigation ul.links li.current a span {
    background-position: left -32px;
    }
    
#global-navigation ul.links li.language {
	float: right;
	padding-top: 3px;
	}
    
/* content layout */
.dark-top-sep {
    height: 1px;
    background: url('../images/xx-page-dark-sep.jpg') 0px 0px no-repeat;
    }

.dark-bottom-sep {
    height: 1px;
    background: url('../images/xx-page-dark-sep.jpg') -1px 0px no-repeat;
    }

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

#body {
	background: url('../images/body-middle-bg.gif') top center repeat-y;
	position: relative;
    }

#body-top {
    background: url('../images/body-top-bg.gif') top center no-repeat;
    position: relative;
    padding-top: 32px;
    }

#body-bottom {
	background: url('../images/body-bottom-bg.gif') top center no-repeat;
	height: 204px;
	margin-top: -62px;
	}

#page {
	position: relative;
	left: -1px;
	width: 960px;
	margin: 0px auto;
	}

#page-header {
	position: relative;
    background: url('../images/panel-base-bg.jpg') top left repeat-y;
    }
    
#page-header .hrb {
	height: 1px;
    background: url('../images/panel-base-hr.jpg') -1px center no-repeat;
    }

#page-header h1, #page-header h1.accountmanagement a {
    display: block;
    padding: 0px;
    margin: 0px;
    height: 36px;
    }

#page-header h1.accountmanagement {
	float: left;
	margin-left: 6px;
    width: 420px;
}

#page-header h1.accountmanagement a {
    text-indent: -3000px;
    height: 36px;
    background: url('../images/header-account-management.png') center left no-repeat;
    }
    
#page-header a.logout {
	position: absolute;
	right: 4px;
	bottom: 4px;
	color: #e0e0e0;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    }
    
#page-header a.logout:hover {
    color: #ff7b0a;
    }

#page-navigation {
    background: url('../images/navigation-bg.jpg') top left repeat-x;
    overflow: hidden;
    height: 24px;
    }

#page-navigation ul.links {
    list-style-type: none;
    margin: 0px auto;
    padding: 0px;
    display: block;
    }
    
#page-navigation ul.links li {
    float: left;
    margin: 0px;
    padding: 0px;
    }

#page-navigation ul.links li a {
    color: #ffffff;
    text-decoration: none;
    }

#page-navigation ul.links li a, #page-navigation ul.links li a span {
    float: left;
    display: block;
    height: 24px;
    background: url('../images/navigation-item.jpg') top right no-repeat;
    cursor: pointer;
    }
    
#page-navigation ul.links li a span {
    padding: 2px 9px 0px 7px;
    /*padding: 6px 9px 0px 9px;*/

    }
    
#page-navigation ul.links li a:hover span {
    background-position: right -24px;
    }
    
#page-navigation ul.links li a.current span {
    background-position: right -24px;
    }

.legal.renewal {
	font-size: 86%;
	color: darkgreen;
	}

/* footer */
#page-footer {
    font-size: 95%;
    background: url('../images/panel-base-bg.jpg') top left repeat-y;
    padding-bottom: 2px;
    }
    
#page-footer .hrt {
	height: 1px;
	background: url('../images/panel-base-hr.jpg') top center no-repeat;
	}

#page-footer ul.links {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    padding-left: 6px;
    padding-top: 3px;
    padding-bottom: 10px;
    }

#page-footer ul.links li {
    float: left;
    margin: 0px;
    padding-left: 9px;
    padding-right: 5px;
    background: url('../images/bullet.gif') left center no-repeat;
    }

#page-footer ul.links li.first {
    padding-left: 0px;
    background: none;
    }

#page-footer ul.links a, #page-footer ul.links a:link, #page-footer ul.links a:visited {
    color: #ffffff;
    text-decoration: none;
    }

#page-footer ul.links a:hover {
    color: #ff8401;
    }

#page-footer .copyright {
    float: right;
    color: #b4b4b4;
    font-size: 92%;
    padding-right: 6px;
    margin: 0px;
    margin-top: -9px;
    }

.page-content {
	padding: 20px;
    color: #222222;
    background: url('../images/panel-content-bg.jpg') top center repeat-y;
    }
    
.page-content.home {
	padding: 0px;
	}

.page-content h2 {
    font-weight: bold;
    font-size: 1.75em;
    margin-bottom: 4px;
    }

.page-content h3 {
	font-weight: bold;
    font-size: 1.25em;
    margin-bottom: 4px;
    }

.page-content p {
    margin-top: 2px;
    margin-bottom: 1em;
    }

.page-content a {
    color: #35383e;
    text-decoration: none;
    font-weight: bold;
    }

.page-content a:hover {
    color: #55575d;
    }

.page-content .hr {
    height: 2px;
    margin: 8px;
    background: url('../images/panel-content-hr.jpg') top right no-repeat;
    }
	
.page-content .hsplit .lbox {
	float: left;
	padding: 15px 10px;
    width: 50%;
    }

.page-content .hsplit .lbox.divider {
	background: url('../images/panel-content-vr.jpg') top right repeat-y;
}

.page-content .rbox {
    float: right;
	padding: 15px 10px;
    width: 44%;
    }
    
.page-content .link_box {
	float: left;
    width: 45em;
    }
    
.page-content .l1 .c2 {
	padding: 20px;
    }

.pane.padded {
	padding: 20px;
	}

.pane.padded-top-only {
	padding-bottom: 0px;
	}

#page-top {
    height: 160px;
    background: url('../images/xx-body-top.gif') top center no-repeat;
}

#page-bottom {
    height: 160px;
    background: url('../images/xx-body-bottom.gif') top center no-repeat;
}

/* panels */
.panel.content {
    color: #222222;
    background: url('../images/panel-content-bg.jpg') top center repeat-y; 
    }

.panel.content a {
    color: #35383e;
    text-decoration: none;
    font-weight: bold;
    }

.panel.content a:hover {
    color: #55575d;
    }

.panel.content .hsplit {
    padding: 20px;
    background: url('../images/panel-content-vr.jpg') top center repeat-y; 
    }

.panel.content .hr {
    height: 2px;
    margin: 8px;
    background: url('../images/panel-content-hr.jpg') top right no-repeat;
    }

.pane.info {
    color: #d7d7d7;
    background: url('../images/panel-info-bg.jpg') top center repeat-y;
    }

.pane.info a {
    color: #e4ab00;
    text-decoration: none;
    font-weight: bold;
    }

.pane.info h3 {
    color: #f7f7f7;
    font-weight: bold;
    }

.pane.info .hr {
    height: 2px;
    margin: 8px;
    background: url('../images/panel-info-hr.jpg') top center no-repeat;
    }

/* forms */
td.header {
	text-align: left;
    width: 11em;
    }
    
table.form td.label {
    text-align: right;
    vertical-align: top;
    width: 15em;
    }
    
table.form td.field {
    vertical-align: top;
    width: 28em;
    }

div.link_box table.form td.label {
    width: 18em;
    }
    
div.link_box table.form td.field {
    width: 14.1em;
    float: right;
    }

em.required {
    display: inline-block;
    display: -moz-inline-box;
    text-indent: -9999px;
    background: url('../images/required-icon.gif') 0px 0px no-repeat;
    overflow: hidden;
    font-size: 0px;
    zoom: 1;
    vertical-align: middle;
    width: 9px;
    height: 8px;
    margin-top: -3px;
    margin-right: 4px;
    }

input.text, input.password {
    border: 1px solid #909090;
    padding: 2px;
    }

button, .button {
    color: #ffffff;
    /*background: #cf7417 url('../images/button-orange-bg.gif') left top repeat-x;*/
    background: #cf7417 url('../images/navigation-item.jpg') left top repeat-x;

    /*border-left: 1px #c95d00 solid;
    border-top: 1px #c95d00 solid;
    border-right: 1px #632e00 solid;
    border-bottom: 1px #632e00 solid;*/
    border-width: 0px;
    height: 24px;
    padding: 2px 6px 6px 7px;
    /*text-align: center;*/
    text-decoration: none;
    cursor: pointer;
    margin: 0px;
    min-width: 72px;
    font-size: 96%;
    margin-right: 6px;
    }
    
button, .cancel {
    color: #ffffff;
    background: #cf7417 url('../images/button-red-bg.gif') left top repeat-x;
    }
    
button:focus, button:hover, .button:focus, .button:hover {
    background-position: left -24px;
    background-color: #ed9235;
}

button.cancel:focus, button.cancel:hover, .button.cancel:focus, .button.cancel:hover {
    background-position: left -8px;
}

em.error {
    display: -moz-inline-box;
    display: inline-block;
    text-indent: -3000px;
    background: url('../images/error-icon.gif') top left no-repeat;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    overflow:hidden;
    }

.errors {
    display: none;
    position: relative;
    color: #fff;
    width: 240px;
    margin-left: 22px;
    }

.errors .content, .errors .top, .errors .bottom, .errors .bottom div {
    background: transparent url('../images/error-tip.png') no-repeat top right;
}

.errors .content {
    position: relative;
    padding: 0px 12px 0px 0px;
    }

.errors .top {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 22px;
    margin-left: -22px;
    height: 100%;
    _height: 1600px; /* arbitrary long height, IE 6 */
    background-position: top left;
}

.errors .bottom {
    position: relative;
    width: 100%;
    background-position: bottom right;
    }
    
.errors .bottom, .errors .bottom div {
    height: 9px;
    font-size: 1px;
    }

.errors .bottom div {
    position: relative;
    width: 22px;
    margin-left: -22px;
    background-position: bottom left;
    }
    
.errors .content ul {
    list-style-type: none;
    margin: 0px;
    padding: 10px 8px 6px 6px;
    }
    
form .buttons .progress {
    display: block;
    background: url('../images/content-wait.gif') left center no-repeat;
    padding: 2px 0px 3px 20px; 
    }
    
#cardNumber {
    width: 12em;
    }
    
#country, #addrCountry {
    width: 12em;
    }
    
#addrZip {
    width: 8em;
    }
    
/* grids */
table.grid {
    width: 100%;
    }

table.grid a, table.grid a:visited, table.grid a:link, table.grid a:active {
	color: #ffffff;
	}

table.grid th {
    border-bottom: 1px #555555 solid;
    }

table.grid tbody tr.odd {
	color: #ffffff;
    background-color: #323232;
    }
    
table.grid tbody tr.even {
	color: #ffffff;
    background-color: #262626;
    }
    
table.grid tbody tr.active {
	color: #ffffff;
    background-color: #464646;
    }
    
table.grid td.currency {
    text-align: right;
    }

table.transfer {
    width: 75%;
}

table.transfer th {
    border-bottom: 1px #555555 solid;
    }

table.transfer tbody tr.odd {
    background-color: #323232;
    }
    
table.transfer tbody tr.even {
    background-color: #262626;
    }
    
table.transfer tbody td.label {
    text-align: left;
    }
    
div.transferhistory {
    width: 100%;
}

table.transferhistory th {
    border-bottom: 1px #555555 solid;
    }

table.transferhistory tbody tr.odd {
    background-color: #323232;
    }
    
table.transferhistory tbody tr.even {
    background-color: #262626;
    }
    
table.transferhistory tbody td {
    text-align: center;
    }
        
table.transferhistory tbody td.label {
    text-align: left;
    }

/* tabs */
ul.tab-row { 
    background: url('../images/tab-row.gif') left bottom repeat-x;
    font-size: 0.9em;
    line-height: normal;
    white-space: nowrap;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul.tab-row li { 
    float: left;
    margin: 0px;
    padding: 0px;
    background: url('../images/tab-right.gif') right top no-repeat; 
}

ul.tab-row li a { 
    display: block;
    cursor: pointer;
    background: url('../images/tab-left.gif') left top no-repeat;
    padding: 4px 15px 3px;
    color: #ffffff;
}

ul.tab-row li a, ul.tab-row li a:active, ul.tab-row li a:hover, ul.tab-row li a:visited {
    color: #ffffff;
    outline: none;
}

ul.tab-row li:hover {
    background-position: right -28px; 
}

ul.tab-row li:hover a {
    background-position: left -28px; 
}

ul.tab-row li.current {
    background: url('../images/tab-right-active.gif') right top no-repeat;
}

ul.tab-row li.current a {
    background: url('../images/tab-left-active.gif') left top no-repeat;
    padding-bottom: 4px;
}

div.tab-page {
    clear: both;
    position: relative;
    padding: 8px;
    background: #9f4305 url('../images/tab-bg.gif') left bottom repeat-x;
    border-left: 1px solid #c95d00;
    border-right: 1px solid #632e00;
    border-bottom: 1px solid #632e00;
    color: #ffffff;
}

/* flair */
.flair {
    float: right;
    width: 318px;
    height: 295px;
    margin-top: -40px;
    background-position: left bottom;
    background-repeat: no-repeat;
    }
    
.flair.daoc1 {
    background-image: url('../images/flair-daoc-1.png');
    }
    
.flair.daoc2 {
    background-image: url('../images/flair-daoc-2.png');
    }
 
 .flair.uo1 {
    background-image: url('../images/flair-uo-1.png');
    }
    
.flair.uo2 {
    background-image: url('../images/flair-uo-2.png');
    }

.flair.uo3 {
    background-image: url('../images/flair-uo-3.png');
    }
    
.flair.uo4 {
    background-image: url('../images/flair-uo-4.png');
    }

.flair.war1 {
    background-image: url('../images/flair-war-1.png');
    }
    
.flair.war2 {
    background-image: url('../images/flair-war-2.png');
    }
    
.flair.war3 {
    background-image: url('../images/flair-war-3.png');
    }
    
.flair.war4 {
    background-image: url('../images/flair-war-4.png');
    }

.flair.war5 {
    background-image: url('../images/flair-war-5.png');
    }
    
.flair.war6 {
    background-image: url('../images/flair-war-6.png');
    }
    
/* icons */
.logo {
	float: right;
}
.logo.product1 {
    width: 51px;
    height: 35px;
    background: url('../images/logo-daoc-sm.png') left top no-repeat;
}

.logo.product2 {
    width: 109px;
    height: 37px;
    background: url('../images/logo-war-sm.png') left top no-repeat;
}
.logo.product5 {
    width: 25px;
    height: 36px;
    background: url('../images/logo-uo-sm.png') left top no-repeat;
}

.logo.ea {
    background: url('../images/logo_account_ea.png') center center no-repeat;
	height: 156px;
	
}

.logo.mythic {
    background: url('../images/logo_account_mythic.png') center center no-repeat;
	height: 180px;
}

.logo.eamythic {
    background: url('../images/logo_account_eamythic.png') center center no-repeat;
	height: 156px;	
}

.subscription .description {
    padding: 4px;
    border-left: 1px #3d3e40 solid;
    border-top: 1px #3d3e40 solid;
    border-right: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    background: #000000 url('../images/control-bg.gif') left top repeat-x;
    text-align: right;
}

.subscription .summary, .subscription .packages {
    padding: 6px;
    border-left: 1px #3d3e40 solid;
    border-top: 1px #3d3e40 solid;
    border-right: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    background: #000000 url('../images/control-bg.gif') top left repeat-x;
}

.subscription .packages {
    margin-top: 4px;
    height: 9em;
}

.subscription.inactive .tab-row li.active {
    background: url('../images/tab-right.gif') right top no-repeat;
    background-position: right -28px;
}

.subscription.inactive .tab-row li.active a {
    background: url('../images/tab-left.gif') left top no-repeat;
    background-position: left -28px;
}

.subscription.inactive .tab-row {
    background: url('../images/tab-row-inactive-bg.gif') left bottom repeat-x;
}

.subscription.inactive .tab-page {
    background: #000000 url('../images/tab-inactive-bg.gif') left top repeat;
    border-left: 1px solid #3d3e40;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.subscription.inactive .control {
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
}

.banner.buttons {
    padding-left: 144px;
    font-size: 12px;
}

h3.keybanner {
    padding: 0px;
    margin: 0px;
    width: 760px;
    height: 52px;
    background: url('../images/banner-key.jpg') left top no-repeat;
    margin-bottom: 16px;
    border-bottom: 0px;
}

h3.keybanner a {
    display: block;
    height: 100%;
    padding-top: 6px;
    padding-left: 144px;
    padding-bottom: 6px;
}

h3.keybanner a span {
    display: block;
    font-size: 0.7em;
    padding-top: 4px;
}

h3.rafbanner {
    padding: 0px;
    margin: 0px;
    width: 760px;
    height: 52px;
    background: url('../images/banner-raf.jpg') left top no-repeat;
    margin-bottom: 16px;
    border-bottom: 0px;
}

h3.rafbanner a {
    display: block;
    height: 100%;
    padding-top: 6px;
    padding-left: 144px;
    padding-bottom: 6px;
}

h3.rafbanner a span {
    display: block;
    font-size: 0.7em;
    padding-top: 4px;
}

h3.reactivatedaocbanner {
    padding: 0px;
    margin: 0px;
    width: 760px;
    height: 52px;
    background: url('../images/banner-reactivate-daoc.jpg') left top no-repeat;
    margin-bottom: 16px;
    border-bottom: 0px;
}

h3.reactivatedaocbanner a {
    display: block;
    height: 100%;
    padding-top: 6px;
    padding-left: 144px;
    padding-bottom: 6px;
}

h3.reactivatedaocbanner a span {
    display: block;
    font-size: 0.7em;
    padding-top: 4px;
}

h3.reactivateuobanner {
    padding: 0px;
    margin: 0px;
    width: 760px;
    height: 52px;
    background: url('../images/banner-reactivate-uo.png') left top no-repeat;
    margin-bottom: 16px;
    border-bottom: 0px;
}

h3.reactivateuobanner a {
    display: block;
    height: 100%;
    padding-top: 6px;
    padding-left: 144px;
    padding-bottom: 6px;
}

h3.reactivateuobanner a span {
    display: block;
    font-size: 0.7em;
    padding-top: 4px;
}

h3.reactivatewarbanner {
    padding: 0px;
    margin: 0px;
    width: 760px;
    height: 52px;
    background: url('../images/banner-reactivate-war.jpg') left top no-repeat;
    margin-bottom: 16px;
    border-bottom: 0px;
}

h3.reactivatewarbanner a {
    display: block;
    height: 100%;
    padding-top: 6px;
    padding-left: 144px;
    padding-bottom: 6px;
}

h3.reactivatewarbanner a span {
    display: block;
    font-size: 0.7em;
    padding-top: 4px;
}

h3.emailbanner {
    padding: 0px;
    margin: 0px;
    width: 760px;
    height: 52px;
    background: url('../images/banner-mail.jpg') left top no-repeat;
    margin-bottom: 16px;
    border-bottom: 0px;
}

h3.emailbanner a {
    display: block;
    height: 100%;
    padding-top: 6px;
    padding-left: 144px;
    padding-bottom: 6px;
}

h3.emailbanner a span {
    display: block;
    font-size: 0.7em;
    padding-top: 4px;
}

h3.transferbanner {
    padding: 0px;
    margin: 0px;
    width: 760px;
    height: 52px;
    background: url('../images/banner-transfer.jpg') left top no-repeat;
    margin-bottom: 16px;
    border-bottom: 0px;
}

h3.transferbanner a {
    display: block;
    height: 100%;
    padding-top: 6px;
    padding-left: 144px;
    padding-bottom: 6px;
}

h3.transferbanner a span {
    display: block;
    font-size: 0.7em;
    padding-top: 4px;
}

h3.trialbanner {
    padding: 0px;
    margin: 0px;
    width: 760px;
    height: 66px;
    background: url('../images/banner-trial.png') left top no-repeat;
    margin-bottom: 16px;
    border-bottom: 0px;
}

h3.trialbanner a {
    display: block;
    height: 100%;
    padding-top: 6px;
    padding-left: 144px;
    padding-bottom: 6px;
}

h3.trialbanner a span {
    display: block;
    font-size: 0.7em;
    padding-top: 4px;
}

/* autocomplete */
.ac_results {
    padding: 0px;
    border: 1px solid #909090;
    background-color: #ffffff;
    color: #000000;
    overflow: hidden;
    z-index: 99999;
}

.ac_results ul {
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ac_results li {
    margin: 0px;
    padding: 2px 5px;
    cursor: default;
    display: block;
    /* 
    if width will be 100% horizontal scrollbar will apear 
    when scroll mode will be used
    */
    /*width: 100%;*/
    /*font: menu;
    font-size: 12px;*/
    /* 
    it is very important, if line-height not setted or setted 
    in relative units scroll will be broken in firefox
    */
    line-height: 16px;
    overflow: hidden;
}

/*.ac_loading {
    background: white url('indicator.gif') right center no-repeat;
}*/

.ac_odd {
    background-color: #eee;
}

.ac_over {
    background-color: #0A246A;
    color: white;
}

/* help */
#help.overlay {
    display: none; 
    z-index: 10000; 
    background-image: url('../images/overlay-bg.png'); 
    width: 480px;
    min-height: 200px; 
    }
    
#help.overlay .close {
    background-image: url('../images/overlay-close.png'); 
    position: absolute; 
    right: 5px; 
    top: 5px; 
    cursor: pointer; 
    height: 35px; 
    width: 35px; 
    }
    
 #help.overlay .content {
    padding: 36px;
    }