From 787687abf8749e0ff3928a953780004308ae13b7 Mon Sep 17 00:00:00 2001
From: Timothy J Warren <tim@timshomepage.net>
Date: Fri, 10 Aug 2018 20:09:28 -0400
Subject: [PATCH] Update some styles

---
 app/views/anime/cover.php           |  32 +-
 app/views/anime/list.php            |   2 +-
 app/views/collection/cover-item.php |  27 ++
 app/views/collection/cover.php      |  30 +-
 app/views/collection/edit.php       |  16 +-
 app/views/collection/list-item.php  |  19 +
 app/views/collection/list.php       |  94 ++--
 app/views/main-menu.php             |   4 +-
 app/views/manga/cover.php           |   2 +-
 app/views/manga/edit.php            |  18 +-
 app/views/manga/list.php            |   4 +-
 public/css/app.min.css              |   2 +-
 public/css/base.css                 | 657 +++++++++++++++++-----------
 public/js/anime_edit.js             |   2 +-
 public/js/base/sort_tables.js       |  85 ++--
 15 files changed, 574 insertions(+), 420 deletions(-)
 create mode 100644 app/views/collection/cover-item.php
 create mode 100644 app/views/collection/list-item.php

diff --git a/app/views/anime/cover.php b/app/views/anime/cover.php
index b4d52de8..7f6d5e66 100644
--- a/app/views/anime/cover.php
+++ b/app/views/anime/cover.php
@@ -1,4 +1,4 @@
-<main>
+<main class="media-list">
 <?php if ($auth->isAuthenticated()): ?>
 <a class="bracketed" href="<?= $url->generate('anime.add.get') ?>">Add Item</a>
 <?php endif ?>
@@ -24,27 +24,13 @@
 					<img src="<?= $urlGenerator->assetUrl("images/anime/{$item['anime']['id']}.jpg") ?>" alt="" />
 					<div class="name">
 						<a href="<?= $url->generate('anime.details', ['id' => $item['anime']['slug']]); ?>">
-							<?= $item['anime']['title'] ?>
+							<span class="canonical"><?= $item['anime']['title'] ?></span>
 							<?php foreach ($item['anime']['titles'] as $title): ?>
 								<br /><small><?= $title ?></small>
 							<?php endforeach ?>
 						</a>
 					</div>
 					<div class="table">
-						<?php if ($auth->isAuthenticated()): ?>
-						<div class="row">
-							<span class="edit">
-								<a class="bracketed" title="Edit information about this anime" href="<?=
-									$url->generate('edit', [
-										'controller' => 'anime',
-										'id' => $item['id'],
-										'status' => $item['watching_status']
-									]);
-							 	?>">Edit</a>
-							</span>
-						</div>
-						<?php endif ?>
-
 						<?php if ($item['private'] || $item['rewatching']): ?>
 						<div class="row">
 							<?php foreach(['private', 'rewatching'] as $attr): ?>
@@ -77,6 +63,20 @@
 						</div>
 						<?php endif ?>
 
+						<?php if ($auth->isAuthenticated()): ?>
+							<div class="row">
+							<span class="edit">
+								<a class="bracketed" title="Edit information about this anime" href="<?=
+								$url->generate('edit', [
+									'controller' => 'anime',
+									'id' => $item['id'],
+									'status' => $item['watching_status']
+								]);
+								?>">Edit</a>
+							</span>
+							</div>
+						<?php endif ?>
+
 						<div class="row">
 							<div class="user_rating">Rating: <?= $item['user_rating'] ?> / 10</div>
 							<div class="completion">Episodes:
diff --git a/app/views/anime/list.php b/app/views/anime/list.php
index 08172ebd..489bcc59 100644
--- a/app/views/anime/list.php
+++ b/app/views/anime/list.php
@@ -1,4 +1,4 @@
-<main>
+<main class="media-list">
 <?php if ($auth->isAuthenticated()): ?>
 <a class="bracketed" href="<?= $url->generate('anime.add.get') ?>">Add Item</a>
 <?php endif ?>
diff --git a/app/views/collection/cover-item.php b/app/views/collection/cover-item.php
new file mode 100644
index 00000000..0244dd83
--- /dev/null
+++ b/app/views/collection/cover-item.php
@@ -0,0 +1,27 @@
+<article class="media" id="a-<?= $item['hummingbird_id'] ?>">
+	<img src="<?= $urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.jpg") ?>"
+		 alt="<?= $item['title'] ?> cover image"/>
+	<div class="name">
+		<a href="<?= $url->generate('anime.details', ['id' => $item['slug']]) ?>">
+			<?= $item['title'] ?>
+			<?= ($item['alternate_title'] != "") ? "<small><br />{$item['alternate_title']}</small>" : ""; ?>
+		</a>
+	</div>
+	<div class="table">
+		<?php if ($auth->isAuthenticated()): ?>
+		<div class="row">
+			<span class="edit">
+				<a class="bracketed"
+				   href="<?= $url->generate($collection_type . '.collection.edit.get', [
+					   'id' => $item['hummingbird_id']
+				   ]) ?>">Edit</a>
+			</span>
+		</div>
+		<?php endif ?>
+		<div class="row">
+			<div class="completion">Episodes: <?= $item['episode_count'] ?></div>
+			<div class="media_type"><?= $item['show_type'] ?></div>
+			<div class="age_rating"><?= $item['age_rating'] ?></div>
+		</div>
+	</div>
+</article>
\ No newline at end of file
diff --git a/app/views/collection/cover.php b/app/views/collection/cover.php
index 9f82b9ae..7441f79b 100644
--- a/app/views/collection/cover.php
+++ b/app/views/collection/cover.php
@@ -1,4 +1,4 @@
-<main>
+<main class="media-list">
 <?php if ($auth->isAuthenticated()): ?>
 <a class="bracketed" href="<?= $url->generate($collection_type . '.collection.add.get') ?>">Add Item</a>
 <?php endif ?>
@@ -14,33 +14,7 @@
 			<h2><?= $name ?></h2>
 			<section class="media-wrap">
 				<?php foreach ($items as $item): ?>
-					<article class="media" id="a-<?= $item['hummingbird_id'] ?>">
-						<img src="<?= $urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.jpg") ?>"
-								alt="<?= $item['title'] ?> cover image"/>
-						<div class="name">
-							<a href="<?= $url->generate('anime.details', ['id' => $item['slug']]) ?>">
-								<?= $item['title'] ?>
-								<?= ($item['alternate_title'] != "") ? "<small><br />{$item['alternate_title']}</small>" : ""; ?>
-							</a>
-						</div>
-						<div class="table">
-							<?php if ($auth->isAuthenticated()): ?>
-								<div class="row">
-							<span class="edit">
-								<a class="bracketed"
-									href="<?= $url->generate($collection_type . '.collection.edit.get', [
-										'id' => $item['hummingbird_id']
-									]) ?>">Edit</a>
-							</span>
-								</div>
-							<?php endif ?>
-							<div class="row">
-								<div class="completion">Episodes: <?= $item['episode_count'] ?></div>
-								<div class="media_type"><?= $item['show_type'] ?></div>
-								<div class="age_rating"><?= $item['age_rating'] ?></div>
-							</div>
-						</div>
-					</article>
+					<?php include __DIR__ . '/cover-item.php'; ?>
 				<?php endforeach ?>
 			</section>
 		</div>
diff --git a/app/views/collection/edit.php b/app/views/collection/edit.php
index 6b7af08f..33882b9d 100644
--- a/app/views/collection/edit.php
+++ b/app/views/collection/edit.php
@@ -2,7 +2,7 @@
 <main>
 	<h2>Edit Anime Collection Item</h2>
 	<form action="<?= $action_url ?>" method="post">
-		<table class="form">
+		<table class="invisible form" style="border:0">
 			<thead>
 				<tr>
 					<th>
@@ -11,17 +11,17 @@
 						<h4><?= $item['alternate_title'] ?></h4>
 						<?php endif ?>
 					</th>
