@page { size:21.0cm 29.7cm; }

*{          /*Alle Elemente schließen in width und height die Border und das Padding ein.*/
    box-sizing: border-box;
}
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-style: normal;
  background-image:url(../grafik/background.png);	/*Hintergrundbild: Dünne graue Streifen*/
}
h1 {
  font-size: 1.0rem;          /* 13/14=0.9286; 12/14=0.8571; 11/14=0.7857; 10/14=0.7143*/
  font-style: bold;
}
h2, td, ul, li{
  font-size: 0.7857rem;       /* relative Größe bezogen auf das oberste Element*/
  font-style: normal;         /* In den Containern kann dann etwas anderes angegeben werden.*/
}
a {
  color: #000066;
  text-decoration: none
}
a:hover {      /*Definitionen für den Link, wenn der Mauszeiger drauf steht.*/
  text-decoration: underline
}

/******** Class Selectors: Allgemeine Definitionen, können mit "class=.." allen Elementen zugewiesen werden*/
.image {                      /*Bild wird skaliert, aber nicht über 100%*/
  max-width: 100%;
  height: auto;
}
.offer_headline {
	width:auto;
	height:auto;
	margin: 0px;
	padding-left:5px;
	padding-bottom:5px;
	padding-top:5px;
	background-color:#FFCC66;	/*#DDDDDD*/
	color:#000;
	font-size: 1.0rem;          /* 13/14=0.9286; 12/14=0.8571; 11/14=0.7857; 10/14=0.7143*/
}
.offer_text {
	width:auto;
	height:auto;
	margin: 0px;
	padding-left:5px;
	padding-bottom:5px;
	padding-top:5px;
	background-color:F3FEF3;
	color:#000;
	font-size: 0.7857rem;     	/* 13/14=0.9286; 12/14=0.8571; 11/14=0.7857; 10/14=0.7143*/
}

.col_1_grey {                	/*1 Spalte, grau*/
  width: 98%;
  height: auto;
  margin: 5px 0px 0px 0px;
  padding: 5px;
  background: #EEEEEE;        	/*Gleiche Farbe wie FOOTER.*/
  border: solid 0px #ccc;
  float: left;
}
.col_1_white {        			/*1 Spalte, hellgrün*/
  width: 100%;
  height: auto;
  margin: 5px 0px 0px 0px;
  padding: 0px;
  background: F3FEF3;
  border: solid 0px #ccc;
  float: left;
}
.iframe {        				/*Einbetten der aktuellen Termine*/
  width: 100%;
  height: 400px;
  margin: 0;
  padding: 0;
  border: none;
}

.faultMessage {        			/*Fehlermeldung*/
	font-style: bold;
	color: red;
}
/******** ID-Selektoren: Jede ID darf nur einmal im HTML-Code verwendet werden. ***************/
/*Definitionen für die Struktur der Container */
/*Das Verhalten der Elemente innerhalb der Container wird bei Bedarf durch Klassen bestimmt.*/

