@charset "iso-8859-2";
/* CSS Document */

/*###############################################################################################################*/
/* ~~ BASIC ~~ */
body {
	background-image: url(images/hoffmann-immobilien-higru-px.jpg);
	background-repeat: repeat-x;
	background-color: #ece1cd;
	margin: 0 auto;/* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: left; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color:#330000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.4;
}

/* ~~ 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;
	color: #330000;
}
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:#330000;
	text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}
a:visited {
	color:#330000;
	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. */
	color:#827258;
	text-decoration: none;
}
/* Klasse für verstecktes Formularfeld, das nicht ausgefüllt werden darf - HONEYPOT -
Spambots füllen alle Felder eines Formulars aus. Dabei versuchen sie, die Felder mit jeweils passenden Inhalten zu befüllen. Ein Feld namens z. B. "E-Mail" (ACHTUNG bei der Schreibweise, es muss anders heißen als das "richtige" E-Mail-Formularfeld!!!), wird daher mit großer Wahrscheinlichkeit mit einer - natürlich gefälschten - E-Mail Adresse gefüllt. Diese Eigenschaft der Spambots kann man sich zunutze machen, indem man zusätzliche Felder ins Formular einfügt, die von Menschen nicht ausgefüllt werden. Zu diesem Zweck werden die Zusatzfelder per CSS vor Menschen versteckt, und für den Fall, dass der Besucher CSS deaktiviert hat, noch ein entsprechender Hinweis angebracht. */
.email { display:none;}

/*###############################################################################################################*/
/* ~~ POSITIONEN / TEXTFORMATIERUNG ~~ */
/*###############################################################################################################*/
/* ~~ WRAPPER ~~ */
/* Dieser Container umfasst alle Inhalte und stellt das Hintergrundbild zentriert dar. */
.wrapper {
	height:100%;
	overflow:hidden;
	background: url(images/hoffmann-immobilien-higru-bild.jpg) no-repeat #ece1cd center top;
	margin:0 0 0 0;
}
.wrapper2 {
	height:100%;
	overflow:hidden;
	background: url(images/higru2.gif) no-repeat;
	background-position:-1px 910px;
	
}
.wrapper3 {}

/*###############################################################################################################*/
/* ~~ CONTAINER ~~ */
/* ~~ Dieser Container mit fester Breite umschließt die Inhalte ~~ */
.container {
	width: 1026px;
	margin: 0 auto; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
    text-align: left;
}

/*###############################################################################################################*/
/* ~~ HEADER = Kopfzeile mit Logo, Navigation, Bildleiste ~~ */
.header {
	font: 11px Arial, Helvetica, sans-serif;
	width: 1026px;
	height: 150px;
}
/* Formatierung für das Logo oben */
.header img {
	float:left;
	margin:0 150px 0 0;
}
/* Stile für die Navigationslisten im header */
.navigation {
	float:left;
	margin:25px 0 0 0;
}
.header ul {
	list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
	text-transform: uppercase; /* Hiermit wird der TExt in Grossbuchstaben geschrieben. */
}
.header ul li {
	padding: 5px 15px 0 0;
}
.header ul a, .header ul a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
	display: block; /* Hiermit werden die Blockeigenschaften für den Anker angegeben, sodass dieser das gesamte umschließende LI-Element auffüllt und der gesamte Bereich auf einen Mausklick reagiert. */
	width: 100px;  /*Mit dieser Breite reagiert die gesamte Schaltfläche in IE6 auf Mausklicks. Kann entfernt werden, wenn IE6 nicht unterstützt werden muss. Berechnen Sie die exakte Breite durch Subtrahieren der Auffüllung für diesen Hyperlink von der Breite des Containers für die Randleiste. */
	text-decoration: none;
	color:#999;
}
.header ul a:hover, .header ul a:active, .header ul a:focus { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
	color:#666;
}

