body              { color: #000000; font-size: 90%; line-height: 1.5em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #fff; text-align: center; margin: 10px; padding: 0; }
table { margin-bottom: 20px }
p     { color: #000000; line-height: 1.4em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #fff; text-align: left; margin-bottom: 2.5em }
a:link   { color: #c03; font-weight: bold; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: underline }
a:visited    { color: #c03; font-weight: bold; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: underline }
a:hover   { color: #777; font-weight: bold; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: underline }
a:active  { color: black; font-weight: bold; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: underline }
h1     { color: black; font-weight: normal; font-size: 170%; line-height: 1.4em; margin-bottom: 30px }
h1.error { color: #cb0000; font-weight: bold; font-size: 160%; border-bottom: none; }
h1.confirm { color: #26963b; font-weight: bold; font-size: 160%; border-bottom: none; }
h2   { color: black; font-weight: bold; font-size: 150%; line-height: 1.4em; padding-bottom: 5px; border-bottom: 1px solid #777; width: 100%;}
h2.gross   { color: black; font-weight: bold; font-size: 170%; line-height: 1.4em; padding-bottom: 5px; border-bottom: 2px solid #777; width: 100%;}
h2.ohne { color: black; font-weight: bold; font-size: 150%; line-height: 1.4em; border-bottom: none;}
h2.standard { color: gray; font-weight: bold; font-size: 190%; line-height: 1.5em; border-bottom: none;}
h3     { color: black; font-weight: bold; font-size: 120%; line-height: 1.4em; margin-bottom: 0.4em }
h4      { color: black; font-weight: bold; font-size: 110%; margin-bottom: 0.4em }
li     { line-height: 1.6em; margin-bottom: 0.4em }
blockquote          { color: #858585; font-style: italic; font-weight: normal; font-size: 130%; line-height: 1.6em; font-family: Georgia, "Times New Roman", Times, serif; margin: 10px; padding: 5px 7px }
hr  { background-color: #aaa; margin: 0 0 20px; border: 0; height: 1px }
s { text-decoration: line-through; }
a.linkschwarz:link  { color: black; font-weight: bold; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: underline }
a.linkschwarz:visited  { color: black; font-weight: bold; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: underline }
a.linkschwarz:hover  { color: #777; font-weight: bold; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: underline }
a.linkschwarz:active  { color: black; font-weight: bold; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: underline }
img { max-width: 100%; height: auto; }
fieldset   { padding: 30px; border: solid 1px #888 }
video {
width: 100% !important;
height: auto !important;
}

/* ------------ class ------------ */

.autor { color: gray; font-style: italic; font-size: 90%; line-height: 1.4em; margin-top: -2em; }
.uber { color: gray;  font-size: 110%; line-height: 1.4em; margin-bottom: 1em; margin-top: -2em; text-align: center; }
.center { text-align: justify; }
.zentriert { text-align: center; }
.breit { letter-spacing: 5px }
.grau_lektionen   { color: gray; font-weight: bold; font-size: 150%; line-height: 1em; margin-bottom: 1.5em}
.grau_hauptseiten { color: gray; font-size: 190%; font-weight: bold; line-height: 1.5em; }
.klein   { font-size: 9px; line-height: 1.4em }
.banner { width: 800px; border: 0px }
.bigfont { font-size: 200%; line-height: 1.4em }
.boxdashed   { background-color: #ffffff; padding: 5px; border: dotted 1px #999999 }
.boxdurchgezogen   { background-color: #ffffff; padding: 5px 10px; border: solid 1px #999999 }
.boxlinieabstand { padding: 10px; border: solid 1px #999999 }
.boxbild   { background-color: #ffffff; border: solid 1px #999 }
.boxstartmitte { padding-right: 15px; padding-left: 15px }
.feedback { margin-top: 5% ; padding: 2%; background-color: #eaeaea; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }
.zitate      { float: left; margin-bottom: 5px; width: 100% }
.bilderzitate { margin-right: 20px; margin-bottom: 20px }
.searchbox   { text-align: center; margin-bottom: 20px; margin-left: 10px; margin-top: 20px; padding: 10px 20px; border: solid 1px gray }
.bildobenrechts { float: right; margin-bottom: 5px; margin-left: 5px; }
.bildrechtsohnerand { float: right; margin-bottom: 5px; margin-left: 5px }
.bildlinks  { margin: 5px 5px 5px 10px; border: solid 1px #000 }
.bildshop { float: left; margin-right: 15px; margin-bottom: 15px; border: solid 1px #b0b0b0 }
.bildlinksohnerand { margin: 5px 5px 5px 10px }
.bildmitabstandrechts { margin-right: 20px; margin-bottom: 10px; }
.bilderaufwaermen  { margin-right: 31px; margin-bottom: 10px }
.bildertheorie3   { margin-right: 118px; margin-bottom: 10px }
.fett { font-weight: bold }
.icon-top { border: 0px; margin-right: 2%; }
.border0 { border: 0px }
.border1 { border: solid 1px #000 }
.border1grau { border: solid 1px #cfcfcf }
.border1graustart { border: solid 1px #cfcfcf; margin-bottom: 10px; }
.zitateslideshow  { width: 100%; height: auto; margin-top: 10px; margin-bottom: 20px; border-top: 1px dotted #bbb; border-bottom: 1px dotted #bbb }
.newsbild { float: left; margin-right: 4%; margin-bottom: 15px; border: solid 1px #cfcfcf; width: 220px }
.rot { color: #b00 }
.textrechts { text-align: right}
.pink { color: #c0c }
.hellrot { color: #f63 }
.orange { color: #f93 }
.gelb { color: #fc3 }
.gruen { color: #393 }
.blau { color: #4da9ff }
.bghellblau { background-color: #a1d6ff }
.bghellgrau { background-color: #eeeeee }
.bgdunkelgrau { background-color: #c3c3c3 }
.grosseSchrift { font-size: 120% }
.grau { color: #aaa; font-style: italic; font-size: smaller }
.grauindex { color: #aaa; font-style: italic; }
.textfeld    { width: 70%; font-size: 13px; line-height: 1.6em; margin-bottom: 1.5em; padding: 4px; border: solid 1px #ddd }
.textfeldcal { font-size: 13px; line-height: 1.6em; margin-bottom: 1.5em; padding: 4px; border: solid 1px #ddd; width: 20% }
.textfeldcal1 { font-size: 13px; line-height: 1.6em; margin-bottom: 1.5em; padding: 4px; border: solid 1px #ddd; width: 60% }
.newsletter { font-size: 13px; line-height: 1.6em; margin-bottom: 1.5em; padding: 4px; border: solid 1px #ddd; width: 50% }
.kontakt { font-size: 13px; line-height: 1.6em; margin-bottom: 0.5em; padding: 4px; border: solid 1px #ddd; width: 95% }
.suchen   { font-size: 13px; line-height: 1.6em; margin-bottom: 1.5em; padding: 4px; border: solid 1px #ddd; }
.hauptnavsuchen { padding: 0px 0px 20px 0px; border-bottom: 2px solid #555;}
.hauptnavsuchen h4   { color: black; font-size: 120%; border-bottom: 1px solid #777 }
.find   { font-size: 14px; line-height: 1.6em; margin-left: 2% ; padding: 4px; border: solid 1px #c7c7c7; width: 75%}
.bestseller { color: #f00; font-style: italic; font-weight: bold; font-size: 1.6em; margin-bottom: 1.6em }
.error { color: #f90; border-bottom: none; }
.confirm  { color: #396; border-bottom: none; }
.abstandunten { margin-bottom: 10px }
.padding20 { padding: 20px }
.button {
	background-color: #e9e9e9;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #696969;
	display:inline-block;
	color:#777777;
	font-size: 100%;
	font-family:verdana;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	}
.button:active {
	position:relative;
	top:1px;
	}
.menubutton	{
	margin-top: 1px;
	margin-bottom: 1px;
	background-color: #ffffff;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #696969;
	display:inline-block;
	font-size: 120%;
	font-family:verdana;
	font-weight:bold;
	padding:6px 18px;
	text-decoration:none;
	}
.menubutton:active {
	position:relative;
	top:1px;
	}

.lekbutton {
	background-color: #e9e9e9;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #696969;
	display:inline-block;
	color:#777777;
	font-size: 100%;
	font-family:verdana;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	width: 90%;
	text-align: center;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 1%;
	}
.lekbutton:active {
	position:relative;
	top:1px;
	}
.hauptnav  { background-color: #ffffff; font-size: 105%; text-align: left; margin-top: 20px; margin-bottom: 3em; padding-top: 10px; border-top: 2px solid #555; max-width: 960px; height:   auto; }
.hauptnav h4   { color: black; font-size: 120%; margin-top: 0px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #777 }
.lastupdate { font-size: 85%; line-height: 1.5em; font-family: Helvetica, Verdana, Arial, Geneva; font-style: italic; border-top: 1px solid black; }
.ausverkauft { color: #cdc8c8; }

/* ------------ grid ------------ */	

.grid2  { float: left; margin-right: 4%; width: 48% }
.grid2end  { float: left; width: 48% }
.grid2dashed  { float: left; padding-right: 4%; border-right: 1px dashed #c0c0c0; width: 45% }
.grid2dashedend  { float: left; margin-left: 4%; width: 45% }
.grid2banner { float: left; width: 48% }
.grid2bannerend { float: left; width: 48%; margin-left: 4%; text-align: right; }
.grid2drittel  { float: left; margin-right: 5%; width: 65% }
.grid2drittelend  { float: left; width: 30% }
.grid3 { float: left; width: 30%; margin-right: 5%; }
.grid3end { float: left; width: 30%; }
.grid3nav { float: left; width: 30%; margin-right: 5%; margin-bottom: 20px;}
.grid3navend { float: left; width: 30%; margin-bottom: 20px;}		
.grid4  {  float: left; margin-right: 2%; margin-bottom: 20px; width: 23.5% }
.grid4end  { float: left; margin-bottom: 20px; width: 23.5% }
	

/* ------------ boxes ------------ */

#content  { text-align: left }
#contentbdt { text-align: left; margin-right: auto; margin-left: auto; max-width: 960px }
#contentbkd { text-align: left; margin-right: auto; margin-left: auto; max-width: 960px }
#contentspielen { text-align: left; margin-right: auto; margin-left: auto; max-width: 960px }
#contentlsw { text-align: left; margin-right: auto; margin-left: auto; max-width: 960px }
#contentimfreien { text-align: left; margin-right: auto; margin-left: auto; max-width: 960px }
#contentleer { text-align: left; margin-right: auto; margin-left: auto; max-width: 960px }
#contentleer800 { text-align: left; margin-right: auto; margin-left: auto; max-width: 960px }
#contentleer800start { text-align: left; margin-right: auto; margin-left: auto; width: 960px }
#links  { line-height: 1.6em; float: left; width: 180px; margin-right: 20px; }
#sichtbar { }
#main { float: left; width: 410px; margin-right: 20px; }
#main h2 { font-size: 130%; margin-top: 0px; margin-bottom: 0px; padding-bottom: 5px; border-bottom: 1px solid #777; width: 100%;}
#main h3  { padding-top: 10px }
#rechts    { margin-top: 6px; text-align: justify; float: left; width: 170px }
#newslinks { float: left; width: 70%; margin-right: 20px }
#news260    { float: left; padding-top: 48px; width: 260px }
#news260 h2  { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #777; width: 260px }
#links h2   { color: black; font-size: 130%; margin-top: 0px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #777; width: 180px }
#rechts h2  { color: black; font-size: 100%; margin-top: 0px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #777; width: 170px }
#header       { margin-right: auto; margin-left: auto; margin-bottom: 20px; margin-top: 20px; max-width: 960px }
#header800       { margin: 20px auto 20px; max-width: 960px }
#header800start       { margin: 20px auto 20px; width: 960px }
#linkespalte       {  }
#rechner  { padding: 10px; border: solid 1px #444; width: 95% }
#footer { text-align: center; max-width: 960px }
#footer800     { text-align: center; clear: both; margin-bottom: 20px; max-width: 960px }
#copyright { text-align: center; max-width: 960px; visibility: hidden }
#copyright800 { text-align: center; max-width: 960px; visibility: hidden }
#lektiongrid2  { float: left; width: 48% }
#lektiongrid2end  { float: left; margin-left: 4%; width: 48% }
#topjump { text-align: center; padding-top: 10px; padding-bottom: 10px; display: none; }
#suchen { float: left; width: 30%; text-align: right; line-height: 1.4em; margin-bottom: 30px; margin-top: 20px}
#h1 h1 { font-size: 200%; }
#newsstart    { margin-top: -35px; }
#newsstart  h3  { margin-bottom: -20px; }
#z1 { background-color: #FCF3E0; border-top: 7px solid #E39B2D; padding: 10px; }
#z2 { background-color: #E0EFF4; border-top: 7px solid #2F8FCE; padding: 10px; }
#z3 { background-color: #F2F9E8; border-top: 7px solid #97C941; padding: 10px; }


/* Top ---------------------------------------------------------------------- */
#toTop {
	width:100px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;

}

/* pelesson button right fixed (invisible) ---------------------------------------------------------------------- */

#pelessons { position:fixed; display:none; top:200px; right:0px; border-top: 2px solid #d6d6d6; border-bottom: 2px solid #d6d6d6; border-left: 2px solid #d6d6d6; 		
		-moz-border-radius:5px; /* Firefox */
		-webkit-border-radius:5px; /* Safari, Chrome */
		-khtml-border-radius:5px; /* Konqueror */
		border-radius:5px; /* CSS3 */ }
		
/* Flexible iFrame ---------------------------------------------------------------------- */

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive Video -------------------------------------------------------------------- */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    margin-bottom: 2em;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Breakpoint < 900px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 960px) {
#news260      { float: none; display: none; width: 0; }
#newslinks      { float: none; width: 100%; margin-right: 0% }
#pelessons      { display: none; }
}
/* Breakpoint < 830px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 830px) {
#rechts    { float: none; display: none; width: 0%; }
#main { width: 70%; margin-right: 0px; }
#links  { line-height: 1.6em; float: left; width: 25%; margin-right: 5%; }
#links h2   { width: 100% }
}
/* Breakpoint < 760px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 760px) {
#h1 { width: 100%; float: none; }
}
/* Breakpoint < 610px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 610px) {

#h1 h1 { display: none }
#main { float: none; width: 100%; }
#links  { line-height: 1.6em; float: none; width: 100%; margin-right: 0%; margin-bottom: 8%;}
#links h2   { width: 100% }
#unsichtbar { display: none;}
.hauptnav h4 { font-size: 1.2em; line-height: 1.8em; width: 100% }
.hauptnavsuchen h4 { font-size: 1.2em; line-height: 1.8em; width: 100% }
.grid2banner { float: left; width: 60%}
.grid2bannerend { float: left; width: 35%; margin-left: 5%; text-align: right; }
.grid4      	{ float: none; width: 100%; margin-bottom: 10px;}
.grid4end      	{ float: none; width: 100%; margin-bottom: 10px;}
.grid3nav 		{ font-size: 1.2em; float: none; line-height: 1.8em; width: 100%; }
.grid3navend 	{ font-size: 1.2em; float: none; line-height: 1.8em; width: 100%; }
.grid3 { float: none; margin-bottom: 20px; width: 100%; }
.grid3end { float: none; margin-bottom: 20px; width: 100%; }
#topjump { text-align: center; font-size: 130%; padding-top: 10px; padding-bottom: 30px; margin-bottom: 40px; display: block; }
.lekbutton {
	width: 83%;
	text-align: center;
	margin-left: 0%;
	margin-right: 0%;
	margin-bottom: 2%;
	}
}
/* Breakpoint < 480px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
body {margin: 14px; font-size: 100%;}
.find   {width: 85%}
h1              { font-size: 150%; }
h2.standard { font-size: 160%; }	
.bilderaufwaermen  { display: none; }
.bildertheorie3  { display: none; }
.grid2dashed  { float: none; border-right: none; padding-right: 0; width: 100% }
.grid2dashedend  { float: none; margin-left: 0; width: 100% }
.grid2  { float: none; margin-right: 0; width: 100% }
.grid2end  { float: none; width: 100% }
.grid2drittel  { float: none; margin-right: 0%; width: 100% }
.grid2drittelend  { float: none; width: 100% }
.newsbild { float: none; margin-right: 0; margin-bottom: 15px; border: solid 1px #cfcfcf; width: 100% }
#lektiongrid2  { float: none; width: 100% }
#lektiongrid2end  { float: none; width: 90% }
#footer { font-size: 1.2em; line-height: 1.8em; }

}
/* Breakpoint < 320px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 320px) {
body              { font-size: 100%; }
h1              { font-size: 150%; }
h2.standard { font-size: 160%; }
#footer { font-size: 1.2em; line-height: 1.8em; }

}