/**
 * Beschreibung / Zweck
 * ====================
 *
 * Diese Datei beinhaltet Basis Styles f�r wiederverwendbare Komponenten. Jeder
 * Basis Style ist auf die grundlegendsten Eigenschaften beschr�nkt.
 * Es sollen niemals die Basis Styles selber angepasst werden! Sie m�ssen immer
 * �ber einen Pr�-Selektor angepasst werden. Beispiel: Soll die line-height einer
 * Link Liste 24px sein, so kann wie folgt vorgegangen werden:
 *
 * #prae_selektor ul.link_list li {
 *   line-height: 24px;
 * }
 *
 * Dies verhindert ungewollte Nebeneffekte bei schon existierenden Komponenten.
 *
 * Datei Info
 * ==========
 *
 * Erstellt von:	Joshua Muheim
 * Erstellt am:		19.12.2007
 *
 * History
 * =======
 *
 * 19.12.2007
 *   - ul.link_list hinzugef�gt (Refactoring der div#navigation ul Specs, damit
 *     sie wiederverwendet werden k�nnen)
 */

/*-----------------------------------------------------------------------------
 * Link Liste:
 *
 * Beschreibung
 * ============
 *
 * Eine Liste, welche Links beinhaltet. Die Links sind Blockelemente und k�nnen
 * mehrfach verschachtelt werden in Unterlisten.
 *
 * Anwendung
 * =========
 *
 * Einfach einem <ul> Tag die Klasse "link_list" zuweisen.
 *
 * Den Link-Tags k�nnen die Klassen "active", inactive und "active_sel"
 * zugewiesen werden, wodurch sie entsprechend dargestellt werden und ein anderes
 * Link-Icon haben (gilt nicht f�r externe Links!).
 *
 * Anstelle eines <a> Tags kann auch ein <span> Tag eingef�gt werden. Dieses
 * erh�lt nat�rlich kein Link Icon, wird aber trotzdem als Block dargestellt und
 * wird mit der Klasse "active" auch dargestellt wie ein aktiver Link.
 * Soll das Span Tag trotzdem ein Icon erhalten, k�nnen statt "active" und
 * "inactive" die Klassen "active_with_icon" und "inactive_with_icon" verwendet
 * werden.
 *
 * Beispiel:
 * <ul class="link_list">
 *   <li><a href="#">Link 1</a></li>
 *   <li><a href="#" class="active">Aktiver Link</a></li>
 *   <li>
 *     <a href="#" class="active_sel">Aktiver, selektierter Link</a>
 *     <ul class="link_list">
 *       <li><a href="#">Link 1</a></li>
 *       <li><a href="#" class="active">Aktiver Link</a></li>
 *       <li><a href="#" class="active_sel">Aktiver, selektierter Link</a></li>
 *     </ul>
 *   </li>
 * </ul>
 *
 * Kleines Schmankerl: Wenn die Liste komplett aus externen Links besteht, kann
 * zus�tzlich zu link_list noch die Klasse external_link_list zugewiesen werden;
 * es werden dann Symbole f�r externe Links angezeigt:
 *
 * Beispiel:
 * <ul class="link_list external_link_list"> ... </ul>
 *
 * Dasselbe kann mit...
 *  - download_link_list
 *  - main_navigation_link_list
 *  - dossier_link_list
 *  - floating_link_list
 *  - floating_link_list_two_columns
 *  - zum_thema_link_list
 *  - higher_lines_link_list
 *  - tinier_link_list
 * ...gemacht werden.
 *
 * Internet Explorer Kompatibilit�tsinfo
 * =====================================
 *
 * Wird die Liste gefloated (#prae_selektor ul.link_list li { float: left; }, so
 * kann der Link nicht mehr auf der ganzen Block-Fl�che angeklickt werden. Dies
 * sollte aber niemandem auffallen.
 */

ul.link_list li a:hover {
  color: red;
}

