@charset "UTF-8";
/* Ali-Frame */
/* modified 14/06/15 */


html, body { width: 100%; height: 100%; margin: 0px auto; }
body { background: #001616 url(../images/bg/background-1.jpg) no-repeat center; background-attachment:fixed; background-size:cover;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #414244; line-height: 130%; }
div.wrap { width: 100%; }
div.subwrap { max-width: 1080px; margin: 0px auto; }
#sitewrap { position: relative; margin: 70px auto; }
#leftcol  { width: 25%; padding: 30px 0 30px 3%; }
#rightcol { width: 66%; padding: 30px 3%; }
#nav { position: relative; }
#logo { padding: 25px 0px; }
#logo img { margin: 0px auto; }
#section { overflow:hidden }
#footer { padding: 5px 5%; margin-top: 35px; }

/* Colours */
.blue 	  { background: #194eb4; }
.sky 	  { background: #0598fe; }
.charcoal { background: #414244; }
.grey 	  { background: #cac8c1; }
.ghost 	  { background: #f6f6f5; }
.white 	  { background: #fff; }
.black 	  { background: #001616; }

/* Sizes */
.h0 { height: 0; text-indent: -5000px; }
.w25 { width: 25%; }
.w30 { width: 30%; margin-right: 5%; }
.w30+.w30+.w30 { margin-right: none; }
.w33 { width: 33%; }
.w48 { width: 48%; }
.w49 { width: 49%; }
.w50 { width: 50%; }
.w70 { width:70%; }
.left { float: left; }
.right { float: right; }
.clearing,.clearfix { clear: both; }
div.highlight { padding: 10px 20px; }

/* Main Fonts */
h1, div.page-header h1 { text-transform: uppercase; font-weight: 600; font-size: 18px; line-height: 110%; border-bottom:0!important; margin: 5px 0; padding: 0; }
div.blog div.item-image { margin-top: 25px; }
h2, h2 a { font-weight: 300; font-size: 36px; color: #0598fe; line-height: 110%; margin: 20px 0; text-decoration: none; letter-spacing: -1px; }
h3 { font-weight: 600; font-size: 23px; color: #194eb4; }
h4 { font-weight: 600; font-size: 21px; color: #414244; }
h5 { font-weight: 600; font-size: 19px; color: #414244; }
h6 { font-weight: 600; font-size: 17px; color: #414244; }
p, ul, ol { font-weight: 400; font-size: 14px; line-height: 170%; }
a { color: #0598fe; text-decoration: underline; }
a:hover { color: #194eb4; text-decoration: none; }

img { display:block; border: 0; max-width:100%; height: auto; }

/* Navigation */
#nav h3 { display: none; padding: 12px 35px; color:#0598fe; text-transform: uppercase; text-align: right; } /* hide on desktop */
#nav ul { margin: 0px; padding: 0px; position: relative; text-align: right;}
#nav ul li:first-child {border-top: 1px solid #1a2e2e;}
#nav ul li { margin: 0px; padding: 0px; list-style:none; display:block; position: relative; border-bottom: 1px solid #1a2e2e; }
#nav ul li a { display: block; color:#fff; text-decoration:none; margin: 0; padding: 12px 35px; text-transform: uppercase; font-weight: 600; 
  -webkit-transition:color 0.2s linear;
  -o-transition:color 0.2s linear;
  -moz-transition:color 0.2s linear;
  transition:color 0.2s linear; }
#nav ul li.active a { color: #0598fe; }
#nav ul li a:hover { color: #cac8c1; }

#nav ul ul { display:none; }

#nav ul li:hover ul { display: block; }
#nav ul ul li { display: block; padding: 0px; margin: 0px; }
#nav ul ul li:last-child { border-bottom: 0; }
#nav ul li.active ul li a { border-bottom:0; }
#nav ul li ul li a { border-bottom:0; background: #414244; display: block; text-transform: none;  
  -webkit-transition:background-color 0.2s linear;
  -o-transition:background-color 0.2s linear;
  -moz-transition:background-color 0.2s linear;
  transition:background-color 0.2s linear; }
#nav ul li ul li a:hover { background: #0598fe; color:#fff; border-bottom: 0; }

#nav p { margin: 0; padding: 12px 35px; text-align: right; font-weight: 600; font-size: 18px;}
#nav p a { text-decoration: none; }

/* Misc */
div.well { border-radius: 0; padding: 20px 5%; width: 90%; background-color: #f6f6f5; }
div.flexslider { margin: 0px 0px 25px 0px; }

/* Column Steez */
div.cols-1 div.item { clear:both; margin-bottom: 25px; padding-bottom: 25px; position: relative;  }
div.items-leading { margin-bottom: 25px; }

div.cols-2 { position: relative; }
div.cols-2 div.column-1 { position: relative; float: left; width: 48%; clear: both; margin: 0 0 20px 0; }
div.cols-2 div.column-2 { position: relative; float: right; width: 48%; margin: 0 0 20px 0; }

div.cols-3 { position: relative; margin-bottom: 20px; }
div.cols-3 div.column-1 { position: relative; float: left; width: 30%; clear: both; margin: 0 5% 0 0; }
div.cols-3 div.column-2 { position: relative; float: left; width: 30%; margin: 0 5% 0 0; }
div.cols-3 div.column-3 { position: relative; float: left; width: 30%; margin: 0 0 0 0; }

div.cols-2 h2,div.cols-3 h2,div.cols-2 h2 a,div.cols-3 h2 a { font-size: 21px; letter-spacing: 0; }

/* Intro Images */
div.pull-left { float: left; width: 30%; margin-right: 5%;margin-bottom: 35px; }
div.pull-left + div.content { float: right; width: 65%; }

div.pull-right { float: right; width: 30%; margin-left: 5%;margin-bottom: 35px; }
div.pull-right + div.content { float: left; width: 65%; }

/* Bottom Steez */
#section div.moduletable { margin-top: 35px; padding-top: 5px; border-top: 1px dotted #cac8c1; }

#userForm, fieldset { padding: 0; border: 0; }
fieldset ol,fieldset ol li { margin: 0; padding-left: 0!important; padding-right: 0!important; }
#userForm .rsform-block.rsform-block-pageurl,#userForm .rsform-block.rsform-block-pagetitle
 { display: none; }
#userForm .formCaption { width: 30%; }
#userForm .formBody { width: 68%; }
#userForm .rsform-block-intro div.formCaption {display: none; }
#userForm .rsform-block-intro div.formBody { width: 100%; font-size: 16px; color:#9a9891; margin: -15px 0 20px 0; }
#userForm input[type="text"],#userForm textarea { width: 90%; padding: 7px 5%; border: 1px solid #9a9891; box-shadow: none; font-family: 'Open Sans', Helvetica, Arial, sans-serif; }
.btn, #userForm input[type="button"],#userForm input#Submit { cursor: pointer; border: none; background: #9a9891; padding: 7px 20px; margin-top: 5px; color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase;font-family: 'Open Sans', Helvetica, Arial, sans-serif; -moz-border-radius: 3px; border-radius: 3px;
  -webkit-transition:background-color 0.2s linear;
  -o-transition:background-color 0.2s linear;
  -moz-transition:background-color 0.2s linear;
  transition:background-color 0.2s linear; }
/* Buttons */
.btn:hover, #userForm input[type="button"]:hover,#userForm input#Submit:hover { background: #0598fe; }


p.readmore { font-size: 12px; font-weight: bold; margin: 4px 0; }
p.readmore a.btn { font-size: 12px; padding: 0; background: none; color: #0598fe; text-transform: none; margin: 0; }

/* Footer */
#footer p, #footer ul, #footer ol, #footer a {
	color: #9a9891; font-size: 13px; text-align: center; } 
#footer ul,#footer ol { margin: 0px; padding: 0px; }
#footer li { list-style: none; display: inline; margin: 0px; padding: 0px; }

.scrollup { width:40px; height:40px; opacity:0.9; position:fixed; bottom:50px; z-index:99999; left:50px; display:none; text-indent:-9999px; background: url(../images/icon_top.png) no-repeat; }


/**** Mobile Steez ****/

@media screen and (max-width: 1100px) {
  div.subwrap { width: 90%; margin: 0px 5%; }
  #footer.subwrap { padding: 5px 5%; margin: 35px 0 0 0; width: 90%; }
  #nav ul li a { padding: 12px 15px; }
  #nav p { padding: 12px 15px; }
}

@media screen and (max-width: 960px) {
  #leftcol  { width: 30%!important; }
  #rightcol { width: 61%!important; }
}

@media screen and (max-width: 800px) {
  #leftcol.left  { width: 90%!important; float: none; padding: 30px 5%; }
  #rightcol.right { width: 90%!important; float: none; padding: 0px 5% 30px 5%; }
  #logo { padding: 15px 0 0 0; }
  #nav { z-index: 100; }  
  #nav ul li { text-align: left; }
  
  #nav h3 { font-size: 14px; display: block; margin: 0px 5%;
  background: url(http://www.sunfishmedia.co.nz/clients/aliframe/templates/aliframe/images/menu-toggle.png) no-repeat right center; /* add a toggle graphic */
  cursor: pointer; /* forces iphone to open the menu on click */ 
}
/* the following shows/hides the menu when the H3 element is clicked */
#nav ul { display: none; position: absolute; background: #414244; margin: 0; width: 92%; padding: 30px 4%; text-align: left; }
#nav h3:hover ~ ul { display: block; }
#nav ul:hover { display: block; }
#nav ul li { display: block; float: none; }
#nav ul li a { display: block; padding: 7px 15px; 
  -webkit-transition:background-color 0.2s linear;
  -o-transition:background-color 0.2s linear;
  -moz-transition:background-color 0.2s linear;
  transition:background-color 0.2s linear; }
#nav ul li.active a { background: rgba(10,10,10,0.4); color:#fff; border-bottom: 0; }
#nav ul li a:hover { background: #0598fe; color:#fff; border-bottom: 0; }
#nav ul ul { position: relative; top: 0; width: 100%; padding: 0; }
#nav ul ul a { text-indent: 15px; font-size: 14px; text-transform: none; }

  #nav div.tel { position: absolute; left: 0px; bottom: 0px; z-index: 101; }
  #nav p { text-align: left; font-size: 14px; width: 132px; }
  
  /* Column Steez */
  div.cols-3 div.column-1,div.cols-3 div.column-2,div.cols-3 div.column-3 { float: none; width: 100%; margin: 0 0 20px 0; }

}

@media screen and (max-width: 540px) {
  #sitewrap { position: relative; margin: 40px auto; }
  h2, h2 a { font-size: 27px; }
  /* Column Steez */
  div.cols-2 div.column-1,div.cols-2 div.column-2 { float: none; width: 100%; margin: 0 0 20px 0; }

  #nav p { padding: 12px 15px; }

  /* Intro Images */
  div.pull-left { float: none; width: 100%; margin-right: 0;margin-bottom: 25px; }
  div.pull-left + div.content { float: none; width: 100%; }

  div.pull-right { float: none; width: 100%; margin-right: 0;margin-bottom: 25px; }
  div.pull-right + div.content { float: none; width: 100%; }

  fieldset ol,fieldset ol li { max-width: 90%;}
  #userForm .formCaption { float: none; width: 100%; }
  #userForm .formBody { float: none; width: 100%; }
  
}