/*
	Master CSS Document for the City of Sand Springs website
	Developed by PDG+creative, http://www.pdgcreative.com
	Started: 10-21-10
*/

/******* Gloabl Resets *******/

* { margin: 0; padding: 0}
.clear { clear: both; font-size: 0;}
a { color: #587ea0; text-decoration: none; cursor: pointer; }
a.hover, a.hover { text-decoration: underline;  }
a img {border: none;}
h2, h3 {font-weight: lighter;}
h3, h3 a { font-size: 18px; color: #243d52; text-transform: uppercase;}
p {margin-bottom: 10px;}
strong {font-weight: bold;} /* Not sure why, but the strong tags aren't working normally without this */


/******* Basic Structure *******/

	body {
		background: #f9f9f9;
		font-family: "Lucidia Grande", "Lucidia Sans", "Verdana", sans-serif;
		text-align: center;
		line-height: 140%;
		font-size: .8em;
		font-weight: lighter;
		color: #444;
		}

	.container {
		text-align: left;
		width: 962px;
		margin: 0 auto;
		}
	
	#content {
		background: white url(../../images/bg_content.jpg) no-repeat 90% 0%;
		padding-top: 10px;
		padding-bottom: 20px;
		position: relative;
		z-index: 1;
		}
		
	.margin_wrap {
		margin: 15px;
		}	

/******* Header *******/

	#header {
		height: 79px;
		background: url(../../images/bg_header_repeat.jpg) repeat-x;
		border-bottom: 1px solid #c8def4;
		}

	.utilities {
		float: right;
		display: inline;
		list-style-type: none;
		margin-top: 5px;
		}

		.utilities li {
			display: inline;
			margin-left: 10px;
			float: right;
			}

			.utilities li a {
				font-size: 11px;
				font-weight: 500;
				color: #233d52;
				}

	#header .container {
		background: url(../../images/bg_header.jpg) no-repeat top right;
		height: 79px;
		position: relative;
		}
		
	/* logo */
	#header h1 {
		bottom:0;
		height:52px;
		left:0;
		position:absolute;
		width:482px;
		}
		
		#header h1 a {
			display: block;
			width:482px;
			height:52px;
			background: url(../../images/logo.jpg) no-repeat;
			text-indent: -9000px;
			}
		
/******* Nav 
	code copied from old sand springs site
*******/

#nav {
	background: #587ea0 url(../../images/bg_nav.jpg) repeat-x bottom;
	}	

#nav .container {
	position: relative;
	z-index: 1000;
	}
	
#nav ul {
	position:relative;
	left: -10px;
	}

	#nav ul li {
		list-style: none;
		display: block;
		float: left;
		position: relative;
		margin-right: 1px;
		}

		#nav ul li a {
			display: block;
			color: white;
			text-decoration: none;
			padding: 11px 9px;
			font-size: 13px;
		}

		#nav ul li.cParent a {
			background: #1F3950;
			}
		
		
		#nav ul li a.hover, #nav ul li.hover  {
			background: #1F3950;
			}
			
			#nav ul li ul { /* second level ul */
				position: absolute;
				background: #1F3950;
				width: 210px;
				left: -999em;
				-moz-box-shadow: 0px 5px 10px #444; 
				-webkit-box-shadow: 0px 5px 10px #444; 
				box-shadow: 0px 5px 10px #444;
				z-index: 10000; 
				}
			
				#nav ul li ul li {
					margin-right: 3px;
					width: 210px;
					font-size: 13px;
					line-height: normal;
					}
	
					#nav ul li.level-1 ul li a{
						display: block;
						padding:4px 20px 4px 10px;
						line-height: 20px;
						color: white;
						background: #587ea0;
						}
					
					#nav ul li ul li a.hover {
						background: #1F3950;
						}
					
					
	
						#nav ul li ul li ul { /* third level ul */
							margin: -21px 0 0 210px;
							left: -999em;
							}
					   
					    #nav ul li ul li.hover ul {
					       left: 0px;
					       top: 20px;
					    	}
					   

						#nav ul li ul li ul li ul {  /* fourth level ul */ 
							display: none;
							}
						
							#nav ul ul ul li.hover ul {
								left: 0px;
		       					top: 20px;
		       					display: block;
								}
								
							#nav ul ul ul li.hover ul ul {
							  display: none;
								}
							
						 
						 #nav ul ul ul ul ul { /* fifth level */
						   display: none;
							 }
						 
						 #nav ul ul ul ul li.hover ul {
						   display: block
						 }
							


#nav li.hover ul ul {
	left: -999em;
}

#nav li.hover ul { 
	left: auto;
}
 
#nav li li.hover ul {
	left: 0px;
	top: 20px;
}
	

/******* Utility Bar *******/

	#util {
		background: #e9e9e9 url(../../images/bg_util.jpg) repeat-x bottom;
		}
		
		#util .container {
			padding-top: 5px;
			padding-bottom: 5px;
			}

	/* How to drop down */
	#util form select {
		height: 20px;
		background: none;
		background-color: white;
		border: 1px solid #888;
		color: #999; 
		width: 275px;
		font-size: 12px;
		}

	/* Search */
	#util form#search {
		background: url(../../images/search.jpg) no-repeat;
		padding: 3px;
		width: 135px;
		height: 21px;
		float: right;
		display: inline;
		margin-right: 140px;
		}

		#util form#search input {
			border: none;
			background: none;
			width: 110px;
			margin-left: 20px;
			}



/******* Footer  *******/
	
	#footer {
		background: #f9f9f9 url(../../images/bg_footer.jpg) repeat-x top;
		color: #376ca2;
		clear: both;
		height: 61px;
		}

	#footer p {
		padding-top: 10px;
		text-align: center;
		}

/******* Videos  *******/
	
	#main .video {
		float: left;
		display: inline;
		margin: 0px 8px 30px 8px;
		width: 150px;
		}

	#main .video img {
		width: 100%;
		margin: 0px;
		margin-bottom: 10px;
		}

	.video_popup {
		position: absolute;
		left: -9999px;
		}

	#colorbox .video_popup {
		display: block;
		position: relative;
		left: 0px;
		}

		#colorbox .video_popup video {
			background: black;
			}

		
/******* Classes and Random Junk *******/
	
	.serif {
		font-family: "Platino";
		}
	
	.icon {
		float: left;
		display: inline;
		margin-bottom: 10px;
		height: 33px;
		width: 100%;
		}

	.icon img {
		float: left;
		display: inline;
		}

		
	.icon h3 {
		float: left;
		display: inline;
		margin-top: 5px;
		margin-left: 7px;
		}	
	
	#emailRegistration {
		display: none;
		margin: 20px;
	}			

	#emailRegistration h4 {
		margin: 20px;
		color: #587EA0;
	}

	#emailRegistration input {
		float: right;
		display: inline;
		margin-left: 10px;
	}

	#emailRegistration #submit {
		display: block;
		float: none;
		padding: 1px 40px;
		margin: 20px auto;
		background: #ccc;
		border: 1px solid #999;
		cursor: pointer;
		}

	#emailRegistration #submit:hover {
		background: #999;
	}


	#colorbox #emailRegistration {
		display: block;	
	}