Calendar

by Emily Humphrey

HTML

<div class="calendar">
    <div class="cal-top">
        <a class="prev">&lt;</a><div class="last-month light-grey">October</div><div class="current-month green">November</div><div class="next-month">December</div><a class="next light-grey">&gt;</a>
    </div>
    <div class="cal-days">
        <span>SUN</span>
        <span>MON</span>
        <span>TUE</span>
        <span>WED</span>
        <span>THU</span>
        <span>FRI</span>
        <span>SAT</span>
    </div>
    <div class="week week-1">
        <a href="" class="day day-1">27</a>
        <a href="" class="day day-2">28</a>
        <a href="" class="day day-3">29</a>
        <a href="" class="day day-4">30</a>
        <a href="" class="day day-5">31</a>
        <a href="" class="day day-6">1</a>
        <a href="" class="day day-7">2</a>
    </div>
    <div class="week week-2">
        <a href="" class="day day-1">3</a>
        <a href="" class="day day-2">4</a>
        <a href="" class="day day-3">5</a>
        <a href="" class="day day-4">6</a>
        <a href="" class="day day-5">7</a>
        <a href="" class="day day-6">8</a>
        <a href="" class="day day-7">9</a>
    </div>
    <div class="week week-3">
        <a href="" class="day day-1">10</a>
        <a href="" class="day day-2">11</a>
        <a href="" class="day day-3">12</a>
        <a href="" class="day day-4">13</a>
        <a href="" class="day day-5">14</a>
        <a href="" class="day day-6">15</a>
        <a href="" class="day day-7">16</a>
    </div>
    <div class="week week-4">
        <a href="" class="day day-1">17</a>
        <a href="" class="day day-2">18</a>
        <a href="" class="day day-3">19</a>
        <a href="" class="day day-4">20</a>
        <a href="" class="day day-5">21</a>
        <a href="" class="day day-6">22</a>
        <a href="" class="day day-7">23</a>
    </div>
    <div class="week week-5">
        <a href="" class="day day-1">24</a>
        <a href="" class="day day-2">25</a>
        <a href=""...

CSS

body{background:#E6E2DB;color:#494947;font-family:"Myriad Pro",Frutiger,"Frutiger Linotype",Helvetica,Arial,sans-serif;font-size:16px;overflow-y:auto;padding:0;margin:0;}div#wrapper{display:block;width:940px;margin:20px auto 0;}div.boxes{display:block;margin-bottom:20px;position:relative;background:#fbfbfb;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;float:left;}div.boxes:after{display:block;height:100%;width:100%;position:absolute;bottom:-4px;right:-4px;background:#323232;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;content:"";opacity:.05;z-index:-1;}div.boxes-4{width:220px;margin-right:20px;}div.boxes-3{width:300px;margin-right:20px;}div.boxes-2{width:460px;margin-right:20px;}div.boxes-1{width:940px;margin-right:0;}*{color:#494947;font-family:"Myriad Pro",Frutiger,"Frutiger Linotype",Helvetica,Arial,sans-serif;}p{line-height:1.25em;}.larger{font-size:1.5em;}.large{font-size:1.25em;}.small{font-size:0.75em;}.smaller{font-size:0.5em;}.green{color:#79BE50;}.purple{color:#7D569F;}.bold{font-weight:700;}div.boxes-4 .contain{width:180px;padding:20px;}div.boxes-3 .contain{width:260px;padding:20px;}div.boxes-2 .contain{width:420px;padding:20px;}div.boxes-1 .contain{width:900px;padding:20px; overflow:hidden;}

.calendar{
    display:block;
    width:600px;
    background:#fbfbfb;
}
.cal-top{
    display:block;
    width:500px;
    padding:10px 0;
    margin:0 auto;
    overflow:hidden;
}
.cal-top div, .cal-top a{
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    padding:0 10px;
}
.prev,
.next{
    width:15px;
    font-size:.85em;
    font-weight:700;
}
.current-month{
    width:170px;
    font-size:1.5em;
    font-weight:800;
}
.last-month,
.next-month{
    width:100px;
    font-weight:bold;
    color:rgb(180,180,180);
}
.cal-days,
.week{
    display:block;
    width:560px;
    padding: 0 20px 10px;
    overflow:hidden;
}
.cal-days span,
.week a{
    display:block;
    width:60px;
    padding: 0...