* {
	margin:0; 
	padding:0;
}

html, body,{
	height: 100%;
	}

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

body{
	background-color:#CCCCCC;
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	}
	
#wrapper{
	margin:00px auto; /*----not sure but i think this centers the website----*/
	width:970px;
	min-height:100%;
	margin-bottom:-100px;
	position:relative;
	}

img{
	border:none;
	}

.logo{
	float:left
}

#form{
	position:absolute;
	top:0px;
	right:15px;
	width:197px;
	font-family:inherit;
	font-size:1em;
	}

a{
	text-decoration:none;
	color:#464646;
	}
	
a:active{
	outline: none;
	}

a:focus{
	-moz-outline-style: none;
	}

a:hover{
	color:#000000;
	}

#header {
	position:relative;
	width:970px; 
	height:140px;
	background-color:#ffffff; 
	}

#navigation{
	background-color:#464646;
	height:49px;
	width:100%;
	position:relative;
	text-transform:uppercase;
	border-top:1px solid #7488b9;
	border-bottom:1px solid #7488b9;
	}

#navigation ul{
	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 center; /*----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: 61px; /*----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: 48px; /*----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/nav_home.png) no-repeat;
	right:670px; /*---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;
	}

/*------------team button-------------*/
#navigation .team{
	width: 99px; /*----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: 48px; /*----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/nav_team.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	right:571px; /*---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;
	}

/*------------personal button-------------*/
#navigation .personal{
	width: 175px; /*----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: 48px; /*----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/nav_personal.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	right:396px; /*---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;
	}
	
/*------------business button-------------*/
#navigation .business{
	width: 173px; /*----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: 48px; /*----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/nav_business.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	right:223px; /*---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;
	}

/*------------resources button-------------*/
#navigation .resources{
	width: 142px; /*----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: 48px; /*----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/nav_resource.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	right: 81px; /*---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: 81px; /*----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: 48px; /*----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/nav_contact.png) no-repeat; /*----this inserts the image of the button where we want it----*/
	right: 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;
	}
	
#content{
	background:url(images/team_bg.gif) repeat-x;
	width:100%;
	min-height:620px;
	height:auto !important;
	height:620px;
	background-color:#FFFFFF;
	border-top:solid 15px #7488b9;
	border-bottom:solid 10px #7488b9;
	}

#text{
	width:550px;
	margin:0px auto;
	}

#text h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	color:#7488b9;
	margin-top:20px;
	}

#text p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#464646;
	margin-top:5px;
	}
	
#buttons{
	margin-top:15px;
	}


h2#homes a{
	width:396px;
	height:144px;
	background:url(images/homeBtn.jpg);
	background-position:left top;
	text-indent:-9999px;
	margin:0px auto;
	display:block;
	}
	
h2#homes a:hover{
	width:396px;
	height:144px;
	background:url(images/homeBtn.jpg);
	background-position:left bottom;
	text-indent:-9999px;
	margin:0px auto;
	}
	
h2#auto a{
	width:396px;
	height:144px;
	background:url(images/autoBtn.jpg);
	background-position:left top;
	text-indent:-9999px;
	margin:0px auto;
	display:block;
	}
	
h2#auto a:hover{
	width:396px;
	height:144px;
	background:url(images/autoBtn.jpg);
	background-position:left bottom;
	text-indent:-9999px;
	margin:0px auto;
	}	
	
h2#health a{
	width:396px;
	height:144px;
	background:url(images/healthBtn.jpg);
	background-position:left top;
	text-indent:-9999px;
	margin:0px auto;
	display:block;
	}

h2#health a:hover {
	width:396px;
	height:144px;
	background:url(images/healthBtn.jpg);
	background-position:left bottom;
	text-indent:-9999px;
	margin:0px auto;
	}



#footer{
	background:#bcbcbc;
	height:100px;
	width:970px;
	text-align:center;
	position:relative;
	border-top:2px solid #464646;
	border-top:2px solid #464646;
	list-style:none;
	margin:0px auto;
	}

.clearfooter {
height:100px;
clear:both;
}


#footer span{
	position:absolute;
	display:none;
	}

#footer li{
	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----*/
	}
	
#footer .lubbock{
	width: 269px; /*----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: 83px; /*----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/footer_lubbock.png); /*----this inserts the image of the button where we want it----*/
	left: 78px; /*---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: 10px;
	border-right:1px solid #666666;
	}

#footer .midland{
	width: 269px; /*----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: 83px; /*----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/footer_midland.png); /*----this inserts the image of the button where we want it----*/
	left:348px; /*---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:10px;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #666666;
	}

#footer .pampa{
	width: 269px; /*----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: 83px; /*----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/footer_pampa.png); /*----this inserts the image of the button where we want it----*/
	left:619px; /*---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:10px;
	border-left:1px solid #CCCCCC;
	}

@media screen and (-webkit-min-device-pixel-ratio:0){
#footer {margin-top: -25px;}
}