* {margin:0;padding:0;font-family:Helvetica,Arial,sans-serif;color:#000;}
html {background-color:#F9F9F9;}
#body {margin:0px auto; width:1100px; background-color:#FFF;padding:10px;}
#header {width:99%;margin-bottom:1%;height:65px;border-top:3px #9D9D9D solid;border-bottom:3px #C1C1C1 solid;display:block;background-image:url('images/english_grammar_flag_50.png');background-repeat:repeat;}
#headertext {float:none;padding:0px;padding-top:5px;width:99%;}
p.headerone {font-size:1.7em;font-weight:bold;text-align:center;color:navy;}
p.headertwo {font-size:1.4em;text-align:center;}
#sidebar {float:left;width:18%;padding-left:10px;margin-right:2%;background:#F5F5F5;border-radius:5px;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-top:7px #C9C9C9 solid;border-bottom:7px #C9C9C9 solid;}
ul#navigation {list-style-type:none;}
ul#navigation li {list-style:none;padding-top:5px;padding-bottom:5px;border-bottom:#c9c9c9 solid 1px;}
#content {float:left;width:79%;background:#FFF;}
#navtop {float:left;width:100%;margin-top:2%;margin-bottom:2%;}
#navtopl {float:left;width:65%;}
#navtopright {float:right;width:33%;text-align:center;vertical-align: middle;position:relative;padding: 2px; border: 2px solid #F30; background-color:#F5F5F5;border-radius:20px;}
#navtopright a {display: block;height: 20px;}
#navtopright a:link {color:#F30;font-weight:bold;}
#navtopright a:visited {color:#F30;font-weight:bold;}
#content h1 {font-size:1.6em;line-height: 1.2;padding: .5em 0 .5em 0;}
#content h2 {font-size:1.4em;line-height: 1.2;padding: .5em 0 .5em 0;}
#content h3 {font-size:1.2em;line-height: 1.2;padding: .5em 0 .5em 0;}
#content h4 {font-size:1.1em;line-height: 1.2;padding: .5em 0 .5em 0;}
#alphabet {line-height:150%;font-size:.8em;margin-bottom:2%;background-color:#ecffeb;border:1px solid #bcefbd;padding:5px}

p.advertcontent {width:100%;min-height:90px;min-width:125px;margin-top:0;margin-bottom:0%;}
#content ul {list-style:none;line-height:150%;}
#content ul li {padding-top:3px;padding-bottom:3px;}
ul#disc {list-style-type:circle;line-height:200%;}
p.text {font-size:1em;line-height:250%;padding-bottom:15px;padding-top:15px;}
p.info {font-size:1em;line-height:250%;padding-bottom:15px;padding-top:15px;}
p.center {text-align:center;margin-bottom:10px;line-height:150%;}
p.copy {font-size:.7em;}
img {float:left;margin-right:10px;margin-bottom:5px;border-style:solid;border-width:1px;border-color:#000;}
img.randlos {float:left;margin-right:10px;margin-bottom:5px;border-style:0;border-width:0;}
.button {display:block;background-image: url('next.png');background-position:center;background-repeat: no-repeat;background-color: #F5F5F5;height:45px;border:1px #dfdfdf solid;margin-top:10px;margin-bottom:5px;border-radius:20px;}
#image {float:left;margin-right:10px;margin-bottom:5px;border-width:1px;border-color:#000;width:100%}

blockquote {padding-left:25px;}
.weiss {color:#FFF;}
.gruen {color:#00C000;}
.backgruen {background-color:#0F0;}
.ulgruen {color:green;}
.gelb {color:#FF0;}
.backgelb {background-color:#FF0;}
.blau {color:#39F;}
a.blau {color:#009FFF;}
.orange {color:#FF8C00;}
.backblau {background-color:#009FFF;}
.pink {color:#F3C;}
.rot {color:red;}
.backrot {background-color:red;}
.violett {color:#90C;}
.hellviolett {color:#C9F;}
.hellgruen {color:#CFC;}
.backhellgruen {background-color:#CFC;}
.hellgelb {color:#FFC;}
.backhellgelb {background-color:#FFC;}
.hellblau {color:#CFF;}
.dunkelblau {color:#00F;}
.backhellblau {background-color:#CFF;}
.hellrot {color:#FCC;}
.backhellrot {background-color:#FCC;}
.backhellviolett {background-color:#FCF;}
.hellbraun {color:#F93;}
.backbraun {background-color:#8B4513;}
.backhellbraun {background-color:#FC6;}
.buttonrot {display:block;background-position:center;background-color: #F5F5F5;height:25px;border:1px #c9c9c9 solid;margin-top:10px;margin-bottom:10px;}
.regelntop {background:#EEE;padding:3px;border:1px solid #000;margin-bottom:10px;font-weight:bold;}
.regeln {background:#FFF;line-height:200%;padding-top:3px;padding-bottom:5px;margin-bottom:10px;}
.regelnrahmen {border:1px solid #000;background:#FFF;padding:10px;margin-bottom:10px;line-height:200%;} 
.regelnmerksatz {background:#FF0;border:1px solid #000;padding:10px;margin-bottom:10px;text-align:center;font-weight:bold;line-height:200%;}
.regelnweiss {background:#FFF;border:1px solid #000;padding:10px;margin-bottom:10px;}
.regelnhellgruen {background:#d5f7d5;border:1px solid #bcefbd;padding:15px;margin-bottom:25px;margin-top:20px;line-height:200%;}
.regelnhellgelb {background:#FFC;border:1px solid #fbfbd0;padding:15px;margin-bottom:25px;margin-top:20px;line-height:200%;}
.regelnhellrot {background:#FCF;border:1px solid #fbd1fb;padding:15px;margin-bottom:25px;margin-top:20px;line-height:200%;}
.regelnhellblau {background:#CFF;border:1px solid #9FF;padding:15px;margin-bottom:25px;margin-top:20px;line-height:200%;}
.rechts {text-align: right;}
.links {text-align: left;}

#advert {float:left;width:64%;min-width:125px;overflow:hidden;}
#links {float:left;width:35%;padding-left:5px;padding-top:3px;padding-bottom:3px;line-height:150%;}
#footer {font-size:.8em;position: relative;margin-top:1%;text-align:center;background:#F5F5F5;width:99%;height:30px;padding-top:5px;border-top:3px #C9C9C9 solid;border-bottom:3px #C9C9C9 solid;}
.togglerfeld-label {font-size: 1em;font-weight: bold;background: #F9F9F9;padding: 7px;cursor: pointer;display: inline-block;margin-bottom:10px;margin-top:10px;width:98%;
border:1px #C9C9C9 solid;border-radius:20px;padding-left:10px}
.togglerfeldinhalt {margin-bottom: 5px;}
.togglerfeld-input {display: none;}
.togglerfeld-input:not(checked) ~ .togglerfeldinhalt {display: none;}
.togglerfeld-input:checked ~ .togglerfeldinhalt {display: block;}

td {border: 1px solid;text-align:top;padding:5px;cellspacing:0px;}
.a {height:25px}

@media only screen and (max-width: 1920px) {
p.advertcontent {display:none;}}
@media only screen and (max-width: 1024px) {
#body {width:97%;}
#headertext {width:95%;}
p.headertwo {font-size:1.3em;}
#navtopright a:link {font-size:1em;}
#content h1 {font-size:1em;}
#content {float:left;width:78%;}}
@media only screen and (max-width: 800px) {
#content {width:77%;margin-right:0;margin-bottom:1%;margin-top:-1%;}
#sidebar {width:20%;height:100%;margin-right:1%;margin-bottom:1%;font-size:.9em;}}
@media only screen and (max-width: 768px) {
#content {width:77%;margin-right:0;margin-bottom:1%;}
#alphabet {font-size:1em;}
#sidebar {width:18%;}}
@media only screen and (max-width: 720px) {
#content {width:98%;margin-top:-1%;}
p.headerone {font-size:1.2em;}
#content {width:98%;}
#sidebar {display:none;}}
@media only screen and (max-width: 640px) {
#navtopright a {height: 17px;padding-bottom:2px;}
.button {height:35px;}}
@media only screen and (max-width: 500px) {
#header {height:40px;margin-bottom:3%;background-image:url('images/english_grammar_flag_40.png');}
p.headertwo {display:none;}
#advert {width:100%;}
#content h2 {font-size:1em;}
#links {display:none;}
p.info {display:none;}
#navtop {margin-top:-1%;}}
@media only screen and (max-width: 420px) {
#header {height:35px;margin-bottom:3%;}
p.headerone {font-size:1.3em;}
#body {width:95%;}
#navsmart {display:block;}
#navtopl {width:65%;font-size:.9em;}
#navtopright {width:30%;height: 17px;}
#navtopright a:link {font-size:.9em;font-weight:bold;}
#content {width:98%;margin-right:0;margin-top:0;font-size:.9em;line-height:180%;}}
@media only screen and (max-width: 320px) {
#body {width:93%;}
#content {font-size:.8em;}
#footer {font-size:.7em;width:98%;}}