/* Platz um Elemente im Dokument */
body, h1,h2,h3, .label, p, ul, ol, li, button,input,select, img,
.menuWidget li, .textFields>span li
  { margin                : 0px;
    padding               : 0px;
  }
.widget, .textFields, .menuField
  { margin                : 10px 10px 0px 10px;
    padding               : 10px;
  }
.menuField
  { padding               : 5px; /* Memue-Eintraege haben 5px Innenrabstand */
  }
#DSImgPos, #TFTab button, #TFTab select
  { margin                : 5px;
    padding               : 2px;
  }
#copyright
  { margin                : 4px;
  }
.divKalenderHead
  { margin                : 0px 0px 5px 0px;
  }
img.left
  { margin                : 3px 10px 3px 0px;
  }
img.right
  { margin                : 3px 0px 3px 10px;
  }
.widget * button.anecken
  { margin-right          : -11px;
    margin-top            : -19px;
  }
.widget>span 
  { padding-top           : 6pt;
    padding-bottom        : 3pt;
  }
h2
  { margin-top            : 15px;
  }
h2,h3
  { margin-bottom         : 5px;
  }
h1>button
  { margin-left           : 10px;
  }
li
  { margin-left           : 20px;
  }
.menuWidget li
  { margin                : 5px;
  } 
.contents
  { padding               : 0px 5px;
  }
p, .contents ul
  { padding-bottom        : 5pt;
  }
input
  { padding               : 2px;
  }
select
  { padding               : 1px 2px;
  }
.notizzettel
  { padding               : 10px;
  }
.notizzettel span strong, .td a.block, .td .alignRight, .td span
  { padding               : 5px;
  }
#divKopfAdress
  { padding               : 13px 10px 0px 55px;
  }
#divKopfSpruch 
  { padding               : 13px 55px 0px 10px;
  }
.cellKalender span, .cellKalender a
  { padding               : 0px 3px;
  }
.menuWidget li a
  { padding               : 2px 5px;
  } 
/* Tabellenlayout aus DIV-Elementen allgemin */
.table
  { display               : table;
  }
.tr
  { display               : table-row;
  }
.td
  { display               : table-cell;
  }
.tabKalender
  { empty-cells           : show;
    border-collapse       : collapse;
  }

/* Anzeige und Positionierung von Elementen */
.widgets, .menu, .widget, .textFields, .menuField, .divWidgetCont, .contents, 
.textFields span, .widget>span, .cellKalender span, .cellKalender a,
.notizzettel span strong, .menuWidget li a, .block
  { display               : block;
  }
.notizzettel, #TFCtrl, li.navH2, .divTFCont
  { display               : inline-block; 
  }
.textFields>span ul
  { display               : inline; 
  }
button.hidden
  { display               : none;
  }
  
#wrapper, #overflower,#borderer, #imgPanorama, #copyright, #vali, #imgKopfLogo,
#divKopfAdress,#divKopfSpruch,#imgKopfWink, #imgKopfTitel, #imgKopfSchat,
#TFbg,#TFTab,#TFCtrl img
  { position              : absolute;
  }
#divKopfAdress, #divKopfSpruch, #wrapper, .textFields, #overflower, 
.menuWidget li a
  { overflow              : hidden;
  }
.widgets, .menu, .contents
  { overflow              : auto;
  }

/* Groessenangaben */
#divKopfAdress, #divKopfSpruch 
  { height                : 58px;
    min-height            : 58px; 
    max-height            : 58px;
  }
#divKopf
  { height                : 80px;
  }
#imgPanorama, #imgKopfSchat
  { width                 : 100%;
  }
#imgPanorama
  { height                : 80px;
  }
#imgKopfLogo   
  { width                 : 50px;
    height                : 70px;
  }
#imgKopfTitel
  { width                 : 400px;
    height                : 65px;
  }
#imgKopfWink
  { width                 : 50px;
    height                : 62px;
  }
#imgKopfSchat
  { height                : 5px;
  }
