/* init */

body
{
  background-color  : rgba(0, 0, 0, 1);
  font-family       : Verdana, "Courier New", "Lucida Console";
  font-size         : 14px;
  font-weight       : normal;
  padding           : 0px;
  margin            : 0px;
  overflow          : auto;
}

div, table, tr, td, th, h1, h2, h3, a, span, p, pre, fieldset, input, textarea, form, img, select
{
  font-family       : Verdana, "Courier New", "Lucida Console";
  font-size         : 14px;
  font-weight       : normal;
  padding           : 0px;
  margin            : 0px;
  color             : #FFF;
}

/*------------------------------horloge--------------------------------------------------------------*/

a#horloge
{
  left              : 20px;
  top               : 15px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
  color             : #FFF;
  font-weight       : bold;
  text-align        : center;
  text-decoration   : none;
  width             : 350px;
  height            : 130px;
  border-style      : solid;
  border-width      : 2px;
  border-radius     : 5px;
  border-color      : rgba(255, 255, 255, 0.4);
}
	div.aff_heure
	{
	  font-size         : 70px;
	  background-color  : rgba(0, 0, 0, 0);
	}
	div.aff_date
	{
	  font-size         : 35px;
	  background-color  : rgba(0, 0, 0, 0);
	}
	span.aff_ext
	{
	  color             : #0000FB;
	  font-size         : 25px;
	}



/*----------------------------------------------------meteo-------------------------------------------*/
/* 300px 265px */

div#meteo
{
  right	            : 20px;
  top               : 15px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
  color             : #FFF;
  font-weight       : bold;
  border-style      : solid;
  border-width      : 2px;
  border-radius     : 5px;
  border-color      : rgba(255, 255, 255, 0.4);
  width		    	: 350px;
  height	    	: 265px;
}



#meteojaurd
{left	:	2px;	top	:	0px;	position	:	absolute;	width	:	350px;	height	:	130;}

img#imgmeteo
{top	: 	-20px;	right	:	10px;	position	:	absolute;	width	:	150px;	height	:	150px;}

#temptoday
{left	:	20px;	top	:	5px; 	position	:	absolute;	font-size	:	50px;	}
#descriptiontoday
{left	:	2px;	top	:	70px; 	position	:	absolute;	font-size	:	15px;	}
#humtoday
{left	:	2px;	top	:	90px; 	position	:	absolute;	font-size	:	15px;	}
#ventoday
{left	:	2px;	top	:	110px; 	position	:	absolute;	font-size	:	15px;	}


#meteodem
{left	:	0px;	top	:	150px;	position	:	absolute;	width	:	87px;	height	:	130px;}
#datedemain
{font-size	:	12px;	text-align	:	center;	}
#tempdem
{font-size	:	10px;	text-align	:	center;	}
#descriptiondem
{font-size	:	10px;	text-align	:	center;	}



#meteotrm
{left	:	88px;	top	:	150px;	position	:	absolute;	width	:	87px;	height	:	130px;	}
#datetrmain
{font-size	:	12px;	text-align	:	center;	}
#temptrm
{font-size	:	10px;	text-align	:	center;	}
#descriptiontrm
{font-size	:	10px;	text-align	:	center;	}



#meteoqtm
{right	:	88px;	top	:	150px;	position	:	absolute;	width	:	87px;	height	:	130px;	}
#dateqtmain
{font-size	:	12px;	text-align	:	center;	}
#tempqtm
{font-size	:	10px;	text-align	:	center;	}
#descriptionqtm
{font-size	:	10px;	text-align	:	center;	}



#meteocqm
{right	:	0px;	top	:	150px;	position	:	absolute;	width	:	87px;	height	:	130px;	}
#datecqmain
{font-size	:	12px;	text-align	:	center;	}
#tempcqm
{font-size	:	10px;	text-align	:	center;	}
#descriptioncqm
{font-size	:	10px;	text-align	:	center;	}

