/*

	---------------------
	Etuifabrik Gramberg
	---------------------
	\--- 2011, Steffen Gramberg - das <at> minustalent.de
	 \--- Colors: grey - #404040 // magenta - #d20143 // light grey - #f3f3f3 // dark grey - #1c1c1c

*/

/* General */
body {background-color: #f3f3f3; font: normal 12px/20px Georgia, Times, serif; color: #404040;}
a {text-decoration: none; color: #404040;}
span.doItPink {color: #d20143;}

/* Layout */
	header {height: 182px; width: 100%; background: #f3f3f3 url(../images/bodyBg.jpg) top center no-repeat;}
		section#step1 {}
			section#step1 h1 {margin: 20px 0 120px 0; font-size: 36px; line-height: 44px; text-shadow: 0px 2px 0px #fff;}
				section#step1 h1 span.rightIndent {display: block; float: right;margin-right: 10px; }
			section#step1 article.box {position: relative; height: 260px; width: 260px; background: #f3f3f3 url(../images/boxBg.jpg) no-repeat; padding: 20px;}
				figure.badge {height: 49px; width: 48px; position: absolute; right: -10px; top: -15px;}
				figure.trophy {background: url(../images/badgeTrophy.png);}
				figure.scale {background: url(../images/badgeScale.png);}
				figure.leaf {background: url(../images/badgeLeaf.png);}
				article.box p {margin-bottom: 20px;}
				article.box h2 {font-size: 18px; margin: 5px 0 20px 0;}
			section#step1 div#gotoStep2 {height: 130px; background: #f3f3f3 url(../images/arrowBg.jpg) bottom left no-repeat;}
				div#gotoStep2 a.arrowLink {display: block; width: 300px; font-size: 30px; text-align: center;}

		section#step2 {height: 413px; background: url(../images/cycleBg.jpg) no-repeat;margin-top: 20px; position: relative;}
			section#step2 div#cycle {margin: 17px 15px;}
				div#cycle img {border: 0;}
			section#step2 a.badgeLink {display: block; text-indent: -9999px; width: 148px; height: 142px; background: transparent url(../images/bigBadge.png) no-repeat; position: absolute; right: 0; bottom: -10px; z-index: 3001;}

		section#step3 {position: relative; margin-top: 160px; height: 460px;  background: #f3f3f3 url(../images/contactBoxBg.png) top center no-repeat;}
			section#step3 div#contactWrap {margin: 25px 35px; position: relative;}
				div#contactWrap h3 {font-size: 30px; margin-bottom: 25px;}
					div#contactWrap label {display: block;margin: 15px 0 5px 5px;}
					div#contactWrap input {font-family: Georgia, Times, serif; padding: 0 5px; border: 0; height: 34px; line-height: 34px; width: 266px; color: #fff; background: #fff url(../images/inputBg.png) no-repeat;}
						div#contactWrap input#submit {cursor: pointer; outline: none; width: 84px; height: 22px; background: #fff url(../images/submitButton.png) no-repeat; text-indent: -9999px; float: right; margin-top: 10px;}
					div#contactWrap textarea {font-family: Georgia, Times, serif; color: #fff; padding: 5px; border: 0; width: 266px; height: 252px; background: #fff url(../images/textareaBg.png) no-repeat; resize:none;}
				div#contactWrap div.secondColumn {position: absolute; left: 320px; top: 38px;}
				div#contactWrap div.contactRespondBox {position: absolute; bottom: -36px; left: 0; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; padding-left: 5px; color: #d20143;}
				div#contactWrap h3.contactHeadingAlternate {font-size: 20px; position: absolute; left: 655px; top: 55px;}
				div#contactWrap div.contactAlternateBox {position: absolute; right: 50px; top: 80px; width: 220px; height: 240px; background-color: #f3f3f3; padding: 10px 15px;}
					div#contactWrap div.contactAlternateBox p {margin-bottom: 20px;}
					div#contactWrap div.contactAlternateBox table {margin-bottom: 15px;}
						div#contactWrap div.contactAlternateBox table tr td:first-child {width: 80px;}
			section#step3 div.ajaxLoader {display: none; position: relative; width: 32px; z-index: 1337; height: 32px; padding: 30px; -moz-border-radius: 10px; top: 215px; left: 465px; background: #fff url(../images/loader.gif) center center no-repeat; text-indent: -9999em;}
			div.positiveResponse {display: none; width: 350px; position: absolute; font-size: 24px; text-align: center; top: 200px; left: 170px;}

		footer {height: 126px; background-color: #1c1c1c; margin-top: 100px;}
			footer div#footerWrap {height: 126px; background: #1c1c1c url(../images/footerBg.jpg) top center no-repeat; color: #fff; font: normal 11px/16px Tahoma, Arial, Helvetica, sans-serif; }
				div#footerWrap div.footerLeft {margin-top: 50px;}
				div#footerWrap div.footerRight {margin-top: 34px;}
					div#footerWrap div.footerRight table tr td {width: 200px;}
					div#footerWrap div.footerRight table tr td span.keepOut {display: block; float: left; width: 50px;}



/* Coini McCoin */
.cs-buttons {display: none;}
.cs-prev {margin: -15px 0 0 -5px; display: block; text-indent: -9999px; background: transparent url(../images/prev.png) no-repeat; width: 61px; height: 60px;}
.cs-next {margin: -15px 0 0 5px; display: block; text-indent: -9999px; background: transparent url(../images/next.png) no-repeat; width: 61px; height: 60px;}

/* Masken */
.masken {
	margin-top: 80px;
	text-align: center;
	margin-bottom: -80px;
}

.masken a {
	display: inline-block;
	padding: 20px;
	background-color: #fff;
}

.masken a:hover img {
	opacity: .8;
}

.masken img {
	transition: all .2s ease-in-out;
	opacity: 1;
	max-width: 480px;
	width: 100%;
}