* { margin: 0; padding: 0 }

body { background: #fff; border-top: 2px solid #035; color: #777; font: 14px/1.5 "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif }

/* error message */
.redmsg {
	color: red;	
}
.greenmsg {
	color: green;	
}

a, a:link { color: #0bf; text-decoration: none; -webkit-transition: all .4s ease; -moz-transition: all .4s ease }
a:visited {}
a:hover {}
a:active {}

p { margin: 0 0 15px 0 }
#copy p strong { color: #333 }

.grid { margin: 0 auto; width: 940px }

label, .input-text { float: left }
label { font: 14px/1.5 "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; text-align: right; padding: 2px 10px 2px 0; width: 100px }
.input-text, textarea { border: 0; border-top: 1px solid #479; font: 14px/1.5 "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 2px 4px; width: 200px }
textarea { width: 280px }

#head { background: url(../gfx/head-bg.png) 620px 140px no-repeat; border-top: 1px solid #aef; height: 150px; margin: 20px 0 0 0; padding: 30px 0 0 0 }
	#head img { float: right }
	#menu { color: #ccc; float: left; font-size: 18px; width: 700px }
		#menu a, #menu a:visited { color: #888; padding: 0 12px 40px 12px; outline: none; text-decoration: none }
		#menu a:hover { color: #5a2 }
			#menu a#active { color: #5a2 }
		#menu li { display: inline; font-weight: bold }
		#login-link { background: url(../gfx/key.png) 0 50% no-repeat; display: inline; margin: 0 0 0 120px; padding: 0 0 0 10px }
			#login-link a:hover { color: #f60 }
		
		#home-link a:hover { background: url(../gfx/home-li.png) 50% 30px no-repeat }
		#about-link a:hover { background: url(../gfx/about-li.png) 50% 30px no-repeat }
		#how-link a:hover { background: url(../gfx/how-li.png) 50% 30px no-repeat }
		#contact-link a:hover { background: url(../gfx/contact-li.png) 50% 30px no-repeat }
		#phone-link a:hover { background: url(../gfx/phone-li.png) 50% 30px no-repeat }

#heading { background: #01b5f0 url(../gfx/heading-bg.png) repeat-x; clear: both; height: 132px; line-height: 130px }
	h1 { color: #fff; font-size: 36px; height: 132px; margin: 0 auto; width: 940px }
	h2 { color: #233; font-size: 24px }

#q-and-a { color: #fff; margin-top: -100px !important; padding: 10px 0 30px 0; text-align: center }
#q-and-a:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
	.q-and-a { float: left; padding: 90px 30px 45px 30px; width: 240px; -khtml-border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -khtml-border-bottom-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-right-radius: 3px; -webkit-border-top-right-radius: 3px }
		.middle { display: inline; margin: 0 20px }
		dd { color: #9ff }
		#people { background-image: url(../gfx/people.png); background-repeat: no-repeat }
		#where { background-image: url(../gfx/where.png); background-repeat: no-repeat }
		#whose { background-image: url(../gfx/whose.png); background-repeat: no-repeat }

#how-it-works { font-size: 18px; font-weight: bold; padding: 30px 0 80px 0; margin: 20px auto;  width: 280px }
	#how-it-works a { background: transparent url(../gfx/how.png) 0 50% no-repeat; height: 60px; line-height: 0px; outline: none; padding: 30px 0 30px 80px }
	#how-it-works a:hover { color: #5a2 }
	
#content { padding: 50px 0; margin: 0 auto; width: 940px }
	#content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
	
/* home */
#home-page #head { background: none }
#intro { background: url(../gfx/home-intro-bg.jpg) 50% 133px repeat-x; color: #fff; font-size: 22px; margin: -140px 0 0 0; padding: 80px 0 0 0 }
#intro:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
#intro .grid { background: url(../gfx/home-intro2.png) 30px 0 no-repeat; height: 620px }
	#intro p { float: left; margin: 120px 0 0 460px; width: 430px }
		#intro p strong { font-weight: normal }
			a#learn-more, #submit-button { background: url(../gfx/button.png) no-repeat; border: 0; color: #fff; display: block; font-size: 18px; font-weight: bold; height: 49px; line-height: 47px; margin: 20px 0 0 0; padding: 0 0 0 46px; width: 199px }
			a#learn-more:hover, #submit-button:hover { color: #233; cursor: pointer; -webkit-transition: all .4s ease; -moz-transition: all .4s ease }
#wrap { background:  url(../gfx/glow.png) 300px 60px no-repeat; height: 650px }


/* digicel */
#digicel-page #copy { background: url(../gfx/Digicel-App-Phone.png) 25px 0 no-repeat; height: 480px; margin: -150px 0 0 0; padding: 140px 140px 0 380px }
#digicel-page h1 { background: url(../gfx/about-heading.jpg) top center no-repeat; text-indent: -99999px }
#digicel-page h2 { color: #01b5f0; font-size: 36px; margin: 0 0 15px 0 }

/* contact */
#contact-page h1 { background: url(../gfx/contact-heading-bg.jpg) top center no-repeat }
#contact-page #content #copy { float: left; width: 320px }
#contact-page form, #login-page form { background: #1ebdf2; color: #fff; display: inline; float: right; padding: 30px; margin: 0 50px 0 0; width: 430px; -khtml-border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -khtml-border-bottom-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-right-radius: 3px; -webkit-border-top-right-radius: 3px }
	#contact-page form div, #login-page form div { border-bottom: 1px solid #069; margin: 0 0 20px 0; padding: 0 0 20px 0; width: 100% }
	#contact-page form div:after, #login-page form div:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
	#learn-more { background: url(../gfx/button.png) no-repeat; color: #fff; display: block; font-size: 18px; font-weight: bold; height: 49px; line-height: 47px; margin: 20px 0 0 0; padding: 0 0 0 46px; width: 199px }
	a#learn-more:hover { color: #233 }
	#submit-button { margin: 0 0 0 110px; padding: 0 }



/* about */
#about-page #copy { background: url(../gfx/iphone.png) 25px 0 no-repeat; height: 480px; margin: -150px 0 0 0; padding: 140px 140px 0 380px }
#about-page h1 { background: url(../gfx/about-heading-bg.jpg) top center no-repeat; text-indent: -99999px }
#about-page h2 { color: #01b5f0; font-size: 36px; margin: 0 0 15px 0 }

/* more */
#learn-more-page h1 { background: url(../gfx/more-heading-bg.jpg) top center no-repeat }
#learn-more-page #copy { background: url(../gfx/more-copy-bg.png) 610px 0 no-repeat; margin-top: -50px; padding: 50px 500px 0 0 }
#learn-more-page #how-it-works { margin: 0 auto }

/* how */
#how-page h1 { background: url(../gfx/how-heading-bg.jpg) top center no-repeat }
#how-page #copy { background: url(../gfx/how-phone.jpg) 25px 0 no-repeat; padding: 0 0 0 450px }
#how-page ol { background: url(../gfx/123.jpg) no-repeat; padding: 30px 0; margin: -20px 0 0 0; width: 400px }
#how-page ol li { list-style: none; margin: 0 0 20px 0; padding: 24px 20px 0 90px }
#how-page h2 { padding: 23px 0 0 90px }

/* login page*/
#login-page h1 { background: url(../gfx/login-heading-bg.jpg) top center no-repeat }
#login-page form { float: left }
#login-page #copy:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
#login-page #copy { background: url(../gfx/login-copy-bg.png) 610px 0 no-repeat; margin-top: -50px; padding: 50px 500px 0 0; width: 440px }

#footer { border-top: 1px solid #aef; clear: both; font-size: 11px; text-transform: uppercase }
	#footer p { color: #aaa; margin: 0 auto; padding: 30px 0 200px 0; width: 940px }
	#footer a { color: #aaa }
	#footer a:hover { color: #666 }