/*////////////////////////////////////////////////////////////////////////////

						CSS COPYRIGHT 2008
						Stonebridge Bank

////////////////////////////////////////////////////////////////////////////*/


/*
///////////////////////////////////////////////////////////////////////  UNDO //
*/

* {	margin: 0; padding: 0; font-weight: normal; }
:link,:visited { text-decoration: none; }
a img, :link img, :visited img { border: none; outline: none; }
ul, ol { list-style: none; }
:focus { -moz-outline-style: none; }


/*
/////////////////////////////////////////////////////////////////////  LAYOUT //
*/

body {
	text-align: center;
	margin: 0 auto;
	/*background-color: #667eb8;*/
	background: #667eb8 url("../i/bg-out.jpg") left top repeat-x;
	height: 100%;
	color: #333;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: x-small; /* IE5Win */
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	font-size: small;
}
/* Opera */
html>body {	font-size: small; }

/* Hide accessibility menu */
#skipnav, .none { display: none; }


#wrap {
	width: 758px;
	margin: 1em auto;
	background: #fff;
	padding: 8px 0px;
	}

#header, #footer {
	margin: 0px auto;
	margin-bottom: 3px;
	width: 743px;
	height: 90px;
	background: transparent url("../i/bg-head.gif") center top repeat;
	}
	
#footer {
	height: 11em;
	margin-top: 3px;
	margin-bottom: 0px;
	padding: 1em 0;
	}	
	
#content {
	width: 743px;
	margin: 0px auto;
	padding: 0px 0px 3px 0px;
	background-color: #fff;
	border: 1px solid #afb5d0;
	border-width: 1px 0px;
	overflow: hidden;
	}

#left-column {
	background: #e0e2ee;
	float: left;
	width: 184px;
	border-right: 1px solid #afb5d0;
	padding: 0;
	margin: 0;
	overflow: hidden;
	padding-bottom: 30000px;
	margin-bottom: -30000px;
	}

#right-column {
	margin: 0px 0px 30px 0px;
	width: 555px;
	padding: 0px;
	text-align: left;
	float: left;
	min-height: 30em;
	height: auto !important;
	height: 30em;
	}

.ad#right-column {
	padding: 0;
	margin: 3px 0 0 3px;
	background-color: #fff;
	background-image: none;
	border: 1px solid #6f7aa9;
	min-height: 1px;
	height: auto;
	width: 552px;
	overflow:hidden;
	}

.ad#right-column img {
	float: right;
	width: 552px;
	overflow: hidden;
	}

#ajax-banner {
	padding: 0;
	margin: 0;
	min-height: 1px;
	height: auto;
	width: 552px;
	overflow:hidden;
	}
	
#basement {
	background: #fff;
	float: right;
	margin-left: 6px;
	margin: -15px 0px 2em 2em;
	height: auto;
	width: 12.5em;
	}

.fright {float: right;}
.fleft {float: left; }
.clear { clear: both; height: 0px; _height: 1%; visibility: hidden; _margin-top: -1.5em; }

.clear:after {
	content:".";
	display:block;
	height:0;
	_height: 1px;
	clear:both;
	visibility:hidden;
	}
.clear { display:inline-table; _display:inline-block;}

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

/*
////////////////////////////////////////////////////////////// TYPOGRAPHY //
*/

p { text-align: left; }

h1, h2, h4 { color: #141d70; }

h1#logo a {
	float: left;
	text-align: left;
	margin: 24px 0px 0px 12px;
	background: transparent url("../i/logo-sb.gif") left top no-repeat;
	width: 166px;
	height: 49px;
	display: block;
	text-indent: -10000px;
	border: none;
	text-decoration: none;
	_margin-left: 6px;
	}

h1#logo a:link, h1#logo a:visited, h1#logo a:hover { border: none; text-decoration: none; }

	
h2#tagline { 
	text-align: right;
	margin: 20px 12px 0px 200px;
	float: right;
	font-size: small;
	text-transform: uppercase;
	}
	
