@import url(reset.css);

/* = Typography */
body {
	color: #333;
	font:14px/160% "Helvetica Neue", Helvetica, arial, clean,sans-serif;
}

#wrap{
	font-size: 1em;	
}
select, input, textarea {
	font: 99% "Helvetica Neue", Helvetica, arial, clean,sans-serif;
}
strong{
	font-weight: bold;
}
em{
	font-style: italic;
}
a{
	color: #6578bd;
	font-weight: bold;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
p, ul, ol{
	margin-bottom: 1em;
	margin-left: 12px;
}
#content li, .banner li{
	margin-left: 1em;
	margin-bottom: 1em;
	list-style-type: disc;
}
.banner ul li{
	/*background: url(../images/gtdi-star.png) 0 .2em no-repeat;*/
/* 	padding-left: 26px; */
	list-style-type: disc;
/* 	margin-left: 0; */
	margin-left: 1em;
}
.banner li li{
	background: none;
	padding: 0;
	list-style-type: square;
	margin-left: 1em;
}
#content ol li, .banner ol li{
	list-style-type: decimal;
}
#content li h3, #content li h4, #content li h5, #content li h6, #content li p,
.banner li h3, .banner li h4, .banner li h5, .banner li h6, .banner li p{
	margin-left: 0;
}
#content li h4, .banner li h4{
	margin-bottom: 0;
}
h2, h3, h4, h5, h6{
	font-weight: bold;
	line-height: 1.6em;
	margin-bottom: 1em;
	margin-left: 12px;
}
h2{
	font-size: 2.2em;
	font-weight: bold;
	line-height: 1.4em;
	margin-bottom: .3em;
}
h3{
	border-top: 1px solid #c3d9ff;
	font-size: 1.5em;
	padding-top: .5em;
}

body.home h3, body .col2 h3{
	border: 0;
	padding-top: 0;
}
h4
{
	clear:both;
	font-size: 1em;
}
h5{
	font-size: 1em;
	font-style: italic;
}
h6{
	font-style: italic;
	font-weight: normal;
	margin-bottom: 0;
}
#install p{
	font-weight: .8em;
	margin-bottom: 0;
}
hr{
	background: url(../images/hr.png) bottom left no-repeat;
	border: none;
	width: 100%;
	clear: both;
	height: 10px;
}

.col1 blockquote{
	background: #efefef;
	border: 1px solid #ccc;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding: 10px;
	color: #617C91;
	font-size: 14px;
	font-style: italic;
	position: relative;
	padding: 10px 40px;
	margin: 20px;
}
.col1 blockquote span.quot{
	display: block;
	position: absolute;
	font-weight: bold;
	font-size: 100px;
	font-style: normal;
	z-index: 500;
}
.col1 blockquote span.quot.open{
	top: .1em;
	left: -20px;
}
.col1 blockquote span.quot.close{
	bottom: -.3em;
	right: -20px;
}
p.cite{
	margin-top: 10px;
	font-size: 11px;
}

.col2 blockquote{
	color: #617c91;
	font-style: italic;
}

em{
	background: #b8d551;
	padding: 0 5px;
}


/* = Forms */

form div.row{
	border-top: 1px solid #ccc;
	margin: 0 auto;
	margin: 0 150px;
	padding: 10px;
	float: left;
	width: 450px;
}
div.row label{
	display: block;
	width: 250px;
	float: left;
	text-align: right;
	padding-right: 30px;
}

/* = Layout */
body{
	background: #333;
	text-align: center;
}
#wrap{
	background: #fff;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 780px;
	padding: 20px;
    padding-top: 0px;
	border-left: 10px solid #555;
	border-right: 10px solid #555;
	border-bottom: 10px solid #555;
}
#header{
	height: 125px;
	width: 780px;
	position: relative;
}
#header h1{
	background: url(../images/logo-preview.png) 0 20px  no-repeat;
	height: 125px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
	width: 435px;
}
#header h1 a{
	display: block;
	height: 125px;
}
#accolades{
	float: right;
	margin-top: 24px;
	text-align: right;
	width: 272px;	
}
#accolades p{
	font-weight: bold;
	margin: 0;
}

