@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');
.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, select, option {font-family: 'Arimo', sans-serif;}
#mainContent a{color:#990033;}
#mainContent a:hover{color:#303030;}

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

body {
	width:410px;
    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 {
    /*background-color:white;*/
	position:absolute;
}

#mainContent {
	box-sizing: border-box;
	width:409px;
	padding-left:43px;
	padding-left:43px;
	border-left:3px solid #808080;
	border-top:3px solid #808080;
	border-right:3px solid #cccccc;
	border-bottom:3px solid #cccccc;
	height:500px;
}

.titleBox {
	box-sizing:border-box;
	background-color:#990033;
	width:409px;
	height:50px;
	color:#ffffff;
	margin-top:-90px;
}

#title {
	position:absolute;
	font-family: 'Oswald', sans-serif;
	padding-left:10px;
	font-size:1.80rem;
	font-weight:500;
	top:-15px;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #bfbfbf;
}
::-webkit-scrollbar-thumb {
    background: #505050;
}
::-webkit-scrollbar-thumb:hover {
    background: #404040;
}
/*Main Content Area*/

/*Slide Menu*/
#menuButton {
	cursor:pointer;
	float:right;
	font-size:45px;
	margin-right:10px;
	margin-top:2px;
}

#menu {
	width:0px;
	height:500px;
	box-sizing: border-box;
	background-color:#ffffff;
	position:absolute;
	z-index:200;
	right:0px;
	border:0px solid #303030;
	padding:0px;
	transition:width .5s, padding .5s, border .5s;
	float:right;
	overflow:hidden;
}

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

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

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

.menuFocus:focus{
	outline:none;
}

a{
	color:#000000;
}

.subMenuItem {
	width:270px;
	color:#303030;
	margin-left:20px;
	font-family: 'Arimo', sans-serif;
	font-size:15px;
}

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

#searchBar{
	font-family: 'Arimo', sans-serif;
	width:100%;
	height:30px;
	font-size:15px;
	border:none;
	border-bottom:1px solid #808080;
	padding-left:5px;
	padding-right:15px;
	margin-left:-10px;
	outline:none;
}
/*Slide Menu*/

/*Course Individualization*/
.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*/
footer {
	border:1px solid #808080;
	width:409px;
	box-sizing:border-box;
}

#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: 80%;
    display:inline-block;
    margin-top:auto;
    margin-bottom:auto;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #303030;
    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;
}

.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:#303030;
}

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

/*Playbar and Close Captioning*/

/*Navigation*/
.cnpButton {
	border:none;
    background-color:#990033;
    color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    outline: 0 none;
	padding:30px 2px 30px 2px;
	text-decoration:none;
	transition: background-color .2s;
}

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

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

#previous {
	border-radius:0px 7px 7px 0px;
	font-size:30px;
	font-weight:bold;
	position:relative;
	z-index:200;
}

#next {
	border-radius:7px 0px 0px 7px;
	font-size:30px;
	font-weight:bold;
	position:relative;
	z-index:200;
	left:337px;
}

.narrator {
	color:#990033;
}
/*Navigation*/

@media screen and (min-width:690px){
    body {width:685px;}
	.slidecontainer {width:70%;}
	#mainContent {width:684px;}
	#next {left:612px;}
	.titleBox{width:684px;}
	#title {font-size:2.4rem;top:-34px;}
	footer {width:684px;}
}

@media screen and (min-width:960px){
    body {width:955px;}
	#mainContent {width:954px;}
	.slidecontainer {width:60%;}
	#next {left:882px;}
	.titleBox{width:954px;}
	#title {font-size:2.6rem;top:-39px;}
	footer {width:954px;}
}