/* -----------------------------------------------------------
   
		screen.css
		Copyright Fusionary Media
		Modified by Hastings City Bank

   * defines site specific styles for screen

-------------------------------------------------------------- */


/* @Colors
-------------------------------------------------------------- */

/*
Links...................#016b8a
Text....................#666
Light Text..............#999
Red Headings............#822433
Footer Pipes............#ccc
Header Pipes............#b74154

Aside Nav Hover.........#484231
Aside Nav BG............#e3d7af
Aside Beige Text........#846a54

Heading (orange)........#e89121
Heading (red)...........#b73232
Heading (green).........#9eb932
Heading (lt blue).......#60beef
Heading (dk blue).......#2294b3
*/


/* @Defaults
-------------------------------------------------------------- */

body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	vertical-align: middle;
}

a:focus, 
a:hover     { text-decoration: underline;}
a           { color: #016b8a; text-decoration: none; vertical-align: middle; }


/* @Grid (12 col grid: 48px col / 12px gutter)
-------------------------------------------------------------- */

.span-1  { width: 48px;}
.span-2  { width: 108px;}
.span-3  { width: 168px;}
.span-4  { width: 228px;}
.span-5  { width: 288px;}
.span-6  { width: 348px;}
.span-7  { width: 408px;}
.span-8  { width: 468px;}
.span-9  { width: 528px;}
.span-10 { width: 588px;}
.span-11 { width: 648px;}
.span-12 { width: 708px; margin: 0; }

.col{
	float: left;
	margin: 0 12px 0 0;
}
.mod{
	float: left;
	margin: 0 12px 12px;
}
.blk{
	display: block;
	margin: 0 0 12px;
}
	
/* @Structure
-------------------------------------------------------------- */

.container,
#footer,
#body-inner{
  width: 708px;
  margin: 0 auto;
	padding: 0 31px; 
}

body{
	background: url(/images/ui/bld-stripe.gif) repeat-x;
	margin: 0 0 3em;
	
}

#header{
	position: relative; /*for abs pos of nav*/
	width: 732px;
	margin: 0 auto;
	height: 108px;
	padding: 0 19px;
	background:  url(/images/ui/bld-top.gif) no-repeat 0 72px;	
}

#body{
	background:  url(/images/ui/bld-body.gif) repeat-y;
	width: 770px; /*708 + 31x2 padding*/
	margin: 0 auto;	
}
body.aside #body{
	background-image:  url(/images/ui/bld-body-aside.gif);
}

#body-inner{
	background:  url(/images/ui/bld-top.gif) no-repeat 0 -36px;
	overflow: hidden;
	padding-top: 12px;
}
body.aside #body-inner{
	padding-top: 0;
}

#footer{
	background:  url(/images/ui/bld-footer.gif) no-repeat;
	padding-top: 27px;
	position: relative; /*abs pos of geotrust*/
}
body.aside #footer{
	background-image: url(/images/ui/bld-footer-aside.gif);
}

#content-main{
	padding: 0 12px;
	width: 444px; /*468 (8cols) - 24px padding*/
}
#content-main2{
        padding: 0 12px;
	        width: 680px; /*468 (8cols) - 24px padding*/
		}
#content-aside{
	width: 210px; /*4 cols - 18px padding*/
	margin-right: 0;
	padding-left: 18px;
}
#content-aside.no-nav{
 margin-top: 12px;
}
body#home #content-main {
	margin-top: 0;
}
#content-aside,
#content-main{
	margin-bottom: 1.5em;
}

body#home #content-secondary{
	width: 228px;
	margin-right: 0;
}

/* @Structure - Stretch Beyond Padding
------------------------------- */
#content-main .blk{
	margin: 0 -12px 12px;
}


/* @Header
-------------------------------------------------------------- */

#branding-logo{
	background: url(/images/ui/branding-logo.png) no-repeat;
	display: block;
	width: 398px;
	height: 72px;
}
#branding-logo a{
	display: block;
	width: 398px;
	height: 55px;
}
#branding-logo{
	position: relative;
	left: -41px;
}

/* @Header - Nav-Links
------------------------------- */
#nav-links{
	position: absolute;
	right: 19px;
	top: 18px;
	line-height: 1; /*sets line height to 1 to position vertically accurately*/
}
#nav-links li{
	display: inline;
	border-left: 1px solid #b74154;
	padding: 0 0 0 .75em;
	margin: 0 0 0 .75em;
}
#nav-links li.first{
	border: none;
	padding-left: 0;
	margin-left: 0;
}

