@charset "UTF-8";
/* Ohne "margin: 0; padding: 0;" werden die internen Formatierungen des Browsers genommen.
   Gilt für das ganze Dokument */
* {
    margin: 0;
    padding: 0;
}

html, body {
    font-family: verdana, serif;
    font-size: 11px;
    color: white;
    background-color: #411c09;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 140%;
}

.wrapper {
    position: relative;
    margin: 0 auto;
    width: 800px;
    background-color: #d49c4b;
}

.header {
    width: 800px;
    height: 355px;
    background-color: transparent;
    background-image: url(../files/picture/homepage/headerDE.jpg);
}

/*------------------------------------------------------------  Navigation  -------------------------------------------------------- */
/* Formatierung des Elements mit class "navi" (hier ein <div>-Bereich)*/
.navi {
    width: 800px;
    height: 36px;
    background-color: transparent;
    background-image: url(../files/picture/homepage/navi_top.png);
    background-repeat: no-repeat;
    color: #bf6123;
}

/* Formatierung der Listen des Elements mit class "navi" */
.navi ul {
    list-style: none;
    padding-top: 10px;
    /* ohne "padding-top: 6px;" wird die Liste am oberen Rand plaziert. "center" und ähnliches funktioniert nicht. */
    padding-right: 7px;
}

/* Formatierung von Links des Elements mit class "navi" */
.navi a, .navi h2 {
    display: block;
    border: 0px;
    font-family: verdana, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    color: #bf6123;
}

/* Formatierung von Links des Elements mit class "navi", wenn Mauszeiger über Link */
.navi a:hover,
.navi a.chosen {
    color: #e97c29;
}

/* Formatierung von Listen-Elementen, Listen-Elementen mit class "link" und Listen-Elementen mit class "notlink" des Elements mit class "navi" */
.navi ul li,
.navi ul li.link,
.navi ul li.notlink {
    /* verhindert im Zusammenhang mit position absolute bei ul ul eine Höhenvergrößerung von .navi beim Hovern */
    margin: 0;
    position: relative;
    float: right;
    text-align: center;
    font-family: verdana, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    color: #bf6123;
    padding-left: 2px;
    padding-right: 2px;
}
/*  Ende ------------------------------------------------------------  Navigation  -------------------------------------------------------- */

.content {
    width: 760px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    text-align: justify;
    background-image: url(../files/picture/homepage/back_content.png);
    background-repeat: no-repeat;
    /* min-height: 410px;
       This declares the minimum desired height to 410px.

       height: auto !important;
       Let the actual final height auto-adjust (while obeying the declared min-height,
       of course). Even though auto is the default for any element's height, we want
       to declare it because of the following rule.

       height: 410px;
       Declare the fixed height as 410px.

       Now, why does this work? Well, standards compliant browsers will see:
       min-height: 410px;
       height: auto;

       IE6, on the other hand, due to ignoring !important and not understanding min-height, will see:
       height: 410px;

       Due to the incorrect implementation in IE6, in all browsers we now get an element which is
       at least 410px tall, but will stretch to accommodate whatever additional height is necessary. */
    min-height: 410px;
    height: auto !important;
    height: 410px;
}

.footer {
    clear: both;
    background-color: transparent;
    background-image: url(../files/picture/homepage/footer.png);
    background-repeat: no-repeat;
    width: 780px;
    padding-left: 0px;
    padding-right: 20px;
    height: 55px;
    font-size: 11px;
    text-align: right;
    padding-top: 68px;
    color: #bf6123;
}

.title {
    font-family: "arial black", sans-Serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #fbcc8f;
    font-style: italic;
    text-align: left;
    padding-left: 50px;
    padding-top: 0px;
    width: 710px;
    border-bottom: 1px solid white;
    text-transform: uppercase;
    background-position: left;
    height: 20px;
}

table {
    background-image: url(../files/picture/homepage/back_p.png);
    /*1=oben, 2=rechts, 3=unten, 4=links*/
    padding: 0 15px 0 15px;
}

p {
    background-image: url(../files/picture/homepage/back_p.png);
    padding: 15px;
}

