/**
 * New styling
 * 
 * General base increment for padding, etc: 5px (or multiples of)
 * General thickness for edges/lines: 2px
 * 
 * Grey levels used: #444 #555 #888 #ccc
 * 
 */


/*
 * Temp changes
 */
/*div.aspace table {*/
	/*border-spacing: 0;*/
/*}*/

/* Fixes and tweaks to provided themes */
div.aspace.ui-dialog-content {
	padding: 0;
}
div.aspace div.ui-layout-west,div.ui-layout-east {
	overflow-y: scroll;
	overflow-x: hidden;
}
div.aspace div.status {
	padding: 2px 10px 2px 10px;
	font-size: smaller;
}
div.aspace div.ui-slider {
	border: solid 1px gray;
}
div.aspace div.ui-slider {
	border: solid 1px gray;
	border-radius: 5px;
}
div.aspace span.ui-slider-handle {
	background-color: lightgray;
	border-radius: 5px;
}
div.aspace ul.ui-menu {
	display: inline-block;
	border: solid 1px lightgray;
	background-color: #555;
}
div.ui-dialog {
	background-color: #444;
}
li.ui-menu-item {
	background-color: gray;
	color: white;
}
div.aspace div.legend-nodes svg.axis {
	height: 30px;
	width: 100%;
}
div.aspace div.listed {
	padding: 5px;
	padding-left: 10px;
}
div.aspace div.listed.active {
	background-color: gray;
}
div.searcher {
	min-height: 20px !important;
	padding: 1ex !important;
}
.ui-dialog {
	background: #333 none;
	padding: 0px;
	box-shadow: 0px 5px 10px #444;
	border: solid 2px lightgray;
	border-radius: 5px;
	overflow: visible;
}
.ui-dialog-titlebar {
	background: #333 none;
	color: white;
	border: solid 0;
	border-radius: 2px 2px 0 0;
}
li.searcher-result {
	border-left-style: solid;
	border-left-width: 5px;
}
div.aspace div.ui-accordion-header {
	background-image: none !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left-width: 5px !important;
	border-radius: 0 !important;
	color: white !important;
	margin: 0 !important;
}
div.metanode div.ui-accordion-header {
	background-image: none !important;
	border-top: none !important;
	border-bottom: none !important;
	border-width: 1ex !important;
	border-radius: 0 !important;
	color: white !important;
	margin: 0 !important;
}
div.ui-accordion-content {
	background: #333 none;
	color: white;
	border: none;
	border-radius: 0 !important;
	padding: 1em !important;
}
.ui-selectmenu-button {
	width: auto !important;
}
/*.ui-draggable-dragging {*/
	/*box-shadow: 0px 5px 10px #444;*/
/*}*/


/****************
 Attribute spaces
 ****************/

/*
 *  General adjustments 
 */
div.aspace td {
	padding: 0;
}
div.aspace div.controls svg {
	width: 30px;
	height: 20px;
}
div.aspace div.node,div.attribute {
	clear: both;
}
div.aspace div.attribute div.tag {
	width: 30%;
	height: 30px;
	float: left;
}
div.aspace div.attribute div.controls {
	width: 50%;
	height: 30px;
	float: right;
}
body {
	font-family: sans-serif;
	font-size: small;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
div.aspace {
	cursor: default;
	color: white;
	background-color: #444;
}
div.aspace div.ui-layout-pane {
	color: white;
	background-color: #444;
}
div.aspace table {
	width: 100%;
}
div.aspace svg.chart {
	background-color: white;
	overflow: visible;
}
div.aspace svg.chart circle {
	mix-blend-mode: multiply;

}
div.searcher button {
	/*height: 100%;*/
}

/* 
 * Layout 
 */
div.aspace {
	border: 0;
	height: 100%;
	width: 100%;
}
div.aspace div.main {
	border: 2px solid;
	border-top: 0;
	border-bottom: 10px;
}
div.aspace table.chart {
	height: 100%;
}
div.aspace table.chart tr td:first-child {
	width: 60px;
}
div.aspace table.chart tr:last-child td {
	height: 40px;
}
div.aspace table.chart div {
	width: 100%;
	height: 100%;
}
div.aspace table.chart svg {
	width: 100%;
	height: 100%;
}
/*div.aspace*/ div.tag {
	border-left-width: 5px;
	border-left-style: solid;
	height: 20px;
	padding: 5px;
	color: white;
	background-color: #444;
}
div.aspace tr.legend-edges td:first-child {
	height: 20px;
	width: 20%;
}
div.aspace tr.legend-edges svg {
	height: 100%;
	width: 100%;
	background-color: white;
	margin: 5px;
}
/* Fixes and tweaks to provided themes */
div.aspace.ui-dialog-content {
	padding: 0;
}
div.aspace div.ui-layout-west,div.ui-layout-east {
	overflow-y: scroll;
	overflow-x: hidden;
}
div.aspace div.status {
	padding: 2px 10px 2px 10px;
	font-size: smaller;
}
div.aspace div.ui-slider {
	border: solid 1px gray;
}
div.aspace div.ui-slider {
	border: solid 1px gray;
	border-radius: 5px;
}
div.aspace span.ui-slider-handle {
	background-color: lightgray;
	border-radius: 5px;
}
div.aspace ul.ui-menu {
	display: inline-block;
	border: solid 1px lightgray;
	background-color: #555;
}
div.ui-dialog {
	background-color: #444;
}
li.ui-menu-item {
	background-color: gray;
	color: white;	
}
div.aspace div.legend-nodes svg.axis {
	height: 30px;
	width: 100%;
}
div.aspace div.listed {
	padding: 5px;
	padding-left: 10px;
}
div.aspace div.listed.active {
	background-color: gray;
}
div.aspace div.options button {
	margin: 1ex;
}
div.searcher {
	min-height: 20px !important;
	padding: 1ex !important;
}
div.ui-dialog {
	padding: 0px;
	box-shadow: 0px 5px 10px #444;
	border: solid 2px lightgray;
	border-radius: 5px;
	overflow: visible;
}
div.ui-dialog-titlebar {
	color: white;
}
li.searcher-result {
	border-left-style: solid;
	border-left-width: 5px;
}
/* icons */
/*.ui-icon-search {
	content:url();
}*/

/*
 * Layering control
 */
#workspace-lower {
	width: 100vw;
	height: 100vh;
	position: absolute;
	/*z-index: 99990;*/
}
#overlay {
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: 99992;
	pointer-events: none;
}
#workspace-upper {
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: 99994;
	pointer-events: none;
}
#workspace-upper > * {
	pointer-events: auto;
}
#metaspaces {
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: 99996;
	pointer-events: none;
}
#metaspaces > * {
	pointer-events: auto;
}


