Mobile Weather Web App Sample Home Pages - C

<div style="border-left: 1px solid lightgray; border-right: 1px solid lightgray;margin: 0px auto;max-width: 40em;">

<div style="background: black; color: white;padding-left:10px; padding-top:5px; padding-bottom:5px;">
Toledo Weather --12:15 pm 16Jun2013--
</div>

<div style="border-bottom: 1px solid lightgray; color:darkred; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right; padding-right:10px;">&rarr;</div>
Severe Thunderstorm Watch <span style="color:gray;">--until 9:00pm--</span>
</div>

<div style="border-bottom: 1px solid lightgray; color:darkred; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right; padding-right:10px;">&rarr;</div>
Mesoscale Discussion <span style="color:gray;">--1:30pm--</span>
</div>

<div style="border-bottom: 1px solid lightgray; color:darkred; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right; padding-right:10px;">&rarr;</div>
Hazardous Weather Outlook <span style="color:gray;">--5:42am--</span>
</div>

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right; padding-right:10px;">&rarr;</div>
Partly Cloudy 74 <span style="color:gray;">--11:52am--</span>
</div>

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
Radar                             
</div>

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
7-day Forecast <span style="color:gray;">--10:25am--</span>   
</div>

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
Forecast Discussion <span style="color:gray;">--9:42am--</span>      
</div>

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
Convective Outlook   
</div>



<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
More Radars and Maps
</div>

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
Metcalf & Suburban AP
</div>

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
Lake Forecast
</div>

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
External Links
</div>

</div>



--If two lines per row, 25 chars max with larger font and 35 chars max with smaller font per row for smartphone in portrait mode. use black or charcoal link text. mouse over causes link area to change to grey background.--

<div style="border-bottom: 1px solid lightgray; color:black; font-weight:bold; padding-left:10px; padding-top:10px; padding-bottom:10px;">
<div style="float: right;  padding-right:10px;">&rarr;</div>
No Hazardous Weather   
</div>

#weatherapp