Team:Lethbridge Canada/concept

From 2014hs.igem.org

(Difference between revisions)
(Created page with "html { background-color: #e6e9e9; background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); background-image: -o-linear-gradient(270deg,rgb...")
Line 1: Line 1:
-
html {
+
/***
-
    background-color: #e6e9e9;
+
-------------------------------------------------------------------------------------------------------------------------------------------
-
    background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
+
Minimal header: removes the search bar and header image and readjusts font colours in the menus.
-
    background-image: -o-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
+
 
-
    background-image: -moz-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
+
Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code!
-
    background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
+
Check out their wikis at:
-
    background-image: -ms-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
+
https://2011.igem.org/Team:Brown-Stanford
 +
https://2012.igem.org/Team:Lethbridge
 +
***/
 +
 
 +
#content h1.firstHeading {
 +
        visibility: hidden;
 +
}ewe
 +
#p-logo {
 +
        display: none;
 +
}
 +
#searchform {
 +
    display: none;
}
}
-
body {
+
.left-menu {
-
    margin: 0 auto;
+
        background: none
-
    padding: 2em 2em 4em;
+
}
-
    max-width: 800px;
+
.left-menu a {
-
    font-family: source-sans-pro, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
     color: #000;
-
    font-size: 16px;
+
-
    line-height: 1.5em;
+
-
     color: #545454;
+
-
    background-color: #ffffff;
+
-
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
+
-
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
+
-
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
+
-
    -webkit-font-smoothing: antialiased;
+
}
}
-
h1, h2, h3, h4, h5, h6 {
+
div#top-section {               /*the div containing the entire top bar*/
-
    color: #222;
+
        height: 20px;
-
    font-weight: 600;
+
        margin-bottom: -63px !important;
-
    line-height: 1.3em;
+
        margin: 0px 0px 0px -10px;
 +
        width: 1222px;
 +
        border: none;
}
}
-
h2 {
+
#content{
-
    margin-top: 1.3em;
+
        margin: 0px 0px 0px -11px;
 +
        width: 1200px;
 +
        border: none;
}
}
-
a {
+
#search-controls {
-
    color: #0083e8;  
+
        overflow:hidden;
 +
        display:none;
 +
        background: none;
 +
        position: absolute;
 +
        top: 170px;
 +
        right: 40px;
 +
}
 +
 
 +
 
 +
div#header {
 +
        width: 1200px;
 +
        text-align: left;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
        margin-bottom: 0px !important;
 +
} 
 +
 
 +
#menubar {
 +
        position: absolute;
 +
        color: black;
 +
        background-color: #ffffff;
}
}
-
b, strong {
+
.left-menu, .right-menu{
-
    font-weight: 600;
+
        position: absolute;
 +
        background: none;
 +
        color: black;
}
}
-
samp {
+
.left-menu li a, .right-menu li a {
-
    /* hide tutorial instructions so they don't show in the browser */
+
        color: #000 !important;
-
    display: none;
+
}
}
-
img {
+
 
-
    background: transparent;
+
.left-menu ul li, .right-menu ul li a{
-
    border: 10px solid rgba(0, 0, 0, 0.12);
+
        background: none;
-
     border-radius: 4px;
+
        color: #000 !important;
 +
}
 +
 
 +
.left-menu li a:hover, .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
 +
     color: #000 !important;
 +
}
 +
 
 +
#catlinks{
 +
        display:none;
 +
}
 +
 
 +
/*important for background colours*/
 +
.mediawiki{
 +
        background: #ffffff;
 +
}
 +
 
 +
.mediawiki {
 +
        border: none;
 +
        width: 1200px;
 +
        background: transparent;
 +
}
 +
 
 +
#globalWrapper {
 +
        width: 1200px;
 +
        background: transparent;
 +
}
 +
 
 +
#footer-box {
 +
        width: 1210px;
 +
        margin: 0px 0px 0px -11px;
 +
        border: 1px solid #c4c4c4;
 +
        background-color: #f4f4ff
 +
}
 +
 
 +
/***End minimal header***/
 +
 
 +
/********************Basic CSS For Every Page********************/
 +
*{
 +
    margin:0;
 +
    padding: 0; 
 +
}
 +
 
 +
header, main, nav, aside, footer, article, aside, section{
     display: block;
     display: block;
-
    margin: 1.3em auto;
+
}
-
    max-width: 95%;
+
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small {
-
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
+
margin: 0;
 +
padding:0;
 +
border: 0;
 +
outline: 0;
}
}
-
@keyframes colorize {
+
.banner{
-
     0% {
+
     background-color:black;
-
        -webkit-filter: grayscale(100%);
+
    color: white;
 +
width: 1230px;
 +
    height:250px;
 +
}
 +
.banner hgroup{
 +
padding: 5px;
 +
}
 +
.banner hgroup h1{
 +
font-size: 40px;
 +
    text-align:center;
 +
}
 +
.banner hgroup h2{
 +
font-size: 30px;
 +
    text-align:center;
 +
}
 +
.banner img{
 +
    display: block;
 +
margin: 0 auto;
 +
   
 +
}
 +
body{
 +
    width: 1230px;;
 +
    margin-left:auto;
 +
    margin-right:auto;
 +
 +
background: white;
 +
}
 +
main{
 +
 +
background: white;
 +
}
 +
nav {
 +
  background: #ABCE39;
 +
  width: 100%;
 +
}
 +
footer{
 +
background: white;
 +
}
 +
nav ul {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  display: block;
 +
}
 +
nav ul li {
 +
  display: inline-block;
 +
  padding: 0;
 +
 
 +
}
 +
nav ul li a {
 +
  color: black;
 +
  text-decoration: none;
 +
  display: block;
 +
  padding: 0;
 +
    padding: 0 6px;
 +
  font-family: 'Open Sans', sans-serif;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  font-size: 16px;
 +
  position: relative;
 +
}
 +
nav ul li a:hover {
 +
  color: green;
 +
}
 +
.slides{
 +
   
 +
}
 +
.topHeadContent{
 +
    background:white;
 +
}
 +
 
 +
/********************Team Portfolio********************/
 +
/***still need to add html5 tweaks such as moz and webkit to make it work****/
 +
.card-container {
 +
 +
margin-left: 18px;
 +
-webkit-perspective: 1000;
 +
-moz-perspective: 1000;
 +
-ms-perspective: 1000;
 +
perspective: 1000;
 +
 +
-ms-transform: perspective(1000px);
 +
-moz-transform: perspective(1000px);
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
    margin-top:30px;
 +
  float:left;
 +
 
 +
}
 +
 
 +
.card-container:active .card-flip, .card-container.active .card-flip {
 +
-webkit-transform: rotateY(180deg);
 +
-moz-transform: rotateY(180deg);
 +
-ms-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 +
}
 +
.card-container, .front, .back {
 +
width: 384px;
 +
height: 600px;
 +
 +
}
 +
.card-flip{
 +
-webkit-transition: 0.5s;
 +
-webkit-transform-style: preserve-3d;
 +
-ms-transition: 0.5s;
 +
-moz-transition: 0.5s;
 +
transition: 0.5s;
 +
 +
-moz-transform: perspective(1000px);
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
 +
position: relative;
 +
}
 +
.front, .back {
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
background: #09F;
 +
}
 +
.front {
 +
z-index: 2;
 +
 +
}
 +
.back{
 +
-webkit-transform: rotateY(-180deg);
 +
-moz-transform: rotateY(-180deg);
 +
-o-transform: rotateYY(-180deg);
 +
-ms-transform: rotateY(-180deg);
 +
transform: rotateY(180deg);
 +
}
 +
 
 +
 
 +
 
 +
.card-container2 {
 +
 +
margin-right: 50px;
 +
-webkit-perspective: 1000;
 +
-moz-perspective: 1000;
 +
-ms-perspective: 1000;
 +
perspective: 1000;
 +
border: 2px solid black;
 +
 +
-ms-transform: perspective(1000px);
 +
-moz-transform: perspective(1000px);
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
}
 +
 
 +
.card-container2:active .card-flip2, .card-container2.active .card-flip2 {
 +
-webkit-transform: rotateY(180deg);
 +
-moz-transform: rotateY(180deg);
 +
-ms-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 +
}
 +
.card-container2, .front2, .back2 {
 +
width: 400px;
 +
height: 500px;
 +
 +
}
 +
.card-flip2{
 +
-webkit-transition: 0.5s;
 +
-webkit-transform-style: preserve-3d;
 +
-ms-transition: 0.5s;
 +
-moz-transition: 0.5s;
 +
transition: 0.5s;
 +
 +
-moz-transform: perspective(1000px);
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
 +
position: relative;
 +
}
 +
.front2, .back2 {
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
background: #09F;
 +
}
 +
.front2 {
 +
z-index: 2;
 +
 +
}
 +
.back2{
 +
-webkit-transform: rotateY(-180deg);
 +
-moz-transform: rotateY(-180deg);
 +
-o-transform: rotateYY(-180deg);
 +
-ms-transform: rotateY(-180deg);
 +
transform: rotateY(180deg);
 +
}
 +
 
 +
 
 +
 
 +
.bio_text {
 +
padding-top:10px;
 +
padding-right:30px;
 +
padding-left:30px;
 +
}
 +
.bio_text_funny{
 +
   
 +
}
 +
}.bio_img{
 +
/*
 +
display:inline-block;
 +
text-align:center;
 +
*/
 +
display: block;
 +
margin: 0 auto;
 +
padding-top:5px;
 +
    text-align:center;
 +
}
 +
.individual_name{
 +
font-size:40px;
 +
text-align:center;
 +
padding-top:5px;
 +
color:white;
 +
}
 +
.page_title{
 +
font-size: 40px;
 +
}
 +
/************************************Live Tiles****************************************/
 +
.tile-container-left1{
 +
height: 500px;
 +
width:608;
 +
margin-top: 15px;
 +
background: #09F;
 +
overflow: hidden;
 +
float:left;
 +
}
 +
.tile-container-left2{
 +
height: 500px;
 +
width:607.5;
 +
margin-top: 15px;
 +
background: #09F;
 +
overflow: hidden;
 +
float:left;
 +
}
 +
.tile-container-right1a{
 +
height: 243px;
 +
width: 296px;
 +
margin-top: 15px;
 +
margin-left: 15px;
 +
background: #09F;
 +
overflow: hidden;
 +
float:left;
 +
}
 +
.tile-container-right1b{
 +
height: 243px;
 +
width: 296px;
 +
margin-top: 15px;
 +
margin-left: 15px;
 +
background: #FF9900;
 +
overflow: hidden;
 +
float:left;
 +
}
 +
.tile-container-right2{
 +
height: 500px;
 +
width: 607.5;
 +
margin-top: 15px;
 +
margin-left: 15px;
 +
background: #FC0;
 +
overflow: hidden;
 +
float:left;
 +
}
 +
.tile-container-left3{
 +
height: 500px;
 +
width: 607.5;
 +
margin-top: 15px;
 +
background: #FC0;
 +
overflow: hidden;
 +
float:left;
 +
}
 +
.tile-container-right3{
 +
height: 252.5px;
 +
width: 607.5px;
 +
margin-top: 15px;
 +
margin-left: 15px;
 +
background: #01E300;
 +
overflow: hidden;
 +
float:left;
 +
}
 +
.tile-container-left1:hover >.tile{
 +
-webkit-transform:translate(0px, -100%);
 +
-moz-transform:translate(0px. -100%);
 +
-0-transform:translate(0px, -100%);
 +
transform: translate(0px, -100%);
 +
color:hsl(240,65%,75%);
 +
}
 +
.tile-container-left2:hover >.tile{
 +
-webkit-transform:translate(0px, -100%);
 +
-moz-transform:translate(0px. -100%);
 +
-0-transform:translate(0px, -100%);
 +
transform: translate(0px, -100%);
 +
color:hsl(240,65%,75%);
 +
}
 +
.tile-container-left3:hover >.tile{
 +
-webkit-transform:translate(0px, -100%);
 +
-moz-transform:translate(0px. -100%);
 +
-0-transform:translate(0px, -100%);
 +
transform: translate(0px, -100%);
 +
color:hsl(240,65%,75%);
 +
}
 +
.tile-container-right1a:hover >.tile{
 +
-webkit-transform:translate(0px, -100%);
 +
-moz-transform:translate(0px. -100%);
 +
-0-transform:translate(0px, -100%);
 +
transform: translate(0px, -100%);
 +
color:hsl(240,65%,75%);
 +
}
 +
.tile-container-right1b:hover >.tile{
 +
-webkit-transform:translate(0px, -100%);
 +
-moz-transform:translate(0px. -100%);
 +
-0-transform:translate(0px, -100%);
 +
transform: translate(0px, -100%);
 +
color:hsl(240,65%,75%);
 +
}
 +
.tile-container-right2:hover >.tile{
 +
-webkit-transform:translate(0px, -100%);
 +
-moz-transform:translate(0px. -100%);
 +
-0-transform:translate(0px, -100%);
 +
transform: translate(0px, -100%);
 +
color:hsl(240,65%,75%);
 +
}
 +
.tile-container-right3:hover >.tile{
 +
-webkit-transform:translate(0px, -100%);
 +
-moz-transform:translate(0px. -100%);
 +
-0-transform:translate(0px, -100%);
 +
transform: translate(0px, -100%);
 +
color:hsl(240,65%,75%);
 +
}
 +
.tile{
 +
background: inherit;
 +
width: inherit;
 +
height: inherit;
 +
text-align:center;
 +
padding-top:19%;
 +
-webkit-transition: all .2s ease-in-out;
 +
-moz-transition: all .2s ease-in-out;
 +
-o-transition: all .2s ease-in-out;
 +
transition: all .2s ease-in-out;
 +
}
 +
.minitile{
 +
background: inherit;
 +
width: inherit;
 +
height: inherit;
 +
text-align:center;
 +
padding-top:12%;
 +
-webkit-transition: all .2s ease-in-out;
 +
-moz-transition: all .2s ease-in-out;
 +
-o-transition: all .2s ease-in-out;
 +
transition: all .2s ease-in-out;
 +
}
 +
.halftile{
 +
background: inherit;
 +
width: inherit;
 +
height: inherit;
 +
text-align:center;
 +
padding-top:3%;
 +
-webkit-transition: all .2s ease-in-out;
 +
-moz-transition: all .2s ease-in-out;
 +
-o-transition: all .2s ease-in-out;
 +
transition: all .2s ease-in-out;
 +
}
 +
.tileTitle{
 +
font-family: Times New Roman;
 +
color: white;
 +
font-size: 50;
 +
padding:0;
 +
}
 +
.tileImg{
 +
text-align:center;
 +
padding:0;
 +
}
 +
/*******************Slideshow*****************/
 +
  body {
 +
      -webkit-font-smoothing: antialiased;
 +
      font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
      color: #232525;
 +
      padding-top:70px;
     }
     }
