* {
	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;
	}

h5{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	text-transform:uppercase;
	text-align:right;
	color:#464646;
	}

h6{
	font-family:Arial, Helvetica, sans-serif;
	font-size:8px;
	color:#575757;
	text-transform:uppercase;
	display:inline;
	position:relative;
	top:5px;
	}

#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----*/
	background-position:bottom left; /*----this makes this button appear in it's active state for the current page----*/
	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%;
	background-color:#FFFFFF;
	}

#content a{
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	color:#464646;
	}
	
#content a:hover{
	font-weight:bold;
	color:#000000;
	}


#upper{
	height:375px;
	overflow:hidden;
	}

#picture{
	position:relative;
	float:left;
	width:500px;
	text-align:center;
	top:25px;
	}

#vrule{
	position:relative;
	float:left;
	top:50px;
	}

#mission{
	width:440px;
	position:relative;
	float:right;
	}	

#mission p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#464646;
	padding:35px 35px 0 0;
	line-height:30px;
	}

#lower{
	overflow:hidden;
	padding-bottom:35px;
	}

#bios{
	clear:both;
	text-align:center;
	}

.left{
	position:relative;
	float:left;
	width:300px;
	top:10px;
	left:150px;
	margin-top:15px;
	margin-bottom:25px;
	}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}


 /* Hides from IE Mac \*/ 
 * html .clearfix {height: 1%;} 
 .clearfix{display:block;}
  /* End Hack */ 
	
.right{
	position:relative;
	float:left;
	width:400px;
	text-align:left;
	left:100px;
	top:10px;
	margin-top:15px;
	margin-bottom:25px;
	}
	
.hrule{
	position:relative;
	left:-15px;
	visibility:hidden;
	}

h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	color:#464646;
	display:inline;
	}
	
h2{
	clear:both;
	font-family:Arial, Helvetica, sans-serif;
	font-size:19px;
	font-weight:bold;
	color:#7488b9;
	text-transform:uppercase;
	position:relative;
	margin:20px 0px 0px;
	left:145px;
	text-align:left;
	}

h3{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-transform:uppercase;
	color:#7488b9;
	font-weight:lighter;
	}
	
h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#464646;
	position:relative;
	top:5px;
	}	

p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#464646;
	}
	
.city{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#464646;
	text-transform:uppercase;
	text-align:right;
	position:absolute;
	top:4px;
	right:0;
	
	}

.person{
	clear:both;
	position:relative;
	}
	
#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;}
}