﻿/* CSS Document: styles.css						*/
/* Main site styles for Citizens State Bank		*/
/* Created by SLeeping Gaint Studios, LLC		*/
/* DPE - 11/29/2006								*/


/* --------- HTML TAG RE-DEFINITIONS ---------- */

html {}
 
body {
	background:#fff;
	color:#333;
	font-family:Helvetica, Arial, sans-serif;
	font-size:75%;
	margin:10px 0;
	padding:0;
}

a			{color:#ee3a43;}
a:visited	{color:#ee3a43;}
a:hover		{color:#000;}
a:active	{color:#ee3a43;}

h1,h2,h3,h4,h5,h6,p,form {margin:0; padding:0;}
	
h1 {font-size:2em;}
h2 {font-size:1.6em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.75em;}
h6 {font-size:.75em;}
p  {font-size:.9em;}

img {border:none;}


.clear {
	font-size:1px;
	height:1px;
	line-height:1px;
	color:#fff;
	clear:both;
	margin:-1px 0 0 0;
	padding:0;
}

/* ------------ GERAL SITE LAYOUT ------------- */

div#outerWrap {
	margin-left:auto;
	margin-right:auto;
	width:876px;
	border-top:none;
}

div#masthead {
	float:left;
	display:block;
	padding-bottom:15px;
	border-top:1px solid white;
}

div#masthead #logo {
	display:block;
	float:left;
	width:162px;
}

div#masthead #slogan {
	display:block;
	float:right;
	width:709px;
	margin:115px 5px 0 0;
	text-align:right;
	font-family:Garmond, Times New Roman, Times, serif;
	font-style:italic;
	color:#ee3a43;
}

div#mainNav {
	float:left;
	display:block;
	padding-bottom:40px;
}

div#mainNav ul {
	list-style:none;
	width:876px;
	margin:0;
	padding:0;
	border-top:1px solid #999;
	font-size:.85em;
	font-weight:bold;
}

div#mainNav ul li {
	float:left;
	display:block;
	border-right:1px solid #999;
	position:relative;
}

div#mainNav ul li.last {border:none;}

div#mainNav ul li a {
	float:left;
	display:block;
	padding:4px 33px; /* change to 33px */
	/*color:#999;*/
	color:#fff;
	background:#ee3a43;
	border:1px solid #fff;
	border-bottom:none;
	/*background:transparent;*/
	text-decoration:none;
	position:relative;
	z-index:3;
}

div#mainNav ul li a:hover {
	color:#fff;
	/*background:#ee3a43;*/
	background:#ccc;
	margin-bottom:-1px;
	border-bottom:1px solid #fff;
}

div#mainNav ul li a:active {
	color:#333;
	background:#ccc;
}

div#mainNav ul li ul.subMenu {
	font-size:11px;
	display:none;
	position:absolute;
	top:21px;
	left:-1px;
	width:260px;
	background:#fff;
	border:1px solid #999;
}

div#mainNav ul li ul.subMenu li {float:none; display:block; border:none;}

div#mainNav ul li ul.subMenu li a {
	float:none;
	display:inline-block;
	width:230px;
	padding:2px 14px;
	color:#999;
	border:1px solid #fff;
	border-bottom:none;
	margin-bottom:1px;
	background:#fff;
}

div#mainNav ul li ul.subMenu li a:hover {
	color:#fff;
	background:#ee3a43;
	border:1px solid #fff;
	margin-bottom:0;
}

div#mainNav ul li:hover ul.subMenu,
div#mainNav ul li.sfhover ul.subMenu {display:block;}

div#footer {
	margin-top:20px;
	text-align:center;
}

div#footer ul {
	list-style:none;
	width:876px;
	margin:0;
	padding:0;
	font-size:.75em;
}

div#footer ul li {
	display:inline;
	margin:0 1px;
	padding:0px 5px;
	border-right:1px solid #aaa;
}

div#footer ul li.last	{border:none;}
div#footer ul li a		{color:#999;}
div#footer ul li a:hover{color:#666;}

div#footer h6 {
	float:left;
	display:block;
	width:876px;
	margin:.5em 0;
	color:#999;
}

/* ------------ HOMEPAGE SPECIFICS ------------ */

h3.bannerAd {font-family:Garmond, Times New Roman, Times, serif; font-size:1.6em; font-weight:normal; margin:0px 0 7px 0; text-align:center; color:#333;}
h3.bannerAd img {margin-bottom:-3px;}

div.content div#visuals {
	padding-bottom:4px;
	margin-bottom:10px;
	border-top:1px solid #999;
	border-bottom:1px solid #999;
}

div.content div#visuals img {
	float:left;
	display:block;
	margin:4px 3px 0 0px;
}

div.content div#visuals img.first {margin-left:1px;}
div.content div#visuals img.last {margin-right:0;}
	
