html, body, #content {
	height: 98%;
}

body { 
	font-family: 'Trebuchet MS', Arial, Sans-Serif;
	font-size: 16px;
	counter-reset: ebene1;
	color: #4b515b;
}

abbr {
	text-decoration: none;
	display: inline-block;
}

hr {
	border-top: dotted gray 1px;
	border-bottom: none;
}

th {
	background-color: #eef0f3;
}

ul, ol {
	margin: 30px 0 30px 0;
}

/* Hiermit können Safari>=1.1, Opera>=9.5, IE9 was anfangen*/
::selection {
 background-color: #D8413E;;
 color: white;
}

/* und hiermit der Firefox>=1 */
::-moz-selection {
 background-color: #D8413E;;
 color: white;
}

.blink {
	animation-name: animation_blink;
	animation-timing-function: ease-in;
	animation-duration: 1s; 
	animation-iteration-count: infinite;
}

@keyframes animation_blink {
	0% { opacity: 1; }
	50% { opacity: 0.1; }
	100% { opacity: 1; } 
}

.nowrap {
	white-space: nowrap;
}

.tag {
	display: inline-block;
	position: relative; 
	top: -1.5em;
	right: -1.8em;
	margin: 0 0 0 -1.8em;
	transform: rotate(-30deg);
	font-size: 10px;
}

.button, .tab, .tab_unten, .gruppe, .knoten, .checkbox, .radiobutton, .schritt, .dropdownmenu, .menu, .input, .auswahlfeld, .fenster, .dialog {
	font-family: 'Lucida Sans', sans-serif;
	font-size: 13px;
	display: inline-block;
	white-space: nowrap;
	padding: 1px 7px 1px 7px;
	margin: 1.5em 0px 7px 0px;	
	cursor: default;
}

.knoten {
	cursor: copy;
}

.input {
	cursor: text;
}

.fenster, .dialog {
	color: white;
	padding: 0.1em 0 0 1em;
	background: url('img/fensterverlauf.png') repeat-x;
	border-radius: 3px;
	height: 1.5em;
	font-weight: bold;
}

.fenster:hover {
	box-shadow: -5px -5px 5px rgb(235,235,235);
}

.button {
	border: 1px silver solid;
	border-radius: 3px;
	background: url('img/buttonverlauf.png') repeat-x;
	box-shadow: 0 0 0.5em silver;
}

.button:hover {
	box-shadow: 0 0 1em silver;
}

.dropdownmenu {
	border: 1px gray dotted;
}

.input {
	border: 2px silver solid;
	background-color: rgb(250,250,250);
	color: rgb(200,200,200);
	font-weight: bold;
}

.input:hover, .dropdownmenu:hover {
	background-color: transparent;
	box-shadow: 0 0 0.5em silver;
}

.tab {
	border-top: 1px gray solid;
	border-left: 1px gray solid;
	border-right: 1px gray solid;
	background: url('img/tabverlauf_2.png') repeat-x;
	padding-left: 10px;
	padding-right: 10px;
	box-shadow: -10px -10px 5px rgb(240,240,240);
}

.tab:hover {
	box-shadow: -10px -10px 5px rgb(230,230,230);
}

.tab_unten {
	border-left: 1px rgb(220,220,220) solid;
	border-right: 1px rgb(220,220,220) solid;
	border-bottom: 1px gray solid;
	background: url('img/tabverlauf_2.png') repeat-x;		
	box-shadow: 10px 5px 5px rgb(240,240,240);
}

.tab_unten:hover {
	box-shadow: 10px 5px 5px rgb(230,230,230);
}

.caps {
	 text-transform: uppercase;
}

.icon {
	height: 15px;
	margin: 2px 5px -2px 0;
}

.box_in_liste {
	display: block; 
	margin: 10pt; 
	padding: 10pt; 
	background-color: rgb(240,240,240);
}

.tabelle_in_tabelle {
	margin: 3px;
	background-color: #c9e5ec;
}

.tabelle_in_tabelle:hover, .tabelle_in_tabelle tr:hover {
	background-color: #8AC2D0;;
}

