/**
 * 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,
div.audiogalerie 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 a.beitrag_downloaden,
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.beitrag_downloaden {
  background-position: 5px 3px !important;
}

/* Keine Bubbles für Social Links */

ul.link_list li a.none {padding: 0px; padding: 0px; margin-right: 3px; background-image: url("/static/global/transparent.gif");}
ul.link_list li a.none img {margin-top: 5px; padding: 0px;}

/* Kein zeilenumbruch für Social Links */
ul.social  {
        margin: 0px;
        padding: 0px;
        white-space: nowrap;
        width: 155px;
}
ul.social li {
        margin: 0px;
        padding: 0px;
	margin-top: -4px;
        white-space: nowrap;
}
ul.social img {border: 0px;}

ul.socialbox {
	list-style-type: none;
	margin: 0; 
	padding: 0;
}

ul.socialbox li {
margin: 0 0 2px 0;
padding: 2px 5px 0 5px;
}

ul.socialbox .legende {
  padding-left: 116px;
  color: grey;
} 

#related ul.socialbox li .legende,
.box > .background > ul.socialbox li .legende,
.zimmerbox ul.socialbox li .legende { display: none; }

ul.socialbox li.lastlink {
  background-image: url("/static/global/linie_dunkel.gif");
  background-position: 0 bottom;
  background-repeat: repeat-x;
  padding-bottom: 3px;
}
ul.socialbox li.social-sharing,
ul.socialbox li.social-sharing #social-sharing-background { 
  position: relative; 
  padding: 5px 5px 0 4px;
}
ul.socialbox li.social-sharing #social-sharing-background {
  background-image: none;
  background-repeat: no-repeat;
  background-position: 4px 5px;
  height: 48px;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 175px;
}
ul.socialbox li.active div#social-sharing-background {
  z-index: 1;
}

ul.socialbox li.social-sharing-hinweis {
  display:none;
  background: white;
  border: 1px solid #7F7F7F;
}
ul.socialbox li.active + li.social-sharing-hinweis,
ul.socialbox li.social-sharing:hover + li.social-sharing-hinweis {
  display: block;
  position: absolute;
  width: 184px;
  left: 4px;
  width: 184px;
}

.icn_facebook_recommend, .icn_googleplus {
  display: block;
  width: 176px;
  height: 20px;
  cursor: hand;
  cursor: pointer;
  margin-bottom: 5px;
}

ul.socialbox li.social-sharing a.icn_facebook_recommend { 
  opacity: 0.666; background: transparent; 
  background-image: url("/static/global/social-sharing-placeholder.gif");
  background-position: 0 0px;
  background-repeat: no-repeat;
}

ul.socialbox li.social-sharing a.icn_facebook_recommend  {
  margin-bottom: 5px;
}

ul.socialbox li.social-sharing a.icn_googleplus { 
  opacity: 0.666; background: transparent; 
  background-image: url("/static/global/social-sharing-placeholder.gif");
  background-position: 0 -25px;
  background-repeat: no-repeat;
  z-index: 1;
}

ul.socialbox li.social-sharing:hover a.icn_facebook_recommend:hover,
ul.socialbox li.social-sharing:hover a.icn_googleplus:hover { 
  opacity: 1.0;
  z-index: 2;
}

ul.socialbox a:hover {color: #f00;}

ul.socialbox li .icn_facebook {
padding-left: 16px;
background-image:url('/static/global/facebook_12x12.gif');
background-repeat: no-repeat;
background-position: 0px 1px;
}

ul.socialbox li .icn_twitter {
padding-left: 16px;
background-image:url('/static/global/twitter_12x12.gif');
background-repeat: no-repeat;
background-position: 0px 1px;
}

.icn_ilike {
margin: 0;
border:none; 
overflow:hidden; 
width:170px; 
height:21px;

}


ul.socialbox li .icn_email {
padding-left: 16px;
background-image:url('/static/global/mail_12x12.gif');
background-repeat: no-repeat;
background-position: 0px 1px;
}
#article #weiterempfehlen-block {
  /* float: left; */
  display: inline-block;
  margin-top: 6px;
}

