bootstrappable/static/css/screen.css

@font-face {
    font-family: 'droid_serifregular';
    src: url('DroidSerif-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'linbiolinum';
    src: url('linbiolinum_rah-webfont.woff2') format('woff2'),
         url('linbiolinum_rah-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    height: 100%;
}

html, body {
    font-family: "droid_serifregular", serif;
    text-rendering: optimizelegibility;
    -moz-font-feature-settings: "liga";
    line-height: 140%;
    color: #333;
    background: #fcfbf3; }

@media all {html {font-size: 24px;}}
@media all and (max-width:1000px){html {font-size: 24px;}}
@media all and (max-width:960px){html {font-size: 23px;}}
@media all and (max-width:920px){html {font-size: 22px;}}
@media all and (max-width:880px){html {font-size: 21px;}}
@media all and (max-width:840px){html {font-size: 20px;}}
@media all and (max-width:800px){html {font-size: 19px;}}
@media all and (max-width:760px){html {font-size: 18px;}}

body {
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    min-height: 100%;
}

body .elephly {
    background: #bdc0ac; }

nav#menu {
    box-shadow: 0px 3px 8px #ccc;
    margin-bottom: 1em;
    background: #fff; }

nav#menu ul {
    list-type: none;
    text-align: center;
}

nav#menu ul li {
    display: inline-block;
    padding: 0.5em 1em;
}

nav#menu a, nav#menu a:visited  {
    color: black;
}

nav#menu a.active, a.active:hover {
    color: #ff00ff;
    background: none;
}

/*nav#menu a:hover {
    color: inherited;
    background: none;
}*/

#index {
    padding: 1rem;
    margin-left: 2rem; }
#banner-slim, #banner {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    background: #fff;
    text-align: center; }
    #banner-slim a, #banner a {
        border-bottom: none; }
    #banner img {
        max-width: 1200px;
        min-width: 400px;
        height: auto; }

#banner-slim {
    padding-bottom: 0.3em;
    padding-top: 0.3em; }

#banner-slim a:hover {
    background-color: inherit;
}

footer {
  background-color: #fff;
  box-shadow: 0px -3px 8px #ccc;
  color: #000;
  font-size: 12px;
  margin-top: 3rem;
  padding: 1em;
  text-align: center; }
  footer .highlight {
    color: #ff00ff; }

@media screen and (max-width: 600px) {
  #index {
      text-align: center; }}

#page {
    flex: 1;
}

/* drop caps */

#page p:first-child:first-letter {
    font-size: 5em;
    float: left;
    color: #ff00ff;
    line-height: 1em;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
}
#page ul {
  list-style: square outside;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; }

div.time {
  color: #9ba0a7;
  margin-top: -2.8rem;
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  font-weight: normal; }

div.figure {
  text-align: center;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 0 0.4em 0 #888;
  margin: 1rem;
  padding: 1rem; }
  @media screen and (min-width: 600px) {
    div.figure {
      float: right; }}
  @media screen and (max-width: 600px) {
    div.figure {
      float: none;
      clear: both; }}
  div#page div.figure p.caption {
    width: auto;
    text-align: center;
    font-size: 0.8rem; }

div.footnotes {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dotted #aaaaaa; }

h1 {
  color: #000;
  clear: both;
  line-height: 125%;
  text-align: center;
  margin-top: 1.3rem;
  margin-bottom: 1.3rem;
  display: block;
  font-size: 2.2rem;
  font-weight: 400; }

@media screen and (max-width: 600px) {
    h1:first-child {
        margin-top: 1rem; }}

* + h2 {
  margin-top: 1.8rem; }

* + h3 {
  margin-top: 1.5rem; }

h2, h3 {
  color: #333;
  margin-bottom: 0.5em;
  clear: both; }

h2 {
  text-align: center;
  font-size: 1.2rem;
  padding-bottom: 0.3em;
  letter-spacing: -0.02em; }

h3 {
  font-family: "Droid Sans", Arial, sans-serif;
  font-size: 1em;
  font-weight: bold; }

a {
  color: #0aa;
  text-decoration: none; }
  a:visited {
    color: #808; }
  a:hover {
    color: #000;
    background: #ffff00; }

strong {
  font-weight: bold; }

div#page {
    overflow: visible;
    max-width: 32rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem; }
  @media only screen and (min-width: 600px) {
    div#page {
        margin-left: 4rem;
        margin-right: 4rem; }}
  @media only screen and (min-width: 1024px) {
    div#page {
        margin-left: auto;
        margin-right: auto; }}
  div#page ul {
    max-width: 32rem; }
  div#page p {
    margin-bottom: 0;
    text-align: justify;
    max-width: 32rem; }
    div#page p img, div#page p video {
        max-width: 100%;
      display: inline;
      float: right;
      margin-left: 0.8rem;
      -moz-border-radius: 15px;
      border-radius: 15px; }
  div#page p.back {
    margin-top: 1.5rem;
    width: 50%; }
  div#page blockquote {
      margin-left: 3rem;
      margin-right: 3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-style: italic; }
  div#page img.full {
      width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    position: static;
    float: none;
    clear: both;
    padding: 0;
    display: block;
    -moz-border-radius: 15px;
    border-radius: 15px; }
  div#page img.stretch {
    width: 100%; }

p + p, div.figure + p {
  text-indent: .5rem;
  margin-top: 0.4rem; }

pre {
  margin: 1rem;
  padding: 1rem;
  display: inline-block;
  border-radius: 3px;
  background: #444; }

pre code {
  color: #aaff00;
  background: transparent; }

span.code, code {
  font-family: "Envy Code R", "Inconsolata", "Consolas", "Courier New", monospace;
  color: #111;
  background: #dedede; }

span.code {
  font-size: 0.85rem;
  border-bottom: #888;
  padding: .15rem; }

br {
  clear: left; }

em {
  font-style: italic; }