html, body {
background-color: #ffffff;
margin: 0;
padding: 0;
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}
.nofloat {
clear:both;
}
.grid-wrapper {
position:relative;
margin: 0 auto;
width:80%;
}
.grid-wrapper-narrow {
position:relative;
margin: 0 auto;
width:50%;
}
.container {
position:relative;
margin:0;
padding:0;
width: 100%;
}
.grid-1-1 {
float:left;
width:100%;
}
.grid-1-2 {
float:left;
width:50%;
}
.grid-2-2 {
float:right;
width:50%;
}
.grid-1-3 {
float:left;
width:33.33%;
}
.grid-2-3 {
float:left;
width:33.33%;
}
.grid-3-3 {
float:right;
width:33.33%;
}
.grid-1-4 {
float:left;
width:25%;
}
.grid-2-4 {
float:left;
width:25%;
}
.grid-3-4 {
float:left;
width:25%;
}
.grid-4-4 {
float:right;
width:25%;
}
.grid-1-5 {
float:left;
width:20%;
}
.grid-2-5 {
float:left;
width:20%;
}
.grid-3-5 {
float:left;
width:20%;
}
.grid-4-5 {
float:right;
width:20%;
}
.grid-5-5 {
float:right;
width:20%;
}
.grid-1-5 img, .grid-2-5 img, .grid-3-5 img, .grid-4-5 img, .grid-5-5 img {
float:left;
}
@media screen and (max-width:1200px) {
.grid-wrapper {
position:relative;
margin: 0;
width:auto;
padding:0;
}
.grid-1-4,
.grid-2-4,
.grid-3-4,
.grid-4-4 {
float:left;
width:50%;
}
}
@media screen and (max-width:1000px) and (orientation:portrait) {
.grid-wrapper,
.grid-wrapper-narrow {
margin: 0 auto;
width:100%;
padding:0;
}
.grid-1-1,
.grid-1-2,
.grid-2-2,
.grid-1-3,
.grid-2-3,
.grid-3-3,
.grid-1-4,
.grid-2-4,
.grid-3-4,
.grid-4-4 {
float:left;
width:100%;
}
.grid-1-5,
.grid-2-5,
.grid-3-5,
.grid-4-5,
.grid-5-5 {
float:left;
width:50%;
}
}