* {margin:0; padding:0;} /* raz */

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height: 20px;
	background: #53757b;
	overflow-y:hidden;
}

hr{margin:50px 0px;}
a, a:visited, a:hover{text-decoration:none;}
img{border:0;}
textarea { resize:none; } /* none|horizontal|vertical|both */
.raz{ clear: both;} /* remise à 0 des float */
.cache{display:none;}

/*------------------------- menu*/

span#connexion{position:absolute; right:0px; top:0px; z-index:2; color:white;}

#entete{
	position:fixed;
	border-bottom:1px solid #222222;
	width:100%;
	height: 50px;
	color:white;
	/*margin-bottom:50px;*/
	z-index:1;
	text-align:right;

	-webkit-box-shadow: 0px 1px 5px rgba(20, 20, 20, 1);
	-moz-box-shadow: 0px 1px 5px rgba(20, 20, 20, 1);
}

#menu{
	/*position:relative;*/
	position:fixed;
	background-color:#292929;
	border-bottom:1px solid #222222;
	width:100%;
	height: 50px;
	color:white;
	/*margin-bottom:50px;*/
	z-index:1;
	text-align:right;

	margin-left: 217px;
}

a#login, a#logout{color:white;}

#bouton_menu{width:250px;margin:0 auto;}
#bouton_menu ul { list-style: none;/*min-height: 48px;width: 100%; margin-top:-15px;*/ margin-left: -220px;}
#bouton_menu ul li {float: left;margin-right: 12px;width: 48px; display: list-item;}
#bouton_menu ul li a { text-decoration:none; color:#eee;height:48px; width:48px;text-indent: 50000px;overflow: hidden; display:block;margin-top:3px;}

/*boutons du menu */
#ajout_msg{background: url(../img/spriteJP.png) 0px 0px no-repeat;}
#ajout_img{background: url(../img/spriteJP.png) -50px 0px no-repeat;}
#email{background: url(../img/spriteJP.png) -100px 0px no-repeat;}
#config{background: url(../img/spriteJP.png)  -150px 0px no-repeat;}

#aff_normal{background: url(../img/spriteJP.png) -50px -50px no-repeat;}
#aff_photo{background: url(../img/spriteJP.png)  -100px -50px no-repeat;}
#aff_informations{background: url(../img/spriteJP.png)  -150px -50px no-repeat;}

.retour_menu{background: url(../img/spriteJP.png) 0px -50px no-repeat;}

/* sous-menu (config)*/
#bouton_menu ul li ul.sous_menu {
	list-style: none;
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: block;
	float: left;
	width: 170px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border: 1px solid #111;
	text-align:left;
}
#bouton_menu ul li ul.sous_menu li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
#bouton_menu ul li ul.sous_menu li a {
	/*float: left;*/
	text-indent: 0px;
	width: 150px;
	height:28px;
	/*background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;*/
	padding-left: 20px;
}
#bouton_menu ul li ul.sous_menu li a:hover { /*--Hover effect for subnav links--*/
	/*background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; */
	background: #222 ;
}

/* infobulle menu */
#info_menu{
	position:absolute;
	/*border:1px solid white;*/
	top:40px;
	padding:2px 5px;
	background-color:#292929; color:white;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	opacity:0;
}

.select{opacity:0.6;}

/*------------------------- mur*/
#mur{
	position: absolute;
	width:100%;
	height:100%;
	overflow:hidden;
	/*padding-top:50px;
	margin:-50px 0;*/
	z-index: 0;

}

/*------------------------- messages */
.messages {

	padding:10px;
	position:absolute;
	overflow:hidden;
	cursor:move;
	font-family:Trebuchet MS,Tahoma,Myriad Pro,Arial,Verdana,sans-serif;
	color:#555555;
	font-size:12px;
	text-decoration:none;
	word-wrap: break-word; /*  pour forcer le mot à passer à la ligne si il est trop long*/
	/*text-shadow:0 0px 0 black;*/

	/* ombre en css3  #DDDDDD*/
	-moz-box-shadow:2px 2px 2px black;
	-webkit-box-shadow:2px 2px 2px black;
	box-shadow:2px 2px 2px black;
	/*	behavior: url(css/ie-css3.htc);*/ /* pour ie */
	border-right:2px solid black\9;
	border-bottom:2px solid black\9;

	-webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

}