div.adBox {
	float:left;
	display:block;
	padding:25px 15px 15px 0;
}

div.adBox div.wrap {
	height:165px;
	overflow:hidden;
	border:1px solid #ee3a43;
	padding:0 15px 15px 15px;
	background:#f2f2f2;
}

div.adBox h3 {
	color:#fff;
	background:#ee3a43;
	margin:0 -15px 15px -15px;
	padding:5px 0;
	text-align:center;
}

div.adBox h4 {margin:.75em 0 .5em 0;}

div.adBox ul {
	list-style-type:square;
	margin:0 0 0 1.5em;
	padding:0;
}

div.adBox ul li {margin-bottom:.25em;}


div.box1 {width:260px; background:#fff url(../images/adBox1-bk.gif) no-repeat;}
div.box1 a {color:#ee3a43;}
div.box1 img.bizLogin {margin-left:5px;}

div.box2 {width:220px; background:#fff url(../images/adBox2-bk.gif) no-repeat;}
div.box2a {width:204px; background:#fff url(../images/adBox2-bk204.gif) no-repeat;}

div.box3 {width:220px; background:#fff url(../images/adBox2-bk.gif) no-repeat;}
div.box3a {width:204px; background:#fff url(../images/adBox2-bk204.gif) no-repeat;}

div.box4 {
	position:relative;
	width:110px;
	margin:0px 0 0 10px;
	padding:0;
	font-size:.9em;
	color:#666;
}

/*--- 4Box Home page addresses -- */
div.box4a {
	position:relative;
	width:800px;
	margin:0px 0 0 10px;
	padding:0;
	font-size:.9em;
	color:#666;
}

div.box4 address {font-style:normal; margin:1em 0; padding:0;}
div.box4  address span.title,
div.box4  address span.phone {color:#ee3a43; font-weight:bold;}

/*--- 4Box Home page addresses -- */
div.box4a address {font-style:normal; margin:1em 0; padding:0;float:left;margin-right:25px;}
div.box4a address span.title,
div.box4a address span.phone {color:#ee3a43; font-weight:bold;}


div#comingSoon {position:absolute; bottom:8px; left:0;}

/* --------- PRIMARY PAGE (CATEGORY) SPECIFICS ---------- */

div#sec.content {}

div#sec.content div#visuals {}

div#sec.content div#visuals img {margin-right:4em;}
div#sec.content div#visuals h1 {
	color:#ee3a43;
	background:transparent;
	font-size:2.25em;
	margin:1.25em 0 0 0;
}

div#sec.content div#visuals p {font-size:1em; margin:.75em 0 0 0;}
div#sec.content div#visuals h3 {margin:.75em 0 0 0;}

div#sec.content div.box1 {width:370px; background:#fff url(../images/loginBox-bk.gif) no-repeat;}
div#sec.content div.box1 div.wrap {height:160px; padding-bottom:0;}
div#sec.content div.box1 div.wrap img {margin:5px 15px 5px 25px;}

div#sec.content div.box2 {width:370px; clear:left; background:transparent; padding:0;}

div#sec.content div.box4 h3 {
	font-size:1.25em;
	color:#333;
	background:transparent;
	margin:0;
	padding:5px 0;
	text-align:left;
}

div#sec.content div.box4 {float:right; width:460px;}
div#sec.content div.box4 ul.secMenu {font-size:1.1em;}
div#sec.content div.box4 ul.secMenu li {padding:2px 0;}

div#sec.content address {color:#666; font-size:.9em; font-style:normal; margin:.5em 20px 1em 0px; padding:0; float:left;}
div#sec.content address span.title,
div#sec.content address span.phone {color:#ee3a43; font-weight:bold;}


/* --------- SECONDARY PAGE (CATEGORY) SPECIFICS ---------- */

div#sec.content div#visuals.secondary div.pageTitle 	{float:left;}
div#sec.content div#visuals.secondary div.pageTitle h1	{}
div#sec.content div#visuals.secondary div.pageTitle h2	{font-size:1.6em;}

div#sec.content div#visuals.secondary ul.secMenu		{font-size:.9em; list-style:none; float:right; margin:5px 0 -5px 0;}
div#sec.content div#visuals.secondary ul.secMenu li 	{margin-top:2px;}

div#sec.content div#features.box4						{margin-bottom:2em;}


/* --------- FAQ PAGE (CATEGORY) SPECIFICS ---------- */

div#sec.content dl.faq				{margin:2em 160px 2em 30px;}
div#sec.content dl.faq .marker		{color:#ee3a43; font-weight:bold;}
div#sec.content dl.faq dt			{font-size:1.25em; font-weight:bold; margin:1.5em 0 0 0;}
div#sec.content dl.faq dd			{margin:.33em 0 0 1.5em;}
div#sec.content dl.faq dd .marker	{font-size:1.25em; font-weight:bold;}

div#sec.content dl.faq dd ul li,
div#sec.content dl.faq dd ol li 	{margin:.33em 0}

div#sec.content dl.faq dd p			{font-size:1em; margin:1em 0 .5em 0;}


/* --------- BUSINESS > CITIZENS REMOTE & ACH (CATEGORY) SPECIFICS ---------- */

div#sec.content div#visuals.secondary ul#business_rd.secMenu {font-size:1.25em; margin:30px 25px 0 0;}

div#sec.content div#description				{font-size:1em; padding-top:28px;}
div#sec.content div#description	h3			{color:#ee3a43; font-size:1.25em; padding-top:0;}
div#sec.content div#description	h4,
div#sec.content div#description	p strong	{color:#333;}
div#sec.content div#description	p			{font-size:1em; margin:1em 0;}

div#sec.content dl#remote {clear:both; padding-top:1em;}

div#sec.content dl#remote .button			{margin:1em 0}

ul.busnav {display:block;float:right;width:173px;margin:-95px 0 0 0;line-height:1.35em;font-size:11px;list-style:none;padding-bottom:0;}
.bus_red {color:#ee3a43;font-size:140%;}
h1.bus_blk {color:#000000;}
.bus {font-size:13px;line-height:1.5em;}

/* --------- PERSONAL > CITIZENS REMOTE & ACH (CATEGORY) SPECIFICS ---------- */

ul.pernav {display:block;float:right;width:183px;margin:-40px 0 0 0;line-height:1.35em;font-size:11px;list-style:none;padding-bottom:0;}
.per_red {color:#ee3a43;font-size:140%;}
h1.per_blk {color:#000000;}
.per {font-size:13px;line-height:1.5em;}
.per p {font-size:13px;line-height:1.5em; padding-bottom:2em}


/* --------- SERVICES & TOOLS > ATM/DEBIT CARD (CATEGORY) SPECIFICS ---------- */

div#sec.content div#visuals.secondary div#atmdc_title.pageTitle	{}
div#sec.content div#visuals.secondary ul#atmdc_menu.secMenu {font-size:1.1em; margin:30px 0px 0 0; padding:0;border:1px solid red;}

ul.secMenu2 {display:block;float:right;width:183px;margin:-66px 0 0 0;line-height:1.35em;font-size:11px;list-style:none;padding-bottom:0;}
ul.servtools_menu {display:block;float:right;width:183px;margin:-86px 0 0 0;line-height:1.35em;font-size:11px;list-style:none;padding-bottom:0;}

div#sec.content div#atmdc_descript			{padding:1em 0 0 0; clear:both;}
div#sec.content div#atmdc_descript h4		{margin:1.5em 0 .25em 0;}
div#sec.content div#atmdc_descript p		{font-size:1em;} 
div#sec.content div#atmdc_descript p img	{margin:0 5px; float:right;}

/* --------- Insurance Center SPECIFICS ---------- */

ul.insMenu {display:block;float:right;width:183px;margin:-55px 0 0 0;line-height:1.35em;font-size:11px;list-style:none;padding-bottom:0;}



/* --------- ABOUT PAGE (CATEGORY) SPECIFICS ---------- */

div#about.content h1			{margin:0; padding:0;}
div#about.content p.descript	{font-size:1em; line-height:1.3333; margin:1em 0;}




div#about.content div.aboutColm1a {float:left; display:inline; width:500px; margin:1.5em 0;}
div#about.content div.aboutColm2a {float:right; display:inline; width:340px; margin:1.5em 0;}







div#about.content div.aboutColm1 {float:left; display:inline; width:500px; margin:1.5em 0;}
div#about.content div.aboutColm2 {float:right; display:inline; width:350px; margin:1.5em 0;}

div#about.content div div.innerColmA {float:left; display:inline; width:277px;}
div#about.content div div.innerColmB {float:right; display:inline; width:200px;}

div#about.content h2			{}
div#about.content h3			{font-size:1.25em;}
div#about.content h3 a			{font-weight:normal;}
div#about.content h5.caption	{font-weight:normal; margin-top:.5em;width:400px;}

div#about.content table		{margin:1em 0; border-collapse:collapse;}
div#about.content table th	{text-align:left; padding:0 3px;}
div#about.content table td	{text-align:left; padding:.25em 3px;}

div#about.content address	{font-weight:bold; font-style:normal;}

div#about.content dl {margin:1em 0; padding:0;font-size:10px;}
div#about.content dl dt {margin:0; padding:0;}
div#about.content dl dd {margin:0 0 1em 0; padding:0;}

div#about.content div.divider {clear:both; font-size:1px; line-height:1px; margin:-1px 0 0 0; padding:0; border-top:1px solid #999;}

.bus_red {color:#ee3a43;}
.bus_blk {color:#000000;}
