/*---------------------------------------------------------
 [Table of Contents]
 
1.	Body #container .wrapper
2.	Header / #masthead #top
		2.1 		#globalNav / #breadCrumb / #pageName / #dateTime
		2.2			#menuh-container / #menuh
			 2.2.1  .top_parent (horizontial buttons at header)
			 2.2.2	.parent 1 (menu item with flyout)
			 2.2.3	.parent 2 (different menu item with flyout)
			 2.2.4	.parent 3 (another menu item with flyout)
			
3.	Navigation Menu (left side) / #navBar  (.rtop/.rl/.r2/.r3/.r4/  = all part of Nifty Border)
		3.1			#search (Google Search Form)
			3.1.1	.style1 (inside search form - white text)
		3.2			#sectionLinks (top block "Go To")
		3.3 		.relatedLinks (all other blocks)
		3.4 		#purple (selected page)
		3.5 		#footerTan (copyright box)
			3.5.1	.leftSide style2 (text is left justified in the footer)
		
4.	Center Section
		4.1 		#content (container for all of center column)
		4.2 		.feature (first paragraph with the main image)
			4.2.1	#p-left (list is moved a little to the right so the bullets will show)
			4.2.2	#p-left350 (list on the San Joaquin County page)
		4.3 		.story
		4.4			#departments (container for the horizontal buttons on the 'department' pages)
			4.4.1	.hbuttons (horizontal buttons on the 'department' pages)
			4.4.2	.home (selected button on the horizontal row)
			4.4.3	hiliterow
		4.5 		.indexHeader ('class'titles on the Index page in the center section)
		4.6 		.pdf (puts the .pdf icon after the link to a Acrobat Reader page)
		4.7 		.remote (puts the remote icon (box with arrow) after the link)
		4.8			#parks / #parks1 / #parks2 / #parks3 
			4.8.1 	.datatable
		4.9			#click (highlights a link with a double blue line below the text)
		4.10 		.table2
		4.11		#siteTable
		
5.	Right side comumn
		5.1			#nifty  (Nifty Corners block with blue down arrows: list menu)
			5.1.1	list
			5.1.2	#click
		5.2 		#niftyB  (Nifty Corners block with blue buttons: list menu)
		5.3 		#footer (About Us / Site Map / Disclaimer/ Contact Us)
			5.3.1	copyright
		5.4			advert
--------------------------------------------------------------------------		
		COLOR CODES
		#334d55 H1 	Blue text (11px) on light blue background
		#95B0C1 H2 	Background (white text (114%) on blue background)
		#FFFFFF H3 	white text on blue for "GoTo"/ "Useful Links" / "Related Links" [NavBar]
		#000000 H3 	black text on white bg in .feature block
		XXXXXXX	H4	DO NOT USE (Nifty Corners code)
		#334d55 H5 	Bold blue on white, small font - use as subheads
		#000040	H6	Dk Gray font on white backgroud with gray underline
		#004382 Dark Blue (Header, buttons on Go To menu)
		#98672D	gold	(Header - bars)
		#EFEBD3 lt tan	(Header - bars / bdcolor of copyright box)
		#E3DCB3	Med tan	(Header - bar / Selected item in left-side menu)
		#A60053 Purple 	(dk. red) box on selected item in left-side menu)
		#00305B	Dark Blue (Header - page title)
		#95B0C1	Denim Blue (Left column: search box/ color of GoTo buttons. Right Column: background of titles)
		#4E85AE Med Blue (Left column: bgcolor of GoTo box and title bars of menus below)
		#C8D7DF Light Blue (Left column: bgcolor of list items. Bgcolor of Right column.
		
---------------------------------------------------------------------------*/

/*---- This code zeros out all defaults ---- */

html, body,
h1, h2, h3, h5, h6, 
form, fieldset, a {border: 0px; list-style-type: none; padding: 0px; margin: 0px;
} 

form
{
	margin: 0px; padding: 0px;
}
/*----- END OF CODE ZERO OUT----*/



/*********************************** 
  Title Styles 
************************************/

