/* ========================================================== */
/* Stylesheet für Webauftritt der Brockensammlung Lübeck e.V. */
/* ========================================================== */
/* ComputerSchule Lübeck                T.Fichtner, F.Eismann */
/* Stand: 01.08.2011                           Revision: 1.00 */
/* ========================================================== */
/* Diese Datei enhält die generellen Definitionen für alle    */
/* Seiten dieses Projektes.                                   */
/* ========================================================== */

/* Verwendete Farben:      */
/* Orange: ________ f57921 */
/* Helles Orange: _ f9c299 */
/* Dunkles Blau: __ 121244 */
/* Helles Blau: ___ 3434c6 */

/* ============ GENERELLES ============================= */

*	{
	margin: 0;
	padding: 0;
	}



body	{
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #000000;
	background: #c6c6c6;
	}

p	{
	line-height: 14px;
	}

h1	{
	font-size: 180%;
	}

h2	{
	font-size: 150%;
	}

h3	{
	font-size: 120%;
	}
	
a,
a:visited	{
	color: #f57921;
	text-decoration: none;
	}
	
a:focus,
a:hover	{
	color: #121244;
	}
	
a:active	{
	color: #f57921;
	}
	
a img,
a img:visited	{
	border-top: 2px solid #f9c299;
	border-right: 2px solid #f57921;
	border-bottom: 2px solid #f57921;
	border-left: 2px solid #f9c299;
	}

a img:focus,
a img:hover	{
	border-top: 2px solid #3434c6;
	border-right: 2px solid #121244;
	border-bottom: 2px solid #121244;
	border-left: 2px solid #3434c6;
	}

a img:active	{
	border: 2px solid #f57921;
	}
	
.hidden	{
	display: none;
	}

.gross	{
	font-size: 120%;
	}

.fett	{
	font-weight: bold;
	}

.orange	{
	color: #f57921;
	}	
	
/* ============ WRAPPER ================================ */

#wrapper	{
	width: 920px;
	height: 560px;
	margin: 100px auto;
	background: #ffffff;
	}

/* ============ KOPF =================================== */

#kopf	{
	width: 920px;
	height: 140px;
	background: transparent url(../bilder/design/bg-kopf.png) no-repeat;
	}

/* ============ NAVIGATION ============================= */

#navi	{
	float: left;
	width: 270px;
	height: 359px;
	background: transparent url(../bilder/design/bg-menue.png) no-repeat 0 20px;
	margin-top: -20px;
	}
	
#navi ul	{
	margin-top: 44px;
	margin-left: 17px;
	list-style: none;
	}

	
#navi ul li a	{
	display: block;
	height: 20px;
	width: 166px;
	margin-top: 6px;
	}

/* Startseite */	
.link01 a, .link01 a:visited	{ background: transparent url(../bilder/schalter/start.png) no-repeat 0 0; }
.link01 a:focus, .link01 a:hover	{ background-position: 0 -22px; }
.link01 a:active, .link01 a.aktiv	{ background-position: 0 -44px; }

/* Vereinsgeschichte */	
.link02 a, .link02 a:visited	{ background: transparent url(../bilder/schalter/geschichte.png) no-repeat 0 0; }
.link02 a:focus, .link02 a:hover	{ background-position: 0 -22px; }
.link02 a:active, .link02 a.aktiv	{ background-position: 0 -44px; }

/* Aktuelles */	
.link03 a, .link03 a:visited	{ background: transparent url(../bilder/schalter/aktuelles.png) no-repeat 0 0; }
.link03 a:focus, .link03 a:hover	{ background-position: 0 -22px; }
.link03 a:active, .link03 a.aktiv	{ background-position: 0 -44px; }

/* Kontaktseite */	
.link04 a, .link04 a:visited	{ background: transparent url(../bilder/schalter/kontakt.png) no-repeat 0 0; }
.link04 a:focus, .link04 a:hover	{ background-position: 0 -22px; }
.link04 a:active, .link04 a.aktiv	{ background-position: 0 -44px; }

/* Uber-uns-seite !!! FREI !!! */	
.link05 a, .link05 a:visited	{ background: transparent url(../bilder/schalter/ueber.png) no-repeat 0 0; }
.link05 a:focus, .link05 a:hover	{ background-position: 0 -22px; }
.link05 a:active, .link05 a.aktiv	{ background-position: 0 -44px; }

/* Angebote */	
.link06 a, .link06 a:visited	{ background: transparent url(../bilder/schalter/angebote.png) no-repeat 0 0; }
.link06 a:focus, .link06 a:hover	{ background-position: 0 -22px; }
.link06 a:active, .link06 a.aktiv	{ background-position: 0 -44px; }

