* {
margin: 0;
padding: 0;
}
/* imagen de fondo en todo el documento */


/* caraga el contenedor donde esgta la maquina de escribir */
#container {
margin: 100px  auto 0 auto  ;
width: 100%;
position:relative;



}
 /* typewritter  aqui carga la maquina de escrbir fisica sin teclas */
#typewritter{
	height:300px;
	width:300px;
	background: transparent url(../img/contact/machine-mobile-cn.png) no-repeat 0 0;
	position:relative;
	top:80%;
	z-index:200;
	left:30px;

  
 
 
}





 /* #write  aqui se carag el papel con un tamano de 477px de ancho y 58 de alto 
	en la programacion se amplia a 260px 
 */
#write {
margin-bottom:50px;
margin:0 0px;
padding:5px;
width: 20px;
height: 52px;
*height:56px;
font-family: 'HartingPlain', Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 400;
color:black;
background: transparent url(../img/contact/sheet_2.png) no-repeat top left;
line-height:30px;
*line-height:30px;
border:none;
position:relative;
top:-20px;
left:16px;
*top:5px;
z-index:2;
outline:none;
resize:none;
overflow-y:scroll;
  
     -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
   -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
  
  

}
textarea{
height:30px;


}






/* aqui carga el teclado  en la cual es un tag ul y li que carga cada tecla */
#keyboard {
width:auto;
*width:44px;
margin: 0 18px 0 45px ;
list-style: none;
position:absolute;
z-index:3;
overflow:hidden;
top:25%;
left:-10px;

}
	/* aqui carga una tecla y asignacion de character por cada li asignado dentro #keyboard*/
	#keyboard li {
	float: left;
	margin: 0 0 0 0;
	width: 10px;
	height: 19px;
	line-height: 20px;
	text-align:	 center;
	font-family: arial, serif;
	font-size:10px;
	color:#4B3005;
	text-shadow: -1px -1px 1px #ccc;
	left:0px;
	}
		/* aqui asigna el background de las teclas en general*/	
		li.letter,li.symbol {
				background: transparent url(../img/contact/contact-mobile/key.png) no-repeat  center  5px;	
			}
		.capslock, .tab, .left-shift {
		clear: left;
		}
			/* aqui asigna el background unicamemente para las teclas delete keyboard y return  son el mismo tamano*/	
			#keyboard .tab, #keyboard .delete ,#keyboard .return {
				background: transparent url(../img/contact/contact-mobile/shift_key.png) no-repeat   center  7px;
					width: 48px;
			}
			/* aqui asigna el background unicamemente para las tecla caps lock */	
			#keyboard .capslock {
				background: transparent url(../img/contact/contact-mobile/return.png) no-repeat 8px 5px;									
				width: 104px;
			}	
			/* aqui asigna el background unicamemente para las teclas shift left y right*/				
			#keyboard .left-shift, #keyboard .right-shift {
				background: transparent url(../img/contact/contact-mobile/shifts_keys.png) no-repeat   center  7px;
					width: 90px;
			}

		.lastitem {
				margin-right: 0;
		}
		/* esto aplica exclusivamente  solo cuando para las letras en el teclado las convierte en mayusculas */
		.uppercase {
		text-transform: uppercase;
		}
		/* aqui asigna el background unicamemente para las tecla space*/						
		#keyboard .space {
		clear: left;
		width: 544px;
		*width: 534px;		
		background: transparent url(../img/contact/contact-mobile/key_space.png) no-repeat  center center;
		}
		/* esto aplica esclusivamente cuando cliquea shift camia los numeros en simbolos*/								
		.on {
		display: none;
		}
		/* convierte  en pointer cualquier teclas que esta puesta ensimade ella*/
		#keyboard li:hover {
		cursor: pointer;
		}
			/* aqui asigna el background unicamemente para las tecla send*/								
		li#send {
				font-size:26px;
				color:#4B3005;
				text-shadow: -1px -1px 1px #fff;
				width:80px;
				top:70%;
				background: transparent url(../img/contact/contact-mobile/shifts_keys.png) no-repeat    center center;
		}