Difference between revisions of "Team:IIT Kanpur/TestPage"

 
(44 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Template:IIT_Kanpur}}
 
{{Template:IIT_Kanpur}}
 
<html>
 
<html>
−
<style>
 
−
/*main colour*/
 
−
.navbar-default .navbar-brand,
 
−
.contents-sidebar .nav>.active>a,
 
−
.contents-sidebar .nav>.active>a,
 
−
.contents-sidebar .nav>li>a:hover,
 
−
.contents-sidebar .nav>li>a:focus,
 
−
h2,
 
−
h1,
 
−
.main-container .section a {
 
−
    color: #63b4b5;
 
−
}
 
−
.contents-sidebar .nav>.active>a,
 
−
.contents-sidebar .nav>li>a:hover,
 
−
.contents-sidebar .nav>li>a:focus {
 
−
    border-left: 2px solid #363333;
 
−
}
 
−
.image.lightbox, #notebook-key-button {
 
−
    background-color: #77DA77;
 
−
}
 
−
/*complimentary colour*/
 
−
.navbar-default .navbar-brand:hover,
 
−
.definition:hover, .definition:focus,
 
−
ol li::before,
 
−
.slim ul li:before,
 
−
.table>thead>tr>th,
 
−
.algorithm ol li::before,
 
−
.quote,
 
−
.quote h3,
 
−
a,
 
−
a:visited,
 
−
a:hover
 
−
{
 
−
    color:#2C9D91;
 
−
}
 
−
.definition {
 
−
    border-bottom: 1px dotted #2C9D91;
 
−
}
 
−
#notebook-key-button.active {
 
−
    background-color: #2C9D91;
 
−
}
 
−
.popover.right>.arrow::after{
 
−
    border-right-color: #2C9D91;
 
−
}
 
−
.popover.bottom>.arrow::after {
 
−
    border-bottom-color: #2C9D91;
 
−
}
 
−
.popover.left>.arrow::after {
 
−
    border-left-color: #2C9D91;
 
−
}
 
−
</style>
 
 
<head>
 
<head>
 +
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">   
 +
    <style type="text/css">
  
−
 
  
−
<!-- THIS IS WHERE THE HTML BEGINS -->
 
  
 +
/*GOOGLE FONTS*/
  
−
<style>
+
/* latin */
 +
