/* global primitive elements */

input, select, textarea {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000;
	background-color:#FFF;
	font-weight: normal;
	border:2px solid #999;
	margin:2px;
	font-size: 8pt;
}

img {
	border:0px;
}

a, a:link, a:visited, a:active {
	color: #737B84;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

li {
	/*position: relative;*/
	margin: 0;
	padding: 0;
}

h1, h2, h3 {
	border: 1px solid #25262a;
	background-image: url(/images/shadowness/cellpic.gif);
	font-weight: bold;
	margin: 5px 10px 5px 10px;
	padding-left: 10px;
}

h1 {
	font-size: 18px;
}

h2 {
	font-size: 16px;
}

h3 {
	font-size: 14px;
}

/* History Bar */
#main h2, #main h2 a, #main h2 a:link, #main h2 a:visited, #main h2 a:active, #main h2 a:hover {
	color: #908858;
	text-decoration: none;
	position: relative;
	font-size: 16px;
}

/* the following classes are used by index.tpl */
body {
	color: #737B84;
	background-color: #343B43;
	font-family: tahoma, helvetica;
	margin: auto;
	font-size: 10pt;
}

#page {
	width: 915px;
	margin: 0px auto;
	position: relative;
	background-color: #3e454b;
}

#page_border_left {
	background-image: url(/images/shadowness/top_left.gif);
	position: absolute;
	left: -46px;
	top: 0px;
	bottom: 0px;
	width: 46px;
}

#page_border_right {
	background-image: url(/images/shadowness/top_right.gif);
	position: absolute;
	right: -46px;
	top: 0px;
	bottom: 0px;
	width: 46px;
}

#header {
	background-image: url(/images/shadowness/header.png);
	background-color: #000;
	background-repeat: no-repeat;
	background-position: right;
	height: 170px;
}

#footer {
	background-image: url(/images/shadowness/foot_bg.gif);
	width: 920px;
	height: 27px;
	bottom: 0px;
}

.footer {
	margin-top: 10px;
	font-size: 9px;
	position: absolute;
}

.left {
	left: 5px;
}

.center {
	left: 290px;
}

.right {
	right: 5px;
}

#dbInfoBox {
	position: absolute;
	top: 20px;
	left: 150px;
	width: 350px;
	height: 20px;
	padding: 3px;
	text-align: center;
	background-color: #fff;
	border: 1px solid red;
}

/*
	DEFINITION OF THE NAVIGATION ELEMENTS
*/

#navi_header {
	background-image: url(/images/shadowness/top_bg.gif);
	background-color: #000;
	height: 19px;
	width: 100%;
}

.popup_navi {
	display: inline;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	padding: 0px 0px 0px 0px;
	z-index: 2;
}

.popup_navi div {
	display: none;
	text-decoration: none;
}

.popup_navi:hover {
	color: #908858;
}

.popup_navi:hover div {
	display: block;
	position: absolute;
	left: 1px;
	width: 125px;
	border: 1px solid #737B84;
	background: #343B43;
}

.popup_navi ul {
	list-style:none;
	background-color: #2f363c;
	padding-bottom: 3px;
	font-size: 11px;
	/*position: relative;*/
	margin: 0;
	padding: 0 0 0 5px;
}

.popup_navi li {
	width: 114px;
	padding: 1px;
}

.popup_navi li:hover {
	background-color: #343B43;
}

