/*-----------------------------------------------------------------------------
Overlapping CSS Navigation
version:   1.0
date:      09/12/06
author:    george ornbo
email:     george at shapeshed dot com

Licensed under a 2.0 Creative Commons License

-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------

Define the width of the nav div

-----------------------------------------------------------------------------*/


#navigation ul 
	{
	margin: 0;
	padding: 0;
	list-style:none;
	width: 764px;
	height: 21px;
	}

#navigation li 
	{
    list-style: none;
	display: inline;
	text-align: left;
	}

#navigation li a 
	{
	text-decoration: none;
	display:block;
	float:left;	
	background: url(../images/nav/all_states.jpg) no-repeat;
	text-indent:-9999px;
	}	
	
/*-----------------------------------------------------------------------------

Define the width of each li item. This is used as a letter box to show the 
correct part of the background image

-----------------------------------------------------------------------------*/	
	
	
li#resource a {
	width:132px;
	height:21px;
	 }
li#products a {
	width:76px;
	height:21px;
	 }
li#services a {
	width:70px;
	height:21px;
	 }
li#support a {
	width:68px;
	height:21px;
	 }
	 
li#partners a {
	width:74px;
	height:21px;
	 }	 
	 
li#about a {
	width:85px;
	height:21px;
	 }	 	 
	
/*-----------------------------------------------------------------------------

Position the background image within the left boxes we have created. Use hover states
to show the correct background position for hover states.

A negative margin is used to show the whole tab. As this doesn't work in IE a 
separate stylesheet is used for IE6 and below.

-----------------------------------------------------------------------------*/	


li#resource a:link, li#home a:visited {	
	background-position: 0 0;
	}
	
li#resource a:hover, li#resource a:focus {	
	background-position: 0 -21px;
	}
	
li#products a:link, li#products a:visited {	
	background-position: -132px 0px;
	}
	
li#products a:hover, li#products a:focus {	
	background-position: -112px -42px;
	width: 96px;
	margin-left: -20px;
	}	
	
li#services a:link, li#services a:visited {	
	background-position: -207px 0px;
	}
	
li#services a:hover, li#services a:focus {	
	background-position: -190px -63px;
	width: 88px;
	margin-left: -18px;
	}	
	
li#support a:link, li#support a:visited {	
	background-position: -276px 0px;
	}
	
li#support a:hover, li#support a:focus {	
	background-position: -256px -84px;
	width: 89px;
	margin-left: -21px;
	}

li#partners a:link, li#partners a:visited {	
	background-position: -344px 0px;
	}
	
li#partners a:hover, li#partners a:focus {	
	background-position: -323px -105px;
	width: 95px;
	margin-left: -21px;
	}
	
li#about a:link, li#about a:visited {	
	background-position: -417px 0px;
	}
	
li#about a:hover, li#about a:focus {	
	background-position: -395px -126px;
	width: 110px;
	margin-left: -23px;
	}	

/*-----------------------------------------------------------------------------

Set the on states using the body id.


body#home-page li#home a:link, body#home-page li#home a:visited {	
	background-position: -1px -21px;
	}

body#home-page li#about a:hover, body#home-page li#about a:focus {	
	background-position: -102px -76px;
	width: 150px;
	margin-left: -32px;
	}

body#about-page li#about a:link, body#about-page li#about a:visited {	
	background-position: -102px -114px;
	width: 150px;
	margin-left: -32px;
	}

body#about-page li#home a:hover, body#about-page li#home a:focus {	
	background-position: -0px -152px;
	overflow: auto;
	position: relative;

	}

body#about-page li#services a:hover, body#about-page li#services a:focus {	
	background-position: -218px -190px;
	width: 149px;
	margin-left: -34px;

	}
	
body#services-page li#services a:link, body#services-page li#services a:visited {	
	background-position: -218px -228px;
	width: 149px;
	margin-left: -34px;
	}


body#services-page li#about a:hover, body#services-page li#about a:focus {	
	background-position: -102px -266px;
	width: 150px;
	margin-left: -32px;
	overflow: auto;
	position: relative;
	}
	
body#services-page li#contact a:hover, body#services-page li#contact a:focus {	
	background-position: -335px -304px;
	width: 150px;
	margin-left: -32px;
	position: relative;
	}
	
body#contact-page li#contact a:link, body#contact-page li#contact a:visited {	
	background-position: -335px -342px;
	width: 150px;
	margin-left: -32px;
	}

body#contact-page li#services a:hover, body#contact-page li#services a:focus {	
	background-position: -218px -380px;
	width: 149px;
	margin-left: -34px;
	overflow: auto;
 	position: relative;
	}

body#contact-page li#blogs a:hover, body#contact-page li#blogs a:focus {	
	background-position: -457px -380px;
	width: 147px;
	margin-left: -29px;
	overflow: auto;
	position: relative;
	}
	
-----------------------------------------------------------------------------*/	

/*-----------------------------------------------------------------------------

Styles for the demo page

-----------------------------------------------------------------------------*/