@font-face {
 +
  font-family: 'Dosis';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Dosis Regular'), local('Dosis-Regular'), url(https://static.igem.org/mediawiki/2018/4/4d/T--MIT--dosis2.woff) format('woff');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 +
}
  
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Raleway';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Raleway'), local('Raleway-Regular'),  url(https://static.igem.org/mediawiki/2018/5/59/T--MIT--raleway2.woff) format('woff');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 +
}
  
  
−
/* Slideshow container */
+
/* W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes */
−
.slideshow-container {
+
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 +
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 +
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
 +
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
 +
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
 +
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
 +
a{background-color:transparent;-webkit-text-decoration-skip:objects}
 +
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
 +
dfn{font-style:italic}mark{background:#ff0;color:#000}
 +
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
 +
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
 +
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
 +
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
 +
button,input{overflow:visible}button,select{text-transform:none}
 +
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
 +
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
 +
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
 +
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
 +
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
 +
[type=checkbox],[type=radio]{padding:0}
 +
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
 +
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
 +
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
 +
::-webkit-input-placeholder{color:inherit;opacity:0.54}
 +
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
 +
/* End extract */
 +
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
 +
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}
 +
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
 +
hr{border:0;border-top:1px solid #eee;margin:20px 0}
 +
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
 +
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
 +
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
 +
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
 +
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
 +
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
 +
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
 +
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
 +
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
 +
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 
 +
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
 +
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
 +
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
 +
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
 +
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
 +
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
 +
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
 +
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
 +
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
 +
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
 +
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
 +
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
 +
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
 +
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
 +
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
 +
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
 +
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
 +
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
 +
.w3-main,#main{transition:margin-left .4s}
 +
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
 +
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
 +
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
 +
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
 +
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
 +
.w3-bar .w3-button{white-space:normal}
 +
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
 +
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
 +
.w3-responsive{display:block;overflow-x:auto}
 +
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
 +
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
 +
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
 +
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
 +
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
 +
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
 +
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
 +
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
 +
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
 +
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
 +
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
 +
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
 +
.w3-content{max-width:980px;margin:auto}.w3-rest{overflow:hidden}
 +
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
 +
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
 +
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
 +
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
 +
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
 +
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
 +
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
 +
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
 +
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
 +
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
 +
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}
 +
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
 +
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
 +
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
 +
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
 +
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
 +
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
 +
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
 +
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
 +
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
 +
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
 +
.w3-display-position{position:absolute}
 +
.w3-circle{border-radius:50%}
 +
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 +
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 +
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
 +
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 +
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 +
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
 +
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
 +
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
 +
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
 +
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
 +
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
 +
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
 +
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
 +
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
 +
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
 +
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
 +
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
 +
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
 +
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
 +
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
 +
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
 +
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
 +
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
 +
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
 +
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
 +
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
 +
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
 +
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
 +
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
 +
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
 +
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
 +
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
 +
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
 +
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
 +
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
 +
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
 +
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
 +
.w3-left{float:left!important}.w3-right{float:right!important}
 +
.w3-button:hover{color:#000!important;background-color:#ccc!important}
 +
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 +
.w3-hover-none:hover{box-shadow:none!important}
 +
/* Colors */
 +
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 +
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
 +
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
 +
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
 +
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
 +
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
 +
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
 +
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
 +
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
 +
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
 +
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
 +
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
 +
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
 +
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
 +
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
 +
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
 +
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
 +
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
 +
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
 +
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
 +
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
 +
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
 +
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
 +
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
 +
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 +
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
 +
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 +
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 +
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
 +
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
 +
.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
 +
.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
 +
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
 +
.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
 +
.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
 +
.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
 +
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
 +
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
 +
.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
 +
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
 +
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
 +
.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
 +
.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
 +
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
 +
.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
 +
.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
 +
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
 +
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
 +
.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
 +
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
 +
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
 +
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
 +
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
 +
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
 +
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
 +
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
 +
.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
 +
.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
 +
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
 +
.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
 +
.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
 +
.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
 +
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
 +
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
 +
.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
 +
.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
 +
.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
 +
.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
 +
.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
 +
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
 +
.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
 +
.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
 +
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
 +
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
 +
.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
 +
.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
 +
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
 +
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
 +
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
 +
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
 +
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
 +
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
 +
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
 +
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
  
−
  margin: auto;
 
−
  position: relative;
 
−
 
 
−
}
 
  
−
/* Hide the images by default */
+
          #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, #sideMenu, #menubar, .logo_2017, .printfooter, .firstHeading,.visualClear {
−
.mySlides {
+
              display: none;
−
    display: none;
+
          } /*-- hides default wiki settings --*/
−
}
+
  
−
/* Next & previous buttons */
+
          #top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
−
.prev, .next {
+
              border: 0 none;
−
  cursor: pointer;
+
              height: 3vw;
−
  position: absolute;
+
              z-index: 100;
−
  top: 50%;
+
              top: 0;
−
  margin-top: -22px;
+
              position: fixed;
−
  width: auto;
+
              width: 975px;
−
 
+
              left: 50%;
−
  padding: 16px;
+
              margin-left: -487px;
−
  color: #CCCCCC;
+
          }
−
  font-weight: bold;
+
−
  font-size: 30px;
+
−
  transition: 0.6s ease;
+
−
  border-radius: 0 3px 3px 0;
+
−
}
+
  
−
/* Position the "next button" to the right */
+
          #top_title, #top {
−
.next {
+
              display: none;
−
  right: 0;
+
              z-index: -1000;
−
  border-radius: 3px 0 0 3px;
+
          }
−
}
+
  
−
/* On hover, add a black background color with a little bit see-through */
+
          .logo_2018 {
−
.prev:hover, .next:hover {
+
              display: none;
−
  background-color: rgba(83,77,77,0.80);
+
              z-index: -1000;
−
}
+
          }
  
−
/* Caption text */
+
          #globalWrapper, #content { /*-- changes default wiki settings --*/
