@charset "utf-8";

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Allgemeines
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*	padding, margin alle auf Null
	Inline-Elemente an Oberkante,
	Bilder an Unterkante
--------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  vertical-align: top;
}
img {
  vertical-align: bottom;}

/*	Abstaende Ueberschriften, Absaetze
	2 Werte: oben/unten + rechts/links 
--------------------------------------------*/
h1 {
  font-size: 1.5em;
  margin-bottom: 1.5em;
}
h2 {
  font-size: 1.2em;
  text-align: center;
  padding-bottom: 3px;
}
p {
  margin: 0.8em 0;
}
h1, h2, h3, h4, h5, h6 {
  color: #000000;
  background-color: transparent;
  padding-top: 10px;
  text-align: left;
}
#zentralfenster h1 {
  font-size: 1.5em;
  text-align: center;
}

/*	Rahmen um Bilder raus	
 -------------------------------------------*/
 a:link img, a:visited img,
 a:hover img, a:focus img, a:active img {
   border: 0;
}

/*	Abkuerzungen, Akronyme	
 -------------------------------------------*/
 
/*	Farben, Hintergrund
	Schrift dateiweit tief dunkelgrau
	Juni 2010 alt higru 5c5c5c
	alt schriftfarbe (color) 282828
--------------------------------------------*/
body {
  color: #282828;
  background-color: #000000;
  font-size: 90%;
  line-height: 130%;
  font-family: Arial, Verdana;
}

/*	Tabellen, S. 332 Schriftgroesse
--------------------------------------------*/
td, th {
  font-size: 90%;
}
td, th {
  f\ont-size: 100%;
}
  
/*	Links allgemein
--------------------------------------------*/
a:link { 
  color: #dc143c;
  text-decoration: none;
  background-color: transparent;
}
a:visited { 
  color: #787878;
  text-decoration: none;
  background-color: transparent;
}
a:hover,
a:focus {
  color: #dc143c;
}      
a:active { 
  color: #dc143c;
}	

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	div-Bereiche
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	div komplett
	(IE rafft das nicht, ignoriert diesen div)
++++++++++++++++++++++++++++++++++++++++++++*/
div#komplett {
  color: #282828;
  background-color: #000000;
  background-image: url(../grafik/higru-div_grau-leograu.jpg);
  background-repeat: repeat-y;
  background-position: top right;
  width: 1001px;
  margin: auto;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	div logobalken Farbe alt Juli 2010 b3b3bbb
++++++++++++++++++++++++++++++++++++++++++++*/
div#logobalken {
  background-color: #000000;
  font-size: 1.1em;
  padding: 0;
}
ul#navglobal a,
ul#navglobal strong {
  text-decoration: none;
  font-weight: normal;
}
ul#navglobal a:hover,
ul#navglobal a:focus {
  font-weight: normal;
}
#navglobal u1,
#navglobal li {
  list-style: none;
  float: left;
  padding: 5px;
  margin: 3px 0 3px 0;
}
h1#logoleo {
  padding: 0;
  margin: 0;
  text-align: right;
}
#navglobal li.skiplink {
  padding: 0;
  visibility: hidden;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	div linksbalken
++++++++++++++++++++++++++++++++++++++++++++*/
div#linksbalken {
  color: #282828;
  padding: 0 0 10px 30px;
  float: left;
  width: 138px;
  margin: -3px 0 0 0;
}
*.nichtsehn {
  position: absolute;
  left: -6666px
}

/*	Links im linksbalken
	zweimal Listenpunkte entfernen wg Besenschrank
--------------------------------------------*/
#nav a,
#nav strong {
  color: #282828;
  background-color: transparent;
  display: block;
  padding: 15px 10px 15px 0;
  text-align: right;
  text-decoration: none;
  font-weight: bold;
  line-height: normal;
  margin: 3px 0 3px 0;
  width: 192px;
  w\idth: 138px;
}
#nav a {
  background: url(../grafik/higru-nav_link-grau.jpg);
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
}
#nav strong {
  background: #E1E1E1 url(../grafik/higru-nav_strong-6.jpg) no-repeat; 
}
#nav a:hover,
#nav a:focus {
  background-image: url(../grafik/higru-nav_hover-gruen.jpg);
  font-weight: bold;
}
#nav strong {
  color: #282828;
  background-color: #E1E1E1;
  font-weight: bold;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  padding: 15px 12px 15px 0;
}
#nav ul {
  list-style: none;
}  
ul#nav {
  list-style: none;
} 
 
/*	unterschiedliche strong-Buttons
	im linksbalken
	!!Achtung, erstes background, dann background-image!!
--------------------------------------------*/
strong#guttag {
  background: url(../grafik/higru-nav_strong-gruen-1.jpg) no-repeat;
}
strong#wurgel {
  background-image: url(../grafik/higru-nav_strong-gruen-2.jpg);
}
strong#hauspresse {
  background-image: url(../grafik/higru-nav_strong-gruen-3.jpg);
}
strong#alltag {
  background-image: url(../grafik/higru-nav_strong-gruen-4.jpg);
}
strong#diesdas {
  background-image: url(../grafik/higru-nav_strong-gruen-5.jpg);
}
strong#comics {
  background-image: url(../grafik/higru-nav_strong-gruen-6.jpg);
}
strong#spiele {
  background-image: url(../grafik/higru-nav_strong-gruen-7.jpg);
}

/*	Ex-Navigation im Besenschrank
	jetzt Liste zur Unterscheidung von Leokram und Anderkram
--------------------------------------------*/
dt.navschrank {
  color: #cccccc;
  text-align: right;
  font-weight: bold;
  font-size: 1.2em;
  font-variant: small-caps;
  padding-top: 15px;
  padding-bottom: 5px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	div zentralfenster
	
	fuer den IE nochmal der Inhalt grau hinterlegt
	margin, damits inne Mitte passt
	min-height kann der IE nicht
	Reihenfolge: oben - rechts - unten - links
++++++++++++++++++++++++++++++++++++++++++++*/
div#zentralfenster {
  background-color: #f7f9f8;
  margin: 0 127px 0 180px;
  text-align: justify;
  padding: 40px 55px 40px 70px;
  /* Textbreite verschmaelert. Alte Werte padding: 40px 30px 20px 40px;*/
  border: 1px solid #000000;
}

/*	anstelle von min-height (IE ...)
	wenn Texte zu kurz
	gibts nochmals als 'umfstreck'
--------------------------------------------*/
div#space {
  padding: 100px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	div fuszbalken
	height-tarnung  fuer IE nutzt nichts
	(height: 102px; he\ight: 72px;)
++++++++++++++++++++++++++++++++++++++++++++*/
div#fuszbalken {
  color: #cccccc;
  background-color: #000000;
  text-align: center;
  padding: 5px 15px 0 15px;
  height: 72px;
  margin: 0;
  clear: both;
}
#fuszbalken {
  font-size: 0.9em;
}
/*	Leobueste als home-Link
	im fuszbalken
--------------------------------------------*/
#leo {
  float: right;
}
div#leo a {
  color: #cccccc;
  background: url(../grafik/logo-leo_portrait.jpg) no-repeat;
  text-decoration: none;
  padding: 55px 50px 11px 25px;
  display: block;
}
div#leo a:hover,
div#leo a:focus {
  color: #dc352f;
  background: url(../grafik/logo-leo_portrait-huch.jpg) no-repeat;
  padding-top: 55px;
  padding-right: 78px;
  padding-bottom: 11px;
  padding-left: 25px;
}

/*	zurueck zum Seitenanfang
--------------------------------------------*/
li#nach-oben a {
  background: url(../grafik/linkbild_zurueck-nach-oben_gruen.gif) no-repeat;
  padding-left: 15px;
  margin-top: 7px;
  margin-left: 7px;
}

li#nach-oben a:hover,
li#nach-oben a:focus {
  background: url(../grafik/linkbild_zurueck-nach-oben_rot.gif) no-repeat;
  padding-left: 20px;
  margin-top: 7px;
  margin-left: 7px;
}

