@charset "UTF-8";


/* @font-face declarations */

@font-face {
	font-family: 'HKGrotesk';
		src: url('fonts/hkgrotesk/HKGrotesk-Medium.eot');
		src: local('☺'), url("fonts/hkgrotesk/HKGrotesk-Medium.woff") format("woff"), url("fonts/hkgrotesk/HKGrotesk-Medium.otf") format("opentype");
    font-weight:normal;
    font-style:normal;
}
@font-face {
	font-family: 'HKGrotesk';
		src: url('fonts/hkgrotesk/HKGrotesk-MediumItalic.eot');
		src: local('☺'), url("fonts/hkgrotesk/HKGrotesk-MediumItalic.woff") format("woff"), url("fonts/hkgrotesk/HKGrotesk-MediumItalic.otf") format("opentype");
    font-weight:normal;
    font-style:italic;
}
@font-face {
	font-family: 'HKGrotesk';
		src: url('fonts/hkgrotesk/HKGrotesk-Bold.eot');
		src: local('☺'), url("fonts/hkgrotesk/HKGrotesk-Bold.woff") format("woff"), url("fonts/hkgrotesk/HKGrotesk-Bold.otf") format("opentype");
    font-weight:bold;
    font-style:normal;
}
@font-face {
	font-family: 'HKGrotesk';
		src: url('fonts/hkgrotesk/HKGrotesk-BoldItalic.eot');
		src: local('☺'), url("fonts/hkgrotesk/HKGrotesk-BoldItalic.woff") format("woff"), url("fonts/hkgrotesk/HKGrotesk-BoldItalic.otf") format("opentype");
    font-weight:bold;
    font-style:italic;
}

@font-face {
	font-family: 'JeanLucWeb-Bold';
		src: url('fonts/jeanluc/jeanlucweb-bold.eot');
		src: local('☺'), url("fonts/jeanluc/jeanlucweb-bold.woff") format("woff"), url("fonts/jeanluc/jeanlucweb-bold.otf") format("opentype"), url("fonts/jeanluc/jeanlucweb-bold#webfontup15foyj") format("svg");
}

@font-face {
	font-family: 'JeanLucWeb-Thin';
		src: url('fonts/jeanluc/jeanlucweb-bold.eot');
		src: local('☺'), url("fonts/jeanluc/jeanlucweb-thin.woff") format("woff"), url("fonts/jeanluc/jeanlucweb-thin.otf") format("opentype"), url("fonts/jeanluc/jeanlucweb-thin#webfontdsa4toug") format("svg");
}

@font-face {
	font-family: 'spungold';
		src: url('fonts/spungold/spungold.eot');
		src: local('☺'), url("fonts/spungold/spungold.woff") format("woff"), url("fonts/spungold/spungold.otf") format("opentype");
}

/*
The Jean-Luc typeface was designed and made by Atelier Carvalho Bernau on the occasion of the 80th birthday of Jean-Luc Godard. It is available free of charge from http://www.carvalho-bernau.com/jlg/

Jean-Luc typeface Copyright (c) 2010 Atelier Carvalho Bernau
*/

* {
    box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
  font-family: "HKGrotesk";
  font-size: 1rem;
}

p {
	margin: 0;
	margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.15);;
  margin: 1rem 0 ;
}

code {
	font-size: .8rem;
	padding: .1rem .3rem;
	background: rgba(0,0,0,.15);
	font-family: 'whoismono', monospace;
	margin: .1rem 0;
	display: inline-block;
}

.hide {
	display: none;
}

header p {
	margin: 0;
}

header ul {
	margin: 0;
	margin-bottom: 1rem;
}
header li {
	list-style-type: "– ";
	margin-left: .8rem;
	list-style-position: outside;
}

header u {
	text-decoration: none;
	border-bottom: 1px solid;
}

header .full a {
	border: 0;
	text-decoration: underline;
}

#container {
	width: 100%;
	height: 100%;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
}

nav {
	flex: 1;
	border-right: 1px solid #ddd;
	flex-direction: column;
	display: flex;
	font-family: 'spungold';
	font-size: 1.2rem;
	box-shadow: .2rem 0rem .2rem rgba(0,0,0,.05);
	z-index: 9;
}

article {
  flex: 3;
	z-index: 1;
	overflow: hidden;
}

article.loading iframe {
	opacity: 0;
}

ul, li {
  margin: 0;
  padding: 0;
	list-style-type: '- ';
	list-style-position: inside;
}

