html {font-family: sans-serif; font-size: 15px; line-height: 1.2;}

body {min-width: 400px; max-width: 650px; margin: 3em auto;}

h1, h2, h3 {letter-spacing: .125em; font-weight: 600; margin-top: 4em; }
h1 {font-size: 18px; line-height: 1; margin-bottom: .5em;}
h2 {font-size: 16px; line-height: 1.125; margin-bottom: .25em; clear: both;}
h3 {font-size: 14px; line-height: 1.286; margin-bottom: .2em; clear: both;}

p, li, dd, blockquote, figcaption {
  text-align: justify; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
  margin: .5em 0;
}

.showcase { background: #ddd; padding: 1em; margin: 5em 0; clear: both;}
.showcase figcaption {font-size: 14px; line-height: 1.1; margin-top: 2em;}
.before-after { font-size: 24px; text-align: center; line-height: 1.5; }
.before-after code { padding: 0 .5ex; display: block; }
.before-after .before { color: darkred; }
.before-after .after { color: darkgreen; }

header {margin: 0 0 4em 0;}
header h1 {margin: .5em 0 0 0; font-size: 16pt; text-align: center; }
header p {font-size: 16px; margin: .5em 0 0 0; text-align: center;}
header img {width: 250px; margin: 0 auto; display: block;}

.tool-list { margin-left: 1em; }
.tool-list dt {float: left; clear:left; margin-right: 1ex; font-weight: bold; }
.tool-list dd {clear: right; margin-bottom: 1em;}

.author-list {padding: 0; margin: .5em 1em 3em; }
.author-list li {display: inline; margin: 0; white-space: nowrap;}
.author-list li:after {content: ","}
.author-list li:last-child:after {content: ""}
svg {margin: 0 auto; display: block;}

pre {padding-left: 2em; font-size: 16px; font-family: monospace;}

div.column-container > div {width: 25%; float: left; padding: 0 4%}
div.column-container > div > h3 {margin: auto 10px}
div.column-container > div > ul {list-style: inside none; margin: 0; padding: 0;}
div.column-container:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; }
.column-container + .showcase { margin-top: 4em; }

ul {padding-left: 1em;}
a {color: #2A6496; text-decoration: none}
a:hover {text-decoration: underline; color: #295785}

#formula textarea, #formula input { width: 100%; font-size: 125%; background-color: white; border: 1px solid rgba(222, 229, 231, 1); border-radius: 2px; }
#formula textarea { font-family: monospace; height: 7em; }
#input-ranges { margin-top: .1em; }
#input-ranges td {padding-top: .4em; }
.extra-fields { margin-top: 1em; }
.extra-links {
    float: right; margin-top: .2em; cursor: pointer;
}
.extra-links a:after {
     content: "•"; color: black; display: inline-block; padding: 0 1ex;
}
.extra-links a:last-child:after { content: "»"; padding-right: 0;}
#formula .extra-fields label { display: inline-block; width: 20%; line-height: 3; }
#formula .extra-fields input, .extra-fields select { width: 80%; font-size: 100%; }
#errors li { color: #800; }
#formula button[type=submit].hidden { visibility: hidden; height: 0; }
#mathjs-instructions, #lis { margin-top: 3em;}
#mathjs-instructions-test { width: 100%; font-size: 125%; }
input.input-range { width: auto !important; }
.input-range-view { margin-top: 15px; margin-bottom: 15px; }
.input-range-view .varname { font-size: 125%; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { 
    display: none; position: absolute; background-color: #f9f9f9; 
    min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1; }
.dropdown-content div { padding: 5px; }
.dropdown-content div:hover {background-color: #f1f1f1}
.dropdown-content:hover { display: block; }
.dropdown:focus-within .dropdown-content { display: block; }
#warnings li { color: #cc5a2a; }

#crashed {
    border: 3px solid #800;
    background-color: #fdd;
    font-size: 133%;
    padding: 1em;
}

#progress {
    font-size: 14px; font-family: sans-serif; background-color: #f1f1f1;
    padding-left: 0; overflow: scroll; overflow-y: auto;
}
#num-jobs { font-weight: bold; }

.function-list dt { font-weight: bold; float: left; width: 200px; clear: left; margin: 0 1em .5em 1em; }
.function-list dd { clear: right; margin: 0; }
.function-list dd:after { clear: both; height: 1px; display: block; content: "."; visibility: hidden; margin: 0;}

.video { display: block; margin: auto; }
.abstract { padding: 1em 3em; position: relative; }
.abstract:before { content: "“"; font-size: 600%; position: absolute; top: 0; left: 0; font-family: serif; color: #ccc; }
.abstract:after { content: "”"; font-size: 600%; position: absolute; bottom: -.5em; right: 0; font-family: serif; color: #ccc; }
.paper-thumb { width: 30%; float: left; margin: 1em; }
.paper-thumb img { width: 100%; border: 1px solid #ccc; }

#news { list-style: none inside; padding: 0; position: relative; }
#news li { margin-bottom: 12px; margin-left: 100px; }
#news time {
    font-weight: bold; text-align: right;
    position: absolute; left: 0;
    display: block; width: 90px;
}
#news time:after { content: ":"; }
#news .yearmark { border: 0; border-top: 1px solid #bbb; margin: 1em 0; width: 90px; }