/* bold blue text on a blue background used in header row of tables */
h1{
	font-family: Verdana, Arial, sans-serif;
	color: #334d55;
	margin: 0px;
	padding: 5px 1px 0px 2px;
	overflow: visible;
	z-index: 10;
	bottom: 0px;
	font-size: 11px;
	background-color: #C8D7DF;
}

/* h2 is white text on a blue background - used most often in the right side column */
h2{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 114%;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	text-align: center;
	word-spacing: normal;
	font-weight: bold;
	line-height: 1.5em;
	background-color: #95B0C1;
	width: 100%;
}


/* h3 black text in .feature */
h3{
 font-family: Arial, sans-serif;
 font-size: 1.1em;
 color: #000000;
 margin: 10px 0px 0px;
 padding: 0px;
}
/********************************************************************
 DO NOT CHANGE h4 -- this is used in Nifty Corners 
 
 h4{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: normal;
 color: #333333;
 margin: 0px;
 padding: 0px;
}
****************************************/
h4{
	margin: 0px;
	display: block;
}

/* bold blue text on a white background - similar to h1 - used for subheads in the center column under an h3 header */
h5{
	font-family: Verdana, Arial, sans-serif;
	color: #334d55;
	margin: 0px;
	padding: 5px 1px 0px 2px;
	overflow: visible;
	z-index: 10;
	bottom: 0px;
	font-size: 11px;
}

/* dk gray font on white background with a gray underline   */
h6 {
	font-family: Verdana, Arial, sans-serif;
	color: #000040;
	font-size: 130%;
	line-height: 100%;
	font-weight: bold;
	margin-top: 10px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}
/************  .feature h6 is used on Links_California / Links_Federal / Links_San-Joaqin  ***************/
#content .feature h6 {
	font-family: "Times New Roman", Times, serif;
	color: #000040;
	font-size: 150%;
	line-height: 100%;
	font-weight: bold;
	margin-top: 20px;
}

/*******************************************
 [1. Body] 	
*******************************************/
html
{
	height: 100%;
	}

body{
font-family: Arial, sans-serif; line-height: 1.166; margin: 0px; padding: 0px 0px 10px; max-width: 986px; clear: both; font-size: 76%; text-align:left; background-color: #FFFFFF; float: left; height: 100%; width: 975px; top: 30px; text-indent: 3px; vertical-align: top; list-style-type: none;
}

p{
	margin: 0 10px;
	color: #000000;
	line-height: 1.5em;
	text-indent: 0px;
}

/*centers the page with a minimum width of 770px for small monitors -- does not work with (position: absolute;) in the code*/
body {
text-align : left;
min-width : 770px ;
}
div.wrapper {
width : 770px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
} 
/* end page center*/

/* [#centerPage] is used in all the External-Sites pages  */
#centerPage {
margin-left:auto;
margin-right:auto;
width:50em;
text-align: left;
}

/**************** links *************/
a{
	color:#004382; line-height: 1.3em;
}
a:link{
	color: #004382; line-height: 1.3em;
}
a:visited{
	color: #004382; line-height: 1.3em;
}
a:hover{
	color:#66FFFF;
	line-height: 1.3em;
}
/********/
/*The container surrounds the masthead only to allow the horizontal buttons to work */
/********/

/*[1. body #container]*/

#container {
	min-height: 100%;
	height:100%;
	width: 975px;
	background-color: #FFFFFF;
	padding: 0px 0px 0px 2px;
	margin:0px auto;
	}
	
/***********************************************
2. HEADER
************************************************/

/*[2. #masthead]*/
#masthead{
	padding: 10px 0px 0px;
	width: 975px;
	background-image:url(../_CSS/HEADER-Jewel.jpg);
	background-repeat: no-repeat;
	height: 134px;
	background-attachment: scroll;
	background-position: left top;
	background-color: #EFEBD3;
	left: 0px;
	top: 0px;
}

/*[2.1 #globalNav/breadCrumb/pageName/dateTime]*/
/* #globalNav styles  is the Police Department, Fire District, and Chamber links in the header */

#globalNav{
	padding: 0px 0px 5px;
	border-bottom: 1px solid #CCC;
	margin-top: 134px;
	width: 975px;
	font-weight: bold;
	font-size: 13px;
	background-color: #EFEBD3;
	line-height: 22px;
	font-family: Arial, Helvetica, sans-serif;
	top: 0px;
	text-indent: 30px;
	left: 0px;
}

