/*! Global and Shared CSS */
/*-------------------------*\
	Contents
\*-------------------------*/

/*

NORMALIZE/RESET
FONTS
TYPOGRAPHY
ICONS
GLOBAL
STORE
HEADER
LEFTSUBNAV
FOOTER
CONTENT-SHARED
FORM

*/

/*-------------------------*\
    $NORMALIZE/RESET
\*-------------------------*/
/* modified version of normalize.css: http://necolas.github.com/normalize.css/  & reset.css: http://meyerweb.com/eric/tools/css/reset/ */
/* HTML5 display definitions */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block;}
audio,canvas,video {display: inline-block; *display: inline; *zoom: 1;}
/* Base */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } /* used for mobile standard font sizing */
/* Use if needed for form elements on iOS: -webkit-appearance: none; */
html,button,input,select,textarea {font-family: sans-serif;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,img,figure,sub,sup,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
    margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;
}
a:focus {outline: thin dotted; }
a:hover, a:active { outline: 0; }
h1,h2,h3,h4,h5,h6 {font-size: 1em; font-weight:normal;}
ul, ol { list-style: none; list-style-image: none;}
img { border: 0; -ms-interpolation-mode: bicubic; }
svg:not(:root) {overflow: hidden;}
button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default;}
input[type="checkbox"], input[type="radio"] { box-sizing: border-box;  padding: 0;  *height: 13px; *width: 13px; }
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
textarea { overflow: auto; vertical-align: top; }
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}

/* Force a vertical scroll bar to eliminate jumpiness on expanding elements */
html { overflow-y: scroll; }
/* ie10 only, both in high contrast (display setting) and default mode */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    html.removeOverflow { overflow-y: auto; }
}
html.ie9.removeOverflow { overflow-y: auto; }

/* Disable webkit mobile/tablet highlight color on all elements */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Fix font-boosting bug with Android devices running Chrome */
.androidChrome * { max-height:1000000px; }

/* Re-enable webkit mobile/tablet highlight color on form elements */
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
}

/*-------------------------*\
    $TYPOGRAPHY (Global)
\*-------------------------*/
body{
    font:14px/17px arial, sans-serif;
    color:#000;
}

a,
.wrapper .redBtn input,
.subNavHdr,
.mobileHeader h1,
.orderBar .orSeparator,
.orderBar .startOrderLabel,
.orderBar .startOrderLabel span,
.quantityInputs,
.numDot,
.errormsg,
.form label,
.content h3,
.subNav .subMenu .selected a,
.headingBar h1,
.smallerWidth h3,
.bodyCopy h2{
    font-family: 'Rockwell W01 Bold',Georgia,serif;
}

.subNav .subMenu a,
.form input,
.form textarea,
.form label em,
.form .cbLbl,
.orderBar input,
.radioWrapper label,
.selectboxit-options a,
.reqDesc {
    font-family: 'Rockwell W01',Georgia,serif;
}

.form label em,
.content .reqDesc{
    font-family: 'Rockwell W01 Italic',Georgia,serif;
}

.wrapper .hdr h1,
.wrapper h1.hdr,
.utilityNav a,
.shadedBtn,
.question  {
    font-family: 'Smart Sans W01 Bold', impact, 'arial narrow bold', arial,sans-serif;
}

a{
    text-decoration:none;
}

.copyright,
.disclaimer {
    font: 9px Arial,sans-serif;
}

.utilityNav,
.utilityNav a,
.copyright {
    color: #656565;
}

.disclaimer{
    color: #929292;
}

.subNav .subMenu a,
.form{
    color:#242525;
}

.bodyCopy ul,
.bodyCopy h4,
.bodyCopy a,
.form input,
.form textarea,
.form .radioWrapper label,
.selectboxit-options a,
.content p,
.jjMenu .selected a,
.jjCatering .selected a,
.findJJs .selected a,
.storeSplitter .selected a,
.jjCompany .selected a,
.jjAbout .selected a,
.jjContactUs .selected a,
.content .reqDesc,
.jjFranchising .selected a,
.subNav .selected a,
.orderBar input,
.smallerWidth li{
    color:#656565;
}

.shadedBtn,
.form label,
.orderBar .startOrderLabel {
    color:#000;
}

a,
.mobileNav a,
.mobileFooterNav .backToTop a,
.orderBar .startOrderLabel span,
.quantityInputs a.btn.shadedBtn,
.content .req,
.redBtn,
.errorIcon{
    color: #d42029;
}

.form .disabled label,
.form .disabled .reqDesc{
    color:#b6b4b4;
}

.orderBar .loginBtn,
.orderBar .orSeparator,
.redBtn input,
.redBtn .btnTxtWrap,
.redBtn .whiteBtnStar,
.redBtn .arrowRight,
.numDot,
.mobileNav .findJJsLink,
.mobileFooterNav a,
.topRedMobileBtn {
    color: #fff;
}

.sustainabilityLeafIcon,
.sustainabilityLeafIconLrg {
    color:#539c06;
}

.jjMenu .mobileFooterNav .jjMenu a,
.jjCatering .mobileFooterNav .jjCatering a,
.findJJs .mobileFooterNav .findJJs a,
.jjStore .mobileFooterNav .jjStore a,
.jjAbout .mobileFooterNav .jjAboutUs a,
.jjContactUs .mobileFooterNav .jjContactUs a,
.jjFranchising .mobileFooterNav .jjFranchising a,
.subNav .subMenu .selected a{
    color:#767676;
}

.orderBar .loginBtn {
    font-size: 16px;
    line-height: 29px;
    text-transform: uppercase;
    text-align: center;
}

.shadedBtn {
    font-size: 20px;
    line-height:20px;
    text-transform: uppercase;
}

body.needsWebkitHack .shadedBtn {
    line-height: 23px;
}
body.handheld.linux .orderBar .shadedBtn {
    height: 25px;
    padding-top: 11px;
}
body.handheld.androidChrome .orderBar .shadedBtn {
    height: 23px;
    padding-top: 13px;
}
body.handheld.androidChrome .orderBar .shadedBtn .blackBtnStar {
    line-height: 17px;
}

.mobileNav a {
    text-transform: uppercase;
}

.bodyCopy h2{
    font-size:16px;
    text-transform: uppercase;
}

.mobileHeader h1 {
    text-align: center;
    text-transform: uppercase;
}

.mobileFooterNav a {
    line-height: 67px;
    text-transform: uppercase;
}

.mobileFooterNav .backToTop a {
    line-height:50px;
}

.utilityNav,
.utilityNav a {
    font-size: 18px;
    line-height: 35px;
    text-decoration: none;
    opacity: .85;
}

.orderBar .orSeparator {
    font-size: 16px;
    line-height: 29px;
    text-transform: lowercase;
}

.orderBar .deliveryBtn,
.orderBar .pickupBtn,
.shoppingCartBtn,
.storeLoginBtn{
    text-align: center;
}

.orderBar .startOrderLabel {
    line-height: 23px;
    text-transform: uppercase;
    text-align: center;
}

.orderBar .startOrderLabel span {
    line-height: 23px;
}

.skipToContent {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;
    z-index: 9999;
}

a.skipToContent:active,
a.skipToContent:focus,
a.skipToContent:hover {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
}

.headingBar h1,
.hdr {
	font-size: 21px;
	text-transform:uppercase;
	font-weight:normal;
}

.headingBar h1,
h1.hdr{
    line-height:21px;
}

 h1.hdr,
.headingBar h1{
	padding: 4px 0 10px 0px;
}

.needsWebkitHack .headingBar h1,
.needsWebkitHack h1.hdr{
    padding-top:8px;
    padding-bottom:6px;
}

.segment1 .orderStreet input {
    font-size: 15px;
}

.menu li a {
    line-height: 15px;
    text-transform: uppercase;
    text-align: center;
}

.redBtn,
.wrapper .redBtn input {
    font-size: 17px;
    text-transform: uppercase;
    text-align: center;
    line-height: 16px;
}

.topRedMobileBtn {
    text-transform: uppercase;
    text-align: center;
}

.topRedMobileBtn.right{
    text-align: right;
}

.headingBar h1,
.hdr{
    line-height: 21px;
}

.subNav a {
	font-size: 16px;
	text-transform: uppercase;
}

.content .reqDesc {
    font-size: 12px;
    text-transform:none;
}

.question{
    text-align:center;
    color:#434343;
    line-height:12px;
    cursor:help;
}

.topRedMobileBtn,
.question,
.mobileFooterNav .backToTop a
.content h4,
.subNav .subMenu a{
    font-size:14px;
}

.mobileHeader h1,
.mobileFooterNav a,
.orderBar .startOrderLabel span,
.orderBar .startOrderLabel,
.headingBar h1,
.subNavHdr,
.hdr{
    font-size: 21px;
}

.headingBar h1,
.subNavHdr,
.hdr{
	text-transform:uppercase;
	font-weight:normal;
	line-height:21px;
}

.subNav .subMenu a {
	text-transform: capitalize;
	line-height:14px;
}

.form label{
    line-height: 24px;
    text-transform:uppercase;
}

.form .radioWrapper label {
    text-transform: none;
    line-height: 17px;
}

.hiddenLabel {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;
}

.quantityInputs a.btn.shadedBtn{
    text-transform: uppercase;
}

.numDot{
    text-align:center;
    line-height:22px;
}

.content .req {
    font-size: 28px;
    line-height: 18px;
    height: 12px;
    margin-left: -4px;
}

.form .errormsg {
    color: #d42029 !important;
    font-size: 12px;
    line-height:12px;
}

.bodyCopy a{
    text-decoration:underline;
}

.bodyCopy a:hover{
    text-decoration:none;
}

.bodyCopy h4{
    text-transform:none;
    font-weight:bold;
    font-size:14px;
}

.bodyCopy a,
.bodyCopy h4{
    font-family:Arial, Sans-Serif;
}

/*------------------------*\
    $ICONS
\*------------------------*/
.iconJJCommons {
    display:inline-block;
    overflow:hidden;
    font: 20px "jjsymbols";
    text-transform:none;
}

.selectedGreyStar {
    font-size:26px;
    line-height:17px;
    width:22px;
    height:12px;
}

.sustainabilityLeafIcon {
    width:20px;
    height:21px;
    font-size:30px;
}

.sustainabilityLeafIconLrg {
    height:24px;
    width:30px;
    margin-left:-8px;
    font-size:32px;
    line-height:24px;
}

.whiteBtnStar {
    width:18px;
    font-size:26px;
    height:12px;
    line-height: 15px;
    margin-left:-9px;
}

.selectboxit-arrow {
    width:26px;
    height:16px;
}

.arrowMore {
    width: 19px;
    height: 15px;
    font-size: 25px;
    line-height: 22px;
}

.lt-ie8 .arrowMore {
    height: 17px;
}

.menuArrow {
    margin: -6px 0 0;
    position: absolute;
    top: 50%;
}

.menuArrowUp,
.menuArrowDown,
.menuArrowRight {
    right: 3%;
}

.menuArrowLeft {
    left: 2%;
}

.menuArrowUp,
.menuArrowDown {
    color:#bcbcbc;
    width:19px;
    font-size: 25px;
    height:12px;
    line-height:15px;
}

.menuArrowLeft,
.menuArrowRight {
    color:#bcbcbc;
    width:16px;
    font-size: 25px;
    height:14px;
    line-height: 15px
}

.arrowTop {
    width:20px;
    font-size:26px;
    height:17px;
}

.lt-ie8 .arrowTop {
    height: 20px;
}

.blackBtnStar {
    color: #000;
    font-size:28px;
    line-height:15px;
    width:20px;
    height:10px;
}

.redBtnStar {
    color: #d42029;
    width: 16px;
    height: 16px;
    font-size: 24px;
}

.arrowLeft,
.arrowRight {
    width: 12px;
    height: 14px;
    font-size: 22px;
    line-height: 18px;
}

.redArrowLeft,
.redArrowRight {
    width: 10px;
    height: 12px;
    font-size: 19px;
    line-height: 14px;
    margin-bottom:-1px;
}

.redArrowRightLrg {
    width: 14px;
    height: 16px;
    font-size: 26px;
    line-height: 14px;
}

.redArrowDown,
.redArrowUp {
    width:18px;
    height:16px;
    font-size:26px;
    line-height:14px;
}

.errorIcon {
    height: 18px;
    font-size: 22px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 2px;
    line-height:20px;
}

.needsWebkitHack.iphone .errorIcon,
.needsWebkitHack.ipod .errorIcon,
.androidChrome .errorIcon {
    top: 4px;
}

.needsWebkitHack.ipad .errorIcon {
    top: 3px;
}

/*-------------------------*\
    $GLOBAL
\*-------------------------*/
b,strong {font-weight: bold;}
mark {background: #ff0;color: #000;}
/*pre,code {font-family: monospace, serif;  font-size: 1em;}*/
pre {white-space: normal; word-wrap: break-word;}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {top: -0.5em;}
sub {bottom: -0.25em;}

html {
    height: 100%;
}

body {
    height: 100%;
    background:#fff;
}

.lt-ie8 body {
    height: auto;
}

.lt-ie9 .pie {
    behavior: url(/PIE.htc);
    position: relative;
    zoom: 1;
}

.lt-ie9 .pie.fixIE {
    border-width: 1px;
}

css3-container { display: none; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after {clear: both;}
.clearfix { *zoom: 1; } /* for IE 6/7 */

.ir {
    display: block;
    text-indent: 105%;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
    *line-height:0;
}

.ir br {
    display: none;
}

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; padding: 0; border: 0;
}

.center {
    margin: 0 auto;
    max-width: 600px;
    min-width: 320px;
}

.mobileOnly {
    display: block;
}

.fullSizeOnly {
    display: none;
}

form{
    position: relative;
    min-width: 320px;
    min-height: 100%;
}

.lt-ie8 form {
    overflow-x: hidden;
}

.content p {
    margin-bottom: 10px;
}

.smallerWidth li{
    list-style:disc;
    margin-left:18px;
}

.shadedBtn {
    height: 27px;
    padding: 9px 0 0 10px;
    display:block;
    border: 1px solid #cacaca;
    position:relative;
    cursor: pointer;
}

.shadedBtn.centered{
    padding-left:0;
    text-align:center;
}

.shadedBtn,
.grayGradient,
.jjCatering .tabs .menuTab,
.jjMenu .tabs .cateringTab,
#tooltip,
#popup_container {
    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 65%, #dddddd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(65%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 65%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 65%,#dddddd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 65%,#dddddd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 65%,#dddddd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-8 */
}

.ie9 .shadedBtn,
.ie9 .grayGradient,
.ie9 #tooltip,
.ie9 #popup_container {
    filter: none;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}

.redBtn {
    display: block;
    background: #d42029;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    border: 1px solid #d42029;
}

.redBtn.submitBtn,
a.submitBtn{
    padding-top:0;
    padding-bottom:0;
    border:none;
}


.redBtn input{
    padding-top:1px;
    padding-bottom:2px;
    padding-left:13px;
    padding-right:0;
    border: 1px solid #d42029;
    width:100%;
    background:url(../images/common/blank.gif);
    margin:0;
    position:relative;
    z-index:10;
    height:38px;
    line-height:32px;
}

.needsWebkitHack .redBtn input{
    padding-top:2px;
}

.behindInput{
    position:absolute;
    padding-top:11px;
    padding-bottom:9px;
    top:0;
    left:0;
    z-index:1;
    width:100%;
}

.needsWebkitHack .behindInput{
    padding-top:10px;
}

.fakeText{
    visibility:hidden;
}

.redBtn .arrowRight {
    margin-top: -9px;
    position: absolute;
    right: 3%;
    top: 50%;
}

.question{
    background:#bcbcbc;
    border:1px solid #acacac;
    border-radius:8px;
    display:inline-block;
    padding:2px 4px 0;
    position:relative;
    cursor:help;
}

.androidChrome .question {
    height: 12px;
    width: 6px;
}

.androidChrome .question .char {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin: -3px 0 0 -3px;
}

.needsWebkitHack .question {
    padding: 3px 5px 0;
}

.formWrapper .tooltipWrap {
    float:left;
    top:2px;
    margin-left:4px;
}

.numDot{
    background:#d42029;
    border-radius:12px;
    float:left;
    width:24px;
    height:24px;
}

.floatLeft{
    float:left;
}

.subnavBorder{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
}

.subnavBorder *{
	height:100%;
	display:block;
}

.subnavBorder .subNav{
	padding:0;
}

.content {
	margin: 0px auto;
    max-width: 990px;
    min-width: 280px;
    width: auto;
    padding: 0 20px;
    position:relative;
}

/*-------------------------*\
    $STORE
\*-------------------------*/

.jjStore .nav-star {
	display: block;
}

.jjStore .nav-star-footer {
	display: inline;
}
		
.jjStore .title {
	color: #d42029;
    font-size: 17px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.jjStore .description {
    clear: both;
    padding-top: 25px;
    width: 100%;
}
		
.jj-store-image-container {
    display: inline-block;
    float: left;
    width: 25%;
}

@media screen and (max-width:640px) {
    .jj-store-image-container {
        margin-top: -4px;
        width: 50%;
    }
}

.jj-store-image-container img {
    width: 100%;
}

.jj-store-image-hover {
    display: none;
}

.no-touch .jj-store-image-container:hover .jj-store-image {
    display: none;
}

.no-touch .jj-store-image-container:hover .jj-store-image-hover {
    display: inline-block;
}

/*-------------------------*\
	$HEADER
\*-------------------------*/
header {
    width: 100%;
}

header .mobileBrandingImg{
	display:none !important;
}

.mobileNav {
    min-height: 88px;
}

.mobileNav .mobileBg {
    padding-bottom: 30px;
}

.mobileNav .constrainNavWidth {
    max-width: 480px;
    margin: 0 auto;
}

.mobileNav a {
    float: left;
    display: block;
    padding-top: 10px;
}

.mobileNav .moreLink {
    margin: 7px 0 0 25px;
}

.mobileNav .logo {
    margin: -83px auto 5px;
    float: none;
    width: 82px;
}

.mobileNav .logo img {
    width: 100%;
}

.mobileNav .findJJsLink {
    float: right;
    margin: 5px 12px 5px 0;
}

.mobileNav .findJJsLink span {
    float: left;
}

.mobileNav .findJJsLink .findJJPinIcon {
    margin: -5px 0 0 5px;
}

.mobileHeader {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

.mobileHeader h1 span {
    margin-left: 0px;
}

.findJJPinIcon,
.findJJPinIconReversed { width:25px; height:29px; }
.findJJPinIcon img,
.findJJPinIconReversed img { width: 100%; }

.findJJPinIcon .pin{display:none;}

/*-------------------------*\
    $LEFTSUBNAV
\*-------------------------*/
.subNav {
	min-width: 320px;
	margin: 0px -20px;
	padding-top:10px;
}

.subNavHdr {
	padding: 16px 20px;
	border-top: 1px solid #cacaca ;
}

.subNav li{
    border-bottom: 1px solid #cacaca;
}

.subNav a {
	position: relative;
	display: block;
	padding: 13px 30px 11px;
}

.subNav .subMenu,
.subNav li:first-child {
	border-top: 1px solid #cacaca;
}

.subNav .selected a{
    padding-left:40px;
}

.subNav .selected a .redArrowRightLrg,
.subNav .subMenu {
	display: none;
}

.subNav .open .subMenu{
    display:block;
}

.subNav .subMenu li{
	border:none;
	padding-top:10px;
}

.subNav .subMenu {
    padding-bottom:10px;
}

.subNav .subMenu a {
	padding: 4px 30px 4px;
	border: none;
}

.subNav .subMenu .selected a{
    padding-left:40px;
}

.subNav a .redArrowRightLrg,
.subNav a .redArrowDown,
.subNav a .redArrowUp {
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -6px;
}

.subNav a .redArrowDown,
.subNav a .redArrowUp {
	right: 18px;
}

.subNav .selectedGreyStar {
	display: none;
	position: absolute;
	left: 15px;
    top:50%;
	margin-top: -7px;
}

.subNav .subMenu .selectedGreyStar{
    top: 12px;
}

.subNav .selected .selectedGreyStar {
	display: inline-block;
}

.subNav .subMenu a .redArrowRight{
    display:inline;
    position:relative;
    top:2px;
}

/*-------------------------*\
    $ONLINEORDERWIDGET
\*-------------------------*/
.orderBar {
    width: 286px;
    margin: -15px auto 5px;
    overflow: hidden;
    position: relative;
}

.orderBar .orderOnlineFlag {
    float: left;
    position: relative;
    z-index: 5;
    max-width: 155px;
}

.orderBar .orderOnlineFlag img {
    width: 100%;
}

.orderBar .loginBtn {
    background: #d42029;
    padding: 0 33px;
    margin: 37px 0 0 -26px;
    position: relative;
    z-index: 1;
    float:left;
}

.orderBar .deliveryBtn,
.orderBar .pickupBtn {
    padding-left:0;
    width:134px;
    float:left;
    color: #fff;
}

.orderBar .shadedBtn .btnTxtWrap {
    color: #000;
}

.orderBar .loginBtn .whiteBtnStar {
    height: 11px;
    margin: 0 7px 0 0;
}

.segment1,
.segment2 {
    float: left;
    clear: left;
    width: 279px;
    margin: 0 0 10px;
}

.segment1 .startOrderLabel {
    margin: 0 0 8px;
    display: block;
}

.segment1 .orderStreet input {
    box-shadow: inset 0 0 3px 0 #c8c8c8;
    -webkit-box-shadow: inset 0 0 3px 0 #c8c8c8;
    border: 1px solid #c8c8c8;
    padding: 6.5px 10px;
    width: 257px;
}

.orderBar .pickupBtn {
    float: right;
}

.orderBar .deliveryBtn .blackBtnStar,
.orderBar .pickupBtn .blackBtnStar {
    height: 12px;
    margin: 0 5px 0 -6px;
}

/*-------------------------*\
	$FOOTER
\*-------------------------*/
.footerWrapper .disclaimer{
    display:none;
}

.footerWrapper,
.mobileNav .mobileBg {
    background: #000 url(../images/common/mobileNavBg.png) 50% 0 repeat-y;
    background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(36,37,37,1) 50%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(36,37,37,1)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(36,37,37,1) 50%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(36,37,37,1) 50%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(36,37,37,1) 50%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(36,37,37,1) 50%,rgba(0,0,0,1) 100%);
}

.ie9 .footerWrapper,
.ie9 .mobileNav .mobileBg{
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI0MjUyNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}

.oldIE .footerWrapper,
.oldIE .mobileNav .mobileBg{
    background: #000;
}

footer nav {
    width: 100%;
    text-align: center;
}

.mobileFooterNav li {
    border-bottom: 1px solid #8b8b8b;
}

.mobileFooterNav a {
    display: block;
}

.mobileFooterNav .sustainabilityLeafIcon {
    margin-left: 3px;
}

.mobileFooterNav .selectedGreyStar {
    display: none;
}


.mobileFooterNav .selected .selectedGreyStar,
.jjMenu .mobileFooterNav .jjMenu .selectedGreyStar,
.jjCatering .mobileFooterNav .jjMenu .selectedGreyStar,
.findJJs .mobileFooterNav .findJJs .selectedGreyStar,
.storeSplitter .mobileFooterNav .jjStore .selectedGreyStar,
.jjCompany .mobileFooterNav .jjCompany .selectedGreyStar,
.jjAbout .mobileFooterNav .jjAboutUs .selectedGreyStar,
.jjContactUs .mobileFooterNav .jjContactUs .selectedGreyStar,
.jjFranchising .mobileFooterNav .jjFranchising .selectedGreyStar{
    display: inline-block;
    margin: 0 8px 2px -6px;
}

footer .socialNav  {
    overflow: hidden;
}

.globalFooterElements {
    background: #000;
}

.socialNav li {
    display: inline-block;
}

.lt-ie8 .socialNav {
    margin-left:auto;
    margin-right:auto;
    width:250px;
}

.lt-ie8 .socialNav li {
    float: left;
}

.socialNav li a {
    display: block;
    margin: 23px 14px 23px 0;
    position: relative;
    overflow: hidden;
    height: 32px;
    width: 35px;
}

.socialNav .last a {
    margin: 23px 0 23px 0;
    width:32px;
}

.socialNav a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.socialNav img.over{
    display:none;
}

.utilityNav ul {
    overflow: hidden;
    width: 311px;
    margin: 0 auto;
}

.utilityNav li {
    float: left;
}

.utilityNav .breakLink {
    clear: left;
    padding-left: 15%;
}

.utilityNav li a {
    white-space:nowrap;
}

.utilityNav li span {
    padding: 0 15px;
}

footer p {
    padding: 20px 0;
}

.lt-ie8 footer p {
    width: 100%;
    padding-left:0;
    padding-right:0;
}

.copyright {
    text-align: center;
}

/*-------------------------*\
	$CONTENT-SHARED
\*-------------------------*/
.headingBar{
    overflow:hidden;
    padding: 0 0 8px;
}

.headingBar h1{
    float:left;
}

.hdr a,
.headingBar a{
    float:right;
    padding-top: 6px;
}

.hdr a{
    padding-top:10px;
}

.topRedMobileBtn {
    display: block;
    background: #d42029;
    padding: 11px 10px 11px 0;
    margin: -19px 0 0;
}

.topRedMobileBtn .arrowRight {
    height: 15px;
    margin-bottom: -1px;
}

.btnHolder{
    margin-bottom: 15px;
}

.full-width-img{
    width:100%;
}

/*-------------------------*\
	$FORM
\*-------------------------*/
.formWrapper {
    padding-bottom: 10px;
}

.form .redBtn {
    margin-bottom: 15px;
    margin-top: 5px;
}

.form label {
    width:100%;
    display:block;
}

.form input[type="email"],
.form input[type="text"],
.form input[type="password"],
.form input[type="tel"],
.form textarea {
    width: 99.5%;
    margin: 0;
    border: 1px solid #cacaca;
    padding: 0;
    height: 36px;
    border-radius: 2px;
    text-indent:10px;
}

.ie .quantityInputs input,
.ie .form input[type="email"],
.ie .form input[type="text"],
.ie .form input[type="password"],
.ie .form input[type="tel"] {
    display:inline-block;
    line-height: 30px;
}

/* ie10 only, both in high contrast (display setting) and default mode */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .quantityInputs input,
    .form input[type="email"],
    .form input[type="text"],
    .form input[type="password"],
    .form input[type="tel"]{
        display:inline-block;
        line-height: 30px;
    }
}