-
     100% {
+
 
-
        -webkit-filter: grayscale(0%);
+
     #slides {
 +
      display: none
     }
     }
-
}
 
-
@-webkit-keyframes colorize {
+
    #slides .slidesjs-navigation {
-
    0% {
+
      margin-top:5px;
-
        -webkit-filter: grayscale(100%);
+
     }
     }
-
     100% {
+
 
-
        -webkit-filter: grayscale(0%);
+
     a.slidesjs-next,
 +
    a.slidesjs-previous,
 +
    a.slidesjs-play,
 +
    a.slidesjs-stop {
 +
      background-image: url(../images/btns-next-prev.png);
 +
      background-repeat: no-repeat;
 +
      display:block;
 +
      width:12px;
 +
      height:18px;
 +
      overflow: hidden;
 +
      text-indent: -9999px;
 +
      float: left;
 +
      margin-right:5px;
     }
     }
-
}
+
 
 +
    a.slidesjs-next {
 +
      margin-right:10px;
 +
      background-position: -12px 0;
 +
    }
 +
 
 +
    a:hover.slidesjs-next {
 +
      background-position: -12px -18px;
 +
    }
 +
 
 +
    a.slidesjs-previous {
 +
      background-position: 0 0;
 +
    }
 +
 
 +
    a:hover.slidesjs-previous {
 +
      background-position: 0 -18px;
 +
    }
 +
 
 +
    a.slidesjs-play {
 +
      width:15px;
 +
      background-position: -25px 0;
 +
    }
 +
 
 +
    a:hover.slidesjs-play {
 +
      background-position: -25px -18px;
 +
    }
 +
 
 +
    a.slidesjs-stop {
 +
      width:18px;
 +
      background-position: -41px 0;
 +
    }
 +
 
 +
    a:hover.slidesjs-stop {
 +
      background-position: -41px -18px;
 +
    }
 +
 
 +
    .slidesjs-pagination {
 +
      margin: 7px 0 0;
 +
      float: right;
 +
      list-style: none;
 +
    }
 +
 
 +
    .slidesjs-pagination li {
 +
      float: left;
 +
      margin: 0 1px;
 +
    }
 +
 
 +
    .slidesjs-pagination li a {
 +
      display: block;
 +
      width: 13px;
 +
      height: 0;
 +
      padding-top: 13px;
 +
      background-image: url(../images/pagination.png);
 +
      background-position: 0 0;
 +
      float: left;
 +
      overflow: hidden;
 +
    }
 +
 
 +
    .slidesjs-pagination li a.active,
 +
    .slidesjs-pagination li a:hover.active {
 +
      background-position: 0 -13px
 +
    }
 +
 
 +
    .slidesjs-pagination li a:hover {
 +
      background-position: 0 -26px
 +
    }
 +
 
 +
    #slides a:link,
 +
    #slides a:visited {
 +
      color: #333
 +
    }
 +
 
 +
    #slides a:hover,
 +
    #slides a:active {
 +
      color: #9e2020
 +
    }
 +
 
 +
    .navbar {
 +
      overflow: hidden
 +
    }
 +
    #slides {
 +
      display: none
 +
    }
 +
 
 +
    .container {
 +
        margin: 0 auto
 +
    }
 +
    .topSection{
 +
        background:black;
 +
    }
 +
