Team:Calgary/Notebook/Journal/EngineeringJournal

From 2013.igem.org

(Difference between revisions)
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.
-
<!-- Fonts -->
+
-------------
-
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
+
 
 +
Cite:
 +
Wm. Keith van der Meulen
 +
University of Calgary iGEM 2013
 +
https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css
 +
 
 +
***/
 +
 
 +
/* Start: Style for making drop down header*/
 +
.NavMain * {
 +
box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
}
 +
 
 +
.NavMain {
 +
display: inline-block;
 +
background: #000000;
 +
width: 100%;
 +
padding: 0 auto;
 +
}
 +
 +
.NavMain ul {
 +
list-style: none;
 +
position: relative;
 +
display: inline-table;
 +
padding: 0;
 +
margin-left: 172px;
 +
}
 +
 
 +
.NavMain ul:after {
 +
content: "";
 +
clear: both;
 +
display: block;
 +
}
 +
 
 +
.NavMain ul li {
 +
float: left;
 +
padding: 0 5px;
 +
}
 +
/* End: Style for making drop down header*/
-
<!-- Stylesheets -->
+
/* Start: Style for making diagonal highlight*/
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet">
+
#MainLinks {
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Typography?action=raw&ctype=text/css" rel="stylesheet">
+
-webkit-transform: skew(-45deg);
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Layout?action=raw&ctype=text/css" rel="stylesheet">
+
-moz-transform: skew(-45deg);
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css" rel="stylesheet">
+
-ms-transform: skew(-45deg);
 +
-o-transform: skew(-45deg);
 +
transform: skew(-45deg);
 +
}
-
<!-- Reset for BodyContent -->
+
#MainLinks a, #MainLinks ul {
-
<style>
+
-webkit-transform: skew(45deg);
-
#content{
+
-moz-transform: skew(45deg);
-
width: 100%;
+
-ms-transform: skew(45deg);
-
min-width: 1008px;
+
-o-transform: skew(45deg);
-
padding: 0px 0px 0px 0px;
+
transform: skew(45deg);
-
background-color:transparent;
+
}
-
border: none;
+
 +
#MainLinks ul li a {
 +
-webkit-transform: skew(0deg);
 +
-moz-transform: skew(0deg);
 +
-ms-transform: skew(0deg);
 +
-o-transform: skew(0deg);
 +
transform: skew(0deg);
 +
}
 +
 +
#MainLinks ul ul {
 +
-webkit-transform: skew(0deg);
 +
-moz-transform: skew(0deg);
 +
-ms-transform: skew(0deg);
 +
-o-transform: skew(0deg);
 +
transform: skew(0deg);
 +
}
 +
 
 +
#MainLinks:hover {
 +
background: #00FFFF;
}
}
-
#bodyContent{
+
#MainLinks:hover > a {
-
width: 100%;
+
color: #000000;
-
min-width: 1008px;
+
-
padding: 0px 0px 0px 0px;
+
-
background-color:transparent;
+
-
border: none;
+
}
}
-
</style>
+
/* End: Style for making diagonal highlight*/
-
</head>
+
 
-
+
/* Start: Style for aligning sub-menus with header link*/
-
<body>
+
#MainProjectNav {
-
<a name="PageTop"></a>
+
left: 176px;
 +
}
-
<nav class="NavMain">
+
#MainTeamNav {
-
<ul>
+
left: 88px;
-
<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">
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Tales">Tales</a>
+
-
<ul>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Ferritin">Ferritin</a>
+
-
<ul>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Linker">Linker</a>
+
-
<ul>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Engineering">Engineering</a>
+
-
<ul>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/HumanPractices">Human Practices</a>
+
-
<ul>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
-
</li>
+
-
<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>
+
-
</ul>
+
-
</li>
+
-
<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>
+
-
<li><a href="https://igem.org/Team.cgi?id=1189" target="_blank">Our Profile</a></li>
+
-
<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>
+
-
</li>
+
-
<li id="MainLinks"><a href="https://2013.igem.org/Team:Calgary/Notebook">Notebook</a>
+
-
<ul id="MainNotebookNav">
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal">Journal</a>
+
-
<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>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/LinkerJournal">Linker</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/EngineeringJournal">Engineering</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/HumanPracticesJournal">Human Practices</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Protocols">Protocols</a>
+
-
<ul>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Parts">Parts</a></li>
+
-
</ul>
+
-
</li>
+
-
<li id="MainLinks"><a href="https://2013.igem.org/Team:Calgary/Outreach">Outreach</a>
+
-
<ul id="MainOutreachNav">
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
-
</li>
+
-
<li id="MainLinks"><a href="https://2013.igem.org" target="_blank">iGEM</a></li>
+
-
</ul>
+
-
</nav>
+
-
<nav class="NavSide">
+
#MainNotebookNav {
-
<ul>
+
left: 66px;
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook">Notebook</a></li>
+
}
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal">Journal</a>
+
-
<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>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/LinkerJournal">Linker</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/EngineeringJournal">Engineering</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/HumanPracticesJournal">Human Practices</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Protocols">Protocols</a>
+
-
<ul>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Parts">Parts</a></li>
+
-
</ul>
+
-
</nav>
+
-
<section class="Content">
+
#MainOutreachNav {
 +
