ProtoCat

From 2014.igem.org

(Difference between revisions)
Line 103: Line 103:
[[ProtoCat]]
[[ProtoCat]]
 +
/*
 +
Theme Name: 1stwebdesigner HTML5/CSS3 Layout
 +
Date: March 2013
 +
Description: Basic HTML5/CSS3 layout built on a responsive framework
 +
Version: 1.0
 +
Author: Christian Vasile
 +
Author URL: http://christianvasile.com
 +
*/
 +
/* ===========================
 +
  ======= Body style ========
 +
  =========================== */
 +
 
 +
body {
 +
background-image: url('img/bg.png');
 +
color: black;
 +
font-size: 87.5%; /* Base font size: 14px */
 +
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 +
line-height: 1.429;
 +
margin: 0;
 +
padding: 0;
 +
text-align: left;
 +
}
 +
 +
.body {
 +
clear: both;
 +
margin: 0 auto;
 +
width: 70%;
 +
}
 +
 +
/* ===========================
 +
  ========= Headings ========
 +
  =========================== */
 +
h2 {font-size: 1.571em} /* 22px */
 +
h3 {font-size: 1.429em} /* 20px */
 +
h4 {font-size: 1.286em} /* 18px */
 +
h5 {font-size: 1.143em} /* 16px */
 +
h6 {font-size: 1em} /* 14px */
-
<!DOCTYPE html>
+
h2, h3, h4, h5, h6 {
-
    <html lang="en">
+
font-weight: 400;
-
        <head></head>
+
line-height: 1.1;
-
        <body class="body">
+
margin-bottom: .8em;
-
            <header class="mainHeader">
+
color: black;
-
                <h1></h1>
+
}
-
                <nav></nav>
+
 
-
            </header>
+
/* ===========================
-
            <div class="mainContent"></div>
+
  ======= Anchor style ======
-
            <footer class="mainFooter"></footer>
+
  =========================== */
-
        </body>
+
a {
-
    </html>
+
outline: 0;
 +
}
 +
 
 +
 
 +
a:link, a:visited {
 +
color: black;
 +
padding: 0 1px;
 +
text-decoration: none;
 +
}
 +
 
 +
a:hover, a:active {
 +
background-color: #B9D3E3;
 +
color: #fff;
 +
text-decoration: none;
 +
}
 +
 
 +
/* ===========================
 +
  ===== Main Navigation =====  
 +
  =========================== */
 +
 
 +
.mainHeader h1 {
 +
font-size: 400%;
 +
text-align: center;
 +
float: none;
 +
margin: 3% 0 3% 0;
 +
color: #4682B4;
 +
}
 +
 
 +
.mainHeader nav {
 +
background: #4682B4;
 +
font-size: 1.143em;
 +
height: 40px;
 +
line-height: 30px;
 +
margin: 0 auto 30px auto;
 +
text-align: center;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
}
 +
 +
.mainHeader nav ul {
 +
list-style: none;
 +
margin: 0 auto;
 +
}
 +
 
 +
.mainHeader nav ul li {
 +
float: left;
 +
display: inline;
 +
}
 +
 +
.mainHeader nav a:link, .mainHeader nav a:visited {
 +
text-transform: uppercase;
 +
color: #FFFFFF;
 +
display: inline-block;
 +
height: 30px;
 +
padding: 5px 23px;
 +
text-decoration: none;
 +
}
 +
.mainHeader nav a:hover, .mainHeader nav a:active,
 +
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
 +
background: #B9D3E3;
 +
color: #FFFFFF;
 +
text-shadow: none !important;
 +
}
 +
 +
.mainHeader nav li a {
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
}
 +
 
 +
/* ===========================
 +
  ======= Content Area ======
 +
  =========================== */
 +
 
 +
.mainContent {
 +
overflow: hidden;
 +
line-height: 25px;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
float: left;
 +
}
 +
 
 +
.mainContent img {
 +
border: 0px;
 +
text-decoration: none;
 +
float: left;
 +
width: 68%;
 +
height: auto;
 +
margin: 0 0 1% 0;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
}
 +
 
 +
.topcontent {
 +
background-color: #FFF;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
padding: 3% 5%;
 +
margin-bottom: 3%;
 +
float: left;
 +
}
 +
 
 +
.content {
 +
width: 68%;
 +
float: left;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
}
 +
 
 +
/* ===========================
 +
  ======== Sidebar ==========
 +
  =========================== */
 +
 
 +
