/*
 * The Chandra X-Ray Center (CXC) is operated for NASA:
 *   Smithsonian Astrophysical Observatory
 *   60 Garden Street
 *   Cambridge
 *   MA 02138
 *   USA
 * Email: cxcweb@head.cfa.harvard.edu
 *
 * Smithsonian Institution, Copyright © 1998-2010, 2013-2016,
 *   2018-2020, 2023-2024.
 * All rights reserved.
 */

/* Set up header/footer, over-riding where appropriate */
@import url("cxcstyle_hf.css");

/*
 * font-family suggestion (for main text) from
 * https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae
 */

/* try and override options - e.g. to better match the 2015 appearance of
   the home page */

#cxcheader {
    background: #99cc67 url("/incl/greenfade2.jpg") repeat-y center right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* change div.bottombar if the cxcfooter changes */
#cxcfooter {
    background: #99cc67 url("/incl/greenfade2.jpg") repeat-y center right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* why do the lists appear closer together (vertically) on / than here? */
#cxcheaderright {
    margin-right: 2em;
    margin-top: 1em;
}

#cxcheaderright li {
    font-size: 1em;
}

#cxcheaderright a {
    font-weight: normal;
    padding: 0px;
}

#cxcheaderright ul li a {
    background-color: transparent;
    border: none; /* turn off the border */
    font-size: larger;
    font-variant: small-caps;
}

#cxcheaderright ul li a:hover {
    background-color: #6d9f48;
}

#cxcfooterleft {
    max-width: 19%;
}

#cxcfooterright {
    max-width: 80%;
}

/* Default CIAO styles */

body {
  color: #000000;
  background: #ffffff;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6; /* let's see what the reaction is to the extra vertical space */
}

header , footer , aside {
  line-height: 1;
}

.screen , pre {
  font-family: "Inconsolata", "Liberation New", "Droid Sans Mono", "DejaVu Mono", "Courier New", monospace;
  line-height: normal;
}

#main {
    float: left;
    width: 100%;
    min-width: 740px;
    background: #ffffff url(imgs/bg.gif) repeat-y 20% 0;
}

#navbar {
  background: #99cc66;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1 {
   font-size: 2.0em; /* 32px / 16px = 2.0em */
    }

h2, h3 {
    font-size: 1.25em; /* 20px / 16px = 1.25em */
    }


hr.midsep {
  width: 80%;
  text-align: center;
  margin: 30px auto;
}


/* links */

a {
  color: #037D03;
  }

pre a, screen a {
  text-decoration: none;
  }

a:hover {
  background: #ccffcc;
  }

a img {
  border: none;
  }

/* CIAO header and footer */

div.topbarcontainer {
    background: #99CC67 url('/incl/greenfade2.jpg') repeat-y center right;
    overflow: auto;
    width: 100%;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* withnavbar is a horrible hack */
div.topbarcontainer.withnavbar {
    border-bottom-right-radius: 1em;
    -webkit-border-bottom-right-radius: 1em;
    -moz-border-bottom-right-radius: 1em;
}

/* The following are forced to only match on the presence of div.topbarcontainer
   as I am not convinced all the pages have been converted to this style yet. */

div.topbarcontainer div.lastmodbar {
    padding: 1em;
}
div.topbarcontainer div.searchbar {
    padding-right: 1em;
    padding-bottom: 1em;
    padding-top: 0; /* try and remove existing rule */
}
div.topbarcontainer span.searchbar {
    color: white;
    font-weight: normal;
}
div.topbarcontainer span.searchbar a {
    color: white;
}
div.topbarcontainer span.searchbar a:hover {
    background-color: #6d9f48;
}

div.topbar {
    width: 100%;
}

/*
 * Make sure this is changed when cxcfooter background or radius is changed
 * Need to make sure not applied to thread pages and other non-navbar pages,
 * hence the somewhat specific selector below (could probaly use
 * div#main ~ div.bottombar)
 */

div.bottombar {
    background: #99cc67 url("/incl/greenfade2.jpg") repeat-y center right;
    padding-left: 1em;
}

div.bottombar.withnavbar {
    border-top-right-radius: 1em;
    -webkit-border-top-radius: 1em;
    -moz-border-top-radius: 1em;
}

/* this is for pages not using footer */
div#main + br + div.bottombar {
    border-top-right-radius: 1em;
    -webkit-border-top-radius: 1em;
    -moz-border-top-radius: 1em;
}

