From 444e18c1d9b8f7cdb5283378ef862e7aee76c31b Mon Sep 17 00:00:00 2001
From: "Timothy J. Warren" <tim@timshomepage.net>
Date: Wed, 4 Jan 2017 13:40:46 -0500
Subject: [PATCH] Update css to fit blocks within poster images

---
 public/css/base.css      | 813 +++++++++++++++------------------
 public/css/base.myth.css |   5 +-
 public/css/marx.css      | 957 +++++++++++++++++++--------------------
 public/package.json      |  26 +-
 4 files changed, 842 insertions(+), 959 deletions(-)

diff --git a/public/css/base.css b/public/css/base.css
index 95f19e2a..d0610647 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -1,45 +1,49 @@
-template,
-[hidden="hidden"],
-.media[hidden] {
-  display: none;
+:root {
+	--link-shadow: 1px 1px 1px #000;
+	--shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
+	--title-overlay: rgba(0, 0, 0, 0.45);
+	--text-color: #ffffff;
+	--normal-padding: 0.25em 0.125em;
+	--link-hover-color: #7d12db;
+	--edit-link-hover-color: #db7d12;
+	--edit-link-color: #12db18;
+	--radius: 5px;
 }
 
-body {
-  margin: 0.5em;
-}
+template, [hidden="hidden"], .media[hidden] {display:none}
+
+body {margin: 0.5em;}
 
 button {
-  background: rgba(255,255,255,0.65);
-  margin: 0;
+	background:rgba(255,255,255,0.65);
+	margin: 0;
 }
 
 table {
-  min-width: 85%;
-  margin: 0 auto;
+	min-width:85%;
+	margin: 0 auto;
 }
 
 td {
-  padding: 1em;
-  padding: 1rem;
+	padding:1em;
+	padding:1rem;
 }
 
-thead td,
-thead th {
-  padding: 0.5em;
-  padding: 0.5rem;
+thead td, thead th {
+	padding:0.5em;
+	padding:0.5rem;
 }
 
 input[type=number] {
-  width: 4em;
+	width: 4em;
 }
 
 tbody > tr:nth-child(odd) {
-  background: #ddd;
+	background: #ddd;
 }
 
-a:hover,
-a:active {
-  color: #7d12db;
+a:hover, a:active {
+	color: var(--link-hover-color)
 }
 
 /* -----------------------------------------------------------------------------
@@ -47,136 +51,66 @@ a:active {
 ------------------------------------------------------------------------------*/
 
 .bracketed {
-  color: #12db18;
+	color:  var(--edit-link-color);
+}
+.bracketed, h1 a {
+	text-shadow: var(--link-shadow);
+}
+.bracketed:before {content: '[\00a0'}
+.bracketed:after {content: '\00a0]'}
+.bracketed:hover, .bracketed:active {
+	color: var(--edit-link-hover-color)
 }
 
-.bracketed,
-h1 a {
-  text-shadow: 1px 1px 1px #000;
-}
-
-.bracketed:before {
-  content: '[\00a0';
-}
-
-.bracketed:after {
-  content: '\00a0]';
-}
-
-.bracketed:hover,
-.bracketed:active {
-  color: #db7d12;
-}
-
-.grow-1 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.flex-wrap {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.flex-no-wrap {
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.flex-align-end {
-  -webkit-box-align: end;
-  -webkit-align-items: flex-end;
-  -ms-flex-align: end;
-  align-items: flex-end;
-}
-
-.flex-align-space-around {
-  -webkit-align-content: space-around;
-  -ms-flex-line-pack: distribute;
-  align-content: space-around;
-}
-
-.flex-justify-space-around {
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-}
-
-.flex-self-center {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.flex {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
+.grow-1 {-webkit-box-flex: 1;flex-grow: 1}
+.flex-wrap {flex-wrap: wrap}
+.flex-no-wrap {flex-wrap: nowrap}
+.flex-align-end {-webkit-box-align: end;align-items: flex-end}
+.flex-align-space-around {align-content: space-around}
+.flex-justify-space-around {justify-content: space-around}
+.flex-self-center {align-self:center}
+.flex {display: -webkit-box;display: flex}
 
 .small-font {
-  font-size: 1.6rem;
+	font-size:1.6rem;
 }
 
-.justify {
-  text-align: justify;
-}
+.justify {text-align:justify}
+.align_center {text-align:center}
+.align_left {text-align:left}
+.align_right {text-align:right}
 
-.align_center {
-  text-align: center;
-}
+.valign_top {vertical-align:top}
 
-.align_left {
-  text-align: left;
-}
-
-.align_right {
-  text-align: right;
-}
-
-.valign_top {
-  vertical-align: top;
-}
-
-.no_border {
-  border: none;
-}
+.no_border {border:none}
 
 .media-wrap {
-  text-align: center;
-  margin: 0 auto;
+	text-align:center;
+	margin:0 auto;
 }
 
 .danger {
-  background-color: #ff4136;
-  border-color: #924949;
-  color: #fff;
+	background-color: #ff4136;
+	border-color: #924949;
+	color:#fff;
 }
 
-.danger:hover,
-.danger:active {
-  background-color: #924949;
-  border-color: #ff4136;
-  color: #fff;
+.danger:hover, .danger:active {
+	background-color: #924949;
+	border-color: #ff4136;
+	color:#fff;
 }
 
 .user-btn {
-  border-color: #12db18;
-  color: #12db18;
-  text-shadow: 1px 1px 1px #000;
-  padding: 0 0.5em;
-  padding: 0 0.5rem;
+	border-color: var(--edit-link-color);
+	color: var(--edit-link-color);
+	text-shadow: var(--link-shadow);
+	padding:0 0.5em;
+	padding:0 0.5rem;
 }
-
-.user-btn:hover,
-.user-btn:active {
-  border-color: #db7d12;
-  background-color: #db7d12;
+.user-btn:hover, .user-btn:active {
+	border-color: var(--edit-link-hover-color);
+	background-color: var(--edit-link-hover-color);
 }
 
 /* -----------------------------------------------------------------------------
@@ -184,317 +118,300 @@ h1 a {
 ------------------------------------------------------------------------------*/
 
 .cssload-loader {
-  position: relative;
-  left: calc(50% - 31px);
-  width: 62px;
-  height: 62px;
-  border-radius: 50%;
-  -webkit-perspective: 780px;
-  perspective: 780px;
+	position: relative;
+	left: calc(50% - 31px);
+	width: 62px;
+	height: 62px;
+	border-radius: 50%;
+	-webkit-perspective: 780px;
+	        perspective: 780px;
 }
 
 .cssload-inner {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  border-radius: 50%;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	border-radius: 50%;
 }
 
 .cssload-inner.cssload-one {
-  left: 0%;
-  top: 0%;
-  -webkit-animation: cssload-rotate-one 1.15s linear infinite;
-  animation: cssload-rotate-one 1.15s linear infinite;
-  border-bottom: 3px solid rgb(0,0,0);
+	left: 0%;
+	top: 0%;
+	-webkit-animation: cssload-rotate-one 1.15s linear infinite;
+	        animation: cssload-rotate-one 1.15s linear infinite;
+	border-bottom: 3px solid rgb(0,0,0);
 }
 
 .cssload-inner.cssload-two {
-  right: 0%;
-  top: 0%;
-  -webkit-animation: cssload-rotate-two 1.15s linear infinite;
-  animation: cssload-rotate-two 1.15s linear infinite;
-  border-right: 3px solid rgb(0,0,0);
+	right: 0%;
+	top: 0%;
+	-webkit-animation: cssload-rotate-two 1.15s linear infinite;
+	        animation: cssload-rotate-two 1.15s linear infinite;
+	border-right: 3px solid rgb(0,0,0);
 }
 
 .cssload-inner.cssload-three {
-  right: 0%;
-  bottom: 0%;
-  -webkit-animation: cssload-rotate-three 1.15s linear infinite;
-  animation: cssload-rotate-three 1.15s linear infinite;
-  border-top: 3px solid rgb(0,0,0);
+	right: 0%;
+	bottom: 0%;
+	-webkit-animation: cssload-rotate-three 1.15s linear infinite;
+	        animation: cssload-rotate-three 1.15s linear infinite;
+	border-top: 3px solid rgb(0,0,0);
 }
 
 @-webkit-keyframes cssload-rotate-one {
-  0% {
-    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-  }
+	0% {
+		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+		        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+		        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
 }
 
 @keyframes cssload-rotate-one {
-  0% {
-    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-  }
+	0% {
+		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+		        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+		        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
 }
 
 @-webkit-keyframes cssload-rotate-two {
-  0% {
-    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-  }
+	0% {
+		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+		        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+		        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
 }
 
 @keyframes cssload-rotate-two {
-  0% {
-    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-  }
+	0% {
+		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+		        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+		        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
 }
 
 @-webkit-keyframes cssload-rotate-three {
-  0% {
-    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-  }
+	0% {
+		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+		        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+		        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
 }
 
 @keyframes cssload-rotate-three {
-  0% {
-    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-  }
+	0% {
+		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+		        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+		        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
 }
 
 /* -----------------------------------------------------------------------------
 	Table sorting and form styles
 ------------------------------------------------------------------------------*/
-
 .sorting,
 .sorting_asc,
 .sorting_desc {
-  vertical-align: text-bottom;
+	vertical-align:text-bottom;
 }
-
 .sorting::before {
-  content: " ↕\00a0";
+	content: " ↕\00a0";
 }
-
 .sorting_asc::before {
-  content: " ↑\00a0";
+	content: " ↑\00a0";
 }
-
 .sorting_desc::before {
-  content: " ↓\00a0";
+	content: " ↓\00a0";
 }
 
-.form {
-  width: 100%;
-}
+.form { width:100%; }
 
-.form thead th,
-.form thead tr {
-  background: inherit;
-  border: 0;
+.form thead th, .form thead tr {
+	background: inherit;
+	border:0;
 }
 
 .form tr > td:nth-child(odd) {
-  text-align: right;
-  min-width: 25px;
-  max-width: 30%;
+	text-align:right;
+	min-width:25px;
+	max-width:30%;
 }
-
 .form tr > td:nth-child(even) {
-  text-align: left;
-  width: 70%;
+	text-align:left;
+	width:70%;
 }
 
 .invisible tbody > tr:nth-child(odd) {
-  background: inherit;
+	background: inherit;
 }
-
-.invisible tr,
-.invisible td,
-.invisible th {
-  border: 0;
+.invisible tr, .invisible td, .invisible th {
+	border:0;
 }
 
 /* -----------------------------------------------------------------------------
 	Message boxes
 ------------------------------------------------------------------------------*/
 
-.message {
-  position: relative;
-  margin: 0.5em auto;
-  padding: 0.5em;
-  width: 95%;
+.message{
+	position:relative;
+	margin:0.5em auto;
+	padding:0.5em;
+	width:95%;
 }
 
-.message .close {
-  width: 1em;
-  height: 1em;
-  position: absolute;
-  right: 0.5em;
-  top: 0.5em;
-  text-align: center;
-  vertical-align: middle;
-  line-height: 1em;
+.message .close{
+	width:1em;
+	height:1em;
+	position:absolute;
+	right:0.5em;
+	top:0.5em;
+	text-align:center;
+	vertical-align:middle;
+	line-height:1em;
 }
 
 .message:hover .close:after {
-  content: '☒';
+	content: '☒';
 }
 
 .message:hover {
-  cursor: pointer;
+	cursor:pointer;
 }
 
-.message .icon {
-  left: 0.5em;
-  top: 0.5em;
-  margin-right: 1em;
+.message .icon{
+	left:0.5em;
+	top:0.5em;
+	margin-right:1em;
 }
 
-.message.error {
-  border: 1px solid #924949;
-  background: #f3e6e6;
+.message.error{
+	border:1px solid #924949;
+	background: #f3e6e6;
 }
 
-.message.error .icon::after {
-  content: '✘';
+	.message.error .icon::after {
+		content: '✘';
+	}
+
+.message.success{
+	border:1px solid #1f8454;
+	background: #70dda9;
+}
+	.message.success .icon::after {
+		content: '✔'
+	}
+
+.message.info{
+	border:1px solid #bfbe3a;
+	background: #FFFFCC;
 }
 
-.message.success {
-  border: 1px solid #1f8454;
-  background: #70dda9;
-}
-
-.message.success .icon::after {
-  content: '✔';
-}
-
-.message.info {
-  border: 1px solid #bfbe3a;
-  background: #FFFFCC;
-}
-
-.message.info .icon::after {
-  content: '⚠';
-}
+	.message.info .icon::after {
+		content: '⚠';
+	}
 
 /* -----------------------------------------------------------------------------
 	Base list styles
 ------------------------------------------------------------------------------*/
 
 .media {
-  position: relative;
-  vertical-align: top;
-  display: inline-block;
-  text-align: center;
-  width: 220px;
-  height: 319px;
-  margin: 0.25em 0.125em;
+	position:relative;
+	vertical-align:top;
+	display:inline-block;
+	text-align:center;
+	width:220px;
+	height:311px;
+	margin: var(--normal-padding);
 }
 
 .media .edit_buttons > button {
-  margin: 0.5em auto;
+	margin:0.5em auto;
 }
 
-.name,
-.media_metadata > div,
-.medium_metadata > div,
-.row {
-  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
-  background: rgba(0, 0, 0, 0.45);
-  color: #ffffff;
-  padding: 0.25em 0.125em;
-  text-align: right;
-}
+	.name,
+	.media_metadata > div,
+	.medium_metadata > div,
+	.row {
+		text-shadow: var(--shadow);
+		background: var(--title-overlay);
+		color: var(--text-color);
+		padding: var(--normal-padding);
+		text-align:right;
+	}
 
-.media_type,
-.age_rating {
-  text-align: left;
-}
+	.media_type, .age_rating {
+		text-align:left;
+	}
 
-.media > .media_metadata {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
+	.media > .media_metadata {
+		position:absolute;
+		bottom:0;
+		right:0;
+	}
 
-.media > .medium_metadata {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
+	.media > .medium_metadata {
+		position:absolute;
+		bottom: 0;
+		left:0;
+	}
 
-.media > .name {
-  position: absolute;
-  top: 0;
-}
+	.media > .name {
+		position:absolute;
+		top: 0;
+	}
 
-.media:hover > .name,
-.media:hover > .media_metadata > div,
-.media:hover > .medium_metadata > div,
-.media:hover > .table .row {
-  -webkit-transition: .25s ease;
-  transition: .25s ease;
-  background: rgba(0,0,0,0.75);
-}
+		.media:hover > .name,
+		.media:hover > .media_metadata > div,
+		.media:hover > .medium_metadata > div,
+		.media:hover > .table .row
+		{
+			-webkit-transition: .25s ease;
+			transition: .25s ease;
+			background:rgba(0,0,0,0.75);
+		}
+
+		.media:hover > button[hidden],
+		.media:hover > .edit_buttons[hidden]
+		{
+			-webkit-transition: .25s ease;
+			transition: .25s ease;
+			display:block;
+		}
+
+		.media > .name > a {
+			background:none;
+			color:#fff;
+			text-shadow: var(--shadow);
+		}
 
-.media:hover > button[hidden],
-.media:hover > .edit_buttons[hidden] {
-  -webkit-transition: .25s ease;
-  transition: .25s ease;
-  display: block;
-}
 
-.media > .name > a {
-  background: none;
-  color: #fff;
-  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
-}
 
 /* -----------------------------------------------------------------------------
 	Anime-list-specific styles
 ------------------------------------------------------------------------------*/
-
-.anime .name,
-.manga .name {
-  text-align: center;
-  width: 100%;
-  padding: 0.5em 0.25em;
+.anime .name, .manga .name {
+	text-align:center;
+	width:100%;
+	padding:0.5em 0.25em;
 }
 
 .anime .media_type,
@@ -504,176 +421,158 @@ h1 a {
 .anime .age_rating,
 .anime .edit,
 .anime .delete {
-  background: none;
-  text-align: center;
+	background: none;
+	text-align:center;
 }
 
-.anime .table,
-.manga .table {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+
+.anime .table, .manga .table {
+	position:absolute;
+	bottom:0;
+	left:0;
+	width:100%;
 }
 
-.anime .row,
-.manga .row {
-  width: 100%;
-  background: rgba(0, 0, 0, 0.45);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-content: space-around;
-  -ms-flex-line-pack: distribute;
-  align-content: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-  text-align: center;
-  padding: 0 inherit;
+.anime .row, .manga .row {
+	width:100%;
+	background: var(--title-overlay);
+	display: -webkit-box;
+	display: flex;
+	align-content: space-around;
+	justify-content: space-around;
+	text-align:center;
+	padding:0 inherit;
 }
 
-.anime .row > span,
-.manga .row > span {
-  text-align: left;
+.anime .row > span, .manga .row > span {
+	text-align:left;
 }
 
-.anime .row > div,
-.manga .row > div {
-  font-size: 0.8em;
-  display: flex-item;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  text-align: center;
-  vertical-align: middle;
+.anime .row > div, .manga .row > div {
+	font-size:0.8em;
+	display:flex-item;
+	align-self:center;
+	text-align:center;
+	vertical-align:middle;
 }
 
 .anime .media > button.plus_one {
-  position: absolute;
-  top: 138px;
-  top: calc(50% - 21.5px);
-  left: 44px;
-  left: calc(50% - 66.5px);
+	position:absolute;
+	top: 138px;
+	top: calc(50% - 21.5px);
+	left: 44px;
+	left: calc(50% - 66.5px);
 }
 
 /* -----------------------------------------------------------------------------
 	Manga-list-specific styles
 ------------------------------------------------------------------------------*/
-
 .manga .row {
-  padding: 1px;
+	padding:1px;
 }
 
 .manga .media {
-  border: 1px solid #ddd;
-  width: 200px;
-  height: 290px;
-  margin: 0.25em;
+	border:1px solid #ddd;
+	height:310px;
+	margin:0.25em;
 }
 
 .manga .media > .edit_buttons {
-  position: absolute;
-  top: 86px;
-  top: calc(50% - 58.5px);
-  left: 5px;
-  left: calc(50% - 95px);
+	position:absolute;
+	top: 86px;
+	top: calc(50% - 58.5px);
+	left: 5px;
+	left: calc(50% - 95px);
 }
 
+
 /* -----------------------------------------------------------------------------
 	Search page styles
 ------------------------------------------------------------------------------*/
-
 .media.search > .name {
-  background-color: #555;
-  background-color: rgba(000,000,000,0.35);
-  background-size: cover;
-  background-size: contain;
-  background-repeat: no-repeat;
+	background-color:#555;
+	background-color: rgba(000,000,000,0.35);
+	background-size: cover;
+	background-size: contain;
+	background-repeat: no-repeat;
 }
 
 .big-check {
-  display: none;
+	display:none;
 }
 
 .big-check:checked + label {
-  -webkit-transition: .25s ease;
-  transition: .25s ease;
-  background: rgba(0,0,0,0.75);
+	-webkit-transition: .25s ease;
+	transition: .25s ease;
+	background:rgba(0,0,0,0.75);
 }
 
 .big-check:checked + label:after {
-  content: '✓';
-  font-size: 15em;
-  font-size: 15rem;
-  text-align: center;
-  color: greenyellow;
-  position: absolute;
-  top: 5px;
-  left: 0;
-  height: 100%;
-  width: 100%;
+	content: '✓';
+	font-size: 15em;
+	font-size: 15rem;
+	text-align:center;
+	color: greenyellow;
+	position:absolute;
+	top:5px;
+	left:0;
+	height:100%;
+	width:100%;
 }
 
 #series_list article.media {
-  position: relative;
+	position:relative;
 }
-
-#series_list .name,
-#series_list .name label {
-  position: absolute;
-  display: block;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  vertical-align: middle;
+#series_list .name, #series_list .name label {
+	position:absolute;
+	display:block;
+	top:0;
+	height:100%;
+	width:100%;
+	vertical-align:middle;
 }
 
 /* ----------------------------------------------------------------------------
 	Details page styles
 -----------------------------------------------------------------------------*/
-
 .details {
-  margin: 1.5rem auto 0 auto;
-  max-width: 93rem;
-  padding: 1rem;
-  font-size: inherit;
+	margin: 1.5rem auto 0 auto;
+	max-width:93rem;
+	padding:1rem;
+	font-size:inherit;
 }
 
 .details .cover {
-  max-width: 300px;
-  max-height: 435px;
+	max-width: 300px;
+	max-height: 435px;
 }
 
 .details h2 {
-  margin-top: 0;
+	margin-top: 0;
 }
 
 .details .flex > div {
-  margin: 1rem;
+	margin: 1rem;
 }
 
 .details table {
-  max-width: 300px;
-}
-
-.details td {
-  padding: 0 1.5rem;
+	max-width:300px;
 }
+	.details td {
+		padding:0 1.5rem;
+	}
 
 .details p {
-  text-align: justify;
+	text-align:justify;
 }
 
 .details td:nth-child(odd) {
-  width: 1%;
-  white-space: nowrap;
-  text-align: right;
+	width:1%;
+	white-space:nowrap;
+	text-align:right;
 }
-
 .details td:nth-child(even) {
-  text-align: left;
+	text-align:left;
 }
 
 /* ----------------------------------------------------------------------------
@@ -681,17 +580,17 @@ h1 a {
 -----------------------------------------------------------------------------*/
 
 @media screen and (max-width: 40em) {
-  nav a {
-    line-height: 4em;
-    line-height: 4rem;
-  }
+	nav a {
+		line-height:4em;
+		line-height:4rem;
+	}
 
-  .media {
-    margin: 2px 0;
-  }
+	.media {
+		margin:2px 0;
+	}
 
-  main {
-    padding: 0 0,5em 0.5em;
-    padding: 0 0.5rem 0.5rem;
-  }
+	main {
+		padding:0 0,5em 0.5em;
+		padding:0 0.5rem 0.5rem;
+	}
 }
\ No newline at end of file
diff --git a/public/css/base.myth.css b/public/css/base.myth.css
index 1cdfc5b5..56cf4a91 100644
--- a/public/css/base.myth.css
+++ b/public/css/base.myth.css
@@ -296,7 +296,7 @@ a:hover, a:active {
 	display:inline-block;
 	text-align:center;
 	width:220px;
-	height:319px;
+	height:311px;
 	margin: var(--normal-padding);
 }
 
@@ -427,8 +427,7 @@ a:hover, a:active {
 
 .manga .media {
 	border:1px solid #ddd;
-	width:200px;
-	height:290px;
+	height:310px;
 	margin:0.25em;
 }
 
diff --git a/public/css/marx.css b/public/css/marx.css
index cc192a04..8e25ba1b 100644
--- a/public/css/marx.css
+++ b/public/css/marx.css
@@ -1,629 +1,608 @@
-:root {
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  box-sizing: border-box;
-  cursor: default;
-  font-family: 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif;
-  line-height: 1.4;
-  overflow-y: scroll;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  text-size-adjust: 100%;
+:root
+{
+	--default-font-list:'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif;
+	-ms-text-size-adjust:100%;
+	-webkit-text-size-adjust:100%;
+	box-sizing:border-box;
+	cursor:default;
+	font-family:var(--default-font-list);
+	line-height:1.4;
+	overflow-y:scroll;
+	text-size-adjust:100%;
+	scroll-behavior: smooth;
 }
 
-audio:not([controls]) {
-  display: none;
+audio:not([controls])
+{
+	display:none;
 }
 
-details {
-  display: block;
+details
+{
+	display:block;
 }
 
-input[type=search] {
-  -webkit-appearance: textfield;
+input[type=search]
+{
+	-webkit-appearance:textfield;
 }
 
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
+input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration
+{
+	-webkit-appearance:none;
 }
 
-main {
-  display: block;
-  margin: 0 auto;
-  padding: 0 1.6em 1.6em;
-  padding: 0 1.6rem 1.6rem;
+main
+{
+	display:block;
+	margin:0 auto;
+	padding:0 1.6em 1.6em;
+	padding:0 1.6rem 1.6rem;
 }
 
-summary {
-  display: block;
+summary
+{
+	display:block;
 }
 
-pre {
-  background: #efefef;
-  color: #444;
-  display: block;
-  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-  font-size: 1.4em;
-  font-size: 1.4rem;
-  margin: 1.6em 0;
-  margin: 1.6rem 0;
-  overflow: auto;
-  padding: 1.6em;
-  padding: 1.6rem;
-  word-break: break-all;
-  word-wrap: break-word;
+pre
+{
+	background:#efefef;
+	color:#444;
+	display:block;
+	font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;
+	font-size:1.4em;
+	font-size:1.4rem;
+	margin:1.6em 0;
+	margin:1.6rem 0;
+	overflow:auto;
+	padding:1.6em;
+	padding:1.6rem;
+	word-break:break-all;
+	word-wrap:break-word;
 }
 
-progress {
-  display: inline-block;
+progress
+{
+	display:inline-block;
 }
 
-small {
-  color: #777;
-  font-size: 75%;
+small
+{
+	color:#777;
+	font-size:75%;
 }
 
-big {
-  font-size: 125%;
+big
+{
+	font-size:125%;
 }
 
-template {
-  display: none;
+template
+{
+	display:none;
 }
 
-textarea {
-  border: .1rem solid #ccc;
-  border-radius: 0;
-  display: block;
-  margin-bottom: .8rem;
-  overflow: auto;
-  padding: .8rem;
-  resize: vertical;
-  vertical-align: middle;
+textarea
+{
+	border:.1rem solid #ccc;
+	border-radius:0;
+	display:block;
+	margin-bottom:.8rem;
+	overflow:auto;
+	padding:.8rem;
+	resize:vertical;
+	vertical-align:middle;
 }
 
-[hidden] {
-  display: none;
+[hidden]
+{
+	display:none;
 }
 
-[unselectable] {
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
+[unselectable]
+{
+	-webkit-user-select:none;
+	user-select:none;
 }
 
-*,
-::before,
-::after {
-  border-style: solid;
-  border-width: 0;
-  box-sizing: inherit;
+*,::before,::after
+{
+	border-style:solid;
+	border-width:0;
+	box-sizing:inherit;
 }
 
-* {
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
+*
+{
+	font-size:inherit;
+	line-height:inherit;
+	margin:0;
+	padding:0;
 }
 
-::before,
-::after {
-  text-decoration: inherit;
-  vertical-align: inherit;
+::before,::after
+{
+	text-decoration:inherit;
+	vertical-align:inherit;
 }
 
-a {
-  -webkit-transition: .25s ease;
-  color: #1271db;
-  text-decoration: none;
-  -webkit-transition: .25s ease;
-  transition: .25s ease;
+a
+{
+	-webkit-transition:.25s ease;
+	color:#1271db;
+	text-decoration:none;
+	transition:.25s ease;
 }
 
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-  vertical-align: middle;
+audio,canvas,iframe,img,svg,video
+{
+	vertical-align:middle;
 }
 
-button,
-input,
-select,
-textarea {
-  border: .1rem solid #ccc;
-  color: inherit;
-  font-family: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  min-height: 1.4em;
+button,input,select,textarea
+{
+	border:.1rem solid #ccc;
+	color:inherit;
+	font-family:inherit;
+	font-style:inherit;
+	font-weight:inherit;
+	min-height:1.4em;
 }
 
-code,
-kbd,
-pre,
-samp {
-  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace, monospace;
+code,kbd,pre,samp
+{
+	font-family:Menlo, Monaco, Consolas, 'Courier New', monospace, monospace;
 }
 
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin-bottom: 1.6rem;
+table
+{
+	border-collapse:collapse;
+	border-spacing:0;
+	margin-bottom:1.6rem;
 }
 
-::-moz-selection {
-  background-color: #b3d4fc;
-  text-shadow: none;
+::selection
+{
+	background-color:#b3d4fc;
+	text-shadow:none;
 }
 
-::selection {
-  background-color: #b3d4fc;
-  text-shadow: none;
+button::-moz-focus-inner
+{
+	border:0;
 }
 
-button::-moz-focus-inner {
-  border: 0;
+body
+{
+	color:#444;
+	font-family:var(--default-font-list);
+	font-size:1.6rem;
+	font-style:normal;
+	font-weight:400;
+	padding:0;
 }
 
-body {
-  color: #444;
-  font-family: 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif;
-  font-size: 1.6rem;
-  font-style: normal;
-  font-weight: 400;
-  padding: 0;
+p
+{
+	margin:0 0 1.6rem;
 }
 
-p {
-  margin: 0 0 1.6rem;
+h1,h2,h3,h4,h5,h6
+{
+	font-family:Lato, var(--default-font-list);
+	margin:2em 0 1.6em;
+	margin:2rem 0 1.6rem;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: Lato, 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif;
-  margin: 2em 0 1.6em;
-  margin: 2rem 0 1.6rem;
+h1
+{
+	border-bottom:.1rem solid rgba(0,0,0,0.2);
+	font-size:3.6em;
+	font-size:3.6rem;
+	font-style:normal;
+	font-weight:500;
 }
 
-h1 {
-  border-bottom: .1rem solid rgba(0,0,0,0.2);
-  font-size: 3.6em;
-  font-size: 3.6rem;
-  font-style: normal;
-  font-weight: 500;
+h2
+{
+	font-size:3em;
+	font-size:3rem;
+	font-style:normal;
+	font-weight:500;
 }
 
-h2 {
-  font-size: 3em;
-  font-size: 3rem;
-  font-style: normal;
-  font-weight: 500;
+h3
+{
+	font-size:2.4em;
+	font-size:2.4rem;
+	font-style:normal;
+	font-weight:500;
+	margin:1.6rem 0 .4rem;
 }
 
-h3 {
-  font-size: 2.4em;
-  font-size: 2.4rem;
-  font-style: normal;
-  font-weight: 500;
-  margin: 1.6rem 0 .4rem;
+h4
+{
+	font-size:1.8em;
+	font-size:1.8rem;
+	font-style:normal;
+	font-weight:600;
+	margin:1.6rem 0 .4rem;
 }
 
-h4 {
-  font-size: 1.8em;
-  font-size: 1.8rem;
-  font-style: normal;
-  font-weight: 600;
-  margin: 1.6rem 0 .4rem;
+h5
+{
+	font-size:1.6em;
+	font-size:1.6rem;
+	font-style:normal;
+	font-weight:600;
+	margin:1.6rem 0 .4rem;
 }
 
-h5 {
-  font-size: 1.6em;
-  font-size: 1.6rem;
-  font-style: normal;
-  font-weight: 600;
-  margin: 1.6rem 0 .4rem;
+h6
+{
+	color:#777;
+	font-size:1.4em;
+	font-size:1.4rem;
+	font-style:normal;
+	font-weight:600;
+	margin:1.6rem 0 .4rem;
 }
 
-h6 {
-  color: #777;
-  font-size: 1.4em;
-  font-size: 1.4rem;
-  font-style: normal;
-  font-weight: 600;
-  margin: 1.6rem 0 .4rem;
+code
+{
+	background:#efefef;
+	color:#444;
+	font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;
+	font-size:1.4rem;
+	word-break:break-all;
+	word-wrap:break-word;
 }
 
-code {
-  background: #efefef;
-  color: #444;
-  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-  font-size: 1.4rem;
-  word-break: break-all;
-  word-wrap: break-word;
+a:hover,a:focus
+{
+	text-decoration:none;
 }
 
-a:hover,
-a:focus {
-  text-decoration: none;
+dl
+{
+	margin-bottom:1.6rem;
 }
 
-dl {
-  margin-bottom: 1.6rem;
+dd
+{
+	margin-left:4rem;
 }
 
-dd {
-  margin-left: 4rem;
+ul,ol
+{
+	margin-bottom:.8rem;
+	padding-left:2rem;
 }
 
-ul,
-ol {
-  margin-bottom: .8rem;
-  padding-left: 2rem;
+blockquote
+{
+	border-left:.2rem solid #1271db;
+	font-family:Georgia, Times, 'Times New Roman', serif;
+	font-style:italic;
+	margin:1.6rem 0;
+	padding-left:1.6rem;
 }
-
-blockquote {
-  border-left: .2rem solid #1271db;
-  font-family: Georgia, Times, 'Times New Roman', serif;
-  font-style: italic;
-  margin: 1.6rem 0;
-  padding-left: 1.6rem;
-}
-
-figcaption {
-  font-family: Georgia, Times, 'Times New Roman', serif;
-}
-
-html {
-  font-size: 62.5%;
-}
-
-main,
-header,
-footer,
-article,
-section,
-aside,
-details,
-summary {
-  display: block;
-  height: auto;
-  margin: 0 auto;
-  width: 100%;
+
+figcaption
+{
+	font-family:Georgia, Times, 'Times New Roman', serif;
+}
+
+html
+{
+	font-size:62.5%;
+}
+
+main,header,footer,article,section,aside,details,summary
+{
+	display:block;
+	height:auto;
+	margin:0 auto;
+	width:100%;
+}
+
+footer
+{
+	border-top:.1rem solid rgba(0,0,0,0.2);
+	clear:both;
+	display:inline-block;
+	float:left;
+	max-width:100%;
+	padding:1rem 0;
+	text-align:center;
+}
+
+hr
+{
+	border-top:.1rem solid rgba(0,0,0,0.2);
+	display:block;
+	margin-bottom:1.6rem;
+	width:100%;
+}
+
+img
+{
+	height:auto;
+	max-width:100%;
+	vertical-align:baseline;
+}
+
+input[type=text],input[type=password],input[type=email],input[type=url],input[type=date],input[type=month],input[type=time],input[type=datetime],input[type=datetime-local],input[type=week],input[type=number],input[type=search],input[type=tel],input[type=color],select
+{
+	border:.1rem solid #ccc;
+	border-radius:0;
+	display:inline-block;
+	padding:.8rem;
+	vertical-align:middle;
+}
+
+input:not([type])
+{
+	-webkit-appearance:none;
+	background-clip:padding-box;
+	background-color:#fff;
+	border:.1rem solid #ccc;
+	border-radius:0;
+	color:#444;
+	display:inline-block;
+	padding:.8rem;
+	text-align:left;
+}
+
+input[type=color]
+{
+	padding:.8rem 1.6rem;
+}
+
+input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=url]:focus,input[type=date]:focus,input[type=month]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=week]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=color]:focus,select:focus,textarea:focus
+{
+	border-color:#b3d4fc;
+}
+
+input:not([type]):focus
+{
+	border-color:#b3d4fc;
+}
+
+input[type=radio],input[type=checkbox]
+{
+	vertical-align:middle;
+}
+
+input[type=file]:focus,input[type=radio]:focus,input[type=checkbox]:focus
+{
+	outline:.1rem solid thin #444;
+}
+
+input[type=text][disabled],input[type=password][disabled],input[type=email][disabled],input[type=url][disabled],input[type=date][disabled],input[type=month][disabled],input[type=time][disabled],input[type=datetime][disabled],input[type=datetime-local][disabled],input[type=week][disabled],input[type=number][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=color][disabled],select[disabled],textarea[disabled]
+{
+	background-color:#efefef;
+	color:#777;
+	cursor:not-allowed;
+}
+
+input:not([type])[disabled]
+{
+	background-color:#efefef;
+	color:#777;
+	cursor:not-allowed;
+}
+
+input[readonly],select[readonly],textarea[readonly]
+{
+	background-color:#efefef;
+	border-color:#ccc;
+	color:#777;
 }
 
-footer {
-  border-top: .1rem solid rgba(0,0,0,0.2);
-  clear: both;
-  display: inline-block;
-  float: left;
-  max-width: 100%;
-  padding: 1rem 0;
-  text-align: center;
-}
-
-hr {
-  border-top: .1rem solid rgba(0,0,0,0.2);
-  display: block;
-  margin-bottom: 1.6rem;
-  width: 100%;
-}
-
-img {
-  height: auto;
-  max-width: 100%;
-  vertical-align: baseline;
-}
-
-input[type=text],
-input[type=password],
-input[type=email],
-input[type=url],
-input[type=date],
-input[type=month],
-input[type=time],
-input[type=datetime],
-input[type=datetime-local],
-input[type=week],
-input[type=number],
-input[type=search],
-input[type=tel],
-input[type=color],
-select {
-  border: .1rem solid #ccc;
-  border-radius: 0;
-  display: inline-block;
-  padding: .8rem;
-  vertical-align: middle;
-}
-
-input:not([type]) {
-  -webkit-appearance: none;
-  background-clip: padding-box;
-  background-color: #fff;
-  border: .1rem solid #ccc;
-  border-radius: 0;
-  color: #444;
-  display: inline-block;
-  padding: .8rem;
-  text-align: left;
+input:focus:invalid,textarea:focus:invalid,select:focus:invalid
+{
+	border-color:#e9322d;
+	color:#b94a48;
 }
 
-input[type=color] {
-  padding: .8rem 1.6rem;
-}
-
-input[type=text]:focus,
-input[type=password]:focus,
-input[type=email]:focus,
-input[type=url]:focus,
-input[type=date]:focus,
-input[type=month]:focus,
-input[type=time]:focus,
-input[type=datetime]:focus,
-input[type=datetime-local]:focus,
-input[type=week]:focus,
-input[type=number]:focus,
-input[type=search]:focus,
-input[type=tel]:focus,
-input[type=color]:focus,
-select:focus,
-textarea:focus {
-  border-color: #b3d4fc;
-}
-
-input:not([type]):focus {
-  border-color: #b3d4fc;
-}
-
-input[type=radio],
-input[type=checkbox] {
-  vertical-align: middle;
-}
-
-input[type=file]:focus,
-input[type=radio]:focus,
-input[type=checkbox]:focus {
-  outline: .1rem solid thin #444;
-}
-
-input[type=text][disabled],
-input[type=password][disabled],
-input[type=email][disabled],
-input[type=url][disabled],
-input[type=date][disabled],
-input[type=month][disabled],
-input[type=time][disabled],
-input[type=datetime][disabled],
-input[type=datetime-local][disabled],
-input[type=week][disabled],
-input[type=number][disabled],
-input[type=search][disabled],
-input[type=tel][disabled],
-input[type=color][disabled],
-select[disabled],
-textarea[disabled] {
-  background-color: #efefef;
-  color: #777;
-  cursor: not-allowed;
-}
-
-input:not([type])[disabled] {
-  background-color: #efefef;
-  color: #777;
-  cursor: not-allowed;
-}
-
-input[readonly],
-select[readonly],
-textarea[readonly] {
-  background-color: #efefef;
-  border-color: #ccc;
-  color: #777;
-}
-
-input:focus:invalid,
-textarea:focus:invalid,
-select:focus:invalid {
-  border-color: #e9322d;
-  color: #b94a48;
-}
-
-input[type=file]:focus:invalid:focus,
-input[type=radio]:focus:invalid:focus,
-input[type=checkbox]:focus:invalid:focus {
-  outline-color: #ff4136;
+input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus,input[type=checkbox]:focus:invalid:focus
+{
+	outline-color:#ff4136;
 }
 
-select {
-  background-color: #fff;
-  border: .1rem solid #ccc;
+select
+{
+	background-color:#fff;
+	border:.1rem solid #ccc;
 }
 
-select[multiple] {
-  height: auto;
+select[multiple]
+{
+	height:auto;
 }
 
-label {
-  line-height: 2;
+label
+{
+	line-height:2;
 }
 
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: .8rem 0;
+fieldset
+{
+	border:0;
+	margin:0;
+	padding:.8rem 0;
 }
 
-legend {
-  border-bottom: .1rem solid #ccc;
-  color: #444;
-  display: block;
-  margin-bottom: .8rem;
-  padding: .8rem 0;
-  width: 100%;
+legend
+{
+	border-bottom:.1rem solid #ccc;
+	color:#444;
+	display:block;
+	margin-bottom:.8rem;
+	padding:.8rem 0;
+	width:100%;
 }
 
-input[type=submit],
-button {
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-transition: .25s ease;
-  -webkit-user-drag: none;
-  -webkit-user-select: none;
-  border: .2rem solid #444;
-  border-radius: 0;
-  color: #444;
-  cursor: pointer;
-  display: inline-block;
-  margin-bottom: .8rem;
-  margin-right: .4rem;
-  padding: .8rem 1.6rem;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  -webkit-transition: .25s ease;
-  transition: .25s ease;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: baseline;
+input[type=submit],button
+{
+	-moz-user-select:none;
+	-ms-user-select:none;
+	-webkit-transition:.25s ease;
+	-webkit-user-drag:none;
+	-webkit-user-select:none;
+	border:.2rem solid #444;
+	border-radius:0;
+	color:#444;
+	cursor:pointer;
+	display:inline-block;
+	margin-bottom:.8rem;
+	margin-right:.4rem;
+	padding:.8rem 1.6rem;
+	text-align:center;
+	text-decoration:none;
+	text-transform:uppercase;
+	transition:.25s ease;
+	user-select:none;
+	vertical-align:baseline;
 }
 
-input[type=submit] a,
-button a {
-  color: #444;
+input[type=submit] a,button a
+{
+	color:#444;
 }
 
-input[type=submit]::-moz-focus-inner,
-button::-moz-focus-inner {
-  padding: 0;
+input[type=submit]::-moz-focus-inner,button::-moz-focus-inner
+{
+	padding:0;
 }
 
-input[type=submit]:hover,
-button:hover {
-  background: #444;
-  border-color: #444;
-  color: #fff;
+input[type=submit]:hover,button:hover
+{
+	background:#444;
+	border-color:#444;
+	color:#fff;
 }
 
-input[type=submit]:hover a,
-button:hover a {
-  color: #fff;
+input[type=submit]:hover a,button:hover a
+{
+	color:#fff;
 }
 
-input[type=submit]:active,
-button:active {
-  background: #6a6a6a;
-  border-color: #6a6a6a;
-  color: #fff;
+input[type=submit]:active,button:active
+{
+	background:#6a6a6a;
+	border-color:#6a6a6a;
+	color:#fff;
 }
 
-input[type=submit]:active a,
-button:active a {
-  color: #fff;
+input[type=submit]:active a,button:active a
+{
+	color:#fff;
 }
 
-input[type=submit]:disabled,
-button:disabled {
-  box-shadow: none;
-  cursor: not-allowed;
-  opacity: .40;
+input[type=submit]:disabled,button:disabled
+{
+	box-shadow:none;
+	cursor:not-allowed;
+	opacity:.40;
 }
 
-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  text-align: center;
+nav ul
+{
+	list-style:none;
+	margin:0;
+	padding:0;
+	text-align:center;
 }
 
-nav ul li {
-  display: inline;
+nav ul li
+{
+	display:inline;
 }
 
-nav a {
-  -webkit-transition: .25s ease;
-  border-bottom: .2rem solid transparent;
-  color: #444;
-  padding: .8rem 1.6rem;
-  text-decoration: none;
-  -webkit-transition: .25s ease;
-  transition: .25s ease;
+nav a
+{
+	-webkit-transition:.25s ease;
+	border-bottom:.2rem solid transparent;
+	color:#444;
+	padding:.8rem 1.6rem;
+	text-decoration:none;
+	transition:.25s ease;
 }
 
-nav a:hover,
-nav li.selected a {
-  border-color: rgba(0,0,0,0.2);
+nav a:hover,nav li.selected a
+{
+	border-color:rgba(0,0,0,0.2);
 }
 
-nav a:active {
-  border-color: rgba(0,0,0,0.56);
+nav a:active
+{
+	border-color:rgba(0,0,0,0.56);
 }
 
-caption {
-  padding: .8rem 0;
+caption
+{
+	padding:.8rem 0;
 }
 
-thead th {
-  background: #efefef;
-  color: #444;
+thead th
+{
+	background:#efefef;
+	color:#444;
 }
 
-tr {
-  background: #fff;
-  margin-bottom: .8rem;
+tr
+{
+	background:#fff;
+	margin-bottom:.8rem;
 }
 
-th,
-td {
-  border: .1rem solid #ccc;
-  padding: .8rem 1.6rem;
-  text-align: center;
-  vertical-align: inherit;
+th,td
+{
+	border:.1rem solid #ccc;
+	padding:.8rem 1.6rem;
+	text-align:center;
+	vertical-align:inherit;
 }
 
-tfoot tr {
-  background: none;
+tfoot tr
+{
+	background:none;
 }
 
-tfoot td {
-  color: #efefef;
-  font-size: .8rem;
-  font-style: italic;
-  padding: 1.6rem .4rem;
+tfoot td
+{
+	color:#efefef;
+	font-size:.8rem;
+	font-style:italic;
+	padding:1.6rem .4rem;
 }
 
 @media screen {
-  [hidden~=screen] {
-    display: inherit;
-  }
+	[hidden~=screen]
+	{
+		display:inherit;
+	}
 
-  [hidden~=screen]:not(:active):not(:focus):not(:target) {
-    clip: rect(0000)!important;
-    position: absolute!important;
-  }
+	[hidden~=screen]:not(:active):not(:focus):not(:target)
+	{
+		clip:rect(0000)!important;
+		position:absolute!important;
+	}
 }
 
 @media screen and max-width 40rem {
-  article,
-  section,
-  aside {
-    clear: both;
-    display: block;
-    max-width: 100%;
-  }
+	article,section,aside
+	{
+		clear:both;
+		display:block;
+		max-width:100%;
+	}
 
-  img {
-    margin-right: 1.6rem;
-  }
+	img
+	{
+		margin-right:1.6rem;
+	}
 }
\ No newline at end of file
diff --git a/public/package.json b/public/package.json
index 6d6d0940..17f500c7 100644
--- a/public/package.json
+++ b/public/package.json
@@ -1,11 +1,17 @@
 {
-  "scripts": {
-    "watch": "npm-run-all --parallel watch:base watch:marx",
-    "watch:base": "myth -w css/base.myth.css css/base.css",
-    "watch:marx": "myth -w css/marx.myth.css css/marx.css"
-  },
-  "devDependencies": {
-    "myth": "^1.5.0",
-    "npm-run-all": "^1.7.0"
-  }
-}
+	"scripts": {
+		"build": "npm-run-all --parallel build:base build:marx",
+		"build:base": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -o css/base.css css/base.myth.css",
+		"build:marx": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -o css/marx.css css/marx.myth.css",
+		"watch": "npm-run-all --parallel watch:base watch:marx",
+		"watch:base": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -w -o css/base.css css/base.myth.css",
+		"watch:marx": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -w -o css/marx.css css/marx.myth.css"
+	},
+	"devDependencies": {
+		"autoprefixer": "^6.6.1",
+		"npm-run-all": "^4.0.0",
+		"postcss-cachify": "^1.3.1",
+		"postcss-cli": "^2.6.0",
+		"postcss-cssnext": "^2.9.0"
+	}
+}
\ No newline at end of file