.main{
	width: 99vw;
	height: 98vh;
	margin: 0;
	background-image: url(../interface/Background.png);
	background-size: 100% 100%;
	position: absolute;
    overflow: hidden;
    z-index:-100;
}

.logo{
	position: absolute;
	width:120px;
	height:120px;
	background-image: url(../interface/OPM_Logo_120x120_60x60.png);
	background-repeat: no-repeat;
	top:-15px;
	left:-20px;
	border-style: none;
	overflow: hidden;
	z-index:-80;
	transform:scale(0.60);
}

.topbarcenter{
	position: absolute;
	width:100vw;
	height:57px;
	background-image: url(../interface/navbar_Top_h57.png);
	background-repeat: repeat-x;
	top:12px;
	left:0px;
	border-style: none;
	overflow: hidden;
	z-index:-89;
}

.bottombar{

	position: absolute;
	width:90vw;
	height:50px;
	background-image: url(../interface/navbar_Btm_h50.png);
	background-repeat: repeat-x;
	border-top-right-radius: 15px;
    border-top-left-radius: 15px;
	bottom:0px;
	padding: 0px 20px;
	left: 50%;
	margin-right: -50%;
    transform: translate(-50%,0%);
	z-index:-50;
}

.coursetitle{
	position: absolute;
	width:700px;
	height:50px;
	color:#000000;
	top:4px;
	left:85px;
	z-index:0;
	vertical-align: middle;
	line-height: 50px;     
}

.moduletitle{
	width:60%;
	position: absolute;
	height:50px;
	color:#000000;
	top:37px;
	left:85px;
	z-index:0;
	vertical-align: middle;
	line-height: 8px;
}

.pagecounter{
	position: absolute;
	width:100px;
	height:30px;
	bottom:7px;
	right:60px;
	transform:scale(.75);
}

.textcontainer{
    position:absolute;
    top:65px;
	left: 1vw;
    border-radius: 25px;
    background-color: #ebf0f3;
    margin-top:20px;
    padding: 20px; 
    width: 90vw;
    height: calc(100% - 185px); 
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,.4);
    z-index: -91;
}

.map_textcontainer{
    position:relative;
    top:65px;
	left: 50%;
    transform: translate(-50%,0%);
    border-radius: 25px;
    margin-top:20px;
    padding: 20px; 
    width: 90vw;
    height: calc(100% - 185px); 
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,.4);
    z-index: -91;
}

.map{
    z-index:-90;
    position:absolute;
    left:50%;
    top:0;	
    transform: translate(-50%, 0%);
    height: 100%; 	
}

.textcontainer_fulltop{
    position:absolute;
    top:65px;
    left:75px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    background-color: rgba(255,255,255,.55);
    padding: 20px; 
    width: calc(100% - 180px);
    height: calc(40% - 170px); 
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,.4);
    z-index: -91;
}

.igraphic_fullbottom{
	position:absolute;
	bottom: 32px;
	left: 75px;
	width: calc(100% - 180px);
	height: 70%;
	z-index: -92;
}

.textcontainer_narrow{
    position:absolute;
    top:65px;
    left:75px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    background-color: rgba(255,255,255,.55);
    
    padding: 20px; 
    width: 25vw;
    height: calc(100% - 170px); 
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,.4);
    z-index: -91;
}

.textcontainer_extranarrow{
    position:absolute;
    top:65px;
    left:75px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    background-color: rgba(255,255,255,.55);
    padding: 20px; 
    width: 15vw;
    height: calc(100% - 170px); 
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,.4);
    z-index: -91;
}

.textcontainer_wide{
    position:absolute;
    top:65px;
    left:75px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    background-color: rgba(255,255,255,.55);
    padding: 20px; 
    width: 60vw;
    height: calc(100% - 170px); 
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,.4);
    z-index: -91;
}

.igraphic_narrow{
	position:absolute;
	top: 50px;
	right: 3vw;
	width: 25%;
	height: calc(100% - 170px); 
	z-index: -90;
}

.igraphic{
	position:absolute;
	top: 50px;
	right: 2vw;
	width: 35%;
	height: calc(100% - 70px); 
	z-index: -90;
}

.gifgraphic{
	position:absolute;
	top: 0px;
	right: 3vw;
	width: 32%;
	height: 100%; 
	z-index: -90;
}

.telecon_text{
	position:absolute;
	margin: auto;
	top: 3vw;
	right: 2vw;
	width: 40%;
	height: calc(100% - 70px); 
	z-index: -90;
	overflow:auto;
}

#pagegraphic{
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    max-width:100%;
	max-height:65%;
}

#tallpagegraphic{
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    max-width:100%;
	max-height:85%;
}

