/* CSS Document 
nom du fichier : styles.css */
body
{
  font-family:Arial,Verdana,Helvetica,Times New Roman;
  font-size:12px;
  text-align:left;
  background-color: #C3D3A8;
  border:none;
}
/* * * * * * * * * * * * * * * *   Paramètres communs à la majorité des champs 'INPUT'               * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
input
{
  position:absolute;
  right:5px;
  font-size:12px;
  line-height:12px;
  text-align:center;
  background-color:white;
  color:black;
  border:none;
}
/* * * * * * * * * * * * * * * *   Paramètres communs à tous les champs 'LABEL'                      * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
label
{
  position:absolute;
  font-size:12px;
  line-height:20px;
}
/* * * * * * * * * * * * * * * *   Affichage de la date/heure courantes : en haut à droite           * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#myClock
{
  position:fixed;
  top:0px;
  right:0px;
  z-index:10;
  width:150px;
  height:20px;
  text-align:center;
  padding:5px;
  color:Ivory;
  background-color:Indigo;
}
/* * * * * * * * * * * * * * * *   Affichage de la date/heure des dernier relevés : en-dessous de l'horloge  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#timeStamp
{
  position:fixed;
  top:30px;
  right:0px;
  z-index:10;
  width:150px;
  height:60px;
  font-size:10px;
  text-align:center;
  overflow:auto;
  padding:1px 5px;
  color:Ivory;
  background-color:DarkViolet;
}
/* * * * * * * * * * * * * * * *   Echelle de couleur des températures           * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#colorScale
{
  position:absolute;
  left:10%;
  top:80%;
  z-index:12;
  width:318px;
  height:36px;
  background-color:transparent;
}
#colorScaleBckgrnd
{
  position:absolute;
  top:0px;
  left:0px;
  background-color:Indigo;
}
/* * * * * * * * * * * * * * * *   Widget de prévision météo du jour               * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#meteoWidget
{
  position:absolute;
  left:5px;
  top:280px;
  z-index:10;
  width:320px;
  height:160px;
  background-color:DarkViolet;
  border-top:22px solid Indigo;
}
#widgetScript
{
  width:300px;
  height:130px;
  margin:5px 10px;
}
/* * * * * * * * * * * * * * * *   Avancement du scénario courant                                    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#scenarioProgress
{
  position:absolute;
  left:30px;
  top:80px;
  z-index:20;
  width:150px;
  height:80px;
  border-top:22px solid Indigo;
}
#scenarioProgressTxt
{
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  font-size:10px;
  text-align:center;
  color:Ivory;
  background-color:DarkViolet;
  overflow:auto;
}
/* * * * * * * * * * * * * * * *   Fenêtre d'affichage des messages de suivi de la communication avec la passerelle  * * * * * * * * * * * * * * * * * * * * * * * */
#debugArea
{
  position:absolute;
  top:200px;
  left:80px;
  z-index:10;
  width:320px;
  height:160px;
  border-top:22px solid Indigo;
}
#debugAreaTxt
{
  position:absolute;
  top:0px;
  left:0px;
  width:310px;
  height:160px;
  padding:5px;
  font-size:10px;
  color:Ivory;
  background-color:DarkViolet;
}
/* * * * * * * * * * * * * * * *   ÉLÉMENTS COMMUNS aux blocs précédents                             * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#colorScaleImg
{
  position:fixed;
  top:190px;left:-22px;
  z-index:10;
  background-color:transparent;....
}
#meteoWidgetImg
{
  position:fixed;
  top:10px;left:-22px;
  z-index:10;
  background-color:transparent;....
}
#debugAreaImg
{
  position:fixed;
  top:70px;left:-22px;
  z-index:10;
  background-color:transparent;
}
#scenarioProgressImg
{
  position:fixed;
  top:130px;left:-22px;
  z-index:10;
  background-color:transparent;
}
#colorScaleImg,#meteoWidgetImg,#debugAreaImg,#scenarioProgressImg:hover
{
  left:10px;
}
#colorScaleBtn,#meteoWidgetBtn,#debugInfoBtn,#scenarioBtn
{
  position:absolute;
  top:-22px;
  right:0px;
  z-index:2;
  height:20px;
  font-weight:bold;
  text-align:center
}
#colorScale,#colorScaleBckgrnd,#meteoWidget,#widgetScript,#debugArea,#debugAreaTxt,#scenarioProgress,#scenarioProgressTxt:hover
{
  cursor:move;
}
/* * * * * * * * * * * * * * * *   Station météorologique                                            * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#meteoStation
{
  position:absolute;
  top:500px;
  right:0px;
  z-index:10;
  height:74px;
  width:240px;
  text-align:right;
  background-color:Indigo;
}
#Theta_99Lb,#PressureLb,#HumidityLb{right:110px;width:125px;height:20px;text-align:right;vertical-align:baseline;color:Ivory;}
#Theta_99,#Pressure,#Humidity{width:100px;height:20px;text-align:right;vertical-align:baseline;color:Ivory;background-color:DarkViolet;}
#Theta_99Lb,#Theta_99
{
  top:5px;
}
#PressureLb,#Pressure
{
  top:27px;
}
#HumidityLb,#Humidity
{
  top:49px;
}
#meteoStation,#Theta_99Lb,#Theta_99,#PressureLb,#Pressure,#HumidityLb,#Humidity:hover
{
  cursor:move;
}
/* * * * * * * * * * * * * * * *   Boîte de dialogue propre à l'application  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#dialog
{
  position:fixed;
  left:50%;
  top:30%;
  z-index:10;
  width:200px;
  height:100px;
  background-color:Ivory;
  box-shadow:6px 6px 30px black;
}
#confirmScenario
{
  position:absolute;
  left:0px;
  top:0px;
  width:200px;
  text-align:center;
  font-size:12px;
}
#scenarioYes{position:absolute;left:10px;top:70px;height:22px;width:80px;background-color:#0F0;color:white;border:none;border-radius:16px;}
#scenarioNo{position:absolute;right:10px;top:70px;height:22px;width:80px;background-color:#F00;color:white;border:none;border-radius:16px;}
#scenarioYes:hover
{
  background-color:#0A0;
}
#scenarioNo:hover
{
  background-color:#A00;
}
/* * * * * * * * * * * * * * * *   Conteneur des plans : pour centrer dans la fenêtre il faut margin auto avec top, left, right à 0 et width > 0 * * * * * * * * * */
#plan
{
  position:absolute;
  top:0;
  right:0;
  left:0;
  margin:auto;
  height:914px;
  width:1177px;
}
/* * * * * * * * * * * * * * * *  Plans du niveau bas et niveau bas + étage  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#outline,#empty
{
position:absolute;
left:0px;
top:0px;
z-index:2;
}
/* * * * * * * * * * * * * * * *   CANVAS de dessin des zones de température * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#temperatureAreas{position:absolute;top:0px;right:0px;z-index:0;height:914px;width:1177px;} 
/* * * * * * * * * * * * * * * *   Pavés d'affichage des valeurs de température	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#Theta_01,#Theta_02,#Theta_03,#Theta_04,#Theta_05,#Theta_20,#Meteo
{
  z-index:6;
  width:48px;
  height:20px;
  background-color:transparent;
}
#Theta_01,#Theta_02,#Theta_03,#Theta_04,#Theta_05,#Theta_20,#Meteo:hover
{
cursor:move;
}
/* * * * * * * * * * * * * * * *   Boutons pour le déclenchement des scénarios * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * *   au survol le curseur prend le forme 'move' pour indiquer que ces éléments sont déplaçables  * * * * * * * * * * * * * * * * * * */
#heatingCmd0,#scnImg1,#scnImg2,#heatingCmd1,#scnImg5,#scnImg6,#shutterCmd0,#scnImg3,#scnImg4,#shutterCmd1,#scnImg7,#scnImg8:hover
{
cursor:move;
}
/* * * * * * * * * * * * * * * *   Conteneurs des contrôles de scénarios * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#heatingCmd0,#heatingCmd1,#shutterCmd0,#shutterCmd1
{
  position:absolute;
  height:53px;
  width:53px;
  z-index:10;
  background-color:transparent
}
/* * * * * * * * * * * * * * * *   Température-maison(1 & 2)/studio(5 & 6) : les coordonnées sont relatives  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.scenarioGif
{
  top:0px;
  left:0px;
  z-index:10;
  height:53px;
  width:53px;
  background-color:transparent
} 
#scnRdbtn1,#scnRdbtn5,#scnRdbtn3,#scnRdbtn7
{
  top:0px;
  left:50px;
}
#scnRdbtn2,#scnRdbtn6,#scnRdbtn4,#scnRdbtn8
{
  top:16px;
  left:50px;
}
#scnLb1,#scnLb5,#scnLb3,#scnLb7
{
  top:0px;
  left:70px;
  width:55px;
  color:black;
}
#scnLb2,#scnLb6,#scnLb4,#scnLb8
{
  top:16px;
  left:70px;
  width:55px;
  color:black;
}
/* * * * * * * * * * * * * * * *   Température et Volets-maison(3 & 4)/studio(7 & 8) : arrière plan et avant plan  * * * * * * * * * * * * * * * * * * * * * * * * */
#scnImg1,#scnImg2,#scnImg3,#scnImg4,#scnImg5,#scnImg6,#scnImg7,#scnImg8
{
  /*position:absolute;*/
  top:0px;
  left:0px;
  height:53px;
  width:53px;
}
#scnImg1,#scnImg3,#scnImg5,#scnImg7
{
  z-index:6;
}
#scnImg2,#scnImg4,#scnImg6,#scnImg8
{
  z-index:5;
}
/* * * * * * * * * * * * * * * *   Volets-maison/studio - volet mobile pour l'animation  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#scnSpan2,#scnSpan4
{
position:absolute;
top:0px;left:0px;height:48px;width:53px;z-index:12;
background-image:url('../IMAGES/volet.png');
background-repeat:no-repeat; 
background-position:0px 0px;
background-size:cover;
}
/* * * * * * * * * * * * * * * *   Indicateurs de positions des volets   * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#Volet_01{
	z-index:6;
	height:12px;width:47px;border:1px black solid;
	font-size:8px;background-color:white;opacity:0.0;
	}	
#Volet_02{
	z-index:6;
	height:12px;width:80px;border:1px black solid;
	font-size:8px;background-color:white;opacity:0.0;
	}
#Volet_03{
	z-index:6;
	height:12px;width:47px;border:1px black solid;
	transform:rotate(45deg);
	font-size:8px;background-color:white;opacity:0.0;
	}
#Volet_04{
	z-index:6;
	height:12px;width:80px;border:1px black solid;
	transform:rotate(45deg);
	font-size:8px;background-color:white;opacity:0.0;
	}
#Volet_05{
	z-index:6;
	height:12px;width:43px;border:1px black solid;
	transform:rotate(90deg);
	font-size:8px;background-color:white;opacity:0.0;
	}
#Volet_06{
	z-index:6;
	height:12px;width:42px;border:1px black solid;
	transform:rotate(45deg);
	font-size:8px;background-color:white;opacity:0.0;
	}
#Volet_07{
	z-index:6;
	height:12px;width:84px;border:1px black solid;
	transform:rotate(-45deg);
	font-size:8px;background-color:white;opacity:0.0;
	}