/*
Endgültiges Layout "Mark in Japan"
Webdesign von Kopf bis Fuß Kapitel 3
*/

body {
        margin: 0;
        padding: 0;
        background: #026dc0 url('../bilder/bg.gif') repeat-x top;
        font-family: Helvetica, sans-serif;
        line-height: 1.4em;
}

/* Eine Regel für alle Elemente mit denselben Eigenschaften */
h1, h2, h3, p, ul, li {
        margin: 0;
        padding: 0;
}

p, h2, h3 {
        margin: 0 0 10px 0;
}

ul {
        list-style-type: none;
}

/* Hier wieder unser Freund "margin: 0 auto" */
#wrap {
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 10px;
        width: 780px;
        background: #fff;
        border: 10px solid #044375;
}

#kopfzeile {
        background: url('../bilder/BannerblauKaempfergross.jpg') no-repeat;
        height: 250px;
}

/*
Hintergrundbilder in CSS, um Text mit Bildern zu versehen
*/
#kopfzeile h1 {
        padding: 30px 0 30px 30px;
        color: #fff;
        background: url('../bilder/dot.png') no-repeat 10px 50%;
        font-weight: normal;
        letter-spacing: -1px;
}

#nav {
        margin: 10px 0 0 0;
        padding: 10px;
        background: #044375;
        border-top: 5px solid #033761;
}

/*
Standardmäßig werden Listenelemente als Block dargestellt.
Diesen Stil überschreiben wir mit "display: inline", wodurch
die Listenelemente nebeneinander dargestellt werden.
*/
#nav ul li {
        display: inline;
        margin: 0 10px 0 10px;
}

#nav a {
        color: #fff;
        text-decoration: none;
}

/* Standardmäßige float-Positionierung */
#inhalt {
        margin: 10px 0 0 0;
        padding: 10px;
        float: left;
        width: 505px;
}

#seitenleiste {
        margin: 10px 0 0 0;
        padding: 10px;
        float: right;
        width: 225px;
}

#seitenleiste ul {
        margin: 0 0 40px 0;
}

#seitenleiste h3 {
        padding: 5px;
        background: #eee;
        border-bottom: 2px solid #ddd;
        font-weight: normal;
}

/*
Denken Sie an "clear: both", wenn Sie Elemente
unterhalb von "gefloateten" Elementen positionieren.
*/
#fusszeile {
        clear: both;
        padding: 10px;
        background: #eee;
        border-bottom: 2px solid #ddd;
}

#fusszeile p {
        margin: 0;
        text-align: center;
        color: #777;
}

.tdthtraining {
        border: thin dotted gray;
        padding: 5px;}