#animationgraphic{
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    height:10%;
}

#gifgraphic{
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height:100%;
}

#kcgraphic{
	position: absolute;
    margin: auto;
    top: 0;
    right:0vw;
    width:100%;
}

#thumbgraphic{
	float:left;
    height:25%;
}

.igraphic_extrawide{
	position:absolute;
	top: 110px;
	right: 70px;
	width: 65vw;
	height: calc(100% - 170px); 
	z-index: -92;
}

.itext, .itext_xnarrow, .itext_narrow, .itext_wide, .itext_xwide{
	position:absolute;
	display:block;
	width:57%;
	height:100%;
	overflow:auto;
	top:0px;
	padding-left:20px;
}

.itext_xnarrow{
	width:42%;
	height:calc(100% - 60px);
}

.itext_narrow{
	width:40%;
}

.itext_wide{
	width:68%;
}

.itext_xwide{
	width:90%;
}

#itext_lowered{
	height:calc(100% - 60px);
}

.header{
	position:absolute;
	width:100%;
	height:50px;
	top:0px;
}

.screeninst{
	position:absolute;
	width:35%;
	height:30px;
	text-align: center;
	margin: auto;
	left: 45px;
    right: 0;
    top:7px;
    line-height:1;
}

a.drone_return{
	display: block;
	position: absolute;
	bottom:-38px;
	left:0vw;
	width: 312px;
	height: 124px;
	background-image: url(../interface/btn_Sprite_Drone_Icon312x124_156x62.png);
   	background-position: top;
    visibility: visible;	
    transform:scale(0.5);	
}

a.navexit{
	display: block;
	position: absolute;
	bottom:12px;
	left:0vw;
	width: 94px;
	height: 30px;
	background-image: url(../interface/BtnSprite_Exit_94x30_47x15.png);
   	background-position: top;
    visibility: visible;	
    transform:scale(0.5);	
}

a.drone_return:hover, a.navexit:hover, a.navref:hover, a.navhelp:hover, a.navmenu:hover{
	background-position: bottom;
    cursor: pointer;
}

a.navback, a.navback_dis{
	display: block;
	position: absolute;
	top:25vh;
	left:-45px;
	width: 104px;
	height: 120px;
	background-image: url(../interface/BtnSprite_Back_104x120_52x60.png);
    background-position: top;
	border: 0px none transparent;
	padding: 0px;
	font-size: 0em;
	visibility: visible;	
    transform:scale(0.5);	
}

a.navnext, a.navnext_dis{
	display: block;
	position: absolute;
	top:25vh;
	right:-45px;
	width: 104px;
	height: 120px;
	background-image: url(../interface/BtnSprite_Next_104x120_52x60.png);
    background-position: top;
	border: 0px none transparent;
	padding: 0px;
	font-size: 0em;
	visibility: visible;	
   	transform:scale(0.5);
    	
}

a.navback_dis, a.navnext_dis{
    background-position: -208px -240px;
}

a.navback:hover, a.navnext:hover{
	background-position: -104px -120px;
    cursor: pointer;
}

a.navback:active, a.navnext:active{
	background-position: -312px -360px;
    cursor: pointer;
}

.bncont{
	position:absolute;
	top: 15px;
	width:200px;
	height:61px;
	right:5px;
}

a.navmenu{
	display: block;
	position: absolute;
	bottom:0px;
	left: 40px;
	width: 76px;
	height: 74px;
	background-image: url(../interface/BtnSprite_Index_76x74_38x37.png);
    background-position: top;
	border: 0px none transparent;
	padding: 0px;
	font-size: 0em;
    visibility: visible;	
    transform:scale(0.5);
    
}

a.navref{
	display: block;
	position: absolute;
	bottom:-4px;
	left:65px;
	width: 140px;
	height: 82px;
	background-image: url(../interface/BtnSprite_Resources_130x74_65x37_rev.png);
    background-position: top;
	border: 0px none transparent;
	padding: 0px;
	font-size: 0em;
    visibility: visible;	
    transform:scale(0.5);
}

a.navhelp{
	display: block;
	position: absolute;
	bottom:0px;
	right:-20px;
	width: 64px;
	height: 74px;
	background-image: url(../interface/BtnSprite_Help_64x74_32x37.png);
    background-position: top;
	border: 0px none transparent;
	padding: 0px;
	font-size: 0em;
    visibility: visible;	
    transform:scale(0.5);
}


a.navreplay{
	display: block;
	position: absolute;
	bottom:0px;
	left:300px;
	width: 270px;
	height: 61px;
	background-image: url(../interface/replay_Sprite_270_x_122.png);
    	background-position: top;
    	
	position: absolute;
	
		border: 0px none transparent;
		
		padding: 0px;
	font-size: 0em;
	
    	visibility: visible;	
    	transform:scale(0.5);
    	
}

