/*
    Document   : style
    Created on : 04.07.2013, 12:17:41
    Author     : sven
    Description:
        Purpose of the stylesheet follows.
*/

* {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  margin: 0;
  padding: 0;
font-family: 'Open Sans', sans-serif;
}

body {
  min-width: 280px;
  color: #333;
  /*background-color: #f6f6f6;*/
  background-color: #fff; }

root, html, body {
  display: block; }

body {
  font-family: Verdana;
  font-size: 0.95em;
  margin: 0; }

form {
  position: relative; }

fieldset {
  padding: 0;
  margin: 0;
  position: relative;
  width: 98%; }

legend span {
  padding: 0.3em 1em; }

header {
  display: none; }

label {
  padding: 5px 0 5px 0;
  display: block;
  float: left;
  font-size: 0.75em;
  font-weight: bold; }

input[type=text],
input[type=email],
input[type=number] {
  border: solid 1px #e4e4e4;
  border-radius: 3px;
  background-color: #fff;
  /*padding: 2px;*/
  font-size: 0.9em;
  padding: 2px 0; }
input[type=radio] {
	margin-right:3px;
}
#donatorsListError {
	position: absolute;
	top: -20px;
}
select {
  border: solid 1px #e4e4e4;
  border-radius: 3px;
  background-color: #fff;
  font-size: 0.85em;
  /*height: 20px;*/
  padding: 1px 0; }

input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
select:focus {
  background-color: #ffffcc; }

a:hover {
  cursor: pointer; }

/* error message */
#amountError {
  display: none;
  position: absolute;
  top: 45px;
  left: 120px;
  z-index: 5; }

#backFormElv {
  margin-left: 10px;
  position: absolute;
  left: 0; }

#paymentMethodError {
  display: none;
  position: absolute;
  left: 35%;
  top: -50px; }

#projectName {
	font-weight: bold;
	display: block;
	float: left;
	font-size: 12pt;
	padding-top: 2px;
	padding-left: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 65%;
}
.clear {
	clear: left;
}

.error, #amountError, .errorLeft {
  display: none;
  background-color: #B60D08;
  font-size: 11px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  color: #fff;
  width: 120px;
}

#amountError {
	/*display: block;*/
	top: 110px;
}
/*
.error {
  background: url(../img/toolbar/lightsilver/error_bubble_center_arrow.png) no-repeat scroll 0 0 transparent;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: bold;
  height: 79px;
  padding: 10px 0px 0px;
  text-align: center;
  width: 160px; }

.errorInv {
  background: url(../img/toolbar/lightsilver/error_bubble_center_arrow_upside_down.png) no-repeat scroll 0 0 transparent;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: bold;
  height: 69px;
  padding: 20px 0px 0px;
  text-align: center;
  width: 160px; }

.errorLeft {
  background: url(../img/toolbar/lightsilver/error_bubble_left_arrow.png) no-repeat scroll 0 0 transparent;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: bold;
  height: 79px;
  padding: 10px 0px 0px;
  text-align: center;
  width: 160px; }

.errorLeft span {
  color: #fff; }

.error span, .errorInv span {
  margin: 0px 10px;
  display: block;
  color: #fff; }*/

fieldset > div {
  position: relative; }

div.required label:after {
  content: " *"; }

fieldset.required legend span:after {
  content: " *"; }

header {
  /*	border-bottom: solid 2px #036;*/
  /*display: inline*/ }

header ul {
  list-style: none;
  margin: 0;
  padding: 0; }

header li {
  text-align: center;
  float: left;
  width: 33.3%;
  padding: 1% 0;
  border-bottom: solid 2px #036; }

header .active {
  background-color: #1c94c4; }

header .done {
  background-color: #65cf6d; }

#noticeContainer {
  display: none; }

#testIndicator {
  float: right;
  font-size: 20px;
  color: red;
  font-weight: bold;
  padding: 5px 10px 0 0; }

#detector {
  background-color: #f00;
  height: 5px;
  display: none;
}


#projectSelection label {
  float: left;
  width: 32%;
  text-align: right;
  font-size: 1.1em;
  font-weight: normal;
  padding-top: 1px; }
#projectSelection select {
	margin-left: 1.5%;
	width: 49.6%;
  border: solid 1px #e4e4e4;
  color: #333;
  font-size: 1.1em;
  background-color: #fff;
}

