/* ----- Display Windows ----- */
#char, #skill, #items, #loaditems{
	background-repeat:no-repeat;
	position:relative;
	height:571px;/*459px for char*/
	color:#FFFFFF;
	font-size:12px;
	font-weight:normal;
	/*font-family: "Open Sans",sans-serif;*/
	font-family: Verdana, sans-serif;
}
#char { width:339px; height:515px; top:24px;}
#skill{ background-image: url("../images/char-skill2.png"); color:#D7D1B9; width:346px; float:right;}
#items{ background-image: url("../images/char-item_hypeko.png"); width:585px; height:563px; float:right;}

#char-page { 
	position:absolute;
	left:0px;
	top:0px;
	width:339px;
	height:515px;
	background-image: url("../images/char-page_hypeko.png");
	background-repeat: no-repeat;

}
#loaditems {
	z-index:10;
	position:absolute;
}
#char-top {
	background: url("../images/char-top.png") no-repeat;
	width:289px;
	height:24px;
}
#char-bottom {
	background: url("../images/char-bottom.png") no-repeat;
	width:289px;
	height:15px;
}

#items DIV, #items IMG{
	position:absolute;
	width:45px;
	height:45px;
	/*background-color:#000000;*/
}

#healthbar {
	font-family: Verdana, sans-serif;
	font-size:10px;
	position:relative;
	color:#f2ecc8;
	width:241px;
	height:87px;
	background-image: url("../images/char-healthbar2.png");
	font-weight:bold;
}
#health, #mana { font-size:10.3px;color:white; }

/* ----- Load Items Tab ----- */
#bonus{
	background-color:#000000;
	border: 1px solid #999999;
	font-weight:bold;
	font-size:14px;
}

/* ----- SPECIAL TABLE FOR CLAN/FRIENDS ----- */
DIV.tablediv {
	position: absolute;
	left:6px;
	top:169px;
	width: 276px;
	height: 305px;
	border: 1px solid #999999;
	overflow: auto;
}
HTML>BODY TBODY.tcontent {
	display: block;
	height: 286px;/*height-19px*/
	width: 100%;
	overflow: auto;
}
HTML>BODY DIV.tablediv{ width: 276px; overflow:hidden; }
DIV.tablediv TABLE{ width: 255px; float: left; }
HTML>BODY DIV.tablediv TABLE{ width: 276px; }
thead.theader TR { position: relative; }
HTML>BODY THEAD.theader TR { display: block; }
THEAD.theader TH, TBODY.tcontent TD {
	text-align: center;
	font-size:12px;
	font-weight:normal;
	color: #00ff00;
	border-right: 1px solid #999999;
}
TBODY.tcontent TD A {
	color: #00ff00;
}
THEAD.theader TH {
	background: #420404;
	font-weight: bold;
	color: #D7D1B9;
	border-bottom: 1px solid #999999;
	padding: 2px 0px;
}
TBODY.tcontent TD {
	border-top: 1px solid #333333;
	border-bottom: none;
	border-left: none;
	border-right-color: #333333;
}
HTML>BODY THEAD.theader TH { width: 40px; }
HTML>BODY THEAD.theader TH + TH { width: 133px; }
HTML>BODY THEAD.theader TH + TH + TH { width: 32px; }
HTML>BODY THEAD.theader TH + TH + TH + TH { width: 50px; }
HTML>BODY TBODY.tcontent TD { width: 40px; }
HTML>BODY TBODY.tcontent TD + TD { width: 133px; }
HTML>BODY TBODY.tcontent TD + TD + TD { width: 32px; }
HTML>BODY TBODY.tcontent TD + TD + TD + TD { width: 50px; }

TBODY#itcontent TD { text-align: left; }
HTML>BODY THEAD#itheader TH { width: 259px; }
HTML>BODY TBODY#itcontent TD { width: 259px; }
HTML>BODY TBODY#itcontent { height: 371px;/*height-19px*/ }

/* ----- BAG ------- */
A.bag{
	width: 63px;
	height: 22px;
	background:no-repeat url('../images/char-btn-bag2.png') -1px -63px;
	cursor:pointer;
	padding-top:5px;
	text-align:center;
	color:#ffe400;
	font-size:inherit;
	line-height: 22px
}
A.bagoff{ background-position: -1px -1px; color:#4d5519; line-height: 25px }
A.bag:active { background-position: -1px -33px; }

/* ----- BUFFS ----- */
#buff{
	float:left;
	width:16px;
	height:32px;
	background:no-repeat url("../images/char-buff.png");
}
#buffs{
	float:right;
	height:32px;
}
A.bicon{
	cursor:pointer;
}

