/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	DEFAULTS
- - - - - - - - - - - - - - - - - - - - - - - - - - */


* {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: none;
}

html {
	overflow: -moz-scrollbars-vertical;
}

body {
	/* background-color: #f0f0ec;	 */
	background-color: #E8E8E1;
	width: 100%;
	font: 11px Arial, Helvetica, Tahoma, sans-serif;	
}

body a {
	outline:0;
}

img {
	border: 0px;
	text-decoration: none;
	margin-bottom: -5px;
}
#main a.img_link:hover, #top_nav a.img_link:hover {
	background: transparent;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	top navigation
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#top_envelope {
	background: #3F464E;
}


#logo {
	padding-top: 7px;
}

#top_nav {
	width: 920px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height: 78px;
	font: 13px 'Lucida Grande', Verdana, Arial, Tahoma, sans-serif;
	color: white;
	padding: 20px;
}
#top_nav ul {
	padding-top: 30px;
	list-style-type: none;
	margin-right: 0px;
	*padding-bottom: 10px;
}
#top_nav ul li {
	display: inline;
	padding-left: 15px;
}
#top_nav a {
	color: white;
	text-decoration: none;
	padding: 10px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;	
}
#top_nav a:visited {
	color: white;
}
#top_nav a:hover, #top_nav a.current, #top_nav a.current:visited {
	color: #17b8f4;
	background: #3e515f	;
}
#top_nav a.current, #top_nav a.current:visited {
	color: #17b8f4;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	main content area - general elements
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#main {
	width: 900px;
	background: white;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;	
	text-align: left;	
	padding: 40px;
	padding-bottom: 20px;
}

div.left_col {
	float: left;
	width: 585px;
}
div.right_col {
	float: right;
	width: 240px;
	padding: 20px;	
}
div.gray {
	background: #eee;
}
div.wide {
	width: 860px;
	clear: both;
	background: gray;
	padding: 20px;
}
div.margin_bottom {
	margin-bottom: 30px;
}
div.margin_top {
	margin-top: 40px;
}

.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
	height: 0px;
}

img.border {
	border: solid 1px #ccc;
}

#bottom_space {
	width: 100%;
	margin-left: auto;
	margin-right: auto;	
	display: block;
	height: 100px;
}

.hilite {
	background: #ff9;
}

.center {
    text-align:center;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	text and link formatting
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#main h1 {
	font: bold 17px Arial, Helvetica, Tahoma, sans-serif;
	margin-bottom: 20px;
}

#main h2 {
	font: bold 14px Arial, Helvetica, Tahoma, sans-serif;
	margin-bottom: 20px;
}

#main p {
	font: 13px/20px 'Lucida Grande', Verdana, Arial, Tahoma, sans-serif;
	margin-bottom: 20px;
}

#main a {
	color: #36A2D6;
	text-decoration: underline;
}
#main a.no_line {
	text-decoration: none;
}
#main a:visited {
	color: #36A2D6;
}
#main a:hover {
	color: white;
	background: #36A2D6;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	homepage screenshots
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#screenshots {
 *margin-left: 0px;
}

#screenshots div {
	font: bold 13px 'Lucida Grande', Verdana, Arial, Tahoma, sans-serif;
	float: left;
	width: 280px;
	margin-left: 30px;
	min-height: 445px;
	margin-bottom: 20px;
	*width: 280px;
	*height: 455px;
}
#screenshots div.ie_hack, #testimonials div.ie_hack {
	*margin-left: 0px;
}

#screenshots.blue div.box {
	background: #EBF4FC;
	border-bottom: solid 1px #C7E4F4;
}
#screenshots div:first-child  { 
	margin-left: 0px;
}
#screenshots h1 {
	padding: 15px;	
	font: bold 14px Arial, Helvetica, Tahoma, sans-serif;
	padding-bottom: 0px;
}
#screenshots h1 a {
	color: #3F464E;
}
#screenshots a {
	text-decoration: none;
}
#screenshots h1 a:hover {
	color: white;
}
#screenshots p {
	margin: 15px;
	font: 11px/17px 'Lucida Grande', Verdana, Arial, Tahoma, sans-serif;
	overflow: hidden;
}
#screenshots p.learn_more {
	font: bold 14px Arial, Helvetica, Tahoma, sans-serif;
}
#screenshots span.arrow {
	font-size: 15px;
	line-height: 11px;
}
#screenshots img {
	margin: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
	border: solid 1px #ddd;
}

