/* -------------------------------------------------------------------- 
                This style is based on General style definitions
          Atos Worldline Web Applications, v1.6.5
            By Le Studio, Atos Worldline, 2008
-------------------------------------------------------------------- */


/* CSS index (!):
  DEFAULT VALUES
  PAGE BODY STRUCTURE
  HEADER
  FOOTER
  LEFT COLUMN CONTENT
  MAIN BLOCKS
  TABLE SPECIFICS
  FORMS SPECIFICS
  TOOLS PAGES
  EXCEPTIONS & SPECIFICS (used sitewide)
*/

/* ------------------------- !DEFAULT VALUES --------------------------------- */
body {
	min-width: 300px;
}

#maincontainer  {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


#footer {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



@media screen and (max-width:640px) {

	#maincontainer {
	    height: 100%;
	    min-height: 100%;
	    padding-bottom: 10px;
	    width: 100%;
	}
	
	#header {
	    width: 99%;
	    left: 0;
	}
	
	#mainContent {
	   float: none;
	    left: 0;
	    margin: 0 auto;
	    max-width: 320px;
	    width: 100%;
	}
	
	a.logo, a.logo:link, a.logo:visited, a.logo:focus, a.logo:hover, a.logo:active {
    	position: absolute;
	    right: 5px;
	    top: 25%;
	}
	
	img.agesfooterlogo {
	    top: 0px;
	}
	
	#footer {
	    float: left;
	    height: auto;
	    width: 100%;
	    position: relative;
	    background: url(../imgs/footerpanel.png) repeat-x scroll 0 top #2951AD;
	}
		
	#footer p {
	    float: left;
	    padding: 0;
	    text-align: left;
	    width: 100%;
	}
	
	#footer p.version {
	    display: none;
	}
	
	#footerbar {
	    float: left;
	    height: 50px;
	    padding: 2px 0 0;
	    width: 100%;
	}
	
	a.afooter, a.afooter:link, a.afooter:visited, a.afooter:focus, a.afooter:hover, a.afooter:active {
	    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	    clear: left;
	    display: block;
	    float: left;
	    font-size: 0.7rem;
	    font-weight: bold;
	    letter-spacing: 1px;
	    margin-left: 10px;
	    padding: 0;
	    padding-bottom: 1px;
	    text-decoration: none;
	    white-space: nowrap;
	    line-height: 15px;
	}
	
	#logo {
	    float: left;
	     height: auto;
	    margin-bottom: 2px;
	    margin-top: 2px;
	    text-align: left;
	    width: 100%;
	    background: none;
	   
	}
	img.ageslogo {
	    background-image: url(../imgs/logo/Eurovignette-mit-Claim6.gif);
		background-repeat: no-repeat;
		background-color: #FFF;
		background-position: 3px 2px;
	    -moz-background-size: contain; /* Firefox */
		-webkit-background-size: contain; /* Safari, Chrome */
		background-size: contain; /* Opera, IE, W3C Standard */
		float: left;
	    height: 27.5px;
	    width: 93.75px;
	}
	
	#tools {
	    display: inline;
	    float: right;
	    margin: 2px;
	    padding: 0;
	    text-align: right;
	    white-space: nowrap;
	    width: 100px;
	}
	
	
	#tools p.information {
	    background-color: #FFFFFF;
	    color: #FF0000;
	    font-size: 1em;
	    font-weight: bold;
	    height: 28px;
	    left: 0;
	    position: absolute;
	    text-align: center;
	    top: 0;
	    width: 100%;
	    z-index: 9999;
	}
	
	#tools a, #tools a:link, #tools a:visited {
	    cursor: pointer;
	    float: right;
	    font-size: 0.55em;
	    padding-left: 10px;
	    padding-right: 10px;
	    text-decoration: underline;
	    white-space: nowrap;
	}
	
	#tools strong {
	    float: right;
	}
	
	.book input#submit_1 {
	    left: 0;
	    margin: 0;
	    padding: 0;
	    position: absolute;
	    top: 33px;
	    visibility: hidden;
	}
	
	div.book {
	    float: none;
	    margin: 0 auto;
	    max-width: 320px;
	    padding: 0 2px;
	}
	
	.book input#captcha {
	    clear: both;
	    float: left;
	    width: 12em;
	}
		
	#stepsPanel {
	    margin: 5px 0 0 4px;
	    width: 98%;
	}
	
	#fsInput {
	    float: left;
	    margin: 0 auto;
	    width: 100%;
	}
	
	#fsInput .two-cols {
	    clear: left;
	    display: table;
	    float: left;
	    margin: 0;
	    width: 100%;
	}
	
	#fsInput .two-cols-axles {
	    float: left;
	    width: auto;
	}
	
	#fsInput .two-cols-axles p {
	    clear: left;
	    display: block;
	    float: left;
	    font-size: 100%;
	    margin-bottom: 8px;
	    width: auto;
	}
	
	#fsInput label.label-behind-input {
	    float: none;
	    margin-left: 3px;
	    margin-right: 8px;
	    padding-left: 0;
	    text-align: left;
	    vertical-align: -3px;
	    width: auto;
	}
	
	#fsInput .check-tow-cols {
	    float: left;
	    font-size: 0.9em;
	    font-weight: bold;
	    margin: 0;
	    padding: 0 5px 0 0;
	    position: relative;
	    text-align: left;
	    top: 6px;
	    width: auto;
	}
	#fsInput .check-tow-cols input {
	    margin: 0;
	    width: auto;
	}
	
	#fsInput .captchaPan {
	    clear: left;
	    display: table;
	    float: left;
	    margin: 0 0 5px 5px;
	    width: auto;
	}
	
	#fsInput .input-three-cols {
	    clear: left;
	    display: inline;
	    float: left;
	    margin: 0 0 2px;
	}
	
	#fsInput .input-three-colsCaptcha {
	    clear: both;
	    display: block;
	    left: 0;
	    position: relative;
	    vertical-align: top;
	}
	
	#fsInput .detailPan .two-cols {
	    clear: left;
	    float: left;
	    margin: 0 0 2px;
	    width: 100%;
	}
	
	#fsInput .detailPan label {
	    clear: both;
	    display: table-cell;
	    float: left;
	    font-size: 100%;
	    font-weight: bold;
	    margin: 0;
	    padding: 0 0 3px;
	    text-align: left;
	    width: 170px;
	    word-wrap: break-word;
	}
	
	#fsInput .detailPan label.afterCheckbox {
	    clear: none;
	    float: none;
	    margin: 0;
	    padding:  0 4px 0 0;
	    text-align: left;
	    width: 300px !important;
	    word-break: normal;
    	word-wrap: break-word;
	}
	
	
	#fsInput .detailPan label.label-behind-input {
	    float: none;
	    text-align: left;
	    width: auto;
	}
	
	#fsInput .detailPan .input-three-cols {
	    clear: none;
	    display: inline;
	    float: left;
	    margin: 0 0 2px;
	}
	
	#fsInput .detailPan span.bookingdata {
	    clear: none;
	    display: table-cell;
	    float: none;
	    font-size: 100%;
	    height: 1.3em;
	    line-height: 1.3em;
	    padding-bottom: 3px;
	    padding-right: 2px;
	    vertical-align: top;
	    width: 100%;
	    word-break: break-all;
	    word-wrap: break-word;
	}
	
	#fsInput .detailPan span.bookingdata.breakWord {
	    width: 10em;
	}
	
	#fsInput .card-type label.label-behind-input {
	    float: none;
	    margin: 0 0 0 10px;
	    padding-left: 0;
	    text-align: left;
	    vertical-align: 5px;
	    width: auto;
	}
	
	#fsInput .two-cols.detailPanTrenner {
	    clear: left;
	    display: table;
	    float: left;
	    margin: 0;
	    width: 100%;
	}
	
	#fsInput .trenner {
	    clear: both;
	    float: left;
	    height: 2px;
	    line-height: 2px;
	    margin: 15px 0;
	    min-width: 300px;
	    text-align: left;
	    width: 100%;
	}
	
	#fsInput .detailPanTrenner .trenner {
	    clear: both;
	    float: left;
	    height: 2px;
	    line-height: 2px;
	    margin: 15px 0;
	    min-width: 300px;
	    text-align: left;
	    width: 100%;
	}
	
	#fsInput .detailPan label.captchaLabel {
	    display: table-row;
	    width: 100%;
	    margin: 0;
	    padding-left: 0;
	}
	
	.input-three-colsCaptcha input {
	    display: block;
	    margin-left: 0;
	}
	
	#fsInput .detailPan label.priceLabel {
	    clear: left;
	    display: table-row;
	    float: left;
	    font-size: 100%;
	    height: 1.3em;
	    line-height: 1.3em;
	    margin: 0;
	    padding: 0;
	    text-align: left;
	    width: 11.5em !important;
	}
	
	#fsInput .detailPan .input-three-cols.price {
	    clear: none;
	    display: inline;
	    float: right;
	    margin: 0 0 2px;
	}
	
	#fsInput .detailPan .input-three-cols.price span.bookingdata {
	    clear: none;
	    display: table-row;
	    float: none;
	    font-size: 100%;
	    height: 1.3em;
	    line-height: 1.3em;
	    word-break: break-all;
	    word-wrap: break-word;
	}
	
	.two-cols span.ckb_radio_card {
	    float: left;
	    font-size: 0.9em;
	    font-weight: bold;
	    height: 1.3em;
	    line-height: 1.3em;
	    margin: 0 0 0 10px;
	    text-align: right;
	    width: auto;
	}
	
	.fsPanel td {
	    font-size: 0.75rem;
	}
	
	input.ckb {
	    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	    border: 0 none;
	    float: none;
	    padding-left: 0;
	    position: relative;
	    top: 4px;
	    width: 15px;
	}