.widget * button.anecken
  { width                 : 20px;
    min-height            : 20px;
  }
.notizzettel
  { width                 : 25%; 
    min-width             : 196px;
  }
#borderer, #divKopf, #TFbg, #TFTab
  { width                 : 100%;
  }
.divTFCont
  { min-width             : 400px;
  }
.divTFCont .table, .divTFCont .td
  { width                 : auto;
  }
.menuWidget li a
  { width                 : inherit;
  } 
img.left, img.right
  { width                 : 200px;
  }
#borderer, .widgets, .menu, .divWidgetCont, .contents,
#TFbg, #TFTab, #TFTab .td
  { height                : 100%;
  }
.textFields
  { height                : 90%;
  }
h1>button, #TFTab button
  { min-width             : 2em;
    height                : 2em;
  }
.imgWidgetDS
  { width                 : 40px;
    height                : 30px;
  }
/* Schrift-Vormatvorlagen */
p, div, h1,h2,h3,
input, button, select, .label, span, em, ul.label,
.menuWidget li a
  { line-height           : 120%;
    font-family           : Arial, Helvetica, Sans-Serif;
    font-style            : normal;
    font-weight           : normal;
    color                 : Navy;
  }
h1
  { line-height           : 1.5em; }
button,input,select
  { font-size             : 100%; /* variable Groesse fuer Eingabelemente */
  }
h1>button
  { font-size             : small;
  }
h2>button
  { font-size             : 65%;
  }
h1>button, .widget>span 
  { font-weight           : bold;
  }
.widget * button.anecken
  { line-height           : 8px;
  }
font                      /* nur zur Hervorhebung von Suchergebnissen */
  { color                 : #ff6600;
  }
.notizzettel span a       /* Infotext auf Notizzettel */
  { font                  : 110%/110% script, comic sans ms, comic !important;
    color                 : #0000cc;
  }
div.evTitle, div.evName, .cellKalender span, .cellKalender a, 
.td .block b, .td .block small
  { color                 : Navy;
  }
div.evTitle               /* Vereinstitel */
  { font                  : italic normal 100%/120% times, serif;
  }
div.evName                /* Vereinsname */
  { font                  : normal bold 140%/160% times, serif;
  }
#divKopfAdress *
  { font                  : normal bold 12px/16px sans-serif;
  }
#divKopfSpruch span
  { font                  : italic bold 14px/16px "comic sans ms";
  }
#divKopfSpruch small
  { font-size             : 70%;
  }
button
  { font-weight           : bold;
    cursor                : default;
  }
.menuWidget li a
  { font-weight           : bold;
  }
.notizzettel span strong
  { font-size             : 120%;
    text-decoration       : underline;
  }
a
  { color                 : Blue;
    text-decoration       : none;
  }
#copyright *
  { color                 : #ffffff;
  }
h1,h2,h3, .widget>span    /* Ueberschriften */
  { color                 : #770044;
  }
.cellKalenderAnd span
  { color                 : Grey;
  }
.cellKalenderHeute span, .cellKalenderHeute a,
#DSImgPos span            /* Diashow Infoschrift */
  { color                 : white;
  }

/* Ausrichtung / Orientierung */
#wrapper
  { top                   : 15px;
    right                 : 25px;
    bottom                : 15px; 
    left                  : 25px;
  }
#overflower
  { vertical-align        : top;
    top                   : 85px;
    right                 : 0px;
    bottom                : 70px; 
    left                  : 0px;
  }
.left, .menuField,   /* , Menue */
img.left
  { float                 : left;
  }
.right, .widgets,    /* , Widgets */
img.right
  { float                 : right;
  }
p
  { text-align            : justify;
  }
.widget>span, .divKalenderHead, #TFTab>.tr>.td
  { text-align            : center;
  }
.alignLeft, #TFCtrl
  { text-align            : left;
  }
.alignRight, #divKopfSpruch, .cellKalender span, .cellKalender a
  { text-align            : right;
  }
