/* Eric Meyer Reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font: 13px/1.5 "Trebuchet MS", arial, verdana, sans-serif; color: #e0e0e0; background: #09101e url(/images/background-body.jpg) top center no-repeat;
font: 13px/1.5 arial, verdana, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* General */
#wrapper{ width: 904px; margin: 61px auto 0 auto; padding: 0 45px; background: transparent url(/images/background-wrapper.png) 0 0 no-repeat; } /* 21px outside padding, 24px inside padding */
/* Header */
#header{ position: relative; height: 72px; }
#logo{ position: absolute; left: 0; top: 18px; }
#header p{ position: absolute; top: 7px; left: 526px; color: #3b6899; font-size: 14px; }
#header p a{ color: #3b6899; text-decoration: none; }
#user-menu{ position: absolute; top: 0; right: 0; width: 126px; height: 29px; }
#user-menu li a{ position: absolute; top: 0; display: block; height: 29px; text-indent: -9999px; }
#user-menu li a#user-menu-login{ left: 0; width: 57px; height: 29px;background: transparent url(/images/background-user-menu.jpg) top left no-repeat; }
#user-menu li a#user-menu-signup{ right: 0; width: 69px; background: transparent url(/images/background-user-menu.jpg) top right no-repeat; }
span.chat{ margin-right: 20px; }
#header p span.chat a:hover{ text-decoration: underline; }
/* Header - Menu */
/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: absolute;
top: 35px;
left: 390px;
height: 22px;
width: 520px;
/*overflow: hidden;*/
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("/images/lava.gif") no-repeat right -22px;
width: 7px; height: 22px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("/images/lava.gif") no-repeat top left;
height: 22px;
margin-right: 7px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
font-size: 13px;
font-family: "Trebuchet MS",arial,verdana,sans-serif;
color: #fff; outline: none;
text-align: center;
height: 22px; top: 1px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
/* Content */
#content{ position: relative; padding: 30px 20px 20px 20px; min-height: 300px; background: #FFF; }
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content h1{ width: 100%; margin-bottom: 20px; padding-bottom: 13px; border-bottom: 1px solid #000; text-indent: -9999px; }
body.home #content h1{ width: auto; margin: 0; padding: 0; border: none; }
/* Content - Home */
body.home #content{ height: 678px; padding: 30px 0 0 0; background: #121212 url(/images/background-content-home.png) 0 0 repeat-x; }
body.home #content .left-column{ width: 340px; float: left; }
body.home #content .left-column h1, body.home #content .left-column p{ margin-left: 13px; }
body.home #content .left-column h1{ margin-bottom: 15px; }
body.home #content .left-column p{ margin-bottom: 20px; }
body.home #content .left-column ol li p{ margin: 5px 0 20px 0; }
body.home #content h1#who-are-we{ width: 211px; height: 22px; text-indent: -9999px; line-height: 1em; background: transparent url(/images/header-who-are-we.png) 0 0 no-repeat; }
body.home #content h1#how-does-it-work{ width: 312px; height: 23px; text-indent: -9999px; line-height: 1em; background: transparent url(/images/header-how-does-it-work.png) 0 0 no-repeat; }
body.home #content #create-an-account h2{ width: 159px; height: 13px; text-indent: -9999px; line-height: 1em; background: transparent url(/images/header-create-an-account.png) 0 0 no-repeat; }
body.home #content #build-your-newsletter h2{ width: 193px; height: 13px; text-indent: -9999px; line-height: 1em; background: transparent url(/images/header-build-your-newsletter.png) 0 0 no-repeat; }
body.home #content #review-your-proof h2{ width: 158px; height: 13px; text-indent: -9999px; line-height: 1em; background: transparent url(/images/header-review-your-proof.png) 0 0 no-repeat; }
body.home #content #distribute-to-your-residents h2{ width: 242px; height: 11px; text-indent: -9999px; line-height: 1em; background: transparent url(/images/header-distribute.png) 0 0 no-repeat; }
body.home #content #distribute-to-your-residents, body.home #content #create-an-account, body.home #content #build-your-newsletter, body.home #content #review-your-proof{ margin-left: 8px; padding-left: 39px; }
body.home #content #create-an-account{ background: transparent url(/images/bullet-1.png) 0 0 no-repeat; }
body.home #content #build-your-newsletter{ background: transparent url(/images/bullet-2.png) 0 0 no-repeat; }
body.home #content #review-your-proof{ background: transparent url(/images/bullet-3.png) 0 0 no-repeat; }
body.home #content #distribute-to-your-residents{ background: transparent url(/images/bullet-4.png) 0 0 no-repeat; }
/* Content - Home - Slideshow */
body.home #content .right-column{ position: relative; display: inline; width: 526px; height: 100%; float: right; margin-right: 26px; }
body.home #content .right-column p#slogan{ position: absolute; bottom: 15px; left: 0; width: 526px; text-align: center; font-size: 18px; color: #656565; }
body.home #content .right-column #slideshow-nav{ position: absolute; top: -21px; right: 0; width: 116px; height: 14px; text-align: right; }
body.home #content .right-column #slideshow-nav li{ display: inline; float: left; width: 18px; height: 14px; margin-left: 5px; background: transparent url(/images/background-slideshow-link.png) 0 0 no-repeat; }
body.home #content .right-column #slideshow-nav li a{ display: block; width: 18px; height: 14px; line-height: 14px; font-size: 11px; font-weight: bold; text-align: center; color: #848484; text-decoration: none; }
body.home #content .right-column #slideshow-nav li a:hover, body.home #content .right-column #slideshow-nav li a.activeSlide{ color: #FFF; }
body.home #content .right-column #slideshow-content{ position: relative; width: 526px; height: 281px; }
body.home #content .right-column #slideshow-content li{ position: absolute; top: 0; left: 0; width: 526px; height: 281px; }
/* Content - Home - Tabs */
body.home #content .right-column #homepage-tabs{ position: relative; width: 526px; height: 45px; margin-top: 13px; }
body.home #content .right-column #homepage-tabs ul#tabs li{ float: left; width: 124px; height: 45px; margin-left: 10px; background: #CCC; }
body.home #content .right-column #homepage-tabs ul#tabs li#tab-samples{ margin-left: 0; }
body.home #content .right-column #homepage-tabs ul#tabs li a{ display: block; width: 100%; height: 100%; text-indent: -9999px; background-color: transparent; background-position: 0 0; background-repeat: no-repeat; }
body.home #content .right-column #homepage-tabs ul#tabs li#tab-samples a{ background-image: url(/images/tab-samples.png); }
body.home #content .right-column #homepage-tabs ul#tabs li#tab-pricing a{ background-image: url(/images/tab-pricing.png); }
body.home #content .right-column #homepage-tabs ul#tabs li#tab-watch a{ background-image: url(/images/tab-watch.png); }
body.home #content .right-column #homepage-tabs ul#tabs li#tab-contact a{ background-image: url(/images/tab-contact.png); }
.ui-tabs .ui-tabs-hide {
display: none;
}
body.home #content .right-column #homepage-tabs ul#tabs li a:hover{ background-position: 0 -45px; }
body.home #content .right-column #homepage-tabs ul#tabs li.ui-tabs-selected a{ background-position: 0 -90px; }
/* Content - Home - Tab Content */
body.home #content .right-column #homepage-tabs .tab-content{ position: absolute; top: 45px; left: 0; width: 526px; height: 280px; background: #000;}
body.home #content .right-column #homepage-tabs #samples{ border-top: 4px solid #f00f87; }
body.home #content .right-column #homepage-tabs #pricing{ border-top: 4px solid #f37022; }
body.home #content .right-column #homepage-tabs #watch{ border-top: 4px solid #679e37; }
body.home #content .right-column #homepage-tabs #contact-us{ border-top: 4px solid #288ee6; }
/* Content - Home - Tab Content - Samples */
#samples ul{ padding: 11px 0 0 13px; }
#samples ul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#samples ul li{ float: left; margin: 0 11px 11px 0; }
#samples ul li a{ display: block; width: 91px; height: 118px; background: #444; }
#samples p{ text-align: center; position: relative; top: -9px; margin: 0; padding: 0; font-size: 10px; color: #FFF; }
/* Content - Home - Tab Content - Contact Form */
body.home #content .right-column #homepage-tabs #contact-us{ background: #212121; }
#contact-us form{ margin-top: 10px; }
#contact-us dl{ width: 373px; }
#contact-us dl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#contact-us dt{ float: left; width: 119px; padding-right: 10px; line-height: 28px; text-align: right; clear: both; }
#contact-us dd{ float: right; width: 244px; margin-bottom: 8px; }
#contact-us dt p{ font-size: 11px; margin-top: 25px; margin-left: 20px; line-height: 1.2em; }
#contact-us select{ width: 182px; }
#contact-us input.text{ margin: 0; padding: 0; width: 266px; height: 19px; padding: 5px 4px 4px 4px; border: none; vertical-align: middle; line-height: 19px; border: none; font-size: 14px; color: #777; background: transparent url(/images/background-input.png) 0 0 no-repeat; border-image: none; }
#contact-us textarea{ width: 236px; height: 109px; padding: 4px; border: none; background: transparent url(/images/background-textarea.png) scroll no-repeat; font-family: "Trebuchet MS", arial, verdana, sans-serif; font-size: 14px; color: #777; }
#contact-us #submit{ position: absolute; bottom: 14px; right: 64px; }
p#directions{ position: absolute; top: 10px; right: 10px; width: 130px; text-align: right; font-size: 11px; color: #C7C7C7; }
/* Pages - All */
#content p{ color: #4a4949; }
body.home #content p{ color: #F4F4F4; }
/* Page - Pricing */
#content h1#pricing-title{ height: 23px; background: transparent url(/images/header-pricing.png) 0 0 no-repeat; }
table.pricing-table{ width: 141px; float: left; display: inline; margin: 0 20px 20px 0; color: #000; background: #d9d9d9 url(/images/header-table-pricing.png) 0 0 no-repeat; }
table.pricing-table thead tr th{ height: 36px; text-indent: -9999px; }
table.pricing-table tbody tr td{ height: 26px; line-height: 26px; border-bottom: 1px solid #FFF; }
table.pricing-table tbody tr td{ width: 56px; padding: 0 0 0 15px; }
#pricing-bubble{ position: absolute; display: block; top: 110px; right: 70px; width: 323px; height: 117px; background: transparent url(/images/background-pricing-bubble.png) 0 0 no-repeat; }
#pricing-bubble *{ text-indent: -9999px; }
#content.pricing p{ clear: both; color: #000; font-size: 11px; width: 460px; }
/* Page - FAQs */
#content h1#faqs-title{ background: transparent url(/images/header-faqs.png) 0 0 no-repeat; }
ul#faqs-index, ul#faqs-answers{ width: 528px; }
ul#faqs-index{ padding: 0 0 20px 0; border-bottom: 1px solid #000; }
ul#faqs-index li a{ color: #033876; }
ul#faqs-answers li{ border-bottom: 1px solid #000; padding-top: 20px; }
ul#faqs-answers li h2{ margin-bottom: 15px; font-size: 14px; color: #000; font-family: arial, verdana, sans-serif; font-weight: normal; }
ul#faqs-answers li p{ padding: 0 0 20px 0; color: #4a4949; font-family: arial, verdana, sans-serif; }
ul#faqs-answers li p.back-to-top{ text-align: right; }
ul#faqs-answers li p.back-to-top a{ color: #999; }
#faqs-bubble{ position: absolute; top: 82px; right: 27px; width: 301px; height: 91px; background: transparent url(/images/background-faqs-bubble.png) 0 0 no-repeat; }
#faqs-bubble *{ text-indent: -9999px; }
/* Page - Comments */
#content.comments p{ color: #4a4949; }
#content h1#comments-title{ background: transparent url(/images/header-comments.png) 0 0 no-repeat; }
blockquote{ padding: 0 0 20px 0; margin: 0 0 20px 0; border-bottom: 1px solid #000; width: 528px; }
blockquote p{ color: #000; }
.bubble{ float: right; width: 296px; height: 792px; }
/* Page - Video Demos */
#content h1#video-title{ background: transparent url(/images/header-video.png) 0 0 no-repeat; }
/* Page - Feautures */
#content h1#features-title{ background: transparent url(/images/header-features.png) 0 0 no-repeat; }
/* Page - Links */
#content h1#links-title{ background: transparent url(/images/header-links.png) 0 0 no-repeat; }
/* Page - Contact Us */
form#contact-us dl dt{ color: #000; }
form#contact-us input.text{ background: transparent url(/images/background-input-white.png) 0 0 no-repeat; }
form#contact-us textarea{ background: transparent url(/images/background-textarea-white.png) scroll no-repeat; }
form#contact-us #submit{ position: relative; clear: both; margin-top: 10px; margin-left: 193px; }
p#full-directions{ position: absolute; top: 80px; right: 20px; width: 130px; text-align: right; font-size: 11px; color: #333 }
.req{ color: #FF0000; }
label.error{ display: inline; color: #FF0000; font-size: 10px; }
/* Page - Other */
#content h1#terms-title{ background: transparent url(/images/header-terms.png) 0 0 no-repeat; }
#content h1#privacy-title{ background: transparent url(/images/header-privacy.png) 0 0 no-repeat; }
#content h1#about-title{ background: transparent url(/images/header-about.png) 0 0 no-repeat; }
#content h1#contact-title{ background: transparent url(/images/header-contact.png) 0 0 no-repeat; }
/* Footer */
#footer{ margin: 0 -45px; padding: 25px 0 48px 0; min-height: 151px; color: #627380; font-size: 11px; background: transparent url(/images/background-footer.png) top no-repeat; text-align: center; }
#footer ul{ display: block; margin: 10px 0 18px 0; }
#footer ul li{ display: inline; }
#footer li a{ color: #627380; text-decoration: none; }