.top-sidebar {
 +
width: 22%;
 +
float: left;
 +
margin-left: 2%;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
background-color: #FFF;
 +
padding: 2% 3%;
 +
margin-bottom: 2%;
 +
}
 +
 
 +
.middle-sidebar {
 +
width: 22%;
 +
float: left;
 +
margin-left: 2%;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
background-color: #FFF;
 +
padding: 2% 3%;
 +
margin-bottom: 2%;
 +
}
 +
 
 +
.bottom-sidebar {
 +
width: 22%;
 +
float: left;
 +
margin-left: 2%;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
background-color: #FFF;
 +
padding: 2% 3%;
 +
}
 +
 
 +
/* ===========================
 +
  ========= Footer ==========
 +
  =========================== */
 +
 
 +
.mainFooter {
 +
width: 100%;
 +
float: left;
 +
margin-top: 2%;
 +
margin-bottom: 2%;
 +
padding-left: 0;
 +
background-color: #4682B4;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
color: #FFF;
 +
}
 +
 
 +
.mainFooter p {
 +
width: 91%;
 +
margin: 2% auto;
 +
}
 +
 
 +
/* ===========================
 +
  ====== Media Queries ======
 +
  =========================== */
 +
 
 +
@media only screen and (min-width : 150px) and (max-width : 780px)
 +
{
 +
.body {
 +
clear: both;
 +
margin: 0 auto;
 +
width: 90%;
 +
font-size: 90%;
 +
}
 +
 +
.mainHeader nav {
 +
background: #666;
 +
font-size: 1.143em;
 +
height: 160px;
 +
line-height: 30px;
 +
margin-bottom: 0;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
}
 +
 +
.mainHeader nav ul {
 +
list-style: none;
 +
margin: 0 auto;
 +
padding-left: 0;
 +
}
 +
 +
.mainHeader nav li {
 +
margin-left: 0 auto;
 +
width: 100%;
 +
}
 +
 +
.mainHeader nav a:link, .mainHeader nav a:visited {
 +
color: #FFF;
 +
display: block;
 +
height: 30px;
 +
padding: 5px 0;
 +
text-decoration: none;
 +
}
 +
 +
.mainHeader nav a:active,
 +
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
 +
background: #CF5C3F;
 +
color: #fff;
 +
text-shadow: none !important;
 +
}
 +
 +
.mainHeader nav li a {
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
}
 +
 +
.mainHeader img {
 +
width: 68%;
 +
height: auto;
 +
}
 +
 +
.mainContent {
 +
overflow: hidden;
 +
line-height: 25px;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
margin-top: 4%;
 +
margin-bottom: 2%;
 +
}
 +
 +
.topcontent {
 +
background-color: #FFF;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
padding: 2% 5%;
 +
margin-bottom: 4%;
 +
}
 +
 +
.content {
 +
width: 100%;
 +
float: left;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
}
 +
 
 +
.top-sidebar {
 +
width: 86%;
 +
float: left;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
background-color: #FFF;
 +
margin-top: 4%;
 +
margin-left: 0;
 +
padding: 0 7%;
 +
margin-bottom: 0;
 +
}
 +
 +
.top-sidebar p {
 +
width: 90%;
 +
}
 +
 
 +
.middle-sidebar {
 +
width: 86%;
 +
float: left;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
background-color: #FFF;
 +
margin-top: 4%;
 +
margin-left: 0;
 +
padding: 0 7%;
 +
margin-bottom: 0;
 +
}
 +
 +
.middle-sidebar p {
 +
width: 90%;
 +
}
 +
 +
.bottom-sidebar {
 +
width: 86%;
 +
float: left;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
background-color: #FFF;
 +
margin-top: 4%;
 +
margin-left: 0%;
 +
padding: 0 7%;
 +
margin-bottom: 1%;
 +
}
 +
 +
.bottom-sidebar p {
 +
width: 90%;
 +
}
 +
 +
.mainFooter {
 +
width: 100%;
 +
float: left;
 +
margin: 2% 0;
 +
padding-left: 0;
 +
background-color: #B9D3E3;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
color: #FFF;
 +
}
 +
 +
.mainFooter p {
 +
width: 86%;
 +
margin: 2% auto;
 +
}
 +
}

Revision as of 23:24, 19 September 2014



WELCOME TO iGEM 2014!

Your team has been approved and you are ready to start the iGEM season!
On this page you can document your project, introduce your team members, document your progress
and share your iGEM experience with the rest of the world!


Click here to edit this page!

Home Team Official Team Profile Project Parts Modeling Notebook Safety Attributions

Notebook

