Line 1: | Line 1: | ||
+ | /** | ||
+ | * This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018 | ||
+ | * @version v0.6.0 | ||
+ | * @link https://github.com/Virginia-iGEM/igem-wikibrick | ||
+ | * @license MIT | ||
+ | */ | ||
@charset "UTF-8"; | @charset "UTF-8"; | ||
/* Override iGEM wiki settings, removing everything but the top navbar. */ | /* Override iGEM wiki settings, removing everything but the top navbar. */ | ||
Line 94: | Line 100: | ||
@font-face { | @font-face { | ||
font-family: "OpenSans" !important; | font-family: "OpenSans" !important; | ||
− | src: url("/ | + | src: url("https://static.igem.org/mediawiki/2018/2/24/T--Virginia--2018_OpenSans-Regular.ttf") !important; |
font-weight: normal !important; | font-weight: normal !important; | ||
font-style: normal !important; } | font-style: normal !important; } | ||
Line 100: | Line 106: | ||
@font-face { | @font-face { | ||
font-family: "OpenSans" !important; | font-family: "OpenSans" !important; | ||
− | src: url("/ | + | src: url("https://static.igem.org/mediawiki/2018/d/d5/T--Virginia--2018_OpenSans-Bold.ttf") !important; |
font-weight: bold !important; | font-weight: bold !important; | ||
font-style: normal !important; } | font-style: normal !important; } | ||
Line 106: | Line 112: | ||
@font-face { | @font-face { | ||
font-family: "OpenSans" !important; | font-family: "OpenSans" !important; | ||
− | src: url("/ | + | src: url("https://static.igem.org/mediawiki/2018/3/32/T--Virginia--2018_OpenSans-Italic.ttf") !important; |
font-weight: normal !important; | font-weight: normal !important; | ||
font-style: italic !important; } | font-style: italic !important; } | ||
Line 112: | Line 118: | ||
@font-face { | @font-face { | ||
font-family: "OpenSans" !important; | font-family: "OpenSans" !important; | ||
− | src: url("/ | + | src: url("https://static.igem.org/mediawiki/2018/f/f3/T--Virginia--2018_OpenSans-BoldItalic.ttf") !important; |
font-weight: bold !important; | font-weight: bold !important; | ||
font-style: italic !important; } | font-style: italic !important; } |
Revision as of 19:26, 20 August 2018
/**
* This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018 * @version v0.6.0 * @link https://github.com/Virginia-iGEM/igem-wikibrick * @license MIT */
@charset "UTF-8"; /* Override iGEM wiki settings, removing everything but the top navbar. */ /*Taken from 2011 SDU Denmark iGEM page*/ @import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic);
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display: none !important; }
- top-section {
border: none !important; height: 0px !important; }
/* Removes "teams" from the menubar */
- menubar > ul > li:last-child {
display: none !important; }
/* Resizes the menubar to fix the links (default is 400px) */ /*#menubar {
width: auto; }
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 !important; padding: 0px !important; border: none !important; color: black !important; margin-left: auto !important; margin-right: auto !important; background-color: #fff !important; position: relative !important; }
- globalWrapper {
font-size: inherit !important; padding-bottom: 0 !important; }
- top_menu_under {
height: 0px !important; }
ul {
list-style-image: none !important; /* removes the iGEM wiki bullets */ padding: 0 !important; margin: 0 !important; }
- mw-content-text > p {
width: 0px !important; height: 0px !important; }
- 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: 9999 !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 !important; }
@font-face {
font-family: "OpenSans" !important; src: url("https://static.igem.org/mediawiki/2018/2/24/T--Virginia--2018_OpenSans-Regular.ttf") !important; font-weight: normal !important; font-style: normal !important; }
@font-face {
font-family: "OpenSans" !important; src: url("https://static.igem.org/mediawiki/2018/d/d5/T--Virginia--2018_OpenSans-Bold.ttf") !important; font-weight: bold !important; font-style: normal !important; }
@font-face {
font-family: "OpenSans" !important; src: url("https://static.igem.org/mediawiki/2018/3/32/T--Virginia--2018_OpenSans-Italic.ttf") !important; font-weight: normal !important; font-style: italic !important; }
@font-face {
font-family: "OpenSans" !important; src: url("https://static.igem.org/mediawiki/2018/f/f3/T--Virginia--2018_OpenSans-BoldItalic.ttf") !important; font-weight: bold !important; font-style: italic !important; }
/* UVA Colors $background-dark-color: #232D4B; $background-light-color: #ffffff; $accent-color: #E57200; $light-accent-color: rgb(255, 191, 128); $text-light: #ffffff; $text-dark-color: #666666; $link-color: #EB5F0C;
- /
/*Cherenkov Colors*/ /* $background-dark-color:#282828; $background-light-color:#C3C3D8; $accent-color: #BFFBF9; $text-light: #E8F9F9; $text-dark-color: #001C4E; $link-color: #3DD4DF;
- /
/*Passion Fruit Colors*/ /* $background-dark-color:#FAF4E0; $background-light-color:rgb(128, 39, 81); $accent-color: #F5287F; $light-accent-color: rgb(255, 142, 189); $text-light: #1E0811; $text-dark-color: #FFF0EF; $link-color: #FBB645;
- /
/*Clean, bright theme*/ /*https://www.canva.com/learn/website-color-schemes*/ /* $background-dark-color: #4484CE; $background-light-color: rgb(255,255,255); $accent-color: #F19F4D; $accent-light-color: #F9CF00; $text-light-color: rgb(255, 255, 255); $text-dark-color: #0A1612; $link-color: rgb(255, 218, 159); $template-dark-color: #D9D9D9;
- /
/* $background-dark-color: rgb(37, 37, 37); $background-light-color: rgb(247, 245, 233); $accent-color: rgb(44, 106, 148); $accent-light-color: rgb(0, 195, 255); $text-light-color: rgb(255, 253, 255); $text-dark-color: rgb(129, 127, 116); $link-color: rgb(255, 218, 159);
- /
.row {
display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; padding: 5px !important; }
.grid-selection {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important; height: 500px !important; margin: 10px !important; padding: 20px !important; position: relative !important; width: 350px !important; /*Button for Overview*/ } .grid-selection a.buttonoverview { margin-left: 3em !important; cursor: pointer !important; display: inline-block !important; background-color: #24bee4 !important; border: hidden !important; bottom: 30px !important; color: #fffefb !important; cursor: pointer !important; display: inline-block !important; margin-left: 3em !important; padding: 15px 32px !important; position: absolute !important; } .grid-selection .buttonoverview:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important; }
main {
background-color: #f8f8f8 !important; display: flex !important; flex-direction: row !important; font-family: "Arial" !important; font-size: medium !important; height: auto !important; justify-content: right !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; } main a, main a:visited { color: #24bee4 !important; text-decoration: none !important; transition: color text-shadow .2s ease-in-out !important; } main a:hover, main a:visited:hover { color: #aa34ba !important; text-shadow: 0 0 8px #eb00c2 !important; } main img { height: auto !important; max-height: 100% !important; max-width: 100% !important; overflow: hidden !important; width: auto !important; } main h1, main h2, main h3, main h4, main h5, main h6 { margin-top: 1em !important; margin-bottom: 2em !important; font-weight: bold !important; font-size: medium !important; font-family: "Arial" !important; } main h1 { margin-left: 2em !important; font-size: 2.2em !important; } main h2 { margin-left: 2em !important; font-size: 2em !important; } main h3 { margin-left: 4em !important; font-size: 1.8em !important; } main h4 { margin-left: 4em !important; font-size: 1.6em !important; } main h5 { margin-left: 4em !important; font-size: 1.4em !important; } main h6 { margin-left: 4em !important; font-size: 1.2em !important; } main p { margin: 3em 4em !important; line-height: 3em !important; font-size: medium !important; font-family: "Arial" !important; color: #1a1a1a !important; } main article { flex: 0 0 65em !important; margin-top: 5em !important; text-align: justify !important; /*adding captions*/ } main article img, main article figure { flex: 0 0 30em !important; float: right !important; clear: both !important; position: relative !important; padding: 5px !important; } main article figure { margin: 0 !important; padding: 5px !important; display: table !important; } main article figcaption { text-align: center !important; padding: 10px !important; display: table-caption !important; caption-side: bottom !important; font-style: italic !important; } main > * { background-size: cover !important; }
- rightgutter {
flex: 1 !important; }
@media screen and (max-width: calc(20em + 65em)) {
main { flex-direction: column !important; } }
.darkened {
z-index: 1000 !important; position: fixed !important; min-width: 100vw !important; min-height: 100vh !important; color: #1a1a1a !important; background-color: #1a1a1a !important; } .darkened * { display: none !important; visibility: 0 !important; } .darkened > .logo { display: block !important; visibility: 1 !important; position: fixed !important; top: 25% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; overflow: visible !important; max-width: 512px !important; }
.category-gallery {
padding: 3% 5% !important; background-color: #fffefb !important; overflow: hidden !important; } .category-gallery::after { clear: both !important; content: "" !important; display: block !important; } .category-gallery div { position: relative !important; } .category-gallery div a { position: relative !important; display: block !important; overflow: hidden !important; overflow-y: scroll !important; overflow-x: hidden !important; } .category-gallery div a p { font-size: 2em !important; display: none !important; position: absolute !important; top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; margin-top: -0.5em !important; margin-left: -0.25em !important; z-index: 9 !important; /*overlay text over*/ transition: all 0.2s !important; text-align: center !important; } .category-gallery div a:hover img { image-orientation: from-image !important; opacity: 0.10 !important; } .category-gallery div a:hover p { display: block !important; } .category-gallery div a img { border-radius: 50% !important; image-orientation: from-image !important; margin-bottom: 25px !important; min-width: 90% !important; min-height: 90% !important; transition: opacity ease-in-out 0.2s, background-color ease-in-out 0.7s !important; }
.petri-dish {
display: none !important; border-radius: 50% !important; background-color: #1a1a1a !important; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; }
- image_gallery {
padding: 3% 5% !important; background-color: #fffefb !important; overflow: hidden !important; position: relative !important; } #image_gallery::after { clear: both !important; content: "" !important; display: block !important; } #image_gallery img { width: calc(33.33333% - 26.66667px) !important; float: left !important; margin-left: 20px !important; margin: 10px !important; border-radius: 50% !important; -o-object-fit: cover !important; object-fit: cover !important; width: 150px !important; height: 150px !important; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important; clear: initial !important; } #image_gallery a { position: relative !important; display: block !important; overflow: hidden !important; overflow-y: scroll !important; overflow-x: hidden !important; } #image_gallery a p { font-size: 2em !important; display: none !important; position: absolute !important; top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; margin-top: -0.5em !important; margin-left: -0.25em !important; z-index: 9 !important; /*overlay text over*/ transition: all 0.2s !important; text-align: center !important; } #image_gallery a:hover img { image-orientation: from-image !important; opacity: 0.10 !important; } #image_gallery a:hover p { display: block !important; } #image_gallery a img { border-radius: 50% !important; width: calc(8.33333% - 21.66667px) !important; float: left !important; margin-left: 20px !important; image-orientation: from-image !important; margin-bottom: 25px !important; min-width: 90% !important; min-height: 90% !important; transition: opacity ease-in-out 0.2s, background-color ease-in-out 0.7s !important; }
/*circular images for advisors*/
- advisor {
margin: 10px !important; border-radius: 50% !important; -o-object-fit: cover !important; object-fit: cover !important; width: 175px !important; height: 175px !important; flex: 0 0 30em !important; float: right !important; clear: both !important; position: relative !important; margin-left: 5em !important; }
.team-bio {
margin: 20px !important; line-height: 2em !important; font-size: medium !important; font-family: "Arial" !important; color: #1a1a1a !important; box-shadow: 0 0 5px #999 !important; padding: 0.25px !important; }
.hidden {
display: none !important; }
.unhidden {
display: block !important; }
- attributions {
/*custom editing for the attributions page. Flipped so images are on the left rather than the right and images are circular.*/ margin: 10px !important; border-radius: 50% !important; -o-object-fit: cover !important; object-fit: cover !important; width: 150px !important; height: 150px !important; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important; flex: 0 0 30em !important; float: left !important; clear: both !important; position: relative !important; margin-left: 5em !important; }
figcaption {
display: block !important; }
- sponsors {
/*images in line with the text*/ float: none !important; }
header {
background-color: #424242 !important; margin: 0 auto !important; overflow: hidden !important; padding: 0 0 !important; position: fixed !important; text-align: center !important; top: 16px !important; transition: all .1s !important; width: 100% !important; z-index: 999 !important; } header h1, header h2, header h3, header h4, header h5, header h6 { margin-top: 1em !important; margin-bottom: 2em !important; font-weight: bold !important; font-size: medium !important; font-family: "Arial" !important; } header h1 { margin-left: 2em !important; font-size: 2.2em !important; } header h2 { margin-left: 2em !important; font-size: 2em !important; } header h3 { margin-left: 4em !important; font-size: 1.8em !important; } header h4 { margin-left: 4em !important; font-size: 1.6em !important; } header h5 { margin-left: 4em !important; font-size: 1.4em !important; } header h6 { margin-left: 4em !important; font-size: 1.2em !important; } header p { margin: 3em 4em !important; line-height: 3em !important; font-size: medium !important; font-family: "Arial" !important; color: #1a1a1a !important; } header, header * { box-sizing: border-box !important; } header.scrollUp { -webkit-transform: translateY(-3em) !important; transform: translateY(-3em) !important; } header #navbar { display: flex !important; height: 3em !important; justify-content: center !important; padding-bottom: 1em !important; } header #navbar:hover, header #navbar:focus { height: auto !important; } header #navbar:hover > ul > li, header #navbar:focus > ul > li { height: auto !important; } header #navbar ul { display: flex !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } header #navbar ul li { flex: 1 !important; float: left !important; line-height: 3em !important; position: relative !important; } header #navbar ul li .divider { background-color: #26fffa !important; flex: 0 0 1px !important; overflow: hidden !important; } header #navbar ul li a, header #navbar ul li a:visited { align-items: center !important; color: #fffefb !important; display: flex !important; font-size: 1em !important; padding: 0 20px !important; transition: all 0.2s ease-in-out !important; white-space: nowrap !important; width: 100% !important; } header #navbar ul li a img, header #navbar ul li a:visited img { display: inline-block !important; height: auto !important; margin: .1rem !important; min-height: 100% !important; width: auto !important; } header #navbar ul li a:hover, header #navbar ul li a:visited:hover { color: #26fffa !important; text-shadow: 0 0 8px #26fffa !important; } header #navbar ul li a:not(:only-child):after, header #navbar ul li a:visited:not(:only-child):after { content: ' ▾' !important; padding-left: 4px !important; } header #navbar ul li ul { display: flex !important; flex-direction: column !important; transition: all .2s ease-in-out 0s, visibility 0s linear .3s, z-index 0s linear .01s !important; } header #navbar ul li ul li { font-size: .8em !important; overflow: hidden !important; }
/*scroll bar*/ .scrolltop {
display: none !important; width: 100% !important; margin: 0 auto !important; position: fixed !important; bottom: 20px !important; right: 10px !important; }
.scroll {
position: absolute !important; right: 20px !important; bottom: 20px !important; background: #b2b2b2 !important; background: rgba(178, 178, 178, 0.7) !important; padding: 20px !important; text-align: center !important; margin: 0 0 0 0 !important; }
.scroll:hover {
background: #b2b2b2 !important; transition: 0.5s !important; }
.scroll:hover .fa {
padding-top: -10px !important; }
.scroll .fa {
font-size: 30px !important; margin-top: -5px !important; margin-left: 1px !important; transition: 0.5s !important; }
/* Tooltip container */ .tooltip {
position: relative !important; display: inline-block !important; font-weight: bold !important; color: #0A1612 !important; cursor: pointer !important; }
/* Tooltip text */ .tooltip span {
display: block !important; visibility: hidden !important; background-color: #1a1a1a !important; color: #fff !important; text-align: center !important; padding: 20px !important; border-radius: 6px !important; font-weight: normal !important; /* Position the tooltip text */ position: absolute !important; z-index: 1 !important; bottom: 125% !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; font-size: small !important; /* Fade in tooltip */ opacity: 0 !important; transition: opacity 0.8s !important; }
/* Tooltip arrow */ .tooltip span::after {
content: "" !important; position: absolute !important; top: 100% !important; left: 50% !important; margin-left: -5px !important; border-width: 5px !important; border-style: solid !important; border-color: #1a1a1a transparent transparent transparent !important; }
/* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .shortdef {
visibility: visible !important; width: 20vw !important; opacity: 1 !important; }
/*.tooltip:active {
.longdef { width: 40vw; visibility: visible; opacity: 1; } .shortdef { visibility: hidden; opacity: 0; }
}
- /
nav {
flex: 1 0 !important; max-width: 30em !important; } nav #toc { padding: 6em 2em !important; position: -webkit-sticky !important; position: sticky !important; top: 0 !important; white-space: nowrap !important; } nav #toc h1 { font-size: 1.5em !important; } nav #toc ul li { padding: .5em 0 !important; } nav #toc ul li a { font-size: 1.3em !important; } nav #toc ul li ul { height: 0 !important; overflow: hidden !important; padding: .75em 0 .5em 1em !important; } nav #toc ul li ul.current { height: auto !important; } nav #toc ul li ul li a { font-size: 1em !important; }
@media screen and (max-width: calc(20em + 65em)) {
nav > #toc ul > li > ul { height: auto !important; } }
footer {
font-size: medium !important; font-family: "Arial" !important; box-sizing: border-box !important; background-color: #1a1a1a !important; color: #fffefb !important; padding: 25px !important; positioN: relative !important; z-index: 999 !important; } footer::after { clear: both !important; content: "" !important; display: block !important; } footer div.footer-name { width: calc(41.66667%) !important; float: left !important; margin-left: 0px !important; line-height: 6rem !important; height: 6rem !important; } footer div.footer-name * { float: left !important; } footer div.spacer { width: calc(33.33333%) !important; float: left !important; margin-left: 0px !important; line-height: 6rem !important; height: 6rem !important; } footer div.social-container { width: calc(25%) !important; float: left !important; margin-left: 0px !important; }
/*Code courtesy of https://codepen.io/brandondward/pen/RpyaKL*/ .social-container {
width: calc(25% - 25px) !important; float: left !important; margin-left: 20px !important; width: 400px !important; }
.social-icons {
padding: 0 !important; list-style: none !important; margin: 1em !important; } .social-icons li { display: inline-block !important; margin: 0.15em !important; position: relative !important; font-size: 1.2em !important; } .social-icons i { color: #fff !important; position: absolute !important; top: 21px !important; left: 21px !important; transition: all 265ms ease-out !important; } .social-icons a { display: inline-block !important; } .social-icons a:before { -webkit-transform: scale(1) !important; transform: scale(1) !important; content: " " !important; width: 60px !important; height: 60px !important; border-radius: 100% !important; display: block !important; background: linear-gradient(45deg, #eb00c2, #26fffa) !important; transition: all 265ms ease-out !important; } .social-icons a:hover:before { -webkit-transform: scale(0) !important; transform: scale(0) !important; transition: all 265ms ease-in !important; } .social-icons a:hover i { -webkit-transform: scale(2.2) !important; transform: scale(2.2) !important; color: #eb00c2 !important; background: -webkit-linear-gradient(45deg, #eb00c2, #26fffa) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; transition: all 265ms ease-in !important; }