/*****************************************************************************/
/* Global variables */

/* Color palette */
:root {
    /* Background, dark background, text */
    --bgcol: #3b5f7b;
    --textcol: #cedbdf;
    --headingcol: #cedbf2;

    --h12border: white;
    --h34border: gray;
    
    /* Links */
    --linkcol: #9ff;
    --linkhover: white;

    /* Menu bars */
    --menubg: #2b4f6b;
    --menucol: white;
    --menuhover: gray;
    --menuhoverbg: #1b3f3b;
    --submenuopened: #4b6f8b;

    /* Branding */
    --brandcol: white;

    /* Tables */
    --thcol: #1b3f8b;
    --tborder: #eee;
    --tbordermd: #aaa;
    --trhover: #2f536f;

    /* Admin extra info */
    --admintext: #ddd;
    --adminbg: #555;

    /* Login link */
    --logintext: #4b6f8b;

    /* Modal dialogs */
    --modalbg: #4b6f8b;
    --modalcol: #e5ebed;
    
    /* TODO: border colors all use --border? */
}

/*****************************************************************************/
/* Fonts */

/*
 * Sources:
 *	https://fonts.google.com/specimen/Kanit
 *
 * Must match do_header(), since that's what imports them.
 */
/* Note that Roboto Condensed also exists */

* {
    font-family: "Roboto", Arial, Helvitica, sans-serif;
}

h1, h2, h3, h4, h5, h6, .title, .modal-title {
    font-family: "Roboto Slab", "Times New Roman", Times, serif;
}

.logo, .slogan {
    font-family: "Kanit", Arial, Helvitica, sans-serif;
}

textarea, pre {
    font-family: "Courier New", Courier, monospace;
}

/*****************************************************************************/
/* General */

* {
    box-sizing: border-box;    
}

/* Body */
body {
    background-color: var(--bgcol);
    color: var(--textcol);
    margin: 0px;
}

h1, h2, h3, h4, h5, h6, .title, .modal-title {
    color: var(--headingcol);
}

/* Links */
a {
    color: var(--linkcol);
}

a:focus {
    outline: thin dotted;
}

a:hover, a.active {
    color: var(--linkhover);
    outline: 0;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid white;
}

thead {
    background-color: var(--thcol);
}

td {
    border: 1px solid var(--tborder);
}

/* Headers */
h1, h2 {
    border-top: 1px solid var(--h12border);
    /* Don't scroll beind the sticky nav menu */
    scroll-margin-top: 1.1em;
}

h3, h4 {
    border-top: 1px solid var(--h34border);
    scroll-margin-top: 1.5em;
}

/* Address is nominally italic, but no thanks */
address {
    font-style: normal;
}

/* Figure normally has a huge margin */
figure {
    margin: 0;
    text-align: center;
}

/*****************************************************************************/
/* Debug */

/* Debug output */
.debug {
    border: 1px dotted red;
}

/* Preformatted output, usually for debugging/editing */
pre {
    font-size: 0.9em;
    white-space: pre-wrap;
}

h1.all-markdown {
    background-color: #666;
    color: white;
    clear: both;
    border-top: 2px solid white;
    border-bottom: 1px solid white;
    font-size: 1.5em;
}

/*****************************************************************************/
/* Hidden elements if not showing chrome (e.g. full-screen image) */

body.nochrome {
    background-color: black;
}

.nochrome header, .nochrome nav, .nochrome footer {
    display: none !important;
}

.nochrome article {
    margin: 0 !important;
}

/*****************************************************************************/
/*
 * RWD breakpoints
 *
 * The admin bar color and text indicates what breakpoint we're
 * using.  Every RWD section below should use one of these breakpoints.
 *
 */

/* 400-512 pixels */
nav.admin-menu { background-color: black !important; }
.admin-menu ul::after { content: " - XXS"; }

/* Really tiny devices; this is the only category which uses min-width */
@media only screen and (max-width: 400px) {
    nav.admin-menu { background-color: gray !important; }
    .admin-menu ul::after { content: " - XXXS"; }
}
    
