@media print {
	.title-bar, #leftcolumn, #rightcolumn, #footer, #loupe {
		display: none;
	}
}

@font-face {
	font-family:FontAwesome;
	src:url(fonts/ui/fontawesome-webfont.woff);
}

@font-face {
	font-family: "SFNSText";
	src: local(".SFNSText");
}

@font-face {
	font-family: "SFNSText-Italic";
	src: local(".SFNSText-Italic");
}

@font-face {
	font-family: "SFNSDisplay";
	src: local(".SFNSDisplay");
}

@keyframes TitleMorph0 {
	0% {
		_font-variation-settings: "wght" 3.2, "wdth" 0.61998;
		color: red;
	}
	100% {
		_font-variation-settings: "wght" 0.48, "wdth" 1.29999;
		color: green;
	}
}

@keyframes TitleMorph1 {
	0% {
		font-variation-settings: "wght" 0.48, "wdth" 1.29999;
	}
	100% {
		font-variation-settings: "wght" 3.2, "wdth" 0.61998;
	}
}
html { /* Request system fonts using Marcin Wichary’s method https://medium.design/system-shock-6b1dc6d6596f */
	font-family: -apple-system, ".SFNSText", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
	font-size: 32px;
	color: black;
	background-color: white;
}

body {
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility;
}

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

a:hover {
	text-decoration: underline;
}

h1 {
	font-size: 1.5rem;
}

h3 {
	margin-top: 0;
	font-size: 0.5rem;
	text-transform: uppercase;
	font-weight: bold;
}

#container {
	margin-top: 2rem;
	background-color: blue;
	width: 55rem;
}

#leftcolumn {
	float: left;
	position: relative;
	padding-left: 2rem;
	width: 10rem;
}

#maincolumn {
	float: left;
	position: relative;
	width: 26rem;
	_left: 12rem;
	min-height: 1rem;
	margin-right: 1rem;
	_background-color: blue;
}

#rightcolumn {
	float: left;
	position: fixed;
	left: 39rem;
	width: 14rem;
	_background-color: red;
}

.title-bar {
	_background-color: black;
	_color: white;
	height: 3rem;
	_border-bottom: 1px solid black;
	box-shadow: 0 0 15px #888888;
}

.title-bar-main {
	float:left;
	position:relative;
	width: 9.1rem;
	font-family: Skia;
	padding-left: 1.9rem;
	padding-top: 0.9rem;
	font-size: 1.5rem;
	_text-shadow: 0 0 0.5rem black;
	z-index: 1;
}


.title-bar-main a, .title-bar-other a {
	text-decoration: none;
}

.title-bar-other a:hover {
	text-decoration: underline;
}

.title-bar-other {
	/*
	float:left;
	position:relative;
	margin-left: 1rem;
	padding-top: 0.8rem;
	color: lightgrey;
	*/

	float:left;
	position:relative;
	font-size: 0.75rem;
	margin-left: 1rem;
	padding-top: 1.34rem;
	font-weight: bold;
	word-spacing: 2rem;
}

.specimen-chooser {
	list-style-type: none;
	padding: 0;
}

.specimen-chooser li, .specimen-chooser p {
	position: relative;
	color: #aaa;
	left: -9px;
	_padding-left: 9px;
	border-radius: 6px;
	padding-left: 9px;
}

.specimen-chooser li:hover {
	position: relative;
	color: black;
	background-color: lightgrey;
	_border-radius: 6px;
	_left: -9px;
	_padding-left: 9px;
}

.specimen-chooser a {
	text-decoration: none;
}

.specimen-chooser li.active {
	color: black;
}

.specimen-chooser li .fontawesome {
	display: none;
}

.specimen-chooser li.active .fontawesome {
	display: block;
}

.new-specimen {
	position: absolute;
	display: inline-block;
	font-weight: bold;
	color:white;
	background-color:red;
	left: -18px;
	top: -2px;
	font-size: 33%;
	padding: 4px;
	border-radius: 20px;
	box-shadow: 2px 2px 5px 2px rgba(136,136,136,0.48);
}

#footer {
	margin-top: 1rem;
	font-size: 0.5rem;
	padding-left: 2rem;
}

.blog img, .blog iframe {
	width: 100%;
}

#maincolumn img {
	width: 100%;
}

#maincolumn.blog {
	font-size: 75%;
}

#maincolumn h1 {
	font-size: 1.2rem;
}

.ap-axis {
	_animation: TitleMorph0 1s linear 0s 1 alternate;
}

.ap-praxis {
	_animation: TitleMorph1 1s linear 0s 1 alternate;
}

/* slider CSS generated with the help of http://danielstern.ca/range.css/#/ */
.ap-slider {
	position: relative;
	padding: 0;
	margin: 0;
	height: 10px;
	-webkit-appearance: none;
	-moz-apperance: none;
	border-radius: 9px;
	width: 162px;
	background-color: lightgrey;
}

.ap-slider::-webkit-slider-thumb {
	height: 18px;
	width: 18px;
	border-radius: 9px;
	background-color: black;
	cursor: pointer;
	-webkit-appearance: none;
}

