/* CSS Document für offensen.de 20.01.2007 */

body {
	margin: 0;
	padding: 0;
	font-family:"Times New Roman", Times, serif;
	font-size: small;
	voice-family: "\"}\"";
	voice-family: inherit;
	background-color:#C96;
	background-image: url(../images/struktur_1.gif);
}
/*sei nett zu Opera*/
html>body {
	font-size: small;
}
/*----------------------------------------------------------------*/
/* Sonstiges wie Abstandszeile Separator funktioniert nur mit height x*/
.separator {
	clear:both;
	height: 10px;
}

.separatorInt {
	clear:both;
	height: 10px;
	background-color:#CC6;
}
/*----------------------------------------------------------------*/

/* Anfang Komplettbereich */
#wrapper {
	margin: 1%;
	width: 98%;
}

/* Ende Komplettbereich */

/*----------------------------------------------------------------*/

/* Anfang Kopfbereich */
#kopf, #navkopf {
	width: 96%;
}

#kopf {
	background-color: #C96;
	height: 5%;
	color:#CCFF99;
	font-size: 150%;
	text-align: center;
	margin: 0;
}
#kopf .modul_1{
	padding: 0 20% 0 2%;
	text-align: left;
	font-size: 60%;
}

#kopf .modul_2{
	color: #906;
}

#kopf .modul_3{
	padding: 0 2% 0 20%;
	text-align: right;
	font-size: 60%;

}
/* Ende Kopfbereich */

/*----------------------------------------------------------------*/

/* Navigation Kopfbereich */
#navkopf {
	background-color: #FF9;
	text-align: right;
	padding: 1% 0 1% 0;
	border-bottom: 1px solid #8c8c8c;
}

#navkopf a{
	color: #000000;
	background-color: #CCFF33;
	text-decoration: none;
	padding: 4px;
	margin-right: 10px;	
	border: 1px solid #8c8c8c;
}
#navkopf a:hover{
	color: #000000;
	background-color: #FFFFFF;
	padding-bottom: 5px;
	border-bottom: none;

}
#navkopf ul {
	margin: 0 ;
}

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

#startseite #navi01 a{
	background-color:#FFFFFF;
}

#impressum #navi02 a{
	background-color:#FFFFFF
}
/* Ende Navigation Kopfbereich */

/*----------------------------------------------------------------*/

/*Anfang linker Navigation Hindergrundbilder in 30x30 px*/
#nav {
	list-style: none;
	background-color: #CC6;
	float: left;
	width: 15%;
	font-size: 80%;
}

#nav .col_1{
	margin-top: 3%;
}
.navTitle{
	background-color:#FF3;
	margin-bottom: 2%;
	padding: 1% 0 2% 10%;
	font-size: 110%;
	border-top: 1px #669966 solid;
	border-bottom: 1px #669966 solid;
	text-align: center;
}


#nav #startseite{
	list-style-image: url(../images/logo_30.jpg);
}
#nav #strassenplan{
	list-style-image: url(../images/strassenplan.jpg);
}
#nav #eimer{
	list-style-image: url(../images/eimer.jpg);
}
#nav #farbschale{
	list-style-image: url(../images/farbschale.jpg);
}

#nav a{
	text-decoration: none;
	vertical-align: super;
	font-size: 120%;
	padding-left: 5%;
}
#nav li {
	margin-bottom: 5%;
}

#nav a:hover{
	background-color: #FFCC33;
}

#nav ul{
	margin-top: 1%;
}

/* Ende linker Navigation*/

/*----------------------------------------------------------------*/

/* Anfang Inhalt */
#mainArea {
	width: 57%;
	background-color: #CC6;
	float: left;
	margin-left: 1%;
	background-image: url(../images/struktur_1.gif);
}

