sugar/doc/manual-style.css

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

@import url("manual-fonts.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: 'Source Code Pro', monospace;
    white-space: inherit;
    font-size: 1rem;
}

.stt {
    font-weight: 500;
}

h2 .stt {
    font-size: 2.7rem;
}

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

.RpackageSpec .stt {
    font-weight: 300;
    font-family: 'Source Code Pro';
    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: 'Charter', serif;
    font-size: 1.18rem;
}


/* Sans-serif: */
.version, .versionNoNav, .ssansserif {
    font-family: 'Fira', sans-serif;
}
.ssansserif {
    font-family: 'Fira';
    font-weight: 500;
    font-size: 0.9em;
}

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

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

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


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

h1, h2, h3, h4, h5, h6, h7, h8 {
    font-family: 'Fira';
    font-weight: 300;
    font-size: 1.6rem;
    color: #333;
    margin-top: inherit;
    margin-bottom: 1rem;
    line-height: 1.25;
    -moz-font-feature-settings: 'tnum=1';
    -moz-font-feature-settings: 'tnum' 1;
    -webkit-font-feature-settings: 'tnum' 1;
    -o-font-feature-settings: 'tnum' 1;
    -ms-font-feature-settings: 'tnum' 1;
    font-feature-settings: 'tnum' 1;

}

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



h2 { /* per-page main title */
    font-family: 'Miso';
    font-weight: bold;
    margin-top: 4rem;
    font-size: 3rem;
    line-height: 1.1;
    width: 90%;
}

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

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

body {
    color: black;
    background-color: white;
}

.maincolumn {
    width: auto;
    margin-top: 4rem;
    margin-left: 17rem;
    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;
}


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

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

.navsettop {
    position: absolute;
    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 {
    height: 2rem;
    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: 1rem;
    width: 12rem;
    margin: 1rem;
    padding: 0.25rem;
    vertical-align: middle;
    background-color: white;
}

#search_box {
    font-size: 0.8rem;
}

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

.versionbox {
    position: absolute;
    float: none;
    top: 0.25rem;
    left: 17rem;
    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:1260px) {
     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:1260px) {
    .refcolumn {
        position: absolute;
        left: 66rem; right: 3em;
        margin: 0;
        float: right;
        max-width: 18rem;
    }
}

.refcontent {
    font-family: 'Fira';
    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 -13em;
}

.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: absolute;
    float: none;
    left: 0;
    top: 0rem;
    width: 14rem;
    padding: 7rem 0.5rem 0.5rem 0.5rem;
    background-color: hsl(216, 15%, 70%);
    margin: 0;

}

.tocset td {
    vertical-align: text-top;
    padding-bottom: 0.4rem;
    padding-left: 0.2rem;
    line-height: 1.1;
    font-family: 'Fira';
    -moz-font-feature-settings: 'tnum=1';
    -moz-font-feature-settings: 'tnum' 1;
    -webkit-font-feature-settings: 'tnum' 1;
    -o-font-feature-settings: 'tnum' 1;
    -ms-font-feature-settings: 'tnum' 1;
    font-feature-settings: 'tnum' 1;

}

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


.tocview {
    text-align: left;
    background-color: inherit;
}


.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 */
    color: white;
}

.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%;
}


.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: 'Fira';
    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;
}

.boxed {
    margin: 0;
    margin-top: 2em;
    padding: 0.25em;
    padding-bottom: 0.5em;
    background: #f3f3f3;
    box-sizing:border-box;
    border-top: 1px solid #99b;
    background: hsl(216, 78%, 95%);
    background: -moz-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%);
    background: -webkit-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%);
    background: -o-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%);
    background: -ms-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 100%);
    background: linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 78%, 95%) 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;
    font-weight: 500;
}

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

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

.techoutside       { text-decoration: none; }

.SAuthorListBox {
    position: static;
    float: none;
    font-family: 'Fira';
    font-weight: 300;
    font-size: 110%;
    margin-top: 1rem;
    margin-bottom: 3rem;
    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: block;
            position: absolute;
            width: 100%;
            height: 4rem;
            border: 0;
            background-color: hsl(216, 15%, 70%);
        }

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

        .navright {
            position: absolute;
            right: 1.5rem;
            margin-top: 1rem;
            border: 0px solid red;
        }

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

        .tocset {
            display: none;
        }

        .tocset table, .tocset tbody, .tocset tr, .tocset td {
            display: inline;
        }

        .tocview {
            display: none;
        }

        .tocsub .tocsubtitle {
            display: none;
        }

        .versionbox {
            top: 4.5rem;
            left: 1rem; /* same distance as main-column */
            z-index: 11000;
            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;
    }
}