/* global simple style elements */
.pointer { cursor: pointer;}
span.stats { color: #fff;}
.a { background-color: #2F3134;}
.b {}
.hidden { display: none;}

/*
	DEFINITION OF THE MAIN CONTENT ELEMENTS
*/

#main {
	background-color: #3e454b;
	width: 920px;
	padding-bottom: 10px;
}

/*
	DEFINITION OF THE ARTICLE ELEMENT
*/

div.article_container {
	position: relative;
	margin: 5px 10px 5px 10px;
	border: 1px solid #25262a;
}

div.article {
	position: relative;
	border-left: 1px solid #444a50;
	border-top: 1px solid #444a50;
	background-color: #2f363c;
	padding-bottom: 8px;
}

div.article ul {
	padding-top: 3px;
	margin: 0;
}

div.article label, div.article input, div.article select, div.content p {
	margin-left: 10px;
}


/*
	DEFINITION OF THE MARGIN AND COMMENT ELEMENTS
*/

div.margin {
	margin-right: 8px;
	width: 428px;
	float: right;
	background-color: #2f363c;
}

.text_margin {
	float: right;
	margin-right: 270px;
	width: 400px;
}

.title_left {
	width: 190px;
	float: right;
	font-weight: bold;
}

.clearright {
	clear: right;
}

.clearboth {
	clear: both;
}

div.comment {
	clear: both;
}

/* runeword module specific elements */
.page_view {
	margin: 1px 30px 1px 10px;
}

.rw_line {
	padding: 1px 1px 1px 3px;
	margin: 1px 30px 1px 10px;
	clear: left;
	height: 30px;
	overflow: hidden;
}

.rw_line ul {
	position: relative;
	top: -34px;
	left: 355px;
	list-style: none;
	margin: 0px;
}

.rw_line li {
	float:left;
}

/*
	DEFINITION OF THE ITEM ELEMENT
*/

div.item {
	padding-top: 10px;
	padding-bottom: 15px;
	position: relative;
	margin: 3px 180px 3px 140px;
}

div.stats {
	width: 410px;
	padding: 3px;
	font-size: 12px;
	margin-left: 80px;
}

div.image {
	position: relative;
	margin-top: 20px;
	float: left;
	width: 80px;
	text-align: center;
	vertical-align: middle;
}

div.image ul {
	list-style: none;
	padding-left: 20px;
}

div.options {
	position: absolute;
	top: 10px;
	right: 50px;
}

div.options ul {
	list-style:none;
	padding: 0;
}

div.iteminfo {
	padding-left: 20px;
	clear: both;
	font-size: 11px;
}

div.iteminfo h3 {
	position: relative;
	left: -20px;
}

.ratingstars {
	position: absolute;
	left: 440px;
}

.rwrating {
	position: absolute;
	margin-top: -25px;
	left: 680px;
}

.itemname {
	font-weight: bold;
}

.baseitem {color: #fff;}
.unique {color: #908858;}
.magic {color: #4850b8;}
.rare {color: #FFFF33;}
.set {color: #00c400;}
.crafted {color: orange;}
.grey {color: #808080;}
.dgrey {color: #696969;}
.red {color: red;}
.blue {color: blue;}
.green {color: #00c400;}
.yellow {color: yellow;}
.orange {color: orange;}
.gold {color: #908858;}
.tan {color: #d2b48c;}
.dgreen {color: #228B22;}
.purple {color: purple;}
.white {color: white;}
.ethereal {
	color: #ccc;
	opacity:.50;
}
.italic {font-style: italic;}
.bold {font-weight: bold;}

div.image {
	position: relative;
}

a.itemImage span img {
	position: absolute;
}

a.itemImage span{
	position: absolute;
	display: none;
	text-decoration: none;
	left: 0px;
	top: 0px;
}

a.itemImage:hover span {
	display: block;
	border: 0;
	padding: 0;
	background: 0;
	overflow: auto;
}

.stat_info {
	display: inline;
	position: relative;
	text-decoration: none;
	border-bottom: 1px dotted #555;
	cursor: pointer;
}

.stat_info > span  {
	display: none;
	text-decoration: none;
	color: #908858;
}

.stat_info:hover > span {
	display: block;
	position: absolute;
	bottom: 14px;
	left: 20px;
	width: 200px;
	border: 1px solid #000;
	padding: 2px 10px 2px 10px;
	background-color: #343B43;
	max-height: 180px;
	overflow: auto;
	cursor: auto;
	text-align: left;
	z-index: 10;
}

.stat_info:hover > span.small {
	max-height: 100px;
}

#itemInfo {
	position: absolute;
	border: 1px;
	width: auto;
	display: none;
	background-color: #888;
	border: 1px dotted #ddd;
	z-index: 2;
	margin-left: 0px;
	cursor: pointer;
	font-size: 12px;
	color: #fff;
	padding: 4px;
}

/*
	DEFINITION OF THE ITEM_INLINE ELEMENT
*/

div.item_inline {
	display: inline;
	position: relative;
	float:left;
	height: 140px;
	width: 170px;
	margin: 5px 3px 1px 3px;
	text-align: center;
}

div.item_inline:hover {
	background-color: #2F3134;
}

div.item_inline a {
	display: block;
	text-decoration:none;
	vertical-align: bottom;
	margin: 0;
}

/* cube recipe specific elements */
/* still displaying as a table... */

table.cube_recipe {
	margin: 5px auto 0 auto;
	width: 650px;
}

td.cube_inputs, td.cube_outputs {
	width: 250px;
	text-align: center;
}

td.cube_condition {
	width: 150px;
	text-align: center;
}

/* monster specific elements */
/* still displayed as table... */

ul.resists {
	list-style:none;
	margin: 0;
	position: relative;
	padding: 0;
}

td.monstats {
	padding-left: 3px;
}

/* affix specific elements */
/* still displayed as table... */

table.affix_table {
	width: 890px;
}

table.affix_table td, th {
	padding: 1px 10px 1px 10px;
	text-align: left;
}

table.affix_table table {
	width: 875px;
}

/* search specific elements */

div.runeSelector {
	position: relative;
	margin: 1px 10px 1px 10px;
}

div.rune_inline {
	display: inline;
	position: relative;
	float:left;
	height: 25px;
	width: 143px;
	margin: 2px 1px 1px 1px;
	background-color: #2F3134;
}

.runeSelector_rune {
	margin: 5px 1px 1px 3px;
}

div.rune_inline label {
	margin: 0;
}

/* merc display specific elements */

div.merc_skills {
	
}

div.merc_skill {
	width: 890px;
}

div.merc_skill div {
	position: relative;
	display:inline;
	width: 283px;
	height: 15px;
	float:left;
	margin-left: 7px;
	padding: 1px 2px 1px 2px;
}

div.merc_stats {

}

div.merc_stat {
	width: 890px;
}

div.merc_stat div {
	position: relative;
	display:inline;
	width: 285px;
	height: 15px;
	float:left;
	margin-left: 7px;
	padding: 1px 2px 1px 2px;
}

/* skills */

#skilltree {
	position: relative;
	background-color:#000;
	background-image:url(/itemdb/img/ui/skills/skilltree.gif);
	width: 320px;
	height: 432px;
	left: 20px;
	float: left;
}

#skilltab {
	position: relative;
	width: 320px;
	height: 432px;
}

#skilltree_options {
	position: absolute;
	left: 370px;
	width: 320px;
}

#skilltree_options li:hover {
	background-color: #2F3134;
}

div.skill {
	cursor: pointer;
	position: absolute;
	width: 48px;
	height: 48px;
}

div.skill h3 {
	border: 0;
	background-image: none;
}

div.skilltab_text {
	cursor: pointer;
	position: absolute;
	width: 90px;
	height: 108px;
	left: 230px;
	text-align: center;
	display: table-cell;
    vertical-align: middle;
}

div.skill_num {
	position: absolute;
	text-align: center;
	width: 20px;
	height: 20px;
}

div.skill_overlay {
	opacity:.50;
	width: 48px;
	height: 48px;
}

div.skill_disabled {
	background-color: #000;
}

div.skill_item_granted {
	background-color: blue;
}

div.skill_inline {
	display: inline;
	position: relative;
	float:left;
	height: 70px;
	width: 140px;
	margin: 5px 3px 1px 3px;
	text-align: center;
}

div.skill_inline:hover {
	background-color: #2F3134;
}

div.skill_inline a {
	text-decoration:none;
	vertical-align: bottom;
	margin: 0;
}

#skilldesc {
	position: relative;
	margin: 10px 350px 10px 165px;
	background-color: #000;
	padding: 3px;
	text-align: center;
}

/* character screen and inventory */

div.item_hover {
	display: block;
	margin: 0;
	padding: 0;
	position: absolute;
}

div.item_hover > div.image {
	margin: 0;
}

#viewPane {
	width: 800px;
	height: 600px;
	position: relative;
	margin: 0 auto;
	background-color: #000;
}

div.panel {
	background-repeat: no-repeat;
	width: 320px;
	height: 432px;
	position: absolute;
}

div.borderFrameLeft {
	position: absolute;
	width: 400px;
	height: 558px;
	left: 0px;
	top: 0px;
	background-image:url(/itemdb/img/ui/800borderframe.gif);
	background-repeat: no-repeat;
	display: none;
}

div.borderFrameRight {
	position: absolute;
	width: 400px;
	height: 558px;
	left: 400px;
	top: 0px;
	background-image:url(/itemdb/img/ui/800borderframe.gif);
	background-position: -400px 0px;
	background-repeat: no-repeat;
	display: none;
}

#charPane {
	top: 64px;
	left: 80px;
	background-image:url(/itemdb/img/ui/InvChar6.gif);
	display: block;
}

#charPane > div.charStat {
	position: absolute;
	left: 10px;
	width: 64px;
	height: 17px;
	text-align: center;
	color: #fff;
	font-size: 10pt;
	vertical-align: center;
}

#charPane > div.charStatValue  {
	position: absolute;
	left: 76px;
	width: 39px;
	height: 17px;
	text-align: center;
	color: #fff;
	font-size: 10pt;
	vertical-align: center;
}

#charPane > div.c2 {
	left: 160px;
	font-size: 6pt;
}

#charPane > div.res {
	left: 175px;
}

