*{font:1em ;color:#bbbbbb;font-family:sans-serif;}

html,body{
	margin:0.2em 0 0.4em;
	padding:0;
	font-size:14px;
	overflow-x: hidden;
}
body{
	/*
	background-image: url('../images/jb.dark.jpeg');
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position:center;
	background-size:contain;
	*/
	background-color:#000;
	text-align:center;
}
#main {
/*
	position:relative; 
	top:0px; 
	left:0px; 
	width:100%; 
	height:100vh;
*/
    min-width: 100%;
    min-height: 100%;
    background-color: #000;

    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;	
	
}
.navigation {
    list-style: none;
    background: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align:left;
    padding-top:3em;
    z-index: 0;
}
.nav-item {
	/* non-critical appearance styles */
	width: 15em;
	border: 0;
	color:#bbbbbb;:
	text-align:left;
	margin-bottom:1.3em;

}
.nav-item a {
	text-decoration:none;
	font-size:1.8em;
	display: block;
	font-style:italic;
	font-weight:bold;
}
.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
    position: fixed;
    top: 2.7em;
    left: 2.1em;
    z-index: 2;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-image: url("../images/menu.png");
    background-size: contain;
}
.nav-trigger:checked + label {
    left: 19em;
}

.nav-trigger:checked ~ #main {
    left: 17em;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.paddleft {
	padding-left:1em;
}
#contents {
	
	padding-top:0.5em;
}

.item {
	border:3pt solid #555;
	margin:1.5em;
	background: rgb(54, 25, 25); /* Fall-back for browsers that don't
                                  support rgba */
        background: rgba(54, 25, 25, .5);
	padding: 1em;	
}

.item p {
	text-align:left;
}
.item ul {
	text-align:left;
}
.item li {
	margin-top:0em;
}
.leftalign {
	text-align:left;
	margin:0 auto;
	width:80%;
	font-size:2em;
}
.wide {
	max-width:100%;
}
.horcenter {
	margin-left: 1.5em;
	margin-right: 1.5em;
}

input[type=submit] {
	padding: 2px 2px;
    	margin: 8px 0;
	color: #000;
	font-size:0.8em;
}
input[type=text] {
	padding: 2px 2px;
    	margin: 8px 0;
    	box-sizing: border-box;
	background-color: #000;
	font-size:0.8em;
}
input[type=password] {
	padding: 2px 2px;
    	margin: 8px 0;
    	box-sizing: border-box;
	background-color: #000;
	font-size:0.8em;
}

h1 {
	font-size:3em;
	font-weight:bold;

}
.emph {
	text-decoration:underline;
	font-style:italic
}

.library {
	width:12em;
	height:25em;
	float:left;
	font-size:2em;
	margin-left:2.5em;
}
.library p{
	text-align:center;
	font-size:1em;
}
.library h3{
	font-weight:bold;
	text-align:center;
	font-size:1em;
}
.library a{
	text-decoration:none;
}
.thumb{
	width:100%;
}
.Overlay {
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100%;
	overflow:hidden;
	background: rgb(54, 25, 25); /* Fall-back for browsers that don't
                                  support rgba */
        background: rgba(54, 25, 25, .5);
	z-index:5000;
	overflow-y:visible;
}
.CenterOverlay {
	position:fixed;
	top: 50vh;
	left:50%;
	width:26em;
	height:12em;
	margin-top: -6em;
	margin-left:-13em;
	border: 1em solid red;
	background-color: black;
	text-align:center;
}
.LibraryItem {
	position:absolute;
	top: 1em;
	left:1em;
	width:82%;
	/*height:12em;*/
	/*margin-top: -6em;*/
	/*margin-left:-13em;*/
	margin: 0 auto;
	border: 1em solid #bbbbbb;
	background-color: #361919;
	text-align:center;
	padding:1em;
	font-size:2em;
	/*overflow-x:hidden;
	overflow-y:visible;*/
}
.topright {
	position:absolute;
	top:0;
	right:0;
}

#videoFrame {
	width:95%;
	/*height:15em;*/
	margin-top:1em;	
	position:relative;
}
h3{
	font-size: 2.5em;
}