#content h1, #content h2, #content h3, #content h4, #content h5, #content p  { 
	font-size: 120%; 
	font-weight: bold;	
	padding-bottom: .5em;
	line-height: 1em;
	margin-left: 15px;
	}
	
#content h1, #content h2 { text-transform: uppercase; padding-bottom: 2em;}	
#content h1 { font-size: 11px; padding-bottom: .5em; letter-spacing: 1px; font-weight: normal;}
#content h1.padded { padding-top: 2em; }
#content h2 { font-size: 12px; padding-bottom: .5em; }
#content h2.padded { margin: 2em 15px 0 15px; padding-top: 2em; border-top: 1px solid #6f7aa9; }

#content h2.bar { 
	border-bottom: 1px solid #6f7aa9; 
	text-transform: uppercase; 
	padding: .25em 0;
	margin: 1.5em 0 .5em 15px;
 	color: #141d70; 
 	width: 500px;
 	font-size: 11px;
 	}

#content h3 { font-size: 12px; font-weight: bold; padding-left: 6px;}
#content h3.rates { 
	padding: .25em 0;
	margin: 1.5em 0 3px 15px;
	color: #141d70;
	font-weight: normal;
	font-size: 11px;
	text-transform: uppercase;
	}
#content h3.padded { padding-top: 1.5em;  border-top: 1px solid #6f7aa9; margin-right: 15px; }

#content h4 { font-size: 20px; padding-bottom: 2.5em; }
#content h4.padded { padding-top: 2em; }
#content h5 { font-size: 11px; font-style: italic; } 

#content p { font-size: 11px; font-weight: normal; line-height: 1.5em; padding-right: 16px; padding-bottom: 1.2em; margin-left: 15px;}

#content p.single { 
	float: left; 
	margin: 0 1.5em 0 15px;
	padding: 0 0 1.5em 6px; 
	width: 230px; 
	font-size: 11px;
	*margin-left: 6px;
	}

#content p.single .blue { color: #141d70; border-left: 3px solid #141d70; padding-left: 5px; }

#content p.boxed { 
	float: left; 
	width: 230px; 
	font-size: 11px; 
	margin: 6px;
	margin-left: 9px;
	*margin-left: 6px;
	border: 1px solid #b5bedf; 
	background-color: #fff;
	padding: 6px 6px 15px 6px;
	background: #fff url("../i/bg-box.jpg") 0px 0px repeat-x;
	min-height: 11em;
	height: auto !important;
	height: 11em;
}

#content p.legal { font-size: 85.5%; color: #666; padding: 30px 12px 12px 0; line-height: 1.2em; text-indent: -6px; margin: 0 0 0 15px; width: 480px; }

#content div.news { 
	padding: 1em 0;
	margin: .5em 0 .5em 15px;
	border-bottom: 1px solid #6f7aa9;
	border-top: 1px solid #6f7aa9; width: 400px;
	}
#content div.news p, #content div.news h3 { margin: 0; padding: 0; }
#content div.news h3 {font-size: 11px; }
#content div.news a { font-size: 12px;}
/*
#content div.news p { margin-left: 6px; }
*/
#content div.alt { background: #fff; margin-top: -.5em; border-width: 0; }
#content div.news p a {font-weight: bold; }


#basement h2 {
	font-size: 11px;
	text-transform: none;
	padding: 0 0 3px 6px;
	color: #141d70;
	margin: .5em 0 0 0;
	border-bottom: 1px solid #6f7aa9;
	}

#footer p { color: #fff; font-size: 85.5%; padding-left: 8px; line-height: 1.2em; padding-bottom: 1em;  }

#footer p.left-column {  margin-right: 450px; }

#footer p.credit { margin-top: -27px; margin-right: 8px; }

strong { font-weight: bold; }

.center {
	text-align: center;
    margin-left: auto;
    margin-right: auto;
	}