/** Spendenbetrag **/
#donationContainer {
  /*clear: both;*/
  clear: left;
  padding: 1%;
  border: none;
  width: auto; }

#donationContainer legend {
	height: 2.2em;
}

#testIndicator { display: none; }

/** Standard **/
#donationContainer legend span { top: 0; }

/** FF **/
@media screen and (min--moz-device-pixel-ratio:0) {
	#donationContainer legend span {
	   top: -2.8em; }
}


#paymentTypeContainer legend span span,
#contactContainer legend span span,
#donationContainer legend span span {
	top: 0;
	font-size: 1em;
	display: inline;
	position: relative;
	padding: 0;
}
#paymentTypeContainer legend span span:after,
#contactContainer legend span span:after,
#donationContainer legend span span:after {
	content: none;
}

#donationContainer select,
#donationContainer input {
  font-weight: bold; }

#amountSelectContainer {
  width: 67%;
  margin-top: 1%; }

#amountSelectContainer label {
  float: left;
  width: 48%;
  text-align: right;
  font-size: 1.1em;
  font-weight: normal;
  padding-top: 1px; }

#amountSelectContainer select,
#amountContainer input {
  position: absolute;
  width: 30%;
  left: 50%;
  border: solid 1px #e4e4e4;
  color: #333;
  font-size: 1.1em;
  background-color: #fff; }

#amountContainer input {
  display: none;
  text-align: center; }

#amountContainer {
  width: 67%;
  margin-top: 1%; }

#amountContainer label {
  display: none; }

#subscriptionContainer {
  position: absolute;
  right: 0;
  width: 44%; }

#subscriptionContainer span {
  font-weight: bold;
  font-size: 16px;
  margin-top: 3%;
  float: left; }

#subscriptionContainer label {
  display: none; }

#subscriptionContainer select {
  width: 60%;
  border: solid 1px #e4e4e4;
  /*font-weight: bold;*/
  color: #333;
  font-size: 1.1em;
  float: left;
  background-color: #fff; }

#projectContainer {
  clear: both;
  padding-top: 4px; }

#projectContainer label {
  float: left;
  width: 32%;
  text-align: right;
  font-size: 1.1em;
  font-weight: normal;
  padding-top: 4px; }

#projectContainer select {
  width: 49%;
  border: solid 2px #036;
  margin-left: 1.5%;
  font-size: 1.1em;
  background-color: #eee; }

/** Zahlart **/
#paymentTypeContainer {
  padding: 1%;
  border: none; }
  #paymentTypeContainer li {
    float: left;
    position: relative;
    padding: 0;
    white-space: nowrap;
    width: 25%; }
  #paymentTypeContainer label {
    background-repeat: no-repeat;
    background-position: 40px top;
    display: block;
    width: 95%;
    text-align: center;
    padding: 35px 0 10px 0; }
    #paymentTypeContainer label:hover {
      cursor: pointer; }
      #paymentTypeContainer label:hover .hoverinfo {
        display: block; }
  #paymentTypeContainer input {
    width: auto;
    position: absolute;
    top: 12px;
    left: 20px; }
  #paymentTypeContainer ul {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0; }
  #paymentTypeContainer #paymentTypeElvContainer label {
    background-image: url("../img/forms/flat-sepa.png"); }
  #paymentTypeContainer #paymentTypeVisaContainer label {
    background-image: url("../img/forms/flat-cc.png"); }
  #paymentTypeContainer #paymentTypePaypalContainer label {
    background-image: url("../img/forms/flat-paypal.png"); }
  #paymentTypeContainer #paymentTypeTelekomContainer label {
    background-image: url("../img/forms/flat-telekom.png"); }

.hoverinfo {
  display: none;
  position: absolute;
  background-color: #454648;
  z-index: 35000;
  bottom: 55px;
  left: 0;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 8pt;
  padding: 4px 8px;
  width: 100px;
  white-space: normal;
  text-shadow: none; }

