/*JP 5-1-2013*/

/*CONTENTS:

Layout framework for responsive columns, site wrappers, 
and dealing with all layout elements at defined breakpoints.
_____________________________________________________________
1. Column Layouts
	1.1 Percentage based columns
	1.2 Header and Page Body Columns
	1.3 Inner padding for responsive columns
2. Responsive Column Layouts
3. Header and Page Body Columns
4. Site Layout Containers
5. Clearfix and Clearing
6. Floating
7. Show or hide for varying screen sizes
8. Header Elements
	8.1 header elements
	8.2 header search and locator boxes and their mobile versions
9. Homepage Elements
	9.1 Homepage Banners
	9.2 Homepage Login
	9.3 Homepage Content Areas

10. General Responsive Elements
	10.1 
	10.2 Smaller than 1280 wide but larger than 768 wide
	10.3 Smaller than 1024 wide
	10.4 At least 768 wide
	10.5 Between 640 wide and 768 wide
	10.6 Smaller than 768 wide
	10.7 Smaller than 640 wide
	10.8 Smaller than 480 wide
	10.9 Smaller than 400 wide
	


*/

/* ================ 1. Column Layouts ================ */

/*1.1 Percentage based columns*/

.onewhole {
	width: 100%;
}
.onehalf {
	width: 50%;
	margin: auto;
}
.onethird {
	width: 33.333333%;
	margin: auto;
}
.twothirds {
	width: 66.666666%;
	margin: auto;
}
.onefourth {
	width: 25%;
	margin: auto;
}
.threefourths {
	width: 75%;
	margin: auto;
}
.onefifth {
	width: 20%;
	margin: auto;
}
.twofifths {
	width: 40%;
	margin: auto;
}
.threefifths {
	width: 60%;
	margin: auto;
}
.fourfifths {
	width: 80%;
	margin: auto;
}
.onesixth {
	width: 16.666666666666667%;
}
.left .inner {
	padding: 1em;
}
.right .inner {
	padding: 1em;
}
div.inner:empty {
	display: none;
}
.onewhole, .onehalf, .onethird, .twothirds, .onefourth, .onefifth, .twofifths, .threefifths, .fourfifths, .onesixth {
	float: left;
}

/*================= 2. Responsive Column Layouts =================*/

@media screen and (max-width: 769px) {
/*make all the wider columns full width and clear them*/
.threefourths, .threefifths {
	width: 100% !important;
	clear: both;
}
}

@media screen and (max-width: 767px) {
/*make all the wider columns full width and clear them*/
.col1-wide, .col2-wide {
	width: 100% !important;
	clear: both;
}
}

@media screen and (max-width: 600px) {
/*make the narrow columns full width and clear them*/
.onefourth, .onethird, .onehalf, .twothirds {
	width: 100%;
	clear: both;
}
}

@media screen and (max-width: 480px) {
/*make the narrowest columns full width and clear them*/
.onefifth, .onesixth {
	width: 100% !important;
	clear: both;
}
}
/*but don't do it in these places...*/

.header-bar .onethird {
	width: 33.333333% !important;
	clear: none;
}
.header-bar .twothirds {
	width: 66.666666% !important;
	clear: none;
}
.header-bar .onehalf, .header-menu .onehalf {
	width: 50% !important;
	clear: none;
}
/*================= 3. Header and Page Body Columns =================*/

.col1, .col1-head {
	margin: 0;/*max-width:250px;*/
}
.col2, .col2-head {
	margin: 0;/*max-width:460px;*/
}
.col3, .col3-head { /*max-width:250px;*/
}
.col1-head {
	margin: 0;
	width: 25.2525252525253% /*250/990*/;
	float: left;
}
.col2-head {
	margin: 0 auto;
	width: 74.7474747474747% /*740/990*/;
	float: right;
	display: table;
	position: relative;
}
.col2-head .upper, .col2-head .lower {
	float: right;
	clear: both;
	width: 100%;
}
.col2-head .upper {
	vertical-align: top;
	text-align: right;
}
.col2-head .lower {
	vertical-align: bottom;
	padding-right: 8px;
}
/*this is where we set the width of the site columns (if custom)*/
.col1, .col1-wide, .col2, .col2-wide, .col3, .colfull, .col-full {
}
.col1 {
	margin: 0;
	max-width: 30.30303030303% /*300/990*/;
	float: left;
}
.col1-wide {
	width: 69.69696969697% /*745/990*/;
}
.col2 {
	margin: 0 auto;
	max-width: 43.434343434343% /*430/990*/;
	float: left;
	overflow: hidden;
}
.col2-wide {
	overflow: hidden;
	min-width: 69.69696969697%;
}
.col3 {
	margin: 0;
	max-width: 28.282828282828% /*280/990*/;
	float: left;
	overflow: hidden;
}
.colfull, .col-full {
	width: 100%;
	display: block !important;
}
/*1.3 Inner padding for responsive columns*/