.form textarea {
    height: 100px;
    text-indent:0;
}

.lt-ie8 .form input[type="email"],
.lt-ie8 .form input[type="text"],
.lt-ie8 .form input[type="password"],
.lt-ie8 .form input[type="tel"],
.lt-ie8 .form textarea{
    text-indent:0;
}

.oldIE .form input[type="email"],
.oldIE .form input[type="text"],
.oldIE .form input[type="password"],
.oldIE .form input[type="tel"]{
    line-height:36px;
}

.needsWebkitHack .form input[type="email"],
.needsWebkitHack .form input[type="text"],
.needsWebkitHack .form input[type="password"],
.needsWebkitHack .form input[type="tel"] {
    line-height: normal;
}

.inputWrapper{
    overflow:hidden;
}

.textareaWrapper {
    padding: 10px;
    border: 1px solid #cacaca;
    border-radius: 2px;
}

.touch .textareaWrapper {
    -webkit-appearance:textfield;
}

.textareaWrapper textarea {
    border: none;
    outline: none;
    resize: none;
    -webkit-appearance: none;
}

.textareaWrapper.jsFocus {
    outline-style: auto;
    outline-color: rgb(229, 151, 0);
    outline-offset: -2px;
    outline-width: 5px;
}

.form .disabled{
    opacity:.5;
}

.content .req{
    font-size: 28px;
    line-height: 18px;
    height: 12px;
    margin-left:-4px;
    width:19px;
}

.reqDesc .req{
    width:18px;
}

.radioWrapper .radio,
.radioWrapper .radio a{
    position: absolute;
    left: 0;
    top: 0;
}

.form .radioWrapper{
    position:relative;
}

.form .radioWrapper label{
    padding-left:21px;
    cursor:pointer;
}

.fname,
.lname{
    float:left;
}

.fname{
    margin-right:3%;
}

.fname, .lname{
    width:48.5%;
}

.stateWrapper{
    width:64%;
    margin-right:3%;
    padding-bottom:0;
}

.zipWrapper{
    width:33%;
}

.stateWrapper, .zipWrapper{
    float:left;
}

.success,
.ErrorContainer{
    position:relative;
    padding:4px 0 0 20px;
    clear: both;
    margin:0;
}

.ErrorContainer{
    padding-top:0;
}

.errormsg span{
    display:block;
    padding-top:5px;
}

/*-- Form quantity inputs --*/
.wrapper .content .quantityInputs .shadedBtn,
.wrapper .content .quantityInputs input {
    float: left;
    padding-left: 0;
    text-align: center;
    width: 31.5%;
    text-indent: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    line-height: 17px;
}

.oldIE .wrapper .content .quantityInputs input{
    line-height:34px;
}

.wrapper .content .quantityInputs input {
    border-width:1px 0;
}

.content .quantityInputs {
    width: 125px;
}

.content .quantityInputs .shadedBtn.disabled span {
    opacity: .3;
}

/*-------------------------*\
    $STORE SPLITTER
\*-------------------------*/
.storeSplitter .headingBar{
    border:none;
}

.sections .imgHeading{
    float:left;
}

.sections .small  {
    width: 51%;
    margin:5px -6px 0 2%;
    float: left;
    max-width:320px;
}

.sections{
    padding-bottom:20px;
}

.sections p{
    padding: 15px 0 15px 0;
    clear:both;
}

.giftCards {
    border-bottom: 1px solid #cacaca;
    margin-bottom: 20px;
}

/********************************TOOLTIP*************/
.formWrapper.hasTooltip label{
    width:auto;
    float:left;
}

.formWrapper.hasTooltip input{
    float:left;
    clear:left;
}

.tooltipBottom{
    position:absolute;
    bottom:-30px;
    width:30px;
    height:30px;
    left: 50%;
    margin-left: -15px;
    cursor: help;
}

.right .tooltipBottom{
    left: auto;
    right:5px;
    margin-left: 0;
}

.left .tooltipBottom{
    left: 5px;
    margin-left: 0;
}

.top .tooltipBottom{
    bottom:auto;
    top:-30px;
}

#tooltip,
#popup_container{
    position: absolute;
    z-index: 10000;
    max-width:200px;
}

#popup_container,
#tooltip{
    padding: 7px;
    -webkit-box-shadow:2px 2px 3px 0 rgba(0,0,0,.39);
    box-shadow: 2px 2px 3px 0 rgba(0,0,0,.39);
    border:1px solid #cacaca;
    border-radius:5px;
    min-width:140px;
}

#popup_panel{
    padding-top:10px;
    text-align: center;
}

i.tooltipCloseBtn {
    display: none;
    position: absolute;
    top: -8px;
    right: -6px;
}

.touch i.tooltipCloseBtn {
    display: block;
}

