@charset "ISO-8859-1";
/***************************************************************************
 * Ablauf/Webanwendung Sparpreis-Finder (Preissuche-Client)
 ***************************************************************************/

/***************************************************************************
 * allgemeine Besonderheiten für Preissuche-Seiten
 ***************************************************************************/

a.linknextright, a.linknextright:hover {
	padding:0 12px 0 0;	
	background: url("../img/pfeil_rechts.gif") no-repeat scroll right -11px  transparent;	
}

/***************************************************************************
 * Seite Angebotssuche
 ***************************************************************************/

/* Textfeld fuer Start und Ziel Bahnhof */
#ps-suche input.bhf-field {
    width: 300px;
}

#ps-suche input.bhf-field-ausland {
    width: 220px;
}

#ps-suche select.bhf-field {
    width: 308px;
}

#ps-suche div.col2 {
    width: 400px;
}

#ps-suche #ps-trip-type .col2 {
    width: 100px;
}

#ps-suche #ps-trip-type .col3 {
    width: 120px;
}

#ps-suche #ps-hinfahrt .col2, 
#ps-suche #ps-rueckfahrt .col2 {
    width: 155px;
	padding-right: 4px;   
}

#ps-verbind .col2 {
    width: 16px;
    padding-right: 0px;
}

#ps-suche #ps-hinfahrt .col3, 
#ps-suche #ps-rueckfahrt .col3 {    
    padding-left: 0px; 
    padding-right: 0px;
    width: auto;
}

#ps-suche #ps-trip-type .col4 {
    width: auto; 
    padding: 0px; 
}

/* Fahradmitnahme icon */
#ps-verbind .fahrrad {
    background: url("../img/icons/fahrrad_grau_16x16.png") no-repeat scroll right center transparent;
    padding: 1px 24px 1px 0;	
}

/* Layer Laenderauswahl fuer Auslandssuche */

div#laenderauswahl-content {
    width: 700px;
}

div#laenderauswahl-content .button-abschnitt {
    margin: 8px;
}

div#laenderauswahl-content div.col1 {
    width: 200px;	
}

/****************************************************
 * REISEPROFILDATEN: @todo 466 VERSCHIEBEN, 
 * da allgemein und nicht nur PREISSUCHE abhängig
 * ebenso Captcha!
 ****************************************************/

#rpd-container div.rpd-number-desc p {
    line-height: 1.4;
    margin-bottom: 0.3em;
}

#rpd-container ul.travellers {
    margin-bottom: 0;
}

#rpd-container div.rpd-number-desc {
    background: #fff;
    border: 1px solid #ccc;
    padding: 20px 7px 7px;
    width: 186px;
}

#rpd-container li.rpd-number-active div.rpd-number-desc {
    left: 0;
}

#rpd-container div.rpd-number-desc a.closeButton {
    float: right;
    height: 12px;
    padding: 0;
    position: absolute;
    right: 7px;
    top: 5px;
    width: 9px;
}

#rpd-container label {
    display: inline;
    margin-bottom:8px;
    margin-right:8px;
    padding: 0;
    vertical-align: middle;
    font-weight: normal;
}
    
#rpd-children-number-desc, #rpd-infant-number-desc {
    left: -9999px;
    position: absolute;
    bottom: 3.1em;
    z-index: 50000;
}

#rpd-container ul.travellers li {
    float: left;
    position: relative;
    padding:0 0 0 0px;
    background: none;
	width: 106px;
}

#rpd-container ul.travellers li.column4 {
    width: 200px;
}

#rpd-container ul.travellers label {
    display: block;
}

#rpd-container .closeButton {
    background: transparent url(../img/icons.gif) 0px -3589px no-repeat;
    cursor: pointer;
    padding-left: 15px;
}

#rpd-travrow-1 {
    margin-top: 8px;
}

#rpd-container span.col1 {
    float: left;
    width: 110px;
}

#rprofile-label {
    margin-bottom: 8px;
}
 
#rpd-container select.rpd-bctyp {
    width: 256px;
	margin-right: 8px;
}

#rpd-container input.rpd-alter {
	width: 30px;
}

#rpd-container label.alter {
	margin-left: 8px;
	margin-right: 0px;
}

#rpd-container .errormsg-alter {
	width: 650px;
}

/***************************************************************************
 * Seite Angebote
 ****************************************************************************/