#article #weiterempfehlen-block a#weiterempfehlen-toggle {
  margin-top: 0px;
}

#weiterempfehlen-block ul.socialbox li {
  position: relative;
  padding: 3px 4px;
}
#weiterempfehlen-block ul.socialbox li.lastlink {
  background-image: none;
  padding-bottom: 0;
}

#weiterempfehlen-block .social_link {
    margin: 3px 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
}

#weiterempfehlen-block .social_link_googleplus {
  margin: 3px 4px 3px -1px;
}
#weiterempfehlen-block .social_link_recommend {
  margin: 1px 4px 3px -1px;
}

#weiterempfehlen-links {
  margin-bottom: 15px;
  margin-left: 5px;
}

#weiterempfehlen-block p.top_teaser_prefix {
  margin-top: 4px;
  font-weight:bold;
}

span.inactive,
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;
}
ul.attachments_list li a {
  background-image: url("/static/global/link_downloaden.gif");
  background-position: 5px 3px;
}
/* Externe Links haben graue Farbe bei Hover */
ul.external_link_list li a:hover,
ul.link_list li a.external_link: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/bigger/transparency_40.png") top left repeat;
}

ul.dossier_link_list li ul li {
  background: transparent url("/static/global/transparencies/bigger/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/bigger/transparency_40.png") top left repeat;
}