a.navreplay:hover{
	background-position: bottom;
        cursor: pointer;
}

a.navaudio_reduce{
	display: block;
	position: absolute;
	bottom:0px;
	left:480px;
	width: 78px;
	height: 61px;
	background-image: url(../interface/volume_DN_Sprite_70_x_122.png);
    	background-position: top;
    	
	position: absolute;
	
		border: 0px none transparent;
		
		padding: 0px;
	font-size: 0em;
	
    	visibility: visible;	
    	transform:scale(0.5);
    	
}

a.navaudio_reduce:hover{
	background-position: bottom;
        cursor: pointer;
}

.navaudio_status{
	position:absolute;
	width:114px;
	height:31px;
	bottom:0px;
	left:540px;
}

a.navaudio_increase{
	display: block;
	position: absolute;
	bottom:0px;
	left:605px;
	width: 78px;
	height: 61px;
	background-image: url(../interface/volume_UP_Sprite_70_x_122.png);
    	background-position: top;
    	
	position: absolute;
	
		border: 0px none transparent;
		
		padding: 0px;
	font-size: 0em;
	
    	visibility: visible;	
    	transform:scale(0.5);
    	
}

a.navaudio_increase:hover{
	background-position: bottom;
        cursor: pointer;
}

.voltic1{
	position:absolute;
	display:block;
	bottom:0px;
	left:0px;
	width:24px;
	height:61px;
	background-image: url(../interface/volume_tic_Sprite_24_x_122.png);
	background-position: top;
	visibility: visible;	
    	transform:scale(0.5);
	
}

.voltic2{
	position:absolute;
	display:block;
	bottom:0px;
	left:13px;
	width:24px;
	height:61px;
	background-image: url(../interface/volume_tic_Sprite_24_x_122.png);
    	background-position: top;
    	visibility: visible;	
    	transform:scale(0.5);
	
}

.voltic3{
	position:absolute;
	display:block;
	bottom:0px;
	left:26px;
	width:24px;
	height:61px;
	background-image: url(../interface/volume_tic_Sprite_24_x_122.png);
    	background-position: top;
    	visibility: visible;	
    	transform:scale(0.5);
	
}


.voltic4{
	position:absolute;
	display:block;
	bottom:0px;
	left:39px;
	width:24px;
	height:61px;
	background-image: url(../interface/volume_tic_Sprite_24_x_122.png);
    	background-position: top;
    	visibility: visible;	
    	transform:scale(0.5);
	
}


.voltic5{
	position:absolute;
	display:block;
	bottom:0px;
	left:52px;
	width:24px;
	height:61px;
	background-image: url(../interface/volume_tic_Sprite_24_x_122.png);
    	background-position: top;
    	visibility: visible;	
    	transform:scale(0.5);
	
}


.voltic6{
	position:absolute;
	display:block;
	bottom:0px;
	left:65px;
	width:24px;
	height:61px;
	background-image: url(../interface/volume_tic_Sprite_24_x_122.png);
    background-position: top;
    visibility: visible;	
    transform:scale(0.5);
	
}

.session_banner{
	display:none;
	width:150px;
	border: 2px solid #FFF;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	box-shadow: 5px 5px 5px #696969;
	background-color: #3A6894;
	font-family: 'Raleway', sans-serif;
	font-size: .65em;
	color: #FFF;
	position:relative;
	top: 0px;
	left:15px;
	padding: 5px;
	z-index:10;
}

#session6{
	display:none;
	width: 150px;
	border: 2px solid #FFF;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	box-shadow: 5px 5px 5px #696969;
	background-color: #3A6894;
	font-family: 'Raleway', sans-serif;
	font-size: .65em;
	color: #FFF;
	position:relative;
	top: 0px;
	left:-167px;
	padding: 5px;
	z-index:10;
}

.pin_wrapper{
	font-family:'zero-width';
	font-size:calc(98vh - 145px);
	height:1em;
	width:1.802em;
	position:absolute;
	left:50%;
	top: 0;
	transform:translate(-50%, 0%);
}

a.pin{
	display:block;
	position: absolute;
	width:2.85%;
	height:7.95%;
	background-image: url(../interface/Pin_sprite_54x84_27x42.png);
	background-size: 100% 300%;
	background-position:top;
	font-size: 16px;
	visibility: visible;
	text-decoration: none;
}

a.pin_complete{
	display:block;
	position: absolute;
	width:2.85%;
	height:7.95%;
	background-image: url(../interface/Pin_sprite_54x84_27x42.png);
	background-size: 100% 300%;
	font-size: 16px;
	background-position:bottom;
	visibility: visible;
	text-decoration: none;
	-webkit-backface-visibility: hidden;
}

