

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

body {
  /*border: 10px solid #0f0;*/
  background-color: #aa9;
}

body a {
  color: #5a3623;
  transition: all 0.25s ease-in-out;";
-webkit-transition: all 0.25s ease-in-out;                                   
-moz-transition: all 0.25s ease-in-out;                                      
-o-transition: all 0.25s ease-in-out;                                        
-webkit-transition: all 0.25s ease-in-out;                                   
}

body a:hover {
  /*background-color: #aa9;*/
  color: #9a7e94;
  transition: all 0.25s ease-in-out;";
-webkit-transition: all 0.25s ease-in-out;                                   
-moz-transition: all 0.25s ease-in-out;                                      
-o-transition: all 0.25s ease-in-out;                                        
-webkit-transition: all 0.25s ease-in-out;                                   
}


@font-face {  
  font-family: Iwona ;  
  src: url("../fonts/Iwona-Regular.otf") format("opentype");}

@font-face {  
  font-family: Iwona ;
  font-weight: bold;  
  src: url("../fonts/Iwona-Bold.otf") format("opentype");}

@font-face {  
  font-family: Iwona ;
  font-style: italic;  
  src: url("../fonts/Iwona-Italic.otf") format("opentype");}

.oneCol, .oneCol70 {
  display: inline-block;                                                                           
  position: relative;                                                                              
  top: 0;                                                                                          
  width: 90%;                                                     
  vertical-align: top;                                                                             
  margin-left: 5%;                                                
}
.oneCol70 { width: 60%}

#myGallery
{
  width: 640px !important;
  height: 480px !important;
  -moz-box-shadow: 5px 5px 8px #555;                       
-webkit-box-shadow: 5px 5px 8px #555;                       
box-shadow: 5px 5px 8px #555;
;                                                                     
}

#page {
  position: relative; 
  margin: 15pt auto;
  width: 51.020408163265em; /* em Einheit garantiert ein Skalieren mit der Schriftgröße beim Zoomen! */
  
  background-color: #aa9;
  /*border: solid 10px #0f0;*/

  font-size: 16pt;
  font-family: Iwona,Trebuchet MS, Tahoma, sans-serif;
  z-index: 2;
}

#header {
  display: block;
  width: 100%;/*51.020408163265px;*/
  /*line-height: 100px;*/
  text-align: left;
  background-color: #faf1ec;
    border: 1px solid #000;

  margin: 0 auto;
  margin-bottom: 9px;
  padding: 0;

  border-radius:2px 25px 2px 25px; 
-moz-border-radius:2px 25px 2px 25px;
-webkit-border-radius:2px 25px 2px 25px;
  -moz-box-shadow: 5px 5px 8px #555;                       
-webkit-box-shadow: 5px 5px 8px #555;                       
box-shadow: 5px 5px 8px #555;
  /*background-image: url('images/header2.jpg');*/
}

#main {
  display: block;
  background-color: #aa9;
  /*border: 1px solid #fdd;*/
  width: 100%;
  margin-top: 0pt;
  text-align: left;
  /*padding: 0 10pt 10pt 10pt;*/
}

#topmenu {
  display: block;
  width: 100%;/* 51.020408163265px;*/

  /*background-color: #fcf0ec;*/
  background-color: transparent;

  font-family: Trebuchet MS, Tahoma, sans-serif;
  /*border: solid 1px #000;*/

  /*-moz-box-shadow: 5px 5px 8px #555;                       
-webkit-box-shadow: 5px 5px 8px #555;                       
box-shadow: 5px 5px 8px #555;
*/
  z-index: 31;
}

#topmenu_mobile {
  margin-bottom:-0.5em;
}

#content {
  display: block;
  position: relative;

  width: 100%;
  width: 100%;
  background-color: #faf1ec;
  border: 3px solid #000;

  margin: 0 auto;
  padding: 13pt 0 2.5em 0; 

  border-radius:2px 25px 2px 25px; 
-moz-border-radius:2px 25px 2px 25px;
-webkit-border-radius:2px 25px 2px 25px;
  -moz-box-shadow: 5px 5px 8px #555;                       
-webkit-box-shadow: 5px 5px 8px #555;                       
box-shadow: 5px 5px 8px #555;
}

