/* CSS Document for Citizens Crime Watch */
/* main colors list:
*/

body {
	font-size: 90%;
	background: #FFFFFF url(../images/ccwbody_simple.jpg) repeat-x;
	margin: 0;
	padding: 0;
	text-align: left;
}
p {
font: .8em/140% "Lucida Grande", Verdana, Arial, sans-serif;
}
a:link {
color: #E4212F;  /* red */
font-weight: 700;
}
a:visited {
color: #3AB1CC;  /* lt turquoise */
font-weight: 700;
}
a:hover, a:focus {
color: #176B90;  /* main turquoise color */
font-weight: 700;
}

h1 {
font: 1.2em/115% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
color: #2F6AB2;
text-align: left;
vertical-align: top;
}

h2 {
font: .9em/140% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
color: #176B90;
/* red */
}

h3 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
color: #000;
}

h1 + h3 {
padding: 0px;
margin: -10px 0 0 0;
}
h5 {
font: 1em/140% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: normal;
color: #000000;
}

#frame {
width: 900px;
margin: 0;
padding: 0;
text-align: left;
}
#frame.simplelong {
width: 900px;
margin: 0;
padding: 0;
text-align: left;
}
#header {
	margin: 0;
	padding: 0;
	background: #FFFFFF url(../images/ccwbanner2_900.jpg) no-repeat;
	height: 112px;
	width: 900px;
}
/* ------------- STYLES FOR THE MENUHOLDER ------------------------- */
#menuholder {
	width: 800px;
	margin: 14px 0 0 25px;
	padding: 0px; /* puts vertical space around text in horizontal menu, and dictates left margin */
	overflow: inherit;
	text-align: left;
}

/* --------------------------- HERE ARE STYLES FOR THE MAIN CONTENT PARTS OF THE PAGE -----------------------------------------------*/

#content {
margin: 6px 25px 0px 0px;
padding: 6px 0 0 25px;
width: 1000px;
position: relative;
background: #FFFFFF;
}
*html #content {
margin: 6px 25px 0px 0px;
padding: 0px 0 0 25px;
width: 1000px;
position: relative;
z-index: 5000;
background: #FFFFFF;
/*border-top: 2px solid #8E8258;*/
}

#content.short {
width: 800px;
height: 850px;
margin: 6px 25px 0px 0px;
}
*html #content.short {
width: 800px;
height: 850px;
margin: 6px 25px 0px 0px;
}

#content.long {
width: 750px;
height: 1500px;
margin: 6px 25px 5px 0px;
}
*html #content.long {
width: 750px;
height: 800px;
margin: 6px 25px 5px 0px;
}

#content.simplelong {
width: 900px;/* was 750px */
height: 1500px;
margin: 6px 25px 5px 0px;
background: #FFFFFF;
}
*html #content.simplelong {
width: 750px;
height: 800px;
margin: 6px 25px 5px 0px;
background: #FFFFFF;
}

#content p {
font: .8em/140% "Lucida Grande", Verdana, Arial, sans-serif;
margin: 0 0 0 0px;
padding: 0 0 15px 0;
text-align: left;
vertical-align: top;
}
#content p.home {
font: .8em/140% "Lucida Grande", Verdana, Arial, sans-serif;
margin: 0 270px 0 0px;
padding: 0 0 15px 0;
text-align: left;
vertical-align: top;
}

#content p.center {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
color: #176B90;
margin: 0;
padding: 5px 0 5px 0;
text-align: center;
}
#content p.notice {
font: .9em/140% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 800;
color: #C40A12;
}
#content ul {
margin-top: 0px;
}
#content li {
font: .8em/150% "Lucida Grande", Verdana, Arial, sans-serif;
margin-bottom: 8px;
}

#content h2 {
/* THIS IS THE PRODUCT NAME IN THE TABLE */
margin: 2px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
vertical-align: top;
}
#content h2 a:link {
color: #826915;
}
#content h2 a:visited {
color: #3787B4;
}
#content h2 a:hover, a:focus {
color: #176B90;  
}
#content h3 {
margin: 3px 0px 4px 0px;/* was -2 top */
padding: 0px 0px 0px 0px;
text-align: left;
vertical-align: top;
}
#content h3 a:link {
color: #E4212F;
}
#content h3 a:visited {
color: #3787B4; 
}
#content h3 a:hover, a:focus {
color: #176B90;
}

#content h5 {
font: .9em/140% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: normal;
margin: 5px 0px 0px 0px;
padding: 4px 0px 6px 0px;
text-align: left;
vertical-align: top;
}
#content img.right {
float: right;
margin: 0 0 0 20px;
}

#content caption {
font: 1em/130% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
color: #176B90;
margin: 8px 0 0px 0;
}
/* --- HERE ARE GENERAL STYLES FOR TABLES ---*/ 
#content table img {
margin: 0;
padding: 0;
}
#content table p {
margin: 0;
padding: 0 0 0 0;
}

