@charset "utf-8";

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* CSS Document */

body {
 /* font-family: "Lato", sans-serif;*/
	font: 100%/1.4 Calibri, Verdana, Arial, Helvetica, sans-serif;
}

.tutorial_side {
	padding: 15px;
}

/*------------------*/
/*side navigation bar for desktop display (>600 wide)*/
.sidenav {
	height: 100%;
	width: 240px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
/*	background-color: #111;*/
	background: #eee;
	overflow-x: hidden;
	padding-top: 20px;
}

/*hide sidenav on small screens (mobile) */
@media screen and (max-width: 600px) {
  .sidenav {
    display: none;
  }
}

.sidenav a {
	padding: 6px 8px 6px 16px;
	text-decoration: none;
/*  font-size: 25px;*/
	font: 100% Verdana, Arial, Helvetica, sans-serif;
/*	color: #818181;*/
	color: #2196F3;
  	display: block;
}

.sidenav a:hover {
/*	color: #f1f1f1;*/
	color: #064579;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}




/*-----------------*/
/* general layout for tutorials*/
.main_tutorial {
	margin-left: 240px; /* Same as the width of the sidenav */
	font-size: 12pt; /* Increased text to enable scrolling */
	padding: 0px 10px;
}
/* sidenav hidden on small screens, so expand tutorial*/
@media screen and (max-width: 600px) {
.main_tutorial {
	margin-left: 10px; /* Same as the width of the sidenav */
	font-size: 12pt; /* Increased text to enable scrolling */
	padding: 0px 10px;
}

}
.main_tutorial a {
	color: #003399;
	text-decoration: underline;
}

.main_tutorial h1 {
	font-size: 28pt;
	font-weight: bold;
	color: #039;
}

.main_tutorial h2 {
	font-size: 22pt;
	font-weight: bold;
	font-style: italic;
	color: #039;
}

.main_tutorial h3 {
	font-size: 18pt;
	font-weight: bold;
	font-style: italic;
	color: #039;
	padding-top: 30px;
}

.main_tutorial h4 {
	font-size: 15pt;
	font-weight: bold;
	color: #039;
}

.main_tutorial h5 {
	font-size: 14pt;
	font-style: italic;
	color: #039;
}

.main_tutorial h6 {
	font-size: 12pt;
	font-style: italic;
	color: #039;
}

.main_tutorial hr {
	border: 1px solid #999; 
	background-color: #999;
}


.indent1 {
	padding-left: 25px;
}


/*------------------*/
 /* Style the mobile navigation menu (only visible on narrow screens < 600*/
 /*should come AFTER main_tutorial, since re-styles links*/
.mobile-nav {
  overflow: hidden;
  background-color: #eee;
/*  position: relative;
*/  
  position: -webkit-sticky; /* Safari */  
  position: sticky; 
  top: 0;
  z-index: 1;
}

@media screen and (min-width: 600px) {
	.mobile-nav {
    display: none;		
	}
}
/* Hide the links inside the navigation menu (except for logo/home) */
.mobile-nav #myMobileLinks {
  display: none;
}

/* Style navigation menu links */
.mobile-nav a {
  color: #2196F3;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
  display: block;
}

/* Style the hamburger menu */
.mobile-nav a.icon {
  background: #ccc;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.mobile-nav a:hover {
  background-color: #ddd;
  color: #064579;
}

/* Style the active link (or home/logo) */
.mobile-active {
  background-color: #4CAF50;
  background-color: #eee;
  color: white;
}



/*------------------------*/
/* Tooltips modified from https://www.webfx.com/blog/web-design/css-only-tooltips/*/
.tooltip {
	border-bottom: 1px dotted #000000;
	color: #003399;
	outline: none;
	cursor: help;
	text-decoration: none;
	position: relative;
}
.tooltip a {
	text-decoration: none;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);	
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
/*
This positions the tooltip centred below the link text,
BUT if the link is at the edge of the page, the tooltip will be part obscured
	position: absolute; left: 1em; top: 2em; z-index: 99;
*/

/*Position tooltip centred  on the page */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;

	margin-left: 0; 
	width: 250px;
    z-index:999;
}

.tooltip:hover img {
	border: 0; 
	margin: -10px 0 0 -55px;
	float: left; 
	position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; 
	font-size: 1.2em; 
	font-weight: bold;
	display: block; 
	padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
/*
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
*/



/*
Modal box from:
https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
but the close button does not look good - simplified it
Also added query for mobiles, and vertical scroll
*/
.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  
  	font: 100%/1.4 Calibri, Verdana, Arial, Helvetica, sans-serif;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window > div {
  width: 600px;
  position: relative;
  margin: 2% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
  
  max-height: 100%;
  overflow-y: auto;  
}

/* make narrow on mobiles*/
@media screen and (max-width: 600px) {
	.modal-window > div {
	  width: 300px;
	  position: relative;
	  margin: 2% auto;
	  padding: 2rem;
	  background: #fff;
	  color: #444;
	   
	  max-height: 100%;
	  overflow-y: auto;
	}
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
	color: #aaa;
	line-height: 1.4;
	font-size: 140%;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 70px;
	text-decoration: none;
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}
.modal-window h2 {
	font-size: 125%;
	margin-bottom: 5px;
}
/* to reduce the space between heading and para, have to change margins for both, or just takes largest*/
.modal-window p {
	margin-top: 0px;
}

/* --------------*/
/*menu for mobiles. Will only show on screens with width < 600*/

/* general colours etc*/
.red_txt {
	color: red;
}
.hint_txt {
	color: #F0F;
	font-weight: normal;
}

.note_txt {
	color: #F6F;
	font-weight: normal;
}
.param_file  a {
	color: #090;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;	
	border-bottom: 1px dotted #000000;
}
.param_file_5_2 a{
	color: #C93;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 1px dotted #000000;
}

.param_txt {
	color: #090;
	font-style: italic;
	font-weight: bold;	
}

.legend {
	font-size: 90%;
	color: #36F;
	width: 80%;
}

figure img {
	margin-left: 20px;
	margin-right: 40px;
	margin-bottom: 10px;
	float: left;
}
figcaption {
	font-size: 90%;
	color: #36F;
	padding:10px;
	width: 80%;
}

/*used as class for series of images in one fig, will be on 1 line if wide enough, else wraps*/
.fig-seq {
	float: left;
	margin-right: 8px;
	margin-left: 20px;
}

/*for a, b, c etc to left of image in multi-part fig*/
.fig-id {
	float: left;
	line-height: 100px;	
}

.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.SubList
{
	list-style-type:none; 
}
.ListSubtext
{
	list-style-type:none; 
	padding-left: 15px	
}

.resp-img, video {
	max-width: 100%; 
	height: auto;	
}

aside {
	font-size: small;
	line-height: normal;
}

.NoList {
	list-style-type: none;
}

.lower25 {
	vertical-align: -25%;
}
.lower15 {
	vertical-align: -15%;
}