/** TODO: change colour names to rgb values
  *       comment the rgb colours in here, 
  *       sort out the background of the boxes?,
  *       change the gradient images to gifs
  *       ...
  **/

body {
    background: url(images/topband.gif) #aacce6 repeat-x;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: small;
    margin: 0px;
}

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

.date {
    color: #808080; /* grey */
    font-size: 80%;
}

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

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

.title { }

.menu { font-size: 90%; }

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

.thumbnails { text-align: center; }

.descr {
    padding-left: 15px;
    border-left: double 4px #E6C4AA;
}

.links {
    text-align: left;
    padding: 0px 0px 20px 0px;
}

.linktitle { font-style: italic; }

h1 { font-size: 120%; }

h2 { font-size: 110%; }

h3 { font-size: 90%; }

img { border: none; }

a {
    color: #333; /* 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: #E6C4AA thin dotted; } /* pink */

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

.title a, .title a:hover, .title a:visited {
    color: #000; /* black */
    text-decoration: none;
    border-bottom: none;
    background-color: transparent;
}

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

#wrapper {
    width: 800px;
    padding: 5px 0px;
    margin: auto;
    text-align: center;
}

#header, #main, #sidebar, #footer {
    background: #FFF;
    border: #E6C4AA 1px solid;
}

#header {
    background: #FFF url(images/sky2.jpg) no-repeat center left;
    font-size: 140%;
    margin: 10px 0px;
    padding: 0px 10px;
    height: 90px;
    text-align: left;
}

#middle img { border: #E6C4AA 3px inset; }

#main, #sidebar {
    background: url(images/topgrad.jpg) #FFF repeat-x;
    padding: 15px;
    height: 537px;
    overflow: auto; 
}

#main {    
    margin: 0px 0px 10px 10px;
    width: 563px;
    float: right;
}

.about #main {
    margin: 0px 0px 10px 0px;
    width: 768px;
}

.links #main { text-align: left; }

#music, #blog, #vlog, #geek, #ohand { text-align: center; }

#sidebar {
    margin: 10px 10px 10px 0px;
    width: 160px;
    text-align: left;
}

#sidebar img { border: #E6C4AA 1px inset; }

.about #sidebar { display: none; }

#footer {
    background: url(images/botgrad.jpg) #FFF repeat-x bottom;
    margin: 0px;
    padding: 0px;
    font-size: 70%;
    clear: both;
}