Team:Wellesley Desyne/Notebook

From 2013.igem.org

(Difference between revisions)
Line 5: Line 5:
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
<style type="text/css">
<style type="text/css">
 +
/*hide default igem banner and reformat style into blank slate*/
/*hide default igem banner and reformat style into blank slate*/
#globalWrapper {width: 100%;}
#globalWrapper {width: 100%;}
Line 42: Line 43:
       font-size: 32pt;
       font-size: 32pt;
     }
     }
 +
H3 {
 +
      font-family: Helvetica;
 +
      text-decoration: none;
 +
      text-align: left;
 +
          line-height:120%;
 +
      /*color: #870203;*/
 +
      font-size: 10pt;
 +
      font-weight:normal;
 +
    }
 +
 +
/*Page content styles (e.g. welcome, project images)*/
 +
#comp {
 +
    float:left;
 +
    width:400px;
 +
    height:275px;
 +
}
 +
#compimg {
 +
    float:left;
 +
    width:470px;
 +
    margin:0 30px 0 0;
 +
    background-color:#ebebeb;
 +
}
 +
 +
/*Project images with rollover*/
 +
.project {
 +
background-color:#e5e3e7;
 +
width:290px; height:180px;
 +
overflow:hidden;
 +
float:left;
 +
margin:20px 15px 0 0;
 +
position:relative;
 +
}
 +
.projectBar { width:100%; height:60px; position:absolute; color:white; overflow:hidden;}
 +
.projectName { text-align:right; padding:15px 20px; }
 +
.projectName img { width:auto; height:16px; display:inline-block; }
 +
.projectAbout {
 +
background-image:url('http://cs.wellesley.edu/~hcilab/iGEM2012/images/arrow.png');
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
background-color:rgba(0,0,0,0.5);
 +
background-clip:border-box;
 +
font-size:12px;
 +
height:auto;
 +
margin-top:-50px;
 +
padding:5px 5px 5px 50px; /*50px padding makes room for arrow on left*/
 +
-webkit-transition-duration:0.5s; -moz-transition-duration:0.5s;
 +
}
 +
.project:hover .projectAbout { margin-top:10px; }
 +
.projectBar > a:link, .projectBar > a:visited, .projectBar > a:hover { color:inherit; }
 +
 +
/*<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 +
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">*/
 +
 +
/* NON-WEBSAFE FONTS */
 +
/*@font-face {
 +
font-family: 'Caviar Dreams';
 +
src: url('../fonts/CaviarDreams.ttf') format('truetype');
 +
}*/
 +
 +
/* MAIN STYLE DEFINITIONS */
 +
a{
 +
color:#870203;
 +
-webkit-transition-duration:0.3s;
 +
-moz-transition-duration:0.3s;
 +
-o-transition-duration:0.3s;
 +
}
 +
 +
a:hover {
 +
color:#0090FF;
 +
}
 +
 +
a:visited{
 +
color:#870203;
 +
}
 +
 +
td
 +
{
 +
font-family: Helvetica;
 +
font-size: 10pt;
 +
vertical-align: top;
 +
text-align: left;
 +
padding-right: 10px;
 +
}
 +
 +
tr
 +
{
 +
vertical-align: top;
 +
}
 +
 +
H1 {
 +
    font-family: Helvetica;
 +
    text-transform: uppercase;
 +
    color: #3d3f3c;
 +
    text-align: left;
 +
    }
 +
 +
 
 +
H4 {
 +
    font-family: Helvetica;
 +
    text-transform: uppercase;
 +
    color: #3d3f3c;
 +
    text-align: left;
 +
    }
 +
 +
/* CONTENT HEADING STYLES - overrides some main.css styling */
 +
 +
H6 {
 +
font-family:'Caviar Dreams';
 +
font-size:30px;
 +
font-weight:500;
 +
text-align:left;
 +
text-transform:uppercase;
 +
color: #3d3f3c;
 +
border-bottom:1px solid #0090FF;
 +
padding-bottom:10px;
 +
margin:15px 0;
 +
}
 +
 +
