/*
Les textes entre /* et *( )/ sont des annotations techniques à lire.
--
DEFINITION DE STYLES DES ELEMENTS DYNAMIQUES (Look oTo(web))
soit les MENUS EDITABLES DU SITE WEB, BOITE OUVRANTE et INFOS BULLES UTILISEES 
DANS L'ADMINISTRATION et UTILISES ou UTILISABLES COTE VISITEURS
--
Ces styles (dynamiques) sont appelés après les styles statiques du Look.
Ces styles CSS sont un fin réglages permettant l'affichage impeccable du site web sous tous les navigateurs.
Les modifications qui y sont faites doivent donc être controlées sous tous les navigateurs.
Ces styles peuvent être édités et testés directement sur le site (plus rapide au besoin de modifications)
--
Documentation exhaustive de l'emploi des css : http://fr.selfhtml.org/navigation/css.htm
MERCI DE CONSERVER CES ANNOTATIONS POUR CHAQUE LOOK DESTINE A OTO(WEB)
*/

/*
.DivOuvrant est défini graphiquement dans (Look).css
A cette définition s'ajoute ici "display:none" (indiquant que DivOuvrant est masqué)
*/

.DivOuvrant {
	display:none;
}
/* 
Definition CSS du ___MenuSociet___ : Liste html
--
Pour ajouter de nouveaux menus, intégrez ___Menu(NomVoulu)___ dans le fichier graphique (Look).php
-> Ceci rend le menu éditable dans l'administration du site web.
--
Ensuite, pour définir ici l'aspect graphique du nouveau menu : 
- copiez-collez une definition graphique CSS entière de menu ci dessous, 
- changez Menu(NomDeVotreNouveauMenu) dans le nom de chaque style de ce menu.
Le menu apparait ensuite comme souhaité. 
*/
#MenuSociet {
	position:relative;
        width:20px;
}
ul#MenuSociet li ul{
  display:none;
}
ul#MenuSociet li:hover>ul{
  display:block;
}
ul#MenuSociet{
	position:absolute;
	z-index:3;
	font-size: 13px;
	padding:0px;
	margin:-15px 0px 0px 90px;
	_margin:-18px 0px 0px 90px;
	height:25px;
        width:700px;
	display: inline;
	list-style:none;
}
ul#MenuSociet ul{
  position:absolute;
	padding:0px;
	margin:0px;
  z-index:4;
}
ul#MenuSociet li{
  float:left;
  position:relative;
  display:inline;
white-space:nowrap;
	list-style-type: none;
	text-align:center;
	vertical-align: center;
	padding:0px 0px 0px 0px;
	margin:0px 10px 3px 2px;
	line-height:20px;
	_line-height:30px;
}
ul#MenuSociet li a{
    font-weight:normal;
  display:inline;
  float:left;
	padding:7px 0px 0px 5px;
	_padding:7px 0px 0px 5px;
	margin:0px 0px 2px 0px;
	text-decoration:none;
	color: #ccf0ff;
}
ul#MenuSociet li a:hover{
	color: #FFFFFF;
	background:none;
	text-decoration:underline;
}
ul#MenuSociet li ul{
  list-style:none;
  list-style-type:none;
	left: 0px;
	bottom: 16px;
	_bottom: 20px;
	width: 165px;
	margin-top: -1px;
	background-color:#FFFFFF;
	border-color: #3333CC;
	border-style: solid;
	border-width: 3px;
	border-top-width: 10px;
	padding: 10px 0px 5px 3px;
}
ul#MenuSociet li ul li{
	display:block;
	line-height:14px;
	background:none;
	text-align:left;
	width:155px;
	margin:0px;
	padding:0px 0px 2px 0px;
}
ul#MenuSociet li ul li a{
	display:block;
	color:#3366CC;
	width:100%;
	background:none;
	padding:0px 3px 0px 3px;
	margin:0px 0px 0px 0px;
	text-decoration:none;
	vertical-align: 0%;
}
ul#MenuSociet li ul li:hover {
	background:none;
	background:#ccf0ff;
	margin:0px 1px -1px 0px;
	_padding:0px 0px -1px 0px;
	border-bottom-color: #3333CC;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
ul#MenuSociet li ul li a:hover {
	background:none;
	background:#ccf0ff;
	color:#3366CC;
}
ul#MenuSociet li ul li ul{
	border-width: 5px;
	border-top-width: 10px;
	bottom: 5px;
	left: 155px;
	z-index:5;
}
/* 
Definition CSS du ___MenuActiv___ : Liste html
--
Pour ajouter de nouveaux menus, intégrez ___Menu(NomVoulu)___ dans le fichier graphique (Look).php
-> Ceci rend le menu éditable dans l'administration du site web.
Ensuite, pour définir ici l'aspect graphique du nouveau menu : 
- copiez-collez une definition entière de menu ci dessous, 
- changez Menu(NomDeVotreNouveauMenu) dans le nom de chaque style de ce menu.
Le menu apparait ensuite comme souhaité. 
*/

