/*==============================================
 ----------------
| CSS-Styleguide |
 ----------------

Aufbau dieser CSS:
	0. Dieser Styleguide
	1. Layoutvorgaben des Browsers zuruecksetzen
	2. Seitenlayout und Maße (Body, Spalten, Allgemeines)
	3. Content-Footer
	4. Seiten-Footer
	5. Allgemeine Fixes fuer W3C-konforme Browser

Ausgelagert:
	header.css: Header mit Nav1 und Metanavigation
	content.css: Inhaltsbereich
	columns.css: Linke Spalte (mit Nav2) und rechte Spalte
	ie6.css: IE6-spezifische Fixes
	ie7.css: IE7-spezifische Fixes
	print.css: Drucklayout
	variants.css: Layout-Varianten (Spalten ausblenden, Content-iFrame)

Richtlinien zum Entwickeln/Testen:
	- Zuerst W3C-Konform entwickeln und Testen (Firefox), ERST DANN Internet Explorer
	- Warnungen in Firefox-Fehlerkonsole beachten und eleminieren
	- Alle Internet-Explorer-spezifischen Einstellungen in ie6/7.css auslagern
	- Alle Fixes, die IE noetig macht, in ie6/7.css auslagern
	- Browserweichen vermeiden (es wird mit Conditional Comments gearbeitet)

Richtlinien zum CSS-Aufbau:
	- Bereichs-IDs/Klassen explizit den Selektoren voranstellen
	- Besser redundant sein als intransparente Vererbung riskieren
	  (z.B. wurden Links fuer Content und rechte Spalte 2x definiert,
	   auch wenn sie gleich aussehen)
	- Globale Stile (ohne vorangestellte Bereichs-ID) vermeiden
	- Eigenschaften ZENTRAL in Abschnitt (1) zuruecksetzen, NICHT LOKAL
	- Hacks in Datei (ie.css) bzw. Bereich (5) auslagern

Richtlinien zum Code:
	- Allgemein:
		* Statt "clever" besser explizit sein
		* Kommentieren
	- Keine redundanten Eigenschaften "zur Sicherheit" nochmal setzen
	  (z.B. nicht "padding: 0 0 0 20px". Besser: "padding-left: 20px",
	   denn wir setzen in Abschnitt (1) alle Eigenschaften zurueck)
	- Box-Model-Rechnungen kommentieren (z.B. width: 128px /* 150-11(padd)-11(padd) * / )
	- Immer Strichpunkt ";" hinter allen Eigenschaften
	- Immer ein Leerzeichen nach dem Doppelpunkt ":"
	- Immer Zeilenumbruch nach Selektor und zwischen Eigenschaften
	- margin/padding/border: 3-Argument-Variante vermeiden
	  (etwa "padding: 0 0 3px")
	- Zahlen < 0 mit Null schreiben: "0.5em" statt ".5em"
	- Hex-Farbangaben mit Kleinbuchstaben und stets sechsstellig (nicht 3stellig)

Farbschema (aus Ray-Sono-Styleguide, S. 20):
	#8cd150 DATEV Hellgruen
			Navigationsreiter, grafische Elemente
	#039a9a DATEV Dunkelgruen
			grafische Elemente (Hintergruende)
	#333333 Grau
			Headlines, Rollover, Text
	#666666 Heller Text
			Visited Links
	#999999 Linien
			Hintergrund, Boxen Infoleiste
	#298783 Dunkelgrün
			Headlines, Texte, Rollover
	#6f7376 Dunkelgrau im Hintergrund
			Farbton fuer die Verlängerung des Hintergrunds
	#e5e6e6 Hellgrau
			Abbinder
	#ffffff Weiss
			Content Hintergrund

  ==============================================*/

/* ------------------------------------------------------- *
   1. Layoutvorgaben des Browsers zuruecksetzen
/* ------------------------------------------------------- */

