/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

/* * { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
*/


#page-wrap { padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }

.info-col { float: left; width: 220px; height: 100%; padding: 2px 2px 10px 2px; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; background: #5e6e6c;}

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; padding: 30px 0 0 0; }
.image:hover {
	transform: scale(1, 1.04);
	cursor: pointer;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-moz-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-o-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	}


.genauigkeit { background: url(../images/genauigkeit.jpg) center center no-repeat; background-size:200%; }

.verstaendnis { background: url(../images/verstaendnis.jpg) center center no-repeat; background-size:200%; }

.geschwindigkeit { background: url(../images/geschwindigkeit.jpg) center center no-repeat; background-size:200%; }

.strategien { background: url(../images/strategien.jpg) center center no-repeat; background-size:200%; }

.vorlaeufer { background: url(../images/vorlaeufer.jpg) center center no-repeat; background-size:200%; }


dt { padding: 5px; color: #FFFFFF; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; }
dd { position: absolute; left: -9999px; top: -9999px; width: 100%x; padding: 10px; border-right: 1px solid #FFFFFF; font: normal 16px Roboto Condensed, sans-serif; color: #FFFFFF; line-height: 1.5em; }
dd ul{ font: normal 16px Roboto Condensed, sans-serif; color: #FFFFFF; line-height: 1.5em; }
dd p{ font: normal 16px Roboto Condensed, sans-serif; color: #FFFFFF; line-height: 1.5em; }

dt:nth-of-type(1) { background: #5e6e6c; }
dd:nth-of-type(1) { background: #5e6e6c; }

dt:nth-of-type(2) { background: #5e6e6c; }
dd:nth-of-type(2) { background: #5e6e6c; }

dt:nth-of-type(3) { background: #5e6e6c; }
dd:nth-of-type(3) { background: #5e6e6c; }

dt:nth-of-type(4) { background: #5e6e6c; }
dd:nth-of-type(4) { background: #5e6e6c; }

dt:nth-of-type(5) { background: #5e6e6c; }
dd:nth-of-type(5) { background: #5e6e6c; }

dt:nth-of-type(6) { background: #5e6e6c; }
dd:nth-of-type(6) { background: #5e6e6c; }

dt:hover {
	transform: scale(1, 1.04);
	border-bottom: 1px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
	background-color: #ffa500;
	cursor: pointer;
	font-weight: bold;
	-webkit-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-moz-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	-o-transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	transition: background 0.2s linear, visibility 0.2s linear, transform 0.2s;
	}

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }