/*----------------------------------------------------------------------------
	Credit Union - Global Styles
	Version:   1.0
	Author:    Lizl Rodriguez, RealDecoy Inc.
___________________________________________________________________________ */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
	color: #4c4d4f;
	text-align:center;
	padding:10px 0;
	background: url(../images/page_gradient_bg.gif) repeat-x;
}

h2 {
	font-size: 167%; 
	color: #002a54;
	background: url(../images/heading2_bg.gif) 0 2px no-repeat;
	padding-left: 25px;
	margin-bottom: 21px;
}

h3 {
	color: #002a54;
	margin-top: 20px;
	margin-bottom: 10px;
}

h4 {
	color: #002a54;
	border-bottom: 1px solid #cccecf;
	padding: 20px 0 10px 0;
	margin-bottom: 10px;
}

	h4 span a {
		font-weight: normal;
		float: right;
		margin: -15px 10px 0 0;
	}
	
	*html h4 span a {
		margin: -25px 0 0 0;
	}

p.small {
	font-size:93%;
}
p.smaller {
	font-size:85%;
}
#container {
	width: 1000px;
	text-align:left;
	position:relative;
	margin:0 auto;
	padding-top: 7px;
	background: url(../images/page_bg_rounded_top.gif) 0 0 no-repeat #fff;
}
#pageWrapper {
	width: 1000px;
	w\idth: 993px;
	padding-left:7px;
	background: url(../images/container_border.gif) 0 0 repeat-y;
	border-bottom: 1px solid #d9dadb;
	float:left;
}
.clearfix: after {
    content: "."; 
    display: block; 
    height: 0;
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* PNG fix */
img#findBtn {
    behavior: url('iepngfix.htc');
}

/* LEFT NAV */

#leftNav {
	width: 232px;
	float: left;
	margin-right: 7px;
	background-color: white;
}
* html #leftNav {
	margin-right: 6px;
}
#leftNav #logo {
	background-color: white;
	float:left;
}

#leftNav a {
	font-weight: bold;
}

	#leftNav #yellow {
		color: #fff;
		margin: 0;
		border: none;
		border-top: 7px solid white;
		border-bottom: 7px solid white;
		float:left;
	}
	
		#leftNav #yellow ul {
			font-size: 85%;
		}
		
		#leftNav #yellow ul li {
			background: url(../images/yellow_bg.gif) 0 0 repeat-x #fdb914;
		}
		
		#leftNav #yellow ul li a {
			width:232px;
			w\idth:186px;
			line-height: 34px;
			display:block;
			color: #002a54;
			text-decoration: none;
			padding-left: 46px;
			background: url(../images/white_arrows.gif) 30px 50% no-repeat;
		}
		
			#leftNav #yellow ul ul {
				width:232px;
				display: block;
				line-height: 20px;
				background: #fdbb23;
				padding:5px 0;
			}	
			
			#leftNav #yellow ul ul a {
				color: #002A54;
				font-weight: normal;
				line-height: 14px;
				padding: 6px 0 6px 46px;
				font-size:108%;
				text-decoration: none;
				background: none;
			}
			#leftNav ul ul li a:hover {
				text-decoration: underline !important;
			}
			
			#leftNav #yellow ul ul li strong.current a {
				color: #fff;
			}	
  		#leftNav #yellow ul ul li {
				background-image: none;
	  	}
	#leftNav #blue {
		color: #fdb913;
		float:left;
	}
	
		#leftNav #blue ul {
			font-size: 85%;
		}
		
		#leftNav #blue ul li {
			background: url(../images/blue_bg.gif) 0 0 repeat-x #002b54;
		}
		
		#leftNav #blue ul li a {
			width:232px;
			w\idth:186px;
			line-height: 34px;
			display:block;
			color: #fff;
			text-decoration: none;
			padding-left: 46px;
			background: url(../images/yellow_arrows.gif) 30px 50% no-repeat;
		}
		
		#leftNav #blue .mastercard {
			min-height: 348px;
			height: auto !important;
			height: 348px;
			background: url(../images/blue_bg.gif) 0 0 repeat-x #002b54;
		}
		
		*html #leftNav #blue .mastercard {
			min-height: 395px;
			height: auto !important;
			height: 395px;
		}
		
			#leftNav #blue ul ul{
				width:232px;
				display: block;
				line-height: 20px;
				background: #002b54 !important;
				padding:5px 0;
			}
					
			#leftNav #blue ul ul a {
				color: #fdbb30 !important;
				font-weight: normal !important;
				font-size:108%;
				line-height: 14px;
				padding: 6px 0 6px 46px;
				text-decoration: none;
				background: none;
			}
			
			#leftNav #blue ul ul strong.current a {
				color: #9eafc8 !important;
			}

  		#leftNav #blue ul ul li {
				background-image: none;
				line-height: 25px;
	  	}