.col1 .inner {
	padding: 1em 15% 0 0;
}
.col1-wide .inner {
	padding: 1em 0;
}
.col2 .inner, .col2-wide .inner {
	padding: 1em;
}
.col3 .inner {
	padding: 1em 0 0 15%;
}
/*1.4 Homepage Columns*/
.col1-home {
	width: 72.7272727272727%
}
.col2-home {
	width: 27.2727272727273%
}
.col2-home-inner {
	padding: 0 0 0 20px;
}
/* ================ 4. Site Layout Containers ================ */

.wrapper {/*global container to set width and center*/
	max-width: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	float: none !important;
}
.wrapper_inner {
}
.page_body {
	max-width: 990px;
	padding: 0;
	margin: auto;
	clear: both;
}
.header, .footer {
	width: 100%;
	margin: auto;
}
.header.bar-main {
	margin: 0;
}
.header .inner {
	max-width: 990px;
	margin: auto;
	padding: 0 10px;
}
.footer .inner {
	margin: auto;
}
.page_body, header .inner, footer .inner {
	padding: 0 2%;
}
/* ================ 5. Clearfix and Clearing ================ */

.clearfix:before, .clearfix:after, .fix:before, .fix:after {
	content: "\0020";
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix:after, .fix:after {
	clear: both;
}
.clearfix, .fix {
	zoom: 1;
}
.clear {
	clear: both;
}
.clearleft {
	clear: left;
}
.clearright {
	clear: right;
}
/* ================ 6. Floating ================ */

.left {
	float: left;
}
.right {
	float: right;
}
/*================= 7. Show or hide for varying screen sizes =================*/



.col2 .sidebar, .tabbedca-title {
	display: none !important;
}
/* don't display promotions in the main content column (yet)*/

.col1-wide .sidebar, .col2 .sidebar, .col2-wide .sidebar {
	display: none;
}
/* ================ 8. Header Elements ================ */

/*8.1 header elements*/

/*dont display the mobile header by default*/
div.header-mobile {
	display: none;
}
div.header-mobile div.header-bar a {
	padding: 12px 0px 11px 10px;
}

/*search container*/
div.header div.search {
	margin: 10px 0 !important;
	float: right;
}
/*topnav container*/
div.topnav {
	clear: both;
	float: right;
	position: relative;
	z-index: 10;
}

@media screen and (max-width: 767px) {
/*show the mobile menu now*/
div.header-mobile {
	display: block;
}
/*remove the top, split and main nav because they are all accomodated in the mobile menu*/
div.topnav, div.nav-split, div.nav-main, header .inner div.search, div.mega-wrapper {
	display: none;
}
.col1-wide .sidebar, .col2 .sidebar, .col2-wide .sidebar {
	display: block;
}
button.search-button {
	font-size: 20px;
}
.col1-head, .col2-head {
	width: 50%
}
.header.bar-main {
	margin: 0;
}
}

@media screen and (max-width: 660px) {
div.header-mobile div.header-bar div.onethird {
	width: 15% !important;
}
div.header-mobile div.header-bar div.twothirds {
	width: 85% !important;
}
}
/*8.2 header search and locator boxes and their mobile versions*/

/*main containers for the search and locator fields at full screen size*/
.site-search, .site-locator {
	float: left;
	margin: 0 0 0 1em;
}
/*the search and locator boxes at full screen size*/
.search-box, .locator-box {
	width: 160px;
	position: relative;
	float: right;
	display: inline-block;
	z-index: 0;
}
/*the search and locator boxes at all screen sizes (mobile overrides follow)*/
input.search-field, input.locator-field {
	padding: 0 8px !important;
	height: 30px;
	width: 85%;
	margin: 0;
	border: 1px solid !important;
	background: #fff;
	box-shadow: none !important;
	font-family: 'Avenir W01', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 100;
}
input.search-field {
	border-color: #007C88;
	color: #007C88;
}
input.locator-field {
	border-color: #77942b;
	color: #77942b;
}
/*search and locator fields and the buttons for ALL screen sizes*/
input.search-field, button.search-button, input.locator-field, button.locator-button {
}
input.search-field:focus, button.search-button:focus, input.locator-field:focus, button.locator-button:focus {
	outline-width: 0;
}
/*search and locator fields at mobile screen size only*/
input.mobile-search-box, input.mobile-locator-box, button.mobile-search-button, button.mobile-locator-button {
	height: 50px;
	border: none;
}
input.mobile-search-field, input.mobile-locator-field {
	height: 49px;
	border: none !important;
	border-bottom: 1px solid #007c88 !important;
	font-size: 20px;
}
input.mobile-search-field {
	border-color: #007C88;
	color: #007C88;
}
input.mobile-locator-field {
	border-color: #77942b;
	color: #77942b;
}
/*the search and locator boxes at mobile screen size*/
.mobile-search-box, .mobile-locator-box {
	width: 0px; /*start with it closed*/
	-webkit-transition: width .5s ease;
	-moz-transition: width .5s ease;
	-o-transition: width .5s ease;
	transition: width .5s ease;
}
/*make the mobile search boxes wider when their respective button is clicked*/
.mobile-search-box.search-box-open, .mobile-locator-box.locator-box-open {
	width: 60%;
}
/*format the search and locator buttons for ALL screen sizes*/
button.search-button, button.locator-button {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	color: #fff;
	float: right;
	display: inline-block;
	padding: 4px;
	height: 32px;
	width: 32px;
	position: relative;
	z-index: 1;
}
button.search-button {
	background-color: #007c88;
	font-size: 24px;
}
button.locator-button {
	background-color: #77942b;
	font-size: 20px;
}
/*format the search and locator buttons for MOBILE only screen sizes*/

button.mobile-search-button, button.mobile-locator-button {
	height: 50px;
	width: 15%;
	float: right;
}
button.mobile-search-button {
	background-color: #005880;
}
button.mobile-locator-button {
	background-color: #77942b;
}
.header-mobile div.search {
	display: block !important;
	margin: 0 !important;
}
.header-mobile div.search {
	width: 100%;
}

@media screen and (max-width: 500px) {
.header-mobile div.search .search-box-open, .header-mobile div.locator .locator-box-open {
}
.mobile-search-button, .mobile-locator-button {
}
}
/* ================ 9. Homepage Elements ================ */

/*9.1 Homepage Banners and Banking Login*/

.inner .banking-inner {
	max-width: 990px;
	margin: auto;
	position: relative;
}

@media screen and (max-width:767px) {
.inner .banking-inner {
	position: static;
}
}
/* ================ 10. General Responsive Elements ================ */

img, iframe {
	max-width: 100%;
}

/* 10.2 Smaller than 1280 wide but larger than 768 wide */
@media screen and (max-width: 1280px) and (min-width: 768px) {
}

/* 10.3 Smaller than 1024 wide */
@media screen and (max-width: 1024px) {
}

/* 10.4 At least 768 wide */
@media screen and (min-width: 769px) {
}

/* 10.5 Between 640 wide and 768 wide */
@media screen and (min-width: 641px) and (max-width: 768px) {
}

/* 10.6 Smaller than 768 wide */
@media screen and (max-width: 768px) {
/*	Interior page layout responsive...*/
div.nav-main ul {
	display: block;
}
/*homepage primary content areas change to decked layout*/
.home_content_area {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border-right: none;
	clear: both;
}
/*tabbed content areas converted to non-tabbed areas*/
div.ca_tabs {
	display: none;
}
div.ca_panel {
	display: block !important;
	visibility: visible !important;
}
/*re-layout regular content areas*/

.footer .inner .footer-left, .footer .inner .footer-right {
	width: 100%;
	clear: both;
}
.footer-left, .footer-right {
	float: right;
	padding: 0 0 10px 0;
}
div.footer_quicklinks {
	width: 100%;
	margin: 10px 0;
}
div.footer_quicklinks ul li {
}
div.footer_quicklinks ul li:last-child {
	border-right: none;
}
.tabbedca-title {
	display: block !important;
}
.mainnav-col #subnav_div {
	display: block;
}
div.nav-sub {
	margin: 0 0 30px 0 !important;
	padding: 5px 0 0 0;
}
.mainnav-col #subnav_div .nav-sub h3 {
	display: none;
}
.mainnav-col #subnav_div.nav-sub ul li.nav-item {
	display: inline-block;
	width: auto;
	vertical-align: middle;
	margin: 0 1%;
}
div.nav-sub ul li.nav-item a {
	width: auto !important;
}
div.nav-sub ul li.nav-item a:hover {
}
div#calloutlink a {
	font-size: 95% !important;
}
}