left: 66px;
 +
}
 +
/* End: Style for aligning sub-menus with header link*/
 +
 
 +
/* Start: Style for link attributes and sub-menu drop down links*/
 +
.NavMain ul li a {
 +
display: block;
 +
width: 159;
 +
font: 20px 'Raleway', Helvetica, Arial, sans-serif;
 +
text-decoration: none;
 +
text-align: center;
 +
color: #FFFFFF;
 +
padding: 10px;
 +
background: none;
 +
}
-
<h1>Engineering Journal</h1>
+
.NavMain ul li:hover > ul {
-
+
display: block;
-
<!--Create Table of Contents to link to each week's progress-->
+
}
-
<h2>Contents</h2>
+
.NavMain ul ul {
-
+
display: none;
-
<nav class="NavWeek">
+
position: absolute;
-
<table>
+
top: 100%;
-
<tr>
+
margin: 0;
-
<td><b>May</b></td>
+
}
-
<td><b>June</b></td>
+
-
<td><b>July</b></td>
+
.NavMain ul li:hover {
-
<td><b>August</b></td>
+
background: #00FFFF;
-
<td><b>September</b></td>
+
}
-
</tr>
+
 
-
<tr>
+
.NavMain ul li:hover > a {
-
<td>
+
color: #000000;
-
<ul>
+
}
-
<li><a href="#Week1">Week 1</a></li>
+
-
<li><a href="#Week2">Week 2</a></li>
+
-
<li><a href="#Week3">Week 3</a></li>
+
-
<li><a href="#Week4">Week 4</a></li>
+
-
<li><a href="#Week5">Week 5</a></li>
+
-
</ul>
+
-
</td>
+
-
<td>
+
-
<ul>
+
-
<li><a href="#Week6">Week 6</a></li>
+
-
<li><a href="#Week7">Week 7</a></li>
+
-
<li><a href="#Week8">Week 8</a></li>
+
-
<li><a href="#Week9">Week 9</a></li>
+
-
</ul>
+
-
</td>
+
-
<td>
+
-
<ul>
+
-
<li><a href="#Week10">Week 10</a></li>
+
-
<li><a href="#Week11">Week 11</a></li>
+
-
<li><a href="#Week12">Week 12</a></li>
+
-
<li><a href="#Week13">Week 13</a></li>
+
-
<li><a href="#Week14">Week 14</a></li>
+
-
</ul>
+
-
</td>
+
-
<td>
+
-
<ul>
+
-
<li><a href="#Week15">Week 15</a></li>
+
-
<li><a href="#Week16">Week 16</a></li>
+
-
<li><a href="#Week17">Week 17</a></li>
+
-
<li><a href="#Week18">Week 18</a></li>
+
-
</ul>
+
-
</td>
+
-
<td>
+
-
<ul>
+
-
<li><a href="#Week19">Week 19</a></li>
+
-
<li><a href="#Week20">Week 20</a></li>
+
-
<li><a href="#Week21">Week 21</a></li>
+
-
<li><a href="#Week22">Week 22</a></li>
+
-
<li><a href="#Week23">Week 23</a></li>
+
-
</ul>
+
-
</td>
+
-
</tr>
+
-
</table>
+
-
</nav>
+
-
<!--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-->
+
.NavMain ul ul li:hover > a {
 +
background: #00FFFF;
 +
}
 +
 +
