Team:Lethbridge Canada/concept

From 2014hs.igem.org

/***

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: 10px 0px 0px -11px;
       width: 1230px;
       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;

}

  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:260px;

} .banner hgroup{ padding-top:5px; 

   padding-bottom:0;

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

   text-align:center;
   color:white;
   font-weight:bold;

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

   text-align:center;
   color:white;

} .banner img{ 

   display: block;

margin: 0 auto;

} body{ 

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

background: #E9E9E9; 

   -webkit-font-smoothing: antialiased;
   font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #b2b1b1;
   float:left;
   padding:0;

} main{

}

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{

}

/********************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, .card-container.flip .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; font-family: Times New Roman; color: white; font-size: 15px; } .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:608px; margin-top: 15px; background: #09F; overflow: hidden; float:left; } .Humantile{ height: 192.5px; width:192.5px; margin-top: 15px; background: #FC0; overflow: hidden; float:left; 

   margin-right:15px;

} .tile-container-left2{ height: 500px; width:607.5px; 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.5px; margin-top: 15px; margin-left: 15px; background: #FC0; overflow: hidden; float:left; } .tile-container-left3{ height: 500px; width: 607.5px; 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; } .active-tile > .tile-container-right1a{ 

 -webkit-transform: translate(0px,-100%);
 -moz-transform: translate(0px,-100%);
 -o-transform: translate(0px,-100%);
 transform: translate(0px,-100%);

} .tile-container-left1:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); background-color: #3c576f; } .tile-container-left2:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); background-color: #3c576f; } .tile-container-left3:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); background-color: #c29e29; } .tile-container-right1a:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); background-color: #3c576f; } .tile-container-right1b:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); background-color: #81582b; } .tile-container-right2:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); background-color: #c29e29; } .tile-container-right3:hover >.tile{ -webkit-transform:translate(0px, -100%); -moz-transform:translate(0px. -100%); -0-transform:translate(0px, -100%); transform: translate(0px, -100%); } .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; } .tile2{ background: inherit; width: inherit; height: inherit; text-align:center; -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:0; -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: 50px; padding:0; } .tileHMTitle{ 

 font-family: Times New Roman;

color: white; font-size: 30px; padding:0; 

   vertical-align:middle;

} .tileImg{ text-align:center; padding:0; } /*******************Slideshow*****************/ 


   #slides {
     display: none;
         background:#cccccc;
   border-right: 1px solid #cccccc;;
   border-left: 1px solid #cccccc;
   }

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

   a.slidesjs-next,
   a.slidesjs-previous,
   a.slidesjs-play,
   a.slidesjs-stop {
     background-image: url(LethHS2014_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(LethHS2014_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*****************************/

  1. page_title_holder {

height: 50px; width: 1230px; overflow: hidden; 

   			margin-top:20px;
   background:#909090;

}

#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: 3; } #page_title_holder_main_page > h1 { color: white; 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 */

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: 2; }

#page_title_holder_sub_page { padding: 12px 0px 0px 15px; position: relative; /* Required for z-index to work */ z-index: 1;

} #page_title_holder_sub_page > h2{ margin: 0px 0px 0px 0px; color: white; }

/************************************Page Content**************************/ .ContentTitle{ 

   color:black; 
   padding: 10px;
   border-bottom:1px solid black;

} .ContentParagraph{ 

   color:black;
   padding:15px;
   font-size:22px;

} .informationPictures{ 

   	display: block;

margin: 0 auto; 

   text-align:center;
   margin-bottom: 10px;

} .informationPictures figcaption{ 

   color:black;
   font-size:19px;

} /************Floating back to top buttom****************/ .back-to-top{ 

   position:fixed;
   bottom: 2em;
   right: 0px;
   text-decoration:none;
   color:black;
   background-color:#FC0;
   font-size: 12px;
   padding:1em;
   display:none;

} .back-to-top:hover{ 

   background-color: rgba(135, 135, 135, 0.50);

}

/********************Lab Page*************************/ .labPage{ 

   border:1px solid black;
   color:black;

} .labPage h1{ 

   text-align:center;

} .labPageTable{ 

   width:1200px;
   text-align:center;
   margin: 0 auto;

} .labPageTable, .labPageTable td, .labPageTable th{ 

   border: 1px solid black;

} .labPageTable th{ 

   background-color:green;
   color:white;

}

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