/* FARBEN
orange: #fe831f
gruen: #009640
*/

/* Dieses CSS gilt fuer ALLE Shops */

	.bestellung.new,
	.bestellung.newsecondpage,
	.tx-greenzones .pay {
		width: 520px;
		font-family: 'Verdana';
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	.bestellung .box.euronorm {
		display: none;
	}



/* INIT */
/* siehe die individuellen Shops */



/* die grossen Kaesten */
.bestellung .fahrzeug,
.bestellung .start,
.bestellung .kontaktdaten,
.bestellung .firmendaten,
.bestellung .details,
.bestellung .rechnungsadresse,
.bestellung .lieferadressefrage,
.bestellung .lieferadresse,
.bestellung .ende,
.bestellung .rechnung,
.bestellung .abschluss, 
.tx-greenzones .pay {
    background-color: #eee;
    border: 1px #000 solid;
    /* padding: 0.5em; */
    margin-bottom: 1.5em;
    display: inline-block;
    width: 100%;
}
/* die Checkboxen */
.bestellung .weiteresfahrzeug {
    /* background-color: red; */
    /* padding: 0.5em; */
    border-top: 1px solid #000;
}
.bestellung .fahrzeug,
.bestellung .lieferadresse {
}
.bestellung .fahrzeug_0 {
}



.bestellung .ueberschrift,
.tx-greenzones .pay .ueberschrift {
    /* background-color: #ddd; */
    /* border: 1px #000 solid; */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.25em;
    font-size: 1.5em;
}



.bestellung .box {
    /* background-color: #ddd; */
    /* border: 1px #000 solid; */
    clear: left;
    display: block;
    /* padding-bottom: 3.5em; */
}
.bestellung .box.lieferadressefrage {
    display: inline-block;
}
.bestellung.new .lieferadresse {
	display: none;
    margin-top: -2.0em;
}
.bestellung .box .bezeichner {
    /* background-color: #ccc; */
    /* border: 1px #000 solid; */
    /* padding: 1.0em; */
    margin-bottom: 1.5em;
    float: left;
    width: 150px;
    padding-top: 1.0em;
    margin-bottom: 1.0em;
    padding-right: 0.5em;
    padding-left: 0.5em;
}
.bestellung .box .inhalt {
    /* background-color: #bbb; */
    /* border: 1px #000 solid; */
    /* padding: 0.5em; */
    /* margin-bottom: 1em; */
    float: left;
    margin-top: 0.5em;
    margin-right: 0.5em;
}
.bestellung.newsecondpage .box .inhalt {
    padding-top: 0.5em;
    padding-left: 0.5em;
	max-width: 330px;
	font-weight: bold;
}
.bestellung.newsecondpage .box .inhalt .erklaerung {
	font-size: 0.85em;
	font-weight: normal;
}
.bestellung.newsecondpage .box.newsletter .bezeichner {
	margin-bottom: 0;
}
.bestellung.newsecondpage .box.newsletter .inhalt {
	margin-left: 165px; /* weil die Breite der LABELs auch in PX ist */
	max-width: inherit;
	margin-bottom: 1em;
}
.bestellung .box .inhalt INPUT[type="checkbox"] {
    height: 1.5em;
    width: 1.5em;
    margin-top: 0.5em;
}
.bestellung .box .inhalt INPUT,
.bestellung .box .inhalt SELECT {
    padding: 0.5em;
}
.bestellung .box .inhalt SELECT{
	/* line-height: 1.5em; */
	/* font-size: 1.0em; */
}
.bestellung .box .inhalt SELECT OPTION {
    padding: 0.25em; /* geht nicht im IE */
}
.bestellung .box .inhalt SELECT OPTION:hover {
	background-color: #fe831f;
}
.bestellung .box .inhalt LABEL {
    display: none;
}
.bestellung .box .inhalt IMG {
    margin-bottom: 1em;
}
.bestellung .box .inhalt INPUT.erstzulassung_datepicker.calendar-widget {
	background-image: url(/static-greenzones/Icons/ic_action_calendar_day.png);
	background-repeat: no-repeat;
	background-position: right;
	border-width: 1px;
	padding: 0.6em;
	border-style: inset outset outset inset;
	cursor: pointer;
}

.bestellung .box .inhalt_preis,
.bestellung .box .inhalt_zusatz {
    float: left;
    /* width: 20em; */
    margin-bottom: 0.5em;
}
.bestellung .box .inhalt_preis .extraHinweis {
	font-size: 80%;
}
.bestellung .box .inhalt_preis .preis_zusatz,
.bestellung .box .inhalt_zusatz .zusatz {
    background-color: #009640;
    /* border: 1px #f00 solid; */
    padding: 0.5em;
    /* margin-left: 0.5em; */
    margin-top: 0.5em;
    color: #fff;
}
.bestellung .box .inhalt_preis {
}
.bestellung .box .inhalt_preis .preis_zusatz {
    display: none;
}
.bestellung .box .inhalt_preis .preis_zusatz.leer {
    background-color: inherit;
    border: none;
}
	/* AGBs und Newsletter / NL */
		.bestellung .ende .box {
		}
		.bestellung .ende .box .bezeichner {
			width: 20em;
		}
		.bestellung .ende .box .inhalt_zusatz {
			margin-left: 0.5em;
		}

	/* die Knoepfe */
		.bestellung input[type="submit"],
		.tx-greenzones .pay FORM#paysquare INPUT[type="submit"],
		.tx-greenzones .pay FORM#paysquare .submit_redirect_link,
		.tx-greenzones .pay .inhalt .ueberweisungstabelle input[type="submit"] {
			background-color: #009640;
			padding-top: 0.5em;
			padding-bottom: 0.5em;
			padding-left: 1.5em;
			padding-right: 1.5em;
			border-top: 2px solid #fff;
			border-left: 2px solid #fff;
			border-bottom: 2px solid #fff;
			border-right: 2px solid #fff;
			color: #fff;
			font-size: 1em;
		}
		.bestellung.newsecondpage .abschluss input[type="submit"] {
			margin-left: 0.5em;
		}
		.bestellung.newsecondpage input[type="submit"] {
			margin-right: 0.5em;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
			border-top: 2px solid #fff; /* die Hintergrundfarbe der Seite */
		}
		.tx-greenzones .pay FORM#paysquare INPUT[type="submit"] {
			display: none;
		}
		.tx-greenzones .pay FORM#paysquare .submit_redirect_link,
		.tx-greenzones .pay .inhalt .ueberweisungstabelle input[type="submit"] {
			margin-bottom: 1.0em;
			margin-bottom: 0.5em;
			border-top: 2px solid #eee; /* die Hintergrundfarbe der Seite */
			border-left: 2px solid #eee; /* die Hintergrundfarbe der Seite */
			border-bottom: 2px solid #eee; /* die Hintergrundfarbe der Seite */
			border-right: 2px solid #eee; /* die Hintergrundfarbe der Seite */
		}
		.tx-greenzones .pay FORM#paysquare .submit_redirect_link A {
			color: #fff;
			text-decoration: none;
		}
		.bestellung input:hover[type="submit"],
		.tx-greenzones .pay FORM#paysquare INPUT:hover[type="submit"],
		.tx-greenzones .pay FORM#paysquare .submit_redirect_link:hover,
		.tx-greenzones .pay .inhalt .ueberweisungstabelle input:hover[type="submit"] {
			border-top: 2px solid #fe831f;
			border-left: 2px solid #fe831f;
			border-bottom: 2px solid #fe831f;
			border-right: 2px solid #fe831f;
		}
		
    /* die Fehlermeldungen / Errors */
        .bestellung .typo3-messages {
			font-family: inherit;
		}
        .bestellung .typo3-messages .message-error {
			display: none;
		}
        .bestellung .f3-form-error {
			border: red 1px solid;
		}
        .bestellung .typo3-messages .message-error .message-body {
		}
        .bestellung .error {
			background-color: red;
			margin-top: 1em;
			padding: 0.5em;
			color: #fff;
			/* font-weight: bold; */
		}
        .bestellung .error A,
        .bestellung .error A:link {
			color: blue;
			text-decoration: underline;
		}
        .bestellung .error ~ DIV.bezeichner,
        .bestellung .error ~ DIV.inhalt INPUT {
			color: red;
			font-weight: bold;
		}
		.erstzulassung .error:nth-of-type(2) {
			display: none;
		}

    /* INFO i's */
        .bestellung .info_i_neu {
			display: none;
		}
        .bestellung .info_i {
            /* background: brown; */
            width: 2em;
            height: 2em;
            float: left;
            margin-top: 0.5em;
            margin: 0.5em;
			background: url(/static-greenzones/Icons/Info-Button.png); /* FallBack, wenn SVG nicht unterstuetzt wird */
			background: url(/static-greenzones/Icons/Info-Button.svg), linear-gradient(transparent, transparent);
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
          }
        .bestellung .info_i .info_box {
            display: none;
        }
        .bestellung .info_i:hover .info_box ,
        .bestellung .info_i:active .info_box {
            clear: left;
            display: block;
            background: #fe831f;
            background-image: url(/static-greenzones/Icons/Info-Button.png);
            border-top-left-radius: 1.0em;
            -moz-border-radius-topleft: 1.0em;
            -webkit-background-size: 2.0em;
            -moz-background-size: 2.0em;
            -o-background-size: 2.0em;
            background-size: 2.0em;
            padding: 20px;
            width: 300px;
            height: auto;
            position: relative;
            z-index: 100;
            color: #fff;
   			-webkit-user-select: none; 
			-webkit-touch-callout: none;
            background-image: none;
   }
        .bestellung .info_i:hover .info_box .einzelinfo,
        .bestellung .info_i:active .info_box .einzelinfo {
            margin-bottom: 1.5em;
			-webkit-user-select: none; 
			-webkit-touch-callout: none;
        }
        .bestellung .info_i:hover .info_box .einzelinfo:last-child,
        .bestellung .info_i:active .info_box .einzelinfo:last-child {
            margin-bottom: 0;
			-webkit-user-select: none; 
			-webkit-touch-callout: none;
        }
        .bestellung .info_i:hover .info_box .einzelinfo .ueberschrift,
        .bestellung .info_i:active .info_box .einzelinfo .ueberschrift {
            font-size: 1.0em;
            margin-bottom: 0.5em;
            font-weight: bold;
			-webkit-user-select: none; 
			-webkit-touch-callout: none;
        }
        .bestellung .info_i:hover .info_box .einzelinfo .erklaerung,
        .bestellung .info_i:active .info_box .einzelinfo .erklaerung {
            font-size: 0.9em;
            /* margin-bottom: 1.5em; */
			-webkit-user-select: none; 
			-webkit-touch-callout: none;
        }
		.bestellung.newsecondpage .box:last-child .erklaerung {
			padding-bottom: 1.0em;
		}
		
	/* fuer die Zusatzbox: AGB-Link */
		.bestellung .box .zusatz A {
			/* color: #fe831f; */
			color: #fff;
			text-decoration: none;
		}
		.bestellung .box .zusatz A:hover{
			text-decoration: underline;
		}
		
	/* fuer die Zusatzbox: AGB-Link */
		.tx-greenzones .bestellung .rechnungstabelle {
			margin-left: 0.5em;
			margin-right: 0.5em;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
		}
		.tx-greenzones .bestellung .rechnungstabelle table {
			border-spacing: 0;
			width: 100%;
		}
		.bestellung .rechnungstabelle table THEAD {
			font-size: 0.85em;
			font-weight: bold;
		}
		.bestellung .rechnungstabelle table TBODY TR:nth-last-child(3) TD:nth-last-child(2),
		.bestellung .rechnungstabelle table TBODY TR:nth-last-child(3) TD:last-child {
			border-top: 1px solid #000;
		}
		.bestellung .rechnungstabelle table TBODY TR:nth-last-child(2) TD:nth-last-child(2),
		.bestellung .rechnungstabelle table TBODY TR:nth-last-child(2) TD:last-child {
		}
		.bestellung .rechnungstabelle table TBODY TR:last-child TD:nth-last-child(2),
		.bestellung .rechnungstabelle table TBODY TR:last-child TD:last-child {
			border-top: 1px solid #000;
			font-weight: bold;
		}
		.bestellung .rechnungstabelle table TD:last-child {
			width: 5.5em;
			text-align: right;
		}
	/* Die Bezahlung */
		.tx-greenzones .pay .bezeichner {
			padding: 0.5em;
			margin-top: 1em;
			font-size: 1.25em;
		}
		.tx-greenzones .pay .inhalt {
			padding: 0.5em;
		}
		.tx-greenzones .pay .inhalt .ueberweisungstabelle {
			margin-bottom: 1em;
		}
		.tx-greenzones .pay .inhalt TABLE.ueberweisungstabelle {
		}
		.tx-greenzones .pay .inhalt TABLE.ueberweisungstabelle TR {
		}
		.tx-greenzones .pay .inhalt TABLE.ueberweisungstabelle TD {
		}
		.tx-greenzones .pay .inhalt  TABLE.ueberweisungstabelle TD:last-child {
			font-weight: bold;
		}
		.tx-greenzones .pay .inhalt .ueberweisungstabelle input {
			padding: 0.5em;
			margin-bottom: 0.5em;
		}
		.tx-greenzones .pay .inhalt .ueberweisungstabelle input#uid,
		.tx-greenzones .pay .inhalt .ueberweisungstabelle input#geheimnis,
		.tx-greenzones .pay .inhalt .ueberweisungstabelle input#preis,
		.tx-greenzones .pay .inhalt .ueberweisungstabelle input#fahrzeugkumulierthidden {
			width: 16em;
		}
		.tx-greenzones .pay .inhalt .ende {
		}



