@font-face {
    font-family: OpenDyslexic;
    src: url("OpenDyslexic-Regular.otf") format("opentype");
}

@font-face {
    font-family: OpenDyslexic;
    font-weight: bold;
    src: url("OpenDyslexic-Bold.otf") format("opentype");
}

.dyslexicfont {
    font-family:OpenDyslexic;
}

a:focus {border:dotted !important;border-width:3px !important;border-color:#ff0000 !important;}

.cm-single-slide {background-color:#777777;}

#mask1 {
  position: fixed;
  width: 100%;
  height: 2000px;
  background-color: rgba(0,0,0,0.6);
  z-index: 999999;
  visibility:hidden;
}

.mblhide {
    display:block;
}
@media only screen and (max-width: 500px) {
    .mblhide {
        display:none;
    }
}

#mask2 {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 999999;
  visibility:hidden;
}
.hlinks {
    border:dotted !important;
    border-width:2px !important;
    border-color:red !important;
}

.skipper {
    position:fixed;
    top:-200px;
    left:-200px;
    background-color:#ededed;
    color:#333;
    font-family:arial,verdana,helvetica;
    font-size:18px;
    border:solid;
    border-width:2px;
    border-color:#000;
    padding:10px;
    z-index:99999;
    cursor:pointer;
}

.skipper:focus {
    top:50px;
    left:10px;
    z-index:99999;
}

.grayscaled {
    filter: grayscale(100%);
}

.contrasted {
    filter: contrast(150%);
}

.graycontrasted {
    filter: contrast(150%) grayscale(100%);
}

.inverted {
    filter: invert(100%);
}

.hidebg {
    background-image: unset;
}

.controls {
	position:fixed;
	left:10px;
	bottom:10px;
	cursor:pointer;
	background-color:#4400FF;
	color:#fff;
	padding:5px;
	border:solid;
	border-color:#006699;
	border-width:2px;
	font-family:arial,verdana,helvetica;
	font-size:14px;
	z-index: 999997;
}

.cpanel {
	position:fixed;
	left:10px;
	bottom:10px;
	background-color:#99ccff;
	border:solid;
	border-color:#006699;
	border-width:2px;
	padding:10px;
	font-family:arial,verdana,helvetica;
	font-size:14px;
	text-align:center;
	z-index: 999998;
}
.btn {
	border-radius:4px;
	padding:6px;
	text-align:center;
	border:solid;
	border-width:2px;
	border-color:#006699;
	margin:4px 1px 4px 1px;
	cursor:pointer;
	background-color:#ededed;
	font-weight:normal;
}
.btn:hover, .fbtn:hover, .btn:focus, .fbtn:focus {
	background-color:#99ff99;border-color:#078a00;font-weight:bold;
}

.btnselect:focus, .btnselect:hover {font-weight:bold;}

.btnselect {
	border-radius:4px;
	padding:6px;
	text-align:center;
	border:solid;
	border-width:2px;
	border-color:#006699;
	margin:4px 1px 4px 1px;
	cursor:pointer;
	background-color:#33cc33;
	font-weight:normal;
}

.sml {
	font-size:10px;
}
.med {
	font-size:15px;
}
.lrg {
	font-size:24px;
}
.textbtn {
	padding:6px 0 6px 0;
}
.closeit {
	position:absolute;
	top:-12px;
	right:-10px;
	background-color:#006699;
	color:#fff;
	padding:0 3px 0 3px;
	font-size:18px;
	cursor:pointer;
}
.closeit:focus, .closeit:hover {background-color:#99ff99;color:#333;}