/* Desktop over 1200px */ @media only screen and (min-width: 1200px) { /*-------------------------------------------------------------------------------------------------------*/ /* Layouts /*-------------------------------------------------------------------------------------------------------*/ #container {width:1170px; padding:5px;} .content {width:1054px;} #sidebar {width:300px; padding:20px 32px 50px 0px;} #main-content {width:720px; padding:16px 0px 50px;} #sidebar .widget {width: 300px;} /* Sidebar Rigth ------------------------------------------------------------------------------------*/ .content.right #sidebar { float:right; width:300px; padding:20px 0px 50px 32px;} .content.right #main-content { float:left; width:720px; padding:12px 0px 50px; margin-right:0px;} /*-------------------------------------------------------------------------------------------------------*/ /* Header /*-------------------------------------------------------------------------------------------------------*/ #header{width:1170px;} #header #logo { width: 194px; margin: 10px auto 0px;} #header .main-menu.left ul li:last-child a {background: none;} /*-------------------------------------------------------------------------------------------------------*/ /* Home Page /*-------------------------------------------------------------------------------------------------------*/ /* Bottom Strip --------------------------------------------------------------------*/ .bottom-strip { width:1054px;} .breadcrumb-inner { width:1170px;} /* Home Teasers --------------------------------------------------------------------*/ ul.home-teasers { margin:0px 0px 25px -30px;} ul.home-teasers li {width:320px; margin-left:40px; } ul.home-teasers li a img { width:297px; height:auto;} /*-------------------------------------------------------------------------------------------------------*/ /* Footer /*-------------------------------------------------------------------------------------------------------*/ #footer{ width:740px; padding:18px 0px 10px; } #footer ul li { margin-right:12px;} /*-------------------------------------------------------------------------------------------------------*/ /* Contact Us Page /*-------------------------------------------------------------------------------------------------------*/ #map_canvas, #map_canvas2, #map_canvas3 { width:698px;} .contact-form { width:698px; padding-left:2px;} .contact-form p {width:276px;} .contact-form p.adjust {margin-right: 84px;} .contact-form input[type="text"] { width:328px;} .contact-form #message { width:690px;} /*-------------------------------------------------------------------------------------------------------*/ /* Tabbed Page /*-------------------------------------------------------------------------------------------------------*/ .tabs-nav.master {width: 270px;} .tabs-container.master {width: 742px;} } /* Tablet Portrait size 768 to standard 979 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 979px) { /*-------------------------------------------------------------------------------------------------------*/ /* Layouts /*-------------------------------------------------------------------------------------------------------*/ #container {width:730px; padding:5px;} .content {width:648px; padding:0px 40px;} #sidebar { width:218px; padding:20px 32px 50px 0px;} #main-content { width:398px; padding:16px 0px 50px;} /* Sidebar Rigth ------------------------------------------------------------------------------------*/ .content.right #sidebar { float:right; width:208px; padding:20px 0px 50px 32px;} .content.right #main-content { float:left; width:398px; padding:12px 0px 50px; margin-right:0px;} /*-------------------------------------------------------------------------------------------------------*/ /* Header /*-------------------------------------------------------------------------------------------------------*/ #header{width:740px;} #header #logo { width:140px; margin:2px auto 0px; } #header #header-top-left { right:0px; } #header #header-top-right { right:0px; } #header .main-menu.left{ left:0px;} #header .main-menu.right{ right:-22px;} #header nav ul li{ padding-right:10px;} #header ul li a { font-size:14px; padding-right:10px;} #header ul li > ul { top:32px;} /*-------------------------------------------------------------------------------------------------------*/ /* Home Page /*-------------------------------------------------------------------------------------------------------*/ /* Bottom Strip --------------------------------------------------------------------*/ .bottom-strip { width:740px;} .breadcrumb-inner { width:740px;} /* Home Teasers --------------------------------------------------------------------*/ ul.home-teasers { margin:0px 0px 25px -30px;} ul.home-teasers li {width:196px; margin-left:30px; } ul.home-teasers li figure { background-color:#f0f1f2; padding: 5px 3px 5px 5px; margin:0px 0px 20px 1px; } ul.home-teasers li a img { width:179px; height:auto;} /*-------------------------------------------------------------------------------------------------------*/ /* Footer /*-------------------------------------------------------------------------------------------------------*/ #footer{ width:740px; padding:18px 0px 10px; } #footer ul li { margin-right:12px;} /*-------------------------------------------------------------------------------------------------------*/ /* Contact Us Page /*-------------------------------------------------------------------------------------------------------*/ #map_canvas, #map_canvas2, #map_canvas3 { width:383px; height: 250px; margin-left:1px;} .contact-form { width:396px; padding-left:2px;} .contact-form p.name, .contact-form p.email { margin-right:0px;} .contact-form p { float:none; width:100%;} .contact-form input[type="text"] { width:212px;} .contact-form #message { width:370px;} /*-------------------------------------------------------------------------------------------------------*/ /* News Page /*-------------------------------------------------------------------------------------------------------*/ .news article { text-align:left;} .news .date { margin:0; } .news .post-head {} /*-----------------------------------------------------------------------------------*/ /* Comments /*-----------------------------------------------------------------------------------*/ #comments .comment .avatar { width:60px; height:60px;} #comments .comment .comment-body, #comments .comment .comment-meta { width: 78%; text-align:left; } #comments .comment .children .comment:first-child { margin-top: 0; } #comments .commentlist .children .depth-2 .comment-body, #comments .commentlist .children .depth-2 .comment-meta { width: 72%; } #comments .commentlist .children .depth-3 .comment-body, #comments .commentlist .children .depth-3 .comment-meta { width: 62%; } #comments .commentlist .children .depth-4 .comment-body, #comments .commentlist .children .depth-4 .comment-meta { width: 50%; } #comments .commentlist .children .depth-5 .comment-body, #comments .commentlist .children .depth-5 .comment-meta { width: 42%; } .tabs-container.master { width: 100%;} .tabs-nav.master { float: none; width: 100%; padding: 0px 0px 20px 0px;} .tabs-nav.master li {float: left;margin-right: 7px;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { /*-------------------------------------------------------------------------------------------------------*/ /* Layouts /*-------------------------------------------------------------------------------------------------------*/ #container {width:430px; padding:5px;} .content {width:348px; padding:0px 40px; } #sidebar { width:348px; padding:25px 0px; text-align:center;} #main-content { width:348px; padding:0px 0px 40px; background:url(images/sep-line-stars.png) no-repeat center bottom; } /* Sidebar Rigth ------------------------------------------------------------------------------------*/ .content.right #sidebar { float:right; background:none; width:348px; padding:25px 0px; } .content.right #main-content { float:left; width:348px; margin-right:0px;} #sidebar .widget{ width:100%; margin:0px auto 15px; text-align:left; } /*-------------------------------------------------------------------------------------------------------*/ /* Header /*-------------------------------------------------------------------------------------------------------*/ #header{width:440px; padding:12px 0px 10px; height:auto;} /* Logo ----------------------------------------------------------------------*/ #header #logo { width:194px; margin:0px auto 15px; } #header #header-top-left { right:0px; } #header #header-top-right { right:0px; } #header .main-menu.left{ position:static; margin:0px auto 10px; display:none;} #header .main-menu.right{ position:static; margin:0px auto 10px;} #header nav ul { text-align:center; display:none;} #header .main-menu { background-color:#fde69f; width: 98%; margin:0px auto; padding:5px; border:1px solid #191919; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;} #header .main-menu .responsive-nav { width:100%; display: block; margin:0px auto; border:1px solid #fde6a4; } /*-------------------------------------------------------------------------------------------------------*/ /* Home Page /*-------------------------------------------------------------------------------------------------------*/ /* Bottom Strip --------------------------------------------------------------------*/ .bottom-strip { width:440px;} .breadcrumb-inner { width:440px;} .bottom-strip p { font-size:0px; line-height:15px; padding:4px 0px;} .bottom-strip p a { padding:5px 10px; font-size:12px; margin-top:9px;} /* Home Teasers --------------------------------------------------------------------*/ ul.home-teasers { margin:0px 0px 25px 0px;} ul.home-teasers li {width:348px; margin:0px 0px 20px 0px; text-align:center; border-bottom:1px solid #fce2af; padding-bottom:20px;} ul.home-teasers li figure { padding: 5px 3px 5px 5px; margin:0px 0px 20px 1px; } ul.home-teasers li a img { width:223px; height:auto;} /*-------------------------------------------------------------------------------------------------------*/ /* Footer /*-------------------------------------------------------------------------------------------------------*/ #footer{ width:440px;} #footer ul li { margin:0px 12px 10px 0px; display:inline-block;} #footer nav ul { text-align:center; display:none;} #footer #footer-menu { background-color:#fde69f; width: 98%; margin:0px auto 25px; padding:5px; border:1px solid #191919; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;} #footer #footer-menu .responsive-nav { width:100%; display: block; margin:0px auto; border:1px solid #fde6a4; } /* Article --------------------------------------------------------------------*/ article ol, article ul{ text-align:left;} /*-------------------------------------------------------------------------------------------------------*/ /* Contact Us Page /*-------------------------------------------------------------------------------------------------------*/ #map_canvas, #map_canvas2, #map_canvas3 { width:323px; height: 323px; margin-left:1px;} .contact-form { width:346px; padding-left:2px;} .contact-form p.name, .contact-form p.email { margin-right:0px;} .contact-form p { float:none; width:100%;} .contact-form input[type="text"] { width:212px;} .contact-form #message { width:330px;} #sidebar .contact-details ul li.p-book{ background:none;} #sidebar .contact-details ul li.list-mail-icon {background:none;} #sidebar .contact-details ul li.list-phone-icon {background:none;} .contact-form #contact-loader{ left:250px;} #reservation-form .contact-form #contact-loader{ left:285px;} /* Sidebar Social Nav --------------------------------------------------------------------*/ #sidebar .social ul { text-align:center;} #sidebar .social li { display:inline; float:none; vertical-align: top;} /*-------------------------------------------------------------------------------------------------------*/ /* News Page /*-------------------------------------------------------------------------------------------------------*/ .news article { text-align:left;} .news .date { float:none; margin:0px auto; } .news .post-head {width:100%;} .comment-count { float:none; margin:0px auto 15px; padding:0px; background:none;} .news article a.read-more-content {float:none; } /*-----------------------------------------------------------------------------------*/ /* Columns Style /*-----------------------------------------------------------------------------------*/ .columns { margin: 0px 0px 0px -2%; overflow: hidden; } .columns .one-third { width: 100%;margin: 0px 0px 0px 2%; float: left; } .columns .two-third { width: 100%; margin: 0px 0px 0px 2%; float: left; } .columns .one-fourth { width: 100%; margin: 0px 0px 0px 2%; float: left; } .columns .three-fourth { width: 100%; margin: 0px 0px 0px 2%; float: left; } .columns .one-half { width: 100%; margin: 0px 0px 0px 2%; float: left; } .columns .single-col { width: 100%; margin: 0px 0px 0px 2%; } .columns-dean { margin: 0px 0px 0px -2%; overflow: hidden; } .columns-dean .one-third { width: 100%;margin: 0px 0px 0px 2%; float: left; } .columns-dean .two-third { width: 100%; margin: 0px 0px 0px 2%; float: left; } /*-----------------------------------------------------------------------------------*/ /* Comments /*-----------------------------------------------------------------------------------*/ #comments .commentlist .children { padding: 0px; position: relative; } #comments .comment .avatar { width:60px; height:60px; float:none;} #comments .comment .comment-body, #comments .comment .comment-meta { float: none; width: 100%; padding:0px;} #comments .commentlist .children .depth-2 .comment-body, #comments .commentlist .children .depth-2 .comment-meta, #comments .commentlist .children .depth-3 .comment-body, #comments .commentlist .children .depth-3 .comment-meta, #comments .commentlist .children .depth-4 .comment-body, #comments .commentlist .children .depth-4 .comment-meta, #comments .commentlist .children .depth-5 .comment-body, #comments .commentlist .children .depth-5 .comment-meta { width: 100%; padding:0px; } #main-content .captcha-container label { display:block; } .tabs-container.master { width: 100%;} .tabs-nav.master { float: none; width: 100%; padding: 0px 0px 20px 0px;} .tabs-nav.master li {float: left;margin-right: 7px;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px){ /*-------------------------------------------------------------------------------------------------------*/ /* Layouts diffrence 320 /*-------------------------------------------------------------------------------------------------------*/ #container {width:280px; padding:5px;} .content {width:238px; padding:0px 20px; } #main-content { width:238px; padding:0px 0px 40px; background:url(images/sep-line-stars.png) no-repeat center bottom; text-align:left; } #sidebar { width:238px; padding:25px 0px; text-align:left;} /* Sidebar Rigth ------------------------------------------------------------------------------------*/ .content.right #sidebar { float:right; background:none; width:238px; padding:25px 0px; } .content.right #main-content { float:left; width:238px; margin-right:0px;} #sidebar .widget{ width:100%; text-align:left;} /*-------------------------------------------------------------------------------------------------------*/ /* Header /*-------------------------------------------------------------------------------------------------------*/ #header{width:290px; padding:12px 0px 10px; height:auto;} /* Logo ----------------------------------------------------------------------*/ #header #logo { width:194px; margin:0px auto 15px; } #header #header-top-left, #header #header-top-right { position:static; margin-bottom:0px; text-align:center; } #header #header-top-lang { position:static; margin-top: -10px; margin-bottom: -10px; text-align:center; } #header .main-menu.left{ position:static; margin:0px auto 10px; display:none;} #header .main-menu.right{ position:static; margin:0px auto 10px;} #header nav ul { text-align:center; display:none;} #header .main-menu { background-color:#fde69f; width: 98%; margin:0px auto; padding:5px; border:1px solid #191919; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;} #header .main-menu .responsive-nav { width:100%; display: block; margin:0px auto; border:1px solid #fde6a4; } /*-------------------------------------------------------------------------------------------------------*/ /* Home Page /*-------------------------------------------------------------------------------------------------------*/ /* Bottom Strip --------------------------------------------------------------------*/ .bottom-strip { width:290px;} .breadcrumb-inner { width:290px;} .bottom-strip p { font-size:11px; line-height:15px; padding:6px 0px;} .bottom-strip p a { padding:4px 6px 2px ; font-size:12px;} /* Home Teasers --------------------------------------------------------------------*/ ul.home-teasers { margin:0px 0px 25px 0px;} ul.home-teasers li {width:238px; margin:0px 0px 20px 0px; text-align:center; border-bottom:1px solid #fce2af; padding-bottom:20px;} ul.home-teasers li figure { padding: 5px 3px 5px 5px; margin:0px 0px 20px 1px; } ul.home-teasers li a img { width:221px; height:auto;} /* Blockquote --------------------------------------------------------------------*/ blockquote { background:url(images/quote-icon.png) #f9f9f9 no-repeat 10px 10px ; padding:60px 10px 15px 25px; text-align:left;} blockquote p { margin-bottom:10px; } blockquote p.author{ text-align:right; } blockquote span.text-highlight { color:#d2ae7e; display:block;} /*-------------------------------------------------------------------------------------------------------*/ /* Footer /*-------------------------------------------------------------------------------------------------------*/ #footer{ width:290px; padding:18px 0px 10px; } #footer ul li { margin:0px 12px 10px 0px; display:inline-block;} #footer nav ul { text-align:center; display:none;} #footer #footer-menu { background-color:#fde69f; width: 98%; margin:0px auto 25px; padding:5px; border:1px solid #191919; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;} #footer #footer-menu .responsive-nav { width:100%; display: block; margin:0px auto; border:1px solid #fde6a4; } .widget ul li { background:none;} /* Article --------------------------------------------------------------------*/ article ol, article ul{ text-align:left;} /*-------------------------------------------------------------------------------------------------------*/ /* Team Page /*-------------------------------------------------------------------------------------------------------*/ .team-page section img { width:224px; height:auto;} /*-------------------------------------------------------------------------------------------------------*/ /* Contact Us Page /*-------------------------------------------------------------------------------------------------------*/ #map_canvas, #map_canvas2, #map_canvas3 { width:223px; height: 223px; margin-left:1px;} .contact-form { width:236px; padding-left:2px;} .contact-form p.name, .contact-form p.email { margin-right:0px;} .contact-form p { float:none; width:100%;} .contact-form input[type="text"], .contact-form #message { width:220px;} #sidebar .contact-details ul li.p-book{ background:none;} #sidebar .contact-details ul li.list-mail-icon {background:none;} #sidebar .contact-details ul li.list-phone-icon {background:none;} .contact-form #contact-loader{ left:188px;} #reservation-form .contact-form #contact-loader{ left:210px;} /* Sidebar Social Nav --------------------------------------------------------------------*/ #sidebar .social ul { text-align:center;} #sidebar .social li { display:inline; float:none; vertical-align: top;} /*-------------------------------------------------------------------------------------------------------*/ /* News Page /*-------------------------------------------------------------------------------------------------------*/ .news article { text-align:left;} .news .date { float:none; margin:0px auto; } .news .post-head {width:100%;} .comment-count { float:none; margin:0px auto 15px; padding:0px; background:none;} .news article a.read-more-content {float:none; } /* Tabs Styles -----------------------------------------------------------------------------------*/ .tabs-nav li a { padding: 0 2px;} /*-----------------------------------------------------------------------------------*/ /* Columns Style /*-----------------------------------------------------------------------------------*/ .columns { margin: 0px 0px 0px -2%; overflow: hidden; } .columns .one-third { width: 100%;margin: 0px 0px 0px 2%; float: left; } .columns .two-third { width: 100%; margin: 0px 0px 0px 2%; float: left; } .columns .one-fourth { width: 100%; margin: 0px 0px 0px 2%; float: left; } .columns .three-fourth { width: 100%; margin: 0px 0px 0px 2%; float: left; } .columns .one-half { width: 100%; margin: 0px 0px 0px 2%; float: left; } .columns .single-col { width: 100%; margin: 0px 0px 0px 2%; } .columns-dean { margin: 0px 0px 0px -2%; overflow: hidden; } .columns-dean .one-third { width: 100%;margin: 0px 0px 0px 2%; float: left; } .columns-dean .two-third { width: 100%; margin: 0px 0px 0px 2%; float: left; } /*-----------------------------------------------------------------------------------*/ /* Comments /*-----------------------------------------------------------------------------------*/ #comments .commentlist .children { padding: 0px; position: relative; } #comments .comment .avatar { width:60px; height:60px; float:none;} #comments .comment .comment-body, #comments .comment .comment-meta { float: none; width: 100%; padding:0px;} #comments .commentlist .children .depth-2 .comment-body, #comments .commentlist .children .depth-2 .comment-meta, #comments .commentlist .children .depth-3 .comment-body, #comments .commentlist .children .depth-3 .comment-meta, #comments .commentlist .children .depth-4 .comment-body, #comments .commentlist .children .depth-4 .comment-meta, #comments .commentlist .children .depth-5 .comment-body, #comments .commentlist .children .depth-5 .comment-meta { width: 100%; padding:0px; } #main-content .captcha-container label { display:block; } .tabs-container.master { width: 100%;} .tabs-nav.master { float: none; width: 100%; padding: 0px 0px 20px 0px;} .tabs-nav.master li {float: left;margin-right: 7px;} } /* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #sidebar .social li {vertical-align: middle;} } /* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0){ #comments .comment .avatar { border:none;} } /* -------------------------------------------------------------- Responsive Tables by ZURB Foundation v2.1.4 http://foundation.zurb.com by ZURB -------------------------------------------------------------- */ @media only screen and (max-width: 767px) { table.responsive { margin-bottom: 0; } .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right:1px solid #fbdfaa; border-left: 1px solid #fbdfaa; } .pinned table { border-right: none; border-left: none; width: 100%; } .pinned table th, .pinned table td { white-space: nowrap; } .pinned td:last-child { border-bottom: 0; } div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right:1px solid #fbdfaa; } div.table-wrapper div.scrollable table { margin-left: 35%; } div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; } table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } }