/* Global font stuff */
body {
    font-family: sans-serif;
}

/*
The visualization element needs to take up all available space.
*/
#visualization {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

/* 
Row and column layout boilerplate
From http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
*/

body {
    margin: 0;
}

.row, .col {
    overflow: hidden;
    position: absolute;
}

.row { 
    left: 0;
    right: 0; 
}

.col { 
    top: 0; 
    bottom: 0;
}

.scroll-x {
    overflow-x: auto;
}

.scroll-y {
    overflow-y: auto;
}

/*
Read as "The content row", distinct from whatever else that element might be.
*/
.content.row {
    top: 6em;
    bottom: 0;
    z-index: 1;
}

.header.row {
    height: 4em;
    top: 2em;
    border-bottom: 1px solid black;
    overflow: visible;
}

.browse.col {
    left: 0;
    width: 22em;
    /* Not sure what's up with the lack of dynamic height here, but... */
    height: 4em;
}

.shortlist.col {
    right: 0;
    width: 21em;
    overflow: visible;
}

.error.row{
    height: 2em;
    top: 0;
    border-bottom: 1px solid black;
    background: #F7EFAD;
    z-index: 101;
    display: none;
}

.tools.row {
    height: 2em;
    top: 0em;
    border-bottom: 1px solid black;
    background: #e0e0e0;
}

/*
These are all supposed to stack against the left end in a toolbar thingy.
*/
.stacker {
    float: left;
    line-height: 2em;
    margin-left: 0.5em;
    height: 2em;
}

#error-notification {
    color: red;
    font-weight: bold;
    text-align: center;
    line-height: 2em;
    margin-left: 0.5em;
    height: 2em;
}

/* Except these which stack on the right */
.stacker.right {
    float: right;
    margin-left: 0;
    margin-right: 0.5em;
}

/* Code for fancy expandy side pannels */

.panel-holder {
    overflow: hidden;
    height: 3.9em;
    max-height: 4em;
    top: 2.1em;
    width: 20em;
    position: fixed;
    z-index: 100;
    transition: max-height 100ms;
}

/* When a holder gets moused over, open it up to 100% window height */
.panel-holder:hover {
    height: auto;
    max-height: 100%;
    bottom: 0;
}

.panel {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 10px;
    border: 1px solid gray;
    background: white;
    z-index: 100;
}

.panel-contents {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 1em;
}

.panel-title {
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    height: 1em;
}

/* Browsing stuff */

#browse-holder {
    margin-left: 0.5em;
	width: 500px;
}
#search {
    width: 322px;
}

#recalculate-statistics {
    padding: 0.2em;
	margin-left: 10px;
}

#calculate-set-operation {
    padding: 0.2em;
}

#inflate{
    display: none;
}

.recalculate-throbber {
    display: none;
}

/* Set Operation Menu */

#set-operation {
    padding: 0.2em;
}

.set-operation-col {
	visibility:hidden;
    width: 25em;
    overflow: visible;
}

.set-operation-panel-holder {
	visibility:hidden;
	margin-left:21em;
	padding-top: 2em;
    overflow: hidden;
    top: 4em;
    width: 25em;
    z-index: 100;
}

.set-operation-panel {
	text-align: center;
	visibility:hidden;
	height: 160px;
    position: relative;
    top: 0;
    border-radius: 10px;
    border: 1px solid gray;
    background: white;
    z-index: 100;
}

.set-operation-panel-title {
	visibility:hidden;
	text-align: center;
}

.set-operation-panel-contents {
	visibility:hidden;
    overflow-y: auto;
    overflow-x: hidden;
    top: 1em;
}

#set-operations-list {
}

.set-operation-entry {
	text-align: left;
    position: relative;
    height: auto;
    width: auto;
    padding: 5px;
}

.set-operation-value {
	visibility: hidden;
    width: 15em;
	margin-bottom: 10px;
}

.set-operation-layer-value {
	visibility: hidden;
	width: 8em;
	margin-left: 50px;
} 

.compute-button {
	visibility: hidden;
	text-align: center;
	width: 190px;
	margin-left: 25%;
}
/* Do some custom styling of browse results */
.layer-entry {
    padding-right: 20px;
}
.select2-results .select2-highlighted {
    background-image: url("right.svg");
    background-repeat: no-repeat;
    background-position: right center;
}

.layer-name {
    /* Force silly underscore names into shape */
    word-wrap: break-word;
}

/* Make the browse dropdown tall */
.results-dropdown.select2-container .select2-results {
    max-height: 30em;
}

.results-dropdown .select2-results {
    max-height: 30em;
}

.layer-metadata {
    font-size: 70%;
    /* Serif is more visible at small sizes */
    font-family: serif;
}

/* Vertical alignment tables */
.vertical-table {
    display: table;
}

.vertical-cell {
    display: table-cell;
    vertical-align: middle;
}

/* 
    Not much room for the results for this column. Just get them out of the way.
*/
#browse-results.panel-contents {
    top: 4em;
}

/* Map Layout Selection Stuff */

#layout-holder{
	margin-left: 0.5em;
}

#layout-search {
    width: 22em;
}

.layout-entry {
    padding-right: 20px;
}

layout-name {
    /* Force silly underscore names into shape */
    word-wrap: break-word;
}
#current-layout {
	padding-top: 2.5em;
	width: 700px;
}

/* Shortlist UI stuff */

.shortlist-controls {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2em;
    background-image: url("drag.svg");
    background-repeat: no-repeat;
    background-position: 50% 70%; 
    border-radius: 5px;
    padding: 5px;
}

.shortlist-entry {
    position: relative;
    height: auto;
    width: auto;
    background: #E0E0FF;
    border-radius: 5px;
    padding: 5px;
    padding-left: 3em;
    margin: 0.5em;
    word-wrap: break-word;
}

.shortlist-entry.selection {
    background: #FFE0FF;
}

.shortlist-controls {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.shortlist-controls:activate {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.shortlist-entry:after {
    content: "";
    display: block;
    clear: both;
}

#shortlist-holder {
    right: 0;
}

.layer-on {

}

.radio-label, .radio-clear {
    margin-right: 0.1em;
    margin-left: 0.1em;
}

/* Hide the radio button clearing links unless the radio button is selected. */
input[type="radio"] + .radio-clear {
    display: none;
}

input[type="radio"]:checked + .radio-clear {
    display: inline;
}


/* These are the layer scaling sliders */
.range-slider {
    width: 10em;
    margin-left: 0.3em;
    margin-right: 0.3em;
    margin-top: 0.5em;
}

/*Shortlist holders*/
#left-columns {
	width: 33%;
}
#center-columns {
	margin-left: 33%;	
}
#right-columns {
	margin-left: 66%
}

/* Filtering stuff */

.filter {
    line-height: 1em;
    vertical-align: center;
}
.filter-threshold, .filter-value {
    display: none;
    width: 5em;
}
.filter-holder {
	float: left;
	text-align: left;
	width: 120px;
}

.save-filter {
	display: none;
}

/* Intersection */
.intersection {
	line-height: 1em;
    vertical-align: center;
}
.intersection-text {
	width: 15px;
	float: left;
	text-align: center;
}
.intersection-checkbox {
	float: left;
	text-align: center;
	margin-left: 2px;
}
.intersection-holder {
	float: left;
	text-align: center;
}
.intersection-threshold, .intersection-value {
    display: none;
    width: 5em;
}

/*Union*/
.union {
        line-height: 1em;
    	vertical-align: center;
}
.union-text{
        width: 15px;
        float: left;
        text-align: center;
}
.union-checkbox {
		float: left;
		text-align: center;
		margin-left: 2px;
}
.union-holder {
		float: left;
		text-align: center;
		margin-left: 10px;
}
.union-threshold, .union-value {
    display: none;
    width: 5em;
}

/*Set Difference*/
.set-difference {
        line-height: 1em;
    	vertical-align: center;
}
.set-difference-text{
        width: 15px;
        float: left;
        text-align: center;
}
.set-difference-checkbox {
		float: left;
		text-align: center;
		margin-left: 2px;
}
.set-difference-holder {
		float: left;
		text-align: center;
		margin-left: 10px;
}
.set-difference-threshold, .set-difference-value {
    display: none;
    width: 5em;
}

/*Symmetric Difference*/
.symmetric-difference {
        line-height: 1em;
    	vertical-align: center;
}
.symmetric-difference-text{
        width: 15px;
        float: left;
        text-align: center;
}
.symmetric-difference-checkbox {
		float: left;
		text-align: center;
		margin-left: 2px;
}
.symmetric-difference-holder {
		float: left;
		text-align: center;
		margin-left: 10px;
}
.symmetric-difference-threshold, .symmetric-difference-value {
    display: none;
    width: 5em;
}

/*Absolute Complement*/
.absolute-complement {
     	line-height: 1em;
    	vertical-align: center;
}
.absolute-complement-text{
      	width: 40px;
        float: left;
        text-align: center;
}
.absolute-complement-checkbox {
		float: left;
		text-align: center;
		margin-left: 2px;
}
.absolute-complement-holder {
	width: 65px;
	float: left;
	text-align: center;
	margin-left: 10px
}
.absolute-complement-threshold, .absolute-complement-value {
    display: none;
    width: 5em;
}

/* This is the color key */
.key {
    overflow: visible;
    position: absolute;
    z-index: 2;
    top: 2em;
    right: 2em;
    height: 150px;
    width: 150px;
    display: none;
    pointer-events: none;
    font-family: serif;
}

#color-key {
    width: 100px;
    height: 100px;
    position: absolute;
    display: block;
    left:25px;
    top: 25px;
    border: 1px solid white;
}

.label {
    color: white;
}

.axis {
    word-wrap: break-word;
}

#low-both {
    position: absolute;
    left: 0;
    bottom: 0;
}

#high-x {
    position: absolute;
    right: 0;
    bottom: 0;
}

#high-y {
    position: absolute;
    left: 0;
    top: 0;
}

#x-axis {
    position: absolute;
    top: 155px;
    width: 150px;
    margin: auto;
    text-align: center;
}

/* 
    Complicated table centering thing from 
    http://blog.themeforest.net/tutorials/vertical-centering-with-css/
*/

#y-axis-holder {
    display: table;
    right: 155px;
    width: 150px;
    top: 0;
    height: 100%;
    position: absolute;
}

#y-axis-cell {
    display: table-cell;
    vertical-align: middle;
}

#y-axis {
    text-align: right;
}

/* This is the info window/infocard styling */
.infocard {
    word-break: break-all;
    font-family: sans-serif;
}

.info-row {
    margin-bottom: 0.1em;
}

.info-key {
    background: green;
    color: white;
    text-align: center;
    font-weight: bold;
}

.info-value {
    background: #F0F0F0;
}

/* Tool stuff */
textarea.import {
    height: 10em;
    width: 100%;
    font-size: 10pt;
}

input.import {
    width: 100%;
    /* 
        Apparently Firefox ignores your width and makes it some random size 
        depending on font size. Make that small enough. 
    */
    font-size: 0.5em;
}