@font-face {
  font-family: "source_sans_pro_regular";
  src: url("../fonts/SourceSansPro-Regular.otf");
}

@font-face {
  font-family: "source_sans_pro_semibold";
  src: url("../fonts/SourceSansPro-Semibold.otf");
}

@font-face {
  font-family: "source_sans_pro_bold";
  src: url("../fonts/SourceSansPro-Bold.otf");
}

@font-face {
  font-family: "source_sans_pro_italic";
  src: url("../fonts/SourceSansPro-It.otf");
}
. {
border:0;
margin:0;
padding:0;
}

body {
background-color:#FFF;
/*font-family:'source_sans_pro_regular', Arial, sans;*/
font-family:Verdana, Arial, sans;
font-size:10pt;
margin:0;
padding:0;
}

a.logo {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:0 -450px;
display:block;
height:50px;
left:0;
position:absolute;
top:10px;
width:200px;
z-index:3;
}

div.sml {
float:left;
height:186px;
margin:10px 5px 10px 10px;
position:relative;
width:430px;
}

div.sml>div {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:0 -680px;
height:117px;
left:65px;
position:absolute;
top:10px;
width:300px;
z-index:1;
}

div.sml>div+div {
background-image:none;
border:0 #eaeaea solid;
bottom:2px;
height:56px;
left:2px;
top:auto;
width:426px;
}

div.sml>div+div>div {
margin:10px;
}

div.sml>div+div+a {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:0 0;
border:0;
height:142px;
left:auto;
position:absolute;
right:0;
top:3px;
width:194px;
z-index:2;
}

.sprachicon {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:0 -510px;
bottom:70px;
display:block;
height:12px;
left:2px;
position:absolute;
width:20px;
z-index:4;
}

.sprachiconProjekt {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:0 -510px;
display:block;
height:12px;
width:20px;
z-index:4;
float:left;
margin-right:3px;
margin-top:10px;
}

.en {
background-position:-20px -510px;
left:24px;
}

.nl {
background-position:-40px -510px;
left:47px;
}

.es {
background-position:-80px -510px;
left:70px;
}

.pt {
background-position:-60px -510px;
left:93px;
}

.fr {
background-position:-100px -510px;
left:116px;
}

.it {
background-position:-120px -510px;
left:139px;
}

div.sml+div {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:-110px -202px;
float:left;
height:238px;
margin:10px 0 10px 5px;
position:relative;
width:310px;
}

div.sml+div>div {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:-201px 0;
height:175px;
left:5px;
position:absolute;
top:4px;
width:203px;
z-index:1;
}

div.sml+div>div>div {
background-image:none;
font-size:8pt;
height:150px;
left:34px;
position:absolute;
top:5px;
width:160px;
z-index:2;
}

div.sml+div>div>div b {
font-size:8pt;
}

div.sml+div>div>div i {
color:red;
font-size:11pt;
font-style:normal;
}

/* Suchbox */
div.sml+div>div+div {
	position: absolute;
	left: 10px;
	top: 198px;
	background-image: none;
	background-color: white;
	height: 30px;
	width: 270px;
	border-radius: 9px;
	border: 1px solid #eaeaea;
	z-index: 2;
}

div #suchbutton_spieleschmiede {
	margin-left: 1px;
	background-color: #ff0000;
	color: #ffffff;
	border-radius:3px;
	border:none;
}

div.sml+div+div {
background-color:#FFF;
border:0 #eaeaea solid;
clear:both;
margin:30px 10px 10px;
min-height:300px;
width:750px;
}

div.sml+div+div>h1 {
display:block;
font-size:12pt;
padding:5px;
}

div.sml+div+div>div {
border:1px #eaeaea solid;
float:left;
font-size:8pt;
height:249px;
margin:15px 25px 10px;
position:relative;
width:195px;
}

div.sml+div+div>div>a {
background-position:0 -97px;
display:block;
height:96px;
margin:2px;
width:191px;
}

div.sml+div+div>div>a+div {
bottom:85px;
height:60px;
left:4px;
margin:3px 1px;
position:absolute;
width:187px;
}

div.sml+div+div>div>a+div>b {
display:block;
font-size:10pt;
margin-bottom:3px;
}