/*--- Block-Elemente zuruecksetzen ---------------------*/
body, h1, h2, h3, h4, div, ol, ul, li, p, dl, dt, dd, form, table, caption, thead, tbody, tr, th, td {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: inherit;
	background-color: transparent;
	border: none;
	/*text-align: left;*/
}
/*--- Inline-Elemente zuruecksetzen --------------------*/
span, img, strong, em, label, input, a, a:link, a:visited, a:hover, a:focus, a:active {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;	
	text-decoration: none;
	color: inherit;
	background-color: transparent;
	border: none;
}
/*--- Formular-Felder zuruecksetzen --------------------*/
input, textarea {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	color: inherit;
	/* Default-Border wird beibehalten, da User auf verschiedenen Systemen verschiedene Erscheinungsbilder gewoehnt sind. Der Browser-Default passt i.d.R. zu diesen bekannten Feldern. */
}

/*--- Listenstil zuruecksetzen --------------------*/
ol, ul {
	list-style-type: none;
	list-style-position: outside;
	list-style-image: none;
}

/*---Body -------------------------------*/
body {	
	font-size: 70%;
	background-color: #ffffff;
}

/*---Allgemeine Klassen------------------*/
/* Wenn Zusammenhaenge nur grafisch deutlich werden und sich keine alt-Attribute
   anbieten (z.B. weil die Infos nicht in Bildern stecken), koennen in .nurscreenreader-
   Elementen Informationen angegeben werden, die Benutzer von Screenreadern oder anderen
   Assistenzprogrammen darin unterstuetzen, an die gewuenschten Informationen zu gelangen
   und sich besser zurechtzufinden.
   Die mit .nurscreenreader ausgezeichneten Elemente werden nicht dargestellt, sie werden
   aber von Assistenzsoftware ausgewertet (z.B. vorgelesen).
   Die mit .nurscreenreader ausgezeichneten Elemente sind ausserdem auch fuer Suchmaschinen
   sichtbar.
 */
.nurscreenreader {
	position: absolute;
	left: -1500px;
	top: -1500px;
	height: 0;
	width: 0;
	overflow: hidden;
	display: inline;
}


/* ------------------------------------------------------- *
   2. Seitenlayout und Maße (Body, Spalten, Allgemeines)
/* ------------------------------------------------------- */
/*
  Struktur und Reihenfolge im HTML: 
  [Content soll vorne kommen (Suchmaschinentauglichkeit, Barrierearmut, Flyout-Probleme vermeiden)]
  
  #pageBackground
     #pageCenter
        #contentAndRightColumn
           #content
           #rightColumn
        #header
           #nav1
           #metanav
        #leftColumn
  #footer
  
  Seitenlayout: 
  
  -------------------------------------------------------
 |#pageBackground                                        |
 |     ---------------------------------------------     |
 |    |#pageCenter       <--990-->                  |    |
 |    |  ------------------------------------------ |    |
 |    |<|#header [absolute;top 0]                  ||    |
 |    |1| #nav1                                    ||    |
 |    |5| #metanav        <--975-->                ||    |
 |    |  ------------------------------------------ |    |
 |    | --------  --------------------------------- |    |
 |    ||#leftCol||#contentAndRightCol [float:right]||    |
 |    ||[float: || ----------------------  ------- ||    |
 |    || left]  |||#content              ||#rightC|||    |
 |    ||        ||| [float:left]         ||[float:|||    |
 |    ||        |||                      ||  left]|||    |
 |    ||        |||                      ||       |||    |
 |    ||        |||                      ||       |||    |
 |    ||<-195-->|||      <--573-->       ||<-222->|||    |
 |    ||        |||                      ||       |||    |
 |    ||        |||                      ||       |||    |
 |    ||        |||                      ||       |||    |
 |    ||        |||                      ||       |||    |
 |    ||        |||                      ||       |||    |
 |    ||        |||                      ||       |||    |
 |    | -------- | ----------------------  ------- ||    |
 |    |           --------------------------------- |    |
 |     ---------------------------------------------     |
  -------------------------------------------------------
  -------------------------------------------------------
 |#footer-------------------------------------------     |
 |    |#footerLinks [zentriert]                     |    |
 |     ------------------<-990->--------------------     |
  -------------------------------------------------------
*/