/* @todo 466  die sortables allgemeiner ins wec-css  */
th.sortable a {
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 12px;
}
th.sortable a.asc {
    background-image: url("../img/icons/pfeil_asc_hell_8x7.png");
}
th.sortable .active a.asc {
    background-image: url("../img/icons/pfeil_asc_dunkel_8x7.png");
}

/* @todo 466  allgemeiner ins webc-css, auch für 16x16 icon lt. konzept */
h2.withicon {
    background-position: 0px 0px;
    padding-bottom: 4px;
}

#ps-angebote div.labellinks {
    width: 110px;
}

.content-buchung div.psangeboteheader {
    padding: 0;
    margin-left: 0;
}

div.psangeboteheader .info-right {
    padding-top: 12px;
    padding-right: 8px;
}

/* die Überschriften auf dieser Seite benötigen kein float, 
 * da keine weiteren Elemente innerhalb der Überschriftszeile vorkommen (z. B. Seite-drucken-Link) */
#ps-angebote div.header h1,
#ps-angebote div.header h2 {
    float: none;
}

/* die kleinen Hin- und Rückfahrt-Icons werden mehrfach verwendet */
#ps-angebote .hintitle{
    background-image: url("../img/icons/hinfahrt_grau_16x16.png");
}
#ps-angebote .ruecktitle{
    background-image: url("../img/icons/rueckfahrt_grau_16x16.png");
}
#ps-angebote .tickettitle {
    background-image: url("../img/icons/tickets_grau_16x16.png");
}
#ps-angebote .resempfehlung {
    background-image: url("../img/icons/r_weiss_grau_16x16.png");
}
#ps-angebote .respflicht {
    background-image: url("../img/icons/r_grau_16x16.png");
}

/* Fahrtrichtungsabhängige Elemente:
 * Es gibt Elemente (<div>, <tr>), die rein rückfahrtbezogen sind  (z. B. in der Preisbox-links die Zeilen mit Preis u. Verbindung der Rückfahrt).
 * Diese benötigen die class "ps-rueck".
 * (Elemente, die rein hinfahrtsbezogen sind, werden immer angezeigt und brauchen daher keine extra class).
 * 
 * Fahrttypabhängige Elemente:
 * Elemente, die sich auf einfache Fahrt beziehen, benötigen die class "ps-single"
 * Elemente, die sich auf Hin+Rückfahrt beziehen, benötigen dagegen die class "ps-return".
 * 
 * Die folgenden Definitionen blenden die o. g. Elemente dann entspr. dem gewählten Fahrttyp (triptype) ein/aus,
 * indem ein in der Hierachie dazwischenliegendes Steuer-<div> die entspr. CSS-Klasse bekommt (ps-triptype-single/ps-triptype-return):
 */
/* bei einfacher Fahrt ... */
/* ... Elemente zur Rückfahrt oder Hin+Rückfahrt ausblenden */
#ps-angebote div.ps-triptype-single .ps-rueck,
#ps-angebote div.ps-triptype-single .ps-return {
    display: none;
}
/* ... Elemente zur einfachen Fahrt einblenden */
#ps-angebote div.ps-triptype-single div.ps-single {
    display: block;
}
#ps-angebote div.ps-triptype-single tr.ps-single {
    display: table-row;
}
/* bei Hin+Rückfahrt ... */
/* ... Elemente zur einfachen Fahrt ausblenden */
#ps-angebote div.ps-triptype-return .ps-single {
    display: none;
}
/* ... Elemente zur Rückfahrt und zur Hin+Rückfahrt einblenden */
#ps-angebote div.ps-triptype-return div.ps-rueck,
#ps-angebote div.ps-triptype-return div.ps-return {
    display: block;
}
#ps-angebote div.ps-triptype-return tr.ps-rueck,
#ps-angebote div.ps-triptype-return tr.ps-return,
#ps-angebote div.ps-triptype-return div.tableRow.ps-rueck,
#ps-angebote div.ps-triptype-return div.tableRow.ps-return {
    display: table-row;
}

/* Inhalt der Angeboteseite - teit sich in linken Kamin und rechten Content - */

#ps-angebote div.kamin-links {
    width: 214px;
    float: left;
} 

#ps-angebote div.content-rechts {
    float: left;
    width: 730px;           /* @todo 466 andere breite für ie6 und hier/ie6 hälften berechnen unten */
}