/*********************Title for Each page*****************************/
 +
#page_title_holder {
 +
    background: #FF9900;
 +
    height: 50px;
 +
    width: 1230px;
 +
    overflow: hidden;
 +
    margin-top:20px;
 +
}
 +
 +
#page_title_holder div {
 +
    float: left;
 +
               
 +
}
 +
 +
#page_title_holder_main_page {
 +
    background: #09F;
 +
    height: inherit;
 +
    padding: 7px 10px 0px 25px;
 +
    position: relative; /* Required for z-index to work */
 +
    z-index: 100;
 +
}
 +
#page_title_holder_main_page > h1 {
 +
color: #e3e3e3;
 +
margin: 0px 0px 0px 0px;
 +
}
 +
 +
#page_title_holder_divider {
 +
    -ms-transform: rotate(45deg); /* IE */
 +
    -moz-transform: rotate(45deg); /* Firefox */
 +
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
 +
    transform: rotate(45deg); /* others */
 +
   
 +
    background: #09F;
 +
    border-right: 3px solid #ffffff; /* Could be cool if it were the same color as the parent to get a transparent look? */
 +
    height: 76px;
 +
    width: 76px;
 +
    margin: -40px 0px 0px -38px;
 +
    position: relative; /* Required for z-index to work */
 +
    z-index: 99;
 +
}
 +
 +
