@charset "utf-8";


/*----------------------------------------------------------------------*/
/*                                                                      */
/*                        Stylesheet zu amt 30                          */
/*                             *  *  *  *                               */
/*                       Design: www.per.net.ch                         */
/*                                                                      */
/*                              WICHTIG:                                */
/*    DIE CSS-DEFINITIONEN SIND NACH CSS2 VALIDIERT UND AUF FOLGENDEN   */
/*    BROWSERN GEPRÜFT:                                                 */
/*    Macintosh (Safari, Firefox)                                       */
/*    Windows   (Ab IE5)                                                */
/*----------------------------------------------------------------------*/




/* Used Colors:                                                         */
/*       Grau Schrift:              #606060    (128 128 128)            */
/*       Rot:                       #9a0505    (154 005 005)            */










/* Standard-Elemente - Grundeinstellungen                               */
/*======================================================================*/

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	font-size: 62.5%;
	font-family: "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
	background: url(../images/bg_body.jpg);
	color: #606060;
}

a:link {
	text-decoration: none;
	font-weight: bold;
	color: #9a0505;
}
	
a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #9a0505;
}
	
a:hover, a:active {
	text-decoration: none;
	color: #000;
}
	
li {
	list-style-type: none;
}










/* Layout: ID-Elemente                                                  */
/*======================================================================*/

#container {
	margin: 0 auto;
	width: 830px;
}

#header {
	background: url(../images/bg_header.jpg) no-repeat transparent;
	width: 100%;
	height: 262px;
}

#content {
	min-height: 525px;
	background: url(../images/bg_content.jpg) repeat-y;
}	
	* html #content { height: 400px; }						/* min-height für ie */

#navi {
	width: 230px;
	float: left;
	padding-left: 6px;
}
	* html #navi { margin-right: -3px; }					/* 3px Bug eliminieren */

#inhalt {
	width: 507px;
	min-height: 360px;
	margin-left: 237px;
	padding: 40px;
	background: url(../images/bg_inhalt.jpg) no-repeat;
}
	* html #inhalt { height: 400px;	margin-left: 234px;	}	/* min-height für ie, 3px Bug eliminieren */

#footer {
	height: 6px;
	margin-bottom: 12px;
	background: url(../images/bg_footer.jpg) no-repeat transparent;
}







/* Layout: Klassen allgemein                                            */
/*======================================================================*/

.none {
	display: none;
}

.clr {
	clear: right;
}

.cll {
	clear: left;
}

.clb {
	clear: both;
}

.portraet {
	float: right;
	margin-right: 120px;
}

.logo {
	float: right;
	margin-right: 20px;
}

.rot {
	color: #9a0505;
}





/* Spezielle Tag-Definitionen (Klassen/ID-bezogen)                                                      */
/*======================================================================*/

/* ++++++++++++++++++ Paragrafen ++++++++++++++++++ */

p {
	line-height: 160%;
	font-size: 1.2em;
	margin: 0 20px 18px 20px;
}

#navi p {
	line-height: 130%;
	font-size: 1em;
	color: #fff;
	text-align: right;
	margin-right: 16px;
}

/* ++++++++++++++++++ Headlines ++++++++++++++++++ */

h1 {
	line-height: 140%;
	font-size: 2.4em;
}

h2 {
	line-height: 140%;
	font-size: 1.8em;
	color: #9a0505;
	padding-bottom: 2px;
	margin: 0 20px 20px 20px;
	border-bottom: 1px dotted #9a0505;
}

h2.logo {
	padding-bottom: 30px;
	border: none;
}

h3 {
	line-height: 140%;
	font-size: 1.2em;
	color: #9a0505;
	margin-left: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
}



/* ++++++++++++++++++ Formular ++++++++++++++++++ */

form {
	width: 450px;
	background: #eee;
	margin: 0 20px;
	padding: 10px;
}

form p {
	margin: 0;
	padding: 0 0 4px 0;
}

label {
	width: 140px;
	float: left;
}

.formfeld {
	border: 1px solid #bbb;
	background: #f9f9f9;
	padding: 2px 4px;
	font-size: 1.1em;
	font-family: Verdana;
	color: #9a0505;
	width: 250px;
}

.normal {
	width: 250px;
}

.klein {
	width: 25px;
}

.gross {
	width: 250px;
	height: 200px;
}

.button {
	margin-left: 140px;
	background: #9a0505;
	border: 1px solid #fff;
	color: #fff;
}


/* ++++++++++++++++++ Navigation ++++++++++++++++++ */
#navi ul {
	width: 230px;
	margin-bottom: 30px;
}

#navi ul li {
	text-indent: -999em;
}

#navi ul li a { 
	display: block;
	width: 230px;
	text-decoration: none;
	position: relative;
	border: none;
}

a#navi-home { height: 25px; background: url(../images/navigation.gif) no-repeat 0 0; }
a#navi-300 { height: 75px; background: url(../images/navigation.gif) no-repeat 0 -25px; }
a#navi-301 { height: 75px; background: url(../images/navigation.gif) no-repeat 0 -100px; }
a#navi-302 { height: 75px; background: url(../images/navigation.gif) no-repeat 0 -175px; }
a#navi-303 { height: 75px; background: url(../images/navigation.gif) no-repeat 0 -250px; }
a#navi-304 { height: 95px; background: url(../images/navigation.gif) no-repeat 0 -325px; }

a#navi-home:hover { background-position: -230px 0px; }
a#navi-300:hover { background-position: -230px -25px; }
a#navi-301:hover { background-position: -230px -100px; }
a#navi-302:hover { background-position: -230px -175px; }
a#navi-303:hover { background-position: -230px -250px; }
a#navi-304:hover { background-position: -230px -325px; }

a#navi-home.active { background-position: -460px 0px; }
a#navi-300.active { background-position: -460px -25px; }
a#navi-301.active { background-position: -460px -100px; }
a#navi-302.active { background-position: -460px -175px; }
a#navi-303.active { background-position: -460px -250px; }
a#navi-304.active { background-position: -460px -325px; }