.ap-color {
	-webkit-appearance: none;
	border: none;
	width: 0.9rem;
	height: 1rem;
}

table.controls td:first-child {
	font-size: 0.5rem;
}

table.controls {
	vertical-align: top;
}

#main-ui {
	_float:left;
	position:absolute;
	font-family: FontAwesome;
	text-align: left;
	left: 39rem;
	_width: 18rem;
	padding-top: 1rem;
	word-spacing: 7px;
	cursor: pointer;
}

#main-ui a {
	text-decoration: none;
}

.tooltip {
	background: beige;
	font-size: 0.2rem;
	border: 1px solid black;
	position: absolute;
	left: -5px;
	top: 15px;
}

.fontawesome {
	font-family: FontAwesome;
	cursor: pointer;	
}

.noselect { /* http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.textbox {
	position: relative;
}

.textbox:focus {
   outline: 1px dashed lightgrey;
}

.textbox-fit-to-width {

}

.textbox-handle {
	position: absolute;
	background-color: rgba(0,0,255,0.2);
	border: 0.5px solid black;
	width: 16px;
	height: 16px;
	left: 0px;
	top: 0px;
	z-index: 1;
	cursor: default;
}

#ftw-handle {
	position: absolute;
	background-color: rgba(255,0,255,0.2);
	border: 0.5px solid black;
	border-radius: 8px;
	width: 16px;
	height: 16px;
	left: 0px;
	top: 0px;
	z-index: 1;
	cursor: ew-resize;
	display: none;
}

.textbox-handle.relative {
	background-color: rgba(0,255,0,0.2);
	border: 0.5px solid black;
	border-radius: 8px;
	cursor: ew-resize;
}


.__textbox:focus::after {
   content: " ";
   display: block;
   position: absolute;
   left: -0.5rem;
   top: -0.5rem;
   width: 1rem;
   height: 1rem;
   outline: 0.1rem solid black;
   background-color: rgba(0,0,0,0.1);
}

#loupe {
	z-index: 5;
	display: none;
	position: absolute;
	top: 0;
	overflow: hidden;
	box-shadow: 0 0 5px lightgrey, 0 0 10px lightgrey;
	cursor: move;
}

#settings {
}

.resetaxis {
	cursor: pointer;	
}

.font-feature {
	font-size: 50%;
	border: 1px solid black;
	border-radius: 5px;
	padding: 0 5px;
	cursor: pointer;
}

#font-picker {
	font-size: 100%;
}

.left-control {
	width: 10rem;
}

.right-control {
	width: 10rem;
}

.popup {
	position: absolute;
	display: none;
	top: 0;
	width: 20rem;
	background-color: white;
	border-radius: 15px;
	border: 1px solid grey;
	box-shadow: 0 0 5px lightgrey, 0 0 10px lightgrey;
	overflow: hidden;
	font-size: 50%;
	z-index: 5;
	margin: 10vh 25vw;
}

.popup h1 {
	color: white;
	margin-top: 0;
	background-color: grey;
	padding: 0.5rem;
	font-weight: normal;
	text-align: center; 
	font-size: 200%;
	padding: 5px;
}

.control-label {
	float: left;
	font-size: 50%;
	width: 7em;
	white-space: nowrap;
}

.control {
	float: left;
	font-size: 50%;
}

.control-container {
	height: 1rem;
}

.control select {
	font-size: 100%;
}

input[type=range] {
	outline: none; /* Chrome likes to put an outline, which looks bad */
}

.align-control {
	cursor: pointer;
}

.popup-key {
	width: 35%;
	float: left;
	font-weight: bold;
	_padding: 0 0.5rem;
}

.popup-value {
	width: 65%;
	float: left;
	_padding: 0 0.5rem;
}

.popup-content {
	margin: 0.5rem;
}

#css-html textarea {
	width: 100%;
	height: 15em;
}

.popup h3 {
	margin: 20px 0 10px;
}

.icon-play-pause {
	display:none;
}

#share-options {
	display: none;
	position: absolute;
	left: -10px;
	top: 1em;
	background-color: white;
	border: 1px solid lightgrey;
	padding: 10px;
	line-height: 1.2em;
	border-radius: 10px;
	z-index: 5;
	width: 4em;
}

.hidden {
	display: none;
}

.axis-hidden {
	display: none;
}

.small-numeric {
	position: relative;
	font-size: 0.25rem;
	width: 30px;
	border-radius: 7px;
	border: 1px solid lightgrey;
	margin-left: 0.25rem;
	bottom: 2px;
	padding-left: 2px;
}

.close-button {
	position: absolute;
	font-size: 1rem;
	right: 10px;
	top: 10px;
	color: white;
}

#fontinfo-icon {
	font-size: 1rem;
	top: 5px;
	left: 5px;
	position: relative;
}

.subtitle {
	color: white;
	background-color: rgba(20,20,20,0.6);
	text-align: center;
	font-size: 2rem;
	display: none;
}