.description
{text-align	:	center;}
.temperature
{text-align	:	center;}
.imge
{width : 68px; height : 68px; top : 45px; left : 10px; position : absolute; }

/*---------------------------------------------------astro--------------------------------------------*/

div#astro
{
  width             : 350px;
  height            : 285px;
  left              : 20px;
  top               : 158px;
  Border-radius     : 125px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
  border-style      : solid;
  border-width      : 2px;
  border-radius     : 5px;
  border-color      : rgba(255, 255, 255, 0.4)
}


	/* earth */

	div#earth
	{
	  width             : 220px;
	  height            : 220px;
	  left              : 5px;
	  top               : 50px;
	  Border-radius     : 125px;
	  position          : absolute;
	  overflow          : hidden;
	  background-color  : rgba(0, 0, 0, 1);
	}
	
	img#img_earth
	{
	  width             : 220px;
	  height            : 220px;
	}

	/* moon */

	div#moon
	{
	  width             : 120px;
	  height            : 120px;
	  Border-radius     : 75px;
	  left              : 220px;
	  top               : 5px;
	  position          : absolute;
	  overflow          : hidden;
	  background-color  : rgba(0, 0, 0, 1);
	}

	img#img_moon
	{
	  width             : 120px;
	  height            : 120px;
	}


/*----------------------------------------------------domotique----------------------------------------*/

div#link
{
  height           : 60px;
  width            : 350px;
  left             : 20px;
  top              : 454px;
  position         : absolute;
  border-style     : solid;
  border-width     : 2px;
  border-radius    : 5px;
  border-color     : rgba(255, 255, 255, 0.4);
  background-color : rgba(0, 0, 0, 1);
}

div#disque
{
  height	   : 60px;
  max-width	   : 400px;
  min-width	   : 200px;
  top		   : 454px;
  margin	  : auto;
  left		  : 380px;
  right		  : 380px;
  position         : absolute;
  border-style     : solid;
  border-width     : 2px;
  border-radius    : 5px;
  border-color     : rgba(255, 255, 255, 0.4);
  background-color : rgba(0, 0, 0, 1);  
}

a#NAS
{
	top	: 4px;
	left	: 3px;
	position : absolute;
	width : 47%;
}

a#OT
{
	top	: 4px;
	right	: 3px;
	position : absolute;
	width : 47%;
}

a#IOM
{
	bottom	: 24px;
	left	: 3px;
	position : absolute;
	width : 47%;
}

a#HDD
{
	bottom	: 24px;
	right	: 3px;
	position : absolute;
	width : 47%;
}
meter
{
	height	: 30px;
	width	: 100%;
	
}

#meternas
{
	top	: 0px;
	left	: 0px;
	position : absolute;
	z-index : 0;
}

#meterot
{
	top	: 0px;
	left	: 0px;
	position : absolute;
	z-index : 0;
}

#meterio
{
	top	: 0px;
	left	: 0px;
	position : absolute;
	z-index : 0;
}

#meterhdd
{
	top	: 0px;
	left	: 0px;
	position : absolute;
	z-index : 0;
}

#txtnas
{
	font-size	:	8px;
	font-weight	: bold;
	color		: black;
	top	: 10px;
	left	: 5px;
	position : absolute;
	z-index : 1;
}

#txtot
{
	font-size	:	8px;
	font-weight	: bold;
	color		: black;
	top	: 10px;
	left	: 5px;
	position : absolute;
	z-index : 1;
}

#txtio
{
	font-size	:	8px;
	font-weight	: bold;
	color		: black;
	top	: 10px;
	left	: 5px;
	position : absolute;
	z-index : 1;
}

#txthdd
{
	font-size	:	8px;
	font-weight	: bold;
	color		: black;
	top	: 10px;
	left	: 5px;
	position : absolute;
	z-index : 1;
}

.val
{
	font-size	:	7px;
	color		: black;
}
/*----------------------------------------------------lien----------------------------------------*/
	