button *, select, input, #TFTab .td
  { vertical-align        : middle;
  }
.notizzettel
  { vertical-align        : bottom; 
  }
#imgPanorama, #copyright
  { bottom                : 0px;
  }
#vali
  { bottom                : 40px;
    left                  : 6%;
  }
#imgKopfLogo   
  { top                   : 6px;
    left                  : 6px;
  }
#divKopfAdress 
  { top                   : 5px;
    left                  : 5px; 
  }
#imgKopfTitel
  { top                   : 15px;
    left                  : 200px;
  }
#divKopfSpruch
  { top                   : 5px;
    right                 : 5px;
  }
#imgKopfWink
  { top                   : 10px;
    right                 : 6px;
  }
#imgKopfSchat
  { top                   : 81px;
    left                  : 0px;
  }
  
/* Hintergrund und Rahmen */
body 
  { background            : #2156b5;
  }
#TFbg
  { background            : black;
  }
.widget, .textFields, .menuField
  { background            : #a0d0ff;
  }
.menuField ul, .cellKalender span, .cellKalender a, .cellKalenderAnd span,
input, select   /* Hintergrund Eingabefelder */
  { background            : transparent;
  }
#wrapper,                 /* = gerahmter Gesamt-Inhalt der Seite */
button, .menuWidget li a, .cellKalender a, font
  { background            : #77bbff;
  }
.cellKalenderHeute span, .cellKalenderHeute a
  { background            : orange;
  }
.divWidgetCont, .contents, .divTFCont /* Textfelder */
  { background            : #cbe6ff;
    border                : 5px solid transparent;
  }
#divKopf                  /* Kopfzeile */
  { background            : #76c876;
    border-bottom         : 1px solid white;
  }
#divKopfAdress, #divKopfSpruch /* Adresse und Spruch in der Kopfzeile */
  { background            : #aaeeaa;
  }
.notizzettel              /* Notizzettel */
  { background            : #f6ee97;
  }
font
  { background            : yellow;
  }
#wrapper,                 /* = gerahmter Gesamt-Inhalt der Seite */
#TFCtrl img               /* Diashow-Bilder */
  { border                : 1px solid white;
  }
hr
  { border                : 1px dotted Navy;
    border-color          : Navy transparent transparent transparent;
  }  
.widget, .textFields, .menuField,
.widget * button.anecken, div.label>img,p>img
  { border                : 1px solid #8888dd;
  }
button, input, select, .menuWidget li a, a>img, .notizzettel
  { border                : 1px solid #8888dd;
  }
.textFields span, .cellKalender
  { border                : 1px solid transparent;
  }
button img                /* Bilder auf Knoepfen */
  { border                : 0px solid !important;
  }
.notizzettel
  { border                : 1px solid #333333; 
  }
  
#wrapper,#imgPanorama, .widget, .textFields, .menuField,
.widget * button.anecken,img.left,img.right,#TFCtrl img
  { -moz-border-radius              : 10px;
    -webkit-border-radius           : 10px;
    border-radius                   : 10px;
  }
button, input, select, .menuWidget li a, a>img, .notizzettel
  { -moz-border-radius              : 5px;
    -webkit-border-radius           : 5px;
    border-radius                   : 5px;
  }
#divKopf
  { -webkit-border-top-left-radius  : 10px;
    border-top-left-radius          : 10px;
    -webkit-border-top-right-radius : 10px;
    border-top-right-radius         : 10px;
  }
#divKopfAdress
  { -moz-border-radius-topleft      : 5px;
    -webkit-border-top-left-radius  : 5px;
    border-top-left-radius          : 5px;
  }
#divKopfSpruch
  { -moz-border-radius-topright     : 5px;
    -webkit-border-top-right-radius : 5px;
    border-top-right-radius         : 5px;
  }