#content p.right {
text-align: right;
font-weight: 700;
margin-right: 5px;
}


/* --- OTHER ITEMS ---*/
#content table {
border-collapse: collapse;
}
#content table h3 {
font: .9em/140% "Lucida Grande", Arial, sans-serif;
font-weight: 700;
color: #176B90;
margin: -5px 0 0 0;
padding: 0px 0 0 0;
text-align: left;
vertical-align: top;
}
#content table th {
margin: 0px;
padding: 0px;
text-align: left;
vertical-align: top;
}

#content table td.noborder { /* NOBORDER IS USED ON ANY TD WHERE THE DEFAULT IS TO HAVE A BORDER */
border: none;
padding: 5px 5px 3px 2px; /* this brings strange results to font size on last row */
}

#content table td.noborder p {
font: .9em/140% "Lucida Grande", Arial, sans-serif;
}
#legislative td, #legislative2 td {
vertical-align: top;
border: 1px #088AC5 solid;
border-collapse: collapse;
}
#legislative td.highlight, #legislative2 td.highlight {
vertical-align: top;
border: 1px #088AC5 solid;
background-color: #DFF4F5;
}
#legislative td h2, #legislative2 td h2 {
text-align: left;
margin: 4px 0 0 15px;
color: #000000;
}
#legislative td.highlight h3, #legislative2 td.highlight h3 {
text-align: center;
margin-top: 1px;
}
#legislative td p, #legislative2 td p {
text-align: left;
margin-left: 15px;
}
#legislative td p.details, #legislative2 td p.details {
text-align: left;
margin-left: 35px;
}
#legislative td ul, #legislative2 td ul {
text-align: left;
margin-left: 10px;
}
#legislative td li, #legislative2 td li {
font: .8em/130% "Lucida Grande", Verdana, Arial, sans-serif;
margin-top: 3px;
}
#municipalities td {
vertical-align: top;
border: 1px #088AC5 solid;
border-collapse: collapse;
}
#municipalities td.cityname {
vertical-align: top;
border: 1px #088AC5 solid;
background-color: #DFF4F5;
}
#municipalities td h2 {
text-align: left;
margin: 4px 0 0 15px;
color: #000000;
}
#municipalities td.cityname h3 {
text-align: center;
margin-top: 1px;
}
#municipalities td p {
text-align: left;
margin-left: 15px;
}
#municipalities td p.details {
text-align: left;
margin-left: 35px;
}
#municipalities td ul {
text-align: left;
margin-left: 10px;
}
#municipalities td li {
font: .8em/130% "Lucida Grande", Verdana, Arial, sans-serif;
margin-top: 3px;
}
#commissioners td {
vertical-align: top;
border-collapse: collapse;
padding-bottom: 10px;
}
#commissioners td.cityname {
vertical-align: top;
border: 1px #088AC5 solid;
background-color: #DFF4F5;
padding-bottom: 0px;
}
#commissioners td h2 {
text-align: left;
margin: 4px 0 0 15px;
color: #000000;
}
#commissioners td.cityname h3 {
text-align: left;
margin-top: 1px;
margin-left: 15px;
}
#commissioners td p {
text-align: left;
margin-left: 15px;
}
#commissioners td p.details {
text-align: left;
margin-left: 35px;
}
#commissioners td ul {
text-align: left;
margin-left: 10px;
}
#commissioners td li {
font: .8em/130% "Lucida Grande", Verdana, Arial, sans-serif;
margin-top: 3px;
}


/* --- STYLES FOR SIDELINKS ON RIGHT SIDE OF CONTENT DIV --- */

#sidelinks { /*THIS CONTAINS THE RESOURCES, PREVENTION LINKS AND EVENTS INFO BOXES */
float: right;
margin: 0px 0px 0px 20px;
padding: 0;
/*background: #DFF2F5;
border-left: 1px #088AC5 solid;*/
width: 250px;
/*height: 900px;  REMOVE THIS HEIGHT IF CONTENT IS THERE!!! LET THE CONTENT DICTATE THE HEIGHT 
z-index: 6000;*/
}
* html #sidelinks { /*THIS CONTAINS THE RESOURCES, PREVENTION LINKS AND EVENTS INFO BOXES */
float: right;
margin: 0px 0px 0px 0px;
padding: 0;
/*background: #DFF2F5;
border-left: 1px #088AC5 solid;*/
width: 250px;
/*height: 900px;  REMOVE THIS HEIGHT IF CONTENT IS THERE!!! LET THE CONTENT DICTATE THE HEIGHT 
z-index: 6000;*/
}
#sidelinks h1 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
margin: 10px 0 10px 0;
padding: 0 0 0 15px;
color: #000000;
}
* html #sidelinks h1 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
margin: 10px 0 0 0;
padding: 0 0 0 15px;
color: #000000;
}
#sidelinks h2 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
padding: 0 0 0 15px;
color: #2F6AB2;
}
* html #sidelinks h2 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
padding: 0 0 0 15px;
color: #2F6AB2;
}
#sidelinks h1 a:link{ 
color:#176B90;
text-decoration: none;
}
#sidelinks h1 a:visited{ 
color: #295D9E;
text-decoration: none;
}
#sidelinks h1 a:hover, a:focus{ 
color: #2F6AB2;
text-decoration: underline;
}
#sidelinks h1 a:active{ 
color: #387FD8;
text-decoration: underline;
}
#resources {
width: 200px;
margin: 14px 0 20px 10px;
}
* html #resources {
width: 200px;
margin: 20px 0 20px 10px;
/*font-size: 1%;*/
}
#resources td {
vertical-align: top;
margin: 0;
padding: 0;
}