#globalNav img{
 display: block;
}

#globalNav a {
	font-size: 11px;
	padding: 0;
	margin: 0px;
}

#pageName{
	margin: 0px;
	padding: 0px;
	width: 975px;
	color: #00305B;
	font-size: 18px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #E3DCB3;
	text-align: center;
	letter-spacing: 0.3em;
	font-variant: normal;
	position: absolute;
	top: 177px;
	height: 36px;
	line-height: 30px;
	left: 0px;
}

#breadCrumb{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	word-spacing: normal;
	line-height: 16px;
	width: 973px;
	background-color: #EFEBD3;
	background-position: right;
	text-align: right;
	position: absolute;
	top: 161px;
	height: 20px;
	vertical-align: text-top;
	text-indent: 10px;
	padding-left: 0px;
	left: 3px;
}

#dateTime {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: center;
	word-spacing: normal;
	color: #004382;
	line-height: 20px;
	background-color: #F3F0E0;
	width: 975px;
	padding-left: 0px;
	font-weight: bolder;
	position: absolute;
	top: 206px;
	left: 1px;
}

/*****************************************
3. Right-side Navigation Bar (Vertical list)
**********************************************/

/*[3. navBar]*/

div#navbar{
background-color:#C8D7DF;
}

#navBar{
	width: 200px;
	margin: 0px;
	padding: 0px;
	color: #FFFFFF;
	top: 270px;
	overflow: visible;
	position: absolute;
	visibility: inherit;
	left: 2px;
	background-color: #FFFFFF;
}
#navBar ul a:link, #navBar ul a:visited {
	display: block;
}
#navBar ul {
	margin: 0;
	padding: 0;
	text-align: right;
	list-style-type: none;
	list-style-image: none;
}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #004382;}

/* fix for browsers that don't need the hack */
html>body #navBar li {
	color: #000066;
	text-indent: -10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-image: none;
	list-style-type: none;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #cccccc;
	text-align: right;
	margin: 0px;
}

#navBar ul a:hover
{
	color: #FFFFFF;
	background: #4E85A8;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #FF0000;
}

/*[3.1 #search] styles */

/** "search" title in navigation menu **/
.style1 {
	color: #FFFFFF;
	font-size: 12pt;
}

#search{
	padding: 0px 1px 2px;
	font-size: 90%;
	background-color: #95B0C1;
	margin: 0px;
}

#search form{
 margin: 0px;
 padding: 0px;
}

/*********** [3.2 #sectionLinks] styles  - "Go To:" menu on left side   ***********/

 #navBar #sectionLinks h3 {
	text-align: left;
}


#sectionLinks{
	position: relative;
	padding: 0px;
	border-bottom: 1px solid #FFFFFF;
	font-size: 12px;
	line-height: normal;
	color: #FFFFFF;
	background-color: #95B0C1;
	text-align: right;
	font-weight: bold;
	text-decoration: none;
	margin: 0px;
	list-style-image: none;
	list-style-type: none;

}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	background-color: #4E85AE;
	color: #FFFFFF;
}

#sectionLinks a {
	display: block;
	border-top: 1px solid #cccccc;
	padding: 2px 0px 2px 10px;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #004382;
}

#sectionLinks a:hover{
	color: #ffffff;
	background: #004382;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #FF0000;
	border-top: 1px solid #cccccc;
}

/*********** [3.3 .relatedLinks] styles  - Lower Section menu   ***********/
.relatedLinks{
	position: relative;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	background-color: #C8D7DF;
	font-weight: bold;
	text-indent: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #004382;
	text-decoration: none;
	text-align: right;
	list-style-image: none;
	list-style-type: none;

}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
	background-color: #4E85AE;
	color: #FFFFFF;
	font-size: 1em;
}

.relatedLinks a:link{
	display: block; 
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #4E85AE;
	padding: 2px 0px 2px 10px;
}


.relatedLinks a:visited {
	display: block; 
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #4E85AE;
	padding: 2px 0px 2px 10px;
}

