/***

Layout Par.X Webseite
(Position und Groesse der Elemente/Bereiche)
	
benutzte Farben
 weinrot	#7A1510
 rot		#E43117
 beige		#FDFBD7
 violet		#BC8874
 
vorgesehene Bereiche
 html, body
 wrapper um alles
 header fuer Logo
 menue [siehe Datei hauptmenue.css]
 menue_news (weinroter News-bereich) [siehe Datei hauptmenue.css]
 menue_hidden (ausfahrbares Menue) [siehe Datei menuehidden.css]
 vline (vertikale Linie neben Teaser) [siehe auch Datei menueteaser.css]
 menue_teaser (Menue im Teaser, fuer Kundenlogos) [siehe auch Datei menueteaser.css]
 menue_bilder_unten (Menue im Content_Ref, fuer Bildernavigation)
 content fuer Inhalt (beiger Hintergrund)
 content_ref fuer Inhalt bei Referenzen (beiger Hintergrund, miest nur Bild drin)
 content_overflow fuer Inhalt ohne Hoehenbeschraenkung
 teaser fuer Zusatzinhalt links oder Menu mit Logos
***/

html {
margin: 0px;
padding: 0px;
}

/*
Grunddesign
 Hintergrund: weinrot #7A1510
 Schrift: beige #FDFBD7
*/
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #7A1510;
color: #FDFBD7;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 16px;
text-align: center; /* fuer IE_quirks */
}

/* 
Wrapper um alles um zu zentrieren
*/
#wrapper {
width: 950px;
margin: 0px auto; /* zentriert */
text-align: left;
}

/* 
Kopf mit Logo um alles
 Hintergrund: weinrot #7A1510
 Schrift: beige #FDFBD7
*/
#header {
position: relative;
background-color: #7A1510;
color: #FDFBD7;
height: 80px;
width: 100%;
}

#header #logo {
margin: 10px;
padding: 0;
border: 0 none;
}

/* 
Spalte links mit Menu und Impressum
 Hintergrund: rot #E43117
 Schrift: beige #FDFBD7
*/
#spalte_links {
display: block;
position: relative;
float: left;
z-index: 0;
padding: 0;
margin: 0;
border: 0px;
width: 200px;
height: auto;
}

/* 
Hautmenue links
 Hintergrund: rot #E43117
 Schrift: beige #FDFBD7
*/
#menue {
/* Format und Rahmen*/
display: block;
position: relative;
top: 0px;
width: 200px;
height: auto;
border: 1px solid #FDFBD7;
z-index: 1;
padding: 0;
margin: 0;

/* Font */
font-family: Tahoma, Helvetica, sans-serif;
font-size: 11px;
line-height: 220%;
color: #FDFBD7;

/* Listen */
list-style: none inherit;
}

/* 
Menue im Content_Ref fuer Bildernavigation
 Hintergrund: beige #FDFBD7
 Schrift: weinrot #7A1510
*/
#menue_bilder_unten {
/* Format und Rahmen*/
display: block;
position: relative;
bottom: 25px;
width: 100%;
text-align: center;
z-index: 2;
padding: 0;
margin: 0;
vertical-align:middle;
background-color: #FDFBD7;
}

#menue_bilder_unten a, 
#menue_bilder_unten a:link, 
#menue_bilder_unten a:visited,
#menue_bilder_unten a:active {
text-decoration: underline;
margin: 0;
padding: 0;
background-color: transparent;
color: #7A1510;
font-size: 13px;
font-weight: bold;
vertical-align:middle;
}

#menue_bilder_unten a:hover {
background-color: #E43117;
}

#menue_bilder_unten img {
border: 0;
vertical-align:middle;
}

/* 
Inhalt mitte
 Hintergrund: beige #FDFBD7
 Schrift: weinrot #7A1510
 Breite: 740px
*/
#content {
display: block;
position: relative;
float: left;
left: 4px;
top: 0px;
width: 710px; /* plus padding links rechts = 750px */
height: 541px;
overflow: hidden;
background-color: #FDFBD7;
border: 0px;
color: #7A1510;
margin: 0px;
padding: 0px 0px 5px 30px;
z-index: 1;
}

#content_ref {
display: block;
position: relative;
float: left;
left: 6px;
top: 0px;
width: 535px;
height: 544px;
overflow: hidden;
background-color: #E43117;
border: 1px solid #FDFBD7;
color: #7A1510;
margin: 0px;
padding: 0px;
z-index: 1;
}

#content_ref_alt {
display: block;
position: relative;
float: left;
left: 1px;
top: 0px;
width: 512px;
height: 544px;
overflow: hidden;
background-color: #E43117;
border: 1px solid #FDFBD7;
color: #7A1510;
margin: 0px;
padding: 0px;
z-index: 1;
}

