body {
  background-color: black;
}
.good{
	color:green;
}
.bad{
	color: red;
}
.on{
	color: Orange;
}
.off{
	color: black;
}
.bt{
	font-size: 28px;
	font-weight: bolder;
}
.key{
	color: white;
	font-size:22px;
	font-family:Arial;
}
.pin{
	color: black;
	font-size:22px;
	font-family:Arial;
}
button{
	background-color: #e7e7e7; /* Green */
	border: none;
	color: black;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-radius: 12px;
	width:180px;
	height:130px;
	font-size: 20px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
button.report{
	background-color: black; /* Green */
	border: 4px solid red;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 22px;
	border-radius: 12px;
	width:210px;
	height:130px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
button:active{
	background-color: blue;
}
img{
	height:60px;
	width:60px;
}
.video{
	height:260px;
	width:350px;
	padding-left:12px;
}
td.report{
	color: white;
	font-size:22px;
	font-family:Arial;
	text-align:right;
	width:210px;
}
td.post{
	color: white;
	font-size:22px;
	font-family:Arial;
	text-align:center;
}
@keyframes blink {
    0% {
        content:url(icon/MailY.png);
		width:100px;
    }
    40% {
        content:url(icon/MailY.png);
		width:100px;
    }
	50% {
		opacity : 0;
	}
    60% {
        content:url(icon/MailG.png);
		width:100px;
    }
    100% {
        content:url(icon/MailG.png);
		width:100px;
    }
}
.mail{
    animation: blink 1s;
    animation-iteration-count: infinite;
	text-align:center;
	width:180px;
	align:center;
	vertical-align:center;
}
td.nomail{
	text-align:center;	
	width:180px;
}
.OK{
	color:green;
}
.notOK{
	color:red;
}
.dimm{
	color: gray;
}