/* ================================================================================
	CICD-Layout Schwarz-Weiss Röllinghausen 1923 e.V.
   ============================================================================= */
/*
	Über diese CSS
	==============
	Diese CSS realisiert eine CICD-gerechte Darstellung der grundsätzlichen Objekte
	auf den Internetseiten von SW Röllinghausen:
		- Boxen/Teaser für Logo, Banner und Navigation werden positioniert und designt
		- Globale Schrift- und Links-Design (auch für Boxen) werden deklariert:
			- p, td
			- Eigene Formatclassen
	Die Anordnung der Boxen des Seiteninhalts (NUR Positionierung) erfolgt je nach 
	Bedarf mit der Verknüpfung zu einer anderen CSS-Datei (Boxen*.css).
	
	Noch Machen
	===========
	- AufzählungsTAGS: STD ohne Einzug, .Einzug10, .Einzug20 usw.
	
	
	Aufbau, Positionierung und Nomenklatur der Boxen/Teaser
	=======================================================
		+-BoxLogo-----------------------------------------------------------+
		|																	|
		|				  +-BoxBanner-------------------------------------+ |
		|				  |												  | |
		|				  +-----------------------------------------------+ |
		|																	|
		+-------------------------------------------------------------------+
		
		+--BoxNavigation----+
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		|					|
		+-------------------+	

*/



/*	===============================================================================
	Boxen/Teaser - Positionierung und Grundlayout/-Format
  	============================================================================ */
	/* ===== Box: Logo (Logo und horizontaler Rahmen) ohne Text ===== */
    #BoxLogo
    	{
		/* == Positionierung der Box == */
        position: absolute;
        top: 5px;
        left: 5px; /*Alt: 5*/
        width: 830px;
        height: 150px;
		/* === Ausrichtung von Text/Grafiken in der Box === */
        text-align: left;
        }   
   
	/* ===== Box: Text für Banner/Titel ===== */
	#BoxBanner
		{
		/* == Positionierung der Box == */
		position: absolute;
		top: 35px;
    	left: 150px;
    	width: 650px;
    	height: 80px;
		
		
		
    	}   
   
	/* ===== Box: Navigation (Hintergrund) ===== */
    #BoxNavigation
    	{
		/* == Positionierung der Box == */
        position: absolute;
        top: 172px;
        left: 5px;
        width: 135px;  /*ALT: 140*/
        height: 473px;
		/* == Farben/Rahmen der Box == */
		border: 2px solid black;
		background-color: black;
		
		
       }

	/* ===== Box: Navigation (Hintergrund) ===== */
    #BoxNavigationNeu
    	{
		/* == Positionierung der Box == */
        position: absolute;
        top: 160px;
        left: 5px;
        width: 138px;
        height: 473px;
		/* == Farben/Rahmen der Box == */
		border: 2px solid black;
		background-color: black;
		
		
       }     

	
/*  ===============================================================================
	Text (HTML-Tag "p") - Formatierung, Layout und Design
    ============================================================================ */		
	/* ===== Allgemeingültige Formatierungen für ALLE Text-Tags ===== */
	p,p.BlocksatzInvers,p.Blocksatz,p.ZentriertInvers,p.Zentriert,p.RechtsInvers,p.Rechts,p.LinksInvers,p.Links,p.MiniZentriertInvers,p.MiniZentriert,p.MiniRechtsInvers,p.MiniRechts,p.MiniLinksInvers,p.MiniLinks,p.BannerText,p.BannerTitelInvers,p.BannerTitel,p.LeerzeileInvers,p.Leerzeile
		{
		font-family: Tahoma, Arial, Verdana, Helvetica;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 4px;
		margin-right: 4px;
		}
		
	/* ===== Ausrichtung der Text-Tags je CLASS ===== */
	p,p.Links,p.LinksInvers,p.LeerzeileInvers,p.Leerzeile,p.MiniLinksInvers,p.MiniLinks
		{
		text-align: left;
		}

	p.Rechts,p.RechtsInvers,p.MiniRechtsInvers,p.MiniRechts
		{
		text-align: right;
		}

	p.Zentriert,p.ZentriertInvers,p.BannerTitel,p.BannerTitelInvers,p.BannerText,p.MiniZentriertInvers,p.MiniZentriert
		{
		text-align: center;
		}
		
	p.Blocksatz,p.BlocksatzInvers
		{
		text-align: justify;
		}
		
	/* ===== Schriftgröße der Text-Tags je CLASS ===== */
	p,p.Links,p.Rechts,p.Zentriert,p.Blocksatz,p.LinksInvers,p.RechtsInvers,p.ZentriertInvers,p.BlocksatzInvers
		{
		font-size: 10pt;
		}

	p.BannerTitel,p.BannerTitelInvers
		{
		font-size: 22pt;
		}
		
	p.BannerText
		{
		font-size: 12pt;
		}
	
	p.MiniZentriertInvers,p.MiniZentriert,p.MiniRechtsInvers,p.MiniRechts,p.MiniLinksInvers,p.MiniLinks
		{
		font-size: 8pt;
		}

	p.LeerzeileInvers,p.Leerzeile
		{
		font-size: 2pt;
		}

	/* ===== Schriftschnitt der Text-Tags je CLASS ===== */
	p,p.Links,p.Rechts,p.Zentriert,p.Blocksatz,p.LinksInvers,p.RechtsInvers,p.ZentriertInvers,p.BlocksatzInvers
		{
		font-weight: normal;
		}

	p.BannerTitel,p.BannerTitelInvers,p.BannerText
		{
		font-weight: bold;
		}

	p.MiniZentriertInvers,p.MiniZentriert,p.MiniRechtsInvers,p.MiniRechts,p.MiniLinksInvers,p.MiniLinks,p.LeerzeileInvers,p.Leerzeile
		{
		font-weight: normal;
		}
	
	/* ===== Farben der Text-Tags je CLASS ===== */
	p,p.Links,p.Rechts,p.Zentriert,p.Blocksatz,p.BannerTitel,p.BannerText,p.MiniZentriert,p.MiniRechts,p.MiniLinks,p.Leerzeile
		{
		color: #000000;
		}

	p.LinksInvers,p.RechtsInvers,p.ZentriertInvers,p.BlocksatzInvers,p.BannerTitelInvers,p.MiniZentriertInvers,p.MiniRechtsInvers,p.MiniLinksInvers,p.LeerzeileInvers
		{
		color: #FFFFFF;
		}

