/******* Basis-Elemente *******/
body {
    margin: 0 auto;
    text-align: center; /* main-Box zentrieren in IE 5 und hoeher */
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    width: 470px;
}

#main {
    color: #333;
    background-color: transparent;
    text-align: left;
}

#base {
    background-color: #ffffff;
    width: 100%;
    margin: 0;
}

.confirmHeader {
    height: 103px;
}

#content {
    float: left;
    background-color: transparent;
    width: 100%;
    padding-bottom: 30px;
}

#margin {
    float: left;
    background-color: #ffffff;
    padding-left: 52px;
    padding-bottom: 20px;
}

#footer {
    margin: 0px;
    clear: both;
    height: 23px;
    padding-top: 9px;
    padding-bottom: 0px;
}

.testFooter {
	color: red;
	font-weight: bold;
}

#main img {
    border: none;
}

#main hr {
    background-color: #CCCCCC; /* Opera, FF */
    border-style:     solid;
    border-width:     1px 0 0;
    clear:            both;
    color:            #CCCCCC;
    height:           0;
    margin:           18px 0;
}

#main label {
    float: left;
}

#base h1 {
    font-weight:   bold;
    font-size:     18px;
    text-align:    left;
    margin-bottom: 0;      /* 8px; */
}

#base .ueberschrift {
    font-weight:   bold;
    font-size:     13px;
    text-align:    left;
    float:		   left;
    margin-top:    3px;
    margin-bottom: 7px;
}

#main h2 {
    font-weight:    normal;
    font-size:      16px;
    margin-bottom:  10px;
    margin-top:     0;      /* 24px; */
}

.mask {
    /* FF, Chrome, Opera, IE9, IE10 */
    background: rgba(0,0,0) transparent; 
    background: rgba(0,0,0, 0.4);   
    height: 100%;
    left: 0; 
    position: fixed; 
    top: 0;
    width: 100%; 
    z-index: 8000;
}


/******* Ausrichtung ******/
#base .links {
    float: left;
}

#main .rechts {
    float: right;
}

#main div.center {
    margin: auto;
}

.clearer {
    clear: both;
    height: 0px;    
}

.mb15 {
	margin-bottom: 15px;
}

/******* Farbe ******/
#main .grey {
    color: #888888;
}

/******* Info-Button *******/
#main .info {
    float:  right;
    height: 20px;
    width:  21px;
    margin: 0 5px
}

#main .info .infoImage {
    z-index:  1;
    position: relative; /* tut Not, damit z-index zieht */
    height:   20px;
    width:    21px;
    background-repeat: no-repeat;
}

#main .info .infoBox {
    display:    none;
    float:      left;
    border:     none;
    width:      330px;
    padding:    12px 10px 20px 37px;
    background: #ffffff;
    z-index:    10;
    position:   relative; /* tut Not, damit z-index zieht */
    left:       -9px;
    top:        -29px;
    -webkit-border-radius: 8px;
    -moz-border-radius:    8px;
    border-radius:         8px;
}

#main .info .infoBox .infoImage {
    z-index:  10;
    position: absolute; /* tut Not, damit z-index zieht */
    top:      9px;
    left:     9px;
}

#main .info .infoText h4 {
    font-size:   11px;
    font-weight: bold;
    margin:      0 0 5px;
}

#main .info .infoText ul {
    margin:       5px 0 5px 5px;
    padding-left: 13px;
}


/******* Hilfe-Button *******/
#main .hilfe {
    float:    right;
    position: relative;
    top:      -6px;
    margin-left: 18px;
}

#main .hilfe .hilfeLink {
    float:    right;
    position: relative;
    z-index:  2;
    cursor: pointer;
    text-decoration: underline;
}

#main .hilfe .hilfeImage {
    float:    left;
    margin-right: 5px;
    z-index:  1;
    position: relative; /* tut Not, damit z-index zieht */
    top:      -2px;
    height:   20px;
    width:    21px;
    background-repeat: no-repeat;
    cursor: pointer;
}

#main .hilfe .hilfeBox {
    display:    none;
    border:     none;
    width:      200px;
    padding:    11px 37px 20px 10px;
    background: #ffffff;
    z-index:    10;
    position:   absolute; /* tut Not, damit z-index zieht */
    left:       -219px;
    top:        -11px;
    -webkit-border-radius: 8px;
    -moz-border-radius:    8px;
    border-radius:         8px;
}

#main .hilfe.sepa .hilfeBox {
    width:      350px;
    left:       -369px;
}

#main .hilfe .hilfeBox .hilfeImage {
    z-index:  10;
    position: absolute; /* tut Not, damit z-index zieht */
    top:      9px;
    left:     219px;
}

#main .hilfe.sepa .hilfeBox .hilfeImage {
    left:     369px;
}


/******* Aendern-Link *******/
#main a.aendern {
    float:    right;
    position: relative;
    top:      -6px;
    z-index:  2;
}

