/* Normalizing Browser styles - this particular method based on * Andy Clarke's method used in his book "Transcending CSS" ***************************************************************/ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; clear: both; } ol, ul { list-style-type: none; margin: 0; padding: 0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } caption, th { text-align: left; } q:before, q:after { content: ''; } em { font-style: italic; } /**************************************************************/ /* General Classes and ID Selectors ************************************/ #skip-to-content { text-indent: -9999em; display: block; height: 0; visibility: hidden; } .clear { display: block; height: 0; visibility: hidden; clear: both; } .text-replace { text-indent: -9999em; } a.text-replace { overflow: hidden; } .safe-hide { display: block; height: 0; visibility: hidden; } .block-center { display: block; margin: 0 auto; } a { outline: none; } p a:link, p a:visited { color: #f00; font-weight: bold; } h2 a:link, h2 a:visited { color: #f00; text-decoration: none; } .error { color: red; } .error .errors { font-weight: bold; } .notice { color: blue; } /* Tag Definitions **********************/ html { font-size: 62.5%; background-color: #877c76; } body { position: relative; background: url('/images/interface/main_bg.png') left top repeat-x; } #container { position: relative; width: 930px; margin: 0 auto; font: normal 1.2em Helvetica, Arial, sans-serif; } /* header **********************/ #header { position: relative; width: 900px; height: 108px; margin: 0 auto; top: 18px; background: url('/images/interface/header_bg.png') left top no-repeat; } #header h1 a { position: absolute; display: block; bottom: -16px; left: 30px; width: 181px; height: 80px; background: url('/images/interface/logo.png') left top no-repeat; } #header h2 { font: normal 1.5em Georgia, "Times New Roman", serif; position: absolute; top: 23px; right: 33px; color: #e18a8a; } /* Main Navigation **********************/ #nav { position: absolute; top: 75px; right: 37px; width: 610px; z-index: 2; } #nav ul li a { display: block; width: 116px; height: 19px; padding-top: 14px; margin-left: 4px; float: left; background: url('/images/interface/nav_matrix.png') left top no-repeat; text-align: center; text-decoration: none; font: bold 1.5em Helvetica, Arial, sans-serif; } #nav ul li a:link, #nav ul li a:visited { color: #fff; } #nav ul li a:hover, #nav ul li a:active, #nav ul li a.current { color: #c00000; background-position: left bottom; padding-top: 10px; height: 23px; } /* Left Sub-Nav **********************/ #sidenav { background: url('/images/interface/sidenav_bg.png') left top no-repeat; min-height: 123px; padding: 15px 25px 15px 10px; margin-bottom: 15px; } #sidenav h5 { background: #a59c98; text-transform: uppercase; color: #fff; font-weight: bold; font-size: 11px; padding: 3px 3px 0 10px; margin-bottom: 7px; } #sidenav a { color: #716761; font-weight: bold; text-decoration: none; } #sidenav > ul > li { font-size: 1.2em; } #sidenav > ul > li.selected { background: url('/images/interface/sidenav_bullet.gif') 0 3px no-repeat; } #sidenav > ul > li > ul > li { font-size: .9em; } #sidenav > ul > li > ul > li.selected { background: url('/images/interface/sidenav_bullet.gif') 0 2px no-repeat; } #sidenav > ul > li > ul > li > ul > li { font-size: .9em; } #sidenav li { margin: 4px 0 4px 0; padding: 0 0 0px 10px; } #sidenav li > ul { display: none; } #sidenav li.selected { background: url('/images/interface/sidenav_bullet.gif') 0 1px no-repeat; } #sidenav li.selected > a { color: red; } #sidenav li.selected > ul { display: block; } /* Content **********************/ #content { background: #716761 url('/images/interface/content_bg.png') center top repeat-y; width: 840px; padding: 75px 45px 20px; margin: 0 auto; } #content h2 { color: #f00; font: bold 1.8em 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-bottom: 10px; } #content h3 { background: url('/images/interface/content_h3_bg.png') left top no-repeat; padding: 10px 10px 0 15px; color: #716761; font: bold 1.4em 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 30px 0 10px 0; } #content p { margin-bottom: 20px; font-size: 1.1em; line-height: 1.4em; } #content strong { font-weight: bold; } #content p.continue-hook { margin-top: 40px; } #content .h3-text p { margin: 0 15px 20px 15px; } #content .highlight { background-color: #FFED82;} #content #main { float: right; width: 600px; margin-left: 5px; } #content #main ul { list-style-type: disc; font-size: 1.1em; line-height: 1.3em; margin-bottom: 30px; } #content #main li { margin: 10px 50px 10px 50px; } #sidebar { float: right; background: url('/images/interface/sidebar_bg.png') left top no-repeat; width: 155px; margin-left: 20px; padding: 15px; } #sidebar h4 { color: #716761; font: bold 1.0em 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-bottom: 5px; text-transform: uppercase; } #sidebar p { font-size: 1.0em; } /* Sub Content **********************/ #sub { float: left; width: 225px; margin-right: 5px; margin-top: -10px; } #sub-nav li { margin-bottom: 10px; } #sub-nav a { display: block; text-indent: -9999em; height: 69px; width: 209px; background-position: left top; background-repeat: no-repeat; } #sub-nav a#ql-backdrop-home { background-image: url('/images/interface/ql_backdrop_home.png'); width: 220px; } #sub-nav a#ql-backdrop { background-image: url('/images/interface/ql_backdrop.png'); width: 220px; } #sub-nav a#ql-mailing-list { background-image: url('/images/interface/ql_mailing_list.png'); } #sub-nav a#ql-start-your-free-trial { background-image: url('/images/interface/ql_start_your_free_trial.png'); } /* Footer **********************/ #footer { text-align: center; margin-bottom: 20px; padding: 25px 0 40px; background: #716761 url('/images/interface/content_cap_bg.png') center top no-repeat; color: #c8bdb2; font-size: 0.9em; } #footer-nav { margin: 10px 0; font-size: 1.2em; } #footer-nav li { display: inline; text-transform: lowercase; } #footer-nav li a { margin: 0 4px; } #footer-nav li a:link, #footer-nav li a:visited { color: #c8bdb2; font-weight: normal; } /* Home Page **********************/ #features { margin-bottom: 20px; position: relative; height: 264px; } #features-header { width: 600px; height: 43px; background: url('/images/interface/features_header_bg.png') left top no-repeat; } #features-header h2 { line-height: 43px; font-size: 1.3em; color: #fff; margin-left: 25px; } #features-header h2 span { font-size: 120%; } #features ul#features-list { width: 600px; position: relative; list-style-type: none; margin: 0; padding: 0; } #features ul#features-list li { width: 600px; height: 221px; margin: 0; background: url('/images/interface/feature_bg.png') left top no-repeat; position: absolute; } ul#features-list li div { display: block; width: 550px; height: 181px; padding: 15px 25px 25px; background-position: right bottom; background-repeat: no-repeat; cursor: pointer; } ul#features-list h2 { color: #f00; font: bold 2.5em 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-bottom: 10px; } ul#features-list p { color: #808080; margin: 0 0 10px 0; width: 225px; text-align: left; line-height: 1.5; } ul#features-list a { color: #f00; display: block; text-align: right; } #feature-reduce-errors div { background-image: url('/images/interface/feature_reduce_errors.png'); } #feature-save-time div { background-image: url('/images/interface/feature_save_time.png'); } #feature-grow-your-business div { background-image: url('/images/interface/feature_grow_your_business.png'); } #features-navigator { position: absolute; width: 40px; right: 20px; top: 18px; } #features-navigator a { float: left; overflow: hidden; margin-right: 4px; display: block; text-indent: -9999em; width: 7px; height: 7px; border: solid 1px #ecb3b3; } #features-navigator li { display: inline; } #features-navigator li.selected a { background-color: #ecb3b3; } #latest-discussions { background: url('/images/interface/talk_bubbles.png') left top no-repeat; padding-left: 110px; width: 270px; float: left; } #latest-discussions h2 { font-weight: bold; font-size: 1.2em; text-transform: uppercase; line-height: 2; } #latest-discussions div#gsfn_list_widget { font-size: 12px; width: 300px; padding: 0px; margin: 0; border-width: 0; } #quotes { float: right; color: #be0000; width: 200px; font-family: Georgia, "Times New Roman", serif; font-style: italic; } #quotes q { font-size: 2.1em; } #quotes p.source { font-size: 1.2em; } /* Products > Backdrop **********************/ #content #main #backdrop-large-buttons ul { list-style-type: none; } #content #main #backdrop-large-buttons li { margin: 0; } #backdrop-large-buttons a { display: block; float: left; text-indent: -9999em; height: 150px; width: 194px; background-position: left top; background-repeat: no-repeat; } #backdrop-large-buttons a#bdlb-benefits { background-image: url('/images/interface/btn_benefits.gif'); margin-right: 9px; } #backdrop-large-buttons a#bdlb-tour { background-image: url('/images/interface/btn_tour2.gif'); margin-right: 9px; } #backdrop-large-buttons a#bdlb-start-trial { background-image: url('/images/interface/btn_start_trial.gif'); } /* Products > Backdrop > Benefits **********************/ #benefits-section-save-time, #benefits-section-reduce-errors, #benefits-section-grow-your-business { float: left; width: 194px; background: no-repeat top left; margin-right: 9px; cursor: pointer; } #benefits-section-save-time h3, #benefits-section-reduce-errors h3, #benefits-section-grow-your-business h3 { background: none; padding: 140px 10px 0 10px; color: #ff0000; } #benefits-section-save-time p, #benefits-section-reduce-errors p, #benefits-section-grow-your-business p { margin: 0 10px 20px 10px; } #benefits-section-save-time { background-image: url('/images/interface/graphic_save_time.jpg'); } #benefits-section-reduce-errors { background-image: url('/images/interface/graphic_reduce_errors.jpg'); } #benefits-section-grow-your-business { background-image: url('/images/interface/graphic_grow_your_business.jpg'); margin-right: 0; } /* Products > Backdrop > Plans **********************/ #plan-features-pricing { margin: 0; width: 600px; } #plan-features-pricing tr { border-bottom: 1px solid #B4A597; } #plan-features-pricing th { background: url('/images/interface/pricing_table_header.gif') repeat-x bottom left; color: white; font-weight: bold; height: 55px; vertical-align: bottom; text-align: center; padding-bottom: 5px; } #plan-features-pricing th { width: 70px; } #plan-features-pricing th.label { width: 160px; } #plan-features-pricing td { width: 70px; vertical-align: middle; text-align: center; padding: 6px 0 2px 3px; } #plan-features-pricing td.label { width: 160px; background-color: #504844; color: white; text-align: left; height: 30px; text-align:right; padding-right: 15px; } #plan-features-pricing td.dark { background-color: #2d2828; } #plan-features-pricing th, #plan-features-pricing strong { font-weight: bold; } #plan-fine-print { font-size: 0.9em; margin: 2px 0 20px 0; } /* Products > Backdrop > Tour **********************/ #tour-top-nav, #tour-bottom-nav { line-height: 60px; } #tour-top-nav *, #tour-bottom-nav * { vertical-align: middle; } #tour-top-nav img, #tour-bottom-nav img { margin-right: 1px; display: inline; } #tour-top-nav a, #tour-bottom-nav a { margin: 0; display: inline; } /* About > Management **********************/ #management-team h3.name { margin-bottom: .1em; } #management-team div.title { font-style: italic; margin: 3px 0 10px 15px; } /* Forms **********************/ .mailform { font-size: 11px; color: #8E8277; text-transform: uppercase; width: 392px; } .mailform .textfield { font-size: 1.1em; width: 390px; color: #000000; text-decoration: none; text-indent: 0; background-color: #ebe7e3; border: solid 1px #c5bcb3; margin-bottom: 10px; text-transform: none; } .mailform .formbutton { margin: 0; font-size: 1.2em; color: #ffffff; text-decoration: none; padding: 5px; background-color: #877B71; } /* Satisfaction widget **********************/ div#gsfn_search_widget img { border: none; } div#gsfn_search_widget { font-size: 12px; width: 400px; border: 6px solid #DDD; padding: 10px; margin: 10px 0; } div#gsfn_search_widget a.widget_title { color: #000; display: block; margin-bottom: 10px; font-weight: bold; } div#gsfn_search_widget .powered_by { margin-top: 8px; padding-top: 8px; border-top: 1px solid #DDD; } div#gsfn_search_widget .powered_by a { color: #333; font-size: 90%; } div#gsfn_search_widget form { margin-bottom: 8px; } div#gsfn_search_widget form label { margin-bottom: 5px; display: block; } div#gsfn_search_widget form #gsfn_search_query { width: 70%; } div#gsfn_search_widget div.gsfn_content { } div#gsfn_search_widget div.gsfn_content li { text-align:left; margin-bottom:6px; } div#gsfn_search_widget div.gsfn_content a.gsfn_link { line-height: 1; } div#gsfn_search_widget div.gsfn_content span.time { font-size: 90%; padding-left: 3px; } div#gsfn_search_widget div.gsfn_content p.gsfn_summary { margin-top: 2px } div#gsfn_list_widget img { border: none; } div#gsfn_list_widget { font-size: 12px; width: 400px; border: 6px solid #DDD; padding: 10px; margin: 10px 0; } div#gsfn_list_widget a.widget_title { color: #000; display: block; margin-bottom: 10px; font-weight: bold; } div#gsfn_list_widget .powered_by { margin-top: 8px; padding-top: 8px; border-top: 1px solid #DDD; } div#gsfn_list_widget .powered_by a { color: #333; font-size: 90%; } div#gsfn_list_widget div#gsfn_content { } div#gsfn_list_widget div#gsfn_content ul { list-style-type: none; } div#gsfn_list_widget div#gsfn_content li { text-align: left; margin: 0 0 6px 0; } div#gsfn_list_widget div#gsfn_content a { line-height: 1; } div#gsfn_list_widget div#gsfn_content a:link, div#gsfn_list_widget div#gsfn_content a:visited { color: #f00; font-weight: bold; } div#gsfn_list_widget div#gsfn_content span.time { font-size: 90%; padding-left: 3px; } div#gsfn_list_widget div#gsfn_content p.gsfn_summary { margin-top: 2px }