﻿/*eine id ist esdann, wenn ein # vor der bezeichnung ist, sonst ist es eine class*/
/*content ist eine ID, bcont ist eine class*/


/*content = scrollbereich + inhalt*/

html {
	height: 100%; 
	max-height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	font-size: 12px;
	font-family:Arial, Helvetica, Sans-Serif;
	background-color: #FFFFFF;
	overflow: hidden;
	/*color: #808080;*/
		color: #000000;
}

body {
      height: 100%; 
      max-height: 100%; 
      /*overflow: hidden; */
      overflow: scroll;  
      padding: 0; 
      margin: 0; 
      border: 0;
      min-width: 25em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
}

img {
      border: none;
      overflow: auto
}

.mgw3c {/*definiert die beiden w3c bilder im fußbereich rechts in der höhe, früher hat es spagetthi alarm gegeben*/
      border: none;
      width:43px;
      height:15px
}


/* Inhalt allgemein*/
content {
      display: block; 
      height: 100%; 
      max-height: 100%;
      overflow: auto; /*war hidden*/
      padding-left: 10px; 
      position: relative; 
      z-index: 3;
      /*MARGIN: 0px 8px;/*dann gibnt es einen abstand zwischen den beiden rechten scrollbalken*/
 	  /*WIDTH: 100%;*/
}

#head {
	position: fixed;
	margin: 0;
	padding:0;
	top: 0;
	right: 0px;
	display: block; 
	width: 100%;
	/*height: 0px;*/
    /*background: url('graphics/whitegif1x1.gif'); background-repeat: repeat-x;*/
	font-size: 0px;
	z-index: 50;
	color: #FFFFFF;
}

#foot {
	position: fixed;
	margin: 0;
	bottom: 0px;
	right: 16px;
	display: block;
	width: 100%;
	height: 25px;
	background-color: #ffffff; 
	z-index: 5;
	text-align: center;
}

#foot p {
      margin: 4px 0 0 0;
      padding: 0;
}
#foot a {
      color: #333333;
      text-align: center; 
      font-size: 10px; 
}
#w3c {
      float: right;
      margin: 5px 0 0 0;
      padding: 0;
      width: 150px;
}

* html #head, * html #foot {
      position: absolute;
      }

/* float erübrigt sich eigentlich, da durch die position fix */
#lhead {
      display: block;
      background-color: #FFFFFF;
      background: url('graphics/webstart5li.jpg') no-repeat;
      float: left;
      width: 278px;
      height: 57px;
      margin: 0px;
      padding: 0;
      position: absolute;
	  left:0px; top:0px;
	  z-index:2;
	  	  overflow: auto;/*dient lediglich um den ff bug "flackern" zu entgehen*/
 }


/* float erübrigt sich eigentlich, da durch die position fix */
#rhead {
      display: block;
      background-color: #FFFFFF;
      background: url('graphics/webstart5re.jpg') no-repeat;
      float: right;
      width: 479px;
      height: 57px;
      margin: 0px;
      padding: 0;
      position:absolute;
	  right:16px; top:0px;
	  z-index:0;
	  	  overflow: auto;/*dient lediglich um den ff bug "flackern" zu entgehen*/
}

#lheadc {
      display: block;
      background-color: #FFFFFF;
      background: url('graphics/webstart6cli.jpg') no-repeat;
      float: left;
      width: 278px;
      height: 57px;
      margin: 0px;
      padding: 0;
      position: absolute;
	  left:0px; top:0px;
	  z-index:2;
	  	  overflow: auto;/*dient lediglich um den ff bug "flackern" zu entgehen*/
 }


/* float erübrigt sich eigentlich, da durch die position fix */
#rheadc {
      display: block;
      background-color: #FFFFFF;
      background: url('graphics/webstart6cre.jpg') no-repeat;
      float: right;
      width: 479px;
      height: 57px;
      margin: 0px;
      padding: 0;
      position:absolute;
	  right:16px; top:0px;
	  z-index:0;
	  	  overflow: auto;/*dient lediglich um den ff bug "flackern" zu entgehen*/
}