#firefoxgmail{
	float: right;
	margin-right: 30px;
	margin-top: 50px;
}

#testimonial{	
	background: url(../images/testimonial_t.png) top left no-repeat;
	float: right;
	margin-top: 10px;
	width: 250px;
}
#testimonial div{
	background: url(../images/testimonial_b.png) bottom left no-repeat;
 	padding-top: 34px; 
	padding-bottom: 34px;
	margin-top: -20px;
	width: 250px;
}
#testimonial p{
	font-size: 12px;
	line-height: 1.5em;
	margin: 0px 20px; 
	text-align: right;
}
#testimonial a{
	font-weight: normal;
	color: #333;
}
#testimonial .quotee{
	color: #999;
}

/* Nav */
#nav{

	background: url(../images/header-bottom.png) top no-repeat;
	clear: both;
	float: left;
	margin-bottom: 1em;
	padding-top: 10px;
	width: 100%;
}
body.home #nav{
	margin-bottom: 0;
}
#nav ul{
	float: left;
	margin: 0;
	min-height: 40px;
	width: 100%;
}
#nav li{
	background: url(../images/nav-seperator.png) bottom right no-repeat;
	float: left;
	line-height: 40px;
	margin: 0;
	width: 163px;
	text-align: center;		
}
#nav li.n_buy
{
	background: #9DB545 url(../images/nav-buy-bg.png) bottom repeat-x;
	width: 125px;
}
#nav li.n_buy a{
	color: #fff;
	font-weight: bold;
}
#nav .active a
{
	background: url(../images/nav-active.png) bottom right repeat-x;
	font-weight: bold;
}
#nav li a{
	color: #333;
	display: block;
	height: 100%;
	font-weight: normal;
	text-decoration: none;
}
#nav li a:hover{
	background: url(../images/nav-hover.png) bottom left repeat-x;
}
#nav li.n_buy a:hover{
	background: url(../images/nav-buy-hover.png) bottom left repeat-x;
}
#nav li.n_install{
	text-align: left;
}
#nav li.n_install a{
	background: url(../images/install-arrow.png) 100px 50% no-repeat;
	padding-left: 16px;
}
/* Homepage banner */
.banner{
	background: url(../images/banner-bg.png) top left repeat-x;
	clear: both;
	float: left;
	margin-bottom: 1em;
	padding-top: 20px;
	width: 777px;
}


/* Main content area and homepage features */
#content, .feature, .secondarycontent{
	clear: both;
	float: left;
	width: 100%;
}
.feature{
	border-bottom: 1px solid #c3d9ff;
	margin-bottom: 1em;
}
.col1{
	clear: left;
	float: left;
	margin-top: 10px;
	width: 516px;
}
.col2{
	clear: right;
	float: right;
	margin-top: 10px;
	width: 252px;
}
.col1.wide{
	width: 770px;
}
#content .otherfeatures li, #content .secnav li,
.banner .otherfeatures li, .banner .secnav li{
	background: url(../images/gtdi-star.png) 0 .2em no-repeat;
	list-style-type: none;
	margin: 0;
	padding-left: 24px;
}
#content .secnav li li,
.banner .secnav li li{
	background: none;
	list-style-type: disc;
	padding-left: 0;
}



/* Introduction panel switcher */

