div.date
{
	text-align: right;
}

span.item_name
{
	font-weight: bold;
	text-align: left;
	float: left;
}

/* Stats panel - Alternate lines get different colours. */
tr.Stat
{
	background: #ccc;
}

tr.StatAlt
{
	background: #eee;
}

span.stat_Name
{
}

td.stat_Base
{
	font-weight: bold;
}

span.stat_Base
{
}
span.stat_BaseBelowMin
{
	color: red;
}

span.stat_Diff
{
}
span.stat_DiffOverCap
{
	text-decoration: line-through;
}

/* Item display in details/message panel. */
span.item_type
{
	font-weight: bold;
	color: red;
	text-align: right;
	float: right;
}
span.item_description
{
}
div.status_current
{
	border-bottom: 1px solid black;
	background: #eee;
}

/* Item slot */
div.equip_item
{
	border-bottom: 1px solid black;
	border-right: 1px solid blue;
	width: 48px;
	height: 48px;
	padding: 1px;
	float: left;

	background: #eee;
}

div.logfile {
	}

/* Slide bar */
div.slider_outer
{
	background: #ddd;
	padding: 2;
	height: 56;
}
div.slider_title
{
	background: #ddd; /* url(titlebarfade.gif); */
}
div.slider_wrap
{
	padding: 2;
	height: 34;
}
div.slider_background
{
	height: 32;
	width: 80%;
	float: left;
	background: #ddd url(slider_background.gif);
}
div.slider_tick
{
	background: #000 url(slider_tick.gif);
	width:  14;
	height: 32;
	position: relative;
}
div.slider_value
{
	float: right;
	height: 34;
	width: 15%;
}
div.slider_subscript_min
{
	float: left;
}
div.slider_subscript_max
{
	float: right;
}

/* Fake buttons */
div.check_checked
{
	text-align: center;
	background: #ccc;
	border-style: inset;
	width: 20em;
}

div.check_unchecked
{
	text-align: center;
	background: #eee;
	border-style: outset;
	width: 20em;
}


/* Main panel styling */
	div.PanelOuter {
		position: absolute;
		/* Height should always be auto - the contents controls the height */
		height: auto;
		background: #666;
	}

	div.PanelBar {
		padding: 2px;
		background: #ddd url(titlebarfade.gif);
		/* Note, this height gets overridden if the contents grow, anyway */
		height: 3ex;	/* Something stupid here - setting this to auto fails */
				/* Make sure it isn't set to an explicit number of pixels */
	}

	div.PanelButton {
		/* Minimise/Maximise/Close buttons */
		/* Can't put a background image in - since it ends up repeating */
		width: 2ex;
		height: 2ex;
		float: right;
	}

	div.PanelTitle {
		float: left;
		/* The gap here is compltely arbitary */
		left: 1em;
		height: auto;
		/* TODO: Ought to put a font definition in here */
	}

	div.PanelInner {
		/* The inner is a flat area that can contain STUFF */
		/* Set its height to set the whole panels size */
		margin: 0px 2px 2px 2px;
		overflow: auto;
		background: #ddd;
		/* Width should always be left to auto */
		/* Height is completely arbitary - and should be set programmatically anyway */
		/* Note that setting it to ANY relative size, or zero, apprear to set it to 100% in IE */
		/* height: 200px; */
		/* Fecking box isn't appearing on the left of its container */
	}

	.PanelContent {
		/* This is just a demo bit, NOT part of the panel */
		/* It's important it not try to resize larger than its container, however */
		margin: 0px 1px 1px 1ex;
		background: #ddd;
		}

	div.PanelOuter_img {
		/* Height should always be auto - the contents controls the height */
		height: auto;
		width: 400;
		position: absolute;
		}

	div.PanelBar_img {
		padding: 2px;
		background: #ddd url(titlebarfade.gif);
		/* Note, this height gets overridden if the contents grow, anyway */
		height: 3ex;	/* Something stupid here - setting this to auto fails */
				/* Make sure it isn't set to an explicit number of pixels */
	}

	div.PanelButton_img {
		/* Minimise/Maximise/Close buttons */
		/* Can't put a background image in - since it ends up repeating */
		width: 2ex;
		height: 2ex;
		float: right;
	}

	div.PanelTitle_img {
		float: left;
		/* The gap here is compltely arbitary */
		left: 1em;
		height: auto;
		/* TODO: Ought to put a font definition in here */
	}

	div.PanelInner_img {
		/* The inner is a flat area that can contain STUFF */
		/* Set its height to set the whole panels size */
		margin: 2px;
		overflow: auto;
		/* Width should always be left to auto */
		/* Height is completely arbitary - and should be set programmatically anyway */
		/* Note that setting it to ANY relative size, or zero, apprear to set it to 100% in IE */
		height: 200px;
		/* Fecking box isn't appearing on the left of its container */
	}

	div.PanelContent_img {
		margin: 0px;
		padding: 2px;
		}


/* Images */
div.LoadedImage {
	position:absolute; 
	top:0; 
	left: 0; 
	opacity: 1;
	}

div.LoadingImage {
	/*
		this should be specified by the javascript
	//background: #f00 url(Loading.gif); 
	*/
	position:absolute; 
	opacity: 0.5;
	top:0; 
	left: 0;
	}

div.ConstrainingImage {
	position:absolute; 
	opacity: 1;
	left: 0; 
	right: 0;
	}