.notizzettel
  { box-shadow            : 0 10px 50px -25px rgba(255,0,0,1) inset,  /* oberer schatten */
                            0 -10px 50px -25px rgba(0,0,0,.9) inset,  /* unterer Schatten */
                            4px 4px 8px #666;
  }

#TFbg
  { filter                : alpha(opacity=0);
    opacity               : 0;
  }
.cellKalender span, #imgPanorama  
  { filter                : alpha(opacity=50);
    opacity               : 0.5;
  }
.cellKalender a
  { filter                : alpha(opacity=100);
    opacity               : 1;
  }

/* Scrollbars */
html, body
  { scrollbar-base-color  : #CBE6FF;
    scrollbar-arrow-color : Navi;
  }

/* Schatte-Effekte bei Eingabe-Elementen */
.menuWidget li a,         /* Menue-Elemente */
button,select,input       /* Eingabe-Elemente */
  { box-shadow            : 0 -2px 4px rgba(255,255,255,.1) inset,/* oberer schatten */
                            0 2px 4px rgba(0,0,0,.1) inset,       /* unterer Schatten */
                            0 0 10px rgba(0,0,125,.1) inset;      /* gesamter Innenschatten */
  }
.widget, .textFields, .menuField
  { box-shadow            : 0 5px 20px rgba(255,255,255,.3) inset /* oberer schatten */
  }

/* Hervorhebung auszuwaehlender Elemente */
.menuWidget li a:focus, .menuWidget li a:hover, .menuWidget li a:active,
.notizzettel span a:focus, .notizzettel span a:hover, .notizzettel span a:active,
a:focus, a:hover, a:active,
button:focus, button:hover, button:active,
select:focus,select:hover,select:active,
input:focus,input:hover,input:active
  { text-decoration       : none;
    background-color      : #aaeeaa;
    color                 : #008800;
    box-shadow            : 0 2px 4px rgba(255,255,255,.8) inset, /* oberer schatten */
                            0 -2px 4px rgba(0,0,0,.2) inset,      /* unterer Schatten */
                            0 0 10px rgba(0,125,0,.7) inset,      /* gesamter Innenschatten */
                            0 0 10px rgba(255,80,0,.9);           /* aeußerer Schatten */
  }
input:focus,input:hover,input:active
  { box-shadow            : 0 2px 4px rgba(0,0,0,.2) inset,       /* oberer schatten */
                            0 -2px 4px rgba(0,0,0,.1) inset,      /* unterer Schatten */
                            0 0 10px rgba(255,80,0,.9);           /* aeußerer Schatten */
  }
a:focus, a:hover, a:active,
.notizzettel span a:focus, .notizzettel span a:hover, .notizzettel span a:active
  { text-decoration       : underline; 
  }
.menuWidget li a:focus,.menuWidget li a:hover,.menuWidget li a:active,
.notizzettel span a:focus, .notizzettel span a:hover, .notizzettel span a:active,
a:focus, a:hover, a:active,
.td a:focus, .td a:hover, .td a:active
  { box-shadow            : 0 2px 4px rgba(255,255,255,.8) inset, /* oberer schatten */
                            0 -2px 4px rgba(0,0,0,.2) inset,      /* unterer Schatten */
                            0 0 10px rgba(0,125,0,.7) inset;      /* gesamter Innenschatten */
  }
.menuWidget li a:before
  { content               : "\2003  ";
  }
.menuWidget li a:focus:before, 
.menuWidget li a:hover:before,
.menuWidget li a:active:before
  { content               : "\26AB  ";
  }
.menuWidget li a.select,
.menuWidget li a.select:before
  { background-color      : transparent;
    border-color          : transparent;
    color                 : white;
    cursor                : default;
    box-shadow            : 0 0 0 transparent;
  } 

/* Automatische Textgenerierung */
.menuWidget li a.select:before
  { content               : "\25BA  ";
  } 
li.navH2:before
  { content               : "[ "}
li.navH2:after
  { content               : " ]"}
.notizzettel span strong:before, .notizzettel span strong:after
  { content               : " - ";
  }