H1, H3 {
 +
font-family:'Source Sans Pro';
 +
font-weight:600;
 +
text-transform:uppercase;
 +
}
 +
 +
H1 {
 +
font-size:20px;
 +
border:none;
 +
}
 +
 +
img.headshot {
 +
width: 100px;
 +
height: auto;
 +
vertical-align: text-top;
 +
}
 +
 +
 +
 +
body {
 +
background:#fff;
 +
font-family: Helvetica;
 +
}
 +
 +
content {
 +
background: transparent;
 +
}
 +
 +
#tracking_nav
 +
{
 +
margin: 0px 0px 0px 950px;
 +
position: fixed;
 +
color:#bababa;
 +
border: 1px solid #3d3f3c;
 +
background:#3d3f3c;
 +
font-size: 16pt;
 +
padding: 5px;
 +
line-height: 120%;
 +
}
 +
 +
#tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
 +
#tracking_nav a:hover {background:#bababa;}
 +
 +
#parts_table
 +
{
 +
border: 1px solid #870203;
 +
border-collapse: collapse;
 +
width: 70%;
 +
margin: auto;
 +
}
 +
 +
#parts_table td
 +
{
 +
text-align: center;
 +
margin: 5px;
 +
border: 1px solid #870203;
 +
 +
}
 +
 +
#parts_table th
 +
{
 +
background-color: #bababa;
 +
border: 1px solid #870203;
 +
color: #ffffff;
 +
}
 +
 +
.table_part
 +
{
 +
vertical-align: middle;
 +
}
 +
 +
/* HEADER STYLES: banner, navbar, etc. */
 +
#banner { width:300px; display:block; float:left; }
 +
#banner img { width:100%; }
 +
 +
ul#nav {
 +
width:675px;
 +
margin:0 0 0 325px;
 +
position:relative;
 +
}
 +
 +
#nav li {
 +
color: #bbb;
 +
background-color:none;
 +
margin: 0 50px 0 0;
 +
float: left;
 +
position: relative;
 +
list-style: none;
 +
text-transform:uppercase;
 +
}
 +
#nav li:last-child { margin:0; }
 +
 +
/* main level link */
 +
#nav a {
 +
font-family:'Source Sans Pro', sans-serif;
 +
font-size:10pt;
 +
font-weight:500;
 +
line-height:110%;
 +
color: inherit;
 +
text-decoration: none;
 +
display: block;
 +
padding: 0 0 0 5px;
 +
margin: 0;
 +
}
 +
 +
ul#nav > li > a {
 +
line-height:12px;
 +
border-left:solid 2px #0090FF;
 +
padding:0 0 0 3px;
 +
}
 +
 +
#nav a:hover {
 +
/*background-color: #0090FF;
 +
color: #ffffff;*/
 +
}
 +
 +
/* main level link hover */
 +
#nav .current a, #nav li:hover > a {
 +
color: #000;
 +
border-color:#0090FF;
 +
}
 +
 +
/* sub levels link hover */
 +
#nav ul li:hover a, #nav li:hover li a {
 +
border: none;
 +
/*background-color: #FA9D1C;*/
 +
color:#000;
 +
}
 +
 +
#nav ul a:hover {
 +
color: #0090FF !important;
 +
/*background: #fff url(img/gradient.png) repeat-x 0 -100px !important;
 +
text-shadow: 0 1px 1px rgba(0,0,0, .1);*/
 +
}
 +
 +
 +
/* dropdown */
 +
#nav li:hover > ul {
 +
/*display: block;*/
 +
opacity:1;
 +
margin:0;
 +
background-color: none;
 +
z-index:0;
 +
}
 +
 +
/* level 2 list */
 +
#nav ul {
 +
/*display: none;*/
 +
opacity:0;
 +
margin: 20px 0 0 0;
 +
padding: 7px 0 0 0;
 +
width: 205px;
 +
position: absolute;
 +
left: 0;
 +
z-index:-1;
 +
-webkit-transition-duration:0.5s;
 +
-moz-transition-duration:0.5s;
 +
-o-transition-duration:0.5s;
 +
}
 +
#nav ul li {
 +
