Team:Waterloo/Test

From 2013.igem.org

(Difference between revisions)
 
(45 intermediate revisions not shown)
Line 1: Line 1:
-
+
<html>
-
 
+
<style type="text/css">
-
 
+
//remove header
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
-
<!--
+
-
Design by Free CSS Templates
+
-
http://www.freecsstemplates.org
+
-
Released for free under a Creative Commons Attribution 2.5 License
+
-
 
+
-
Name      : Glissade
+
-
Description: A two-column, fixed-width design with dark color scheme.
+
-
Version    : 1.0
+
-
Released  : 20130326
+
-
 
+
-
-->
+
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
-
<head>
+
-
<meta name="keywords" content="" />
+
-
<meta name="description" content="" />
+
-
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
-
<title>Glissade by FCT</title>
+
-
 
+
-
 
+
-
 
+
-
<style media="screen" type="text/css">
+
-
 
+
#catlinks { display:none;}
#catlinks { display:none;}
#search-controls {display: none}
#search-controls {display: none}
Line 38: Line 15:
 +
/* bg colour change */
body {
body {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
-
background: #E5E6DD;
+
-
font-family: 'Oxygen', sans-serif;
+
font-family: Georgia, "Times New Roman", Times, serif;
-
font-size: 13px;
+
font-size: 12px;
-
color: #8A8985;
+
color: #000000;
 +
        background: #585858;
}
}
-
h1, h2, h3 {
+
a:link, a:visited { color: #000000; text-decoration: none; font-weight: normal; }
-
margin: 0;
+
a:active, a:hover { color: #000000; text-decoration: underline; }
-
padding: 0;
+
 
-
text-transform: uppercase;
+
img { margin: 0px; padding: 0px; border: none; }
-
font-weight: 300;
+
 
-
color: #7D7764;
+
#header_wrapper {
 +
width: 100%;
 +
height: 265px;
 +
background: url(https://static.igem.org/mediawiki/igem.org/2/29/UW_IGEM_header_final.jpeg) no-repeat top center;
}
}
-
h1 {
+
#header {
-
font-size: 2em;
+
position: relative;
 +
width: 980px;
 +
height: 265px;
 +
padding: 0 10px;
 +
margin: 0 auto;
 +
background: url(https://static.igem.org/mediawiki/igem.org/2/29/UW_IGEM_header_final.jpeg) no-repeat top center;
}
}
-
h2 {
 
-
font-size: 2.8em;
 
-
}
 
-
h3 {
+
 
-
font-size: 1.6em;
+
/* navigation */
 +
 
 +
ul  {
 +
      list-style-image: none;
}
}
-
p, ul, ol {
+
#nav {
-
margin-top: 0;
+
float: right;
-
line-height: 180%;
+
font-family: Arial, Helvetica, sans-serif;
 +
font-weight: bold;
 +
font-size: 12px;
 +
padding-top: 70px;
 +
height: 43px;
}
}
-
ul, ol {
+
#nav .last {
 +
padding-right: 2px;
 +
background-image:url(https://static.igem.org/mediawiki/2013/6/67/UW_IGEM_nav_butn.png);
 +
background-repeat:no-repeat;
 +
background-position:right;
}
}
-
a {
+
#nav, #nav ul{
-
text-decoration: none;
+
margin:0;
-
color: #5BA689;
+
padding:0;
 +
list-style-type:none;
 +
list-style-position:outside;
 +
position:relative;
 +
line-height:1.5em;
}
}
-
a:hover {
+
#nav .on {
 +
color:#fff !important;
 +
background-image: url(https://static.igem.org/mediawiki/2013/1/13/UW_search.png) !important;
 +
background-position: bottom left !important;
}
}
-
#wrapper {
+
#nav a:link, #nav a:active, #nav a:visited{
-
overflow: hidden;
+
    display:block;
-
background: #F1F2E9;
+
    padding: 14px 35px;
 +
    color:#a5a5a5;
 +
    text-decoration:none;
 +
    background-image: url(https://static.igem.org/mediawiki/2013/4/4a/UW_nav_butn_bg.jpg);
 +
    background-position: top left;;
}
}
-
.container {
+
#nav a:hover {
-
width: 1200px;
+
    color:#fff;
-
margin: 0px auto;
+
    background-image: url(https://static.igem.org/mediawiki/2013/4/4a/UW_nav_butn_bg.jpg);
 +
    background-position: bottom left;
}
}
-
/* Header */
+
#nav li{
-
 
+
    float:left;
-
#header-wrapper {
+
    position:relative;
-
overflow: hidden;
+
-
height: 600px;
+
}
}
-
#header {
+
#nav ul {
-
width: 960px;
+
    position:absolute;
