/* base.css 
	Basic frame containing banner with menu. 2020-3-20
*/
html {
  font-size: 	font-size: calc(0.75em + 2vmin);
	font-family : arial, helvetica, sans-serif;
	bgcolor="#ffffff";
	alink="#666633";
	link="#cc0000";
	vlink="#cc0000";
	--banner-bg-color: #000036;
	--banner-font-color: #F3EAEA;
}

h1  {}
h2  {text-align: center;
	font-size: 1.5rem;
}

P {font-size: 1em;
}

.home {
	background: var(--banner-bg-color);
}

.home p {color: white;}



.categories a {
	color:white;
	text-decoration: none;
}
.categories > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 1rem;
	list-style-type: none;
}
ul ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: white; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
	margin-bottom: 1em;
}


.categories ul li figure img {
	width:300px;
	height:180px; 	
	object-fit: cover;
}


a:link  {
	color: #990000;
	text-decoration : underline;}
a:Visited  {
	color: #666666;
	text-decoration : underline;}
a:Active  {	color: #666633;}
a:Hover  {	color : #666633;}

.banner #cse {
	color: var(--banner-font-color);
	background-color: var(--banner-bg-color);
	float: right;
	width: 50%;
}
.home #cse {
	width: 100%;	
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

.center-only {
	margin-left: auto;
	margin-right: auto;
}

.content {
	margin-left : 100px;
	margin-right : 100px;
	/* [disabled]text-align: center; */
	font-size: 1rem;
}

.sidebar {
	width: 180px;
	float: left;
}
.middlewrap {
	width: 40%;
}
.listcontent {
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 180px;
	width: 50%;
	min-width: 420px;
}

.banner {
    padding-top: 4rem;
    padding-right: 2rem;
    padding-left: 4px;
    padding-bottom: 4rem;
    /* grid styles */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	  grid-gap: 1rem;
  }
.banner img:nth-child(1) {
	width:30%;
}

.banner	img:nth-child(3) {
	width:60%;
}

.banner-menu 	img:nth-child(1) {
	width:20%;
	}
.banner-menu 	img:nth-child(3) {
	width:40%;
	}

.banner-menu {
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 4rem;
	padding-right: 4rem;
	background: var(--banner-bg-color);
}
.annotation {
	font-size: .75rem;
}
.revdate {
	font-size: .75rem;}

/* Dropdown Button */
.dropbtn {
    background-color: #990000;
    padding-top: .6rem;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-bottom: .6rem;
	margin-right: 5px;
	font-size: 1rem;
    border: none;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.menu-icon {
  width: 2rem;
  height: 0.4rem;
  background-color: var(--banner-bg-color);
  margin: .6rem 0;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	float:left;
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--banner-bg-color);
  min-width: 160px;

  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: var(--banner-font-color);
  padding: .75rem 1rem;
  text-decoration: none;
  display: block;
	border-bottom-style: solid;
	border-bottom-color: var(--banner-font-color);
	border-bottom-width: .15rem;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #3e8e41;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

@media 	screen and (max-device-width: 600px) {

	.categories > ul {
		grid-template-columns: repeat(auto-fit, minmax(700px, 1fr));
		}
	.banner {
		 grid-template-columns: repeat(auto-fit, minmax(700px, 1fr));
		}
	.categories ul li figure img {
	width:600px;
	height:360px; 	
	object-fit: cover;
	}
	.banner-menu 	img:nth-child(1) {
		width:30%;
	}
	.banner-menu 	img:nth-child(3) {
		width:60%;
	}
	.dropdown-content {
		min-width: 500px;
		padding: .75rem 1rem;
		font-size: 6rem;
	}
	.menu-icon {
  		width: 8rem;
  		height: 01.6rem;
  		background-color: var(--banner-bg-color);
  		margin: 2rem 0;
	}
	.dropdown-content a {
			border-bottom-width: .3rem;
	}
	
}