.normal, .photo {
	height:150px;
	width:150px;
}

.normal .contenu {
	height:130px;
}

.liens {
	text-align:left;
	height:55px;
	width:55px;
	padding: 1px;
}
.liens img{float: left;}
.liens .info_liens{
	color:black;
	line-height:11px;
	margin: 0px auto;
	overflow: hidden;
	padding: 4px 0px 4px 4px;
	position: absolute;
	left: 60px;
}

.informations:hover {
	opacity: 1;
}

.informations {
	height:200px;
	width:150px;
	border-top: 2px dotted;
	opacity: 0.8;
	-webkit-transition: opacity 300ms ease;
	-moz-transition: opacity 300ms ease;
	-ms-transition: opacity 300ms ease;
	-o-transition: opacity 300ms ease;
	transition: opacity 300ms ease;
}

.informations a {
	text-decoration: underline;
}

.widget {
	-moz-box-shadow:0px 0px 0px transparent;
	-webkit-box-shadow:0px 0px 0px transparent;
	box-shadow:0px 0px 0px transparent;
	border:none;
}

.id_msg{display:none;} /* id BDD caché */

.auteur_msg{
	position:absolute;
	bottom:0px;
	right:10px;
	color:#666666;
	font-size:10px;
}

/************************** scrollbar *****************************/

.scrollbar::-webkit-scrollbar {
    /* background-color:#fff; */
    width:5px;
	padding-left: 10px;
}

/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
    background-color:transparent
}
.scrollbar::-webkit-scrollbar-track:hover {
    background-color:transparent
}

/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
    background-color:#babac0;
    border-radius:2px;
    border:1px solid #babac0;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color:#a0a0a5;
    border:1px solid #f4f4f4
}

/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {display:none}

/* div box */
.scrollbar {
	/* margin-left: 22px; */
	/* float: left; */
	/* height: 300px;
	width: 65px; */
	background: transparent;
	overflow-y: scroll;
	margin-bottom: 25px;
  }


