/*  =========================================================
Zentrales Stylesheet - wird im HEAD der Webseiten aufgerufen 
Datei: lions_styles.css
Datum: 07.2009
Autor: SN 
========================================================== */
/* ======================================================= */
/*  Basisformatierungen   */
/* ======================================================= */

* { padding: 0; margin: 0; }  

blockquote { margin: 1em 2em; } 

ul, ol, dl { margin-left: 1em; }

li { margin-left: 1em; } 

dd { margin-left: 2em; }

ul ul, ul ol, ul dl,
ol ul, ol ol, ol dl,
dl ul, dl ol, dl dl {
   margin-top: 0;
   margin-bottom: 0;
}

ul { list-style-type: square; }
ol { list-style-type: decimal; }

ul ul { list-style-type: disc; }
ol ol { list-style-type: lower-alpha; }

ul ol { list-style-type: decimal; }
ol ul { list-style-type: square; }

ol ol ol, ol ol ul, ol ul ul, ol ul ol,
ul ul ul, ul ul ol, ul ol ol, ul ol ul {
   list-style-type: circle;
} 

option { padding-left: 0.2em; padding-right: 0.3em; }

fieldset, a img { border: none; }

html { height: 101%; } 

body {
   background-color: #000081;
   color: #ffffff; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: medium;  
}

h1, h2, h3, h4, h5, h6 {
   font-family: Georgia, "Times New Roman", serif;
   font-weight: bold; 
}

h1 { font-size: 200%; }     
h2 { font-size: 184.62%; }   
h3 { font-size: 153.85%; }  
h4 { font-size: 138.46%; }  
h5 { font-size: 123.08% }   
h6 { font-size: 107.69%; } 

/* =============================================== 
   Ende der allgemeingültigen Basisformatierungen
================================================ */

/*================================================================*/
/* allgemeine Bildschirmformatierung                              */ 
/*================================================================*/

address {
   text-align: center;  
   font-size: 80%;      
   font-style: normal;  
   letter-spacing: 2px; 
}


a 
{ 	text-decoration: none;
	outline: none;
} 

.versteckmich {
   position: absolute;
   left: -9999px; 
   top: -9999px; 
   display: inline;
   width: 0;
   height: 0;
}

.tabmich:focus, .tabmich:active {
   position: absolute;
   top: 9999px;   /* Werte für top/left ggfs. dem Layout anpassen */ 
   left: 9999px; 
   display: inline; 
   width: 12em;   /* Werte für width/height dem Text anpassen */ 
   height: auto; 

   background-color: white; 
   color: black; 
   padding: 5px; 
   border: 1px solid black;
}

.para02 {
	margin-left: 30%;
	color: #FFFFf0;
	font-size: 110%;
	line-height: 1.0;  
}
.para02 {
	margin-left: 30%;
	color: #FFFFf0;
	font-size: 110%;
	line-height: 1.0;  
}

.para03 {
	margin-left: 30%;
	font-size: 105%;
	line-height: 1.1;
	color: #FFFFf0;
}

.para04 {
	margin-left: 5%;
	font-size: 105%;
	line-height: 1.1;
	color: #FFFFf0;
}

.para05 {
	color: #FFFFff;
	padding: 5px;
}

.para09 {
	font-size: 95%;
	color: #FFFF00;
	padding: 1%;
}

.para09 a { 
	color: #0099FF;
}

.para09 a:active, .para09 a:hover {
	color: #f6CCCC;
	text-decoration:none;
}

.rechts {
	padding-left: 35em;
	padding-right: 2em;
	color: #FFFFFF;
	font-size: 110%;
	line-height: 1.5em;
}	

.rechts_2 {
	padding: 1em;
	padding-left: 30em;
	padding-right: 3em;
	color: #000081;
	font-size: 110%;
	line-height: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
	height: auto;
}
	
.rechts_3 {
	padding: 1em;
	padding-left: 15em;
	padding-right: 3em;
	color: #ffff81;
	font-size: 98%;
	line-height: 1.3em;
	margin: 5px;
}

.rechts_4 {
	padding: 2px;
	color: #ffffff;
	font-size: 120%;
/*	line-height: 3.5em;  */
	margin: 20px;
	margin-left: 40%;
}		

.rechts_5 {
	overflow: hidden;	 
	color: #ffffff;
	font-size: 120%;
	line-height: 3.5em;
	margin-left: 80%;
}	
.rechts_6 { 
	padding-left: 0;
	font-size: 90%;
	line-height: 3.5em;
	margin: 0;
	margin-left: 15%;
}		
.links_4 {

	color: #ffffff;
	font-size: 120%;
	line-height: 3.5em;
	margin-left: 1%;
}		

.links { 
	float:left;
	margin-top: 5%;
	margin-right: 2em;
} 

.links_1 { 
	float:left;
	margin-top: 2%;
	margin-right: 1em;
} 

.white_class  {
	color: #FFFFFF;
}

/*======================================================================
Bereich der Logos Löwenkopf
========================================================================*/
#logo
{ 	float: left; 	
	top: 1%;
	width: 10%;
	padding: 2px;
	margin-right: 10px;
	display: inline;
} 
	
#logo1
{	float: right;  
	top:auto;
	width: 10%;
	padding: 2px;
	margin-left: 10px;
	display: inline;
} 
.between_lions {
	 text-align: center;
	 background-color: #000081;
	 color: #ffffff;
	 margin-left: 10%;
	 margin-right: 10%;
}

.clearing {clear:both;}

/* ==================================== 
   2. Styles für die  Layoutbereiche 
   ==================================== */
#wrapper
{	color: #FFFFFF;
	background-color: #000081;
	width: 99%;
	height: 99%;
	margin-left: auto;
	margin-top: 1%;
	margin-right: auto;
	margin-bottom: 1%; 
	border: 5px solid; border-color: #000081;
}

#kopfbereich {
   	position: relative; 
   	background-color: #000081;
	padding-bottom: 4%;
	padding-top: 1%;
}

#kopfbereich h1 {
 	padding-top: 4%; }  

   	#kopfbereich p {
      position:absolute;
      top: 10px ;
      right: 10px;
      padding: 5px 0 5px 0;
      margin-bottom: 0;
   }
   #kopfbereich p span {
      color: #0000fa;
   }

#textbereich, #textbereich01
{
	background-image: url(bilder/lionshead_kapstadt05.jpg); 
	background-repeat: no-repeat;
	background-position: top left;
	width: auto;
	height: 40em;
	margin-right: 0;
	margin-bottom: 0;
	padding-top: 3%;
	padding-left: 90px;
	padding-right: 3%;
	background-color: #000081;
	color: #FFFF00;
}

#textbereich01 
{
	background-image: url(bilder/lionshead_kapstadt03.jpg);
	height: auto;
	padding-left: 2%;
}

#textbereich02 
{
 	background-position: top left;
	width: auto;
	height: 40em;
	margin-right: 0;
	margin-bottom: 0;
	padding: 0;
	padding-top: 3%;
	padding-right: 3%;
	padding-left: 5%;
	background-color: #000081;
	color: #FFFF00;
}	

#textbereich03 
{
	background-image: url(bilder/Lions_loewenfiguren.jpg); 
	background-repeat: no-repeat;
	background-position: top left;
	width: auto;
	height: auto;
	margin-right: 0;
	margin-bottom: 0;
	padding-top: 3%;
	padding-left: 90px;
	padding-right: 3%;
	background-color: #000081;
	color: #FFFF00;
}

#textbereich04 
{
	background-image: url(bilder/Lions_loewenfiguren.jpg);
	background-repeat: repeat;
	background-position: top left;
	width: auto;
	height: 35em;
	margin-right: 0;
	margin-bottom: 0;
	padding-top: 3%;
	padding-left: 90px;
	padding-right: 3%;
	background-color: #000081;
	color: #FFFF00;
}