.relatedLinks a:hover {
	background: #4E85AE;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color:#FF0000;
	}
	
	
/*  when you are already on a page, this code gives a purple block - instead of red  */

/* This is for the top "Go To" section   */

 #navBar #sectionLinks #purple {
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color:#A60053;
	height: 15px;
	font-weight: normal;
	padding-top: 5px;
	background-color: #E3DCB3;
	color: #660033;
}

/*  This is for the "Related Links" section   */
 #navBar .relatedLinks #purple {
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #660033;
	line-height: 20px;
	color: #660033;
	background-color: #EFEBD3;
}

/* end purple hover link color */
	
	
/***************************************************************
4. Center column (content / feature / story
***************************************************************/

/********* [4.1 #content] **************************************/
#content{
	position: absolute;
	margin: 0px;
	width: 500px;
	clear: both;
	background-color: #FFFFFF;
	overflow: visible;
	top: 293px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 25px;
	padding-left: 10px;
	left: 216px;
	height: 1579px;
	float:left;
}

#content .feature a {
}
#content .story td {
	line-height: 1.3em;
}

/* "City Government - Commissions-List - References"  pages (sets the left margin inside the tables) */
#content .story #references td {
	padding-left: 225px;
}
#content .story #commissions td {
	padding-left: 125px;
}

/************** [4.2 .feature] styles -- FIRST PARAGRAPH IN CENTER SECTION ***************/
.feature{
	padding: 0px 0px 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1em;
	line-height: 130%;
	text-align: left;
	clear: both;
	margin-bottom: 30px;
	vertical-align: bottom;
	top: 10px;
	width: 524px;
}

.feature h3{
	text-align: center;
	color: #000000;
	font-size: 1.1em;
}

.feature img{
	padding: 0px;
	margin: 0px 10px 10px 8px;
	border: medium outset #4E85AE;
}


/*
p-left is used on the AgnMin_Council.htms page to move all the text to the left of the image in the "feature" block.
also use in: Redevelopment.html & Honor our Soldiers.html 
*/
 #content .feature #p-left {
	float: right;
	width: 220px;
	list-style-position: outside;
	list-style-type: disc;
}

/* p-left350 is used on the San Joaquin County page*/
 #content .feature #p-left350 {
	float: right;
	width: 350px;
	list-style-position: outside;
	list-style-type: disc;
	margin-top: 2em;
}

/************** [4.3.story] styles *****************/
.story{
	padding: 0px 0px 0px 10px;
	font-size: 1em;
	text-align: left;
	clear: both;
	line-height: 1.3em;
	margin: 0px;
}

.story p{
	padding: 0px 0px 10px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1em;
	text-align: left;
	text-indent: 0px;
	z-index: 10;
}
/* [4.3 .story image]  */
#content .story img {
	background-position: center;
}

/* .story list*/
ul{
	margin-top: 1px;
	text-align: left;
	font-weight: normal;
	text-indent: -3px;
	margin-left: 30px;
	list-style-type: none;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

/* "[4.4 #content] .story li" indents the second line that wraps in a list (text-indent: -1px) see the City Clerk's page */
#content .story li {
	margin-bottom: 15px;
	vertical-align: text-top;
	font-family: Arial, Helvetica, sans-serif;
	list-style-position: outside;
	list-style-image: url(../images/btn_arow/graySq.jpg);
}

#content .indexHeader ul li ul li {
	list-style-position: outside;
	list-style-image: url(../images/Icons/ARROWR.gif);
}


/* section list  ( I lost track of where or if this is used)  */

#section ul{
	list-style-type: square;
}

#section ul ul{
 list-style-type: none;
}

#section ul ul ul{
 list-style-type: none;
}

/****** end list properties *******/


/*  [4.4.3 hiliterow] HILITEROW  CSS*/
/* CSS Document -- link to <link href="../_CSS/hiliterow.css" rel="stylesheet" type="text/css" /> */
/*   insert  id="parks"  class="datatable"  in <table> for highlight to work*/

