/* 2018 */
@import url('https://fonts.googleapis.com/css?family=Noto+Serif|Noto+Sans');

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

html {
  font-family: 'dyslexieregular','Noto Sans', sans-serif;
  color: #000;
  background-attachment: fixed;
	/* gradient with retro SVG pattern ("Circles & Squares") from https://www.heropatterns.com/ on top */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b31e5799', endColorstr='#0080ed9e',GradientType=0 ); /* IE6-9 */
	background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%233f5db8' fill-opacity='0.31' fill-rule='evenodd'/%3E%3C/svg%3E"),  -moz-linear-gradient(top, rgba(30,87,153,.5) 0%,rgba(98,178,157,1) 46%,rgba(122,225,158,1) 66%,rgba(128,237,158,1) 100%);
	background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%233f5db8' fill-opacity='0.31' fill-rule='evenodd'/%3E%3C/svg%3E"),  -webkit-linear-gradient(top, rgba(30,87,153,.5) 0%,rgba(98,178,157,1) 46%,rgba(122,225,158,1) 66%,rgba(128,237,158,1) 100%);
	background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%233f5db8' fill-opacity='0.31' fill-rule='evenodd'/%3E%3C/svg%3E"),  linear-gradient(top, rgba(30,87,153,.5) 0%,rgba(98,178,157,1) 46%,rgba(122,225,158,1) 66%,rgba(128,237,158,1) 100%);
  background-color: #69d1e1; /* blue */
}

body{
  position: relative;
  max-width:64rem;
  width: 98%;  width: 98vw;
  margin: 1rem auto;
  padding: 1.6rem;  padding: 2.2vw;
  border: 1px solid #F9F;
  border-radius: .3em;
  background-color: #FDFDEE; /* bone */
  background-color: #FDFCF9; /* bone */
  box-shadow: 
  0 6px 5px 0 rgba(30,87,153,.3) inset,
  0 10px 16px 0 rgba(98,178,157,0.2) inset,
  0 36px 24px 0 rgba(128,237,158,.1) inset;
}


h1, h2, h3, h4 {
	margin: .6rem 0;
	font-family: 'dyslexieregular','Noto Serif', serif;
}
h1 {font-size: 2rem;}
h2 {font-size: 1.3rem;}
h3 {font-size: 1.1rem;}
h4{font-size: 1rem; text-transform:capitalize;}
h5 {display:inline; weight:bold;}

p {line-height:1.5rem; }

ul{
margin-top: 1em;
}

blockquote {
margin-top: 1rem;
padding-top:1rem;
padding-left:1rem;
border-left: 1px solid #6494c9;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,62b29d+1,80ed9e+6&0.7+0,0+5 */
background: -moz-linear-gradient(top, rgba(30,87,153,0.4) 0%, rgba(98,178,157,0.2) 6px, rgba(122,225,158,0) 25px, rgba(128,237,158,0) 30px); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,0.4) 0%,rgba(98,178,157,0.2) 6px,rgba(122,225,158,0) 25px,rgba(128,237,158,0) 30px); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,0.4) 0%,rgba(98,178,157,0.2) 6px,rgba(122,225,158,0) 25px,rgba(128,237,158,0) 30px); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b31e5799', endColorstr='#0080ed9e',GradientType=0 ); /* IE6-9 */
}

	fig {
	display:block;
	max-width:100%; 
	text-align:center;
}
	img {
	box-shadow: 1px 1px 2px rgba(0,0,0,.4);
	max-width: 100%;
	height: auto;
}

.problem, .caveat, .alert {color: #F03; font-size: 80%;}
.hide: {display:none;}


/*   Classes and whatnots used for GUIDES  */

	.vButton, .vTab, .aside, .checklist {
	font-size:.9rem;
	display:inline-block;
	padding: 2px 4px;
	border-radius:.2em; 
}

	.vButton {
	margin: 2px 0;
	min-width: 3ch;
	text-align:center;
	border: 1px solid rgba(0, 51, 196,.2);
    box-shadow: 1px 1px 12px 0 rgba(153, 153, 128,.1) inset, 
				-1px -1px 12px 0 rgba(153, 153, 128,.2) inset, 
    			1px 1px 2px 0 rgba(0, 153, 255,.5) inset, 
				-1px -1px 2px 0 rgba(0, 120, 255,.5) inset; 
}
		.disabled {border-top: 0; border-right:0; border-left: 0;
				box-shadow: -1px -1px 2px 0 rgba(153, 153, 153,.5) inset, 
				1px 1px 2px 0 rgba(153, 153, 153,.5) inset;}

	.vTab {
	text-transform:uppercase;
	font-weight:normal;
	border-radius:.2em .2em 0 0;		
    box-shadow: 
		0 .2em .8em 0 rgba(153, 153, 128,.2) inset, 
		2px -1px 2px 0 rgba(0, 31, 102,.3), 
		-1px 0 0 0 rgba(0, 31, 102,.1); 
}
	.progName{
}
	.tip, .checklist, .save {
	border: 1px solid rgba(0, 51, 196,.2);
    box-shadow: 1px 1px 12px 0 rgba(153, 153, 128,.1) inset, 
				-1px -1px 12px 0 rgba(153, 153, 128,.2) inset; 
	 display:table;
	 padding: 1em;
	 background-color: rgba(255,255,255,.5);
}
	.checklist, .save {
	 background-color:white;
	 padding: 2.2vw;
	 margin: 1em auto;
}
	
	.checklist ol li~li {margin-top: .8em;}