#textbereich05 
{
	background-image: url(bilder/Lionsbackground.jpg);
	background-repeat: repeat;
	background-position: top left;
	width: auto;
	height: auto;
	margin-right: 0;
	margin-bottom: 0;
	padding-top: 3%;
	padding-left: 90px;
	padding-right: 3%;
	background-color: #000081;
	color: #FFFFff;
}

#textbereich06 
{
	background-image: url(bilder/Lionsbackground.jpg);
	background-repeat: repeat;
	background-position: top left;
	width: auto;
	height: auto;
	margin-right: 0;
	margin-bottom: 0;
	padding-top: 3%;
	padding-left: 90px;
	padding-right: 3%;
	color: #000081;
}

#textbereich07 
{
	background-image: url(bilder/Lionsbackground.jpg);
	background-repeat: repeat;
	background-position: top left;
	width: auto;
	height: auto;
	margin-right: 0;
	margin-bottom: 0;
	padding-top: 3%;
	padding-left: 2%;
	padding-right: 2%;
	color: #000081;
}

#textbereich07 h1, h5  {color: #000081; text-align: center;}


#textbereich06 h5  {  color: #FFFFff; }


/*  #textbereich { padding: 20px 10px 20px 20px; }  */

   #textbereich a { 
	border-bottom: 1px solid ffff00; 
   }
   #textbereich a:hover,
   #textbereich a:focus { 
    border-bottom: 1px solid #d9d900; 
   }
   
   
#tabelle { 
	color: #ffffff;
	position: relative; font-size: 90%;
	
}

#tabelle a {
	color: #FFFF00;
}	 

.spalte1 { 	width: 3%;
			padding: 5px;
			border-bottom: solid 1px #FFFFFF;
		
}

.spalte2 { 	width: 10%;
			padding: 5px;
			border-bottom: solid 1px #FFFFFF;
} 
 
.spalte3 { 	width: 25%;
			padding: 5px;
			border-bottom: solid 1px #FFFFFF;
			
}  

.spalte4 { 	width: 21%;
			padding: 5px;
			border-bottom: solid 1px #FFFFFF;
}  

.spalte5 { 	width: 16%;
			padding: 5px;
			border-bottom: solid 1px #FFFFFF;
}  
.spalte6 { 	width: 18%;
			padding: 5px;
			border-bottom: solid 1px #FFFFFF;
} 
 
.spalte7 { 	width: 25%;
			padding: 5px;
			border-bottom: solid 1px #FFFFFF;
} 

.spalte8 { 	width: 25%;
			padding: 5px;
			border-bottom: solid 1px #FFFFFF;
} 

.tabinvisible
		{	visibility: hidden;
			height: 0;
			width: 0;
			position: absolute;
			left: -9999px; 
   			top: -9999px; 
}

#sitemap #textbereich06 ul,
#sitemap #textbereich06 ul li
{
	padding: 0.5em;
}
         			
#sitemap #textbereich06 a 
{  	
	color: #FFFFFF;
	font-size: large;
}


#fussbereich {
   	padding: 20px 0 0 0;
   	border-top: 1px solid #ffff00;
	padding-bottom: 1%;
   	margin-top: 20px;
	height: auto;
}
   #fussbereich ul {
      text-align: center;
      font-size: 80%;
      font-style: normal;
      letter-spacing: 2px;
      padding: 10px;
      margin: 0;
   }
   #fussbereich ul li {
      list-style-type: none;
      padding: 0;
      margin: 0;
   }
   
   #fussbereich #seite0301 {
	  float: left;
   }

/* Kontaktformular */
form {
   	background-color: #eee;
	color: 000081;
/*	width: 370px;  */
	width: auto; 
   	padding: 20px; 
   	border: 1px solid #ffff00;
	text-align: left;
}


label { 
   display: block; 
   cursor: pointer; 
} 
#absender, 
#nachricht { 
   width: 300px;
   border: 1px solid #ffff00;
   margin-bottom: 1em;
   color: 000081;
}

#absender:focus, 
#nachricht:focus {
   background-color: #d9d9d9; 
}

/* ======================================= 
/* Ende der allgemeine Bildschirmformatierung 
   ======================================= */

