@charset "ISO-8859-1";
/***************************************************************************
 * Allgemeine Definitionen
 * In diesem Bereich sollen nur CSS-Klassendefinitionen aufgeführt werden,
 * die kontextunabhängig verwendet werden können. 
 * - Schriften (z.B. h1)
 * - Farben    (z.B. Hintergrundfarben wie inputtabelle)
 * - Abstände (z.B. nobottommargin(?))
 * - Einrückung (z.B. left)
 ***************************************************************************/

/***************************************************************************
 * Globale Definitionen für Tags
 */

/**
 * Alle Eingabeelemente ohne Schatten etc.
 */
input {
	border: 1px solid #768086;
	min-height: 14px;
	vertical-align: top;
	padding: 0 3px;
}
select {
	border: 1px solid #768086;
	min-height: 14px;
}

table table, table ul, table div.layoutTable {	/* drunterliegende Elemente nicht nochmals 0.7em */
	font-size: 1em;
}
/*
 * Alle Tabellen-Headerzellen fett, ist in bahn.css überschrieben
 */
th {
	font-weight: bold;
}

/** Zurücksetzen der Font-Größe auf Standardgröße */
.resetFontSize {
	font-size: 1em;
}
.fontSize1Px {
	font-size: 1px;
}

/** Header sind leider mit 0.75em definiert, damit die innerhalb von Tabellen
    richtig aussehen brauchen wir den Faktor 0.75/0.7 */
table h3.resetFontSize, p h3.resetFontSize {
	font-size: 1.0714em;
}

.debugmsg {
	color:blue; font-size:11px; 
	font-family:courier,monospace; 
	text-decoration:none;
	border: 1px solid red;
}

.debugmsg p, .debugmsg table {
	font-size: 1em;
}

/***************************************************************************
 * Namics-Anpassungen
 * Überschreiben bzw. Anpassen von bestehenden Namics-Definitionen
 ***************************************************************************/

/* ID 1634 Klapp-Pfeile für Opener. Ohne JS immer ausgeklappt (active) */
#content .opener, #content .opener:hover, #content .hover .opener,
#content .openerActive, #content .openerActive:hover, #content .hover .openerActive {
	background: url(../img/icons/klapppfeil_down_17x19_schatten.png) 0px 4px no-repeat;
}

/* Nochmal mit Pfeil nach links unausgeklappt */
#content .opener.nachlinks {
	background: url(../img/icons/klapppfeil_links_17x19_schatten.png) 8px 4px no-repeat;
}
#content .opener.nachlinks:hover, #content .hover .opener.nachlinks {
	background: url(../img/icons/klapppfeil_unten_grau_16x16.gif) 8px 4px no-repeat;
}
#content .openerActive.nachlinks {
	background: url(../img/icons/klapppfeil_down_17x19_schatten.png) 8px 4px no-repeat;
}
#content .openerActive.nachlinks:hover, #content .hover .openerActive.nachlinks {
	background: url(../img/icons/klapppfeil_links_grau_16x16.gif) 8px 4px no-repeat;
}
/** Span, das nur zur Speicherung von title-Attributen genutzt wird, aber nie angezeigt */
#content .opener .titleopen, #content .opener .titleclosed {
	display:none;
}
/** Master-Opener; ist erstmal unsichtbar und wird durch Logik in webclient.js dynamisch angezeigt. */
#content .openall,#content .closeall {
	display:none;
}
/* Opener als Button, d.h. ansonsten leeres DIV ohne Text mit Icon */
#content div.openerbutton {
	width: 24px;
	height: 24px;
}

/* bahn.css legt collapse als Standard fest, bei einigen Tabelle macht das jedoch Probleme */
table.bordernocollapse {
	border-collapse: separate;
}

/***************************************************************************
 * Eingabefelder
 * Schaltflächen, Eingabefelder, Radio(?), Kontrollkästchen, etc.
 ***************************************************************************/

/**
 * Definitionen machen in IE Probleme bei Checkboxen und Radiobuttons,
 * die müssen immer mit dieser Klasse versehen werden!
 */
input.checkbox, input.radio {
	border: none;
	min-height: inherit;
}

/**
 * Alle Buttons mit bibeButton-Style werden nicht angezeigt, wenn Form-Tag den disableESuiteButton-Style besitzt.
 * Mit diesem Feature ist es möglich, deaktivierte Buttons in Content-Fenster im Nicht-Javascript-Fall zu entfernen.
 * Die input-Buttons (NonScript-Fall) bleiben unsichtbar,
 * die echten Buttons werden durch webclient.js noch sichtbar gemacht, allerdings deaktiviert  
 */
form.disableBibeContentfensterButtons .button-inside span.button-border .bibeButton {
	display:none;
}

/***************************************************************************
 * Layoutaufteilung
 * In diesem Bereich werden die allgemeinen Layoutsaufteilungen festgelegt.
 * Inbesondere sollen an dieser Stelle alle spezifischen Einstellungen aufgeführt werden,
 * die für eine Layout-Entität wie bspw. Einstellungen für einen Abschnitt gelten. 
 * 
 * - "Frames" (z.B. Hauptbereich mit bzw. ohne Rand und/oder Schatten; maincontentwhitebgbborder)
 * - Bereiche (z.B. Dreispaltenaufteilung; portalcontentleft)
 * - Blöcke (z.B. Abschnitte; abschnitt)
 ***************************************************************************/

/*---------------------------------------------------------------------
 * "Frames" (z.B. Hauptbereich
 * mit bzw. ohne Rand und/oder Schatten;maincontentwhitebgbborder)
 *---------------------------------------------------------------------*/

/**
 * Maincontent ist der Hauptbereich einer Seite ohne Rahmen
 * (Portalseiten, Meine Bahn, Fiku usw.)
 * 
 * Für den Hauptbereich wird der Aussenrahmen festgelegt und der Innenrahmen wird zurueckgesetzt. 
 */
.maincontent {
	margin: 0px 12px 8px 8px;  
}
/**
 * MainContent mit position:relative für Positionierung
 * über ein Key-Visual.
 */
.maincontent.keyvisualHoch {
	position: relative;
	z-index: 900;
}

.maincontentwhitebgbborder {
	background-color: #ffffff;
	border: 1px solid #ccc;
	margin: -8px 11px 7px 7px;  
	padding: 16px;
	z-index: 900;
	position: relative;
}

/** Zusätzliches DIV, dass richtige Positionierung von relative-Elementen
 unterhalb z.B. der Flyouts gewährleistet.
 */
div.content-positioner {
    position: relative;
    height: 0;
    max-height: 0;
}

.maincontentwhitebgbborder div.logininfo {
    top: 0px;
    position: absolute;
    width: 912px;
}

/*---------------------------------------------------------------------
 * Bereiche (z.B. Dreispaltenaufteilung; portalcontentleft)
 *---------------------------------------------------------------------*/

/**
 * Linker Bereich auf Portalseiten:
 * Margin-Top wird auf 8px gesetzt, damit ein oberer Abstand zum Visual-Key erzeugt wird.
 */
.portalcontentleft {
	float:left;
	width: 288px;
	margin-top: 8px;
}

div#quickfinder .portalcontentleft {
    margin: 0 7px 8px;
}

.portalcontentleft .imagetop {
    width: 100%;
}

/**
 * Mittlerer Bereich auf Portalseiten:
 * Margin-Top wird auf 8px gesetzt, damit ein oberer Abstand zum Visual-Key erzeugt wird.
 * 
 * Shop- und Fiku-Portal verwenden die default-Angaben, MeineBahn-Portal hat etwas mehr Platz, 
 * weil der rechte Kamin den Schattenwurf und sein Inhalt eine geringere Breite hat.
 *
 * Im Fiku-Portal werden im rechten Kamin sowohl .contentfenster als auch .boxContainer.kaminrechts Elemente angezeigt,
 * und im mittleren Bereich sowohl .contenfenster als .tile Elemente. 
 * Damit der Abstand von der Mitte zum Quickfinder nach links und zu den Contenfenstern im rechten Kamin gleich ist,
 * müssen die mittleren Inhalte analog zu den Contenfenstern im mittleren Bereich eine kleinere Breite bekommen.
 * Der Abstand von den mittleren Inhalten zu den rechtsbündigen .boxContainer.kaminrechts Elementen mit Schatten 
 * im rechten Kamin ist damit etwas größer als zu den Contenfenstern im rechten Kamin, womit wir hier aber leben,
 * um die Elemente bündig auszurichten.    
 */
.portalcontentcenter {
	float:left;
    width: 432px;
    margin: 8px 16px 0 16px;
}
.portalcontentcenter.meinebahn {
    width: 444px;
    margin-right: 4px;
}

.maincontent.keyvisualHoch .portalcontentcenter {
	/*margin-top: -64px;	/* 8px - halbe Höhe Keyvisual (144px) */
	margin-top: -124px;		/* 8px - halbe Höhe Keyvisual (263px) */ /* Müssten das nicht eher 304px sein? */
}
/**
 * Content unterhalb KeyVisual positioniert.
 */
.maincontent.keyvisualHoch .portalcontentcenter.down {
	margin-top: 16px;
}

/**
 * Rechter Bereich auf Portalseiten:
 * Margin-Top wird auf 8px gesetzt, damit ein oberer Abstand zum Visual-Key erzeugt wird.
 */
.portalcontentright {
    float:left;
	margin-top: 8px;
	width: 208px;
}
.maincontent.keyvisualHoch .portalcontentright {
	margin-top: -255px;		/* 8px - Höhe Keyvisual (263px) */
}
.maincontent .portalcontentright.floating-box {
    /*margin-top: -296px;     /* 8px - Höhe Keyvisual (304px) */
    position: absolute;
    right: 12px;
    top: 0;
}
.maincontent .portalcontentright.floating-box .linedown-slim {
    margin-top: 4px;
    margin-bottom: 4px;
}
.maincontent .portalcontentright.floating-box label {
    display: block;
    padding-top: 6px;
}
.maincontent .portalcontentright.floating-box input {
    display: block;
    width: 158px;
}
/**
 * Content unterhalb KeyVisual positioniert.
 */
.maincontent.keyvisualExtrahoch .portalcontentright.down {
    margin-top: 8px;
}

.portalcontentright .benutzerkontoIcon {
    background-position: 0 0;
    position: relative;
}
.portalcontentright .benutzerkontoIcon p {
    position: absolute; 
    bottom: 21px;
    white-space: nowrap;
}
.portalcontentright #kontoloeschen {
    width: 180px;
}

/**
 * width = portalcontentcenter.width + portalcontentcenter.margin-right + portalcontentright.width
 */
.portalcontentcenterright {
    margin: 0px 0 8px 16px;
  	width: 639px;
	float:left;
}

/**
 * Diese Definition streckt sich über den linken und mittleren Portalbereich
 */
.portalcontentleftcenter {
	width: 744px;
	float: left;
	margin-top: 8px;
	margin-right: 8px;
}