/* HIGHLIGHT CURRENT PAGE IN NAV */
/* Styles need to be added for each section */
#leftNav #blue ul li.current {
	background: url(../images/blue_selected_bg.gif) 0 0 repeat-x;
}
    #leftNav #blue ul ul li.current {
	    background-image: none;
    }
      #leftNav #blue ul li.current a {
		    font-weight: bold;
	    }

#leftNav #yellow ul li.current {
	background: url(../images/yellow_selected_bg.gif) 0 0 no-repeat;
} 
    #leftNav #yellow ul ul li.current {
	    background-image: none;
    }
      #leftNav #yellow ul li.current a {
		    font-weight: bold;
	    }



/* TOP NAV */
#topNav {
		width: 233px;
		height: 37px;
		background: url(../images/topNav_bg.gif) 0 0 no-repeat #ffffff;
		float: right;
		border-bottom: 7px solid #fff;
		margin-right:7px;
	}
	
		#topNav ul {
			font-size: 85%;
			line-height: 37px;
			margin-left: 10px;
			float: left;
		}
		
		#topNav ul li {
			display: inline;
			margin: 0 2px;
		}
		
		#topNav ul li a {
			color: #002a54;
			text-decoration: none;
			margin: 0 5px;
		}
		#topNav ul li a:hover {
			text-decoration: underline;
		}
		
	/* Search Engine */
	#search {
		float: right;
		margin: 8px 10px 0 0;
	}
	
		#search input {
			float: left;
			width:118px;
			margin-right: 10px;
			padding-left: 5px;
		}
	
		#search #findBtn {
			display: block;
			font-size: 93%;
			color: #fff;
			width: 71px;
			height: 20px;
			line-height: 19px;
			margin-top:1px;
			text-align: center;
			text-decoration: none;
			background: url(../images/find_btn.gif) 0 0 no-repeat;
			float: left;
            border: none;
		}
		#search #findBtn a {
			float: left;
		}
		
		#search #advanceSearch {
			display: block;
			font-size: 85%;
			color: #002a54;
			text-decoration: none;
			padding: 5px 10px 0 0;
		}

/* MAIN CONTENT AREA */

#mainContent {
	width: 508px;
	background: url(../images/content_bg.gif) 0 0 no-repeat;
	float: left;
	margin: 0;
	padding-bottom: 7px;
	padding-top: 10px;
	position:relative;
}

	/* Breadcrumb */
	#mainContent #breadcrumb {
		width: 508px;
		w\idth: 488px;
		padding: 0 10px 20px 10px;
		font-size: 85%;
		color: #002a54;
		margin: 0;
		float:left;
	}
	#mainContent #breadcrumb p {
		float:left;
	}	
		#mainContent #breadcrumb a {
			color: #9eafc8;
			text-decoration: none;
		}

	/* Banner Image Area */	
	#mainContent #homeBanner {
		width: 482px;
		padding: 0 5px 0 5px;
		float: left;
	}	
	
		#mainContent #homeBanner img {
			display: block;
			padding-top: 5px;
		}
	
	#mainContent #homeContent,
	#mainContent #insideContent {
		width: 508px;
		w\idth: 492px;
		font-size: 85%;
		padding: 0 8px;
		float: left;
