/* CSS layout rules for the non-content portions of the site (banner/branding, navigation, footer) */

/* _____________________ Begin reset css ______________________*/
/* orginial: http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th { margin: 0; padding: 0;	border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body { line-height: 1; }
ol, ul {list-style: none;}
/* remember to define focus styles! */
:focus {outline: 0;}


/* tables still need 'cellspacing="0"' in the markup */
table {	border-collapse: collapse; border-spacing: 0;}
/* _____________________ End reset css ______________________*/


body {background: #f8f5ed url(../images/bkgBody.jpg) repeat-x center top;font-size: 69%; /* tested sizes are 60%, 62.5%, 69%, 76%. Anything else requires testing (espcially on a Mac) */ 
	font-family:Arial, Helvetica, sans-serif;padding:0;	margin: 0;}	
#container {margin:0 auto; 	text-align:left; width: 900px;}

/* branding (header) begins */	
#header{margin:0 auto; text-align:left; width: 900px; height:120px; clear:both}	
#logo a{width:303px; height:60px; display:block; float:left; text-decoration:none; background:url(../images/logo.gif) no-repeat; position:relative; top:30px; float:left;}
#logo a:active{position:relative; top:31px;}
#headerNav{float:right; width:500px; height:120px; }
#mnav{margin-top:22px; margin-right:10px; height:38px;float:right; width:500px;}
#mnav ul{margin:0; padding:0;}
#mnav ul li{float:right; list-style-type:none;margin:0; padding:0; cursor:pointer; margin-left:3px;}
#mnav ul li:hover{cursor:pointer;}
#mnav ul li span, #userLogin span{display:none;}

#mnav ul li#home a{width:73px; height:38px; background:url(../images/mnavHome.gif) no-repeat top; display:block}
#mnav ul li#home a:hover{background:url(../images/mnavHome.gif) no-repeat left -38px;}
#mnav ul li#home a:active{background:url(../images/mnavHome.gif) no-repeat left -37px;}
#mnav ul li#home a.active{background:url(../images/mnavHome.gif) no-repeat bottom; !important}

#mnav ul li#purchase a{width:82px; height:38px; background:url(../images/mnavBuy.gif) no-repeat top; display:block}
#mnav ul li#purchase a:hover{ background:url(../images/mnavBuy.gif) no-repeat left -38px;}
#mnav ul li#purchase a:active{ background:url(../images/mnavBuy.gif) no-repeat left -37px;}
#mnav ul li#purchase a.active{background:url(../images/mnavBuy.gif) no-repeat bottom !important}

#mnav ul li#faq a{width:73px; height:38px; background:url(../images/mnavFaq.gif) no-repeat top; display:block}
#mnav ul li#faq a:hover{background:url(../images/mnavFaq.gif) no-repeat left -38px;}
#mnav ul li#faq a:active{background:url(../images/mnavFaq.gif) no-repeat left -37px;}
#mnav ul li#faq a.active{background:url(../images/mnavFaq.gif) no-repeat bottom !important}

#mnav ul li#contact{margin-left:0px;}
#mnav ul li#contact a{width:82px; height:38px; background:url(../images/mnavContact.gif) no-repeat top; display:block}
#mnav ul li#contact a:hover{ background:url(../images/mnavContact.gif) no-repeat left -38px;}
#mnav ul li#contact a:active{ background:url(../images/mnavContact.gif) no-repeat left -37px;}
#mnav ul li#contact a.active{background:url(../images/mnavContact.gif) no-repeat bottom !important}

#mnav ul li#userLogin a{width:106px; height:38px; background:url(../images/mnavLogin.gif) no-repeat left top; display:block}
#mnav ul li#userLogin a:hover{ background:url(../images/mnavLogin.gif) no-repeat left -38px;}
#mnav ul li#userLogin a:active{ background:url(../images/mnavLogin.gif) no-repeat left -37px;}
#mnav ul li#userLogin a.active{background:url(../images/mnavLogin.gif) no-repeat bottom !important}