#charPane > div.v2 {
	left: 272px;
}

#charPaneCloseButton {
	cursor:pointer;
	left:128px;
	top:388px;
	width:32px;
	height:32px;
	background-image:url(/itemdb/img/ui/buttons/panel/0010.gif);
}

#stashPane {
	top: 64px;
	left: 80px;
	background-image:url(/itemdb/img/ui/TradeStash.gif);
	display: none;
}

#stashGold {
	position: absolute;
}

#stashPaneCloseButton {
	cursor:pointer;
	top:390px;
	width:32px;
	height:32px;
	background-image:url(/itemdb/img/ui/buttons/panel/0010.gif);
}

#cubePane {
	top: 64px;
	left: 80px;
	background-image:url(/itemdb/img/ui/SuperTransMogrifier.gif);
	display: none;
}

#invPane {
	top: 64px;
	left: 0px;
	background-image:url(/itemdb/img/ui/InvChar6.gif);
	background-position: 0px -432px;
	display: block;
	color: #fff;
}

div.item_hover > div.stats {
	z-index: 2;
	position: relative;
}

#invGold {
	position: absolute;
	left: 105px;
	top: 392px;
	width: 92px;
	height: 18px;
	text-align: center;
	display: block;
}

#invPaneCloseButton {
	cursor:pointer;
	left:18px;
	top:385px;
	width:32px;
	height:32px;
	background-image:url(/itemdb/img/ui/buttons/panel/0010.gif);
}
	
