@import url(https://fonts.googleapis.com/css?family=Karla:400);

body{
  background: #f8f8f8;
  font-family:Karla, sans-serif;
height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(../bg.jpg)  no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


}

.wrapper{
	width:280px;
	height:370px;
	position:absolute;
	left:50%;
	top:45%;
	margin:-185px 0 0 -140px;
  text-align:center;
  background-color:rgba(24,45,64,0.8);
border: thin solid #a0c3e1;

}

.teldata{
	width:280px;
	height:50px;
	position:absolute;
	left:50%;
	top:45%;
	margin:-250px 0 0 -140px;
  text-align:center;
  background-color:rgba(24,45,64,0.8);
  border: thin solid #a0c3e1;


}
.callon{
	width:280px;
	height:60px;
	position:absolute;
	left:50%;
	top:45%;
	margin:200px 0 0 -140px;
  text-align:center;



}
.chattype {
	width:90%;
	height:90%;

	color: #a0c3e1;
	  background-color:rgba(24,45,64,0.0);
	  border:0;
	font-size:26px;
	text-align:center;
	 font-family:Karla, sans-serif;
}
.chat {
	width:100%;
	height:100%;
	border:0;
	color: #a0c3e1;
	background-color:rgba(36,89,129,0.6);
	border: thin solid  #a0c3e1;
	font-size:22px;
	letter-spacing:2px;
	 font-family:Karla, sans-serif;
}


.dtmf-interface{
  width:280px;
  margin:0;
  padding:0;
  overflow:hidden;
}

.dtmf-interface li{
  float:left;
  margin:10px;
  list-style:none;
  width:70px;
  height:70px;
  text-align:center;
  line-height:70px;
  font-size: 28px;
  border: thin solid  #a0c3e1;
  border-radius:3px;
  padding:0px;
  transition: all 0.5s;
  color:#a0c3e1;
   

}

.dtmf-interface li:hover{
  color: #3CD9FD;
  border-color:#3CD9FD;
  transition-duration:0s;
  cursor:pointer;
}

.dtmf-interface li:active{
  color: #F60;
  border-color:#F60;
  transition-duration:0s;
}