* {margin: 0; padding: 0;}
ul {margin: 0;}
body { margin: 0; padding: 0; background-color: #fff; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #333;}

.yellow {font-weight: normal; background: #FFFAD5; padding: 2px;}
div.container {display: block; width: 960px; margin: 0 auto; padding: 0;}


/* HEADER ----------------*/

div.header {display: block; text-align: left; background-color: #eee; height: 50px; padding: 10px 0 10px 0;}

div.header ul {list-style: none; float: right; margin-top: 15px;}
div.header ul li {float: left; display: block;}
div.header ul li a {display: block; margin-right: 20px; font-size: 14px; color: #444; text-decoration: none; font-weight: bold; padding: 5px;}
div.header ul li a.pricing {color: #559120;}
div.header ul li a:hover {background-color: #817D97; border: 1px solid #666699; padding: 4px; color: #FFFFFF;}

/* TOP ----------------*/

div.top {text-align: left; background: url(images/bg-featured.jpg) no-repeat top center; height: 380px; padding:0; margin-bottom: 20px;position: relative;}

div.top div.container {position: relative; height: 370px;}

div.top div.pitch {width: 420px; padding-top: 15px;}

div.top h1 {text-align: left; font-size: 40px; font-family: helvetica, arial, sans-serif; color: #fff; padding:5px 0 15px 0;}
div.top h2 {text-align: left; font-size: 20px; font-family: helvetica, arial, sans-serif; margin: 5px 0 10px 0; color: #f1f1f1; font-weight: 100; line-height: 28px;}

div.top h2 strong {font-weight: lighter; background: #FFFF99; padding: 3px; color: #333;}

div.top small {font-size: 17px; color: #eee; font-weight: lighter; }

div.top a.pitch {display: block; width: 408px; height: 67px; background: url(images/top-pitch-button.png) no-repeat; text-indent: -99999px; margin-top: 25px;}
div.top a.pitch:hover {background: url(images/top-pitch-button.png) 0px -67px no-repeat; text-indent: -99999px;}

div.top span {display: block; width: 400px; position: absolute; top: 18px; right: 5px; font-size: 30px; text-align: right; color: #ddd;}
div.top span small {display: block; text-transform: uppercase; font-size: 12px; color: #ddd;}
div.top .screenshot {position: absolute; right: 0; bottom: 0px;}
div.top .howitworks {position: absolute; left: 0; bottom: 0px; z-index:100; display: block;}

a.ordernow {display: block; width: 190px; height: 52px; background: url(images/ordernow.png) no-repeat; text-indent: -99999px; float: left;}
a.ordernow:hover {background: url(images/ordernow.png) 0px -52px no-repeat; text-indent: -99999px;}
a.tryit {display: block; width: 190px; height: 52px; background: url(images/tryit.png) no-repeat; text-indent: -99999px; float: right;}
a.tryit:hover {background: url(images/tryit.png) 0px -52px no-repeat; text-indent: -99999px;}

div.top a.play {position: absolute; top: 170px; right: 140px; width:167px; height: 126px; background: url(images/play-button.png) 0 0 no-repeat;  cursor: pointer; text-indent: -99999px;}
div.top a.play:hover {background: url(images/play-button.png) 0 -126px no-repeat;}

/* CONTENT ----------------*/

div.left {float: left; width: 650px; margin: 10px 0 0 0;}

div.left div.feature {display: block; width: 260px; margin:0 80px 30px 0; float: left; font-size: 12px; line-height: 16px; font-family: Verdana, Arial, Helvetica, sans-serif;}
div.left div.last {margin-bottom: 0;}
div.left h3 {width: 180px; height: 45px; display: block; text-indent: -99999px; margin-bottom: 10px;}
div.left h3.feature-1 {background: url(images/content-features-1.gif) no-repeat;}
div.left h3.feature-2 {background: url(images/content-features-2.gif) no-repeat;}
div.left h3.feature-3 {background: url(images/content-features-3.gif) no-repeat;}
div.left h3.feature-4 {background: url(images/content-features-4.gif) no-repeat;}
div.left h3.feature-5 {background: url(images/content-features-5.gif) no-repeat;}
div.left h3.feature-6 {background: url(images/content-features-6.gif) no-repeat;}

div.right {float: right; width: 270px;}

div.right strong {font-size: 20px; font-weight: lighter;}

blockquote { background: #f3f3f3 url(images/blockquote-bg.png) 10px 10px no-repeat; padding: 10px 10px 10px 70px; margin: 0; font-size: 16px; margin: 35px 0 5px 0;}

div.right small {width: 300px; float: right; text-align: right;}

div.center {display: block; float: left; margin: 40px 0 40px 0; font-size: 16px; font-weight: bold; color: #222;}

div.center p { display: block; width: 960px; float: left;}

div.center a.steps {display: block; float: left; border: 1px solid #ddd; border-width: 1px 0 1px 0; font-size: 16px; font-weight: bold; text-decoration: none; color: #222;}
div.center a.step1 {background: url(images/center-step1.gif) no-repeat; width: 225px; height: 42px;  padding: 23px 0 0 95px;}
div.center a.step1:hover {background: url(images/center-step1.gif) 0 -63px no-repeat;}
div.center a.step2 {background: url(images/center-step2.gif) no-repeat; width: 235px; height: 42px; padding: 23px 0 0 85px;}
div.center a.step2:hover {background: url(images/center-step2.gif) 0 -63px no-repeat;}
div.center a.step3 {background: url(images/center-step3.gif) no-repeat; width: 225px; height: 42px;  padding: 23px 0 0 95px;}
div.center a.step3:hover {background: url(images/center-step3.gif) 0 -63px no-repeat;}

div.center span {line-height: 25px; border: 1px solid #ddd; border-width: 0px 0 1px 0;}
div.center span a, div.center p a {background: #FEE970; padding: 5px; margin: 0 5px 0 5px; color: #006699; text-decoration: none;}
div.center span a:hover, div.center p a:hover {text-decoration: underline; background: #FFFF66;}
div.center span.step4 {display: block; float: left; background: url(images/center-step4.gif) 36px 0 no-repeat; width: 545px; height: 42px;  padding: 23px 0 0 95px;}
div.center span.step4:hover {background: url(images/center-step4.gif) 36px -63px no-repeat;}
div.center span.step5 {display: block; float: left; background: url(images/center-step5.gif) no-repeat; width: 225px; height: 42px;  padding: 23px 0 0 95px;}
div.center span.step5:hover {background: url(images/center-step5.gif) 0 -63px no-repeat;}

div.column {display: block; width: 290px; float: left; margin-right: 40px;}
div.big {width: 630px;}

.text_subtitle {font-size: 18px; color: #3399FF;}

div.column a.headline {text-transform: uppercase; font-size: 14px; text-decoration: none; color: #333; font-weight: bold; display: block; margin-bottom: 8px; padding: 10px 0 10px 0;}
div.column a.news {background: url(images/column-news-rss.png) 180px 5px no-repeat;}
div.column a.twitter {background: url(images/column-twitter.png) 190px 5px no-repeat;}
div.column a.webinar {background: url(images/column-webinar.png) 210px 5px no-repeat;}
div.column a.newsletter {background: url(images/column-newsletter.png) 250px 5px no-repeat;}

div.column p, div#twitter_div {margin-bottom: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px;}
div.news p strong {display: block; margin-bottom: 5px;}
div.news p {font-size: 11px; font: Verdana, Helvetica, sans-serif;}

div#twitter_div ul {list-style: none; min-height: 300px;}
div#twitter_div li {padding: 0px 0px 10px 0px; margin-bottom: 10px; border-bottom: 1px solid #eee;}
div#twitter_div li a:link  { color: #003366;}

div.newsletter {border: 1px solid #ddd; border-width: 1px 0 1px 0; padding: 5px 0 15px 0;}

div.column a.webinar-register {display: block; width: 290px; height: 36px; background: url(images/column-webinar-register.png) no-repeat; text-indent: -99999px; margin-top: 15px;}
div.column a.webinar-register:hover {background: url(images/column-webinar-register.png) 0px -36px no-repeat; text-indent: -99999px;}

div.column input.field {padding: 5px; width: 162px; margin-right: 10px; vertical-align: middle; border: 1px solid #ccc; background: #f9f9f9; font: 10px Verdana, Arial, Helvetica, sans-serif;}
div.column input.newsletter-subscribe {width: 102px; height: 28px; background: url(images/column-newsletter-subscribe.png) no-repeat; border: none; cursor: pointer; text-ident: -99999px; vertical-align: middle;}
div.column input.newsletter-subscribe:hover {background: url(images/column-newsletter-subscribe.png) 0px -28px no-repeat;}

div.webinar p {border: 1px solid #ddd; border-width: 1px 0 1px 0; padding: 5px; background: #F0EAE3; font-size: 12px; line-height: 20px;}
div.column a.pricing {display: block; width: 290px; height: 65px; background: url(images/center-bottom-pricing.png) no-repeat; text-indent: -99999px;}
div.column a.pricing:hover {background: url(images/center-bottom-pricing.png) 0px -65px no-repeat; text-indent: -99999px;}

div.bottom-center {display: block; float: left; width: 960px; margin: 15px 0 10px 0;}

div.bottom-center blockquote {margin: 0 0 0 0; padding: 15px 10px 15px 90px; display: block; font-size: 24px; font-weight: lighter; background: #f3f3f3 url(images/blockquote-bg.png) 15px 15px no-repeat;}
div.bottom-center blockquote img {vertical-align: middle; margin-left: 10px;}
div.bottom-center small {float: right; margin-bottom: 20px;}

/* FOOTER ----------------*/

div.footer {clear: both; background: #eee url(images/footer-bg.gif) repeat-x; padding: 30px 0 20px 0;}

div.footer div.container {overflow: auto;}

div.footer span { display: block; width: 170px; margin: 0 0px 0 10px; float: left;}
div.footer span.first {width: 130px; padding-top: 30px;}
div.footer span.bottom-guide {margin-right: 30px;}
div.footer span strong {display: block; font-size: 14px; margin-bottom: 10px;}
div.footer span a {display: block; font-size: 10px; text-transform:  uppercase; text-decoration: underline; margin-top: 5px; color: #336699;}
div.footer a.trial {color: #FF6600;}
div.footer span.misc {width: 230px; font-size: 14px;}
div.footer span.misc img.logo {display: inline; float: left; margin-right: 10px;}
div.footer span.misc img.award {display: inline; float: left; margin-right: 10px;}
div.footer span.misc b {display: block; font-weight: bold; font-size: 14px; margin-bottom: 3px;}

div.copyright {float: left; display: block; width: 960px; margin: 20px 0 0 0; border-top: 1px solid #A8C0C4; padding-top: 15px; color: #4B6A70; font-size: 11px;}

div.copyright img {float: left;}

div.copyright p {float: right;}
div.copyright p a {color: #336699;}

div.bar {display: block; clear: both; width: 940px; background: #D6FAB8; padding: 10px; border: 1px solid #B1F57A; text-align: center; font-size: 24px; margin: 30px 0 40px 0;}
div.bar a {color: #555;}
div.bar a:hover {text-decoration: none;}

a.footer-try {display: block; width: 230px; height: 64px; background: url(images/try.png) no-repeat; text-indent: -99999px; float: right;}
a.footer-try:hover {background: url(images/try.png) 0px -64px no-repeat; text-indent: -99999px;}

div.top-page {text-align: left; background: url(images/top-bg-page.jpg) no-repeat top center; height: 175px; padding:0; margin-bottom: 20px;}

div.top-page div.container {position: relative; height: 155px;}

div.top-page div.pitch {width: 600px; padding-top: 30px;}

div.top-page h1 {text-align: left; font-size: 40px; font-family: helvetica, arial, sans-serif; color: #fff; padding:0px 0 5px 0;}
div.top-page h2 {text-align: left; font-size: 20px; font-family: helvetica, arial, sans-serif; margin: 0 0 20px 0; color: #f1f1f1; font-weight: 100;}

div.top-page span {display: block; width: 400px; position: absolute; top: 18px; right: 5px; font-size: 28px; text-align: right; color: #ddd;}
div.top-page span small {display: block; text-transform: uppercase; font-size: 10px; color: #ddd;}

div.top-page img {position: absolute; right: 0px; bottom: 25px; border: none;}

div.learn {background: #eee; padding: 10px;}

textarea {border: 1px solid #ccc; padding: 5px; }
input.button {cursor: pointer;}

div.testimonials {font: 14px Arial, Helvetica, sans-serif; line-height: 18px;}
div.testimonials p {margin: 0 0 10px 0;}

a.tryit {display: block; width: 270px; height: 75px; background: url(images/top-trial.png) no-repeat; text-indent: -99999px; float: left;}
a.tryit:hover {background: url(images/top-trial.png) 0px -76px no-repeat; text-indent: -99999px;}

table.pricing-table td {border: 1px solid #ccc; border-width: 1px 0px 0 1px; position: relative;}

table.pricing-table a.buy {display: block; width: 84px; height: 28px; background: url(images/pricing-buynow.gif) no-repeat; text-indent: -99999px; margin-left: 37px;}
table.pricing-table a.buy:hover {background: url(images/pricing-buynow-on.gif) no-repeat;}

table.pricing-table a.subscribe {display: block; width: 84px; height: 28px; background: url(images/pricing-subscribe-off.gif) no-repeat; text-indent: -99999px; margin-left: 37px;}
table.pricing-table a.subscribe:hover {background: url(images/pricing-subscribe-on.gif) no-repeat;}


input.sub-submit {float: right; margin: 25px 0 0 0; display: block; width: 288px; background-color: #1085FF; border: 5px solid #59B0FF; font-size: 24px; color: #fff; cursor: pointer;}
input.sub-submit:hover {background-color: #59B0FF; border: 5px solid #1085FF;}