#container {
width: 470px;
margin: 50px auto;
position: relative;
}

#container .input_wrapper {
position: absolute;
width: 100px;
height: 50px;
}

#container .input_wrapper#input_wrapper_tl {
top: -2px;
left: -115px;
text-align: right;
}

#container .input_wrapper#input_wrapper_tr {
top: -2px;
right: -115px;
text-align: left;
}

#container .input_wrapper#input_wrapper_bl {
bottom: -2px;
left: -115px;
text-align: right;
}

#container .input_wrapper#input_wrapper_br {
bottom: -2px;
right: -115px;
text-align: left;
}

#container .input_wrapper input {
	text-align: right;
	position: absolute;
	top: 0;
	right: 0;
	width:40px;
	padding: 2px 8px;
	border: 1px solid #c1c1c1;
	text-align:center;
	outline: none;
	background: #fff;
	font: bold 15px Arial, Helvetica, sans-serif;
	color: #000;
}

#container .input_wrapper#input_wrapper_tr input,
#container .input_wrapper#input_wrapper_br input {
	right: auto;
	left: 0;
}

#container .input_wrapper#input_wrapper_bl input,
#container .input_wrapper#input_wrapper_br input {
	top: auto;
	bottom: -1px;
}


#container #surface {
background: #e9eaee;
border: 1px solid #c1c1c1;
padding: 44px 40px 20px 40px;
width: 460px;
margin: 0 auto;
text-align: center;
}

#container #surface textarea {
background: #fafafc;
border: 1px solid #a3a3a3;
resize: none;
width: 380px;
height: 240px;
outline: none;
font: normal 15px Monaco, 'Courier New', monospace;
line-height: 20px;
padding: 9px 10px;
color: #2f2f2f;
overflow: hidden;
}

#container #surface #options {
margin: 10px 0 0 0;
}

#container #surface #options input {
margin-right: 2px;
}

#container #surface #options label {
margin-right: 6px;
color: #393939;
}

#container #surface #options label.last {
margin-right: 0;
}

@media screen and (max-width:840px){
	#container {
		width:80%;
	}
	#container #surface {
		width:100%;
	}
	#container #surface textarea {
		width:100%;
	}
}