Team:Lethbridge Canada/concept

From 2014hs.igem.org

(Difference between revisions)
 
(18 intermediate revisions not shown)
Line 101: Line 101:
#globalWrapper {
#globalWrapper {
         width: 1200px;
         width: 1200px;
-
        background: transparent;
+
   
}
}
Line 133: Line 133:
     color: white;
     color: white;
width: 1230px;
width: 1230px;
-
     height:250px;
+
     height:260px;
}
}
.banner hgroup{
.banner hgroup{
-
padding: 5px;
+
padding-top:5px;
 +
    padding-bottom:0;
}
}
.banner hgroup h1{
.banner hgroup h1{
Line 142: Line 143:
     text-align:center;
     text-align:center;
     color:white;
     color:white;
 +
    font-weight:bold;
}
}
.banner hgroup h2{
.banner hgroup h2{
Line 160: Line 162:
     -webkit-font-smoothing: antialiased;
     -webkit-font-smoothing: antialiased;
     font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
     font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
-
     color: white;
+
     color: #b2b1b1;
     float:left;
     float:left;
 +
    padding:0;
}
}
main{
main{
-
background:white;
+
}
}
Line 204: Line 207:
}
}
.topHeadContent{
.topHeadContent{
-
    background:white;
+
 
}
}
Line 226: Line 229:
}
}
-
.card-container:active .card-flip, .card-container.active .card-flip {
+
.card-container:active .card-flip, .card-container.active .card-flip, .card-container.flip .card-flip{
-webkit-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
Line 297: Line 300:
transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
 +
.card-container2, .front2, .back2 {
.card-container2, .front2, .back2 {
width: 400px;
width: 400px;
Line 345: Line 349:
padding-right:30px;
padding-right:30px;
padding-left:30px;
padding-left:30px;
 +
font-family: Times New Roman;
 +
color: white;
 +
font-size: 15px;
}
}
.bio_text_funny{
.bio_text_funny{
Line 376: Line 383:
overflow: hidden;
overflow: hidden;
float:left;
float:left;
 +
}
 +
.Humantile{
 +
height: 192.5px;
 +
width:192.5px;
 +
margin-top: 15px;
 +
background: #FC0;
 +
overflow: hidden;
 +
float:left;
 +
    margin-right:15px;
}
}
.tile-container-left2{
.tile-container-left2{
Line 482: Line 498:
-0-transform:translate(0px, -100%);
-0-transform:translate(0px, -100%);
transform: translate(0px, -100%);
transform: translate(0px, -100%);
-
background-color: #4b8d42;
 
}
}
.tile{
.tile{
Line 490: Line 505:
text-align:center;
text-align:center;
padding-top:19%;
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;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
Line 522: Line 547:
font-size: 50px;
font-size: 50px;
padding:0;
padding:0;
 +
}
 +
.tileHMTitle{
 +
  font-family: Times New Roman;
 +
color: white;
 +
font-size: 30px;
 +
padding:0;
 +
    vertical-align:middle;
}
}
.tileImg{
.tileImg{
Line 531: Line 563:
     #slides {
     #slides {
-
       display: none
+
       display: none;
 +
          background:#cccccc;
 +
    border-right: 1px solid #cccccc;;
 +
    border-left: 1px solid #cccccc;
     }
     }
Line 644: Line 679:
/*********************Title for Each page*****************************/
/*********************Title for Each page*****************************/
#page_title_holder {
#page_title_holder {
-
    background: #909090;
 
    height: 50px;
    height: 50px;
    width: 1230px;
    width: 1230px;
    overflow: hidden;
    overflow: hidden;
     margin-top:20px;
     margin-top:20px;
 +
    background:#909090;
}
}
Line 661: Line 696:
    padding: 7px 10px 0px 25px;
    padding: 7px 10px 0px 25px;
    position: relative; /* Required for z-index to work */
    position: relative; /* Required for z-index to work */
-
    z-index: 100;
+
    z-index: 3;
}
}
#page_title_holder_main_page > h1 {
#page_title_holder_main_page > h1 {
Line 679: Line 714:
    margin: -40px 0px 0px -38px;
    margin: -40px 0px 0px -38px;
    position: relative; /* Required for z-index to work */
    position: relative; /* Required for z-index to work */
-
    z-index: 99;
+
    z-index: 2;
}
}
Line 685: Line 720:
padding: 12px 0px 0px 15px;
padding: 12px 0px 0px 15px;
position: relative; /* Required for z-index to work */
position: relative; /* Required for z-index to work */
-
    z-index: 98;
+
    z-index: 1;
                  
                  
}
}
Line 701: Line 736:
.ContentParagraph{
.ContentParagraph{
     color:black;
     color:black;
-
     padding:10px;
+
     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;
}
}

Latest revision as of 02:40, 21 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: 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;

}