/*	links im fuszbalken
--------------------------------------------*/
#navfusz u1,
#navfusz li {
  list-style: none;
  float: left;
}
#navfusz a,
#navfusz strong {
  color: #5fbe60;
  text-decoration: none;
  font-weight: bold;
  font-size: 1em;
  padding: 5px 5px 15px 5px;
  display: block;
}
#navfusz strong {
  color: #da3732;
  font-weight: bold;
  padding: 5px 5px 15px 5px;
}
#navfusz a:hover,
#navfusz a:focus {
  color: #da3732;
  padding: 5px 5px 15px 5px;
  font-weight: bold;
}
#navfusz a:active,
#navfusz strong {
  color: #da3732;
  font-weight: bold;
}

/*	info im fuszbalken
--------------------------------------------*/
div#fuszinfo {
  width: 620px;
  margin: auto;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	div-Bereich Rechtsbalken fuer Dateien mit Unter-Linkmenues
	der IE macht links stur den Strich bei strong, ich gebe auf ...
	rechtsbalken zuerst notieren nutzt nichts ...
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

div#rechtsbalken {
  color: #282828;
  width: 127px;
  float: right;
  padding: 0;
  margin: -3px 0 0 0;
}
#navrechts u1,
#navrechts li {
  list-style: none;
}
#navrechts a, 
#navrechts strong {
  color: #282828;
  background-color: #282828;
  display: block;
  padding: 15px 0 15px 10px;
  text-align: left;
  text-decoration: none;
  font-weight: bold;
  line-height: normal;
  margin: 3px 0 3px 0;
  width: 137px;
  w\idth: 105px;
}
#navrechts a {
  background-image: url(../grafik/higru-navrechts_link-grau.jpg);
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  margin: 3px 0 3px 0px;
  }
#navrechts a:hover,
#navrechts a:focus {
  color: #000000;
  background-image: url(../grafik/higru-navrechts_hover-rot.jpg);
  font-weight: bold;
  margin: 3px 0 3px 0px;
}
#navrechts strong {
  color: #000000;
  background-color: #E1E1E1;
  background-image: url(../grafik/higru-navrechts_strong-rot.jpg);
  font-weight: bold;
  margin: 3px 0 3px -1px;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  padding: 15px 2px 15px 10px;
}

/*	mittelgrosze Einzel-Screenshots der Webprojekte
	blau hinterlegter Button rechts */
a#diesdas {
  background-image: url(../grafik/higru-navrechts_blau.jpg);
}
/*	betonte Woerter, kateg im Besenschrank
	weiter unten auch noch betont1 (war
	speziell fuer Litfaessertext)
	hier als 3. ganz normal betont
--------------------------------------------*/
span.betont-kateg {
  font-variant: small-caps;
  font-weight: bold;
}

span.betont2 {
  color: #00cc33;
  font-weight: bold;
  font-size: 1.2em;
}

span.betont3 {
  font-weight: bold;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Zeitungs-Layout der Schwachsinnigen Seiten
	ohne die line-height auf "normal" ist die Schrift enger beisammen
	und der bunte Streigen auf die Haelfte reduziert
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
table#presse {
  border-collapse: collapse;
  font-family: "Verdana";
  line-height: normal;
  color: #000000;
}
td#pressename {
  font-size: 0.8em;
  padding-bottom: 5px;
}
td#pressedatum {
  font-size: 0.8em;
  text-align: right;
  padding-bottom: 5px;
}
th#presseabteilung-ratgeber {
  font-size: 2.1em;
  font-weight: bold;
  background-color: #00cc00;
  text-align: center;
  padding: 10px 0 10px 0;
}
th#presseabteilung-meldungen {
  font-size: 2.1em;
  font-weight: bold;
  background-color: #ff0000;
  text-align: center;
  padding: 10px 0 10px 0;
}
td#presseheadline {
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  padding: 9px 0 7px 0;
  letter-spacing: 0.05em;
}
p#pressekuerzel {
  text-align: right;
}
p#presseantext {
  background-color: #cccccc;
  font-weight: bold;
}
td.pressetext-links {
  font-size: 0.9em;
  padding: 0 12px 0 0;
  line-height: 1.3em;
}
td.pressetext-rechts {
  font-size: 0.9em;
  padding: 0 0 0 12px;
  line-height: 1.3em;
}
span.pressetextkategorie {
  font-style: italic;
}

