/*******************************************************
		PROJECT: First Southern Bank

		DESCRIPTION:
		This CSS file comprises basic layout elements
		applicable to all pages of the site.
		Recurring elements like navigation, headers,
		and pull quotes.
		
		CREATED: 6-10-07

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



/*******************************************************
	BASIC LAYOUT ELEMENTS
*******************************************************/

* {margin: 0; padding: 0;}

body {
	color: #000;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	background: #74B1FE url(../images/sky.jpg) repeat-y top center;
	text-align: center;
}

p {
	font-size: .7em;
	line-height: 1.5em;
	margin: 0 0 1.2em 0;
}

h2 {
	color: #194378;
	font-size: 1.0em;
	margin: 0 0 .8em 0;
}

h3 {
	color: #194378;
	font-size: .9em;
	margin: 0 0 .3em 0;
}

h4 {
	color: #000;
	font-size: .8em;
	margin: 0 0 .2em 0;
}

h5 {
	color: #000;
	font-size: .7em;
	margin: 0 0 .2em 0;
}



/* ANCHOR TAGS */

a:link {
	color: #2D61AC;
	text-decoration: underline;
}

a:visited {
	color: #608ED0;
	text-decoration: underline;
}

a:hover {
	color: #1371F9;
	text-decoration: none;
}

a:active {
	color: #1371F9;
	text-decoration: none;
}




img {
	display: block;
	border: 0;
}




ul, ol {
	margin: 0 0 1.6em 2em;
	padding: 0;
}

li {
	font-size: .7em;
	margin: 0 0 6px 0;
	padding: 0;
	line-height: 1.5em;
}

ul li ul {
	margin: .6em 0 0 2em;
}

ul li ul li {
	font-size: 1em;
	margin: 0 0 6px 0;
	line-height: 1.5em;
}






/*******************************************************
	FORM
*******************************************************/
form {
	margin: 18px 0 24px 0;
	padding: 0;
	border: 0;
}

fieldset {
/*	background-color: #EEF2FA;
	border: 1px solid #C0CADF;*/
	border: 0;
	padding: 6px 16px 16px 16px;
	margin: 0 0 24px 0;
}

legend {
	background-color: #567AB4;
	color: #FFF;
	font-size: .7em;
	font-weight: bold;
	padding: 4px;
	margin: 0 0 12px 0;
}



div.formCol1, div.formCol2 {
	float: left;
	display: inline;
}

div.formCol1 {
	margin-right: 12px;
	text-align: right;
	width: 160px;
}

div.formCol2 {
	width: 240px;
}


form div.clear {
	height: 16px;
/*	background: url(../m/dotted-form.gif) repeat-x center left;*/
}

/* "clear" that doesn't use dotted line */
form div.clearLast {clear: both; font-size: 0px; line-height: 0px; height: 0px;}


div.formCol1 h3, div.formCol2 h3 {
	margin: 0;
	padding: 3px 0 0 0;
	font-size: .7em;
}

div.formColWide h3{
	margin: 0 0 6px 0;
	padding: 3px 0 0 0;
	font-size: .7em;
}



h3.fieldsetSec {
	color: #000;
	font-size: .7em;
	margin: 0 0 8px 0;
	text-align: center;
	padding: 3px 0;
	background-color: #C9D3E6;
}


.reqStar {font-size: 125%;color: #F00;font-weight: bold;}
.req {color: #F00;}



input.submitBtn {
	background-color: #FFE309;
	font-size: .7em;
/*	text-transform: lowercase;*/
	font-weight: bold;
}

div.formSection {
	padding: 0 0 36px 0;
}





/*******************************************************
	MAIN CONTAINERS
*******************************************************/

div#global {
	width: 760px;
	margin: 0 auto;
	text-align: left;
/*	background: url(../images/bg-global.gif) repeat-y top left;*/
}

div#mainContent {
	width: 635px;
	padding: 25px 0 0 0;
	margin: 0 0 0 31px;
	background: #FFF url(../images/bg-starman.gif) no-repeat bottom left;
}

div#main {
	width: 600px;
	min-height: 300px;
}

