/* @override http://katnichdodd.bmdserver.com.au/css/style.css */ /* HTML5 Boilerplate - cos its awesomesaucesome */ 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%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } 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, serif; _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 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } 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; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } 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, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* typekit stuff + hide fout .wf-loading nav a, .wf-loading p {visibility: hidden} nav a, a.tel, .tagline, .tagline2, h1, h2, .mobileNav ul a, #showNav, h3, .thumb, .staffBox .links, .viewAll, .forms, .mobHeader p {font-family: "ff-basic-gothic-web-pro",sans-serif;} p, li, .f2 {font-family: "myriad-pro",sans-serif;}*/ /* stuff that uses the sprite file (playing with 2x assets) */ .thumb > span, ul li, .viewAll, .thumb .slide > a, .slidethumb .next, .slidethumb .prev, .downloads li a, .pdf, .forms {background: url(../images/sprites.png) no-repeat;} /* general format style */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body {background:#4a5457; color:#4a5457; min-height: 100%; font-size:0.813em;} .clear {clear:both;} .wrapper {width:960px; margin:0 auto; height:100%; position: relative;} p, h1, h2, h3, ul {margin:0 0 1em 0; line-height: 1.5em;} a, a:visited {color:#4a5457; -webkit-transition:0.2s ease all;} a:hover {color:#56a419;} h1 {color:#56a419; font-weight: 200; margin-bottom:20px;} h2 {color:#56a419; font-weight: 200; margin-bottom:10px;} h3 {color:#56a419; font-weight: 200; margin-bottom:10px;} .projectTitle {border-top:1px solid #e3e4e6; padding-top:10px;} ul {padding:0; list-style: none;} ul li {background-position:-490px 8px; margin:0; padding:3px 0 2px 1.25em; border-bottom:1px solid #e4e5e6;} ul li a {display:block} .mobileNav {display:none} header {background:#ffffff; text-align: left;border-bottom: 1px solid #c7c7c7;} header > .wrapper { height:140px} header .logo {position: relative; top:30px; display:inline-block;} .no-svg header .logo img {display:none;} .no-svg header > .wrapper > a {position:relative;top:30px; display:block; width:211px; height:78px;background:url(../images/logo.png);} nav {position: absolute; right:1%; bottom:31px; font-size:1em;} nav ul, nav li {margin:0; list-style: none; padding:0; background:0; border:0;} nav li {float:left;} nav a, nav a:visited {text-transform: uppercase; text-decoration:none; color:#828282; margin:0 0.75em} nav a:hover, nav a.active{color:#56a419;} nav a.last, nav a.last:visited {color:#56a419;} nav a.last:hover {color:#828282;} .banner {display:block;height:258px; background-position: center center; position: relative; overflow: hidden; background-size:cover;} .banner .pattern {display:block; width:607px; height:258px; position: absolute; top:0; left:50%; background:url(../images/overlayPattern.png);} .banner .left {margin-left:-1518px} .banner .right {margin-left:910px} .banner.staff {height:440px;} .over, .over.pattern {position: absolute; top:0; left:50%; margin-left:-1878px; z-index: 1000;} .staff .over {background:url(/images/overlayStaff.png) top center repeat; margin:0; top:0; left:0; width:100%; height:440px;} .overHome {position:absolute; top:0; left:0;display:block; width:100%; height:440px; background:url(../images/overlay.png) center center; z-index: 1000;} .overBig {position:absolute; top:0; left:0;display:block; width:100%; height:440px; background:url(../images/overlayBig.png) center center; z-index: 1000;} .overInside {position:absolute; top:0; left:0;display:block; width:100%; height:258px; background:url(../images/overlayInside.png) center center; z-index: 1000;} .main {background:#d6d8d9;border-top: 1px solid #c7c7c7;} .main.col2 > .wrapper {padding:0;} .main.white > .wrapper {background:#fff;} .main.white .content {display:block; width:830px; float:left; padding:40px 90px;} .main.white .content.hasBrochure {padding: 40px 30px 40px 90px;} .content {padding:20px 0px 25px 0;} .main.col2 {} .main.col2 .content {padding:30px;width:730px; } .main.col2 .content.staffDetails {width:} .main.col2 .aside {width:230px;float:left; display:block;padding:30px; background:url(../images/shadow01.png) right 0 no-repeat;min-height:300px;} .col2 .aside h2 {color:#555; line-height: 2em;} .subnav li {padding:0;border:0; background:0; font-size:1em;} .subnav a {text-decoration: none; color:#777777;} .subnav a:hover, .subnav a.active {color:#56a419} .main.gray .content > h1 {padding-left:20px;} .thumb {display:block; background:#fff; margin:1%; float:left; width:31%; color:#4a5457; text-decoration: none; font-weight: 200; max-width: 300px; border:3px solid #fff;min-height: 252px;} .thumb > img { max-width: 100%; } .thumb > p {margin:0; padding:0 0.25em 0 1em;} .thumb > p.design {margin-bottom:1em;} .thumb > span, .thumb .slide > a.textLink {font-size:1.2em; height:60px; line-height: 22px; padding:19px 20px 20px 20px; display:block; background-position: 260px 20px; text-decoration: none;/*letter-spacing: -1px;*/} .thumb > a {display:none;} .thumb > a:first-child {display:block;width: auto;} .projectList {position: relative;} .projectList .return {position: absolute; top:20px; right:20px; font-size:0.9em; text-decoration: none; padding:10px 0 10px 18px; background:url(../images/sprites.png) 0 -91px no-repeat; display:block} .projectList .thumb {/*min-height: 298px;*/min-height: 278px} .projectList .thumb .imgLink {background-repeat: no-repeat; position: relative;} a.imgLink:before {position: absolute; content:''; bottom:0; left:0; display:block; width:22px; height:22px; background:url(../images/mag.png) no-repeat; opacity: 0.75; -webkit-transition:0.2s ease opacity; -moz-transition:0.2s ease opacity; -o-transition:0.2s ease opacity; transition:0.2s ease opacity;} a.imgLink:hover:before {opacity: 1;} footer a, footer a:visited {color:#c9cccd; text-decoration: none; } footer {color:#c9cccd;font-size:0.875em;} .tagline {color:#56a419; font-size:2.6em; font-weight: 200; /*letter-spacing: -2px;*/ margin:0.5em 0; line-height: 1.1em;float:left;} .tagline2 {color:#fff; font-size:1.65em; font-weight: 200; /*letter-spacing: -1px;*/ margin:28px 82px; line-height: 1.3em; display:block; width:370px; float:left;} .contactDetails {position: absolute; top:60px; right:20px; } footer.f2 {border-top:1px solid #616a6d; margin-bottom:1em; padding-bottom:1em; font-size: 1em;} footer .wrapper {padding:1em 20px} footer.f2 a, footer.f2 a:link {margin-left:1em; padding-left:1em; border-left:1px solid #c9cccd;} footer.f2 .rightLinks a:first-child {border-left:0;margin:0; padding:0;} footer.f2 .rightLinks a:hover {color:#56A419} a.forms, a.forms:link, a.forms:visited {position: absolute; top:42px; right:41px; border:0; margin:0; padding:0 30px 0 0; font-size:1.5em; color:#56A419; /*letter-spacing: -1px;*/ font-weight: 200; background-position: 171px 6px;} a.forms:hover {color:#fff} .centerLinks {position: relative; display:block; text-align: left;} .centerLinks a, .centerLinks a:link {text-decoration: underline;} .rightLinks {position: absolute; top:1em; left:325px;} .rightLinks a span {border-bottom:1px solid #687072;} /* homepage */ .slidethumb span {font-size:1em} .homeSlides {height:440px; width:100%; display:block; position: relative; overflow: hidden} /*.homeSlides > div {height:440px; width:100%; display:block; background-position: center center;}*/ .main.darkgray {background:#4a5457; color:#fff; border-bottom:1px solid #616a6d; padding:40px 0;} .main.darkgray .content {width:600px;padding:0 20px;float:left;} .main.darkgray h2 {color:#fff;line-height: 1em;} .downloads {position:relative; display:block; background:#e4e5e6; width:300px; float:right; margin-right:20px} .downloads h3 {color:#4a5457; text-decoration: none; padding:15px 0 0 20px; margin:0 0 15px 0;} .downloads ul {border-top:1px solid #bbbbbb; border-bottom:1px solid #bbbbbb; background:#d6d8d9;} .downloads li {background:0; border:0; display:block; list-style: none; margin:0; padding:0;} .downloads li a {font-size:0.875em; padding:5px 10px 5px 30px; border-bottom: 0; border-top:1px solid #e4e5e6; background-position: -475px 11px;color:#4a5457; text-decoration: none;} .downloads li:first-child a {border-top:0;} .downloads li a:hover {background-color:#e4e4e4;} .viewAll {position: absolute; top:2px; right:20px; font-size:0.750em; text-decoration:none; background-position:77px 18px; padding:20px 25px 20px 20px; text-transform: uppercase;} .slidethumb {position: relative; overflow: hidden} .slidethumb .slides_container {width:291px; height:244px; } .slidethumb .slides_container div { width:291px; height:244px; display:block;overflow: hidden; } .slidethumb .next, .slidethumb .prev {position: absolute; top:70px; display:block; width:62px; height:48px; z-index: 1000; overflow: hidden; text-indent: 100%; } .slidethumb .next { background-position: 30px -200px;right:-35px; opacity:0;padding-left:30px;} .slidethumb .prev { background-position: 0 -300px;left:-35px; opacity:0; padding-right:30px;} .slidethumb:hover .next {right:-7px;opacity:0.9;} .slidethumb:hover .prev{left:-7px;opacity:0.9;} .slidethumb .next:hover {opacity:1;} .slidethumb .prev:hover{opacity:1;} .textLink {} .imgLink, .imgLink_home {width:291px; height:186px; display:block; position: relative; background-position: center center !important; overflow: hidden; text-indent: -999em; margin-bottom:1em;} .imgLink_home {margin-bottom:0;} .slides_container .imgLink, .slides_container .v {margin-bottom: 0;} #slides {position: relative;} #slides .slides_container {width:100%; height:440px; } #slides .slides_container div {background-size:cover; background-position: center center; width:100%; height:440px; display:block;overflow: hidden; } /* inside page */ .profileImage {float:right; margin: 0 0 10px 10px} .main.white .content.wide {width:100%;} .r {float:right; margin-bottom:2em;} .c {float:left; width: 630px; display: block} .staffDetails .r { min-width: 178px;} .main.staff .content {width:100%;} .staffBox {display:block; width:140px; height:210px; float:left; margin:0 15px 15px 0;} .staffBox .img {display:block;} .staffBox .title {font-weight: bold; margin:4px 0 2px 0;} .staffBox .links {display:block; font-size:0.875em; text-transform: uppercase;} .staffBox .links a, .staffBox .links a:visited {text-decoration: none; color:#828282;} .staffBox .links a:hover {color:#56a419} .staffDetails .c {width:470px;} .staffDetails .r h2 {margin:7px 0; color:#4a5457} .staffDetails .r p {margin:0 0 0.5em 0; font-size:1em; color:#4a5457} .staffDetails a, a.pdf {color:#4a5457; text-decoration: none;} .staffDetails a:hover, a.pdf:hover {color:#56a419} .staffDetails .r p span { color:#777777; display:inline-block; width:15px;} a.pdf {background-position: -334px 8px; background-repeat: no-repeat; padding:5px 35px 5px 15px; background-color: #e5e5e5; display: inline-block; border: 1px solid #c9c9c9; line-height: 1.2em;} a.pdf.brochure { background-position: -352px 14px; margin-top: 54px; } .main.contact .wrapper {min-height: 450px;} #map {display:block; margin:0; padding:0; margin-top:15px; width: 585px; height: 380px; position:absolute; top:20px; right:50px;} .mobOnly {display:none;} @media (min-width:768px) and (max-width:979px){ header > .wrapper {height: 160px;} header .logo {left: 30px;} nav {position: relative; right:auto; bottom:-20px;text-align: center;} nav li {float:none; display:inline-block; padding:10px 5px; margin:0;} nav li a {padding:10px 5px;margin:0;} .wrapper {width:760px;} .slidethumb .slides_container, .slidethumb .slides_container div {width:100%;height:206px} .imgLink {width:229px; height:145px;} .slidethumb .slides_container div img {height:146px;} .main.darkgray .content {width:440px;} .main.white .content.hasBrochure, .main.white .content {padding:30px; width:100%;} .main.col2 .content {width:530px;} .thumb {min-height:212px} /* .thumb > span, .thumb .slide > a.textLink {font-size: 0.875em; background-position: 200px 20px;}*/ .thumb > span, .thumb .slide > a.textLink {background-position: 200px 20px;} .projectList .thumb { min-height: 257px;} .c, .r {width: 100%; float:none; clear:both;} footer.f2 a.forms, footer.f2 a.forms:link {display:block; float:none; position: relative; top:10px; width:400px; margin:0 0 1em 0; left:0; text-align: left;} .centerLinks {display:block; float:left; margin:0; top:1em; left:0px;} .rightLinks {display:block; float:right; margin:0; position: relative; text-align: right; left:auto} .tagline {font-size:2em} .tagline2 {font-size:1.25em} a.forms, a.forms:link {font-size:1.3em; right:12px;background-position: 136px 3px;} a.pdf.brochure {margin-top:0;} #map {width:455px; overflow: hidden;} #map iframe {position: absolute; right:0;} .slidethumb .next {right:-7px;opacity:1;} .slidethumb .prev {left:-7px;opacity:1;} } @media (min-width:481px) and (max-width:767px){ #map {position:static;width: 100%;overflow:hidden;} .wrapper {width:100%;} .slidethumb .slides_container {width:100%;} /* .thumb > span, .thumb .slide > a.textLink {font-size: 0.875em;}*/ .main > .wrapper {padding:1em;} header .logo {margin:0px auto; display:block;} nav {position: relative; right:auto; bottom:auto;} .downloads {width:100%; float:none; clear:both;} .content {width:100% !important; float:none !important;} .banner {height:100px;} .banner .pattern {display:none; } .banner.staff, .homeSlides, #slides .slides_container, #slides .slides_container div {height:200px;} .homeSlides .over {display:none;} .over {height:100px; margin-left:-352px} .main.white .content.hasBrochure, .main.white .content {padding:10px; } .main.col2 .aside {background:#ebebeb; width:100%; float:none; padding:10px; min-height: 10px;} .col2 .aside h2 {line-height: 1em; margin:10px 0;} .overHome, .overBig {background-size:auto 200px; background-position: center top} .overInside {background-size:auto 100px; background-position: center top} header, header > .wrapper {height: auto} nav {position: relative; float:none; padding:40px 0 10px 0; text-align: center;} nav li {float:none; display:inline-block; padding:10px 5px; margin:0;} nav li a {padding:10px 5px;margin:0;} .subnav li {display:block;float:left; padding:0 0.5em 0 0; margin:0 0.5em 0 0; border-right:1px solid #ccc; } .subnav li.break {clear:both;float:none; border:0; padding:0; height: 0;} .subnav li:last-child {padding-right:0; border:0;} .thumb {font-size:0.875em; min-height:1px;} .thumb > img {height: auto; padding: 10px;} .thumb > span {height: auto;} .home .thumb > span {background:0; padding: 0 10px 10px 10px;} .tagline, .tagline2 {display:block; float:none; margin:0; padding:14px 0;} .projectSlide {display:block;} #slidesT {display:none;} .contactDetails {position: relative; top:auto; right:auto; display:block; text-align: center;} footer.f2 {text-align: center} footer.f2 a {margin-left:0.5em; padding-left:0.5em} .c, .r, .staffDetails .c {width: 100%; float:none; clear:both;} footer.f2 a.forms, footer.f2 a.forms:link {display:block; float:none; position: relative; top:10px; width:400px; margin:0 0 1em 0; left:0; text-align: left;} .centerLinks {display:block; float:left; margin:0; top:1em; left:0px;} .rightLinks {display:block; float:right; margin:0; position: relative; text-align: right; left:auto} a.forms, a.forms:link {position: relative; left:auto; top:auto; right:auto; margin-bottom:1em; display:block;} a.pdf.brochure {margin-top:0;} } @media (min-width:100px) and (max-width:480px){ #map {display:block;position:static;width:100%;overflow:hidden;} .main.white .content {padding:1em; width:100%;} .main.col2 .aside {width:100%; float:none; padding:1em; min-height: 1px;} .thumb > span, .thumb .slide > a.textLink{font-size: 1.3em; height:50px; line-height: 50px; background-position: 260px 15px; padding:0 15px} .thumb {width:100%; max-width:297px; margin:10px auto; display:block; float:none; min-height: 1px;} .thumb > img, #slidesT {display:none;} .homeSlides > div {height: 100%;} .main.darkgray .content {width:100%; min-width:300px;} .thumb {font-size:1em;} .projectList .thumb {min-height: 0; height:auto;} .wrapper {width:100%;} .mobOnly {display:block;} .mobOff, .homeSlides, nav {display:none;} header {border:0;} header > .wrapper > a, .no-svg header > .wrapper > a{top:0; margin:7px auto 0 auto; padding:12px 0 5px 0; display:block; text-align: center;} header .logo {top:0; margin:0 auto; } .home .content {padding:0;} .main.col2 .aside.stafflist {display: none} /*.main.home {background:#4A5457; border:0;} .main.home > .wrapper {padding:0 1em;}*/ .mobHeader {text-align: center; } .mobHeader h3 {padding:0px 0 7px 0; background:#fff; display: block; margin:0;} .mobHeader p {color:#fff;font-weight: 200; padding:10px 0 0px 0; margin:0; /*letter-spacing: -1px;*/line-height: 1.2em;} .mobHeader > img {width:100%; height: auto} a.tel { color:#fff; font-weight: bold; padding:10px 20px; border-radius: 5px;background: #56a419; position: relative; box-shadow: 0px 0px 10px rgba(0,0,0,0.5), 0px 0px 3px #70ce27 inset; text-decoration: none; margin:10px auto 20px auto; display:block; width:280px; text-align: left; background: -moz-linear-gradient(left, #56a419 0%, #70ce27 100%); /*letter-spacing: -1px;*/ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#56a419), color-stop(100%,#70ce27)); background: -webkit-linear-gradient(left, #56a419 0%,#70ce27 100%); background: -o-linear-gradient(left, #56a419 0%,#70ce27 100%); background: -ms-linear-gradient(left, #56a419 0%,#70ce27 100%); background: linear-gradient(to right, #56a419 0%,#70ce27 100%);} a.tel span {position: absolute; top:8px; right:10px; background:#70ce27; border-radius: 50%; width:25px; height:25px; line-height: 25px; text-align: center; box-shadow: 0px 0px 10px rgba(0,0,0,0.3), 0px 0px 3px #95e53a inset; font-size:13px; } a.tel span:after {position: absolute; top:8px; left:8px; border-style: solid; border-width:5px 10px; border-color: transparent transparent transparent #fff; display:block; content: ''} .tagline {font-size:2em} .tagline2 {font-size:1.25em; width:auto;margin: 0;} a.forms, a.forms:link {display:none;} .centerLinks {display:block; float:none;} .rightLinks {display:block; float:none; text-align: left; position: relative; left:0px;right:auto; top:0.5em;} .mobNavHeader {display:block; background:#4a5457; height:40px; color:#ccc; line-height:40px; text-align: left;} .frame {display:block; position: relative; overflow: hidden; width:100%; min-height: 100%;} .mobileNav, .container {-webkit-transform: translateX(0%); -webkit-transition:0.3s ease -webkit-transform; -moz-transform: translateX(0%); -moz-transition:0.3s ease -moz-transform; -o-transform: translateX(0%); -o-transition:0.3s ease -o-transform; -ms-transform: translateX(0%); -ms-transition:0.3s ease -ms-transform; transform: translateX(0%); transition:0.3s ease transform; } .mobileNav{ display:block; width:100%; position: absolute; top:0; left:0; z-index: 90;} .container { display:block; background:#4a5457; position: relative; top:0; left:0; z-index: 100;overflow: hidden;} .left {-webkit-transform: translateX(-75%);-moz-transform: translateX(-75%);-o-transform: translateX(-75%);-ms-transform: translateX(-75%);transform: translateX(-75%)} .right {-webkit-transform: translateX(75%);-moz-transform: translateX(75%);-o-transform: translateX(75%);-ms-transform: translateX(75%);transform: translateX(75%)} #showNav {display:inline-block; height:38px; line-height:38px; padding-left:43px; background:#4a5457; color:#d3d3d3; text-decoration: none;} #showNav span { content:''; color:#fff; background:#d3d3d3; width:24px; height:4px; display:block; position:absolute; top:9px; left:10px;} #showNav span:before, #showNav span:after {content:''; position: absolute; top:7px; left:0;background:#d3d3d3; width:24px; height:4px;display:block;} #showNav span:after {top:14px;} .mobileNav {} .mobileNav ul {margin-top:40px; border-top:1px solid #8e9596; } .mobileNav ul li {border-bottom:1px solid #8e9596; background:0; padding:0;} .mobileNav ul li a {color:#c0c0c0; text-decoration: none; padding:10px 10px 10px 30px;background: #5e6769; text-transform: uppercase; position: relative; background: -moz-linear-gradient(top, #5e6769 0%, #4a5457 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e6769), color-stop(100%,#4a5457)); background: -webkit-linear-gradient(top, #5e6769 0%,#4a5457 100%); background: -o-linear-gradient(top, #5e6769 0%,#4a5457 100%); background: -ms-linear-gradient(top, #5e6769 0%,#4a5457 100%); background: linear-gradient(to bottom, #5e6769 0%,#4a5457 100%);} .main.white .content.wide {padding:1em;} a.pdf.brochure {margin-top:1em;} .staffBox {margin:0 4px 15px 0} .staffBox:last-child {clear:left;} .r, .c, .staffDetails .c {width:100%; float:none;} .banner, .banner.staff { height: 100px;} .overInside, .overBig { height: 100px;background-size: cover;} } .mobileNav ul li a:before {position: absolute; top:15px; left:10px; content: ''; border-style: solid; border-width: 6px 12px; border-color: transparent transparent transparent #fff;} /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#fff;} #colorbox{} #cboxContent{ overflow:visible;} .cboxIframe{background:#fff;} #cboxError{padding:50px;} #cboxLoadedContent{} #cboxLoadingGraphic{background:url(/images/loading.gif) no-repeat center center;} #cboxLoadingOverlay{background:#ccc;} #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} #cboxCurrent{color: #333;position: absolute;bottom: 0;left: 0;background: white;padding: 3px;font-size: 0.75em;} #cboxSlideshow, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(/images/controls.png) no-repeat 0 0;} #cboxPrevious, #cboxNext {background:url(../images/sprites.png) no-repeat;position: absolute; top: 50%; margin-top:-24px; display: block; width: 32px; height: 48px; z-index: 1000; overflow: hidden; text-indent: 100%;} #cboxPrevious{background-position:0 -300px; left:-3px;} #cboxNext{background-position:0 -200px; right:-3px;} #cboxClose{border-radius:0 0 0 50%; display:block; width: 19px; height: 22px; background-position:-50px 0px; right:0; top:0;} #cboxClose:hover{background-position:-50px -25px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;} .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;} .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;} .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;} #colorbox, .cboxPhoto {border-radius:5px; box-shadow: 0px 2px 2px rgba(0,0,0,0.2)}