/*
 * default.css
 *
 * Copyright (c) Jani Salonen <salojan at goto10 piste co>
 *
 */

/* */
@font-face {
	font-family: "Catamaran";
	font-style: normal;
	font-weight: 400;
	src: local("Catamaran Regular"), local("Catamaran-Regular"), url(https://fonts.gstatic.com/s/catamaran/v6/o-0IIpQoyXQa2RxT7-5r5TRA.woff2) format("woff2");
	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;
}

@font-face {
	font-family: "Inconsolata";
	font-style: normal;
	font-weight: 400;
	src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url(https://fonts.gstatic.com/s/inconsolata/v18/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format("woff2");
	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;
}

@font-face {
	font-family: "Permanent Marker";
	font-style: normal;
	font-weight: 400;
	src: local("Permanent Marker Regular"), local("PermanentMarker-Regular"), url(https://fonts.gstatic.com/s/permanentmarker/v9/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2) format("woff2");
	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 {
	margin: 0;
	padding: 0;
}

body {
	background: #1d2021 url(/html/img/bg_pics.png) repeat top left;
	margin: 0;
	padding: 0;
}

script {
	display: none;
}

/* */
#main_area {
	background: #fffffe;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.20), 2px 4px 8px 2px rgba(0, 0, 0, 0.85);
	color: #1d2021;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 1vw;
	margin: 0 auto 8em;
	max-width: 64em;
	min-height: 72vh;
	padding: 6em 3em 6em 3em;
}

#main_area ol.a {
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	list-style-type: circle;
	margin: 0 0 0 1em;
}

#main_area ul.a {
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	list-style-position: inside;
	list-style-type: circle;
	margin: 0 0 0 1em;
}

#main_area table {
	border: none;
	border-spacing: 1em;
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 1em;
	margin: 0 0 0 1em;
	padding: 0;
}

#main_area table th {
	border-bottom: 1px solid #665c54;
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 1em;
	font-weight: normal;
	white-space: nowrap;
}

/* */
#pics_area {
	background: #1d2021 url(/html/img/bg_pics.png) repeat top left;
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 1vw;
	min-height: 100vh;
	padding: 4em 1em 3em 1em;
	position: relative;
}

/* */
#jump_area {
	color: #dfdfdf;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 0.9em;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999;
}

#jump_area ul {
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

#jump_area li {
	float: left;
	margin: 0;
}

#jump_area li a {
	color: #dfdfdf;
	display: inline-block;
	padding: 1em 0.5em 1em 0.5em;
	text-align: center;
	text-decoration: none;
}

#jump_area li a:hover, .menu:hover .menuitem {
	background: #d54d7b;
	border-radius: 0.25em;
}

#jump_area li .menu {
	display: inline-block;
}

#jump_area li .menuitem {
	display: inline-block;
	padding: 1em 0.5em 1em 0.5em;
	text-align: center;
	text-decoration: none;
}

#jump_area .menu-content {
	background: #d54d7b;
	border-radius: 0.5em;
	box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.5);
	display: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 0.90em;
	min-width: 50px;
	padding: 0.5em 0 0.5em 0;
	position: absolute;
	white-space: nowrap;
}

#jump_area .menu-content-last {
	background: #d54d7b;
	border-radius: 0.5em;
	box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.5);
	display: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 0.90em;
	min-width: 50px;
	padding: 0.5em 0 0.5em 0;
	position: absolute;
	right: 0;
	white-space: nowrap;
}

#jump_area .menu-content a {
	color: #fffffe;
	display: block;
	padding: 0.25em 1.5em 0.25em 1.5em;
	text-align: left;
	text-decoration: none;
}

#jump_area .menu-content-last a {
	color: #fffffe;
	display: block;
	padding: 0.25em 1.5em 0.25em 1.5em;
	text-align: left;
	text-decoration: none;
}

#jump_area .menu-content a:hover {
	background: #fffffe;
	color: #101010;
}

#jump_area .menu-content-last a:hover {
	background: #fffffe;
	color: #101010;
}

#jump_area .menu:hover .menu-content {
	display: block;
}

