<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;
}