html { 
 margin:0; 
 padding:0; 
 font-size: 100.01%;
 } 
  
body {
 background: #DBDBDB;
 color: black;
 margin: 0;
 padding: 3px; 
 min-width: 1000px; /* Bei weniger als x Breite soll ein Scrollbalken erscheinen */
 font-size: 100.01%;
 font-family: Helvetica;

}

a { 
color: #D0132D; 
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
} 

a.leftmenu { 
color: #D0132D; 
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
} 

a:visited { color: black; } /* Besuchte Links werden schwarz, bleiben dennoch unterstrichen. Somit erkennt man wo man sich schon befunden hat. */
.skip { /* Da ein wichtiger Screenreader das display: none; auch fälschlicherweise für sich versteht und nichts vorließt obwohl das hier sich vor allem an Blinde richtet, muss man es so lösen dass man diesen Link außerhalb des Sichtfeldes bringt. Somit wird er trotzdem vorgelesen. */
 position: absolute;
 margin-left: -10000px;
 font-family:Arial, Helvetica, sans-serif
}

h1 { 
 color: white;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 font-size: 18px;
 line-height: 20px;
 padding: 10px 0 5px 10px;
 margin: 0px;
 border: 0px;
}


	
img {
 border: 0;
 padding: 0px;
 margin: 0;
}

img.lang {
 padding: 0;
 margin: 1px;
 border: 1px solid #d0132d;
}

img.header { /* alle Bilder bekommen einen schönen Rahmen */
 width: 600px;
 height: 84px;
 border: 0px;
 padding: 0px;
}


.contenttext {
    padding: 5px;
  }

.fcenter {
     padding-right: 25px;
    margin : auto;
    float : right;
  }

.fleft {
    float: left;
    margin: 0 0 0 0;
    padding-right: 10px;
  }

.fright {
   float: right;
    margin: 0 0 0 0;
    padding-left: 10px;
    padding-right: 10px;
  }

.headline {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 25px;
    padding: 55px 0 5px 20px;
    margin: 0;
    border: 0; 
  }

.caption {
    font-family: Helvetica;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 25px;
    padding: 10px 0 5px 20px;
    margin: 0;
    border: 0; 
  }

  
.text { 
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 5px;
    font-size: 14px;
    line-height: 18px;
    font-family: Arial;  
  }
  
  hr {
	width: 560px; 
  border:1px solid #DBDBDB;
  margin-left: 10px;
  margin-right: 10px;
}
.textleft {
    padding-left: 0px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Arial;  
  }

.textright {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Arial;  
  }
      
 .ref { 
 font-size: 1.01em;
 font-weight: bold;
 font-family: Arial;
  padding: 0px;
  margin: 0;
  border: 0; 
  }
  
li.top {
 font-weight: bold;
 padding: 3px;
 font-family: Arial;
}

li.con {
  list-style-type: square;
  font-size: 0.9em;
  font-weight: normal;
  font-family: Arial;
}



#container {
 max-width: 1000px;
 margin: auto; /* Hiermit zentrieren wir unsere Seite */
 border: 0;
 border-bottom: 0; 
 border-top: 0; 
 border-left: 3px solid #D0132D; 
 border-right: 3px solid #D0132D;
}


/* - Der Hauptinhaltsteil - */
#main {
  /*min-height: 480px; */
 background: #D0132D;
 padding: 0; 
 line-height: 1.5em; 
 border-bottom: 0;
 border-left: 0; 
 border-right: 0;
 border-top: 1px solid white; 
}

#leftcol{
 /* background: url(../pic/links.jpg) 0 0 no-repeat; */
  width: 18%; 
  height: 560px;
  float:left; 
  position:relative; 
  border: 0;
  padding: 0;
  margin: 0;
  margin-top: 15px; 

 }
 
#twocols{
 width:82%; 
 float:right; 
 position:relative; 
 border: 0;
 padding: 0;
  }
 
#rightcol{
 /* background: url(../pic/rechts.jpg) no-repeat 0 0 green; */
 width:20%;
 float:right; 
  position:relative; 
  border: 0;
  padding: 0;
  margin: 0;
  margin-top: 15px; 
 }
 
#maincol{
 background: url(../pic/links-schraeg.jpg) no-repeat 0 0 white;
 float: left; 
 display:inline; 
 position: relative; 
 width:79%; 
 }
 

/* - Der Footer - */
#footer {
  background: url(../pic/unten.gif) no-repeat 0 0 #D0132D;
  text-align: right;
 height: 70px;
 /*
  border-bottom: 3px solid #D0132D; */
}

/* - Logo bzw. Kopf - */
#logo { ;
 background: url(../pic/blume.jpg) 0 0 no-repeat #D0132D; 
 height: 120px; /* Das Bild ist 120px hoch also wählen wir das auch als höhe für unseren Kopf. */
 padding: 0;
 text-align: right;
 overflow: hidden; /* Einzig der Mozilla könnte den Text unverhältnissmäßig zum Hintergrund verändern. Damit dann wenigstens das Menü benutzbar bleibt schneiden wir alles was herausragt ab. */

 margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
 border: 0;
}

#logo a {
 color: white;
  text-decoration: none;
  border: 0;
}


#pagestart { /* Ist dafür gedacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz außen am Fenster ist. */
 text-align: center;
 font-size: 0.8em; /* Ein Kompromiss über den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen selbst eingestellte Textgröße für zu groß, wissen aber nicht wie man das ändert. */
 max-width: 1000px; /* Eine Begrenzung der Breite auf höhstens 900px. Das machen wir um nicht zu lange Textbreiten zu erhalten welche dann schlecht zu lesen sind. Für den IE gibt es in ielte.css einen Woraround. */
 margin: auto; /* Hiermit zentrieren wir unsere Seite */
 border: 0; 
 margin: 0;
}


 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

.redleft {
  background: white;
  width: 140px;
  height: 90px;
  text-align: center;
  margin: auto;
  margin-bottom: 10px;
  padding: 3px;
  font-size: 15px;
  font-family: Arial;
  border: 3px solid #DBDBDB;
}

.redright {
  background: white;
  width: 140px;
  text-align: left;
  margin: auto;
  margin-bottom: 10px;
  padding: 3px;
  font-size: 15px;
  line-height: 20px;
  font-family: Arial;
  border: 3px solid #DBDBDB;
}

.contact1 { 
   width: 230px;
   float: left;
   position:relative;
     border: 0;
  padding: 0;
  margin: 0;
  }
  
 .contact2 { 
   width:310px;
   float: left;
   position:relative;
     border: 0;
  padding: 0;
  margin: 0;
  }
   .contact3 { 
   width:400px;
   float: left;
   position:relative;
     border: 0;
  padding: 0;
  margin: 0;
  }