/* FONT FACE */
@font-face {
	font-family: "PatrickHand";
	font-style: normal;
	font-weight: 400;
	src: url(PatrickHand-Regular.ttf) format('truetype');
	/*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/
}

/* HTML & BODY */
html, body{
	width:100%;
	height:100%;
	overflow: hidden;
	cursor: none;
}
body{
	margin:0;

	font-family: "PatrickHand";
	font-size: 23px;
	line-height: 1.5em;

}
/* fake bold */
b, strong{
	font-weight: normal;
	text-shadow:1px 0 0 currentColor;
}

/* SIMULATION and SLIDESHOW */
#container{
	position: absolute;
	top:0; left:0;
	width: 100%;
	height: calc(100% - 60px);
	cursor: none;
}
#container[sim_is_running]{
	background: #eee;
}
#container > div{
	position: absolute;
	width: 100%; height: 100%;
	overflow: hidden;
	cursor: none;
}
#simulations, #slideshow{
	position: absolute;
	width: 960px;
	height: 540px;
	margin: auto;
	top:0; left:0; right:0; bottom:0;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}
#simulations canvas, #slideshow > div{
	position: absolute;
}
#slideshow .box.image{
	background-size: 100% 100%;
}
#slideshow .next_button{
	/*display: inline-block;*/
	margin: 0 auto;
	position: relative;
	top: -10px;
	width: 300px;
    height: 20px;
    padding: 40px 0;
	background-image: url(../sprites/button_large.png);
	background-size: 100% auto;
	text-align: center;
	line-height: 25px;
}
#slideshow .next_button:hover{
	background-position: 0 -100px;
}
#slideshow .next_button[disabled]{
	pointer-events: none;
	opacity: 0.3;
}
.transitionable{
	transition: opacity 0.3s ease-in-out,
			    left 0.3s ease-in-out,
			    top 0.3s ease-in-out;
}
#scratch{
	display: none;
	pointer-events: none;
	background-image: url(../sprites/scratch.png); 
	background-size: 200% 2000%;
    background-position: 0% 0%;
}

/* Peep Icon */
.peep_icon{
	height:1em;
	position: relative;
    top: 3px;
    transform: scale(1.2);
}

/* Sim UI */
.sim_ui{
	position: absolute;
	width: 200px;
	height: 100px;
	border: none !important;
}
.sim_ui > div{
	position: absolute;
	color: #fff;
	text-align: center;
	border-radius: 10px;
}
.sim_ui > #start_button{
	width: 200px;
	padding: 0.5em 0;
	background-image: url(../sprites/red_button.png);
	background-size: 100% auto;

	position: relative;
	top:0;
	transition: top 0.1s ease-in-out;
}
.sim_ui[active] > #start_button{
	background-position: 0 -62.5px;
}
.sim_ui > #start_button:hover{
	top:-3px;
}
.sim_ui > #start_button:active{
	top:3px;
}

/* Sandbox UI */
.sandbox_ui{
	width: 270px;
}
.sandbox_ui input[type="range"]{
	width: 100%;
	cursor: none;
}
.choose_one{
	overflow: hidden;
}
.choose_one > div{
	float: left;
	margin: 3px;
	opacity: 0.25;
}
.choose_one > div[selected]{
	opacity: 1;
}
.choose_color{
	width: 40px;
	height: 40px;
	background: url(../sprites/peeps.png);
	background-size: auto 100%;
	transform: scale(1.2);
}
.choose_tool{
	background: #fff;
	font-size: 16px;
	line-height: 16px;
	border: 1px solid black;
	padding: 3px;
	border-radius: 5px;
}
.choose_tool > #icon{
	display: inline-block;
	width:16px; height:16px;
	background: url(../sprites/sandbox_tools.png);
	background-size: auto 100%;
}
#sandbox_shortcuts_label{
	font-size: 18px; 
}
#sandbox_shortcuts{
	font-size: 14px;
	line-height: 1.5em;
	color: #999;
}

/* MODAL */
#modal_container{
	top:100%;
	transition: top 0.4s ease-in-out;
}
#modal_container[show]{
	top:0%;
}
#modal_bg{
	width: 100%;
	height: 100%;
}
#modal{

	position: absolute;
	margin: auto;
    top:0; left:0; right:0; bottom:0;

	background: #444;
	color: #fff;

}
#modal h3{
	font-size: 1.5em;
    margin-bottom: 0.5em;
}
#modal[size=small]{
	width: 640px;
	height: 300px;
}
#modal[size=large]{
	width: 800px;
	height: 450px;
}
#modal_close{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 50px;
    text-align: center;
    line-height: 25px;
}
#modal_content_container{
	overflow: auto;
	width: 100%; height:100%;
}
#modal_content{
	margin:1.5em;
	letter-spacing: 1px;
}

