body
{
  margin:         0;
  margin-top:     30px;
  text-align:     center;
  background:     #f2f2f2;
}
*html { margin-top: 0px; }


/*------------------------------------------------------
 * global fonts
 *------------------------------------------------------*/

.title
{
  background:     white;
  background:     none;
  color:          #B3282D;  
  font:           18px Verdana, sans-serif;
  /*
  line-height:    25px;
  */
  margin-top:     0;
  margin-bottom:  5px;
  margin-bottom:  0;
  padding-bottom: 5px;
  padding-top:    5px;
  letter-spacing: 0.07em;
}
*html .title
{
  margin-bottom: 0px;
}

.guiding_theme
{
  float:          left;
  color:          white;  
  font:           11px Verdana, sans-serif;
  font-style:     italic;
  margin-top:     30px;
  margin-bottom:  5px;
  margin-left:    24px;
  padding-top:    5px;
  text-align:     left;
}

.guiding_theme .author
{
  font:           italic 10px Verdana, sans-serif;
  font-style:     italic;
}

/*
h1
{
  color:          #B3282D;  
  font:           18px Verdana, sans-serif;
  line-height:    25px;
  letter-spacing: 0.1em;
  padding-top:    5px;
}
*html h1
{
  margin-bottom: 0px;
}
*/

/*
Version transparent �ber Bild
h2 
{
  background:     white;
  background:     #EDECEB;     
  opacity:        0.8;
  color:          #606060;
  color:          #404040;
  font:           20px Verdana, sans-serif;
  line-height:    36px;
  margin-top:     0;
  margin-bottom:  0;
  text-align:     center;
}
*/
   
h1
{
  border-bottom:    1px solid #cfcfcf;
  color:            #606060;
  font:             18px Verdana, sans-serif;
  margin-top:       0;
  margin-bottom:    5px;
}
   
h3
{
  color:            #606060;
  font:             16px Verdana, sans-serif;
  background:       #EDECEB;
}   

h4
{
  color:            #606060;
}   


p
{
  color:            #606060;
  font:             12px Verdana, sans-serif;
}

a
{
  text-decoration:  none; 
}

a img
{
  border:           none;
}


/*------------------------------------------------------
 * global links
 *------------------------------------------------------*/


    
/*-----------------------------------------------------
 * definitions page-layout
 *-----------------------------------------------------*/

/* Clear after floting elements */

.clearfix:after
{
  content:    "."; 
  display:    block; 
  height:     0; 
  clear:      both; 
  visibility: hidden;
}
/*
.clearfix { display: inline-table; }
*/
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/*------------------------------------------------------
 * head-area
 *------------------------------------------------------*/

div#head_area
{
  background:   #ffffff url('images/seitengestaltung/bg_streifen_rot_3.jpg') repeat-x;
  background:   url('images/seitengestaltung/bg_streifen_rot_3.gif') repeat-x;
  text-align:   center;
}

div#head
{
  margin-left:    auto;
  margin-right:   auto;
  overflow:       hidden;
  text-align:     right;
  width:          800px;
  /*
  border-left:    1px solid #cfcfcf;
  border-bottom:  none;
  */
}

#head .logo_area
{
  float:          left;
  width:          200px;
  height:         120px;
  text-align:     center;
  
  background:     white;
  margin-top:     8px;
  
  border:           1px solid #cfcfcf;
  /*
  box-shadow:       2px 2px 10px grey;
  */
  border-bottom:    none;
  
  opacity:          .92;
}

div#head img
{
  border:         1px solid #B3282D;
  border:         1px solid #EA100F;
  border:         none;
  margin-top:     3px;
}
*html div#head img 
{
  margin-left: -3px;
}

div#head .adress
{
  /*background:     #B3282D;
  background:     #EA100F;*/
  color:          white;
  font:           13px Verdana, sans-serif;
  font:           12px Verdana, sans-serif;
  margin-bottom:  5px;
  height: 83px;
  line-height: 1.5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
div#head .adress a {
  color: inherit;
}
div#head a:hover
{
  background:       rgba(0, 0, 0, 0.3);
}

*html div#head .adress 
{
  margin-top:     12px;
}

