html, body, div, ul, li, p, a, h1, h2, h3, h4, h5, h6, table, tr, td { padding: 0; margin: 0; }

html { height: 100%; margin-bottom: 1px; background: #fff url(../images/layout/gradient.jpg) top center repeat-x fixed; }
body { font: 0.8125em arial; letter-spacing: 1px; color: #333; background: transparent url(../images/layout/background.jpg) top center no-repeat fixed; }

h1, h2, h3, h4, h5, div#menu { font-family: "Times New Roman", Times, serif; font-weight: 500; }

ul { list-style: circle; }
ul.long_list li { margin: 1em 0; }

p, dd, dl, li { letter-spacing: 0; }


a:link { color: #222; text-decoration: none; border-bottom: 1px solid #222; }
a:visited { color: #666; border-color: #666; }
a:hover, a:focus, a:active { border: none; background: #eee; }
a.thumb { border: none; }

img,
.img { border: 3px double #999; margin: 5px 0; background: #fff url(flash/loading.gif) center no-repeat; }
.img { width: 180px; }
img.chart { border: none; margin: 0 0 15px 0; }
img#town_map { border-style: solid; border-width: 1px; }

a.screen_thumb img { margin: 0 10px 10px 0; }
a.screen_thumb { border: none; }

span.strike { text-decoration: line-through; }

h2 { font-style: italic; }
h3 { font-size: 1.4em; padding-bottom: 0.1em; }

table { margin: 0.3em 0 2em 0; border-collapse: collapse; }
td { border-bottom: 1px dotted #ccc; width: 4em; text-align: right; }
td.name { width: 11em; text-align: left; }
td.time { width: auto; padding-left: 2.1em; }
td.tag { text-align: center; }
td.tag span { width: 3em; display: inline-block; margin: 1px 0; text-align: center; }
td.clan { text-align: left; width: auto; padding: 0 0 0 0.5em; }

table.clan_list { letter-spacing: 0; width: 100%; }
table.clan_list td,
table.clan_list th { margin: 1px 0; width: auto; text-align: right; }
table.clan_list .center { text-align: center; }
table.clan_list .members { width: 4.5em; }
table.clan_list .tag { text-align: center; }

ul#diplomacy { list-style: none; margin: 1em 0 2em 0; }
ul#diplomacy ul { list-style: none; margin: 0 0 1.5em 0.75em; }
ul#diplomacy span { width: 3em; display: inline-block; text-align: center; margin: 1px 0; }

dl#commands dt code { width: 8em; border: 1px solid #999; background: #dedede; padding: 0.2em; line-height: 2.2em; font-weight: normal; }
dl#commands dd { margin: 0.2em 0 1.6em 2em; }


dl dt { font-weight: bold; }
dl dd { margin: 0 0 1em 1em; }
dl dd ul { margin: 0 0 0 2em; }

span.red { background: #f09898; }
span.orange { background: #f3af5f; }
span.yellow { background: #ffeb96; }
span.green { background: #9dda8c; }
span.aqua { background: #89dfe2; }
span.blue { background: #c8c8ff; }
span.purple { background: #c798bb; }
span.gray { background: #a0a0a0; }
span.white { background: #eee; }
span.gold { background: #eedd82; }
span.silver { background: #d6d6d6; }
span.copper { background: #ffd297; }

div#wrapper { width: 650px; position: relative; margin: 0 auto; padding: 0; background: #fff url(../images/layout/grass.jpg) no-repeat top left; border-left: 3px double #777; border-right: 3px double #777; }

div#chatter { position: absolute; top: 0; left: 0; }

div#chatter p { font-size: 10px; letter-spacing: 0; padding: 0 0 0 2px; color: #a0a0a0; }
div#chatter p span { background: transparent; }
div#chatter p span.red { color: #f09898; }
div#chatter p span.orange { color: #f09c37; }
div#chatter p span.yellow { color: #ffeb96; }
div#chatter p span.green { color: #9dda8c; }
div#chatter p span.aqua { color: #6cd8db; }
div#chatter p span.blue { color: #c8c8ff; }
div#chatter p span.purple { color: #c798bb; }
div#chatter p span.white { color: #fff; }

div#header { height: 240px; }
div#header h1 { display: none; }

div#content { width: 362px; padding: 0 20px 0 10px; float: left; }
div#content h2,
div#wide_content h2 { font-size: 2.8em; letter-spacing: -1px; margin: 0 0 0.45em 0; }
div#content p { margin: 0 0 1.5em 0; line-height: 1.4em; }
div#content p.date { margin: 0.5em 0 0 0; font-weight: 900; text-align: right; }
div#content span { padding: 0 2px; }

div#wide_content { width: 600px; padding: 40px 20px 0 20px; clear: both; }
div#wide_content span { padding: 0 2px; }
div#wide_content p { margin: 0 0 1.5em 0; line-height: 1.4em; }


div#left_col { width: 218px; padding: 0 10px 0 20px; float: left; }

div#sitemeter { clear: both; }

div#menu ul { padding: 5px 5px 5px 0; }
div#menu ul li { padding: 12px 0 0.2em 37px; list-style-type: none; font-size: 1.6em; font-style: italic; }
div#menu ul li#current { background: url(../images/layout/hippogrif_still.gif) left bottom no-repeat; }
div#menu ul li#current:hover { background: url(../images/layout/hippogrif_still.gif) left bottom no-repeat; }
div#menu ul li:hover { background: url(../images/layout/hippogrif.gif) left bottom no-repeat; }
div#menu ul li a { text-decoration: none; border: none; color: #222; background: none; }
div#menu ul li a:focus { color: #777; letter-spacing: 2px; }
div#menu ul li a:hover { color: #777; letter-spacing: 2px; }
div#menu ul li a:active { color: #fff; letter-spacing: 2px; background: #777; }

div#extras { text-align: center; }

div#random { margin: 40px 0; padding: 15px;}
div#random h2 { padding: 0 0 5px 0; text-align: center; font-size: 1.6em; }
div#random img { margin: 0 auto; }
div#random img.scene_thumb { height: 180px; width: 180px; }
div#random img.monster { background: #666 url(../images/layout/soil.jpg) center repeat; padding: 3px; }
div#random p { padding: 5px 0; }

div#footer { width: 100%; clear: both; text-align: center; padding: 25px 0 5px 0; }
div#footer a { border: none; }
div#footer img { border: none; margin: 0 auto; }
div#footer table { margin: 1em auto; }

div#halfbanner { float: left; padding: 0; width: 510px; margin: 0; clear: none; }

div#button { margin: 0 auto; width: 117px; float: left; clear: none;}




/************* Class Tree ***************/

ul#class_tree { margin: 1em 0 0 0; }
ul#class_tree ul { margin: 0.3em 0 0.3em 2.6em; }

ul.class_tree,
ul.class_tree ul { list-style: none; }
ul.class_tree li { margin-top: 5em; }
ul.class_tree img { border: none; float: left; margin: 1em 1em 0 0; }
ul.class_tree p { margin: 0.75em 0 !important; }





/************* Interface ****************/

ul#create_character { margin: 0; padding: 0; background: transparent url(../images/interface/character.jpg); height: 251px; width: 224px; position: relative; border: 3px double #999; list-style: none; }


ul#interface { margin: 0 0 0 -18px; padding: 0; background: transparent url(../images/interface/interface.jpg); height: 480px; width: 640px; position: relative; border: 3px double #999; list-style: none; }

ul#interface a:hover { background: transparent url(../images/interface/interface.jpg); }

ul#interface li a,
ul#interface li li a { text-decoration: none; border-bottom: none; }
ul#interface li a:focus span,
ul#interface li a:hover span { padding: 5px; padding: 5px; display: inline-block; background: #eee; border: 1px solid #999; z-index: 1; }

dl#interface_list { margin-top: 3.2em; }
dl#interface_list dd { margin: 0 0 3.2em 0; }
dl#itnerface_list dt { margin: 3.2em 0 0 0; }
dl#interface_list a { background: none; }

span.health_bar { background: #f09898; }
span.magic_bar { background: #c8c8ff; }
span.stamina_bar { background: #9dda8c; }

li#main_window a { position: absolute; top: 0; left: 0; height: 336px; width: 366px; }
li#main_window a:focus,
li#main_window a:hover { background-position: 0 480px; }
li#main_window a span { display: none; }
li#main_window a:focus span,
li#main_window a:hover span { margin: 20px 0 0 20px; }


li#chat a { position: absolute; top: 350px; left: 5px; height: 115px; width: 371px; }
li#chat a:focus,
li#chat a:hover { background-position: -5px 130px; }
li#chat a span { display: none; }
li#chat a:focus span,
li#chat a:hover span { margin: 40px 0 0 20px; }


li#life_bars a { position: absolute; top: 29px; left: 450px; height: 38px; width: 179px; }
li#life_bars a:focus,
li#life_bars a:hover { background-position: -450px 451px; }
li#life_bars a span { display: none; }
li#life_bars a:focus span,
li#life_bars a:hover span { margin: -20px 0 0 50px; }


li#movement a { position: absolute; top: 75px; left: 381px; height: 50px; width: 50px; }
li#movement a:focus,
li#movement a:hover { background-position: -381px 405px; }
li#movement a span { display: none; }
li#movement a:focus span,
li#movement a:hover span { margin: -30px 0 0 30px; }


li#combat a { position: absolute; top: 75px; left: 445px; height: 32px; width: 102px;}
li#combat a:focus,
li#combat a:hover { background-position: -445px 405px; }
li#combat a span { display: none; }
li#combat a:focus span,
li#combat a:hover span { margin: -20px 0 0 90px; }


li#action a { position: absolute; top: 108px; left: 441px; height: 16px; width: 111px;}
li#action a:focus,
li#action a:hover { background-position: -441px 372px; }
li#action a span { display: none; }
li#action a:focus span,
li#action a:hover span { margin: -25px 0 0 100px; }

ul#interface ul { list-style: none; }

ul#interface ul li a { position: absolute; }
ul#interface ul li img { position: absolute; border: none; display: none;  }
ul#interface ul li a:focus img,
ul#interface ul li a:hover img { display: block; }
ul#interface ul li a span { background: #242a30; color: #e1e1e1; border: 1px solid #8c9298; padding: 0; font: 0.8em/13px arial; width: 82px; text-align: center; display: inline-block; z-index: 0; margin: 1px; }
ul#interface ul li a:focus span,
ul#interface ul li a:hover span { background: #e1e1e1; color: #242a30; padding: 0; }


li#panel li#panel_character a { top: 128px; left: 378px; }
li#panel li#panel_character img { top: 29px; left: 1px; }

li#panel li#panel_inventory a { top: 128px; left: 464px; }
li#panel li#panel_inventory img { top: 29px; left: -85px; }

li#panel li#panel_skills a { top: 128px; left: 550px; }
li#panel li#panel_skills img { top: 29px; left: -171px; }

li#panel li#panel_quests a { top: 145px; left: 378px; }
li#panel li#panel_quests img { top: 12px; left: 1px; }

li#panel li#panel_maps a { top: 145px; left: 464px; }
li#panel li#panel_maps img { top: 12px; left: -85px; }

li#panel li#panel_options a { top: 145px; left: 550px; }
li#panel li#panel_options img { top: 12px; left: -171px; }

li#panel li#panel_friends a { top: 448px; left: 378px; }
li#panel li#panel_friends img { top: -291px; left: 1px; }

li#panel li#panel_fellowship a { top: 448px; left: 464px; }
li#panel li#panel_fellowship img { top: -291px; left: -85px; }

li#panel li#panel_guild a { top: 448px; left: 550px; }
li#panel li#panel_guild img { top: -291px; left: -171px; }