/* 
Still need:
print CSS ½
better style on search✔
links in body copy ✔
/projects/ := /research/✔
add to projects: podcasting
cite a has to italicize
*/

@import url("/css/access/access2003a-mono.css") print;


/* Variables */

:root
{
--page-background: #E3E3E3;
--header-background: #cdcdcd;
--upper-pinstripe: #A2C93A;
/* 
--strapline: 
--divider: 
 */
--lower-pinstripe: #D0D2C4;
--off-black: rgb(15,15,15);
}

/* Headings */


.bodycopy h2
{
	font-family: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
color: rgb(12%,12%,12%);
	font-size: 115%;
/*	background: white; */
	font-style: normal;
	font-weight: bold;
	margin-bottom: 0em; padding-bottom: 0;
	margin-top: 1em;
	text-align: left;
}

.bodycopy h3
{
	font-family: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
	font-size: 105%;
/*	background: white; */	color: rgb(10%,10%,10%);
	font-style: normal;
	font-weight: 700;
	margin-bottom: 0em; padding-bottom: 0;
	margin-top: 1em;
	text-align: left;
}

/* No extra space after heds */
.bodycopy h1 + p, .bodycopy h2 + p, .bodycopy h3 + p, .bodycopy h1 + blockquote, .bodycopy h2 + blockquote, .bodycopy h3 + blockquote, .bodycopy h1 + ul, .bodycopy h2 + ul, .bodycopy h3 + ul, .bodycopy h1 + ol, .bodycopy h2 + ol, .bodycopy h3 + ol
{
	margin-bottom: 0;
	padding-bottom: 0;
}

.bodycopy h1 + h2, .bodycopy h2 + h3, .bodycopy h3 + h4
{
	text-indent: 0;
	margin: 0;
}


/* For posting date and version updates */

.youarehere, .updated
{
	text-indent: 0 !important; font-size: 90%; margin-top: 2em !important; margin-left: 0; padding-right: 1em;
	text-align: right;
}


@media screen {

body, html { margin: 0; padding: 0; text-align: left; }
h1, h2, h3 { text-indent: 0; }
}

/* screamer is for the homepage */

#screamer
{ 
background: var(--page-background);
width: 100%;
}

.header
{ 
margin: auto 0;
padding: .5em 0 ;
background: var(--off-black);
border-bottom: 2px solid var(--lower-pinstripe);
border-top: 3px solid var(--upper-pinstripe);
}


/* Header indention */
#screamer .header h1, #screamer .header h2, #screamer .header p.byline
{
margin: 0 0 0 8%;
padding: 0;
}

#screamer .header h1, #text .header h1 
{ 
color: gold;
font: 200%/1.3 "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
/* 
text-transform: uppercase;
 */
}

#screamer .header h2
{
padding: 0;
color: white;
font: 150%/1.3 "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
overflow: hidden;
}

#screamer .header .byline 
{ 
color: var(--header-background);
font: 100%/1.3 "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
font-style: italic;
}

/* Body copy */

.bodycopy
{ 
padding: 0;
margin-top: .5em;
font: 1.6em/1.5 "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;;
margin-left: 8%;
/* color: #242424; */
color: #333;
width: 100%; 
max-width: 38em;
}

.bodycopy p { margin: 0; padding: 0; margin-right: 25%}
.bodycopy p+p { text-indent: 1em; }

/* No extra space after heds */
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, h1 + blockquote, h2 + blockquote, h3 + blockquote, h4 + blockquote, h5 + blockquote, h6 + blockquote, h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul, h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol, div.storycontent + ul, div.storycontent + ol
{
	margin-top: 0; /* margin-bottom: 0; */
}

h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6
{
	text-indent: 0;
	margin: 0;
}