.yellow { color: #fdb913; }
.blue { color: #141d70; }

p.careers {
	padding: 0 0 0 30px;
	}

	
/*
////////////////////////////////////////////////////////////////// LISTS //
*/
ul.careers { margin: 0 1em 1em 45px; width: 400px; }
ul.careers li { 
	padding: 3px 0 3px 15px; 
	font-size: 85.5%; 
	line-height: 1.2em;
	text-indent: -.75em;
	*text-indent: -.25em;
	
} 
	
ul.careers li:before { content: "\00BB \0020"; }

ul.careers li ul { padding-left: 1em; }
ul.careers li ul li:before { content: "\2013 \0020"; }

ul.body-list { margin: 0 1em 1em 15px; width: 430px; }
ul.body-list li { 
	padding: 3px 0 3px 15px; 
	font-size: 85.5%; 
	color: #141d70; 
	line-height: 1.2em;
	text-indent: -.75em;
	*text-indent: -.25em;
	*background: transparent url("../i/arrow.gif") left 1em no-repeat;
} 
	
ul.body-list li:before { content: "\00BB \0020"; }

ul.body-list li ul { padding-left: 1em; }
ul.body-list li ul li { *background: transparent url("../i/dash.gif") left 1em no-repeat; }
ul.body-list li ul li:before { content: "\2013 \0020"; }



ul#crumbs li.first, ul#footer-nav li.first { padding-left: 3px; margin-left: 0px; border: none; }

ul#footer-nav {
	float: right;
	text-align: right;
	width: 548px;
	}

ul#footer-nav li {
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 85.5%;
	text-transform: uppercase;
	color: #fff;
	display: inline;
	border-left: 1px solid #6f7aa9;
	padding: 0px 6px 0px 9px;
	}

ol { margin-left: 9px; margin-right: 14em; list-style: upper-roman; padding-left: 2em; }
ol li { line-height: 1.5em; }
ol ol { padding: 0em 0 1em 2em; margin-right: 0; list-style: upper-alpha; font-size: 11px; }

ol.upperalpha { margin: 0 1em 1em 15px; width: 430px; list-style-type: upper-alpha; list-style-position: inside; }
ol.upperalpha li {
	padding: 3px 0 3px 15px;
	margin-left: 1em;
	font-size: 85.5%;
	line-height: 1.2em;
	text-indent: -2em;
}
ol.upperalpha li ol { padding-left: 1em; }
ol.upperalpha li ul li { *background: transparent url("../i/dash.gif") left 1em no-repeat; }

ol.digits { margin: 0 1em 1em 15px; width: 430px; list-style-type: decimal; list-style-position: inside; }
ol.digits li {
	padding: 3px 0 3px 15px;
	margin-left: 1em;
	font-size: 85.5%;
	line-height: 1.2em;
	text-indent: -2em;
}
ol.digits li ol { padding-left: 1em; }
ol.digits li ul li { *background: transparent url("../i/dash.gif") left 1em no-repeat; }

ol.loweralpha { margin: 0 1em 1em 15px; width: 400px; list-style-type: lower-alpha; list-style-position: inside; }
ol.loweralpha li {
	padding: 3px 0 3px 15px;
	margin-left: 1em;
	font-size: 85.5%;
	line-height: 1.2em;
	text-indent: -2em;
}
ol.loweralpha li ol { padding-left: 1em; }
ol.loweralpha li ul li { *background: transparent url("../i/dash.gif") left 1em no-repeat; }


/*
///////////////////////////////////////////////////////////////// IMAGES //
*/

