ul#tunnel, ul#tunnel-connect{
  margin: 0 auto;
  padding: 0px;
  list-style-type: none;
  clear: both;
  width: 1000px;
  height: 148px;
  font-weight: bold;
  background: #084384;
}
#pre-contenu ul#tunnel, ul#tunnel-connect {
  background: none;
}

ul#tunnel li, ul#tunnel-connect li{
  margin: 0;
  padding: 0;
  float: left;
  display: block;
  text-align: center;
  font-size: 14px;
}
ul#tunnel li a, ul#tunnel-connect li a{
  font-family: arial;
  display: block;
  height: 35px;
  color: #fff;
  text-decoration: none;
}
ul#tunnel li a:hover, ul#tunnel-connect li a:hover{
  text-shadow: 0px 0px 3px #fff;
  -webkit-text-shadow: 0px 0px 0px #fff;
  text-decoration: none;
}

ul#tunnel li.actif a, ul#tunnel-connect li.actif a{
  text-shadow: 0px 0px 3px #fff;
  -webkit-text-shadow: 0px 0px 0px #fff;
  font-weight: bold;
}

ul#tunnel li span, ul#tunnel-connect li span{
  display: block;
  height: 35px;
  color: #ccc;
  font-family: arial;
  font-style: bold;
}

ul#tunnel li a, ul#tunnel-connect li a,
ul#tunnel li span, ul#tunnel-connect li span{
  padding-top: 100px;
  padding-bottom: 20px;
}

ul#tunnel a, ul#tunnel span
{
	width: 200px;
	/*background:url(../images/design/icons-tunnel.png) 50% 0 no-repeat;*/
}

ul#tunnel-connect a, ul#tunnel-connect span{
  width: 140px;
  /*background:url(../images/design/icons-tunnel.png) 50% 0 no-repeat;*/
}

ul#tunnel li{
	background-repeat: no-repeat;
}

ul#tunnel li#tunnel-web, ul#tunnel li#tunnel-web:hover, ul#tunnel li#tunnel-web.actif, ul#tunnel li#tunnel-developpement-tests, ul#tunnel li#tunnel-developpement-tests:hover, ul#tunnel li#tunnel-developpement-tests.actif, ul#tunnel li#tunnel-divertissements, ul#tunnel li#tunnel-divertissements:hover, ul#tunnel li#tunnel-divertissements.actif, ul#tunnel li#tunnel-machines-virtuelles, ul#tunnel li#tunnel-machines-virtuelles:hover, ul#tunnel li#tunnel-machines-virtuelles.actif, ul#tunnel li#tunnel-outils-collaboratifs, ul#tunnel li#tunnel-outils-collaboratifs:hover, ul#tunnel li#tunnel-outils-collaboratifs.actif{
	background: url('../images/design/icon-usages.png') no-repeat;
	width: 200px; 
	height: 155px;
 
}

ul#tunnel li#tunnel-web{ background-position: -400px -620px;  transition: opacity 0.5s ease-in-out;}
ul#tunnel li#tunnel-web:hover{ background-position: -400px -0px;  opacity: 0.9; }
ul#tunnel li#tunnel-web.actif{ background-position: -400px -465px;}

ul#tunnel li#tunnel-developpement-tests{ background-position: -0px -155px;  transition: opacity 0.5s ease-in-out;}
ul#tunnel li#tunnel-developpement-tests:hover{ background-position: -200px -155px;  opacity: 0.9;}
ul#tunnel li#tunnel-developpement-tests.actif{ background-position: -0px -465px; }

ul#tunnel li#tunnel-divertissements{ background-position: -200px -465px;  transition: opacity 0.5s ease-in-out;}
ul#tunnel li#tunnel-divertissements:hover{ background-position: -200px -620px;  opacity: 0.9;}
ul#tunnel li#tunnel-divertissements.actif{ background-position: -400px -310px; }

ul#tunnel li#tunnel-machines-virtuelles{ background-position: -200px -310px;  transition: opacity 0.5s ease-in-out;}
ul#tunnel li#tunnel-machines-virtuelles:hover{ background-position: -400px -155px;  opacity: 0.9;}
ul#tunnel li#tunnel-machines-virtuelles.actif{ background-position: -0px -620px; }

ul#tunnel li#tunnel-outils-collaboratifs{ background-position: -0px -0px;  transition: opacity 0.5s ease-in-out;}
ul#tunnel li#tunnel-outils-collaboratifs:hover{ background-position: -200px -0px;  opacity: 0.9;}
ul#tunnel li#tunnel-outils-collaboratifs.actif{ background-position: -0px -310px; }

ul#tunnel li#tunnel-attente{
	width: 800px;
	padding-top: 50px;
	padding-bottom: 50px;
	color: #fff;
	font-size: 15px;
	text-shadow: 0 1px 1px #000;
	background: url(../images/design/fleche_temp.png) 75px 35px no-repeat;
}