I figure you would prefer the simply remove the leading zero, so 2pm would be simply "2" and not "02". To accomplish that, remove the line above in red (or comment it out by adding // in front of the line).am_pm = 'PM'
if(dhr==0){dhr=12;am_pm='AM';}
if(dhr<12){dhr=dhr; am_pm='AM';}
if(dhr>12){dhr=(dhr-12);am_pm='PM';}
if(dhr<10){dhr='0'+dhr;}
I'm afraid, however, that removing the zero will cause the "2" to be shifted over away from the minutes. In that case, you'll have to play with the positioning (left and top coordinates) to get it to line up.
Below are the numbers I used previously. You can try and compare yours with these and see how it works. Always make a backup though...
Code:
div#hourbox {
position:relative;
text-align:right;
left:-195px;
top:0px;
font-size:170px;
line-height:170px;
color:#FFFFFF;
letter-spacing: -15px;
opacity:.4;
text-shadow: 5px 5px 5px #000000;
}
div#minbox {
position:absolute;
left:140px;
top:10px;
font-size:90px;
color:#FFFFFF;
opacity:.4;
text-shadow: 5px 5px 5px #000000;
}
div#am_pmbox {
position:relative;
text-align:right;
left:-100px;
top:-75px;
font-size:50px;
color:#FFFFFF;
opacity:.4;
text-shadow: 5px 5px 5px #000000;
}
div#daybox {
position:relative;
text-align:center;
top:-150px;
left:80px;
font-size:22px;
line-height:22px;
color:#FFFFFF;
opacity:.5;
text-shadow: 3px 3px 3px #000000;
-webkit-transform:rotate(270deg);
}
div#monthbox {
position:absolute;
text-align:center;
top:100px;
left:241px;
font-size:30px;
line-height:30px;
color:#FFFFFF;
opacity:.5;
text-shadow: 3px 3px 3px #000000;
-webkit-transform:rotate(270deg);
}
div#datebox {
position:absolute;
text-align:center;
top:38px;
left:251px;
font-size:30px;
line-height:30px;
color:#FFFFFF;
opacity:.5;
text-shadow: 3px 3px 3px #000000;
-webkit-transform:rotate(270deg);
}
div#yearbox {
position:absolute;
text-align:center;
top:68px;
left:253px;
font-size:45px;
line-height:45px;
color:#FFFFFF;
opacity:.5;
text-shadow: 3px 3px 3px #000000;
-webkit-transform:rotate(270deg);
}
/*WEATHER*/
#WeatherContainer{
margin: -110px 0 0 0;
background-color: INVISIBLE;
color: #FFFF99;
}
#TextContainer{
float: left;
padding: 0;
margin: 0 0 0 20px;
position:absolute;
text-align:left;
top:150px;
left:0px;
font-family: "American Typewriter Condensed";
font-size: x-large;
color:#FFFFFF;
opacity:.5;
text-shadow: 3px 3px 3px #000000;
}
#city{
text-transform: capitalize;
font-weight: bold;
}
#TextContainer p{
padding: 0;
margin: 0;
}
#desc{
// position:absolute;
// left:265px;
// text-align:center;
// top: 205px;
// Float: right;
// Z-index:2;
// color:#FFFFFF;
// font-style:italic;
// font-size:12px;
// font-weight: bold;
// text-shadow: 2px 2px 2px #000000;
display: none;
}
#weatherIcon{
position:absolute;
text-align:left;
top:150px;
left:253px;
height: 64px;
width: 64px;
float: right;
border: none;
opacity:.7;
padding: 0 0x 0 10px;
margin: 0 10px 0 0px;
}
</style>