/* General declarations */

body {
  margin-left:2%;
  margin-right:2%;
  font-family: Arial, sans-serif;
  font-size:1em;   
}

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

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

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 */ 


header#top {
 width:100%;
 display:flex;	
 flex-flow:row, nowrap;
 justify-content:space-between;
 align-items:flex-start;
 align-content:center; 
}

/*
table#top {
 width:100%;
}
*/

div#sitename {
  flex-grow:3;
  padding-left:1em; 
  text-align:left;
/*  width:78%;
  vertical-align:middle; */
}

div#logo {
 flex-grow:1;
 text-align:center;
/*
 width:20%;
 vertical-align:middle; */
}

/* Menu Buttons */

#menu { 
  width:100%;
  top:0;left:0;
  position:sticky;
  line-height:2em;
  padding-top:.2em;
  padding-bottom:.2em;
}

.button {
  font-weight:bold;
  font-variant:small-caps;
  padding:.2em;
}
@media screen and (min-width:801px) {
/* Omit hover rule for tablets (narrow width) */ 
.button a:hover, #logo a:hover {
  opacity:0.3;
  text-decoration: none;
  transition:all 1s;
}
}

/* main page area for front page, pictures ... */
#full {
    color:#000;
    background-color:#F3F3F3;
    width:100%;
}

#full h2, #full h3 {
  width:99.75%;
}

/* Main page area for standard pages */
#main {
  width:78%;
  float:left;
}

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

#main p {
 text-align:justify;
 line-height:1.2em; 
 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:2em; 
}

#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.groups td.Full {
   background-color:#ddd;
}

#main table.groups td.New {
   background-color:#ffa;
}
  
#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 {
  table-layout:fixed;
}

#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:21%;
 float:right;
 overflow:hidden;
 padding:0;
}

#notice, #linx {
 width:98.8%;
 padding:0;
}
 
#contact {
  text-align:center;
}

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

#notice p {
 padding:0px;
 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;
}

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

#linx li {
 list-style:circle;   
}

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

#pictures a {
 text-decoration:none;
}

#pictures img {
  max-width:80%;
  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:#f3f3f3;
}

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

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

#footer { 
  clear:both; 
  text-align:center;
  font-size:small;
  font-family:italic;
  height:auto;
}

#footer hr {
    width:99.75%;
    height:1.5em;
}

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;
 }

 #u3amember {display:none} 
 
/* *******************************/

 @media screen and (max-width:800px) {
 body {
     margin-left:1em;
     margin-right:1em;
 }

 h1 {
   font-size:2em;
 }
 
 p.switchoff {display:none}
 
#sidebar, #main {
  float:left;
  width:100%;
  padding-right:1em;
}

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

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

#logo img {display:none}
#sitename {text-align:center}

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

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

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

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

 }