-
height: 200px;
+
    width:13em;
-
margin: 0 auto;
+
    top:3.8em;
-
padding: 0px 20px;
+
    display:none;
 +
    z-index: 1;
}
}
-
/* Banner */
+
#nav li ul a {
-
 
+
    width:9em;
-
#banner {
+
    float:left;
-
overflow: hidden;
+
    background-color: #2e2e2e;
-
height: 400px;
+
    background-image: none !important;
-
background: url(images/img04.jpg) no-repeat center bottom;
+
}
}
-
#banner .image-style {
+
#nav li ul a:hover {
-
border: 15px solid #F4F4F4;
+
background-color: #292929;
}
}
-
/* Logo */
+
#nav ul ul{
 +
top:auto;
 +
}
-
#logo {
+
#nav li ul ul {
-
overflow: hidden;
+
    left:12em;
-
height: 250px;
+
    margin:0px 0 0 10px;
}
}
-
#logo h1, #logo p {
+
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
-
text-align: center;
+
    display:none;
}
}
-
#logo h1 {
+
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
-
padding: 50px 0px 0px 0px;
+
    display:block;
-
letter-spacing: -6px;
+
-
text-transform: lowercase;
+
-
font-size: 100px;
+
}
}
-
#logo p {
+
/*end of navigation*/
-
margin-top: -20px;
+
 
-
padding: 0px 0px 0px 5px;
+
/* search */
-
font-size: 20px;
+
#header #search_box {
-
font-weight: 300;
+
        position:absolute;
-
color: #696969;
+
width: 333px;
 +
height: 53px;
 +
bottom: 54px;
 +
right: 16px;
 +
background: url(https://static.igem.org/mediawiki/2013/1/13/UW_search.png) !important;
}
}
-
#logo p a {
+
#search_box form {
-
color: #696969;
+
width: 280px;
 +
height: 27px;
 +
margin-bottom: o;
 +
padding: 25px 0 0 0;
}
}
-
#logo a {
+
#searchfield {
-
border: none;
+
height: 17px;
 +
width: 270px;
 +
padding: 4px 5px 6px 5px;
 +
color: #fff;
 +
font-size: 12px;
 +
font-variant: normal;
 +
line-height: normal;
background: none;
background: none;
-
text-decoration: none;
+
border: none;
-
color: #3C342E;
+
}
}
-
/* Splash */
+
/* end of search */
-
#splash {
+
 
-
overflow: hidden;
+
/* content_wrapper */
-
padding: 0px 0px 50px 0px;
+
/* change bg colour */
-
border-bottom: 1px dashed #E7E2DC;
+
#content {
-
letter-spacing: -3px;
+
background-color: #585858;
-
text-align: center;
+
width: auto;
-
font-size: 48px;
+
}
}
-
#splash span {
+
#content_wrapper {
-
color: #313131;
+
width: 920px;
 +
margin: 0 auto;
 +
padding: 30px 40px;
 +
background: url(https://static.igem.org/mediawiki/2013/6/6f/UW_content_side.jpg) repeat-y;
}
}
-
/* Search */
+
#content_wrapper h1 {
 +
color: #ffffff;
 +
font-size:24px;
-
#search {
+
        padding: 0 0 60px 20px;
-
float: right;
+
-
width: 280px;
+
-
height: 60px;
+
-
padding: 20px 0px 0px 0px;
+
-
}
+
-
#search form {
 
-
height: 41px;
 
-
margin: 0;
 
-
padding: 10px 0 0 20px;
 
-
}
 
-
#search fieldset {
 
-
margin: 0;
 
-
padding: 0;
 
-
border: none;
 
}
}
-
#search-text {
+
#content_wrapper p {
-
width: 170px;
+
font-family: Verdana, Arial;
-
padding: 6px 5px 2px 5px;
+
font-size:14px;
-
border: 1px solid #DEDEDE;
+
-
background: #FFFFFF;
+
-
text-transform: lowercase;
+
-
font: normal 11px Arial, Helvetica, sans-serif;
+
-
color: #5D781D;
+
}
}
-
#search-submit {
+
#content_wrapper_bottom {
-
width: 50px;
+
width: 1000px;
-
height: 22px;
+
height: 15px;
-
border: none;
+
margin: 0 auto;
-
background: #B9B9B9;
+
color: white;
-
color: #000000;
+
background: url(https://static.igem.org/mediawiki/2013/e/ea/UW_content_bottom.jpg) no-repeat;
 +
        background-color: #585858;
}
}
-
/* Menu */
+
/* end of content_wrapper */
-
#menu-wrapper {
+
/* footer */
-
overflow: hidden;
+
 