/* weisses gif für die mitte zwischen den bildern, damit kein text "durchscheint"... */
#mhead {
      display: block;
      background-color: #ffffff;
      background: url('graphics/whitegif10x85.gif'); background-repeat: repeat-x;
      width: 10px; 
      height: 70px;
      z-index:10;
}

#mheadvid {
      display: block;/* block;*/
      background-color: #ffffff;
      /*background: url('graphics/whitegif10x85.gif'); background-repeat: repeat-x;*/
      width: 100%; 
      height: 0px;/*55*/
      z-index:0;
      float:left;
      
}

#schaltmhead{
      display: inline;
      background-color: #ffffff;
      background: url('graphics/whitegif10x85.gif'); background-repeat: repeat-x;
      height: 40px;/*27*/
      z-index:0;
      position:absolute;
      left:280px;
      margin:0px 10px 0px 0px;/*ist für den scrollbalken, dann "klebt" er am rechten rand...*/
      }
	
#schaltmheadzwoa{
      display: inline;
      background-color: #ffffff;
      background: url('graphics/whitegif10x85.gif'); background-repeat: repeat-x;
      height: 40px;
      /*z-index:100;*/
      margin:0px 15px 0px 15px;
    position:absolute;
	right: 0px;
	display: block;
	width: 100%;
      }
	


#lbhead {
      display: block;
      background-color: #FFFFFF;
      background: url('graphics/whitegif10x85.gif'); background-repeat:  repeat-x;
      width: 100%;
      height: 100px;
      position: absolute;
	  right:16px; 
	  top:0px;
	  z-index:0;
 }

#lbheadvid {
      display: block;
      background-color: #FFFFFF;
      /*background: url('graphics/whitegif10x85.gif'); background-repeat:  repeat-x;*/
      width: 100%;
      height: 60px;
      position: absolute;
	  right:16px; 
	  top:0px;
	  z-index:0;
 }


#bfoot {
      display: block; 
      width: 18px; 
      height: 17px; 
      float:left;
}

.bcont { 
      /*display: block; */
      height: 100px;/*ändert die starthöhe des contents - beachte das zusammenspiel schaltflächenhöhe zu startposition*/
      max-height:150px;
}

.bcontb { 
      /*display: block; */
      height: 110px;/*ändert die starthöhe des contents - beachte das zusammenspiel schaltflächenhöhe zu startposition*/
      max-height:150px;
}








h1 {
      font-size: 28px;
      margin: 0;
      padding: 1px;
}
#content h2 {
      font-size: 16px;
      /*color: #000080;*/
      color: #ffffff;
      margin: 0;
      padding: 0px;

}

#content p {
	font-size: 10px;/* kleinere schrift als kleinere überschrift*/;
	padding: 0px;
	color : #808080;
    font-family: Arial, Helvetica, Sans-Serif;
    }


#content ip {
	font-size: 14px;/* kleinere schrift als kleinere überschrift*/;
	padding: 0px;
	color : #808080;
    font-family: Arial, Helvetica, Sans-Serif;
    }



#content a:link, a:visited {
	color: #000080;
}

/* wird ausgeblendet. da eine Hinterlegung nicht schön aussieht
#content a:hover {
      color: #afa;
      background-color: #040;
}
*/



/*START Spaltenlayout*/
#Scrollbereich {
     height: 100%; /*hier ist die krux der anzeige! steht 200px ist alles io, steht was anderes zb 100% dann nicht... wahrscheinlich*/
     width: 100%; 
     overflow: auto;
     padding-bottom:0px;
     
}
    #Inhalt {
    position: static;
    margin-left: 22em; /*Startposition vom linken rand für text links neben dem Symbolbild*/
    /*margin-top:1em;*/
    height:100.01%;
    padding: 0 1em;
    border-left: 0px ridge gray; 
    border-top: 0px ridge gray;
    background-color: #ffffff;
    padding-bottom:0px;
    margin-bottom: 0;
    min-width:300px;/*war früher 450px, musste wegen der drei spalten aber vergrößert werden - 3 x 150px / spalte = 450, die äußerst rechte ist dabei immer unter die mittlere gesprungen, wenn das fenster verkleinert wurde*/
	font-size: 12px;/* kleinere schrift als kleinere überschrift*/
	color : #000000;/*ab 300810: neu hinzu wegen php umstellung*/
    font-family: Arial, Helvetica, Sans-Serif;/*ab 300810: neu hinzu wegen php umstellung*/

}#Inhaltcurr {
    position: static;
    margin-left: 22em; /*Startposition vom linken rand für text links neben dem Symbolbild*/
    /*margin-top:1em;*/
    height:100.01%;
    padding: 0 1em;
    border-left: 0px ridge gray; 
    border-top: 0px ridge gray;
    background-color: #ffffff;
    padding-bottom:0px;
    margin-bottom: 0;
    min-width:500px;/*war früher 450px, musste wegen der drei spalten aber vergrößert werden - 3 x 150px / spalte = 450, die äußerst rechte ist dabei immer unter die mittlere gesprungen, wenn das fenster verkleinert wurde*/
	font-size: 12px;/* kleinere schrift als kleinere überschrift*/
	color : #000000;/*ab 300810: neu hinzu wegen php umstellung*/
    font-family: Arial, Helvetica, Sans-Serif;/*ab 300810: neu hinzu wegen php umstellung*/

}
    #Inhalt404 {
    position: static;
    margin-left: 22em; /*Startposition vom linken rand für text links neben dem Symbolbild*/
    /*margin-top:1em;*/
    height:100.01%;
    padding: 0 1em;
    border-left: 0px ridge gray; 
    border-top: 0px ridge gray;
    background-color: #ffffff;
    padding-bottom:0px;
    margin-bottom: 0;
    min-width:300px;

}

#Inhalt404 p {
	font-size: 10px;/* kleinere schrift als kleinere überschrift*/;
	padding: 0px;
	color : #000000;
    font-family: Arial, Helvetica, Sans-Serif;
    }
    
  #Inhalt404left {
    position: absolute;
    /*margin-top:1em;*/
    height:100.01%;
    padding: 0 1em;
    border-left: 0px ridge gray; 
    border-top: 0px ridge gray;
    background-color: #ffffff;
    top:290px;
    left:10px;
    width:227px;
    height:10px;
}  
    

#mitteganz { /*beachte breite "width", die ist wichtig für das video, damit es nicht "herunter fällt*/
	position: static;
	margin-left: 0em;	
    height:420px;
    padding: 0 1em;
	background-color: #ffffff; 
    border-left: 0px ridge gray; 
    border-top: 0px ridge gray;
    background-color: #ffffff;
    padding-bottom:0px;
    margin-bottom: 0;
    width:980px;
    	z-index:1;
    /*top:90px;*/

}
/* des funzt net so gut, da die scrollbar nicht bis zum ende angezeigt wird
 #Inhalt #Fusszeile {
    font-size: 0.9em;
    margin: 20em 0 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }
*/

/*Ende Spaltenlayout*/

/*für die Bilder an der linken Seite. beachte, dass die Bilder in der html seite extra zugeordnet werden müssen*/
#bildlinks {
      display: block;
      background-color: #FFFFFF;
      float: left;/*rigth*/
      width: 229px;/*227*/
      height: 400px; /*139px*/
      margin: 0px;
      padding: 0;
      position:absolute;
	  left:10px; top:110px;
	  z-index:0;
	  overflow: auto;/*dient lediglich um den ff bug "flackern" zu entgehen*/
	  border: 0px solid #4F4F4F; 
}
#bildlinks404 {
      display: block;
      background-color: #FFFFFF;
      float: left;/*rigth*/
      width: 227px;/*227*/
      height: 260px;/*139px*/
      margin: 0px;
      padding: 0;
      position:absolute;
	  left:0px; top:110px;
	  z-index:0;
	  overflow: auto;/*dient lediglich um den ff bug "flackern" zu entgehen*/
	  border: 0px solid #4F4F4F; 
}




/*linkdesign*/
a[href^=""] {
background: url("graphics/maint.gif") top right no-repeat;
padding-right: 12px;
}


a[href^="http://"] {
background: url("graphics/linkextern.gif") top right no-repeat;
padding-right: 12px;
}


a[href^="mailto:"] {
background: url("graphics/linkextern.gif") top right no-repeat;
padding-right: 12px;
}