a.active_expanded,
ul.link_list li a.active,
ul.link_list li a.active_sel,
ul.link_list li a.hoeren_sel,
ul.link_list li span.active,
ul.link_list li span.active_with_icon,
ul.link_list li span.hoeren_sel {
  font-weight: bold;
}

ul.link_list li a,
ul.link_list li span.with_icon,
ul.link_list li span.active_with_icon {
  background-image: url("/static/global/link.gif");
}

ul.link_list li a.external_link{
  background-image:url("/static/global/link_ext.gif");
}

ul.link_list li a.active_sel,
ul.link_list li a.active,
ul.link_list li span.active_with_icon {
  background-image: url("/static/global/link_sel.gif");
}

ul.link_list li a.inactive,
ul.link_list li span.inactive_with_icon {
  background-image: url("/static/global/link_inactive.gif");
}

ul.link_list li a.hoeren_sel,
ul.link_list li span.hoeren_sel {
  background-image: url("/static/global/link_hoe_sel.gif");
}

ul.link_list {
	/* Auskommentiert (einheitliche Zeilenh�he in body, damit base_10.css und base_12.css nicht X Rules �berschreiben m�ssen */
  /*line-height: 16px;*/
  margin: 0;
  padding: 0;
  /*background-color: yellow;
  opacity: 0.5;/**/
}