body#pageContact div#main,
body#pageLinks div#main,
body#pageTravel div#main,
body#pageLocations div#main {width:600px;}



/*******************************************************
	TOP
*******************************************************/

div#top {
	position: relative;
	height: 157px;
	background: url(../images/bg-top.gif) repeat-x top left;
}



h1#topLogo { /* Levin technique */
 	width: 338px;
	height: 157px;
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 1em;
	float: right;
}

h1#topLogo span {
	top: 0px;
	left: 0px;
 	width: 338px;
	height: 157px;
	background: url(../images/logo-first-southern-top.gif) no-repeat;
	position: absolute;
	z-index:1;
}

h1#topLogo a {
 	width: 338px;
	height: 157px;
	display: block;
	cursor:pointer;
}


div#topLeft {
	width: 300px;
	height: 157px;
	background: url(../images/bg-top-left.gif) no-repeat 0px 0px;
	position: relative;
}

div#welcomeTop {
	position: absolute;
	left: 20px;
	top: 90px;
}


div#topLinks {
	position: absolute;
	background-color: #5075B2;
	left: 20px;
	top: 26px;
	height: 22px;
	width: 178px;
	color: #FFF;
}

div#topLinks a {
	color: #FFF;
}

div#topLinks ul {
	margin: 0;
	padding: 0;
}

div#topLinks li {
	list-style-type: none;
	float: left;
	font-weight: bold;
	padding: 2px 8px 0 8px;
	background: url(../images/divider-top-links.gif) no-repeat top right;
}

div#topLinks li.topContact {background-image: none;padding-right: 0;}






/*******************************************************
	NAV
*******************************************************/


/* start main nav/dropdowns */
#mainNav {
width:664px;
height:34px;
margin:2px 0 0 8px;
background: url(../images/nav-bg.jpg) repeat-x top left;
overflow:hidden
}
#mainNav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#mainNav a {
	display: block;
	color: #FFF;
	text-decoration: none;
	padding: 10px 0 0 24px;
	margin-bottom:-10px;
	height: 34px;
}
#mainNav li {
	float: left;
	padding: 0;
	margin:0;
	height:34px;
	color:#FFF;
	border-right: 1px solid #FFF
}
#mainNav li a:hover {
	background: url(../images/nav-bg-over.jpg) repeat-x top left;
}
#mainNav li ul {
	position: absolute;
	left: -999em;
	width: 200px;
	font-weight: normal;
	margin: 0;
	border: 1px #16316b solid;
	
}
#mainNav li li {
	width: 200px;
	background:#6185c3;
	height:20px;
}
#mainNav li ul a {
	width: 190px;
	color: #FFF;
	height:20px;
	border: none;
	padding:0 5px;
	font-weight: normal;
	background: #6488c6;
}
#mainNav li ul a:hover {
	color: #FFF;
	background:#335795;
}
#mainNav li ul ul {
	margin: -1.3em 0 0 190px;
}
#mainNav li ul.noclip ul {
	margin-left: -200px;
}
#mainNav li:hover, 
#mainNav li.sfhover {
	background: url(../images/nav-bg-over.jpg) repeat-x top left;
	}
#mainNav li:hover ul ul, 
#mainNav li:hover ul ul ul, 
#mainNav li.sfhover ul ul, 
#mainNav li.sfhover ul ul ul {
	left: -999em;
	display: block;
}
#mainNav li:hover ul, 
#mainNav li li:hover ul, 
#mainNav li li li:hover ul, 
#mainNav li.sfhover ul, 
#mainNav li li.sfhover ul, 
#mainNav li li li.sfhover ul {
	left: auto;
	display: block;
}
/* end main nav/dropdowns */

li#nav-home {width: 100px;}
li#nav-personal {width: 149px;}
li#nav-business {width: 149px;}
li#nav-financial {width: 129px;}
li#nav-location {width: 132px;border-right: 0;}

/*body#pagePersonalOnline li.nav-personal a,
body#pagePersonal li.nav-personal a,
body#pageBusiness li.nav-business a {
	background: url(../images/nav-bg-over.jpg) repeat-x top left;
}*/

