/****************************************************************** Site Name: Fermí Puig Author: Thomas Winter Stylesheet: Main Stylesheet ******************************************************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /********************* CLEARFIXIN' *********************/ .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /********************* TOOLS *********************/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .image-replacement { text-indent: 100%; white-space: nowrap; overflow: hidden; } /********************* COLORS Need help w/ choosing your colors? Try this site out: http://0to255.com/ *********************/ /********************* TYPOGRAPHY *********************/ /* @font-face { font-family: 'Font Name'; src: url('http://www.restaurantfermipuig.com/css/library/fonts/font-name.eot'); src: url('http://www.restaurantfermipuig.com/css/library/fonts/font-name.eot#iefix') format('embedded-opentype'), url('http://www.restaurantfermipuig.com/css/library/fonts/font-name.woff') format('woff'), url('http://www.restaurantfermipuig.com/css/library/fonts/font-name.ttf') format('truetype'), url('http://www.restaurantfermipuig.com/css/library/fonts/font-name.svg#font-name') format('svg'); font-weight: normal; font-style: normal; } */ /* use the best ampersand http://simplebits.com/notebook/2008/08/14/ampersands-2/ */ span.amp { font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important; font-style: italic; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .alert-help, .alert-info, .alert-error, .alert-success { margin: 10px; padding: 5px 18px; border: 1px solid; } .alert-help { border-color: #e8dc59; background: #ebe16f; } .alert-info { border-color: #bfe4f4; background: #d5edf8; } .alert-error { border-color: #f8cdce; background: #fbe3e4; } .alert-success { border-color: #deeaae; background: #e6efc2; } /********************* TRANSITION *********************/ /********************* CSS3 GRADIENTS Be careful with these since they can really slow down your CSS. Don't overdo it. *********************/ /* @include css-gradient(#dfdfdf,#f8f8f8); */ /********************* BOX SIZING *********************/ /* @include box-sizing(border-box); */ /********************* BUTTONS *********************/ .button, .button:visited { font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif; border: 1px solid #907c5a; border-top-color: #a08b68; border-left-color: #a08b68; padding: 4px 12px; color: white; display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; margin-bottom: 20px; line-height: 21px; border-radius: 4px; background-color: #a4906e; background-image: -webkit-gradient(linear, left top, left bottom, from(#ae9c7e), to(#a4906e)); background-image: -webkit-linear-gradient(top, #ae9c7e, #a4906e); background-image: -moz-linear-gradient(top, #ae9c7e, #a4906e); background-image: -o-linear-gradient(top, #ae9c7e, #a4906e); background-image: linear-gradient(to bottom, #ae9c7e, #a4906e); } .button:hover, .button:focus, .button:visited:hover, .button:visited:focus { color: white; border: 1px solid #907c5a; border-top-color: #7a694c; border-left-color: #7a694c; background-color: #998460; background-image: -webkit-gradient(linear, left top, left bottom, from(#a4906e), to(#998460)); background-image: -webkit-linear-gradient(top, #a4906e, #998460); background-image: -moz-linear-gradient(top, #a4906e, #998460); background-image: -o-linear-gradient(top, #a4906e, #998460); background-image: linear-gradient(to bottom, #a4906e, #998460); } .button:active, .button:visited:active { background-color: #ae9c7e; background-image: -webkit-gradient(linear, left top, left bottom, from(#a4906e), to(#ae9c7e)); background-image: -webkit-linear-gradient(top, #a4906e, #ae9c7e); background-image: -moz-linear-gradient(top, #a4906e, #ae9c7e); background-image: -o-linear-gradient(top, #a4906e, #ae9c7e); background-image: linear-gradient(to bottom, #a4906e, #ae9c7e); } .blue-button, .blue-button:visited { border-color: #1472ad; text-shadow: 0 1px 1px #1472ad; background-color: #1681c4; background-image: -webkit-gradient(linear, left top, left bottom, from(#1990db), to(#1681c4)); background-image: -webkit-linear-gradient(top, #1990db, #1681c4); background-image: -moz-linear-gradient(top, #1990db, #1681c4); background-image: -o-linear-gradient(top, #1990db, #1681c4); background-image: linear-gradient(to bottom, #1990db, #1681c4); box-shadow: inset 0 0 3px #59b3ec; } .blue-button:hover, .blue-button:focus, .blue-button:visited:hover, .blue-button:visited:focus { border-color: #116396; background-color: #1472ad; background-image: -webkit-gradient(linear, left top, left bottom, from(#1784c9), to(#1472ad)); background-image: -webkit-linear-gradient(top, #1784c9, #1472ad); background-image: -moz-linear-gradient(top, #1784c9, #1472ad); background-image: -o-linear-gradient(top, #1784c9, #1472ad); background-image: linear-gradient(to bottom, #1784c9, #1472ad); } .blue-button:active, .blue-button:visited:active { background-color: #1990db; background-image: -webkit-gradient(linear, left top, left bottom, from(#1681c4), to(#1990db)); background-image: -webkit-linear-gradient(top, #1681c4, #1990db); background-image: -moz-linear-gradient(top, #1681c4, #1990db); background-image: -o-linear-gradient(top, #1681c4, #1990db); background-image: linear-gradient(to bottom, #1681c4, #1990db); } /*---------------------------- FERMI PUIG SPECIAL ----------------------------*/ /* convert Px to Ems */ /* section box shadow */ /* column widths */ /* BASE SIZE */ /* jQuery FlexSlider v2.0 http://www.woothemes.com/flexslider/ Copyright 2012 WooThemes Free to use under the GPLv2 license. http://www.gnu.org/licenses/gpl-2.0.html Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .contentslider a:active, .flex-container a:focus, .contentslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } /* FlexSlider Necessary Styles *********************************/ .contentslider { margin: 0; padding: 0; } .contentslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { 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; } /* FlexSlider Default Theme *********************************/ .contentslider { margin: 0 0 0 0; position: relative; zoom: 1; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .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; } .contentslider .slides { zoom: 1; } /* Direction Nav */ .flex-direction-nav { * height: 0; } .flex-direction-nav a { width: 24px; /* 16px */ height: 31px; display: block; position: absolute; top: 49%; margin-top: -15px; cursor: pointer; text-indent: -9999px; outline: 0; background-color: transparent; background-image: url("../images/arrows.png"); background-repeat: no-repeat; background-size: 50px 80px; /*40px 80px*/ background-position: -25px 0px; /*-20px 0px;*/ } .flex-direction-nav .next { right: -30px; background-position: 0px 0px; } .flex-direction-nav .prev { left: -30px; } .flex-direction-nav .next:hover { background-position: 0px -40px; } .flex-direction-nav .prev:hover { background-position: -25px -40px; /*-20px 0px;*/ } .flex-direction-nav .disabled { display: none; } /* @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev {opacity: 1; left: 0;} .flex-direction-nav .flex-next {opacity: 1; right: 0;} } */ /* retina displays */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .flex-direction-nav a { background-image: url("../images/arrows-2x.jpg"); } } /*/mediaquery*/ /* Lightcase - jQuery Plugin The smart and flexible Lightbox Plugin. @author Cornel Boppart @copyright Author @version 1.3.1 (12/05/2013) */ @media screen { /* overlay */ #lightcase-overlay { display: none; width: 100%; height: 100%; position: fixed; z-index: 1000; top: 0; left: 0; background-color: #252424; } /* loading */ #lightcase-loading { display: none; width: 48px; height: 48px; margin-top: -24px; margin-left: -24px; position: fixed; z-index: 1001; top: 50%; left: 50%; background: url(../images/lightcase/loading_neg.gif) transparent no-repeat 50% 50%; background-size: 50%; } #lightcase-case.lightcase-loading .lightcase-content, #lightcase-case.type-flash .lightcase-content { background: url(../images/lightcase/loading_neg.gif) transparent no-repeat 50% 50%; background-size: 24px; } /* case */ #lightcase-case { display: none; position: fixed; z-index: 1002; top: 50%; left: 50%; /*position:absolute !important;*/ background-color: #252424; color: #ae9c7e; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.35); -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.35); box-shadow: 0 0 20px rgba(0, 0, 0, 0.35); font-family: "museo-slab", "Georgia", Cambria, Times New Roman, Times, serif; text-align: left; -webkit-text-size-adjust: none; } #lightcase-case p { font-size: 0.75em; } /* info */ #lightcase-case .lightcase-info { overflow: auto; } #lightcase-case .lightcase-sequenceInfo, #lightcase-case .lightcase-title, #lightcase-case .lightcase-caption { margin: 10px; padding: 0; overflow: auto; font-size: 0.6875em; text-overflow: ellipsis; } #lightcase-case .lightcase-sequenceInfo { float: left; padding-right: 0; } /* content */ #lightcase-case .lightcase-content { position: relative; z-index: 1; } #lightcase-case.type-image .lightcase-contentInner, #lightcase-case.type-video .lightcase-contentInner { line-height: 0.75; } #lightcase-case .lightcase-inlineWrap { padding: 0 0 15px; overflow: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #lightcase-case .lightcase-inlineWrap h2, #lightcase-case .lightcase-inlineWrap h3 { padding: 15px 20px 15px; } #lightcase-case .lightcase-inlineWrap p { padding: 0 20px; } #lightcase-case .lightcase-inlineWrap img { width: 100%; height: auto; /* margin-bottom:10px; */ } #lightcase-case .lightcase-inlineWrap .content { margin: 20px 0; } .thanks img { width: auto !important; padding: 10px 20px; } #lightcase-case .lightcase-content object, #lightcase-case .lightcase-content embed { display: block; /* this removes unwanted space at bottom of the movie object */ } /* error message */ p.lightcase-error { margin: 0; padding: 0; } /* navigation */ #lightcase-case .lightcase-nav a { width: 25%; position: absolute; z-index: 3; top: 25%; bottom: 25%; outline: none; cursor: pointer; background: url(http://www.restaurantfermipuig.com/css/style.css) transparent; /* required to get the full height of link */ -ie67-outline: expression(this.hideFocus=true); /* hides ugly outline on focus, the property name is arbitrary */ } #lightcase-case a.lightcase-prev { left: 5px; } #lightcase-case a.lightcase-next { right: 5px; } #lightcase-case a.lightcase-play, #lightcase-case a.lightcase-pause { display: none; width: 50%; z-index: 3; left: 25%; right: 25%; } #lightcase-case .lightcase-nav a span { display: block; width: 30px; height: 30px; margin-top: -13px; position: absolute; z-index: 1; top: 50%; text-indent: -9999px; background: url(../images/lightcase/sprite.png) transparent no-repeat 0 -30px; opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); -webkit-backface-visibility: hidden; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } #lightcase-case .lightcase-nav a:hover span { opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; filter: alpha(opacity=100); } #lightcase-case a.lightcase-prev span { left: 0; } #lightcase-case a.lightcase-next span { right: 0; background-position: 0 -60px; } #lightcase-case a.lightcase-pause span { background-position: 0 -90px; } #lightcase-case a.lightcase-play span { background-position: 0 -120px; } #lightcase-case a.lightcase-pause span, #lightcase-case a.lightcase-play span { left: 50%; margin-left: -15px; } /* close */ #lightcase-case a.lightcase-close { width: 30px; height: 30px; position: absolute; z-index: 1; top: -13px; right: -15px; outline: none; text-indent: -9999px; background: url(../images/lightcase/sprite.png) transparent no-repeat 0 0; } /* isMobileDevice */ .lightcase-isMobileDevice #lightcase-case .lightcase-inlineWrap, .lightcase-isMobileDevice #lightcase-case.type-iframe .lightcase-contentInner { overflow: auto; -webkit-overflow-scrolling: touch; } .lightcase-isMobileDevice.lightcase-open, .lightcase-isMobileDevice.lightcase-open body { max-width: 100%; max-height: 100%; /*overflow: hidden;*/ } /* fullScreenModeForMobile */ .lightcase-fullScreenMode #lightcase-case { color: #fff; text-shadow: none; border: none; background: none; /* -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; */ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .lightcase-fullScreenMode #lightcase-case .lightcase-content { background: none; } .lightcase-fullScreenMode #lightcase-case .lightcase-info { position: fixed; z-index: 1003; left: 5px; bottom: 5px; } .lightcase-fullScreenMode #lightcase-case a.lightcase-prev, .lightcase-fullScreenMode #lightcase-case a.lightcase-next { position: absolute; /* hide the prev/next buttons */ top: -99999px; } .lightcase-fullScreenMode #lightcase-case a.lightcase-play span { margin-top: -15px; background-image: url(../images/lightcase/play.svg); } .lightcase-fullScreenMode #lightcase-case a.lightcase-pause span { margin-top: -15px; background-image: url(../images/lightcase/pause.svg); } .lightcase-fullScreenMode #lightcase-case a.lightcase-pause span, .lightcase-fullScreenMode #lightcase-case a.lightcase-play span, .lightcase-fullScreenMode #lightcase-case a.lightcase-close { border: 1px solid rbga(0, 0, 0, 0.25); background-color: rgba(150, 150, 150, 0.75); background-repeat: no-repeat; background-position: 50% 50%; background-size: 55% 55%; -moz-box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.25); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .lightcase-fullScreenMode #lightcase-case a.lightcase-close { width: 30px; height: 30px; position: fixed; top: 5px; right: 5px; background-image: url(../images/lightcase/contract.svg); background-size: 55% 55%; } } /* retina displays */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* close */ #lightcase-case .lightcase-nav a span, #lightcase-case a.lightcase-close { background-image: url(../images/lightcase/sprite-2x.jpg); background-size: 30px 150px; } } /*/mediaquery*/ /****************************************************************** Site Name: Author: Stylesheet: Base Mobile Stylesheet Be light and don't over style since everything here will be loaded by mobile devices. You want to keep it as minimal as possible. This is called at the top of the main stylsheet and will be used across all viewports. ******************************************************************/ /********************* GENERAL STYLES *********************/ html { height: 100%; } body { font-family: "museo-slab", "Georgia", Cambria, Times New Roman, Times, serif; font-weight: 500; font-size: 16px; line-height: 1.25; color: #ae9c7e; -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ height: 100%; background-color: #252424; } body.modal-open { overflow: hidden; } strong { font-weight: 700; } em { font-style: italic; } ::selection, ::-moz-selection { color: #252424; background: #ae9c7e; } h1 { font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 1.5em; } h2 { font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 700; font-size: 0.875em; text-transform: uppercase; } h3 { font-family: "museo-slab", "Georgia", Cambria, Times New Roman, Times, serif; font-style: normal; font-weight: 700; font-size: 0.75em; } a:link, a:visited { text-decoration: underline; color: #ae9c7e; cursor: pointer; cursor: hand; } a:hover, a:active { color: white; } p { margin-bottom: 5px; } .upper, .uppercase { text-transform: uppercase; } .nobr { white-space: nowrap; } .dist10 { font-size: 1px; line-height: 1px; height: 10px; } /* main setup */ #main { height: 100%; } /* end main setup */ /* header */ #header-container { width: 100%; z-index: 3; position: absolute; } #header-container header { width: 1072px; margin: 0 auto; /*background-color:#fff;*/ position: relative; } #header-container header #logo { position: absolute; z-index: 100; right: 0; top: 86px; width: 120px; height: 100px; } #header-container header #logo h1 { background-image: url("../images/fermi-puig-logo.png"); background-size: 120px 100px; background-position: 100% 0; background-repeat: no-repeat; text-indent: -9999px; width: 120px; height: 100px; } #header-container header #logo h1 a { display: block; width: 100%; height: 100%; } #header-container header #reservation { z-index: 101; display: inline-block; } #header-container header #reservation p { font-size: 0.75em; line-height: 1.5; margin-bottom: 0; } #header-container header #reservation h3 { font-size: 0.875em; margin: 10px 0 5px; } #header-container header #reservation a { color: #63433e; text-decoration: none; } #header-container header #reservation a:hover { color: #252424; } #header-container header #reservation a.route { display: none; } #header-container header #reservation #google_window_content a.route { display: block; } #header-container header #reservation a.close, #header-container header #reservation a.open { display: inline-block; padding: 10px 10px 6px 10px; font-weight: 700; font-size: 0.75em; } #header-container header #reservation a.close i, #header-container header #reservation a.open i { display: block; float: right; width: 12px; height: 12px; margin-left: 7px; margin-top: 2px; background-color: transparent; background-image: url("../images/icons.png"); background-repeat: no-repeat; background-size: 180px 60px; background-position: -120px 0; } #header-container header #reservation a.close:hover i, #header-container header #reservation a.open:hover i { background-position: -120px -30px; } #header-container header #reservation a.close i { background-position: -150px 0; } #header-container header #reservation a.close:hover i { background-position: -150px -30px; } #header-container header #reservation #reservation-opener { background-color: #ae9c7e; -webkit-box-shadow: inset 0px 5px 15px -3px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px 5px 15px -3px rgba(0, 0, 0, 0.75); -o-box-shadow: inset 0px 5px 15px -3px rgba(0, 0, 0, 0.75); box-shadow: inset 0px 5px 15px -3px rgba(0, 0, 0, 0.75); width: auto; position: absolute; top: 0; left: 0; } #header-container header #reservation #reservation-detail { background-color: #ae9c7e; -webkit-box-shadow: inset 0px 5px 15px -3px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px 5px 15px -3px rgba(0, 0, 0, 0.75); -o-box-shadow: inset 0px 5px 15px -3px rgba(0, 0, 0, 0.75); box-shadow: inset 0px 5px 15px -3px rgba(0, 0, 0, 0.75); color: #63433e; width: 606px; display: none; position: absolute; z-index: 201; top: 0; left: 0; } #header-container header #reservation #reservation-detail #reservation-contact { padding: 10px; } #header-container header #reservation #reservation-detail #reservation-map { width: 100%; height: 300px; } #header-container header #reservation #reservation-cover { position: fixed; display: none; z-index: 200; width: 100%; height: 100%; background-color: #252424; opacity: 0.7; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; top: 0; left: 0; } #header-container header #address { z-index: 100; position: absolute; right: -20px; top: 361px; width: 125px; font-family: "museo-slab", "Georgia", Cambria, Times New Roman, Times, serif; font-weight: 900; font-size: 0.75em; line-height: 1.5; } #header-container header #navigation { z-index: 100; position: absolute; right: 162px; top: 12px; } #header-container header #navigation #lang-nav { float: right; font-family: "museo-slab", "Georgia", Cambria, Times New Roman, Times, serif; font-weight: 500; } #header-container header #navigation #lang-nav li { float: left; margin-right: 4px; } #header-container header #navigation #lang-nav li a { font-size: 0.75em; color: #ae9c7e; text-decoration: none; } #header-container header #navigation #lang-nav li a:hover { color: white; } #header-container header #navigation #lang-nav li:after { content: '|'; margin-left: 4px; font-size: 0.6875em; } #header-container header #navigation #lang-nav li:last-child:after { content: ''; } #header-container header #navigation #social-nav { float: right; } #header-container header #navigation #social-nav li { margin: 0; float: left; } #header-container header #navigation #social-nav li a { display: block; width: 22px; height: 22px; background-color: transparent; background-image: url("../images/icons.png"); background-repeat: no-repeat; background-size: 180px 60px; background-position: 0px 0px; text-indent: -9999px; margin-left: 3px; } #header-container header #navigation #social-nav li a.facebook { background-position: 0px 0px; } #header-container header #navigation #social-nav li a.facebook:hover { background-position: 0px -30px; } #header-container header #navigation #social-nav li a.twitter { background-position: -30px 0px; } #header-container header #navigation #social-nav li a.twitter:hover { background-position: -30px -30px; } #header-container header #navigation #social-nav li a.linkedin { background-position: -60px 0px; } #header-container header #navigation #social-nav li a.linkedin:hover { background-position: -60px -30px; } /* end header */ /* main content */ #content-container { width: 1072px; margin: 0 auto; z-index: 1; min-height: 100%; height: auto !important; height: 100%; position: relative; margin-bottom: -210px; background-image: url("../images/header-bg.png"); background-size: 160px 10px; background-repeat: repeat-y; background-position: 100% 0; } #content-container #content { padding-top: 63px; } #content-container #content #people, #content-container #content #menu, #content-container #content #restaurant { width: 910px; margin-bottom: 35px; } #content-container #content #people h2, #content-container #content #menu h2, #content-container #content #restaurant h2 { margin-bottom: 10px; } #content-container #content #people .slider-container, #content-container #content #menu .slider-container, #content-container #content #restaurant .slider-container { height: 213px; width: 100%; position: relative; } #content-container #content #people .slider-container .contentslider, #content-container #content #menu .slider-container .contentslider, #content-container #content #restaurant .slider-container .contentslider { background-color: #252424; -webkit-box-shadow: 0px 18px 18px -18px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 18px 18px -18px rgba(0, 0, 0, 0.75); -o-box-shadow: 0px 18px 18px -18px rgba(0, 0, 0, 0.75); box-shadow: 0px 18px 18px -18px rgba(0, 0, 0, 0.75); width: 100%; height: 100%; overflow: hidden !important; z-index: 2; } #content-container #content #people .slider-container .contentslider ul.slides, #content-container #content #menu .slider-container .contentslider ul.slides, #content-container #content #restaurant .slider-container .contentslider ul.slides { height: 100%; } #content-container #content #people .slider-container .contentslider ul.slides li, #content-container #content #menu .slider-container .contentslider ul.slides li, #content-container #content #restaurant .slider-container .contentslider ul.slides li { background-color: #252424; margin-right: 2px; height: 100%; position: relative; } #content-container #content #people .slider-container .contentslider ul.slides li h3, #content-container #content #menu .slider-container .contentslider ul.slides li h3, #content-container #content #restaurant .slider-container .contentslider ul.slides li h3 { padding: 20px 15px 12px; } #content-container #content #people .slider-container .contentslider ul.slides li p, #content-container #content #menu .slider-container .contentslider ul.slides li p, #content-container #content #restaurant .slider-container .contentslider ul.slides li p { padding: 0 15px; font-size: 0.75em; } #content-container #content #people .slider-container .contentslider ul.slides li img, #content-container #content #menu .slider-container .contentslider ul.slides li img, #content-container #content #restaurant .slider-container .contentslider ul.slides li img { width: 302px; max-width: 100%; height: auto; } #content-container #content #people .slider-container .contentslider ul.slides li .caption, #content-container #content #menu .slider-container .contentslider ul.slides li .caption, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption { position: absolute; bottom: 0; width: 100%; background-color: #252424; background-color: rgba(37, 36, 36, 0.9); color: #ae9c7e; font-size: 0.6875em; text-decoration: none; display: none; } #content-container #content #people .slider-container .contentslider ul.slides li .caption span, #content-container #content #menu .slider-container .contentslider ul.slides li .caption span, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption span { display: block; padding: 20px 15px; } #content-container #content #people .slider-container .contentslider ul.slides li .caption i, #content-container #content #menu .slider-container .contentslider ul.slides li .caption i, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption i { position: absolute; bottom: 13px; right: 15px; display: block; width: 25px; height: 25px; background-image: url("../images/icons.png"); background-size: 180px 60px; background-repeat: no-repeat; background-position: -90px -30px; } #content-container #content #people .slider-container .contentslider ul.slides li .caption:hover, #content-container #content #menu .slider-container .contentslider ul.slides li .caption:hover, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption:hover { color: #fff; } #content-container #content #people .slider-container .contentslider ul.slides li .caption:hover i, #content-container #content #menu .slider-container .contentslider ul.slides li .caption:hover i, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption:hover i { background-position: -90px 0px; } #content-container #content #people .slider-container .contentslider ul.slides li .share, #content-container #content #menu .slider-container .contentslider ul.slides li .share, #content-container #content #restaurant .slider-container .contentslider ul.slides li .share { position: absolute; text-decoration: none; display: none; position: absolute; bottom: 13px; right: 15px; width: 25px; height: 25px; background-image: url("../images/icons.png"); background-size: 180px 60px; background-repeat: no-repeat; background-position: 0 0; text-indent: -9999px; } #content-container #content #people .slider-container .contentslider ul.slides li .share:hover, #content-container #content #menu .slider-container .contentslider ul.slides li .share:hover, #content-container #content #restaurant .slider-container .contentslider ul.slides li .share:hover { background-position: 0px -30px; } #content-container #content #people .slider-container .contentslider ul.slides li:hover .caption, #content-container #content #menu .slider-container .contentslider ul.slides li:hover .caption, #content-container #content #restaurant .slider-container .contentslider ul.slides li:hover .caption { display: block; } #content-container #content #people .slider-container .contentslider ul.slides li:hover .share, #content-container #content #menu .slider-container .contentslider ul.slides li:hover .share, #content-container #content #restaurant .slider-container .contentslider ul.slides li:hover .share { display: block; } #content-container #content #people .slider-container .contentslider ul.slides li.beige, #content-container #content #menu .slider-container .contentslider ul.slides li.beige, #content-container #content #restaurant .slider-container .contentslider ul.slides li.beige { background-color: #ae9c7e; color: #63433e; } #content-container #content #people .slider-container .contentslider ul.slides li.red, #content-container #content #menu .slider-container .contentslider ul.slides li.red, #content-container #content #restaurant .slider-container .contentslider ul.slides li.red { background-color: #63433e; color: #ae9c7e; } #content-container #content #people .slider-container .contentslider ul.slides li.text, #content-container #content #menu .slider-container .contentslider ul.slides li.text, #content-container #content #restaurant .slider-container .contentslider ul.slides li.text { width: 302px; } #content-container #content #people .slider-container .contentslider ul.slides li.image, #content-container #content #menu .slider-container .contentslider ul.slides li.image, #content-container #content #restaurant .slider-container .contentslider ul.slides li.image { width: 302px; } #content-container #content #people .slider-container .contentslider ul.slides li.imagetext, #content-container #content #menu .slider-container .contentslider ul.slides li.imagetext, #content-container #content #restaurant .slider-container .contentslider ul.slides li.imagetext { width: 606px; } #content-container #content #people .slider-container .contentslider ul.slides li.imagetext img, #content-container #content #menu .slider-container .contentslider ul.slides li.imagetext img, #content-container #content #restaurant .slider-container .contentslider ul.slides li.imagetext img { float: left; margin-right: 20px; border-right: 2px solid #252424; } #content-container #content #people .slider-container .navigation-container, #content-container #content #menu .slider-container .navigation-container, #content-container #content #restaurant .slider-container .navigation-container { position: absolute; width: 100%; height: 100%; top: 0; z-index: 1; } .error404 #people { margin-top: 35px !important; margin-bottom: 135px !important; width: 606px !important; } /* end main content */ /* footer */ #footer-container { position: relative; width: 100%; margin: 0; z-index: 2; height: 210px; } #footer-container footer { width: 1072px; margin: 0 auto; position: relative; /*background-color:#002222;*/ } #footer-container footer .slider-container { width: 910px; height: 50px; position: absolute; top: 35px; } #footer-container footer .slider-container .contentslider { width: 100%; height: 100%; overflow: hidden !important; z-index: 2; } #footer-container footer .slider-container .contentslider ul.slides { height: 100%; } #footer-container footer .slider-container .contentslider ul.slides li { background-color: #252424; height: 100%; width: 150px; text-align: center; } #footer-container footer .slider-container .contentslider ul.slides li img { max-height: 50px; width: auto; } #footer-container footer #footer-nav { position: absolute; right: -20px; top: 22px; width: 125px; font-family: "museo-slab", "Georgia", Cambria, Times New Roman, Times, serif; font-weight: 500; font-size: 0.75em; } #footer-container footer #footer-nav p { margin-bottom: 3px; } #footer-container footer #footer-nav li { margin-bottom: 3px; } #footer-container footer #footer-nav li a { color: #ae9c7e; text-decoration: none; } #footer-container footer #footer-nav li a:hover { color: white; } .push { height: 210px; clear: both; } /* end footer */ /* SMALLER SCREENS */ @media only screen and (min-width: 1001px) and (max-width: 1150px) { /* header */ #header-container header { width: 946px; } #header-container header #reservation #reservation-detail { width: 522px; } #header-container header #address { top: 326px; } /* end header */ /* main content */ #content-container { width: 946px; } #content-container #content #people, #content-container #content #menu, #content-container #content #restaurant { width: 784px; margin-bottom: 30px; } #content-container #content #people .slider-container, #content-container #content #menu .slider-container, #content-container #content #restaurant .slider-container { height: 183px; } #content-container #content #people .slider-container .contentslider ul.slides li h3, #content-container #content #menu .slider-container .contentslider ul.slides li h3, #content-container #content #restaurant .slider-container .contentslider ul.slides li h3 { font-size: 0.75em; /*padding: 15px 15px 5px;*/ padding: 10px 10px 2px; } #content-container #content #people .slider-container .contentslider ul.slides li p, #content-container #content #menu .slider-container .contentslider ul.slides li p, #content-container #content #restaurant .slider-container .contentslider ul.slides li p { font-size: 0.75em; line-height: 1.2; padding: 0 10px; } #content-container #content #people .slider-container .contentslider ul.slides li img, #content-container #content #menu .slider-container .contentslider ul.slides li img, #content-container #content #restaurant .slider-container .contentslider ul.slides li img { width: 260px; } #content-container #content #people .slider-container .contentslider ul.slides li.text, #content-container #content #menu .slider-container .contentslider ul.slides li.text, #content-container #content #restaurant .slider-container .contentslider ul.slides li.text { width: 260px; } #content-container #content #people .slider-container .contentslider ul.slides li.image, #content-container #content #menu .slider-container .contentslider ul.slides li.image, #content-container #content #restaurant .slider-container .contentslider ul.slides li.image { width: 260px; } #content-container #content #people .slider-container .contentslider ul.slides li.imagetext, #content-container #content #menu .slider-container .contentslider ul.slides li.imagetext, #content-container #content #restaurant .slider-container .contentslider ul.slides li.imagetext { width: 522px; } #content-container #content #people .slider-container .contentslider ul.slides li.imagetext img, #content-container #content #menu .slider-container .contentslider ul.slides li.imagetext img, #content-container #content #restaurant .slider-container .contentslider ul.slides li.imagetext img { margin-right: 10px; } .error404 #people { width: 522px !important; } /* end main content */ /* footer */ #footer-container footer { width: 946px; } #footer-container footer .slider-container { width: 784px; } #footer-container footer .slider-container .contentslider ul.slides li { width: 129px; } /* end footer */ } /*/mediaquery*/ /* TABLETS and SMALL SCREENS */ @media only screen and (min-width: 569px) and (max-width: 1000px) { /* header */ #header-container header { width: 684px; } #header-container header #reservation #reservation-detail { width: 522px; } #header-container header #address { top: 326px; } /* end header */ /* main content */ #content-container { width: 684px; } #content-container #content #people, #content-container #content #menu, #content-container #content #restaurant { width: 522px; margin-bottom: 30px; } #content-container #content #people .slider-container, #content-container #content #menu .slider-container, #content-container #content #restaurant .slider-container { height: 183px; } #content-container #content #people .slider-container .contentslider ul.slides li h3, #content-container #content #menu .slider-container .contentslider ul.slides li h3, #content-container #content #restaurant .slider-container .contentslider ul.slides li h3 { padding: 10px 10px 2px; } #content-container #content #people .slider-container .contentslider ul.slides li p, #content-container #content #menu .slider-container .contentslider ul.slides li p, #content-container #content #restaurant .slider-container .contentslider ul.slides li p { line-height: 1.2; padding: 0 10px; } #content-container #content #people .slider-container .contentslider ul.slides li img, #content-container #content #menu .slider-container .contentslider ul.slides li img, #content-container #content #restaurant .slider-container .contentslider ul.slides li img { width: 260px; } #content-container #content #people .slider-container .contentslider ul.slides li.text, #content-container #content #menu .slider-container .contentslider ul.slides li.text, #content-container #content #restaurant .slider-container .contentslider ul.slides li.text { width: 260px; } #content-container #content #people .slider-container .contentslider ul.slides li.image, #content-container #content #menu .slider-container .contentslider ul.slides li.image, #content-container #content #restaurant .slider-container .contentslider ul.slides li.image { width: 260px; } #content-container #content #people .slider-container .contentslider ul.slides li.imagetext, #content-container #content #menu .slider-container .contentslider ul.slides li.imagetext, #content-container #content #restaurant .slider-container .contentslider ul.slides li.imagetext { width: 522px; } #content-container #content #people .slider-container .contentslider ul.slides li.imagetext img, #content-container #content #menu .slider-container .contentslider ul.slides li.imagetext img, #content-container #content #restaurant .slider-container .contentslider ul.slides li.imagetext img { margin-right: 10px; } .error404 #people { width: 522px !important; } /* end main content */ /* footer */ #footer-container footer { width: 684px; } #footer-container footer .slider-container { width: 522px; } #footer-container footer .slider-container .contentslider ul.slides li { width: 129px; } /* end footer */ } /*/mediaquery*/ /* Smartphones (portrait and landscape) */ @media only screen and (min-width: 240px) and (max-width: 568px) { /* header */ #header-container { position: static; } #header-container header { width: 100%; /*background-color:#fff;*/ position: relative; height: 175px; } #header-container header #logo { position: absolute; left: 15px; top: 35px; width: 120px; height: 140px; background-image: url("../images/header-bg-2x.jpg"); background-size: 160px 10px; background-repeat: repeat-y; background-position: 100% 0; } #header-container header #logo h1 { margin-top: 22px; } #header-container header #reservation { display: block; } #header-container header #reservation a.open { display: block; padding: 10px 23px 6px 23px; } #header-container header #reservation a.close { display: block; padding: 10px 23px 6px 23px; } #header-container header #reservation #reservation-opener { width: 100%; height: 35px; } #header-container header #reservation #reservation-detail { width: 100%; } #header-container header #reservation #reservation-detail #reservation-contact { padding: 10px 23px; } #header-container header #reservation #reservation-detail #reservation-map { width: 100%; height: 260px; } #header-container header #address { right: 0px; top: 65px; width: 125px; line-height: 1.3; } #header-container header #navigation { top: 125px; right: 3px; width: 125px; } #header-container header #navigation #lang-nav { float: none; margin-left: 4px; margin-top: 3px; } #header-container header #navigation #social-nav { float: none; } /* end header */ /* main content */ #content-container { width: 100%; background: transparent !important; min-height: auto; height: auto !important; position: static; margin-bottom: 0; margin-top: 35px; } #content-container #content { padding-top: 0; } #content-container #content #people, #content-container #content #menu, #content-container #content #restaurant { width: 100%; margin-bottom: 35px; } #content-container #content #people h2, #content-container #content #menu h2, #content-container #content #restaurant h2 { margin-left: 20px; } #content-container #content #people .slider-container, #content-container #content #menu .slider-container, #content-container #content #restaurant .slider-container { height: 227px; } #content-container #content #people .slider-container .contentslider ul.slides, #content-container #content #menu .slider-container .contentslider ul.slides, #content-container #content #restaurant .slider-container .contentslider ul.slides { height: 100%; } #content-container #content #people .slider-container .contentslider ul.slides li, #content-container #content #menu .slider-container .contentslider ul.slides li, #content-container #content #restaurant .slider-container .contentslider ul.slides li { margin-right: 2px; height: 100%; } #content-container #content #people .slider-container .contentslider ul.slides li h3, #content-container #content #menu .slider-container .contentslider ul.slides li h3, #content-container #content #restaurant .slider-container .contentslider ul.slides li h3 { padding: 20px 20px 12px 20px; } #content-container #content #people .slider-container .contentslider ul.slides li p, #content-container #content #menu .slider-container .contentslider ul.slides li p, #content-container #content #restaurant .slider-container .contentslider ul.slides li p { padding: 0 20px; font-size: 0.75em; } #content-container #content #people .slider-container .contentslider ul.slides li img, #content-container #content #menu .slider-container .contentslider ul.slides li img, #content-container #content #restaurant .slider-container .contentslider ul.slides li img { width: 320px; max-width: 100%; height: auto; } #content-container #content #people .slider-container .contentslider ul.slides li .caption, #content-container #content #menu .slider-container .contentslider ul.slides li .caption, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption { position: absolute; bottom: 0; width: 100%; background-color: #252424; background-color: rgba(37, 36, 36, 0.9); color: #fff; font-size: 0.6875em; text-decoration: none; display: block; } #content-container #content #people .slider-container .contentslider ul.slides li .caption span, #content-container #content #menu .slider-container .contentslider ul.slides li .caption span, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption span { display: block; padding: 20px 15px; } #content-container #content #people .slider-container .contentslider ul.slides li .caption i, #content-container #content #menu .slider-container .contentslider ul.slides li .caption i, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption i { position: absolute; top: 15px; right: 15px; display: block; width: 25px; height: 25px; background-image: url("../images/icons.png"); background-size: 180px 60px; background-repeat: no-repeat; background-position: -90px 0; } #content-container #content #people .slider-container .contentslider ul.slides li .caption:hover, #content-container #content #menu .slider-container .contentslider ul.slides li .caption:hover, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption:hover { color: #ae9c7e; } #content-container #content #people .slider-container .contentslider ul.slides li .caption:hover i, #content-container #content #menu .slider-container .contentslider ul.slides li .caption:hover i, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption:hover i { background-position: -90px -30px; } #content-container #content #people .slider-container .contentslider ul.slides li:hover .caption, #content-container #content #menu .slider-container .contentslider ul.slides li:hover .caption, #content-container #content #restaurant .slider-container .contentslider ul.slides li:hover .caption { display: block; } #content-container #content #people .slider-container .contentslider ul.slides li.beige, #content-container #content #menu .slider-container .contentslider ul.slides li.beige, #content-container #content #restaurant .slider-container .contentslider ul.slides li.beige { background-color: #ae9c7e; color: #63433e; } #content-container #content #people .slider-container .contentslider ul.slides li.red, #content-container #content #menu .slider-container .contentslider ul.slides li.red, #content-container #content #restaurant .slider-container .contentslider ul.slides li.red { background-color: #63433e; color: #ae9c7e; } #content-container #content #people .slider-container .contentslider ul.slides li.text, #content-container #content #menu .slider-container .contentslider ul.slides li.text, #content-container #content #restaurant .slider-container .contentslider ul.slides li.text { width: 320px; } #content-container #content #people .slider-container .contentslider ul.slides li.image, #content-container #content #menu .slider-container .contentslider ul.slides li.image, #content-container #content #restaurant .slider-container .contentslider ul.slides li.image { width: 320px; } #content-container #content #people .slider-container .contentslider ul.slides li.imagetext, #content-container #content #menu .slider-container .contentslider ul.slides li.imagetext, #content-container #content #restaurant .slider-container .contentslider ul.slides li.imagetext { width: 320px; } #content-container #content #people .slider-container .contentslider ul.slides li.imagetext img, #content-container #content #menu .slider-container .contentslider ul.slides li.imagetext img, #content-container #content #restaurant .slider-container .contentslider ul.slides li.imagetext img { float: left; margin-right: 20px; border-right: 2px solid #252424; display: none; } #content-container #content #people .slider-container .navigation-container, #content-container #content #menu .slider-container .navigation-container, #content-container #content #restaurant .slider-container .navigation-container { display: none; } .error404 #people { width: 100% !important; } /* end main content */ /* footer */ #footer-container { position: static; height: 120px; } #footer-container footer { width: 100%; } #footer-container footer .slider-container { width: 320px; position: static; margin-top: 40px; } #footer-container footer .slider-container .contentslider { width: 100%; height: 100%; overflow: hidden !important; z-index: 2; } #footer-container footer .slider-container .contentslider ul.slides { height: 100%; } #footer-container footer .slider-container .contentslider ul.slides li { background-color: #252424; height: 100%; width: 159px; text-align: center; } #footer-container footer .slider-container .contentslider ul.slides li img { max-height: 50px; width: auto; } #footer-container footer #footer-nav { position: static; left: 0px; margin-top: 30px; margin-left: 20px; width: 100%; } #footer-container footer #footer-nav p { margin-bottom: 0; margin-right: 10px; float: left; } #footer-container footer #footer-nav li { float: left; margin-bottom: 0; margin-right: 10px; } .push { display: none; } /* end footer */ } /*/mediaquery*/ /* RETINA (2x RESOLUTION DEVICES) */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /****************************************************************** Site Name: Fermí Puig Author: Thomas Winter Stylesheet: Retina Screens & Devices Stylesheet *****************************************************************/ /* header */ #header-container header #logo h1 { background-image: url("../images/fermi-puig-logo-2x.jpg"); } #header-container header #reservation a.close i, #header-container header #reservation a.open i { background-image: url("../images/icons-2x.jpg"); } #header-container header #navigation #social-nav li a { background-image: url("../images/icons-2x.jpg"); } /* end header */ /* main content */ #content-container { background-image: url("../images/header-bg-2x.jpg"); } #content-container #content #people .slider-container .contentslider ul.slides li .caption i, #content-container #content #menu .slider-container .contentslider ul.slides li .caption i, #content-container #content #restaurant .slider-container .contentslider ul.slides li .caption i { background-image: url("../images/icons-2x.jpg"); } #content-container #content #people .slider-container .contentslider ul.slides li .share, #content-container #content #menu .slider-container .contentslider ul.slides li .share, #content-container #content #restaurant .slider-container .contentslider ul.slides li .share { background-image: url("../images/icons-2x.jpg"); } /* end main content */ } /*/mediaquery*/ @media print { /****************************************************************** Site Name: Author: Stylesheet: Print Stylesheet This is the print stylesheet. There's probably not a lot of reasons to edit this stylesheet. If you want to though, go for it. *****************************************************************/ * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after, a:visited:after { content: " (" attr(href) ")"; } a abbr[title]:after, a:visited 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; } .sidebar, .page-navigation, .wp-prev-next, .respond-form, nav { display: none; } }