<STYLE TYPE="text/css">
<!--
h1.sm { font-size: 10pt; font-weight: normal; }
a:link { color: #4682b4; text-decoration: none; }
a:visited { color: #4682b4; text-decoration: none; }
a:hover { color: #4682b4; text-decoration: underline; }
a:active { color: #ff8c00; text-decoration: underline; }
a.firefox:link { color: #4682b4; text-decoration: none; }
a.firefox:visited { color: #4682b4; text-decoration: none; }
a.firefox:hover { color: #4682b4; text-decoration: underline; }
a.firefox:active { color: #ff8c00; text-decoration: underline; }
div.sm { font-size: 10pt; font-weight: normal; }
table.light { background-color: #e0ffff }
table.lightsm { background-color: #e0ffff; font: 10pt }
table.dark { background-color: #4682b4 }
table.vdark { background-color: #4682e0 }
table.clubdark { background-color: #006400 }
table.darkgrey { background-color: #696969; color: #ffffff }
table.darkgreysm { background-color: #696969; color: #ffffff; font: 10pt }
table.sm { background-color: #ffffff; font: 10pt; }
table.smborder { background-color: #ffffff; font: 10pt; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; }
table.smbordergrey { background-color: #ffffff; font: 10pt; border-top: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; }
table.smbordergreybgyellow { background-color: #ffff00; font: 10pt; border-top: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; }
table.smbordergreybgred { background-color: #DC143C; font: 10pt; border-top: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; }
table.khakism { background-color: #F0E68C; font: 10pt; border: thin #000000 solid }
table.lightsm { background-color: #e0ffff; font: 10pt; border: thin #000000 solid }
tr.light { background-color: #e0ffff }
tr.dark { background-color: #4682b4; color: #ffffff }
tr.vdark { background-color: #4682e0; color: #ffffff }
tr.darksm { background-color: #4682b4; color: #ffffff; font: Bold 12px Arial }
tr.sm { font: 12px Arial }
tr.tiny { font: 10px Arial }
tr.boldsm { font: Bold 12px Arial }
tr.black { background-color: #000000; color: #ffffff }
tr.darkgrey { background-color: #696969; color: #ffffff }
tr.khaki { background-color: #F0E68C; }
tr.khakism { background-color: #F0E68C; font: 10pt }
td.light { background-color: #e0ffff }
td.dark { background-color: #4682b4; color: #ffffff }
td.vdark { background-color: #4682e0; color: #ffffff }
td.black { background-color: #000000; color: #ffffff }
td.darksm { background-color: #4682b4; color: #ffffff; font: Bold 12px Arial }
td.sm { font: 12px Arial }
td.boldsm { font: Bold 12px Arial }
td.red { background-color: #ff0000; color: #ffffff }
td.boldred { color: #ff0000; font: Bold 16px Arial }
td.darkgrey { background-color: #696969; color: #ffffff }
input.mobile_button { -webkit-border-radius: 0px; border-radius: 0px; border: none; background-color: #696969; color:#ffffff; font-weight: bold; width: 150px; height: 40px; font-size: 20px; }
td.smbordergrey { background-color: #ffffff; font: 10pt; border-top: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; }
.mobile_heading { color: #000000; font: Bold 20px Arial }
.button_border { 
   background:grey; 
   border: 1px solid black; 
   -webkit-border-radius:10px; 
}
.login_button { 
   background:grey; 
   border: 2px solid black; 
   -webkit-border-radius:20px; 
   width:90%;
   height:50px;
   font-weight:bold;
   font-size:2rem;
}
option.light { background-color: #e0ffff }
option.dark { background-color: #4682b4; color: #ffffff } 
option.red { background-color: #ff0000; color: #ffffff } 
#map div img { cursor: crosshair; } 
blockquote.forum { font-style: italic }
.lowText, a.lowText:link, a.lowText:visited, a.lowText:active, a.lowText:focus {
 text-decoration: none; color: #000000; font: Bold 11px Arial, Helvetica }
.highText, a.highText:link, a.highText:visited, a.highText:active, a.highText:focus {
 text-decoration: none; color: #FFFFFF; font: Bold 11px Arial, Helvetica }
.itemBorder { border: 1px solid #666666 }
.itemBorderBlank { border: 1px solid #CCCCDD }
.buttonText, a.buttonText:link, a.buttonText:visited, a.buttonText:active, a.buttonText:focus {
 text-decoration: none; color: #FFCC99; font: Bold 12px Arial, Helvetica }
.buttonHover, a.buttonHover:link, a.buttonHover:visited, a.buttonHover:active, a.buttonHover:focus {
 text-decoration: none; color: #99CCFF; font: Bold 12px Arial, Helvetica; padding: 1px }
.buttonBorder { border: 1px outset #339966 }
.buttonBorderOver { border: 1px inset #CC9966 }
.bjheading { color: #000000; font: Bold 18px Arial }
	.morehl {
		font-family: Verdana, geneva, arial, sans-serif !important;
		font-size: 12px !important;
		color: #4682b4 !important;
		font-weight: bold !important;
		font-style: normal !important;
		text-decoration: none !important;
	}	
	
	A:link.morehl, A:vlink.morehl, A:alink.morehl {
		color: #4682b4 !important;
	}
	
	.moresrc {
		font-family: Verdana, geneva, arial, sans-serif !important;
		font-size: 9px !important;
		color: #000000 !important;
		font-weight: normal !important;
		font-style: normal !important;
		text-decoration: none !important;
	}
	
	A:link.moresrc, A:vlink.moresrc, A:alink.moresrc {
		color: #4682b4 !important;
	}
	
	.moreti {
		font-family: Verdana, geneva, arial, sans-serif;
		font-size: 9px;
		color: #000000;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
	}
	
	.morehlt {
		font-family: Verdana, geneva, arial, sans-serif;
		font-size: 12px;
		color: #4682b4 !important;
		font-weight: bold;
		font-style: normal;
		text-decoration: none;
	}	

#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  /*width: 100%;*/
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 4em;
  background-size: 200%;
  /*background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);*/
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

body {
    /* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
}

/* Additional non-critical styles */

h1, h3, p {
  max-width: 600px;
  margin: 0 auto 1em;
}

code {
    padding: 2px;
    background: #ddd;
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; } 

html { font-size: 62.5%; }
/* body { font-size: 1.4rem; } */
body { font-size: 1.4rem; background-color: #ffffff; } 
div.main { margin: auto; width: 90%; }
p.center { text-align:center; }
p.left { text-align:left; }
p.justify { text-align:justify; }
p.centerbold { text-align:center; font-weight:bold; }
p.leftbold { text-align:left; font-weight:bold; }
p.justifybold { text-align:justify; font-weight:bold; }
p.justifytiny { text-align:justify; font-size:.5rem; }
p.centertiny { text-align:center; font-size:.5rem; }
ul.squarepad { list-style-type: square; padding-left:5%; }
@media only screen and (max-width: 768px) {
/* for mobile phones */
body { font-size: 2.0rem; } 
} 
-->
</STYLE>

