Difference between revisions of "Template:MIT"

(Blanked the page)
Line 1: Line 1:
 +
{{MIT}}
 +
<html lang='en'>
  
 +
    <head>       
 +
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
 +
        <title>MIT iGEM 2017</title>
 +
       
 +
    </head>
 +
   
 +
    <body>
 +
        <header>
 +
            <nav>
 +
                <div class="row">
 +
                    <img src="https://static.igem.org/mediawiki/2017/9/9c/MIT-Logo.jpg" alt="iGEM logo" class="logo">
 +
                    <ul class="main-nav">
 +
                        <li><a href="#">Home</a></li>
 +
                        <li><a href="#">About Us</a></li>
 +
                        <li><a href="#">Project</a></li>
 +
                        <li><a href="#">Lab Work</a></li>
 +
                        <li><a href="#">Modelling</a></li>
 +
                        <li><a href="#">Human Practices</a></li>
 +
                    </ul>
 +
                </div>
 +
            </nav>
 +
            <div class="hero-text-box">
 +
            <h1>Goodbye randomness. <br> Hello controlled splicing.</h1>
 +
            <a class = "btn btn-full" href="#">Background</a>
 +
            <a class = "btn btn-ghost" href="#">Show me how</a>
 +
           
 +
            </div>
 +
       
 +
        </header>
 +
       
 +
   
 +
   
 +
    </body>
 +
 +
 +
<style>
 +
/* ==================================================
 +
  BASIC SETUP
 +
 +
 +
 +
*/
 +
 +
 +
*{
 +
    margin: 0;
 +
    padding: 0;
 +
    box-sizing: border-box;
 +
   
 +
}
 +
 +
html {
 +
    background-color: #fff;
 +
    color: #555;
 +
    font-family: 'Lato', 'Arial', sans-serif;
 +
    font-weight: 300;
 +
    font-size: 20px;
 +
    text-rendering: optimizeLegibility;
 +
}
 +
 +
 +
.row{
 +
    max-width: 1140px;
 +
    margin: 0 auto;
 +
}
 +
 +
 +
 +
 +
 +
h1{
 +
    margin: 0;
 +
    color: #fff;
 +
    font-size: 240%;
 +
    font-weight: 300;
 +
    text-transform:uppercase;
 +
    letter-spacing: 1px;
 +
    word-spacing: 4px;
 +
   
 +
}
 +
 +
 +
/* ------------BUTTONS-----------*/
 +
.btn:link,
 +
.btn:visited{
 +
    display: inline-block;
 +
    padding: 10px 30px;
 +
    font-weight: 300;
 +
    text-decoration: none;
 +
    border-radius: 200px;
 +
    transition: background-color 0.2s, border 0.2s, color 0.2s;
 +
}
 +
 +
 +
.btn-full:link,
 +
.btn-full:visited{
 +
    background-color: #e67e22;
 +
    border: 1px solid #e67e22;
 +
    color: #fff;
 +
    margin-right: 15px;
 +
}
 +
 +
.btn-ghost:link,
 +
.btn-ghost:visited{
 +
    border: 1px solid #e67e22;
 +
    color: #e67e22;
 +
}
 +
 +
 +
.btn:hover,
 +
.btn:active{
 +
    background-color: #cf6d17;
 +
}
 +
 +
 +
.btn-full:hover,
 +
.btn-full:active{
 +
    border: 1px solid #cf6d17;
 +
 +
}
 +
 +
.btn-ghost:hover,
 +
.btn-ghost:active{
 +
    border: 1px solid #e67e22;
 +
    color: #fff;
 +
}
 +
 +
 +
/* ================================================== */
 +
/* =========header=========*/
 +
 +
header {
 +
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url(https://static.igem.org/mediawiki/2017/f/fe/Puzzle.jpg);
 +
    background-size: cover;
 +
    background-position: center;
 +
    height: 100vh;
 +
}
 +
 +
.hero-text-box{
 +
    position: absolute;
 +
    width: 1140px;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%,-50%);
 +
}
 +
 +