/* ausserhalb bzw. oberhalb vom Shop - Hinweis zum Shop/Produkt */
	#shophinweis {
		clear: both;
		position: relative;
		display: block;
		display: table;
	}
	#shophinweis .bild {
		padding-right: 1em;
		/* float: left; */
		/* width: 50px; */
		display: table-cell;
		vertical-align: middle;
	}
	#shophinweis .text {
		/* float: left; */
		/* width: 450px; */
		display: table-cell;
		vertical-align: middle;
	}
	#shophinweis .text P.bodytext {
		font-size: 1.25em;
	}



/* ausserhalb bzw. oberhalb vom Shop - Sprachwahl */
	#shopsprachwahl {
	}
	#shopsprachwahl P {
		/* font-size: 0.75em; */
	}
	#shopsprachwahl DIV {
		float: left;
		margin-bottom: 1em;
	}
	#shopsprachwahl DIV.beschreibung {
		margin-right: 0.25em;
	}
	#shopsprachwahl DIV.sprache {
		margin-right: 0.3em;
		margin-top: 0.5em;
	}
	#shopsprachwahl DIV.beschreibung.aktuell,
	#shopsprachwahl DIV.sprache.aktuell {
		opacity: 1 !IMPORTANT;
	}



/* Commerzbank bzw. PaySquare */
.wpwl-form {
	margin: 0;
}
.betrag-titel {
	margin-top: 0.3em;
}
.betrag-wert {
	float: left;
	margin-top: 0.1em;
	background-color: #f5f5f5;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.65em;
	border-radius: 4px;
}