#main a.aendern .aendernImage {
    background-repeat: no-repeat;
    float: left;
    height: 21px;
    width: 21px;
    margin-right: 5px;
}

#main a.aendern .aendernText {
    position: relative;
    top: 2px;
}


/******* PDF-Link *******/
#main .pdfLink.angebotRadio {
    float: right;
    position: relative;
    top: -6px;
}

#base .pdfLink a {
    background-image: url("../img/icons/icon_pdf.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    padding-left: 19px;
}


/******* Captcha *******/
#main .captcha {
    margin-left: 110px;
}

#main .captcha .captchaImage {
    margin: 18px 0 9px 0;
}

#main .captcha input {
    margin: 18px 0 12px;
    width:  192px;      /** 8px Padding links */
}


/***** Zeilenformate ******/
#main .box .zeileInput {
    float:         left;
    margin-bottom: 15px;
}

#main .box .zeileOutput {
    clear:          left;
    float:          left;
    margin-bottom:  17px;
}


/***** Spaltenformate ******/
#main .labelPersonendaten {
    float: left;
    width: 139px;
}

#main .uebersichtDaten {
    float: right;
    width: 340px;
}

#main .print .uebersichtDaten {
    width: 339px;
}

#main .personNr {
    width: 15px;
}

#main .spalteUebersicht1 {
    float:      left;
    width:      110px;
    font-size:  15px;
    color:      #333333;
}

#main .print .spalteUebersicht1 {
    width: 109px;
}

.spalteUebersicht2 {
    float: left;
    width: 120px;
    font-weight: bold;
}

.spalteUebersicht3 {
    float: left;
    width: 150px;
}

.spalteUebersicht4 {
    float: left;
}

#main .labelPersonendatenVp {
    float:         left;
    margin-bottom: 12px;
}

#main .vAlignTop {
    vertical-align: top;
}

#main .spalteLabel {
	clear: left;
    float: left;
    width: 130px;
}

#main .indent {
	margin-left: 23px;
}

#main .spalteLabel.indent {
    width: 107px;	
}

#main .spalteEingabe {
    float: left;
    width: 320px;
}

#main .box .hint {
    color:      #888888;
    font-size:  11px;
    margin-top: 7px
}

#main .hint.indent {
    margin-bottom: 10px;
    margin-top: 0;
}


/****** Textformatierung ***********/
.fett {
    font-weight: bold;
}


/******* Feld-Positionierung *******/
form {
    margin: 0;
    padding: 0;
}

form br {
    clear: both;
}

.container {
    float: left;
    width: 212px;
}

/******* Navigationselemente *******/
#main .dynamicButtonText {
    float: left;
    margin-top: 6px;
    font-size: 16px;
}

#main .dynamicButton {
    float:  left;
    height: 38px;
    cursor: pointer;
}

#main .dynamicButton.small {
	height: 24px;
}

#main .dynamicButton.small label{
    margin-top: 2px;
}

#main .neutralButtonLeft {
    background-image: url("../img/buttons/button_neutral_left.png");
    background-repeat: no-repeat;
    width: 12px;
}

#main .neutralButtonCenter {
    background-image: url("../img/buttons/button_neutral_center.png");
    background-repeat: repeat-x;
}

#main .neutralButtonRight {
    background-image: url("../img/buttons/button_neutral_right.png");
    background-repeat: no-repeat;
    width: 16px;
}

#main .neutralButtonLeft.small {
    background-image: url("../img/buttons/button_neutral_small_left.png");
    width: 13px;
}

#main .neutralButtonCenter.small {
    background-image: url("../img/buttons/button_neutral_small_center.png");
}

#main .neutralButtonRight.small {
    background-image: url("../img/buttons/button_neutral_small_right.png");
    width: 13px;
}

#main .layerButton {
	margin-top: 14px;
}

/* Mittige Positionierung in der Angebotstabelle.
   Position wird dynamisch errechnet. */
#main .angebotTabelle .auswahlButton {
    position: relative;
}

/** Wichtig fuer mittige Positionierung der Abbrechen-Buttons */
#main .navButtonContainer {
	position: relative;
}

#main .printButton {
    float:  right;
    height: 50px;
}

#main input.hiddenSubmitButton {
    /*float: right; horizontaler Scrollbalken!*/
    width: 0px;
    height: 0px;
    position: relative;
    /* left: 40px; gibt Probleme mit der IFrame-Breite! */
    border: none;
    background-color: transparent;
    z-index: 1;
}

#main .einzelpreisEingabe td {
    padding-bottom: 9px;
}


/******* Header-Elemente ********/
#logoBox {
    padding-left: 25px;
}

#logoHm {
    background-image: url("../img/hm/logo.jpg");
    width: 135px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    float: left;
}

