@charset "UTF-8";

/*style sheet for CollisionBuilder.com*/

/* -------- color guide ----------
#000000 : black | body background
#021013 : dark blue | main container background
#CCCCCC : light gray | most text
#FF0000 : red | */

/* to jump to a specific section search for the unique character pair at the front of each TOC section 
	<<<tip, highlight the special character and use the shortcut for Find Selection Cntr/Cmd + Shift + G >> */

/* ----- Style sheet TOC ----------------
      ^1 Global constants
	  ^2 Global classes
	  ^3 Page Specific
	  		^3a Home
			^3b How it works
			^3c Testimonials
			^3d form.php (Pricing / Packages)
			^3e Cool Pics
			^3f Contact Us
			^3g Website Spokesperson
	  ^4 Top-level layout
	  ^5 Region detail styles
		  ^5a container
		  ^5b header
		  	^5c upperNav
		  ^5d mainContent
			^5e Middle content
				^5e1 Secondary Col 1
				^5e2 Secondary Col 2
				^5e3 Secondary Col 3
			^5f Lower content
		^5g Footer
		^5h Copyright
*/

/* ^1 --------------------------- global constants -------------------------*/

*
{
	padding:0;
	border-style: none;
	margin: 0px;
}

body
{
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
	background: #FFFFFF url(../images/BG_body.png) repeat-y center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
}

