/******************************************************************************
 * 1st Security Bank of Washington main stylesheet.
 * Note: Internet Explorer hacks are in a separate file (all_ie.css)
 * Author: Neal Krouse, Browning & Browning, Inc (neal@jbrowning.biz)
 *
 * Table of Contents for navigation:
 * _general
 *
 * _containers
 *
 * _branding
 *
 * _online login
 *
 * _navigation
 *
 * _content parent
 *
 * _primary content
 *
 * _secondary content
 *
 * _footer
 *
 ******************************************************************************/


/*------------------------------------------------------------------------------
 *	SITE COLORS:
 *
 *	Corp Red:			#d63347	
 *	Corp Blue:			#00275d
 *
 *	Main nav:
 *	- background:		#e9eaeb
 *	- link:				#f7f8f8
 *	- hover:			white
 *	- active:			#ccc
 *	- current:			#c51d3d
 *
 *	Online login:
 *	- li & a:			#ff9900
 *	- hover:			white
 *
 *	Secondary nav:
 *	- dt link:			#c51d3d
 *	- dd link:			#00275d
 *
 *	Generic table:
 *	- background:		#bfceee
 *	
 *-----------------------------------------------------------------------------*/


/*
------------------------------------------------------------------------------
   _general
------------------------------------------------------------------------------
*/

/* zero out everything */
* { margin: 0; padding: 0; }

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

img { border: 0; margin: 0; padding: 0; }