#resources h1 + h2 {
margin: -10px 0 0 0;
}
#resources td#tabledata1 {
background: #FFFFFF url(../images/resourcesmid_200.jpg) repeat-y;
vertical-align: top;
margin: 0;
padding: 0;
}
#resources td#tabledata2 {
background: #FFFFFF url(../images/resourcesmid_200.jpg) repeat-y;
vertical-align: top;
margin: 0;
padding: 15px 15px 0px 15px;
}
#resources td#tabledata2 p {
font: .85em/150% "Lucida Grande", Arial, sans-serif;
font-weight: 800;
padding: 0 0px 15px 0px;
}


#preventionlinks {
width: 200px;
margin: 20px 0 20px 10px;
}
* html #preventionlinks {
width: 200px;
margin: 20px 0 20px 10px;
}
#preventionlinks td {
vertical-align: top;
margin: 0;
padding: 0;
}
#preventionlinks h1 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
margin: 10px 0 10px 0;
padding: 0 0 0 15px;
color: #000000;
}
#preventionlinks h2 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
padding: 0 0 0 15px;
color: #2F6AB2;
}
#preventionlinks h1 + h2 {
margin: -10px 0 0 0;
}
#preventionlinks td#tabledata2 {
background: #FFFFFF url(../images/prevenmid_200.jpg) repeat-y;
vertical-align: top;
margin: 0;
padding: 0;
}

#upevents {
width: 200px;
margin: 20px 0 20px 10px;
}
* html #upevents {
width: 200px;
margin: 20px 0 20px 10px;
}
#upevents td {
vertical-align: top;
margin: 0;
padding: 0;
}
#upevents h1 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
margin: 10px 0 10px 0;
padding: 0 0 0 15px;
color: #000000;
}
#upevents h2 {
font: .9em/120% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
padding: 0 0 0 15px;
color: #2F6AB2;
}
#upevents h1 + h2 {
margin: -10px 0 0 0;
}
#upevents td#tabledata3 {
background: #FFFFFF url(../images/upeventsmid_200.jpg) repeat-y;
vertical-align: top;
margin: 0;
padding: 0;
}


#photobanner {
width: 540px;
margin: 0;
padding: 20px 0px 0px 0px;
/*z-index: 200;*/
}
#photobanner img {
margin: 0px 0px 0px 0px;
padding: 0 22px 0 0;
/*border: 1px solid #088AC5;*/
}

#carmenscolumn {
width: 510px;
padding: 0px 10px 5px 10px;
background: #DFF4F7;
border: 1px #088AC5 solid;
/*z-index: 300;*/
}

#carmenscolumn h1 {
font: 1.2em/125% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
margin-top: 10px;
}
#carmenscolumn h1 img {
float: right;
padding: 0 10px 0 10px;
}

#carmenscolumn h3 img {
float: right;
margin: 0px 0 0 0;
padding: 0px 60px 0 0;
vertical-align: text-bottom;
}
div.events {
width: 812px;
background-color: #088AC5;
padding: 1px 2px 1px 2px;

}
* html div.events {
width: 812px;
background-color: #088AC5;
padding: 0 2px 0 2px;
}

div.events h3 {
color: #FFFFFF;
}
table #phototable {
width: 250px;
/*padding: 0px 10px 5px 10px;*/
background: #DFF4F7;
border: 1px #088AC5 solid;
}

