 /***********
 * Document *
 ************/
html
{
	border: 0;
	padding: 0;
	margin: 0;
	color: #ddd;
	background: #555;
	cursor: default;
}
body
{
	padding: 5px;
	margin: 0;
}
body
{
	scrollbar-face-color: #555;
	scrollbar-highlight-color: #5f5f5f;
	scrollbar-shadow-color: #505050;
	scrollbar-3dlight-color: #777;
	scrollbar-arrow-color: #ddd;
	scrollbar-track-color: #4a4a4a;
	scrollbar-darkshadow-color: #222;
}


/****************************************
 * Set global styles: fonts and cursors *
 ****************************************/
html, input, select, textarea, button
{
	font-family: 'Segoe UI', 'Tahoma', sans-serif;
	font-size: 11px;
	color: #ddd;
}
*
{
	cursor: default;
  box-sizing: border-box;
}
input, select, textarea
{
	cursor: auto;
}


/*************
 * Container *
 *************/
.container
{
	/* background: #4a4a4a; */ /* DEBUG */
}


/*************
 * URL Links *
 *************/
.url
{
	color: #6af;
  cursor: pointer;
  text-decoration: none;
}
.url:hover
{
	color: #fa6;
  cursor: pointer;
  text-decoration: underline;
}


/***********
 * Control *
 ***********/
.disabled
{
  opacity: 0.5;
}


/***********
 * Buttons *
 ***********/
.button
{
	display: inline-block;
  /*
  (!) Using filter gradient makes IE ignore round corners.
  Can an SVG image be used instead?
  
  background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#222222));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222');
  */
  background: #222 url('../images/fade-light_05.png') repeat-x top left;
	border: 1px solid #111;
  border-radius: 5px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.2),
    inset 0px 0px 1px 0px rgba(255,255,255,.25)
  ;
	padding: 0;
	text-align: center;
	/*line-height: 22px;*/
}
.button:hover
{
  box-shadow:
    0px 0px 4px 2px rgba(255,255,255,.5),
    inset 0px 0px 1px 0px rgba(255,255,255,.25)
  ;
}
.button.pressed
{
  background: #111 url('../images/fade-light-inv.png') repeat-x bottom left;
  padding: 1px 0 0 0;
}


/***********
 * Textbox *
 ***********/
input[type=text], input[type=file], select, textarea
{
	background: #333;
	border: 1px inset #666;
}
input[type=text]:hover, input[type=file]:hover, select:hover, textarea:hover
{
	/*border: 1px inset orange;*/
  box-shadow:
    0px 0px 4px 2px rgba(255,255,255,.25)
  ;
}
input[type=text]:focus, input[type=text].focus,
input[type=file]:focus, input[type=file].focus,
select:focus, select.focus,
textarea:focus, textarea.focus
{
	/*background: #a85;*/
	/*border: 1px inset orange;*/
  box-shadow:
    0px 0px 4px 2px rgba(255,255,255,.5)
  ;
}


/*****************
 * Form Elements *
 *****************/
fieldset
{
	border: 1px solid #333;
	padding: 5px;
}
legend
{
	color: #d88;
	margin: 0 0 5px 0;
}

label
{
  text-align: right;
  white-space: pre-line;
}

button
{
	background: #505050;
	border: 2px outset #999;
}
button:hover
{
	background: #999;
	border: 2px outset #ccc;
}

label input[type=checkbox] {
  vertical-align: middle;
  margin: 0;
}
label span {
  vertical-align: middle;
  margin: 0;
}