#text-demo label{

	display:block;

	float:left;

	width:140px;

	text-align:right;

	padding:6px;

}

textarea {

	font-family: "courier new", monospace;

	width: 750px;  /* With 100%, FF loses width when tabs are switched and makes textareas 2x tall. (with dynamicdrive tabs). Try mootools tabs later */

	border: 0px solid #C6D9E9;

	color: navy;

	/*font-size: 12px;

	line-height: 18px;*/

	/*margin: 5px 0;*/

	margin: 0;

	padding: 0px !important;

	-moz-border-radius: 6px;

	-khtml-border-radius: 6px;

	-webkit-border-radius: 6px;

	border-radius: 6px;

}

div.mooarea {

	clear:right;

	display: block;

	width: 750px; /* With 100%, FF loses width when tabs are switched and makes textareas 2x tall. (with dynamicdrive tabs). Try mootools tabs later */

	border: 3px solid #C6D9E9;

	margin: 7px 0;

	padding: 5px;

	background: #ffffff;

	-moz-border-radius: 6px;

	-khtml-border-radius: 6px;

	-webkit-border-radius: 6px;

	border-radius: 6px;

	}

/*

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;

}