body { background-color: #000; margin: 0 auto; padding: 0; text-align:center; }
#content { width:1000px; margin: 30px auto; color:#7d7d7d; font:12px/20px Arial; text-align:justify; -moz-border-radius:17px; padding:20px; background-color:#0e0c06; border:1px solid #2b200e; }
.center { margin: 0 auto; text-align: center; } .left { float: left; } .right { float:right; }
.white { color:#fff; } .error { background-color:#512222; border: 1px solid #7b3131; color: c60000; font: bold 12px/18px Verdana; padding: 5px; }
h1,h2,h3,h4 { font-weight: bold; }
h1 { color:#d0d0d0; font-size:24px; }
h2 { color:#c5c5c5; font-size:21px; }
h3 { color:#b8b8b8; font-size:18px; }
h4 { color:#b0b0b0; font-size:15px; }
input, select { background-color: #11100e; border: 1px solid #252421; color: #545454; font: 14px/20px Georgia; padding: 2px; }
input:hover, select:hover { background-color: #070606; border-color: #2f2d29; color: #585858; }

select { margin: 5px auto; width: 100%; }
#buildy { display: block; }
#tal-klasy { width: 575px; height: 52px; margin: 0 auto; }
#tal-klasy a { display: block; float: left; height: 43px; width: 44px; background: #0e0c05 url("./klasy.gif") no-repeat; margin: 4px; }
#tabelka { width: 550px; }
#tabelka .left, #tabelka .right, #tabelka .both { background-color: #070602; border: 1px dashed #0d0c09; padding: 5px 10px; margin: 5px 0; }
#tabelka .left { width: 250px; float: left; clear: both; }
#tabelka .right { width : 250px; float: right; }
#tabelka .both { width : 528px; clear: both; }
#tabelka a { display: block; }
a { color: #938f6e; font: 15px Verdana; font-weight: bold; cursor: pointer; }
a:hover { color: #c7c6ba; text-decoration: underline; }

a.button { display: block; background: transparent url("./button.gif") no-repeat; width: 170px; height: 21px; margin: 10px auto; font: bold 11px/21px Arial; text-align: center; color: #ffd100; text-shadow: 2px 2px 1px #000; }
a.button:hover { background-position: 0 -21px; text-decoration: none; }
a.button:focus { background-position: 0 -42px; }

.t-window .t-middle.spec { display: none; cursor: pointer; }
.t-window .t-middle.spec span { display: block; clear: both; margin-top: 100px; color: #fff; padding: 15px; font: 12px/20px Arial; bottom: 10px; position: absolute; text-align: justify; }
.tspec { height: 56px; width: 56px; margin: 20px auto; background-repeat: no-repeat; -moz-border-radius: 25px; }
.tspec-icon { position: relative; left: -11px; top: -11px; width: 78px; height: 78px; background: transparent url("./kolko.gif") no-repeat; }
.tspec-role { position: relative; width: 20px; height: 20px; background: transparent url("./role.gif") no-repeat; } 
.role0 { left: 42px; bottom: 36px; }
.role1 { left: 50px; bottom: 72px; }
.tspec-role.healer { background-position: -21px 0; } 
.tspec-role.tank { background-position: -41px 0; } 
.specline div.talent { width: 54px; height: 45px; }
.specline.main { margin: 5px 15px; }
.specline { width: 262px; height: 40px; clear: both; }
.specline .talent { float: left; }
.specline a { color:#FFD100; display: block; float: left; font: 12px Tahoma; padding: 23px 5px 5px; }
.specline.main a { font-size: 16px; margin-left: 8px; }
.specline a:hover { color: white; text-decoration: none; }

.t-window .t-middle { background-color: #000; }
.t-window.orange .t-middle.spec { background-color:#080600; } .orange .tspec { -moz-box-shadow: 0 0 100px #ffcc00; }
.t-window.red .t-middle.spec { background-color:#080000; } .red .tspec { -moz-box-shadow: 0 0 100px #ff0000; }
.t-window.blue .t-middle.spec { background-color:#000008; } .blue .tspec { -moz-box-shadow: 0 0 100px #0000ff; }
.t-window.darkblue .t-middle.spec { background-color:#000005; } .darkblue .tspec { -moz-box-shadow: 0 0 100px #0000cc; }
.t-window.lightgreen .t-middle.spec { background-color:#020802; } .lightgreen .tspec { -moz-box-shadow: 0 0 100px #22ff22; }
.t-window.pink .t-middle.spec { background-color:#080008; } .pink .tspec { -moz-box-shadow: 0 0 100px #ff00ff; }
.t-window.purple .t-middle.spec { background-color:#050008; } .purple .tspec { -moz-box-shadow: 0 0 100px #cc00ff; }
.t-window.purple .t-middle.spec { background-color:#050008; } .purple .tspec { -moz-box-shadow: 0 0 100px #cc00ff; }

.tytul { margin: 25px auto 13px; }
#talenty { margin: 0 auto; width: 910px; clear: both; }
/*okienko z talentami */
.t-window {
position: relative;
float: left;
min-height: 522px;
max-height: 828px;
color: #e4c600;
font-family: Tahoma;
font-size: 10px;
cursor: default;
margin: 0 10px;
} div.tab {
display: block;
background: transparent url(./inactive_tab.gif) 0 0 no-repeat;
height: 18px;
color: #e4c600;
width: 79px;
text-align: center;
cursor: pointer;
position: absolute;
top: -27px;
padding-top: 12px;
font-size: 10px;
font-family: Tahoma;
line-height:10px;
} div.act.tab {
background: transparent url(./active_tab.gif) 0 0 no-repeat;
color: #FFF;
cursor: default;
} .tab#atab { left: 21px; }
.tab#btab { left: 112px; }
.tab#ctab { left: 202px; }
.tab:hover {
color: #FFF;
background: transparent url(./inactive_tab.gif) 0 -30px no-repeat;
} .t-window .t-top {
background: transparent url("./talent_window_up.gif") no-repeat;
width: 282px;
height: 64px;
text-align: center;
} .t-window .t-top .wline1 {
font-size: 13px;
padding-top: 2px;
line-height: 17px;
} .t-window .t-top .wline1 span.white {
color: white;
} .t-window .t-top .wline2 {
line-height: 45px;
} .t-window .t-left {
background: transparent url("./talent_window_center.gif") repeat-y top left;
float: left;
clear: both;
width: 9px;
height: 706px;
position: absolute;
} .t-window .t-middle {
float: left;
width: 264px;
height: 714px;
top: 61px;
left: 9px;
position: absolute;
} .t-window .t-right {
background: transparent url("./talent_window_center.gif") repeat-y top right;
float: left;
width: 11px;
height: 706px;
position: absolute;
left: 271px;
} .t-window .t-bottom {
background: transparent url("./talent_window_down.gif") no-repeat scroll bottom center;
clear: both;
width: 282px;
height: 7px;
top: 770px;
position: absolute;
text-align: right;
} .t-window .t-bottom .wline3 {
padding-right: 96px;
padding-top: 9px;
line-height:11px;
} .t-window .wline5 {
position: absolute;
top: 776px;
left: 197px;
height: 16px;
width: 76px;
padding-top: 3px;
text-align: center;
cursor: pointer;
line-height: 11px;
} .t-window .wline5:hover {
background: transparent url("./button_down.gif") no-repeat;
color: #FFF;
} .t-window .tabb {
background: transparent url("./inactivetab.gif") 0 top no-repeat;
height: 26px;
width: 100px;
text-align: center;
cursor: pointer;
position: absolute;
top: 802px;
padding-top: 3px;
padding-left: 2px;
font-size: 10px;
color: #e4c600;
} .t-window .tabb:hover {
color: #FFF;
background: transparent url("./inactivetab.gif") 0 -38px no-repeat;
}

/* sam srodek - kwadraciki z talentami */
table.talents {
width: 264px;
height: 710px;
text-align: center;
border-collapse: separate;
border-spacing: 0px;
float: left;
} table.talents td {
vertical-align: top;
padding: 0;
height: 64px;
width: 64px;
} div.talent {
position: relative;
height: 64px;
width: 64px;
} div.ramka {
background: transparent url("./ramka.gif");
height: 42px;
width: 42px;
left: 11px;
top: 11px;
position: absolute;
} div.talent.act div.ramka {
background-position:-84px 50%;
} div.talent.actt div.ramka {
background-position:-42px 50%!important;
} div.tlo {
background: transparent url("./tlo.gif") repeat scroll 0% 0%;
height: 45px;
width: 45px;
left: 9px;
top: 9px;
position: absolute;
} div.icon {
background: #232323;
height:36px;
width:36px;
left:14px;
top:14px;
position: absolute;
border: 0;
} div.swiatlo {
background: transparent url("./swiatlo.gif") repeat scroll 0% 0%;
height: 38px;
width: 38px;
left: 13px;
top: 13px;
position: absolute;
background-position: 0px 50%
} div.cyfra {
background: transparent url("./cyfra.gif") no-repeat;
font-size: 12px;
height: 21px;
width: 24px;
top: 39px;
left: 40px;
padding: 4px 0pt 0pt;
position: absolute;
display: none;
color: #17fd17;
} div.talent.act div.cyfra {
display:block;
} div.talent.actt div.cyfra {
color: #e7ba00!important;
} table.talents div.down {
background: transparent url("./down.gif") no-repeat;
background-position: center bottom;
left: 25px;
top: -13px; /* 13+n64 */
width: 15px;
height: 29px; /* 29+n64 */
position: absolute;
} table.talents div.talent.act div.down {
background-image: url("./downs.gif");
} table.talents div.right {
background: transparent url("./right.gif") no-repeat;
background-position: right center;
left: -11px;
top: 24px;
width: 29px;
height: 15px;
position: absolute;
} table.talents div.talent.act div.right {
background-image: url("./rights.gif");
} table.talents div.left {
background: transparent url("./left.gif");
background-position: left center;
left: 46px;
top: 24px;
width: 29px;
height: 15px;
position: absolute;
} table.talents div.talent.act div.left {
background-image: url("./lefts.gif");
} table.talents div.rightdown1 {
background: transparent url("./rightdown1.gif") no-repeat;
background-position: left top;
left: -14px;
top: -42px; /* 13+n64 */
width: 55px;
height: 58px; /* 29+n64 */
position: absolute;
} table.talents div.talent.act div.rightdown1 {
background-image: url("./rightdown1s.gif");
} table.talents div.rightdown2 {
background: transparent url("./rightdown2.gif") no-repeat;
background-position: left top;
left: -14px;
top: -106px; /* 13+n64 */
width: 55px;
height: 122px; /* 29+n64 */
position: absolute;
} table.talents div.talent.act div.rightdown2 {
background-image: url("./rightdown2s.gif");
} table.talents div.leftdown1 {
background: transparent url("./leftdown1.gif") no-repeat;
background-position: left top;
left: 25px;
top: -42px; /* 13+n64 */
width: 50px;
height: 58px; /* 29+n64 */
position: absolute;
} table.talents div.talent.act div.leftdown1 {
background-image: url(./leftdown1s.gif);
} table.talents div.leftdown2 {
background: transparent url("./leftdown2.gif") no-repeat;
background-position: left top;
left: 25px;
top: -106px; /* 13+n64 */
width: 50px;
height: 122px; /* 29+n64 */
position: absolute;
} table.talents div.talent.act div.leftdown2 {
background-image: url("./leftdown2s.gif");
}

/* tooltip */
div#tiptalent{
 display: none;
 width: 325px; 
 position: absolute;
 z-index: 1000;
 text-align: justify; 
} div#tiptalent div#tip {
 background: transparent url(../../img/tooltip.png);
 color: white;
 font-size: 12px;
 font-family: Verdana, Sans-serif;
 font-weight: normal;
 line-height: 17px;
 padding: 8px 9px 0px 9px;
} div#tiptalent div#tip b {
font-size: 14px;
font-weight: normal;
line-height: 19px;
} div#tiptalent div#tip span.red { color: red; }
div#tiptalent div#tip span.green { color: #0F0; }
div#tiptalent div#tip span.left { float: left; clear: both; }
div#tiptalent div#tip span.right { float: right; }
div#tiptalent div#tip span.opis { color: #FFD100; clear: both; display: block; }
div#tiptalent div#tip br { clear: both; }
div#tiptalent div#ld {
 background: transparent url(../../img/tooltip.png);
 background-position: left bottom;
 width: 50%;
 height: 7px;
 clear: both;
 float: left;
} div#tiptalent div#rd {
 background: transparent url(../../img/tooltip.png);
 background-position: right bottom;
 width: 50%;
 height: 7px;
 float: right;
}