.duden_beispiel {
	display: block; 
	margin:30px;
}

.tit {
	font-weight: bold;
	font-size: 10px;
}

.unterstrichelt {
	text-decoration: underline;
	text-decoration-style: dashed;
}

.haengender_einzug {
	margin-left: 10px;
	text-indent: -10px;
}

.relation {
	margin-top: 30px;
}

.relation th, .relation td {
	padding: 2px 5px 2px 5px;
	border: 1px dotted black;
	vertical-align: top;
}

.ws, .ss {
	display: block;
	margin-bottom: 10px;
}

.float_left_desktop {
	float: left;
	margin-right: 4em;
}

.floatieren {
	float: left;
	margin-right: 2em;
}
	
.diagrammDIV, .diagrammIMG, .diagrammLEGENDE {
	width: 250px;
}

.diagrammLEGENDE {
	margin-left: 50px;
}

.diagrammbreite {
	width: 260px;
}

.diagrammDIV, .diagrammLEGENDE {
	float: left;
}

.rahmenlos td {
	border: none;
}

.beispieltabelleLinks {
	width: 45%;
}

.beispiel {
	font-style: italic;
	padding: 0 6px 0 6px;
	margin: 0 -6px 0 0;
}

.beispiel:hover, .interlinearubersetzung:hover, .durchschnitt, abbr:hover {
	background-color: #c9e5ec;;
}

.dreieck {
	height: 15em;
}

tr:hover {
	background-color: #eef0f3;
}

.tabelleOhneHover tr:hover {
	background-color: transparent;
}

.noMobile li, .noMobile ul, .noMobile ol {
	margin: 0;
}

.keinHover tr:hover {
	background-color: white;
}

.beispielListe li {
	list-style-image: url("img/beispielpfeil.png");
	padding-left: 20px;
	font-style: italic;
}

ol li {
	list-style-type: decimal;
}

.endnotennummer {
	text-decoration: none; 
	font-style: normal; 
	color: white;
	background-color: rgb(200,200,200);
}

.endnotennummer:hover {
	color: white;
	background-color: #D8413E;}

.manuell {
	background-color: #8AC2D0;}

.nogo {
	 background-color: #FECBCA;; 
}

.nogo:hover {
	background-color: #FECBCA;;
}

pre {
	font-size: 1em;
	font-weight: bold;
}	

h1, h2, h3, h4, .seitentitel {
	font-style: italic;
	color: #262A31;
	}

.zitatBeispiel {
	padding: 0 50px 0 50px; 
	font-family: Times New Roman, Serif;
	font-style: italic;
}
	
.seitentitel {
	font-size: 28px;
	font-weight: bold;
	margin-top: 36px;
	text-transform: uppercase;
}

h1 { 
	margin: 40px 0 30px 0;
	counter-reset: ebene2;
	}
	
h1:before {
 content: counter(ebene1) ". ";
 counter-increment: ebene1;
	}

h2 {
	counter-reset: ebene3;
	}
	
h2:before {
 content: counter(ebene1) "." counter(ebene2) " ";
 counter-increment: ebene2;
	}
	
h3 { 
	counter-reset: ebene4;
}
	
h3:before {
 content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
 counter-increment: ebene3;
}

h4:before {
 content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) "." counter(ebene4) " ";
 counter-increment: ebene4;
}
	
	
h2, h3, h4 {
	font-weight: normal;
	}
	
h2, h3, h4 {
	margin-top: 40px; 	
}

h1 + h2, h2 + h3, h3 + h4 {
	margin-top: 0;
}

#bannertext {
	font-size: 26px;
	display: block;
	margin: 40px 0 15px 0;
}


li { 
	margin: 1em 0 0 0; 
	list-style: '– ';
}

.listeMitLinks {
	margin-left: 0;
}

.listeMitLinks li, .kuller_entfernen li, .kuller_entfernen {
	list-style-type: none;
}
	
img {
	margin-top: 2em;
}

.SecondLevel {
	margin-left: 30px;
	list-style: '›';
	padding-left: 5px;	
}
	
.ThirdLevel { margin-left: 50px; }

