body {font-family: Arial; font-size: 13px; color: #C6C688; margin-top: 10px; background-image: url(jpgs/pstrbg.jpg);}

#pagewrapper {position: absolute; left: 0; right: 0; margin: auto; width: 952px; height: 1000px;}

.lite_yel_bord {border: 1px #C6C688 solid;}

#header {height: 120px; width: 950px; margin-bottom: 10px;}

#cta {height: 58px; width: 910px; margin-bottom: 10px; padding-left: 20px; padding-right: 20px; padding-bottom: 5px; padding-top: 5px; background-color:black;}

.imgl {float: left;}

.imgr {float: right;}

.imgc { margin-left: 20px; margin-right: 20px;}

.blockpic {display: block;}

#msgdiv {height: 40px; width: 949px; background-color: #000000; text-align: center; overflow: hidden;}

#msgtext {color: #f5f5f5; font-size: 18px; font-weight: 700; vertical-align: middle; line-height: 40px; margin: 0px; animation-duration: 8s; animation-name: slidein; animation-timing-function: ease; animation-delay: -1s;}

@keyframes slidein {
	from {margin-left: 100%; width: 300%;}
      to {margin-left: 0%; width: 100%;}
}

.marqueelink a:link    {color: #C6C688; text-decoration: underline; font-size: 20px;}

.marqueelink a:visited {color: #C6C688; text-decoration: underline; font-size: 20px;}

.marqueelink a:hover   {color: #ffff00; text-decoration: underline; font-size: 20px;}

.marqueelink a:active  {color: #C6C688; text-decoration: underline; font-size: 20px;}

#mc {position: relative; width: 951px; height: 286px; margin-top: 10px; margin-bottom: 10px;}

#leftmenu {position: absolute; left: 0px;}

div  a:link    {color: #C6C688; font-size: 17px; text-decoration: none; font-weight: 700;}

div  a:visited {color: #C6C688; font-size: 17px; text-decoration: none; font-weight: 700;}

div  a:hover {color: #ffff00; font-size: 17px; text-decoration: none; font-weight: 700;}

div  a:active  {color:  #ffff00; font-size: 17px; text-decoration: none; font-weight: 700;}

@keyframes flashtext {from {color: #C6C688;} to {color: #ffff00;}}

.menubox {height: 40px; width: 200px; background-color: #000000; border: 1px #C6C688 solid; margin: 5px; vertical-align: middle; line-height: 40px; text-align: center;}

.menubox:hover {border: 1px #ffffff solid;}

.menubox:active {border: 1px #ffffff solid;}

.menusquare {height: 98px; width: 98px; background-color: #000000; border: 1px #C6C688 solid; margin-left: 5px; margin-top:5px; vertical-align: middle; line-height: 33px; text-align: center; float: left;}

.menusquare:hover {border: 1px #ffffff solid;}

.menusquare:active {border: 1px #ffffff solid;}

.menusquare2 {height: 98px; width: 98px; background-color: #000000; border: 1px #C6C688 solid; margin-left: 5px; margin-top:5px; vertical-align: middle; line-height: 33px; text-align: center; color: grey; float: left;}

#mainpic {border: 1px #ffff00 solid; position: absolute; left: 223px; width: 504px; height: 287px; background-color: #000000; color: #dddddd;}

p {font-size: 16px; font-weight: 700;}

#menuright {position: absolute; right: 0px;}

#maintextpar {font-family: Arial; color: #C6C688; font-size: 18px; font-weight: 600; margin-left: 10px; margin-right: 10px; margin-top: 0px; margin-bottom: 5px;}

#footer {position: relative; top: 0px; width: 950px; height: 155px; background-color: #000000; padding-top: 10px;}

#volunteer {text-decoration-line: underline; vertical-align: middle; line-height: 22px;} 

#lefttrain {position: absolute; left: 0px; bottom: 0px; width: 240px; height: 48px;}

#framemsg {position: absolute; left: 240px; bottom: 0px; width: 470px; height: 50px; text-align: center;}

#righttrain {position: absolute; right: 0px; bottom: 0px; width: 240px; height: 48px;}

#specevent {position: relative; top: 0px; width: 950px; height: 110px; background-color: #000000; margin-top: 10px;}

#specad {position: relative; width: 950px; height: 870px; background-color: #000000; margin-top: 10px;}

#specadimage {position: absolute; display: block; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}

.chowlink a:link, a:visited, a:active {color: #C6C688; text-decoration: underline; font-size: 10px;}

.chowlink a:hover   {color: #ffff00; text-decoration: underline; font-size: 10px;}

#social {position: relative; top: 30px; text-align: center;}

.inblk img {display:inline-block;}

/* code below pops out main picture with caption or credit */

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 900px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}