.hero-text-box h1{
 +
    margin-bottom: 20px;
 +
}
 +
 +
.logo{
 +
    height: 100px;
 +
    width:auto;
 +
    float: left;
 +
    margin-top: 20px;
 +
    background-color: #000;
 +
    border-radius: 30px;
 +
   
 +
}
 +
 +
.main-nav{
 +
    float:right;
 +
    list-style: none;
 +
    margin-top: 55px;
 +
}
 +
 +
.main-nav li{
 +
    display: inline-block;
 +
    margin-left: 40px;
 +
}
 +
 +
.main-nav li a:link,
 +
.main-nav li a:visited{
 +
    padding: 8px 0;
 +
    color: #fff;
 +
    text-decoration: none;
 +
    text-transform: uppercase;
 +
    font-size: 90%;
 +
    border-bottom: 2px solid transparent;
 +
    transition: border-bottom 0.2s;
 +
}
 +
 +
 +
.main-nav li a:hover,
 +
.main-nav li a:active{
 +
    border-bottom: 2px solid #e67d22
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
/*  SECTIONS  ============================================================================= */
 +
 +
.section {
 +
clear: both;
 +
padding: 0px;
 +
margin: 0px;
 +
}
 +
 +
/*  GROUPING  ============================================================================= */
 +
 +
.row {
 +
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
 +
}
 +
 +
.row:before,
 +
.row:after {
 +
    content:"";
 +
    display:table;
 +
}
 +
.row:after {
 +
    clear:both;
 +
}
 +
 +
/*  GRID COLUMN SETUP  ==================================================================== */
 +
 +
.col {
 +
display: block;
 +
float:left;
 +
margin: 1% 0 1% 1.6%;
 +
}
 +
 +
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
 +
 +
 +
/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.col {
 +
/*margin: 1% 0 1% 0%;*/
 +
        margin: 0;
 +
}
 +
}
 +
 +
 +
/*  GRID OF TWO  ============================================================================= */
 +
 +
 +
.span-2-of-2 {
 +
width: 100%;
 +
}
 +
 +
.span-1-of-2 {
 +
width: 49.2%;
 +
}
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-2-of-2 {
 +
width: 100%;
 +
}
 +
.span-1-of-2 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
/*  GRID OF THREE  ============================================================================= */
 +
 +
 +
.span-3-of-3 {
 +
width: 100%;
 +
}
 +
 +
.span-2-of-3 {
 +
width: 66.13%;
 +
}
 +
 +
.span-1-of-3 {
 +
width: 32.26%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-3-of-3 {
 +
width: 100%;
 +
}
 +
.span-2-of-3 {
 +
width: 100%;
 +
}
 +
.span-1-of-3 {
 +
width: 100%;
 +
}
 +
}
 +
 +
/*  GRID OF FOUR  ============================================================================= */
 +
 +
 +
.span-4-of-4 {
 +
width: 100%;
 +
}
 +
 +
.span-3-of-4 {
 +
width: 74.6%;
 +
}
 +
 +
.span-2-of-4 {
 +
width: 49.2%;
 +
}
 +
 +
