@charset "UTF-8";
/* CSS cable locators */

@font-face {
	font-family: 'ProximaNova';

src: url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Regular/ProximaNova-Regular.eot');	
	src: url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Regular/ProximaNova-Regular.ttf') format('truetype'),url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Regular/ProximaNova-Regular.woff') format('woff'),url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-Regular/ProximaNova-Regular.otf') format('opentype'),		local('ProximaNova-Regular');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'ProximaNova';

src: url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-bold/ProximaNova-bold.eot');	
	src: url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-bold/ProximaNova-bold.ttf') format('truetype'),url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-bold/ProximaNova-bold.woff') format('woff'),url('http://fonts.orcas.co.nz/Content/Fonts/ProximaNova-bold/ProximaNova-bold.otf') format('opentype'),		local('ProximaNova-bold');
	font-weight: 700;
	font-style: normal;
}

html.authed { padding-top: 100px;}
html, body { padding: 0; margin:0; font-family: 'ProximaNova', sans-serif; font-size: 14px; color: #000;}

h1 { text-transform: uppercase; font-size: 35px; color: #00aceb; letter-spacing:1px;  padding: 0; margin: 0; line-height: 36px;}
h2 { text-transform: uppercase; font-size: 25px; color: #00aceb; letter-spacing:1px; padding: 0; margin: 0; line-height:26px;}
h3 { text-transform: uppercase; font-size: 25px; color: #000; letter-spacing:1px; padding: 0; margin: 0; line-height:26px;}
p { line-height: 20px; padding: 0; margin: 0;}
a { text-decoration: none; color: #00aceb;}
a:hover { text-decoration: underline;}

.container { max-width: 960px;}

a img { border: none;}
.image-viewer { overflow: hidden;}

#header-extend { background-image: url('../images/header_shadow.jpg'); background-repeat: repeat-x; background-position: left bottom; margin-bottom: 30px; height: 210px;}
#header { max-width: 960px; position: relative; margin: auto;}

#logo { float: left; padding-top: 10px; width: 350px; height: 80px; margin-top: 50px;}
#request-button { background-color: #00aceb; min-height: 25px; float: right; margin-top: 20px;}
#request-button a { display: block; padding: 0 20px; color: #fff; text-transform: uppercase; letter-spacing: 1px; line-height: 25px;}
#request-button a:hover { background-color: #666; text-decoration: none;}

#header #menu { height: 20px; float: right; padding-top: 30px; display: none;}
ul#main { padding: 0; margin: 0;}
ul#main li { list-style: none; padding: 0; margin: 0; float: left;}
ul#main li a { text-transform: uppercase; font-size: 14px; color: #000;font-weight: 400; text-decoration: none;letter-spacing: 1px; padding: 0 30px; line-height: 20px;}
ul#main li#contact a { padding-right: 0;} 
ul#main li a:hover, ul#main li.sel a { color: #00aceb; text-decoration: none;}

#home-banner {max-width: 960px;margin: -24px auto 0 auto; overflow: hidden;}
#home-squares { max-width: 990px;margin: auto; }
#content { max-width: 960px; margin: 40px auto;}

#home-slider { max-width: 960px; height: 330px; background-image:url('../images/banner_shadow_bottom.jpg'); background-repeat: no-repeat; background-position: left bottom; position:relative; z-index:1;}
#home-slider .shadow { max-width: 960px; height: 24px; background-image:url('../images/banner_shadow.png'); background-repeat: repeat-x; position: absolute; left: 0; top: 0; z-index:10;}
#home-slider .item { max-width: 960px; height: 300px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 2;}
#home-slider .item .text { background-image:url('../images/opaque_white.png'); background-repeat: repeat; width: 300px; text-transform: uppercase; font-size: 37px; color: #333; letter-spacing: 2px; line-height: 37px; padding: 20px; font-weight: bold;position: absolute; right: 0; top: 50px;}

.home-squares { }
.home-squares .square { height: 180px; float: left; margin-bottom: 10px;}
.home-squares .square a { display: table;  height: 180px; position: relative;}
.home-squares .square a:hover { text-decoration: none;}
.home-squares .square a .title { display: table-cell; vertical-align: middle; z-index: 20; font-weight: bold; color: #fff; text-align: center; height: 180px; width: 220px; text-transform: uppercase; line-height: 28px; font-size: 25px;background-image:url('../images/opaque_black.png'); background-repeat: repeat; letter-spacing: 3px;}
.home-squares .square a:hover .title {background-image:url('../images/opaque_blue.png'); background-repeat: repeat; text-decoration: none;}

.team { max-width: 960px;}
.team .item { max-width: 960px; border-bottom: solid 1px #ccc; padding-bottom: 30px; margin-bottom: 20px;}
.team .item .image .image-frame { width: 270px; height: 270px;  z-index: 10;background-image:url('../images/team_frame.png'); background-repeat: no-repeat; position: absolute; left: 0; top: 0;}
.team .item .image { position: relative; z-index: 1; width: 270px; height: 270px; float: left;}
.team .item .info { max-width: 650px; float: right;}
.team .item .info .name {text-transform: uppercase; font-size: 25px; color: #00aceb; letter-spacing:1px;}
.team .item .info .position {text-transform: uppercase; font-size: 18px; color: #00aceb; letter-spacing:1px;}
.team .item .info .description { height: 200px; overflow: hidden; }
.team .item .info .description p { margin: 0; padding: 0;}

.team .item .expand { float: right; cursor: pointer; display: block; padding-right: 18px; background-image:url('../images/read_less.png'); background-repeat: no-repeat; background-position: right center; text-transform: uppercase; }
.team .item .expand:hover { text-decoration: none; }
.team .item .collapse { float: right; cursor: pointer; display: block; padding-right: 18px; background-image: url('../images/read_less.png'); background-repeat: no-repeat; background-position: right center; text-transform: uppercase; }
.team .item .collapse:hover { text-decoration: none;}
.team .seperator { height: 60px; clear: left; background-color: red; width: 960px;}

.service-grid { max-width: 960px;}
.service-grid .item { max-width: 960px; margin: 20px 0; }
.service-grid .item .left { float: left;  min-height: 200px;}
.service-grid .item .right { float: right;  min-height: 200px; overflow: hidden;}
.service-grid .item .clear { clear: both;}

/*MOBILE MENU MOBILE MENU MOBILE MENU!!*/
#header-outer-mobile { background-color: #fff;}
#header-outer-mobile #header { height: 150px;}
#header-outer-mobile #logo { height: 150px; padding: 50px 0 0 0;}
#header-outer-mobile #logo table { margin-left: auto; margin-right: auto;}
#header-outer-mobile #logo a span { display: none;}

#header-outer-mobile #menu-container .container { padding: 0;}
#header-outer-mobile #menu-container #menu { float: none; padding: 20px 40px; }
#header-outer-mobile #menu-container #menu ul { padding: 0; margin: 0; list-style: none;}
#header-outer-mobile #menu-container #menu ul li { line-height: 20px; list-style: none; position: static; float: none;}
#header-outer-mobile #menu-container #menu ul li a { color: #000; font-size: 15px; }
#header-outer-mobile #menu-container #menu ul li a:hover,
#header-outer-mobile #menu-container #menu ul li.sel a { text-decoration: none; color: #00aceb; }

#header-outer-mobile #menu-container { position: fixed; left:0; top: -140px; right: 0; z-index: 2000; background-color: #fff;}
#header-outer-mobile #menu-expander { height: 50px; cursor: pointer; display: block; margin: auto; background-color: #fff; padding: 0; border: solid 1px #00aceb; border-left: 0;  border-right: 0;}
#header-outer-mobile #menu-expander span { text-align: center !important; color: #00aceb; text-transform: uppercase; line-height: 50px; display: block;}





/*COLUMN LAYOUT*/
.layout-columns { max-width: 960px; }

.grid-col { float: left; display: inline;}
.layout-columns .col_1 { max-width: 960px; }



/* #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 <div class="row"> */
.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 <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
  
  
.faq-viewer { max-width: 600px;}
.faq-viewer .category .heading {text-transform: uppercase; font-weight: bold; font-size: 35px; color: #000; margin-bottom: 20px;letter-spacing:1px;}
.faq-viewer .category a.toggler { text-transform: uppercase;}
.faq-viewer .category a.toggler:hover { text-decoration: none; color: #000;}
.faq-viewer .category a.toggler.toggler-opened { color: #000; margin-bottom: 0; padding-bottom: 0;}
.faq-viewer .category .toggler-c.toggler-c-opened { color: #666;}
.faq-viewer .category .toggler-c.toggler-c-opened .answer p { color: #666; padding: 20px 0;}
 
#footer-extend { background-color: #00aceb;}
#footer { max-width: 960px; margin: auto; padding: 20px 0;}
#footer p { text-align: center; font-size: 13px; color: #fff;}
#footer a { color: #000;}
#footer a:hover { text-decoration: none; color: #666;}

.contact-form { width: 100%; }
.contact-form .field { width: 100%; margin: 5px 0;}
.contact-form .title { width: 100px; float: left;}
.contact-form .input { padding-left: 120px; width: 100%;}
.contact-form .input input { border: none; padding: 3px; background-color: #ececec; width: 100%;}
.contact-form .input textarea { border: none; padding: 3px; background-color: #ececec; width: 100%;}
.contact-form .field .input ul { padding: 0; margin: 0; }
.contact-form .field .input ul li { list-style: none; padding: 0; margin: 0; height: 25px; }
.contact-form .field .input ul li input { width: 25px; float: left; }
.contact-form .field .input ul li label { line-height: 25px;}
.contact-form .field.field_967 .title { padding-left: 120px; }
.contact-form .field.field_967 .input input { width: 230px;margin-top: -1px; }
.contact-form .submit { max-width: 460px; height: 80px;}
.contact-form .submit input { background-color: #666; color: #fff; text-align: center; text-transform: uppercase; font-weight: bold; letter-spacing:1px; font-size: 15px !important; height: 30px; padding: 5px 20px; border: none; display: block;float: right;}
.contact-form .submit input:hover { background-color: #00aceb; text-decoration: none;}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
#header-extend { height: 190px;}
 }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
#header-extend { height: 140px;}
#header #menu {display: block;}
#logo {margin-top: 10px;}
#header-outer-mobile {display: none;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
#header-extend { height: 140px;}
 }
}