#footer {
  width: 100%;
  text-align: left;
  /*margin: 12pt;*/
}

#footer p {
  padding: 18pt;
}

#content h1,#content h2 {
  margin: 18pt 0 12pt 0  ; 
  color: #5a3623;
  font-size: 18pt;
  font-weight: bold;
}

#content h1:first-child, #content h2:first-child{
  margin-top: 12pt;
}

/* Abstand vor Absatz nach einer Überschrift verringern */
#content h1+p { 
  margin-top:-6pt;
}

#content h2 {
  font-size: 16pt;
}

.subheading {
  display: inline-block;
  color: #5a3623;
  margin-top: 6pt;
  margin-bottom: 6pt;
  font-size: 16pt;
  font-weight: bold;
}

.inlineheading {
  display: inline-block;
  color: #5a3623;
  margin-top: 6pt;
  margin-bottom: 6pt;
  font-size: 18pt;
  font-weight: bold;
}

.bild {
  //display: inline-block;
  border: 1px solid #000;
  text-align: center;
  margin: 16pt;
  -moz-box-shadow: 5px 5px 8px #555;                       
-webkit-box-shadow: 5px 5px 8px #555;                       
box-shadow: 5px 5px 8px #555;
;
}

.bildschlicht {
  margin: 16pt;
  text-align: center;
}

#topmenu ul, #topmenu ol{
  display: flex;
  justify-content: space-between;
  /*text-align: justify;*/
  margin: 0;
  padding: 0;
  list-style: none;
  margin: 1em 0 0.0em 0;
}

#topmenu li {
  /*display: inline-block;*/
  position: relative;
  margin: 0 0.2em;
  /*top: 1.25em;*/
}

#topmenu a {
  display: inline-block;
  /*width: 100%;*/
  color: #fff;

  padding: 7pt 1.2em;

  background-color: rgba(55,44,38,0.7);
  border: 1px solid #000;

  text-align: center;
  font-size: 18pt;
  //font-weight: bold;
  text-decoration: none;
  
  border-radius:10pt 10pt 0 0; 
-moz-border-radius:10pt 10pt 0 0;
-webkit-border-radius:10pt 10pt 0 0;
;
  transition: all 0.45s ease-in-out;";
-webkit-transition: all 0.45s ease-in-out;                                   
-moz-transition: all 0.45s ease-in-out;                                      
-o-transition: all 0.45s ease-in-out;                                        
-webkit-transition: all 0.45s ease-in-out;                                   
  -moz-box-shadow: 3px 3px 5px #555;                       
-webkit-box-shadow: 3px 3px 5px #555;                       
box-shadow: 3px 3px 5px #555;
;
}

#topmenu a.aktRubrik {
  background-color: #4B3731;
  color: #E4CC95;
}

#topmenu a:hover {
  color: #EEDEB9;
  background-color: #5c433c;
  //font-weight: bold;
  text-decoration: none;
  /*background-color: #ffd256;*/
  transition: all 0.45s ease-in-out;";
-webkit-transition: all 0.45s ease-in-out;                                   
-moz-transition: all 0.45s ease-in-out;                                      
-o-transition: all 0.45s ease-in-out;                                        
-webkit-transition: all 0.45s ease-in-out;                                   
}

td.aktRubrik a:hover,a.aktArtikel:hover, a.aktRubrik {
  /*background-color: #ffd256;*/
  /*background-color: #5c433c;*/
  color: #EEDEB9;
  background-color: rgba(75,64,48,0.7);/*#faf1ec;*/
  text-decoration: none;
}

.footer,.header {
  background-color: #fbfbff;
}

.header {
}

.footer {
  padding: 12pt 15pt;
}

ul.content {
  padding: 0;
}

.content {
  padding: 0 0pt 22pt 25pt;
  background-color: #faf1ec;
  border: solid 1px #aa9  ;
}

.clear {
  clear: left;
}

 
#content p {
  margin: 12pt 6pt 0 6pt;
  color: #352624;  
  line-height: 1.35;
  text-align: left;
}

ul,ol {
  margin: 12pt 18pt 12pt 18pt;
  text-align: left;
}