/*------------------------------------------------------
 * breadcrumbs
 *------------------------------------------------------*/

div#breadcrumbs
{
  color:        #B3282D;
  font:         11px Verdana, sans-serif;
  padding-left: 210px;
  padding-top:  10px;
  padding-top:  5px;
  text-align:   left;
}
*html div#breadcrumbs
{
  padding-top:  3px;
  padding-left: 215px;
}

div#breadcrumbs img
{
  border:       none;
  float:        none;
  margin-left:  2px;
  margin-right: 4px;
}

div#breadcrumbs a
{
  color:        #B3282D;
  font:         11px Verdana, sans-serif;
}

div#breadcrumbs a:hover
{
  background-color: #EDECEB;
}



/*------------------------------------------------------
 * global page-structure
 *------------------------------------------------------*/
          
div#seite
{
  margin:             15px auto 20px auto;
  margin:             0 auto 20 auto;
  width:              800px;
}


div#navigation_column
{
  float:              left;
  width:              180px;
  width:              202px;
  width:              200px;
  margin:             0 0 0 0px;
  background:         white;
  border:             1px solid  #cfcfcf;
  box-shadow:         2px 2px 10px grey;
}



div#content_column
{
  background:       #f2f2f2;
  background:       white;
  margin:           0 170px 0 210px;
  margin:           0 0 0 0px;
  margin:           0 0 0 210px;
  margin:           0 0 0 202px;
  padding:          10px 10px 4px 10px;
  margin:           0 0 0 210px;
  /*  overflow:         hidden;*/
  text-align:       left;
  box-shadow:       4px 4px 15px grey;
}


p.copyright
{
  border-top:       1px solid #cfcfcf;
  font:             10px Verdana, sans-serif;
  margin-top:       15px;
  margin-bottom:    0px;
  text-align:       center;  
}

                  

/*------------------------------------------------------
 * current infos
 *------------------------------------------------------*/


div#current
{
  border:         1px solid  #cfcfcf;
  border:         none;
  margin:         0 0 0 0;
  font:           12px Arial, sans-serif;
  margin-top:     15px;
  text-align:     left;
}


div#current h3
{
  background:       #cfcfcf;
  background:       none;
  font:             16px Verdana, sans-serif;
  /*
  line-height:      20px;
  */
  margin-top:       0px;
  margin-bottom:    5px;
  /*
  margin-left:      10px;
  margin-right:     10px;
  */
  padding-left:     10px;
  border-top:       1px solid #cfcfcf;
  border-bottom:    1px solid #cfcfcf;
  /*
  text-align:       center;
  */
}

div#current p
{
  color:            #606060;
  font:             12px Verdana, sans-serif;
  margin:           10px 10px 10px 10px;
}

div#current a
{
  color:            #606060;
  font:             bold 11px Verdana, sans-serif;
}

div#current a:hover
{
  background-color: #cfcfcf;
  background-color: #EDECEB;
}



/*------------------------------------------------------
 * navigation
 *------------------------------------------------------*/


ul.navigation
{
  /*
  background:     #EDECEB;
  */
  border:         1px solid #EDECEB;
  border:         1px solid  #cfcfcf;
  border:         none;
  margin:         0px 0 0 0;
  font:           12px Arial, sans-serif;
  padding:        7px 0px 7px 0px;
  text-align:     right;
  text-align:     left;
}


ul.navigation li
{
  list-style:     none;
  margin:         0 0 0 0;
}

ul.navigation a
{
  background:           url('images/seitengestaltung/pfeil_rechts_grau.gif') left no-repeat;
  background-position:  6px 5px;
  color:                #606060;
  display:              block;                
  font:                 bold 12px Verdana, sans-serif;
  height:               16px;
  margin:               0px 0 0 0px;
  padding:              2px 0 0 15px;
  text-decoration:      none;
}

ul.navigation a:hover
{
  
  background-color: #EDECEB;
  /*
  color:            #B3282D;
  */
}