/*  ===============================================================================
	Listen (HTML-Tags "ul" (Aufzählung) und "ol" (Nummerierung)) - Formatierung, Layout und Design
    ============================================================================ */		
	/* ===== Allgemeingültige Formatierungen für ALLE Listen-Tags ===== */
	ol,ul,ul.Einrückung3Invers,ul.Einrückung3,ul.Einrückung2Invers,ul.Einrückung2,ul.Einrückung1Invers,ul.Einrückung1,ul.Invers,ol.Invers
		{
		font-family: Tahoma, Arial, Verdana, Helvetica;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 4px;
		text-align: left;
		font-size: 10pt;
		font-weight: normal;
		list-style-position: outside;
		}

	/* ===== Farben der Listen-Tags je CLASS ===== */
	ol,ul,ul.Einrückung3,ul.Einrückung2,ul.Einrückung1
		{
		color: #000000;
		}

	ul.Invers,ol.Invers,ul.Einrückung3Invers,ul.Einrückung2Invers,ul.Einrückung1Invers
		{
		color: #FFFFFF;
		}
	
	/* ===== Darstellung des Aufzählungs-/Nummerierungs-Zeichen der Listen-Tags je CLASS ===== */
	ol,ol.Invers
		{
		list-style-type: decimal;
		}

	ul,ul.Invers,ul.Einrückung3Invers,ul.Einrückung3,ul.Einrückung2Invers,ul.Einrückung2,ul.Einrückung1Invers,ul.Einrückung1
		{
		list-style-type: disc;
		}

	/* ===== Abstände/Einrückungen der Listen-Tags je CLASS ===== */
	ol,ol.Invers
		{
		margin-left: 40px;
		}

	ul,ul.Invers
		{
		margin-left: 20px;
		}

	ul.Einrückung1,ul.Einrückung1Invers
		{
		margin-left: 30px;
		}		

	ul.Einrückung2,ul.Einrückung2Invers
		{
		margin-left: 40px;
		}
		
	ul.Einrückung3,ul.Einrückung3Invers
		{
		margin-left: 50px;
		}
		
				
/*  ===============================================================================
	Links (HTML-Tag "a href") - Formatierung, Layout und Design
    ============================================================================ */
	/* ===== Allgemeingültige Formatierungen für ALLE Links-Tags ===== */
	a:link,a:active,a:visited,a.OhneUnterstreichung:link,a.OhneUnterstreichung:active,a.OhneUnterstreichung:visited,a.Invers:hover,a.InversOhneUnterstreichung:hover
		{
		color: #000000;
		background-color: #FFFFFF;
		}
		
    a:hover,a.OhneUnterstreichung:hover,a.Invers:link,a.Invers:active,a.Invers:visited,a.InversOhneUnterstreichung:link,a.InversOhneUnterstreichung:active,a.InversOhneUnterstreichung:visited
    	{
    	color: #FFFFFF;
    	background-color: #000000;
    	}

	/* ===== Schrifteffekt der Links-Tags je CLASS ===== */
	a:link,a:active,a:visited,a:hover,a.Invers:link,a.Invers:active,a.Invers:visited,a.Invers:hover
		{
		text-decoration: underline; 		
		}
	
	a.OhneUnterstreichung:link,a.OhneUnterstreichung:active,a.OhneUnterstreichung:visited,a.OhneUnterstreichung:hover,a.InversOhneUnterstreichung:link,a.InversOhneUnterstreichung:active,a.InversOhneUnterstreichung:visited,a.InversOhneUnterstreichung:hover
		{
		text-decoration: none; 		
		}
	
		
