/*====  Copyright (c) 2017-2018 The Wizard Of Finity  ====*/


a, h1, h2, p, div, ul, li, textarea, pre, table, td, tr 
	{ padding: 0px; margin: 0px; border: none; font-weight: inherit;}	
li { margin-left: 1em; }	
h3 { margin-bottom: 0.2em; }	

body { font-size: 16px;  margin: 0px;}
body, header p { color:#DDD; }
#runpage { text-align: center; margin: 0px 6%; }

header h1 { font-size: 340%; }
header h1, header p.subtitle, header a { display: block; text-decoration: none; }
header p.subtitle { font-size: 170%; margin-top: -5px;}
header h1 { color: #5555ff; }
header div a  { max-width: 600px; margin: auto; }
header:hover p { text-decoration: underline; }

h1, h2, header p.subtitle, body
	{ font-weight: 400; font-family: "Maven Pro","Open Sans","Ubuntu",Georgia,Arial,sans-serif; }
header { margin: 2em 0px 3.5em 0px; }


main h1 { font-size: 150%; max-width:100%; overflow: hidden; margin-top: 2em; }
#errMsg { color: #F88; font-size: 130%; display: none; margin: 0.7em auto;}
div.loading { position: relative; background-color: #666; max-width: 170px; margin:  0.7em auto 0.9em auto; 
	min-height: 1.4em; }
div.loading p { position: relative; /*z-index:10;*/ }
#loadingPerc { position:absolute; background-color: #3b41e6; width:0px;  height:100%; }

.rBtn { font-family: "Hind","Open Sans","Arimo","Arial",sans-serif; cursor: pointer; }
.rBtn:hover { background-color: #4f4f4f; color: #EEE; }
.rBtn { display: block; margin: auto; width: 140px; font-size: 110%; 
		line-height: 40px; text-align: center; background-color: #393939; }

#pauseBtn {margin-bottom: 1.6em;}
		
#sharebox > h2 { font-size:130%; margin: 0px 0px 10px 0px; }
#sharebox { display: none; margin: 0px 0px 2.5em 0px; }

#primage { height:150px; max-width:300px; overflow: hidden; margin: 1em auto; display: block;}
#primage > div { height:150px; width:2000px; overflow: hidden; margin-left: -850px; }
#primage > div > img { height:146px; width:auto; margin: 0; padding: 0; border: 2px solid #000; }

#fullscr { position: fixed; top:0px; left:0px; right: 0px; bottom:0px; background-color: #141414; 
		opacity:1.0; text-align: center; z-index: 100; }
#fullscr canvas { height:100%; width:auto; padding: 0px; margin: 0px; }
#fullscr div { height:100%; width:auto; margin:auto; }

#fullscr.progEnd { position: static; background-color: transparent;  }
#fullscr.progEnd div { border: 2px solid #000; display: inline-block; }
#fullscr.progEnd canvas { height:auto; max-height:300px; max-height:60vh; max-width:100%; display: block; }
#fullscr #exitButton { display: none; cursor: pointer; background-color:#272727; position:fixed; width:100%; top:0px; text-align:center; color:#888; line-height:40px; }

	
#sourcediv { margin-top:20px; }
#sourcediv a { color:#aaf; }
#sourcediv p { margin: 1em auto;}
#sourcediv > div { display: none; padding-bottom: 2em;}
#sourcediv textarea { width:100%; max-width:97%; height:400px; height:55vh; padding: 2px; margin-left: 1.1%;}
#sourcediv textarea { font-size: 14px; }	
#sourcediv textarea, pre {font-family:"Roboto Mono","DejaVu Sans Mono","Droid Sans Mono", monospace; 
	    tab-size:4; -moz-tab-size: 4;  }			
#sourcediv textarea { background-color: #333; color: #beb7b7; line-height: 1.3em; }
#sourcediv #editor>*  { display:none; }
#sourcediv #editor li  { list-style-type: none; }

#pibtn { margin: 1em auto; text-align: center;}	
#pibtn li { display: inline-block; list-style-type: none; margin: 0.3em;}		
#prinfo {  text-align: center; }
#prinfo ul { display: inline-block; text-align: left; max-width: 600px; }
#prinfo ul li { margin: 0.4em 1em; }
#prinfo ul li pre { max-width: 580px; overflow: auto; font-size: 90%;}
	
/***********************************************************************/
	#socshare { opacity: 1.0; }
	#socshare { display:block; margin:auto; padding:2px 0px 1px 12px; }	
	#socshare .social-share-facebook  {  background-position:    0px 0px; }
	#socshare .social-share-twitter   {  background-position:  -40px 0px; }
	#socshare .social-share-googleplus{  background-position:  -80px 0px; }
	#socshare .social-share-linkedin  {  background-position:  -120px 0px; }
	#socshare .social-share-pinterest {  background-position: -160px 0px; }
	#socshare .social-share-reddit    {  background-position: -200px 0px; }
	#socshare a {
		margin-bottom: 0.7em;
		background-image: url(icons8darkRow1.png);
		text-indent: -9999px;display: inline-block; padding-right:1px; margin-right:6px;
		background-size: auto 32px; height: 32px; width: 32px; background-repeat: no-repeat;
		}	

	
/***********************************************************************/	

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Maven Pro'), local('Maven-Pro-regular'), url(fonts/Maven-Pro-regular.woff) format('woff');  
}

@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: local('Hind'), local('Hind-regular'), url(fonts/Hind-regular.woff) format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito'), local('Nunito-regular'), url(fonts/Nunito-regular.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('Roboto-Mono-regular'), url(fonts/Roboto-Mono-regular.woff) format('woff');  
}
/*@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Mono'), local('Roboto Mono Light'), url(fonts/Roboto-Mono-300.woff) format('woff');  
}*/
/*@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Mono'), local('Roboto Mono Medium'), url(fonts/Roboto-Mono-500.woff) format('woff');  
}*/
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('Source-Code-Pro-regular'), url(fonts/Source-Code-Pro-regular.woff) format('woff');  
}
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 400;
  src: local('Andika'), url(fonts/Andika-regular.woff) format('woff');
}