/* add in the corner for pages with a "nav bar" */

div.lastmodbar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

div.lastmodbar, div.pdfbar, .qlinkbar, div.searchbar {
  font-size: smaller;
  /* can not seem to reduce the font size on mobile for the lasmodbar but does
     for other parts, so is there some other rule that is interfering
     on mobile?
  font-size: 90%;
  */
  }

/* this was qlinkbar but as that has been used in many places, create a
   new term for an area with a bunk of links we want spaced out "nicely"
   that may span multiple lines.

   Can we add a spacer (e.g. " | ") between lines?
   Can we get better behaviour than space-evenly?

   This assumes:
     <div class="spacedlinks"
       <cxclink ../>
       <cxclink .../>
       ...
     </div>
*/

.spacedlinks {
  display: flex;
  flex-wrap: wrap;
  font-size: smaller;
  justify-content: space-evenly;
}

.spacedlinks a + a {
  margin-left: 0.5em;
}

.navlinkbar, .pagetitle, .navimage, .scriptcell {
  text-align: center;
  }

.pagetitle {
  /* font-family: Sans; */
}

h1.pagetitle { margin-bottom: 0; }
.pagetitle h1 { margin-bottom: 0; }

.qlinkbar td {
  vertical-align: top;
  }

.qlinkbar tr>td:first-child {
  text-align: right;
  }

ul.inlinenav {
  text-align: center;
  }

ul.inlinenav li {
  list-style: none;
  display: inline;
  }

ul.inlinenav li:after {
  content: " | ";
  }

ul.inlinenav li:last-child:after {
  content: "";
  }

ul.inlinenav:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

span.searchbar {
  color: #003300;
  font-weight: bold;
  }

div.searchbar {
  float: right;
  width: 25em;
  text-align: center;
  }

div#advancedsearch {
  text-align: right;
  }

/*** hopefully no-longer used
div.infobox {
   background: #eee;
   border: 3px solid #003300;
   padding: 0.5em;
   margin: 0 40px 10px;
}
***/

#workshop {
  font-weight: bold;
  font-size: 1.25em; /* 20px / 16px = 1.25em */
  text-align: center;
  margin-top: 10px;
  clear: both;
  border: 2px #003300 solid;
}

.pheader {
  font-size: 1.125em; /* 18px / 16px = 1.125em */
}

.date {
  font-size: 0.90em; /* 13px / 14.4px = 0.90em (navbar is 90% of 16 = 14.4) */
}

/* This is only intended for display on print out */
div.urlbar {
  display: none;
  }


/*
 * navigation bar; prior to CIAO 4.7 the bar was done using a definition list,
 * but it is now done just with a list. However, the ahelp pages still use a
 * definition list, so both sets are kept.
 */

#navbar {
  font-size: 90%;
  }

#navbar dd {
  margin-left: 1em;
  }

#navbar a.indexlink {
  font-size: 115%;
  }

#navbar .heading , #navbar .selectedheading {
  color: #000000;
  font-size: larger;
  font-variant: small-caps;
  }

#navbar .selectedheading {
  background: #ccffcc;
  font-weight: bold;
  }

/* Remove all underlines from links in the nav bar */
#navbar a {
  color: #003300;
  text-decoration: none;
  }

/*
 * the new, list-based navbar rules; these may be overly-specific,
 * but it is to support co-existing with the old rules
 * (there's at least one place where having navlist be an id rather
 *  than a class is needed to over-ride the dt selector)
 */


ul#navlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul#navlist li {

  /* not many elements end up using this color setting */
  color: rgba(0, 127, 0, 0.7);

  padding-bottom: 0.5em;
  padding-left: 0.2em;
  padding-right: 0.2em;

}

