:root {
	--col1: #68aee1;
}
body {
	margin: 0px;
}
@media only screen and (min-width: 1080px) {
	header {
		padding: 0px 20%;
	}
	section {
		margin: 10px 20%;
	}
	h1,h2,h3,h4,h5,h6 {
		padding: 10px 0px;
	}
	.section_button {
		margin: 30px 35%;
		padding: 20px;
	}
	section {
		border-radius: 10px;
	}
	nav table {
		border-collapse: collapse;
	}
	nav td:first-of-type {
		padding-right: 10px;
	}
	nav td:last-of-type {
		white-space: nowrap;
		padding-bottom: 10px;
		vertical-align: bottom;
	}
	nav td:last-of-type a {
		padding: 10px;
		color: #000;
		border-radius: 8px 8px 0px 0px;
		background-color: #ccc;
		transition: background-color 200ms, color 200ms, border-color 200ms;
	}
	nav td:last-of-type a:hover {
		color: #fff;
		background-color: #3787c1;
	}
	nav td a.current {
		background: linear-gradient(0deg, #eee, #fff);
	}
	nav td a.current:hover {
		color: #000;
		background: linear-gradient(0deg, #eee, #ccc);
	}
	nav .menubutton p {
		display: none;
	}
	footer table {
		margin: 2px auto;
	}
	footer table td {
		padding: 0px 10px;
	}
	footer table td:first-of-type {
		text-align: right;
	}
	footer table td:nth-of-type(2) {
		vertical-align: bottom;
		text-align: center;
	}
	footer table td:nth-of-type(3) {
		vertical-align: bottom;
		text-align: left;
		padding-bottom: 6px;
	}
	.msg {
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0%);
		top: 5px;
		background-color: #fff;
		border-radius: 5px;
		transition: top 500ms;
		
		-moz-animation: hideAni 1s ease-in 5s forwards;
		/* Firefox */
		-webkit-animation: hideAni 1s ease-in 5s forwards;
		/* Safari and Chrome */
		-o-animation: hideAni 1s ease-in 5s forwards;
		/* Opera */
		animation: hideAni 1s ease-in 5s forwards;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}
	.userTable td {
		padding: 2px;
		width: 16%;
	}
	.userTable input,.userTable select {
		width: 100%;
	}
	.editor_thumb {
		max-width: 100%;
	}
}
@keyframes hideAni {
    to {
        top: -50px;
    }
}
@-webkit-keyframes hideAni {
    to {
        top: -50px;
    }
}
@media only screen and (max-width: 1079px) {
	header,section,footer {
		padding: 0px 20px;
	}
	h1 {
		font-size: 120%;
	}
	h3 {
		font-size: 100%;
	}
	h1,h2,h3,h4,h5,h6 {
		padding: 10px 0px;
	}
	section {
		position: relative;
	}
	section.overf:not(:hover) {
		max-height: 25vh;
	}
	section.overf:hover {
		max-height: 100vh;
	}
	section.overf:not(:hover):after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 40px;
		background-image: linear-gradient(0deg,#fff,rgba(255,255,255,0));
	}
	.section_button {
		color: #fff;
		margin: 10px 15%;
		padding: 5px;
		background-color: var(--col1);
	}
	nav td {
		display: block;
	}
	nav *,.section_button *,#editor * {
		-webkit-user-select: none;  /* Chrome all / Safari all */
		-moz-user-select: none;     /* Firefox all */
		-ms-user-select: none;      /* IE 10+ */
		user-select: none;
	}
	nav .menubutton span {
		display: block;
		max-height: 0px;
		overflow: hidden;
		transition: max-height 500ms;
	}
	nav .menubutton:hover span {
		max-height: 40px;
	}
	nav td a.current {
		border: 1px solid #fff;
		border-left: none;
		border-right: none;
	}
	footer table td:nth-of-type(3) {
		display: none;
	}
	.userTable tr {
		display: block;
		padding: 20px 0px;
	}
	.userTable tr:first-of-type {
		display: none;
	}
	.userTable td {
		display: block;
	}
}
header, footer {
	background-color: var(--col1);
}
header h1,header h2,header h3,header h4,header h5,header h6 {
	color: #000;
}
header h1 {
	padding-bottom: 0px;
}
header h3 {
	padding-top: 0px;
}
nav a {
	text-decoration: none;
}
body {
	background-color: #eee;
}
section {
	font-family: 'Open Sans', Verdana, Sans-Serif;
	background-color: #fff;
	overflow: hidden;
	padding: 10px;
	transition: max-height 1s, opacity 500ms;
}
footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 50px;
}
footer p {
	color: #000;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
	font-family: 'Merriweather', Times New Roman, Serif;
}
p {
	margin: 0px;
	padding: 5px;
	font-family: 'Open Sans', Verdana, Sans-Serif;
}
th,td {
	font-family: 'Open Sans', Verdana, Sans-Serif;
}
section img {
	max-width: 100%;
	margin: 5px;
}