#page_title_holder_sub_page {
 +
padding: 12px 0px 0px 15px;
 +
position: relative; /* Required for z-index to work */
 +
    z-index: 98;
 +
}
 +
#page_title_holder_sub_page > h2{
 +
margin: 0px 0px 0px 0px;
 +
color: white;
 +
}

Revision as of 19:57, 15 June 2014

/***

Minimal header: removes the search bar and header image and readjusts font colours in the menus.

Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code! Check out their wikis at: https://2011.igem.org/Team:Brown-Stanford https://2012.igem.org/Team:Lethbridge

      • /
  1. content h1.firstHeading { 
       visibility: hidden;

}ewe

  1. p-logo { 
       display: none;

}

  1. searchform { 
   display: none;

}

.left-menu { 

       background: none

} .left-menu a { 

   color: #000;

}

div#top-section { /*the div containing the entire top bar*/ 

       height: 20px;
       margin-bottom: -63px !important;
       margin: 0px 0px 0px -10px;
       width: 1222px;
       border: none;

}

  1. content{ 
       margin: 0px 0px 0px -11px;
       width: 1200px;
       border: none;

}

  1. search-controls { 
       overflow:hidden;
       display:none;
       background: none;
       position: absolute;
       top: 170px;
       right: 40px;

}


div#header { 

       width: 1200px;
       text-align: left;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 0px !important;

}

  1. menubar { 
       position: absolute;
       color: black;
       background-color: #ffffff;

}

.left-menu, .right-menu{ 

       position: absolute;
       background: none;
       color: black;

}

.left-menu li a, .right-menu li a { 

       color: #000 !important;

}


.left-menu ul li, .right-menu ul li a{ 

       background: none;
       color: #000 !important;

}

.left-menu li a:hover, .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active { 

   color: #000 !important;

}

  1. catlinks{ 
       display:none;

}

