/* --------------------------------------------------
Site:     Bank of Commerce (www.bocrawlins.com)
Version:  September 2008
--------------------------------------------------*/

/* =Eric Meyer, Reset CSS - v1.0 | 20080212
--------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, 
h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, del, dfn, em, 
font, img, ins, kbd, q, s, samp, small, strike, 
strong, tt, var, b, u, i, dl, dt, 
dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 100%;
}

/* =Miscellaneous
--------------------------------------------------*/
/* Always show the right scrollbar track */
html {
	overflow-y: scroll;
}
body {
	position: relative;
	width: 785px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/backgrounds/body.jpg);
	background-repeat: repeat;
	background-position: left top;
}
.devNote {	
	color: #FF00FF !important;
	font-weight: bold !important;
}
.textNormal {
	font-weight: normal;
}
.borderFull {
	border: solid 1px #aa9d6f;
}
.appReqField {
	color: #FF0000;
}

/* =Print Styles
-------------------------------------------------------------------------------- */
.print {
	display: none !important;
}
.noPrint {}

/* =Calculator Fonts
--------------------------------------------------*/
#calculatorArea table table {	
	width: 100%;
	margin: 9px 0;
}
#calculatorArea table table th, #calculatorArea table table td {	
 	text-align: left;
	padding: 3px;
	 empty-cells: show;
	vertical-align: top;
	border-spacing: 0;
	text-align: left;
}
/* =Header*/
#calculatorArea table b {
	font-size: 15px;
	text-transform: uppercase;
	font-weight: normal;
	color: #5b2707;
}
/* =Bold "Results" Text*/
#calculatorArea table table b {
	font-size: 11px;
	color: #000000;
}

/* =Window function classes
--------------------------------------------------*/
/*These are only here so that Dreamweaver's auto-complete will know they exist, 
making it faster to edit. These classes are only used with the windowFunctions() 
javascript function and do not require modification for decoration purposes.*/
.extLink {}
.emailLink {}
.testBrowser {}
.calcLink {}
.newWindow {}

/* =Fonts
--------------------------------------------------*/
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	color: #000000;
	line-height: 18px;
}
input, select, textarea {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
}
textarea {
	width: 96%;
}
a:link, a:visited, a:hover, a:active {
	color: #4a2812;
	font-weight: bold;
	text-decoration: underline;
}
#contentMain a:link, #contentMain a:visited, #contentMain a:hover, #contentMain a:active {
	font-weight: normal;
}
p, ul, ol, dl, blockquote, table {
	margin-bottom: 18px;
}
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 6px;
}
ul, ol, blockquote {
	margin-right: 10px;
	margin-left: 10px;
}
#contentMain ul li {
	list-style: none;
	background: url(images/bullets/bulletMain.gif) no-repeat left 5px;
	line-height: 16px;
	margin: 0px;
	padding: 0px 0px 1px 8px;
}
h1, h2 {
	margin-bottom: 10px;
	padding-top: 4px;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: normal;
	color: #5b2707;
}
h3, h4, h5, h6 {
	font-size: 14px;
	font-weight: normal;
	color: #5b2707;
}

/* =Header
--------------------------------------------------*/
#header {
	float: left;
	width: 739px;
	height: 260px;
	padding-top: 23px;
	padding-right: 23px;
	padding-bottom: 0px;
	padding-left: 23px;
	background-image: url(images/backgrounds/header.png);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 500;
}
#hp #header {
	background-image: url(images/backgrounds/headerHP.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#header img {
	display: block;
}

/* Logo section
--------------------------------------------------*/
#logo {
	float: left;
	width: 303px;
	height: 224px;
}

/* Banner section
--------------------------------------------------*/
#banner {
	float: left;
	width: 435px;
	height: 224px;
}

/* Main Navigation
--------------------------------------------------*/
#navMain {
	position: relative;
	float: left;
	width: 739px;
	height: 28px;
	z-index: 1000;
}
#navMain ul, #navMain li {
	display: block;
	width: auto;
	margin: 0;
	list-style: none;
}
#navMain li {
	float: left;
}

/* Drop down menus
--------------------------------------------------*/
#navMain .menu {
	position: absolute;
	left: 0px;
	top: 28px;
	z-index: 999999;
	visibility: hidden;
	width: 160px;
	border-right: solid 1px #aa9d6f;
	border-bottom: solid 1px #aa9d6f;
	border-left: solid 1px #aa9d6f;
	border-top: none;
	filter: alpha(opacity=95);
	moz-opacity: 0.95;
	opacity: 0.95;
}
#navMain .menu ul, #navMain .menu li {
	float: none;
	width: 160px;
	margin: 0;
}
#navMain .menu a:link, #navMain .menu a:visited, #navMain .menu a:hover {
	display: block;
	width: 140px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	background-color: #d5c88e;
	font-size: 12px;
	text-decoration: none;
	color: #4a2812;
	font-weight: normal;
}
#navMain .menu a:hover {
	background-color: #d5c88e;
	color: #71563b;
}
#navMain .menu .top a:link, #navMain .menu .top a:visited, #navMain .menu .top a:hover {
	padding-top: 6px;
}
#navMain .menu .bottom a:link, #navMain .menu .bottom a:visited, #navMain .menu .bottom a:hover {
	padding-bottom: 6px;
}