/*  ===============================================================================
	Überschriften (HTML-Tags "h1" bis "h6") - Formatierung, Layout und Design
    ============================================================================ */
	/* INFO INFO INFO zur Benutzung der einzelnen Überschriften-Tags
	   -------------------------------------------------------------
	   h1	Seitentitel/-überschrift
	   h2	Boxenüberschrift Standard
	   h3	Boxenüberschrift 2. Hierachie (Schriftgröße 2pt kleiner als h2)
	   h4	Boxenüberschrift 3. Hierachie (Schriftgröße 2pt kleiner als h3)
	   h5	Boxenüberschrift 4. Hierachie (Schriftgröße 2pt kleiner als h4)
	   h6	SPEZIAL: Dient nur als DUMMY um einen sauberen Abstand zwischen 2 Tabellenzeilen zu erhalten
	*/
	
	/* ===== Allgemeingültige Formatierungen für ALLE Überschriften-Tags ===== */
	h1,h2,h3,h4,h5,h6,h6.Rot,h5.Rot,h4.Rot,h3.Rot,h2.Rot,h1.Rot,h6.Blau,h5.Blau,h4.Blau,h3.Blau,h2.Blau,h1.Blau,h6.Grün,h5.Grün,h4.Grün,h3.Grün,h2.Grün,h1.Grün,h6.Grau,h5.Grau,h4.Grau,h3.Grau,h2.Grau,h1.Grau,h6.Invers,h5.Invers,h4.Invers,h3.Invers,h2.Invers,h1.Invers
		{
		font-family: Tahoma, Arial, Verdana, Helvetica;
		font-weight: bold;
		font-style: italic;
		text-align: center;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		}
	
	/* ===== Farben der Überschriften je (Farb-)Gruppe ===== */
	/* == h1 - h5: Schriftfarbe Weiß, Hintergrundfarbe Schwarz ==*/
	h1,h2,h3,h4,h5,h6
		{
		color: #FFFFFF;
		background-color: #000000;
		}

		/* == h6: Schriftfarbe Schwarz, Hintergrundfarbe Weiß ==*/
	h6.Invers,h5.Invers,h4.Invers,h3.Invers,h2.Invers,h1.Invers
		{
		color: #000000;
		background-color: #FFFFFF;
		}
	
	/* == h_.Rot: Schriftfarbe Weiß, Hintergrundfarbe Rot ==*/
	h1.Rot,h2.Rot,h3.Rot,h4.Rot,h5.Rot,h6.Rot
		{
		color: #FFFFFF;
		background-color: #FF0000;
		}

	/* == h_.Blau: Schriftfarbe Weiß, Hintergrundfarbe Blau ==*/
	h1.Blau,h2.Blau,h3.Blau,h4.Blau,h5.Blau,h6.Blau
		{
		color: #FFFFFF;
		background-color: #0000FF;
		}

	/* == h_.Grün: Schriftfarbe Weiß, Hintergrundfarbe Grün ==*/
	h1.Grün,h2.Grün,h3.Grün,h4.Grün,h5.Grün,h6.Grün
		{
		color: #FFFFFF;
		background-color: #008000;
		}

	/* == h_.Grau: Schriftfarbe Weiß, Hintergrundfarbe Grau (Grey) ==*/
	h1.Grau,h2.Grau,h3.Grau,h4.Grau,h5.Grau,h6.Grau
		{
		color: #FFFFFF;
		background-color: #808080;
		}
		
	/* ===== Schriftgröße der Überschriften-Tags je Hierachie/CLASS ===== */
	h1,h1.Rot,h1.Blau,h1.Grün,h1.Grün,h1.Invers
		{
		font-size: 20pt;
		}	
	
	h2,h2.Rot,h2.Blau,h2.Grün,h2.Grau,h2.Invers
		{
		font-size: 16pt;
		}	

	h3,h3.Rot,h3.Blau,h3.Grün,h3.Grau,h3.Invers
		{
		font-size: 14pt;
		}	

	h4,h4.Rot,h4.Blau,h4.Grün,h4.Grau,h4.Invers
		{
		font-size: 12pt;
		}	

	h5,h5.Rot,h5.Blau,h5.Grün,h5.Grau,h5.Invers
		{
		font-size: 10pt;
		}	

	h6,h6.Rot,h6.Blau,h6.Grün,h6.Grau,h6.Invers
		{
		font-size: 3pt;
		}	
	
	


		
		
/*  ===============================================================================
	Tabellen (HTML-Tag "td") - Formatierung, Layout und Design
    ============================================================================ */		
	/* ===== Tabellen ===== */
	td
		{
		vertical-align: top;

		}	
		








		
		
		
		
/* ================================================================================
	CICD für Schwarz-Weiss Röllinghausen 1923 e.V.
	© Copyright Peter Silz, 2006
   ============================================================================= */