#content_overflow {
display: block;
position: relative;
float: left;
left: 4px;
top: 0px;
width: 710px; /* plus padding links = 750px */
overflow: hidden;
background-color: #FDFBD7;
border: 0px;
color: #7A1510;
margin: 0px;
padding: 0px 0px 5px 30px;
z-index: 1;
}

#content_shadow_right {
display: block;
position: relative;
float: right;
left: -3px;
top: 0px;
width: 2px;
height: 548px;
overflow: hidden;
background-color: black;
margin: 0px;
padding: 0px;
z-index: 1;
filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50;
}

#content_shadow_right2 {
display: block;
position: relative;
float: right;
left: 1px;
top: 0px;
width: 2px;
height: 550px;
overflow: hidden;
background-color: black;
margin: 0px;
padding: 0px;
z-index: 1;
filter:alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25;
}

#content_shadow_bottom {
display: block;
position: relative;
float: right;
left: 0px;
top: 0px;
width: 741px;
height: 2px;
overflow: hidden;
background-color: black;
margin: 0px;
padding: 0px;
z-index: 1;
filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50;
}

#content_shadow_bottom2 {
display: block;
position: relative;
float: right;
left: 2px;
top: 0px;
width: 743px;
height: 2px;
overflow: hidden;
background-color: black;
margin: 0px;
padding: 0px;
z-index: 1;
filter:alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25;
}

/* 
Referenzen mitte
 Hintergrund: beige #FDFBD7
 Schrift: weinrot #7A1510
 Breite: 740px
*/
#referenzen {
display: block;
position: relative;
float: left;
left: 4px;
top: 0px;
width: 725px; /* plus padding links rechts = 750px */
height: 541px;
overflow: hidden;
background-color: #FDFBD7;
border: 0px;
color: #7A1510;
margin: 0px auto;
padding: 0px 0px 5px 15px;
z-index: 1;
}

#referenzen #content_left {
width: 455px;
}

/* 
Layout Inhalt mitte
 Links
  Breite: 440px
  
 Rechts
  Breite: 200px + padding 10px = 210px
  dazwischen gepunktete Linie
  
 Unten
  Breite: 675px
  gepunktete Linie oben
*/
#content_left {
 display: block;
 float: left;
 position: relative;
 top: 0px;
 width: 440px;
 margin-top: 60px;
 padding: 0px 0px 0px 0px;
 border: 0 none;
 color: #7A1510;
 text-align: left;
}

#content_right {
 display: block;
 float: left;
 position: relative;
 top: 0px;
 left: 0px;
 width: 200px;
 margin-top: 60px;
 margin-left: 10px;
 padding: 0px 0px 0px 10px;
 border-left: 1px dotted #7A1510; 
 text-align: left;
}

#content_bottom {
 display: block;
 float: left;
 position: relative;
 width: 710px;
 padding: 10px 0px 0px 0px;
 border-top: 0px; 
 text-align: justify;
}

#content_person {
 display: block;
 float: left;
 position: relative;
 width: 200px;

 margin: 15px 30px 5px 0px;
 text-align: left;
}

/* 
vline neben Teaser
 Hintergrund: weinrot #7A1510
 Schrift: beige #FDFBD7
*/
#vline {
position: relative;
float: left;
left: 5px;
width: 26px;
height: 544px;
margin: 0;
padding: 0;
background-color: #7A1510;
border: 1px solid #FDFBD7;
color: #FDFBD7;
z-index: 2;
}

/* 
Teaser links
 Hintergrund: violet #BC8874
 Schrift: weinrot #7A1510
*/
#teaser {
display:block;
position: relative;
float: left;
left: 4px;
width: 200px;
height: 544px;
margin: 0;
padding: 0;
background-color: #BC8874;
border: 1px solid #FDFBD7;
color: #7A1510;
z-index: 2;
}

#teaser a,
#teaser a:visited,
#teaser a:active {
font-size: 11px;
font-weight: bold;
text-decoration: underline;
color: #7A1510;
}

#teaser a:hover {
background-color: #E43117;
color: #FFFFFF;
margin: 0px;
padding: 2px 4px;
}

/* 
Menue Teaser links mit Kundenlogos
 Hintergrund: violet #BC8874
 Schrift: beige #FDFBD7
*/
#menue_teaser {
display: block;
position: relative;
float: left;
left: 4px;
width: 200px;
height: 544px;
background-color: #BC8874;
border: 1px solid #FDFBD7;
color: #FDFBD7;
padding: 0;
margin: 0;
z-index: 2;
}