@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

/*
@font-face {
	font-family: 'Fira';
	src: url('/fonts/Fira/woff2/FiraSans-Regular.woff2') format('woff2'),
	url('/fonts/Fira/woff/FiraSans-Regular.woff') format('woff'),
	url('/fonts/Fira/ttf/FiraSans-Regular.ttf')  format('truetype'); 
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Fira';
	src: url('/fonts/Fira/woff2/FiraSans-Italic.woff2') format('woff2'),
	url('/fonts/Fira/woff/FiraSans-Italic.woff') format('woff'),
	url('/fonts/Fira/ttf/FiraSans-Italic.ttf')  format('truetype'); 
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Fira';
	src: url('/fonts/Fira/woff2/FiraSans-Bold.woff2') format('woff2'),
	url('/fonts/Fira/woff/FiraSans-Bold.woff') format('woff'),
	url('/fonts/Fira/ttf/FiraSans-Bold.ttf')  format('truetype'); 
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Fira';
	src: url('/fonts/Fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'),
	url('/fonts/Fira/woff/FiraSans-BoldItalic.woff') format('woff'),
	url('/fonts/Fira/ttf/FiraSans-BoldItalic.ttf')  format('truetype'); 
	font-weight: bold;
	font-style: italic;
}

*/

@font-face {
	font-family: 'CMU Concrete';
	src: url('/fonts/ComputerModern/Concrete/cmunorm.woff2') format('woff2'),
	url('/fonts/ComputerModern/Concrete/cmunorm.woff') format('woff'), 
	url('/fonts/ComputerModern/Concrete/cmunorm.ttf')  format('truetype'); 
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CMU Concrete';
	src: url('/fonts/ComputerModern/Concrete/cmunoti.woff2') format('woff2'),
	url('/fonts/ComputerModern/Concrete/cmunoti.woff') format('woff'), 
	url('/fonts/ComputerModern/Concrete/cmunoti.ttf')  format('truetype'); 
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'CMU Concrete';
	src: url('/fonts/ComputerModern/Concrete/cmunobx.woff2') format('woff2'),
	url('/fonts/ComputerModern/Concrete/cmunobx.woff') format('woff'), 
	url('/fonts/ComputerModern/Concrete/cmunobx.ttf')  format('truetype'); 
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'CMU Concrete';
	src: url('/fonts/ComputerModern/Concrete/cmunobi.woff2') format('woff2'),
	url('/fonts/ComputerModern/Concrete/cmunobi.woff') format('woff'), 
	url('/fonts/ComputerModern/Concrete/cmunobi.ttf')  format('truetype'); 
	font-weight: bold;
	font-style: italic;
}

