/* 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%;
	max-width: 65em;
	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: 2em;
	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;
}

/* Inline code and code blocks */
pre, code, pre.code {
	font-family: monospace;
	white-space: pre;
}

/* 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;
}

/*
 FRONT PAGE LINK GALLERIES
*/

div.link-gallery {
	text-align: center;
}

div.link-gallery > div {
	display: inline-block;  
	margin-left: 1em;
	margin-right: 1em;
}

div.link-gallery > div > span {
	display: block;

	font-size: 130%;
	font-variant: small-caps;
}