Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
126 lines (102 sloc) 5.56 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en-us" lang="en-us">
<title>Personal Budget Calculator</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html" />
<meta name="description" content="Personal budget calculator for California residents.">
<style type="text/css" media="screen">
@import "/budget_media/css/function.css";
html{ color: #343434; background: #bcc2c6; font-size: 14px; line-height: 1.5; font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Verdana, sans-serif; }
a:visited{ text-decoration: none; color: #254a86; }
a:focus { text-decoration: underline; }
h1,h2,h3,ul,ol,p{ margin: 1.5em 0; }
h1{ margin: 42px auto 28px auto; width: 284px; }
h2{ font-size: 1.25em; }
fieldset h3{ margin: 1.5em -28px; padding: 14px 28px; line-height: 1; background: #efefef; color: #343434; }
#budgetForm{ width: 800px; background: #fff; margin: 28px auto; padding: 28px;
/* CSS3 */
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-o-border-radius: 12px;
-khtml-border-radius: 12px;
.header{ margin: -28px -28px 28px -28px; padding: 1px 28px; background: #efefef; border-bottom: 1px solid #dfdfdf; position: relative;
/* CSS3 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
.header h2{ margin: 1.5em 0 0 0; color: #343434; color: #777; }
.header p { margin-top: 0; font-size: 12px; color: #777; }
.intro { width: 55%; margin: 28px auto; text-align: center; font-size: 1.15em; }
#footer{ width: 55%; margin: 28px auto; text-align: center; font-size: .75em; color: #777; }
/* IE6 fixes for the page */
* html form#budgetForm{ overflow: hidden; }
* html .header{ zoom: 1; overflow: hidden;}
<link href="/budget_media/css/style.css" media="screen" rel="stylesheet" />
<script type="text/javascript" src=""></script>
<script src="/budget_media/js/budget-form.jquery.js" type="text/javascript"></script>
<script src="/budget_media/cs/page.js" type="text/javascript"></script>
<!--[if lte ie 7]>
<style type="text/css" media="screen">
/* Move these to your IE6/7 specific stylesheet if possible */
#budgetForm, #budgetForm fieldset, #budgetForm .ctrlHolder, #budgetForm .formHint, #budgetForm .buttonHolder, #budgetForm .ctrlHolder ul{ zoom:1; }
<form action="#" id="budgetForm">
<div class="header">
<h2>Personal Budget Calculator <noscript>(REQUIRES JAVASCRIPT)</noscript></h2>
<p>Modify the numbers in the boxes on the right, then scroll down to see what pre-tax income you'll need to cover your expenses. For California residents.</p>
<fieldset id="spreadsheet" class="inlineLabels">
<div id="expenses">
<h3>Monthly Required Expenses</h3>
<div id="discretionary">
<h3>Monthly Discretionary Expenses</h3>
<div id="insurance">
<h3>Monthly Insurance</h3>
<div id="taxes">
<h3>Monthly Taxes</h3>
<div id="income">
<h3>Gross Income Required</h3>
<div class='ctrlHolder'>
<div class='info'>
<label for=''>Monthly Gross Income</label>
<p class='formHint'>The monthly pre-tax income you'll need to afford everything</p>
<div class='textOutputHolder'>
<span class='dollar'>$</span><span id='monthly-gross' class='output'></span>
<div class='ctrlHolder'>
<div class='info'>
<label for=''>Annual Gross Income</label>
<p class='formHint'>The equivalent annual pre-tax income you'll need to afford everything</p>
<div class='textOutputHolder'>
<span class='dollar'>$</span><span id='annual-gross' class='output'></span>
<div id="footer">
<p>Typical spending values are based on <a href="">the Bureau of Labor Statistics' Customer Expenditure Survey</a> and a variety of other sources. State tax bracket data based on <a href="">this document</a>. Federal tax bracket data based on <a href="">this document</a>.</p>