#nav-links a{
	color: #fff;
	font-weight: bold;
}
#nav-links a:hover{
	text-decoration: underline;
}

/* @Header - Srch-Global
------------------------------- */
#srch-global{
	position: absolute;
	right: 29px;
	top: 82px;
}
#srch-global fieldset{
	padding: 0;
	border: 0;
	clear: none;
	margin: 0;
}
#srch-global legend{
	display: none;
}
#srch-global-input{
	width: 94px;
	float: none;
	padding: 0 2px;
	color: #666;
}
#srch-global div.text{
	margin: 0 4px 0 0;
	float: left;
}
#srch-global input.submit{
	float: left;
	position: relative;
	top: -1px;
}


/* @Header - Nav-Main
------------------------------- */
/* main nav */

#nav-main {
  padding: 0;
  position: relative;
  clear: both;
  list-style: none;
	line-height: 1.0;
	margin: 0;
}
ul#nav-main ul {
	position: absolute;
	top:-999em;
}

#nav-main li {
	float:left;
	position:relative;
	z-index: 9;
}
#nav-main a {
  display: block;
	height: 36px;
  background: url(/images/ui/nav-main.png) no-repeat 0 0;
  text-indent: -9000em;
  overflow: hidden;
}
#nav-main a:hover {
  background-position: 0 -36px;
}  

#nav-main li.nav-home a {
  width: 59px;
}
#nav-main li.nav-home a:hover,
#nav-main li.nav-home a.active { background-position: 0 -36px; }  

#nav-main li.nav-personal a {
  width: 129px;
  background-position: -59px 0;
}
#nav-main li.nav-personal a:hover,
#nav-main li.nav-personal a.active { background-position: -59px -36px; }  

#nav-main li.nav-business a {
  width: 128px;
  background-position: -188px 0;
}
#nav-main li.nav-business a:hover,
#nav-main li.nav-business a.active { background-position: -188px -36px; }

#nav-main li.nav-invest a {
  width: 139px;
  background-position: -316px 0;
}
#nav-main li.nav-invest a:hover,
#nav-main li.nav-invest a.active { background-position: -316px -36px; }

#nav-main li.nav-about a {
  width: 60px;
  background-position: -455px 0;  
}
#nav-main li.nav-about a:hover,
#nav-main li.nav-about a.active { background-position: -455px -36px; }

#nav-main li.nav-contact a {
  width: 70px;
  background-position: -515px 0;
}
#nav-main li.nav-contact a:hover,
#nav-main li.nav-contact a.active { background-position: -515px -36px;}

/* second level */

#nav-main li:hover ul,
ul#nav-main li.sfHover ul {
	left:-1px;
	top: 36px;
}

#nav-main li ul {
  background: #dff6fa;
  margin-left: 0;
  padding-left: 0;
	border: 1px solid #c5b991;
	border-bottom: none;
	border-top: none;
	width: 15em;
}
#nav-main li li {
  padding: 0;
  display: block;
  float: none;
  border-bottom: 1px solid #dac7ac;
	line-height: 2em;
}

#header #nav-main li li a,
#header #nav-main li li a:hover {
  height: auto;
	width: auto;
  text-indent: 0;
  background-image: none;
	padding: 0 .75em;
  text-decoration: none;
	display:block;
}
#header #nav-main li li,
#header #nav-main li li a {
  background-color: #dff6fa;
}
#header #nav-main li li a:hover {
  background-color: #FEFDFA;
}


/* @Footer
-------------------------------------------------------------- */

#footer{
	color: #999;
}
#nav-sup{
	margin-bottom: .75em;
}
#nav-sup li{
	display: inline;
	border-left: 1px solid #ccc;
	padding: 0 0 0 .75em;
	margin: 0 0 0 .75em;
}
#nav-sup li.first{
	border: none;
	padding-left: 0;
	margin-left: 0;
}

#site-info ul{
	overflow: hidden;
}
#site-info li{
	float: left;
	margin-right: 12px;
}
#site-info li.fdic{
	padding-left: 40px;
	background: url(/images/ui/logo-fdic.gif) no-repeat left top;
}
#site-info li.fdic abbr{
	border: none;
}
#site-info li.hud{
	padding-left: 20px;
	background:  url(/images/ui/logo-hud.gif) no-repeat left top;
}
#site-info li.geotrust{
	text-align: right;
	position: absolute;
	right: 12px;
	top: 35px;
}
#site-info li.geotrust a{
	displayblock;
}



