/* Start by clearing a few things */
@import url(clear.css);

/* GLOBAL */
body {background: #fff; color: #333; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center;}
html>body { font-size: 11px; }
a { color: #262a71; }
a:hover { color: #069; text-decoration: underline; }
#Page { margin: 0 auto; text-align: left; }
#Content { color: #000; }
blockquote, code, pre { background: #eee; margin: 0 24px; padding: 5px; }
blockquote {
	border           : 1px solid #ccc;
	border-left-color: #999;
	border-top-color : #999;
	font-size        : 11px;
}
code, pre {
	border     : 1px dashed #036;
	display    : block;
	font       : 1.1em "Courier New", Courier, monospace;
	white-space: pre;
	overflow   : auto;
}

/****************************************************************
 * ALERTS, NOTES, AND TIPS
 ****************************************************************/
.alert { background: #c00; color: #fff; margin: 10px 0 20px; padding: 11px 10px; }
.note,
.tip { margin: 10px 50px 20px; padding: 11px 10px 11px 32px; }
#Tour .note, #Tour .tip { margin: 10px 0 3em; }

.note { background: #f5fafa url(../images/icon-note.png) no-repeat 10px 10px; border: 1px dashed #acd1e9; }
.tip { background: #ffc url(../images/icon-tip.png) no-repeat 10px 10px; border: 1px dashed #154afd; }

.alertTag,
.noteTag,
.tipTag { padding-right: 3px; }

/*-- Need to specify the page --*/
#Doc .noteIntro, #Doc .tipIntro { margin-bottom: 0; }

/*-- Need to specify the page. A note or tip after a ul.list --*/
#Doc .afterList { margin: -16px 50px 32px 32px; }

/****************************************************************
 * FOOTNOTES
 ****************************************************************/
.footnote {  background: #eee; border-top: 1px solid #ccc; clear: both; color: #333; padding: 5px; }
.footnote ol { list-style: decimal; margin-left: 25px; }	
.footnote li { padding: 1px 0 1px 3px; }

/****************************************************************
 * TABLE GRID
 ****************************************************************/	
table.grid { background: #fff; border-bottom: 1px solid #ccc; margin: 0 0 20px; }
#Pricing table.grid { width: 400px; margin: 0 0 4px 50px; border-bottom: none; }

/*-- Cells --*/
.grid thead th {
	background    : url(../images/th-bg-h.png) repeat-x bottom left;
	border        : 1px solid #ccc;
	border-left   : none;
	font-size     : 0.9em;
	padding       : 5px;
	text-align    : left;
	vertical-align: center;
}
.grid thead th.c1 { border-left: 1px solid #ccc; }
#Pricing .grid thead th { text-align: right; padding-right: 20px; }
#Purchase #QtyMatrix .grid thead th { text-align: left; }
.grid td { padding: 8px 5px; vertical-align: top; }
#Pricing .grid tr.prices td { padding: 8px 20px 0 5px; }
#Pricing .grid tr.discounts td { padding: 0 20px 8px 5px; }
#Pricing .grid td.buyNow { font-weight: bold; vertical-align: middle; }
#Pricing .grid td.value { text-align: right; }
#Pricing .grid tr.discounts td.value { border-bottom: 1px solid #ccc; }
/*-- Formatting --*/
.grid .currency { color: #666; font-size: 0.8em; }
.grid .discount { color: #c00; font-size: 0.8em; }
.grid label { white-space: nowrap; }
#Purchase #QtyMatrix .grid label { white-space: nowrap; font-weight: normal; }
#Pricing .grid strong { font: bold 2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }

/* LISTS */
ul.list { margin: 0 0 16px 32px; }
ul.list ul { margin: 0 0 16px 32px; }
ul.list li { background: url(../images/li.gif) no-repeat 0 0.5em; padding: 1px 0 1px 8px; }
ol.list	{ list-style: decimal; margin: 0 0 16px 50px; }
ol.list li { padding: 1px 0 1px 3px; }
ol.list li ul.list li { padding-left: 8px; }
.list li.divider { padding-bottom: 16px; }
#Doc .chapter ul.list { margin-left: 50px; }
#Doc #Manual ul.list { margin-bottom: 32px;  }
#Doc #Manual .note ul.list { margin-bottom: 0; }
#Doc #Manual .chart ol.list	{ margin-left: 20px; }
#Doc #Manual .chart	ol.list li ul.list { margin: 8px 0 0 16px; }
#Doc .listIntro,
#FAQ .listIntro,
#Tour .listIntro { margin-bottom: 3px; }

/* GUIDES */
#Home .guide { margin: 20px 0 0 0; }
#Tour ol.guide { margin: 25px 0; }
#Tour div.guide { clear: both; font-weight: bold; font-size: 1.2em; margin: 25px 0 50px; text-align: center; }
#Tour.screenshots div.guide { font-size: 1.5em; }
#Support .guide { margin: 25px 0 25px 50px; }
.guide a { font-weight: bold; text-decoration: underline; }
#Home .guide a { font-weight: normal; text-decoration: none; }
.guide li { padding: 5px 0 20px 30px; }
#Home .guide li { background: url(../images/li.gif) no-repeat 0 0.5em; padding: 1px 0 5px 8px; }
/*-- Numbers --*/
.guide li.li01 { background: url(../images/li-01.gif) no-repeat top left; }
.guide li.li02 { background: url(../images/li-02.gif) no-repeat top left; }
.guide li.li03 { background: url(../images/li-03.gif) no-repeat top left; }
.guide li.li04 { background: url(../images/li-04.gif) no-repeat top left; }

/* HEADER, NAV, AND FOOTER */
/*-- Header --*/
#Header {border-bottom: 1px solid #ccc; height: 70px; margin: 20px 0px;}
#Logo { float: left; }
/*-- Navigations --*/
#Nav { float: right; padding: 20px 0 0 0; }
#Nav a { padding: 8px 8px 12px; }
#Nav a.current { color: #000; background: url(../images/nav-current.gif) no-repeat bottom center; font-weight: bold; }
.subNav { position: relative; }
.subNavBack  { position: absolute; left: 0; top: 0; }
.subNavNext  { position: absolute; right: 0; top: 0; }
.subNavItems { text-align: center; }
.subNavItems a { padding: 0 5px 12px; }
.subNavItems a.current { color: #333; background: url(../images/subNav-current.gif) no-repeat bottom center; font-weight: bold; }
/*-- Footer --*/
#Footer {clear: both; color: #545454; padding: 75px 0 20px; text-align: center;}
#Footer a { color: #545454; padding: 0 5px; text-decoration: underline; }
#Footer a:hover { text-decoration: none; }
#Copyright { margin: 15px 0; }

/* HOME */
#Home #Page { width: 788px; }
#Home #Content {float: left; width: 502px;}
#Home h1 { color: #154afd; display: inline; font: bold 1em Verdana, Arial, Helvetica, sans-serif; }
#Home h2 {background: url(../images/divider-h.gif) repeat-x bottom left; font: bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}
#Home #Updates h2 { margin-bottom: 8px; }
#Home p { line-height: 1.7; margin: 0 0 1.5em; }
#Home .spotlight p { display: inline; }
#Home #Features h3 { font-size: 1.1em; margin: 10px 0 5px; }
#Home #GuideNew { float: left; margin: 0 20px 0 0; width: 241px; }
#Home #GuideSupport { float: right; width: 241px; }
#Home #GuideNew ul, #GuideSupport ul { margin: 8px 0 15px 0; }
/*-- Updates --*/
#Home #Updates { background: #aeb7d6; clear: both; margin: 0 0 16px; padding: 10px 10px 2px 10px; }
/*-- Good --*/
#Home #Good { background: #fff; clear: both; margin: 0 0 16px; }
/*-- Spotlight --*/
#Home .spotlight { background: #333; border: 1px solid #333; color: #eee; }
#Home .spotlight .caption { padding: 8px; }
#Home .spotlight a { color: #fff; font-weight: bold; text-decoration: underline; }
#Home .spotlight a:hover { color: #ffc; }
/*-- Features --*/
#Home #Features {background: url(../images/divider.png) no-repeat top left; float: right; width: 236px; margin: 0 0 0 25px; padding: 0 0 0 25px;}
#Home #Features img { border: 2px solid #eee; }
#Home #Features .feature { padding: 10px 0 20px; }

/****************************************************************
 * TOUR
 ****************************************************************/

	#Tour #Page { width: 650px; }
	#Tour.screenshots #Page,
	#Tour.features #Page { width: 940px; }
		
	#Tour .tourNav { clear: both; border-bottom: 1px solid #ccc; padding-bottom: 20px; text-align: center; }
		#Tour .top { margin-bottom: 20px; }
		#Tour .low { border-top: 1px solid #ccc; padding-top: 20px; }
		#Tour .tourNav a { padding: 8px; margin: 0 10px }
		#Tour .tourNav a.current { background: #154afd; color: #333; font-weight: bold; }
	
	#Tour h1 { font: bold 2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }
		#Tour.screenshots h1 { }
		#Tour.features h1 { background: url(../images/divider-h.gif) repeat-x bottom left; }
	
	#Tour p { color: #333; font-size: 1.1em; line-height: 1.25; margin: 0 0 1em 0; }
		#Tour p.caption { font-size: 1em; font-weight: bold; margin: 5px 0 10px; }
		#Tour .note p, #Tour .tip p { font-size: 1em; }
		#Tour .footnote p { font-size: 1em; }
	
	#Tour p strong { color: #000; }
	
	#Tour p a { text-decoration: underline; }
		#Tour p sup a       { text-decoration: none; }
		#Tour p sup a:hover { text-decoration: underline; }
		
	/*-- Screenshots Tour --*/
	#Tour.screenshots #Content {
		border-top: 1px solid #ccc;
		margin    : 20px 0 0;
		padding   : 20px 0 0;
		text-align: center;
	}
	
	#Tour.screenshots .spotlight { margin: 0 0 3em; }
		#Tour.screenshots .next { border-bottom: 1px solid #ccc; padding: 0 0 3em; }

	/*-- Features Tour --*/
	#Tour.features #Content { float: left; width: 650px; }
	
	#Tour.features h2 {
		background: #3e991c url(../images/site/tour/features/tag-benefit.png) no-repeat 0 50%;
		clear     : both;
		color     : #fff;
		font      : bold 2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin    : 1em 0;
		padding   : 5px 5px 5px 138px;
	}
		#Tour.features #Updates h2 { background-image: url(../images/site/tour/updates/tag-new.png); padding-left: 102px; }
	
	#Tour.features .screenshot { background: #dfeff0; padding: 5px; }
		#Tour.features .spotlight { margin: 0 auto 3em; }
		#Tour.features .spotlightLeft   { float: left;  margin: 0 10px 10px 0; }
		#Tour.features .spotlightRight  { float: right; margin: 0  0 10px 10px; }
	
		#Tour.features .footnote { margin: 0 50px 3em; }
	
		/*-- Features List --*/
		#Tour #Features { float: right; width: 240px;  margin: 0 0 0 25px; }
			#Tour #Features h3 {
				background : #acd1e9 url(../images/site/tour/features/bg-features-nav-header.png) no-repeat bottom center;
				color      : #fff;
				line-height: 1.25;
				margin     : 0;
				font       : bold 1.2em Verdana, Arial, Helvetica, sans-serif;
				padding    : 8px 10px;
			}	
			#Tour #Features ul {
				background: url(../images/site/tour/features/bg-features-nav.png) no-repeat bottom center;
				padding   : 10px 0;
			}	
			#Tour #Features li a { border-top: 1px solid #f5fafa; display: block; font-weight: bold; padding: 10px 10px 10px 20px; } 
				#Tour #Features li a.first { border-top: none; }
			#Tour #Features li a:hover { background: #acd1e9; color: #039; text-decoration: none; } 
			#Tour #Features li.current a { background: #fff; color: #000; }
			
			/*-- Sub List --*/
			#Tour #Features li.current ul { background: none; padding: 0; }
			#Tour #Features li.current li a { border-top: 1px solid #dfeff0; font-weight: normal; padding: 5px 10px 5px 35px; } 
			#Tour #Features li.current li a:hover { color: #195d00; } 
	
	
	/*-- One Page Tour --*/
	#Tour.onePage h2 {
		background: url(../images/icon-check.png) no-repeat top left;
		font-size : 1.1em;
		margin    : 16px 0 0;
		padding   : 0 0 8px 20px;
	}
	
	#Tour.onePage p { margin-left: 20px; }
		#Tour.onePage p.section   { margin: 16px 0 32px 32px; }
	
	#Tour.onePage div.section { margin: 0 0 32px 32px; }
	
	
/****************************************************************
 * DOWNLOADS
 ****************************************************************/
	
	#Downloads #Page { width: 675px; }
	
	#Downloads h1 { font: bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; margin: 0 0 8px 0; }
	#Downloads h2 { font: bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; margin: 32px 0 8px 0; }
	#Downloads p  { margin: 0 0 0 16px; }
	
	#Downloads a.dl {
		background : url(../images/site/downloads/button.png) no-repeat top left;
		color      : #fff;
		display    : block;
		font-size  : 14px;
		font-weight: bold;
		height     : 43px;
		margin     : 16px 0;
		padding    : 12px 0 0;
		width      : 260px;
		text-align : center;
	}
	#Downloads a.dl:hover { background-position: 0 -55px; text-decoration: none; }
	#Downloads a.dl span.filesize { font-weight: normal; }
	
	
/****************************************************************
 * FAQ
 ****************************************************************/
	
	#FAQ #Page { width: 675px; }
	
	#FAQ .breadcrumbs { margin: 0 0 8px; }
	
	#FAQ h1 {
		background: url(../images/divider-h.gif) repeat-x bottom left;
		font      : bold 2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin    : 0 0 1em;
	}
	
	#FAQ h2 {
		color : #25489f;
		font  : bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin: 0 0 .5em 0;
	}
	
	#FAQ .directory li { margin-bottom: 3px; }
	#FAQ .directory a { color: #000; }
	#FAQ .directory a:hover { color: #039; }
	
	#FAQ p { line-height: 1.7; margin: 0 0 1.5em; }
	#FAQ p a { text-decoration: underline; }
	
	
/****************************************************************
 * PRICING
 ****************************************************************/
 
	#Pricing #Page { width: 720px; }
	
	#Pricing h2 {
		background: url(../images/divider-h.gif) repeat-x bottom left;
		font      : bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin    : 1.5em 0 .8em;
	}
	
	#Pricing p { margin: 0 0 1.5em 50px; }
		#Pricing .note p,
		#Pricing .tip p { margin: 0 0 8px 0; }
	
	#Pricing p a { text-decoration: underline; }


/****************************************************************
 * COMMUNITY
 ****************************************************************/
	#Community #Page { width: 720px; }
	
	#Community h2 { 
		background: url(../images/divider-h.gif) repeat-x bottom left;
		font      : bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin    : 1.5em 0 .8em;
	}
	
	#Community p { line-height: 1.7; margin: 0 0 1.5em; }
		#Community #Letter p { line-height: 1.5; margin: 0 0 1em; }		
	
	#Community p a { text-decoration: underline; }
	
	#Letter { background: #eee; border: 1px dotted #888; margin: 0 50px; padding: 15px; }
	
	#Letter h3 { margin-bottom: 2em; }


/****************************************************************
 * PURCHASE
 ****************************************************************/
	
	#Purchase #Page { width: 675px; }
	
	#Purchase .orderForm h2 {
		background: #e8f0f8;
		font      : bold 1.1em Verdana, Arial, Helvetica, sans-serif;
		margin    : 0 0 15px;
		padding   : 5px;
	}
	#Purchase .orderCancel h2 {
		background   : url(../images/divider-h.gif) repeat-x bottom left;
		font         : bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin-bottom: 8px;
	}
	
	#Purchase .notice p { margin: 6px; }
	#Purchase #Errors p { font-weight: bold; margin: 5px 0; }
	
	/*-- Required --*/
	#Purchase .required { text-align: right; padding-bottom: 3px; }
	#Purchase em { font-style: normal; color: #c00; }
	
	#Purchase .orderConfirm form,
	#Purchase .orderCancel form	{ border : 5px solid #eee; padding: 20px; }	
	
	/*-- Notice --*/
	#Purchase .notice {
		font   : bold 1.2em Verdana, Arial, Helvetica, sans-serif;
		margin : 15px 0;
		padding: 8px;
	}
		#Purchase .notice a { color: #000; text-decoration: underline; }
		#Purchase .orderConfrim .notice { background: #e8f0f8; }
		#Purchase .orderCancel .notice { background: #ffcb35; }
	
	/*-- Form --*/
	#Purchase .form { font-size: 1.1em; width: 100%; margin: 0 0 25px; }
	#Purchase .form th, .form td { padding: 3px; vertical-align: middle; }
	#Purchase .form th { text-align: right; white-space: nowrap; }
		#Purchase .orderConfirm .form th,
		#Purchase .orderCancel .form th { font-weight: normal; padding-right: 8px; }
	#Purchase .form td { }
		#Purchase .orderConfirm .form td,
		#Purchase .orderCancel .form td { font-weight: bold; }
	
	#Purchase .form label { font-weight: bold; margin-right: 5px;  }
	#Purchase .form select {  width: 260px; }
	#Purchase .form input,
	#Purchase .form textarea { padding: 2px 3px; }
	#Purchase .form textarea { width: 98%; }
	
	#Purchase .form .qtyInput { width: 75px; text-align: right; }
	#Purchase .form .txtInput { width: 225px; }
	
	#Purchase .form .instructField { padding-bottom: 0; }
	#Purchase .form .instructions { padding: 0 1px 15px; vertical-align: top; }
	
	/*-- For checkbox and radio options --*/
	#Purchase .options td { padding: 3px 0; }
	#Purchase .options input { margin: 0; }
	#Purchase .options label { margin-left: 3px; cursor: pointer; cursor: hand; }	
	
	/*-- Errors --*/
	#Purchase #Errors {
		background   : #ffe3e0;
		border-top   : 1px solid #dc6e66; 
		border-bottom: 1px solid #dc6e66;
		margin       : 0 0 25px;
		padding      : 15px;
	}
		#Purchase #Errors ul { list-style: square; margin: 0 35px 5px; }
		#Purchase #Errors li { padding: 5px 0 0 5px; }
	
	/*-- Submit --*/
	#Purchase .orderForm   .submit { border-top: 2px solid #999; font-size: 1.2em; padding: 15px 0 0; text-align: right; }
	#Purchase .orderCancel .submit { margin: -15px 0 0; }
	#Purchase input.ctrlSubmit {
		cursor  : pointer;
		cursor  : hand;
		display : inline;
		padding : 3px;
		width   : auto;
		overflow: visible; /*-- For IE Button Width --*/
	}
	#Purchase .submit a { color: #c00; padding: 3px; }
	#Purchase .submit a:hover { background: #c00; color: #fff; text-decoration: none; }


