/* CSS-Styhlsheet für Home Win 8 Startseite */
/* Formatierung Hintergrund */

html {
	width           : 100%;
   	height          : 100%;
}

#frame a img,
#frame img,
#frame  {
	text-decoration: none;
	color: #fff;
	font-size: 12px;
}
body {
	font-family     : 'Arial', helvetica, sans-serif;
	font-size       : 12px; 
	font-weight     : normal;
	font-style      : normal;
	margin          : 0;
	padding         : 0;
	color           : #fff;
	width           : 100%;
   	height          : 100%;
}


#background {
	z-index   : 1;
	width     : 100%;
   	height    : 100%;
	position  : fixed;
	background: -webkit-gradient(-45deg, 0 0, 0 bottom, from(#F37300), to(#F5A639));
	background: -webkit-linear-gradient(-45deg,#F37300, #F5A639);
	background: -moz-linear-gradient(-45deg,#F37300, #F5A639);
	background: -ms-linear-gradient(-45deg,#F37300, #F5A639);
	background: -o-linear-gradient(-45deg,#F37300, #F5A639);
	background: linear-gradient(-45deg,#F37300, #F5A639);
}

#frame {
	z-index  : 4;
	position : relative;
	width    : 70%;
	max-width: 1200px;
	height   : 100%;
	margin   : auto;
}

#signe {
	position: fixed;
	z-index : 2;
	width   : 35%;
	height  : auto;
	left    : 58%;
	top     : 45%;
	opacity : 0.2;
	background: transparent;
}

#footer {
	height     : 3%;
	margin-left: 3px;
	margin-top : 3px;
	left       : 17.5%;
	text-align : center;
	vertical-align: top;
	background : transparent;
	color      : #fff;
	width      : 99.5%;
	float      : left;
	display    : block;
	padding    : 0;
}

#footer a {
	color      : #fff;
	text-decoration: none;
}


.rechteckquer {
	width   : 40%;
	height  : auto; 
	float   : left;
	display : block;
	padding : 0;
	margin-bottom: -3px;
		
}

.rechteckhoch {
	width   : 20%;
	height  : auto;
	float   : left;
	display : block; 
	padding : 0;
	margin-bottom: -3px;
}
.rechteckhochrechts {
	width   : 20%;
	height  : auto;
	float   : right;
	display : block; 
	padding : 0;
	margin-bottom: -3px;
}

.quadrat {
	display : block; 
	width   : 20%;
	height  : auto;
	float   : left;
	padding : 0;
	margin-bottom: -3px;	
}

.quadrat-extra a img  {
	display : none;	
}
.rechteckquer-extra a img  {
	display : none;	
}



@media (max-width: 830px) {
.rechteckquer {
width: 60% !important;
float: both !important;
clear: none  !important;
}
.quadrat {
width: 30% !important;
float: both !important;
clear: none  !important;
}
.rechteckhoch {
width: 30% !important;
float: both !important;
clear: none  !important;
}
.rechteckhochrechts {
width: 30% !important;
float: left  !important;
clear: none  !important;
}
#frame {
	width    : 90%  !important;
}	
} 


@media (min-width: 830px) {
#frame {
	width    : 80%  !important;
}	
} 
@media (min-width: 1100px) {
#frame {
	width    : 60%  !important;
}	
} 
@media (min-width: 1600px) {
#frame {
	width    : 48%  !important;
}
.rechteckquer-extra a img  {
	width   : 40%;
	height  : auto; 
	float   : right;
	clear: right;
	display : block;
	padding : 0;
	margin-bottom: -3px;
}
.quadrat-extra a img  {
	display : block; 
	width   : 20%;
	height  : auto;
	float   : left;
	padding : 0;
	margin-bottom: -3px;
}
.quadrat-extra img  {
	display : block; 
	width   : 20%;
	height  : auto;
	float   : left;
	padding : 0;
	margin-bottom: -3px;
}
}