−
.text {
+
              width: 100%;
−
  color: #D3C7C7;
+
              height: 100%;
−
  font-size: 40px;
+
              border: none;
−
  padding: 8px 12px;
+
              background-color: #7267e8;
−
  position: absolute;
+
              margin: 0px;
−
  bottom: 8px;
+
              padding: 0px;
−
  width: 100%;
+
              letter-spacing: normal;
−
  text-align: center;
+
             
−
}
+
              font-weight: light;
 +
          }
  
−
/* Number text (1/3 etc) */
+
          html, body, .wrapper { /*-- changes default wiki settings --*/
−
.numbertext {
+
              width: 100%;
−
  color: #FFFFFF;
+
              height: 100%;
−
  font-size: 4px;
+
              background-color: #7267e8;
−
  padding: 8px 12px;
+
          }
−
  position: absolute;
+
−
  top: 0;
+
−
}
+
  
−
/* The dots/bullets/indicators */
 
−
.dot {
 
−
  cursor: pointer;
 
−
  height: 25px;
 
−
  width: 25px;
 
−
  margin: 0 2px;
 
−
  background-color: #bbb;
 
−
  border-radius: 50%;
 
−
  display: inline-block;
 
−
  transition: background-color 1.5s ease;
 
−
}
 
  
−
.active, .dot:hover {
+
.menu {
−
  background-color: #717171;
+
        list-style-type: none;
−
}
+
        margin: 0vw;
 +
        padding: .3vw;
 +
        /*overflow: hidden;*/
 +
        background-color: #333;
 +
        position: fixed;
 +
        width: 100%;
 +
        height: 4.5vw;
 +
        -webkit-box-shadow: 0 8px 6px -6px #2c2c2c;
 +
        -moz-box-shadow: 0 8px 6px -6px #2c2c2c;
 +
        box-shadow: 0 8px 6px -6px #2c2c2c;
 +
        top: 1.1vw;
 +
        z-index: 20;
 +
    }
  
−
/* Fading animation */
+
    .sub {
−
.fade {
+
        font-family: 'Dosis', sans-serif;;
−
  -webkit-animation-name: fade;
+
        font-size: 1.5vw;
−
  -webkit-animation-duration: 3s;
+
float: left;
−
  animation-name: fade;
+
height: 4.5vw;
−
  animation-duration: 3s;
+
       
−
}
+
    }
  
−
@-webkit-keyframes fade {
+
    .sub a {
−
  from {opacity: .4}
+
        display: block;
−
  to {opacity: 1}
+
        color: white;
−
}
+
        text-align: center;
 +
        padding: 1vw 1.5vw;
 +
        text-decoration: none;
 +
    }
  
−
@keyframes fade {
+
    .sub a:hover {
−
  from {opacity: .4}
+
        background-color: #410081;
−
  to {opacity: 1}
+
    }
−
}
+
−
</style>
+
  
 +
    .active {
 +
        background-color: #9055ff;
 +
    }
  
 +
    .dropdown {
 +
        position: relative;
 +
        display: inline-block;
 +
    }
  
−
  </head>
+
    .dropdown-content {
 +
        font-family: 'Raleway', sans-serif;;
 +
        font-size: 1.2vw;
 +
        display: none;
 +
        position: absolute;
 +
        top: 4vw;
 +
        background-color: #2c2c2c;
 +
        min-width: 10vw;
 +
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
        z-index: 1;
 +
    }
  
−
  <body>
+
    .dropdown-content a {
 +
        color: white;
 +
        padding: .6vw .9vw;
 +
        text-decoration: none;
 +
        display: block;
 +
    }
  
