div, a, ul, dl, dt, dd, body {
 padding:0;
 margin:0;
 border:0;
}

body {
 background: url(/images/background.jpg) #000;
 color: #eee;
 font-family: Helvetica, Arial, Verdana, sans-serif;
 font-size: 11pt;
 margin-top:8px;
 }
hr {
 color: #ff2222;
 width:70%;
 }
#top {
 height: 218px;
 border-bottom: 2px solid #f00;
}

.normal {
 border-left: 2px solid #f00;
 margin-bottom:20px;
}

#container {
 color: #eee;
 width:700px;
 margin-left:auto;
 margin-right:auto;
 }

#middle{
 display:inline;
 width:545px;
 float:right;
 }
#content p {
 padding:5px 15px;
 }

#leftcol {
 display:inline;
 float:left;
 width:155px;
}


a {
 text-decoration:underline;
 color:#bbb;
}

a:hover {
 background:#ff2222;
}

img { border:none;
}
h1 {

text-align:center;
}

h3 {
 padding-left:15px;
 color:#f00;
 font-size:110%;
 text-align:left;
 }
h5 {
 padding-left:15px;
  }
h6 {
 text-align:center;
 margin-bottom: 5px;
}

li {
 margin-bottom:5px;
}

/*
 I use an unordered list for semantic correctness then remove list
specific styling.
 If the page was displayed without a stylesheet,
 the menu would be presented as a list of options. */
ul.menu {
 margin-top:10px;
 right:0;
}

.menu li {
  list-style:none;
  display: block;
  margin-top:5px;
  text-align:left;
  }

.menu a {
  display: block;
  text-decoration:none;
  height:20px;
  width:135px;
  color:white;
  clear:both;
  padding-left:10px;
  }

.menu a:hover {
  background:#ff2222;
 }

#content img {
clear:both;
}

.botpad {
 height: 20px;
}

table {
 border-collapse: collapse;
 margin-left:auto;
 margin-right:auto;
 }


 td, th{
 font-size:10pt;
 padding: 2px 5px;
 }

.results td,.results th{
 font-size:11px;
 border: 1px solid #444;
 valign:middle;
 }
 .lost {
 color:#f88;
 }
 .won {
 color:#8f8;
 }