/*div#mainNav li#nav-home a {padding-left: 31px;}
div#mainNav li#nav-personal a {padding-left: 29px;}
div#mainNav li#nav-business a {padding-left: 28px;}*/

span.nav-arw {
	float: left;
	width: 10px;
	height: 5px;
	margin-top: 6px;
	background: url(../images/nav-arw.gif) no-repeat center left;
}





/*******************************************************
	SUB NAV
*******************************************************/

div#subNav {
	float: left;
	margin-right: 16px;
	width: 150px;
}

div#subNav ul {
	margin: 0 0 24px 4px;
	padding: 0;
}

div#subNav ul li {
	margin: 0 0 3px 12px;
	padding: 0;
}

div#subNav ul li ul {
	margin: 3px 0 6px 0;
}

#subAbout, #subPersonal, #subBusiness, #subFinancial {display: none;}

/*body#pagePersonal #subPersonal,
body#pagePersonalOnline #subPersonal {display: block;}

body#pageAbout #subAbout {display: block;}

body#pageFinancial #subFinancial {display: block;}

body#pageBusiness #subBusiness,
body#pageBusinessOnline #subBusiness {display: block;}*/

body#pageSignIn div#subNav,
body#pageLocations div#subNav,
body#pageLinks div#subNav,
body#pageHelp div#subNav {
	display: none;
}

/* Third level nav */
div#subNav li ul {display: none;}

div#subNav li ul {display: none;}
body#pageBusinessOnline div#subNav li.business-online-banking ul {display: block;},
body#pagePersonalOnline div#subNav li.personal-online-banking ul {display: block;}






/*******************************************************
	HOME PAGE
*******************************************************/
div#flashHome {
	width: 665px;
	height: 201px;
	margin: 6px 0 0 7px;
}

div#flashHome a {border: 0;text-decoration: none;}

div#marqueeHome {
	width: 600px;
	height:201px;
	text-align:center;
	margin: 3px 0 0 7px;
	padding:10px 33px 10px 33px;
	background-color:#000000;
	color:#DFC81B;
	font-family:Tahoma;
	text-align:center
	/*font-size:35px; */
	
}

div#marqueeHome p{
	text-align:center;
	color:#DFC81B;
	font-family:Tahoma;
	font-size:35px; 
} 



div#marqueeHome a:link {
	color:#DFC81B;
	font-family:Tahoma;
	/*font-size:35px; */
	text-decoration:none
}

	text-decoration:none
}

div#marqueeHome a:visited {
	color:#DFC81B;
	font-family:Tahoma;
	/*font-size:35px;*/
	text-decoration:none
}

div#marqueeHome a:hover {
	color:#a9cdff;
	font-family:Tahoma;
	/*font-size:35px; */
	text-decoration:none
}

div#marqueeHome a:active {
	color:#a9cdff;
	font-family:Tahoma;
	/*font-size:35px;*/
	text-decoration:none
}




div.homeCol1 {
	width: 242px;
	float: left;
	margin-right: 20px;
}

div.homeCol2 {
	width: 336px;
	float: left;
	padding-left: 24px;
}

div.homeCol2 p, div.homeCol2 ul {margin: 0;}

div.homeCol2C1 {
	float: left;
	width: 175px;
	margin: 0 10px 0 0;
}

div.homeCol2C2 {
	float: left;
	width: 150px;
	margin: 0 0 0 0;
}


img.homeSubH {
	margin: 0 0 6px 0;
}




div.loginBox {
	background: #F7FCFF url(../images/login-bg.jpg) repeat-x top left;
	width: 242px;
	margin: 0 0 16px 0;
}

div.loginTop {
	background: url(../images/login-top.jpg) no-repeat top left;
	height: 8px;
	line-height: 8px;
	font-size: 1px;
}

div.loginBtm {
	background: url(../images/login-btm.jpg) no-repeat top left;
	height: 9px;
	line-height: 8px;
	font-size: 1px;
}

div.loginBox form, div.loginBox fieldset {
	background-color: transparent;
	margin: 0;
}