img#dom	{	position	: absolute;	left	: 0px;	top	: 4px;	height	: 54px;	width	: 108px;}
.imlien	{	height		: 52px;	width		: 52px;}
.imlien2	{	height		: 60px;	width		: 60px;}
a#gallery{	position	: absolute;	left	: 120px;top	: 0px;	height	: 56px;	width	: 56px;	font-size	: 150%;}
a#telec	{	text-decoration : none;	position        : absolute;	left	: 168px;	top	: 4px;	font-size	: 150%;}
a#comp	{	text-decoration : none;	position        : absolute;	left	: 202px;	top	: 2px;	font-size       : 150%;}
a#note	{	text-decoration : none;	position        : absolute;	left	: 286px;	top	: 5px;	font-size       : 150%;}

	
/*------------------------------------------------temperature-----------------------------------------*/


div#temp2
{
  height           : 220px;
  width            : 350px;
  right            : 20px;
  top              : 294px;
  position         : absolute;
  border-style     : solid;
  border-width     : 2px;
  border-radius    : 5px;
  border-color     : rgba(255, 255, 255, 0.4);
  background-color : rgba(0, 0, 0, 1);
  z-index 	   : 2;
}

img#temperature	{	height	: 240px;	width	: 200px;	position	: absolute;	left	: 2px;		top	: -5px;}
img#tempext	{	height	: 40px;		width	: 20px;		position	: absolute;	left	: 150px;	top	: 8px;}
img#hydroext	{	height	: 30px;		width	: 30px;		position	: absolute;	left	: 175px;	top	: 45px;}
img#temprdc	{	height	: 40px;		width	: 20px;		position	: absolute;	left	: 45px;		top	: 160px;}
img#hydrordc	{	height	: 30px;		width	: 30px;		position	: absolute;	left	: 55px;		top	: 185px;}
img#tempetage	{	height	: 40px;		width	: 20px;		position	: absolute;	left	: 45px;		top	: 90px;}
img#tempmailys	{	height	: 30px;		width	: 15px;		position	: absolute;	left	: 150px;	top	: 190px;}

.value
{ 
  font-size       : inherit;
}

.element
{
   font-size      : 50%;
   top	 	  		: -20px;
   left			: 3px;
   position	  	: relative;
}


div#tempExterieur	{	left	: 175px;	top	: 3px;	position	: absolute;	font-size	: 260%;}
div#humExterieur 	{	left	: 200px;	top	: 40px;	position	: absolute;	font-size	: 200%;}
div#tempRdc	 	{	left	: 70px;		top	: 145px;position	: absolute;	font-size	: 260%;}
div#humRdc	 		{	left	: 80px;		top	: 180px;position	: absolute;	font-size	: 200%;}
div#tempMax	 	{	left	: 70px;		top	: 78px;	position	: absolute;	font-size  : 260%;}
div#tempMin	 	{	left	: 110px;	top	: 110px;position	: absolute;	font-size	: 200%;}
div#tempMailys	 	{	left	: 175px;	top	: 190px;position	: absolute;	font-size	: 150%;}

a#verify
{  
  right           : 10px;
  bottom          : 5px;
  position        : absolute;
  font-size       : 80%;
  text-decoration : none;
}

img#ctrl
{
  height 	  : 40px;
  width		  : 40px;
}

/*--------------------------------- lien vers camera---------------------*/

a#fond
{
  top		  : 100px;
  margin	  : auto;
  left		  : 0;
  right		  : 0;
  position	  : absolute;
  height	  : 225px;
  width	 	  : 225px;
  z-index	  : 3;
}

img#fond
{
  height	  : 225px;
  width	 	  : 225px;
}

a#restart
{
  top		  : 10px;
  left		  : 10px;
  position	  : absolute;
  height	  : 10px;
  width		  : 10px;
}
.pow
{
  height	  : 10px;
  width		  : 10px;
}	

a#alarme	{ 	left		: -10px;  	top		: -15px;	position		: absolute;}

.alarm		{ height	: 80px;	width	:80px;}