*  { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

/* margin outside / padding inside box */

body {
  background: black;
  font-family: Comic Sans MS, cursive;
  font-size: 14px; }

  .main{
    display:flex;
    justify-content:space-between; 
    flex-flow: column wrap;
  }
table {
  width: 100%;
  /*margin: 0 auto;*/ }

h1 { margin:1em auto;
     text-align:center;}

.page {
   height: 100%; 
   background: #f7eeee;
 /* max-width: 900px;*/
  margin: 0px auto 1px auto; 
  }

.content {
  min-height: 450px;
  margin: 0px auto 0px auto;
  padding: 10px 40px 0 40px; }

.content p {
    margin: 0 0 20px 0; }

.content ul {
    margin: 0px 0px 0px 100px; }

.content img {margin-right:10px}

.footer {
  padding: 0px 0px 10px 0px;
  /*display: inline-block;*/
  background: linear-gradient( rgb(153,153,153,0.5),rgb(153,153,153,1));
  width: 100%;
  clear: both; }



.header {
  padding: 30px 0 40px 0;
  background-color:#ffffff;
  background-image:url('../images/varietyholders.jpg');
    }

.menu {
     margin:0 auto;
     width:400px;
  }  

.itemscope {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.cent {
  text-align: center; }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
   
  }
  
.centre{ 
  margin:0 auto;}  


.rght {
  text-align: right; }


#map_canvas {
  width:50%; height:400px; float:left;}

.grid {
  display:grid;
  grid-auto-flow: column;
  margin: 10px 10px 10px 10px;
}  

.picturegrid {
  display:grid;
  grid-auto-flow: row;
  margin: 1em auto;
  
}  

.menugrid {
  display:grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto auto;
  width: 99px; /*width of navbar image */
  height: 40px;
  background: #FFFFFF;
}  

.menugrid span a {
 
  padding: 0 0 10px 5px;
  margin: 0 1px 0 0;
  border: 7px solid #000000; }

  .menugrid span a {
    text-decoration: none;
    color: #000000;
    margin: 0 auto 0 auto;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=5); }


  .menugrid span a:hover {
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter: alpha(opacity=5); 
  }

  @media screen and (max-width: 600px) {
    .picturegrid {
      grid-auto-flow: column;
    }

  }

/* specific CSS for phones*/
@media screen and (max-width: 479px) {
  .header {padding-top:0; }

  .header img {
    max-width: 100%; }

   .content  {
     padding: 30px 1em 0 1em;}

  .content p {
    margin: 0; }

  .content ul {
    margin: 0; }

  .menu {
    width: 100%; }

  .menu a {
    font-size: 14px; }

  .footer {
    min-height: 200px;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0; }

  .rght {
    text-align: center; }
 
  .lft {
      text-align: center;
     color:seashell; }
  
    #map_canvas {
          width:100%; float:none;}

    #map_text   {
       margin-right:2em;    
      }    
}

/* and the alternative wide screen*/
/*@media screen and (min-width: 480px) {
  /*doesn't work in IE6 so left above }*/

@media print {
  .page   {
    height:275mm }

  .header {
    padding: 0; }

  .menugrid {
    display: none; }

  .content {
    padding:0 1cm 1cm 1cm; }

  .content img { 
    max-width:45%;} 

  .footer {
    position:fixed;top:260mm }    

  }