russia.css

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	font-family: verdana;
	margin: 80px;	
}

h1 {
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: center;
}

nav {
	width: 100%;
	text-align: center;
}

.above_item_link {
	text-decoration: none;
	margin: 0px;
}

p {
	text-align: center;
	font-style: italic;
	font-size: small;
}

.above_item {
	display: inline-block;
	position: relative;
	margin-right: 5px;
	/*border: solid white 5px;*/
	height: 25px;
	width: 25px;
}
.above_item:hover {
	opacity: .90;
	z-index: 5;
}

.time_container {
	position: relative;
	display: block;
	height: 48px;
	width: 100%;
	transition: height 250ms ease-out, opacity 100ms ease-in;
}
.time_container:hover {
	opacity: .90;
	z-index: 1;
}

[tooltip] {
  /*position: fixed;*/
  display: inline-block;
}
[tooltip]::after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  top: -3px;
  transform: translateX(-50%) translateY(-100%);
  background: black;
  text-align: center;
  color: #fff;
  padding: 4px 2px;
  font-size: 12px;
  min-width: 150px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  /*transform: scale(1);*/
}
[tooltip-position='left']::after {
  left: 0%;
  top: 50%;
  transform: translateX(-103%) translateY(-50%);
}
[tooltip-position='right']::after {
  left: 100%;
  top: 50%;
  transform: translateX(3%) translateY(-50%);
}
[tooltip]:hover::after {
  opacity: 1;
  transition: all 0.5s;
}

.date_range {
	position: absolute;
	height: 4px;
	background-color: white;
	transition: background-color 250ms ease-in;
}
.date_range:hover {
	background-color: black;
}

span {
	/*position: absolute;*/
	margin: -2.58px;
	display: inline-block;
	position: relative;
	font-style: italic;
	font-size: smaller;

}

.month::before {
	content: "";
	display: block;
	position: absolute;
	background: black;
	bottom: 1.3em;
	left: -2px;
	height: 5px;
	width: 1px;
}

.circle {
	position: absolute;
	height: 5px;
	width: 5px;
	background-color: white;
	border-radius: 50%;
	transition: background 100ms ease-in;
}
.circle:hover{
	background: black;
}

.nav_button {
	text-align: center;
	border: solid white 2px;
	padding: 5px 2%;
	margin: 2px;
	font-style: bold;
	color: white;
	display: inline-block;
	transition: transform 100ms ease-in;
}
.nav_button:hover {
	transform: scale(1.05);
}

.fixed_header {
	background: white;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	z-index: 98;
}

#all_years {
	padding-top: 150px;
}

.cal {
	bottom: 0;
	padding-bottom: 25px;
	z-index: 1;
	background: white;
	position: sticky;
	border-top: 1px solid black;
}

.above_container {
	min-height: 30px;
	font-size: 0;
}

/*CATEGORY COLORING */
.MAJOR { background: #dd2e44; }
.INVESTIGATIONS { background: #573e3f; }
.RUSSIANS { background: #065535; }
.TRUMP { background: #FF4D00; }
.COHEN { background: #125876; }
.MANAFORT { background: #996699; }
.KUSHNER { background: #133337; }
.JR { background: #33735f; }
.FLYNN { background: #f97253; }
.PAPADOPOULOS { background: #000066; }
.PAGE { background: #006666; }
.SESSIONS { background: #8e8e8e; }

/* must be below category coloring*/
.active {
	background: white;
	color: black;
	border-color: rgba(0, 0, 0, .25);
	transition: background 100ms ease-in;
}
.active:hover {
	border-color: rgba(0, 0, 0, .75);
}


#y_2001, #y_2004, #y_1998, #y_1999 {
	display: inline-block;
	/*float: left;*/
	width: 25%;
}

.go_home {
	color: white;
	display: flex;
	justify-content: center;
	align-content: center;
	padding: 10px 20px;
	margin: 10px;
	background: green;
	position: absolute;
}

.go_home:hover {

}

.go_home:hover a {
	display: inline-block;
}

.go_home a {
	display: none;
	text-decoration: none;
	color: white;
}