/*.functionBar {
	    clear: both;
	    display: block;
	    float: left;
	    margin: 0 auto;
	    max-width: 316px;
	    text-align: center;
	    width: 100%;
	}
	
p.functionBarRight {
	    padding: 5px 0;
	}
	
#fsInput p.functionBarRight input.btsubmit, #fsInput p.functionBarRight input.btsubmit:hover  {
	    cursor: pointer;
	    font-size: 0.75rem;
	    font-weight: bold;
	    letter-spacing: 1px;
	    margin: 5px 0;
	    padding: 6px 0;
	    text-decoration: none;
	    text-transform: uppercase;
	    vertical-align: 0;
	    width: 100%;
	}	
#fsInput p.functionBarRight a.btsubmit, #fsInput p.functionBarRight a.btsubmit:hover, #fsInput p.functionBarRight a.btsubmit:active {
    	cursor: pointer;
	    float: left;
	    font-size: 0.75rem;
	    font-weight: bold;
	    letter-spacing: 1px;
	    margin: 0;
	    min-width: 10.5em;
	    padding: 7px 0 5px;
	    text-align: center;
	    text-decoration: none;
	    text-transform: uppercase;
	    vertical-align: -1px;
	    width: 100%;
	}


		
span.functionBarDetailsRight input.btsubmit, span.functionBarDetailsRight input.btsubmit:hover {
	   cursor: pointer;
	    font-size: 0.75rem;
	    font-weight: bold;
	    margin: 5px 0;
	    padding: 6px 0;
	    text-decoration: none;
	    text-transform: uppercase;
	    width: 100%;
	}
span.functionBarDetailsRight a.btsubmit, span.functionBarDetailsRight a.btsubmit:hover, span.functionBarDetailsRight a.btsubmit:active {
	    clear: left;
	    cursor: pointer;
	    display: block;
	    float: left;
	    font-size: 0.75rem;
	    font-weight: bold;
	    letter-spacing: 1px;
	    margin: 0;
	    padding: 4px 0;
	    text-align: center;
	    text-decoration: none;
	    text-transform: uppercase;
	    width: 100%;
	} */
	
	td.tdfunctionBarRight {
		border: none;
		padding: 0;
	}
	
	label.captchaLabel {
	    display: table-row;
	    width: 100%;
	    margin: 0;
	    padding-left: 0;
	}
	
	label.captchaLabel + img {
	    border: medium none;
	    display: table-row;
	    float: left;
	    clear: both;
	}
	
	.tariffPanel_details {
		clear: left;
	    float: left;
	    max-width: 320px;
	    width: 100%;
	}
 	
 	.tariffPanel_details_mobile {
		display:inline;
	}	
	
	.calendar_image {
		float: left;
		margin-left: 5px;
	}
	
	.booking_info {
	    float: left;
	    font-size: 1.1em;
	    font-style: oblique;
	    font-weight: bold;
	    margin: 8px 0;
	    width: 85%;
	}
	
	.signature_text {
	    clear: left;
	    display: block;
	    float: left;
	    margin: 8px 0;
	    width: 100%;
	}
	
	.signature_text span.bookingdata {
	    clear: left;
	    display: table;
	    float: left;
	    font-size: 85%;
	    width: auto;
	}
	
	#downloadPdf {
	    clear: left;
	    display: block;
	    float: left;
	    width: 100%;
	}
	
	#print {
	    clear: left;
	    display: block;
	    float: left;
	    width: 100%;
	}
	
	th {
	    font-size: 0.70rem;
	    font-weight: normal;
	    padding: 1px;
	    text-align: left;
	    text-transform: uppercase;
	    white-space: normal;
	}
	th.tdrgt {text-align: right;}
	th.tdctr {text-align: center;}
	th.tdlft {text-align: left;}
	
	td.tdrgt {
	    padding: 1px;
	    text-align: right;
	}
	
	td.tdctr {
	    padding: 1px;
	    text-align: center;
	}
	
	td.tdlft {
	    padding: 1px;
	    text-align: left;
	}
	
	.menueoff {
	    display: block;
	    font-size: 1.0em;
	    margin: 0;
	    padding: 0 5px;
	}
	
	.menueon {
	    display: block;
	    font-size: 1.0em;
	    margin: 0;
	    padding: 0 5px;
	}
	
	label {
	    clear: left;
	    float: left;
	    font-size: 0.85rem;
	    font-weight: bold;
	    margin: 2px 0 5px;
	    padding-right: 0;
	    text-align: left;
	    width: 100%;
	}
	
	img.card-icon {
	    left: 0px;
	    position: relative;
	    top: 0px;
	}
	
	.card-type {
	    clear: both;
	    float: left;
	    left: 0;
	    position: relative;
	    top: 0;
	    width: 100%;
	}
	
	.card-type input.ckb {
	    float: left;
	    margin-right: 10px;
	    padding-left: 0;
	    position: relative;
	    top: 2px;
	    width: 15px;
	}
	
	.card-type .card-icon {
	    display: inline;
	    float: none;
	    margin: 0;
	    position: relative;
	    width: auto;
	}
	
	.downloadPanel th {
	    height: 25px;
	    padding: 0;
	    text-align: left;
	}
	
	th.downth strong {
	    float: left;
	    word-break: break-all;
	    word-wrap: break-word;
	    font-size: 85%;
	    padding: 5px 5px 0;
	}
	
	th.downbt a.btAction, th.downbt a.btAction:link, th.downbt a.btAction:visited, th.downbt a.btAction:focus, th.downbt a.btAction:hover, th.downbt a.btAction:active {
	    padding: 1px 5px;
	}
	
	h2 {
	    float: left;
	    font-size: 0.75rem;
	    padding: 5px 1%;
	    width: 97%;
	}
	
	span.bookingdata {
	    clear: none;
	    display: table-cell;
	    float: none;
	    font-size: 100%;
	    height: 1.3em;
	    line-height: 1.3em;
	    padding-bottom: 3px;
	    padding-right: 2px;
	    vertical-align: top;
	    width: 100%;
	    word-wrap: break-word;
	}
	
	span.functionBarDetailsRight {
	    clear: both;
	    float: left;
	    margin: 0 auto 5px;
	    padding: 0;
	    text-align: center;
	    width: 100%;
	}

	div.errorOuter {
	    border: medium none;
	    float: left;
	    margin-bottom: 10px;
	    max-width: 262px;
	    text-align: center;
	    width: 100%;
	}
	
	DIV.t-error {
	    border: 1px solid #D74535;
	    float: left;
	    left: auto;
	    margin: 0 auto;
	    padding: 0;
	    position: relative;
	    text-align: center;
	    width: 98%;
	}
	
	
