/* CSS for NWSA Timeline */

*,
*:before,
*:after {
  box-sizing: border-box;
}

html { font-size: 16px; }

html,
body {
  margin: 20px 0;
  padding: 0;
  height: 100%;
}

.theme-light {
	--font-color: #232528;				/* Dark Gunmetal */
	--body-color: #FFFAFA;				/* Snow */
	--header-color: #BBBBBB;			/* Gray */
	--header-font: #4B4B4B;				/* Quartz */
	--header-shadow: #EDEDED;			/* Bright Gray */
	--section-color: #D4D4D4;			/* Light Gray */
	--nav-color: #EDEDED;					/* Bright Gray */
}

.theme-dark {
	--font-color: #FFFAFA;				/* Snow */
	--body-color: #9FA1A1;				/* Quick Silver */
	--header-color: #565656;			/* Davy's Grey */
	--header-font: #E0E0E0;				/* Chinese White */
	--header-shadow: #000000;			/* Black */
	--section-color: #636363;			/* Granite Gray */
	--nav-color: #232528;					/* Dark Gunmetal */
}

/*	Dark mode toggle
	https://codepen.io/haxzie/pen/xxKNEGM */

.theme {
	position: absolute;
	top: 12px;
	right: 21px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 0;
  top: 0;
  background-image: url('../images/sun2.svg');
  background-repeat: no-repeat;
  background-position: center;
}

input:checked + .slider {
  background-color: transparent;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  background-image: url('../images/moon.svg');
  background-repeat: no-repeat;
  background-position: center;
}

/* Rounded sliders */
.slider.round {
  border-radius: 15px;
}

.slider.round:before {
  border-radius: 50%;
}

body {
  display: -webkit-box;
  display: flex;
  font-family: sans-serif;
  font-size: 9pt;
	background: var(--body-color, #FFF0F0);
  color: #333;
  -webkit-box-pack: center;
  justify-content: center;
}

header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 0.25rem;
	z-index: 400;
	text-align: center;
	background: #565656;
	box-shadow: 0 2px 3px #000000;
}

h1 {
	font-size: 0.87rem !important;
	color: #E0E0E0;
}

/* mobile header */
.fulltext { display: none; }
.acronym { display: inline; }

.wrapper {
  max-width: 1920px;
  overflow: scroll;
  margin-top: -7px;
}

/* timeline table */
table {
	table-layout: fixed;
	position: relative;
	width: 100%;
	height: 100vh;
	margin-top: 0px; 
	margin-bottom: 1em;
	border-spacing: 0;
}

th, td {
	display: table-cell;
	width: 150px;
}

th {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: -1px;
	padding: 18px 0 6px;
  z-index: 87;
	text-align: center;
	background: var(--nav-color);
	border: 0;
}

th img {
	display: block;
	height: 87px;
	margin: 0 auto 6px;
}

