@charset "utf-8";
@font-face {
	font-family: 'Fredericka the Great';
	src: url(../sys/FrederickatheGreat/FrederickatheGreat-Regular.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto_Bold';
	src: url(../sys/Roboto/Roboto-Bold.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto_Light';
	src: url(../sys/Roboto/Roboto-Light.ttf) format('truetype');
}

/* ==============================================
   Reset
   ============================================== */

html {
	overflow-y: scroll;
} 

body, div,
h1, h2, h3, h4, h5, h6,
p, th, td, blockquote, pre,
ul, ol, li, dl, dt, dd,
form, fieldset, input, textarea { 
  padding: 0; margin: 0; 
} 

/* ==============================================
   Restaurierung 
   ============================================== */

/* margin-bottom für Überschriften, Absätze, Listen etc. */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl {
	margin-bottom: 0.5em;
} 
/* Zitate einrücken */ 
blockquote {
	margin: 1em 2em;
	font-style: italic;
} 

/* Alle Listen etwas einrücken */
ul, ol, dl { margin-left: 1em; }

/* Listenelemente etwas mehr einrücken */
li { margin-left: 0.8em; } 

/* Definitionen in Definitionslisten noch mehr einrücken */
dd { margin-left: 2em; }

/* Verschachtelte Listen ohne Außenabstand oben/unten */
ul ul, ul ol, ul dl,
ol ul, ol ol, ol dl,
dl ul, dl ol, dl dl {
   margin-top: 0;
   margin-bottom: 0;
}

/* Aufzählungszeichen für Listenkisten */
/* Ebene 1 - ul: square (ausgefülltes Rechteck); ol: Dezimalzahlen  */
ul { list-style-type: square; }
ol { list-style-type: decimal; }

/* Ebene 2 – ul: disc (ausgefüllter Kreis); ol: kleine Buchstaben */
ul ul { list-style-type: disc; }
ol ol { list-style-type: lower-alpha; }

ul ol { list-style-type: decimal; }
ol ul { list-style-type: square; }

/* Ebene 3 - ul und ol mit circle (nicht ausgefüllter Kreis) */
ol ol ol, ol ol ul, ol ul ul, ol ul ol,
ul ul ul, ul ul ol, ul ol ol, ul ol ul {
   list-style-type: circle; }

/* Tabellen benötigen noch cellspacing="0" im HTML */ 
table { border-collapse: collapse; border-spacing: 0; }

/* Rahmen um fieldset und verlinkte Bilder entfernen */
fieldset, a img { border: none; } 

/* ================================================================ */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #222;
	background-image: url(../img/hintergrund_body.gif);
	font-size: 87%;
}

p {
	font-size: 1em;
	line-height: 1.5em;
	margin-top: 0.5em;
	margin-right: 0;
	margin-bottom: 1.5em;
	margin-left: 0.3em;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: "Fredericka the Great", "Times New Roman", Times, serif;
	font-weight: lighter;
}
h1 {
	font-size: 4.5em;
	line-height: 1em;
	margin: 0.33em 0;
	font-variant: small-caps;
	}
h2 {
	font-size: 2em;
	line-height: 1.5em;
	margin-top: 0.75em;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0px;
	}
h3 {
	font-size: 1em;
	line-height: 1em;
	}
h4 {
	font-size: 4.5em;
	line-height: 1em;
	}
h5 {
	font-size: 4.5em;
	line-height: 1em;
	}
h6 {
	font-size: 4.5em;
	line-height: 1em;
	}

a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;
}
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline;
}

a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none;
}

a:link.diskret, a:visited.diskret {
	text-decoration: none;
	color: #000;
	}
a:hover.diskret, a:active.diskret, a:focus.diskret {
	text-decoration: underline;
	background-color: #FFF;
	}
	
/* ~~ Dieser Container wird für den Hintergrund des Headers benoetigt ~~ */
#huelle {
	background-image: url(../img/hintergrund_header.png);
	background-repeat: repeat-x;
}

/* ~~ Dieser Container mit fester Breite umschließt die anderen div-Tags. ~~ */
#container {
	width: 700px;
	margin: 0 auto;
	box-shadow: 0px 0px 10px 0px #333;
	background: rgba(255, 255, 255, 0.3);
}
/* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. Sie enthält einen Bild-Platzhalter, der durch Ihr eigenes, mit Hyperlink versehenes Logo ersetzt werden sollte. ~~ */
#header {
	padding: 8px 30px 0 30px;
	height: 75px;
}
a.logo {
	font-family: "Roboto_Bold", Verdana, Arial, Helvetica, sans-serif;
	font-size: 300%;
	color: #222;
	text-decoration: none;
}
a.logo_green {
	font-family: "Roboto_Bold", Verdana, Arial, Helvetica, sans-serif;
	font-size: 300%;
	color: #97ce60;
	text-decoration: none;
}
a.logo_light {
	font-family: "Roboto_Light", Verdana, Arial, Helvetica, sans-serif;
	font-size: 300%;
	color: #222;
	text-decoration: none;
}


#global {
  	float: right;
 	 text-align: right;
	}

#global li {
	display: inline;
	list-style-type: none;
	margin-left: 0;
}
.text {
	background-color: #FFF;
}

#global a {
	color: black;
	font-size: 90%;
	text-decoration: none;
}

#navi1 ul {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	margin: 3px 30px 0 30px;
	font-size: 260%;
}

#navi1 li {
	display: inline;
	list-style-type: none;	
	margin: 0;
}

#navi1 li.stadt a {
	color: #C00;
	}

#navi1 li.land a {
	color: #804000;
	}

#navi1 li.mensch a {
	color: #00C;
	}

#navi1 li.natur a {
	color: #759933;
	}

#navi1 li.still a {
	color: #9F9F9F;
	}
	
#navi1 li.frei a {
	color: #696969;
	}

#navi1 a {
	text-decoration: none;
	opacity: 0.5;
}

#navi1 a:hover, 
#navi1 a:focus, 
#navi1 a:active {
	opacity: 1;
}

#navi1 li.current a {
	opacity: 1;
}

/*
#navi2 ul {
	margin: 0 0 0 3px;
}

#navi2 li {
	display: inline;
	list-style-type: none;
}
*/

/* ~~ Dies sind die Layoutinformationen. ~~ 

1) Eine Auffüllung wird nur oben und/oder unten im div-Tag positioniert. Die Elemente innerhalb dieses div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.

*/

#content {
	padding: 30px 30px 10px 30px;
	min-height: 600px;
	margin-top: 33px;
}

/* ~~ Fußzeile ~~ */
#footer {
	text-align: center;
	background-color: #fff;
	font-size: 80%;
	margin: 0;
	border-top: 1px solid #000;
	padding-bottom: 1px;
}

/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right: 8px;
} 
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.fotobox {
	display: block; /* erforderlich fuer nachfolgende Zentrierung */
	margin: 0px auto 38px;
	/* Der Rahmen: */
	padding: 15px 15px 9px 15px;
	border: 1px solid #333;
	background-color: #FFF;
}

.quer {	
	width: 450px;
}

.hoch {	
	width: 300px;
}

.querfoto {
	height: 300px;
	overflow: hidden;
}

.hochfoto {
	height: 450px;
	overflow: hidden;
}

.fotobox p {
	font-size: 80%;
	line-height: 1.2em;
	margin: 8px 0 0 0;
}