Difference between revisions of "Template:London Biohackspace"

Line 1: Line 1:
 +
{{Template_All_Teams}}
 +
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
<!-- Start of CSS-->
 
 
<style>
 
 
<!-- Reset.css -->
 
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;}input[type=text], textarea{ outline:none;border-radius:0;}
 
 
<!-- Skeleton.css -->
 
/*
 
* Skeleton V1.1
 
* Copyright 2011, Dave Gamache
 
* www.getskeleton.com
 
* Free to use under the MIT license.
 
* http://www.opensource.org/licenses/mit-license.php
 
* 8/17/2011
 
*/
 
 
 
/* Table of Contents
 
==================================================
 
    #Base 960 Grid
 
    #Tablet (Portrait)
 
    #Mobile (Portrait)
 
    #Mobile (Landscape)
 
    #Clearing */
 
 
 
 
/* #Base 960 Grid
 
================================================== */
 
 
    .container_16{ position: relative; width: 960px; margin: 0 auto; padding: 0; }
 
    .grid_1,
 
.grid_2,
 
.grid_3,
 
.grid_4,
 
.grid_5,
 
.grid_6,
 
.grid_7,
 
.grid_8,
 
.grid_9,
 
.grid_10,
 
.grid_11,
 
.grid_12,
 
.grid_13,
 
.grid_14,
 
.grid_15,
 