@media only screen 
		  and (min-device-width: 320px) 
		  and (-webkit-min-device-pixel-ratio: 2)
		{
			.bodycopy { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
			.bodycopy a { hyphens: none }
			.bodycopy p  { margin: 0; padding: 0; margin-right: 2em}
			.bodycopy dt, .bodycopy dd {margin-right: 2em}
		}


.bodycopy p strong, .right { font-family: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;; font-weight: bold; color: black; }

.learnmore { font-weight: bold; padding-bottom: 5ex;}

.learnmore, .right { text-align: right; text-transform: uppercase; font-size: 80%}

.bodycopy a:link, .bodycopy a:visited
{
font: 1em/1.4 "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
color: #242424;
width: 100%; 
text-decoration: none;
border-bottom: 1px solid #242424;
}

.bodycopy a:hover { 
background: black;
color: yellow;
}

.bodycopy a:active, .bodycopy a:focus 
{
background: black;
color: green;
border: 1px solid green; 
}

/* Navbar */

/* Full banner width and colours */
#banner 
{
/*width: 92%;*/
background: /* #525252 */ Sienna;
border-bottom: 3px solid #369;
text-align: left;
margin: 0 0 .1em 0;
padding: .1em 0 .1em 8%;
}


/* Fonts and inline display */
#banner ul { max-width: 45em;}

#banner ul, #banner li
{
	font-family: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
	font-size: 1.3em; line-height: 1.5;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

/* Margins */
#banner li
{
	display: inline;
	padding-right: 1.25em;
}

/* Links */
#banner a:link, #banner a:link:visited, #banner a:visited
{
	text-decoration: none;
	font-weight: normal;
	color: white;
	border: 0;
	padding: .1em 0;
}

#banner a:link:hover, #banner a:link:focus, #banner a:link:active,
#banner a:visited:hover, #banner a:visited:focus, #banner a:visited:active
{
	text-decoration: none;
	border-bottom: 3px solid yellow;
	color: yellow;
	background: /* #525252 */ Sienna;
	padding: .1em 0;

}

/* Hover effects */
#banner:hover, #banner a:hover
{
	background: /* #525252 */ Sienna;
	color: #60c;
	border-bottom: 3px solid black;
}



/* Class named TEXT is for inside pages */

/* Header for inside pages */

#text 
{
		color: rgb(13%,13%,13%);
	/*	background: white; */}
	 /*

#text .header 
{ 
margin: auto 0;
padding: .5em 0 ;
background: rgb(15,15,15);
border-bottom: 2px solid #D0D2C4;
border-top: 3px solid #A2C93A;
width: 100%;
}
*/


/* General typography */ 

#content p { text-indent: 0em; margin-top: 0; margin-bottom: 0;}

#content p + p { text-indent: 2em; }

#content .noindent
{
	text-indent: 0;
}


#content strong
{
	font-weight: bolder;
	letter-spacing: 0.1em;
}
#content blockquote
{
	font-family: "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Gill, "Gill Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
	margin-left: .8em; 
	font-size: 100%;
	line-height: inherit;
	text-align: left;
	border-left: .16em solid #999; /* formerly 3px */
	padding-left: .8em;
	color: rgb(9%,9%,9%);
}


#content blockquote blockquote
{
	margin-left: 2em;
	border-left: .08em solid gray; /* formerly 1px */
	font-size: 94%;
}

		@media only screen 
		  and (min-device-width: 320px) 
		  and (-webkit-min-device-pixel-ratio: 2)
			{
			blockquote { margin-left: 1em; padding-left: 0.75em; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
			blockquote blockquote { margin-left: 0.5em;  padding-left: 0.75em; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
			}

#content blockquote strong, #content blockquote b 
{ font-weight: bolder; }

#content .mequote {
	border-left: 6px ridge black;
	font-weight: bold;
}

/* Blockquote inside list */
li blockquote { margin-left: 1em; }

blockquote h2 { font-family: Corbel, "Lucida Sans", sans-serif; }

blockquote ul li {  margin-left: 2em; list-style-type: circle; }

blockquote ol li { margin-left: 2em;}

li blockquote h2, li blockquote h3 { margin-top: 0 }

		@media only screen 
		  and (min-device-width: 320px) 
		  and (-webkit-min-device-pixel-ratio: 2)
		  {
		  blockquote ul li, blockquote ol li { margin-left: 0.5em; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
		  }

/* Deitalicization inside italicization */

cite em, cite i, em cite, em i, i cite, i em, cite cite, em em, i i { font-style: normal }

cite, i, em, cite a, i a, em a
{ font-style: italic }

/* Search form */

#search-q { 
cursor: help;
background: oldlace;
color: black;
font: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;;
line-height: 1.76;
}

#gobutton
{
background: black; color: oldlace;
font-weight: bold;
font: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;;
line-height: 1.76;
}

/* Splorpist images with borders */

div.splorpist { margin: 0.5em 0 }
		@media only screen 
		  and (min-device-width: 320px) 
		  and (-webkit-min-device-pixel-ratio: 2)
		{
			div.splorpist img { max-width: 100%; }
			.alignright { max-width: inherit; }
		}

div.splorpist a:link img, div.splorpist img
{
	border: 3px solid #999 !important;
	text-decoration: none !important;
	margin: 0.5em 0;
}

/* Links */

#content a:link, a:visited, a:hover, #content a:visited:hover
{
	color: black;
/*	background: white; */	font-weight: normal; 
	text-decoration: none;
	font-family: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
	border-bottom: 1px solid rgb(20%,20%,20%);
}


#content a:focus, #content a:active
{
	color: yellow;
	background: black;
	text-decoration: none;
	border: 1px dashed #FFCCCC;
}

/* Lists */
/* In general */

.bodycopy ul, .bodycopy ol, h2+ol, h2+ul, h2+dl, h3+ul, h3+ol, h3+dl { margin-top: 0; padding-top: 0;}

.bodycopy ul li, .bodycopy ol li { margin-left: 0; padding-left: 0 }

.bodycopy li ul, .bodycopy li ol, .bodycopy dd ul, .bodycopy dd ol { margin-left: 0; padding-left: 0 }

dl dt strong { color: #555; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

/* Lists inside lists */
.bodycopy ul li ul { list-style-type: circle; }
.bodycopy ul li ul li {margin-left: 0; padding-left: 0; }

/* with no numbering and/or margin */
.bodycopy .typenone, .bodycopy .none, .bodycopy 
.bodycopy .none-nomargin li {list-style-type: none; margin-left: 0; padding-left: 0}

.bodycopy .hanging-indent {list-style-type: none; margin-left: 2em; padding-left: 0; text-indent: -2em;}

.bodycopy .bodycopy p + ol, .bodycopy .bodycopy p+ ul { margin-top: 1em; margin-bottom: 1em; }

.typesquare { list-style-type: square; }


/* Lists inside lists */

#content li ol, #content li ul, #content li dl { margin-left: 2em;}

#content li ol #content li, li ul li { margin-left: 2em;}



/* Header indention */
#text .header h1, #text .header h2, #text .header h3, #text .header p.byline, #text #content 
{
margin: 0 0 0 8%;
}

#text #content 
{
	font: 1em/1.6 Cambria, Utopia,"Bitstream Charter", "Lucida Fax", "Palatino Linotype", Georgia, "Hoefler Text", "Bitstream Vera Serif", "Lucida Sans", "Trebuchet MS", serif;
	color: rgb(13%,13%,13%);
/*	background: white; */	max-width: 38em;
	margin-top: 2em;
}

#text .header h2
{
padding: 0;
color: white;
font: 150%/1.3 "Gill Sans", Calibri, "Lucida Grande","Segoe Sans", "Lucida Sans", Lucida, "Bitstream Vera Sans","Trebuchet MS", sans-serif;
overflow: hidden;
}


@media print 
{

/* Do not print */
.noprint, .learnmore
{
display: none;
}

/* Body */
body
{
	font: 11pt/1.4 Palatino, "Palatino Linotype", "Lucida Fax", "Hoefler Text", Georgia, "Trebuchet MS", serif;
	color: black;
	background-color: white;
	text-align: left;
	margin: 12%;
}

#screamer, .header, .bodycopy
	{ background: white; border: none; color: black;}
	
html, body
	{ color: black; }

body
{
	font: 11pt/1.4 Palatino, "Palatino Linotype", "Lucida Fax", "Hoefler Text", Georgia, "Trebuchet MS", serif;
	color: black;
	background-color: white;
	text-align: left;
	margin: 12%;
}

h1
{
font: 200%/1.4 "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
text-transform: uppercase;
	font-size: 120%;
	color: black;
/*	background: white; */	font-weight: bold;
	padding: 0;
	text-align: left;
	margin: 0;
	text-decoration: none;
	border: none;
}

h2
{
	font-family: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
color: rgb(5%,5%,5%);
	font-size: 125%;
/*	background: white; */	font-style: normal;
	font-weight: bold;
	margin: 0;
	text-align: left;
}

h3
{
	font-family: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif; 
	font-size: 125%;
/*	background: white; */	color: rgb(10%,10%,10%);
	font-style: normal;
	font-weight: normal;
	margin-bottom: 0em;
	margin-top: 1.5em;
	text-align: left;
}

h4
{	font-family: "Gill Sans", "Avenir Next", Avenir, "Fira Sans", Fira, "PT Sans", Corbel, "Lucida Sans", system-ui, -apple-system-body, sans-serif;
	font-size: 110%;
/*	background: white; */	color: rgb(10%,10%,10%);
	font-style: italic;
	font-weight: normal;
	margin-bottom: 0em;
	margin-top: 1.5em;
	text-align: left;
}

h1 + p, h2 + p, h3 + p, h4 + p
{
	margin-top: 0;
	padding-top: 0;
}

h1 + h2, h2 + h3, h3 + h4
{
	text-indent: 0;
	margin-left: 0;
}

.learnmore, #banner { display:none; }

a:link
{
	color: black;
/*	background: white; */	font-weight: normal;
	text-decoration: none;
 border-bottom: 1pt solid black;
}
a:hover, a:visited:hover
{
	color: black;
/*	background: white; */	font-weight: normal;
	text-decoration: underline;
}

a:focus, a.graf:visited
{
	color: black;
/*	background: white; */	font-weight: normal;
	text-decoration: none;
	border: 1px dashed #FFCCCC;
}

a img, a:hover img, a:visited img, a:focus img
{
	border: none;
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: normal;
}

/* Lists */
li, dt, dd { margin-top: 1ex; }
ol, ul, dl {margin-left: 2em}



/* Nested elements */

p+p, li p+p { text-indent: 2em; }


/* Colours */

.aqua {color: aqua;}
.black {color: black;}
.blue {color: blue;}
.fuchsia {color: fuchsia;}
.grey, .gray {color: gray;}
.green {color: green;}
.lime {color: lime;}
.maroon {color: maroon;}
.navy {color: navy;}
.olive {color: olive;}
.purple {color: purple;}
.red {color: red;}
.silver {color: silver;}
.teal {color: teal;}
.white {color: white;}
.yellow {color: yellow;}

.inline { display: inline; }
.inline-list { list-style: none; }
.inline-list li { display: inline; }

.caps, .contentcaps
{
 	font-size: 90%; 
	letter-spacing: .1em;
	text-transform: uppercase;
	color: black;
	-moz-font-feature-settings: "c2sc", "smcp";
	-webkit-font-feature-settings: "c2sc", "smcp";
	font-feature-settings: "c2sc", "smcp";
	font-variant-caps: all-small-caps;
}

.titlecase 
{
	text-transform: capitalize
}

.lc
{
	text-transform: lowercase;
	}

.nowrap { white-space: nowrap; }

/* Horizontal rules */

hr
{
	margin-top: 1.2ex;
	margin-bottom: 1.2ex;
}

hr.w25 { width: 25%; }
hr.w33 { width: 33%; }
hr.w50 { width: 50%; }
hr.w66 { width: 66%; }
hr.w75 { width: 75%; }
hr.w80 { width: 80%; }

img[align="right"] { border: none; padding: 0 0 2% 2%;}
img[align="left"] { border: none; padding: 0 2% 2% 0; }
.alignright { border: 1px solid gray; float: right; margin: 0 0 .75em 1.5em; padding: 0.25em; clear: both;}
.alignright-plain { text-align: right;}
.outdent10 { margin-right: -10em; }
.outdent5 { margin-right: -5em; }
.outdent3 { margin-right: -3em; }
.outdent2 { margin-right: -2em; }
.outdent2 { margin-right: -2em; }

		@media only screen 
		  and (min-device-width: 320px) 
		  and (-webkit-min-device-pixel-ratio: 2)
		{
		.outdent10 { margin-right: 0; }
		.outdent5 { margin-right: 0; }
		.outdent3 { margin-right: 0; }
		.outdent2 { margin-right: 0; }
		.outdent2 { margin-right: 0; }
		}