−
<!-- Slideshow container -->
+
    .dropdown-content a:hover {background-color: #474747;}
−
<div class="slideshow-container">
+
  
−
  <!-- Full-width images with number and caption text -->
+
    .dropdown:hover .dropdown-content {display: block;}
−
  <div class="mySlides fade">
+
  
−
    <img src="https://static.igem.org/mediawiki/2018/e/e0/T--IIT_Kanpur--page1re.jpg" style="width:100%">
+
body{
−
    <div class="text"><a href="www.google.com">SWASH </a></div>
+
        margin:0;
−
  </div>
+
    }
 +
  .h3{
 +
        color: white;
 +
        font-family: 'Dosis', sans-serif;;
 +
        font-size: 3.7vw;
 +
        position: absolute;
 +
line-height: 2.8vw;
 +
    }
  
−
   <div class="mySlides fade">
+
   .h4{
−
    <img src="https://static.igem.org/mediawiki/2018/a/a0/T--IIT_Kanpur--page2new.jpg" style="width:100%">
+
        color: #410081;
−
     <div class="text"><a href="https://2018.igem.org/Team:Oxford/Team">Water Pollution</a></div>
+
        font-family: 'Dosis', sans-serif;;
−
  </div>
+
        font-size: 2.5vw;
 +
        position: absolute;
 +
line-height: 2.8vw;
 +
     }
 +
    .p{
 +
        color: white;
 +
        font-family: 'Raleway', sans-serif;;
 +
        font-size: 1.5vw;
 +
line-height: 2.8vw;
 +
        z-index: 5;
 +
    }
 +
</style>
 +
</head>
 +
<body >
  
−
  <div class="mySlides fade">
+
<div class="menu">
−
    <img src="https://static.igem.org/mediawiki/2018/c/c4/T--IIT_Kanpur--page4new.jpg" style="width:100%">
+
        <div class="sub"><a href="https://2018.igem.org/Team:MIT">Home</a></div>
−
    <div class="text"></div>
+
        <div class="dropdown">
−
  </div>
+
            <div class="sub"><a href="https://2018.igem.org/Team:MIT/Team">Team</a></div>
 +
            <div class="dropdown-content">
 +
                <a href="https://2018.igem.org/Team:MIT/Team">Team Members</a>
 +
                <a href="https://2018.igem.org/Team:MIT/Collaborations">Collaborations</a>
 +
            </div>
 +
        </div>
 +
        <div class="dropdown">
 +
            <div class="sub"><a href="https://2018.igem.org/Team:MIT/Description">Project</a></div>
 +
            <div class="dropdown-content">
 +
                <a href="https://2018.igem.org/Team:MIT/Design">Design</a>
 +
                <a href="https://2018.igem.org/Team:MIT/Results">Results</a>
 +
                <a href="https://2018.igem.org/Team:MIT/InterLab">InterLab</a>
 +
                <a href="https://2018.igem.org/Team:MIT/Notebook">Notebook</a>
 +
                <a href="https://2018.igem.org/Team:MIT/Experiments">Protocols</a>
 +
                <a href ="https://2018.igem.org/Team:MIT/Attributions"> Attributions </a>
 +
            </div>
 +
        </div>
 +
        <div class="dropdown">
 +
            <div class="sub"><a href="https://2018.igem.org/Team:MIT/Parts">Parts</a></div>
 +
            <div class="dropdown-content">
 +
                <a href="https://2018.igem.org/Team:MIT/Basic_Part">Basic Parts</a>
 +
                <a href="https://2018.igem.org/Team:MIT/Composite_Part">Composite Parts</a>
 +
            </div>
 +
        </div>
 +
        <div class="sub"><a class="active" href="https://2018.igem.org/Team:MIT/Safety">Safety</a></div>
 +
        <div class="dropdown">
 +
            <div class="sub"><a href="https://2018.igem.org/Team:MIT/Human_Practices">Human Practices</a></div>
 +
            <div class="dropdown-content">
 +
                <a href="https://2018.igem.org/Team:MIT/Human_Practices">Integrated Human Practices</a>
 +
                <a href="https://2018.igem.org/Team:MIT/Public_Engagement">Public Engagement</a>
 +
            </div>
 +
        </div>
 +
        <div class="sub"><a href="https://2018.igem.org/Team:MIT/Model">Model</a></div>
 +
    </div>
  
−
  <!-- Next and previous buttons -->
+
 
−
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+
<div class="h3"style="position: absolute; top: 7vw; left: 2vw; margin-right: 4vw;">
−
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+
Safety
 
</div>
 
</div>
−
<br>
 
  
−
<!-- The dots/circles -->
+
<div class="h4"style="position: absolute; top: 11vw; left: 2vw; margin-right: 4vw;">
−
<div style="text-align:center">
+
Safe Project Design
−
  <span class="dot" onclick="currentSlide(1)"></span>  
+
−
  <span class="dot" onclick="currentSlide(2)"></span>
+
−
  <span class="dot" onclick="currentSlide(3)"></span>
+
 
</div>
 
</div>
  
−
<script>
+
<div class="p" style="position: absolute; top: 14vw; left: 2vw; margin-right: 4vw;">
−
var slideIndex = 1;
+
In our project we are using HEK293 Cells which are a well documented line of cells that the team has been trained to handle properly. We are also using Streptococcus Mutans UA159, which is a strain of bacteria that is commonly found in the mouth. This strain of bacteria poses little to no threat to those that it could come in contact with unless they are immunocompromised. We also are not changing the S.Mutans’ DNA in any way to give them antibiotic resistance due to the chance that it could get out of the lab and cause harm to the environment.
−
showSlides(slideIndex);
+
</div>
  
−
// Next/previous controls
+
<div class="h4"style="position: absolute; top: 29vw; left: 2vw; margin-right: 4vw;">
−
function plusSlides(n) {
+
Safe Lab Work
−
  showSlides(slideIndex += n);
+
</div>
−
}
+
  
−
// Thumbnail image controls
 
−
function currentSlide(n) {
 
−
  showSlides(slideIndex = n);
 
−
}
 
−
 
−
function showSlides(n) {
 
−
  var i;
 
−
  var slides = document.getElementsByClassName("mySlides");
 
−
  var dots = document.getElementsByClassName("dot");
 
−
  if (n > slides.length) {slideIndex = 1}
 
−
  if (n < 1) {slideIndex = slides.length}
 
−
  for (i = 0; i < slides.length; i++) {
 
−
      slides[i].style.display = "none";
 
−
  }
 
−
  for (i = 0; i < dots.length; i++) {
 
−
      dots[i].className = dots[i].className.replace(" active", "");
 
−
  }
 
−
  slides[slideIndex-1].style.display = "block";
 
−
  dots[slideIndex-1].className += " active";
 
−
}
 
−
</script>
 
−
 
−
  </body>
 
  
 +
<div class="p" style="position: absolute; top: 32vw; left: 2vw; margin-right: 4vw;">
 +
In our lab we consistently used proper PPE depending on what materials we were working with. Every team member was also required to go through lab specific trainings to be allowed to work with anything in the lab, and some of the team members were trained separately to deal with the s.mutans in the lab. While using the S.mutans we had a different set of procedures due to the bacteria’s vulnerability to contamination. This made it so that we used multiple sets of gloves during our experiments and also used a bunsen burner to decrease the likelihood of contamination.
 +
</div>
 
</html>
 
</html>
 
{{Template:IIT_Kanpur/Footer}}
 
{{Template:IIT_Kanpur/Footer}}

Latest revision as of 17:11, 17 October 2018

Home
Team
Team Members Collaborations
Project
Design Results InterLab Notebook Protocols Attributions
Parts
Basic Parts Composite Parts
Safety
Human Practices
Integrated Human Practices Public Engagement
Model
Safety
Safe Project Design
In our project we are using HEK293 Cells which are a well documented line of cells that the team has been trained to handle properly. We are also using Streptococcus Mutans UA159, which is a strain of bacteria that is commonly found in the mouth. This strain of bacteria poses little to no threat to those that it could come in contact with unless they are immunocompromised. We also are not changing the S.Mutans’ DNA in any way to give them antibiotic resistance due to the chance that it could get out of the lab and cause harm to the environment.
Safe Lab Work
In our lab we consistently used proper PPE depending on what materials we were working with. Every team member was also required to go through lab specific trainings to be allowed to work with anything in the lab, and some of the team members were trained separately to deal with the s.mutans in the lab. While using the S.mutans we had a different set of procedures due to the bacteria’s vulnerability to contamination. This made it so that we used multiple sets of gloves during our experiments and also used a bunsen burner to decrease the likelihood of contamination.