/* Theme Name: Vedge Theme - Updated Theme URI: A J2 Partnership Production Description: A Custom Built Theme for Vedge Version: 1.5 Author: Jesse Chase (update by Roman Franklin) Author URI: http://www.j2designpartnership.com (http://romanfranklin.com) */ /* ============================================================================= HTML5 Reset ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display:block;} audio, canvas, video {display:inline-block;*display:inline;*zoom:1;} audio:not([controls]) {display:none;} [hidden] {display:none;} html {font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} html, button, input, select, textarea {font-family:sans-serif;color:#222;} a {text-decoration:none;} a:focus {outline:0;} a:hover, a:active {outline:0;} abbr[title] {border-bottom:1px dotted;} b, strong {font-weight:bold;} .clear {clear:both;} dfn {font-style:italic;} hr {display:block;height:1px;border:0;border-top:1px solid #CCC;margin:1em 0;padding:0;} ins {background:#FF9;color:#000;text-decoration:none;} mark {background:#FF0;color:#000;font-style:italic;font-weight:bold;} pre, code, kbd, samp {font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em;} pre {white-space:pre;white-space:pre-wrap;word-wrap:break-word;} q {quotes:none;} q:before, q:after {content:"";content:none;} small {font-size:90%;} sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sup {top:-0.5em;} sub {bottom:-0.25em;} ul {margin:0;padding:0;list-style:none;} ol {margin:15px;} dd {margin:0 0 0 40px;} nav ul{float: left} nav ul, nav ol {list-style:none;list-style-image:none;margin:0;padding:0;} img {border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;} svg:not(:root) {overflow:hidden;} figure {margin:0;} form {margin:0;} fieldset {border:0;margin:0;padding:0;} label {cursor:pointer;} legend {border:0;*margin-left:-7px;padding:0;white-space:normal;} button, input, select, textarea {font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} button, input {line-height:normal;} button, input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer;-webkit-appearance:none;*overflow:visible;} button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] {box-sizing:border-box;padding:0;*width:13px;*height: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;} button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0;} textarea {overflow:auto;vertical-align:top;resize:vertical;} input:valid, textarea:valid {} table {border-collapse:collapse;border-spacing:0;} td {vertical-align:top;} /* ============================================================================= General Styles ========================================================================== */ body{font-family:"proxima-nova", Helvetica, Arial, sans-serif; font-weight:600; font-size:18px; margin:0; height:100%; font-weight:300; line-height: 1.4; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; /* Optimise legibility for some CSS3 kerning */ color:#444; background: black;} .wrapper{width: 950px; margin: 0 auto; background: white; padding: 40px;transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} header{height:100px; background: rgba(1,1,1,.8); width:100%; float:right; position: relative; z-index: 10; transition: all 0.45s ease-in-out; -moz-transition: all 0.45s ease-in-out; -webkit-transition: all 0.45s ease-in-out;} header h1{text-align: center; font-size:55px;} header.closed{width:169px; float: right; height: 100px;} header.closed #headWrap{display: none} #headWrap{float:left; padding:0 0 0 55px; margin: 0; opacity:1; width:100%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc); } a.logo{display: block; float:left; width:170px; height:167px; top:0; background: url(images/logo.jpg); position: relative; transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -webkit-transition: top 0.3s ease-in-out; } a.logo.closed{top:-170px;} nav{float:left; margin-left: 50px; margin-top: 36px; opacity:1; transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; } nav li{float:left; margin-right:25px} nav li a{color:white; text-decoration: none; font-size: 13px; text-transform: uppercase; font-weight: 600;} nav.fade{opacity: 0} #panel{position: fixed; top: 100px; z-index: 0; bottom:0; left:-100%; width:50%; padding:109px 23px 95px 55px; background: rgba(1,1,1,.7); transition: all 0.45s ease-in-out; -moz-transition: all 0.45s ease-in-out; -webkit-transition: all 0.45s ease-in-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc)} #panel.open{left:0; min-width: 615px;} .menus #panel, .sauces #panel, .cookbook #panel{background: rgba(1,1,1,.8);} #panel.halfPanel{width: 50%; min-width: 615px; } #panel.widePanel{width: 100%} #jaxWrap{width: 100%; height: 100%; color: #FFF; overflow: hidden; opacity:1; box-sizing: border-box; transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out;} /*#jaxWrap img{display: block; width: auto; float: left; height: auto; }*/ #jaxWrap.faded{opacity: 0} #closePanel{color: white; position: absolute; z-index: 100; top:85px; right:23px; width:26px; height:24px; background:url(images/close.png); opacity: 1; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #jaxWrap input[type=image]{margin-top: 4px;} .menus #panel.widePanel, .sauces #panel.widePanel{padding-bottom: 180px} #loader{display:none; width:50px; height: 50px; position: absolute; top:50%; left:50%; margin-left: -25px; margin-top: -25px; z-index: 11; box-shadow: 0 0 6px 1px rgba(1,1,1,.6)} #loaderB{width:50px; height: 50px; position: absolute; top:50%; left:50%; margin-left: -25px; margin-top: -25px; z-index: 11; box-shadow: 0 0 6px 1px rgba(1,1,1,.6)} .grid{ background-color:#222; float:left; height:25px; width:25px; -moz-animation-name:aniGrid; -moz-animation-duration:1.5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -webkit-animation-name:aniGrid; -webkit-animation-duration:1.5s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -ms-animation-name:aniGrid; -ms-animation-duration:1.5s; -ms-animation-iteration-count:infinite; -ms-animation-direction:linear; -o-animation-name:aniGrid; -o-animation-duration:1.5s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; animation-name:aniGrid; animation-duration:1.5s; animation-iteration-count:infinite; animation-direction:linear; } a.navicon{ position: absolute; top: 0; right: 0; width: 21px; height: 17px; background: url(images/navicon@2x.png) no-repeat center center; z-index: 100; background-size: 21px; display: none; padding: 22px;} .jPanelMenu-panel{position: absolute!important; } #jPanelMenu-menu{background: black; margin:0; z-index: 1!important} #pageslide {display: none; position: absolute; position: fixed; top: 0; height: 100%; z-index: 999999; width:75%; min-width: 260px; padding: 0; background-color: #272727; color: #FFF; -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, .6); box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, .6);} #pageslide nav{margin: 0; width:100%;} #pageslide ul{width: 100%; padding-top: 10px} #pageslide li{border-bottom: 1px solid #414141; margin: 0; margin-bottom: 5px; padding-bottom: 5px;} #pageslide li a{padding:0 20px;} #mobileMenu a{color:white;} #load1{ -moz-animation-delay:.15s; -webkit-animation-delay:.15s; -ms-animation-delay:.15s; -o-animation-delay:.15s; animation-delay:.15s; } #load2{ -moz-animation-delay:.3s; -webkit-animation-delay:.3s; -ms-animation-delay:.3s; -o-animation-delay:.3s; animation-delay:.3s; } #load3{ -moz-animation-delay:.45s; -webkit-animation-delay:.45s; -ms-animation-delay:.45s; -o-animation-delay:.45s; animation-delay:.45s; } #load4{ -moz-animation-delay:.6s; -webkit-animation-delay:.6s; -ms-animation-delay:.6s; -o-animation-delay:.6s; animation-delay:.6s; } @-moz-keyframes aniGrid{50%{background-color:#a49a00}} @-webkit-keyframes aniGrid{ 50%{background-color:#a49a00}} @-ms-keyframes aniGrid{50%{background-color:#a49a00}} @-o-keyframes aniGrid{50%{background-color:#a49a00}} @keyframes aniGrid{50%{background-color:#a49a00}} #miniSlide{position: absolute; bottom:55px; left:55px; width:500px; z-index: 100; display: none} #miniSlide p{color: white; font-size: 18px; margin: 0} #miniSlide h2{font-size: 35px; font-family: "museo-slab"; font-weight: 300; margin-bottom: 6px;color:white;} a.btn{text-transform: uppercase; color: white!important; font-weight: 600; font-size: 13px; padding: 9px 16px; display: block; float: left; margin-right: 5px; margin-top: 20px} a.grnBtn{background: #4d4d4d} a.gryBtn{background: #a49a00} #controller{margin-top: 40px; clear:left; float:left;} #controller li{float: left; border-top: 4px solid white; position: relative; padding-top: 7px; } /*#controller li:first-child a{padding-left: 0} #controller li:last-child a{padding-right: 0; }*/ #controller li a{font-size: 13px; text-transform: uppercase; font-weight: 600; padding: 0 10px 0 10px; color:white; margin: 0 3px;} #controller li.active{border-top: 4px solid #a49a00;} #controller li.active:after{ content:""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #a49a00;position: absolute; left:50%; margin-left: -8px; top:0;} #credit{position: absolute; bottom:55px; right:55px; opacity: 1; transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out;} #credit h2{color:white; font-size: 25px; font-family: "museo-slab"; font-weight: 300; margin-bottom: 8px; text-align: right;} #credit p{color:white; font-size: 13px; text-transform: uppercase; font-weight: 600; text-align: right; margin:0; padding: 0} #credit p a{color: white} #credit p span{margin-right: 10px} #credit p span:last-of-type{margin-right: 0} #credit.closed{opacity: 0} .social {float: right; margin: 12px 0 0 0;} .social li{float:left; margin-right: 10px;} .social li:last-child{margin-right: 0} .social li a{display: block; background-image: url(images/social.png); width:30px; height:30px;} .social li.facebook a{background-position: 0 0} .social li.twitter a{background-position: -35px 0} .social li.instagram a{background-position: -70px 0} .content .social{float: left; margin-top:5px;} /*.galMode{position: absolute; top: 42px; right: 30px; z-index: 11; color: #FFF; text-decoration: none; font-size: 13px; text-transform: uppercase; font-weight: 600; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}*/ .galMode:before{content:""; width:19px; height:14px; background: url(images/gallery.png) no-repeat; margin-right: 10px; display: inline; float: right; position: relative; top: 6px; left: 10px;} .galMode.open{} #directionWrap{position: absolute; top:0; left:0; width:100%; height:100%; overflow: hidden;} #smallLogo{position: absolute; top: 0; width:100px; height:100px; background: url(images/medLogo.jpg); left:-100px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #smallLogo.open{left:0;} #vignette{position: absolute; top:0; left:0; width:100%; height:100%; background:url(images/vignette.png) no-repeat; background-size: cover; -ms-behavior: url(js/backgroundsize.min.htc);} #grid{width:100px; height:100px; z-index:10; cursor:pointer; display: block; position: absolute; background:white url(images/grid.png) center center no-repeat; background:rgba(255,255,255, .9) url(images/grid.png) center center no-repeat; right: 169px; top: -170px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #grid.open{top:0;} .content h2.headline:first-of-type{margin-top: 0px} .content p{margin: 0 0 20px 0} .content a{color:#a49a00;} h2.headline{color:white; font-size: 30px; font-family: "museo-slab"; font-weight: 300; margin: 40px 0 20px 0; float: left; width: 100%;} .faq h2.headline{ font-size: 23px; margin: 16px 0 0px 0;} .faq a.btn{margin-bottom: 22px;} .faq p{clear:left;} .press h2.headline{ font-size: 21px; margin: 0px 0 3px 0;} .events h2.headline{ font-size: 21px; margin: 0px 0 3px 0;} h2.pressLine{margin-bottom: 14px!important; font-size: 30px!important} .contact h2.headline{ font-size: 23px; margin: 0px 0 3px 0;} a.reserve{display: block; float: left; padding: 8px 18px; margin-top:15px; background: #a49a00; color:white; } ul#menus{width:100%; float:left; margin-left: -15px;} ul#menus li{float: left; padding: 0 15px 30px 15px; position: relative; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc); } /*ul#menus li:nth-child(3n+3){margin-right: 0}*/ ul#menus li a{display: block; color: white; position: relative; float: left; width: 100%;} ul#menus li img{ display: block; width: 100%; float: left; height: auto; box-shadow: 0px 0px 17px 2px rgba(1, 1, 1, .3);} ul#menus li .overlay{display: block; opacity: 1;width: 100%; background: rgba(0, 0, 0, .5);bottom: 0; top: 0; position: absolute; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} ul#menus li .overlay p{text-align: center; width: 100%; position:absolute; top:50%; margin-top: -5px; line-height: 1.2; text-transform: uppercase; font-size: 15px; font-weight: 600; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc)} ul#menus li .noverlay{display: block;width: 100%; position: absolute; top: 0; bottom: 0;} ul#menus li a div{ background: #A49A00; text-align: center; opacity: 0; border: none; line-height: 1.2; text-transform: uppercase; color: #FFF; font-weight: 600; font-size: 13px; padding: 9px 16px; display: block; width: 147px; margin: -14px 0 0 -90px; position: absolute; top: 50%; left: 50%; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} ul#menus li a:hover div{opacity:1;} ul#menus li a:hover .overlay{opacity: 0} ul.pressItems li{float: left; width: 100%; margin-bottom: 15px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.14);} ul.pressItems li:last-child{padding-bottom: 0; border: none} ul.pressItems li p{margin:0; color: #969696;} ul.pressItems li a{color:white; font-size: 15px; text-decoration: underline;} #saucesWrap{float:left; width:100%;} .cookbook #sauceLeft{max-width: 1024px} #sauceLeft{float:left; max-width: 1200px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc); } #sauceRight{float:left; margin:0 30px 30px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc); } #sauceLeft img{max-width: 200px; float: left; margin:0 30px 30px 0;} .sauces #sauceLeft img {max-height: 380px;} #sauceLeft form img{margin: 0!important} .pushContent{width: 100%; padding-left: 230px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc);} /* SLIDESHOW */ /*#supersized-loader {background:#222 url(images/loaderB.gif) center center no-repeat; width: 48px; height: 48px; position: absolute; top: 50%; left: 50%; z-index: 10; margin-left: -24px; z-index: 11; margin-top: -24px; text-indent: -999px}*/ #supersized-loader{} #supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; } #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; } #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/ #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/ #supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; } #supersized a { width:100%; height:100%; display:block; } #supersized li.prevslide { z-index:-20; } #supersized li.activeslide { z-index:-10; } #supersized li.image-loading { background:#111 url(images/progress.gif) no-repeat center center; width:100%; height:100%; } #supersized li.image-loading img{ visibility:hidden; } #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; } #navigation { float:right; margin:0px 20px 0 0; } #prevslide, #nextslide{ position:absolute; height:56px; width:56px; top:50%; margin-top:-28px; opacity:1; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #prevslide.show{left:0;} #nextslide.show{right:0;} #prevslide{ left:-100px; background:url('images/back.png'); } #nextslide{ right:-100px; background:url('images/forward.png'); } #prevslide:active, #nextslide:active{ opacity: 1; } #prevslide:hover, #nextslide:hover{ cursor:pointer; opacity: 1} #nextthumb,#prevthumb { z-index:2; display:none; position:fixed; bottom:61px; height:75px; width:100px; overflow:hidden; background:#ddd; border:1px solid #fff; -webkit-box-shadow:0 0 5px #000; } #nextthumb { right:12px; } #prevthumb { left:12px; } #nextthumb img, #prevthumb img { width:150px; height:auto; } #nextthumb:active, #prevthumb:active { bottom:59px; } #nextthumb:hover, #prevthumb:hover { cursor:pointer; } #thumb-tray{ position:fixed; z-index:3; bottom:-150px; left:0; background:rgba(1,1,1, .8); height:108px; width:100%; overflow:hidden; text-align:center; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #thumb-tray.open{bottom: 0!important} #thumb-back, #thumb-forward{ position:absolute; z-index:5; bottom:9; height:108px; width:40px; } #thumb-back{ left:20px; background: url('images/back.png') no-repeat center center;} #thumb-forward{ right:20px; background:url('images/forward.png') no-repeat center center;} #thumb-back:hover, #thumb-forward:hover{ cursor:pointer; } ul#thumb-list{ display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px; } ul#thumb-list li{ background:#111; list-style:none; display:inline; width:150px; height:108px; overflow:hidden; float:left; margin:0; } ul#thumb-list li img { width:200px; height:auto; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; } ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); } ul#thumb-list li:hover{ cursor:pointer; } /** custom scrollbar **/ .nano { position : relative; width: 100%; height: 100%; overflow : hidden;} .nano .content {position: absolute; overflow: scroll; overflow-x: hidden; top: 0; padding-right: 95px!important; bottom: 0; left: 39px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc)} .menus .nano .content{right: 0px!important; padding-right: 19px!important;} .nano .content:focus {outline: none;} .nano .content::-webkit-scrollbar {visibility: hidden;} .has-scrollbar .content::-webkit-scrollbar {visibility: visible;} .nano > .pane { background: rgba(255,255,255,.12); position: absolute; width: 10px; right: 7px; top: 35px; bottom: 0; visibility: hidden\9; /* Target only IE7 and IE8 with this hack */ opacity: .01; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;} .nano > .pane > .slider {background: #a49a00; position: relative; margin: 0 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} .nano:hover > .pane, .pane.active, .pane.flashed {visibility : visible\9; /* Target only IE7 and IE8 with this hack */opacity: 0.99;} /* FLEXSLIDER */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} #testimonials p{color:white; font-size: 30px; font-family: "museo-slab"; font-weight: 300; line-height: 1.2 } #testimonials cite{display: block; float:left; color:white; font-size: 14px; text-transform: uppercase; font-weight: 600; width:100%; margin: 8px 0 10px 0} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider blockquote{margin: 0 0 12px 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .testi > blockquote {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after, .testi:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides, html[xmlns] .testi {display: block;} * html .slides, * html .testi {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} .no-js .testi > blockquote:first-child{display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {position: relative; zoom: 1;} .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} .loading .flex-viewport {max-height: 300px;} .flexslider .slides, .flexslider .testi {zoom: 1;} /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -18px; text-align: left;} .flex-control-nav li {margin: 0 12px 0 0; display: block; float: left; padding: 0;} .flex-control-paging li a {color: #fff; display: block; cursor: pointer; font-size: 14px; text-transform: uppercase; font-weight: 600;} .flex-control-paging li a:hover { } .flex-control-paging li a.flex-active { cursor: default; color: #A49A00; } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media only screen and (min-width: 0) and (max-width: 1370px){ .pushContent{padding-left: 0; clear: left } .sauces #sauceLeft img {max-height: auto!important; max-width: 100%; margin-right: 0;} .cookbook #sauceLeft img {max-height: auto!important; max-width: 100%; margin-right: 0;} } @media only screen and (min-width: 0) and (max-width: 1260px) { nav{margin-top: 29px} nav li{float: none; margin-right: 37px; margin-bottom: 4px;} header {height: 167px;} #panel{top: 167px; padding-top: 30px} .nano .content{left: 0} #closePanel{top:25px;} #sauceRight img{max-width: 100%;} #credit { width: 100%; left: 0; bottom: 13px; padding-left: 55px; padding-right: 55px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc)} #credit ul{margin-top: 0; float: right; clear: none; position: relative; top: -13px;} #miniSlide{bottom: 140px;} #credit p,#credit h2{text-align: left; float:left; margin-bottom: 1px;} #credit p span{margin-right: 10px; display: inline;clear:none; float:left;} #credit p{clear: left;} } @media only screen and (min-width: 0) and (max-width: 1015px){ ul#menus li{width:50%;} } @media only screen and (min-width: 0) and (max-width: 840px){ /* #credit{left:55px; right:auto; bottom: 19px; width: auto}*/ .halfPanel{width: 100%!important} #panel{width: 100%} .menus #panel.widePanel, .sauces #panel.widePanel{padding-bottom: 95px} #panel.open{min-width: auto} /*ul#menus li:nth-child(2n+2){padding-right: 0}*/ /* #sauceLeft{width:100%; padding:0; max-width: 100%} #sauceRight{width:100%; padding:0;} #sauceRight{margin-top: 30px}*/ } @media only screen and (min-width: 0) and (max-width: 750px){ /*.galMode{display: none}*/ .closed{display: none} a#grid{display: none} header{transition: none; -moz-transition: none; -webkit-transition: none} } @media only screen and (min-width: 0) and (max-width: 700px){ #sauceLeft img{max-height: 100%; max-width: 100%;} #sauceLeft p{clear: left;} } @media only screen and (min-width: 0) and (max-width: 615px){ #panel.halfPanel{min-width: 0} #panel{transition: none; -moz-transition: none; -webkit-transition: none} } @media only screen and (min-width: 0) and (max-width: 660px){ #panel {top: 118px;} a.logo{width: 120px; background-size: 120px; height: 117px;} header{height: 118px; position: absolute; left: 0; width: 100%;} #miniSlide{width: 360px;} #testimonials p{font-size: 26px} nav {margin-left: 27px; margin-top: 19px;} nav li{margin-bottom: 1px} #headWrap nav{display: none} a.navicon{display: block} #closePanel {display: none} } @media only screen and (min-width: 0) and (max-width: 500px){ #panel{padding:50px 20px 0px 20px} #panel.open{min-width: 100px!important} #headWrap{padding-left: 20px} #credit { width: 100%; left: 0; bottom: 20px; padding-left: 25px; padding-right: 25px} #credit h2{font-size: 23px; font-family: "museo-slab"; font-weight: 300; text-transform: none} #credit p span{clear:left;} #credit ul{margin-top: 12px; float: left; clear: left; position: relative; top: auto;} #testimonials p{font-size: 22px} #controller li a{font-size: 11px; padding: 0 3px 0 3px} #miniSlide {width: 100%; bottom:135px; padding-right: 25px; padding-left: 25px; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc)} #miniSlide{display: none!important} .nano .content{right: 0px!important; padding-right:0!important;} .menus .nano .content{right: 0!important} .nano > .pane{display: none!important} h2.headline{font-size: 24px; margin: 10px 0 14px 0} .content p{font-size: 15px;} #thumb-tray{display: none!important} header{background: none} a.logo{width: 55px; height: 55px; background-size: auto; background: url(images/smalllogo.jpg);} #wrap.home a.logo, #wrap.vedge a.logo{width: 120px; height: 117px; background: url(images/logo.jpg); background-size: 120px; } #panel{top:0; padding-top: 80px} .menus #panel.widePanel, .sauces #panel.widePanel {padding-bottom: 0;} #wrap.home #panel, #wrap.vedge #panel{top:118px; padding-top: 50px} #credit{display: none} #wrap.home #credit, #wrap.vedge #credit{display: block} ul#menus li{padding-right: 10px; padding-left: 10px} ul#menus li:nth-child(2n+2){padding-right: 0} ul#menus li:nth-child(2n+1){padding-left: 0} ul#menus{margin-left: 0} } @media only screen and (min-width: 0) and (max-width: 450px){ ul#menus li{padding:0 10px 0 0; width:100%; margin-bottom: 20px} ul#menus{margin-left: 0} ul#menus li{padding:0!important;} } /* ============================================================================= Non-Semantic Classes ========================================================================== */ /* Custom Selection Styles */ ::selection {background:#ccc;color:#FFF;text-shadow:none;} ::-webkit-selection {background:#ccc;color:#FFF;text-shadow:none;} ::-moz-selection {background:#ccc;color:#FFF;text-shadow:none;} /* Input focus styles */ input:focus {outline:0;border:1px solid #0091BD;} /* Gets rid of blue glow on field focus, adds border color instead */ /* ============================================================================= WordPress Core CSS Styles ========================================================================== */ .alignnone {margin:5px 20px 20px 0;} .aligncenter,div.aligncenter {display:block;margin:5px auto 5px auto;} .alignright {float:right;margin:5px 0 20px 20px;} .alignleft {float:left;margin:5px 20px 20px 0;} .aligncenter {display:block;margin:5px auto 5px auto;} a img.alignright {float:right;margin:5px 0 20px 20px;} a img.alignnone {margin:5px 20px 20px 0;} a img.alignleft {float:left;margin:5px 20px 20px 0;} a img.aligncenter {display:block;margin-left:auto;margin-right:auto;} .wp-caption {background:#FFF;border:1px solid #F0F0F0;max-width:96%;padding:5px 3px 10px;text-align:center;} .wp-caption.alignnone {margin:5px 20px 20px 0;} .wp-caption.alignleft {margin:5px 20px 20px 0;} .wp-caption.alignright {margin:5px 0 20px 20px;} .wp-caption img {border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto;} .wp-caption p.wp-caption-text {font-size:11px;line-height:17px;margin:0;padding:0 4px 5px;} /* ========================================================================== Print styles ========================================================================== */ @media print { * {background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;} a,a:visited {text-decoration:underline;} a[href]:after {content:" (" attr(href) ")";} abbr[title]:after {content:" (" attr(title) ")";} .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content:"";} pre,blockquote {border:1px solid #999;page-break-inside:avoid;} thead {display:table-header-group;} tr,img {page-break-inside:avoid;} img {max-width:100% !important;} @page {margin:0.5cm;} p,h2,h3 {orphans:3;widows:3;} h2,h3 {page-break-after:avoid;} } /* ========================================================================== V Street Nav Edits ========================================================================== */ li.v-street { position: absolute; top: 28px; right: 0; } @media only screen and (min-width: 0) and (max-width: 660px){ li.v-street { top: auto; bottom: 30px; right: auto; left: 0; } #pageslide li:last-of-type { border: none; } } @media only screen and (min-height: 0) and (max-height: 450px){ #pageslide li { margin-bottom: 0; padding-bottom: 0; } li.v-street { bottom: 10px; } li.v-street img { width: 30px; height: 30px; } } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- VEDGE 1.5 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------*/ body { font-family: Helvetica, "proxima-nova", Arial, sans-serif; overflow-x: hidden; } /* Header */ header { background: none; } header nav li { position: relative; padding: 10px 20px 0; } header nav li a { font-size: 1em; font-weight: 400; } header nav ul ul { opacity: 0; position: absolute; top: 0; left: 20px; right: 0; transition: .25s; height: 0px; overflow: hidden; } header nav ul ul li { float: none; line-height: 14px; margin: 9px 0; padding: 0; } header nav ul ul li a { font-size: 0.8em; } header nav ul li:hover > ul { opacity: 1; top: 100%; height: auto; padding-bottom: 10px; } #headWrap { padding: 0 0 0 10px; } a.logo { margin-top: 10px; width: 123px; height: 120px; background-size: 100%; } /* Panel */ #panel { top: 172px; padding: 50px 23px 50px 55px; z-index: 2; } #closePanel { top: 30px; } #panel.widePanel { width: 75%; } ul.menu-sidebar { padding: 0; margin: 27px 0 0; height: 100%; width: 25%; float: left; position: fixed; text-align: center; left: 0; } ul.menu-sidebar li { margin: 10px 0; } .menu-content { position: absolute; left: 25%; width: 70%; } .vedge-menu-section { width: 50%; float: left; padding: 0 30px; box-sizing: border-box; } .content h2.headline { font-family: Helvetica, Arial, sans-serif; font-weight: 600; } ul.vedge-select { padding: 0; margin: 0; } ul.vedge-select li { float: left; width: 47.5%; position: relative; } ul.vedge-select li .sel-overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #fff; } .sel-overlay h2 { text-align: center; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-transform: uppercase; } ul.vedge-select li:hover > .sel-overlay { background: rgba(255, 255, 255, 0.6); color: #000; } ul.vedge-select li:first-child { margin-right: 5%; } ul.vedge-select li img { height: 100% !important; width: 100% !important; object-fit: cover; } #credit h2 { font-family: Helvetica, arial; margin: 0; font-weight: 400; font-size: 28px; } #credit p { font-family: Helvetica, arial; font-size: 14px; font-weight: 400; } .credit-container { float: left; } .credit-container:first-child { margin-right: 30px; margin-top: 10px; } .outer-nav { width: 130px; height: 130px; position: absolute; right: 45px; } .outer-nav-mobile { position: absolute; bottom: 5px; left: 15px; width: 130px; height: 130px; } .outer-nav-section { position: relative; } .outer-nav-section:last-child { top: -3px; } .outer-nav-section:hover { z-index: 10; } ul.restaurants { margin-top: 9px; width: 130px; height: 63px; } ul.restaurants li { float: left; border-bottom: 3px solid #fff; height: 63px; width: 65px; box-sizing: border-box; overflow: hidden; } ul.restaurants li.vstreet { background: url('images/vst-logo.png') center 10px no-repeat; } ul.restaurants li.vstreet:hover { background-position: center -40px; } ul.restaurants li.wizkid { background: url('images/wk-logo.png') center 10px no-repeat; background-size: 48px; } ul.restaurants li.wizkid:hover { background-position: center -40px; } ul.restaurants li:hover { border-bottom: 3px solid #a49a00; } ul.social-bar { margin: 0; width: 130px; } ul.social-bar li { height: 43px; width: 43.334px; box-sizing: border-box; padding-top: 10px; float: left; border-top: 3px solid #fff; } ul.social-bar li.facebook { background: url('images/facebook.png') center top no-repeat; background-size: 30px; } ul.social-bar li.twitter { background: url('images/twitter.png') center top no-repeat; background-size: 30px; } ul.social-bar li.instagram { background: url('images/instagram.png') center top no-repeat; background-size: 30px; } ul.social-bar li.facebook:hover, ul.social-bar li.twitter:hover, ul.social-bar li.instagram:hover { background-position: center -40px; } ul.social-bar li:hover { border-top: 3px solid #a49a00; } /*---------------------------- POPUP -----------------------------*/ .vedge-popup { background: url('images/vedge-popup.png') top left no-repeat; background-size: cover; width: 30%; position: absolute; top: 50%; right: 50%; margin-right: -255px; transform: translate(0, -50%); box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3); } .vedge-popup:after { content: ""; display: block; padding-bottom: 58%; } .pu-fade-in { animation: fade-in .25s ease-in both; animation-delay: 2s; } @keyframes fade-in { 0% { opacity: 0; transform: translate(100%, -50%); } 100% { opacity: 1; transform: translateY(0, -50%) } } #popup-close { position: absolute; top: 10px; right: 10px; color: #fff; height: 30px; width: 30px; cursor: pointer; text-align: center; } .popup-header { position: absolute; right: 0; top: 10%; width: 61%; } .popup-header h2 { color: #fff; text-align: center; font-size: 1.7em; margin: 10px 0; } .popup-content { position: absolute; right: 0; width: 60%; height: 60%; top: 23%; padding: 0 25px; box-sizing: border-box; } .popup-learn-more { position: absolute; bottom: 3%; right: 5%; } .popup-content p { line-height: 20px; } .popup-content span.small { font-size: 0.8em; margin-left: 30px; } .popup-learn-more a:link, .popup-learn-more a:visited, .popup-learn-more a:hover, .popup-learn-more a:active { color: #fff; } @media (max-width: 568px) { #social { right: 10px; bottom: 10px; display: none; } #credit { padding: 0 25px; } .credit-container:first-child { margin: 0; } .credit-container:nth-child(2) { display: none; } #credit h2 { font-size: 18px; } #credit p { font-size: 10px; } #credit p span { clear: none; float: left; } .vedge-popup { width: 95%; right: 2.5%; } } /*------------------------------ FIXES ---------------------------------*/ .flexslider .testi > blockquote { margin: 0; } .nano .content { left: 0; width: 100%; } #miniSlide { max-height: 185px; bottom: 35px; } #testimonials p { font-family: Helvetica, Arial, sans-serif; font-size: 24px; line-height: 1.4em; } #testimonials a:link, #testimonials a:visited { color: #fff; } #testimonials cite { /*text-align: right;*/ } .flex-control-nav { width: 100px; bottom: -15px; left: 50%; margin-left: -55px; text-align: center; } .flex-viewport { max-height: 135px; } .cookbook-wrap { float: left; width: 100%; } .cookbook-images { max-width: 200px; float: left; } .cookbook-left { float: left; max-width: 1200px; box-sizing: border-box; } .cookbook-left img{ max-width: 200px; height: auto; float: left; margin: 0 30px 30px 0; } @media only screen and (max-width: 1500px) { .cookbook-images { width: 100%; max-width: 100%; margin-left: -5%; } .pushContent { padding-left: 0; } #jaxWrap .cookbook-left img { max-width: 45%; margin-left: 5%; margin-right: 0; } } @media only screen and (max-width: 1260px) { #credit { width: auto; padding-right: 0; bottom: 35px; right: 25px; left: inherit; } .credit-container:first-child { margin-top: -6px; } #credit h2 { font-size: 24px; } #credit p { font-size: 12px; } nav li { float: left; margin-right: 20px; margin-bottom: 0; margin-top: 13px; } } @media only screen and (max-width: 1081px) { header nav li { margin-right: 0; padding: 10px 10px 0; } .credit-container { float: none; } } @media only screen and (max-width: 905px) { nav { margin-left: 10px; } #social { right: 15px; } } @media only screen and (max-width: 850px) { .outer-nav { display: none; } } @media only screen and (min-width: 660px) and (max-width: 768px) { .vedge-menu-section { float: none; width: auto; } } @media only screen and (max-width: 660px) { #social { display: none; } .credit-container ul.social-bar { display: none; } nav li { float: none; } .vedge-popup { display: none; } #headWrap { padding-left: 20px; } header { height: 75px; } #panel { top: 0; padding: 85px 10px 40px 20px; } #panel.widePanel { width: 100%; } ul.menu-sidebar { display: none; } .menu-content { width: 100%; left: 0; box-sizing: border-box; padding: 15px; } a.logo { height: 55px; width: 55px; } .menus .nano .content { padding-right: 0 !important; } ul.vedge-select li { width: 100%; margin-bottom: 20px; } #pageslide li { margin-bottom: 15px; padding-bottom: 15px; } #pageslide li:last-of-type { border-bottom: 1px solid #414141; } #pageslide ul.restaurants, #pageslide ul.social-bar { padding-top: 0; } #pageslide .outer-nav-mobile ul.restaurants li, #pageslide .outer-nav-mobile ul.social-bar li { padding-bottom: 0; margin-bottom: 0; } #pageslide .outer-nav-mobile ul.restaurants li { border-bottom: 3px solid #fff; } #pageslide .outer-nav-mobile ul.social-bar li { border-bottom: 0; border-top: 3px solid #fff; } } @media only screen and (max-width: 500px) { .vedge-menu-section { float: none; width: auto; } } body.admin-bar a.navicon { top: 50px; } a.pdf-btn { text-transform: uppercase; color: #fff; font-weight: 600; font-size: 13px; padding: 9px 16px; display: block; border: 2px solid #fff; float: left; margin: 20px 5px 5px 0; transition: .3s; } a.pdf-btn:hover, a.pdf-btn:active { background: #fff; color: #000; } /*------------------------------------------ SLIDER IMAGES ADMIN ----------------------------------------------------- */ .vedge-slider-container { width: 100%; border: 1px solid #ccc; background: #f6f6f6; height: 200px; }