Hi, im making some changes on damino theme, and im trying to use a weather widget, but since i don't know anything about coding html or css its been a pita.

First of all my theme without the widget running looks like this:



Then on the widget html, it calls a file overlay.png which is a 480x320 image but it only has the bar at the bottom colored black with 50% transparency. When it loads it shows like this:



The thing is I already colored the text on the css to white, but somehow, it overlaps with the transparent overlay.png.

Is there a way i can make the text full white and mantain the transparency of the overlay.png. By the way, it happens the same if I change the dock png to show all the bottom transparent.

Another thing, is there a way I can force it to show only caps? to match the icons.

These are the widget html and css style codes:

Widget.html

Code:
<html>
<head><title>newclock</title></head>
<style>

body {
	margin: 0;
	/*background: url(Wallpaper.png) no-repeat;*/
	background-color: none;
	height: 480px;
	width: 320px;
}

    td#Backgrounds
{
	margin-top: -1px;        
	position: absolute; top: 0px; right: 0px; down: 0px; left: -1px;
}

SPAN#date
{
	font-family: Helvetica;
	font-weight: normal;
	text-align: right;
	color: white; 
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
	font-size: 14px;
	padding-right:15px;
}

</style>

</head>

<body> 

<table><tr>
	<td id="Backgrounds"> <img src="Overlay.png"></img> </td>
	</tr></table>	
	
<head>
    <base href="Private/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<script type="text/javascript" src="configureMe.js"/>
	<script type="text/javascript" src="Wallpaper.js"/>

</head>

</body>


<body onload="onLoad()">
	<div id="WeatherContainer">
		<div id="TextContainer">
		<p id="city">Loading...</p>
		<p id="temp">-º</p>
		<p id="desc">-</p>
		</div>
	<img id="weatherIcon" src=""/>
	</div>
</body>



</html>
Style sheet:

Code:
/* Inspired by Rainmanbk */


#WeatherContainer{
	margin-top:440px;
	width:100%;
	color:white;
	background-color:transparent;
	height:27px;
	padding-top:7px;
}



#TextContainer{
	font-size:15
	px;	font-family: Helvetica;	color:white;

	margin:none;
	width:320px;
}

#city{
	text-transform:capitalize;
	padding-left:10px;
}


#TextContainer p{
	margin:0;
	display:inline;
}



#city, 

#temp{
}



#temp{
	font-weight:bold;
	color=white;	padding-left:5px;
}



#desc{
	text-transform:capitalize;	color=white;
	text-align: right;
	padding-right:10px;
	float:right;
}


#weatherIcon{
	height:32px;
	width:32px;
	position:relative;
	margin-top:-23px;
	margin-left:144px;
}

Thanks in advance.