-
height: 52px;
+
#mfooter {
-
margin-bottom: 2em;
+
width: 980px;
-
background: #3C342E;
+
margin: 0 auto;
 +
padding: 30px 10px;
 +
text-align: center;
 +
color: #ffffff;
 +
        background-color: #585858;
}
}
-
#menu {
+
#mfooter a {
-
overflow: hidden;
+
color:#ffffff;
-
height: 52px;
+
}
}
-
#menu ul {
+
#mfooter .mfooter_menu {
-
margin: 0;
+
margin: 0 0 10px 0;
-
padding: 0px 0px 0px 0px;
+
padding: 0px;
list-style: none;
list-style: none;
-
line-height: normal;
 
-
text-align: center;
 
}
}
-
#menu li {
+
.mfooter_menu li {
-
display: inline-block;
+
margin: 0px;
 +
padding: 0 20px;
 +
display: inline;
 +
border-right: 1px solid #000000;
}
}
-
#menu a {
+
.mfooter_menu .last_menu {
-
display: block;
+
-
padding: 0px 30px;
+
-
line-height: 52px;
+
border: none;
border: none;
-
text-decoration: none;
 
-
text-transform: lowercase;
 
-
text-align: center;
 
-
text-transform: uppercase;
 
-
font-family: 'Oswald', sans-serif;
 
-
font-size: 14px;
 
-
font-weight: 300;
 
-
color: #FFFFFF;
 
}
}
-
#menu a:hover, #menu .current_page_item a {
+
#footer-box { background-color: transparent; border:none;} /*This is important!*/
-
background: #DE5635;
+
/* end of footer*/
-
text-decoration: none;
+
-
color: #FFFFFF;
+
-
}
+
-
#menu .current_page_item a {
+
/* content */
-
}
+
-
/* Page */
+
.content_section {
-
 
+
clear: both;
-
#page {
+
width: 100%;
-
overflow: hidden;
+
-
padding: 20px 20px 40px 20px;
+
}
}
-
/* Content */
 
-
#content {
+
.intro_box {
-
float: center;
+
float: left;
-
width:1200px;
+
width: 282px;
-
padding: 0px 0px 0px 0px;
+
padding-bottom: 10px;
 +
border-bottom: 1px dotted #666;
 +
margin-bottom: 20px;
}
}
-
.post {
+
.fl_image {
-
overflow: hidden;
+
float: left;
 +
margin: 3px 15px 5px 0;
}
}
-
.post .title {
+
#content .product_box p {
-
margin: 0px 0px 30px 0px;
+
padding: 0;
-
padding: 0px 0px 10px 0px;
+
margin: 0 0 5px 0;
-
border-bottom: 3px solid #E0E1D6;
+
-
text-shadow: 1px 1px 0px #FFFFFF;
+
-
font-size: 26px;
+
-
color: #373737;
+
}
}
-
.post .title a {
+
#content .product_box a {
-
border: none;
+
color: #000000;
-
color: #373737;
+
font-weight: bold;
}
}
-
.post .meta {
+
#content .em_text {
-
margin-bottom: 30px;
+
color: #537c11;
-
padding: 0px;
+
-
text-align: left;
+
-
font-size: 16px;
+
}
}
-
.post .meta .date {
+
.inro {
-
float: left;
+
color: #C30;
 +
font-size: 14px;
 +
font-weight: bold;
}
}
-
.post .meta .posted {
+
.intro_box h3 {
-
float: right;
+
background: #000000;
 +
padding: 3px 10px;
 +
margin: 0 0 10px 0;
 +
color: #ffffff;
 +
font-size: 12px;
}
}
-
.post .meta a {
+
.intro_box img {
 +
width: 272px;
 +
height: 168px;
 +
border: 5px solid #e6e0ce;
 +
        margin-bottom: 10px;
}
}
-
.post .entry {
+
.button_01 a {
-
padding: 0px 0px 20px 0px;
+
display: block;
-
padding-bottom: 20px;
+
width: 102px;
-
text-align: justify;
+
height: 23px;
 +
padding: 7px 0 0 0;
 +
background: none;
 +
color: #333;
 +
font-size: 12px;
 +
font-weight: bold;
 +
text-align: center;
 +
text-decoration: none;
}
}
-
.links {
+
.button_01 a:hover {
-
padding-top: 20px;
+
color: #fff;
-
margin-bottom: 30px;
+
        background:url(./images/USTC_Software_button_hover.png) no-repeat;
}
}
-
 