/* Inhalt linker Kamin ------------------------------------------------------ */

/* max. Zellenbreite in einem div-Layout neben einem Icon/Checkbox/Radiobutton */
#ps-angebote div.kamin-links div.layoutTable .col2 {
    width: 170px;
}

/* Preis-Infobox linker Kamin ----------------------------------------------- */

#ps-angebote div.pinfo-links div.highlight div.tableCell,
#ps-angebote div.pinfo-links div.highlight div.tableCellRight {
    background-color: #d5d5d5;  
}

#ps-angebote div.pinfo-links h2 {
    background-image: url("../img/icons/tickets_grau_24x24.png");
}

#ps-angebote div.layoutTable.pinfo-links-details p {
    padding-top: 8px;  
}

#ps-angebote div.layoutTable.pinfo-links-details {
    background: url("../img/gradients-bg.png") -1800px top no-repeat scroll #D2D2D2;  
}
#ps-angebote div.layoutTable.pinfo-links-details div.tableCell {
    background-color: transparent;
}

/* Angebotsfilter ----------------------------------------------------------- */

#ps-angebote div.filter h2 {
    background-image: url("../img/icons/filter_grau_24x24.png");
}

/* Box Anfräge ändern ------------------------------------------------------- */

#ps-angebote div.anfrage-aendern h2 {
    background-image: url("../img/icons/hinfahrt_grau_24x24.png");    
}

/* Box Rückfahrt hinzufügen ------------------------------------------------- */

#ps-angebote div.rueck-hinzu h2 {
    background-image: url("../img/icons/rueckfahrt_grau_24x24.png");
}

/* Abdeckung für Teile des linken Kamins während der Angebotssuche -----------*/
#psc-kamin-links-cover {
    background-color: #666666; 
    opacity: 0.6; 
    z-index: 10000; 
    position: absolute; 
    left: -9999px;
    top: 0px; 
}

/* Inhalt rechter Content  -------------------------------------------------- */


/* Verbindungen - enthält 2 Abschnitte: Verbindungen-Hin und Verbindungen-Rueck ----------- */

#ps-angebote div.verbindungen .colradio {
    padding-left: 0px;
    padding-right: 0px;
    width: 25px;
    text-align: center; 
}

#ps-angebote div.verbindungen .colpreis {   
    width: 53px;
    text-align: right;
}

#ps-angebote div.verbindungen .colab,
#ps-angebote div.verbindungen .colan {
    padding-left: 0px;
    padding-right: 0px; 
    width: 42px;
    text-align: center;
}

#ps-angebote div.verbindungen .coldauer,
#ps-angebote div.verbindungen .columst {
    padding-right: 0px;
    width: 50px;
    text-align: left;   
}

#ps-angebote div.verbindungen .colblank {
    padding-right: 0px; 
    width: 31px;    
}

#ps-angebote div.verbindungen .colprod {
    padding-right: 0px; 
    width: 31px;    
}

#ps-angebote div.verbindungen .colsz {  
    width: 329px;
}

#ps-angebote div.verbindungen .coldetails {
    padding-left: 0px;
    text-align: center;
	width: 16px;
}

/* einfache Fahrt: alle Verbindungstabellenspalten sind sichtbar */
#ps-angebote div.ps-triptype-single div.verbindungen .colprod,
#ps-angebote div.ps-triptype-single div.verbindungen .colsz {
    display: table-cell;
}

/* Platzhalter fuer die geklonte Tabellenbeschriftung wird ausgeblendet */
#ps-angebote div.ps-triptype-single div.verbindungen .colblank {
    display: none;
}

/* Hin+Rückfahrt: einige Verbindungstabellenspalten sind nicht sichtbar.
 * Hinweis: td.colprod soll angezeigt werden, nur ohne Spaltenüberschrift, um Platz zu sparen 
 */
#ps-angebote div.ps-triptype-return div.verbindungen th.colprod, 
#ps-angebote div.ps-triptype-return div.verbindungen .colsz {
    display: none;
}

/* Platzhalter fuer die geklonte Tabellenbeschriftung wird eingeblendet */
#ps-angebote div.ps-triptype-return div.verbindungen .colblank {
    display: table-cell;
}

