/*--------------------------------------------------------------
Adam Girycki
--------------------------------------------------------------*/
*{ 
/* Prevent any object from being highlighted upon touch event*/ 
-webkit-tap-highlight-color: rgba(0,0,0,0); 
}
.a, .button, .toc, img, .signInButton, .navi, .navigation, .navigationInner, .thumbnail, .thumbnailInner {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

* {
  margin: 0;
  padding: 0;
}

html, body, p, label, input, select, option, textarea, a, div, apan, .normalFont {
	font-family: -apple-system, system-ui, Helvetica, Arial; 
	font-size: 13px;
	font-weight: 300;
	color: rgb(0,0,0);
}
.bigFont {
	font-size: 15px;
	font-weight: 400;
}
h2 {font-size: 15px; }
h1 {font-size: 22px;}

textarea, select, input, .checkboxlist {
   border: 1px solid rgb(210,210,210); 
   border-radius: 0.3em;
   padding: 2px 2px 2px 3px;
   background-color: #fff;
}
html, a {
   	overflow: hiddenn;
}

body {
	overflow:hidden;
	background-color: none;
	height:100vh;
}
.header {
    padding: 1.5em 0em;
    position: relative;
    width:100%;
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    background-color: rgb(33,115,186);
    border-bottom: 2px solid rgb(247,127,0);
    border-bottom: 2px solid rgb(255,255,255);
    border-bottom: 2px solid rgb(9,24,29);
        border-bottom: 2px solid rgb(33,115,186);

    z-index:1;
}
.headerIn {
    background-color: rgb(246,246,246);
}
.logo {
        position: relative;
        display: inline-block;
}
.logo .logo2 {
	position: absolute;
	display: none;
	top:0;
	left: 0;
    z-index: 99;
}
.logo:hover .logo2 {
	display: inline;
}
.menu {
    padding-left: 2em;
    padding-right: 1em;
    vertical-align: middle;
}
li.menu {
    display: inline-block;
}
.menuContent {
	overflow-y:scroll;
	max-height: 50vh;
    position: absolute;
    margin-top: 0.3em;
    background-color: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0 ,0.2);
}
.menuContent a{
    padding:0.6em 1em;
    display: block;
}
.menuContent a:hover {
    color: white;
    background-color: rgb(33,115,186);
}
.admin {
   color: rgb(247,127,0);
}
.menuContent a.admin:hover {
   color: rgb(255,200,150);
}
.login {
	margin-top:0em;
	padding: 0 0.5em 0 1em;
}
.a {
    cursor:pointer;
}
.a:hover {
   color: rgb(247,127,0);
}
.a:active {
    text-shadow: 0px 0px 3px rgba(255,255,255,0.8);
}
.aheader {
	cursor:pointer;
	color: white;
}
.aheader:hover {
   color: white;
    text-shadow: 0px 0px 3px rgba(255,255,255,0.9);
}
.aheader:active {
    color: rgb(230,240,255);
    text-shadow: 0px 0px 2px rgba(255,255,255,0.9);
}
.headerLabel { 
	color: white;
}
.loginInput {
	margin-top:-1em;
	padding: 0 0.5em;
}

input.login {
    padding: 0 0.2em;
    width:11em;
    margin-top:-0.25em;
    height: 1.4em;
}
.button.login {
    width: 4em;
    text-align: center;
    background-color: rgb(220,220,220);
    padding: 0.13em 0.7em;
    border: 1px solid rgb(160,160,160);
    margin:-0.25em 0.5em;
    border-radius: 0.5em;
}
.button.login:hover, .button.signIn:hover  {
   	color: white;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    background-color: rgb(180,180,180);
    border-color: rgb(120,120,120);
  }
.button.login:active, .button.signIn:active {
    border-color: rgb(130,130,130);
    text-shadow: 0px 0px 3px rgba(255,255,255,0.7);
    box-shadow: 0px 0px 2px 1px rgba(255,255,255,0.4);
}  
.right {
    float: right;
    right: 2em;
}
#menuLogin {
    display:none;
}
#menuLogin {
    display:none;
}
.addressBar {
   	position: relative;
   	height:1.3em;
      padding: 0.5em 0em;
    width:100%;
    z-index: 0;
    background-color: rgb(180,180,180);
    background-color: rgb(113,188,235);
        background-color: rgb(213,238,255);
    border-bottom: 2px solid rgb(247,127,0);
    border-bottom: 2px solid rgb(33,115,186);
}
.message {
	display:none;
    position: absolute;
   height:1.2em;
    padding: 0.5em 1em;
    width:100%;
    background-color: rgb(0, 160, 220);
    color:white;
 }
#myPlatform {
   	padding:0;
   	position: absolute;
   	width:100%;
	background-color: none;

}