.triangle {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #454648;
	position: absolute;
	bottom: -7px;
	left: 40%;
}
.triangle.top {
	border-top: none;
	border-bottom: 8px solid #454648;
	bottom: auto;
	top: -7px;
}
.triangle.red {
	border-top-color: #B60D08;
	border-bottom-color: #B60D08;
}
@media screen and (max-width: 400px),
	screen and ( device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3),
	screen and (max-width: 600px) and (min-device-pixel-ration: 1.5)
{

	#paymentTypeContainer label div.triangle {
		display: none;
	}
	#donationContainer legend span span {
		display: none;
	}
	#paymentTypeContainer legend span span {
		display: none;
	}
	#contactContainer legend span span {
		display: none;
	}
}

/** Kontaktdaten **/
#contactContainer {
  padding: 1% 1% 0 1%;
  border: none; }

#salutationContainer {
  float: left;
  width: 50%; }

#salutationContainer select {
  position: absolute;
  right: 30%;
  width: 30%; }

#titleContainer {
  position: absolute;
  right: 50%;
  width: 15%; }

#titleContainer label {
  display: none; }

#titleContainer select,
#titleContainer input {
  position: absolute;
  right: 0;
  width: 93%; }

#companyContainer {
  position: absolute;
  right: 1%;
  width: 49%; }

#companyContainer label {
  margin-left: 2%; }

#companyContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

#firstnameContainer {
  clear: left;
  width: 50%;
  float: left;
  padding-top: 1%; }

#firstnameContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

#lastnameContainer {
  float: left;
  width: 50%;
  padding-top: 1%; }

#lastnameContainer label {
  margin-left: 2%; }

#lastnameContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

#mailContainer {
  border: none;
  padding: 1% 0 1% 1%; }

#mailContainer legend {
  display: none; }

#emailContainer {
  clear: left; }

#emailContainer input {
  position: absolute;
  width: 80%;
  right: 0; }

/** Address **/
#addressContainer {
  padding: 0 1% 0 1%;
  border: none; }

#addressContainer legend {
  display: none; }

#streetContainer {
  width: 70%;
  float: left;
  padding-top: 1%; }

#streetContainer input {
  position: absolute;
  right: 0;
  width: 71.5%; }

#numberContainer {
  position: absolute;
  right: 1%;
  width: 30%;
  padding-top: 1%; }

#numberContainer label {
  margin-left: 10%; }

#numberContainer input {
  position: absolute;
  right: 0;
  width: 50%; }

#zipContainer {
  clear: left;
  float: left;
  width: 35%;
  padding-top: 1%; }

#zipContainer input {
  position: absolute;
  right: 0;
  width: 43%; }

#cityContainer {
  float: right;
  margin-right: 0;
  width: 63%;
  padding-top: 1%; }

#cityContainer input {
  float: right;
  width: 80%;
  margin-right: 0; }

#countryContainer {
  clear: left;
  padding-top: 1%; }

#countryContainer select {
  position: absolute;
  right: 0;
  width: 80%; }

/** Bank **/
#bankContainer, #tk_bankContainer {
  padding: 1% 1% 3% 1%;
  border: none; }

/*#bankContainer div {
	clear: left;
	padding-top: 1%;
	width: 60%;
}*/
#bankContainer input, #tk_bankContainer input {
  position: absolute;
  right: 0;
  width: 66.5%; }

#accountNameContainer, #tk_accountNameContainer {
  float: left;
  width: 50%; }

#accountNameContainer.sepa, #tk_accountNameContainer.sepa {
  width: 100%; }

#accountNameContainer label, #tk_accountNameContainer label {
  margin-left: 2%; }

#accountNameContainer.sepa label, #tk_accountNameContainer.sepa label {
  margin-left: 0;
  float: left; }

#accountNameContainer input, #tk_accountNameContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

#accountNameContainer.sepa input, #tk_accountNameContainer.sepa input {
  position: absolute;
  width: 60%; }

#accountNumberContainer, #tk_accountNumberContainer {
  position: absolute;
  right: 1%;
  width: 49%; }

#accountNumberContainer label, #tk_accountNumberContainer label {
  margin-left: 2%; }

#accountNumberContainer input, #tk_accountNumberContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

#bankCodeContainer, #tk_bankCodeContainer {
  clear: left;
  float: left;
  padding-top: 1%;
  width: 50%; }

#bankCodeContainer label, #tk_bankCodeContainer label {
  margin-left: 2%; }

#bankCodeContainer input, #tk_bankCodeContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

