@font-face{font-family:'Icones Pro';src:url('../fuentes/glyphicons-regular.eot');src:url('../fuentes/glyphicons-regular.eot?#iefix') format('embedded-opentype'),url('../fuentes/glyphicons-regular.woff2') format('woff2'),url('../fuentes/glyphicons-regular.woff') format('woff'),url('../fuentes/glyphicons-regular.ttf') format('truetype'),url('../fuentes/glyphicons-regular.svg#glyphiconsregular') format('svg');}

@font-face {font-family: 'Icones Simples';src: url('../fuentes/glyphicons-halflings-regular.eot');src: url('../fuentes/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fuentes/glyphicons-halflings-regular.woff2') format('woff2'), url('../fuentes/glyphicons-halflings-regular.woff') format('woff'), url('../fuentes/glyphicons-halflings-regular.ttf') format('truetype'), url('../fuentes/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}

@font-face{font-family:'Icones Social';src:url('../fuentes/glyphicons-social-regular.eot');src:url('../fuentes/glyphicons-social-regular.eot?#iefix') format('embedded-opentype'),url('../fuentes/glyphicons-social-regular.woff2') format('woff2'),url('../fuentes/glyphicons-social-regular.woff') format('woff'),url('../fuentes/glyphicons-social-regular.ttf') format('truetype'),url('../fuentes/glyphicons-social-regular.svg#glyphicons_socialregular') format('svg');}

@font-face{font-family:'Icones Filetypes';src:url('../fuentes/glyphicons-filetypes-regular.eot');src:url('../fuentes/glyphicons-filetypes-regular.eot?#iefix') format('embedded-opentype'),url('../fuentes/glyphicons-filetypes-regular.woff2') format('woff2'),url('../fuentes/glyphicons-filetypes-regular.woff') format('woff'),url('../fuentes/glyphicons-filetypes-regular.ttf') format('truetype'),url('../fuentes/glyphicons-filetypes-regular.svg#glyphicons_filetypesregular') format('svg');}

body{
margin:0px;
padding:0px;
background-color:#F5F5F5;	
}

section{
width:33.33%;
float:left;
overflow:hidden;
padding:10px;
box-sizing:border-box;		
}

section>header,section>aside{
width:100%;
height:20%;	
text-align:center;	
box-sizing:border-box;		
}

section>header{
background-image:url("../img/logo.png");
background-size: contain; 
background-position: center center;
background-repeat: no-repeat;
}


section>aside{
background-image:url("../img/logototenapps.png");
background-size: contain;
background-position: bottom right;
background-repeat: no-repeat;
cursor:pointer;
}

section>article{
width:100%;
height:auto;	
box-sizing:border-box;
}

section>div{
width:100%;
height:80%;
box-sizing:border-box;		
}

.busuarios{
width: 48.725%;
height: 50px;
line-height:50px;
overflow: hidden;
border: 1px solid #CCC;
font-family: Arial,Helvetica,sans-serif;
background-color: #F7F7F7;
color: #333;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #FFF inset;
border-radius: 3px;
display: inline-block;
text-shadow: 0px 1px 0px #FFF;
white-space: nowrap;
font-size: 16px;
cursor: pointer;
text-align:center;
box-sizing:border-box;
margin: 0px 0.05% 0px 1%;
}

.busuarios:hover{
background-color:#7e7e7e;
color:white;
}

.nombreusuario{
width:80%;
height: 50px;
line-height:50px;
text-align:center;
overflow: hidden;
float:left;
text-overflow: ellipsis;
}


.imgusuario,.iconousuario{
width:10%;
height: 50px;
line-height:50px;
font-family: Icones Pro;
font-size:16px;
text-align:center;
float:left;
}

#tecladoVirtual{
margin: 0 auto;	
width:215px;
height:380px;	
background-color:white;
font-family:Arial;
padding:10px;
box-sizing:border-box;
border: 1px solid #CCC;
color: #333;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #FFF inset;
border-radius: 3px;
}

#visorTeclado{
width:195px;
height:50px;
box-sizing:border-box;
margin-bottom:10px;
padding:3px;
}

#teclasTeclado{
width:195px;
height:auto;	
box-sizing:border-box;
}

#passusuario{
	width:49%;
	font-size:20px;	
	height:45px;
	line-height:45px;
	display:block;
	box-sizing:border-box;	
	float:left;
	margin:0px 1%;
	text-align:center;
}


.teclaNumero,.teclaLetra,#borrar,.cambioTecladoLetras,#cambioTeclado{
border: 1px solid #CCC;
font-family: Arial,Helvetica,sans-serif;
background-color: #F7F7F7;
color: #333;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #FFF inset;
border-radius: 3px;
display: inline-block;
text-shadow: 0px 1px 0px #FFF;
white-space: nowrap;
font-size: 30px;
cursor: pointer;
text-align:center;
box-sizing:border-box;
}

#cambioTeclado,#borrar{
width:93px;	
height:45px;
line-height:45px;
float:left;
font-family:Icones Pro;
font-size:25px;
}

#cambioTeclado{
margin: 0px 1px 0px 0px;
}

#borrar{
margin: 0px 0px 0px 1px;
}


.teclaNumero{
width:55px;
height:55px;
line-height:55px;
margin:5px;
cursor:pointer;
font-size:40px;
}

.teclaLetra{
width:37px;
height:37px;
margin:1px;
line-height:37px;
font-size:20px;
}



.teclaNumero:hover,.teclaLetra:hover,.cambioTecladoLetras:hover,#borrar:hover,#cambioTeclado:hover,#identificacionusuarios>div:hover{
background-color:#7e7e7e;
color:white;	
}

.cambioTecladoLetras,#borrar{
font-family:Icones Pro;	
}

.cambioTecladoLetras{
width:193px;
height:37px;
margin:5px 1px 1px 1px;	
line-height:37px;
font-size:20px;
}

#identificacionusuarios{
width:100%;
height:45px;
line-height:45px;
margin-top:20px;
}

#identificacionusuarios>div{
width:10%;
height:45px;
line-height:45px;
text-align:center;
font-size:24px;
font-family:Icones Pro;	
cursor:pointer;
float:left;
color:#333;
}


#barraTecladoVirtual{
width:100%;
height:20px;
line-height:20px;
background-color:#F7F7F7;
cursor:pointer;
padding: 0px 5px 0px 5px;
box-sizing:border-box;
}

.botoBlink{
	border:1px solid white;
	cursor:pointer;
	-webkit-animation: botoBlinking 1s infinite;
    animation: botoBlinking 1s infinite;
}
/*-------------------------------------blinkings-------------------------------------------------*/
@-webkit-keyframes botoBlinking{
    0% {background:red;color:white;}
    50% {background:lightorange;color:white;}
    100% {background:lightyellow;color:red;}
}

@keyframes botoBlinking {
    0% {background:red;;color:white;}
    50% {background:lightorange;color:white;}
    100% {background:lightyellow;color:red;}
}