/* The panels which make up a dice roll exploration */
.divDiceExplorer {
	qborder:				1px solid #004400; /* No border, it contains floats */
	margin-top:			1em;
	}
.divLeftPanel {
	float:				left;
	}
/* The informations area with rolls out of 36, percentages and textarea */
.divDiceExplorer .divInfo {
	margin:				auto;
	margin-top:			0.3em;
	}
/* The legend area with comment and colour descriptions */
.divDiceExplorer .divComments {
	float:				left;
	margin-left:		1em;
	}

/*-------------------------------------------------*/
/* Styling of contents of .divComments */

/* The text area for notes */
.divDiceExplorer .txtDiceRolls {
	height:				6.25em;
	min-width:			26em;
	margin-top:			0;
	}
/* The list for the palette legend */
.divDiceExplorer .ulLegend {
	list-style-type:	none;
	padding:			0;
	margin-top:			0.5em;
	}
.divDiceExplorer .ulLegend li {
	display:			block;
	margin-top:			0.2em;
	qheight:				1.5em;
	line-height:		1.5em;
	}
.ulLegend .chkCounts {
	vertical-align:		middle;
	margin-right:		0.3em;
	}
.divDiceExplorer .ulLegend li .divColour {
	display:			inline-block;
	vertical-align:		middle;
	width:				1.2em;
	height:				1.2em;
	border:				1px solid #808080;
	}
.ulLegend .spnCount {
	display:			inline-block;
	vertical-align:		middle;
	margin-left:		0.1em;
	margin-right:		0.3em;
	qborder:				1px solid #A8A800;
	width:				1.4em;
	height:				1.4em;
	padding-right:		0.2em;
	padding-bottom:		0.2em;
	qbackground:			#FFFFFF;
	text-align:			right;
	font-size:			0.8em;
	}
.ulLegend .txtLegend, .ulLegend .spnLegend, .ulLegend .spnTest {
	vertical-align:		middle;
	border:				1px solid #A8A800;
	width:				24em;
	padding-top:		0.2em;
	padding-bottom:		0.1em;
	padding-left:		0.3em;
	padding-right:		0.3em;
	font-size:			0.8em;
	font-family:		inherit;
	}
.spnTest {
	white-space:		pre;
	}
.ulLegend .spnLegend { /* Exported version */
	border:				0;
	padding-bottom:		0;
	}

/*-------------------------------------------------*/
/* The button for outputting html */
.divDiceExplorer .btnHtml {
	margin-left:		0.6em;
	width:				3.2em;
	color:				blue;
	}
/* The checkbox for doing table operations */
.divDiceExplorer .chkDiceRolls {
	}

/*-------------------------------------------------*/
/* Styling of .divInfo and contents */

/* The informations area with rolls out of 36, percentages and textarea */
.divDiceExplorer .divInfo {
	qpadding-top:		2px; /* Necessary for the top border of spnCount to appear in IE */
	white-space:		nowrap;
	text-align:			center;
	}
/* The left side, with the rolls count */
.divDiceExplorer .spnCountA {
	border:				2px solid #007700;
	padding-left:		10px;
	padding-right:		12px;
	background:			#E0D0FF; /* tdTopLeft matches this */
	}
/* The right side, with the complement of the rolls count */
.divDiceExplorer .spnCountB {
	border-top:			2px solid #007700;
	border-right:		2px solid #007700;
	border-bottom:		2px solid #007700;
	padding-left:		12px;
	padding-right:		10px;
	background:			#D0D0D0;
	}
/* The part before the decimal point */
.divDiceExplorer .spnPercentInt {
	font-size:			1.1em;
	line-height:		1.8em;
	font-weight:		bold;
	color:				#2222DD;
	}
/* The decimal point and fractional part */
.divDiceExplorer .spnPercentFrac { 
	font-size:			0.9em;
	font-weight:		bold;
	color:				#2222DD;
	}
/* The text area for notes */
.divDiceExplorer .txtDiceRolls {
	border:				2px solid #FFD800;
	border:				2px solid #FFEC80;
	border:				1px solid #A8A800;
	padding:			0.20em 0 0.3em 0.3em;
	}
/* Colours for the counted and uncounted cells */
.divDiceExplorer .CountA { color: #007000; }
.divDiceExplorer .CountB { color: #C00000; }

/*-------------------------------------------------*/
/* A div for separating the Dice Explorer tables */
/* 
** Not really part of the Dice Explorers.
** Shouldn't be used to clear. There should be an 
** element in the Dice Explorer itself for this.
*/

.divSizer {
	clear:				both;
	width:				100%;
	height:				17px;
	border-bottom:		2px solid #007700;
	}

/*-------------------------------------------------*/
/* The colour palettes */
.divPalette {
	float:				left; /* To make it fit its content width */
	clear:				both;
	}
.divPaletteItem {
	position:			relative;
	float:				left;
	width:				23px;
	height:				23px;
	margin-right:		15px;
	border:				1px solid #808080;
	}
.spnPaletteBtns {
	position:			relative;
	float:				left;
	top:				4px;
	}
.rbPalette {
	position:			relative;
	font-size:			1px;
	}

/*-------------------------------------------------*/
/* The Dice Table component */
.divDiceExplorer .tblDiceRolls {
	border:				1px solid #A8A800;
	border-collapse:	collapse;
	border-spacing:		0;
	background:			#DDDDDD;
	}
.divDiceExplorer .tblDiceRolls td {
	white-space:		nowrap;
	}
/* The count of rolls which have been set */
.divDiceExplorer .tdTopLeft {
	width:				2.2em;
	background:			#E0D0FF; /* As spnCountA */
	qcolor:				#007000; /* As CountA */
	text-align:			center;
	}
/* The dice numbers across the top and down the left */
.divDiceExplorer .tdDice, .divDiceExplorer .tdDiceHigh {
	height:				1.5em;
	border:				1px solid #D0D070; /* background + darker */
	background:			#E0E080;
	color:				#0030D0;
	text-align:			center;
	font-size:			1em;
	}
/* The dice roll under the cursor. Its dice numbers are highlighted */
.divDiceExplorer .tdDiceHigh {
	background:			#FFD800;
	}
/* The rolls */
.divDiceExplorer .tdRollLt, .divDiceExplorer .tdRollEq, .divDiceExplorer .tdRollGt {
	border-left:		1px solid #C8C800;
	border-top:			1px solid #C8C800;
	background:			#FFFFFF;
	text-align:			center;
	color:				#606060;
	}
/* Rolls with the top dice less than the left dice */
.divDiceExplorer .tdRollLt {
	background:			#F0F0F0;
	font-size:			0.85em;
	}
/* Rolls with equal dice */
.divDiceExplorer .tdRollEq {
	padding-left:		4px;
	padding-right:		4px;
	background:			#ECECFF;
	font-size:			0.6em;
	}
/* Rolls with the top dice greater than than the left dice */
.divDiceExplorer .tdRollGt {
	background:			#FFFFFF;
	font-size:			0.85em;
	font-weight:		bold;
	}
/* The rolls */
.divDiceExplorer .RollSet {
	background:			#FFB8FF;
	background:			#C8FFC8;
	background:			#C0C0FF;
	}