#bankNameContainer, #tk_bankNameContainer {
  float: left;
  padding-top: 1%;
  width: 50%; }

#bankNameContainer label, #tk_bankNameContainer label {
  margin-left: 2%; }

#bankNameContainer input, #tk_bankNameContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

#accountNameContainer2,
#ibanContainer,
#tk_accountNameContainer2,
#tk_ibanContainer {
  /*display: none;*/
  float: left;
  padding-top: 1%;
  width: 100%; }

#accountNameContainer2 input,
#ibanContainer input,
#tk_accountNameContainer2 input,
#tk_ibanContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

#bicContainer, #tk_bicContainer {
  position: relative;
  /*display: none;*/
  float: left;
  padding-top: 1%;
  width: 100%; }

#bicContainer input, #tk_bicContainer input {
  position: absolute;
  right: 0;
  width: 60%; }

/** options **/
#options {
  border: none;
  padding: 0 1%;
  /*background-color: #fff;*/
  margin-top: 5px; }

#options legend {
  display: none; }

#options label {
  float: none;
  font-weight: normal;
  display: inline;
  font-size: 0.75em; }

#options label:hover {
  cursor: pointer; }

/** **/
#buttonContainer,
#buttonContainerTk,
#buttonContainerElv {
  text-align: center;
  margin: 20px 0 10px 0; }

/** **/
footer, #footer {
  font-size: 0.75em;
  text-align: center;
  color: #bcbcbc;
}
footer a, #footer a {
	color: #bcbcbc;
	font-style: normal;
}

footer span:first-child, #footer span:first-child {
  display: block; }

footer ul, #footer ul {
	display: inline;
  margin: 0 0 5px 0;
  padding: 0;
  list-style: none; }

footer li, #footer li {
  display: inline; }

/** **/
#bankContainer {
  /*display: none;*/ }

#addressContainer {
  /*display: none;*/ }

button {
  margin: auto; }

/** colors **/
#tk_donationInfoContainer,
#donationInfoContainer {
  padding: 1% 1% 3% 1%;
  border: none; }

#donationInfoContainer,
#contactContainer,
#paymentTypeContainer,
#bankContainer,
#tk_donationInfoContainer,
#tk_bankContainer {
  margin-top: 2.2em; }

#contactContainer label,
#addressContainer label {
  padding-top: 5px;
  font-size: 0.75em;
	padding-left: 1.5%; }

#numberContainer label {
	margin-left: 0%;
}
/*fieldset {
	background-color: #fff;
}*/
legend {
  /*position: relative;*/ }

legend span {
  display: block;
  background-color: #e4e4e4;
/*  background-image: linear-gradient(bottom, #0c6eb4 25%, #003258 85%);
  background-image: -o-linear-gradient(bottom, #0c6eb4 25%, #003258 85%);
  background-image: -moz-linear-gradient(bottom, #0c6eb4 25%, #003258 85%);
  background-image: -webkit-linear-gradient(bottom, #0c6eb4 25%, #003258 85%);
  background-image: -ms-linear-gradient(bottom, #0c6eb4 25%, #003258 85%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, #0c6eb4), color-stop(0.85, #003258));*/
  position: absolute;
  top: -2.2em;
  left: 0;
  right: 0;
  color: #333;
  font-weight: bold;
  font-size: 0.80em;
  padding: 7px 6px; }

a {
  color: #666;
  text-decoration: underline;
  font-style: italic;
}

/** images **/
input[type=text],
input[type=email],
input[type=number],
select {
  box-shadow: inset 0px 0px 1px 1px #f4f4f4;
}

select {
  /*-webkit-appearance: none;*/
  -moz-appearance: field;
  appearance: field;
  /*background-image: url("../img/down.png");*/
  background-position: right center;
  background-repeat: no-repeat; }

button:hover {
  cursor: pointer; }