/* -- Vignettenübersicht und Detailansicht bei Mobiler Version --  */

.tariffPanel_details.vignettenDetails {
	display: none;
}
dl {
    display: table;
    float: left;
    margin: 0;
    padding: 0;
    width: 98.5%;
}

dt {
    clear: left;
    color: #264BA4;
    display: table-cell;
    float: left;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.3em;
/*     margin: 2px 0 5px 10px;
 */    padding-right: 8px;
    position: relative;
    text-align: left;
    vertical-align: top;
    width: 12em;
    word-wrap: break-word;
}
dd {
    clear: right;
    display: table-cell;
    float: left;
    font-size: 0.8rem;
    line-height: 1.3em;
    margin: 2px 0;
    min-height: 2em;
    padding: 0;
    vertical-align: top;
    word-wrap: break-word;
}

.tariffPanel_details_mobile h4 {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color;
    border-image: none;
    border-style: none none solid;
    border-width: medium medium 1px;
    font-size: 0.85rem;
    margin-top: 10px;
    padding: 0 0 0 2px;
}

label.axlesLabel {
	display: none;
}

label.kfzNationlabel {
	display: none;
}
	
#fsInput .detailPan .input-three-cols.price {
    clear: none;
    display: inline;
    float: left;
    margin: 0 0 2px;
}