/* ----- SKILL BAR ----- */
#hotkey{
	position:relative;
	top:-48px;
	/*float:left;*/
	width:463px;
	height:45px;
	background:no-repeat url("../images/char-hotkey2_2.png");
	margin-bottom:10px;
}
#hotbarnum {
	position: relative;
	top:4px;
	left:60px;
	width: 338px;
	height: 12px;
	/*border:1px solid grey;*/
	background:no-repeat url("../images/char-hotkey-nums.png") -1px -1px;
}

A#hotup, A#hotdown{
	position:absolute;
	width:18px;
	height:18px;/*10px*/
	left:42px;
	top:-1px;
	background:no-repeat url("../images/char-btn-hotkeyarrow2.png") -1px -1px;
	cursor:pointer;
}
A#hotdown{
	top:26px;
	background-position: -1px -21px;
}
A#hotup:hover { background-position: -20px -1px;}
A#hotup:active { background-position: -39px -1px;}

A#hotdown:hover { background-position: -20px -21px;}
A#hotdown:active { background-position: -39px -21px;}
A.hicon {
	position:absolute;
	background-repeat: no-repeat;
	width:32px;
	height:32px;
	top: 5px;
	cursor:pointer;
}
A.h0 {left:61px;}
A.h1 {left:98px;}
A.h2 {left:134px;}
A.h3 {left:170px;}
A.h4 {left:205px;}
A.h5 {left:241px;}
A.h6 {left:277px;}
A.h7 {left:313px;}
A.h8 {left:349px;}
A.h9 {left:385px;}

/* ---- FOOTER ---- */

/* ----- NAVAGATION ----- */
#bottombar {
	width:1020px;
	height: 48px;
	background:url("../images/bottom-bar.png") no-repeat;
	position: relative;
}

DIV#navlist{
	position:relative;
	float:right;
	width:160px;
	height:34px;
}

DIV#expholder {
	width: 424px;
	height: 48px;
	background: no-repeat url("../images/bottom-exp-holder.png");
	position: relative;
	top:-9px;
	left:288px;
	/*z-index:10;*/
}

DIV.expbar {
	width:320px;
	height: 3px;
	position: relative;

}
DIV.expbar-fill {
	background: url(../images/expbar.png) repeat;
	height: 3px;
	margin:0 !important;
	border-radius: 1px;
	opacity: 0.9;
}

A.nav {
	position:absolute;
	top:1px;
	left:0px;
	width:34px;
	height:34px;
	background-image: url("../images/char-buttons.png");
	background-repeat: no-repeat;
	cursor:pointer;
	margin-right:2px;
	/*border:3px solid red;*/
}

A.nav2 {
	position:absolute;
	top:1px;
	left:0px;
	width:34px;
	height:34px;
	background-image: url("../images/char-buttons-hype.png");
	background-repeat: no-repeat;
	cursor:pointer;
	margin-right:2px;
	/*border:3px solid red;*/
}
/*A.nav:hover { background-position: -34px 0; }*/
/*A.nav:active { background-position: -68px 0; }*/

A#townbtn {  background-position: -176px -1px; left:34px;}
A#townbtn:hover { background-position: -176px -36px; }
A#townbtn:active { background-position: -176px -71px; }

A#charbtn { background-position: -211px -1px; left:68px;}
A#charbtn:hover { background-position: -211px -36px; }
A#charbtn:active { background-position: -211px -71px; }

A#itemsbtn { background-position: -246px -1px; left:102px; }
A#itemsbtn:hover { background-position: -246px -36px; }
A#itemsbtn:active { background-position: -246px -71px; }

A#tmpbtn1 { background-position: -281px -106px; left:136px; }
A#tmpbtn2 { background-position: -316px -106px; left:170px; }
A#tmpbtn3 { background-position: -351px -106px; left:204px; }
A#tmpbtn4 { background-position: -386px -106px; left:238px; }

/* Soltaraf butonu yazalım */


/*A#charbtn { background-position: -209px -1px; }*/
/*A#charbtn:hover { background-position: -176px -36px; }*/
/*A#charbtn:active { background-position: -176px -71px; }*/