button {
  border-collapse: collapse;
  font-family: Arial;
  padding: 0;
  font-size: 1em;
  font-weight: bold;
  border-radius: 3px;
  border: none;
/*  border: solid 1px #7E5252;*/
  /*box-shadow: 0px 0px 5px #99a;*/
  background-color: #B60D08;
/*  background-image: linear-gradient(bottom, #b8070a 28%, #ce4a4d 64%);
  background-image: -o-linear-gradient(bottom, #b8070a 28%, #ce4a4d 64%);
  background-image: -moz-linear-gradient(bottom, #b8070a 28%, #ce4a4d 64%);
  background-image: -webkit-linear-gradient(bottom, #b8070a 28%, #ce4a4d 64%);
  background-image: -ms-linear-gradient(bottom, #b8070a 28%, #ce4a4d 64%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.28, #b8070a), color-stop(0.64, #ce4a4d)); */
}

button span {
  color: #fff;
  margin: 0;
  display: block;
  /*border: solid 1px #D69091;*/
  padding: 5px 15px;
  border-radius: 6px; }

button:hover {
  border-color: #583939;
  box-shadow: 0px 0px 10px #667; }


.errorpage {

}
.paypalpage h1,
.successpage h1,
.errorpage h1 {
	background-color: #e4e4e4;
	font-size: 24px;
	font-weight: normal;
	padding: 5px 10px;
	text-align: center;
}
.paypalpage .box,
.successpage  .box,
.errorpage .box {
	/*margin: 30px 30px 30px 30px;*/
	margin-top: 10px;
	padding: 5px 10px;
	/*border-left: solid 6px #B60D08;*/
	background-color: #F6F6F6;
	color: #333;
}

.paypalpage .box,
.successpage .box {
	border-left-color: #008678;
}
.box .logo {
	float: left;
	width: 50%;
	text-align: right;
}
.logo img {
	margin-right: 30px;
}
.box h2 {
	font-size: 16px;
	font-weight: normal;
}
.box p {
	font-size: 13px;
	padding: 0;
}
/*.box a {
	padding: 7px 10px;
	background-color: #B60D08;
	color: #fff;
	text-decoration: none;
	font-style: normal;
	font-size: 12px;
	font-weight: bold;
	border-radius: 3px;
}*/
.box .right {
	padding-left: 150px;
}
.box .clear {
	margin-bottom: 10px;
}
.successpage .service,
.successpage  .project,
.errorpage .service,
.errorpage .project {
	/*margin: 20px 90px 20px 30px;*/
	width: 50%;
	margin-left: 50%;
	text-align: left;
	/*float: right;*/
}

.service p,
.project p {
	padding: 0;
	margin: 0;
	font-size: 12px;
}
.service a,
.project a {
	/*color: #B60D08;*/
	text-decoration: none;
	font-style: normal;
}
.service h3,
.project h3 {
	font-size: 14px;
	padding: 5px 0;
}
.paypalpage + #footer,
.successpage  + #footer,
.errorpage + #footer {
	margin-top: 20px;
}

.successpage {
	text-align: center;
}
.successpage > img {
	margin: auto;
}

@media screen and (max-width: 400px),
	screen and ( device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3),
	screen and (max-width: 600px) and (min-device-pixel-ration: 1.5)
{
	.errorpage .box {
		text-align: center;
	}
	.errorpage .box img {
		float: none;
		margin: auto;
	}
	.errorpage .right {
		clear: left;
		padding-left: 0;
		padding-top: 15px;
	}
	.successpage > img {
		width: 100%;
		margin: auto;
	}
	.box .logo {
		display: block;
		float: none;
		margin: auto;
		width: 100%;
		text-align: center;
	}
	.logo img {
		margin: 0;
		padding: 0;
	}
	.box .service {
		display: block;
		width: 100%;
		margin: 20px 0 0 0;
		padding: 0;
	}
	.errorpage .service,
	.errorpage .project {
		/*margin: 20px 30px 20px 30px;*/
	}
	div#footer {
		font-size: 12px;
	}
	div#footer span {
		display: block;
	}
}

