/* Schritt 05: Positionierung mit CSS,  ohne FLOAT */
/* Layout mit em, basiert auf der Schriftgr??e */ 

html, body {
  height: 100%; 
}

body {
  font-family: Verdana, Arial, helvetica, sans-serif; 
  font-size: 100%;
  color: black;
  text-align: justify;
  background-color: #99ccff; 
  margin: 0;
  padding: 0; 
}

p {
  text-align: justify;
  }

img {
	border: 0;
}

/* ########################### */
/* Positionierung der Bereiche */
#kopf {
  font-family: Verdana, Arial, helvetica, sans-serif;
  background-color: #3399ff;
  position: fixed; /* Box im Fenster fixieren */ 
  color: white;
  width: 98.5%; 
  height: 2.5em;  
  padding-top: 0.5em; 
  padding-right: 0; 
  padding-bottom: 0.5em; 
  padding-left: 1em; 
  margin: 0; 
}

#kopf h1 {
   padding-bottom: 0.2em; 
}

#navigation {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-weight: bold; /* Fettdruck in der Navigationsleiste */ 
  background-image: url(../img/verl_bl.jpg);
  background-repeat: repeat-x;
  position: fixed; /* Box im Fenster fixieren */
  top: 3em;
  left: 0; /* nur links definieren reicht */
  width: 9em;   
  padding-top: 1.5em; 
  padding-right: 1em; 
  padding-bottom: 1em; 
  padding-left: 1em;
  margin: 0em;
  height: 150%; 
}

#navigal {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-weight: bold; /* Fettdruck in der Navigationsleiste */
  font-size: 1.2em; 
  letter-spacing : 0.1em;
  padding-right: 2.0em; 
  margin-top: 1em; 
}

#kopfgal {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 0.8em;
  background-image: url(../img/mccall_dryden.jpg);
  background-repeat: no-repeat;	
  padding: 1em;
  margin-top: 1em;
  margin-left: 14.7em; 
  margin-right: 0;
}

#inhalt {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 1.0em;
  position: float;
  padding: 1em;
  padding-top: 4em; 
  margin-left: 11.0em; 
/*  margin-right: 0;*/
}

#inhaltgal {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 1.0em;
  padding-top: 0em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em; 
  margin-left: 11.0em; 
  margin-right: 0;
}

#inhaltvdpm {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 1.0em;
  color: black;
  background-color: #ebebeb;
  padding-top: 3em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em; 
  margin-left: 11.0em; 
  margin-right: 0;
}


#pfeilhoch {
  background-color: #99ccff;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 35px;  
  /* img src"../button/arrup_1a" */
}

/* Schrift-Definition für Tabellen der NASA-Center-Seiten */
.tabelle p {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 1.0em;
  color: black;
  padding: 0;
  margin: 0;
}

.tabtitel {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: blue;
  padding: 0;
}

.tabkopf, .tabkopf-rot {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
}
  
.tabkopf-rot {
  color: red;
}

.tabtext, .tabtext-rot {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 1em;
}

.tabtext-rot {
  color: red;
}
/* ENDE Schrift-Definition für Tabellen der NASA-Center-Seiten */

/* Schrift-Definition Überschriften */
h2, h3, h4, h5, h6 {
  font-family: Verdana, Arial, helvetica, sans-serif;
  margin-top: 0;
  padding-top: 0; 
}

h2 {
  font-size: 1em;
}

h3 {
  color: red; 
}

h4 {
  color: blue;
}

.header {
  font-family: Verdana, Arial, helvetica, sans-serif;
  margin-top: 0;
  padding-top: 0;
  color: black;
  font-size: 1.5em;
  font-weight: bold;
}
  
/* ENDE Schrift-Definition Überschriften */


/* ########################## */
/* Gestaltung in #kopf */


#kopf h1, #kopf p {
  margin: 0;
  display: inline; /* stellt Slogan neben Logografik */
}


/* ########################## */
/* Gestaltung in #navigation */
#navigation a {
  display: block; /* macht a zu einem Blockelement */
  text-decoration: none; 
  color: white; 
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  padding-left: 0.8em;
  padding-right: 0.8em;
}
#navigation a:hover {
  background-color: #99ccff; 
  color: black; 
  }
 
#navigation a:active {
  background-color: #99ccff; 
  color: #b80101; 
  }

#navigal a {
  display: inline;
  text-decoration: none;
  font-size: 0.8em; 
  color: white;
  padding-left: 1.0em;
  padding-right: 1.0em; 
  padding-top: 0.8em;
  padding-bottom: 0.8em; 
}
#navigal a:hover {  
  display: inline;
  background-color: #3399ff;
  color: black; 
}

#navigal a:active {
  display: inline;
  background-color: #99ccff; 
  color: #b80101; 
}

#pfeilhoch a:hover {
  display: inline;
  background-color: #3399ff;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 35px;  
  /* img src"../button/arrup_1a" */
  /* html-Text für alten Pfeilhoch-Effekt:
  <tr> 
      <td height="150"><p id="pfeilhoch" align="center"> 
          <!-- Button Pfeil hoch -->
          <a href="#oben"><img src="../button/arrup_1.gif" alt="Pfeil nach oben" title="...nach oben"/></a></p>
        <div align="center"><img src="../img/1pixel.gif" alt=" " width="10" height="300"/>
      <td align="left" valign="top">&nbsp;</td>
      <td align="left" valign="top">&nbsp;</td>
    </tr>
  */
}



/* ########################## */
/* Allgemeine Klassen  */
.siesindhier {
  background-color: #99ccff;
}

