/* DEFAULT STYLES ------------------------------------------------------------------------------*/

/*** HTML5 Elements ***/
header,
nav,
article,
section,
footer {
	display: block;
}

* {
  margin: 0;
  padding: 0;
}



/***Page Layout*********************************/
body{
	/*width:100%;*/
	min-height: 100px;
	height:100%;
	/*margin: 0 auto;*/
	position: relative;
	background-color: #fff;
	font-family: Calibri Light, verdana, ariel, sans-serif;
	font-size: 20px;
	padding: 0;
}


div#container{
	/*width: 100%;*/
	margin-left: 10%;
	margin-right: 10%;
}


	
div#slideout_nav{ 
	display: none; /* so the slide out nav will only on the tablet and mobile screen size */
}
	
	
div#desktop_nav{
	width: 25%;
	min-height: 100px;
	height: 100%;
	float: left;
	background-color: #fff;
}

	
div#content{
	width: 75%;
	min-height: 100px;
	height:100%;
	float: right;	
	background-color: #fff;
}

div#mobile_nav{
	display: none; /* so there is no footer nav in screen sizes larger than tablet */
}

/* Header ***********************************/
header{
	height: 150px;
	width:100%;
	background-color: #003399;
}


header h1 {
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	font-family: Calibri Light, arial, verdana, sans-serif;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.60);
	margin: 0;
	padding-top: 15px;
	padding-right: 15px;	
	float: right;
}


header h2 {
	color: #fff;
	font-size: 70px;
	font-weight: bold;
	font-family: Calibri Light, arial, verdana, sans-serif;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.30);
	padding-right: 15px;	
	float: right;
	clear: both;
}

	
/* Nav ********************************/
nav#desktop {
	width: 100%;
	margin: 0 0 25px 0;
	padding: 10px 25px;
}


nav#desktop ul {
	list-style: none;
	margin: 0;
	float: left;
	position: relative;
	display: inline-block;
}


nav#desktop ul:after {
	content:"";
	clear:both;
	display: block;
}

nav#desktop ul li:hover > ul {
	display: block;
}
	
	
nav#desktop li a  {
	display: block;
	padding: 8px 0;
}


nav#desktop ul li:hover {
	background-color: #6b94c7;
}


nav#desktop ul li .active {
	background-color: RGB(224,228,236);
}


nav#desktop ul li {
	list-style: none;
	margin: 13px 0;
	float: left;
	text-align: center;
	font-size: 18px;
	width: 80%;
	border: solid 1px;
	border-color: rgba(56,93,138, 0.5);
}


nav#desktop ul li a:link,
nav#desktop ul li a:visited,
nav#desktop ul li a:hover {
	color: #000;
	font-weight: normal;
	text-decoration: none;
	display: block;
}


nav#desktop ul ul {
	display: none;
    position: ;
    background-color: #fff;
	width: 100%;
}


nav#desktop ul ul li{
	margin:0;
	width: 100%;
	margin-left: -1px;
	border-top: none;
}



/** Article ***************************************/
article {
	padding: 2.35%;
	margin-bottom: 50px;
}


article h1 {
	margin: 0 0 4px 0;
	padding: 0;
	font-weight: normal;
	font-size: 35px;
	font-family: Calibri Light, arial, verdana, sans-serif;
	color: RGB(55,96,146);
}


article h2 {
	margin: 10px 0 0 0;
	padding: 0;
	font-weight: normal;
	font-size: 27px;
	font-family: Calibri Light, arial, verdana, sans-serif;
	color: RGB(55,96,146);
}

/* Sections and columns ********************************/
section {
	margin: 0;
	padding: 10px 0;
	display: block;
	
}


section.indent {
	margin: 0 0 0 30px;
	padding: 0;
	display: block;
	
} 


ol.padding {
	padding-left: 40px;
}


section p{
	margin: 1px 0 0 0;
	padding: 0;
	display: block;
}


section.column2 {
	float: right;
	display: block;
	width:50%;
} 


section.column2_first {
	float: left;
	display: block;
	width:50%;
} 


section.column2_second {
	float: right;
	display: block;
	width:50%;
} 


section.column2small_first {
	float: left;
	display: block;
	width:25%;
} 


section.column2large_second {
	float: right;
	display: block;
	width:75%;
} 


section.column3 {
	float: left;
	padding-left:2%;
	padding-right: 3%;
	width:28%;
	display: block;
}


section.column3_small {
	float: left;
	padding-left:20px;
	padding-top: 0;
	width:29%;
}