/* Used on the following pages: 
"city-parks"
"Government/Links_California" 
"Demographics"
"Staff_Recreation"
"Utilities-City"
"community-resources"

This style was named "parks" because that was the first page I used this code on, and I liked how it helped read tables, so I continued to use it.
end of list*/
#content .story #parks {
	line-height: normal;
	width: 100%;
	margin: 0px;
}

#content .story #parks2 {
	line-height: normal;
	width: 100%;
	margin: auto;
}

#content .story #parks3 {
	line-height: normal;
	width: 100%;
	margin: auto;
}

#content .story #parks4 {
	line-height: normal;
	width: 100%;
	margin: auto;
}

#content .story #parks5 {
	line-height: normal;
	width: 100%;
	margin: auto;
}


/********** Change id=parks to id=table  **************************************************/
#content  #table {
	line-height: normal;
	width: 100%;
}

#content  #table2 {
	line-height: normal;
	width: 100%;
	margin: auto;
}

#table2 {
	line-height: normal;
	width: 100%;
	margin: auto;
}

#content  #table3 {
	line-height: normal;
	width: 100%;
	margin: auto;
}

#content #table4 {
	line-height: normal;
	width: 100%;
	margin: auto;
}

#content #table5 {
	line-height: normal;
	width: 100%;
	margin: auto;
}
/************************************************************/


.datatable {
	border: 1px solid #D6DDE6;
	border-collapse: collapse;
}
.datatable td {
	border: 1px solid #D6DDE6;	
	padding: 4px;
}
.datatable th {
	border: 1px solid #828282;
	background-color: #BCBCBC;
	text-align: left;
	padding-left: 4px;
}
.datatable caption {
	font: bold 0.9em Arial, Helvetica, sans-serif;
	color: #33517A;
	text-align: left;
	padding-top: 3px;
	padding-bottom: 8px;
}
.datatable tr:hover, .datatable tr.hilite {
	background-color: #FFFFFF;
	color: #000000;
}

/***************************************** 
[4.5 .indexHeader] 

HOME PAGE  styles

*********************************************/
.indexHeader{
	padding: 0px 10px;
	font-size: 1em;
	text-align: left;
	clear: both;
	line-height: 1.2em;
	margin: 0px;
}

.indexHeader p{
	padding: 0px 0px 10px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1em;
	text-align: left;
	text-indent: 0px;
	z-index: 10;
}
#content .indexHeader li {
	margin-bottom: 15px;
	vertical-align: text-top;
	font-family: Arial, Helvetica, sans-serif;
	list-style-position: outside;
	list-style-image: url(../images/btn_arow/graySq.jpg);
}
	
/****************[4.6 .pdf] and other icons***************/
	/*  <a href="##" class="remote">EXTERNAL LINK</a>   */
a.remote {
	background: transparent url(../images/Icons/iconExternalSite.gif) no-repeat center;
	background-position:right;
	padding-right: 20px;
	white-space:nowrap;
	}	
	
 #content .feature a.remote {
	background: transparent url(../images/Icons/iconExternalSite.gif) no-repeat center;
	background-position:right;
	padding-right: 20px;
	white-space:nowrap;
	}
	
/*  <a href="##" class="PDF">ADOBE ACROBAT LINK</a>   */
a.pdf {
	background: transparent url(../images/Icons/icon_PDF.gif) no-repeat center;
	background-position:right;
	padding-right: 20px;
	white-space:nowrap;
	}	
	
	
#icon {
	vertical-align: text-bottom;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 2px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: static;
}

a.update {
	background: transparent url(../images/updated.jpg) no-repeat center;
	background-position:right;
	padding-right: 45px;
	white-space:nowrap;
	}	
	


	
/*  This is for alphabetical indexes  (Glossary page)*/
 #content #parks2 #appendices {
	background-color: #CCDBE6;
	border: thin solid #6699FF;
	width: 15px;
	float: left;
	font-weight: bold;
	margin: 2px 3px 2px 2px;
	text-align: center;
}
/* Stormwater Page   */
 #content  #parks #appendices {
	background-color: #CCDBE6;
	border: thin solid #6699FF;
	width: 15px;
	float: left;
	font-weight: bold;
	margin: 3px;
	text-align: center;
}

	
/*  <a href="##" class="html">html icon</a>   */
a.html {
	background: transparent url(../images/Icons/icon_html.jpg) no-repeat right;
	white-space:nowrap;
	padding-right: 20px;
	}		