/* Drop down menu placement
--------------------------------------------------*/
#busLayer.menu {
	left: 0px;
}
#depositsLayer.menu {
	left: 134px;
}
#loansLayer.menu {
	left: 228px;
}
#contactLayer.menu {
	left: 302px;
}
#aboutLayer.menu {
	left: 407px;
}
#switchLayer.menu {
	left: 500px;
}
#calcLayer.menu {
	left: 623px;
}

/* =Content
--------------------------------------------------*/
#content {
	float: left;
	width: 739px;
	padding: 0 23px;
	background-image: url(images/backgrounds/content.png);
	background-repeat: repeat-y;
	background-position: left top;
}
#hp #content {
	background-image: url(images/backgrounds/contentHP.png);
	background-repeat: repeat-y;
	background-position: left top;
}

/* =Sub Content
--------------------------------------------------*/
#contentSub {
	float: left;
	width: 193px;
	padding-right: 3px;
	padding-left: 4px;
}
#hp #contentSub {
	width: 239px;
	padding-right: 4px;
	padding-left: 4px;
}
#contentSub img {
	display: block;
}

/* Login Section */
#login {
	margin-bottom: 20px;
	text-align: center;
}
#hp #login {
	margin-right: 0;
	margin-bottom: 50px;
	margin-left: 0;
}
#login h2 {
	position: relative;
	margin-top: -8px;
	margin-right: 0;
	margin-bottom: 9px;
	margin-left: -4px;
	padding: 0px;
}
#hp #login h2 {
	margin-top: -8px;
	margin-right: 0;
	margin-bottom: 9px;
	margin-left: -4px;
	padding: 0px;
}
#login table {
	width: 90%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border: none;
	border-spacing: 0px;
	empty-cells: show;
}
#hp #login table {
	width: 100%;
}
#login table td {
	padding: 2px;
	vertical-align: middle;
	text-align: right;
}
#hp #login table td {
	text-align: left;
}
#id, #pin {
	width: 104px;
}
#login label {
	color: #4a2812;
	font-size: 11px;
	font-weight: bold;
}

/* Home Page Side Column Links
--------------------------------------------------*/
#hpLinks ul, #hpLinks li {
	display: block;
	width: 239px;
	margin: 0;
	list-style: none;
}

/* Helpful Links
--------------------------------------------------*/
#helpfulLinks {
	background-color: #e2d9b0;
	background-image: url(images/helpfulLinks/footer.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#helpfulLinks h2 {
	margin: 0;
	padding: 0;
}
#helpfulLinks ul, #helpfulLinks li {
	display: block;
	margin: 0;
	padding-right: 6px;
	padding-left: 6px;
	list-style: none;
}
#helpfulLinks ul {
	padding-top: 3px;
	padding-bottom: 6px;
}
/*#helpfulLinks li {
	padding-bottom: 3px;
}*/
#helpfulLinks a:link, #helpfulLinks a:visited, #helpfulLinks a:hover {
	font-stretch: condensed;
	font-weight: bold;
	text-decoration: none;
}

/* =Main Content
--------------------------------------------------*/
#contentMain {
	position: relative;
	float: left;
	width: 530px;
	padding-right: 4px;
	padding-left: 4px;
}
#hp #contentMain {
	width: 271px;
	padding-right: 6px;
	padding-left: 7px;
}
#news h1 {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
#news dl {
	padding-right: 8px;
	padding-left: 8px;
}
#news dd {
	margin-bottom: 10px;
}
#news dl dt a {
	font-weight: bold !important;
}
#pageHeader {
	position: relative;
	margin-top: -8px;
}
#pageHeader h1 {
	margin: 0;
}
#pageHeader span {
	display: none;
}
#pageContent {
	padding: 14px 18px 10px 18px;
}

/* =Extra Content (Home Page Only)
--------------------------------------------------*/
#contentExtra {
	float: left;
	width: 188px;
	padding-right: 11px;
	padding-left: 8px;
}
#promo {
	margin-bottom: 10px;
}
#weather {
	width: 182px;
	padding: 2px;
	border: solid 1px #366496;
	background-color: #FFFFFF;
	background-image: url(images/backgrounds/weather.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	text-align: center;
}
#weatherLink {
	width: 184px;
	padding-top: 0px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	background: #2f5a84;
	text-align: center;
}
#weatherLink a:link, #weatherLink a:visited, #weatherLink a:hover, #weatherLink a:active {
	font-size: 10px;
	color: #FFFFFF;
}

/* =Footer
--------------------------------------------------*/
#footer {
	float: left;
	width: 739px;
	height: 18px;
	padding-top: 9px;
	padding-right: 23px;
	padding-bottom: 23px;
	padding-left: 23px;
	background-image: url(images/backgrounds/footer.png);
	background-repeat: no-repeat;
	background-position: left top;
	color: #FFFFFF;
	font-size: 10px;
	line-height: 18px;
}
#hp #footer {
	background-image: url(images/backgrounds/footerHP.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#footer ul, #footer li {
	display: block;
	width: auto;
	margin: 0;
	list-style: none;
}
#footer li {
	float: left;
}
#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
	color: #FFFFFF;
	text-decoration: none;
}

