﻿/*! CSS for Home Page */
/*-------------------------*\
    $TYPOGRAPHY (Home)
\*-------------------------*/
.twitterWrapper .tweet {
	color: #6e6e6e;
	line-height: 18px;
}

.twitterWrapper .tweet a {
	color: #0b7eb0;
	text-decoration: none;	
}

#theTweet a{
    font-family:Arial, Sans-Serif;
}

.tweetAuthor{
    font-family: 'Rockwell W01 Bold',Georgia,serif;
}

.twitterWrapper .tweet a:hover {
	color: #d42029;
	text-decoration: underline;
}

.fullInstImg .fullInstCloseBtn {
	font-size: 17px;
	font-weight: bold;
	text-shadow: 0 0 4px #ededed;
	text-decoration: none;
}

.fullInstImg .fullInstCaption {
	font: 12px/14px Arial,Helvetica,sans-serif;
	color: #fff;
}

.fullInstImg .fullInstCloseBtn,
.mobileNav .findJJsLink {
	color: #000;
}

.mobileBrandingImg {
	text-align: center;
}

/*-------------------------*\
    $HOME STYLES
\*-------------------------*/
.jjHome .orderBar{
    display:block;
}

.jjHome .content{
    display:none;
}

.jjHome .pinReversed{
    display:none;
}

.jjHome .pin{
    display:block;
}

.mobileNav {
    background: transparent;
}

.mobileNav .mobileBg {
	background: #fff;
	padding-bottom: 0;
}

.mobileNav  .logo {
	margin: -50px auto 5px;
    max-width: 112px;
    width: 25.625%;
}

.content {
	z-index: 20;
}

.mobileBrandingImg img {
	width: 75%;
	min-width: 280px;
}

/* theater styles */
.theater {
	border: 0;
    margin: 0 auto 10px;
    padding: 0 0 5px;
    width: 100%;
    -webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	display: none;
} 

 /* Hide the slides before the JS is loaded. Avoids image jumping */
.theater .slides > li,
.theaterBox h1 {
    display: none;
}

.theaterHolder{
    min-width:320px;
    margin:0 auto;
    min-height:252px;
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
}

.theaterBox{
	display: block;
    position:relative;
    margin:0 auto;
    max-width:990px;
    width:100%;
}
a.theaterBox:focus {
    outline: 2px dotted #d42029;
}

.theaterHolder img{       
    width:100%;
    position:relative;
    z-index:5; 
}

/* Theater Pager Styles */
.pagerWrapper{
    margin: -54px auto 10px;
    width: 200px; /* 4 stars = 200px */ /* 3 stars = 145px */
    height: 44px; 
    position: relative;
    z-index: 10;
    display: none;
}

.pager{
    overflow:hidden;
    position: relative;
    width: 100%;
    height:44px; 
}

.pager ol {
	overflow: hidden;
}

.pager li{
    float:left;
}

.pagerWrapper .pager li a{
	display: block; 
    cursor: pointer;
    margin: 0 5px;
    text-indent:-9000px;
    /* clear flexbox styles */
    font-size:45px;
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color:#767676;
}

.pagerWrapper .pager li a.theaterNavIcon{
    text-indent:0;
}


.pagerWrapper .pager li .active,
.no-touch .pagerWrapper .pager li a:hover{
	color:#d42029;
}

/* Twitter */
.twitterWrapper {
	display: none;
	background: #fff;
	overflow: hidden;
	max-width: 990px;
	margin: 0 auto -25px;
	padding-bottom: 25px;
	position: relative;
	z-index: 5;
	-webkit-box-shadow: 0 0 5px 1px #cacaca;
	box-shadow: 0 0 5px 1px #cacaca;
}

.twitterInner {
	overflow: hidden;
}

.twitterWrapper .theTweetProfileImage {
	position: absolute;
	width: 48px;
	left: 12px;
	top: 12px;
}

.twitterWrapper .theTweetProfileImage img{
    width: 100%;
}

.twitterWrapper .tweet {
	padding: 9px 15px 7px 70px;
	text-align: left;
}

.theTweetIntentsWrapper li{
    float:left;
    margin:0 5px;
}

#theTweet, 
#theTweetDate{
    margin-bottom:0;
}

