/* General declarations */

body {
  margin:0px;
  border-style:solid;
  border-width: 0px 30px 0px 40px;
  color:#000;
  background-color:#F5F5F5;
  font-family: Arial, sans-serif;
  font-size:1.1em;   
}

h1 {  
   font-family: "Book Antiqua", "Times Roman", serif;
   font-variant:small-caps; 
   font-size:2.5em;
   letter-spacing:0.1em;
}

h2, h3 {   
   font-size:1.3em; 
   text-align:center;
   margin-top:1em;
}

h3 {
    margin-left:1%;
    width:96%;
}

a:link {text-decoration: none; color:blue}
a:visited {text-decoration: none; color:#707}
a:active {text-decoration: none}
a:hover {text-decoration: underline}

table {
  margin:auto;
}

/* Header block */ 

#top { 
  width:100%;
  overflow:auto;
  box-sizing: border-box;
 -moz-box-sizing: border-box;
}

#logo {
  width:20%;
  float:right;
  text-align:center;
  padding-top:.5em; 
}

#sitename {
  width:78%;
  float:left;
}

#sitename h1 {
  text-align:left;
  padding-left:.5em; 
  margin-top:.5em;
  margin-bottom:.5em;
}

/* Menu Buttons */

#menu { 
  float:left; 
  width:76.5%;
  padding-top:.15em;
  padding-bottom:.15em;
  margin-bottom:.5em;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  align-content:flex-start;  
}

.button {
  font-weight:bold;
  font-variant:small-caps;
  padding-right:3px;
  padding-left:3px;
}
@media screen and (min-width:800px) {
/* Omit hover rule for tablets (narrow width) */ 
.button a:hover {
  opacity:0.3;
  text-decoration: none;
  transition:all 1s;
}
}
/* Main page area for standard pages */
#main {
      width:77%; 
      float:left;
      margin-right:1%;
}

/* main page area for front page, pictures ... */
.full {
    width:100%;
}


/* User-entered heading */
#main h4 {text-align:center}

#main p {
 text-align:justify;
 line-height:1.2; 
 margin-left:.5em;
}

/* All tables in main area*/
#main table {
  margin:auto;
  empty-cells:show;  
  border-top:thin solid black;
  border-bottom:thin solid black;
  margin-bottom:1em;
}


#main table td {
  vertical-align:top;
  padding-left:10px;
  padding-top:5px;
  border-top:thin dashed #ccc;
}

/* Predefined tables */

table.events, table.groups, 
table.pages, table.grouptt,
table.members        {
   width:100%;
}

#main table th {
   text-align:left;
   padding-left:10px; 
}

#main table thead th {
    text-align:center;
}

#main table.events tbody th, 
#main table.members tbody th
 {
   padding-top:10px;
 }
 
#main table tr.toprow td {
 border-top:none;
}

#main table td.bar {
  border-right:thin solid black; 
}
  
#main table.events th.tabhead {
  text-align:center;
}
  
#main table.events td.date {
white-space: nowrap;
font-family: "Lucida Console", monospace;
}

#main .evbut {
color:blue;
display:inline-block;
float:right;
font-size:1em;
} 

#grouptt .gname {
 white-space: nowrap;
}
#fourcol {width:100%;float:left}
  
/* elements shown only on narrow screens */

/* for tables groups, members and pagelists */
#twocol {width:100%; float:left; display:none} 

/* info to be shown vertically rather than horizontally
 * in group and events tables */
#namesplus  .groups .extra2 {display:none} 

/* Sidebar elements*/

#sidebar {
 width:20%;
 float:right;
 padding:0px;
 overflow:auto;
 background-color:#fff;
}

#contact {
  text-align:center;
}

#contact.img {
  width:40%;
  border:none;
}

#notice p {
 margin-left:3px;
 text-align:left;
 font-family:"Arial condensed", "Arial narrow", "Helvetica condensed", "ubuntu condensed";
 font-size:.9em;
 font-weight:600;
 color:#060;
}


#linx {
  text-align:left;
  padding-right:5px;
  padding-left:0px;
  padding-top:0px;
}

#linx ul {
  margin-top:0px; 
  margin-bottom:0px;
}

#linx li {
 list-style:circle; 
 margin-bottom:2px;  
}

#pictures {
 padding:5px;
 text-align:right; 
 font-size:small;
}

#pictures a {
 text-decoration:none;
}

#pictures img {
  max-width:90%;
  margin-left:2%; 
  margin-right:2%;
  text-decoration:none;
  border:none;
}

/* Gallery pics */

.gallery {
          clear:both;
	  max-width:90%;
          display:flex;	
	  flex-direction:row;
	  flex-wrap:wrap;
	  justify-content:space-between;
	  align-items:flex-start;
	  align-content:flex-start; 
         }
         
/* Gallery element: fixed pixel sizes */
         
.gallery div {
      display:inline-block;
      text-align:center;        
      width:150px; 
      height:120px; 
      padding-top:10px;
      padding-left:3px;
      padding-right:3px;
      padding-bottom:3px;
      background-color:#f0f0d0;
}

/* Picture page */
#fullpic {
 text-align:center;
}

#fullpic img {
  max-width: 95%;
}

#footer { 
  clear:both; 
  text-align:center;
  font-size:small;
 /* font-style:italic; */
}

#footer hr {
    width:100%;
    height:1em;
}

dl dl {margin-top:0px;}

/* Form */
fieldset {
 margin-top:1em;
 border: thin solid black;
}

input[type=text] {background-color:#ffa}
input[type=email] {background-color:#ffa}

textarea {
 width:100%;
 height:10em;
 background-color:#ffc;
}

input[type=radio]:checked + label
 {
   font-weight:bold;
 }

 
/* *******************************/

 @media screen and (max-width:800px) {
 body {
     font-size:1em;
     border:none;
     margin-right:.5em;
 }
 
 h1 {
   font-size:2em;
 }
 
 #menu {
   text-align:justify;
 }

 p.switchoff {display:none}
 
  #left, #sidebar,#main {
  float:left;
  width:auto;
  padding-right:1em;
}

#pictures {
 padding:0px;
 text-align:center; 
}

#pictures img {
  width:70%;
  margin-left:0; 
  margin-right:0;
}

#logo {display:none}

#main #text img {
  width:60px;
}

#fourcol {display:none}
#twocol {display:block}

#namesplus .groups .extra1 {display:none;}
#namesplus .groups .extra2 {display:block;}

#grouptt .gname {
 display:block;
 white-space:normal;
}

 }