/*--Inhaltstbereich einzeln---*/
#mainArea #spaltig_1, #spaltig_2, #spaltig_3 {
	clear:both;
	padding-top: 1%;
}
#mainArea #left_1, #left_2, #left_3, #middle_2, #middle_3, #right_3,  #centerL_3, #centerR_3{
	background-color:#CC6;
}
/*..Inhaltbereich----*/
/* --Einteiliger Bereich--*/

#left_1 {
	width: 100%;
	float: left;
}

/* --Einteiliger Bereich mit zweiteiliger Aufteilung Bild + Beschreibung--*/
#left_1 .content_1{
	width: 50%;
	float: right;
	margin-top: -65%;
}


/* --Zweiteiliger Bereich--*/

#left_2 {
	width: 49%;
	clear: left;
	float: left;
}

#middle_2 {
	width: 49%;
	float: right;
}
/* --Dreiteiliger Bereich--*/

#left_3 {
	width: 32%;
	float: left;

}
#middle_3 {
	width: 32%;
	margin-left: 2%;
	float: left;
}
#right_3 {
	width: 32%;
	float: right;
}

#centerR_3 {
	width: 65%;
	float: right;
}
#centerL_3 {
	width: 65%;
	float: left;
}
#mainArea .col_1{
	font-size: medium;
}

#mainArea  .titleWichtig, #mainArea .titleNormal{
	text-align:	center;
	font-size: 100%;
	font-weight: bold;
	background-color:#CC9;
}

#mainArea .titleNormal{
	color: #000000;
	border-top: 1px #669966 solid;
	border-bottom: 1px #669966 solid;
}
#mainArea .titleWichtig{
	padding: 0;
	color: #FF0000;
	border-bottom: 1px #FF0000 solid;
	border-top: 1px #FF0000 solid;
}

#mainArea .ueberschrift, #mainArea .ueberschrift1 {
	margin-top: 5px;
	font-size: 95%;
	font-weight: bold;
	color: #000000;
}

#mainArea .text {
	font-size: 90%;
	color: #000000;
	padding: 2%;
}
#mainArea span.wichtig {

color:#FF0000;
font-style:italic;
padding-left: 10px;

}
#mainArea span.fett {

color:#000000;
font-weight:bold;
}

#mainArea .content .text ul{
	margin-top: 0px ;
}
#mainArea a{
	text-decoration: none;
}
#mainArea .content .text ul li, #mainArea .content .text_1 ul li{
	padding: 5px 0 5px 10px;
	list-style-type: square;
}
#mainArea .content .ueberschrift {
	padding: 2px 0 2px 5px;
}

#mainArea .content .ueberschrift1 {
	padding: 0 0 0 50%;
}

#mainArea .content .text1, {
	padding: 5px 0 5px 50%;
}
#mainArea .text .link a{
	font-size: 100%;
	color: #000099;
	text-decoration: none;
	font-weight: bold;
}

/* Ausrichtung der Bildsteuer-Button in der metzschen Fotoshow z.b. Feuerwehr*/
#mainArea #left_3 .content .text .button{
	background-color:#99CC99;
	padding: 2%;
}
#mainArea #left_3 .content .text .button span{
	margin-left:10%;
}
#mainArea #left_3 .content .text .button span img{
	background-color:#99FF66;
	border:none;
	width: 17%;
}

a:active#myBildMarker img{

border:#FFFF00 3px solid;
background-color:#FFFF00;

}
.copmlImg {
	padding: 0 2% 2% 0;
}


/*--Hiermit werden die Bilder auf 78 % skaliert ca. 300 x 225 und schieben sich beim Verkleinern des Fensters zusammen--*/
.copmlImg .img1 {
width: 78%;
}


/*--Hiermit werden die Bilder auf 60 % skaliert ca. 150 x 113 in der dreier Ansicht --*/
.copmlImg .img2  {
width: 40%;
}

/*--Hiermit werden die Bilder auf 60 % skaliert ca. 150 x 113 in der dreier Ansicht --*/
.copmlImg .img3  {
width: 60%;
}