/*important for background colours*/ .mediawiki{ 

       background: #ffffff;

}

.mediawiki { 

       border: none;
       width: 1200px;
       background: transparent;

}

  1. globalWrapper { 
       width: 1200px;
       background: transparent;

}

  1. footer-box { 
       width: 1210px;
       margin: 0px 0px 0px -11px;
       border: 1px solid #c4c4c4;
       background-color: #f4f4ff

}

/***End minimal header***/

/********************Basic CSS For Every Page********************/

  • { 
   margin:0;
   padding: 0;

}

header, main, nav, aside, footer, article, aside, section{ 

   display: block;

} h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small { margin: 0; padding:0; border: 0; outline: 0; }

.banner{ 

   background-color:black;
   color: white;

width: 1230px; 

   height:250px;

} .banner hgroup{ padding: 5px; } .banner hgroup h1{ font-size: 40px; 

   text-align:center;

} .banner hgroup h2{ font-size: 30px; 

   text-align:center;

} .banner img{ 

   display: block;

margin: 0 auto;

} body{ 

   width: 1230px;;
   margin-left:auto;
   margin-right:auto;

background: white; } main{

background: white; } nav { 

 background: #ABCE39;
 width: 100%;

} footer{ background: white; } nav ul { 

 list-style: none;
 margin: 0;
 padding: 0;
 display: block;

} nav ul li { 

 display: inline-block;
 padding: 0;

} nav ul li a { 

 color: black;
 text-decoration: none;
 display: block;
 padding: 0;
   padding: 0 6px;
 font-family: 'Open Sans', sans-serif;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 16px;
 position: relative;

} nav ul li a:hover { 

 color: green;

} .slides{

} .topHeadContent{ 

   background:white;

}

/********************Team Portfolio********************/ /***still need to add html5 tweaks such as moz and webkit to make it work****/ .card-container {

margin-left: 18px; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;

-ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; 

   margin-top:30px;
  float:left;

}