/*tooltip*/

 a{
   text-decoration:none;
  }

 a div{
   display:none;
   position: absolute;
   margin-top:-105px;
   margin-left:-133px;
  }

a:hover div{
  display:block;
}

.tooltip { 
position: absolute; 
display: none; 
background-color: #ffffff;
font-family: Arial, Helvetica, Sans-Serif;
font-size: small;
color: black
}


.tooltip .body {
  color: #ffffff;
  background-color: #000;
  padding:2px 5px 2px 5px;
}


.tooltip .tail {
  border-top: 12px solid #000;
  border-right: 12px solid transparent; 
  border-left: 12px solid transparent; 
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin: 0 0 0 -12px;
  width: 0; 
  height: 0; 
}


.styleimgbord {
	margin: 2px 10px;
	z-index:auto;
}

/*nur für mathefeatures - a bisserl peinlich, aber fürs erste...*/
.style1 {
	text-align: left;
}
.style3 {
	font-family: Arial, Helvetica, Sans-Serif;
	text-align: center;
	font-size: small;
}

.style5397 {
	font-size: small;
	font-family: Arial, Helvetica, Sans-Serif;
	width: 397px;
}
.style5397bo {
	font-size: small;
	font-family: Arial, Helvetica, Sans-Serif;
	width: 397px;
	/*bottom;*/
}
.style5247 {
	font-size: small;
	font-family: Arial, Helvetica, Sans-Serif;
	width: 247px;
	/*top;*/
}


.style7 {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: small;
}
.style7274bo {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: small;
	width: 274px;
	/*bottom;*/
}
.style7274to {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: small;
	width: 274px;
	/*top;*/
}

.style4 {
	font-family: Arial, Helvetica, Sans-Serif;
}
.style6 {
	font-size: small;
}
.style8 {
	font-size: small;
	font-family: Arial, Helvetica, Sans-Serif;
	text-align: right;
		color: #C0C0C0;
}
.style10 {
	margin: 5px;
}


.styletablecontact {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	color:#808080;
	text-align:right;
	/*top;*/
}

.styletablecontactjein {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	color:#000000;
	text-align:left;
	/*top;*/
}
.styletablecontactemail {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	color:#000000;
	text-align:left;
	/*top;*/
}
.styletableconticontact {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	color:#000000;
	text-align:right;
	/*top;*/
}

.stylecheckcontact {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	color:#78C588;/*grün; orange = #FAA73A*/
	text-align:right;
		/*font-style:;*/

	/*top;*/
}	

.stylecheckcontactgross {
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 16px;
	color:#FAA73A;/*orange*/
	text-align:right;
}

.stylecontactunten {
	font-family: Arial, Helvetica, Sans-Serif;
	color:#000000;
    font-size: 10px;
}	
	

.pflichtfeld {
   color: #EE0000;
}

.stylekleineUeberschrift {
	font-size: 10px;
	font-family: Arial, Helvetica, Sans-Serif;
	text-align: left;
/*	color: #000000;/*schwarze schrift*/
	color: #808080;/*graue schrift*/
    /*color: #2A7ED4;/*blau*/
}


/*videotutorials*/

#leftside {
	margin: 0;
	padding: 0;
	/*display: block;*/
	background-color: #FFFFFF;
	width: 108px; /*height: 0px;*/ /*background: url('graphics/whitegif1x1.gif'); background-repeat: repeat-x;*/;
	font-size: 0px;
	color: #C0C0C0;
	position: static;
	top: 0px;/*weil im container mitteganz die höhe festgelegt wurde*/
	left: 5px;
	float:left;
	z-index:0;
}

#rightside {/*gilt für Beschreibungen interaktive Ansichten*/
	margin: 0;
	padding: 0;
	/*display: block;*/
	background-color: #FFFFFF;
	width: 300px; /*height: 0px;*/ /*background: url('graphics/whitegif1x1.gif'); background-repeat: repeat-x;*/;
	font-size: 12px;/* oh mann oh mann, da bin ich drüber gestolpertt als ich 0px eingegeben hatte, und daher die Textgröße 0 war, und ich hab mich schon gewundert, wo die Wörter stehen - können bei 0 ja nicht angezeigt werden!!!!!*/
	color: #000000;
	position: static;
	margin-top: 50px;/*weil im container mitteganz die höhe festgelegt wurde*/
	right: 15px;
	float: right;
	z-index:0;
	font-family:Arial, Helvetica, Sans-Serif;
		height:400px;/*gibts das nicht, wird dre Text bis ganz nach unten angezeigt, die Seite ist entsprechend zu scrollen, hier wird nur der Container rigthside gestrollt*/
	      overflow: auto;/*gibts das nicht, wird dre Text bis ganz nach unten angezeigt, die Seite ist entsprechend zu scrollen, hier wird nur der Container rigthside gestrollt*/
}