ul.navigation .selected 
{
  /*
  background-color: #e0e0e0;
  */
  background:           url('images/seitengestaltung/pfeil_rechts_rot.gif') left no-repeat;
  background-position:  6px 5px;
  color:                #B3282D;
  display:              block;
  font:                 bold 12px Verdana, sans-serif;
  height:               16px;
  margin:               0px 0 0 0px;
  padding:              2px 0 0 15px;
}
*html ul.navigation .selected
{
  height:               18px;
}


ul.navigation_submenu
{
  margin:               0 0 0 0px;
  display:              none;
}                        
*html ul.navigation_submenu { margin: -2px 0 0 0; }


ul.navigation_submenu.active
{
  display:              block;
}
                            
ul.navigation_submenu li
{
  list-style:           none;
  margin:               0 0 0 -40px;
}
*html ul.navigation_submenu li { margin: 0 0 0 0; }


ul.navigation_submenu a
{            
  background:           url('images/seitengestaltung/pfeil_klein_grau.gif') left no-repeat;
  background-position:  22px 3px;
  font:                 12px Verdana, sans-serif;
  display:              block;                
  height:               16px;
  margin:               0px 0 0 0px;
  padding:              2px 0 0 34px;
  text-decoration:      none;
}

ul.navigation_submenu .submenu_selected
{
  background:           url('images/seitengestaltung/pfeil_klein_rot.gif') left no-repeat;
  background-position:  22px 3px;
  color:                #B3282D;
  display:              block;                
  font:                 12px Verdana, sans-serif;
  height:               16px;
  margin:               0px 0 0 -40px;
  padding:              2px 0 0 34px;
}
*html ul.navigation_submenu .submenu_selected
{
  margin:               0px 0 0 0px;
}



/*------------------------------------------------------
 * content-area
 *------------------------------------------------------*/

div#content_column a
{
  font:             bold 11px Verdana, sans-serif;
  color:            #606060;
}

div#content_column a:hover
{
  background:       white;
  background:       #cfcfcf;
}

div#content_column ul
{
  color:            #606060;
  font:             12px Verdana, sans-serif;
}

           
div#title
{
  border:           none;
  border-bottom:    1px solid  #cfcfcf;
  padding-bottom:   10px;
  text-align:       justify;
  text-align:       right;
  text-align:       left;
  overflow:         hidden;  
}           
*html { height: 220px; }



div#title img
{
  float:            right;
  margin-left:      10px;
}
*html div#title img
{
  margin-left:      -3px;
  margin-right:     -3px;
}

div#title img.big
{
  max-width: 570px;
  margin-bottom: 10px;
}

div#title p
{
}           


.img_group
{
  text-align: justify;
}

.img_with_describtion
{
  background:       yellow;
  background:       none;
  background:       #cfcfcf;
  border:           1px solid  #cfcfcf;
  /*float:            left;*/
  height:           100px;
  margin:           5px 8px 5px 8px;
  padding:          4px 4px 4px 4px;
  /*width:            258px;*/
  width: 500px;
  margin: 10px auto;
}
*html .img_with_describtion
{
  height:           116px;
  margin:           5px 4px 5px 4px;
  width:            268px;  
}

.img_with_describtion img
{
  float:          left;
  padding-right:  10px;
}


.img_with_describtion p
{
  margin-top:     0;
  text-align:     left;
}

.img_with_describtion a:hover
{
  background:     #f2f2f2;
}
           
.img_with_describtion h4
{
  margin-top:       0px;
  margin-bottom:    8px;
  font:             bold 12px Verdana, sans-serif;
}


.img_with_describtion .headword
{
  /*
  margin-top:       0px;
  margin-bottom:    0px;
  */
  font:             bold 12px Verdana, sans-serif;
}
           

p.copyright
{
  border-top:       1px solid #cfcfcf;
  margin-top:       10px;
  text-align:       center;  
}
                 
p.zitat
{
  padding-top:      10px;
  padding-bottom:   10px;
}       

div#title p.zitat
{
  padding-bottom: 0;
}

p.zitat .autor
{
  font-style:       italic;
}                 


/*------------------------------------------------------
 * Forms
 *------------------------------------------------------*/

.formular_feld
{
  font:        12px Verdana, sans-serif;
  color:       #000000;
  background:  #ffffff;
  border:      solid 1px #cfcfcf;
}
                  
