|
|
| (36 intermediate revisions not shown) |
| Line 4: |
Line 4: |
| | <meta name="keywords" content="iGEM, Imperial College, Synthetic Biology, Plastic recycling, Plastic synthesis" /> | | <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."/> | | <meta name="description" content="Imperial College's 2013 iGEM team. Reviving waste plastics using engineered bacteria to enable more sustainable living."/> |
| | + | <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> |
| | | | |
| | <style type="text/css"> | | <style type="text/css"> |
| Line 41: |
Line 42: |
| | } | | } |
| | body { | | body { |
| - | background-color:#ccffff; | + | background-image:url("https://static.igem.org/mediawiki/2013/5/59/BackgroundSRFSRF.jpg"); |
| | } | | } |
| | .right-menu li a, .right-menu li a:hover { /*reserved*/ | | .right-menu li a, .right-menu li a:hover { /*reserved*/ |
| - | color: #3c6b27; | + | color: #0000CD; |
| | background-color: #ffffff; | | background-color: #ffffff; |
| | } | | } |
| Line 54: |
Line 55: |
| | #contentSub { | | #contentSub { |
| | margin: 0 0 0 0; | | 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;
| |
| - | height: 100px;
| |
| - | margin: 0 15px 0 15px;
| |
| - | line-height: 100px;
| |
| - | }
| |
| - |
| |
| - | #imperial-igem-banner {
| |
| - | position: absolute;
| |
| - | left: 0;
| |
| - | top: 0;
| |
| - | }
| |
| - |
| |
| - | #igem-logo,
| |
| - | #imperial-logo {
| |
| - | display: inline-block;
| |
| - | margin-left: 5px;
| |
| - | }
| |
| - |
| |
| - | #imperial-igem-banner img,
| |
| - | #igem-logo img {
| |
| - | height: 100px;
| |
| - | }
| |
| - |
| |
| - | #imperial-logo img {
| |
| - | height: 50px;
| |
| - | }
| |
| - |
| |
| - | /*- 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 ***************************************************************/ | | /*- Footer ***************************************************************/ |
| | #sponsor-logo{ | | #sponsor-logo{ |
| Line 154: |
Line 82: |
| | margin-bottom: 5px; | | margin-bottom: 5px; |
| | } | | } |
| - | a {color:#93B825;} | + | a {color:#00f;} |
| - | a:link {color:#93B825;} | + | a:link {color:#00f;} |
| - | a:visited {color:#728F1D;} | + | a:visited {color:#00f;} |
| - | a:hover {color:#93B825;} | + | a:hover {color:#FFD700;} |
| - | a:active {color:#93B825;} | + | a:active {color:#FFD700;} |
| | a[name]:hover {text-decoration:none;} | | a[name]:hover {text-decoration:none;} |
| | | | |
| Line 284: |
Line 212: |
| | padding: 5px 20px 0px 20px; | | 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> | | </style> |
| | </html> | | </html> |
"
