/* last edited: 27-May-2018 21:10:42 */
@media all {
	em {
		font-weight: bold;
	}
	.term {
		font-weight: bold;
		font-style: italic;
		padding: 0.1em
	}
	.greysample {
		color: lightgrey;
		text-decoration: line-through;
	}
	.centred {
		text-align: center;
	}
	.exercise {
		background-color: lightgrey;
		border: medium black solid;
		border-radius: 15px;
		padding: .5em;
	}
	ol,ul {
		list-style-position: outside;
	}
}

@media screen {
   body {
	/*#fcfee0*/
	background: #f4faff;
	margin: 8.5%;
	margin-top: 1.5em;
	margin-bottom: .5em;
	font-family: Times, serif;
	font-size: 1.25em;
	line-height: 1.5em;
	text-align: justify;
	}
   a {
	text-decoration: none;
	color: #279bd3;
	/*outline: 1px inset #fdfdfd;*/
    }
   #content a:hover {
	/* background-color: #cee7ff; */
	outline: 2px outset #fdfdfd;
	padding: .1em;
	}
	.section_header {
		background-color: #9fff9f;
		width: 100%;
	}
	header {
		width: 100%;
		display: block;
	}
    h1,h2 {
	text-align:left;
	border-radius: 5px;
	}
	h1 {
	font-size: 2em;
	line-height: 1em;
	border-left: medium #004080;
	border-bottom: medium #004080;
	background-color: #279bd3;
	color:ivory;
	width: 100%;
	/*max-width: 80%;*/
	float: left;
	margin:0;
	margin-bottom: .5em;
	padding-left: .5em; padding-right: .25em;
	padding-bottom: 1em;padding-top:1em;
	}
    h2 {
	font-size: 1.75em;
	padding-left: .25em; padding-right: .25em;
	padding-bottom: .25em;padding-top:.25em;
	color: #0069d2;
	text-align: left;
	}
    h3 {font-size: 1.5em;}
    h4 {font-size: 1.25em}
    em {font-weight: bold; color:red;}
    img {border: none;}
/* tables */
   table {font-size: 1em; line-height: 1.2em;vertical-align: top;}
	th {font-weight: bold; font-style: italic; background: #ccff66;padding: 0.5em;}
	td {background: #cce6e6;padding: 0.5em; text-align: center;vertical-align: top;}
	td.th {font-weight: bold; font-style: italic; background: #ccff66;padding: 0.5em; font-size: .75em; font-family: Times, serif;}
	input {font-size: 1.1em}
	option {font-size: 1.2em;font-weight: bold;}
/* forms */
    textarea {
	font-family: Arial Unicode MS, Lucida Sans Unicode;
	font-size:1em;
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
    form {border: medium blue inset; padding: 1em;background-color: #f8f8f8;}
    label {font-weight: bold;}
    .button {background-color: #d4d0c8; border: thin white outset; padding-right: 0.35em; padding-left: 0.35em; padding-top: 0.2em; padding-bottom: 0.1em; font-family: sans-serif;}
/* span attributes */
	.citation {font-size: 0.85em; line-height: 1.25em; margin-left: 7.5%; margin-right: 12.5%;}
    .term {
		background-color: #ffffff;
		color: #ea0000;
		border: thin red groove;
		border-radius: 2.5px;
		padding-left: .25em;padding-right: .25em;
		}
    .important {color: red}
    .note {font-size: .6em; color:green; line-height: 1em}
    .bib {
	text-indent: -.75em;margin-left: .75em;
	margin-top: .5em; margin-bottom: .5em;
	line-height: 1.25em;
	}
   footer {font-size: 0.8em}
    .topLink, .centImg , .centred {text-align: center}
	.error {font-weight: bold; color: red; font-style: italic;}
/* samples */
    .sample {background-color: yellow; text-align:center}
    .greensample {color: green;font-weight: bold;}
    .bluesample {color: blue; font-weight: bold;}
    li div a {
	color: white;
    }
 
 /*layout  */
 /*header*/
 header {
	min-width:100%;
	display: block;
	}
/*menu button to trigger menu*/
	#menu_button{
		display: block;
		width: 20%;
	}
	.menu_button {
			display: flex;
			align-items: center;
			background: #279bd3;
			color: white;
			font-family: inherit;
			font-size: 1.2rem;
	}
	.menu_button::before {
		content: var(--url, url("./img/menuburger.svg"));
		width: 1em;
		height: 1em;
		padding-left: 0.25em;
		padding-right: 0.25em;
		top: 20;
	}
	/*actual menu, made visible on click of menu button*/
	#menu_bar {
		position:fixed;
		top: 21%;
		left: 22%;
		/*margin-top: .5em;*/
		background-color: #279bd3;
		display: inline;
		/*width: 40%;*/
		/*float: left;*/
		/*margin-bottom:1em;*/
		text-align: left;
		color: white;
		overflow: auto;
		/*height: 500px;*/
	}
	/*page content*/
	#content {
		display: inline;
		/*margin-top: 1em;*/
		width: 80%;
		padding-left: 5%;
		padding-right: 5%;
		/*float: right;*/
	}
	
	/* menu javascript menu stuff from here */
	nav ul 
	{
	line-height: 1.2em;
	list-style-type: none;
	margin:0; padding:0;
	width: auto;
	position: fixed;
	background-color: #279bd3;
	color: white;
	padding-left: .25em;
	padding-bottom: .25em;
	height: auto;
	}
	nav ul li {
	min-width: 350px;
	border-bottom: 1px solid white;
	}
	nav ul li a {
	    display: inline-block;
	    color: white;
	    text-decoration: none;
		 width: auto;
	}
	ul li:hover > a {
	    color: white;
	    background-color: #0069d2;
	}
	
	.dropdown::after {
		content: url('./img/indicator_arrow.svg');
	}
	
	.dropdown-content {
	    min-width: 200px;
	    display: none;
	    left: 175px;
	    float:left;
	    position: absolute;
	    color: white;
	    background-color: #279bd3;
		 padding-left: .25em;
	}
	.dropdown-content a {
	    background-color: #279bd3;
	    color: white;
	    text-decoration: none;
	    display: block;
	    text-align: left;
	}
	.dropdown:hover > .dropdown-content {
		display: inline-block;
		-webkit-transition: left 200ms ease-in;
		-moz-transition: left 200ms ease-in;
		-ms-transition: left 200ms ease-in;
		transition: left 200ms ease-in;
	}
    
    /* end of javascript menu stuff */
}
	

@media print {
	body {
		margin-left: 1.5cm;
		margin-right: 1.5cm;
		margin-top: 1cm;
		margin-bottom: 1cm;
	}
	h1 {font-size: 16pt;}
	h2 {font-size: 14pt;}
	h3 {font-size: 12pt;}
	p {font-size: 12pt;text-align: justify;}
	footer {font-size: 8pt;}
	.term {border: thin black groove;}
	.greensample {font-weight: bold;border: thin black dotted;}
    .bluesample {font-weight: bold;border: thin black dashed;}
	table {border-collapse: collapse;}
	table,td,th {border: 2px solid black; padding: .5em;vertical-align: top;}
	.error {font-weight: bold; border: thin black groove; font-style: italic;padding-left: 0.5em;padding-right: 0.5em;}
	div#menu_bar {
	display: none;
	/* visibility: hidden; */
	}
}