Team:Imperial College/Templates/Banner

From 2013.igem.org

(Difference between revisions)
 
(46 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<style type="text/css">
-
<! METADATA *****************************************************************>
+
    #imperial-banner {
-
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
        position: relative; /* this is to allow positioning of elements within */
-
  <meta name="title" content="iGEM 2013: Imperial College" />
+
        text-align: right;
-
  <meta name="keywords" content="iGEM, Imperial College, Synthetic Biology, Plastic recycling, Plastic synthesis" />
+
        height: 100px;
-
  <meta name="description" content="Imperial College's 2013 iGEM team. Reviving waste plastics using engineered bacteria to enable more sustainable living."/>
+
        margin: 0 15px 1em 15px;
 +
        line-height: 100px;
 +
    }
 +
    #imperial-igem-banner {
 +
        position: absolute;
 +
        left: 0;
 +
        top: 0;
 +
    }
-
<style type="text/css">
+
    #igem-logo,
-
  @charset 'UTF-8';
+
    #imperial-logo {
 +
        display: inline-block;
 +
        margin-left: 5px;
 +
    }
-
/* Compulsory IDs ***********************************************************/
+
    #imperial-igem-banner img,
-
  #catlinks {
+
    #igem-logo img {
-
  border:none;
+
        height: 100px;
-
  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;
+
-
  }
+
-
  #imperiallogo {
+
-
  position: relative;
+
-
  text-align:center;
+
-
  z-index:3;
+
-
  }
+
-
  #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: transparent;
+
-
  }
+
-
  /*#menucontainer {
+
-
  overflow:visible;
+
-
  position:relative;
+
-
  z-index:3;
+
-
  }*/
+
-
  #contentSub {
+
-
  margin: 0 0 0 0;
+
-
  } 
+
-
/* Custom IDs ***************************************************************/
+
-
  #maincontent{
+
    #igem-logo img {
-
  position:relative;
+
        -webkit-transition: all 1s ease-in-out;
-
  float:right;
+
        -moz-transition: all 1s ease-in-out;
-
  width: 700px;
+
        -ms-transition: all 1s ease-in-out;
-
  margin: 0 auto;
+
        -o-transition: all 1s ease-in-out;
-
  background: #ffffff;
+
        transition: all 1s ease-in-out;
-
  }
+
    }
-
  #BackToTop {
+
-
  position:fixed;
+
-
  bottom:0;
+
-
  right:0;
+
-
  }
+
-
  #Sitemap {
+
-
  position:fixed;
+
-
  bottom:0;
+
-
  left:0;
+
-
  }
+
-
/*- Banner ***************************************************************/
+
-
  #iGEMLogo {
+
-
  position:absolute;
+
-
  top:15px;
+
-
  left:15px;
+
-
  z-index:3;
+
-
  }
+
-
  #ImperialLogo {
+
-
  position:absolute;
+
-
  top:50px;
+
-
  left:50px;
+
-
  }
+
-
/*- Sidebar ***************************************************************/
+
-
  #nav-vert{
+
-
  position: relative;
+
-
  float:left;
+
-
  width: 210px;
+
-
  }
+
-
  #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  ***************************************************************/
+
    #igem-logo img:hover {
-
  #bodyContent{height: auto;}
+
        -webkit-transform: rotate(360deg);
-
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { /*reserved*/
+
        -moz-transform: rotate(360deg);
-
  margin-bottom: 5px;
+
        -o-transform: rotate(360deg);
-
  }
+
        -ms-transform: rotate(360deg);
-
  a {color:#93B825;}
+
        transform: rotate(360deg);
-
  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;}
+
    #imperial-logo img {
-
  a.sitemap:hover,a.sitemap:active {color:#000000;font-decoration:underline;}
+
        height: 50px;
 +
    }
-
  h1 {
+
#BackToTop,
-
  font-family: tahoma,sans-serif;
+
#BackToTop:link,
-
  font-variant:small-caps;
+
#BackToTop:visited {
-
  color: #000000;
+
    position: fixed;
-
  background: #3333ff;
+
    bottom: 5px;
-
  font-size: 2.2em;
+
    right: 5px;
-
  margin: 0 0 0 0;
+
    text-decoration: none;
-
  padding: 20px 20px 12px 20px;
+
    color: #36a9e1;
-
  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;
+
-
  }
+
-
 
+
-
  #maincontent img{
+
-
  margin-left: 15%;
+
-
  margin-top: 10px;
+
-
  margin-bottom: 10px;
+
-
  padding: 5px;
+
-
  width: 70%;
+
-
  border-top-left-radius: 4px;
+
-
  border-top-right-radius: 4px;
+
-
  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; 
+
-
  }
+
-
 
+
-
  .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;
+
#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>
+
-
</head>
+
-
 
+
-
<body>
+
-
  <a name="top"></a>
+
-
  <div id='imperiallogo'>
+
    <div id="imperial-banner">
-
    <a href='https://2013.igem.org/Team:Imperial_College'>
+
      <a id='imperial-igem-banner' href='https://2013.igem.org/Team:Imperial_College'>
-
      <img src="https://static.igem.org/mediawiki/2013/6/67/Imperiallogo.png" height="140"/>
+
        <img src="https://static.igem.org/mediawiki/2013/d/d9/ImperialLogo2013.png" />
-
    </a>
+
      </a>
-
  </div>
+
-
  <div id='iGEMLogo'>
+
        <a id='igem-logo' href='https://2013.igem.org/Main_Page' target="_blank">
-
    <a href='https://2013.igem.org/Main_Page' target="_blank">
+
          <img src='https://static.igem.org/mediawiki/2011/b/be/ICL_iGEM_Logo.png' />
-
      <img src='https://static.igem.org/mediawiki/2011/b/be/ICL_iGEM_Logo.png' height="140px" />
+
        </a>
-
    </a>
+
-
  </div>
+
-
  <div id='ImperialLogo'>
+
        <a id='imperial-logo' href='http://www3.imperial.ac.uk/' target="_blank">
-
    <a href='http://www3.imperial.ac.uk/' target="_blank">
+
          <img src='https://static.igem.org/mediawiki/2011/1/19/ImperialLogo.png' />
-
      <img src='https://static.igem.org/mediawiki/2011/1/19/ImperialLogo.png' height="40" />
+
     </div>
-
     </a>
+
-
  </div>
+
-
  <div id="BackToTop">
+
<a class="" href="#top" id="BackToTop"><i class="icon-chevron-sign-up icon-3x"></i></a>
-
  <a href="#top">
+
-
    <img src="https://static.igem.org/mediawiki/2011/6/62/ICL_BackToTop2.png" width="48px" />
+
-
  </a>
+
-
  </div>
+
-
  <div id="Sitemap">
+
    <div id="Sitemap">
-
  <a href="https://2011.igem.org/Team:Imperial_College_London/Sitemap">
+
        <a href="https://2013.igem.org/Team:Imperial_College/Sitemap">
-
    <img src="https://static.igem.org/mediawiki/2011/f/f5/ICL_SitemapBtn.png" width="80px" />
+
            <img src="https://static.igem.org/mediawiki/2013/8/84/ICL_SitemapBtn13.png" width="80px" />
-
  </a>
+
        </a>
-
  </div>
+
    </div>
-
</body>
+
</html>
</html>

Latest revision as of 14:54, 28 August 2013

Retrieved from "http://2013.igem.org/Team:Imperial_College/Templates/Banner"