html { height:auto; overflow:hidden; }

form { margin:0; } 

#figbody { margin:8px; margin-bottom:0px; overflow:hidden; }

body { background-color:#fcfcfc; }

input[type='text'] { height:22px; }
input[type='radio'], input[type='checkbox'] { margin:0 3px 0 0; } /* no space char after these controls */
table.salinecalc { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:12px; }


/************************* tables for equation calculators *************************/

form.eq svg { font-weight:400; }
form.eq input[type='text'], form.eq input[type='number'] { width:60px; text-align:right; }
table.eq { border:none; border:0px; padding:0px; margin:0px; text-align:center; width:234px; margin-left:auto; margin-right:auto;}
table.eq td:nth-child(1) { text-align:right; width:26%; } /* radio button */
table.eq td:nth-child(2) { text-align:right; width:20%; } /* variable */
table.eq td:nth-child(3) { text-align:center; width:28%; } /* value */
table.eq td:nth-child(4) { text-align:left; width:26%; } /* units */

table.eq.wide { border:none; border:0px; padding:0px; /*margin:0px;*/ text-align:center; width:254px; margin-left:auto; margin-right:auto; }
table.eq.wide td:nth-child(1) { text-align:right; width:17%; } /* radio button */
table.eq.wide td:nth-child(2) { text-align:right; width:33%; } /* variable */
table.eq.wide td:nth-child(3) { text-align:center; width:26%; } /* value */
table.eq.wide td:nth-child(4) { text-align:left; width:24%; } /* units */

table.salinecalc { border:1px solid gray; padding:4px; text-align:right; width:266px; margin-left:auto; margin-right:auto; border-collapse:collapse; }
table.salinecalc td { border:1px solid gray; padding:4px; }
table.salinecalc td.chem { text-align:left; width:40%; } 
table.salinecalc td.conc { text-align:right; width:30%; } 
table.salinecalc td.mass { text-align:right; width:30%; } 
table.salinecalc td.note { text-align:left; width:100%; } 
table.salinecalc td.input { text-align:left; width:100%; } 
table.salinecalc select { width:170px; }
table.salinecalc { line-height:14px; } /* for cell height of 22 */

label { cursor: pointer; }

table.salinecalc { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:12px; }


/************************* adjustments for Windows *************************/

input[type='radio'].win { vertical-align:-1px; } /* -2px in XP, -1px in Windows 7 */
input[type='checkbox'].win { vertical-align:-2px; } /* -2px in XP, -1px in Windows 7 */



/********************************************** start of device section *******************************************/





@media screen and (max-device-width:768px) and (orientation:portrait), (max-device-height:768px) and (orientation:landscape) { /* PHONE (tested with iPhone) WAS max-device-width:480px */
	/* PROBLEM is that this ends up affecting ALL equations because their windows are smaller than the Phone criterion! 
	They go back to the desired size */
	form.eq td { font-size:16px; }/* minimum size to avoid auto-zooming when text or select is touched */ /* NO NO NO because it affects subscripts and svg */
	form.eq input[type='text'], form.eq input[type='number'] { font-size:16px; width:100%; height:auto; text-align:right; }
	form.eq th svg { max-width:200px; height:auto; }
	table.eq { width:85%; margin-left:auto; margin-right:auto; }
	table.eq.wide { width:100%; margin-left:auto; margin-right:auto; }
	table.salinecalc { width:100%; margin-left:auto; margin-right:auto; }
	table.salinecalc input[type='text'] { width:60px; }
	table.salinecalc select { width:202px; }
	table.saline { width:80%; }
}


/* when opened in a tab, use the border and background; omit it in a small window */

@media screen and (min-width:300px) {
	table.eq, table.eq.wide {
		border:1px solid gray;
		border-radius:4px;
		background:#fefefe;
	}
}