/*A#charbtn { background-image: url("../images/char-btn-stat.png"); left:49px; }*/
/*A#itemsbtn { background-image: url("../images/char-btn-item.png"); left:90px; }*/
/*A#skillbtn { background-image: url("../images/char-btn-skill.png"); left:133px; }*/
/*A#loaditemsbtn { background-image: url("../images/char-btn-load.png"); left:174px; }*/


/* ----- CHARACTER DISPLAY ----- */
A.charbtn{
	width:67px;
	height:21px;
	background:no-repeat url("../images/charbtn.png");
	text-align:center;
	font-size:12px;
	color:#ffffff;/*#D7D1B9*/
	line-height: 20px;
	font-weight:bold;
	cursor:pointer;
}
A.charbtn:hover { background-position: 0 -42px;}
A.charbtn:active { background-position: 0 -21px;}

A.close{
	position:absolute;
	/*top:3px;*/
	/*left:3px;/*right:3px*/
	width:32px;
	height:32px;
	background: url("../images/char-btn-close2.png") -1px -1px no-repeat;
	cursor:pointer;
}
A.close:hover { background-position: -36px -1px;}
A.close:active { background-position: -71px -1px;}


A.tab, A.taboff {
	position:absolute;
	left:36px;
	top:56px;
	width:63px;
	height:24px;
	background: url("../images/char-btn-tab2.png") no-repeat -1px -1px;
	text-align:center;
	color:#d5c431;
	font-size:9px;
	font-weight:bold;
	cursor:pointer;
    padding-top: 5px;
}

A.taboff { background-image: url("../images/char-btn-taboff.png"); height:19px; }
A.plus, A.minus{
	position:absolute;
	left:264px;
	width:20px;
	height:21px;
	background:no-repeat url("../images/char-btn+.png");
	cursor:pointer;
}
A.minus { background-image: url("../images/char-btn-.png"); left:166px; }
A.plus:hover, A.minus:hover{ background-position: -20px 0; }
A.plus:active, A.minus:active{ background-position: -40px 0; }


.hidden { display:none; }
/*.pagem{padding: 0px; background:no-repeat url("../images/kobackground4.jpg");}*/

/* ----- FORM ----- */
INPUT.blank, SELECT.blank{
	background:none;
	border: 2px dotted #000000;/*#999999;*/
	text-align:center;
	font-weight:bold;
	color:#FFFFFF;
}
SELECT.blank{ border-style: solid; }
/*
<!--[if IE]>
INPUT.blank, SELECT.blank{ background:#000000; }
<![endif]-->
*/



#item h1,h2,h3 {
	padding: 0px;
	margin: 0px;
}

#item  li {
	padding: 0px;
	margin: 2px;
}

#item {
	font-family: "Open Sans", sans-serif;
	font-size: larger;
	/*opacity: 0.8;*/
	min-width: 240px;
}

#item h1 {
	text-align: center;
	font-size: 18px;
	font-weight: bold;

}

#item h2 {
	text-align: center;
	font-size: 13px;
}

#item h3 {
	text-align: center;
	color: #ffffff;
	font-size: 12px;
}

#item h4 {
	text-align: center;
	color: #ffffff;
	font-size: 12px;
}

#item ul li {
	text-align: left;
	color: #ffffff;
	font-size: 12px;
}

#item ul {
	list-style-type: none;
}

#item .type_4 {
	color: #c3b170;
}

#item .type_3 {
	color: #ADFF2F;
}

#item .type_12 {
	color: #ffad4d;
}

#item .type_11 {
	color: #ff83a6;
}

#item .type_0 {
	color: #ffffff;
}

#item .type_0 {
	color: #ffffff;
}

#item .type_1 {
	color: #8080ff;
}

#item .type_2 {
	color: #ffff00;
}

#item .type_5 {
	color: #c87cc7;
}

#item .type_6 {
	color: #4FB4C5;
}

#item .type_7 {
	color: #c87cc7;
}

#item .type_8 {
	color: #86E57F;
}

#item .type_9 {
	color: red;
	text-align: center;
}

.binded {
	top: 1px;
	background: url("../images/binded.png") 0 0 no-repeat;
}

.sealed {
	top: 1px;
	background-color: rgba(76, 142, 233, 0.3);
}

.rented {
	top: 1px;
	background-color: rgba(244, 241, 27, 0.3);
}

.dublicated {
	top: 1px;
	background-color: rgba(0, 0, 0, 0.5);
}