div.sml+div+div>div>a+div+a {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:0 -530px;
bottom:61px;
display:block;
height:9px;
left:5px;
position:absolute;
width:9px;
}

div.sml+div+div>div>a+div+a+a {
background-image:none;
bottom:59px;
display:block;
height:auto;
left:19px;
position:absolute;
width:auto;
}

div.sml+div+div>div>a+div+a+a+div {
background-color:#eaeaea;
bottom:-2px;
height:53px;
left:-2px;
position:absolute;
width:195px;
}

div.sml+div+div>div>a+div+a+a+div>div {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:0 -625px;
height:20px;
left:2px;
position:absolute;
top:5px;
width:195px;
}

div.sml+div+div>div>a+div+a+a+div>div>div {
background-color:none;
height:11px;
left:5px;
position:absolute;
top:6px;
width:182px;
z-index:2;
}

div.sml+div+div>div>a+div+a+a+div>div>div>span {
background-color:#5eab00;
display:block;
height:11px;
position:relative;
z-index:3;
}

div.sml+div+div>div>a+div+a+a+div>div+div {
background-image:none;
bottom:0;
color:#aaa;
font-size:7pt;
height:27px;
left:3px;
position:absolute;
right:auto;
text-align:center;
top:auto;
width:60px;
}

div.sml+div+div>div>a+div+a+a+div>div+div+div {
bottom:0;
height:27px;
left:0;
right:auto;
width:195px;
}

div.sml+div+div>div>a+div+a+a+div>div+div+div+div {
bottom:0;
height:27px;
left:auto;
right:3px;
width:60px;
}

div.sml+div+div>div>a+div+a+a+div>div b {
color:#000;
}

div.sml+div+div>div.cb {
border:0;
clear:both;
float:none;
height:auto;
margin:0;
padding:0;
position:relative;
width:auto;
}

div.sml+div+div ul {
font-size:10pt;
list-style-image:url(../gfx/shop/pfeil.gif);
}

div.sml+div+div>h1.h1 {
font-size:14pt;
padding:0;
}

div.sml+div+div>h2.h2 {
font-size:12pt;
}

div.sml+div+div ul>li>div {
background-color:#eaeaea;
display:none;
margin:10px 0;
padding:5px;
}

div.sml+div+div+div {
margin:50px 10px 10px;
min-height:250px;
position:relative;
width:750px;
}

div.sml+div+div+div>h1 {
display:block;
font-size:12pt;
padding:5px;
}

div.sml+div+div+div>div {
border:1px #eaeaea solid;
float:left;
font-size:10pt;
height:120px;
margin:15px 25px 10px;
position:relative;
width:195px;
}

div.sml+div+div+div>div>a {
background-position:0 -97px;
display:block;
height:96px;
margin:2px;
position:relative;
width:191px;
}

div.sml+div+div+div>div>a>div {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:-320px -450px;
bottom:auto;
height:70px;
left:auto;
position:absolute;
right:10px;
top:40px;
width:75px;
z-index:3;
}

div.sml+div+div+div>div>a+div {
bottom:1px;
height:auto;
left:4px;
margin:3px 1px;
position:absolute;
width:187px;
}

div.sml+div+div+div>div.cb {
border:0;
clear:both;
float:none;
height:auto;
margin:0;
padding:0;
position:relative;
width:auto;
}

div.sml+div+div+div>div+a {
background-image:url(../gfx/shop/cf_sprite_ss_klein.png);
background-position:0 -530px;
display:block;
height:10px;
position:relative;
float: left;
width:9px;
margin-top: 4px;
}

div.sml+div+div+div>div+a+a {
background-image:none;
display:block;
height:auto;
position:relative;
width:auto;
float: left;
margin-left: 5px;

}

div.sml+div+div+div+div {
background-color:#eaeaea;
height:220px;
margin:10px;
padding:10px 20px 20px;
width:710px;
}

div.sml+div+div+div+div>div {
margin-top:10px;
min-width:320px;
}

div.sml+div+div+div+div a.help {
cursor:pointer;
position:relative;
text-decoration:underline;
}

div.sml+div+div+div+div a.help div {
display:none;
position:absolute;
}