#tile-auftragsuche .labelcol {
    width: 104px;
}
#tile-auftragsuche .defaultcol {
    width: auto;
}
#tile-auftragsuche .col2 {
	width: auto;
}

table.linktable {
    font-size: 1em;
}
table.linktable.bgGradient {
    border-collapse: separate;
    margin-left: 1px;
}
table.linktable td.linkcol {
    vertical-align: top;
    overflow: hidden;
    border: 1px #cccccc solid;
}
table.linktable.bgGradient td.linkcol {
    background: #fff url(../img/bg_lougout_kaesten_kontofunktionen_services_bcservices.png) repeat-x bottom left;
    border: 8px solid #ffffff;
    outline: #cccccc solid 1px;
}
table.linktable td.linkcol ul {
    font-size: 0.7em;
}

/*---------------------------------------------------------------------
 * Blöcke (z.B. Abschnitte; abschnitt)
 *---------------------------------------------------------------------*/

/**
 * Abschnitt einer Seite, in den bspw. Eingabedaten erfasst werden können,
 * weitere DIVs etc. eingebettet.
 * NICHT zum Einbetten von Tabellen (table.form),
 * da diese i.a. ihr eigenes padding mitbringen.
 */
.abschnitt {
	margin: 0 0 8px 0;
	padding: 8px;
}

