Team:Calgary/StyleSheets/Navigation

From 2013.igem.org

(Difference between revisions)
 
(78 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
/***
-
<head>
+
Name: Wm. Keith van der Meulen
-
<meta charset="utf-8">
+
Date: Summer 2013
-
<!-- saved from url=(0014)about:internet -->
+
Organization: University of Calgary iGEM Team 2013
-
+
 
-
<title>Journal: Engineering</title>
+
---Purpose---
-
+
CSS code to define navigation stylings.
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet">
+
-------------
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Typography?action=raw&ctype=text/css" rel="stylesheet">
+
 
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Layout?action=raw&ctype=text/css" rel="stylesheet">
+
Cite:
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css" rel="stylesheet">
+
Wm. Keith van der Meulen
-
+
University of Calgary iGEM 2013
-
<!-- Reset for BodyContent -->
+
https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css
-
<style>
+
 
-
#content{
+
***/
-
width: 1008px;
+
 
-
padding: 0px 0px 0px 0px;
+
#TopBar {
-
background-color:transparent;
+
background: #231F20;
-
border: none;
+
width: 100%;
-
}
+
min-width: 766px;
-
+
height: 89px;
-
#bodyContent{
+
z-index: 10;
-
width: 1008px;
+
position: fixed;
-
minimum-width: 1008px;
+
text-align: center;
-
padding: 0px 0px 0px 0px;
+
top: 25px;
-
background-color:transparent;
+
}
-
border: none;
+
 
-
}
+
#TopBar #TopLvlNavLink {
-
+
display: none;
-
#top-section {
+
}
-
width: 1008px;
+
 
-
}
+
#TopBar ul {
-
+
background: #231F20;
-
#footer-box {
+
list-style: none;
-
display: none;
+
position: relative;
-
}
+
display: inline-table;
-
</style>
+
padding: 0;
-
</head>
+
margin: 0;
-
+
}
-
<body>
+
 
-
<a name="JournalEngineeringTop"></a>
+
#TopBar ul:after {
-
+
content: "";
-
<header class="NavMain">
+
clear: both;
-
<ul>
+
display: block;
-
<li id="MainLinks"><a href="https://2013.igem.org/Team:Calgary">Home</a>
+
}
-
<li id="MainLinks"><a href="https://2013.igem.org/Team:Calgary/Project">Project</a>
+
 
-
<ul id="MainProjectNav">
+
#TopBar li {
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Tales">Tales</a>
+
float: left;
-
<ul>
+
width: 124px;
-
<li><a href="#">Sub-Page</a></li>
+
text-align: center;
-
<li><a href="#">Sub-Page</a></li>
+
}
-
<li><a href="#">Sub-Page</a></li>
+
 
-
</ul>
+
#TopBar li:hover > a {
-
</li>
+
text-decoration: underline;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Ferritin">Ferritin</a>
+
}
-
<ul>
+
 
-
<li><a href="#">Sub-Page</a></li>
+
#TopBar a {
-
<li><a href="#">Sub-Page</a></li>
+
display: block;
-
<li><a href="#">Sub-Page</a></li>
+
width: 100%;
-
</ul>
+
height: 100%;
-
</li>
+
padding: 15px 0;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Linker">Linker</a>
+
color: #FFFFFF;
-
<ul>
+
text-decoration: none;
-
<li><a href="#">Sub-Page</a></li>
+
font: 24px Raleway, Arial, san-serif;
-
<li><a href="#">Sub-Page</a></li>
+
}
-
<li><a href="#">Sub-Page</a></li>
+
 
-
</ul>
+
#TopBar > #TopLvlNav  > li > a {
-
</li>
+
padding: 29px 0;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Engineering">Engineering</a>
+
}
-
<ul>
+
 
-
<li><a href="#">Sub-Page</a></li>
+
#TopBar ul ul {
-
<li><a href="#">Sub-Page</a></li>
+
display: none;
-
<li><a href="#">Sub-Page</a></li>
+
background: #231F20;
-
</ul>
+
padding: 0 10px;
-
</li>
+
position: absolute;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/HumanPractices">Human Practices</a>
+
top: 95%;
-
<ul>
+
z-index: 10;
-
<li><a href="#">Sub-Page</a></li>
+
margin-left: -10px;
-
<li><a href="#">Sub-Page</a></li>
+
}
-
<li><a href="#">Sub-Page</a></li>
+
 