img { border:0; }		
.ehl img { position: relative; top: 2px; }
img.star  { margin-left: 15px; }
img.cirrus  { margin-left: 1em; }
img.header { margin: 3px 0 1em 3px; padding: 0 0 3px 0; width: 555px; border-bottom: 1px solid #afb5d0; background: none;}	


img.cross-ad { margin: 0 0 15px 15px; clear: right; }

/*
////////////////////////////////////////////////////////////////// LINKS //
*/
	
a:link, a:visited { color: #fff; text-decoration: none; border-bottom: 1px solid #6f7aa9; }
a:hover { color: #fdb913;}
a:hover img {text-decoration: none;}

#right-column a { color: #141d70; border-bottom: 1px solid #6f7aa9; }
#right-column a:hover { border-bottom: 1px solid #6f7aa9; border-top: 2px solid #dce0ef; background: #dce0ef; }

ul#main-nav { 
	margin: 0;
	padding: 0;
	border: 1px solid #585899;
	border-width: 1px 0px;
	background: transparent url("../i/bg-nav.gif") left top repeat-y;
	}


ul#main-nav li {
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	text-align: left;
	border-bottom: 1px solid #6f7aa9;
	width: 184px;
	display: block;
	line-height: 1.5em;
	font-size: 12px;
	}

ul#main-nav li.last { border: 0; }

#main-nav li a {
	margin: 0;
	padding:0;
	margin-left: 16px;
	color: #fff;
	text-decoration: none;
	border: none;
	height: 2em;
	line-height: 2em;
	}

#main-nav li a:hover { color: #fdb913; background: none; border:none; }	

ul#sub-nav {
	margin: 0;
	padding: 9px 0 3px 3px;
	border-left: 6px solid #585899;
	border-top: 1px solid #fff;
	background: #6f7aa9 url("../i/icon-subnav.gif") 14px 0px no-repeat;
	}
	
ul#sub-nav li {
	width: 163px;
	display: block;
	font-size: 11px;
	padding: 0;
	}

#sub-nav li a {
	height: 1em;
	line-height: 1em;
	color: #fff;
	}

#sub-nav li a:hover { color: #fdb913; background: none; border:none; }	

#main-nav li a.active, #sub-nav li a.active { color: #fdb913; background: none; }

ul#crumbs { 
	border-bottom: 1px solid #afb5d0;
	margin: 0px 0px 30px 0px; 
	padding: 3px 3px 2px 6px;
	background: #eee;
	width: 555px;
	_width: 549px;
	_overflow: hidden;
	}
	
ul#crumbs li {
	font: 10px/1em "Trebuchet MS", Verdana, Arial, Helvetica, sans;
	border-left: 1px solid #afb5d0;
	display: inline;
	padding-left: 6px;
	}


ul#crumbs li a {
	margin: 12px 3px;
	color: #afb5d0;
	border-bottom: 1px solid #eee;
	height: 2em;
	line-height: 2em;
	}
	
ul#crumbs li a:hover { 
	color: #6f7aa9;
	border-top: none;
	border-bottom-color: #6f7aa9;
	background: none;
	}

ul#crumbs li a.active { color: #666; border-bottom-color: #9e9e9e; }

ul#findmore { 
	padding: 0 0 .5em 0px;
	margin-left: 0px; 
	float: left;
	*margin-left: 2px;
	*padding-left: 2px;
	*width: 12em;
	}

ul#findmore li { 
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	margin-left: 0px;
	padding-left: 12px;
	text-indent: -8px;
	font-size: 11px;
	*text-indent: 0px;
	*padding-left: 0px;
	*margin-left: 0px;
	}
		

ul#findmore li a {
	color: #6f7aa9;
	text-decoration: none;
	border: none;
	line-height: 1.5em;
	*background: transparent url("../i/arrow.gif") left .5em no-repeat;
	*padding-left: 6px;
	}
	
ul#findmore li a:hover { 
	background-color: transparent;
	border: none;
	color: #1b3f95; 
	*background: transparent url("../i/arrow.gif") left .5em no-repeat;
	}

	
ul#findmore li a:before { content: "\00BB \0020";  }

ul#findmore li a.active {	
	background-color: transparent;
	border: none;
	color: #1b3f95; 
	*background: transparent url("../i/arrow.gif") left .5em no-repeat;
}


#footer a { font-size: x-small; color: #fff; border:0; }
#footer a:hover { color: #fdb913;  }

ul#footer-nav li a { font-size: x-small; color: #fff; border-bottom: 0px; }
ul#footer-nav li a:hover { color: #fdb913; }
ul#footer-nav li a.active { color: #fdb913; }