section.full {
	width: 90%;
	overflow: hidden;
}



/* Button ***********************/

p.button{
	background-color: rgb(0,32,96);
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius: 10px;
}

p.button a:link,
p.button a:visited{
	text-decoration: none;
	font-weight: bold;
	color: #fff;
}

/* Links ***************************************/
a:link, 
a:visited{
	color: #003399;
}


a.page {
	font-weight: bold;

}


a.slide{
	text-decoration: none;
	font-size: 16px;
}


a.footer{
	text-decoration: none;
}



/*Table (initial costs)**************************************************/
table#initial_costs{
    font-family: Calibri Light, arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}


table#initial_costs th {
	color: #fff;
	background-color: rgb(79,129,189);
    border: 1px solid #fff;
    text-align: left;
    padding: 8px;
}


table#initial_costs td {
    border: 1px solid #fff;
    text-align: left;
    padding: 8px;
}


table#initial_costs tr:nth-child(even) {
    background-color: rgb(208,216,232);
}


table#initial_costs tr:nth-child(odd) {
    background-color: rgb(233,237,244);
}




/* Table (additional costs) *****************************************/
table#additional_costs{
    font-family: Calibri Light, arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}


table#additional_costs th {
	color: #fff;
	background-color: rgb(79,129,189);
    border: 1px solid #fff;
    text-align: left;
    padding: 8px;
}


table#additional_costs td {
    border: 1px solid #fff;
    text-align: left;
    padding: 8px;
	padding-right: 20px;
}


table#additonal_costs tr:nth-child(even) {
    background-color: rgb(208,216,232);
}


table#additional_costs tr:nth-child(odd) {
    background-color: rgb(233,237,244);
}


/* Table contact */

table#contact td.blue {
	color: RGB(55,96,146);
	padding-right: 30px;
}



/* Table (complaint and concerns)*******/
table#concern td.blue {
	padding: 3px;
	color: RGB(55,96,146);
	
}

table#concern td {
	padding: 3px;
	padding-left: 25px;
}


/* Table (what you need to know) */
table#apply {
	width: 100%;
}

table#apply th {
	float: left;
	padding: 0;
	font-weight: normal;
	font-size: 22px;
	font-family: Calibri Light, arial, verdana, sans-serif;
	color: RGB(55,96,146);
}


table#apply td {
	width: 65%;
}

table#apply td.button {
	width: 35%;
}




/* Application form ***************/
form {
  width: 90%;
} 


label.form_label{
    padding-top:10px;
    clear: both;
    float:left;
    margin-right:5px;	
}


select.form_select{
  font-size: 12px;
  float: right;
  width: 93%;
  height: 30px;
  padding:2px;
  margin:5px;
}


input{
	float: right;
  font-size: 16px;
  width: 90%;
  height: 20px;
  padding:2px;
  margin:5px;
}

label.form_label_checkbox{
	padding-top:5px;
    float:left;
    margin-right:5px;	
}


input.checkbox {
	float: right;
	width: 15px;
}


input.submit{
	width: 50%;
	height: 30px;
	float: left;
}

table#waiver_agreement{
	width:100%;
	padding-top: 12px;
}

table#waiver_agreement tr td.waiver{
	font-size: 16px;
}

p.post_code{
	font-size: 12px;
	float: left;
	width:100%;
}


/* Images ******************************/
img {
	max-width: 100%; /* resizes images with page size */
}


img.center {
	margin: auto;
}


img.padding {
	padding-left: 50px;
}


p.large {
	font-size: 20px;
	padding-left: 60px;
}




.thumb img { 
	border:1px solid #000;
	margin:0;
	float:left;
	display: none;
}
.thumb span { 
	position:absolute;
	visibility:hidden;
}
.thumb:hover, .thumb:hover span { 
	display: block;
	
}


/** Footer ******************************************/
footer {
	width:100%;
	height: 70px;
	clear: both;
	margin-bottom: 0;
	
	font-size: 16px;
	color: #fff;
	background-color: #003399;
	text-align: right;
	
}


footer p{
	padding-right: 15px;
}


a.footer{
	color: #fff;
	text-decoration: none;
	font-weight: normal;
}


section#footer_tablet{
	display: block; 
}

	
section#footer_mobile{
	text-align: center;
	display: none;
}


a[href^=tel] {
    color: inherit;
    text-decoration: none;
}



