/*
colors:
---------
main: #f31414  pixolini-rot (mittlerer farbwert aus head)
rot:  #f31414   f. alerts / del-button (war mal: #9f0000)
grün: #c4ddd7  (war mal: #CBE9C7)


----------------------------------------------------------------------------------------------------
allgemeine einstellungen ... diverse klassen 
----------------------------------------------------------------------------------------------------
*/

* { margin: 0; padding: 0; border: 0; }

html { height: 100%; }

body
{
   height: 100%;
   text-align: center;  /* für hor. zentrierung ie vor6*/
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 13px;
   line-height: 20px;
   color: #181818;
   background-color: #fdfdfd;
}


/*links*/

a { color: #f31414; text-decoration: none; }
a:hover { color: #5a5a5a; text-decoration: underline; }
a.fett { font-weight: bold; }
a.button, a.buttonbig
{
   display: inline-block;
   width: 10px;
   height: 14px;
   padding: 0 2px 0 2px;
   line-height: 14px;
   text-align: center;
   color: #8f8f8f;
   border: 1px solid #dcdcdc;
   border-radius: 4px; -webkit-border-radius: 4px;
}
a.button:hover, a.buttonbig:hover { color: #f31414; text-decoration: none; border-color: #181818; }
a.buttonakt, a.buttonbigakt
{
   display: inline-block;
   width: 10px;
   height: 14px;
   padding: 0 2px 0 2px;
   line-height: 14px;
   text-align: center;
   color: #f31414;
   border: 1px solid #dcdcdc;
   border-radius: 4px; -webkit-border-radius: 4px;
}
a.buttonakt:hover, a.buttonbigakt:hover { color: #f31414; text-decoration: none; border-color: #181818; }
a.buttonbig, a.buttonbigakt { width: auto; }

hr { height: 1px; margin: 6px 0 6px 0; background-color: #000000; }
*:first-child+html hr { margin: 0; }   /*ie7*/


/*überschriften*/
h1
{
   margin: 10px 0 10px 0; padding: 0 10px 0 10px; line-height: 25px; font-size: 14px; font-weight: bold; color: #ffffff; background: #a3a3a3;
   border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px;
   border-top-right-radius: 4px; -webkit-border-top-right-radius: 4px;
}
h2 { margin: 0 10px 10px 0; line-height: 25px; font-size: 14px; font-weight: normal; }
h3 { margin: 10px; line-height: 25px; font-size: 13px; font-weight: bold; }
h4 { margin: 0 0 5px 0; color: #8f8f8f; font-weight: bold;  border-bottom: 1px solid #dcdcdc; }

h1.anmeldung  { margin: 10px 0 0 0; line-height: 40px; font-size: 18px; font-weight: normal; color: #181818; background: transparent; }

h1 a { float: right; font-weight: normal;  margin: 2px 0 0 10px; padding: 0 6px 0 6px; font-size: 12px; line-height: 19px; color: #ffffff; border: 1px solid transparent; }
h1 a:hover { color: #ffffff; text-decoration: none;  border-color: #ffffff; border-radius: 4px; -webkit-border-radius: 4px; }
h1 a.akt { border-color: #ffffff; border-radius: 4px; -webkit-border-radius: 4px; }

h2.alert a { font-weight: bold; }


/*alles mögliche ;-) */
.alert { color: #f31414; }  /*für warnungen/meldungen*/
.zwischeninfo { margin: 0 0 10px 0; padding: 5px 10px 5px 0; border-top: 1px solid #181818; border-bottom: 1px solid #181818; }
.zwischeninfo h2 { margin: 0; }

.mittig { text-align: center; }
.texthell { color: #8f8f8f; }
.textdunkel { color: #181818; }
.textfarbe1 { color: #B4D8D3; }
.highlight { background-color: #c4ddd7; }
.fett { font-weight: bold; }
.schlank { font-weight: normal; }
.lh28 { line-height: 28px; }

/*statusfareben fuer selects tabelleneinträge etc*/
.inaktiv { color: #8f8f8f; }
.inaktivbg { background: #dcdcdc; }
.nurangemeldet { color: #00C070; }
.nurangemeldetbg { background: #c4ddd7; }

.versteckt { display: none; }
.fliesenli { float: left; }
.fliesenre { float: right; }
.klaeren { clear: both; }
.klaerenli { clear: left; }
.klaerenre { clear: right; }

img.tinytumb { float: left; height: 25px; margin: 0 10px 0 0; }

/*aufzaehlung der hauptnavilinks auf startseite*/
ul.linkliste1
{
   margin: 5px 5px 5px 10px;
   list-style: none;
}

/*tabelle für liste,einträge*/
table { margin: 10px 0 10px 10px; border: 1px solid #dcdcdc; }
th, td { padding: 3px 7px 3px 7px; text-align: left; vertical-align: top;}
th { font-weight: bold; color: #8f8f8f; }
th.sortakt { font-weight: bold; color: #000000; }
tr.inaktiv { background-color: #dcdcdc; }


/*formularkram*/
form { margin: 10px; position: relative; }
form br { clear: left; }
form span { font-size: 10px; line-height: 32px; }
form span.pflicht { font-size: 13px; line-height: 20px; }
form p { width: 600px; margin: 5px 15px 10px 167px; }
form p.trenner { width: 100%; margin: 5px 0 15px 0; border-bottom: 1px #dcdcdc solid; }
form img { width: 100px; margin: 5px 15px 5px 167px; }
form img.longimgli { width: 400px; margin: 0 10px 0 0;  float: left; }

fieldset
{
   /*width: 850px;  */
   margin: 0 0 20px 0;
   padding: 10px 10px 10px 10px;
   border: 1px solid #dcdcdc;
   /*-moz-border-radius: 20px; border-radius: 20px; -webkit-border-radius: 20px;*/
}
fieldset.nackich { padding: 0 11px 0 11px; border: 0; }
fieldset.ganznackich, form.ganznackich { margin: 0; padding: 0; border: 0; }
legend
{
   margin: 0 0 0 5px;
   padding: 1px 3px 1px 3px;
   font-weight: bold;
   /*border: 1px solid #dcdcdc;
   background-color: #dcdcdc; */
}

label
{
   width: 150px;
   height: 22px;
   margin: 5px;
   padding: 0 2px 0 0;
   float: left;
   text-align: right;
}
label.inaktiv, option.inaktiv { background-color: #dcdcdc; }
input, textarea, select
{
   width: 400px;
   height: 20px;
   margin: 5px 15px 5px 5px;
   padding: 1px;
   float: left;
   font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 13px;
   border: 1px solid #181818;
   border-radius: 4px; -webkit-border-radius: 4px;
}
/*input.pflicht { background: #FFFFaa; border: 2px solid #181818; } */
input.lang { width: 600px; }
input.kurz { width: 196px; }
input.knopf, input.delknopf { width: 200px; margin-right: 215px; font-weight: bold; background-color: #dcdcdc; }
input.delknopf { color: #f31414; border-color: #f31414; }
textarea { height: 70px; }
textarea.mittel { width: 600px; height: 150px; }
textarea.lang { width: 600px; height: 300px; }
select { height: 22px; width: 200px; margin-right: 215px; }
select.zweistellig { width: 45px; margin-right: 10px; }
select.vierstellig { width: 80px; margin-right: 15px; }
option { padding: 1px 3px 1px 3px; }
option.parent0 { font-weight: bold; }

/*special inputs fuer einzeilige formulare*/
form.einzeilig { margin: 0; }
select.einzeilig { width: 130px; margin: 0; }
input.einzeilig { width: 350px; margin: 0; }
input.einzeiligkurz { width: 70px; margin: 0; }
input.knopfeinzeilig { width: 70px; margin: 0; }
input.deleinzeilig { width: 50px; color: #f31414; border-color: #f31414; margin: 0; }
input.upfileeinzeilig { width: 350px; margin: 0 10px 0 0; }
label.einzeilig { width: auto; margin: 0 10px 0 0; }

input.knopf:hover, input.knopfeinzeilig:hover { color: #f31414; }

/*input fuer fileupload -> hoeher, sonstzuniedrig wegen betriebsystem-einfluss*/
input#upbild, input#upfile { height: 24px; }

/*z.b. select, sortiereihenfolge für listen*/
form.auswahl { margin: 0; float: right; }
select.auswahl { margin: 5px 0;  float: right;  }
label.auswahl { width: auto; margin: 5px; font-weight: bold; float: none; display: inline-block; }
input.knopfauswahl { width: 30px; height: 55px; margin: 5px 0 5px 5px; padding-bottom: 7px; font-size: 30px; background-color: #dcdcdc; float: right; }
input.knopfauswahl:hover { color: #f31414; }

/*enthält formular für katauswahl/sortierung auf listenseite*/
div#katwahl
{
   padding: 5px 0;
   text-align: right;
   border-bottom: 1px solid #dcdcdc;
}

/*innerhalb des buch formulars f. buch des monats -> oben rechts*/
div#bdm 
{
   position: absolute; top: 15px; right: 5px;
   width: 200px;     
}
div#bdm label { width: auto; margin: 5px 0; float: none; font-weight: bold; color: #8f8f8f; }
div#bdm input { width: 196px; margin: 5px 0; float: none; }
div#bdm span { font-size: 10px; line-height: 12px; }


div.box, p.box
{
   margin: 10px;
   padding: 5px;
   overflow: auto;
   border: 1px solid #dcdcdc;
}

div.bildbox
{
   min-width: 170px;
   height: 200px;
   margin: 10px;
   padding: 5px;
   float: left;
   text-align: center;
   border: 1px solid #dcdcdc;
}
div.bildbox img { height: 100px; }

/*div.bildbox form { background: #00DF00; } */
div.bildbox input { width: 50px; height: 16px; margin: 5px; }
div.bildbox input.lang { width: 160px; }
div.bildbox input.updateknopf { width: 18px; height: 20px; margin: 5px 0 5px 0; font-weight: bold; }
div.bildbox label
{
   width: 68px;
   height: 20px;
   margin: 5px 0 5px 0;
   float: left;
   text-align: right;
   font-weight: bold;  /*background: #FF7F7F; */
}
/*
----------------------------------------------------------------------------------------------------
haupteile, container ....
----------------------------------------------------------------------------------------------------
*/

/*kopfbereich logo etc --------------------------------------------------------------------------- */
div#header
{
   position: fixed;    /**/
   width: 100%;
   height: 32px;
   /*margin-bottom: 100px;  */
   line-height: 32px;
   text-align: right;
   color: #ffffff;
   border-bottom: 1px solid #dcdcdc;
   background-color: #181818;
}
*:first-child+html div#header { top: 0; left: 0; }   /* CSS-Hack IE7 -> sonst beginnt header nicht links am fensteranfang, warum auch immer -> ie halt ;-)*/

#header h1
{
   margin: 0 20px 0 0;
   line-height: 32px;
   font-size: 14px;
   float: left;
   background: transparent;
}
div#header p { float: right; margin: 0 10px 0 0; }
div#header a { color: #ffffff; }
div#header a:hover, div#header a:hover h1 { text-decoration: none; color: #f31414; }
div#header img.logo { float: left; margin: 3px 20px 0 10px;  }  /*logo links ... wenn bildhoehe != 25px muss margin angepasst werden!*/


/*umschliesst alle content-boxen (ausser header+footer) und begrenzt breite auf 1000px -> hor. zentriert*/
#wrapperall
{
   width: 1000px;
   /*height: 100%; */
   min-height: 400px;
   margin: 0 auto 0 auto;
   padding: 33px 0 0 0;
   text-align: left;  /* damit auch im ie content wieder links ist*/
   /* background: #80FF00;#fdfdfd*/
}


/*navigation oben menueleiste -------------------------------------------------------------------- */
/*navi1*/
div#wrappernavi1
{
   /*width: 950px;*/
   margin: 0 0 10px 0;
   text-align: center;
  /* background-color: #00FF18;  height: 90px;*/
}

div#wrappernavi1 ul
{
   /*width: 948px;*/
   height: 30px;
   padding: 0 1px 1px 1px;
   list-style: none;
   background-color: #c4ddd7;   /*#a3a3a3*/
   border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px; -webkit-border-bottom-right-radius: 4px;
}
div#wrappernavi1 ul li
{

   margin: 4px;
   line-height: 22px;
   text-align: center;
   font-size: 15px;
   font-weight: bold;
   float: left;    /*    display: inline;
   background-color: #ffffff;             */
}
div#wrappernavi1 ul li.trenn { margin: 0 1px 1px 13px;  }
div#wrappernavi1 ul li a
{
   display: block;
   width: 115px;
   color: #181818;
   background-color: #ffffff;
   border: 1px solid #181818;
   border-radius: 4px; -webkit-border-radius: 4px;
}
div#wrappernavi1 ul li a:hover
{
   text-decoration: none;
   color: #f31414;
  /* border-color: #181818;  background-color: #ffffff;*/
}
div#wrappernavi1 ul li a.akt
{
   color: #f31414;
   border: 1px solid #181818;
   border-radius: 4px; -webkit-border-radius: 4px;
}
div#wrappernavi1 ul li a.akt:hover
{
   color: #dcdcdc;
}

/*navi2 -------------------------------------------------------------- */
ul.navi2
{
   /*margin: 5px 5px 5px 10px; */
   float: left;
   list-style: none; width: 550px; height: 24px; margin-left: 1px;
}
ul.navi2 li
{
   margin: 0 4px 1px 4px;
   text-align: center;
   font-size: 15px;
   float: left;
}
ul.navi2 li.spacer { border: 0; width: 20px; }
ul.navi2 li a { display: block; width: 115px; color: #181818; border: 1px solid #ffffff; border-radius: 4px; -webkit-border-radius: 4px; }
ul.navi2 li a:hover { text-decoration: none; color: #f31414; border-color: #181818; }
ul.navi2 li a.navi2akt { border: 1px solid #181818; color: #f31414; border-radius: 4px; -webkit-border-radius: 4px; }
ul.navi2 li a.navi2akt:hover { text-decoration: none; color: #dcdcdc; }

/*ende navi*/


/*hauptteil enthält inhalte/infos der einzelnen seiten*/
div#hauptteil
{
   min-height: 400px;
   padding: 10px 0 35px 0;
   /*background-color: #FFE7FF;*/
}
div#hauptteil.anmeldung { width: 630px; margin-left: 100px; }

div#hauptteil ul { list-style: none; margin: 3px; }


/*katmonster -> oberste ul der kategorie-baum-darstellung*/
#katmonster { width: 600px; overflow: auto; /*border: 1px solid #dcdcdc;*/ }

/*katneubox -> formular zur erstellung neue ktegorie*/
#katneubox { display: none; float: right; width: 320px; margin: 3px 0 20px 20px; }

#katmonster li { padding-top: 2px; padding-bottom: 2px; white-space:nowrap; }
#katmonster .unterkat { margin-left: 25px; }
#katmonster .parent0 { padding: 0 7px 0 0; font-weight: bold; }
#katmonster .sortnr { padding: 0 3px 0 3px; color: #8f8f8f; }
#katmonster .katedit { width: 300px; padding: 0 0 0 3px; background: #cdcdcd; }/*z.z. nicht verwendet*/

#katmonster a.editlink { padding: 0 3px 0 3px; color: #8f8f8f; font-weight: bold; border-radius: 4px; -webkit-border-radius: 4px; }  /*link-farben bei aenderung auch in mainjs anpassen*/
#katmonster a.editlink:hover { color: #f31414; text-decoration: none; padding: 0 2px 0 2px; border: 1px solid #dcdcdc; }
#katmonster a.editlinkakt { padding: 0 3px 0 3px;  color: #f31414; font-weight: bold; border-radius: 4px; -webkit-border-radius: 4px; }
#katmonster a.editlinkakt:hover { text-decoration: none; padding: 0 2px 0 2px; border: 1px solid #dcdcdc; }

#katmonster form, #katmonster .infobox    /*z.b. formular zur aenderung v kat-eintraegen*/
{
   display: none;
   width: 300px;
   margin: 0 10px 5px 15px;
   padding: 5px;
   overflow: auto;
   border: 1px solid #dcdcdc;
}
#katmonster .infobox { padding: 2px 5px 2px 5px;  font-size: 10px; }
#katmonster form label, #katneubox label
{
   width: 80px;
   height: 20px;
   margin: 2px;
   padding: 0 2px 0 0;
   float: left;
   text-align: right;
}
#katmonster form input, #katmonster form select, #katneubox input, #katneubox select
{
   width: 196px;
   height: 16px;
   margin: 2px;
   padding: 1px;
   font-size: 12px;
}
#katmonster form input.knopf, #katmonster form select, #katneubox input.knopf, #katneubox select
{ width: 200px; height: 18px; }


/*katbaum (abgespecktes katmonster ;-) alle kats als baumansicht*/
div#katbaum
{
    float: left;
    width: 360px;
    height: auto;
    min-height: 200px;
    margin: 10px 20px 10px 0;
    overflow: auto;
     border-right: 1px solid #dcdcdc; /**/
}
div#katbaum  #katmonster { width: auto; }                                                                                      /*
div#katbaum li.willichkat { background: url(verlauf_bg-li2.png) no-repeat; border-radius: 4px; -webkit-border-radius: 4px; }    padding-left: 5px;
div#katbaum li.willichkat { list-style-type: disc; }                                                                                               */
div#katbaum li a.willichkata { /*text-decoration: underline;*/ color: #f31414; }
/*div#katbaum li.willichkat a.button { background: #ffffff; }*//*  border-color: #f31414;*/
/*div#katbaum li.willichkat a.parent0 { color: #ffffff; }  */
div#katbaum a.parent0 { color: #181818; }


/* ----------------------------------------------------------------------------------- */
/*footer -> abschluss nach unten, enthät zusatzinfos*/
div#footer, div#footerbutton
{
   position: fixed; bottom: 0;
   height: 30px;
   width: 100%;
   line-height: 28px;
   text-align: left;
   font-size: 10px;
   color: #8f8f8f;
   border-top: 1px solid #181818;/**/
   background-color: #c4ddd7;/*#181818 #a3a3a3  #FFE7FF*/
}
div#footerbutton { left: 0; width: 30px; border-right: 1px solid #181818; }
div#footer a.buttonbig, div#footerbutton a.buttonbig { min-width: 10px; margin: 6px 0 0 10px; background-color: #ffffff; border-color: #181818; }

div#footer ul { display: none; list-style: none; float: left; margin: 6px 0 0 0; }
div#footer ul li { float: left; margin-left: 10px; }
div#footer ul li a
{
   display: block;
   text-decoration: none;
   height: 14px;
   padding: 0 2px 0 2px;
   line-height: 14px;
   text-align: center;
   color: #8f8f8f;
   border: 1px solid #181818;
   border-radius: 4px; -webkit-border-radius: 4px;
}
div#footer ul li a:hover, div#footer ul li a.akt { color: #f31414; }
div#footer a:hover { border-color: #f31414; }
div#footer p.pixolini  { float: right; margin-right: 15px; } /*display: inline-block;*/
div#footer p.pixolini img { margin: 4px 0 0 7px; float:right; }


/*vorschau fuer newsletter*/
div#vorschau { padding: 10px; font-size: 12px; line-height: 20px; border: 1px solid #dcdcdc; }
   div#vorschau p { margin: 0 0 5px 0; }
   div#vorschau h1 { margin: 0 0 20px 0; padding: 0 0 5px; line-height: 20px; font-size: 14px; font-weight: bold; color: #181818; background: transparent; border-bottom: 1px solid black; }

   div#vorschau a { color: #e50102; text-decoration: none; }
   div#vorschau a:hover { text-decoration: underline; }
   div#vorschau img.picre { margin: 0 0 15px 15px; float: right; }
   div#vorschau .randunten { border-bottom: 1px solid black; }
   div#vorschau #vwrapper
   {
      width: 700px;
      margin: 0 auto 0 auto;
      color: black;
      background: white;
   }
   div#vorschau #vheader
   {
      width: 650px;
      min-height: 50px;
      margin: 0 25px 0 25px;
      text-align: center;
   }
   div#vorschau #vmitte
   {
      width: 650px;
      margin: 0 25px 0 25px;
   }
   div#vorschau #vfooter
   {
      width: 620px;
      margin: 25px 25px 0 25px;
      padding: 15px;
      text-align: center;
      border-top: 1px solid black;
   }
/*ende newsletter-kram*/