/* #Reset & Basics (Inspired by E. Meyers) ================================================== */ 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; } /* #Basic Styles ================================================== */ body { background:#fff url('../img/general/gradient-bg.jpg') repeat-x; color: #3d3d3b;font: 14px/19px "OpenSansRegular", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal;} .wrap {background: #ffffff} ::selection{background:#c3e6f4;} /* #Typography ================================================== */ h1, h2, h3{color: #272b32;font-family: "OpenSansRegular", Helvetica, Arial, sans-serif;font-weight: normal; } h1 a, h2 a, h3 a { font-weight: inherit; color: #877a5e;} h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px; margin-top: 4px;} h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } p { margin: 0 0 20px 0; } hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 20px; height: 0; } /* #Links ================================================== */ a, a:visited { color: #877a5e ; text-decoration: none; outline: 0; } a:hover, a:focus { color: #91aa33; } /* #Lists ================================================== */ ul{ margin-bottom: 20px; } ul { list-style: none outside; } li { line-height: 18px; margin-bottom: 18px; } /* #Buttons ================================================== */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { background-color: #a3be39; color: #ffffff; border: none; display: inline-block; font-size: 14px; text-decoration: none; cursor: pointer; margin-bottom: 20px; line-height: normal; padding: 8px 16px; font: 18px 'FrancoisOneRegular', Arial, sans-serif;-webkit-transition: .25s;-moz-transition: .25s;-ms-transition: .25s;-o-transition: .25s;transition: .25s;} .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {color: #ffffff;background: #93ab36;-webkit-transition: .25s;-moz-transition: .25s;-ms-transition: .25s;-o-transition: .25s;transition: .25s;} .button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { background-color: #93ab36; } button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;} /* #Forms ================================================== */ form {margin-bottom: 0;text-transform:uppercase; } fieldset {margin-bottom: 20px; } input[type="text"], input[type="password"], input[type="email"], textarea,select {border: none;padding: 13px 9px;outline: none;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color: #777;margin: 0;width: 210px;max-width: 100%;display: block;margin-bottom: 20px;background: #e8f6fd; } select {padding: 0; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {border: none;color: #444; background: #ceeefd;} textarea {min-height: 60px; } label, legend {display: block;font-weight: bold;font-size: 13px; } select {width: 220px; } input[type="checkbox"] {display: inline; } label span, legend span {font-weight: normal;font-size: 13px;color: #444; } /* #Clearing ================================================== */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before,.clearfix:after,.row:before,.row:after {content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 0;height: 0; } .row:after,.clearfix:after {clear: both; } .row,.clearfix { zoom: 1; } .clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;} /* #Base 960 Grid ================================================== */ .wrap {max-width:960px;margin: 0 auto; } .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }.container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } /* Base Grid */ .container .one.column,.container .one.columns { width: 40px; }.container .two.columns{ width: 100px; }.container .three.columns { width: 160px; }.container .four.columns { width: 220px; }.container .five.columns{ width: 280px; }.container .six.columns{ width: 340px; }.container .seven.columns { width: 400px; }.container .eight.columns { width: 460px; }.container .nine.columns { width: 520px; }.container .ten.columns { width: 580px; }.container .eleven.columns { width: 640px; }.container .twelve.columns { width: 700px; }.container .thirteen.columns { width: 760px; }.container .fourteen.columns { width: 820px; }.container .fifteen.columns { width: 880px; } .container .sixteen.columns{ width: 940px; } .container .one-third.column { width: 300px; }.container .two-thirds.column{ width: 620px; } /* #Tablet (Portrait) ================================================== */ @media only screen and (min-width: 768px) and (max-width: 959px) { .wrap {max-width:768px;margin: 0 auto; } .container { width: 768px; }.container .column,.container .columns { margin-left: 10px; margin-right: 10px; }.container .one.column,.container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; }.container .seven.columns { width: 316px; }.container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; }.container .ten.columns { width: 460px; }.container .eleven.columns { width: 508px; }.container .twelve.columns { width: 556px; }.container .thirteen.columns { width: 604px; }.container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; }.container .one-third.column { width: 236px; }.container .two-thirds.column { width: 492px; } } /* #Mobile (Portrait) ================================================== */ @media only screen and (max-width: 767px) { .container { width: 300px; } .container .columns,.container .column { margin: 0; } .container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column { width: 300px; } } /* #Mobile (Landscape) ================================================== */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .container .columns,.container .column { margin: 0; } .container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column { width: 420px; } } /* ------- main -------- */ .contact {background:#ffffff; width:100%;height: 60px;} .contact h3.phone{float:left;} .contact h3.con {float:right;} .contact h3 {margin:0;padding:15px 0;text-transform: uppercase;line-height: 1.25;font-weight: 700;color: #9cb451;text-shadow: 1px 1px #ffffff, 2px 2px #ddd;font: 20px 'FrancoisOneRegular', Arial, sans-serif;} .contact h3 span {font-size: 17px} h2 {font: 15px/14px 'OpenSansbold'; Arial, sans-serif; letter-spacing: -1px;text-transform:uppercase;color:#877a5e;line-height:26px} h1 {font: 24px 'FrancoisOneRegular', Arial, sans-serif;text-transform:uppercase;color:#ffffff;text-shadow: 1px 1px 1px #859c29;filter: dropshadow(color=#859c29, offx=1, offy=1);} .logo h1 {text-transform: uppercase;line-height: 1.25;margin: 0;font-weight: 700;color: #9cb451;text-shadow: 1px 1px #ffffff, 2px 2px #ddd;margin-top: 11px;font: 35px 'FrancoisOneRegular', Arial, sans-serif;text-align: center;position: relative;top: -160px;} a {-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;} /* ------- header navigation -------- */ header{ padding:10px 0 15px 0 !important;top: 0px;z-index:1;background:#ffffff; -moz-box-shadow: 0 0 3px #c1ddea; -webkit-box-shadow: 0 0 3px #c1ddea; box-shadow: 0 0 3px #c1ddea;} nav {float:right; margin-top:5px;height: 40px;position: relative;font-weight: bold;} nav ul {padding: 0; height: 40px;margin-bottom: 0;} nav li{text-align: center; display:inline; padding:0 20px;font-family: 'OpenSansbold';text-transform:uppercase; } nav a {color:#877a5e;display: inline-block; line-height: 40px; } nav li a:hover{color:#91aa33;} nav li a:active {color:#91aa33;} nav a#pull {display: none;} /* ------- banner -------- */ .headline {position:relative;background: url('../img/general/main-banner.png') no-repeat;height:221px;max-width:960px;margin: 0 auto;margin-top:200px} .windmill{background: url('../img/general/windmill-1.png') no-repeat;width:120px;height:120px;position:absolute; top:-32px; right:-12px} .windmill-sml{background: url('../img/general/windmill-2.png') no-repeat;width:60px;height:60px;position:absolute; top:70px; right:128px} .ribbon {text-align:center;background: url('../img/general/ribbon.png') no-repeat; width:597px;height:51px;position:absolute;left:180px ;top:-100px;} /* ------- content -------- */ #services {padding:20px 0 0 0;} p.intro {padding:0 10px} #services ul li {background: url('../img/general/bullet.png') no-repeat left; list-style: none;padding: 0 5px 0 20px;} #content {margin-bottom:60px} #content p, #content h2{padding:0 10px} #services ul{padding:0 0 0 10px} .six .button-one {background: url('../img/general/btn-bg.jpg') no-repeat; width:310px;min-height:42px; padding: 17px 0 0 16px; color: #ffffff;float:right} .button-one a{color: #ffffff;text-transform:uppercase;font: 17px 'FrancoisOneRegular', Arial, sans-serif; } /* ------- footer -------- */ footer{} .footer { background: url('../img/general/footer-bg.jpg') repeat; padding:10px 0 0 0} footer ul {display:inline} footer ul li {color:#ffffff;display:inline; font-size:12px;margin-bottom: 10px;} li.designed {float:right;margin-top:3px} li.designed a {color:#ffffff} li.designed a:hover {color:#ffffff} @media screen and (max-width: 490px) { nav { height: auto;width:100%;border-bottom: 0;} nav ul {width: 100%;height: auto;display: none;background-color: #ede6d6;height: auto;} nav li {width: 100%;float: left;position: relative;padding:0;margin-bottom: 5px;} nav li:hover{background-color: #d9d2c4;} nav a {text-align: left;width: 100%;text-indent: 25px;margin-bottom: 5px;} nav a#pull {display: block;color:#ffffff;background-color: #d9d2c4;width: 100%;position: relative;} nav a#pull:after {content:"";background: url('../img/general/nav-icon.png') no-repeat;width: 30px;height: 30px;display: inline-block;position: absolute;right: 15px;top: 10px;} } @media only screen and (max-width : 320px) { nav li {display: block;float: none;width: 100%;padding:0;margin-bottom: 5px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .headline {position:relative;background: url('../img/general/main-banner-765.png') no-repeat;height:176px;max-width:767px;margin: 0 auto;margin-top:220px} .windmill{position:absolute; top:-40px; right:-19px} .windmill-sml{position:absolute; top:50px; right:97px} .ribbon {text-align:center;background: url('../img/general/ribbon.png') no-repeat; width:597px;height:51px;position:absolute;left:80px ;top:-100px;} .six .button-one {background: url('../img/general/btn-bg-smlr.jpg') no-repeat; width:275px;min-height:53px; padding: 17px 0 0 16px; color: #ffffff;} .button-one a{color: #ffffff;text-transform:uppercase;font: 14.5px 'FrancoisOneRegular', Arial, sans-serif;} nav li { padding: 0 10px;} } @media only screen and (max-width: 767px) { .six .button-one {float: left;} nav li { padding: 0 10px;} } @media only screen and (min-width: 480px) and (max-width: 767px) { .headline {position:relative;background: url('../img/general/main-banner-420.png') no-repeat;height:114px;max-width:420px;margin: 0 auto;margin-top:150px} .windmill{display:none} .windmill-sml{display:none} .ribbon {text-align:center;background: url('../img/general/ribbon-420.png') no-repeat; width:420px;height:74px;position:absolute;left:0px ;top:-80px;} .button-one a{font-size: 16.5px} .logo h1 {text-align:center;font-size: 24px} h1 {font-size: 23px !important; line-height:26px} nav {margin-right:40px} nav li { padding: 0 10px;} .logo h1 { top: -130px;} .contact h3 {text-align:center;font-size: 16px;float:none;padding:10px 0;} .contact h3 span {font-size: 14px} .contact h3.phone{float:none;} .contact h3.con {float:none;} .contact {height: 90px;} } @media only screen and (max-width: 479px) { .headline {position:relative;background: url('../img/general/main-banner-300.png') no-repeat;height:81px;max-width:300px;margin: 0 auto;margin-top:130px} .windmill{display:none} .windmill-sml{display:none} #services {margin-bottom:20px} .ribbon {text-align:center;background: url('../img/general/ribbon-300.png') no-repeat; width:300px;height:70px;position:absolute;left:0px ;top:-75px;} .logo h1 {font-size: 18px !important; line-height:24px} h1 {font-size: 23px !important; line-height:24px} li.designed {float:none} .button-one a{font-size: 16.5px} .logo h1 { top: -115px;} .contact h3 {text-align:center;font-size: 16px;float:none;padding:10px 0;} .contact h3 span {font-size: 14px} .contact h3.phone{float:none;} .contact h3.con {float:none;} .contact {height: 90px;} } body.contact-page { background: #ffffff;} #pageslide { display: none; position: absolute; position: fixed; top: 0; height: 100%; z-index: 999999; width: 280px; padding: 90px 20px 20px 40px; background: #ffffff;} /* #Font-Face ================================================== */ @font-face { font-family: 'FrancoisOneRegular'; src: url('fonts/FrancoisOne-webfont.eot'); src: url('fonts/FrancoisOne-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/FrancoisOne-webfont.woff') format('woff'), url('fonts/FrancoisOne-webfont.ttf') format('truetype'), url('fonts/FrancoisOne-webfont.svg#FrancoisOneRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansRegular'; src: url('fonts/OpenSans-Regular-webfont.eot'); src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/OpenSans-Regular-webfont.woff') format('woff'), url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'), url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansbold'; src: url('fonts/OpenSans-Bold-webfont.eot'); src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/OpenSans-Bold-webfont.woff') format('woff'), url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'), url('fonts/OpenSans-Bold-webfont.svg#OpenSansSemibold') format('svg'); font-weight: normal; font-style: normal; }