body {
 font-family: verdana;
 margin: 0px; }

h1, h2, h3, h4 {
 color: #354d64; }

h2 {
 margin-bottom: 0em; }

/* HEADER
---------------------------*/

#header {
 position:absolute;
 top:0px;
 left:150px;
 right:0px;
 height:20px; 
 background-color:#cbd9e2; }

/* MENU
---------------------------*/

#menu {
 position:fixed;
 top:0px;
 bottom: 0px;
 left: 0px;
 width:150px;
 background-color:#3d5a75;
 color:white;
 font-family: arial;
 font-size: 21px;
 font-weight: bold;
 font-style: italic;
 text-decoration: none; }

#menu a:link {
 display: block;
 width: 120px;
 height: 27px;
 text-shadow: -3px 1px #000000; 
 margin: 0px 10px;
 color: white;
 text-decoration: none; }
 
#menu a:visited {
 color: white;
 text-decoration: none; }

#menu a:hover {
 color: yellow;
 background-image: url(ArrowOn.png); }

#menu hr {
 color: #ffff00;
 background-color: #ffff00;
 border: 0;
 height: 2px;
 margin: 20px 3px 10px 3px }


/* MENU LIST
---------------------------*/

#menulist {
 lineheight: 1.5; }


/* LINKS
---------------------------*/

#links {
 font-family: verdana;
 font-size: 8pt;
 font-weight: normal;
 font-style: normal;
 color: white; }

#links a:link {
 display: inline;
 height: 12px;
 text-shadow: 0 0; 
 text-decoration: underline;
 color: yellow;
 margin: 0px 0px; }
 
#links a:visited {
 color: white; }

#links a:hover {
 background-image: none;
 color: lightgreen; }

#links hr {
 color: #ffff00;
 background-color: #ffff00;
 border: 0;
 height: 2px;
 margin: 5px 3px;}

#links p {
 margin: 10px 10px; }
 

/* CONTENT
---------------------------*/

#content {
 position:absolute;
 left:150px; 
 top:21px; 
 bottom:30px; 
 right:0px;
 padding-top: 0px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 30px;
 overflow-y:auto;
 font-family: verdana;
 font-size: 10pt; }

#content button:hover {
 background-color: #cbd9e2; }
 
#content h4 {
 margin-top: 3px;
 margin-left: 20px;
 margin-right: 20px;
 margin-bottom: 0px;
 height: 20px;
 line-height: 20px;
 font-size: 17px; } 

/* PHOTOS
---------------------------*/

#photos {
 float: right;
 border-style: solid;
 border-color: #3d5a75;
 border-width: 2px; 
 margin: 10px; }

#photosize {
 width: 400px;
 height: 300px; }

/* VIDEOS
---------------------------*/

#videos {
 float: right;
 margin: 10px; }

.videobox {
 display: block;
 border-style: solid;
 border-color: #354d64;
 border-width: 2px; }

.caption {
 width: 400px;
 background-color: #3d5a75;
 color: #fff;
 font-size: 14px;
 line-height: 18px;
 margin: 0;
 padding: 2%;
 width: 96%; }


/* BUTTONS
---------------------------*/

.button {
 background-color: #3d5a75;
 color: white;
 text-align: center;
 font-size: 14px;
 line-height: 18px;
 border-radius: 5px;
 width: 200px; }


/* FOOTER
---------------------------*/

#footer {
 position:absolute;
 left: 150px;
 bottom:0px;
 right:0px ;
 height:30px;
 font-size: 8pt;
 text-align: center;
 background-color:#cbd9e2; }

/* COLLAPSE MENU
---------------------- */

/* Make the checkbox invisible */
#toggle {
 display: none; }
 /* do we need to shift the position of this element out of the visible space? */

.navigation + label {
 position: absolute;
 z-index: 2;
 top: 0px;
 height: 40px;
 left: 0px;
 width:140px;
 padding-right: 10px;
 padding-top: 10px;
 text-align: right;
 display: block; }

.collapse {
 height: 30px;
 display: inline; }

.expand {
 height: 30px;
 display: none; }

/* Move the label left when the checkbox is checked */
input.navigation:checked + label {
 left: -110px; }

/* Move the menu left when the checkbox is checked */
input.navigation:checked ~ div#menu {
 left: -110px; }

/* Move the banner left when the checkbox is checked */
input.navigation:checked ~ div#banner {
 left: 40px; }

/* Move the header left when the checkbox is checked */
input.navigation:checked ~ div#header {
 left: 40px; }

/* Move the content left when the checkbox is checked */
input.navigation:checked ~ div#content {
 left: 40px; }

/* Move the footer left when the checkbox is checked */
input.navigation:checked ~ div#footer {
 left: 40px; }

/* Hide the left arrow icon when the checkbox is checked */
input.navigation:checked + label img.collapse {
 display: none; }

/* Display the menu icon white when the checkbox is checked */
input.navigation:checked + label img.expand {
 display: inline; }


/* SECTION
---------------------------*/

.section {
 display: inline-block;
 min-width: 500px;
 border: 1px solid #000;
 border-radius: 20px;
 padding-right: 10px; }

.section h1 {
 margin-top: -10px;
 margin-left: 20px;
 margin-right: 20px;
 height: 20px;
 line-height: 20px;
 font-size: 15px; }

.section h1 span {
 background-color: white;
 margin-left: 10px;
 padding-left: 10px;
 padding-right: 10px; }


.section div {
 margin-left: 20px;
 margin-right: 10px;
 margin-bottom: 10px; }

.sectionwidth {
 width: 500px; }

/* FLEXSLIDER SETTINGS
---------------------------*/

.flex-caption {
  width: 96%;
  padding: 2%;
  left: 0;
  bottom: 0;
  margin: 0;
  background: rgba(61,90,117,1.0);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  font-size: 14px;
  line-height: 18px;
}