#pageBackground {
	background-image: url(../images/backgrounds/bg_container.png);
	background-position: top left;
	background-repeat: repeat-x;
	background-color: #74787B; 
}

#pageCenter {
	width: 990px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 100px;
	position: relative;
}

/* 
    Faux Column mit weissem Hintergrund fuer #content: Da das repeat-y-
    Hintergrundbild keinen vertikalen Offset haben kann, muss das gesamte
    #contentAndRightColumn nach unten verschoben werden (44px).
    Zum Ausgleich muss #rightColumn wieder um denselben Betrag nach oben
    verschoben werden.
*/
#contentAndRightColumn {
	float: right;
	margin-top: 44px;
	margin-bottom: 20px;
	width: 795px; /* 573 + 222 */
	background-image: url(../images/backgrounds/bg_content.gif);
	background-repeat: repeat-y;
	background-position: 0 44px; /* 44px = margin-top von #content */
}

#content {
	float: left;
	padding: 20px 20px 30px 20px; 
	width: 533px; /* 573-20-20 */
	background-color: #ffffff;
	position: relative;
	color: #333333;
	overflow: hidden;
	word-wrap: break-word; /*PN@20091110*/
}

#content.broadened  {
	width: 755px; /*573+222px(reSpalte)-20px-20px(padding) */
}

#rightColumn {
	float: left;
	margin-top: -44px; /* Margin-top von #contentAndRightColumn ausgleichen */
	width: 222px; /* Wird ggf. in columns.css in Padding & Breite aufgeteilt.  */
	overflow: hidden;
}

#header {
	position: absolute;
	top: 0;
	left: 15px;
	width: 975px;
	height: 100px;
	overflow: visible;
}

#leftColumn {
	float: left;
	width: 195px; /* Wird ggf. in columns.css in Padding & Breite aufgeteilt.  */
	overflow: visible;
}

/* ----------------------------------------------- *
   3. Content-Footer
/* ----------------------------------------------- */
/*
 <ul id="contentFooter" class="broadened"> bzw.  <ul id="contentFooter"> 
	<li><a id="cfKontakt" href="javascript:;">Kontakt</a></li>
	<li><a id="cfEmpfehlen" href="javascript:;">Empfehlen</a></li>
	<li><a id="cfDrucken" href="javascript:;">Drucken</a></li>
	<li><a id="cfSchrift" href="javascript:;">Schriftgröße</a></li>
	<li><a id="cfSchriftSmall" href="javascript:;"><span class="nurscreenreader">small</span></a></li>
	<li><a id="cfSchriftMedium" href="javascript:;"><span class="nurscreenreader">normal</span></a></li>
	<li><a id="cfSchriftLarge" href="javascript:;"><span class="nurscreenreader">large</span></a></li>
	<li><a id="cfSeitenanfang" href="javascript:;">Seitenanfang</a></li>
</ul>
*/

/*allg. Einstellungen fuer die Liste*/
#contentFooter {
	width: 533px; /* 573-40px padding */
	clear: both;
	height: 25px; /* 37-12=25 */
	padding: 6px 20px 6px 20px;
	background-image: url(../images/backgrounds/bg_content_end.png);
	background-repeat: repeat-x;
	position: relative;
}
#contentFooter.broadened {
	width: 755px; /* 573+222-40px padding */
}
/*allg. Einstellungen fuer alle Listeneintraege*/
#contentFooter li {
	padding: 6px 0px 0px 0px;
	margin: 0px;
	float: left;
	background-image: none;
}

#contentFooter li.seitenanfang {
	float: right;
}

/*allg. Einstellungen fuer alle Links*/
#contentFooter li a, 
#content #contentFooter li a:link,
#content #contentFooter li a:visited  {
	padding: 0px 10px 0px 17px;
	float: left;
	display: block;
	background-repeat: no-repeat;
	text-decoration: none;
	color: #333333;
	cursor: pointer; /*ap@20090922 - Links haben in allen Zuständen eine Maushand als Cursor*/
}

