/* CSS Document 
*
*	@developer:		Jake Plummer
*	@designer:		Jake Plummer
*	@website:		http://www.localhomesecuritycity.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: #004b15 url(/images/bg.jpg) no-repeat 50% 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; color: #000000;}

/* floats */
.float-left { float: left;}
.float-right { float: right;}
.clear { clear: both;}

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

/* headers */
h1 { font-weight: bold; font-size: 22px; line-height: 50px; color: #ffffff; text-align: center;}
h2 { font-weight: bold; font-size: 20px; color: #ff8a00;}
h3 {}

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

#wrapper { width: 700px; margin: auto;}
#col-01 { padding: 15px 0 30px;} /* left-column */

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

#header { position: relative; width: 700px; height: 127px;}
	#logo { position: absolute; right: 0; top: 0; width: 146px; height: 127px; background: url(/images/logo.png) no-repeat;}
	#header .cta { position: absolute; left: 172px; top: 35px; color: #ffffff;}
		#header .cta .float-left { clear: none; font-size: 18px;}
		#header .cta span { clear: both; display: block; font-weight: bold; font-size: 14px; line-height: 1;}
		#header .cta .phone { padding-left: 5px; font-size: 40px;}
		#header .cta span span { display: inline; color: #fffc00;}
	#adt-logo { position: absolute; left: 0; top: 0;}

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

#hero-image { width: 700px; height: 274px; background: url(/images/hero-landing.jpg);}
	
/********************************************************************************
			CONTENT
********************************************************************************/

#col-01 .content { background: #ffffff; padding: 20px 20px 30px 20px;}
#col-01 ol { list-style: decimal; margin: 0 0 15px 20px;}
#google-map { display: block; margin: 20px auto; text-align: center;}
#col-01 .cta { background: #d07700 url(/images/cta-bg.png) repeat-x left bottom; border: #d07700 solid 1px; padding: 15px 0; margin-top: 30px; font-size: 22px; line-height: 1.25; color: #ffffff; text-align: center;}
	#col-01 .cta span { font-size: 10px;}
	.vcard .adr { padding-bottom: 10px; font-size: 10px;}
	.vcard .adr span { display: inline;}
	#col-01 .cta .vcard .phone { display: block; padding-bottom: 0; font-size: 32px; line-height: 1;}

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

#footer { padding-bottom: 50px; font-size: 10px; line-height: 12px; color: #ffffff;}

/********************************************************************************
			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 */