/* 
      ___        ___      ___        ___     
     /\__\      /\  \    /\  \      /\  \    
    /::|  |    /::\  \   \:\  \    /::\  \   
   /:|:|  |   /:/\:\  \   \:\  \  /:/\:\  \   
  /:/|:|__|__/::\~\:\  \  /::\  \/::\~\:\  \    ___  _ ____ _ ___ ____ _   
 /:/ |::::\__\/\:\ \:\__\/:/\:\__\/\:\ \:\__\   |__> | |__, |  |  |--| |___
 \/__/~~/:/  /\~\:\ \/__/:/  \/__/__\:\/:/  /   .co.nz
       /:/  /\:\ \:\__\/:/  /        \::/  /     
      /:/  /  \:\ \/__/\/__/         /:/  /        
     /:/  /    \:\__\               /:/  /          
     \/__/      \/__/               \/__/    


Name: style.css
Description: COMMLEASE STYLE CSS
Version: 2
Author: Meta Digital
Author URI: http://metadigital.co.nz/
Edited by: NZac @ Treshna Enterprises Ltd, Vincent@treshna.com
*/

/*============Sticky Footer============*/

html,
body {
	height: 100%;
}
		
#wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -170px;
	padding: 0 0 170px;
}
	 
footer {
	height: 170px;
	background-color:#354041;
}

.clear{clear:both;}

/*==========Fonts & Headings===========*/

body{
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	font-size:1.4rem;
	color:#898989;
	font-weight: 400;
}

h1{
 color:#fff;
 font-size:18px;
 font-size:1.8rem;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin:15px 0;
}

h2{
	color:#0091cc;
 font-size:16px;
 font-size:1.6rem;
 text-transform: uppercase;
}

h3{
	color:#898989;
	font-size:14px;
	font-size:1.4rem;
	text-transform: uppercase;
	font-weight:600;
}

h4{
 
}

h5{
	color:#cccccc;
	text-transform: uppercase;
	font-size: 12px;
	font-size: 1.2rem;
}

h6{
 
}



p{margin:0 0 10px 0;}

strong{
	font-weight:bold;
}

ul{
	margin:0;
	padding:0 0 0 15px;
}

ul li{
	padding-bottom:25px;
}

a{
	color:#0991cc;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

a:visited{

}

a:hover{
	text-decoration:none;
}

a:active{
	text-decoration:none;
}


img{
	max-width:100%;
	height:auto;
}

.alignright {float:right;}

.alignleft {float:left;}

* {outline:none!important;}

.container{
	width:100%;
	padding:0;
}

label{font-weight: normal;margin:0;}

/*Header
==================================*/

header{
  background-color:#fff;
}

header #header-logo{
  text-align: center;
}

header #header-logo img{
  margin:7px auto;
  max-width:175px;
  width:100%;
}

header #header-back a{
  background-color:#e6f4fa;
  display: inline;
  line-height: 55px;
  text-transform: uppercase;
  padding-left:19px;
  width:62px;
  height:55px;
  display: block;
  background-image:url('/static/images/icons/back.png');
  background-repeat: no-repeat;
  background-position:left 5px center;
}

#header-logout,
#header-back{
  padding:0;
  width:
}

header #header-logout a{
  width:100%;
  height:55px;
  display: block;
  background-image:url('/static/images/icons/logout.png');
  background-repeat: no-repeat;
  background-position: center center;
}

#header-logout:hover{
   background-color: #0991cc;
}

header #header-back:hover a{
  background-image:url('/static/images/icons/back-hover.png');
  background-color: #0991cc;
  color:#fff;
}

#header-logout:hover a{
    background-image:url('/static/images/icons/logout-hover.png');
}

/* Header Bar
===================================*/

.header-bar{
	background-color: #0991cc;
	border-bottom:3px solid #087db0;
	padding:15px 30px;
	text-align: center;
}

.header-bar.home-header-bar{
	text-align: left;
}

.header-bar h1{
	margin:0;
}

.header-bar h5{
	margin:5px 0 0 0;
}

/* Login Screen 
===================================*/

#login{
	background-color:#e6f4fa;
	padding:45px 0 60px 0;
}

#login h1{
	color:#0091cc;
	text-align: center;
}

#login form{
	max-width:322px;
	width:100%;
	margin:0 auto;
}

#login #email-input,
#login div.regmargin,
#login #other-input{
	margin-bottom:20px;
}

#login #other-input{
	width:117.6%;
}

#login .formOne { width: 100% !important; }

#login #email-input,
#login #other-input,
#login #password-input,
#login #cpassword-input{
	border:1px solid #a1a1a1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#login #email-input.focus,