#myLeftPanel, #myRightPanel, .mediaEditPanel {
   position: absolute;
   height:100%;
   background-color: none;
}
.tableOfContents {
   position: relative;
   overflow-y: scroll;
   width:100%;
   padding: 0;
   line-height: 1.5em;
    height:50px;
   background-color: rgba(255, 255, 255, 0.85);
   border: 1px solid rgba(210, 210, 210, 0.85);
	border-radius: 4px;
}
#myQuestion {
   position: relative;
   width:100%;
   height:10em;
   background-color: white;
   display:none;
}

.lectureTitle {
   position: relative;
   padding:0.3em 0.5em;
   font-size: 15px; 
   font-weight:400;
   background-color: rgba(255, 255, 255, 0.85);
   border-radius: 4px;
   margin-bottom: 0.3em;
}
.divContainer {
	margin: 0.5em 0 0.5em 0.5em;
}
#myLecture {
   position: relative;
   background-color: none;
   width:100%;
}
.statusContainer {
   position: absolute;
   width: 100%;
   height:1.7em;
   background-color: rgb(230,230,230);
}
.status {
   padding: 0.2em 1em;
}
#extraText {
	display:none;
   position: absolute;
   left:0;
   background-color: rgba(255,255,255,0.5);
   border: 1px solid rgba(0,0,0,0.5);
   width: 100%;
   z-index:100;
}
.c > div{
   font-weight: normal;
   position: absolute;
   display:none;
   margin-top:0.7em;
   margin-left:-12em;
   width: 14em;
   text-align: left;
   padding: 0.3em 0.6em;
   line-height: 1.3em;
   border: 1px solid rgb(200,200,200);
   border-radius: 5px;
   background-color: rgba(240,240,240,0.9);
   box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.1);
   text-shadow: none;
   color: rgb(40, 40, 40);
   z-index:100;
}
	.c:hover > div {display: block; overflow:hidden;
}
.dim {
	position: absolute;
	left:0%;
	top: 0%;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 1;
}
.dimWindow {
	position: fixed;
	top: 45%;
  	left: 50%;
  	transform: translate(-50%, -45%);
 	display: table;
 	margin: 0 auto;	
	padding: 1.5em 1.5em 0.6em 1.5em;
	background-color: white;;
	box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.1);
	border: 1px solid rgb(200,200,200);
	border-radius: 7px;

}
.signIn {
}

.title {
	font-weight: 400;
	font-size: 15px;
	margin: 0 0 0.75em 0;
	}
fieldset.form, fieldset.exercise {
   border-color: rgb(210, 210, 210);
   background-color: rgb(246, 246, 246);
   border-style: solid;
   border-width: 1px;
	border-radius: 4px;
   margin: 1em 0;
   padding: 0.3em 1em;
}

fieldset legend {
   color:rgb(180, 180, 180);
   margin: 0.5em 0.5em 0.5em 0.5em;
   padding:0 0.1em;
   background-color: rgb(255, 255, 255);
   box-shadow: 0px 0px 3px 0px white;
   border-radius: 4px;
   background-color:none;
	text-decoration:none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
  user-select: none;
  unselectable:on;
  }
  
.inner {
 	display: table;
  	margin: 0 auto;	
	padding: 0;
}

legend {

} 
label {
	display: block;
	padding: 0 0 0.2em 0;
}

input.signIn {
	position: relative;
	width: 18em;
	margin: 0 0 0.8em 0;
	padding: 0.25em;
}

select.signIn {
	width:18.7em;
	margin: 0 0 0.8em 0;
	padding: 0.3em 0.4em;
}
textarea.signIn {
	position: relative;
	width: 18em;
	margin: 0 0 0.8em 0;
	padding: 0.25em;
	resize: vertical;
}
.buttonsContainer {
	position: relative;
  float: right;
  padding:0.3em 0.5em 0.5em 0.5em;
}

.signInButton {
	align:right;
	font-size:15px;
	color: rgb(247,127,0);
	display:table-cell;
   	text-align:center;
	vertical-align:middle;
	height: 1.6em;
	width: 5em;
	cursor: pointer;
}

.signInButton:hover {
	color: rgb(255,160,10);
 }

.signInButton:active {
    color: rgb(80,80,80);
}
.inline {
	display: inline-block;
	padding: 0 1em 0 1em;
}
.warning {
	color: rgb(247,127,0);
}
.bigMessageWindow {
	position: fixed;
	top: 45%;
  	left: 50%;
  	transform: translate(-50%, -45%);
 	display: table;
 	margin: 0 auto;	
	padding: 0;
	background-color: white;
	box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.1);
	border: 1px solid rgb(180,180,180);
	border-radius: 7px;
}
.bigMessageTitle {
	font-weight: 400;
	font-size: 15px;
	color: rgb(247,127,0);
	padding:1.5em 1.5em 0 1.5em;
}
.bigMessage {
	font-size:14px;
	position: relative;
	width:29em;
	padding:1.2em 1.5em 1.5em 1.5em;
	border-bottom: 1px solid rgb(220,220,220);
	line-height: 130%;
}
.toc {
	cursor:default;
	}