/*		border-bottom: 1px solid #e7e8e9;*/
	}
	
		#mainContent #homeContent p,
		#mainContent #insideContent p, 
		#mainContent #insideContent ol {
			line-height: 15px;
			padding-top: 10px;
			text-align:left;
		}

	#mainContent #homeTwoColumn {
		width: 464px;
		font-size: 93%;
		line-height: 15px;
		border-top: 1px solid #fdb813;
		margin-top: 20px;
		padding: 15px 20px 0 0;
	}
	
		#mainContent #homeTwoColumn #leftColumn, 
		#mainContent #homeTwoColumn #rightColumn {
			width: 43%;
			float: left;
		}
		
		#mainContent #homeTwoColumn #leftColumn {
			margin-right: 53px;
		}

		#mainContent #homeTwoColumn #leftColumn a, 
		#mainContent #homeTwoColumn #rightColumn a {
			font-weight: bold;
			color: #4c4d4f;
		}
		
		#mainContent #homeTwoColumn #leftColumn img,
		#mainContent #homeTwoColumn #rightColumn img {
			padding-bottom: 10px;
		}
		
		#mainContent #homeTwoColumn #leftColumn p,
		#mainContent #homeTwoColumn #rightColumn p {
			width: 232px;
			padding-bottom: 15px;
		}
	
	#mainContent p {
		padding: 0 !important;
		margin: 10px 0 !important;
	}
	#mainContent ul {
		padding: 0 0 0 30px !important;
		margin-bottom: 10px !important;
		margin-top: 10px !important;
		line-height: 14px;
	}	
	#mainContent ul li {
		list-style-image: url(../images/content_bullet.gif);
	}
	
	#mainContent ul li a {
		color: #002a54;
		text-decoration: underline;
	}
	
	#mainContent a {
		color: #002a54;
		text-decoration: underline;
	}
		#mainContent .homeExtras {
			width: 486px;
			background: url(../images/home-extras-bg.gif) no-repeat left bottom;
			float: left;
			margin-top: 20px;
		}		
		* html #mainContent .homeExtras {
			margin-bottom: -12px;
		}


/*
		#mainContent #greyBox {
			width: 250px;
			background: url(../images/greyBox_bg.gif) 0 0 no-repeat;
			padding-bottom: 30px;
			margin-right: 5px;
			position:relative;
		}

		#mainContent #greyBox h1 {
			display: block;
			width: 231px;
			w\idth:201px;
			color: #002a54;
			padding: 15px 20px 10px 10px !important;
			position:relative;
		}
		
		#mainContent #greyBox h1 span {
			position:absolute;
			right:10px;
			top:15px;
		}
	
		#mainContent #greyBox p {
			width: 220px;
			w\idth: 200px;
			padding: 10px 10px 0 10px !important;
		}
		
		#mainContent #greyBox .date {
			color: #9eafc8;
			margin-top: 0;
			padding-top: 0;
		}
		
		#mainContent #greyBox hr {
			width: 200px;
			height: 1px;
			color: #d7d8da !important;
			border-bottom:none;
			border-width:1px 0 0 0;
		}	
                * html #mainContent #greyBox hr {
			margin-left: 20px;
		} 

*/

                #mainContent #flashBanner {
    		        width: 505px;
                        text-align: center;
                        padding-left: 4px;
                        padding-bottom: 15px;
                }

                #mainContent #greyBox {
			border: 1px solid #DDDDDD;
		        width: 477px;
			padding-bottom: 5px;
			margin-bottom:10px;
			/*float: left; */
			/* used to have TWO boxes on the homepage, these two lines will have to be toggled to display both side by side(clear OR float, not both) */ 
			clear: both;
			position:relative;
		}

		#mainContent #greyBox h1 {
			display: block;
			width: 231px;
			w\idth:201px;
			color: #002a54;
			padding: 15px 20px 10px 10px !important;
			position:relative;
		}
		
		#mainContent #greyBox h1 span {
                        display: block;
                        width: 150px;
                        text-align: right;
			position:absolute;
			left: 317px;
                        _left: 307px;
			top: 15px;
		}
	
		#mainContent #greyBox p {
		        padding: 10px 10px 0 10px !important; 
		}
		
		#mainContent #greyBox .date {
			color: #9eafc8;
			margin-top: 0;
			padding-top: 0;
		}
		
		#mainContent #greyBox hr {
			height: 1px;
                        width: 96%;
			background: #d7d8dal; 
                        color: #d7d8da;
			border-bottom: none;
			border-width: 1px 0 0 0;
               }		
		* html #mainContent #greyBox hr {
			margin-left: 10px;
		}

		
		#mainContent #blueBox {
			width: 241px;
			background: url(../images/blueBox_content_bg.gif) 0 0 no-repeat;
			padding-bottom: 30px;
			float: left;
			text-align: center;
		}
		
		#mainContent #blueBox h1 {
			width: 231px;
			height: 20px;
			color: #002a54;
			line-height: 20px;
			padding: 10px 0 0 9px;
		}
		
		#mainContent #blueBox h5 {
			width: 225px;
			margin-left: 8px;
			font-size: 190%;
			color: #fdb913;
			font-weight: normal;
			line-height: 25px;
			border-bottom: 1px solid #7f95a9;
			padding-bottom: 20px;
		}
		
			#mainContent #blueBox h5 span {
				font-weight: bold;
			}
	
	/* Button Styles */
	.applyBanking {
		display: block;
		width: 186px;
		height: 20px;
		line-height: 20px;
		font-weight: bold;
		color: #fff !important;
		text-decoration: none;
		text-align: center;
		background: url(../images/apply_onlineBanking_btn.gif) 0 0 no-repeat;
		margin-bottom: 30px;
	}
	
	/* Tab Styles */
	#mainContent #tabs {
		width: 492px;
		height: 30px;
		background: url(../images/tab_content_top.gif) 0 25px no-repeat;
		margin-top: 20px;
		margin-left: -3px;
	}
	* html #mainContent #tabs {
		background-position: 0 26px;
	}
		#mainContent #tabs ul {
			list-style-type: none;
			width: 492px;
			height:26px;
			margin: 0 !important;
			padding: 0 !important;
			float: left;
			background-color: transparent;
		}
		
		#mainContent #tabs ul li {
            list-style-type: none;
			height: 26px;
			float: left;
			background: url(../images/tab_right.gif) top right no-repeat;
			margin: 0 1px 0 0;
			padding: 0 10px 0 0;
			list-style-image: none !important;
			/* border-bottom: 1px solid #e1e2e4; */
		}
		#mainContent #tabs ul li.current {
			/* border-bottom: 1px solid #f6f6f7; */
		}
		
		#mainContent #tabs ul li a {
			display: block;
			font-size: 93%;
			color: #bbbdbf;
			font-weight: bold;
			text-decoration: none;
			line-height: 27px;
			float: left !important;
			background: url(../images/tab_left.gif) top left no-repeat;
			padding-left: 10px;
		}
		
		#mainContent #tabs ul li a.current {
			color: #002a54;
		}	



