/*
** Styling for area table widget
*/
#ATLASAreaTableWidgetPanel{
	/* min-width: 480px; */
	min-width: 640px;
}
#areaDescription {
	width:100%;
}
#areaControlsCTNR {
	padding:5px;
}

#ATLASAreaTableWidgetPanel .ui-resizable-handle.ui-resizable-w {
	z-index: 1000;
}

/** Area Table List element types **/
.areaLabel {
	float: left;
	text-align: left;
	line-height: 20px;
	min-width: 60px;
	max-width: 100px;
}
.areaColour {
	/* width: 12%; */
	width: 51px;

	height: 1.2em;
	/* background: yellow;
	color: yellow; */
	display: inline-block;
	border-radius: 4px;
	text-align: center;
	margin-right: 0.4em;
	vertical-align: -0.1em;
	padding: 0 .2em 0 .1em;
	max-width: 60px;
}
.colourblock {
	color: inherit;
    filter: invert(75%);
	font-family: monospace;
}
.areaValue{
	padding-right: 5px;
}
.areaDim {
	max-width: 145px;
}
.areaDim,.areaDimH,.areaCoords,.areaCoordsH {
    /* width: 27%; */
    width: 130px;
}
.areaValue,.areaValueH {
    /* width: 26%; */
    width: 125px;
}
.areaDim,.areaDimH,.areaValue,.areaValueH {
	max-width: 200px;
}
.areaPercent:after { content: '%)'; }
.areaPercent:before { content: '('; }
.areaNum {
	vertical-align: middle;
	line-height: 20px;
	font-family: monospace;
}
.areaLabel,.areaNum {
	display: inline-block;
	overflow: hidden;
}

/** area table Header elements **/
#AreaTableHeaders {
	text-align: right;
	color: #bbb;
}
#AreaTableHeaders span {
    display: inline-block;
}
.areaLabelH {
	/* width: 15%; */
	min-width: 60px;
	max-width: 100px;

    float: left;
    text-align: left;
}
.areaColourH {
	padding-right: 0.85em;
}
.areaDimH {
	text-align: right;
}
.areaCoordsH {
	text-align: center;
	margin-right: -12px;
	margin-left: 12px;
}
.areaDimH::after, .areaCoordsH::after {
	content: ' (\3BCm)';
}
.areaValueH:after {
	content: ' (\3BCm\B2)'; /* or all-hex: \20\3BC\6d\B2 */
}
.areaOptsH {
	width: 62px;
	margin-left: 5px;
	text-align: left;
	padding-left: 11px;
}

/** area table list items **/
#areaList li {
	cursor:pointer;
	padding:2px 4px;
	margin:0px;
	text-align: right;
}
ul#areaList {
	margin:3px 3px 3px 0px;
	padding:0px 0px 0px 5px;
	list-style:none;
	overflow-x:hidden;
	overflow-y:auto;
}
.areaButtons {
	margin-left: 5px;
	float:right;
	-webkit-user-select: none;
	-moz-user-select:none;
}
.areaButtons img {
	margin:0px 3px;
}