/*----------------------------------------------------------------------------------- Global Reset v0.3 (based on http://meyerweb.com/eric/tools/css/reset/ - v1.0 | 20080212) -----------------------------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, 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 { line-height: 1; font-family: Arial, Helvetica, sans-serif; } ol, ul { list-style: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } /*--------------------------- Elements ---------------------------*/ body { background: #fff url(../images/front_end/page_bg.png) repeat-x 0 120px; margin: 0 0 50px 0; overflow-x: hidden; } a { color: #6CAB11; text-decoration: none; } h1 { border-bottom: 1px solid #E5E5E5; font-size: 30px; line-height: 36px; padding: 0 0 15px; width: 900px; } h2 { font-size: 24px; line-height: 30px; padding: 0 0 15px; } h3 { font-size: 16px; line-height: 22px; } h1 a, h2 a, h3 a { font-weight: bold; text-decoration: none; } p { font-size: 13px; line-height: 16px; } ul { list-style: disc outside url(../images/front_end/li_icon.png); padding: 0 0 0 20px; } ol { list-style: decimal; padding: 0 0 0 20px; } ul li, ol li { font-size: 12px; } /*------------------------------------------- Global -------------------------------------------*/ .left { float: left; } .right { float: right; } .center { text-align: center; } .clear { clear: both; } #content.home h1 { width: auto; } .intro p { color: #848484; font-size: 15px; line-height: 25px; padding: 10px 20px 0 0; } span.accent { color: #6CAB11; } /* HEADER */ #header { background: #5EA000 url(../images/front_end/gradient_sprite.png) repeat-x 0 2px; height: 129px; width: 100%; -moz-box-shadow: 0px 0px 10px #173202; -webkit-box-shadow: 0px 0px 10px #173202; box-shadow: 0px 0px 10px #173202; } #header .wrapper { height: 120px; margin: 0 auto; position: relative; width: 980px; } #header .inner { background: #4D8618 url(../images/front_end/gradient_sprite.png) repeat-x 0 -127px; height: 120px; position: absolute; width: 980px; z-index: 10; -moz-box-shadow: 0px 0px 10px #224504; -webkit-box-shadow: 0px 0px 10px #224504; box-shadow: 0px 0px 10px #224504; } #header .leftshadow, #header .rightshadow { background: url(../images/front_end/header_shadow.png) no-repeat left top; height: 8px; margin: 0 auto; position: absolute; width: 10px; z-index: 11; } #header .leftshadow { left: 0; bottom: -8px; } #header .rightshadow { background-position: -10px 0; right: 0; bottom: -8px; } #header .logo { background: url(../images/front_end/main_logo.png); display: block; height: 62px; left: 32px; position: absolute; top: 30px; text-indent: -99999px; width: 178px; } #header .welcome { color: #eee; font-size: 12px; position: absolute; right: 35px; top: 15px; } #header .welcome a { color: #FFF; } #header .welcome a.login, #header .welcome a.logout { background: url(../images/front_end/login_icon.png) no-repeat 0 2px; padding: 0 0 0 10px; } #header .welcome a:hover { text-decoration: underline; } #header .nav { bottom: 20px; position: absolute; right: 0; width: 420px; } #header .nav li { float: left; list-style: none; padding: 0 15px 0 0; } #header .nav li.last { padding: 0; width: 71px; } #header .nav li a { color: #fff; display: block; font-size: 19px; font-weight: 300; letter-spacing: .03em; padding: 4px 9px 6px 11px; text-transform: uppercase; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #header .nav li a:hover { background: #7DA93D; } #header .nav li a.selected { background: #427700; } body.cufon-loading #header .nav li a { /* for Cufon */ visibility: hidden !important; } /* CONTENT */ #content { background: #fff; margin: -10px auto 0; overflow: ; padding: 40px 10px 30px 30px; position: relative; width: 920px; z-index: /* 5 */; } #content { -moz-box-shadow: 0px 0px 10px #C7C7C7; -webkit-box-shadow: 0px 0px 10px #C7C7C7; box-shadow: 0px 0px 10px #C7C7C7; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } #content a { color: #84BF2B; text-decoration: none; } #content a:hover { text-decoration: underline; } /* HOME SPECIFIC */ #content.home { padding: 40px 0 0; width: 960px; } #content.home .feature { padding: 0 30px 30px; overflow: hidden; } #content.home .feature .column_left { border: 1px solid #E5E5E5; background: #eee; float: left; height: 320px; overflow: hidden; width: 470px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; position: relative; z-index: 5; } #content.home .feature .column_left .image { /* -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; */ position: relative; z-index: 0; } #content.home .feature .column_left img { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #content.home .feature .column_right { float: right; width: 400px; } #content.home .feature .column_right h1 { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; font-size: 30px; line-height: 36px; padding: 3px 0 15px; } #content.home .feature .column_right p { color: #5C5C5C; font-size: 13px; line-height: 20px; padding: 15px 0 13px; } #content.home .feature .column_right a.button { background: url(../images/front_end/home_feature_btn.sprite.png) no-repeat 0 0; display: block; height: 77px; margin: 5px 0 0; text-indent: -99999px; width: 399px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } #content.home .feature .column_right a.button:hover { background-position: 0 -79px; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; box-shadow: 0px 0px 10px #c7c7c7; } #content.home .feature .column_right a.button:active { background-position: 0 -158px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #content.home .band { background: #333333 url(../images/front_end/band_bg.png) repeat-x 0 0; clear: both; color: #DCDCDC; height: 55px; font-size: 15px; line-height: 55px; text-align: center; } #content.home .band a { color: #DCDCDC; text-decoration: underline; } #content.home .band strong { color: #a4a4a4; display: block; font-weight: normal; float: left; margin: 0 15px 0 20px; text-transform: uppercase; } #content.home .band img { float: left; margin: 0 15px; } #content.home .tabs { background: url(../images/front_end/gradient_sprite.png) repeat-x 0 -292px; overflow: hidden; -moz-border-radius: 0 0 9px 9px; -webkit-border-radius: 0 0 9px 9px; border-radius: 0 0 9px 9px; } #content.home .tabs .tab { background: url(../images/front_end/home_feature_tabs_divider.png) no-repeat right top; float: left; height: 170px; padding: 18px 20px; width: 201px; } #content.home .tabs .tab.first { background: url(../images/front_end/home_feature_tabs_divider.png) no-repeat right top, url(../images/front_end/home_feature_tabs_divider.png) no-repeat -2px top; -moz-border-radius: 0 0 0 9px; -webkit-border-radius: 0 0 0 9px; border-radius: 0 0 0 9px; } #content.home .tabs .tab.last { background-position: 236px 0; width: 197px; -moz-border-radius: 0 0 9px 0; -webkit-border-radius: 0 0 9px 0; border-radius: 0 0 9px 0; } #content.home .tabs .tab h3 { color: #333; font-size: 15px; line-height: 18px; margin: 0 0 6px 0; } #content.home .tabs .tab h3 a { color: #333; text-decoration: none; } #content.home .tabs .tab p { color: #575757; font-size: 12px; line-height: 17px; } #content.home .tabs .tab a.icon { background: url(../images/front_end/icons_sprite.png) no-repeat left 1px; color: #333; display: block; font-size: 13px; font-weight: bold; margin: 10px 0 0 0; padding: 0 0 0 17px; } #content.home .tabs .tab a.icon:hover { text-decoration: underline; } #content.home .tweet_it { background: url(../images/tweetit.png) no-repeat left top; color: #3FCDEB; display: block; font-size: 12px; height: 34px; padding: 8px 0 0 18px; position: absolute; top: 355px; right: 15px; width: 265px; } /* LOWER (Outside Content Div) */ #columns { margin: 0 auto; overflow: hidden; padding: 45px 0 20px; width: 960px; } #columns .column.third { float: left; margin: 0 15px 30px 15px; width: 290px; } #columns .column h3 { color: #2C2C2C; font-size: 16px; } #columns .column h3 a { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; display: block; font-size: 16px; margin: 0 0 10px 0; padding: 0 0 15px; } #columns .column p { color: #2C2C2C; font-size: 13px; line-height: 20px; } #columns .column a.icon { background: url(../images/front_end/icons_sprite.png) no-repeat left -16px; color: #84BF2B; display: block; font-size: 13px; font-weight: bold; line-height: 15px; margin: 10px 0 0 0; padding: 0 0 0 17px; } #columns .column a.icon:hover { text-decoration: underline; } #columns .column.twothirds { float: left; margin: 0 15px 30px 15px; width: 610px; } #columns .column h2 { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; font-size: 22px; margin: 0 0 10px 0; padding: 0 0 13px; } #columns .column_ul { float: left; margin: 0 25px 0 0; width: 280px; } #columns .column_ul h3 { margin: 5px 0 0; } #columns .column_ul ul { margin: 10px 0 15px 0; padding: 0; } #columns .column_ul ul li { color: #666; font-size: 13px; list-style: none; line-height: 17px; list-style: disc outside url(../images/front_end/li_icon.png); margin: 0 0 0 15px; padding: 0 0 7px 0; } /* TOUR */ #content.tour .stops { margin: 30px 0 0; } #content.tour .stop { float: left; margin: 0 13px 35px 0; width: 290px; } #content.tour .stop .screenshot { background: #E8E8E8; display: block; height: 145px; margin: 0 0 15px 0; padding: 5px; overflow: hidden; width: 280px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #content.tour .stop .screenshot:hover { -moz-box-shadow: 0px 0px 10px #999; -webkit-box-shadow: 0px 0px 10px #999; box-shadow: 0px 0px 10px #999; } #content.tour .stop h3 { color: #2C2C2C; font-size: 18px; margin: 0 10px; } #content.tour .stop p { color: #5C5C5C; font-size: 13px; line-height: 20px; margin: 8px 15px 0 10px; } #content.tour .stop a.icon { background: url(../images/front_end/icons_sprite.png) no-repeat left -16px; color: #84BF2B; display: block; font-size: 13px; font-weight: bold; line-height: 15px; margin: 10px 0 0 10px; padding: 0 0 0 17px; } #content.tour .stop a.icon:hover { text-decoration: underline; } #columns.tour_columns .column.third h3 { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; margin: 6px 0 10px 0; padding: 0 0 15px; } #content.tour .stop.demo .screenshot { background: #6CAB11; } #content.tour .stop.demo .screenshot:hover { -moz-box-shadow: 0px 0px 10px #6CAB11; -webkit-box-shadow: 0px 0px 10px #6CAB11; box-shadow: 0px 0px 10px #6CAB11; } /* MIDDLE ALERT */ #content .mid_alert { clear: both; font-size: 26px; font-weight: bold; line-height: 42px; padding: 20px 0 10px; text-align: center; } #content .mid_alert .button { background: url(../images/front_end/signup_mid_btn_sprite.png) no-repeat left top; display: inline-block; height: 42px; margin: 0 10px 0 15px; text-indent: -99999px; width: 184px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } #content .mid_alert .button:hover { background-position: 0 -43px; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; box-shadow: 0px 0px 10px #c7c7c7; } #content .mid_alert .button:active { background-position: 0 -86px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* FAQs */ .faq_navigation ol { border-top: 1px solid #E5E5E5; float: left; list-style: none; margin: 30px 30px 10px 0; padding:0; width: 410px; } .faq_navigation ol li { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; font-size: 16px; padding: 15px 10px; } .faq_navigation ol li span { font-weight: normal; } .faq_navigation ol li a { font-size: 16px; } dl { margin: 0 0 0 15px; width: 930px; } dl dt { border-bottom: 1px solid #E5E5E5; color: #6CAB18; display: block; font-size: 16px; font-weight: bold; margin: 0 0 15px 0; padding: 0 0 15px; } dl dt span { color:#2C2C2C; } dl dt .top { display: inline-block; font-size: 13px; font-weight: normal; float: right; margin: 3px 0 0 20px; } dl dd { margin: 0 0 55px 0; } /* PRICING */ #content.pricing .key { border-top: 1px solid #E5E5E5; float: left; list-style: none; list-style-image: none; margin: 107px 0 0 0; padding: 0; width: 160px; } #content.pricing .key li { border-bottom: 1px solid #E5E5E5; color: #5C5C5C; font-size: 13px; list-style: none; list-style-image: none; padding: 18px 20px; text-align: right; } #content.pricing .column_highlight { background: #F1FDE5; border: 1px solid #558A19; float: left; list-style: none; list-style-image: none; margin: 0 0 0 -1px; padding: 0; position: relative; width: 230px; z-index: 10; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; box-shadow: 0px 0px 10px #c7c7c7; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #content.pricing .column_highlight li { border-bottom: 1px solid #CAE2AD; color: #5D7145; font-size: 17px; list-style: none; list-style-image: none; margin: 0 10px; padding: 16px 20px; text-align: center; } #content.pricing .column_highlight li.cap { background: url(../images/front_end/pricing_sprite.png) repeat-x left top; border: none; height: 105px; margin: 0; padding: 1px; -moz-border-radius: 9px 9px 0 0; -webkit-border-radius: 9px 9px 0 0; border-radius: 9px 9px 0 0; } #content.pricing .column_highlight li.cap .inner { background: url(../images/front_end/pricing_sprite.png) repeat-x left -108px; height: 104px; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } #content.pricing .column_highlight li.cap .inner span { background: url(../images/front_end/pricing_header_sprite_new.png) no-repeat left top; display: block; float: left; height: 83px; margin: 17px 0 0 79px; text-indent: -99999px; width: 89px; } #content.pricing .column_highlight li.bottom { border: none; padding: 15px 0 30px; } #content.pricing .column_highlight .button { background: url(../images/front_end/signup_mid_btn_sprite.png) no-repeat left top; display: inline-block; height: 42px; margin: 0 13px 0 13px; text-indent: -99999px; width: 184px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } #content.pricing .column_highlight .button:hover { background-position: 0 -43px; -moz-box-shadow: 0px 0px 10px #ACD486; -webkit-box-shadow: 0px 0px 10px #ACD486; box-shadow: 0px 0px 10px #ACD486; } #content.pricing .column_highlight .button:active { background-position: 0 -86px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #content.pricing .column_highlight .inner, #content.pricing .column_normal .inner { position: relative; } #content.pricing .column_highlight .inner .banner, #content.pricing .column_normal .inner .banner { background: url(../images/banner_01.png) no-repeat left top; color: #fff; font-size: 10px; font-style: normal; display: block; height: 27px; line-height: 23px; left: 20px; position: absolute; top: -15px; text-transform: uppercase; width: 120px; } #content.pricing .column_highlight .inner .banner { left: 52px; } #content.pricing .column_normal { background: #fff; border: 1px solid #CDCDCD; float: left; list-style: none; list-style-image: none; margin: 21px 0 0 -1px; padding: 0; width: 163px; } #content.pricing .column_normal li { border-bottom: 1px solid #CDCDCD; color: #5C5C5C; font-size: 13px; list-style: none; list-style-image: none; margin: 0 10px; padding: 18px 2px; text-align: center; } #content.pricing .column_normal li.cap { background: url(../images/front_end/pricing_sprite.png) repeat-x left -212px; border: none; height: 84px; margin: 0; padding: 1px; } #content.pricing .column_normal li.cap .inner { background: url(../images/front_end/pricing_sprite.png) repeat-x left -298px; height: 84px; } #content.pricing .column_normal li.cap .inner span { background: url(../images/front_end/pricing_header_sprite_new.png) no-repeat left top; display: block; float: left; height: 83px; margin: 14px 0 0 70px; text-indent: -99999px; width: 89px; } #content.pricing .column_normal li.bottom { border: none; padding: 20px 0 20px; } #content.pricing .column_normal .button { background: url(../images/front_end/signup_black_sprite.png) no-repeat left top; display: inline-block; height: 33px; margin: 0 10px 0 10px; text-indent: -99999px; width: 121px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #content.pricing .column_normal .button:hover { background-position: 0 -34px; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; box-shadow: 0px 0px 10px #c7c7c7; } #content.pricing .column_normal .button:active { background-position: 0 -68px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #content.pricing .column_normal.trial { margin: 21px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; } #content.pricing .column_normal.trial li.cap { -moz-border-radius: 9px 0 0 0; -webkit-border-radius: 9px 0 0 0; border-radius: 9px 0 0 0; } #content.pricing .column_normal.trial li.cap .inner { padding: 18px 0 0; -moz-border-radius: 8px 0 0 0; -webkit-border-radius: 8px 0 0 0; border-radius: 8px 0 0 0; } #content.pricing .column_normal.trial li.cap .inner span { background: url(../images/front_end/pricing_header_sprite_new.png) no-repeat -93px 0; height: 17px; margin: 5px 0 6px 50px; width: 58px; } #content.pricing .column_normal.trial li.cap .inner small { clear: both; display: block; font-size: 11px; } #content.pricing .column_normal.trial li.cap .inner strong { clear: both; display: block; font-size: 15px; font-weight: normal; } #content.pricing .column_highlight.basic li.cap .inner small { display: none; } #content.pricing .column_highlight.basic li.cap .inner strong { display: none; } #content.pricing .column_normal.premium li.cap .inner { padding: 15px 0 0; } #content.pricing .column_normal.premium li.cap .inner span { background: url(../images/front_end/pricing_header_sprite_new.png) no-repeat -103px -31px; display: block; float: left; height: 26px; margin: 4px 0 5px 56px; text-indent: -99999px; width: 49px; } #content.pricing .column_normal.premium li.cap .inner small { clear: both; display: block; font-size: 11px; } #content.pricing .column_normal.premium li.cap .inner strong { clear: both; display: block; font-size: 15px; font-weight: normal; } /* TEMP - WHILE WE ONLY HAVE 3 PLANS */ #content.pricing .column_normal.premium { -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } #content.pricing .column_normal.premium li.cap { -moz-border-radius: 0 9px 0 0; -webkit-border-radius: 0 9px 0 0; border-radius: 0 9px 0 0; } #content.pricing .column_normal.premium li.cap .inner { padding: 15px 0 0; text-align: center; -moz-border-radius: 0 8px 0 0; -webkit-border-radius: 0 8px 0 0; border-radius: 0 8px 0 0; } #content.pricing .column_normal.maximum { -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } #content.pricing .column_normal.maximum li.cap { -moz-border-radius: 0 9px 0 0; -webkit-border-radius: 0 9px 0 0; border-radius: 0 9px 0 0; } #content.pricing .column_normal.maximum li.cap .inner { padding: 15px 0 0; text-align: center; -moz-border-radius: 0 8px 0 0; -webkit-border-radius: 0 8px 0 0; border-radius: 0 8px 0 0; } #content.pricing .column_normal.maximum li.cap .inner span { background: url(../images/front_end/pricing_header_sprite_new.png) no-repeat -103px -62px; display: block; float: left; height: 26px; margin: 4px 0 5px 56px; text-indent: -99999px; width: 49px; } #content.pricing .column_normal.maximum li.cap .inner small { clear: both; display: block; font-size: 11px; } #content.pricing .column_normal.maximum li.cap .inner strong { clear: both; display: block; font-size: 15px; font-weight: normal; } /* SIGNUP */ /* TABS */ #content.signup .signup_tabs { padding: 0; width: 930px; } #content.signup .signup_tabs li { background: none; float: left; list-style: none; } #content.signup .signup_tabs li a { background: url(../images/front_end/sign_up_tabs_sprite.png) no-repeat left top; display: block; height: 47px; text-indent: -99999px; width: 307px; } #content.signup .signup_tabs li.active a { position: relative; z-index: 10; } #content.signup .signup_tabs li.account a { background-position: 0 0; } #content.signup .signup_tabs li.account.active a { background-position: 0 -48px; } #content.signup .signup_tabs li.account.complete a { background-position: 0 -96px; } #content.signup .signup_tabs li.payment { margin: 0 0 0 -18px; width: 319px; } #content.signup .signup_tabs li.payment a { background-position: -308px 0; width: 319px; } #content.signup .signup_tabs li.payment.active a { background-position: -308px -48px; } #content.signup .signup_tabs li.payment.complete a { background-position: -308px -96px; } #content.signup .signup_tabs li.confirmation { margin: 0 0 0 -18px; } #content.signup .signup_tabs li.confirmation a { background-position: -628px 0; width: 310px; } #content.signup .signup_tabs li.confirmation.active a { background-position: -628px -48px; } #content.signup .signup_tabs li.confirmation.complete a { background-position: -628px -96px; } /* FORM */ #content.signup .signup_form { border: 1px solid #CDCDCD; border-top: 0; clear: both; padding: 20px 10px 20px 20px; width: 868px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } #content.signup .step1 {} #content.signup .step2 { display: none; } #content.signup .step3 { display: none; } /* ACCOUNT TYPE */ #content.signup .type_column_thin { float: left; margin: 0; width: 255px; } #content.signup .type_column_thin h3 { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; display: block; font-size: 16px; margin: 0 0 10px 0; padding: 0 0 15px; } #content.signup .type_column_thin p { color: #5C5C5C; font-size: 13px; line-height: 20px; } #content.signup .type_column_wide { float: right; width: 600px; } #content.signup .account_type { padding: 16px 10px 16px 10px; overflow: hidden; } #content.signup .account_type a { background: url(../images/front_end/pricing_sprite.png) repeat-x left -212px; border: 1px solid #CDCDCD; color: #333; display: block; float: left; height: 78px; margin: 13px 0 0 -1px; padding: 1px; width: 138px; text-align: center; text-decoration: none; } #content.signup .account_type a span { background: url(../images/front_end/pricing_sprite.png) repeat-x left -298px; display: block; padding: 8px 0 0; position: relative; height: 70px; width: 138px; } #content.signup .account_type a span .banner { background: url(../images/banner_01.png) no-repeat left top; color: #fff; font-size: 10px; display: none; height: 27px; line-height: 23px; left: 12px; position: absolute; top: -15px; text-transform: uppercase; width: 120px; } #content.signup .account_type a.selected span .banner { display: block; } #content.signup .account_type a.first { margin-left: 4px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } #content.signup .account_type a.first span { -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } #content.signup .account_type a.first.selected { margin-left: 1px; } #content.signup .account_type a.last { -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } #content.signup .account_type a.last span { -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } #content.signup .account_type a.selected { background-position: 0 0; border: 1px solid #558A19; height: 103px; margin: 0 -3px 0 -4px; padding: 1px; position: relative; width: 144px; z-index: 10; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; box-shadow: 0px 0px 10px #c7c7c7; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #content.signup .account_type a.selected span { background-position: 0 -107px; height: 87px; padding: 17px 0 0; width: 144px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #content.signup .account_type a strong { font-size: 15px; font-weight: normal; } #content.signup .account_type a strong.price { background: url(../images/front_end/signup_pricing_sprite.png) no-repeat left top; display: block; margin: 4px 0 3px 36px; text-indent: -99999px; } #content.signup .account_type a small { font-size: 12px; } #content.signup .account_type a.selected strong { color: #fff; } #content.signup .account_type a.selected small { color: #fff; } #content.signup .account_type a strong, #content.signup .account_type a small { opacity: .7; } #content.signup .account_type a:hover strong, #content.signup .account_type a:hover small { opacity: 1; } #content.signup .account_type a.selected strong, #content.signup .account_type a.selected small { opacity: 1; } #content.signup .account_type a.trial strong.price { background-position: 0 0; height: 20px; width: 65px; } #content.signup .account_type a.trial.selected strong.price { background-position: -83px 0; height: 30px; margin: 4px 0 2px 34px; width: 75px; } #content.signup .account_type a.basic strong.price { background-position: 0 -32px; height: 25px; margin: 4px 0 0 54px; width: 33px; } #content.signup .account_type a.basic.selected strong.price { background-position: -83px -40px; height: 30px; margin-left: 52px; width: 38px; } #content.signup .account_type a.premium strong.price { background-position: 0 -66px; height: 25px; margin: 4px 0 0 44px; width: 65px; } #content.signup .account_type a.premium.selected strong.price { background-position: -83px -79px; height: 30px; margin-left: 44px; width: 55px; } #content.signup .account_type a.maximum strong.price { background-position: 0 -100px; height: 25px; margin: 4px 0 0 43px; width: 65px; } #content.signup .account_type a.maximum.selected strong.price { background-position: -83px -118px; height: 30px; margin-left: 43px; width: 58px; } *+html #content.signup .account_type a.trial strong.price { margin-left: 0; } *+html #content.signup .account_type a.trial.selected strong.price { margin-left: 0; } *+html #content.signup .account_type a.basic strong.price { margin-left: 0; } *+html #content.signup .account_type a.basic.selected strong.price { margin-left: 0; } *+html #content.signup .account_type a.premium strong.price { margin-left: 0; } *+html #content.signup .account_type a.premium.selected strong.price { margin-left: 0; } *+html #content.signup .account_type a.maximum strong.price { margin-left: 0; } *+html #content.signup .account_type a.maximum.selected strong.price { margin-left: 0; } .signup_errors { background: #ECD0C3; border: 1px solid #B93012; margin: 0 0 20px; padding: 10px 15px; width: 828px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .signup_errors p { color: #B93012; font-size: 13px; font-weight: bold; margin: 3px 0 3px; } /* FIELDS */ #content.signup fieldset { float: left; padding: 10px 0 5px; width: 280px; } #content.signup fieldset label { color: #4E4E4E; font-size: 13px; } #content.signup fieldset label.error { color: #B93012; } #content.signup fieldset.required label { background: url(../images/front_end/req_icon.png) no-repeat right top; padding: 0 10px 0 0; } #content.signup fieldset input { border: 1px solid #ccc; color: #333; font-size: 14px; margin: 5px 0 0 0; padding: 5px; width: 255px; font-family: Arial, sans-serif; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #content.signup fieldset input:focus { border-color: #7AB427; } #content.signup fieldset input.error { border-color: #B93012; } #content.signup fieldset select { display: block; margin: 9px 0 6px; } #content.signup .note { color: #4D4D4D; font-size: 11px; margin: 0 0 0 0; position: absolute; right: 15px; top: 5px; } #content.signup .note img { padding: 0 0 2px 0; } #content.signup .col1 h3 { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; display: block; float: left; font-size: 16px; margin: 0 0 10px 0; padding: 0 0 15px; width: 547px; } #content.signup .col2 h3 { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; display: block; font-size: 16px; margin: 0 0 10px 0; padding: 0 0 15px; } #content.signup .col1 { position: relative; } #content.signup .step1 .col1 { float: left; overflow: hidden; width: 560px; } #content.signup .step1 .col2 { float: right; margin: 0 10px 0 0; width: 269px; } #content.signup .step1 .col2 fieldset input { width: 257px; } #content.signup .step1 .col2 fieldset.city { width: 143px; } #content.signup .step1 .col2 fieldset.city input { width: 120px; } #content.signup .step1 .col2 fieldset.state { width: 60px; } #content.signup .step1 .col2 fieldset.zip { width: 54px; } #content.signup .step1 .col2 fieldset.zip input { width: 54px; } #content.signup .step2 .heading1 { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; float: left; margin: 0 0 10px 0; position: relative; padding: 0 0 15px; width: 560px; } #content.signup .step2 .heading1 .note { right: 0px; } #content.signup .step2 .heading2 { color: #2C2C2C; float: right; margin: 0 10px 0 0; padding: 0 0 15px; width: 269px; } #content.signup .step2 .heading_column { float: left; width: 572px; } #content.signup .step2 .col1 { clear: both; float: left; width: 290px; } #content.signup .step2 .col2 { float: right; width: 280px; } #content.signup .step2 .col1 fieldset { width: 280px; } #content.signup .step2 .col1 input { width: 265px; } #content.signup .step2 .col1 fieldset.city { width: 140px; } #content.signup .step2 .col1 fieldset.city input { width: 114px; } #content.signup .step2 .col1 fieldset.state { width: 65px; } #content.signup .step2 .col1 fieldset.zip { width: 60px; } #content.signup .step2 .col1 fieldset.zip input { width: 60px; } #content.signup .step2 .col2 select { width: 266px; } #content.signup .step2 .col2 fieldset.exp { width: 160px; } #content.signup .step2 .col2 fieldset.exp select { display: static; float: left; margin-right: 20px; width: 60px; } #content.signup .step2 .col2 fieldset.cvp { width: 95px; } #content.signup .step2 .col2 fieldset.cvp input { width: 95px; } #content.signup .next { background: url(../images/front_end/signup_buttons_sprite.png) no-repeat 0 0; display: block; float: right; height: 42px; margin: 0 10px 0 0; width: 269px; text-indent: -9999px; } #content.signup .next:hover { background-position: 0 -43px; } #content.signup .next:active { background-position: 0 -86px; } #content.signup .payment { background: url(../images/front_end/signup_buttons_sprite.png) no-repeat -270px 0; border: none; display: block; float: right; height: 42px; margin: 0 10px 0 0; width: 269px; text-indent: -9999px; } #content.signup .payment:hover { background-position: -270px -43px; } #content.signup .payment:active { background-position: -270px -86px; } /* CART SUMMARY */ #content.signup .step2 .col3 h2 { font-size: 35px; margin: 3px 0 4px; } #content.signup .step2 .free, #content.signup .step2 .basic, #content.signup .step2 .premium, #content.signup .step2 .maximum { display: none; } #content.signup .step2 .col3 { background: #fff; border: 1px solid #CDCDCD; float: right; margin: -10px 10px 0 0; padding: 0; position: relative; width: 266px; z-index: 10; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #content.signup .step2 .col3 ul { display: none; list-style: none; list-style-image: none; padding: 0; } #content.signup .step2 .col3 li { border-bottom: 1px solid #CDCDCD; color: #5C5C5C; font-size: 13px; list-style: none; list-style-image: none; margin: 0 10px; padding: 18px 2px; text-align: center; } #content.signup .step2 .col3 li.cap { background: url(../images/front_end/pricing_sprite.png) repeat-x left -212px; border: none; height: 84px; margin: 0; padding: 1px; -moz-border-radius: 9px 9px 0 0; -webkit-border-radius: 9px 9px 0 0; border-radius: 9px 9px 0 0; } #content.signup .step2 .col3 li.cap .inner { background: url(../images/front_end/pricing_sprite.png) repeat-x left -298px; display: block; height: 73px; padding: 11px 0 0; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } #content.signup .step2 .col3 li.bottom { border: none; } #content.signup .step2 .col3 strong { font-size: 15px; font-weight: normal; } #content.signup .step2 .col3 strong.price { background: url(../images/front_end/signup_pricing_sprite.png) no-repeat left top; display: block; margin: 7px 0 7px 98px; text-indent: -99999px; } #content.signup .step2 .col3 small { font-size: 12px; } #content.signup .step2 .col3 .selected strong { color: #fff; } #content.signup .step2 .col3 .selected small { color: #fff; } #content.signup .step2 .col3 .plan_2 strong.price { background-position: 0 0; height: 20px; width: 65px; } #content.signup .step2 .col3 .plan_3 strong.price { background-position: 0 -32px; height: 25px; margin: 4px 0 4px 116px; width: 33px; } #content.signup .step2 .col3 .plan_4 strong.price { background-position: 0 -66px; height: 25px; margin: 4px 0 4px 107px; width: 65px; } #content.signup .step2 .col3 .plan_5 strong.price { background-position: 0 -100px; height: 25px; margin: 4px 0 4px 107px; width: 65px; } *+html #content.signup .step2 .col3 .plan_2 strong.price { margin-left: 0; } *+html #content.signup .step2 .col3 .plan_3 strong.price { margin-left: 0; } *+html #content.signup .step2 .col3 .plan_4 strong.price { margin-left: 0; } *+html #content.signup .step2 .col3 .plan_5 strong.price { margin-left: 0; } #content.signup .detail_info { float: left; margin: 40px 0 0 0; width: 555px; } #content.signup .detail_info p { color: #999; font-size: 11px; line-height: 15px; margin: 0 0 15px 0; } #content.signup .step3 h3 { border-bottom: 1px solid #E5E5E5; color: #2C2C2C; display: block; font-size: 16px; margin: 0 0 10px 0; padding: 0 0 15px; width: 857px; } #content.signup .step3 p { color: #666; font-size: 12px; line-height: 17px; margin: 0 0 15px 0; } #content.signup .thank_you_steps { list-style: none; list-style-image: none; padding: 0 100px 0 20px; } #content.signup .thank_you_steps li { list-style: none; list-style-image: none; margin: 0 0 25px; overflow: hidden; } #content.signup .thank_you_steps li div { color: #6CAB11; float: left; font-size: 34px; letter-spacing: 1px; margin: 0; } #content.signup .thank_you_steps li p.larger { font-size: 14px; line-height: 22px; margin: 14px 0 0 50px; } #content .sale_callout { background: #333 url(../images/sale_callout_bg.png) repeat-x left top; height: 90px; position: relative; } #content .sale_callout .badge { background: url(../images/sale_badge.png) no-repeat center; height: 118px; left: 20px; position: absolute; top: -14px; width: 118px; } #content .sale_callout p { color: #84BF2B; font-size: 16px; padding: 23px 0 0 150px; text-shadow: 0 -1px 0 #000; } #content .sale_callout p a { background: url(../images/sale_callout_arrow.png) no-repeat left center; color: #fff; margin: 0 0 0 10px; padding: 0 0 0 17px; } #content .sale_callout p strong { color: #fff; display: block; font-size: 23px; font-weight: normal; margin: 0 0 10px; } #content .sale_callout.sub { margin: 35px 0 15px -30px; width: 960px; } /* SUB FOOTER */ *+html #subfooter { margin: 30px 0 0; } #subfooter { background: url(../images/front_end/footer_sprite.png) repeat-x left top; clear: both; height: 180px; padding: 28px 0; } #subfooter .inner { margin: 0 auto; width: 980px; position: relative; } #subfooter h5 { color: #838383; font-size: 14px; letter-spacing: .05em; margin: 0 0 15px 17px; text-transform: uppercase; } #subfooter a.follow { background: url(../images/front_end/icons_sprite.png) no-repeat left -35px; clear: both; color: #838383; display: inline-block; font-size: 12px; line-height: 13px; margin: 0 0 0 17px; padding: 0 0 0 17px; } #subfooter a.follow:hover { text-decoration: underline; } #subfooter .tweet { background: url(../images/front_end/footer_sprite.png) repeat-x left -236px; float: left; height: 120px; margin: 0 4px 12px 17px; width: 300px; opacity: .75; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 10px #090909; -webkit-box-shadow: 0px 0px 10px #090909; box-shadow: 0px 0px 10px #090909; } #subfooter .tweet:hover { opacity: 1; -moz-box-shadow: 0px 0px 20px #000; -webkit-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; } #subfooter .tweet .inner { background: url(../images/front_end/footer_sprite.png) repeat-x left -356px; height: 91px; margin: 1px; padding: 12px 15px 15px 15px; width: 268px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #subfooter .tweet .icon { background: #C7C7C7; float: left; height: 42px; margin: 3px 13px 0 0; width: 42px; } #subfooter .tweet p { color: #C6C6C6; font-size: 12px; line-height: 18px; } #subfooter .tweet a { color: #C6C6C6; } #subfooter .tweet a:hover { color: #fff; } #subfooter .tweet .author { color: #9C9C9C; display: block; font-size: 11px; margin: 5px 0 0 0; } #subfooter .tweet .author a { color: #9C9C9C; } #subfooter .tweet .author a:hover { text-decoration: underline; } #subfooter .tweet_it { background: url(../images/tweet_it.png) no-repeat left top; bottom: -44px; color: #fff; display: block; font-size: 12px; height: 48px; padding: 10px 0 0 18px; position: absolute; right: 0; width: 281px; } /* FOOTER */ #footer { margin: 40px auto 0; overflow: hidden; width: 980px; } #footer_logo { background: url(../images/front_end/footer_logo.png) no-repeat left top; display: block; height: 38px; width: 178px; text-indent: -99999px; } #footer .column { color: #666; float: left; margin: 10px 20px 0 0; width: 120px; } #footer .column p { font-size: 11px; line-height: 14px; } #footer .column.wide { margin: 0 25px 0 0; width: 180px; } #footer .footer_nav { list-style: none; margin: 5px 0 0 0; } #footer .footer_nav li { float: left; margin: 0 10px 0 0; } #footer .footer_nav li a { color: #666; display: block; font-size: 12px; padding: 5px; text-transform: uppercase; } #footer .footer_nav li a:hover { color: #6CAB11; text-decoration: underline; } /* SMARTBOX */ #smartbox_cover { background: transparent; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 99; } #smartbox { background: #E8E8E8; color: #333; font-size: 12px; padding: 7px; position: absolute; z-index: 100; } #smartbox a { color: #666; display: inline-block; } #smartbox p { padding: 0; } #smartbox .inner { background: url('../images/front_end/loading.gif') no-repeat center; height: 100%; overflow: hidden; position: relative; width: 100%; z-index: 101; } #smartbox .inner img { left: 0; position: absolute; top: 0; z-index: 101; } #smartbox .inner .info { display: none; background: #E8E8E8; bottom: -1px; left: 0; position: absolute; width: 100%; z-index: 120; } #smartbox .caption { color: #000; line-height: 16px; margin: 10px 0 5px 5px; } #smartbox .pagination { float: right; line-height: 16px; margin: 10px 5px 5px 0; } #smartbox a.previous, #smartbox a.next { display: block; height: 100%; position: absolute; width: 100px; z-index: 110; text-indent: -99999px; } #smartbox a.previous { background: url(../images/front_end/prev.png) no-repeat left 75px; left: 0; top: 0; } #smartbox a.next { background: url(../images/front_end/next.png) no-repeat right 75px; right: 0; top: 0; } #smartbox .close { background: url(../images/front_end/close.png) no-repeat left top; display: block; height: 36px; font-size: 12px; left: -14px; position: absolute; top: -14px; width: 36px; text-indent: -99999px; z-index: 115; } #smartbox { box-shadow: 0 0 25px #666; -moz-box-shadow: 0 0 25px #666; -webkit-box-shadow: 0 0 25px #666; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #smartbox { left: 20px; top: 20px; } #smartbox img { border: 0; padding: 0; width: 100%; } /* WELCOME BLOCKS */ .welcome_block { clear: both; margin: 35px 0 0 0; min-height: 190px; overflow:; width: 900px; } .welcome_block h5 { border-bottom: 1px solid #E5E5E5; color: #6CAB11; font-size: 13px; font-weight: normal; margin: 0 0 15px; padding: 0 0 10px; } .welcome_block img { border: 1px solid #E5E5E5; float: right; } .welcome_block textarea { border: 1px solid #E5E5E5; float: right; height: 113px; padding: 6px; width: 315px; } .welcome_block div { float: left; width: 550px; } .welcome_block h3 { color: #000; font-size: 18px; } .welcome_block h3 span { color: #999; } .welcome_block p { padding: 10px 0 0; } .welcome_block .bookmark { padding: 20px 0 0 0; position: relative; height: auto; } .welcome_block .bookmark img { border: none; margin: 0 0 0 10px; position: relative; z-index: 1001; } .welcome_block .bookmark .arrow { background: url(../images/front_end/install_arrow.png) no-repeat left top; display: none; height: 511px; left: -29px; position: absolute; bottom: -5px; width: 234px; z-index: 1000; } .welcome_block a img { float: none; } .welcome_block p.note { color: #9D9D9D; font-size: 11px; } /* Active Projects */ .active_projects { margin: 25px 0 0 0; padding: 0; } .active_projects li { padding: 5px 0; border-bottom: 1px solid #EEE; margin: 0; list-style: none; } .active_projects li.last { border-bottom: 0; } .active_projects li a { -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 8px 8px 8px 35px; display: block; overflow: hidden; background: #FFF url(../images/bullet-active-projects.png) no-repeat 15px 11px; } .active_projects li a:hover { background-color: #EEE; text-decoration: none !important; } .active_projects li img { float: right; padding: 2px 0; } .active_projects li strong { display: block; font-size: 18px; color: #2C2C2C; } .active_projects li small { font-size: 13px; margin: 5px 0 0 0; color: #999; display: block; }