/* CSS Style Sheet */
/* Copyright 2016 Zoidiasoft Technologies */

/* Basic Elements */

body { 
	font-family:Arial, Tahoma, Verdana;
	color:#000;
	z-index:1;
}

img, embed, object, video {
	max-width: 100%;
}

/* ID's */

#mysteries {
	display:none;
}

/* Classes */

* {
	-webkit-box-resizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-resizing: border-box;
	box-sizing: border-box;
}

.maincontent {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	font-size:1.5em;
}

menu.addEventListener('click', function(e) {
  drawer.classList.toggle('open');
  e.stopPropagation();
});

.mainnav {
  font-size:1.5em;
  width: 300px;
  position: absolute;
  /* This trasform moves the drawer off canvas. */
  -webkit-transform: translate(-300px, 0);
  transform: translate(-300px, 0);
  /* Optionally, we animate the drawer. */
  transition: transform 0.3s ease;
}
.mainav.open {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

h1, h2, h3, h4 {
	padding-left:20px;	
}

h1 {
	font-size:24px;	
}

h2 {
	font-size:21px;	
}

h3 {
	font-size:18px;	
}

blockquote {
	padding-left:-40px;
}

p {
	padding-top:0px;
	padding-bottom:0px;
	padding-left:20px;
	padding-right:10px;
	margin-bottom:10px;
}

pre {
	padding-top:-20px;
	padding-bottom:30px;
	padding-left:20px;
	padding-right:10px;
	margin-bottom:30px;
}

b {
	font-size:18px;
}
	
ul {
	margin:0;
	padding:20px;
	float:none;
	list-style:none;
}
	
li {
	clear:left;  /* hack for Netscape to clear lists correctly */
	min-width:  48px;
	min-height: 48px;
}

/* 
Style for Desktops/Laptops 
*/
table {
  margin-left:20px;
}

table.matrix { 
  width: 90%; 
  border-collapse: collapse; 
}

/* Zebra striping */

tr.matrix:nth-of-type(odd) { 
  background: #eee; 
}

th.matrix { 
  background: #eee; 
  color: black; 
  font-weight: bold; 
}

td.matrix, th.matrix { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

/* Linking */

a:link { 
	text-decoration:none;
	color:#D94709;
	font-size: 18px;
	min-width:  48px;
	min-height: 48px;
}

a:visited { 
	text-decoration:none;
	color:#D94709;
	min-width:  48px;
	min-height: 48px;
}

a:hover, a:active { 
	color:#cf0;
	background-color:#121;
	min-width:  48px;
	min-height: 48px;
}

a:link.ph {
	color:#000;
}

a:visited.ph {
	color:#000;
}

a:hover.ph, a:active.ph { 
	color:#000;
	background-color:#FFF;
}

sup {
	font-size:12px;
}

a, button {
	min-width:  48px;
	min-height: 48px;
}