#block-top{
  display: block;
  position: fixed;
  width: 90%;
  height: 3em;
  min-width: 400px;
  max-width: 800px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  background-color: #fff;
  z-index: 900;
}

#menu{
	display: block;
	position: fixed;
	width: 90%;
	min-width: 400px;
	max-width: 800px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	padding: 0;
  margin-top: 3em;
	z-index: 1000;
}

#menu ul{	
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	height: 3em;
	float: right;
	pointer-events: none;
	transition: .4s;
}

#menu-switch{
	cursor: pointer;
}

#menu-switch input{
	display:none;
}

input + ul{
	width: 3.4em;
}

input:checked + ul{
	width: 100%;
}

#menu li{
	float: left;
	height: 100%;
}

#menu li a{
	display: block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	
	color: #fff;
	text-align: center;
	line-height: 3em;
	padding: 0 2em;
	text-decoration: none;
	
	pointer-events: auto;
}

#menu li a:hover{
	background-color: #000;
}

#banner{
	font-size: 200%;
	color: #333;
	text-align: center;
	line-height: 1.5em;
	padding: 0 1em;
	font-family: Bookman Old Style, Serif;
	background-color: #ddd;
}

@media (max-width: 730px){
  #banner{
    display: none;
  }
}

#menu #menu-icon{
	float: right;
	width: 3.4em;
	height: 3em;
	padding: 0 0;
	
	pointer-events: auto;
}


#menu-icon div{
	width: 2.8em;
	height: 0.4em;
	background-color: #fff;
	margin: 0.48em 0.3em;
}


#menu-spacer{
	height: 80px;
}

img, video, audio{
	width: 90%;
	min-width: 400px;
	max-width: 800px;
	
	display: block;
	margin-left: auto;
	margin-right: auto;
	
	padding: 10px;
}

.gen-container{
  width: 90%;
  min-width: 400px;
  max-width: 800px;
  
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.gen-container a img{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
#portrait{
  width: 20%;
	min-width: 50px;
	max-width: 200px;
	
  float: left;
	
  padding-left: 0px;
  padding-top: 0px;
	padding-right: 10px;
  padding-bottom: 0px;
}

#header{
  width: 50%;
	min-width: 100px;
	max-width: 300px;
	
  float: left;
	
  padding-left: 0px;
  padding-top: 0px;
	padding-right: 10px;
  padding-bottom: 0px;
}

h1, h2, h3{
	text-align: center;
}

h1, h2, h3, p{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#greeting{
  font-family: "Courier", monospace;
  color: #333;
}

.image-caption{
	margin: auto;
	width: 90%;
	min-width: 400px;
	max-width: 800px;
	
	border-bottom: 1px solid #000000; 
	margin-bottom: 20px;
}

#status-bar{
	margin: auto;
	width: 90%;
	min-width: 400px;
	max-width: 800px;
	
	border-top: 1px solid #000000; 
	margin-top: 20px;
  
  font-size: small;
}

.center-unknown{
	text-align:center;
}

.youtube-container{
	margin: auto;
	display: block;
	width: 90%;
	min-width: 400px;
	max-width: 800px;
  padding: 10px;
}

.youtube-container div{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;	
}

.youtube-container iframe{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

a:link {
	color: #000000;
	text-decoration: underline;
}

a:visited {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

a:active {
	color: #000000;
	text-decoration: underline;
}