.imageGanzeBreite {
	margin: 3em 0 0.5em 0;
}

.imageGanzeBreite {
	width: 100%;
}

.code {
	font-family: Courier New, Courier, monospace;
}

.sagen .code {
	background-color: #d8fdd3;
}

.taste {
	background-color: #c9e5ec;;
	border: 1px black dotted;
	border-radius: 4px;
	padding-left: 5px;
	padding-right: 5px;
}

.satz {
	border: 1px solid #D8413E;;
	padding: 2em;
	font-weight: bold;
}

ul.satz, ol.satz {
	padding: 10px 10px 25px 45px;
}

a[href^="http"] {
	color: #8AC2D0;;
}

a:not([href^="http"]) {
	color: #D8413E;;
}

a[href*="res/"] {
	padding-left: 22px;
	display: inline-block;
	background: url('img/schloss.png') top left no-repeat;
}

a[href*="res/"]:hover {
	background: url('img/schloss_hover.png') top left no-repeat;
}

a.runterladen, a.angucken, a.runterladen:hover, a.angucken:hover {
	max-width: 180px;
}

a.runterladen, a.angucken {
	border: 1px #D8413E dotted;
	border-radius: 6px 0 0 0;
	padding-left: 40px;
	padding-right: 5px;
	hyphens: none;
	margin: 0 3px 3px 0;
	display: inline-block;
	max-width: 180px;
}

a.runterladen {
	background: url('img/downloadpfeil.png') top left no-repeat;
}

a.angucken {
	background: #fefbfb url('img/auge.png') top left no-repeat;
}

a.runterladen:hover {
	background: url('img/downloadpfeil_hover.png') top left no-repeat;
	border: 1px #262A31 dotted;

}

a.angucken:hover {
	background: url('img/auge_hover.png') top left no-repeat;
}

a:hover, .ws:hover, .ss:hover, .grau {
	
	color: #262A31;
	
}

a.ws { 
	color: #262A31; 
}

a.ss { 
	color: #D8413E;; 
}

#main {
	width: 83%;
	height: 98%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: -7px;
	}
	
#content {
	padding: 0;	
	}
	
#banner_rechts {
	float: right; 
	margin-top: 0;
}	

#banner_rechts img {
	height: 170px;
}
	
#text {
	float: left;
	min-width: 700px;
	}	
	
.kontakt {
	padding: 0 0 0 55px;
}

#footer {
	font-size: 12px;
	margin: 30px 0 0 -15px;
	padding: 10px;
	}
	
#seiteninhalt {
	float: left;
	width: 65%;
	min-height: 80%;
}
	
#rechtes_paneel	{
	float: right;
	width: 28%;
	margin: 26px 0 0 10px;
	background-color: #fff;
	}
	
#seiteninhalt, #rechtes_paneel {
	hyphens: auto;
}

#klausurmaszstab td {
	text-align: right;
	border: 1px dotted black;	border-collapse: collapse;
	vertical-align: top;
}

.beispieltabelle tr {
	font-style:italic;
	border: 1px dotted black;}

#vergleichTermLex td {
	border: 1px dotted black;	border-collapse: collapse;
	vertical-align: top;
}

#Latysev {
	width: 40%;
}

.grossesBild {
	width: 60%;
}

.do { 
	margin-bottom: 10px;
	float: left;
	}
	
.anmoderation {
	color: #8AC2D0;;
}

#banner a {
	color: #262A31;
	font-size: 26px; color: #262A31; 
}

#banner p {
	font-size: 26px; color: #262A31;}

.td_info {
	width: 2em; 
	padding: 0 2px 0 0;
}

.span_info {
	font-size: 1.5em; 
	color: #262A31; 
	font-weight: bold;
}

p	{
	margin: 20px 0 20px 0; 
}
	
.subtitle { margin: 10px 0 50px 0; }
.kuller_entfernen { list-style-type: none; }
.clear { clear: both; }

.uploadMeldung {
	margin-top: 100px;
}

.warning {
	background-color: #c9e5ec;;
	padding: 5px;
	width: 700px;
}

