BODY {
     background-color: #FFE; 
     margin-left: 3%; 
     margin-right: 3%;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 16px;
     line-height: 1.6;
     }

IMG {
    margin-left: 10px; 
    margin-right: 10px; 
    margin-top: 5px; 
    margin-bottom: 5px;
    }

H1, H2, H3, H4, H5, H6 {
    font-weight: normal;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    }

H1 {font-size: 200%; text-align: center; color: #226 }

H2 {font-size: 150%; color: #228;}

H3 {font-size: 140%; color: #882; }

P,UL {
    margin-left: auto; 
    margin-right: auto;
    text-align: justify;
    max-width: 800px;
    text-indent: 2em;
    }

P.menu {
    font-size: 80%;
    line-height: 1.4;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    text-align: center;
    text-indent: 0;
  }
P.desc {
    font-size: 80%;
    line-height: 1.4;
}

:link, :visited{ color: #4040A0; }

.picture 
    {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-indent: 0;
    max-width: 1000px;
    }

.widepicture 
    {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-indent: 0;
    }

.subtext {text-align: center; font-size: 70%; text-indent: 0;}

.menu {
    background-color: #EEEEEE; 
    height: auto;
    border: 1px solid #BBBBBB;

    vertical-align: top;
    }

A {text-decoration: none}


@media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
P, UL, DL {font-size: 16px}
IMG {
    margin-left: 3px; 
    margin-right: 3px; 
    margin-top: 5px; 
    margin-bottom: 5px;
    }
.subtext {text-align: center; font-size: 100%; text-indent: 0; line-height: 200%;}
.widepicture img {width: 300px; height: auto}
}

// Gallery stuff for stones page

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{

}

.thumbnail span{ /*CSS for enlarged image (moved off left of screen when not hovered) */
position: absolute;
background-color: lightyellow;
padding: 5px;
width: 300px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image (needs to be visible or IE won't show it in hover)*/
border: none;
padding: 0px;
visibility: visible;
display: block;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 335px; /*position where enlarged image should offset vertically */
left: 345px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

.thumbnail:hover span H2{
margin-top: 0px;
background-color: #202060;
color: white;
font-size: 100%;
text-align: center;
}

.imageandcaption
{
columns: 2 350px; 
-moz-columns: 2 350px; 
-webkit-columns: 2 350px; 
column-gap: 0; 
-moz-column-gap: 0; 
-webkit-column-gap: 0
}