some css not working - html

Question

So I have been following this tutorial for making a calendar widget with html, css, and js but I am stuck on the CSS not working. Did I miss something or miss-type? Where is my html/css going wrong to not end up the same final result? When I try to edit certain CSS it doesn't seem to affect the output.
The tutorial is here for reference to how it is suppose to look like.
Here is my HTML:
#cal {
-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
margin: 50px auto;
font: 13px/1.5"Helvetica Neue", Helvatica, Arial, san-serif;
display: table;
}
#cal .header {
cursor: default;
background: #cd310d;
background: -mozlinear-gradient(top, #b32b0c, #cd310d);
background: -webkit-gradient(linear, left top, left bottom, from(#b32b0c), to(#cd310d));
height: 34px;
position: relative;
color: #fff;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight: bold;
text-shadow: 0px -1px 0 #87260C;
text-transform: uppercase;
}
#cal .header span {
display: inline-block;
line-height: 34px;
}
#cal .header .hook {
width: 9px;
height: 28px;
position: absolute;
bottom: 60%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #ececec;
background: -moz-linear-gradient(right top, #fff, #827e7d);
background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#827e7d);
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.65);
}
.right.hook {
right: 15%;
}
.left.hook {
left: 15%;
}
#cal .header .button {
width: 24px;
text-align: center;
position: absolute;
}
#cal .header .left.button {
left: 0;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
border-right: 1px solid #ae2a0c;
}
#cal .header .right.button {
right: 0;
top: 0;
border-left: 1px solid #ae2a0c;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
#cal .header .button:hover {
background: -moz-linear-gradient(top, #d94215, #bb330f);
background: -webkit-gradient(linear, left top, left bottom, from (#d94215), to(#bb330f));
}
#cal .header .month-year {
letter-spacing: 1px;
width: 100%;
text-align: center;
}
#cal table {
background: #fff;
border-collapse: collapse;
}
#cal td {
color: #2b2b2b;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #e6e6e6;
cursor: default;
}
#cal #days td {
height: 25px;
line-height: 26px;
text-transform: uppercase;
font-size: 90%;
color: #9e9e9e;
}
#cal #days td:not(:last-child) {
border-right: 1px solid #fff;
}
#cal #cal-frame td.today {
background: #ededed;
color: #8c8c8c;
box-shadow: 1px 1px 0px #fff inset;
-moz-box-shadow: 1px 1px 0px #fff inset;
-webkit-box-shadow: 1px 1px 0px #fff inset;
}
#cal #cal-frame td:not(.nil):hover {
color: #fff;
text-shadow: #6C1A07 0px -1px;
background: #CD310D;
background: -moz-linear-gradient(top, #b32b0c, #cd310d);
background: -webkit-gradient(linear, left top, left bottom, from(#b32b0c), to(#cd310d));
-moz-box-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
}
#cal #cal-frame td span {
font-size: 80%;
position: relative;
}
#cal #cal-frame td span:first-child {
bottom: 5px;
}
#cal #cal-frame td span:last-child {
top: 5px;
}
#cal #cal-frame table.curr {
float: left;
}
#cal #cal-frame table.temp {
position: absolute;
}
<div id="cal">
<div class="header">
<span class="left button" id="prev"> 〈 </span>
<span class="left hook"></span>
<span class="month-year" id="label"> June 2010 </span>
<span class="right hook"></span>
<span class="right button" id="next"> 〉 </span>
</div>
<table id="days">
<tr>
<td>sun</td>
<td>mon</td>
<td>tue</td>
<td>wed</td>
<td>fri</td>
<td>sat</td>
</tr>
</table>
<div id="cal-frame">
<table class="curr">
<tbody>
<tr>
<td class="nil"></td>
<td class="nil"></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td class="today">11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td class="nil"></td>
<td class="nil"></td>
<td class="nil"></td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

First I couldn't understand what is you actual query.
But the link you are referring is having a perfectly working CSS and HTML.
Plus the JS is also working.
The difference I found in the code you have provided are :-
Within the HTML:-
<table id="days">
<td>thu</td> <!-- Is missing -->
In the CSS :- (Use the below CSS totally)
body {
background: #e0e0e0;
}
#cal {
-moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25);
margin:50px auto;
font: 13px/1.5 "Helvetica Neue", Helvatica, Arial, san-serif;
display:table;
}
#cal .header {
cursor:default;
background: #cd310d;
background: -moz-linear-gradient(top, #b32b0c, #cd310d);
background: -webkit-gradient(linear, left top, left bottom, from(#b32b0c), to(#cd310d));
height: 34px;
position: relative;
color:#fff;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight:bold;
text-shadow:0px -1px 0 #87260C;
text-transform: uppercase;
}
#cal .header span {
display:inline-block;
line-height:34px;
}
#cal .header .hook {
width: 9px;
height: 28px;
position: absolute;
bottom:60%;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#ececec;
background: -moz-linear-gradient(right top, #fff, #827e7d);
background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#827e7d));
box-shadow:0px -1px 2px rgba(0, 0, 0, 0.65 );
-moz-box-shadow:0px -1px 2px rgba(0, 0, 0, 0.65 );
-webkit-box-shadow:0px -1px 2px rgba(0, 0, 0, 0.65 );
}
.right.hook {
right:15%;
}
.left.hook {
left: 15%;
}
#cal .header .button {
width:24px;
text-align:center;
position:absolute;
}
#cal .header .left.button {
left:0;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
border-right:1px solid #ae2a0c;
}
#cal .header .right.button {
right:0;
top:0;
border-left:1px solid #ae2a0c;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
#cal .header .button:hover {
background: -moz-linear-gradient(top, #d94215, #bb330f);
background: -webkit-gradient(linear, left top, left bottom, from(#d94215), to(#bb330f));
}
#cal .header .month-year {
letter-spacing: 1px;
width: 100%;
text-align: center;
}
#cal table {
background:#fff;
border-collapse:collapse;
}
#cal td {
color:#2b2b2b;
width:30px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid #e6e6e6;
cursor:default;
}
#cal #days td {
height:26px;
line-height: 26px;
text-transform:uppercase;
font-size:90%;
color:#9e9e9e;
}
#cal #days td:not(:last-child) {
border-right:1px solid #fff;
}
#cal #cal-frame td.today {
background:#ededed;
color:#8c8c8c;
box-shadow:1px 1px 0px #fff inset;
-moz-box-shadow:1px 1px 0px #fff inset;
-webkit-box-shadow:1px 1px 0px #fff inset;
}
#cal #cal-frame td:not(.nil):hover {
color:#fff;
text-shadow: #6C1A07 0px -1px;
background:#CD310D;
background: -moz-linear-gradient(top, #b32b0c, #cd310d);
background: -webkit-gradient(linear, left top, left bottom, from(#b32b0c), to(#cd310d));
-moz-box-shadow:0px 0px 0px;
-webkit-box-shadow:0px 0px 0px;
}
#cal #cal-frame td span {
font-size:80%;
position:relative;
}
#cal #cal-frame td span:first-child {
bottom:5px;
}
#cal #cal-frame td span:last-child {
top:5px;
}
#cal #cal-frame table.curr {
float:left;
}
#cal #cal-frame table.temp {
position:absolute;
}
Screenshot :-
Hope this will work for you.