html { overflow: auto; }
body { background-color: #000011; color: #FFFFFF; font-family: "Trebuchet MS", Arial, Helvetica; font-size: 13px; margin: 0; padding: 0 0 10px 0; }
a { color: #FFFFFF; }
img { border: 0; }
span.label:hover { cursor: pointer; }

a.help { text-decoration: none; border-bottom: 1px dotted #FFFFFF; cursor: help; }


/* Menu bar */
div.menu-bar  { background-color: #000000; height: 30px; border-bottom: 1px solid #3a3745; }
ul.menu-contener  { background: url('./images/bar-background.gif') no-repeat center; margin: auto; height: 30px; width: 996px; padding: 0; list-style-type: none; }
li.menu-item,
li.menu-item-expand { position: relative; float: left; padding: 5px 15px 0 15px; height: 26px; white-space: nowrap; }
li.menu-item a,
li.menu-item-expand a { display: block; color: #FFFFFF; text-decoration: none; }
li.menu-item-expand { cursor: default; padding-right: 35px; }
li.menu-item-expand form { padding: 0; margin: 0; }
li.menu-item-expand input.textbox { width: 100px; height: 16px; border: 1px solid #444444; background-color: #000000; color: #FFFFFF; }
li.menu-item-expand input.button { width: 40px; border: 1px solid #444444; background-color: #000000; color: #FFFFFF; }
li.menu-item-expand input.checkbox { margin: 0; padding: 0; border: 0px; }
li.menu-spacer { float: left; background: url('./images/bar-divider.gif') no-repeat; width: 1px; height: 30px; }
div.menu-expand-active { position: absolute; right: 10px; top: 8px; float: right; width: 14px; height: 14px; background: url('./images/bar-expand.gif') no-repeat bottom left; }
div.menu-expand { width: 14px; height: 14px; background: url('./images/bar-expand.gif') no-repeat top left; }

table.sub-menu { border-collapse: collapse; border-spacing: 0; position: absolute; top: 28px; left: 0; visibility: hidden; display: none; }
table.sub-menu td.border-left { width: 13px; background: url('./images/border-left.png') repeat-y; }
table.sub-menu td.border-right { width: 13px; background: url('./images/border-right.png') repeat-y; }
table.sub-menu td.border-bottom { height: 10px; background: url('./images/border-bottom.png') repeat-x; }
table.sub-menu td.corner-bottom-left { width: 13px; height: 10px; background: url('./images/border-corner-bottom-left.png') no-repeat; }
table.sub-menu td.corner-bottom-right { width: 13px; height: 10px; background: url('./images/border-corner-bottom-right.png') no-repeat; }
table.sub-menu td.content { background-color: #000000; padding: 5px 0 5px 0; }

table.sub-menu a,
table.sub-menu label { display: block; color: #FFFFFF; padding: 2px 4px 2px 4px; text-decoration: none; }
table.sub-menu a:hover,
table.sub-menu label:hover { background-color: #242424; text-decoration: none; }

li#progress-bar { width: 16px; height: 16px; margin: 7px 14px 0 0; float: right; background: url('./images/ajax-loader.gif') no-repeat; visibility: hidden; display: none; }


/* Banner */
div.banner { background: url('./images/page-banner.png') no-repeat; width: 450px; height: 70px; margin: 25px auto 0 auto; cursor: pointer; }
div.banner-subtitle { width: 440px; margin: 0 auto 45px auto; text-align: right; font-size: 10px; font-style: italic; padding-right: 10px; }


/* Content */
div.center { margin: auto; width: 810px; background: url('./images/page-bg.png') repeat-y; }
div.center-header { width: 810px; height: 20px; background: url('./images/page-header.png') no-repeat; border-bottom: 1px solid #444444; }
div.center-header div.navigation { padding-top: 2px; margin-left: 5px; font-size: 11px; }
div.center-header div.navigation a { text-decoration: none; }
div.center-header div.navigation span.arrow { color: #707070; }
div.center-footer { width: 810px; height: 36px; background: url('./images/page-footer.png') no-repeat; border-top: 1px solid #444444; text-align: center; font-size: 11px; color: #AAAAAA; padding-top: 2px; }
div.center-footer a { color: #AAAAAA; text-decoration: none; }
div.center-content { width: 810px; }
div#content { margin: 15px; position: relative; }
div#content form { margin: 0; padding: 0; }
div#content div.spacer-star { margin: 15px auto 10px auto; height: 9px; width: 666px; background: url('./images/page-spacer-star.png') no-repeat; }
div#content fieldset { border: 1px solid #444444; padding-top: 0; padding-bottom: 0; }
div#content legend { color: #FFFFFF; font-weight: bold; }
div#content div.fieldset-content { margin: 7px; }
div#content div.fieldset-content div.fields { margin: 10px 0 10px 0; }
div#content div.fieldset-content span.description-choice { cursor: pointer; }

div#content div.title { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 10px; }
div#content div.sub_title { text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 4px; }
div#content span.sub_title { font-size: 16px; font-weight: bold; }
div#content div.title_plus { width: 410px; font-weight: bold; text-align: center; margin: auto; height: 40px; }
div#content div.title_name { position: absolute; top: 18px; font-size: 22px; width: 390px; }
div#content div.title_bckgrd { position: absolute; top: 0; font-size: 28px; width: 390px; color: #444444; }
div#content textarea { vertical-align: top; }
div#content div.submit { text-align: center; margin-top: 15px; }


/* News */
div.notice { margin-bottom: 30px; text-align: justify; }
div.last_news { font-weight: bold; }
div.news { margin-top: 20px; }
div.news div.top { position: relative; border-bottom: 1px solid #444444; }
div.news div.top span.title { font-weight: bold; }
div.news div.top span.date { font-size: 11px; color: #666666; }
div.news div.top a.discuss { position: absolute; top: 0; right: 0; font-size: 11px; color: #666666; text-decoration: none; }


/* Tabs*/
table.tabs { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 10px; }
table.tabs td { padding: 3px 8px 3px 8px; white-space: nowrap; }
table.tabs td.spacer-left { width: 20px; border-bottom: 1px solid #444444; }
table.tabs td.tab-coh:hover,
table.tabs td.tab-cov:hover,
table.tabs td.tab-coh-active:hover,
table.tabs td.tab-cov-active:hover,
table.tabs td.tab-dj:hover,
table.tabs td.tab-dj-active:hover { background-color: #222222; }
table.tabs td.tab-coh,
table.tabs td.tab-cov,
table.tabs td.tab-dj { border: 1px solid #444444; cursor: pointer; background-color: transparent; }
table.tabs td.tab-coh-active,
table.tabs td.tab-cov-active,
table.tabs td.tab-dj-active { background-color: #222222; border: 1px solid #444444; font-weight: bold; cursor: default; }
table.tabs td.spacer-right { width: 100%; border-bottom: 1px solid #444444; border-left: 1px solid #444444; }

div.tab-coh,
div.tab-cov,
div.tab-dj { visibility: hidden; display: none; }
div.tab-active { visibility: visible; display: block; }

/* Tables */
div.table { display: table; border-collapse: collapse; }
div.tr { display: table-row; }
div.td { display: table-cell; }
div.table div.left { float: left; }
div.table div.right { vertical-align: top; float: right; }

/* Categories */
div.tableCategories { display: table; border-collapse: collapse; width: 780px; }
div.tableCategories div.tr div.td div.previous { position: absolute; }
div.tableCategories div.tr div.td div.previous a { text-decoration: none; white-space: nowrap; }
div.tableCategories div.left { float: left; width: 190px; }
div.tableCategories div.right { vertical-align: top; width: 590px; }
div.tableCategories div.right2 { margin-left: 190px; height: 360px; }
ul.categories { width: 172px; padding: 0; margin: 0; list-style-type: none; position: absolute; top: 0; left: 0; bottom: 0; }
li.category a { background: url('./images/categories-item-bg.png') no-repeat top left; display: block; text-indent: 25px; padding-top: 3px; font-size: 13px; font-weight: bold; color: #FFFFFF; text-decoration: none; width: 172px; height: 21px; }
li.category a:hover { background-position: 0px -24px; }
li.category a.active { background-position: 0px -24px; }


/* Display Box */
div#display-box { position: fixed; top: 0; left: 0; background: url('./images/display-box-background.png'); z-index: 5; visibility: hidden; display: none; }
table.display-box { border-collapse: collapse; border-spacing: 0; margin: auto; }
table.display-box td.border-left { width: 13px; background: url('./images/border-left.png') repeat-y; }
table.display-box td.border-right { width: 13px; background: url('./images/border-right.png') repeat-y; }
table.display-box td.border-top { height: 10px; background: url('./images/border-top.png') repeat-x; }
table.display-box td.border-bottom { height: 10px; background: url('./images/border-bottom.png') repeat-x; }
table.display-box td.corner-bottom-left { width: 13px; height: 10px; background: url('./images/border-corner-bottom-left.png') no-repeat; }
table.display-box td.corner-bottom-right { width: 13px; height: 10px; background: url('./images/border-corner-bottom-right.png') no-repeat; }
table.display-box td.corner-top-left { width: 13px; height: 10px; background: url('./images/border-corner-top-left.png') no-repeat; }
table.display-box td.corner-top-right { width: 13px; height: 10px; background: url('./images/border-corner-top-right.png') no-repeat; }
table.display-box td.content { background-color: #000000; padding: 5px 0 5px 0; }
div#display-box div#display-box-content { overflow: auto; max-height: 500px; min-height: 20px; padding: 5px 20px 0 20px; }

div#display-box div.loading  { width: 200px; height: 20px; background: url('./images/ajax-loader.gif') center no-repeat; }

div#display-box div.close  { text-align: right; margin-top: 13px; }
div#display-box div.close a  { cursor: pointer; }
div#display-box div.close img  { vertical-align: middle; }


/* Badges */
div.badge-update { text-align: center; }
div.badge-update button.badge-update { border: 1px solid #444444; background-color: transparent; color: #FFFFFF; }
div.badge-update button.top { margin-bottom: 20px; }
div.badge-update button.bottom { margin-top: 20px; }
img#progress-bar { margin: auto; visibility: hidden; display: none; }

table#badge-moving { background-color: #222222; border-collapse: collapse; border-spacing: 0; width: 590px; padding: 0; position: fixed; visibility: hidden; }
table#badge-list { border-collapse: collapse; border-spacing: 0; width: 100%; padding: 0; }
table#badge-list td.table-header { font-weight: bold; }
table#badge-moving td { height: 54px; }
table#badge-moving img,
table#badge-list img { vertical-align: bottom; }
table#badge-moving td.dragHandle,
table#badge-list td.dragHandle { cursor: move; background-color: #444444; width: 7px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
table#badge-moving td.icon,
table#badge-list td.icon { border-top: 1px solid #444444; border-bottom: 1px solid #444444; }
table#badge-moving td.icon2,
table#badge-list td.icon2 { width: 33px; text-align: center; }
table#badge-list td.checkbox { border-top: 1px solid #444444; border-bottom: 1px solid #444444; }
table#badge-moving td.checkbox2,
table#badge-list td.checkbox2 { width: 33px; text-align: center; }
table#badge-moving td.badge,
table#badge-list td.badge { height: 54px; border-top: 1px solid #444444; border-bottom: 1px solid #444444; }
table#badge-moving td.badge2,
table#badge-list td.badge2 { width: 90px; text-align: center; }
table#badge-moving td.name,
table#badge-list td.name { border-top: 1px solid #444444; border-bottom: 1px solid #444444; }
table#badge-moving td.name2,
table#badge-list td.name2 { padding-left: 5px; }
table#badge-moving td.name a,
table#badge-list td.name a { text-decoration: none; }
table#badge-moving td.area,
table#badge-list td.area { border-top: 1px solid #444444; border-bottom: 1px solid #444444; }
table#badge-moving td.area2,
table#badge-list td.area2 { width: 180px; padding-left: 15px; }
table#badge-moving td.action,
table#badge-list td.action { width: 16px; }
table#badge-list tr.checked { background-color: #202020; }
table#badge-list tr.removed { background-color: #303030; }
table#badge-list tr.hide { display: none; visibility: hidden; }
table#badge-list td.disabled { background-color: #202020; }

a.name-coh, span.name-coh { color: #005AFF; }
a.name-cov, span.name-cov { color: #E00000; }

div.badge-character-details { text-align: center; }
div.badge-buttons a { text-decoration: none; }
div.badge-buttons { width: 100%; margin-bottom: 10px; }
div.badge-buttons div.right { text-align: right; }
div.badge-buttons div.left, div.badge-buttons div.right { width: 190px; }
div.badge-buttons div.middle { width: 208px; text-align: center; }
div.badge-buttons button { border: 1px solid #444444; background-color: #000000; color: #FFFFFF; }
div.badge-buttons label.display-hide-checked { cursor: pointer; }
div.badge-buttons label.display-hide-checked input { vertical-align: bottom; }
div.badge-progress-bar { height: 10px; width: 200px; background-color: #000000; border: 1px solid #444444; margin: auto; }
div.badge-progress-bar div { height: 10px; border-right: 1px solid #444444; }
div.badge-progress-bar div.coh { background-color: #000077; }
div.badge-progress-bar div.cov { background-color: #770000; }
div.badge-progress-bar div.both { background-color: #2b2b2b; }
div.bpb-character-details { margin-top: 20px; }


/* Account - Characters list */
div.characters-list { width: 390px; }
div.characters-list div.game { margin-top: 20px; margin-bottom: 5px; }
div.characters-list div.game img { vertical-align: bottom; }
div.characters-list div.game div.add-character { float: right; margin-right: 5px; }
div.characters-list div.separator { height: 30px; }
div.characters-list div.table { width: 390px; border-collapse: collapse; border-spacing: 0; cursor: pointer; }
div.characters-list div.table div.td { height: 20px; }
div.characters-list div.table div.hover { height: 49px; }
div.characters-list div.table div.hover:hover,
div.characters-list div.table div.active { background-color: #202020; }
div.characters-list div.table div.active2 { background-color: #444444; }
div.characters-list div.table div.icon { width: 22px; padding-top: 4px; border-top: 1px solid #444444; }
div.characters-list div.table div.icon img { margin-left: 2px; }
div.characters-list div.table div.name { width: 261px; padding-top: 4px; padding-left: 5px; border-top: 1px solid #444444; }
div.characters-list div.table div.server { width: 72px; padding-top: 4px; padding-right: 5px; text-align: right; border-top: 1px solid #444444; }
div.characters-list div.table div.border1 { width: 3px; padding-top: 4px; border-top: 1px solid #444444; }
div.characters-list div.table div.border2 { width: 3px; padding-bottom: 4px; border-bottom: 1px solid #444444; }
div.characters-list div.table div.bar { width: 387px; border-bottom: 1px solid #444444; padding-bottom: 4px; }
div.characters-list div.table div.bar div.badge-progress-bar { float: right; margin: 3px 5px 0 5px; }
div.characters-list div.table div.bar div.numbers { float: right; text-align: right; }
div.characters-list div.no-character { text-align: center; margin-top: 10px; }

div#characters-details { width: 388px; margin-top: 20px; background-color: #202020; border: 1px solid #444444; }
div.characters-badges div.characters { position: relative; font-weight: bold; margin: 5px 0 15px 5px; height: 20px; }
div.characters-badges div.characters img { vertical-align: bottom; float: left; }
div.characters-badges div.characters div { position: absolute; top: 0; left: 20px; margin-left: 10px; }
div.characters-badges div.characters span { position: absolute; top: 0; right: 0; margin-right: 10px; }
div.characters-badges ul { padding: 0; margin: 0 0 0 10px; width: 385px; list-style-type: none; }
div.characters-badges li { padding: 0; width: 380px; }
div.characters-badges li div.table div.bar { width: 370px; height: 20px; padding-bottom: 4px; }
div.characters-badges li div.table div.bar div.badge-progress-bar { float: right; margin: 3px 0 0 5px; }
div.characters-badges li div.table div.bar div.numbers{ float: right; text-align: right; }
div.link-top { text-align: right; }
div.link-top a { text-decoration: none; }


/* Badge details */
div.badge-details { margin: auto; width: 450px; }
div.badge-details div.name { text-align: center; font-size: 15px; font-weight: bold; }
div.badge-details div.image { width: 100%; text-align: center; margin-top: 20px; margin-bottom: 10px; }
div.badge-details div.image_coh { width: 50%; text-align: center; }
div.badge-details div.image_cov { width: 50%; text-align: center; }
div.badge-details span.details { font-weight: bold; }
div.badge-details a.loc { text-decoration: none; border-bottom: 1px dotted #FFFFFF; }
div.badge-details ul { padding: 0; margin: 0 0 0 20px; }
div.badge-details ul a { text-decoration: none; }


/* Character details */
div.character-details a { text-decoration: none; }
div.character-details div.text-center { text-align: center; }
div.character-details div.text-right { text-align: right; }
div.character-details div.info-left { width: 200px; }
div.character-details div.info-center { width: 410px; }
div.character-details div.info-right { width: 200px; }
div.character-details div.info-right div.icons { width: 98px; margin: auto; }
div.character-details div.info-right div.icons img { margin: 0 5px 0 5px; }
div.character-details div.info-right a.pdm { float: left; }
div.character-details div.info-right a.pdm img { padding-bottom: 3px; }
div.character-details div.badge-name { text-align: center; height: 25px; margin-top: 3px; font-weight: bold; color: #000000; }
div.character-details img.badges-missing,
div.character-details img.badges-removed { display: none; visibility: hidden }
div.character-details span#hide-badges-missing { display: none; visibility: hidden }
div.character-details span#display-badges-missing,
div.character-details span#hide-badges-missing { cursor: pointer }


/* DayJob */
div.dj div.explanation { margin: 15px auto 15px auto; }
div.dj input.submit { float: right; }
div.dj input.submit, div.dj input { border: 1px solid #444444; background-color: #000000; color: #FFFFFF; }
div.dj div.dj-result { margin: 10px auto 10px auto; text-align: center; visibility: hidden; }


/* Form */
form.form { padding: 0; margin: 0;}
form.form input, form.form select, form.form textarea, button.button { border: 1px solid #444444; background-color: #000000; color: #FFFFFF; }
form.form input:focus, form.form select:focus, form.form textarea:focus, button.button:focus { border: 1px solid #916C23; }


/* Top characters */
div.top-filter { height: 22px; margin-top: 25px; }
table.characters-top tr.coh { background-color: #000077; }
table.characters-top tr.cov { background-color: #770000; }

table.characters-top thead td { border: 1px solid #AAAAAA; font-weight: bold; text-align: center; padding: 2px 0 2px 0; }
table.characters-top thead td.position { width: 40px; }
table.characters-top thead td.PdM { width: 40px; }
table.characters-top thead td.name { width: 415px; }
table.characters-top thead td.server { width: 70px; }
table.characters-top thead td.total { width: 56px; }
table.characters-top thead td.details { width: 135px; }

table.characters-top tbody tr.character  { text-align: center; }
table.characters-top tbody td { border: 1px solid #666666; padding: 2px 5px 2px 5px; }
table.characters-top tbody td img { vertical-align: middle; border: 0; }
table.characters-top tbody td.name { text-align: left; }
table.characters-top tbody span.more-details { cursor: pointer; }
table.characters-top tbody a.info { text-decoration: none; }
table.characters-top tbody tr.details { display: none; }
table.characters-top tbody tr.details td { border: 0; padding: 0 0 10px 0; }
table.characters-top tbody tr.details td table.details { margin: auto 30px auto 30px; width: 696px; }
table.characters-top tbody tr.details td table.details td { border: 1px solid #666666; padding: 2px 5px 2px 5px; }
table.characters-top tbody tr.details td table.details td.badges { font-weight: bold; }
table.characters-top tbody tr.details td table.details td.number { text-align: center; width: 20px; cursor: pointer; }
table.characters-top tbody tr.details div.loading  { width: auto; height: 20px; background: url('./images/ajax-loader.gif') center no-repeat; }


/* Pagination */
table.pagination { margin: 10px auto auto auto; text-align: center; border-collapse: collapse; }
table.pagination td { font-weight: bold; color: #666666; }
table.pagination td div.current { background-color: #333333; color: #FFFFFF; }
table.pagination td div,
table.pagination td a { border: 1px solid #666666; padding: 0 6px 0 6px; }
table.pagination td a { color: #FFFFFF; display: block; text-decoration: none; }
table.pagination td a:hover { background-color: #333333; }


/* Links, Donation */
div.links, div.donation { width: 100%; margin-top: 30px; }
div.links div.td { width: 50%; }
div.links div.link_description { display: none; visibility: hidden; }