.button {
	color: #fff;
	text-decoration: none;
	font-family: 'Open Sans', Verdana, Sans-Serif;
}
.button2 {
	color: #fff;
	background-color: var(--col1);
	text-decoration: none;
	border-radius: 5px;
	padding: 5px;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
	transition: background-color 200ms, color 200ms;
}
:not(nav) .button2.on {
	background-color: #0f0;
	color: #000;
}
nav .button2.on {
	background-color: #fff;
	color: #000;
}
.button2 * {
	vertical-align: middle;
}
.button2:hover {
	cursor: pointer;
	color: #000;
	background-color: #fff;
}

.section_button {
	text-align: center;
	border: 2px solid #000;
	background-color: var(--col1);
	color: #000;
	transition: background-color 200ms, color 200ms, border-color 200ms;
}
.section_button.disabled {
	background-color: #aaa;
}
@keyframes section_button_ani {
	50% {
		border-color: #000;
	}
	100% {
		border-color: var(--col1);
	}
}
.section_button/*:not(.disabled):not(:hover)*/ {
	cursor: pointer;
	animation-name: section_button_ani;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-direction: alternate;
}
.section_button:not(.disabled):hover {
	color: #000;
	background-color: #fff;
	border-color: var(--col1);
}
section:last-of-type {
	margin-bottom: 80px;
}
img {
	position: relative;
	transition: filter 500ms, -webkit-filter 500ms;
}
img:hover {
	filter: brightness(110%);
	-webkit-filter: brightness(110%);
	cursor: pointer;
}
table th {
	text-align: left;
}

#editor {
	z-index: 10;
	position: fixed;
	top: 10px;
	right: 1vw;
	width: 15vw;
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #000;
	transition: right 500ms;
}
#editor.off {
	right: -20vw;
}
#editor h3 {
	padding-bottom: 0px;
}
#editor #editor_id {
	padding-top: 0px;
}
#editor input,#editor select {
	width: 100%;
}
[data-editable][data-id] {
	/*display: inline-block;*/
}
[data-editable][data-id]:not(.editing) {
	cursor: pointer;
	transition: outline 200ms;
}
[data-editable][data-id]:not(.editing):hover {
	outline: 4px solid #0f0;
}
[data-editable][data-id].editing {
	outline: 4px solid #fc0;
}
[data-editable][data-id].saving {
	outline: 4px solid #f00;
}
.subEditing {
	outline: 2px solid #fc0;
}

#editorAdd {
	position: fixed;
	top: 10px;
	right: 10px;
	border: 1px solid #000;
	background-color: #fff;
	border-radius: 10px;
	padding: 5px;
	z-index: 2;
	transition: right 500ms;
}
#editorAdd.off {
	right: -500px;
}
.inactive:not(.editing) {
	opacity: 0.2;
}