html, body { padding: 0; margin: 0; }
body { background-color: #222; color: #555; font-family: Verdana, sans-serif; overflow: hidden; }
form { padding: 0; margin: 0; }

#title_bar { 
	background-color: #333;
	background-repeat: repeat-x;
	font-size: 13px; 
	line-height: 40px; 
	color: #ccc;
	height: 40px;
	width: 100%;
	z-index: 9999;
	box-shadow: 0 -10px 10px -10px #000 inset;
}
#title { font-size: 18px; padding: 0 15px; float: left; height: 40px; line-height: 39px; border-right: 1px solid #141414; }


.button {
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border: 1px solid #000;	
	display:inline-block;
	font-family:arial;
	font-size:13px;
	font-weight:normal;
	padding: 6px 15px;
	line-height:normal;
	text-decoration:none;
}
.button:hover {	background-color:#646464;	cursor: pointer; }
.button:active { position: relative; top: 1px; }
a.button { padding: 6px 0; }

.icon { vertical-align: text-top; }
#reset { margin-left: 14px; }

#button_container { text-align: center; display: inline; }
#button_container label { margin-left: 14px; }
#button_container > img { vertical-align: middle; }

#title_bar select { background-color: #141414; color: #eee; border: 1px solid #444; }

#code_div { position: absolute; top: 40px; left: 0; bottom: 0; }
#result_div { position: absolute; top: 40px; right: 0; bottom: 0; }
#result_frame { border: none; width: 100%; height: 100%; background-color: #fff; }
#resize_bar { position: absolute; top: 40px; bottom: 0; width: 4px; background-color: #333; cursor: e-resize; }
#resize_bar:hover { background-color: #444; }

/* Navigation Menu */
.drop { position: relative; display: inline-block; padding: 0 15px; cursor: pointer; font-size: 14px; }
.drop > div { display: none; position: absolute; z-index: 9997; width: 200px; background-color: #222; line-height: 30px; padding: 5px 0; left: 0; 
	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;user-select: none; cursor: default; }
.drop div label { cursor: pointer; display: block; padding-left: 10px; }
.drop .button { width: 180px; margin-left: 10px; }
.drop .checkbox, .drop .radio, .drop .clickable { padding-left: 10px; cursor: pointer; }
.clickable a { display: block; }
.drop .checkbox i, .drop .radio i, .drop .subdrop i { width: 15px; }

.subdrop { position: relative; padding-left: 32px; cursor: pointer; background-image: url(../img/subdrop.png); background-position: 185px 0; background-repeat: no-repeat; }
.subdrop.with_icon { padding-left: 10px; }
.subdrop > div { position: absolute; top: -5px; left: -9999px; z-index: 9997; width: 200px; background-color: #222; padding: 5px 0; 
	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;user-select: none; cursor: default; }

.php_logo { display: inline-block; background-color: #8892bf; color: #000; font-style: italic; font-weight: bold; padding: 0 5px; font-size: 14px; height: 22px; line-height: 22px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
#php_search { width: 150px; border: 1px solid #000; padding: 2px; margin: 0; }
#php_search_drop { position: absolute; top: 40px; left: -100px; z-index: 9999; background-color: #000; width: 300px; display: none; }
#php_search_drop .backend { height: 30px; line-height: 30px; font-size: 14px; background-color: #8892bf; color: #fff; border-bottom: 2px solid #4F5B93; padding-left: 10px; font-weight: bold; }
#php_search_drop .container { max-height: 200px; overflow-y: auto; overflow-x: hidden; }
#php_search_drop .search_result { background-color: #e2e4ef; color: #333; border-bottom: 1px solid #4f5b93; line-height: normal; padding: 2px; cursor: pointer; }
#php_search_drop .search_result .desc { font-size: 10px; }
#php_search_drop .search_result:hover { background-color: #4f5b93; color: #fff; }

#help_window { text-align: center; }
#help_window .button { margin-left: 0; }
#help_window h2 { margin-top: 0; }
#help_window .subdrop ul { margin: 0; padding: 0; list-style-type: none; }
#help_window .subdrop ul li { line-height: 32px; text-align: left; }
#help_window .subdrop ul li img { vertical-align: middle; }
#help_window .subdrop ul li a { text-decoration: none; color: inherit; display: block; }