/****** FILE: themes/modwood/css/reset.css *****/ /* This reset is loosely derived from HTML5 boilerplate for more information visit http://html5boilerplate.com/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, 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;} html{overflow-y:scroll;} body{-webkit-text-size-adjust:none;} .clear:before, .clear:after {content: "\0020"; display: block; height: 0; overflow: hidden; } .clear:after {clear:both;} .clear{zoom:1;} sub, sup{font-size:75%; line-height:0; position:relative;} sup{top:-0.5em;} sub{bottom:-0.25em;} pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word; padding:15px;} textarea {overflow:auto;} .ie6 legend, .ie7 legend {margin-left:-7px;} input[type="radio"], input.radio {vertical-align:text-bottom;} input[type="checkbox"], input.checkbox, .checkboxes input {vertical-align:bottom;} .ie7 input[type="checkbox"], .ie7 input.checkbox, .ie7 .checkboxes input {vertical-align:baseline;} .ie6 input {vertical-align: text-bottom;} label, input[type="button"], input[type="submit"], input[type="image"], button, .btn {cursor:pointer;} button, input, select, textarea {margin:0;} /* .checkbox, .radio {float:left; width:13px; height:13px; margin-right:6px; padding:0;} */ button {width:auto; overflow:visible;} .ie7 img {-ms-interpolation-mode: bicubic;} .ir {display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; text-align:left; direction:ltr; } .hidden {display:none; visibility:hidden; } .visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;} .invisible {visibility:hidden;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content:none;} ins {background-color:#ff9; color:#000; text-decoration:none;} mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del {text-decoration: line-through; } abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;} hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;} input, select {vertical-align:middle;} a:hover, a:active {outline: none;} .content ul, .content ol {margin-left:2em;} ol {list-style-type:decimal;} ul li {list-style-type:none;} nav ul, nav li {margin:0; list-style:none; list-style-image:none;} strong, th {font-weight:bold;} /****** FILE: themes/modwood/css/form.css *****/ /****** FILE: themes/modwood/css/base.css *****/ /* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Reset & Basics #Basic Styles #Site Styles #Typography #Links #Lists #Images #Buttons #Forms #Misc */ /* #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; } 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: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; } /* #Typography ================================================== */ h1, h2, h3, h4, h5, h6 { color: #181818; font-family: Arial, Helvetica, serif; font-weight: normal; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } h5 { font-size: 17px; line-height: 24px; } h6 { font-size: 14px; line-height: 21px; } .subheader { color: #777; } p { margin: 0 0 20px 0; } p img { margin: 0; } p.lead { font-size: 21px; line-height: 27px; color: #777; } em { font-style: italic; } strong { font-weight: bold; color: #333; } small { font-size: 80%; } /* Blockquotes */ blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } blockquote cite { display: block; font-size: 12px; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } /* #Links ================================================== */ a, a:visited { color: #333; text-decoration: underline; outline: 0; } a:hover, a:focus { color: #000; } p a, p a:visited { line-height: inherit; } /* #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: 90%; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; } li { line-height: 18px; margin-bottom: 12px; } ul.large li { line-height: 21px; } li p { line-height: 21px; } /* #Images ================================================== */ img.scale-with-grid { max-width: 100%; height: auto; } /* #Buttons ================================================== */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { background: #eee; /* Old browsers */ background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ border: 1px solid #aaa; border-top: 1px solid #ccc; border-left: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #444; display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(255, 255, 255, .75); cursor: pointer; margin-bottom: 20px; line-height: normal; padding: 8px 10px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { color: #222; background: #ddd; /* Old browsers */ background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ border: 1px solid #888; border-top: 1px solid #aaa; border-left: 1px solid #aaa; } .button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { border: 1px solid #666; background: #ccc; /* Old browsers */ background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } .button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } /* Fix for odd Mozilla border & padding issues */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* #Forms ================================================== */ form { margin-bottom: 20px; } fieldset { margin-bottom: 20px; } input[type="text"], input[type="password"], input[type="email"], textarea, select { border: 1px solid #ccc; padding: 6px 4px; 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: #fff; } select { padding: 0; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #aaa; color: #444; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } 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; } /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .add-bottom { margin-bottom: 20px !important; } /****** FILE: themes/modwood/css/skeleton.css *****/ /* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; /* float: left; */} .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* 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; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } .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; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @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; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @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; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .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; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /****** FILE: themes/modwood/css/layout.css *****/ /* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Typography (baseline corrections) ================================================== */ h1{line-height: 49px; margin-bottom: 14px;} h2{line-height: 42px; margin-bottom: 7px;} h3{line-height: 35px; margin-bottom: 7px;} h4{line-height: 28px; margin-bottom: 7px; color: rgb(161, 138, 121);} h5{line-height: 21px; margin-bottom: 7px;color: rgb(161, 138, 121);} h1, h3{color:rgb(88,155,189);} p { margin: 0 0 21px 0;} p.lead {line-height: 28px} p a, p a:visited { line-height: inherit; text-decoration: none; color: rgb(88, 155, 189); font-weight: bold;} p a:hover { text-decoration:underline; color: #589BBD;} /* Blockquotes */ blockquote, blockquote p {line-height: 21px;} blockquote{ margin: 0 0 21px; padding: 7px 20px 0px 19px;} hr {margin:14px 0 28px;} /* #Lists (baseline corrections) ================================================== */ ul, ol {margin-bottom:21px; } ul ul, ul ol, ol ol, ol ul{margin: 7px 0 7px 30px;} ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 7px;} li { line-height: 21px; margin-bottom: 14px;} /* #Site Styles ================================================== */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font:inherit; } /* bands */ .band { background: url(../images/bg_main.png) repeat #f8f8f8; } .band.main { /* background: url(/assets/Uploads/modwood-name.png) 50% 50px no-repeat; */ } .band.navigation{ background: url(../images/bg_bottom.png) repeat #343434; } .band.bottom{ background: url(../images/bg_bottom.png) repeat #343434; color:#e0e0e0; } .band.videos{ padding:0px 0px 14px 0px; } img { max-width:100%; } /*figure{ padding:6px; border: 1px solid #ededed; background: white; line-height: 0px; } */ figure>img,iframe { border: 3px solid white; box-shadow: 1px 1px 10px 2px lightGrey; } figure>a>img{ border: 3px solid white; } /*heading*/ header div.logo { margin: 7px 0 0 0; float:left; } header div.logo a{ width: 250px; height: 88px; display:block; background: url(../images/core/logo_small.png) no-repeat 0 0; font: 0/0 a; text-shadow: none; color: transparent; } /* home icons */ ul.home-icons { margin: 30px 0 0; } ul.home-icons li { display: inline-block; text-align: center; width: 32%; vertical-align: middle; } ul.home-icons li a { display: block; } ul.home-icons li img { max-height: 165px; } @media only screen and (max-width: 768px) { ul.home-icons li { width: 100%; } } /* cta */ .image-ct-holder { background: url(../images/core/image-cta-bg.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 240px; padding: 25px; margin-bottom: 25px; } .image-ct-holder .content { background: rgba(0,0,0,0.8); width: 100%; height: 190px; padding: 25px; } .image-ct-holder .content div { display: inline-block; vertical-align: middle; height: 100%; } .image-ct-holder .content .text { color: #ffffff; font-size: 28px; width: 64%; font-family: inherit; line-height: 34px; position: relative; } .image-ct-holder .content .text p { margin-bottom: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); padding-right: 25px; } .image-ct-holder .content .cta { text-align: right; width: 35%; position: relative; } .image-ct-holder .content .cta a { margin-bottom: 0; top: 50%; margin-left: auto; -ms-transform: translateY(-50%); background: #58351F; right: 0; transform: translateY(-50%); color: #ffffff; text-decoration: none; font-size: 22px; font-family: inherit; padding: 20px; border-radius: 50px; text-align: center; width: 100%; display: block; position: relative; } .image-ct-holder .content .cta a:hover { background: #462b19; } @media only screen and (max-width: 768px) { .image-ct-holder { height: auto; padding: 12px; } .image-ct-holder .content { height: auto; padding: 12px; } .image-ct-holder .content div { display: block; width: 100% !important; padding: 0 !important; } .image-ct-holder .content .text p { position: relative !important; transform: unset !important; top: unset !important; padding-right: 0 !important; text-align: center; } .image-ct-holder .content .cta a { position: relative !important; transform: unset !important; top: unset !important; margin-top: 30px; } .mobile-header { display: block !important; } header.container.main { width: 100%; } .hide-on-mobile { display: none !important; } } @media only screen and (min-width: 769px) { .mobile-menu { display: none !important; } } .no-scroll { overflow: hidden; } header.container.main::before { content: ""; position: absolute; height: 58px; width: 168px; left: -168px; top: 18px; background: url(../images/made-in-au.jpg); background-position: center center; background-repeat: no-repeat; } @media only screen and (max-width: 1230px) { header.container.main::before { display: none; } } .mobile-header.menu-open .js-toggle-menu { background: url(../images/icons/icon-close.svg); width: 24px; } .mobile-header { display: none; height: 60px; box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 20%); /* margin-bottom: 100px; */ padding: 10px 15px; z-index: 1111111; position: relative; } .mobile-header .logo { float: unset !important; margin-top: 0; } .mobile-header div.logo a { height: 40px; background-position: center center; background-size: 180px; text-align: left; width: 180px; } .mobile-header .js-toggle-menu { background: url(../images/icons/icon-menu.svg); background-size: cover; background-position: center center !important; background-repeat: no-repeat !important; height: 20px; width: 30px; position: absolute; right: 20px; top: 19px; } .mobile-menu .js-close-menu { background: url(../images/icons/icon-close.svg); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 20px; width: 30px; position: absolute; right: 20px; top: 19px; } .mobile-menu { left: 100%; right: -100%; transition: all 0.2s ease-in-out; position: absolute; top: 60px; background: #f1f1f1; height: calc(100vh - 60px); z-index: 111; transition: all 0.2s ease-in-out; padding: 20px 25px; overflow-y: auto; opacity: 0; pointer-events: none; } .mobile-menu.active { position: absolute; left: 0; right: 0; top: 60px; background: #f1f1f1; height: calc(100vh - 60px); z-index: 111; transition: all 0.2s ease-in-out; padding: 20px 25px; overflow-y: auto; opacity: 1; pointer-events: all; } .mobile-menu.active ul li { margin-bottom: 0; } .mobile-menu.active ul li a { font-family: inherit; font-size: 20px; text-transform: uppercase; color: #231F20; text-decoration: unset !important; font-weight: bold; padding: 15px 0; width: 100%; display: block; } .mobile-menu.active a.request-sample { font-family: inherit; font-size: 20px; text-transform: uppercase; color: #ffffff; background-color: #57321C; text-decoration: unset !important; font-weight: bold; padding: 15px 0; width: 100%; display: block; text-align: center; } .mobile-menu.active ul.links { margin-top: 15px; } .mobile-menu.active ul.links li a { font-weight: normal; padding: 3px 0; font-size: 16px; text-transform: unset; } .mobile-menu.active ul li.with-submenu.active .toggle-submenu { transform: rotate(-90deg); } .mobile-menu.active ul li.with-submenu .toggle-submenu { background: url(../images/icons/icon-chevron.svg); background-size: 100%; background-position: center center; background-repeat: no-repeat; height: 20px; width: 14px; position: absolute; right: 3px; top: 15px; transform: rotate(90deg); } .mobile-menu.active ul li.with-submenu { position: relative; } .mobile-menu.active ul li.with-submenu .submenu { display: none; } .mobile-menu.active ul li.with-submenu a:first-child { border-bottom: 1px solid #d3d3d3; } .mobile-menu.active ul li.with-submenu .submenu ul.children { margin: 10px 0 5px 10px; } .mobile-menu.active ul li.with-submenu .submenu ul.children li a { color: #A78667 !important; border-bottom: 0 !important; font-weight: normal; font-size: 17px; padding: 4px 0; } .mobile-menu.active ul li.with-submenu .submenu ul.children li a span { display: none; } /* navigation */ nav.navigation-holder ul li { display: inline-block !important; float: unset !important; } nav.navigation-holder ul li a { padding: 0 29px !important; max-width: 222px !important; text-align: center; width: auto; display: block !important; } nav.navigation-holder ul li:last-child a { background: #599BBC; } nav.navigation-holder ul li:last-child a:hover { color: #343434 !important; } nav.navigation-holder ul li.current:last-child a { color: #ffffff !important; } nav.navigation-holder ul li.current:last-child a:hover { color: #343434 !important; } nav.navigation-holder ul.children li:last-child a { background: unset; } nav.navigation-holder ul.children li:last-child a:hover { color: #599BBC !important; } @media only screen and (min-width: 768px) and (max-width: 959px){ nav.navigation-holder ul li a { padding: 0 13px !important; } } /* colour tile */ .colour-tile { float: left; width: 120px; text-align: center; margin: 10px; } .colour-tile .swatch { margin-bottom: 1rem; } .colour-tile .swatch img { border:1px solid #e1e1e1; border-radius: 50%; max-width: 100%; } .colour-tile .name { font-weight: bold; } .colour-tile .btn { margin-top: 16px; } .colour-tile .btn a { padding: 10px 0; background: #a68461; color: #fff; text-decoration: none; width: 100%; display: block; } @media only screen and (max-width: 768px) { .colour-tile { float: left; width: 130px; } } /*main navigation */ .band.primary ul, .band.primary ul li, nav.secondary ul, nav.secondary ul li { margin:0px; display: inline; float:left; position:relative; } nav.secondary ul { float:right;} /*styles for main navigation for mobile*/ .band.primary select{ display: none; width:100%; height:35px; margin:21px 0; } .band.primary ul li span{ display:none; } .band.primary ul li a{ display: inline-block; line-height: 49px; padding: 0 14px; color:#fff; text-transform: uppercase; text-decoration: none; font-weight: bold; letter-spacing: 0.08em; } .band.primary ul li a:hover { color:rgb(88,155,189); } .band.primary ul li:hover ul{ opacity:10; filter: alpha(opacity=100); height:auto; overflow:auto; } /*FLEXSLIDER*/ .flex-control-nav { width: 100%; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); } /*submenu*/ .band.primary ul ul { opacity:0; filter: alpha(opacity=0); position: absolute; z-index: 999; background: url(../images/core/bg_bottom.png); height:0px; overflow:hidden; top:100%; left:0; -webkit-transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; transition:opacity .5s ease-out; -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3); box-shadow: 0px 2px 2px(0,0,0,0.3); } .band.primary ul ul li { float:none; display: list-item; border-bottom: 1px solid #383737; } .band.primary ul ul li a{ display:block; line-height: 35px; text-transform: none; white-space: nowrap; } .band.primary ul li:hover >a{ color:rgb(88,155,189); } /*secondary navigation*/ nav.secondary ul li a { display: inline-block; line-height: 14px; padding: 0 7px; color:#; text-transform: none; text-decoration: none; letter-spacing: 0.04em; } nav.secondary ul li a:hover { text-decoration:none; } /* Videos ================================================== */ .band.videos figure>a>img { border: 3px solid white; box-shadow: 1px 1px 10px 2px lightGrey; } /* Footer ================================================== */ footer a, footer a:visited{ color: #8f8f8f; } footer a:hover{ text-decoration:none; color:#fff; } .bottom footer { font-size:12px; padding:14px 0px; } footer h3.logo{ margin: 14px 0px 21px; } footer h3.logo a{ width: 220px; height:35px; display:block; font: 0/0 a; text-shadow: none; color: transparent; } footer .main header { background: url(../images/diagonal_dark.png) repeat; font-size: 14px; line-height: 1em; margin: 14px 0 21px; } footer .main h4 { font-weight: bold; color: #fff; font-size: 14px; line-height: 1em; text-transform: uppercase; letter-spacing: 0.1em; font-family: arial, sans-serif; background: url(../images/bg_bottom.png) repeat; display: inline; padding: 0 10px; margin: 0 0 0 14px; white-space:nowrap; } footer ul { margin-left:21px; } footer li{margin:0 0 7px 0} footer li a { font-size: 14px; text-decoration:none; } /*.band.primary ul li a:hover { border: #424242; } */ /*sidebar (aside)*/ .sub header { background: url(../images/diagonal_pale.png) repeat; font-size: 14px; line-height: 1em; margin: 14px 0px 21px; } .sub header h4 { font-weight: bold; color: #999999; font-size: 14px; line-height: 1em; text-transform: uppercase; background: url(../images/bg_main.png) repeat #f8f8f8; display: inline; padding: 0 10px; margin: 0 0 0 14px; letter-spacing: 0.1em; font-family: Arial, sans-serif; } .sub form { margin: 7px 0; } /* Calculators ================================================== */ /*Maintenance*/ #formCalc input, input[type="text"] { width:50px; border:1px solid #ccc; } #formCalc input.textBox {float:right} #formCalc input.textBoxLarge {float:right;width:105px} #formCalc select { width:45px; margin-left:10px; border:1px solid #ccc; } /* Accordion - FAQS ================================================== */ .QandA p,.QandA h4{ padding: 7px 10px;} .accordionButton { _float: none; /* Float works in all browsers but IE6 */ border-bottom: 1px solid rgb(230,230,230); cursor: pointer; } .accordionContent { _float: none; /* Float works in all browsers but IE6 */ background: white; } /*********************************************************************************************************************** EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS ************************************************************************************************************************/ .on h4{ color:rgb(88,155,189); /*background: #990000;*/ } .on p{ padding:14px 7px; } .over h4 { color:rgb(88,155,189); /*background: #CCCCCC;*/ } /*forms*/ /*Glyn Mooney webkit reset http://www.skidoosh.co.uk/html/how-to-reset-the-webkit-html5search-field-style-with-css/*/ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { display: none; } input[type=search] { -webkit-appearance: textfield; } input[type=search]:focus { outline: none; } input[type="text"], input[type="search"], input[type="password"], input[type="email"], textarea, select { width: 100%; } .search input[type=search], .subscribe input[type=email] { width: 70%; float: left; margin: 0; height:21px; } .search button, .subscribe button { width: 30%; float: right; margin: 0; padding: 0px; height:21px; } .buffer p { font: 0/0 a; text-shadow: none; color: transparent; } /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin:7px 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* #Page Styles ================================================== */ /* Product page */ #product nav ul li { margin:0 0 7px 0} #product nav ul {margin-top:7px;} #product nav ul li a { font-size: 21px; text-decoration:none; line-height:21px; text-decoration:none; font-weight: bold; color: rgb(161, 138, 121); } #product nav .visited{ color: rgb(83,49,26); } #product #tabs{ font-size: 14px; font-family:Arial, Helvetica, sans-serif; margin:7px 0px 14px 0px; } #product #tabs h4 { color:rgb(88,155,189); } #product #tabs .highlighted td { vertical-align:top; background-color:rgb(161, 138, 121); color:#fff; } /*Contact form pages*/ #contact-form fieldset input,textarea { width:220px; } #contact-form fieldset select { width:180px; } .contact-form label{ width:200px; text-align:right; float:left; margin-right:20px; line-height:28px; } .modwood_submit_button { margin-left:220px } /*fixing and Technical*/ .technical ul{border:1px solid rgb(170, 170, 170)} .technical ul li { background-color:#fff; margin:0; border-bottom: 1px solid rgb(170, 170, 170); padding: 14px 0 14px 14px; } .technical ul li a { text-decoration:none; color:rgb(88,155,189); background: url(../images/icons/logo_adobe_pdf_download.png) no-repeat 0 0; padding-left: 30px; } .technical ul li a:hover{ text-decoration:underline;} .technical.last ul li { background-color:#fff; margin:0; padding: 14px 0 14px 14px; } .sidebar-banner-wrap{ width:1600px; margin: 0 auto; } .sidebar-banner{ float:left; width: 280px; margin-top: 2em; } .sidebar-banner ul{ margin:0; } .sidebar-banner ul li{ margin-bottom: 3.5em; } .sidebar-banner-right{ float:right; } /* #Media Queries ================================================== */ @media only screen and (max-width: 1600px){ .sidebar-banner-wrap{ width: 100%; } .sidebar-banner{ width: 15%; } .sidebar-banner img { width: 100%; } } @media only screen and (max-width: 1400px){ .sidebar-banner{ width: 10%; } } @media only screen and (max-width: 1220px){ .sidebar-banner-wrap{ display: none; } } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { footer li{line-height:14px;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { iframe{height:97px; width:173px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .band.primary select { display: block; } .band.primary ul { display:none; } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {} /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */ /****** FILE: themes/modwood/css/calc.css *****/ body{ font-family: Arial, Helvetica, sans-serif; background: url(../images/bg_main.png) repeat #f8f8f8; } h3{line-height: 35px;color:#1a2d37; margin: 0 70px 7px;} #formCalc { margin: 10px 0px 0px 0px; padding: 0; border:1px solid #B3B3B3; color:#333333; } #formCalc div { padding: 5px 0px 5px 8px; } #formCalc .headerYellow { background: url(../images/bg_bottom.png) repeat rgb(52, 52, 52); font-weight:bold; font-size:12px; margin:0; clear: both; color:white; } #formCalc .headerBlue { /*background:#91C5DF;*/ background: url(../images/bg_bottom.png) repeat rgb(52, 52, 52); font-weight:bold; font-size:13px; margin:0; clear: both; color:white; } #formCalc .headerBlueSub { /* background:#91C5DF;*/ background: url(../images/bg_bottom.png) repeat rgb(52, 52, 52); font-weight:normal; font-size:10px; margin:0; clear: both; text-align:left; color:white; } #formCalc .headerBlueSub label { display: block; text-align: left; float: left; padding-top:1px; width: 323px; } #formCalc .headerInputCalcBt { background: url(../images/bg_bottom.png) repeat rgb(52, 52, 52); font-weight:normal; font-size: 12px; margin:0; text-align:left; color:white; } #formCalc .headerInputCalcBt label { display: block; text-align: left; float: left; padding-top:1px; width: 323px; } #formCalc input, textarea { width:50px; margin:5px 0 0 5px; border:1px solid #ccc; } #formCalc input.textBox {float:left} #formCalc input.textBoxLarge {float:left;width:105px} #formCalc select { width:45px; margin-left:10px; border:1px solid #ccc; } #formCalc label { margin: 0; display: block; text-align: left; float: left; width: 250px; } #formCalc fieldset, #formCalc .fieldset { /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */ border-color: #fff; border-width: 0px; border-style: solid; padding: 5px 0px 8px 0px; /* padding in fieldset support spotty in IE */ margin: 0 auto; background:#F0EEE9; } #formCalc .fieldset { padding: 10px; } #formCalc .mandat { width: 324px; padding: 12px 0px 0px 0px; margin: 0px 0px 0px 5px; } #formCalc .mandat2 { width: 359px; padding: 12px 0px 0px 0px; margin: 0px 22px 0px 5px; } #formCalc .mandatTitle { padding: 10px 0px; margin: 0px 0px 0px 5px; font-size:10px; } #formCalc .headerBlueSub .mandatTotal { width: 290px; padding: 0; margin: 2px 0px 0px 0px; } #formCalc br { clear:left; } #formCalc .smallHeader { font-size:9px; margin-left:7px;} .deckArea #sPrepClean {margin-bottom: 20px; margin-left: 0px;} /* decking calculator */ #formCalc fieldset label { color:#333; } #formCalc .headerBlueSub { color:#fff; } #formCalc .input { display:block; float:left; padding:0; width:150px; margin-right:8px; } #formCalc .small { text-align:center; font-size:9px; text-transform:uppercase; display:block; } #formCalc .deckArea .input input { margin:0 10px 0 0; width:150px; } #formCalc .deckArea .input.noHeading { margin:0 8px 15px 329px; } #formCalc fieldset .headerInputCalcBt label { width:324px; margin:5px 0 0 8px; color:#fff; text-transform: uppercase; } #formCalc #deckTotalArea { width:150px; float:left; margin:5px 0; } /* decking */ #formCalc .headerBlue { background-color:rgb(88,155,189); background-image: none; text-transform:uppercase; font-size:14px; padding:8px 10px; } #formCalc.decking .headerBlue { padding:7px 15px; } /* #formCalc.decking label.mandat { text-transform:capitalize; } */ #formCalc.decking div { padding:0; } #formCalc.decking fieldset { padding:5px 0px 5px 8px; } #formCalc.decking fieldset select { float:left; margin:13px 0 10px 0; } #formCalc.decking .noHeading { margin-left:334px; } #formCalc.decking .noHeading select { margin:0; } #formCalc.decking .mandatTitle { padding:0; } #formCalc.decking .textBox { margin:10px 0; width:150px; } #formCalc.decking .headerInputCalcBt { height:60px; background-color:rgb(88,155,189); background-image: none; } #formCalc.decking .headerInputCalcBt label { margin:6px 5px 0 10px; } #formCalc.decking .headerInputCalcBt label span { color:#fff; font-size:11px; } #formCalc.decking .headerInputCalcBt #sTotalTime { float:left; width:150px; margin:14px 0 0 5px; } h2#formCalc { margin:35px 0 15px 15px; border:none; } #formCalc .headerBlueSub label { width:324px; margin-left:5px; } #formCalc .headerBlueSub label span { color:#fff !important; font-size:11px; } #formCalc #sYearsBeforeSave2, #formCalc #sNetMaintenanceCost10yrs2 { width:150px; float:left; } #formCalc .mandat, #formCalc .mandat2 { margin-left:10px; width:324px; margin-right:0; } #formCalc.maintenance label.mandatTitle { padding:0; margin-left:10px; } #formCalc.maintenance label.madat { margin-left:10px; } #formCalc input.textBox { width:150px; float:left; } #formCalc .headerBlueSub #sTotalAnnualCost { width:150px; } #formCalc.maintenance .comparison span { padding-top:10px; } #formCalc.maintenance input { float:left; width:150px; } .sixteen.columns #formCalc.maintenance input#sApproxMaintenanceLabour{ margin-left: 160px; } .sixteen.columns #formCalc.maintenance input#sEquipmentMaterials{ margin-left: 160px; } /* overwrites */ @media only screen and (max-width: 599px) { /* decking calculator */ #formCalc .deckArea .input.noHeading { margin-left:0; } #formCalc.decking .noHeading { margin-left:0; } } @media only screen and (max-width: 479px) { /* decking calculator */ #formCalc .deckArea .input.noHeading { margin-left:0; } #formCalc fieldset .headerInputCalcBt label { text-align:center; } #formCalc #deckTotalArea { width:324px; } } /* maintenance calculator */ #formCalc.maintenance .mandat { padding-top:0; height:30px; } #formCalc.maintenance select.select { margin-bottom:0; } .table-holder table { border-collapse: collapse; width: 100%; } .table-holder table, .table-holder th, .table-holder td { border: 1px solid black; } .table-holder td { padding: 10px; } .shoppingList .copy-button { float: right; margin-right: 10px; } .calculate-button-holder { margin: 25px 0px 25px 0px; text-align: center; } .calculate-button { margin: 0; } .required-field-label::before { content: '*'; position: absolute; left: 1.5em; } input:disabled, input:read-only { background-color: #EFEEE9; } #formCalc fieldset label.error, .validation-error-message { color: #CC0000 } .deckArea .textBox { background-color:#FFEEB2; } select.error, input.error, #formCalc .deckArea .input input.error { background-color: #fabcbc; }