@charset "UTF-8";
/* CSS Document */
/* nell-index1.css;  03-25-2024, Janet Shafer */

/*stylesheet updates:  based on nell-index, updated for IJKT book tour index page */
	/*   box-sizing: border-box; makes padding and border included in total width/height of elements*/
* {
    box-sizing: border-box;
}
/* center topnav bar horizontally, like main; unique width to index */
header {
	max-width: 650px;
    margin: auto;
}
    /* center footer horizontally, and restrict width, like main; unique width to index  */
footer {
	max-width: 650px;
    margin: auto;
}
/* centerpage content horizontally; unique width to index  */
.main {
	max-width: 650px;
    margin: auto;
}
/* center image horizontally, with border; the "img" avoids extra white space inside div border at bottom */
.blockimage2 img {
    display: block;
	margin: 10px auto 10px auto; 
	border: 1px solid #777;
    width: 100%;
    max-width: 650px;
    padding: 0px;
}
/* center image horizontally, any width, no padding */
.blockimage3 img {
	display: block;
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	border: 1px solid #777;
}
/* --unique container actions for home page (2 px dark gray border on hover)  */
img:hover {
border: 2px solid #777;
}
/*  [index] in-line container for content, no background, green border, used with style7 for green, center text--Guardian op-eds banner */
.container6 {
	margin: 10px auto 10px auto; 
	padding: 10px; 
	border-style: solid;
	border-width: 5px;
	border-color: #CCDBBF;
	max-width: 650px;
}
/*unique for index page with IJKT book tour, edited from standard topnav bar 03-25-26*/
/* made 650px wide;  */
/* 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;
}
/* Unique to index1: changed max-width to 1200px from 600px; changed a.icon to float: right from float: left*/
/* When the screen is less than 1200 pixels wide, the hamburger will float: RIGHT, (also, like on standard menus, at less than 1200px, it does: 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 */
@media screen and (max-width: 1200px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* Unique to index1: changed max-width to 1200px from 600px; */
/* 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: 1200px) {
  .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;
  }
}