#skillPane {
	top: 64px;
	left: 0px;
	background-image:url(/itemdb/img/ui/skills/amazon/skilltab_1.gif);
}

#skillPane > #skilltree {
	left: 0;
}

#skillPaneCloseButton {
	cursor:pointer;
	top:385px;
	left:14px;
	width:32px;
	height:32px;
	background-image:url(/itemdb/img/ui/buttons/panel/0010.gif);
}

#bottomPane {
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 106px;
	width: 800px;
	z-index: 1;
	background-image:url(/itemdb/img/ui/800ctrlpnl.gif);
	background-repeat: no-repeat;
}

#leftSkill {
	position: absolute;
	width: 48px;
	height: 48px;
	bottom: 0;
	left: 118px;
}

#rightSkill {
	position: absolute;
	width: 48px;
	height: 48px;
	bottom: 0;
	right: 118px;
}

#belt {
	position: absolute;
	bottom: 8px;
	left: 420px;
	height: 32px;
	width: 125px;
}

#belt1 {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 32px;
	width: 125px;
	background-image:url(/itemdb/img/ui/ctrlpnl_popbelt.gif);
	background-repeat: repeat-y;
}

#belt2 {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 128px;
	width: 125px;
	background-image:url(/itemdb/img/ui/ctrlpnl_popbelt.gif);
	background-repeat: repeat-y;
	display: none;
	z-index: 1;
}

#miniPanel {
	position: absolute;
	left: 310px;
	bottom:47px;
	width: 173px;
	height: 26px;
	background-image:url(/itemdb/img/ui/minipanel.gif);
	background-repeat: no-repeat;
}

#miniPanel > div {
	position: relative;
	width: 20px;
	height: 20px;
	top: 2px;
	float:left;
	left: 2px;
	margin-left: 1px;
}

div.bubble {
	position: absolute;
	height: 80px;
	width: 80px;
	bottom: 14px;
}

#healthBubble {
	background-image:url(/itemdb/img/ui/hlthmana/0000.gif);
	left: 29px;
}

#manaBubble {
	background-image:url(/itemdb/img/ui/hlthmana/0001.gif);
	right: 29px;
}

div.button {
	position: absolute;
	border: 0;
	margin: 0;
}

