style.css

body {
    font-family: Verdana, serif;
    background-color: #F8F7C4;
    /* body has default margin */
    margin:0;
}

#header {
    background-color:#FCF2E6;
    background-image:url('pictures/wernsbach.jpg');
    background-repeat: no-repeat;
    background-position: center center;

    height:102px;

    border-bottom-color: #505D00;
    border-bottom-style: solid;
    border-bottom-width: 2px;
}

#header h1 {
    text-align:center;
    color:#F6F2EC;

    /* h1 has default margin */
    margin-top:0;
    margin-bottom:0;

    /* vertical middle alignmnet */
    padding-top:20px;
}

#menu {
    font-size: small;
    font-weight: bold;
    height: 26px;
}

/* ul have default padding */
#menu ul {
    padding:0;
    margin:0;
    background-color: #505D00;
}

#menu li {
    list-style: none;
    display: block;
}

/* Places the menu in the middle */
#menu .menu {
    height:26px;
    width:800px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: auto;
}

#menu .menu > li {
    border-right: 1px solid #FCF2E6;
    float:left;
    position: relative;
    /* vertical middle alignment of text */
    line-height:25px;
    height:26px;
}

/* For the 2nd level menu */
#menu .menu li ul {
    position: absolute;
}

#menu .menu li ul li {
    float :none;
    border-top: 1px solid #FCF2E6;
}

#menu .menu a {
    color: #FCF2E6;
    text-decoration: none;

    height:26px;
    display:block;
    text-align:left;
    padding-right: 17px;
    padding-left: 7px;
    border-left:10px solid #505D00;
}

#menu .menu a:hover {
    background-color: #979F46;
    border-left-color: #5D3E1B;
}

div.content {
    background-color: #FCF2E6;
    border: 3px dashed #8D9719;
    padding: 0 20px 10px;
    
    width:754px;

    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
}

div.content h2 {
    font-size: large;
    border-bottom: 1px solid #A77272;
}

div.content h3 {
    margin: 0;
    font-size: medium;
}

div.content p {
    margin-bottom: 10px;
    font-size: small;
    padding-left: 40px;
}

div.content img {
    float:right;
    border:0;
}

/* For the menu hover */
ul.menu li ul {display: none}
ul.menu li:hover ul {display: block}

/* The box on the right for the calendar */
div.rightcol {
    background-color:#FCF2E6;
    border:dashed 3px #8D9719;
    width:200px;
    /* Position the box absolutely in the middle.
     * Without margin-left it would overlap now with the content box
     */
    position: absolute;
    left: 50%;
    /* This is the ca. the half of div.content.width so its aligned correctly on
     * the right side of div.content
     */
    margin-left: 420px;
    margin-top: 10px;

    padding:0 8px 7px;
}

/* Some space between data calendar entries */
div.rightcol ul li {
    padding-top: 10px;
}

/* Align the calendar heading to middle */
div.rightcol h3 {
    text-align: center;
}