ul {
	margin-bottom: 1rem;
}

nav ul {
	padding: 0;
	overflow: auto;
	margin: 0;
}

nav li {
	padding: 1rem;
	border-bottom: 1px solid #ddd;
	list-style-type: none;
}

nav li.active a {
	border-bottom: 1px solid;
}

nav li.settings {
	background-color: #eee;
	border-bottom: 1px solid #ddd;
}

nav li.settings:last-child {
	border-bottom: 1px solid #ddd;
}

nav ul.menu {
	flex: 1;
}

nav ul.helpers {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin-top: -1px;
}

nav ul.helpers {
	display: flex;
}

nav ul.helpers li {
	flex: 1;
}

nav ul.helpers li {
	border: 0;
	border-right: 1px solid #ddd;
}

nav ul.helpers li:last-child {
	border:0;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

iframe.libreto {
	margin-left: -4.1rem;
}

header {
	position: relative;
	flex: none;
	padding: 1rem;
	background-color: #fff;
	font-family: "JeanLucWeb-Thin";
	font-size: 1.8rem;
	border-right: 1px solid #ddd;
	z-index: 2;
	width: 4rem;
}

header > div {
	width: 2rem;
}

header .instance_name {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	margin: 0;
	transform: translate(-1%, 100%) rotate(-90deg);
	transform-origin: 0 0;
	white-space: nowrap;
}

header .libreto_name {
  position: absolute;
  top: 50%;
  left: 1rem;
  margin: 0;
  transform: translate(-51%, -50%) rotate(-90deg);
  transform-origin: 50% 0;
	white-space: nowrap;
}


header .btn-menu,
header .btn-about {
  position: absolute;
  top: .5rem;
  left: 1rem;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2.5rem;
  font-family: "JeanLucWeb-Thin";
  font-size: 2.5rem;
  line-height: 0;
  cursor: pointer;
	border-radius: 0;
}

header .btn-menu {
	display: none;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    right: -50%;
    transform: translate(-50%,-50%);
    z-index: 99999999999;
    background: #8ed1ff;
    overflow: hidden;
    max-width: 50rem;
    max-height: 90%;
    bottom: -50%;
}

.modal-cover {
	background: rgba(255,255,255,.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
}

.modal > .title {
	position: absolute;
	top: 0;
	left: 3rem;
}
.modal > .title > p{
	line-height: 3.2rem;
	font-weight: bold;
	margin: 0;
}

.modal > .content {
	overflow: auto;
	position: absolute;
	padding: 1rem 3rem;
	top: 3rem;
	bottom: 0rem;
	border-top: 1px solid rgba(0,0,0,.1);
}

.modal > .content p {
    margin: 0;
}

.modal > .content::after {
    height: 2rem;
    content: "";
    display: block;
}

.modal .btn-close {
    position: absolute;
    top: 0rem;
    right: 0rem;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    width: 3rem;
    height: 3rem;
    font-family: "JeanLucWeb-Thin";
    font-size: 2.5rem;
    line-height: 0;
    cursor: pointer;
}

.modal-about .colophon {
	font-size: .8rem;
	display: flex;
}

.modal-about .colophon > div {
    flex: 1;
    margin-right: 2rem;
}

.modal-about .colophon > div:last-child {
    margin-right: 0;
}

@media (max-width:600px) {
	#container {
		flex-direction: column;
	}
	header {
		display: flex;
		width: 100%;
		justify-content: space-between;
		border: 0;
		border-bottom: 1px solid #ddd;
	}

	header .libreto_name {
    text-align: center;
    margin: 0 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
	}

	header .instance_name,
	header .libreto_name,
	header .btn-menu,
	header .btn-about {
		position: unset;
		transform: none;
	}

	header .instance_name {
		display: none;
	}

	header .btn-menu,
	header .btn-about {
		height: 2rem;
		font-size: 2rem;
		display: block;
	}

	header .btn-menu {
		border-width: 1px 0 1px 0;
		border-style: solid;
		margin: 0;
		height: 1.2rem;
		width: 1.5rem;
		position: relative;
		left: .5rem;
		top: 50%;
		transform: translateY(-50%);
	}

	header .btn-menu::after {
		content: ' ';
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		border-top: 1px solid;
		height: 1px;
		overflow: hidden;
	}

	nav {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 10%;
		min-width: 3rem;
		z-index: 999999;
		transition: all .5s;
		transform: translateX(-120%);
		background: #fff;
	}

	nav.open {
		transform: translateX(0%);
	}

}