ul.main_navigation_link_list ul li ul li {
  background: transparent url("/static/global/transparencies/bigger/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;
}

.linkgalerie ul.zum_thema_link_list li.last {
  padding-bottom: 4px;
}

.linkgalerie {
  margin-bottom: 16px;
}

/* Multimedia Links */
ul.link_list li a.beitrag_hoeren{
  background-image: url("/static/global/link_hoeren.gif");
}
ul.link_list li a.beitrag_inline_hoeren {
  background-image: url("/static/global/link_hoe_play.gif");
}
ul.link_list li a.isplaying {
  background-image: url("/static/global/link_hoe_stop.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");
}

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

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

/* RSS Links (benötigt zusätzlich ein <span> innerhalb des <a> Tags!) */
ul.link_list li a.rss_feed span {
	padding-right: 16px;
	padding-left: 0;
  background: url("/static/global/rss_12x12.gif") center right no-repeat;
}

/* 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;
}

/*-----------------------------------------------------------------------------
 * Formular:
 *
 * Beschreibung
 * ============
 *
 * Es gibt soweit zwei verschiedene Formularversionen: „form.standard“ und
 * „form.one_column“.
 *
 * Standard definiert jene Formulare, welche von Drupal ausgegeben werden mittels
 * der Definitionen in /lib/formulare/*, zum Beispiel das Kontaktformular.
 *
 * One_column bietet verschiedenste Formularelemente für Formulare in einspaltigen
 * Boxen, z.B. im Radio Player
 *
 * Bitte auch das Dokument Dokumentation-fuer-die-Erstellung-von-Formularen_xxx.doc
 * konsultieren (im SRDRS.WartungUndSupport/Formular_Redesign Projektordner). Im
 * gleichen Ordner befinden sich auch umgesetzte Beispiele zur Veranschaulichung.
 *
 * Anwendung
 * =========
 *
 * Einfach dem entsprechenden <form...> Tag die Klasse "standard" zuweisen
 * (für standard Formulare) oder den <form> Tag in einen Container mit der Klasse
 * "one_column" setzen (für Formulare mit der Breite einer einzelnen Column).
 */

/* Resets
 *
 * Überlagerungen des aktuellen Chrüsimüsi-CSS mit jenen des
 * aktuellen XHTML Prototypen sollen hier zurückgesetzt werden.
 * Sobald alle Formulare "normalisiert" worden sind, können diese
 * Definitionen wieder entfernt werden.
 *
 * Wichtig: zur Zeit verfügen *alle* CSS-Specs des Formular Prototypen über den
 * Zusatz "!important"! Dies bewirkt, dass *alle* anderen CSS-Specs, welche mit
 * diesen hier interferieren könnten, überschrieben werden. Sobald die alten
 * Formulare alle an den Prototypen angepasst worden und die alten CSS-Specs
 * entfernt worden sind, können diese "!important" Zusätze wieder entfernt werden.
 * (Auch die IE-Fixes etc. verfügen darüber, also diese auch nicht vergessen!)
 */
 
/* Hier wird sichergestellt, dass die Schrift korrekt ist */
form,
form input,
form textarea,
form select,
form .form-submit {
  font-family: Verdana !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

form .form-submit:hover {
  text-decoration: none;
  color: red;
}

form.standard .form-item,
.one_column form .form-item {
	padding: 0 !important;
}

form.standard select,
.one_column form select {
}

form.standard label,
form.standard input,
form.standard textarea,
.one_column form label,
.one_column form input,
.one_column form textarea {
	margin: 0 !important;
}



/* Allgemeine Definitionen
 *
 * Die folgenden Definitionen beziehen sich allgemein auf alle
 * Formulare. Da wir aber noch ein grosses Chrüsimüsi
 * verschiedenster Formularstrukturen haben und die neuen,
 * sauberen Strukturen deshalb alle auf eigene Formularklassen
 * aufbauen im CSS (form.standard, .one_column form, form.xxx) statt
 * direkt auf dem form-Tag, müssen wir auch jede Formklasse
 * aufführen in jeder Definition.
 *
 * Also statt
 *   form { ... }
 * müssen wir
 *   form.standard, .one_column form, form.xxx { ... }
 * verwenden.
 *
 * Sobald aber mal alle vorhandenen Formulare auf der Seite
 * an die neuen Definitionen angepasst worden sind, können wir
 * alle diese allgemeinen Definitionen zu
 *   form { ... }
 * umwandeln (so dieser Tag jemals kommen möge...)
 */

form.standard {
  padding: 0 0 4px 0 !important;
}

.one_column form {
  padding: 0 !important;
}

form.standard,
.one_column form {
  margin: 0 0 5px 0 !important;
  clear: both !important;
  overflow: hidden !important;
}

form#searchbox {
  margin-bottom: 0px !important;
}

form.standard fieldset,
.one_column form fieldset {
  border: 1px solid #9C9C9C !important;
  padding: 0 0 4px 0 !important;
  margin: 5px !important;
}

form.standard legend, /* IE-Fix 12! */
.one_column form legend {
  padding: 0 5px !important;
  font-weight: bold !important;
  margin-left: 5px !important;
}

form.standard fieldset.neutral,
.one_column form fieldset.neutral {
	border: none !important;
}

form.standard fieldset.neutral legend, /* IE-13 Fix! */
.one_column form fieldset.neutral legend {
    font-weight: normal !important;
    padding: 0 0 4px 0 !important;
    margin-left: 0 !important;
}

form.standard div.form-item,
.one_column form div.form-item { /* IE-6 Fix! */
  margin: 0 5px 0 5px !important;
  overflow: hidden !important;
  clear: both !important;
}

form.standard label,
.one_column form label {
  padding: 4px 0 4px 0 !important;
}

form.standard .description, /* IE-11 Fix! */
.one_column form .description {
  color: gray !important;
  clear: both;
  padding-bottom: 16px;
}

form.standard .form-text, /* IE-11 Fix! */
.one_column form .form-text {
  float: left !important;
  margin: 0 !important;
  padding: 3px 0 4px 4px !important;
}

form.standard .form-radio /* IE-1, IE-10 Fix! */
{
  margin: 0 4px -2px -17px !important;
}

.one_column form .form-radio {
  margin: 0 0px -2px -17px !important;
}

form.standard .form-checkbox,/* IE-10 Fix! */
.one_column form .form-checkbox {
  margin: 0 0px 0 -17px !important;
}

form.standard .option,
.one_column form .option {
  background: transparent url('/static/global/link_linie.gif') 0 5px no-repeat !important;
  padding-left: 1px !important;
}

form.standard label,
.one_column form label,
form.standard .option,
.one_column form .option,
form.standard fieldset.neutral legend,
.one_column form fieldset.neutral legend {
  color: #000;
  display: block !important;
}

form.standard .option {
  padding: 4px 0 4px 22px !important;
}

form.standard select,
.one_column form select { /* IE-2 Fix! */
  clear: left !important;
  float: left !important;
  margin: 2px 0 3px 0 !important;
}

form.standard option,
.one_column form option {
  padding-left: 4px !important;
}

form.standard textarea,
.one_column form textarea {
  clear: left !important;
  float: left !important;
  margin: 1px 0 1px 0 !important;
  padding: 1px 0 1px 4px !important;
  overflow-y: scroll !important;
}

form.standard .hr_light, /* IE-4 Fix! */
.one_column form .hr_light {
  background: transparent url('/static/global/linie_hell.gif') top left repeat-x !important;
  border: 0 !important;
  height: 1px !important;
  margin: 8px 0 7px 0 !important;
}

form.standard .form-submit,
.one_column form .form-submit { /* IE-3 Fix! */
  background: #ffffff url('/static/global/link.gif') 5px 50% no-repeat !important;
  border: none !important;
  float: left !important;
  font-weight: bold !important;
  margin: 5px 0 0 5px !important; /* Ein Margin-top von 5px hat es, weil sonst Buttons, die nicht direkt nach einem Fieldset kommen, am oberen Element "kleben".  */
  overflow: visible !important;
  padding: 3px 5px 3px 17px !important;
}

form.standard .inline,
.one_column form .inline {
  padding: 4px 0 4px 0 !important;
  margin: 0 5px 0 5px !important;
  float: left !important;
}

form.standard .counter {
  margin-top: 8px !important;
}

form.standard .counter .form-text { /* IE-8 Fix! */
  float: right !important;
  width: 31px !important;
}

form.standard .counter .inline { /* IE-5 Fix! */
  float: right !important;
}

form.standard .captcha img { /* IE-9 Fix! */
  float: left !important;
  margin-right: 5px !important;
}

form.standard .captcha .form-text {
  width: 238px !important;
  margin-top: 4px !important;
}

/* Standard
 *
 * Das Standardformular gibt den per /lib/formulare/* definierten
 * Formularen das Aussehen.
 */

form.standard {
  margin-bottom: 24px !important;
}
.one_column form.standard {
  margin: 4px 0px 12px 0px !important;
}

form.standard div.form-item { /* IE-6 Fix! */
}

form.standard textarea {
  width: 363px !important;
}

form.standard .form-text { /* IE-12 Fix! */
  width: 363px !important;
}
form.standard .form-file { /* CMS-2163 Fileupload fehlt */
  width: 363px !important;
}

form.standard select {
  width: 371px !important;
  height: 22px;
}

form.standard .hr_light {
  width: 381px !important;
}

/* Tiny
 *
 * Das Tinyformular gibt den Formularen in den schmalen Boxen
 * (z.B. im Radioplayer oder Sendungen) das Aussehen.
 * CMS-2163: Klasse .one_column hinzugefuegt
 */
.one_column form div.form-item,
form.standard .one_column {
  width: 174px !important;
}

.one_column form fieldset {
  float: left !important;
}

.one_column form .form-text {
  width: 166px !important;
}

/* Variante von .form-text */
.one_column form .date {
  width: 137px !important;
}

/* Varianten von .form-text */
.one_column form .von,
.one_column form .bis { /* IE-7 Fix! */
  width: 50px !important;
}

.one_column form select {
  width: 174px !important;
}

.one_column form .option {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-position: 0 2px !important;
}

.one_column form .two_columns .option {
  width: 50% !important;
  margin-right: -1px !important; /* Da es noch ein Padding-left von 1px hat wird die Gesamtbreite 1px zu breit! Also neutralisieren! */
  float: left !important;
}

.one_column form .floating .option {
  margin-right: 10px !important;
  float: left !important;
}

.one_column form .calendar {
  background: transparent url('/static/global/link_kalender.gif') top left no-repeat !important;
  float: left !important;
  height: 24px !important;
  margin-left: 5px !important;
  width: 24px !important;
  text-decoration: none !important;
}

.one_column form .hr_light {
  float: left !important;
  width: 184px !important;
}

.one_column form div.form-item {
  float: left !important;
  clear: none !important;
  width:auto !important; /* fuer floating in einspaltigen Formularen */
}

.one_column form fieldset div.form-item {
  float: none !important;
  clear: both !important;
}

/* Formulare mit Fehlermeldungen */

form.standard .error label,
.one_column form .error label {
  color: #CC0000;
}


/*-----------------------------------------------------------------------------
 * Tabelle:
 *
 * Beschreibung
 * ============
 *
 * Es gibt eine Standard Tabelle à la StyleGuide (v071130) auf Seite 33.
 *
 * Anwendung
 * =========
 *
 * Einfach dem entsprechenden <table...> Tag die Klasse "standard" zuweisen.
 *
 * Hinweis
 *
 * Die folgenden Definitionen sind nicht vollständig, sondern ein Quick Fix,
 * um einigermassen schöne Tabellen zu haben. Bei Gelegenheit können sie
 * vervollständigt werden.
 */

table.standard,
table.standard thead,
table.standard tbody,
table.standard tr,
table.standard th,
table.standard td {
  border: none;
  line-height: 16px;
  background: none;
  vertical-align: top;
  text-align: left;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
}

table.standard {
  margin-bottom: 24px;
  background: url('/static/global/linie_dunkel.gif') top left repeat-x;
}

table.standard thead th {
  background: url('/static/global/linie_dunkel.gif') bottom left repeat-x !important;
}

table.standard tbody td {
  background: url('/static/global/linie_hell.gif') bottom left repeat-x !important;
}

table.standard th,
table.standard td {
  padding: 4px;
}

table.standard th {
  font-weight: bold;
}

table.standard td {
  font-weight: normal;
}

table.standard a {
	font-weight: normal;
}

table.standard td.currency,
table.standard th.currency {
	text-align: right;
}

.audiogalerie_eintrag {
  margin: 0;
  padding: 3px 4px;
  position: relative;
}

.audiogalerie hr, .audiogalerie div.hr {
  margin-top: 1px !important;
  background-image: url(/static/global/linie_hell.gif);
}

.audiogalerie_eintrag div.audio_legende {
  padding-right: 184px;
}

.audiogalerie_eintrag a.l_radiokiosk span.title {
  font-weight: bold;
}
.audiogalerie_eintrag a.l_radiokiosk {
  display: inline !important;
  margin-left: 5px;
  position: absolute;
  width: 186px;
}

#content.node-epgsg .audiogalerie_eintrag a.l_radiokiosk {
  width: 368px;
  position: relative;
  margin-left: 1px;
  padding-left: 14px;
}
#content.node-epgsg .audiogalerie_eintrag a.l_radiokiosk span.title {
  display: inline-block;
  vertical-align: text-top;
  width: 368px;
}

