@import url("normalize.css"); body { background: #eaf2f5 url('../img/body-bg.png') top left repeat-x; font-family: 'Lusitana', serif; } img { max-width: 100%; } a { color:#033C66; &:hover { color:#5b1300; } } a:visited { color:#033C66; } .clearfix { clear: both; } .container { display:block; position: relative; width: 95%; max-width: 940px; min-width: 940px; margin: 0 auto; z-index: 999; .header { width: 100%; height: 144px; position: relative; a { color:#0068b3; text-shadow: 0 1px 0 #a9d8fa; text-decoration: none; &:hover { color:#5b1300; text-shadow: 0 1px 0 #d4d4d4; } // end hover } // end a .social-media-links { position: absolute; top: 10px; right: (305/940) * 100%; list-style: none; margin: 0; padding: 0; li { display: inline; } // end li } // end social-media-links .utility-nav { position: absolute; top: 13px; right: -((23/940) * 100%); list-style: none; margin: 0; padding: 0; width: 35%; li { display: block; float: right; text-transform: uppercase; font-size: 14px; padding: 0px ((55/960) * 100%); margin-right: (45/960) * 100%; border-left: 1px solid #0068b3; } // end li li:last-child { border-left: 0; padding-right: 0; padding-left: 0; margin-left: 0; } // end li:last-child } .reservations { position: absolute; width: (745/940) * 100%; bottom: 5px; right: (10/940) * 100%; color:#5b1300; text-shadow: 0 1px 0 #d4d4d4; font-size: 17px; text-transform: uppercase; text-align: right; .phone-number { font-size: 24px; font-family: Geneva, "Myriad Pro", Verdana, sans-serif; margin-right: 0; font-style: normal; } // end phone number .reserve-btn { display: none; float: right; width: 21.846154%; height: 47px; margin-top: -10px; background:url('../img/reservation-btns.png') top left no-repeat; text-indent: -9999px; &:hover { background-position: bottom left; } } // end reserve-btn } // end reservations } // end header .main-nav { width: 100%; height: 33px; ul { list-style: none; margin: 0; padding: 0; margin-left: (4/940) * 100%; text-align: center; li { display: block; float: left; font-size: 16px; padding-left: (18/960) * 100%; margin-right: (18/960) * 100%; padding-top: 7px; background: url('../img/nav-divider.png') top left no-repeat; a { color:#fff; text-decoration: none; text-transform: uppercase; padding-bottom: 6px; &:hover { color:#7ac142; background:url('../img/nav-select.png') bottom center no-repeat; } // end hover } // end a .selected { color:#7ac142; background:url('../img/nav-select.png') bottom center no-repeat; } } // end li li:first-child { background: none; } } // end ul } // end main-nav .content-wrapper { display: block; /* float: left; */ background: #fff; padding-bottom: 40px; -moz-box-shadow: 0 8px 6px -6px #000; -webkit-box-shadow: 0 8px 6px -6px #000; box-shadow: 0 8px 6px -6px #000; .featured-banner { /* margin-top: -21px; */ display: block; text-align: center; .main-image { display: block; float: left; width: 100%; height: 306px; background:url('../img/featured-banner.png') top left no-repeat; text-indent: -9999px; } // end main-image a { text-decoration: none; color:#0068B3; text-shadow: 0 1px 0 #d4d4d4; &:hover { color:#5b1300; text-shadow: 0 1px 0 #d4d4d4; text-decoration: underline; } } h1 { font-size: 34px; //text-transform: uppercase; clear: both; padding-top: 30px; color: #5b1300; text-shadow: 0 1px 0 #d4d4d4; margin-bottom: -15px; } // end h1 p { font-size: 24px; text-shadow: 0 1px 0 #d4d4d4; padding: 0 ((20/940) * 100%); } // end p } // end featured-banner .content-home { display: block; width: 100%; clear: both; .home-blogs { display: block; float:left; width: (270/940) * 100%; height: 333px; margin-left: (10/940) * 100%; background: url('../img/blog-background.png') top left repeat-x; text-align: center; margin-right: (1.4/270) * 100%; h2 { color:#fff; font-weight: normal; } ul { margin:0; padding: 0; background: #fff; list-style: none; min-height: 298px; margin: 0 7px; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; padding: 10px; li { text-align: left; padding-bottom: 14px; font-size: 14px; text-shadow: 0 1px 0 #d4d4d4; .date { font-weight: bold; display: block; } a { display: block; color: #0068b3; text-decoration: none; &:hover { color:#333; } // end hover } // end a } // end li } // end ul } // end home-blogs .home-banners { display: block; float: left; width: 205px; height: 390px; background: url('../img/seasons-bg.png') repeat-x; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; margin: 0 ((6.5/940) * 100%); text-align: center; .home-banners .desc { min-height:300px; } img { margin-top: 5px; } h3 { font-size: 24px; color:#5b1300; text-transform: uppercase; padding-bottom: 0; margin-bottom: 0; } p { font-size: 14px; padding: 0 ((12/205) * 100%); text-align: left; text-shadow: 0 1px 0 #d4d4d4; } p.learn-more-link { text-align: right; margin-top: -5px; margin-right: 5px; a { font-style: italic; font-weight: bold; color: #0068b3; &:hover { color:#5b1300; } } } p.learn-more-link-fall { text-align: right; margin-top: -5px; margin-right: 5px; padding-top: 35px; a { font-style: italic; font-weight: bold; color: #0068b3; &:hover { color:#5b1300; } } } } } // end content-home .left-side { display: block; float: left; background: url('../img/left-nav-bg.png') repeat-x; width: (238/940) * 100%; margin-left: (19/940) * 100%; margin-top: 30px; text-align: center; h2 { text-transform: uppercase; color:#fff; font-weight: normal; font-size: 18px; padding-bottom: 10px; margin-bottom: 0; } // end h2 .sub-menu { display: block; width: (225/238) * 100%; height: 432px; border: 1px solid #ccc; background: #fff; list-style: none; margin: 0; padding: 0; padding-top: 20px; margin: 0 auto; text-align: left; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; li { padding-left: (30/225) * 100%; padding-bottom: 10px; a { text-decoration: none; color: #033c66; &:hover { color:#076cb5; } // end hover } // end a ul { list-style: none; padding: 0; margin: 0; margin-top: 10px; li { padding-left: (20/225) * 100%; } // end li } // end ul } // end li } // end sub-menu .sub-menu-blog { display: block; width: (225/238) * 100%; border: 1px solid #ccc; background: #fff; list-style: none; margin: 0; padding: 0; padding-top: 20px; margin: 0 auto; text-align: left; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; h3 { padding-top: 3px; margin-top: 0; padding-bottom: 3px; margin-bottom: 0; font-weight: normal; color:#5B1300; } .widget_search { margin-bottom: 20px; #s { width: (110/ 225) * 100%; font-size: 12px; /* height: 20px; */ /* padding: 3px; */ float: left; margin-right: (10/225) * 100%; } // end s #searchsubmit { width: (75/225) * 100%; height: 20px; padding: 3px; float: none; border: 0; font-size: 12px; } // end searchsubmit }// end widget_search .widgetcontainer { ul { margin-top: 0; } } li { padding-left: (0/225) * 100%; padding-bottom: 3px; a { text-decoration: none; color: #033c66; &:hover { color:#076cb5; } // end hover } // end a ul { list-style: none; padding: 0; margin: 0; margin-top: 10px; li { padding-left: (20/225) * 100%; } // end li } // end ul } // end li } // end sub-menu-blog } // end left side .content-sub { position: relative; display: block; float: left; width: (640/940) * 100%; margin-left: (25/940) * 100%; margin-top: 30px; margin-right: (15/940) * 100%; color: #333; font-size: 16px; h1 { color: #5b1300; font-size: 30px; font-weight: normal; //text-transform: uppercase; padding-top: 27px; } // end h1 img { float: right; background: #fff; padding: 7px; margin: 0 20px 20px; border: 1px solid #ccc; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; } // end img p { font-size: 16px; } // end p hr { height: 1px; border: 0; width: 90%; color: #e7e7e7; background-color: #e7e7e7; } // end hr .space-top { margin-top: 25px; } //end space-top .space-bottom { margin-bottom: 25px; } //end space-bottom /*.cottage-image-thumbs ul { margin-left: -((15/640) *100%); } // end cottage-image-thumbs ul */ .cottage-image-thumbs li{ width: (640/640) 100%; display: inline-block; padding-right: 20px; } // end cottage-image-thumbs li .column-list ul{ width: 100%; } .column-list li{ display: inline-block; width: (260/640) *100%; font-size: 16px; margin-right: 20px; padding-bottom: 5px; } .no-bullets-list ul{ width: 100%; } .no-bullets-list li{ list-style: none; font-size: 16px; margin-right: 20px; line-height: 24px; } .directions ul{ width: 100%; } .directions li{ font-size: 16px; margin-top: 5px; list-style: none; } .documents-listings { margin-top: 20px; //border-top: 1px solid #e7e7e7; h2 { font-size: 18px; color:#5b1300; font-weight: normal; } // end h2 ul { list-style: circle; li { font-size: 14px; text-transform: lowercase; a { font-size: 16px; text-transform: none; } } } } // end documents listings } // end content-sub .content-sub-no-side-nav { position: relative; display: block; float: left; width: (900/940) * 100%; margin-left: (25/940) * 100%; margin-top: 30px; margin-right: (15/940) * 100%; color: #333; font-size: 16px; h1 { color: #5b1300; font-size: 30px; font-weight: normal; //text-transform: uppercase; padding-top: 27px; } // end h1 img { float: right; background: #fff; padding: 7px; margin: 0 20px 20px; border: 1px solid #ccc; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; } // end img p { font-size: 16px; } // end p hr { height: 1px; border: 0; width: 90%; color: #e7e7e7; background-color: #e7e7e7; } // end hr .space-top { margin-top: 25px; } //end space-top .space-bottom { margin-bottom: 25px; } //end space-bottom /*.cottage-image-thumbs ul { margin-left: -((15/640) *100%); } // end cottage-image-thumbs ul */ .cottage-image-thumbs li{ width: (640/640) 100%; display: inline-block; padding-right: 20px; } // end cottage-image-thumbs li .column-list ul{ width: 100%; } .column-list li{ display: inline-block; width: (260/640) *100%; font-size: 16px; margin-right: 20px; padding-bottom: 5px; } .no-bullets-list ul{ width: 100%; } .no-bullets-list li{ list-style: none; font-size: 16px; margin-right: 20px; line-height: 24px; } .directions ul{ width: 100%; } .directions li{ font-size: 16px; margin-top: 5px; list-style: none; } .documents-listings { margin-top: 20px; //border-top: 1px solid #e7e7e7; h2 { font-size: 18px; color:#5b1300; font-weight: normal; } // end h2 ul { list-style: circle; li { font-size: 14px; text-transform: lowercase; a { font-size: 16px; text-transform: none; } } } } // end documents listings } // end content-sub-no-side-nav ul.documents-and-resources { padding-left: 0; } .documents-and-resources li { list-style-type: none; list-style-position: outside; margin-left: 20px; margin-bottom: 10px; padding: 3px 0 3px 30px; } .documents-and-resources li a { color: #992d52; } .documents-and-resources li.doc, .documents-and-resources li.docx { background: 0 0 no-repeat url('../img/icons/doc.png'); } .documents-and-resources li.pdf { background: 0 50% no-repeat url('../img/icons/pdf.png'); } .documents-and-resources li.link { background: 0 50% no-repeat url('../img/icons/link.png'); } .google-map { float: right; margin-left: 20px; } } // end content wrapper .footer-container { clear: both; display: block; width: 100%; margin-top: 30px; margin-bottom: 10px; background: #0068b3; .quick-links { position: relative; left: (22/940) * 100%; float: left; color: #fff; font-family: 'Lusitana', serif; h2 { font-weight: normal; margin:0; padding: 0; padding-bottom: 10px; // text-shadow: 0 1px 0 #333; } // end h2 ul { list-style: none; margin: 0; padding: 0; float: left; margin-right: 22px; li { display: block; text-transform: uppercase; font-size: 12px; margin-bottom: 5px; //text-shadow: 0 1px 0 #333; a { color: #fff; text-decoration: none; &:hover { color:#ccc; } // end hover } // end a } // end li } // end ul } // end quick-links .social-media-footer { position: relative; margin-right: 2.75%; float: right; color: #fff; font-family: 'Lusitana', serif; h2 { font-weight: normal; margin:0; padding: 0; padding-bottom: 10px; //text-shadow: 0 1px 0 #333; } // end h2 ul { list-style: none; margin: 0; padding: 0; float: left; width: 115%; margin-top: -3px; li { display: block; float: left; text-transform: uppercase; font-size: 12px; padding-right: 4.38% !important; margin-bottom: 5px; //text-shadow: 0 1px 0 #333; text-align: center; a { color: #fff; text-decoration: none; &:hover { color:#ccc; } // end hover } // end a } // end li li:last-child { //padding-right: 0; } } // end ul } // end social-media-footer } // end footer-container } // end container .footer { position: relative; display: block; background:#0068b3; width: 100%; height:190px; border: 1px solid #2e83c0; border-right: 0; border-left: 0; margin-top: -190px; z-index: -10; } .footer-copy { clear: both; color:#5B1300; font-size: 14px; text-align: center; } @media screen and (max-width: 480px) { body { background: #fff; } .container { min-width: 100px; display: block; width: 95.5%; .header { text-align: center; width: 100%; height: auto; background: #fff; .social-media-links { display: none; } // end social-media-links .utility-nav { display: none; } // end utility-nav .reservations { display: block; position: relative; margin: 0 auto; font-size: 15px; text-align: center; .phone-number { display: block; clear:left; margin: 0; } // end phone .reserve-btn { display: none; } // end reserve btn } // end reservations } // end header .main-nav { height:330px; padding-top: 14px; ul { margin:0; padding: 0; width: 100%; display: block; li { display: block; float: none; background: none; margin: 0; padding: 0; clear: both; margin-bottom: 5px; a { display: block; width: 100%; padding: 10px 0 5px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); background: linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); } a.selected { display: block; width: 100%; padding: 10px 0 5px 0; color:#333; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); } } // end li } // end ul } // end main-nav .content-wrapper { .featured-banner { h1 { font-size: 24px; text-shadow: 0 2px 0 #d4d4d4; text-transform: none; margin-bottom: 5px; } img { display: none; } p { font-size: 16px; } .main-image { display: block; float: left; width: 100%; height: 286px; background:url('../img/featured-banner-sm.png') top center no-repeat; text-indent: -9999px; } // end main-image a { text-decoration: underline; } } .content-container { .content-home { .home-blogs { display: none; } // end home-blogs .home-banners { width: 100%; margin-bottom: 25px; img { margin-top: 20px; } // end img } // end home-banners } // end content-home .left-side { width: 100%; margin-left: 0; margin-top: -20px; background: none; h2 { color:#f2f2f2; padding-top: 10px; background:#2780c0; margin-bottom: 10px; display: none; } .sub-menu { margin:0; padding: 0; width: 100%; display: block; height: inherit; background: #fff; border:0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; li { display: block; float: none; background: none; margin: 0; padding: 0; clear: both; margin-bottom: 5px; a { display: block; width: 100%; padding: 10px 0 5px 0; text-align: center; border:1px solid #ddd; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color:#444; text-transform: uppercase; font-weight: bold; background: #f2f6f8; background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9)); background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); background: linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); } } } } .content-sub { clear: both; width: 95%; h1 { text-align: center; } img { text-align: center; float: none; margin: 0; } ul { padding-left: 0; } .column-list li { display: block; } .cottage-image-thumbs ul { margin-left: -((15/640) *100%); } // end cottage-image-thumbs ul } .google-map { display: none; } } // end content-container } // content .footer-container { .quick-links { position: relative; /* left: (2/940) * 100%; */ width: 100%; color: #fff; font-family: 'Lusitana', serif; text-align: center; margin-bottom: 30px; h2 { font-weight: normal; margin:0; padding: 0; padding-bottom: 10px; text-shadow: 0 1px 0 #333; } // end h2 ul { list-style: none; margin: 0; padding: 0; margin-right: 0; clear: left; text-align: left; /* float: left; */ padding: 5px; margin: 0 auto; width: 93.5%; text-align: center; li { display: block; text-transform: uppercase; font-size: 14px; margin-bottom: 5px; display: block; text-shadow: 0 1px 0 #333; a { color: #fff; text-decoration: none; &:hover { color:#ccc; } // end hover } // end a } // end li } // end ul } // end quick-links .social-media-footer { position: relative; clear: both; color: #fff; margin-left: -50px; text-align: left; font-family: 'Lusitana', serif; text-align: center; // left: 33.8%; h2 { font-weight: normal; margin:0; padding: 0; padding-bottom: 10px; text-shadow: 0 1px 0 #333; } // end h2 ul { list-style: none; margin: 0; padding: 0; float: left; margin-top: -3px; li { display: block; float: left; text-transform: uppercase; font-size: 12px; padding-right: (2/940) * 100%; margin-bottom: 5px; text-shadow: 0 1px 0 #333; text-align: center; padding: 5px; a { color: #fff; text-decoration: none; &:hover { color:#ccc; } // end hover } // end a } // end li li:last-child { // padding-right: 0; } } // end ul } // end social-media-footer } // end footer-container } // end container .footer { background: #fff; border: 0; } } // end media