/* Browser-Defaults zurücksetzen mit Universalselektor */
* {margin: 0px; padding: 0px; border: 0px;}
/* Richard's Trick */
html { height: 100.5%; font-size: 62.5%; background-color:#666;}
/*  */
body { background-color:#DEE; 
	color:#000000; 
	font-family: sans-serif;
	font-size: 10px; 
	max-width:900px;
      }
h1, h2, h3, h4, h5, h6      {clear: both; margin: 0.6em 0em 0.4em 0em; text-align: center;}
h1.li, h2.li, h3.li, h4.li  {text-align: left; margin-left: 10px;}

sup {font-weight: normal;}

div {border: 1px solid #555; 
      padding:0.5em; 
      margin:2px 0px 0px 2px;
      background-color: #FFF;
      overflow:hidden; }
      
h1#titel   {position:absolute; top:7px; left:175px; font-size: 2.6em; text-align: left;}
div#kopf   {background-image:url(hintergrund1.png); background-repeat:repeat; 
	    overflow:hidden;}
div#links  {float:left; width:180px;                     }
div#mitte  {float:left; max-width:600px;  padding: 10px; }
div#rechts {float:left; width:180px; font-size: 1.0em;  }
div#fuss   {background-image:url(hintergrund2.png); background-repeat:no-repeat; 
	    clear:both; margin-top:2px; border-width: 1px 0px 0px 0px;  }

div.menu             {width:98%; border: none; padding: 0px; margin: 0px; 
		      text-align:center; background-color: transparent;}