/*	auf Website entdeckter Trick, der den Firefox dazu bringt,
	auch zu trennen - sehr seltsam: hier pressetrenner, war mir zu lang
	umbenannt in pt und prompt ...
---------------------------------------------*/
.pt:after {
  content: "\200B";
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Tetris von Herrn Fu
	Achtung, Datei laesst Super-HTML abstuerzen
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div#tetrisapplet {
  text-align: center;
  padding: 10px 0 10px 0;
}
/* testweise inaktiv
  #tetrisscreenshot img {
  text-align: right;
  v-space: 10px;
  h-space: 10px; weisz nicht mehr, wozu das gut war */
}
ul#tetristasten {
  list-style: none;
}
#tetristasten li {
  padding: 0 0 5px 0;
}
li.info {
  font-size: 0.8em;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Spielefenster: Screenshots
	Reihenfolge: oben - rechts - unten - links
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div#spielefenster-click {
  background-color: #f7f9f8;
  margin: 0 127px 0 180px;
  text-align: justify;
  padding: 40px 30px 20px 40px;
  height: 650px;
}

div#spielescreenshot {
  float: left;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-top: 5px;
}

div#spielefenster-tucker {
  background-color: #f7f9f8;
  margin: 0 127px 0 180px;
  text-align: justify;
  padding: 40px 30px 20px 40px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Comicscreenshots zurechtruecken
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div#kunstwerk {
  float: left;
  padding-right: 10px;
  padding-bottom: 5px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	div bild (Comicbilder, aus nebulastyle.css)
	Untertitel dafuer
++++++++++++++++++++++++++++++++++++++++++++*/
div#bild {
  color: #e4e4e4;
  text-align: center;
  margin: 50px;
}

span.untertitel {
  font-size: 1.1em;
  font-weight: bold;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Webprojekte: Fenster fuer die mittelgroßen Screenshots
	Reihenfolge: oben - rechts - unten - links
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 div#webprojekt {
  background-color: #f7f9f8;
  text-align: justify;
  padding: 10px 0 10px 35px;
  width: 838px;
}
#webprojekt h1 {
  font-size: 1.3em;
  text-align: center;
}
div#webprojekt-text {
  width: 653px;
  padding-left: 50px;
}
table#projektpics {
  margin: auto;
}
#projektpics td,
#projektpics th {
  padding: 0.7em;
}
/* #wann thead,
#wann tbody {
  border: 1px solid black;
}
#wann thead {
  background-color: #66ff66;
}
#wann tfoot {
  background-color: #66ff66;
  text-align: center;
  font-size: 80%; */
}
#projektpics td.pic {
  padding: 20px;
}
#projektpics td.pictext {
  padding: 9px 20px 20px 20px;
}
#projektpics td.pictext-rot {
  color: #cc0000;
  font-weight: bold;
}
 /*	querbeet: Tabelle in 'Promille'
 	Liste ebendort
 --------------------------------------------*/
caption.promille {
  font-size: 1.2em;
  padding: 10px 0 5px 0;
}
table.promille {
  background-color: #99ccff;
  border-collapse: collapse;
  border: 1px solid black;
  margin-bottom: 15px;
}
table.promille thead {
  border: 1px solid black;
  font-weight: bold;
}
table.promille th {
  padding: 0.3em;
}
table.promille td {
  padding: 0.3em;
  border: 1px solid black;
}
ol.promille li {
  padding: 3px 0;
  color: #0000cc;
}
ul.promille li {
  padding: 3px 0;
  color: #0000cc;
}

/*	querbeet: fusznoten
 --------------------------------------------*/
span.fusznote {
 font-size: 0.8em;
}
 
 /*	querbeet: Dialog Wurgel Platte
 --------------------------------------------*/
span.beiseite {
  font-size: 10pt;
  font-style: italic;
}
span.regie {
  font-size: 10pt;
}
td.spricht {
  text-align: right;
  font-weight: bold;
}
table#platte td {
  padding: 2px 0 2px 0;
}
span.woe-ein {
padding-left: 12px;
}