.siesindhiergal {
  background-color: #3399ff;
}

.artikelimgre {
  background-color: #d5e0f7;
  margin-left: 1em;
  margin-bottom: 0.8em;
  float: right;
}

.artikelimgli {
  background-color: #d5e0f7;
  margin-right: 1em;
  margin-bottom: 0.8em;
  float: left;
}

/* Dieser css Roll-Over-Effekt wurde generiert durch:
collys rollover generator von http://www.collylogic.com/scripts/rollover.html */
.pfeil_hoch {
  float: left;
  width: 40px;
  height: 40px;
  background: url(../img/arrup_rollover_image.gif) no-repeat 0 0px;
}
a.pfeil_hoch:link, a.pfeil_hoch:visited, a.pfeil_hoch:active {
  text-decoration: none;
  background: url(../img/arrup_rollover_image.gif) no-repeat 0 0px;
}
a.pfeil_hoch:hover {
  background: url(../img/arrup_rollover_image.gif) no-repeat -40px 0px;
}
/* Ende pfeil_hoch rollover-Effekt*/

/* Dieser css Roll-Over-Effekt wurde generiert durch:
collys rollover generator von http://www.collylogic.com/scripts/rollover.html */
.home {
  float: left;
  width: 80px;
  height: 40px;
  background: url(../img/home_rollover_image.gif) no-repeat 0 0px;
}
a.home:link, a.home:visited, a.home:active {
  text-decoration: none;
  background: url(../img/home_rollover_image.gif) no-repeat 0 0px;
}
a.home:hover {
  background: url(../img/home_rollover_image.gif) no-repeat -80px 0px;
}
/* Ende home-button rollover-Effekt*/

/* Dieser css Roll-Over-Effekt wurde generiert durch:
collys rollover generator von http://www.collylogic.com/scripts/rollover.html */
.pfeilvdpm_hoch {
  float: left;
  width: 40px;
  height: 40px;
  background: url(../img/arrupvdpm_rollover_image.gif) no-repeat 0 0px;
}
a.pfeilvdpm_hoch:link, a.pfeilvdpm_hoch:visited, a.pfeilvdpm_hoch:active {
  text-decoration: none;
  background: url(../img/arrupvdpm_rollover_image.gif) no-repeat 0 0px;
}
a.pfeilvdpm_hoch:hover {
  background: url(../img/arrupvdpm_rollover_image.gif) no-repeat -40px 0px;
}
/* Ende pfeilvdpm_hoch rollover-Effekt*/

/* Kasten mit runden Ecken, Quelle ist http://www.andreas-kalt.de/webdesign/tutorials  */
.ro {
	background: url(../img/roundedbox_ro.gif) top right no-repeat;
	margin: 0;
	padding: 0;
}

.lo {
	background: url(../img/roundedbox_lo.gif) top left no-repeat;
	margin: 0;
	padding: 0;
}

.ru {
	background: url(../img/roundedbox_ru.gif) bottom right no-repeat;
	margin: 0;
	padding: 0;
}

.lu {
	background: url(../img/roundedbox_lu.gif) bottom left no-repeat;
	margin: 0;
	padding: 0;
}

.kasten {
/*	background-color: yellow; */
	padding: 2.5em 2.5em 2.5em 2.5em;	
	margin:0;

}

.kasten p {
	margin:0;
	padding:0;
}
/* Ende Kasten mit runden Ecken  */


/* Schrift-Definition für class="kasten" */
.inhalt-kasten {
  /* background-color: #eee; */
  color: red;
  padding: 0.5em; 
  /* border-top: 0.2em double #7093C2; */ 
  /* border-bottom: 0.2em double #7093C2; */   
}
/* Ende Schrift-Definition für class="kasten" */


.hotsmaxi {
  font-family: Verdana, Arial, helvetica, sans-serif; 
  font-size: 8.0em;
  vertical-align: top; 
  color: red;
  font-weight: bold; 
}

.hotsmini {
  font-size: 4.0em;
  color: red;
  font-weight: bold; 
}

.hotshome {
  font-size: 2.0em;
  color: red;
  font-weight: bold; 
}


.notizkasten_imp {
  background-color: #eee;
  color: #000000;
  padding: 0.5em; 
  border: 2px solid #fc3d21;
  font-size: 1.25em;
  }

.infobox {
  background-color: #eee;
  color: red;
  padding: 0.5em; 
  border: 0.2em double #7093C2; 
}

.infoboxflotte {
  background-color: #99ccff;
  color: red;
  padding: 0.5em; 
  border: 0.2em double #7093C2; 
}

.infoboxaudio {
  background-color: #99ccff;
  color: black;
  padding: 0.5em; 
  border: 0.2em double #7093C2; 
}

.slogan {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 25px;
  letter-spacing : 0.15em;
  vertical-align: super; 
}

.imgtitel {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  color: black;
}

.untertitel {
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 0.8em;
}

.texthervorheben {
	color: red; 
}
/* ########################## */
/* Einfache Selektoren im Inhaltsbereich */
strong {
  color: black;
  font-weight: bold; 
}

	
address {
  font-size : 0.9em; /* relativ zu #inhalt */
  font-style : normal;
  letter-spacing : 0.1em;
  padding-top: 0.5em; 
  border-bottom: 0.1em solid #7093c2; 
  margin-top: 3em; 
}

.trennlinie {
  border: 0.2em double #7093C2;
}


acronym {
  border-bottom: 2px dotted rgb(70,70,70);
  cursor: help;
  margin: 0;
  padding: 0 0 0.5px 0;
}





/* Ende nasa-wings css*/