/* iPads (portrat and landscape) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px){
/* Page layout for page size 768px - 1024p *****************************/	
div#container{
	max-width: 1024px; /* max page width to 1024px */
	width: 100%; /* allows for resizing of the webpage */
	margin-left:0;
	margin-right:0;
}
	
	
div#desktop_nav{
	display: none; /* hides desktop nav when page size is less than 1024px*/
}
	
	
div#slideout_nav{
	display: block; /* shows slide out nav when page size is less than 1024px */
}


div#content{
	max-width: 1024px;
	margin-top: 40px;
	width: 100%;
	float: none;	
}


div#mobile_nav{
	display: none; /* no footer nav between 768px - 1024px */
}



	
/* Nav for slde out nav bar - for all webpage when page size less tham 1024px ***********************************/
nav.menu{
	margin-top: 50px;
	width: 240px;
	max-height: 700px;
	height: 100%;
	position: absolute;
	background-color: #003399;
	left: -240px;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
}


nav.menu a{
	display: block;
	color: #fff;
	padding-top: 12px;
	padding-bottom:12px;
	padding-left: 30px;
	font-size:16px;
	border-bottom: 1px solid #fff;
}


nav.menu li:last-child a{
	border-bottom: none;
}


nav.menu a:hover{
	background-color: RGB(224,228,236);
	color: #002266;
}


.menu-icon{
	padding: 10px 20px;
	background-color: #fff;
	color: #003399;
	cursor: pointer;
	float: left;
	margin-top: 4px;
}


#menuToggle{
	display: none;
}


#menuToggle:checked ~ .menu{
	position: absolute;
	left:0;
}



/* Section - for web pages less than 1024px*********************/
section.column3 { /* resizes columns */
	float: left;
	padding-left:2%;
	padding-right: 3%;
	width:28%;
	display: block;
}



/* Images *********************************************/
img.padding {
		padding-left: 20px;
		padding-right: 20px;
	}

img#about_us{
	margin-right: 0;
}

/* Footer ***********************************************/	
footer {
	max-width: 1024px;
	width: 100%;
	height: 70px;
	clear: both;
	margin:0;
}
	
	
section#footer_tablet{
	display: block;
}
	

section#footer_mobile{
	text-align: center;
	display: none;
}

} /* Closes style for page size 768px - 1024px */


a[href^=tel] {
    color: inherit;
    text-decoration: none;
}


/* large screen mobiles (tablets) ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px){
/*Page layout for web page between 480px to 767px ****************/
div#container{
	max-width: 767px;
	width: 100%;
	margin-left:0;
	margin-right:0;
}
	

div#desktop_nav{
	display: none; /* hides desktop nav */
}
	

div#slideout_nav{
	display: block; /* shows slide out nav when page size is resized below 767px  */
}
	
	
div#mobile_nav{
	display: block; /* shows footer nav when wep pages size gets resized below 767px */
	text-align: center;
}
	

div#content{
	max-width: 767px;
	width: 100%;
	float: none;	
}
	
	
	
/* Application form ***************/
form {
  width: 80%;
} 


label.form_label{
    padding-top:5px;
    clear: both;
    float:left;
   margin-right:0;
}


select.form_select{
  font-size: 12px;
  float: right;
  width: 93%;
  height: 30px;
  padding:2px;
  margin:5px;
}


input{
	float: right;
  font-size: 16px;
  width: 90%;
  height: 20px;
  padding:2px;
  margin:5px;
}


input.submit{
	width: 180px;
	height: 30px;
	float: left;
}	

/* Nav footer******************/	
nav.mobile{
	max-width: 767px;
	width:100%;
	height: 330px;
	padding-top:10px;
}

	
nav.mobile ul{
	max-width: 767px;
}

	
nav.mobile ul li{
	padding-top: 2px;
	padding-bottom: 4px;
	font-size: 15px;
	text-align: center;
}
	

nav.mobile ul li a{
	color: white;
	font-weight: normal;
}
	
	
	
/* Section and column resize **************/	
section.column3 {
	float: left;
	padding-left:2%;
	padding-right: 3%;
	width:28%;
	display: block;
}
	
	

/* Image ***************************/
img.padding {
	padding-left: 0;
	padding-right: 20px;
}
	

	
/* Footer ********************************/	
footer {
	max-width: 767px;
	width:100%;
	height: 500px;
	clear: both;
	margin: 0;
	background-color: #003399;
	text-align: left;
}
	
	
section#footer_tablet{
	display: none;
}
	
	
section#footer_mobile{
	text-align: center;
	display: block;
}
	
} /* Closes style for page size 767px to 480px */


