/** CSS by Steve Smith (steve@orderedlist.com) Feel free to browse this, but don't copy it completely. That's uncool. Edited: 2008-01-19 (Dan Rubin) */ /** * __Colors__ * Body Background: EEEEEE */ @media screen, projection { /** * Copyright (c) 2006, Yahoo! Inc. All rights reserved. * Code licensed under the BSD License: * http://developer.yahoo.net/yui/license.txt * read more here: http://developer.yahoo.com/yui/fonts/ * version: 0.11.0 */ body {font:13px arial,helvetica,clean,sans-serif;*font-size:72%;*font:x-small;text-shadow:#000 0 0 0;min-width:670px;} table {font-size:inherit;font:100%;} select, input, textarea {font:99% arial,helvetica,clean,sans-serif;} pre, code {font:115% monospace;*font-size:100%;} /** end Yahoo Fonts */ /** * Redeclarations */ :link,:visited {text-decoration:none;} ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,body,html,p,blockquote, fieldset,input {margin:0; padding:0} body {font-family:"Helvetica Neue",Helvetica,sans-serif; line-height:1.6; background:#EEE; color:#777;} a {color:#06C;} a:hover {color:#09F;} a img {border:none;} ul, ol {margin:0 0 1.6em 8px;} ol {margin-left:35px;} ul ul, ol ol {margin:0 0 5px 8px;} ul {list-style-type:none;} ul li {margin:0 0 0 5px; padding:0 0 0 20px; background:url(images/bullet.gif) no-repeat 0px 1px;} p {margin:0 0 10px;} input, select, textarea, img {vertical-align:middle;} /* remember to define focus styles! */ :focus { outline: 0; } /** * Layout */ #network-nav {} #wrapper {background:#FFF url(images/body-bg.png) repeat-x; border-bottom:1px solid #D3D3D3; width:100%; float:left;} #branding {width:650px; margin:0 auto; height:160px; position:relative;} #content_wrapper {width:100%; margin:20px 0 15px; float:left;} #content {width:650px; margin:0 auto 15px;} #teh_owners {background:#EEE; border-top:1px solid #FFF; padding:4px 0; clear:left; margin:0;} /** * Posts & Comments */ div.post h2 {margin:0 0 4px; padding:0; line-height:1;} div.post h3 {margin:0 0 20px; padding:0; line-height:1; font-size:13px; text-transform:uppercase;} h2.post_title {margin:0;} h3.post_date {margin:0 0 20px;} div.post_body {margin:0 0 50px;} #comments ol {margin:10px 0 20px;} #comments ol li {margin:0 0 10px; padding:10px 0 0; border-top:1px solid #eee; list-style:none;} #comments ol li.official {color:#333;} #comment_form {margin:0 0 10px;} #comment_form label {display:none;} span.allowed_html {margin-left:10px;} /** * Branding */ #branding h3 {position:absolute; left:0; bottom:0; height:78px; width:218px; background:url(images/logo.png); overflow:hidden; text-indent:-9999px;} .logged_in #branding h3 {width:259px;} #vehicle_forward_form {position:absolute; bottom:20px; left:263px;} #vehicle_forward_form select {font-size:150%;} #vehicle_forward_form label {display:none;} #extras {position:absolute; right:0; bottom:16px; background:#FFF url(images/tab-top-left.gif) no-repeat top left; font-size:85%;} #extras p {padding:4px 10px; margin:0; background:url(images/tab-top-right.gif) no-repeat top right; font-weight:bold;} #extras a {color:#666;} #extras a:hover {color:#09F;} #hasjs #change_vehicle_submit {display:none;} #sidebar {width:650px; margin:0 auto;} #sidebar a {display:block; width:300px; height:22px; text-indent:-9999px; overflow:hidden; background:url(images/sidebar.gif) no-repeat;} /* * Login */ /*#login_message a {font-weight:normal; color:#6CF;} #login_box {position:absolute; bottom:25px; right:0; text-align:right; font-size:85%; color:#EEE; width:227px;} #login_box label {display:inline; float:left; text-align:right; width:100px; margin:0; padding:0;} #login_box label span {background:#404040; padding:2px 5px; float:right; display:block; line-height:14px; height:14px;} #login, #password, #openid_url {width:120px; font-size:110%; margin:0; float:right; border:none; padding:2px 3px; height:14px; background:#808080;} #login_box p {margin:0 0 2px; width:100%; float:left; padding:0; clear:both;} #login:focus, #password:focus, #openid_url:focus {background:#FFF;} #login_box p.remember_me {padding:0 0 3px 107px; width:120px; text-align:left;} #login_box p.remember_me label {float:none;}*/ #branding { font-family:"lucida grande",sans-serif; } #login_message { position:absolute; top:7px; left:21px; background:url(images/title-login.png) no-repeat; width:205px; height:12px; text-indent:-9999px; } #login_box { position:absolute; top:0; right:0; background:url(images/login-bar-bg-topright.png) no-repeat top right; } #login_form { background:url(images/login-bar-bg-topleft.png) no-repeat; padding-top:1px; } #login_form label { display:none; } #login_form fieldset { background:url(images/login-bar-bg-left.png) no-repeat bottom left; padding-left:4px; } #login_form a { color:#ccc; } #login_form a:hover { color:#eee; } #password_login, #openid_login, #password_recovery { background:url(images/login-bar-bg-right.png) no-repeat bottom right; padding:1px 4px 6px 2px; } #password_login p, #openid_login p, #password_recovery p { margin:-2px 80px 0 0; padding:0; white-space:nowrap; font-size:11px; color:#fff; } #openid_login p { margin-right:82px; } #password_recovery p#reset_instructions { margin:-4px 13px 4px 0; } #login_form .login_tools { position:absolute; right:5px; bottom:-12px; margin:0; padding:0; font-size:10px; line-height:1; color:#ccc; } #login_form .login_tools a { padding:1px; } #login_form .remember_me { position:absolute; left:8px; bottom:-13px; margin:0; padding:0; font-size:10px; line-height:1; color:#ccc; } #login_form .remember_me label { display:inline;vertical-align:middle; } #login_form .remember_me input { width:auto; } #login_form .submit { position:absolute; bottom:5px; right:5px; margin:0; } #login_form input { border:1px solid #363636; background-color:#232323; color:#999; padding:2px 2px 1px; font-size:13px; font-family:"lucida grande",sans-serif; } #password_login input { width:155px; } #openid_login input { width:319px; } #password_recovery input { width:276px; } #login_form .submit input { border:none; background:transparent; padding:0; } #password_login .submit input, #openid_login .submit input { width:auto; } #password_recovery .submit input { width:auto; } /* * Home Signup */ #signup_box {width:100%; overflow:hidden; float:left; padding:0 0 35px; margin:0 0 25px; background:url(images/bar.gif) no-repeat bottom left;} #signup_box h3 {width:117px; height:45px; overflow:hidden; float:left; text-indent:-9999px; background:url(images/title-signup.gif) no-repeat;} #signup_box p.email {width:233px; margin:0 5px 0 0; float:left; display:inline; background:url(images/text-email-address.gif) no-repeat;} #signup_box p.email input {width:230px; font-size:155%; vertical-align:middle;} #signup_box p.password {width:162px; margin:0 5px 0 0; float:left; display:inline; background:url(images/text-password.gif) no-repeat;} #signup_box p.password input {width:162px; font-size:155%; vertical-align:middle;} #signup_box label {margin:0; display:block; width:100px; height:15px; overflow:hidden; text-indent:-9999px;} #signup_box p.submit {width:121px; float:right; padding:8px 0 0; margin:0; vertical-align:middle;} input.blur {color:#CCC;} #branding input.blur {color:#444;} /* * Signup Page */ h2.signup_title {height:40px; overflow:hidden; text-indent:-9999px; background:url(images/title-create-your-account.gif) no-repeat;} #agreement {width:646px; height:75px;} #user_form input, #user_form select {font-size:155%;} #user_form p.email, #user_form p.password, #user_form p.twitter_username {width:305px; float:left; clear:left;} #user_form p.location, #user_form p.confirm, #user_form p.twitter_directions {width:305px; float:right; clear:right;} #user_form p.openid {width:646px;} #user_form input, #user_form select {width:300px;} #user_form label {display:block; color:#999; text-transform:uppercase; line-height:1.3; font-size:85%;} #user_form .accept label {display:inline; font-size:inherit;} #user_form .accept input, #user_form .submit input {width:auto;} #user_form .vehicles input, #user_form .openid input {width:646px;} #user_form small {font-size:100%; color:#AAA;} #user_form .accept {float:left;} #user_form .submit {float:right; clear:right;} #user_form .confirmed {color:#0F7E57;} #user_form .unconfirmed {color:#911;} #user_form fieldset {margin:0; padding:0; clear:both;} /** * Content */ #features {clear:both; margin:0; float:left; width:100%; background:url(images/vertical-bars.gif) repeat-y -1px 0;} #features div {width:204px; margin:0 19px 0 0; display:inline; float:left;} #features div#road {margin:0;} #features img {margin:0 0 10px;} #features h3 {margin-right:-15px; background:#FFF; background-repeat:no-repeat; background-position:50% 0; height:29px; text-indent:-9999px; overflow:hidden;} #features #record h3 {background-image:url(images/title-record.gif);} #features #reports h3 {background-image:url(images/title-create.gif);} #features #road h3 {background-image:url(images/title-even.gif); margin-right:0;} /** * Account Section */ h3.manage {height:50px; text-indent:-9999px; clear:both; background:url(images/title-manage.gif) no-repeat;} #user_form {margin:0 0 30px; width:100%; float:left;} #vehicles {margin:0 0 30px;} #vehicle_vehicle_string {font-size:155%; width:645px;} #vehicle_form label {display:block; color:#999; text-transform:uppercase; line-height:1.3; font-size:85%;} #vehicle_form p.submit {margin:10px 0 0; text-align:right;} #twitter_help {clear:both; color:#666; padding:15px 20px; border:4px solid #C6E3CF; margin:0 0 15px;} /** * Title Headlines */ h1 {height:50px; text-indent:-9999px; clear:both;} h1.current_status {background:url(images/title-current-status.gif);} h1.history {background:url(images/title-history.gif);} h1.projections {background:url(images/title-projections.gif);} h1.step_1 {background:url(images/title-step-1.gif) no-repeat top left;} h1.step_2 {background:url(images/title-step-2.gif) no-repeat bottom left;} h1.step_3 {background:url(images/title-step-3.gif) no-repeat bottom left;} h1.account-info {background:url(images/title-account-info.gif) no-repeat top left;} h1.error-info {background:url(images/title-error-info.gif) no-repeat top left;} h1.your-vehicles {background:url(images/title-your-vehicles.gif) no-repeat top left;} h1.add-vehicles {background:url(images/title-add-vehicles.gif) no-repeat top left;} h1.reset-password {background:url(images/title-reset.gif) no-repeat top left;} /* * Current Status Form */ #my_current_status {margin:0 0 30px; width:100%; float:left;} #new_history {border:4px solid #C6E3CF; width:642px; float:left;} #new_history ol {margin:0; padding:0; list-style-type:none;} #new_history form {border: 1px solid #A0D4AF; padding:20px 20px 10px; width:600px; float:left; position:relative;} #history_data {margin:10px 0 0; width:50%; float:left; font-size:108%;} #history_meta {margin:10px 0 0; width:45%; float:right;} #new_history ol li {width:100%; float:left; margin:0 0 10px;} #history_data label {width:35%; float:left; display:block; margin:0 3% 0; padding:0; text-align:right;} #history_data input {width:50%;} #history_meta input {width:6%; text-align:right; margin:0; padding:0;} #history_date {border:1px solid #FFF; border-bottom-color:#E5E5E5; padding:0 0 10px; } #submit_box {position:absolute; top:10px; right:20px;} fieldset {border:none;} legend {display:none;} /* * Projections */ #my_projections {width:100%; float:left; clear:both; margin:0 0 30px;} #current_mileage, #average_fuel_economy {width:155px; float:left;} #projections_set {width:320px; margin:0 10px; float:left; display:inline;} #my_projections .value {font-size:260%; text-align:center; font-weight:bold; color:#3184D6;} #projections_set .value {color:#00C986;} #my_projections .description {color:#999; text-align:center; font-size:115%; line-height:.9; padding:8px 0; border:1px solid #E5E5E5; border-width:1px 0; margin:0 0 1px;} #projected_mileage, #projected_costs {width:160px; float:left;} #projected_date {color:#333; clear:both; text-align:center; background:url(images/gradient-projections.gif) repeat-x;} #projected_date_form {text-align:left; padding:5px 8px;} /* * Tables */ #my_history {clear:both;} #my_history h1 {} #my_history object {margin:0 0 30px;} table {width:100%; border-collapse:collapse;} th, td {text-align:left; padding:3px 5px; border-bottom:1px solid #CCC;} th.actions, td.actions {text-align:right;} .show_link {border-top:3px solid #CCC; padding:3px 5px;} table form, table form p {display:inline;} /* * Errors */ .errors {margin:10px 0 2px; color:#8F2826;} .box {padding:15px 15px 13px; background:#FCC; border:2px solid #911; margin-bottom:15px;} #login_box .errors {color:#F66; margin:0;} h3.error404 {height:50px; text-indent:-9999px; clear:both; background:url(images/title-error-404.gif) no-repeat;} h3.error500 {height:50px; text-indent:-9999px; clear:both; background:url(images/title-error-500.gif) no-repeat;} /* * Notices (added by DR on 6/26/07) */ #notice {width:650px; padding:0 0 4px; background-color:#ffc;} #notice p {margin:0 4px; padding:9px 10px 6px; color:#7f731f; border:1px solid #e6e6b3; border-top:none; font-size:12px; line-height:16px;} #notice a {color:#7f731f; padding:2px 2px 0; font-weight:bold; text-decoration:none; border-bottom:2px solid #dfdca1;} #notice a:hover {color:#ffc; background-color:#7f731f; border-color:#7f731f;} p.notice {border:4px solid #C6E3CF; padding:5px 10px;} #branding p.notice {border:1px solid #FFC; color:#FFC; background:#454529; padding:1px 5px;} }