/**********  end icons  ***********/


/********    [4.9 #click ]   **********/
 #content .story #click {
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #4E85AE;
}

#click {   /* this click is used in Engineering project pages*/
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #4E85AE;
}

 #content .feature #click {
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #4E85AE;
}


/*  [4.10 table2] is used for the alpha directory on the Disaster Management page, and the tables in the Engineering projects pages*/
#container #masthead #content .story #table2 {
	width: 500px;
	vertical-align: top;
	height: 50px;
}

/* [4.11 siteTable] is used in all the External-Site pages, and the pages under 'Home'  code-compliance/disclaim/holidays/NewsRelease/PhotoGallery/Ripon Emblem/shell Home-info/street-lights */

#siteTable {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	width: 750px;
}

/******************************************************/
/*  [5. #nifty] NIFTY-CORNERS CSS*/

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

/*nifty corners text over the Search Box*/
/*     AFTER <div id="navBar"> PLACE THE FOLLOWING CODE:
  <h4><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  </h4>     
*/

div#nifty {
	margin: 0px;
	background: #C8D7DF;
	width: 215px;
	left: 760px;
	top: 270px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #FFFFFF;
	padding: 0px;
	clear: both;
	position: absolute;
}

 #nifty ul {
	text-indent: 2px;
	margin-right: 2px;
	margin-left: 0px;
	position: relative;
	margin-bottom: 5px;
	margin-top: 5px;
	padding-right: 2px;
	clear: right;

}

#nifty li {
	list-style-position: outside;
	list-style-image:url(../images/btn_arow/down.gif);
	list-style-type:disc;
	font-size: 10pt;
	color:#0000CC;
	margin-top: 2px;
	margin-bottom: 2px;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 5px;
	position: relative;
	text-indent: -2px;
	font-weight: bold;
	line-height: 2em;
}

NiftyB a.pdf {
	background: transparent url(../images/Icons/icon_PDF.gif) no-repeat center;
	background-position:right;
	padding-right: 20px;
	white-space:nowrap;
	}		

/* for Archived Years in agenda/minutes, etc. */
 #nifty .style2 {
	font-weight: bold;
	color: #660033;
}

/***************** [5. #nifty] this code is for the curved top of the left and right columns (Nifty Corners) ************************/
b.rtop, b.rbottom{
	display:block;
	background: #FFF;
}
b.rtop b{
	display:block;
	height: 1px;
	overflow: hidden;
	background: #95B0C1;
	padding-left: 10px;
}
b.rbottom b{
	display:block;
	height: 1px;
	overflow: hidden;
	background: #C8D7DF;
	padding-left: 10px;
}
b.r1{margin: 0px 5px}
b.r2{margin: 0px 3px}
b.r3{margin: 0px 2px}
b.rtop b.r4, b.rbottom b.r4{
	height: 2px;
	background-color: #95B0C1;
	margin-right: 1px;
	margin-left: 1px;
	display: block;
}
/************************* end Nifty Corners curved edge************************/

/* [5.2 #niftyB] This uses blue dots instead of down arrows in the list */


div#niftyB {
	margin: 0px;
	background: #C8D7DF;
	width: 215px;
	left: 760px;
	top: 270px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #FFFFFF;
	padding: 0px;
	clear: both;
	position: absolute;
}

 #niftyB ul {
	text-indent: 2px;
	margin-right: 2px;
	margin-left: 0px;
	position: relative;
	width: 210px;
	margin-bottom: 5px;
	margin-top: 5px;
}

#niftyB li {
	list-style-position: outside;
	list-style-image:url(../images/btn_arow/07-blue-ball.jpg);
	list-style-type:disc;
	font-size: 10pt;
	color:#000000;
	margin-top: 0px;
	margin-bottom: 6px;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 10px;
	line-height: 2em;
	position: relative;
	text-indent: -3px;
}

/* [5.2 #niftyB] for Archived Years in agenda/minutes, etc. */
 #niftyB .style2 {
	font-weight: bold;
	color: #660033;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #D1C681;
	line-height: 15px;
	background-color: #EFEBD3;
}