#logoHmrIFrame {
    background-image: url("../img/hmr/HMRV_Logo_web_small.gif");
    width: 175px;
    height: 45px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    float: right;
    padding: 0px;
    margin: 25px 10px 25px 25px;
}

.navStatus {
    float: right;
    width: 480px;
    height: 78px;
    background-position: 0px 0px;
}


/******* Boxen *******/
#main .boxtop {
    background-image:    url('../img/hgrbox_rechts_oben.png');
    background-color:    #f5f5f5;
    background-position: 100%;
    background-repeat:   no-repeat;
    margin-top:          10px;
    height:              18px;
}

#main .print .boxtop, #main .boxtop.print {
    background-color:   #fff;
    border-top:         1px solid #D8D8D8;
    border-left:        1px solid #D8D8D8;
    border-right:       1px solid #D8D8D8;
    -webkit-border-top-right-radius: 18px;
    -moz-border-radius-topright: 18px;
    border-top-right-radius: 18px;
    background-image:   none;
}

#main .boxbottom {
    background-image:    url('../img/hgrbox_links_unten.png');
    background-color:    #f5f5f5;
    background-position: 0%;
    background-repeat:   no-repeat;
    margin-bottom:       10px;
    height:              18px;
}

#main .print .boxbottom, #main .boxbottom.print {
    background-color:   #fff;
    border-bottom:      1px solid #D8D8D8;
    border-left:        1px solid #D8D8D8;
    border-right:       1px solid #D8D8D8;
    background-image:   none;
    -webkit-border-bottom-left-radius: 18px;
    -moz-border-radius-bottomleft: 18px;
    border-bottom-left-radius: 18px;
}

#main .box {
    padding:           1px 10px 0; /** 1px oben für Hilfe- oder Ändern-Icon */
    background-color:  #f5f5f5;
    position:          relative;  /** Positionierung der MouseOver-Layer */
}

#main .print .box, #main .box.print {
    background-color: #fff;
    border-left:      1px solid #D8D8D8;
    border-right:     1px solid #D8D8D8;
}

#main .box .boxtitle {
    font-size: 15px;
    margin-bottom: 24px;
    width: 355px;
}

#main .box .boxtitle.inaktiv {
	color:   #888888;
	display: block;
}

#main .box .boxsubtitle {
    font-size: 14px;
    color:     #888888;
}

/******* Eingabe-Elemente *******/
#main input,select {
    float:          left;
    border:         1px solid #ccc;
    font-size:      12px;
    margin-right:   8px;
}

#main input[type="text"]  {
    padding: 0 0 0 8px;
    height: 17px;
}


#main input[type="text"]:disabled {
    background-color: #F2F2F2;
    color: #BDBDBD;
}

#main select {
    height: 21px;
    padding: 1px 0 1px 4px;
}

#main input.reisedatum {
    margin-right: 5px;
}

#main .epContainer td {
    padding: 5px 0;
}

#main input.vornameVpA {
    width: 113px; /* bei Padding links 8px */
}

#main input.nachnameVpA {
    width:          218px; /* bei Padding links 8px */
    margin-right:   0;
}

#main input.vornameVp {
    width: 138px;
}

#main input.nachnameVp {
    width:          189px;
    margin-right:   0;
}

#main input.titel {
    width: 118px;
}

#main input.vorname {
    width: 118px;
}

#main input.nachname {
    width: 163px; /* bei Padding links 8px */
    margin-right: 0;
}

#main input.plz {
    width: 66px;
}

#main input.wohnort {
    margin-right: 0;
    width: 215px;
}

#main input.eingabeLang {
    margin-right: 0;
    width: 299px;
}

#main select.anredeVp {
    width: 62px;
}

#main td.gebDat {
    padding-bottom: 10px;
}

#main .gebDat select {
    margin-right: 5px;
}

#main .gebDat select.datumJahrA {
    margin-right: 0;
}

#main select.tag {
    width: 53px;
}

#main select.monat {
    width: 67px;
}

#main select.jahr {
    width: 57px;
}

#main select.eingabeLang {
    margin-right: 0;
    width: 310px;
}

#main select.reiseziel {
    margin-right: 0;
    width: 164px;
}

#main input[type="radio"] {
    background-color: transparent;
    border:           none;
    padding:          0;
    margin:           2px 5px;
}

#main input.versObj[type="radio"] {
    margin-left: -20px;	
}

#main .radio {
    float: left;
}

#main .radio input[type="radio"] {
    margin-left: 0;
}

#main .radio label {
    margin-right: 20px;
}

#main .box input[type="checkbox"] {
    margin: 0 10px;
    border: none;
}

#main .box .checkboxText {
    float: left;
    width: 417px;
}

#main .box .agb ul {
    margin: 12px 0;
}

#main .box .agb li {
    margin-left:   -25px;
    margin-bottom: 9px;
}

#main .box .checkboxText.datenschutz a {
    white-space: nowrap;
}


