/*das ist die css-datei für die formatierungen der seite

in css werden kommentare so wie hier in slash+asterisk-klammern geschrieben

neben der index- (start-)seite habe ich die abschnitte "hauskiez", "netz" und "kontakt" vorgesehen.


in "hauskiez" soll das haus, seine ziele, sein programm, evtl. seine bewohnerschaft und der kiez vorgestellt werden.
	
in "netz" soll platz sein für die verbindung/verlinkung zu anderen projekten
	
in "kontakt" waren kontaktdaten vorgesehen.  im augenblick weiß ich nicht, wie sinnvoll das ist.  aber ein impressum ist ja allemal notwendig.
	
spezielle formatierungen für "aktuelles" kann man sich überlegen.  aber da muss wirklich jemand regelmäßig die sachen einfügen.  (ich konnte das nicht.)
	
	
DIE FORMATIERUNGEN:


Die Befehlssyntax lässt sich in jedem html-buch nachlesen.  kleinschreibung wird sehr empfohlen für bessere kompatibilität.
===========================================================================================================
*/





/*BODY
======*/



body{/*definition von farb- und schriftbasis in "body":*/
	
		
	
	background-color:gold; /*or maroon?*/
	color:red; /*red?*/
	
	
	
 	font-family: "lucida typewriter", "verdana", "arial", "helvetica", "sans-serif";
	font-size: 11pt;
	
	line-height:18.5pt;
	
	/*padding:10px;*/
	}





/*PARAGRAPH
===========*/



p{	
	
	padding:10px;
	
	}


/*LINKS
=======*/



a{/*definition der link-farben*/
	color:green
	}
a:active
	{
	color:purple
	}
a:visited
	{
	color:light-blue;
	}


/*bildrand schwarz*/

.r 	{	
	border-width:thin;
	border-style:solid;
	border-color:black;
	
	}	


/*LOGO
======*/
/*
definition des logos mit fester position rechts unten
das logo ist bisher zusammen gesetzt aus der datei "hausilein.gif" und der schrift "wönnichstraße".  das sollte in zukunft verbessert werden, weil so eine zusammensetzung immer anfällig ist.
*/

.logo{
	position:fixed;
	bottom:0%;
	right: 0%;
	
	color:green;
	background-color:white;
	
	font-family:"lucida","arial","sans-serif"; 
	font-size:normal;
	
	border-width: thin;
	border-style: solid;
	border-color:#800080 /*purple*/;	
	}

/*
	BILDFORMATE
  ===========
	bisher nicht benutzt, können eventuell wieder gelöscht werden:

	festes bild unten, abgekürzt mit "buf", was keineswegs elegant, jedoch im deutschen leicht nachzuvollziehen ist.
*/

.buf	{
	position:fixed;
	bottom:0%;
	left:0%;
	width:
	100%;
	height:10%;
	
	background-image:url(../testbild.gif);	 
	}
	 
/*
	festes bild links, abgekürzt mit "blf", im augenblick ein sehr schmaler streifen
*/

.blf	{
	position:fixed;
	top:0%;
	left:0%;
	width:2%;
	height:100%
	}	
	
/*
	MENU
	====
	Das, was lange schmerzlich vermisst wurde.  ich will es hier an den rechten rand und nicht mehr nach oben setzen, weil nicht jeder browser die formatierung "oben" unterstützte
*/	

/*menueleiste*/
	
.menu {
	/*
	color:silver;
	background-color:maroon;
	*/
	
	position:fixed;
	top:0%;
	left:80%;
	width:20%;
	
	font-family: "lucida","verdana","arial narrow","sans-serif";
	/*
	border-width:thin;
	border-style:solid;
	border-color: silver;
	*/
	}
	
/*
	navigation der startseite mit erklärungen, deshalb etwas breiter angelegt: "menu1":
*/

.menu1{
	color:silver;
	background-color:maroon; /*or gold*/
	
	position: fixed;
	top: 0%;
	left: 75%;
	width: 25%;
	font-family: "lucida","verdana","arial narrow","sans-serif";
	 
	/*
	border-width:thin;
	border-style:solid;
	border-color:silver;
	*/
	}