ul.link_list li {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.link_list li span {
  padding-left: 4px;
}

ul.link_list li a,
ul.link_list li span {
  display: block;
}

ul.link_list li a,
ul.link_list li a.inactive,
ul.link_list li span.active_with_icon,
ul.link_list li span.inactive_with_icon,
ul.link_list li a.hoeren_sel,
ul.link_list li span.hoeren_sel {
  color: black;
	padding-right: 5px;
	padding-left: 20px;
  background-repeat: no-repeat;
  background-position: 5px 2px;
}

ul.link_list li a.inactive,
ul.link_list li span.inactive_with_icon,
ul.link_list li span.inactive {
  color: gray;
}

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

/* Externe Links (haben entsprechendes Link Icon) */
ul.external_link_list li a {
  background-image: url("/static/global/link_ext.gif");
  background-position: 5px 3px;
}

/* Externe Links haben graue Farbe bei Hover */
ul.external_link_list li a:hover {
	color: gray;
}

/* Download Links (haben entsprechendes Link Icon) */
ul.download_link_list li a {
  background-image: url("/static/global/link_downloaden.gif");
}

/* Dossier Links (haben entsprechende Hintergrundstransparenzen) */
ul.dossier_link_list li a,
ul.dossier_link_list li span {
  padding-top: 4px;
  padding-bottom: 4px;
  background-position: 5px 6px;
}

ul.dossier_link_list li {
  background: transparent url("/static/global/transparencies/transparency_40.png") top left repeat;
}

ul.dossier_link_list li ul li {
  background: transparent url("/static/global/transparencies/transparency_80.png") top left repeat;
}

/* Main Navigation (haben entsprechende Hintergrundstransparenzen) */
ul.main_navigation_link_list li ul li {
  background: transparent url("/static/global/transparencies/transparency_40.png") top left repeat;
}

ul.main_navigation_link_list ul li ul li {
  background: transparent url("/static/global/transparencies/transparency_80.png") top left repeat;
}

ul.main_navigation_link_list li a {
  padding-top: 4px;
  padding-bottom: 4px;
  background-position: 5px 6px;
}

ul.main_navigation_link_list li ul li a {
  padding-left: 19px;
}

ul.main_navigation_link_list ul li ul li a {
  padding-left: 34px;
  background-position: 20px 6px;
}

/* Floating Links (werden nach links gefloated) */
ul.floating_link_list {
  overflow: hidden;
}

ul.floating_link_list li {
  float: left;
}

ul.floating_link_list li a,
ul.floating_link_list li span {
	white-space: nowrap;
}

/* Floating Two Columns (weist jedem Listenpunkt eine Breite von standardm�ssig 50% zu, was in zwei Kolonnen resultiert; kann mittels li.linke_spalte und li.rechte_spalte je nach Kontext noch genauer angepasst werden) */
ul.floating_link_list_two_columns {
  overflow: hidden;
}

ul.floating_link_list_two_columns li {
  float: left;
}

ul.floating_link_list_two_columns li.left {
	width: 196px;
	clear: left;
}

ul.floating_link_list_two_columns li.right,
ul.floating_link_list_two_columns li.right_without_left {
	width: 184px;
}

ul.floating_link_list_two_columns li.right {
	clear: right;
}

ul.floating_link_list_two_columns li.right_without_left {
	margin-left: 196px;
	display: inline;
	clear: left;
}

/* Zum Thema Links */
ul.zum_thema_link_list li {
  background: transparent url("/static/global/linie_hell.gif") bottom left repeat-x;
  margin-top: 4px;
  padding-bottom: 4px;
}

ul.zum_thema_link_list li.last {
  background: none;
  padding-bottom: 0;
}

ul.zum_thema_link_list li a {
  font-weight: bold;
}

/* Multimedia Links */
ul.link_list li a.beitrag_hoeren {
  background-image: url("/static/global/link_hoeren.gif");
}

ul.link_list li a.bildergalerie {
  background-image: url("/static/global/link_gallery.gif");
}

ul.link_list li a.beitrag_anschauen {
  background-image: url("/static/global/link_video.gif");
}

/* Kommentieren Links */
ul.link_list li a.pagedown_link {
  background-image: url("/static/global/link_pagedown.gif");
  line-height: inherit;
}

/* List Items sind h�her (24px) */
ul.higher_lines_link_list li a,
ul.higher_lines_link_list li span {
	padding-top: 4px;
	padding-bottom: 4px;
}

ul.higher_lines_link_list li a,
ul.higher_lines_link_list li a.inactive {
	background-position: 5px 6px;
}

/* Bewirkt, dass die Links weniger Padding haben (ausser gegen linke Seite), damit eine Liste von "Vorg�ngerjahreszahl - Jan - Feb - ... - Dez - Nachfolgerjahreszahl" auf eine einzige Linie passt */
ul.tinier_link_list li a,
ul.tinier_link_list li a.inactive,
ul.tinier_link_list li span,
ul.tinier_link_list li span.inactive {
	padding-left: 19px;
	padding-right: 0;
}



/* F�gt dem Listenitem oben ein eine helle horizontale Linie ein (als Background-Image) */
ul.link_list li.hr_separated {
	padding-top: 8px;
	background-image: url("/static/global/linie_hell.gif");
	background-position: 0 4px;
	background-repeat: repeat-x;
}

ul.higher_lines_link_list li.hr_separated {
	padding-top: 8px;
	background-image: url("/static/global/linie_hell.gif");
	background-position: 0 4px;
	background-repeat: repeat-x;
}

ul.hr_separated {
	padding-top: 4px;
	background-image: url("/static/global/linie_hell.gif");
	background-position: 0 0;
	background-repeat: repeat-x;
}

/*-----------------------------------------------------------------------------*/
/* Folgende Regeln sind overriding Rules f�r nicht-korrekterweise gelb
*  ausgegebene Items (zu l�schende CSS Rule greift st�rker als richtige CSS Rule)
*  ... Diese werden sp�ter wieder gel�scht! */

#related ul.link_list a {
  color: black;
}

#related ul.link_list a:hover {
  color: red;
}

/*Horizontal lines */

hr,
div.hr {
	height: 1px;
	margin: 0;
	padding: 0;
	background-image: url("/static/global/linie_dunkel.gif");
	background-position: top left;
	background-repeat: repeat-x;
	/*background-color: yellow;*/
}

hr.light {
	background-image: none;
	background-color: red;
}

hr.hr_light,
div.hr_light {
	background-image: url("/static/global/linie_hell.gif");
}

hr.hr_height16,
div.hr_height16 {
	margin-top: 4px;
	margin-bottom: 3px;
}

hr.hr_clear,
div.hr_clear {
	clear: both;
}