@media screen and (max-width: 960px), screen and (max-width: 960px) and (min-device-pixel-ration: 1.5) {
  /*@media screen and (max-width: 720px) {*/
  #detector {
    background-color: #0f0; }

  body {
    /*font-size: 1.1em;*/ }

  label {
    padding-bottom: 0; }

  #salutationContainer {
    float: left;
    width: 25%;
    /*outline: solid 1px red;*/ }

  #salutationContainer label {
    float: none;
    display: block;
    width: auto;
	padding-left: 2%; }

  #salutationContainer select {
    float: none;
    position: relative;
    width: 96%;
    right: auto; }

  #titleContainer {
    right: 50.3%;
    width: 24.7%; }

  #titleContainer label {
    float: none;
    display: block;
    width: auto;
    padding-left: 5%; }

  #titleContainer select, #titleContainer input {
    float: right;
    position: relative;
    width: 96%;
    right: auto; }

  #companyContainer label {
    /*display: block;*/
    float: none;
    padding-left: 3%; }

  #companyContainer input {
    position: relative;
    width: 95%;
    float: right; }

  #firstnameContainer label {
    float: none;
	padding-left: 1%; }

  #firstnameContainer input {
    position: relative;
    width: 99%; }

  #lastnameContainer label {
    float: none;
    padding-left: 3%;}

  #lastnameContainer input {
    position: relative;
    width: 95%;
    float: right; }

  #streetContainer {
    width: 40%; }

  #streetContainer label {
    float: none; }

  #streetContainer input {
    position: relative;
    width: 95%; }

  #numberContainer {
    position: absolute;
    left: 40%;
    width: 10%; }

  #numberContainer label {
    float: none; }

  #numberContainer input {
    width: 100%;
    float: right; }

  #zipContainer {
    position: absolute;
    left: 52.3%;
    width: 10%; }

  #zipContainer label {
    float: none; }

  #zipContainer input {
    width: 100%;
    float: left; }

  #cityContainer {
    float: right;
    width: 37%; }

  #cityContainer label {
    float: none;
    padding-left: 5%; }

  #cityContainer input {
    position: relative;
    float: right;
    width: 98%; }

  #countryContainer {
    float: right;
    width: 49%; }

  #countryContainer label {
    float: none;
    padding-left: 3%; }

  #countryContainer select {
    position: relative;
    float: right;
    width: 97.5%; }

  #emailContainer label {
    float: none;
	padding-left: .5%; }

  #emailContainer input {
    position: relative;
    width: 99.7%; }

  #accountNameContainer,
  #accountNumberContainer,
  #bankCodeContainer,
  #bankNameContainer {
    position: relative;
    float: left;
    width: 50%;
    right: 0; }

  #accountNameContainer label,
  #accountNumberContainer label,
  #bankCodeContainer label,
  #bankNameContainer label {
    float: none;
    display: block; }

  #accountNameContainer,
  #bankCodeContainer {
    clear: left; }

  #accountNameContainer input,
  #accountNumberContainer input,
  #bankCodeContainer input,
  #bankNameContainer input {
    position: relative;
    width: 99%;
/*	padding: 2% 0;*/
  }

  #accountNumberContainer label,
  #bankNameContainer label {
    padding-left: 5%; }

  #accountNumberContainer input,
  #bankNameContainer input {
    float: right;
    width: 99%; }
  #bankNameContainer input {
	  width: 99.5%;
  }

  #options {
    clear: both; }

  #firstnameContainer,
  #lastnameContainer,
  #streetContainer,
  #numberContainer,
  #zipContainer,
  #cityContainer,
  #countryContainer,
  #mailContainer,
  #accountNameContainer,
  #accountNumberContainer,
  #bankCodeContainer,
  #bankNameContainer {
    padding-top: 0; } }
/**
 * small smartphones
 **/
@media screen and (max-width: 400px),
	screen and (max-width: 600px) and (min-device-pixel-ration: 1.5),
	screen and (max-width: 800px) and (min-device-pixel-ration: 2),
	screen and (max-width: 1200px) and (min-device-pixel-ration: 3)