/*==================================================================*/
/* Formatierung der Navigation */
/*==================================================================*/

#navigation {
   overflow: hidden;
   color: black;
   background: #000081 url(bilder/Gelb_linie.jpg) repeat-x left bottom; /* Navi-Bereich farblich passend zu Kopfbereich */
   padding: 5px 10px 0px 10px;
}
/* Sternchen-Hack, hasLayout für IE5x. und 6 */ 
* html #navigation { height: 1%; } 

#navigation ul {
   float: right;  
   width: auto; 
   margin-bottom: 0;
}
#navigation li {
   float: left; 
   width: auto; 
   list-style-type: none;
   margin: 0 ;
   margin-right: 0.4em; 
}
#navigation a,
#navigation strong {
   	display: block; 
   	background-color: #f5f4b0; 
  	color: black;
  	font-weight: normal;
   	padding: 4px 8px;
/*   border: 1px solid #ffff00; */
	border: 1px solid #ffff00;
}  
/* Ebene 1 - Hovern, Focus und aktuellen Tab hervorheben */
#navigation a:hover,
#navigation a:focus,
#startseite #navi01 strong,
#seite0101 #navi01 a,
#seite0102 #navi01 a,

#seite02   #navi02 strong,
#seite0201 #navi02 a,
#seite0202 #navi02 a, 
#seite0203 #navi02 a, 
#seite0204 #navi02 a, 
#seite0205 #navi02 a,

#protokoll #navi02 a,
  
#seite03   #navi03 strong,
#seite0301 #navi03 a, 
#kontakt #navi04 strong,
#impressum #navi05 strong,
#sitemap #navi06 strong
{ 

   background-color: #000081; 
   color: #ffffff; 
   font-weight: normal; 
/*   border-bottom-color: white;  */
}  
#navigation a:active { 
   background-color: white; 
   color: black;
}  

/* ==============================================
   Zweite Navigationsebene positionieren 
   ============================================== */
div#wrapper { position: relative; } 

#startseite #navi01 ul,
#seite0101  #navi01 ul,
#seite0102  #navi01 ul,

#seite02   #navi02 ul,
#seite0201 #navi02 ul,
#seite0202 #navi02 ul, 
#seite0203 #navi02 ul,  
#seite0204 #navi02 ul,
#seite0205 #navi02 ul,

#protokoll #navi02 ul,
  
#seite03   #navi03 ul, 
#seite0301 #navi03 ul,
#seite0302 #navi03 ul, 
#veranstaltungen #navi03 ul,
#seite0303 #navi03 ul

{
	position: absolute; 
   	right: 5em;   /* 5em vom rechten Rand von #wrapper */ 
   	top: auto;
/*   display: block;  */
   	width: auto;
/*   height: auto;   */
   	font-size: 90%; 
   	padding: 0.5em 0 0 0;
   	margin: 0;
}

#startseite #navi01 ul,
#seite0101  #navi01 ul,
#seite0102  #navi01 ul {
   	right: 30em;   /* 10em vom rechten Rand von #wrapper */ 
}

/* ====================================== 
   02 Zweite Ebene: a und strong gestalten 
====================================== */ 
#startseite #navi01 li a,
#seite0101 #navi01 li a,
#seite0102 #navi01 li a,

#seite02   #navi02 li a, 
#seite0201 #navi02 li a, 
#seite0202 #navi02 li a, 
#seite0203 #navi02 li a,    
#seite0204 #navi02 li a, 

#protokoll #navi02 li a,
   
#seite03   #navi03 li a, 
#seite0301 #navi03 li a, 
#seite0302 #navi03 li a, 
#veranstaltungen #navi03 li a, 
#seite0303 #navi03 li a 

{ 
   background-color: #f5f4b0;    
/*   border: none;   */
   border-bottom: none;
   border: 1px solid #ffff00; 
}

#seite0101 #navi01 li strong,
#seite0102 #navi01 li strong,

#seite0201 #navi02 li strong, 
#seite0202 #navi02 li strong, 
#seite0203 #navi02 li strong, 
#seite0204 #navi02 li strong,
#seite0205 #navi02 li strong, 
 
