|
|
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <head>
| |
| - | <style type="text/css">
| |
| - | .titlebar {
| |
| - | height:130px;
| |
| - | width:100%;
| |
| - | }
| |
| - | .bin {
| |
| - | background:url('/wiki/images/e/e4/2013AlbertaBackground.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:-95px;
| |
| - | }
| |
| - | }
| |
| - | .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;
| |
| - | }
| |
| - | .content-title {
| |
| - | text-align:center;
| |
| - | font-size:3em;
| |
| - | }
| |
| - | .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:-70px;
| |
| - | width:180px;
| |
| - | }
| |
| - | .igem-logo {
| |
| - | position:fixed;
| |
| - | margin-left:650px;
| |
| - | margin-top:-100px;
| |
| - | width: 150px;
| |
| - | }
| |
| - | .igem-bar {
| |
| - | position:relative;
| |
| - | float:right;
| |
| - | }
| |
| - | .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">
| |
| - | <br>
| |
| - | <h3><font color="#A80000"><font size="6">The Littlest Mapmaker</font></font></h3>
| |
| - | <h4><i><font size="2">"Exploration into the world of <font color="#A80000">DNA Computing</font>"<br/>
| |
| - | Team Alberta: University of Alberta</font></i></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/Background">Background</a></li>
| |
| - | <li><a href="/Team:Alberta/Overview">Overview</a></li>
| |
| - | <li><a href="/Team:Alberta/FutureDevelopment">Future Development</a></li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | <li><a id="notebook" href="#">Notebook</a>
| |
| - | <ul>
| |
| - | <li><a href="/Team:Alberta/Results">Results</a></li>
| |
| - | <li><a href="/Team:Alberta/Protocols">Protocols</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">Sponsors</a></li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | <li><a id="humanpractices" href="#">Human Practices</a>
| |
| - | <ul>
| |
| - | <li><a href="/Team:Alberta/Outreach">Outreach</a></li>
| |
| - | <li><a href="/Team:Alberta/Community">Community</a></li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | <li><i class="nav-icon"></i><a id="safety" href="#" class="active">Safety</a>
| |
| - | <ul>
| |
| - | <li><a href="/Team:Alberta/SafetyForm">Safety Form</a></li>
| |
| - | <li><a href="/Team:Alberta/FAQ">FAQ</a></li>
| |
| - | <li><a href="/Team:Alberta/Resources">Resources</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>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="main">
| |
| - | <div class="block">
| |
| - | <p class="content-title">Where to start?</p>
| |
| - | </div>
| |
| - | <div class="block">
| |
| - | <h3></h3>
| |
| - | <ul>
| |
| - |
| |
| - | </ul>
| |
| - |
| |
| - | <h3></h3>
| |
| - | <ul>
| |
| - |
| |
| | | | |
| - | <img src="/wiki/images/4/49/Safety-audiences.jpg " alt="Direct to subcategories" width="650" align="middle" usemap="#directormap"></img>
| |
| - |
| |
| - | <map name="directormap">
| |
| - | <area shape="rect" coords="0,0,200,227" alt="Sun" href="/Team:Alberta/FAQ">
| |
| - | <area shape="rect" coords="230,0,410,227" alt="Mercury" href="/Team:Alberta/SafetyForm">
| |
| - | <area shape="rect" coords="445,0,650,227" alt="Venus" href="/Team:Alberta/Resources">
| |
| - | </map>
| |
| - |
| |
| - |
| |
| - |
| |
| - | </ul>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="clear"></div>
| |
| - | </div>
| |
| - | </body>
| |
| - | </html>
| |
"