#theTweet{
    line-height: 14px;
    width: 88%;
}

#theTweetDate{
    float:left;
    font-size:11px;
    margin:2px 15px 0 0;
}

.twitterWrapper .theTweetIntentsWrapper{
    float:right;
}

.twitterWrapper .theTweetIntentsWrapper a{
    color:#767676;
    font-size:11px;
}

.twitterWrapper .theTweetIntentsWrapper a:hover{
    color:#666;
    text-decoration:none;
}

.theTweetIntentsWrapper .twitterSprite{
    display:inline-block;
    width:16px;
    height:15px;
    background-image: url(../images/home/twitterSprite.png);
    background-repeat: no-repeat;
    position: relative;
    top: 2px;
}

.retweetTweet .twitterSprite{
    background-position:-80px 0;
}

.favoriteTweet .twitterSprite{
    background-position:-34px 0;
}

.replyTweet :hover .twitterSprite{
    background-position:-16px 0;
}

.retweetTweet :hover .twitterSprite{
    background-position:-96px 0;
}

.favoriteTweet :hover .twitterSprite{
    background-position:-50px 0;
}


.twitterWrapper .twitterFollow {
	position: absolute;
	right: 15px;
	top: 12px;
}

/* Instagram */
.instClose {
	display: none;
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -61.5px;
	width:123px;
}

.instClose.instOpen {
	display: none;
	z-index: 20;
}

.instClose a {
	margin: 0 auto -2px;
	text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
    display:block;
    padding-top:10px;
    height:20px;
}

.instClose .closeDownArrow{
    line-height:7px;
}

.instPlaceHolder {
	position: relative;
	width: 100%;
	margin-bottom: 25px;
	z-index: 99;
}

.instWrapper {
	display: none;
	background: #fff;
	margin: 0 auto;
	padding:0 0 .25% 0;
	width:100%;
	max-width: 1149px;
	position: relative;
	z-index: 15;
	-webkit-box-shadow: 0 0 6px 1px #d5d5d5;
	box-shadow: 0 0 6px 1px #d5d5d5;
}

.instWrapper.instCenter {
	margin-left: -574.5px;
	left: 50%;
	width: 1149px;
}
/* this is hiding the close btn */
.lt-ie8 .instWrapper {
	overflow: hidden;
}

.lt-ie8 .instWrapper.instOpen{
    overflow:visible;
}

.instWrapper .row {
	overflow: hidden;
	height: 0;
	width:100%;
	padding-left:.345%;
}

.instWrapper .row.initRow {
	height: 100%;
}

.instWrapper .instImages {
	overflow: hidden;
	width: 100%;
}

.instWrapper .instImg {
	display: block;
	float: left;
	position: relative;
	width: 16.31%; 
	margin-right:.31%;
}

.instWrapper .instImg img {
	background-repeat: no-repeat;
	background-position: center center;
	webkit-background-size: cover;
	moz-background-size: cover;
	background-size: cover;
	width: 100%;
	max-height: 188px;
	display:block;
	
	/* this causes animation jumpiness */
	margin-top:2%;
}

.instWrapper .instImg.last {
	margin-right: 0;
}

.instWrapper .instImg:hover span,
.instWrapper .instImg.jsHover span,
.instWrapper .instImg span:hover  {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(255,255,255);
	background: rgba(255,255,255,.5);
}
.instaFollowWrapper
{
    text-align: center;
    position: relative;
    top: 25px; 
    width:100%; 
}
.instFollow
{
    display:block;
    width: 250px;
    margin: 0 auto;
    height: 20px;
    line-height: 17px;
    color: #d42029;
    text-transform: uppercase;
    font-size: 25px;
    padding-right: 8px;
    background: #ffffff url(../images/home/instagram_follow_link_icon.png) no-repeat right 0;
}

a.instFollow:hover
{
    color:#d42029;
    background: #ffffff url(../images/home/instagram_follow_link_icon.png) no-repeat right -20px;
}

.instFollow span
{   
    font-size: 0px;
    text-indent: -9999px;
}

.oldIE .instWrapper .instImg:hover span,
.oldIE .instWrapper .instImg.jsHover span,
.oldIE .instWrapper .instImg span:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity = 50);
	zoom: 1;
}