#mainContent #tabs ul li.greenTab{
			height: 26px;
			float: left;
			background: url(../images/tab_right_green.gif) top right no-repeat;
color:#FFF;
			margin: 0 1px 0 0;
			padding: 0 10px 0 0;
			list-style-image: none !important;
			/* border-bottom: 1px solid #e1e2e4; */
}

#mainContent #tabs ul li.greenTab a{
			display: block;
			font-size: 93%;
			color: #FFF;
			font-weight: bold;
			text-decoration: none;
			line-height: 27px;
			float: left !important;
			background: url(../images/tab_left_green.gif) top left no-repeat;
			padding-left: 10px;
}

#mainContent #tabs ul li.greenTabCurrent a{
color: #5A9751;
}



	
			#mainContent #tabContent h1 {
				clear: both;
			}
			
			*html #mainContent #tabContent h1 {
/*				margin-top: -20px;*/
			}
		
			#mainContent #tabContent {
				width: 493px;
				background: url(../images/tab_content_bg.gif) -1px 0 repeat-y;
				border-bottom: 1px solid #caccce;
				padding-bottom: 20px;
				margin-left: -3px;
			}




#mainContent div#tabContent table.tabTable{
background: url(../images/tab_content_bg.gif) -2px 0 repeat-y;
}

 
#mainContent div#tabContent table.tabTable td, #mainContent div#tabContent table.tabTable th{
border:1px solid #AAA;
padding:8px;
}