#seite0301 #navi03 li strong,
#seite0302 #navi03 li strong, 
#veranstaltungen #navi03 li strong,
#seite0303 #navi03 li strong  
 
{ 
   background: transparent;
   border: none;   
   border-bottom: none; 
}

/* ======================================
   Zweite Ebene - Links hovern         */

#startseite #navi01 li a:hover,
#seite0101 #navi01 li a:hover,
#seite0102 #navi01 li a:hover,

#seite02   #navi02 li a:hover,
#seite0201 #navi02 li a:hover, 
#seite0202 #navi02 li a:hover, 
#seite0203 #navi02 li a:hover, 
#seite0204 #navi02 li a:hover, 
#seite0205 #navi02 li a:hover, 

#seite03   #navi03 li a:hover,
#seite0301 #navi03 li a:hover, 
#seite0302 #navi03 li a:hover, 
#veranstaltungen #navi03 li a:hover,
#seite0303 #navi03 li a:hover 

{
   background-color: transparent; 
   color: #ffffff;
}

/* ======================================
   03 Zweite Ebene: Hervorhebung des aktuellen Links
====================================== */

#seite0101 #navi01 li strong,
#seite0102 #navi01 li strong,

#seite0201 #navi02 li strong,
#seite0202 #navi02 li strong,
#seite0203 #navi02 li strong,
#seite0204 #navi02 li strong,
#seite0205 #navi02 li strong,

#seite0301 #navi03 li strong,
#seite0302 #navi03 li strong,
#seite0303 #navi03 li strong,
#veranstaltungen #navi03 li strong
{
   color: #0000fa;
}

/* ======================================
   04 Zweite Ebene absetzen 
   a. Rahmenlinie unten (auskommentiert) 
   ODER 
   b. Hintergrundfarbe (aktiviert) 
====================================== */
/* 04a. Rahmenlinie zur Abgrenzung nach unten */

#textbereich,
#textbereich01,
#textbereich02,
#textbereich03,
#textbereich04,
#textbereich05,
#textbereich06
{
   margin-top: 2.5em;
   padding-top: 0;
}

#startseite #textbereich,
#seite0101  #textbereich,
#seite0102  #textbereich02,
 
#seite02   	#textbereich,
#seite0201 	#textbereich,
#seite0202 	#textbereich,
#seite0203 	#textbereich,
#seite0204 	#textbereich,
#seite0205 	#textbereich,

#seite03  	#textbereich,

#kontakt    #textbereich, 
#sendeformular #textbereich,
#impressum #textbereich,

#startseite #textbereich01,
#seite0101  #textbereich01,
#seite0101  #textbereich05,
#seite0102  #textbereich01,
 
#seite02   	#textbereich01,
#seite0201 	#textbereich01,
#seite0202 	#textbereich01,
#seite0203 	#textbereich01,
#seite0204 	#textbereich01,
#seite0205 	#textbereich01,

#protokoll  #textbereich,
#protokoll  #textbereich03,
#protokoll  #textbereich04,
#protokoll  #textbereich05,

#seite02   	#textbereich04,
#seite0201 	#textbereich04,
#seite0202 	#textbereich04,
#seite0203 	#textbereich04,
#seite0204 	#textbereich04,
#seite0205 	#textbereich04,

#seite03  	#textbereich01,
#seite0301 	#textbereich01,
#seite0302 	#textbereich01,
#seite0303 	#textbereich01,
#veranstaltungen #textbereich06,

#seite0301 	#textbereich03,
#seite0302 	#textbereich03,  
#seite0303 	#textbereich03,

#kontakt    #textbereich01,
 
#sendeformular #textbereich01,
#impressum #textbereich01,
#sitemap #textbereich06
{
   border-top: 1px solid #ffff00;
} 

/* 04b. Alternative: Ebene 2 mit farbigem Hintergrund */
/*
#textbereich {
   margin-top: 0;
   border-top: 2.5em solid #0000fa;
}
*/

