Team:Imperial College/Templates/Header

From 2013.igem.org

(Difference between revisions)
(Undo revision 77728 by Samuelsy (talk))
Line 5: Line 5:
       <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."/>
 +
    <style type="text/css">
 +
    /* 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;
 +
        height: 100px;
 +
        margin: 0 15px 1em 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;
 +
    }
 +
 +
    #igem-logo img {
 +
        -webkit-transition: all 1s ease-in-out;
 +
        -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;
 +
    }
 +
 +
    #igem-logo img:hover {
 +
        -webkit-transform: rotate(360deg);
 +
        -moz-transform: rotate(360deg);
 +
        -o-transform: rotate(360deg);
 +
        -ms-transform: rotate(360deg);
 +
        transform: rotate(360deg);
 +
    }
 +
 +
    #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 ***************************************************************/
 +
      #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 ***********************************************************/
 +
ul.navigation-menu {
 +
  box-sizing: border-box;
 +
  list-style-type: none;
 +
  width: 975px;
 +
  height: 50px;
 +
  text-align: center;
 +
  display: inline-block;
 +
  margin: 0;
 +
  padding: 0;
 +
  position: relative;
 +
  border-radius: 5px;
 +
  font-family: Helvetica, Arial, sans-serif;
 +
  color: #ffffff;
 +
  cursor: pointer;
 +
  /* CSS3 Gradient */
 +
 +
  background: #36a9e1;
 +
}
 +
ul.navigation-menu a:link,
 +
ul.navigation-menu a:visited {
 +
  text-decoration: none;
 +
  color: #ffffff;
 +
  display: inline-block;
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
ul.navigation-menu > li {
 +
  display: block;
 +
  float: left;
 +
  line-height: 50px;
 +
  height: 50px;
 +
  text-align: center;
 +
  width: 194px;
 +
  padding: 0;
 +
  margin: 0;
 +
  border-right: 1px solid #000;
 +
  -webkit-transition: all 400ms ease;
 +
  -moz-transition: all 400ms ease;
 +
  -ms-transition: all 400ms ease;
 +
  -o-transition: all 400ms ease;
 +
  transition: all 400ms ease;
 +
}
 +
ul.navigation-menu > li:first-child {
 +
  border-top-left-radius: 5px;
 +
  border-bottom-left-radius: 5px;
 +
}
 +
ul.navigation-menu > li:last-child {
 +
  border-right: none;
 +
  border-radius: 5px;
 +
}
 +
ul.navigation-menu > li ul {
 +
  -webkit-transition: all 400ms ease;
 +
  -moz-transition: all 400ms ease;
 +
  -ms-transition: all 400ms ease;
 +
  -o-transition: all 400ms ease;
 +
  transition: all 400ms ease;
 +
  opacity: 0;
 +
  position: relative;
 +
  z-index: 9999;
 +
  background: #36a9e1;
 +
  list-style-type: none;
 +
  text-align: center;
 +
  padding: 0;
 +
  margin: 0;
 +
  height: 0;
 +
}
 +
ul.navigation-menu > li ul li {
 +
  display: block;
 +
  padding: 0;
 +
  margin: 0;
 +
  height: 50px;
 +
  line-height: 50px;
 +
  border-bottom: 1px solid black;
 +
  height: 0;
 +
  -webkit-transition: all 400ms ease;
 +
  -moz-transition: all 400ms ease;
 +
  -ms-transition: all 400ms ease;
 +
  -o-transition: all 400ms ease;
 +
  transition: all 400ms ease;
 +
}
 +
ul.navigation-menu > li ul li:last-child {
 +
  border-bottom: none;
 +
}
 +
ul.navigation-menu > li ul li:hover {
 +
  background-color: #a3c4e9;
 +
}
 +
ul.navigation-menu > li ul li:active {
 +
  background-color: #93b4d9;
 +
}
 +
ul.navigation-menu > li:hover {
 +
  background-color: #a3c4e9;
 +
}
 +
ul.navigation-menu > li:hover ul {
 +
  -webkit-transition: all 400ms ease;
 +
  -moz-transition: all 400ms ease;
 +
  -ms-transition: all 400ms ease;
 +
  -o-transition: all 400ms ease;
 +
  transition: all 400ms ease;
 +
  opacity: 1;
 +
  height: auto;
 +
}
 +
ul.navigation-menu > li:hover ul li {
 +
  height: auto;
 +
}
 +
ul.navigation-menu > li:active {
 +
  background-color: #93b4d9;
 +
}
 +
 +
    /**************************************************************/
 +
    </style>
</html>
</html>

Revision as of 08:13, 19 August 2013

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