@import url("manual-taurus-fonts.css");

/* See the beginning of "scribble.css".
   This file is used by the `scribble/manual` language, along with
   "manual-racket.css". */

* {
    margin: 0;
    padding: 0;
}

@media all {html {font-size: 15px;}}
@media all and (max-width:940px){html {font-size: 14px;}}
@media all and (max-width:850px){html {font-size: 13px;}}
@media all and (max-width:830px){html {font-size: 12px;}}
@media all and (max-width:740px){html {font-size: 11px;}}

/* CSS seems backward: List all the classes for which we want a
   particular font, so that the font can be changed in one place.  (It
   would be nicer to reference a font definition from all the places
   that we want it.)

   As you read the rest of the file, remember to double-check here to
   see if any font is set. */

/* Monospace: */
.maincolumn, .refpara, .refelem, .tocset, .stt, .hspace, .refparaleft, .refelemleft {
    font-family: 'Rec Mono Semicasual', monospace;
    white-space: inherit;
    font-size: 1rem;
}

/* Enable heading-source */
.button-group > .heading-source {
    visibility: inherit;
    cursor: pointer;
    user-select: none;
    color: gray;
}

/* embolden the "Racket Guide" and "Racket Reference" links on the TOC */
/* there isn't an obvious tag in the markup that designates the top TOC page, which is called "start.scrbl" */
/* nor a tag that designates these two links as special */
/* so we'll use this slightly tortured sibling selector that hooks onto the h2 tag */
h2[x-source-module='(lib "scribblings/main/start.scrbl")'] ~ table a[href="guide/index.html"], 
h2[x-source-module='(lib "scribblings/main/start.scrbl")'] ~ table a[href="reference/index.html"] {
  font-weight: bold;
}


h2 .stt {
    font-size: 2.3rem;
    /* prevent automatic bolding from h2 */
    font-weight: 400;
}

.toptoclink .stt {
    font-size: inherit;
}
.toclink .stt {
    font-size: 90%;
}

.RpackageSpec .stt {
    font-weight: 300;
    font-family: 'Rec Mono Semicasual', monospace;
    font-size: 0.9rem;
}

h3 .stt, h4 .stt, h5 .stt {
    color: #333;
    font-size: 1.65rem;
    font-weight: 400;
}


/* Serif: */
.main, .refcontent, .tocview, .tocsub, .sroman, i {
    font-family: 'Taurus Grotesk', serif;
    font-size: 1.18rem;
/* Don't use font-feature-settings with Charter, 
it fouls up loading for reasons mysterious */
/*    font-feature-settings: 'tnum' 1, 'liga' 0; */
}


/* Sans-serif: */
.version, .versionNoNav, .ssansserif {
    font-family: 'Taurus Grotesk', sans-serif;
}

/* used mostly for DrRacket menu commands */
.ssansserif {
    font-family: 'Taurus Grotesk', sans-serif;
    font-size: 0.9em;
}

.tocset .ssansserif {
    font-size: 100%;
}

/* ---------------------------------------- */

p, .SIntrapara {
    display: block;
    margin: 0 0 1em 0;
    line-height: 1.5;
}

.compact {
  padding: 0 0 1em 0;
}

li {
    list-style-position: outside;
    margin-left: 1.2em;
}

h1, h2, h3, h4, h5, h6, h7, h8 {
    font-family: 'Taurus Grotesk', sans-serif;
    font-weight: 700;
    color: #333;
    margin-top: inherit;
    margin-bottom: 1rem;
    line-height: 1.25;

}

h3, h4, h5, h6, h7, h8 {
    border-top: 1px solid silver;
}

h1 {
    font-size: 2.3rem;
}

h2 { /* per-page main title */
    font-family: 'Taurus Grotesk';
    margin-top: 4rem;
    font-size: 2rem;
    line-height: 1.2;
    width: 90%;
    /* a little nudge to make text visually lower than 4rem rule in left margin */
    position: relative;
    top: 6px;
}

h3, h4, h5, h6, h7, h8 {
    margin-top: 2em;
    padding-top: 0.1em;
    margin-bottom: 0.75em;
}

/* ---------------------------------------- */
/* Main */

body {
    color: #3c3c39;
    background-color: #faf9f5;
}

.maincolumn {
    width: auto;
    margin-top: 4rem;
    margin-left: 25rem;
    margin-right: 2rem;
    margin-bottom: 10rem; /* to avoid fixed bottom nav bar */
    max-width: 700px;
    min-width: 370px; /* below this size, code samples don't fit */
}

a {
    text-decoration: inherit;
}