.two-cols span.ckb_radio_card {
    float: left;
    font-size: 0.9em;
    font-weight: bold;
    height: 2em;
    line-height: 2em;
    margin: 0;
    text-align: left;
    width: auto;
}

#fsInput .two-cols label.label-behind-input {
    display: inline;
    float: none;
    padding-left: 5px;
    text-align: left;
    vertical-align: -3px;
    width: auto;
    height: 2em;
    line-height: 2em;
}

/* ------------------------- hide special label ------------------------- */
#fsInput .detailPan label.cardType {
	display: none;
}

#fsInput .detailPan label.cardNumber {
	display: none;
}
#fsInput .detailPan label.cardExpiry {
	display: none;
}
#fsInput .detailPan label.labelfunctionBarRight {
	width: 100% !important;
}


/* ------------------------- tariffPanel_details  ------------------------- */
.thAction {
	display: none;
}

.tdAction {
	display: none;
}


table.default {
    margin: 0;
    min-width: 250px;
    padding: 0;
    width: 99%;
}

table.default.calculationDetailTable  {
    margin: 0;
    min-width: 250px;
    padding: 0;
    width: 99%;
    left: 0;
}

div.two-cols1 div.label-behind-input {
    display: none;
}

div.two-cols1 div.radio_check-behind_input {
    display: inline;
    float: left;
    margin: 0;
    padding-right: 5px;
    text-align: right;
    width: auto;
}

