/*
Filename: style.css
Template: Two Column Responsive Website
Author: Steven G Anderson
Date Created: 6/30/2014
Date Updated: 11/25/2014
 */

html, body { height: 100%; margin: 1em auto; max-width: 96%; }

body { font-family: "Arial", sans-serif; }

#header a { text-decoration: none; color: #606060; font-size: 20px; }
#header a:hover { color: #2d6cc0; text-decoration: none; }

#nav { width: 25%; float: left; font-size: 16px; line-height: 1.5em;  color: #606060; }
#nav ul { list-style-type: none; padding-left: 0;  line-height: 2em; }
#nav a { text-decoration: none; color: #606060; }
#nav a:hover { text-decoration: underline; color: #2d6cc0; }

#content { width: 70%; float: right; }

h1 { font-size: 18px; }
h2 { font-size: 16px; }
p { font-family: "Arial"; font-size: 16px; line-height: 1.5em; }
p.clear { clear: both; }
h2.bar { background: #2d6cc0; color: #fff; padding: 2px 10px; border-radius: 3px; font-weight: 400; font-size: 16px; }

img { max-width: 100%; height :auto; display: block; margin: auto auto; }
img.lab-tour { width: 146px; height :auto; display: block; float: left; margin: 5px; padding: 5px;}

figure figcaption { text-align: center; font-size: 12px; }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; text-align: center; }

.video-container iframe, .video-container object, .video-container embed { position:absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

video { width: 100%; max-width: 640px; height: auto; }

@media only screen and (max-width: 768px) {
#nav { width: 100%; }
#content { width: 100%; }
}

a:focus { outline: 2px solid #2d6cc0; outline-offset: 2px; }

.skip-link { position: fixed; top: -10em; left: 0; z-index: 9999; background: #ffffff; color: #2d6cc0; padding: 0.5em 1em; font-weight: bold; border: 2px solid #2d6cc0; text-decoration: none; }
.skip-link:focus { top: 0; }

p.archival-notice { font-size: 16px; color: #606060; }

@media print {
h4.bar { background: #fff; color: #000000; }
}