a, .toclink, .toptoclink, .tocviewlink, .tocviewselflink, .tocviewtoggle, .plainlink, 
.techinside, .techoutside:hover, .techinside:hover {
    color: #07A;
}

a:hover {
    text-decoration: underline;
}

:target {
    animation: hilite 2.5s;
}

@keyframes hilite {
    0%   { background: transparent; }
    10%  { background: #f8f99a; }
    100% { background: transparent; }
}

/* ---------------------------------------- */
/* Navigation */

.navsettop, .navsetbottom {
    left: 0;
    width: 15rem;
    height: 6rem;
    font-family: 'Taurus Grotesk', sans-serif;
    font-size: 0.9rem;
    border-bottom: 0px solid hsl(216, 15%, 70%);
    background-color: inherit;
    padding: 0;
}

.navsettop {
    position: fixed;
    z-index: 2;
    background: #a7b0be;
    top: 0;
    left: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.navsettop a, .navsetbottom a {
    color: black;
}

.navsettop a:hover, .navsetbottom a:hover {
    background: hsl(216, 78%, 95%);
    text-decoration: none;
}

.navleft, .navright {
    position: static;
    float: none;
    margin: 0;
    white-space: normal;
}


.navleft a {
    display: inline-block;
}

.navright a {
    display: inline-block;
    text-align: center;
}

.navleft a, .navright a, .navright span {
    display: inline-block;
    padding: 0.5rem;
    min-width: 1rem;
}


.navright {
    white-space: nowrap;
}


.navsetbottom {
    display: none;
}

.nonavigation {
    color: #889;
}

.searchform {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eee;
    height: 4rem;
}

.nosearchform {
    margin: 0;
    padding: 0;
    height: 4rem;
}

.searchbox {
    font-size: 0.9rem;
    width: 12rem;
    margin: 1rem;
    padding: 0.25rem 0.4rem ;
    vertical-align: middle;
    background-color: white;
    font-family: 'Rec Mono Semicasual', monospace;
}


#search_box {
    font-family: 'Rec Mono Semicasual', monospace;
    font-size: 1rem;
    padding: 0.25rem 0.3rem ;
}

/* Default to local view. Global will specialize */
.plt_global_only { display: none; }
.plt_local_only { display: block; }

/* ---------------------------------------- */
/* Version */

.versionbox {
    position: absolute;
    float: none;
    top: 0.25rem;
    left: 25rem;
    z-index: 11000;
    height: 2em;
    font-size: 70%;
    font-weight: lighter;
    width: inherit;
    margin: 0;
}
.version, .versionNoNav {
    font-size: inherit;
}
.version:before, .versionNoNav:before {
    content: "v";
}


/* ---------------------------------------- */
/* Margin notes */

/* cancel scribble.css styles: */
.refpara, .refelem {
  position: static;
  float: none;
  height: auto;
  width: auto;
  margin: 0;
}

.refcolumn {
    position: static;
    display: block;
    width: auto;
    font-size: inherit;
    margin: 2rem;
    margin-left: 2rem;
    padding: 0.5em;
    padding-left: 0.75em;
    padding-right: 1em;
    background: hsl(60, 29%, 94%);
    border: 1px solid #ccb;
    border-left: 0.4rem solid #ccb;
}


/* slightly different handling for margin-note* on narrow screens */
@media all and (max-width:1340px) {
     span.refcolumn {
         float: right;
         width: 50%;
         margin-left: 1rem;
         margin-bottom: 0.8rem;   
         margin-top: 1.2rem; 
     }

}

.refcontent, .refcontent p {
    line-height: 1.5;
    margin: 0;
}

.refcontent p + p {
    margin-top: 1em;
}

.refcontent a {
    font-weight: 400;
}

.refpara, .refparaleft {
    top: -1em;
}


@media all and (max-width:600px) {
    .refcolumn {
        margin-left: 0;
        margin-right: 0;
    }
}


@media all and (min-width:1340px) {
    .refcolumn {
        margin: 0 -22.5rem 1rem 0;
        float: right;
        clear: right;
        width: 18rem;
    }
}

.refcontent {
    font-family: 'Taurus Grotesk', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 0 0;
}


.refparaleft, .refelemleft {
    position: relative;
    float: left;
    right: 2em;
    height: 0em;
    width: 13em;
    margin: 0em 0em 0em 0em;
    display: contents;
}

.refcolumnleft {
    background-color: hsl(60, 29%, 94%);
    display: block;
    position: relative;
    width: 13em;
    font-size: 85%;
    border: 0.5em solid hsl(60, 29%, 94%);
    margin: 0 0 0 0;
}


/* ---------------------------------------- */
/* Table of contents, left margin */

.tocset {
    position: fixed;
    z-index: 2;
    overflow-y: auto;
    float: none;
    left: 0;
    top: 0rem;
    bottom: 0;
    width: 14rem;
    padding: 0rem 0.5rem 0.5rem 1.5rem;
    /* background-color: hsl(216, 15%, 70%);
    border-top: 6rem solid hsl(216, 15%, 70%); */
}

.tocset td {
    vertical-align: text-top;
    padding-bottom: 0.4rem;
    padding-left: 0.2rem;
    line-height: 1.1;
    font-family: 'Taurus Grotesk', sans-serif;
}

.tocset td a {
    color: black;
    font-weight: 400;
}


.tocview {
    text-align: left;
    background-color: inherit;
    margin-top: 1em;
}


.tocview td, .tocsub td {
    line-height: 1.3;
}


.tocview table, .tocsub table {
    width: 90%;
}

.tocset td a.tocviewselflink {
    font-weight: lighter;
    font-size: 110%; /* monospaced styles below don't need to enlarge */
}

.tocviewselflink {
    text-decoration: none;
}

.tocsub {
    text-align: left;
    margin-top: 0.5em;
    background-color: inherit;
}

.tocviewlist, .tocsublist {
    margin-left: 0.2em;
    margin-right: 0.2em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
.tocviewlist table {
    font-size: 82%;
}

.tocviewlisttopspace {
    margin-bottom: 1em;
}

.tocviewsublist, .tocviewsublistonly, .tocviewsublisttop, .tocviewsublistbottom {
    margin-left: 0.4em;
    border-left: 1px solid #99a;
    padding-left: 0.8em;
}
.tocviewsublist {
    margin-bottom: 1em;
}
.tocviewsublist table,
.tocviewsublistonly table,
.tocviewsublisttop table,
.tocviewsublistbottom table,
table.tocsublist {
    font-size: 1rem;
}

.tocviewsublist td, 
.tocviewsublistbottom td, 
.tocviewsublisttop td, 
.tocsub td,
.tocviewsublistonly td {
    font-size: 90%;
}

/* shrink the monospaced text (`stt`) within nav */
.tocviewsublist td .stt, 
.tocviewsublistbottom td .stt, 
.tocviewsublisttop td .stt, 
.tocsub td .stt,
.tocviewsublistonly td .stt {
    font-size: 95%;
}


.tocviewtoggle {
    font-size: 75%; /* looks better, and avoids bounce when toggling sub-sections due to font alignments */
}

.tocsublist td {
    padding-left: 0.5rem;
    padding-top: 0.25rem;
    text-indent: 0;
}

.tocsublinknumber {
    font-size: 100%;
}

.tocsublink {
    font-size: 82%;
    text-decoration: none;
}

.tocsubseclink {
    font-size: 100%;
    text-decoration: none;
}

.tocsubnonseclink {
    font-size: 82%;
    text-decoration: none;
    margin-left: 1rem;
    padding-left: 0;
    display: inline-block;
}

/* the label "on this page" */
.tocsubtitle {
    display: block;
    font-size: 62%;
    font-family: 'Taurus Grotesk', sans-serif;
    font-weight: bolder;
    font-style: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0.5em;
}

.toptoclink {
    font-weight: bold;
    font-size: 110%;
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
    display: inline-block;
}

.toclink {
    font-size: inherit;
}

/* ---------------------------------------- */
/* Some inline styles */

.indexlink {
    text-decoration: none;
}

pre {
  margin-left: 2em;
}

blockquote {
  margin-left: 2em;
  margin-right: 2em;
  margin-bottom: 1em;
}

.SCodeFlow {
    border-left: 1px dotted black;
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0em;
    margin-right: 2em;
    white-space: nowrap;
    line-height: 1.5;
}

.SCodeFlow img {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* put a little air between lines of code sample */
/* Fira Mono appears taller than Source Code Pro */
.SCodeFlow td {
    padding-bottom: 1px;
}

.boxed {
    margin: 0;
    margin-top: 2em;
    padding: 0.25em;
    padding-top: 0.3em;
    padding-bottom: 0.4em;
    background: #f3f3f3;
    box-sizing:border-box;
    border-top: 1px solid #ccc;
    background: linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(246, 50%, 96%) 100%);
}

blockquote > blockquote.SVInsetFlow {
/* resolves issue in e.g. /reference/notation.html */
    margin-top: 0em;
}

.leftindent .SVInsetFlow { /* see e.g. section 4.5 of Racket Guide */
    margin-top: 1em;
    margin-bottom: 1em;
}

.SVInsetFlow a, .SCodeFlow a {
    color: #07A;
}

.SubFlow {
    display: block;
    margin: 0em;
}

.boxed {
    width: 100%;
    background-color: inherit;
}

.techoutside       { text-decoration: none; }

.SAuthorListBox {
    position: static;
    float: none;
    font-family: 'Taurus Grotesk', sans-serif;
    font-size: 110%;
    margin-top: 1rem;
    margin-bottom: 2rem;
    width: 30rem;
    height: auto;
}

.author > a { /* email links within author block */
    font-weight: inherit;
    color: inherit;
}

.SAuthorList {
    font-size: 82%;
}
.SAuthorList:before {
    content: "by ";
}
.author {
    display: inline;
    white-space: nowrap;
}

/* phone + tablet styles */

@media all and (max-width:720px){


    @media all and (max-width:720px){

        @media all {html {font-size: 15px;}}
        @media all and (max-width:700px){html {font-size: 14px;}}
        @media all and (max-width:630px){html {font-size: 13px;}}
        @media all and (max-width:610px){html {font-size: 12px;}}
        @media all and (max-width:550px){html {font-size: 11px;}}
        @media all and (max-width:520px){html {font-size: 10px;}}

        .navsettop, .navsetbottom {
            display: flex;
            position: absolute;
            width: 100%;
            height: 4rem;
            border: 0;
            background-color: hsl(216, 15%, 70%);
            align-items: center;
        }

        .tocsetoverlay .navsettop {
            position: fixed;
        }

        .navleft {
            flex: 1;
        }

        .searchform {
            display: inline;
            border: 0;
        }

        .searchbox {
            margin-top: 0;
            margin-bottom: 0;
        }

        .navleft .tocsettoggle {
            display: initial;
        }

        .navright {
            margin-right: 1.3rem;
            border: 0px solid red;
        }

        .navsetbottom {
            display: block;
            margin-top: 8rem;
        }

        .tocset {
            display: none;
            border-top-width: 4rem;
        }

        .tocsetoverlay .tocset {
            display: block;
        }

        .versionbox {
            top: 4.5rem;
            left: 1rem; /* same distance as main-column */
            z-index: 1;
            height: 2em;
            font-size: 70%;
            font-weight: lighter;
        }


        .maincolumn {
            margin-left: 1em;
            margin-top: 7rem;
            margin-bottom: 0rem;
        }

    }

}

/* print styles : hide the navigation elements */
@media print {
    .tocset,
    .navsettop,
    .navsetbottom { display: none; }
    .maincolumn {
        width: auto;
        margin-right: 13em;
        margin-left: 0;
    }
}

/* See the beginning of "manual.css". */

/* Monospace: */

.RktIn, .RktRdr, .RktPn, .RktMeta,
.RktMod, .RktKw, .RktVar, .RktSym,
.RktRes, .RktOut, .RktCmt, .RktVal,
.RktBlk, .RktErr {
  font-family: 'Rec Mono Semicasual', monospace;
  white-space: inherit;
  font-size: 1rem;
  line-height: 1.5;

}

/* this selctor grabs the first linked Racket symbol
in a definition box (i.e., the symbol being defined) */
a.RktValDef, a.RktStxDef, a.RktSymDef,
span.RktValDef, span.RktStxDef, span.RktSymDef
{
    font-size: 1.1rem;
    color: black;
    font-weight: 700;
}


.inheritedlbl {
  font-family: 'Taurus Grotesk', sans-serif;
}

.RBackgroundLabelInner {
  font-family: inherit;
}

/* ---------------------------------------- */
/* Inherited methods, left margin */

.inherited {
  width: 95%;
  margin-top: 0.5em;
  text-align: left;
  background-color: inherit;
}

.inherited td {
  font-size: 82%;
  padding-left: 0.5rem;
  line-height: 1.3;
  text-indent: 0;
  padding-right: 0;
}

.inheritedlbl {
  font-style: normal;
}

/* ---------------------------------------- */
/* Racket text styles */

.RktIn {
  color: #cc6633;
  background-color: #eee;
  white-space: pre;
}

.RktInBG {
  background-color: #eee;
}


.refcolumn .RktInBG {
  background-color: white;
}

.RktRdr {
}

.RktPn {
  color: #843c24;
}

.RktMeta {
  color: black;
}

.RktMod {
  color: inherit;
}

.RktOpt {
  color: black;
  font-style: italic;
}

.RktKw {
  color: black;
}

.RktErr {
  color: red;
  font-style: italic;
  font-weight: 400;
}

.RktVar {
    position: relative;
    left: -1px; font-style: italic;
    color: #444;
}

.SVInsetFlow .RktVar {
    font-weight: 400;
    color: #444;
}


.RktSym {
   color: inherit;
}



.RktValLink, .RktStxLink, .RktModLink {
  text-decoration: none;
    color: #07A;
    font-size: 1rem;
}

/* for syntax links within headings */
h2 a.RktStxLink, h3 a.RktStxLink, h4 a.RktStxLink, h5 a.RktStxLink,
h2 a.RktValLink, h3 a.RktValLink, h4 a.RktValLink, h5 a.RktValLink,
h2 .RktSym, h3 .RktSym, h4 .RktSym, h5 .RktSym,
h2 .RktMod, h3 .RktMod, h4 .RktMod, h5 .RktMod,
h2 .RktVal, h3 .RktVal, h4 .RktVal, h5 .RktVal,
h2 .RktPn, h3 .RktPn, h4 .RktPn, h5 .RktPn {
    color: #333;
    font-size: 1.50rem;
    font-weight: 400;
}

.toptoclink .RktStxLink, .toclink .RktStxLink,
.toptoclink .RktValLink, .toclink .RktValLink,
.toptoclink .RktModLink, .toclink .RktModLink {
    color: inherit;
}

.tocset .RktValLink, .tocset .RktStxLink, .tocset .RktModLink, .tocset .RktSym {
    color: black;
    font-weight: 400;
    font-size: 0.9rem;
}

.tocset td a.tocviewselflink .RktValLink,
.tocset td a.tocviewselflink .RktStxLink,
.tocset td a.tocviewselflink .RktMod,
.tocset td a.tocviewselflink .RktSym {
    font-weight: lighter;
    color: white;
}


.RktRes {
  color: #0000af;
}

.RktOut {
  color: #960096;
}

.RktCmt {
  color: #c2741f;
}

.RktVal {
  color: #228b22;
}

/* ---------------------------------------- */
/* Some inline styles */

.together { /* for definitions grouped together in one box */
  width: 100%;
  border-top: 2px solid white;
}

tbody > tr:first-child > td > .together {
  border-top: 0px; /* erase border on first instance of together */
}

.RktBlk {
  white-space: pre;
  text-align: left;
}

.highlighted {
    font-size: 1rem;
    background-color: #fee;
}

.defmodule {
    font-family: 'Taurus Grotesk', monospace;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
    background-color: #ebf0f4;
}

.defmodule a {
    color: #444;
}


.defmodule td span.hspace:first-child {
  position: absolute;
  width: 0;
  display: inline-block;
}

.defmodule .RpackageSpec .Smaller,
.defmodule .RpackageSpec .stt {
    font-size: 1rem;
}

/* make parens ordinary color in defmodule */
.defmodule .RktPn {
    color: inherit;
}

.specgrammar {
    float: none;
    padding-left: 1em;
}


.RBibliography td {
  vertical-align: text-top;
  padding-top: 1em;
}

.leftindent {
 margin-left: 2rem;
 margin-right: 0em;
}

.insetpara {
 margin-left: 1em;
 margin-right: 1em;
}

.SCodeFlow .Rfilebox {
    margin-left: -1em; /* see 17.2 of guide, module languages */
}

.Rfiletitle {
  text-align: right;
  background-color: #eee;
}

.SCodeFlow .Rfiletitle {
  border-top: 1px dotted gray;
  border-right: 1px dotted gray;
}


.Rfilename {
  border-top: 0;
  border-right: 0;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: inherit;
}

.Rfilecontent {
  margin: 0.5em;
}

.RpackageSpec {
  padding-right: 0;
}

/* ---------------------------------------- */
/* For background labels */

.RBackgroundLabel {
   float: right;
   width: 0px;
   height: 0px;
}

.RBackgroundLabelInner {
   position: relative;
   width: 25em;
   left: -25.5em;
   top: 0.20rem; /* sensitive to monospaced font choice */
   text-align: right;
   z-index: 0;
   font-weight: 300;
   font-family: 'Rec Mono Semicasual', monospace;
   font-size: 0.9rem;
    color: gray;
}


.RpackageSpec .Smaller {
   font-weight: 300;
   font-family: 'Rec Mono Semicasual', monospace;
   font-size: 0.9rem;
}

.RForeground {
   position: relative;
   left: 0px;
   top: 0px;
   z-index: 1;
}

/* ---------------------------------------- */
/* For section source modules & tags */

.RPartExplain {
    background: #eee;
    font-size: 0.9rem;
    margin-top: 0.2rem;
    padding: 0.2rem;
    text-align: left;
}