/*###################################################
  # Stylesheet für www.vitalation.de                #
  #                                                 #
  # (c)2005 Thorsten Reichelt                       #
  ###################################################*/

/* Generelle Definition des html/body-Tags */
html, body{ 
   font-family : Verdana, Arial, sans-serif; /* Serifenlose Schrift */
   font-size : 12px; /* 12Pixel große Buchstaben */
   margin:0; /* Umlaufender Außenrand/Abstand */
   padding:0; /* Umlaufender Innenabstand */
   text-align:center;  /* Textausrichtung */
} 

/* Der äußere Rahmen der Seite der alles zusammen hält. */
#seitenweite{
   width:988px; /* Weite der Seite für 1024er Auflösungen - Beachte padding !*/
   text-align:left; /* Linksseitige Ausrichtung der Elemente */
   min-width: 768px; /* Kleiner als 500 Pixel soll es nicht werden */
   margin-left:auto; /* Außenrand/Abstand links automatisch */
   margin-right:auto; /* Außenrand/Abstand rechts automatisch */
   padding-left: 6px; /* Innenabstand von 6px um links einen blauen Balken zu erhalten */
   padding-right: 6px; /* Innenabstand von 6px um rechts einen blauen Balken zu erhalten */
   padding-bottom: 0px;
   padding-top: 0px;
   background-color: #0099FF;  /* Die Hintergrundfarbe des Blocks */
}

/* Kopf der Seite mit der Titelgrafik */
#kopf {
   display: block;
   background-color: transparent; /* Nimmt die Farbe von #seitenweit an */
   height:135px; /* Höhe der Kopfzeile */
   width:100%; /* Weite der Kopfzeile */
   text-align: center; /* Text zentriert darstellen */
   margin: 0px; /* Kein Außenrand/Abstand */
   padding: 0px; /* Kein Innenabstand */
}


/******************************************************************/
/* Definition der drei Spalten für die Menüs und den Contentblock */
/******************************************************************/

/* Linke Spalte */
#links {
   float: left; /* Dieses Element fließt links um das Contentelement herum */
   width: 160px; /* Breite der linken Spalte */
   position: relative; /* Relative Positionierung zum übergeordneten Element */
   margin-left: -160px; /* Außenrand/Abstand geht nach rechts */
	display: inline;
}

/* Mittlere Spalte - Mit einem Rand in der Breite der linken
   und rechten Spalte = Hintergrundfarbe der äußeren Spalten */
#mitte {
   border: 0px white solid; /* Einen 0 Pixel weiten Rahmen definieren */
   
   /*/*/ border-left-width: 160px; /* Weite des linken Rahmen */
   
   border-left-color: #BBCCDD; /* Die Farbe des linken Rahmens = Farbe unter der linken Spalte */
   border-left-style: solid; /* Art des Rahmens */
   
   background-color: #AAEE22; /* Farbe der mittleren Spalte */
   width: auto; /* Die Weite wird automatisch festgelegt */

   /*/*/ border-right-width: 160px; /* Weite des rechten Rahmens */
   border-right-color: #BBCCDD; /* Farbe des rechten Rahmens = Farbe unter der rechten Spalte */
   border-right-style: solid; /* Art des Rahmens */
   
   margin: 0;
}

/* Rechte Spalte */
#rechts {
   float: right; /* Dieses Element fließt rechts um das Contentelement herum */
   width: 160px; /* Weite der rechten Spalte */
   position:relative; /* Relative Positionierung zum übergeordneten Element */
   margin-right:-160px; /* Außenrand/Abstand nach links */
   display: inline;
}
/******************************************************************/


/* Die blaue Fußzeile der Seite */
#fusszeile {
   height: auto; /* Automatische Höhe, je nach Inhalt */
   width: 100%; /* Komplette Breite */
   background-color: #0099FF; /* Hintergrundfarbe */
   color: #FFFFFF; /* Textfarbe */
   font-size: 12px; /* Schriftgröße */
   padding-top: 4px;
   padding-bottom: 4px;
} 

#hauptspalte {
   float: left; /* Umlauf auf der linken Seite */
   width: 100%; /* 100% Weite */
   position: relative; /* Relative Positionierung zum übergeordneten Element */
   margin: 0 -8px 0 0px; /* Außenrand/Abstand <oben> <rechts> <unten> <links> */
}

#innen {
   margin:0; /* Umlaufender Außenrand/Abstand */
   width:100%; 
   background-color: #FFFFFF;
}

/* Was ganz fieses für den dummen IE von Microsoft */
#mitte>#innen { 
   border-bottom: 1px solid #FFFFFF;  /* Ein dünner Strich am unteren Ende */
}

/* Die clr-Klasse wird für den IE vom Mac benötigt */
.clr {
   clear:both;
}

/* Der Contentbereich der Seite. 
   Hier werden die Abstände zum Rand festgelegt */
.content{
   padding-left:5px;
   padding-right: 5px;
   padding-top: 15px;
   padding-bottom: 15px;
   min-height: 500px;
} 

/*Padding-Bottom:0 um im IE5 auf dem Mac eine Lücke im Layout zu beseitigen*/ 
#header .content{
   padding-bottom: 0; /* Innenabstand am unteren Ende ausschalten */
   padding: 0px;  /* Innenabstand allgemein auf 0px Größe setzen */
} 





/**************************************/
/* Definition von Schriften ab hier ! */
/**************************************/
h1 {
   background-color: #FFFFFF;
   font-size: 14px;
   border-left: 2px solid #0099FF;
   border-bottom: 2px solid #0099FF;
   width: 80%;
   display: block;
   clear: both;
}

h2 {
   background-color: #FFFFFF;
   font-size: 14px;
   border-left: 2px solid #0099FF;
   border-bottom: 2px solid #0099FF;
   width: 80%;
   display: block;
   clear: both;
}

h3{
	background-color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	border-left: 1px solid #0099FF;
	border-bottom: 1px solid #0099FF;
	width: 60%;
	height: auto;
    clear: both;
}

h4{
   background-color: #FFFFFF;
   font-size: 12px;
   font-weight: bold;
   border-bottom: 1px solid #0099FF;
   width: 40%;
   height: auto;
   clear: both;
}

.rot{
	color:#FF3300;
}

.blau{
	color:#3333CC;
}

.blauerhg{
	background-color:#E5EEF3;
	clear:both;
}

.blauerhg2{
	background-color:#BBCCDD;
	clear:both;
}

.gelberhg{
	background-color:#F0F8BB;
	clear:both;
}

.totop{
	background-color: #FFFFFF;
	text-align:right;
	font-size: 12px;
	border-right: 1px solid #0099FF;
	border-bottom: 1px solid #0099FF;
	width: 20%;
	height: auto;
	text-decoration:none;
}


/***********************************/
/* Klasse für das Navigationsmenü  */

.menue {
   position: relative;
   margin-top: 6px;
}

.menue dt {
   background-color: #0099FF;
   font-weight: bold;
   color: #FFFFFF;
   margin-left: 6px;
   margin-right: 6px; /* Außenrand/Abstand rechts vom Text */
   padding-left: 3px; /* Innenabstand des Elementes auf der linken Seite */
   padding-right: 3px; /* Innenabstand des Elementes auf der rechten Seite */
   padding-top: 3px; /* Innenabstand des Elementes auf der oberen Seite */
   padding-bottom: 3px; /* Innenabstand des Elementes an der unteren Seite */
}

.menue dd {
   display: block;     /* Als Block darstellen */
   
   margin-right: 6px;  /* Rechter Außenrand/Abstand */
   margin-left: 8px;   /* Linker Außenrand/Abstand */
   margin-top: 1px;    /* Oberer Außenrand/Abstand */
   margin-bottom: 1px; /* Unterer Außenrand/Abstand */
   
   padding-right: 2px;  /* Innenabstand rechts */
   padding-left: 2px;   /* Innenabstand links */
   padding-top: 2px;    /* Innenabstand oben */
   padding-bottom: 2px; /* Innenabstand unten */
   
   background: #F5F5F5;   /* Hintergrundfarbe */
   color: #000000;        /* Textfarbe */
}

/* Aussehen der Links innerhalb des Menüs */
.menue a {
   display: block;        /* Als Block darstellen */
   background: #F5F5F5;   /* Hintergrundfarbe */
   color: #000000;        /* Textfarbe */
   text-decoration: none; /* Keine Auszeichnung von Links */
}

/* Farbänderung bei einem Mouseover */
.menue a:hover {
   background: #305278;
   color: #ffffff; 
}

/* Änderungen wenn momentan angeklickt */
.menue a:active {
   background: #E6E6FA;
   color: #000000; 
}




/******************************************/
/* Layoutelemente wie Infoboxen ab hier ! */
/******************************************/

/* Die Infoboxen innerhalb des Fließtextes */
.infobox {
   background: #E6E6FA;         /* Hintergrundfarbe */
   border: 1px dashed Black;    /* Aussehen des Rahmens */
   margin: 20px 20px 20px 60px; /* Außenrand/Abstand <oben> <rechts> <unten> <links> */
   padding: 5px;                /* Innenabstand zu anderen Elementen auf allen Seiten */
   width: 500px;                /* Weite der Infobox */
   height: auto;                /* Automatische Höhe */
}

/* Bildbox am linken Rand */
.bildboxl {
	border: 1px dashed Black;
	margin: 10px;
	width: auto;
	height: auto;
	white-space: nowrap;
	float:left;
	background-color: #E6E6FA;
	text-align:center;
}

.bildboxm {
	border: 1px dashed Black;
	margin: 10px 10px 10px 10px;

	white-space: nowrap;
	background-color: #E6E6FA;
	text-align:center;
}

/* Bildbox am rechten Rand */
.bildboxr {
	background: #E6E6FA;
	border: 1px dashed Black;
	margin: 10px;
	width: auto;
	height: auto;
	white-space: nowrap;
	float:right;
   text-align: center;
}

div.zelle {
	border:0;
	background-color:#efefef;
	float:left;
	margin-right:2px;
	margin-bottom:2px;
	width: auto;
	height:auto;
}


.voll{
   width: 100%;
   background-color: Fuchsia;
   display: block;
}




/* Formulardesign */
input {
	background-color: #FFFFFF;
	text-align: left;
	padding-left: 4px;
	padding-right: 4px;
	display:inline;
	border: 1px solid #006699;
	margin: 3px;
}

input[type="submit"]{
	background-color: #FFFFFF;
	color: #006699;
}

input:focus {
	background-color: #FFFFCC;
}

textarea {
	background-color: #FFFFFF;
	text-align: left;
	text-indent: 4px;
	display:inline;
	border: 1px solid #006699;
	margin: 3px;
	width: 450px;
}

textarea:focus {
	background-color: #FFFFCC;
}

.formbutton {
	text-align:center;
	background-color:#FFFFCC;
	border: 1px solid #006699;
	margin: 3px;
}
/* ENDE Formularlayout */