a[href^=tel] {
    color: inherit;
    text-decoration: none;
}


/* iPhones and other mobiles (portrat and landscape) ------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px){
body{
	font-size: 18px;
}

	
div#container{
	max-width: 480px;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}


div#content{
		max-width: 480px; 
		width: 100%;
		float: none;	
	}
	

	
div#desktop_nav{
	display: none; /* does not show desktop nav */
}

	
div#slideout_nav{
	display: block; /* shows slide out nav */
}


div#mobile_nav{ 
	display: block; /* footer nav  shows */
	text-align: center;
}

	
	

/* Nav ********************************************************/
.menu-icon{
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 0;
	padding-bottom:0;
}	
	
nav.menu{
	width: 100%; /* so slde out nav in mobile fills whole screen when opened*/
	left: -100%;
}


nav.menu ul a{
	padding-top: 13px;
	padding-bottom: 14px;
	font-size: 15px;
}
	
	
	
	
/* Header *****************************************************/	
header{
	height:180px;
}


header h1{
	font-size: 20px;
	float: left;
	padding-right: 0;
	padding-left: 10px;	
}


header h2{
	font-size: 50px;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.30);
	padding-right: 0;	
	padding-left: 10px;
	float: left;
	clear: both;
}


/* Artcle ******************************************************/
article{
	margin-bottom: 30px;
}
	
	
	
/* Sections and column resize ***************************************/	
section {
	margin: 0;
	padding: 0;
	display: block;
}
	

section.indent {
	margin: 0; /* no indent*/
	padding: 0;
	display: block;
} 
	
	
section.column3 {
	float: left;
	padding-left:0%;
	padding-right:0%;
	width:100%; /* no column*/
	display: block;
}
	
	
section.column2{
	float: none;
	padding-left:0;
	padding-right:0;
	width:100%; /* no column*/
	display: block;
} 

	
section.column2_first{
	float: left;
	padding-left:0;
	padding-right:0;
	width:100%; /* no column*/
	display: block;
}


section.column2_second{
	float: left;
	padding-left:0;
	padding-right:0;
	width: 100%; /* no column*/
	display: block;
} 


section.column2small_first{
	float: none;
	display: block;
	width:100%; /* no column*/
} 


section.column2large_second{
	float: none;
	display: block;
	width:100%; /* no column*/
} 


section.column3_small{
	float: left;
	padding-left:20px;
	padding-top: 0;
	width:100%;
}


section.full {
	width: 100%; 
	overflow: hidden;
}



/* Application form ***************/
form {
	max-width:480px;
  width: 100%;

} 


label.form_label{
    padding-top:5px;
    clear: both;
    float:left;
    padding-right:70%;	
}


select.form_select{
  font-size: 12px;
  float: left;
  width: 93%;
  height: 30px;
  padding:2px;
  margin:5px;
}


input{
	float: left;
  font-size: 16px;
  width: 90%;
  height: 20px;
  padding:2px;
  margin:5px;
}


input.submit{
	width: 180px;
	height: 30px;
	float: left;
}


/* Images *****************************/
img.padding {
	padding-left: 0;
	padding-right: 0;
}


img#initial_costs{
	width: 100%;
}
	

	
/* Table for apply now page **********************************/
table#apply td {
	max-width: 480px; /* fills whole mobile page */
	width: 100%;
	float: left;
}


table#apply td.button {
	max-width: 480px;
	width:100%;
	float:left;
	margin-top: 10px;
	margin-bottom:20px;
	}
	
	

/* Footer ***************************************************/
nav.mobile{
	max-width: 400px;
	width:100%;
	height: 350px;
	padding-top:10px;
}
	
	
nav.mobile ul{
	max-width: 480px;
}
	
	
nav.mobile ul li{
	padding-top: 5px;
	padding-bottom: 4px;
	font-size: 15px;
	text-align: center;
}

	
nav.mobile ul li a{
	color: white;
	font-weight: normal;
}

	
footer {
	max-width: 480px;
	width:100%;
	height: 500px;
	clear: both;
	margin: 0;
	background-color: #003399;
	text-align: left;
}	
	
	
section#footer_tablet{
	display: none;
}

	
section#footer_mobile{
	text-align: center;
	display: block;
}


} /** Closes style for page size 480px ****/


a[href^=tel] {
    color: inherit;
    text-decoration: none;
}