.aspecttd {
	padding: 1px;
	border: 2px solid ;
	border-radius:4px 0px 4px 0px;
	-moz-border-radius:4px 0px 4px 0px;
	-webkit-border-radius:4px 0px 4px 0px;
	background: linear-gradient(to right bottom, #79c1cf, white);
	-moz-border-radius:7px 0px 7px 0px;
	-webkit-border-radius:7px 0px 7px 0px;
	border-radius:7px 0px 7px 0px;
	box-shadow:2px 2px 10px gray; 
	-moz-box-shadow:2px 2px 10px gray;
	-webkit-box-shadow:2px 2px 10px gray;
	text-align: left ;
	width: 550px;
}

 .aspecttd2 {
	padding: 1px;
	border: 0px solid ;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background: linear-gradient(to right bottom, #58fa58, white);		
	box-shadow:2px 2px 10px gray; 
	-moz-box-shadow:2px 2px 10px gray;
	-webkit-box-shadow:2px 2px 10px gray;
	text-align: center ;
	font: 1.1em "Denk One", helvetica, sans-serif ;
	font-weight: 200;
}

 .aspecttd3 {
	padding: 0px;
	border: 0px solid ;
	font: 0.1em "Denk One", helvetica, sans-serif ;
}

.aspecttd4 {
 
	padding: 0.3em;
	font-size: 1em;
	text-align: left;
    
	vertical-align: middle;
    
	background: linear-gradient(to bottom, transparent 10%, #F3f3f3 80%), linear-gradient(#F7f7f7, #EEE);
    
	background-size: 100% 100%;
    
	background-position: right bottom;
    transition: all 0.6s ease-in;
}

.aspecttd5 {
    
	font-size: 1em;
    
	background: #666;
    
	color: #FFF;
    
	padding: 0em;
    
	width: 40px;
    
	border-collapse: separate;
    
	border: 0px solid #000;
    
	text-align:center;
    
	vertical-align: middle;

}

.aspecttd5 a {
    color: #FFD700; /* Couleur du lien hypertexte */
    text-decoration: none; /* Enlever le soulignement si souhaité */
}

.aspecttd5 a:hover {
    color: #FFFFFF; /* Couleur lors du survol */
    text-decoration: underline; /* Ajoute un soulignement lors du survol si voulu */
}



a.webcam_button {
 position:relative;
 display:inline-block; /* If you worry about old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */
 width:44px;
 height:44px;
 text-indent:-9999px; /* don't show link text */
 overflow:hidden; /* don't draw inner link text */
 vertical-align:middle;
 /* and, a bit of round-ness for the cool browsers. */
 border-radius:2px;
 margin-top:-1px; /* vertical align tweak */
 transition: all 0.2s ease-in-out;
 /* weird IE 6/7 display fixes, and/or I'm doing it wrong */
 *text-indent:0px;
 *line-height:99em;
 *vertical-align: top;
}

a.webcam_button:focus {
 outline:none; /* maybe evil, but don't show the slight border outline on focus. */
}

a.webcam_button,
a.webcam_button.webcam_paused:hover {
 *background-color:#3399cc;
 background-image:url(../image/webcam-off.png);
 /* where possible, use data: and skip the HTTP request. Fancy-pants. Would use short-hand background: for above, but IE 8 doesn't override background-image. */
 /*background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAbklEQVQY02NgQAL//v1jZMAF/v//vwuIs9HEUBUBTbj4HwIeA3EGVsVAxtn/qOAVUGM8uknIiv4hsV8A5ZKxKfoLVvnvHwifAzLtMKwDSQLBVSBti27dJajkcSD2RJODO3wtkOOMz/tMSJJYAxMA5dmsL0IfubQAAAAASUVORK5CYII=);*/
* background-image: none, url(../image/webcam-off.png);
 background-size: 33px 33px;
 *background-image:url(../image/arrow-right-white.gif); /* IE 6+7 don't do DATA: URIs */
 background-repeat:no-repeat;
 background-position:5px 50%;
 *background-position:5px 4px; /* IE 6 again */
}

a.webcam_button:hover,
a.webcam_button.webcam_playing,
a.webcam_button.webcam_playing:hover {
*background-color:#ffffff;
background-image:url(../image/webcam-on.png);
}

a.webcam_button:active,
a.webcam_button.webcam_playing,
a.webcam_button.webcam_playing:active {
*background-color:#ffffff;
background-image:url(../image/webcam-action.png);
}

a.webcam_button:visited,
a.webcam_button.webcam_playing,
a.webcam_button.webcam_playing:visited {
*background-color:#ffffff;
background-image:url(../image/webcam-action.png);
}

a.webcam_button.webcam_playing,
a.webcam_button.webcam_playing:hover {
 transform:rotate(90deg);
}

a.webcam_button.webcam_paused,
a.webcam_button.webcam_paused:hover {
 background-color:#3399cc;
}

/* bouton stop  */

a.bouton_stop {
 position:relative;
 display:inline-block; /* If you worry about old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */
 width:44px;
 height:44px;
 text-indent:-9999px; /* don't show link text */
 overflow:hidden; /* don't draw inner link text */
 vertical-align:middle;
 /* and, a bit of round-ness for the cool browsers. */
 border-radius:2px;
 margin-top:-1px; /* vertical align tweak */
 transition: all 0.2s ease-in-out;
 /* weird IE 6/7 display fixes, and/or I'm doing it wrong */
 *text-indent:0px;
 *line-height:99em;
 *vertical-align: top;
}

a.bouton_stop:focus {
 outline:none; /* maybe evil, but don't show the slight border outline on focus. */
}

a.bouton_stop,
a.bouton_stop.webcam_paused:hover {
 *background-color:#3399cc;
 background-image:url(../image/360-bouton-stop.png);
 /* where possible, use data: and skip the HTTP request. Fancy-pants. Would use short-hand background: for above, but IE 8 doesn't override background-image. */
 /*background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAbklEQVQY02NgQAL//v1jZMAF/v//vwuIs9HEUBUBTbj4HwIeA3EGVsVAxtn/qOAVUGM8uknIiv4hsV8A5ZKxKfoLVvnvHwifAzLtMKwDSQLBVSBti27dJajkcSD2RJODO3wtkOOMz/tMSJJYAxMA5dmsL0IfubQAAAAASUVORK5CYII=);*/
* background-image: none, url(../image/360-bouton-stop.png);
 background-size: 33px 33px;
 *background-image:url(../image/arrow-right-white.gif); /* IE 6+7 don't do DATA: URIs */
 background-repeat:no-repeat;
 background-position:5px 50%;
 *background-position:5px 4px; /* IE 6 again */
}

a.bouton_stop:hover,
a.bouton_stop.webcam_playing,
a.bouton_stop.webcam_playing:hover {
*background-color:#ffffff;
background-image:url(../image/360-bouton-stop-bleu.png);
}

a.bouton_stop:active,
a.bouton_stop.webcam_playing,
a.bouton_stop.webcam_playing:active {
*background-color:#ffffff;
background-image:url(../image/360-bouton-stop-bleu.png);
}

a.bouton_stop:visited,
a.bouton_stop.webcam_playing,
a.bouton_stop.webcam_playing:visited {
*background-color:#ffffff;
background-image:url(../image/360-bouton-stop-bleu.png);
}

/* carto Reunion  */

a.carto {
 position:relative;
 display:inline-block; /* If you worry about old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */
 margin-left: auto;
 margin-right: auto;
 width:150px;
 height:90px;
 text-indent:-9999px; /* don't show link text */
 overflow:hidden; /* don't draw inner link text */
 vertical-align:middle;
 /* and, a bit of round-ness for the cool browsers. */
 border-radius:2px;
 margin-top:-1px; /* vertical align tweak */
 transition: all 0.2s ease-in-out;
 /* weird IE 6/7 display fixes, and/or I'm doing it wrong */
 *text-indent:0px;
 *line-height:99em;
}

a.carto:focus {
 outline:none; /* maybe evil, but don't show the slight border outline on focus. */
}

a.carto,
a.carto.carto_paused:hover {
 *background-color:#3399cc;
 background-image: none, url(../image/LaReunion.png);
 /* where possible, use data: and skip the HTTP request. Fancy-pants. Would use short-hand background: for above, but IE 8 doesn't override background-image. */
 /*background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAbklEQVQY02NgQAL//v1jZMAF/v//vwuIs9HEUBUBTbj4HwIeA3EGVsVAxtn/qOAVUGM8uknIiv4hsV8A5ZKxKfoLVvnvHwifAzLtMKwDSQLBVSBti27dJajkcSD2RJODO3wtkOOMz/tMSJJYAxMA5dmsL0IfubQAAAAASUVORK5CYII=);*/
* background-image: none, url(../image/360-bouton-stop.png);
 background-size: 142px 87px;
 *background-image:url(../image/arrow-right-white.gif); /* IE 6+7 don't do DATA: URIs */
 background-repeat:no-repeat;
 background-position:5px 50%;
 *background-position:5px 4px; /* IE 6 again */
}

a.carto:hover,
a.carto.carto_playing,
a.carto.carto_playing:hover {
background-color:#f3f3f3;

}

a.carto:active,
a.carto.carto_playing,
a.carto.carto_playing:active {
background-color:#ffffff;
}

a.carto:visited,
a.carto.carto_playing,
a.carto.carto_playing:visited {
background-color:#ffffff;
}