Team:Alberta/Project
From 2013.igem.org
(6 intermediate revisions not shown) | |||
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:-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; | ||
+ | } | ||
+ | .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; | ||
+ | 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"> | ||
+ | <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><i class="nav-icon"></i><a id="project" href="#" class="active">Project</a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:Alberta/Project" class="active">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">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><a id="safety" href="#">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> | ||
+ | <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"> | ||
+ | <p>== '''Overall project''' ==</p> | ||
+ | <p>Tell us more about your project. Give us background. | ||
+ | Use this is the abstract of your project. | ||
+ | Be descriptive but concise (1-2 paragraphs)</p> | ||
+ | <p>== Project Details==</p> | ||
+ | <p>=== Part 2 ===</p> | ||
+ | <p>=== The Experiments ===</p> | ||
+ | <p>=== Part 3 ===</p> | ||
+ | <p>== Results ==</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. | ||
+ | Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, | ||
+ | when an unknown printer took a galley of type and scrambled it to make a type | ||
+ | specimen book. It has survived not only five centuries, but also the leap into | ||
+ | electronic typesetting, remaining essentially unchanged. | ||
+ | It was popularised in the 1960s with the release of Letraset sheets containing | ||
+ | Lorem Ipsum passages, and more recently with desktop publishing software like | ||
+ | Aldus PageMaker including versions of Lorem Ipsum. | ||
+ | </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 53: | Line 512: | ||
== Results == | == Results == | ||
+ | --> |
Latest revision as of 21:34, 21 September 2013
== '''Overall project''' ==
Tell us more about your project. Give us background. Use this is the abstract of your project. Be descriptive but concise (1-2 paragraphs)
== Project Details==
=== Part 2 ===
=== The Experiments ===
=== Part 3 ===
== Results ==
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.