span.navheader {
}

ul#navlist li span.navheader {
  display: inline-block;
  width: 100%;

}

ul#navlist li .heading
  , ul#navlist li ul li a
{
  /* color: rgba(0, 127, 0, 0.7); */
  color: rgba(0, 0, 0, 0.7);
}

ul#navlist li .heading:hover
  , ul#navlist li ul li a:hover
{
  /* color: rgba(0, 127, 0, 1); */
  color: rgba(0, 0, 0, 1);
}

ul#navlist li ul li a:hover {
  background: #CCFFCC; /* remove this if ul#navlist li:hover has this set */
}

ul#navlist li ul {
  background: #99CC66; /* match the navbar */
  /* border: 1px solid rgba(0, 127, 0, 0.7); */

  font-size: smaller;
  list-style: none;

  /*** margin: 0; ***/
  padding: 0;
  padding-left: 1em;

}

ul#navlist li ul li {
  padding: 3px;
  border-bottom: 1px solid rgba(0, 127, 0, 0.7);
}

/* remove some of the styling the default stylesheet adds for the dt approach;
   looks like need to an an id to allow the override */
ul#navlist li .heading
{
  font-weight: normal;
  text-decoration: none;
}

ul#navlist li:hover {
  /* background-color: #CCFFCC; */
           /* #6d9f48;  used in the header, fairly dark */
  /* switching to just displayng borders so that the link text
     works (i.e. it's more obvious when you are over the link),
     but I'm not sold on this */
  border-color: #CCFFCC;

}

#navbar .selectedheading {
  background: transparent;  /* over-ride the previous background setting */
}

span.hassubmenu {
  color: rgba(0, 127, 0, 0.7);
  font-size: larger;
  float: right;
}

/* add a gap between the header and br for non-list elements */

#navbar span.navheader + br {
  margin-bottom: 0.5em;
}

/* end of list-based navbar rules */

.newsdate {
    font-style: italic;
    padding-left: 10px; /* todo: change from px */
}

.newsitem h3 {
    font-size: 1.125em; /* 18px / 16px = 1.125em */
    margin-bottom: 0;
    margin-top: 0;
}

.newsitem p.newsdate {
    margin-top: 0;
    padding-left: 0;
}

#chartnav {
  background-color: #cccccc;
  border: 2px solid #003300;
  text-align:center;
  margin-bottom: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

/* download form */

form dt {
  font-weight: bold;
  padding: 4px;
  margin-top: 25px;
}

form dd>ul,form ul {
  list-style-type: none;
  }

form dd {
  margin: 0;
  }

form dd p {
  padding-left: 25px;
  }

/* styling a button as a link from natbat
   http://natbat.net/2009/Jun/10/styling-buttons-as-links/
*/

p.link {
  text-align: center;
}

button.link {
        color: #037D03;
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	}

button.link span {
	text-decoration: underline;
  	font-size: 1.125em; /* 18px / 16px = 1.125em */
	}

.newsbar, #threaddatatableheader {
  background: #003300;
  color: #ffffff;
  text-align: center;
  padding: 2px;
  }

.newsbar h2 {
  font-size: 1.25em; /* 18px / 14.4px = 1.25em (navbar is 90% of 16 = 14.4) */
  }

.newsbar h3, #threaddatatableheader h3 {
  font-size: 0.875em; /* 14px / 16px = 0.875em */
  margin: 0;
  }

/* TODO: maybe just change alpha transparency rather than
   color on hover? */
#navbar div.newsbar a, #threaddatatableheader a {
  background: #003300;
  color: #ffffff;
  }

#navbar div.newsbar a:hover, #threaddatatableheader a:hover {
  background: #ccffcc;
  color: #000000;
  }

table#threaddatatable {
  border: 1px solid #003300;
  }

table#threaddatatable td {
  padding: 10px;
  }

/*
 * Table header and rows (initial version, may well change);
 * the threadtable stuff should probably change to useing/including
 * these styles
 */

