* { padding: 0px; margin: 0px; }

html { height: 101%; }

body { background-image: url(back.gif); font-family: arial, sans-serif; }

#mitte { margin: 0px auto; width: 90%; max-width: 800px; background-image: url(trans.png); }

#r1 { margin-top: 10%; }
#r1-c1 img { width: 95%; max-width: 539px; }
#r1-c1 { padding: 5% 0 0 5%; }
#r2, #r3 { text-align: right; padding-top: 5%; }
#r2-c1, #r3-c1 { width: 50%; margin-left: 45%; }
#r2-c1 h2, #r4-c1 h2 { margin-top: 2.5%; color: #333333; }
#r3-c1 img { width: 20%; }
#r4 { padding: 5% 0; }
#r4-c1 { width: 75%; margin-left: 5%; }
#r4-c1 a { color: #333333; }
#r5 { margin-bottom: 10%; text-align: right; font-size: 80%; }
#r5-c1 { padding-bottom: 5%; margin-right: 5%; }
#r5-c1 a { color: #333333; text-decoration: none; }
#r5-c1 a:hover { color: orange; }
#r6-c1 { padding: 10% 5%; }
#r6-c1 h2 { margin-top: 20px; }
#r6-c1 ul { padding-left: 5%; }

.clear { clear: both; }


/* GO FULL WIDTH BELOW 700 PIXELS */ 
@media only screen and (max-width: 700px) {
#r2-c1, #r3-c1 { width: 90%; margin: 0 5%; }
#r2-c1 h2, #r4-c1 h2 { font-size: 120%; }
}