.NavMain ul ul li {
 +
float: none;
 +
position: relative;
 +
width: 200px;
 +
padding: 0;
 +
}
-
<article class="Journal">
+
.NavMain ul ul li a {
-
<a name="Week1"></a>
+
width: auto;
-
<h2>Week 1: May 1 - May 3</h2>
+
text-align: left;
-
<p>
+
background: #000000;
-
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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
.NavMain ul ul li a:hover {
-
</article>
+
background: none;
-
+
}
-
<article class="Journal">
+
-
<a name="Week2"></a>
+
.NavMain ul ul ul {
-
<h2>Week 2: May 6 - May 10</h2>
+
position: absolute;
-
<p>
+
left: 100%;
-
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.
+
top: 0;
-
</p>
+
}
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week3"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
<article class="Journal">
+
.NavMain ul ul ul li {
-
<a name="Week4"></a>
+
padding: 0;
-
<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.
+
.NavMain ul ul ul li:first-child {
-
</p>
+
margin-top: 0;
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
}
-
</article>
+
/* End: Style for link attributes*/
-
+
 
-
<article class="Journal">
+
/* Start: Style for making sidebar */
-
<a name="Week5"></a>
+
.NavSide * {
-
<h2>Week 5: May 27 - May 31</h2>
+
box-sizing: border-box;
-
<p>
+
-moz-box-sizing: border-box;
-
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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
.NavSide {
-
</article>
+
background: #000000;
-
+
width: 150px;
-
<article class="Journal">
+
padding: 10px 0;
-
<a name="Week6"></a>
+
float: left;
-
<h2>Week 6: June 3 - June 7</h2>
+
margin: 0 20px 0 0;
-
<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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
.NavSide ul {
-
</article>
+
list-style-type: none;
-
+
padding: 0;
-
<article class="Journal">
+
margin: 0;
-
<a name="Week7"></a>
+
}
-
<h2>Week 7: June 10 - June 14</h2>
+
 
-
<p>
+
.NavSide ul ul {
-
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.
+
padding-left: 15px;
-
</p>
+
}
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
 
-
</article>
+
.NavSide ul ul li a {
-
+
font-size: 15px;
-
<article class="Journal">
+
}
-
<a name="Week8"></a>
+
 
-
<h2>Week 8: June 17 - June 21</h2>
+
.NavSide ul li a {
-
<p>
+
display: block;
-
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.
+
font: 18px 'Raleway';
-
</p>
+
text-decoration: none;
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
color: #FFFFFF;
-
</article>
+
padding: 10px;
-
+
background: none;
-
<article class="Journal">
+
}
-
<a name="Week9"></a>
+
 
-
<h2>Week 9: June 24 - June 28</h2>
+
.NavSide ul li:first-child a {
-
<p>
+
font-size: 22px;
-
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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
.NavSide ul ul li:first-child a {
-
</article>
+
font-size: 15px;
-
+
}
-
<article class="Journal">
+
 
-
<a name="Week10"></a>
+
.NavSide ul li a:hover {
-
<h2>Week 10: July 1 - July 5</h2>
+
background: #00FFFF;
-
<p>
+
color: #000000;
-
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>
+
/* End: Style for making sidebar */
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
 
-
</article>
+
/* Start: Style for week selector */
-
+
.NavWeek * {
-
<article class="Journal">
+
box-sizing: border-box;
-
<a name="Week11"></a>
+
-moz-box-sizing: border-box;
-
<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.
+
.NavWeek table {
-
</p>
+
border-collapse: collapse;
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
background: #000000;
-
</article>
+
}
-
+
 
-
<article class="Journal">
+
.NavWeek td {
-
<a name="Week12"></a>
+
width: 100px;
-
<h2>Week 12: July 15 - July 19</h2>
+
text-align: center;
-
<p>
+
vertical-align: middle;
-
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.
+
color: #FFFFFF;
-
</p>
+
}
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
 
-
</article>
+
.NavWeek ul {
-
+
list-style-type: none;
-
<article class="Journal">
+
margin: 0;
-
<a name="Week13"></a>
+
padding: 0;
-
<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.
+
.NavWeek a {
-
</p>
+
color: #FFFFFF;
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
text-decoration: none;
-
</article>
+
font-size: 18px;
-
+
display: block;
-
<article class="Journal">
+
padding: 5px;
-
<a name="Week14"></a>
+
}
-
<h2>Week 14: July 29 - August 2</h2>
+
 
-
<p>
+
.NavWeek a:hover {
-
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.
+
color: #000000;
-
</p>
+
background: #00FFFF;
-
<a href="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
}
-
</article>
+
 
-
+
.NavWeek b {
-
<article class="Journal">
+
font-size: 20px;
-
<a name="Week15"></a>
+
font-weight: bold;
-
<h2>Week 15: August 5 - August 9</h2>
+
}
-
<p>
+
/* End: Style for week selector */
-
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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week16"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week17"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week18"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week19"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week20"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week21"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week22"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
+
-
<article class="Journal">
+
-
<a name="Week23"></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="#PageTop" class="TopOfPage">Return To Top of Page</a>
+
-
</article>
+
-
</section>
+
-
</body>
+
-
</html>
+

Revision as of 22:34, 19 June 2013

/*** 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

      • /

/* Start: Style for making drop down header*/ .NavMain * { box-sizing: border-box; -moz-box-sizing: border-box; }

.NavMain { display: inline-block; background: #000000; width: 100%; padding: 0 auto; }

.NavMain ul { list-style: none; position: relative; display: inline-table; padding: 0; margin-left: 172px; }

.NavMain ul:after { content: ""; clear: both; display: block; }

.NavMain ul li { float: left; padding: 0 5px; } /* End: Style for making drop down header*/

/* Start: Style for making diagonal highlight*/ #MainLinks { -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -ms-transform: skew(-45deg); -o-transform: skew(-45deg); transform: skew(-45deg); }

#MainLinks a, #MainLinks ul { -webkit-transform: skew(45deg); -moz-transform: skew(45deg); -ms-transform: skew(45deg); -o-transform: skew(45deg); transform: skew(45deg); }

#MainLinks ul li a { -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -ms-transform: skew(0deg); -o-transform: skew(0deg); transform: skew(0deg); }

#MainLinks ul ul { -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -ms-transform: skew(0deg); -o-transform: skew(0deg); transform: skew(0deg); }

#MainLinks:hover { background: #00FFFF; }

#MainLinks:hover > a { color: #000000; } /* End: Style for making diagonal highlight*/

/* Start: Style for aligning sub-menus with header link*/ #MainProjectNav { left: 176px; }

#MainTeamNav { left: 88px; }

#MainNotebookNav { left: 66px; }

#MainOutreachNav { left: 66px; } /* End: Style for aligning sub-menus with header link*/

/* Start: Style for link attributes and sub-menu drop down links*/ .NavMain ul li a { display: block; width: 159; font: 20px 'Raleway', Helvetica, Arial, sans-serif; text-decoration: none; text-align: center; color: #FFFFFF; padding: 10px; background: none; }

.NavMain ul li:hover > ul { display: block; }

.NavMain ul ul { display: none; position: absolute; top: 100%; margin: 0; }

.NavMain ul li:hover { background: #00FFFF; }

.NavMain ul li:hover > a { color: #000000; }

.NavMain ul ul li:hover > a { background: #00FFFF; }

.NavMain ul ul li { float: none; position: relative; width: 200px; padding: 0; }

.NavMain ul ul li a { width: auto; text-align: left; background: #000000; }

.NavMain ul ul li a:hover { background: none; }

.NavMain ul ul ul { position: absolute; left: 100%; top: 0; }

.NavMain ul ul ul li { padding: 0; }

.NavMain ul ul ul li:first-child { margin-top: 0; } /* End: Style for link attributes*/

/* Start: Style for making sidebar */ .NavSide * { box-sizing: border-box; -moz-box-sizing: border-box; }

.NavSide { background: #000000; width: 150px; padding: 10px 0; float: left; margin: 0 20px 0 0; }


.NavSide ul { list-style-type: none; padding: 0; margin: 0; }

.NavSide ul ul { padding-left: 15px; }

.NavSide ul ul li a { font-size: 15px; }

.NavSide ul li a { display: block; font: 18px 'Raleway'; text-decoration: none; color: #FFFFFF; padding: 10px; background: none; }

.NavSide ul li:first-child a { font-size: 22px; }

.NavSide ul ul li:first-child a { font-size: 15px; }

.NavSide ul li a:hover { background: #00FFFF; color: #000000; } /* End: Style for making sidebar */

/* Start: Style for week selector */ .NavWeek * { box-sizing: border-box; -moz-box-sizing: border-box; }

.NavWeek table { border-collapse: collapse; background: #000000; }

.NavWeek td { width: 100px; text-align: center; vertical-align: middle; color: #FFFFFF; }

.NavWeek ul { list-style-type: none; margin: 0; padding: 0; }

.NavWeek a { color: #FFFFFF; text-decoration: none; font-size: 18px; display: block; padding: 5px; }

.NavWeek a:hover { color: #000000; background: #00FFFF; }

.NavWeek b { font-size: 20px; font-weight: bold; } /* End: Style for week selector */

Retrieved from "http://2013.igem.org/Team:Calgary/Notebook/Journal/EngineeringJournal"