/* learning CSS here :) */
body
{
font-size:100%;
background-color:grey;
}

.center
{
margin-left:auto;
margin-right:auto;
}

canvas#map
{
border: 1px solid black;
}

canvas#tempChart
{
border: 0px;
}

.img
{
float:center;
}

div#container
{
width:81%;
background-color:white;
padding:2px;
}

div#container2
{
width:80%;
min-width:940px;
max-width:1024px;
background-color:white;
padding:5px;
}

div#container3
{
width:80%;
min-width:1010px;
max-width:1100px;
background-color:white;
padding:5px;
}

div#container4
{
width:80%;
min-width:1210px;
max-width:1300px;
background-color:white;
padding:5px;
}

div#container5
{
width:80%;
min-width:1810px;
max-width:1900px;
background-color:white;
padding:5px;
}

div#topMessage, div#wxBox
{
width:70%;
min-width:320px;
}

div#wxCharts
{
width:80%;
min-width:320px;
text-align:center;
}

div#links
{
width:200px;
}

div#mapDiv
{
width:1000px;
height:825px;
}

div#mapDiv2
{
width:1200px;
height:900px;
}

div#mapDiv3
{
width:1800px;
height:1035px;
}

h1
{
color:black;
text-align:center;
}

/* using px for fonts doesn't work in IE, so we're using em. 16px = 1em. */
h2
{
color:black;
text-align:center;
font-size:1.1875em;
}

h3
{
color:black;
text-align:center;
font-size:1.25em;
text-decoration:underline;
}

h4
{
color:red;
font-size:1em;
}

h5
{
color:black;
text-align:center;
font-size:1em;
}

p
{
color:black;
text-align:center;
font-size:1em;
}

p.red
{
color:red;
font-size:0.9375em;
text-align:center;
}

p.bigger
{
font-size:1.4375em;
text-align:center;
text-decoration:bold;
}

p.smaller
{
font-size:0.875em;
text-align:center;
text-decoration:bold;
}

a
{
text-decoration:none;
}

a:hover
{
color:#009900;
text-decoration:underline;
}

a:active
{
text-decoration:underline;
}