#startseite #navi01 strong,
#seite0101  #navi01 a,
#seite0102  #navi01 a,

#seite02    #navi02 strong,
#seite0201  #navi02 a,
#seite0202  #navi02 a,
#seite0203  #navi02 a,
#seite0204  #navi02 a,
#seite0205  #navi02 a,
 
#seite03    #navi03 strong,
#seite0301  #navi03 a,
#seite0302  #navi03 a, 
#veranstaltungen #navi03 a,
#seite0303  #navi03 a,

#kontakt    #navi04 strong,
#impressum  #navi05 strong,
#sitemap #navi06 strong 
{
   background-color: #000081;
   color: #ffffff;
   border-bottom: 2px solid #000081;
}

#seite0101 #navi0102 a,
#seite0102 #navi0101 a,

#seite0201 #navi0202 a,
#seite0201 #navi0203 a,
#seite0201 #navi0204 a,

#seite0202 #navi0201 a,
#seite0202 #navi0203 a,
#seite0202 #navi0204 a, 

#seite0203 #navi0201 a,
#seite0203 #navi0202 a,
#seite0203 #navi0204 a,

#protokoll #navi0201 a,
#protokoll #navi0202 a,
#protokoll #navi0203 a,
#protokoll #navi0204 a,

#seite0204 #navi0201 a,
#seite0204 #navi0202 a,
#seite0204 #navi0203 a,

#seite0301 #navi0302 a,
#seite0301 #navi0303 a,
#seite0301 #navi0304 a,

#seite0302 #navi0301 a, 
#seite0302 #navi0303 a,
#seite0302 #navi0304 a,

#seite0303 #navi0301 a,
#seite0303 #navi0302 a,
#seite0303 #navi0304 a,

#veranstaltungen #navi0301 a,
#veranstaltungen #navi0302 a,
#veranstaltungen #navi0303 a,
#veranstaltungen #navi0304 a

{
	color:	#000000;    /* Schrift innerhalb der nicht aktiven Felder schwarz */
}	


/* ======================================
   Zweite Ebene: Hervorhebung des aktuellen Links
====================================== */
#seite0101 #navi01 li strong,
#seite0102 #navi01 li strong,

#seite0201 #navi02 li strong,
#seite0202 #navi02 li strong,
#seite0203 #navi02 li strong,
#seite0204 #navi02 li strong,
#seite0205 #navi02 li strong,
#seite0301 #navi03 li strong,
#seite0302 #navi03 li strong, 
#veranstaltungen #navi03 li strong,
#seite0303 #navi03 li strong 
{

	color: #FFFFFF;
    
}
#seite0101 #navi0101, 
#seite0102 #navi0102, 

#seite0201 #navi0201,
#seite0202 #navi0202,
#seite0203 #navi0203,
#seite0204 #navi0204, 
#seite0205 #navi0205

{
	background-color: #000081;
	padding-bottom: 4px;
	border: 1px #ffff00 solid;
	border-bottom: 2px #000081 solid;
}

#seite0301 #navi0301,
#seite0302 #navi0302, 
#seite0303 #navi0303,
#veranstaltungen #navi0304 
{
	background-color: #596aba;
	padding-bottom: 4px;
	border: 1px #ffff00 solid;
	border-bottom: 2px #596aba solid;
}

#seite0302 #navi0302,  
#veranstaltungen #navi0304 
{ 
	background-color: #3d4ca9; 
	border-bottom: 2px #3d4ca9 solid;
}
#seite0303 #navi0303 
{ 
	background-color: #3039a0; 
	border-bottom: 2px #3039a0 solid;
}

.mitte 
	{text-align: center;
	color:#FFFF00;
	font-size: 108% solid;
	padding-bottom: 1%;
	}

.mitte2
	{text-align: center;
	color:#FFFFff;
	margin: 1%;
}
	
.terminpolster { padding: 3px; font-size: 70%;}




/* ======================================
   E N D E navigation
====================================== */

/*====================================================================*/
/* Formatierung für den Drucker */
/*====================================================================*/
/* @import url(druckversion.css); */