|
|
| Line 1: |
Line 1: |
| | + | {{MIT}} |
| | <html> | | <html> |
| | | | |
| − | <style> | + | <p>After designing our 2-exon mKate HBG reporter, which only showed mKate knockdown, we needed a positive reporter. We designed two 3-exon reporters, a split mKate reporter and a dual fluorescence reporter: </p> |
| − | body {
| + | |
| − | margin: 0;
| + | |
| − | background-color: #ce2132!important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .firstHeading, .logo_2017 {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sideMenu{
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | #content {
| + | |
| − | margin-left: auto;
| + | |
| − | align-self: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navdiv-wrapper {
| + | |
| − | height: 40px;
| + | |
| − | background: rgb(61, 56, 57);
| + | |
| − | }
| + | |
| − | | + | |
| − | .navdiv-cover {
| + | |
| − | height: 40px;
| + | |
| − | position: absolute;
| + | |
| − | background: rgb(61, 56, 57);
| + | |
| − | width: 200vw;
| + | |
| − | left: -100vw;
| + | |
| − | | + | |
| − | }
| + | |
| − |
| + | |
| − | #content .navdiv {
| + | |
| − | float: none;
| + | |
| − | margin: 0 auto;
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content .navdiv>a {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | #content .navdiv ul{
| + | |
| − | width: 100%;
| + | |
| − | height: 40px;
| + | |
| − | background: rgb(61, 56, 57);
| + | |
| − | line-height: 20px;
| + | |
| − | color: white;
| + | |
| − | margin-right: 15px;
| + | |
| − | margin-top: 40px;
| + | |
| − | margin-left: 0px;
| + | |
| − | text-align: center;
| + | |
| − |
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content .navdiv ul li a {
| + | |
| − | text-decoration: none;
| + | |
| − | color: white;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content .navdiv ul li a:hover{
| + | |
| − | text-decoration: none;
| + | |
| − | color: white;
| + | |
| − | background: rgb(206, 33, 50);
| + | |
| − | -webkit-transition: all 0.3s ease;
| + | |
| − | -moz-transition: all 0.3s ease;
| + | |
| − | -ms-transition: all 0.3s ease;
| + | |
| − | -o-transition: all 0.3s ease;
| + | |
| − | transition: all 0.3s ease;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content .navdiv ul li{
| + | |
| − | list-style-type: none;
| + | |
| − | display: inline-block;
| + | |
| − | position: relative;
| + | |
| − | color: white;
| + | |
| − | padding-bottom: 10px;
| + | |
| − | padding-top: 10px;
| + | |
| − | padding-left: 20px;
| + | |
| − | padding-right: 20px;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content .navdiv ul li:hover{
| + | |
| − | background: rgb(206, 33, 50);
| + | |
| − | color: white;
| + | |
| − | -webkit-transition: all 0.3s ease;
| + | |
| − | -moz-transition: all 0.3s ease;
| + | |
| − | -ms-transition: all 0.3s ease;
| + | |
| − | -o-transition: all 0.3s ease;
| + | |
| − | transition: all 0.3s ease;
| + | |
| − |
| + | |
| − | }
| + | |
| − |
| + | |
| − | .navdiv h1{
| + | |
| − | width: 300px;
| + | |
| − | float: left;
| + | |
| − | cursor: pointer;
| + | |
| − | margin-left: 15px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .navdiv .logo-wrapper {
| + | |
| − | position: absolute;
| + | |
| − | top: -30px;
| + | |
| − | background: white;
| + | |
| − | height: 40px;
| + | |
| − | border: 10px solid rgb(61, 56, 57);;
| + | |
| − | height: 100px;
| + | |
| − | border-radius: 100px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .navdiv .logo-wrapper img {
| + | |
| − | height: 100px;
| + | |
| − | width: 100px;
| + | |
| − | padding: 0px 0px 0px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navdiv .logo-wrapper#team-logo {
| + | |
| − | left: -95px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .navdiv .logo-wrapper#main-logo {
| + | |
| − | left: 920px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*.navdiv .logo-wrapper#main-logo {
| + | |
| − | height: 66px;
| + | |
| − | left: -134px;
| + | |
| − | border-width: 7px;
| + | |
| − | top: -22px;
| + | |
| − | }*/
| + | |
| − |
| + | |
| − | /*.navdiv .logo-wrapper#main-logo img {
| + | |
| − | height: 56px;
| + | |
| − | }*/
| + | |
| − |
| + | |
| − | #content .submenu {
| + | |
| − | display: none;
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | top: 40px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content .submenu a {
| + | |
| − | color: black;
| + | |
| − | background: rgb(61, 56, 57);
| + | |
| − | text-decoration: none;
| + | |
| − | text-align: left;
| + | |
| − | display: block;
| + | |
| − | padding: 10px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content .submenu a:hover{
| + | |
| − | color: white;
| + | |
| − | background: rgb(160, 158, 158);
| + | |
| − | border: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #content .navdiv ul li:hover .submenu {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /********************************* CONTENT OF THE PAGE ********************************/
| + | |
| − | ul.img-list {
| + | |
| − | list-style-type: none;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | text-align: center;
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.img-list li {
| + | |
| − | display: inline-block;
| + | |
| − | height: 150px;
| + | |
| − | margin: 0 0 5px 0;
| + | |
| − | border: solid 2px;
| + | |
| − | position: relative;
| + | |
| − | width: 150px;
| + | |
| − | width: calc(33% - 6px);
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.img-list img {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.img-home {
| + | |
| − | list-style-type: none;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | text-align: center;
| + | |
| − | width: 950px
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.img-home li {
| + | |
| − | display: inline-block;
| + | |
| − | margin: 5px 0 0 0;
| + | |
| − | border: 0px;
| + | |
| − | position: relative
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.img-home img {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.header a {
| + | |
| − | color: #626566;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.header a:hover {
| + | |
| − | color: #626566;
| + | |
| − | }
| + | |
| − | | + | |
| − | span.text-content {
| + | |
| − | background: #626566;
| + | |
| − | color: black;
| + | |
| − | font-size: 16px;
| + | |
| − | cursor: pointer;
| + | |
| − | display: table;
| + | |
| − | height: 100%;
| + | |
| − | left: 0;
| + | |
| − | position: absolute;
| + | |
| − | vertical-align: middle;
| + | |
| − | top: 0;
| + | |
| − | width: 100%;
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transition: opacity 500ms;
| + | |
| − | -moz-transition: opacity 500ms;
| + | |
| − | -o-transition: opacity 500ms;
| + | |
| − | transition: opacity 500ms;
| + | |
| − | }
| + | |
| − | span.text-content span {
| + | |
| − | display: table-cell;
| + | |
| − | text-align: center;
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| − | ul.img-list li:hover span.text-content {
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | ul.img-home li:hover span.text-content {
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /*STYLING */
| + | |
| − | | + | |
| − | /* styling for the titles */
| + | |
| − | .content_wrapper h1, .content_wrapper h2 {
| + | |
| − | padding:5px 15px;
| + | |
| − | border-bottom:0px;
| + | |
| − | color:#67c0e0;
| + | |
| − | font family: georgia;
| + | |
| − | | + | |
| − | }
| + | |
| − | .content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
| + | |
| − | padding:5px 15px;
| + | |
| − | border-bottom:0px;
| + | |
| − | color: #626566;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* font and text */
| + | |
| − | .content_wrapper p {
| + | |
| − | padding:0px 15px;
| + | |
| − | font-size: 13px;
| + | |
| − | font-family: 'Raleway', sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Links */
| + | |
| − | .content_wrapper a {
| + | |
| − | font-weight: bold;
| + | |
| − | text-decoration: underline;
| + | |
| − | text-decoration-color:#72c9b6;
| + | |
| − | color: #72c9b6;
| + | |
| − | -webkit-transition: all 0.4s ease;
| + | |
| − | -moz-transition: all 0.4s ease;
| + | |
| − | -ms-transition: all 0.4s ease;
| + | |
| − | -o-transition: all 0.4s ease;
| + | |
| − | transition: all 0.4s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* hover for the links */
| + | |
| − | .content_wrapper a:hover {
| + | |
| − | text-decoration:none;
| + | |
| − | color:#000000;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* non numbered lists */
| + | |
| − | .content_wrapper ul {
| + | |
| − | padding:0px 20px;
| + | |
| − | font-size: 13px;
| + | |
| − | font-family: 'Raleway', sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* numbered lists */
| + | |
| − | .content_wrapper ol {
| + | |
| − | padding:0px;
| + | |
| − | font-size: 13px;
| + | |
| − | font-family: 'Raleway', sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Table */
| + | |
| − | .content_wrapper table {
| + | |
| − | width: 97%;
| + | |
| − | margin:15px 10px;
| + | |
| − | border: 1px solid #d3d3d3;
| + | |
| − | border-collapse: collapse;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* table cells */
| + | |
| − | .content_wrapper td {
| + | |
| − | padding: 10px;
| + | |
| − | vertical-align: text-top;
| + | |
| − | border: 1px solid #d3d3d3;
| + | |
| − | border-collapse: collapse;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* table headers */
| + | |
| − | .content_wrapper th {
| + | |
| − | padding: 10px;
| + | |
| − | vertical-align: text-top;
| + | |
| − | border: 1px solid #d3d3d3;
| + | |
| − | border-collapse: collapse;
| + | |
| − | background-color:#f2f2f2;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Button class */
| + | |
| − | .button_click {
| + | |
| − | margin: 10px auto;
| + | |
| − | padding: 15px; width:12%;
| + | |
| − | text-align:center;
| + | |
| − | font-weight:bold;
| + | |
| − | background-color: #72c9b6;
| + | |
| − | cursor:pointer;
| + | |
| − | -webkit-transition: all 0.4s ease;
| + | |
| − | -moz-transition: all 0.4s ease;
| + | |
| − | -ms-transition: all 0.4s ease;
| + | |
| − | -o-transition: all 0.4s ease;
| + | |
| − | transition: all 0.4s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* button class on hover */
| + | |
| − | .button_click:hover {
| + | |
| − | background-color:#000000;
| + | |
| − | color:#72c9b6;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Wrapper for the content */
| + | |
| − | .content_wrapper {
| + | |
| − | width: 85%;
| + | |
| − | margin-left:150px;
| + | |
| − | padding:10px 0px;
| + | |
| − | float:left;
| + | |
| − | background-color:white;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*LAYOUT */
| + | |
| − | .column {
| + | |
| − | padding: 10px 0px;
| + | |
| − | float:left;
| + | |
| − | background-color:white;
| + | |
| − | }
| + | |
| − | | + | |
| − | .full_size {
| + | |
| − | width:100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .full_size img {
| + | |
| − | padding: 10px 15px;
| + | |
| − | width:96.5%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .half_size {
| + | |
| − | width: 50%;
| + | |
| − | }
| + | |
| − | .half_size img {
| + | |
| − | padding: 10px 15px;
| + | |
| − | width: 93%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .clear {
| + | |
| − | clear:both;
| + | |
| − | }
| + | |
| − | | + | |
| − | .highlight {
| + | |
| − | width: 90%;
| + | |
| − | margin: auto;
| + | |
| − | padding: 15px 5px;
| + | |
| − | background-color: #f2f2f2;
| + | |
| − | }
| + | |
| − | | + | |
| − | .judges-will-not-evaluate {
| + | |
| − | border: 4px solid #72c9b6;
| + | |
| − | display: block;
| + | |
| − | margin: 5px 15px;
| + | |
| − | width: 95%;
| + | |
| − | font-weight:bold;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | </style>
| + | |
| − | <!-- HTML -->
| + | |
| − |
| + | |
| − | <div class="navdiv-wrapper">
| + | |
| − | <div class="navdiv-cover"></div>
| + | |
| − | <div class="navdiv">
| + | |
| − | <a href="https://2017.igem.org">
| + | |
| − | <div id="main-logo" class="logo-wrapper">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/9/9c/MIT-Logo.jpg">
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT">
| + | |
| − | <div id="team-logo" class="logo-wrapper">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/9/9c/MIT-Logo.jpg">
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/Team">ABOUT US</a>
| + | |
| − | <div class="submenu">
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/team">Team</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/Attributions">Attributions</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/acknowledgements">Acknowledgements</a>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/AS">BACKGROUND</a>
| + | |
| − | <div class="submenu">
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/AS">Alternative Splicing</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/CRISPR">CRISPR</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/RBPs">RNA Binding Proteins</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/REST">REST</a>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − |
| + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/project">PROJECT</a>
| + | |
| − | <div class="submenu">
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/mk-FF4">mKate-FF4</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/2mk-HBG">2 Exon mKate HBG</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/3mk-HBG">3 Exon mKate HBG</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/3mk-DF">3 Exon Dual Fluorescence</a>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/notebook">LAB WORK</a>
| + | |
| − | <div class="submenu">
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/parts">Parts/Improved Parts</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/protocols">Protocols</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/notebook">Notebook</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/results">Results</a>
| + | |
| − | </div>
| + | |
| − | </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>
| + | |
| − | <div class="submenu">
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/integratedhp">Integrated HP</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/outreach">Public Engagement</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/Collaborations">Collaborations</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/InterLab">InterLab</a>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li><a href="https://2017.igem.org/Team:MIT/award">AWARDS</a>
| + | |
| − | <div class="submenu">
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/HP/Silver">HP Silver</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/HP/Gold_Integrated">Integrated HP Gold</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/Engagement">Education & Public Engagement</a>
| + | |
| − | <a href="https://2017.igem.org/Team:MIT/Model">Model</a>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | After designing our 2-exon mKate HBG reporter, which only showed mKate knockdown, we needed a positive reporter. We designed two 3-exon reporters, a split mKate reporter and a dual fluorescence reporter: | + | |
| | | | |
| | <h3> 3-exon mKate Fluorescent Reporter </h3> | | <h3> 3-exon mKate Fluorescent Reporter </h3> |
After designing our 2-exon mKate HBG reporter, which only showed mKate knockdown, we needed a positive reporter. We designed two 3-exon reporters, a split mKate reporter and a dual fluorescence reporter:
The reporter was designed to contain mKate exon one, HBG Intron two, the REST-4 included exon from our disease model, HBG Intron one, and mKate exon two.
The mKate exons and the HBG Intron two were taken from the 2-exon mKate reporter. The REST-4 exon was chosen because it contains a stop codon, and because we wanted our reporter to mirror our disease model. The HBG Intron one was chosen based on the literature. [Source]. A g-block was designed with the REST exon, HBG intron 2 and complementary sticky ends to be added to the 2-exon mKate HBG reporter between HBG Intron 2 and mKate exon two.