/* @Body
-------------------------------------------------------------- */

#content-main{
	margin-top: 1.5em;
}
#content-main h3{
	font-size: 21px;
	color: #822433;
	line-height: 24px;
	margin-bottom: .714em;
}
#content-main h4{
	color: #822433;
	font-size: 16px;
	margin-bottom: .25em;
}

/* @Body - nav-interior
------------------------------- */
#nav-interior{
	margin: 0 -12px 1.5em -18px; /*balances padding on aside*/
}

#nav-interior li{
	padding-left: 1px;
}
#nav-interior li a{
	border: 1px solid #fefdfa;
	border-bottom-color: #c5b991;
	border-right: none;
	border-left: none;
}
#nav-interior a{
	line-height: 2.5em;
	display: block;
	font-weight: bold;
	font-size: 12px;
	padding: 0 18px;
	text-decoration: none;
}
#nav-interior li.active a{
	color: #484231;
	border-bottom-color: #d3c699;
	border-top-color: #f1ebdd;
}
#nav-interior li.active{
	background: #e3d7af url(/images/ui/nav-aside-active.gif) repeat-y left top;
}
#nav-interior li a:hover{
	color: #484231;
	background: #fefdfa;
}
#nav-interior li.active a:hover{
	background: none;
}

/* @Body - Hdg-Main
------------------------------- */
#hdg-main{
	font-family: "Trebuchet MS", "Lucida Grande", Arial, sans-serif;
	font-size: 2.33em;
	color: #fff;
	line-height: 1.75em;
	padding-top: 108px;
	background: url(/images/ui/hdg-main-img-trees.jpg);
	margin: 0 -12px;
}

h2.personal#hdg-main {background: url(/images/ui/hdg-main-img-personal.jpg);}
h2.business#hdg-main {background: url(/images/ui/hdg-main-img-business.jpg);}
h2.trust-investment#hdg-main {background: url(/images/ui/hdg-main-img-trustinvest.jpg);}
h2.about#hdg-main {background: url(/images/ui/hdg-main-img-about.jpg);}
h2.contact#hdg-main {background: url(/images/ui/hdg-main-img-contact.jpg);}

#hdg-main span{
	display: block;
	background: #60beef url(/images/ui/hdg-main-blue-light.gif) no-repeat left bottom;
	padding:0 24px;
}


/* @Body - links-sup
------------------------------- */

.links-sup li{
	background: url(/images/ui/img-raquo.gif) no-repeat left .45em;
	padding-left: 12px;
	margin-bottom: .75em;
}
.links-sup li a{
	display: block;
}


/* @Homepage
-------------------------------------------------------------- */

#online-login label{
	font-weight: bold;
	color: #654d39;
	line-height: 1em;
}
#online-login div.text input{
	width: 196px;
}
#online-login div.text{
	margin-bottom: .75em;
}
#online-login .submit{
	float: right;
	margin-bottom: .81em;
}
#online-login .forgot-pw{
	float: left;
}
#online-login .actions{
	font-size: 11px;
}
#online-login .actions p{
	clear: both;
}

#news-recent .date,
#news-recent li a{
	display: block;
	vertical-align: middle;
}

#news-recent li img{
	vertical-align: middle;
}

#news-recent .rss{
	font-size: 11px;
}
#news-recent .rss img{
	margin: 0 5px 0 0;
}
#news-recent .date{
	color: #846a54;
}
#news-recent .all{
	margin: 0 0 .75em;
}

#features{
	background: url(/images/ui/img-dotted-beige.gif) repeat-x left top;
	padding: 1.5em 12px 0;
}
#features li{
	padding: 4px 0 0 85px;
	background: no-repeat left 0;
	clear: left;
	margin-bottom: 1.2em;
	overflow: hidden;
}
#features p{
	margin: 0;
}
#features a.more{
	float: left;
	margin: .6em 0 0;
}
#features .home-featured-01{
	background-image: url(/uploads/images/icn-home-featured-01.gif);
}
#features .home-featured-02{
	background-image: url(/uploads/images/icn-home-featured-02.gif);
}
#features .home-featured-03{
	background-image: url(/uploads/images/icn-home-featured-03.gif);
}
#features .home-featured-04{
        background-image: url(/uploads/images/icn-home-featured-04.gif);
}
#flash-home-content{
	display: block;
}


/* @News
-------------------------------------------------------------- */

