/* CSS Document 
*
*	@developer:		Jake Plummer
*	@designer:		Jake Plummer
*	@website:		http://www.localhomealarmsystems.com
*	@other:			IDs included are intended to start providing consistency and familiarity with styles across all websites
*	@styles:		selector { LAYOUT(position, float, clear), APPEARANCE(display, width, height, background, border), SPACING(padding, margin), TYPOGRAPHY(font, color, text-decoration), MISC.(z-index, zoom)}
*/

/********************************************************************************
			RESETS
********************************************************************************/

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, label, p, strong, em, table, td { margin: 0; padding: 0;}
ul, ol { list-style: none;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
img { border: 0;}
* { vertical-align: baseline;}

/********************************************************************************
			GLOBAL STYLES
********************************************************************************/

body { background: #dfc08f url(/images/bg.png) repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; color: #333333;}

/* floats */
.float-left { float: left;}
.float-right { float: right;}
.clear { clear: both;}
br.clear { clear: both; height: 1px; font-size: 1px; line-height: 1px;}

/* typography */
.phone { color: #fff000;}
p { padding-bottom: 1em;}
sup {font-size: 8px; height: 0; line-height: 1; position: relative; left: 0; top: -5px; vertical-align: baseline !important; vertical-align: bottom;}
.center { text-align: center;}

/* headers */
h1 { padding: 50px 0 0 30px; font-size: 32px; line-height: 1.25; color: #ffffff;}
	h1 span { font-size: 30px;}
	h1 span span { font-style: italic;}
h1.contact { padding: 85px 0 0 30px;}
h2 { clear: both; font-size: 20px; padding-bottom: 10px; color: #307bbb;}
h3 { padding-bottom: 5px; font-size: 18px; color: #000000;}

/********************************************************************************
			WRAPPERS
********************************************************************************/

#wrapper { width: 960px; margin: auto;}
#col-01 { width: 938px; background: #ffffff; border: #cfa96c solid 1px; padding-bottom: 40px; margin: 15px auto 0 auto;}

/********************************************************************************
			HEADER CONTENT
********************************************************************************/

#header { position: relative; width: 960px; height: 127px; background: url(/images/header-bg.png) no-repeat;}
	#logo { position: absolute; right: 0; top: 0; display: block; width: 176px; height: 127px; background: url(/images/logo.png) no-repeat;}
	#header .cta { position: absolute; left: 300px; top: 30px; font-weight: bold; font-size: 30px; line-height: 1.25; color: #ffffff; text-align: center;}
		#header .cta span { font-size: 24px;}
		#header .cta .phone { font-size: 30px;}
	
/* main nav */
#main-nav { position: absolute; left: 22px; bottom: 0; color: #ffffff;}
	#main-nav li { float: left;}
	#main-nav .divider { padding-top: 3px;}
	#main-nav a { display: block; padding: 3px 10px; font-size: 14px; color: #ffffff; text-decoration: none;}
	#main-nav a:hover, #main-nav #active { color: #fff000;}

/********************************************************************************
			HERO IMAGE
********************************************************************************/

#hero-image { width: 960px; height: 226px; background: url(/images/hero-landing.jpg) no-repeat;}
	
/********************************************************************************
			CONTENT
********************************************************************************/

#content-top { width: 940px; height: 10px; background: url(/images/content-top.png) no-repeat; font-size: 1px; line-height: 1px;}
#content-bottom { width: 940px; height: 10px; background: url(/images/content-bottom.png) no-repeat; font-size: 1px; line-height: 1px;}
.content { padding: 10px 20px 0;}
	div.float-left { width: 580px;}
	.content-image { border: #ababab solid 1px; padding: 2px;}
	#col-01 .cta { width: 938px; background: #808080 url(/images/cta-bg.png) repeat-x left bottom; padding: 5px 0;
					font-weight: bold; font-size: 24px; line-height: 1.25; color: #ffffff; text-align: center;}
		#col-01 .cta .phone { font-size: 34px;}
	#contact-phone { font-weight: bold; margin-bottom: 15px; font-size: 30px; line-height: 1.25; text-align: center;}
		#contact-phone .phone { background: #3465a9; padding: 2px 15px;}
	.hours { margin: 0 0 15px; text-align: center;}
	
/* contact form */
#contact-form { background: #3465a9; width: 444px; padding: 15px 5px 15px 15px; margin: 15px auto;}
	#contact-form label { float: left; margin: 0 10px 10px 0; font-weight: bold; color: #ffffff;}
	#contact-form input { width: 200px; border: #1a4b8b solid 1px; padding: 5px;}
	#contact-form .submit { display: block; width: 185px; height: 38px; background: url(/images/contact-submit.gif) no-repeat; border: 0; padding: 0; margin: 10px auto 0; cursor: pointer;}
	#contact-form .submit:hover { background-position: 0 -38px;}
	#contact-form .required { display: block; font-weight: bold; font-size: 10px; color: #ffffff;}
	#contact-form .error { background: #ffffff; border: #fe0000 solid 1px; padding: 5px 0; margin: 0 10px 10px 0; color: #fe0000; text-align: center;}

/********************************************************************************
			FOOTER
********************************************************************************/

#footer { padding: 15px 20px 30px; font-size: 10px; line-height: 12px; color: #3d2b04; text-align: center;}

/********************************************************************************
			CLEARING ELEMENTS THAT CONTAIN FLOATED ELEMENTS
********************************************************************************/

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */