/* 
File:		einfach.css
Autor:		Alex Pelka
Datum:		08.10.14
Version:	0.14.7

Zweck:
css-Datei für www.alexpelka.de Homepage Version vom 13.08.14 
Die Schrift wurde auf sansserif eingestellt mit relativer Schriftgröße 
Basis für dieses css-File war einfach.css von Einfache-Hilfsmittel.de 
Dieses File ist für den neuen Auftritt 2014 geschrieben worden.


*/

body {background-color: #FFFFFF 

    }

* {font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size:100.01%;  /* für Firefox */
   font-style: normal;
   font-weight:normal;
   color: #000000;
   text-decoration: none;
   
    }


p {font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size:1em;
   font-style: normal;
   color: #000000;
   text-decoration: none;
   font-weight:normal; }
/*
p {font-family: Arial, Helvetica, sans-serif; font-size:12pt; font-style: normal; color: #000000;
	text-decoration: none }
*/
td {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:1em;
    font-style: normal;
    font-weight:normal;
    color: #000000;
    text-decoration: none; }


h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    position:absolute;
    top:-1000px;
    left:-1000px;
    font-weight: bold;
    color: #333366;
    text-decoration: none;

    }

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:1.8em;
    font-weight: bold;
    color: #333366;
    padding:0px;
    margin:0px;
    text-decoration: none }

h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:1.4em;
    font-weight: bold;
    color: #333366;
    padding:0px;
    margin:0px;
    text-decoration: none
}

h4 {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #333366;
    padding:0px;
    margin:0px;
    text-decoration: none }

h5 {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    color: #333366;
    padding:0px;
    margin:0px;
    text-decoration: none }

h6 {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    font-weight: bold;
    color: #333366;
    padding:0px;
    margin:0px;
    text-decoration: none }

ul { font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 1em;
     font-style: normal;
     font-weight:bold;
     color: #000000;
     text-decoration: none;
     list-style-type: disc; }

.horizontal {
	 list-style-type: none;
	 float:left;
	 }

ol { font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 1.0em;
     font-style: normal;
     font-weight:normal;
     color: #000000;
     text-decoration: none;
     list-style-type: decimal;
     /* line-height: 1.5em */
     }

A:link { color: blue; text-decoration:underline;}          /* unvisited link */
A:visited { color: blue; text-decoration:underline;}        /* visited links */
A:active { color: blue; text-decoration:underline;}        /* active links */
A:hover {color:#FF1234; text-decoration:underline; background-color:#FFFF55;
        border-color:red; border-width:2px;}
A:focus {color:#FF1234; text-decoration:underline; background-color:#FFFF55;
        border-color:red; border-width:2px;}
        
