@charset "utf-8";
/* CSS Document */


/** www.webdesignerforum.co.uk CSS Rollover Tutorial by Ben Scott **/



#navigation div {
	width: 971px; 
	height: 33px; 
	top: 0px; /** Determines the height from the top of the page **/
	left: 0px; /** Determines the width from the left of the page **/
	margin: auto 0; padding: 0;
}
#navigation div div {
	display: block;
}
#navigation  div  a:link, #navigation  div a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#212020;
text-align:center;
text-decoration:none;
padding-top:10px;
border: none;
display: block; 
position: absolute; 
top: 0; 
	
}
#navigation div div a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#590404;
text-align:center;
padding-top:10px;
	border: none;
	display: block; 
	position: absolute; 
	top: 0; 
	
}
#navigation div.blue {
	left: 0px; /** how many px left of the first button i.e blue **/
	width: 91px; /** width of the button in active state **/
	height: 0px; /** height of the button in active state **/
}
#navigation div div.green  {
	left: 91px; /** how many px left of the first button i.e blue **/
	width: 100px; /** width of the button in active state **/
	height: 0px; /** height of the button in active state **/
}
#navigation div div.orange  { 
	left: 191px ; /** how many px left of the first button i.e blue **/
	width: 188px; /** width of the button in active state **/
	height: 0px; /** height of the button in active state **/
}
#navigation div div.red  { 
	left: 379px; /** how many px left of the first button i.e blue **/
	width: 149px; /** width of the button in active state **/
	height: 0px; /** height of the button in active state **/
}
#navigation div div.request  { 
	left: 528px; /** how many px left of the first button i.e blue **/
	width: 107px; /** width of the button in active state **/
	height: 0px; /** height of the button in active state **/
}
#navigation div div.industry { 
	left: 635px; /** how many px left of the first button i.e blue **/
	width: 118px; /** width of the button in active state **/
	height: 0px; /** height of the button in active state **/
}
#navigation div div.support  { 
	left: 753px; /** how many px left of the first button i.e blue **/
	width: 93px; /** width of the button in active state **/
	height: 0px; /** height of the button in active state **/
}
#navigation div div.contact  { 
	left: 846px; /** how many px left of the first button i.e blue **/
	width: 124px; /** width of the button in active state **/
	height: 0px; /** height of the button in active state **/
}

#navigation div.blue a:link, #navigation div.blue a:visited {
	background: url(strip.jpg) no-repeat 0 0;
	left: 0px; /** how many px left of the first button i.e blue **/
	width: 91px; /** width of the button in active state **/
	height: 33px; /** height of the button in active state **/
}
#navigation div div.green a:link, #navigation div div.green a:visited {
	background: url(strip.jpg)  no-repeat -91px 0;
	left: 91px; /** how many px left of the first button i.e blue **/
	width: 100px; /** width of the button in active state **/
	height: 33px; /** height of the button in active state **/
	
}
#navigation div div.orange a:link, #navigation div div.orange a:visited { 
	background: url(strip.jpg) no-repeat -191px 0;
	left: 191px ; /** how many px left of the first button i.e blue **/
	width: 188px; /** width of the button in active state **/
	height: 33px; /** height of the button in active state **/
}
#navigation div div.red a:link, #navigation div div.red a:visited { 
	background: url(strip.jpg) no-repeat -379px 0;
	left: 379px; /** how many px left of the first button i.e blue **/
	width: 149px; /** width of the button in active state **/
	height: 33px; /** height of the button in active state **/
}
#navigation div div.request a:link, #navigation div div.request a:visited { 
	background: url(strip.jpg) no-repeat -528px 0;
	left: 528px; /** how many px left of the first button i.e blue **/
	width: 107px; /** width of the button in active state **/
	height: 33px; /** height of the button in active state **/
}
#navigation div div.industry a:link, #navigation div div.industry a:visited { 
	background: url(strip.jpg) no-repeat -635px 0;
	left: 635px; /** how many px left of the first button i.e blue **/
	width: 118px; /** width of the button in active state **/
	height: 33px; /** height of the button in active state **/
}
#navigation div div.support a:link, #navigation div div.support a:visited { 
	background: url(strip.jpg) no-repeat -753px 0;
	left: 753px; /** how many px left of the first button i.e blue **/
	width: 93px; /** width of the button in active state **/
	height: 33px; /** height of the button in active state **/
}
#navigation div div.contact a:link, #navigation div div.contact a:visited { 
	background: url(strip.jpg) no-repeat -846px 0;
	left: 846px; /** how many px left of the first button i.e blue **/
	width: 124px; /** width of the button in active state **/
	height: 33px; /** height of the button in active state **/
}
/** ______________________________________hover state starts here___________________________________ **/

#navigation div div.blue a:hover {
	background: url(strip.jpg) no-repeat 0px -33px; /** moves image up 30px showing the rollover states **/ 
}
#navigation div div.green a:hover {
	background: url(strip.jpg) no-repeat -91px -33px; /** moves image up 30px and right 80px showing the rollover states **/
}
#navigation div div.orange a:hover {
	background: url(strip.jpg) no-repeat -191px -33px;
}
#navigation div  div.red a:hover {
	background: url(strip.jpg) no-repeat -379px -33px;
}
#navigation div div.request a:hover {
	background: url(strip.jpg) no-repeat -528px -33px;
}
#navigation div div.industry a:hover {
	background: url(strip.jpg) no-repeat -635px -33px;
}
#navigation div div.support a:hover {
	background: url(strip.jpg) no-repeat -753px -33px;
}
#navigation div div.contact a:hover {
	background: url(strip.jpg) no-repeat -846px -33px;
}