/* 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:#CCFFCC;

}
/*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:#99CC66;
}
/*----------------------------------------------------------------*/

/* Anfang Komplettbereich */
#wrapper {
	margin: 1%;
	background-color:#CCFFCC;
	width: 98%;
}

/* Ende Komplettbereich */

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

/* Anfang Kopfbereich */


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

}

#kopf .modul_2{
	color: #FFFF00;
}

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

}


/* Ende Kopfbereich */

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

/* Navigation Kopfbereich */
#navkopf {
	height: 10%;
	background-color: #009999;
	margin-bottom: 0;
	text-align: right;
	padding: 5px 13px 4px 0;
	border-bottom: 1px solid #8c8c8c;
	width: 95%;	
	
}

#navkopf a{
	color: #000000;
	background-color: #CCFF33;
	text-decoration: none;
	padding: 4px;
	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: #99FF99;
	float: left;
	width: 15%;
	font-size: 80%;
}

#nav .col_1{
	margin-top: 3%;
}
.navTitle{
	background-color:#99FF66;
	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/Wappen_Icon.gif);
}
#nav #drk{
	list-style-image: url(../images/drk.jpg);
}
#nav #feuerwehr{
	list-style-image: url(../images/feuerwehrwappen_m.gif);
}
#nav #osterfeuergruppe{
	list-style-image: url(../images/ofg.jpg);
}

#nav #ortschaft{
	list-style-image: url(../images/ortsschild.gif);
}
#nav #natur {
	list-style-image: url(../images/natur.jpg);
}
#nav #kirche {
	list-style-image: url(../images/wehrkirche.jpg);
}
#nav #kunst{
	list-style-image: url(../images/kunst_kultur.jpg);
}
#nav #mtb {
	list-style-image: url(../images/mtb_m.gif);
}
#nav #svo {
	list-style-image: url(../images/svo_m.gif);
}
#nav #heimatverein {
	list-style-image: url(../images/heimatverein.gif);
}


#nav #schuetzenverein {
	list-style-image: url(../images/w_schuetzen.jpg );
}
#nav #gesangverein {
	list-style-image: url(../images/lyra.jpg );
}
#nav #traegerverein {
	list-style-image: url(../images/traegerverein.gif);
}

#nav #impressionen{
	padding-top: 10%;
	border-top:#3300CC 1px solid;
	list-style-image: url(../images/impress_icon.gif);
}



#nav #historie {
	padding-top: 10%;
	border-top:#3300CC 1px solid;
	list-style-image: url(../images/historie.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: #99CC66;
	float: left;
	margin-left: 1%;
}

/*--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:#99FF99;
}
/*..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:#99FF66;
}

#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;
}

/* text_2 speziell für Feuerwehr*/
#mainArea .content .text_2 {
	padding: 5px 10px 25px 10px;
}

#mainArea .content .text_2 ul li{
	padding: 5px;
	list-style-type: square;
	margin-left: 40%;
}

#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;
}
/*--email webbetreuung--*/
.email {
	width: 20%;
}

/*--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%;
}

/*--Tabelle -*/
.myVerkehr {
	margin: 1%;
}
.myVerkehr td, .myVerkehr th{
	border:1px solid #990000;
	width:10%;
}

/* Bilder die rechts und links gefloatet sind und mit Überschrift und Text versehen sind myBild1- brauch.php*/
#myBild1 {
	float: left;
	width: 98%;
	padding: 1% 0;
}
#myBild1 dl{
	width: 94%;
	float: left;
	margin: 2% 3%;
	padding: 0;
	display: inline;
}

#myBild1 dl dd.mycomplexImg1{
	margin: 0;
}
#myBild1 dt{
	float:right;
	width: 52%;
	margin-left: 0;
	padding: 0;
	font-size: 120%;
	letter-spacing: 1px;
	color: #993366;
}
#myBild1 dd{
	margin: 0 0 0 48%;
	padding: 0;
	font-size: 85%;
	line-height: 1.5em;
	color: #666;
}

#myBild1 dd.mycomplexImg1 img{
	width: 41%;
	float: left;
	margin: 0 1% 0 0;
	padding: 0.6%;
	border: 1px solid #D9E0E6;
	border-bottom-color: #C8CDD2;
	border-right-color:  #C8CDD2;
	background: #fff;
}

/* umgekehrter float*/
#myBild1 .myAltBild1 dt{
	float: left;
}

#myBild1 .myAltBild1 dd.mycomplexImg1 img{
	float: right;
}

#myBild1 .myAltBild1 dd{
	margin: 0 48% 0 0;

}


/* --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: #99FF99;
	margin-left: 1%;
	width: 22%;
	float: left;
}
#sidebar .content{
	margin: 0 5%;
}
#sidebar .col_1{
	margin-top: 2%;
}
#sidebar .titleNormal, .titleWichtig, .titleWerbung {
	background-color:#99FF66;
	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 */


img.email2 {
	width: 40%;
}