#mainContent div#tabContent table.tabTable td p{
margin-top:0 !important;
} 
			
		
			#mainContent #tabContent h3 {
				margin-left: 15px;
			}
			
			#mainContent #tabContent p {
				width: 95%;
				margin: 0 0 0 15px;
			}

                        #mainContent #tabContent div.element {
                                padding-left: 7px;
                        }
			
		/* Expand Styles */
		
		#mainContent #tabContent #expandList ul {
			margin:0;
		}
		
		#mainContent #tabContent #expandList ul li {
			list-style-type: none;
			list-style-image: none !important;
			padding-left: 20px;
			margin-left: -20px;
			background: url(../images/plus_icon.gif) 0 5px no-repeat;
		}
				
			#mainContent #tabContent #expandList .expandInfo {
				width: 472px;
				background-color: #fff;
				border-top: 1px solid #dddedf;
				border-bottom: 1px solid #dddedf;
				margin: 10px 0 0 -20px;
				padding-bottom: 20px;
                                overflow: hidden;
			}
			
			#mainContent #tabContent #expandList .expand {
				background: url(../images/minus_icon.gif) 0 5px no-repeat;
			}
			
			#mainContent #tabContent #expandList .column {
			  float: left;
			  width: 230px;
			  w\idth: 220px;
			  padding-left:10px;
			  overflow: hidden;
			}

			#mainContent #tabContent #expandList .expandInfo .fieldTitle {
				color: #002a54;
				float: left;
				display: block;
				width: 90px;
				clear: both;
			}

			#mainContent #tabContent #expandList .expandInfo .fieldContent {
				float: left;
				display: block;
				width: 90px;
			}
			
			#mainContent #tabContent #expandList .expandInfo .branchProfile{
				color: #002a54;
				float: left;
				display: block;
				width: 230px;
				clear: both;
			}


/* Table Styles */
#mainContent table {
	width: 96%;
	border-collapse:collapse;
	background-color: #fff;
	margin-left: 5px !important;
}
#mainContent table.ratetable {
	width: 226px !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
	border: solid #dddedf;
	border-width: 1px;
	margin-bottom: 6px;
}
#mainContent table.striped td, #mainContent table.striped th {
/*	border:solid #dddedf;
	border-width: 0 0px; */
	border-bottom: #dddedf solid 1px;
	padding: 5px 3px;
	background-color: #fff;
}
#mainContent table.striped tr.odd td, #mainContent table.striped tr.odd th{
	background-color: #e6e6e7 !important;
}
#mainContent table td.greyCell{
	background-color: #e6e6e7 !important;
}
#mainContent table td.centered p, #mainContent table th.centered p{
	text-align: center !important;
}
#mainContent table td.borderTop{
	border:solid #dddedf;
	border-width: 1px 0 0 0;
}

/* FEATURE LINKS AREA */
#featureLinks {
	width: 233px;
	float:left;
	margin-left:6px;
}
	#featureLinks img {
		padding:0 0 5px 0;
		margin:0;
		float:left;
	}
	
	#featureLinks p {
		padding-top:0 !important;
		float:left;
	}
	#featureLinks p a {
		float:left;
	}
	
	/* TELE-BANKING */
#teleBanking {
	width: 233px;
	position: absolute;
	top: 580px;
	left: 755px;
	clear: both;
}

	#teleBanking h1 {
		font-size: 108%;
		color: #002a54;
		font-weight: bold;
		border-bottom: 1px solid #dddedf;
		padding-bottom: 10px;
		margin-bottom: 5px;
	}
	
	#teleBanking h1 span {
		font-size: 77% !important;
		font-weight: normal;
		float: right;
		margin-top: -15px;
	}
	
	#teleBanking .box {
		display: block;
		width: 71px;
		height: 42px;
		text-indent: -9999px;
		border: 1px solid #ccc;
		float: left;
		margin: 10px 10px 0 0;
	}
	
	#teleBanking p {
		font-size: 85%;
		padding-bottom: 5px;
	}
	
	#teleBanking .service {
		padding-top: 15px;
		font-weight: bold;
		clear: right;
	}
	
	#teleBanking .telNumber {
		font-weight: normal;
	}
				
/* FOOTER AREA */
#footer {
	width: 993px;
	padding: 18px 0 11px;
	font-size: 77%;
	margin: 0;
	float:left;
	background: url(../images/footer_bg.gif) 0 0 no-repeat;
}

	#footer p {
		width: 243px;
		float: left;
		background-color: #fff;
	}

	#footer ul {
		float: left;
	}
	
	#footer ul li {
		list-style: none;
		display: inline;
	}
	
	#footer ul li a {
		color: #4c4d4f;
	}
	#footer ul li a:hover {
		text-decoration:none;
	}