Team:Lethbridge Canada/concept
From 2014hs.igem.org
(7 intermediate revisions not shown) | |||
Line 101: | Line 101: | ||
#globalWrapper { | #globalWrapper { | ||
width: 1200px; | width: 1200px; | ||
- | + | ||
} | } | ||
Line 505: | 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 555: | Line 565: | ||
display: none; | display: none; | ||
background:#cccccc; | background:#cccccc; | ||
+ | border-right: 1px solid #cccccc;; | ||
+ | border-left: 1px solid #cccccc; | ||
} | } | ||
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
- /
- 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: 10px 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;
}
- 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(); 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 {
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;
}