#MAIN {
  width: 1180px;
  padding: 0px;
  margin: auto;
  background: F3FEF3;
  border: solid 0px #ccc;
}
#NON_ADVERTISING {
  width: 980px auto;
  padding: 0px;
  background: #E1FDE2;    	/*Gleiche Farbe wie die FOOTER. */
  border: solid 0px #ccc;
  float: left;
}
#ADVERTISING {
  width: 200px;
  height: 100%;
  padding: 0px;
  /*background: #EEEEEE;	/*Keine Hintergrundfarbe, nimmt die von body*/
  border: solid 0px #ccc;
  float: right;
  /*display: none;          /*Vorläufig ausblenden.*/
}
#HEADER {
  width:100%;
  height: auto;           	/*Die Höhe des Headers wird vom eingebetteten Bild bestimmt */
  padding: 0px;
  background: #000000;    	/*Das ergibt den schwarzen Strich.*/
  border: solid 0px #ccc;
}
#NAVIGATION {
  width:100%;
  height: auto;
  padding: 0px;
  background: F3FEF3;
  border: none;
  float:left;                   /*Ohne diese Anweisung klappt es nicht.*/
}
ul#NAV_SITES {                  /*Unter der ID NAV_SITES werden Eigenschaften einer unsortierten Liste definiert.*/
    width:100%;                 /*Diese Liste dient dann als Menüliste.*/
    padding-left: 0;            /*Keine Einrückung erzwingen.*/
    margin:0px 0px 0px 0px;
    background-color:#E1FDE2;
    font-size: 0.8571rem;       /* 13/14=0.9286; 12/14=0.8571; 11/14=0.7857; 10/14=0.7143*/
}
ul#NAV_SITES li {              	/*Hier werden die Eigenschaften der Listenelemente festgelegt.*/
    width:163px;
    list-style: none;
    margin:0px 0px 0px 0px;
    padding:5px;
    background-color:#E1FDE2;
    /*border:none;*/
	border:solid 1px #ccc;		/*Grauer Rahmen, 1 Pixel*/
    font-size: 0.8571rem;
    font-weight:bold;
    float:left;
	position:relative;			/*WICHTIG: Dadurch werden die Untermenüs untereinander und nicht nebeneinander dargestellt. */
}
ul#NAV_SITES li ul {          /*Hier werden die Eigenschaften der Unterlistenelemente, festgelegt.*/
	position:absolute;			/*WICHTIG: Dadurch werden die Untermenüs über die anderen Menüs gelegt. */
	z-index: 10;				/*Durch den Z-Index von 10 kommen die Untermenüs in den Vordergrund. */
}
ul#NAV_SITES li a {           	/*Definitionen für den Link.*/
    display: inline-block;
    text-align: center;
}
#COURSES {                    	/*Die im iframe eingebettete Seite hat eigene Stylesheet im Bauch.*/
  width: 200px;
  background: #F3FEF3;        	/*Gleiche Farbe wie FOOTER.*/
  border: solid 0px #ccc;
  color: #E1FDE2;
  font-size: 0.7143rem;
  text-align: center;
  float: left;
}
#LINKBOX {
  width: 200px;
  padding: 5px;
  background: #E1FDE2;        	/*Etwas dunkler als FOOTER.*/
  font-size: 0.8571rem;
  clear: left;                	/*Damit wird die LINKBOX an den linken Rand gezwungen.*/
  float: left;
}
#SUB_HEADER {
  width: 200px auto;
  margin: 0px;
  padding: 5px;
  background: #008040; 			/* #CC0033; rot*, 008040; dunkelgrün*/
  color: #F3FEF3; 				/* #FFFFFF; weiss F3FeF3: grau*/
  border: solid 0px #000000;
  border-radius: 0px;  
  overflow:hidden;            	/*Damit wird verhindert, dass SUB_HEADER um SIDEBAR herumfließt.*/
}
h1#SUB_HEADER {
  margin: 0px;                	/* 13/14=0.9286; 12/14=0.8571; 11/14=0.7857; 10/14=0.7143*/
  font-size: 0.9286rem;        	/* 13/14=0.9286; 12/14=0.8571; 11/14=0.7857; 10/14=0.7143*; 9/14=0.6428; 8/14=0.5714*/
  font-style: bold;
  font-style: italic;
}
#CONTENT {
  width: 200px auto;
  padding: 5px;
  background: #F3FEF3;		/*#FFFFFF; weiss #E1FDE2; hellgrün*/
  border: solid 0px #ccc;
  overflow:hidden;            	/*Damit wird verhindert, dass CONTENT um SIDEBAR herumfließt.*/
  font-size: 0.7857rem;
}
#FOOTER {
  width: 100%;
  background: #E1FDE2;
  border: solid #000;
  border-width: 2px 0px 0px 0px;  /*Schwarzer Strich oberhalb des FOOTERS.*/
  font-size: 0.7143em;
  font-style: italic;
  text-align: center;
  clear: left;                    /*Damit wird der FOOTER an den linken Rand gezwungen.*/
  float: left;
}
#COL_30_LEFT {                  /*Zur allgemeinen Verwendung in den Seiten*/
  width: 50%;
  padding: 0px;
  margin: 0px;
  background: #CCCCCC;
  float: left;
}
#COL_30_RIGHT {                  /*Zur allgemeinen Verwendung in den Seiten*/
  width: 50%;
  padding: 0px;
  margin: 0px;
  background: #CCCCCC;
  float: right;
}
/******** Media Querries ***************/
/* for 30000px or less, Laptop, Platz für Werbung ist da. */
@media screen and (max-width: 3000px) {
  #MAIN {
    width: 1180px;
  }
  #NON_ADVERTISING {
    width: 980px;
  }
  #ADVERTISING {
    width: 200px;
  }
}

/* for 1180px or less, Laptop, Platz für Werbung ist nicht da. */
@media screen and (max-width: 1180px) {
  #MAIN {
    width: 980px;
  }
  #ADVERTISING {
    width: 0px;
    display: none;
  }
}

/* for 980px or less, alte Laptops, kein Platz für Werbung */
@media screen and (max-width: 980px) {
  #MAIN {
    width: 98%;
  }
  #NON_ADVERTISING {
    width: 98%;
  }
  #ADVERTISING {
    width: 0px;
    display: none;
  }
  ul#NAV_SITES li {              /*Hier werden die Eigenschaften der Listenelemente festgelegt.*/
    border:solid 1px #ccc;
  }
}

/* for 700px or less; Smartphones im Querformat*/
@media screen and (max-width: 700px) {
  #COURSES {
    float: none;
  }
  #LINKBOX {
    display: none;
  }
  #COL_30_LEFT {                  /*Zur allgemeinen Verwendung in den Seiten*/
    width: 100%;
    float: left;
  }
  #COL_30_RIGHT {                  /*Zur allgemeinen Verwendung in den Seiten*/
    width: 100%;
    float: left;
  }
}

/* for 480px or less; Smartphones im Hochformat*/
@media screen and (max-width: 480px) {
  #COURSES {
    float: none;
  }
  #LINKBOX {
    display: none;
  }
  #COL_30_LEFT {                  /*Zur allgemeinen Verwendung in den Seiten*/
    width: 100%;
    float: left;
  }
  #COL_30_RIGHT {                  /*Zur allgemeinen Verwendung in den Seiten*/
    width: 100%;
    float: left;
  }
}
/*Ausgaben auf Drucker*/
@media print {
  #MAIN {
    width: 98%;
  }
  #ADVERTISING, #NAVIGATION, #LINKBOX  {   /*Werbung, Navigation und Links ausblenden*/
    display: none;
  }
  #COURSES {
    float: none;
    margin: 10px;
    padding: 5px;
    border:solid 3px #ccc;
  }
  #SUB_HEADER, #CONTENT {
    padding: 0px;
  }
  #FOOTER {
    margin: 10px 0px 0px 0px;
  }
}