a.pin:hover, a.pin_complete:hover, a.pin:focus, a.pin_complete:focus{
	background-position:center;
}

#pin1{
	top:62.5%;
	left:40.3%;
}

#pin2{
	top:74.6%;
	right:29%;
}

#pin3{
	top:8.6%;
	right:42%;
}

#pin4{
	top:21.6%;
	left:44%;
}

#pin5{
	top:53.5%;
	left:67.2%;
}

#pin6{
	top:35.6%;
	right:14.5%;
}

#pin7{
	top:36.8%;
	left:24.7%;
}

#pin8{
	top:34.6%;
	right:34%;
}

#pin9{
	top:39.7%;
	right:54.5%;
}

#pin10{
	top:23.1%;
	right:37%;
}

#pin11{     
	top:45.6%;
	left:55.5%;
}

.checkSelected{
    position: absolute;
    width: 2.47%;
    height: 4.25%;
    visibility: hidden;
    z-index:-80;
}

.igraphic_wide{
	position:absolute;
	top: 35px;
	right: 3vw;
	width: 52%;
	height: 100%; 
	max-height:55vh;
	z-index: -92;
}

.igraphic_xwide{
	position:absolute;
	top: 20px;
	right: 0vw;
	width: 50%;
	height: 100%; 
	max-height:55vh;
	z-index: -92;
}

#interface{
   position:absolute;
   height:100%;
   max-height: calc(49.5vw * .669);
   max-width: 100%;
   z-index: -90;
   right:0;
}

.interface_wrapper{
	font-family:'zero-width';
	font-size: 46.4vh;
	height:1em;
	width:1.4937em;
	max-height: calc(49.5vw * .669);
	max-width: 100%;
	position:absolute;
	right:0;
}

#navinstr_back{
	position: absolute;
	width: 5.0%;
    height: 11.3%;
    border: 0;
    top: 49.5%;
    left: 1.38%;
}

#navinstr_visit_resources{
	position: absolute;
	width: 24.6%;
    height: 14%;
    border: 0;
    top: 74%;
    left: 24.1%;	
}

#navinstr_return{
	position: absolute;
	width: 16%;
    height: 7%;
    border: 0;
    top: 90.8%;
    left: 15.1%;	
}

#navinstr_exit{
	position: absolute;
	width: 6.33%;
    height: 4.81%;
    border: 0;
    top: 91.5%;
    left: 7.2%;
}

#navinstr_page{
	position: absolute;
    width: 21.6%;
    height: 6.7%;
    border: 0;
    top: 90.8%;
    left: 75%;
}

#navinstr_next{
	position: absolute;
	width: 5.0%;
    height: 11.3%;
    border: 0;
    top: 49.5%;
    left: 94.1%;
}

#navinstr_help{
	position: absolute;
	width: 4.2%;
    height: 8.3%;
    border: 0;
    top: .65%;
    left: 93.9%;
}

#navinstr_resources{
	position: absolute;
	width: 6.8%;
    height: 8.3%;
    border: 0;
    top: .65%;
    left: 86.6%;
}

#navinstr_index{
	position: absolute;
	width: 4.6%;
    height: 8.3%;
	border: 0;
    top: .65%;
    left: 81.4%;
}

a.checklist{
	display:block;
	width: 520px;
	height: 544px;
	background-image: url(../graphics/0891_sprite.png);
    background-position: top;
   	transform:scale(0.35) translate(-90%,-110%);
}

a.checklist:hover{
	background-position: bottom;
}

.visit_resources{
  position:relative;
  margin:auto;
  width: 222px;
  height: 73px;
  background-image:url(../graphics/Resources_01_278_x_92.gif);
  background-repeat:no-repeat;
  background-size: 100%;
}

#empty_span{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}

.playpause {
    background-image:url(../interface/VideoPlayButton_up.png);
    background-repeat:no-repeat;
    background-size: 100%;
    width:100%;
   	height:100%;
    position:absolute;
    background-position: center;
    z-index:100;
}
.playpause:hover{
	background-image:url(../interface/VideoPlayButton_ov.png);
	cursor:pointer;
}

#myVideo{
  width:100%;
  max-width:calc((62.475vh - 118px) * 1.77);
}
#myVideo:hover{
	cursor:pointer;
}
#styling-container{
  position:relative;
  margin:auto;
  width:100%;
  height:75%;
}
#myvid{
  max-width:calc((62.475vh - 118px) * 1.77);
  margin:auto;
}

#igraphic_table{
	top:0px;
}