|
|
(132 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
- | <head>
| + | <style type="text/css"> |
- | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| + | #imperial-banner { |
- | <style type="text/css">
| + | position: relative; /* this is to allow positioning of elements within */ |
- | @charset 'UTF-8';
| + | text-align: right; |
| + | height: 100px; |
| + | margin: 0 15px 1em 15px; |
| + | line-height: 100px; |
| + | } |
| | | |
- | #top-section { /*reserved*/
| + | #imperial-igem-banner { |
- | width: 975px;
| + | position: absolute; |
- | height: 20px;
| + | left: 0; |
- | background-color: #ffffff;
| + | top: 0; |
- | border: none;
| + | } |
- | }
| + | |
| | | |
- | #p-logo { /*reserved*/
| + | #igem-logo, |
- | display: none;}
| + | #imperial-logo { |
| + | display: inline-block; |
| + | margin-left: 5px; |
| + | } |
| | | |
- | #search-controls { /*reserved*/
| + | #imperial-igem-banner img, |
- | display: none;}
| + | #igem-logo img { |
| + | height: 100px; |
| + | } |
| | | |
- | .right-menu li a, .right-menu li a:hover { /*reserved*/
| + | #igem-logo img { |
- | color: #3c6b27;
| + | -webkit-transition: all 1s ease-in-out; |
- | background-color: transparent;
| + | -moz-transition: all 1s ease-in-out; |
- | }
| + | -ms-transition: all 1s ease-in-out; |
| + | -o-transition: all 1s ease-in-out; |
| + | transition: all 1s ease-in-out; |
| + | } |
| | | |
- | .firstHeading { /*reserved*/
| + | #igem-logo img:hover { |
- | display: none;}
| + | -webkit-transform: rotate(360deg); |
| + | -moz-transform: rotate(360deg); |
| + | -o-transform: rotate(360deg); |
| + | -ms-transform: rotate(360deg); |
| + | transform: rotate(360deg); |
| + | } |
| | | |
- | #imperiallogo { /*reserved*/
| + | #imperial-logo img { |
- | position: relative;
| + | height: 50px; |
- | text-align:center;
| + | } |
- | z-index:-1;
| + | |
- | }
| + | |
| | | |
- | #iGEMLogo {
| + | #BackToTop, |
- | position:absolute;
| + | #BackToTop:link, |
- | top:15px;
| + | #BackToTop:visited { |
- | left:15px;
| + | position: fixed; |
- | z-index:3;
| + | bottom: 5px; |
- | }
| + | right: 5px; |
- | | + | text-decoration: none; |
- | #ImperialLogo {
| + | color: #36a9e1; |
- | position:absolute;
| + | |
- | top:100px;
| + | |
- | left:790px;
| + | |
- | }
| + | |
- | | + | |
- | #nav-vert{
| + | |
- | position: relative;
| + | |
- | float:left;
| + | |
- | width: 210px;
| + | |
- | }
| + | |
- | | + | |
- | #maincontent{
| + | |
- | position:relative;
| + | |
- | float:right;
| + | |
- | width: 700px;
| + | |
- | margin: 0 auto;
| + | |
- | }
| + | |
- | | + | |
- | #ourfooter{
| + | |
- | padding: 0px 100px 0px 0px;
| + | |
- | border-top: 1px dotted #fff;
| + | |
- | | + | |
- | }
| + | |
- | | + | |
- | body { /*reserved*/
| + | |
- | background-color:#DDDDDD;
| + | |
- | }
| + | |
- | | + | |
- | #menucontainer { /*?*/
| + | |
- | overflow:visible;
| + | |
- | position:relative;
| + | |
- | z-index:3;
| + | |
- | }
| + | |
- | | + | |
- | #content { /*reserved*/
| + | |
- | position: relative;
| + | |
- | width: 975px;
| + | |
- | margin: 0 auto;
| + | |
- | padding-top:1px;
| + | |
- | padding-left:0px;
| + | |
- | padding-right:0px;
| + | |
- | padding-bottom:0px;
| + | |
- | background: #ffffff;
| + | |
- | color: black;
| + | |
- | border: none;
| + | |
- | line-height: 1.5em;
| + | |
- | z-index: 2;
| + | |
- | }
| + | |
- | | + | |
- | #contentSub {
| + | |
- | margin: 0 0 0 0;
| + | |
- | }
| + | |
- |
| + | |
- | #bodyContent{
| + | |
- | height: 1000px;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { /*reserved*/
| + | |
- | margin-bottom: 0;
| + | |
- | }
| + | |
- | | + | |
- | 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;
| + | |
- | }
| + | |
- | | + | |
- | #BackToTop {
| + | |
- | position:fixed;
| + | |
- | bottom:0;
| + | |
- | right:0;
| + | |
- | }
| + | |
- | | + | |
- | #Sitemap {
| + | |
- | position:fixed;
| + | |
- | bottom:0;
| + | |
- | left:0;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | | + | |
- | /* 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;
| + | #BackToTop:hover { |
- | position: relative;
| + | color: #a3c4e9; |
- | 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 */
| + | #Sitemap { |
- | #cssmenu > ul li:first-child > a { | + | position:fixed; |
- | border-top-left-radius: 4px;
| + | bottom:5px; |
- | border-top-right-radius: 4px;
| + | left:5px; |
- | border-bottom: 1px solid #d9d9d9;
| + | } |
- | border-right: 1px solid #d9d9d9;
| + | </style> |
- | }
| + | <a name="top"></a> |
- | /* 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>
| + | <div id="imperial-banner"> |
- | </head>
| + | <a id='imperial-igem-banner' href='https://2013.igem.org/Team:Imperial_College'> |
| + | <img src="https://static.igem.org/mediawiki/2013/d/d9/ImperialLogo2013.png" /> |
| + | </a> |
| | | |
- | <body>
| + | <a id='igem-logo' href='https://2013.igem.org/Main_Page' target="_blank"> |
- | <a name="top"></a> | + | <img src='https://static.igem.org/mediawiki/2011/b/be/ICL_iGEM_Logo.png' /> |
- | <div id='imperiallogo'>
| + | </a> |
- | <a href='https://2013.igem.org/Team:Imperial_College_London'>
| + | |
- | <img src="https://static.igem.org/mediawiki/2013/6/67/Imperiallogo.png" style="width:300px;" />
| + | |
- | </a>
| + | |
- | </div>
| + | |
- | <div id='iGEMLogo'>
| + | |
- | <a href='https://2013.igem.org/Main_Page' target="_blank">
| + | |
- | <img src='https://static.igem.org/mediawiki/2011/b/be/ICL_iGEM_Logo.png' style="width:200px;" />
| + | |
- | </a>
| + | |
- | </div>
| + | |
- | <div id='ImperialLogo'>
| + | |
- | <a href='http://www3.imperial.ac.uk/' target="_blank">
| + | |
- | <img src='https://static.igem.org/mediawiki/2011/1/19/ImperialLogo.png' style="width:160px;" />
| + | |
- | </a>
| + | |
- | </div>
| + | |
| | | |
- | <div id="BackToTop"> | + | <a id='imperial-logo' href='http://www3.imperial.ac.uk/' target="_blank"> |
- | <a href="#top">
| + | <img src='https://static.igem.org/mediawiki/2011/1/19/ImperialLogo.png' /> |
- | <img src="https://static.igem.org/mediawiki/2011/6/62/ICL_BackToTop2.png" width="48px" /> | + | </div> |
- | </a>
| + | |
- | </div> | + | |
| | | |
- | <div id="Sitemap"> | + | <a class="" href="#top" id="BackToTop"><i class="icon-chevron-sign-up icon-3x"></i></a> |
- | <a href="https://2011.igem.org/Team:Imperial_College_London/Sitemap">
| + | |
- | <img src="https://static.igem.org/mediawiki/2011/f/f5/ICL_SitemapBtn.png" width="80px" />
| + | |
- | </a> | + | |
- | </div> | + | |
| | | |
- | </body> | + | <div id="Sitemap"> |
| + | <a href="https://2013.igem.org/Team:Imperial_College/Sitemap"> |
| + | <img src="https://static.igem.org/mediawiki/2013/8/84/ICL_SitemapBtn13.png" width="80px" /> |
| + | </a> |
| + | </div> |
| + | </html> |