@charset "UTF-8";

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 14px;
    color: #D1DEEF;

    background: url(./img/bg.jpg) no-repeat 0 0 #000;
}


/* Überschriften-Reset */
h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    color: #FFF;
}

h1 {
    font-weight: bold;
    font-size: 1.5em;

    margin-top: 45px;

    width: 650px;
    height: 28px;
}

img {
    border: 0;
}

a:link, a:visited {
    color: #FFF;
    text-decoration: underline;
}

a:hover, a:focus, a:active {
    color: #5F98BF;
    text-decoration: none;
}

.clear {
    clear: both;
}

.txtLeft {
    text-align: left;
}

.txtRight {
    text-align: right;
}

.txtCenter {
    text-align: center;
}

.bld {
    font-weight: bold;
}

.shift1 {
    padding-left: 75px;
}

.shift2 {
    padding-right: 10px;
}

.spacing1 {
    padding-top: 25px;
}

.spacing2 {
    padding-top: 60px;
}

.spacing3 {
    margin: 30px 0;
}

.add {
    font-size: 0.8em;
    font-style: italic;
}



/* Überschriften */
#startseite .headingHauptprojekte, #projekte .headingHauptprojekte {
    height: 35px;
}

.headingHinweise {
    background: url(./img/headings/hinweise.png) left bottom no-repeat transparent;
}

.headingKontakt {
    background: url(./img/headings/kontakt.png) left bottom no-repeat transparent;
}

.boxAdresse {
    background: url(./img/adresse.png) 140px 50% no-repeat transparent;
}

.headingHauptprojekte {
    background: url(./img/headings/hauptprojekte.png) left bottom no-repeat transparent;
}

.headingWeiteres {
    background: url(./img/headings/weiteres.png) left bottom no-repeat transparent;
}

.headingW3C {
    background: url(./img/headings/w3c.png) left bottom no-repeat transparent;
}

.headingWeitereprojekte {
    background: url(./img/headings/weitereprojekte.png) left bottom no-repeat transparent;
}

.headingSonstiges {
    background: url(./img/headings/sonstiges.png) left bottom no-repeat transparent;
}

.headingEmpty {
    background: url(./img/headings/empty.png) left bottom no-repeat transparent;
}

.boxEmail {
    text-align: right;
    background: url(./img/email.png) 40px 50% no-repeat transparent;
}



/* Seite: Impressum */
#imprint h1 {
    margin-top: 60px;
}

#imprint table {
    background: url(./img/table_bg1.png) right top no-repeat transparent;
    width: 60%;
    height: 140px;

    border-collapse: collapse;

    margin: 30px 20px 0 auto;
}

#imprint thead td {
    font-weight: bold;
    font-size: 1.1em;
    vertical-align: top;

    height: 30px;

    text-align: right;

    color: #FFF;
}

#imprint td {
    padding: 5px;
}

#imprint .table2 td.shift1 {
    width: 35%;
}

#imprint .table1 tbody td {
    padding-left: 200px;
    line-height: 1.5em;
}

#imprint .table2 {
    margin: 45px 20px 25px auto;
}


/* Seite: Über mich */
#aboutme .foto {
    float: left;
    width: 140px;
    height: 180px;

    margin: 25px;
    margin-right: 0;

    background: url(./img/foto-rand.png) left bottom no-repeat transparent;
}

#aboutme .foto a:link, #aboutme .foto a:visited {
    position: relative; top: 8px; left: 8px;
    display: block;

    width: 100px;
    height: 162px;

    border: 1px solid #FFF;
}

#aboutme .foto a:hover, #aboutme .foto a:focus, #aboutme .foto a:active {
    border-color: #5F98BF;
}




/* Seite: Startseite */

#startseite h2.Welcome {
    font-size: 1.8em;
    letter-spacing: 0.12em;
    font-weight: bold;
    margin: 80px auto 20px auto;

    width: 659px;
    height: 46px;

    background: url(./img/willkommen.png) left top no-repeat transparent;
}

#startseite h1 {
    padding-top: 40px;
}

#startseite table {
    width: 80%;

    border-collapse: collapse;

    text-align: center;

    margin: 50px auto 50px auto;
}

#startseite td {
    padding: 5px;
    width: 33%;
}

#startseite tfoot {
    font-size: 0.8em;
    font-style: italic;
    color: #A8B9CF;
}

#startseite tbody {
    font-weight: bold;
}

#startseite table a:link, #startseite table a:visited {
    border: 1px solid #FFF;
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

#startseite table a:hover, #startseite table a:focus, #startseite table a:active {
    border-color: #5F98BF;
}



/* Seite: Projekte */
#projekte h1 {
    margin-top: 80px;
}

#projekte table {
    width: 80%;

    border-collapse: collapse;

    margin: 40px auto 40px auto;
}

#projekte .bild a:link, #projekte .bild a:visited {
    border: 1px solid #FFF;
    display: block;

    width: 150px;
    height: 150px;

    margin: 10px auto;
}

#projekte .bild a:hover, #projekte .bild a:focus, #projekte .bild a:active {
    border-color: #5F98BF;
}

#projekte td {
    padding: 5px;
    width: 70%;
    text-align: right;
}

#projekte .bild {
    width: 30%;
}

#projekte .titel {
    text-align: left;
    font-weight: bold;
    font-size: 1.4em;
    width: 40%;
}

#projekte .zeit {
    font-size: 0.8em;
    width: 20%;
}

#projekte .titel2 {
    font-size: 1.1em;
}

#projekte .beschreibung {
    font-size: 0.9em;
    font-style: italic;
}

#projekte ul {
    list-style-type: square;
    color: #5F98BF;
}



#homepage {
    position: relative; top: 0; left: 0;

    display: block;

    width: 870px;
    height: 184px;
}

#main {
    position: relative; top: 0; left: 0;

    width: 100%;
}

#navi {
    position: absolute; top: 184px; left: 70px;

    width: 800px;
    height: 80px;
}

#navi a:link, #navi a:visited {
    position: absolute; top: 0;

    display: block;

    height: 80px;
}

#navi a:hover, #navi a:focus, #navi a:active, #navi .active {
    background-position: 0 -80px;
}

#content {
    position: absolute; top: 268px; left: 70px;

    width: 800px;
}

#maincontent {
    background: url(./img/content-bg.jpg) no-repeat 0 0 #000;

    border: 1px solid #000d39;

    width: 788px;

    padding: 5px;
}

#counter {
    position: relative; bottom: 0; left: 0;

    padding: 5px;
    margin-top: 10px;

    border-top: 1px solid #000d39;

    color: #4B6391;
    font-size: 0.8em;
}

#footer {
    position: relative; top: 0; left: 0;

    background: url(./img/footer.jpg) no-repeat 50% 40px transparent;

    width: 100%;
    height: 140px;

    display: block;
}

#menuStartseite {
    left: 0;

    width: 197px;

    background: url(./img/navi/startseite.jpg) no-repeat 0 0 transparent;
}

#menuProjekte {
    left: 197px;

    width: 176px;

    background: url(./img/navi/projekte.jpg) no-repeat 0 0 transparent;
}

#menuUebermich {
    left: 373px;

    width: 200px;

    background: url(./img/navi/uebermich.jpg) no-repeat 0 0 transparent;
}

#menuImpressum {
    left: 573px;

    width: 227px;

    background: url(./img/navi/impressum.jpg) no-repeat 0 0 transparent;
}