div.videoContainer{
	width:100%;
	margin:auto;
	background-color:#f8f8f8;
}

/* Some general typography */
.videoContainer h1,
.videoContainer h2,
.videoContainer h3,
 p{
	font-family: Palanquin;
}

.videoContainer h1,
.videoContainer h2,
.videoContainer h3{
	color: #165a7d;
	font-weight: bold;
	text-transform: uppercase;
}

.videoContainer h2{
	font-size: 24px;
	line-height: 24px;
}

.videoContainer h3{
	font-size: 20px;
}

/* for responsive video */
.yt-container{
	position:relative;
	width:100%;
	padding-bottom:56.25%;
	height:0;
}

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

#monitorCanvas{
	background-color:#444;
}


.map-watched{
	height:1em;
	width:2px;
	background-color:#165a7d !important;
	display:inline-block;
}

.map-current{
	height:1em;
	width:2px;
	background-color:#fff;
	display:inline-block;
}

.map-unwatched{
	height:1em;
	width:2px;
	background-color:#222;
	display:inline-block;

}


.dpm-content{
	display:flex;
	flex-direction:row;
}

.dpm-content h1,h2{
	font-weight: 600;
	color:navy;
}

.dpm-content h1{
	font-size:32px;
}

.dpm-content h2{
	font-size:28px;
}



.videoDiv{
	flex:48%;
	min-height:340px;
}

.playlistDiv{
	flex:48%;
	margin-left:1em;
	background-color: #fff;
	padding:0.5em;
}


.videoListing{
	margin-bottom:0.25em;
}

@media (max-width:800px) {
	.dpm-content{
/*		background-color:#fee;*/
		flex-direction:column!important;
	}

	.videoDiv{
		flex:100%
	}
  }



  /* Playlisat rollups */
.playlistRollup{
	margin-left:1em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	display:none;	/* Initially hidden */
}

.rollupButton{
	background-color:#ddd;
	width:100%;
	text-align:left;
	margin-bottom:0;
	color:#333;
}

.rollupButtonActive{
	background-color:#aaa;
}

/* Space the buttons out a little better when in a roll-up as they'll be crammed in */
.playlistRollup button, button{
	margin-bottom:3px;
}

/*  ===================================
    Buttons
    Replaces the nectar button
    =================================== */


/* Used in red buttons on additional teaching page */

div.oel_redbutton:hover
{
	background-color:var(--wp--preset--color--vivid-red)!important;
	color:#fff!important;
}

div.oel_redbutton{
	border-color:#c00!important;
    border-style:solid;
    border-width:2px;
	color:#c00!important;
    visibility: visible;
	background-color:#fff!important;
    
	padding: 0.667em 1.333em;
	font-weight: bold;
    
    cursor: pointer;
    display: inline-block;
    
    transition-property:all;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    margin:3px;
}



    a.dpm_button,
    div.dpm_button{
        border-color: rgba(22, 90, 125, 0.75);
        border-style:solid;
        border-width:2px;
        color: rgb(22, 90, 125);
        visibility: visible;
        background-color: transparent;
    
        font-size: 14px;
        padding: 8px 14px;
        font-family: Palanquin;
        font-weight: 700;
    
        cursor: pointer;
    
        display: inline-block;
    
        transition-property:all;
        transition-delay: 0s;
        transition-duration: 0.3s;
        transition-timing-function: ease;
        margin:3px;
    }
    
    a.dpm_button:hover,
    div.dpm_button:hover
    {
        color:#fff;
        border-color: #165a7d;/*!important;*/
        background-color: #165a7d;/*!important;*/
    
    }

    a.dpm_button i,
    div.dpm_button i{
        font-size: 16px;
        color: rgb(22, 90, 125)!important;
        margin-left:6px;
        font-weight: 700;
    }

    a.dpm_button:hover i,
    div.dpm_button:hover i{
        color:#fff!important;
    }