div.sml+div+div+div+div a.help:hover div {
background-color:#FFF;
border:1px #666 solid;
bottom:10px;
color:gray;
display:block;
font-size:9pt;
left:10px;
padding:5px;
width:290px;
}

div.sml+div+div+div+div span {
display:block;
float:left;
height:120px;
margin-right:10px;
width:320px;
}

div.sml+div+div+div+div>span a {
background-image:url(../gfx/shop/iconsprite_fn.png);
background-position:-270px -580px;
display:block;
float:left;
height:41px;
margin-top:5px;
width:42px;
}

div.sml+div+div+div+div>span a+a {
background-position:-220px -480px;
}

div.sml+div+div+div+div>span a+a+a {
background-position:-220px -580px;
}

div.sml+div+div+div+div>span a+a+a+a {
background-position:-270px -480px;
}

div.sml+div+div+div+div>span a+a+a+a+a {
background-position:-220px -530px;
}

div.sml+div+div+div+div>span a+a+a+a+a+div+a {
background-position:-270px -530px;
}

div.sml+div+div+div+div>span a+a+a+a+a+div+a+a {
background-position:-320px -480px;
margin-left:2px;
}

div.sml+div+div+div+div>span a+a+a+a+a+div+a+a+div {
float:left;
margin-left:5px;
margin-top:9px;
}

div.sml+div+div+div+div>span a+a+a+a+a+div+a+a+div+a {
background-position:-320px -530px;
margin-left:2px;
}

/* Statistikseite */
div #statistik{
	width: 430px;
	margin: 0px;
	margin-bottom: 5px;
	height: auto;
	font-size: 1em;
}

div #rekordhalter{
	width: 430px;
	height: auto;
	margin: 0px;
	margin-bottom: 5px;
	float: right;
	font-size: 1em;
}

div #rekordhalter ol{
	margin-top: 1px;
	margin-bottom: 14px;
}

div #rekordhalter li span{
	font-weight: normal;
}

div.statistik_header{
	background-color: #eeeeee;
	font-weight: bold;
	font-size: 1.3em;
	margin: 5px;
}

div.statistik_header div.text{
	display: inline;
	vertical-align: top;
	margin-left: 10px;
}

div.rekorde{
	margin-left: 15px;
}

div.rekorde div.rekord{
	font-weight: bold;
}

/* Suche Formatierungen */
div #suchergebnis {
	width: 650px;
	height: 110px;
	border: 0px;
}

div #suchbild {
	float: left;
	height: 100px;
	border: 1px;
	width: 276px;
}

div #suchtext {
	height: 100px;
	width: 340px;
	border: 0px;
	float: left;
	/*margin-left: 280px;
	margin-top: -25px;*/
	position: relative;
	display: inline;
}

div #suchtext > a {
	display: inline;
	width: auto;
	height: auto;
}

div #trenner {
	width: 0px;
	height: 0px;
	border: 0px solid #ffffff;
	clear: both;
	margin: 0px;
}


/* Projektplanung */
#projektePlanung #headerProjektPlanung {
	height: 55px;
	width: 100%;
	background:url("../gfx/schmied.png") no-repeat top right  #eaeaea;
}

#projektePlanung {
	overflow: hidden;
}

#headerProjektPlanung h2 {
	line-height:55px;
	margin:0;
	margin-left:12px;
	font-size:14px;
	color:#3e3e3e;
}

#contentProjektPlanung {
	padding:15px;
	position:relative;
	height:175px;
}

#contentProjektPlanung a {
	display:block;
	width:100%;
	font-size:12px;
	padding-left:15px;
	color:black;
	text-decoration:none;
	background:url("../gfx/dreieck.png") no-repeat top left;
	line-height:10px;
	margin-bottom:10px;
}

#contentProjektPlanung a#projektButton {
	width:50%;
	height:24px;
	line-height: 24px;
	border-radius:5px;
	color:white;
	background-image:none;
	background-color:#5eab00;
	position:absolute;
	bottom:10px;
	right:10px;
	text-align:center;
	padding:0;
	z-index:100;
	transition:0.5s all ease;
}

#contentProjektPlanung a#projektButton:hover {
	background-color:transparent;
	color:#5eab00;
	
}

