body {
  background-color: #171717;
  text-align: center;
  margin: 0;
  padding: 0 0 0 0;
  font-family: Calibri, Verdana, Arial, sans-serif;
  font-size: 12pt;
}

#main {
  	height: 600px;
  	text-align: left;
  	margin: auto;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
  	background-image: url(background.png);
  	background-position: left bottom;
  	background-repeat: repeat-x;
  	width: 992px;
}
#messages{
	width: 992px;
}

#menus {
  border: 1px solid #000;
}

#menus .menu {
  height: 586px;
  padding: 0;
  width: 48px;
  background-position: right top;
  background-repeat: no-repeat;
}

#menus .menu .content {
  height: 586px;
  background-position: left top;
}

#content1 {
  background-image: url(bars_welcome.png);
}

#content2 {
  background-image: url(bars_latestnews.png);
}

#content3 {
  background-image: url(bars_currentitems.png);
}

#content4 {
  background-image: url(bars_overview.png);
}

#content2.shown {
  background-image: url(bars_latestnews_alt.png);
}

#content3.shown {
  background-image: url(bars_currentitems_alt.png);
}

#content4.shown {
  background-image: url(bars_overview_alt.png);
}

#content1 .content {
  background-image: url(background_1.png);
}

#content2 .content {
  background-image: url(background_2.png);
}
#content3 .content {
  background-image: url(background_3.png);
}
#content4 .content {
  background-image: url(background_4.png);
}


.content {
  position: relative;
}

#character {
  position: absolute;
  top: 139px;
  left: 33px;
  width: 355px;
  height: 432px;
}

#character img {
  width: 355px;
  height: 432px;
  border: 1px solid #000;
  position: absolute;
  top: 0;
  left: 0;
}

.contenttext {
  position: absolute;
  top: 65px;
  left: 20px;
  width: 760px;
  height: 498px;
  overflow: auto;
  text-align: center;
  border-top: 1px solid #fff;
}

.contenttext .innerdiv {
  padding: 10px;
}

.item {
  width: 100px;
  height: 100px;
  margin: 6px 5px 5px 5px;
  display: inline;
}

#newssubject {
  font-weight: bold;
  line-height: 40px;
  font-size: 25px;
  text-align: center;
}

#latest_items {
  width: 400px;
  position: absolute;
  top: 134px;
  left: 400px;
  text-align: center;
  /*background: rgba(24, 24, 27, 0.8);
  border: 1px solid #000;*/
}

.itembox {
  display:-moz-inline-stack;
  display: inline-block;
  zoom:1;
  *display:inline;
  width: 120px;
  height: 120px;
  text-align: left;
  background-image: url(item-box.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  margin: 5px 0 5px 5px
}


#welcome {
  width: 366px;
  height: 160px;
  position: absolute;
  top: 430px;
  left: 414px;
  overflow: auto;
  color: #e3f2f5;
  text-align: center
}

#welcome .inner {
  padding: 3px;
  font-size: 10pt;
}

#nav {
  top: 70px;
  position: absolute;
  left: 0px;
  width: 800px;
  text-align: center;
  font-size: 11pt;
  z-index: 10
}

#nav form {
  display: inline-block;
}

#footer a:link, #footer a:visited {
	font-size: 10pt;
	color: #50828a;
	text-decoration: none;
}
#footer a:hover {
  color: #fff;
}

#nav a:link, #nav a:visited {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 1em #50828a, 0 0 1em #50828a, 0 0 1em #50828a, 0 0 0.5em #50828a, 0 0 0.5em #50828a;
}
#nav {
  color: #b0e2ea;
  text-decoration: none;
  text-shadow: 0 0 1em #50828a, 0 0 1em #50828a, 0 0 1em #50828a, 0 0 0.5em #50828a, 0 0 0.5em #50828a;
}

#nav span {
  position: relative;
  text-align: left;
  padding: 10px 5px;
  display: inline-block;
}

#nav span:hover div {
  display: block;
  position: absolute;
  width: 120px;
}

#nav span:hover div a {
  display: block;
  padding: 2px 4px;
  text-shadow: 0 0 0 transparent;
}

#nav span:hover div a:link,#nav span:hover div a:visited {
  color: #19363b;
  font-size: 9pt
}

#nav span:hover div a:hover,#nav span:hover div a:active {
  color: #fff;
}
.menushow {
  display: none;
  background-image: url(bg.png);
  border: 1px solid #98e8f5;
  z-index: 100;
}

#login {
  position: absolute;
  z-index: 50;
  width: 800px;
  height: 586px;
  background-image: url(login.png);
}

#login form {
  width: 280px;
  top: 130px;
  left: 25px;
  position: absolute;
  text-align: center;
  padding: 0;
  color: #fff
}


#login form input {
  font-size: 10pt;
  padding: 1px 3px;
  background-image: url(inputbg.png);
  background-position: center center;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
}

#login form input.button {
  font-size: 8pt;
  padding: 0 2px;
  background-image: url(buttonbg.png);
}

#login a:link, #login a:visited {
  color: #c5eedb;
  text-decoration: none;
}

#login a:active, #login a:hover {
  color: #edfafb;
  text-decoration: underline;
}

#login {
  display: none
}

span.alert, span.error {
	text-align: center;
	display: block;
	margin-bottom: 5px;
	padding: 2px; 
	font-weight: bold;
}
span.alert { background-color: #03c215; } 
span.error { background-color: #c20303; }