+
/* Detail buttons */
-
.more {
+
.button_01 a {
display: block;
display: block;
-
float: left;
+
width: 102px;
-
width: 88px;
+
height: 23px;
-
height: 25px;
+
padding: 7px 0 0 0;
-
padding: 2px 0px 0px 0px;
+
background: url(https://static.igem.org/mediawiki/2013/6/69/UW_linked_butn.png) no-repeat;
-
margin-right: 10px;
+
color: #333;
-
background: url(images/img08.jpg) no-repeat left top;
+
font-size: 12px;
 +
font-weight: bold;
text-align: center;
text-align: center;
-
color: #FFFFFF;
+
text-decoration: none;
}
}
-
.comments {
+
.button_01 a:hover {
-
display: block;
+
color: #fff;
-
float: left;
+
        background:url(https://static.igem.org/mediawiki/2013/6/61/UW_linked_butn_blue.png) no-repeat;
-
width: 88px;
+
-
height: 25px;
+
-
padding: 2px 0px 0px 0px;
+
-
background: url(images/img08.jpg) no-repeat left top;
+
-
text-align: center;
+
-
color: #FFFFFF;
+
}
}
-
/* Sidebar */
+
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  } /**/  /*This is important!*/
 +
.cleaner_h30 { clear: both; width:100%; height: 30px; }/**/
 +
.cleaner_h40 { clear: both; width:100%; height: 40px; }/**/
 +
.margin_r10 { margin-right: 24px; }/**/
-
#sidebar {
+
.float_l { float: left; }/**/
-
float: right;
+
.float_r { float: right; }/**/
-
width: 384px;
+
-
margin: 0px;
+
-
padding: 0px 0px 0px 0px;
+
-
color: #787878;
+
-
}
+
-
#sidebar h2 {
+
/*--Window & Text Table--*/
-
margin: 0px 0px 30px 0px;
+
table#rotator_news {
-
padding: 0px 0px 10px 0px;
+
pading-bottom: 10px;
-
border-bottom: 3px solid #E0E1D6;
+
-
text-shadow: 1px 1px 0px #FFFFFF;
+
-
font-size: 26px;
+
-
color: #373737;
+
}
}
-
#sidebar a {
+
/*--Main Image Rotator Container--*/
-
border: none;
+
.main_view {
 +
float: left;
 +
position: relative;
 +
/*border: 0px solid #fff;*/
 +
width: 650px;
}
}
-
 
+
/*--Image Rotator Window/Masking Styles--*/
-
#sidebar a:hover {
+
.window {
-
text-decoration: underline;
+
height:400px;
 +
width: 650px;
 +
overflow: hidden; /*--Hides anything outside of the set width/height--*/
 +
position: relative;
}
}
 +
.image_reel {
 +
position: absolute;
 +
top: 0; left: 0;
 +
}
 +
.image_reel img {float: left;}
-
/* Calendar */
+
/*--Paging Styles--*/
 +
.paging {
 +
position: absolute;
 +
bottom: 0px; right: -15px;
 +
width: 400px; height:47px; /*--Increase this width when adding more numbers in paging--*/
 +
z-index: 100; /*--Assures the paging stays on the top layer--*/
 +
text-align: center;
 +
line-height: 110px;
-
#calendar {
+
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
}
-
 
+
.paging a {
-
#calendar_wrap {
+
padding: 5px;
-
padding: 20px;
+
text-decoration: none;
 +
color: #000;
}
}
-
 
+
.paging a.active {
-
#calendar table {
+
font-weight: bold;
-
width: 100%;
+
/*background: #ffffff;*/
 +
border: 1px solid #ffffff;
 +
-moz-border-radius: 3px;
 +
-khtml-border-radius: 3px;
 +
-webkit-border-radius: 3px;
}
}
 +
.paging a:hover {font-weight: bold;}
 +
/*end of Window & Text Table*/
-
#calendar tbody td {
+
</style>
-
text-align: center;
+
-
}
+
-
#calendar #next {
+
<!-- Javascript-->
-
text-align: right;
+
-
}
+
-
/* Three Column Footer Content */
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
//Set Default State of each portfolio piece
 +
$(".paging").show();
 +
$(".paging a:first").addClass("active");
 +
 +
//Get size of images, how many there are, then determin the size of the image reel.
 +
var imageWidth = $(".window").width();
 +
var imageSum = $(".image_reel img").size();
 +
var imageReelWidth = imageWidth * imageSum;
 +
 +
//Adjust the image reel to its new size
 +
$(".image_reel").css({'width' : imageReelWidth});
 +
 +
//Paging + Slider Function
 +