/* NAVIGATION */
#navigation_container{
	position: absolute;
	bottom:0;
	background: #222;
	width: 100%;
	height:60px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}
#navigation{
	position: absolute;
	top: 10px;
	left: calc(50% - 300px);
	width: 600px;
	text-align: center;
}
#navigation > div{
	width: 35px;
	height: 35px;
	background: #222;
	color:#fff;
	border-radius: 20px;
	display: inline-block;
	border: 1px solid #fff;
	margin: 0 1px;
	text-align: center;
	overflow: hidden;
	line-height: 34px;
}
#navigation > div[highlight]{
	background: #fff;
	color: #222;
}
#navigation > div > span:nth-child(1){
	display: block;
}
#navigation > div > span:nth-child(2){
	display: none;
}
#navigation > div:hover{
	background: rgba(255,255,255,0.25);
}
#navigation > div[highlight]:hover{
	background: #fff;
}
#navigation > span.nav_divider{
	width: 2px;
	height: 40px;
	background: rgba(255,255,255,0.2);
	border-radius: 20px;
	display: inline-block;
	margin: 0 8px;
}
#navigation > span#nav_bubble{
	
	transition: opacity 0.2s ease-in-out,
			    left 0.2s ease-in-out,
			    top 0.2s ease-in-out;

	display: none;
	opacity: 0;
	
	position: absolute;
	top:-80px;
	left:0;
	
	background: rgba(0,0,0,0.8);
	color: #fff;
	text-align: center;
	border-radius: 20px;
    
    width: 220px;
    padding: 6px 0;

}
#navigation > span#nav_bubble:after{
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: rgba(0,0,0,0.8);
	border-width: 15px;
    margin-left: -15px;
}

/* PENCIL */
#pencil{
	position: absolute;
	width:100px;
	height:100px;
	pointer-events: none;
	cursor: none;
}

/* PRE-PRELOADER */
#pre_preloader{
	position: absolute;
	background: #fff;
	width:100%;
	height: 100%;
	cursor: default;
}
#pre_preloader > div{
	text-align: center;
	width:300px; height:40px;
	line-height: 40px;
	font-size: 40px;
	margin: auto;
	position: absolute;
	top:-40px; left:0; right:0; bottom:0;
}

/* THIS THING'S WORDS */
words, bonus, reference{
	display: none;
}

/* BONUS BOX */
bon{
    margin: 0.75em 0;
    display: block;
    background: #ccc;
    color: #444;
    padding: 15px 20px;
    width: 280px;
    line-height: 1.1em;
    border-bottom: 4px solid rgba(0,0,0,0.25);
}
bon:hover{
	background: #ddd;
    color: #666;
}

/* REFERENCES */
ref{
	position: relative;
    display: inline-block;
    padding-left: 2px;
    width: 21px;
}
ref:before{
	content: '*';
    background: #ddd;
    color: #444;
    padding: 3px;
    width: 15px;
    height: 15px;
    display: block;
    line-height: 26px;
    border-radius: 20px;
    font-size: 30px;
    position: absolute;
    text-align: center;
    top: -25px;
}
ref:hover:before{
	background: #eee;
	color: #999;
}

/* TO SEE LAYOUT */
.box, #simulations{
	/*border: 1px solid #eee;*/
}

/* A NICE CIRCLE */
/* Thanks to: https://skeate.github.io/2015/07/13/Wrapping-Text-to-Fit-Shaped-Containers-with-CSS.html */
.circle {
  /*background: #accede;*/
  text-align: center;
  width: 540px;
  height: 540px;
  border-radius: 100%;
}
.circle::before {
  content: '';
  height: 100%;
  width: 50%;
  float: left;
  shape-outside: polygon(0 0, 100% 0, 60% 4%, 40% 10%, 20% 20%, 10% 28.2%, 5% 34.4%, 0 50%, 5% 65.6%, 10% 71.8%, 20% 80%, 40% 90%, 60% 96%, 100% 100%, 0% 100%);
}
.circle > span::before {
  content: '';
  height: 100%;
  width: 50%;
  float: right;
  shape-outside: polygon(100% 0, 0 0, 40% 4%, 60% 10%, 80% 20%, 90% 28.2%, 95% 34.4%, 100% 50%, 95% 65.6%, 90% 71.8%, 80% 80%, 60% 90%, 40% 96%, 0 100%, 100% 100%);
}