@charset "utf-8";
body {
        font: 100%/1.4 Verdana, Geneva, sans-serif;
        margin: 0;
        padding: 0;
        background: #d2d9f2;

      }
/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
        padding: 0;
        margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
        margin-top: 0px;         /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
        padding-right: 15px;
        padding-left: 15px; /* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */
}
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
        border: none;
}
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
        color: #963421;
        text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}
a:visited {
        color: #963421;
        text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
        text-decoration: none;
}

/* ~~ Dieser Container mit fester Breite umschließt die anderen div-Tags. ~~ */
.container {
        width: 710px;
        background: #d2d9f2;
        margin:auto;
        margin-top:55px;
         /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

/* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. Sie enthält einen Bild-Platzhalter, der durch Ihr eigenes, mit Hyperlink versehenes Logo ersetzt werden sollte. ~~ */


.header {
        position:absolute;
        width: 710px;
        height:150px;
        background-color:#d2d9f2;
}

.ueberschrift {
        position: absolute;
        left:390px;
        top:-145px;
        height:145px;
        width:310px;
        background-image:url(bilder/ueberschrift1.png);
        background-repeat:no-repeat;

}

.ueberschrift:hover {

        background-image:url(bilder/ueberschrifthover1.png);

}



.wohnung8 {
        position: absolute; left:-48px;top:-105px;
        height:148px;
        width:199px;
        background-image :url(bilder/wohnung8.png);
}
.wohnung8:hover {
        background-image: url(bilder/wohnung8hover.png);

}
.wohnung8_s {
        position: absolute;
        left:-48px;
        top:-105px;
        height:148px;
        width:199px;
        background-image :url(bilder/wohnung8hover.png);
}

.wohnung8_title {
        position: absolute;
        left:-53px;
        top:-125px;
        height:27px;
        width:130px;
        background-image: url(bilder/wohnung8titel.png);
}

.wohnung9 {
        position: absolute;
        left:130px;
        top:-110px;
        height:148px;
        width:199px;
        background-image: url(bilder/wohnungStandart.png);
}
.wohnung9:hover {
        background-image: url(bilder/wohnung9hover.png);

}
.wohnung9_s {
        position: absolute;
        left:130px;
        top:-110px;
        height:148px;
        width:199px;
        background-image: url(bilder/wohnung9hover.png);
}
.wohnung9_title {
        position: absolute;
        left:185px;
        top:-130px;
        height:27px;
        width:130px;
        background-image: url(bilder/wohnung9titel.png);
}
#kontakt {
        position: absolute;
        right: 9px;
        top: 11px;
        background-color: #edca97;
        width:175px;
        height:40px;
        background-image:url(bilder/kontakt.png);
        background-repeat:no-repeat;
        background-position:center;
}
#kontakt:hover {
        background-image: url(bilder/kontakthover.png);
}


.abgerundet {

    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius:10px; /* Safari, Chrome */
    -khtml-border-radius:10px; /* Konqueror */
    border-radius:10px; /* CSS3 */
}


/* ~~ Dies sind die Layoutinformationen. ~~

1) Eine Auffüllung wird nur oben und/oder unten im div-Tag positioniert. Die Elemente innerhalb dieses div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.

*/

.content {
        position:absolute;
        top: 175px;
        left: 35%;
        width: 710px;
        height: 610px;
        background: #ffffff;



}

/* ~~ Fußzeile ~~ */
.footer {
        width: 700px;
        padding: 10px;
        position:absolute;
        bottom:-30px;
        text-align:right;
        font-size:smaller;
        color:#555;
}

.footer:a{
        color:#000;
}

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

/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
        float: right;
        margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
        float: left;
        margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
}

.textbox_orange {

        background-color: #edca97;
        width: 195px;
        height: 363px;
        font-family: Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#963421;
}

.textbox_orange h2{

        font-family:Verdana, Geneva, sans-serif;
        font-size:14px;
        font-style:italic;
        font-weight:400;
        color:#963421;
}

.textbox {

        background-color: #FFF;
        font-family: Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#963421;
        padding: 10px 10px 10px 10px;

}


.textbox h2{

        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
        font-style:italic;
        font-weight:400;
}

.textbox ul{
        margin-left:20px;
}

.rechtsunten {
        position:absolute;
        bottom:10px;
        right:185px;
        width:185px;
        height:325px;
}


.submenue {
        position:absolute;
        font-size:13px;
        color:#963421;
        bottom: 10px;
        right: 10px;
        height:325px;
        width:145px;
        background-color:#edca97;
        padding: 15px 15px 15px 15px;
        alignment-adjust:central;
        text-align:right;
        background-image: url(bilder/inhaltverz/inhaltverzVerlauf.gif);
        background-repeat: repeat-x;
        background-position: bottom;


}

/* Imagebox */
/* Imagebox --- BREITE ---*/
.bild1{
        position:absolute;
        right:10px;
        top:60px;
        width:335px;
        height:175px;
}
.bild2breit{
        position:absolute;
        bottom:40px;
        left:10px;
        width:505px;
        height:315px;
}
.bild2lang{
        position:absolute;
        bottom:40px;
        left:10px;
        height: 510px;
        width: 320px;
}
.bildGrundriss8{
        background-image: url(bilder/wohnung8/grundriss/grundriss.png);
        position:absolute;
        bottom:10px;
        left:-350px;
        height: 520px;
        width: 350px;
}
.bildGrundriss8:hover{
        background-image: url(bilder/wohnung8/grundriss/grundrissHover.png);
}

.bildGrundriss9{
        background-image: url(bilder/wohnung9/grundriss/grundriss.png);
        position:absolute;
        bottom:10px;
        left:-350px;
        height: 520px;
        width: 350px;

        }

        .bildGrundriss9:hover{
        background-image: url(bilder/wohnung9/grundriss/grundrissHover.png);
}




/* Inhaltsverzeichniss */

.feedback {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/feedback.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.feedback:hover {
        background-image:url(bilder/inhaltverz/feedbackhover.png);
}

.grundriss {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/grundriss.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.grundriss:hover {
        background-image:url(bilder/inhaltverz/grundrisshover.png);
}

.schlafzimmer {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/schlafzimmer.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.schlafzimmer:hover {
        background-image:url(bilder/inhaltverz/schlafzimmerhover.png);
}

.badezimmer {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/badezimmer.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.badezimmer:hover {
        background-image:url(bilder/inhaltverz/badezimmerhover.png);
}

.wohnzimmer {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/wohnzimmer.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.wohnzimmer:hover {
        background-image:url(bilder/inhaltverz/wohnzimmerhover.png);
}

.preise {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/preise.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.preise:hover {
        background-image:url(bilder/inhaltverz/preisehover.png);
}

.kueche {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/kueche.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.kueche:hover {
        background-image:url(bilder/inhaltverz/kuechehover.png);
}


.terrasse {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/terrasse.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.terrasse:hover {
        background-image:url(bilder/inhaltverz/terrassehover.png);
}

.balkon {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/balkon.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.balkon:hover {
        background-image:url(bilder/inhaltverz/balkonhover.png);
}

.sonstiges {

        height:25px;
        width:135px;
        background-image:url(bilder/inhaltverz/sonstiges.png) ;
        background-repeat:no-repeat;
        background-position:center;
}
.sonstiges:hover {
        background-image:url(bilder/inhaltverz/sonstigeshover.png);}

.bewertung{
        height:16px;
        width:490px;
        bottom:0px;
        position:absolute;
        left:10px;

}

.vorladen {
         display:none;
         height:0px;
         width:0px;
}