@import url('style.css'); @import url('select_box.css'); @import url('../js/jquery.jscrollpane.css'); body {background: #000 url(../img/body-bg.jpg) 50% 67px no-repeat; font-family: Arial, Helvetica, sans-serif;} #no-fx {background: #000 url(../img/bodynofx.jpg) 50% 67px no-repeat;} #body-menu {background: #000 url(../img/bodymenu.jpg) 50% 67px no-repeat;} .abs() {position: absolute;} .hidden {display: none;} .content-wrapper() {margin: 0 auto;position: relative;width: 990px;} .clear {clear: both;} .no-margin {margin: 0;} a {text-decoration: none;} a:focus {outline: none;} .titulo {font-size: 19.86px;font-family: arial;display: block;} .paragraph {font-family: arial, sans-serif;text-align: justify;font-size: 12px;} .container(){clear: both;width: 100%;} .float-left {float: left;} .float-right {float: right;} #wrapper {position: relative;background: transparent;} @p-home : #575341; @t-home : #5e4515; .oswald( @size : 12px ) {font-family: 'Oswald', sans-serif;font-size: @size;} .arial( @size : 12px ) { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: @size; } .border-radius ( @size: 5px ) { -webkit-border-radius: @size; -khtml-border-radius: @size; -moz-border-radius: @size; border-radius: @size; } .text-shadow ( @color : #000000 ) { text-shadow: 1px 1px 0 @color; } #header { background: url(../img/menu-bg.jpg) no-repeat 50% 0; height: 67px; .container; } #header header { .content-wrapper; } #header header > * { .abs; } #header header h1 { left: 15px; top: 30px; z-index: 1000; } #header header nav { left: 333px; top: 30px; z-index: 1000000; } #header header nav ul { } #header header nav ul li { float: left; margin-top: 6px; } #header header nav ul li a{ color: #fff; .oswald(17.7px); .text-shadow; } #header header nav ul li a:hover, #header header nav ul li a.current { color: #f1f4a7; } #n-inicio { margin-right: 43px; } #n-menu { margin-right: 43px; } #n-empresa { margin-right:43px; } #n-tradicion { margin-right: 43px; } #n-franquicias { margin-right: 43px; } #n-contacto { } #ajos { background: url(../img/ajo.png) no-repeat; height: 249px; left: 232px; top: 0; width: 101px; .abs; z-index: 0; } /************************************** PICTURES ***************/ #pictures { .content-wrapper; } #dinner, #empresa { background: url(../img/dinner.png) no-repeat 50% 38px; height: 567px; margin-left:59px; top: 0; width: 943px; z-index: 0; } #empresa { background: url(../img/empresa.png) no-repeat 50% 26px; height: 582px; } #menu { background: url(../img/menu-list-bg.png) no-repeat 50% 0; height: 365px; .content-wrapper; margin: -81px auto 0 -3px; z-index: 0; } #menu > img { margin-top: 49px; margin-left: 85px; } #menu > ul { margin-left: 92px; margin-top: -8px; width: 800px; } #menu > ul li { float: left; border-bottom: solid 1px #85734a; border-top: solid 1px #fff; margin-left: 45px; padding-top: 12px; padding-bottom: 15px; width: 374px; } #menu > ul li.first { margin: 0; } #menu > ul li.no-border-bottom { border-bottom: none; } #menu > ul li.no-border-top { border-top: none; } #menu.empresa { background: url(../img/empresa-bg-sprite.jpg) no-repeat 50% 0; height: 114px; } #menu.empresa { } #menu.empresa > #empresa-txt { color: #575341; .arial(13px); margin: 0 auto; text-align: justify; width:834px; margin-top: -12px; height: 95px; } #menu.empresa > #empresa-txt > p { color: #575341; .arial(14px); margin: 0 auto; text-align: justify; width:825px; margin-bottom: 9px; } #menu.empresa > #empresa-txt > p > span { display: block; text-align: center; } #more-empresa-trigger { background: url(../img/vermas-sprite.png) no-repeat 0 -1px; display: block; height: 38px; margin: 0 auto; position: relative; top: -2px; width: 125px; } #more-empresa-trigger.open { background-position: 0 -41px; } #menu.empresa { padding-top: 107px; } .titulo-h { color: @t-home; display: block; margin-bottom: 5px; .oswald(20px); } .contenido-h { color: @p-home; display: block; line-height: 16px; .arial(13px); } #punta-mantel { background: url(../img/punta-mantel.png) no-repeat; height: 86px; left: 352px; top: -2px; width: 476px; .abs; } /*************************************** FOOTER *************/ #footer { background: #000 url(../img/footer-bg.jpg) no-repeat 50% 0; height: 344px; .container; } footer { .content-wrapper; } #info-footer { background: url(../img/logo-footer.png) no-repeat 50% 0; color: #fff; margin: 24px auto 0 auto; padding-top: 50px; text-align: center; width: 220px; } #info-footer > a { color: #fff; .oswald(15px); margin-bottom: 15px; display: block; border-bottom: solid 1px #fff; } #info-footer p a { color: #fff; border-bottom: none; .arial(12px); } /********** lightbox *******/ #lightbox { background: url(../img/lightbox-bg.png) no-repeat; display: none; height: 680px; position: absolute; top: 38px; width: 732px; z-index: 8100000; } #lightbox-overlay { background: #000; display: none; filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; left: 0; opacity: 0.8; position: absolute; top: 0; width: 100%; z-index: 8000000; } .close-lightbox { background: url(../img/close-lightbox.png) no-repeat; color: #575341; display: block; .oswald(12px); height: 30px; line-height: 30px; position: absolute; top: -29px; right: 24px; text-align: center; width: 83px; } .close-lightbox:hover { color: #575341; } #btn-camera:hover, #btn-magnify:hover, #btn-magnify.selected, #btn-camera:focus, #btn-magnify:focus, #btn-magnify.selected { background: url(../img/cam-hover.png) no-repeat; opacity: 0.8; filter: alpha(opacity=80); } #btn-camera { display: block; height: 56px; right: 50px; top: 215px; width: 57px; .abs; z-index: 10000; } #btn-magnify { display: block; height: 56px; right: 50px; top: 155px; width: 57px; .abs; z-index: 10000; } #btn-camera > img, #btn-magnify > img { display: block; margin: 3px auto 0 auto; } #container-locations { margin: 92px auto 0 auto; width: 363px; } #map-ajax-container { position: relative; } #map { background: url(../img/map-shadow.png) no-repeat 50% bottom; padding-bottom: 22px; margin: 0 auto; margin-top: 10px; width: 478px; } #map > div { border: solid 10px #fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; height: 342px; position: relative; width: 458px; } #map > div > img { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; height: 342px; position: absolute; top: 0; left: 0; width: 458px; } #info-map-container { text-align: center; } #info-map-container p { color: #99937d; .arial(13px); } #info-map-container p.bold { color: #625e4b; .arial(13px); } #location-services { display: block; margin: 0 auto; margin-top: 12px; overflow: auto; } #location-services li { float: left; margin-left: 15px; } #location-services li:first-child { margin-left: 0px; } #container-locations .select-container-options { background: url(../img/select-options-bg.png) no-repeat 0 bottom; *background-position: 4px -60px; min-width:365px; z-index:10000; } #container-locations .select-container-trigger { *width: 365px; } #cuchara { background: url(../img/cuchara.png) no-repeat; height:156px; left: 380px; width: 96px; .abs; z-index: 10000; } #bota { background: url(../img/bota.png) no-repeat; height:181px; left:627px; width: 95px; .abs; z-index: 10000; } #proximamente { background: url(../img/proximamente.png) no-repeat; height:174px; left:768px; width: 228px; .abs; top: 110px; z-index: 10000; } /*************** Franquicias */ #franquicias { margin-top: 36px; } #fran1 { background: url(../img/franquicias.png) no-repeat; height: 175px; margin: 0 auto; margin-bottom: 20px; padding-top: 125px; position: relative; width: 969px; } #fran1 > p { color: #575341; .arial(14px); width: 508px; text-align: justify; margin: 0 auto; } #fran2 { background: url(../img/franquicias-form.png) no-repeat; height: 453px; margin: 0 auto; position: relative; width: 969px; } #p-nombre { .abs; left: 68px; top:84px; } #p-email { left: 68px; top: 156px; .abs; } #p-telefono { left: 68px; top: 224px; .abs; } #p-celular { left: 68px; top: 292px; .abs; } #p-ciudad { .abs; right: 73px; top:84px; } #p-estado { right: 73px; top: 156px; .abs; } .p-textarea { background: url(../img/textarea.png) no-repeat; height: 125px; width: 363px; display:block; margin: 0 auto; margin-bottom:12px; } #p-mensaje { right: 73px; top: 224px; .abs; } #mensaje { background: transparent; height: 96px; border: none; width: 335px; padding: 15px 14px; color: #8c8975; font-family: Georgia; font-style: italic; text-align: center; max-height:96px; min-height: 96px; max-width:335px; min-width:335px; font-size: 27px; outline: none; } .text-input { border: none; background: transparent; color: #8c8975; font-family: Georgia; font-style: italic; font-size: 27px; display: block; margin: 0 auto; text-align: center; width: 323px; line-height: 56px; height: 56px; outline: none; } .p-input { background: url(../img/input-text.png) no-repeat; height: 56px; width: 363px; display:block; margin: 0 auto; } input:focus { border: none; } #form-franquicia { background: url(../img/enviar-franquicia.png) no-repeat; .abs; right: 73px; top: 360px; border: none; width:187px; height: 60px; } #fran-gracias { display: none; padding-top: 130px; text-align: center; .text-shadow(#ffffff); } #fran-gracias > h3 { color: #8c8973; font-style: italic; font-weight: normal; font-family: Georgia; font-size: 39px; } #fran-gracias > h3 span{ font-size: 50px; } #fran-gracias > p { color: #625e4d; .arial(15px); margin-top:10px; margin-bottom: 60px; } #enviar-mensaje-franquicias { background: url(../img/nuevo_mensaje.png) no-repeat; display: block; margin: 0 auto; height: 60px; width:291px; } /************** Contacto *****/ #contacto { background: url(../img/contacto-bg.png) no-repeat; height: 580px; margin: 0 auto; margin-top: 36px; width: 969px; } #contacto-1 { padding-top: 135px; position: relative; } #contacto-1 > form { } #contacto-1 > form .text-input { display: block; margin: 0 auto; } #contacto-1 > form .p-input { margin-bottom: 12px; } #contacto-1 .select-box { width: 363px; margin-left: auto; margin-right: auto; z-index: 1000000; } #contacto-1 .select-container-options { background: url(../img/select_contacto.png) no-repeat 0 bottom; background-color: none; *background-position: 0 -30px; min-width:365px; left: 0; min-height: 144px; max-height: 144px; z-index:10000; } #contacto-1 .select-container-options ul li a:hover { background: #d0cdbb; color: #8C8975; } #mensajec { background: transparent; height: 96px; border: none; width: 335px; padding: 15px 14px; display: block; margin: 0 auto; color: #8c8975; font-family: Georgia; font-style: italic; text-align: center; max-height:96px; min-height: 96px; max-width:335px; min-width:335px; font-size: 27px; margin-bottom:20px; outline: none; } input { outline: none; } #submit-form-contact { background: url(../img/enviar-franquicia.png) no-repeat; border: none; display: block; margin: 0 auto; width:187px; height: 60px; } #contacto-holder { position: relative; } #contacto-2 { display: none; padding-top: 210px; text-align: center; .text-shadow(#ffffff); position: relative; } #contacto-2 > h3 { color: #8c8973; font-style: italic; font-weight: normal; font-family: Georgia; font-size: 39px; } #contacto-2 > h3 span{ font-size: 50px; } #contacto-2 > p { color: #625e4d; .arial(15px); margin-top:10px; margin-bottom: 60px; } #enviar-mensaje { background: url(../img/nuevo_mensaje.png) no-repeat; display: block; margin: 0 auto; height: 60px; width:291px; } /**************** Galeria *************/ #gal1 { background: url(../img/galeria-bg.png) no-repeat; height: 118px; margin: 0 auto; margin-bottom: 0px; margin-top: 35px; padding-top: 182px; position: relative; width: 969px; } #gal1 > p { color: #575341; .arial(14px); width: 820px; text-align: justify; margin: 0 auto; } #gal2 { background: url(../img/fotos-galeria-bg.png) no-repeat; height: 355px; margin: 0 auto; position: relative; width: 969px; } #ver-mas-galeria { background: url(../img/vermas.jpg) no-repeat; display: block; height: 48px; margin: 0 auto; width: 125px; z-index: 10000; } #gal2 ul { margin-left: 50px; padding-top: 60px; width:880px; } #gal2 ul li{ float: left; margin-left: 115px; margin-bottom: 22px; } #gal2 ul li a img { display: block; } .ie7-fix-margin { *position: relative; *left:-25px } #gal2 ul li.no-margin { margin-left: 15px; } #gal2 ul li.enabled .img-hover { display: none; } #gal2 ul li.enabled a:hover img, #gal2 ul li.enabled a.selected img { display: none; } #gal2 ul li.enabled a:hover .img-hover, #gal2 ul li.enabled a.selected .img-hover { display: block; } /********** lightbox gallery *******/ #lightbox-gallery { background: url(../img/lightbox-galeria.png) no-repeat; display: none; position: absolute; width: 732px; height: 600px; z-index: 81000000; top: 38px; } #lightbox-video { background: url(../img/lightbox-galeria-video.png) no-repeat; display: none; position: absolute; width: 732px; height: 600px; z-index: 81000000; top: 38px; } #gallery-ajax { background: url(../img/frame-foto.png) no-repeat; height: 537px; width: 685px; margin: 25px 0 0 25px; } #gallery-ajax-video { height: 537px; width: 685px; margin: 25px 0 0 25px; } #next-image, #prev-image { top: 252px; position: absolute; z-index: 100000; } #slides { width:653px; height: 497px; margin-left: 15px; top:15px; } #video { width:653px; height: 497px; margin-left: 15px; top:15px; } #slides > div { width:653px; height: 497px; } #slides > div h3 { background: url(../img/titulo.png) no-repeat; .oswald(29px); color: #575341; .text-shadow(#fff); .abs; bottom: 9px; border-radius: 0 0 15px 15px; -moz-border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; left: 0; width:653px; text-align: center; height: 79px; line-height: 79px; } #slides > div span { .arial(13px); text-shadow: none; right:10px; display: block; top: 424px; .abs; width:330px; text-align: justify; } #slides > div > img { height:488px; -webkit-border-radius: 15px; border-radius: 15px; -moz-border-radius: 15px; } #next-image { right: 30px; } #prev-image { left: 34px; } #lightbox-gallery > img { height: 312px; left: 44px; max-width: 412px; max-height: 312px; min-width: 412px; min-height: 312px; position: absolute; top: 25px; width: 412px; } /******************* MENU *******/ #menupage { padding-top: 36px; } #ingredientes { background: url(../img/menu/ingredientes.jpg) no-repeat; margin: 0 auto; height: 1234px; width: 970px; margin-bottom: 20px; } #bebida { background: url(../img/menu/bebidas-bg.jpg) no-repeat; height: 434px; margin: 0 auto; width: 970px; } #bebida ul { margin-left: 86px; padding-top: 142px; list-style: url(../img/menu/red-bull.png); color: #575341; .arial(16px); width: 664px; } #bebida ul li{ margin-bottom: 5px; float: left; height: 32px; width:285px; } #bebida ul li img { vertical-align: middle; margin-left: 7px; } #precios { background: url(../img/menu/precio-bg.jpg) no-repeat; height: 227px; margin: 0 auto; margin-top: 20px; width: 970px; position: relative; } .precio { background: url(../img/menu/precio.png) no-repeat; display: block; height: 60px; text-align: center; width: 409px; .abs; .oswald(27px); color: #ffffff; .text-shadow(#000); line-height:60px; top:120px; } .precio:hover { text-decoration: underline; color: #ffffff; } #precio1 { left:68px; } #precio2 { left: 498px; } #wok { width: 990px; margin: 0 auto; margin-bottom: 30px; position: relative; height: 590px; margin-top: -25px; overflow: hidden; } #nav-wok { .abs; top: 500px; left:0px; z-index: 10000; } #nav-wok a{ display: inline-block; width:24px; height: 24px; background: url(../img/menu/active-white.png) no-repeat; margin-left: 22px; } #nav-wok a:first-child { margin-left: 0px; } #nav-wok a.activeSlide { background: url(../img/menu/active-red.png) no-repeat; } #slides-wok { } #slides-wok > div p { color: #b3b3b3; width:252px; .arial(12px); text-align: justify; .abs; top: 425px; left:0; } #slides-wok > div h4 { color: #fff; .oswald(40px); font-style: italic; font-weight: normal; position: absolute; top: 365px; } #info-wok { .abs; top:88px; left: 0px; } #info-wok h3 { .oswald(88.6px); color: #fff; font-weight: normal; margin-bottom:20px; } #info-wok h3 span { .oswald(171.2px); color: #cf1e1e; line-height: 121px; } #info-wok p { color: #b3b3b3; width:252px; .arial(12px); text-align: justify; } /************************/ #salad { width: 990px; margin: 0 auto; margin-bottom: 30px; position: relative; height: 590px; margin-top: -100px; } #nav-salad { .abs; top: 375px; right: 0px; z-index: 10000; } #nav-salad a{ display: inline-block; width:24px; text-indent: 9999px; height: 24px; *float: left; background: url(../img/menu/active-lime.png) no-repeat; margin-left: 22px; } #nav-salad a:first-child { margin-left: 0px; } #nav-salad a.activeSlide { background: url(../img/menu/active-green.png) no-repeat; } #slides-salad { } #slides-salad > div p{ color: #b3b3b3; width:360px; .arial(12px); text-align: right; position: absolute; top: 300px; } #info-salad { .abs; top:88px; right: 0px; } #info-salad h3 { .oswald(88.6px); color: #fff; font-weight: normal; text-align: right; margin-bottom:10px; position: relative; min-height: 197px; } #info-salad h3 span { .oswald(86.6px); color: #78cc50; line-height: 121px; .abs; top:90px; right:0; } #info-salad p { color: #b3b3b3; width:360px; .arial(12px); text-align: right; } /****************************/ #pasta { width: 990px; margin: 0 auto; margin-bottom: 30px; position: relative; height: 590px; margin-top: -50px; } #nav-pasta { .abs; top: 390px; left:0px; z-index: 10000; } #nav-pasta a{ display: inline-block; width:24px; height: 24px; background: url(../img/menu/active-white.png) no-repeat; margin-left: 22px; } #nav-pasta a:first-child { margin-left: 0px; } #nav-pasta a.activeSlide { background: url(../img/menu/active-beige.png) no-repeat; } #slides-pasta { } #slides-pasta > div p { color: #b3b3b3; width:385px; .arial(12px); text-align: justify; position: absolute; left: 7px; top: 330px; } #info-pasta { .abs; top:88px; left: 0px; z-index:3000; } #slides-pasta > div h3 { .oswald(88.6px); color: #fff; font-weight: normal; margin-bottom:20px; position: absolute; top: 91px; min-height:225px; } #slides-pasta > div h3 span { .oswald(105.7px); color: #ffd792; line-height: 121px; position: absolute; top: 112px; left:0px; } #info-pasta h3 { .oswald(88.6px); color: #fff; font-weight: normal; margin-bottom:20px; position: relative; min-height:225px; } #info-pasta h3 span { .oswald(105.7px); color: #ffd792; line-height: 121px; position: absolute; top: 112px; left:0px; } #info-pasta p { color: #b3b3b3; width:385px; .arial(12px); text-align: justify; } /****************************************/ #menu-slider-container { background: url(../img/menu/slider-bg.png) no-repeat; height: 440px; margin: 0 auto 20px auto; padding-top: 50px; width: 969px; position: relative; } #menu-slider > div { width: 969px; margin: 0 auto; background: none; } #menu-slider > div > img{ display: block; margin: 0 auto; } #menu-slider > div > ul { margin-left: 67px; padding-top: 35px; background: none; } #menu-slider > div > ul li { height: 52px; float: left; width: 273px; padding-bottom: 8px; border-bottom: solid 1px #85734a; margin-left: 10px; border-top: solid 1px #fff; position: relative; } #menu-slider > div > ul li > a { .abs; top: 12px; left: 0; } #menu-slider > div > ul.s-height li { height: 36px; } #menu-slider > div > ul li.ie-fix-margin-top { *margin-top: -30px; } #menu-slider > div > ul li.no-margin { margin-left: 0px; } #menu-slider > div > ul li.no-border { border-top: none; } #menu-slider > div > ul li span { display: block; } #menu-slider > div > ul.s-height { padding-top: 30px; } #menu-slider > div > ul.s-height li .titulo-menu-slider { margin-top:9px; margin-left: 34px; } #menu-slider > div > ul.s-height li .titulo-menu-slider.no-margin { margin-left: 0; } #menu-slider > div > ul.s-height li .titulo-menu-slider small{ .oswald(15px); } .titulo-menu-slider { .oswald(20px); color: #575341; margin-bottom: 6px; } .descripcion-menu-slider { .arial(15px); color: #575341; } #next-menu-slide { .abs; top: 217px; right: 12px; z-index: 1000; } #prev-menu-slide { .abs; top: 217px; left: 12px; z-index: 1000; } #menu-flotante { position: absolute; left: 332px; top: 68px; width: 441px; height: 68px; background: url(../img/menu/icons-container.png); z-index: 7900000; } #menu-flotante ul { padding-top: 8px; margin-left: 10px; } #menu-flotante ul li { float: left; width: 61px; } #menu-flotante ul li a { display: block; height: 40px; width: 40px; margin: 0 auto; } #menu-flotante ul li span { color: #fff6c5; display: block; text-align: center; .oswald(13px); .text-shadow(#000); } #menu-f-1 { background: url(../img/menu/icons-sprites.png) no-repeat; } #menu-f-2 { background: url(../img/menu/icons-sprites.png) no-repeat -39px 0; } #menu-f-3 { background: url(../img/menu/icons-sprites.png) no-repeat -80px 0; } #menu-f-4 { background: url(../img/menu/icons-sprites.png) no-repeat -120px 0; } #menu-f-5 { background: url(../img/menu/icons-sprites.png) no-repeat -160px 0; } #menu-f-6 { background: url(../img/menu/icons-sprites.png) no-repeat -241px 0; } #menu-f-7 { background: url(../img/menu/icons-sprites.png) no-repeat -200px 0; } #menu-f-1:hover, #menu-f-1:focus, #menu-f-1.selected { background: url(../img/menu/icons-sprites.png) no-repeat 0 -39px; } #menu-f-2:hover, #menu-f-2:focus, #menu-f-2.selected { background: url(../img/menu/icons-sprites.png) no-repeat -39px -40px; } #menu-f-3:hover, #menu-f-3:focus, #menu-f-3.selected { background: url(../img/menu/icons-sprites.png) no-repeat -80px -39px; } #menu-f-4:hover, #menu-f-4:focus, #menu-f-4.selected { background: url(../img/menu/icons-sprites.png) no-repeat -120px -39px; } #menu-f-5:hover, #menu-f-5:focus, #menu-f-5.selected { background: url(../img/menu/icons-sprites.png) no-repeat -160px -39px; } #menu-f-6:hover, #menu-f-6:focus, #menu-f-6.selected { background: url(../img/menu/icons-sprites.png) no-repeat -241px -40px; } #menu-f-7:hover, #menu-f-7:focus, #menu-f-7.selected { background: url(../img/menu/icons-sprites.png) no-repeat -200px -40px; } /********** lightbox gallery-menu *******/ #lightbox-gallery-menu { background: url(../img/lightbox-galeria.png) no-repeat; display: none; position: absolute; width: 732px; height: 600px; z-index: 81000000; top: 38px; } #lightbox-gallery-menu #slides > div h3 { background: url(../img/titulo.png) no-repeat; .oswald(36px); color: #575341; .text-shadow(#fff); .abs; bottom: 9px; border-radius: 0 0 15px 15px; -moz-border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; left: 0; width:638px; height: 79px; line-height: 79px; padding-left: 15px; text-align: center; } #ver-video { width: 174px; height: 42px; display: block; top: 254px; left: 398px; line-height: 42px; text-align: center; position: absolute; .oswald(23px); color: #ffffff; .text-shadow(#000); }