|
|
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <head>
| |
| - | <! METADATA *****************************************************************>
| |
| - | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| |
| - | <meta name="title" content="iGEM 2013: Imperial College" />
| |
| - | <meta name="keywords" content="iGEM, Imperial College, Synthetic Biology, Plastic recycling, Plastic synthesis" />
| |
| - | <meta name="description" content="Imperial College's 2013 iGEM team. Reviving waste plastics using engineered bacteria to enable more sustainable living."/>
| |
| - |
| |
| - |
| |
| - | <style type="text/css">
| |
| - | @charset 'UTF-8';
| |
| - |
| |
| - | /* Compulsory IDs ***********************************************************/
| |
| - | #catlinks {
| |
| - | border:none;
| |
| - | background: #ffffff;
| |
| - | }
| |
| - | #footer-box{
| |
| - | border:none;
| |
| - | }
| |
| - | #top-section {
| |
| - | background-color: #ffffff;
| |
| - | border: none;
| |
| - | height:20px;
| |
| - | }
| |
| - | #p-logo {
| |
| - | display: none;
| |
| - | }
| |
| - | #search-controls {
| |
| - | display: none;
| |
| - | }
| |
| - | .firstHeading {
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #content {
| |
| - | position: relative;
| |
| - | width: 975px;
| |
| - | margin: 0 auto;
| |
| - | padding:0;
| |
| - | background: #ffffff;
| |
| - | color: black;
| |
| - | border: 1px solid #d9d9d9;
| |
| - | line-height: 1.5em;
| |
| - | z-index: 2;
| |
| - | }
| |
| - | body {
| |
| - | background-color:#ccffff;
| |
| - | }
| |
| - | .right-menu li a, .right-menu li a:hover { /*reserved*/
| |
| - | color: #3c6b27;
| |
| - | background-color: #ffffff;
| |
| - | }
| |
| - | /*#menucontainer {
| |
| - | overflow:visible;
| |
| - | position:relative;
| |
| - | z-index:3;
| |
| - | }*/
| |
| - | #contentSub {
| |
| - | margin: 0 0 0 0;
| |
| - | }
| |
| - | /* Custom IDs ***************************************************************/
| |
| - |
| |
| - | #maincontent{
| |
| - | position:relative;
| |
| - | float:right;
| |
| - | width: 700px;
| |
| - | margin: 0 auto;
| |
| - | background: #ffffff;
| |
| - | float:right
| |
| - | }
| |
| - | #BackToTop {
| |
| - | position:fixed;
| |
| - | bottom:0;
| |
| - | right:0;
| |
| - | }
| |
| - | #Sitemap {
| |
| - | position:fixed;
| |
| - | bottom:0;
| |
| - | left:0;
| |
| - | }
| |
| - | /*- Banner ***************************************************************/
| |
| - | #imperial-banner {
| |
| - | position: relative; /* this is to allow positioning of elements within */
| |
| - | text-align: right;
| |
| - | }
| |
| - |
| |
| - | #imperial-igem-banner {
| |
| - | position: absolute;
| |
| - | left: 0;
| |
| - | top: 0;
| |
| - | }
| |
| - |
| |
| - | #igem-logo,
| |
| - | #imperial-logo {
| |
| - | display: inline-block;
| |
| - | margin-right: 5px;
| |
| - | }
| |
| - |
| |
| - | /*- Sidebar ***************************************************************/
| |
| - | #nav-vert{
| |
| - | position: relative;
| |
| - | float:left;
| |
| - | width: 70px;
| |
| - | }
| |
| - | #fb-wrapper{
| |
| - | position:relative;
| |
| - | display: block;
| |
| - | padding: 0;
| |
| - | margin: 20px 20px 20px 20px;
| |
| - | width: 205px;
| |
| - | height: 265px;
| |
| - | border-top-left-radius: 4px;
| |
| - | border-top-right-radius: 4px;
| |
| - | border-bottom: 1px solid #d9d9d9;
| |
| - | border-right: 1px solid #d9d9d9;
| |
| - | border-top: 1px dotted #d9d9d9;
| |
| - | border-left: 1px dotted #d9d9d9;
| |
| - | border-bottom-left-radius: 4px;
| |
| - | border-bottom-right-radius: 4px;
| |
| - | border-bottom: 1px solid #d9d9d9;
| |
| - | border-right: 1px solid #d9d9d9;
| |
| - | }
| |
| - | /*- Footer ***************************************************************/
| |
| - | #sponsor-logo{
| |
| - | display: block;
| |
| - | background-color: #ffffff;
| |
| - | margin-left:auto;
| |
| - | margin-right:auto;
| |
| - | width:20%;
| |
| - | margin: 15px;
| |
| - | text-align:center
| |
| - | }
| |
| - | #ourfooter{
| |
| - | position:relative;
| |
| - | display:block;
| |
| - | background-color:#fff;
| |
| - | width: 975px;
| |
| - | float:right;
| |
| - | border-top: 1px dotted #d9d9d9;
| |
| - | border-bottom: 1px dotted #d9d9d9;
| |
| - | }
| |
| - |
| |
| - | /*- Text ***************************************************************/
| |
| - | #bodyContent{height: auto;}
| |
| - | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { /*reserved*/
| |
| - | margin-bottom: 5px;
| |
| - | }
| |
| - | a {color:#93B825;}
| |
| - | a:link {color:#93B825;}
| |
| - | a:visited {color:#728F1D;}
| |
| - | a:hover {color:#93B825;}
| |
| - | a:active {color:#93B825;}
| |
| - | a[name]:hover {text-decoration:none;}
| |
| - |
| |
| - | a.sitemap:link,a.sitemap:visited {color:#000000;font-decoration:none;}
| |
| - | a.sitemap:hover,a.sitemap:active {color:#000000;font-decoration:underline;}
| |
| - |
| |
| - | h1 {
| |
| - | font-family: tahoma,sans-serif;
| |
| - | font-variant:small-caps;
| |
| - | color: #000000;
| |
| - | background: #ffffff;
| |
| - | font-size: 2.2em;
| |
| - | margin: 0 0 0 0;
| |
| - | padding: 20px 20px 12px 20px;
| |
| - | border-bottom: none;
| |
| - | }
| |
| - |
| |
| - | h2 {
| |
| - | font-family: tahoma,sans-serif;
| |
| - | color: #000000;
| |
| - | background: #ffffff;
| |
| - | font-size: 1.7em;
| |
| - | margin: 0 0 0 0;
| |
| - | padding: 18px 20px 7px 20px;
| |
| - | border-bottom: none;
| |
| - | }
| |
| - |
| |
| - | h3 {
| |
| - | font-family: tahoma,sans-serif;
| |
| - | font-variant:small-caps
| |
| - | color: #000000;
| |
| - | background: #ffffff;
| |
| - | font-weight: bold;
| |
| - | font-size: 1.4em;
| |
| - | margin: 0 0 0 0;
| |
| - | padding: 16px 20px 2px 20px;
| |
| - | border-bottom: none;
| |
| - | }
| |
| - |
| |
| - | h4 {
| |
| - | font-family: tahoma,sans-serif;
| |
| - | color: #000000;
| |
| - | background: #ffffff;
| |
| - | font-weight: bold;
| |
| - | font-size: 1.1em;
| |
| - | margin: 0 0 0 0;
| |
| - | padding: 13.5px 20px 1px 20px;
| |
| - | border-bottom: none;
| |
| - | }
| |
| - |
| |
| - | p {
| |
| - | font-family: tahoma,sans-serif;
| |
| - | color: #000000;
| |
| - | background: #ffffff;
| |
| - | font-weight: normal;
| |
| - | font-size: 1em;
| |
| - | line-height: 1.7em;
| |
| - | text-align: justify;
| |
| - | margin: 0 0 0 0;
| |
| - | padding: 5px 20px 0px 20px;
| |
| - | }
| |
| - |
| |
| - | .border {
| |
| - | border:1px solid #B2B2B2;
| |
| - | z-index:101;
| |
| - | }
| |
| - |
| |
| - | .borderMagnify {
| |
| - | border:1px solid #B2B2B2;
| |
| - | z-index:101;
| |
| - | margin-left:-9px;
| |
| - | margin-right:9px;
| |
| - | }
| |
| - |
| |
| - | .imgbox {
| |
| - | margin:20px;
| |
| - | padding:10px;
| |
| - | border:1px solid black;
| |
| - | text-align:center;
| |
| - | }
| |
| - |
| |
| - | .vidbox {
| |
| - | margin:20px;
| |
| - | padding:10px;
| |
| - | border:1px solid black;
| |
| - | text-align:center;
| |
| - | }
| |
| - |
| |
| - | .newouterbox {
| |
| - | background-color:#FF944D;border:1px solid #CCCCCC;margin:20px;padding-bottom:0px;
| |
| - | }
| |
| - |
| |
| - | .newinnerbox {
| |
| - | border:1px solid #CCCCCC;margin:10px 20px 20px 20px;padding-top:0px;padding-bottom:13px;background-color:#ffffff;
| |
| - | }
| |
| - |
| |
| - | .newtext {
| |
| - | text-align:center;background-color:#FF944D;color:#000000;
| |
| - | }
| |
| - |
| |
| - | ul.a {
| |
| - | margin: 0 0 0 40px;
| |
| - | list-style-image: none;
| |
| - | list-style-type:disc;
| |
| - | font-family: arial,sans-serif;
| |
| - | color: #000000;
| |
| - | background: #ffffff;
| |
| - | font-weight: normal;
| |
| - | font-size: 1em;
| |
| - | line-height: 1.7em;
| |
| - | text-align: justify;
| |
| - | padding: 5px 20px 0px 20px;
| |
| - | }
| |
| - |
| |
| - | ol.a {
| |
| - | margin: 0 0 0 30px;
| |
| - | list-style-position:inside;
| |
| - | font-family: arial,sans-serif;
| |
| - | color: #000000;
| |
| - | background: #ffffff;
| |
| - | font-weight: normal;
| |
| - | font-size: 1em;
| |
| - | line-height: 1.7em;
| |
| - | text-align: justify;
| |
| - | padding: 5px 20px 0px 20px;
| |
| - | }
| |
| - |
| |
| - | iframe {
| |
| - | padding: 10px 20px 10px 20px;
| |
| - | }
| |
| - |
| |
| - | /* Navigation pane ***********************************************************/
| |
| - |
| |
| - | #cssmenu > ul {
| |
| - | list-style: none;
| |
| - | margin: 0;
| |
| - | vertical-align: baseline;
| |
| - | line-height: 1;
| |
| - | }
| |
| - | /* The container */
| |
| - | #cssmenu > ul {
| |
| - | margin: 10px 20px 10px 20px;
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | width: 210px;
| |
| - | }
| |
| - | /* The list elements which contain the links */
| |
| - | #cssmenu > ul li {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | width: 100%;
| |
| - | }
| |
| - | /* General link styling */
| |
| - | #cssmenu > ul li a {
| |
| - | /* Layout */
| |
| - |
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | margin: 0;
| |
| - | border-top: 1px dotted #fff;
| |
| - | border-bottom: 1px solid #d9d9d9;
| |
| - | border-right: 1px solid #d9d9d9;
| |
| - | border-left: 1px dotted #d9d9d9;
| |
| - | padding: 11px 20px;
| |
| - | /* Typography */
| |
| - |
| |
| - | font-family: Helvetica, Arial, sans-serif;
| |
| - | color: #000000;
| |
| - | text-decoration: none;
| |
| - | text-transform: uppercase;
| |
| - | text-shadow: 0 1px 0 #fff;
| |
| - | font-size: 13px;
| |
| - | font-weight: 300;
| |
| - | /* Background & effects */
| |
| - |
| |
| - | background: #ffffff;
| |
| - | }
| |
| - | /* Rounded corners for the first link of the menu/submenus */
| |
| - | #cssmenu > ul li:first-child > a {
| |
| - | border-top-left-radius: 4px;
| |
| - | border-top-right-radius: 4px;
| |
| - | border-bottom: 1px solid #d9d9d9;
| |
| - | border-right: 1px solid #d9d9d9;
| |
| - | }
| |
| - | /* Rounded corners for the last link of the menu/submenus */
| |
| - | #cssmenu > ul li:last-child > a {
| |
| - | border-bottom-left-radius: 4px;
| |
| - | border-bottom-right-radius: 4px;
| |
| - | border-bottom: 1px solid #d9d9d9;
| |
| - | border-right: 1px solid #d9d9d9;
| |
| - | }
| |
| - | /* The hover state of the menu/submenu links */
| |
| - | #cssmenu > ul li a:hover,
| |
| - | #cssmenu > ul li:hover > a {
| |
| - | color: #ffffff;
| |
| - | text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
| |
| - | background: #30f264;
| |
| - | background: -webkit-linear-gradient(#30f264, #0ee147);
| |
| - | background: -moz-linear-gradient(#30f264, #0ee147);
| |
| - | background: linear-gradient(#30f264, #0ee147);
| |
| - | border-color: transparent;
| |
| - | }
| |
| - | /* The arrow indicating a submenu */
| |
| - | #cssmenu > ul .has-sub > a::after {
| |
| - | content: '';
| |
| - | position: absolute;
| |
| - | top: 16px;
| |
| - | right: 10px;
| |
| - | width: 0px;
| |
| - | height: 0px;
| |
| - | /* Creating the arrow using borders */
| |
| - |
| |
| - | border: 4px solid transparent;
| |
| - | border-left: 4px solid #e4433c;
| |
| - | }
| |
| - | /* The same arrow, but with a darker color, to create the shadow effect */
| |
| - | #cssmenu > ul .has-sub > a::before {
| |
| - | content: '';
| |
| - | position: absolute;
| |
| - | top: 17px;
| |
| - | right: 10px;
| |
| - | width: 0px;
| |
| - | height: 0px;
| |
| - | /* Creating the arrow using borders */
| |
| - |
| |
| - | border: 4px solid transparent;
| |
| - | border-left: 4px solid #fff;
| |
| - | }
| |
| - | /* Changing the color of the arrow on hover */
| |
| - | #cssmenu > ul li > a:hover::after,
| |
| - | #cssmenu > ul li:hover > a::after {
| |
| - | border-left: 4px solid #fff;
| |
| - | }
| |
| - | #cssmenu > ul li > a:hover::before,
| |
| - | #cssmenu > ul li:hover > a::before {
| |
| - | border-left: 4px solid rgba(0, 0, 0, 0.25);
| |
| - | }
| |
| - | /* THE SUBMENUS */
| |
| - | #cssmenu > ul ul {
| |
| - | position: absolute;
| |
| - | left: 90%;
| |
| - | top: -9999px;
| |
| - | padding-left: 5px;
| |
| - | opacity: 0;
| |
| - | width: 150px;
| |
| - | /* The fade effect, created using an opacity transition */
| |
| - |
| |
| - | -webkit-transition: opacity 0.3s ease-in;
| |
| - | -moz-transition: opacity 0.3s ease-in;
| |
| - | transition: opacity 0.3s ease-in;
| |
| - | }
| |
| - | #cssmenu > ul ul li a {
| |
| - | font-size: 12px;
| |
| - | }
| |
| - | /* Showing the submenu when the user is hovering the parent link */
| |
| - | #cssmenu > ul li:hover > ul {
| |
| - | top: 0px;
| |
| - | opacity: 1;
| |
| - | z-index: 1;
| |
| - | }
| |
| - | /**************************************************************/
| |
| - | </style>
| |
| - | </head>
| |
| - |
| |
| - | <body>
| |
| | <a name="top"></a> | | <a name="top"></a> |
| | | | |
| Line 451: |
Line 32: |
| | </a> | | </a> |
| | </div> | | </div> |
| - | </body>
| |
| - | </html>
| |
"
" height="140"/>
</a>
" width="48px" /> </a>
" width="80px" /> </a>
