|
|
| Line 1: |
Line 1: |
| | {{MIT}} | | {{MIT}} |
| − | <html lang='en'> | + | <html> |
| | | | |
| − | <head>
| + | <h1 style="color:#f20253; text-align: center; font-size: 40px; line-height: 40px;">Splice & Dice</h1> |
| − | <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
| + | |
| − | <link href="https://fonts.googleapis.com/css?family=Courgette" 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 nav-text">
| + | |
| − | <li><a href="https://2017.igem.org/Team:MIT">Home</a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/team">About Us</a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/project">Background</a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/parts">Experiments</a></li>
| + | |
| − | <li><a href="#">Lab Work</a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/model">Modelling</a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/hp">Human Practices</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </nav>
| + | |
| − | <div class="hero-text-box">
| + | |
| − | <h1>Artificial Control of <br> Alternative Splicing</h1>
| + | |
| − | <a class = "btn btn-full" href="#">Background</a>
| + | |
| − | <a class = "btn btn-ghost" href="#">Show me how</a>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </header>
| + | |
| | | | |
| − | <section class="introduction">
| + | <h2 style="color:#f20253; text-align: center; font-size: 20px; line-height: 40px;">Using alternative splicing to control alternative splicing in mammalian cells</h2> |
| − | <div class="row">
| + | |
| − | <h2>What is Alternative splicing?</h2>
| + | |
| − | </div>
| + | |
| − | <div class="row">
| + | |
| − | <p>Alternative splicing is a process that takes mRNA transcripts and modifies it in various ways to create a final mature mRNA molecule for translation. Some sequences known as introns are removed; other sequences known as exons remain to be translated. With such a process, a single gene can result in many types of proteins transcripts<br>
| + | |
| − | <br>
| + | |
| − | Our iGEM projects seeks to control alternative splicing of RNA, specifically exon skipping and inclusion, using a protein called Cas13a. This is a protein that attaches to RNA via a complementary guide RNA, then cuts the RNA strand. For our purposes, we're using a modified version of this protein, known as dCas13a, that can attach, but doesn't cut. By targeting certain portions of a fluorescent protein construct, we can determine whether or not we achieved the intended isoforms based on the presence or absence of the fluorescent protein in addition to sequencing.
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </section>
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| | | | |
| − |
| + | <p>Alternative splicing is a process that takes mRNA transcripts and modifies it in various ways to create a final mature mRNA molecule for translation. Some sequences known as introns are removed; other sequences known as exons remain to be translated. With such a process, a single gene can result in many types of proteins transcripts |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | </body>
| + | |
| | | | |
| − | | + | Our iGEM projects seeks to control alternative splicing of RNA, specifically exon skipping and inclusion, using a protein called Cas13a. This is a protein that attaches to RNA via a complementary guide RNA, then cuts the RNA strand. For our purposes, we're using a modified version of this protein, known as dCas13a, that can attach, but doesn't cut. By targeting certain portions of a fluorescent protein construct, we can determine whether or not we achieved the intended isoforms based on the presence or absence of the fluorescent protein in addition to sequencing. |
| − | <style>
| + | </p> |
| − | /* ==================================================
| + | |
| − | BASIC SETUP
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | */
| + | |
| − | | + | |
| − | /* ==================================================
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav-text{
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | h1,
| + | |
| − | h2,
| + | |
| − | h3{
| + | |
| − |
| + | |
| − | font-weight: 300;
| + | |
| − | text-transform:uppercase;
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | h1{
| + | |
| − | margin-top: 0;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | margin: 0;
| + | |
| − | color: #fff;
| + | |
| − | font-size: 240%;
| + | |
| − | word-spacing: 4px;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | }
| + | |
| − | | + | |
| − | h2{
| + | |
| − | font-size: 180%;
| + | |
| − | word-spacing: 2px;
| + | |
| − | text-align: center;
| + | |
| − | margin-bottom: 30px;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | }
| + | |
| − | | + | |
| − | h3{
| + | |
| − | font-size: 110%;
| + | |
| − | margin-bottom: 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | h2:after{
| + | |
| − | display: block;
| + | |
| − | height: 2px;
| + | |
| − | background-color: #2980b9;
| + | |
| − | content: " ";
| + | |
| − | width: 100px;
| + | |
| − | margin: 0 auto;
| + | |
| − | margin-top: 30px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* ------------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: #2980b9;
| + | |
| − | border: 1px solid #2980b9;
| + | |
| − | color: #fff;
| + | |
| − | margin-right: 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .btn-ghost:link,
| + | |
| − | .btn-ghost:visited{
| + | |
| − | border: 1px solid #2980b9;
| + | |
| − | color: #2980b9;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .btn:hover,
| + | |
| − | .btn:active{
| + | |
| − | background-color: #236d9d;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .btn-full:hover,
| + | |
| − | .btn-full:active{
| + | |
| − | border: 1px solid #236d9d;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | .btn-ghost:hover,
| + | |
| − | .btn-ghost:active{
| + | |
| − | border: 1px solid #2980b9;
| + | |
| − | 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;
| + | |
| − | background-attachment: fixed;
| + | |
| − | }
| + | |
| − | | + | |
| − | .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 #2980b9;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Section Introduction */
| + | |
| − | /* Section Introduction */
| + | |
| − | /* Section Introduction */
| + | |
| − | .introduction{
| + | |
| − | margin-top: 90px;
| + | |
| − | margin-bottom: 150px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .introduction p{
| + | |
| − | font-size: 120%;
| + | |
| − | line-height: 150%;
| + | |
| − | margin-top: 15px;
| + | |
| − | font-family: 'Courgette', cursive;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* Section Quotes */
| + | |
| − | /* Section Quotes */
| + | |
| − | /* Section Quotes */
| + | |
| − | .section-quotes{
| + | |
| − | background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url(img/capsule.jpg);
| + | |
| − | margin-top: 70px;
| + | |
| − | margin-bottom: 80px;
| + | |
| − | color: #fff;
| + | |
| − | background-attachment: fixed;
| + | |
| − | }
| + | |
| − | | + | |
| − | .section-quotes h2{
| + | |
| − | margin-top: 70px;
| + | |
| − | }
| + | |
| − | | + | |
| − | cite{
| + | |
| − | font-size: 90%;
| + | |
| − | margin-top: 25px;
| + | |
| − | display: block;
| + | |
| − | margin-bottom: 70px;
| + | |
| − | }
| + | |
| − | | + | |
| − | cite img{
| + | |
| − | height: 45px;
| + | |
| − | border-radius: 200%;
| + | |
| − | margin-right: 10px;
| + | |
| − | vertical-align: middle;
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | blockquote{
| + | |
| − | padding: 2%;
| + | |
| − | font-style: italic;
| + | |
| − | line-height: 145%;
| + | |
| − | position: relative;
| + | |
| − | margin-top: 40px;
| + | |
| − | }
| + | |
| − | | + | |
| − | blockquote:before{
| + | |
| − | content: "\201c";
| + | |
| − | font-size: 400%;
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | top: -5px;
| + | |
| − | left: -3px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* 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>
| + | |
Alternative splicing is a process that takes mRNA transcripts and modifies it in various ways to create a final mature mRNA molecule for translation. Some sequences known as introns are removed; other sequences known as exons remain to be translated. With such a process, a single gene can result in many types of proteins transcripts
Our iGEM projects seeks to control alternative splicing of RNA, specifically exon skipping and inclusion, using a protein called Cas13a. This is a protein that attaches to RNA via a complementary guide RNA, then cuts the RNA strand. For our purposes, we're using a modified version of this protein, known as dCas13a, that can attach, but doesn't cut. By targeting certain portions of a fluorescent protein construct, we can determine whether or not we achieved the intended isoforms based on the presence or absence of the fluorescent protein in addition to sequencing.
