/* 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:#FFFFCC;
	
}
/*sei nett zu Opera*/
html>body {
	font-size: small;
}
/*----------------------------------------------------------------*/
/* Sonstiges wie Abstandszeile Separator funktioniert nur mit height x*/
.separator {
	clear:both;
	height: 10px;
}


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

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

/* Ende Komplettbereich */

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

/* Anfang Kopfbereich */
#kopf {
	background-color: #FFCC00;
	height: 5%;
	color:#000066;
	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: #000033;
}

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

}
/* Ende Kopfbereich */

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

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

#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: #FFCC66;
	float: left;
	width: 15%;
}

#nav .col_1{
	margin-top: 3%;
}
.navTitle{
	background-color:#FFCC99;
	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/koenig.gif);
}

#nav #offensen{
	list-style-image: url(../images/offensen.gif);
}
#nav #schlarpe{
	list-style-image: url(../images/schlarpe.gif);
}


#nav #uslar{
	list-style-image: url(../images/uslar.gif);
}
#nav #uslar1{
	list-style-image: url(../images/uslar1.gif);
}
#nav #fuerstenhagen{
	list-style-image: url(../images/fuerst.gif);
}
#nav #fuerstenhagen1{
	list-style-image: url(../images/fuerst1.gif);
}
#nav #sohlingen{
	list-style-image: url(../images/sohlingen.jpg);
}

#nav #weser{
	list-style-image: url(../images/weser.jpg);
}
#nav #delliehausen{
	list-style-image: url(../images/delliehausen.jpg);
}
#nav #verliehausen{
	list-style-image: url(../images/verliehausen.jpg);
}

#nav #volpriehausen{
	list-style-image: url(../images/volpriehausen.jpg);
}

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

#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: #FFCC66;
	float: left;
	margin-left: 1.5%;
}

/*--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:#FFCC66;
}
/*..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: -62%;
}

/* --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, .titleNormal{
	text-align:	center;
	font-size: 120%;
	font-weight: bold;
	background-color:#FFCC99;
}

/*----------------Überschrift 3spaltiges Design----------------------*/

#spaltig_3 .titleNormal {
	text-align:	center;
	font-size: 80%;
	font-weight: bold;
	background-color:#FFCC99;
}
/*----------------Überschrift 3spaltiges Design----------------------*/

#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: 100%;
	font-weight: bold;
	color: #000000;
}

#mainArea .text {
	font-size: 90%;
	color: #000000;
	padding: 2%;
}
#mainArea .content .text ul{
	margin-top: 0px ;
}
#mainArea a{
	text-decoration: none;
}
#mainArea .content .text ul li{
	padding: 5px 0 5px 10px;
	list-style-type: square;
	
}
#mainArea .content .text ul li .li1{
	margin-left: 15px;
	font-size: small;
	font-style:italic;
	color:#0033CC;
	list-style-type: decimal;
	display: block;	
}

#mainArea .content .ueberschrift {
	padding: 2px 0 2px 5px;
}

#mainArea .content .ueberschrift1 {
	padding: 0 0 0 50%;
}
#mainArea .content .ueberschrift2 {
	clear:both;
	font-weight: bold;	
	padding: 0 0 0 2%;
}

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



/* Anfang - Ausrichtung der Bildsteuerungsbuttons in der metzschen Fotoshow für Gruppenfoto (800px * 600px) mit dem Zusatz BIG in den Exifdaten. Muss in der FotoGalerieFmt.php mit spaltig_1 und left_1 formatiert werden */

/*#mainArea #left_1 .content .text .button{
	background-color:#99CC99;
	padding: 1%;
	width: 35%;
	margin-left: 34%;
}
*/


#mainArea #left_1 .content .text .button{
	background-color:#FFDFAA;
	padding: 1%;
	width: 35%;
	margin-left: 34%;
}

#mainArea #left_1 .content .text .button span{
	margin-left: 3%;
}


/* #mainArea #left_1 .content .text .button span img{
	background-color:#99FF66;
	border:none;
	width: 15%;
	margin-left: 8%;
	
}
*/
#mainArea #left_1 .content .text .button span img{
	background-color:#FF9;
	border:none;
	width: 15%;
	margin-left: 8%;	
}

/* Ende - Ausrichtung der Bildsteuerungsbuttons - BIG  in der metzschen Fotoshow*/


/* Ausrichtung der Bildsteuer-Button in der metzschen Fotoshow für normale Bilder mit 512px x 384px */
#mainArea #left_3 .content .text .button{
	background-color:#99CC99;
	padding: 2%;
}
#mainArea #left_3 .content .text .button span{
	margin-left: 8%;
}

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

/* -- Aufbau der Übersichtsseite für Thumbnails der metzschen Fotoshow --*/
 table#galerie{
	margin-left: 3%;
	border-spacing: 3px 5px;
	table-layout:fixed;
	width: 95%;
	border-collapse:collapse; 
}

/*
Rahmenfarber der Miniaturübersicht
 table#galerie tr{
	background-color:#99FF00;
	vertical-align: text-top;
}
*/

 table#galerie tr{
	background-color:#FFBF00;
	vertical-align: text-top;
}
#galerie tr td{
	text-align:left;
	color: #000066;
	font-size: 0.8em;
	border: dotted 1px #990099;
}
/* Separator zwischen den Vorschaubildern gleiche Farbe wie Hintergrund*/

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

#galerie tr td img{
	width: 93%;
}
/* --Ende Aufbau der Übersichtsseite für Thumbnails der metzschen Fotoshow--*/








/*--email webbetreuung--*/
.email {
	width: 35%;
}

.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%;
}
/* -----Ende des Verkleiners------------------ */

.mycomplexImg1 .img1  {
width: 40%;
}
/*--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------------------ */
.copmlImg2 {
	float:right;
	padding: 0 0 2% 2%;
}


.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: 130%;
	letter-spacing: 1px;
	color: #993366;
}

#myBild1 dd{
	margin: 0 0 0 48%;
	padding: 0;
	font-size: 85%;
	line-height: 1.5em;
	color: #666;
}

dd .pbold {
	font-size: 150%;	
}

/* Es gibt nur die Klasse myAltBild1 - der linke Textblock ist mit dd - margin left 48% verschobenftp: ftp37290-2563519ftp37290-2563519*/
#myBild1 dd.mycomplexImg1 img{
	float: left;
	margin: 0 2% 0 0;
	padding: 0.6%;
	border: 1px solid #D9E0E6;
	border-bottom-color: #C8CDD2;
	border-right-color:  #C8CDD2;
	background: #fff;
}


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

#myBild1 .myAltBild1 dd.mycomplexImg1 img{
	float: right;
}
#myBild1 .myAltBild1 dd{
	margin: 0 50% 0 0;
}
/* --Thumbnails im Inhaltsbereich werden mit im Quervormart mit width="150" height="113 erzeugt--*/
/* ----*/

/* Ende Inhalt */

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

/* Anfang sidebar */
#sidebar {
	background-color: #FFCC66;
	width: 25%;
	float: right;
}
#sidebar .content{
	margin: 0 5%;
}
#sidebar .col_1{
	margin-top: 2%;
}
#sidebar .titleNormal, .titleWichtig, .titleWerbung {
	background-color:#FFCC99;
	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 ;

}

#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 */

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

/* Anfang Fußzeile */
#footer {
	background-color: #0099CC;
	clear: both;
}

/* Ende Fußzeile */

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