h3 a { font-weight: bold; color: #141d70; border: none; }
h3 a:hover { border-bottom: 1px solid #6f7aa9; border-top: 2px solid #dce0ef; background: #dce0ef; }

#content p.boxed a { color: #fff; font-weight: bold; border: none; }
#content p.boxed a:hover { color: #fdb913; font-weight: bold; border: none; background-color: transparent; }

#content h3 { margin: 0; margin-left: 9px; }

/*
////////////////////////////////////////////////////////////////////// TABLES //
*/

table {
	text-align: left;
	margin: 0 0 9px 15px;
	font-size: 10px;
	border-bottom: 5px solid #6f7aa9;
	width: 500px;
	}

th {
	background: #141d70 url("../i/bg-th.jpg") left top repeat-x;
	height: 23px;
	padding: 0px 15px;
	color: #fff;
	border: 1px solid #6f7aa9;
	border-width: 1px 0px;
	}

td { 
	padding: 6px 15px;	
	border-top: 1px solid #fff;
 }

tr { 
	background-color: #e0e2ee;
	}
	
tr.alt { 
	background-color: #fff;
	border-bottom: 1px solid #fff;
	}

table.bigup td { width: 10em; }


/*
/////////////////////////////////////////////////////////////////////// FORMS //
*/
fieldset#contact {
	width: 240px;
	font: 11px/130% "Trebuchet MS", Verdana, sans-serif; 
	color: #b7bcd4;
	margin-left:15px;
	border:1px solid #b7bcd4;
	padding: 0 20px 0px 15px;
	background: #eff1f6 url("./i/bg-login.jpg") left bottom repeat-x;
	_margin: 0 0px 0 9px;
	_overflow: hidden;
	} 
fieldset#contact form { _width: auto; margin: 0; padding: 0;}
fieldset#contact li{
	padding:0px 0px 2px 0px;
	color:#6f7aa9;
	margin:0;
	} 
fieldset#contact label {float: left;clear:right; padding: 5px 20px 5px 0px;color:#6f7aa9;width: 225px;} 
fieldset#contact ol{list-style:none; margin: 0;padding: 0;}
fieldset#contact input {font: 11px/130% "Trebuchet MS", Verdana, sans-serif; color: #6f7aa9;width: 180px;height: 16px;line-height: 16px;border: 1px solid #6f7aa9; margin: 0;padding: 6px 3px;}
fieldset#contact textarea { font: 11px/130% "Trebuchet MS", Verdana, sans-serif; color: #6f7aa9;border: 1px solid #6f7aa9; width: 230px; padding: 6px 3px; }
fieldset#contact input.submit { float: right; border: 0;width: 50px; margin-bottom: 15px;}

fieldset#contact input, #login.contact textarea { padding: 0; margin: 0; } 
fieldset#contact input.submit a {
}
fieldset#contact input.submit {
	float: right; margin-bottom: 15px;	margin-right; 15px;
	width: 50px;
	height: 18px; 
	padding: 5px 15px; 
	background: transparent url("../i/bttn-submit.gif") no-repeat left top;
	font-size: 10px;
	text-indent: -10000px;
	cursor: pointer;
	color: #666;
	border:0;
 letter-spacing:-130px;/* for opera , add an empty space before text to totally hide it and tune this value when changing width */
	}

fieldset#contact img{clear:both;float:left;margin: 15px 0 0 0;}


* html fieldset#contact input.submit {padding-bottom:0;}



/*************************************************

             LEFT SIDE LOG IN BLOCK

**************************************************/

#login{font: 11px/130% "Trebuchet MS", Verdana, sans-serif;clear:left;float:left;width:184px;border-bottom: 1px solid #b7bcd4;padding: 0px 0 10px 0; background: #fff; text-align: left; }

#login h3{font: 11px/130% "Trebuchet MS", Verdana, sans-serif;font-weight:bold;border-bottom: 1px solid #b7bcd4;padding: 3px 0 6px 10px;margin: 0 0 5px 0;width:174px; background: #fff;}