#login #other-input.focus,
#login #password-input.focus,
#login #cpassword-input.focus{
	border:1px solid #0991cc;
}

#login label{
	font-weight: 400;
	margin-bottom:8px;
}

#login form span.login-icon{
	width:15%;
	height:45px;
	display: inline-block;
	float:left;
	background-color: #f0f2f5;
	background-repeat: no-repeat;
	background-position: center center;
}

#login form span.login2-icon{
	height:45px;
	display: inline-block;
	float:left;
	background-color: #f0f2f5;
	background-repeat: no-repeat;
	background-position: center center;
}

#login form #email-input span.login-icon{
	background-image: url('/static/images/icons/user.png');
}

#login form #email-input.focus span.login-icon{
	background-image: url('/static/images/icons/user-hover.png');
}

#login form #password-input span.login-icon,
#login form #cpassword-input span.login-icon{
	background-image: url('/static/images/icons/lock.png');
}

#login form #password-input.focus span.login-icon,
#login form #cpassword-input.focus span.login-icon{
	background-image: url('/static/images/icons/lock-hover.png');
}

#login form input{
  width:85%;
  height:45px;
  padding:0 10px;
  border:none;
  font-size:16px;
  font-size:1.6rem;
}

#login form .fullform { width: 100%; }

#login a.loginbtn{
	display: block;
	max-width:200px;
	margin:30px auto 15px auto;
	background-color: #0991cc;
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	 -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#login .visit-site,
#login a.loginbtn{
	text-align: center;
	padding:8px 15px;
	display: block;
	max-width:200px;
	margin:0 auto 0 auto;
	margin-top:20px;
	border:1px solid #0991cc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#login .visit-site:hover,
#login a.loginbtn:hover{
	color:#0991cc;
	border-color: #fff;
	background-color: #fff;
}

/* Home
===================================*/

.banner-image img { width:50%; }
.banner-image { text-align: center; background-color: rgb(231, 244, 250); }

#home{
	padding-top:30px;
}

#home a{
	display: block;
	padding:0 0 0 0;
	background-color:#f0f2f5;
	margin-bottom:30px;
	border-top:1px solid #c2c3c6;
	border-left:1px solid #e0e2e5;
	border-right:1px solid #e0e2e5;
	text-align: center;
}

#home a h2{
	border-top:1px solid #e0e2e5;
	padding:0 0 15px 0;
	margin:0;
}

#home a h2 span.block-icon{
	display: block;
	height:30px;
	width:100%;
	margin:10px 0;
	background-repeat: no-repeat;
	background-position: center center;
}

#home a.contact-block span.block-icon{ background-image:url('/static/images/icons/contact.png'); }
#home a.contact-block:hover span.block-icon{ background-image:url('/static/images/icons/contact-hover.png'); }
#home a.quote-block span.block-icon{ background-image:url('/static/images/icons/calc.png'); }
#home a.quote-block:hover span.block-icon{ background-image:url('/static/images/icons/calc-hover.png'); }
#home a.doc-block span.block-icon{ background-image:url('/static/images/icons/doc.png'); }
#home a.doc-block:hover span.block-icon{ background-image:url('/static/images/icons/doc-hover.png'); }
#home a.logout-block span.block-icon{ background-image:url('/static/images/icons/logout.png'); }
#home a.logout-block:hover span.block-icon{ background-image:url('/static/images/icons/logout-hover.png'); }


#home a:hover{
 background-color:#0991cc;
 color:#fff;
	border-top:1px solid #0775a5;
	border-left:1px solid #0887be;
	border-right:1px solid #0887be;
}

#home a:hover h2{
 color:#fff;
 border-top:1px solid #0887be;
}

/* Contact
===================================*/

#contact-buttons{
	margin-top:25px;
}

#contact-buttons a{
	display: block;
	padding:0 0 0 0;
	background-color:#f0f2f5;
	border-top:1px solid #c2c3c6;
	border-left:1px solid #e0e2e5;
	border-right:1px solid #e0e2e5;
	text-align: left;
	background-image:url('/static/images/icons/phone.png');
	background-repeat: no-repeat;
	background-position: right 20px center;
}

#contact-buttons a:hover{
 background-image:url('/static/images/icons/phone-hover.png');
 background-color:#0991cc;
 border-top:1px solid #0775a5;
 border-left:1px solid #0887be;
 border-right:1px solid #0887be;
}

#contact-buttons a h2{
	margin:0;
	padding:20px 20px;
}

#contact-buttons a:hover h2{
	color:#fff;
}

#contact-info{
	margin-top:100px;
	text-align: center;
}

#contact-info p{
	margin:0;
}

