styles.css

/* ============================================

Colour scheme:
    Navbar:
        - Background #333
        - Text, #fff
        - Active text, #555
        - Highlight, #a61616
        - Dropdown text, #000
        - Dropdown background, #f9f9f9
        - Dropdown highlight, #ddd
        - Dropdown shadow, rgba(0,0,0,0.2);

    Content:
        - Links
            - Background, #c8c8c8 (hover - rgba(0,0,0,.1))
            - Text, #555 (hover - #000)
        - Inline code
            - Background, #c7254e
            - Text, #f9f2f4
        - Code wrapper
            - Background, #fafafa
            - Border, #aaa
            - Text, #555

Font scheme:
    - Default, 50%/1.5em ptserifcustom, Georgia, serif
    - Main title, italic 2em/1.125em hoefler text, Georgia, serif;
    - Code, Menlo, Monaco, Consolas, monospace

============================================ */


body {
    font: 50%/1.5em ptserifcustom, Georgia, serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}





/* Make the content sit in a minimal space in the middle of the screen,
and stylings that only apply within in it, i.e. not in the navbar */
#contentWrapper {
    margin: 0 auto;
    padding: 3em;
}

    /*For small screens, omit the stylistic bars at the side, to make text
    readable*/
    @media (min-width: 700px) {
        #contentWrapper {
            width: 50%;
        }
    }

    @media (max-width: 500px) {
        #contentWrapper {
            width: 80%;
        }
    }

#contentWrapper a {
  border-bottom: 1px solid #c8c8c8;
  text-decoration: none;
  color: #555;
}

#contentWrapper a:hover {
  border-bottom: 1px solid #000;
  background: rgba(0,0,0,.1);
  color: #000;
}





/* Make a large title with stylised text, headings and subheadings*/
.title {
    font: italic 2em/1.125em hoefler text, Georgia, serif;
    font-style: italic;
    font-size: 4em;
}

.title.hidden {
    display: none;
    visibility: hidden;
}

/* Make headings */
.heading {
    font-style: normal;
    font-weight: 400;
}

.subheading {
    font-style: normal;
    font-weight: 300;
}

.details {
    text-align: right;
}





/* Add the option of having a large leading letter (dropcap) and an underbar*/
.dropcap {
    line-height: 1.5em;
    font-weight:normal;
}

.dropcap:first-letter {
    font-weight: bold;
    font: 3em/.7em Georgia, serif;
    margin: 0.15em .15em .1em 0;
    float: left;
}

.underbar {
    border-bottom: 1px solid #444;
}






/* Make a table of contents */
#tableOfContents ul {
    margin-left: 1.5em;
    line-height: 1.75em;
    list-style-type: circle;
}





/* Make a image centered on the page, and a way to caption it*/

.centeredImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.imgCaption {
    width:100%;
    text-align:center;
}





/* Make wrappers for inline code and boxes for out of line code*/
code {
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    padding: 2px;
}

.codeFont { font-family: Menlo, Monaco, Consolas, monospace; }

.codeBox {
    color: #555;
    font-family: Menlo, Monaco, Consolas, monospace;
    border-radius: 2px;
    background: #fafafa;
    border: 1px solid #aaa;
    padding: 1em 0 1em 2em;
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.shell {
    /* Emulate the dollar showing a shell command, but make it unselectable
    in order to make copying code easier */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-right: 1em;
}

textarea {
    width: 100%;
}


#copybutton {
  font-size:25px;
  padding-top:5px;
  padding-bottom:5px;
  width: 100%;
}







/* Make a navbar, which changes colour when links are hovered over, and
allows drop-down menus */
.navbar {
    overflow: hidden;
    background-color: #333;
}

.navbar a {
    float: left;
    color: #fff;
    text-align: center;
    padding: 0.8em 1em;
    text-decoration: none;
}

.navbar .active {
    background-color: #555;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropdownButton {
    font-size: 1em;
    border: none;
    outline: none;
    color: #fff;
    padding: 1em 1em;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropdownButton {
    background-color: #a61616;
}

.dropdownContent {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdownContent a {
    float: none;
    color: #000;
    padding: 0.75em 1em;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdownContent a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdownContent {
    display: block;
}