#MenuActiv {
	position: relative;
	z-index:2;
	top:20px;
}
ul#MenuActiv {
	position: relative;
	bottom:0%;
	left:0px;
	list-style:none;
	margin:0px 0px 0px -3px;
	padding:0px;
	width:140px;
}
ul#MenuActiv a{
	display:block;
	width:100%;
	text-decoration:none;
}
ul#MenuActiv ul{
	position:absolute;
	padding:0px;
	margin:0px;
	z-index:2;
}
ul#MenuActiv li{
	position:relative;
	list-style-type: none;
	width:100%;
	_display:inline;
	background-image: url(../Image/SimpleBlue/MenuActivLi_off.gif);
	background-repeat: no-repeat;
	background-position: left top;
	margin:0px;
	padding:0px;
	z-index:3;
}
ul#MenuActiv li a{
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-style:normal;
	font-weight:normal;
	font-size:16px;
	color:#FFFFFF;
	padding:6px 0px 0px 20px;
        line-height:14px;
	height:25px;
	_height:30px;
}
ul#MenuActiv li a:hover{
	font-weight:bold;
	background:none;
	background-image: url(../Image/SimpleBlue/MenuActivLi_on.gif);
	background-repeat: no-repeat;
	background-position: left top;
	color:#363677;
	padding:6px 0px 0px 20px;
        line-height:19px;
	height:25px;
	_height:30px;
}
ul#MenuActiv li.OnPage {
	background-image: url(../Image/SimpleBlue/MenuActivLi_on.gif);
	background-repeat: no-repeat;
	background-position: left top;    
}
ul#MenuActiv li.OnPage a{
	font-weight:bold;
	background:none;
	color:#FFFFFF;
	padding:6px 0px 0px 20px;
        line-height:19px;
	height:25px;
	_height:30px;
}
ul#MenuActiv li ul{
	position:absolute;
	display:none;
	left: 138px;
	top: 1px;
	width: 145px;
	margin-top: 0px;
	background: #FFFFFF;
	border-color: #2343e6;
	border-style: solid;
	border-width: 3px;
	border-top-width: 1px;
	padding: 13px 0px 15px 5px;
}
ul#MenuActiv li ul li{
	width:140px;
        background:none;
}
ul#MenuActiv li ul li a{
	font-size:12px;
	line-height:16px;
	color:#3333CC;
	padding:0px 0px 0px 5px;
	margin:0px;
	background:none;
	height:16px;
}
ul#MenuActiv li ul li a:hover{
	font-size:12px;
	line-height:16px;
	color:#FFFFFF;
	padding:0px 0px 0px 5px;
	margin:0px;
	background: #2343e6;
	height:16px;
}
ul#MenuActiv li:hover>ul{
  display:block;
  z-index:0;
}
ul#MenuActiv li ul li ul{
	border-width: 5px;
	border-top-width: 1px;
	left: 135px;
}
/* 
Definition CSS des INFOS BULLES :
--
LE STYLE CSS "InfosPage" (infos bulle de base) EST NECESSAIRE A L'ADMINISTRATION
Vous pouvez modifier, sauf le nom du style "InfosPage", mais pas le supprimer.
Vous pouvez créer d'autres styles d'infos bulles selon vos besoins.
*/

#InfosPage {
	z-index:1;
}
div#InfosPage:hover {
	z-index: 2;
	background: #99CCFF;
}
div#InfosPage:hover>div ul {
	display: block;
}
div#InfosPage {
	position:relative;
	display: inline;
	border-bottom-color: #99CCFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	text-decoration: none;
	background: #ccf0ff;
	z-index:0;
}
div#InfosPage a {
	text-decoration: none;
	display:inline;
white-space:nowrap;
}
div#InfosPage a:hover {
	text-decoration: none;
	background: none;
}
div#InfosPage div {
	position: absolute ;
	left:0px;
	top:100%;
	margin:0px;
	padding:0px;
	z-index:3;
}
div#InfosPage div ul {
	position: absolute ;
	display: none;
	z-index:3;
	list-style-type: none;
	width: 360px;

	margin: -1px 0px 5px 0px;
	padding: 5px 8px 5px 8px;
	border-width: 5px;
	background: #FFFFFF;
	border-color: #99CCFF;
	border-style: solid;
	border-top-width: 1px;
}
div#InfosPage div ul li a:hover {
	border-bottom-color: #99CCFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background: #ccf0ff;
}
div#InfosPage a.SousTitre + div {
 top:14px; 
}
div.InfosPageSsTitre {
 _top:14px; 
}