/* Documents
===================================*/

#documents form{
	margin: 0 auto;
	max-width:320px;
}

#documents form div.regmargin{
	margin-top: 20px;
}

#document-buttons form input[type="radio"],
#documents form input[type="checkbox"]{
	display:none;
}

#document-buttons label{
	margin-bottom:10px;
}

#document-buttons input[type="checkbox"] + label span,
#document-buttons input[type="radio"] + label span{
	display:inline-block;
	width:22px;
	height:23px;
	margin:-5px 5px 0 0;
	vertical-align:middle;
	background-image:url('/static/images/icons/check.png');
	background-repeat: no-repeat;
	background-position: left center;
	cursor:pointer;
}

#document-buttons input[type="checkbox"]:checked + label,
#document-buttons input[type="radio"]:checked + label{
	font-weight:bold;
}

#document-buttons input[type="checkbox"]:checked + label span,
#document-buttons input[type="radio"]:checked + label span{
	background-position: right center;
}

#doc-type{
	margin:25px 0 25px 0;
	border-bottom:1px solid #e1e1e1;
	padding-bottom:10px;
}

#doc{
	margin-bottom:25px;
}

#documents #btn_email{
	border:none;
	display: block;
	max-width:200px;
	width:100%;
	margin:30px auto 15px auto;
	padding:10px 30px 10px 0px;
	background-color: #0991cc;
	background-image:url('/static/images/icons/arrow.png');
	background-repeat: no-repeat;
	background-position: right 30px center;
	border:1px solid #fff;
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	 -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#documents #btn_email:hover{
	background-color: #fff;
	color:#0991cc;
	border:1px solid #0991cc;
	background-image:url('/static/images/icons/arrow-hover.png');
}

#documents .reset-doc{
	text-align: center;
	display: block;
	color:#0991cc;
}

/* Quotes
===================================*/

#quotes{
	padding-top:30px;
}

#quotes form label{
	margin-bottom:15px;
}

#quote-input{
	border:1px solid #a1a1a1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#quote-input.focus{
	border:1px solid #0991cc;
}

#quote-input span.dollar-icon{
	width:15%;
	height:45px;
	display: inline-block;
	float:left;
	background-color: #f0f2f5;
	background-repeat: no-repeat;
	background-position: center center;
	background-image:url('/static/images/icons/dollar.png');
}

#quote-input.focus span.dollar-icon{
	background-image:url('/static/images/icons/dollar-hover.png');
}


#quote-input input{
	width:70%;
	height:45px;
	float:left;
	border:none;
	padding:0 5px;
	font-size:24px;
	font-size:2.4rem;
	color:#0991cc;
}

#quote-input input#loginsubmit{
	width:15%;
	height:45px;
	display: inline-block;
	border:none;
	padding:0;
	background-color: #f0f2f5;
	font-size:16px;
	font-size:1.6rem;
	color:#a1a1a1;
}

#quote-input.focus input#loginsubmit{
	color:#0991cc;
}

#quote-input input#loginsubmit:hover{
	color:#fff;
	background-color: #0991cc;
}

#rent-switcher{
	margin-top:30px;
	border:1px solid #0991cc;
	 -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#rent-switcher .rent-button{
 width:50%;
 float:left;
 padding:8px 5px;
 text-align: center;
 color:#0991cc;
}

#rent-switcher .rent-button.active{
	background-color:#0991cc;
	color:#fff;
}

.data-table{
	margin-top:30px;
	border:1px solid #a1a1a1;
	overflow: hidden;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.data-table .data-table-header{
	background-color: #f0f2f5;
	padding:10px 25px!important;
}

.data-table .left-col{
	float:left;
	width:30%;
	padding:10px 25px;
	height:36px;
	border-right:1px solid #e1e1e1;
}

.data-table .right-col{
	float:left;
	height:36px;
	width:70%;
	padding:8px 25px;
}

.data-table .left-col.term-length{
	 border-bottom:1px solid #e1e1e1;
}

.data-table .right-col.price{
	border-bottom:1px solid #e1e1e1;
	font-size:16px;
	font-size:1.6rem;
	color:#0991cc;
}

p.sub-text{
	margin-top:15px;
	text-align: center;
	font-size:smaller;
}

.data-table.table-responsive table { margin-bottom: 0px; }
.data-table.table-responsive table thead th { height: 36px; border-right: 1px solid #e1e1e1; background-color: #f0f2f5; padding: 10px 25px!important; }
.data-table.table-responsive table tbody td { padding: 10px 25px; height: 36px; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; }
.data-table.table-responsive table tbody td.price { font-size: 1.6rem; color: #0991cc; }