#loginFeedback{width:303px; height:29px; display:block; clear:both; position:relative;top:10px; right:20px; float:right;}
#loginFeedback p{line-height:29px; text-align:right}
span.loggedUser a{ color:#000; font-weight:bold; text-decoration:none}
span.loggedUser a:hover{ color:#666;}
/*
#userLogin{width:103px; height:29px; display:block; clear:both; position:relative;top:2px; float:right;}
#userLogin a{width:103px; height:29px; display:block;  background:url(../images/mnavUserLogin.gif) no-repeat left top; display:block}
#userLogin a:hover{background:url(../images/mnavUserLogin.gif) no-repeat left -29px; }
#userLogin a:active{background:url(../images/mnavUserLogin.gif) no-repeat left -30px; }
#userLogin a.active{background:url(../images/mnavUserLogin.gif) no-repeat left bottom !important;}
*/
/* branding (header) ends */


/* Content Areas */
#content{width:900px; height:auto; margin:0 auto; clear:both; padding:24px 0 25px 0;
background:url(../images/hr.gif) repeat-x top;}
#content div.tab {display: block; padding: 10px 0; width:880px;}
#content div.left{float:left; width:530px; margin-left:10px;}	
#content div.right{float:right; width:300px; margin-left:30px; padding-top:10px;}

/* Right Callouts */
#content div.right .entry{width:290px; padding:5px; clear:both}
#content div.right .img{float:left; width:50px;}
#content div.right .text{float:right; width:240px;}

#content ul{ margin:0; padding-left:10px;}
#content ul li{background:url(../images/bullet.gif) no-repeat left 5px; padding-left:12px;  margin-bottom:0.5em;color:#333333;}
.loading{margin:50px;}

/* Login */
#loginSection{display:none; background:#fff; padding:20px;}
#content fieldset{border: 1px solid #BEB88B;  border-radius: 5px; -moz-border-radius: 5px;-webkit-border-radius: 5px;  padding:30px;margin:20px 0;}
#content fieldset table{width:auto; margin-top:20px;}
#content fieldset table td{padding:5px}
#content fieldset legend{padding:0 10px; font-size:1em; text-transform:uppercase; font-weight:bold}
#content fieldset label{padding:0;clear:right;text-transform:uppercase; font-weight:bold}

#content .inputBg{padding:0px; width:300px; height:40px; background:url(../images/inputBg.gif) no-repeat;}
#content .inputBg input{margin:7px; height:auto; font-size:1.7em; width:280px; border:0; background:none;}
#content .textarea{padding:0px; width:400px; height:159px; background:url(../images/inputTextarea.gif) no-repeat;}
#content .textarea textarea{margin:7px; height:139px; font-size:1.5em; font-family:Arial, Helvetica, sans-serif; width:380px; border:0; background:none;}
#content input.submitBtn{width:71px; height:24px; border:0; background:url(../images/btnSubmit.gif) no-repeat top;}
#content input.submitBtn:hover{background:url(../images/btnSubmit.gif) no-repeat left -24px; cursor:pointer}
#content input.submitBtn:active, #content input.submitBtn:focus{background:url(../images/btnSubmit.gif) no-repeat left bottom !important; cursor:pointer outline:none;}

/* User Area */

div.mostRecent{width:auto; padding:5px; border-left:3px solid #c3542e; padding-left:10px; margin-left:5px; margin-bottom:5px;}
div.versionMost{color:#fff; font-size:2em; background:#cc0000; padding:5px 8px; text-decoration:none; float:left}
div.download{margin-left:15px; padding:5px 0px; float:left}
div.download p.action{color:#333; font-size:2em; line-height:1em; padding:0; margin:0;}
div.download p{font-size:1em;}
div.download a{color:#333; text-decoration:none;}
div.download a:hover{color:#cc0000; text-decoration:none;}

div.previous{width:auto; padding:5px; border-left:3px solid #666; padding-left:10px; margin-left:5px; margin-bottom:5px;}
div.versionPrev{color:#fff; font-size:2em; background:#999; padding:5px 8px; text-decoration:none; float:left}

div.contact{padding:0 7px;}
div.contact table{width:auto; margin-top:10px;}
div.contact table td{padding:0;}
#content label{padding:0;clear:right; color:#333; font-size:1em; line-height:2em; text-transform:uppercase; font-weight:bold}

/* Fancybox */
a.fancybox {background:url(../images/fancyBox.gif) no-repeat left center; padding:4px 2px 4px 15px; position:relative; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:1em; color:#a9a189; margin:0; font-style:italic;}
a:hover.fancybox {color:#000; }

/* Homepage */
#flash{padding:10px;width: 572px; height:440px; background:url(../images/bkgPlayer.gif) no-repeat; float:left; position:relative; left:0px}
#flashContent, video1, video2{width: 572px; height:380px; padding:0;}
.buySong{margin-top:6px; width:200px; float:right; text-align:right}
#features{width:280px; float:right; padding:5px 0 0 0;}
#features form{margin:0; padding:10px 0 0 0}

#switch{position:relative; z-index:99}
#switch ul{width:300px; padding:0; margin:0; list-style-type:none; }
#switch ul li{ padding:0; margin:0; list-style-type:none; }
#switch ul li a{width:19px; height:19px; float:left; background:url(../images/btnSwitch.gif) no-repeat; padding:0; margin:0;}
#switch ul li a:hover{background:url(../images/btnSwitch_on.gif) no-repeat; cursor:pointer}
#switch ul li.active a, #switch ul li.active a:hover{background:url(../images/btnSwitch_hr.gif) no-repeat;}

#twitContainer{width:900px; height:70px;clear:both; background:url(../images/hr.gif) top repeat-x; padding-top:20px; position:relative; top:-10px;}
#twitLink a{height:50px; width:150px; display:block; float:left; background:url(../images/twitter.jpg) no-repeat left; text-decoration:none;}
#twitter{width:740px;height:50px; float:right;}
.twitted {width: 740px;}
.twitted p.preLoader {margin: 0;padding: 1.2em 1em 1em 0;}
.twitted ul#twitter_update_list {margin: 0;padding:0;list-style-type: none;}
.twitted ul#twitter_update_list li {margin: 0;padding:3px 3px; background:none; font-size:1.1em;}
.twitted ul#twitter_update_list li span {/* tweet content */display: block;}
.twitted ul#twitter_update_list li span a {/* links in tweet content */	color: #c3542e; background:none;}
.twitted ul#twitter_update_list li span a:hover {/* links in tweet content */	color: #333;}
.twitted ul#twitter_update_list li a {/* timestamp link */color: #fff; background:#c3542e; text-decoration:none; padding:1px 2px; font-size:1em}
.twitted ul#twitter_update_list li a:hover {/* timestamp link */color: #c3542e; background:#fff;}

.twitted ul#twitter_update_list li.firstTweet {}
.twitted ul#twitter_update_list li.lastTweet {border-bottom: none;}
.twitted p.profileLink {display: block;margin: 0;padding: 0.3em 1em;color: #fff;background-color: #ddd;}

/* Purchase */
.buy{width:60px; float:left;}
.text{width:470px; float:left;}

/* FAQ */
	div#faqNav {width:auto; height:auto; clear:both; padding:0; margin:10px 0; list-style:none; border-bottom:1px solid #e6e1d4;height:30px;}
	div#faqNav ul{padding:0; margin:0; list-style:none; height:30px; position:relative; top:-1px;}
	div#faqNav ul li{list-style:none; background:none; background:#333; color:#fff; float:left; padding:0 16px; line-height:30px; border:1px solid #e6e1d4;height:30px; cursor:pointer; font-size:1.1em;}
	div#faqNav ul li:hover{background:#c3542e;}
	div#faqNav ul li.active{list-style:none; background:none; border-bottom-color:#fefdfa; text-decoration:underline; color:#333; font-weight:bold;}
	div#faqNav ul li.last{border-left:none;}
	
	#faqSections{padding:7px 8px}
	
	
	div.faq{padding:2px 0 20px 0; margin:0; display:none;}
	div.faqcurrent{display:block;}
	div.faq p{padding-left:5px;}
	div.faq div{display:none; margin:0;padding-left:22px;}
	div.faq p.question{ color:#605e53; margin:0;padding-top:10px; padding-left:26px;font-size:1em;background:url(../images/arrowFaq.gif)  left 7px no-repeat; text-transform:uppercase; font-weight:bold  }	
	div.faq p.question.active{ font-weight:bold; font-size:1.3em; text-decoration:none; color:#792e99; background:url(../images/arrowFaq-down.gif)  left 7px no-repeat;}	
	div.faq p.question:hover{ cursor:pointer; text-decoration:underline;}
	div.faq ol{padding-left:47px;}
	div.faq ol li{list-style:decimal;  line-height:1em;}
	ol .highlight{font-weight:bold; color:#000;  background:none; padding:0;}
	
	#content div.faqleft{float:right; width:630px; margin-left:20px;}	
	#content div.faqright{float:left; width:240px;}
	#content div.faqNav ul{}
	#content div.faqNav ul li{padding:0;  margin:0; background:none}
	#content div.faqNav ul li a{font-size:1em; line-height:2em;text-decoration:none;padding:10px 0 10px 0px;width:100%; display:block; color:#333;}
	#content div.faqNav ul li a span{color:#333;  }
	#content div.faqNav ul li a:hover{background:none; text-decoration:none; color:#999;}	
	
/* Details */
#details{width:100%; height:auto; margin:0 auto; clear:both; padding:30px 0 0 0; background: #f0ede4 url(../images/bkgDetails.jpg) repeat-x; }
#detailsBtm{width:100%; height:30px; margin:0 auto; clear:both; padding:0; background: url(../images/bkgDetailsBtm.jpg) bottom repeat-x;}
#details #detailsContainer{width:900px; margin:0 auto;}
	#tabs{padding:0; height:auto; min-height:200px;}
	#detailsContainer #tabs div.tab {display: none; padding:0 10px 10px 10px}
	#detailsContainer #tabs div h3{ color:#605e53; font-size:1.1em; margin:10px 0 5px 0; text-transform:uppercase; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
	#details #tabs div p{ }
	#details #tabs div div.image{float:left; width:80px;}	
	#details #tabs div div.text{float:left; width:340px;}
	#details #tabs div div.left{float:left; width:440px;}	
	#details #tabs div div.right{float:right; width:440px;}
	
	#details #tabs div.current{display:block;}
	#details .examples{padding:5px 20px;}
	#details .examples img{border:1px solid #999; background:#fff; padding:1px;}
	#details .examples a:hover img{border:1px solid #c3542e;}
		
	/*Snav */
	#details #snav ul{margin:0; padding:0;height:32px; clear:both;  margin:0 0 20px 0}
	#details #snav ul li{float:left; list-style-type:none;margin:0; padding:0; cursor:pointer; margin-left:3px;}
	#details #snav ul li:hover{cursor:pointer;}
	#details #snav ul li span{display:none;}
	
	#details #snav ul li#about{width:167px; height:32px; background:url(../images/btnAbout.gif) no-repeat top; display:block}
	#details #snav ul li#about:hover{background:url(../images/btnAbout.gif) no-repeat left -30px;}
	#details #snav ul li#about:active{background:url(../images/btnAbout.gif) no-repeat left -29px;}
	#details #snav ul li#about.active{background:url(../images/btnAbout.gif) no-repeat left -60px !important}
	
	#details #snav ul li#advantage{width:209px; height:32px; background:url(../images/btnAdvantage.gif) no-repeat top; display:block}
	#details #snav ul li#advantage:hover{background:url(../images/btnAdvantage.gif) no-repeat left -30px;}
	#details #snav ul li#advantage:active{background:url(../images/btnAdvantage.gif) no-repeat left -29px;}
	#details #snav ul li#advantage.active{background:url(../images/btnAdvantage.gif) no-repeat left -60px !important}
	
	#details #snav ul li#examples{width:233px; height:32px; background:url(../images/btnExamples.gif) no-repeat center top; display:block}
	#details #snav ul li#examples:hover{background:url(../images/btnExamples.gif) no-repeat center -30px;}
	#details #snav ul li#examples:active{background:url(../images/btnExamples.gif) no-repeat center -29px;}
	#details #snav ul li#examples.active{background:url(../images/btnExamples.gif) no-repeat center -60px !important}

/* More Products */
#otherProducts{width:900px; height:auto; margin:0; text-align:center; position:relative; top:5px;}

/* Footer */
#footer {clear: both;height:auto;width:100%;margin:0 auto; color:#b1a88c; padding-bottom:20px; padding-top:20px; font-size:1em; line-height:2em; background:url(../images/bkgFooter.jpg) repeat-x center bottom}
#footer #footerContainer{width:900px; margin:0 auto;}
#footerCredits{float:left; width:100%; text-align:left; padding:5px;}
#footer a{ text-decoration:none; color:#c3542e;}
#footer a:hover{color:#000; background:none}
#footer .left{width:500px; float:left; padding:10px;}
#footer .right{width:350px; float:right;  padding:10px;text-align:right}
#footer .right ul{margin:0; padding:0;height:auto; clear:both}
	#footer .right ul li{float:right; list-style-type:none;margin:0; padding:0; cursor:pointer; margin-left:3px; padding-left:20px; color:#000;}
	#footer .right ul li:hover{color:#000;cursor:pointer;}
	#footer .right p{text-align:right; color:#000}
	#footer .center p{width:auto; margin:0 auto; text-align:center;  padding:0; clear:both}


/* misc  */
p, ol, li, dd, table {font-size: 1em;line-height: 1.5em;margin: 0 0 1em 0;text-align: left;color:#333}
h1, h2, h3, h4, h5, h6 {margin: 0 0 1em 0;}	
h1, h2{ color:#333; font-family:"Times New Roman", Georgia,  Times, serif; font-size:1.9em; margin:0px 0 12px 0; font-weight:normal}
h3{color:#c3542e; font-size:1.1em; margin:10px 0 10px 0; text-transform:none; font-weight:bold; text-transform:uppercase;}
h4{font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:1em; line-height:1.4em; text-transform:uppercase; margin-bottom:10px;}
.highlight{background:#a6a08b; color:#fff; padding:1px 4px;text-transform:uppercase;}
ol .highlight{font-weight:bold; color:#000; background:none; padding:0;}
a {color:#c3542e;text-decoration:underline;}
a:hover {color:#333;text-decoration: none}
/*::selection { background: #c3542e; color: white; }
::-moz-selection { background: #c3542e; color: white; }	*/
img {border: 0;}
.red{color:#cc0000;}
p.error{color:#cc0000; margin:4px 0; font-size:1.6em;}
p.smaller{font-size:0.9em;}
.rollover{ cursor:pointer;}
form.purchase{padding:0; margin:0;}
input.checkout{ cursor:pointer; width:257px; height:50px; background:url(../images/btnCheckout.gif) no-repeat top; border:none; padding:0; margin:0;}
input.checkout:hover{width:257px; height:50px; background:url(../images/btnCheckout.gif) no-repeat bottom !important;}
.spacer{ height:10px; clear:both; display:block}
.hand{cursor:help;}
.black{color:#000;}
.clear {clear: both;height: 1px; overflow: hidden;}
/* Horizontal Rule */
div.hr{border:0;width:100%;height:11px;margin:0; margin-bottom:6px;padding:0;background:url(../images/hr.gif) repeat-x; clear:both;}
div.hr hr , div.hr2 hr {display: none;}

/* ADS */
.ad72890{ background:url(../images/bkg72890.jpg) no-repeat; width:728px; height:90px;padding:4px 4px 4px 14px; margin:15px auto;}
.ad72815{ text-align:center; position:relative; top:-15px; width:auto; height:15px; background:url(../images/hr.gif) repeat-x top; padding:25px 0;}