/* ------------------------------ 
PAGE STRUCTURE 
------------------------------ */

/* 
#container has an absolute width (780 pixel) 
The width of inner elements is set to auto,
in this way all inner elements have the same 
width of the element which contains them --it centers them
*/

#container{width:780px; 
margin-right: auto;
	margin-left: auto; 
	min-height:700px;

}

#quiz{width:100px; 
margin-right: auto;
	margin-left: auto; 
}

#topbar{width:auto; display:block; height:80px;}

#main{width:auto; display:block; min-height:700px;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left; }

/* 
div.spacer, solve an issue with #container height
in css 2 column layout. 
*/

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; height:24px;}


#navbar{

font-size:14px;
color:#000080;
background:#4169E1;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}

   #navbar a{
   color:#3b5d14;
   text-decoration:none;
   margin:0 10px;
   height:23px;
   line-height:23px;
   float:left;
   display:block;
   }
   
   a.active{
   height:23px;
   line-height:23px;
   background:url(pic/tb_a.png) right top no-repeat;
   padding-right:10px;
   }

   a.active span{
   background:url(pic/tb_span.png) left top no-repeat;
   height:23px;
   display:block;
   padding-left:10px;
   }
   
   a.sub{
   height:23px;
   line-height:23px;
   background:url(pic/tb_a.png) right top no-repeat;
   padding-right:10px;
   }

   a.sub span{
   background:url(pic/tb_span.png) left top no-repeat;
   height:23px;
   display:block;
   padding-left:10px;
   }   
   
   

#menu
{
width: 10em; 
height: 2em;
font: 18px arial;
color:#ffffff;
font-weight: bold;
text-align: center;
vertical-align: center;
background-color: #000060;
}


.open{
color: blue;
}

.closed{
color: red
}


h1
{ 
text-align: center;
font: 32px arial;
font weight: bold;
}

h2
{ 
text-align: center;
font: 24px arial;
}

h3
{ 

text-align: center;
font: 18px arial;
}

h4
{ 
text-align: left;
font: 18px arial;
line-height: 135%
}


p
{ 
text-align: left;
font: 16px arial;
line-height: 135%
}

p.2
{ 
text-indent:5px;
text-align: left;
font: 16px arial;
line-height: 135%
}


.imageleft
{

padding: 5px;
border: 1px solid blue;
float: left;
font: 10px;
}

.imageright
{
padding: 5px;
border: 1px solid blue;
float: right;
font: 10px;
}





/* css for weatherbug */
/* http://img.weather.weatherbug.com/Style/stickers/v2/Stickers_180x150.css */

.stickerbody{margin:0px; padding:0px;}
.wXbody {width:180px; height:150px; border:1px black solid; background:url(/pics/mountain.jpg) no-repeat; text-align:center;}
.wXbody, .wXheader, .wXalert, .wXgrill, .forecast {font-family:Arial, Helvetica; font-size:7px;}

.wXheader {height:36px; line-height:12px; text-align:center; width:180px;}
.wXgrill {height:43px; padding-left:23px; margin-top:5px; width:180px;}
.wXgrill #thermometer, .wXgrill #temperature{ float:left; height:43px; margin:0px 0px 0px 4px;}
.wXgrill #compass { float:left; height:43px; margin:0px 0px 0px 14px; }

.wXalert {background:url(../../../Images/Stickers/v2/180x150/alert.gif) no-repeat; width:176px; color:#ffffff; text-align:center;}
.wXalert a:link, .wXalert a:visited {color:#ffffff; font-family:Arial, Helvetica; font-size:9px;}

#compass { width:43px; text-align:center; }

.compass-n { background:url(http://img.weather.weatherbug.com/Images/Stickers/v2/180x150/compass-n.gif) no-repeat center; }
.compass-ne { background:url(http://img.weather.weatherbug.com/Images/Stickers/v2/180x150/compass-ne.gif) no-repeat center; }
.compass-e { background:url(http://img.weather.weatherbug.com/Images/Stickers/v2/180x150/compass-e.gif) no-repeat center; }
.compass-se { background:url(http://img.weather.weatherbug.com/Images/Stickers/v2/180x150/compass-se.gif) no-repeat center; }
.compass-s { background:url(http://img.weather.weatherbug.com/Images/Stickers/v2/180x150/compass-s.gif) no-repeat center; }
.compass-sw { background:url(http://img.weather.weatherbug.com/Images/Stickers/v2/180x150/compass-sw.gif) no-repeat center; }
.compass-w { background:url(http://img.weather.weatherbug.com/Images/Stickers/v2/180x150/compass-w.gif) no-repeat center; }
.compass-nw { background:url(http://img.weather.weatherbug.com/Images/Stickers/v2/180x150/compass-nw.gif) no-repeat center; }

#compass #windspeed { font-size:10px; font-weight:bold; margin-top:11px; }
#compass #wsmeasure { font-size:7px; font-weight:bold; }

.wXlinks { height:12px; line-height:12px; text-align:center; margin-top:3px; width:180px;}
.wXlinks a:link, .wXlinks a:visited {text-decoration:none; color:#0000ff; margin-right:3px; font-size:9px;}

.divider {clear:both;}

.wXheader h1, #zipcode h1{ font-size:9px; margin:0px; padding:0px; font-weight:normal;}
#temperature h2 { font-size:24px; display:inline; height:43px; line-height:43px; margin:0px; padding:0px;  color:#000000;}
#temperature h2.wX100plus { font-size:18px; color:#000000;}

#zipcode {font-weight:bold; font-size:10px;}
#zipcode a:link, #zipcode a:visited {text-decoration:none; color:#000000;}

.wXbody iframe { margin-top:8px;}
.wXlinks .footer {margin-top:7px;}

.error {font-family:Arial, Helvetica; font-size:11px; color:#ff0000; width:160px;}