body{
background: #000000;
margin: 0;
}


#container {
overflow: hidden;
width: 900px;
margin-left: auto;
margin-right: auto;
background: #fff;
}


#global ul {
margin: 0; 
padding: 0; 
list-style-type: none; 
list-style-image: none; 
}

#global li {
display: inline;
text-align: center;
text-transform: uppercase;
}

#global ul a {
  float: left;
  width : 156px;
  height : auto;
  display : block;
  border : 2px outset #0077BE;
  text-decoration : none;
  background-color : #0077BE;
  color : #eee;
  font-weight : bold;
  padding : 3px 10px; /* these initial top/bottom left/right padding values are critical to create a baseline left/right value can be whatever but must exist */
  outline : 0;
  cursor : pointer; /* this is needed for Opera due to the current style - weird but true */
}

#global a:hover, #global a:focus {
  border : 2px outset #013E97;
  background-color : #013E97;
  color : #FFF000;
}

/* 
  This is focus in IE... for other browsers, the button is depressed when clicked or Enter it pressed.
  When using a 2px border, the padding will shift 1px left and to the top
*/

#secondary {
	float: left;
	width: 180px;
}

#secondary li{
list-style: none;
}


#secondary ul {
margin: 0; 
padding: 0; 
list-style-type: none; 
list-style-image: none; 
}


#secondary a {
  width : 172px;
  height : auto;
  display : block;
  border : 2px outset #D5CD00;
  text-decoration : none;
  background-color : #D5CD00;
  color : #002489;
  font-weight : bold;
  padding : 2px 3px; /* these initial top/bottom left/right padding values are critical to create a baseline left/right value can be whatever but must exist */
  outline : 0;
  cursor : pointer; /* this is needed for Opera due to the current style - weird but true */
}

#secondary a:hover, #secondary a:focus {
  border : 2px outset #898400;
  background-color : #898400;
  color : #fff;
}

#secondary li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

#secondary ul ul  {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

div#secondary ul ul ,
div#secondary ul li:hover ul 
{display: none;}

div#secondary ul li:hover ul,
div#secondary ul ul li:hover ul
{display: block;}


/* 
  This is focus in IE... for other browsers, the button is depressed when clicked or Enter it pressed.
  When using a 2px border, the padding will shift 1px left and to the top
*/

#main { 
	margin: 0;
	float: left;
	width: 720px;
	height: 1%; /* Holly hack for Peekaboo Bug */
}

#main p {
margin: 20px;
}


#main h2 {
margin: 20px;
}


#main li {
margin: 0 20px;
}

#boss{
color: #FF0000;
}

ol.uroman {list-style-type: upper-roman}
ol.ualpha {list-style-type: upper-alpha}

#rareenemy {
color: #00FF00;
background: #000000;
}

#rareitem {
color: #FFF000;
background: #000000;
}

#tableheading {
background: #FF0000;
margin-left: 0px; 
margin-right: auto;
}

#main table {
margin: 0 20px;
border-type: solid;
}