#contentFooter li a:hover, 
#contentFooter li a:focus, 
#contentFooter li a:active {
	text-decoration: underline;
	background-color: transparent;
	background-position:0 -36px;
}
/*Kontakt*/
#contentFooter li a#cfKontakt {
	background-image: url(../images/icons/cf_tellafriend.png);
}
/*Empfehlen*/ /*TODO: anderes Bild*/
#contentFooter li a#cfEmpfehlen {
	background-image: url(../images/icons/cf_suggest.png);
}
/*Drucken*/
#contentFooter li a#cfDrucken {
	background-image: url(../images/icons/cf_print.png);
}
/*Schrift - (a) Beschriftung (Text)*/
#contentFooter li a#cfSchrift,
#contentFooter li a#cfSchrift:link
#contentFooter li a#cfSchrift:visited {
	padding: 0px 5px 0px 10px;
	text-decoration: none;
}
#contentFooter li a#cfSchrift:hover, 
#contentFooter li a#cfSchrift:focus, 
#contentFooter li a#cfSchrift:active {
	text-decoration: none;
	cursor: default;
}
/*Schrift - (b) small*/
#contentFooter li a#cfSchriftSmall, 
#contentFooter li a#cfSchriftSmall:link, 
#contentFooter li a#cfSchriftSmall:visited {
	padding: 0px;
	width: 14px;
	height: 14px;
	background-image: url(../images/icons/cf_fontsizeSmall.png);
	background-repeat: no-repeat;
	background-position: 0% 0%;
}
/*#contentFooter li a#cfSchriftSmall:hover, 
#contentFooter li a#cfSchriftSmall:focus,
#contentFooter li a#cfSchriftSmall:active,*/
#contentFooter li.aktiv a#cfSchriftSmall,
#contentFooter li.aktiv a#cfSchriftSmall:link,
#contentFooter li.aktiv a#cfSchriftSmall:visited,
#contentFooter li.aktiv a#cfSchriftSmall:hover,
#contentFooter li.aktiv a#cfSchriftSmall:focus,
#contentFooter li.aktiv a#cfSchriftSmall:active {
	background-position: 0% 100%;
}
/*Schrift - (c) medium*/
#contentFooter li a#cfSchriftMedium, 
#contentFooter li a#cfSchriftMedium:link, 
#contentFooter li a#cfSchriftMedium:visited {
	padding: 0px;
	width: 14px;
	height: 14px;
	background-image: url(../images/icons/cf_fontsizeMedium.png);
	background-repeat: no-repeat;
	background-position: 0% 0%;
}
/*#contentFooter li a#cfSchriftMedium:hover, 
#contentFooter li a#cfSchriftMedium:focus, 
#contentFooter li a#cfSchriftMedium:active,*/
#contentFooter li.aktiv a#cfSchriftMedium {
	background-position: 0% 100%;
}
/*Schrift - (d) large*/
#contentFooter li a#cfSchriftLarge, 
#contentFooter li a#cfSchriftLarge:link, 
#contentFooter li a#cfSchriftLarge:visited {
	padding: 0px;
	width: 14px;
	height: 14px;
	background-image: url(../images/icons/cf_fontsizeLarge.png);
	background-repeat: no-repeat;
	background-position: 0% 0%;
}
/*#contentFooter li a#cfSchriftLarge:hover, 
#contentFooter li a#cfSchriftLarge:focus, 
#contentFooter li a#cfSchriftLarge:active,*/
#contentFooter li.aktiv a#cfSchriftLarge {
	background-position: 0% 100%;
}
/*Seitenanfang*/
#contentFooter li a#cfSeitenanfang, 
#contentFooter li a#cfSeitenanfang:link, 
#contentFooter li a#cfSeitenanfang:visited {
	background-image: url(../images/icons/cf_top.png);
	background-position: 100% 0;
	padding: 0px 18px 0px 0px;
}
#contentFooter li a#cfSeitenanfang:hover, 
#contentFooter li a#cfSeitenanfang:focus, 
#contentFooter li a#cfSeitenanfang:active {
	background-position: 100% -36px;
}