You should make use of the calendar feature on the wiki and start a lab notebook. This may be looked at by the judges to see how your work progressed throughout the summer. It is a very useful organizational tool as well.

ProtoCat

/* Theme Name: 1stwebdesigner HTML5/CSS3 Layout Date: March 2013 Description: Basic HTML5/CSS3 layout built on a responsive framework Version: 1.0 Author: Christian Vasile Author URL: http://christianvasile.com

  • /

/* =========================== 

  ======= Body style ======== 
  =========================== */

body { background-image: url('img/bg.png'); color: black; font-size: 87.5%; /* Base font size: 14px */ font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 1.429; margin: 0; padding: 0; text-align: left; }

.body { clear: both; margin: 0 auto; width: 70%; }

/* =========================== 

  ========= Headings ======== 
  =========================== */

h2 {font-size: 1.571em} /* 22px */ h3 {font-size: 1.429em} /* 20px */ h4 {font-size: 1.286em} /* 18px */ h5 {font-size: 1.143em} /* 16px */ h6 {font-size: 1em} /* 14px */

h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin-bottom: .8em; color: black; }

/* =========================== 

  ======= Anchor style ====== 
  =========================== */

a { outline: 0; }


a:link, a:visited { color: black; padding: 0 1px; text-decoration: none; }

a:hover, a:active { background-color: #B9D3E3; color: #fff; text-decoration: none; }

/* =========================== 

  ===== Main Navigation ===== 
  =========================== */

.mainHeader h1 { font-size: 400%; text-align: center; float: none; margin: 3% 0 3% 0; color: #4682B4; }

.mainHeader nav { background: #4682B4; font-size: 1.143em; height: 40px; line-height: 30px; margin: 0 auto 30px auto; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.mainHeader nav ul { list-style: none; margin: 0 auto; }

.mainHeader nav ul li { float: left; display: inline; }

.mainHeader nav a:link, .mainHeader nav a:visited { text-transform: uppercase; color: #FFFFFF; display: inline-block; height: 30px; padding: 5px 23px; text-decoration: none; } .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background: #B9D3E3; color: #FFFFFF; text-shadow: none !important; }

.mainHeader nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* =========================== 

  ======= Content Area ====== 
  =========================== */

.mainContent { overflow: hidden; line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; float: left; }

.mainContent img { border: 0px; text-decoration: none; float: left; width: 68%; height: auto; margin: 0 0 1% 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-bottom: 3%; float: left; }

.content { width: 68%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* =========================== 

  ======== Sidebar ========== 
  =========================== */

.top-sidebar { width: 22%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; }

.middle-sidebar { width: 22%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; }

.bottom-sidebar { width: 22%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; }

/* =========================== 

  ========= Footer ========== 
  =========================== */

.mainFooter { width: 100%; float: left; margin-top: 2%; margin-bottom: 2%; padding-left: 0; background-color: #4682B4; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #FFF; }

.mainFooter p { width: 91%; margin: 2% auto; }

/* =========================== 

  ====== Media Queries ====== 
  =========================== */

@media only screen and (min-width : 150px) and (max-width : 780px) { .body { clear: both; margin: 0 auto; width: 90%; font-size: 90%; }

.mainHeader nav { background: #666; font-size: 1.143em; height: 160px; line-height: 30px; margin-bottom: 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.mainHeader nav ul { list-style: none; margin: 0 auto; padding-left: 0; }

.mainHeader nav li { margin-left: 0 auto; width: 100%; }

.mainHeader nav a:link, .mainHeader nav a:visited { color: #FFF; display: block; height: 30px; padding: 5px 0; text-decoration: none; }

.mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background: #CF5C3F; color: #fff; text-shadow: none !important; }

.mainHeader nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.mainHeader img { width: 68%; height: auto; }

.mainContent { overflow: hidden; line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 4%; margin-bottom: 2%; }

.topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 2% 5%; margin-bottom: 4%; }

.content { width: 100%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.top-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0; padding: 0 7%; margin-bottom: 0; }

.top-sidebar p { width: 90%; }

.middle-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0; padding: 0 7%; margin-bottom: 0; }

.middle-sidebar p { width: 90%; }

.bottom-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0%; padding: 0 7%; margin-bottom: 1%; }

.bottom-sidebar p { width: 90%; }

.mainFooter { width: 100%; float: left; margin: 2% 0; padding-left: 0; background-color: #B9D3E3; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #FFF; }

.mainFooter p { width: 86%; margin: 2% auto; } }

Retrieved from "http://2014.igem.org/ProtoCat"