/**
 *	@project: FreeTeenPermit
 * 	@filename: style.css
 *	@description: The main stylesheet 
 *	@author: PlasticBrain Media LLC
 *
 *
 *
 *	Table of Contents
 *		> General..........body, html, etc
 *		> Typography.......h tags, p tags, links, etc
 *		> Header...........the header, logo, and login links
 *		> Content..........The actual "meat" of the page
 *		> Forms............text boxes, text areas, etc.
 *		> Tables...........TD, TR, tables, etc
 *		> Messages.........message boxes
 *		> Footer...........footer links, and copyright info
 *
 */
 
 
 
 
 
 /**
  * @general
  *		body, html, etc
  *
  */

	body {
		background: #fff url( ../images/bg.gif ) repeat-x 0 0;
		font-family: Arial, sans-serif;
		color: #435A78;
	} 

	html, body {
		height: 100%;
	}

	
	#wrapper {
		width: 880px;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -100px;
		padding: 0 10px;
	} 
  
  .push {
  	clear: both;
  	height: 0px;
  }
  
  .push10 {
  	clear: both;
  	height: 10px;
  }
  
  .push20 {
  	clear: both;
  	height: 20px;
  }
  
  .push50 {
  	clear: both;
  	height: 50px;
  }
  
  .center {
  	text-align: center;
  	margin: 0 auto;
  	display: block;
  }
  
  .right {
  	text-align: right;
  	float: right;
  	display: block;
  }
  
  img.start_test {
  	margin: -85px 0 0 300px;
  }
  
  
  /**
  * @typography
  *		h tags, p tags, links, etc
  *
  */
  
  p {
  	font-size: 12px;
  	line-height: 22px;
  }
  
  p.testimonial {
  	font-style: italic;
  	width: 80%;
  }
  
  a {
  	color: #FF5500;
  	text-decoration: none;
  }
  
  h1 {
  	font-size: 22px;
  }
  
  ul.check li {
  	background: url( ../images/li-check.gif ) no-repeat 0 50%;
  	padding: 1px 0 1px 25px;
  	margin: 10px 0;
  	font-size: 14px;
  }
  
  
  /**
  * @header
  *		header, logo, and login links
  *
  */
  
  #header {
  	height: 68px;
  }
  
  #logo {
  	float: left;
  }
  
  #header-right {
		float: right;
		margin: 25px 0 0 0;  
		color: #FF5500;
		font-size: 12px;
  }
  
  #header-right p.tagline,
  #header-right h2.tagline {
  	font-weight: bold;
  	margin: 0 0 10px 0;
  	line-height: 0;
  	font-size: 18px;
  }
  
  #header-right p.login-link a {
  	color: #FF5500;
  	text-decoration: none;
  }
  
  #header-right p.login-link {
  	color: #1E5A78;
  	text-align: right;
  }  
  
  #header-image {
  	background: url( ../images/banner.jpg ) no-repeat 0 50%;
  	width: 881px;
  	height: 394px;
  	margin: 0 auto;
  }
  
  #header-image #btn {
  	display: block;
  	padding: 200px 0 0 240px;
  }
  
  #header-image p {
  	font-size: 13px;
  	font-weight: 600;
  	color: #000;
  	display: block;
  	padding: 30px 0 0 200px;
  }
  
  #header-image span.code {
  	color: #ff0000;
  	margin: 0 0 10px 0;
	}
  	
  
  /**
  * @content
  *		the actual "meat" of the page
  *
  */
  
  #content {
  	font-size: 12px;
  	width: 800px;
  }
  
  #content p {
  	font-size: 12px;
  	line-height: 22px;
  	margin: 5px 0;
  }
  
  .round-top {
  	background: url( ../images/round-top.jpg ) no-repeat 0 50%;
  	width: 924px;
  	height: 10px;
  }
	
	.round-bottom {
  	background: url( ../images/round-bottom.jpg ) no-repeat 0 50%;
  	width: 924px;
  	height: 10px;
  }	  
  
  .round-content {
  	background: #fff;
  	border-left: 1px solid #d2d2d2;
  	border-right: 1px solid #d2d2d2;
  	padding: 10px 20px;
  	width: 882px;
  	overflow: hidden;
  }
  
  .round-content h3 {
  	color: #1481CF;
  	font-size: 16px;
  	margin: 0 0 15px 0;
  }
  
  .round-content p {
  	margin: 10px 0 15px !important;
  }
  
  .round-content-left {
  	float: left;
  	width: 420px;
  }
  
  .round-content-right {
		float: right;
		width: 420px;  	
  }
  
  ul.sitemap {
  	margin: 20px 0;
  }
  
  ul.sitemap li {
  	margin: 5px 0 15px;
	}
	
	ul.sitemap li a {
		display: block;
		font-size: 16px;
	}
	
	ul.sitemap li a small {
		display: block;
		font-size: 12px;
		color: #727272;
	}


  #enter-code {
  	text-align: center;
  	padding: 125px 0px 0 0;
  	margin: 0 0 0 -150px;
  }
  
  #enter-code span#orange-holder {
  	background: url( ../images/code-bg.jpg ) no-repeat 0 50%;
  	width: 195px;
  	height: 34px;
  	text-align: center;
  	display: block;
  	margin: 0 auto;
  	padding: 10px 0 0 0;
  }
  
  #enter-code input#blue-submit {
  	background: url( ../images/blue-button.gif ) no-repeat 0 50%;
  	width: 253px;
  	height: 41px;
  	display: block;
  	cursor: pointer;
  	border: none;
  	margin: 0 auto;
  }
  
  #enter-code span#enter-code-image {
  	display: block;
  	margin: 15px 0 0 0;
  }
  
  #enter-code a {
  	font-size: 16px;
  }
  
  #content #inside {
  	width: 600px;
  	margin: -50px 0 0 200px;
  }
  
  #testimonials {
  	font-size: 12px;
  	font-style: italic;
  }
  
  #testimonials ul li {
  	margin: 15px 0;
  	line-height: 16px;
  }
  
  .bottom_box {
  	text-align: left;
  	font-size: 14px;
  	line-height: 18px;
  	color: #FF5500;
  	margin: 0 auto;
  	font-weight: 600;
  }
  
  
  
  /**
  * @Forms
  *		text boxes, text areas, etc
  *
  */
  
  ul.form {
  	margin: 0;
  	padding: 0;
  }
  
  ul.form li {
  	margin: 0 0 5px 0;
  	clear: both;
  	
  }
  
  ul.form li label {
  	display: block; 
  	float: left;
  	width: 120px;
  	font-size: 12px;
  	padding: 4px 0 0 0;
  	font-weight: 600;
  }
  
  input.text, textarea.text, select.text {
  	border: 1px solid #222;
  	height: 20px;
  	width: 200px;
  }
  
  input.text.large, textarea.text.large, select.text.large {
  	width: 500px;
  }
  
  textarea.text.large {
  	height: 200px;
  }
  
  input.yellow-submit {
  	background: url( ../images/yellow-submit.jpg ) no-repeat;
  	width: 116px;
  	height: 48px;
  	border: none;
  	cursor: pointer;
  }
  
  input.get-permit {
  	background: url( ../images/get-your-permit.jpg ) no-repeat;
  	width: 200px;
  	height: 55px;
  	border: none;
  	cursor: pointer;
  }
	
	
	  
  input.error { 
  	border-color: #ff0000;
  	background: #FFF7F7 !important;
  }
  
  span.error, label.error {
  	color: #ff0000;
  }
  
  label.error {
  	display: block; 
  	width:  250px !important;
  	clear: both;
  	float: none;
  	margin: 0 0 10px 120px;
  }
  
 
