@charset "UTF-8";

/* fonts */
@font-face {
	font-family: "LatoBlack";
	src: url("fonts/Lato-Black.eot");
	src: url("fonts/Lato-Black.eot?#iefix") format("embedded-opentype"),
	     url("fonts/Lato-Black.woff2")      format("woff2"),
	     url("fonts/Lato-Black.woff")       format("woff"),
	     url("fonts/Lato-Black.ttf")        format("truetype");
	font-style:     normal;
	font-weight:    normal;
	text-rendering: optimizeLegibility;
}
@font-face {
	font-family: "LatoRegular";
	src: url("fonts/Lato-Regular.eot");
	src: url("fonts/Lato-Regular.eot?#iefix") format("embedded-opentype"),
	     url("fonts/Lato-Regular.woff2")      format("woff2"),
	     url("fonts/Lato-Regular.woff")       format("woff"),
	     url("fonts/Lato-Regular.ttf")        format("truetype");
	font-style:     normal;
	font-weight:    normal;
	text-rendering: optimizeLegibility;
}

* {
	/* 100% should be 100% with padding, pls */
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

body {
	font-family:      "LatoRegular", Helvetica, Arial, sans-serif;
	font-size:        16px;
	margin:           0;
	padding:          0;
	background-color: rgb(30,30,30);
	overflow-x:       hidden;          /* no horizontal scrolling, pls */
}

h1 {
	font-family: "LatoBlack", Helvetica, Arial, sans-serif;
	font-size:   2.5em;
	margin:      0.6em 0 -0.3em 0;
}
strong {
	font-weight: 900;
}
p {
	font-size:   1em;
	font-weight: 400;
	line-height: 1.3em;
}

a, a:link, a:visited {
	text-decoration: underline;
	color:           black;
}
a:hover {
	color:           rgb(2, 170, 228);	 /*rgb(120,120,120);*/
}

/* canvas */
#main {
	margin-bottom:    3em;
}

/* info toggle button */
#toggleInfoButton {
	color:            black;
	position:         absolute;
	left: 			  1em;
	top:              0.8em;
	z-index:          1;
	padding:          0;
	margin:           0;
	background-color: rgba(255,255,255,0);
	border: 		  none;
	outline:          0;
	font-size:        2em;
	transition:       color 0.33s;
}
#toggleInfoButton:hover {
	cursor:           pointer;
}
#showButton, #closeButton {
	transition:       color 0.33s;
}
#showButton {
	color:            rgba(255,255,255, 0.6);   /* match lines in sketch */
}
#showButton:hover {
	color:            white;
}
#closeButton {
	color:            black;
}
#closeButton:hover {
	color:            rgba(2, 170, 228, 0.6);
}

/* info itself */
#info {
	position: 		  absolute;
	left:             0;
	top:              0;
	width:            100%;
	padding:          3em 3em 3em 2em;
	background-color: white;
	opacity:          1;
	transition:       opacity 0.5s;
	text-align:       justify;
}
#info.hide {
	display:          none;
}
::-moz-selection, ::selection {
	background-color: rgba(2, 170, 228);
	color:            white;
}

/* audio controls/info */
#volumeToggle {
	width:            33px;
	margin-left:      0.2em;
	filter:           opacity(25%);
	transition:       all 0.33s;
}
#volumeToggle:hover {
	cursor:           pointer;
	filter:           opacity(100%);
}
#audioInfo {
	color:            rgba(0,0,0, 33%);
	cursor:           pointer;
	transition:       color 0.33s;
}
#audioInfo:hover {
	color:            rgb(2, 170, 228);
}

#byline span+span:before {
	content:          "\A";	  /* line-break character */
	white-space:      pre;	  /* lets linebreak character work (not sure why) */ 
	line-height:      2em;
}

/* quotes in info */
.quote, .citation {
	font-weight:   400;
	padding-left:  0.6em;
	border-left:   2px solid rgb(91,190,245);
}
.quote {
	margin-top:  1.6em;
}
.citation {
	margin:      -1.15em 0 1.6em 0;
	padding-top: 0.6em;
	text-align:  right;
}

/* info on larger screens */
@media screen and (min-width: 700px) {
	#byline span+span:before {
		content:     "\00a0\00a0|\00a0\00a0\00a0";
		white-space: normal;
	}
	#info {
		width:       50%;
		max-width:   600px;
		min-width:   400px;
	}
}