#whoweare {
  	display: block;
  	float:left;
  	width: 104px;
  	height: 45px;
  	background: url(images/buttons/whoweare.png) no-repeat 0 0;
}

/*Rollover effect, select half the button's height*/
#whoweare:hover { 
  background-position: 0 -45px;
  z-index:1;
}

/*Required to remove the text*/
#whoweare span {
  display: none;
}

#whatwedo {
  	display: block;
  	float:left;
  	width: 104px;
	margin-left:7px;
  	height: 45px;
  	background: url(images/buttons/whatwedo.png) no-repeat 0 0;
}

/*Rollover effect, select half the button's height*/
#whatwedo:hover { 
  background-position: 0 -44px;
  z-index:1;
}

/*Required to remove the text*/
#whatwedo span {
  display: none;
}

#lowcarbon {
  	display: block;
  	float:left;
  	width: 109px;
  	height: 45px;
	margin-left:7px;
  	background: url(images/buttons/lowcarbon.png) no-repeat 0 0;
}

/*Rollover effect, select half the button's height*/
#lowcarbon:hover { 
  background-position: 0 -44px;
  z-index:1;
}

/*Required to remove the text*/
#lowcarbon span {
  display: none;
}

#planning {
  	display: block;
  	float:left;
  	width: 87px;
  	height: 45px;
	margin-left:7px;
  	background: url(images/buttons/planning.png) no-repeat 0 0;
}

/*Rollover effect, select half the button's height*/
#planning:hover { 
  background-position: 0 -44px;
  z-index:1;
}

/*Required to remove the text*/
#planning span {
  display: none;
}

#projects {
  	display: block;
  	float:left;
  	width: 86px;
  	height: 45px;
	margin-left:7px;
  	background: url(images/buttons/projects.png) no-repeat 0 0;
}

/*Rollover effect, select half the button's height*/
#projects:hover { 
  background-position: 0 -44px;
  z-index:1;
}

/*Required to remove the text*/
#projects span {
  display: none;
}

#clients {
  	display: block;
  	float:left;
  	width: 72px;
  	height: 45px;
	margin-left:7px;
  	background: url(images/buttons/clients.png) no-repeat 0 0;
}


/*Rollover effect, select half the button's height*/
#clients:hover { 
  background-position: 0 -44px;
  z-index:1;
}

/*Required to remove the text*/
#clients span {
  display: none;
}

#careers {
  	display: block;
  	float:left;
  	width: 78px;
  	height: 45px;
	margin-left:7px;
  	background: url(images/buttons/careers.png) no-repeat 0 0;
}

/*Rollover effect, select half the button's height*/
#careers:hover { 
  background-position: 0 -44px;
  z-index:1;
}

/*Required to remove the text*/
#careers span {
  display: none;
}

#contact {
  	display: block;
  	float:left;
  	width: 80px;
	margin-left:7px;
  	height: 45px;
  	background: url(images/buttons/contact.png) no-repeat 0 0;
}

/*Rollover effect, select half the button's height*/
#contact:hover { 
  background-position: 0 -44px;
  z-index:1;
}

/*Required to remove the text*/
#contact span {
  display: none;
}