@charset "UTF-8";
/* CSS Document */
/* W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

/*stylesheet updates:  --7a updates from -7 by adding style7a to add greater line height to that style; also updated -8.css to match. */
/*    Index and History use style 7a; browsers won't download a new style sheet of same name*/

	/*   box-sizing: border-box; makes padding and border included in total width/height of elements*/
* {
    box-sizing: border-box;
}
/* margin on body. No max-width on body, it is used on "main" which also centers the page */
/* internal css will override color, supply image if required; background codes applies to image: cover fits window, crops as needed without distorting*/
body {
	margin: 0px 10px 0px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-color: #FFFFFF;
}
/* center topnav bar horizontally, like main */
header {
	max-width: 750px;
    margin: auto;
}
    /* center footer horizontally, and restrict width, like main */
footer {
	max-width: 750px;
    margin: auto;
}
/* centerpage content horizontally */
.main {
	max-width: 750px;
    margin: auto;
}
img {
    max-width: 100%;
    height: auto;
}
/* hamburger code builds a icon in CSS for responsive topnav menu.	Called out by TopNav responsive css and script myFunction. 
Uses CSS for drawing top and bottom border to the hamburger element, and for the third line will draw in between, 
using the :before pseudo class to absolute position third line in between the first two.  
(from https://superdevresources.com/css-hamburger-menu/)  */ 
.hamburger {
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.0em;
    margin-right: 0.3em;
    border-top: 0.2em solid #666;
    border-bottom: 0.2em solid #666;
}
.hamburger:before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #666;
}
/*Scroll-button-W3s, edited--this is Top button, lower right, controlled with javascript scrollFunction and topFunction*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 12px;
  border: none;
  outline: none;
  background-color: #998166;
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}
/*On Hover Color Change*/
#myBtn:hover {
  background-color: #555;
}

a {
	text-decoration: none;
	color: #006699;
}
/* --copied over from History pg: "following styles from prev version-040518. link styles fix old HTML4 code."  */
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #CC6633;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
	color: #9966FF;
}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 120%;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 120%;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	line-height: 120%;
	font-weight: bold;
}
.head1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 36px;
	text-align: center;
	background-color: #FFFFFF;
	position: relative;
	visibility: visible;
	height: auto;
	width: auto;
	left: auto;
	top: auto;
	clip:  rect(   );
	vertical-align: middle;
}
.head2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	text-align: center;
	vertical-align: middle;
	line-height: 150%;
}
.head3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-align: left;
	vertical-align: top;
	line-height: 120%;
}
.head4 {
    font-size: 28px;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 150%;
    vertical-align: middle;
}
.head4title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 28px;
	line-height: 150%;
}
.text1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: 14px;
}
.texthead1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
.texthead2center {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
}
.textemph1 {
	font-size: 10px;
	font-style: normal;
	line-height: 14px;
	font-weight: bold;
}
.text1medsans {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	font-style: normal;
	line-height: 130%;
}
.text1medserif {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	font-style: normal;
	line-height: 120%;
}
.text1serif {
	font-family: "Times New Roman", Times, serif;
	font-size: 10px;
	font-style: normal;
	line-height: 14px;
}
.text1smserif {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: small;
	font-style: normal;
	line-height: 120%;
}
.text1smsans {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	font-style: normal;
	line-height: 120%;
}
.text2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
}
.texthead2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic
}
.text3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	line-height: 11px;
}
.text4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-style: normal;
}
.text4boldhd {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	font-style: normal;
	padding: 10px 0px 0px 0px;
}
.text4boldhdcenter {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	padding: 10px 0px 0px 0px;
}
.text4tight {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-style: normal;
}
.text4center {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-style: normal;
	text-align: center;
}
div.text5blockquote {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 20px;
	margin-left: 40px; 
	margin-right: 40px;
	padding: 10px 25px;
	background-color: #e6e6e6;
}
.style2 {
	font-size: 10px;
}
.style3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; 
	text-align: center
}
.style5 {
	font-weight: bold;
}
.style6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
    font-style: italic;
    color: #669900;
}
.style7 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 105%;
	font-weight: bold;
	font-style: italic;
	color: #669900;
	text-align: center;
}
.style7a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 130%;
	font-weight: bold;
	font-style: italic;
	color: #669900;
	text-align: center;
}
.style8 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 105%;
	font-weight: bold;
	font-style: italic;
	color: #0099cc;
	text-align: center;
}
.style8a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 105%;
	font-weight: bold;
	font-style: italic;
	color: #0099cc;
	text-align: left;
}
ul {
	list-style-type: disc;
}
ul li.margbtm {
  margin-bottom: 10px;
}
li {  }
.bulletlistcv {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	list-style-position: outside;
	list-style-type: disc;
	line-height: 14px;
	list-style-image: url(assets/images/bulletsmall_cv.gif);
}
.menu_hyperlink {
	text-decoration: none;
}
.menucv {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	list-style-position: outside;
	list-style-type: square;
	padding-bottom: 10px;
}
.menucvol {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	list-style-position: outside;
	list-style-type: decimal;
	padding-bottom: 15px;
}
.menucvnone {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	list-style-position: outside;
	list-style-type: none;
}
.menucv li {
  padding-bottom: 3px;
}
.menucvol li {
  padding-bottom: 3px;
}
.menucv6px li {
  padding-bottom: 6px;
}
.menu1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 15px;
	font-weight: normal;
	list-style-position: outside;
	list-style-type: square;
}
.menu1emph {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
}
.menu2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	text-decoration: none;
	list-style-position: outside;
	list-style-type: circle;
}
.menu3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 15px;
	font-weight: normal;
	list-style-position: outside;
	list-style-type: square;
}
/* menu2b, menu5,  Histoire des Blancs page only*/
.menu2b {  
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px; 
	line-height: 20px; 
	text-decoration: none; 
	list-style-position: outside; 
	list-style-type: circle;
}
.menu5 {  
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px; 
	line-height: 20px; 
	text-decoration: none; 
	list-style-position: outside; 
	list-style-type: decimal;
}
.caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
}
.caption1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 120%;
	text-align: center;
}
.caption2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
	/* [art] div.desc used heavily with gallery on art page*/