/**
 * @Tables
 *
 */ 		
 
 
table#county_list {
 	
}


table#county_list tr {
	padding: 5px 0;
}

table#county_list tr td {
	padding: 0 5px;
}

table#county_list tr td h4 {
	background: #E4F2FB;
	font-size: 14px;
	padding: 3px;
	width: 160px;
}

table#county_list tr td p {
	margin: 0 5px !important;
}

table#county_list tr td p a {
	color: #435A78;
}

table#county_list tr td p a:hover {
	color: #FF5500;
}

table#county_list tr td p span.highlight.city {
	background: yellow;
	padding: 5px;
	font-weight: 600;
	font-size: 15px;
	margin: 3px 0;
}
   
  
/**
 * @Message Boxes
 *
 */ 		
	
	.message {
		width: 800px;
		display: block;
		padding: 10px 0;
		margin: 0 auto 30px auto;
		background: #fff;
		text-indent: 40px;
		clear: both:
	}

	.message h6 {
		font-size: 16px;
		margin: 0 0 5px 0;
		padding: 0 0 0 20px;
		color: #000;
	}

	.message p {
		margin: 0;
		padding: 0 0 0 20px;
		font-size: 14px;
	}
	
	.message-error {
		border: 1px solid #C42608;
		background: #FFF0EF url( ../images/icons/error.png ) no-repeat 10px 50%;
	}
	
	.message-error h6 {
		color: #C42608;
	}
	
	.message-warning h6 {
		color: #FF6600;
	}
		
	.message-success {
		border: 1px solid #6DC70C;
		background: #fff url( ../images/icons/success.png ) no-repeat 10px 50%;
	}
	
	.message-warning {
		border: 1px solid #FB8322;
		background: #FBEADC url( ../images/icons/warning.png ) no-repeat 10px 50%;
	}
	
	.message-information {
		border: 1px solid #468FC7;
		background: #E7F3FB url( ../images/icons/information.png ) no-repeat 10px 50%;
	}
	
  
  
  /**
  * @footer
  *		footer links, and copyright info
  *
  */
  
  
  #footer {
  	width: 100%;
  	height: 67px;
  	display: block;
  	margin: 10px 0 0 0;
  	padding: 0px 0 0px 0;
  	text-align: center;
  	background: url( ../images/bg_footer.gif ) repeat-x 0 100%;
  }
  
  #footer-inside {
  	padding: 20px 0 0 0;
  	margin: 0 auto;
  	width: 500px;
  	text-align: center;
  	color: #ddd;
  }
  
  #footer-inside p {
  	font-size: 12px;
  	line-height: 18px;
  	display: block;
  	margin: 0 auto;
  	text-align: center;
  	
  }
  
  #footer-inside a {
  	padding: 0 5px;
  	text-decoration: none;
  	color: #2985b0;
  	font-size: 10px;
  }
    
  p#copyright {
  	text-align: center;
  	display: block;
  	margin: 5px auto 0;
  	font-size: 10px;
  	color: #727272 !important;
  }
  
  p#bottom-text {
  	display: block;
  	width: 880px;
  	margin: 0 auto;
  	font-size: 10px;
  	color: #727272;
  	text-align: left;
  }