* { font-family:Muli, Helvetica, Arial, Sans-Serif;  }
html, body { height:100%;  padding:0; margin:0; }
a img { border:none; }
td, .column { vertical-align:top; padding:5px; }

body { background:url(/images/float.jpg) top left no-repeat; background-size: cover; background-attachment: fixed; }


#wrapper { display:flex; }

#page { position:relative; flex: 1; top:0;  padding:40px; background:rgba(255,255,255,1); min-height:100%; }



nav { position:sticky; flex-shrink: 0; top:0; left:0; z-index:99; width:200px; min-height:120%; overflow-x:hidden; padding:20px;  background:rgba(255,255,255,0.85); border-right:4px solid #CCC; }
nav ul, nav li { margin:0; padding:0; }
nav li ul { padding-left:15px; }
nav fieldset { margin:0; }
nav li { list-style: none; padding:3px;  }
nav a { text-decoration: none;  color:#038ECD;   }
nav li li a:hover { text-decoration: underline;  color:#a1b056; }
nav > ul > li { border-radius:12px;  border:1px solid #c0aa9c; padding:10px; margin-bottom:5px; }
nav > ul > li >  a { text-transform: uppercase; }



#logo { position:relative; left:-20px; width:240px; height: auto; border-radius:50%;  }

.grid, .string {

	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

form#jump { text-align:center;  }
form#jump * { font-size:1.5em; }

table.summary { margin-left:35px;  display:inline-block; vertical-align: top; }

table.oyster-data { border-collapse: collapse; display:inline-block;   }
table.oyster-data * { font-size:15px; }
table.oyster-data td, table.oyster-data th { padding:5px; border:1px solid #555; }
table.oyster-data tr:nth-child(2n) td { background:#EEE; }
table.oyster-data th { background:#555; color:#FFF; font-weight:200; }

.string, 
.cage, 
.bag { position:relative; border:1px solid #999; padding:20px; margin:5px;  background-color:rgba(81,116,93,0.3);  }

.grid {   display:block; vertical-align: top;   }
.grid-name { font-weight:200; font-size:1.3em; text-align: center; }
.grid li { list-style:none; display:inline-block; vertical-align: top;  height:1200px; margin:5px 5px; }
.grid .string { height:1200px; }

.string { display:block; vertical-align:top;  width:200px; overflow:hidden;  }
.string-name { font-weight:200; font-size:1em; text-align: center; text-transform: uppercase;  }

.cage { display:block; margin:20px auto; width:50%; }
.cage-name { position:absolute; top:0; left:0; display:block; padding:5px; margin:0; background:#DDD; font-weight:200; font-size:1em;   }

.bag { display:inline-block;  border-radius:50%; vertical-align: middle; text-align: center; padding:15px; }
.data { margin:0 auto; margin-top:20%; }
.grade, .stock, .tend { font-size:.9em; padding:2px; }
.tend { font-size:0.8em; }

.empty { background:#EEE; }

.hot {  background:#cbe2bc; }
.cold { }

.sortable-placeholder { border: 1px dashed #CCC; height:600px; width:200px; }
li.highlight { background: #FEE25F; }
li.disabled { opacity: 0.5; }
.handle { position:absolute; top:0; left:0; cursor: move;  width:20px; height:20px; background:#EEE url(/images/draggable.png); background-size:contain;  }



ul.sortable { list-style:none; margin:0; padding:0; min-height:90px; min-width:90px; background:#FAFAFA; }

.lease { padding:20px; border:1px solid #333; width:100px;  display:block; vertical-align: top;  }

.stringbox, .gridbox { position:relative; display:inline-block; border:2px solid #FFF;  outline:1px dashed #AAA; width:30px; height:300px;  text-align:center; vertical-align: middle; margin:3px; font-size:10px; background:#d7e57b url(/images/draggable2.png) center center no-repeat; }
.gridbox { width:60px; height:90px; display:block; }

.save { margin:10px 0; }
.info { position:absolute; left:5px;  bottom:10px;  width:20px; height:20px;  }
.success { color:green; }
.error { color:red; }




table#oyster-grades-key { margin-left:30px; float:right; }
table#oyster-grades-key td { background:#EFEFEF;  }

.pop { cursor:crosshair; }
.pop:hover { border:1px solid #000 !important; opacity:0.7; }


/* Selection Tools */

#top-menu { position:fixed; z-index:98; top:0; left:240px;  width:100%; height:5px; background:#038ECD; padding:0px; padding-left:40px;  }
#selection-tools { }
.tool-menu-item { display:inline-block; width:150px; height:20px; margin-right:20px; }

/* Drag Select + Cells */

.color-grid { border:1px solid #555; }
.cgrid {  vertical-align: top; display:inline-block;  }
.line { display:inline-block; width:19px; vertical-align: top;  }

.cell-cage { 
	font-size:11px; 
	width:19px; 
	height:19px; 
	border-left:0.5px solid #CCC;
	border-top:0.5px solid #CCC;
	border-bottom:0.5px solid #CCC;
	border-collapse:collapse; 
	text-align: center; 
	line-height:24px; 
}


.flip-cell:hover { background:#e0a900; }

/* Drag Plugin */
.selection {
	position: absolute;
	border: 1px solid #89B;
	background: #BCE;
	background-color: #BEC;
	border-color: #8B9;
	}
.size2 {
	}
.size3 {
	}
.drop {
	float: left;
	background: #EEE;
	text-align: center;
	}
.dropped {
	background-color: #EBC;
	border-color: #006400;
	opacity:0.7;
	border-width:1px;
	}	
.active {  
	background-color: #CEB;
	border-color: #9B8;
	}

img.flip { width:14px; height:14px; }

.flipped { background:#EE0000; }