-
</ul>
+
#TopBar ul li:hover > ul {
-
</li>
+
display: block;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/References">References</a></li>
+
}
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Attribution">Attribution</a></li>
+
 
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Sponsors">Sponsors</a></li>
+
#TopBar ul ul li {
-
</ul>
+
float: none;
-
</li>
+
position: relative;
-
<li id="MainLinks"><a href="https://2013.igem.org/Team:Calgary/OurTeam">Our Team</a>
+
}
-
<ul id="MainTeamNav">
+
 
-
<li><a href="https://2013.igem.org/Team:Calgary/OurTeam/TeamMembers">Team Members</a></li>
+
#TopBar ul ul a {
-
<li><a href="https://igem.org/Team.cgi?id=1189" target="_blank">Our Profile</a></li>
+
font-size: 18px;
-
<li><a href="https://2013.igem.org/Team:Calgary/OurTeam/TheUniversity">The University</a></li>
+
}
-
<li><a href="https://2013.igem.org/Team:Calgary/OurTeam/ContactUs">Contact Us</a></li>
+
 
-
</ul>
+
#TopBar ul ul ul {
-
</li>
+
position: absolute;
-
<li id="MainLinks"><a href="https://2013.igem.org/Team:Calgary/Notebook">Notebook</a>
+
left: 100%;
-
<ul id="MainNotebookNav">
+
top: 0;
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal">Journal</a>
+
margin: 0;
-
<ul>
+
}
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/TalesJournal">Tales</a></li>
+
 
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/FerritinJournal">Ferritin</a></li>
+
@keyframes rotate {
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/LinkerJournal">Linker</a></li>
+
  from {
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/EngineeringJournal">Engineering</a></li>
+
    transform: rotate(0deg);
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/HumanPracticesJournal">Human Practices</a></li>
+
    -ms-transform: rotate(0deg);
-
</ul>
+
  }
-
</li>
+
  to {
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/ProtocolManual">Protocol Manual</a>
+
    transform: rotate(59deg);
-
<ul>
+
    -ms-transform: rotate(59deg);
-
<li><a href="#">Sub-Page</a></li>
+
  }
-
<li><a href="#">Sub-Page</a></li>
+
}
-
<li><a href="#">Sub-Page</a></li>
+
 
-
</ul>
+
@-webkit-keyframes rotate {
-
</li>
+
  from {
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Parts">Parts</a></li>
+
    -webkit-transform: rotate(0deg);
-
</ul>
+
  }
-
</li>
+
  to {
-
<li id="MainLinks"><a href="https://2013.igem.org/Team:Calgary/Outreach">Outreach</a>
+
    -webkit-transform: rotate(59deg);
-
<ul id="MainOutreachNav">
+
  }
-
<li><a href="#">Sub-Page</a></li>
+
}
-
<li><a href="#">Sub-Page</a></li>
+
 
-
<li><a href="#">Sub-Page</a></li>
+
@-moz-keyframes rotate {
-
</ul>
+
  from {
-
</li>
+
    transform: rotate(0deg);
-
<li id="MainLinks"><a href="https://2013.igem.org" target="_blank">iGEM</a></li>
+
  }
-
</ul>
+
  to {
-
</header>
+
    transform: rotate(59deg);
-
+
  }
-
<section class="Content">
+
}
-
+
 
-
<h1>Engineering Journal</h1>
+
@-o-keyframes rotate {
-
+
  from {
-
<nav class="WeekNav">
+
    transform: rotate(0deg);
-
+
  }
-
<!--Create Table of Contents to link to each week's progress-->
+
  to {
-
+
    transform: rotate(59deg);
-
<table>
+
  }
-
<tr>
+
}
-
<th colspan="5"><h2>Contents</h2></th>
+
 
-
</tr>
+
#TopBar #LogoItem:hover > img {
-
<tr>
+
    -webkit-animation-name:            rotate;
-
<td>
+
    -webkit-animation-duration:         .5s;  
-
<b>May</b>
+
    -webkit-animation-iteration-count:  infinite;
-
<ul>
+
    -webkit-animation-timing-function: linear;
-
<li><a href="#JournalEngineeringWeek1">Week 1</a></li>
+
}
-
<li><a href="#JournalEngineeringWeek2">Week 2</a></li>
+
 
-
<li><a href="#JournalEngineeringWeek3">Week 3</a></li>
+
#TopBar #LogoItem {
-
<li><a href="#JournalEngineeringWeek4">Week 4</a></li>
+
padding: 8px 0;
-
<li><a href="#JournalEngineeringWeek5">Week 5</a></li>
+
}
-
</ul>
+
 
