html, body {
	margin:0;
	background:#191820;
	color:white;
    font-family: 'Roboto',Helvetica,Arial,sans-serif;
}

a{ 
    color:#AAAAFF;
}

#header {
    margin:0;
	height:48px;
	width:100%;
	position:fixed;
    background:#191820;
    padding-top:5px;
    padding-bottom:5px;
}

#selector {
    margin:0;
    margin-left:15%;
    height:48px;
    padding:0;
    padding-top:90px;
    background:#191820;
}

.selector-button{
    text-decoration: none;
    margin-right:10px;
    padding:10px;
    color:white;
}

.selector-button:hover{
    background:#333;
    border-radius: 6px 6px 0 0;
    border-bottom:3px solid white;
}

#title img{
    height:42px;
	padding-top:2px;
	margin-left: 15%;
}

#content{
	margin-left: 15%;
	margin-right:15%;
	padding:0;
	font-family: 'Roboto',Helvetica,Arial,sans-serif;
    color:white;
	margin-bottom:10%;
}

.listing {
  display: grid;
  grid-template-columns: repeat(auto-fit, 12rem);
  grid-column-gap:20px;
  grid-row-gap:5px;
}

.item {
  display: block;
  background-color: #191820;
  color: #4a4a4a;
  width: 100%;
  height: 100%;
  text-align: justify;
  cursor: pointer;
  justify-self: center;
  padding: 10px;
  border-radius:6px;
  text-decoration:none;
}

.item:hover {
  background-color: rgb(28, 37, 69);
}

.pic{
    background-position:center;
    width:100%;
    height:144px;
    background-size:cover;
}

.caption {
    font-weight:bold;
    font-size:14px;
    color:white;
    text-align: left;
}

.summary {
    font-size:12px;
    color: #AAA;
    text-align:left;
} 

.lang {
    font-size:16px;
}

.selector-popup{
    display:none;
    width:200px;
    padding:60px;
    background:#FF9933;
    color:white;
    position:fixed;
    top:calc(50% - 110px);
    left:calc(50% - 130px);
    text-align: center;
    border-radius:10px;
}


.video-item {
    font-size:14px;
}

.video-caption {
    font-size:14px;
}

.video-btn a{
    background:#3333FF;
    padding:8px;
    text-decoration: none;
    color:#CCC;
    display:block;
    margin:3px;
    border-radius:2px;
}

.video-btn a:hover{
    background:orange;
    color:white;
}

.l-title{
    height:58px;
}

.l-title h1{
    font-family: 'Bitter',Helvetica,Arial,sans-serif;
    color:#ffaa00;
    font-size:18pt;
    display:inline;
}

.l-outline{
    height:150px;
    border:1px solid #333344;
    border-radius:8px;
    margin-bottom:2em;
    background:#222233;
}

.l-outline img{
    height:150px;
    float:left;
    margin-right:25px;
    border-radius:8px 0 0 8px;
    border-right:4px solid #223322;
}

.l-outline div{
    padding-right:25px;
    margin-left:16px;
    height:120px;
}

.l-outline-details{
    padding:15px;
}

.l-lesson-detail{
    background:#0000FF;
    padding:10px;
    border-radius:3px;
}

.l-content{
    font-family: 'Bitter',Helvetica,Arial,sans-serif;
    color:#BBB;
    font-size:12pt;
}

.l-content h2{
    color:#bb6600;
    font-size:18pt;
}

.l-content li{
    line-height: 2em;
}

.l-content p{
    width:75%;
}

.l-button, .l-button-download, .l-button-inactive{
    float:right;
    text-decoration:none;
    padding:12px;
    background:#AAA;
    color:white;
    margin-left:18px;
    border-radius:6px;
    font-size:16px;
}

.l-button{
    background:#ee8822;
}

.l-button:hover{
    background:orange;
}

.l-button-download{
    background:green;
}

.l-button-download:hover{
    background:#44AA44;
}

.l-video{
    padding:24px;
    border-radius:3px;
}

.l-video:hover{
    background:#222233;
}

.l-video-title{
    font-size:18pt;
     color:#AAA;
}

.l-video-blurb{
    font-size:14pt;
    padding-bottom:25px;
    
}

.l-video-frame{
    height:300px;
    width:600px;
    margin-left:calc(50% - 300px);
    border:2px solid #444;
    border-radius:6px;
}

.l-video-hr{
    margin-top:25px;
    margin-bottom:25px;
    height:1px;
    border:none;
    background:#333;
}