/*	querbeet: woertliche Rede in E-Mails an Du
	dito Wurgeltext, erster
 --------------------------------------------*/
span.woertlich {
  font-style: italic;
}

/*	querbeet: Wurgeloptik 
 --------------------------------------------*/
div#wurgeltext {
  padding: 0px 40px 15px 30px;
}

/*	querbeet: Dies-und-Das-Optik 
 --------------------------------------------*/
div#diesdastext {
  padding: 0px 40px 15px 30px;
}

/*	querbeet: Tucker 
 --------------------------------------------*/
div#tuckertext {
  padding: 0px 40px 15px 30px;
}

/*	querbeet: Briefoptik in E-Mails an Dich
	Briefpapierfarbe alt: ffff99
 --------------------------------------------*/
div#brief {
  background: #e1e1ff url(../grafik/higru-deko_brief-blau.jpg) repeat-y;
 /* border: 1px solid #999999; */
  padding: 15px 25px 15px 50px;
}
p#briefdatum {
  text-align: right;
}
p#briefanrede {
  text-align: center;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 1.1em;
}

/*	querbeet: Extras fuer diesen elenden
	Litfassartikel (was hat der mir
	schon Arbeit gemacht!!!!!!!!!!)
 --------------------------------------------*/
 div#tlz {
   background-color: #FFFF00;
   padding: 10px;
 }
 span.betont1 {
   font-weight: bold;
   color: #ff3300;
 }
 img.links {
   float: left;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 1px;
 }
 img.rechts {
   float: right;
   padding-right: 5px;
   padding-left: 5px;
   padding-top: 1px;
 }
 
 /*	querbeet: zentrierte Absaetze
 	in Gastrofront
 --------------------------------------------*/
 p.center {
   text-align: center;
 }
 p.gastrofront {
   text-align: center;
   font-weight: bold;
   padding: 9px 0 5px 0;
 }
 span#unbold {
   font-weight: normal;
   font-size: 0.9em;
 }
 
 /*	querbeet: Abstand vor Trennlinie
 	in Webseiten und Malerei
 --------------------------------------------*/
 hr {
   margin-top: 80px;
 }
 
 /*	Seite strecken
 --------------------------------------------*/
 p.streck-unten200 {
   padding-bottom: 200px;
 }
 
 p.streck-unten140 {
   padding-bottom: 140px;
 }
 
 p.streck-unten70 {
   padding-bottom: 70px;
 }
 
 p.streck-unten30 {
   padding-bottom: 30px;
 }
  
 /*	Abstandhalter-Absatz, fuer mehr
	Ueberssichtlichkeit
---------------------------------------------*/
p.abstand25-oben {
  padding-top: 25px;
}

p.abstand25-unten {
  padding-bottom: 25px;
}

/*	Fuer die animierten GIFs
---------------------------------------------*/
div.animgif-espresso {
  text-align: center;
}

p.espresso {
text-align: justify;
}

div.animgif {
  color: #000000;
  padding-bottom: 50px;
  text-align: center;
}

div#animgif-tuer {
  background: url(../grafik/animgif/kneipentuer_dunkel.jpg) repeat-y;
  padding-bottom: 100px;
}

div#animgif-tuer:hover,
div#animgif-tuer:focus {
  background: url(../grafik/animgif/kneipentuer_licht.jpg) repeat-y;
  padding-bottom: 100px;
}

/*	Lach, Schriftarten-<span>s gibt es nur im Weblog, heir muss ich noch
	welche basteln
	Aufbau des Namens: font-schriftname, aber in Kuerzeln
---------------------------------------------*/
span.font-tnr {
  font-family: "Times New Roman";
}

/*	Schriftgroeszen-<span>
---------------------------------------------*/
span.font-09 {
  font-size: 0.9em;
}

/*	Lautes Zong fuer Brief "Baustelle"
---------------------------------------------*/
span.laut {
  font-size: 3em;
  font-weight: bold;
  color: #990000;
  font-family: Bertram LET, Arial;
}