div.loginBox fieldset {
	border: 0;
	padding: 8px 8px;
	margin: 0;
}

div.loginBox form {padding: 0;border: 0;}

div.loginForm {
	border-right: 1px solid #C0CADF;
	border-left: 2px solid #C0CADF;
}

div.loginBox h4 {margin-bottom: .8em;}
div.loginBox h5 {font-weight: bold; margin: 0 0 2px 0;}

div.signInSet {
	padding: 5px 0 5px 0;
}

div.loginSubmit {
	padding-top: 6px;
}




ul.quickLinks {
	padding: 6px 0;
}

ul.quickLinks li {
	list-style-type: none;
	background: url(../images/li-arw.gif) no-repeat center left;
	padding-left: 15px;
}







/*******************************************************
	CONTACT
*******************************************************/
table.contactTable, table.bankHolidays {
	border: 0;
}

table.contactTable td {
	padding: 0 6px 6px 0;
	font-size: .7em;
}





/*******************************************************
	FAQ
*******************************************************/
div.qa {
	padding: 0 0 12px 0;
}

p.question {
	margin: 0 0 6px 0;
	font-weight:bold;
}




/*******************************************************
	BANK HOLIDAYS
*******************************************************/
table.bankHolidays {
	margin: 0 0 16px 0;
	padding: 1px;
	border: 1px solid #D3DAE9;
}

table.bankHolidays td {
	padding: 6px;
	font-size: .7em;
	background-color: #EEF2FA;
}

table.bankHolidays th {
	padding: 6px;
	font-size: .7em;
	background-color: #D3DAE9;
	text-align: center;
}




/*******************************************************
	LOCATIONS
*******************************************************/
div.locationSec {
	padding: 0 0 12px 0;
	margin: 0 0 24px 0;	
	background: url("../images/dot-h.gif") repeat-x bottom left;
}

div.locationImage {
	float: right;
	width: 302px;
}

div.locationImage img {
	border: 1px solid #668;
}




/*******************************************************
	RATES TABLE
*******************************************************/
table.calculator, #ratesTable table {
	border: 1px solid #D3DAE9;
}

table.calculator td, #ratesTable table td {
	padding: 4px;
	background-color: #EEF2FA;
	font-size: .7em;
}

table.calculator thead td {
	background-color: #D3DAE9;
}






/*******************************************************
	TRAVEL
*******************************************************/
div.travel-box {
	float: right;
	width: 200px;
	display:inline;
	margin: 0 0 16px 16px;
	border:1px solid #bfcbe1;
	background-color:#EEF2FA;
	padding: 12px;
}






/*******************************************************
	FOOTER
*******************************************************/
div#footer {
	padding: 48px 0 12px 0;
}

div#footer ul {
	margin: 0;
	padding: 0;
}


div#footer ul li{
	font-size: .7em;
	font-weight: bold;
	display: inline;
	list-style-type:none;
	background-image: none;
	padding: 0 6px 0 0;
	margin: 0 6px 0 0;
}

#footerLegal {
	color: #777;
}

#footerDate {
	text-align: right;
}









/*******************************************************
	MISC
*******************************************************/

div.insetRt {
	float: right;
	display: inline;
	margin: 0 0 16px 16px;
}

/* Legacy browser message */
div.legacyMsg {display: none;}

/* No JavaScript messge */
div.noScriptMsg {background-color: #333333;padding: 12px;}
div.noScriptMsg p {margin: 0;}


div.section {
	padding: 0 0 24px 0;
}

.clear { clear: both; font-size: 0px; line-height: 0px; height: 0px;}

.hide {display: none;}


.downloadLink {
	font-weight:bold;
	background: url(../images/li-arw.gif) no-repeat 0px 5px;
	padding: 0 0 0 15px;
	min-height: 7px;
}

div.hr {
	height: 24px;
	background: url(../images/dot-h.gif) repeat-x center left;
}


#speedbumpContainer {
	background-color:#fff; width:690px; margin:30px auto 50px; text-align:left; 
	padding:30px; border:1px #ccc solid
}

.eStatementsButton {
	padding:12px 0 0 1px;
}