#zoom_content > img {
	border: solid 1px #eee;
}
#zoom_content img:hover {
	cursor: pointer;
	*cursor: hand;
}
#zoom_content p {
	margin: 0px;
	padding: 20px;
	padding-bottom: 5px;
	padding-left: 10px;
	font: 13px/18px 'Lucida Grande', Verdana, sans-serif;
	max-width: 575px;
}

#zoom table {
	*background: #ccc;
}

#zoom a {
	color: #36A2D6;
}
#zoom a:hover {
	color: white;
	background: #36A2D6;
}
a#zoom_close:hover {
	background: transparent;
	color: transparent;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	testimonials
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#testimonials {
	margin: 0px;
	margin-top: 10px;
	padding: 0px;
	font: bold 13px 'Lucida Grande', Verdana, Arial, Tahoma, sans-serif;
	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
	background: #fcfcfc url('testimonial_bg.png') no-repeat;
	margin-bottom: 15px;	
	*height: 400px;
}
#testimonials div {
	margin: 0px;
	padding: 20px;
	padding-bottom: 0px;
	float: left;
	width: 240px;
	margin-left: 30px;
	margin-bottom: 10px;
	*margin-left: 20px;
}
#testimonials h1 {
	padding: 20px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
#testimonials p {
	font-size: 12px;
	line-height: 17px;
}

#testimonials div p:first-child  { 
	min-height: 160px;
}	

#testimonials p span.testimonial_name {
	font-size: 11px;
	color: #999;
}
#testimonials div.left  { 
	margin-left: 0px;
}
#testimonials em  { 
	font: italic 11px Verdana, Arial, Tahoma, sans-serif;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	sign in and other forms
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#sign_in {
	background: #eee url('logo_background.png') no-repeat 28px -30px;	
}
#sign_in a {

}
#sign_in a.forgot {
	font-size: 11px;
}
#sign_in h1 {
	font: bold 14px Arial, Helvetica, Tahoma, sans-serif;
	padding-bottom: 0px;
}
span.light {
	color: #aaa;
}
p#forgot {
	margin-top: 6px;
	margin-bottom: 0px;
}

button {
	color: black;
	font: bold 12px/18px Verdana, Arial, Tahoma, sans-serif;
	border: solid 1px #D2D2D2;
	border-right: solid 2px #8A8A8A;
	border-bottom: solid 2px #8A8A8A;	
	-moz-border-radius: 4px;
	border-radius: 4px;	
	background-color: #F7F7F7;
	width: auto;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-border-radius: 6px;	
	padding: 5px;
}
button:hover {
	color: #36A2D6;
}

form p {
	font: 12px/18px 'Lucida Grande', Verdana, Arial, Tahoma, sans-serif;
	margin-bottom: 20px;
}

form label {
	font: 12px/18px 'Lucida Grande', Verdana, Tahoma, Arial, sans-serif;	
	padding-top: 2px;
}
form input, form textarea, form select {
	font: 12px/18px Arial, Helvetica, Tahoma, sans-serif;	
	margin-bottom: 12px;
	padding: 2px 2px 2px 2px;
	*padding: 2px 2px 6px 2px;
	padding /*\**/: 2px 2px 6px 2px\9;
	width: 160px;
	background: #fcfcfc;
}

form input:focus, form textarea:focus, form select:focus {
	background: #ffd;
}
form select {
	width: auto;
}
form textarea {
	width: 400px;
	height: 200px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	Features
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#features div {
	width: 430px;
	margin-right: 20px;
	margin-bottom: 20px;
}
#features div.right {
	margin-right: 0px;
}
#features ul {
	list-style-type: none;
	font: 13px 'Lucida Grande', Verdana, Arial, Tahoma, sans-serif;	
}
#features li {
	margin-bottom: 5px;
}
#features hr {
	padding-top: 10px;
	margin-bottom: 20px;
}
#features div.callout {
	margin-top: 28px;
	margin-left: 0px;
	padding-left: 0px;
}
#features div.sample_invoices {
	background: #f6f6f6;
	margin-top: 20px;
	padding: 15px;
	color: #999;
	width: 390px;
}
#features div.callout a {
	background: transparent;
}
#features p.acrobat_note {
	font-size: 11px;
	line-height: 17px;
	margin-bottom: 0px;
	margin-top: -10px;	
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	FAQs
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#faqs p.question {
	font-weight: bold;
	margin-bottom: 5px;
}
#faqs p.answer {
	margin-bottom: 20px;	
	color: #666;
	font-size: 12px;
}

