@import 'fonts.css';

*	{ margin: 0; padding: 0; }

html	{ overflow-y: scroll; }

body, input, textarea, select, a	{
	font-family:'PTS', sans-serif; color:#036;
         font-size:100%; font-size:19px;
         }


#page	{ position:relative; width:98%; margin:auto; min-width:320px; max-width:1600px; }

#header	{ position:relative; }
#header .r { position:absolute; top:5px; right:25px; z-index:200; }
#header .r a { margin-left:10px; font-size:16px; z-index:200;}
#header .r a.aktiv-f, #header .r a:hover { color:#ccc; }
#content	{ position:relative; clear:both; }

/*### mobil-navi ###*/
#nav-menue { position:relative; }
#bereichbutton { width: auto; font-size:0; }
.menue-button { display: none; }
/*### mobil-navi ende ###*/

#nav	{ margin-top:40px; float:left; width:25%; }

#main	{ position:relative; top:40px; float:left; width:75%; margin:0; }

#footer	{ position:relative; clear:both; }

.clear	{ clear:both; display:block; width:100%; height:0; }
.clear-l	{ clear:left; }
.clear-r	{ clear:right; }

h1, h2, h3 { font-weight:normal; font-size:22px; }
p, fieldset	{ margin:0 5% 20px 5%; text-align:left; line-height:140%; }
a	{ text-decoration:none; }
img	{ border:none; }
li	{ list-style: none; }

.i	{ font-style:italic; }
.b	{ font-weight:bold; }
.u	{ text-decoration:underline; }

.l	{ text-align:left; }
.c	{ text-align:center; }
.r	{ text-align:right; }
.t	{ vertical-align:top; }

.shadow	{ border-radius:7px; }

#nav .shadow {
         background:#036;
         margin:0px 10px 20px 10px;
         padding:2em 0;
         -moz-box-shadow: 0 0 1.5em #036;
	-webkit-box-shadow: 0 0 1.5em #036;
         -khtml-box-shadow: 0 0 1.5em #036;
	box-shadow: 0 0 1.5em #036;
         }

#main .shadow {
	background:#fff;
         margin:0px 20px 20px 30px;
         padding-top:2em;
         -moz-box-shadow: 0 0 1.5em #aaa;
	-webkit-box-shadow: 0 0 1.5em #aaa;
         -khtml-box-shadow: 0 0 1.5em #aaa;
	box-shadow: 0 0 1.5em #aaa;
         }

#nav li	{ background:url(../adds/linie.gif) left bottom repeat-x; }
#nav li li { background:#047 url(../adds/linie.gif) left bottom repeat-x; }
#nav li li li { background:#058 url(../adds/linie-sub.gif) left bottom repeat-x; }

#nav a	{
	display:block; line-height:2em;
         color:#fff; padding:0 10px 0 15px;
         }

#nav a:hover, #nav a.current {  background:url(../adds/aktiv-l-weiss.gif) no-repeat left center; }
#nav a.midaktiv, #nav a.midaktiv:hover { background:url(../adds/aktiv-r-weiss.gif) no-repeat right center; }
#nav li li li a:hover, #nav li li li a.current { background:url(../adds/aktiv-l-weiss.gif) no-repeat left center; }
#nav a.kl { text-align:right; padding:0px 20px 0 30px; }
#nav a.kl:hover, #nav a.kl.ak { background:url(../adds/aktiv-l-weiss.gif) no-repeat right center; }

#content #main h1 { margin: 0 5% 1.5em 5%; }
#content #main h2 { margin: 1.5em 5% 1.5em 5%; }
#content #main h3 { margin: 1.8em 5% 1.2em 5%; }
#main a	{ color:#036; }
#main a.go { background:url(../adds/go_on.gif) left center no-repeat; padding-left:17px; }
#main a:hover { text-decoration:underline; }
img.poet { float:left; margin:0 25px 25px 0; width:30%; }
#main .poet a:hover { text-decoration:none; }
#main .poets-name a:hover { text-decoration:underline; }

#main ul { margin:0 5% 20px 5%; }

#main ul.go li a { background: url(../adds/go_on.gif) center right no-repeat; padding:0 20px 0 0; }


.bsp, .gedicht{ font-size:0; }
.bsp img { margin-right:12px; }

.bsp .r-0 img, .gedicht .r-0 img { margin-right:0; }
.bsp span { display:block; float:left; height:55px; }
.p1	{ width:100%; height:auto; }

.bsp.fraktur span img { height:40px; margin-top:2px; }

#content #main h1.kurrent { margin-bottom:35px; }
#content #main h1.suetterlin { margin-bottom:25px; }
#content #main h1.offenbacher { margin-bottom:21px; }
#content #main h1.fraktur { margin-bottom:38px; }
.abc .let {
	display:block; float:left; width:180px; height:160px; margin:0 5px 0 5px;
         text-align:center;
	background:center top no-repeat;
         }

.abc.kurrent .let img { margin-top:0px; margin-bottom:5px; }
.abc.suetterlin .let img { margin-top:0; margin-bottom:3px; }
.abc.offenbacher .let img { margin-top:0; margin-bottom:2px;  }
.abc.fraktur .let img { margin-top:0px; margin-bottom:5px; }

