@charset "utf-8";
@font-face { font-family: Limelight; 
	src: url('fonts/Limelight.ttf') format('truetype'); }
@font-face { font-family: Teiresias; 
	src: url('fonts/tiresias_pcfont_z.ttf') format('truetype'); }

* { margin: 0; padding: 0; }

body {
	background: #0C1824;/*#002438;*/
	font: 101%/126.25% Teiresias, "Droid Sans", Arial, Helvetica, sans-serif;
}
header {
	display: block;
}
h1, h2, #zahl {
	font-family: Limelight, serif; 
	font-weight: normal;
}
h1, #zahl {
	font-size: 1.6875em;
	line-height: 111%;
}
h2 {
	font-size: 1.375em;
	padding-top: .5em;
}
header h1, header #zahl {
	float: right;
	font-size: 1.125em;
	width: 16em;
	line-height: 91%;
	text-align: center;
	margin-top: .125em;
	margin-right: .0625em;
	padding: .1875em 0em .0625em;
	border: .125em solid #BCC4C8;
	border-radius: .5em;
	background: #1C6884;
	color: #F8F4F0;
}
@media screen and (min-width: 481px) {
	header h1 {
		font-size: 1.25em;
		width: 17.5em;
		border-radius: .25em;
		border-top-right-radius: 8em;
		border-bottom-left-radius: 8em;
		padding: .1875em 1em .0625em;
	}
}
@media screen and (min-width: 801px) {
	header h1, header #zahl {
		font-size: 1.75em;
		width: 26.5em;
		padding: .5em .25em .3125em .75em;
	}
}
header h1 span {
	font-size: .8125em;
}
header #zahl {
	float: left;
	width: 10em;
	margin-left: .0625em;
	border-radius: .25em;
	border-top-left-radius: 8em;
	border-bottom-right-radius: 8em;
	padding-right: .75em;
	/* ! */
	display: none;
}
@media screen and (min-width: 1281px) {
	header #zahl { display: block; }
}
img {
	width: 100%;
	height: auto;
}
a {
	background: inherit;
	color: #F8F4F0;
}
a:hover, a:focus {
	background: inherit;
	color: #FCD01C;
	text-decoration: overline;
}
a img {
	border: none;
}
/* der Informations-Bereich ----------------------------------------------- */
#layoutbox, #b, #c	{	font-size: .875em; }
#layoutbox {
	clear: right;
	width: 20em;
	margin: 0 auto;
	border-radius: .5em;
	padding: .25em;
	background: #3C3834;
	color: #F8F4F0;
}
#layoutbox p a {
	float: left;
	font-size: .875em;
	font-weight: normal;
}
#layoutbox a {
	background: none;
}
#layoutbox p + p a {
	float: right;
	padding-right: .125em;
}
form p {
	clear: right;
	padding-left: .125em;
	font-size: 1em;
}
@media screen and (min-width: 481px) {
	#layoutbox {
		width: 31.6875em;
	}
}
@media screen and (min-width: 801px) {
	#layoutbox {
		width: 36em;
		height: 3.75em;
		position: relative;
		top: .3125em;
		margin-bottom: .625em;
		border: 1px solid #BCC4C8;
		border-radius: 1em;
		padding: 0.25em 1em;
	}
	form p {
		font-size: 1.125em;
		padding-top: .5em;;
	}
}
/* der Bilder-Anzeigerahmen ----------------------------------------------- */
#b, #c {
	width: 98%;
	margin: .25em auto;
	padding-bottom: .125em;
}
@media screen and (min-width: 1281px) {
	#b, #c {
		width: 99.5%;
	}
}
#info, 
#kontakt {
	position: static;
	width: 95%;
	max-width: 28em;
	margin: 1.5em auto 0;
	padding: .125em .5em;
	background: #3C3834;
	color: #F8F4F0;
	border-radius: .375em;
}
#info *, 
#kontakt * {
	margin: .25em 0 .125em;
}
/* der Bereich der Katalog-Bilder ----------------------------------------- */
#vorschau {
	width: 100%;
	list-style: none;
}
#vorschau li {
	float: left;
	background: #3C3834;
	color: inherit;
	border-radius: .75em;
	margin-bottom: .25em;
	margin-left: 2%;
	text-align: center;
}
#vorschau li a {
	display: block;
	width: 11em;
	height: 7em;
	padding: .25em .25em;
	font-family: "Droid Sans", Arial, Helvetica, sans-serif;
	font-size: .875em;
	line-height: 111%;
}
@media screen and (min-width: 801px) {
	#vorschau li {
		margin-left: .25%;
		border: 1px solid #BCC4C8;
		border-radius: 1em;
		padding: .25em .125em;
	}
	#vorschau li a {
		width: 11.25em;
		padding: .25em;
	}
}
#vorschau li a:link {
	background: transparent;
	color: #F8F4F0;
	text-decoration: none;
}
#vorschau li a:visited {
	background: transparent;
	color: #BCC4C8;
	text-decoration: none;
}
#vorschau li a:hover, li a:focus {
	background: transparent;
	color: #FCD01C;
	text-decoration: underline;
}
#vorschau li a img {
	width: auto;
	height: 56px;
	border: none;
	margin-bottom: .0625em;
}
label {
	font-weight: bold;
	display: inline-block;
}
select, input {
	width: 5.5em;
	margin-right: .375em;
}
@media screen and (min-width: 801px) {
	select, input {
		margin-right: .75em;
	}
}
#typ {
	margin-right: .125em;
}
input[type=submit] {
	width: auto;
	float: right;
	margin-right: .0625em;
}
/* Bereich der Einzelbilder -------------------------------------------- */
#bild {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 102%;
	margin: -1% 0 -1% -1%;
	background: rgba(12, 24, 36, .6875);
	text-align: center;
}
#bild img {
	height: 96.6875%;
	width: auto;
	margin-top: .5%;
	border: 2px solid #BCC4C8;
	border-radius: 1em;
}
@media screen and (orientation: portrait) {
	#bild img {
		margin-top: 5%;
		width: 92.5%;
		height: auto;
	}
}

#lzeig {
	position: absolute;
	top: .375em;
	left: .25em;
	display: block;
	width: 32px;
	height: 64px;
	background: url(grafik/zeiger2.gif) left top no-repeat;
}
#rzeig {
	position: absolute;
	top: .375em;
	right: .25em;
	display: block;
	width: 32px;
	height: 64px;
	background: url(grafik/zeiger2.gif) right top no-repeat;
}
#lgrau {
	position: absolute;
	top: .375em;
	left: .25em;
	display: block;
	width: 32px;
	height: 64px;
	background: url(grafik/zeig_grau2.gif) left top no-repeat;
}
#rgrau {
	position: absolute;
	top: .375em;
	right: .25em;
	display: block;
	width: 32px;
	height: 64px;
	background: url(grafik/zeig_grau2.gif) right top no-repeat;
}

.klein {
	font-size: .75em;
}
.beschriftung {
	position: relative;
	width: 100%;
	text-align: center;
}
.beschriftung span {
	display: block;
	width: 20em;
	position: absolute;
	top: -11em;
	left: 50%;
	margin-left: -10em;
	z-index: 2;
	background: rgba(48, 56, 60, .67);
	color: #F8F4F0;
	padding: .0625em 0;
	border-radius: .5em;
}
@media screen and (min-width: 481px) {
	.beschriftung span {
		top: -9em;
	}
}
.beschriftung span strong {
	font-weight: normal;
	color: #FCD01C;
	font-size: 1.25em;
}
.wipe {
	clear: left;
}