/******* Startseiten-Elemente *******/
.stepUnderline {
    width: 200px;
    height: 1px;
    margin-top: 10px;
    font-size: 0px;
    background-repeat: repeat-x;
}


/******* Fehlermeldungen *******/
#main .error {
    background-color: #FFFFFF;
    border:           1px solid #F00F0F;
    color:            #F00F0F;
    font-size:        11px;
    margin-bottom:    30px;
    padding:          25px 10px 18px 62px;
    position:         relative;
}    

#main .error .errorImage {
    background-image: url("../img/icons/icon_fehler_gross.png");
    width:    38px;
    height:   39px;
    position: absolute;
    left:     10px;
    top:      18px;
}

#main .error .errorHeadline {
    margin-bottom: 18px;
}

#main .error ul {
    list-style: none;
    background: #FEF3F3;
    color:      #F00F0F;
    margin:     0;
    padding:    14px 14px 6px;
    text-align: left;
}

#main .error li{
    background:     url("../img/icons/icon_fehler_klein.png") no-repeat scroll left 4px transparent;
    padding-left:   21px; /* 11px Grafik + 10px Abstand */
    margin-bottom:  9px;
    line-height:    20px;
    color:          #333333;
}

/******* Warnungen *******/
#main .warning {
    background-color: #FFFFFF;
    font-size:        12px;
    margin-bottom:    15px;
    text-align:       left;
    font-weight:      bold;
}    

/******* Hinweis fuer Expedienten ************/
.hinweis_expi {
    font-size: 13px;
    margin-bottom: 18px;
}


/******* Navigationsleiste ************/
#brotkruemel {
    float:         left;
    width:         100%;
    margin-top:    17px;
    margin-bottom: 24px;
}

#base .brotkruemelVerlauf .vCenter {
    vertical-align: middle;
}

#base .brotkruemelVerlauf {
    /* padding: 6px 2px 7px 2px; */
    font-size: 11px;
}

#base .brotkruemelTextTODO,
#base .brotkruemelTextACTIVE,
#base .brotkruemelTextDONE,
#base .brotkruemelTextFINISHED {
    padding: 0 26px;
    float: left;
    height: 46px;
    white-space: nowrap;
    position: relative;
}

#base .brotkruemelTextTODO,
#base .brotkruemelTextFINISHED {
    color: #aaaaaa;
}

/* nur mit Fallback-Grafik aktivieren
#base .brotkruemelTextACTIVE a,
#base .brotkruemelTextACTIVE .schrittNr,
#base .brotkruemelTextACTIVE .schrittName {
    color: white;
}
*/

#base .brotkruemelTextTODO,
#base .brotkruemelTextDONE,
#base .brotkruemelTextFINISHED {
    background: url("../img/navigation/navi_arrow_grey.png") no-repeat scroll right center transparent;
}

#base .brotkruemelTextDONE:hover,
#base .brotkruemelTextTODO.active:hover {
    background: url("../img/navigation/navi_arrow_grey_hover.png") no-repeat scroll right center transparent;
}

#base .brotkruemelVerlauf .schrittNr {
    font-size: 18px;
}

#base .brotkruemelVerlauf .innerBox {
	position: relative;
	top:      1px;
}

#base .brotkruemelVerlauf .start {
    background: url("../img/navigation/navi_left.png") no-repeat scroll left center white;
    float:    left;
    height:   46px;
    padding:  0;
    position: relative;
    width:    4px;
    z-index:  6;
}

#base .brotkruemelVerlauf .first {
    margin-left: -4px;
}

#base .brotkruemelVerlauf .shift {
    margin-left: -13px;
}


/******* Tarifvergleich bei Angeboten *******/
#main .tarifVergleich .tvContainer {
    display: none;
    border:  1px solid #D8D8D8;
    margin:  24px -10px 0 -10px;
    padding: 10px 10px 20px;
    background-color: white;
}

#main .tarifVergleich .tvTitel {
    font-size: 14px;
}

#main .tarifVergleich .tvContent {
    width:  100%;
    height: 300px;
    border: none;
}

#main .close {
    float:  right;
    height: 7px;
    width:  8px;
}

#main .close:hover {
    cursor: pointer;
}


/******** Angebot *******/
#main table.angebotTabelle {
    border-collapse: collapse;
    position:        relative;
    table-layout:    fixed;
    top:             -2px;
    width:           100%;
    z-index:         2;
}

#main table.angebotTabelle td {
	text-align: center;
}

#main table.angebotTabelle th {
    font-weight: normal;
}

#main table.angebotTabelle td.eigenschaftBez {
   text-align: left;
   width:      105px;
}

#main table.angebotTabelle .eigenschaftBez .info {
   margin-right: 0;
}

#main table.angebotTabelle td.border {
   font-size:  11px;
}