#contentProjektPlanung .fadeOut {
	position: absolute; 
	bottom: 11px; 
	left: 0;
	width: 100%; 
	height:20px;
	margin: 0; 
	padding: 70px 0 0 0; 
	z-index:10;
	cursor:pointer;

	/* "transparent" only works here because == rgba(0,0,0,0) */
	background-image: linear-gradient(to bottom, transparent, white);
}

div.ok {
border:2px green solid !important;
color:green;
padding:10px;
height:20px !important;
min-height:20px !important;
font-weight:bold;
width:850px !important;
}

div.warnung {
border:2px red solid !important;
color:red;
padding:10px;
height:20px !important;
min-height:20px !important;
font-weight:bold;
width:850px !important;
}

.clear
{
	clear:both;
	margin:0;
	padding:0;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

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

	div.sml+div {
	background-position:0 -202px;
	height:188px;
	margin:3px 0 10px 10px;
	width:430px;
	}

	div.sml+div>div {
	left:55px;
	}

	/* Suchbox */
	div.sml+div>div+div {
		top: 150px;
	}

	div.sml+div+div {
	width:430px;
	}

	div.sml+div+div>div {
	margin:9px;
	}

	div.sml+div+div+div {
	width:430px;
	}

	div.sml+div+div+div>div {
	margin:9px;
	}

	div.sml+div+div+div>div+div+div {
	display:none;
	}

	div.sml+div+div+div+div {
	height:350px;
	width:390px;
	}

	div.sml+div+div+div+div>div {
	display:inline-block;
	margin-top:50px;
	}

	div.sml+div+div+div+div>span a+a+a+a+a+div+a+a {
	margin-left:3px;
	}

}

@media only screen and (min-width: 897px) {

	a.logo {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	}

	div.sml {
	height:240px;
	}

	div.sml>div {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	background-position:0 -650px;
	height:160px;
	left:3px;
	top:20px;
	width:424px;
	}

	div.sml>div+div {
	border:1px #eaeaea solid;
	}

	div.sml>div+div>div {
	margin:10px;
	}

	div.sml>div+div+a {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	height:170px;
	top:30px;
	width:232px;
	}

	.sprachicon {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	bottom:62px;
	}

	div.sml+div {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	background-position:0 -201px;
	margin:10px 0 30px 5px;
	width:430px;
	}

	div.sml+div>div {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	background-position:-260px 0;
	height:200px;
	top:15px;
	width:240px;
	}

	div.sml+div>div>div {
	left:32px;
	top:17px;
	width:180px;
	}

	div.sml+div>div>div b {
	font-size:10pt;
	}

	div.sml+div+div {
	width:870px;
	}

	div.sml+div+div>div {
	margin:9px;
	width:270px;
	}

	div.sml+div+div>div>a {
	background-position:0 0;
	width:266px;
	}

	div.sml+div+div>div>a+div {
	width:262px;
	}

	div.sml+div+div>div>a+div+a {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	}

	div.sml+div+div>div>a+div+a+a+div {
	width:270px;
	}

	div.sml+div+div>div>a+div+a+a+div>div {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	top:3px;
	width:270px;
	}

	div.sml+div+div>div>a+div+a+a+div>div>div {
	top:4px;
	width:257px;
	}

	div.sml+div+div>div>a+div+a+a+div>div+div {
	font-size:8pt;
	height:30px;
	left:6px;
	}

	div.sml+div+div>div>a+div+a+a+div>div+div+div {
	height:30px;
	left:6px;
	width:270px;
	}

	div.sml+div+div>div>a+div+a+a+div>div+div+div+div {
	height:30px;
	right:6px;
	}

	div.sml+div+div+div {
	width:870px;
	}

	div.sml+div+div+div>div {
	margin:9px;
	width:270px;
	}

	div.sml+div+div+div>div>a {
	background-position:0 0;
	width:266px;
	}

	div.sml+div+div+div>div>a>div {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	right:20px;
	top:50px;
	}

	div.sml+div+div+div>div>a+div {
	width:262px;
	}

	div.sml+div+div+div>div+a {
	background-image:url(../gfx/shop/cf_sprite_ss_gross.png);
	}

	div.sml+div+div+div+div {
	width:830px;
	}

	div.sml+div+div+div+div>span a+a+a+a+a+div+a+a+div {
	width:78px;
	}

}