/****************************************************************
 * CONTACT AND SUPPORT
 ****************************************************************/

	#Contact #Page,
	#Support #Page { width: 720px; }
	
	#Contact h1,
	#Support h1 { font: bold 2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; margin: 0 0 1em; }
	
	#Contact p { line-height: 1.7; margin: 0 0 1.5em; }
	#Contact p a { font-weight: bold; text-decoration: underline; }


/****************************************************************
 * DOCUMENTATION
 ****************************************************************/	
	
	#Doc #Page { width: 777px; }
		#Doc.doc-overview #Page { width: 915px; }
		
	#Doc h1 {
		background: url(../images/divider-h.gif) repeat-x bottom left;
		font      : bold 2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin    : 0 0 1em;
	}
	
	#Doc h2 {
		color : #25489f;
		font  : bold 1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin: 0 0 .5em 0;
	}
		#Doc #Index h2 { margin-bottom: 0; }
		#Doc #EULA h2 { margin: 24px 0 3px; }

	#Doc .chapter h3 { font-weight: bold; margin-left: 25px; }	
	#Doc #Manual .steps h3 {  margin: 0 0 8px -50px; text-transform: uppercase; }
	
	#Doc p { margin: 0 0 8px; }
	#Doc #EULA p { line-height: 1.7; margin: 0 0 1.5em; }
	
	/*-- Table of Contents --*/
	#Doc .chapter { margin: 0 0 3em; }
		#Doc .chapter h2 a { color: #000; }
		#Doc .chapter h2 a:hover { text-decoration: none; }
		#Doc .chapter a { color: #000; font-weight: bold; }
		#Doc .chapter a:hover { color: #069; }
		#Doc .chapter a:visited { color: #666; font-weight: normal; }

	/*-- Manual --*/
	#Doc #Manual a { text-decoration: underline; }
	#Doc #Manual a:hover { text-decoration: none; }
	
	#Doc #Manual #Index { margin-left: 50px; }
		#Doc #Manual #Index h2 a { color: #000; text-decoration: none; }
		#Doc #Manual #Index h2 a:hover { color: #069; text-decoration: underline; }
		#Doc #Manual #Index .list li a { color: #000; font-weight: bold; text-decoration: none; }
		#Doc #Manual #Index .list li a:hover { color: #069; text-decoration: underline; }
		#Doc #Manual #Index .list li a:visited { color: #666; font-weight: normal; }
	
	#Doc .breadcrumbs { margin: 0 0 8px; }
		#Doc #Manual .breadcrumbs a { text-decoration: none; }
		#Doc #Manual .breadcrumbs a:hover { text-decoration: underline; }
	
	#Doc #Manual .subNav {
		border-top: 1px solid #ccc;
		padding   : 20px 0;
		margin-top: 24px;
	}
		#Doc #Manual .subNavBack,
		#Doc #Manual .subNavNext { top: 10px; }
		#Doc #Manual .subNav a { text-decoration: none; }
		#Doc #Manual .subNav a:hover { text-decoration: underline; }	
	
	/*-- Indent Screenshot --*/
	#Doc .screenshot.indent { margin-left: 32px; }
	