.desc {
  padding: 5px 10px 10px 10px;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px; 
}
/* [family] captions with gallery codes--padding, line-height. added. Lline height causes additional space before*/
.desc1 {
    padding: 5px;
    text-align: left;
	font-size: 10px; 
	line-height: 14px
}
.desc2 {
    padding: 10px 0px 0px;
    text-align: center;
}
.desc2head {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}
/*index pg only:  keep non-std font-fam; text: desc2headindex, descindex, caption2index; pad-cntr: desc2index  */
.desc2index {
    padding: 8px 0px 0px;
    text-align: center;
}
.desc2headindex {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	line-height: 150%;
	font-weight: bold;
}
.descindex {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
    text-align: center;
}
.caption2index {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
}
/* interviews; nell2020*/
.desciv {
    padding: 0 10px;
    text-align: left;
    font-size: 12px;   
} 
/*sotruth; white background, reduced top padding, left-align*/
.desc3 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px; 
  line-height: 120%;
  text-align: left;
  padding: 2px 10px 10px 10px;
  background-color: #FFFFFF
}
/* [risd-talk] "rightgraysmtext" for attribution of pullgreenflright (pullquote floats right, large green serif text) */
.rightgraysmtext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
    color: #999999;
	font-style: normal;
    line-height: 1.2;
	text-align: right;
}
.rightdkgraysmtext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
    color: #838080;
	font-style: normal;
    line-height: 1.2;
	text-align: right;
}
.center {
	text-align: center;
	align: center;
}
.border {
	border: 1px solid #000;
}
	/* [art] to give gray border to an image */
img.border {
    border: 1px solid #D8D8D8;
}
/* center image horizontally */
.blockimage img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: auto;
  padding: 10px
}
	/* default setting for the horizontal rule- used in the footer menu */
hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
} 
	/* short centered horizontal rule */
.hrshort { 
    display: block;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
	width: 150px;
} 
	/* medium centered horizontal rule */
.hrmed { 
    display: block;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
	width: 350px;
} 
/*--floats-images only-*/
/* [oias, ijkt]--image float right used;--float left used?? */
/* following styles to create image to float left or right in text, then to clear it. */
img.fltright {
    float: right;
    margin: 10px 0px 10px 20px;
    border: 2px solid #ccc;
}
img.fltleft {
    float: left;
    margin: 10px 20px 10px 0px;
    border: 2px solid #ccc;
}
div.clearleft {
  clear: left;
}
div.clearright {
  clear: right;
}
div.clear {
  clear: both;
}
p.clear {
  clear: both;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/*	[ijkt] floats for images only, new for IJKT praise blurbs, no MQs. (also using .imgfltrghtmed img and ...leftmed, with center div, and MQ): */
.imgfltleftsmall img {
    margin: 5px 20px 10px 0px;
    display: block;
    border: 2px solid #ccc;
    float: left;
    width: 100%;
    height: auto;
    max-width: 174px;
  }
.imgfltrightsmall img {
    margin: 5px 0px 10px 20px;
    display: block;
    border: 2px solid #ccc;
    float: right;
    width: 100%;
    height: auto;
    max-width: 174px;
  }
/*--galleries-image with caption, in-line--*/
/* [family, bksauth/edit] gallerycentermed and medlg--Centered gallery with caption, with responsive image per above max-width 100% code. (Can use with media query to call out at smaller screens, and hide it with a media Q to display none at above that breakpoint, if you are using float left-or-right gallery) */
.gallerycentermed {
    margin: auto;
    display: block;
    border: 2px solid #ccc;
    width: 100%;
    height: auto;
    max-width: 300px;
    background-color: #FFFFFF;
    padding: 0px 0px 5px 0px;
  }
.gallerycentermedlg {
    margin: auto;
    display: block;
    border: 2px solid #ccc;
    width: 100%;
    height: auto;
    max-width: 350px;
    background-color: #FFFFFF;
    padding: 0px 0px 5px 0px;
  }
/*  [history] in-line container for content, no background, green border, used with style7 for green, center text--Guardian op-eds banner */
.container5 {
	padding-top: 10px; 
	padding-right: 0px; 
	padding-left: 0px; 
	padding-bottom: 10px;
	border-style: solid;
	border-width: 5px;
	border-color: #CCDBBF;
	max-width: 100%;
}

/*--galleries-image with caption, float-left--*/
	/* [art, sojotruth] float-left-image gallery, 180px wide used as in-line gallery (sojotruth pg, also art page for Motherwell, +other  series). */
div.gallery {
  margin: 10px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
/*--float galleries--*/
/*--float galleries, simple def--*/
	/* [family, sitemap, bksauth/edit, risd-talk] galleryfltleftsmall and .galleryfltrightmed-	float-left small (174px) (or medium-right, 300px) gallery with caption, with responsive image per above max-width 100% code. (Can use with media query to call for at larger screens, and hide with media Q to display none at below breakpoint, if you are using non-floating gallery for smaller screens.) Use clearright on float-left, and clearleft on float-right. */
.galleryfltleftsmall {
    margin: 5px 20px 10px 0px;
    display: block;
    border: 2px solid #ccc;
    float: left;
    width: 100%;
    height: auto;
    max-width: 174px;
    background-color: #FFFFFF;
    padding: 0px 0px 5px 0px
  }
.galleryfltrightsmall {
    margin: 5px 0px 10px 20px;
    display: block;
    border: 2px solid #ccc;
    float: right;
    width: 100%;
    height: auto;
    max-width: 174px;
    background-color: #FFFFFF;
    padding: 0px 0px 5px 0px
  }
.galleryfltrightmed {
    margin: 5px 0px 10px 20px;
    display: block;
    border: 2px solid #ccc;
    float: right;
    width: 100%;
    height: auto;
    max-width: 300px;
    background-color: #FFFFFF;
    padding: 0px 0px 5px 0px
  }
.galleryfltleftmed {
    margin: 5px 20px 10px 0px;
    display: block;
    border: 2px solid #ccc;
    float: left;
    width: 100%;
    height: auto;
    max-width: 300px;
    background-color: #FFFFFF;
    padding: 0px 0px 5px 0px;
  }
/* [risd-talk] pullquote float right, large green serif text-used with "rightgraysmtext" for attribution */
 .pullgreenflright {
  float: right;
  width: 45%;
  padding: 15px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 20px;
  color: #339933;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 1px;
}
/*----float galleries, with media queries defining---*/

/* [sojotruth] gallerycenter2--	Media query makes an in-line centered gallery when the screen is 639px or less. called out for a named class-gallerycenter2 (gallerycenter2). Then hide it with following media Q to display none at below 640px. ---If follow in html with dup div with fltrightmed (using the following fltrightmed media query) will have gallery centered at small screen and float right at large screen. */
@media screen and (max-width: 639px) {
  .gallerycenter2 {
    margin: auto;
    display: block;
    border: 2px solid #ccc;
    /*float: center;*/
    width: 100%;
    height: auto;
    max-width: 300px;
	/*text-align: center;*/
    background-color: #FFFFFF;
    padding: 10px 0px 5px 0px
  }
}
/*hide it with media Q to display none at above 640px, with min-width*/
@media screen and (min-width: 640px) {
  div.gallerycenter2 {
    display: none;
  }
}
/* [sojotruth] fltrightmed. This media query floats an image right at it's max-width when the screen is 640px or more.  */
@media screen and (min-width: 640px) {
  .fltrightmed {
    margin: 15px 0px 10px 20px;
    border: 2px solid #ccc;
    float: right;
    width: 100%;
    max-width: 300px;
    background-color: #FFFFFF;
    padding: 10px 0px 5px 0px
  }
}
/*hide it with media Q to display none at below 640px, with max-width*/
	@media screen and (max-width: 639px) {
  div.fltrightmed {
    display: none;
  }
}

/* [contacts] galleryleftmed--Media query makes a left-aligned (block) gallery when screen is 715px or less. Hide it with following media Q to display none at below 714px */
@media screen and (max-width: 715px) {
  .galleryleftmed {
    margin: 0px 0px 0px 0px;
    display: block;
    border: 2px solid #ccc;
    width: 100%;
    height: auto;
    max-width: 300px;
    text-align: center;
    background-color: #FFFFFF;
    padding: 0px 0px 5px 0px
  }
	/*from .blockimag img -- do I need this????---*/
	.galleryleftmed img {
		display: block;
		max-height: 100%;
		max-width: 100%;
		width: auto;
	 	height: auto;
		margin: auto;
		padding-bottom: 5px
	}
}
/*hide it with media Q to display none at above 715px, with min-width*/
@media screen and (min-width: 715px) {
  div.galleryleftmed {
    display: none;
  }
}
/*[contacts] fltrightmed2. Media query floats  image right at max-width when  screen is 715px or above. Dif from fltrightmed is padding and min-/max-widths (715-714). */
@media screen and (min-width: 715px) {
  .fltrightmed2 {
    margin: 15px 0px 10px 20px;
    border: 2px solid #ccc;
    float: right;
    width: 100%;
    max-width: 300px;
    background-color: #FFFFFF;
    padding: 0px 0px 5px 0px
  }
}
/*hide it with media Q to display none at 714px and below, with max-width*/
	@media screen and (max-width: 714px) {
  .fltrightmed2 {
    display: none;
  }
}

/* [ijkt] imgfltrghtmed and .imgfltleftmed. Image only: This media query floats an image right or left at a max-width of 50% width when the screen is 500px or more. dif from fltrightmed, this applied to div around image. If wrapped inside outer simple in-line div (like "center") will show in-line at below breakpoint, and float right above breakpoint. */
@media screen and (min-width: 500px) {
  .imgfltrghtmed img {
    float: right;
    max-width: 50%;
    margin: 10px 0px 10px 20px;
    border: 2px solid #ccc;
  }
}
@media screen and (min-width: 500px) {
.imgfltleftmed img {
    float: left;
    max-width: 50%;
    margin: 10px 20px 10px 0px;
    border: 2px solid #ccc;
  }
}
/*--Responsive Image Gallery (rig)--for image-caption galleries that are 4-across @25%, 2-across @50%, 1-wide @100% width */
	/*  [family] 2 nested divs: outer-div1 (responsive) = rig-respons-div1; inner div2 (gallery) = rig-gallery-div2; and desc1 as caption (from responsive-image-gallery-w3s)*/
div.rig-gallery-div2 {
    border: 2px solid #ccc;
}
div.rig-gallery-div2:hover {
    border: 2px solid #777;
}
div.rig-gallery-div2 img {
    width: 100%;
    height: auto;
}
/*added top margin for stacking of more-than 4-like 2 per width "responsive" div*/
.rig-respons-div1 {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
	margin: 6px 0;
}
/*media queries control the responsive outer div1*/
@media only screen and (max-width: 700px) {
    .rig-respons-div1 {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px) {
    .rig-respons-div1 {
        width: 100%;
    }
}

/* --Flex: row-column-gallery and responsive media queries. (See also index.css for one-row flex row-column-container) */
/* [InterViews, nell2020] row-column-gallery (iv) and responsive media queries. follow with clearfix */
.rowiv {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.columniv {
    flex: 25%;
    max-width: 25%;
    padding: 0 8px;
}
.columniv img {
    margin-top: 0px;
    vertical-align: middle;
    width: 100%;
    height: auto;
}
/* container with border darkening on hover, with top margin, and text with rt-left padding */
div.galleryiv {
    border: 1px solid #ccc;
    margin-top: 16px;
    background-color: #FFFFFF;
}
div.galleryiv:hover {
    border: 1px solid #777;
}
/* Responsive layout - makes a two column-layout instead of four columns  */
@media (max-width: 800px) { 
    .columniv {
        flex: 50%;
        max-width: 50%;
	}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other  */
@media (max-width: 600px) { 
    .columniv {
        flex: 100%;
        max-width: 100%;
    }
}


/*This topnav code from history.html page*/
/* This is the topnav code from w3s which creates responsive-topnav bar, with javascript which hides all but first of menu and shows 3-line hamburger icon. Note that must manually put active code in each page, [if page does not have a link in the menu so has no active link, can use the home link as active link, or closest parent link]. Unlike other responsive-topnav, it does not use ul to build menu list. Colors are from 3ws light gray with border. */		
/* Add a light gray background color to the top navigation, and slightly darker border */
.topnav {
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
/* Style the links inside the navigation bar */
  /*same as Responsive Topnav with Dropdown from W3s, formatted for OAIS navbar*/
.topnav a {
  float: left;
  display: block;
  color: #666666;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 12px;
}
/* Add an class to format the home page link --inherit does not work on background-color in css; color does not work--applied text color in the html code--otherwise the "a" color operates */
.home {
/*  background-color: #inherit;*/
  /*color: #8c8c8c;*/
  font-weight: bold;
}
/* Add an active class to highlight the current page--do not know why the color does not work--the "a" color operates **/
.active {
  background-color: #cccccc;
/*  color: #FFFFFF;*/
  font-weight: bold;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/*This is "dropdown" code from W3Schools CSS, for a drop-down menu--added into existing menu code.*/
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}
		/*the "dropbtn" is dropdown button-- is added for dropdown code*/
/*properties may need adjusted-color, padding, border, outline? --changed font-size to 12px, increased padding to 20px*/
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 12px;
  border: none;
  outline: none;
  color: #666666;
  padding: 10px 20px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #666666;
  padding: 10px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #e6e6e6;
  /* color: white; */
}
/*color of text on hover is black*/
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
	}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) --I removed this code after "...first-child)" to test, because it was not hiding links:   .dropdown .dropbtn */
/*	Now it only shows the dropdown More, but not all links there? Test more.*/
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}