.formular_button
{
  background:       #EDECEB; 
  background:       #cfcfcf;      
  border:           1px solid #cfcfcf;
  border:           1px solid #606060;
  color:            #606060;
  font:             12px Verdana, sans-serif;
  text-align:       center;
  width:            120px;
}


.fehler
{
  color: red;
}



.special
{
  display: none;
}


/*------------------------------------------------------
 * Dates / Curses / Workshops
 *------------------------------------------------------*/

table.dates
{
  border:             none;
  border-collapse:    inherit;
  border-spacing:     0;
  empty-cells:        show;
  margin-top:         20px;
  width:              100%;  
}
*html table.dates
{
  width:              500px;
}


table.dates td
{
  border-top:     1px solid #BEC2B0;
  border-top:     1px solid #cfcfcf;
  font:           12px Verdana, sans-serif;
  padding:        10px 0 10px 0;
  vertical-align: top;
}

table.dates th
{
  background:       #cfcfcf;
  border-bottom:    none;
  color:            #606060;
  font:             bold 12px Verdana, sans-serif;
  line-height:      18px;
  margin-top:       0px;
  margin-bottom:    5px;
  text-align:       center;
}

table.dates h3
{
  font:           bold 12px Verdana, sans-serif;
  margin-bottom:  5px;
}

table.dates .time
{
  font:           10px Verdana, sans-serif;
  margin-left:    10px;
}

table.dates .date
{
  font:           bold 10px Verdana, sans-serif;
}


/*-------------------------------------------------------
 * Admin-area
 *-------------------------------------------------------*/

.admin_page
{
  background:     white;
  border:         1px solid  #cfcfcf;
  margin-left:    auto;
  margin-right:   auto;
  padding:        0px 10px 0px 10px;
  text-align:     left;
  width:          800px;
}

.admin_page a
{
  font:             bold 11px Verdana, sans-serif;
  color:            #606060;
}

.admin_page a:hover
{
  background:       white;
  background:       #cfcfcf;
}
  

table.admin_list
{
  border:           none;
  border-collapse:  inherit;
  border-spacing:   0;
  empty-cells:      show;
  width:            100%;
}


table.admin_list th
{
  border-bottom:  2px solid #BEC2B0;
  font:           14px Verdana, sans-serif;
  padding:        0;
  text-align:     left;
}

table.admin_list td
{
  border-bottom:  1px solid #BEC2B0;
  font:           12px Verdana, sans-serif;
  padding:        3px 0 3px 0;
}


table.admin_form
{
  margin-bottom: 20px; 
}

table.admin_form td
{
  font:           12px Verdana, sans-serif;
  vertical-align: top;
}

table.admin_bildliste
{
}

table.admin_bildliste td
{
  font:           12px Verdana, sans-serif;
  margin-top:     30px;
}

table.admin_bildliste img
{
  border: none;
}
                 

.galerie img
{
  border:         none;
  margin-right:   10px;
  margin-bottom:  10px;
  /*
  width:          175px;
  width:          127px;
  */
}

div#content_column .galerie a:hover
{
  background:     white;
}

.bildquelle
{
  float:          right;
  font:           8px Verdana, sans-serif;
}

.bildquelle a
{
  font:           6px Verdana, sans-serif;
}



div#main_nav .nav_flyout_submenu
{
  position            : absolute;
  background          : white;
  border              : 1px solid #90b630;
  border-radius       : 0 5px 5px 0;
  box-shadow          : 4px 4px 6px rgba(0, 0, 0, 0.5);
  z-index             : 3;
}


/*-------------------------------------------------------
 * Slideshow
 *-------------------------------------------------------*/

p.signature
{
  margin-top: 0;
  margin-bottom: 0.5em;
  font: 1.8em "Freestyle Script", sans-serif;
}



.slides {
  display: none;
  width: 100%;
}

.animate-left {
  position: relative;
  animation: animateleft 1.8s
}

@keyframes animateleft { 
  /*from { left :-500px; opacity:0 } to { left:0; opacity:1 }*/
  from { opacity: 0; } to { opacity: 1; }
}