/* -- Allgemeines -- */
body {
 background: url(../img/grypaws.gif) #e7f3f7;
 color: green;
 margin: 0;
 padding: 1%;
 min-width: 640px;
 font-size: 100.01%;
 font-family: verdana, arial, sans-serif ;
}
a { color: #0B4D8C; text-decoration: underline; }
a:visited { color: black; }
.skip {
 position: absolute;
 margin-left: 10000px;
}
h1 {
 font-size: 3em;
 line-height: 0.8em;
 padding: 20px 0 5px 5%;
 margin: 0;
 border-bottom: 1px dashed #aaa;
}
h1, h2, h3, h4, h5, h6 {
 color: #6699CC;
 font-family: Georgia, "Times New Roman", Times, serif;
}
img {
 border: solid 1px #aaa;
 padding: 1px;
 max-width: 95%;
}
.fleft {
 float: left;
 margin: 0 1em 1em 0;
}
.fright {
 float: right;
 margin: 0 0 0.2em 1em;
 padding: 1px;
}


/* -- Layoutspezifisches -- */
#container { /* Ist dafür gedacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz außen am Fenster ist. */
 font-size: 0.8em; /* Ein Kompromiss über den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen selbst eingestellte Textgröße für zu groß, wissen aber nicht wie man das ändert. */
 max-width: 900px; /* Eine Begrenzung der Breite auf höhstens 900px. Das machen wir um nicht zu lange Textbreiten zu erhalten welche dann schlecht zu lesen sind. Für den IE gibt es in ielte.css einen Woraround. */
 margin: auto; /* Hiermit zentrieren wir unsere Seite */
 border: 1px solid #aaa; /* Eine kleine optische Abgränzung */
 border-top: 0; /* Ganz oben allerdings würde es mit dem grauen komisch aussehen, deshalb weg damit. */
}

/* - Logo bzw. Kopf - */
#logo {
 background: url(../img/banner.jpg) 0 0 no-repeat green;
 height: 64px;
 padding: 0 20px;
 text-align: right;
 line-height: 54px;
 font-size: 54px;
 overflow: hidden;
 letter-spacing: -3px;
 margin: 0;
}
#logo a {
 color: white;
 text-decoration: none;
}
#logo a span {
 color: green;
 background: white;
 padding-right: 0.1em;
 font-weight: bold;
}

/* - Menü - */
#menu {
 background: url(../img/wechselschatten.png) #287635;
 padding: 5px 5%;
 margin: 0;
 text-align: right;
 color: yellow;
}
#menu li {
 font-size: 1.2em;
 display: inline;
 list-style-type: none;
 border-left: 1px solid white;
 padding: 0 10px 0 15px;
 font-weight: bold;
}
#menu li a {
 color: white;
 text-decoration: none;
}

/* - Subnavigation, Rechte Spalte - */
#subnav {
 width: 26%;
 min-width: 10em;
 float: right;
 padding: 70px 1%;
 margin: 1%;
 border-left: 1px dotted #aaa;
 font-size: 0.9em;
}
#subnav dt {
 font-size: 1.2em;
 font-family: Georgia, "Times New Roman", Times, serif;
 padding: 0.5em;
 margin-top: 1em;
 border-top: 1px dotted #aaa;
}
#subnav dd {
 padding: 0;
 margin: 0.2em 0;
}

/* - Hier Hauptinhaltsteil - */
#main {
 background: url() no-repeat 100% 0 white;
 padding: 0 31% 10px 20px;
 line-height: 1.5em;
}