/* Theme Name: B&B - Bed&Breakfast Responsive site template Theme URI: http://www.ansonika.com/bed-and-breakfast/ Description: Bed&Breakfast Responsive site template is created by Ansonika. Version: 1.0.0 Author: Ansonika Author URI: http://themeforest.net/user/Ansonika/ CSS STRUCTURE: 1. SITE STRUCTURE 3. CONTENT 3. MISC 4. MEDIA QUERIES (responsive styles) --------------------------------------------------------*/ /* 1.SITE STRUCTURE ================================================== */ /*Menu*/ header {width: 100%; position: fixed; z-index: 1000; padding: 5px 0 15px 0; top:0; left:0; } #top-nav ul { padding-top:10px; float:right; position:relative} #top-nav ul li { display: inline; margin: 0 15px 0 0;} #top-nav a {font-size: 14px; text-decoration: none; font-weight:700;} #top-nav a:hover { color: #FFF; transition: color 0.5s;} #top-nav ul .current a{ color: #FFF;} #lang ul{float: right; } #lang ul li a{ float:left; width:27px; height:18px; margin-right:5px; display:block; text-indent:-9999px; background-repeat: no-repeat; background-position: 0 0;} /* Button Responsive Menu*/ .btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin: 0px 0 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#555; border-radius: 4px;} .icon-bar {display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;border-radius: 1px;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);} .show{display:block!important} /* 2. CONTENT ================================================== */ .info, #contact,#activities, #about, .properties {background: #fff;} .info, #contact, #about, .properties{ padding-bottom:50px;} #activities { padding-bottom:40px;} /*Homepage section*/ #homepage .container {height: 100%;} #homepage { position: relative; overflow: hidden; height: 100%; margin:0; background: url(../images/slider/bg-opacity-50.png) repeat;} #logo-in { margin: 4px 0 0 0;} #intro-txt{ width:800px; height:300px;position:absolute; top:50%; left:50%; margin-left:-400px; margin-top:-120px; text-align:center; color:#fff;} #footer-homepage {color:#fff; position: absolute; width: 100%; text-align:center; bottom:0;left:0;font-size:12px; padding-top:20px; padding-bottom:10px;} #footer-homepage strong { font-size:16px;} #logos{ margin-bottom:60px;} /*Carousel About section */ .mycont{margin:-20px auto 0 auto;padding-top:50px;overflow:hidden;max-width: 930px; padding-bottom:15px;} .mycarousel li { box-shadow: inset 0 0 0 5px rgba(200, 200, 200, 0.1), 0 0 5px 0 rgba(0, 0, 0, 0.35); padding: 0;width: 280px;margin: 15px; float:left; background:#fff; margin-bottom:10px; } .ie8 .mycarousel li { border:1px solid #ededed; padding: 0;padding: 0;width: 280px;margin: 15px; float:left} .jcarousel-clip{overflow: hidden;} .jcarousel-prev, .jcarousel-next{position: absolute;top: -36px;z-index: 99;display: block;width: 36px;height: 36px;opacity: 0.6;cursor: pointer;} .jcarousel-prev{background: url(../images/carousel-prev.png) no-repeat left center;right: 60px;} .jcarousel-next{background: url(../images/carousel-next.png) no-repeat left center;right: 15px;} .jcarousel-next:hover{background: url(../images/carousel-next-2.png) no-repeat left center;} .jcarousel-prev:hover {background: url(../images/carousel-prev-2.png) no-repeat left center;} #main-facilties span a{ display:block; padding:30px; text-align:center; margin-bottom:10px; background: #f8f8f8 top right;transition: background .6s ease; } #main-facilties span a:hover{ background:#e5f7f9 url(../images/plus_corner.png) no-repeat bottom right; } #main-facilties .four.columns{ text-align:center; } /* Testimonials sections*/ #testimonials {background: url(../images/bg-testimonials.png) repeat; position:relative; color:#fff; margin-bottom:30px;} #testimonials ul li { padding:30px 30px 30px 110px; line-height:18px; text-align:left; background:url(../images/quote.png) 30px center no-repeat; letter-spacing:0; font-size: 14px; text-shadow:none; } #testimonials cite{ font-weight: normal; font-style:italic; margin-top:15px; display: block;} .qr_buttons { text-align:right; position:absolute; bottom:-50px; right:0; } button.qr_previous, button.qr_next{ background: no-repeat 0 0; width:36px; height:36px; text-indent:-9999px; border:none; cursor:pointer; margin-top:10px; } button.qr_previous{ background:url(../images/button-prev-quote.png); margin-right:5px; } button.qr_next{ background: url(../images/button-next-quote.png);} /*location section*/ .info article { background-color:#fff; box-shadow: inset 0 0 0 5px rgba(200, 200, 200, 0.1), 0 0 5px 0 rgba(0, 0, 0, 0.35); margin: 0 10px 70px 10px; } .ie8 .info article { background-color:#f8f8f8; margin: 0 10px 80px 10px} .info-box {padding:30px 30px 10px 30px; background: #fffadd; box-shadow: inset 0 0 0 5px rgba(200, 200, 200, 0.1), 0 0 3px 0 rgba(0, 0, 0, 0.35); border:1px solid #fff; margin-bottom:15px;} /*Prices stickers */ .price-green,.price-blue,.price-green-2,.price-aqua, .price-red {width:90px; height:60px; color:#fff; text-align:center; position:absolute; z-index:99; left:10px; bottom:-30px; display:block; font-weight:800; font-size:30px; padding-top:30px; background-color:#fff; } .price-green small, .price-blue small, .price-aqua small, .price-green-2 small, .price-red small { font-size:22px;} .price-green { background:url(../images/circle-green.png) no-repeat; } .price-green em, .price-blue em, .price-green-2 em, .price-aqua em, .price-red em { font-size:13px; font-style:normal; display:block; font-weight:400;} .price-blue { background: url(../images/circle-blue.png) no-repeat; } .price-green-2 { background: url(../images/circle-green-2.png) no-repeat;} .price-aqua {background: url(../images/circle-aqua.png) no-repeat;} .price-red {background: url(../images/circle-red.png) no-repeat;} /*Activities section*/ #activities article { text-align:center; margin-top:-20px; } #activities figure { position:relative;} #activities figure span { z-index:99; background:url(../images/frame-circular.png) center top no-repeat; position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:hidden;} /* Accordion used for tours */ .accordion{ width:97%; margin-top:5px; margin-bottom:20px} .accordion dt a{display:block;font-size:16px;padding:5px 10px ; text-decoration:none;color: #333;background: #f5f5f5 url(../images/plus.png) no-repeat center right;line-height:32px; transition: background .5s ease;margin-bottom:5px; } .accordion dt a:hover, .accordion dt.active a{text-decoration:none;background:#39bad2 url(../images/plus.png) no-repeat center right;color:#fff;} .accordion dd {display:none;padding:10px 10px 15px 10px;} /*Fullscreen gallery*/ #close, .nav-gal { position:absolute; height:39px; width:39px; opacity:0.6; right:10px; } #close { top:10px; background:url('../images/close_gallery.png'); } .nav-gal { top:55px; background:url('../images/gallery_thumb.png'); } #close:hover, .nav-gal:hover { cursor:pointer; opacity:1;} ul#galleries { margin-top:30px;} ul#galleries li { width:100%; height:60px; background-color:#000; opacity:0.8;margin-bottom:10px; } ul#galleries li a { width:100%; height:60px; display:block; color:#fff; text-decoration:none} ul#galleries li a:hover { background-color:#51a4c4;} ul#galleries li figure { width:60px; height:60px; overflow:hidden; float:left; margin:7px 10px 0px 7px;} ul#galleries li figure img { width:80px; height:auto;} ul#galleries li figure desc { width:80px; height:auto;} ul#galleries li h6 { padding-top:12px; font-weight:600; color:#fff } /*Contacts */ #map {height:300px;width:100%;} /* Table */ #rates tr:nth-of-type(odd){ background:#eee;} #rates th{ background:#333 url(../img/bg_header.png) repeat-x; color:white; font-weight:bold;} #rates td,#rates th{ padding:8px; text-align:left;} /* 3. MISC ================================================== */ /* list bullets*/ ul.list_3{ margin:0; padding:0 0 15px 0;} ul.list_3 li{background:url(../images/tick_1.png) no-repeat left 3px;line-height:18px;padding-left:20px; margin-bottom:6px;} .spacer-2 { padding: 30px;} .spacer-3 { padding: 30px 30px 35px 20px; } .spacer p, .spacer-2 p { padding-bottom:0; margin-bottom:0; } /*Hover image icon */ figure{ position:relative;} .icon-hover{ background:url(../images/zoom_1.png) no-repeat 50% 50%; display:none; height:97%; left:0; position:absolute; top:0; width:100%; z-index:999;} .gallery-bt{ display:inline-block; padding: 0 0 0 50px;} /*Facilities icons */ ul.room_facilities{ padding: 5px 0 15px 0;} ul.room_facilities li{ display:block; float:left; height:26px; margin:0 20px 20px 0; text-indent:-9999px; width:24px;} ul.room_facilities li a{ cursor:pointer; display:block; height:26px; width:24px;} ul.room_facilities li.lcd a{ background:url(../images/icons_room.png) no-repeat -1px 0;} ul.room_facilities li.wifi a{ background:url(../images/icons_room.png) no-repeat -40px 0;} ul.room_facilities li.safe a{ background:url(../images/icons_room.png) no-repeat -195px 0;} ul.room_facilities li.bath a{ background:url(../images/icons_room.png) no-repeat -389px 0;} ul.room_facilities li.loundry a{ background:url(../images/icons_room.png) no-repeat -234px 0;} ul.room_facilities li.parking a{ background:url(../images/icons_room.png) no-repeat -466px 0;} ul.room_facilities li.breakfast a{ background:url(../images/icons_room.png) no-repeat -117px 0;} ul.room_facilities li.dinner a{ background:url(../images/icons_room.png) no-repeat -428px 0;} ul.room_facilities li.air-warm a{ background:url(../images/icons_room.png) no-repeat -272px 0;} ul.room_facilities li.air-cold a{ background:url(../images/icons_room.png) no-repeat -311px 0;} ul.room_facilities li.swimming a{ background:url(../images/icons_room.png) no-repeat -350px 0;} ul.room_facilities li.occupancy a{ background:url(../images/icons_room.png) no-repeat -78px 0;} ul.room_facilities li.pet a{ background:url(../images/icons_room.png) no-repeat -156px 0;} /* Reveal Modals */ .reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,.6); z-index: 100; display: none; top: 0; left: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=60);} .reveal-modal {visibility: hidden; top: 20%; left: 50%; width: 400px; margin-left: -200px; position: absolute;z-index: 101;} .reveal-modal .close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa;text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold;cursor: pointer;} /* NOTES Close button entity is × */ /* 4. MEDIA QUERIES (responsive styles) ================================================== */ /* Tablet Portrait size to standard 960 (devices and browsers) ================================== */ @media only screen and (min-width: 768px) and (max-width: 959px) { #intro-txt{ width:600px; height:280px; margin-left:-300px; margin-top:-120px; } .mycont{padding-top:50px;max-width: 760px; overflow:hidden} .mycarousel li {width: 350px;margin: 15px; float:left} #activities figure span { z-index:99; background:url(../images/frame-circular-2.png) center center no-repeat; position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:hidden;} .accordion{ width:100%;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { header { position:relative;} header .container .four.columns { float:left; width:200px;} header .container .twelve.columns {width: 50px; float:right;} #logos { display:none; } .info, #contact, #about, .properties{ padding-bottom:20px;} #activities { padding-bottom:10px;} #top-nav #lang ul{float: none; border:none; height:18px; position:absolute; top:-10px; right:55px;} #top-nav #lang ul li{ display:inline-block;border:none; float:none; } #top-nav {width:100%;float:left; display:none; } #top-nav ul {float: none; padding:20px 0 15px 0; margin:0;} #top-nav ul li:first-child {border-top:none;} #top-nav ul li {float: none; font-size:14px; padding:0; margin:0; display:block} #top-nav ul li a { display:block; padding:8px 0 8px 9px;} #top-nav ul li a:hover{ } #top-nav a#homepage-bt { text-indent:0px; width:auto; background:none;} .btn-responsive-menu{display:block;} #intro-txt{ width:320px; margin-left:-160px; margin-top:-40px; } .mycont{overflow:hidden;max-width: 380px;} .mycarousel li { padding: 0;padding: 0;width: 350px;margin: 15px; float:left} .reveal-modal {width: 300px; margin-left: -140px; } #main-facilties span {display: block; } #map {height:250px;width:100%;} .info article { margin: 0 0px 50px 0px} #testimonials ul li { padding:15px 15px 15px 100px; } .reveal-modal { top: 8%; } .gallery-bt{ display:block; padding: 0; text-align:center; margin-bottom:20px;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { header { position:relative;} header .container .four.columns {width: 200px; float:left;} header .container .twelve.columns {width: 50px; float:right;} #logos { display:none; } .info, #contact, #about, .properties{ padding-bottom:20px;} #activities { padding-bottom:10px;} #top-nav #lang ul{float: none; border:none; height:18px; position:absolute; top:-10px; right:40px;} #top-nav #lang ul li{ display:inline-block;border:none; float:none; } #top-nav {width:100%;float:left;} #top-nav {display:none;} #top-nav ul {float: none; padding:20px 0 15px 0; margin:0;} #top-nav ul li {float: none; font-size:14px; padding:0; margin:0; display:block} #top-nav ul li a { display:block; padding:5px;} #top-nav ul li a:hover{ } #top-nav a#homepage-bt { display:none;} .btn-responsive-menu{display:block;} #map {height:250px;width:100%;} #intro-txt{ width:260px; height:130px; margin-left:-130px; margin-top:-30px; } .mycont{padding-top:38px;overflow:hidden;max-width: 380px;} .mycarousel li {padding: 0;width: 280px;margin: 10px; float:left} .reveal-modal {width: 300px; margin-left: -150px; } #testimonials ul li { padding:15px 15px 15px 100px; } #main-facilties span {display: block; } .accordion{ width:100%;} .info .container { padding-top:15px;} .info article { margin: 0 0px 50px 0px} .reveal-modal {width: 260px; margin-left: -130px; top:8%; } .gallery-bt{ display:block; padding: 0; text-align:center; margin-bottom:20px;} /* Force table to not be like tables anymore */ table #rates,#rates thead,#rates tbody,#rates th, #rates td, #rates tr {display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #rates thead tr { position: absolute;top: -9999px;left: -9999px;} #rates tr { border: 1px solid #ccc; } #rates td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 40%; } #rates td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 25%; padding-right: 10px; white-space: nowrap; } /* Label the data */ #rates td:nth-of-type(1):before { content: "Features"; } #rates td:nth-of-type(2):before { content: ""; } #rates td:nth-of-type(3):before { content: ""; } #rates td:nth-of-type(4):before { content: ""; } }