/* ----------------------------------------------- *
   4. Seiten-Footer
/* ----------------------------------------------- */
#footer {
	clear: both;
	background-color: #ffffff;
}
#footerLinks {
	width: 970px; /* genauso wie #header und #contentAndRightColumn */
	min-height: 20px;
	margin-left: auto;/* zentrieren (W3C-kompatible Browser) */
	margin-right: auto;
	padding: 6px 0px 1em 0px;
	list-style: none;
	white-space: nowrap; 
	background-color: #ffffff;
}
/*Listenelemente im Footer*/
#footerLinks li {
	float: left;
	display: inline;
	border-right: 1px solid #666666;
}
/*vorletztes Listenelement bekommt rechts keine border*/
#footerLinks li#footerImpressum {
	border: none;
}
#footerLinks li#footerCopyright {
	float: right;
	color: #666666;
	border: none;
}
/*Linklayout der allgemeinen , noch nicht besuchten und bereits besuchten Links*/
#footerLinks a, 
#footerLinks a:link, 
#footerLinks a:visited {
	padding: 0 1em 0 1em;
	color: #666666;
	cursor: pointer; /*ap@20090922 - Links haben in allen Zuständen eine Maushand als Cursor*/
}
/*Linklayout der von der Maus überquerten, gerade angeklickten und von der Tastatur gewählten Links*/
/*ap@20090922 - focus und active aus der Behandlung ausgenommen*/
#footerLinks a:hover {
	text-decoration: underline;
}

/* ----------------------------------------------- *
 5. Extended Info*/
/* ----------------------------------------------- */
.extendedinfo {
 padding: 0px 20px 20px 20px; 
 margin: 30px; 
 font-size: 1.2em; 
 border: 1px solid #d7d7d7;
}

/*Ueberschriften*/
.extendedinfo h3 a,
.extendedinfo h3 a:link,
.extendedinfo h3 a:visited,
.extendedinfo h3 a:hover,
.extendedinfo h3 a:active,
.extendedinfo h3 a:focus {
	 font-weight: bold;
}
.extendedinfo h3 {
 margin-top: 1em;
 font-size: 1.25em;
 font-weight: bold;
 font-family: Verdana, Arial, sans-serif;
 color: #298783; 
}

/*Absaetze*/
.extendedinfo p {
	margin-top: 1.3em;
}

/*Tabellen*/
.extendedinfo table {
	margin-top: 1.3em;
	border-collapse: collapse;
	empty-cells: show;
	width: 100%;
}
.extendedinfo td,
.extendedinfo th {
	padding: 5px 10px;
	border: 1px solid #d7d7d7;
	vertical-align: top;
	text-align: left;
}
.extendedinfo th {
	font-weight: bold;
	background-color: #e6e9eb;
}
.extendedinfo td:first-child {
	background-color: #f5f6f7;
}

/*Listen*/
.extendedinfo dl {
	padding-left: 10px;
}
.extendedinfo dt {
	color: #333333;
	font-weight: bold;
	margin-top: 1em;
}
.extendedinfo dd {
	padding-left: 10px;
}

/*Links*/
.extendedinfo a,
.extendedinfo a:link {
	text-decoration: underline; 
	color: #333333;
}
.extendedinfo a:visited {
	text-decoration: underline; 
	color: #666666;
} 
.extendedinfo a:hover {
 text-decoration: none; 
 background-color: #e2efef;
}

/* ----------------------------------------------- *
   6. Fixes
/* ----------------------------------------------- */
/* Browserspezifische Fixes finden sich in ie6.css und ie7.css */

/* Hoehe der Container aufspannen, die nur Floats enthalten  */
#pageCenter:after, #header:after, #footerContent ul:after, #demo:after, #newsletter:after, #magazin:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------*/