From 80404cc0987d064b3070ab39dd82b76894f8cdaa Mon Sep 17 00:00:00 2001
From: Paweł Redman <pawel.redman@gmail.com>
Date: Thu, 11 Apr 2019 13:38:07 +0200
Subject: Replace 'optiks' with 'opticks'

---
 header.php         |   2 +-
 images/opticks.jpg | Bin 0 -> 261622 bytes
 images/optiks.jpg  | Bin 261622 -> 0 bytes
 style.ini          |   2 +-
 styles/opticks.css | 533 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 styles/optiks.css  | 533 -----------------------------------------------------
 6 files changed, 535 insertions(+), 535 deletions(-)
 create mode 100644 images/opticks.jpg
 delete mode 100644 images/optiks.jpg
 create mode 100644 styles/opticks.css
 delete mode 100644 styles/optiks.css

diff --git a/header.php b/header.php
index 3b78cb5..7476ca5 100644
--- a/header.php
+++ b/header.php
@@ -13,7 +13,7 @@
 		<div id="page">
 			<div id="header">
 				<div id="header-logo">
-					<?php tpl_link(DOKU_BASE, "<img src=\"/lib/tpl/optiks/images/redman.xyz.png\"></img>", 'title="'.$conf['title'].'"');?>
+					<?php tpl_link(DOKU_BASE, "<img src=\"/lib/tpl/opticks/images/redman.xyz.png\"></img>", 'title="'.$conf['title'].'"');?>
 				</div>
 
 				<div id="header-dropdown">
diff --git a/images/opticks.jpg b/images/opticks.jpg
new file mode 100644
index 0000000..c3557a9
Binary files /dev/null and b/images/opticks.jpg differ
diff --git a/images/optiks.jpg b/images/optiks.jpg
deleted file mode 100644
index c3557a9..0000000
Binary files a/images/optiks.jpg and /dev/null differ
diff --git a/style.ini b/style.ini
index e098002..393f398 100644
--- a/style.ini
+++ b/style.ini
@@ -1,2 +1,2 @@
 [stylesheets]
