Mini Calendar

by JordanBlount

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mini Calendar</title>
  <link rel="stylesheet" href="assets/style.css" type="text/css" />
</head>
<body>
  <div>
    <table>
  <thead>
    <tr>
      <th class="arrow"><a href="">◀</a></th>
      <th colspan="5">
        October 2011
      </th>
      <th class="arrow"><a href="">▶</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
    </tr>
    <tr>
      <td class="off">26</td>
      <td class="off">27</td>
      <td class="off">28</td>
      <td class="off">29</td>
      <td class="off">30</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
    <tr>
      <td>17</td>
      <td class="last-week">18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr>
      <td>24</td>
      <td class="today">25</td>
      <td class="tomorrow">26</td>
      <td>27</td>
      <td class="event">28</td>
      <td>29</td>
      <td>30</td>
    </tr>
    <tr>
      <td>31</td>
      <td class="off">1</td>
      <td class="off">2</td>
      <td class="off">3</td>
      <td class="off">4</td>
      <td class="off">5</td>
      <td class="off">6</td>
    </tr>
  </tbody>
</table>


  </div>
</body>
</html>

CSS

body {
  background-color: #f4f4f4; }

a {
  text-decoration: none; }

div {
  position: relative;
  width: 20em;
  padding: 2em;
  height: 20em; }

table {
  position: absolute;
  margin: auto auto;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  border-spacing: 0;
  font-family: 'Helvetica Neue';
  width: 239px; }
  table:before {
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0px;
    left: 2px;
    background: #fff;
    content: " ";
    display: block;
    height: 230px;
    width: 236px;
    z-index: -1; }
  table:after {
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 2px;
    left: 4px;
    background: #fff;
    content: " ";
    display: block;
    height: 230px;
    width: 232px;
    z-index: -2; }
  table thead th {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: inset 0 1px 0 0 #e88486;
    -moz-box-shadow: inset 0 1px 0 0 #e88486;
    -ms-box-shadow: inset 0 1px 0 0 #e88486;
    -o-box-shadow: inset 0 1px 0 0 #e88486;
    box-shadow: inset 0 1px 0 0 #e88486;
    background-color: #e56568;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e56568), color-stop(100%, #bd3f41));
    background-image:...