#container
{
	width: 960px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

#container #whyContent #lwrContent
{
	margin-top: 340px;
}

#features #mainContent, #prices #mainContent, #contact_us #mainContent, #howContent #mainContent, #testimonials #mainContent, #content #mainContent
{
	background: #C9D1FE url(../images/BG_mainContentSecondary.png) no-repeat;
	height: 100%;
	position: relative;
}

h1
{
	color: #000B3E;
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

#features h1, #prices h1, #contact_us h1, #whyContent h1, #howContent h1, #testimonials h1, #cool_pics h1, #confirmation h1, #get_started h1, #spokesperson h1, #examples h1
{
	border-bottom: 2px solid #756B4C;
	margin: 20px;
	
}

#action_btn
{
	padding-left: 30px;
}

#testimonials #action_btn, #features #action_btn, #contact_us #action_btn, #howContent #action_btn
{
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#features p, #prices p, #contact_us p, #howContent p, #testimonials p
{
	font: 13px Arial, Helvetica, sans-serif;
}

#features p.signature, #prices p.signature, #contact_us p.signature, #howContent p.signature
{
	padding-bottom: 10px;
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
}

#whyContent #mainContent, #cool_pics #mainContent, #confirmation #mainContent, #get_started #mainContent, #spokesperson #mainContent, #examples #mainContent
{
	min-height: 600px;
	background: url(../images/BG_mainContentTop.png) no-repeat top;
	height: 100%;
}

#whyContent, #cool_pics, #confirmation, #get_started, #spokesperson, #examples
{
	background: url(../images/BG_why_mainContent.png) repeat-x 0px 20px;
}

#why_btn, #how_btn, #testimonials_btn, #pricing_btn, #seeRepairs_btn, #spokesperson_btn
{
	padding: 7px 28px;
	text-align: center;
	height: 46px;
	float: left;
	color: #001573;
	font-size: 18px;
}

#howContent h2, #cool_pics h2, #confirmation h2, #get_started h2, #spokesperson h2
{
	margin-left: 30px;
	margin-bottom: 40px;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

#contact_us #mainContent, #howContent #mainContent, #features #mainContent
{
	min-height:800px;
	background: #C9D1FE url(../images/BG_mainContentSecondary.png) no-repeat;
}



/* ^2 ------ global classes -------- */
.bold
{
	font-weight: bold;
}

.centered_bold
{
	text-align: center;
	font-weight:bold;
	font-size:20px;
}

.clearfloat
{
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.clearleft
{
	clear: left;
}

.closeQuote
{
	padding-bottom: 25px;
	padding-top: 10px;
	background: url(../images/closeQuote.png) no-repeat right bottom;
}

.fltLt
{
	float: left;
}

.fltRt
{
	float: right;
}

.warning
{
	color:#FF0000;
	margin-left: 20px;
	font: bold 16px Arial, Helvetica, sans-serif;
}




/* ^3 ------------- page specific styles ----------- */
/*^3a Home*/

/* middle content */
#gallery
{
	text-align: right;
	width: 604px;
	position: absolute;
	top: 50px;
	right: 20px;
}

#mainContent .subheader
{
	position: absolute;
	left: 27px;
	top: 75px;
	color: #CCCCCC;
	font-weight: normal;
	text-align: center;
	width: 300px;
}

.subheader p
{
	color: #FFFFFF;
	margin-top: 5px;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

#slogan
{
	position: absolute;
	left: 0px;
	top: 0px;
}


/* middle navigation */
#how_btn
{
	width: 100px;
}

#midNav
{
	background: url(../images/BG_midNav.png);
	height: 60px;
	position: absolute;
	width: 960px;
	left: 0px;
	bottom: 0px;
	text-align: center;
}

#midNav li
{
	text-transform: capitalize;
	display: inline;
	text-decoration: none;
	vertical-align: middle;
}

#midNav ul
{
	list-style: none;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width: 700px;
}

#midNav a:link, #midNav a:visited
{
	color: #99AAFD;
	text-decoration: none;
	display: block;
	padding: 0px;
	height: 60px;
	margin-top: 0px;
}

#midNav a:hover, #midNav a:active
{
	color: #FFFFFF;
	text-decoration: none;
}

#pricing_btn
{
	width: 100px;
	line-height: 23px;
}

#spokesperson_btn
{
	width: 140px;
}

#testimonials_btn
{
	width: 130px;
	line-height: 50px;
}

#viewPrices
{
	position: absolute;
	left: 20px;
	top: 220px;
	border-style: none;
}

#why_btn, #how_btn, #testimonials_btn, #pricing_btn, #seeRepairs_btn, #spokesperson_btn
{
	padding: 7px 28px;
	text-align: center;
	height: 46px;
	float: left;
	color: #001573;
	font-size: 18px;
}

#why_btn
{
	width: 165px;
}


/* lower content */
#lwrContent
{
	background: #FFFFFF url(../images/BG_lwrContent.png) no-repeat;
	border-bottom: 2px solid #494638;
}

#lwrContent h2
{
	color: #37352B;
	margin: 0px 0px 20px;
	padding: 0px;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

#lwrContent p
{
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
}

#lwrContentLt
{
	float: left;
	width: 270px;
	padding-top: 20px;
	margin-right: 55px;
	margin-left: 20px;
}

#lwrContentMid
{
	float: left;
	width: 270px;
	padding-top: 20px;
	margin-right: 50px;
}

#lwrContentRt
{
	float: left;
	width: 270px;
	padding-top: 20px;
}

#CARSlogo
{
	float: left;
	margin-right: 10px;
}

#spokesperson_img
{
	margin-top: -8px;
	float: left;
}

#facebook
{
	float: left;
	border-style: none;
	margin-right: 5px;
}



/*^3b How It Works*/
#phone
{
	width: 230px;
	position: absolute;
	left: 290px;
	top: 150px;
	text-align: center;
}

#phone img
{
	float: left;
	margin-bottom: 10px;
}

#mainContent #phone p
{
	margin: 10px 5px 35px 10px;
	font-size: 25px;
}

#mainContent #steps
{
	margin: 0px;
}

#steps ul
{
	margin-left: 30px;
	list-style: none;
}

#steps li
{
	margin-top: 0px;
	margin-bottom: 0px;
	color: #FFFFFF;
}

#step1, #step2, #step3, #step4, #step5
{
	width: 164px;
	text-align: center;
	padding: 25px 0px 0px;
	height: 30px;
	font-size: 15px;
}

#step1
{
	background: url(../images/btn_step1.png) no-repeat;
}

#step2
{
	background: url(../images/btn_step2.png) no-repeat;
}

#step3
{
	background: url(../images/btn_step3.png) no-repeat;
}

#step4
{
	background: url(../images/btn_step4.png) no-repeat;
}

#step5
{
	background: url(../images/btn_step5.png) no-repeat;
}

#step1 a, #step2 a, #step3 a, #step4 a, #step5 a
{
	cursor: pointer;
	color: #FFFFFF;
	padding: 40px 0px 10px;
	text-shadow: 1px 1px 1px #000;
	text-decoration: none;
	font-size: 15px;
}

#down_arrow
{
	margin-left: 40px;
}

.overlay
{
	display: none;
}

/*^3c Testimonials */
#testimonials #rtSidebarContent h3+p
{
	background:none;
}

#testimonials #mainContent
{
	text-align: left;
}

#testimonials ul
{
	list-style-type:none;
	line-height: 20px;
}

#testimonials li
{
	height: 150px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: 310px;
	padding-bottom: 30px;
}

#testimonials li p
{
	padding-top:40px;
	font-size: 15px;
}

#testimonies cite
{
	margin-top: 20px;
	display: block;
	font-size: 16px;
}

#testimonies img
{
	margin: 10px;
}

#testimonials #sidebar_list li
{
	margin: 10px 0px 0px 30px;
	padding: 0px;
	height: 20px;
	font-size: 14px;
	font-weight: bold;
}

/*^3d form.php (Pricing / Packages) */
#content #mainContent.stepPage
{
	background: url(../images/BG_mainContentSteps.png) no-repeat;
}


/*^3e Cool Pics */
#cool_pics #mainContent ul
{
	margin-left: 50px;
	font-size: 14px;
	list-style: georgian;
	margin-top: -25px;
	margin-bottom: 20px;
}

#pics
{
	text-align: center;
	padding-left: 50px;
}

/*^3f Contact Us */
#twitter_feed
{
	margin-left: 35px;
	margin-top:20px;
}

#contact_info
{
	width: 250px;
	margin-left: 40px;
	margin-top: 30px;
	position: relative;
	margin-bottom: 30px;
	float: left;
}

#contact_info .contact_methods
{
	font-size: 15px;
	font-weight: bold;
	background: #FFF4D2;
}

#contact_info_email, #contact_info_phone, #contact_info_address, #contact_info_fax
{
	display: block;
	margin-bottom: 30px;
	margin-left: 20px;
	font-size: 15px;
	margin-top: 5px;
}

#contact_us .warning, #contact_info .warning, #contact_us p .warning
{
	color:#FF0000;
	font-size: 15px;
	font-weight: bold;
}

#contact_us p .warning, #contact_us label .warning
{
	color:#FF0000;
	font-size: 20px;
	font-weight: bold;
}

#social_media_info
{
	width: 300px;
	margin-top: 30px;
	margin-left: 20px;
	position: relative;
	float: left;
}

#social_media_info .contact_methods
{
	font-size: 15px;
	font-weight: bold;
	background: #FFF4D2;
	text-align: left;
	display: block;
	padding: 0px;
	margin: 0px 0px 10px;
}

#skype
{
	margin-top: 30px;
	margin-bottom: 30px;
}

#contact_fb
{
	position: absolute;
	left: 0px;
	top: 30px;
}

#sendComment
{
	margin-left: 40px;
	width: 580px;
	float: left;
}

#commentForm_lt
{
	float: left;
	width: 275px;
	list-style: none;
	text-align: right;
	margin-right: 20px;
}

#commentForm_rt
{
	float: left;
	width: 250px;
	list-style: none;
	text-align: right;
	margin-bottom: 30px;
}

#commentForm_rt li, #commentForm_lt li
{
	margin-bottom: 5px;
}

#send
{
	background: url(../images/BG_premier.jpg) repeat-x;
	color: #CCCCCC;
	margin-top:1em;
	width:85px;
	height:30px;
}

#commentForm
{
	position: relative;
}

#contact a:link, #contact a:visited
{
	width: 115px;
}

#phone #email_btn
{
	margin-left: 55px;
}


/*^3g Website Spokesperson */
#spokespersonContainer
{
	float: right;
	width: 520px;
	text-align: right;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
}

#spokesperson_lt
{
	float: left;
	width: 400px;
}

#spokesperson_lt h2
{
	margin-left: 20px;
}

#spokesperson_lt p
{
	text-align: center;
	margin-top: 100px;
	font-size: 15px;
}

#phone
{
	width: 230px;
	position: absolute;
	left: 290px;
	top: 150px;
	text-align: center;
}

#phone img
{
	float: left;
	margin-bottom: 10px;
}

#spokesperson #phone
{
	left: 80px;
	top: 350px;
}

#mainContent #phone p
{
	margin: 10px 5px 35px 10px;
	font-size: 25px;
}


/* ^4 --------------------- top-level region layout styles ------------------- */
/* top-level regions are header, upperNav, mainContent, rtSidebar, footer, lwrNav */

/* header */
#header
{
	padding: 0;
	margin: 0px;
	background: url(../images/BG_header2.png) no-repeat;
	height: 120px;
	width: 960px;
}

#header h1
{
	margin: 0;
	padding: 0;
}

#header #slogan
{
	position: absolute;
	top: 80px;
	right: 0px;
}

/* upperNav */
#upperNav
{
	background: url(none) no-repeat right;
	height: 120px;
	width: 600px;
	position: absolute;
	top: 0px;
	right: 0px;
}

#upperNav a
{
	text-decoration: none;
	color: #4b4b4b;
}

#upperNav ul
{
	text-transform: capitalize;
	color: #4B4B4B;
	font-size:16px;
}

#upperNav li
{
	display: inline;
	font-size:16px;
	list-style: none;
	z-index: 3000;
}

#upperNav #home, #upperNav #about, #upperNav #blog, #upperNav #pics_menu, #upperNav #contact, #upperNav #login, #upperNav #prices
{
	position: absolute;
	top: 37px;
}

#upperNav #home
{
	left: 10px;
	width: 76px;
}

#upperNav #about, #upperNav #prices
{
	left: 86px;
	width:98px;
}

#upperNav #blog
{
	left: 184px;
	width:65px;
}

#upperNav #pics_menu
{
	left: 244px;
	width:97px;
}

#upperNav #contact
{
	left: 345px;
	width:115px;
}

#upperNav #login
{
	left: 461px;
	width:99px;
	z-index: 1000;
}

#home a:link, #home a:visited, #about a:link, #about a:visited, #blog a:link, #blog a:visited, #pics_menu a:link, #pics_menu a:visited, #contact a:link, #contact a:visited, #login a:link, #login a:visited, #prices a:link, #prices a:visited
{
	display: block;
	padding: 14px 0px 0px;
	height: 34px;
	text-align: center;
}

#home a:link, #home a:visited
{
	width: 75px;
}

#home a:hover, #home a:active, #about a:hover, #about a:active, #blog a:hover, #blog a:active, #pics_menu a:hover, #pics_menu a:active, #contact a:hover, #contact a:active, #login a:hover, #login a:active, #prices a:hover, #prices a:active
{
	color: #FFFFFF;
	text-decoration: underline;
}

#home #here, #about #here, #blog #here, #pics_menu #here, #contact #here, #prices #here
{
	color: #999999;
}

#contact a:link, #contact a:visited
{
	width: 115px;
}

#pics_menu a:link, #pics_menu a:visited
{
	width: 104px;
}


/* mainContent */
#mainContent
{
	background: url(../images/BG_mainContent04.png) no-repeat;
	position: relative;
	margin-top: 10px;
	width: 960px;
	padding-top: 1px;
	height: 379px;
}


/*  rtSidebar*/
#rtSidebar
{
	float: right;
	width: 322px;
	min-height: 500px;
	margin-right: 0px;
}

#rtSidebarContent
{
	min-height: 500px;
	margin-bottom: -10px;
	padding-bottom: 20px;
}

#rtSidebarContent p
{
	margin: 5px 20px 5px 50px;
}

#rtSidebarContent hr
{
	color: #322E21;
	margin: 30px 30px 10px 40px;
	padding-top: 2px;
}

#rtSidebar h2
{
	font-size: 15px;
	margin-right: -10px;
	padding-top: 20px;
	padding-left: 20px;
	color: #28241A;
}

#rtSidebar h3
{
	font-size: 15px;
	padding-left: 20px;
	color: #28241A;
	background: #E1DDD0;
	margin-top: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#rtSidebarContent h2+p, #rtSidebarContent h3+p
{
	background: url(../images/openQuote.png) no-repeat 0px top;
	margin: 0px 10px;
	padding: 20px 0px 0px 40px;
}


/* footer */
#footer hr
{
	padding-top: 2px;
	color: #001573;
	margin: 10px;
}

#footer
{
	padding: 1px 0px 0;
	font-size: 11px;
	text-align: center;
	color: #3C3A31;
	border-top: 2px solid #494638;
}

#footer p
{
	margin: 0;
	padding: 10px 0;
}


/* lwrNav */
#lwrNav ul
{
	list-style: none;
}

#lwrNav li
{
	display: inline;
}

#lwrNav
{
	text-align: center;
	line-height: 30px;
	width: 960px;
	margin: 0px;
}

#lwrNav a:link, #lwrNav a:visited
{
	font-size: 14px;
	color: #171820;
	text-decoration: none;
	padding-right: 5px;
	padding-left: 5px;
}

#lwrNav a:hover, #lwrNav a:active
{
	font-size: 14px;
	color: #515471;
	text-decoration: underline;
	padding-right: 5px;
	padding-left: 5px;
}

#MainLogo {
	margin-top: 5px;
	margin-left: 95px;
}

