/* ------------------------------------------------------------------------------------ -- GENERAL ------------------------------------------------------------------------------------ */ body { width:100%; height: 100%; background:#E9E9E9; font-family:'Mako', sans-serif; margin:0; padding: 0; } html{ width:100%; height:100%; } ::selection{ background:#a1b2a3; } ::-moz-selection{ background:#a1b2a3; } a{ outline:none; text-decoration:none; border:none; color:#968f85; } a:hover{ color:#6d8d6b;; } input{ outline:none; } strong{ font-style:italic; color:#555; line-height:1.5em; } figure img{ float:left; opacity: .7; -moz-transition: opacity; -moz-transition-timing-function: ease-out; -moz-transition-duration: 500ms; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; -o-transition: opacity; -o-transition-timing-function: ease-out; -o-transition-duration: 500ms; transition: opacity; transition-timing-function: ease-out; transition-duration: 500ms; } figure img:hover{ opacity: 1; -moz-transition: opacity; -moz-transition-timing-function: ease-out; -moz-transition-duration: 500ms; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; -o-transition: opacity; -o-transition-timing-function: ease-out; -o-transition-duration: 500ms; transition: opacity; transition-timing-function: ease-out; transition-duration: 500ms; } figure p{ color:#fff; text-align:center; display:inline; text-shadow: 1px 1px 3px #333333; letter-spacing:0.1em; opacity: 1; /* -webkit-transition: opacity 1s linear; -moz-transition-duration: 1s; -o-transition-duration: 1s;*/ padding:10px 0; font-size:0.8em; } /***TRIANGLE FOR SLIDING PANELS OF NAVIGATION (INDEX.HTML) AND OPENING HOURS (ALL PAGES)***/ #triangle-down { float:left; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 12px solid #7DA647; margin:4px 6px 0 0; } /***COLOURED TOP STRIPS***/ #colours{ float:left; width:980px; } #colours .color{ float:left; height:4px; width:196px; overflow:hidden; opacity:0.8;filter:alpha(opacity=80); } #colours .color-1{ background-color:#C0FF6E; /*#8a8f42;*/ } #colours .color-2{ background-color:#7DA647; /*#595610;*/ } #colours .color-3{ background-color:#3D5C15; /*#77766a;*/ } #colours .color-4{ background-color:#5EA600; /*#9c9504;*/ } #colours .color-5{ background-color:#A0F037;/*#817e40;*/ } .divider{ float:left; width:710px; border-bottom:1px dashed #ddd; margin:5px 20px 0 20px; } /* ------------------------------------------------------------------------------------ -- WRAPPERS ------------------------------------------------------------------------------------ */ #wrapper{ float:left; width:100%; height:100%; min-height:100%; /*height:100%;*/ position:absolute; top:0px; left:0; z-index:1; } #inner-wrap{ float:left; margin-left:30px; } #main-content-index{ float:left; height:540px; width:980px; background:rgba(0,0,0,0.8); border-right:1px solid #000; border-left:1px solid #000; border-bottom:1px solid #000; margin-top:30px; clear:both; } /* ------------------------------------------------------------------------------------ -- NAVIGATIONS STYLES: THERE ARE 3 TYPES OF NAVIGATION HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- 1) BOTTOM NAVIGATION STYLES FOR INDEX PAGE ONLY ------------------------------------------------------------------------------------ */ nav#slide-nav{ float:right; margin:20px 30px 20px 0; } nav#slide-nav a{ text-transform:uppercase; color:#111111; padding:0 0 10px 0; display:block; text-shadow:1px 1x 3px #222; letter-spacing:0.1em; text-align:center; display:inline; padding:10px 0; font-size:1em; } nav#slide-nav a:hover{ color:#C0FF6E; /*text-shadow:0px 0px 1px #555;*/ } /* ------------------------------------------------------------------------------------ -- 2) SIDE NAVIGATION STYLES FOR ALL PAGES APART INDEX ------------------------------------------------------------------------------------ */ nav#side{ float:right; width:148px; margin:40px 20px 0 0; } nav#side a{ text-transform:uppercase; color:#7DA647; padding:0 5px 10px 0; display:block; letter-spacing:0.1em; /* -webkit-transition: opacity 1s linear; -moz-transition-duration: 1s; -o-transition-duration: 1s;*/ } nav#side a:hover{ color:#C0FF6E; text-decoration:none; } nav#side a.current { color:#A0F037; } #social{ float:left; margin-top:20px; } #social figure{ float:left; margin-right:5px; } /* ------------------------------------------------------------------------------------ -- 3) TOP SUB NAVIGATION STYLES FOR INNER PAGES ------------------------------------------------------------------------------------ */ nav#top{ float:left; margin-left:30px; padding:20px; -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; -ms-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000; border-bottom:1px solid #000; border-right:1px solid #000; border-left:1px solid #000; background:rgba(0,0,0,0.8); } nav#top a{ text-transform:uppercase; color:#7DA647; padding:0 0 10px 0; display:block; text-shadow:1px 1x 3px #222; letter-spacing:0.1em; /* -webkit-transition: opacity 1s linear; -moz-transition-duration: 1s; -o-transition-duration: 1s;*/ } nav#top a:hover{ color:#C0FF6E; padding-top:0px; text-decoration:none; } nav#top a.current { color:#A0F037; } /* ------------------------------------------------------------------------------------ -- HEADER ------------------------------------------------------------------------------------ */ header{ margin:0;; float:left; -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; -ms-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000; border-bottom:1px solid #000; border-right:1px solid #000; border-left:1px solid #000; background:rgba(0,0,0,0.8); } #logo{ margin:30px 0; width: 186px; float:left; } #logo h1 a{ text-decoration:none; padding: 38px 0 0 0; height: 0; overflow: hidden; display:block; background: url('images/logo.png') no-repeat center; } #logo p{ text-align:center; font-family: sans-serif; color:#e4ecd9; font-size:1.2em; display:block; padding-top: 0.4em; } /* ------------------------------------------------------------------------------------ -- CONTENT SLIDER STYLES ALL PAGES WITH HEIGHT ------------------------------------------------------------------------------------ */ #hero-slider { text-align:left; background-color:#efefef; border:1px solid #ccc; width:750px; height:458px; margin: 40px 20px 40px 40px; float:left; } #hero-slider .mask { float:left; width:750px; height:376px; overflow:hidden; } #hero-slider .panel { width:750px; height:381px; text-align:left; } /* Hiding the original paragraphs if they have not been replaced (JS disabled): */ .panel-image > p{ display:none; } .panelinfo{ margin:0 20px; } .panelinfo2{ margin:20px; clear:both; float:left; } a.button{ float:right; width:25%; background:#ddd; text-align:center; color:#666; padding:8px 0; display:block; -moz-border-radius:4px; -webkit-border-radius:4px; -border-radius:4px; -moz-box-shadow:0px 0px 2px #797979; -webkit-box-shadow:0px 0px 2px #797979; -ms-box-shadow:0px 0px 2px #797979; -box-shadow:0px 0px 2px #797979; border:1px solid #fff; text-transform:uppercase; } .panelinfo2 p{ font-size:0.8em; display:block; width:70%; float:left; } #hero-slider ul { background: none repeat scroll 0 0 #DEDEDE; border: 20px solid #DEDEDE; float: left; list-style: none outside none; margin-bottom: 20px; width: 710px; } #hero-slider ul li { margin:0 20px 0 0; float:right; } #hero-slider ul a { outline:none; text-decoration: none; display:block; color:#7DA647; font-size:1em; font-family:'Oswald', sans-serif; padding-bottom:4px; padding-top: 2px; text-transform:capitalize; } #hero-slider ul a.active { color: #3D5C15; border-bottom:1px solid #3D5C15; } .panel h2 { font-size:1.6em; line-height:1.2em; text-transform:uppercase; font-weight:normal; font-family:'Oswald', sans-serif; letter-spacing:2px; color:#3D5C15; padding:0 0 0.8em 0; } .panel h3{ font-size:1.2em; line-height:1.2em; text-transform:uppercase; font-weight:normal; font-family:'Oswald', sans-serif; letter-spacing:2px; color:#3D5C15; padding:0 0 0.8em 0; } .panel p { color:#666; line-height:1.5em; padding-bottom:10px; } .clear {clear:both} /* ------------------------------------------------------------------------------------ -- HOURS SLIDING PANEL ------------------------------------------------------------------------------------ */ section#hours{ float:left; width:980px; margin-bottom:40px; } #hours a.btn-slide{ color:#CDE9CA; text-align:center; text-transform:uppercase; padding:10px 24px 14px 24px; display:block; float:left; } #hours a.btn-slide:hover{ color:#7DA647; text-shadow: 1px 1px 3px #ECF4E6; } #panel-hours{ float:left; background:rgba(96,120,96,0.8); width:980px; display: none; border:1px solid #7DA647; } #opening-hours{ float:right; margin:20px 30px 20px 0; } #opening-hours p{ text-transform:uppercase; color:#fff; text-align:center; display:inline; text-shadow: 1px 1px 3px #333333; letter-spacing:0.1em; opacity: 1; /* -webkit-transition: opacity 1s linear; -moz-transition-duration: 1s; -o-transition-duration: 1s;*/ padding:10px 0; font-size:0.8em; } /* ------------------------------------------------------------------------------------ -- PAGES ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- INDEX STYLES ------------------------------------------------------------------------------------ */ #crossslide{ width: 100%; min-height:100%; height:100%; margin:0px auto; position:fixed; background: #000; } div#main-content{ float:left; width:660px; margin:0 0 0 30px; float:left; background:transparent; } #frontpage{ float:left; height:480px; width:660px; background:rgba(0,0,0,0.8); border:1px solid #000; } #frontpage article{ float:left; margin:27px 60px; height:420px; } #frontpage article h1{ font-size:4em; line-height:1.2em; text-transform:none; font-weight:normal; font-family:'Oswald', sans-serif; letter-spacing:2px; color:#e4ecd9; } .coloured-1{ color:#C0FF6E; } .coloured-2, .coloured { color:#7DA647; } .coloured-3{ color:#3D5C15; } .coloured-4{ color:#5EA600; } .coloured-5{ color:#A0F037; } #frontpage article p{ font-size:0.95em; display:block; margin-top:2em; line-height:1.4em; color:#c7c7c7; } #bottom-nav{ float:right; margin-right:30px; background:rgba(0,0,0,0.8); -moz-border-radius: 0px 0px 4px 4px; -webkit-border-bottom-right-radius:6px; -webkit-border-bottom-left-radius:6px; -khtml-border-bottom-right-radius:6px; -khtml-border-bottom-left-radius:6px; border-radius: 0px 0px 4px 4px; } #bottom-nav a.btn-slide{ color:#7DA647; text-align:center; text-transform:uppercase; padding:10px 24px 14px 24px; display:block; float:left; } #bottom-nav a.btn-slide:hover{ color:#C0FF6E; /*text-shadow: 0px 0px 1px #ECF4E6;*/ } #panel{ float:left; background:rgba(125,166,71,0.8); width:660px; /*display: none;*/ border:1px solid #7DA647; } /* ------------------------------------------------------------------------------------ -- INDEX ENDS HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- A LA CARTE STYLES ------------------------------------------------------------------------------------ */ .panelinfo ol.lists{ float:left; list-style:none; margin:0; padding:0; width:708px; background:#fff; border:1px solid #ddd; } .panelinfo ol.lists li{ float:left; width:218px; margin-right:7px; color:#555; } .panelinfo ol.lists li.title{ width:334px; margin-left:20px; text-transform:uppercase; } .panelinfo ol.lists li.dots{ width:180px; font-size:0.8em; } .panelinfo ol.lists li.price{ width:140px; margin-right:20px; font-size: 1.1em; font-family:'Oswald', sans-serif; text-align: right; } .panelinfo ol.lists li.price.items{ width:150px; } .panelinfo ol.lists li.price span.tachado { text-decoration:line-through; color: #999; font-size: 0.8em; } .panelinfo ol.items{ float:left; width:100%; margin:20px 0; list-style:none; } .panelinfo ol.items li{ background:#ddd; margin-bottom:7px; height:36px; width: 100%; } .panelinfo ol.items li:last-child{ margin-bottom:0; } .item-wrapper{ margin:10px; float:left; width:90%; background:transparent; } small.menu-small{ font-family:'Mako', sans-serif; padding-left:4px; } a.button2{ background:#ddd; text-align:center; color:#666; padding:0.8em 0.4em; display:block; -moz-border-radius:4px; -webkit-border-radius:4px; -border-radius:4px; -moz-box-shadow:0px 0px 2px #ddd; -webkit-box-shadow:0px 0px 2px #ddd; -ms-box-shadow:0px 0px 2px #ddd; -box-shadow:0px 0px 2px #ddd; border:1px solid #fff; text-transform:uppercase; font-size:14px; font-weight:normal; position:absolute; top:260px; width:140px; left:648px; } figure.no-frame{ float:left; margin-right:10px; padding:0; background:transparent; border:none; margin-top:-6px; } #data1, #data2{ width:660px; overflow:hidden; } #data1, #data2 p{ color:#555; line-height:1.5em; } article.description{ float:left; overflow:hidden; margin:10px; padding:20px; background-color:#efefef; } article.description figure{ background:#fff; border:1px solid #ddd; padding:20px; float:left; margin-right:20px; } .description h1 { padding:0 0 0.8em 0; color:#9e9e9e; text-transform:uppercase; font-size:1.2em; } /* ------------------------------------------------------------------------------------ -- A LA CARTE ENDS HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- Empresa STYLES ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- SLIDING PARTS STYLES (courtesy of Martin Angelov TZ) ------------------------------------------------------------------------------------ */ .panel-image{ margin:0 20px; background:url(images/staff.jpg)no-repeat; width:710px; height:330px; position:relative; } .slideOutTip{ /* The main wrapping div of the slideout tips */ position:absolute; padding:3px; top:0; left:0; background-color:#111; font-size:13px; color:white; overflow:hidden; height:22px; } .slideOutTip:hover{ /* Applying a CSS3 outer glow on hover */ -moz-box-shadow:0 0 1px #999; -webkit-box-shadow:0 0 1px #999; box-shadow:0 0 1px #999; } /* The holder for the title and the icon: */ .tipVisible{ cursor:pointer; height:22px; } .tipTitle{ float:left; font-family:'Mako', sans-serif; font-size:15px; font-weight:bold; white-space:nowrap; line-height:22px; padding-right:5px; } .tipIcon{ width:20px; height:20px; float:left; background-color:#61b035; border:1px solid #70c244; margin-right:8px; /* CSS3 Rounded corners */ -moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px; } .green .tipIcon{ background-color:#908f4a; border:1px solid #70c244; } .plusIcon{ /* The plus icon */ width:13px; height:13px; background:url('images/plus.gif') no-repeat center center; margin:4px; -webkit-transition: -webkit-transform 0.2s linear; -moz-transition: -moz-transform 0.2s linear; transition: transform 0.2s linear; } .slideOutTip.isOpened{ z-index:10000; } .slideOutTip.isOpened .plusIcon{ /* Applying a CSS3 rotation to the opened slideouts*/ -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } /* Special rules for the left and top - opening versions */ .openLeft .tipIcon{ /* Floating the title and the icon to the right */ margin:0 0 0 8px; float:right; } .openLeft .tipTitle{ float:right; padding:0 0 0 5px; } .openLeft .slideOutContent{ margin-top:22px; } .openLeft.openTop .slideOutContent{ margin-top:0; } .slideOutContent{ /* Hiding the div with the slide out content: */ display:none; padding:10px; font-size:13px; line-height:1.3em; } /* ------------------------------------------------------------------------------------ -- BLOCKQUOTE STYLES ------------------------------------------------------------------------------------ */ blockquote{ font-style:italic; line-height:1.5em; letter-spacing:1px; font-weight:normal; color:#8a8787; } #quotes-wrap{ float:left; margin-top:10px; } .quotes{ font-size:0.8em; float:left; width:688px; background:url(images/white-bg.jpg)repeat; border:1px solid #ddd; margin-bottom:20px; padding:10px; } .quotes img{ margin-right:10px; margin-top:-20px; } .quotes p{ overflow:hidden; margin-bottom:0; padding-bottom:0; } .quotes .name{ font-family:Georgia; color:#87998a; } /* ------------------------------------------------------------------------------------ -- LOCATION STYLES ------------------------------------------------------------------------------------ */ #inner-wrap-map{ z-index: 1; position: absolute; margin-left:30px; background:transparent; float:left; } div#content{ float:left; width:400px; overflow:hidden; } div#bodyContent{ width:400px; /*height:410px;*/ float:left; } div#bodyContent p{ font-size:0.9em; line-height:1.3em; margin-bottom:20px; } h1#firstHeading{ font-family:sans-serif; font-size:1.2em; color:#7DA647; padding-bottom:0.5em; text-transform:uppercase; font-weight:bold; } #map_canvas{ height:100%; width:100%; } /* ------------------------------------------------------------------------------------ -- LOCATION ENDS HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- CONTACT STYLES ------------------------------------------------------------------------------------ */ /*-------FORM----------*/ .form-wrapper { clear:both; overflow:hidden; float:left; } form#contact ol#forma{ width:710px; background:transparent; list-style:none; background:#fff; border:1px solid #ddd; float:left; } form#contact li.form-item{ float:left; width:323px; margin-right:10px; margin-left:20px; margin-top:20px; } form#contact li.form-item2{ float:right; width:323px; margin-left:10px; margin-right:20px; margin-top:20px; } form#contact li.form-item3{ float:left; width:670px; margin:20px; } form#contact li.form-item6{ float:left; width:670px; margin:0 0 20px 20px; } .form-wrapper label { margin-bottom: 20px; } .form-wrapper input { border:none; padding:10px 0; line-height:1.3em; outline:none; border:1px solid rgba(142,119,87,0.4); width:319px; font-size:1.1em; color:#ddd; padding:4px 0 4px 4px; height:30px; } #entry_0{ background:url(images/input-campo.png)no-repeat; } #entry_1{ background:url(images/input-campo.png)no-repeat; } #entry_2{ background:url(images/input-campo.png)no-repeat; } #entry_3{ background:url(images/input-campo.png)no-repeat; } #entry_4{ background:url(images/textarea.png)repeat; } form#contact textarea{ border:1px solid rgba(142,119,87,0.4); width:661px; font-size:1.1em; color:#ddd; padding:4px; } #buttonsubmit { float:left; background:#5EA600; opacity:1; -moz-transition:opacity .3s ease-in-out; -webkit-transition:opacity .3s ease-in-out; transition:opacity .3s ease-in-out; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius: 4px; border-radius:4px -moz-box-shadow:4px 4px 0 #3D5C15; -webkit-box-shadow:4px 4px 0 #3D5C15; box-shadow:4px 4px 0 #3D5C15;; color:#A0F037; font-size:1.1em; text-transform:uppercase; text-shadow:0px 1px 1px #7DA647; font-weight:bold; cursor:pointer; } #buttonsubmit:hover, #buttonsubmit:focus { color:#C0FF6E; opacity:.9; } /* ------------------------------------------------------------------------------------ -- CONTACT ENDS HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- SERVICES STYLES ------------------------------------------------------------------------------------ */ article.trigger-info{ width:708px; border:1px solid #ddd; float:left; -moz-border-radius:4px; -webkit-border-radius:4px; -border-radius:4px; } h3.trigger{ border-bottom:1px solid #ddd; padding:0.8em 0.8em 0 0.8em; background:url(images/trigger.jpg)no-repeat; height:30px; margin:0; cursor:pointer; } .toggle_container p{ font-size:0.9em; padding:4px; } /* ------------------------------------------------------------------------------------ -- SERVICES ENDS HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- GALLERY STYLES ------------------------------------------------------------------------------------ */ a.grouped_elements{ width:139px; height:120px; border:1px solid #ddd; padding:8px; float:left; background:#fff; margin-right:20px; margin-bottom:20px; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit-box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; } a.lastimg{ margin-right:0; } /* ------------------------------------------------------------------------------------ -- GALLERY ENDS HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- ADDITIONAL PAGES STYLES ------------------------------------------------------------------------------------ */ #main-content-index-additional{ float:left; width:980px; background:rgba(0,0,0,0.8); margin-top:30px; clear:both; } #normal { text-align:left; background-color:#efefef; border:1px solid #ccc; width:750px; margin:40px; float:left; } #additional-nav{ float:left; width:750px; } #additional-nav ul{ margin:20px 20px 40px 20px; list-style:none; float:left; width:710px; } #additional-nav ul li { margin:0 20px 0 0; float:left; } #additional-nav ul a { outline:none; text-decoration: none; display:block; color:#555; font-size:0.8em; padding-top:4px; text-transform:capitalize; } #additional-nav ul a.active { color:#000; border-top:1px solid #000; } #empty-block{ float:left; height:20px; width:100%; } #normal figure{ background:#fff; border:1px solid #ddd; padding:20px; } #normal figure.right{ float:right; margin-left:20px; } #normal figure.left{ float:left; margin-right:20px; } #normal figure.no-frame{ float:left; margin-right:10px; padding:0; background:transparent; border:none; margin-top:-6px; } #normal strong{ padding-bottom:0.6em; display:block; } #normal p:last-child{ margin-bottom:0; padding-bottom:0; } /*---GALLERY---*/ #gallery-wrapper{ float:left; width:710px; } .spacegallery { position: relative; overflow: hidden; } .spacegallery img { position: absolute; left: 50%; } .spacegallery a { position: absolute; z-index: 1000; display: block; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } #timeline{ height:484px; margin-top:10px; } p.small{ font-size:0.8em; } .panelinfo ol.history{ float:left; list-style:none; margin:20px 0 0 0; padding:0; width:708px; } .panelinfo ol.history li{ float:left; width:218px; margin-right:7px; color:#555; margin-right:20px; } .panelinfo ol.history li:last-child{ width:218px; margin-right:0px; } /* ------------------------------------------------------------------------------------ -- ADDITIONAL PAGES (HEIGHT IS NOT SET) ENDS HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- THANKYOU PAGE STYLES ------------------------------------------------------------------------------------ */ #thanks{ float:left; margin-top:20px; background:#fff; border:1px solid #ddd; padding:20px; width:668px; -moz-border-radius:4px; -webkit-border-radius:4px; -border-radius:4px; } #thanks h1{ font-size:1.9em; color:#555; text-shadow:1 1 3px #000; display:block; margin-bottom:20px; } /* ------------------------------------------------------------------------------------ -- THANKYOU PAGE ENDS HERE ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ -- ALL STYLES END HERE ------------------------------------------------------------------------------------ */