#jump_area .menu:hover .menu-content-last {
	display: block;
}

@keyframes jump_area_blink {
	0% {
	        opacity: 1.0;
	}
	50% {
	        opacity: 0.25;
	}
	100% {
	        opacity: 1.0;
	}
}

#jump_area .menu-content a:active {
	animation: jump_area_blink 0.15s 1;
	color: #1d2021;
}

#jump_area .menu-content-last a:active {
	animation: jump_area_blink 0.15s 1;
	color: #1d2021;
}

/* */
#link_area {
	background: #101010;
	border-bottom: 1px solid #1d1d1d;
	color: #dfdfdf;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 1em;
	position: fixed;
	width: 100%;
	white-space: nowrap;
	z-index: 998;
}

#link_area ul {
	list-style-type: none;
	margin: 0 0 0 1em;
	overflow: hidden;
	padding: 0;
}

#link_area li {
	float: left;
	margin: 0;
}

#link_area li a {
	color: #dfdfdf;
	display: inline-block;
	padding: 1em 1.5em 1em 1.5em;
	text-align: center;
	text-decoration: none;
}

#link_area li a:hover, .menu:hover .menuitem {
	background: #282828;
	border-radius: 0.25em;
}

#link_area li a:hover, .menu:hover .menuitem {
	background: #282828;
	border-radius: 0.25em;
}

#link_area li a:hover, .menu:hover .menuitem_shake {
	color: #dfdfdf;
}

#link_area li a.nowopened {
	font-weight: bold;
}

#link_area li .menu {
	display: inline-block;
}

#link_area li .menuitem {
	display: inline-block;
	padding: 1em 1.5em 1em 1.5em;
	text-align: center;
	text-decoration: none;
}

@keyframes menuitem_shake {
	0% {
	        opacity: 0;
	        transform: rotate(-135deg) scale(20);
	}
	100% {
	        opacity: 1;
	        transform: rotate(0deg) scale(1);
	}
}

#link_area li .menuitem_shake {
	animation: menuitem_shake 0.75s 1;
	animation-timing-function: ease-out;
	display: inline-block;
	padding: 1em 0.5em 1em 0.5em;
	text-align: center;
	text-decoration: none;
}

#link_area .menu-content {
	background: #282828;
	border: 1px solid #1d2021;
	border-radius: 0 0 0.5em 0.5em;
	box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.5);
	display: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 0.90em;
	min-width: 150px;
	padding: 0 0 0.5em 0;
	position: absolute;
	white-space: nowrap;
}

#link_area .menu-content img {
	display: inline;
	margin: 0 16px 0 0;
	padding: 0;
	vertical-align: text-bottom;
}

#link_area .menu-content span {
	font-weight: normal;
	margin: 0 0 0 -2em;
	position: absolute;
	text-align: center;
}

#link_area .menu-content a {
	color: #fffffe;
	display: block;
	padding: 0.4em 2em 0.4em 2em;
	text-align: left;
	text-decoration: none;
}

#link_area .menu-content a:hover {
	background: #fffffe;
	color: #101010;
}

#link_area .menu:hover .menu-content {
	display: block;
}

@keyframes link_area_blink {
	0% {
	        opacity: 1.0;
	}
	50% {
	        opacity: 0.25;
	}
	100% {
	        opacity: 1.0;
	}
}

#link_area .menu-content a:active {
	animation: link_area_blink 0.15s 1;
}

/* */
p.par_txt {
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	line-height: 1.6;
	margin: 1.5em 1.5em 1.5em 1em;
}

p.par_txt a:link {
	color: #c53d6b;
	text-decoration: none;
	white-space: nowrap;
}

p.par_txt a:visited {
	color: #c53d6b;
	text-decoration: none;
}

p.par_txt a:hover {
	color: #c53d6b;
	text-decoration: underline;
}

p.par_txt a:active {
	color: #c53d6b;
	text-decoration: underline;
}

p.par_txt i {
	font-family: "Inconsolata", "Source Code Pro", "Consolas", "Courier New", monospace;
	font-kerning: normal;
	font-style: italic;
	margin: 0 0.25em 0 0.25em;
	white-space: nowrap;
}

