<nav role='navigation' class="sections">
  <ul>
    <li class="notes"><a href="#"></a></li>
    <li class="calendar active"><a href="#"></a></li>
    <li class="settings"><a href="#"></a></li>
  </ul>
</nav>

<section class="mounth" id="january">
  <header>
    <h1>JANUARY 2013</h1>
    <nav role='padigation'>
      <span></span>
      <span></span>
    </nav>
  </header>

  <article>
    <div class="days">
      <b>SU</b>
      <b>MO</b>
      <b>TU</b>
      <b>WE</b>
      <b>TH</b>
      <b>FR</b>
      <b>SA</b>
    </div>
    <div class="dates">
      <span class="disable">30</span>
      <span class="disable">31</span>
      
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>10</span>
      <span>11</span>
      <span>12</span>
      <span>13</span>
      <span>14</span>
      <span>15</span>
      <span class="active">16</span>
      <span>17</span>
      <span>18</span>
      <span>19</span>
      <span>20</span>
      <span>21</span>
      <span>22</span>
      <span>23</span>
      <span>24</span>
      <span>25</span>
      <span>26</span>
      <span>27</span>
      <span>28</span>
      <span>29</span>
      <span>30</span>
      <span>31</span>
      
      <span class="disable">1</span>
      <span class="disable">2</span>
      <span class="disable">3</span>
      <span class="disable">4</span>
      <span class="disable">5</span>
      <span class="disable">6</span>
      <span class="disable">7</span>
      <span class="disable">8</span>
      <span class="disable">9</span>
    </div>
  </article>
</section>
::selection {
  background: rgba(0,0,0,.05);
}
body {
  padding: 20px;
  background: #d2d5e0;
  font-family: 'Open Sans', sans-serif;
}
ul, h1, h2, h3, h4 {
  margin: 0; padding: 0;
  list-style: none;
}
a, li,
header nav span,
article span {
  text-decoration: none;
  transition: all .25s ease-in-out;
}
h1 {
  font: 300 28px 'Open Sans';
  color: #4c5373;
}

/****/
/* Left Bar */
/****/
nav.sections {
  overflow: hidden;
  display: block;
  float: left;
  width: 82px; height: auto;
  margin-right: 20px;
  background: #3bc1f8;
  box-shadow: 0 1px 1px rgba(78,200,247,.35);
  border-radius: 5px;
  text-aling: center;
}
  nav.sections li a {
    display: block;
    width: 100%; height: 82px;
  }
    nav.sections li:hover,
    nav.sections li.active {
      background: #00aced;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.07);
    }
    nav.sections li.notes a,
    nav.sections li.calendar a,
    nav.sections li.settings a {
	    background: url('http://ysfu.net/sprite.png') no-repeat;
    }
    nav.sections li.notes a {
      background-position: 25px 25px;
    }
    nav.sections li.calendar a {
	    background-position: 25px -57px;
    }
    nav.sections li.settings a {
	    background-position: 25px -139px;
    }

/****/
/* Calendar */
/****/
section.mounth {
  overflow: hidden;
  display: block;
  float: left;
  width: 420px; height: auto;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  border-radius: 5px;
}
  header {
    position: relative;
    display: block;
    height: 80px;
    background: #e9eaf0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
  }
    header h1 {
      margin-left: 30px;
      line-height: 80px;
    }
    header nav {
      overflow: hidden;
      position: absolute;
      display: block;
      right: 30px; top: 30px;
    }
      header nav span {
        display: block;
        float: left;
        width: 11px; height: 20px;
        margin-left: 30px;
        cursor: pointer;
        background: url('http://ysfu.net/sprite.png') no-repeat;
      }
        header nav span:first-of-type {
          background-position: -77px -4px;
        }
          header nav span:first-of-type:hover {
            background-position: -106px -4px;
          }
        header nav span:last-of-type {
          background-position: -90px -4px;
        }
          header nav span:last-of-type:hover {
            background-position: -119px -4px;
          }

article {padding: 6px 0 25px 25px}
  article b,
  article span {
    display: block;
    float: left;
    width: 45px; height: 45px;
    margin: 4px;
    text-align: center;
  }
  article b {
    font: 600 16px/45px 'Open Sans';
    color: #91d9ff;
  }
  article span {
    font: 300 19px/45px 'Open Sans';
    color: #4c5373;
    box-shadow: inset 0 0 1px 1px #d9dce5;
    border-radius: 2px;
    cursor: pointer;
  }
  article span.disable {
    color: #b6bacc;
    box-shadow: inset 0 0 1px 1px #f3f4f7;
  }
    article span:not(.disable):hover {
      background: #cdd0dd;
      box-shadow:
        inset 0 0 1px 1px #d9dce5,
        0 1px 3px -1px #cdd0dd;
    }
    article span:not(.disable):active {
      background: #b9becf;
      box-shadow:
        inset 0 1px 2px rgba(0,0,0,.18),
        0 0 0 #cdd0dd;
    }
    article span.active,
    article span.active:hover,
    article span.active:active {
      color: #fff;
      box-shadow:
        inset 0 0 1px 1px #ff8263,
        0 1px 3px -1px #ff8263;
      background: #ff8263;
    }
  article div {
    display: block;
    overflow: hidden;
    clear: both;
  }
/************************************/
/* Thank you for this PSD:
/* Dribbble: http://dribbble.com/shots/1256084-
/************************************/
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:300,600,400&subset=latin,latin-ext

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js