p img.float {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

p img.unterBild {
    clear: both;
}

.mitBild {
    min-height: 300px;
    height: auto !important;
    height: 300px;
}

.mitBild2 {
    min-height: 100px;
    height: auto !important;
    height: 100px;
}

.spaltenContainer {
    background-image: url(../files/picture/homepage/back_p.png);
}

.spalteLinks {
    width: 320px;
    float: left;
}

.spalteRechts {
    /*width: 440px;*/
    margin-left: 320px;
}

.inSpalteLinks {
    background-image: none;
    /*1=oben, 2=rechts, 3=unten, 4=links*/
    padding: 15px 0 15px 15px;
}

.inSpalteRechts {
    background-image: none;
    min-height: 304px;
    height: auto !important;
    height: 304px;
    /*1=oben, 2=rechts, 3=unten, 4=links*/
    padding: 15px 15px 15px 15px;
}

.spaltenContainer2 {
    background: none;
}

.spalteLinks2 {
    width: 435px;
    float: left;
}

.spalteLinks2 .title {
    width: 385px;
}

.spalteRechts2 {
    /*width: 440px;*/
    margin-left: 445px;
}

.spalteRechts2 .title {
    width: 265px;
}

.inSpalteLinks2 {
    /*1=oben, 2=rechts, 3=unten, 4=links*/
    padding: 15px 0 15px 15px;
}

.inSpalteRechts2 {
    /*1=oben, 2=rechts, 3=unten, 4=links*/
    padding: 15px 15px 15px 15px;
}

/* Um gleichlange Spalten zu bekommen, wird ein <div class="clearSpalte"></div>
   nach dem Spaltencontainer <div class="spaltenContainer">...</div> eingefügt. */
.clearSpalte {
    clear: both;
    display: block;
    height: 0;
    margin-right: 0px;
    margin-bottom: 0px;
}

.button {
    width: 100px;
    height: 30px;
    background-color: #411c09;
    border: 2px solid #C60;
    font-family: verdana, serif;
    font-size: 11px;
    color: white;
    line-height: 140%;
}

input {
    width: 362px;
    height: 20px;
    background-image: url(../files/picture/homepage/back_c.png);
    /*background-color: #411c09;*/
    border: 1px solid #C60;
    font-family: verdana, serif;
    font-size: 11px;
    color: white;
    line-height: 140%;
    /*1=oben, 2=rechts, 3=unten, 4=links*/
    padding: 0 3px 0 3px;
}

textarea {
    width: 725px;
    height: 200px;
    background-image: url(../files/picture/homepage/back_c.png);
    /*background-color: #411c09;*/
    border: 1px solid #C60;
    font-family: verdana, serif;
    font-size: 11px;
    color: white;
    line-height: 140%;
    /*1=oben, 2=rechts, 3=unten, 4=links*/
    padding: 3px 3px 3px 3px;
}

.feld1 {
    width: 725px;
    height: 20px;
}

.feld2 {
    width: 100px;
    height: 20px;
}

.ueberschrift {
    font-size: 1.3em;
}

.center {
    margin: 0 auto;
    text-align: center;
}

img {
    border: 0;
}

a img {
    border: 0;
}

.affi_img {
    padding-right: 4px;
    display: inline;
    text-align: center;
}

.footer a {
    font-family: verdana, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    color: #bf6123;
}

.footer a:hover {
    color: #e97c29;
}

.content a {
    font-family: verdana, sans-serif;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    color: #fadeba;
    border-bottom: 1px solid #c68130;
}

.content a:hover {
    text-decoration: none;
    color: #ffffff;
    border-bottom: 1px solid #c68130;
}

.content a.lytebox,
.title a,
.title a:hover,
#top a,
#top a:hover {
    border-bottom: none;
}

.footerdiv {
    width: 760px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify;
}

#top a {
    font-family: verdana, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    color: #bf6123;
}

#top a:hover {
    color: #e97c29;
}

.clearFloat,
.clearFloat img {
    clear: both;
    margin-right: 0px;
    margin-bottom: 0px;
}

/* Voreinstellungen, um mit jQuery Verstecken/Zeigen auszuführen */
/*.radio2010 {
    visibility: hidden;
}*/