/* 10.7 Smaller than 640 wide */
@media screen and (max-width: 767px) {
/*=========== hide col3 and widen col2 ===========*/
.col1 {
	display: none;
}
.col1-wide, .col2, .col2-wide, .col3 {
	max-width: 100%;
	clear: both;
	border-right: none;
}
/*=========== display sidebar in col2, not col1 or col3 ===========*/

.col1-wide .sidebar, .col2 .sidebar, .col2-wide .sidebar {
	display: block !important;
	margin: 3em 0 0 0;
}
.col1 .sidebar, .col3 .sidebar {
	display: none !important;
}
.header .inner {
	border-bottom: none;
	padding: 10px 1em;
}
.header-info-main {
	display: none;
}
.header-info-mobile {
	display: block;
}
nav.menu-main {
}
nav.menu-mobile {
}
input.search_field, input.search_active {
	float: none;
	width: 100%;
}
div.search_form input.submit, a.search_button {
}
header {
	width: 100% !important;
	max-width: 100%;
}
div.nav-top {
	margin: 4px 0;
	text-align: center !important;
	clear: both;
	width: auto !important;
}
div.header-info-mobile {
	text-align: center;
}
div.header-info-mobile .head-phone {
	display: inline-block;
	text-align: left;
	padding: 0;
	margin: 0 6px;
}
div.search_form {
}
.header .logo {
	background-position: left;
	margin: 25px 0 0 !important;
	width: 100% !important;
	clear: both;
	position: relative;
	z-index: 10;
}
.header .logo a {
	margin: auto;
	width: 100% !important;
	margin: 0 !important;
}
.header .logo {
	margin: 10px auto !important;
	background-position: center;
}
.header .inner .col1-head, .header .inner .col2-head {
	display: block;
	width: 100%;
	clear: both;
	text-align: center;
	min-height: 0;
}
.header .inner .col2-head .upper {
	display: block;
	float: none;
}
.header .inner .col2-head .upper a {
	max-width: 100%;
	width: 39%;
	text-align: center;
}
}