.tooltipContent,
.popupContent{
    background:#fff;
    border:1px solid #cacaca;
    padding: 13px ;
}

#tooltip:after{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ddd;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

#tooltip.top:after{
    border-top-color: transparent;
    border-bottom: 10px solid #ddd;
    top: -20px;
    bottom: auto;
}

#tooltip.left:after{
    left: 10px;
    margin: 0;
}

#tooltip.right:after{
    right: 10px;
    left: auto;
    margin: 0;
}

.bodyCopy{
    padding-bottom:10px;
}

.wrapper .bodyCopy ol{
    padding-bottom:10px;
}

.bodyCopy .contactBlock{
    font-weight:bold;
    padding:0 0 10px 20px;
}

.wrapper .bodyCopy li{
    list-style-type:decimal;
    margin-left:30px;
}

.bodyCopy h2{
    padding:10px 0 5px;
}

.wrapper .bodyCopy h3{
    margin-top:0;
}

/* ------------------------------------ Error Page */
.error .content {
    min-height: 250px;
}
.errorPageContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -90px;
    width: 180px;
    height: 120px;
}
.errorPageContainer .errorIcon,
.errorPageContainer h1,
.errorPageContainer p {
    display: block;
    text-align: center;
}
.errorPageContainer .errorIcon {
    display: block;
    text-align: center;
    position: static;
    top: auto;
    left: auto;
    color: #d42029;
    font-size: 46px;
    line-height: 30px;
    height: 30px;
}
.errorPageContainer h1 {
    font: normal 48px/56px 'Smart Sans W01 Bold', impact, 'arial narrow bold', arial,sans-serif;
    color: #d42029;
    text-transform: uppercase;
}

/*-------------------------*\
	640-
\*-------------------------*/
@media all and (max-width:640px) {
	@-ms-viewport { width: device-width; }
	.center {
	    max-width: 640px;
	}
	.mobileOnly {
		display: block;
	}
	.fullSizeOnly {
		display: none;
	}
	.utilityNav,
    .utilityNav a,
    .copyright {
        color: #929292;
    }
	
	.jjHome header .mobileBrandingImg{
		display:block !important;
	}
}