.navi-block1 {
	float:left;
	margin:25px 0 0 0;
}
.navi-block1 ul {
	list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
	text-transform: uppercase; /* Hiermit wird der TExt in Grossbuchstaben geschrieben. */
}
.navi-block1 ul li {
	padding: 5px 15px 0 0;
	margin:0 10px 2px 0;
	border-bottom:#999 dotted 1px;
}
.navi-block1 ul a, .navi-block1 ul a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
	display: block; /* Hiermit werden die Blockeigenschaften für den Anker angegeben, sodass dieser das gesamte umschließende LI-Element auffüllt und der gesamte Bereich auf einen Mausklick reagiert. */
	width: 100px;  /*Mit dieser Breite reagiert die gesamte Schaltfläche in IE6 auf Mausklicks. Kann entfernt werden, wenn IE6 nicht unterstützt werden muss. Berechnen Sie die exakte Breite durch Subtrahieren der Auffüllung für diesen Hyperlink von der Breite des Containers für die Randleiste. */
	text-decoration: none;
	color:#999;
}
.navi-block1 ul a:hover, .navi-block1 ul a:active, .navi-block1 ul a:focus { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
	color:#666;
	font-weight:bold;
}

.navi-block2 {
	float:left;
	margin:25px 0 0 0;
}
.navi-block2 ul {
	list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
	text-transform: uppercase; /* Hiermit wird der TExt in Grossbuchstaben geschrieben. */
}
.navi-block2 ul li {
	padding: 5px 15px 0 0;
	margin:0 10px 2px 0;
	border-bottom:#999 dotted 1px;
}
.navi-block2 ul a, .navi-block2 ul a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
	display: block; /* Hiermit werden die Blockeigenschaften für den Anker angegeben, sodass dieser das gesamte umschließende LI-Element auffüllt und der gesamte Bereich auf einen Mausklick reagiert. */
	width: 75px;  /*Mit dieser Breite reagiert die gesamte Schaltfläche in IE6 auf Mausklicks. Kann entfernt werden, wenn IE6 nicht unterstützt werden muss. Berechnen Sie die exakte Breite durch Subtrahieren der Auffüllung für diesen Hyperlink von der Breite des Containers für die Randleiste. */
	text-decoration: none;
	color:#999;
}
.navi-block2 ul a:hover, .navi-block2 ul a:active, .navi-block2 ul a:focus { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
	color:#666;
	font-weight:bold;
}

.navi-block3 {
	float:left;
	margin:25px 0 0 0;
}
.navi-block3 ul {
	list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
	text-transform: uppercase; /* Hiermit wird der TExt in Grossbuchstaben geschrieben. */
}
.navi-block3 ul li {
	padding: 5px 15px 0 0;
	margin:0 10px 2px 0;
	border-bottom:#999 dotted 1px;
}
.navi-block3 ul a, .navi-block3 ul a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
	display: block; /* Hiermit werden die Blockeigenschaften für den Anker angegeben, sodass dieser das gesamte umschließende LI-Element auffüllt und der gesamte Bereich auf einen Mausklick reagiert. */
	width: 80px;  /*Mit dieser Breite reagiert die gesamte Schaltfläche in IE6 auf Mausklicks. Kann entfernt werden, wenn IE6 nicht unterstützt werden muss. Berechnen Sie die exakte Breite durch Subtrahieren der Auffüllung für diesen Hyperlink von der Breite des Containers für die Randleiste. */
	text-decoration: none;
	color:#999;
}
.navi-block3 ul a:hover, .navi-block3 ul a:active, .navi-block3 ul a:focus { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
	color:#666;
	font-weight:bold;
}
/* Formatierung des großen Bildes */
.bildleiste {
	width:1026px;
	height:350px;
}

/*###############################################################################################################*/
/* ~~ LINKE SPALTE ~~ */
.sidebarLinks {
	min-height: 855px;
	float: left;
	width: 180px;
	padding: 30px 25px 0 30px;
}
.sidebarLinks a {
	color:#fff;
}
/* Hiermit erhalten die Bilder in der linken Spalte einen braunen Rahmen von 1px Stärke. */
.sidebarLinks .rahmen {
	border: 1px solid #330000;
	margin: 0 0 10px 0;
}
/* Textformatierungen für die linke Spalte */
.sidebarLinks h1 {
	font-size:11px;
	font-weight:bold;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}
.sidebarLinks .text-weiss {
	font: 10px Arial, Helvetica, sans-serif;
	color:#fff;
	line-height:normal;
	padding-bottom:30px;
}
.sidebarLinks .newsfeld {
	font: 10px Arial, Helvetica, sans-serif;
	color:#fff;
	line-height:normal;
	padding-bottom: 5px;
	border-bottom: 1px solid #fff;
	margin-bottom:10px;
}
.sidebarLinks .schlagworte {
	font-size:11px;
	color:#330000;
	padding-top:30px;
}
#teamnavi {
	font-size: 10px;
	height: 255px;
	width: 175px;
	color: #330000;
}
#teamnavi ol li {
	height: 23px;
	width: 175px;
	display: block;
	list-style-type: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #330000;
	vertical-align: bottom;
}
#teamnavi ol li a    {
	display: block;
	text-decoration: none;
	height: 23px;
	width: 175px;
	padding-left: 5px;
	padding-top: 3px;
}
#teamnavi ol li a:hover {
	background-color: #FFF;
	display: block;
	text-decoration: none;
	height: 20px;
	width: 175px;
	color:#330000;
}