/* ausgewählte Angebot-Verbindung-Tabellenzeile: Text fett */
#ps-angebote div.verbindungen tr.highlight td,
#ps-angebote div.verbindungen tr.highlight-var1 td, 
#ps-angebote div.verbindungen tr.highlight-selected td {
    font-weight: bold;
}

/* ausgewählte Angebot-Verbindung-Tabellenzeile: Spalte Preis immer spezielles dunkelgrau */
#ps-angebote div.verbindungen th.colpreis,
#ps-angebote div.verbindungen tr.highlight td.colpreis,
#ps-angebote div.verbindungen tr.highlight-var1 td.colpreis,
#ps-angebote div.verbindungen tr.highlight-selected td.colpreis,
#ps-angebote div.verbindungen tr.highlight-details td.colpreis {
    background-color: #bbbbbb; /* Farbwert von namics */  
}

#ps-angebote div.verbindungen td.clickable {
    cursor: pointer;
}

#ps-angebote div.verbindungen div.keinesparangebote,
#ps-angebote div.verbindungen div.waitingforangebote {
    border: 1px solid #e4e4e4;
    padding: 8px;
    margin: -4px -8px -4px -8px; 
}

/* Nur bei einfacher Fahrt: Wartehinweis-Box horinzontal zentrieren.
 * (Bei H+R: Breite der umgebenden Verbindungen-Tabelle komplett ausnutzen.)
 */ 
#ps-angebote div.ps-triptype-single div.verbindungen div.waitingforangebote-content {
    width: 340px;
    /* Margins müssen auto sein, damit Box horizontal zentriert wird. */ 
    margin-left: auto; 
    margin-right: auto;
}
#ps-angebote div.verbindungen div.waittext {
    width: 245px;
}
#ps-angebote div.verbindungen div.waiticon {
    text-align: right;
}

/* einfache Fahrt: 
 * Verbindungstabelle der Hinfahrt geht über gesamte Breite des rechten Contents,
 * die der Rückfahrt ist nicht sichtbar */
#ps-angebote div.ps-triptype-single div.verbindungen-hin {
    margin-left: 8px;
}
#ps-angebote div.ps-triptype-single div.verbindungen-rueck {
    display:none;
}
/* Hin+Rückfahrt:
 * Verbindungstabelle der Hinfahrt und die der Rückfahrt teilen sich den rechten Content gleichmässig */
#ps-angebote div.ps-triptype-return div.verbindungen-hin,
#ps-angebote div.ps-triptype-return div.verbindungen-rueck {
    width: 357px;           /* @todo 466 rechten content aufteilen: 734:2 = 367 */
    float: left;
    margin-left: 8px;
}

#ps-angebote div.verbindungen-hin h2 {
    background-image: url("../img/icons/hinfahrt_grau_24x24.png");
}
#ps-angebote div.verbindungen-rueck h2 {
    background-image: url("../img/icons/rueckfahrt_grau_24x24.png");
}

#ps-angebote div.verbindungen table {
    border-collapse: inherit;
}

#ps-angebote .scrollable {
	position: fixed; 
	pointer-events: none; 
	top: 0px; 
	display: none;
}
    
/* Preis-Infobox unten ------------------------------------------------------ */

#ps-angebote div.pinfo-unten {
    margin-left: 8px;
}
 
#ps-angebote div.pinfo-unten .reisendetitle {
    background-image: url("../img/icons/reisende_grau_16x16.png");
}

#ps-angebote div.pinfo-unten .resinkl {
    background-image: url("../img/icons/res_incl_grau_29x17.png");
    background-position: right center; 
    background-repeat: no-repeat;
}

/* Label */
#ps-angebote div.pinfo-unten .col1 {
    width: 120px;
}
/* Bahnhof */
#ps-angebote div.pinfo-unten .col2 {
    width: 140px;
}
/* Datum */
#ps-angebote div.pinfo-unten .col3 {
    width: 90px;
}
/* Uhrzeit */
#ps-angebote div.pinfo-unten .col4 {
    width: 70px;
}
/* Preis */
#ps-angebote div.pinfo-unten .col5 {
    width: 105px;
}
/* Details*/
#ps-angebote div.pinfo-unten .col6 {
    /*width: 80px; */
}

/* 
 * Korrektur fuer linken Button auf Psc-Angebote-Seite 
 */
#ps-angebote div.button-abschnitt .left {
    margin-left: 8px;	
}

