Difference between revisions of "Template:Virginia/css/styles"
| (71 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/** | /** | ||
* This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018 | * This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018 | ||
| − | * @version v0. | + | * @version v0.7.3 |
* @link https://github.com/Virginia-iGEM/igem-wikibrick | * @link https://github.com/Virginia-iGEM/igem-wikibrick | ||
* @license MIT | * @license MIT | ||
*/ | */ | ||
| − | + | @charset "UTF-8"; | |
| + | /** | ||
| + | * Based on | ||
| + | * | ||
| + | * - reset.css 2.0 by Eric Meyer | ||
| + | (public domain) | ||
| + | * http://meyerweb.com/eric/tools/css/reset/ | ||
| + | * | ||
| + | * - normalize.css 8.0.0 by Nicolas Gallagher and Jonathan Neal | ||
| + | * (licensed under MIT) | ||
| + | * https://github.com/necolas/normalize.css | ||
| + | * | ||
| + | * - Based on Bootstrap 4 Reboot | ||
| + | * (licensed under MIT) | ||
| + | * https://github.com/twbs/bootstrap | ||
| + | */ | ||
| + | /** | ||
| + | * IE10+ doesn't honor `<meta name="viewport">` in some cases | ||
| + | */ | ||
| + | @import url("https://fonts.googleapis.com/css?family=Open+Sans"); | ||
| + | @import url("https://fonts.googleapis.com/css?family=Poiret+One"); | ||
| + | @import url("https://fonts.googleapis.com/css?family=Montserrat"); | ||
| + | @import url("https://fonts.googleapis.com/css?family=Raleway"); | ||
| + | @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); | ||
| + | @-ms-viewport { | ||
| + | width: device-width; } | ||
| + | |||
| + | /** | ||
| + | * general reset | ||
| + | */ | ||
| + | html, body, div, span, applet, object, iframe, | ||
| + | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| + | a, abbr, acronym, address, big, cite, code, | ||
| + | del, dfn, em, img, ins, kbd, q, s, samp, | ||
| + | small, strike, strong, sub, sup, tt, var, | ||
| + | b, u, i, center, | ||
| + | dl, dt, dd, ol, ul, li, | ||
| + | fieldset, form, label, legend, | ||
| + | table, caption, tbody, tfoot, thead, tr, th, td, | ||
| + | article, aside, canvas, details, embed, | ||
| + | figure, figcaption, footer, header, hgroup, | ||
| + | menu, nav, output, ruby, section, summary, | ||
| + | time, mark, audio, video, main { | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | border: 0; | ||
| + | font-size: 100%; | ||
| + | font: inherit; | ||
| + | vertical-align: baseline; } | ||
| + | |||
| + | /** | ||
| + | * HTML5 display-role reset for older browsers | ||
| + | */ | ||
| + | article, aside, details, figcaption, figure, | ||
| + | footer, header, hgroup, menu, nav, section, | ||
| + | main, summary { | ||
| + | display: block; } | ||
| + | |||
| + | /** | ||
| + | * inherit box model for all elements | ||
| + | */ | ||
| + | *, | ||
| + | *::before, | ||
| + | *::after { | ||
| + | box-sizing: inherit; } | ||
| + | |||
| + | /** | ||
| + | * html root rules | ||
| + | * 1. set border-box for inheritance | ||
| + | * 2. avoid 300ms click delay on touch devices that support the `touch-action` | ||
| + | * CSS property | ||
| + | * 3. Prevent adjustments of font size after orientation changes in IE, on | ||
| + | * Windows Phone and iOS. | ||
| + | * 4. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, | ||
| + | * so we force a non-overlapping, non-auto-hiding scrollbar to counteract. | ||
| + | * 5. Change the default tap highlight to be completely transparent in iOS. | ||
| + | */ | ||
| + | html { | ||
| + | /* 1 */ | ||
| + | box-sizing: border-box; | ||
| + | /* 2 */ | ||
| + | touch-action: manipulation; | ||
| + | /* 3 */ | ||
| + | -webkit-text-size-adjust: 100%; | ||
| + | -ms-text-size-adjust: 100%; | ||
| + | /* 4 */ | ||
| + | -ms-overflow-style: scrollbar; | ||
| + | /* 5 */ | ||
| + | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } | ||
| + | |||
| + | /** | ||
| + | * body rules | ||
| + | * 1. reset line-height to 1 | ||
| + | * 2. set base font-family to sans-serif | ||
| + | */ | ||
| + | body { | ||
| + | /* 1 */ | ||
| + | line-height: 1; | ||
| + | /* 2 */ | ||
| + | font-family: sans-serif; } | ||
| + | |||
| + | /** | ||
| + | * Lists | ||
| + | */ | ||
| + | ol, ul { | ||
| + | list-style: none; } | ||
| + | |||
| + | /** | ||
| + | * Quotes | ||
| + | */ | ||
| + | blockquote, q { | ||
| + | quotes: none; } | ||
| + | |||
| + | blockquote::before, | ||
| + | blockquote::after, | ||
| + | q::before, | ||
| + | q::after { | ||
| + | content: ''; | ||
| + | content: none; } | ||
| + | |||
| + | /** | ||
| + | * Tables | ||
| + | */ | ||
| + | table { | ||
| + | border-collapse: collapse; | ||
| + | border-spacing: 0; } | ||
| + | |||
| + | /** | ||
| + | * Horizontal Lines | ||
| + | * 1. Add the correct box sizing in Firefox. | ||
| + | * 2. Show the overflow in Edge and IE. | ||
| + | */ | ||
| + | hr { | ||
| + | /* 1 */ | ||
| + | box-sizing: content-box; | ||
| + | height: 0; | ||
| + | /* 2 */ | ||
| + | overflow: visible; } | ||
| + | |||
| + | /** | ||
| + | * Preformatted Text | ||
| + | * 1. Correct the inheritance and scaling of font size in all browsers. | ||
| + | * 2. Don't allow content to break outside | ||
| + | * 3. We have @viewport set which causes scrollbars to overlap content in IE11 | ||
| + | * and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to | ||
| + | * counteract. | ||
| + | */ | ||
| + | pre, | ||
| + | code, | ||
| + | kbd, | ||
| + | samp { | ||
| + | /* 1 */ | ||
| + | font-family: monospace, monospace; } | ||
| + | |||
| + | pre { | ||
| + | /* 2 */ | ||
| + | overflow: auto; | ||
| + | /* 3 */ | ||
| + | -ms-overflow-style: scrollbar; } | ||
| + | |||
| + | /** | ||
| + | * Links | ||
| + | * 1. Remove the gray background on active links in IE 10. | ||
| + | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. | ||
| + | */ | ||
| + | a { | ||
| + | /* 1 */ | ||
| + | background-color: transparent; | ||
| + | /* 2 */ | ||
| + | -webkit-text-decoration-skip: objects; } | ||
| + | |||
| + | /** | ||
| + | * 1. Remove the bottom border in Chrome 57- | ||
| + | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | ||
| + | */ | ||
| + | abbr[title] { | ||
| + | /* 1 */ | ||
| + | border-bottom: none; | ||
| + | /* 2 */ | ||
| + | text-decoration: underline; | ||
| + | -webkit-text-decoration: underline dotted; | ||
| + | text-decoration: underline dotted; } | ||
| + | |||
| + | /** | ||
| + | * Add the correct font weight in Chrome, Edge, and Safari. | ||
| + | */ | ||
| + | b, | ||
| + | strong { | ||
| + | font-weight: bolder; } | ||
| + | |||
| + | /** | ||
| + | * Add the correct font size in all browsers. | ||
| + | */ | ||
| + | small { | ||
| + | font-size: 80%; } | ||
| + | |||
| + | /** | ||
| + | * Prevent `sub` and `sup` elements from affecting the line height in | ||
| + | * all browsers. | ||
| + | */ | ||
| + | sub, | ||
| + | sup { | ||
| + | font-size: 75%; | ||
| + | line-height: 0; | ||
| + | position: relative; } | ||
| + | |||
| + | sub { | ||
| + | bottom: -0.25em; } | ||
| + | |||
| + | sup { | ||
| + | top: -0.5em; } | ||
| + | |||
| + | /** | ||
| + | * Remove the border on images inside links in IE 10. | ||
| + | */ | ||
| + | img { | ||
| + | border-style: none; } | ||
| + | |||
| + | /** | ||
| + | * Hide SVG overflow in IE | ||
| + | */ | ||
| + | svg:not(:root) { | ||
| + | overflow: hidden; } | ||
| + | |||
| + | /** | ||
| + | * Remove the default `border-radius` that macOS Chrome adds. | ||
| + | * Details at https://github.com/twbs/bootstrap/issues/24093 | ||
| + | */ | ||
| + | button { | ||
| + | border-radius: 0; } | ||
| + | |||
| + | /** | ||
| + | * Work around a Firefox/IE bug where the transparent `button` background | ||
| + | * results in a loss of the default `button` focus styles. | ||
| + | * Credit: https://github.com/suitcss/base/ | ||
| + | */ | ||
| + | button:focus { | ||
| + | outline: 1px dotted; | ||
| + | outline: 5px auto -webkit-focus-ring-color; } | ||
| + | |||
| + | /** | ||
| + | * form element resets | ||
| + | * 1. Remove the margin in Firefox and Safari | ||
| + | * 2. inherit font rules | ||
| + | */ | ||
| + | input, | ||
| + | button, | ||
| + | select, | ||
| + | optgroup, | ||
| + | textarea { | ||
| + | /* 1 */ | ||
| + | margin: 0; | ||
| + | /* 2 */ | ||
| + | font-family: inherit; | ||
| + | font-size: inherit; | ||
| + | line-height: inherit; } | ||
| + | |||
| + | /** | ||
| + | * Remove the inheritance of text transform in Firefox | ||
| + | */ | ||
| + | button, | ||
| + | select { | ||
| + | text-transform: none; } | ||
| + | |||
| + | /** | ||
| + | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` | ||
| + | * controls in Android 4. | ||
| + | * 2. Correct the inability to style clickable types in iOS and Safari. | ||
| + | */ | ||
| + | button, | ||
| + | [type="reset"], | ||
| + | [type="submit"], | ||
| + | html [type="button"] { | ||
| + | /* 2 */ | ||
| + | -webkit-appearance: button; } | ||
| + | |||
| + | /** | ||
| + | * Remove the default appearance of temporal inputs to avoid a Mobile Safari | ||
| + | * bug where setting a custom line-height prevents text from being vertically | ||
| + | * centered within the input. | ||
| + | * See https://bugs.webkit.org/show_bug.cgi?id=139848 | ||
| + | * and https://github.com/twbs/bootstrap/issues/11266 | ||
| + | */ | ||
| + | input[type="date"], | ||
| + | input[type="time"], | ||
| + | input[type="datetime-local"], | ||
| + | input[type="month"] { | ||
| + | -webkit-appearance: listbox; } | ||
| + | |||
| + | /** | ||
| + | * 1. Remove the default vertical scrollbar in IE. | ||
| + | * 2. Textareas should really only resize vertically so they don't break their | ||
| + | * (horizontal) containers. | ||
| + | */ | ||
| + | textarea { | ||
| + | overflow: auto; | ||
| + | resize: vertical; } | ||
| + | |||
| + | /** | ||
| + | * Show the overflow in IE. | ||
| + | */ | ||
| + | button, | ||
| + | input { | ||
| + | overflow: visible; } | ||
| + | |||
| + | /** | ||
| + | * Remove the inheritance of text transform in Edge, Firefox, and IE. | ||
| + | */ | ||
| + | button, | ||
| + | select { | ||
| + | text-transform: none; } | ||
| + | |||
| + | /** | ||
| + | * Remove the inner border and padding in Firefox. | ||
| + | */ | ||
| + | button::-moz-focus-inner, | ||
| + | [type="button"]::-moz-focus-inner, | ||
| + | [type="reset"]::-moz-focus-inner, | ||
| + | [type="submit"]::-moz-focus-inner { | ||
| + | border-style: none; | ||
| + | padding: 0; } | ||
| + | |||
| + | /** | ||
| + | * Restore the focus styles unset by the previous rule. | ||
| + | */ | ||
| + | button:-moz-focusring, | ||
| + | [type="button"]:-moz-focusring, | ||
| + | [type="reset"]:-moz-focusring, | ||
| + | [type="submit"]:-moz-focusring { | ||
| + | outline: 1px dotted ButtonText; } | ||
| + | |||
| + | /** | ||
| + | * Suppress the focus outline on elements that cannot be accessed via keyboard. | ||
| + | * This prevents an unwanted focus outline from appearing around elements that | ||
| + | * might still respond to pointer events. | ||
| + | * Credit: https://github.com/suitcss/base | ||
| + | */ | ||
| + | [tabindex="-1"]:focus { | ||
| + | outline: 0 !important; } | ||
| + | |||
| + | /** | ||
| + | * Browsers set a default `min-width: min-content` on fieldsets, | ||
| + | * unlike e.g. `<div>`s, which have `min-width: 0` by default. | ||
| + | * So we reset that to ensure fieldsets behave more like a standard block element. | ||
| + | * See https://github.com/twbs/bootstrap/issues/12359 | ||
| + | * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements | ||
| + | */ | ||
| + | fieldset { | ||
| + | min-width: 0; } | ||
| + | |||
| + | /** | ||
| + | * 1. Correct the text wrapping in Edge and IE. | ||
| + | * 2. Correct the color inheritance from `fieldset` elements in IE. | ||
| + | * 3. Set display to block for all browsers | ||
| + | */ | ||
| + | legend { | ||
| + | /* 1 */ | ||
| + | max-width: 100%; | ||
| + | white-space: normal; | ||
| + | /* 2 */ | ||
| + | color: inherit; | ||
| + | /* 3 */ | ||
| + | display: block; } | ||
| + | |||
| + | /** | ||
| + | * Add the correct vertical alignment in Chrome, Firefox, and Opera. | ||
| + | */ | ||
| + | progress { | ||
| + | vertical-align: baseline; } | ||
| + | |||
| + | /** | ||
| + | * Remove the default vertical scrollbar in IE 10+. | ||
| + | */ | ||
| + | textarea { | ||
| + | overflow: auto; } | ||
| + | |||
| + | /** | ||
| + | * 1. Add the correct box sizing in IE 10. | ||
| + | * 2. Remove the padding in IE 10. | ||
| + | */ | ||
| + | [type="checkbox"], | ||
| + | [type="radio"] { | ||
| + | /* 1 */ | ||
| + | box-sizing: border-box; | ||
| + | /* 2 */ | ||
| + | padding: 0; } | ||
| + | |||
| + | /** | ||
| + | * Correct the cursor style of increment and decrement buttons in Chrome. | ||
| + | */ | ||
| + | [type="number"]::-webkit-inner-spin-button, | ||
| + | [type="number"]::-webkit-outer-spin-button { | ||
| + | height: auto; } | ||
| + | |||
| + | /** | ||
| + | * 1. Correct the odd appearance in Chrome and Safari. | ||
| + | * 2. Correct the outline style in Safari. | ||
| + | */ | ||
| + | [type="search"] { | ||
| + | /* 1 */ | ||
| + | -webkit-appearance: textfield; | ||
| + | /* 2 */ | ||
| + | outline-offset: -2px; } | ||
| + | |||
| + | /** | ||
| + | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. | ||
| + | */ | ||
| + | [type="search"]::-webkit-search-cancel-button, | ||
| + | [type="search"]::-webkit-search-decoration { | ||
| + | -webkit-appearance: none; } | ||
| + | |||
| + | /** | ||
| + | * 1. Correct the inability to style clickable types in iOS and Safari. | ||
| + | * 2. Change font properties to `inherit` in Safari. | ||
| + | */ | ||
| + | ::-webkit-file-upload-button { | ||
| + | /* 1 */ | ||
| + | -webkit-appearance: button; | ||
| + | /* 2 */ | ||
| + | font: inherit; } | ||
| + | |||
| + | /** | ||
| + | * Add the correct display in IE 10+. | ||
| + | */ | ||
| + | template { | ||
| + | display: none; } | ||
| + | |||
| + | [hidden] { | ||
| + | display: none; } | ||
| + | |||
| + | /* Override iGEM wiki settings, removing everything but the top navbar. */ | ||
| + | /*Taken from 2011 SDU Denmark iGEM page*/ | ||
| + | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | ||
| + | display: none; } | ||
| + | |||
| + | #top-section { | ||
| + | border: none; | ||
| + | height: 0px; } | ||
| + | |||
| + | /* Removes "teams" from the menubar */ | ||
| + | #menubar > ul > li:last-child { | ||
| + | display: none; } | ||
| + | |||
| + | /* Resizes the menubar to fix the links (default is 400px) */ | ||
| + | #menubar { | ||
| + | width: auto; } | ||
| + | |||
| + | ul { | ||
| + | margin: 0 !important; } | ||
| + | |||
| + | body { | ||
| + | margin: 10px 0 0 0; | ||
| + | padding: 0; } | ||
| + | |||
| + | #top-section { | ||
| + | width: 965px; | ||
| + | height: 0; | ||
| + | margin: 0 auto; | ||
| + | padding: 0; | ||
| + | border: none; } | ||
| + | |||
| + | #menubar { | ||
| + | font-size: 65%; | ||
| + | top: -14px; } | ||
| + | |||
| + | .left-menu:hover { | ||
| + | background-color: transparent; } | ||
| + | |||
| + | #menubar li a { | ||
| + | background-color: transparent; } | ||
| + | |||
| + | #menubar:hover { | ||
| + | color: white; } | ||
| + | |||
| + | #menubar li a { | ||
| + | color: transparent; } | ||
| + | |||
| + | #menubar:hover li a { | ||
| + | color: white; } | ||
| + | |||
| + | #sideMenu, | ||
| + | #top_title { | ||
| + | display: none; } | ||
| + | |||
| + | #content { | ||
| + | width: 100vw; | ||
| + | padding: 0px; | ||
| + | border: none; | ||
| + | color: black; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | background-color: #fff; | ||
| + | position: relative; } | ||
| + | |||
| + | #globalWrapper { | ||
| + | font-size: inherit; | ||
| + | padding-bottom: 0; } | ||
| + | |||
| + | #top_menu_under { | ||
| + | height: 0px; } | ||
| + | |||
| + | ul { | ||
| + | list-style-image: none; | ||
| + | /* removes the iGEM wiki bullets */ | ||
| + | padding: 0; | ||
| + | margin: 0; } | ||
| + | |||
| + | #mw-content-text > p { | ||
| + | width: 0px; | ||
| + | height: 0px; } | ||
| + | |||
| + | #igem-navbar-placeholder { | ||
| + | height: 16px !important; | ||
| + | position: fixed !important; | ||
| + | top: 0 !important; | ||
| + | display: block !important; | ||
| + | background-color: #383838 !important; | ||
| + | border-bottom: solid black 2px !important; | ||
| + | color: white !important; | ||
| + | z-index: 99999 !important; | ||
| + | width: 100% !important; | ||
| + | font-size: 0.75em !important; | ||
| + | margin: 0 !important; | ||
| + | padding: 0 !important; } | ||
| + | #igem-navbar-placeholder p { | ||
| + | margin: 0 !important; } | ||
| + | |||
| + | .MathJax nobr > span.math > span { | ||
| + | border-left-width: 0 !important; } | ||
| + | |||
| + | /* | ||
| + | @font-face { | ||
| + | font-family: "Open Sans"; | ||
| + | src: url("/fonts/OpenSans/OpenSans-Regular.ttf"); | ||
| + | font-weight: normal; | ||
| + | font-style: normal; | ||
| + | } | ||
| + | @font-face { | ||
| + | font-family: "Open Sans"; | ||
| + | src: url("/fonts/OpenSans/OpenSans-Bold.ttf"); | ||
| + | font-weight: bold; | ||
| + | font-style: normal; | ||
| + | } | ||
| + | @font-face { | ||
| + | font-family: "Open Sans"; | ||
| + | src: url("/fonts/OpenSans/OpenSans-Italic.ttf"); | ||
| + | font-weight: normal; | ||
| + | font-style: italic; | ||
| + | } | ||
| + | @font-face { | ||
| + | font-family: "Open Sans"; | ||
| + | src: url("/fonts/OpenSans/OpenSans-BoldItalic.ttf"); | ||
| + | font-weight: bold; | ||
| + | font-style: italic; | ||
| + | } | ||
| + | */ | ||
| + | /*$background-light: #ffffff;*/ | ||
| + | body { | ||
| + | margin: 0; } | ||
| + | |||
| + | .row { | ||
| + | display: flex; | ||
| + | flex-direction: row; | ||
| + | flex-wrap: wrap; | ||
| + | justify-content: center; | ||
| + | padding: 5px; } | ||
| + | |||
| + | .grid-selection { | ||
| + | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | ||
| + | height: 500px; | ||
| + | margin: 10px; | ||
| + | padding: 20px; | ||
| + | position: relative; | ||
| + | width: 350px; | ||
| + | background-color: #202020 !important; | ||
| + | color: #fffefb !important; } | ||
| + | .grid-selection h1, .grid-selection h2, .grid-selection h3, .grid-selection h4, .grid-selection h5, .grid-selection h6 { | ||
| + | text-align: center; | ||
| + | margin: 0 !important; | ||
| + | color: #fffefb !important; } | ||
| + | .grid-selection p { | ||
| + | border: hidden; | ||
| + | color: #fffefb !important; | ||
| + | padding: 15px 32px; | ||
| + | text-align: center; | ||
| + | padding: 0 !important; | ||
| + | margin: 1em !important; } | ||
| + | .grid-selection .container { | ||
| + | text-align: middle; } | ||
| + | .grid-selection img { | ||
| + | max-width: 70% !important; | ||
| + | margin: 0 auto !important; | ||
| + | display: block; | ||
| + | position: relative; } | ||
| + | .grid-selection a.buttonoverview { | ||
| + | background-color: #fffefb; | ||
| + | text-align: center; | ||
| + | border: hidden; | ||
| + | bottom: 30px; | ||
| + | left: 50%; | ||
| + | -webkit-transform: translateX(-50%); | ||
| + | transform: translateX(-50%); | ||
| + | cursor: pointer; | ||
| + | display: block; | ||
| + | margin: 0 auto !important; | ||
| + | padding: 15px 32px; | ||
| + | position: absolute; } | ||
| + | .grid-selection a.buttonoverview:hover { | ||
| + | text-shadow: none; } | ||
| + | .grid-selection .buttonoverview:hover { | ||
| + | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } | ||
| + | |||
| + | .vgem-banner { | ||
| + | background-color: #f8f8f8; } | ||
| + | .vgem-banner .banner { | ||
| + | display: block; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | margin-top: 5em; | ||
| + | max-height: 40vh; | ||
| + | max-width: 100%; } | ||
| + | |||
| + | main { | ||
| + | background-color: #f8f8f8; | ||
| + | display: flex; | ||
| + | flex-direction: row; | ||
| + | flex-wrap: wrap; | ||
| + | font-family: "Open Sans", sans-serif; | ||
| + | font-size: medium; | ||
| + | height: auto; | ||
| + | justify-content: right; | ||
| + | line-height: normal; | ||
| + | margin: 0 auto; | ||
| + | min-height: 100vh; | ||
| + | position: relative; | ||
| + | z-index: 1; } | ||
| + | main h1, main h2, main h3, main h4, main h5, main h6 { | ||
| + | text-align: left; | ||
| + | font-family: 'Montserrat', cursive !important; | ||
| + | font-size: medium !important; | ||
| + | letter-spacing: 0.15em; | ||
| + | margin-bottom: 1em !important; | ||
| + | margin-top: 2em !important; } | ||
| + | @media screen and (max-width: 1000px) { | ||
| + | main h1, main h2, main h3, main h4, main h5, main h6 { | ||
| + | margin-right: 2em; } } | ||
| + | main h1 { | ||
| + | font-size: 2.4em !important; } | ||
| + | main h2 { | ||
| + | font-size: 2em !important; | ||
| + | margin-left: 1em !important; } | ||
| + | main h3 { | ||
| + | font-size: 1.8em !important; | ||
| + | margin-left: 2em !important; } | ||
| + | main h4 { | ||
| + | font-size: 1.6em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | main h5 { | ||
| + | font-size: 1.4em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | main h6 { | ||
| + | font-size: 1.2em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | main p { | ||
| + | color: #1a1a1a !important; | ||
| + | font-family: "Open Sans", sans-serif !important; | ||
| + | font-size: medium !important; | ||
| + | line-height: 2.5em !important; | ||
| + | margin: 1em 4em !important; } | ||
| + | main p em { | ||
| + | font-style: italic !important; } | ||
| + | main a, | ||
| + | main a:visited { | ||
| + | color: #7d72eb !important; | ||
| + | text-decoration: none !important; | ||
| + | transition: color text-shadow .2s ease-in-out; } | ||
| + | main a:hover, | ||
| + | main a:visited:hover { | ||
| + | color: #eb0068 !important; | ||
| + | text-shadow: 0 0 8px #eb0068; } | ||
| + | main img { | ||
| + | height: auto; | ||
| + | max-height: 100%; | ||
| + | max-width: 100%; | ||
| + | overflow: hidden; | ||
| + | width: auto; } | ||
| + | main table { | ||
| + | display: block; | ||
| + | margin: 1em auto !important; | ||
| + | max-width: 90%; } | ||
| + | main tbody { | ||
| + | margin: 0 auto !important; } | ||
| + | main th, main td { | ||
| + | border: 1px solid #ddd; | ||
| + | padding: 8px; } | ||
| + | main .va-parts tr:nth-child(even) { | ||
| + | background-color: #f2f2f2; } | ||
| + | main .va-parts th { | ||
| + | padding-top: 12px; | ||
| + | padding-bottom: 12px; | ||
| + | text-align: left; | ||
| + | background-color: #8e86d7; | ||
| + | color: white; } | ||
| + | main .overview { | ||
| + | flex: 0 1 auto; } | ||
| + | main q { | ||
| + | font-family: 'Raleway', sans-serif !important; | ||
| + | display: block; | ||
| + | font-weight: bold; | ||
| + | padding-left: 4em; } | ||
| + | main q::before { | ||
| + | content: '“'; } | ||
| + | main q::after { | ||
| + | content: '”'; } | ||
| + | main pre { | ||
| + | background-color: #efefef; | ||
| + | padding: 1em; | ||
| + | margin: 1em 3em; } | ||
| + | main article.main-content { | ||
| + | flex: 0 1 65em; | ||
| + | text-align: justify; } | ||
| + | @media screen and (max-width: 1000px) { | ||
| + | main article.main-content { | ||
| + | padding: 0 auto; } } | ||
| + | main article.main-content > p:not(.noinitial)::first-letter { | ||
| + | font-size: 1.3em; | ||
| + | font-family: 'Raleway', serif !important; } | ||
| + | main article.main-content ul { | ||
| + | list-style-type: circle; | ||
| + | margin: 1em 0 !important; | ||
| + | margin-left: 5em !important; } | ||
| + | main article.main-content ul li { | ||
| + | line-height: 1.5em; | ||
| + | margin: 0.5em 1em; } | ||
| + | main article.main-content ul ul { | ||
| + | margin: 0.2em !important; | ||
| + | margin-left: 2em !important; } | ||
| + | main article.main-content ul ol { | ||
| + | margin: 0.2em !important; | ||
| + | margin-left: 2em !important; } | ||
| + | main article.main-content ol { | ||
| + | list-style-type: decimal; | ||
| + | margin: 1em 0 !important; | ||
| + | margin-left: 5em !important; } | ||
| + | main article.main-content ol li { | ||
| + | line-height: 1.5em; | ||
| + | margin: 0.5em 1em; } | ||
| + | main article.main-content ol ol { | ||
| + | margin: 0.2em !important; | ||
| + | margin-left: 2em !important; } | ||
| + | main article.main-content ol ul { | ||
| + | margin: 0.2em !important; | ||
| + | margin-left: 2em !important; } | ||
| + | main article.main-content .figure-gallery { | ||
| + | display: flex; | ||
| + | justify-content: center; } | ||
| + | main article.main-content .figure-gallery .float { | ||
| + | float: right; | ||
| + | clear: both; } | ||
| + | main article.main-content .figure-gallery figure { | ||
| + | float: none; } | ||
| + | main article.main-content figure { | ||
| + | margin: 5px; | ||
| + | position: relative; } | ||
| + | @media screen and (min-width: 1000px) { | ||
| + | main article.main-content figure { | ||
| + | clear: both; | ||
| + | flex: 0 0 30em; | ||
| + | float: right; | ||
| + | max-width: 25vw; } } | ||
| + | main article.main-content figure.block { | ||
| + | display: block; | ||
| + | margin: 5px auto !important; | ||
| + | max-width: 100% !important; | ||
| + | min-width: 100% !important; | ||
| + | float: none; } | ||
| + | main article.main-content figure.inline-block { | ||
| + | display: block; | ||
| + | margin: 5px 5px !important; | ||
| + | max-width: 50% !important; | ||
| + | min-width: 50% !important; | ||
| + | float: left; | ||
| + | clear: both; } | ||
| + | main article.main-content figure.inline-block img { | ||
| + | margin: 1em 1em !important; } | ||
| + | main article.main-content figure img { | ||
| + | display: block; | ||
| + | float: none !important; | ||
| + | margin: 1em auto !important; | ||
| + | max-width: 90% !important; | ||
| + | min-width: 10% !important; } | ||
| + | main article.main-content figure { | ||
| + | display: table; | ||
| + | margin: 0; | ||
| + | margin-left: 3em; | ||
| + | padding: 5px; } | ||
| + | main article.main-content figcaption { | ||
| + | font-family: 'Raleway', serif !important; | ||
| + | caption-side: bottom; | ||
| + | display: table-caption; | ||
| + | font-style: italic; | ||
| + | padding: 10px; | ||
| + | text-align: center; } | ||
| + | @media screen and (min-width: 1000px) { | ||
| + | main div.gutter { | ||
| + | flex: 1; } } | ||
| + | main > * { | ||
| + | background-size: cover; } | ||
| + | |||
| + | blockquote p { | ||
| + | font-family: 'Raleway', sans-serif !important; | ||
| + | font-style: italic !important; | ||
| + | font-weight: bold !important; | ||
| + | font-size: 1.3em !important; } | ||
| + | |||
| + | main.landing-page { | ||
| + | height: 100vh; | ||
| + | overflow-x: hidden; | ||
| + | overflow-y: scroll; | ||
| + | -webkit-perspective: 1px; | ||
| + | perspective: 1px; | ||
| + | -webkit-transform-style: preserve-3d; | ||
| + | transform-style: preserve-3d; | ||
| + | scroll-behavior: smooth; } | ||
| + | main.landing-page img.inline { | ||
| + | display: inline !important; | ||
| + | max-height: 100%; } | ||
| + | main.landing-page button { | ||
| + | border: 0; | ||
| + | color: #fffefb; | ||
| + | font-size: 1.3em; | ||
| + | outline: 0; | ||
| + | padding: 1em; | ||
| + | width: 10em; } | ||
| + | main.landing-page button.constitutive_button { | ||
| + | background-color: #eb0068; | ||
| + | box-shadow: 0px 0px 4px #eb0068; | ||
| + | margin: auto 3em 3em auto; } | ||
| + | main.landing-page button.constitutive_button:hover { | ||
| + | box-shadow: 0px 0px 8px #eb0068; } | ||
| + | main.landing-page button.inducible_button { | ||
| + | background-color: #00cef7; | ||
| + | box-shadow: 0px 0px 4px #00cef7; | ||
| + | margin: auto auto 3em 3em; } | ||
| + | main.landing-page button.inducible_button:hover { | ||
| + | box-shadow: 0px 0px 8px #00cef7; } | ||
| + | main.landing-page article { | ||
| + | text-align: center; | ||
| + | background-color: #f8f8f8; | ||
| + | display: flex; | ||
| + | min-width: 100vw; | ||
| + | position: relative; | ||
| + | scroll-behavior: smooth; | ||
| + | align-items: flex-start; | ||
| + | flex-wrap: wrap; } | ||
| + | main.landing-page article .sticky { | ||
| + | position: -webkit-sticky; | ||
| + | position: sticky; | ||
| + | overflow: hidden; | ||
| + | top: -2em; | ||
| + | z-index: -1; } | ||
| + | main.landing-page article .sticky p { | ||
| + | margin: 0em 0 !important; } | ||
| + | main.landing-page article p { | ||
| + | margin: 1em 0 !important; } | ||
| + | main.landing-page article img { | ||
| + | display: block; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; } | ||
| + | main.landing-page article section { | ||
| + | position: relative; } | ||
| + | main.landing-page article section h1, main.landing-page article section h2, main.landing-page article section h3, main.landing-page article section h4, main.landing-page article section h5, main.landing-page article section h6 { | ||
| + | text-align: center; | ||
| + | margin: 1em !important; } | ||
| + | main.landing-page article.banner { | ||
| + | background-color: #1a1a1a; | ||
| + | color: #fffefb !important; | ||
| + | flex: 1 0; | ||
| + | height: 100vh; | ||
| + | -webkit-transform: translateZ(-1px) scale(2); | ||
| + | transform: translateZ(-1px) scale(2); | ||
| + | z-index: -1; } | ||
| + | main.landing-page article.banner img { | ||
| + | width: 70%; } | ||
| + | main.landing-page article.banner h1, main.landing-page article.banner h2, main.landing-page article.banner h3, main.landing-page article.banner h4, main.landing-page article.banner h5, main.landing-page article.banner h6 { | ||
| + | color: #fffefb !important; } | ||
| + | main.landing-page article.banner section { | ||
| + | background-color: #1a1a1a; | ||
| + | flex: 1 3 auto; | ||
| + | margin: auto 0; | ||
| + | padding: 6em 0; | ||
| + | position: relative; } | ||
| + | @media screen and (max-width: 1000px) { | ||
| + | main.landing-page article { | ||
| + | flex-direction: column; } } | ||
| + | main.landing-page article section { | ||
| + | min-height: 100%; | ||
| + | color: #1a1a1a !important; | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | flex: 1 1; | ||
| + | margin: 2em; | ||
| + | position: relative; } | ||
| + | main.landing-page article section h1, main.landing-page article section h2, main.landing-page article section h3, main.landing-page article section h4, main.landing-page article section h5, main.landing-page article section h6, main.landing-page article section p { | ||
| + | color: #1a1a1a !important; } | ||
| + | main.landing-page article section p { | ||
| + | font-size: 1.3em !important; } | ||
| + | main.landing-page article section .card h2 { | ||
| + | text-align: left; } | ||
| + | main.landing-page article section .card p::first-letter { | ||
| + | font-size: 1.6em; | ||
| + | font-family: 'Raleway', serif !important; | ||
| + | margin-right: -0.05em; } | ||
| + | main.landing-page article section:first-child { | ||
| + | justify-content: flex-start; | ||
| + | margin-left: 3em; | ||
| + | text-align: justify; } | ||
| + | main.landing-page article section:first-child .card { | ||
| + | margin: 1em 3em; } | ||
| + | main.landing-page article section:last-child { | ||
| + | justify-content: flex-start; | ||
| + | text-align: justify; } | ||
| + | main.landing-page article section:last-child .card { | ||
| + | margin: 1em 3em; } | ||
| + | main.landing-page article section.scroll-action { | ||
| + | position: -webkit-sticky; | ||
| + | position: sticky; } | ||
| + | main.landing-page article section.scroll-action h1, main.landing-page article section.scroll-action h2, main.landing-page article section.scroll-action h3, main.landing-page article section.scroll-action h4, main.landing-page article section.scroll-action h5, main.landing-page article section.scroll-action h6, main.landing-page article section.scroll-action p { | ||
| + | color: #1a1a1a !important; } | ||
| + | main.landing-page article section.scroll-action .petri { | ||
| + | margin-bottom: 2em; } | ||
| + | @media screen and (max-width: 1000px) { | ||
| + | main.landing-page article section.scroll-action { | ||
| + | order: -1; } | ||
| + | main.landing-page article section.scroll-action .petri { | ||
| + | display: none; } } | ||
| + | main.landing-page article#reader-break section { | ||
| + | margin: auto 15vw; } | ||
| + | main.landing-page article#reader-break section p { | ||
| + | text-align: center; } | ||
| + | |||
| + | #image_gallery, .team-bio { | ||
| + | background-color: #f8f8f8; | ||
| + | overflow: hidden; | ||
| + | position: relative; } | ||
| + | #image_gallery::after, .team-bio::after { | ||
| + | clear: both; | ||
| + | content: ""; | ||
| + | display: block; } | ||
| + | #image_gallery img, .team-bio img { | ||
| + | border-radius: 50%; | ||
| + | width: calc(33.33333% - 26.66667px); | ||
| + | float: left; | ||
| + | margin-left: 20px; | ||
| + | clear: initial; | ||
| + | cursor: pointer; | ||
| + | height: 150px; | ||
| + | margin: 10px; | ||
| + | -o-object-fit: cover; | ||
| + | object-fit: cover; | ||
| + | width: 150px; } | ||
| + | #image_gallery img:hover, #image_gallery img.visited, .team-bio img:hover, .team-bio img.visited { | ||
| + | border: 1px solid #202020; } | ||
| + | #image_gallery a, .team-bio a { | ||
| + | display: block; | ||
| + | overflow: hidden; | ||
| + | overflow-x: hidden; | ||
| + | overflow-y: scroll; | ||
| + | position: relative; } | ||
| + | #image_gallery a p, .team-bio a p { | ||
| + | display: none; | ||
| + | font-size: 2em; | ||
| + | left: 50%; | ||
| + | margin-left: -.25em; | ||
| + | margin-top: -.5em; | ||
| + | position: absolute; | ||
| + | text-align: center; | ||
| + | top: 50%; | ||
| + | -webkit-transform: translate(-50%, -50%); | ||
| + | transform: translate(-50%, -50%); | ||
| + | transition: all 0.2s; | ||
| + | z-index: 9; } | ||
| + | #image_gallery a:hover img, .team-bio a:hover img { | ||
| + | image-orientation: from-image; | ||
| + | opacity: 0.10; } | ||
| + | #image_gallery a:hover p, .team-bio a:hover p { | ||
| + | display: block; } | ||
| + | #image_gallery a img, .team-bio a img { | ||
| + | border-radius: 50%; | ||
| + | width: calc(33.33333% - 26.66667px); | ||
| + | float: left; | ||
| + | margin-left: 20px; | ||
| + | image-orientation: from-image; | ||
| + | margin-bottom: 25px; | ||
| + | min-height: 90%; | ||
| + | min-width: 90%; | ||
| + | transition: opacity ease-in-out 0.2s, background-color ease-in-out 0.7s; } | ||
| + | |||
| + | /*circular images for advisors*/ | ||
| + | #advisor { | ||
| + | border-radius: 50%; | ||
| + | clear: both; | ||
| + | flex: 0 0 30em; | ||
| + | float: right; | ||
| + | height: 175px; | ||
| + | margin: 10px; | ||
| + | margin-left: 5em; | ||
| + | -o-object-fit: cover; | ||
| + | object-fit: cover; | ||
| + | position: relative; | ||
| + | width: 175px; } | ||
| + | |||
| + | .team-bio { | ||
| + | box-shadow: 0 0 5px #999; | ||
| + | color: #1a1a1a; | ||
| + | font-family: "Open Sans", sans-serif; | ||
| + | font-size: medium; | ||
| + | line-height: 2em; | ||
| + | margin: 20px; | ||
| + | padding: .25px; } | ||
| + | .team-bio h4 { | ||
| + | margin-left: 1em !important; } | ||
| + | |||
| + | .hidden { | ||
| + | display: none; } | ||
| + | |||
| + | .unhidden { | ||
| + | display: inline; } | ||
| + | |||
| + | .attributions { | ||
| + | /*custom editing for the attributions page. Flipped so images are on the left rather than the right and images are circular.*/ | ||
| + | margin: 10px; | ||
| + | border-radius: 50%; | ||
| + | -o-object-fit: cover; | ||
| + | object-fit: cover; | ||
| + | width: 150px; | ||
| + | height: 150px; | ||
| + | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); | ||
| + | flex: 0 0 30em; | ||
| + | float: left; | ||
| + | clear: both; | ||
| + | position: relative; | ||
| + | margin-left: 5em; } | ||
| + | |||
| + | figcaption { | ||
| + | display: block; } | ||
| + | |||
| + | #sponsors { | ||
| + | /*images in line with the text*/ | ||
| + | float: none; } | ||
| + | |||
| + | .notebook-timeline li { | ||
| + | padding-top: 0.10em !important; | ||
| + | padding-bottom: 0.10em !important; } | ||
| + | |||
| + | header { | ||
| + | background-color: #1a1a1a; | ||
| + | margin: 0 auto; | ||
| + | overflow: hidden; | ||
| + | padding: 0 0; | ||
| + | position: fixed; | ||
| + | text-align: center; | ||
| + | top: 16px; | ||
| + | transition: all .2s ease-in-out; | ||
| + | width: 100%; | ||
| + | z-index: 9999; } | ||
| + | header h1, header h2, header h3, header h4, header h5, header h6 { | ||
| + | text-align: left; | ||
| + | font-family: 'Montserrat', cursive !important; | ||
| + | font-size: medium !important; | ||
| + | letter-spacing: 0.15em; | ||
| + | margin-bottom: 1em !important; | ||
| + | margin-top: 2em !important; } | ||
| + | @media screen and (max-width: 1000px) { | ||
| + | header h1, header h2, header h3, header h4, header h5, header h6 { | ||
| + | margin-right: 2em; } } | ||
| + | header h1 { | ||
| + | font-size: 2.4em !important; } | ||
| + | header h2 { | ||
| + | font-size: 2em !important; | ||
| + | margin-left: 1em !important; } | ||
| + | header h3 { | ||
| + | font-size: 1.8em !important; | ||
| + | margin-left: 2em !important; } | ||
| + | header h4 { | ||
| + | font-size: 1.6em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | header h5 { | ||
| + | font-size: 1.4em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | header h6 { | ||
| + | font-size: 1.2em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | header p { | ||
| + | color: #1a1a1a !important; | ||
| + | font-family: "Open Sans", sans-serif !important; | ||
| + | font-size: medium !important; | ||
| + | line-height: 2.5em !important; | ||
| + | margin: 1em 4em !important; } | ||
| + | header p em { | ||
| + | font-style: italic !important; } | ||
| + | header a, | ||
| + | header a:visited { | ||
| + | color: #7d72eb !important; | ||
| + | text-decoration: none !important; | ||
| + | transition: color text-shadow .2s ease-in-out; } | ||
| + | header a:hover, | ||
| + | header a:visited:hover { | ||
| + | color: #eb0068 !important; | ||
| + | text-shadow: 0 0 8px #eb0068; } | ||
| + | header img { | ||
| + | height: auto; | ||
| + | max-height: 100%; | ||
| + | max-width: 100%; | ||
| + | overflow: hidden; | ||
| + | width: auto; } | ||
| + | header, | ||
| + | header * { | ||
| + | box-sizing: border-box; } | ||
| + | header.scrollUp { | ||
| + | -webkit-transform: translateY(-4em); | ||
| + | transform: translateY(-4em); } | ||
| + | header .navbar { | ||
| + | font-family: 'Raleway', serif !important; | ||
| + | display: flex; | ||
| + | height: 4em; | ||
| + | justify-content: center; } | ||
| + | @media screen and (min-width: 76em) { | ||
| + | header .navbar:hover, header .navbar:focus { | ||
| + | height: auto; } } | ||
| + | @media screen and (max-width: 76em) { | ||
| + | header .navbar.expanded { | ||
| + | height: auto; } | ||
| + | header .navbar.expanded > ul > li { | ||
| + | height: auto; } } | ||
| + | header .navbar ul { | ||
| + | display: flex; | ||
| + | flex: 1; | ||
| + | flex-direction: row; | ||
| + | list-style: none; | ||
| + | padding: 0; } | ||
| + | @media screen and (max-width: 76em) { | ||
| + | header .navbar ul { | ||
| + | flex-direction: column; } } | ||
| + | @media screen and (min-width: 76em) { | ||
| + | header .navbar ul { | ||
| + | justify-content: center; } } | ||
| + | header .navbar ul li { | ||
| + | flex: 1; | ||
| + | line-height: 4em; | ||
| + | max-width: -webkit-min-content; | ||
| + | max-width: -moz-min-content; | ||
| + | max-width: min-content; | ||
| + | max-height: -webkit-min-content; | ||
| + | max-height: -moz-min-content; | ||
| + | max-height: min-content; | ||
| + | position: relative; | ||
| + | transition: all .2s ease-in-out; } | ||
| + | header .navbar ul li .divider { | ||
| + | background-color: #eb0068; | ||
| + | flex: 0 0 1px; | ||
| + | overflow: hidden; } | ||
| + | header .navbar ul li:hover a, header .navbar ul li:hover li { | ||
| + | background-color: #202020; } | ||
| + | header .navbar ul li a, | ||
| + | header .navbar ul li a:visited { | ||
| + | align-items: center; | ||
| + | color: #8e86d7 !important; | ||
| + | display: flex; | ||
| + | font-size: 1em; | ||
| + | padding: 0 20px; | ||
| + | transition: all 0.2s ease-in-out; | ||
| + | white-space: nowrap; | ||
| + | width: 100%; } | ||
| + | header .navbar ul li a img, | ||
| + | header .navbar ul li a:visited img { | ||
| + | display: inline-block; | ||
| + | height: auto; | ||
| + | margin: .1rem; | ||
| + | min-height: 100%; | ||
| + | width: auto; } | ||
| + | header .navbar ul li a:hover, | ||
| + | header .navbar ul li a:visited:hover { | ||
| + | color: #eb0068 !important; | ||
| + | text-shadow: 0 0 8px #eb0068; } | ||
| + | @media screen and (min-width: 76em) { | ||
| + | header .navbar ul li a:not(:only-child):after, | ||
| + | header .navbar ul li a:visited:not(:only-child):after { | ||
| + | content: ' ▾'; | ||
| + | padding-left: 4px; } } | ||
| + | header .navbar ul li ul { | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | transition: all .2s ease-in-out; } | ||
| + | @media screen and (max-width: 76em) { | ||
| + | header .navbar ul li ul { | ||
| + | display: none; } } | ||
| + | header .navbar ul li ul li { | ||
| + | min-width: 100%; | ||
| + | font-size: .8em; | ||
| + | margin-left: 0 !important; | ||
| + | overflow: hidden; } | ||
| + | header .navbar .menubutton { | ||
| + | cursor: pointer; | ||
| + | flex: 1; | ||
| + | margin: 1em !important; | ||
| + | max-height: 2em; | ||
| + | max-width: 2em; } | ||
| + | @media screen and (min-width: 76em) { | ||
| + | header .navbar .menubutton { | ||
| + | display: none; } } | ||
| + | |||
| + | /*scroll bar*/ | ||
| + | .scrolltop { | ||
| + | display: none; | ||
| + | width: 100%; | ||
| + | margin: 0 0; | ||
| + | position: fixed; | ||
| + | bottom: 20px; | ||
| + | right: 10px; | ||
| + | z-index: 999; } | ||
| + | |||
| + | .scroll { | ||
| + | border-radius: 50%; | ||
| + | background-color: #f8f8f8; | ||
| + | border: solid #202020 1px; | ||
| + | bottom: 20px; | ||
| + | height: 4em; | ||
| + | margin: 0 0 0 0; | ||
| + | padding: 20px; | ||
| + | position: absolute; | ||
| + | right: 20px; | ||
| + | text-align: center; | ||
| + | width: 4em; } | ||
| + | |||
| + | .scroll:hover { | ||
| + | background: #f0f0f0; | ||
| + | transition: 0.5s; } | ||
| + | |||
| + | .scroll:hover .fa { | ||
| + | padding-top: -10px; } | ||
| + | |||
| + | .scroll .fa { | ||
| + | font-size: 30px; | ||
| + | margin-top: -5px; | ||
| + | margin-left: 1px; | ||
| + | transition: 0.5s; } | ||
| + | |||
| + | /* Tooltip container */ | ||
| + | .tooltip { | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
| + | font-weight: bold; | ||
| + | color: #0A1612; | ||
| + | cursor: pointer; } | ||
| + | |||
| + | /* Tooltip text */ | ||
| + | .tooltip span { | ||
| + | display: block; | ||
| + | visibility: hidden; | ||
| + | background-color: #1a1a1a; | ||
| + | color: #fff; | ||
| + | text-align: center; | ||
| + | padding: 20px; | ||
| + | border-radius: 6px; | ||
| + | font-weight: normal; | ||
| + | /* Position the tooltip text */ | ||
| + | position: absolute; | ||
| + | z-index: 1; | ||
| + | bottom: 125%; | ||
| + | left: 50%; | ||
| + | -webkit-transform: translateX(-50%); | ||
| + | transform: translateX(-50%); | ||
| + | font-size: small; | ||
| + | /* Fade in tooltip */ | ||
| + | opacity: 0; | ||
| + | transition: opacity 0.8s; } | ||
| + | |||
| + | /* Tooltip arrow */ | ||
| + | .tooltip span::after { | ||
| + | content: ""; | ||
| + | position: absolute; | ||
| + | top: 100%; | ||
| + | left: 50%; | ||
| + | margin-left: -5px; | ||
| + | border-width: 5px; | ||
| + | border-style: solid; | ||
| + | border-color: #1a1a1a transparent transparent transparent; } | ||
| + | |||
| + | /* Show the tooltip text when you mouse over the tooltip container */ | ||
| + | .tooltip:hover .shortdef { | ||
| + | visibility: visible; | ||
| + | width: 20vw; | ||
| + | opacity: 1; } | ||
| + | |||
| + | /*.tooltip:active { | ||
| + | .longdef { | ||
| + | width: 40vw; | ||
| + | visibility: visible; | ||
| + | opacity: 1; | ||
| + | } | ||
| + | .shortdef { | ||
| + | visibility: hidden; | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | */ | ||
| + | nav { | ||
| + | flex: 1 0; | ||
| + | margin: 0 auto; | ||
| + | max-width: 30em; } | ||
| + | nav #va-toc { | ||
| + | padding: 7em 2em 1em 2em; | ||
| + | position: -webkit-sticky; | ||
| + | position: sticky; | ||
| + | top: 0; } | ||
| + | nav #va-toc h3 { | ||
| + | font-family: 'Raleway', sans-serif !important; | ||
| + | font-size: 1.5em; | ||
| + | margin: 1em 0 !important; } | ||
| + | nav #va-toc .menubutton { | ||
| + | cursor: pointer; | ||
| + | display: inline; | ||
| + | padding-right: 1em; } | ||
| + | @media screen and (max-width: 1000px) { | ||
| + | nav #va-toc ul { | ||
| + | display: none; } } | ||
| + | nav #va-toc ul li { | ||
| + | padding: .5em 0; | ||
| + | font-size: 1.5vh; } | ||
| + | nav #va-toc ul li a { | ||
| + | font-size: 1.3em; } | ||
| + | nav #va-toc ul li ul { | ||
| + | display: block; | ||
| + | height: 0; | ||
| + | overflow: hidden; | ||
| + | padding: .75em 0 .5em 1em; } | ||
| + | @media screen and (max-width: 1000px) { | ||
| + | nav #va-toc ul li ul { | ||
| + | height: auto; } } | ||
| + | nav #va-toc ul li ul.current, nav #va-toc ul li ul.unhidden { | ||
| + | height: auto; } | ||
| + | nav #va-toc ul li ul li a { | ||
| + | font-size: 1em; } | ||
| + | |||
| + | footer { | ||
| + | font-size: medium; | ||
| + | font-family: "Open Sans", sans-serif; | ||
| + | box-sizing: border-box; | ||
| + | background-color: #1a1a1a; | ||
| + | color: #fffefb !important; | ||
| + | padding: 25px; | ||
| + | position: relative; | ||
| + | width: 100%; | ||
| + | z-index: 999; } | ||
| + | footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { | ||
| + | text-align: left; | ||
| + | font-family: 'Montserrat', cursive !important; | ||
| + | font-size: medium !important; | ||
| + | letter-spacing: 0.15em; | ||
| + | margin-bottom: 1em !important; | ||
| + | margin-top: 2em !important; } | ||
| + | @media screen and (max-width: 1000px) { | ||
| + | footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { | ||
| + | margin-right: 2em; } } | ||
| + | footer h1 { | ||
| + | font-size: 2.4em !important; } | ||
| + | footer h2 { | ||
| + | font-size: 2em !important; | ||
| + | margin-left: 1em !important; } | ||
| + | footer h3 { | ||
| + | font-size: 1.8em !important; | ||
| + | margin-left: 2em !important; } | ||
| + | footer h4 { | ||
| + | font-size: 1.6em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | footer h5 { | ||
| + | font-size: 1.4em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | footer h6 { | ||
| + | font-size: 1.2em !important; | ||
| + | margin-left: 3em !important; } | ||
| + | footer p { | ||
| + | color: #1a1a1a !important; | ||
| + | font-family: "Open Sans", sans-serif !important; | ||
| + | font-size: medium !important; | ||
| + | line-height: 2.5em !important; | ||
| + | margin: 1em 4em !important; } | ||
| + | footer p em { | ||
| + | font-style: italic !important; } | ||
| + | footer a, | ||
| + | footer a:visited { | ||
| + | color: #7d72eb !important; | ||
| + | text-decoration: none !important; | ||
| + | transition: color text-shadow .2s ease-in-out; } | ||
| + | footer a:hover, | ||
| + | footer a:visited:hover { | ||
| + | color: #eb0068 !important; | ||
| + | text-shadow: 0 0 8px #eb0068; } | ||
| + | footer img { | ||
| + | height: auto; | ||
| + | max-height: 100%; | ||
| + | max-width: 100%; | ||
| + | overflow: hidden; | ||
| + | width: auto; } | ||
| + | footer::after { | ||
| + | clear: both; | ||
| + | content: ""; | ||
| + | display: block; } | ||
| + | footer h3 { | ||
| + | color: #fffefb !important; | ||
| + | padding-left: 2em; | ||
| + | margin: auto 0 !important; } | ||
| + | footer div.footer-name { | ||
| + | width: calc(41.66667%); | ||
| + | float: left; | ||
| + | margin-left: 0px; | ||
| + | height: 6rem; | ||
| + | line-height: 6rem; } | ||
| + | footer div.footer-name * { | ||
| + | float: left; } | ||
| + | footer div.spacer { | ||
| + | width: calc(33.33333%); | ||
| + | float: left; | ||
| + | margin-left: 0px; | ||
| + | height: 6rem; | ||
| + | line-height: 6rem; } | ||
| + | footer div.social-container { | ||
| + | width: calc(25%); | ||
| + | float: left; | ||
| + | margin-left: 0px; } | ||
| + | |||
| + | /*Code courtesy of https://codepen.io/brandondward/pen/RpyaKL*/ | ||
| + | .social-container { | ||
| + | width: calc(25% - 25px); | ||
| + | float: left; | ||
| + | margin-left: 20px; | ||
| + | width: 400px; } | ||
| + | |||
| + | .social-icons { | ||
| + | padding: 0; | ||
| + | list-style: none; | ||
| + | margin: 1em; } | ||
| + | .social-icons li { | ||
| + | display: inline-block; | ||
| + | margin: 0.15em; | ||
| + | position: relative; | ||
| + | font-size: 1.2em; } | ||
| + | .social-icons i { | ||
| + | color: #fff; | ||
| + | position: absolute; | ||
| + | top: 21px; | ||
| + | left: 21px; | ||
| + | transition: all 265ms ease-out; } | ||
| + | .social-icons a { | ||
| + | display: inline-block; } | ||
| + | .social-icons a:before { | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | content: " "; | ||
| + | width: 60px; | ||
| + | height: 60px; | ||
| + | border-radius: 100%; | ||
| + | display: block; | ||
| + | background: linear-gradient(45deg, #eb0068, #6e5eff); | ||
| + | transition: all 265ms ease-out; } | ||
| + | .social-icons a:hover:before { | ||
| + | -webkit-transform: scale(0); | ||
| + | transform: scale(0); | ||
| + | transition: all 265ms ease-in; } | ||
| + | .social-icons a:hover i { | ||
| + | -webkit-transform: scale(2.2); | ||
| + | transform: scale(2.2); | ||
| + | color: #eb0068; | ||
| + | background: -webkit-linear-gradient(45deg, #eb0068, #6e5eff); | ||
| + | -webkit-background-clip: text; | ||
| + | -webkit-text-fill-color: transparent; | ||
| + | transition: all 265ms ease-in; } | ||
| + | |||
| + | .petri { | ||
| + | background-color: #202020; | ||
| + | height: 60vh; | ||
| + | width: 60vh; | ||
| + | border-radius: 50%; | ||
| + | /* | ||
| + | & .links line { | ||
| + | stroke: #999; | ||
| + | stroke-opacity: 0.6; | ||
| + | } | ||
| + | */ } | ||
| + | .petri .nodes circle { | ||
| + | fill: #fff; } | ||
| + | .petri .nodes circle:hover { | ||
| + | fill: blue; } | ||
Latest revision as of 14:34, 19 December 2018
/**
* This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018 * @version v0.7.3 * @link https://github.com/Virginia-iGEM/igem-wikibrick * @license MIT */
@charset "UTF-8"; /**
* Based on
*
* - reset.css 2.0 by Eric Meyer
(public domain)
* http://meyerweb.com/eric/tools/css/reset/
*
* - normalize.css 8.0.0 by Nicolas Gallagher and Jonathan Neal
* (licensed under MIT)
* https://github.com/necolas/normalize.css
*
* - Based on Bootstrap 4 Reboot
* (licensed under MIT)
* https://github.com/twbs/bootstrap
*/
/**
* IE10+ doesn't honor `<meta name="viewport">` in some cases */
@import url("https://fonts.googleapis.com/css?family=Open+Sans"); @import url("https://fonts.googleapis.com/css?family=Poiret+One"); @import url("https://fonts.googleapis.com/css?family=Montserrat"); @import url("https://fonts.googleapis.com/css?family=Raleway"); @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); @-ms-viewport {
width: device-width; }
/**
* general reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/**
* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary {
display: block; }
/**
* inherit box model for all elements */
- ,
- before,
- after {
box-sizing: inherit; }
/**
* html root rules * 1. set border-box for inheritance * 2. avoid 300ms click delay on touch devices that support the `touch-action` * CSS property * 3. Prevent adjustments of font size after orientation changes in IE, on * Windows Phone and iOS. * 4. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, * so we force a non-overlapping, non-auto-hiding scrollbar to counteract. * 5. Change the default tap highlight to be completely transparent in iOS. */
html {
/* 1 */ box-sizing: border-box; /* 2 */ touch-action: manipulation; /* 3 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 4 */ -ms-overflow-style: scrollbar; /* 5 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/**
* body rules * 1. reset line-height to 1 * 2. set base font-family to sans-serif */
body {
/* 1 */ line-height: 1; /* 2 */ font-family: sans-serif; }
/**
* Lists */
ol, ul {
list-style: none; }
/**
* Quotes */
blockquote, q {
quotes: none; }
blockquote::before, blockquote::after, q::before, q::after {
content: ; content: none; }
/**
* Tables */
table {
border-collapse: collapse; border-spacing: 0; }
/**
* Horizontal Lines * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */
hr {
/* 1 */ box-sizing: content-box; height: 0; /* 2 */ overflow: visible; }
/**
* Preformatted Text * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Don't allow content to break outside * 3. We have @viewport set which causes scrollbars to overlap content in IE11 * and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to * counteract. */
pre, code, kbd, samp {
/* 1 */ font-family: monospace, monospace; }
pre {
/* 2 */ overflow: auto; /* 3 */ -ms-overflow-style: scrollbar; }
/**
* Links * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a {
/* 1 */ background-color: transparent; /* 2 */ -webkit-text-decoration-skip: objects; }
/**
* 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] {
/* 1 */
border-bottom: none;
/* 2 */
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted; }
/**
* Add the correct font weight in Chrome, Edge, and Safari. */
b, strong {
font-weight: bolder; }
/**
* Add the correct font size in all browsers. */
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */
sub, sup {
font-size: 75%; line-height: 0; position: relative; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/**
* Remove the border on images inside links in IE 10. */
img {
border-style: none; }
/**
* Hide SVG overflow in IE */
svg:not(:root) {
overflow: hidden; }
/**
* Remove the default `border-radius` that macOS Chrome adds. * Details at https://github.com/twbs/bootstrap/issues/24093 */
button {
border-radius: 0; }
/**
* Work around a Firefox/IE bug where the transparent `button` background * results in a loss of the default `button` focus styles. * Credit: https://github.com/suitcss/base/ */
button:focus {
outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }
/**
* form element resets * 1. Remove the margin in Firefox and Safari * 2. inherit font rules */
input, button, select, optgroup, textarea {
/* 1 */ margin: 0; /* 2 */ font-family: inherit; font-size: inherit; line-height: inherit; }
/**
* Remove the inheritance of text transform in Firefox */
button, select {
text-transform: none; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */
button, [type="reset"], [type="submit"], html [type="button"] {
/* 2 */ -webkit-appearance: button; }
/**
* Remove the default appearance of temporal inputs to avoid a Mobile Safari * bug where setting a custom line-height prevents text from being vertically * centered within the input. * See https://bugs.webkit.org/show_bug.cgi?id=139848 * and https://github.com/twbs/bootstrap/issues/11266 */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
-webkit-appearance: listbox; }
/**
* 1. Remove the default vertical scrollbar in IE. * 2. Textareas should really only resize vertically so they don't break their * (horizontal) containers. */
textarea {
overflow: auto; resize: vertical; }
/**
* Show the overflow in IE. */
button, input {
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE. */
button, select {
text-transform: none; }
/**
* Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none; padding: 0; }
/**
* Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Suppress the focus outline on elements that cannot be accessed via keyboard. * This prevents an unwanted focus outline from appearing around elements that * might still respond to pointer events. * Credit: https://github.com/suitcss/base */
[tabindex="-1"]:focus {
outline: 0 !important; }
/**
* Browsers set a default `min-width: min-content` on fieldsets,* unlike e.g. `
`s, which have `min-width: 0` by default.
* So we reset that to ensure fieldsets behave more like a standard block element. * See https://github.com/twbs/bootstrap/issues/12359 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */
fieldset {
min-width: 0; }
/**
* 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Set display to block for all browsers */
legend {
/* 1 */ max-width: 100%; white-space: normal; /* 2 */ color: inherit; /* 3 */ display: block; }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress {
vertical-align: baseline; }
/**
* Remove the default vertical scrollbar in IE 10+. */
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] {
/* 1 */ box-sizing: border-box; /* 2 */ padding: 0; }
/**
* Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */
[type="search"] {
/* 1 */ -webkit-appearance: textfield; /* 2 */ outline-offset: -2px; }
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */
- -webkit-file-upload-button {
/* 1 */ -webkit-appearance: button; /* 2 */ font: inherit; }
/**
* Add the correct display in IE 10+. */
template {
display: none; }
[hidden] {
display: none; }
/* Override iGEM wiki settings, removing everything but the top navbar. */ /*Taken from 2011 SDU Denmark iGEM page*/
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display: none; }
- top-section {
border: none; height: 0px; }
/* Removes "teams" from the menubar */
- menubar > ul > li:last-child {
display: none; }
/* Resizes the menubar to fix the links (default is 400px) */
- menubar {
width: auto; }
ul {
margin: 0 !important; }
body {
margin: 10px 0 0 0; padding: 0; }
- top-section {
width: 965px; height: 0; margin: 0 auto; padding: 0; border: none; }
- menubar {
font-size: 65%; top: -14px; }
.left-menu:hover {
background-color: transparent; }
- menubar li a {
background-color: transparent; }
- menubar:hover {
color: white; }
- menubar li a {
color: transparent; }
- menubar:hover li a {
color: white; }
- sideMenu,
- top_title {
display: none; }
- content {
width: 100vw; padding: 0px; border: none; color: black; margin-left: auto; margin-right: auto; background-color: #fff; position: relative; }
- globalWrapper {
font-size: inherit; padding-bottom: 0; }
- top_menu_under {
height: 0px; }
ul {
list-style-image: none; /* removes the iGEM wiki bullets */ padding: 0; margin: 0; }
- mw-content-text > p {
width: 0px; height: 0px; }
- igem-navbar-placeholder {
height: 16px !important;
position: fixed !important;
top: 0 !important;
display: block !important;
background-color: #383838 !important;
border-bottom: solid black 2px !important;
color: white !important;
z-index: 99999 !important;
width: 100% !important;
font-size: 0.75em !important;
margin: 0 !important;
padding: 0 !important; }
#igem-navbar-placeholder p {
margin: 0 !important; }
.MathJax nobr > span.math > span {
border-left-width: 0 !important; }
/* @font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
font-weight: normal;
font-style: normal;
} @font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans/OpenSans-Bold.ttf");
font-weight: bold;
font-style: normal;
} @font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans/OpenSans-Italic.ttf");
font-weight: normal;
font-style: italic;
} @font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans/OpenSans-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
- /
/*$background-light: #ffffff;*/ body {
margin: 0; }
.row {
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 5px; }
.grid-selection {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
height: 500px;
margin: 10px;
padding: 20px;
position: relative;
width: 350px;
background-color: #202020 !important;
color: #fffefb !important; }
.grid-selection h1, .grid-selection h2, .grid-selection h3, .grid-selection h4, .grid-selection h5, .grid-selection h6 {
text-align: center;
margin: 0 !important;
color: #fffefb !important; }
.grid-selection p {
border: hidden;
color: #fffefb !important;
padding: 15px 32px;
text-align: center;
padding: 0 !important;
margin: 1em !important; }
.grid-selection .container {
text-align: middle; }
.grid-selection img {
max-width: 70% !important;
margin: 0 auto !important;
display: block;
position: relative; }
.grid-selection a.buttonoverview {
background-color: #fffefb;
text-align: center;
border: hidden;
bottom: 30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
cursor: pointer;
display: block;
margin: 0 auto !important;
padding: 15px 32px;
position: absolute; }
.grid-selection a.buttonoverview:hover {
text-shadow: none; }
.grid-selection .buttonoverview:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
.vgem-banner {
background-color: #f8f8f8; }
.vgem-banner .banner {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5em;
max-height: 40vh;
max-width: 100%; }
main {
background-color: #f8f8f8;
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-family: "Open Sans", sans-serif;
font-size: medium;
height: auto;
justify-content: right;
line-height: normal;
margin: 0 auto;
min-height: 100vh;
position: relative;
z-index: 1; }
main h1, main h2, main h3, main h4, main h5, main h6 {
text-align: left;
font-family: 'Montserrat', cursive !important;
font-size: medium !important;
letter-spacing: 0.15em;
margin-bottom: 1em !important;
margin-top: 2em !important; }
@media screen and (max-width: 1000px) {
main h1, main h2, main h3, main h4, main h5, main h6 {
margin-right: 2em; } }
main h1 {
font-size: 2.4em !important; }
main h2 {
font-size: 2em !important;
margin-left: 1em !important; }
main h3 {
font-size: 1.8em !important;
margin-left: 2em !important; }
main h4 {
font-size: 1.6em !important;
margin-left: 3em !important; }
main h5 {
font-size: 1.4em !important;
margin-left: 3em !important; }
main h6 {
font-size: 1.2em !important;
margin-left: 3em !important; }
main p {
color: #1a1a1a !important;
font-family: "Open Sans", sans-serif !important;
font-size: medium !important;
line-height: 2.5em !important;
margin: 1em 4em !important; }
main p em {
font-style: italic !important; }
main a,
main a:visited {
color: #7d72eb !important;
text-decoration: none !important;
transition: color text-shadow .2s ease-in-out; }
main a:hover,
main a:visited:hover {
color: #eb0068 !important;
text-shadow: 0 0 8px #eb0068; }
main img {
height: auto;
max-height: 100%;
max-width: 100%;
overflow: hidden;
width: auto; }
main table {
display: block;
margin: 1em auto !important;
max-width: 90%; }
main tbody {
margin: 0 auto !important; }
main th, main td {
border: 1px solid #ddd;
padding: 8px; }
main .va-parts tr:nth-child(even) {
background-color: #f2f2f2; }
main .va-parts th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #8e86d7;
color: white; }
main .overview {
flex: 0 1 auto; }
main q {
font-family: 'Raleway', sans-serif !important;
display: block;
font-weight: bold;
padding-left: 4em; }
main q::before {
content: '“'; }
main q::after {
content: '”'; }
main pre {
background-color: #efefef;
padding: 1em;
margin: 1em 3em; }
main article.main-content {
flex: 0 1 65em;
text-align: justify; }
@media screen and (max-width: 1000px) {
main article.main-content {
padding: 0 auto; } }
main article.main-content > p:not(.noinitial)::first-letter {
font-size: 1.3em;
font-family: 'Raleway', serif !important; }
main article.main-content ul {
list-style-type: circle;
margin: 1em 0 !important;
margin-left: 5em !important; }
main article.main-content ul li {
line-height: 1.5em;
margin: 0.5em 1em; }
main article.main-content ul ul {
margin: 0.2em !important;
margin-left: 2em !important; }
main article.main-content ul ol {
margin: 0.2em !important;
margin-left: 2em !important; }
main article.main-content ol {
list-style-type: decimal;
margin: 1em 0 !important;
margin-left: 5em !important; }
main article.main-content ol li {
line-height: 1.5em;
margin: 0.5em 1em; }
main article.main-content ol ol {
margin: 0.2em !important;
margin-left: 2em !important; }
main article.main-content ol ul {
margin: 0.2em !important;
margin-left: 2em !important; }
main article.main-content .figure-gallery {
display: flex;
justify-content: center; }
main article.main-content .figure-gallery .float {
float: right;
clear: both; }
main article.main-content .figure-gallery figure {
float: none; }
main article.main-content figure {
margin: 5px;
position: relative; }
@media screen and (min-width: 1000px) {
main article.main-content figure {
clear: both;
flex: 0 0 30em;
float: right;
max-width: 25vw; } }
main article.main-content figure.block {
display: block;
margin: 5px auto !important;
max-width: 100% !important;
min-width: 100% !important;
float: none; }
main article.main-content figure.inline-block {
display: block;
margin: 5px 5px !important;
max-width: 50% !important;
min-width: 50% !important;
float: left;
clear: both; }
main article.main-content figure.inline-block img {
margin: 1em 1em !important; }
main article.main-content figure img {
display: block;
float: none !important;
margin: 1em auto !important;
max-width: 90% !important;
min-width: 10% !important; }
main article.main-content figure {
display: table;
margin: 0;
margin-left: 3em;
padding: 5px; }
main article.main-content figcaption {
font-family: 'Raleway', serif !important;
caption-side: bottom;
display: table-caption;
font-style: italic;
padding: 10px;
text-align: center; }
@media screen and (min-width: 1000px) {
main div.gutter {
flex: 1; } }
main > * {
background-size: cover; }
blockquote p {
font-family: 'Raleway', sans-serif !important; font-style: italic !important; font-weight: bold !important; font-size: 1.3em !important; }
main.landing-page {
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
scroll-behavior: smooth; }
main.landing-page img.inline {
display: inline !important;
max-height: 100%; }
main.landing-page button {
border: 0;
color: #fffefb;
font-size: 1.3em;
outline: 0;
padding: 1em;
width: 10em; }
main.landing-page button.constitutive_button {
background-color: #eb0068;
box-shadow: 0px 0px 4px #eb0068;
margin: auto 3em 3em auto; }
main.landing-page button.constitutive_button:hover {
box-shadow: 0px 0px 8px #eb0068; }
main.landing-page button.inducible_button {
background-color: #00cef7;
box-shadow: 0px 0px 4px #00cef7;
margin: auto auto 3em 3em; }
main.landing-page button.inducible_button:hover {
box-shadow: 0px 0px 8px #00cef7; }
main.landing-page article {
text-align: center;
background-color: #f8f8f8;
display: flex;
min-width: 100vw;
position: relative;
scroll-behavior: smooth;
align-items: flex-start;
flex-wrap: wrap; }
main.landing-page article .sticky {
position: -webkit-sticky;
position: sticky;
overflow: hidden;
top: -2em;
z-index: -1; }
main.landing-page article .sticky p {
margin: 0em 0 !important; }
main.landing-page article p {
margin: 1em 0 !important; }
main.landing-page article img {
display: block;
margin-left: auto;
margin-right: auto; }
main.landing-page article section {
position: relative; }
main.landing-page article section h1, main.landing-page article section h2, main.landing-page article section h3, main.landing-page article section h4, main.landing-page article section h5, main.landing-page article section h6 {
text-align: center;
margin: 1em !important; }
main.landing-page article.banner {
background-color: #1a1a1a;
color: #fffefb !important;
flex: 1 0;
height: 100vh;
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index: -1; }
main.landing-page article.banner img {
width: 70%; }
main.landing-page article.banner h1, main.landing-page article.banner h2, main.landing-page article.banner h3, main.landing-page article.banner h4, main.landing-page article.banner h5, main.landing-page article.banner h6 {
color: #fffefb !important; }
main.landing-page article.banner section {
background-color: #1a1a1a;
flex: 1 3 auto;
margin: auto 0;
padding: 6em 0;
position: relative; }
@media screen and (max-width: 1000px) {
main.landing-page article {
flex-direction: column; } }
main.landing-page article section {
min-height: 100%;
color: #1a1a1a !important;
display: flex;
flex-direction: column;
flex: 1 1;
margin: 2em;
position: relative; }
main.landing-page article section h1, main.landing-page article section h2, main.landing-page article section h3, main.landing-page article section h4, main.landing-page article section h5, main.landing-page article section h6, main.landing-page article section p {
color: #1a1a1a !important; }
main.landing-page article section p {
font-size: 1.3em !important; }
main.landing-page article section .card h2 {
text-align: left; }
main.landing-page article section .card p::first-letter {
font-size: 1.6em;
font-family: 'Raleway', serif !important;
margin-right: -0.05em; }
main.landing-page article section:first-child {
justify-content: flex-start;
margin-left: 3em;
text-align: justify; }
main.landing-page article section:first-child .card {
margin: 1em 3em; }
main.landing-page article section:last-child {
justify-content: flex-start;
text-align: justify; }
main.landing-page article section:last-child .card {
margin: 1em 3em; }
main.landing-page article section.scroll-action {
position: -webkit-sticky;
position: sticky; }
main.landing-page article section.scroll-action h1, main.landing-page article section.scroll-action h2, main.landing-page article section.scroll-action h3, main.landing-page article section.scroll-action h4, main.landing-page article section.scroll-action h5, main.landing-page article section.scroll-action h6, main.landing-page article section.scroll-action p {
color: #1a1a1a !important; }
main.landing-page article section.scroll-action .petri {
margin-bottom: 2em; }
@media screen and (max-width: 1000px) {
main.landing-page article section.scroll-action {
order: -1; }
main.landing-page article section.scroll-action .petri {
display: none; } }
main.landing-page article#reader-break section {
margin: auto 15vw; }
main.landing-page article#reader-break section p {
text-align: center; }
- image_gallery, .team-bio {
background-color: #f8f8f8;
overflow: hidden;
position: relative; }
#image_gallery::after, .team-bio::after {
clear: both;
content: "";
display: block; }
#image_gallery img, .team-bio img {
border-radius: 50%;
width: calc(33.33333% - 26.66667px);
float: left;
margin-left: 20px;
clear: initial;
cursor: pointer;
height: 150px;
margin: 10px;
-o-object-fit: cover;
object-fit: cover;
width: 150px; }
#image_gallery img:hover, #image_gallery img.visited, .team-bio img:hover, .team-bio img.visited {
border: 1px solid #202020; }
#image_gallery a, .team-bio a {
display: block;
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
position: relative; }
#image_gallery a p, .team-bio a p {
display: none;
font-size: 2em;
left: 50%;
margin-left: -.25em;
margin-top: -.5em;
position: absolute;
text-align: center;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0.2s;
z-index: 9; }
#image_gallery a:hover img, .team-bio a:hover img {
image-orientation: from-image;
opacity: 0.10; }
#image_gallery a:hover p, .team-bio a:hover p {
display: block; }
#image_gallery a img, .team-bio a img {
border-radius: 50%;
width: calc(33.33333% - 26.66667px);
float: left;
margin-left: 20px;
image-orientation: from-image;
margin-bottom: 25px;
min-height: 90%;
min-width: 90%;
transition: opacity ease-in-out 0.2s, background-color ease-in-out 0.7s; }
/*circular images for advisors*/
- advisor {
border-radius: 50%;
clear: both;
flex: 0 0 30em;
float: right;
height: 175px;
margin: 10px;
margin-left: 5em;
-o-object-fit: cover;
object-fit: cover;
position: relative;
width: 175px; }
.team-bio {
box-shadow: 0 0 5px #999;
color: #1a1a1a;
font-family: "Open Sans", sans-serif;
font-size: medium;
line-height: 2em;
margin: 20px;
padding: .25px; }
.team-bio h4 {
margin-left: 1em !important; }
.hidden {
display: none; }
.unhidden {
display: inline; }
.attributions {
/*custom editing for the attributions page. Flipped so images are on the left rather than the right and images are circular.*/
margin: 10px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
width: 150px;
height: 150px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
flex: 0 0 30em;
float: left;
clear: both;
position: relative;
margin-left: 5em; }
figcaption {
display: block; }
- sponsors {
/*images in line with the text*/ float: none; }
.notebook-timeline li {
padding-top: 0.10em !important; padding-bottom: 0.10em !important; }
header {
background-color: #1a1a1a;
margin: 0 auto;
overflow: hidden;
padding: 0 0;
position: fixed;
text-align: center;
top: 16px;
transition: all .2s ease-in-out;
width: 100%;
z-index: 9999; }
header h1, header h2, header h3, header h4, header h5, header h6 {
text-align: left;
font-family: 'Montserrat', cursive !important;
font-size: medium !important;
letter-spacing: 0.15em;
margin-bottom: 1em !important;
margin-top: 2em !important; }
@media screen and (max-width: 1000px) {
header h1, header h2, header h3, header h4, header h5, header h6 {
margin-right: 2em; } }
header h1 {
font-size: 2.4em !important; }
header h2 {
font-size: 2em !important;
margin-left: 1em !important; }
header h3 {
font-size: 1.8em !important;
margin-left: 2em !important; }
header h4 {
font-size: 1.6em !important;
margin-left: 3em !important; }
header h5 {
font-size: 1.4em !important;
margin-left: 3em !important; }
header h6 {
font-size: 1.2em !important;
margin-left: 3em !important; }
header p {
color: #1a1a1a !important;
font-family: "Open Sans", sans-serif !important;
font-size: medium !important;
line-height: 2.5em !important;
margin: 1em 4em !important; }
header p em {
font-style: italic !important; }
header a,
header a:visited {
color: #7d72eb !important;
text-decoration: none !important;
transition: color text-shadow .2s ease-in-out; }
header a:hover,
header a:visited:hover {
color: #eb0068 !important;
text-shadow: 0 0 8px #eb0068; }
header img {
height: auto;
max-height: 100%;
max-width: 100%;
overflow: hidden;
width: auto; }
header,
header * {
box-sizing: border-box; }
header.scrollUp {
-webkit-transform: translateY(-4em);
transform: translateY(-4em); }
header .navbar {
font-family: 'Raleway', serif !important;
display: flex;
height: 4em;
justify-content: center; }
@media screen and (min-width: 76em) {
header .navbar:hover, header .navbar:focus {
height: auto; } }
@media screen and (max-width: 76em) {
header .navbar.expanded {
height: auto; }
header .navbar.expanded > ul > li {
height: auto; } }
header .navbar ul {
display: flex;
flex: 1;
flex-direction: row;
list-style: none;
padding: 0; }
@media screen and (max-width: 76em) {
header .navbar ul {
flex-direction: column; } }
@media screen and (min-width: 76em) {
header .navbar ul {
justify-content: center; } }
header .navbar ul li {
flex: 1;
line-height: 4em;
max-width: -webkit-min-content;
max-width: -moz-min-content;
max-width: min-content;
max-height: -webkit-min-content;
max-height: -moz-min-content;
max-height: min-content;
position: relative;
transition: all .2s ease-in-out; }
header .navbar ul li .divider {
background-color: #eb0068;
flex: 0 0 1px;
overflow: hidden; }
header .navbar ul li:hover a, header .navbar ul li:hover li {
background-color: #202020; }
header .navbar ul li a,
header .navbar ul li a:visited {
align-items: center;
color: #8e86d7 !important;
display: flex;
font-size: 1em;
padding: 0 20px;
transition: all 0.2s ease-in-out;
white-space: nowrap;
width: 100%; }
header .navbar ul li a img,
header .navbar ul li a:visited img {
display: inline-block;
height: auto;
margin: .1rem;
min-height: 100%;
width: auto; }
header .navbar ul li a:hover,
header .navbar ul li a:visited:hover {
color: #eb0068 !important;
text-shadow: 0 0 8px #eb0068; }
@media screen and (min-width: 76em) {
header .navbar ul li a:not(:only-child):after,
header .navbar ul li a:visited:not(:only-child):after {
content: ' ▾';
padding-left: 4px; } }
header .navbar ul li ul {
display: flex;
flex-direction: column;
transition: all .2s ease-in-out; }
@media screen and (max-width: 76em) {
header .navbar ul li ul {
display: none; } }
header .navbar ul li ul li {
min-width: 100%;
font-size: .8em;
margin-left: 0 !important;
overflow: hidden; }
header .navbar .menubutton {
cursor: pointer;
flex: 1;
margin: 1em !important;
max-height: 2em;
max-width: 2em; }
@media screen and (min-width: 76em) {
header .navbar .menubutton {
display: none; } }
/*scroll bar*/ .scrolltop {
display: none; width: 100%; margin: 0 0; position: fixed; bottom: 20px; right: 10px; z-index: 999; }
.scroll {
border-radius: 50%; background-color: #f8f8f8; border: solid #202020 1px; bottom: 20px; height: 4em; margin: 0 0 0 0; padding: 20px; position: absolute; right: 20px; text-align: center; width: 4em; }
.scroll:hover {
background: #f0f0f0; transition: 0.5s; }
.scroll:hover .fa {
padding-top: -10px; }
.scroll .fa {
font-size: 30px; margin-top: -5px; margin-left: 1px; transition: 0.5s; }
/* Tooltip container */ .tooltip {
position: relative; display: inline-block; font-weight: bold; color: #0A1612; cursor: pointer; }
/* Tooltip text */ .tooltip span {
display: block;
visibility: hidden;
background-color: #1a1a1a;
color: #fff;
text-align: center;
padding: 20px;
border-radius: 6px;
font-weight: normal;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-size: small;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.8s; }
/* Tooltip arrow */ .tooltip span::after {
content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1a1a1a transparent transparent transparent; }
/* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .shortdef {
visibility: visible; width: 20vw; opacity: 1; }
/*.tooltip:active {
.longdef {
width: 40vw;
visibility: visible;
opacity: 1;
}
.shortdef {
visibility: hidden;
opacity: 0;
}
}
- /
nav {
flex: 1 0;
margin: 0 auto;
max-width: 30em; }
nav #va-toc {
padding: 7em 2em 1em 2em;
position: -webkit-sticky;
position: sticky;
top: 0; }
nav #va-toc h3 {
font-family: 'Raleway', sans-serif !important;
font-size: 1.5em;
margin: 1em 0 !important; }
nav #va-toc .menubutton {
cursor: pointer;
display: inline;
padding-right: 1em; }
@media screen and (max-width: 1000px) {
nav #va-toc ul {
display: none; } }
nav #va-toc ul li {
padding: .5em 0;
font-size: 1.5vh; }
nav #va-toc ul li a {
font-size: 1.3em; }
nav #va-toc ul li ul {
display: block;
height: 0;
overflow: hidden;
padding: .75em 0 .5em 1em; }
@media screen and (max-width: 1000px) {
nav #va-toc ul li ul {
height: auto; } }
nav #va-toc ul li ul.current, nav #va-toc ul li ul.unhidden {
height: auto; }
nav #va-toc ul li ul li a {
font-size: 1em; }
footer {
font-size: medium;
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
background-color: #1a1a1a;
color: #fffefb !important;
padding: 25px;
position: relative;
width: 100%;
z-index: 999; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
text-align: left;
font-family: 'Montserrat', cursive !important;
font-size: medium !important;
letter-spacing: 0.15em;
margin-bottom: 1em !important;
margin-top: 2em !important; }
@media screen and (max-width: 1000px) {
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
margin-right: 2em; } }
footer h1 {
font-size: 2.4em !important; }
footer h2 {
font-size: 2em !important;
margin-left: 1em !important; }
footer h3 {
font-size: 1.8em !important;
margin-left: 2em !important; }
footer h4 {
font-size: 1.6em !important;
margin-left: 3em !important; }
footer h5 {
font-size: 1.4em !important;
margin-left: 3em !important; }
footer h6 {
font-size: 1.2em !important;
margin-left: 3em !important; }
footer p {
color: #1a1a1a !important;
font-family: "Open Sans", sans-serif !important;
font-size: medium !important;
line-height: 2.5em !important;
margin: 1em 4em !important; }
footer p em {
font-style: italic !important; }
footer a,
footer a:visited {
color: #7d72eb !important;
text-decoration: none !important;
transition: color text-shadow .2s ease-in-out; }
footer a:hover,
footer a:visited:hover {
color: #eb0068 !important;
text-shadow: 0 0 8px #eb0068; }
footer img {
height: auto;
max-height: 100%;
max-width: 100%;
overflow: hidden;
width: auto; }
footer::after {
clear: both;
content: "";
display: block; }
footer h3 {
color: #fffefb !important;
padding-left: 2em;
margin: auto 0 !important; }
footer div.footer-name {
width: calc(41.66667%);
float: left;
margin-left: 0px;
height: 6rem;
line-height: 6rem; }
footer div.footer-name * {
float: left; }
footer div.spacer {
width: calc(33.33333%);
float: left;
margin-left: 0px;
height: 6rem;
line-height: 6rem; }
footer div.social-container {
width: calc(25%);
float: left;
margin-left: 0px; }
/*Code courtesy of https://codepen.io/brandondward/pen/RpyaKL*/ .social-container {
width: calc(25% - 25px); float: left; margin-left: 20px; width: 400px; }
.social-icons {
padding: 0;
list-style: none;
margin: 1em; }
.social-icons li {
display: inline-block;
margin: 0.15em;
position: relative;
font-size: 1.2em; }
.social-icons i {
color: #fff;
position: absolute;
top: 21px;
left: 21px;
transition: all 265ms ease-out; }
.social-icons a {
display: inline-block; }
.social-icons a:before {
-webkit-transform: scale(1);
transform: scale(1);
content: " ";
width: 60px;
height: 60px;
border-radius: 100%;
display: block;
background: linear-gradient(45deg, #eb0068, #6e5eff);
transition: all 265ms ease-out; }
.social-icons a:hover:before {
-webkit-transform: scale(0);
transform: scale(0);
transition: all 265ms ease-in; }
.social-icons a:hover i {
-webkit-transform: scale(2.2);
transform: scale(2.2);
color: #eb0068;
background: -webkit-linear-gradient(45deg, #eb0068, #6e5eff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 265ms ease-in; }
.petri {
background-color: #202020;
height: 60vh;
width: 60vh;
border-radius: 50%;
/*
& .links line {
stroke: #999;
stroke-opacity: 0.6;
}
*/ }
.petri .nodes circle {
fill: #fff; }
.petri .nodes circle:hover {
fill: blue; }