/* couleur des messages */
.jaune{background-color:#faf3a9;}
.vert{background-color:#9cfeb5;}
.orange{background-color:#fac798;}
.bleu{background-color:#b3deec;}
.rose{background-color:#fdcefd;}
.blanc{background-color:#e2e2e2;}
.gris{background-color:#ededed;}
/**/
.image{background-color:white;}
.postit{background-color:#faf3a9;}

.suppr_msg{
	position: absolute;
	right: 2px;
	top: 0px;
	margin-top: -5px;
	cursor:pointer;
}

.titre_msg{
	position: relative;
	width:100%;
	top: -10px;
	left:0px;
	font-weight:bold;
	border-bottom:1px solid gray;
}

.titre_msg img{
	margin-left:-5px;
	padding:3px;
	vertical-align:bottom;
}

.devant{

}

.derriere{
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	border: 1px solid red;
	background-color: #fff;
}

.messages.flip{
	-webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);

}

.messages.flip .devant{

	display:none;
}

.messages.flip .derriere{
	display:block;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
}

/*------------------------- form message*/
div#msg{
	position: relative;
	height:300px;
	width:300px;
	margin-left:-150px;
	margin-top:-600px;
	/*background-color:white;*/
	padding: 10px;

	/* ombre en css3  #DDDDDD*/
	-moz-box-shadow:4px 4px 2px black;
	-webkit-box-shadow:4px 4px 2px black;
	box-shadow:4px 4px 2px black;
	/* pour ie */
	border-right:4px solid black\9;
	border-bottom:4px solid black\9;
}

#form_msg{
	position:absolute;
}

#msg form label{
	float:left;
	width:300px;
	text-align:left;
}

#msg form input{
	float:left;
	width:300px;
}

#msg form textarea{
	float:left;
	width:300px;
	height: 170px;
	font-family: Arial, Verdana, sans-serif;
	font-size: 24px;
	/*font-weight: bold;*/
}

#msg form input.btn_msg{ /* boutons valider et annuler */
	float:left;
	width:100px;
	margin: 15px 25px;
}

.options_msg{ /* où se trouve le choix des couleurs */
	position:relative;
	height:20px;
}

.options_msg div.couleur{
	cursor:pointer;
	float:left;
	height:10px;
	width:10px;
	margin:0 5px 0 0;
}

/* bouton public / privé */
.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url(../img/switch.gif) repeat-x; display: block; float: left; }
.cb-enable span, .cb-disable span { line-height: 30px; display: block; background-repeat: no-repeat; font-weight: bold; }
.cb-enable span { background-position: left -90px; padding: 0 10px; }
.cb-disable span { background-position: right -180px;padding: 0 10px; }
.cb-disable.selected { background-position: 0 -30px; }
.cb-disable.selected span { background-position: right -210px; color: #fff; }
.cb-enable.selected { background-position: 0 -60px; }
.cb-enable.selected span { background-position: left -150px; color: #fff; }
.switch label { cursor: pointer; }
#chxPublic { display: none; }

#erreur_msg{
	bottom: 0px;
	color: #931A13;
	font-weight: bold;
	margin-left: -10px;
	position: absolute;
	text-align: center;
	width: 100%;
}

/*------------------------- form photo*/
div#photo{
	position: relative;
	height:300px;
	width:300px;
	margin-left:-150px;
	margin-top:-600px;
	/*background-color:white;*/
	padding: 10px;

	/* ombre en css3  #DDDDDD*/
	-moz-box-shadow:4px 4px 2px black;
	-webkit-box-shadow:4px 4px 2px black;
	box-shadow:4px 4px 2px black;
	/* pour ie */
	border-right:4px solid black\9;
	border-bottom:4px solid black\9;
}

#photo form label{
	margin-top:5px;
	width:20%;
}

#photo form input{
	margin-top:5px;
	width:80%;
}

#photo form input.btn_photo{ /* boutons valider et annuler */
	float:left;
	width:100px;
	margin: 15px 25px;
}

/*------------------------- form login*/
div#log{
	position: relative;
	height:100px;
	width:250px;
	margin-left:-125px;
	margin-top:-50px;
	background-color:white;
	padding: 10px;

	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	/*behavior: url(css/ie-css3.htc); pour ie*/

}

#form_login{
	position:absolute;
}

#log form label{
	float:left;
	width:90px;
	text-align:right;
	margin:5px;
}

#log form input{
	float:left;
	width:100px;
	margin:5px 10px;
}

#log form input.btn_login{
	float:left;
	width:100px;
	margin:5px 10px;
	cursor: pointer;
	display: inline-block;
	color: white;
	background-color: black;
	border : 1 px solid black;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

#erreur_login{
	bottom: 0px;
	color: #931A13;
	font-weight: bold;
	margin-left: -10px;
	position: absolute;
	text-align: center;
	width: 100%;
}

/*------------------------- form contact*/
div#contact{
	position: relative;
	height:350px;
	width:400px;
	margin-left:-200px;
	margin-top:-700px;
	background-color:white;
	padding: 10px;

	/*border: 2px solid white; */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;

	/* ombre en css3 */
	-moz-box-shadow:4px 4px 2px black;
	-webkit-box-shadow:4px 4px 2px black;
	box-shadow:4px 4px 2px black;
	/* pour ie */
	border-right:4px solid black\9;
	border-bottom:4px solid black\9;

	/* bordure multicolor pour Gecko
	-moz-border-top-colors: #292929 white;
	-moz-border-right-colors: #292929 white;
	-moz-border-bottom-colors: #292929 white;
	-moz-border-left-colors: #292929 white;
*/
	/* ... pareil pour Webkit. :/
	-webkit-box-shadow: 0 -1px 2px #292929;
*/
	/* couleur du fond gradué
	background: #e3e3e3;
	background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
	background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3));
	*/
}

