Team:Alberta/Project

From 2013.igem.org

(Difference between revisions)
(Prototype team page)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
+
<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: #fe2b33;">
+
 
 +
<!--<html>
 +
<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;">
-
This is a template page. READ THESE INSTRUCTIONS.
+
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 id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
-
You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2008.igem.org/Help:Template/Examples">HERE</a>.
+
-
</div>
+
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
+
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified.  PLEASE keep all of your pages within your teams namespace. 
+
</div>
</div>
</div>
</div>
</html>
</html>
-
 
-
<!-- *** End of the alert box *** -->
 
Line 29: Line 478:
!align="center"|[[Team:Alberta/Attributions|Attributions]]
!align="center"|[[Team:Alberta/Attributions|Attributions]]
|}
|}
-
 
-
 
-
 
== '''Overall project''' ==
== '''Overall project''' ==
Line 66: Line 512:
== Results ==
== Results ==
 +
-->

Latest revision as of 21:34, 21 September 2013

The Littlest Mapmaker

"Exploration into the world of DNA Computing"
Team Alberta: University of Alberta

Welcome to the Team Alberta Wiki!
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!

== '''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.



Retrieved from "http://2013.igem.org/Team:Alberta/Project"