@charset "utf-8";

body {
	font: 100%/1.4 Verdana, Geneva, sans-serif;
	margin: 0;
	padding: 0;
	background: #d2d9f2;
	min-width: 1080px;
}
/* ~~ 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: 0;
	/* 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, a:visited {
	color: #963421;
	text-decoration: none;
	/* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}

a:link .title, a:visited .title {
	text-decoration: none !important;
}

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 auto;
	/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

.z-index {
	z-index: 999;
	height: 0px !important;
}

/* ~~ 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: 476px;
    top: -139px;
    height: 145px;
    width: 258px;
}

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

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

.wohnung1_title {
    position: absolute;
    left: -332px;
    top: -132px;
    height: 32px;
    width: 300px;
}}

.wohnung1:hover {
    background-image: url(bilder/wohnung1hover.png);
}

.wohnung8 {
    position: absolute;
    left: -93px;
    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: -93px;
    top: -105px;
    height: 148px;
    width: 199px;	background-image: url(bilder/wohnung8hover.png);
}

.wohnung8_title {
    position: absolute;
    left: -136px;
    top: -125px;
    height: 27px;
    width: 300px;
    text-align: center;
}

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

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

.wohnung9_s {
    position: absolute;
    left: 93px;
    top: -107px;
    height: 148px;
    width: 199px;
    background-image: url(bilder/wohnung9hover.png);
}

.wohnung9_title {
    position: absolute;
    left: 46px;
    top: -129px;
    height: 27px;
    width: 300px;}

.wohnung10 {
    position: absolute;
    left: 100px;
    top: -110px;
    height: 148px;
    width: 199px;
    background-image: url(bilder/wohnung10.png);
}

.wohnung10:hover {
    background-image: url(bilder/wohnung10hover.png);
}

.wohnung10_s {
    position: absolute;
    left: 100px;
    top: -110px;
    height: 148px;
    width: 199px;
    background-image: url(bilder/wohnung10hover.png);
}

.wohnung10_title {
    position: absolute;
    left: 233px;
    top: -133px;
    height: 32px;
    width: 300px;
}

#kontakt {
	position: absolute;
	right: 9px;
	top: 11px;
	background-color: #edca97;
	width: 175px;
	height: 40px;
}

.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: relative;
	top: 175px;
	right: -150px;
	width: 710px;
	height: 610px;
}
.white-bg {
	background: #ffffff;
}

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

/* ~~ 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: 0;
}

.textbox_orange {
	background-color: #edca97;
	width: 195px;
	height: 363px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	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: 11px;
	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;
	padding: 15px 15px 15px 15px;
	alignment-adjust: central;
	text-align: right;
	background: #edca97 url(bilder/inhaltverz/inhaltverzVerlauf.gif) repeat-x bottom;
}

.submenue .submenu-title {
	margin: 2px 0;
	width: 145px;
}

.submenueWohnung10 {
	position: absolute;
	font-size: 13px;
	color: #963421;
	bottom: 10px;
	right: 10px;
	height: 365px;
	width: 145px;
	padding: 15px 15px 15px 15px;
	background: #edca97 url(bilder/inhaltverz/inhaltverzVerlauf.gif) repeat-x bottom;
}

.submenueWohnung10 .submenu-title {
	margin: 2.5px 0;
	width: 145px;
}


/* Imagebox */
/* Imagebox --- BREITE ---*/
.bild1 {
	position: absolute;
	right: 10px;
	top: 60px;
	width: 335px;
	height: 175px;
}

.bild1Wohnung10 {
	position: absolute;
	right: 10px;
	top: 60px;
	width: 335px;
	height: 135px;
}

.bild2breit {
	position: absolute;
	bottom: 40px;
	left: 10px;
	width: 505px;
	height: 315px;
}

.bild2lang {
	position: absolute;
	bottom: 40px;
	left: 10px;
	height: 510px;
	width: 300px;
}

.bildGrundriss8 {
	background-image: url(bilder/wohnung8/grundriss/grundriss.png);
	position: absolute;
	bottom: 10px;
	left: -350px;
	height: 520px;
	width: 350px;
	opacity: 0.68;
}

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

.bildGrundriss10 {
	background-image: url(bilder/wohnung10/grundriss/grundriss.png);
	position: absolute;
	bottom: 10px;
	left: -350px;
	height: 520px;
	width: 350px;
	opacity: 0.68;
}

.bildGrundriss1 {
	background-image: url(bilder/wohnung1/grundriss/grundriss.png);
	position: absolute;
	bottom: 10px;
	left: -350px;
	height: 520px;
	width: 350px;
	opacity: 0.68;
}

.bildGrundrissGarage {
	background-image: url(bilder/sonstiges/grundriss_garage.png);
	position: absolute;
	bottom: 10px;
	left: -350px;
	height: 520px;
	width: 350px;
	opacity: 0.68;
}

.bildGrundriss8:hover, .bildGrundriss9:hover, .bildGrundriss10:hover, .bildGrundriss1:hover, .bildGrundrissGarage:hover {
	opacity: 1;
}


/* Inhaltsverzeichniss */


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

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

.flag_ENG {
	position: absolute;
	right: 63px;
	top: -20px;
	height: 25px;
	width: 50px;
	background: url(bilder/flaggen/_ENG.png) no-repeat;
	opacity: 0.68;
}

.flag_ENG.active,
.flag_RUS.active,
.flag_DEU.active,
.flag_NEL.active,
.flag_ENG:hover,
.flag_RUS:hover,
.flag_DEU:hover,
.flag_NEL:hover {
	opacity: 1;
}

/*.flag_RUS {
	position: absolute;
	right: 116px;
	top: -20px;
	height: 25px;
	width: 50px;
	background: url(bilder/flaggen/_RUS.png) no-repeat;
	opacity: 0.60;
}
*/
.flag_DEU {
	position: absolute;
	right: 116px;
	top: -20px;
	height: 25px;
	width: 50px;
	background: url(bilder/flaggen/_DEU.png) no-repeat;
	opacity: 0.60;
}

.flag_NEL {
	position: absolute;
	right: 10px;
	top: -20px;
	height: 25px;
	width: 50px;
	background: url(bilder/flaggen/_NEL.png) no-repeat;
	opacity: 0.68;
}

.title {
	font-family: 'Kalam', cursive;
	font-size: 28px;
	text-align: center;
	font-weight:400;
	text-decoration-line: none !important;
}

.clickable:hover .title, .title.active {
	text-shadow: 0 0 15px rgba(255, 255, 255, 1);
}

.title::first-letter {
	font-weight: bold;
}

.rotate-10 {
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	transform: rotate(10deg)
}

.rotate-min-13 {
	-webkit-transform: rotate(-13deg);
	-moz-transform: rotate(-13deg);
	-o-transform: rotate(-13deg);
	-ms-transform: rotate(-13deg);
	transform: rotate(-13deg)
}

.translate-x {
	transform: translate(220px, 0px);
}