-styles/optiks.css  = all
\ No newline at end of file
+styles/opticks.css  = all
\ No newline at end of file
diff --git a/styles/opticks.css b/styles/opticks.css
new file mode 100644
index 0000000..a9cee26
--- /dev/null
+++ b/styles/opticks.css
@@ -0,0 +1,533 @@
+/* This file is loaded indirectly[1] by DokuWiki (as specified in styles.ini)
+   and is parsed as LESS. This means it's possible to use LESS directives and
+   that all comments are removed and the file minified.
+
+   NOTE: LESS will fail completely if the syntax isn't right and you'll end up
+         with an unstyled page. Check DokuWiki docs for where to find the
+         errors.
+
+   [1] Automagically included with tpl_metaheaders();
+*/
+
+/* Make sure the page is at least as big as the screen so the background
+   works as expected and doesn't wrap too soon */
+html {
+	height: 100%;
+}
+
+/* The page */
+body {
+	width: 80%;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 2em;
+
+	border: 0.1em solid rgb(50, 50, 50);
+	box-shadow: 0 0 1em black;
+
+	/* This, along with the html block, sets the background of
+	   the entire window, not just the contents. Use #page to style
+	   the contents. */
+	background-color: #272727;
+	background-image: url("/lib/tpl/opticks/images/opticks.jpg");
+	background-size: cover;
+	background-position: center;
+}
+
+/* Compact layout for small screens */
+@media (max-width: 45em) {
+	body {
+		margin: 0;
+		width: 100%;
+		background: none;
+	}
+}
+
+/* Hide the search bar on mobile */
+@media (max-width: 30em) {
+	#header-search {
+		display: none;
+	}
+}
+
+/*
+  GENERAL STYLES
+  paragraphs, lists, tables, etc.
+*/
+
+/* Reset stupid margins and paddings, set the font */
+* {
+	margin: 0;
+	padding: 0;
+	font-family: 'Vollkorn', serif;
+}
+
+/* The area between the header and the footer */
+#content {
+	padding-bottom: 0.6em;
+	overflow: auto;
+	padding: 1em;
+	min-height: 10em;
+
+	background-color: white;
+}
+
+/* Considerably less shit typography in regular text */
+p, ul, ol {
+	-webkit-hyphens: auto;
+	-ms-hyphens: auto;
+	hyphens: auto;
+	text-align: justify;
+	text-justify: auto;
+}
+
+/* Spacing between paragraphs */
+p {
+	margin-bottom: 1em;
+}
+
+/* Headers */
+h1, h2, h3, h4, h5, h6 {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+
+	border-bottom: 0.05em solid rgb(128, 128, 128);
+	font-variant: small-caps;
+}
+
+/* #content already has a large padding */
+h1 {
+	margin-top: 0;
+}
+
+/* Lists */
+ul, ol {
+	margin: 1em;
+	margin-left: 1.5em;
+
+	list-style-position: outside;
+}
+
+/* Links */
+a:link {
+	color: #812222;
+	text-decoration: underline;
+}
+
+a:visited {
+	color: #541414;
+	text-decoration: underline;
+}
+
+a:hover {
+	color: #a83939;
+	text-decoration: underline;
+}
+
+a:active {
+	color: #c64949;
+	text-decoration: underline;
+}
+
+/* Uniform links (reset all the stupid variants to a single color) */
+/* FIXME: don't export this to the final CSS, it's only used in preprocessing */
+.uniform-links(@color) {
+	color: @color;
+	text-decoration: none;
+
+	&:link {
+		color: @color;
+		text-decoration: none;
+	}
+
+	&:visited {
+		color: @color;
+		text-decoration: none;
+	}
+
+	&:hover {
+		color: @color;
+		text-decoration: none;
+	}
+
+	&:active {
+		color: @color;
+		text-decoration: none;
+	}
+}
+
+/* Tables */
+table {
+	border-collapse: collapse;
+}
+
+td, th {
+	padding: 0.2em;
+
+	border: 0.1em solid #b2b2b2;
+}
+
+th {
+	background-color: #f0f0f0;
+	font-weight: bold;
+}
+
+dl {
+	margin: 1em;
+}
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	margin-left: 1em;
+}
+
+/* Text fields */
+input[type="text"], input[type="password"], input[type="email"] {
+	padding: 0.15em;
+	padding-left: 0.25em;
+	padding-right: 0.25em;
+	width: 12em; /* default width */
+
+	border: 0.1em solid rgb(220, 220, 220);
+	border-radius: 0.15em;
+	background: rgb(237,237,237); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+	box-shadow: 0 0 0.2em black;
+}
+
+input::placeholder {
+	font-variant: small-caps;
+	color: rgb(128, 128, 128);
+}
+
+input[type="text"]:hover, input[type="text"]:active,
+input[type="password"]:hover, input[type="password"]:active {
+	background: white;
+}
+
+/* Buttons */
+.opticks-button {
+	padding: 0.1em;
+	padding-left: 0.7em;
+	padding-right: 0.7em;
+	color: white;
+	font-variant: small-caps;
+	text-align: center;
+	text-shadow: 0 0 0.1em black;
+	border: 0.1em solid rgb(95, 95, 95);
+	border-radius: 0.15em;
+	background: rgb(71,71,71); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(71,71,71,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
+	box-shadow: 0 0 0.2em black;
+
+	&:hover {
+		background: rgb(114,114,114); /* Old browsers */
+		background: -moz-linear-gradient(top, rgba(114,114,114,1) 1%, rgba(79,79,79,1) 100%); /* FF3.6-15 */
+		background: -webkit-linear-gradient(top, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* Chrome10-25,Safari5.1-6 */
+		background: linear-gradient(to bottom, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#4f4f4f',GradientType=0 ); /* IE6-9 */
+	}
+
+	&:active {
+		background: rgb(79,79,79); /* Old browsers */
+		background: -moz-linear-gradient(top, rgba(79,79,79,1) 0%, rgba(114,114,114,1) 100%); /* FF3.6-15 */
+		background: -webkit-linear-gradient(top, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* Chrome10-25,Safari5.1-6 */
+		background: linear-gradient(to bottom, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#727272',GradientType=0 ); /* IE6-9 */
+	}
+}
+
+button {
+	.opticks-button();
+}
+
+/* Used for metadata in image details and some other shit */
+fieldset {
+	padding: 1em;
+}
+
+/*
+  THE HEADER
+*/
+
+/* The header box */
+#header {
+	background-image: url('/lib/tpl/opticks/images/header.jpg');
+	background-size: 100% auto;
+	background-repeat: repeat-y;
+	background-position: left;
+	background-color: #1b1b1a;
+}
+
+/* The box containing the logo image */
+#header-logo {
+	float: left;
+	display: inline-block;
+
+	height: 2em;
+}
+
+/* Fix the image's height to the box's */
+#header-logo > a > img {
+	height: 2em;
+}
+
+/* Search box */
+#dw__search {
+	float: right;
+}
+
+/* Search text field */
+#dw__search > div > input {
+	margin-top: 0.25em;
+	font-size: initial;
+	width: 9em;
+	height: 1.5em;
+
+	color: initial; /* Reset the dark font. */
+}
+
+/* Search button */
+#dw__search > div > button {
+	font-size: initial;
+	height: 1.5em;
+	padding-top: 0;
+	padding-bottom: 0;
+	margin-left: 0.2em;
+}
+
+/* Dropdown menu */
+#header-dropdown {
+	float: right;
+	position: relative;
+	width: 2em;
+	height: 2em;
+	margin-left: 1em;
+
+	/* The icon goes here so it can be changed with CSS for :hover */
+	background-image: url("/lib/tpl/opticks/images/menu.png");
+	background-size: cover;
+
+	&:hover {
+		background-image: url("/lib/tpl/opticks/images/menu-hover.png");
+
+		& > #header-dropdown-content {
+			display: block;
+		}
+	}
+}
+
+/* Dropdown menu's contents, with a dark theme */
+#header-dropdown-content {
+	display: none;
+	position: absolute;
+	top: 1em;
+	right: 0;
+	padding: 0.3em;
+
+	color: white;
+	font-variant: small-caps;
+	border: 0.1em solid #b2b2b2;
+	box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+	background: rgb(0,0,0); /* Old browsers */
+	background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(84,84,84,1) 57%, rgba(0,0,0,1) 58%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(135deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}
+
+/* Show the contents when the button is hovered. */
+#header-dropdown:hover > #header-dropdown-content {
+	display: block;
+}
+
+/* The name and username in "Logged in as..." */
+#header-dropdown-content > bdi {
+	font-weight: bold;
+}
+
+/* Links in the dropdown menu */
+li.action {
+	margin: 0.5em;
+	list-style: none; /* Fuck the bullet point */
+
+	/* The actual link */
+	& > a {
+		display: block;
+		.opticks-button();
+		.uniform-links(#ffffff);
+	}
+}
+
+/* Hide the stupid icons (FIXME: don't put them there in the first place) */
+.action > a > svg {
+	display: none;
+}
+
+/* Force the dropdown to be big enough to fit the search button to the right
+   (rather than below) the text field */
+#header-dropdown-search {
+	white-space: nowrap;
+}
+
+/*
+  THE FOOTER
+*/
+#footer {
+	padding-top: 0.4em;
+	padding-bottom: 0.6em;
+	text-align: center;
+
+	background-color: white;
+	border-top: 0.1em solid rgb(128, 128, 128);
+}
+
+/* Links in the footer (back to top, recent changes, etc.) */
+#footer-buttons > span {
+	padding: 0.2em;
+
+	font-variant: small-caps;
+	font-size: 80%;
+}
+
+/* Text below the links */
+#footer-text {
+	margin-top: 0.5em;
+
+	color: rgb(60, 60, 60);
+	font-size: 70%;
+}
+
+/* Wrap the license in a div and make it smaller so it looks better*/
+#footer-text > div {
+	margin: auto;
+	width: 66%;
+}
+
+/* The license's name */
+.license > bdi {
+	font-weight: bold;
+}
+
+/*
+  DOKUWIKI ELEMENTS in pages
+*/
+
+/* Some list items are wrapped in this shit */
+div.li {
+	display: inline-block;
+}
+
+/* Icons in lists, make sure they're actually fucking aligned with the text */
+.icon {
+	vertical-align: middle;
+}
+
+/* Table of contents */
+#dw__toc {
+	display: inline-block; /* Fit the width to contents */
+	margin: 0.5em;
+	padding: 0.5em;
+
+	border: 0.1em solid rgb(150, 150, 150);
+	border-radius: 0.3em;
+	background: rgb(255,255,255); /* Old browsers */
+	background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+	box-shadow: 0 0 0.2em rgb(0, 0, 0, 0.2);
+
+	& > h3 {
+		margin: 0;
+		margin-bottom: 0.5em;
+		text-align: center;
+
+		/* The stupid dash before "Table of contents" */
+		& > strong {
+			display: none;
+		}
+	}
+}
+
+/* Lists inside tables of contents */
+ul.toc {
+	margin-top: 0;
+	margin-bottom: 0;
+
+	font-variant: small-caps;
+}
+
+/* The box around "Create this page," "edit this page," or "show page," defined
+   in this template */
+#content-edit {
+	float: right;
+	margin: 0.5em;
+	margin-right: 0;
+	padding: 0.2em;
+
+	/* Make the link inside look like a button */
+	& > .action {
+		.opticks-button();
+		.uniform-links(#ffffff);
+	}
+}
+
+/* Section edit buttons (or rather their containers) */
+div.secedit {
+	display: inline-block;
+	float: right;
+}
+
+/* Containers for floating images in articles */
+.thumb2 {
+	margin: 1em;
+}
+
+/* Alerts */
+.alert {
+	display: block;
+	clear: both;
+	margin: 0.5em;
+	padding: 0.5em;
+
+	border: 0.1em solid rgb(200, 200, 200);
+	border-radius: 0.2em;
+}
+
+.alert-warning {
+	background-color: rgb(255, 240, 210);
+}
+
+/*
+  THE IMAGE DETAILS PAGE
+*/
+
+/* The image itself */
+.img_detail {
+	width: 100%;
+	height: auto;
+}
+
+/*
+  MISC. DOKUWIKI ELEMENTS
+*/
+
+/* Override Doku's ugly ass random backgrounds in the admin panel */
+fieldset, div.input, div.selection, div.other {
+	background: white !important;
+}
+
+/* Quick fix for unreadable buttons in the page editor */
+.toolbutton {
+	background: white;
+}
diff --git a/styles/optiks.css b/styles/optiks.css
deleted file mode 100644
index 10365e5..0000000
--- a/styles/optiks.css
+++ /dev/null
@@ -1,533 +0,0 @@
-/* This file is loaded indirectly[1] by DokuWiki (as specified in styles.ini)
-   and is parsed as LESS. This means it's possible to use LESS directives and
-   that all comments are removed and the file minified.
-
-   NOTE: LESS will fail completely if the syntax isn't right and you'll end up
-         with an unstyled page. Check DokuWiki docs for where to find the
-         errors.
-
-   [1] Automagically included with tpl_metaheaders();
-*/
-
-/* Make sure the page is at least as big as the screen so the background
-   works as expected and doesn't wrap too soon */
-html {
-	height: 100%;
-}
-
-/* The page */
-body {
-	width: 80%;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 2em;
-
-	border: 0.1em solid rgb(50, 50, 50);
-	box-shadow: 0 0 1em black;
-
-	/* This, along with the html block, sets the background of
-	   the entire window, not just the contents. Use #page to style
-	   the contents. */
-	background-color: #272727;
-	background-image: url("/lib/tpl/optiks/images/optiks.jpg");
-	background-size: cover;
-	background-position: center;
-}
-
-/* Compact layout for small screens */
-@media (max-width: 45em) {
-	body {
-		margin: 0;
-		width: 100%;
-		background: none;
-	}
-}
-
-/* Hide the search bar on mobile */
-@media (max-width: 30em) {
-	#header-search {
-		display: none;
-	}
-}
-
-/*
-  GENERAL STYLES
-  paragraphs, lists, tables, etc.
-*/
-
-/* Reset stupid margins and paddings, set the font */
-* {
-	margin: 0;
-	padding: 0;
-	font-family: 'Vollkorn', serif;
-}
-
-/* The area between the header and the footer */
-#content {
-	padding-bottom: 0.6em;
-	overflow: auto;
-	padding: 1em;
-	min-height: 10em;
-
-	background-color: white;
-}
-
-/* Considerably less shit typography in regular text */
-p, ul, ol {
-	-webkit-hyphens: auto;
-	-ms-hyphens: auto;
-	hyphens: auto;
-	text-align: justify;
-	text-justify: auto;
-}
-
-/* Spacing between paragraphs */
-p {
-	margin-bottom: 1em;
-}
-
-/* Headers */
-h1, h2, h3, h4, h5, h6 {
-	margin-top: 0.5em;
-	margin-bottom: 0.5em;
-
-	border-bottom: 0.05em solid rgb(128, 128, 128);
-	font-variant: small-caps;
-}
-
-/* #content already has a large padding */
-h1 {
-	margin-top: 0;
-}
-
-/* Lists */
-ul, ol {
-	margin: 1em;
-	margin-left: 1.5em;
-
-	list-style-position: outside;
-}
-
-/* Links */
-a:link {
-	color: #812222;
-	text-decoration: underline;
-}
-
-a:visited {
-	color: #541414;
-	text-decoration: underline;
-}
-
-a:hover {
-	color: #a83939;
-	text-decoration: underline;
-}
-
-a:active {
-	color: #c64949;
-	text-decoration: underline;
-}
-
-/* Uniform links (reset all the stupid variants to a single color) */
-/* FIXME: don't export this to the final CSS, it's only used in preprocessing */
-.uniform-links(@color) {
-	color: @color;
-	text-decoration: none;
-
-	&:link {
-		color: @color;
-		text-decoration: none;
-	}
-
-	&:visited {
-		color: @color;
-		text-decoration: none;
-	}
-
-	&:hover {
-		color: @color;
-		text-decoration: none;
-	}
-
-	&:active {
-		color: @color;
-		text-decoration: none;
-	}
-}
-
-/* Tables */
-table {
-	border-collapse: collapse;
-}
-
-td, th {
-	padding: 0.2em;
-
-	border: 0.1em solid #b2b2b2;
-}
-
-th {
-	background-color: #f0f0f0;
-	font-weight: bold;
-}
-
-dl {
-	margin: 1em;
-}
-
-dt {
-	font-weight: bold;
-}
-
-dd {
-	margin-left: 1em;
-}
-
-/* Text fields */
-input[type="text"], input[type="password"], input[type="email"] {
-	padding: 0.15em;
-	padding-left: 0.25em;
-	padding-right: 0.25em;
-	width: 12em; /* default width */
-
-	border: 0.1em solid rgb(220, 220, 220);
-	border-radius: 0.15em;
-	background: rgb(237,237,237); /* Old browsers */
-	background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
-	box-shadow: 0 0 0.2em black;
-}
-
-input::placeholder {
-	font-variant: small-caps;
-	color: rgb(128, 128, 128);
-}
-
-input[type="text"]:hover, input[type="text"]:active,
-input[type="password"]:hover, input[type="password"]:active {
-	background: white;
-}
-
-/* Buttons */
-.optiks-button {
-	padding: 0.1em;
-	padding-left: 0.7em;
-	padding-right: 0.7em;
-	color: white;
-	font-variant: small-caps;
-	text-align: center;
-	text-shadow: 0 0 0.1em black;
-	border: 0.1em solid rgb(95, 95, 95);
-	border-radius: 0.15em;
-	background: rgb(71,71,71); /* Old browsers */
-	background: -moz-linear-gradient(top, rgba(71,71,71,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
-	box-shadow: 0 0 0.2em black;
-
-	&:hover {
-		background: rgb(114,114,114); /* Old browsers */
-		background: -moz-linear-gradient(top, rgba(114,114,114,1) 1%, rgba(79,79,79,1) 100%); /* FF3.6-15 */
-		background: -webkit-linear-gradient(top, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* Chrome10-25,Safari5.1-6 */
-		background: linear-gradient(to bottom, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#4f4f4f',GradientType=0 ); /* IE6-9 */
-	}
-
-	&:active {
-		background: rgb(79,79,79); /* Old browsers */
-		background: -moz-linear-gradient(top, rgba(79,79,79,1) 0%, rgba(114,114,114,1) 100%); /* FF3.6-15 */
-		background: -webkit-linear-gradient(top, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* Chrome10-25,Safari5.1-6 */
-		background: linear-gradient(to bottom, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#727272',GradientType=0 ); /* IE6-9 */
-	}
-}
-
-button {
-	.optiks-button();
-}
-
-/* Used for metadata in image details and some other shit */
-fieldset {
-	padding: 1em;
-}
-
-/*
-  THE HEADER
-*/
-
-/* The header box */
-#header {
-	background-image: url('/lib/tpl/optiks/images/header.jpg');
-	background-size: 100% auto;
-	background-repeat: repeat-y;
-	background-position: left;
-	background-color: #1b1b1a;
-}
-
-/* The box containing the logo image */
-#header-logo {
-	float: left;
-	display: inline-block;
-
-	height: 2em;
-}
-
-/* Fix the image's height to the box's */
-#header-logo > a > img {
-	height: 2em;
-}
-
-/* Search box */
-#dw__search {
-	float: right;
-}
-
-/* Search text field */
-#dw__search > div > input {
-	margin-top: 0.25em;
-	font-size: initial;
-	width: 9em;
-	height: 1.5em;
-
-	color: initial; /* Reset the dark font. */
-}
-
-/* Search button */
-#dw__search > div > button {
-	font-size: initial;
-	height: 1.5em;
-	padding-top: 0;
-	padding-bottom: 0;
-	margin-left: 0.2em;
-}
-
-/* Dropdown menu */
-#header-dropdown {
-	float: right;
-	position: relative;
-	width: 2em;
-	height: 2em;
-	margin-left: 1em;
-
-	/* The icon goes here so it can be changed with CSS for :hover */
-	background-image: url("/lib/tpl/optiks/images/menu.png");
-	background-size: cover;
-
-	&:hover {
-		background-image: url("/lib/tpl/optiks/images/menu-hover.png");
-
-		& > #header-dropdown-content {
-			display: block;
-		}
-	}
-}
-
-/* Dropdown menu's contents, with a dark theme */
-#header-dropdown-content {
-	display: none;
-	position: absolute;
-	top: 1em;
-	right: 0;
-	padding: 0.3em;
-
-	color: white;
-	font-variant: small-caps;
-	border: 0.1em solid #b2b2b2;
-	box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
-	background: rgb(0,0,0); /* Old browsers */
-	background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(84,84,84,1) 57%, rgba(0,0,0,1) 58%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(135deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-}
-
-/* Show the contents when the button is hovered. */
-#header-dropdown:hover > #header-dropdown-content {
-	display: block;
-}
-
-/* The name and username in "Logged in as..." */
-#header-dropdown-content > bdi {
-	font-weight: bold;
-}
-
-/* Links in the dropdown menu */
-li.action {
-	margin: 0.5em;
-	list-style: none; /* Fuck the bullet point */
-
-	/* The actual link */
-	& > a {
-		display: block;
-		.optiks-button();
-		.uniform-links(#ffffff);
-	}
-}
-
-/* Hide the stupid icons (FIXME: don't put them there in the first place) */
-.action > a > svg {
-	display: none;
-}
-
-/* Force the dropdown to be big enough to fit the search button to the right
-   (rather than below) the text field */
-#header-dropdown-search {
-	white-space: nowrap;
-}
-
-/*
-  THE FOOTER
-*/
-#footer {
-	padding-top: 0.4em;
-	padding-bottom: 0.6em;
-	text-align: center;
-
-	background-color: white;
-	border-top: 0.1em solid rgb(128, 128, 128);
-}
-
-/* Links in the footer (back to top, recent changes, etc.) */
-#footer-buttons > span {
-	padding: 0.2em;
-
-	font-variant: small-caps;
-	font-size: 80%;
-}
-
-/* Text below the links */
-#footer-text {
-	margin-top: 0.5em;
-
-	color: rgb(60, 60, 60);
-	font-size: 70%;
-}
-
-/* Wrap the license in a div and make it smaller so it looks better*/
-#footer-text > div {
-	margin: auto;
-	width: 66%;
-}
-
-/* The license's name */
-.license > bdi {
-	font-weight: bold;
-}
-
-/*
-  DOKUWIKI ELEMENTS in pages
-*/
-
-/* Some list items are wrapped in this shit */
-div.li {
-	display: inline-block;
-}
-
-/* Icons in lists, make sure they're actually fucking aligned with the text */
-.icon {
-	vertical-align: middle;
-}
-
-/* Table of contents */
-#dw__toc {
-	display: inline-block; /* Fit the width to contents */
-	margin: 0.5em;
-	padding: 0.5em;
-
-	border: 0.1em solid rgb(150, 150, 150);
-	border-radius: 0.3em;
-	background: rgb(255,255,255); /* Old browsers */
-	background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-	box-shadow: 0 0 0.2em rgb(0, 0, 0, 0.2);
-
-	& > h3 {
-		margin: 0;
-		margin-bottom: 0.5em;
-		text-align: center;
-
-		/* The stupid dash before "Table of contents" */
-		& > strong {
-			display: none;
-		}
-	}
-}
-
-/* Lists inside tables of contents */
-ul.toc {
-	margin-top: 0;
-	margin-bottom: 0;
-
-	font-variant: small-caps;
-}
-
-/* The box around "Create this page," "edit this page," or "show page," defined
-   in this template */
-#content-edit {
-	float: right;
-	margin: 0.5em;
-	margin-right: 0;
-	padding: 0.2em;
-
-	/* Make the link inside look like a button */
-	& > .action {
-		.optiks-button();
-		.uniform-links(#ffffff);
-	}
-}
-
-/* Section edit buttons (or rather their containers) */
-div.secedit {
-	display: inline-block;
-	float: right;
-}
-
-/* Containers for floating images in articles */
-.thumb2 {
-	margin: 1em;
-}
-
-/* Alerts */
-.alert {
-	display: block;
-	clear: both;
-	margin: 0.5em;
-	padding: 0.5em;
-
-	border: 0.1em solid rgb(200, 200, 200);
-	border-radius: 0.2em;
-}
-
-.alert-warning {
-	background-color: rgb(255, 240, 210);
-}
-
-/*
-  THE IMAGE DETAILS PAGE
-*/
-
-/* The image itself */
-.img_detail {
-	width: 100%;
-	height: auto;
-}
-
-/*
-  MISC. DOKUWIKI ELEMENTS
-*/
-
-/* Override Doku's ugly ass random backgrounds in the admin panel */
-fieldset, div.input, div.selection, div.other {
-	background: white !important;
-}
-
-/* Quick fix for unreadable buttons in the page editor */
-.toolbutton {
-	background: white;
-}
-- 
cgit