#form_contact{
	position:absolute;
}

#contact form label{
	float:left;
	width:400px;
}

#contact form input{
	float:left;
	width:400px;
}

#contact form textarea{
	float:left;
	width:400px;
	height: 170px;
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
	/*font-weight: bold;*/
}

#contact form input.btn_mail{
	float:left;
	width:100px;
	margin:5px 10px;
	cursor: pointer;
	display: inline-block;
	color: white;
	background-color: black;
	border : 1 px solid black;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

#erreur_contact{
	bottom: 0px;
	color: #931A13;
	font-weight: bold;
	margin-left: -10px;
	position: absolute;
	text-align: center;
	width: 100%;
}

/*-------------------------  Widgets*/
#meteo{
	position:relative;
	width:250px;
	height:180px;
	margin:0 auto;
	/*border:1px dotted gray;*/
	opacity:0;
}

#meteo img{
	position: absolute;
	top:0px;
	left:0px;
	opacity:0;
}

#details{
	position:absolute;
	width:190px;
	height:150px;
	background:url(../img/cadre.png) no-repeat;
	bottom:0px;
	right:0px;
	opacity:0;
}

#details div{
	color: white;
	text-shadow: #315895 0px -1px 1px;
}

.lieu{
	text-align:right;
	padding-right: 5px;
}

.temperature{
	/*float: right;*/ text-align:right;
	font-size: 30px;
	font-weight: bold;
	padding-right: 10px;
	margin: 10px 0 35px;
}

.hygro{
	text-align:left;
	font-weight: bold;
	padding-left: 5px;
}

.vent{
	text-align:left;
	font-weight: bold;
	padding-left: 5px;
}

.soleil{
	text-align:left;
	padding-left: 5px;
	font-size:11px;
}

/***************D I V E R S*****************/

#info{  /* message de copyright jp */
	position:absolute;
	width:100%;
	bottom:0px;
}

#info p.info{
	position:relative;
	margin:0 auto;
}

div#masque{ /* masque overlay */
	position:fixed;
	z-index:99998;
	top:0;
	left:0;
	/*background-color:gray;*/
}

#masque .transparent
{
    opacity:0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    background-color:#000000;
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
}

#titreSite{
	position:absolute;
	z-index:2;
	/*top:15px;
	left:25px;
	color: #555;
	font-size: 32px;
	font-weight: 200;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	-webkit-transform-origin-x: 50%;
	-webkit-transform-origin-y: 100%;
	-webkit-transition: all 0.2s ease-out;*/

	width:219px; height:50px;
  background: url(../../images/THoNY.png)  no-repeat left top;
	/*background: #292929 url(../../images/THoNY.png)  no-repeat left top;*/
	-webkit-box-shadow: inset 0px 5px 4px rgba(41, 41, 41, 1);
	-moz-box-shadow: inset 0px 5px 4px rgba(41, 41, 41, 1);
	/*background-color:#292929;*/
  top: 1px !important;
}
/*
#titreSite:hover{
	-webkit-transform: scale(1.25);
	-webkit-transform-origin-x: 50%;
	-webkit-transform-origin-y: 100%;
	-webkit-transition: all 0.2s ease-out;
	color: #666;
	text-shadow: black 0px 4px 1px;
}
*/
span#loading{
	position: absolute;
	left: 250px;
	top: 15px;
	z-index: 999;
	color:white;
}

h2.titre_form{
	position:absolute;
	right:5px;
	top:0px;
	color:#515151;
	text-transform: uppercase;
	text-shadow:1px 1px 1px #9e9e9e;
}