/** Abschnitt ohne vertikales padding */
.abschnitt.verticalcompact {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/**
 * Dies verhindert, dass die Überschrift wegen dem padding-left von 
 * h1 und abschnitt doppelt eingerückt wird. 
 * 
 */
.abschnitt h1, .abschnitt h2, .abschnitt h3 {
	padding-left: 0px;
}
/**
 * Weitere Elemente innerhalb eines Abschnitts müssen
 * die "Standard-Schrift" 0.7em bekommen.
 */
.abschnitt textarea, .abschnitt input, .abschnitt label, .abschnitt select,
.abschnitt .standardfont	/* standard heisst: 0.7em */
{
	font-size: 0.7em;
}

/* innerhalb p oder table wieder normal */
.abschnitt p label, .abschnitt p input, .abschnitt p select,
.abschnitt table label, .abschnitt tr label, 
.abschnitt table input, .abschnitt table select,
.abschnitt label span.errormsg,
p span.errormsg,
.tableCell span.errormsg
{
	font-size: 1em;
}
.abschnitt .left img {
	margin: 0;		/* bottom-margin für alle img aus bahn.css überschreiben */
}

/**
 * Breite Legende für Icons etc.
 */
.abschnitt.legendebreit .icongridleft {
	width: 72px;
	text-align: center;
}
/** Übergreifendes Label an Stelle von icongridleft */
.abschnitt.legendebreit .icongridleft.auto {
    width: auto;
}
.abschnitt.legendebreit .icongridright {
	margin-left: 80px;
}

/**
 * Linker Bereich innerhalb eines .abschnitt
 */
.abschnitthalfleft {
    float: left;
    width: 472px;
    margin: 0 16px 0 0;
}
.abschnitthalfright {
}

/** Beschriftung neben einem großen 40x40-Icon */
.bigicontext {
	float: left;
	padding-left: 8px;
	width: 800px;
}	
.abschnitthalfleft .bigicontext {
	width: 380px;
}
div.container_vorteaser .bigicontext {
    width: 660px;
}
.abschnitthalfright .bigicontext {
	width: 380px;	/*rechts weniger Platz*/
}

/**
 * Rechter Bereich bei zweispaltigen Seiteninhalten.
 */
.maincontent .abschnitthalfright {
    width: 472px;
	float: left;	
}

/**
 * Breite für linken und rechten Bereich bei zweispaltigen Seiteninhalten.
 */
.maincontentwhitebgbborder .abschnitthalfleft,
.maincontentwhitebgbborder .abschnitthalfright  {
    width: 455px; 
}

/**
 * Rechter Bereich bei zweispaltigen Seiteninhalten.
 */
.maincontentwhitebgbborder .abschnitthalfright {
   float: left;	
}

/*
 * Überschrift oberhalb eines .abschnitt
 * mit optionalem Icon "Seite drucken"
 * diese kommt i.a. in ein eigenes DIV
 */
div.header {
	padding: 12px 8px 8px 0px;
}
/* Will man z.B. ein Icon an den Rand stellen, ist
 * es nötig, das padding links wegzunehmen, da das Icon das
 * i.a. schon mitbringt
 */
div.header.nopaddingleft {
	padding-left: 0;
}
div.header h1,
div.header h2 {
	margin: 0;
	float: left;
}
/* Info-Icon "Drucken" */
div.header .info-right.print {
	background: url(../img/icons/seite_drucken_outline_16x16.png) left bottom no-repeat;
	padding-left: 20px;
}

/* Absatz innerhalb Header */
div.header p {
	clear: left;
}
/* Absatz ohne clear, zB rechts von h1 */
div.header p.noclear {
	clear: none;
}

/* Header mit Uberschrift und Link */
div.header a.arrowlink,
div.header div.headerlink {
    font-size: 0.7em;
    margin-top: 0.25em;
    line-height: 1.4em;
}

/*
 * Auf Nicht-Buchungsseiten wird kein padding-top fuer der ersten Ueberschrift benoetigt, weil der Seitenrahmen schon ein padding vorgibt.
 */
.maincontentwhitebgbborder div.header.first {
    padding-top: 0;
}

/**
 * Abschnitt für Buttons.
 * Wir definieren hier eine feste Größe, damit kein
 * clearfix notwendig ist (clear macht Probleme, wenn z.B.
 * Quickfinder die Buttons NICHT nach unten schieben soll)
 */
.button-abschnitt,
.button-navigation-abschnitt {
	height: 1.3em;
	position: relative;
}

div.button-big-height {
    height: 2.0em;
}

.button-navigation-abschnitt {
	margin-top: 16px;
}

.maincontentwhitebgbborder .button-abschnitt .button-inside,
.maincontentwhitebgbborder .button-navigation-abschnitt .button-inside {
	padding-bottom: 0;
}
.maincontentwhitebgbborder .button-abschnitt p, 
.maincontentwhitebgbborder .button-navigation-abschnitt p {
	margin-bottom: 0;
}
/*
 * Padding für Buttons links und rechts geändert.
 */
.button-inside.left {
	padding-right: 8px;
}
.button-inside.right {
	padding-left: 8px;
}

/***************************************************************************
 * Tabellen
 * Arten von Tabellen
 ***************************************************************************/

/* Standardeigenschaften einer Layout-Tabelle */
div.layoutTable { 
	display:table; 
	border-collapse:collapse; 
	font-size: 0.7em;
	line-height: 1.4;
	margin-bottom: 2px;
}

div.tableRow { 
	display:table-row;
	clear: left;
}
/* Einblenden der div-Tabellenzeile, nur wenn JS aktiv ist */
div.tableRow.show-with-js{ 
	display:none;
}
div.tableCell, table.form div.tableCell { 
	display:table-cell; 
	float:left; 
	padding:4px 8px; 	
	vertical-align:top;
	background-repeat: no-repeat;
}
div.tableCell.show-non-js, table.form div.tableCell.show-non-js {
	display: inline;	
}
div.tableCell.show-non-js-block, table.form div.tableCell.show-non-js-block {
	display: block;	
}
div.tableCell.right, table.form div.tableCell.right { 
    float:right; 
}

div.tableCell p {
	font-size: 1em;
}
div.tableCell ul {
	font-size: 1em;
}
div.tableCell label {
	line-height: 1.4;
	font-size: 1em;
}

table.form
{
	/* Notwendig, damit IE7 keine Probleme mit relative innerhalb table bekommt! */
	position: relative;
	margin-bottom: 2px;	/* Standard-margin unterhalb Tabellen */
}

table.normargin
{
	margin-bottom: 0px;	/* Spezial-margin unterhalb Tabellen */
}



/**
 * Die Form-Tabellen in eingebetteten Abschnitten 
 * müssen für die Nichtbuchungsablaufseiten bzgl. linken Außenabstand korrigiert werden,
 * damit der Inhalt der ersten Spalten linksbündig mit den Texten außerhalb der Tabelle sind. 
 */
.maincontentwhitebgbborder .abschnitt table.form,
.maincontentwhitebgbborder .abschnitt div.table {
	margin-left: -8px;	
}

/*
 * Standard-Tabellen für webclient-Context.
 */
table.form, table.form tbody th, table.form tbody td,
div.tableCell, 
/* Hintergrundfarbe entspricht der Hintergrundfarbe von Tabellenzellen. */
.bgcolorformbody	
{
	background-color: #f2f2f2;
	background-image: none;	/* default: ohne image; weichtig für IE ! */
}
/**
 * Standard-Zellen mit hellgrauem Hintergrund
 */
table.form tbody th, 
table.form tbody td,
table.whiteTable tbody th, 
table.whiteTable tbody td {
	padding: 4px 8px 4px 8px;	
	vertical-align: top;
}

/**
 * Dunklerer Hintergrund in header und footer
 */
table.form thead th, table.form thead td,
table.form tfoot th, table.form tfoot td {
	background-color: #e4e4e4;
	padding: 4px 8px 4px 8px;	
	vertical-align: top;
}

/* Folgende Hightlighting-Farben werden derzeit zum Markieren von Tabellenzeilen genutzt (z. B. Preisfinder).
 * Manche als stationäre Farben (nach Auswahl einer Zeile), manche als zusätzliches Highlight beim Mouseover/-out.
 * Die Reihenfolge der Farbdefinitionen ist wichtig, da sonst beim Mouseout
 * die vorige Farbe nicht wiederhergestellt wird, wenn man die entspr. CSS-Klasse entfernt.
 * (Die ersten Farben sind also die stationären, die späteren die temporären.)
 */
/**
 * Besonders hervorgehobene weil selektierte Zellen
 */
table.form .highlight-selected, 
.highlight-selected, 
table.form tr.highlight-selected th, table.form tr.highlight-selected td,
div.layoutTable div.tableRow.highlight-selected div.tableCell,
div.layoutTable.highlight-selected div.tableCell
{
    background-color: #D6DFF2; /* blau */  
}
/**
 * Besonders hervorgehobene Zellen deren Details angezeigt wurden
 */
table.form .highlight-details, 
.highlight-details, 
table.form tr.highlight-details th, table.form tr.highlight-details td,
div.layoutTable div.tableRow.highlight-details div.tableCell,
div.layoutTable.highlight-details div.tableCell
{
    background-color: #E4E4E4; /* mittelhellgrau */  
}
/**
 * Besonders hervorgehobene Zellen - Variante 1
 */
table.form .highlight-var1, 
.highlight-var1, 
table.form tr.highlight-var1 th, table.form tr.highlight-var1 td,
div.layoutTable div.tableRow.highlight-var1 div.tableCell
{
    background-color: #FFFFCC;  /* gelb */
}
/**
 * Besonders hervorgehobene Zellen 
 */
table.form .highlight, 
.highlight, 
table.form tr.highlight th, table.form tr.highlight td,
div.layoutTable div.tableRow.highlight div.tableCell
{
    background-color: #d5d5d5;  /* mittelgrau */
}
/**
 * Entsprechend .highlight-details für Aktionszellen
 */
table.form.suche .highlight-aktion {
    background-color: #e4e4e4;
}

table.form td .withicon.loeschen, table.form th .withicon.loeschen {
    background-image: url(../img/icons/papierkorb_weiss_16x16.png);
    background-position: 0 0;
    width: 16px;
    height: 16px;
    float: right;
    padding: 0;
    border: none;
}

/**
 * Für verschachtelte Tabellen linken Rand wieder wegnehmen
 */
table.form table th, table.form table td {
	padding: 4px 8px 4px 0;
}
table.form .col1, table.form .col3,
div.layoutTable .col1, div.layoutTable .col3 {
	width: 176px;
}
div.layoutTable .col1.withicon {
	width: 152px;
}

table.form .col2, 
div.layoutTable .col2  {
	width: 262px;
}

div.maincontentwhitebgbborder div.layoutTable .col4, div.layoutTable .col4  {
	width: 262px;
}


.colwidth10  {
	width: 10px;
}

.colwidth80  {
	width: 80px;
}


.colwidth310 {
	width: 310px;
}


.colwidth340 {
	width: 340px;
}


.colwidth510 {
	width: 510px;
}


.width200 {
	width: 200px;
}


.width310 {
	width: 310px;
}


.colwidth300 {
	width: 300px;
}


.colwidth438 {
	width: 438px;
}


.colwidth385 {
	width: 385px;
}


.colwidth120 {
	width: 120px;
}


.colwidth135 {
	width: 135px;
}

/* Falls man über mehrere cols geht, darf width nicht fest sein */
table.form .colspan {
	width: auto !important;
}
table.form .col1plus2, .col1plus2 {
	width: 454px;
}
/* verkürzte 2. col, damit noch Platz für ein radio vor col3 ist */
table.form .col2ohneradio, table.form.withradios .col2 {
	width: 238px;	/* 262-24 */
}
table.form.withradios .col1plus2,
div.tableLayout.withradios .col1plus2 {
	width: 406px;	/* 454-2*24 */
}

/*
 * Formulardaten mit spezieller Breite für/wie Buchungsdaten
 * 
 * Hinweis: Bei Änderung der Breite muß auch die folgende Klasse angepasst werden
 * .withouticoncol1
 * 
 */
table.form.fixcolwidth-small .col1,
table.form.indent .col1,
div.layoutTable.fixcolwidth-small .col1 {
	width: 152px;	/* 176px von .form überschreiben, für IE ist important evtl. wichtig! */
}
table.form.fixcolwidth-small .colspan,
table.form.indent .colspan,
table.form.minimalwidth .col1 {
	width: auto !important;
}
/* Ähnlich wie fixcolwidth-small, aber 8px schmaler, falls
 * Tabelle bereits mit Padding in ein DIV o.ä. eingebaut ist, Texte
 * damit also um 8px versetzt stehen */
table.form.fixcolwidth-padded .col1 {
	width: 144px;
}

/**
 * Breite (OK)
 * table.form.fixcolwidth-small.col1.width + Icon-Breite(16px) + 8px Breitenabstand(???)
 * Bei einer Änderung müssen auch die folgenden CSS-Angaben angepasst werden
 * 
 */
/**
 * Eine erste Spalte ohne Icon; im Gegensatz zu table.indent.col1
 * aber KEINE Einrückung um Icon-Breite links
 */
table.form.fixcolwidth-small .withouticoncol1 {
	width: 176px;	/* 176-24 für image! */
}

/** Breite für Eingabefelder in der zweiten und vierten Spalte */
.fixcolwidth-small .inputCol2,
.fixcolwidth-small .inputCol4 {
	width: 205px;
}

/** Breite für Comboboxen in der zweiten und vierten Spalte */
.fixcolwidth-small .selectboxCol2, 
.fixcolwidth-small .selectboxCol4 {
	width: 213px;
}

/** Breite für Postleitzahl-Feld */
.fixcolwidth-small .inputPlz {
	width: 60px;
}

/** Breite für Wohnort-Feld */
.fixcolwidth-small .inputOrt {
	width: 128px;
}


/**
 * Tabellenzelle mit Icon bzw.
 * passende Einrückung für TD ohne Icon.
 * Der Text wird immer um Iconbreite eingerückt (vergl. fixcolwidth-small .withouticoncol1)
 */
/* Einrückung für erste Spalte.
   Bei Buchungsseiten beinhaltet dies auch den Rand von 8px nach links */
table.indent .col1,
table.form .withicon,
div.layoutTable .withicon,
.withicon {
	background-position: 8px 4px;
	background-repeat: no-repeat;
	background-image: none;	/* default: ohne image; wichtig für IE ! */
    padding-left: 32px;
}

/**
 * Erweiterung von .withicon für kleine Icons 
 * - OHNE Breite
 */
table.form .icon-small,
div.layoutTable .icon-small,
.icon-small {	
	padding-top: 4px;
	padding-bottom: 0;
	vertical-align: top;
}

/**
 * Erweiterung von .withicon für größere Icons 
 * - OHNE Breite
 */
table.form .icon-medium,
div.layoutTable .icon-medium,
.icon-medium {
	height: 40px;
	padding-top: 0;
	padding-bottom: 0;
	vertical-align: middle;
}

table.form .icon-big,
div.layoutTable .icon-big,
.icon-big {
    height: 64px;
    padding-left: 48px;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

.benutzerkontoIcon {
    background-image: url(../img/icons/icon_konto.png);
}

.buchungsservicesIcon {
    background-image: url(../img/icons/icon_services.png);
}

.bahnCardServicesIcon {
    background-image: url(../img/icons/icon_bahncard_services.png);
}

table.form div {
	vertical-align: top;
	padding: 0;
}

/* Tabellenspalte zum einzelnen Einsetzen von Radiobuttons /
 * Checkboxes ohne zusätzlichen Rand.
 * Ergibt eine bündige Anordnung der nächsten Spalte wie
 * bei Verwendung von table.form.indent, d.h. Icons und Checkboxes
 * in Tabellen stehen genau untereinander, Rest links davon
 */
table.form th.radio, table.form td.radio,
div.layoutTable.fixcolwidth-small .tableCell.radio,
div.layoutTable div.tableCell.radio {
	width: 16px;
	padding-right: 0;
	/*background-color: #d03;*/
}
table.form input.radio, table.form input.checkbox,
div.layoutTable input.radio, div.layoutTable input.checkbox  {
	border: none;
	margin: 0.25em 0;		/* kein besonderes padding */
	padding: 0;
}

table.form label,
.tableCell label  {
	font-weight: bold;
}
table.form label.fontnormal,
div.tableCell label.fontnormal {
	font-weight: normal;
}
/* Tabelle/Zeile ohne Zwischenräume */
table.compact tbody th, table.compact tbody td,
tr.compact th, tr.compact td,
table.form tr.compact th, table.form tr.compact td {
	padding-top: 0;
	padding-bottom: 0;
	background-position: left top !important;	/* für IE ist important wichtig! */
	background-image: none;	/* default: ohne image; weichtig für IE ! */
}

/*
 * Tabelle mit Linien
 */
table.rowlines th, table.rowlines td,
tr.rowlines th, tr.rowlines td,
th.rowlines, td.rowlines {
	border-bottom: 2px solid #fff;
	padding-bottom: 8px;
}
/**
 * Für verschachtelte Tabellen wieder wegnehmen
 */
table.rowlines table th, table.rowlines table td {
	border-bottom: none;
	padding-bottom: inherit;
}
/* Zeile mit Linie oben drüber */
tr.lineabove th, tr.lineabove td {
	border-top: 2px solid #fff;
	padding-top: 8px;	
}
/* Zeile, die nur aus Linie besteht, ohne eigenen Inhalt */
tr.dividerline td, table.form tr.dividerline td {
	border-bottom: 2px solid #fff;
	padding: 0;
	height: 2px;
}
/**
 * Bei linierter Tabelle Zeilen ohne Linien dazwischen
 */
tr.nolines th, tr.nolines td,
th.nolines, td.nolines {
	border-bottom: none;
}

/**
 * Tabellenzellen bzw. -zeilen vertikal in der Mitte ausrichten. 
 */
tr.valignBaseline th, tr.valignBaseline td,
th.valignBaseline, td.valignBaseline {
	vertical-align:baseline;
}

/* Bei DIVs und Tabellen innerhalb Zelle muss Hintergund "inputtabelle" erhalten bleiben */
.inputtabelle,
table.inputtabelle,
.inputtabelle tbody th,
.inputtabelle tbody td,
.inputtabelle .form tbody th,
.inputtabelle .form tbody td,
table.form.inputtabelle tbody th,
table.form.inputtabelle tbody td,
table.form tr.inputtabelle th, table.form tr.inputtabelle td,
table.form tr td.inputtabelle,
div.inputtabelle .layoutTable, div.layoutTable.inputtabelle, 
div.inputtabelle .layoutTable .tableCell,
div.layoutTable .tableCell.inputtabelle,
div.layoutTable.inputtabelle .tableCell  {
	background-color: #D6DFF2;
}

/* Weisse Tabelle (kein Hintergrund */
.white,
.inputtabelle .white,
table.white,
table.white tbody th, table.white tbody td,
table.form.white tbody th, table.form.white tbody td,
.inputtabelle .form.white tbody th,
.inputtabelle .form.white tbody td,
table.form tr.white th, table.form tr.white td,
table.form tbody th.white, table.form tbody td.white,
div.layoutTable div.tableRow.white div.tableCell,
div.layoutTable div.tableRow div.tableCell.white
{
	background-color: #fff;
}
/* Nicht für Radiobuttons, Checkboxes */
input.radio.white, .white input.radio,
input.checkbox.white, .white input.checkbox {
	background-color: transparent !important;
}

/*
 * kopiert aus portal.css
 */
/* Grüner Haken "erledigt" */
table .bgIconActive,
table.form .bgIconActive,
div.layoutTable .bgIconActive {
	background-image: url(../img/icons/erledigt_gruen_16x16.gif);
}
/* Leeres DIV mit Icon "erledigt", ggf kombinieren mit openerbutton für feste Größe */
div.bgIconActive {
    background: url(../img/icons/erledigt_gruen_16x16.gif) 8px 4px no-repeat;
}
/* Rotes x "nicht möglich */
table .bgIconInactive,
table.form .bgIconInactive,
div.layoutTable .bgIconInactive {
	background-image: url(../img/icons/x_rot_outline_16x16.gif);
}
/* Graues Ausrufezeichen "nicht möglich */
div.bgIconInactiveGrey,
table .bgIconInactiveGrey,
table.form .bgIconInactiveGrey {
    background-image: url(../img/icons/ausrufezeichen_grauverlauf_16x16.gif);
}

/* Fragezeichen "unbekannt" */
table .bcIconUnbekannt,
table.form .bcIconUnbekannt {
	background-image: url(../img/icons/fragezeichen_outline_16x16.gif);
}
/* Leeres DIV mit Icon "nicht möglich", ggf kombinieren mit openerbutton für feste Größe */
div.bgIconInactive {
	background: url(../img/icons/x_rot_outline_16x16.gif) 8px 4px no-repeat;
}	
/* Leeres DIV mit Icon Fragezeichen "unbekannt" */
div .bcIconUnbekannt {
	background: url(../img/icons/fragezeichen_outline_16x16.gif) 8px 4px no-repeat;
}

/***************************************************************************
 * Aufzählungslisten etc.
 ***************************************************************************/

/*
 * Liste mit Ausrufezeichen, für wichtige Hinweise
 */
ul.wichtig {
	margin: 0;
	padding: 0;
}
ul.wichtig li {
	background: 0 top no-repeat;
	background-image: url(../img/icons/ausrufezeichen_rot_16x16.gif);
	padding: 0 4px 4px 24px;
}

/**
 * Link/Button, der wie JavaScript-Opener aussieht
 */
#content a.opener, #content input.opener, #content button.opener {
	color: #333;
	text-decoration: none;
	text-align: left;
	border: none;
}

#content input.opener, #content input.opener:hover,
h2.opener, a.opener {
	padding: 4px 0 4px 24px;
}
h3.opener {
	padding: 6px 0 4px 24px;
}

/* Für Radio- und Checkboxen als Opener (input-Tag) dürfen keine Hintergrundbilder angezeigt werden.  */
#content input.opener, 
#content input.opener:hover, #content input.opener:focus, #content input.opener:active,
#content .hover input.opener {
	background-image: none;
}
/* bei Checkbox-Openern das zusätzlich Padding 24px wegnehmen, das ist im IE8 sonst zuviel */
#content input.checkbox.opener {
    padding-left: 0px;
}

.abschnitt input.arrowlink, .abschnitt input.link {
	font-size: 1em;
}
/* Damit rechtsbündige Buttons und Links der Klasse arrowlink
   bündig untereinanderstehen, muss für Links ein zusätzliches padding
   hinzugefügt werden
 */
.textright a.arrowlink,.textright a.arrowlink:hover {
	padding-right: 4px;	
}

/**
 * Links zum Blättern links und rechts.
 * Kombinieren mit arrowlink, damit allgemeine Eigenschaften
 * übernommen werden.
 */
/* Link nach Links-Pfeil; Buttons, die wie Links aussehen mit vorangestelltem Pfeil */
a.linkback,
a.linkback:link,
a.linkback:visited,
input.linkback,
button.linkback,
input.linkback:hover,
button.linkback:hover {
    background-position: left -3435px;
	display: inline;
}

/* Link vor Rechts-Pfeil; Buttons, die wie Links aussehen mit nachgestelltem Pfeil */
a.linknext,
a.linknext:link,
a.linknext:visited,
input.linknext,
button.linknext,
input.linknext:hover,
button.linknext:hover {
	display: inline;	
}

/***************************************************************************
 * Inhaltliche Aufteilungen 
 ***************************************************************************/

/*---------------------------------------------------------------------
 * Quickfinder
 * Spezifische Einstellungen zum Quickfinder, die noch nicht von Namics
 * abgedeckt wurden
 *---------------------------------------------------------------------*/

/**
 * Der Wert 58px führt dazu, dass zwischen Rahmen des QF und dem Rahmen des Inhalts 8px Abstand ist. 
 */
.spacer-quickfinder {
	margin-bottom: 58px;	
}



/*---------------------------------------------------------------------
 * Key-Visual
 * evtl. ist dieser Bereich bereits bei den Namics-Definitionen erfasst
 * (s. o.)
 *---------------------------------------------------------------------*/

/** 
 * Überschreiben der Definition des Images innerhalb der ID key-visual, damit 
 * im Visual-Bereich ein inkludiertes Bild keinen unteren Rand erzeugt. 
 */
#key-visual img {
  display:block;
  margin:0;
}

/****************************************************/
/* Willkommensbereich                               */
/****************************************************/

.welcomefiku {
	position: absolute;
	z-index: 5000;
	padding: 0px;
	margin-bottom: 0px;
	left: 332px;
	bottom: 8px; 
	width: 400px;
	overflow: hidden;
	color: #fff;
}

h1.welcomefikuFontFixedH1 {
	line-height: 22px;
	font-size: 21px;
	margin-bottom: 4px;
	margin-left: 32px;
	text-indent: -32px;
}

/****************************************************/
/* Aktuelle Meldungen                               */
/****************************************************/
.news {
	/** height: 100px;*/
	right: 12px;
	position: absolute;
	top: 32px;
	width: 208px;
	margin: 0;
	padding: 0;
	z-index: 5000;
}

/*---------------------------------------------------------------------
 * Container für linken Bereich neben Hilfethemen-Contentfenster oben rechts
 * (z. B. Buchungsdaten bei Buchungsabläufen)
 *---------------------------------------------------------------------*/

/* Definitionen für Abschnitt-Breiten: half, container_vorteaser */
div.container_vorteaser {
    width: 726px;
}


/* Definitionen für Abschnitt-Breiten: half, container_vorteaser */
div.maincontentwhitebgbborder div.container_vorteaser {
    width: 708px;
}

/*---------------------------------------------------------------------
 * Login-Info
 * Grauer Streifen mit Login-Informationen ganz oben auf Layer
 *---------------------------------------------------------------------*/

div.logininfo {
    background-color: #f4f4f4;
    margin-bottom: 8px;
    text-align: right;
    height: 16px;
    padding: 4px 8px;
}
div.logininfo span {
    font-size: 0.7em;
}

/*****************************************************************/
/* Wrapper für Buchungsseiten                                    */
/*****************************************************************/

/*
 * boxContainer ergibt ein geschattetes Layer.
 * Sowohl benutzt für Hauptseite als auch Hilfe- und
 * Cross-Selling-Layer (spezifische Überschreibung dort)
 */
.boxContainer {
    margin-left:2px;
    margin-top:-12px;
    position:relative;
    z-index:900;
}
/* Wird gebraucht, wenn mehrere Layer untereinander liegen sollen
 * im Abstand 8px (z.B. Legende).
 */
.boxContainer.nospace {
    margin-top: -4px;   /* weiter nach oben rücken */
    margin-bottom: 0;
}
.boxHeader {
    height: 8px; 
    background-color:transparent !important;
    background: url(../img/schatten/schatten_oben_buchung_schmal_trans.png) no-repeat 
}
.boxContent {
    padding-top: 8px; 
    background:transparent url(../img/schatten/schatten_seiten_buchung_schmal_trans.png) repeat-y;
    /* Notwendig, damit IE7 keine Probleme mit relative innerhalb table bekommt! */
    position: relative; 
}

/** ID 1204 Buttons sollten ganz aussen positioniert sein. */
.boxContent .button-abschnitt {  /* gilt nicht nur für content-buchung, da auch für andere Layer (Cross-Selling...) relevant */
    margin-left: 0;   
    margin-right: 0;
}


.boxHeaderInner,
.boxContentInner {
    margin-left: 14px;
    width: 944px;
}
.boxFooter {
    height: 12px;  
    background:transparent url(../img/schatten/schatten_unten_buchung_schmal_trans.png) no-repeat;
}
/* Überschriebene Wrapper für kaminrechts und Cross-Selling */

.abschnitthalfleft .boxContainer,
.boxContainer.kaminrechts,
.boxContainer.crossselling {
    margin: 0 -6px;
}
.boxContainer.kaminrechts,
.boxContainer.crossselling {
    float: right;
}
.abschnitthalfleft .boxContainer,
.boxContainer.crossselling {
    width: 476px;
}
.boxContainer.kaminrechts {
    width: 210px;
	clear: right;
}
.boxContainer.crosssellingbreit {
    margin: 0 -6px 0 -6px;
}
.boxContainer.kaminrechts .boxHeader{
    background: url(../img/schatten/schatten_oben_hilfe_schmal_trans.png) left top no-repeat;
}
.boxContainer.kaminrechts .boxFooter {
    background: url(../img/schatten/schatten_unten_hilfe_schmal_trans.png) left bottom no-repeat;
}
.boxContainer.kaminrechts .boxContent {
    background: url(../img/schatten/schatten_seiten_hilfe_schmal_trans.png) left top repeat-y;
	padding-top:0;
}
.boxContainer.kaminrechts .boxContentInner {
    width: 182px;   /* 210-2*14 */
}
/* Überschriebene Wrapper für Cross-Selling */
.abschnitthalfleft .boxContainer .boxHeader,
.boxContainer.crossselling .boxHeader {
    background: url(../img/schatten/schatten_oben_crossselling_schmal_trans.png) left top no-repeat;
    margin-top: -4px;   /* Schatten-Rand ausgleichen */
}
.abschnitthalfleft .boxContainer .boxFooter,
.boxContainer.crossselling .boxFooter {
    background: url(../img/schatten/schatten_unten_crossselling_schmal_trans.png) left bottom no-repeat;
}
.abschnitthalfleft .boxContainer .boxContent,
.boxContainer.crossselling .boxContent {
    background: url(../img/schatten/schatten_seiten_crossselling_schmal_trans.png) left top repeat-y;
}
.abschnitthalfleft .boxContainer .boxContentInner,
.boxContainer.crossselling .boxContentInner {
    width: 448px;   /* 476-2*14 */
}


/* Rel. 9.40 Überschriebene Wrapper für HRS Teaser */
.boxContainer.mainshadowbox-bg-image .boxHeader,
.boxContainer.mainshadowbox-bg-image .boxFooter,
.boxContainer.mainshadowbox-bg-image .boxContent,
.boxContainer.mainshadowbox .boxHeader,
.boxContainer.mainshadowbox .boxFooter,
.boxContainer.mainshadowbox .boxContent {
    margin-left: -5px;
    width: 744px;
}
.boxContainer.mainshadowbox-bg-image,
.boxContainer.mainshadowbox {
	margin-top: 0px;
}
.boxContainer.mainshadowbox-bg-image .boxHeader,
.boxContainer.mainshadowbox .boxHeader {
    background: url(../img/schatten/schatten_oben_mainbox.png) left top no-repeat;
    margin-top: -4px;   /* Schatten-Rand ausgleichen */
	padding-top: 0;
    padding-right: 0;
}
.boxContainer.mainshadowbox-bg-image .boxFooter,
.boxContainer.mainshadowbox .boxFooter {
    background: url(../img/schatten/schatten_unten_mainbox.png) left bottom no-repeat;
	height: 10px;
}
.boxContainer.mainshadowbox-bg-image .boxContent,
.boxContainer.mainshadowbox .boxContent {
    background: url(../img/schatten/schatten_seiten_mainbox.png) left top repeat-y;
	padding-bottom: 0;
	padding-top: 0;
    padding-right: 0;
}