/*-- Styles to Process --*/
#Doc .processscreenshot { background: #dfeff0; padding: 5px; }
#Doc .processscreenshot.spotlight { margin: 0 auto 3em; }
	
	/*-- Steps --*/
	#Doc .steps { margin: 0 0 32px 50px; }
		/*-- No steps, just an explaination --*/
		#Doc .explain { margin: 0 0 16px 50px; }

	#Doc .steps .screenshot { margin: 0 0 24px 50px; }
	#Doc .steps .section { margin-bottom: 24px; }
	
	/*-- Chart --*/
	#Doc .chart { margin: 0 0 32px 50px; }
	
	#Doc .chart th,
	#Doc .chart td { padding: 5px; }
	
	#Doc .chart th { background: #ddd; padding-right: 32px; white-space: nowrap; }
	#Doc .chart tr.alt th { background: #eee; }
	#Doc .chart thead th {
		background    : url(../images/divider-h.gif) repeat-x bottom left;	
		font-weight   : normal;
		padding-bottom: 3px;
	}
	
	#Doc .chart td { background: #f2f2f2; padding-left: 10px; width: 100%; }
	#Doc .chart tr.alt td { background: #fff; }
		#Doc .chart tr.alt td.alt { background: #f2f2f2; }
	
	#Doc .chart .multiline { vertical-align: top; }