#text-demo label{
	display:block;
	float:left;
	width:140px;
	text-align:right;
	padding:6px;
}

textarea{
	width:506px;
	height:50px;
	border:1px solid #888;
	background-color:#e2e2e2;
	color:#858585;
}
textarea:hover{
	border:1px dashed #424242;
	background-color:#e5e5e5;
}
textarea:focus{
	color:#333333;
	border:1px solid #888;
	background-color:#f9f9f9;
	border:1px solid #424242;
}
/*
this class is for the lower bar container.
It does really require any styling
*/
.tbWrapper{

}

/*
This is the progress bar container
Width is set with javascript, but those value can be modified
Try to keep the button's and preogres bar's margin-left the same for better results
*/
.tbProgress{
	height:1em;
	border:1px inset #FF7A19;
	background-color:#FFF;
}

/*
this is the actual progress indicator, inside the porgressbar container
Except the background color, you probably don't want to mess up the other properties
You can set a background image if you want
*/
.tbProgressBar{
	background-color:#FFB119;
}

/*
chracters counter. Same here, except the text color, you don't want to modify any other property
*/
.tbCounter{
	color:#000;
	font-family:Trebuchet MS, Helvetica, sans-serif;
	font-size:0.8em;
	font-weight:bold;
}