/* 10.8 Smaller than 680 wide */
@media screen and (max-width: 767px) {
.header .inner .col1-head {
}
.header .inner .col2-head {
	display: table
}
.header .inner .col2-head .upper {
	display: table-cell;
	float: none;
	height: auto;
	vertical-align: middle;
}
.header .inner .col2-head .lower {
	display: none;
}
}

/* 10.8 Smaller than 480 wide */
@media screen and (max-width: 480px) {
/*home banking login area*/
div.home_login {
	min-height: 200px;
}
div.home_login_inner fieldset.login {
	width: 100%;
}
div.home_login_inner label, div.home_login_inner input[type=text], div.home_login_inner input[type=password] {
	width: 96%;
}
div.home_login_inner fieldset.submit {
	float: right;
	width: 73px;
	height: 35px;
	padding-top: 0;
	margin: 0;
	clear: both;
}
div.home_login_inner .hblinks {
	margin: 0;
}
/*.tinynav { display: block; margin:auto !important; background-color: #444; color: #fff; background-image:none; border: solid 1px #666; width:270px;}
	    #main-nav { display: none }*/

div.nav-split ul.nav-menu li.nav-item a {
	font-size: 1em;
}
div.main_nav_phone {
	display: none;
}
div.main_nav_phone div.nav-sub {
	margin: -20px 0 30px;
}
div.main_nav_phone .nav-sub h3 {
	display: none;
}
.footer_bottom .inner .footer-left, .footer_bottom .inner .footer-right {
	width: 100%;
	clear: both;
}
.mainnav-col #subnav_div, .col2 {
}
.ratehead .rate_date {
	clear: left;
	float: left
}
#contact_form fieldset .left {
	clear: right;
	width: 100%
}
#contact_form fieldset .right {
	float: left;
	width: 100%
}
#contact_form fieldset .right input[type=text], #contact_form fieldset .right input[type=tel], #contact_form fieldset .right input[type=password], #contact_form fieldset .right input[type=email], #contact_form fieldset .right textarea, #contact_form fieldset .right select {
	width: 100%
}
#contact_form fieldset .right input.formkey {
	width: 20%;
	float: left;
}
input.button, input[type=submit], a.button, a.button:link {
	display: block;
	width: auto;
}
}

/* 10.9 Smaller than 400 wide */
@media screen and (max-width: 400px) {
ul#main-nav li.nav-item a {
	font-size: 1.8em;
}
div.nav-main ul {
	width: 100% !important;
}
input.search_button {
	left: 2px;
}
}

/* screen reader only */
.just-sr {position: absolute; 
left:-10000px; 
top:auto; 
width: 1px; 
height: 1px; 
padding: 0; 
margin: -1px; 
overflow: hidden; 
clip: rect(0,0,0,0); 
border: 0; 
display:block;}