body,html{
	width:100%;
	margin:0;padding:0;
	background:#eee;
}
.hidden{display:none}
/* * {transition: all .3s linear;box-sizing: border-box;transition-delay:0.1s} */

/* MENU */
.menu{position:fixed;z-index:200;}
.menu.haut{background:#333;padding:0 5px;left:320px;overflow:visible;height:auto;right:0;top:0;border-bottom-left-radius:2px}
.menu.haut.off{height:35px;right:0;overflow:hidden;top:0;left:100%;margin-left:-35px;padding:0 35px;background:#333 url(../images/open-iconic/png/menu-6x.png) no-repeat 9px 7px;background-size:16px 16px}

.menu.pied{height:35px;right:0;overflow:hidden;bottom:0;left:100%;
	margin-left:-35px;padding:0 35px;background:#aaa url(../images/open-iconic/png/info-6x.png) no-repeat 9px 7px;background-size:16px 16px;
	border-top-left-radius:4px;}
.menu.pied:focus{height:auto;overflow:visible;left:320px;right:0;background:#aaa;padding:0 5px;}
.menu a{color:#ccc}
.menu a:hover{color:#fff}
.menu>ul{display:block;margin:10px;padding:0}
.menu ul ul{padding-top:0px}
.menu ul{margin:0;list-style:none}
.menu>ul>li{padding-bottom:7px;display:block}
.menu ul ul li{border-top:1px solid #aaa;border-right:1px solid #aaa}
.menu>ul li:hover>*{	display:block}
.menu>ul li:hover{position:relative}
.menu>ul ul{display:none;background:#333;position:absolute;top:100%;padding:0;width:200px}
.menu>ul>li>ul>li>ul{position:absolute;left:200px;top:-1px}
.menu>ul li{display:block;white-space:nowrap;float:left}
.menu>ul a{display:block;margin:3px;padding:3px;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px sans-serif;cursor:pointer;overflow:hidden}
.menu>ul ul a{width:175px;overflow:hidden}
.menu>ul ul li{float:none}
.menu>ul ul a{text-align:left}
.menu>ul li:hover>a{font:bold 13px sans-serif;color:#fff;text-decoration:none}

.menu #rechercherapide{	height:31px;display:inline-block;min-width:33px;background:#fff;position:absolute;top:2px;right:2px;margin:0;z-index:1000;border-radius: 2px;text-align:right;overflow:hidden;transition:0.5s}
.menu #rechercherapide input{	display:inline-block;background:#fff;border:2px solid #aaa;height:22px;margin:4px 0;padding:0}
.menu #rechercherapide input[type=image]{	border:0;margin:4px 3px;width:22px;border:0;}
.menu #rechercherapide input[type=text]{	border:0;margin:4px 0;width:0;}
.menu #rechercherapide:hover input[type=text], .menu #rechercherapide input[type=text]:focus{width:150px;border:1px solid #aaa;margin:4px 2px 4px 6px;transition:0.75s;padding-left:6px }
.menu #rechercherapide:hover{ min-width:200px;}

/* IDENTIFICATION */
#identification{height:140px;position:fixed;bottom:0;left:-10px;z-index:1000}
#identification h2{font-size:14px;font-weight:bold;color:#fff;margin-top:0;text-align:center}
#identification>form{height:140px;width:200px;position:relative;bottom:0;background:#928676;padding:3px 10px 0 10px;margin:5px;color:#111}
#identification input{font:12px sans-serif;font-weight:bold;line-height:15px;display:block;position:absolute;z-index:400;border:0;padding:0}
#identification input[type='submit']{color:#fff;width:110px;height:21px;display:inline-block;padding-bottom:2px;margin-top:0px;background:#333}
#identification input[type='text'],div#identification input[type='password']{left:16px;width:105px;height:20px;padding-left:2px !important;background:#fff}
#identification input[name='_user_']{top:30px}
#identification input[name='_pass_']{top:62px}
#identification input[name='_connexion_']{top:30px;left:128px;color:#fff;width:73px;height:55px !important}
#identification input[name='_recuperation_']{top:98px;left:17px;color:#fff;width:183px;height:20px}
#identification input[name='_deconnexion_']{position:inline;border:0;display:block;height:35px;width:148px;font:12px sans-serif;font-weight:bold;color:#fff;margin:auto;background:#c22;margin-top:0}
#identification.deconnexion{height:45px}
#identification.deconnexion>form{margin:0;background:none;padding:0}
#identification.deconnexion{padding:0;margin:0;position:fixed;left:-4px;top:100%;margin-top:-31px}
#identification.deconnexion input[name='_deconnexion_']{position:absolute;top:0;left:0;}

/* colonnegauche */
#colonnegauche{width:auto;margin:0;padding-top:50px;top:0px;left:0px;position:fixed;z-index:10;}
#colonnegauche .bloc{
	margin:0;padding:0;
	border-top:1px solid #666;
	background:#ccc;
	font-size:80%;
	overflow:auto;
}
#colonnegauche .bloc:last-child{-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottom-right:4px;border-bottom-right-radius:4px;}

#colonnegauche .bloc h2,
#colonnegauche .bloc a {font-weight:normal;color:#111;text-decoration:none}
#colonnegauche .bloc a:hover{color:#111;text-decoration:underline}

#colonnegauche .bloc.addon{border-bottom-right-radius:2px;border-top-right-radius:2px;border:0;margin-top:10px;}
#colonnegauche .bloc h2{color:#fff;margin:5px;cursor:pointer;height:30px;overflow:hidden;line-height:30px}
#colonnegauche .bloc ul{height:0;margin:5px;padding:0;width:130px;}
#colonnegauche .bloc ul.down{height:auto;width:253px;display:block}
#colonnegauche .bloc h2{overflow:auto;height:auto}
#colonnegauche ul{display:block;color:#444;margin-left:0;max-height:250px;overflow:auto}
#colonnegauche ul> li{color:#444;margin:0;padding:3px;font:12px sans-serif;list-style:none}
#colonnegauche .listecontacts ul>li{padding-bottom:4px;margin-bottom:0;border-bottom:1px dotted #999}
#colonnegauche ul> li:last-child {border:0}
#colonnegauche .listecontacts li:hover{background:#ddd}

#colonnegauche .bloc.listecontacts{padding-top:30px;background:#bbb;z-index:20}
#colonnegauche .bloc.plan{background:#bbb;z-index:19}

#colonnegauche .bloc.navcontenu_prec_suiv{margin-top:25px;width:145px;background:#666;z-index:18;font-size:75%;color:#fff;border:0;padding:2px}
#colonnegauche .bloc.navcontenu_prec_suiv h2{display:block;text-align:center;line-height:30px;overflow:hidden;}
#colonnegauche .bloc.navcontenu_prec_suiv h2> a{color:#ccc;font:bold 28px sans-serif !important}
#colonnegauche .bloc.navcontenu_prec_suiv h2> a:hover{color:#fff;text-decoration:none}


/* popup ajax */
.popup{display:block;position:relative;height:100%;font-family:sans-serif}
.popup .clore{display:block;padding:2px;width:25px;height:25px;background:#000;color:#fff;z-index:1001;font:21px sans-serif;text-align:center}
.popup .element{margin:5px;border-bottom:1px dotted #aaa;padding:5px;clear:both}
.popup .element .type{color:#bbb;width:120px;float:left}
.popup .element .valeurs{color:#222}
#ajax_load{display:none;position:fixed;z-index:1000;top:100px;left:100px;right:100px;bottom:100px;background:#fff;border:1px solid #aaa;overflow:auto}

/* commentaires */
div.commentaires>h2{cursor:pointer;text-align:left}
div.commentaires>h2.ouvert:after{content:'>';color:#b2afaf;font-weight:normal;font-size:120%}
div.commentaires>h2.ouvert:before{content:''}
div.commentaires>h2:before{content:'< ';color:#b2afaf;font-weight:normal;font-size:120%}

/* structure des pages */
#page_corps{position:absolute; top:75px; width:100%}
#page_titre{text-align:center;font:bold 20px sans-serif;color:#fff;background:#333;position:fixed;top:-6px;left:-6px;padding:12px 6px 6px 12px;width:270px;z-index:100}
#page_titre a{color:#fee;text-decoration:none}
#page_titre a:hover{color:#fff;text-decoration:underline}
#page_description{color:#fee;	font:normal 12px sans-serif}

/* arrondis */
#identification>form,
form input,
#page_titre,
#colonnegauche .bloc.navcontenu_prec_suiv,.alerte,
#ajax_load{border-radius:2px}

/* ombre */
#page_titre,.menu,#colonnegauche .bloc{box-shadow:-2px 2px 2px #999}
#ajax_load{box-shadow:-2px 2px 15px #000}

/* éléments de form */
input{vertical-align:middle}

/* icones */
.icone{display:inline-block;height:28px;vertical-align:middle}
.icone img{height:25px}
#page_titre .icone img
{filter:invert(100%);-webkit-filter:invert(100%);-moz-filter:invert(100%);-o-filter:invert(100%);-ms-filter:invert(100%)}

/* popup comparaison */
#outputdiv{font:13px sans-serif;white-space:pre-warp}
#outputdiv>div{display:block;margin:3px;border:1px solid #ddd;padding:2px;width:600px;margin:5px auto}
ins{text-decoration:none}
#outputdiv .titre{font-size:150%}
#outputdiv .soustitre{font-size:120%}
#outputdiv .chapeau{font-weight:bold;color:#666}
#outputdiv .auteur,
#outputdiv .credits,
#outputdiv .mention{font-style:italic;font-size:90%}
#outputdiv .hidden{display:none}
a.choix.comparaison{display:block;width:250px;margin:5px auto;background:#555;color:#eee;text-decoration:none;padding:4px;text-align:center}

/* actions */
.hide{display:none !important}
.alerte{display:block;padding:5px;background:#d00;color:#fff;text-align:center;margin:5px}