/* TODO: comment the rgb colours in here, 
         sort out the background of the boxes?,
         shrink logo a little more */

body {
    background: #aacce6;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: small;
    margin: 0px;
}

.current { color: #f00; } /* red */

.center {
    text-align: center;
}

.date {
    color: Gray;
    font-size: 80%;
}

.birthday {
    font-weight: bolder;
    font-size: larger;
    color: purple;
    text-align: center;
}

.announcement {
    font-size: 135%;
    color: black;
    text-align: center;
}

.title {  }

.menu { }

.navig {
    font-size: 88%;
    text-align: center;
}

img {
    border: #db7093 3px inset;
}

h1 { font-size: 120%; }

h2 { font-size: 110%; }

ul {
    list-style-position: inside;
    list-style-type: square;
    margin: 5px;
}

ul ul {
    list-style-position: inside;
    list-style-type: circle;
    margin: 8px;
}

a {
    color: #969696; /* medium grey */
    text-decoration: none;
    border-bottom: #b76666 thin dotted;
}

a:hover {
    color: #222; /* very dark grey */
    background-color: #aacce6;
    text-decoration: underline;
    border-bottom: none;
}

a:visited {
    border-bottom: #ffcccc thin dotted; /* pink */
}

/* In IE6, wanted to keep the red colour when hovering */
a.current:hover { color: #F00; } /* red */

#wrapper {
    width: 800px;
    padding: auto;
    margin: auto;
    background: white;
    border: maroon 1px solid;
}

#header, #main, #sidebar, #footer {
    margin: 5px;
}

#header {
    color: black;
    font-size: 140%;
    padding: 0px 10px;
    text-align: left;
    border-bottom: maroon 1px solid;
}

#middle { }

#main, #sidebar {
    color: #060802;
    padding: 5px;
    text-align: left;
    overflow: auto;
    margin: 0px;
}

#main {
    width: 70%;
    float: right;
    border-left: maroon 1px solid;
}

#sidebar {
    width: 25%;
}

#footer {
    color: black;
    text-align: center;
    padding: 0px;
    font-size: 90%;
    clear: right;
    border-top: maroon 1px solid;
}