th span {
	letter-spacing: 1px;
	color: var(--header-font, #CCCCCC);
}

td {
	height: 24px;
	white-space: nowrap;
	vertical-align: middle;
	padding-left: 0.3em;
	background: var(--body-color);
	border-right: 1px solid #999;
}

tbody tr td:first-of-type {
  position: -webkit-sticky !important;
  position: sticky !important;
  left: -1px;
  z-index: 86;
}

.tabletop {
	height: 24px;
	padding-top: 3px;
}

.cellspanner td {
	height: 7px !important;
	background-color: white;
	background: var(--nav-color);
	border: 0 !important;
}

/* row headers */
.lcolumn {
	width: 127px;
	font-weight: bold;
	text-align: right;
	padding-right: 0.33em;
	color: var(--header-font) !important;
	background: var(--nav-color);
	border: 0;
}

.lrh {
	color: var(--nav-color) !important;
}

.rcolumn {
	width: 127px;
	font-weight: bold;
	text-align: left;
	padding-left: 0.33em;
	z-index: 0;
	color: var(--header-font) !important;
	background: var(--nav-color);
}

.rhead { width: 120px; }
	
/* blank single row */
.break { 
	border-top: 1px solid #999 !important;
}
			
/* timeline colors  */
.gen87 {
	background: var(--section-color) !important;
	border: 0; 
	z-index: 0 !important;
}

.xup { z-index: 85 !important; }

.gen00 { font-size: 1em; background: #CCFFCC; /* green: original */ }
.gen01 { font-size: 1em; background: #FFFF99; /* yellow: first */ }
.gen02 { font-size: 1em; background: #FFCC99; /* brown: second */ }
.gen03 { font-size: 1em; background: #99CCFF; /* blue: third */ }
.gen04 { font-size: 1em; background: #FF99CC; /* pink: fourth */ }
.gen05 { font-size: 1em; background: #CC99FF; /* purple: fifth */ }
.gen06 { font-size: 1em; background: #C0C0C0; /* silver: sixth */ }
.gen07 { font-size: 1em; background: #FFBB00; /* orange: seventh */ }
.gen08 { font-size: 1em; background: #99CC00; /* avacado: eighth */ }
.gen09 { font-size: 1em; background: #33CCCC; /* teal: ninth */ }
.gen10 { font-size: 1em; background: #FFCC00; /* gold: tenth */ }
.gen11 { font-size: 1em; background: #FFCCCC; /* rose: eleventh */ }
.gen12 { font-size: 1em; background: #CCCCFF; /* lt violet: eleventh */ }
			
.gen0 { font-size: 1em; background: transparent; /* no color */ }
.gen1 { font-size: 1em; background: #CCFFCC; /* green: first */ }
.gen2 { font-size: 1em; background: #FFFF99; /* yellow: second */ }
.gen3 { font-size: 1em; background: #FFCC99; /* brown: third */ }
.gen4 { font-size: 1em; background: #99CCFF; /* blue: fourth */ }
.gen5 { font-size: 1em; background: #FF99CC; /* pink: fifth */ }
.gen6 { font-size: 1em; background: #CC99FF; /* purple: sixth */ }
.gen7 { font-size: 1em; background: #C0C0C0; /* silver: seventh */ }
.gen8 { font-size: 1em; background: #FFBB00; /* orange: eighth */ }
.gen9 { font-size: 1em; background: #99CC00; /* avacado: ninth */ }
.gen10 { font-size: 1em; background: #33CCCC; /* teal: tenth */ }
.gen11 { font-size: 1em; background: #FFCC00; /* gold: eleventh */ }
.gen12 { font-size: 1em; background: #FFCCCC; /* rose: twelfth */ }
.gen13 { font-size: 1em; background: #CCCCFF; /* lt violet: thirteenth */ }

/* picture frames */
.full,
.half,
.quar {
	cursor: alias !important;
	position: relative;
	height: 100%;
}

.full:hover,
.half:hover,
.quar:hover {
	box-shadow: inset 0px 0px 9px #f00;
}

.adjuncts span:hover { text-decoration: underline; }
.nobs { box-shadow: none !important; }

.big_img {
	position: absolute;
	height: 103px;
	bottom: 20px;
	left: 0px;
	border-radius: 3px;
	display: none;
}

/* full year : colspan 4 & 3 */
.full:hover .big_img {
	display: block;
	margin-left: 9em;
	margin-bottom: -5em;
	box-shadow: 3px 3px 3px rgba(128,128,128,.5);
	z-index: 82;
	border-radius: 50%;
}

/* half year : colspan 2 */
.half:hover .big_img {
	display: block;
	margin-left: 5.6em;
	margin-bottom: -5em;
	box-shadow: 3px 3px 3px rgba(128,128,128,.5);
	z-index: 100;
	border-radius: 50%;
}
		
/* quarter year : colspan 1 */
.quar:hover .big_img {
	display: block;
	margin-left: 2.3em;
	margin-bottom: -5em;
	box-shadow: 3px 3px 3px rgba(128,128,128,.5);
	z-index: 100;
	border-radius: 50%;
}
		
/* no picture */
.null:hover {
	box-shadow: inset 0px 0px 9px #00f;
}
            
/* graduate lists */
.classes, .classes2 { 
	height: 0;
	padding-top: 6px;
	padding-bottom: 5px;
	padding-left: 0;
	text-align: center;
	vertical-align: top !important;
	background: #CCFFCC;	
	line-height: 1.75;
}

.classes:hover { box-shadow: inset 0px 0px 9px #f00; }
.classes2:hover { box-shadow: inset 0px 0px 9px #00f; }
			
.info {
	margin-top: 1em;
	color: #000;
}

.info span { 
	font-variant: small-caps;
	color: #555;
}

.adjus { 
	height: 0;
	padding-top: 8px;
	padding-bottom: 4px;
	vertical-align: top !important;
}

.adjuncts, .adjuncts2 {
	height: 0;
	padding-top: 6px;
	padding-bottom: 5px;
	vertical-align: top !important;
	background: #e5dcba;	
	line-height: 1.75;
}

.adjuncts:hover { box-shadow: inset 0px 0px 9px #f00; }
.adjuncts2:hover { box-shadow: inset 0px 0px 9px #00f; }

.books {
	height: 233px;
	background: var(--nav-color);
	border: var(--nav-color) !important;
	text-align: center;
	vertical-align: top;
}

.books img {
	display: block;
	height: 125px;
	margin:1rem auto;
	color: var(--nav-color);
}

.books p {
	width: 150px;
	padding: 0 5px;
	font-variant: small-caps;
	text-align: center;
	text-wrap: balance;
	color: var(--header-font, #CCCCCC);
}

.books>td {
	vertical-align: top;
}

.flip-card {
  background-color: transparent;
  width: 150px;
  height: 145px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1.87s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(-180deg);
}

.grads {
	vertical-align: top;
	padding-top: 12px;
}
                       
.glink, .alink, .elink, .flink {
	padding: .75rem 2.3rem;
	color: #333;
	text-decoration: none;
}

.gpanel, .apanel, .epanel, .fpanel {
	display: none;
	margin-top: 6px;
	line-height: 1.5;
	padding: 0.5rem 0;
}

/* class colors  */
.original { color: #CCFFCC; }						
.bgoriginal { background-color: #CCFFCC; }						
.blue { color: blue; }																		/* 2008, 2012, 2017  */
.bgblue { background-color: blue; }												/* 2008, 2012, 2017  */
.red { color: red; }																			/* 2006, 2009, 2016  */
.bgred { background-color: red; }													/* 2006, 2009, 2016  */
.purple { color: #800080; }																/* 2010, 2018  */
.bgpurple { background-color: #800080; }									/* 2010, 2018  */
.green { color: #008000; }																/* 2004, 2007, 2011, 2019  */
.bggreen { background-color: #008000; }										/* 2004, 2007, 2011, 2019  */
.yellow {	color: #FFCC00; }	
.bgyellow {	background-color: #FFFF99; }	
.pink { color: #FF1493; }																	/* 2014, 2020  */
.bgpink { background-color: #FF1493; }										/* 2014, 2020  */
.orange { color: #d87600; }																/* 2013  */
.bgorange { background-color: #FF8C00; }									/* 2013  */
.navy { color: navy; }																		/* 2005  */
.bgnavy { background-color: navy; }												/* 2005  */

/* footer */
.footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	font-size: 1rem;
	padding: 6px 0 6px;
	z-index: 400;
	text-align: center;
	color: #E0E0E0;
	background: #565656;
	box-shadow: 0 -2px 3px #000000;
	cursor: pointer;
	border: 0;
}

.footer p {
	margin: 0.5em 0;
	line-height: 1.25;
	text-align: center !important;
}

.footer span {
	white-space: nowrap;
}

.fishbowl {
	margin-bottom: -7px;
	height: 21px;
	text-shadow: 0px 0px 2px #000000;
	cursor: pointer; 
	transition-property: all; 
	transition-duration: 0.6s; 
	transition-timing-function: ease; 
}

.xfishbowl:hover {
	transform: scale(10) translate(0, -10px);
} 

.fbreak { display: block; }

.legend, .multimedia {
	display: none;
	font-size: 12px;
	padding: 6px;
	background: #636363;
}
			
.toggle1, .toggle2 {
	display: inline-block;
	padding: 3px 0.87rem;
	font-size: 11px;
	font-weight: bold;	
	color: #E0E0E0;
	text-decoration: none;
}

.toggle1:hover, .toggle2:hover { 
	text-decoration: underline;
}

.toggle1.on, .toggle2.on {
  color: gold;
}

.ftitle {
	margin: 12px 0 6px !important;
	text-align: center;
	font-size: 0.87rem !important;
	font-weight: bold;
	color: #E0E0E0;
	text-shadow: 0px 0px 2px #000000 !important;
}

.navtitle {
	font-variant: small-caps !important;
	font-weight: bold !important;
	text-shadow: 0px 0px 2px #000000 !important;
	xline-height: 1;
}

.ndash { display: none; }
.break { display: inline; }	          

.symbols {
	width: 100%;
	font-size: 0.75rem !important;
	color: #E0E0E0;
	line-height: 1.25;
}
  
.m1 { color: #BBFFBB !important; text-shadow: 0px 0px 2px black !important; }

.boxes { padding: 8px 0 8px; line-height: 1.5rem; }

.box {
	margin-top: 8px;
	padding: 6px 8px 4px 6px;
	color: DarkSlateGrey;
	font-size: 0.6rem;
	border-radius: 2px;
	box-shadow: 0 0 2px #000000;
}

figure {
	display: inline-block;
	padding: 0 1rem;
}

figure img {
	height: 100px;
}

figure a {
	color: #E0E0E0;
	text-decoration: none;
}	

figure a:hover {
	text-decoration: underline;
}
        
/* media queries ****************************/
@media (min-width: 429px) { 

	/* desktop header */
	.fulltext { display: inline; }
	.acronym { display: none; }	          

	.fbreak { display: none; }
		
	.theme {
    top: 12px;
    right: 31px;
  }
  
  @media (min-width: 800px) { 
  	.navtitle {
	xline-height: 2;
		}

		.ndash { display: inline; }
		.break { display: none; }	          
  }

}