/* Secondary Navigation
--------------------------------------------------*/
#navSec {
	float: left;
	width: auto;
}
#navSec li {
	margin-left: 18px;
}

/* Site Information (FDIC & EHL Logos)
--------------------------------------------------*/
#siteInformation {
	float: right;
	width: auto;
	padding-right: 10px;
}
#phoneNumber {
	font-size: 10px;
	padding-right: 14px;
	margin-right: 14px;
	border-right: solid 1px #c4bb9a;
}
#compliance {
	font-size: 9px;
}
#compliance strong {
	font-size: 10px;
}
#compliance img {
	margin-left: 4px;
	vertical-align: text-bottom;
}

/* Show/Hide Classes
--------------------------------------------------*/

.hideObject {
	display: none;
	padding: 0px;
}
.showObject {
	display: block;
	padding: 0px;
}

.hideFormObject {
	display: none;
	padding: 0px;
}
.showFormObject {
	display: inline;
	padding: 0px;
}

/* FAQs Formatting
--------------------------------------------------*/

table.faqTable {
	width: 100%;
	margin: 13px 0;
	border: none;
}
table.faqTable th, table.faqTable td {
	padding: 2px 4px;
	border: none;
	text-align: left;
	vertical-align: text-top;
}
table.faqTable tr.faqQuestion th, table.faqTable tr.faqQuestion td, table.faqTable tr.faqAnswer th {
	font-weight: bold;
}
table.faqTable tr.faqQuestion th {
	font-size: 14px;
	color: #73673a;
}
table.faqTable tr.faqAnswer th {
	font-size: 14px;
	color: #000000;
}
table.faqTable tr.faqAnswerHidden {
	display: none;
}

/* = Product Matrix Formatting
--------------------------------------------------*/

.matrix {
	width: 100%;
	border-spacing: 0;
	font-size: 11px;
	border: solid 1px #aa9d6f;
	border-collapse: collapse;
	margin-bottom: 18px;
}
.matrix td, .matrix th {
	padding: 4px;
	text-align: center;
	border: solid 1px #aa9d6f;
}
.matrix th {
	background-color: #361d09;
	border: 1px solid #aa9d6f;
	font-weight: bold;
	color: #fff;
	vertical-align: top;
}
.matrix td {
	background-color: #eeebdd;
	vertical-align: middle;
}
.matrix td.leftCol, .matrix th.leftCol {
	text-align: left;
	vertical-align: top;
}
.matrix tr.rowHighlight td {
	background-color: #d9d4c0;
}
.matrix tr.showMoreInfo {
	display: block;
	display: table-row;
}
.matrix tr.showMoreInfo td {
	text-align: left;
}
.matrix tr.hideMoreInfo {
	display: none;
}
.matrix tr.hideMoreInfo td {
	text-align: left;
}

/* = Matrix Formatting - (left alligned)
--------------------------------------------------*/

.matrixAlt {
	width: 100%;
	border-spacing: 0;
	font-size: 11px;
	border: solid 1px aa9d6f;
	border-collapse: collapse;
	margin-bottom: 18px;
}
.matrixAlt td, .matrixAlt th {
	padding: 4px;
	text-align: left;
	border: solid 1px #aa9d6f;
	vertical-align: top;
}
.matrixAlt th {
	background-color: #361d09;
	border: 1px solid #aa9d6f;
	font-weight: bold;
	color: #fff;
}
.matrixAlt td {
	background: none;
	vertical-align: top;
}
.matrixAlt td.mtxPhoto {
	text-align: center;
	width: 1%;
}

/* = Form Formatting - (left alligned)
--------------------------------------------------*/

.form {
	width: 100%;
	border-spacing: 0;
	font-size: 11px;
	border: solid 2px #f1eee2;
	border-collapse: collapse;
	background-color: #e3e0d2;
	margin-bottom: 18px;
}
.form td, .form th {
	padding: 6px;
	text-align: left;
	border: solid 2px #f1eee2;
	vertical-align: top;
}
.form th {
	background-color: #361d09;
	border: solid 2px #f1eee2;
	font-weight: bold;
	color: #fff;
}
.form td {
	background: none;
	vertical-align: top;
}
.formLeftCol{
	font-weight: bold;
}
.form table {
	width: 100%;
	border-spacing: 0;
	border: none;
	margin-bottom: 0px;
}
.form table td, .form table th {
	padding: 1px;
	border: none;
}

/* = Officers  & Directors
--------------------------------------------------*/
dl.staff {
	margin-top: 25px;
	float: left;
	width: 494px;
	margin-bottom: 0px;
}
dl.staff dt {
	float: left;
	width: 100px;
	padding-top: 4px;
	padding-right: 10px;
}
dl.staff dd {
	float: left;
	width: 384px;
}
dl.staff dd h2 {
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: normal;
	text-transform: none;
	color: #5b2707;
}