#liste	{ display:none; }
.auswahl a { display:block; float:left; width:35px; text-align:center; padding:10px; margin:3px; border:1px solid #036; }

.source	{ font-size:12px; border-bottom:1px solid #036;  }

.gedicht-aktiv	{ display:block; text-align:center; }
.gedicht-inaktiv { display:none; }
.gedicht, .gedicht p, .gedicht-aktiv p { text-align:center; }

.zeile	{ display:block; float:left; }
.zeile.d	{ width:45%; margin-right:2.5%; }
.zeile.k, .zeile.o, .zeile.s { width:52%; border:1px solid #036; }
.zeile.k span, .zeile.o span, .zeile.s span { display:block; width:100%; border-top:1px solid #036; border-bottom:1px solid #036; }
.zeile.k span { height:16px; margin:32px 0; }
.zeile.o span { height:33px; margin:22px 0; }
.zeile.s span { height:26px; margin:26px 0; }

.feder { display:block; width:100%; text-align:center; margin:12px 0; }
.feder img	{ width:300px; }
.feder .f1	{ width:500px; }
.feder .f2	{ width:250px; }
label { display: block; margin:5px; }

 input:invalid { box-shadow:none; }

textarea, select { width:55%; padding:5px; border:1px solid #036; border-radius:3px; }
option { padding-left:5px; }

input[type=text] {
	display:block; width:54%; padding:10px; font-size:1.2em;
         border:1px solid #036; border-radius:5px;
         }

input.err, textarea.err { border-color:#800; }

input:focus, textarea:focus { border-color:#369; }

input[type=submit], input[type=reset], button {
   float:left; width:24.5%; margin-left:1.5%; margin-right:1.5%;
   background:url(../adds/bg-button.gif) top left repeat-x;
   border-radius:5px; font-size:1em; color:#fff; padding:3px 0;
 }

.err	{ color:#800; }

fieldset { border:1px solid #ddd; }

.up	{ position:relative; bottom:0; height:50px; text-align:center; }

.ausgabe	{
	background:url(../adds/bg_ausgabe.gif) repeat-x; height:63px;
         margin-bottom:0px;
         margin-top:0px;
         vertical-align:top;
         }

.ausgabe img { float:left; }

#main .up a, #main .up a:hover {
	display:block; width:50px; height:50px; margin:auto; text-decoration:none;
         background:#fff url(../adds/up.gif) bottom center no-repeat;
         }

@media only screen and (min-width:1600px) {
	.gedicht.gr p img { width:1140px; }
}

@media only screen and (min-width:1200px) {
	body	{ background-size:20.1%; }
         #nav	{ width:20%; }
         #main	{ width:80%; }
         .gedicht p img { width:748px; }
         .gedicht.gr p img { width:100%; }
}

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

}

@media only screen and (max-width:1024px) {
         input[type=text] { width:456px; }
         textarea { width:464px; }
         input[type=submit], input[type=reset], button { width:232px; margin:0 2px; }
         img.poet { width:47%; }
         .feder .f1	{ width:100%; }
         .auswahl a { width:50px; padding:15px;}
}

@media only screen and (max-width:800px) {
	body	{ background-size:32.1%; }
	#page { width:100%; margin:0; border-left:none; border-right:none; }
         #liste	{ display:block; }
         #nav	{ width:32%; }
         #main	{ width:68%; }
         input[type=text] { width:94%; }
         textarea { width:95%; }
         input[type=submit], input[type=reset], button { width:47.5%; max-width:47.5%; margin:0 1%; }
         .zeile.d	{ clear:left; float:none; width:97%; margin-bottom:15px; margin-right:none; }
	.zeile.k, .zeile.o, .zeile.s { clear:left; float:none; width:97%; }
}

@media only screen and (max-width:600px) {
	body	{ background-position:-300px top; }
         #bereichbutton { width: 100%; padding:0; }
         .menue-button {
                 display:block;
                 position: absolute;
		left: 15px;
		top: 10px;
                 border:1px solid #036;
                 border-radius:5px;
		padding:0 10px; height:30px;
		color: #036;
		cursor: pointer;
		text-decoration: none;
	}
         #nav { 	clear:both; float: left; margin-top:60px; width: 100%; display: none; background:#036; }
         #nav .shadow, #main .shadow {
	padding:0;
         margin:0;
         -moz-box-shadow: none;
	-webkit-box-shadow: none;
         -khtml-box-shadow: none;
	box-shadow: none;
         border-radius:0;
         }
         #nav li { width: 100%; }
         #nav a, #nav li a { margin-right:0; margin-left:0; }
         #nav li { padding:0; }
         #main { float:none; clear:both; width:90%; border-left:none; top:80px; padding-left:5%; padding-right:5%;
         	margin-left:0; }
         p, #content #main h1, #content #main h2, #content #main h3 { margin-left:0; margin-right:0; }
}

@media only screen and (max-width:480px) {
         #header .r { width:280px; right:5px; }
         #header .r a { margin-left:5px; }
         .gedicht p img { width:100%; }
}

@media only screen and (max-width:400px) {
         #header .r { width:240px; right:5px; }
         #header .r a { margin-left:5px; }
}

@media only screen and (max-width:320px) {
	#page { width: 320px; border:none; }
         #nav { width:320px; }
         #main .abc { margin-left:10px; margin-right:0; }
         input[type=submit], input[type=reset], button { float:none; width:100%; max-width:100%; margin:0 0 20px 0; }
}

/*### media-queries ende ###*/


/*### mobil-navi ###*/
#nav-menue:target #nav { display: block; margin-bottom:-40px; }

#nav-menue:target .menue-button-beschr-open { display: none; }

/* Fix for Android */
body {
  -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}
/*### mobil-navi ende ###*/