#login{ background: #eff1f6 url("../i/bg-login.jpg") left bottom repeat-x;}

#login dt {padding: 3px 10px 2px 10px;clear:left; color: #6f7aa9;}

#login dd {float:left;padding: 0 10px 0 10px;}

#login input#username {width: 150px;height: 16px;border: 1px solid #6f7aa9; }

#login input#password {width: 95px;height: 16px;border: 1px solid #6f7aa9;float:left;}

#login input.submit {
	width: 50px;
	height: 18px; 
	padding-bottom: 5px; 
	background: transparent url(../i/bttn-signin.gif) no-repeat left top;
	font-size: 10px;
	text-indent: -10000px;
	cursor: pointer;
	color: #666;
	border:0;
	float:right;
 letter-spacing:-130px;/* for opera , add an empty space before text to totally hide it and tune this value when changing width */
	}


#login img{clear:both;float:left;margin: 15px 0 0 0;}

#login p { margin-left: 0px; text-align: left; padding: 0px; }
#login a {clear:both;float:left;padding: 0px;color:#6f7aa9; font-size: 10px; margin-left: 9px; *margin-left: 0px;}
#login a:hover { color:#1b3f95; } 


* html #login input.submit {padding-bottom:0;}

/*
/////////////////////////////////////////////////////////////////////// ACTIVE //
*/

body.bus_other #main-nav li a.bus_other, body.bus_remote #main-nav li a.bus_remote, body.bus_cash #main-nav li a.bus_cash, body.bus_finance #main-nav li a.bus_finance, body.bus_accounts #main-nav li a.bus_accounts, body.bus_non #main-nav li a.bus_non, body.bus_qb #main-nav li a.bus_qb, body.bus_sole #main-nav li a.bus_sole { color: #fdb913; background: none; }

body.per_other #main-nav li a.per_other, body.per_check #main-nav li a.per_check, body.per_save #main-nav li a.per_save, body.per_loan #main-nav li a.per_loan, body.per_mort #main-nav li a.per_mort { color: #fdb913; background: none; }

body.online_bus #main-nav li a.online_bus, body.online_per #main-nav li a.online_per { color: #fdb913; background: none; }

body.about_vision #main-nav li a.about_vision, body.about_finance #main-nav li a.about_finance, body.about_dis #main-nav li a.about_dis, body.about_officers #main-nav li a.about_officers, body.about_news #main-nav li a.about_news, body.about_fees #main-nav li a.about_fees, body.about_faq #main-nav li a.about_faq, body.about_careers #main-nav li a.about_careers, body.about_gov #main-nav li a.about_gov, body.about_location #main-nav li a.about_location  { color: #fdb913; background: none; }


/* button styles */
a.button, a.buttonDis {
display: block;
background-color: transparent;
background-image: url(../i/buttonBackground.gif);
background-repeat: no-repeat;
width: 132px;
height: 28px;
margin: 5px auto;
padding: 5px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
a.button:link, a.button:visited {
color: #002577;
}
a.button:hover, a.button:active {
background-position: 0 -36px;
color: #FF7200;
}
a.buttonDis:link, a.buttonDis:visited, a.buttonDis:hover, a.buttonDis:active {
background-position: 0 -72px;
color: #5F5F5F;
cursor: default;
}
.icon {
display: inline-block;
background-repeat: no-repeat;
padding: 0 0 5px 0px;
}
a.button:hover .icon, a.button:active .icon {
background-position: 0 -28px;
}
a.buttonDis:link .icon, a.buttonDis:visited .icon, a.buttonDis:hover .icon, a.buttonDis:active .icon {
background-position: 0 -56px;
}
/* list of button icons */
#buttonOK .icon {
background-image: url(../i/ok.gif);
}
#buttonCancel .icon {
background-image: url(../i/cancel.gif);
}
#buttonImport .icon {
background-image: url(../i/import.gif);
}