/*
	SPALTEN
	=======



	hier teile ich die bildseite in verschiedenen fenster ein, die sich teilweise überlappen können (achtung!), d.h. bei um- und neuschreiben wollen sie konkurrenzen beachtet sein


	spaltenteilung, spalten li1..4 von links nach rechts, 20/30/30/20% breit
*/



.li1{/*spalte links*/
	position:fixed;
	top:0%;
	left: 0%;
	width:20%;
	height:100%;
	background-image:url(../bild/testbild.gif);
	}
	
.li1o{/*spalte links, ohne hintergrund-bild*/
	position:fixed;
	top:0%;
	left: 0%;
	width:20%;
	height:100%;
	
	}
	

.li12{
	position:absolute;
	top:0%;
	left:0%;
	width:20%;
	color:white;
	background-color:maroon;
	}

.li13{position:fixed;
	top:0%;
	left: 0%;
	width:80%;
	height:100%;
	background-image:url(../bild/testbild.gif);
	}


.li14{position:fixed;
	top:0%;
	left: 0%;
	width:80%;
	height:100%;
	background-image:url(../bild/testbild.gif);
	}
	
	
	
/*hauptspalten 2,3 in der mitte*/
/*-----------------------------*/

.li2{
	position:absolute;
	top:0%;
	left:20%;
	width:30%; 
	
	padding:5px;
	
	
	}

/*li2m 2spalte, halbhoch mittellage*/


.li2mis{/*mitte 2. spalte mittellage, etwas schmaler, für kontakt*/
	position:absolute;
	top:20%;
	left:20%;
	width:20%;
	height:50%;
	
	overflow:hidden;
	
	color:silver;
	background-color:maroon;
	}



.li23m{/*2.+3.spalte halbhoch, mittellage*/
	position:absolute;
	top:10%;
	left:25%;
	width:50%;
	height:65%;
	
	background-color:gold;
	color:red;
	
	}

.li23{
	position:absolute;
	top:0%;
	left:20%;
	width:60%;
	height:100%; 
	
	overflow:hidden;
	
	background-image:url(../bild/testbild.gif);
	}


.li231{/*mitte (2+3) oben, weiß, roter rand, doppelt breit*/
	position:absolute;
	top:0%;
	left:20%;
	width:60%;
	height:50%;
	/*overflow:hidden;*/
	text-align:center;
	text-size:large;
	
	}

.li231r{/*orangefarbener hintergrund, roter rahmen, mittellage, für mitwohnen*/
	position:absolute;
	top:20%;
	left:25%;
	width:50%; 
	height:50%;	
	
	text-align:center;
	text-size:big;
	color:black;
	background-color:orange;
	
	
	border-width:thin;
	border-style:solid;
	border-color:red;
	
	}
.li232{
	position:absolute;
	top:20%;
	left:25%;
	width:50%; 
	height:60%;	
	
	text-align:center;
	
	color:black;
	background-color:orange;
		
	/*
	border-width:thin;
	border-style:solid;
	border-color:red;
	*/
	}

.li2321{
	position:absolute;
	top:20%;
	left:22%;
	width:56%; 
	height:30%;	
	
	text-align:center;
	
	color:black;
	background-color:orange;
		
	/*
	border-width:thin;
	border-style:solid;
	border-color:red;
	*/
	}
	
	
.li233 {/*für bilder oben mitte*/
	position:absolute;
	top:2%;
	left:20%;
	height:16%;
	width:60%;
	
	text-align:center;
	}	

.li234{/*für bilder untere hälfte*/
	position:absolute;
	top:52%;
	left:22%;
	height:38%;
	width:56%;
	
	text-align:center;
	
	background-image:url(../bild/garii462x300.gif);
	}
	
.li23u {
	position:fixed;
	top:91%;
	left:35%;
	height:9%;
	width:40%;
	
	font-size:small;
	line-height:14pt;
	
	color:black;
	}








.li3{
	position:fixed;
	top:0%;
	left:50%; 
	width:30%; 
	height:100%;
	
	background-image:url(../bild/testbild.gif);
	}
	


.li3mib{/*mitte oben rechts, etwas breiter, für kontakt*/
	position:absolute;
	top:20%;
	left:40%;
	width:40%;
	height:50%;
	
	text-align:center;
	vertical-align=center;
	overflow:hidden;
	
	color:silver;
	background-color:maroon;
	}

	

