@charset "UTF-8";
/* CSS Document */

/* RESPONSIVE STYLES CONSTRUCTED FOR MOBILE FIRST; AT END OF NAVIGATION STYLES IS THE MEDIA QUERY FOR THE STYLES SPECIFICALLY FOR DESKTOP (GREATER THAN 512 px = 32 em) */

/* ===== main structural sections ======================================================= */

body {
	margin: 0em auto 0.5em;  /* CENTER HORIZONTALLY WITH AUTO */
	font-family: Helvetica Neue, Geneva, Helvetica, Tahoma, sans-serif;
	font-style: normal;
	font-size: 1.0em; /* if font is taller/larger, use .875em, which is 14 pt if browser default is unchanged from 16 pt */
	font-weight: 400; /* alter for desktop */
	 /* default color is black; alter for desktop: activate #585858 for lighter colored text */
	line-height: 150%;
	background-color: #dbdee3; background-color: #ebebe6; /* was light gray = #dbdee3; now ultra light mossy */
	word-break: normal;
}
a:link {color:#81843e; text-decoration: none; font-weight: 600;} /* link blue = #4187ac; alternate link blue = #1277ad; alternate link blue = #307ba2 (piggy choice); agr dark = #435f33; agr med = #81843e*/
a:visited {color:#81843e;} /* piggy was very dark blue-black = #234a5f; now agr dark link */
a:active {color:#fcc86e;} /* piggy was purply = ##9c69a7; now agr gold */
a:hover {color:#81843e; text-decoration: underline overline; } /* was piggy pink */
*:focus {background-color:#ebebe6;} /* was 96% light gray at 50%; changed to ultra light mossy */

#sack { /* the main flex container for all standard pages */
	width: 98%; max-width: 52em; /* MAJOR SECTIONS WILL ALIGN WITH THIS MAX WIDTH 52em; width will change with font size; specify 832 pixels to keep width fixed */
	margin: 0 auto;
	text-align: left;
	border: 1px solid #81843e; /* was piggy pink */
	min-height: 400px;
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-flow: column; /* = flex-direction + implied no-wrap, though wrap seems to be of no consequence for mobile here */
	        flex-flow: column;
}

.flexor {margin: .5rem 0; /* to make a flex container within other elements or divs */
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-flow: column; /* = flex-direction + implied no-wrap, though wrap seems to be of no consequence for mobile here */
	        flex-flow: column;
}

article, section {
	background: #ffffff;
	text-align:left;
	/* padding to be set with .sideroom */
}


footer {
	padding:0.5em; /* offset just a little from #sack border; matches .sideroom in mobile; gives wider line than article/section in desktop;  */
	background-color:#ebebe6; /* had been #ddd; now ultra light mossy */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#ebebe6));
	background:-moz-linear-gradient(bottom, #ebebe6, #fff 100%);
	font-size:0.75rem;
	line-height:135%;
	border-top:1px solid #81843e;
}


.aside {margin-left: 5%; margin-right: 5%; font-style: italic;}



/* ===== styling common elements and classes ==================================================== */

/* general styles of headings, and headings preceding headings and certain other elements (combinator +; child elements); specs will change for Desktop */
h1, h2, h3, h4, h5, h6  {
	font-weight: 400;
	color: #435f33; /* was piggy pink; changed to agr dark */
	line-height: 120%;
	margin: .75em 0 0; }
h1  {font-size:1.5em; margin: 0; }
h2  {font-size:1.35em; }
h3  {font-size:1.25em; }
h4  {font-size:1.2em;}
h5  {font-size:1.1em;}
h6  {font-size:1.0em; }
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6, h1 + ul, h1 + ol, h2 + ul, h2 + ol, h3 + ul, h3 + ol {margin-top:1em;}
h3 + p.aside {color: #666; margin-top: 0;}
article h3:first-child {margin-top: 0;}
.sched h3 {margin-bottom: 0; padding-top: 0.5em; border-top:1px solid #81843e;} /* this adjusts top and bottom spacing & somehow works to clear the pairs of floats that follow */


/* basic, nested, and paragraph-style lists */
ul { list-style-type:square; padding-left:7.5%; margin-top: 0.5em;}
ol { list-style-type:decimal; padding-left:7.5%; margin-top: 0.5em;}
ul.nest2 {list-style-type: circle; padding-left:3%; margin-top: 0;}
ol.nest2 {list-style-type:lower-alpha; padding-left:3%; margin-top: 0;}
ul.para li, ol.para li {padding-bottom: 0.5em;}
ul.para p, ol.para p {margin-top: 0;}

/* to control side padding, thus line width: narrow in mobile, increased for desktop; applied to articles */
.sideroom {padding: .5em;}

/* to make any font larger */
.larger {font-size: larger;}

/* styling and behavior of the page-top and page-bottom navigation triangles */
.triangle {font-size:1rem; font-style: normal; font-weight: 900; text-transform: none;}
a.triangle {text-decoration:none; }
a.triangle:link, a.triangle:visited {color: #81843e;}/* triangle links remain piggy pink -- now agr med -- except for hover, which is gray */
a:hover.triangle, a:focus.triangle {text-decoration:none; color:#ccc;}


/* site-wide stying of basic, common text/font styles in next three groups */
p {margin:1em 0 0.5em;}
.b, b {font-weight:400; color:#435f33; } /* was very dark blue-black; now agr dark */
.strong, strong {font-weight:600; color:#435f33;} /* was very dark blue-black; now agr dark */

.i, i {font-style: italic; font-weight: 400; color: #555555;} /* dark gray */
.em, em {font-style:italic; font-weight:500; color:#435f33;} /* was very dark blue-black; now agr dark */
b em {font-style:italic; font-weight:600; color:#435f33;} /* was very dark blue-black; now agr dark */
.underline {text-decoration: underline;}
kbd {font-family: monospace; font-size: larger;}

#def {width: 80%; max-width: 26em; margin:1em auto; padding: 0.5em; font-size:0.875em; line-height:1.2rem; border:5px double #435f33;} /* was very dark blue-black; now agr dark; is this what is wanted? */
#def img {float:left; margin-right:0.5em; margin-bottom:0.5em;}
#def p {margin: 0;}


/* for alternate styling of <strong> as colored uppercase, not bold, best used in DIV */
.cap {font-weight:400; text-transform: uppercase;}
.capstrong strong {font-weight: normal; text-transform: uppercase;}
.capstrong .inobtrusive strong {font-weight:600; text-transform:none;}


/* to style short bios and email listings of people  */
.hangpara p {line-height: 130%; margin-bottom: 0;}
.hangpara p em {font-weight: 400;}
.hangpara p.email {margin-top: 0; font-style: italic;}


/* keeps italic within headings the same weight and color as the heading */
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {font-weight: inherit; color: inherit;}

/* more handy styling classes */
.colormain {color: #81843e;} /* was piggy pink, now agr med */
.cblack {color: black; }
.leadingclose {line-height: 120%}
.noweight {font-weight: inherit;}
.breakall {word-break: break-all;}



/* had been Piggy Pink borders; now agr med: */
.bordt {border-top: 1px solid #81843e}
.bordr {border-right: 1px solid #81843e}
.bordb {border-bottom: 1px solid #81843e}
.bordl {border-left: 1px solid #81843e}
.bordall {border: 1px solid #81843e;}
.bordallthick {border: 10px solid #81843e;}


/* for passages of smaller, lighter colored, italics text (such as modification time) */
.inobtrusive {color:#666; font-size: .85rem; font-style: italic; font-weight: 400; margin-bottom: 0; line-height: 120%;}
.obtrusive {background-color: rgba(251,255,0,0.37); border: 1px solid black; margin: 1em 10%; padding: .5em 1em;} /* semi-transparent yellow */
.obtrusive *:first-child {margin-top: .25em;}
ul.obtrusive, ol.obtrusive {padding-left:2em;}


/* handy-dandy alignments and indents and show or not show */
.center { text-align:center; }
.right {text-align:right;}
.rital { text-align:right; font-style:italic;}
.indentlr {margin-left: 5%; margin-right: 5%;}
.indentl {margin-left: 5%;}
blockquote {margin-left: 0; margin-right: 0;}
.rt {float:right; display: block;}
.wide {width: 100%}
.narrow {width: 15%}
.noshow {display:none;}
.deskonly {display: none;} /* hide something from mobile that is displayed block for desktop */
.nomob {display: none;} /* hide something from mobile that is displayed -- not block -- for desktop */


/* to style first line only, bold and colored; can style class in other ways as needed */
p.firstline:first-line {font-weight:400; color:#435f33;} /* was very dark blue-black; now agr dark */

/* to style Author <br> Title in lists of PDFs; apply to containing DIV */
.pdflist p {font-style: italic;}
.pdflist p:first-line {font-style:normal;}


/* to style entries on schedule section of workshop page(s) */
#sessions h6 {margin: 1em 0 0;}
#sessions h6 ~ p  {margin: 0 0 0 1em;}
#sessions h6 + p {font-weight: 400; color:#435f33;}/* was very dark blue-black; now agr dark */


/* nice, skinny, not-too-long, main-color rule */
.rule {width: 33%; border-collapse: collapse; border-top: 1px solid #81843e; height: 0.5em;}


/* for footnotes and footnote references */
.nref {vertical-align: super; font-size: small; line-height: 0; }
.footnotes {border-bottom: 1px solid black; font-size: smaller; line-height: 130%; margin: 2em 0 1em; padding: 0 1em 1em;}

/* to style description lists, names, and terms */
dl { Xmargin-left: 1em; }
dt { color: #435f33; font-weight: 600; padding-top: 0.75em;} /* was very dark blue-black; now agr dark */
dd {margin-left: 2em;}
dd.two {margin-top: 0.375em; margin-bottom: 0.375em;} /* this class used only with second or subsequent dd element to insert a little space above and below */


/* to style tables and table elements, such as for aligned data; not currently used in this website */
table {table-layout:fixed; width:95%; border-collapse:collapse; border:1px solid #81843e; margin:2em auto; }
thead {color:#435f33; text-align:center; border-bottom:1px solid #81843e; font-style:oblique;}/* text had been very dark blue-black, border piggy pink; now agr dark and agr med */
tfoot {color:#435f33; text-align: center; font-size: smaller;}/* text had been very dark blue-black; now agr dark */
td {border:1px solid #81843e; padding:.555em; line-height:1.2;}
caption {color:#435f33; } /* had been very dark blue-black; now agr dark */

/* to style forms and form elements */
form {padding:3%; background-color: rgba(129, 132, 62, 0.20);}
input, textarea {font-family:Helvetica Neue, Geneva, Helvetica, Tahoma, sans-serif; font-size: .85em; margin-bottom:.3em;}
label {color:#435f33; } /* was piggy pink; now agr dark */
iframe {width: 100%; height: 20em;}


/* to style entries in the Schedule */
.time {
	margin:1em 0 0 0;
	color:#435f33;
}

.topic {
	margin:0 0 0 1em;
}

p.topic:first-line {
	font-weight:600;
	color:#435f33;
}




/* used in footers for copyright and contact info; differs for desktop */
.copyleft, .copyright {margin: 0 0 .25rem;}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* Useful with images in larger viewports, to fill (extend) width to container, leaving height proportional */
.fill {width: 100%; height: auto;}

/* experiment with putting the boar in the logo; probably scrap */
.room {margin-left: 4em;}

/* Useful with images in smaller viewports, to limit width to container, leaving height proportional */
.filllimit {max-width: 100%; height: auto;}
.fillless {max-width: 90%; height: auto;}


/* highlights the target of links within a page by shading the background */
:target {background-color: #ebebe6;} /* same light gray, now ultra light mossy, as body background; could try lighter, such as #e8ecf1 or #e6eaef */

/* styles the conference name, i.e., "logo," in page headers; fine-tuned for mobile and desktop */
.logop {
	font-family:  Papyrus, fantasy, sans-serif;
	font-size:1.2rem;
	font-weight:700;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 100%;
	color:white;
	padding: .5rem 0.1rem;
	margin: 0;
	text-decoration:none;
	text-align:center;
	background:#81843e;
	border-bottom: 1px solid #ebebe6;/* same light gray, now ultra light mossy, as body background */
}
p.logop a, p.logop a:visited, p.logop a:active {color: white; text-decoration: none; }
p.logop a:hover, p.logop a:focus {color: #eee; text-decoration: none; }

.tomenu {
	height:1.5rem;
	display:  block;
	padding: 0 1em;
	background:#81843e;
	color:white;
	text-align: right;
}

.tomenu a, .tomenu a:visited, .tomenu a:active {color: white; text-decoration: none;}
.tomenu a:hover {color: #eee; text-decoration: none;}


/* THIS SECTION STYLES THE MAIN MENUS FOR NAVIGATION [INCLUDING THOSE OF THE FOOTER???] */

nav {margin:0 auto; width:100%; /* sets relative width and centers; rules are light gray, now ultra light mossy,, same as body background */
	-webkit-column-count: 2;
	-webkit-column-gap: 1px;
	-webkit-column-rule: 1px solid #ebebe6;
	-moz-column-count: 2;
	-moz-column-gap: 1px;
	-moz-column-rule: 1px solid #ebebe6;
	column-count: 2; column-gap: 1px; column-rule: 1px solid #ebebe6; /* light gray, now ultra light mossy, same as body background */
	background:#81843e; /* was default piggy pink solid; now agr med; will be gradient in desktop */
 } /* mobile is two columns, had been piggy pink (default), now agr med (default) */

/* ===== mobile list navigation ======================================================= */

nav ul {
	font-size:0;
    list-style-type: none;
    margin-top: 0;
	padding:0;
} /* sets style and appearance of mobile navigation lists, and eliminates inter-block white space when inline by setting font-size to zero (to be overridden) */

nav a {
    display: block;
    padding:.2em 1em;
    font-size:1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
	text-align:center;
    border-bottom: 1px solid #ebebe6; /* same light gray, now ultra light mossy, as body background */
}

nav a:link, nav a:visited {color:#fff; text-decoration:none; font-weight: 400;} /* sets default color and style for links and visited-links in nav menus; color for submenus to be overriden */

nav a:hover { background:#ebebe6; } /* sets default hoverlink color and bg for (un)selected main tabs; to be overridden for selected tab and displayed submenu */

body.home nav a.home,
body.about nav a.about,
body.sched nav a.sched,
body.where nav a.where,
body.present nav a.present,
body.reg nav a.reg,
body.paper nav a.paper,
body.part nav a.part,
body.ref nav a.ref,
body.instr nav a.instr,
body.welc nav a.welc,
body.con nav a.con
{background: #435f33;} /* was rgba(0, 0, 0, 0.5) */

footer ul {display: none} /* so extra footer navigation does not display on mobile
 */

/* ===== end mobile list navigation ================================================== */







/* ===== adjustments for wider screens below ============================================== */


/* CHANGE @media screen and (max-width:xx) or (min-width:xx) BACK TO MAX-DEVICE-WIDTH:XX OR MIN-DEVICE-WIDTH:XX WHEN ALL TESTING IS DONE; 32em = 512px @16pt font */
/* EVIDENTLY MEDIA QUERY NEEDS TO BE ON ONLY A FINAL, SINGLE CSS STYLESHEET, CURRENTLY THIS ONE */

@media screen and (min-width: 36em) { /* 36em = 576 px @ 16 pt; had been 32 em = 540 px @ 16 pt */
	body {font-weight: 300; color: #585858;} /* agr gray text = #585858; had been #4c4c4c */
	a:link, a:visited, a:active, a:hover {font-weight: 400;}
	.inobtrusive {font-weight: 300;}
	.logop {font-size:1.75rem;
		line-height:120%;
		padding: 1.5rem .5rem; }
	.tomenu {display: none;}
	.boar {width:5em; }
	blockquote {margin-left: 5%; margin-right: 5%;}
	.sideroom {padding: .5em 7%;}
	h1, h2, h3, h4, h5, h6  {font-weight: 300; margin: 1.5em 0 .5em;}
	h1 {font-size: 2em; margin: 0.25em 0;}
	h2 {font-size: 1.75em;}
	h3 {font-size: 1.35em;}
	h3 + p.aside {color: #666; margin-top: -.75em;}
	nav {column-count: 1;
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		max-width: 9em; /* 9em = 144 px at 16 pt type, matching right margin of Article; the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer would include the padding and border if they existed */
		background: #81843e; /* had been default piggy pink = #d56f85 */
		background:-webkit-linear-gradient(top, #81843e 50%, #fff);
		background:-moz-linear-gradient(top, #81843e 50%, #fff);
		background:-o-linear-gradient(top, #81843e 50%, #fff);
		background:linear-gradient(to bottom, #81843e 50%, #fff);/* standard syntax; must be last; preceding gradients are for earlier versions of browsers */
		padding-bottom: 10em; /* merely extends the column downward */
	}
	nav a {font-size: .9rem;
		text-align: left;
		border-bottom: 1px solid #ebebe6; /* same light gray, now ultra light mossy, as body background */
		display: block;
		letter-spacing:inherit; /* changes to appearance of main nav links on desktop */
				}
	.hangpara p {padding-left: 2em; text-indent: -2em; margin-top: 1.5em;}
	.hangpara p em {font-weight: 300;}
	.pdflist p {margin-top: .75em;}
	.wide {width: 80%}
	.deskonly {display: block;}
	.nomob {display: inline;}

	/* to style entries in the Schedule */
	.time {
		margin-top: 1em;
		float:left;
		width:9em;
		padding:0 0 0 1em;
		color:#435f33;
	}
	
	.topic {
		margin:1em 0 0 11em;
	}
	
	p.topic:first-line {
	font-weight:500;
	}
	
	nav ul li ul li a {padding-left: 2em;} /* indents sub-menus in main navigation (hidden in mobile) */

	article {
		border-right: 1px solid #81843e;/* had been piggy pink, now agr med */
	}

	#sack {
	-webkit-flex-flow: row wrap; /* = flex-direction + flex-wrap */
	        flex-flow: row wrap; /* = flex-direction + flex-wrap */
		max-width: 52em;
	}

	.flexor {
	-webkit-flex-flow: row; /* = flex-direction */
        	flex-flow: row; /* = flex-direction */

	}

	.flexor > .copyleft, .flexor > .copyright {
	-webkit-flex: 50%; /* grow + shrink + basis; only basis needed in this context */
	       flex: 50%;
	}

	.flexor > p.copyleft { /* order 1 unchanged from mobile */
	   -webkit-order: 1;
	           order: 1;
	}

	.flexor > address.copyright { /* order 2 unchanged from mobile */
	   -webkit-order: 2;
	           order: 2;
	}

	#sack > header {
		-webkit-flex: 100%; /* grow + shrink + basis; only basis needed in this context */
			   flex: 100%;
	   -webkit-order: 1;
	           order: 1;
	}

	#sack > article {
	-webkit-flex: 1 1 60%; /* grow + shrink + basis */
		   flex: 1 1 60%;
	-webkit-order: 2;
	       order: 2;
	}

	#sack > nav {
	-webkit-flex: 20%; /* grow + shrink + basis; only basis needed in this context */
	       flex: 20%;
	-webkit-order: 3;
	       order: 3;
	}

	#sack > footer {
	-webkit-flex: 100%; /* grow + shrink + basis; 100% basis needed in this context */
		   flex: 100%;
	-webkit-order: 4;
	       order: 4;
	}

footer ul { /* footer navigation does not display on mobile */
	display:block;
	list-style-type: none;
	margin:0;
	padding:0;
	font-size:0; /* makes text initially invisible; to be restored with <a> link */
	text-align:center; } /* sets style and appearance of footer menu list, and eliminates inter-block white space by setting font-size to zero (to be overridden) */

footer li { display:inline; } /* sets footer menu list items to display horizontally */

footer li a {
	display: inline-block;
	border-left: 1px solid #ebebe6; /* ultra light mossy */
	border-right: 1px solid #ebebe6; /* ultra light mossy */
	font-size:0.75rem; /* restores font size to make text links visible */
	padding:0 .75em; } /* sets style and appearance of footer menu links; needs both inline and block (invisible) inline, padded blocks; restores a visible font size based on root */

iframe {height: 30em;}






}

/* ===== end of desktop/wider screen adjustments ======================================== */