/* HTML, Body, BG, etc */

*
{
margin: 0;
padding: 0;
}

html
{ 
background: #e2e2e2;
}

body
{
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
overflow-y: auto;
overflow-x: hidden;
}

p.clear
{
clear: both;
}


p.indent
{
text-indent: 50px;
}

/* Divs */

#mainContainer
{ 
width: 100%;
}

#mainHeader
{ 
margin: 0;
text-align: right;
}

#titleLogo
{
float: left;
position: relative;
margin: 65px 0 -22px 28px;
width: 100%;
height: 69px;
text-align: left;
}

#mainNav
{ 
width: 660px;
height: 22px;
position: relative;
margin: 0 50px 5px 0;
font-weight: bold;
text-align: right;
vertical-align: baseline;
float: right;
}

#secNavContainer
{ 
background: #a8a8a8;
width: 100%;
height: 49px;
clear: both;
}

#secondaryNav
{
margin: 0 0 0 340px;
width: 500px;
}

#blurb
{
width: 300px;
height: 236px;
padding: 10px;
background: #7f7f7f;
color: #e2e2e2;
font-size: 13px;
line-height: 130%;
float: left;
}

#lowerContainer
{
width: 100%;
margin: 20px 0 20px 0;
}

#mainContent
{ 
background: #cfcfcf;
margin: 0 40px 10px 340px;
padding: 15px 20px 20px 20px;
font-size: 12px;
line-height: 150%;
}

#footer
{
color: #666666;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 10px;
margin: 0 50px 0 340px;
}

#footerCopyright
{
float: left;
}

#footerNav
{
float: right;
}

/* General Typography */

h1
{
font-family: Georgia, "Times New Roman", serif;
font-size: 24px;
color: #242424;
font-weight: bold;
font-style: italic;
line-height: 150%;
text-decoration: underline;
margin: 0 0 5px 0;
}

h2
{
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
color: #e2e2e2;
font-weight: normal;
font-style: italic;
line-height: 120%;
text-decoration: none;
}

#blurb h2
{
margin: 0 0 10px 0;
}

blockquote {
display:block !important;
font-size: 16px;
margin: 30px 50px 30px 50px;
text-align:justify;
font-family: Georgia, "Times New Roman", serif;
background: #c3c3c3;
font-weight: bold;
font-style: italic;
line-height: 180%;
padding: 20px;
}

blockquote p {
font-weight: normal;
color:#3399cc;
display:inline;
clear: both;
}

blockquote p:before,
blockquote p:after {
color:#e2e2e2;
line-height:0;
font-size:9em;
}

blockquote p:before {
content: open-quote;
padding-right:10px;
vertical-align:-47px;
}

blockquote p:after {
content: close-quote;
font-size:9em;
margin: 60px 20px 0 0;
float: right;
}





/* Hyperlinks and Navigation */

a
{
color: #3399CC;
font-weight: bold;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

#titleLogo a
{
border: 0;
font-style: none;
}

#blurb h2 a
{
color: #ffb46a;
font-style: italic;
font-size: 16px;
line-height: 120%;
}

#blurb h2 a:hover
{
color: #99cce5;
}

#blurb a
{
color: #e2e2e2;
font-size: 14px;
}

#mainNav ul
{
margin: 0;
padding: 0;
list-style-type: none;
float: left;
position: relative;
text-align: center;
}

#mainNav li
{
display: inline;
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
color: #242424;
text-transform: lowercase;
line-height: 150%;
letter-spacing: -4%;
padding: 0px 23px 0 23px;
}

/* For reference: background: url("../images/main_nav_bullet.png") no-repeat 35px 8px; */

#mainNav li.current
{
color: #242424;
}

#mainNav li.current a
{
color: #242424;
}

#mainNav li.current a:hover
{
color: #242424;
}

#mainNav li.current:before 
{
    content: "\00B7 ";
    color: #3399CC;
    font-size: 155%;
}

#mainNav li a
{
color: #666666;
}

#mainNav li a:hover
{
color: #ff7d14;
}

.secondaryTitle
{
float: left;
margin: 0 37px 0 0;
}

#secondaryUL
{ 
padding: 12px 0 0 0;
list-style-type: none;
position: relative;
}

#secondaryUL li
{
display: inline;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
color: #666666;
font-weight: bold;
text-transform: lowercase;
line-height: 150%;
letter-spacing: -2%;
padding: 0 20px 0 0;
}

#secondaryNav li.current
{
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
color: #242424;
font-weight: bold;
text-transform: lowercase;
line-height: 150%;
letter-spacing: -2%;
text-decoration: underline;
}

#secondaryUL li a
{
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
color: #666666;
font-weight: bold;
text-transform: lowercase;
line-height: 150%;
letter-spacing: -2%;
}

#secondaryUL li a:hover
{
color: #e2e2e2;
}

#footerNav a
{
color: #666666;
font-weight: normal;
}

#footerNav a:hover
{
color: #666666;
font-weight: normal;
}

/* Linked Images and Gallery Divs */

#gallery
{
margin: 10px 0;
}

.gallery2
{
 display: flex;
 flex-direction: row;
  flex-wrap: wrap;
}

.gallery2 img
{
border: 10px solid #3399cc;
margin: 5px;
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

.gallery2 a:hover img
{
border: 10px solid #3399cc;

	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=90);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.9;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.9;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.9;
}




#gallery .thumbs
{
border: 10px solid #3399cc;
margin: 5px;
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

#gallery a:hover img
{
border: 10px solid #3399cc;


	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=90);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.9;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.9;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.9;
}



.img_wrap {
  position: relative;
  height: 125px;
  width: 125px;
  margin: 5px;
   display: flex;
 flex-direction: row;
}

.img_wrap img
{
border: 10px solid #3399cc;
flex-direction: row;
}

.img_description_layer {
  position: absolute;
  top: 5px;
   bottom: 0;
   left: 5px;
  right: 0;
  background: rgba(80, 80, 80, 0.7);
  color: #ffb46a;
    align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
 display: flex;
 flex-direction: row;
  font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-style: italic;
text-decoration: underline;
font-size: 18px;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img_wrap:hover .img_description_layer {
  visibility: visible;
  opacity: 1;
}

.img_description {
  transition: .2s;
  transform: translateY(1em);
}

.img_wrap:hover .img_description {
  transform: translateY(0);
}