table.ciaotable, table.ahelptable, table.scripts, table#scripttable {
    border-width: 0px;
}

.scriptrow {
   background-color: rgba(0, 0, 0, 0.15);
}

#scripttable td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }


table.ciaotable, table.qlinkbar {
  margin: auto;
  }

table.ciaotable thead {
    postion: sticky;
    top: 0;
}

table.ciaotable th, table.ahelptable thead th, table#scripttable thead th {
    background: #003300;
    color: #ffffff;
    text-align: center;
    padding: 5px;
}

table.ciaotable th a, table.ahelptable thead th a, table#scripttable thead th a {
    color: #ffffff;
}
table.ciaotable th a:hover, table.ahelptable thead th a:hover, table#scripttable thead th a:hover {
    background: #003300;
    color: #ffffff;
}

table.ahelptable th {
    text-align: left;
    padding: 5px;
}

table.ciaotable td, table.ahelptable td, table#scripttable td {
    padding: 5px;
}

table.ciaotable tbody tr:nth-child(even),
div.wrap .newsitem:nth-child(2n-1)  {
    background: rgba(204, 204, 204, 0.4);
}

table.ciaotable tbody tr:nth-child(even):hover {
    background: rgba(204, 204, 204, 0.8);
}

.newsitem {
  padding-bottom: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.5em;
}

.newsitem div {
   padding-left: 1em;
}


.newstable td {
    vertical-align: top;
}

pre.paramlist {
  font-size: 90%;
  }


span.highlightbox {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  padding: 0.2em;
  background: #99cc66;
}


.hideme {
  display: none;
  }


#overview {
  background: #eeeeee;
  padding: 0.5em 1em;
  }

.screen pre, pre.highlight {
  white-space: pre;
  overflow: auto;
  }

/* support word-wrap in the pre block */
.screenwrap pre.highlight {
  white-space: pre-wrap;
  overflow: auto;
  }

/* stop highlights from taking the whole horizontal width;
   this is new in CIAO 4.12 and DJB is not 100% convinced about it
 */
pre.highlight {
  display: inline-block;
  margin-bottom: 0;
  margin-top: 0;
}

div.highlighttext {
  margin: 2em;
  }

.screen pre , .screenwrap pre , pre.highlight , div.highlighttext
  , .ahelpsyntax pre, .ahelpverbatim pre, .ahelpequation pre {
  /* background: #cccccc; */
  background: rgba(204, 204, 204, 0.4);
  padding:  0.5em;

  /* border: thin solid black; */
  border-top: thin solid rgba(0, 0, 0, 0.4);
  border-bottom: thin solid rgba(0, 0, 0, 0.4);
}

/* special case blocks which have a lang tag */
div.screen-python::before {
  background: #99CC66;
  content: "python";
  margin-left: 1em;
  margin-top: -0.8em;
  padding: 0 0.5em;
  position: absolute;
  font-size: smaller;
}

dl.ciaodl dt {
  background: #eeeeee;
  border-color: #99CC67;
  border-style: solid;
  border-width: 0 0 0 1em;
  padding-left: 0.5em;
}

/*
 * page-specific style section
 *
 */

/* main index */

dl#direction dt {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.875em; /* 14px / 16px = 0.875em */
  padding-top: 4px;
  padding-bottom: 4px;
}

dl.publications dt {
  padding-top: 8px;
}

/* bug page */

.bugtable tr td {
  padding-left: 50px;
}

.toc, .bugsummary, dt.ahelp {
  font-style: italic;
  font-weight: bold;
  color: #037D03;
  }

dt.ahelp {
  padding-top: 10px;
}

.helplist {
  padding-left: 1.0em;
  margin-left: 0;
}

.bugitem {
    padding-bottom: 10px;
  }

.bugsummary pre, .buganswer {
    font-style: normal;
  }

.buganswer {
    margin-left: 20px;
    padding-left: 20px;
  }


/* registration */

div.register {
  padding: 0.5em 1.0em;
  background: #99cc66;
  }

div.register a {
  color: #003300;
  }

/* workshop reg link */
.reg {
     text-align: center;
     font-weight: bold;
}

