[megaupload]

Отлично, давайдосвидания, а я пока покажу ПРИМЕР С КАЛЬКУЛЯТОРОМ:

Создадим структуру калькулятора и его дизайн.

<div class="calculator">
  <div class="calculator_display">12345</div>
  <table class="calculator_buttons">
    <tr>
      <td class="calculator_buttons_i">7</td>
      <td class="calculator_buttons_i">8</td>
      <td class="calculator_buttons_i">9</td>
      <td class="calculator_buttons_i">+</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i">4</td>
      <td class="calculator_buttons_i">5</td>
      <td class="calculator_buttons_i">6</td>
      <td class="calculator_buttons_i">-</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i">1</td>
      <td class="calculator_buttons_i">2</td>
      <td class="calculator_buttons_i">3</td>
      <td class="calculator_buttons_i">*</td>
    </tr>
    <tr>
      <td class="calculator_buttons_i" colspan="3">=</td>
      <td class="calculator_buttons_i">/</td>
    </tr>
  </table>
</div>



<style type="text/css">
  .calculator {
    -webkit-user-select : none;
    width               : 150px;
  }

  .calculator_display {
    box-sizing       : border-box;
    height           : 30px;
    padding          : 5px;
    font-size        : 20px;
    background-color : #009ee1;
  }

  .calculator_buttons {
    width  : 100%;
    height : 170px;
  }

  .calculator_buttons_i {
    text-align         : center;
    border             : 1px solid #000000;
    box-shadow         : inset 0 0 5px #000000;
    background-color   : #a1c736;
    cursor             : pointer;
    -webkit-transition : all 0.2s;
  }

  .calculator_buttons_i:hover {
    background-color : #bbe63f;
  }

  .calculator_buttons_i:active {
    box-shadow       : inset 0 0 10px #000000;
    background-color : #9cbe33;
  }

</style>