#main table.angebotTabelle td.border .text{
	float: left;
    width: 79px;
}

#main table.angebotTabelle td.noborder {
   font-size:   12px;
   font-weight: bold;
}

#main table.angebotTabelle td.highlightLeft {
	display: none;
    padding: 0;
    background-repeat: repeat-y;
    background-image:  url("../img/angebot/angebot_highlight_left.png");
}

#main table.angebotTabelle td.highlightRight {
    background-image:    url("../img/angebot/angebot_highlight_right.png");
    background-repeat:   repeat-y;
    display: none;
    padding: 0;
}

#main table.angebotTabelle td.highlightTop {
	background-color:    white !important;
    background-image:  url("../img/angebot/angebot_highlight_top.png");
    background-repeat: repeat-x;
    background-position: 0 100%;
}

#main table.angebotTabelle td.highlightBottom {
	background-color:    white !important;
    background-image:    url("../img/angebot/angebot_highlight_bottom.png");
    background-position: 0 100%;
    background-repeat:   repeat-x;
}

#main table.angebotTabelle td.highlightTopLeft {
    background-color:    white !important;
    background-image:    url("../img/angebot/angebot_highlight_top_left.png");
    background-position: 100% 100%;
    background-repeat:   no-repeat;
    width: 9px;
}

#main table.angebotTabelle td.highlightBottomLeft {
	background-color:    white !important;
    background-image:    url("../img/angebot/angebot_highlight_bottom_left.png");
    background-position: 0 100%;
    background-repeat:   no-repeat;
}

#main table.angebotTabelle td.highlightTopRight {
    background-color:    white !important;
    background-image:    url("../img/angebot/angebot_highlight_top_right.png");
    background-position: 0 100%;
    background-repeat:   no-repeat;
    width: 11px;
}

#main table.angebotTabelle td.highlightBottomRight {
	background-color:    white !important;
    background-image:    url("../img/angebot/angebot_highlight_bottom_right.png");
    background-position: 0 100%;
    background-repeat:   no-repeat;
}

#main table.angebotTabelle td.highlight {
    background-color: #f5f5f5;
    display:          table-cell;
    border:           none !important;
}

#main table.angebotTabelle .preis {
    font-size: 20px;
}

#main .gpContainer {
    border-top: 1px solid #D8D8D8;
    padding:    18px 10px 12px;
}

#main .gpContainer .gpTitel {
    font-size:   14px;
    padding-top: 18px;
}

#main .gpContainer .preisBoxDrittel {
    float:        left;
    margin-right: 40px;
    width:        114px;
    min-height:   1px; /** damit es immer gerendert wird */
}

#main .gpContainer .preisBoxDrittel.gesamtPreis {
    margin-right: 26px;
}

#main .gpContainer .betrag {
    font-size: 18px;
}

#main .gpContainer .betrag .preisBoxDrittel {
    margin-right: 0px;
}

#main .gpContainer .betrag .symbol {
	float:       left;
    margin-left: 10px;
    width:       30px;
}

#main .gpContainer .betrag .preisBoxDrittel.gesamtPreis {
	bottom: 2px;
    font-size: 22px;
    position: relative;
}

#main .gpContainerBottom.boxbottom {
    -webkit-border-bottom-left-radius: 18px;
    -moz-border-radius-bottomleft: 18px;
    border-bottom-left-radius: 18px;
}

/******* Warenkorb *******/
#main .warenkorb {
    border:        1px solid #D8D8D8;
    padding:       18px 10px;
    margin-bottom: 24px;
    position:      relative; /** Positionierung MouseOver */
    z-index:       2; /* IE 7 zeigt sonst das MouseOver nicht komplett an */
}

#main .warenkorb .spalteUebersicht1{
    width:      109px;
}

#main .warenkorb .uebersichtDaten {
    width: 339px;
}

#main .uebersichtDaten .drittelBreite{
    float:      left;
    width:      86px;
    font-size:  12px;
    color:      #333333;
}

#main .uebersichtDaten .halbeBreite{
    float:      left;
    width:      130px;
    font-size:  12px;
    color:      #333333;
}

#main .uebersichtDaten .ganzeBreite{
    float:      left;
    width:      260px;
    font-size:  12px;
    color:      #333333;
}

#main .uebersichtDaten .drittelBreiteOffset{
    float:      left;
    width:      146px;
    font-size:  12px;
    color:      #333333;
}

#main .uebersichtDaten .zweiDrittelBreite{
    float:      left;
    width:      172px;
    font-size:  12px;
    color:      #333333;
}

#main .uebersichtDaten .zweiDrittelBreiteOffset{
    float:      left;
    width:      232px;
    font-size:  12px;
    color:      #333333;
}

#main .uebersichtDaten .halbeBreiteOffset{
    float:      left;
    width:      190px;
    font-size:  12px;
    color:      #333333;
}