#introduction{
	margin-left: 3px;
	min-height: 320px;
	/*height: 320px;*/
	position: relative;
}
#introduction .panels{
	background: url(../images/introduction-bg.png) top left no-repeat;
	float: left;
}
.intro-col1{
	float: left;
	margin: 20px 0 20px 10px;
	width: 400px;
}
.intro-col2{
	float: right;
	margin: 20px 40px 20px 0;
	width: 310px;
}
#intro-nav{
	clear: both;
	float: left;
	margin-left: 7px;
	position: relative;
	width: 100%;
}
#intro-nav ul{
	float: left;
	margin: 0 0 0 0px;
	padding: 0;
	position: relative;
	height: 110px;
}
#intro-nav li{
	background: url(../images/intro-nav-li-bg-v.png) -5px -149px no-repeat;
	display: block;
	float: left;
	height: 110px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 251px;
}
#intro-nav li.active{
	background: url(../images/intro-nav-li-bg-v.png) -5px 0 no-repeat;
}
#intro-nav a{
	background: url(../images/intro-nav-icons.png) 10px 10px no-repeat;
	display: block;
	height: 100%;
	overflow: hidden;
	text-indent: -9999px;
}

#intro-nav li.process-nav a{
	background-position: -241px 10px;
}
#intro-nav li.relationships-nav a{
	background-position: -501px 10px;
}


/*maincontent*/
#maincontent{
	float: left;
	clear: both;
	
}

/* Footer */
#footer{
	background: url(../images/header-bottom.png) top no-repeat;
	clear: both;
	padding-top: 20px;
	width: 100%;
}
#footer .copyright{
	width: 240px;
	float: left;
	line-height: 47px;
}
#footer .producedby{
	float: right;
	text-align: right;
	width: 240px;
}
#footer .producedby span{
	display: none;
}
#footer .producedby img{
	margin-bottom: -18px;
}
#footer .footer-links
{
	text-align:center;
	margin:10px;
}
#footer .disclaimer
{
	clear:both;
	line-height:normal;
	font-size:0.7em;
	color:#555;
}



/* Misc modular styles */
.boxed{
	background: #f1f7dc;
	border: 1px solid #b8d552;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 1em;
	margin-right: 12px;
	padding: 10px;
}
.boxed-small
{
	font-size:0.9em;
}
.support .boxed
{
	position:absolute;	/* was fixed */
	width:238px;
}
.about .boxed
{
	position:absolute;
	width:238px;
}
.donate .boxed
{
	position:absolute;
	width:238px;
}
.boxed p, .boxed ul, .boxed h3{
	margin-left: 0;
}
.boxed h3{
	font-size: 1em;
	margin-bottom: .4em;
}
.boxed p, .boxed li{
	font-size: .9em;
}

.btninstall{
	background: #85AAC4 url(../images/install-icon.png) right no-repeat;
	border: 4px solid #617C91;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #fff;
	display: block;
	font-size: 15px;
	font-weight: bold;
	line-height: 42px;
	margin-bottom: .5em;
	padding: 0 0 0 12px;
	text-decoration: none;
}
a.btninstall.major{
	font-size: 22px;
	text-align: center;
	margin-right: 10px;
}
a.btninstall.major img{
	position: relative;
	bottom: -8px;	
}
a.btninstall:hover{
	background-color: #7090a6;
	text-decoration: none;
}

p.screenshot, p.linkpara{
	margin-top: -1em;
}

.fr{
	float: right;
	clear: right;
	margin: 0 0 1em 1em;
}

/* Network nav */
#network {
	margin: 0;
	width: 100%;
	font-size: .9em;
	background: #f8b730;
	border-bottom: .2em solid #e7a620;
	position:absolute;
	top:0px;
	left:0px;
}

#network::after {
	display: block;
	clear: both;
	content: " ";
}

#network li { 
	float: left;
	padding: .2em .6em;
	border-right: 1px solid #e7a620;
	list-style-type: none;
}

#network a {
	padding: .4em .15em;
	color: #633;
}

.support .upgrading-notice
{
	margin:auto;
	margin-right:0px;
	font-size:0.85em;
	width:85%;
}

.support .boxout
{
	margin:auto;
	margin-right:0px;
	font-size: 0.85em;
	width:70%;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #F7FDF8;
	border: 1px solid #B5EDBC;
}
.support .boxout a
{
	font-size: 0.8em;
}