.abgabeUbersetzung {
	border: 1px dotted #262A31;
	padding: 6px 6px 6px 17px;
	width: 36em;
}

form {
	border: 1px dotted #262A31;
	padding: 8px;
}

input[type=number] {
 text-align: right;
	display: inline-block;
	background-color: #DDEDF1;
	width: 50px;
}

label, #notenausgabe {
 display:inline-block;
	width: 150px;
}

inpug {
	display: block;
}

.abgabeUbersetzung td {
	border: none;
}

table {
	border-collapse: collapse;
}

.tabellenrahmen, .tabellenrahmen td {
	border: 1px dotted grey;
	border-collapse: collapse;
	vertical-align: top;
	padding: 0 10px 0 10px;
}

th {
	text-align: left;
	font-style: italic;
	padding: 10px;
}

#rechtes_paneel table, table td {
	border: none;
	vertical-align: top;
	padding: 5px;
	}

.zentrieren {
	text-align: center;
}

.admin a:hover {
	background-color: black;
	color: white;
	}

.problem, .fehler {
	color: red;
	background-color: yellow;
}

.sagen, .wissen { display: none; }
.regieanweisung {
	background-color: rgb(250,250,250);
	font-family: Times New Roman, Serif;
}

.beispielsatz {
	margin: 20px 0 20px;
	text-align: center;
	font-style: italic;
}

.kontakt, .bildunterschrift {
	font-size: 14px;
	vertical-align: top;
	line-height: 1.2;
	color: grey;
}

.bildunterschrift {
	display: block;
	margin: 1em 0 3em 0;
}

.blaetterPfeil {
	text-align: center;
	font-size: 2em;
}

.noscreen {
	display: none;
}

@media print {
	
	body {
		font-family: 'Times New Roman', Serif;
	}
	
	p {
		width: 500pt;
	}
	
	a, .listeMitLinks a { 
	color: black;
	text-decoration: none;
	}
	
	#banner, hr, .blaetterPfeil, .noprint, .kontakt, #rechtes_paneel { display: none; }
}


/* Bei kleineren Fenstern bricht das Logo um und wird deswegen vorsorglich entfernt */

@media only screen and (max-device-width: 1100px){

#banner_rechts, #rechtes_paneel {
	 display: none
	 }

#seiteninhalt {
	width: 100%;
	}
}

/* Jetzt die Smartphones */

@media only screen and (max-device-width: 700px) {

.button, .knoten, .tab, .tab_unten, .gruppe {
	font-size: 0.5em;
	margin-bottom: 0.5em;
}
	
.noscreen {
	display: inline;
}

.icon {
	height: 1em;
}

.float_left_desktop {
	float: none;
}
	
.diagrammDIV, .diagrammIMG, .diagrammLEGENDE {
	width: 700px;
}

.diagrammbreite {
	width: 100%;
}

.beispielListe {
	margin-left: 110px;
}

.beispielListe li {
	list-style-image: url("img/beispielpfeilmobil.png");
}
	
input[type=number] {
	width: 100%;
}

label {
	font-size: 4em;
}

#notenausgabe, label {
	display: block;
	width: 100%;
}

li, p, #banner, .bildunterschrift, td {
	font-size: 50px;
}

h1, h2, h3, #bannertext {
	font-size: 80px;
}

#main {
	padding: 0;
	background-size: 1800px;
	width: 100%;
}

.kontakt {
	margin: 20px 0 50px -25px;
}


h1, h2 {
	margin-top: 3em;
}

#rechtes_paneel, #banner_rechts, .noMobile, a:not([href^="http"]).runterladen, .tag {
	display: none;
	}
	
.SecondLevel {
	margin: 3em;
	list-style: '›';
	padding-left: 5px;
}
	
.ThirdLevel {
	display: none;
	}	

img, #seiteninhalt p .#Latysev, .grossesBild {
	width: 100%;
}

input {
	width: 100%;
	display: block;
	font-size: 3em;
	margin-bottom: 1em;
	height: 3em;
}

#seiteninhalt {
	width: 100%;
}

}

@media screen {

a {
	color: #8AC2D0;;
	text-decoration: none;
	}
}