div.threadlist li {
  margin-bottom: 5px;
}

/* threads: "history" block */

.history tr {
  vertical-align: top;
  }

.history td {
  padding-bottom: 10px;
  }

td.historydate {
  padding-right: 10px;
  text-align: right;
  }

/* ahelp file styles
 *
 */

/*
 * Long 'Jump To:' blocks can overlap with the breadcrumb box. There's
 * no obvious quick solution, so just move the jump-to bar down. Not ideal
 */

.jumpto {
  margin-top: 1em;
}

/* highlight the odd row to disambiguate it from the header
 * (which is neither odd nor even)
 */

td.altrow {
  background: rgba(204, 204, 204, 0.4);
  }

td.altrow:hover {
  background: rgba(204, 204, 204, 0.8);
  }

.ahelpsyntax pre, .ahelpverbatim pre, .ahelpequation pre {
  white-space: pre;
  }

.ahelpequation pre {
  text-align: center;
  }


/*
 * Experimental support for figures in threads.
 */
div.figure {
    margin: 1em;
}
div.figure > div.thumbnail > div.screenmedia {
    float: left;
    padding-right: 1em;
    margin-right: 0.5em;
    margin-left: 1em;
    background-color: #ffffff;
}

/* check if we want this for div.thumbnail as well as div.nothumbnail */
img.supporting,
div.figure > div.thumbnail > div.screenmedia > img ,
div.figure > div.thumbnail > div.screenmedia > a > img ,
div.figure > div.nothumbnail > div.screenmedia > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Really would like to restrict the width of the
 * figures "caption" to that of the image, but
 * not easily obvious without manually overiding the
 * width with the image size for each image. As we now
 * center the image within div.screenmedia it has
 * become less of an issue, although current look is
 * not ideal.
 */
div.figure > div > div.screenmedia > p.figures {
    text-align: center;
}

div.figure > div.caption {
    margin: 1em;
    background-color: #eeeeee;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.1em;     /* not sure looks good */
    padding-bottom: 0.1em;
}

/* Only want the highlighted bar for the title block, which
 * should be the first div.caption in the block
 */
div.figure div.caption:first-of-type {
    border: solid #99CC67; /* was #cccccc; to match screen/highlight */
    border-width: 0 0 0 1em;
}

span.figtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-variant: small-caps;
}

/* Hide the print media version of the figure */
/***
div.figure > div.thumbnail > div.printmedia ,
div.figure > div.nothumbnail > div.printmedia {
    display: none;
}
***/

/*  more general than the commented-out rule above */
.printmedia {
    display: none;
}

/* could the following be handled by clever use of selectors? */
div.clearfloat {
    clear: both;
}

/*
 * Handle admonition blocks, based on the docbook stylesheet approach
 * to the caution, important, note, tip and warning tags. We use
 * the png files from the docbook distribution (1.78.1), which are
 * assumed to be in /ciao/imgs/.
 *
 * Unlike other UI elements (e.g. code blocks), we do not place a
 * solid border around the whole area, but just a thick border on the
 * left edge.
 */

div.admonition {
    margin: 2em 3em 2em 3em;
    padding: 0.5em 1em 0.5em 1em;
    border: solid green; /* #e0e0df; */
    border-width: 0 0 0 1em;
    background-color: #eeffee;
}

div.caution-inner {
    /* background-image: url("/ciao/imgs/caution.png"); */
}

div.important-inner {
    /* background-image: url("/ciao/imgs/important.png"); */
}

div.note-inner {
    /* background-image: url("/ciao/imgs/note.png"); */
}

div.tip-inner {
    /* background-image: url("/ciao/imgs/tip.png"); */
}

div.warning-inner {
    /* background-image: url("/ciao/imgs/warning.png"); */
}

/*
 * replacement for background-image use, so that the
 * images are included in the hardcopy output
 */
div.caution-inner > img,
div.important-inner > img,
div.note-inner > img,
div.tip-inner > img,
div.warning-inner > img {
  margin-left: -35px;
  float: left;
}