rotate = function(){
 +
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
 +
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
-
#footer-bg {
+
$(".paging a").removeClass('active'); //Remove all active class
-
overflow: hidden;
+
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
-
padding: 70px 0px;
+
-
background: #3C342E;
+
//Slider Animation
-
border-top: 10px solid #E5E6DD;
+
$(".image_reel").animate({  
-
}
+
left: -image_reelPosition
 +
}, 500 );
 +
 +
};  
 +
 +
//Rotation + Timing Event
 +
rotateSwitch = function(){
 +
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
 +
$active = $('.paging a.active').next();
 +
if ( $active.length === 0) { //If paging reaches the end...
 +
$active = $('.paging a:first'); //go back to first
 +
}
 +
rotate(); //Trigger the paging and slider function
 +
}, 3500); //Timer speed in milliseconds
 +
};
 +
 +
rotateSwitch(); //Run function on launch
 +
 +
//On Hover
 +
$(".image_reel a").hover(function() {
 +
clearInterval(play); //Stop the rotation
 +
}, function() {
 +
rotateSwitch(); //Resume rotation
 +
});
 +
 +
//On Click
 +
$(".paging a").click(function() {
 +
$active = $(this); //Activate the clicked paging
 +
//Reset Timer
 +
clearInterval(play); //Stop the rotation
 +
rotate(); //Trigger rotation immediately
 +
rotateSwitch(); // Resume rotation
 +
return false; //Prevent browser jump to link anchor
 +
});
 +
 +
});
 +
</script>
-
#footer-content {
 
-
}
 
-
#footer-content h2 {
+
<!-- Javascript-->
-
margin: 0px 0px 20px 0px;
+
</head>
-
padding: 0px 0px 10px 0px;
+
-
border-bottom: 2px solid #DE5635;
+
-
font-size: 22px;
+
-
color: #FFFFFF;
+
-
}
+
-
#column1 {
+
<body>
-
float: left;
+
<div id="header_wrapper">
-
width: 384px;
+
-
margin-right: 20px;
+
-
}
+
-
#column2 {
+
    <div id="header">
-
float: left;
+
   
-
width: 384px;
+
  <div id="site_title">
-
}
+
           
 +
        </div>
-
#column3 {
 
-
float: right;
 
-
width: 384px;
 
-
}
 
-
/* Footer */
+
<!-- navigation -->
 +
<ul id="nav">
 +
<li><a href="https://2013.igem.org/Team:Waterloo/Test">Home</a></li>
-
#footer {
+
   
-
height: 100px;
+
    <li><a href="https://2013.igem.org/Team:Waterloo/Project">Project</a>
-
margin: 0 auto;
+
<ul>
-
padding: 50px 0px 0px 0px;
+
-
}
+
-
#footer p {
+
                             
-
margin: 0;
+
                                <li><a href="https://2013.igem.org/Team:Waterloo/Overview">Overview</a>                         
-
padding-top: 10px;
+
                                </li>
-
line-height: normal;
+
                                   
-
text-align: center;
+
                                <li><a href="https://2013.igem.org/Team:Waterloo/Results">Results</a></li>
-
text-shadow: 1px 1px 0px #FFFFFF;
+
-
color: #909090;
+
</li>
-
}
+
<li><a href="https://2013.igem.org/Team:Waterloo/Applications">Applications</a></li>
 +
</ul>
 +
</li>
-
#footer a {
 
-
text-decoration: underline;
 
-
color: #909090;
 
-
}
 
-
#footer a:hover {
+
                <li><a href="http://waterlooigem.wordpress.com/">Blog</a></li>
-
text-decoration: none;
+
-
color: #383838;
+
-
}
+
-
.box1 {
+
-
overflow: hidden;
+
<li><a href="https://2013.igem.org/Team:Waterloo/Team">Team</a>
-
height: 300px;
+
                          <ul>
-
background: url(images/img04.jpg) no-repeat center bottom;
+
                            <li><a href="https://2013.igem.org/Team:Waterloo/Members">Members</a></li>
-
}
+
                            <li><a href="https://2013.igem.org/Team:Waterloo/Sponsors">Sponsors</a></li>
 +
                            <li><a href="https://2013.igem.org/Team:Waterloo/Gallery">Gallery</a></li>
 +
                          </ul>
 +
                </li>
 +
 
 +
  <li><a href="https://2013.igem.org/Team:Waterloo/humanparctices">Human Practice</a>             
 +
  <ul>
 +
    <li><a href="#">Events</a>
 +
<ul>
 +
<li><a href="https://2013.igem.org/Team:Waterloo">Intent to Invent</a></li>
 +
<li><a href="https://2013.igem.org/Team:Waterloo">Event A</a></li>
 +
<li><a href="https://2013.igem.org/Team:Waterloo">Event B</a></li>
 +
