.editor .opacity {
    float: left;
    font-size: 9pt;
    width: 50px;
    margin-top: 5px;
    margin-right: 10px; /* because th jQueryUI slider sticks out to the right */
    margin-left: 10px; /* because th jQueryUI slider sticks out to the right */
}

.opacity.editor {
    clear: left;
    width: 150px;
}

.opacity .ui-slider-range { background: #aaaaff; } /* jQueryUI overrides */
/* .opacity .ui-slider-handle { border-color: #000000; } */
.symbolSize .ui-slider-range { background: #aaaaaa; } /* jQueryUI overrides */

.symbol.size {
    width: 220px;
}

.symbolSize {
    float: left;
    width: 100px;
    margin-left: 10px;
}

.symbolType {
    float: left;
}

.symbolType > div {
    clear: left;
    margin-bottom: 5px;
}

.image td > div, .image .swatch > div {
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: center;
}

.palette {
    display: inline;
    position: relative; /* to get child palette's offset */
}

.palette td > div {
    border: solid 2px white;
}

.palette .highlight, .palette td.highlight > div {
    border-color: black;
}

.palette td > div.selected {
    border-color: blue;
}

.palette td > div { /* colour grid size for the palette */
    width: 20px;
    height: 20px;
}

.pattern.palette td div { /* pattern and shape grid size for the palette */
    height: 40px;
    width: 40px;
}

.colour .swatch, .pattern .swatch, .image .swatch {
    float: left;
    width: 40px;
    height: 40px;
    margin-left: 15px;
    margin-right: 5px;
    position: relative;
}

.image .swatch > div {
    width: 40px;
    height: 40px;
}

.colour .swatch, .colour.palette .swatch {
    border: solid 2px #aaaaff; /* mqtches opacity slider */
    border-radius: 6px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.pattern .swatch, .pattern.palette .swatch, .image.palette .swatch {
    border: solid 2px gray;
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.image.palette .swatch {
    padding: 1px;
}

.colourGrid { /* palette square colour divs */
    float: left;
}

.palette .container { /* colour palette */
    position: absolute;
    left: 0px;
    top: 0px;
    border: solid 2px black;
    display: inline-block;
    z-index: 3; /* above drop downs, sliders etc */
    background: white;
}

.editor input { /* size input box */
    width: 20px;
    height: 13px;
    float: left;
    padding: 3px;
}

.editor .label { /* a label in an editor */
    float: left;
    font-size: 9pt;
    margin-left: 5px;
    margin-right: 5px;
}

.Label.editor  { /* the label editor */
    margin-left: 0px;
    margin-right: 0px;
}

.palette input { /* hex input box */
    width: auto;
	font-family: monospace;
}

.visible, .size, .penStyle, .swatch, .weight, .face {
    float: left;
}

.weight {
    padding: 5px;
    border: solid 1px lightgray;
    float: none;
}

.Label.editor, .font.editor, .brush.editor, .pen.editor, .colour.editor {
    float: left;
}

.symbol.editor,
.Label.editor,
.font.editor,
.brush.editor,
.pen.editor,
.colour.editor,
.opacity.editor,
.ramp.editor,
.alignment div {
    background: #FEF;
}

.Label.editor,
.font.editor,
.symbol.editor,
.brush.editor,
.pen.editor,
.catchment.editor,
.pointset.editor,
.polygonset.editor,
.tile.editor,
.background.editor,
.alignment {
    border-top: 5px solid lightgray;
    margin-top: 5px;
/*    margin-bottom: 5px; */
    padding: 5px;
    display: table-cell;
    clear: both;
}

.pointset.editor .symbol.editor,
.pointset.editor .Label.editor,
.catchment.editor .Label.editor  {
    background: none;
}

.Label.editor .font.editor {
    border-top: none;
}

.pen.brush.editor .pen.editor {
    border-top: none;
}

.pen.brush.editor {
    display: grid;
}

.pointset.editor {
    margin-top: 5px;
}

.Label .font, .Label .pen.brush, .symbol .pen, .symbol .brush {
    clear: left;
    margin-left: 20px;
}

.catchment .pen,
.catchment .brush,
.catchment .Label,
.tile .pen,
.tile .brush,
.tile .Label {
    clear: left;
    margin-left: 5px;
    margin-right: 5px;
}

.Label .pen.brush .pen, .Label .pen.brush .brush {
    clear: left;
    margin-left: 40px;
}

.halignment, .valignment {
    float: left;
}

.editor .BDComboBox {
    width: auto;
    font-size: 8px; /* to make the drop-down arrow small */
}

.size .NumberPickerView { /* suppress margin */
    float: left;
    margin: 0px;
}

.NumberPickerView button { /* override jQueryUI */
    margin-left: 0; /* to butt the arrow next to the input box */
}

.size .pickerCaption {
    margin-top: 0px; /* override margin */
}

.swatch {
    overflow: visible;
}

.swatch canvas {
    vertical-align: middle;
}

.container.swatch, .swatch .container {
    clear: left;
    margin-top: 10px;
/*    padding-top: 5px; */
}

.container .swatch {
    margin: 5px;
    border: solid 1px lightgray;
}

.themeRow .swatch {
    margin: 0px;
}

.editor.buttonBar {
    margin: 5px;
    clear: both;
    float: right;
}

.editor.buttonBarLeft {
    margin: 5px;
    clear: both;
    float: left;
}

.alignment {
    float: left;
    clear: left;
}

.alignment img {
    border: solid 1px white;
    margin-left: 10px;
    padding: 2px;
}
.alignment img.selected {
    border-color: blue;
}

.alignment .horizontal, .alignment .vertical {
    float: left;
    margin-left: 20px;
}

/* Thematic-specific styles */

.themeName .label {
    /*margin: 5px;*/
    padding: 3px
}

.themeRow {
    font-size: 9pt; /* to make jQueryUI buttons smaller */
}

.themeRow th, .themeRow td {
  padding-left: 5px;
}

.themeRow.lowlight {
  background-color: #EEEEEE; /* pale gray */
}

.themeRow td {
    vertical-align: middle;
    border-bottom: 1px solid lightgray;
    text-align: right;
    padding-right: 2px;
}

.themeRows {
/*    width: 100%; */
/*    display: block; */
    overflow-y: auto;
    max-height: 500px;
}

.themeRows th {
    border-bottom: 2px solid lightgray;
    font-weight: bold;
    font-size: 10pt;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
    text-align: center;
}

.themeHeader img {
  height: 16px;
}

.theme.editor {
/*    float: left; */
    border-top: 5px solid lightgray;
    margin-top: 5px;
    padding: 5px;
/*    display: table-cell; */
    clear: both;
}

.themeDisplay, .themeControl, .themeDataControls, .themeStyleControls, .themeName {
    float: left;
}

.themeControl {
    clear: left;
}

.themeDataControls, .themeStyleControls {
    clear: both;
}

.themeDisplay {
    margin-left: 10px;
}

.editor .themeName-Input {
    width: 238px;
}

.radio.container {
    display: inline-block;
}

.radio.container input[type="radio"] {
    clear: left;
}

.radio.container label {
    float: left;
}

.radio.container input[type="radio"], .radio.container label {
    margin-top: 5px;
}

.radio.container label {
    margin-left: 5px;
}

.radio .BDComboBox-input {
    margin-top: 0px;
}

div.numberOfRanges {
    clear: both;
    float: left;
}

/*
.displayDataValues {
    clear: left;
    float: left;
}

*/

.themeStyleEditorButtonbar {
    float: right;
}

.themeDataControls > .themeStyleEditorButtonbar {
    clear: both;
    float: left;
}

.rangeType,
.rangeCount {
    margin-left: 20px;
}

.rangeCount {
    clear: left;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

.range.container > .range.container,
div.numberOfRanges
{
    margin-left: 20px;
}

.manualRanges, .dataRange {
    clear: both;
    float: right;
    margin-left: 20px;
    margin-bottom: 5px;
}

.radio .manualRanges input, .dataRange input {
    width: 4em;
    margin-left: 5px;
}

.rangeCount .NumberPickerView {
    float: left;
    margin: 0px;
}

.ColourProviderView {
    float: left;
}

.editor .themeStyleEditorButtonbar { /* override the ones set to make the jQueryUI slider the right size */
    font-size: 8pt;
}

.themeStyleControls .themeStyle > .editor, .themeDataControls > div {
    display: table-cell;
    float: left;
    clear: left;
    border-bottom: solid 1px lightgray;
    margin-left: 5px;
    margin-top: 5px;
    padding: 5px;
    background: #fef;
    width: 250px;
}


.dataSource {
    margin: 5px;
    padding: 5px;
    border: solid 1px #AAA;
    display: inline-block;
}

.dataSource label {
    margin: 5px;
}

.dataSources div {
    display: inline-block;
}

.dataSource .catchment,
.dataSource .pointset,
.dataSource .polygon,
.dataSource .network  {
    display: inline;
    padding: 5px;
}


.colourPalette
{
    position: absolute;
    z-index: 101;
    background: white;
}

.editable > input, .editable > span {
    border: solid 1px blue;
    margin: 0px;
    padding: 2px;
}

.editable > input {
    border: solid 1px blue;
}

.editable > span {
    border: solid 1px transparent;
}

.buttonStack > button{
    display:block;
}

.backgroundSource {
    display: inline;
}

.backgroundSource label {
    margin-right: 10px;
}

.layerStyleEditor {
    clear: both;
}