body, html { 
	background:#808080; 
	background:#eee; 
	font-family:Arial,sans-serif;
}

html {
	overflow-y:scroll; /* so users with short screens can get to the links */
}


#subjname { text-align:left; width:240px; padding-left:4px; font-size:12px; font-family:Arial,'Noto Sans',sans-serif; margin:12px; }
.intro.name p { text-align:center; }
#forgetid { 
	margin-left:24px; 
	height:24px; 
	width:150px; 
	font-size:14px; 
	border:1px solid gray; 
	border-radius:6px; 
	background:none; 
	padding-bottom:2px; 
	font-family:Arial,sans-serif; 
	display:inline-block;
}
#forgetid:active {
	padding-left:1px;
}
#rememberid { padding-right:2px; }


.keyresponse .tapresponse { display:none; }
.tapresponse .keyresponse { display:none; }
.correct .incorrect { display:none; }
.incorrect .correct { display:none; }
.test .practice { display:none; }
.practice .test { display:none; }

.intro, .display {
	/* centered in the window */
	top:0; right:0; bottom:0; left:0;
	position:absolute;
	margin:auto;
}

.display.response {
	display:table;
	width:100%;
	height:100%;
}
.display.response p {
	width:33%;
	color:#aaa;
	font-size:60px;
	text-align:center;
	height:100%;
	display:table-cell;
	vertical-align: middle;
}
.display.response p * {
	font-size:60px;
}
.display.response.active p {
	color:#444;
}
.key {
	display:inline-block;
	width:90px;
	height:80px;
	border:2px solid #ccc;
	border-radius:8px;
	margin-top:30px;
}
.active .key {
	border:2px solid #888;
}


.intro {
	width:480px;
	height:280px;
	font-size:14px;
	background:white;
	padding:6px;
	border-radius:6px;
}
.intro p {
	margin-bottom:5px;
	line-height:1.3; /*************** changed in iconic memory to 5px/1.5; need to check on others rotation to 5px/1.3 */
}

p.bottomcenter {
	line-height:normal; /********* because 1.5 from above was too much */
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	text-align:center;
	margin-bottom:6px;
}

.intro h1 {
	font-weight:600;
	font-size:14px;
	margin-bottom:12px;
	text-align:center;
}

p.gapbefore { margin-top:18px; }
p.gapafter { margin-bottom:18px; }


/* style the results graph */
#resultsplot, .resultsplot { font-family:sans-serif; }
#resultsplot, .resultsplot { stroke-width:1; vector-effect:non-scaling-stroke; }
.resultsplot-axis,#resultsplot-x-axis, #resultsplot-y-axis { 
	fill:none; 
	stroke:black; 
	stroke-width:1; 
	shape-rendering:crispEdges; 
	vector-effect:non-scaling-stroke; 
}
.plotback { fill:white; }
.plotframe { fill-rule:evenodd; fill:white; shape-rendering:crispEdges; }
.axislabel { font-size:12px; }
.axistitle, .plottitle { font-size:13px; font-weight:600; }
.axistitle { text-anchor:middle; pointer-events:none; }
.axistitle.y { dominant-baseline:alphabetic; }
.axistitle.x { dominant-baseline:hanging; }
.plotlegend { font-family:sans-serif; font-size:12px; }
.plotlegend { dominant-baseline:central; }
.plotlegend.l { text-anchor:start; }
.plotlegend.r { text-anchor:end; }
#resultsplot-x-labels text { text-anchor:middle; dominant-baseline:text-before-edge; }
#resultsplot-y-labels text { text-anchor:end; dominant-baseline:central; }
.axis, .axisframe { stroke-width:1; fill:none; stroke:#000; shape-rendering:crispEdges; }
tspan.sup { baseline-shift:40%; font-size:75%; } /* for R-square */


/* summary table */
#summary { font-family:sans-serif; font-size:12px; }
#summary { width:190px; }
#summary td { border:1px dotted gray; }
#summary td { text-align:right; padding:0px; padding-right:8px; }
#summary th { font-weight:bold; text-align:right; padding:0px; padding-right:8px; }
#summary th { width:50px; }
#summary tr { border-right:1px solid #000; } 
#summary tr:first-child { border-right:none; } 
#summary th span {
	/*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:18px;
	width:10px;
}

/* table of experimental conditions */
#stimuli { font-family:sans-serif; font-size:12px; border-collapse:collapse; }
#stimuli { width:190px; }
#stimuli td { border:1px dotted gray; border-right:1px solid black; border-left:1px solid black; }
#stimuli td { padding:2px; padding-right:8px; width:170px; }
#stimuli tr:first-child td { border-top:1px solid black; } 
#stimuli tr:last-child td { border-bottom:1px solid black; } 
#stimuli th span {
	display:inline-block;
	width:13px;
	font-weight:600;
}

