calendar 1

/** copy this code and paste after <head> **/

<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>

/** copy this code and paste before </style> **/

#box {
    margin-top:20px;
    margin-left:20px;
    width:auto;
    height:auto;
    padding:10px;
    border:1px solid #eeeeee; /** change box border color **/
    position:fixed;
    background-color:#ffffff; /** change box background color **/
    }


#month {
    width:110px;
    height:auto;
    text-align:center;
    display:block;
    padding:5px;
    color:#888888; /** change text color **/
    font-family: 'Quicksand', sans-serif;
    font-size:8px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    background-color:#f6f6f6;  /** change background color **/
    box-shadow:0px 0px 0px 0px #ebeff1 inset;  /** change background color hover **/
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    }


#month:hover {
    cursor:help;
    color:#ffffff;  /** change text color hover **/
    box-shadow:0px 100px 0px 0px #ebeff1 inset; /** change background color hover **/
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    }

#rain {
    color:#888888; /** change text color **/
    font-family: 'Quicksand', sans-serif;
    font-size:7px;
    margin-left:3px;
    text-transform:uppercase;
    background-color:transparent;
    margin-top:5px;
    }

/** copy this code and paste after <body> **/

<div id="box">
<div id="month">
January
</div>
<div id="rain">
<table style width="100" cellpadding="2" cellspacing="2">

<tr>
<td>日</td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
<td>土</td>
</tr>

<tr>

<td></td>
<td></td>
<td></td>
<td></td>
<td>01</td>
<td>02</td>
<td>03</td>

</tr>

<tr>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>


</table>

</div>
</div>