/* CSS Document */
body
{
	font-family:Arial,Verdana,Helvetica,Times New Roman;
	font-size:12px;
	color:black;
	text-align:left;
	border:none;	
}

/*	* * * * * * * * * * * * * * *	Paramètres communs à tous les 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:12px;}
/*	* * * * * * * * * * * * * * *	Paramètres communs à tous les champs 'CANVAS'		* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
canvas {position:absolute;top:0px;left:0px;z-index:1;}

/*	* * * * * * * * * * * * * * *	Volet latéral d'informations - doit être au niveau le plus haut		* * * * * * * * * * * * * * * * * * * * * * * *	*/
#SideBar{position:absolute;top:0px;left:0px;z-index:10;width:310px;height:914px;background-color:#F5F5F5;box-shadow: 6px 0px 30px black;}
/*	* * * * * * * * * * * * * * *	Bouton personnalisé pour montrer/masquer le bloc	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#showSideBar{position:absolute;top:0px;left:310px;z-index=-2;height:57px;width:28px;box-shadow: 6px 6px 40px black;border:none;}
/*	* * * * * * * * * * * * * * *	Radio buttons : choix des options d'affichage du plan-masse		* * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#displayOptions{position:absolute;top:10px;left:5px;width:300px;height:40px;}
#groundFloorLb{top:12px;left:5px;width:100px;text-align:left;}
#groundFloor{top:10px;left:77px;}
#firstFloorLb{top:12px;left:150px;width:100px;text-align:left;}
#firstFloor{top:10px;left:225px;}
/*	* * * * * * * * * * * * * * *	Affichage de l'heure courante		* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#myClock{position:absolute;top:54px;left:5px;width:300px;height:20px;}
/*	* * * * * * * * * * * * * * *	Avancement du scénario courant		* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#scenarioLbl{top:74px;left:5px;width:300px;}
#scenario{top:90px;width:300px;text-align:center;}
#callback{top:110px;width:300px;text-align:right;background-color:transparent;border:none}
/*	* * * * * * * * * * * * * * *	Station	météorologique				* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#timeStamp{top:135px;right:5px;width:300px;text-align:right;background-color:transparent;border:none}
#Theta_99Lb{top:160px;right:110px;width:200px;height:20px;text-align:right;vertical-align:baseline;}
#Theta_99{top:160px;width:100px;height:20px;text-align:right;vertical-align: baseline;}
#PressureLb{top:187px;right:110px;width:200px;height:20px;text-align:right;vertical-align:baseline;}
#Pressure{top:187px;width:100px;height:20px;text-align:right;vertical-align: baseline;}
#HumidityLb{top:214px;right:110px;width:200px;height:20px;text-align:right;vertical-align:baseline;}
#Humidity{top:214px;width:100px;height:20px;text-align:right;vertical-align:baseline;}
/*	* * * * * * * * * * * * * * *	Echelle de couleur des temperatures	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#scaleBckgrnd{position:absolute;top:245px;left:0px;z-index:12;width:310px;height:15px;background-color:#888;}	/*	arrière-plan noir	*/
#C0,#C1,#C2,#C3,#C4,#C5,#C6,#C7,#C8,#C9,#C10,#C11,#C12,#C13,#C14,#C15,#C16,#C17,#C18,#C19,#C20,#C21
{top:2px;width:14px;height:11px;border:none}
#Cl1,#Cl3,#Cl5,#Cl7,#Cl9,#Cl11,#Cl13,#Cl15,#Cl17,#Cl19,#Cl21
{top:15px; width:14px; height:15px;border:none;font-size:10px;background-color:transparent;}
#colorScaleLbl{top:27px;width:300px;text-align:center;font-size:10px;}
/*	* * * * * * * * * * * * * *	*	Widget de prévision météo du jour	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#meteoWidget{position:absolute;left:5px;top:280px;z-index:10;}
/*	* * * * * * * * * * * * * * *	Fenêtre d'affichage des messages pour mise au point	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#DebugInfo{position:absolute;top:450px;left:5px;z-index:11;border:none}
#Debug{width:100%;height:100%;font-size:10px;background-color:black;color:white;overflow:hidden;}
#showDebugInfo{position:absolute;top:450px;right:5px;z-index:12;height:20px;}

/*	Boîte de dialogue propre à l'application	*/
#dialog{position:fixed;left:50%;top:300px;z-index:10;width:200px;height:100px;background-color:#F5F5F5;box-shadow: 6px 6px 30px black;}
#confirmScenario{position:absolute;top:10px;left:0px;width:200px;text-align:center;font-size:12px;}
#scenarioYes{position:absolute;top:70px;left:10px;height:20px;width:90px;background-color:green;color:white;}
#scenarioNo{position:absolute;top:70px;right:10px;height:20px;width:90px;background-color:red;color:white;}
/*	* * * * * * * * * * * * * * * * * * * * *	Conteneur des plans / cartes	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#plan{position:absolute;float:top;top:0px;right:0px;height:914px;width:1177px;}
/*	* * * * * * * * * * * * * * * * * * * * *	Plans du niveau bas et niveau bas + étage	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#outline_01,#outline_02{position:absolute;left:0px;top:0px;z-index:2;}
/*	* * * * * * * * * * * * * * * * * * * * *	conteneur de dessin des zones de température	* * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
#temperatureAreas{position:absolute;top:0px;right:0px;z-index:1;height:935px;width:1177px;}
#Theta_01{top:115px;left:483px;z-index:6;height:20px;width:48px;background-color:transparent;}	 /*	family room temperature		* * * * * * * * * * * *	*/
#Theta_02{top:376px;left:740px;z-index:6;height:20px;width:48px;background-color:transparent;}	 /*	parents bedroom temperature	* * * * * * * * * * * *	*/
#Theta_03{top:312px;left:768px;z-index:6;height:20px;width:48px;background-color:transparent;}	 /*	parents bathroom temperature  * * * * * * * * * * *	*/
#Theta_04{top:373px;left:425px;z-index:6;height:20px;width:48px;background-color:transparent;}	 /*	first floor temperature		* * * * * * * * * * * *	*/
#Theta_05{top:270px;left:970px;z-index:6;height:20px;width:48px;background-color:transparent;}	 /*	pavilion temperature		* * * * * * * * * * * *	*/
#Theta_20{top:855px;left:448px;z-index:6;height:20px;width:48px;background-color:transparent;}	 /*	temperature inside pool booth * * * * * * * * * * *	*/
#Meteo{top:718px;left:540px;z-index:6;height:20px;width:48px;background-color:transparent;}		 /*	external temperature	* * * * * * * * * * * * * *	*/