.welcome {
    float: left;
    margin: 0 30px 0 5px;
}


#fsInput .two-cols .card-type label.cardTypeCardNumber {
    clear: both;
    float: left;
    width: 100%;
}


#fsInput .two-cols .card-type label.cardTypeCardHolder {
    clear: both;
    float: left;
    width: 100%;
}


#fsInput .two-cols .card-type label.cardTypeCVV {
    clear: both;
    float: left;
    width: 100%;
}

.card-type div {
	clear: left;
    float: left;
}

#fsInput .two-cols_cardsinfo {
    margin-left: 0;
}

#fsInput ul.functionBarFinalList {
	float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#fsInput ul.functionBarFinalList li {
	margin: 0;
    padding: 0;
    list-style: none outside none;
}

#fsInput ul.functionBarPrintPdfList {
	float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#fsInput ul.functionBarPrintPdfList li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#fsInput li.functionBarButtonFinal div.functionBar {
    clear: both;
    float: left;
    width: 100%;
}

#fsInput li.functionBarButtonFinal div.functionBar p.functionBarRight {
	padding: 0;
	width: 100%;
}



#fsInput ul.functionBarPrintPdfList p.functionBarRight {
    padding: 0;
    width: 100%;
}

#pSteps span {
    padding: 3px 15px 2px;
}

#mainctPP dt {
    background: url(../imgs/subpanel_head.png) repeat-x scroll 0 2em #2951AD;
    font-weight: bold;
}
#mainctPP dt {
    font-size: 0.75rem;
    font-weight: bold;
    height: 4em;
    margin: 0;
    padding: 2px 1%;
    text-align: left;
    width: 98%;
}


/* ------ Date field and Calendar -------*/
img.dateTriggerImage {
    cursor: pointer;
    left: 2px;
    position: relative;
    top: 7px;
}
/*div.calendar {
    bottom: 0 !important;
    position: fixed !important;
    right: 0 !important;
    max-height: 200px;
}*/

div.calendar {
    left: 10% !important;
    max-height: 200px;
    z-index: 999;
}
/* ------ Date field -------*/


caption {
    font-size: 0.75rem;
    font-weight: bold;
    margin-top: 10px;
    padding: 5px 0;
    text-align: left;
    text-transform: uppercase;
    width: auto;
}


/* --- display none for Card details in booking tab 3 and 4  --- */
#selectcardtypetab .detailPan, #selectcardtypetab .detailPanTrenner {
	display: none;
}
#cardinfotab .detailPan, #cardinfotab .detailPanTrenner {
	display: none;
}

/* -- End of mobile css -- */
}