ul li,ol li {
 margin-top: 6pt;
 margin-bottom: 6pt;
}
ol li {
  margin-left: 18pt;
}
.smallText {
  font-size: 12pt;
  font-style: normal;
}

.normalText {
  font-size: 16pt;
}

.mediumText {
  font-size: 18pt;
}

.leftCol {
  display: inline-block;
  position: relative;
  vertical-align: top;
  top: 0;
  width: 42.5%;
  margin-left: 5%;
}

.rightCol {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-left: 5%;
  width: 42.5%;
  z-index: 11;
}
.width30 { width: 22.5%}
.width40 { width: 32.5%}

#submenu {
  width: 100%;
  padding: 3px 0;
  margin: 0 0 5pt 0;
  font-family: Trebuchet MS, Tahoma, sans-serif;
  font-size: 16pt;
}

#submenu div {	
  /*display: none;*/
  position: relative;
  /*visibility: hidden;*/
  margin: 0 0 0 0;
  background-color: transparent;
  border: none;
  /*border: 1px solid #0f0;*/
  margin: 5px 0;
  z-index: 30;
}

#submenu div.aktRubrik{
  display: block;
  visibility: visible;
}

  #submenu div a {
    display: inline-block;
    position: relative;

    /*width: 160px;*/
    padding: 3pt 10pt;
    margin: 5pt 8pt 5pt 0;

    border: 1px solid #000;
    color: #f0fff0 ;
    background-color: rgba(65,54,48,0.5);

    font-size: 16pt;
    text-align: center;
    text-decoration: none;

    white-space: nowrap;
    transition: all 0.45s ease-in-out;";
-webkit-transition: all 0.45s ease-in-out;                                   
-moz-transition: all 0.45s ease-in-out;                                      
-o-transition: all 0.45s ease-in-out;                                        
-webkit-transition: all 0.45s ease-in-out;                                   
    -moz-box-shadow: 3px 3px 5px #555;                       
-webkit-box-shadow: 3px 3px 5px #555;                       
box-shadow: 3px 3px 5px #555;
    border-radius:12pt; 
<!-- -moz-border-radius:12pt; -->
-webkit-border-radius:12pt;
;
    z-index: 31;                 
  }

  #submenu div a.aktArtikel {
    background-color: #4B3731;
    color: #E4CC95;
  }

  #submenu div a:hover {
    background: #5c433c;/* #49A3FF;*/
    color: #EEDEB9;
    transition: all 0.45s ease-in-out;";
-webkit-transition: all 0.45s ease-in-out;                                   
-moz-transition: all 0.45s ease-in-out;                                      
-o-transition: all 0.45s ease-in-out;                                        
-webkit-transition: all 0.45s ease-in-out;                                   
  }

#termintabelle {
  margin: 0 auto 0px auto;
  padding: 15px; 
  border: 1px solid #000;
}

#termintabelle tr {
  border: 1px solid #000;
}

#termintabelle tr.colhead th{
  padding: 5px 10px;
  color: #ffd;
  background-color: #442;
  text-align: center;
  border: 1px solid #000;
  border-radius: 9px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 7px;
  -moz-box-shadow: 3px 3px 5px #555;                       
-webkit-box-shadow: 3px 3px 5px #555;                       
box-shadow: 3px 3px 5px #555;
}

#termintabelle td {
  padding: 4px 0;
}

tr.emptyrow td {
  font-size: 0px;
  padding: 11px;
}

#termintabelle th {
  text-align: left;
/*padding-left: 15px;*/
  font-weight: bold;
  border-bottom: 1px solid #000;
}

tr.odd td {
  /*background-color: #ddb;*/
}

tr.even {
  /*background-color: #ddd;*/
}

tr.even td,tr.odd td{
  border-bottom: 1px solid #000;
}

a.tooltip {
  position: relative; /*this is the key*/
  z-index: 24;
  /*text-decoration: none*/
}

a.tooltip:hover { z-index: 25; }

a.tooltip span {
  display: block;
  position: absolute;
  visibility: hidden;
  top: 1em; left: 0.5em; width: 14em;

  padding: 0 0.2em;

  background-color: #cff; color: #000;
  border: 1px solid #0cf;
  text-align: left;
  opacity: 0;
  border-radius:2px 25px 2px 25px; 
-moz-border-radius:2px 25px 2px 25px;
-webkit-border-radius:2px 25px 2px 25px;
  transition: all 0.45s ease-in-out;";
-webkit-transition: all 0.45s ease-in-out;                                   
-moz-transition: all 0.45s ease-in-out;                                      
-o-transition: all 0.45s ease-in-out;                                        
-webkit-transition: all 0.45s ease-in-out;                                   
}

a.tooltip:hover span {
  visibility: visible;
  opacity: 0.9;
  z-index: 50;
}

.quote {
  position: relative;
  width: 90%;
  left: 1em;
}

.quote sup {
  color: #33a;
}

.roundedBorder {
  border-radius:2px 25px 2px 25px; 
-moz-border-radius:2px 25px 2px 25px;
-webkit-border-radius:2px 25px 2px 25px;
}

.shadow {
  -moz-box-shadow: 5px 5px 8px #555;                       
-webkit-box-shadow: 5px 5px 8px #555;                       
box-shadow: 5px 5px 8px #555;
}

.gallerythumbs img {
  margin:18pt auto 12pt auto;
  -moz-box-shadow: 5px 5px 8px #555;                       
-webkit-box-shadow: 5px 5px 8px #555;                       
box-shadow: 5px 5px 8px #555;
;                                                                    
  border: 1px solid #000;
  text-align:center;
}

@media only screen and (max-width: 1280px) {
   #page {
     width: 90%;
     margin: 5pt auto;
   }
}

@media only screen and (max-width: 1024px) {
   #page {
     width: 98%;
     margin: 5pt auto;
   }
   #topmenu ul, #topmenu ol { text-align: left; }
}

@media only screen and (max-device-width: 768px) {
   #page {
     width: 98%;
     margin: 5pt auto;    
   }
}
#version_banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ededed;
  z-index: 55;
  padding: 5pt;
  width:100%;
  
  visibility: hidden;
}
/*@media only screen and (orientation: portrait),*/
@media only screen and (min-width: 320px) and (max-width: 640px) {
  #page {
     width: 98%;
  }
  #topmenu a {
    font-size: 17pt;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  #topmenu li {
    width: 100%;
  }
  #submenu div a {
    display: inline-block;
    position: relative;
    width: 48%;

    /*width: 160px;*/
    padding: 3pt 10pt;
    padding: 3pt 0;
    margin: 5pt 0;

    border: 1px solid #000;
    color: #f0fff0 ;
    background-color: rgba(65,54,48,0.5);

    font-size: ;
    text-align: center;
    text-decoration: none;

    white-space: nowrap;
    transition: all 0.45s ease-in-out;";
-webkit-transition: all 0.45s ease-in-out;                                   
-moz-transition: all 0.45s ease-in-out;                                      
-o-transition: all 0.45s ease-in-out;                                        
-webkit-transition: all 0.45s ease-in-out;                                   
    -moz-box-shadow: 3px 3px 5px #555;                       
-webkit-box-shadow: 3px 3px 5px #555;                       
box-shadow: 3px 3px 5px #555;
    border-radius:12pt; 
<!-- -moz-border-radius:12pt; -->
-webkit-border-radius:12pt;
;
    z-index: 31;                 
  }
  .leftCol,
  .rightCol {
    display: inline-block;
    position: relative;
    vertical-align: top;
    top: 0;
    width: 42.5%;
    width: 90%;
    margin-left: 5%;
  }
  
  .oneCol, .oneCol70 {
    display: inline-block;
    position: relative;
    top: 0;
    width: 90%;
    vertical-align: top;
    margin-left: 5%;                                                
  }
}
@media only screen and (min-width: 320px) and (max-width: 504px) {
  #version_banner {
    display: block;
    visibility: visible;
  }
}

.squareButton {
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid #000;
  text-align: center;
  vertical-align: middle;
  line-height: 2em;
}

.hidden {
  display: none;
}

.bibelVers {
  padding: 0 1em;
  border-left: 5px solid #302d6f;
}
#content .bibelLink {
  text-align: right;
  padding-right: 1em;
}