float: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
#nav ul a {
 +
font-weight: normal;
 +
/*text-shadow: 0 1px 0 #fff;*/
 +
}
 +
 +
/* clearfix */
 +
#nav:after {
 +
content: ".";
 +
display: block;
 +
clear: both;
 +
visibility: hidden;
 +
line-height: 0;
 +
height: 0;
 +
}
 +
#nav {
 +
display: inline-block;
 +
}
 +
html[xmlns] #nav {
 +
display: block;
 +
}
 +
 +
* html #nav {
 +
height: 1%;
 +
}
 +
 +
/* pinterest like photo grid for social page*/
 +
 +
/*
 +
body {
 +
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
 +
}
 +
*/
 +
 +
#wrapper {
 +
width: 90%;
 +
max-width: 1100px;
 +
min-width: 800px;
 +
margin: 50px auto;
 +
}
 +
 +
#columns {
 +
-webkit-column-count: 3;
 +
-webkit-column-gap: 10px;
 +
-webkit-column-fill: auto;
 +
-moz-column-count: 3;
 +
-moz-column-gap: 10px;
 +
-moz-column-fill: auto;
 +
column-count: 3;
 +
column-gap: 15px;
 +
column-fill: auto;
 +
}
 +
 +
.pin {
 +
display: inline-block;
 +
background: #FEFEFE;
 +
border: 2px solid #FAFAFA;
 +
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
 +
margin: 0 2px 15px;
 +
-webkit-column-break-inside: avoid;
 +
-moz-column-break-inside: avoid;
 +
column-break-inside: avoid;
 +
padding: 15px;
 +
padding-bottom: 5px;
 +
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
 +
opacity: 1;
 +
 +
-webkit-transition: all .2s ease;
 +
-moz-transition: all .2s ease;
 +
-o-transition: all .2s ease;
 +
transition: all .2s ease;
 +
}
 +
 +
.pin img {
 +
width: 100%;
 +
border-bottom: 1px solid #ccc;
 +
padding-bottom: 15px;
 +
margin-bottom: 5px;
 +
}
 +
 +
.pin p {
 +
font: 12px/18px Arial, sans-serif;
 +
color: #333;
 +
margin: 0;
 +
}
 +
 +
@media (min-width: 960px) {
 +
#columns {
 +
-webkit-column-count: 4;
 +
-moz-column-count: 4;
 +
column-count: 4;
 +
}
 +
}
 +
 +
@media (min-width: 1100px) {
 +
#columns {
 +
-webkit-column-count: 5;
 +
-moz-column-count: 5;
 +
column-count: 5;
 +
}
 +
}
 +
 +
#columns:hover .pin:not(:hover) {
 +
opacity: 0.4;
 +
}
 +
 +
 +
 +
</style>
 +
 +
 +
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
 +
 +
<style type="text/css">@import "http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/videobox.css";</style>
 +
 +
</head>
 +
<body class="basiclayout">
 +
<div id="bu-wellesley_wiki_content">
 +
 +
 +
<a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/5/50/2013iGEM_logo.png" width="75px" style="display:block; float:left;"></a>
 +
 +
<a href="https://2013.igem.org/Team:Wellesley_Desyne"><img src="https://static.igem.org/mediawiki/igem.org/4/49/Titleimage.png" width="200px" style="display:block; float:left;"></a>
 +
 +
 +
<!--Start NavBar-->
 +
<ul id="nav">
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team</a>
 +
        <ul>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips & Tricks</a></li>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li>
 +
</ul>
 +
    </li>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project</a>
 +
        <ul>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project Overview</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zMol_zTree</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">BAC to the Future</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
 +
        </ul>
 +
    </li>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">Human Practices</a>
 +
<ul>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li>
 +
</ul>
 +
    </li>
 +
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">Medal Fulfillment</a></li>
 +
</ul>
 +
 +
<!--End NavBar--> 
</style>
</style>

Revision as of 19:18, 24 July 2013

Wellesley HCI: Notebooks


Notebooks


Retrieved from "http://2013.igem.org/Team:Wellesley_Desyne/Notebook"