style.css

p,ul,li,div,span,h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}

body
{
    margin: 0 auto;
    width: 100%;
    font-family: Lato, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1em;
    line-height: 1.5em;
}

ul,    ol    { list-style-position: inside; margin: 5px; }
ul li, ol li { padding: 3px; }

h1 { margin: 1em 0; font-size: 180%; }
h2 { margin: 0.7em 0; font-size: 150%; }
h3 { margin: 0.4em 0; font-size: 120%; }

table { text-align: left; border-collapse: collapse; }
table tr td, table tr th { padding: 0.5em; border: 1px solid black; }

.hidden { display: none; }

div#timeline-container h1
{
   padding: 0.5em;
}

ul#timeline
{
  list-style-position: outside;
  list-style-type: none;
  margin-left: 10px; 
}
#timeline > li
{
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 1.2em;
}
#timeline .timeline-date
{
  text-align: right;
  width: 110px;
  padding: 0.3em 15px 0 0;
  float: left;
  margin: 0;
}
#timeline .timeline-content
{
  padding: 0.3em 0;
  margin: 0;
  width: 75%;
  float: left;
  border-left: 3px #e5e5d1 solid;
  padding-left: 15px;
  min-height: 2.4em;
}
#timeline .timeline-content:before
{
  content: '';
  width: 12px;
  height: 12px;
  background: black;
  position: absolute;
  left: 120px;
  top: 5px;
  border-radius: 100%;
  margin: 0.3em 0;
}

p { margin-bottom: 1em; }

a { color: #BF1717; text-decoration: none; }
a:hover { color: #891010; }

a.reference { font-size: 80%; }

div#main
{
    width: 100%;
    box-sizing: border-box;
    padding: 0 2em;
}

div#content, div#appendix, div#image
{
    margin: 1em 0;
}

div#content
{
    float: left;
    width: 55%;
}

div#appendix, div#image
{
    float: left;
    width: 32%;
    box-sizing: border-box;
    padding-left: 2em;
}

@media screen and (max-width: 1000px)  {
    div#content, div#appendix, div#image {
        width: 100%;  
        float: none;
    }    
}

div#image img { width: 100%; }

div#navigation, div#footer
{
    padding: 1em;
    background-color: #BBB;
}

div.meta
{
    padding: 1em 0;
    max-width: 1024px;
    text-align: justify;
}

div.figure, div.feynman
{
    text-align: center;
    margin: 0 auto;
    padding: 0.8em;
    width: 100%;
}

div.figure img, div.feynman div.diagram
{
    max-width: 500px;
    margin: 0 auto;
}

div.figure img { width: 90%; }
div.figure .label { margin: 0.5em; font-weight: bold; }
div.figure .caption { margin: 0.5em; text-align: left; font-size: 80%; }
span.caption { width: 100%; padding: 0.5em; font-family: inherit; font-size: 80%; line-height: 1.1em; display: block; }

div.spoiler
{
    width:100%;
    border: 1px solid black;
    padding: 5px;
}

div.spoiler div
{
    display: none;
}

div.warning
{
    background-color: #FFDD00;
    padding: 0.75em;
    border: 2px dashed orange;
}

div.quote
{
    margin: 1em 1em 1em 2em;
    padding: 1em;
    border-left: 2px solid gray;
}

div.quote div
{
    font-style: italic;
}

div.quote span.quote
{
    display: inline-block;
    text-align: right;
    width: 100%;
    font-weight: bold;
}

a.note_indicator { font-size:75%; vertical-align:25%; }

div.note
{
    display: none;
    background-color: #FF9D7D;
    border: 1px solid black;
    position: absolute;
    padding: 1em;
    z-index: 1000;
    max-width: 500px;
}

div.text
{
    text-align: justify;
    padding: 0.5em 0;
}

div.interview
{
    text-align: justify;
    padding: 0.5em;
}

div.interview_short
{
    display: flex;
}

div.interview_short img
{
    width: 128px;
    height: 128px;
    margin: 0px 16px 32px 0;
    padding: 0;
}

div.interview_short .description
{
    font-style: italic;
}

div.interview_short .who
{
    font-weight: bold;
}

div.clear
{
    clear: both;
}

ul.share-buttons
{
    list-style: none;
    padding: 0;
    display: inline;
}

ul.share-buttons li
{
    vertical-align: top;
    display: inline;
}