/*	,
	screen and ( device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3),*/
{
  /*@media screen and (max-width: 400px) {*/
  div#privacyContainer a {
	color: #666;
  }
  div#privacyContainer,
  div#receiptContainer,
  div#moreInfoContainer {
	color: #333;
  }
  #projectName {
	white-space: normal;
	text-overflow: auto;
	overflow: visible;
	width: auto;
	padding-top: 7px;
	padding-left: 10px;
	font-size: 1em;
  }

  #detector {
    background-color: #00f; }

  header {
    display: block; }

  body {
    font-size: 1.2em;
    /*background-color: #eee;*/
  }

  input, select {
    padding: 2% 0; }

  legend span {
    font-size: 0.75em; }

  #projectSelection,
  #amountContainer,
  #amountSelectContainer,
  #subscriptionContainer {
    position: relative;
    width: auto; }

  #projectSelection label,
  #amountSelectContainer label {
    display: inline;
    padding-top: 8px;
    float: left;
    width: 45%;
    text-align: center; }

  #projectSelection select,
  #amountSelectContainer select,
  #subscriptionContainer select,
  #projectContainer select,
  #amountContainer input {
    position: relative;
    float: right;
    width: 50%;
    left: auto;
    padding: 1% 0;
    background-color: #fff; }

  #subscriptionContainer select {
    clear: both; }

  #paymentTypeContainer ul {
    /*margin: 0;*/ }

  #paymentTypeContainer input {
    float: left;
    margin-left: -100px; }

  #paymentTypeContainer ul li {
    display: block;
    position: relative;
    padding: 0;
    float: none;
    margin: 0;
	/*width: 82%;*/
	width: 100%;
  }

  #paymentTypeContainer label {
    border: solid 1px #ddd;
    padding: 45px 0 0 70px;
    margin-bottom: 5px;
    background-color: #fff;
	background-position: 5px 5px;

	box-sizing: border-box;
	width: 100%;
  }

  #paymentTypeContainer label div {
	position: relative;
	display: block;
	margin-top: -20px;
  }
  #paymentTypeContainer .hoverinfo {
	  margin-top: -30px;
	background-color: transparent;
	bottom: auto;
	color: inherit;
	font-weight: bold;
	text-align: left;
	font-size: 1.1em;
	padding: 0;
   /* border-radius: 6px; */
	opacity: 1;
	border: none;
	width: auto;
	white-space: nowrap;
	text-shadow: none;
  }
  #paymentTypeContainer .hoverinfo br {
	  display: none;
  }


  #paymentTypeContainer input[type=radio]:checked + label {
    background-color: #65cf6d; }

  #titleContainer {
    float: left; }

  #salutationContainer,
  #titleContainer {
    position: relative;
    width: 50%;
    right: auto; }

  #salutationContainer label {
    padding-left: 4%; }

  #salutationContainer select,
  #titleContainer select,
  #titleContainer input {
    padding: 4% 0; }

  #projectContainer,
  #companyContainer,
  #firstnameContainer,
  #lastnameContainer,
  #countryContainer {
    position: relative;
    right: auto;
    float: none;
    width: auto;
    clear: both; }

  #bankContainer > div {
    float: none;
    width: auto; }
  #bankContainer > div#ibanContainer {
	  float: left;
	  width: 100%;
  }
  #bankContainer #ibanContainer label {
	  float: left;
  }

  div#accountNumberContainer {
    width: 49%;
    float: left; }

  div#bankCodeContainer {
    width: 49%;
    float: right; }

  #bankContainer > div {
    clear: none; }

  #bankContainer label,
  #projectContainer label,
  #noticeContainer label,
  #companyContainer label,
  #firstnameContainer label,
  #lastnameContainer label,
  #mailContainer label,
  #streetContainer label,
  #countryContainer label {
    clear: none;
    float: none;
    text-align: left;
    font-weight: bold;
    font-size: 0.75em;
    padding-left: 2%;
    margin-left: 0; }

  /*#bankContainer input,*/
  #companyContainer input,
  #firstnameContainer input,
  #lastnameContainer input,
  #countryContainer select,
  #projectContainer select,
  #noticeContainer input {
    position: relative;
    margin-left: 0;
    font-size: 0.85em;
    border: solid 1px #e4e4e4;
    float: none;
    width: 99.5%;
    padding: 2% 0; }

  #bankContainer #bankNameContainer {
    clear: left; }

  #bankCodeContainer input,
  #accountNumberContainer input {
    padding: 4% 0; }

  #streetContainer {
    width: 80%; }

  #numberContainer {
    left: auto;
    right: 1%;
    width: 20%; }

  #numberContainer input {
    padding: 8% 0; }

  #emailContainer input,
  #streetContainer input {
    padding: 2% 0; }

  #zipContainer {
    position: relative;
    float: left;
    right: auto;
    left: 1%;
    width: 20%; }

  #zipContainer label {
    padding-left: 6%; }

  #zipContainer input {
    padding: 8% 0; }

  #cityContainer {
    float: right;
    width: 78%; }

  #cityContainer input {
    padding: 2.1% 0; }

  #options {
    /*background-color: #eee;*/
    margin-top: 2em;
    padding-top: 10px; }

  #options legend {
    display: block; }

  #options input {
    margin-top: 3%;
    margin-bottom: 6%;
    float: left;
    clear: left;
    width: 5%; }

  #options label {
    float: left;
    width: 75%;
    margin: 0 0 2% 5%;
    clear: none;
    border: solid 1px #ccc;
    padding: 2% 5%;
    border-radius: 5px;
    background-color: #fff; }

  #options input[type=checkbox]:checked + label {
    background-color: #65cf6d; }

  #options input[type=radio]:checked + label {
    background-color: #65cf6d; }

  footer {
    font-size: 0.65em; } }
