/* Ecaflip'a coin - Wakfu TCG FanSite
 *
 * CSS File - /styles/new.styles.css - main stylesheet file
 *
 */ 

/* RESET & BASICS */

* { margin: 0; padding: 0; }

:focus { outline: 0; }

img { border: 0; }

.clear { clear: both; }

ul, ol { list-style-position: inside; }

a:link, a:visited { text-decoration: none; color: #669; }

a:hover { color: #339; }

acronym, abbr { cursor: help; }

hr { width: auto; margin: 10px auto; height: 6px; background: url(design/footer_bcg.png) top center no-repeat; border: 0; clear: both; }

/* DESIGN */

html { width: 100%; height: 100%; background: white url(design/bcg_pattern.jpg) top center repeat-y; }

body { width: 100%; min-height: 100%; background: transparent url(design/bcg_gen.jpg) top center no-repeat; font: normal 62.5%/1.5 Verdana, Helvetica, Arial, sans-serif; color: #555; text-align: center; position: relative; text-align: center; }

/* HEADER */

#header { width: 100%; height: 300px; margin: 0 auto; background: transparent url(design/header.new.jpg) top center no-repeat; position: relative; }

#header div#links { width: 960px; height: 275px; top: 25px; left: 50%; margin: 0 0 0 -480px; position: absolute; }

#header div#links a#home_link { display: block; width: 960px; height: 275px; margin: 0 auto 0; text-indent: -9999px; }

#header div#links a#kama { display: block; width: 30px; height: 20px; position: absolute; top: 15px; left: 425px; text-indent: -9999px; }

/* TOP BAR */

div#top_bar { position: relative; width: 970px; height: 25px; margin: 0 auto; }

div#top_bar h1 { position: absolute; width: 325px; height: 25px; top: 0; left: 0px; }

div#top_bar h1 a { display: block; text-indent: -9999px; width: 325px; height: 25px; }

div#top_bar ul { list-style: none; text-align: right; position: absolute; top: 3px; right: 0; }

div#top_bar ul li { display: inline; color: white; }

div#top_bar ul li a, div#top_bar ul li a:visited { text-decoration: none; color: #ccf; }

div#top_bar ul li a:hover { color: #99f; }

/* MENU */

ul#menu { list-style: none; width: 960px; height: 40px; background: url(design/menu.jpg) 0 -80px no-repeat; margin: 0 auto; position: relative; }

ul#menu li { position: absolute; height: 40px; top: 0; }

ul#menu li a { display: block; height: 40px; width: auto; }

ul#menu li span { display: block; text-indent: -9999px; }

ul#menu li#wakfu_tcg { width: 130px; left: 0; }
ul#menu li#wakfu_tcg a { background: url(design/menu.jpg) 0 -40px no-repeat; }
ul#menu li#wakfu_tcg a:hover, ul#menu li#wakfu_tcg a.active { background: url(design/menu.jpg) 0 0 no-repeat; }

ul#menu li#cards { width: 95px; left: 130px; }
ul#menu li#cards a { background: url(design/menu.jpg) -130px -40px no-repeat; }
ul#menu li#cards a:hover, ul#menu li#cards a.active { background: url(design/menu.jpg) -130px 0 no-repeat; }

ul#menu li#articles { width: 110px; left: 225px; }
ul#menu li#articles a { background: url(design/menu.jpg) -225px -40px no-repeat; }
ul#menu li#articles a:hover, ul#menu li#articles a.active { background: url(design/menu.jpg) -225px 0 no-repeat; }

ul#menu li#decks { width: 83px; left: 335px; }
ul#menu li#decks a { background: url(design/menu.jpg) -335px -40px no-repeat; }
ul#menu li#decks a:hover, ul#menu li#decks a.active { background: url(design/menu.jpg) -335px 0 no-repeat; }

ul#menu li#combos { width: 101px; left: 418px; }
ul#menu li#combos a { background: url(design/menu.jpg) -418px -40px no-repeat; }
ul#menu li#combos a:hover, ul#menu li#combos a.active { background: url(design/menu.jpg) -418px 0 no-repeat; }

ul#menu li#calendrier { width: 128px; left: 519px; }
ul#menu li#calendrier a { background: url(design/menu.jpg) -519px -40px no-repeat; }
ul#menu li#calendrier a:hover, ul#menu li#calendrier a.active { background: url(design/menu.jpg) -519px 0 no-repeat; }

ul#menu li#ligue { width: 72px; left: 647px; }
ul#menu li#ligue a { background: url(design/menu.jpg) -647px -40px no-repeat; }
ul#menu li#ligue a:hover, ul#menu li#ligue a.active { background: url(design/menu.jpg) -647px 0 no-repeat; }

ul#menu li#boitacartes { width: 163px; left: 724px; }
ul#menu li#boitacartes a { background: url(design/menu.jpg) -724px -40px no-repeat; }
ul#menu li#boitacartes a:hover, ul#menu li#boitacartes a.active { background: url(design/menu.jpg) -724px 0 no-repeat; }

ul#menu li#forum { width: 78px; left: 887px; }
ul#menu li#forum a { background: url(design/menu.jpg) -887px -40px no-repeat; }
ul#menu li#forum a:hover, ul#menu li#forum a.active { background: url(design/menu.jpg) -887px 0 no-repeat; }

/* DESIGN */

#container { width: 960px; margin: 0 auto; text-align: left; }

#content { width: 960px; margin: 30px auto 10px; }

#floatholder { width: 960px; margin: 0 auto; position: relative; }

#left { float: left; width: 680px; }

#right { float: right; width: 280px; }

/* FOOTER & COPYRIGHT */

div#footer { padding: 1px 0; }

div#copyright { width: 940px; margin: 15px auto 0; padding: 5px 0 10px; text-align: right; font-size: .9em; background: url(design/footer_bcg.png) top center no-repeat; }

div#copyright a:link, div#copyright a:visited { text-decoration: none; color: #99c; }

/* FORM GENERIC STYLES */

form { margin: 10px auto 0; }

fieldset { border: 0; margin: 0 auto 20px; }

fieldset legend { font: bold 1.4em "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; color: #555; margin: 0 auto 5px; }

div.form_elt { margin: 5px auto; clear: left; }

div.form_elt label { display: block; float: left; margin: 0 5px 0 0; font: bold 1.2em "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; padding: 2px 0 0; }

div.form_elt input, input.text, div.form_elt select { display: block; float: left; border: 1px solid gray; -moz-border-radius: 2px; background: url(images/field_bcg.png) bottom left repeat-x; padding: 2px; margin: 0 0 10px; }

div.form_elt textarea { font: normal 1.1em Verdana, Helvetica, Arial, sans-serif; display: block; float: left; border: 1px solid gray; -moz-border-radius: 2px; background: #fafafa url(images/field_bcg.png) bottom left repeat-x; padding: 2px; margin: 0 auto 10px; }

div.form_elt input.big_number, div.form_elt input.big_number { width: 50px; text-align: right; }

div.form_elt input.medium_number { width: 30px; text-align: right; }

div.form_elt .mediumtext { width: 300px; }

div.form_elt .bigtext { width: 550px; }

div.form_elt input:disabled { color: #777; }

div.form_elt select option { padding: 0 7px 0 2px; background: #fafafa; }

div.form_elt select.multiple { background-color: #fafafa; width: 300px; }

div.form_elt select.multiple option { background: transparent; }

div.form_elt div.date_select select { margin: 0 5px 0 0; }

div.form_elt .bbcode_box { float: left; margin: -10px 5px 0 0; }

div.form_button { clear: left; margin: 10px auto 0; text-align: center; }

input#connect_button { border: 1px solid gray; -moz-border-radius: 2px; background: url(images/connect_button.png) left center no-repeat; padding: 1px 1px 1px 20px; color: #444; cursor: pointer; }

input#search_button { border: 1px solid gray; -moz-border-radius: 2px; background: url(images/search_button.png) -2px center no-repeat; padding: 2px 1px 2px 20px; color: #444; cursor: pointer; }

input#save_button, input.save_button { border: 1px solid gray; -moz-border-radius: 2px; background: transparent url(images/save_button.png) left center no-repeat; padding: 1px 1px 1px 20px; color: #444; cursor: pointer; }

/* UPPER */

span.upper_container { position: relative; padding: 0 15px 0 0; }

span.upper_container span.upper { display: block; position: absolute; width: 15px height: 20px; top: -3px; right: 0; }

span.upper a.upper_up { display: block; position: absolute; width: 15px; height: 10px; top: 0; right: 0; text-indent: -9999px; background: url(images/upper.png) top left no-repeat; }

span.upper a.upper_down { display: block; position: absolute; width: 15px; height: 10px; top: 10px; right: 0; text-indent: -9999px;  background: url(images/upper.png) bottom left no-repeat; }

/* LIGUE BOX */

div.ligue_box { width: 240px; height: 85px; background: url(design/ligue_box.png) top left no-repeat; position: relative; margin: 0 0 10px; }

div.ligue_box div { width: 80px; height: 36px; position: absolute; }

div.ligue_box div.rank { top: 7px; left: 5px; width: 75px; }
div.ligue_box div.points { top: 7px; left: 80px; }
div.ligue_box div.matches { top: 7px; left: 160px; width: 75px; }
div.ligue_box div.victoires { bottom: 5px; left: 5px; width: 75px; }
div.ligue_box div.draws { bottom: 5px; left: 80px; }
div.ligue_box div.defaites { bottom: 5px; left: 160px; width: 75px; }

div.ligue_box div strong { font-size: 0.9em; display: block; position: absolute; top: 2px; left: 5px; }
div.ligue_box div span { display: block; position: absolute; bottom: 1px; right: 5px; font: bold 1.6em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }

/* ERRORS */

div#error_content { width: 670px; float: left; }

div#error_content h2 { width: 500px; height: 60px; margin: 0 0 20px; text-indent: -9999px; background: url(design/error_title.png) 10px bottom no-repeat; }

div#error_content div#error { width: 600px; height: 650px; background: url(design/leny_error.png) top left; position: relative; }

div#error_content div#error div#message { width: 250px; position: absolute; top: 180px; left: 380px; }

div#error_content div#error div#message h3 { text-align: center; font: bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; margin: 0 auto 10px; }

div#error_content div#error div#message p { font-size: 1.1em; margin: 0 auto 10px; text-align: justify; }

div#error_content div#error div.backlink { margin: 0 auto 10px; }

div#error_content div#error div.backlink a, div#error_content div#error div.backlink a:hover { color: #888; font-weight: bold; }

/* SPECIAL COL LEFT */

div#col_right { width: 271px; height: 621px; position: relative; margin: 5px auto 0; }

div#col_right.flch1 { background: url(colright/flch1.png) top center no-repeat; }
div#col_right.flch2 { background: url(colright/flch2.png) top center no-repeat; }
div#col_right.corr { background: url(colright/corr.png) top center no-repeat; }
div#col_right.brelondass { background: url(colright/brelondass.png) top center no-repeat; }
div#col_right.pdatak { background: url(colright/pdatak.png) top center no-repeat; }
div#col_right.pdatak2 { background: url(colright/pdatak2.png) top center no-repeat; }
div#col_right.purgation { background: url(colright/purgation.png) top center no-repeat; }
div#col_right.purgation2 { background: url(colright/purgation2.png) top center no-repeat; }
div#col_right.conv4 { background: url(colright/convention4.png) top center no-repeat; }
div#col_right.gardiens { background: url(colright/gardiens.png) top center no-repeat; }

/* LISTINGS */

table.listing { margin: 10px auto; border-collapse: collapse; border-spacing: 0; width: 95%; }

table.listing tr td, table.listing tr th { padding: 4px 2px; vertical-align: middle; }

table.listing tr.altern td { background: url(design/semi_opaque.png); }

table.listing tr.system_msg td { background: #b2e7ff; }

table.listing tr:hover td { background: url(design/semi_opaque.png); }

table.listing tr:hover td.separator { background: none; }

table.listing tr td.name { width: 200px; font-size: 1.2em; }

table.listing tr td.name span.short_desc { display: block; font-size: 0.9em; }

table.listing tr td img { vertical-align: middle; }

table.listing tr td.icon, table.listing tr th.icon { width: 16px; padding: 2px 4px; text-align: center; }