form, div, h1, h2, h3, h4, h5, p, fieldset, body, ul {margin: 0; padding: 0}
* {font-family: Arial; font-size: small}
body {background: #fff url(/images/small_gradient.png) top left repeat-x}
a {color: #0066CC; padding: 2px}
a:hover {background: #ff8}
#center a {font: normal 12px arial; padding: 0}
#right p.error {background: #fcc; border-left: solid 3px #f00; margin: 2px 10px; padding: 3px 5px; color: #f00; font-weight: bold}
.clear-fix {clear: both}
#topNav {margin: 0 auto 15px 0; text-align: center; position: relative}
#topNav, #topNav a {font: normal 10px verdana}
#topNav {color: #666}
#topNav a {font-weight: normal}
#counter {position: absolute; top: 0; right: 0; color: #888; font: normal 11px arial}
#counter strong {color: #666; font: bold 11px arial}
#main {width: 760px; margin: 0 auto; padding: 10px 0}
#banner {height: 150px; margin-bottom: 25px; clear: both}
html {height: 100%}
body {height: 100%}
#wrapper {min-height: 100%}
#main {padding-bottom: 35px}
#footer {position: relative; border-top: dotted 1px #aaa; margin: -22px auto 4px auto; font: normal 11px arial; padding-top: 3px; width: 740px}
#footer a {font: normal 11px arial}
#footer #external-links {float: right}
#footer #external-links a {padding-left: 20px; background-position: 1px 50%; background-repeat: no-repeat}
#digg-link {background-image: url(/images/icons/digg.gif)}
#delicious-link {background-image: url(/images/icons/delicious.gif)}
h1 {color: #000; background: url(/images/logo_large.gif) top left no-repeat; width: 150px; height: 150px; margin-left: 20px; text-indent: -4000px; float: left}
h2 {font-size: 36px; color: #ff0099; float: left; width: 500px}
h2.row-1 {padding: 55px 0 0 20px}
h2.row-2 {padding: 35px 0 0 20px}
h3 {font-size: 20px; color: #0066CC; margin-bottom: 2px}
h3 .brand, h3 .brand strong {font-size: 18px}
h4 {font-size: 16px; color: #0066CC; margin-bottom: 0px}
h4 .brand, h4 .brand strong {font-size: 16px}
h5 {color: #0066CC; font-size: 14px; margin: 10px 0 5px 0}
strong {background: #ffc; padding: 0 2px}
em {font-weight: bold; font-style: normal}
#center p, #center li {line-height: 18px; font: normal 12px arial; color: #555; margin: 8px 0}
#center li {margin: 8px 15px}
#left ul {padding: 0 10px; list-style: none}
#left li {background: url(/images/icons/bullet_blue.gif) 0 3px no-repeat; padding: 2px 2px 2px 18px; font-size: 13px; font-family: Arial, Trebuchet MS, Arial; color: #000}
.brand {font-weight: normal; text-transform: uppercase}
.brand strong {background-color: transparent; padding: 0; font-weight: bold}
#left {width: 475px; float: left; padding: 0 10px}
#center {padding: 0 20px}
#right {float: right; width: 250px}
.step {border-top: solid 1px #ddd; border-left: solid 1px #ddd; border-bottom: solid 1px #bbb; border-right: solid 1px #bbb; background: #fff url(/images/gray-gradient.png) 0 -30px repeat-x}
.step {margin: 0 0 10px 0px; position: relative}
.step, a.screenshot, a.screenshot:hover {height: 110px}
.step h4 {font: normal 26px 'arial narrow'; letter-spacing: -1px; padding: 7px 10px 0 10px; color: #666; line-height: 30px; position: absolute; left: 0; text-transform: uppercase}
#left h3 {display: none}
.step a {padding: 0; font: bold 12px arial}
.step .step-content {position: absolute; top: 40px; left: 20px; width: 270px}
.step .step-content p {margin: 0 0; color: #666; font: normal 12px arial}
.step .step-content p em {font-weight: bold; color: #888}
a.screenshot, a.screenshot:hover {display: block; background-repeat: no-repeat; opacity: 0.6; background-color: transparent; margin-left: 300px}
a.screenshot:hover {opacity: 1.0}
#screenshot-1 {background-image: url(/images/screenshots/add_task.png); background-position: 15px -160px}
#screenshot-2 {background-image: url(/images/screenshots/slimtimer.png); background-position: 15px -15px}
#screenshot-3 {background: url(/images/screenshots/report.png) 0 0 no-repeat}
#screenshot-4 {background: url(/images/screenshots/screencast.png) 0 0 no-repeat}
#screenshot-3, #screenshot-4 {margin-top: 10px; height: 100px}
#coming-soon {font: normal 10px arial; color: #888; text-transform: uppercase}
#warning {background: #f99; margin-bottom: 5px}
#warning .content {padding: 3px 10px}
#errorExplanation {background: #fcc; margin-bottom: 10px; margin-top: 5px}
#errorExplanation h2 {padding: 0 5px 3px 5px; color: #000; background: #f66}
#errorExplanation ul {margin-top: 5px; padding-bottom: 10px; padding-left: 30px; margin-left: 0}
#errorExplanation p {font-size: 12px; padding: 2px 5px}
#errorExplanation ul li {font-size: 11px}
.fieldWithErrors input {border: solid 2px #f00}
#lightbox{ display:none; position: absolute; top:50%; left:50%; z-index:9999; width:500px; height:400px; margin:-220px 0 0 -250px; border:1px solid #fff; background:#FDFCE9; text-align:left}
#lightbox[id]{ position:fixed}
#overlay{ display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:5000; background-color:#000; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80)}
#overlay[id]{ position:fixed}
#lightbox.done #lbLoadMessage{ display:none}
#lightbox.done #lbContent{ display:block}
#lightbox.loading #lbContent{ display:none}
#lightbox.loading #lbLoadMessage{ display:block}
#lightbox.done img{ width:100%; height:100%}
#loginContainer {margin: 0 auto 10px auto; background: #CCE6FF; width: 250px}
.signup-form {margin: 0 auto; background-color: #DAFFCD; margin-bottom: 15px; width: 250px}
.waiting-list-form {background-color: #ffffcc}
#signupHeader p, .signup-form p {padding: 0 10px 5px 10px; color: #555}
.signup-form p.help {padding: 0; font: normal 11px arial; color: #666}
.signup-form p.help strong {font: bold 11px arial}
#loginContainer fieldset, #signupContainer fieldset, .signup-form fieldset {border: none; margin: 0; padding: 0}
#loginContainer legend, #signupContainer legend, .signup-form legend {display: none}
#loginHeader h3, .signup-form h3 {font: bold 18px arial, sans-serif; padding: 0 5px; letter-spacing: 0; margin: 0}
#loginHeader h3 {color: #fff; margin-top: -2px}
.signup-form h3 {color: #1F7F00}
.waiting-list-form h3 {color: #ff9900}
#loginHeader {background-color: #0099FF; width: 250px; margin: 0 auto; padding-bottom: 2px}
.signup-form {background-color: #DAFFCD; width: 250px; margin: 0 auto}
.waiting-list-form {background-color: #ffc}
#loginContainer input.submit, .signup-form input.submit {font: bold 16px arial, sans-serif; margin-top: 2px}
#loginContainer input.submit {font-size: 14px}
#loginContainer input.text-input, .signup-form input.text-input, select {font: bold 14px arial, sans-serif; width: 95%}
#loginContainer a {font-size: 14px; font-weight: bold}
label {font: bold 11px verdana; display: block; color: #444; padding-top: 2px}
p.checkbox-container {margin-top: 3px; font: normal 11px verdana; padding-left: 16px; position: relative; color: #444}
p.checkbox-container input {position: absolute; margin: 0; top: 0; left: 0}
#loginContainer form, #signupContainer form, .signup-form form {display: block; padding: 0 10px}
#errorExplanation {background: #fcc; margin: 0 10px 5px 10px; width: 225px; padding: 0}
#errorExplanation h2 {font-size: 12px; display: inline; width: 215px; color: #000; background: #f66; margin: 0; padding: 2px 5px}
#errorExplanation ul {margin-top: 2px; padding-bottom: 5px; padding-left: 20px; margin-left: 0}
#errorExplanation p {font-size: 12px; padding: 2px 5px}
#errorExplanation ul li {font-size: 12px}