@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
html {
background:#000
}

body {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
width:100%;
margin:40px auto 0px;
text-align:center;
background: #000;
border:0px;
}

#page-wrap {
	background: black;
	min-width: 780px;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;

	}
	#page-wrap #inner {
		margin: 10px 5% 10px;
		padding-bottom: 10px;
	}

#inside {
background:url(tile.gif);
background-position:82%;
overflow: hidden;
display: inline-block;
border-left: #222 5px solid;
border-right: #222 5px solid;
border-top: #222 5px solid;
margin: 5px 0px 0px 0px;
height:100%;
}

#header {
position:relative;
overflow: hidden;
display: block;
min-width: 892px;
min-height: 232px;
margin-left: 5px;
}

#menu {
margin-top: 5px;
text-align: center;
color: #97c4ff;
border: #000 5px solid;
font: 1.2em/1.3em Verdana, sans-serif;
}

#content,#sub-section {
overflow:hidden;
display:inline-block;
text-align:center;
padding: 10px;
}

#footer {
overflow:hidden;
text-align: center;
background: #000;
border: #222 5px solid;
padding: 10px 0px 0px 0px;
margin-top: -2px;
}

/* safari and opera need this */

#header,#footer,#inside {width:100%}

#content {
float:left;
}

#sub-section {
float:right;
}

#content {width:76%}

#sub-section {width:17%}

#banner {
position:absolute;
width:100%;
height: 100%;
top:0px;
left:0px;
}

.killshot {
display: block;
margin-right: auto;
margin-left: auto;
}

p, li {
font: 1.2em/1.8em Verdana, sans-serif;
margin-bottom: 10px;
color: #978777;
text-align:justify;
}

.p2 {
font: 1.5em/1.8em Verdana, sans-serif;
margin-bottom: 10px;
color: #FFF;
text-align: center;
}

.p3 {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: #FFF;
text-align: center;
}

.p4 {
font: 1.8em/1.8em Times New Roman, sans-serif, bolder;
margin-bottom: 10px;
margin-top: 10px;
color: #FFF;
text-align: left;
}

.p5 {
font: 1.2em/1.2em Times New Roman, sans-serif;
color: #069;
text-align: center;
}

.news {
border: none;
}

.news-list-item {
	/* IE hack */
	height: auto;
	line-height: 1.3;
	/* IE hack end */
	height: auto !important;
	padding:3px;
	margin:3px;
}

h3 {
font: 2.3em/2.3em Times New Roman, sans-serif, bolder;
margin-bottom: 10px;
margin-top: 0px;
color: #fff;
text-align: left;
}

.news-list-date {
float: right;
width: 180px;
text-align: right;
height: 20px;
margin-top: 1.5em;
margin-right: -2px;
font: 0.5em/0.5em Times New Roman, sans-serif;
color: #fff;
}

.alignleft {
text-align: left;
}

.role {
font: 1.8em/1.8em Times New Roman, sans-serif, bold, underline;
margin-bottom: 10px;
color: #FFF;
text-align: center;
}

.mages {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: #00FFFF;
text-align: center;
}

.hunters {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: green;
text-align: center;
}

.druids {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: orange;
text-align: center;
}

.warlocks {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: purple;
text-align: center;
}

.warriors {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: #8B4513;
text-align: center;
}

.rogues {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: yellow;
text-align: center;
}

.paladins {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: #F9C;
text-align: center;
}

.shamans {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: blue;
text-align: center;
}

.priests {
font: 1.8em/1.8em Times New Roman, sans-serif, bold;
margin-bottom: 10px;
color: white;
text-align: center;
}

h1 {
	font: 4.0em Tahoma, sans-serif;
	color: #45536B;
	margin-bottom: 5px;
}

h2 {
	font: 2.5em Tahoma, sans-serif;
	color: #14599B;
	margin-bottom: 5px;
}

A {
color: #97c4ff; text-decoration: none;
}

A:hover {
	color: #aaa; text-decoration: underline
}

img {
	border: none;
}
/* Progress styles */
.achievement {
display: block;
min-width:516px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}

#progress {
width: 100%;
overflow:hidden;
}

#progresshard {
width: 50%;
text-align: left;
float:right;
}

#progressnormal {
width: 50%;
text-align: left;
float:left;
}

ul.none {
list-style:none inside;
}

.notdeaded {
color:red;
display: inline;
}

.halfdeaded {
color:orange;
display: inline;
}

.dead {
color: green;
display: inline;
}

.notavail {
color:white;
display: inline;
}
/* Screenshot styles */
div.img {
  margin: 10px;
  border: 5px solid #222;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	

div.img img {
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.img a:hover img {
border: 1px solid #0000ff;
}

div.desc {
  text-align: center;
  font-weight: normal;
  width: auto;
  margin: 2px;
  color: white;
  font-size: 1.5em;
}