.grid_16 { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
 
 
    /* Nested Column Classes */
 
    .container_16 .alpha              { margin-left: 0; }
 
    .container_16 .omega              { margin-right: 0; }
 
 
    /* Base Grid */
 
    .container_16 .grid_1  { width: 40px;  }
 
    .container_16 .grid_2 { width: 100px; }
 
    .container_16 .grid_3 { width: 160px; }
 
    .container_16 .grid_4 { width: 220px; }
 
    .container_16 .grid_5 { width: 280px; }
 
    .container_16 .grid_6  { width: 340px; }
 
    .container_16 .grid_7 { width: 400px; }
 
    .container_16 .grid_8 { width: 460px; }
 
    .container_16 .grid_9 { width: 520px; }
 
    .container_16 .grid_10 { width: 580px; }
 
    .container_16 .grid_11 { width: 640px; }
 
    .container_16 .grid_12 { width: 700px; }
 
    .container_16 .grid_13 { width: 760px; }
 
    .container_16 .grid_14 { width: 820px; }
 
    .container_16 .grid_15 { width: 880px; }
 
    .container_16 .grid_16 { width: 940px; }
 
/* Prefix Extra Space >> 16 Columns */
 
.container_16 .prefix_1 {padding-left:60px;}
 
.container_16 .prefix_2 {padding-left:120px;}
 
.container_16 .prefix_3 {padding-left:180px;}
 
.container_16 .prefix_4 {padding-left:240px;}
 
.container_16 .prefix_5 {padding-left:300px;}
 
.container_16 .prefix_6 {padding-left:360px;}
 
.container_16 .prefix_7 {padding-left:420px;}
 
.container_16 .prefix_8 {padding-left:480px;}
 
.container_16 .prefix_9 {padding-left:540px;}
 
.container_16 .prefix_10 {padding-left:600px;}
 
.container_16 .prefix_11 {padding-left:660px;}
 
.container_16 .prefix_12 {padding-left:720px;}
 
.container_16 .prefix_13 {padding-left:780px;}
 
.container_16 .prefix_14 {padding-left:840px;}
 
.container_16 .prefix_15 {padding-left:900px;}
 
/* Suffix Extra Space >> 16 Columns */
 
.container_16 .suffix_1 {padding-right:60px;}
 
.container_16 .suffix_2 {padding-right:120px;}
 
.container_16 .suffix_3 {padding-right:180px;}
 
.container_16 .suffix_4 {padding-right:240px;}
 
.container_16 .suffix_5 {padding-right:300px;}
 
.container_16 .suffix_6 {padding-right:360px;}
 
.container_16 .suffix_7 {padding-right:420px;}
 
.container_16 .suffix_8 {padding-right:480px;}
 
.container_16 .suffix_9 {padding-right:540px;}
 
.container_16 .suffix_10 {padding-right:600px;}
 
.container_16 .suffix_11 {padding-right:660px;}
 
.container_16 .suffix_12 {padding-right:720px;}
 
.container_16 .suffix_13 {padding-right:780px;}
 
.container_16 .suffix_14 {padding-right:840px;}
 
.container_16 .suffix_15 {padding-right:900px;}
 
 
/* #Tablet (Portrait)
 
================================================== */
 
 
    /* Note: Design for a width of 768px */
 
 
    @media only screen and (min-width: 768px) and (max-width: 995px) {
 
        .container_16                                  { width: 768px; }
 
        .grid_1,
 
.grid_2,
 
.grid_3,
 
.grid_4,
 
.grid_5,
 
.grid_6,
 
.grid_7,
 
.grid_8,
 
.grid_9,
 
.grid_10,
 
.grid_11,
 
.grid_12,
 
.grid_13,
 
.grid_14,
 
.grid_15,
 
.grid_16 { margin-left: 10px; margin-right: 10px;  }
 
        .container_16 .alpha              { margin-left: 0;}
 
        .container_16 .omega              { margin-right: 0;}
 
 
        .container_16 .grid_1 { width: 28px; }
 
        .container_16 .grid_2 { width: 76px; }
 
        .container_16 .grid_3 { width: 124px; }
 
        .container_16 .grid_4 { width: 172px; }
 
        .container_16 .grid_5  { width: 220px; }
 
        .container_16 .grid_6 { width: 268px; }
 
        .container_16 .grid_7 { width: 316px; }
 
        .container_16 .grid_8  { width: 364px; }
 
        .container_16 .grid_9  { width: 412px; }
 
        .container_16 .grid_10  { width: 460px; }
 
        .container_16 .grid_11  { width: 508px; }
 
        .container_16 .grid_12  { width: 556px; }
 
        .container_16 .grid_13 { width: 604px; }
 
        .container_16 .grid_14 { width: 652px; }
 
        .container_16 .grid_15 { width: 700px; }
 
        .container_16 .grid_16  { width: 748px; }
 
/* Prefix Extra Space >> 16 Columns */
 
.container_16 .prefix_1 {padding-left:48px;}
 
.container_16 .prefix_2 {padding-left:96px;}
 
.container_16 .prefix_3 {padding-left:144px;}
 
.container_16 .prefix_4 {padding-left:192px;}
 
.container_16 .prefix_5 {padding-left:240px;}
 
.container_16 .prefix_6 {padding-left:288px;}
 
.container_16 .prefix_7 {padding-left:336px;}
 
.container_16 .prefix_8 {padding-left:384px;}
 
.container_16 .prefix_9 {padding-left:432px;}
 
.container_16 .prefix_10 {padding-left:480px;}
 
.container_16 .prefix_11 {padding-left:528px;}
 
.container_16 .prefix_12 {padding-left:576px;}
 
.container_16 .prefix_13 {padding-left:614px;}
 
.container_16 .prefix_14 {padding-left:672px;}
 
.container_16 .prefix_15 {padding-left:720px;}
 
/* Suffix Extra Space >> 16 Columns */
 
.container_16 .suffix_1 {padding-right:48px;}
 
.container_16 .suffix_2 {padding-right:96px;}
 
.container_16 .suffix_3 {padding-right:144px;}
 
.container_16 .suffix_4 {padding-right:192px;}
 
.container_16 .suffix_5 {padding-right:240px;}
 
.container_16 .suffix_6 {padding-right:288px;}
 
.container_16 .suffix_7 {padding-right:336px;}
 
.container_16 .suffix_8 {padding-right:384px;}
 
.container_16 .suffix_9 {padding-right:432px;}
 
.container_16 .suffix_10 {padding-right:480px;}
 
.container_16 .suffix_11 {padding-right:528px;}
 
.container_16 .suffix_12 {padding-right:576px;}
 
.container_16 .suffix_13 {padding-right:614px;}
 
.container_16 .suffix_14 {padding-right:672px;}
 
.container_16 .suffix_15 {padding-right:720px;}
 
    }
 
 
/*  #Mobile (Portrait)
 
================================================== */
 
 
    /* Note: Design for a width of 320px */
 
 
    @media only screen and (max-width: 767px) {
 
        .container_16 { width: 300px; }
 
        .columns, .column { margin: 0; }
 
 
        .container_16 .grid_1,
 
        .container_16 .grid_2,
 
        .container_16 .grid_3,
 
        .container_16 .grid_4,
 
        .container_16 .grid_5,
 
        .container_16 .grid_6,
 
        .container_16 .grid_7,
 
        .container_16 .grid_8,
 
        .container_16 .grid_9,
 
        .container_16 .grid_10,
 
        .container_16 .grid_11,
 
        .container_16 .grid_12,
 
        .container_16 .grid_13,
 
        .container_16 .grid_14,
 
        .container_16 .grid_15,
 
        .container_16 .grid_16{ width: 300px;}
 
/* Prefix Extra Space >> 12 Columns */
 
.container_16 .prefix_1,
 
.container_16 .prefix_2,
 
.container_16 .prefix_3,
 
.container_16 .prefix_4,
 
.container_16 .prefix_5,
 
.container_16 .prefix_6,
 
.container_16 .prefix_7,
 
.container_16 .prefix_8,
 
.container_16 .prefix_9,
 
.container_16 .prefix_10,
 
.container_16 .prefix_11,
 
.container_16 .prefix_12,
 
.container_16 .prefix_13,
 
.container_16 .prefix_14,
 
.container_16 .prefix_15{padding-left:0;}
 
/* Suffix Extra Space >> 12 Columns */
 
.container_16 .suffix_1,
 
.container_16 .suffix_2,
 
.container_16 .suffix_3,
 
.container_16 .suffix_4,
 
.container_16 .suffix_5,
 
.container_16 .suffix_6,
 
.container_16 .suffix_7,
 
.container_16 .suffix_8,
 
.container_16 .suffix_9,
 
.container_16 .suffix_10,
 
.container_16 .suffix_11,
 
.container_16 .suffix_12,
 
.container_16 .suffix_13,
 
.container_16 .suffix_14,
 
.container_16 .suffix_15{padding-right:0;}
 
 
.container_16 .grid_1,
 
.container_16 .grid_2,
 
.container_16 .grid_3,
 
.container_16 .grid_4,
 
.container_16 .grid_5,
 
.container_16 .grid_6,
 
.container_16 .grid_7,
 
.container_16 .grid_8,
 
.container_16 .grid_9,
 
.container_16 .grid_10,
 
.container_16 .grid_11,
 
.container_16 .grid_12,
 
.container_16 .grid_13,
 
.container_16 .grid_14,
 
.container_16 .grid_15,
 
.container_16 .grid_16 {
 
margin-left: 0!important;
 
margin-right: 0!important;
 
}
 
    }
 
 
 
/* #Mobile (Landscape)
 
================================================== */
 
 
    /* Note: Design for a width of 480px */
 
 
    @media only screen and (min-width: 480px) and (max-width: 767px) {
 
        .container_16 { width: 420px; }
 
        .columns, .column { margin: 0; }
 
 
        .container_16 .grid_1,
 
        .container_16 .grid_2,
 
        .container_16 .grid_3,
 
        .container_16 .grid_4,
 
        .container_16 .grid_5,
 
        .container_16 .grid_6,
 
        .container_16 .grid_7,
 
        .container_16 .grid_8,
 
        .container_16 .grid_9,
 
        .container_16 .grid_10,
 
        .container_16 .grid_11,
 
        .container_16 .grid_12,
 
        .container_16 .grid_13,
 
        .container_16 .grid_14,
 
        .container_16 .grid_15,
 
        .container_16 .grid_16{ width: 420px; }
 
/* Prefix Extra Space >> 12 Columns */
 
.container_16 .prefix_1,
 
.container_16 .prefix_2,
 
.container_16 .prefix_3,
 
.container_16 .prefix_4,
 
.container_16 .prefix_5,
 
.container_16 .prefix_6,
 
.container_16 .prefix_7,
 
.container_16 .prefix_8,
 
.container_16 .prefix_9,
 
.container_16 .prefix_10,
 
.container_16 .prefix_11,
 
.container_16 .prefix_12,
 
.container_16 .prefix_13,
 
.container_16 .prefix_14,
 
.container_16 .prefix_15{padding-left:0;}
 
/* Suffix Extra Space >> 12 Columns */
 
.container_16 .suffix_1,
 
.container_16 .suffix_2,
 
.container_16 .suffix_3,
 
.container_16 .suffix_4,
 
.container_16 .suffix_5,
 
.container_16 .suffix_6,
 
.container_16 .suffix_7,
 
.container_16 .suffix_8,
 
.container_16 .suffix_9,
 
.container_16 .suffix_10,
 
.container_16 .suffix_11,
 
.container_16 .suffix_12,
 
.container_16 .suffix_13,
 
.container_16 .suffix_14,
 
.container_16 .suffix_15{padding-right:0;}
 
    }
 
 
 
/* #Clearing
 
================================================== */
 
 
    /* Self Clearing Goodness */
 
    .container_16:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
 
 
    /* Use clearfix class on parent to clear nested columns,
 
    or wrap each row of columns in a <div class="row"> */
 
    .clearfix:before,
 
    .clearfix:after,
 
    .row:before,
 
    .row:after {
 
      content: '\0020';
 
      display: block;
 
      overflow: hidden;
 
      visibility: hidden;
 
      width: 0;
 
      height: 0; }
 
    .row:after,
 
    .clearfix:after {
 
      clear: both; }
 
    .row,
 
    .clearfix {
 
      zoom: 1; }
 
 
    /* You can also use a <br class="clear" /> to clear columns */
 
    .clear {
 
      clear: both;
 
      display: block;
 
      overflow: hidden;
 
      visibility: hidden;
 
      width: 0;
 
      height: 0;
 
    }
 
 
<!-- Style.css -->
 
/*css*/
 
@import url(//fonts.googleapis.com/css?family=Stint+Ultra+Condensed);
 
 
html, body {
 
background: #ffffff;
 
font: 14px/20px Arial, sans-serif;
 
color: #a49887;
 
min-width:300px;
 
}
 
 
* { -webkit-text-size-adjust: none;}
 
 
a { color: inherit; text-decoration: none;}
 
a:hover { text-decoration: none;}
 
a[href^="tel:"] {color: inherit;text-decoration:none;}
 
.a-hov { transition: all 0.4s ease;}
 
.a-hov:hover { color: #6b460a;}
 
 
ul li a { transition: all 0.4s ease;}
 
 
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: 'Stint Ultra Condensed', cursive; text-transform: uppercase;}
 
h1 { }
 
h2 { font-size: 32px; line-height: 34px; color: #6b460a; padding-top: 55px; padding-bottom: 15px;}
 
h3 { font-size: 22px; line-height: 26px; color: #aca383; padding-bottom: 8px; padding-top: 21px;}
 
h4 { }
 
h5 { }
 
 
 
.title-1 {
 
background: #a4211f;
 
color: #fff;
 
font-family: 'Stint Ultra Condensed', cursive;
 
font-size: 32px;
 
line-height: 32px;
 
text-align: center;
 
 
padding: 10px 0px;
 
margin-bottom: 29px;
 
}
 
.title-1.orange { background: #cf8200;}
 
.title-1.green { background: #859500;}
 
.title-1.violet { background: #89347a;}
 
.title-2 { font-family: 'Stint Ultra Condensed', cursive; font-size: 80px; line-height: 1em; text-transform: uppercase; color: #6b460a; padding-top: 46px;}
 
.text-1 { font-family: 'Open Sans', sans-serif; color: #fff; text-transform: uppercase; font-size: 11px; line-height: 22px;}
 
.text-2 { }
 
.text-3 { }
 
 
.color-1 { color: #f35c1a;}
 
.color-2 { }
 
 
h2.v1 { color: #bd812f; padding-top: 0px !important;}
 
.page-1 h2 { padding-top: 70px; padding-bottom: 14px;}
 
h2 + .btn { margin-top: 9px;}
 
h2 + h3 { padding-top: 0;}
 
h3 a { transition: all .4s ease;}
 
h3 a:hover { color: #6b460a;}
 
 
 
.link {
 
font-size: 24px;
 
line-height: 24px;
 
font-family: 'Stint Ultra Condensed', cursive;
 
color: #f35c1a;
 
transition: all .4s ease;
 
text-transform: none;
 
}
 
.link:hover { color:#6b460a; }
 
.btn {
 
display: inline-block;
 
text-align: center;
 
vertical-align: middle;
 
transition: all 0.4s ease;
 
background: #f57741;
 
height: 45px;
 
line-height: 45px;
 
font-family: 'Stint Ultra Condensed', cursive;
 
text-transform: uppercase;
 
font-size: 22px;
 
padding: 0 21px;
 
-webkit-border-radius: 2px;
 
-moz-border-radius: 2px;
 
-ms-border-radius: 2px;
 
-o-border-radius: 2px;
 
border-radius: 2px;
 
color: #fff;
 
margin-top: 23px;
 
}
 
.btn:hover { background: #3b1500;}
 
.btn-1 {
 
display: inline-block;
 
text-align: center;
 
vertical-align: middle;
 
transition: all 0.4s ease;
 
background: url(bg-5.gif) 0 0 repeat;
 
height: 45px;
 
line-height: 45px;
 
font-family: 'Stint Ultra Condensed', cursive;
 
text-transform: uppercase;
 
font-size: 22px;
 
padding: 0 20px;
 
border: 1px solid #5d3522;
 
-webkit-border-radius: 2px;
 
-moz-border-radius: 2px;
 
-ms-border-radius: 2px;
 
-o-border-radius: 2px;
 
border-radius: 2px;
 
color: #fff;
 
margin-top: 23px;
 
}
 
.btn-1:hover { background: #f57741;}
 
 
 
.btn-2 {
 
display: inline-block;
 
text-align: center;
 
transition: all 0.4s ease;
 
line-height: 22px;
 
font-family: 'Stint Ultra Condensed', cursive;
 
text-transform: uppercase;
 
font-size: 22px;
 
color: #be7d25;
 
margin-top: 23px;
 
background: url(arrow-1.png) right 4px no-repeat;
 
padding-right: 20px;
 
}
 
.btn-2:hover { color: #6b460a;}
 
 
.list li {
 
line-height: 28px;
 
padding-left: 27px;
 
background: url(mark-3.png) 0 7px no-repeat;
 
margin-top: -7px;
 
}
 
.list li + li { margin-top: 0px;}
 
.list li a { }
 
.list li a:hover { color: #f74f42;}
 
 
 
/*auxiliary*/
 
 
.img-ind {float: left; margin-right: 20px; margin-top: 2px;}
 
.wrapper {width: 100%; position: relative;}
 
.extra-wrap {overflow:hidden;}
 
.grid_inside { margin: 0 -10px;}
 
.aligncenter {text-align: center !important;}
 
.alignleft { text-align: left !important; }
 
.it {font-style:italic; display: inline-block;}
 
.fleft {float: left;}
 
.fright {float: right;}
 
.h-underline:hover { text-decoration: underline;}
 
.underline {text-decoration: underline;}
 
.upp {text-transform: uppercase;}
 
.transition {transition: all 0.4s ease;}
 
 
.clearfix { *zoom: 1;}
 
.clearfix:before,.clearfix:after {display: table; content: "";line-height: 0;}
 
.clearfix:after { clear: both;}
 
 
.img-ind + div > h2, .img-ind + div > h3 { padding-top: 0;}
 
 
.img-circle {
 
float: left;
 
margin-right: 20px;
 
background: #f57741;
 
text-align: center;
 
vertical-align: middle;
 
width: 69px;
 
height: 69px;
 
line-height: 69px;
 
margin-top: 4px;
 
-webkit-border-radius: 500px;
 
-moz-border-radius: 500px;
 
-ms-border-radius: 500px;
 
-o-border-radius: 500px;
 
border-radius: 500px;
 
 
}
 
.img-circle img { display: inline-block; line-height: 69px; vertical-align: middle;}
 
.img-circle + div > h3 { padding-top: 0; margin-top: -2px;}
 
.img-circle + div { overflow: hidden;}
 
 
.pad-left { padding-left: 10px;}
 
 
p { padding-bottom: 20px;}
 
.top-1 { padding-top: 70px;}
 
  
.bg-1 { display: none;}
+
<!-- Start of CSS-->
.bg-2 { background: url(bg-3.jpg) 0 0 repeat; padding-bottom: 53px;}
+
<style type="text/css">
  
.bord-1 { position: relative;}
+
/* PAGE LAYOUT */
.bord-1:after {
+
content: "";
+
position: absolute;
+
border-bottom: 1px solid #e9e5df;
+
left: 10px;
+
right: 10px;
+
bottom: 0;
+
height: 1px;
+
}
+
.bord-1.v1 {padding-bottom: 16px;}
+
  
.bord-2 { position: relative;margin-top: 57px;}
+
/* Change Background color*/
.bord-2:after {
+
body {  
position: absolute;
+
background-color: #fff;
content: "";
+
}
border-right: 1px solid #f0ede9;
+
top: 0;
+
bottom: 0;
+
right: 19px;
+
width: 1px;
+
}
+
  
.bord-3 { position: relative; padding-bottom: 55px;}
+
/* Creates a container that will wrap all of the content inside your wiki pages. */
.bord-3:after {
+
#mainContainer {
content: "";
+
width: 978px;
position: absolute;
+
overflow:hidden;
border-bottom: 1px solid #e9e5df;
+
float:left;
left: 0px;
+
margin-left:20px;
right: 0px;
+
margin-bottom: 10px;
bottom: 0;
+
background-color: #fff;  
height: 1px;
+
border-bottom: 14px solid #565656;
}  
+
border-right: 2px solid #565656;
 +
border-left: 2px solid #565656;
 +
border-top: 2px solid #565656;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
}
  
.page-1 .img-ind {float: left; margin-right: 41px; margin-top: 2px;}
+
/* Creates the container for the menu */
 +
#menuContainer  {  
 +
float:left;
 +
width: 134px;
 +
padding: 20px 0px;
 +
border-top: 14px solid #565656;
 +
background-color: #E8E8E9;
 +
}
  
/************Header************/
+
/* Creates the container for the content */
 +
#contentContainer {
 +
padding-top:20px;
 +
padding-right:10px;
 +
margin-bottom: 20px;
 +
width: 814px;
 +
padding-left: 20px;
 +
float: left;
 +
background-color: #fff;
 +
border-top: 14px solid #565656;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
}
  
header { position: relative; background: url(bg-1.jpg) center 0 no-repeat;background-size: 100% auto; padding-bottom: 23px;}
+
/*Set up height place holder for the banner*/
 +
#bannerContainer {
 +
height:200px;
 +
margin:auto;
 +
text-align:center;
 +
color: #24B694;
 +
}
  
h1 { text-align: center;}
+
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
  
.list_carousel {
+
/*Change the styling of text for everything inside main container*/
/*background: url(../images/bg-4.png) center 0 no-repeat; */
+
#mainContainer p {
min-height: 119px;
+
font-size: 13px;
margin-top: 322px;
+
color: #000000;
padding: 0 110px;
+
}
position: relative;
+
margin-bottom: 115px;
+
/*This changes the color and font family */
}
+
#contentContainer h1, h2, h3, h4, h5, h6 {
.list_carousel ul { cursor: default;}
+
color: #565656;
.list_carousel .foo_bg {
+
border-bottom: none;
position: absolute;
+
font-weight: bold;
left: 0;
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
right: 0;
+
margin-top:10px;
bottom: 0;
+
}
top: 0;
+
width: 100%;
+
height: 100%;
+
}
+
.list_carousel li {
+
float: left;
+
font-family: 'Stint Ultra Condensed', cursive;
+
color: #fff;
+
font-size: 65px;
+
line-height: 65px;
+
text-transform: uppercase;
+
text-align: center;
+
padding-top: 17px;
+
padding-bottom: 37px;
+
}
+
.list_carousel li span { color: #e6ff74;}
+
  
.arrows { position: relative;}
+
/*Style of the links - links are different inside the menu */
.arrows a { position: absolute; display: block; width: 25px; height: 38px; background: url(arrows-1.png) repeat;}
+
#contentContainer a {  
.arrows .next { background-position: 0 1px; left: -30px; top: -89px;}
+
font-weight: bold;
.arrows .prev { background-position: right 1px; right: -30px; top: -89px;}
+
color: #23b593;
.arrows .next:hover { background-position: 0 bottom;}
+
}
.arrows .prev:hover { background-position: right bottom;}
+
  
/************Content***********/
+
  /* Styling links on hover- links are different inside the menu */
.content { background: #fff;}
+
#contentContainer a:hover {  
.content-last { position: relative; padding-bottom: 66px;}
+
color: #59bf92;
.content-last:after {
+
}
position: absolute;
+
content: "";
+
left: 10px;
+
right: 10px;
+
bottom: 0;
+
border-bottom: 1px solid #e9e5df;
+
height: 1px;
+
}
+
.box-1 { margin-top: 57px; text-align: center;}
+
  
.block-2 > div { margin-top: 27px;}
+
/*Change the styling of tables */
 +
        #contentContainer table {
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    width: 90%
 +
    margin: auto;
 +
    margin-bottom: 15px;
 +
    margin-top: 15px;
 +
    margin-right: 10px;
 +
    margin-left: 10px;
 +
    }
  
 +
/*Change the styling of table cells*/
 +
    #contentContainer  td {
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
  
 +
/*Change the styling of table headers */
 +
    #contentContainer th {
 +
    background-color: #E8E8E9;
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
  
.block-4 > div + div { margin-top: 38px;}
 
  
.gallery { margin-top: -15px;}
 
.gallery > div { margin-top: 20px;}
 
.gallery + .btn-2 { margin-top: 28px;}
 
  
 +
/*MENU STYLING */
  
.box-4 + .box-4 { margin-top: 32px;}
+
/*Styling for the links in the menu */
 +
#menuContainer a {
 +
color: #565656;
 +
text-decoration:none;
 +
font-weight: bold;
 +
}
  
.gallery-1 { margin-top: -26px;}
+
/* Sets the style for lists inside menuContainer  */
.gallery-1 .box-5 {}
+
#menuContainer ul {  
.gallery-1 .box-5 .inside { border: 1px solid #e9e5df; border-top: 0px; padding: 0 20px 35px;}
+
list-style: none;
 +
margin-left:0px;
 +
}
  
 +
/*Styles the list items to become menu buttons */
 +
#menuContainer ul li {
 +
text-align: center;
 +
display: block;
 +
width: 100%;
 +
height:30px;
 +
padding-top:10px;
 +
}
  
.box-5 { margin-top: 30px;}
+
/*For the menu buttons, changes the color when hovering*/
 +
#menuContainer li:hover {
 +
color:  #FFF;
 +
background-color: #24B694;
 +
}
  
.block-5 { margin-top: -47px; padding-bottom: 56px;}
+
/*Submenus are not displayed as default*/
.block-5 > div { margin-top: 47px;}
+
#menuContainer li ul {
 +
display: none;
 +
padding-top:15px;
 +
margin-left: -19px;
 +
}
  
blockquote .inside { margin-top: -3px;}
+
/*Submenus are displayed when hovering the menu button */
blockquote .inside .quote,
+
#menuContainer li:hover ul {
blockquote .inside .quote-1 {
+
/*display: inline-block; */
width: 28px;
+
display: block;  
height: 17px;
+
position: absolute;  
display: inline-block;
+
float:right;
}
+
margin-left: 134px;
blockquote .inside .quote { background: url(../images/quote-1.png) 0 bottom no-repeat;}
+
margin-top:-42px;
blockquote .inside .quote-1 { background: url(../images/quote-2.png) right bottom no-repeat;}
+
}
  
/************Footer************/
+
/*Style the submenu buttons*/
 +
#menuContainer li ul li{
 +
background-color: #59BF92;
 +
padding-left:20px;
 +
padding-right:20px;
 +
height:30px;
 +
padding-top:10px;
 +
margin-top:-2px;
 +
color: #565656;
 +
width: 150px;
 +
}
  
footer {
+
/*CLASSES */
font-size: 24px;
+
line-height: 24px;
+
font-family: 'Stint Ultra Condensed', cursive;
+
color: #c1baa2;
+
text-transform: uppercase;
+
padding-bottom: 40px;
+
background: #fff;
+
z-index: 9;
+
}
+
  
 +
/*Clear class for all the pages, adds spacing too*/
 +
.clear{
 +
clear:both;
 +
height: 10px;
 +
}
  
.list-services { margin-top: 31px; position: relative; margin-right: auto; margin-left: 11px;}
 
.list-services li {
 
display: inline-block;
 
float: left;
 
}
 
  
[class*="list-services-"] {
+
/* highlight box for special messages */
text-decoration: none;
+
    .highlightBox {
display: block;
+
        width:500px;  
height: 34px;
+
        margin:auto;  
width: 34px;
+
        background-color: #E8E8E9;  
background: url(social_icons.png) no-repeat;
+
margin-bottom: 15px;
-webkit-transition: all 0.2s ease-out;
+
margin-top: 15px;
    -moz-transition: all 0.2s ease-out;
+
padding: 15px;
    -o-transition: all 0.2s ease-out;
+
padding-top: 5px;
    -ms-transition: all 0.2s ease-out;
+
    }
    transition: all 0.2s ease-out;
+
margin-left: 11px;
+
-webkit-border-radius: 500px;
+
-moz-border-radius: 500px;
+
-ms-border-radius: 500px;
+
-o-border-radius: 500px;
+
border-radius: 500px;
+
}
+
.list-services-1 { background-position: 0px 0px;}
+
.list-services-2 { background-position: -45px 0px;}
+
.list-services-3 { background-position: -90px 0px;}
+
.list-services-4 { background-position: -136px 0px;}
+
  
.list-services li a:hover { opacity: .6;}
 
  
.box-2 {
+
</style>
position: relative;
+
<!-- End of CSS -->
margin-top: 31px;
+
background: url(mark-1.png) 0 4px no-repeat;
+
margin-left: 23px;
+
padding-left: 29px;
+
}
+
.box-2 span {
+
}
+
.box-3 {
+
position: relative;
+
margin-top: 76px;
+
background: url(mark-2.png) 0 4px no-repeat;
+
margin-left: 0px;
+
padding-left: 29px;
+
color: #aca383;
+
font-size: 22px;
+
line-height: 26px;
+
+
padding-bottom: 44px;
+
}
+
footer .bord-1 { padding-bottom: 60px;}
+
  
.block-3 { padding-top: 48px; text-align: center; font-size: 20px; color: #866d44;}
 
.block-3 .dot { color: #f57b45; font-size: 27px;}
 
  
.top { margin-top: 37px; display: inline-block; width: 45px; height: 45px; background: #000; background: url(toTop.png) 0 0 no-repeat;}
+
<!-- Start of the template html elements. -->
.top:hover { background-position: 0 bottom;}
+
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
  
  
 +
<div id="bannerContainer">
 +
<br><br>
 +
<h2> Add a banner to your wiki! </h2>
 +
 +
<p>You can make the image 980px  by  200px</p>
 +
<p> Remember to call the file: "<i>Team_London_Biohackspace_banner.jpg</i>" </p>
 +
</div>
  
/*toTop*/
+
<!-- Start of menu -->
 +
<div id="menuContainer">
  
#toTop {
+
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
display:none;
+
<ul>
text-decoration:none;
+
<a href="https://2015.igem.org/Team:London_Biohackspace"><li>HOME</li></a>
position:fixed;
+
cursor:pointer;
+
overflow:hidden;
+
width: 24px;
+
height: 24px;
+
border:none;
+
text-indent:-999px;
+
z-index:20;
+
background: url(ui.totop.png) 0 0 no-repeat;
+
margin-right: -670px !important;
+
right: 50%;
+
bottom: 20px;
+
}
+
  
#toTop:hover { background: url(../images/ui.totop.png) right 0 no-repeat;}
+
<a href="https://2015.igem.org/Team:London_Biohackspace/Team"><li>TEAM</li></a>
  
#toTop:active, #toTop:focus {outline:none;}
+
<a href="#"><li>PROJECT
 +
            <ul>
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Description"><li>Description</li></a>
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Experiments"><li>Experiments &amp; Protocols</li></a> 
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Results"><li>Results</li></a> 
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Design"><li>Design</li></a>
 +
</ul>
 +
</li></a>
  
 +
<a href="#"><li>PARTS
 +
            <ul>
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Parts"><li>Team Parts</li></a>
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Basic_Part"><li>Basic Parts</li></a> 
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Composite_Part"><li>Composite Parts</li></a>
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Part_Collection"><li>Part Collection</li></a> 
 +
</ul>
 +
</li></a>
  
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Notebook"><li>NOTEBOOK</li></a>
 +
     
 +
<a href="https://2015.igem.org/Team:London_Biohackspace/Attributions"><li>ATTRIBUTIONS</li></a>
  
/*touch-touch*/  
+
<a href="https://2015.igem.org/Team:London_Biohackspace/Collaborations"><li>COLLABORATIONS</li></a>
.magnifier {
+
position:relative;
+
display:block;
+
background: url(magnifier.png) center center no-repeat #000000;
+
}
+
.magnifier img {
+
-webkit-transition: all 0.5s ease;
+
-moz-transition: all 0.5s ease;
+
-o-transition: all 0.5s ease;
+
transition: all 0.5s ease;
+
width: 100%;
+
-webkit-box-shadow: 0px 0px 0px 0px #fff;
+
-moz-box-shadow: 0px 0px 0px 0px #fff;
+
box-shadow: 0px 0px 0px 0px #fff;
+
}
+
  
.magnifier:hover img {
+
<a href="https://2015.igem.org/Team:London_Biohackspace/Practices"><li>HUMAN PRACTICES</li></a>
opacity: 0.4;
+
}
+
  
+
<a href="https://2015.igem.org/Team:London_Biohackspace/Safety"><li>SAFETY</li></a>
/*==================================RESPONSIVE LAYOUTS===============================================*/
+
  
@media only screen and (max-width: 1230px) {
+
<a href="https://2015.igem.org/Team:London_Biohackspace/Modeling"><li>MODELING</li></a>
header { background-size: 100% auto;}
+
.list_carousel { margin-top: 60px;}
+
}
+
  
@media only screen and (max-width: 995px) {
+
<a href="https://2015.igem.org/Team:London_Biohackspace/Measurement"><li>MEASUREMENT</li></a>
.wrapper-1 { width: 100%;}
+
.list_carousel li { font-size: 50px; line-height: 59px;}
+
.bg-2 { background-size: auto 100%;}
+
.block-2 img { width: 100%;}
+
.title-2 { font-size: 60px; line-height: 60px;}
+
.w1 { width: 45%; margin-bottom: 15px;}
+
.list-services { margin-left: 0;}
+
[class*="list-services-"] { margin-left: 8px;}
+
.list_carousel { padding: 0 100px;}
+
.list_carousel { margin-bottom: 50px;}
+
}
+
@media only screen and (max-width: 767px) {
+
.list_carousel li { font-size: 30px; line-height: 30px;}
+
.list_carousel { padding: 0px 70px 0;}
+
.w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;}
+
.block-2 { text-align: center;padding-bottom: 20px;}
+
.block-2 .title-2 { padding-top: 20px;}
+
.bord-2:after { display: none;}
+
.bord-2 { margin-top: 10px;}
+
.box-3 { margin-top: 33px;}
+
.gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;}
+
.grid_inside { margin: 0;}
+
blockquote { margin-bottom: 20px;}
+
footer .bord-1 { padding-bottom: 30px;}
+
.box-2 { margin-left: 9px;}
+
.box-3 { margin-left: 9px;}
+
header { background-size: auto auto;}
+
h1 img { width: 50%;}
+
}
+
@media only screen and (max-width: 479px) {
+
.list_carousel li { font-size: 25px; line-height: 31px;}
+
.block-2 .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;}
+
.gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;}
+
h1 img { width: 70%;}
+
}
+
@media only screen and (max-width: 320px) {
+
  
}
+
<a href="https://2015.igem.org/Team:London_Biohackspace/Software"><li>SOFTWARE</li></a>
  
.page-header {
+
<a href="https://2015.igem.org/Team:London_Biohackspace/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
    margin-top:30px;
+
    margin-bottom:0;
+
}
+
  
</style>
+
</ul>
+
</div>
<!-- End of CSS -->
+
<!-- End of menu  -->
  
 +
<!-- Start of content -->
 +
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
 
</html>
 
</html>

Revision as of 14:09, 14 July 2015



Add a banner to your wiki!

You can make the image 980px by 200px

Remember to call the file: "Team_London_Biohackspace_banner.jpg"