Team:Lethbridge Canada/concept

From 2014hs.igem.org

Revision as of 19:41, 17 June 2014 by T Dang (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/***

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

- - /

content h1.firstHeading {

       visibility: hidden;

}ewe

p-logo {

       display: none;

}

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;

}

content{

       margin: 0px 0px 0px -11px;
       width: 1230px;
       border: none;

}

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;

}

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;

}

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;

} 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;
   color:white;

} .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: white;
   float:left;

} 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:608px; margin-top: 15px; background: #09F; overflow: hidden; float:left; } .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%); 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: 50px; padding:0; } .tileImg{ text-align:center; padding:0; } /*******************Slideshow*****************/

   #slides {
     display: none
   }

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

   a.slidesjs-next,
   a.slidesjs-previous,
   a.slidesjs-play,
   a.slidesjs-stop {
     background-image: url();
     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();
     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: visible;

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