/** iPad **/
@media only screen and (min-device-width: 121px) and (max-device-width: 1024px) and (orientation: portrait), only screen and (min-device-width: 121px) and (max-device-width: 1024px) and (orientation: landscape) {
  #salutationContainer select,
  #titleContainer select,
  #countryContainer select,
  #titleContainer input {
    padding: 3px 0 3px 0; } }
#paypalPage {
  display: none; }

/**
 * Ogone Part
 **/
.ncoltable2 {
  font-size: 1.1em;
  margin: 1em 0; }

.ncoltable2 td {
  padding: 1px; }

.ncoltable1 small, .ncoltable2 small {
  font-size: 1em; }

.ncoltxtl2 {
  text-align: right; }

.ncoltxtl2 label {
  display: inline;
  float: none;
  font-size: 0.85em; }

a.midncol {
  font-size: 0.75em; }

.ncoltable2 small small {
  font-size: 0.65em; }

.ncoltable2 input[type=submit] {
  padding: 0.3em 1.5em;
  font-weight: bold;
  font-size: 1em; }

#wrapper {
  text-align: center; }

div.title {
  font-size: 12px;
  background: url(../img/toolbar/lightsilver/title_bg.png) repeat-x top center transparent;
  height: 30px;
  border: 1px solid #036;
  border-right: none;
  border-left: none;
  color: #FFF;
  font-weight: bold;
  margin: 10px 0px;
  clear: both;
  float: left;
  width: 100%;
  position: relative; }

div.titleText {
  margin: 9px 0px 0px 13px;
  color: #fff; }

p {
  margin: 15px 0px;
  font-size: 15px;
  padding: 0px 15px; }

#paypalPage {
  text-align: center; }


#thankYouImage {
  margin: 10px auto; }

#paypal_sending {
  margin: 10px auto; }

#visa_sending {
  height: 455px;
  text-align: center;
  display: none; }

#visa_sending img {
  display: block;
  margin: 150px auto 0 auto; }

#elv_sending {
  text-align: center;
  display: none; }

#elv_sending img {
  display: block;
  margin: 150px auto 200px auto; }

#donationInfo,
#tk_donationInfo {
  display: block;
  margin: 10px 0 -5px 0;
  font-weight: bold;
  text-align: center; }

#toSepa, #toElv, #tk_toSepa, #tk_toElv {
  clear: both;
  float: right;
  /*border: 1px solid #999999;*/
  padding: 2px 5px;
  /*border-top-left-radius: 5px;*/
  /*border-top-right-radius: 5px;*/
  /*border-bottom-right-radius: 5px;*/
  /*border-bottom-left-radius: 5px;*/
  /*background-color: #eeeeee;*/
  font-size: 0.8em;
  margin: 10px 5px 0px 5px;
  font-weight: bold;
  color: #888888; }

#buttonContainerTk,
#buttonContainerElv {
  margin-top: 60px; }

.invisible {
  display: none; }

/*#donateReply {
    border: 0px none;
    width: 256px;
    height: 36px;
    font-size: 15px;
    font-weight: bold;
    color: #FFF;
	background: url(../img/toolbar/lightsilver/big_button_up.png) no-repeat top center transparent;
	cursor: pointer;
	margin: 5px 10px 0px;
}*/


#buttonsContainer {
	text-align: center;
}
#buttonsContainer img {
	margin: 30px auto 30px auto;
}

#bankContainer .sepaInfo {
	clear: both;
}
.sepaText {
	font-size: 85%;
}
.sepaHint {
	font-size: 80%;
}