.fixemail .quote
{
	margin:auto;
	margin-right:0px;
	font-size: 0.85em;
	width:70%;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #F7FDF8;
	border: 1px solid #B5EDBC;
}
.fixemail .quote a
{
	font-size: 0.8em;
}

#donatebox
{
	background-color: #F7FDF8;
	border: 1px solid #B5EDBC;
	-moz-border-radius: 5px;
	padding: 1em;
	margin: 1em;
}
#donatebox *{
	margin: 0;
}
#donatebox #donatebox_oneoff
{
	float: left;
	width: 49%;
}
#donatebox #donatebox_recurring
{
	border-left: 1px solid #b5edbc;
	float: left;
	padding-left: 16px;
	width: 40%;
}
#donatebox label{
	display: block;
}
#donatebox select{
	margin-bottom: 1em;
	width: 140px;
	
}
#donatebox p.unsub{
	font-size: .8em;
	margin: 0 0 0 0;
}
#donatebox p.payment{
	font-size: .8em;
	margin: 1em 0 -1em 0;
	text-align: center;
	width: 100%;
}
#donatebox .payment img{
	clear: both;
}


.bio_pic
{
	float:left;
	padding: 0 0 4px 0;
	background: url(../images/hr.png) bottom left no-repeat;
	margin: 0 1em 1em 0;
}
.bio_pic i{
	display: block;
	padding: 8px;
	border-right: 1px solid #ccc;
	margin-bottom: 6px;
	margin-top: -2px; 
	}
.bio_text
{
	float:left;
	width:350px;
}


img.getitnow{
	margin-left: -10px;
}

#frmSubscribe{
	margin-bottom: 1em;
}
#frmSubscribe input{
	margin: 0 0 -7px 0;
}
#frmSubscribe input.txt{
	border: 1px solid #999;
	font-size: 12px;
	padding: 2px 4px;
	color: #ccc;
	margin: 0;
	margin-right: 4px;
	height: 16px;
	width: 120px;
}
#frmSubscribe input.
#frmSubscribe input.txt.focussed{
	color: #999;
}

img.firefoxgmail{
	margin-top: 10px;
	margin-left: 10px;
}

/* features page styles */
.featurepack{
	clear: both;
	float: left;
	width: 100%;
}
.featurepack .demovid{
	background: #000;
	clear: both;
	margin: 10px;
	text-align: center;
}
.featurepack .demovid img{
	margin: 10px auto;
}
.featurepack h2{
	font-size: 22px;
	
}
.featurepack h3{
	font-size: 14px;
	margin: 0;
}
/*
.featurepack .subcol1{
	float: left;
	width: 330px;
}
.featurepack .subcol2{
	float: right;
	width: 330px;
}
*/
.featurelist{
	display: block;
	float: left;
	margin-left: 20px;
	width: 330px;
}
.banner .featurelist li{
	background: none;
	list-style-type: none;
	margin: 0 5px 5px 0;
	padding: 0;
}

.featurelist li ul{
	font-size: 12px;
	margin: 0;
}
.featurelist li li{
	margin-bottom: 0;
}
.featurelist p{
	font-size: 12px;
}
ul.features-leader{
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	float: left;
	overflow: hidden;
	margin: 0 13px 20px;
	padding: 0;
	width: 750px;
}
ul.features-leader li{
	background: 0;
	display: block;
	height: 200px;
	float: left;
	width: 375px;
	padding: 0;
	margin: 0;
}
ul.features-leader li.modify-leader{
	background: url(../images/features-leader-modify.png) top left no-repeat;
}
ul.features-leader li.workflow-leader{
	background: url(../images/features-leader-workflow.png) top	left no-repeat;
}
ul.features-leader a{
	display: block;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
}

img.feature-leader-img{
	float: left;
	margin: 0 1em 1em 0;
}


/* Getting Started */