.li3u{/*3.spalte untere hälfte*/
	position:absolute;
	top:40%;
	left:50%;
	height:60%;
	width:30%;
	
	overflow:hidden;
	
	background-color:maroon;
	color:silver;
	}








.li4	{/*evtl. menue- und logo-spalte rechts*/
	position:absolute;
	top:0%;
	left:80%;
	width:20%;
	height:100%;
	}

.li42	
	{/*evtl. menue- und logo-spalte rechts*/
	position:absolute;
	top:40%;
	left:80%;
	width:20%;
	height:50%;
	}



	
	
/*
	BILD_HINTERGRUND
	================
*/

/*mitte 2+3, oben + unten*/



.mior{/*mitte oben rechts (3) schmal, abschnitt "hauskiez" u.a.*/
	position:absolute;
	top:0%; 
	left:50%;
	width:30%;
	height:50%; 
	
	overflow:hidden;
	
	color:silver;
	background-color:maroon;
	}
	


.miorb{/*mitte oben rechts (3b), etwas breiter, abschnitt "kontakt"*/
	position:absolute;
	top:0%;
	left:40%;
	width:40%;
	height:50%;
	
	text-align:center;
	vertical-align=center;
	overflow:hidden;
	
	color:silver;
	background-color:maroon;
	}

.mio{/*mitte (2+3) oben, doppelt breit*/
	position:absolute;
	top:0%;
	left:20%;
	width:60%;
	height:50%;
	/*overflow:hidden;*/
	text-align:center;
	text-size:large;
	
	}


.miol{/*mitte oben links (2)schmal, abschnitt "hauskiez" u.a.*/
	position:absolute;
	top:0%;
	left:20%;
	width:30%;
	height:50%; 
	
	overflow:hidden;
	
	color:silver;
	background-color:maroon;
	}


.miols{/*mitte oben links (2s) etwas schmaler, abschnitt "kontakt"*/
	position:absolute;
	top:0%;
	left:20%;
	width:20%;
	height:50%;
	
	overflow:hidden;
	
	color:silver;
	background-color:maroon;
	}






.mion{/*mitte oben doppelt breit, 1/6 höhe, abschnitt "netz"*/
	position:absolute;
	top:0%;
	left:20%;
	width:60%;
	height:15%;
	
	overflow:hidden;
	
	color:silver;
	background-color:maroon;
	}
	



.miu{/*mitte unten 50% breit*/
	position:absolute;
	top:30%;
	left:25%;
	width:50%;
	/*height:50%;*/
	
	/*overflow:hidden;*/
	
	text-align:center;
	
	}


.miun{/*mitte unten doppelt breit, 5/6 höhe, scroll, abschnitt "netz"*/
	position:absolute;
	top:15%;
	left:20%;
	width:60%;
	height:85%;
	
	overflow:scroll;
	
	background-color:silver;
	color:blue;
	}




.miuk{/*mitte unten doppelt breit, 1/6 höhe, scroll, abschnitt "kontakt" (impressum"*/
	position:absolute;
	top:90%;
	left:20%;
	width:60%;
	height:20%;
	
	font-size:small;
	overflow:hidden;
	
	background-color:maroon;
	color:white;
	}



.miul{/*mitte unten links schmal, halbe höhe, hidden, abschnitt "hauskiez" u.a.*/
	position:absolute;
	top:50%;
	left:20%;
	width:30%;
	height:50%;
	
	overflow:hidden;
	
	background-color:silver;
	color:blue;
	}



.miur{/*mitte unten rechts schmal, halbe höhe, hidden, abschnitt "hauskiez" u.a.*/
	position:absolute;
	top:50%;
	left:50%;
	width:30%;
	height:50%;
	
	overflow:hidden;
	
	background-color:silver;
	color:blue;
	}


	

/*
	SEITENTITEL
	===========
	
	seitentitel "st" für bspw. die abschnitte "start", "kontakt", "netzwerk", etc., zur zeit links unten angesetzt
*/

.st {
	position:fixed;
	bottom: 0%;
	left:25%;
	
	color: green;
	background-color: white;
	
	font-family:"lucida","arial","sans-serif"; 
	font-size: normal;
	}
	


.q 	{/*kleine schrift*/
	font-size:small;
	font-family"lucida","arial","sans-serif";
	}