hr
{
	/* use to align floated elements's */
	clear: both;
	visibility: hidden;
	height: 0;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

/*.clear { display: inline-block; }   */
.clear:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/*  * html .clear { height: 1%; } */
.clear { display: block; }
.small { font-size: .8em; }
abbr
{
	border-bottom: 1px dotted #999;
	cursor: help;
}

acronym
{
	border-bottom: 1px dotted #999;
}


/*
------------------------------------------------------------------------------
   _containers
------------------------------------------------------------------------------
*/
html { height: 100%; }

body
{
	background-color: white;
	background-image: url(bodytile.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 69%;
	line-height: 1.5em;
	height: 100%;
}

body { font-size: 11px; }

#non_footer
{
	/* Rule is to keep the footer sticky.
	 * That is, to keep it at the bottom of the page.
	 * http://www.themaninblue.com/writing/perspective/2005/08/29/ */
	position: relative;
	min-height: 100%;
}

#wrapper
{
	position: relative;
	width: 780px;
	margin: 0 auto;
	background-color: white;
	
	padding-bottom: 36px;
}
#wrapper:after
{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


#top
{
	position: absolute;
	top: 0;
	left: 0;
	width:1%;
	z-index: 100;
}
#skipnav
{
	position: relative;
	/*top: -9000em;
	left: -9000em;*/
	text-indent: -9000em;
	overflow: hidden;
}
#skipnav a
{
	
}

#tooltip
{
	/* Tooltip displays a disclaimer
	 * about leaving the site. It's for 
	 * links that take you out of the site.
	 * It's added to links via JavaScript. */
	position: absolute;
	width: 210px;
	height: 155px;
	padding: 10px 10px 15px;
	z-index: 100;
	background-image: url(tooltip.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	font-size: .95em;
	line-height: 1.3em;
	color: white;
}


/*
------------------------------------------------------------------------------
   _branding
------------------------------------------------------------------------------
*/
#branding
{
	height: 78px;
}
#branding h1
{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-indent: -9000em;
}

#branding a
{
	position: absolute;
	display: block;
	width: 153px;
	height: 68px;
	top: 4px;
	left: 8px;;
	outline: 0;
	background-image: url(1stsecuritybanklogo.gif);
	background-repeat: no-repeat;
	background-position: left top;
}



/*
------------------------------------------------------------------------------
   _online login
------------------------------------------------------------------------------
*/
#online
{
	/* online is a container div */
	position: absolute;
	top: 0;
	right: 4px;
	/*width: 211px;*/
	width: 157px;
	padding: 0 27px 20px;
	background-image: url(onlinebankingbkgn.gif);
	background-position: left bottom;
	background-repeat: no-repeat;
	/*float: left;*/
	z-index: 99;
	cursor: pointer;
}

#online ul
{
	padding-top: 5px;
	float:left;
	display: inline;
}

#online li
{
	float: left;
	width: 157px;
	height: 17px;
	background-color: #f90;
	text-indent: -9000em;
	overflow: hidden;
	display: inline;
	margin-bottom: 6px;
	padding:0;
}
#online .personal
{
	background-image: url(online_personal.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#online .business
{
	background-image: url(online_business.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#online .ebank
{
	background-image: url(online_eBanking.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#online a
{
	display: block;
	width: 157px;
	height: 17px;
	outline: 0;
}
#online a.personal
{
	background-image: url(online_personal.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#online a.business
{
	background-image: url(online_business.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#online a.ebank
{
	background-image: url(online_eBanking.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#online a.personal:hover
{
	background-image: url(online_personal.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#online a.business:hover
{
	background-image: url(online_business.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#online a.ebank:hover
{
	background-image: url(online_eBanking.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}

/*
------------------------------------------------------------------------------
   _navigation
------------------------------------------------------------------------------
*/
#nav
{
	width: 150px;
	padding: 8px 0 20px;
	float: right;
	background-color: #E9EAEB;
	background-image: url(navbottom.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	z-index: 1;
}

#search
{
	padding: 2px;
	
	/* 24 Sept 2007
	 * Removed Search box, until 
	 * CMS is in place. */
	display: none;
}
#search p
{
	width: 140px;
	margin: 0 auto 2px;
	text-align: center;
}
#search p input
{
	width: 100%;
	border: 1px solid #999;
}

.placeholder
{
	color: #999;
}


p#submit 
{
	text-align: right;
}
p#submit input
{
	width: auto;
}

#main_nav
{
	margin-top: 8px;
	float: left;
	width:100%;
}

#main_nav li
{
	float: left;
	width: 100%;
	margin-bottom: .5em;
}

#main_nav a
{
	display: block;
	padding: 0 8px;
	border-left: 1.3em solid #c51d3d;
	background-color: #f7f8f8;
	line-height: 2em;
	color: #00275d;
	outline: 0;
}
#main_nav a:hover
{
	background-color: white;
}
#main_nav a:active
{
	background-color: #CCC;
	color: white;
}
#main_nav.home a#home, #main_nav.home a#home:hover
{
	/* rules for Home link on index page */
	background-color: #f7f8f8;
	border-color: #c51d3d;
	color: #00275d;
	cursor: default;
}

#main_nav.personal a#personal, #main_nav.personal a#personal:hover,
#main_nav.locations a#locations, #main_nav.locations a#locations:hover,
#main_nav.about a#about, #main_nav.about a#about:hover,
#main_nav.rates a#rates, #main_nav.rates a#rates:hover,
#main_nav.business a#business, #main_nav.business a#business:hover,
#main_nav.contact a#contact, #main_nav.contact a#contact:hover
{
	/* Rules for highlight current page */
	background-color: #c51d3d;
	border-color: white;
	color: white;
	cursor: default;
}

#main_nav.ebanking a#ebx, #main_nav.ebanking a#ebx:hover
{
	/* Rules for highlight current page */
	background-color: #390;
	border-color: white;
	color: white;
	cursor: default;
}

/* temp rule during eBanking promo */
#main_nav a#ebx { border-left: 1.3em #390 solid; }


/*
------------------------------------------------------------------------------
   _content parent
------------------------------------------------------------------------------
*/
#content
{
	width: 630px;
	background-image: url(primarytile.gif);
	background-repeat: repeat-y;
	background-position: left top;
	/* Clearing floats without extra markup
	 * Based on How To Clear Floats Without Structural Markup by PiE
	 * [http://www.positioniseverything.net/easyclearing.html] */
/*	display: inline-block;	*/
	float:right;
}

#content:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/*	* html #content { height: 1%; }	*/
#content { display: block; }

#rates_page #content { background-image: none; }

#content h1#banner
{
	/* Image replacement technique
	 * places the banner over the h1 text.
	 * If the UA has display images turned off,
	 * the text is visible */
	position: relative;
	width: 100%;
	height: 253px;
	overflow: hidden;
	color: #00275d;
	font-size: 2em;
}
#content h1#banner span
{
	/* An empty span is necessary,
	 * it's placed befor the h1's text. */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#home_page #content h1#banner
{
	height: 276px;
}
/* begin rules for banners */
#home_page #content h1 span
{
	background-image: url(indexbanner.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#personal_page #content h1 span
{
	background-image: url(personalbanner.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#personal_deposit_page #content h1 span
{
	background-image: url(personal_depositbanners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#personal_lending_page #content h1 span
{
	background-image: url(personal_lendingbanners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#personal_visa_page #content h1 span
{
	background-image: url(personal_visabanners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#personal_mortgage_page #content h1 span
{
	background-image: url(personal_mortgagebanners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#personal_online_page #content h1 span
{
	background-image: url(personal_onlinebanners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#personal_extras_page #content h1 span
{
	background-image: url(personal_extrasbanners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#contact_page #content h1 span
{
	background-image: url(contactbanners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#location_page #content h1 span
{
	background-image: url(locationsbanner.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#location_atm_page #content h1 span
{
	background-image: url(locations_atmbanner.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#about_page #content h1 span
{
	background-image: url(about_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#about_careers_page #content h1 span
{
	background-image: url(about_careers_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#about_news_page #content h1 span
{
	background-image: url(about_news_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#about_promo_page #content h1 span
{
	background-image: url(about_promo_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#about_directors_page #content h1 span
{
	background-image: url(about_directors_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#privacy_page #content h1 span
{
	background-image: url(privacy_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#rates_page #content h1 span
{
	background-image: url(rates_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}

#business_lending_page #content h1 span
{
	background-image: url(business_lending_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}

#business_online_page #content h1 span
{
	background-image: url(business_online_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}

#business_visa_page #content h1 span
{
	background-image: url(business_visa_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}

#business_realestate_page #content h1 span
{
	background-image: url(business_realestatebanners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}

#business_page #content h1 span
{
	background-image: url(business_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}

#business_deposit_page #content h1 span
{
	background-image: url(business-deposit_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#business_services_page #content h1 span
{
	background-image: url(business_services_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#faq_page #content h1 span
{
	background-image: url(faq_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}
#edie_page #content h1 span
{
	background-image: url(edie_banners.gif);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}


/*
------------------------------------------------------------------------------
   _primary content
------------------------------------------------------------------------------
*/
#primary
{
	width: 440px;
	float: left;
	z-index: 10;
}

#rates_page #primary
{
	width: 610px;
}


#primary h1, #primary h2, #primary h3
{
	/* 24 Aug 2007
	 * Text color was changed to black
	color: #D63347;
	 */
	color: black;
	margin: 1em 0 1em;
	line-height: 1.4em;
}
#primary h2 { margin: 2.5em 0 1em; color: #D63347; }
/*#primary p+h2 { margin: 2.5em 0 1em; }*/
#primary h3 { margin: 2em 0 0; }

#primary h1 { font-size: 1.8em; }
#primary h2 { font-size: 1.5em; }
#primary h3 { font-size: 1.3em; }
#primary h4 { font-size: 1.1em; }

#primary p
{
	margin: .5em 0 1em;
	line-height: 1.8em;
}

#primary p sup
{
	font-size: 80%;
	vertical-align: super;
}

span.external
{
	padding-right: 12px;
	background-image: url(externalicon.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

#primary p.asterisk { font-size: 85%; }

#primary p a:link, 
#primary p a, 
#primary ul li a
{
	color: #00275d;
	text-decoration: underline;
}
#primary p a:visited { color: black; }


#primary p a:hover,
#primary p a:active,
#primary ul li a:hover 
{ 
	color: #c51d3d; 
}

#primary p a.pdf
{
	background-image: url(pdficon_sml.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding: 3px 0 4px 20px;
	text-decoration: underline;
}

#primary a[href^="mailto:"]
{
	background-image: url(email.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-right: 12px;
}

#primary p.begining
{
	text-align: right;
	margin: 0;
}
#primary p.begining a
{
	padding: 0 10px 0 0;
	background-image: url(top_icon_reg.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	color: #999;
	text-decoration: underline;
}
#primary p.begining a:hover
{
	color: #00275d;
	background-image: url(top_icon_hover.gif);
}


#primary ul
{
	list-style-type: disc;
	margin-bottom: 1em;
}
#primary ol
{
	list-style-type: decimal;
	margin-bottom: 1em;
}
#primary ul li, #primary ol li
{
	margin: .3em 0 .3em 3em;
}
#primary ul.nobullet { list-style-type: none; }
#primary ul.nobullet  li { margin: .3em 0 .3em 2em; }

table
{
	border-collapse: collapse;
	font-family: arial, sans-serif;
	font-size: 1.1em;
	line-height: 1.1em;
	width: 100%;
	background-color: #bfceee;
	position: relative;
}
table caption
{
	padding-bottom: .4em;
}
thead th
{
	font-size: 80%;
	text-align: left;
	letter-spacing: .2em;
	line-height: 1em;
	font-weight: bold;
	background-color: #c51d3d;
	color: white;
	vertical-align: bottom;
}
thead tr th strong
{
	font-size: 1.1em;
	text-transform: uppercase;
}

td, tbody th
{
	vertical-align: top;
}
tbody th
{
	text-align: left;
	color: #00275d;
}
tbody a:link
{ 
	text-decoration: underline; 
	color: #00275d;
}
tbody a:visited
{ 
	text-decoration: underline; 
	color: black;
}
tbody a:hover
{ 
	text-decoration: underline; 
	color: #c51d3d;
}
table tbody tr td a
{
	font-size: 80%;
	display: block;
	margin-top: .5em;
	position: relative;
}
th, td
{
	padding: 5px 3px;
	border-right: 1px solid white;
}
tbody tr.odd
{
	background-image: url(white_tile_transp30.png);
	background-repeat: repeat;
	background-position: left top;
}
tbody tr:hover
{
	background-image: url(white_tile_transp50.png);
	background-repeat: repeat;
	background-position: left top;
}




/**********************************************
 * 24 September 2007
 * Temporarily removed Consumer Loan Rates and 
 * Equity Lines and Loan rates
 **********************************************/

#primary #consumerloanrates, #primary #equity
{
	display: none;
}





#contact_page #phonelist p
{
	position: relative;
	border-bottom: 1px solid #eee;
	
}
#contact_page #phonelist p span
{
	position: absolute;
	right:0;
	top:0;
}


/* Rules for Contact a Business Specialist form */
#primary fieldset
{
	margin: 1.5em 0 0 0;
	color: #00275d;
	background-color: #EEE;
	border: 1px solid #ddd;
	background-image: url(ol_tile.gif);
	background-repeat: repeat-x;
	background-position: left top;
}


#primary legend
{
	margin-left: 1em;
	color: #000;
	font-weight: bold;
}

#primary fieldset ol
{
	padding: 1em 1em 0 1em;
	list-style: none;
	margin:0;
}

#primary fieldset li
{
	padding-bottom: 1em;
	margin:0;
}

#primary fieldset.submit
{
	border-style: none;
	background-color: transparent;
	background-image: none;
}

#primary label
{
	display: block;
}

#primary input
{
	width: 100%;
}

#primary label.inline
{
	display: inline;
}

#primary input#phonecheck,
#primary input#disclaimer,
#primary input.submit
{
	width: auto;
}

#primary textarea
{
	width: 100%;
	height: 20em;
}

#primary label strong
{
	font-size: 90%;
	font-style: italic;
	font-weight: normal;
	color: #c51d3d;
}

#primary label.bold strong
{
	font-size: 100%;
	font-style: normal;
	font-weight: bold;
	color: black;
}


/*
------------------------------------------------------------------------------
   _secondary content
------------------------------------------------------------------------------
*/
#secondary
{
	width: 156px;
	float: right;
	margin: -80px 8px 0 0;
	z-index: 10;
	position:relative;
}


#home_page #secondary
{
	width: 156px;
	float: right;
	margin: 8px 8px 0 0;
}

#secondary dt a
{
	color: #c51d3d;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline;
	margin-bottom: .5em;
}
#secondary dt a:hover
{
	/*color: #00275d;*/
	color: #0c3;

}

#secondary dd
{
	margin: 0 0 1em 1.5em;
}

#secondary dd li
{
	margin: .3em 0;
}

#secondary dd a 
{
	color: #00275d;
	text-decoration: underline;	
}

#secondary dt a.diffcolor 
{
	color: #00275d;
}
#secondary dt a.diffcolor:hover
{
	color: #0c3;
}

#secondary dd a:hover 
{
	/*color: #c51d3d;*/
	color: #0c3;
}

/* 23 March 2009 
 * Temporary subnavigation rules
 * for launch of 1st Express Deposit
 */
#secondary #temp
{
	margin-top: 2em;
	color: #c51d3d;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline;
	
}

#secondary #temp a 
{
	color: #c51d3d;
	text-decoration: underline;	
	
}

#secondary #temp a:hover 
{
	color: #0c3;
}

/*
------------------------------------------------------------------------------
   _footer
------------------------------------------------------------------------------
*/
#footer
{
	position: relative;
	margin: -2.25em auto 0 auto;
	padding: .5em 0;
	width: 780px;
	height: 1.5em;
	/* 21 Sept 2007
	 * New FDIC logo as added
	 * and is now placed in footer background 
	background-image: url(footerbkgn.gif); 
	*/
	background-image: url(footerbkgn-fdic.gif);
	background-repeat: no-repeat;
	background-position: left top;
	color: white;
}

#footer p
{
	padding: 0 1em;
	font-size: 0.8em;
	float: left;
	letter-spacing: .1ex;
}

#footer a
{
	color: white;
	text-decoration: underline;
}
#footer a:hover
{
	text-decoration: none;
}

p#fdic
{
	float: right;
	background-image: url(fdicEHL.gif);
	background-repeat: no-repeat;
	background-position: right center;
	text-align: right;
	margin-right: 1em;
	
	/* 21 Sept 2007
	 * Changed Member FDIC into an image
	 * This text doesn't display
	 * and footer has background with new logo */
	 display: none;
}