body {
	margin: 20px;
}

#input {
	opacity: 0;
}
#textfield .symbol {
	float: left;
	position: relative;
	width: 112px;
	height: 176px;
	margin-right: 16px;
	text-align: left;
}
#textfield div {
	position: absolute;
}

#textfield .space {
	float: left;
	width: 48px;
	height: 176px;
	position: relative;
}
#textfield .word {
	float: left;
	position: relative;
}
#textfield .cursor {
	float: left;
	position: relative;
}
#tools {
	position: absolute;
	bottom: 20px; left: 20px;
}
#tools input {
	font-size: 16px;
}
.scrollbar {
	display: block;
	position: static;
	overflow: scroll;
}
.scrollbar span {
	display: block;
}

.single {width: 16px; height: 16px; b-ackground: green;}
.double_horizontal {width: 32px; height: 16px; b-ackground: blue;}
.double_vertical {width: 16px; height: 32px; b-ackground: yellow;}
.triple_horizontal {width: 48px; height: 16px; b-ackground: orange;}

.triple_vertical {width: 16px; height: 48px; b-ackground: violet;}
.triple_vertical .scrollbar {
	width: 16px; height: 48px;
	overflow-x: hidden;
}
.triple_vertical .scrollbar span {
	height: 400%;
	width: 16px;
}

.quatro_horizontal {width: 64px; height: 16px; b-ackground: lime;}
.quatro_horizontal .scrollbar {
	width: 64px; height: 16px;
	overflow-y: hidden;
}
.quatro_horizontal .scrollbar span {
	width: 600%;
	height: 16px;
}

.quatro_vertical {width: 16px; height: 64px; b-ackground: red;}
.quatro_vertical .scrollbar {
	width: 16px; height: 64px;
	overflow-x: hidden;
}
.quatro_vertical .scrollbar span {
	width: 16px; height: 600%;
}

.punto_vertical {width: 16px; height: 80px; b-ackground: red;}
.punto_vertical .scrollbar {
	width: 16px; height: 80px;
	overflow-y: hidden;
}
.punto_vertical .scrollbar span {
	height: 600%; width: 16px;
}

.punto_horizontal {width: 80px; height: 16px; b-ackground: red;}
.punto_horizontal .scrollbar {
	width: 80px; height: 16px;
	overflow-x: hidden;
}
.punto_horizontal .scrollbar span {
	width: 600%; height: 16px;
}

#textfield input, #textfield select {
	width: 100%;
	height: 100%;
}