@font-face { font-family: JDFont; src: url('../fonts/j.d.ttf') format('truetype'); font-weight: normal; font-style: normal; }

html { background: url('../images/Background.png') no-repeat center center fixed; background-size: 100% 100%; }
body { font-size: 1em; font-family: Arial, Helvetica, sans-serif; }
p { width: 94%; left: 3%; margin: auto; z-index: 2; }
dl { width: 94%; left: 3%; margin: auto; z-index: 2; }
h1 { display: inline; margin: 1% 10% 2% 1%; font-size: 2em; position: absolute; top: -100px; }

a, a:link, a:hover, a:visited { text-decoration: none; }

.navbutton { float: right; border: solid 1px hsla(0, 0%, 15%, 1); padding: 7px 7px 7px 13px; margin-left: 5px; margin-top: 90px; font-family: JDFont; font-size: 1.5em; color: hsla(0, 0%, 15%, 1); background: hsla(0, 0%, 95%, 1); }
.navbutton.activetab { color: hsla(60, 100%, 97%, 1); background: hsla(0, 0%, 35%, 1); }

.splashbutton { display: inline-block; width: 160px; margin: 0 80px; color: #FFFFEF; text-align: center; font-family: JDFont; font-size: 1.25em; }
.splashbutton.firsty { margin-left: 120px; margin-right: 40px; }
.splashbutton.lasty { margin-left: 40px; margin-right: 120px; }
.splashbutton img { width: 160px; height: 160px; }

.tabbox { padding: 0 0; margin: 0 auto; width: 960px;height: 100%; position: relative; z-index: 2; box-shadow: 0 5px 10px  #000; } /* border: solid 1px hsla(0, 0%, 15%, 1); */
.tabbox p { width: 70%; padding-bottom: 1em; }
.tabbox p:first-child { padding-top: 1em; }
.tabbox dl { width: 70%; padding-bottom: 1em; }

.thumbnails { margin: 0 auto; height: 60px; position: relative; z-index: 3; }
.thumbnails a { display: block; float: left; width: 60px; height: 60px; margin: 0; background-color: hsla(0, 0%, 55%, 1); }
.thumbnails a img { width: 60px; height: 60px; opacity: 0.5; }
.thumbnails a img:hover { opacity: 1; }

#header { width: 960px; margin: 20px auto 0; position: relative; z-index: 2; }
#header img { margin-bottom: 10px; }

#bigpicture { min-height: 20px; width: 960px; margin: 0 auto; position: relative; z-index: 3; background-size: 100% 100%; }
#bigpicture div.caption { display: none; text-align: center; width: 960px; padding: 10px 0; left: 0; bottom: 0; position: absolute; z-index: 4; }
html.js #bigpicture:hover div.caption { display: block; }

#about { width: 960px; margin: 20px auto 5px; font-size: 0.75em; text-align: center; }
#about a, #about a:link { color: #FFFFEF; }
#about a:hover { text-decoration: underline; }
#about a:visited { color: #EEEEFE; }