--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/hexagram-6ae12361157c/hexagram/hexagram.css~	Tue Oct 22 14:17:59 2013 -0400
@@ -0,0 +1,694 @@
+/* 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{
+}
+
+.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;
+}
+
+