/*  
   Screen sizes used and UI element behaviour:

   default, eg mobile: site navigation and doc TOC use hamburger foldouts
                       asides below the main text

   min-width: 768px, eg tablet portrait: Site navigation uses tabs,
                                         asides beside the main
                                         text. Doc TOC still use
                                         foldout/offscreen canvas

   min-width: 960px, eg desktop/tablet landscape: Doc TOC always on-screen



   CSS rules structure:

   1. Header/Navbar
   2. Document/content area
     2.1 Sidebar/Document-TOC
     2.1.1 Scrollspy-dependent nav styling (foldouts etc)
     2.1.2 Off-canvas handling of sidebar
     2.1.3 Misc doc TOC styling
     2.2 Accordion panel styling (asides)
     2.3 Search results styling
     2.4 TOC pages styling
     2.5 Autocomplete/typeahead styling
     2.6 Misc styling
   3. Footer
   4. Optional dark mode

*/

/* GENERAL/GLOBAL PARTS */

body {
    /* extra space so that .slidebutton doesn't obscure the text */
    /* margin-left: 10px; */ /* maybe not now with the new slidebutton */
}
@media (min-width: 960px) {
    body {
	margin-left: 0;
    }
}



/* PART 1: Navbar */

nav.navbar-default {
    /* undo the body margin set by the body rule */
    margin-left: -10px;
}
@media (min-width: 960px) {
    nav.navbar-default {
	margin-left: 0;
    }
    nav.navbar-default input {
	width: 400px; !important
    }
    
}

/* ...needs no customization now that we're using a stock Bootstrap
   navbar and it's responsiveness */

/* PART 2: The main content area (including document TOC) */

/* PART 2.1: Sidebar/document TOC */


nav[data-toggle='toc'] {
    margin-top: 0; /* used to be 30px, wonder what i was thinking... */
}

/* PART 2.1.1: Scrollspy-dependent styling  */

/* 2nd level list items (and below) are displayed as inline, while their child
   anchors are blocks, which enables us to have a straight left
   margin, while still indenting each new level */ 
nav[data-toggle='toc'] > ul.nav > li > ul > li,
nav[data-toggle='toc'] > ul.nav > li > ul > li > ul > li {
    display: inline;
}

/* top level style */
nav[data-toggle='toc'] ul.nav > li > a {
  display: block;
  padding-left: 10px;
  padding-top: 0;
  padding-bottom: 3px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
}
/* top level when active */
nav[data-toggle='toc'] ul.nav > .active > a {
  padding-left: 8px;
  font-weight: bold;
  color: #337ab7;
  background-color: transparent;
  border-left: 2px solid #337ab7;
}

/* second level and below */
nav[data-toggle='toc'] ul.nav ul.nav {
  display: none; /* Hide by default */
}
nav[data-toggle='toc'] ul.nav > .active > ul.nav {
  display: block;  /* but when active, show as block */
}

nav[data-toggle='toc'] ul.nav ul.nav > li > a {
  padding-left: 20px;
  font-size: 12px;
  font-weight: normal;
}

/* second level and below, active */
nav[data-toggle='toc'] ul.nav ul.nav > li.active > a {
  padding-left: 18px;
  font-weight: bold;
}


/* third level, extra indent */
nav[data-toggle='toc'] ul.nav ul.nav ul.nav > li > a {
  padding-left: 30px;
}
nav[data-toggle='toc'] ul.nav ul.nav ul.nav > li.active > a {
  padding-left: 28px;
}

/* fourth level, even more indent */
nav[data-toggle='toc'] ul.nav ul.nav ul.nav ul.nav > li > a {
  padding-left: 40px;
}
nav[data-toggle='toc'] ul.nav ul.nav ul.nav ul.nav > li.active > a {
  padding-left: 38px;
}

nav[data-toggle='toc'].affix {
    position: static;
}

@media only screen and (min-width: 960px) {
    nav[data-toggle='toc'].affix {
	position: fixed;
    }
}

/* end of scrollspy-enabled toc */

/* PART 2.1.2: Use off-canvas technique for doc TOC by default (larger
   screens can override this */

.row-offcanvas-left {
    left: 0;
}

.row-offcanvas-left.active {
  left: 200px;
}

.row-offcanvas-left article {
    width: 100vw;
    transition: all .15s ease-out;
}
.row-offcanvas-left.active article {
    width: 100vw;
    margin-left: 200px; /* It is this property that makes the (active) offscreen canvas scroll with the document... for exactly 200px */
}

.row-offcanvas-left .sidebar-offcanvas {
  position: fixed; 
  top: 0;
  width: 200px;
  left: -200px;
  height: 100vh;
  padding: 3px; 
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: black;
  background-color: #fff;
  transition: all .15s ease-out;
  z-index: 10; /* since it occupies the same space as article.col-sm-9, and comes before it in the HTML, it seems to be obscured? Try to raise it. */
}

.row-offcanvas-left.active .sidebar-offcanvas {
    left: 0;
    overflow-y: auto;
}
 
.sidebar-offcanvas nav {
  overflow: auto;
}

.sidebar-offcanvas nav#toc ul {
    padding: 0;
}

.slidebutton {
  position: fixed;
  width: 40px;
  left: 0;
  top: 80vh;
  height: 40px;
  border-radius: 20px;
  padding: 2px;
  background: #5e5e5e;
  z-index: 20;
}
.inner-slidebutton {
  width:36px;
  height:36px;
  border-radius:18px;
  color:#5e5e5e;
  line-height:20px;
  background:#fff;
  text-decoration: none;
  padding-top: 5px;
  padding-right: 3px;
  font-size: 26px;
  text-align: right;
}

@media only screen and (min-width: 960px) {
    .row-offcanvas-left .sidebar-offcanvas {
	left: 0;
	position: relative;
	width: 25%;
	border: none;
    }
    .row-offcanvas-left.active {
	left: 0;
    }
    .row-offcanvas-left .sidebar-offcanvas .slidebutton {
	display: none;
    }
    .row-offcanvas-left article {
	width: 75%;
    }
    .row-offcanvas-left.active article {
	width: 75%;
	margin-left: 0;
    }
}
/* end offscreen canvas */


/* PART 2.1.3: Misc doc TOC styling. FIXME: Should probably be merged with 2.1.1 above */
nav#toc ul {
    padding-left: 0.5em;
}

nav#toc li {
    list-style: none;
}

nav#toc > ul > li > ul  {
    padding: 0;
}
nav#toc > ul > li > ul > li {
    display: inline;
}

nav#toc > ul > li > p {
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0.5em;
}


/* small screens */
/*
@media (max-width: 767px) {
    override the Affix plugin so that the navigation isn't sticky
   (which it is by default?) 
    nav.affix[data-toggle='toc'] {
	position: static;
    }

    nav[data-toggle='toc'] .nav .nav {
	display: block;
    }
}
*/

@media only screen and (min-width: 960px) {
    nav.affix-top {
	width: 97%; /* of the .col-sm-3 element */
    }
    nav.affix {
	position: fixed;
	top: 0;
	bottom: 0;  /* ie the div is 100% of the viewport height */
	overflow: scroll; /* let us reach rest if the navmenu is larger than the viewport */
	width: 24%;  /* of the entire page width, FOR SOME REASON */
    }
}


/* PART 2.2: Accordion panel styling (asides) */ 
/* Tighten the accordion panel headers */
div.panel-group > div.panel {
	border-radius: 0;
}
div.panel-group > div.panel > div.panel-heading {
	padding: 3px;
	border-radius: 0;
}
h4.panel-title {
	font-size: 10pt;
}
/* to make the badge neat while smaller so it fits in a .panel-title */
.badge {
    font-size: 8pt;
    border-radius: 6px;
    padding: 2px 5px;
}
.panel-group .panel+.panel {
	margin-top: 0;
}
div.panel-body {
	padding: 3px;
	font-size: smaller;
}
div.panel-body div.row {
	margin: 1pt 1pt 6pt 1pt;
}
div.panel-body div.row p:first-child {
	text-indent: 0;
}
div.panel-body div.row p {
	text-indent: 1em;
	margin-bottom: 0;
}
div.panel-body ul {
    padding: inherit;
    list-style: none;
}

@media (min-width: 768px) {
    /* in tablet portrait mode, the main content is in a .col-sm-9 div,
       which should cover the entire width */ 
    .col-sm-9 {
	width: 100%;
    }
}

@media (min-width: 960px) {
    /* in desktop mode, the sidebar is always visible (in a .col-sm-3 div)
   and so the content area should only take 3/4 of the screen */
    .col-sm-9 {
	width: 75%
    }
}
/* PART 2.3: Search form + results styling */

.twitter-typeahead {
    display: none !important;
}


form#search {
    float: right;
    width: inherit;
    border: none;
    padding: 0;
    margin-right: 8px;
}

form#search .input-group-btn {
    width: auto;
    display: inline-block;
}

form#search input {
    height: 34px;
    padding: 0;
    display: none;
    font-size: 16px; /* any less and mobile safari auto-zooms when input gets focus */
}
form#search button {
    border-radius: 4px;
    background-color: transparent;
}
form#search.active {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

form#search.active .twitter-typeahead {
    display: inline-block !important;
    float: left;
    width: 85%;
    margin-left: 12px;
}

form#search.active input {
    display: inline-block;
    float: left;
}

@media(min-width: 768px) {
    form#search {
	position: absolute;
	right: 0;
    }
    form#search input.form-control {
	display: block;
	margin-top: 1px;
	width: 20em;
    }
    form#search .twitter-typeahead {
	display: inline-block !important;
    }
    form#search button {
	display: none;
    }
}

/* FIXME: what was the purpose of this, again? */
body.search nav#toc > ul > li > ul > li {
    display: list-item;
}

body.search .hit {
	margin-bottom: 1ex;
	padding-left: 4pt;
	border: solid 1px #eee;
}
body.search .hit:nth-child(odd) {
	background-color: #eee;
}