body#news-index .article{
	margin-bottom: 1.5em;
	clear:both;
}
body#news-index .article p{
	margin-bottom: 0;
}
body#news-index .article a.more{
	float:right;
}

body#news-index #content-main h3 {
margin-bottom:0;	
}

body#news-index #content-main .article h3 a{
font-size:14px;
margin-bottom:0;	
}

body#news-index #content-main h4 {
font-size:12px;
margin-bottom:0.01em;	
} 


/* @Locations
-------------------------------------------------------------- */

.map-link{
	background: url(/images/ui/icn-map.gif) left center no-repeat;
	padding-left: 50px;
	float:left;
	line-height: 34px;
}

body#locations-atm #content-main dt{
	clear:left;
}

body#locations-show #content-main h3{
	float: left;
} 
body#locations-show #content-main dl{
	clear: left;
}
body#locations-show #content-main div.image{
	float: right;
}
body#locations-show #content-main dt{
	text-transform: uppercase;
}


/* @Shared
-------------------------------------------------------------- */

img.framed{
	border: #ccc 3px solid;
	padding: 1px;
	background: #fff;
}

img.right{
	margin-left:15px;
}

img.left{
	margin-right:15px;
}

img.top{
	margin-top:3px;
} 



a.lnk-alt{
	color: #846a54;	
	text-decoration: underline;
	font-style: normal;
}
a.lnk-alt:hover{
	color: #604C3D;	
}

.rnd{
	background: url(/images/ui/rnd-204px-b.gif) no-repeat left bottom;
}
.rnd .inner{
	background: url(/images/ui/rnd-204px-t.gif) no-repeat left top;
	padding: .75em 12px;
	width: 181px;
}
.rnd .hdg{
	color: #846a54;
	margin: 0 0 .5em;
}

.content-blk{
	background: url(/images/ui/content-blk-b.gif) no-repeat left bottom;
	padding-bottom: 6px;
}
.content-blk .hdg{
	background: #61111d url(/images/ui/content-blk-hdg.gif) no-repeat;
	color: #fff;
	font-size: 14px;
	padding: 0 12px;
	line-height: 2em;
}
.content-blk .body{
	background: #f9f2db;
	overflow: hidden;
	border: 1px solid #e9ddb6;
	border-bottom: none;
	padding: 12px 12px 6px;
}
.content-blk ul{
	margin: -12px 0 .75em;
}
.content-blk li{
	margin: 0 -12px;
	background: url(/images/ui/img-dotted-beige.gif) repeat-x left bottom;
	padding-bottom: 1px;
}
.content-blk li a{
	padding: .75em 12px;
}
.content-blk li a:hover{
	background: #EEE4C6;
	text-decoration: none;
}
.content-blk .body .last{
	margin-bottom: 0; 
}


#locations-home h3 a, #news-recent h3 a{
   color:white;                 
}

#locations-home p {
	margin-bottom:3px;                  
}

#locations-home p {
	margin-bottom:3px;
}

#locations-home.content-blk ul{   
	margin: 0 5px 0 50px;
}

#locations-home.content-blk li{
	margin: 0;
    list-style:none;
	background:none;
	padding-bottom: 1px;

	line-height:105%;
}
#locations-home.content-blk li a{
	padding:0;
}
#locations-home.content-blk li a:hover{
	background: #EEE4C6;
	text-decoration: none;
}

#flash-slideshow{
	border: 3px solid #ebe0bb;
}
#flash-slideshow-content{
	display: block;
}


/* Misc classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.larger     { font-size: 1.4em; line-height: 2.1428571; margin-bottom: 1.0714286em; }
.largest    { font-size: 1.6em; line-height: 1.875; margin-bottom: 0.9375em; }

.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

/*use top/bottom for vertical, first/last for horizontal*/
.top        { margin-top:0; }
.bottom     { margin-bottom:0; }
.first      { margin-left:0; }
.last       { margin-right:0; }

#features h4 a {
 color:#822433;   
}

#sitemap ul li a {
 font-weight:bold;
}

#sitemap ul li ul li a {
 font-weight:normal;
}

/* Floats
-------------------------------------------------------------- */

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
* html>body .clearfix {
	display: inline-block; 
	width: 100%;
}
* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}

.clear	    { clear: both; }
.right	  { float: right;}
.left		{ float: left; }  


/* DEVELOPMENT styles
-------------------------------------------*/
.fusionary_note {
	color:#ff9999;
	background:#ffffcc;
}