/******************* [5.1.2. #click] this outlines a link ***********************/

 #nifty #click {
	border-top-width: thin;
	border-bottom-width: medium;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #C8D7DF;
	border-bottom-color: #4E85AE;
}
/*****************  [5.1.1 #nifty] ************************/
/*   this list is used on the "Residents" page under "Outside Service Companies" */
 #nifty .list {
	color: #000000;
	line-height: 1.2em;
	padding-top: 0px;
	margin-top: 0px;
}

/************* [5.3 #footer] styles ***************/

#footer{
	border: 1px solid #4E85AE;
	color: #000000;
	background-color: #C8D7DF;
	padding-left: 10px;
	width: 180px;
	margin: auto auto 10px;
	left: auto;
	right: auto;
}

#footer img{
	padding: 4px 4px 4px 10px;
	vertical-align: middle;
}

#footerTan {
	border: 3px solid #E3DCB3;
	color:#000000;
	background-color: #EFEBD3;
	padding-left: 2px;
	width: 90%;
	margin: 1px 1px 3px 3px;
	overflow: visible;
	visibility: visible;
	text-align: left;
	text-indent: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	left: auto;
	right: auto;
	font-size: 12px;
}

/* [5.3.1 #copyright}  */
 #navBar #footer #copyright {
	width: 179px;
	line-height: 2em;
	margin: 0px;
	font-weight: normal;
	text-indent: -2px;
	border-right-width: 40px;
	border-right-style: solid;
	border-right-color: #4E85AE;
}


/************** [5.4 #advert] -- BOTTOM OF HEADLINES COLUMN ON RIGHT SIDE OF PAGE **************/

#advert{
	padding: 0px;
	width: 200px;
	float: right;
	position: relative;
}

#advert img{
	display: block;
}


/************* [5.3 #siteInfo] styles -- FOOTER   **************/

#siteInfo{
	clear: both;
	border: 1px solid #cccccc;
	font-size: 75%;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
}

#siteInfo img{
	padding: 4px 4px 4px 10px;
	vertical-align: middle;
}


/* label is used in Nifty-Corners\nifty7js.html */
label{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: bold;
 color: #334d55;
}
.icon {
	vertical-align: middle;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 3px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
#nifty #footer .icon {
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	margin: 0px;
}
#container #niftyB #selected {
	list-style-image: url(../images/btn_arow/btn-wht.gif);
}


/* the following are for the Engineering pages    */



#engineering #box {
	background-color: #ECF2FF;
	background-position: center;
	border: 1px solid #000000;
	display: block;
	padding: 10px;
	clear: both;
	float: none;
}

#engineering blockquote {
	border: thin double #66CCFF;
	padding: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align: left;
}
#bid {
	padding: 0px;
	margin: 0px;
	clear: both;
	display: table;
}
#engineering #sewer {
	text-align: left;
	float: right;
	width: 30%;
}
#water {
	list-style-position: outside;
	list-style-image: url(../images/drips.gif);
}

#engineering #arrowDown {
	list-style-position: outside;
	list-style-image: url(../images/btn_arow/down.gif);
	line-height: 2em;
}

/*  This is for alphabetical indexes  (Glossary page)*/
#appendices {
	background-color: #CCDBE6;
	border: thin solid #6699FF;
	width: 15px;
	float: left;
	font-weight: bold;
	margin: 2px 3px 2px 2px;
	text-align: center;
}#none {
	list-style-type: none;
}#niftyB #eng-selected {
	list-style-position: outside;
	list-style-image: url(../images/Icons/ARROWR.gif);
	font-weight: bold;
	text-indent: -20px;
}
#container #masthead #content .story #engineering {
	padding: 10px;
	width: 100%;
}

#container #masthead #content .feature #omitBorder {
	border-top: 0px none;
	border-right: 0px none;
	border-bottom: 0px none;
	border-left: 0px none;
}
#advert2 {
	background-color: #FFFF66;
	border: medium ridge #6666FF;
	line-height: 2em;
	text-align: left;
	margin: 5px;
	padding: 5px;
}