body.search .innerhit {
	margin-left: 1em;
	margin-bottom: 1ex;
}

/* PART 2.4: TOC pages styling (A specific page type, not to be
   confused with document TOC styling */ 
body.toc article > ul,
body.toc article div.threecol > ul
{
    padding-left: 0;
    list-style: none;
}
body.toc article ul li ul {
    padding-left: 2em;
}

body.toc div.threecol {
    column-count: 3;
    column-rule: 1px dotted grey;
		      
}
body.toc article h2 {
    margin-bottom: 0;
}

body.toc article ul li ul li {
}

/* PART 2.5: Autocomplete/typeahead styling */
.typeahead,
.tt-query,
.tt-hint {
  height: 30px;
  padding: 8px 12px;
  outline: none;
}

.typeahead {
}

.typeahead:focus {
}

.tt-query {
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  right: 0 !important;
  left: initial !important;
}

.tt-suggestion {
  padding: 3px 5px;
  font-size: 12px;
  line-height: 14px;
  border-bottom: 1px dotted #ccc;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}



/* PART 2.6: Misc styling */
div.watermark {
    position: fixed;
    z-index: -1;
}
div.watermark p {
    margin-top: 100pt;
    color: lightgrey;
    font: bold 50pt arial, sans-serif;
    transform: rotate(-45deg);
}
div.watermark p del,
div.watermark p ins {
    display: none;
}
a.facsimile img { 
    display: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 100%;
    height: 100%;
    min-height: 140px;
    padding: 10px;
    background: url('/rsrc/img/spinner.gif') no-repeat center; /* shown while loading real img */
}

/* the tab over a facsimile page, allowing you to toggle OCR/original renderings */
div.page ul li a {
    padding: 5px 15px;
    font-size: smaller;
}

body.frontpage nav#toc ul > li > ul {
    padding-left: 10px;
}

/* grid-framework.less gives all .rows negative left and right margins
(-15px) for some reason. This causes the row to have more pixels than
body (eg 1310 when body is 1280). This makes it possible to right
scroll the content, which leads to content being misaligned (we end up
with a 15px empty space to the right). Maybe we aren't meant to use
this grid system directly under body? */
.row {
    margin: 0;
}

/* for small screens, there is no left navigation to give extra
   padding to the main article text, so it aligns right at the
   screen edge, which is ugly. Add some padding for breathing room
   (but do it at the article lvl, not body, since the top nav must
   fill the entire width). */
.col-sm-3, .col-sm-5, .col-sm-7, .col-sm-9 {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* Maybe these should go into devel.css */
body.statusreport div.basefile {
    margin: 2px 0;
    padding: 1px;
    display: inline-block;
}
body.statusreport p.alert {
    padding: 1px;
    margin: 2px;
    display: inline;
}
/* only used in the devel/patch web UI */
textarea {
    font-size: 12px !important;
    font-family: monospace;
    white-space: nowrap;
    overflow: auto;
}

/* only used in devel/change-parse-options web UI */
#streaming-log-output {
    font-size: x-small;
}

/* only used in devel/logs web UI */
.logviewer {
    font-size: x-small;
}


/* in bootstrap, all headers by default have font-weight 500, which renders as bold on Chrome/FF, but as normal on (at least some versions of) IE. Specify that we really want a bold heading. */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}


/* make invalid links not clickable, but still hoverable */
.invalid-link {
    cursor: default;
    color: inherit;
    border-bottom: 1px #ccc dotted;  /* very discrete indication that there is
                                        something here */
}
.invalid-link:active {
    pointer-events: none;
}
.invalid-link:hover {
    text-decoration: none;
    border-bottom: 1px dotted;
}
/* sort of a faux tooltip */
.invalid-link:hover:after {
    content: "Document does not exist";
    position: absolute;
    padding: 3px 6px;
    box-shadow: 0 0 4px #aaa;
    background: #eee;
    color: black;
    font-size: smaller;
}

/* in some cases, table styles specified by bootstrap are inexplicably
   overridden by the user-agent stylesheet. Specify the same stuff
   again... */
table {
    font-size: 14px;
    line-height: 1.42857143;
}

/* used for making prettier diffs (styles <ins> and <del> tags from lxml's htmldiff */
ins {
    color: #22863a;
    background-color: #f0fff4;
}
del {
    color: #b31d28;
    background-color: #ffeef0;
}
/* PART 3: Footer */
footer nav {
    text-align: center;
}
footer nav li {
    display: inline;
}
footer li + li::before {
    content: " | ";
}


/* PART 4: Optional dark mode */

@media (prefers-color-scheme: dark) {
    body {
	color: #ccc;
	background-color: #000;
    }
    .row-offcanvas-left .sidebar-offcanvas {
	color: #ccc;
	background-color: #000;
	
    }
    .panel {
	background-color: #000;
    }
    .panel-default>.panel-heading {
	background-color: #222;
	color: #eee;
    }
}