/*
---------------------------------------------------------------------------------

	UI TUNEUP
	--------------------
	global screen styles

	created: june '08
	updated: feb '09
	
	design and code by:
	matthew brown / www.thingsthatarebrown.com

---------------------------------------------------------------------------------
*/


/* //-- core page styles -- */

body { border-top: 1px solid #888 }
a:hover { text-decoration: none; }

#sxsw { position: absolute; top: 0; right: 0; z-index: 99; }

#wrapper { font-family: "Helvetica Neue", "Helvetica", arial; font-size: 16px; line-height: 22px }

#header { border-top: solid #333 3px; border-bottom: 1px solid #ccc; padding: 0.7em 0; margin: 50px auto 20px auto; position: relative; }
#header h1, #header h2 { line-height: 0 }
#contact-top h2 { position: absolute; right: 10px; top: 37px; font-size: 22px; color: #666; margin: 0; padding: 0; letter-spacing: 0; font-weight: 300; }
#contact-top h2 span { margin: 0 7px; }
#logo a { display: block; height: 45px; width: 170px; background: url('../img/logo.gif') no-repeat; text-indent: -9999px; }
#logo a:hover { background-position: bottom; }

#intro { padding-right: 80px; position: relative; border-bottom: 1px solid #ccc; margin: 20px 0 35px 0; }
#intro img#worker { position: absolute; right: 25px; bottom: 0; }
#intro a#get-started { position:absolute; right: 245px; bottom: 55px; display: block; width: 200px; height: 53px; background: url('../img/get-started.png') no-repeat; text-indent: -9999px; }
#intro a#get-started:hover { background-position: bottom; }


#intro p { font-size: 16px; line-height: 22px; }
#intro h1.lead { font-size: 48px; line-height: 48px; font-weight: normal; letter-spacing: -2px; margin: 0 0 0.35em 0; color: #444; }
#intro h1.lead span { padding: 0 0 0 5px; font-size: 46px; font-weight: normal;color: #111; }
#intro p.extended { padding: 0 395px 15px 0; }
#intro p.extended strong { font-weight: bold; }
#intro strong { font-weight: normal; }

#why { margin: 0 0 20px 0; }
#why h2 { font-size: 36px; margin: 0 0 15px 0; }
#why p { padding-right: 20px; font-size: 16px; line-height: 22px; }
 
#how-it-works { padding-bottom: 10px; margin-bottom: 50px; border-bottom: 1px dotted #ccc; }
#how-it-works h2 { color: #444; border-bottom: 1px dotted #ccc; padding: 0 0 10px 0; margin: 0 0 20px 0; font-weight: 300; }

#how-it-works span { height: 160px; display: block; position: relative; }
#how-it-works p span { height: auto; display: inline; float: left; font-size: 28px; height: 60px; width: 35px; padding: 4px 0 0 0; }
#how-it-works img { position: absolute; bottom: 0; margin: 0 0 0 25px; }
#how-it-works p { margin-top: 20px; }


#footer { padding: 0.75em 0 5em 0; margin-top: 3em; border-top: 1px dotted #ccc; }
#footer p { font-size: 11px; color: #666 }

#reasons { margin: 0 0 1em 0 }
#reasons p { font-size: 16px; line-height: 22px; }
#reasons h2 { font-size: 36px; color: #444; margin: 0 0 8px 0; padding: 0; letter-spacing: -0.5px; font-weight: 300; }

#pitch .first p { padding-right: 3em; }

#how-what p.lead { font-size: 16px; line-height: 22px; padding-right: 3em }
#what {  }

body { color: #444 }
h1 { font-size: 38px; letter-spacing: -2.5px; color: #222; font-weight: bold; margin: 4px 0; padding: 0; }
h2 { font-size: 26px; color: #e94e43; margin: 0 0 8px 0; padding: 0; letter-spacing: -1px; }
h3 { font-size: 16px; color: #222; font-weight: bold; margin: 0 0 6px 0; }
a { color: #e94e43 }
p { margin: 0 0 1.25em 0; font-size: 14px; line-height: 18px; }
ul { margin-top: 0 }

strong { color: #222; font-weight: bold }
#reasons strong { color: #111; font-weight: normal; background: #faf5e1; }


#wufoo { padding: 1em; background: #efefef; margin-top: 40px; }
#wanna-talk p { background: #f9f5ec; padding: 2em }


#perfect-for { margin: -1em 0 0 0; position: relative; }
#perfect-for h2 { margin: 0 0 0.5em 0; }
#perfect-for li { margin:0 0 0 0; padding: 3px 1px; list-style: none; margin-left: 0; border-bottom: 1px solid #ccc; }
#perfect-for li.last { border: none; }

#gobutton { text-indent: -9999px; float: right; }
#gobutton a { height: 200px; width: 460px; display: block; background: url('../img/gobutton.png') no-repeat; }
#gobutton a:hover { background-position: bottom; }

#options .option { background: #fcfbe8; padding: 15px; border: 1px solid #e1dfc4; margin-bottom: 30px; display: block; }
#options .option h3 { font-weight: normal; font-size: 30px; letter-spacing: -1px; }
#options .option h3 a { color: #444; text-decoration: none; }
#options .option h3 a:hover { text-decoration: underline; }
#options .option h3 strong { font-size: 20px; font-weight: normal; background: #6ca04a; color: white; padding: 0 8px; margin-left: 4px; }
#options .option p { margin: 0; padding: 0; line-height: 20px;  }


#questions  { margin-bottom: 2em;  }
#questions h3 { margin-bottom: 2px; }
#questions p { margin-right: 20px; }

#ft-logo a { display: block; height: 25px; width: 100px; background: url('../img/footer-logo.png') no-repeat; text-indent: -9999px; }
#ft-logo a:hover { background-position: bottom }

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 2px solid #126e73;
	background-color: #acdadd;
	padding: 20px;
	opacity: 0.85;
	left: 20px;
	width: 170px;
}
#tooltip h3, #tooltip div { margin: 0; }
#tooltip h3 { font-size: 22px; line-height: 22px; font-weight: 300; margin-bottom: 4px; }
#tooltip { font-size: 14px; line-height: 14px; font-weight: 300; }