@import url('https://fonts.googleapis.com/css?family=Oswald|Arimo|Arimo&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');
@import url('https://use.fontawesome.com/releases/v5.7.0/css/all.css');
.gFont1 {font-family: 'Oswald', sans-serif;}
.gFont2 {font-family: 'Arimo', sans-serif;}

#mainContent h1, h2, h3, h4, h5, h6 {font-family: 'Oswald', sans-serif;font-weight:100;}
#mainContent button, input, p, ul, a, textarea {font-family: 'Arimo', sans-serif;}
#mainContent a{color:#990033;}
#mainContent a:hover{color:#303030;}

html, body{
    font-size:16px;
    height:100%;
	color: #303030;
	outline:none;
	font-family: 'Arimo', sans-serif;
}

body {
	width:100%;
    margin:0 auto;
}

#load{
    position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
  background: url(../img/required/USBE_CNP_Logo.gif) center no-repeat #fff;
  background-size: 350px;
}

#contents {
	position:absolute;
	width:100%;
}

#gTrans{
	width:100%;
	clear:both;
	padding-top:5px;
}
/*Do not change anything above this line*/




/*Main Content Area*/
#mainContent {
	box-sizing: border-box;
	width:100%;
	background-color: #262626;
	border:1px solid #262626;
	float:left;
}

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #888;
}
::-webkit-scrollbar-thumb {
    background: #262626;
}
::-webkit-scrollbar-thumb:hover {
    background: #262626;
}

.vidStyle{
	width:100%;
}

.containArea{
	padding:5px;
}

#contentArea{
	box-sizing:border-box;
	width:100%;
	height:450px;
	background-color:#fff;
	padding:5px;
}

#contentQRCA{
	position:absolute;
}
/*Main Content Area*/

/*Title*/
.titleBox {
	box-sizing:border-box;
	color:white;
	width:100%;
}

#title {
	padding-left:15px;
	font-size:2rem;
	font-weight:500;
	margin-top:0px;
	text-decoration:underline;
	margin-bottom:5px;
}

/*Title*/

/*Previous and Next Buttons*/
#preNext{
	position:absolute;
	z-index:5;
	top:0px;
	left:0px;
	width:100%;
	background-color:#000000cc;
	color:#fff;
}

.vidSldNav{
	position:absolute;
	top:40%;
	width:100%;
	margin:auto;
	text-align:center;
}

#previous, #replay, #next{
	color:#262626;
	background-color:#fffc;
	border-radius:100px;
	padding:5px;
	cursor:pointer;
}

#previous:hover, #replay:hover, #next:hover {
	background-color:#fff;
}

#previous{font-size:40px;transform:rotate(180deg);}
#next{font-size:40px;}
#replay{font-size:70px;}

/*Previous and Next Buttons*/

/*Slide Menu*/
#menu {
	width:100%;
	height:200px;
	box-sizing: border-box;
	background-color:#ffffff;
	z-index:200;
	right:0px;
	border:5px solid #bfbfbf;
	float:left;
	overflow:auto;
}

.topicHeader {
	box-sizing:border-box;
	background-color:#bfbfbf;
	padding:15px 0px 15px 5px;
	width:100%;
	color:#262626;
	font-weight:900;
	cursor:pointer;
}

.topic {height:0px;overflow:hidden;transition:height .5s}
.topicHeader i {font-size:14px;padding-right:5px;}
.topicCaret{transition:transform .5s;}

#menu table{
	width:95%;
	margin:0 auto;
}

.tabBor{border-bottom:1px solid #808080;}
.tabCen {text-align:center;}

.navIconIn {
	color:#aaa;
	font-size:17px;
}

.navIconCom {
	color:#008a3e;
	font-size:17px;
}

.menuItem {
	width:100%;
	color:#262626;
	outline:none;
	font-family: 'Arimo', sans-serif;
	font-size:15px;
}

.menuItem:hover {
	text-decoration:underline;
	color:#990033;
	cursor:pointer;
}

.menuFocus:focus > .menuItem{
	text-decoration:underline;
	color:#990033;
}

.menuFocus:focus{
	outline:none;
}

a{
	color:#000000;
}
/*Slide Menu*/

/*Course Buttons*/
.crButton {
	background-color:#990033;
	color:#ffffff;
	border:none;
	transition:background-color .2s;
	padding: 6px 25px;
	cursor:pointer;
}

.crButton:hover{
	background-color:#303030;
}

.crButton:active{
	background-color:#303030;
}

/*Course Individualization*/

/*Playbar and Close Captioning*/
#closeCap {
	border:1px solid #303030;
	width:100%;
	box-sizing:border-box;
	background-color:#fff;
}

#cc {
	padding:0px 10px;
	font-family: 'Arimo', sans-serif;
	font-size:15px;
}

.controlContainer {
    width:100%;
    clear:both;
    text-align: center;
	padding-top:10px;
	padding-bottom:10px;
}

.navContainer {
    margin-left:5px;
    margin-right:5px;
    margin-top:-30px;
}

.slidecontainer {
    width: 70%;
    display:inline-block;
    margin-top:auto;
    margin-bottom:auto;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #fff;
    outline: none;
    -webkit-transition: .2s;
    border:none;
    margin-left:0px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width:20px;
    height:20px;
    border-radius: 100%;
    background:#990033;
    cursor: pointer;
    box-shadow:1px 1px 4px rgb(90,90,90);
    margin-left:0px;
}

.slider::-moz-range-thumb {
    width:20px;
    height:20px;
    border-radius: 100%;
    background:#990033;
    cursor: pointer;
    box-shadow:1px 1px 4px rgba(13,13,13,0.65);
    color:#FFFFFF;
    margin-left:0px;
}

#sldEnd{color:#fff;}

.playerIcon {
    border:none;
    background-color:#990033;
    padding:2px 7px 2px 7px;
    display:inline-block;
    font-size:18px;
    color:#FFFFFF;
    border-radius:5px;
    cursor: pointer;
    transition: background-color .2s;
}

.playerIcon:hover {
    background-color:#fff;
	color:#990033;
}

.playerIcon:active {
    background-color:#fff;
	color:#990033;
}

/*Playbar and Close Captioning*/

@media screen and (min-width:750px){
	#mainContent{width:70%;}
	#preNext{width:70%;}
	#menu{width:30%;}
}

@media screen and (min-width:1200px){
	body{width:1200px;margin:0 auto;}
	#contents{width:1200px;}
	#mainContent{width:900px;}
	#preNext{width:900px;}
	#menu{width:300px;}
	#previous, #next{font-size:60px;}
	#replay{font-size:90px;}
}