a[href="#"] {background: lime;}
a[href="/"] {background: lime;}
a[href=""] {background: lime;}

.comment {
background-color:yellow;	
}


/* Product Table Styles
------------------------------- */
table.product {

vertical-align:top;
line-height:110%;
}


table.product td, table.product th  {
	border-right: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	background: #fff;
	padding: 6px 6px 6px 6px;
	color: #666;
}

table.product th {
font-weight:bold;

}

tr.row_heading th{
background-color: #B6AD90;
color: #fff;

}

tr.alt_row td{
background-color: #EEE8DA;
vertical-align: top;
}

tr.alt_row2 td{
background-color: #F9F5EC;
vertical-align: top;
}


table.product td.title {
	font-weight:bold;
	font-size:115%;
}

table.product a.learn, table.product a.apply {
	font-weight:normal;
	font-size:85%;
}
   


table.product a.apply {
	color:#006600;
} 





#app .dtext {
color:#333333;
font-size:14px;
float:left;
width:200px;
text-align: right;
padding:2px 10px 2px 2px;
vertical-align:middle
}

#app .dtext2 {

color:#333333;
font-size:14px;
float:left;

padding:2px 10px 2px 2px;
vertical-align:middle;
text-align:left;
}

#app .dtext3 {

color:#333333;
font-size:14px;
float:left;
height:50px;
padding:2px 10px 2px 2px;
vertical-align:middle;
text-align:left;
}

#app .tbox{
float:left;
color:#333333;
font-size:14px;
vertical-align:middle;

}

#app .con{
float:middle;
width:400px;
padding:2px 0px 2px 0px;
height:25px;
text-align:center;
}

#app .con2{
width:480px;
padding:2px 0px 2px 0px;
height: 50px;
text-align:center;
}

#app .con3{
width:480px;
padding:2px 0px 2px 0px;
height:50px;
}

#app .con4{
width:520px;
padding:2px 0px 2px 0px;
height: 90px;
text-align:center;
}

#app .etext {

color:#FF0000;
font-size:14px;
float:left;
width:200px;
padding:2px 10px 2px 2px;
vertical-align:middle;
}

#app .etext2 {

color:#FF0000;
font-size:14px;
float:left;

padding:2px 10px 2px 2px;
vertical-align:middle
text-align:left;
}

#app .error{
color:#FF0000;
font-size:18px;
}

#rrate .dtext {
/* color:#333333; */
font-size:14px;
float:left;
width:140px;
text-align: right;
padding:2px 10px 2px 2px;
vertical-align:middle
}


#rrate .con{
float:middle;
width:400px;
padding:2px 0px 2px 0px;
height:25px;
text-align:center;
background-color:005511;
}

#rrate .tbox{
float:left;
/* color:#333333; */
font-size:14px;
vertical-align:middle;

}

#rrate .con2{
width:480px;
padding:2px 0px 2px 0px;
height: 50px;
text-align:center;
}
/* Copyright 2006 | Thierry Koblentz - www.TJKDesign.com All Rights reserved
 *  * TJK_ToggleDL() Version 1.5.5 (this file has changed from previous version) report bugs or errors to thierry@tjkdesign.com
 *   */
#TJK_ToggleON,#TJK_ToggleOFF {border:1px solid #333;padding:0 5px;margin-right:5px}
/* zeroing out padding and margin */
#TJK_DL dd,#TJK_DL dt {margin:0;padding:0} 
/* margin for the DTs (shorthand) */
#TJK_DL dt {margin:7px 0}
/* image and left padding for DDs */
#TJK_DL dd {background:url(answer.gif) no-repeat;padding-left:55px}
/* styling all anchors in the DTs */
#TJK_DL dt a {background:0 50% no-repeat;padding-left:32px;color:#000;text-decoration:none}
#TJK_DL dt a:visited {color:#666}
#TJK_DL dt a:visited:hover,
#TJK_DL dt a:hover,
#TJK_DL dt a:active,
#TJK_DL dt a:focus {font-weight:bold}
/* the + and - gif in the anchors */
#TJK_DL .DTplus a {background-image:url(toggleDLplus.gif)}
#TJK_DL .DTminus a {background-image:url(toggleDLminus.gif)}
/**********************************/
/**********************************/
#TJK_DL .showDD {position:static;}
#TJK_DL dd,.hideDD{top:-9999px;position:absolute}
#TJK_ToggleON,#TJK_ToggleOFF {display:inline;cursor:pointer;cursor:hand}