.boxContainer.mainshadowbox-bg-image .boxContent.layoutTable,
.boxContainer.mainshadowbox .boxContent.layoutTable {
	margin-bottom: 0;
}

.boxContainer.mainshadowbox-bg-image .boxHeaderInner,
.boxContainer.mainshadowbox .boxHeaderInner {
    width: 723px;   /* 734-2*14 */
	height: 4px;
	background-position: right 4px;
	background-repeat: no-repeat;
	padding-top: 8px;
}
.boxContainer.mainshadowbox-bg-image .boxContentInner,
.boxContainer.mainshadowbox .boxContentInner {
    width: 723px;   /* 734-2*14 */
	background-position: right top;
	background-repeat: no-repeat;
}

/** Beschriftung neben einem großen 40x40-Icon */
.boxContainer.crossselling .bigicontext,
.boxContainer.crosssellingbreit .abschnitthalfleft .bigicontext,
.boxContainer.crosssellingbreit .abschnitthalfright .bigicontext {
    width: 360px;
}

/* Überschriebene Wrapper für Cross-Selling breit */
.boxContainer.crosssellingbreit .boxHeader {
    background: url(../img/schatten/schatten_oben_crossselling_breit.png) left top no-repeat;
    margin-top: -4px;   /* Schatten-Rand ausgleichen */
}
.boxContainer.crosssellingbreit .boxFooter {
    background: url(../img/schatten/schatten_unten_crossselling_breit.png) left bottom no-repeat;
}
.boxContainer.crosssellingbreit .boxContent {
    background: url(../img/schatten/schatten_seiten_crossselling_breit.png) left top repeat-y;
}
.boxContainer.crosssellingbreit .boxContentInner {
    width: 928px;   /* 944-2*8 */
}

/*****************************************************************/
/* Definitionen für Elemente innerhalb des Buchungswrappers      */
/*****************************************************************/

.content-buchung .contentfenster {
    margin-top: 4px;
    float: right;
}
/** Contentfenster für 2-spaltige Best.seiten */
.content-buchung .contentfenster.text {
    float: none;
}
/** Contentfenster über ganze Breite innerhalb Buchungswrapper */
.content-buchung .contentfenster.cf-fullwidth {
	width: auto !important;
	background-color: transparent;
    float: none;
}
.content-buchung div.logininfo {
    top: -4px;  /* nach oben an Rand rücken */
    position: absolute;
    width: 928px;
}

/** nachfolgenden Inhalt unter Logininfo nach unten schieben */
.content-buchung div.logininfospacer {
	height: 18px;
}

/** Überschriften weiter einrücken */
.content-buchung div.header {
    margin-left: 8px;
}

/** Einrückung für erste Spalte.
 *  Bei Buchungsseiten beinhaltet dies auch den Rand von 8px nach links
 */
table.indent div.layoutTable div.col1 {
    padding-left: 24px;
}
/* Opener-Icon muss bei Buchungsseiten linkes padding haben */
#content.content-buchung .opener,
#content.content-buchung .opener:hover, #content.content-buchung .hover .opener,
#content.content-buchung .openerActive,
#content.content-buchung .openerActive:hover, #content.content-buchung .hover .openerActive {
    background-position: 8px 4px;
}

/* nopaddingleft nimmt linken Rand wieder weg, etwa für H2 innerhalb div.header */
#content.content-buchung .nopaddingleft .opener,
#content.content-buchung .nopaddingleft .opener:hover,
#content.content-buchung .nopaddingleft .openerActive,
#content.content-buchung .nopaddingleft .openerActive:hover {
    background-position: 0 4px;
}
/* Opener mit Beschriftung auf rechter Seite z.B. in Tabellen */
#content.content-buchung .opener.buttonright,
#content.content-buchung .opener.buttonright:hover,
#content.content-buchung .opener.buttonright,
#content.content-buchung .opener.buttonright:hover {
    background-position: right top;
    padding-right: 24px;
    height: 24px;
}
    

/**
 * Linker Bereich als DIV ohne umgebenden Abschnitt
 */
.content-buchung div.abschnitthalfleft {
    margin-right: 8px;
}
.content-buchung div.abschnitthalfright {
    margin-left: 488px;
    width: auto;
}
/**
 * Linker Bereich innerhalb eines .abschnitt
 */
.content-buchung .abschnitt .abschnitthalfleft,
.content-buchung table.abschnitthalfleft {
    width: 454px;
}
/* Linker Abschnitt mit reduzierter Breite, so dass rechts
 * noch Radiobuttons hinpassen */
.content-buchung .abschnitt .abschnitthalfleft.withradios,
.content-buchung table.abschnitthalfleft.withradios {
    width: 430px;   /* 454-24 */
}

/* Wenn auch rechter Bereich indent hat, muss linker Bereich entsprechend
   schmaler sein, margin fällt weg.
   Darf für IE aus unbekannten Gründen NICHT wieder über indent definiert sein,
   zieht dann für alle .indent auch ohne .abschnitthalfleft! */
.content-buchung .abschnitt .abschnitthalfleft.abschnittindent,
.content-buchung table.abschnitthalfleft.abschnittindent {
    width: 446px;
    margin: 0;
}

/**
 * Rechter Bereich innerhalb eines .abschnitt
 */
.content-buchung .abschnitthalfright.abschnittindent table.form.indent .col1,
.content-buchung table.form.abschnitthalfright.abschnittindent .col1 {
    width: 176px;   /* wieder entsprechend größer machen */
}
 
/*---------------------------------------------------------------------
 * Site-Actions
 *---------------------------------------------------------------------*/

/**
 * Für den Hauptbereich wird der Aussenrahmen festgelegt und der Innenrahmen wird zurueckgesetzt. 
 */
.site-actionscontent {
	margin: 0px 12px 40px 8px;  
	display:block;
}

.box {
	background-color: #fff;
	border: 1px solid #ccc;
	margin-top: 0px;
	padding: 4px 15px 3px;
}

.site-actions {
	float:right;
	width: 625px;
}

.site-actions ul {
	margin-bottom: 0;
}

.site-actions li {
	float: left;
	margin-right: 40px;
}

.link-print , .link-top {
	background: transparent url(../img/icons.gif) 0 -996px no-repeat;
	font-size: 0.9em;
	padding-left: 24px;
	padding-bottom: 2px;
}

.link-print {
	background-position: 0 -1900px;
}

.link-top {
	background-position: 0 -1950px;
}

/*---------------------------------------------------------------------
 * Slider
 *---------------------------------------------------------------------*/
div.content_slider {
    background:#999; 
    margin-top:10px; 
    margin-bottom:3px; 
    padding:0px
}

.content_slider table {
    margin:0;padding:0
}
.content_slider table tr {
    margin:0;padding:0
}
.content_slider table td.active {
    background:#fff; 
    border:solid 1px #999; 
    border-right:none; 
    border-bottom:none; 
    padding:2px 10px
}
.content_slider table td.passive {
    background:#ccc; 
    border:solid 1px #999; 
    border-right:none; 
    border-bottom:none; 
    padding:2px 10px
}

/*---------------------------------------------------------------------
 * Popup 
 * (z. B. wie bei Hotel-Details)
 *---------------------------------------------------------------------*/
div#popupDoc {
    background: #f2f2f2 url(../img/content-bg.png) left top repeat-y;
    margin: 0 auto;
    padding: 0 0 0 10px;
    position: relative;
    width: 824px;
}

div#popupDoc div#header {
    height: 40px;   
}

div#popupDoc div#header-elements {
    width: 100%;
}

div#popupDoc div#header h1#logo {
    font-size:1em;
    left:24px;
    line-height:100%;
    margin-bottom:0;
    position:relative;
    top:12px;
    width:126px;
}

.popupContent {
    margin-left: 24px;
    margin-top: 8px;
}

.popupfooter {
    clear:both;
    height:2em;
    position:relative;
}

.popupfooter-nav {
    background-color:#FF0000;
    bottom:8px;
    margin:0;
    position:absolute;
    right:0;
    width:216px;
    z-index:99;
}

.popupfooter li {
    display: block;
    float: left;
}

.popupfooter li span,
.popupfooter li a {
    border-left: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font-size: 0.9em;
    line-height: 1;
    margin: 0.7em 0 0;
    padding: 0 10px;
}

.popupfooter li a:hover {
    color: #fff;
}

.popupfooter li a.active {
    font-weight: bold;
}

.popupfooter li span {
    border-left: 0 none;
}

.popupfooter div.bar {
    background-color:#FF0000;
    bottom:0;
    height: 16px;
    left:0;
    position:absolute;
    width:100%;
    z-index:9;
}

#key-visual div.popupbar {
    height: 16px;
    background-color: #f00;
    left: 0;
    position: absolute;
    top: 0;
    width: 216px;
    z-index: 100;
}

.popupSite-actionscontent a.link-close,
.popupSite-actionscontent a.link-print {
    background: transparent url(../img/icons.gif) -52px -1801px no-repeat;
    margin-right: 48px;
    font-size: 0.7em;
    line-height: 1.4em;
    padding-left: 24px;
    padding-bottom: 2px;
    padding-top: 2px
}

.popupSite-actionscontent a.link-print {
    background-position: 0 -1900px;
}

.popupSite-actionscontent {
    display:block;
    margin:0 12px 16px 24px;
}

/*
 * ********************************************************************
 * Banner quer über Seiteninhalt halb rechts
 * ********************************************************************
 */

/* Aussenrum muss ein DIV mit position gesetzt werden, damit 'absolut' sich an dem orientiert
 * und nicht am Seitenrand
 */
div.relative-rahmen {
    position: relative;
}
div.relative-rahmen img.banner-halbrechts {
    position: absolute;
    left: 680px;
    top: -54px;
    z-index: 1000;
}
/**
 * DIV links davon, dass NICHT von dem Banner überdeckt wird.
 * Andere Inhalte sollen gerade transparent überdeckt werden!
 */
div.links-von-banner-halbrechts {
	width: 672px;
}

/*
 * ********************************************************************
 * Hilfsklassen
 * ********************************************************************
 */

/* für Markierungen: einzelner grosser Text */
.big {
    font-size: 1.4em;
}

/* Schwarzer fetter Hinweistext */
.boldblack {
	color: #000000;
	font-weight: bold;
}

/*
.boldred {
	color: #f00;
	font-weight: bold;
}
*/

/* Roter Fehler-/Hinweistext */
.errormsg,
.boldred {
	color: #f00;
	font-weight: bold;
}
span.errormsg {
	font-size: 0.7em;
}
/* Fehlertext, der nicht über ganze Breite geht; hilfreich für Einbettung
   in horizontale DIVs
 */
