@font-face {
    font-family: Jellee;
    src: url(/job/fonts/Jellee-Roman.otf);
}
@font-face {
    font-family: HJohnson;
    src: url(/job/fonts/HenryJohnson.otf);
}


:root {
	font-size: 100%;
	font-family:Tahoma,Arial,Helvetica,sans-serif;
	color:black;
	background: white;
}



A:link {font-family:Jellee,sans-serif; color:#0000FF; text-decoration:none}
A:visited {font-family:Jellee,sans-serif; color:#006600; text-decoration:none}
A:hover {font-family:Jellee,sans-serif; color:#5555FF; text-decoration:none}

H1 {font-family:HJohnson,sans-serif; font-size:180%}
H2 {font-family:HJohnson,sans-serif; font-size:150%}
H3 {font-family:HJohnson,sans-serif; font-size:125%}

.fade {color:#676869}

UL {list-style: disc outside; margin: 1em}
UL LI {margin: 4pt 0}
UL LI.new{list-style: url(new.gif)}
UL UL {list-style: circle outside; margin: 1em}
UL UL LI {margin: 2pt 0}


DIV.courses div.courseblock {float: left; clear:left; text-align: right; width: 10%}
DIV.courses UL {margin: 0}
DIV.courses UL li {padding: 4pt;margin: 0 0 0 10%}
/* DIV.courses UL li:nth-child(2n+1) {background-color: #EEEEEE} */


OL {list-style: decimal outside; margin: 1em}

EM {font-style:italic}
STRONG {font-weight:bold; font-style:italic}
CITE {font-style:italic}
BLOCKQUOTE {indent:3em}
TT {font-family:monospace}
PRE {font-family:monospace}

#head{
	width: 100%;
	text-transform: uppercase;
	display: flex;
	flex-flow: row wrap;
	justify-items: stretch;
	align-items: center;
	justify-content: space-between;
}

#head div{
	margin: 0rem .5rem;
}

#foot{
	text-transform: uppercase;
	display: flex;
	flex-flow: row wrap;
	justify-items: stretch;
	align-items: center;
	justify-content: space-between;
}

#foot div{
	margin: 0rem 1rem;
}


/* hide and show hack */
input[type=checkbox] {
	opacity: 0;
	float: right;
}
input[type=checkbox]:checked ~ div {
	display: block;
}
input[type=checkbox]:not(:checked) ~ div {
	display: none;
}
.hidden {
	display: none;
}
label {
	cursor: pointer;
}
input[type=checkbox]:checked ~ h3 label:before {
	content: "- ";
}
label:before {
	content: "+ ";
}
input[type=checkbox]:checked ~ h3 {
	color:#676869;
}
input[type=checkbox]:not(:checked) ~ h3 {
	color:#0000FF;
}

button {
  background-color: #fff;
  border: 0 solid #e2e8f0;
  border-radius: 1.1rem;
  box-sizing: border-box;
  color: #0d172a;
  cursor: pointer;
  display: inline-block;
  font-family: Jellee,sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 1rem 1.6rem;
  text-align: center;
  text-decoration: none #0d172a solid;
  text-decoration-thickness: auto;
  transition: all .1s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0px 1px 2px rgba(166, 175, 195, 0.25);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button:hover {
  background-color: #1e293b;
  color: #fff;
}


/* Screen Sizes */
@media screen and (min-width: 1350px) { /*1420*/
body {margin: 20px 142px 20px 142px;}
}
@media screen and (min-width: 1250px) and (max-width: 1350px) { /*1320*/
body {margin: 20px 132px 20px 132px;}
}
@media screen and (min-width: 1150px) and (max-width: 1250px) { /*1220*/
body {margin: 20px 122px 20px 122px;}
}
@media screen and (min-width: 1050px) and (max-width: 1150px) { /*1110*/
body {margin: 20px 111px 20px 111px;}
}
@media screen and (min-width: 950px) and (max-width: 1050px) { /*1010*/
body {margin: 20px 101px 20px 101px;}
}
@media screen and (min-width: 850px) and (max-width: 950px) { /*910*/
body {margin: 20px 91px 20px 91px;}
}
@media screen and (min-width: 750px) and (max-width: 850px) { /*800*/
body {margin: 20px 80px 20px 80px;}
}
@media screen and (min-width: 600px) and (max-width: 750px) { /*700*/
body {margin: 20px 70px 20px 70px;}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
body {margin: 20px 60px 20px 60px;}
}
@media screen and (max-width:480px) {
body {margin: 5px 10px 5px 10px;}
}