* {
	border:none; 
	margin:0; 
	padding:0;
}

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}


#wrap {
	margin:00px auto; /*----not sure but i think this centers the website----*/
	width:960px;
	height:100%;
	position:relative; 
/*	-webkit-box-shadow: 0 5px 25px #888;
    -moz-box-shadow: 0 0 10px #000;*/
	}

#header {
	position:relative;
	width:960px; 
	height:244px; 
	color:#fff;
	}

#navigation {
	position:absolute; 
	top:0px; /*----These two values say how far in and down the whole navigation menu is an relation to the header div; allows room for the logo*/
	left:562px;
	width:398px; 
	height:59px; 
	font-family:Arial, Helvetica, sans-serif; 
	text-align:center; 
	list-style:none
	}
	
#navigation span{
	position:absolute;
	display:none;
	}

#navigation a{
	display:block;
	position:absolute;
	outline:none;
	text-indent:-2500%;/*----This gets the text from the button out if the way so it won't show when we insert the images----*/
	}

#navigation a:hover{
	background-position:left bottom; /*----I believe that this does positions the 'bottom left' of the image at the 'bottom left' of the area it takes up?----*/
	}
	
#navigation a:hover span{
	display:block;
	}

/*------------home button-------------*/
#navigation .home{
	width: 96px; /*----giving each button a class of its own allows us to specify different widths for each of the buttons; also allows us to specifically place them----*/
	height: 59px; /*----when doing the sprite thing, remember that the width and height should only be for one element of the sprite, not the whole picture since they will shift----*/
	background:url(images/home_btn.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	left: 0px; /*---this says where it will go in relation to the start of the nav bar; in this case we left space around the image so we want it to start all the way at the left----*/
	top: 0px;
	}

/*------------about button-------------*/
#navigation .about{
	width: 96px; /*----giving each button a class of its own allows us to specify different widths for each of the buttons; also allows us to specifically place them----*/
	height: 59px; /*----when doing the sprite thing, remember that the width and height should only be for one element of the sprite, not the whole picture since they will shift----*/
	background:url(images/about_btn.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	left: 96px; /*---this says where it will go in relation to the start of the nav bar; in this case we left space around the image so we want it to start all the way at the left----*/
	top: 0px;
	}

/*------------work button-------------*/
#navigation .work{
	width: 96px; /*----giving each button a class of its own allows us to specify different widths for each of the buttons; also allows us to specifically place them----*/
	height: 59px; /*----when doing the sprite thing, remember that the width and height should only be for one element of the sprite, not the whole picture since they will shift----*/
	background:url(images/work_btn.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	left: 192px; /*---this says where it will go in relation to the start of the nav bar; in this case we left space around the image so we want it to start all the way at the left----*/
	top: 0px;
	}

/*------------contact button-------------*/
#navigation .contact{
	width: 110px; /*----giving each button a class of its own allows us to specify different widths for each of the buttons; also allows us to specifically place them----*/
	height: 59px; /*----when doing the sprite thing, remember that the width and height should only be for one element of the sprite, not the whole picture since they will shift----*/
	background:url(images/contact_btn.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	left: 288px; /*---this says where it will go in relation to the start of the nav bar; in this case we left space around the image so we want it to start all the way at the left----*/
	top: 0px;
	background-position:bottom left;
	}

#banner {
	background:url(images/banner_bg.gif) repeat;
	width:960px;
	height:147px;
	position:absolute;
	top:96px;
	left:0px;
	}

#content{
	position:relative;
	height:450px;
	padding-top:25px;
	padding-bottom:25px;
	}
	
#left{
	position:relative;
	margin:0px auto;
	width:800px;
	}

#left h1{
	font-family:Arial, Helvetica, sans-serif;
	color:#fbb040;
	font-size:81px;
	}

#left h2{
	font-family:Arial, Helvetica, sans-serif;
	color:#4d5c53;
	font-size:41px;
	font-weight:200;
	margin-top:-10px;
	}

#left hr{
	background-color:#009fc2;
	width:798px;
	height:2px;
	margin-top:20px;
	}

p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:19px;
	color:#4d5c53;
	margin-top:25px;
	width:695px;
	}

p.address{
	text-transform:uppercase;
	}
	
p em{
	font-style:normal;
	font-weight:bold;
	}

p.phone{
	text-transform:none;
	margin-top:20px;
	line-height:26px;
	}
	
p.phone a{
	text-decoration:none;
	color:inherit;
	}

p.phone a:hover{
	text-decoration:none;
	color:#009fc2;
	}

p.phone em{
	color:#fbb040;
	}

#footer{
	clear:both;
	position:relative;
	left:0;
	height:145px;
	}

#footer hr{
	height:2px;
	color:#c5cdc7;
	background-color:#c5cdc7;
	width:960px;
	position:relative;
	top:0px;
	}

#footer p{
	width:285px;
	text-align:right;
	font-family:Trade Gothic LT Std, Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#4c5b52;
	text-transform:uppercase;
	line-height:20px;
	padding-right:20px;
	position:relative;
	top:5px;
	left:650px;
	}