/*--Hiermit werden die Bilder auf 90 % skaliert einer Gesamtansicht wie zb. Zeitungsartikel - Natur--*/

.copmlImg .img4  {
width: 100%;
}

/*--Hiermit werden die Bilder auf 512 x 384 px skaliert zb. Feuerwehr - index.php Gruppenfoto--*/

.copmlImg .img6  {
width: 65%;
}

/*--Hiermit werden die Bilder auf 300 x 225 px in der Fotoshow - Galerie skaliert zb. Feuerwehr - Natur--*/

.copmlImg .img5  {
width: 100%;
padding-left: 1%;
margin-top: 2%;
}
/* -----Ende des Verkleiners------------------ */

/*--ordnet das Bild links an, der Text ist rechts - mit Skalierung- spaltig 1- neu ab 14.01.2008*/
.copmlImg1 {
	float:left;
	width: 38%; /*Hack für den Explorer*/
}
.copmlImg1 .img1 {
	width: 97%;
}

/*dient für einen Absatz unter einem Bild - siehe Ortsrat*/
.content .text_1{
	margin: 1%;
	clear:left;
}

/*--ordnet das Bild rechts an, der Text ist links -  ohne Skalierung sonst wie oben-*/
.copmlImg2 {
	float:right;
	padding: 0 0 2% 2%;
}




/* --Thumbnails im Inhaltsbereich werden  im Querformart mit width="150" height="113 erzeugt--*/
 table#galerie{
	margin-left: 3%;
	border-spacing: 3px 5px;
	table-layout:fixed;
	width: 95%;
	border-collapse:collapse; 
}

 table#galerie tr{
	background-color:#99FF00;
	vertical-align: text-top;
}
#galerie tr td{
	text-align:left;
	color: #000066;
	font-size: 0.8em;
	border: dotted 1px #990099;
}

#galerie tr td.gal_empty{
	background-color:#99FF99;
}

#galerie tr td img{
	width: 93%;
}
/* ----*/

/* Ende Inhalt */

/*----------------------------------------------------------------*/

/* Anfang sidebar */
#sidebar {
	background-color: #CC6;
	margin-left: 1%;
	width: 22%;
	float: left;
}
#sidebar .content{
	margin: 0 5%;
}
#sidebar .col_1{
	margin-top: 2%;
}
#sidebar .titleNormal, .titleWichtig, .titleWerbung {
	background-color:#CCC;
	font-size: 100%;
	border-top: 1px #669966 solid;
	border-bottom: 1px #669966 solid;
	font-weight: bold;
	text-align: center;
	padding: 1%;
}

#sidebar .titleNormal{
	color: #666666;
	border-top: 1px #669966 solid;
	border-bottom: 1px #669966 solid;
}
#sidebar .titleWichtig{
	border-bottom: 1px #FF0000 solid;
	border-top: 1px #FF0000 solid;
	color: #FF0000;
}
#sidebar .titleWerbung{
	border-bottom: 1px #CC0066 solid;
	border-top: 1px #CC0066 solid;
	color: #CC0066;
}

#sidebar .ueberschrift {
	margin-top: 5px;
	font-size: 110%;
	font-weight: bold;
	color: #000000;
}

#sidebar .text {
	font-size: 90%;
	color: #000000;
	padding: 10px 0 ;
	width: 100%; //für den IE6 

}

#sidebar .text .link a{
	font-size: 100%;
	color: #000099;
	text-decoration: none;
	font-weight: bold;
}
#sidebar .text ul{
	margin-top: -8px;

}
#sidebar .text li{
	font-size: 100%;
	color: #000099;
	text-decoration: none;
	font-weight: bold;
	padding: 1% 0 3% 0;
}
#sidebar .text ul {
		list-style-image: none;
}
#sidebar .text ul .liInt{
	list-style-image:url(../images/intern_link.gif); list-style-type:square;
}

#sidebar .text ul .liExt{
	list-style-image: url(../images/ext_link.gif); list-style-type:square;
}

/* Ende sidebar */