#main .uebersichtDaten .personenListeAbZehn { 
    float:      left;
    width:      16px;
    text-align: right;
    font-size:  12px;
    color:      #333333;
}

/******* Preisdetail *******/
#main .preisdetail {
    border:     1px solid #D8D8D8;
    padding:    14px 10px 14px 10px;
}

#main .preisDetails,
#main .ri,
#main .vpi {
    position: absolute; /* Positionierung des MouseOver */
    left:     5px;
    z-index:  10;
}

#main .uebersichtDaten .preisDetails {
    position: relative; /* Positionierung auf Uebersicht */
    left: 0;
}

#main .preisDetails hr {
    margin-bottom: 10px;
    margin-top: 8px;
}

#main .preisDetails h3 {
    margin:      0 0 9px;
    font-size:   12px;
    font-weight: bold;
}

#main .preisDetails h4 {
    margin:      0 0 9px;
    font-size:   12px;
    font-weight: normal;
}

#main .preisDetails ul{
    margin: 5px 0 5px 5px;
    padding-left: 13px;
}

#main .ri .riBox ul,
#main .vpi .vpiBox ul {    
     margin: 0 0 0 5px;
     padding-left: 13px;
}

/* Angebotsauswahl auf Uebersicht und Bestaetigung,
   Reiseart-Info-Layer */
#main .preisDetails .auswahl1,
#main .ri .riBox,
#main .vpi .vpiBox {
    background-color: white;
    border:           none;
    box-shadow:       0 0 3px #333333;
    -webkit-box-shadow: 0 0 3px #333333;
    -webkit-border-radius: 8px;
    -moz-border-radius:    8px;
    border-radius:         8px;
    padding:          14px 10px 20px;
    display:          none;
    position:         relative;
    top:              12px;
    width:            438px;
    text-align:       left;
}

#main .vpi .vpiBox {
    left: -8px;
}

#main .vpiBox table {
    background-color: white;
    border-collapse:  collapse;
}
#main .vpiBox td,
#main .vpiBox th {
    border:  1px solid #D8D8D8;
    padding: 1px 3px;
}

#main .pdLink,
#main .reiseart .riLink,
#main .vpiLink {
    cursor: pointer;
    text-decoration: underline;
}

/* Preisdetails-Link nur in Angebotstabelle zentrieren */
#main .angebotTabelle .pdContainer {
    margin: 0 auto;
}

#main .vpiContainer {
	margin-top: 13px;
}

#main .arrow {
    display: none;
    position: absolute;
    z-index: 11;
}

#main .arrowImg {
    background: url("../img/layer/layer_pfeil.png") no-repeat scroll 0 0 transparent;
    height:     12px;
    position:   relative;
    width:      21px;
}

#main .ri .riBox .innerBox,
#main .vpi .vpiBox .innerBox {
    background-color: #f5f5f5;
    padding:          14px 10px;
    line-height:      1.4;
}

#main .ri .riBox .innerBox .spalteLinks,
#main .ri .riBox .innerBox .spalteRechts {
    width: 47%;
    float: left;
}

#main .ri .riBox .innerBox .spalteLinks {
    margin-right: 6%;
}

#main .preisDetails .auswahl1 .produktName,
#main .riBox .riTitel,
#main .vpiBox .vpiTitel,
#main .upsell .produktName {
    font-size:      14px;
    margin-bottom:  11px;
}

#main .upsell .produktName {
	width: 410px;
}

#main .preisDetails .auswahl2 .produktName {
    width:          260px;
    margin-bottom:  9px;
    font-weight:    bold;
}

#main .preisDetails .pib {
    margin-bottom:  9px;
}

#main .preisDetails .auswahl1 .tarifDetails,
.upsell .inner {
    background-color: #f5f5f5;
    padding:          14px 10px 24px;
}

#main .preisDetails .auswahl2 .tarifDetails {
    background-color:  white;
    border:            1px solid #CCCCCC;
    padding:           12px 10px 14px;
}

#main .preisDetails .gpText  {
	font-size: 14px;
}

#main .preisDetails .auswahl1 .gpText  {
    width:     70%;
}

#main .preisDetails .auswahl2 .gpText  {
    width:     60%;
}

#main .preisDetails .gpPraemie {
	font-size:   24px;
	white-space: nowrap;
}

#main .preisDetails .anteile {
	margin-top: 12px;
}

#main .preisDetails .paText {
	clear: left;
	width: 78%;
}

#main .importBox {
	background-color: #fff;
	border: 1px solid #D8D8D8;
	position: relative;
    width: 410px;
    padding: 14px 20px;
}

#main .importBox h4 {
	margin: 0 0 13px 0;
}

#main .vpiBox h4 {
    margin: 0 0 5px 0;
}


/******* Versicherte Personen *******/
#main .vpTableHeader {
    font-weight:    normal;
    color:          #333333;
    padding-bottom: 10px; /* --> ergibt in FF einen unteren Rand von 15px */
}

