#tabs
{
	margin: 0;
	padding: 1em 0 0;
}
#tabs li
{
	background-image: url("/images/tab-left.png");
	background-position: left top;
	background-repeat: no-repeat;
	cursor: default;
	display: block;
	float: left;
	margin: 0 0 0 8px;
	overflow: hidden;
	padding: 3px 2px 3px;
	position: relative;
	top: 2px;
	width: 8em;
}
#tabs li:before
{
	background: url("/images/tab-right.png") no-repeat right top;
	content: "";
	display: block;
	height: 64px;
	margin: -3px -2px -61px -2px;
}
#tabs li.on
{
	margin-bottom: -2px;
	margin-left: 6px;
	margin-right: -2px;
	padding: 4px;
	top: 0;
	z-index: 1;
}
#tabs li.on:before
{
	margin-left: -4px;
	margin-right: -4px;
	margin-top: -4px;
}
#tabs a
{
	color: #000;
	display: block;
	text-decoration: none;
}

#html_tab
{
	background-color: #e68a8a;
}
#html_tab:hover
{
	background-color: #f29191;
}
#html_tab.on, #html_fieldset, #html_fieldset legend
{
	background-color: #f99;
}
#html_tab.on
{
	border-bottom: 1px solid #f99;
}
#html_fieldset
{
	border: 1px solid #806666;
}
#html_fieldset div
{
	border: 1px solid #fcc;
}
#html_fieldset textarea
{
	border: 1px solid #806666;
	outline: 1px solid #fcc;
}

#css_tab
{
	background-color: #73cf45;
}
#css_tab:hover
{
	background-color: #7adb49;
}
#css_tab.on, #css_fieldset, #css_fieldset legend
{
	background-color: #80e64d;
}
#css_tab.on
{
	border-bottom: 1px solid #80e64d;
}
#css_fieldset
{
	border: 1px solid #407327;
}
#css_fieldset div
{
	border: 1px solid #bff2a6;
}
#css_fieldset textarea
{
	border: 1px solid #407327;
	outline: 1px solid #bff2a6;
}

#ecmascript_tab
{
	background-color: #8ab8e6;
}
#ecmascript_tab:hover
{
	background-color: #91c2f2;
}
#ecmascript_tab.on, #ecmascript_fieldset, #ecmascript_fieldset legend
{
	background-color: #9cf;
}
#ecmascript_tab.on
{
	border-bottom: 1px solid #9cf;
}
#ecmascript_fieldset
{
	border: 1px solid #4d6680;
}
#ecmascript_fieldset div
{
	border: 1px solid #cce5ff;
}
#ecmascript_fieldset textarea
{
	border: 1px solid #4d6680;
	outline: 1px solid #cce5ff;
}

fieldset.tab
{
	clear: both;
	padding: 0;
	position: relative;
}
fieldset.tab div
{
	padding: 8px;
}
fieldset.tab textarea
{
	height: 24em;
	margin: 0 -1px;
	width: 100%;
}
fieldset.tab legend
{
	border: 1px solid #000;
}
fieldset.off
{
	display: none;
}

#submit
{
	padding: 0;
}
#submit li
{
	display: inline;
	display: inline-block;
	list-style: none;
	margin: 2px;
}
li.display
{
	outline: 2px solid #fc0;
}
li.validate
{
	padding-left: .3333em;
}

#input_content, #output_content
{
	padding-top: 0;
}

iframe
{
	border: 0;
}
#output_content
{
	border: 1px solid #666;
	outline: 1px solid #ddd;
}

div div div:after
{
	clear: both;
	content: "";
	display: block;
}

h4
{
	margin: 0;
}

h4 span
{
	font-size: .8em;
	font-weight: normal;
}

/* Line numbers */

pre
{
	background: #fff;
	border-left: 3em solid #eee;
	clear: both;
	color: #000;
	counter-reset: linenum;
	float: left;
	line-height: 1.4em;
	padding-left: .25em;
	position: relative;
	white-space: pre;
	white-space: -moz-pre-wrap;
	white-space: pre-wrap;
}

pre:after
{
	content: "";
}

pre, textarea, code
{
	font-family: "Bitstream Vera Sans Mono", monospace;
	font-size: .8em;
}

pre code
{
	font-size: 1em;
}

.line-start
{
	color: #000;
	counter-increment: linenum;
	cursor: default;
	display: block;
	left: -3.25em;
	margin-bottom: -1.4em;
	padding-right: .25em;
	position: absolute;
	text-align: right;
	width: 2.75em;
}

.line-start:before
{
	content: counter(linenum);
}

.wrap-point:after
{
	content: "\A";
	white-space: pre;
}

/* Syntax information */

code[title]
{
	border-bottom: .075em dashed;
	cursor: help;
}

code.hastitle
{
	border-bottom: .075em dashed;
	cursor: help;
}

div.html h3:before
{
	background-image: url("/images/basic/html.png");
}
div.css h3:before
{
	background-image: url("/images/basic/css.png");
}
div.ecmascript h3:before
{
	background-image: url("/images/basic/ecmascript.png");
}