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

html { overflow-y: scroll; }
body { font: 0.8125em arial; color: #333; min-width: 960px; background-color: #fff; background-attachment: fixed !important; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(53,104,29)), color-stop(1, rgb(40,58,28))); background-image: -moz-linear-gradient(center bottom, rgb(53,104,29) 50%, rgb(40,58,28) 100%); }

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

h1 { font-size: 5em; text-align: center; padding-top: 1.1em; color: #283a1c; }
h2 { font-style: italic; font-size: 2.8em; letter-spacing: -1px; margin: 0 0 0.45em 0; }
h3 { font-size: 1.6em; margin: 2em 0 0 0; }

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

a { color: #222; text-decoration: none; border-bottom: 1px solid #999; }
a:visited { color: #666; border-color: #666; }
a:hover, a:focus, a:active { border-bottom: 1px dotted #999; }

img { border: 3px double #999; margin: 5px 0; }

code { width: 8em; border: 1px solid #999; background: #dedede; padding: 0.1em 0.2em; line-height: 2em; font-weight: normal; }

table { margin: 0.3em 0 2em 0; border-collapse: collapse; }
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; }

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

span { padding: 0 2px; }

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

#wrapper { width: 650px; position: relative; margin: 2em auto; background: #fff; border: 3px double #777; padding-bottom: 3rem; }

#chatter { position: absolute; top: 0; left: 0; display: none; } /* Don't forget to add this back! */
#chatter p { font-size: 10px; letter-spacing: 0; padding: 0 0 0 2px; color: #a0a0a0; }
#chatter p span { background: transparent; padding: 0; }
#chatter p .red { color: #f09898; }
#chatter p .orange { color: #f09c37; }
#chatter p .yellow { color: #ffeb96; }
#chatter p .green { color: #9dda8c; }
#chatter p .aqua { color: #6cd8db; }
#chatter p .blue { color: #c8c8ff; }
#chatter p .purple { color: #c798bb; }
#chatter p .white { color: #fff; }

#header { height: 240px; }

#content { width: 600px; padding: 0 20px 20px 20px; }
#content ul { margin-left: 1.8em; }
#content p { margin: 0 0 1.5em 0; }



#menu { position: absolute; top: 220px; right: 638px; width: 165px; border: double 3px #999; border-top: none; border-bottom: none; background: #fff; text-align: center; z-index: 1; }
#menu::before { content: ''; background: url(images/layout/castle.gif) left top no-repeat; height: 97px; width: 171px; position: absolute; top: -95px; left: -3px; }
#menu::after { content: ''; background: url(images/layout/wall.gif) left top no-repeat; height: 38px; width: 171px; position: absolute; bottom: -38px; left: -3px; }
#menu ul li { margin: 0.5em 0.2em; list-style-type: none; font-size: 1.6em; font-style: italic; }
#menu ul li a { text-decoration: none; border: none; color: #222; background: none; }
#menu ul li a:focus,
#menu ul li a:hover,
#menu ul li a:active  { color: #777; }
#menu ul ul li { font: 0.6em arial; margin: 0.3em 0; }

.pw { position: absolute; top: 3px; left: 670px; }
.pw a { border-bottom: none; }
.pw img { border: 3px double #777; background: #fff; }

.footer { width: 812px; margin: 0 auto; }
.footer a { border-bottom: none; }
.footer img { border: 3px double #777; background: #fff; }





/************* Commands *****************/
.commands dd { margin: 0.2em 0 1.6em 2em; }





/************* 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 ****************/
.home-interface { margin: 0 0 1em 0; padding: 0; background: transparent url(images/interface/interface.jpg); height: 336px; width: 366px; position: relative; border: 3px double #999; list-style: none; background-position: 0 480px; }

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; }