Team:Alberta/Safety
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | .titlebar { | ||
+ | height:130px; | ||
+ | width:100%; | ||
+ | } | ||
+ | .bin { | ||
+ | background:url('/wiki/images/thumb/2/26/Background.png/541px-Background.png'); | ||
+ | background-size:100% auto; | ||
+ | padding-top:20px; | ||
+ | } | ||
+ | @-moz-document url-prefix() { | ||
+ | .nav-icon { | ||
+ | background-image:url('/wiki/images/6/69/Nav-icon.png'); | ||
+ | display:inline-block; | ||
+ | position:fixed; | ||
+ | width:23px; | ||
+ | height:37px; | ||
+ | margin-top:-17px; | ||
+ | margin-left:-90px; | ||
+ | } | ||
+ | } | ||
+ | .nav-icon { | ||
+ | background-image:url('/wiki/images/6/69/Nav-icon.png'); | ||
+ | display:inline-block; | ||
+ | position:fixed; | ||
+ | width:23px; | ||
+ | height:37px; | ||
+ | margin-top:-17px; | ||
+ | } | ||
+ | .block { | ||
+ | background-color:white; | ||
+ | border:1px grey solid; | ||
+ | padding:10px; | ||
+ | margin:10px; | ||
+ | border-radius:5px; | ||
+ | box-shadow: 0px 0px 30px #444444; | ||
+ | } | ||
+ | .titlebar { | ||
+ | position:fixed; | ||
+ | top:0px; | ||
+ | height:130px; | ||
+ | margin-left:-5px; | ||
+ | width:975px; | ||
+ | z-index:2; | ||
+ | background-color:#FFF; | ||
+ | } | ||
+ | .titlebar h3, h4 { | ||
+ | text-align:center; | ||
+ | } | ||
+ | .sidebar { | ||
+ | position:fixed; | ||
+ | top:190px; | ||
+ | float:left; | ||
+ | z-index:3; | ||
+ | padding: 0 0px 0px 40px; | ||
+ | } | ||
+ | .main { | ||
+ | position:relative; | ||
+ | float:right; | ||
+ | width:720px; | ||
+ | } | ||
+ | .clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | .ualberta-logo { | ||
+ | position:fixed; | ||
+ | margin-left:70px; | ||
+ | margin-top:-60px; | ||
+ | width:180px; | ||
+ | } | ||
+ | .igem-logo { | ||
+ | position:fixed; | ||
+ | margin-left:650px; | ||
+ | margin-top:-90px; | ||
+ | width: 150px; | ||
+ | } | ||
+ | .igem-bar { | ||
+ | position:relative; | ||
+ | left:340px; | ||
+ | } | ||
+ | .igem-bar a { | ||
+ | padding:0 !important; | ||
+ | } | ||
+ | .igem-bar img { | ||
+ | height:38px; | ||
+ | } | ||
+ | .tooltip { | ||
+ | width:100%; | ||
+ | } | ||
+ | .tooltip .saying { | ||
+ | background: #EEE; | ||
+ | color: #444; | ||
+ | left: 100px; | ||
+ | margin-bottom: 15px; | ||
+ | opacity: 0; | ||
+ | padding: 20px; | ||
+ | position: absolute; | ||
+ | visibility: hidden; | ||
+ | min-width:200px; | ||
+ | max-width:500px; | ||
+ | -webkit-transform: translateX(10px); | ||
+ | -moz-transform: translateX(10px); | ||
+ | -ms-transform: translateX(10px); | ||
+ | -o-transform: translateX(10px); | ||
+ | transform: translateX(10px); | ||
+ | -webkit-transition: all .25s ease-out; | ||
+ | -moz-transition: all .25s ease-out; | ||
+ | -ms-transition: all .25s ease-out; | ||
+ | -o-transition: all .25s ease-out; | ||
+ | transition: all .25s ease-out; | ||
+ | -webkit-border-radius:6px; | ||
+ | -moz-border-radius:6px; | ||
+ | -ms-border-radius:6px; | ||
+ | -o-border-radius:6px; | ||
+ | border-radius:6px; | ||
+ | -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | } | ||
+ | .tooltip .saying { | ||
+ | content: " "; | ||
+ | top:100px; | ||
+ | display:block; | ||
+ | left: 200px; | ||
+ | max-height:1000px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | .tooltip .saying:after { | ||
+ | border-bottom: solid transparent 10px; | ||
+ | border-top: solid transparent 10px; | ||
+ | border-right: solid #EEE 10px; | ||
+ | left: 10px; | ||
+ | top:10px; | ||
+ | content: ""; | ||
+ | margin-left:-16px; | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | max-height:1000px; | ||
+ | display:block; | ||
+ | } | ||
+ | .tooltip:hover .saying { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | -webkit-transform: translateX(0px); | ||
+ | -moz-transform: translateX(0px); | ||
+ | -ms-transform: translateX(0px); | ||
+ | -o-transform: translateX(0px); | ||
+ | transform: translateX(0px); | ||
+ | } | ||
+ | .active { | ||
+ | color:#04acec !important; | ||
+ | } | ||
+ | .navbar, .navbar ul { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | list-style:none; | ||
+ | } | ||
+ | .navbar { | ||
+ | width:963px; | ||
+ | margin:60px auto; | ||
+ | position:fixed; | ||
+ | top:70px; | ||
+ | z-index:4; | ||
+ | border: 1px solid #DDD; | ||
+ | background-color:#FFF; | ||
+ | background-image: -moz-linear-gradient(#FFF, #DDD); | ||
+ | background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD)); | ||
+ | background-image: -webkit-linear-gradient(#FFF, #DDD); | ||
+ | background-image: -ms-linear-gradient(#FFF, #DDD); | ||
+ | background-image: linear-gradient(#FFF, #DDD); | ||
+ | -moz-box-shadow: 0 1px 1px #444, 0 1px 0 #444; | ||
+ | -webkit-box-shadow: 0 1px 1px #444, 0 1px 0 #444; | ||
+ | box-shadow: 0 1px 1px #444, 0 1px 0 #444; | ||
+ | zoom:1; | ||
+ | } | ||
+ | .navbar:before, .navbar:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | } | ||
+ | .navbar:after { | ||
+ | clear:both; | ||
+ | } | ||
+ | .navbar li { | ||
+ | float:left; | ||
+ | border-right:1px solid #CCC; | ||
+ | -moz-box-shadow:1px 0 0 #EEE; | ||
+ | -webkit-box-shadow: 1px 0 0 #EEE; | ||
+ | box-shadow: 1px 0 0 #EEE; | ||
+ | position: relative; | ||
+ | } | ||
+ | .navbar a { | ||
+ | float: left; | ||
+ | padding: 12px 30px; | ||
+ | color: #444; | ||
+ | font: bold 12px Arial, Helvetica; | ||
+ | text-decoration:none; | ||
+ | /*text-shadow: 0 1px 0 #333;*/ | ||
+ | } | ||
+ | .navbar li:hover > a { | ||
+ | color:#BBB; | ||
+ | } | ||
+ | .navbar li a:hover { /* IE6 only */ | ||
+ | color:#BBB; | ||
+ | } | ||
+ | .navbar ul { | ||
+ | margin:20px 0 0 0; | ||
+ | _margin: 0; /* IE6 only */ | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | position:absolute; | ||
+ | top:38px; | ||
+ | left:0; | ||
+ | z-index:1; | ||
+ | background:#FFF; | ||
+ | background: -moz-linear-gradient(#FFF, #CCC); | ||
+ | background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC)); | ||
+ | background: -webkit-linear-gradient(#FFF, #CCC); | ||
+ | background: -o-linear-gradient(#FFF, #CCC); | ||
+ | background: -ms-linear-gradient(#FFF, #CCC); | ||
+ | background: linear-gradient(#FFF, #CCC); | ||
+ | -moz-box-shadow: 0 -1px rgba(255,255,255,.3); | ||
+ | -webkit-box-shadow: 0 -1px rgba(255,255,255,.3); | ||
+ | -box-shadow:0 -1px 0 rgba(255,255,255,.3); | ||
+ | -moz-border-radius: 3px; | ||
+ | -webkit-border-radius: 3px; | ||
+ | border-radius: 3px; | ||
+ | -webkit-transition: all .2s ease-in-out; | ||
+ | -moz-transition: all .2s ease-in-out; | ||
+ | -ms-transition: all .2s ease-in-out; | ||
+ | -o-transition: all .2s ease-in-out; | ||
+ | transition: all .2s ease-in-out; | ||
+ | } | ||
+ | .navbar li:hover > ul { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | margin:0; | ||
+ | } | ||
+ | .navbar ul ul { | ||
+ | top:0; | ||
+ | left:150px; | ||
+ | margin:0 0 0 20px; | ||
+ | _margin:0;/*IE6 only*/ | ||
+ | -moz-box-shadow:-1px 0 0 rgba(255,255,255,.3); | ||
+ | -webkit-box-shadow:-1px 0 0 rgba(255,255,255,.3); | ||
+ | box-shadow:-1px 0 0 rgba(255,255,255,.3); | ||
+ | } | ||
+ | .navbar ul li { | ||
+ | float:none; | ||
+ | display:block; | ||
+ | border:0; | ||
+ | _line-height:0; /*IE6 only*/ | ||
+ | -moz-box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF; | ||
+ | -webkit-box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF; | ||
+ | box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF; | ||
+ | } | ||
+ | .navbar ul li:last-child { | ||
+ | -moz-box-shadow:none; | ||
+ | -webkit-box-shadow:none; | ||
+ | box-shadow:none; | ||
+ | } | ||
+ | .navbar ul a { | ||
+ | padding:10px; | ||
+ | width:130px; | ||
+ | _height:10px;/*IE6 only*/ | ||
+ | display:block; | ||
+ | white-space:nowrap; | ||
+ | float:none; | ||
+ | text-transform:none; | ||
+ | } | ||
+ | .navbar ul a:hover { | ||
+ | background-color:#0186ba; | ||
+ | background-image: -moz-linear-gradient(#04acec, #0186ba); | ||
+ | background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); | ||
+ | background-image: -webkit-linear-gradient(#04acec, #0186ba); | ||
+ | background-image: -ms-linear-gradient(#04acec, #0186ba); | ||
+ | background-image: linear-gradient(#04acec, #0186ba); | ||
+ | } | ||
+ | .navbar ul li:first-child > a { | ||
+ | -moz-border-radius: 3px 3px 0 0; | ||
+ | -webkit-border-radius: 3px 3px 0 0; | ||
+ | border-radius: 3px 3px 0 0; | ||
+ | } | ||
+ | .navbar ul li:first-child > a:after { | ||
+ | content:''; | ||
+ | position:absolute; | ||
+ | left:40px; | ||
+ | top:-6px; | ||
+ | border-left:6px solid transparent; | ||
+ | border-right:6px solid transparent; | ||
+ | border-bottom:6px solid #FFF; | ||
+ | } | ||
+ | .navbar ul ul li:first-child a:after { | ||
+ | left:-6px; | ||
+ | top:50%; | ||
+ | margin-top:-6px; | ||
+ | border-left:0; | ||
+ | border-bottom:6px solid transparent; | ||
+ | border-top: 6px solid transparent; | ||
+ | border-right:6px solid #3b3b3b; | ||
+ | } | ||
+ | .navbar ul li:first-child a:hover:after { | ||
+ | border-bottom-color: #04acec; | ||
+ | } | ||
+ | .navbar ul ul li:first-child a:hover:after { | ||
+ | border-right-color: #0299d3; | ||
+ | border-bottom-color:transparent; | ||
+ | } | ||
+ | .navbar ul li:last-child > a { | ||
+ | -moz-border-radius: 0 0 3px 3px; | ||
+ | -webkit-border-radius: 0 0 3px 3px; | ||
+ | border-radius: 0 0 3px 3px; | ||
+ | } | ||
+ | .centered { | ||
+ | text-align:center; | ||
+ | } | ||
+ | .centered-well { | ||
+ | text-align:center; | ||
+ | width:80%; | ||
+ | margin:0 auto; | ||
+ | padding:5px; | ||
+ | background-color:#CCC; | ||
+ | border-radius:6px; | ||
+ | -moz-border-radius:6px; | ||
+ | -o-border-radius:6px; | ||
+ | -webkit-border-radius:6px; | ||
+ | } | ||
+ | .thumbnails { | ||
+ | padding: 35px; | ||
+ | width:700px; | ||
+ | margin:0 auto; | ||
+ | } | ||
+ | .thumbnail { | ||
+ | position:relative; | ||
+ | display:inline-block; | ||
+ | left:180px; | ||
+ | } | ||
+ | .thumbnail img{ | ||
+ | /* ... */ | ||
+ | height:100px; | ||
+ | position:relative; | ||
+ | -webkit-transition: all .25s ease-out; | ||
+ | -moz-transition: all .25s ease-out; | ||
+ | -ms-transition: all .25s ease-out; | ||
+ | -o-transition: all .25s ease-out; | ||
+ | transition: all .25s ease-out; | ||
+ | } | ||
+ | .thumbnail img:hover { | ||
+ | transform:scale(4,4); | ||
+ | -webkit-transform:scale(4,4); | ||
+ | -moz-transform:scale(4,4); | ||
+ | -ms-transform:scale(4,4); | ||
+ | -o-transform:scale(4,4); | ||
+ | z-index:999; | ||
+ | background-color:white; | ||
+ | border:solid 2px #CCC; | ||
+ | border-radius:1px; | ||
+ | -moz-border-radius:1px; | ||
+ | -o-border-radius:1px; | ||
+ | -webkit-border-radius:1px; | ||
+ | -moz-box-shadow: 0px 0px 30px #000; | ||
+ | -o-box-shadow: 0px 0px 30px #000; | ||
+ | -webkit-box-shadow: 0px 0px 30px #000; | ||
+ | box-shadow: 0px 0px 30px #000; | ||
+ | |||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div class="titlebar"> | ||
+ | <h3>The Littlest Mapmaker</h3> | ||
+ | <h4>"Exploration into the world of <a href="#">DNA Computing</a>"<br/> | ||
+ | Team Alberta: University of Alberta</h4> | ||
+ | <a href="http://www.ualberta.ca" class="ualberta-logo"><img src="/wiki/images/b/b3/Ualberta-logo.png" alt="University of Alberta"></img></a> | ||
+ | <a href="https://2013.igem.org" class="igem-logo"><img src="/wiki/images/a/ad/IGem-logo.png" alt="iGem Main Page"></img></a> | ||
+ | </div> | ||
+ | <div class="bin"> | ||
+ | <ul class="navbar"> | ||
+ | <li><a href="/Team:Alberta">Home</a></li> | ||
+ | <li><a id="project" href="#">Project</a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:Alberta/Project">Overview</a></li> | ||
+ | <li><a href="/Team:Alberta/Methodology">Methodology</a></li> | ||
+ | <li><a href="/Team:Alberta/Applications">Applications</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a id="notebook" href="#">Notebook</a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:Alberta/Notebook">Timeline</a></li> | ||
+ | <li><a href="/Team:Alberta/Parts">BioBricks</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a id="team" href="#">Team</a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:Alberta/Team">Roster</a></li> | ||
+ | <li><a href="https://igem.org/Team.cgi?year=2013&team_name=Alberta">Official Profile</a></li> | ||
+ | <li><a href="/Team:Alberta/Attributions">Sponsers</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><i class="nav-icon"></i><a id="humanpractices" href="#" class="active">Human Practices</a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:Alberta/Safety" class="active">Safety</a></li> | ||
+ | <li><a href="/Team:Alberta/Community">Community</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <div class="igem-bar"><a href="https://2013.igem.org"><img src="/wiki/images/a/ad/IGem-logo.png"></img></a></div> | ||
+ | </ul> | ||
+ | <div class="sidebar"> | ||
+ | <div href class="tooltip"><img src="/wiki/images/7/7d/SideChar.png"></img> | ||
+ | <span class="saying">Welcome to the Team Alberta Wiki! | ||
+ | <div id="box" style="width: 450px; padding: 5px; border: 3px solid #000; background-color: #000000;"> | ||
+ | <div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;"> | ||
+ | For visitors: this site is currently under construction. Please contact our Student Liason, Dawson at daocun@ualberta.ca, for more information on our current project and how to support us! | ||
+ | </div> | ||
+ | </div> | ||
+ | </span> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="main"> | ||
+ | <div class="block"> | ||
+ | <img src="/wiki/images/e/e8/Mapmaker-banner.jpg"></img> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p> Use this page to answer the questions on the <a href="2013.igem.org/Safety">safety page</a>.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="clear"></div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | <!--html> | ||
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #000000;"> | <div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #000000;"> | ||
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;"> | <div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;"> | ||
Line 22: | Line 457: | ||
Use this page to answer the questions on the [[Safety | safety page]]. | Use this page to answer the questions on the [[Safety | safety page]]. | ||
+ | --> |
Revision as of 21:11, 2 September 2013
Use this page to answer the questions on the safety page.