.card-container:active .card-flip, .card-container.active .card-flip { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .card-container, .front, .back { width: 384px; height: 600px;

} .card-flip{ -webkit-transition: 0.5s; -webkit-transform-style: preserve-3d; -ms-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;

-moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;

position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;

position: absolute; top: 0; left: 0; background: #09F; } .front { z-index: 2;

} .back{ -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateYY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(180deg); }


.card-container2 {

margin-right: 50px; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; border: 2px solid black;

-ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; }

.card-container2:active .card-flip2, .card-container2.active .card-flip2 { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .card-container2, .front2, .back2 { width: 400px; height: 500px;

} .card-flip2{ -webkit-transition: 0.5s; -webkit-transform-style: preserve-3d; -ms-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;

-moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;

position: relative; } .front2, .back2 { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;

position: absolute; top: 0; left: 0; background: #09F; } .front2 { z-index: 2;

} .back2{ -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateYY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(180deg); }


.bio_text { padding-top:10px; padding-right:30px; padding-left:30px; } .bio_text_funny{

} }.bio_img{ /* display:inline-block; text-align:center; */ display: block; margin: 0 auto; padding-top:5px; 

   text-align:center;

} .individual_name{ font-size:40px; text-align:center; padding-top:5px; color:white; } .page_title{ font-size: 40px; } /************************************Live Tiles****************************************/ .tile-container-left1{ height: 500px; width:608; margin-top: 15px; background: #09F; overflow: hidden; float:left; } .tile-container-left2{ height: 500px; width:607.5; margin-top: 15px; background: #09F; overflow: hidden; float:left; } .tile-container-right1a{ height: 243px; width: 296px; margin-top: 15px; margin-left: 15px; background: #09F; overflow: hidden; float:left; } .tile-container-right1b{ height: 243px; width: 296px; margin-top: 15px; margin-left: 15px; background: #FF9900; overflow: hidden; float:left; } .tile-container-right2{ height: 500px; width: 607.5; margin-top: 15px; margin-left: 15px; background: #FC0; overflow: hidden; float:left; } .tile-container-left3{ height: 500px; width: 607.5; margin-top: 15px; background: #FC0; overflow: hidden; float:left; } .tile-container-right3{ height: 252.5px; width: 607.5px; margin-top: 15px; margin-left: 15px; background: #01E300; overflow: hidden; float:left; } .tile-container-left1:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); color:hsl(240,65%,75%); } .tile-container-left2:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); color:hsl(240,65%,75%); } .tile-container-left3:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); color:hsl(240,65%,75%); } .tile-container-right1a:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); color:hsl(240,65%,75%); } .tile-container-right1b:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); color:hsl(240,65%,75%); } .tile-container-right2:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); color:hsl(240,65%,75%); } .tile-container-right3:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); color:hsl(240,65%,75%); } .tile{ background: inherit; width: inherit; height: inherit; text-align:center; padding-top:19%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .minitile{ background: inherit; width: inherit; height: inherit; text-align:center; padding-top:12%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .halftile{ background: inherit; width: inherit; height: inherit; text-align:center; padding-top:3%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .tileTitle{ font-family: Times New Roman; color: white; font-size: 50; padding:0; } .tileImg{ text-align:center; padding:0; } /*******************Slideshow*****************/ 

  body {
     -webkit-font-smoothing: antialiased;
     font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #232525;
     padding-top:70px;
   }

   #slides {
     display: none
   }

   #slides .slidesjs-navigation {
     margin-top:5px;
   }

   a.slidesjs-next,
   a.slidesjs-previous,
   a.slidesjs-play,
   a.slidesjs-stop {
     background-image: url(../images/btns-next-prev.png);
     background-repeat: no-repeat;
     display:block;
     width:12px;
     height:18px;
     overflow: hidden;
     text-indent: -9999px;
     float: left;
     margin-right:5px;
   }

   a.slidesjs-next {
     margin-right:10px;
     background-position: -12px 0;
   }

   a:hover.slidesjs-next {
     background-position: -12px -18px;
   }

   a.slidesjs-previous {
     background-position: 0 0;
   }

   a:hover.slidesjs-previous {
     background-position: 0 -18px;
   }

   a.slidesjs-play {
     width:15px;
     background-position: -25px 0;
   }

   a:hover.slidesjs-play {
     background-position: -25px -18px;
   }

   a.slidesjs-stop {
     width:18px;
     background-position: -41px 0;
   }

   a:hover.slidesjs-stop {
     background-position: -41px -18px;
   }

   .slidesjs-pagination {
     margin: 7px 0 0;
     float: right;
     list-style: none;
   }

   .slidesjs-pagination li {
     float: left;
     margin: 0 1px;
   }

   .slidesjs-pagination li a {
     display: block;
     width: 13px;
     height: 0;
     padding-top: 13px;
     background-image: url(../images/pagination.png);
     background-position: 0 0;
     float: left;
     overflow: hidden;
   }

   .slidesjs-pagination li a.active,
   .slidesjs-pagination li a:hover.active {
     background-position: 0 -13px
   }

   .slidesjs-pagination li a:hover {
     background-position: 0 -26px
   }

   #slides a:link,
   #slides a:visited {
     color: #333
   }

   #slides a:hover,
   #slides a:active {
     color: #9e2020
   }

   .navbar {
     overflow: hidden
   }
   #slides {
     display: none
   }

   .container {
       margin: 0 auto
   }
   .topSection{
       background:black;
   }

/*********************Title for Each page*****************************/ #page_title_holder { background: #FF9900; height: 50px; width: 1230px; overflow: hidden; 

   margin-top:20px;

}

#page_title_holder div { float: left;

}

#page_title_holder_main_page { background: #09F; height: inherit; padding: 7px 10px 0px 25px; position: relative; /* Required for z-index to work */ z-index: 100; } #page_title_holder_main_page > h1 { color: #e3e3e3; margin: 0px 0px 0px 0px; }

#page_title_holder_divider { -ms-transform: rotate(45deg); /* IE */ -moz-transform: rotate(45deg); /* Firefox */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); /* others */

background: #09F; border-right: 3px solid #ffffff; /* Could be cool if it were the same color as the parent to get a transparent look? */ height: 76px; width: 76px; margin: -40px 0px 0px -38px; position: relative; /* Required for z-index to work */ z-index: 99; }

#page_title_holder_sub_page { padding: 12px 0px 0px 15px; position: relative; /* Required for z-index to work */ z-index: 98; } #page_title_holder_sub_page > h2{ margin: 0px 0px 0px 0px; color: white; }

Retrieved from "http://2014hs.igem.org/Team:Lethbridge_Canada/concept"