*, *:before, *:after { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, .noindent, table td p, table h4  {
	margin: 0;
	padding: 0;
}

body {
        overscroll-behavior-y: none;
}

body, .container {
	padding: 2em 2em 3em 2em;
	margin: 2em auto 70% auto;
	width: 75%;
	max-width:45em;
}

body, .container, .calendar table {
	background: rgba(255,255,255,0.96);
}

body, .container, .calendar table {
	border-radius: 2em;
}

body.calendar {
	padding: 0em;
	border: 0;
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

h1, h2, h3, h4, h5, .mainhead, table, table.hanghead tr > td p { 
	font-family: 'Fira', Helvetica, Arial, sans-serif;
	font-family: 'CMU Concrete', 'Georgia', serif;
}

.mainhead-left	{ 
	font-family: 'CMU Concrete', 'Georgia', serif;
	font-weight: bold;
	font-style: italic;
	font-size:  larger;
}

h2, h3 {
	width: 100%;
	padding-bottom: 0.2ex;
	margin-top: 1em;
	margin-bottom: -0.5em;
	margin-right: 1em;
}

table.hanghead + h3 {
	margin-top: -0.2em;
}

h4 {
	margin-left: 1em;
	margin-top: 1em;
	margin-bottom: -1em;
	font-weight: bold;
}

p, ul, ol, math, table.hanghead tr > td + td p {
	/* font-family: 'Comic Sans', Arial, Verdana, sans-serif; */
 	font-family: Helvetica, Arial, sans-serif;
	font-family: 'Fira', Georgia, serif;
	font-family: 'CMU Concrete';
}

p, ul, ol {
    margin-right: 2.5em;
	margin-left: 2.5em;
}


a:link, a:visited {
	color:#231E87;
	text-decoration: none;

/*
	background-image: linear-gradient(to top, #fff 0%,#fff 50%,#231E87 50%,#231E87 100%);
    background-size: 2px 2px;
    background-repeat: repeat-x;
    background-position: 0 1.044em;	
	text-shadow: 0.1em 0 #fff,-0.1em 0 #fff, 0 -0.1em #fff;
*/	
}

a:link img, a:visited img {
	background-image: none;
}


a:hover {
	color: #FF24FA; 
	text-decoration: underline;
/*
	text-decoration: none;
	background-image: linear-gradient(to top, #fff 0%,#fff 49%,#FF24FA 50%,#FF24FA 100%);
*/
}

ul {
	list-style-type: disc;
	margin-bottom: 1em;
	padding-left: 2em;
}

ul ul {
	list-style-type: circle;
	padding-left: 0.75em;
}

ul ul ul {
	list-style-type: square;
	padding-left: 0.75em;
}

ol {
	list-style-type: decimal;
	margin-bottom: 1em;
	padding-left: 2em;
}

ol ol {
	list-style-type: lower-latin;
	padding-left: 0.75em;
}
ol ol ol {
	list-style-type: lower-roman;
	padding-left: 0.75em;
}

li {
	margin-top: 1ex;
}

table {
	margin: 1em auto;
}

table ul, table ol {
	margin-left: 1em;
	margin-top: 0.5em;
	margin-right: 1em;
	margin-bottom: 1em;
}

td, tr {
	padding: 1ex;
}

.calendar td, tr {
	padding: 1em;
}

table.invisible, table.invisible td {
	margin: 1em auto;
	border: 0;
	background-color: none;
}

table.borders {
	border: thin solid #000000;
	display: table;
}

table.hanghead {
	border: 0;
	margin: 0 2.5em 1em 2.5em;
}

table.hanghead td, table.hanghead tr {
	padding: 0.1ex 0;
	vertical-align: baseline;
}

table.hanghead tr > td {
	width: 8em;
} 

table.hanghead tr > td + td {
	width: auto;
	font-style: normal;
}

table.grades {
	text-align: center;
    border-collapse: collapse;
	width: 100%;
	max-width: 15em;
}

table.grades td {
	border-top: thin black solid;	
}

table.grades tr:last-of-type td {
	border-bottom: thin black solid;	
}

table.grades td + td {
	text-align: left;
	padding-left: 2em;
	font-size: 150%;
	font-weight: bold;
	border-bottom: thin black solid;
}

table.grades th {
	border-bottom: thin black solid;
}

table.grades td:only-of-type {
	border-top: none;
}

table.grades td, table.grades tr {
	padding: 0;
}

img {
	padding: 0px;
	display: block;
	margin: 1em auto;
	border: thin solid black;
}

.pic {
    max-width: 100%;
    height: auto;
    border: none;
}

.example {
	margin: 2em 4em;
	padding: 1em;
	border: thin black solid;
}

del {
	color: red;
	text-decoration: line-through;
}

ins {
	color: blue;
	font-weight: bold;	
}

.caption {
	font-size: smaller;
	text-align: justify;
	width: 50ex;
	margin: 0em auto 2em auto;
}

.inline {
	display: inline;
	border: none;
	clear: none;
	vertical-align: middle;
}

.right {
	text-align: right;
}

.mainhead {
	float: left;
	width: 100%;
	margin-bottom: 1em;
}

.mainhead-left {
	text-align: left;
	font-size: xx-large;
	font-weight: bold;
	float: left;
	width: 60%;
	margin: 0em;
	padding: 0em;
}

.mainhead-right {
	text-align: right;
	font-size: small;
	float: right;
	margin: 0em;
	padding: 0em;
	width: 40%;
}

hr {
	width: 67%;
}

.calendar table {
	width: 100%;
	border-collapse: collapse;
}

.calendar-week {
	font-size: 400%;
	width: 2em;
	font-style: italic;
	text-align: center;
	vertical-align: middle;
}


td + .calendar-week {
	font-size: 100%;
	width: 2em;
	padding-top: 2em;
}

.calendar-day {
	font-size: 75%;
	font-style: italic;
	width: 8em;
	text-align: center;
	vertical-align: middle;
	border-top: thin black solid;
	border-top: expression((this.parentNode.firstChild == this)? "thin solid #000000" : "none"); 
}

.calendar-description {
	text-align: left;
	display: table-cell;
	vertical-align: middle;
	padding: 1ex;
	border-top: thin solid #000000;
	border-top: expression((this.parentNode.firstChild == this.previousSibling)? "thin solid #000000" : "none"); 
}

.calendar-head {
	margin-top: 0;	
}

.calendar-head td {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	font-style: italic;
}

.calendar-head .calendar-week  {
	width: 8em;
	font-size: 100%;
}

.calendar-head .calendar-day {
	width: 6em;
	font-size: 100%;
}

.calendar-head td + .calendar-week {
	width: 2em;
	font-size: 100%;
}


.calendar-description ul, .calendar-description ol {
	padding-left: 1em;
	margin: 0em;
}

.calendar-description ul ul, .calendar-description ol ol {
	padding-left: 1.5em;
	margin: 0em;
}

.calendar-description ul ul ul, .calendar-description ol ol ol {
	padding-left: 2em;
	margin: 0em;
}


.calendar-week + .calendar-day, .calendar-week + .calendar-day + .calendar-description  {
	border-top: none;
}

.center {
	text-align: center;
}

.smaller {
	font-size: 80%;
}

.hide {
	display: none;
}

.monospace {
	font-family: Consolas, "Lucida Console", "Courier New", Courier, monospace;
}

.strike {
	text-decoration: line-through;
}

.super {
	vertical-align: super;
	font-size: x-small;
}

.sub {
	vertical-align: sub;
	font-size: x-small;
}


.copyright, .commons {
	font-size: 80%;
	text-align: right;	
}

html {
	background-size: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment:fixed;
	-webkit-overflow-scrolling: touch;
}

@media only screen and (min-width: 571px) and (max-width: 768px) {
	
	html {
		background-size: cover;
	}	

	body, .container {
		width: 85%;
	}
	
	table.hanghead {
		margin: 0 ;
	}
	
}

@media only screen and (min-width: 441px) and (max-width: 570px) {
	html {
		background-size: cover;
	}

	body, .container {
		width: 90%;
	}

	body, .container, .calendar {
		border-radius: 1em;
	}
	
	table.hanghead {
		margin: 2em 0;
	}

	table ul, table ol {
		margin-left: 0;
		padding-left: 1em;	
	}

	p, ul, ol {
		margin-right: 1em;
		margin-left: 1em;
	}
	
	.mainhead-left {
		width: 100%;
		font-size: 200%;
		line-height: 0.9;
	}
	
	.mainhead-right {
		width: 100%;
		float: left;
		text-align: left;	
		margin-top: 1em;
		font-style: italic;
	}

	.calendar-week {
		font-size: 200%;	
		vertical-align: top;
		padding-top: 0.5em;
	}
	
	.calendar-head .calendar-week {
		width: 2em;
		padding-top: 1em;
		vertical-align: middle;
	}

	.calendar-description + .calendar-week {
		display: none;
	}
	
	.calendar-day {
		width: 6em;
		font-size: 100%;	
		vertical-align: top;	
	}

	.calendar-day p {
		margin-top: 1em;	
	}
	
	.calendar-head .calendar-day p {
		margin-top: 0;	
	}
}

@media only screen and (min-width: 0) and (max-width: 440px) {

	html {
		background-size: 100%;
		background-size: cover;
	}

	body, .container {
		margin-top: 1em;
		margin-left: 0.2em;
		margin-right: 0.2em;
		padding: 0.5em 0.5em 1em 0.5em;
		width: auto;
	}
	
	body, .container, .calendar {
		border-radius: 0.6em;
	}
	
	table.hanghead {
		margin: 2em 0;
	}
	
	.mainhead-left {
		width: 100%;
		font-size: 200%;
		line-height: 0.9;
	}
	
	.mainhead-right {
		width: 100%;
		float: left;
		text-align: left;	
		margin-top: 1em;
		font-style: italic;
		}
	
	p, ul, ol {
		margin-right: 1em;
		margin-left: 1em;
	}
	

	table {
		width: 90%	!important;
		max-width: none;
	}
	
		
	table.grades {
		max-width: none;
	}

	
	td, tr {
		padding: 1ex;
	}
	
	table ul, table ol {
		margin-left: 0;
		padding-left: 1em;	
	}
	
	.calendar {
		width: 100% !important;	
	}
	
	.calendar-week {
		display: none;
	}
	
	.calendar-day {
		font-size: 100%;	
		vertical-align: top;
		width: 6em;
		font-weight: bold;
	}
	
	.calendar-day p {
		margin-top: 1em;	
	}
	
	.calendar-head .calendar-day p {
		margin-top: 0;	
	}
}

audio {
    margin: 1em auto;
}