span.errormsg.narrow {
	max-width: 400px;
}
table span.errormsg {
	font-size: 1em;
}

/* bold wieder aufheben, z.B. für label oder th */
.fontnormal {
	font-weight: normal;
}
.underline {
    text-decoration: underline;
}

/* Erfolg-Meldungen, positive Geldbeträge (Gutschein, eCoupon etc) */
.successmsg {
	color: #6E910C;
}

/**
 * ID 1634 Absprache mit FSa:
 * Wenn disabled Elemente bereits auf dunklem Hintergrund sind,
 * müssen sie zur besseren Lesbarkeit dunkler dargestellt werden.
 * Allgemeine Def. siehe bahn.css.
 */
.bgcolorformbody .disabled, .bgcolorformbody a.disabled, .bgcolorformbody a.disabled:hover {
	color: #768086;
}

.centered {
	text-align: center;
}
.textright {
	text-align: right;
}

.textleft {
	text-align: left;
}

.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}
.clearleft {
	clear: left;
}
/* leeres, unsichtbares DIV, um links-float zu löschen */
div.clearleftempty {
	clear: left;
	width: 0;
	height: 0;
}
.clearright {
	clear: right;
}
/* leeres, unsichtbares DIV, um rechts-float zu löschen */
div.clearrightempty {
	clear: right;
	width: 0;
	height: 0;
}
.noclear {
	clear: none;
}
.hidden, div.layoutTable.hidden, div.tableRow.hidden {
	display: none;
}
.nopadding {
	padding: 0 !important;
}
.notoppadding,
div.notoppadding,
div.tableCell.notoppadding, table.form .notoppadding {
	padding-top: 0;
}
.nobottompadding, div.nobottompadding, table.form .nobottompadding {
	padding-bottom: 0;
}
.toppadding, table.form div.toppadding {
	padding-top: 8px;
}
.nomargin {
	margin: 0;
}
.notopmargin {
	margin-top: 0;
}
.nobottommargin, table.nobottommargin, div.layoutTable.nobottommargin {
	margin-bottom: 0;
}
.bottommargin-big, table.bottommargin-big {
	margin-bottom: 16px;
}
.bottommargin, table.bottommargin {
	margin-bottom: 8px;
}
.bottommargin-tiny, table.bottommargin-tiny {
	margin-bottom: 2px;
}
.bottommargin-small, table.bottommargin-small {
	margin-bottom: 4px;
}
.bottompadding, table.form div.bottompadding {
	padding-bottom: 8px;
}
.bottompadding-small {
	padding-bottom: 4px;
}
.bottompadding-tiny {
    padding-bottom: 2px;
}
.leftpadding, table.form div.leftpadding {
	padding-left: 8px;
}

.noleftpadding {
	padding-left: 0 !important;
}
.norightpadding {
    padding-right: 0 !important;
}

.leftmargin {
	margin-left: 8px;
}
.rightmargin {
	margin-right: 8px;
}
.rightmargin-small {
    margin-right: 4px;
}
.topmargin-small {
	margin-top: 4px;
}
.topmargin {
	margin-top: 8px;
}
.topmargin-big {
    margin-top: 16px;
}
.negative-topmargin-big {
    margin-top: -14px;
}

.spanall {
	width: 100%;
}
.auto {
	width: auto;
}
.nofloat {
	float: none !important;
}
.block {
	display: block;
}
.noblock {
	display: inline !important;
}
.nowrap {
	white-space: nowrap;
}
.wordwrap {

	font-weight: bold;
	text-align: right;
	/*width: 6em;*/
	white-space: normal;
	
}
.linedown {
	border-bottom: 2px solid #ccc;
	height: 2px;
}
.linedown-slim {
    border-bottom: 1px solid #ccc;
    height: 1px;
}

/* Kleiner Abstand, neue Zeile */
div.clearbordersmall {
	clear: both;
	height: 4px;
}
/* Ohne clear */
div.bordersmall {
	height: 4px;
}
/* Normaler Abstand, neue Zeile */
div.clearborder {
	clear: both;
	height: 8px;
}
div.clearborder-big {
	clear: both;
	height: 16px;
}
div.borderbig {
	height: 8px;
}
/* Zeile in Tabelle mit zusätzlichem Abstand nach oben */
tr.divider td {
	height: 16px;
}
tr.dividersmall td {
	height: 8px;
}

/**
 * Zusätzliche DIVs oder Platzhalter zur korrekten
 * Ausrichtung von Inhalt bündig mit icon-Tabellen vom Typ .indent
 */
.icongridleft {
	float: left;
	background-image: none;		/* default für IE wichtig */
}

.icongridleft img {
	margin: 0;		/* bottom-margin für alle img aus bahn.css überschreiben */
}


.icongridleft input.checkbox, .icongridleft input.radio {
	margin-right: 0;
}

.icongridright {
	float: none;
	margin-left: 24px;
	background-image: none;		/* default für IE wichtig */
}

.icongridright-legende {
    float: none;
    margin-left: 40px;
    background-image: none;     /* default für IE wichtig */
}

.resinkl-legende {
    background-image: url("../img/icons/res_incl_grau_29x17.png"); 
    background-repeat: no-repeat;
    width: 30px;
    height: 17px;
}

/* Bei eingerückten Tabellen Einrückung rückgängig machen */
table.indent .col1 .icongridleft, table.indent .col3 .icongridleft {
	margin-left: -24px;
}
table.indent .col1 .icongridright, table.indent .col3 .icongridright {
	margin-left: 0;
}
/**
 * DIV bündig mit Tabellen-Inhalt
 * Hiermit kann man DIVs nebeneinandersetzen, die gleiche
 * Abstände wie table.form-Tabellenspalten haben.
 */
div.horizontal {
	padding: 4px 8px;
	float: left;
	background-image: none;		/* default für IE wichtig */
}
/* Labels bekommen in XHTML falsche Ausrichtung */
.icongridleft img, 
.icongridleft label,
.icongridright label,
.icongridright-legende label, .icongridright-legende label a,
.icongridleft label a, .icongridleft label a u,
.icongridright label a, .icongridright label a u {
    vertical-align: top;
}
/* Def. für labels in icongrid wieder wegnehmen */
div.horizontal label, div.horizontal label a, div.horizontal label a u,
div.tableCell label, div.tableCell label a, div.tableCell label a u {
    vertical-align: baseline;
    /*     line-height: 1.6em; ?? */
    
}
/* Das label für radio oder checkbox wird etwas mittiger positioniert*/
td .icongridright > label,
input.radio + label,
input.checkbox + label,
div.tableCell > label.radio,
div.tableCell .icongridright > label {
    vertical-align: middle;
}

table.form div.horizontal {
	padding: 0 8px 0 0;		/* innerhalb einer Tabelle nur rechts padding nötig. */
}
/**
 * Einheitliches Look&Feel für Eingabeelemente
 */
div.horizontal input, div.tableCell input.radio {
	margin: 4px 4px 2px 0;
}
/* Nicht für Links, Buttons */
div.horizontal input.arrowlink, div.horizontal input.button,
div.horizontal input.nomargin {
	margin: auto;
}
div.horizontal input.radio, div.tableCell input.radio {
	vertical-align: -0.3em;
}

.helperTextAlignCenter {
	text-align: center;
}


/***************************************************************************
 * Für Entwicklung,
 * temporäre Ablage für momentan ungenutzten Code
 ***************************************************************************/

/*
 * Für Beschriftungen in Templates
 */
div.templabel {
	font-size: 9px;
}

/**
 * Hilfe-Icon Fragezeichen rot.
 */
a.iconHilfe, span.iconHilfe {
	background: 0 top no-repeat;
	background-image: url(../img/icons/hilfe_rot_16x16.gif);
	padding: 2px 4px 0px 12px;
}

/**
 * Info-i und Hilfe-?
 */
img.iconInfo {
	vertical-align: middle;
}

img.iconRelation {
    padding-left: 8px;
    padding-right: 8px;
}

.loginfield {
	width: 100px;
}

.twodigit {
	width: 1.25em;	/*14px;*/
}
.fourdigit {
	width: 2.5em;	/*28px;*/
}

/** Kalender im Sparpreis */
#ps-trip-type input.date {
    width: 75px;
}

#ps-trip-type div.calendar {
    margin-left: 8px;
}

#country-selector {
    width: 136px;
}

/** Label, das innerhalb Tabelle etc. so groß wird wie die Definition von h2 */
#content .text-h2 {
    font-size: 16px;
    font-weight: normal;
}
/** Ausgleich für ein Element neben einem .text-h2, damit unten bündig */

#content .bottom-h2 {
    margin-top: 0.33em;
}

/** 0.7em bei verschachtelten Tabellen wieder zurücknehmen */
#content div.layoutTable div.layoutTable,
div.modallayer-layer div.layoutTable div.layoutTable {
    font-size: 1em;
}

#content div.tableRow.notoppadding div.tableCell {
    padding-top: 0;
}
#content div.tableRow.nobottompadding div.tableCell {
    padding-bottom: 0;
}

#content .white td.inputtabelle {
    background-color: #D6DFF2; /* webclient.css Zeile 868 */
}
/** Liste mit großen Aufzählungspunkten als Icons */
#content ul.aufzaehlung-gross li {
    background-position: 0 center;
    background-repeat: no-repeat;
    padding: 8px 0 8px 49px;
}
/** Aufzählung mit großen Abhakungs-Punkten */
#content ul.aufzaehlung-gross.erledigt li, #content ul.aufzaehlung-gross li.erledigt {
    background-image: url(../img/icons/erledigt_gruen_49x24_mittig.png);
}
/** Aufzählung mit kleinen Abhakungs-Punkten */
#content ul.aufzaehlung.erledigt li, #content ul.aufzaehlung li.erledigt {
    background-image: url(../img/icons/erledigt_gruen_16x16.gif);
    padding: 0 4px 4px 24px;
}

/** Liste mit kleinen Aufzählungspunkten als Icons */
#content ul.aufzaehlung-klein li {
    background-position: 0 center;
    background-repeat: no-repeat;
    padding: 6px 0 6px 20px;
}
/** Aufzählung mit kleinen Abhakungs-Punkten */
#content ul.aufzaehlung-klein.erledigt li, #content ul.aufzaehlung-klein li.erledigt {
    background-image: url(../img/icons/erledigt_gruen_14x12_ohne_bg.png);
}

/**
 * 2-spaltiger Seitenaufbau mit Eingabefeldern
 */