#faqs_security, #contact_sidebar {
	background: #EBF4FC;
	padding: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 280px;
}
#faqs_security h2, #faqs_security p, #faqs_security ul, #contact_sidebar h2, #contact_sidebar p,  #contact_sidebar ul {
	margin-bottom: 15px;
	margin-left: 20px;
	margin-right: 20px;
}
#faqs_security h2 {
	font-size: 15px;
}
#faqs_security p, #contact_sidebar p {
	font: 11px/15px 'Lucida Grande', Verdana, Arial, Tahoma, sans-serif;
}
#faqs_security ul {
	font: 11px/15px Verdana, Arial, Tahoma, sans-serif;
	margin-left: 40px;
}
#faqs_security li {

}
hr, #faqs_security hr.divider {
	display: block;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 15px;
	border: 0px;
	height: 1px;
	border-top: dashed 1px #ccc;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	sign_up + pricing, contact, forgot password forms
- - - - - - - - - - - - - - - - - - - - - - - - - - */

fieldset {
	/* not used, kept for reference */
	padding: 20px;
	border: solid 1px #ccc;
}

#sign_up p, #contactus p {
	margin-bottom: 20px;
}
#sign_up label, #sign_up input, #contactus label, #contactus input, #forgot label, #forgot input {
	margin-bottom: 10px;
	float: left;
	width: 200px;
	margin-top: 5px;
}
#sign_up input, #contactus input, #forgot input {
	width: 225px;
}
#sign_up input.checkbox, #contactus input.checkbox, #forgot input.checkbox {
	width: auto;
	margin-right: 10px;
	margin-top: 4px;
	*margin-top: 0px;
}
#sign_up p.terms {
	margin-top: 15px;
	margin-bottom: 25px;
}
#sign_up br, #contactus br, #forgot br {
	clear: left;
}
#contactus textarea, #forgot textarea {
	margin-bottom: 20px;
	width: 425px;
}

#pricing {
	background: #EBF4FC;
}
#pricing p {
}
#pricing p.include {
	margin-left: 8px;
	margin-bottom: 10px;
	font-weight: bold;
}
#pricing p.price {
	padding: 8px;
	margin-top: 10px;
	margin-bottom: 0px;
	font-weight: bold;
	background: #ffc;
}
#pricing table {
	border-collapse: collapse;
}
#pricing tr {
	/* border-top: solid 1px #ccc; */
	border-top: solid 1px #C7E4F4;
}
#pricing tr:first-child {
	/* border-top: solid 1px #ccc; */
	border-top: 0px;
}
#pricing td {
	padding: 8px;
	padding-right: 10px;
}	
#pricing td img {
	margin-bottom: -1px;
}	
#pricing td:first-child {
	/* left column of table */
	width: 90%;
}
#pricing td:last-child {
	/* right column of table */
	width: 10%;
	color: #888;
	letter-spacing: 1px;
}
/* nth-child() CSS selector works great; unfortunately not supported by IEx or FF2!

#pricing tr:nth-child(odd) {
	background: #E4ECF4;
}
#pricing tr:nth-child(even) {
	background: #DDE6ED;
}
*/

#forgot div.radio {
	margin-bottom: 45px;
	margin-top: 15px;
}
#forgot div.radio input {
	float: left;
	width: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-top: 4px;
	*margin-top: 0px;
}

#forgot div.radio label {
	float: left;
	width: auto;	
	margin-left: 4px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-top: 0px;
}
#forgot div.radio input {
	float: left;
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	footer
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#footer {
	background: #f3f3f3;
	width: 900px;
	margin-left: auto;
	margin-right: auto;	
	text-align: left;	
	padding: 40px;
	padding-top: 26px;
	border-top: dashed 1px #ddd;
	border-bottom: solid 1px #d6d6d6;	
	color: #aaa;
	*padding-bottom: 25px;
}
#footer p {
	font: 11px Tahoma, Arial, sans-serif;
}
#footer p.science a {
	color: #aaa;
	padding: 5px;
	padding-left: 7px;
	text-decoration: none;
}
#footer p.science a:hover {
	text-decoration: none;
	-moz-border-radius: 6px;
	border-radius: 5px;
	background: #ffa;
	color: black;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - 
	special cases
- - - - - - - - - - - - - - - - - - - - - - - - - - */

#preload {
	display: none;
	visibility: hidden;
}

span.smaller, p.smaller {
	font-size: 9px;
}

span.faded, p.faded {
	color: #aaa;
}

.note {
	background: #ffc;
	color: black;
}

.padded {
	/* for more spacious notes */
	padding: 15px;	
}

.error {
	color: #d00;
}