Calendar

dabblet.css

/* Calendar */
.calendario {
	border:1px solid #ccc;
	float:left;
	padding:5px;
	position:relative;
	background:-moz-linear-gradient(bottom, #f6f6f6 0, #fcfcfc 100%); /* Firefox 3.5+ */
	background:-o-linear-gradient(bottom, #f6f6f6 0, #fcfcfc 100%); /* Opera 10.1+ */
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0,#f6f6f6), color-stop(1,#fcfcfc)); /* Chrome & Safari */
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fcfcfc', endColorstr='#f6f6f6'); /* IE6 & IE7 */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fcfcfc', endColorstr='#f6f6f6')"; /* IE8 */
	-moz-box-shadow:0 2px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.25);
	box-shadow:0 2px 5px rgba(0,0,0,0.25);
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.calendario > a {
	color:#fff;
	display:block;
	font-size:10px;
	padding:0.25em;
	position:absolute;
	text-decoration:none;
	top:0.75em;
	-moz-border-radius:1.5em;
	-webkit-border-radius:1.5em;
	border-radius:1.5em;
	text-shadow:-1px -1px 0 rgba(0,0,0,0.35);
}
.calendario > a:hover, .calendario > a:focus {
	background-color:#3069b9;
	color:#fff;
}
.calendario .setaesq {
	left:1em;
}
.calendario .setadir {
	right:1em;
}
.calendario table {
	border:1px solid #cdcdcd;
	font:bold 11px Arial, Helvetica, sans-serif;
}
.calendario caption {
	background:-moz-linear-gradient(bottom, #aeaeae 0, #999999 100%);
	background:-o-linear-gradient(bottom, #aeaeae 0, #999999 100%);
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0,#aeaeae), color-stop(1,#999999));
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#999999', endColorstr='#aeaeae');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#999999', endColorstr='#aeaeae')";
	border:1px solid; border-color:#666 #f6f6f6 #fff #f6f6f6;
	color:#fff;
	font:11px "Arial Black";
	margin-bottom:5px;
	padding:0.25em;
	text-transform:uppercase;
	text-shadow:-1px -1px 0 rgba(0,0,0,0.35);
}
.calendario caption span {
	color:#deebfb;
}
.calendario thead {
	background:-moz-linear-gradient(bottom, #dedede 0, #f9f9f9 100%);
	background:-o-linear-gradient(bottom, #dedede 0, #f9f9f9 100%);
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0,#dedede), color-stop(1,#f9f9f9));
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f9f9f9', endColorstr='#dedede');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f9f9f9', endColorstr='#dedede')";
}
.calendario tbody {
	background:-moz-linear-gradient(bottom, #15407e 0, #3069b9 100%);
	background:-o-linear-gradient(bottom, #15407e 0, #3069b9 100%);
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0,#15407e), color-stop(1,#3069b9));
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#3069b9', endColorstr='#15407e');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#3069b9', endColorstr='#15407e')";
	-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);
}
.calendario thead tr th:first-child {
	color:#b1b1b1;
}
.calendario tbody tr td:first-child > * {
	color:#ccc;
}
.calendario thead th {
	border-top:1px solid #fff;
	border-bottom:1px solid #ccc;
	color:#777;
	padding:0.5em;
	text-align:center;
	text-shadow:-1px -1px 0 rgba(255,255,255,0.5);
}
.calendario tbody td {
	color:#fff;
	text-shadow:-1px -1px 0 rgba(0,0,0,0.5);
}
.calendario tbody a:hover, .calendario tbody a:focus {
	background-color:#fff;
	color:#000!important;
	opacity:0.25;
	text-shadow:-1px -1px 0 rgba(255,255,255,1);
}
.calendario td span, .calendario td a {
	border-top:1px solid rgba(102,204,255,0.2);
	border-right:1px solid rgba(0,0,0,0.4);
	border-bottom:1px solid rgba(0,0,0,0.4);
	color:#fff;
	display:block;
	padding:0.5em;
	text-align:center;
	text-decoration:none;
}
.calendario td span {
	background-color:#111;
	opacity:0.5;
}
.calendario td span.ativo {
	background-color:#15407e;
	color:#0f0;
	opacity:1;
	text-shadow:0 0 3px rgba(0,255,0,1);
}

dabblet.html

<div class="calendario">
	<a href="#" title="Anterior" class="setaesq">◄</a>
    <a href="#" title="Próximo" class="setadir">►</a>
    <table cellpadding="0" cellspacing="0" border="0" summary="Calendário maio de 2011">
        <caption>Maio <span>2011</span></caption>
        <thead>
            <tr>
                <th>Dom</th>
                <th>Seg</th>
                <th>Ter</th>
                <th>Qua</th>
                <th>Qui</th>
                <th>Sex</th>
                <th>Sáb</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span>24</span></td>
                <td><span>25</span></td>
                <td><span>26</span></td>
                <td><span>27</span></td>
                <td><span>38</span></td>
                <td><span>29</span></td>
                <td><span>30</span></td>
            </tr>
            <tr>
                <td><a href="#">1</a></td>
                <td><a href="#">2</a></td>
                <td><a href="#">3</a></td>
                <td><a href="#">4</a></td>
                <td><a href="#">5</a></td>
                <td><a href="#">6</a></td>
                <td><a href="#">7</a></td>
            </tr>
            <tr>
                <td><a href="#">8</a></td>
                <td><a href="#">9</a></td>
                <td><a href="#">10</a></td>
                <td><a href="#">11</a></td>
                <td><a href="#">12</a></td>
                <td><a href="#">13</a></td>
                <td><a href="#">14</a></td>
            </tr>
            <tr>
                <td><a href="#">15</a></td>
                <td><a href="#">16</a></td>
                <td><a href="#">17</a></td>
                <td><a href="#">18</a></td>
                <td><a href="#">19</a></td>
                <td><a href="#">20</a></td>
                <td><a href="#">21</a></td>
            </tr>
            <tr>
                <td><a href="#">22</a></td>
                <td><a href="#">23</a></td>
                <td><a href="#">24</a></td>
                <td><a href="#">25</a></td>
                <td><a href="#">25</a></td>
                <td><span class="ativo">27</span></td>
                <td><a href="#">28</a></td>
            </tr>
            <tr>
                <td><a href="#">29</a></td>
                <td><a href="#">30</a></td>
                <td><a href="#">31</a></td>
                <td><span>1</span></td>
                <td><span>2</span></td>
                <td><span>3</span></td>
                <td><span>4</span></td>
            </tr>
        </tbody>
    </table>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}