/* Even smaller devices */
@media only screen and (min-width: 512px) {
    nav.admin-menu { background-color: purple !important; }
    .admin-menu ul::after { content: " - XS"; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    nav.admin-menu { background-color: blue !important; }
    .admin-menu ul::after { content: " - SM"; }
}

/* Note that some split points occur at 620px - 640px */

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    nav.admin-menu { background-color: green !important; }
    .admin-menu ul::after { content: " - MD"; }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    nav.admin-menu { background-color: #880 !important; }
    .admin-menu ul::after { content: " - LG"; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* This is the size of my typical screen */
    nav.admin-menu { background-color: var(--menubg) !important; }
    .admin-menu ul::after { content: " - XL"; }
}

/* Ultra-wide devices */
@media only screen and (min-width: 1400px) {
    nav.admin-menu { background-color: #800 !important; }
    .admin-menu ul::after { content: " - XXL"; }
}

/*****************************************************************************/
/* Top logo */

div.branding-outer {
    background-image: url("/assets/water-surface.jpg");
    background-size: cover;
    min-height: 72px;
    padding: 8px;
    width: 100%;
    color: var(--brandcol);
}

div.branding {
    display: flex;
    justify-content: space-between;
    flex-flow: row;
}

div.icon {
    height: 4em;
    margin: 3px 20px 3px 5px;
    flex-grow: 0;
}

div.logo-and-slogan {
    flex-grow: 1;
}

div.logo {
    font-size: 2em;
    font-weight: 700;
    line-height: 100%;
}

div.slogan {
    font-size: 0.8em;
}

a.logo {
    color: var(--brandcol);
    text-decoration: none;
}

/* Slogan immediately below Spanglers' Scuba defaults to hidden */
#slogan1 {
    display: none;
}

/* Second slogan outside of flexbox for small screens */
#slogan2 {
    display: block;
    text-align: center;
}

div.top-contact {
    font-size: 0.8em;
    text-align: right;
    flex-grow: 0;
}

.top-contact a {
    color: white;
    text-decoration: none;
}

/*** RWD ***/

@media only screen and (max-width: 400px) {
    /* No icon */
    div.icon { display: none; }
}
    
@media only screen and (min-width: 512px) {
    /* Move slogan immediately below Spanglers' Scuba */
    #slogan1 { display: block; }
    #slogan2 { display: none; }
}

@media only screen and (min-width: 600px) {
    div.logo { font-size: 2.5em; }
}

@media only screen and (min-width: 768px) {
    div.logo { font-size: 3em; }
    div.slogan { font-size: 1.0em; }
    div.top-contact { font-size: 1.0em; }
}

/*****************************************************************************/
/* Footer */

footer {
    border-top: 1px solid white;
    padding: 2px 8px;

    /* Don't float things into footer */
    clear: both;
}

.footer-chunks h3 {
    border: none;
}

div.footer-chunks {
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media only screen and (min-width: 400px) {
    /* Footer chunks displayed sequentially */
    div.footer-chunks { flex-direction: row; }
}

div.contact {
    /* Keep contact info from ramming into copyright on narrow screens */
    margin-right: 8px;
}

/* Contact info table */
.contact table,.contact th,.contact td {
    width: auto;
    border: none;
}

div.admin-footer {
    font-size: 0.8em;
    width: 100%;
    color: var(--admintext);
    background-color: var(--adminbg);
}

/* Login link - useless for most folks so low-contrast */
a.login {
    display: inline-block;
    float: right;
    margin: 8px 20px;
    color: var(--logintext);
}

/*****************************************************************************/
/* Main article */

article {
    margin: 8px;
}

section {
    /* Don't float things across sections */
    clear: both;
}

/* Info and thumbnails */
section.info-thumbs {
    display: flex;
    flex-direction: column;
    justify-content: flex-first;
}

/* Thumbnail before images */
div.thumbs {
    display: flex;
    justify-content: center;
    width: 100%;
    order: 1;
    flex-shrink: 0;
}
div.info {
    /* Make the info wrap before smooshing the thumbs */
    flex-shrink: 1;
    order: 2;
}

@media only screen and (min-width: 768px) {
    /* Info and thumbnails sit size by side */
    section.info-thumbs {
	flex-direction: row;
	justify-content: space-between;
	
	/* Don't spread too far apart on really wide screens */
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
    }

    /* Thumbnail / cover images float to right of info */
    div.thumbs {
	width: auto;
	order: 2;
	margin-left: 8px;
    }
    div.info { order: 1; }
}

/*****************************************************************************/
/* Images */
/*
 * Note that any changes here need to match up with rec_image()'s sizes=
 * estimate given to the browser.
 */

img {
    /* Fit to container by default */
    max-height: 100%;
    max-width: 100%;

    /* Scale down if it doesn't fit */
    object-fit: scale-down;
}

/* Icon (from assets) */
img.icon {
    width: 64px;
    height: 64px;
}

img.icon-s {
    width: 32px;
    height: 32px;
}

img.icon-padi {
    width: 200px;
    height: 67px;
}

img.icon-dan {
    width: 195px;
    height: 60px;
}

@media only screen and (min-width: 768px) {
    img.icon-padi {
	width: 300px;
	height: 101px;
    }
}

@media only screen and (min-width: 992px) {
    img.icon-padi {
	width: 320px;
	height: 108px;
    }
}

/*
 * Use max-height= for height-limited things.  That way, they shrink vertically
 * for narrow viewports.  If I use height=, they shrink to the center of a tall
 * narrow empty space of that height.
 */

/* Image in an album */
img.album-image {
    max-height: 250px;
    cursor: zoom-in;
}

/* Cover image in list of albums */
img.album-cover { max-height: 250px; }

/* Example image for a marine life subgroup */
img.ml-subgroup { max-height: 100px; }

/* Main image for edit album/species/image */
img.edit-main { max-height: 300px; }

/* Full image for slideshow */
img.image-full {
    /* Fit into viewport height */
    max-height: 100vh;
    cursor: zoom-in;
}

/* Small images for list/edit page lists */
img.edit-rel { height: 60px; }
img.list-thumb { height: 60px; }

/* Images in markdown */
img.md-xs { width: 150px; }
img.md-s  { width: 200px; }
img.md-sm { width: 300px; }
img.md-m  { width: 400px; }
img.md-ml { width: 500px; }
img.md-l  { width: 600px; }
img.md-ow { width: 100%; height: auto; }

/* Images which can change on bigger screens */
img.md-sm-s { width: 200px; }
img.md-m-s { width: 200px; }
@media only screen and (min-width: 768px) {
    img.md-sm-s { width: 300px; }
    img.md-m-s { width: 300px; }
}
@media only screen and (min-width: 992px) {
    img.md-m-s { width: 400px; }
}

/* Species thumbnail in marine life */
/*
 * TODO: Specifying both height and width makes the image take up a square of
 * space, which isn't quite what I want.
 *
 * img.ml-species { width: 200px; height: 200px; }
 *
 * If I keep track of wide vs. tall, then I don't waste space:
 */
img.ml-species.wide { width: 200px; }
img.ml-species.tall { height: 200px; }

/* Image thumbnail in species */
img.species-image.wide { width: 200px; }
img.species-image.tall { height: 200px; }

/* Main image for a species */
img.species-main {
    /* Leave some room for info */
    max-height: 70vh;
}
img.species-main.wide { width: 400px; }
img.species-main.tall { height: 400px; }

@media only screen and (min-width: 992px) {
    img.species-main.wide { width: 500px; }
    img.species-main.tall { height: 500px; }
}
@media only screen and (min-width: 1200px) {
    img.species-main.wide { width: 600px; }
    img.species-main.tall { height: 600px; }
}

/* Image displayed with info */
img.image-main {
    /* Leave some room for info */
    max-height: 70vh;
}
img.image-main.wide { width: 1000px; }
img.image-main.tall { height: 800px; }

/* Use zoom-in for images which go to full screen. */
img.to-full { cursor: zoom-in; }

/*****************************************************************************/
/* Markdown */

/* Markdown block */
div.md {
    max-width: 1400px;
}

@media only screen and (min-width: 1200px) {
    /* Center when things get wide */
    div.md {
	margin-left: auto;
	margin-right: auto;
    }
}

/* Tables inside markdown */
.md table {
    width: auto;
    border: var(--tbordermd);
}
.md th, .md td {
    border: 1px solid var(--tbordermd);
    padding: 3px
}

/* Paragraph inside markdown */
.md p {
}

/* Bad markdown */
span.bad-md {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: red;
}

/* To-do item on a page, admin */
span.md-todo {
    font-weight: bold;
    color: red;
}

/* To-do hidden item on a page, admin */
span.md-todo-hide {
    font-weight: bold;
    color: red;
    border: 1px dotted red;
}

/* Clear float */
div.md-clear {
    clear: both;
}

/* Table of contents */
div.md-toc {
    float: right;
    margin: 8px;
    padding: 3px;
    background: var(--menubg);
    border: 1px solid white;
    font-size: 0.8em;
    line-height: 1.25em;
}

div.md-toc-start {
    text-align: center;
    font-weight: bold;
}

.md-toc a {
    text-decoration: none;
}

.md-toc ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Figure inside markdown */
/* TODO: can't use figure.md-img, or it'd be more specific than the float/align
 * classes below. */
.md-img {
    display: inline-block;
}

/* Float/align classes for images inside markdown */
/* TODO: do we use these for other things? */
.fl {
    float: left;
    margin: 8px;
}

.fc {
    float: center;
    margin: 8px;
}

.fr {
    float: right;
    margin: 8px;
}

.al {
    display: block;
    text-align: left;
}

.ac {
    display: block;
    text-align: center;
}

.ar {
    display: block;
    text-align: right;
}

/* Class which clears float for small screens only; used by /lessons */
div.clear-sm { clear: both; }
@media only screen and (min-width: 640px) {
    div.clear-sm { clear: none; }
}

/*****************************************************************************/
/* Marine life */

/* Subgroups */
section.ml-subgroups {
}

div.subgroup-image {
    display: inline-block;
    /* TODO: why does the <a> for the image hang down? */
    margin: 3px 3px 0px 3px;
}

/* Narrow screens only show 2 subgroup images by default */
div.subgroup-image:nth-child(3) { display: none; }
div.subgroup-image:nth-child(4) { display: none; }

table.marine-life {
    border: none;
    /* Center on wide displays */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.marine-life td {
    border: none;
    text-align: center;
}

.marine-life tr {
    border-bottom: 1px solid white;
    display: flex;
    flex-direction: column;
}

.marine-life tr:last-child {
    border-bottom: none;
}

@media only screen and (min-width: 512px) {
    div.subgroup-image:nth-child(3) { display: inline-block; }
}

/* Split point slightly off because of wide group names */
@media only screen and (min-width: 620px) {
    /* Go back to normal table rows */
    .marine-life tr { display: table-row; }
    .marine-life td { text-align: left; }
    td.sub-thumbs { min-width: 480px; }
}  

@media only screen and (min-width: 768px) {
    div.subgroup-image:nth-child(4) { display: inline-block; }
    td.sub-thumbs { min-width: 630px; }
}  

/* Species */
section.ml-species {
    display: flex;
    flex-flow: column;
}

@media only screen and (min-width: 512px) {
    /* Display species thumbs in rows */
    section.ml-species { flex-flow: row wrap; }
}  

/* Species box */
figure.species-box {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    padding: 3px;
    margin: 3px;
    border-style: solid;
    border-width: 1px;    
}

/* Wrapper for image in species box so we can center it */
.species-box div.image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

/* Caption in species box */
.species-box figcaption {
}

/*****************************************************************************/
/* Album list */

section.album-list {
    display: flex;
    flex-flow: column;
}

figure.album-box {
    display: inline-block;
    padding: 3px;
    margin: 3px;
    border: 1px solid white;
}

.album-box figcaption {
}

div.album-dates {
    font-size: 0.8em;
}

div.album-top-chunks {
    /* Use inline so that they wrap around the TOC rather than all being left
     * of it. */
    display: inline;
}

@media only screen and (min-width: 512px) {
    /* Display species thumbs in rows */
    section.album-list { flex-flow: row wrap; }
}  

@media only screen and (min-width: 768px) {
    /* Display top sections side-by-side */
    div.album-top-chunks {
	display: flex;
	flex-direction: row;
    }
    .album-top-chunks h3 {
	border: none;
	margin-top: 0;
    }
    .album-top-highlights { width: 40%; }
    .album-top-notes { width: 60%; }
}

/*****************************************************************************/

/* Image list in an album */
section.album-images {
    display: flex;
    flex-flow: column;
}

@media only screen and (min-width: 512px) {
    /* Display species thumbs in rows */
    section.album-images { flex-flow: row wrap; }
}  

/* Image list in species */
div.species-images {
    display: flex;
    flex-flow: column;
}

@media only screen and (min-width: 512px) {
    /* Display species thumbs in rows */
    div.species-images { flex-flow: row wrap; }
}  

/*****************************************************************************/
/* Images thumbnails in album or species */

section.images {
    border-top: 1px solid white;
}

figure.image-box {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    padding: 3px;
    margin: 3px;
    border: 1px solid white;
}

/* Wrapper for image in species image box so we can center it */
.image-box div.image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.image-box figcaption {
    text-align: center;
    font-size: 0.8em;
}

/* Image on its own page with information */
figure.image-page {
}

/* Image shown full-screen */
figure.image-full {
}

/* Image captions */
.image-page figcaption {
    text-align: center;
    font-size: 0.8em;
}
.md-img figcaption {
    text-align: center;
    font-size: 0.8em;
}

/*****************************************************************************/
/* Google maps iframes */

iframe.gmaps {
    width: 100%;
    height: 450px;
    border: 0;
}

@media only screen and (min-width: 600px) {
    iframe.gmaps { width: 600px; };
}

/*****************************************************************************/
/* List page */

table.rlist {
    font-size: 0.9em;
}

.rlist tbody tr:hover { background-color: var(--trhover); }

/* Column widths */
th.list-rec-id		{ width: 45px; }
th.list-last-used-time	{ min-width: 80px; max-width: 135px; }
th.list-thumb		{ width: 105px; }
th.list-actions		{ width: 115px; }
th.list-slug		{ width: 250px; }
th.list-slug-image	{ width: 150px; }

td.list-rec-id  { text-align: right; }
td.list-actions { text-align: center; }

/*****************************************************************************/
/* Edit page */

section.redit {
}

div.redit-thumbs {
    float: right;
}

div.redit-info {
}

table.redit-recrel {
    font-size: 0.9em;
}

/* Ratings in recrel tables are color-coded */
td.redit-rr-rating-7 { background-color: #35a; }
td.redit-rr-rating-6 { background-color: #369; }
td.redit-rr-rating-5 { background-color: #378; }
td.redit-rr-rating-4 { background-color: #385; }
td.redit-rr-rating-3 { background-color: #3b5f7b; }
td.redit-rr-rating-2 { background-color: #665; }
td.redit-rr-rating-1 { background-color: #755; }

/* Livesearch edit field in recrel table */
input.redit-recrel {
    box-sizing: border-box;
    width: 100%;
}

/* Textarea within info */
textarea.redit {
}

textarea.redit-page {
    /*
     * Use scroll so that width doesn't change when text expands; that can
     * cause problems with onTextAreaInput()-based resizing.  But... doesn't
     * actually seem to be needed?
     */
    /* overflow-y: scroll; */
    /* TODO: Better way to expand to edge of thumbnails? */
    width: 95%;
}

/*****************************************************************************/
/* Modal popups */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 30; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* Black w/ opacity */
    padding-top: 60px;
}

.modal-content {
    position: relative;
    background-color: var(--modalbg);
    color: var(--modalcol);
    margin: 5px auto; /* 15% from the top and centered */
    padding: 0px 4px;
    border: 1px solid white;
    width: 80%; /* Could be more or less, depending on screen size */
    height: 80%; /* Could be more or less, depending on screen size */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    font-size: 0.95em;
    overflow: auto; /* Enable scroll if needed */
}

/* The Close Button */
.modal-close {
    /* Position it in the top right corner inside of the modal */
    /* TODO: It scrolls if the screen is too small */
    position: absolute;
    right: 0;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0px 8px;
    z-order: 1;
}

/* Close button on hover */
.modal-close:hover, .modal-close:focus {
  color: red;
  cursor: pointer;
}

.modal-title {
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
}

.gdpr-banner {
    position: fixed; /* Stay in place */
    z-index: 30; /* Sit on top */
    left: 0;
    bottom: 0;
    width: 100%; /* Full width */
    padding: 10px;
    background-color: rgb(0,0,0); /* Fallback color */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.gdpr-text {
    display:inline-block;
    margin: 4px;
    padding: 4px;
    flex-shrink: 1;
}

.gdpr-close {
    display:inline-block;
    background-color: #444;
    margin: 4px;
    padding: 4px;
    border: 1px solid white;
    text-align: center;
}

.gdpr-wrap {
    text-align: center;
    flex-shrink: 0;
}

.gdpr-close:hover, .gdpr-close:focus {
    cursor: pointer;
    background-color: #777;
    display:inline-block;
    margin: 4px;
    padding: 4px;
    border: 1px solid white;
}

@media only screen and (min-width: 768px) {
    .gdpr-banner {
	flex-direction: row;
    }    
}

/* TODO: enable settings button */
#settings-button {
    display: none;
}

/*****************************************************************************/
/* Navigation */
/*
 * TODO: Makes more sense to put this up between header and footer sections,
 * but right now it's kinda heinous so push it down here.
 */

nav {
    text-align: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

nav li {
}

nav li:hover {
    background-color: var(--menuhoverbg);
}

nav a {
    color: var(--menucol);
    text-decoration: none;
    display: inline-block;
}

nav a:hover, nav a:active {
    color: var(--menuhover);
    background-color: var(--menuhoverbg);
    outline: 0;
}

/* Menu buttons which appear when nav shrinks to tablet/mobile */
.menubutton {
    display: inline-block;
    flex-basis: 30px;
    color: var(--menucol);
}

.menubutton::after {
    content: " \2630";
}

.menubutton.opened::after {
    content: " \25BC";
}

/* Nav which appears instead of menu button */
.premenubutton { display: none; }

/*
 * Top top menu button (the one which appears when the menu shrinks to mobile
 * form) doesn't float.
 */
#toptopmenu {
    width: 100%;
    float: none;
    padding: 3px 10px;
}
#toptopmenu.opened {
    background-color: var(--menuhoverbg);
}

/* Title is part of article menu */
div.title {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    padding: 4px 8px;
}

/* Scientific name in title should break after pushing to next line */
div.title-sci {
    display: inline-block;
}

/**************************************/
/* Top menu */
nav.top-menu {
    background-color: var(--menubg);
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;    
    font-size: 0.9em;
    /* Must specify high Z-index so it will sit on top of other things */
    z-index: 20;
}

.top-menu li {
    display: inline-block;
    padding: 3px 10px;
}

/* Increase spacing of top menu elements on wide screens */
@media only screen and (min-width: 992px) {
    .top-menu li { padding: 3px 20px; }
}

/**************************************/
/* Admin menu, based off of top menu, but with smaller text */
nav.admin-menu {
    padding: 1px 4px;
    font-size: 0.8em;
    border-top: none;
}

.admin-menu ul {
    justify-content: flex-start;
}

.admin-menu li {
    display: inline-block;
    padding: 0px 4px;
}

/**************************************/
/* Title and navigation */
nav.article {
    border-bottom: 2px solid white;
    margin-bottom: 3px;
    padding-bottom: 3px;
    /* Explicitly put behind nav.top-menu */
    z-index: 10;
}

/* Location icon on left */
.loc-bar {
    font-size: 0.9em;
    color: var(--menucol);
    position: absolute;
}

/* Push the title beneath the location bar when we get narrow */
div.loc-bar+div { padding-top: 16px }
@media only screen and (min-width: 600px) {
    div.loc-bar+div { padding-top: 4px }
}

.loc-menu li {
    display: inline-block;
    padding: 3px 4px;
}

/* Settings and help on right */
.right-bar {
    font-size: 0.9em;
    color: var(--menucol);
    position: absolute;
    right: 0;
}

.right-menu li {
    display: inline-block;
    padding: 3px 4px;
}

#help-button {
    cursor: pointer;
}

/* Left/right/up at top of article */
div.nav-dirs {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

div.nav-dir {
    display: inline-block;
}

div.nav-dir a {
    padding: 0px 8px;
}

/* Arrows around navigation links */
div.nav-left a::before { content: "\2190"; }
div.nav-right a::before { content: "\2192"; }
div.nav-up a::before { content: "\2191"; }

div.nav-disabled {
    /* Hide disabled nav links */
    /*
     * TODO: A little lame to do it this way since the text is still selectable,
     * but it does make things still line up.
     */
    color: var(--bgcol);
}

/* Location dropdown */
ul.ddc-loc {
    /* Some locations are wide, and the list items don't auto-size properly */
    min-width: 200px;
}

/* Arrows next to location items in dropdown */
li.loc-up::before { content: "\2191"; }
li.loc-down::before { content: "\2193"; }

li.loc-up {
    border-bottom: 1px solid white;
}

/* Groups dropdown */
ul.ddc-group {
    flex-flow: column wrap;
    width: 1010px;
    max-width: 90vw;
    height: 70vh;
    overflow: auto;
    justify-content: flex-start;
    align-items: flex-start;
}

ul.ddc-group li.group {
    text-align: left;
    width: 200px;
}

ul.ddc-group li.group-top {
    border-top: 1px solid #ccc;
}

/**************************************/
/* Pagination first/prev/next/last */
nav.pag {
}

nav.pag a {
    min-width: 40px;
}

nav.pag a:hover {
    background-color: var(--menuhoverbg);
}

.pag-disabled {
    /* Hide disabled pagination buttons by making them background color */
    color: var(--bgcol);
}

/*****************************************************************************/
/* RWD debug: admin menu background color changes based on RWD breakpoints */
/* Extra small devices (phones, 600px and down) */

/* 400-512 pixels */

/* Top menu and dropdown content is hidden by default */
ul.top-menu, .dropdown-content {
    display: none;
    background-color: var(--menubg);
}

/* Top menu and dropdown content displayed in flexbox columns when opened */
ul.top-menu.opened, .dropdown-content.opened {
    display: flex;
    flex-direction: column;
}

/* Submenus and the menu button are displayed in a different color when open */
ul.top-menu li.dropdown .dropdown-content.opened {
    border-radius: 5px;
    background-color: var(--submenuopened);
}
ul.top-menu li.dropdown .menubutton.opened {
    background-color: var(--submenuopened);
}

/* TODO: These are the same as the hover for wider screens */
/* Location menu uses regular color */
ul.loc-menu li.dropdown .dropdown-content.opened {
    display: block;
    position: absolute;
    left: 0px;
    top: 24px;
    background-color: var(--menubg);
    border: 1px solid white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}
/* List items inside dropdown-content are left-aligned */
ul.loc-menu .dropdown .ddc-loc.opened li {
    text-align: left;
    width: 100%;
}

ul.loc-menu .dropdown ul.ddc-group.opened {
    display: flex;
}


@media only screen and (min-width: 768px) {
    /* Top menu goes to row-based */
    ul.top-menu, ul.top-menu.opened {
	display: flex;
	flex-direction: row;
    }

    /* Hide the menu buttons and home entry */
    .menubutton { display: none; }
    #menu-home { display: none; }
    /* Display the alternate text before the menu button */
    .premenubutton { display: inline-block; }

    /*
     * Dropdowns use relative position so dropdown-content position: absolute
     * can align with it.
     */
    .dropdown {
	position: relative;
    }

    /* Add down-arrow to hint there's hidden content */
    .dropdown::after { content: "\25BE"; }

    /*
     * Need to specifically hide opened dropdown content, since that has
     * higher specificity than just .dropdown-content.
     */
    .dropdown-content.opened {
	display: none;
    }

    .dropdown-content {
	position: absolute;
	left: 0px;
	top: 24px;
	background-color: var(--menubg);
	border: 1px solid white;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
	z-index: 1;
    }

    /* Display dropdown-content when hovering over the containing dropdown */
    .dropdown:hover .dropdown-content {
	display: block;
    }

    .dropdown:hover .ddc-group.dropdown-content {
	display: flex;
    }
    
    /* List items inside dropdown-content are left-aligned */
    ul.dropdown-content li {
	text-align: left;
	width: 100%;
    }

    
}