/** Tabelle mit 2 Columns */
#content div.layoutTable.twocols .defaultcol {
    width: 240px;
}
#content div.layoutTable.twocols .defaultcol select {
    width: 240px;   /* bei input-Feldern kommen noch 2x3px internes padding und 2x1px Rahmen dazu, damit die gleich aussehen, muss selct-Box größer sein! */
}
#content div.layoutTable.twocols .defaultcol input {
    width: 232px;   /* 240 - 8px Rand rechts zusätzlich zu den 8px padding */
}
#content div.layoutTable.twocols .defaultcol input.twodigit {
    width: 32px;
}
#content div.layoutTable.twocols .defaultcol input.fourdigit {
    width: 64px;
}
/** Zelle mit halber Breite, so dass 2 Eingabefelder nebeneinander
 *  bündig mit Rand eines col1-Elements abschließen
 */
#content div.layoutTable.twocols .halfcol {
    width: 112px;   /* 240 /2 - padding 8px */
}
#content div.layoutTable.twocols .halfcol select {
    width: 112px;
}
#content div.layoutTable.twocols .halfcol input {
    width: 104px;
}

#content div.layoutTable.twocols .plzcol {
    width: 63px;
}
#content div.layoutTable.twocols .plzcol input {
    width: 55px;
}
#content div.layoutTable.twocols .ortcol {
    width: 161px;   /* .halfcol input->width + (halfcol input->width - .plzcol input->width) */
}
#content div.layoutTable.twocols .ortcol input {
    width: 153px; /* .halfcol input->width + (halfcol input->width - .plzcol input->width) */
}
#content.content-buchung div.layoutTable.twocols .datumcol select.tag,#content.content-buchung div.layoutTable.twocols .datumcol select.monat {
    width: 64px;
    margin-right: 4px;
}
#content.content-buchung div.layoutTable.twocols .datumcol select.jahr {
    width: 96px;
}
/** 1 Zelle über ganze Breite */
#content div.layoutTable.twocols .wholecol input, #content div.layoutTable.twocols .wholecol select {
    width: 488px;
}

/** 
 * Abschnitt mit Hintergrundbild, das rechts oben angezeigt wird 
 */
#content div.abschnitt-bg-image.inputtabelle {
    background-color:  #D6DFF2;
}

#content div.abschnitt-bg-image,
#content div.anschlussmobilitaet-bg-image,
#content div.umweltplus-bg-image,
#content div.hotel-bg-image, #content div.hotel-bg-image-en,
#content div.crmkampagne-bg-image {
    background-position: right top;
    background-repeat: no-repeat;
}

/********************************************************************
 * Fortschrittsanzeige
 *******************************************************************/

#content ul.fortschritt-buchung {
    margin: 2px;
}

#content ul.fortschritt-buchung li {
    cursor: default;
    float: left;
    height: 27px;
    background-color: #e4e4e4;
    margin: 0;
    font-size: 11px; /* Fontgröße fest */
}

#content ul.fortschritt-buchung li.kurz {
    background-image: url("../img/bahnbuchen/fortschrittsanzeige_bg_kurz.png");
    width: 106px;
}

#content ul.fortschritt-buchung li.lang {
    background-image: url("../img/bahnbuchen/fortschrittsanzeige_bg_lang.png");
    width: 144px;
}

#content ul.fortschritt-buchung li.last {
    background-image: url("../img/bahnbuchen/fortschrittsanzeige_bg_bestaetigung.png");
    width: 119px;
}

#content ul.fortschritt-buchung li.checked {
    background-position: 0 -54px;
}

#content ul.fortschritt-buchung li.active {
    background-position: 0 -27px;
    background-color: #E4421C;
    color: #fff;
    font-weight: bold;
}

#content ul.fortschritt-buchung li input, #content ul.fortschritt-buchung li div {
    border: none;
    display: block;
    margin: 0px;
    padding: 6px 0 0 24px;
    background: transparent;
    overflow: visible;
    /* sonst sind die Titeltexte im IE zentriert */
    text-align: left;
}

#content ul.fortschritt-buchung li input {
    cursor: pointer;
}

#content ul.fortschritt-buchung li input:hover, #content ul.fortschritt-buchung li input:focus, #content ul.fortschritt-buchung li input:active, #content ul.fortschritt-buchung li .selected {
    color: #f00;
    text-decoration: underline;
}

#content tr.preiszeile td {
    font-weight: bold;
    vertical-align: bottom;
}

/** Allgemeine Elemente, die auch auf anderen Seiten als in der neuen Buchungsstrecke
 * vorkommen können.
 */
/** Flott-Ausweis-IDs */
#content.content-buchung img.idkarte-icon {
    width: 62px;
    height: 42px;
}

#content.content-buchung img.idkarte-icon-sofort {
    width: 112px;
    height: 42px;
}

#content.content-buchung div#idkarten .tableCell.first {
    width: 175px;
} 
#content.content-buchung div#zahlungsart .tableCell.first {
    width: 185px;
}

#content.content-buchung div#idkarten span.prefix {
	float: left;
	width: 25px;
	margin-right: 5px;
}

#content.content-buchung div#idkarten input.withprefix {
	width: 202px;
}

/** TODO ID 1204 @ADe: doch lieber px statt % für Breiten verwenden? */
#content.content-buchung div.tableCell select.tag {
    width: 27%;
    margin-right: 2%;
}
#content.content-buchung div.tableCell select.monat {
    width: 27%;
    margin-right: 2%;
}
#content.content-buchung div.tableCell select.jahr {
    width: 27%;
}
#content.content-buchung div.tableCell input.panummer {
    width: 56px;
}

/** Spalte nach Radiobutton und Icon, bis rechter Rand */
#content.content-buchung div#zahlungsart div.col3 {
	width: 438px;
}
/** Spalte nach Radiobutton, bis rechter Rand */
#content.content-buchung div#zahlungsart div.col2plus3 {
    width: 514px;
}
#content.content-buchung div#idkarten div.col2plus3 {
	width: 524px;
}
/** Spalte die erste beiden Columns umfasst */
#content.content-buchung div#zahlungsart div.col1plus2 {
    width: 382px;
}


/**
 * Zahlungsdaten
 */
#content.content-buchung div#zahlungsart div.smallcol,
#content.content-buchung div#zahlungsart div.smallcol select,
div#zahlungsart div.smallcol,
div#zahlungsart div.smallcol select {
	width: 180px;
}
#content.content-buchung div#zahlungsart div.smallcol input,
div#zahlungsart div.smallcol input {
    width: 172px;
}
#content.content-buchung div#zahlungsart div.bigcol,
div#zahlungsart div.bigcol {
    width: 318px;
}
#content.content-buchung div#zahlungsart div.bigcol input,
div#zahlungsart div.bigcol input {
    width: 172px;
}
#content.content-buchung div#zahlungsart div.smallcol select.tag,
#content.content-buchung div#zahlungsart div.smallcol select.monat,
div#zahlungsart div.smallcol select.tag,
div#zahlungsart div.smallcol select.monat {
	width: 76px;
	margin-right: 4px;
}
#content.content-buchung div#zahlungsart div.defaultcol select.tag,
#content.content-buchung div#zahlungsart div.defaultcol select.monat,
div#zahlungsart div.defaultcol select.tag,
div#zahlungsart div.defaultcol select.monat {
    width: 64px;
    margin-right: 4px;
}
#content.content-buchung div#zahlungsart div select.jahr,
div#zahlungsart div select.jahr {
    width: 96px;
}
#content.content-buchung div#zahlungsart div input.pruefziffer,
div#zahlungsart div input.pruefziffer {
    width: 48px;
	margin-right: 8px;
}

#content.content-buchung div#zahlungsart div.pruefziffercol,
div#zahlungsart div.pruefziffercol {
    width: 64px;
	padding-right: 0;
}

#content.content-buchung div#zahlungsart div.pruefzifferinfocol,
div#zahlungsart div.pruefzifferinfocol {
    width: 246px;
}

.button-inside span.button-border .button-big-height,
.button-inside span.button-border input.button-big-height {
    padding: 5px 5px;
}

div#kreditkarte.kreditkartetyp {
	padding-top: 4px;
	height: 15px;
	font-weight: bold;
}

/* Registrierung : Kreditkartendaten */
div#zahlungsart.regkkdaten div.first {
	display: none;
}

/* Einstellungen für fixcolwidth-small
 */
div.container_vorteaser table.form.fixcolwidth-small .col2, 
div.container_vorteaser table.form.fixcolwidth-small .col3, 
div.container_vorteaser table.form.fixcolwidth-small .col4 {
	width: 152px;	/* 176px von .form überschreiben, für IE ist important evtl. wichtig! */
}


/********************************************************************
 * Modallayer Reisedaten und Warenkorb
 *******************************************************************/
div#reisedaten-modallayer-layer {
    width: 800px;
}

div#reisedaten-modallayer-layer div.hrseparator {
    line-height: 20px;
}

div#reisedaten-modallayer-layer .hinfahrt {
    background-image: url("../img/icons/hinfahrt_grau_16x16.png");
}

div#reisedaten-modallayer-layer .rueckfahrt {
    background-image: url("../img/icons/rueckfahrt_grau_16x16.png");
}

div#reisedaten-modallayer-layer .verbindung .col1 {
    width: 290px;
}

div#reisedaten-modallayer-layer .verbindung .col2 {
    width: 120px;
}

div#reisedaten-modallayer-layer .verbindung .col3,
div#reisedaten-modallayer-layer .verbindung .col4 {
    width: 110px;
} 

div#warenkorb-modallayer-layer {
    width: 800px;
}

div#warenkorb-modallayer-layer table.warenkorb,
div#warenkorb-modallayer-layer div.container_vorteaser {
    margin: 8px;
	width: 780px;
}

div#warenkorb-modallayer-layer table.warenkorb .gesamtpreis {
    font-size: 1.5em;
}

div#warenkorb-modallayer-layer table.warenkorb .middle {
    vertical-align: middle;
}

div#warenkorb-modallayer-layer .teilpreis {
    margin: 8px;
    padding: 8px
}
div#warenkorb-modallayer-layer .teilpreis .withicon {
    background-position: 0px 4px;
    padding-left: 24px;
}
    
div#warenkorb-modallayer-layer .teilpreis .col2,
div#warenkorb-modallayer-layer .teilpreis .col3 {
    width: 274px;
}
div#warenkorb-modallayer-layer .teilpreis .col1 {
    width: 168px;
}

/** Tabelle mit 2 Columns etwa einundhalbfacher Breite */
#content div.layoutTable.twocols .oneandhalfcol {
    width: 350px;
}
#content div.layoutTable.twocols .oneandhalfcol select {
    width: 350px;   /* bei input-Feldern kommen noch 2x3px internes padding und 2x1px Rahmen dazu, damit sie gleich aussehen, muss selcet-Box größer sein! */
}
#content div.layoutTable.twocols .oneandhalfcol input {
    width: 342px;   /* 350 - 8px Rand rechts zusätzlich zu den 8px padding */
}

/** Kamin rechts */
#content.content-buchung .kaminrechts div.header {
    margin-left: 0;
    padding-top: 0;
}

