/* Table of Content ================================================== #Reset & Basics #Basic Styles #Site Styles #Typography #Links #Lists #Images #Buttons #Forms #Misc */ /* Logo ================================================== */ #logo {color: #000; width: 100%;} #logo-cut {color: #000; width: 100%;} .logo_header {width: 100%; } /* Extras ================================================== */ .background-image { background-size:contain; background-repeat:no-repeat; } /* Video embed CSS*/ .video-window {display: block; position: relative;} .video-window .aspect-16-9 {padding-top: 56.34%; /* 16:9 aspect ratio */} .video-window .aspect-4-3 {padding-top: 75%; /* 4:3 aspect ratio */} .video-window iframe {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } @media print { p.breakhere {page-break-before: always} } .divider { width: 100%; height: 60px; } /* .panel_img {width:100%; height:auto; background-repeat:no-repeat; background-size:contain; } .panel_icon {width:20px; height:20px; background-color:#FFF; color: #000; padding: 0px; float: left; } img { width: 100%; max-width:100%; height: auto; } */ /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* #Reset & Basics ================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* #Basic Styles ================================================== */ body { background: #fff; font: .8em/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; font-weight: 400; /*"Helvetica Neue 55 Roman", Helvetica,*/ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; } /* #Typography ================================================== */ h1, h2, h3, h4, h5, h6 { color: #000; font-family:"futura-pt", Georgia, Arial, sans-serif; font-weight: 400; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { } h1 { font-size: 1.8em; line-height: 1.2em; margin-bottom: .4em; margin-top: 0em; } .villa_title { font-size: 2.8em; line-height: 1.2em; margin-bottom: .4em; margin-top: 0em; } h1.blog { text-align: center; } mark { background-color: #000; color: #FFF; padding: 2px 4px 2px 4px; font-family: "futura-pt",sans-serif; font-weight: 600; } p { margin: 0 0 10px 0; } p img { margin: 0; } em { font-style: italic; } strong { font-weight: bold; } small { font-size: 80%; } /* Blockquotes */ blockquote, blockquote p { font-family: "futura-pt", serif, georgia; font-size: 1.8em; line-height: 1.2em; /*text-indent: -.4ex; padding-left: 0px;*/ margin-bottom: 5px; } p.caption { line-height: 1.4em; text-indent: -1.2ex; } hr { border: solid #000; border-width: 3px 0 0; clear: both; margin: 0px 0 0px; height: 0; visibility: hidden; } .clear {clear: both;} .keyline {background-color: #000;} .highlight {background-color: #000; color: #FFF; } /* #Links ================================================== */ a, a:visited { color: #ff6666; outline: 0; text-decoration: none; } a:hover, a:focus { color: #ff6666; text-decoration: underline;} p a, p a:visited { line-height: inherit; text-decoration: none;} /* #Lists ================================================== */ ul, ol { margin-bottom: 20px; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 30px; font-size: .9em; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; } li { line-height: 1.4em; margin-bottom: .5em; } ul.large li { line-height: 2em; } li p { line-height: 2em; } /* #Images ================================================== */ img.scale-with-grid { max-width: 100%; height: auto; } /* #Layout ================================================== */ #top-panel { height: 330px; } #bottom-panel { height: 60px; } #page-height { height: 1370px; } #half-item { height: 40px; } #one-item { height: 80px; } #one-half-item { height: 120px; } #two-item { height: 160px; } #three-item { height: 240px; } #four-item { height: 320px; } #five-item { height: 400px; } #six-item { height: 480px; } #seven-item { height: 560px; } #eight-item { height: 640px; } #nine-item { height: 720px; } #ten-item { height: 800px; } #eleven-item { height: 880px; } #twelve-item { height: 960px; } #thirteen-item { height: 1040px; } #fourteen-item { height: 1120px; } #fifteen-item { height: 1200px; } #sixteen-item { height: 1280px; } #seventeen-item { height: 1360px; } #eighteen-item { height: 1440px; } #nineteen-item { height: 1520px; } #twenty-item { height: 1600px; } @media only screen and (min-width: 768px) and (max-width: 959px) { /* Blockquotes */ blockquote, blockquote p { font-family: "futura-pt", serif, georgia; font-size: 1.4em; line-height: 1.2em; text-indent: -.4ex; padding-left: 0px; margin-bottom: 5px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { hr { margin: 10px 0 10px; visibility: visible; } #top-panel { height: auto; margin-bottom: 20px; } #footer { height: auto; } #page-height { height: auto; margin-bottom: 20px; } #one-item { height: auto; margin-bottom: 20px; } #one.5-item { height: auto; margin-bottom: 20px; } #two-item { height: auto; margin-bottom: 20px; } #three-item { height: auto; margin-bottom: 20px; } #four-item { height: auto; margin-bottom: 20px; } #five-item { height: auto; margin-bottom: 20px; } #six-item { height: auto; margin-bottom: 20px; } #seven-item { height: auto; margin-bottom: 20px; } #eight-item { height: auto; margin-bottom: 20px; } #nine-item { height: auto; margin-bottom: 20px; } #ten-item { height: auto; margin-bottom: 20px; } #eleven-item { height: auto; margin-bottom: 20px; } #twelve-item { height: auto; margin-bottom: 20px; } #twelve-item { height: auto; margin-bottom: 20px; } #thirteen-item { height: auto; margin-bottom: 20px; } #fourteen-item { height: auto; margin-bottom: 20px; } #fifteen-item { height: auto; margin-bottom: 20px; } #sixteen-item { height: auto; margin-bottom: 20px; } #seventeen-item { height: auto; margin-bottom: 20px; } #eighteen-item { height: auto; margin-bottom: 20px; } #nineteen-item { height: auto; margin-bottom: 20px; } #twenty-item { height: auto; margin-bottom: 20px; } p { font-size: 1.2em; line-height:1.4em; } .villa_title { font-size: 3.2em; line-height: 1.2em; margin-bottom: .4em; margin-top: 0em; } } @media only screen and (max-width: 767px) { hr { margin: 10px 0 10px; visibility: visible; } #one-item { height: 320px; } #top-panel { height: auto; margin-bottom: 20px; } #footer { height: auto; } #page-height { height: auto; margin-bottom: 20px; } #one-item { height: auto; margin-bottom: 20px; } #one.5-item { height: auto; margin-bottom: 20px; } #two-item { height: auto; margin-bottom: 20px; } #three-item { height: auto; margin-bottom: 20px; } #four-item { height: auto; margin-bottom: 20px; } #five-item { height: auto; margin-bottom: 20px; } #six-item { height: auto; margin-bottom: 20px; } #seven-item { height: auto; margin-bottom: 20px; } #eight-item { height: auto; margin-bottom: 20px; } #nine-item { height: auto; margin-bottom: 20px; } #ten-item { height: auto; margin-bottom: 20px; } #eleven-item { height: auto; margin-bottom: 20px; } #twelve-item { height: auto; margin-bottom: 20px; } #twelve-item { height: auto; margin-bottom: 20px; } #thirteen-item { height: auto; margin-bottom: 20px; } #fourteen-item { height: auto; margin-bottom: 20px; } #fifteen-item { height: auto; margin-bottom: 20px; } #sixteen-item { height: auto; margin-bottom: 20px; } #seventeen-item { height: auto; margin-bottom: 20px; } #eighteen-item { height: auto; margin-bottom: 20px; } #nineteen-item { height: auto; margin-bottom: 20px; } #twenty-item { height: auto; margin-bottom: 20px; } p { font-size: 1.2em; line-height:1.4em; } .villa_title { font-size: 3.2em; line-height: 1.2em; margin-bottom: .4em; margin-top: 0em; } }