/*-----------------------------------------------------------------------------
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

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

*
	{
	border:0;
	margin:0;
	padding:0;
}

/*body
	{
	margin: 10px 0px 0px 10px;
	width:490px;
	font: 76%/150%  "Lucida Grande", "Trebuchet MS", Tahoma, Verdana, sans-serif;
	color:#000;
	text-align:left;
}*/

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

Define the width of the nav div

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

#nav
	{
	position:relative;
	margin:0;
	width:900px; 
	padding-left:45px;
	padding-right:45px;
	height: 43px;
	}

	
#nav ul 
	{
	list-style:none;
	width: 900px;
	/*height: 43px;*/
	}

#nav li 
	{

    list-style: none;
	display: inline;
	text-align: center;
	}

#nav li a 
	{
	vertical-align:top;
	text-decoration: none;
	display:block;
	float:left;	
	background: url(../images/Menu_complet_FR.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#accueil a {
	width:130px;
	height:43px;
	 }
li#projet a {
	width:138px;
	height:43px;
	 }
li#galerie a {
	width:97px;
	height:43px;
	 }
li#video a {
	width:82px;
	height:43px;
	 }
li#comparatif a {
	width:134px;
	height:43px;
	 }
li#club a {
	width:164px;
	height:43px;
	 }
li#mac a {
	width:155px;
	height:43px;
	 }
	
/*-----------------------------------------------------------------------------

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#accueil a:link, li#accueil a:visited{	
	background-position: -0px -215px;
	}
	
li#accueil a:hover, li#accueil a:focus {	
	background-position: -0px -0px;
	}
	
li#projet a:link, li#projet a:visited {	
	background-position: -130px 0px;
	}
	
li#projet a:hover, li#projet a:focus {	
	background-position: -98px -86px;
	width: 170px;
	margin-left: -32px;
	}	
	
li#galerie a:link, li#galerie a:visited {	
	background-position: -268px 0px;
	}
	
li#galerie a:hover, li#galerie a:focus {	
	background-position: -236px -172px;
	width: 129px;
	margin-left: -32px;
	}	
	
li#video a:link, li#video a:visited {	
	background-position: -365px 0px;
	}
	
li#video a:hover, li#video a:focus {	
	background-position: -333px -258px;
	width: 114px;
	margin-left: -32px;
	}

li#comparatif a:link, li#comparatif a:visited {	
	background-position: -447px 0px;
	}
	
li#comparatif a:hover, li#comparatif a:focus {	
	background-position: -415px -344px;
	width: 166px;
	margin-left: -32px;
	}
li#club a:link, li#club a:visited {	
	background-position: -581px 0px;
	}
	
li#club a:hover, li#club a:focus {	
	background-position: -541px -430px;
	width: 204px;
	margin-left: -40px;
	}

li#mac a:link, li#mac a:visited {	
	background-position: -745px 0px;
	}
	
li#mac a:hover, li#mac a:focus {	
	background-position: -713px -516px;
	width: 187px;
	margin-left: -32px;
	}

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

Set the on states using the body id.

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

body#accueil-page li#accueil a:link, body#accueil-page li#accueil a:visited{	
	background-position: -0px -0px;
	}

body#accueil-page li#projet a:hover, body#accueil-page li#projet a:focus {	
	background-position: -98px -43px;
	width: 170px;
	margin-left: -32px;
	}

body#projet-page li#projet a:link, body#projet-page li#projet a:visited {	
	background-position: -98px -86px;
	width: 170px;
	margin-left: -32px;
	}

body#projet-page li#accueil a:hover, body#projet-page li#accueil a:focus {	
	background-position: -0px -43px;
	overflow: auto;
	position: relative;

	}

body#projet-page li#galerie a:hover, body#projet-page li#galerie a:focus {	
	background-position: -236px -129px;
	width: 129px;
	margin-left: -32px;

	}
	
body#galerie-page li#galerie a:link, body#galerie-page li#galerie a:visited {	
	background-position: -236px -172px;
	width: 129px;
	margin-left: -32px;
	}


body#galerie-page li#projet a:hover, body#galerie-page li#projet a:focus {	
	background-position: -98px -129px;
	width: 170px;
	margin-left: -32px;
	overflow: auto;
	position: relative;
	}
	
body#galerie-page li#video a:hover, body#galerie-page li#video a:focus {	
	background-position: -333px -215px;
	width: 114px;
	margin-left: -32px;
	position: relative;
	}

body#video-page li#video a:link, body#video-page li#video a:visited {	
	background-position: -333px -258px;
	width: 114px;
	margin-left: -32px;
	}


body#video-page li#galerie a:hover, body#video-page li#galerie a:focus {	
	background-position: -236px -215px;
	width: 129px;
	margin-left: -32px;
	overflow: auto;
	position: relative;
	}
	
body#video-page li#comparatif a:hover, body#video-page li#comparatif a:focus {	
	background-position: -415px -301px;
	width: 166px;
	margin-left: -32px;
	position: relative;
	}

body#comparatif-page li#comparatif a:link, body#comparatif-page li#comparatif a:visited {	
	background-position: -415px -344px;
	width: 166px;
	margin-left: -32px;
	}


body#comparatif-page li#video a:hover, body#comparatif-page li#video a:focus {	
	background-position: -333px -301px;
	width: 114px;
	margin-left: -32px;
	overflow: auto;
	position: relative;
	}
	
body#comparatif-page li#club a:hover, body#comparatif-page li#club a:focus {	
	background-position: -549px -387px;
	width: 196px;
	margin-left: -32px;
	position: relative;
	}
	
body#club-page li#club a:link, body#club-page li#club a:visited {	
	background-position: -549px -430px;
	width: 196px;
	margin-left: -32px;
	}


body#club-page li#comparatif a:hover, body#club-page li#comparatif a:focus {	
	background-position: -415px -387px;
	width: 166px;
	margin-left: -32px;
	overflow: auto;
	position: relative;
	}
	
body#club-page li#mac a:hover, body#club-page li#mac a:focus {	
	background-position: -713px -473px;
	width: 187px;
	margin-left: -32px;
	position: relative;
	}

body#mac-page li#mac a:link, body#mac-page li#mac a:visited {	
	background-position: -713px -516px;
	width: 187px;
	margin-left: -32px;
	}


body#mac-page li#club a:hover, body#mac-page li#club a:focus {	
	background-position: -549px -473px;
	width: 196px;
	margin-left: -32px;
	overflow: auto;
	position: relative;
	}
	

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

Styles for the demo page

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

/*h1
	{
	margin: 30px 0px 10px 5px;
	}

p
	{
	margin: 10px 0px 10px 5px;
	}

.browser-list
	{
	margin-left: 20px;
	}*/