/* for now assume the images are the same size of abut 25 by 25 pixels */
div.caution-inner,
div.important-inner,
div.note-inner,
div.tip-inner,
div.warning-inner {
    padding-left: 35px;
    min-height: 35px;
    background-position: left top;
    background-repeat: no-repeat;
}

div.admonition div.title {
    margin-bottom: 0.2em;
    font-weight: bold;
    color: #3f3f3f;
}

/* This has got too spaghettified, so just go with bad practices
   rather than creating thematically-appropriate classes */
.topalign { vertical-align: top; }

/*
span.plist { font-family: "Inconsolata", "Liberation New", "Droid Sans Mono", "DejaVu Mono", "Courier New", monospace; }

span.tt { font-family: "Inconsolata", "Liberation New", "Droid Sans Mono", "DejaVu Mono", "Courier New", monospace;}
*/

span.plist { font-family: "Droid Sans Mono", "FreeMono", "Courier", "monospace"; }

span.tt { font-family: "Droid Sans Mono", "FreeMono", "Courier", "monospace";
          font-weight: 600;}


div.ahelpheader {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

div.firstcol { text-align: left; }
div.centercol { text-align: center; }
div.lastcol { text-align: right; }

h1.ahelp { display: inline; font-size: 1.4em; font-weight: bold; }

hr.bigsep {
  background-color: rgb(128,128,128);
  border-color: rgb(128,128,128);
  border-style: solid;
  height: 3px;
}

/* use grid to organize the script description at
   http://cxc.cfa.harvard.edu/ciao/download/scripts/contents.html
 */
h3.scriptsection {
  text-align: center;
}

div.scriptitem2 , div.scriptitem3 {
  display: grid;
  grid-template-columns: minmax(22em, 20%) 1fr;
  grid-column-gap: 0.2em;
  grid-row-gap: 0.2em;
  margin-bottom: 0.5em;
}

div.scriptitem2 div , div.scriptitem3 div {
  background-color: rgba(0, 0, 0, 0.15);
  padding: 0.5em 0.5em;
}

div.scriptitem3 div.scriptname {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

/* HTML 5 layout changes; really should integrate into the main
   section */

footer {
    clear: both;
}


header {
  grid-area: header;
}

footer {
  grid-area: footer;
}

#content {
  grid-area: main;
  position: relative;
}

#navbar {
  grid-area: navigation;
}

/* padding depends on if in a navbar or not */
.wrap {
  padding-bottom: 1em;
  padding-top: 1em;
  clear: both;  /* ensure no overlap from breadcrumbs */
}

body.withnavbar .wrap {
  padding-left: 1em;
  padding-right: 1em;
}


body.withnavbar {
    display: grid;
    grid-template-areas: "header header"
                         "navigation main"
                         "footer footer";
    grid-template-columns: 20em 1fr;
}

/* "breadcrumb" support */

.breadcrumbs {
  background: #eeeeee;
  float: right;
  font-family: "Inconsolata", "Liberation New", "Droid Sans Mono", "DejaVu Mono", "Courier New", monospace;
  font-size: smaller;
  margin-right: 2em;
}

.breadcrumbs-top {
  margin-top: 0.5em;
}

.breadcrumbs-bottom {
  clear: left;
  margin-bottom: 0.5em;
}

/* Ideally would tweak the navbar display in this view */

@media screen and not ((max-width: 800px), (max-width: 80em)) {
    #navbar {
	max-width: 30em;
    }
}

@media screen and (max-width: 800px) , (max-width: 80em) {
  body.withnavbar {
    grid-template-areas: "header" "main" "navigation" "footer";
    grid-template-columns: 100%;
  }

 /* remove the curves */
 div.topbarcontainer.withnavbar {
    border-bottom-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
 }

 div.bottombar.withnavbar {
    border-top-right-radius: 0;
    -webkit-border-top-radius: 0;
    -moz-border-top-radius: 0;
 }

 #navbar {
    margin-bottom: 0.5em;
 }

 ul#navlist {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
 }
}

/* end of stylesheet */