/*###############################################################################################################*/
/* ~~ BEREICH MITTE ~~ */
.content {
	min-height: 880px;
	line-height:18px;
	width: 430px;
	float: left;
	padding: 25px 20px 30px 20px;
	position:relative;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.content-immoscout24 {
	line-height:18px;
	width: 740px;
	float: left;
	padding: 25px 20px 30px 20px;
	position:relative;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
/* Textformatierungen für den mittleren Bereich */
.content h1, .content-immoscout24 h1 {
	font: 16px Arial, Helvetica, sans-serif;
	color:#330000;
	line-height:24px;
	margin-bottom:15px;
	text-transform: uppercase;
}
.content h2, .content-immoscout24 h2 {
	font: 14px Arial, Helvetica, sans-serif;
	color:#330000;
	line-height:22px;
	font-weight:bold;
	margin-bottom:15px;
}
.content h3, .content-immoscout24 h3 {
	font: 12px Arial, Helvetica, sans-serif;
	color:#330000;
	line-height:20px;
	margin-bottom:15px;
}
.content h4, .content-immoscout24 h1 {
	font: 14px Arial, Helvetica, sans-serif;
	color:#330000;
	line-height:24px;
	margin-bottom:15px;
	text-transform: uppercase;
}
.content .fliesstext_fett, .content-immoscout24 .fliesstext_fett  {
	font: 12px Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#330000;
}
.content .fliesstext_klein, .content-immoscout24 .fliesstext_klein  {
	font: 10px Arial, Helvetica, sans-serif;
	color:#330000;
}
.content .fliesstext, .content .fliesstext_rechts, .content-immoscout24 .fliesstext , .content-immoscout24 .fliesstext {
	font: 12px Arial, Helvetica, sans-serif;
	color:#330000;
}
.content .fliesstext_rechts, .content-immoscout24 .fliesstext_rechts  {
	text-align:right;
}
/* Stile für die Navigationslisten im mittleren Bereich */
.content li, .content-immoscout24 li  {
	margin:0 0 0 50px;
	list-style: circle;
}

.content ul, .content ol, .content-immoscout24 ul , .content-immoscout24 ol  { 
}
.content ul, .content-immoscout24 ul  {
}
.content ul li, .content-immoscout24 ul li  {
}
.content ul a, .content ul a:visited, .content-immoscout24  ul a:visited, .content-immoscout24 ul a  { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
}
.content ul a:hover, .content ul a:active, .content ul a:focus { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
	color:#827258;
}
.content .quelle {
	font-size: 10px;
	font-style:italic;
	color:#827258;
}
.content .quelle a {
	font-size: 10px;
	font-style:italic;
	color:#827258;
}

/* Formatierung für das Rückruffeld im mittleren Bereich */
.rueckrufFeld {
	width:410px;
	height:205px;
	font: 10px Arial, Helvetica, sans-serif;
	color:#330000;
	padding:10px;
	bottom:0px;
	position:absolute;
	margin:0 0 5px 0;
	background-color:rgba(255,255,255,0.3);
	border:1px solid #e7dbc9;
}
.rueckrufFeld .formulartext {
	font: 10px Arial, Helvetica, sans-serif;
	color:#330000;
}

/*###############################################################################################################*/
/* ~~ RECHTE SPALTE ~~ */
.sidebarRechts {
	min-height: 825px;
	float: left;
	width: 310px;
	padding: 30px 0;
	position:relative;
}
/* Boxen mit abegrundeten Ecken */
.relative { /* Leider funktioniert der "abrunden-Effekt" in Microsofts Internet Explorer nicht. Abhilfe schafft das HTC-Skript CSS Curved Corner, das einfach mit der Zeile behavior:url(border-radius.htc) die Einstellungen für den Internet Explorer aktiviert. Die HAC-Datei liegt auf der gleichen Ebene wie die css-Datei. Das Skript überprüft, ob eine border-radius-Deklaration vorhanden ist und wendet dieses Attribut auf das entsprechende Element an, so dass es auch in Internet Explorer korrekt dargestellt wird. Damit dieser Hac einwandfrei funktioniert, sollte die Box mit den runden Ecken in einer Box mit der position: relative platziert sein. */
	position: relative;
	z-index: inherit;
	zoom: 1; /* For IE6 */
	width:300px;
}
/* Twitter */
.twitterbox {
	margin-bottom:10px;
}
/* abgerundete Box */
.rundeBox_dunkel {
	width:296px;
	padding:15px 2px 5px 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(border-radius.htc);
	line-height:12px;
	margin: 0 0 10px 0;
	background-color:rgba(128,117,98,0.7);
}
/* abgerundete Box */
.rundeBox {
	width: 296px;
	padding-top: 0px;
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 0px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(border-radius.htc);
	line-height: 12px;
	margin: 0 0 10px 0;
	background-color: rgba(255,255,255,0.00);
}
/* Hiermit werden Bilder in der abgerundeten Box zentriert und erhalten einen Abstand nach unten zum nächsten Element außerdem erhalten auch die Bilder abgerundete Ecken */
.rundeBox_dunkel img {
	text-align:center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(border-radius.htc);
	margin:0 0 5px 0;
}
/* Textformatierung in der abgerundeten Box */
.rundeBox_dunkel h1 {
	font: 16px Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#fff;
	margin-bottom:10px;
	text-transform: uppercase;
	text-align:center;
}
.rundeBox_dunkel .fliesstext {
	font: 10px Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#fff;
	text-align: left;
	padding: 0 10px 10px 10px;
}
/* Youtube */
.youtubeBox {
	text-align:center;
	width:301px;
	height:185px;
	background:#9b8c77;
}
.relative a {
	color:#fff;
}

/*###############################################################################################################*/
/* ~~ FUSSZEILE ~~ */
.footer {
	font: 11px Arial, Helvetica, sans-serif;
	color:#796147;
	width:100%;
	height:26px;
	padding:0;
	clear:both;
	background: #f9f6ef;

}
/* Textformatierung im Footer */
.footerTextbereich{
	width:100%;
	height:26px;
	display:block;
	padding-top:5px;
	text-align:center;
}
.footerTextbereich a{
	color:#796147;
}

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