/* position the parts of the results window */
#resultsid {
	margin:0px 0px 3px 6px;
}
#results {
	background:white;
	border-radius:6px;
	position:relative;
	margin-left:auto; margin-right:auto;
	margin-top:8px;
	padding-top:4px;
	padding-bottom:4px;
	width:570px;
}
#plot { margin:0px; }
#summary, .summary {
	position:absolute;
	/*left:375px; SET ON EXPERIMENT-BY-EXPEIMENT BASIS*/
	top:2px;
	margin:0px;
}
#stimuli, .summary2 {
	position:absolute;
	/*left:376px;
	top:200px; SET ON EXPERIMENT-BY-EXPEIMENT BASIS*/
	margin:0px;
	/*height:112px; SET ON EXPERIMENT-BY-EXPEIMENT BASIS*/
}

/* explanation parts */
#explanation {
	border-top:1px solid gray;
	padding-top:6px;
	margin:8px;
	font-family:sans-serif;
	font-size:13px;
}
#explanation p {
	margin-bottom:0px;
	line-height:17px;
	text-indent:24px;
}
#results h3 {
	font-size:13px;
	text-align:left;
	font-weight:600;
	font-style:normal;
	margin-bottom:0px;
}
#rawdatatocopy {
	width:100%;
	font-family:sans-serif;
	font-size:11px;
	-moz-tab-size:90px;
	tab-size:10; /* Safari12 doesn't support units but 14 does */
	tab-size:90px;
	height:120px;
	margin-top:3px;
	white-space:pre;
	overflow:auto;
}

#links p { word-break:break-all; } /* OK for the long links but they still start on the next line because of the span (at least in print; seemed ok in screen) */
#links { margin:4px 8px 0px 8px;  }
#links a span.printonly { font-size:9px; } /* very small so it all fits on one page */
p.small { font-size:11px; }


#rawdata { margin:8px; margin-bottom:0px; }
#datacolumns { 
	font-size:10px;
	column-count:4;
	padding:0px 8px;
	width:100%;
}
table.rawdata {
	text-align:right;
}
table.rawdata { width:90%; }
table.rawdata th {
	border-bottom:0.5px solid black;
	font-weight: 600;
	width:18px;
}
table.rawdata th:last-child { width:32px; }
table.rawdata tr:last-child { border-bottom:0.5px solid black; }
table.rawdata tr td:nth-child(2) { text-align:left; padding-left:6px; }

.printonly { display:none; }


@media print {
	@page {
		font-family:sans-serif;
		margin:0.5in;
	}
	
	a, a * { text-decoration: none; color:black; border-bottom:none; }
	
	#results {
		margin:0px auto;
		border-radius:0px;
		padding:0px;
	}
	body, html { background:white; }
	
	.noprint { display:none; }
	.printonly { display:inline-block; }
	span.printonly { display:inline; }
	
	.bw p, .bw td, .bw span, .bw a { color:black !important; }

	/* neither of these seems to work */
	table, td, tr, th { border-width:0.5px; }

	#links { margin-bottom: 0px; padding-bottom: 0px; }
}