/*-------------------------*\
	641+
\*-------------------------*/
@media all and (min-width:641px) {
	css3-container {
	    display: block;
	}

	body{
	    font:12px/15px arial, sans-serif;
	}

	.lt-ie8 .content{
	    min-height:450px;
	}

	.form input,
    .form textarea,
    .headingBar a,
    .subNav .subMenu a{
        font-size:12px;
    }

	header{
	    background:#fff;
	    padding-bottom: 8px;
	}

	.content {
        padding: 0 0 140px 0;
    }

	.content.smallerWidth{
	    width:90%;
	    max-width:900px;
	}

	.bodyCopy{
        padding-top:10px;
    }

	/* Hover states */
    /* show/hide images that have hover states but can't be background images */
    .no-touch .terms .main a:hover{
        text-decoration:none;
    }

    a .over,
    .no-touch a .over{display:none;}
    .no-touch a .normal{display:block;}

    .no-touch a:hover .over{display:block;}
    .no-touch a:hover .normal{display:none;}

    .no-touch a:hover {
		color: #656565;
	}

	.no-touch .utilityNav a:hover,
	.no-touch .redBtn:hover,
	.no-touch .redBtn:hover .arrowRight,
	.no-touch .redBtn:hover .whiteBtnStar,
	.no-touch .redBtn:hover .btnTxtWrap,
	.no-touch .redBtn input:hover,
	.no-touch .orderBar .loginBtn:hover,
	.no-touch .subNav .subMenu a:hover,
	.no-touch .blackBtnStar:hover,
	.no-touch a:hover .blackBtnStar {
	    color: #d42029;
	}

	.no-touch .utilityNav a:hover span {
	    color: #929292;
	}

	.jjSustainability .menu .jjSustainability a,
	.no-touch .menu .jjSustainability a:hover {
	    color: #3d8600;
	}

	.no-touch .shadedBtn:hover{
        color:#000;
    }

	.no-touch .shadedBtn:hover {
	    background: #dddddd;
	    background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 25%, #dddddd 100%);
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(25%,#ffffff), color-stop(100%,#dddddd));
	    background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 25%,#dddddd 100%);
	    background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 25%,#dddddd 100%);
	    background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 25%,#dddddd 100%);
	    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 25%,#dddddd 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
	}

	.ie9 .shadedBtn:hover {
	    filter: none;
	    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	}

	.no-touch .redBtn:hover,
	.no-touch .redBtn input:hover{
	    border-color: #cacaca;
	}

	.no-touch .redBtn.submitBtn:hover{
	    border:none;
	}

	.no-touch .orderBar .loginBtn:hover,
	.no-touch .redBtn:hover {
	    background: #fff;
	}

	.numDot{
        line-height: 18px;
        width: 19px;
        height: 19px;
        font-size: 12px;
    }

    .needsWebkitHack .numDot{
        line-height: 17px;
    }

    header {
        background: #fff;
        position: relative;
        z-index: 10;
    }

    .mobileNav {
        position: relative;
    }

	.col {
		float: left;
	}

	.main {
		float: right;
		width: 73%;
		padding: 0 1.5%;
	}

	.smallerWidth h3{
        margin-top: 10px;
    }

    .hdr {
	    border-width: 0 0 1px;
	    border-bottom: 1px solid #cacaca;
	    margin: 0 0 10px -19px;
	    cursor: default;
	    background: #fff;
	    padding-left: 19px;
    }

     h1.hdr,
     .hdr h1,
    .hdr .steps h1{
	    padding-bottom: 16px;
	    padding-left: 19px;
    }

    .needsWebkitHack .hdr .steps h1,
    .needsWebkitHack .headingBar h1,
    .needsWebkitHack h1.hdr{
        padding-bottom: 12px;
    }

    .hdr .menuArrow {
	    display: none;
    }

	.subNav {
        width: 22.5%;
        min-width: 144px;
        border-right: 1px solid #cacaca;
        margin-right: -7px;
        padding-bottom: 100px;
        margin-left: 1.5%;
        position: relative;
        padding-top: 0;
    }

    .subNav a {
		font-size: 14px;
	}

	.subNav .subMenu .selected a {
        padding-left: 23px;
    }

	.wrapper .subNav a {
	    padding-right: 7px;
		padding-left: 12px;
	}

	.wrapper .subNav .selected a {
	    padding-left: 21px;
	}

	.subNav .selectedGreyStar {
	    left: 0;
	}

	.subNavHdr {
		padding: 4px 0 16px 5px;
		border-top: none;
	}

	/* other overrides */
	.center {
	    max-width: 768px;
	}

	.mobileOnly {
		display: none;
	}

	.fullSizeOnly {
		display: block;
	}

	.logo {
		float: left;
		margin: 2px 1.1% 0 1.5%;
		width: 15.38%;
		height: 177px;
	}

	.lt-ie8 .logo {
		width: 15.28%;
	}

	.logo img {
		width: 100%;
		display:block;
	}

	.wrapper .headingBar{
        border-bottom:1px solid #cacaca;
        padding:0;
        height:41px;
    }

	.globalHeaderElements {
		float: left;
		width:76.9%;
		margin-left:3%;
	}

	.vertOuter {
		display: table;
	}

	.vertCenter {
		display: table-cell;
		vertical-align: middle;
	}

	/* Online Order Widget */
	.orderBar {
		overflow: visible;
		float: left;
		width: 100%;
		height: 60px;
		background: #000;
		margin: 50px 0 10px 0;
		position: relative;
		-webkit-box-shadow: 0 2px 3px 0 #000;
		box-shadow: 0 2px 3px 0 #000;
		border-radius: 0;
	}

	.orderBar .orderOnlineFlag {
		float: none;
		position: absolute;
		left: -35px;
		width: 155px;
		top: -6px;
		height: 78px;
	}

	.orderBar .loginBtn {
		padding: 0 .79% 0 .53%;
		margin: 22px 0 0 85px;
		padding-left: 35px;
		width: 11.73%;
		font-size: 14px;
	}

	.orderBar .loginBtn:hover {
    	border: none;
	}

	.orderBar .shadedBtn {
		line-height:29px;
	}

	.needsWebkitHack .orderBar .shadedBtn {
		padding-top: 5px;
        height: 22px;
	}

	.orderBar .shadedBtn span,
	.orderBar .loginBtn .whiteBtnStar {
		display: none;
	}

	.orderBar .shadedBtn .btnTxtWrap {
	    display: inline-block;
	}

	.orderBar .orSeparator {
		float: left;
		margin: 22px .645% 0 1.29%;
		width: 2.33%;
	}

	.orderBar .segment1,
	.orderBar .segment2 {
		clear: none;
		margin: 0;
		margin: 7px 0 0 1.29%;
	}

	.orderBar .segment1 {
		width: 25.2%;
	}

	.orderBar .orderStreet input {
		height: 27px;
		width: 84.79%;
		padding: 0 4.18%;
		font-size: 11px;
		-webkit-border-radius:0;
	}

	.oldIE .orderBar .orderStreet input{
	    line-height: 27px;
	}

	.orderBar .startOrderLabel,
	.orderBar .chooseOptionLabel {
		font: 10px/12px 'Rockwell W01', Georgia, serif;
		color: #fff;
		text-align: left;
		text-transform: uppercase;
		margin-bottom: 3px;
		position: relative;
	}

	.orderBar .segment2 {
		width: 30.4%;
	}

	.segment2 .deliveryBtn,
	.segment2 .pickupBtn {
		width: 47.23%;
		height: 27px;
		padding: 0px;
	}

	/* Nav Menu */
	.menu,
	.menu ul {
		overflow: hidden;
		width: 100%;
	}

	.menu ul,
	.menu li {
		float: left;
	}

	.menu li {
		margin: 10px 0 0 2.4%;
	}

	.menu .jjSustainability a{
	    padding-bottom:2px;
	    position:relative;
	}

	.menu li a {
		display: block;
	}

	.lt-ie8 .menu li a {
		position: relative;
	}

	.lt-ie8 .menu li a .selectedGreyStar {
		position: absolute;
		top: 15px;
		left: 50%;
		margin-left: -11px;
	}

	.menu .first {
		margin-left: 2%;
	}

	.menu .selectedGreyStar{
		margin: 0 auto;
		display: none;
	}

	.jjMenu .selected .selectedGreyStar,
	.jjCatering .selected .selectedGreyStar,
	.findJJs .selected .selectedGreyStar,
	.storeSplitter .selected .selectedGreyStar,
    .jjCompany .selected .selectedGreyStar,
	.jjAbout .selected .selectedGreyStar,
    .jjContactUs .selected .selectedGreyStar,
    .jjFranchising .selected .selectedGreyStar{
		display: block;
	}

	.menu .sustainabilityLeafIconLrg {
		position: absolute;
		margin-top:-7px;
		margin-right:-24px;
		right:0;
	}

	.form label{
        line-height: 22px;
    }

	/* Footer */
	.wrapper .footerWrapper {
		width: 100%;
		background:transparent;
		-webkit-box-shadow: 0 -3px 2px 0 #cacaca;
		-moz-box-shadow: 0 -3px 2px 0 #cacaca;
		box-shadow: 0 -3px 2px 0 #cacaca;
	}

	.oldIE .wrapper .footerWrapper {
	    background:#fff;
	}

	footer{
	    position: absolute;
		bottom: 0;
		width:100%;
		z-index: 25;
		background:#fff;
		padding-top:20px;
		overflow:hidden;
	}

	.oldIE footer.pie{
	    position:absolute;
	}

	.globalFooterElements {
		background: #fff;
		overflow: hidden;
		max-width: 990px;
		margin: 0 auto;
	}

	footer .socialNav {
		float: none;
		width: 100%;
		margin: 12px auto 0;
	}

	.socialNav ul {
		float: none;
	}

	footer .socialNav a {
	    display: block;
	    margin: 10px 18px 5px 0;
		height: 32px;
		width: 32px;
	}

	footer .socialNav .last a {
	    margin: 10px 0 5px 0;
	    width:29px;
	}

	footer .utilityNav {
		float: none;
		width: 100%;
		margin: 0 auto;
	}

	.utilityNav {
		width: 600px;
	}

	.utilityNav .breakLink {
		clear: none;
		padding: 0;
	}

	.utilityNav .breakLink .fullSizeOnly {
		display: inline;
	}

	.utilityNav ul {
		width: 569px;
	}

	footer .copyright,
	footer .disclaimer {
		float: none;
		text-align: center;
		padding: 0 15% 1.5%;
	}

    /*---------------------------------------------- $CUSTOMER APPRECIATION DAY CADGOAD --*/
     .cadgaod {
            margin: 0 auto;
            text-align: center;
        }    

    .cadgaod-img {
            max-width: 702px;        
    }

	/*---------------------------------------------- $STORE SPLITTER --*/
    .storeSplitter .headingBar{
        margin:0 1.5%;
    }

    .giftCards {
        border-bottom: 0;
    }

    .sections {
        width: 47.5%;
        float: left;
        padding-top: 15px;
        margin-top:10px;
        padding-bottom:0;
        margin-right:0;
        margin-bottom:0;
    }

    .sections p{
        height:45px;
        clear:left;
        padding-top:25px;
    }

    .sections .small {
        width:62%;
        float:right;
        margin-right:0;
        margin-left:0;
    }

    .sections .redBtn{
        max-width:345px;
        float:left;
        width:100%;
    }

    .buttonHolder .redBtn{
        margin-bottom:0;
    }

    .sections .imgHeading{
        width:37.5%;
        max-width:135px;
    }

    .gear {
        padding-left: 3%;
        margin-left: 1.5%;
        border-left: 1px solid #cacaca;
        overflow: visible;
    }

    .sectionWrapper{
        padding-bottom:20px;
        margin:0 1.5%;
    }

    .itemImg img {
        margin-top: 10px;
    }
}

/*-------------------------*\
	725-768
\*-------------------------*/
@media all and (min-width: 725px) {
	.orderBar .segment1 {
		width: 27.22%;
	}

	.orderBar .segment2 {
		width: 31%;
	}

	.menu li {
		margin: 10px 0 0 4.5%;
	}
}

/*-------------------------*\
	769+
\*-------------------------*/
@media all and (min-width: 768px) {
    .content {
        padding-bottom: 110px;
    }

	.center {
	    max-width: 990px;
	}

	.orderBar .shadedBtn span {
		display: inline-block;
	}

	footer {
        height: 90px;
    }

	.utilityNav .breakLink {
		clear: none;
	}

	.utilityNav .breakLink .fullSizeOnly {
		display: inline;
	}

	footer .copyright,
	footer .disclaimer {
		float: left;
		clear: left;
		text-align: left;
		padding: 0 0 5px 1.5%;
	}

	footer .disclaimer {
		padding-bottom: 10px;
	}

	.lt-ie8 footer .copyright,
	.lt-ie8 footer .disclaimer {
		text-align: left;
		padding-left:1.5%;
	}
}

/*-------------------------*\
	769-859
\*-------------------------*/
@media all and (min-width: 769px) {
	.globalHeaderElements {
		width: 76.51%;
		margin-left: 3.48%;
	}

	.orderBar .shadedBtn span {
		display: inline-block;
	}

	.orderBar .loginBtn {
		margin: 22px 0 0 88px;
		padding-left: 25px;
	}

	.orderBar .loginBtn .whiteBtnStar {
		margin-right: 8.43%;
	}

	.orderBar .orSeparator {
		margin: 22px 0 0 1.29%;
	}

	.orderBar .segment1 {
		width: 28.2%;
	}

	.orderBar .segment2 {
		width: 32%;
	}

	.orderBar .orderStreet input {
		font-size: 13px;
	}

	.menu li {
		margin: 10px 0 0 4.1%;
	}

	.menu li a {
	    font-size: 13px;
	}

	.sustainabilityLeafIconLrg{
	    font-size:38px;
	}

	.utilityNav .breakLink {
		clear: none;
	}

	.utilityNav .breakLink .fullSizeOnly {
		display: inline;
	}
}

/*-------------------------*\
	860-885
\*-------------------------*/
@media all and (min-width: 885px) {
	.orderBar,
	.globalFooterElements.center {
		border-radius: 0;
	}

	.orderBar .loginBtn {
		margin: 22px 0 0 18.1%;
		padding-left: 0;
	}

	.orderBar .loginBtn .whiteBtnStar {
		display: inline-block;
	}

	.orderBar .loginBtn span {
		display: none;
	}

	.orderBar .segment1 {
		width: 30.92%;
	}

	.orderBar .segment2 {
		width: 30%;
	}

	.menu li {
             margin: 10px 0 0 4.7%;
	}

	.menu li a {
	    font-size: 14px;
	}

	.sustainabilityLeafIconLrg{
	    font-size:46px;
	}

	.redBtn {
        padding-top: 7px;
        padding-bottom: 7px;
        max-width:282px;
    }

    .behindInput{
        padding-top: 8px;
        padding-bottom: 6px;
    }

    .needsWebkitHack .behindInput{
        padding-top:7px;
    }

    .redBtn input{
        height:32px;
        line-height:26px;
    }

    .redBtn.submitBtn,
    a.submitBtn{
        padding-top:0;
        padding-bottom:0;
    }

    .shadedBtn {
        height: 24px;
        padding-top: 6px;
    }

    .form input[type="email"],
    .form input[type="text"],
    .form input[type="password"],
    .form input[type="tel"]{
        height: 30px;
    }

    .oldIE .form input[type="email"],
    .oldIE .form input[type="text"],
    .oldIE .form input[type="password"],
    .oldIE .form input[type="tel"]{
        line-height:30px;
    }

    .needsWebkitHack .form input[type="email"],
    .needsWebkitHack .form input[type="text"],
    .needsWebkitHack .form input[type="password"],
    .needsWebkitHack .form input[type="tel"] {
        line-height: normal;
    }

    .sections .small {
        width:65%;
    }

    footer .socialNav {
        float: right;
        width: 29%;
        margin: 15px 1.5% 0 0;
    }

    .socialNav ul {
        float: right;
    }

    footer .socialNav a {
        margin: 0 10px 0 0;
        height: 23px;
        width: 25px;
    }

    footer .socialNav .last a {
        margin: 0;
        width: 23px;
    }

    footer .socialNav a img {
        height: 100%;
        position: absolute;
        top: 0;
       left: 0;
    }

    footer .utilityNav {
        float: left;
        width: 66%;
        margin: 3px 0 0 1.5%;
    }

    .utilityNav ul {
        width: auto;
    }
}

/*--------------------------*\
	990+
\*--------------------------*/
@media all and (min-width:990px) {
	.orderBar {
		border-radius: 0 0 5px 0;
	}

	.menu li {
		margin: 10px 0 0 6.5%;
	}
}