/*******************************************************************************
Layout
*******************************************************************************/

#body
{
	height: 758px;
}

/*******************************************************************************
Layout > Boxes > Main
*******************************************************************************/
#main
{
	width: 632px;
	position: absolute;
	margin-left: 11px;
	top: 175px;
}

#main .box_content,
#main .box
{
	background-color: #C9E5FF;
	height: 361px;
}

#main ul#activity_nav
{
	list-style: none;
	width: 360px;
	position: absolute;
	margin-top: -53px;
	margin-left: 269px;
}

#main ul#activity_nav li
{
	float: left;
}

/*******************************************************************************
Layout > Boxes > Weather
*******************************************************************************/
#weather
{
	width: 128px;
	position: absolute;
	top: 175px;
	margin-left: 641px;
}

#weather .box_content,
#weather .box
{
	height: 253px;
	background: url(../images/weather-tile.png) repeat-x top center;
	padding: 4px;
}

#weather h2
{
	font-weight: bold;
	font-style: italic;
	border-bottom: 1px solid #63A1E8;
	text-align: center;
	
	font-size: 10px;
	font-style: italic;
	font-weight: bold;
	color: #63A1E8;		
}

#weather h3
{
	font-size: 10px;
	color: #63A1E8;
	margin-top: 7px;
	padding-bottom: 4px;
}

#weather .conditions
{
	font-weight: bold;
	font-style: italic;
	font-size: 10px;
	color: White;
	overflow: auto;
	width: 100%;
}

#weather .conditions img
{
	float: left;
	background-color: White;
	border: 1px solid #6CB0FF;
    width: 52px;
    height: 52px;
}

#weather .conditions div
{
	width: 42px;
	float: right;
}

#weather .conditions .high
{
	text-align: center;
	border-bottom: 3px solid White;
	padding-bottom: 6px;
	margin-bottom: 5px;
	margin-top: 3px;
}

#weather .conditions .low
{
	text-align: center;
}

#weather a.details
{
	display: block;
	width: 105px;
	height: 33px;
	
	padding-top: 19px;
	padding-right: 3px;
	margin-top: 6px;
	margin-right: -6px;
	margin-bottom: -6px;
	
	background-repeat: no-repeat;
	background-image: url(../images/weather-button.png);
	font-weight: bold;
	font-size: 8px;
	color: #6BB0FF;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
}

#weather a.details:hover
{
	color: #FF7F00;
}

#weather dl
{
	margin-top: 2px;
	font-weight: bold;
	font-size: 8px;
}

#weather dl dt
{
	color: White;
}

#weather dl dd
{
	margin-left: 8px;
    margin-top: 6px;
}

#weather dl dd a
{

	color: Black;
	font-size: 9px;
	text-decoration: none;
}

#weather dl dd a:hover
{
	text-decoration: underline;
}

/*******************************************************************************
Layout > Boxes > Newsletter
*******************************************************************************/
#newsletter
{
	width: 128px;
	position: absolute;
	top: 405px;
	margin-left: 641px;
}

#newsletter img
{
    vertical-align: top;
}

#newsletter .box_content,
#newsletter .box
{
	height: 84px;
    background-color: #FF7F00;
	text-align: center;
}

#newsletter a
{
	font-size: 9px;
	color: White;
}

#newsletter a:hover
{
	text-decoration: none;
}

/*******************************************************************************
Layout > Boxes > Target Groups
*******************************************************************************/
#targetgroups
{
	width: 758px;
	position: absolute;
	margin-left: 11px;
	top: 505px;
}

#targetgroups .box_content,
#targetgroups .box
{
	height: 54px;
	background-color: #6CB0FF;
}

#targetgroups #targetgroups_text
{
	float: left;
	width: 321px;
	margin-left: 10px;
	margin-top: 9px;
}

#targetgroups h2
{
	font-size: 13px;
	font-weight: bold;
	font-style: italic;
	color: White;
	padding-bottom: 3px;
}

#targetgroups h3
{
	font-size: 10px;
	color: White;
}

#targetgroups ul
{
	list-style: none;
	width: 408px;
	float: right;
	margin-right: -2px;
}

#targetgroups ul li
{
	float: left;
}

#targetgroups ul li a
{
	font-size: 10px;
	color: #4A75A0;
	text-decoration: none;
	display: block;
	width: 120px;
	height: 17px;
	background: url(../images/targetgroups-button.png) no-repeat;
	margin-right: 3px;
	margin-left: 2px;
	margin-top: 4px;
	padding-left: 10px;	
	padding-top: 4px;
}

#targetgroups ul li a:hover
{
	color: #FF7F00;
}

/*******************************************************************************
Layout > Boxes > Community Champions
*******************************************************************************/
#communitychampions.feature
{
	position: absolute;
	margin-left: 11px;
	top: 575px;
}

#communitychampions.feature div.box_content,
#communitychampions.feature div.box
{
	background: url(../images/communitychampions-tile.png) repeat-x;	
}

#communitychampions.feature h2
{
	color: #4C77A2;
}

#communitychampions.feature a:hover
{
	color: #FF7F00;
}

/*******************************************************************************
Layout > Boxes > News
*******************************************************************************/
#news.feature
{
	position: absolute;
	margin-left: 389px;
	top: 575px;
}

#news.feature div.box_content,
#news.feature div.box
{
	background-color: #FF7F00;
}

#news h2
{
	color: White;
}

#news a:hover
{
	color: #6CB0FF;
}

/*******************************************************************************
Layout > Footer
*******************************************************************************/
#footer
{
	position: absolute;
	top: 720px;
	width: 780px;
}

/*******************************************************************************
Common Buttons
*******************************************************************************/

.activity_button
{
	width: 118px;
	height: 44px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../images/activity-button_shadow.png);
}

.activity_button a
{
	display: block;
	
	width: 100px;
	height: 19px;
	
	padding-top: 7px;
	
	margin-left: 7px;
	margin-top: 6px;
	
	background-repeat: no-repeat;
	background-image: url(../images/activity-button_blue.png);

	color: White;
	text-align: center;
	
	font-weight: bold;
	font-size: 8px;
	text-decoration: none;
	text-transform: uppercase;
}

.activity_button a:hover,
.activity_button a.selected
{
	background-image: url(../images/activity-button_orange.png);
}