/* Are My Sites Up? By: Richard Felix & Chris Coyier */ /* RESET, BASICS, and TOOLBOX */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 12px Helvetica, Sans-Serif; min-width: 700px; background: #414141; } table { border-collapse: collapse; width: 100%; } .clear { clear: both; } .button, #main-content .button { background: #828282 url(images/button-bg.png) repeat-x; padding: 9px 12px 6px 12px; border: 1px solid #222; color: white; font-size: 15px; font-weight: bold; letter-spacing: -1px; } #main-content .button:hover { background: white; color: #222; text-decoration: none; } /* BASIC TYPOGRAPHY */ a { text-decoration: none; outline: none; color: #222; } a:hover, #homeabouthome #main-content a { text-decoration: underline; } p { margin: 0 0 15px 0; line-height: 15px; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font: 18px Georgia, Serif; } h1, h2 { margin: 0 0 10px 0; } h3 { margin: 0 0 5px 0; } a img { border: none; } .add { padding: 5px 0 5px 32px; background: url(images/add.png) left center no-repeat; } .reg-list { margin: 0 0 15px 20px; } /* BASIC LAYOUT */ #page-wrap { width: 672px; margin: 0 auto; padding-bottom: 20px; position: relative; } #main-wrap { position: relative; background: url(images/main-bg.png) repeat-y; } #main-wrap #main-wrap-inside { background: url(images/main-top-bg.png) no-repeat; } #main-wrap-bottom { background: url(images/main-bottom-bg.png) no-repeat; height: 17px; } #main-content { width: 465px; padding: 16px 21px; float: left; position: relative; } .login-area { padding: 18px 0 0 0; text-align: right; color: #eee; } .login-area a { color: white; padding: 4px 6px; background: #666; margin-left: 10px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .login-area a:hover { background: #111; text-decoration: none; } /* HEADER */ #header { background: url(images/header-bg.png) repeat-x; height: 89px; } #header-inside { width: 672px; margin: 0 auto; position: relative; } h1#logo { position: absolute; top: 0px; left: -3px; } h1#logo a { display: block; width: 254px; height: 46px; text-indent: -9999px; background: url(images/logov2.png) no-repeat; } /* NAVIGATION */ #main-nav { position: absolute; top: -8px; left: 0px; width: 100%; } #main-nav ul { position: absolute; bottom: 0px; left: 0px; width: 100%; } #main-nav ul li { display: inline; } #main-nav ul li a { padding: 8px 22px; color: black; font-weight: bold; font-size: 16px; letter-spacing: -1px; margin: 0 4px 0 0; background: white url(images/nav-off-bg.png) bottom left repeat-x; } #main-nav ul li.upgrade a { color: #2651CC; } #homesites #main-nav ul li.mysites a, #homesiteshome #main-nav ul li.mysites a, #homesettingshome #main-nav ul li.settings a, #homesettings #main-nav ul li.settings a, #blog #main-nav ul li.blog a, #homepremiumhome #main-nav ul li.upgrade a { background: white; } /* CONTENT */ #main-content a { color: #2651CC; } #site-list { list-style: none; } #site-list thead { display: none; } #site-list li { text-indent: 25px; font-weight: bold; font-size: 15px; letter-spacing: -1px; } #site-list li a { color: #222; display: block; padding: 8px; } #site-list li a:hover { text-decoration: underline; } #site-list li.up { background: url(images/up.png) 5px 50% no-repeat; } #site-list li.up:hover { background-color: #eee; } #site-list li.down { background: #ffd3d3 url(images/down.png) 5px 50% no-repeat; } #site-list { width: 100%; } #site-list td { padding: 3px; border-bottom: 1px solid #999; background-color: white; font-weight: bold; font-size: 15px; letter-spacing: -1px; } #site-list tr.down-row td { background: #ffd6d6; } #site-list tr.error-row td { background: #fff8c6; } #site-list tr.timeout-row td { background: #c6cbff; } td.edit-cell, td.delete-cell { width: 28px; text-align: center; } td.edit-cell a { display: block; width: 24px; height: 24px; text-indent: -9999px; background: url(/images/edit.png); } td.delete-cell a { display: block; width: 24px; height: 24px; text-indent: -9999px; background: url(/images/delete.png); } td.status { width: 22px; } td.email-cell { width: 28px; } form fieldset { border: 1px solid #ccc; padding: 15px; } form fieldset legend { padding: 2px 6px; border: 1px solid #ccc; } form label { width: 120px; background: #666; padding: 2px 6px; color: white; font: bold 12px Helvetica, Sans-Serif; } form input, select { margin: 0 0 10px 0; } form input[type="text"], form input[type="password"] { font: bold 16px Helvetica, Sans-Serif; letter-spacing: -1px; padding: 5px; color: #222; border: 2px solid #666; } label.email-label { font-size: 12px; font-weight: normal; letter-spacing: 0px; } input#site_enabled, input#remember_me, input#user_email_enabled, input#user_timeouts_enabled { position: relative; left: 5px; top: 3px; } .message, .errorExplanation { padding: 10px; background: #ccc; border: 1px solid #222; margin: 0 0 10px 0; position: relative; z-index: 8500; } .errorExplanation ul { margin: 0 0 0 20px; } #main-content ol { margin-left: 30px; } #main-content ol li { margin: 0 0 10px 0; } #key { border: 1px solid #ccc; margin: 15px 0; } #key td { width: 25%; vertical-align: top; padding: 4px 10px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .whiteout { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; padding: 25px; background: white url(/images/ajax-loader.gif) 25px 50px no-repeat; z-index: 9000; } /* SIDEBAR */ #sidebar { width: 136px; float: right; margin: 33px 0 0 0; padding: 0 0 10px 0; } #sidebar a img { display: block; opacity: 0.8; } #sidebar a img:hover { opacity: 1.0; } /* FLAIR */ #whatisthis { width: 215px; float: right; background: url(/images/whatisthis.png) no-repeat; padding: 50px 15px 0; } #abe-wave-sidebar { position: absolute; right: -21px; top: -20px; } /* SETTINGS */ h2.setting-title { color: #222; font-weight: normal; font-size: 18px; border-bottom: 1px solid #ccc; } .setting-box { padding: 10px; margin: 0 0 25px 0; background: #eee; } /* PREMIUM */ body.premium #main-wrap, body#homepremiumhome #main-wrap, body#homesignuphome #main-wrap, body#homesignup #main-wrap, body#homeusers #main-wrap { width: 670px; background: white; } body.premium #main-wrap #main-wrap-inside, body#homepremiumhome #main-wrap #main-wrap-inside, body#homesignuphome #main-wrap #main-wrap-inside, body#homesignup #main-wrap #main-wrap-inside, body#homeusers #main-wrap #main-wrap-inside { background: none; } body.premium #main-content, body#homepremiumhome #main-content, body#homesignuphome #main-content, body#homesignup #main-content, body#homeusers #main-content { width: 630px; padding: 16px 21px; position: relative; } .feature { overflow: auto; } .feature img { float: left; margin: 0 10px 10px 0; } .about-feature { padding-left: 60px; } #premTitle { width: 465px; height: 85px; text-indent: -9999px; background: url(/images/premiumservice.png) no-repeat; } #premTitleSpecial { width: 465px; height: 85px; text-indent: -9999px; background: url(/images/premium-special.png) no-repeat; } #rss-tab { position: absolute; top: -28px; right: 8px; } #upgrade-box { height: 158px; position: relative; background: url(images/upgrade-box.png) no-repeat; } #upgrade-box-special { height: 158px; position: relative; background: url(images/upgrade-box-special.png) no-repeat; } #yearly-button { position: absolute; top: 69px; left: 34px; } #monthly-button { position: absolute; top: 69px; left: 304px; } #need-login-left { position: absolute; left: 0; top: 70px; width: 192px; text-align: center; line-height: 1.5; } #need-login-right { position: absolute; left: 274px; top: 70px; width: 192px; text-align: center; line-height: 1.4; } #prem-table { width: 100%; border-collapse: collapse; margin: 10px 0 0 0; } #prem-table td, #prem-table th { vertical-align: top; padding: 4px; } #prem-table th { font: 16px Georgia, Serif; } #prem-table td { border-bottom: 1px solid #ccc; } #prem-table td p { margin: 0; line-height: 1.2; font-size: 11px; color: #666; } #prem-table .prem { background: #eee; border-left: 1px solid #ccc; } #prem-table .prempro { background: #dbefaf; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } #prem-table .premplus { background: #fffbd0; border-left: 1px solid #ccc; } #prem-table .freeplan { border-left: 1px solid #ccc; } #prem-table .prem, #prem-table .prempro, #prem-table .premplus, #prem-table .freeplan { text-align: center; vertical-align: middle; width: 70px; } #prem-table td.iconrow { padding-left: 0px; } #prem-table .numsites, #prem-table .yearlycost { font: italic 18px/1.4 Georgia, Serif; } #prem-table .yearlycost { padding: 0 0 10px 0px; } #prem-table .yearlycost span { font-size: 12px; } #prem-table .button { font-size: 13px; padding: 4px 3px; } #prem-table .yourplan { background: #e0e4eb; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .upgrade-button { background: url(/images/upgrade-button.png); display: block; width: 80px; height: 50px; text-indent: -9999px; } /* SITE CHECKER */ #siteup { background: #c9f8c7 url(/images/accepted_48.png) 10px 50% no-repeat; border: 5px solid green; padding: 10px 10px 0 70px; margin: 0 0 15px 0; } #sitedown { background: #f8c7c7 url(/images/cancel_48.png) 10px 50% no-repeat; border: 5px solid red; padding: 10px 10px 0 70px; margin: 0 0 15px 0; } #sitename { width: 340px; padding: 6px; font-size: 18px; } #checknow { background: #666; color: white; border: none; font: bold 16px Helvetica; height: 33px; width: 104px; text-align: center; } #checknow:hover { background: #ccc; } label.error { background: none; color: red; display: block; width: 100%; font-style: italic; font-weight: normal; padding: 0; } #homesiteshomenew label.error { display: inline !important; padding-left: 4px; } /* MC */ table#ms { width: 100%; overflow: auto; } table#ms td { border: 1px solid #eee; padding: 10px; font-size: 14px; vertical-align: top; } /* SIGNUP */ .radio-option input[type="radio"] { margin: 0; } .radio-option { padding: 6px 0 6px 10px; } .radio-option label { background: none; color: #515151; font-size: 15px; } #signup-2-wrap { background: url(/images/signup-2-background.png) no-repeat; margin-top: -1px; /* for OPERA */ } .radio-standard { background: #eee; width: 540px; } .radio-plus { background: #fffbd0; width: 462px; } .radio-pro { background: #dbefaf; width: 383px; } .keyword-callout { font-weight: bold; } /* AFFILIATE */ #earnings-table { width: 77%; border-color: #ccc; } #earnings-table th { font: bold 13px "Helvetica Neue", Helvetica, Sans-Serif; text-align: left; padding: 4px 0; } #earnings-table td { font: bold 20px "Helvetica Neue", Helvetica, Sans-Serif; padding: 4px 0; } .bucks { color: #3a8530; } #new_affiliate { width: 272px; float: left; background: #e5ffe2; padding: 10px; margin-right: 15px; } #aff-link { width: 445px; text-align: center; font: bold 16px Helvetica, Sans-Serif; padding: 10px; height: 17px; margin: 0 0 20px 0; } .code-selector label { display: block; width: 120px; float: left; } .code-selector select { border: 1px solid #ccc; } .code-selector option { padding: 0 12px; } .code-selector textarea { border: 1px solid #ccc; padding: 10px; width: 281px; height: 80px; } #aff-summary td { padding: 5px 15px; } #aff-summary td.num { font: bold 20px Helvetica, Sans-Serif; } .example-area { background: white; padding: 10px; text-align: center; margin: 6px 0; } .example-area img { max-width: 415px; } .delete-aff { display: block; width: 16px; height 16px; text-indent: -9999px; background: url(/images/delete-aff.png) no-repeat; } .edit-aff { display: block; width: 16px; height 16px; text-indent: -9999px; background: url(/images/pencil.png) no-repeat; } #table-area { background: url(/images/money-abe.png) right center no-repeat; margin-bottom: 15px; } /* ADMIN */ #admin-links { position: absolute; top: 0px; right: -180px; width: 150px; padding: 10px; background: #e8d683; } #admin-links a { display: block; padding: 3px; } #admin-links a:hover { background: #222; color: white; text-decoration: none; } /* FOOTER */ #footer { height: 138px; background: url(/images/footer-bg.png) repeat-x; } #footer-inside { width: 670px; margin: 0 auto; position: relative; color: #eee; padding: 28px 0 0 0; } #footer-inside a { color: #eee; border-bottom: 1px dotted #666; } #footer-inside a:hover { text-decoration: none; border-bottom-style: solid; } #footer-inside ul { list-style: none; margin: 0; } #footer-left { position: absolute; left: 0; top: 38px; width: 175px; } #footer-left a.button { background: #222 url(/images/footer-button-bg.png) repeat-x; border: 1px solid black; letter-spacing: normal; font-size: 13px; padding: 8px; } #footer-left a.button:hover { background: black; text-decoration: none; } #footer-middle { position: absolute; left: 180px; top: 38px; width: 200px; } #footer-middle li { margin: 0 0 7px 0; } #footer-right { position: absolute; right: 0; top: 44px; text-align: right; width: 320px; } #footer-right img { float: right; margin: 0 0 0 10px; } #footer-right p { font-size: 10px; font-style: italic; }