/*	* * * * * * * * * * * * * * * * * * * * *	boutons pour le déclenchement des scénarios		  * * * * * * * * * * * * * * * * * * * * * * * * * * *	*/
/*	* * * * * * * * * * * * * * * * * * * * *	la numérotation correspond à celle enregistrée dans AXIOPHONE * * * * * * * * * * * * * * * * * * * * *	*/
#scnImg1	{top:140px;left:560px;height:48px;width:53px;z-index:10;}							 /*	temperature	- main - high   * * * * * * * * * * * *	*/
#scnImg2	{top:140px;left:560px;height:48px;width:53px;z-index:10;}							 /*	temperature	- main - low    * * * * * * * * * * * *	*/
#scnRdbtn1	{top:140px;left:610px;z-index:10;}
#scnRdbtn2	{top:156px;left:610px;z-index:10;}
#scnLb1		{top:140px;left:630px;z-index:10;color:black;}
#scnLb2		{top:156px;left:630px;z-index:10;color:black;}

#scnImg5	{top:150px;left:980px;height:48px;width:53px;z-index:10;}							/*	temperature	- studio - high * * * * * * * * * * * *	*/		
#scnImg6	{top:150px;left:980px;height:48px;width:53px;z-index:10;}							/*	temperature	- studio - low  * * * * * * * * * * * *	*/
#scnRdbtn5	{top:150px;left:1030px;z-index:10;}
#scnRdbtn6	{top:166px;left:1030px;z-index:10;}
#scnLb5		{top:150px;left:1050px;z-index:10;color:black;}
#scnLb6		{top:166px;left:1050px;z-index:10;color:black;}

#scnImg3	{top:190px;left:560px;height:53px;width:53px;z-index:10;}							/*	shutters - main - up  * * * * * * * * * * * * * * *	*/
#scnImg4	{top:190px;left:560px;height:53px;width:53px;z-index:10;}							/*	shutters - main - down  * * * * * * * * * * * * * *	*/
#scnRdbtn3	{top:190px;left:610px;z-index:10;}
#scnRdbtn4	{top:206px;left:610px;z-index:10;}
#scnLb3		{top:190px;left:630px;z-index:10;color:black;}
#scnLb4		{top:206px;left:630px;z-index:10;color:black;}

#scnImg7	{top:200px;left:980px;height:53px;width:53px;z-index:10;}							/*	shutters - studio - up  * * * * * * * * * * * * * *	*/
#scnImg8	{top:200px;left:980px;height:53px;width:53px;z-index:10;}							/*	shutters - studio - down  * * * * * * * * * * * * *	*/
#scnRdbtn7	{top:200px;left:1030px;z-index:10;}
#scnRdbtn8	{top:216px;left:1030px;z-index:10;}
#scnLb7		{top:200px;left:1050px;z-index:10;color:black;}
#scnLb8		{top:216px;left:1050px;z-index:10;color:black;}
/******************************************* Shutters positions ***************	*/
#Volet_01{
	top:193px;left:229px;z-index:6;
	height:12px;width:47px;border:1px black solid;
	font-size:8px;background-color:white;opacity:0.0;
	}	
#Volet_02{
	top:193px;left:383px;z-index:6;
	height:12px;width:80px;border:1px black solid;
	font-size:8px;background-color:white;opacity:0.0;
	}
#Volet_03{
	top:237px;left:497px;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{
	top:326px;left:569px;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{
	top:429px;left:676px;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{
	top:125px;left:649px;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{
	top:115px;left:938px;z-index:6;
	height:12px;width:84px;border:1px black solid;
	transform:rotate(-45deg);
	font-size:8px;background-color:white;opacity:0.0;
	}