@charset "UTF-8";

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 21, 2013 01:21:36 AM America/New_York */
@font-face {font-family: 'LimelightRegular';
    src: url('fonts/limelight-fontfacekit/Limelight-webfont.eot');
    src: url('fonts/limelight-fontfacekit/Limelight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/limelight-fontfacekit/Limelight-webfont.woff') format('woff'),
         url('fonts/limelight-fontfacekit/Limelight-webfont.ttf') format('truetype'),
         url('fonts/limelight-fontfacekit/Limelight-webfont.svg#LimelightRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 29, 2013 01:06:13 AM America/New_York */
@font-face {font-family: 'JuneBugRegular';
    src: url('fonts/JuneBug-fontfacekit/JUNEBUG_-webfont.eot');
    src: url('fonts/JuneBug-fontfacekit/JUNEBUG_-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/JuneBug-fontfacekit/JUNEBUG_-webfont.woff') format('woff'),
         url('fonts/JuneBug-fontfacekit/JUNEBUG_-webfont.ttf') format('truetype'),
         url('fonts/JuneBug-fontfacekit/JUNEBUG_-webfont.svg#JuneBugRegular') format('svg');
    font-weight: normal;
    font-style: normal
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 10, 2013 10:33:19 AM America/New_York */
@font-face {font-family: 'YellowMagicianRegular';
    src: url('fonts/Yellow-Magician-fontfacekit/YellowMagician-webfont.eot');
    src: url('fonts/Yellow-Magician-fontfacekit/YellowMagician-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Yellow-Magician-fontfacekit/YellowMagician-webfont.woff') format('woff'),
         url('fonts/Yellow-Magician-fontfacekit/YellowMagician-webfont.ttf') format('truetype'),
         url('fonts/Yellow-Magician-fontfacekit/YellowMagician-webfont.svg#YellowMagicianRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 19, 2013 08:28:25 PM America/New_York */
@font-face {font-family: 'itsadzokeS01Regular';
    src: url('fonts/itsadzoke-fontfacekit/itsadzokeS01-046-webfont.eot');
    src: url('fonts/itsadzoke-fontfacekit/itsadzokeS01-046-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/itsadzoke-fontfacekit/itsadzokeS01-046-webfont.woff') format('woff'),
         url('fonts/itsadzoke-fontfacekit/itsadzokeS01-046-webfont.ttf') format('truetype'),
         url('fonts/itsadzoke-fontfacekit/itsadzokeS01-046-webfont.svg#itsadzokeS01Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 22, 2013 */
@font-face {font-family: 'hassle_brkregular';
    src: url('fonts/hassle-fontfacekit/hassle-webfont.eot');
    src: url('fonts/hassle-fontfacekit/hassle-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hassle-fontfacekit/hassle-webfont.woff') format('woff'),
         url('fonts/hassle-fontfacekit/hassle-webfont.ttf') format('truetype'),
         url('fonts/hassle-fontfacekit/hassle-webfont.svg#hassle_brkregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* main elements
============================================ */
html {background-color: #000;}
header {min-height: 200px;}
p#IE-disclaimer {display: none;}
body {margin: 0 auto; color: #fff; min-width: 300px; font-family: Trebuchet, Tahoma, Verdana, sans-serif;}
#contact-info {margin-top: 5px; color: #fff; padding: 10px 0;}

/* headings
============================================ */
#jpp-logo {padding-top: 10px; text-shadow: 2px 2px 2px #000, 3px 3px 0 #fff;}
h1, h2, h3 {font-family: 'LimelightRegular', sans-serif; color: #fff; text-align: center;}
#jpp-logo h2, #main-nav h3, #related h3 {text-shadow: 1px 1px 1px #000, 2px 2px 0 #fff; letter-spacing: 1.25px;}
#presents-section h3 {text-align: left; font-size: 1.5em;}

/* links
============================================ */
a {text-decoration: none; color: #fff;}
#contact-info a, footer a {font-weight: bold;}
#home-button:focus, #home-button:hover, #main-nav a:focus, #main-nav a:hover, #related a:focus, #related a:hover  {border: 2px solid #fff;}

/* navigation
============================================ */
ul {list-style: none; padding: 0;}

#home-button {border: 2px solid #6f6f6f; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #000; font-family: 'LimelightRegular', sans-serif;}

#main-nav a {border: 2px solid #181818; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}

.fineous {font-family: 'JuneBugRegular', serif; text-transform: lowercase; line-height: 1.35; letter-spacing: .75px;}
#fineous-li a {background: tan url('../images/fineous-btn-parch-background.jpg') repeat; text-shadow: .5px 0 #453000;} 

.instruction, .lecture {font-family: 'YellowMagicianRegular', serif; text-transform: uppercase; text-shadow: 1px 0 #000; color: #241206; color: #eab028;}
#instruction-li a, #lecture-li a {background: #000;}

.closeup {font-family: 'YellowMagicianRegular', serif; text-transform: uppercase; text-shadow: .5px 0 #000; color: #ffff99;}
#closeup-li a {color: #6633ff; background: #000;} 

.related-li a {font-family: 'YellowMagicianRegular', serif; text-transform: uppercase; color: #686868; border: 2px solid #282828; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: #000; font-weight: 600; line-height: 1.5;}

.colella {font-family: 'YellowMagicianRegular', serif; text-transform: uppercase; letter-spacing: 2px;  font-weight: 600; text-shadow: 1px 1px 1px #000, 2px 2px 0 #000; line-height: 1.5; color: #fff;}
#colella-li a {background-image: url(../images/brick-btn.jpg);}

.kaputska {font-family: 'itsadzokeS01Regular', serif; line-height: 1.25; letter-spacing: 1.5px; color: #000;}
#kaputska-li a {font-weight: 600; /* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZThjYSIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiNlZGU4Y2EiIHN0b3Atb3BhY2l0eT0iMC40Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGU4Y2EiIHN0b3Atb3BhY2l0eT0iMC40Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=), url(../images/cabbage-btn.jpg) center center no-repeat;
background: -moz-linear-gradient(top,  rgba(237,232,202,0.4) 0%, rgba(237,232,202,0.4) 1%, rgba(237,232,202,0.4) 100%), url(../images/cabbage-btn.jpg) center center no-repeat; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,232,202,0.4)), color-stop(1%,rgba(237,232,202,0.4)), color-stop(100%,rgba(237,232,202,0.4))), url(../images/cabbage-btn.jpg) center center no-repeat; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(237,232,202,0.4) 0%,rgba(237,232,202,0.4) 1%,rgba(237,232,202,0.4) 100%), url(../images/cabbage-btn.jpg) center center no-repeat; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(237,232,202,0.4) 0%,rgba(237,232,202,0.4) 1%,rgba(237,232,202,0.4) 100%), url(../images/cabbage-btn.jpg) center center no-repeat; /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(237,232,202,0.4) 0%,rgba(237,232,202,0.4) 1%,rgba(237,232,202,0.4) 100%), url(../images/cabbage-btn.jpg) center center no-repeat; /* IE10+ */
background: linear-gradient(to bottom,  rgba(237,232,202,0.4) 0%,rgba(237,232,202,0.4) 1%,rgba(237,232,202,0.4) 100%), url(../images/cabbage-btn.jpg) center center no-repeat; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ede8ca', endColorstr='#66ede8ca',GradientType=0 ), url(../images/cabbage-btn.jpg) center center no-repeat; /* IE6-8 */
}

.haunt {font-family: 'hassle_brkregular', serif; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.4; color: #fff;}
#haunt-li a {background: #000; text-shadow: 0px 0px 6px #fff;}
#haunt-span {position: relative; bottom: -.1em;}

/* articles - sections
============================================ */
article p {font-size: .9em;}
.home-section {border: 2px solid #181818; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
#references {border: 1px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; max-height: 470px; overflow: auto;}
.byline {font-size: .6em; display: block; text-align: right; margin-right: 20px;}
#references ul {list-style-type: disc; padding-left: 15px;}


/* footer
============================================ */
footer {font-size: .6em; text-align: center; border-top: 1px dotted #fff; color: #fff; padding: 20px 0;}
.copy-div {line-height: .25;}
.footer-div span {display: block; float: left; width: 100%;}
.logo-div {margin-top: 20px;}

/* progressive enhancement
============================================ */
@media screen and (min-width: 100px)
{

/* main elements
============================================ */
body {width: 98%;}
#contact-info span {display: block; margin: 0 auto; text-align: center; font-size: .75em; width: 90%;}

/* headings
============================================ */
#jpp-logo h1 {margin-bottom: 5px;}
#presents-section h1 {margin: 0; font-size: 4em;}
#jpp-logo h2 {margin-top: 5px;}
h2 {font-size: 1.25em;}
h3 {font-size: 1em; margin-bottom: 3px;}

/* navigation
============================================ */
#main-nav {display: none;}
#main-nav a, #home-button {padding: 5px; margin: 5px 3px; display: block; text-align: center;}
#closeup-li a, #instruction-li a, #lecture-li a{font-size: 1em;}
#colella-li a {font-size: 1.1em;} 
#kaputska-li a, #haunt-li a {font-size: 1.25em;}
#home-button {margin-top: 15px; font-family: 'LimelightRegular', sans-serif; font-size: 1.25em;}
#related {display: none;}
ul {margin-top: 3px;}

/* articles - sections
============================================ */
section {margin: 15px 2px;}
#presents-section {margin-top: -10px;}
article p {text-align: center; padding: 0 8px;}
.hs-text {width: 66%; margin: 0 auto; padding-top: 5px; padding-bottom: 5px; margin-bottom: 10px;}
#references li, #references p{margin: 5px auto; text-align: left; font-size: .75em; width: 90%;}
.video {display: none;}
#references p {text-indent: 10px; padding-top: 10px;}

/* images - tables - forms
============================================ */
.socials img {vertical-align: middle; margin: 15px 3px 0; height: 2.5em;}
footer .socials img {margin-bottom: 15px;}
article img, #references img{display: none;}
}

@media screen and (min-width: 600px)
{
/* main elements
============================================ */
#contact-info {width: 29%; float: right; margin-top: 37px; max-width: 225px;}
#contact-info span {font-size: .6em; display: block;}
.clear {clear: both;}
.fineous {color: #453000;}

/* headings
============================================ */
#jpp-logo {width: 65%; float: left; padding-left: 3%;}
#presents-section h1 {margin: 0; font-size: 6em;}
#main section h2 {width: 100%; margin: 10px 0;}
#presents-section h3 {font-size: 2em;}

/* navigation
============================================ */
#main-nav {display: block;}
#home-button {font-size: 1em;}
#fineous-li a {font-size: .75em;}
#haunt-li a {font-size: 1.1em;} 
#colella-li a {font-size: .95em;} 
#kaputska-li a {font-size: .85em;}
#closeup-li a, #instruction-li a, #lecture-li a {font-size: .75em;}
#home-btn-div {width: 28%; max-width: 200px; float: left;}
#home-button {margin: 0 3px;}
#related {display: inline;}
.related-li a {font-size: .8em; padding: 5px; margin: 5px 3px; display: block; text-align: center;}

/* articles - sections
============================================ */
#main {margin-top: -47px; font-size: .75em; float: left; width: 70%; margin-left: 2%;}
section {margin: 10px auto; padding: 10px; overflow: auto; /*border: 1px solid #fff;*/}
#ref-div {width: 72%; padding-left: 28%; float: left;}
#ref-div2 {width: 97%; margin-left: 2.5%; font-size: .75em;}
.ref-col-div h3 {min-height: 50px;}
.ref-p-div {min-height: 175px;}
article p {text-align: left; text-indent: 2em;}
.home-section {max-width: 400px;}
.home-section p {text-indent: 0;}
.hs-img {width: 48%; float: left; padding-top: 5px;}
.ns-il-img {margin: 0 40px 15px 0; max-width: 35%; float: left;}
.ns-ir-img {margin: 0 0 15px 30px; max-width: 35%; float: right;}
.hs-text {width: 50%; float: left;}
.hs-text p {text-align: center;}
.video {display: block;}
.ref-col-div {display: block; width: 49%; float: left;}

/* images - tables - forms
============================================ */
section img, #references img {display: block; margin: 0 auto; max-width: 95%; border: 1px solid #181818;  -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px;}
.hs-img img{margin: 0 auto;}
.vid-col-div {margin: 0 auto;}
.vid-col-div iframe, .vid-col-div img{border: 1px solid #fff; display: block; margin: 0 auto; margin-top: 15px; width: 320px; height: 240px;}

/* asides
============================================ */
#left-nav {width: 28%; max-width: 200px; float: left;}

/* footer
============================================ */
footer {clear: both;}
.footer-div {width: 30%; float: left;}
.copy-div {width: 35%; padding-top: 15px;}
.logo-div {margin-top: 0px;}
}

@media screen and (min-width: 744px)
{
/* main elements
============================================ */
#ref-div {padding-left: 200px;}
}

@media screen and (min-width: 800px)
{
/* main elements
============================================ */
#contact-info {width: 27%;}
#main {font-size: 1em; width: 71%;}
#ref-div {width: 73%;}
#ref-div2 {font-size: 1em;}

/* headings
============================================ */
#jpp-logo {font-size: 1.25em; width: 69%;}

}

@media screen and (min-width: 1000px)
{
/* main elements
============================================ */
#contact-info span {display: block; width: 100%; float: right; font-size: .7em;}
header span {font-size: .7em;}
#main {margin-top: -49px; width: 76%}
#ref-div {width: 78%;}

/* headings
============================================ */
#jpp-logo {font-size: 1.5em; width: 71%; padding-left: 5%;}

/* navigation
============================================ */
#home-button {font-size: 1.1em;} 
.related-li a {font-size: .9em;}
#fineous-li a {font-size: .8em;}
#haunt-li a {font-size: 1.25em;} 
#kaputska-li a, #colella-li a {font-size: 1em;}
#closeup-li a, #instruction-li a, #lecture-li a {font-size: .9em;}

/* articles - sections
============================================ */
.home-section {max-width: 600px;}

/* asides
============================================ */
div#left-nav {width: 22%;}

/* images - tables - forms
============================================ */
.vid-col-div {width: 45%; margin: 15px; float: left;}
.socials img {height: 3em;}
}

@media screen and (min-width: 1200px)
{
/* main elements
============================================ */
#contact-info {margin-top: -134px;}
#main {width: 80%;}
#ref-div {width: 82%;}

/* headings
============================================ */
#jpp-logo {width: 100%; float: left; padding-left: 0;}

/* articles - sections
============================================ */
.home-section {width: 46%; float: left; margin: 5px; min-height: 265px;}
.ref-col-div {display: block; width: 33.3%; float: left;}

/* asides
============================================ */
div#left-nav {width: 19%;}

.vid-col-div iframe {width: 400px; height: 300px;}
}

@media screen and (min-width: 1400px)
{
/* main elements
============================================ */
#main {margin-left: 3%; margin-right: 1.5%; width: 64%;}
#ref-div {max-width: 225px; float: right; margin-top: -32px; padding-left: 0;}
#ref-div2 {width: 100%; margin: 0;}
#ref-div {max-height: 1400px; overflow: auto;}


/* headings
============================================ */
#jpp-logo {font-size: 1.75em;}
#presents-section h1 {margin: 0; font-size: 8em;}
#references h2, #references h3 {letter-spacing: 1.25px;}

/* articles - sections
============================================ */
#references {padding: 5px; margin: 1px 3px; display: block; text-align: center; max-height: none;}
.ref-col-div {display: block; width: 100%; float: none;}
.ref-col-div h3 {min-height: 100%;}
.ref-img-div {min-height: 50px;}
.ref-p-div {min-height: 100%;}

/* images - tables - forms
============================================ */
.vid-col-div {margin-left: 2.5%; width: 45%;}
}

@media screen and (min-width: 1590px)
{
/* main elements
============================================ */
html {max-width: 1600px; margin: 0 auto;}
#main {margin-left: 5%;}
}