#rightsidegrundwie {/*gilt speziell!!!! beachte auch die spezielle interaktiveTexte_grundwie.js*/
	margin: 0;
	padding: 0;
	/*display: block;*/
	background-color: #FFFFFF;
	width: 365px; /*height: 0px;*/ /*background: url('graphics/whitegif1x1.gif'); background-repeat: repeat-x;*/;
	font-size: 12px;/* oh mann oh mann, da bin ich drüber gestolpertt als ich 0px eingegeben hatte, und daher die Textgröße 0 war, und ich hab mich schon gewundert, wo die Wörter stehen - können bei 0 ja nicht angezeigt werden!!!!!*/
	color: #000000;
	position: static;
	top: 0px;/*weil im container mitteganz die höhe festgelegt wurde*/
	left: 5px;
	float: right;
	z-index:0;
	font-family:Arial, Helvetica, Sans-Serif;
		height:430px;/*gibts das nicht, wird dre Text bis ganz nach unten angezeigt, die Seite ist entsprechend zu scrollen, hier wird nur der Container rigthsidegrundwie gestrollt*/
	      overflow: auto;/*gibts das nicht, wird dre Text bis ganz nach unten angezeigt, die Seite ist entsprechend zu scrollen, hier wird nur der Container rigthsidegrundwie gestrollt*/
}




#middle {
	margin: 0;
	padding: 0;
	/*display: block;*/
	background-color: #FFFFFF;
	width: 100%; /*height: 0px;*/ /*background: url('graphics/whitegif1x1.gif'); background-repeat: repeat-x;*/;
		font-size: 0px;
	height:460px;
	font-size: 0px;
	color: #C0C0C0;
	position: static;
	top:0px;/*weil im container mitteganz die höhe festgelegt wurde*/
	/*left: 113px;*/
		z-index:10;
}

.tabletop {
top:200px;	
float: left;
}

#loading {
position:absolute; 
width:850px; 
text-align:center; 
top:300px;
overflow: auto;/*dient lediglich um den ff bug "flackern" zu entgehen*/	
}






/*das gehört zum Text faden zum Text unterm Bild links ANFANG*/  
#fadex {
	font-size: 12px;
	font-family: Arial, Helvetica, Sans-Serif;
	text-align: left;
	font-style:italic;
	color: #5699DD;
	}

#fadx {
	
	width:227px;
	padding:0px;
	height:60px;
	border: 0px solid #4F4F4F; 
	/*line-height:1.8em;*/
}
/*das gehört zum Text faden zum Text unterm Bild links ENDE*/  



#contfadbildunderwidged {
	width:227px;
	padding:0px;
	height:100px;
	border: 0px solid #4F4F4F; 
	/*line-height:1.8em;*/
		bottom: 10px;
		top:350px;
	
}

#contfadbildunderwidgedinteraktiv {
	width:227px;
	padding:0px;
	height:120px;
	border: 0px solid #4F4F4F; 
	/*line-height:1.8em;*/
		bottom: 10px;
		top:350px;
	
}

#contueberfad {
	font-size: 14px;
	font-family: Arial, Helvetica, Sans-Serif;
	text-align: left;
	font-style: normal;
	color: #000000;/*#5699DD;*/
	width:250px;
	padding:4px;
	/*margin:0px 0px 0px 8px;*/
	margin:0px 0px 0px 20px;
		height:25px;
	border: 0px solid #4F4F4F; 
	float:left;
	max-width:100%;
		overflow: auto;/*dient lediglich um den ff bug "flackern" zu entgehen*/
	/*line-height:1.8em;*/
}


