/***************************************************************************************
 ******* Name		: style.css
 ******* URI		: /elements/css/style.css
 ******* Description: Main site styles for Lifetime Shingles. Provides basic structural
 *******			  layout, and typographic styles. This is where the magic happens.
 ******* Author		: Congruent Media
 ******* Author URI	: http://www.congruentmedia.com
 ***************************************************************************************/

/***************************************************************************************
 ******* COMMON / GLOBAL STYLES
 ***************************************************************************************/
 body {
	 background: #9d9c9c url(/elements/images/global/bodyBG.gif) 0 0 repeat-x;
	 color: #000;
	 font: normal 14px/1 Arial, Helvetica, sans-serif;
 }
 a, a:link, a:visited {text-decoration: none;}
 a:hover, a:focus, a:active {}
 .left {
	 display: block;
	 float: left;
	 margin: 0 1em 1em 0;
 }
 .right {
	 display: block;
	 float: right;
	 margin: 0 0 1em 1em;
 }
 .pullout {
	 font-size: 80%;
	 text-align: center;
	 width: 300px;
 }
 #container {
	 background: #fff;
	 border: 1px solid #fff;
	 margin: 15px auto 0;
	 width: 990px;
 }

/***************************************************************************************
 ******* HEADER AREA STYLES
 ***************************************************************************************/
 #header {
	 background: #fff url(/elements/images/global/headerBG.gif) 0 0 no-repeat;
	 min-height: 108px;
	 padding: 15px 0 0;
	 position: relative;
 }
 	#header #topNav {
		position: absolute;
		right: 10px;
		top: 10px;
	}
		#header #topNav li {
			border-left: 1px solid #999;
			display: block;
			float: left;
			padding: 0 5px;
		}
		#header #topNav li:first-child,
		#header #topNav li.first-child {
			border: none;
			padding: 0 5px 0 0;
		}
			#header #topNav li a {
				color: #7e0526;
				display: block;
				font-size: 0.857em;
				font-weight: bold;
			}
			#header #topNav li a:hover {text-decoration: underline;}
	#header a#logo {
		background: transparent url(/elements/images/global/logo.png) 0 0 no-repeat;
		display: block;
		height: 79px;
		margin: 0 auto;
		text-indent: -99999em;
		width: 416px;
	}
	#header ul#primaryNavigation {
		display: block;
		height: 27px;
		margin: 1px 0;
	}
		#header ul#primaryNavigation li {
			display: block;
			float: left;
			height: 27px;
			margin: 0 0 0 1px;
			position: relative;
			width: 164px;
		}
		#header ul#primaryNavigation li:first-child,
		#header ul#primaryNavigation li.first-child {margin: 0;}
			#header ul#primaryNavigation li a {
				background: transparent url(/elements/images/global/primaryNavigationBG.gif) 0 0 no-repeat;
				color: #fff;
				display: block;
				font-size: 0.857em;
				font-weight: bold;
				line-height: 27px;
				text-align: center;
			}
			#header ul#primaryNavigation li a:hover,
			#header ul#primaryNavigation li:hover a,
			#header ul#primaryNavigation li.hover a {background-position: 0 -30px;}
		#header ul#primaryNavigation li ul {
			background: #8c0026;
			border: 1px solid #fff;
			border-width: 0 1px;
			left: -99999em;
			position: absolute;
			top: 27px;
		}
		#header ul#primaryNavigation li:hover ul,
		#header ul#primaryNavigation li.hover ul {left: -1px;}
			#header ul#primaryNavigation li ul li {
				height: auto;
				margin: 0;
			}
				#header ul#primaryNavigation li ul li a {
					background: none;
					border-bottom: 1px solid #fff;
					font-size: 0.75em;
					line-height: 1.667em;
					padding: 5px 10px;
					text-align: left;
				}
				#header ul#primaryNavigation li ul li a:hover,
				#header ul#primaryNavigation li ul li:hover a,
				#header ul#primaryNavigation li ul li.hover a {background: #ab274b;}
				#header ul#primaryNavigation li:hover ul li ul,
				#header ul#primaryNavigation li.hover ul li ul {
					border-top-width: 1px;
					left: -9999em;
					top: -1px;
				}
				#header ul#primaryNavigation li:hover ul li:hover ul,
				#header ul#primaryNavigation li.hover ul li.hover ul {left: 164px;}
						#header ul#primaryNavigation li ul li ul li:hover a,
						#header ul#primaryNavigation li ul li ul li.hover a,
						#header ul#primaryNavigation li ul li ul li a:hover {background: none;}

/***************************************************************************************
 ******* CONTENT AREA STYLES
 ***************************************************************************************/
 #middle {}
 	#primaryContent {}
	#secondaryContent {}
		#secondaryContent .callouts div {
			background: transparent url(/elements/images/home/calloutBG.jpg) 0 0 no-repeat;
			height: 144px;
			margin: 0 auto 10px;
			padding: 3px 2px;
			width: 303px;
		}
			#secondaryContent .callouts div.goGreen {
				color: #191919;
				font: normal 11px Helvetica, Arial, sans-serif;
				text-align: center;
			}
			#secondaryContent .callouts div blockquote {
				background: transparent url(/elements/images/global/grayOpenQuote.png) 20px 15px no-repeat;
				padding: 20px 20px 0 30px;
			}
				#secondaryContent .callouts div blockquote p {
					background: transparent url(/elements/images/global/grayCloseQuote.png) right bottom no-repeat;
					color: #333;
					font: normal 17px/1.125em "Times New Roman", Times, serif;
					margin: 0;
				}
					#secondaryContent .callouts div blockquote p strong {
						color: #7e0526;
						font-weight: bold;
					}
			#secondaryContent .callouts div cite {
				display: block;
				font-style: italic;
				font-weight: bold;
				margin: 5px 20px 0 30px;
				text-align: right;
			}
				#secondaryContent .callouts div cite a {color: #000;}
 	img.videoTrigger {cursor: pointer;}

/***************************************************************************************
 ******* FOOTER AREA STYLES
 ***************************************************************************************/
 #footer {
	 background: #fff;
	 border-top: 3px solid #8c0026;
	 padding: 1px 0 0;
 }
 	#footer div {
		background: #151515 url(/elements/images/footerBG.gif) 0 0 repeat-x;
		min-height: 34px;
		padding: 0 25px;
	}
		#footer ul {
			float: left;
			margin: 12px 0;
		}
			#footer ul li {
				border-left: 1px solid #ad0130;
				display: block;
				float: left;
				padding: 0 5px;
			}
			#footer ul li:first-child,
			#footer ul li.first-child {
				border: none;
				padding: 0 5px 0 0;
			}
				#footer ul li a {
					color: #666;
					display: block;
					font-size: 0.8em;
				}
				#footer ul li a:hover {
					color: #fff;
					text-decoration: underline;
				}
		#footer p {
			color: #666;
			float: right;
			font-size: 0.8em;
			line-height: 34px;
			text-align: right;
		}
			#footer p span {color: #ad0130;}
 #footerReflection {
	 background: transparent url(/elements/images/global/footerReflection.png) 0 0 no-repeat;
	 display: block;
	 height: 39px;
	 margin: 1px auto;
	 width: 992px;
 }