/* - CSS Styles fuer Layout-Zwecke */

/* #content: Breite, Border und Background der Seite setzen */

#content {
  height: 15cm;
  min-height: 15cm;
  text-align: left;
  /*background: #ffd377;*/
  background: #ffdd77;
  /*border-top: 1px solid #ccc;*/
  /*border-left: 1px solid #ccc;*/
  /*border-right: 1px solid #ccc;*/
}

#content, #width {
  /* max-width hack fuer MS IE, zerhaut die CSS-Validierung ! */
  /*width: expression(document.body.clientWidth > 773 ? "773px" : "94%");*/
  width: 773px;
  max-width: 773px;
  min-width: 773px;
  margin: 0 auto 0;
}

#content[id], #width[id] {
  width: 94%;
  height: auto;
}

/*  #page: enthaelt den Hauptpage content */

#page {
  float: left;
  width: 100%;
  clear: both;
  /*padding-bottom: 2em;*/
}

/*#header: Enthaelt den Seiten-Titel und evt. ein Header-Image */

#header {
  position: relative;
  /* height: 170px; */
}

/* Positioniert den Seitentitel und den Subtitel */

#header #title {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 340px;
  padding: 5px;
  text-align: right;
}

#header h1 {
  position: absolute;
  margin: 0;
  padding: 0;
  font: 500 1.4em "trebuchet ms", verdana, arial, helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: lowercase;
  color: #3366ff;
}

#header h2 {
  position: absolute;
  margin: 0;
  padding: 20px 0 0;
  font: 500 1.2em "trebuchet ms", verdana, arial, helvetica, sans-serif;
  text-transform: lowercase;
  color: #3366ff;
}


/* Bestimmt wohin das Header-image gehen soll.
Es koennen Grafiken im HTML eingefuegt werden,
Ausrichtung dann links oder rechts per Klasse*/

#header img.left {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

#header img.right {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
}

/*  #mainMenu: Das Hauptmenue unter dem Header-Bild, rechte Seite */

#mainMenu {
  position: relative;
  left: 152px;
  float: left;
  width: 100%;
/*border-bottom: 1px solid #ddd;*/
  clear: both;
  margin: 0 0 30px;
}

#mainMenu ul {
  margin: 0 2px 0 0;
  padding: 0;
}

#mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainMenu li a {
  float: left;
  /*margin: 0 2px;*/
  padding: 1px 0.5em;
  font: bold 1.4em "trebuchet ms", verdana, arial, helvetica, sans-serif;
  text-decoration: none;
  text-transform: lowercase;
  background: #ff9933;
  color: #feefa3;
}

#mainMenu li a:hover {
  color: #a55505;
  background: #ffffff;
}

/*die Klasse .hier fuer den gerade aktiven Seitenlink*/

#mainMenu li a.hier {
  color: #a55505;
  background: #ddd;
}

#mainMenu li a.last {
  margin-right: 0;
  background: #a0a0a0;
}

/*Skip-Navigation fuer den Content, linke und rechte Spalte
normalerweise nicht sichtbar aus dem Viewport verschoben,
bei Tabtasten-Druck erscheinen die Links,
fuer Screenreader wird vorgelesen, da nicht auf unsichtbar gesetzt*/

.skip {
  position: absolute;
  left: -150px;
  top: -150px;
}

.skip li {
  font-size: 0.8em;
  text-align: center;
  padding: 0 5px;
}

/*bei on focus oder active des skip-Links sichtbar */

.skip li a:focus, .skip li a:active {
  position: absolute;
  top:300px;
  left:300px;
  white-space: nowrap;
  z-index:1;
}

/* #leftMenu id fuer linke Navigationsleiste */

#leftMenu ul {
  margin: 0 8px;
  padding: 0;
  underline: none;
  list-style: none;
}

#leftMenu ul ul{
  margin: 0;
  padding: 0;
}

#leftMenu ul ul li a {
  margin: 0;
  padding-left: 5px;
  /*color: #ddd;*/
}

#leftMenu li {
  display: block;
  margin: 0;
  padding: 0;
  font: bold 1em verdana, arial, helvetica, sans-serif;
  background: #ff9933;
}

#leftMenu li li {
  margin: 0;
  width: 100%;
  padding: 0;
}

#leftMenu li a {
  height: 1.4em;
  margin: 0;
  padding: 0 5px;
  display: block;
  color: #feefa3;
  text-decoration: none;
  border-bottom: 2px solid #ffcc66;
}

#leftMenu li a:hover {
  margin: 0;
  color: #a55505;
  border-right: 2px solid #3366ff;
  background: #ffffff;
}

#leftMenu li a.hier {
  margin: 0;
  color: #a55505;
  /*border-right: 2px solid #3366ff;*/
  background: #ddd;
}

#leftMenu li a.last {
  margin: 0;
  /*background: #a0a0a0;*/
}

/*Sprachmenue mit Background-Bildern auszeichnen */

.lang ul a {
  margin:0;
  padding: 0;
  list-style: none;
  text-align:center;
  color: #3366ff;
  font-weight: bold;
  text-decoration: none;
  width: 95%;
}

.lang ul li.german  {
  padding-left: 25px;
  display: inline;
  background: url('') no-repeat 3px 0px;
}

.lang ul li.english  {
  padding-left: 25px;
  display: inline;
  background: url('') no-repeat 3px 0px;
}

/* .sideMenu: eine Menubar links, Listenelemente mit Klasse subLinks
erhalten einen Pfeil-Button */

ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;

  /* Fake-Gif wird nur fuer IE gebraucht, da es dort nicht mit list-style: none; funktioniert*/
  list-style-image: url('');

  /*Schrift fuer die Links im sideMenu */
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  font-size: 2.3em;
  font-family: "trebuchet ms", verdana, arial, helvetica, sans-serif;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 2px 5px;
  text-decoration: none;
  color: #000;
}

.sideMenu li a:hover {
  color: #3366ff;
  border-right: 1px solid #a000;
  /*background: #ccc; zusaetzlicher Hover-Effekt*/
}

/* Active menu item */
.sideMenu li.subLinks {
  display: block;
  padding: 5px;
  color: #3366ff;
}

/* Submenu fuer active menu item */
.sideMenu li.subLinks ul {
  margin: 0;
  padding: 0;
}

.sideMenu li.subLinks ul li a {
  padding-left: 35px;
  color: #000;
  background: url('') no-repeat 10px 3px;
  font-style:normal;
  font-variant:normal;
  font-weight:400;
  font-size:0.55em;
  font-family:verdana, arial, sans-serif
}

.sideMenu li.subLinks ul li a:hover {
  color: #3366ff;
  background: #d9d9cd url('') no-repeat 10px 2px;
}


/* #footer: Fusszeile, bleibt unten, auch wenn nicht genug Content da ist.
   Bestimmt Breite und Layout der footer-Zeile */

#footer #width {
  height: 20px;
  clear: both;
  /*border-bottom: 1px solid #ccc;*/
  /*border-left: 1px solid #ccc;*/
  /*border-right: 1px solid #ccc;*/
  font: 0.8em verdana, arial, helvetica, sans-serif;
  /*background: #ffd377;*/
  background: #ffdd77;
  position: relative;
  z-index: 3;
}

#footer ul {
  margin: 0;
  padding: 0;
}

#footer li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer li a {
  /*margin: 0 3px;*/
  text-decoration: none;
  color: #ff3333;
}

#footer li a:hover {
  color: #a55505;
}

/*die Klasse .hier fuer den gerade aktiven footerlink*/

#footer li a.hier {
  color: #a55505;
}


/*  Breiten fuer die Spalten: etwas ungrade, damit IE und Mozilla ungefaehr gleich liegen */

.width100 {
  width: 100%;
}

.width98 {
  width: 97.7%;
}

.width95 {
  width: 94.7%;
}

.width90 {
  width: 89.7%;
}

.width75 {
  width: 74.7%;
}

.width78 {
  width: 77.7%;
}

.width70 {
  width: 69.7%;
}

.width65 {
  width: 64.7%;
}

.width60 {
  width: 59.7%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32.7%;
}

.width25 {
  width: 24.7%;
}

.width20 {
  width: 19.7%;
}

.width15 {
  width: 14.7%;
}

.width10 {
  width: 9.7%;
}

.width5 {
  width: 4.7%;
}

.width2 {
  width: 1.7%;
}


/* Ausrichtungsklassen */

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}