* { margin:0px; padding:0px; }
body { background:#f0f0f0; }

article { width:900px; margin-left:50px; margin-top:50px; }
section { background:white; margin:0px 0px 50px 0px; padding:50px; }
blockquote { margin:20px 30px; }
blockquote p { font-style:italic; }

section.figure { width:140%; }
section.figure img { max-width:100%; }
section.figure.images2 img { max-width:49%; max-height:700px; }
section.figure.listings2 pre { display:inline-block; width:46%; margin-right:2%; }

section.figview { background:inherit; padding:0px; overflow:hidden; height:700px; font-size:0px; margin-bottom:30px; }
section.figview .figbody { margin-left:0%; height:700px; width:100%; white-space:nowrap; transition:margin 500ms ease-in-out; }
section.figview figure { width:100%; height:700px; line-height:700px; display:inline-block; vertical-align:top; text-align:left; }
section.figview figure img { max-width:calc(100% - 100px); max-height:calc(100% - 100px); vertical-align:middle; border:50px solid white; }

section.figpreview { position:relative; }
section.figpreview .move { z-index:1000; position:absolute; height:200px; }
section.figpreview .moveright { right:50px; }
section.figpreview .move i { margin:85px 10px 0px 10px; font-size:30px; color:white; text-shadow:black 0px 0px 20px, black 0px 0px 10px; }

.figlist { overflow-x:scroll; white-space:nowrap; }
.figlist img { max-height:200px; filter:grayscale(1); opacity:0.4; transition:opacity 100ms ease-in-out; margin:0px 10px 0px 0px;  }
.figlist a.selected img { opacity:1; }
.figlist a:hover img { opacity:0.8; }
.figure p.caption { margin-top:15px; font-weight:600; }
.figure p.caption strong { font-weight:800; }

sup.noteref { vertical-align: baseline; position: relative; top: -0.5em; }
sup.noteref a { color:#a0a0a0; font-weight:600; font-size:10pt; text-decoration:none; }

span.note { font-style:normal; }
span.note, .sidenote { position:absolute; left:1000px; font-weight:600; max-width:400px; font-size:11pt; color:#a0a0a0; line-height:1.4em; }
span.note a, .sidenote a { color:#808080; font-weight:300; text-decoration:none; }
span.note a:hover, span.note a:active, .sidenote a:hover, .sidenote p a:active { text-decoration:underline; }
span.note sup { color:#a0a0a0; font-weight:600; font-size:10pt; text-decoration:none; position:absolute; left:-38px; width:30px; display:inline-block; text-align:right; }
.sidenote p { color:#a0a0a0; font-weight:600; font-size:11pt; }
.sidenote i { margin-right:5px; }

.endnotes { display:none; }
.endnotes ul { list-style-type:none; }
.endnotes ul li { margin-left:30px; }
.endnotes ul li sup { width:30px; display:inline-block; text-align:right; margin-left:-40px; margin-right:5px;}

.pub { margin-left:25px; font-weight:200; }
.pub .author { font-weight:400; }
.pub .title { font-weight:600; }

@media only screen and (max-width:1450px) {
  article { width:700px; margin-left:40px; margin-top:40px; }
  span.note, .sidenote { left:780px; max-width:350px; }
}
@media only screen and (max-width:1160px) {
  article { width:600px; margin-left:20px; margin-top:20px; }
  span.note, .sidenote { left:660px; max-width:300px; }
}
@media only screen and (max-width:970px) {
  article { margin-left:10px; margin-top:10px; margin-right:10px; width:calc(100% - 20px); }
  span.note, .sidenote { display:none; }
  section.figure { width:auto; }
  .endnotes { display:block; }
}
@media only screen and (max-width:600px) {
  h1 { font-size:34pt; }
  h1 em { white-space:initial; }
  article { margin-left:0px; margin-right:0px; margin-top:0px; width:100%; }
  section { padding:10px; }
}