/* CSS Document by Evelyn Miller, June 4, 2007*/

/*This stylesheet controls the San Francisco Special Patrol Police Prototype website.*/

/* The body controls the image in the upper left corner */

body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

/*This header is the main header that is inside the #container box and goes across the entire
page */

#header {
	height: 165px;
	width: 950px;
	position: absolute;
	left: 0px;
	top: 0px;
	background-attachment: scroll;
	background-image: url("images/950xBridge3.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #000000;
	visibility: visible;
}
/*  the title of the SF Police Special patrol in upper right corner*/

	#header-index {
	height: 30px;
	width: 279px;
	position: absolute;
	left: 648px;
	top: 10px;
	z-index: 2;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	padding-top: 0px;
	text-align: center;
}

/* this box is main outside container. Everything is inside it except the #footer*/

#container {
	margin-top: 0px;
	padding: 0px;
	margin-right: auto;
	margin-left: auto;
	height: 850px;
	width: 950px;
	position: relative;
	background-color: #000000;
}

/*this box is inside the #container box and is the navigation dimensions, etc.*/


#navigation {
	width: 942px;
	position: absolute;
	height: 20px;
	margin: 0px;
	padding: 4px;
	left: 0px;
	top: 166px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #000000;
	vertical-align: middle;
}
/*this controls how the links look within the navigation, this is for the links before
any mouse is activating it. */

#navigation a, a:link, 
				a:visited {
	display:inline;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #000000;
	padding: 2px;
	font-weight: bold;
	}
	
/* here is after it is activated by mousing over it. */	

#navigation a:hover, a:active {
	display:inline;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #3399CC;
	padding: 2px;
	font-weight: bold;
		}
		
/* this box is inside the #container and is where most of the text is located for first page. Other pages this
is located in #contentbeyondone style, located at bottom of this stylesheet*/

#content {
	height: 670px;
	position: absolute;
	width: 950px;
	left: 0px;
	top: 194px;
	padding: 0px;
	overflow: auto;
	text-align: left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #FFFFFF;
	line-height: 1.4em;
	vertical-align: top;
	background-attachment: scroll;
	background-image: url("images/950CityHallPB253325-1.jpg");
	background-repeat: no-repeat;
	background-position: center top;
}

/*this box is inside the content box and anything inside this box (between the beginning and end of the div, will
 be centered within the #container box. THIS IS USED TO HOLD THE Training PHOTO*/
 
#content-centeredtext {
	text-align: center;
	background-color: #000000;
	height: 181px;
	width: 411px;
	position: absolute;
	z-index: 2;
	left: 4px;
	top: 196px;
	background-attachment: scroll;
	background-image: url("images/img_training.gif");
	background-repeat: no-repeat;
	background-position: left top;
}

/*this controls how the links look within the content box, this is for the links before
any mouse is activating it. */

#content a, a:link, a:visited {
	color: #FFFFFF;
	display:inline;
	font-size: small;
	font-style: normal;
	line-height: 1.4em;
	text-decoration: underline;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	background-color: #011472;
	padding: 0px;
	}

/* here is after it is activated by mousing over it. */
				
#content a:hover, a:active {
	color: #FFFFFF;
	display:inline;
	font-size: small;
	font-style: normal;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.4em;
	text-decoration: underline;
	background-color: #99FF00;
	padding: 0px;
		}
		
/* This italizies things within the content box when span is used */

.health {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: italic;
	text-transform: capitalize;
	color: #FFFFFF;
}
/* redefines the h3 font style. */

h3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #FFFFFF;
}

/* The footer is outside the #container box and placed on the right*/

#footer {
	height: 221px;
	width: 194px;
	position: absolute;
	left: 78px;
	top: 263px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #000000;
	background-attachment: scroll;
	background-image: url("images/img_sfpd.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}



/*same as #content style from above in function but for the additional pages. Mostly difference is
in the location of the box on the page.*/

#contentbeyondone {
	height: 450px;
	position: absolute;
	width: 500px;
	left: 134px;
	top: 255px;
	padding: 10px;
	overflow: auto;
	text-align: left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #FFFFFF;
	line-height: 1.4em;
	
}

#contentbeyondone a, a:link, a:visited {
	color: #FFFFFF;
	display:inline;
	font-size: small;
	font-style: normal;
	line-height: 1.4em;
	text-decoration: underline;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	background-color: #000000;
	padding: 0px;
}
#contentbeyondone a:hover, a:active {
	color: #FFFFFF;
	display:inline;
	font-size: small;
	font-style: normal;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.4em;
	text-decoration: underline;
	background-color: #3399CC;
	padding: 0px;
}

/*This controls the picture on the left side, there is a different picture on each
page but it is positioned with the same coordinates*/

#footerhistory {
	height: 271px;
	width: 194px;
	position: absolute;
	left: 708px;
	top: 277px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #000000;
	background-attachment: scroll;
	background-image: url("images/img_sfpd.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
#footermission {
	height: 271px;
	width: 194px;
	position: absolute;
	left: 708px;
	top: 277px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #000000;
	background-attachment: scroll;
	background-image: url("images/2withcar.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
#footercharter {
	height: 271px;
	width: 194px;
	position: absolute;
	left: 708px;
	top: 277px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #000000;
	background-attachment: scroll;
	background-image: url("images/img_city.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}

#footerqualification {
	height: 271px;
	width: 194px;
	position: absolute;
	left: 708px;
	top: 277px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #000000;
	background-attachment: scroll;
	background-image: url("images/badge.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
#footerservices {
	height: 271px;
	width: 194px;
	position: absolute;
	left: 708px;
	top: 277px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #000000;
	background-attachment: scroll;
	background-image: url("images/img_spdog.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
#footerfieldoperations {
	height: 271px;
	width: 228px;
	position: absolute;
	left: 690px;
	top: 277px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #000000;
	background-attachment: scroll;
	background-image: url("images/small_special.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
#footercontact {
	height: 271px;
	width: 194px;
	position: absolute;
	left: 708px;
	top: 277px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #000000;
	background-attachment: scroll;
	background-image: url("images/sfpsppatch.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 5;
}
#footerassociation {
	height: 178px;
	width: 163px;
	position: absolute;
	left: 708px;
	top: 277px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	vertical-align: bottom;
	padding: 0px;
	background-color: #FFFFFF;
	background-attachment: scroll;
	background-image: url("images/ctyseal.gif");
	background-repeat: no-repeat;
	background-position: center center;
}
/* this box contains my prototype logo*/

#copyright {
	position:absolute;
	left: 0px;
	top: 842px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	color: #FFFFFF;
	width: 950px;
	background-color: #000000;
	height: 20px;
	z-index: 2;
	text-align: center;
	vertical-align: top;
}

#copyright a, a:link, a:visited {
	color: #FFFFFF;
	display:inline;
	font-size: small;
	font-style: normal;
	line-height: 1.4em;
	text-decoration: underline;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	background-color: #000000;
	padding: 0px;
}
#copyright a:hover, a:active {
	color: #000000;
	display:inline;
	font-size: small;
	font-style: normal;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.4em;
	background-color: #FFFFFF;
	padding: 0px;
}
#videobox {
	position:absolute;
	left: 133px;
	top: 743px;
	color: #FFFFFF;
	width: 403px;
	background-color: #000000;
	height: 54px;
	z-index: 2;
	text-align: center;
	vertical-align: top;
}

#preamblehighbw {
	position: absolute;
	left: 138px;
	top: 366px;
	height: 312px;
	width: 387px;
	z-index:5;
	background-color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: top;
	border: thick solid #FF0000;
	padding-top: 30px;
	}