@type-body: Cambria, Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; @type-heading: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; @type-secondary: 'Helvetica Neue', Helvetica, Arial, sans-serif; @link-color: #629215; @content-background: #fff; .width { display: inline-block; width: 100%; padding: 1em 5%; } .width-lg { width: 90%; padding: 2em; margin: 0 5%; } .rounded (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .rounded-top (@radius) { -moz-border-radius-topright: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-radius: @radius @radius 0px 0px; border-radius: @radius @radius 0px 0px; } .rounded-bottom (@radius) { -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: @radius; -moz-border-radius-bottomleft: @radius; -webkit-border-radius: 0px 0px @radius @radius; border-radius: 0px 0px @radius @radius; } .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .transition(@property: all, @time: .25s, @function: ease) { -webkit-transition: @arguments; -moz-transition: @arguments; -o-transition: @arguments; transition: @arguments; } .gradient(@color1: #fff, @color2: #eee) { background: @color1; background: -moz-linear-gradient(top, @color1 0%, @color2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2)); background: -webkit-linear-gradient(top, @color1 0%,@color2 100%); background: -o-linear-gradient(top, @color1 0%,@color2 100%); background: -ms-linear-gradient(top, @color1 0%,@color2 100%); background: linear-gradient(top, @color1 0%,@color2 100%); filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=0 )"; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 18px; line-height: 1.5; } body, button, input, select, textarea { font-family: @type-body; color: #444; } h1, h2, h3, h4, h5, h6 { color: #222; font-family: @type-heading; font-weight: normal; } p { font-size: 1em; line-height: 1.5em; margin: 0 0 1.5em 0; } h1 { font-size: 1.7778em; line-height: 1.4em; margin-top: 0.8438em; margin-bottom: 1em; } h2 { font-size: 1.6111em; line-height: 1.4em; margin-top: 0.931em; margin-bottom: 0em; } h3 { font-size: 1.4444em; line-height: 1.0385em; margin-top: 1.0385em; margin-bottom: 0em; } h4 { font-size: 1.2778em; line-height: 1.1739em; margin-top: 1.1739em; margin-bottom: 0em; } h5 { font-size: 1.1111em; line-height: 1.35em; margin-top: 1.35em; margin-bottom: 0em; } h6 { font-size: 1em; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 0em; } ::-moz-selection { background: @link-color; color: #fff; text-shadow: none; } ::selection { background: @link-color; color: #fff; text-shadow: none; } a { color: @link-color; position: relative; .transition(color); } a:hover { color: #444; outline: 0; } a:focus { outline: thin dotted; } a:active { top: 1px; outline: 0; color: darken(@link-color, 10%); } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 2em; font-style: italic; } blockquote cite { font-style: normal; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 2em; } dd { margin: 0 0 0 2em; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; *overflow: visible; } table button, table input { *overflow: auto; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input { max-width: 100%; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; border-width: 2px; border-color: #ddd; border-style: solid none; margin-bottom: 1.4em; width: 100%; font-family: @type-secondary; font-size: .8888888889em; } th { font-weight: bold; text-align: left; font-family: @type-body; font-size: 1.125em; } th, td, caption { padding: .25em 1em .25em .5em; } thead { background: #e8e8e8; border-bottom: 2px #ddd solid; } tbody tr:nth-child(even) { background: #f0f0f0; } tfoot { font-style: italic; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /*///////////////////////////////////////////////////////////////////////////////////////////////// // // Forms // /////////////////////////////////////////////////////////////////////////////////////////////////*/ input, textarea, select { border: 1px #ccc solid; max-width: 100%; padding: .125em .25em; font-size: 1em; box-shadow: 0 .125em .125em #eee inset; -moz-box-shadow: 0 .125em .125em #eee inset; -webkit-box-shadow: 0 .125em .125em #eee inset; .rounded(.125em); display: block; font-family: Consolas, "Courier New", mono; } select { padding-right: 0; } input:hover, textarea:hover, select:hover { border-color: #999; } input[type='hidden'] { display: none; } .button-primary, button, input[type="button"], input[type="submit"], #menu a { display: inline-block; font-family: @type-secondary; float: left; clear: both; padding: .25em 1em; color: #fdfefc; text-shadow: 0 -1px 1px darken(@link-color, 10%); text-align: center; .box-shadow(0, 1px, .125em, #ccc); margin-bottom: .5em; border: 1px #999 solid; position: relative; text-decoration: none; .rounded(2px); .transition(all, .1s, ease); .transition(position, 0, linear); background: darken(@link-color, 3%); background: -moz-linear-gradient(top, darken(@link-color, 3%) 0%, lighten(@link-color, 3%) 48%, darken(@link-color, 3%) 53%, lighten(@link-color, 3%) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,darken(@link-color, 3%)), color-stop(48%,lighten(@link-color, 3%)), color-stop(53%,darken(@link-color, 3%)), color-stop(100%,lighten(@link-color, 3%))); background: -webkit-linear-gradient(top, darken(@link-color, 3%) 0%,lighten(@link-color, 3%) 48%,darken(@link-color, 3%) 53%,lighten(@link-color, 3%) 100%); background: -o-linear-gradient(top, darken(@link-color, 3%) 0%,lighten(@link-color, 3%) 48%,darken(@link-color, 3%) 53%,lighten(@link-color, 3%) 100%); background: -ms-linear-gradient(top, darken(@link-color, 3%) 0%,lighten(@link-color, 3%) 48%,darken(@link-color, 3%) 53%,lighten(@link-color, 3%) 100%); background: linear-gradient(top, darken(@link-color, 3%) 0%,lighten(@link-color, 3%) 48%,darken(@link-color, 3%) 53%,lighten(@link-color, 3%) 100%); filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#92bf2b', endColorstr='#a4d339',GradientType=0 )"; } .button-primary:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, #menu a:hover { border-color: #888; color: #fff; text-shadow: 0 -1px 2px darken(@link-color, 2%); } .button-primary:active, button:active, input[type="button"]:active, input[type="submit"]:active, #menu a:active { top: 1px; .box-shadow(0, 0, .125em, #ccc); } .button-secondary { display: inline-block; border: 1px #ddd solid; .rounded(3px); .gradient(#fff, #eee); text-decoration: none; text-align: center; padding: .25em 1em; font-family: @type-secondary; font-size: .8em; } .button-secondary:hover { border-color: #ccc; } /*///////////////////////////////////////////////////////////////////////////////////////////////// // // WordPress // /////////////////////////////////////////////////////////////////////////////////////////////////*/ .container img { border: 1px #ccc solid; padding: 1px; width: 100%; max-width: 100%; margin: 1em 0; } .container img.wp-smiley { border: 0; padding: 0; width: auto; } .gallery { margin: 0 auto 1em; overflow: hidden; width: 100%; } .gallery .gallery-item { float: left; margin: 0; padding-right: 1em; } .gallery img { width: auto; } .gallery .gallery-caption { margin-left: 0; font-size: .8em; font-style: italic; } .gallery br { clear: both } /*///////////////////////////////////////////////////////////////////////////////////////////////// // // Our Styles // /////////////////////////////////////////////////////////////////////////////////////////////////*/ body { display: inline-block; width: 100%; } body > header { .width; background: #f8f8f8; border-bottom: 1px #ddd solid; text-align: center; } body > header h1 { margin: 0; } #site-logo { display: inline-block; width: 100%; margin-bottom: 1em; } .home #site-logo { margin-bottom: .5em; } #site-logo img { max-width: 100%; } .tagline { display: none; } .container { .width; } article { margin-bottom: 2em; } article footer { font-family: @type-secondary; font-size: .8em; display: inline-block; } article footer > div { display: inline-block; width: 100%; } article footer span:after, article footer ul:after { content: '|'; padding: 0 .25em 0 .5em; color: #777; } article footer span:last-of-type:after, article footer ul:last-of-type:after { display: none; } article footer ul { list-style-type: none; padding: 0; width: auto; float: left; display: inline-block; margin-bottom: 0; } .post-tags:before { content: 'Tags: '; float: left; padding-right: .35em; } .post-categories:before { content: 'Categories: '; float: left; padding-right: .35em; } article footer li { float: left; } article footer li:after { content: ','; padding-right: .35em; } article footer li:last-child:after { display: none; } .post-pagination { margin: 1em 0; font-size: 1.25em; display: inline-block; font-family: @type-body; } .post-pagination:before { content: 'Pages:'; font-size: .8em; font-family: @type-secondary; } .post-pagination a { background: #f8f8f8; border: 1px #ddd solid; text-decoration: none; display: inline-block; padding: 0 .25em; } .post-pagination a:hover { border-color: #ccc; } .sidebar { display: none; } header h1, header h2 { text-align: center; } .posts-nav { display: inline-block; font-family: @type-secondary; font-size: .8em; width: 100%; border-width: 1px; border-color: #eee; border-style: solid none; padding: .5em 0; margin: .5em 0; } .posts-older { display: inline-block; width: 50%; float: left; } .posts-newer { display: inline-block; width: 50%; float: right; text-align: right; } .comments-list { list-style-type: none; padding: 0; } .comments-list .children { list-style-type: none; margin: 0 0 0 2em; } .comment, .trackback { margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px #eee solid; } .comment.bypostauthor { background: #f8f8f8; padding: 1em; } .comment article, .trackback article { margin-bottom: 0; } .comment header, .trackback header { display: inline-block; width: 100%; } .container img.avatar { width: auto; float: left; margin: 0 .5em 0 0; } .comment-author { display: inline-block; width: 75%; float: left; } .comment-datetime { display: inline-block; width: 75%; float: left; font-family: @type-secondary; font-size: .8em; } .comment-content { margin: 1em 0; } .comment-content p:last-child { margin-bottom: 0; } #respond input, #respond textarea { display: block; } .required { color: #ca0000; } .form-allowed-tags { display: none; } #reply-title small { font-size: .6em; display: block; font-style: italic; font-family: @type-body; } .phone { background: #eee; padding: .5em 5%; width: 100%; display: inline-block; border-bottom: 1px #ddd solid; font-family: @type-heading; font-weight: bold; font-size: 1.25em; line-height: 1em; text-align: center; text-shadow: 0 1px 1px #fff, 0 -1px 1px #ccc; } .phone:before, .phone:after { font-family: @type-body; font-style: italic; font-size: .8em; font-weight: normal; color: #777; } .phone:before { content: 'Call our hotline any time at '; display: block; padding-bottom: .5em; } #menu { background: #f8f8f8; border: 1px #ddd solid; padding: 1em; width: 90%; margin: 0 5% 1em; display: inline-block; } #menu ul { list-style-type: none; padding: 0; margin: 0; float: left; display: inline-block; } #menu li { display: inline-block; width: 100%; float: left; margin-bottom: .5em; } #menu li a { width: 100%; margin-bottom: 0; } #menu li:last-child { margin-bottom: 0; } #menu .sub-menu { display: none; } body > footer { display: none;} footer .gform_wrapper { display: none !important; } .bottom { display: inline-block; width: 90%; margin: 0 5% 1em; font-family: @type-secondary; font-size: .8em; } .copyright, .attribution { display: inline-block; width: 100%; } .attribution a { font-family: @type-body; color: #fff; text-shadow: 0 1px 1px #000; font-style: italic; text-transform: lowercase; text-decoration: none; font-size: 1.125em; } @media only screen and (min-width: 480px) { .alignleft, img.alignleft { float: left; margin: 1em 1em 1em 0; } .alignright, img.alignright { float: right; margin: 1em 0 1em 1em; } .aligncenter, img.aligncenter { display: block; margin: 1em auto; } .alignnone, img.alignnone { margin: 1em 1em 1em 0; } .gallery .gallery-item { margin: 1em 0 0; } .col-2 { width: 50% } .col-3 { width: 33.333% } .col-4 { width: 25% } .col-5 { width: 20% } .col-6 { width: 16.666% } .col-7 { width: 14.285% } .col-8 { width: 12.5% } .col-9 { width: 11.111% } body > header { position: relative; float: left; } .home #site-logo { width: 100%; margin: 0; } #site-logo img { height: 1.5em; } #to-menu { font-size: .6em; position: absolute; top: 9em; right: 5%; margin: 0; } .container header h1, .container header h2 { text-align: left; } .container img { width: auto; } .phone { text-align: left; } .phone:before { display: inline; padding-right: .15em; } .phone:after { content: '.'; padding-left: .15em; } #menu { width: 45%; float: left; } body > footer { display: inline-block; width: 45%; float: right; } .social { margin: 0; list-style-type: none; padding: 0; } .social li { margin-bottom: .5em; } .social a { font-family: @type-secondary; font-weight: bold; font-size: .8em; width: 100%; opacity: .8; .transition(opacity, .1s, ease); } .social a:hover { opacity: 1; } .social a[href*="facebook"], .social a[href*="flickr"], .social a[href*="google"], .social a[href*="linkedin"], .social a[href*="tumblr"], .social a[href*="twitter"], .social a[href*="vimeo"], .social a[href*="wordpress"], .social a[href*="youtube"] { padding-left: 40px; height: 32px; line-height: 32px; display: inline-block; background-position: left center; background-repeat: no-repeat; } .social a[href*="facebook"] { background-image: url('images/social/facebook_32.png'); } .social a[href*="flickr"] { background-image: url('images/social/flickr_32.png'); } .social a[href*="google"] { background-image: url('images/social/google_32.png'); } .social a[href*="linkedin"] { background-image: url('images/social/linkedin_32.png'); } .social a[href*="tumblr"] { background-image: url('images/social/tumblr_32.png'); } .social a[href*="twitter"] { background-image: url('images/social/twitter_32.png'); } .social a[href*="vimeo"] { background-image: url('images/social/vimeo_32.png'); } .social a[href*="wordpress"] { background-image: url('images/social/wordpress_32.png'); } .social a[href*="youtube"] { background-image: url('images/social/youtube_32.png'); } .bottom { width: 40%; float: right; margin: 1em 5% 0 0; border-top: 1px #eee solid; padding-top: 1em; } } @media only screen and (min-width: 768px) { body > header h1, #site-logo { width: 60%; } #site-logo img { height: auto; } #to-menu { display: none; } #menu { position: absolute; width: 30%; right: 0; top: 0; border-top: 0; border-color: #999; .box-shadow(0, 0, .125em, #999); } #menu a { font-size: .8em; } .container { width: 65%; margin-right: 35%; padding-right: 1em; } body > footer { width: 100%; border-width: 1px; border-color: #ddd; border-style: solid none; background: #f8f8f8; padding: 1em 5%; } body > footer > *:before { font-family: @type-heading; font-size: 1.5em; margin-bottom: 1em; display: inline-block; } body > footer .gform_wrapper { display: inline-block !important; width: 65%; padding-right: 2em; float: left; font-family: @type-secondary; overflow: visible !important; } body > footer .gform_wrapper:before { content: 'Get in Touch'; } .gform_fields { list-style-type: none; padding: 0; margin: 0; } .gfield { font-size: .9em; margin-bottom: 1em; } .gfield select, .gfield input, .gfield textarea { padding: .25em; } .contact-email input, .contact-phone input, .contact-medium select { width: 100%; } .gfield textarea { width: 100%; } .contact-medium, .contact-phone, .contact-email { width: 50%; float: left; } .contact-medium { padding-right: 1em; } .contact-phone, .contact-email { padding-left: 1em; } .contact-message { width: 100%; display: inline-block; } .contact-message textarea { height: 8em; } .gfield_error { border-left: .125em fadeout(#ca0000, 25%) solid; padding-left: 1em; } .gfield_error label:after { content: '!'; padding-left: .25em; font-weight: bold; color: fadeout(#ca0000, 25%); } .validation_error, .validation_message { display: none; } .gform_validation_container { display: none; } .gfield_required { display: none; } .gform_edit_link { display: none; } .gform_button { margin-right: .5em; } .social:before { content: 'Social'; } .social { float: right; width: 35%; border-left: 1px #ddd solid; padding-left: 2em; } .bottom { border: 0; margin: 0 5%; padding: 1em 0; width: 90%; cursor: default; opacity: .5; .transition(opacity, .25s, ease); } .bottom:hover { opacity: 1; } .bottom span { width: 50%; float: left; } .bottom span:last-child { text-align: right; } } @media only screen and (min-width: 992px) { body > header { width: 100%; padding: .5em 2em; position: fixed; z-index: 1; top: 0; border-bottom: 1px #fff solid; .box-shadow(0, 0, .25em, #222); } #backstretch { top: 2em !important; } .home body > header h1, #site-logo { display: inline-block; text-align: left; width: auto; float: left; line-height: 0; margin-bottom: 0; } .home #site-logo { width: auto; } #site-logo img { height: 32px; } .tagline { display: none; position: absolute; top: 20em; left: 3em; max-width: 60%; z-index: 1; } .tagline span { background: rgba(0, 0, 0, .8); color: #eee; font-size: 2em; font-family: @type-heading; text-shadow: 0 1px .125em #000; padding: .25em; float: right; } .tagline a { display: inline-block; background: rgba(0, 0, 0, .8); font-style: italic; text-shadow: 0 1px .125em #000; padding: .25em; position: absolute; right: 1em; bottom: -1em; } .tagline a:active { top: auto; } .home .tagline { display: inline-block; } .home .container { opacity: 0; } .phone { position: fixed; z-index: 2; width: 25%; height: 2em; right: 1.6em; top: 0; padding: 0; text-align: center; border: 0; background: transparent; } .container { background: #f8f8f8; border: 1px #fff solid; .box-shadow(0, 0, .125em, #222); .rounded-top(.25em); position: absolute; width: 60%; top: 20em; left: 2em; margin-bottom: 2em; padding: 1em 2em; } #menu { top: 4em; right: 2em; margin: 0; position: fixed; width: 25%; border-width: 1px; border-color: #fff; border-style: solid; .box-shadow(0, 0, .125em, #444); } body > footer { background: transparent; border: 0; width: 25%; position: fixed; bottom: 4em; right: 1em; margin: 0; padding: 0; } body > footer > div, body > footer > *:before, body > footer form { display: none; } .social { width: auto; border: 0; padding: 0; float: right; } .social li { float: left; margin: 0; } .social li a { width: 32px; overflow: hidden; } .bottom { width: 25%; position: fixed; bottom: 2em; right: 2em; background: rgba(0,0,0,.6); color: #eee; font-size: .7em; text-align: right; padding: .25em; margin: 0; } .bottom span { width: 100%; } } @media only screen and (min-width: 1382px) { .phone { padding-top: .6em; } .container { top: 32em; } .tagline { top: 32em; } } @media print { * { background : transparent !important; color : black !important; text-shadow : none !important; filter : none !important; -ms-filter : none !important; } a, a:visited { color : #444 !important; text-decoration : underline; } a[href]:after { content : " (" attr(href) ")"; } abbr[title]:after { content : " (" attr(title) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after { content : ""; } pre, blockquote { border : 1px solid #999; page-break-inside : avoid; } thead { display : table-header-group; } tr, img { page-break-inside : avoid; } @page { margin : .5cm; } p, h2, h3 { orphans : 3; widows : 3; } h2, h3 { page-break-after : avoid; } }