/************* page *****************/


/* ONLY for analysis tools; only makes a scrollbar when peak or exponential is shown */
@media screen and (max-width:767px) { 
	body { overflow-x:auto; } 
}

.floatright {
	float:right;
}
.boxtitle, .bold {
	font-weight:bold;
}

label { cursor: pointer; }

input.disclose+label~div { display:none; } /****** return to none when done testing *********/
input.disclose:checked+label~div { display:block; }
input.disclose { display:none; }
input.disclose+label :first-child {
	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 12px;
}
input.disclose:checked+label :first-child {
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:5px solid #666;
	border-bottom:none;
	margin:6px 6px 0px 9px;
}

input.disclose+label :nth-child(2):before { content:'Show'; }
input.disclose:checked+label :nth-child(2):before { content:'Hide'; }


small { font-size:10px; line-height:13px; display:inline-block; } /* display was required before it would obey line-height! */

.extra {
	-moz-column-gap:6px;
	-moz-column-count:2;
	-webkit-column-gap:6px;
	-webkit-column-count:2;
	column-count:2;
	column-gap:6px;
}

p.group, div.group {
	border:1px solid #ccc;
	border-radius:4px;
	padding:4px;
	margin:0px 0px 4px 0px;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

label {
	line-height:20px;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

body {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}


a.analysis { display:inline-block; float:right; padding:0px 4px; }


input[type='text']:disabled { color:#888; }

hr { border:none; border-top:1px solid #ccc; }
hr.extraline { margin-top:0px; }

h2 { margin-top:6px; }

section.analysis { padding-bottom:6px; }

/************* equations *****************/

table.salinecalc { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:12px; }
table.eq, table.eq input[type='text'] { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:13px; }

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:160px; margin-left:auto; margin-right:auto;}
table.eq td:nth-child(1) { text-align:right; width:25%; } /* radio button */
table.eq td:nth-child(2) { text-align:right; width:25%; } /* variable */
table.eq td:nth-child(3) { text-align:center; width:30%; } /* value */
table.eq td:nth-child(4) { text-align:left; width:20%; } /* 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:20%; } /* radio button */
table.eq.wide td:nth-child(2) { text-align:right; width:30%; } /* variable */
table.eq.wide td:nth-child(3) { text-align:center; width:25%; } /* value */
table.eq.wide td:nth-child(4) { text-align:left; width:25%; } /* 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 */

h2.saline { margin-left:72px; margin-bottom:6px; }

form.eq {display:inline-block; }
table.eq, table.eq.wide { border:1px solid gray; padding:4px; margin:4px; border-collapse:collapse; }
table.eq td { border:none; vertical-align:middle; }
table.eq tr:nth-child(2) td { border-top:1px solid gray; padding-top:4px;  }
#saline { width:270px; }
table.eqs { width:auto; }
table.eqs td { vertical-align:top; }
table.eqs td table.eq td { vertical-align:middle; }
table.eqs th { padding-top:6px; padding-bottom:0px; }
#nernst tr:last-child td { text-align:center; padding-top:4px; padding-bottom:4px; }

/************* peaks *****************/

#peakform { font-family:sans-serif; font-size:12px; }

#peakfinder input[type='text'] { margin:0px 0px 2px; text-align:right; height:19px; }
#peakfinder input[type='number'] { width:40px; text-align:right; height:19px; }
#peakfinder textarea { width:134px; tab-size:4; margin:0px; } /*********************** check tab-size in diff browsers */
textarea[name='tracetext'] { height:135px; }
textarea[name='peaktext'] { height:135px; }
textarea[name='histotext'] { height:135px; }

#inputdata, #peakwindow, #outputpeaks, #outputhisto {
	width:134px; border-bottom:1px dotted #aaa;
	padding:6px 0px;
}
#outputhisto { border:none; }
#inputdata { padding:0px 0px 6px; }

#peakfinder .notes { /*height:111px;*/ font-size:11px; }

#peakfinder p { margin:3px 0px; line-height:15px; }

.binright {
	display:inline-block;
	position:absolute;
	left:86px;
	/*float:right;*/
}

#peakfinder .extra p:nth-child(2) {
	-webkit-column-break-after: always;
	break-after: column;
}

svg.zoomx #xside, svg.zoomx #x-labels { cursor:ew-resize; }
svg.zoomy #yside, svg.zoomx #y-labels { cursor:ns-resize; }
svg.zoomx #plotoverlay, svg.zoomy #plotoverlay { cursor:zoom-in; }

svg .axislabel { font-size:12px; }
svg .axistitle { font-size:14px; }
#peakfinder svg {font-family:Arial, Helvetica, sans-serif; }

svg .plotframe { fill:#fff; }
svg .plotback { fill:#fff; }

svg, svg * {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

svg rect { shape-rendering:crispEdges; }

.thresholdhandle {
	fill:#888;
	stroke-width:1;
	stroke:#000;
	opacity:0.3;
	cursor:row-resize;
}
.thresholdline {
	opacity:0.3;
	stroke-dasharray:1 1;
	stroke-width:1;
	stroke:#000;
}


#peakform { position:relative; }
#inputdata, #peakwindow, #outputpeaks, #outputhisto { position:relative; left:0px; }
#inputdata { top:0px; }
#peakwindow { top:0px; }
#outputpeaks { top:0px; }
#outputhisto { top:0px; }
#trace { position:absolute; left:148px; width:600px; height:350px; }
#peaks { position:absolute; left:148px; top:350px; width:372px; height:350px; }
#histogram { position:absolute; left:516px; top:350px; width:232px; height:350px; }

span.senddata { display:inline-block; float:right; padding:0px 4px; } /* eventually style like a button */

#peakoptions {
	column-count:2;
	column-gap:6px;
}
#peakoptions p {
	margin:0px;
}

#peakform .notes { padding-top:2px; padding-bottom:2px; /*height:110px;*/ } /* just to line things up nicely at the bottom */

/************* exponential *****************/

#expsettings {
	position:relative;
	width:280px;
	padding:0px;
}

#expform input[type="text"] { margin:2px 0px; height:20px; }
#expform input[type="number"] { width:40px; text-align:right; height:20px; }
#expform textarea { width:280px; tab-size:26; height:120px; }

#expplot {
	width:460px;
	height:350px;
	position:absolute; /* was relative */ left:294px; margin:0px;
	/*top: 0px;*/
	/*float: right;*/
	display: block;
	/*margin:0px -8px 0px 0px;*/
}

.fitsingle .doubleexp { display:none; }
.hidden { display:none; }
.fitsingle tr.doubleexp { visibility:hidden; display:table-row; }
.bad { color:red; }

#expform button {
	height:24px;
	width:83px;
	margin-bottom:4px;
	position:relative;
	text-align:center;
	color:#333;
	padding-top:0px;
	border:1px solid #999;
	border-radius:4px;
	background:linear-gradient(to bottom,#fff,#ccc);
	cursor:pointer;
	margin-right:0px;
}
#expform button:active {
	padding-left:4px; padding-right:2px;
	/*background:-linear-gradient(to top,#fff,#bbb);*/
	background:linear-gradient(to top,#eee,#888);
}
#expform button[disabled] {
	color:#888;
	background:#eee;
	border:1px solid #aaa;
}

sub, sup { /* prevent from changing line spacing; doesn't quite work, sup still changes it */
	line-height:0em;
	position:relative;
	vertical-align:baseline;
}
sub { top:0.35em; }
sup { top:-0.5em; }

#expform p { margin:4px 0px; }
#expform label { line-height:20px; }

#expform input[type="text"] { margin:2px 0px; text-align:right; }
#expform input[type="number"] { width:40px; text-align:right; }

#frelax { display:inline-block; float:right; margin:2px 0px 0px; }
#frelax input {text-align:right; }


#npts { width:80px; text-align:right; margin-left:0px; display:inline-block; color:#444; }
.needsupdate button[name="fitbutton"] { /*border-color:red;*/ box-shadow:0 0 6px red; }
button[name="clearbutton"] { /*margin-left:15px;*/ float:right; margin-right:0px; }

#expform { font-family:sans-serif; font-size:12px; }


#expformXXX .extra p:nth-child(4) { /* changed from 3 to 4 when I made setrinf hidden and added setadjust */
	-webkit-column-break-after: always;
	break-after: column;
}
#expform .extra #myguesses { /* just make it explicit now instead of going by nth-child */
	-webkit-column-break-after: always;
	break-after: column;
}


#myguesses { line-height:20px; }
#myguesses input[type="text"] { margin-right:8px; }


label[for='fitdouble'], label[for='yadjustid'] { float:right; XXmargin-right:8px; }

/*input[type="checkbox"] ~ span { color:#aaa; }
input[type="checkbox"]:checked ~ span { color:#000; }*/
input[type="text"]:disabled { color:#444; }
#guessid ~ span { color:#aaa; }
#guessid:checked ~ span { color:#000; }
.fixed #guessid:checked ~ span.unfixed { color:#ccc; }
#guessid:checked ~ span.unfixed { color:#000; }

#outliers { float:right; display:inline-block; }

.fitsingle #myguesses span.doubleexp { color:#aaa; display:inline-block; }
/*.fitdouble #myguesses span.doubleexp { color:#000; display:inline-block; }*/

.notready, .notready * { color:#aaa; }

#expform .notes { padding-bottom:3px; } /* just to line things up nicely at the bottom */