-
</td>
+
#TopBarCollapse {
-
<td>
+
position: fixed;
-
<b>June</b>
+
width: 120px;
-
<ul>
+
height: 60px;
-
<li><a href="#JournalEngineeringWeek6">Week 6</a></li>
+
top: 25px;
-
<li><a href="#JournalEngineeringWeek7">Week 7</a></li>
+
background: orange;
-
<li><a href="#JournalEngineeringWeek8">Week 8</a></li>
+
z-index: 10;
-
<li><a href="#JournalEngineeringWeek9">Week 9</a></li>
+
}
-
</ul>
+
 
-
</td>
+
#TopBarCollapse #TopLvlNavLink {
-
<td>
+
display: block;
-
<b>July</b>
+
width: 100%;
-
<ul>
+
height: 100%;
-
<li><a href="#JournalEngineeringWeek10">Week 10</a></li>
+
}
-
<li><a href="#JournalEngineeringWeek11">Week 11</a></li>
+
 
-
<li><a href="#JournalEngineeringWeek12">Week 12</a></li>
+
#TopBarCollapse:after {
-
<li><a href="#JournalEngineeringWeek13">Week 13</a></li>
+
content: "";
-
<li><a href="#JournalEngineeringWeek14">Week 14</a></li>
+
clear: both;
-
</ul>
+
display: block;
-
</td>
+
}
-
<td>
+
 
-
<b>August</b>
+
#TopBarCollapse ul {
-
<ul>
+
display: none;
-
<li><a href="#JournalEngineeringWeek15">Week 15</a></li>
+
list-style: none;
-
<li><a href="#JournalEngineeringWeek16">Week 16</a></li>
+
padding: 0;
-
<li><a href="#JournalEngineeringWeek17">Week 17</a></li>
+
}
-
<li><a href="#JournalEngineeringWeek18">Week 18</a></li>
+
 
-
</ul>
+
#TopBarCollapse ul:after {
-
</td>
+
content: "";
-
<td>
+
clear: both;
-
<b>September</b>
+
display: block;
-
<ul>
+
}
-
<li><a href="#JournalEngineeringWeek19">Week 19</a></li>
+
 
-
<li><a href="#JournalEngineeringWeek20">Week 20</a></li>
+
#TopBarCollapse li {
-
<li><a href="#JournalEngineeringWeek21">Week 21</a></li>
+
float: left;
-
<li><a href="#JournalEngineeringWeek22">Week 22</a></li>
+
display: block;
-
<li><a href="#JournalEngineeringWeek23">Week 23</a></li>
+
clear: both;
-
</ul>
+
width: 120px;
-
</td>
+
padding: 0;
-
<tr>
+
background: green;
-
</table>
+
}
-
</nav>
+
 
-
+
#TopBarCollapse li:hover {
-
<div class="Content">
+
background: pink;
-
+
}
-
<!--Each week is contained using the article div tage (new to HTML5) so that it shows up in future browser contents listing and allows for consistent formatting for each entry-->
+
 
-
+
#TopBarCollapse a {
-
<article class="EngineeringJournal">
+
color: #FFFFFF;
-
<a name="JournalEngineeringWeek1"></a>
+
display: block;
-
<h2>Week 1: May 1 - May 3</h2>
+
text-decoration: none;
-
<p>
+
padding: 10px 15px;
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
}
-
</p>
+
 
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
#TopBarCollapse #LogoItem {
-
</article>
+
display: none !important;
-
+
}
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek2"></a>
+
-
<h2>Week 2: May 6 - May 10</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek3"></a>
+
-
<h2>Week 3: May 13 - May 17</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek4"></a>
+
-
<h2>Week 4: May 20 - May 24</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek5"></a>
+
-
<h2>Week 5: May 27 - May 31</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek6"></a>
+
-
<h2>Week 6: June 3 - June 7</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek7"></a>
+
-
<h2>Week 7: June 10 - June 14</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek8"></a>
+
-
<h2>Week 8: June 17 - June 21</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek9"></a>
+
-
<h2>Week 9: June 24 - June 28</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek10"></a>
+
-
<h2>Week 10: July 1 - July 5</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek11"></a>
+
-
<h2>Week 11: July 8 - July 12</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek12"></a>
+
-
<h2>Week 12: July 15 - July 19</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek13"></a>
+
-
<h2>Week 13: July 22 - July 26</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek14"></a>
+
-
<h2>Week 14: July 29 - August 2</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek15"></a>
+
-
<h2>Week 15: August 5 - August 9</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek16"></a>
+
-
<h2>Week 16: August 12 - August 16</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek17"></a>
+
-
<h2>Week 17: August 19 - August 23</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek18"></a>
+
-
<h2>Week 18: August 26 - August 30</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek19"></a>
+
-
<h2>Week 19: September 2 - September 6</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek20"></a>
+
-
<h2>Week 20: September 9 - September 13</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek21"></a>
+
-
<h2>Week 21: September 16 - September 20</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek22"></a>
+
-
<h2>Week 22: September 23 - September 27</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="EngineeringJournal">
+
-
<a name="JournalEngineeringWeek23"></a>
+
-
<h2>Week 23: September 30 - October 4</h2>
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
+
-
</p>
+
-
<a href="#JournalEngineeringTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
</section>
+
-
</body>
+
-
</html>
+