.span-1-of-4 {
 +
width: 23.8%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-4-of-4 {
 +
width: 100%;
 +
}
 +
.span-3-of-4 {
 +
width: 100%;
 +
}
 +
.span-2-of-4 {
 +
width: 100%;
 +
}
 +
.span-1-of-4 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
/*  GRID OF FIVE  ============================================================================= */
 +
 +
 +
.span-5-of-5 {
 +
width: 100%;
 +
}
 +
 +
.span-4-of-5 {
 +
  width: 79.68%;
 +
}
 +
 +
.span-3-of-5 {
 +
  width: 59.36%;
 +
}
 +
 +
.span-2-of-5 {
 +
  width: 39.04%;
 +
}
 +
 +
.span-1-of-5 {
 +
  width: 18.72%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-5-of-5 {
 +
width: 100%;
 +
}
 +
.span-4-of-5 {
 +
width: 100%;
 +
}
 +
.span-3-of-5 {
 +
width: 100%;
 +
}
 +
.span-2-of-5 {
 +
width: 100%;
 +
}
 +
.span-1-of-5 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
/*  GRID OF SIX  ============================================================================= */
 +
 +
 +
.span-6-of-6 {
 +
width: 100%;
 +
}
 +
 +
.span-5-of-6 {
 +
  width: 83.06%;
 +
}
 +
 +
.span-4-of-6 {
 +
  width: 66.13%;
 +
}
 +
 +
.span-3-of-6 {
 +
  width: 49.2%;
 +
}
 +
 +
.span-2-of-6 {
 +
  width: 32.26%;
 +
}
 +
 +
.span-1-of-6 {
 +
  width: 15.33%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-6-of-6 {
 +
width: 100%;
 +
}
 +
.span-5-of-6 {
 +
width: 100%;
 +
}
 +
.span-4-of-6 {
 +
width: 100%;
 +
}
 +
.span-3-of-6 {
 +
width: 100%;
 +
}
 +
.span-2-of-6 {
 +
width: 100%;
 +
}
 +
.span-1-of-6 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
 +
/*  GRID OF SEVEN  ============================================================================= */
 +
 +
 +
.span-7-of-7 {
 +
width: 100%;
 +
}
 +
 +
.span-6-of-7 {
 +
width: 85.48%;
 +
}
 +
 +
.span-5-of-7 {
 +
  width: 70.97%;
 +
}
 +
 +
.span-4-of-7 {
 +
  width: 56.45%;
 +
}
 +
 +
.span-3-of-7 {
 +
  width: 41.94%;
 +
}
 +
 +
.span-2-of-7 {
 +
  width: 27.42%;
 +
}
 +
 +
.span-1-of-7 {
 +
  width: 12.91%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-7-of-7 {
 +
width: 100%;
 +
}
 +
.span-6-of-7 {
 +
width: 100%;
 +
}
 +
.span-5-of-7 {
 +
width: 100%;
 +
}
 +
.span-4-of-7 {
 +
width: 100%;
 +
}
 +
.span-3-of-7 {
 +
width: 100%;
 +
}
 +
.span-2-of-7 {
 +
width: 100%;
 +
}
 +
.span-1-of-7 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
/*  GRID OF EIGHT  ============================================================================= */
 +
 +
 +
.span-8-of-8 {
 +
width: 100%;
 +
}
 +
 +
.span-7-of-8 {
 +
width: 87.3%;
 +
}
 +
 +
.span-6-of-8 {
 +
width: 74.6%;
 +
}
 +
 +
.span-5-of-8 {
 +
width: 61.9%;
 +
}
 +
 +
.span-4-of-8 {
 +
width: 49.2%;
 +
}
 +
 +
.span-3-of-8 {
 +
width: 36.5%;
 +
}
 +
 +
.span-2-of-8 {
 +
width: 23.8%;
 +
}
 +
 +
.span-1-of-8 {
 +
width: 11.1%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-8-of-8 {
 +
width: 100%;
 +
}
 +
.span-7-of-8 {
 +
width: 100%;
 +
}
 +
.span-6-of-8 {
 +
width: 100%;
 +
}
 +
.span-5-of-8 {
 +
width: 100%;
 +
}
 +
.span-4-of-8 {
 +
width: 100%;
 +
}
 +
.span-3-of-8 {
 +
width: 100%;
 +
}
 +
.span-2-of-8 {
 +
width: 100%;
 +
}
 +
.span-1-of-8 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
/*  GRID OF NINE  ============================================================================= */
 +
 +
 +
.span-9-of-9 {
 +
width: 100%;
 +
}
 +
 +
.span-8-of-9 {
 +
width: 88.71%;
 +
}
 +
 +
.span-7-of-9 {
 +
width: 77.42%;
 +
}
 +
 +
.span-6-of-9 {
 +
width: 66.13%;
 +
}
 +
 +
.span-5-of-9 {
 +
width: 54.84%;
 +
}
 +
 +
.span-4-of-9 {
 +
width: 43.55%;
 +
}
 +
 +
.span-3-of-9 {
 +
width: 32.26%;
 +
}
 +
 +
.span-2-of-9 {
 +
width: 20.97%;
 +
}
 +
 +
.span-1-of-9 {
 +
width: 9.68%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-9-of-9 {
 +
width: 100%;
 +
}
 +
.span-8-of-9 {
 +
width: 100%;
 +
}
 +
.span-7-of-9 {
 +
width: 100%;
 +
}
 +
.span-6-of-9 {
 +
width: 100%;
 +
}
 +
.span-5-of-9 {
 +
width: 100%;
 +
}
 +
.span-4-of-9 {
 +
width: 100%;
 +
}
 +
.span-3-of-9 {
 +
width: 100%;
 +
}
 +
.span-2-of-9 {
 +
width: 100%;
 +
}
 +
.span-1-of-9 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
/*  GRID OF TEN  ============================================================================= */
 +
 +
 +
.span-10-of-10 {
 +
width: 100%;
 +
}
 +
 +
.span-9-of-10 {
 +
width: 89.84%;
 +
}
 +
 +
.span-8-of-10 {
 +
width: 79.68%;
 +
}
 +
 +
.span-7-of-10 {
 +
width: 69.52%;
 +
}
 +
 +
.span-6-of-10 {
 +
width: 59.36%;
 +
}
 +
 +
.span-5-of-10 {
 +
width: 49.2%;
 +
}
 +
 +
.span-4-of-10 {
 +
width: 39.04%;
 +
}
 +
 +
.span-3-of-10 {
 +
width: 28.88%;
 +
}
 +
 +
.span-2-of-10 {
 +
width: 18.72%;
 +
}
 +
 +
.span-1-of-10 {
 +
width: 8.56%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-10-of-10 {
 +
width: 100%;
 +
}
 +
.span-9-of-10 {
 +
width: 100%;
 +
}
 +
.span-8-of-10 {
 +
width: 100%;
 +
}
 +
.span-7-of-10 {
 +
width: 100%;
 +
}
 +
.span-6-of-10 {
 +
width: 100%;
 +
}
 +
.span-5-of-10 {
 +
width: 100%;
 +
}
 +
.span-4-of-10 {
 +
width: 100%;
 +
}
 +
.span-3-of-10 {
 +
width: 100%;
 +
}
 +
.span-2-of-10 {
 +
width: 100%;
 +
}
 +
.span-1-of-10 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
/*  GRID OF ELEVEN  ============================================================================= */
 +
 +
.span-11-of-11 {
 +
width: 100%;
 +
}
 +
 +
.span-10-of-11 {
 +
width: 90.76%;
 +
}
 +
 +
.span-9-of-11 {
 +
width: 81.52%;
 +
}
 +
 +
.span-8-of-11 {
 +
width: 72.29%;
 +
}
 +
 +
.span-7-of-11 {
 +
width: 63.05%;
 +
}
 +
 +
.span-6-of-11 {
 +
width: 53.81%;
 +
}
 +
 +
.span-5-of-11 {
 +
width: 44.58%;
 +
}
 +
 +
.span-4-of-11 {
 +
width: 35.34%;
 +
}
 +
 +
.span-3-of-11 {
 +
width: 26.1%;
 +
}
 +
 +
.span-2-of-11 {
 +
width: 16.87%;
 +
}
 +
 +
.span-1-of-11 {
 +
width: 7.63%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-11-of-11 {
 +
width: 100%;
 +
}
 +
.span-10-of-11 {
 +
width: 100%;
 +
}
 +
.span-9-of-11 {
 +
width: 100%;
 +
}
 +
.span-8-of-11 {
 +
width: 100%;
 +
}
 +
.span-7-of-11 {
 +
width: 100%;
 +
}
 +
.span-6-of-11 {
 +
width: 100%;
 +
}
 +
.span-5-of-11 {
 +
width: 100%;
 +
}
 +
.span-4-of-11 {
 +
width: 100%;
 +
}
 +
.span-3-of-11 {
 +
width: 100%;
 +
}
 +
.span-2-of-11 {
 +
width: 100%;
 +
}
 +
.span-1-of-11 {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
/*  GRID OF TWELVE  ============================================================================= */
 +
 +
.span-12-of-12 {
 +
width: 100%;
 +
}
 +
 +
.span-11-of-12 {
 +
width: 91.53%;
 +
}
 +
 +
.span-10-of-12 {
 +
width: 83.06%;
 +
}
 +
 +
.span-9-of-12 {
 +
width: 74.6%;
 +
}
 +
 +
.span-8-of-12 {
 +
width: 66.13%;
 +
}
 +
 +
.span-7-of-12 {
 +
width: 57.66%;
 +
}
 +
 +
.span-6-of-12 {
 +
width: 49.2%;
 +
}
 +
 +
.span-5-of-12 {
 +
width: 40.73%;
 +
}
 +
 +
.span-4-of-12 {
 +
width: 32.26%;
 +
}
 +
 +
.span-3-of-12 {
 +
width: 23.8%;
 +
}
 +
 +
.span-2-of-12 {
 +
width: 15.33%;
 +
}
 +
 +
.span-1-of-12 {
 +
width: 6.86%;
 +
}
 +
 +
 +
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 +
 +
@media only screen and (max-width: 480px) {
 +
.span-12-of-12 {
 +
width: 100%;
 +
}
 +
.span-11-of-12 {
 +
width: 100%;
 +
}
 +
.span-10-of-12 {
 +
width: 100%;
 +
}
 +
.span-9-of-12 {
 +
width: 100%;
 +
}
 +
.span-8-of-12 {
 +
width: 100%;
 +
}
 +
.span-7-of-12 {
 +
width: 100%;
 +
}
 +
.span-6-of-12 {
 +
width: 100%;
 +
}
 +
.span-5-of-12 {
 +
width: 100%;
 +
}
 +
.span-4-of-12 {
 +
width: 100%;
 +
}
 +
.span-3-of-12 {
 +
width: 100%;
 +
}
 +
.span-2-of-12 {
 +
width: 100%;
 +
}
 +
.span-1-of-12 {
 +
width: 100%;
 +
}
 +
}
 +
 +
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
 +
 +
/* Document
 +
  ========================================================================== */
 +
 +
/**
 +
* 1. Correct the line height in all browsers.
 +
* 2. Prevent adjustments of font size after orientation changes in
 +
*    IE on Windows Phone and in iOS.
 +
*/
 +
 +
html {
 +
  line-height: 1.15; /* 1 */
 +
  -ms-text-size-adjust: 100%; /* 2 */
 +
  -webkit-text-size-adjust: 100%; /* 2 */
 +
}
 +
 +
/* Sections
 +
  ========================================================================== */
 +
 +
/**
 +
* Remove the margin in all browsers (opinionated).
 +
*/
 +
 +
body {
 +
  margin: 0;
 +
}
 +
 +
/**
 +
* Add the correct display in IE 9-.
 +
*/
 +
 +
article,
 +
aside,
 +
footer,
 +
header,
 +
nav,
 +
section {
 +
  display: block;
 +
}
 +
 +
/**
 +
* Correct the font size and margin on `h1` elements within `section` and
 +
* `article` contexts in Chrome, Firefox, and Safari.
 +
*/
 +
 +
h1 {
 +
  font-size: 2em;
 +
  margin: 0.67em 0;
 +
}
 +
 +
/* Grouping content
 +
  ========================================================================== */
 +
 +
/**
 +
* Add the correct display in IE 9-.
 +
* 1. Add the correct display in IE.
 +
*/
 +
 +
figcaption,
 +
figure,
 +
main { /* 1 */
 +
  display: block;
 +
}
 +
 +
/**
 +
* Add the correct margin in IE 8.
 +
*/
 +
 +
figure {
 +
  margin: 1em 40px;
 +
}
 +
 +
/**
 +
* 1. Add the correct box sizing in Firefox.
 +
* 2. Show the overflow in Edge and IE.
 +
*/
 +
 +
hr {
 +
  box-sizing: content-box; /* 1 */
 +
  height: 0; /* 1 */
 +
  overflow: visible; /* 2 */
 +
}
 +
 +
/**
 +
* 1. Correct the inheritance and scaling of font size in all browsers.
 +
* 2. Correct the odd `em` font sizing in all browsers.
 +
*/
 +
 +
pre {
 +
  font-family: monospace, monospace; /* 1 */
 +
  font-size: 1em; /* 2 */
 +
}
 +
 +
/* Text-level semantics
 +
  ========================================================================== */
 +
 +
/**
 +
* 1. Remove the gray background on active links in IE 10.
 +
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 +
*/
 +
 +
a {
 +
  background-color: transparent; /* 1 */
 +
  -webkit-text-decoration-skip: objects; /* 2 */
 +
}
 +
 +
/**
 +
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 +
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 +
*/
 +
 +
abbr[title] {
 +
  border-bottom: none; /* 1 */
 +
  text-decoration: underline; /* 2 */
 +
  text-decoration: underline dotted; /* 2 */
 +
}
 +
 +
/**
 +
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 +
*/
 +
 +
b,
 +
strong {
 +
  font-weight: inherit;
 +
}
 +
 +
/**
 +
* Add the correct font weight in Chrome, Edge, and Safari.
 +
*/
 +
 +
b,
 +
strong {
 +
  font-weight: bolder;
 +
}
 +
 +
/**
 +
* 1. Correct the inheritance and scaling of font size in all browsers.
 +
* 2. Correct the odd `em` font sizing in all browsers.
 +
*/
 +
 +
code,
 +
kbd,
 +
samp {
 +
  font-family: monospace, monospace; /* 1 */
 +
  font-size: 1em; /* 2 */
 +
}
 +
 +
/**
 +
* Add the correct font style in Android 4.3-.
 +
*/
 +
 +
dfn {
 +
  font-style: italic;
 +
}
 +
 +
/**
 +
* Add the correct background and color in IE 9-.
 +
*/
 +
 +
mark {
 +
  background-color: #ff0;
 +
  color: #000;
 +
}
 +
 +
/**
 +
* 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;
 +
  vertical-align: baseline;
 +
}
 +
 +
sub {
 +
  bottom: -0.25em;
 +
}
 +
 +
sup {
 +
  top: -0.5em;
 +
}
 +
 +
/* Embedded content
 +
  ========================================================================== */
 +
 +
/**
 +
* Add the correct display in IE 9-.
 +
*/
 +
 +
audio,
 +
video {
 +
  display: inline-block;
 +
}
 +
 +
/**
 +
* Add the correct display in iOS 4-7.
 +
*/
 +
 +
audio:not([controls]) {
 +
  display: none;
 +
  height: 0;
 +
}
 +
 +
/**
 +
* Remove the border on images inside links in IE 10-.
 +
*/
 +
 +
img {
 +
  border-style: none;
 +
}
 +
 +
/**
 +
* Hide the overflow in IE.
 +
*/
 +
 +
svg:not(:root) {
 +
  overflow: hidden;
 +
}
 +
 +
/* Forms
 +
  ========================================================================== */
 +
 +
/**
 +
* 1. Change the font styles in all browsers (opinionated).
 +
* 2. Remove the margin in Firefox and Safari.
 +
*/
 +
 +
button,
 +
input,
 +
optgroup,
 +
select,
 +
textarea {
 +
  font-family: sans-serif; /* 1 */
 +
  font-size: 100%; /* 1 */
 +
  line-height: 1.15; /* 1 */
 +
  margin: 0; /* 2 */
 +
}
 +
 +
/**
 +
* Show the overflow in IE.
 +
* 1. Show the overflow in Edge.
 +
*/
 +
 +
button,
 +
input { /* 1 */
 +
  overflow: visible;
 +
}
 +
 +
/**
 +
* Remove the inheritance of text transform in Edge, Firefox, and IE.
 +
* 1. Remove the inheritance of text transform in Firefox.
 +
*/
 +
 +
button,
 +
select { /* 1 */
 +
  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,
 +
html [type="button"], /* 1 */
 +
[type="reset"],
 +
[type="submit"] {
 +
  -webkit-appearance: button; /* 2 */
 +
}
 +
 +
/**
 +
* 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;
 +
}
 +
 +
/**
 +
* Correct the padding in Firefox.
 +
*/
 +
 +
fieldset {
 +
  padding: 0.35em 0.75em 0.625em;
 +
}
 +
 +
/**
 +
* 1. Correct the text wrapping in Edge and IE.
 +
* 2. Correct the color inheritance from `fieldset` elements in IE.
 +
* 3. Remove the padding so developers are not caught out when they zero out
 +
*    `fieldset` elements in all browsers.
 +
*/
 +
 +
legend {
 +
  box-sizing: border-box; /* 1 */
 +
  color: inherit; /* 2 */
 +
  display: table; /* 1 */
 +
  max-width: 100%; /* 1 */
 +
  padding: 0; /* 3 */
 +
  white-space: normal; /* 1 */
 +
}
 +
 +
/**
 +
* 1. Add the correct display in IE 9-.
 +
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 +
*/
 +
 +
progress {
 +
  display: inline-block; /* 1 */
 +
  vertical-align: baseline; /* 2 */
 +
}
 +
 +
/**
 +
* Remove the default vertical scrollbar in IE.
 +
*/
 +
 +
textarea {
 +
  overflow: auto;
 +
}
 +
 +
/**
 +
* 1. Add the correct box sizing in IE 10-.
 +
* 2. Remove the padding in IE 10-.
 +
*/
 +
 +
[type="checkbox"],
 +
[type="radio"] {
 +
  box-sizing: border-box; /* 1 */
 +
  padding: 0; /* 2 */
 +
}
 +
 +
/**
 +
* 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"] {
 +
  -webkit-appearance: textfield; /* 1 */
 +
  outline-offset: -2px; /* 2 */
 +
}
 +
 +
/**
 +
* 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 {
 +
  -webkit-appearance: button; /* 1 */
 +
  font: inherit; /* 2 */
 +
}
 +
 +
/* Interactive
 +
  ========================================================================== */
 +
 +
/*
 +
* Add the correct display in IE 9-.
 +
* 1. Add the correct display in Edge, IE, and Firefox.
 +
*/
 +
 +
details, /* 1 */
 +
menu {
 +
  display: block;
 +
}
 +
 +
/*
 +
* Add the correct display in all browsers.
 +
*/
 +
 +
summary {
 +
  display: list-item;
 +
}
 +
 +
/* Scripting
 +
  ========================================================================== */
 +
 +
/**
 +
* Add the correct display in IE 9-.
 +
*/
 +
 +
canvas {
 +
  display: inline-block;
 +
}
 +
 +
/**
 +
* Add the correct display in IE.
 +
*/
 +
 +
template {
 +
  display: none;
 +
}
 +
 +
/* Hidden
 +
  ========================================================================== */
 +
 +
/**
 +
* Add the correct display in IE 10-.
 +
*/
 +
 +
[hidden] {
 +
  display: none;
 +
}
 +
 +
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: normal;
 +
  font-weight: 100;
 +
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v13/eFRpvGLEW31oiexbYNx7Y_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: normal;
 +
  font-weight: 100;
 +
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v13/GtRkRNTnri0g82CjKnEB0Q.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: normal;
 +
  font-weight: 300;
 +
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: normal;
 +
  font-weight: 300;
 +
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: italic;
 +
  font-weight: 300;
 +
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v13/XNVd6tsqi9wmKNvnh5HNEBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: italic;
 +
  font-weight: 300;
 +
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v13/2HG_tEPiQ4Z6795cGfdivFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 +
 +
 +
 +
</style> 
 +
</html>

Revision as of 17:39, 31 July 2017

MIT iGEM 2017

Goodbye randomness.
Hello controlled splicing.

Background Show me how