-					<th>
-						<article class="media">
-							<?= $helper->img($urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.jpg")); ?>
-						</article>
-					</th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr>
-					<td><label for="media_id">Media</label></td>
-					<td>
+					<td rowspan="4" class="align_center">
+						<?= $helper->img($urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.jpg")); ?>
+					</td>
+				</tr>
+				<tr>
+					<td class="align_right"><label for="media_id">Media</label></td>
+					<td class="align_left" width="100%">
 						<select name="media_id" id="media_id">
 						<?php foreach($media_items as $id => $name): ?>
 							<option <?= $item['media_id'] == $id ? 'selected="selected"' : '' ?> value="<?= $id ?>"><?= $name ?></option>
diff --git a/app/views/collection/list-item.php b/app/views/collection/list-item.php
new file mode 100644
index 00000000..50c302d2
--- /dev/null
+++ b/app/views/collection/list-item.php
@@ -0,0 +1,19 @@
+<tr>
+	<?php if ($auth->isAuthenticated()): ?>
+		<td>
+			<a class="bracketed"
+			   href="<?= $url->generate($collection_type . '.collection.edit.get', ['id' => $item['hummingbird_id']]) ?>">Edit</a>
+		</td>
+	<?php endif ?>
+	<td class="align_left">
+		<a href="<?= $url->generate('anime.details', ['id' => $item['slug']]) ?>">
+			<?= $item['title'] ?>
+		</a>
+		<?= (!empty($item['alternate_title'])) ? " <br /><small> " . $item['alternate_title'] . "</small>" : "" ?>
+	</td>
+	<td><?= $item['episode_count'] ?></td>
+	<td><?= $item['episode_length'] ?></td>
+	<td><?= $item['show_type'] ?></td>
+	<td><?= $item['age_rating'] ?></td>
+	<td class="align_left"><?= $item['notes'] ?></td>
+</tr>
\ No newline at end of file
diff --git a/app/views/collection/list.php b/app/views/collection/list.php
index f5ab3be5..049a63be 100644
--- a/app/views/collection/list.php
+++ b/app/views/collection/list.php
@@ -1,58 +1,42 @@
 <main>
-<?php if ($auth->isAuthenticated()): ?>
-<a class="bracketed" href="<?= $url->generate($collection_type . '.collection.add.get') ?>">Add Item</a>
-<?php endif ?>
-<?php if (empty($sections)): ?>
-<h3>There's nothing here!</h3>
-<?php else: ?>
-<?php $i = 0; ?>
-	<div class="tabs">
-	<?php foreach ($sections as $name => $items): ?>
-			<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="collection-tab-<?= $i ?>" name="collection-tabs" />
-		<label for="collection-tab-<?= $i ?>"><?= $name ?></label>
-	<div class="content">
-	<h2><?= $name ?></h2>
-	<table>
-		<thead>
-			<tr>
-				<?php if($auth->isAuthenticated()): ?>
-				<th>Actions</th>
-				<?php endif ?>
-				<th>Title</th>
-				<th>Episode Count</th>
-				<th>Episode Length</th>
-				<th>Show Type</th>
-				<th>Age Rating</th>
-				<th>Notes</th>
-			</tr>
-		</thead>
-		<tbody>
-		<?php foreach($items as $item): ?>
-			<tr>
-				<?php if($auth->isAuthenticated()): ?>
-				<td>
-					<a class="bracketed" href="<?= $url->generate($collection_type . '.collection.edit.get', ['id' => $item['hummingbird_id']]) ?>">Edit</a>
-				</td>
-				<?php endif ?>
-				<td class="align_left">
-					<a href="<?= $url->generate('anime.details', ['id' => $item['slug']]) ?>">
-						<?= $item['title'] ?>
-					</a>
-					<?= ( ! empty($item['alternate_title'])) ? " <br /><small> " . $item['alternate_title'] . "</small>" : "" ?>
-				</td>
-				<td><?= $item['episode_count'] ?></td>
-				<td><?= $item['episode_length'] ?></td>
-				<td><?= $item['show_type'] ?></td>
-				<td><?= $item['age_rating'] ?></td>
-				<td class="align_left"><?= $item['notes'] ?></td>
-			</tr>
-		<?php endforeach ?>
-		</tbody>
-	</table>
-	</div>
-	<?php $i++ ?>
-	<?php endforeach ?>
-	</div>
-<?php endif ?>
+	<?php if ($auth->isAuthenticated()): ?>
+		<a class="bracketed" href="<?= $url->generate($collection_type . '.collection.add.get') ?>">Add Item</a>
+	<?php endif ?>
+	<?php if (empty($sections)): ?>
+		<h3>There's nothing here!</h3>
+	<?php else: ?>
+		<?php $i = 0; ?>
+		<div class="tabs">
+			<?php foreach ($sections as $name => $items): ?>
+				<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="collection-tab-<?= $i ?>"
+																  name="collection-tabs"/>
+				<label for="collection-tab-<?= $i ?>"><?= $name ?></label>
+				<div class="content">
+					<h2><?= $name ?></h2>
+					<table>
+						<thead>
+						<tr>
+							<?php if ($auth->isAuthenticated()): ?>
+								<td>Actions</td>
+							<?php endif ?>
+							<th>Title</th>
+							<th>Episode Count</th>
+							<th>Episode Length</th>
+							<th>Show Type</th>
+							<th>Age Rating</th>
+							<th>Notes</th>
+						</tr>
+						</thead>
+						<tbody>
+						<?php foreach ($items as $item): ?>
+							<?php include __DIR__ . '/list-item.php' ?>
+						<?php endforeach ?>
+						</tbody>
+					</table>
+				</div>
+				<?php $i++ ?>
+			<?php endforeach ?>
+		</div>
+	<?php endif ?>
 </main>
 <script defer="defer" src="<?= $urlGenerator->assetUrl('js.php/g/table') ?>"></script>
\ No newline at end of file
diff --git a/app/views/main-menu.php b/app/views/main-menu.php
index 7c424b57..f27ca846 100644
--- a/app/views/main-menu.php
+++ b/app/views/main-menu.php
@@ -7,7 +7,7 @@ $lastSegment = $urlGenerator->lastSegment();
 $extraSegment = $lastSegment === 'list' ? '/list' : '';
 
 ?>
-<h1 class="flex flex-align-end flex-wrap">
+<div id="main-nav" class="flex flex-align-end flex-wrap">
 	<span class="flex-no-wrap grow-1">
 		<?php if(strpos($route_path, 'collection') === FALSE): ?>
 			<?= $helper->a(
@@ -67,7 +67,7 @@ $extraSegment = $lastSegment === 'list' ? '/list' : '';
 			[<?= $helper->a($url->generate('login'), "{$whose} Login") ?>]
 		<?php endif ?>
 	</span>
-</h1>
+</div>
 <nav>
 	<?php if ($container->get('util')->isViewPage()): ?>
 		<?= $helper->menu($menu_name) ?>
diff --git a/app/views/manga/cover.php b/app/views/manga/cover.php
index 6ced8cae..93d9d611 100644
--- a/app/views/manga/cover.php
+++ b/app/views/manga/cover.php
@@ -1,4 +1,4 @@
-<main>
+<main class="media-list">
 <?php if ($auth->isAuthenticated()): ?>
 <a class="bracketed" href="<?= $url->generate('manga.add.get') ?>">Add Item</a>
 <?php endif ?>
diff --git a/app/views/manga/edit.php b/app/views/manga/edit.php
index 29c34733..83b3301f 100644
--- a/app/views/manga/edit.php
+++ b/app/views/manga/edit.php
@@ -1,23 +1,23 @@
 <?php if ($auth->isAuthenticated()): ?>
 	<main>
-		<h1>
-			Edit <?= $item['manga']['titles'][0] ?>
-		</h1>
+		<h2>
+			Edit Manga List Item
+		</h2>
 		<form action="<?= $action ?>" method="post">
 		<table class="form">
 			<thead>
 				<tr>
-                    <th>
-                        <h3><?= $escape->html($item['manga']['title']) ?></h3>
-						<?php foreach($item['manga']['titles'] as $title): ?>
-                            <h4><?= $escape->html($title) ?></h4>
-						<?php endforeach ?>
-                    </th>
 					<th>
 						<article class="media">
 							<?= $helper->img($urlGenerator->assetUrl('images/manga', "{$item['manga']['id']}.jpg")); ?>
 						</article>
 					</th>
+                    <th class="align_left">
+                        <h3><?= $escape->html($item['manga']['title']) ?></h3>
+						<?php foreach($item['manga']['titles'] as $title): ?>
+                            <h4><?= $escape->html($title) ?></h4>
+						<?php endforeach ?>
+                    </th>
 				</tr>
 			</thead>
 			<tbody>
diff --git a/app/views/manga/list.php b/app/views/manga/list.php
index e7c81ed2..523a8734 100644
--- a/app/views/manga/list.php
+++ b/app/views/manga/list.php
@@ -1,4 +1,4 @@
-<main>
+<main class="media-list">
 <?php if ($auth->isAuthenticated()): ?>
 <a class="bracketed" href="<?= $url->generate('manga.add.get') ?>">Add Item</a>
 <?php endif ?>
@@ -14,7 +14,7 @@
 			<thead>
 				<tr>
 					<?php if ($auth->isAuthenticated()): ?>
-					<th>&nbsp;</th>
+					<td>&nbsp;</td>
 					<?php endif ?>
 					<th>Title</th>
 					<th>Rating</th>
diff --git a/public/css/app.min.css b/public/css/app.min.css
index 74963dfc..5cf5b588 100644
--- a/public/css/app.min.css
+++ b/public/css/app.min.css
@@ -1 +1 @@
-:root{-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;box-sizing:border-box;cursor:default;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;overflow-y:scroll;scroll-behavior:smooth;text-size-adjust:100%}audio:not([controls]){display:none}details{display:block}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}main{margin:0 auto;padding:0 1.6rem 1.6rem}main,pre,summary{display:block}pre{background:#efefef;color:#444;font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;font-size:1.4em;font-size:14px;font-size:1.4rem;margin:1.6rem 0;overflow:auto;padding:1.6rem;word-break:break-all;word-wrap:break-word}progress{display:inline-block}small{color:#777;font-size:75%}big{font-size:125%}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}[hidden]{display:none}[unselectable]{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}*,:after,:before{-webkit-box-sizing:inherit;border-style:solid;border-width:0;box-sizing:inherit}*{font-size:inherit;line-height:inherit;margin:0;padding:0}:after,:before{text-decoration:inherit;vertical-align:inherit}a{-webkit-transition:.25s ease;color:#1271db;text-decoration:none;transition:.25s ease}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}code,kbd,pre,samp{font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace}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}button::-moz-focus-inner{border:0}body{color:#444;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;font-size:1.6rem;font-style:normal;font-weight:400;padding:0}p{margin:0 0 1.6rem}h1,h2,h3,h4,h5,h6{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;margin:2rem 0 1.6rem}h1{border-bottom:.1rem solid rgba(0,0,0,.2);font-size:3.6em;font-size:36px;font-size:3.6rem}h1,h2{font-style:normal;font-weight:500}h2{font-size:3em;font-size:30px;font-size:3rem}h3{font-size:2.4em;font-size:24px;font-size:2.4rem;font-style:normal;font-weight:500;margin:1.6rem 0 .4rem}h4{font-size:1.8em;font-size:18px;font-size:1.8rem}h4,h5{font-style:normal;font-weight:600;margin:1.6rem 0 .4rem}h5{font-size:1.6em;font-size:16px;font-size:1.6rem}h6{color:#777;font-size:1.4em;font-style:normal;font-weight:600;margin:1.6rem 0 .4rem}code,h6{font-size:14px;font-size:1.4rem}code{background:#efefef;color:#444;font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;word-break:break-all;word-wrap:break-word}a:focus,a:hover{text-decoration:none}dl{margin-bottom:1.6rem}dd{margin-left:4rem}ol,ul{margin-bottom:.8rem;padding-left:2rem}blockquote{border-left:.2rem solid #1271db;font-style:italic;margin:1.6rem 0;padding-left:1.6rem}blockquote,figcaption{font-family:Georgia,Times,Times New Roman,serif}html{font-size:62.5%}article,aside,details,footer,header,main,section,summary{display:block;height:auto;margin:0 auto;width:100%}footer{clear:both;display:inline-block;float:left;max-width:100%;padding:1rem 0;text-align:center}footer,hr{border-top:.1rem solid rgba(0,0,0,.2)}hr{display:block;margin-bottom:1.6rem;width:100%}img{height:auto;vertical-align:baseline}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],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:not([type]):focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#b3d4fc}input[type=checkbox],input[type=radio]{vertical-align:middle}input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus{outline:1px thin solid #444;outline:.1rem thin solid #444}input:not([type])[disabled],input[type=color][disabled],input[type=date][disabled],input[type=datetime-local][disabled],input[type=datetime][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled],select[disabled],textarea[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,select:focus:invalid,textarea:focus:invalid{border-color:#e9322d;color:#b94a48}input[type=checkbox]:focus:invalid:focus,input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus{outline-color:#ff4136}select{background-color:#fff;border:.1rem solid #ccc}select[multiple]{height:auto}label{line-height:2}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%}button,input[type=submit]{-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}button a,input[type=submit] a{color:#444}button::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0}button:hover,input[type=submit]:hover{background:#444;border-color:#444;color:#fff}button:hover a,input[type=submit]:hover a{color:#fff}button:active,input[type=submit]:active{background:#6a6a6a;border-color:#6a6a6a;color:#fff}button:active a,input[type=submit]:active a{color:#fff}button:disabled,input[type=submit]:disabled{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:.4}nav ul{list-style:none;margin:0;padding:0;text-align:center}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;transition:.25s ease}nav a:hover,nav li.selected a{border-color:rgba(0,0,0,.2)}nav a:active{border-color:rgba(0,0,0,.56)}caption{padding:.8rem 0}thead th{background:#efefef;color:#444}tr{background:#fff;margin-bottom:.8rem}td,th{border:.1rem solid #ccc;padding:.8rem 1.6rem;text-align:center;vertical-align:inherit}tfoot tr{background:none}tfoot td{color:#efefef;font-size:8px;font-size:.8rem;font-style:italic;padding:1.6rem .4rem}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0)!important;position:absolute!important}}@media screen and max-width 40rem{article,aside,section{clear:both;display:block;max-width:100%}img{margin-right:1.6rem}}.media[hidden],[hidden=hidden],template{display:none}body{margin:.5em}button{background:hsla(0,0%,100%,.65);margin:0}table{margin:0 auto;min-width:85%}td{padding:1rem}thead td,thead th{padding:.5rem}input[type=number]{width:4em}tbody>tr:nth-child(odd){background:#ddd}a:active,a:hover{color:#7d12db}.bracketed{color:#12db18}.bracketed,h1 a{text-shadow:1px 1px 1px #000}.bracketed:before{content:"[\00a0"}.bracketed:after{content:"\00a0]"}.bracketed:active,.bracketed:hover{color:#db7d12}.grow-1{-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-align-end{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.flex-align-space-around{-ms-flex-line-pack:distribute;align-content:space-around}.flex-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.flex-self-center{-ms-flex-item-align:center;align-self:center}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.small-font{font-size:16px;font-size:1.6rem}.justify{text-align:justify}.align_center{text-align:center!important}.align_left{text-align:left!important}.align_right{text-align:right!important}.valign_top{vertical-align:top}.no_border{border:none}.media-wrap{margin:0 auto;text-align:center}.danger{background-color:#ff4136;border-color:#924949;color:#fff}.danger:active,.danger:hover{background-color:#924949;border-color:#ff4136;color:#fff}.user-btn{border-color:#12db18;color:#12db18;padding:0 .5rem;text-shadow:1px 1px 1px #000}.user-btn:active,.user-btn:hover{background-color:#db7d12;border-color:#db7d12}.full_width{width:100%}.cssload-loader{-webkit-perspective:780px;border-radius:50%;height:62px;left:calc(50% - 31px);perspective:780px;position:relative;width:62px}.cssload-inner{-webkit-box-sizing:border-box;border-radius:50%;box-sizing:border-box;height:100%;position:absolute;width:100%}.cssload-inner.cssload-one{-webkit-animation:cssload-rotate-one 1.15s linear infinite;animation:cssload-rotate-one 1.15s linear infinite;border-bottom:3px solid #000;left:0;top:0}.cssload-inner.cssload-two{-webkit-animation:cssload-rotate-two 1.15s linear infinite;animation:cssload-rotate-two 1.15s linear infinite;border-right:3px solid #000;right:0;top:0}.cssload-inner.cssload-three{-webkit-animation:cssload-rotate-three 1.15s linear infinite;animation:cssload-rotate-three 1.15s linear infinite;border-top:3px solid #000;bottom:0;right:0}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(0deg);transform:rotateX(35deg) rotateY(-45deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(1turn);transform:rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(0deg);transform:rotateX(35deg) rotateY(-45deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(1turn);transform:rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(0deg);transform:rotateX(50deg) rotateY(10deg) rotate(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(1turn);transform:rotateX(50deg) rotateY(10deg) rotate(1turn)}}@keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(0deg);transform:rotateX(50deg) rotateY(10deg) rotate(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(1turn);transform:rotateX(50deg) rotateY(10deg) rotate(1turn)}}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(0deg);transform:rotateX(35deg) rotateY(55deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(1turn);transform:rotateX(35deg) rotateY(55deg) rotate(1turn)}}@keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(0deg);transform:rotateX(35deg) rotateY(55deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(1turn);transform:rotateX(35deg) rotateY(55deg) rotate(1turn)}}.sorting,.sorting_asc,.sorting_desc{vertical-align:text-bottom}.sorting:before{content:" ↕\00a0"}.sorting_asc:before{content:" ↑\00a0"}.sorting_desc:before{content:" ↓\00a0"}.form{width:100%}.form thead th,.form thead tr{background:inherit;border:0}.form tr>td:nth-child(odd){max-width:30%;min-width:25px;text-align:right}.form tr>td:nth-child(2n){text-align:left;width:70%}.invisible tbody>tr:nth-child(odd){background:inherit}.invisible td,.invisible th,.invisible tr{border:0}.message{margin:.5em auto;padding:.5em;position:relative;width:95%}.message .close{height:1em;line-height:1em;position:absolute;right:.5em;text-align:center;top:.5em;vertical-align:middle;width:1em}.message:hover .close:after{content:"☒"}.message:hover{cursor:pointer}.message .icon{left:.5em;margin-right:1em;top:.5em}.message.error{background:#f3e6e6;border:1px solid #924949}.message.error .icon:after{content:"✘"}.message.success{background:#70dda9;border:1px solid #1f8454}.message.success .icon:after{content:"✔"}.message.info{background:#ffc;border:1px solid #bfbe3a}.message.info .icon:after{content:"⚠"}.character,.media,.small_character{display:inline-block;height:311px;margin:.25em .125em;position:relative;text-align:center;vertical-align:top;width:220px}.character>img,.media>img,.small_character>img{width:100%}.media .edit_buttons>button{margin:.5em auto}.media_metadata>div,.medium_metadata>div,.name,.row{background:#000;background:rgba(0,0,0,.45);color:#fff;padding:.25em .125em;text-align:right;text-shadow:1px 2px 1px rgba(0,0,0,.85)}.age_rating,.media_type{text-align:left}.media>.media_metadata{bottom:0;position:absolute;right:0}.media>.medium_metadata{bottom:0;left:0;position:absolute}.media>.name{position:absolute;top:0}.character:hover>.name,.media:hover>.media_metadata>div,.media:hover>.medium_metadata>div,.media:hover>.name,.media:hover>.table .row,.small_character:hover>.name{-webkit-transition:.25s ease;background:rgba(0,0,0,.75);transition:.25s ease}.media:hover>.edit_buttons[hidden],.media:hover>button[hidden]{-webkit-transition:.25s ease;display:block;transition:.25s ease}.character>.name a,.character>.name a small,.media>.name a,.media>.name a small,.small_character>.name a,.small_character>.name a small{background:none;color:#fff;text-shadow:1px 2px 1px rgba(0,0,0,.85)}.anime .name,.manga .name{padding:.5em .25em;text-align:center;width:100%}.anime .age_rating,.anime .airing_status,.anime .completion,.anime .delete,.anime .edit,.anime .media_type,.anime .user_rating{background:none;text-align:center}.anime .table,.manga .table{bottom:0;left:0;position:absolute;width:100%}.anime .row,.manga .row{-ms-flex-line-pack:distribute;-ms-flex-pack:distribute;align-content:space-around;background:#000;background:rgba(0,0,0,.45);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around;padding:0 inherit;text-align:center;width:100%}.anime .row>span,.manga .row>span{text-align:left}.anime .row>div,.manga .row>div{-ms-flex-item-align:center;align-self:center;display:flex-item;font-size:.8em;text-align:center;vertical-align:middle}.anime .media>button.plus_one{left:44px;left:calc(50% - 66.5px);position:absolute;top:138px;top:calc(50% - 21.5px)}.manga .row{padding:1px}.manga .media{border:1px solid #ddd;height:310px;margin:.25em}.manga .media>.edit_buttons{left:43.5px;left:calc(50% - 66.5px);position:absolute;top:86px;top:calc(50% - 58.5px)}.media.search>.name{background-color:#555;background-color:rgba(0,0,0,.35);background-repeat:no-repeat;background-size:cover;background-size:contain}.big-check{display:none}.big-check:checked+label{-webkit-transition:.25s ease;background:rgba(0,0,0,.75);transition:.25s ease}.big-check:checked+label:after{color:#adff2f;content:"✓";font-size:15em;font-size:150px;font-size:15rem;height:100%;left:0;position:absolute;text-align:center;top:147px;width:100%}#series_list article.media{position:relative}#series_list .name,#series_list .name label{display:block;height:100%;left:0;line-height:1.25em;position:absolute;top:0;vertical-align:middle;width:100%}#series_list .name small{color:#fff}.details{font-size:inherit;margin:1.5rem auto 0;padding:1rem}.description{max-width:800px;max-width:80rem}.fixed{max-width:930px;max-width:93rem}.details .cover{display:block;width:284px}.details h2{margin-top:0}.details .flex>div{margin:1rem}.details .media_details{max-width:300px}.details .media_details td{padding:0 1.5rem}.details p{text-align:justify}.details .media_details td:nth-child(odd){text-align:right;white-space:nowrap;width:1%}.details .media_details td:nth-child(2n){text-align:left}.character,.small_character{background:rgba(0,0,0,.5);height:350px;vertical-align:middle;white-space:nowrap;width:225px}.small_character a{display:inline-block;height:100%;width:100%}.character .name,.small_character .name{bottom:0;left:0;position:absolute;z-index:10}.character img,.small_character img{-webkit-transform:translateY(-50%);position:relative;top:50%;transform:translateY(-50%);width:100%;z-index:5}.min-table{margin-left:0;min-width:0}.small_character{height:250px;width:160px}.user-page .media-wrap{text-align:left}.media a{display:inline-block;height:100%;width:100%}@media screen and (max-width:40em){nav a{line-height:4em;line-height:4rem}.media{margin:2px 0}main{padding:0 .5rem .5rem}}.streaming-logo{height:50px;vertical-align:middle;width:50px}.cover_streaming_link .streaming-logo{height:20px;width:20px}#loading-shadow{background:rgba(0,0,0,.8);z-index:500}#loading-shadow,#loading-shadow .loading-wrapper{height:100%;left:0;position:fixed;top:0;width:100%}#loading-shadow .loading-wrapper{-ms-flex-align:center;-ms-flex-pack:center;-webkit-box-align:center;-webkit-box-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;z-index:501}#loading-shadow .loading-content{color:#fff;position:relative}.loading-content .cssload-inner.cssload-one,.loading-content .cssload-inner.cssload-three,.loading-content .cssload-inner.cssload-two{border-color:#fff}.tabs{-ms-flex-wrap:wrap;-webkit-box-shadow:0 48px 80px -32px rgba(0,0,0,.3);background:#efefef;box-shadow:0 48px 80px -32px rgba(0,0,0,.3);display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;margin-top:1.5em}.tabs label{-webkit-transition:background .1s,color .1s;background:#e5e5e5;border:1px solid #e5e5e5;color:#7f7f7f;cursor:pointer;font-size:18px;font-weight:700;padding:20px 30px;transition:background .1s,color .1s;width:100%}.tabs label:hover{background:#d8d8d8}.tabs label:active{background:#ccc}.tabs [type=radio]:focus+label{-webkit-box-shadow:inset 0 0 0 3px #2aa1c0;box-shadow:inset 0 0 0 3px #2aa1c0;z-index:1}.tabs [type=radio]{opacity:0;position:absolute}.tabs [type=radio]:checked+label{background:#fff;border-bottom:1px solid #fff;color:#000}.tabs [type=radio]:checked+label+.content{background:#fff;border:1px solid #e5e5e5;border-top:0;display:block;padding:20px 30px 30px;width:100%}.tabs .content{display:none}@media (min-width:600px){.tabs label{width:auto}.tabs .content{-ms-flex-order:99;-webkit-box-ordinal-group:100;order:99}}
\ No newline at end of file
+:root{-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;box-sizing:border-box;cursor:default;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;overflow-y:scroll;scroll-behavior:smooth;text-size-adjust:100%}audio:not([controls]){display:none}details{display:block}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}main{margin:0 auto;padding:0 1.6rem 1.6rem}main,pre,summary{display:block}pre{background:#efefef;color:#444;font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;font-size:1.4em;font-size:14px;font-size:1.4rem;margin:1.6rem 0;overflow:auto;padding:1.6rem;word-break:break-all;word-wrap:break-word}progress{display:inline-block}small{color:#777;font-size:75%}big{font-size:125%}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}[hidden]{display:none}[unselectable]{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}*,:after,:before{-webkit-box-sizing:inherit;border-style:solid;border-width:0;box-sizing:inherit}*{font-size:inherit;line-height:inherit;margin:0;padding:0}:after,:before{text-decoration:inherit;vertical-align:inherit}a{-webkit-transition:.25s ease;color:#1271db;text-decoration:none;transition:.25s ease}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}code,kbd,pre,samp{font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace}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}button::-moz-focus-inner{border:0}body{color:#444;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;font-size:1.6rem;font-style:normal;font-weight:400;padding:0}p{margin:0 0 1.6rem}h1,h2,h3,h4,h5,h6{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;margin:2rem 0 1.6rem}h1{border-bottom:.1rem solid rgba(0,0,0,.2);font-size:3.6em;font-size:36px;font-size:3.6rem}h1,h2{font-style:normal;font-weight:500}h2{font-size:3em;font-size:30px;font-size:3rem}h3{font-size:2.4em;font-size:24px;font-size:2.4rem;font-style:normal;font-weight:500;margin:1.6rem 0 .4rem}h4{font-size:1.8em;font-size:18px;font-size:1.8rem}h4,h5{font-style:normal;font-weight:600;margin:1.6rem 0 .4rem}h5{font-size:1.6em;font-size:16px;font-size:1.6rem}h6{color:#777;font-size:1.4em;font-style:normal;font-weight:600;margin:1.6rem 0 .4rem}code,h6{font-size:14px;font-size:1.4rem}code{background:#efefef;color:#444;font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;word-break:break-all;word-wrap:break-word}a:focus,a:hover{text-decoration:none}dl{margin-bottom:1.6rem}dd{margin-left:4rem}ol,ul{margin-bottom:.8rem;padding-left:2rem}blockquote{border-left:.2rem solid #1271db;font-style:italic;margin:1.6rem 0;padding-left:1.6rem}blockquote,figcaption{font-family:Georgia,Times,Times New Roman,serif}html{font-size:62.5%}article,aside,details,footer,header,main,section,summary{display:block;height:auto;margin:0 auto;width:100%}footer{clear:both;display:inline-block;float:left;max-width:100%;padding:1rem 0;text-align:center}footer,hr{border-top:.1rem solid rgba(0,0,0,.2)}hr{display:block;margin-bottom:1.6rem;width:100%}img{height:auto;vertical-align:baseline}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],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:not([type]):focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#b3d4fc}input[type=checkbox],input[type=radio]{vertical-align:middle}input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus{outline:1px thin solid #444;outline:.1rem thin solid #444}input:not([type])[disabled],input[type=color][disabled],input[type=date][disabled],input[type=datetime-local][disabled],input[type=datetime][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled],select[disabled],textarea[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,select:focus:invalid,textarea:focus:invalid{border-color:#e9322d;color:#b94a48}input[type=checkbox]:focus:invalid:focus,input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus{outline-color:#ff4136}select{background-color:#fff;border:.1rem solid #ccc}select[multiple]{height:auto}label{line-height:2}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%}button,input[type=submit]{-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}button a,input[type=submit] a{color:#444}button::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0}button:hover,input[type=submit]:hover{background:#444;border-color:#444;color:#fff}button:hover a,input[type=submit]:hover a{color:#fff}button:active,input[type=submit]:active{background:#6a6a6a;border-color:#6a6a6a;color:#fff}button:active a,input[type=submit]:active a{color:#fff}button:disabled,input[type=submit]:disabled{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:.4}nav ul{list-style:none;margin:0;padding:0;text-align:center}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;transition:.25s ease}nav a:hover,nav li.selected a{border-color:rgba(0,0,0,.2)}nav a:active{border-color:rgba(0,0,0,.56)}caption{padding:.8rem 0}thead th{background:#efefef;color:#444}tr{background:#fff;margin-bottom:.8rem}td,th{border:.1rem solid #ccc;padding:.8rem 1.6rem;text-align:center;vertical-align:inherit}tfoot tr{background:none}tfoot td{color:#efefef;font-size:8px;font-size:.8rem;font-style:italic;padding:1.6rem .4rem}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0)!important;position:absolute!important}}@media screen and max-width 40rem{article,aside,section{clear:both;display:block;max-width:100%}img{margin-right:1.6rem}}.media[hidden],[hidden=hidden],template{display:none}body{margin:.5em}button{background:hsla(0,0%,100%,.65);margin:0}table{margin:0 auto;min-width:85%}td{padding:1rem}thead td,thead th{padding:.5rem}input[type=number]{width:4em}tbody>tr:nth-child(odd){background:#ddd}a:active,a:hover{color:#7d12db}.bracketed{color:#12db18}#main-nav a,.bracketed{text-shadow:1px 1px 1px #000}.bracketed:before{content:"[\00a0"}.bracketed:after{content:"\00a0]"}.bracketed:active,.bracketed:hover{color:#db7d12}.grow-1{-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-align-end{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.flex-align-space-around{-ms-flex-line-pack:distribute;align-content:space-around}.flex-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.flex-self-center{-ms-flex-item-align:center;align-self:center}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.small-font{font-size:16px;font-size:1.6rem}.justify{text-align:justify}.align_center{text-align:center!important}.align_left{text-align:left!important}.align_right{text-align:right!important}.valign_top{vertical-align:top}.no_border{border:none}.media-wrap{margin:0 auto;position:relative;text-align:center}.danger{background-color:#ff4136;border-color:#924949;color:#fff}.danger:active,.danger:hover{background-color:#924949;border-color:#ff4136;color:#fff}.user-btn{border-color:#12db18;color:#12db18;padding:0 .5rem;text-shadow:1px 1px 1px #000}.user-btn:active,.user-btn:hover{background-color:#db7d12;border-color:#db7d12}.full_width{width:100%}#main-nav{border-bottom:.1rem solid rgba(0,0,0,.2);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;font-size:3.6em;font-size:36px;font-size:3.6rem;font-style:normal;font-weight:500;margin:2rem 0 1.6rem}.cssload-loader{-webkit-perspective:780px;border-radius:50%;height:62px;left:calc(50% - 31px);perspective:780px;position:relative;width:62px}.cssload-inner{-webkit-box-sizing:border-box;border-radius:50%;box-sizing:border-box;height:100%;position:absolute;width:100%}.cssload-inner.cssload-one{-webkit-animation:cssload-rotate-one 1.15s linear infinite;animation:cssload-rotate-one 1.15s linear infinite;border-bottom:3px solid #000;left:0;top:0}.cssload-inner.cssload-two{-webkit-animation:cssload-rotate-two 1.15s linear infinite;animation:cssload-rotate-two 1.15s linear infinite;border-right:3px solid #000;right:0;top:0}.cssload-inner.cssload-three{-webkit-animation:cssload-rotate-three 1.15s linear infinite;animation:cssload-rotate-three 1.15s linear infinite;border-top:3px solid #000;bottom:0;right:0}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(0deg);transform:rotateX(35deg) rotateY(-45deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(1turn);transform:rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(0deg);transform:rotateX(35deg) rotateY(-45deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(1turn);transform:rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(0deg);transform:rotateX(50deg) rotateY(10deg) rotate(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(1turn);transform:rotateX(50deg) rotateY(10deg) rotate(1turn)}}@keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(0deg);transform:rotateX(50deg) rotateY(10deg) rotate(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(1turn);transform:rotateX(50deg) rotateY(10deg) rotate(1turn)}}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(0deg);transform:rotateX(35deg) rotateY(55deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(1turn);transform:rotateX(35deg) rotateY(55deg) rotate(1turn)}}@keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(0deg);transform:rotateX(35deg) rotateY(55deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(1turn);transform:rotateX(35deg) rotateY(55deg) rotate(1turn)}}.sorting,.sorting_asc,.sorting_desc{vertical-align:text-bottom}.sorting:before{content:" ↕\00a0"}.sorting_asc:before{content:" ↑\00a0"}.sorting_desc:before{content:" ↓\00a0"}.form{width:100%}.form thead th,.form thead tr{background:inherit;border:0}.form tr>td:nth-child(odd){max-width:30%;min-width:25px;text-align:right}.form tr>td:nth-child(2n){text-align:left;width:70%}.invisible tbody>tr:nth-child(odd){background:inherit}.invisible td,.invisible th,.invisible tr{border:0}.message{margin:.5em auto;padding:.5em;position:relative;width:95%}.message .close{height:1em;line-height:1em;position:absolute;right:.5em;text-align:center;top:.5em;vertical-align:middle;width:1em}.message:hover .close:after{content:"☒"}.message:hover{cursor:pointer}.message .icon{left:.5em;margin-right:1em;top:.5em}.message.error{background:#f3e6e6;border:1px solid #924949}.message.error .icon:after{content:"✘"}.message.success{background:#70dda9;border:1px solid #1f8454}.message.success .icon:after{content:"✔"}.message.info{background:#ffc;border:1px solid #bfbe3a}.message.info .icon:after{content:"⚠"}.character,.media,.small_character{display:inline-block;height:311px;margin:.25em .125em;position:relative;text-align:center;vertical-align:top;width:220px;z-index:0}.character>img,.media>img,.small_character>img{width:100%}.media .edit_buttons>button{margin:.5em auto}.media_metadata>div,.medium_metadata>div,.name,.row{color:#fff;padding:.25em .125em;text-align:right;text-shadow:2px 2px 2px #000;z-index:2}.age_rating,.media_type{text-align:left}.media>.media_metadata{bottom:0;position:absolute;right:0}.media>.medium_metadata{bottom:0;left:0;position:absolute}.media>.name{position:absolute;top:0}.media>.name a{-webkit-transition:none;transition:none}.media .name a:before{content:"";display:block;height:311px;left:0;position:absolute;top:0;width:220px;z-index:-1}.media-list .media:hover .name a:before{background:rgba(0,0,0,.75)}.media>.name span.canonical{font-weight:700}.media>.name small{font-weight:400}.media:hover .name{background:rgba(0,0,0,.75)}.media-list .media>.name a:hover,.media-list .media>.name a:hover small{color:#1271db}.media:hover>.edit_buttons[hidden],.media:hover>button[hidden]{-webkit-transition:.25s ease;display:block;transition:.25s ease}.media:hover{-webkit-transition:.25s ease;transition:.25s ease}.character>.name a,.character>.name a small,.media>.name a,.media>.name a small,.small_character>.name a,.small_character>.name a small{background:none;color:#fff;text-shadow:2px 2px 2px #000}.anime .name,.manga .name{background:#000;background:rgba(0,0,0,.45);padding:.5em .25em;text-align:center;width:100%}.anime .age_rating,.anime .airing_status,.anime .completion,.anime .delete,.anime .edit,.anime .media_type,.anime .user_rating{background:none;text-align:center}.anime .table,.manga .table{bottom:0;left:0;position:absolute;width:100%}.anime .row,.manga .row{-ms-flex-line-pack:distribute;-ms-flex-pack:distribute;align-content:space-around;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around;padding:0 inherit;text-align:center;width:100%}.anime .row>span,.manga .row>span{text-align:left;z-index:2}.anime .row>div,.manga .row>div{-ms-flex-item-align:center;align-self:center;display:flex-item;font-size:.8em;text-align:center;vertical-align:middle;z-index:2}.anime .media>button.plus_one{border-color:hsla(0,0%,100%,.65);left:44px;left:calc(50% - 66.5px);position:absolute;top:138px;top:calc(50% - 21.5px);z-index:50}.anime .media>button.plus_one:hover{background:#888;color:hsla(0,0%,100%,.65)}.anime .media>button.plus_one:active{background:#444}.manga .row{padding:1px}.manga .media{border:1px solid #ddd;height:310px;margin:.25em}.manga .media>.edit_buttons{left:43.5px;left:calc(50% - 66.5px);position:absolute;top:86px;top:calc(50% - 22.4px);z-index:50}.manga .media>.edit_buttons button{border-color:hsla(0,0%,100%,.65)}.manga .media>.edit_buttons:hover button{background:#888;color:hsla(0,0%,100%,.65)}.manga .media>.edit_buttons button:active{background:#444}.media.search>.name{background-color:#555;background-color:rgba(0,0,0,.35);background-repeat:no-repeat;background-size:cover;background-size:contain}.big-check{display:none}.big-check:checked+label{-webkit-transition:.25s ease;background:rgba(0,0,0,.75);transition:.25s ease}.big-check:checked+label:after{color:#adff2f;content:"✓";font-size:15em;font-size:150px;font-size:15rem;height:100%;left:0;position:absolute;text-align:center;top:147px;width:100%;z-index:5}#series_list article.media{position:relative}#series_list .name,#series_list .name label{display:block;height:100%;left:0;line-height:1.25em;position:absolute;top:0;vertical-align:middle;width:100%}#series_list .name small{color:#fff}.details{font-size:inherit;margin:1.5rem auto 0;padding:1rem}.description{max-width:800px;max-width:80rem}.fixed{max-width:930px;max-width:93rem}.details .cover{display:block;width:284px}.details h2{margin-top:0}.details .flex>div{margin:1rem}.details .media_details{max-width:300px}.details .media_details td{padding:0 1.5rem}.details p{text-align:justify}.details .media_details td:nth-child(odd){text-align:right;white-space:nowrap;width:1%}.details .media_details td:nth-child(2n){text-align:left}.character,.small_character{height:350px;vertical-align:middle;white-space:nowrap;width:225px}.character:hover .name,.small_character:hover .name{background:rgba(0,0,0,.8)}.small_character a{display:inline-block;height:100%;width:100%}.character .name,.small_character .name{bottom:0;left:0;position:absolute;z-index:10}.character img,.small_character img{-webkit-transform:translateY(-50%);position:relative;top:50%;transform:translateY(-50%);width:100%;z-index:5}.min-table{margin-left:0;min-width:0}.small_character{height:250px;width:160px}.user-page .media-wrap{text-align:left}.media a{display:inline-block;height:100%;width:100%}@media screen and (max-width:40em){nav a{line-height:4em;line-height:4rem}.media{margin:2px 0}main{padding:0 .5rem .5rem}}.streaming-logo{height:50px;vertical-align:middle;width:50px}.cover_streaming_link{display:none}.media:hover .cover_streaming_link{display:block}.cover_streaming_link .streaming-logo{-webkit-filter:drop-shadow(0 -1px 4px #fff);filter:drop-shadow(0 -1px 4px #fff);height:20px;width:20px}#loading-shadow{background:rgba(0,0,0,.8);z-index:500}#loading-shadow,#loading-shadow .loading-wrapper{height:100%;left:0;position:fixed;top:0;width:100%}#loading-shadow .loading-wrapper{-ms-flex-align:center;-ms-flex-pack:center;-webkit-box-align:center;-webkit-box-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;z-index:501}#loading-shadow .loading-content{color:#fff;position:relative}.loading-content .cssload-inner.cssload-one,.loading-content .cssload-inner.cssload-three,.loading-content .cssload-inner.cssload-two{border-color:#fff}.tabs{-ms-flex-wrap:wrap;-webkit-box-shadow:0 48px 80px -32px rgba(0,0,0,.3);background:#efefef;box-shadow:0 48px 80px -32px rgba(0,0,0,.3);display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;margin-top:1.5em}.tabs label{-webkit-transition:background .1s,color .1s;background:#e5e5e5;border:1px solid #e5e5e5;color:#7f7f7f;cursor:pointer;font-size:18px;font-weight:700;padding:20px 30px;transition:background .1s,color .1s;width:100%}.tabs label:hover{background:#d8d8d8}.tabs label:active{background:#ccc}.tabs [type=radio]:focus+label{-webkit-box-shadow:inset 0 0 0 3px #2aa1c0;box-shadow:inset 0 0 0 3px #2aa1c0;z-index:1}.tabs [type=radio]{opacity:0;position:absolute}.tabs [type=radio]:checked+label{background:#fff;border-bottom:1px solid #fff;color:#000}.tabs [type=radio]:checked+label+.content{background:#fff;border:1px solid #e5e5e5;border-top:0;display:block;padding:20px 30px 30px;width:100%}.tabs .content{display:none}@media (min-width:600px){.tabs label{width:auto}.tabs .content{-ms-flex-order:99;-webkit-box-ordinal-group:100;order:99}}
\ No newline at end of file
diff --git a/public/css/base.css b/public/css/base.css
index 6b500f27..5bbd7fa0 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -1,8 +1,10 @@
 @import "./marx.css";
 
 :root {
+	--blue-link: rgb(18, 113, 219);
 	--link-shadow: 1px 1px 1px #000;
-	--shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
+	--white-link-shadow: 1px 1px 1px #fff;
+	--shadow: 2px 2px 2px #000;
 	--title-overlay: rgba(0, 0, 0, 0.45);
 	--title-overlay-fallback: #000;
 	--text-color: #ffffff;
@@ -13,28 +15,32 @@
 	--radius: 5px;
 }
 
-template, [hidden="hidden"], .media[hidden] {display:none}
+template, [hidden="hidden"], .media[hidden] {
+	display: none
+}
 
-body {margin: 0.5em;}
+body {
+	margin: 0.5em;
+}
 
 button {
-	background:rgba(255,255,255,0.65);
+	background: rgba(255, 255, 255, 0.65);
 	margin: 0;
 }
 
 table {
-	min-width:85%;
+	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;
+	padding: 0.5em;
+	padding: 0.5rem;
 }
 
 input[type=number] {
@@ -54,63 +60,111 @@ a:hover, a:active {
 ------------------------------------------------------------------------------*/
 
 .bracketed {
-	color:  var(--edit-link-color);
+	color: var(--edit-link-color);
 }
-.bracketed, h1 a {
+
+.bracketed, #main-nav a {
 	text-shadow: var(--link-shadow);
 }
-.bracketed:before {content: '[\00a0'}
-.bracketed:after {content: '\00a0]'}
+
+.bracketed:before {
+	content: '[\00a0'
+}
+
+.bracketed:after {
+	content: '\00a0]'
+}
+
 .bracketed:hover, .bracketed:active {
 	color: var(--edit-link-hover-color)
 }
 
-.grow-1 {flex-grow: 1}
-.flex-wrap {flex-wrap: wrap}
-.flex-no-wrap {flex-wrap: nowrap}
-.flex-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: flex}
-
-.small-font {
-	font-size:1.6rem;
+.grow-1 {
+	flex-grow: 1
 }
 
-.justify {text-align:justify}
-.align_center {text-align:center !important}
-.align_left {text-align:left !important}
-.align_right {text-align:right !important}
+.flex-wrap {
+	flex-wrap: wrap
+}
 
-.valign_top {vertical-align:top}
+.flex-no-wrap {
+	flex-wrap: nowrap
+}
 
-.no_border {border:none}
+.flex-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: flex
+}
+
+.small-font {
+	font-size: 1.6rem;
+}
+
+.justify {
+	text-align: justify
+}
+
+.align_center {
+	text-align: center !important
+}
+
+.align_left {
+	text-align: left !important
+}
+
+.align_right {
+	text-align: right !important
+}
+
+.valign_top {
+	vertical-align: top
+}
+
+.no_border {
+	border: none
+}
 
 .media-wrap {
-	text-align:center;
-	margin:0 auto;
+	text-align: center;
+	margin: 0 auto;
+	position: relative;
 }
 
 .danger {
 	background-color: #ff4136;
 	border-color: #924949;
-	color:#fff;
+	color: #fff;
 }
 
 .danger:hover, .danger:active {
 	background-color: #924949;
 	border-color: #ff4136;
-	color:#fff;
+	color: #fff;
 }
 
 .user-btn {
 	border-color: var(--edit-link-color);
 	color: var(--edit-link-color);
 	text-shadow: var(--link-shadow);
-	padding:0 0.5em;
-	padding:0 0.5rem;
+	padding: 0 0.5em;
+	padding: 0 0.5rem;
 }
+
 .user-btn:hover, .user-btn:active {
 	border-color: var(--edit-link-hover-color);
 	background-color: var(--edit-link-hover-color);
@@ -120,6 +174,20 @@ a:hover, a:active {
 	width: 100%;
 }
 
+/* -----------------------------------------------------------------------------
+	Main Nav
+------------------------------------------------------------------------------*/
+#main-nav {
+	font-family: var(--default-font-list);
+	margin: 2em 0 1.6em;
+	margin: 2rem 0 1.6rem;
+	border-bottom: .1rem solid rgba(0, 0, 0, 0.2);
+	font-size: 3.6em;
+	font-size: 3.6rem;
+	font-style: normal;
+	font-weight: 500;
+}
+
 /* -----------------------------------------------------------------------------
 	CSS loading icon
 ------------------------------------------------------------------------------*/
@@ -145,21 +213,21 @@ a:hover, a:active {
 	left: 0%;
 	top: 0%;
 	animation: cssload-rotate-one 1.15s linear infinite;
-	border-bottom: 3px solid rgb(0,0,0);
+	border-bottom: 3px solid rgb(0, 0, 0);
 }
 
 .cssload-inner.cssload-two {
 	right: 0%;
 	top: 0%;
 	animation: cssload-rotate-two 1.15s linear infinite;
-	border-right: 3px solid rgb(0,0,0);
+	border-right: 3px solid rgb(0, 0, 0);
 }
 
 .cssload-inner.cssload-three {
 	right: 0%;
 	bottom: 0%;
 	animation: cssload-rotate-three 1.15s linear infinite;
-	border-top: 3px solid rgb(0,0,0);
+	border-top: 3px solid rgb(0, 0, 0);
 }
 
 @keyframes cssload-rotate-one {
@@ -195,62 +263,69 @@ a:hover, a:active {
 .sorting,
 .sorting_asc,
 .sorting_desc {
-	vertical-align:text-bottom;
+	vertical-align: text-bottom;
 }
+
 .sorting::before {
 	content: " ↕\00a0";
 }
+
 .sorting_asc::before {
 	content: " ↑\00a0";
 }
+
 .sorting_desc::before {
 	content: " ↓\00a0";
 }
 
-.form { width:100%; }
+.form {
+	width: 100%;
+}
 
 .form thead th, .form thead tr {
 	background: inherit;
-	border:0;
+	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;
 }
+
 .invisible tr, .invisible td, .invisible th {
-	border:0;
+	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 {
@@ -258,53 +333,55 @@ a:hover, a:active {
 }
 
 .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;
+.message.error {
+	border: 1px solid #924949;
 	background: #f3e6e6;
 }
 
-	.message.error .icon::after {
-		content: '✘';
-	}
+.message.error .icon::after {
+	content: '✘';
+}
 
-.message.success{
-	border:1px solid #1f8454;
+.message.success {
+	border: 1px solid #1f8454;
 	background: #70dda9;
 }
-	.message.success .icon::after {
-		content: '✔'
-	}
 
-.message.info{
-	border:1px solid #bfbe3a;
+.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, .character, .small_character {
-	position:relative;
-	vertical-align:top;
-	display:inline-block;
-	text-align:center;
-	width:220px;
-	height:311px;
+	position: relative;
+	vertical-align: top;
+	display: inline-block;
+	text-align: center;
+	width: 220px;
+	height: 311px;
 	margin: var(--normal-padding);
+	z-index: 0;
 }
 
 .media > img,
@@ -314,80 +391,111 @@ a:hover, a:active {
 }
 
 .media .edit_buttons > button {
-	margin:0.5em auto;
+	margin: 0.5em auto;
 }
 
-	.name,
-	.media_metadata > div,
-	.medium_metadata > div,
-	.row {
-		text-shadow: var(--shadow);
-		background: var(--title-overlay-fallback);
-		background: var(--title-overlay);
-		color: var(--text-color);
-		padding: var(--normal-padding);
-		text-align:right;
-	}
+.name,
+.media_metadata > div,
+.medium_metadata > div,
+.row {
+	text-shadow: var(--shadow);
+	color: var(--text-color);
+	padding: var(--normal-padding);
+	text-align: right;
+	z-index: 2;
+}
 
-	.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;
-	}
-		.small_character:hover > .name,
-		.character:hover > .name,
-		.media:hover > .name,
-		.media:hover > .media_metadata > div,
-		.media:hover > .medium_metadata > div,
-		.media:hover > .table .row
-		{
-			transition: .25s ease;
-			background:rgba(0,0,0,0.75);
-		}
+.media > .name {
+	position: absolute;
+	top: 0;
+}
 
-		.media:hover > button[hidden],
-		.media:hover > .edit_buttons[hidden]
-		{
-			transition: .25s ease;
-			display:block;
-		}
+.media > .name a {
+	transition: none;
+}
 
-		.small_character > .name a,
-		.small_character > .name a small,
-		.character > .name a,
-		.character > .name a small,
-		.media > .name a,
-		.media > .name a small
-		{
-			background:none;
-			color:#fff;
-			text-shadow: var(--shadow);
-		}
+.media .name a::before {
+	/* background: var(--title-overlay-fallback);
+    background: var(--title-overlay); */
+	content: '';
+	display: block;
+	height: 311px;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 220px;
+	z-index: -1; /* Put the pseudo-element behind its parent */
+}
 
+.media-list .media:hover .name a::before {
+	/* transition: .25s ease; */
+	background: rgba(0, 0, 0, 0.75);
+}
 
+.media > .name span.canonical {
+	font-weight: bold;
+}
+
+.media > .name small {
+	font-weight: normal;
+}
+
+.media:hover .name {
+	background: rgba(0, 0, 0, 0.75);
+}
+
+.media-list .media > .name a:hover,
+.media-list .media > .name a:hover small {
+	color: var(--blue-link);
+}
+
+.media:hover > button[hidden],
+.media:hover > .edit_buttons[hidden] {
+
+	transition: .25s ease;
+	display: block;
+}
+
+.media:hover {
+	transition: .25s ease;
+}
+
+.small_character > .name a,
+.small_character > .name a small,
+.character > .name a,
+.character > .name a small,
+.media > .name a,
+.media > .name a small {
+	background: none;
+	color: #fff;
+	text-shadow: var(--shadow);
+}
 
 /* -----------------------------------------------------------------------------
 	Anime-list-specific styles
 ------------------------------------------------------------------------------*/
 .anime .name, .manga .name {
-	text-align:center;
-	width:100%;
-	padding:0.5em 0.25em;
+	background: var(--title-overlay-fallback);
+	background: var(--title-overlay);
+	text-align: center;
+	width: 100%;
+	padding: 0.5em 0.25em;
 }
 
 .anime .media_type,
@@ -398,116 +506,143 @@ a:hover, a:active {
 .anime .edit,
 .anime .delete {
 	background: none;
-	text-align:center;
+	text-align: center;
 }
 
-
 .anime .table, .manga .table {
-	position:absolute;
-	bottom:0;
-	left:0;
-	width:100%;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
 }
 
 .anime .row, .manga .row {
-	width:100%;
-	background: var(--title-overlay-fallback);
-	background: var(--title-overlay);
+	width: 100%;
 	display: flex;
 	align-content: space-around;
 	justify-content: space-around;
-	text-align:center;
-	padding:0 inherit;
+	text-align: center;
+	padding: 0 inherit;
 }
 
 .anime .row > span, .manga .row > span {
-	text-align:left;
+	text-align: left;
+	z-index: 2;
 }
 
 .anime .row > div, .manga .row > div {
-	font-size:0.8em;
-	display:flex-item;
-	align-self:center;
-	text-align:center;
-	vertical-align:middle;
+	font-size: 0.8em;
+	display: flex-item;
+	align-self: center;
+	text-align: center;
+	vertical-align: middle;
+	z-index: 2;
 }
 
 .anime .media > button.plus_one {
-	position:absolute;
+	border-color: hsla(0, 0%, 100%, .65);
+	position: absolute;
 	top: 138px;
 	top: calc(50% - 21.5px);
 	left: 44px;
 	left: calc(50% - 66.5px);
+	z-index: 50;
+}
+
+.anime .media > button.plus_one:hover {
+	color: hsla(0, 0%, 100%, .65);
+	background: #888;
+}
+
+.anime .media > button.plus_one:active {
+	background: #444;
 }
 
 /* -----------------------------------------------------------------------------
 	Manga-list-specific styles
 ------------------------------------------------------------------------------*/
 .manga .row {
-	padding:1px;
+	padding: 1px;
 }
 
 .manga .media {
-	border:1px solid #ddd;
-	height:310px;
-	margin:0.25em;
+	border: 1px solid #ddd;
+	height: 310px;
+	margin: 0.25em;
 }
 
 .manga .media > .edit_buttons {
-	position:absolute;
+	position: absolute;
 	top: 86px;
-	top: calc(50% - 58.5px);
+	/* top: calc(50% - 58.5px); */
+	top: calc(50% - 22.4px);
 	left: 43.5px;
 	left: calc(50% - 66.5px);
+	z-index: 50;
 }
 
+.manga .media > .edit_buttons button {
+	border-color: hsla(0, 0%, 100%, .65);
+}
+
+.manga .media > .edit_buttons:hover button {
+	color: hsla(0, 0%, 100%, .65);
+	background: #888;
+}
+
+.manga .media > .edit_buttons button:active {
+	background: #444;
+}
 
 /* -----------------------------------------------------------------------------
 	Search page styles
 ------------------------------------------------------------------------------*/
 .media.search > .name {
-	background-color:#555;
-	background-color: rgba(000,000,000,0.35);
+	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 {
 	transition: .25s ease;
-	background:rgba(0,0,0,0.75);
+	background: rgba(0, 0, 0, 0.75);
 }
 
 .big-check:checked + label:after {
 	content: '✓';
 	font-size: 15em;
 	font-size: 15rem;
-	text-align:center;
+	text-align: center;
 	color: greenyellow;
-	position:absolute;
-	top:147px;
-	left:0;
-	height:100%;
-	width:100%;
+	position: absolute;
+	top: 147px;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	z-index: 5;
 }
 
 #series_list article.media {
-	position:relative;
+	position: relative;
 }
+
 #series_list .name, #series_list .name label {
-	position:absolute;
-	display:block;
-	top:0;
-	left:0;
-	height:100%;
-	width:100%;
-	vertical-align:middle;
+	position: absolute;
+	display: block;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	vertical-align: middle;
 	line-height: 1.25em;
 }
+
 #series_list .name small {
 	color: #fff;
 }
@@ -517,16 +652,16 @@ a:hover, a:active {
 -----------------------------------------------------------------------------*/
 .details {
 	margin: 1.5rem auto 0 auto;
-	padding:1rem;
-	font-size:inherit;
+	padding: 1rem;
+	font-size: inherit;
 }
 
 .description {
-	max-width:80rem;
+	max-width: 80rem;
 }
 
 .fixed {
-	max-width:93rem;
+	max-width: 93rem;
 }
 
 .details .cover {
@@ -544,55 +679,63 @@ a:hover, a:active {
 }
 
 .details .media_details {
-	max-width:300px;
+	max-width: 300px;
+}
+
+.details .media_details td {
+	padding: 0 1.5rem;
 }
-	.details .media_details td {
-		padding:0 1.5rem;
-	}
 
 .details p {
-	text-align:justify;
+	text-align: justify;
 }
 
 .details .media_details td:nth-child(odd) {
-	width:1%;
-	white-space:nowrap;
-	text-align:right;
+	width: 1%;
+	white-space: nowrap;
+	text-align: right;
 }
+
 .details .media_details td:nth-child(even) {
-	text-align:left;
+	text-align: left;
 }
 
 .character,
 .small_character {
-	background: rgba(0,0,0,0.5);
+	/* background: rgba(0,0,0,0.5); */
 	width: 225px;
 	height: 350px;
 	vertical-align: middle;
 	white-space: nowrap;
 }
-	.small_character a {
-		display:inline-block;
-		width: 100%;
-		height: 100%;
-	}
 
-	.small_character .name,
-	.character .name {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		z-index: 10;
-	}
+.character:hover .name,
+.small_character:hover .name {
+	background: rgba(0, 0, 0, 0.8);
+}
 
-	.small_character img,
-	.character img {
-		position: relative;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 5;
-		width: 100%;
-	}
+.small_character a {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+}
+
+.small_character .name,
+.character .name {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 10;
+}
+
+.small_character img,
+.character img {
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 5;
+	width: 100%;
+}
 
 .min-table {
 	min-width: 0;
@@ -623,17 +766,17 @@ a:hover, a:active {
 
 @media screen and (max-width: 40em) {
 	nav a {
-		line-height:4em;
-		line-height:4rem;
+		line-height: 4em;
+		line-height: 4rem;
 	}
 
 	.media {
-		margin:2px 0;
+		margin: 2px 0;
 	}
 
 	main {
-		padding:0 0,5em 0.5em;
-		padding:0 0.5rem 0.5rem;
+		padding: 0 0, 5em 0.5em;
+		padding: 0 0.5rem 0.5rem;
 	}
 }
 
@@ -643,12 +786,22 @@ a:hover, a:active {
 .streaming-logo {
 	width: 50px;
 	height: 50px;
-	vertical-align:middle;
+	vertical-align: middle;
+}
+
+.cover_streaming_link {
+	display:none;
+}
+
+.media:hover .cover_streaming_link {
+	display: block;
 }
 
 .cover_streaming_link .streaming-logo {
 	width: 20px;
 	height: 20px;
+	-webkit-filter: drop-shadow(0 -1px 4px #fff);
+	filter: drop-shadow(0 -1px 4px #fff);
 }
 
 /* ----------------------------------------------------------------------------
@@ -660,32 +813,32 @@ a:hover, a:active {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: rgba(0,0,0,0.8);
+	background: rgba(0, 0, 0, 0.8);
 	z-index: 500;
 }
 
-	#loading-shadow .loading-wrapper {
-		position: fixed;
-		z-index: 501;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		display:flex;
-		align-items: center;
-		justify-content: center;
-	}
+#loading-shadow .loading-wrapper {
+	position: fixed;
+	z-index: 501;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
 
-	#loading-shadow .loading-content {
-		position: relative;
-		color: #fff
-	}
+#loading-shadow .loading-content {
+	position: relative;
+	color: #fff
+}
 
-	.loading-content .cssload-inner.cssload-one,
-	.loading-content .cssload-inner.cssload-two,
-	.loading-content .cssload-inner.cssload-three {
-		border-color: #fff
-	}
+.loading-content .cssload-inner.cssload-one,
+.loading-content .cssload-inner.cssload-two,
+.loading-content .cssload-inner.cssload-three {
+	border-color: #fff
+}
 
 /* ----------------------------------------------------------------------------
 CSS Tabs
@@ -694,7 +847,7 @@ CSS Tabs
 	display: flex;
 	flex-wrap: wrap;
 	background: #efefef;
-	box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
+	box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
 	margin-top: 1.5em;
 }
 
@@ -735,7 +888,7 @@ CSS Tabs
 	color: #000;
 }
 
-.tabs [type=radio]:checked + label + .content{
+.tabs [type=radio]:checked + label + .content {
 	border: 1px solid #e5e5e5;
 	border-top: 0;
 	display: block;
diff --git a/public/js/anime_edit.js b/public/js/anime_edit.js
index 98e79c22..623e368e 100644
--- a/public/js/anime_edit.js
+++ b/public/js/anime_edit.js
@@ -49,7 +49,7 @@
 					return;
 				}
 
-				if (data.data.status === 'completed') {
+				if (resData.data.attributes.status === 'completed') {
 					_.hide(parentSel);
 				}
 
diff --git a/public/js/base/sort_tables.js b/public/js/base/sort_tables.js
index 2251d265..84ff8ca6 100644
--- a/public/js/base/sort_tables.js
+++ b/public/js/base/sort_tables.js
@@ -1,16 +1,15 @@
-const LightTableSorter = (function() {
-	let _cellIndex, _onClickEvent, _order, _reset, _sort, _text, _th, _toggle;
-	_th = null;
-	_cellIndex = null;
-	_order = '';
-	_text = function(row) {
-		return row.cells.item(_cellIndex).textContent.toLowerCase();
+'use strict';
+const LightTableSorter = (() => {
+	let th = null;
+	let cellIndex = null;
+	let order = '';
+	const text = (row) => {
+		return row.cells.item(cellIndex).textContent.toLowerCase();
 	};
-	_sort = function(a, b) {
-		let n, textA, textB;
-		textA = _text(a);
-		textB = _text(b);
-		n = parseInt(textA, 10);
+	const sort = (a, b) => {
+		let textA = text(a);
+		let textB = text(b);
+		const n = parseInt(textA, 10);
 		if (n) {
 			textA = n;
 			textB = parseInt(textB, 10);
@@ -23,51 +22,49 @@ const LightTableSorter = (function() {
 		}
 		return 0;
 	};
-	_toggle = function() {
-		let c;
-		c = _order !== 'sorting_asc' ? 'sorting_asc' : 'sorting_desc';
-		_th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
-		return _order = c;
+	const toggle = () => {
+		const c = order !== 'sorting_asc' ? 'sorting_asc' : 'sorting_desc';
+		th.className = (th.className.replace(order, '') + ' ' + c).trim();
+		return order = c;
 	};
-	_reset = function() {
-		_th.className = _th.className.replace('sorting_asc', 'sorting').replace('sorting_desc', 'sorting');
-		return _order = '';
+	const reset = () => {
+		th.classList.remove('sorting_asc', 'sorting_desc');
+		th.classList.add('sorting');
+		return order = '';
 	};
-	_onClickEvent = function(e) {
-		let row, rows, tbody, _i, _len;
-		if (_th && (_cellIndex !== e.target.cellIndex)) {
-			_reset();
+	const onClickEvent = (e) => {
+		if (th && (cellIndex !== e.target.cellIndex)) {
+			reset();
 		}
-		_th = e.target;
-		if (_th.nodeName.toLowerCase() === 'th') {
-			_cellIndex = _th.cellIndex;
-			tbody = _th.offsetParent.getElementsByTagName('tbody')[0];
-			rows = tbody.rows;
+		th = e.target;
+		if (th.nodeName.toLowerCase() === 'th') {
+			cellIndex = th.cellIndex;
+			const tbody = th.offsetParent.getElementsByTagName('tbody')[0];
+			let rows = Array.from(tbody.rows);
 			if (rows) {
-				rows = Array.prototype.slice.call(rows, 0);
-				rows = Array.prototype.sort.call(rows, _sort);
-				if (_order === 'sorting_asc') {
-					Array.prototype.reverse.call(rows);
+				rows.sort(sort);
+				if (order === 'sorting_asc') {
+					rows.reverse();
 				}
-				_toggle();
+				toggle();
 				tbody.innerHtml = '';
-				for (_i = 0, _len = rows.length; _i < _len; _i++) {
-					row = rows[_i];
+
+				rows.forEach(row => {
 					tbody.appendChild(row);
-				}
+				});
 			}
 		}
 	};
 	return {
-		init: function() {
+		init: () => {
 			let ths = document.getElementsByTagName('th');
-			let _results = [];
-			for (let _i = 0, _len = ths.length; _i < _len; _i++) {
-				let th = ths[_i];
-				th.className = 'sorting';
-				_results.push(th.onclick = _onClickEvent);
+			let results = [];
+			for (let i = 0, len = ths.length; i < len; i++) {
+				let th = ths[i];
+				th.classList.add('sorting');
+				results.push(th.onclick = onClickEvent);
 			}
-			return _results;
+			return results;
 		}
 	};
 })();