/* Layer Angebotsdetails ---------------------------------------------------- */

/* der Layer befindet sich ausserhalb des Seiteninhaltslayers, daher diese Defs nochmal für Detailslayer: */
#ps-angebote-details-content .hintitle{
    background-image: url("../img/icons/hinfahrt_grau_16x16.png");
}
#ps-angebote-details-content .ruecktitle{
    background-image: url("../img/icons/rueckfahrt_grau_16x16.png");
}
#ps-angebote-details-content .tickettitle {
    background-image: url("../img/icons/sparpreis_16x16.png");
}
#ps-angebote-details-content .resempfehlung {
    background-image: url("../img/icons/r_weiss_grau_16x16.png");
}
#ps-angebote-details-content .respflicht {
    background-image: url("../img/icons/r_grau_16x16.png");
}
#ps-angebote-details-content .resinkl {
    background-image: url("../img/icons/res_incl_grau_29x17.png");
}
 
#ps-angebote-details-content .button-abschnitt {
    margin-left: 8px;
    margin-right: 8px;
	margin-bottom: 8px;
}

/* Abdeckung für den gesamten Hintergrund */
#psc-body-cover {
    background-color: #f2f2f2;
    opacity: 0.5;
    position: absolute; 
    width: 100%;
    top: 0px;
    right: 9999px;
    z-index: 20000;
}

#psc-body-cover.active {
    right: 0px;
}

/* Detailslayer */
/* TODO: 1011 */
#ps-angebote-details {
    border: 2px solid #cccccc;
    position: absolute; 
    width: 700px;
    top: 0px;
    right: 9999px;
    z-index: 22000;
}

/* TODO: 1011 */
#ps-angebote-details.active {
    right: 161px;
}

#ps-angebote-details-content div.psangebotsdetailsheader {
    padding: 0px 8px 0px 0px;
}

#ps-angebote-details-content div.psangebotsdetailsheader a {
    margin-left: 20px;
}

#ps-angebote-details-content div.angebotsdetails table .withicon {
    background-position: 0px 1em; /* Icons in der Tabelle vertikal mittig */
}

/* Trenn-<div> zwischen Hin- und Rückfahrt */
#ps-angebote-details-content div.hrseparator {
    line-height: 40px;
}

#ps-angebote-details-content .angebot .resinkl {
    background-image: url("../img/icons/res_incl_grau_29x17.png");
    background-position: 94px; 
    background-repeat: no-repeat;
}

/* Bahnhof */
#ps-angebote-details-content div.angebotsdetails table.verbindung .colbhf {
    width: 150px;    
}
/* Datum */
#ps-angebote-details-content div.angebotsdetails table.verbindung .coldatum {
    width: 100px;    
}
/* Uhrzeit */
#ps-angebote-details-content div.angebotsdetails table.verbindung .colzeit {
    width: 100px;
}
/* Gleis */
#ps-angebote-details-content div.angebotsdetails table.verbindung .colgleis {
    width: 80px;
}
/* Produkte */
#ps-angebote-details-content div.angebotsdetails table.verbindung .colprod {
    width: 80px;
}
/* Icons */ 
#ps-angebote-details-content div.angebotsdetails table.verbindung .colres {
    /* bekommen den Restplatz */
}

/* Angebotsname */
#ps-angebote-details-content div.angebotsdetails div.angebot .col1 {
    width: 130px;
}
/* Konditionentext */ 
#ps-angebote-details-content div.angebotsdetails div.angebot .col2 {
    width: 300px;
}
/* Preislabel */
#ps-angebote-details-content div.angebotsdetails div.angebot .col3 {
    width: 60px;
    text-align: right;
}
/* Preis */
#ps-angebote-details-content div.angebotsdetails div.angebot .col4 {
    width: 120px;
    text-align: left;
}

#ps-angebote-details-content div.angebotsdetails .iconlegende .withicon {
    padding-left: 44px;
}

/***************************************************************************
 * Legende
 ***************************************************************************/

div.psclegende .icongridleft {
    float: none;
}

/*---------------------------------------------------------------------
 * Modaler Layer
 *---------------------------------------------------------------------*/

div#ps-angebote-details-content {
	width: 700px;
}

/*---------------------------------------------------------------------
 * Captcha
 *---------------------------------------------------------------------*/

#ps-captcha #captcha-group div.errormsg {
    width: 500px;
}