-Use some formatting in your text, especially to distinguish and set apart your examples
-Fix your grammar/punctuation
-I shouldn't be able to get a text cursor in the answer box
-Way too much going on with the body background, border-image, and div background.
-Some of the wording of your examples is not correct.
-There are 3 divs before I get to any of the real meat of the site, and none of really does anything spectacular besides containing the div child.
-Your <h1>Percentage Calculator</h1> is flushed to the left with no padding, which makes it butt up against the left border and appear cut-off.
-The text in the buttons could use a little more padding
-Your CSS only provides the specific background gradient for Firefox
-The body and div background images don't display properly in IE9. Div background displays just as a lime-green color, while the body background is absent and no fallback is provided for.
-The buttons look bad because it appears they are encapsulated in a div with a background that isn't following the border-radius set for the button, resulting in background gradient overflowing the border. (IE9)
-In Chrome, the background image renders very pixelated. Try using a larger image and allowing it to adjust to screen size to prevent this effect. This same issue is noted in Safari and Opera as well.
The change in % is 500-350=150
The change in value
is 150, not the change as a percent (which is completely different).
You have a <div id="header">, but it contains nothing except for a little padding. By the way, with HTML5, you can use the new <header></header> tags.
This site needs a LOT of work...