.l_radiokiosk br {
  display: none;
}
.l_radiokiosk span.sub {
  display: none;
}
.l_radiokiosk span.lighter {
  margin-left: 3px;
}

.audiogalerie_eintrag a.beitrag_hoeren,
.audiogalerie_eintrag a.beitrag_inline_hoeren,
.audiogalerie_eintrag a.produkt_kaufen {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 160px;
  margin: 3px 4px;
}

.produktgalerie .audiogalerie_eintrag {
  min-height: 32px;
}

.produktgalerie .preisangabe {
  display: block;
}

.audiogalerie_eintrag a.produkt_kaufen {
  background-position: 0px 3px;
}

a.weiterlesen {
  margin-bottom: 16px;
}

.zwischentitel {
  margin: 0pt 4px; 
  line-height: 24px;
  font-weight: bold;
}

/*-----------------------------------------------------------------------------
 * Elemente visuell verbergen:
 *
 * Beschreibung
 * ============
 *
 * Mittels der Klasse "visually_hidden" können beliebige Elemente visuell
 * verborgen werden, ohne dass sie im Source Code entfernt sind; Screenreader
 * etc. sehen diese Elemente deshalb trotzdem.
 *
 * Anwendung
 * =========
 *
 * Einfach dem entsprechenden Tag die Klasse "visually_hidden" zuweisen.
 */

.visually_hidden {
  display: none !important;
}