/* 
 * Cosmetics 
 */
#workspace-lower div.ui-dialog-titlebar {
	border-left-style: solid;
	border-left-width: 5px;
}
div.aspace {
	border-right-style: solid !important;
	border-right-width: 5px !important;
}
div.aspace div.status {
	border-left-style: solid;
	border-left-width: 5px;
	min-height: 1ex;
}
div.aspace div.ui-layout-resizer {
	background-color: lightgray;
}
div.aspace div.ui-layout-toggler {
	background-color: gray;
}
/* Drag/drop */
div.aspace div.ui-droppable.drag-active {
	background-color: gray;
}
div.aspace div.ui-droppable.drag-hover {
	background-color: lightgray;
}
div.drag-helper {
	color: white;
	background-color: #444;
	padding: 5px;
	margin: 5px;
}


/* 
 * SVG styling 
 */
div.aspace g.frequency path {
	stroke: none;
}
div.aspace g.frequency.base path {
	fill: white;
}
div.aspace svg text {
	stroke: none;
	fill: white;
}
div.aspace path.domain {
	stroke: lightgray;
	stroke-width: 4;
}
div.aspace path.domain:not(.gradient) {
	fill: none;
}
div.aspace g.tick line {
	stroke: lightgray;
	stroke-width: 2;
	fill: none;
}
div.aspace svg.chart g.point.active circle {
	stroke: white;
	stroke-width: 2;
}
div.aspace svg.chart g.point text {
	visibility: hidden;		/* Overridden if attributes and active state say so */
	fill: #333;
	font-size: smaller;
}
div.aspace svg.chart[coverage-labels=selection] g.point.active text {
	visibility: visible;
}
div.aspace svg.chart[coverage-labels=all] g.point text {
	visibility: visible;
}
div.aspace svg.chart g.brush rect.extent {
	opacity: 0.5;
	fill: lightgray;
}
div.aspace svg.chart g.brush.active rect.extent {
	stroke: gray;
	stroke-width: 1;
}
svg#overlay g.bundle {
	opacity: 0.5;
	stroke-width: 1;
	fill: none;
}
div.aspace div.controls svg g.brush rect.extent {
	fill: gray;
}
/* Hierarchies */
div.aspace table.chart svg g.partition {
	fill: gray;
	stroke: #444;
	stroke-width: 1;
}
div.aspace table.chart svg g.partition.active {
	fill: lightgray;
}
/* Edge overlay */
svg#overlay g.searcher line {
	stroke: black;
	stroke-width: 1;
}


/********
 Metanode
 ********/

div.metanode {
	position: absolute;
	width: 30ex;
	cursor: pointer;
	margin: 1em;
}
div.metanode div.handle,div.attributes,div.buttons {
	box-shadow: 0px 5px 10px #444;
}
div.metanode div.handle {
	color: white;
	text-align: center;
}
div.metanode div.handle.top {
	vertical-align: bottom;
	border-top-left-radius: 30% 100%;
	border-top-right-radius: 30% 100%;
	/*background: radial-gradient(farthest-side at 50% 100%, darkred 80%, firebrick);*/
	border: solid 5px;
	border-bottom: none;
	font-weight: bold;
}
div.metanode div.handle.bottom {
	vertical-align: top;
	border-bottom-left-radius: 30% 100%;
	border-bottom-right-radius: 30% 100%;
	/*background: radial-gradient(farthest-side at 50% 0%, darkred 80%, firebrick);*/
	border: solid 1ex;
	border-top: none;
	font-weight: bold;
}
div.metanode div.section {
	border-style: solid;
	border-width: 0 5px 0 5px;
	overflow-x: hidden;
}
div.metanode div.info {
	font-size: small;
	padding: 0.5ex;
	background: none;
	border-style: none;
	/*border-width: 1ex 0 1ex 0;*/
	clear: both;
}
div.metanode div.info span.range {
	float: right;
}
div.metanode div.control {
	background-color: #444;
	clear: both;
}
div.metanode div.control input {
	/* Position at top, with the #metanode layer, or it gets hidden */
	clear: both;
	float: right;
	position: relative;
	z-index: 99996;
}
div.metanode div.buttons {
	margin: 0;
	/*width: 100%;*/
	border: solid 5px;
	border-top: none;
	border-bottom: none;
	text-align: center;
}
div.metanode div.buttons button {
	/*width: 50%;*/
	width: auto;
	margin: 0 auto;
}
div.metanode div.buttons button span {
	padding: 0.5ex;
	font-size: small;
}
g.meta line {
	stroke: #333;
	stroke-width: 4;
}