body, html { color: #504a43; /*background: rgba(61,37,54,1);
background: -moz-linear-gradient(top, rgba(61,37,54,1) 0%, rgba(101,70,91,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(61,37,54,1)), color-stop(100%, rgba(101,70,91,1)));
background: -webkit-linear-gradient(top, rgba(61,37,54,1) 0%, rgba(101,70,91,1) 100%);
background: -o-linear-gradient(top, rgba(61,37,54,1) 0%, rgba(101,70,91,1) 100%);
background: -ms-linear-gradient(top, rgba(61,37,54,1) 0%, rgba(101,70,91,1) 100%);
background: linear-gradient(to bottom, rgba(61,37,54,1) 0%, rgba(101,70,91,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d2536', endColorstr='#65465b', GradientType=0 );*/
font: 18px/1.6em 'Source Sans Pro', Helvetica, Arial, sans-serif; margin: 0px; height: 100%; padding: 0px; background: url(../images/class-tint.jpg) no-repeat fixed left top; background-size: cover; }
.page { max-width: 1000px; min-width: 320px; margin-left: auto; margin-right: auto; background: #FFFFFf; -moz-box-shadow: 0 0 5px #000; -webkit-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; }
.clear { clear: both; }
a:link, a:visited { color: #995B91; text-decoration: none; }
a:active, a:hover { color: #D79601; text-decoration: none; }
header { background: url(../images/hjcs-header.jpg) no-repeat left top; display: block; margin: 0px; padding-top: 10px; padding-bottom: 10px; }
.header-wrap{height: 252px;}
.logo { margin-left: 50px; margin-bottom: 20px;}
.donate { float: right; margin: 0px; padding: 0px; display: block; position: relative;width: 130px; overflow: hidden; height: 48px;}
.donate form { margin: 0px; padding: 0px; }
.content-wrap { padding: 40px 60px 50px; }
h1 { color: #5d274d; padding-bottom: 5px; margin: 15px 0px 10px; padding-top: 0px; font: 300 40px/1.2em 'Source Sans Pro', Helvetica, Arial, sans-serif; text-transform: uppercase; text-align: left; }
.subhead, h2 , .title{ color: #5d274d; padding-bottom: 5px; margin: 30px 0px 5px; padding-top: 0px; font-style: normal; font-variant: normal; font: normal 26px/1.2em Georgia, "Times New Roman", Times, serif; text-align: left;letter-spacing:-.03em; }
.running-subs, h3 { color: #504a43; margin: 0px; padding-top: 10px; padding-bottom: 0px; font: bold 22px/1.2em 'Source Sans Pro', Helvetica, Arial, sans-serif; }
.subheadsm, h4 { padding-bottom: 5px; font: normal 19px 'Source Sans Pro', Helvetica, Arial, sans-serif; text-transform: uppercase; color:#504a43; margin-top: 10px; margin-bottom: 0px;font-weight:600; }
h5 { font-size: 19px; font-weight: normal; line-height: 26px; }
h6 { font-size: 14px; font-weight: normal; text-transform: uppercase; color: #504a43; letter-spacing: 1px; }
.running-subs-italic { line-height: 17px; font-style: italic; }
.image-border {border: 5px solid #ffffff;margin-top: 5px;margin-bottom: 5px;margin-left: 15px;-moz-box-shadow: 0 0 5px #ccc;-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;}
select{
font-size: 17px;
background: #fff;
border: 1px solid #ccc;
padding: 5px 10px;
border-radius: 6px;
}
a.button, input.button {border: 0; background: #78486A; padding: 7px 25px; color: #FFF; white-space: nowrap; text-transform: uppercase; margin-right: 5px; font-size: 18px; font-weight: 300; margin-top: 10px; margin-bottom: 5px; -moz-border-radius: 5px; border-radius: 5px; line-height: 36px;}
a.button:hover, input.button:hover { background:#522d47; }
.credits, p.caption { font-size: 13px; color: #555; line-height: 14px;}
.credits { display:block;}
div.photo-wrap {display:inline-block;}
.footerbackground { padding-right: 35px; padding-left: 35px; background: #FFFFF9; }
.footer { padding: 20px 50px; text-align: center; background: #F3F4E7;color: #744561;font:17px/1.6em 'Source Sans Pro', Helvetica, Arial, sans-serif; }
.copyright { font-size: 12px; color: #5d274d; text-transform: none; }
#historic-box {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
background-color: #EEE4B4;
margin-bottom: 10px;
margin-left: 15px;
padding: 8px;
width: 209px;
text-align: center;
float: right;}
.historic-box { font-size: 15px; line-height: 1.3em; text-transform: uppercase; padding:10px; text-align: center; background:#FEDFAB; color: #5d274d; letter-spacing: 1px;}
p { padding: 0px; margin-top: 5px; margin-bottom: 15px; }
hr { background-color: #E4E2D6; margin-top: 30px; margin-bottom: 30px; height: 1px; border-style: none; }
div.col{width:48%; margin-right:15px;float:left;}
/* styles for desktop */
.galleries .photos>a{
display: inline-block;
margin: 0 20px 20px 0;
width: 100%;
max-width: 200px;
vertical-align: middle;
text-align: center;
}
.galleries .photos>a>img{
max-width: 100%;
max-height: 200px;
}
.nav-wrap { font-size: 15px; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; background: #5D3551; width: 100%;height:55px;
text-align: center;
position: relative;
border: 0;
margin: 0;
padding: 0;}
.paypal-button {
font-size: 17px !important;
text-transform: uppercase;
font-weight: bold !important;
border: 0;
color: #FFC84A !important;
width: auto !important;
}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
ul.sf-menu {
float: none;
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}
.sf-menu li {
position: relative;
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
}
.sf-menu > li {
display: inline-block;
padding: 0;
margin: 0;
}
.sf-menu a {
font-size: 15px; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; background: #5D3551;
position: relative; padding: .75em 1em;display: inline-block;
text-decoration: none;
zoom: 1; /* IE7 */
color: #FFF;
}
.sf-menu a:hover { color: #FFC84A !important;}
@media screen and (max-width: 1000px) {
img{max-width:100%!important;height:auto!important;}
}
@media screen and (max-width: 800px) {
.sf-menu { margin-left:0px!important;
}
}
@media screen and (min-width:801px) {
.tinynav, li.desktophide { display: none; }
/* styles for mobile */
}
@media screen and (max-width:800px) {
.tinynav {
display: block;
font-size: 17px;
padding: .7em 1em;top:8px;
margin-top: 5px;margin-bottom:5px;
position: relative;
margin-left: 10px;height:50px;
float: none;
color: #fff;
background-color: #461c3a;
border: 0;
width: 97%; max-width: 97%;}
#nav{ display: none;;}
.nav-wrap {height:65px; }
.header-wrap {height: auto;padding-bottom:0;
}
}
@media screen and (max-width: 460px) {
.content-wrap { padding: 20px; }
.logo { margin-left: 0px; margin-bottom: 20px; margin-top: 3px; text-align: center; }
.logo img {width:280px;height:auto;}
header { background-image: none; background-color: #FBFAF8;}
div.col{width:90%; margin-right:0px;float:left;}
}
.embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }