* {
	padding:0;
	margin:0;
	list-style:none;
}

body{
	font-family: 'Lucida Grande','Lucida Sans Unicode',Verdana,Tahoma,Arial,sans-serif; 
	font-size:75%;
	color:white;
	background-color:#242222;
}
h1{
	background:url(display_images/l4d_logo.png) 0 0 no-repeat;
	text-indent:-5000px;
	height:44px;
	margin:20px 0 40px 20px;
}
h2{
	margin:10px 0;
	font-size:1.5em;
	padding-right:20px;
}
a,a:link,a:visited,a:active{
	color:#CCC;
}
label{
	text-transform:uppercase;
	font-size:0.9em;
	color:#CCC;
}
input,select,textarea{
	font-family:Arial;
	border:2px solid #BBBBBB;
	border-color:#BBB #EEE #EEE #BBB;
	padding:2px;
	color:#333;
}
	input.submit{
		background:url(display_images/button_submit.png) 0 0 no-repeat;
		width:53px !important;
		height:22px;
		text-indent:-5000px;
		border:0;
		color:white;
		font-weight:bold;
		padding:auto;
		letter-spacing:500px;
		overflow:hidden;
		}

div#noscriptwarning{
	padding:5px 20px;
	background-color:red;
	font-weight:bold;
}

#wrapper{
	padding:10px;
	width:740px;
}

#notice{
	position:absolute;
	top:70px;
	left:20px;
}

ul#menu, #connect h2{
	position:absolute;
	left:40px;
	top:97px;
}
	ul#menu li{
		float:left;
		position:relative;
	}
	ul#menu li a{
		background-repeat:no-repeat;
		background-position:0 100%;
		text-indent:-5000px;
		height:28px;
		outline:none;
		display:block;
	}
		ul#menu li.selected a, ul#menu li a.hover{
			background-position:0 0 ;
		}
	ul#menu li span{
		position:absolute;		
		height:20px;
		width:20px;
		right:10px;
		top:5px;
	}
	ul#menu li a.serverinfo{
		background-image:url(display_images/tab_server.png);
		width:103px;
	}
	ul#menu li a.playerlist{
		background-image:url(display_images/tab_players.png);
		width:108px;
	}

.container, .containertop, .containerbottom{
	background-repeat:no-repeat;
	background-position:0 0;
}
.container{
	overflow:hidden;	
	padding:20px 30px;
}
.containertop{
	height:15px;
}
.containerbottom{
	height:15px;
}

#connect h2{
	background:url(display_images/tab_login.png) 0 0 no-repeat;
	width:75px;
	margin:0;
	padding:0;
	height:28px;
	text-indent:-5000px;
}
#connect input.submit{
	margin-left:120px;
}

#serverinfo .container, #connect .container{
	background:url(display_images/bg_shadow_edges.png) 0 0 repeat-y;
	width:450px;
}
#serverinfo .containertop, #connect .containertop{
	background-image:url(display_images/bg_shadow_top.png);
}
#serverinfo .containerbottom, #connect .containerbottom{
	background-image:url(display_images/bg_shadow_bottom.png);
}

#playerlist .container{
	background:url(display_images/bg_shadow_edges_wide.png) 0 0 repeat-y;
	width:660px;
}
#playerlist .containertop{
	background-image:url(display_images/bg_shadow_top_wide.png);
}
#playerlist .containerbottom{
	background-image:url(display_images/bg_shadow_bottom_wide.png);
}

#playerlist{
	display:none;
}
	#playerlist table{
		width:100%;
	}
	#playerlist th, #playerlist td{
		padding:3px;
	}
	#playerlist th{
		text-align:left;
		background-color:#777;
	}
	
#serverinfo{}
	#serverinfo li, #connect li{
		overflow:hidden;
		width:100%;
		margin-bottom:1px;
		color:white;
	}
		#serverinfo li:hover,  #connect li:hover{
			background-color:#3F3F3F;
		}
		
		#serverinfo li p{
			margin: 7px 0 5px 0;
			float:left;
			width:250px;
			font-size:1.2em;
			cursor:pointer;
		}
			#serverinfo li.selected p{
				display:none;
			}
			/*exceptions for non-editable fields*/
			#serverinfo li.noedit p{
				display:block !important;
				cursor:default;
			}
		#serverinfo form.command{
			width:100%;
			padding:0;
			margin:0;
			float:left;
			overflow:hidden;
			cursor:pointer;
		}
			#serverinfo label,  #connect label{
				display:block;
				float:left;
				margin:0 10px 0 0;
				width:100px;
				padding:10px 10px 10px 0;
				background-color:#2C2C2C;
				text-align:right;
				cursor:pointer;
			}
				#serverinfo li.noedit label{
					cursor:default;
				}
				#serverinfo li:hover label, #connect li:hover label{
					background-color:#363636;
				}
			#serverinfo input, #serverinfo select, #connect input{
				margin: 5px 0 0 0;
				font-size:1.2em;
				float:left;
				width:250px;				
				display:none;
			}
				#connect input{
					display:block;
				}
				#serverinfo input.submit{
					margin:7px 0 0 5px;
					float:left;
				}
				#serverinfo li.selected input,#serverinfo li.selected select{
					display:block;
				}	
	
#console{
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
}	
	#consolecontainer{
		background-color:black;
		padding:10px 20px 10px 20px;
	}
	#console h2{
		background:url(display_images/tab_console.png) 0 0 no-repeat;
		width:95px;
		height:24px;
		text-indent:-5000px;
		margin:0 0 0 20px;
		cursor:pointer;
	}
		#console h2.selected{
			background-position:0 100%;
		}
	#console form.command{
		border:0;
		padding:0;
		width:auto;
	}
		#console form.command input, #console form.command label{
			display:inline;
			clear:none;
			width:auto;
		}
			#console form.command input{
				width:400px;
			}
				#console form.command input.submit{
					width:auto;
				}
	#consolelog{
		background-color:black;
		font-family:Arial;
		font-size:1em;
		color:white;
		height:300px;
		overflow:auto;
		border:1px solid #666;
		display:none;
		margin-top:10px;
	}
		#consolelog div{
			padding:5px 10px;
		}
#footer{
	padding:20px;
	width:740px;
}
	
.working{
	/*background:#FFFFFF url(/display_images/working.gif) right center no-repeat;*/
}
.working-grey{
	background:url(display_images/working-grey.gif) right center no-repeat;
}
.client{
	background-color:#222;
}
.success{
	color:green;
}
.failure{
	color:red;
}
.help{
	font-size:0.8em;
}