ul.compound { list-style:none; line-height:17px; font-family:sans-serif; text-indent:-2em; margin-top:0px; margin-left:0px; }
ul.compound li { margin:0px; }
ul.compound li span.hazard { /*color:blue;*/ font-style:italic; }
ul.compound sup, ul.compound sub { font-size:9px; }

table.stock { font-family:sans-serif; border:1px solid gray; text-align:left; width:700px; border-collapse:collapse; line-height:20px; background:white; margin:12px 0px; }
table.stock td { border:1px solid gray; padding:2px 4px 1px; width:15%;}
table.stock td:nth-child(1) { width:20%; }
table.stock td:nth-child(2) { width:5%; text-align:center; }
table.stock th {text-align:center; font-weight:normal; padding-left:4px; }
table.stock sup, table.stock sub { font-size:9px; }
table.stock input { text-align:right; }
table.stock tr:hover { background-color:#f8f8f8; cursor:pointer; } 
table.stock tr:first-child:hover, table.stock tr:last-child:hover, table.stock tr:nth-last-child(2):hover { background-color:#fff; cursor:default; }

table.dilution { font-family:sans-serif; border:1px solid gray; text-align:left; max-width:580px; width:100%; border-collapse:collapse; line-height:20px; background:white; margin-left:0px; }
table.dilution td { border:1px solid gray; padding:2px 8px 1px 8px; /*width:15%;*/ text-align:center; }
table.dilution td:nth-child(1) { /*width:30%;*/ text-align:left; }
table.dilution td:nth-child(2) { /*width:9%;*/ text-align:right; }
table.dilution th {text-align:center; font-weight:normal; padding-left:4px; }
table.dilution sup, table.stock sub { font-size:9px; }
table.dilution input { text-align:right; padding-top:0px; height:20px; }

table.compound { font-family:sans-serif; border:1px solid gray; text-align:left; width:712px; border-collapse:collapse; line-height:18px; background:white; margin:12px 0px; }
table.compound td { border:1px solid gray; padding:3px 4px 2px 6px; text-align:left; vertical-align:top; }
table.compound td:nth-child(1) { width:18%; }
table.compound th { text-align:center; font-weight:normal; padding:4px; border:1px solid gray; width:20px; }
/*table.compound th span { display:inline-block; transform:rotate(-90deg) translate(0px,0px); }*/
table.compound sup, table.stock sub { font-size:9px; }
table.compound caption { border:1px solid gray; border-bottom:none; text-align:left; border-collapse:collapse; line-height:20px; padding:4px 8px; }


table.compound th div {
	transform:translate(0,175%) rotate(-90deg); /* this is ugly because the translate amount varies with text length, so I ended up setting them individually below */
	transform-origin:0 0; /* could use center 0 as origin and then do a different translation; I can find no translation amount that works for all */
	display:inline-block;
	line-height:20px;
	width:20px;
	white-space:nowrap;
}

/* ideally, this is how it would be done (or with writing-mode:sideways-lr) but while it centers nicely, it leaves the box as wide as the text is high and it can't be styled */
table.compoundXX th { 
	transform:rotate(-90deg) translate(0px,-20px); 
	transform-origin:center; 
	line-height:20px;
	width:20px; 
	text-align:center; 
	font-weight:normal; 
	padding:4px; 
	border:1px solid gray; 
}


#dop { transform:translate(0,200%) rotate(-90deg); }
#ser {transform:translate(0,190%) rotate(-90deg); }
#oct { transform:translate(0,225%) rotate(-90deg); }

#glu { transform:translate(0,200%) rotate(-90deg); }
#gaba { transform:translate(0,140%) rotate(-90deg); }
#gly { transform:translate(0,160%) rotate(-90deg); }

#ach { transform:translate(0,245%) rotate(-90deg); }
#carb { transform:translate(0,200%) rotate(-90deg); }
#pilo { transform:translate(0,210%) rotate(-90deg); }
#nic { transform:translate(0,175%) rotate(-90deg); }
#atr { transform:translate(0,175%) rotate(-90deg); }
#sch { transform:translate(0,275%) rotate(-90deg); }

#vera { transform:translate(0,200%) rotate(-90deg); }
#cscl { transform:translate(0,125%) rotate(-90deg); }
#fapy { transform:translate(0,120%) rotate(-90deg); }
#tea { transform:translate(0,120%) rotate(-90deg); }
#teacs { transform:translate(0,195%) rotate(-90deg); }

/* tried to do this with pure css, but there's no way to select all the rows after the caption with the checkbox
   if there were a way to get to the parent of the label (the caption), caption+tbody would select the area to show/hide */
table.hide tr { display:none; }
table.hide caption { border:1px solid gray; }
input.showtable { display:none; }
input.showtable+label span {
	width:0px; height:0px;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-left:5px solid #666;
	border-right:none;
	float:left;
	margin:4px 8px 0px 3px;
}
input.showtable:checked+label span {
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:5px solid #666;
	border-bottom:none;
	margin:6px 6px 0px 0px;
}