@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

body {
    background: #f6f9fc;
    font-family: "Helvetica", "Arial", sans-serif;
}

.calendar {
    width: 210px;
    margin: 50px auto 0;
    padding: 10px 10px 20px 20px;
    background: #eae9e9;
}

.calendar ul {
    width: 210px;
    overflow: hidden;
    padding-bottom: 10px;
}

.calendar li {
    float: left;
    width: 58px;
    height: 54px;
    margin: 10px 10px 0 0;
    border: 1px solid #fff;
    background: #424242;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.calendar li h2 {
    font-size: 20px;
    padding-top: 5px;
}

.calendar li p {
    font-size: 14px;
}

.calendar .active {
    border: 1px solid #424242;
    background: #fff;
    color: #9fc1ff;
}

.calendar .active p {
    font-weight: bold;
}

.calendar .text {
    width: 178px;
    padding: 0 10px 10px;
    border: 1px solid #fff;
    padding-top: 10px;
    background: #f1f1f1;
    color: #555;
}

.calendar .text h2 {
    font-size: 14px;
    margin-bottom: 10px;
}

.calendar .text p {
    font-size: 12px;
    line-height: 18px;
}