</ul> </li>
 +
    <li><a href="https://2013.igem.org/Team:Waterloo/Partners">Partners</a></li>
 +
  </ul>
 +
</li> 
-
.list-style1 {
+
<li><a class="last" href="https://2013.igem.org/Team:Waterloo/Modelling">Modelling</a></li>
-
margin: 0px;
+
           
-
padding: 0px;
+
</ul>
-
list-style: none;
+
-
}
+
<!-- // end of navigation -->
 +
           
 +
         
 +
  <div id="search_box">
 +
 
 +
  <form action="http://www.google.com.hk/cse" id="cse-search-box" method="get" target="_blank" >
 +
    <input type="text" value=" " name="q" size="10" id="searchfield" title="searchfield" onFocus="clearText(this)" onBlur="clearText(this)" />
 +
    <input type="hidden" name="cx" value="012577055908532603606:zpok5ilqnda" />
 +
    <input type="hidden" name="cof" value="FORID:10" />
 +
    <input type="hidden" name="ie" value="UTF-8" />
 +
    <input type="submit" name="sa" value="Search" />
 +
      </form>
-
.list-style1 li {
+
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
-
padding: 7px 0px 7px 0px;
+
-
border-top: 1px dashed #E7E2DC;
+
-
}
+
-
.list-style1 .first {
+
<script type="text/javascript">
-
padding-top: 0px;
+
  google.load('search', '1', {language : 'en', style : google.loader.themes.GREENSKY});
-
border-top: none;
+
  google.setOnLoadCallback(function() {
-
}
+
    var customSearchControl = new google.search.CustomSearchControl('012577055908532603606:zpok5ilqnda');
 +
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
 +
    customSearchControl.draw('cse');
 +
  }, true);
 +
</script>
-
.list-style2 {
+
  </div> 
-
margin: 0px;
+
-
padding: 0px;
+
-
list-style: none;
+
-
}
+
-
.list-style2 li {
 
-
padding: 7px 0px 7px 0px;
 
-
}
 
-
.list-style2 a {
+
   
-
color: #8A8985;
+
-
}
+
-
.list-style2 a:hover {
 
-
text-decoration: underline;
 
-
}
 
-
.list-style2 .first {
+
    <div class="cleaner"></div>
-
padding-top: 0px;
+
    </div> <!-- end of header -->
-
border-top: none;
+
-
background: none;
+
-
}
+
-
/* Banner */
+
</div>
 +
<!-- end of header_wrapper -->
-
#banner {
+
</body>
-
overflow: hidden;
+
-
height: 450px;
+
-
background: url(images/img04.png) no-repeat center bottom;
+
-
}
+
-
/* Three Column Content */
 
-
#three-column {
 
-
overflow: hidden;
 
-
padding: 10px 0px 50px 0px;
 
-
}
 
-
#three-column #tbox1 {
 
-
float: left;
 
-
width: 384px;
 
-
margin-right: 20px;
 
-
}
 
-
#three-column #tbox2 {
+
</head>
-
float: left;
+
-
width: 384px;
+
-
}
+
-
#three-column #tbox3 {
+
<body>
-
float: right;
+
-
width: 384px;
+
-
}
+
-
.box-style {
+
<div id="content_wrapper">
-
background: #3C342E;
+
-
}
+
-
.box-style01
+
<div align="center">
-
{
+
<table id="rotator_news">
-
border-bottom: 5px solid #DE5635;
+
<tr>
-
}
+
<td id="window_images">
 +
<div class="main_view">
 +
    <div class="window">
 +
        <div class="image_reel">
 +
                    <img src="http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2011/03/University-Waterloo-Engineering-5-2-537x295.jpg" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                    <img src="http://images.dailytech.com/nimage/19635_M13_Virus.jpg" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                               
 +
        </div>
 +
    </div>
 +
    <div class="paging">
 +
        <a href="#" rel="1">1</a>
 +
        <a href="#" rel="2">2</a>
 +
       
 +
 +
    </div>
 +
</div> <!-- close "main_view" div -->
 +
</td>
 +
</tr>
 +
</table>
 +
</div>
 +
<br/><br/>
 +
        <h1>Lachesis</h1>
 +
<!-- Content wrap -->
 +
  <div>
 +
   
 +
    <div class="content_wrapper">
 +
                 
 +
            <div class="intro_box margin_r10">
 +
           
 +
            <h3>Team</h3>
 +
                <img src="https://static.igem.org/mediawiki/2011/7/78/USTC_Software_image_02.jpg" alt="product" />
 +
               
 +
              <p class="intro"> We promote diversity in our iGEM team. Encouraging people of all disciplines to partake in this incredible competition! From the Business faculty, to Arts, to Sciences, to Engineering, and back to Maths. These bunch collaborate in order to plan, design, construct and market our way to victory! <div class="button_01">
 +
