/* style */ /* globals */ body {margin:0px; padding:0px; color:#282828; background:#fff; font-size:16px; line-height:1.3; font-family:'Open Sans', sans-serif; min-width:320px;} html {width:100%; height:100%;} .wf-loading {visibility:hidden;} .left {position:relative; float:left;} .right {position:relative; float:right;} .clear {clear:both;} .hidden {display:none;} .notMobile {display:block;} /*use this class to omit elements from the mobile version*/ .mobileOnly {display:none;} /*use this class to show elemnts on the mobile version only*/ @media only screen and ( max-width:700px ) { .notMobile {display:none;} .mobileOnly {display:block;} } img {max-width:100%;} ::selection {background:#000; color:#f89520; /* Safari */} ::-moz-selection {background:#000; color:#f89520; /* Firefox */} * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box} /* branding */ .black {color:#000;} .bg-white {background-color:#fff; color:#000;} .white {color:#fff;} .bg-light-grey {background-color:#e4e4e4; color:#282828;} .light-grey {color:#282828;} .bg-dark-grey {background-color:#202020; color:#616161;} .dark-grey {color:#616161;} .bg-black {background-color:#000; color:#fff;} .yellow {color:#f89520;} .bg-yellow {background-color:#f89520; color:#fff;} .green {color:#3b6732;} .bg-green {background-color:#3b6732; color:#fff;} .dark-green {color:#2d371f;} .bg-dark-green {background-color:#2d371f; color:#fff;} .blue {color:#3a3a8e;} .bg-blue {background-color:#3a3a8e; color:#fff;} .red {color:#c31f1f;} .bg-red {background-color:#c31f1f; color:#fff;} /* columns & slices */ .slice {position:relative; float:left; width:100%; text-align:center;} .wrapper {position:relative; width:100%; max-width:1200px; margin:0 auto;} .columns01 {position:relative; float:left; margin:0 1.25%; width:5.833333333333333%;} .columns02 {position:relative; float:left; margin:0 1.25%; width:14.16666666666667%;} .columns03 {position:relative; float:left; margin:0 1.25%; width:22.5%;} .columns04 {position:relative; float:left; margin:0 1.25%; width:30.83333333333333%;} .columns05 {position:relative; float:left; margin:0 1.25%; width:39.16666666666667%;} .columns06 {position:relative; float:left; margin:0 1.25%; width:47.5%;} .columns07 {position:relative; float:left; margin:0 1.25%; width:55.83333333333333%;} .columns08 {position:relative; float:left; margin:0 1.25%; width:64.16666666666667%;} .columns09 {position:relative; float:left; margin:0 1.25%; width:72.5%;} .columns10 {position:relative; float:left; margin:0 1.25%; width:80.83333333333333%;} .columns11 {position:relative; float:left; margin:0 1.25%; width:89.16666666666667%;} .columns12 {position:relative; float:left; margin:0 1.25%; width:97.5%;} @media only screen and ( max-width:700px ) { .mobile01 {position:relative; float:left; margin:0 1.25%; width:5.833333333333333%;} .mobile02 {position:relative; float:left; margin:0 1.25%; width:14.16666666666667%;} .mobile03 {position:relative; float:left; margin:0 1.25%; width:22.5%;} .mobile04 {position:relative; float:left; margin:0 1.25%; width:30.83333333333333%;} .mobile05 {position:relative; float:left; margin:0 1.25%; width:39.16666666666667%;} .mobile06 {position:relative; float:left; margin:0 1.25%; width:47.5%;} .mobile07 {position:relative; float:left; margin:0 1.25%; width:55.83333333333333%;} .mobile08 {position:relative; float:left; margin:0 1.25%; width:64.16666666666667%;} .mobile09 {position:relative; float:left; margin:0 1.25%; width:72.5%;} .mobile10 {position:relative; float:left; margin:0 1.25%; width:80.83333333333333%;} .mobile11 {position:relative; float:left; margin:0 1.25%; width:89.16666666666667%;} .mobile12 {position:relative; float:left; margin:0 1.25%; width:97.5%;} } /* header */ #header {padding:50px 0 60px 0;} #header .columns03 {min-height:141px; text-align:right;} #header .columns06 {min-height:141px;} #header h3 {font-size:26px; font-weight:300; margin:75px 0 0 0;} #header h3 a {color:#fff;} #header p {font-size:17px; font-weight:300;} #header p a {color:#a1ac91; text-decoration:none;} #header p a:hover {text-decoration:underline;} @media only screen and ( max-width:1200px ) { #header {padding:30px 0;} #header .columns03 {min-height:auto; width:97.5%; text-align:center;} #header .columns06 {min-height:auto; width:97.5%;} #header #logo {margin:0 0 30px 0; width:75%; max-width:435px;} #header h3 {margin:0 0 0 0;} } /* menu */ #menu {background:url(../images/menu-bg.png) center center;} #menu-toggle {background:#111; color:#fff; text-transform:uppercase; text-decoration:none; display:block; line-height:1; padding:27px 20px; display:none;} #menu-toggle:before {content:" "; font-size:1px; margin:0 7px 0 0; display:inline-block; width:12px; height:6px; border-top:3px solid #fff; border-bottom:3px solid #fff;} #menu ul li {position:relative; float:left; } #menu ul li a {color:#282828; text-transform:uppercase; text-decoration:none; display:block; line-height:1; padding:27px 20px; border-top:7px solid #fff; border-bottom:7px solid #fff;} #menu ul li:nth-child(1) a:hover, #menu ul li:nth-child(1).active a {border-bottom:7px solid #333;} #menu ul li:nth-child(2) a:hover, #menu ul li:nth-child(2).active a {border-bottom:7px solid #333;} #menu ul li:nth-child(3) a:hover, #menu ul li:nth-child(3).active a {border-bottom:7px solid #3a3a8e;} #menu ul li:nth-child(4) a:hover, #menu ul li:nth-child(4).active a {border-bottom:7px solid #c31f1f;} #menu ul li:nth-child(5) a:hover, #menu ul li:nth-child(5).active a {border-bottom:7px solid #f89520;} #menu ul li:nth-child(6) {float:right;} #menu ul li:nth-child(6) a {color:#fff; border-top:7px solid #f89520; border-bottom:7px solid #f89520;} #menu ul li:nth-child(6) a:hover, #menu ul li:nth-child(6).active a {background:#da841f; border-top:7px solid #da841f; border-bottom:7px solid #da841f;} #menu ul ul {display:none;} @media only screen and ( max-width:1040px ) { #menu {background:#f89520; margin:0px; width:100%;} #menu .columns12 {margin:0px; width:100%;} #menu-toggle {display:block;} #menu ul {display:none;} #menu ul li {float:left!important; width:100%;} #menu ul li a {color:#fff; border:0px!important; padding:0px; padding:20px 20px;} #menu ul li a:hover {border:0px!important; background:#da841f!important;} #menu ul ul {background:#c6771a;} #menu ul ul li a {background:#c6771a;} #menu ul ul li a:hover {background:#ae6714!important;} } /* home trip */ #home-trio {padding:60px 0 90px 0;} #home-trio img {display:inline-block; margin:0 0 15px 0;} #home-trio h2 {font-weight:300; font-size:26px; margin:0 0 17px 0;} #home-trio p {font-weight:300; font-size:18px; margin:0 0 25px 0;} @media only screen and ( max-width:700px ) { #home-trio .mobile12 {padding:0 0 40px 0;} } /* content */ #content {} #content-left {text-align:left; background:#303030; z-index:1; padding-bottom:50px;} #content-left h2 {background:#1f1f1f; display:block; height:65px; line-height:65px; margin:-65px 0 0 0; padding:0 20px; font-size:24px; font-weight:400; color:#fff;} #content-left li {width:100%; border-bottom:1px solid #4d4d4d; position:relative;} #content-left li:hover {background:#404040;} #content-left li.active {background:#404040;} #content-left a {display:block; width:100%; color:#fff; text-decoration:none; padding:8px 35px 8px 20px; position:relative;} #content-left a:after {content:">"; position:absolute; right:20px; top:8px; color:#afafaf;} @media only screen and ( max-width:1040px ) { #content-left {display:none!important;} #content-right {width:97.5%;} } #content-right {text-align:left; padding-bottom:50px;} #content-right h1 {font-weight:300; font-size:32px; margin:50px 0 30px 0;} #content-right h2 {font-weight:700; font-size:19px; margin:0 0 20px 0;} #content-right p {font-weight:400; font-size:16px; margin:0 0 20px 0;} #content-right a {color:#282828;} #content-right ul {font-weight:400; font-size:16px; margin:0 0 20px 30px;} #content-right ol {font-weight:400; font-size:16px; margin:0 0 20px 30px;} #content-right ul li {list-style-type:disc;} #content-right ol li {list-style-type:decimal;} #content-right table {background:#fff; border-top:4px solid #3b6732; border-bottom:4px solid #f89520; margin:0 0 20px 0;} #content-right table tr td {padding:7px 15px;} #content-right table tr:nth-child(odd) {background:#f2f2f2;} form#contactForm {width:100%; position:relative; float:left;} form#contactForm fieldset {border:1px solid #b6b6b6; padding:30px; margin:0px;} form#contactForm legend {color:#282828; font-size:24px; font-weight:300; padding:0 10px; margin:0 0 0 -10px;} form#contactForm textarea, form#contactForm input[type="text"] {font-size:19px; font-weight:300; padding:8px 10px; height:auto; border:0px; font-family:'Open Sans', sans-serif; color:#2d371f; margin:0 0 10px 0;; width:100%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} form#contactForm input[type="checkbox"] {position:relative; float:left; display:inline-block;} form#contactForm .fieldset2 label {position:relative; float:left; display:inline-block; width:43%; font-size:19px; font-weight:300; margin:-3px 0 42px 0;} input#ServicesRequired2, input#ServicesRequired4, input#ServicesRequired6, input#ServicesRequired8 {clear:left;} form#contactForm .fieldset1 {width:49%; position:relative; float:left; margin:0 1% 15px 0;} form#contactForm .fieldset2 {width:49%; position:relative; float:left; margin:0 0 15px 1%;} form#contactForm .fieldset3 {width:100%; position:relative; float:left; margin:0 0 20px 0;} form#contactForm input[type="submit"] {background:#f89520; border:0px; text-shadow:none; font-size:19px; text-transform:uppercase; font-weight:300; font-family:'Open Sans', sans-serif; padding:9px 50px; position:relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} @media only screen and ( max-width:1200px ) { form#contactForm .fieldset1, form#contactForm .fieldset2, form#contactForm .fieldset3 {width:100%; position:relative; float:left; margin:0 0 20px 0;} form#contactForm input[type="checkbox"] {width:6%; display:inline-block; margin:0 1% 20px 0;} form#contactForm .fieldset2 label {width:93%; margin:-7px 0 27px 0;;} } /* buttons */ .button {display:inline-block; font-size:19px; text-decoration:none; font-weight:400; line-height:55px; padding:0 60px; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;} .button.bg-blue:hover {background:#2e2e72;} .button.bg-red:hover {background:#9c1919;} .button.bg-yellow:hover {background:#c6771a;} @media only screen and ( max-width:960px ) { .button {font-size:15px; line-height:50px; padding:0 35px;} } /* hr */ #hr {background:url(../images/hr_bg.png); margin-top:-49px;} #hr img {display:block; margin:0 auto;} /* accreditations */ #accreditations {padding:45px 0 0 0;} #accreditation-logos img {margin:0 20px 20px 20px;} #accreditations p {font-size:14px; color:#575757; margin:0 0 30px 0;} #accreditations ul {margin:0 0 20px 0;} #accreditations li {display:inline-block;} #accreditations li a {text-decoration:none; font-size:14px; color:#575757; margin:0 22% 30px 22%; padding:0 15px; border-left:1px solid #575757;} #accreditations li:first-child a {border:none;} #accreditations li a:hover {text-decoration:underline} @media only screen and ( max-width:960px ) { #accreditation-logos img {height:70px; width:auto;} } @media only screen and ( max-width:700px ) { #accreditations p {margin:0 0 30px 0;} #accreditations li {display:block; margin:0 0 10px 0;} #accreditations li a {border:none;} } /* footer */ #footer {padding:30px 0;} #footer p {margin:0 0 10px 0;} /* page branding */ /* Civil Engineering */ .catid-8 #banner img {border-bottom:65px solid #3a3a8e; display:block;} @media only screen and ( max-width:1040px ) { .catid-8 #banner img {border-bottom:10px solid #3a3a8e;} } /* General Building */ .catid-9 #banner img {border-bottom:65px solid #c31f1f; display:block;} @media only screen and ( max-width:1040px ) { .catid-9 #banner img {border-bottom:10px solid #c31f1f;} } /* Plant Hire */ .catid-10 #banner img {border-bottom:65px solid #f89520; display:block;} @media only screen and ( max-width:1040px ) { .catid-10 #banner img {border-bottom:10px solid #f89520;} }