.title{
    /*background-color: #aaffaa;*/
    background-color: #99ccbb;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-top: 4px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -2px;
    position:relative;
   /* left:2px;*/
    /*margin-right:4px;*/
}

.title h1{
    font-size: 200%;
    display:inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-color: transparent;
    font-style: normal;
}

.title h2{
    font-size: 100%;
    display:inline;
    background-color:transparent;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

ul#mainmenu img{
    border: 0px;
}

ul#mainmenu{
    display:block;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px 0px 0px 0px;
    position: relative;
    clear: both;
    width:100%; /* IE6 seems to need this */
}

ul#mainmenu li{
    float: left;
    display: block;

    /* with these two, the main menu nicely rearranges itself if the browser
     * window is really small. Not in IE5/6, but in FF...
     * 
     * nicer still would be if the boxes filled the available space even if they
     * don't fit two per line. But there's no way to do this.*/
    /* also, 50% does the wrong thing in IE 7 if the width happens to be an odd
     * number of pixels.*/
    width: 49.9999%;
    min-width: 200px;
    text-align: center;
    margin-bottom: 0px; /* overrides main stylesheet */
}

ul#mainmenu .choice{
    display:block;
    font-size: 150%;
    background-color: #c0c0f0;
    border: 3px solid transparent;
    margin: 2px;
    margin-top: 4px;
    margin-bottom: 0px;
    padding-top: 5px;
    text-decoration: none;
}

ul#mainmenu span{
    display:block;
}

ul#mainmenu .fakelink{
    text-decoration: underline;
}

ul#mainmenu .subtitle{
    font-size: 66.67%;
    color:black;
    margin-bottom: 4px;
}

ul#mainmenu a.choice:hover {
    border-color: #8080c0;
    background-color: #b0b0e0;
}