<a href="https://2013.igem.org/Team:Waterloo/team">Details</a> </div> </p> </div>           
 +
            <div class="intro_box margin_r10">
 +
            <h3>Models</h3>
 +
                <img src="https://static.igem.org/mediawiki/2011/c/c8/USTC_Software_image_03.jpg" alt="product" />
 +
              <p class="intro">Enter Modelling Text Here!!!!
-
.box-style02
+
              <div class="button_01">
-
{
+
<a href="https://2013.igem.org/Team:Waterloo/documents">Details</a> </div> </p> </div>
-
border-bottom: 5px solid #F8AF00;
+
           
-
}
+
            <div class="intro_box margin_r10">
 +
            <h3>Human practice</h3>
 +
                <img src="https://static.igem.org/mediawiki/2011/3/3c/USTC_Software_image_04.jpg" alt="product" />
 +
               
 +
              <p class="intro">Put Events Crap Here!!<div class="button_01"> <a href="https://2013.igem.org/Team:Waterloo/humanpractices">Details</a> </div> </p> </div>
 +
           
 +
            <div class="cleaner"></div>
 +
    </div>
 +
       
 +
        <div class="cleaner_h40"></div>
 +
    <div class="content_section">
 +
       
 +
        <h2>Project</h2>
 +
       
 +
    <img src="http://www.qbrick.com/Libraries/Site/Communication.sflb.ashx" alt="image" width="363" class="fl_image" />
 +
                   
 +
    <p>
 +
<span lang="EN-US" xml:lang="EN-US">Our project is Cell-Cell Communication</span>
 +
<br/>
 +
 +
          <div><span lang="EN-US" xml:lang="EN-US">
 +
1.Use the M13 virus to transfer the message.<br/>
 +
2.Use GFP to test if message is received<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 +
</p>
 +
</span>
 +
</div>
-
.box-style03
+
       
-
{
+
    </div>
-
border-bottom: 5px solid #A2B837;
+
<br/>
-
}
+
     
 +
 +
          </tr>
 +
        </table>
 +
    </td>
 +
  </tr>
 +
</table>
-
.box-style h2 {
+
-
padding: 10px 0px;
+
-
letter-spacing: -1px;
+
-
font-size: 22px;
+
-
color: #FFFFFF;
+
-
}
+
-
.box-style .image {
 
-
width: 324px;
 
-
}
 
-
.box-style .arrow {
+
<br/> 
-
}
+
     
 +
<br/>
-
.box-style .content {
+
<h2> </h2>
-
overflow: hidden;
+
-
width: 324px;
+
-
padding: 30px;
+
-
}
+
 +
  <div id="clustrmaps-widget"></div>
 +
</div>
 +
  <!-- end of content -->
 +
   
 +
  <div class="cleaner"></div>
 +
   
 +
    <br/> <br/>
 +
   
 +
</div>
 +
   
 +
    <div id="content_wrapper_bottom"></div> <!-- end of content_wrapper -->
-
.divider {
+
<script type="text/javascript">
-
overflow: hidden;
+
 
-
height: 50px;
+
  var _gaq = _gaq || [];
-
background: url(images/img04.png) no-repeat center top;
+
  _gaq.push(['_setAccount', 'UA-25857438-1']);
-
}
+
  _gaq.push(['_trackPageview']);
 +
 
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
 
 +
</script>
 +
 +
 
 +
<div id="mfooter">
 +
 
 +
  <ul class="mfooter_menu">
 +
                <li><a href="#" target="_parent">Home</a></li>
 +
                <li><a href="https://2013.igem.org/Team:Waterloo/project" target="_parent">Project</a></li>
 +
                <li><a href="http://waterlooigem.wordpress.com/" target="_parent">Blog</a></li>
 +
                <li><a href="https://2013.igem.org/Team:Waterloo/team" class="current">Team</a></li>
 +
                <li><a href="https://2013.igem.org/Team:Waterloo/humanpractices" target="_parent">Human practice</a></li>
 +
                <li  class="last_menu"><a href="https://2013.igem.org/Team:Waterloo/modelling" target="_parent">Modelling</a></li>
 +
               
 +
  </ul>
 +
  <b> Learn more about &#160;&#160;<a href="http://uwaterloo.ca/about/" target="_blank">University of Waterloo</a>&#160;! </b>
 +
 
 +
 
 +
 
 +
</div> <!-- end of mfooter -->
-
</style>
 
-
</head>
 
-
<body>
 