#content.content-buchung .kaminrechts div.header a.arrowlink {
    margin-top: 0.3em;
	min-height: 0;
}

#content.content-buchung .kaminrechts div.header .info-right {
    padding-top: 2px;
}

#content.content-buchung .kaminrechts.reisedaten .reisezeit {
    color: #666;
}

#content.content-buchung .kaminrechts.warenkorb .gesamtpreis {
    font-size: 1.25em;
    text-align: right;
    width: 96px;
}

/****************************************************
 * CAPTCHA
 ****************************************************/

#captcha-group input {
    width: 152px;
}

/* Fehlermeldung wenn captcha validierung nicht erfolgreich */
#captcha-group div.errormsg {       
    width: 300px;
}

/****************************************************
 * Image Submit Button: <input type="image" ...>
 ****************************************************/

input.image-enabled,
input.image-disabled {
    border: none;
    border-right: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;
    margin: 0;
    padding: 1px;
    position: relative;
    text-decoration: none;
    top: -1px; 
}

input.image-enabled:hover {
    border-right: none !important;
    border-bottom: none !important;
    border-left: 1px solid #b0b0b0;
    border-top: 1px solid #b0b0b0;
    cursor: pointer;
} 

input.image-disabled:hover {
    border: none;
    border-right: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;
    cursor: pointer;
}

/****************************************************
 * Beschriftung neben "Jetzt kaufen"-Button, siehe pruef.jsp oder bahncard_ersatzkarte.jsp
 ****************************************************/
.kaufenhinweis {
    width: 180px;
    font-size: 0.6em;
}

div#captcha div.tableCell #captchaImage,
div#captcha div.tableCell #captchaloadImage {
    padding-top: 4px;
}

/****************************************************
 * Meine Bahn Navigation Toolbar
 * background,border,margin siehe maincontentwhitebgbborder
 ****************************************************/
#meinebahnnavigation {
    background-color: #ffffff;
    border: 1px solid #ccc;
    margin: 16px 11px 16px 7px;
    height: 84px;
    background-image: url(../img/bg_funktionalitaeten.png);
    background-repeat: repeat-x;
    background-position: left top;
}

#meinebahnnavigation .link {
    display: block;
    float: left;
    width: 140px; 
    height: 25px;
    padding-top: 59px;
    margin-left: 0px;
    margin-right: 20px;
    text-align: center; 
    font-size: 0.7em;
    font-weight: bold;
    color: #333333; 
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left top;    
}

#meinebahnnavigation a:hover, #meinebahnnavigation a:active, #meinebahnnavigation .active {
    background-position: left bottom;
}

#meinebahnnavigation #startseite {
    margin-left: 10px;
    background-image: url(../img/btn_startseite.png);      
}

#meinebahnnavigation #buchungsservices {
    background-image: url(../img/btn_buchungsservices.png);
}

#meinebahnnavigation #bahncardservices {
    background-image: url(../img/btn_bahncardservices.png);
}

#meinebahnnavigation #meinebuchungen {
    background-image: url(../img/btn_meinebuchungen.png);
}

#meinebahnnavigation #meinenewsletter {    
    background-image: url(../img/btn_mein_newsletter.png);
}

#meinebahnnavigation #kundenbindungkampagnen {
    margin-right: 10px;
    background-image: url(../img/btn_kampagnencenter.png);
}

/****************************************************
 * Meine Bahn Breadcrumbs
 * Überschreibungen/Erweiterungen zu Def. in bahn.css
 ****************************************************/

#breadcrumb {
    padding-top: 0;
    height: 16px;
    margin: 6px 8px 16px;
}
.content-buchung #breadcrumb {
    margin-bottom: 18px;
}

/***************************************************************************
 * Definitionen für Medium Drucker.
 * Überschreibungen allgemeiner Definitionen in webclient.css
 * für den Ausdruck.
 ***************************************************************************/
@media print {
    /**
     * Kein Rand um maincontentwhitebgbborder 
     */
    .maincontentwhitebgbborder {
        border: none;
        padding: 0;
        margin: 0;
    }
    
    /** Keine Ränder links von Tabelle */
    table.form thead th, table.form thead td, table.form tfoot th, table.form tfoot td,
    table.form tbody th, table.form tbody td, table.whiteTable tbody th, table.whiteTable tbody td {
        padding-left: 0;
    }
    
    /** Element, das nicht gedruckt werden soll  */
    .notprintable {
        display: none;
    }

    /**
     * Meine Bahn Portal: Es wird kein CRM@POC Teaser per Javascript generiert, 
     * also Abstand nach oben anzeigen, damit erster Service-Block nicht nach 
     * oben herausragt
     */
    .portalcontentleft,
    .maincontent.keyvisualHoch .portalcontentcenter,
    .maincontent.keyvisualHoch .portalcontentright {
        margin-top: 0;
    }
    
    /**
     * Meine Bahn Portal: Kein Floating, mittlerer und rechter Kamin sollen 
     * untereinander dargestellt werden
     */
    .portalcontentleft,
    .maincontent.keyvisualHoch .portalcontentcenter, 
    .maincontent.keyvisualHoch .portalcontentright {
        float: none;
        clear: left;
    }
    
}

/**
 * Auch in einer Druckansicht (für media Screen etc.) Elemente unterdrücken, die nicht ausgedruckt werden sollen.
 */
div.druckansicht .notprintable {
    display: none;
}

/***************************************************************************
 * Seiten: Upsell & PSC Angebotsdetails
 ***************************************************************************/

/* ***** Reisedaten / Hin- und Rueckfahrt ***** */

#angebot-reisedaten-header table.details tbody td {
    padding-bottom: 8px;
}

/* Label */
#angebot-reisedaten-header table.details .col1 {
    width: 120px;
}

/* Bahnhof/Haltestelle */
#angebot-reisedaten-header table.details .col2 {
    width: 182px;
}

/* Datum */
#angebot-reisedaten-header table.details .col3 {
    width: 62px;
}

/* Zeit */
#angebot-reisedaten-header table.details .col4 {
    width: 42px;
}

/* Dauer */
#angebot-reisedaten-header table.details .col5 {
    width: 42px;
}

/* Umsteige */
#angebot-reisedaten-header table.details .col6 {
    width: 32px;
}

#angebot-reisedaten-header table.details .hintitle {
    background-image: url("../img/icons/hinfahrt_grau_16x16.png");
}

#angebot-reisedaten-header table.details .ruecktitle {
    background-image: url("../img/icons/rueckfahrt_grau_16x16.png");
}

#angebot-reisedaten-header table.details .reisendetitle {
    background-image: url("../img/icons/reisende_grau_16x16.png");
}

/* ***** Angebotsdetails Tabelle ***** */

#angebot-reisedaten div.header {
    padding: 12px 8px 0 0;
}

#angebot-reisedaten h2.firstclass { 
    background-color: #8F949E;
    color: #FFFFFF;
    margin-bottom: 2px;
    margin-top: 8px;
    padding-bottom: 7px;
    padding-left: 0;
}

#angebot-reisedaten h2.secondclass {    
    background-color: #D5D5D5;
    color: #666666;
    margin-bottom: 2px;
    margin-top: 8px;
    padding-bottom: 7px;
    padding-left: 0;
}

#angebot-reisedaten h2.firstclass img.number,
#angebot-reisedaten h2.secondclass img.number {
    margin: 6px 4px 0 31px;
    vertical-align: text-bottom;
}

#angebot-reisedaten h2.firstclass span, 
#angebot-reisedaten h2.secondclass span {
    font-size: 0.7em;
    font-weight: bold;
    margin-left: 30px;
}

#angebot-reisedaten table.mehrangebote th {
    border-bottom: 2px solid #FFFFFF;
    font-weight: bold;
}

#angebot-reisedaten table.mehrangebote td {
    border-bottom: 2px solid #FFFFFF;
    background-color: #EDF1FA;
    line-height: 1.33em;
    padding-bottom: 8px;
    padding-top: 8px;
    vertical-align: top;
}

#angebot-reisedaten table.mehrangebote td.noborder {
    border-color: #EDF1FA;
}

#angebot-reisedaten table.mehrangebote .col1 {
    background-image: url("../img/icons/viereck_8x8.png");
    background-repeat:no-repeat !important;
    background-position: 8px 10px;
    padding-top: 8px;
    vertical-align: top;
    width: 8px;
    background-color: #E4E4E4;
}

#angebot-reisedaten table.mehrangebote .col2 {    
    padding-left: 4px;
    padding-right: 4px;
    width: 120px;      
}

#angebot-reisedaten table.mehrangebote .col3,
#angebot-reisedaten table.mehrangebote .col4 {
    padding-left: 4px;
    padding-right: 4px;
    width: 270px;
}

#angebot-reisedaten table.mehrangebote .col5 {
    background-color: #D6DFF2;
    font-size: 1.3em;
    font-weight: bold;
    vertical-align: middle; 
    width: 120px;   
}

#angebot-reisedaten table.mehrangebote .resinkl {
    background-image: url("../img/icons/res_incl_grau_29x17.png");
    background-position: right center;
    background-repeat: no-repeat; 
}

#angebot-reisedaten table.mehrangebote .col6 {
    background-color: #D6DFF2;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 6px;
    width: 84px; 
}

#angebot-reisedaten table.mehrangebote .button-inside {
    padding-bottom: 0px;
}

/* Angebotsdetails Reisedaten-Layer */ 

div#angebotsdetails-reisedaten-modallayer {
    width: 726px;
}

div#angebotsdetails-reisedaten-content .hintitle {
    background-image: url("../img/icons/hinfahrt_grau_16x16.png");
}

div#angebotsdetails-reisedaten-content .ruecktitle {
    background-image: url("../img/icons/rueckfahrt_grau_16x16.png");
}

div#angebotsdetails-reisedaten-content table.verbindung .colbhf {
    width: 290px;
}

div#angebotsdetails-reisedaten-content table.verbindung .coldatum {
    width: 120px;
}

div#angebotsdetails-reisedaten-content table.verbindung .colzeit {
    width: 110px;
}

div#angebotsdetails-reisedaten-content div.hrseparator {
    line-height: 20px;
}

/* Legende */

div.angebot-legende .icongridleft {
    float: none;
}

/****************************************************
 * Anpassungen fuer Seiten mit Einstiegen in verschiedene Services des Portals
 * siehe Meine Buchungsservices (PK) oder Verteilerseiten (FiKu)
 ****************************************************/

.maincontentwhitebgbborder.services-teasers {
    padding: 12px;
}

div.service-teaser {
    float: left;
    padding: 8px;
    width: 446px;
    max-width: 446px;
    overflow: hidden;
    border: 1px solid #ccc;
    margin-bottom: 8px;
    border-collapse: collapse;
}

div.service-teaser div.header {
    height: 20px;
    padding-top: 4px;
}

div.service-teaser .withicon {
    background-position: 0 0;
}