/* Jetzt kommen verschiedene Klassen für verschiedene Farben */
   .rot {color:#FF0000;}
   .blau {color:#0000FF;}
   .green {color:#00FF00;}
   .gelb {color:#FFFF00;}
   .white {color:#FFFFFF;}
   .turkis {color:#55FFFF;}
   .fett {font-weight:bold;}
   .whitebg {background-color:#FFF;}
   .graybg {background-color:#888;}

input, textarea {
     color:black;
     background-color:#FFFFFF;
     border-color:#888;
     border-width:2px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 1em;
     font-style: normal;
     font-weight:normal;
     color: #000000;
     text-decoration: none;
       }

input[type="text"]:hover, textarea:hover {
    color:red;
    background-color:#FFFF88;
    border-color:red;
    border-width:2px;
    }
input[type="reset"]:hover, input[type="submit"]:hover {
    color:red;
    background-color:#FFFF88;
    border-color:red;
    border-width:3px;
    }

input[type="text"]:focus, textarea:focus {
    color:red;
    background-color:#FFFF88;
    border-color:red;
    border-width:2px;
    }
input[type="reset"]:focus, input[type="submit"]:focus {
    color:red;
    background-color:#FFFF88;
    border-color:red;
    border-width:3px;
    }

    
    
/* Jetzt kommen die Container */
/* overflow ist für die scrollbars, padding ist für den Innenabstand vom Text
  margin wäre ein Abstand des Rahmens von aussen
  bei overflow kann man auch scroll angeben oder hidden


  */
div {border:0px;
     padding:0;
     margin:0;
    } /* bei border>0 solid#AAAAAA */


#logo
 {/*background-color:#EFEFEF;*/
  position:relative;
  top:0px; left:0px;
  width:140px;
  height:115px;
  overflow:auto;
  float:left;
  padding:auto;
 /* padding-left:0px;
  padding-right:0px;
  padding-top:5px;
  padding-bottom:0px;*/


  }
  
#oben
 {background-color:#DFDFDF;
  position:relative;
  top:0px; left:0px;
  width:800px;
  min-height:120px;
  overflow:auto;
  /* float:left; */
  padding-left:0px;
  padding-right:0px;
  padding-top:0px;
  padding-bottom:0px;
  margin:0;

  }
  
  
  
#header1
 {/*background-color:#FFA;     /* #8888ff; */
 /* position:absolute;
  top:0px;
  left:140px; */
  /*width:650px;*/
  margin-top:0;
  margin-bottom:0;
  margin-right:auto;
  margin-left:auto;
  /* border:2px solid black; *
 /* float:right; */
  height:40px; overflow:auto; padding-right:5px; padding-left:5px; /*5px*/
  padding-top:0px; padding-bottom:0px;}

#header2
 {/*background-color:#FFA;     /* #8888ff; */
  /* position:absolute;
  top:40px;
  left:140px; */
  width:650px;
  margin:0;
  /* float:right;   */
  height:40px; overflow:auto;
  padding-right:5px; padding-left:5px;
  padding-top:0px; padding-bottom:0px;}

#header3
 {/*background-color:#FFA;     /* #8888ff; */
  /* position:absolute;
  top:40px;
  left:140px; */
  width:650px;
  margin:0;
  /* float:right;   */
  height:40px; overflow:auto; padding-right:5px; padding-left:5px;
  padding-top:0px; padding-bottom:0px;}

  
#navigation
 {background-color:#BFA;     /* #88FF88;#DFA */
  /* position:absolute; */
  /* top:81px; */
  left:0px; width:790px;
  min-height:30px;
  overflow:auto;
  margin:0;
  padding-right:5px;
  padding-left:5px;
  padding-top:5px;
  padding-bottom:0;
  }

 #mainmenue
 {background-color:#AAA;  /* #DDDD88; */
  left:0px; width:790px;
  min-height:30px;
  overflow:auto;
  margin:0;
  margin-top:5px;
  padding-right:5px;
  padding-left:5px;
  padding-top:5px;
  padding-bottom:0;
  }
  
 #sondermenue
 {background-color:#777;  /* #DDDD88; */
  left:0px; width:790px;
  min-height:30px;
  overflow:auto;
  margin:0;
  margin-top:5px;
  padding-right:5px;
  padding-left:5px;
  padding-top:5px;
  padding-bottom:0;
  
  }

  
  
.reiter
 {background-color:white;  /* #DDDD88;  #FF5 */
  /*  left:0px;*/
  width:auto;
  height:auto;
  font-weight:normal;
  min-height:30px;
  overflow:auto;
  margin:0;
  border:1px;
  border-color:#000;
  padding-right:5px;
  padding-left:5px;
  padding-top:0px;
  padding-bottom:0;
  }

  .reiter2
 {background-color:#FDD;  /* #DDDD88;  #FF5 */
  /*  left:0px;*/
  font-weight:bold;
  border:3px solid #FA0;
  width:auto;
  height:auto;
  min-height:30px;
  overflow:auto;
  margin:0;
 /* border:1px; 
  border-color:#000; */
  padding-right:4px;
  padding-left:4px;
  padding-top:0px;
  padding-bottom:0;
  }
  
.grossa
{
/* font-size:1.1em; */
background-color:#5F5;
}  

  
  
.flussleft
 {
  /*  left:0px;*/
  width:auto;
  float:left;
  min-height:30px;
  overflow:auto;
  margin:0;
  border:0px;
  border-color:black;
  padding-right:5px;
  padding-left:0px;
  padding-top:0px;
  padding-bottom:5px;
  }

.flusscenter
 {
  /*  left:0px;*/
  width:auto;
  float:left;
  text-align:center;
  min-height:3px;
  overflow:auto;
  margin:0;
  border:0px;
  border-color:black;
  padding-right:0px;
  padding-left:0px;
  padding-top:0px;
  padding-bottom:0px;
  }



  .achtung
 {
  /*  left:0px;*/
  background-color:#FA0;
  color:#000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  width:auto;
  float:left;
  min-height:30px;
  overflow:auto;
  margin:5px;
  border:3px;
  border-color:red;
  padding-right:5px;
  padding-left:5px;
  padding-top:5px;
  padding-bottom:5px;
  }

  #mitte
 {background-color:#CCC;
 /* position:relative;
  top:0px; left:0px; */
  width:800px;
  min-height:420px;
  overflow:auto;
  /* float:left; */
  padding-left:0px;
  padding-right:0px;
  padding-top:0px;
  padding-bottom:0px;
  margin:0;

  } 
  

#secondmenue
 {background-color:#BFA;  /* #DDDD88; */
  left:0px; width:140px;
  min-height:300px;
  overflow:auto;
  float:left;
  margin:0;
  padding-right:0px;
  padding-left:5px;
  padding-top:5px;
  padding-bottom:0;
  }

#inhalt
 {background-color:#FFF;
  /* left:0px; */
  width:640px;
  min-height:300px;
  overflow:auto;
  margin:0;
  padding-right:5px;
  padding-left:5px;
  padding-top:0;
  padding-bottom:0;
  }

#lefti
 {background-color:#FFF;
  /* left:0px; */
  float:left;
  width:300px;
  min-height:300px;
  overflow:auto;
  margin:0;
  padding-right:0px;
  padding-left:5px;
  padding-top:0;
  padding-bottom:0;
  }

#righti
 {background-color:#FFF;
  /* left:0px; */
  float:right;
  width:300px;
  min-height:300px;
  overflow:auto;
  margin:0;
  padding-right:0px;
  padding-left:0px;
  padding-top:0;
  padding-bottom:0;
  }

#oishi /* zeigt eine Zeile im Inhalt */
 {background-color:#EEE;
  /* left:0px; */
  float:left;
  width:650px;
  /* min-height:300px;*/
  overflow:auto;
  margin:0;
  padding-right:0px;
  padding-left:5px;
  padding-top:0;
  padding-bottom:0;
  }

#datumi
 {background-color:#FF8;
  /* left:0px; */
  float:left;
  width:100px;
  /* height:auto; */
  overflow:auto;
  margin:0;
  padding-right:5px;
  padding-left:3px;
  padding-top:0;
  padding-bottom:0;
  margin-bottom:0;
  }

#autori
 {background-color:#F8F;
  /* left:0px; */
  float:left;
  width:100px;
  /* height:auto;  */
  overflow:auto;
  margin:0;
  padding-right:5px;
  padding-left:3px;
  padding-top:0;
  padding-bottom:0;
  margin-bottom:0;
  }

#pamphleti /* Inhalt des Artikels */
 {background-color:#8FF;
  /* left:0px; */
  float:left;
  width:420px;
  height:99%;
  /* overflow:auto;*/
  margin:0;
  padding-right:5px;
  padding-left:3px;
  padding-top:0;
  padding-bottom:0;
  margin-bottom:0;
  margin-top:0;
  border:0;
  }


#d
 {background-color:#FFFF88; position:absolute; top:81px; left:140px; width:600px;
  height:400px; overflow:auto; padding:5px;}

#kopf
 {background-color:#0F69AE; position:absolute; top:400px; left:300px; width:100px;
  height:20px; overflow:auto; padding:2px;}
#hell
 {background-color:#0F69AE; position:absolute; top:421px; left:300px; width:100px;
  height:200px; overflow:auto; padding:2px;}

#main
 {background-color:#FFF;
  width:800px;
  /*  height:80px; 
  overflow:auto; */
  padding-right:0;
  padding-top:0;
  padding-left:0;
  padding-bottom:0;
  margin-right:auto;
  margin-left:auto;
  margin-top:0;
  margin-bottom:0;
 }

#haupt
 {background-color:#FFF;
 /*  width:840px;
   height:80px; 
  overflow:auto; */
  /* padding-right:auto; */
  padding-top:0;
  /* padding-left:auto;
   padding-bottom:auto;*/
  margin-top:0;
 }

/* Für Links gibt es ein Mouseover mit Infobox
a:hover {
/* background-image:url(images/bild.gif); }
background-image:url(bild.gif); }

 Versuch eines Mouseover

#box {
position:absolute; top:0px; left:0px;
z-index:3;}

#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}

#box a span {display:none;}

#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}





/* -------------------------- Ende HOVER ------------------------
/* ----------- Definition von info ------------------
p,div .info{
font-family:Verdana;
font-size:1em;
color:#000000;
font-weight:normal;
}
div a {
display:block;
float:left;
margin-right:1.2em;
width:100px;
text-align:center;
}

a .info{visibility:hidden;}

a:hover .info{visibility:visible;}
/* -------------- Ende von info ---------------------*/

 /* will be continued */