#installation-notices{
	background: #dfe4eb;
	border: 2px solid #617C91;
	border-top: 0;
	margin: -14px 30px 30px;
	padding: 20px 20px;
}
#no-firefox, #outlook-notice{
	background: #fff5e5;
	border: 1px solid #f90;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	padding: 10px;
	margin: 0 30px;
	
}
hr.sectionheading{
	margin-top: 20px;
	background: url(../images/header-bottom.png) top no-repeat;
	height: 30px;
}

/* Support */
.supportnav{
	border: 1px solid #dfe4eb;
	border-radius: 10px;

	background: #dfe4eb;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;

	overflow: hidden;
	margin-bottom: 30px;
}
.banner .supportnav li{

	border-bottom: 1px solid #dfe4eb;
	background: url(../images/banner-bg.png) bottom;
	margin: 0;
	padding: 10px;
	list-style-type: none;
/* 	border-bottom: 1px solid #617c91; */
	
}
.banner .supportnav li.last{
	border-bottom: none;
}
.supportnav li h3, .supportnav li p{
	margin: 0;
}


/* FAQs and Roadmap*/
ul.faqs.first, 
ul.roadmap.first{
	float: left;
	width: 360px;
}
ul.faqs.last, 
ul.roadmap.last{
	float: right;
	width: 360px;
}
ul.faqs li, 
ul.roadmap li{
	border-bottom: 1px solid #e5e5e5;
	list-style-type: none;
	margin-left: 0;
}
ul.faqs h4, 
ul.roadmap h4{
	font-size: 14px;
	margin-bottom: 0;
}
ul.faqs p, 
ul.roadmap p{
	font-size: 12px;
}
	

p.roadmapend{
	float: none;
	clear: both;
}


/* Buzz */

ul.buzzquotes li{
	list-style-type: none;
	margin: 0;
}
ul.buzzquotes blockquote{
	margin: 0;
	font-size: 12px;
}
ul.buzzquotes p.cite{
	font-weight: bold;
	text-align: right;
	padding-right: 15px;
}

/* Buy */
table.compare{
	margin-left: 10px;
	margin-right: 10px;
	width: 755px;
}
table.compare th, 
table.compare td{
	vertical-align: top;

}
table.compare th{
	text-align: center;
	font-style: italic;
	color: #666;
	
}
table.compare th strong{
	font-style: normal;
	color: #360;
	margin-bottom: 0;
	font-size: 24px;
}
table.compare th span.price{
	display: block;
	font-weight: bold;
}
table.compare th.free span.price{
	margin-bottom: 1.7em;
}
table.compare th.plus span.price{
}

table.compare a.button{
	display: block;
	background: #9eb845 url(../images/green-grad-bg.png);
	border: 1px solid #360;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	padding: 10px;
	
	text-align: center;
	text-decoration: none;
	color: #360;
	font-size: 18px;
	margin-bottom: 10px;	
}
table.compare tr td,
table.compare th{
	border-bottom: 1px solid #b8d552;
	border-left: 1px solid #b8d552;
	padding: 5px 10px;
}
table.compare td{
	
	font-size: 12px;
}
table.compare .variable{
	font-weight: bold;
	border-left: none;
	width: 30%;
}
table.compare .free{
	width: 15%;
}
table.compare .plus{
	background: #fff;
	border-left-color: #360;
	border-top: 3px solid #360;
	border-right: 1px solid #360;
	border-left-width: 3px;
	border-right-width: 3px;
	
	width: 27%;
}
table.compare .plus.lastcell{
	border-bottom: 3px solid #360;
}

table.compare td.plus{
	border-top: 0;
	font-weight: bold;
	width: 27%;
}
table.compare .premium{
	width: 27%;
}

.footnotes{
	background: url(../images/header-bottom.png) top no-repeat;
	padding-top: 30px;
	float: left;
	width: 100%;
}
.footnotes p{
	font-size: 11px;
}


