p.par_txt b {
	font-family: "Inconsolata", "Source Code Pro", "Consolas", "Courier New", monospace;
	font-kerning: normal;
	font-weight: bold;
	margin: 0 0.25em 0 0.25em;
	white-space: nowrap;
}

p.par_txt u {
	font-family: "Inconsolata", "Source Code Pro", "Consolas", "Courier New", monospace;
	font-kerning: normal;
	text-decoration: underline;
	margin: 0 0.25em 0 0.25em;
	white-space: nowrap;
}

p.foo_txt {
	color: #8f8f8f;
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 0.75em;
	line-height: 1.25;
	margin: 8em 0 0 0;
	padding: 0;
	text-align: center;
}

/* */
a.anchor {
	display: block;
	position: relative;
	top: -4em;
	visibility: hidden;
}

/* */
h1 {
	color: #d54d7b;
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 3em;
	margin: 0.5em 0 0.5em 0.25em;
}

h2 {
	color: #d54d7b;
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 2.5em;
	margin: 0.5em 0 0.5em 0.25em;
}

h3 {
	color: #d54d7b;
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 1.5em;
	margin: 0.5em 0 0.5em 0.5em;
}

h4 {
	color: #c52d5b;
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, "Lucida Sans", "Roboto", "Open Sans", sans-serif;
	font-kerning: normal;
	font-size: 1.1em;
	margin: 0.5em 0 0.5em 1em;
}

hr {
	color: #3c3836;
	margin: 0.25em 0 0.25em 0;
	border-style: solid;
}

/* */
pre {
	border-left: 2px solid #b0b0b0;
	color: #3c3836;
	font-family: "Inconsolata", "Source Code Pro", "Consolas", "Courier New", monospace;
	font-kerning: normal;
	font-size: 0.9em;
	margin: 1.5em 0 1.5em 2em;
	padding: 0 0 0 2em;
}

/* */
textarea {
	background-attachment: local;
	background-image: linear-gradient(to left, #ffffff 10px, transparent 10px),
    		linear-gradient(to right, #ffffff 10px, transparent 10px),
		linear-gradient(#ffffff 16px, #f8f8f8 16px, #f8f8f8 17px, #ffffff 17px);
	background-image: -o-linear-gradient(to left, #ffffff 10px, transparent 10px),
    		-o-linear-gradient(to right, #ffffff 10px, transparent 10px),
		-o-linear-gradient(#ffffff 16px, #f8f8f8 16px, #f8f8f8 17px, #ffffff 17px);
	background-image: -moz-linear-gradient(to left, #ffffff 10px, transparent 10px),
    		-moz-linear-gradient(to right, #ffffff 10px, transparent 10px),
		-moz-linear-gradient(#ffffff 16px, #f8f8f8 16px, #f8f8f8 17px, #ffffff 17px);
	background-image: -ms-linear-gradient(to left, #ffffff 10px, transparent 10px),
    		-ms-linear-gradient(to right, #ffffff 10px, transparent 10px),
		-ms-linear-gradient(#ffffff 16px, #f8f8f8 16px, #f8f8f8 17px, #ffffff 17px);
	background-image: -webkit-linear-gradient(to left, #ffffff 10px, transparent 10px),
    		-webkit-linear-gradient(to right, #ffffff 10px, transparent 10px),
		-webkit-linear-gradient(#ffffff 16px, #f8f8f8 16px, #f8f8f8 17px, #ffffff 17px);
	background-size: 100% 100%, 100% 100%, 100% 17px;
	border: 1px solid #665c54;
	border-radius: 3px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
	color: #3c3836;
	font-family: "Inconsolata", "Source Code Pro", "Consolas", "Courier New", monospace;
	font-kerning: normal;
	font-size: 0.85em;
	height: 20em;
	line-height: 17px;
	margin: 0 0 1.5em 1em;
	padding: 19px 0.5em 0.5em 0.5em;
	resize: none;
	width: 94%;
}