Latest revision as of 01:21, 20 May 2014

/*** Name: Wm. Keith van der Meulen Date: Summer 2013 Organization: University of Calgary iGEM Team 2013

---Purpose--- CSS code to define navigation stylings.

Cite: Wm. Keith van der Meulen University of Calgary iGEM 2013 https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css

      • /
  1. TopBar {

background: #231F20; width: 100%; min-width: 766px; height: 89px; z-index: 10; position: fixed; text-align: center; top: 25px; }

  1. TopBar #TopLvlNavLink {

display: none; }

  1. TopBar ul {

background: #231F20; list-style: none; position: relative; display: inline-table; padding: 0; margin: 0; }

  1. TopBar ul:after {

content: ""; clear: both; display: block; }

  1. TopBar li {

float: left; width: 124px; text-align: center; }

  1. TopBar li:hover > a {

text-decoration: underline; }

  1. TopBar a {

display: block; width: 100%; height: 100%; padding: 15px 0; color: #FFFFFF; text-decoration: none; font: 24px Raleway, Arial, san-serif; }

  1. TopBar > #TopLvlNav > li > a {

padding: 29px 0; }

  1. TopBar ul ul {

display: none; background: #231F20; padding: 0 10px; position: absolute; top: 95%; z-index: 10; margin-left: -10px; }

  1. TopBar ul li:hover > ul {

display: block; }

  1. TopBar ul ul li {

float: none; position: relative; }

  1. TopBar ul ul a {

font-size: 18px; }

  1. TopBar ul ul ul {

position: absolute; left: 100%; top: 0; margin: 0; }

@keyframes rotate { 

 from {
   transform: rotate(0deg);
   -ms-transform: rotate(0deg);
 }
 to {
   transform: rotate(59deg);
   -ms-transform: rotate(59deg);
 }

}

@-webkit-keyframes rotate { 

 from {
   -webkit-transform: rotate(0deg);
 }
 to { 
   -webkit-transform: rotate(59deg);
 }

}

@-moz-keyframes rotate { 

 from {
   transform: rotate(0deg);
 }
 to { 
   transform: rotate(59deg);
 }

}

@-o-keyframes rotate { 

 from {
   transform: rotate(0deg);
 }
 to { 
   transform: rotate(59deg);
 }

}

  1. TopBar #LogoItem:hover > img { 
   -webkit-animation-name:             rotate; 
   -webkit-animation-duration:         .5s; 
   -webkit-animation-iteration-count:  infinite;
   -webkit-animation-timing-function: linear;

}

  1. TopBar #LogoItem {

padding: 8px 0; }

  1. TopBarCollapse {

position: fixed; width: 120px; height: 60px; top: 25px; background: orange; z-index: 10; }

  1. TopBarCollapse #TopLvlNavLink {

display: block; width: 100%; height: 100%; }

  1. TopBarCollapse:after {

content: ""; clear: both; display: block; }

  1. TopBarCollapse ul {

display: none; list-style: none; padding: 0; }

  1. TopBarCollapse ul:after {

content: ""; clear: both; display: block; }

  1. TopBarCollapse li {

float: left; display: block; clear: both; width: 120px; padding: 0; background: green; }

  1. TopBarCollapse li:hover {

background: pink; }

  1. TopBarCollapse a {

color: #FFFFFF; display: block; text-decoration: none; padding: 10px 15px; }

  1. TopBarCollapse #LogoItem {

display: none !important; }

Retrieved from "http://2013.igem.org/Team:Calgary/StyleSheets/Navigation"