.tocNumber {
	display: inline;
}
.toc:hover {
	color:rgb(247,127,0);
	text-shadow: 0px 0px 2px rgba(247,127,0,0.7);
}
.tocSelected {
	cursor:default;
	color: white;
	background-color: rgba(247,127,0,1);
}
.tocSelected:hover {
    text-shadow: 0px 0px 1px rgba(255,255,255,0.7);
}
.navi {
   margin-top: 0.1em;
	cursor: pointer;
	text-align: right;
	display: inline-block;
	min-width: 1em;
	color: white;
}
.navi:hover {
    text-shadow: 0px 0px 2px rgba(255,255,255,0.85);
}
.navi:active {
	color: rgb(230,230,230);
	text-shadow: none;
}
.exerciseWindow {
	overflow: hidden;
	margin-left: 0;
}
.exercisePage {
 	display: table;
 	width: calc(100% - 3em);
	padding: 1.5em 1.5em 0.6em 1.5em;
	background-color: rgba(255,255,255,1);
	box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.1);
	border: 1px solid rgb(200,200,200);
	border-radius: 0.3em;
	margin:0;
}
.question {
	font-weight: 400;
	padding: 0.4em 0;
}
.answerContainer {
	padding: 0.4em 0;
}

.answerContainer input[type=checkbox] {
}

.answer {
	display: inline-block; 
	padding: 0em 0 0 0.8em;
	vertical-align: text-top;
	width: calc(100% - 2.5em);
	cursor: default;
}
table {
	padding-left: 0.5em;
	padding-right: 0.5em;
}
td {
	padding:0.2em;
	}
th {
	padding:0.2em;
	text-align: left;
	}
.row {
	height: 2em;
}

.tdButton {
	width:2em;
}
.mediaEditButton {
	display: inline-block;
	cursor: pointer;
	color:rgb(247,127,0);
	padding: 0.2em;
	width: 1em;
}
.mediaEditButton:hover {
	cursor: pointer;
 }

.mediaEditButton:active {
    color: rgb(80,80,80);
	cursor: pointer;
}
.mediaEditPanel {
	display: block;
}
.container {
	position: relative;
	margin: 0.5em;
   	width: auto;
   	height: auto;
   	border-radius: 0.3em;
	background-color: rgba(255, 255, 255, 0.85);	
}

.rightAbsolute {
	position: absolute;
	right:0;
}
.windowHeader {
	font-weight: 500;
	background-color: rgba(0,0,0,0.25);
	background-color: rgb(33,115,186);
	height: 1.9em;
	border-radius: 0.3em 0.3em 0 0;
	text-align: center;
	line-height: 1.9em;
	color: white;
}

.box {
	position: absolute;
	left: 0.45em;
	top: 0.45em;
	width: 1em;
	height: 1em;
	padding:0;
	margin:0;
	cursor: pointer;
	padding:0;
	margin:0;
	border: none;
}

.windowCloseButton {
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width:100%;
	padding:0;
	margin:0;
}

.scrollContent {
	overflow-x: hidden;
	overflow-y: scroll;
}

.navigation {
	position: relative;
	padding: 0.5em;
	font-size: 15px; 
	font-weight:400;
	text-align: center;
	border-radius: 0 0 0.3em 0.3em;
	background-color: rgb(33,115,186);
}
.navigationInner {
	height: 1.53em;
	margin: 0.2em 0;
}
.thumbnail {
	font-size: 13px;
	display: inline-block;
	padding: 0;
	height: 1.53em;
	width: 2.72em;
	margin:0 0.25em;
}
.thumbnailInner, .arrowInner {
	cursor: pointer;
	position:absolute;
	background-color: rgba(255,255,255,0.5);
	color: black;
   	border-radius: 0.15em;
	vertical-align: center;
   	line-height: 1.53em;
	height: 1.53em;
	width: 2.72em;
}
.arrowInner {
	background-color: rgb(33,115,186);
	color: white;
}
.arrowInner:hover {
    text-shadow: 0px 0px 2px rgba(255,255,255,0.5);
}
.thumbnailInner:hover {
	background-color: rgba(255,255,255,0.95);
	color: black;
}
.thumbnailSelected {
	background-color: rgba(255,255,255,0.85);
}
.thumbnailActive {
 	cursor: grabbing;
	background-color: rgba(247,127,0,0.85);
	color: white;
}