﻿body 
{
	background:#95c3d0;
	margin:0;
	padding:0;
	text-align:center;
}

/****************************************************
site background creation --- this should not be 
changed---the content background is fixed and cannot 
be expanded---
****************************************************/
.topSection
{
	width:100%;
	height:204px;
	position:absolute;
	top:0px;
	left:0px;
	background:transparent url('../images/topSection.jpg') no-repeat center top;
	z-index:0;
}

.middleSection
{
	width:100%;
	height:487px;
	position:absolute;
	top:204px;
	left:0px;
	background:transparent url('../images/middleSection.jpg') no-repeat center top;
	z-index:1;
}

.bottomSection
{
	width:100%;
	height:259px;
	position:absolute;
	top:691px;
	left:0px;
	background:transparent url('../images/bottomSection.jpg') no-repeat center top;
	z-index:2;
}	

.contentWrap
{
	width:800px;
	margin:0 auto;
	text-align:left;
}

/***********************************************
logo element 
**********************************************/
#logo
{
	position: relative;
	width: 193px;
	height: 187px;
	float:left;
	left:-80px;
	top:10px;
	background-image: url('../images/logo.png');
	z-index: 3;
	background-repeat: no-repeat;
}

#logo img
{
	border:none;
}

/**************************************************
menu navigation
*************************************************/
#navi
{
	position:relative;
	width:430px;
	height:150px;
	float:right;
	left:30px;
	z-index:4;
}

#navi a#home, #navi a#about, #navi a#events, #navi a#forum, #navi a#contact
{
	display:block;
	width:77px;
	height:147.5px;
	float:left;
	margin:-20px 3px 0 3px;
}

#navi a#home:hover, #navi a#about:hover, #navi a#events:hover, #navi a#forum:hover, #navi a#contact:hover
{
	background-position:0 -147.5px;
}

#navi a#home{background:transparent url('../images/home.png') no-repeat;}
#navi a#about{background:transparent url('../images/about.png') no-repeat;}
#navi a#events{background:transparent url('../images/events.png') no-repeat;}
#navi a#forum{background:transparent url('../images/forum.png') no-repeat;}
#navi a#contact{background:transparent url('../images/contact.png') no-repeat;}

body#h_home a#home, body#h_about a#about, body#h_events a#events, body#h_forum a#forum, body#h_contact a#contact 
{
	background-position:0 -147.5px;
}

/*****************************************************
content boxes on homepage
--the content boxes cannot be expand...however I added
a scroll bar to it, if more content is needed--
****************************************************/
.contentBox1
{
	position:relative;
	width:507px;
	height:146px;
	float:left;
	z-index:6;
	top:0px;
	left:40px;
	background:transparent url('../images/contentBox1.png') no-repeat;
}

.contentBox1_inner
{
	width:470px;
	margin:20px;
	padding-right:10px;
	height:100px;
	overflow-x:hidden;
	overflow-y:auto;	
}

.contentBox1_inner p
{
	font:bold 13px Tahoma, Arial, sans-serif;
	color:#4f4f50;	
	line-height:17px;
}

.contentBox2
{
	position:relative;
	width:515px;
	height:300px;
	float:left;
	z-index:5;
	top:5px;
	left:50px;
	background:transparent url('../images/contentBox2.png') no-repeat;
}

.contentBox2_inner
{
	width:470px;
	margin:20px;
	padding-right:10px;
	height:240px;
	overflow-x:hidden;
	overflow-y:auto;
}

.contentBox2_inner p
{
	font:bold 13px Tahoma, Arial, sans-serif;
	color:#4f4f50;	
	line-height:17px;
}

/****************************************************
buttons for homepage
***************************************************/

.welcomeButton
{
	position:relative;
	width:138px;
	height:55px;
	float:left;
	z-index:7;
	top:120px;
	left:0px;
	background:transparent url('../images/welcomeButton.gif') no-repeat;
}

.dontMissButton
{
	position:relative;
	width:193px;
	height:81px;
	float:left;
	top:80px;
	left:10px;
	z-index:8;
	background:transparent url('../images/dontMissButton.gif') no-repeat;
}

.dontMissButton img
{
	border:none;
}

.eventButton
{
	position:relative;
	width:339px;
	height:132px;
	float:left;
	top:-20px;
	left:250px;
	z-index:9;
	background:transparent url('../images/eventButton.gif') no-repeat;
}

.eventButton img
{
	border:none;
}

/************************************************
footer section
************************************************/
#footer
{
	position:relative;
	width:550px;
	height:50px;
	float:left;
	z-index:9;
	top:50px;
	left:-40px;
}

#footer p
{
	font:bold 11px Tahoma, Arial, sans-serif;
	color:#333;	
}

/**********************************************
general styling
**********************************************/

/*image in contentbox with text wrapping*/
.floatimgleft 
{
	float:left;
	margin:10px 10px 0 0;
}

/*this add's transparency to the png images
used for IE6 and less*/
#logo, #navi a#home, #navi a#about, #navi a#events, #navi a#forum, #navi a#contact, .contentBox1, .contentBox2
{ 
	behavior: url('pngfix/png.htc'); 
}
