/*COLORS*/
/*
Bright Blue :#04407C
Dark Blue: #033363
*/


body, html{
	margin: 0;		
	padding: 0;
	font-family: "Open Sans";
	background-color: #FFF;
	border-radius: 5px;
	background: -moz-linear-gradient(center top , #DAEDFE 10%, #FFF 90%);
	background: -webkit-gradient(linear, center top, center bottom, from(#DAEDFE), to(#FFF)); 
	background: -o-linear-gradient(center top , #DAEDFE 10%, #FFF 90%);
	background-image: -ms-linear-gradient(top, #DAEDFE 10%, #FFF 90%); 
	background: linear-gradient(center top , #DAEDFE 10%, #FFF 90%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DAEDFE', endColorstr='#FFFFFF');
	background-color: #FFF;
	background-attachment: fixed;
	font-size: 14px;
}

img{
	border: none;
	
}
h1{
	font-weight: normal;	
}
h2{
	margin-top: 0;
	font-weight: lighter;
}
table{
	border-collapse: collapse;	
}

.cf{
	clear: both;	
}
.contain{
	width: 1024px;
	margin: auto;	
}
.contain:after{ 
	content: "";
	clear: both;	
	display: table;
}

.content{
	padding: 1em;	
}
.ribbonEnd{
	width: 0; 
	height: 0; 
	border-top: 1.5em solid transparent;
	border-bottom: 1.5em solid transparent;
	border-right: 1.5em solid #FFF;
	float: right;	
	margin-top: -0.65em;
}
.verticalRibbon{
	width: 30px; 
	height: 50px; 
	float: right;
	background: -moz-linear-gradient(center top , #EEE 30%, #FFF 70%);
	background: -webkit-gradient(linear, center top, center bottom, from(#EEE), to(#FFF)); 
	background: -o-linear-gradient(center top , #EEE 30%, #FFF 70%);
	background-image: -ms-linear-gradient(top, #EEE 30%, #FFF 70%); 
	background: linear-gradient(center top , #EEE 30%, #FFF 70%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF');
	background-color: #FFF;
	position: relative;
	margin-top: -0.75em;
}
.verticalRibbon span{
	position: absolute;
	bottom: -7px;
	width: 0; 
	height: 0; 
	border-right: 15px solid #FFF;
	border-left: 15px solid #FFF;
	border-bottom: 7px solid transparent;
	float: right;	
}

#topNav{
	background-color: #033363;
	padding: 0.75em; 
	text-align: right;
	color: #FFF;
}
	#topNav a{
		text-decoration: none;
		color: #FFF;
	}
#header{
	background-color: #04407C;
}
	.logo{
		margin: 55px 70px;	
		float: left;
	}
#main{
	margin-top: 2em;	
	min-height: 650px;
}
	#aside{
		float: left;
		width: 240px;
		color: #FFF;	
	}
		#aside a{
			color: #FFF;
			text-decoration: none;	
		}
	
		#onlineBanking{
			background-color: #033363;
			text-align: center;
		} 
		#onlineBanking h2{
			margin-top: 1em;	
		}

		#nav{
			background-color: #04407C;	
			margin-top: 2em;
		}
			#nav ul{
				padding: 0;
				margin: 0;
				list-style: none;	
			}
			#nav a{
				padding: 1em 1.5em;	
				display: block;
				border-bottom: 4px solid #033363;	
			}
			#nav ul li:last-child a{
				border-bottom: none;	
			}
			#nav a:hover{
				background-color: #fff;
				color: #033363;	
				box-shadow: 0 0 5px rgba(0,0,0,0.5);
			}
	#rightSide{
		float: right;
		width: calc(100% - 265px)
	}
		#banner{
			margin-bottom: 2em;	
		}
		#content{
			box-shadow: 1px 1px 3px rgba(0,0,0,0.40);	
			color: #033363;
			background-color: #FFF;
			min-height: 500px;
			margin-bottom: 2em;
			padding: 2em;
		}
			#content a{
				color:	#0976E2;
			}
			#content a:visited{
				color:	#04407C;
			}
			#ratesBox{
				background: -moz-linear-gradient(center top , #033363, #1E5E9D);
				background: -webkit-gradient(linear, center top, center bottom, from(#033363), to(#1E5E9D)); 
				background: -o-linear-gradient(center top , #033363 30%, #1E5E9D);
				
				background: linear-gradient(center top , #033363 30%, #1E5E9D);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#033363', endColorstr='#1E5E9D');
				background-image: -ms-linear-gradient(top, #033363 30%, #1E5E9D); 
				background-color: #033363;
				border-radius: 5px;
				float: right;	
				width: 30%;
				color: #FFF;
				padding: 2%;
			}
				#ratesBox span{
					font-family: 'Open Sans';
					font-weight: bold;
					font-size: 1.20em;
				}
			#news{
				width: 60%; 
				float: left;
			}
				#news h3{
					clear: both; 
					background-color: #033363; 
					height: 2em; 
					color: #FFF; 
					padding: 0.35em 0 0 2em; 
					margin-left: -2em;
					font-weight: normal;
					font-size: 16px;
				}

#footer{
	background-color: #04407C;
	padding: 3em 0;	
}
	#footer a{
		color: #FFF;
	}
	#ncua{
		float: right;
		color: #FFF;
		width: 50%;
		text-align: right;	
		font-size: 10px;
		
	}
	#ncua strong{
		font-style: italic;
	}
	#ncua img{
		float: right;
		margin: 0 0 0 1em;
	}
	#ncua p{
		margin-top: 0;
	}

	/**************************/
	/****CALCULATORS***********/
	/**************************/
	
	#calculators a{
		display: block;
		height: 20px;
		margin: 2px;
		padding: 1%;
		width: 96%;
		float: left;
		font-size: 1.1em;
		text-decoration: none;
		background-color: #eee;
		color: #04407C;
	}
	#calculators a:hover{
		background-color: #04407C;
		color: #FFF;
		box-shadow: 0 0 5px rgba(0,0,0,0.25);
	}
	#calculators strong{
		display: block;
		clear: both;
		padding:5px;
		font-size: 1.25em;
		margin-top: 1em;
		font-weight: normal;
	}
	.calculatorSection{
		width: 100%;
		float: left;
		margin: 5px;
	}
	#prsnpl a{width: 47%;}
	#lease a{width: 47%;}
	
	/**************************/
	/**********RATES***********/
	/**************************/

				#rates_container{
					
				}
				.rates_effective{
					clear: both;
					margin: 0px 0px 10px 0px;	
				}
				.rates_nav{
					clear: both;	
				}
				#content a.rates_button{
					margin: 0 20px 40px 0;
					color: #FFF;
					background-color: #04407C; 
					text-decoration: none;
					padding: 0.5em;
				}
				#content a.rates_button:hover{
					color: #04407C;
					background-color: #DCEEFE; 
				}
				.rates_table{
					width: 100%;
					border-collapse: collapse;
					
				}
				.rates_header{
					margin-bottom: 0;
					padding-top: 1em;
					font-size: 2em;
					font-weight: lighter;
				}
				.rates_title{
					font-weight: bold;
					font-size: 1em;
					border-bottom: #000 solid 2px; 
				}
				.rates_bold{
					font-size: 1.5em;
				}
				.rates_notes{
					font-size: 0.75em;
					font-style: italic;
				}
				.rates_subheader{
					padding-top: 2em;
					font-size: 1.25em;
				}
				.rates_linespace{
					background-color: #FFF;
				}
				.rates_aRow{
					background-color: #EEE;
				}
				.rates_standard{
					
				}
			/*News*/
				.news_title{
					font-weight: bold;
					margin: 1em 0;	
				}
				.news_title p{
					margin: 0;	
				}
				.news_details{
					
				}
	

	/**************************/
	/****EXTRA STYLES***********/
	/**************************/


	.alternating th{
		text-align: left;
	}
	.alternating tr:nth-child(even){
		background-color: #EEE;
	}
	
	/********OVERLAY STYLES**********/
	/********************************/
	#extDis {
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: 1000;
	}
	#extDis h2{
		text-align: center;
	}
	
	#extDis .extDisMsg {
		background-color: #04407C;
		border: 5px solid #FFF;
		border-radius: 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
		color: #FFF;
		margin: 120px auto;
		padding: 2em;
		position: relative;
		text-align: left;
		width: 80%;
		font-size: 0.80em;
	}
	#extDis .extDisMsg p{
		padding: 0 0 20px 0;
	}
	#extDis .extDisBg {
		position: absolute;
		width: 100%;
		height: 100%;
		background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
	}

	#extDis a.continueBtn:hover {
		text-decoration: none;
	}
	#extDis .closeBtn, #extDis a.continueBtn {
		background-color: #FFF;
		color: #004A6A;
		display: inline;
		font-weight: bold;
		margin: 10px 20px 0px 0px;
		padding: 10px 20px;
		border-radius: 10px;
		cursor: pointer;
		text-decoration: none;
	}