/* Theme Name: highland View Resort Template Version: 1.0 */ /* FONT STYLES ---------------------------------------------------------------------------*/ @import url(http://fonts.googleapis.com/css?family=Dancing+Script:700); /* TAG STYLES ---------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } body { color: #000000; font-size: 0.9em; margin: 0; padding: 0; font-family: Arial, sans-serif; /*background: #edc69a url('images/bodyBg.jpg') 50% 0 no-repeat;*/ background: #edc69a url('images/bodyBg_revised.jpg') 50% 50% no-repeat; background-size: cover; background-attachment:fixed; } img { display: block; margin: 0; padding: 0; border: none; } ul { list-style: disc; } ul,ol { margin-bottom: 20px; margin-left: 30px; } ul li, ol li { color: #000000; line-height: 170%; } p { padding-bottom: 15px; line-height: 170%; } h1 { padding-bottom: 20px; font-family: 'Dancing Script', cursive; font-size: 2.5em; font-weight: normal; } h2 { padding-bottom: 15px; font-family: 'Dancing Script', cursive; font-size: 2.1em; font-weight: normal; line-height: 130%; } h3 { padding-bottom: 15px; } a { color: #5c1201; text-decoration: none; } a:hover { text-decoration: underline; } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; padding-bottom: 15px; } /* COMMON STYLES ---------------------------------------------------------------------------*/ #wrapper { position: relative; width: 960px; margin: 0 auto; padding-bottom: 30px; } .right { float: right; } .left { float: left; } .clear { clear: both; } .clearRight { clear: right; } .clearLeft { clear: left; } .aligncenter{ display: block; margin-left: auto; margin-right: auto; } img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; } .alignright { float: right; } .alignleft { float: left; } hr { margin-bottom: 20px; } /* HEADER STYLES ---------------------------------------------------------------------------*/ #header { margin-bottom: 20px; } #logo { float: left; height: 193px; width: 177px; margin-left: 50px; } #headerTagline { float: right; color: #0168b3; margin: 40px 0 35px 0; text-align: right; padding-right: 80px; font-size: 1.2em; font-weight: bold; } #mainNavWrapper { float: right; margin: 0 35px 0 0; } #mainNavWrapper ul { list-style: none; margin: 0; padding: 0; } #mainNavWrapper ul ul { display: none; } #mainNavWrapper li { float: left; margin-right: 15px; } #mainNavWrapper a { display: block; padding: 15px 7px 50px; color: #5c1201; font-size: 1.2em; font-weight: bold; } #mainNavWrapper li.current-page-ancestor a, #mainNavWrapper li.current-menu-item a, #mainNavWrapper a:hover { background: transparent url('images/navRollover.png') 0 0 repeat-x; text-decoration: none; display: block; padding: 15px 7px 50px; color: #5c1201; font-size: 1.2em; font-weight: bold; } /* CONTENT STYLES ---------------------------------------------------------------------------*/ #content { clear: both; margin: 0px auto; position: relative; } #contentWrapper { background: rgba(255, 255, 255, 0.85); padding: 30px 10px 15px; width: 840px; margin: 0 auto 0; position: relative; } .postsbody { } .post { float: left; width: 560px; padding: 0 0 15px 25px; } .post a { color: #82a3c3; } .likePost { float: left; width: 565px; } .descr { font-style: italic; clear: both; } .entry { clear: both; } .info { clear: both; font-style: italic; } .navigation { margin: 20px 0; float: left; width: 540px; } #slantedImageWrapper { background: rgba(255, 255, 255, 0.85); position: relative; min-height: 250px; width: 430px; padding: 25px 40px 15px; float: right; margin: 0 45px 25px 0;} #slantedImage { position: absolute; left: -370px; top: 0; width: 510px; background-color: #ffffff; padding: 12px; -moz-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); transform:rotate(-1.5deg); -ms-transform:rotate(-1.5deg); -webkit-transform:rotate(-1.5deg); } #slantedImage img { max-width: 100%; } #slantedImageText { width: 280px; float: right; } #slantedImageText h2 {} #slantedImageText p {} #breadcrumb { font-size: 1.2em; background: rgba(255, 255, 255, 0.85); padding: 10px; width: 840px; margin: 0 auto; font-weight: bold; } #breadcrumb p { margin: 0; padding: 0;} #breadcrumb p span { color: #000000; } #largeDisplayImage { height: 320px; width: 860px; background-color: #ffffff; -moz-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); padding: 12px; margin: 0 0 0 39px; position: relative; z-index: 100; } .homepageBlock { float: left; /*width: 275px;*/ width: 265px; margin-right: 20px; margin-bottom: 20px; padding-top: 25px; } .homepageBlock iframe { background-color: #ffffff; } .homepageBlock h2 { border-bottom: 1px solid #82a3c3; padding-bottom: 5px; margin-bottom: 15px; } .homepageBlock .more-link { display: block; padding-top: 10px; } .homepageBlock ul { list-style: none; margin-left: 0; } .homepageBlock .post-title { font-weight: bold; font-size: 1.4em; } .homepageBlock .post-date { font-style: italic; padding-top: 10px; } .homepageBlock.rightBlock { margin-right: 0; background-color: #ffffff; padding: 15px; width: 235px; margin-top: 25px; } .homepageBlock.rightBlock h2 { font-size: 20px; } table { margin-bottom: 20px; } table img { display: inline; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 8px; padding-left: 8px; margin-top: 10px; margin-bottom: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { line-height: 17px; padding: 5px 4px 5px; margin: 0; } .gallery { padding-bottom: 20px; } .gallery-item { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; margin-right: 10px; padding: 8px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .gallery-item img { display: inline; margin: 0; padding: 0; border: 0 none; } .gallery-icon { width: 154px; } #gallery-1 .gallery-item { width: 154px !important; } .lowerBorder { border-bottom: 1px solid #82a3c3; padding-bottom: 30px; margin-bottom: 30px; } #resortMapToggle { background: rgba(255, 255, 255, 0.85); padding: 10px 35px 0px; width: 790px; margin: 0 auto; font-weight: bold; } #resortMapToggle #displayResortMap { display: none; padding-bottom: 20px; } #featuredDisplayResortMap {margin: 0 auto; width: 100%; max-width: 860px; background: rgba(255, 255, 255, 0.85); } #featuredDisplayResortMap #resortMap { width: 100%; max-width: 795px; margin: 0 auto; } #featuredDisplayResortMap #resortMap img { max-width: 100%; } .wpcf7-form label { width: 100%; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"] { padding: 3px 10px; width: calc(100% - 25px); } .wpcf7-form textarea { padding: 3px 10px; width: calc(100% - 25px); } /* SIDEBAR STYLES ---------------------------------------------------------------------------*/ #sidebar { position: relative; float: right; width: 210px; padding: 25px 15px 275px 0; } #pageSubNavWrapper {} #pageSubNavWrapper ul { list-style: none; margin: 0 0 50px 0; padding: 0; } #pageSubNavWrapper li { padding-bottom: 15px; text-align: right; } #pageSubNavWrapper a { font-size: 1.2em; font-weight: bold; } #pageSubNavWrapper li.current-page-ancestor a, #pageSubNavWrapper li.current_page_item a, #pageSubNavWrapper a:hover { color: #82a3c3; text-decoration: none; font-size: 1.2em; font-weight: bold; } #sidebar h2 { border-bottom: 1px solid #82a3c3; padding-bottom: 5px; margin-bottom: 15px; } /* FOOTER STYLES ---------------------------------------------------------------------------*/ #footer { clear: both; position: relative; background-color: #82a3c3; padding: 20px 25px; color: #ffffff; width: 740px; font-size: 0.8em; } #footerImagesWrapper { position: absolute; right: 215px; top: -230px; } #footerImageBottom { position: absolute; top: 0; left: 0; height: 225px; width: 165px; z-index: 5; background-color: #ffffff; padding: 12px; -moz-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); transform:rotate(8deg); -ms-transform:rotate(8deg); -webkit-transform:rotate(8deg); } #footerImageTop { position: absolute; top: 170px; left: 60px; height: 115px; width: 160px; z-index: 10; background-color: #ffffff; padding: 12px; -moz-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.2); transform:rotate(15deg); -ms-transform:rotate(15deg); -webkit-transform:rotate(15deg); } #socialMediaWrapper { float: left; margin: 3px 40px 0 0; } #socialMediaWrapper ul { list-style: none; margin: 0; padding: 0; } #socialMediaWrapper li { float: left; margin-right: 5px; } #socialMediaWrapper a { } #socialMediaWrapper a:hover {} #footerRight { float: left; } #footerNavWrapper { margin: 0 0 5px 0; width: 500px; } #footerNavWrapper ul { list-style: none; margin: 0; padding: 0; } #footerNavWrapper li { display: inline; padding-right: 30px; } #footerNavWrapper a { color: #ffffff; text-transform: uppercase; } #footerNavWrapper a:hover {} #footerContentWrapper { clear: both; } #footerContentWrapper p { padding: 0; margin: 0; } #sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:15px;background:#f8f8f8;color:#333;-webkit-box-shadow:inset 0 0 5px 5px #ebebeb;-moz-box-shadow:inset 0 0 5px 5px #ebebeb;box-shadow:inset 0 0 5px 5px #ebebeb}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#333;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));background-image:-webkit-linear-gradient(#ffffff,#dfdfdf);background-image:-moz-linear-gradient(#ffffff,#dfdfdf);background-image:-o-linear-gradient(#ffffff,#dfdfdf);background-image:linear-gradient(#ffffff,#dfdfdf);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(51,51,51,0.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #dfdfdf;border-bottom:1px solid #fff}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #fff;border-bottom:1px solid #dfdfdf}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;line-height:49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #ebebeb;-moz-box-shadow:inset 0 0 15px 3px #ebebeb;box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#333}.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #ebebeb;-moz-box-shadow:inset 0 0 15px 3px #ebebeb;box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(51,51,51,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(51,51,51,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#f8f8f8;background:#333}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(51,51,51,0.9)} .mobilenav_menu { float: right; display: none; text-decoration:none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #5c1201; padding: 7px 13px; color: #ffffff; margin-right: 2.5%; font-weight: bold; } .mobilenav_menu a{ text-decoration:none; color: #ffffff; } .mobilenav_menu a:hover{ text-decoration:underline; } /* RESPONSIVE STYLES ---------------------------------------------------------------------------*/ @media screen and (max-width: 980px) { #wrapper { width: 100%; } #contentWrapper { width: 100%; } #slantedImageWrapper { width: 95%; background-color: transparent; float: none; padding: 0; margin: 0 auto; max-width: 95%; } #slantedImage { position: relative; left: 0; top: 0; transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); margin: 0 auto; max-width: 95%; } #slantedImageText { width: 90%; padding: 20px; float: none; margin: 30px auto; background-color: rgba(255, 255, 255, 0.85); } #largeDisplayImage { max-width: 90%; height: auto; margin: 0 auto; } #largeDisplayImage img { max-width: 100%; } #contentWrapper { margin-top: 20px; padding-top: 15px; max-width: 95%; } } @media screen and (max-width: 950px) { #resortMapToggle { display: none; } } @media screen and (max-width: 940px) { #breadcrumb { display: none; } } @media screen and (max-width: 940px) { #footer { width: 90% !important; margin: 0 auto; padding: 20px 15px; } #footerImagesWrapper { display: none; } #footerNavWrapper { width: auto; } .homepageBlock { width: 45%; } iframe { width: 100% !important; } .post { float: none; padding: 0; width: auto; } .likePost { clear: both; float: none; padding: 0; margin: 0; width: auto; } #sidebar { clear: both; float: none; margin: 20px; padding: 0; width: 90%; } } @media screen and (max-width: 860px) { #googleMap { display: none; } } @media screen and (max-width: 830px) { .post { max-width: 100% !important; } .fpost img, .post img { max-width: 90%; height: auto; } map { display: none; } } @media screen and (max-width: 775px) { #socialMediaWrapper { float: none; display: inline-block; width: 200px; padding: 0; } #footerRight { clear: both; float: none; margin: 10px 0 0; } } @media screen and (max-width: 765px) { #mainNavWrapper { display: none; } .mobilenav_menu { display: inline; } } @media screen and (max-width: 750px) { #logo { float: none; margin: 0 auto; } #headerTagline { float: none; margin: 20px 0; width: 100%; text-align: center; padding: 0;} } @media screen and (max-width: 630px) { .fpost img, .post img { max-width: 90%; height: auto; } } @media screen and (max-width: 620px) { .homepageBlock { clear: both; float: none; width: 90%; margin: 0 auto; } .navigation { max-width: 90%; width: 90%; } } @media screen and (max-width: 595px) { .gallery-icon { max-width: 100%; height: auto !important; } .gallery-icon img { max-width: 100%; height: auto !important; } #gallery-1 .gallery-item { max-width: 26% !important; height: auto !important; } } @media screen and (max-width: 520px) { table td { max-width: 30%; } table td img { max-width: 100%; height: auto; } } @media screen and (max-width: 430px) { #gallery-1 .gallery-item { max-width: 24% !important; } } @media screen and (max-width: 415px) { #contentWrapper { width: 92%; } }