#phototable1, #phototable2, #phototable3, #phototable4, #phototable5, #phototable6 {
width: 250px;
/*padding: 0px 10px 5px 10px;*/
background: #DFF4F7;
border: 1px #088AC5 solid;
}
/*#phototable td {
padding: 10px 10px 10px 10px;
}*/
#phototable1 td.caption, #phototable2 td.caption, #phototable3 td.caption, #phototable4 td.caption {
padding: 0px ;
background: #DFF4F7;
border: 1px #088AC5 solid;
vertical-align:top;
padding: 2px 0px 2px 0px;
}
#phototable1 td.caption p, #phototable2 td.caption p, #phototable3 td.caption p, #phototable4 td.caption p, #phototable5 td.caption p, #phototable6 td.caption p {
font: .8em/135% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight:700;
color: #088AC5;
padding: 0 10px 0 10px;
}
#highlightbox {
width: 350px;
padding: 0px 10px 5px 10px;
background: #FFF /*#DFF4F7*/;
border: 1px #088AC5 solid;
}

#highlightbox h1 {
font: 1.2em/125% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
margin-top: 10px;
}
#highlightbox h1 img {
float: right;
padding: 0 10px 0 10px;
}

#highlightbox h3 img {
float: right;
margin: 0px 0 0 0;
padding: 0px 60px 0 0;
vertical-align: text-bottom;
}
/*  -------------- MAIN TEXT AREA FOR SIMPLE PAGES -----------------------------   */
#maintext {
width: 555px;/* was 510px */
margin: 0px 20px 0 40px;/*establishes where text starts on page*/
padding: 0 0 0 0;
}
#maintext h2 {
font: .9em/140% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 700;
color: #E4212F;
}
#maintext h4 {
font: .8em/140% "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: 100;
margin: 0 0 0 0px;
padding: 0 0 15px 20px;
text-align: left;
vertical-align: top;
}
#maintext p {
font: .8em/160% "Lucida Grande", Verdana, Arial, sans-serif;
}
/* --- STYLES FOR THE FOOTER --- */ 
/*#footer {
width: 100%;
text-align: center;
margin: 0px;
padding: 3px;
border-top: 4px solid #088AC5;
background: #DFF2F5;
clear: both; 
}*/
#footer {
width: 100%;
text-align: left;
margin: 0px;
padding: 3px 3px 3px 25px;
border-top: 4px solid #088AC5;
background: #DFF2F5;
clear: both; 
}
#footer p {
font: .8em/140% "Lucida Grande", Arial, sans-serif;
margin: 0;
padding: 0px 0 0 0;
color: #0F74B3;
}
#logos p {
font: .7em/130% "Lucida Grande", Arial, sans-serif;
margin: 0;
padding: 0px 0 0 0;
color: #000;
text-align: center;
}

#footer p a:link { 
color: #0F74B3;
}
#footer p a:visited { 
color: #295D9E;
text-decoration: none;
}
#footer p a:hover, a:focus { 
color: #2F6AB2;
text-decoration: underline;
}
#footer p a:active{ 
color: #387FD8;
text-decoration: underline;
}


hr{
	color: #666699;
	height: 1px;
	width: 90%;
}

/* ----- Form Elements ---- */
form {
	margin: 0px;
}

input {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 10px;
	background-color: #FFFFFF;
	border: 1px solid #666699;
	margin: 5px 3px 3px 3px;
}

input.formCheckbox {
	border: none;
	background: transparent;
}

select, textarea {
	background-color: #FFFFFF;
	border: 1px solid #003366;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
}
input.required {
	background-color: #FFFFFF/* yellow #FFFF99*/;
	border-bottom: 1px solid #668099;
	border-left: 1px solid #668099;
	border-right: 1px solid #003366;
	border-top: 1px solid #003366;
	font-weight: bold;
	margin: 5px 3px 3px 3px;
}
input.formButton {
	background-color: #176B90;
	border-bottom: 1px solid #668099;
	border-left: 1px solid #668099;
	border-right: 1px solid #003366;
	border-top: 1px solid #003366;
	color: #D3D3E2;
	font-weight: bold;
	margin: 5px 3px 3px 3px;
}
input#Update {
	background-color: #176B90;
	border-bottom: 1px solid #668099;
	border-left: 1px solid #668099;
	border-right: 1px solid #003366;
	border-top: 1px solid #003366;
	color: #D3D3E2;
	font-weight: bold;
	margin: 5px 3px 3px 3px;
}
input#Delete {
	background-color: #176B90;
	border-bottom: 1px solid #668099;
	border-left: 1px solid #668099;
	border-right: 1px solid #003366;
	border-top: 1px solid #003366;
	color: #D3D3E2;
	font-weight: bold;
	margin: 5px 3px 3px 3px;
}

#txtComments{
	width: 300px;
	height: 75px;
}

#instructions{
	font-size:10px;
}
#maintext h1.centertext, #maintext h2.centertext, #maintext h3.centertext, #maintext p.centertext {
text-align:center;}



/* --- altrowEven & altrowOdd ARE USED TO STYLE ALTERNATING TABLE ROWS --- */
.altrowEven {
	background-color: #E1D699;
}

.altrowOdd{
	background-color: #F0E8B0; /*#FBFBE2*/
}