div.menu div.menupkt {float:left; min-width:120px; 
		      padding:0.25em; margin: 2px 2px 0px 0px; 
		      border-width: 2px 2px 2px 2px; border-color: #999 #555 #555 #999;
		      font-size:1.4em; background-color: #ccf; color: #000; opacity: 1.0;}
		      
div.menupkt {float:left; min-width:120px; max-height: 1.6em; text-align:center;
	      padding:0.25em; margin: 2px 2px 0px 0px; 
	      border-width: 2px 2px 2px 2px; border-color: #999 #555 #555 #999;
	      font-size:1.4em; background-color: #ccf; color: #000; overflow: visible;}

.menupkt a        {color:#000; text-decoration:none; font-size:1.5em;}
.menupkt a:hover  {color:#FF0; text-decoration:underline;}

div.menu2    {width:97%; border:0px; margin-bottom:2px;}
div.menupkt2 {width:90%; margin-top:2px; padding:0.5em; font-size:1.5em; text-align:left; background-color:#0F0;}
ul.menu    {background-color:#FFF; font-size:1.5em;text-align:center;}
ul.menu li {margin: 5px; padding: 0.1em 0.3em 0.1em 0.3em;
	    background-color:#222; min-width:150px; border: 1px solid #FFF; 
	    border-bottom:0px; color:#000; 
	    display: inline; list-style-type: none;}

div.spalte  {float:left; width:30%; border:0px; padding:5px; font-size: 1.6em; background-color:#FFF; text-align:justify;}


div.start    {font-size: 1.5em;}
div.classic  {margin: 0px; padding:2px; border: 1px solid #000; background-color: #ffa;}
div.border   {margin: 0px; padding:2px; border: 1px solid #000; background-color: inherit;}
div.seperate {margin: 0px 0px 0px 5px; padding:1px; border: 1px solid #999; background-color: #999;}
div.wrapper  {margin: 0px; padding: 0px; border: 0px; background-color: inherit;}
div.hinweis  {clear:both; margin: 8px; padding: 0px 5px 10px 5px; font-size: 1.2em; border: 1px solid #f55;}

div.li  {float:left;}
div.re  {float:right;}
table.li  {float:left;}
table.re  {float:right;}

img {border:1px solid #555; padding:0px; margin:2px;}
img.inside {border:0px; width:100%; padding:0px; margin:0px;}
img.re {float:right; border:0px; width:150px; padding:2px; margin:0px 0px 0px 5px;}
img.li {float:left;  border:0px; width:150px; padding:2px; margin:0px 5px 0px 0px;}
img#logo   {  top:5px; left: 5px; width: 150px;}


ul {margin: 3px 4px 6px 12px; padding: 4px;}
li {padding-bottom: 5px;}

p {margin:0.5em 0em 0em 0em;}

.c     {text-align:center;}
.pagebreak { page-break-inside: avoid; page-break-before: always; }
.noprint   {display: none;}

.p90  {width: 90%;}
.p95  {width: 95%;}
.p100 {width: 100%;}
.w75  {width:  75px;}
.w100 {width: 100px;}
.w150 {width: 150px;}
.w220 {width: 220px;}
.w300 {width: 300px;}

table        {border-collapse: collapse; width: 95%; margin: auto;}
table td     {border-bottom: 2px solid #999; height: 25px; font-size: 1.2em; padding: 5px;}
table td.li  {text-align: left;  padding-left:  5px; }
table td.re  {text-align: right; padding-right: 5px; }
table tr     {font-size: 1.0em;}
table tr.sum {font-weight: bold;}

table.legende    {margin: 10px 0px; border: 0px solid #000; text-align: left; font-size: 0.8em;}
table.legende caption {text-align: left; font-size: 1em;}
table.legende td {border: 0px; padding: 0px 5px; font-size: 0.8em;}

/*Fachkraftstunden Rechner*/
  table.kifoeg {table-layout: fixed;  border: 0px solid #f55; margin-bottom: 0px;
                            border-collapse: collapse; text-align: center;}
  table.kifoeg col.fkr_in1    {width: 28%;}
  table.kifoeg col.fkr_in2    {width: 12%;}
  table.kifoeg col.fkr_in3    {width: 12%;}
  table.kifoeg col.fkr_in4    {width: 24%;}
  table.kifoeg col.fkr_in5    {width: 12%;}
  table.kifoeg col.fkr_in5    {width: 12%;}
  
  table.kifoeg col.laf_in1    {width: 44%;}
  table.kifoeg col.laf_in2    {width:  5%;}
  table.kifoeg col.laf_in3    {width: 15%;}
  table.kifoeg col.laf_in4    {width: 30%;}
  table.kifoeg col.laf_in5    {width: 15%;}
  
  table.kifoeg col.btg_in1    {width: 40%;}
  table.kifoeg col.btg_in2    {width:  8%;}
  table.kifoeg col.btg_in3    {width: 14%;}
  table.kifoeg col.btg_in4    {width: 18%;}
  table.kifoeg col.btg_in5    {width: 20%;}
  
  table.kifoeg col.kos_in1    {width: 40%;}
  table.kifoeg col.kos_in2    {width: 10%;}
  table.kifoeg col.kos_in3    {width: 10%;}
  table.kifoeg col.kos_in4    {width: 15%;}
  table.kifoeg col.kos_in5    {width: 18%;}
  
  table.kifoeg tr    {border-top: 2px solid #999;}
  table.kifoeg th    {height: 20px; font-size: 12px; padding: 5px 0px;}
  table.kifoeg th.li, table.kifoeg td.li {text-align: left;}
  table.kifoeg th.re, table.kifoeg td.re {text-align: right;}
  table.kifoeg td {border-bottom: 2px solid #999; height: 25px; font-size: 1.3em; padding: 5px;}
                            
/*Gruppengröße Rechner*/

  table.kfg_gruppengroesse {table-layout: fixed;  border: 0px solid #f55; margin-bottom: 0px;
                            border-collapse: collapse; text-align: left;}
  table.kfg_gruppengroesse col.grp_in1    {width: 25%;}
  table.kfg_gruppengroesse col.grp_in2    {width: 12%;}
  table.kfg_gruppengroesse col.grp_in3    {width: 12%;}
  table.kfg_gruppengroesse col.grp_in4    {width: 25%;}
  table.kfg_gruppengroesse col.grp_in5    {width: 15%;}
  table.kfg_gruppengroesse tr {border-top: 2px solid #999;}
  table.kfg_gruppengroesse tr.sum {font-weight: bold;}
  table.kfg_gruppengroesse th {height: 20px; font-size: 1em;}
  table.kfg_gruppengroesse th.re {text-align: right; padding-right: 5px;}
  table.kfg_gruppengroesse td {border-bottom: 2px solid #999; height: 25px; font-size: 1.3em; padding: 5px;}
  table.kfg_gruppengroesse td.li {text-align: left;  padding-left:  5px; }
  table.kfg_gruppengroesse td.re {text-align: right; padding-right: 5px; }
  table.kfg_gruppengroesse td#out_anzahl_summe  {text-align: center; padding-right: 4px; font-size: 1.4em;}
  table.kfg_gruppengroesse td#out_anzahl_integration_summe {text-align: right; padding-right: 10px; font-size: 1.4em;}
  input[type=text]   {width: 45px; text-align: center; font-size: 1.2em; }
  input[type=number] {direction: rtl;  width: 3.5em; font-size: 1.1em; background-color: #ff9;}
  input[type=number]#in_zeit_virtuell_u3,
  input[type=number]#in_zeit_virtuell {width: 3.5em;}
  input[type=number]#in_stundensatz,
  input[type=number]#in_prozent_ausfallzeiten, input[type=number]#in_prozent_leitungsstunden,
  input[type=number]#in_prozent_mittelb_paedagog_arbeit {width: 3.9em;}
  input[type=number].beitrag {width: 4em;}
/*   input::-webkit-inner-spin-button { margin-right: 0px; } */
  select      {height: 1.6em; margin: 4px; padding: 0.0em 0.4em; font-size: 1.1em; font-weight: bold; background-color: #ff9;}
  
  button {background-color: #ccf; color: #000; margin:5px; padding:0em 0.3em; height: 2em;
		 border-top:    2px solid #999; 
                 border-right:  2px solid #555; 
                 border-bottom: 2px solid #666; 
                 border-left:   2px solid #999;
                 cursor: pointer;}
                 
  .out {font-weight: bold; font-size: 1.2em;}
  
  div#warnung {position:absolute; left: 20px; top: 75px; border: 1px solid rgba(255,10,10,0.9); 
               font-size: 2em; text-align: center; width: 280px; margin:auto; 
               background-color: rgba(255,144,144,0.9); display: none;}
               
  table.gg          {float: left; max-width: 280px; border-collapse: collapse; text-align: center; border: 1px solid #000; margin: 5px;}
  table.gg caption  {font-weight: bold; font-size: 1em;}
  table.gg colgroup {min-width: 45px; }
  table.gg tr    {border-top: 1px solid #000;}
  table.gg tr th {padding: 5px 0px; font-size: 10px; width: 20px;}
  table.gg tr td {padding: 2px 0px; font-size: 12px;}
  table#table_gg_u3_0 {width: 150px; } 
  table#table_gg_u3_1, 
  table#table_gg_u3_2 {width: 200px; }
  
  table#table_gg_ab3  {width: 300px; }
  
  table#editor-gg {position:fixed; left:450px; bottom:25px; width: 150px; border: 2px solid #00f; 
                   text-align: center; background-color: #fff; display: none;}
  table#editor-gg th,
  table#editor-gg td {border: 1px solid #999; font-size: 1em; padding: 0.3em; height: 1.5em; width:50px;}
  table#editor-gg td input {width: 4em; height: 2em;}

/*Medienabhängige Styles*/

@media(max-width: 60.0em){
* {margin: 0px;}
div#kopf   {border: none;}
img#logo   {width: 100px;}
h1#titel   {left: 120px; font-size: 1.5em;}
div.menu div.menupkt  {font-size: 1.0em;}
div.menupkt  {font-size: 1.0em;}
div#links  {float: none; width: 100%; margin: 0px; border-width: 1px 0px 0px 0px;}
div#mitte  {float: none; width: 100%; margin: 0px; border-width: 1px 0px 0px 0px;}
div#rechts {display: none;}
div.spalte {float: none; width: 90%; margin: 0px;}
}

@media(min-width: 60.1em) {
body       { max-width:860px;}
div#mitte  {float:left; width:800px; min-height:200px;}
}

@media print 
{	
  html, body {background-color: #fff;}
  div#kopf, div#fuss    {display: none;}
  div#links, div#rechts {display: none;}
  div#mitte             {border: 0px; color: #000;}
  a, button   {display: none;}
  
  div.seperate, tr.controls  {display: none;}
  .pagebreak { page-break-inside: avoid; page-break-before: always; }
  .noprint   { display: none; }
  .print   { display: block; }
  
}