-
<div id="wrapper">
 
-
<div id="logo" class="container">
 
-
<h1><a href="#">Glissade </a></h1>
 
-
<p>In posuere eleifend odio quisque semper augue.</p>
 
-
</div>
 
-
<div id="menu-wrapper">
 
-
<div id="menu" class="container">
 
-
<ul>
 
-
<li class="current_page_item"><a href="#">Homepage</a></li>
 
-
<li><a href="#">Services</a></li>
 
-
<li><a href="#">Blog</a></li>
 
-
<li><a href="#">Photos</a></li>
 
-
<li><a href="#">About Us</a></li>
 
-
<li><a href="#">Links</a></li>
 
-
<li><a href="#">Contact Us</a></li>
 
-
</ul>
 
-
</div>
 
-
</div>
 
-
<div id="three-column" class="container">
 
-
<div id="tbox1">
 
-
<div class="box-style box-style01">
 
-
<div class="content">
 
-
<div class="image"><img src="images/img01.jpg" width="324" height="200" alt="" /></div>
 
-
<h2>Fusce ultrices fringilla</h2>
 
-
<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. </p>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
<div id="tbox2">
 
-
<div class="box-style box-style02">
 
-
<div class="content">
 
-
<div class="image"><img src="images/img02.jpg" width="324" height="200" alt="" /></div>
 
-
<h2>Mauris vulputate dolor</h2>
 
-
<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. </p>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
<div id="tbox3">
 
-
<div class="box-style box-style03">
 
-
<div class="content">
 
-
<div class="image"><img src="images/img03.jpg" width="324" height="200" alt="" /></div>
 
-
<h2>Nulla luctus eleifend </h2>
 
-
<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh.</p>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
<div id="page" class="container">
 
-
<div id="content">
 
-
<div class="post">
 
-
<h2 class="title"><a href="#">Fusce ultrices fringilla metus</a></h2>
 
-
<div class="entry">
 
-
<p>This is <strong>Glissade </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org">FCT</a>.    The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 3.0</a> license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
 
-
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis,  egestas at sem.  Mauris quam enim,  in, rhoncus ut, lobortis a, est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p>
 
-
</div>
 
-
</div>
 
-
<div style="clear: both;">&nbsp;</div>
 
-
</div>
 
-
<!-- end #content -->
 
-
<div id="sidebar">
 
-
<div>
 
-
<h2>Nulla luctus eleifend</h2>
 
-
<ul class="list-style2">
 
-
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
 
-
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
 
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
 
-
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
 
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
 
-
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
 
-
</ul>
 
-
</div>
 
-
</div>
 
-
<!-- end #sidebar -->
 
-
<div style="clear: both;">&nbsp;</div>
 
-
</div>
 
-
<!-- end #page -->
 
-
 
-
</div>
 
-
<div id="footer-bg">
 
-
<div id="footer-content" class="container">
 
-
<div id="column1">
 
-
<h2>Tellus feugiat eleifend</h2>
 
-
<ul class="list-style2">
 
-
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
 
-
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
 
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
 
-
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
 
-
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
 
-
</ul>
 
-
</div>
 
-
<div id="column2">
 
-
<h2>Etiam rhoncus volutpat</h2>
 
-
<ul class="list-style2">
 
-
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
 
-
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
 
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
 
-
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
 
-
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
 
-
</ul>
 
-
</div>
 
-
<div id="column3">
 
-
<h2>Recommended Links</h2>
 
-
<ul class="list-style2">
 
-
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
 
-
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
 
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
 
-
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
 
-
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
 
-
</ul>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
<div id="footer">
 
-
<p>© 2013 Untitled Inc. All rights reserved. Lorem ipsum dolor sit amet nullam blandit consequat phasellus etiam lorem. Design by <a href="http://www.freecsstemplates.org">FCT</a>.  Photos by <a href="http://fotogrph.com/">Fotogrph</a>.</p>
 
-
</div>
 
-
<!-- end #footer -->
 
</body>
</body>
</html>
</html>

Latest revision as of 02:46, 6 May 2013

1 2


Lachesis

Team

product

We promote diversity in our iGEM team. Encouraging people of all disciplines to partake in this incredible competition! From the Business faculty, to Arts, to Sciences, to Engineering, and back to Maths. These bunch collaborate in order to plan, design, construct and market our way to victory!

Details

Models

product

Enter Modelling Text Here!!!!

Details

Human practice

product

Put Events Crap Here!!

Details

Project

image

Our project is Cell-Cell Communication

1.Use the M13 virus to transfer the message.
2.Use GFP to test if message is received





Retrieved from "http://2013.igem.org/Team:Waterloo/Test"