#container	{
	width: 100%;
	margin: 0;
	padding: 0;
}	

#container:before	{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}	

#content	{
	margin-left: .5rem;
	margin-right: 6rem;
	margin-bottom: 1.5rem;
}

h1	{
	font-size: 1.1rem;
	margin: 0;
	margin-left: .5rem;
	padding-top: .5em;
	padding-bottom: .5em;
	width: calc(100% - 9rem);
	
}	


h2	{
	font-size: .8rem;
	margin-top: 0;
	hyphens: auto;
}	


h3	{
	font-size: .8rem;
	font-weight: bold;
}	


#logo	{
	width: 5rem;
	position: fixed;
	top: .7rem;
	right: 2.2rem;
	z-index: 10;
}

#logo img	{
	border: 2px solid #f9fae5;
	border-radius: 50%;
}	

/*NAVIGATION*/
#menu_toggle	{
	display: none;
}
	
nav	{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 5.5rem;
	font-size: .8rem;
	z-index: 20;
	display: none;
}
	
#menu_toggle:checked ~ nav	{
	display: block;
}	

.hamburger {
	display: block;
	height: 12px;
	width: 1rem;
	position: fixed;
	top: .5rem;
	right: .5rem;
	cursor: pointer;
	z-index: 200;
	transition: all 1s cubic-bezier(.19, 1, .22, 1);
}

.hamburger::before	{
	content: "";
	position: absolute;
	top: -.5rem;
	right: -.5rem;
	bottom: -.5rem;
	left: -.5rem;
}	

.stripe {
	position: absolute;
	display: block;
	width: 1rem;
	height: 2px;
	left: 0;
	transition: all .6s cubic-bezier(.5, .1, 0, 1.2);
}

.stripe-1 {
	top: 0;
}

.stripe-2 {
	top: 5px;
}

.stripe-3 {
	top: 10px;
}

#menu_toggle:checked ~ label .stripe-1 {
  top: 0;
  width: 16px;
  height: 3px;
  transform: translateX(-5px) rotate(-45deg) translateY(7px);
}

#menu_toggle:checked:checked ~ label .stripe-2 {
  opacity: 0;
}

#menu_toggle:checked:checked ~ label .stripe-3 {
  top: 10px;
  width: 16px;
  height: 3px;
  transform: translateX(-5px) rotate(45deg) translateY(-7px);
}

nav ul	{
	list-style: none;
	padding-top: 2rem;
	padding-left: .5rem;
	padding-right: .5rem;
}

/*TIMELINE*/

#timeline	{
	width: 5.5rem;/*same as container's border*/
	font-size: .78rem;
	top: 7rem;
	right: 0;
}

#timeline label	{
	padding: .6em .5em .6em;
	text-align: left;
	right: 0;
	font-family: 'Lora', serif;
	font-weight: bold;
	text-transform: uppercase;
}

#timeline input:checked ~ .timeline{
	height: calc(100vh - 17.5rem - 4px);
}

/*TIMELINE DETAILS*/

#timeline .date a	{
	left: 2.5rem;
	font-family: 'Lora', serif;
	font-weight: bold;
}

#timeline .date:before	{
	left: calc(1rem + 1px);
	top: calc(50% - 1px);
}
	
#timeline .line	{
	left: 1.5rem;
}	
	
/*COLORS FOR EARLY THEME*/

.early .stripe	{
	background: #c3952d;
}	

.early nav	{
	background: #5e3110;
}	

.early:before	{
	border-right: 5.5rem solid #5e3110;
}

.early #timeline	{
	border-bottom: 1px solid #c3952d;
}

.early #timeline #early label, .early #timeline #classic label, .early #timeline #postwar label 	{
	border-top: 1px solid #c3952d;
}

/****************************/
		
/*COLORS FOR CLASSIC THEME*/

.classic:before	{
	border-right: 5.5rem solid #28377b;
}

.classic .stripe	{
	background: #c3952d;
}	

.classic nav	{
	background: #28377b;
}	

.classic #timeline	{
	border-bottom: 1px solid #c3952d;
}

.classic #timeline #early label, .classic #timeline #classic label, .classic #timeline #postwar label 	{
	border-top: 1px solid #c3952d;
}

/****************************/

/*COLORS FOR POSTWAR THEME*/

.postwar:before	{
	border-right: 5.5rem solid #c3952d;
}

.postwar .stripe		{
	background: #28377b;
}	

.postwar nav	{
	background: #c3952d;
}	

.postwar #timeline	{
	border-bottom: 1px solid #28377b;
}

.postwar #timeline #early label, .postwar #timeline #classic label, .postwar #timeline #postwar label 	{
	border-top: 1px solid #28377b;
}

/****************************/

/*BICENTENNIAL LOGO*/

#bicentennial_logo	{
	width: 3.5rem;
	right: 1rem;
}	

/***************************/
/*CONTENT*/

#main	{
	top: 1rem;
	left: 0;
	padding: 1rem;
	z-index: 20;
	font-size: .8rem;
}

#main p	{
	line-height: 1.5;
}	

.img_left, .img_right	{
	margin: 0 0 .5rem 0;
}

#special	{
	margin-top: 1rem;
}	/*gallery photo on the About page*/

.portrait, .landscape	{
	width: 100%;
}	

/*********************/
/*OBJECT PAGE*/

.index	{
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
	
	-webkit-column-gap: 1.5rem; /* Chrome, Safari, Opera */
	-moz-column-gap: 1.5rem; /* Firefox */
	column-gap: 1.5rem;
}

.artifact	{
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	page-break-inside: avoid; /* Firefox */
	break-inside: avoid; /* IE 10+ */
	margin-bottom: 1.5rem;
 }	
 
 /*TODAY PAGE*/
 
#satellite_map	{
	overflow: auto;
	-webkit-overflow-scrolling: touch;/*enable scrolling on iPhone and iPad*/
}

#satellite_map img	{
	width: 200%;
	height: auto;
}