/* CSS STYLE! */

/* Main */
html, body {
background-color:#550000;
font-family:system,kochi gothic,sans;
height: 100%;
margin: 0;
padding: 0;
}

/* HR */
div.hr {
  height: 2px;
  background: url(hr.gif) repeat;
}
div.hr hr {
  display: none;
}


/* Classes */
a:link {color: #000000;text-decoration:none}     /* unvisited link */
a:visited {color: #000000;text-decoration:none}  /* visited link */
a:hover {color: #000000;text-decoration:none}   /* mouse over link */
a:active {color: #FF0000;text-decoration:none}   /* selected link */

/* Main dividers */
.main {
border: 1px solid black;
width: 556px;
height: 400px;
line-height: 17px;
/* Center */
margin:0 auto;
position:relative;
clear:left;
/* End center */
}

.distance {
width:1px;
height:50%;
margin-bottom:-200px; /* half of container's height */
float:left;
}

/* Clouds are using z-index 5 */

#numbercounter {
position: absolute;
top: 0%;
right: 0%;
font-size: 12px;
z-index:4;
}

#shoutbox {
position:absolute;
margin-left: 278px;
top:0%;
background-image: url('shout_bg.gif');
background-repeat: repeat;
width: 278px;
height: 400px;
z-index:3;
}

.shoutboxtext {}

#menu {
font-size: 20pt;
line-height: 27px;
margin-left: 43px;
z-index:2;
}

#titleimg {
position:absolute;
left: 0%;
background-image: url('asp.gif'); 
background-repeat: no-repeat;
width: 40px;
height: 400px;
z-index:1;
}

#bannerimg {
position:absolute;
bottom: 0px;
width: 556px;
height: 150px;
z-index:0;
}

/* Other pages*/
.inputfield {
overflow: hidden;
font-family:times;
font-size: 14px;
background-color: #550000;
border: 1px solid black;
color: white;
}

#shoutboxinput {
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
}

#shoutboxtalk {
height: 225px;
overflow: auto;
}

#normaltext {
margin-left: 43px;
}