#main table .vpTableRow td {
    padding-bottom: 15px;
}

#main select.wohnsitz {
    width:        228px;
    margin-right: 0;
}

#main table.gebDatFelder {
    float:         left;
    /* margin-left:   200px; */
    margin-bottom: 15px;
}

#main table.uebersichtDaten td.vpDaten {
    float: left;
    width: 255px;
}

#main .print table.uebersichtDaten td.vpDaten {
    float: left;
    width: 319px;
}


/******* Zahlung *******/
#main .zahlungsartText {
    margin-top:    10px;
    margin-bottom: 20px;
}

#main .zahlweise {
    margin: 22px 0 0;
}

#main .zahlweise input[type="radio"] {
    margin: 2px 5px 8px 0;
}

#main .ktoBlzLink{
	margin-left:    139px;
}

#main .ktoBlzContainer {
    display: none;
    background-color: white;
    border:  1px solid #D8D8D8;
    margin:  10px -10px 0 -10px;
    padding: 10px;
}

#main input.kkPruefNr {
    float: left;
    width: 122px;
}

#main .kkInfo {
    display: none;
    float:   left;
}

#main .kkInfo .infoBox {
    width: 290px;
}

#main .kkInfoTitel {
    float:         left;
    font-weight:   bold;
}

#main .kkInfoSubtitel {
    float:         left;
    font-weight:   bold;
    margin-top:    8px;
    margin-bottom: 14px;
}

#main .kkImage {
    margin-top: 24px;
}


/** Grafiken */
#main .strich {
	width:  10px;
	height: 2px;
	margin: auto;
	background-image:  url('../img/icons/icon_strich.png');
}

#main .hakenKlein,
#main .hakenGross {
    margin: auto;
}

#main .hakenGrossContainer {
    float:        left;
    width:        99px;
    margin-top:   20px;
    margin-right: 10px;
}


/******* Auswahl mit Radio-Boxen *******/
#main .radioBox {
    float: left;
    width: 112px;
    font-size:  11px;
    text-align: left;
}

#main .radioBox .radioImg {
    background-image:  url('../img/icons/radiobox_icons.png');
    background-repeat: no-repeat;
    background-position: -232px -107px;
    width:  100%;
    height: 105px;
    float:  left;
}

#main .radioBox .radio {
    height: 80px;
    margin: 15px 10px 10px;
    width: 92px;
}

#main .radioImg input[type="radio"] {
    margin-right: 4px;
}

#main .radioImg label {
    width:        74px;
    height:       30px;
    margin-right: 0;
}

#main .radioBox.tarif {
    font-size: 12px;
}

#main .radioBox.tarif .preis {
    font-size:   18px;
    margin-top:  3px;
    white-space: nowrap;
}

#main .radioBox.tarif .pdContainer {
    margin-top: 3px;
}


/******* Tarifauswahl *******/
#main .auswahlContainer {
    float:         left;
    margin-bottom: 18px;
}


/******* Reiseart *******/
#main .radioImg {
    margin-top: 20px;
}

#main .radioImg.flug {
    background-position: 0 0;
}

#main .radioImg.schiff {
    background-position: -232px 0;
}

#main .radioImg.flugSchiff {
    background-position: -580px -107px;
}

#main .radioImg.autoBusBahn {
    background-position: -116px 0;
}

#main .radioImg.bahn {
    background-position: -464px -107px;
}

#main .radioImg.bus {
    background-position: -696px 0;
}

#main .radioImg.autoBus {
    background-position: -348px -107px;
}

#main .radioImg.nurObjekt {
    background-position: -348px 0;
}

#main .radioImg.einzel {
    background-position: -464px 0;
}

#main .radioImg.familie {
    background-position: -580px 0;
}

#main .radioImg.weltOhne {
    background-position: -116px -107px;
}

#main .radioImg.welt {
    background-position: 0 -107px;
}

#main .reiseart .radio {
    margin-top: 60px;
    height:     35px;
}

#main .reiseart .reiseartBeispiel {
    margin-top: 8px;
    position:   relative;
}

#main .reiseart .reiseartBeispiel .zB {
    font-size: 10px;
}

#main .reiseart .reiseartBeispiel .clearer {
    height: 4px;
}

#main .reiseart .reiseartBeispiel,
#main .reiseart .riContainer {
    padding: 0 5px;
}


/*** jQuery Datepicker ***/
div#ui-datepicker-div.ui-datepicker {
    position: relative; /* tut Not, damit z-index zieht */
    z-index: 6 !important;      /* z-index > z-index von '.ie7InfoBox' */
    box-shadow: 0 0 3px #888;
    -webkit-box-shadow: 0 0 3px #888;
    border: none;
}

