/* CSS Document */

.rubriques {
position:absolute;
bottom:0;
right:0;
left:0;
background-color:none;
text-align:center;
}

.top {
position:absolute;
top:196px;
right:0;
left:0;
background-color:none;
text-align:center;
z-index:3;
}
.top #haut li {
border:1px solid #CA0F00;
background-image:url("../images/fondonglet2.png");
}

#haut ul
{
width:90%;
margin:auto;
list-style:none;
z-index:3;

}

#haut li
{
	/* On fixe les dimensions des éléments de notre liste. */
    width: 135px;
	height: 30px;
    /* On met en forme le texte. */
	text-align: center;
	font-family:Arial,sans-serif;
	font-weight:bold;
	font-size:100%;
	display: inline-block;
	margin:2px;
	padding: 0px;

        /* Quitte à faire du CSS3, autant avoir des coins arrondis*/
		border-bottom-right-radius:10px;
		border-top-right-radius:0;
		border-top-left-radius:0;
		border-bottom-left-radius:10px;
        
        /* On positionne l'arrière-plan. */
    background-position: top;
      
        /* On modifie la position pour pouvoir ensuite placer comme on le souhaite la description des liens. */
    position: relative;
	overflow: hidden;
	vertical-align:top;
}

#haut li a
{
	/* Pour fixer les dimensions d'un lien, il est nécessaire de l'afficher en tant qu'élément de type block. */
    display: block;
	width: 100%;
	height: 100%;
    text-decoration: none;
	color:#000000;
}

#haut li span
{
      position: absolute;
		display: block;
        height: 100%;
        width: 100%;
        color: #fff;
        margin: 0px;
		border-bottom-right-radius:10px;
		border-top-right-radius:0;
		border-bottom-left-radius:10px;
		border-top-left-radius:0;
	
	left:0;
	top:-135px;
	overflow:hidden;
    transition-property: top;
	-moz-transition-property: top;
	-webkit-transition-property: top;
	-o-transition-property: top;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
}
/* On modifie l'ordonnée des descriptions contenues
dans un élément d'une liste survolée par la souris. */

#haut li:hover span
{
	top: 0;
}
#haut li:hover {height:135px;}

/* On indique les images à afficher en arrière-plan pour chaque élément. */

.top #haut #item1:hover span{background-image: url('../images/onglet1.jpg');color:#000000;}
.top #haut #item2:hover span{background-image: url('../images/onglet2.jpg');color:#ffffff;}
.top #haut #item3:hover span{background-image: url('../images/onglet3.jpg');color:#ffffff;}
.top #haut #item4:hover span{background-image: url('../images/onglet6.jpg');color:#ffffff;}
.top #haut #item5:hover span{background-image: url('../images/onglet5.jpg');color:#000000;}
.top #haut #item6:hover span{background-image: url('../images/onglet4.jpg');color:#ffffff;}
.top #haut #item7:hover span{background-image: url('../images/onglet7.jpg');color:#ffffff;}


#gauche {
margin:4% 0 0 0;
position:absolute;
left:0;
top:220px;
z-index:1;
}

#gauche li
{
    width: 85px;
	height: 135px;
	text-align: center;
	font-weight: bold;
	display: block;
	border: 0px solid blue;
	margin:15px;
	padding: 0px;
	border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
    background-position: center;
    position: relative;
	overflow: hidden;	
}

#gauche li a
{
	/* Pour fixer les dimensions d'un lien, il est nécessaire de l'afficher en tant qu'élément de type block. */
    display: block;
	width: 85px;
	height: 135px;
    text-decoration: none;
	text-align:center;
	font-family:arial;
}
#gauche #item1 a{color:white;}
#gauche #item2 a{color:white;}
#gauche #item3 a{color:white;}
#gauche #item1 a{width:85px;height:135px;}
/* 
On indique les images à afficher en arrière-plan pour chaque élément. */
#gauche #item1{background-image: url('../images/gauche1.png');}
#gauche #item2{background-image: url('../images/gauche2.png');}
#gauche #item3{background-image: url('../images/gauche3.png');}
#atelier #gauche #item1{background-image:url('../images/gauche1.png');border:2px solid red;}
#atelier #gauche #item1 a,#stage #gauche #item2 a,#autres #gauche #item3 a{color:red}
#stage #gauche #item2{background-image:url('../images/gauche2.png');border:2px solid red;color:red}
#autres #gauche #item3{background-image:url('../images/gauche3.png');border:2px solid red;color:red}