#keyboard{
	/* shape */
	margin-top: 5px;
}

#keyboard li{
	/* color */
	background: #32C4FC;
	border: 1px solid #006186;
	/* shape */
	float: left;
	margin: 0px 3px 3px 0px;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	/* font */
	font-family: 'Droid Sans', sans-serif;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
}

#write{
	/* display */
	display: block;
	/* shape */
	width: 343px;
	height: 75px;
	margin-top: 30px;
	padding-left: 5px;
	padding-right: 5px;
	/* color */
	background-color: #0080B1;
	border: 1px solid #000;
	border-radius: 5px;
	/* font */
	font-family: 'VT323', sans-serif;
	word-wrap: break-word;
}

#blinkingCursor{
	/* positioning */
	position: absolute;
	top: -30px;
	/* display */
	display: block;
	/* shape */
	width: 343px;
	height: 75px;
	margin-top: 30px;
	padding-left: 5px;
	padding-right: 5px;
	/* color */
	border: 1px solid #000;
	border-radius: 5px;
	/* font */
	font-family: 'VT323', sans-serif;
	word-wrap: break-word;
	/* animation */
	animation-name: blinkcur;
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
}

#inputError{
	/* color */
	color: #0080B1;
	/* position */
	position: absolute;
	top: 55px;
	left: 5px;
	/* font */
	font-family: 'VT323', sans-serif;
	/* animaiton */
	animation-name: "none";
}

#keyboard li:hover{
	/* shape */
	position: relative;
	top: 1px;
	left: 1px;
	/* color */
	border-color: #E5E5E5;
	cursor: pointer;
}

/* specific keys */
.capslock, .tab, .left-shift{
	clear: left;
}

#keyboard .delete, #keyboard .tab{
	width: 33px;
}
#keyboard .capslock{
	width: 38px;
}
#keyboard .return{
	width: 40px;
}
#keyboard .left-shift{
	width: 49px;
}
#keyboard .right-shift{
	width: 53px;
}

.lastitem {
	margin-right: 0;
}
.uppercase {
	text-transform: uppercase;
}
#keyboard .space{
	clear: left;
	width: 353px;
}
.on{
	display: none;
}

/* Animation */
@keyframes blinkcur{
	0%{color: #000;}
	50%{color:#0080B1;}
	100%{color:#000;}
}

@keyframes errorBlink1{
	0%{color: #0080B1; }
	50%{color: #FF0000;}
	100&{color: #0080B1;}
}

@keyframes errorBlink2{
	0%{color: #0080B1; }
	50%{color: #FF0000;}
	100&{color: #0080B1;}
}