/* Throbber */
	FORM[name=newBestellung]{
		position: relative;
	}
	FORM[name=newBestellung] #throbber{
		background-color: #ccc;
		height: 100%;
		width: 100%;
		position: absolute;
		border: 1px solid #ccc;
		z-index: 10;
		/* background-image: url();
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: center;
		background-position: center center; */
		opacity: 0.95;
		transition: opacity 10s;
	}
	FORM#newBestellung #throbber {
		display: none;
	}
	FORM#newBestellungSecondPage #throbber {
		display: block;
	}
	FORM[name=newBestellung] #throbber .platzhalter {
		height: 75%;
	}
	.windows8 {
		position: relative;
		width: 380px;
		height:380px;
		margin:auto;
	}

	.windows8 .wBall {
		position: absolute;
		width: 361px;
		height: 361px;
		opacity: 0;
		transform: rotate(225deg);
			-o-transform: rotate(225deg);
			-ms-transform: rotate(225deg);
			-webkit-transform: rotate(225deg);
			-moz-transform: rotate(225deg);
		animation: orbit 5.4425s infinite;
			-o-animation: orbit 5.4425s infinite;
			-ms-animation: orbit 5.4425s infinite;
			-webkit-animation: orbit 5.4425s infinite;
			-moz-animation: orbit 5.4425s infinite;
	}

	.windows8 .wBall .wInnerBall{
		position: absolute;
		width: 48px;
		height: 48px;
		background: rgb(254,131,31);
		left:0px;
		top:0px;
		border-radius: 48px;
	}

	.windows8 #wBall_1 {
		animation-delay: 1.186s;
			-o-animation-delay: 1.186s;
			-ms-animation-delay: 1.186s;
			-webkit-animation-delay: 1.186s;
			-moz-animation-delay: 1.186s;
	}

	.windows8 #wBall_2 {
		animation-delay: 0.233s;
			-o-animation-delay: 0.233s;
			-ms-animation-delay: 0.233s;
			-webkit-animation-delay: 0.233s;
			-moz-animation-delay: 0.233s;
	}

	.windows8 #wBall_3 {
		animation-delay: 0.4765s;
			-o-animation-delay: 0.4765s;
			-ms-animation-delay: 0.4765s;
			-webkit-animation-delay: 0.4765s;
			-moz-animation-delay: 0.4765s;
	}

	.windows8 #wBall_4 {
		animation-delay: 0.7095s;
			-o-animation-delay: 0.7095s;
			-ms-animation-delay: 0.7095s;
			-webkit-animation-delay: 0.7095s;
			-moz-animation-delay: 0.7095s;
	}

	.windows8 #wBall_5 {
		animation-delay: 0.953s;
			-o-animation-delay: 0.953s;
			-ms-animation-delay: 0.953s;
			-webkit-animation-delay: 0.953s;
			-moz-animation-delay: 0.953s;
	}



	@keyframes orbit {
		0% {
			opacity: 1;
			z-index:99;
			transform: rotate(180deg);
			animation-timing-function: ease-out;
		}

		7% {
			opacity: 1;
			transform: rotate(300deg);
			animation-timing-function: linear;
			origin:0%;
		}

		30% {
			opacity: 1;
			transform:rotate(410deg);
			animation-timing-function: ease-in-out;
			origin:7%;
		}

		39% {
			opacity: 1;
			transform: rotate(645deg);
			animation-timing-function: linear;
			origin:30%;
		}

		70% {
			opacity: 1;
			transform: rotate(770deg);
			animation-timing-function: ease-out;
			origin:39%;
		}

		75% {
			opacity: 1;
			transform: rotate(900deg);
			animation-timing-function: ease-out;
			origin:70%;
		}

		76% {
		opacity: 0;
			transform:rotate(900deg);
		}

		100% {
		opacity: 0;
			transform: rotate(900deg);
		}
	}

	@-o-keyframes orbit {
		0% {
			opacity: 1;
			z-index:99;
			-o-transform: rotate(180deg);
			-o-animation-timing-function: ease-out;
		}

		7% {
			opacity: 1;
			-o-transform: rotate(300deg);
			-o-animation-timing-function: linear;
			-o-origin:0%;
		}

		30% {
			opacity: 1;
			-o-transform:rotate(410deg);
			-o-animation-timing-function: ease-in-out;
			-o-origin:7%;
		}

		39% {
			opacity: 1;
			-o-transform: rotate(645deg);
			-o-animation-timing-function: linear;
			-o-origin:30%;
		}

		70% {
			opacity: 1;
			-o-transform: rotate(770deg);
			-o-animation-timing-function: ease-out;
			-o-origin:39%;
		}

		75% {
			opacity: 1;
			-o-transform: rotate(900deg);
			-o-animation-timing-function: ease-out;
			-o-origin:70%;
		}

		76% {
		opacity: 0;
			-o-transform:rotate(900deg);
		}

		100% {
		opacity: 0;
			-o-transform: rotate(900deg);
		}
	}

	@-ms-keyframes orbit {
		0% {
			opacity: 1;
			z-index:99;
			-ms-transform: rotate(180deg);
			-ms-animation-timing-function: ease-out;
		}

		7% {
			opacity: 1;
			-ms-transform: rotate(300deg);
			-ms-animation-timing-function: linear;
			-ms-origin:0%;
		}

		30% {
			opacity: 1;
			-ms-transform:rotate(410deg);
			-ms-animation-timing-function: ease-in-out;
			-ms-origin:7%;
		}

		39% {
			opacity: 1;
			-ms-transform: rotate(645deg);
			-ms-animation-timing-function: linear;
			-ms-origin:30%;
		}

		70% {
			opacity: 1;
			-ms-transform: rotate(770deg);
			-ms-animation-timing-function: ease-out;
			-ms-origin:39%;
		}

		75% {
			opacity: 1;
			-ms-transform: rotate(900deg);
			-ms-animation-timing-function: ease-out;
			-ms-origin:70%;
		}

		76% {
		opacity: 0;
			-ms-transform:rotate(900deg);
		}

		100% {
		opacity: 0;
			-ms-transform: rotate(900deg);
		}
	}

	@-webkit-keyframes orbit {
		0% {
			opacity: 1;
			z-index:99;
			-webkit-transform: rotate(180deg);
			-webkit-animation-timing-function: ease-out;
		}

		7% {
			opacity: 1;
			-webkit-transform: rotate(300deg);
			-webkit-animation-timing-function: linear;
			-webkit-origin:0%;
		}

		30% {
			opacity: 1;
			-webkit-transform:rotate(410deg);
			-webkit-animation-timing-function: ease-in-out;
			-webkit-origin:7%;
		}

		39% {
			opacity: 1;
			-webkit-transform: rotate(645deg);
			-webkit-animation-timing-function: linear;
			-webkit-origin:30%;
		}

		70% {
			opacity: 1;
			-webkit-transform: rotate(770deg);
			-webkit-animation-timing-function: ease-out;
			-webkit-origin:39%;
		}

		75% {
			opacity: 1;
			-webkit-transform: rotate(900deg);
			-webkit-animation-timing-function: ease-out;
			-webkit-origin:70%;
		}

		76% {
		opacity: 0;
			-webkit-transform:rotate(900deg);
		}

		100% {
		opacity: 0;
			-webkit-transform: rotate(900deg);
		}
	}

	@-moz-keyframes orbit {
		0% {
			opacity: 1;
			z-index:99;
			-moz-transform: rotate(180deg);
			-moz-animation-timing-function: ease-out;
		}

		7% {
			opacity: 1;
			-moz-transform: rotate(300deg);
			-moz-animation-timing-function: linear;
			-moz-origin:0%;
		}

		30% {
			opacity: 1;
			-moz-transform:rotate(410deg);
			-moz-animation-timing-function: ease-in-out;
			-moz-origin:7%;
		}

		39% {
			opacity: 1;
			-moz-transform: rotate(645deg);
			-moz-animation-timing-function: linear;
			-moz-origin:30%;
		}

		70% {
			opacity: 1;
			-moz-transform: rotate(770deg);
			-moz-animation-timing-function: ease-out;
			-moz-origin:39%;
		}

		75% {
			opacity: 1;
			-moz-transform: rotate(900deg);
			-moz-animation-timing-function: ease-out;
			-moz-origin:70%;
		}

		76% {
		opacity: 0;
			-moz-transform:rotate(900deg);
		}

		100% {
		opacity: 0;
			-moz-transform: rotate(900deg);
		}
	}