@charset "UTF-8";
@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive.eot');
	src: local('ChunkFive Regular'), local('ChunkFive'), url('Chunkfive.woff') format('woff'), url('Chunkfive.ttf') format('truetype'), url('Chunkfive.svg#ChunkFive') format('svg');
	padding: 5px;
}

body {
	background: #ededed url(media/hg_grau.png);
	margin: 0;


/* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center;

/* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
}

p, table {
	font: 100%/120% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #6c6c6c;
}

h1, h2, h3, h4 {
	font-family: ChunkFiveRegular, Georgia, "Times New Roman", Times, serif;
	line-height: 120%;
	color: #b16737;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.05em;
}

h1, h2 {
	border-bottom: 1px solid #b60000;
	text-shadow: #bfbdbd 0 1px 0;
}

h3 {
	font: bold 120%/120% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	letter-spacing: 0 em;
}

#container {
	width: 780px;
	

/* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
	background: #FFFFFF;
	margin: 0 auto;


/* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	text-align: left;

/* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}

.leftalign {
	float: left;
}

.nomargin {
	margin: 0 0 0 -15px;
	padding: 0;
}

img.leftalign {
	margin-right: 20px;
	margin-bottom: 10px;
}

.rightalign {
	float: right;
}

img.rightalign {
	margin-bottom: 10px;
	margin-left: 20px;
	margin-top: 10px;
}

.boxshadow {
	-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
	box-shadow: 0 1px 10px rgba(0,0,0,.1);
}

a {
	text-decoration: underline;
	color: #9b592f;
}

#kasten {
	background-color: #ffffa0;
	border-width: 1px;
	border-style: solid;
	border-color: #e5e597;
	margin-top: 0;
	padding: 5px;
}

.kasten p{
	font: 1.2em/140% ChunkFiveRegular, Georgia, "Times New Roman", Times, serif;
	color: #525252;

}


/* @group Header */

#header {
	background: #ffffff url(media/kopf.jpg);
	padding: 0 25px 0 25px;
	height: 160px;
}

#header h1 {
	margin: 0;


/* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 10px 0;

/* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
}

/* @end */

/* @group navigation */

#navigation {
	float: left;
	text-align: left;
	font: bold 1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#navigation ul {
	float: left;
	text-align: left;
	list-style-type: none;
	position: relative;
	padding-left: 0;
}

#navigation li {
	float: left;
	padding-right: 5px;
	text-align: left;
	list-style-type: none;
	position: relative;
}

#navigation a:link {
	color: #000;
	text-decoration: none;
}

#navigation a:visited {
	color: #000;
	text-decoration: none;
}

#navigation a:hover {
	text-decoration: underline;
	color: #b16737;
}

a#startnav:link, a#startnav:hover {
	text-decoration: none;
	color: #919191;
}

li#startnav {
	
}

#navigation a:active {
	color: #000;
	text-decoration: underline;
}

/* @end */

/* @group mainContent */

#mainContent h1 {
	margin-top: 20px;
}

#mainContent h2 {
	margin-top: 50px;
}

#mainContent h3 {
	margin-top: 40px;
}

#mainContent p {
	margin-bottom: 0px;
}

#mainContent {
	padding: 0 25px;


/* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	background: #FFFFFF url(media/main.gif);
}

/* @end */

/* @group Footer */

#footer {
	padding: 0 25px;


/* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
	background: #FFFFFF url(media/footer.jpg) no-repeat;
	height: 50px;
}

#footer p {
	margin: 0;


/* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
	padding: 15px 0 0;
	text-align: right;
	font-size: 0.6em;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

/* @end */

/* @group Box */
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/


#box
	{
	position: relative;
	margin-left: auto;
/*	width:80%;				/* <-- use this to tie width to viewport size */
	width: 400px;				/* <-- use this for a set width */
	background-color: #eeeeee;
	margin-top: 20px;
	float: right;
}
#content
	{
	padding: 20px 18px 13px 15px;
}

#content h2
	{
	color: #c2832c;
	font-weight: bold;
	font-size: 1.2em;
	}
		
#content p
	{
	margin-top: 0;
}


#tlc, #trc, #blc, #brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#tlc
	{
	background-image:url(images/tlc.gif);
	background-position: 0% 0%;
	}

#trc
	{
	background-image:url(images/trc.gif);
	background-position: 100% 0%;
	}
	
#blc
	{
	background-image:url(images/blc.gif);
	background-position: 0% 100%;
	}

#brc
	{
	background-image:url(images/brc.gif);
	background-position: 100% 100%;
	}

#tb, #bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#tb
	{
	background-image:url(images/tb.gif);
	background-position: 0% 0%;
	}

#bb
	{
	background-image:url(images/bb.gif);
	background-position: 50% 100%;
	}
	
#rb
	{
	background-image:url(images/r.gif);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

#lb
	{
	background-image:url(images/l.gif);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}
		
/* @end */