.instWrapper .instLogoHolder {
	position: absolute;
	bottom: -25px;
	width: 100%;	
}

.lt-ie8 .instWrapper .instLogoHolder {
	bottom: 0;
}

.instWrapper .instLogoHolder .instLogo {
	 max-width: 990px;
	 width: 100%;
	 margin: 0 auto;
	 text-align: center;
}

.instWrapper .instLogoHolder .instLogo img {
	width: 23.93939393939394%; 
	max-width: 208px;
} 

.lt-ie9 .instWrapper .instLogoHolder .instLogo img {
	width: auto;
}

.instWrapper .instLinks {
	overflow: hidden;
	position: absolute;
	top: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: 1149px;
}

.instWrapper .instLinkWrap {
    display: block;
	float: left;
	position: relative;
	width: 16.31%; 
	margin-right:.31%;
	height: 100%;
}

.instWrapper .instLink {
	width: 100%;
	height: 100%;
	display: block;
}

.lt-ie8 .instWrapper .instLink {
	width: 16.355%;
}

.instWrapper .instLink.last {
	margin-right: 0;
}

/* Instagram Overlay and Large Img */
.fullInstImgOverlay {
	display: none;
	background: url(../images/common/overlayBg.png);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
}

.fullInstImg {
	display: none;
	background: #000;
	padding: 5px;
	position: absolute;
	width: 35.35353535353535%;
	left: 31.81818181818182%;
	top: 4.5%;
	z-index: 100;
}

.fullInstImg .instaPlaceholder {
	width: 100%;
	background: #fff;
}

.fullInstImg .fullInstCloseBtn {
	position: absolute;
	right: -10px;
	top: -10px;
}

.fullInstImg .navArrow {
	position: absolute;
	top: 50%;
	margin-top: -70px;
	width:22%;
	height:140px;
	height:36%;
}

.fullInstImg .navArrow img{
    display:block;
    width:100%;
}

.fullInstImg .fullInstLeftBtn {	
	left: -95px;
	left:-24%;
}

.fullInstImg .fullInstRightBtn {	
	right: -95px;
	right:-24%;
}

.fullInstImg .fullInstCaption {
	background: rgb(0,0,0);
	background: rgba(0,0,0,.8);
	padding: 20px 5% 15px;
	position: absolute;
	bottom: 5px;
	display: block;
	left: 0;
	width: 90%;
	margin:0;
	word-wrap: break-word;
}

.noticeContainer
{
    position: relative;
    text-align: center;
    margin-bottom: 15px;
    font-family: 'Rockwell W01 Bold',Georgia,serif;
    font-size: 18px;
    text-transform: uppercase;   
    width: 275px;
    left: -4px;
    margin-left: auto;
    margin-right: auto;
}

.noticeContainer ul li
{
    margin-bottom:7px;
}

.noticeContainer span
{
   display:none;
}

/*-------------------------*\
	641+
\*-------------------------*/
@media all and (min-width:641px) {

    .jjHome .content,
	.jjHome .footerWrapper .disclaimer{
        display:block;
    }
	.content{
	    max-width:100%;
	}
	.theater, 		
	.pagerWrapper,	
	.twitterWrapper, 
	.instWrapper,
	.instClose.instOpen {
		display: block;
	}
	
	.theater img{
	    max-height:389px;
	}
	
	.oldIE .jjHome footer.pie,
    .jjHome footer{
	    position:static;
	}
	.jjHome .content{
        padding-bottom:0px;
    }
    
    .noticeContainer
    {
        font-size: 14px;
        width: auto;
        position:static;
    }
    
    .noticeContainer span
    {
       display:inline;
    }
}

/*-------------------------*\
	860+
\*-------------------------*/
@media all and (min-width:860px) {
	.fullInstImg {
		top: 6.5%;
	}
	.fullInstImg .fullInstCaption {
		font: 14px/14px Arial,Helvetica,sans-serif;
	}    
}
/*-------------------------*\
	990+
\*-------------------------*/
@media all and (min-width:990px) {
	.twitterWrapper {
		-webkit-border-radius: 10px 10px 0 0;
		-moz-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
	}

	.oldIE .jjHome footer.pie,
	.jjHome footer{
	    position:absolute;
	}      
	
	.jjHome .content{
        padding-bottom:120px;
    }    
}