/* Impressum */	
.link07 a, .link07 a:visited	{ background: transparent url(../bilder/schalter/impressum.png) no-repeat 0 0; }
.link07 a:focus, .link07 a:hover	{ background-position: 0 -22px; }
.link07 a:active, .link07 a.aktiv	{ background-position: 0 -44px; }

/* Öffnung / Anfahrt */	
.link08 a, .link08 a:visited	{ background: transparent url(../bilder/schalter/oeffnung3.png) no-repeat 0 0; }
.link08 a:focus, .link08 a:hover	{ background-position: 0 -22px; }
.link08 a:active, .link08 a.aktiv	{ background-position: 0 -44px; }

/* Linkseite */	
.link09 a, .link09 a:visited	{ background: transparent url(../bilder/schalter/links.png) no-repeat 0 0; }
.link09 a:focus, .link09 a:hover	{ background-position: 0 -22px; }
.link09 a:active, .link09 a.aktiv	{ background-position: 0 -44px; }

/* Galerieseite */	
.link10 a, .link10 a:visited	{ background: transparent url(../bilder/schalter/galerie.png) no-repeat 0 0; }
.link10 a:focus, .link10 a:hover	{ background-position: 0 -22px; }
.link10 a:active, .link10 a.aktiv	{ background-position: 0 -44px; }

/* Wir helfen */	
.link11 a, .link11 a:visited	{ background: transparent url(../bilder/schalter/helfen.png) no-repeat 0 0; }
.link11 a:focus, .link11 a:hover	{ background-position: 0 -22px; }
.link11 a:active, .link11 a.aktiv	{ background-position: 0 -44px; }

/* Hilfe im Advent */	
.link12 a, .link12 a:visited	{ background: transparent url(../bilder/schalter/hilfe_im_advent.png) no-repeat 0 0; }
.link12 a:focus, .link12 a:hover	{ background-position: 0 -22px; }
.link12 a:active, .link12 a.aktiv	{ background-position: 0 -44px; }

/* Ihre Hilfe */	
.link13 a, .link13 a:visited	{ background: transparent url(../bilder/schalter/ihre_hilfe.png) no-repeat 0 0; }
.link13 a:focus, .link13 a:hover	{ background-position: 0 -22px; }
.link13 a:active, .link13 a.aktiv	{ background-position: 0 -44px; }

#navi ul li a {
	color: #fff;
	font-size: 14px;
	font-weight: bold;
    -webkit-text-shadow: 0px 1px 5px #000, 1px 2px 3px #000;
	-o-text-shadow: 0px 1px 5px #000, 1px 2px 3px #000;
	-ms-text-shadow: 0px 1px 5px #000, 1px 2px 3px #000;
	-moz-text-shadow: 0px 1px 5px #000, 1px 2px 3px #000;
	text-shadow: 0px 1px 5px #000, 1px 2px 3px #000;
}

#navi ul li:before {
	content: "";
    position: absolute;
    border: 1px solid #fff;
    border-radius: 100%;
    background: #fff;
    height: 1px;
    width: 1px;
    margin-top: 7px;
    margin-left: -6px;
}

#navi ul li a:visited {
	color: #fff;
}

#navi ul li a:hover,
#navi ul li a:focus {
	color: #fd7824;
}

#navi ul li a:active,
#navi ul li a.aktiv {
	color: #b6aeae;
}

/* ============ INHALT KOPFBEREICH ===================== */

#inhalt_kopf {
	float: right;
	width: 650px;
	height: 30px;
	background: transparent url(../bilder/design/bg-inhalt-kopf.png) no-repeat;
	}

#inhalt_kopf h2.ueberschrift	{
	font-weight: normal;
	margin-left: 26px;
	}
	
/* ============ INHALT ================================= */

/* Sozusagen der Wrapper des Inhaltsbereiches */

#inhalt	{
	float: right;
	width: 650px;
	height: 340px;
	background: transparent url(../bilder/design/bg-inhalt.png) repeat-y;
	}
#inhalt_li	{
	float: right;
	width: 650px;
	height: 340px;
	background: transparent url(../bilder/design/bg-inhalt_li.png) repeat-y;
	}

/* Zweispaltiges Layout für fast alle Unterseiten */

#text_links	{
	float:left;
	width: 250px;
	height: 300px;
	margin-top: 4px;
	margin-left: 28px;
	}

#text_rechts {
	float: left;
	width: 310px;
	height: 300px;
	margin-top: 4px;
	margin-left: 30px;
	}

#text_links p,
#text_rechts p	{
	margin: 5px 0 10px 0;
	}

#text_links p.oben,
#text_rechts p.oben	{
	margin: 10px 0 10px 0;
	}

#text_links h3,
#text_rechts h3	{
	margin: 5px 0 10px 0;
	}

#text_links p img,
#text_rechts p img	{
	margin: 0 0 0 20px;
	}

.kommentar	{
	margin: 0 0 0 20px;
	}

/* === Linke Spalte === */

	/* Anfang Frank Eismann: aktuelles.html */
	/* angepasst von Torsten Fichtner  */
					
		#text_links  ul 	{
			list-style: none;
			}

		#text_links ul li	{
			margin: 10px 0 0 0;
			}
			
	/* Ende Frank  Eismann: aktuelles */

/* Linke Spalte Ende*/

/* === Rechte Spalte === */

#text_rechts table td	{
	padding: 5px 10px 5px 0;
	}

#text_rechts p a img	{
	margin: 0;
	}	

#text_rechts p.unten	{
	margin: 189px 0 10px 0;
	}

/* Rechte Spalte Ende*/

/* Einspaltiges Layout für die Seiten: kontakt.html und impress.html */

#text	{
	float: left;
	width: 595px;
	height: 340px;
	margin: 4px 0 0 28px;
	text-align: left
	}

#text p	{
	margin: 5px 0 10px 0;
	}

#text p.oben	{
	margin: 10px 0 10px 0;
	}
	
#text h3.klein	{
	margin: 5px 0 -5px 0;
	font-size: 100%;
	}

#text table	{
	padding: 5px 0 0 0;
	}

#text table td	{
	padding: 0 12px 10px 0;
	}

#text p a img	{
	margin: 0;
	}	

#text  ul 	{
	list-style: none;
	}

#text ul li	{
	margin-top: 10px;
	}
			
a img.noborder 	{
	border: none;
	margin: 40px 30px 0 0;
	}

#moebel	{
	width: 290px;
	height: 150px;
	}

#kleider	{
	margin-top: 14px;
	width: 290px;
	height: 150px;
	}

#hausrat	{
	margin-left: 25px;
	width: 290px;
	height: 150px;
	}

#buecher	{
	margin-left: 25px;
	margin-top: 14px;
	width: 290px;
	height: 150px;
	}
	
h3.balken	{
	padding: 6px 0 9px 20px;
	background: transparent url(../bilder/design/bg_h3_blau.png) no-repeat 0 center;
	color: #f57921;
	}

div.bild_rechtsoben	{
	float: right;
	width: 142px;
	height: 113px;
	margin-top: -56px;
	margin-right: 19px;
	}
	
/* Einspaltiges Layout mit zwei Bildern für die Seiten: Flüchtlingshilfe.html */

#fluechtlingshilfe .logo {
	float: right;
	width: 140px;
	padding: 15px;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: -7px;
	}
	
#fluechtlingshilfe #text > div {
	float: left;
	padding-top: 15px;
}
	
#fluechtlingshilfe .foto {
	float: left;
}	

#fluechtlingshilfe .foto img {
    width: 130px;
 	margin-left: 0;
	margin-right: 20px;
}

#fluechtlingshilfe .foto figcaption {
	width: 122px;
	padding: 2px 4px 2px 4px;
	background-color: #636363;
	color: #cccccc;
	font-style: italic;
	border-radius: 0 0 3px 3px;
}
	
/* ============ FUSS =================================== */

#fuss	{
	clear: both;
	width: 920px;
	height: 83px;
	background: transparent url(../bilder/design/bg-fuss.png) no-repeat;
	}

/* ============ BILDBOX ================================ */

#bildbox	{
	position: relative;
	top: 10px;
	left: 0px;
	width: 250px;
	height: 224px;
	background: transparent url(../bilder/design/graue_box.png) no-repeat;
	}
#bildbox p.graue_box	{
	padding: 2px 0 0 20px;
	}
#bild_left	{
	position: relative;
	top: -475px;
	left: 615px;
	width: 225px;
	height: 395px;
	background: transparent url(../bilder/design/bild_bg.png) no-repeat;
	}
.bild4	{
	position: relative;
	top: 10px;
	left: 8px;
	width: 118px;
	height: 81px;
	background: transparent url(../bilder/design/bild_bg.png) no-repeat;
	}
.bild5	{
	position: relative;
	top: -75px;
	left: 140px;
	width: 118px;
	height: 81px;
	background: transparent url(../bilder/design/bild_bg.png) no-repeat;
	}

#bild_left .bild1	{
	margin:10px 0 0 8px;
	border:1px solid black;
}
#bild_left .bild2	{
	margin:4px 0 0 8px;
	border:1px solid black;
}
#bild_left .bild3	{
	margin:4px 0 0 8px;
	border:1px solid black;
}
#bild_right	{
	position: relative;
	top: -218px;
	left: 623px;
	width: 225px;
	height: 395px;
	background: transparent url(../bilder/design/bild_bg.png) no-repeat;
	}
.beschreibung p{
padding-top: 140px;
}