/* Postionierung des Kalender-Icons */
.ui-datepicker .ui-datepicker-title select {
    border-color: #AAAAAA !important;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 1.7em !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active  {
    border: 1px solid #222222 !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: url("datepicker/images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #FFFFFF !important;
    border: 1px solid #AAAAAA !important;
}

.ui-corner-all {
	-webkit-border-radius: 8px !important;
    -moz-border-radius:    8px !important;
    border-radius:         8px !important;
}

.ui-corner-left {
	-webkit-border-top-left-radius: 8px !important;
    -webkit-border-bottom-left-radius: 8px !important;
    -moz-border-radius-topleft: 8px !important;
    -moz-border-radius-bottomleft: 8px !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.ui-corner-right {
	-webkit-border-top-right-radius: 8px !important;
    -webkit-border-bottom-right-radius: 8px !important;
    -moz-border-radius-topright: 8px !important;
    -moz-border-radius-bottomright: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.ui-icon-circle-triangle-w {
    background: url("datepicker/images/ui-icons_888888_256x240.png") no-repeat scroll  -96px -16px transparent !important;
}

.ui-icon-circle-triangle-e {
    background: url("datepicker/images/ui-icons_888888_256x240.png") no-repeat scroll -32px -16px transparent !important;
}

.ui-datepicker .ui-datepicker-buttonpane button {
	background: #e6e6e6; /* for non-css3 browsers */
	background: -moz-linear-gradient(top, #fff, #e6e6e6); /* Firefox */
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6));
	background: -webkit-linear-gradient(#fff, #e6e6e6); 
	background: -ms-linear-gradient(#fff, #e6e6e6); /* IE 10 */
	background: -o-linear-gradient(top, #fff 0%, #e6e6e6 100%);  /* Opera */
	background: linear-gradient(top, #fff, #e6e6e6); /* W3C */
}


/*** Layer ***/
#main .shadow {
    box-shadow: 0 0 3px #888888;
    -webkit-box-shadow: 0 0 3px #888888;
}


/**************/
#main .importInput {
	height: 18px;
    width:  200px;	
}

#main .importInput label {
	margin-top: 3px;
}

#main .file-upload-btn {
    overflow: hidden;
    display: inline-block;
    position: relative; 
    vertical-align: middle;
    text-align: center;
}
    
#main .file-upload-btn input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    cursor: pointer;

    /* Loses tab index in webkit if width is set to 0 */
    opacity: 0;
    filter: alpha(opacity=0);
}

/******* Teaser-Box *******/
#main .teaserBox {
	border: 1px solid #D8D8D8;
	-webkit-border-top-right-radius: 18px;
	-webkit-border-bottom-left-radius: 18px;
	-moz-border-radius-topright: 18px;
	-moz-border-radius-bottomleft: 18px;
	border-top-right-radius: 18px;
	border-bottom-left-radius: 18px;
	margin-bottom: 8px;
	padding: 18px 20px;
	font-size: 11px;
	width: 428px;
}

#main .teaserBox.halb {
	padding: 18px 9px;
	width: 45%;
}

#main .teaserBox h2 {
	font-weight: bold;
	font-size: 14px;
	margin-left: -11px;
}

#main .teaserBox.halb  h2 {
    margin-left: 0;
}

#main .teaserBox .spalteLinks {
	width: 20%;
}

#main .teaserBox .spalteRechts {
    width: 80%;
}

#main .zhlgLogos {
    width: 213px;
    height: 25px;
}

#main .sslImg {
    width: 32px;
    height: 46px;
    margin-left: 3px;
    margin-right: 12px;
}

#main .tuevLogo {
    width: 46px;
    height: 46px;
    margin-left: -4px;
    margin-right: 5px;  
}

#main .pciImg {
    width: 46px;
    height: 36px;
    margin-left: -4px;
    margin-right: 5px;  
}

#main .vcenter {
	display: table;
}

#main .vcenterContainer {
	display:        table-cell;
	vertical-align: middle;
}

/******* Upsell_Layer *******/
#main .upsell {
	background-color: white;
    border:           none;
    box-shadow:       0 0 3px #333333;
    -webkit-box-shadow: 0 0 3px #333333;
    -webkit-border-radius: 8px;
    -moz-border-radius:    8px;
    border-radius:         8px;
    padding:          14px 10px 20px;
    position:         absolute;
    top:              30%;
    left:             50%;
    margin-left:      -225px;
    width:            430px;
    text-align:       left;
    z-index: 10000;
}

#main .familienDefAuswahl input[type="radio"] {
	width: 4%;
}

#main .familienDefAuswahl label {
    width: 93%;
}

#main .upsell table.gebDatFelder {
	margin-bottom: 0;
}

#main .upsell .hint {
	margin-bottom:12px;
}


/** MUSS AM DATEIENDE STEHEN **/
/******* Aktivitaet *******/
#main .aktiv {
    display: block !important;
}

#main .inaktiv {
    display: none;
}