Team:Toronto/css/style

From 2014.igem.org

Revision as of 01:40, 18 October 2014 by Samantha.chow (Talk | contribs)

/* Fonts

* font-family: 'Ropa Sans', sans-serif;
* font-family: 'Contrail One', cursive;
* font-family: 'Walter Turncoat', cursive;
* font-family: 'Voltaire', sans-serif;
* font-family: 'Bangers', cursive;
* font-family: 'Oswald', sans-serif;
*/
  • {
 margin: 0;
 padding: 0;
 box-sizing: border-box; }
  1. globalWrapper {

height: 100%; top: -46px; }

  1. bg {
position: fixed;
width: 100%;
height: 100%;
background-color: black;
/*z-index: 1;*/

}

  1. top-section {
height: 25px;
width: 100%;
min-width: 820px;
position: relative;
background-color: black;
top: 46px;
left:0;
border: 0;
margin: 0;
padding-left: 10px;
padding-right: 10px;

}

  1. top-section #p-logo {
display: none;

}

  1. top-section:after {
clear: both;

}

  1. top-section #search-controls {
display:none;

}

  1. content {

padding:0; width:100%; height: 100%; }

  1. content h1.firstHeading {
display: none;

}

  1. bodyContent {

height: 100%; }

  1. menubar {
position: relative;
top: 0;

}

  1. menubar ul {
margin: 0;

} .left-menu {

position: relative;
top: 21px;
float: left;

} .right-menu {

position: relative;
top: 21px;
float: right;

}

  1. navbar {
list-style-type: none;
list-style-image: none;
font-size: 0.5em;

}

h1, h2, h3, h4, h5, h6 {

border-bottom: 0;

}

.col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {

 margin: 0;
 padding: 0;
 box-sizing: border-box; }

html {

 position: relative;
 height: 100%; }

body {

 position: relative;
 min-height: 100%; 
 height: 100%;
 background-color: black;

}

 body::-webkit-scrollbar {
   width: 12px;
   background: rgba(127, 140, 141, 0.4);
   opacity: 0; }
 body::-webkit-scrollbar-thumb {
   background: rgba(127, 140, 141, 0.8); }

.dark:before, .dark:after {

 background-color: black;

} .dark span {

color: black;
border-color: black;

}

h1, h2, h3, h4, h5, h6 {

 overflow: hidden;
 margin-top: 10px;
 font-family: 'Bangers', cursive;
 text-align: center; }
 h1:before, h1:after, h2:before, h2:after, h3:before, h3:after, h4:before, h4:after, h5:before, h5:after, h6:before, h6:after {
   background-color: white;
   content: "";
   display: inline-block;
   height: 2px;
   position: relative;
   vertical-align: middle;
   width: 50%; }
 h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
   right: 0px;
   margin-left: -50%; }
 h1:after, h2:after, h3:after, h4:after, h5:after, h6:after {
   left: 0px;
   margin-right: -50%; }
 h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
   color: white;
   display: inline-block;
   padding: 0.5em;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   border: 2px solid white; }

h4:before, h4:after, h5:before, h5:after, h6:before, h6:after {

 background-color: black; }

h4 span, h5 span, h6 span {

 color: black;
 border-color: black; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {

 h5 span, h6 span {
   border-bottom-width: 3px; } }

canvas#canvas {

 position: fixed;
 display: block;
 z-index: 1; }

div#splash-wrapper {

 position: relative;
 height: 100%;
 margin-bottom: 100px;
 /*background-color: #a66bbe;*/
 background-color: black;
 background-image: url('https://static.igem.org/mediawiki/2014/5/50/Toronto_igem_bg_5.jpg');
 background-positon: top center;
 background-size: 100% auto;
 background-repeat: no-repeat;
 color: white; }
 div#splash-wrapper section#splash {
   position: absolute;
   width: 100%;
   z-index: 9999; }
   div#splash-wrapper section#splash::-webkit-scrollbar {
     width: 12px;
     background: black; }
   div#splash-wrapper section#splash::-webkit-scrollbar-thumb {
     background: green; }
 div#splash-wrapper nav {
   position: absolute;
   z-index: 9999;
   bottom: -100px;
   width: 100%;
   height: 100px;
   background-color: black;
   border-bottom: 2px solid whitesmoke;
   -webkit-transition: all 250ms ease;
   -moz-transition: all 250ms ease;
   -o-transition: all 250ms ease;
   transition: all 250ms ease; }
   div#splash-wrapper nav.stuck {
     position: fixed;
     top: 0; }
   div#splash-wrapper nav.free {
     position: absolute;
     z-index: 9999;
     bottom: -42px; }
   div#splash-wrapper nav:hover {
     /*background-color: #3498db;*/ }
   div#splash-wrapper nav ul {
     margin: 0; }
     div#splash-wrapper nav ul li {
       float: left;
       list-style-type: none;
       font-family: 'Bangers', cursive;
       text-transform: capitalize;
       font-size: 2em;
       -webkit-transition: all 250ms ease;
       -moz-transition: all 250ms ease;
       -o-transition: all 250ms ease;
       transition: all 250ms ease; }
       div#splash-wrapper nav ul li.active {
         background-color: whitesmoke; }
         div#splash-wrapper nav ul li.active a {
           color: black; }
       div#splash-wrapper nav ul li:hover {
         background-color: rgba(245, 245, 245, 0.5); }
       div#splash-wrapper nav ul li a {
         padding: 10px;
         color: white;
         height: 40px;
         line-height: 40px; }
         div#splash-wrapper nav ul li a .fa {
           font-size: 0.6em;
           vertical-align: middle;
           padding-right: 5px; }
         div#splash-wrapper nav ul li a:hover {
           text-decoration: none; }

section#main {

 position: absolute;
 /*overflow: hidden;*/
 width: 100%;
 z-index: 9998; }
 section#main #main-inner {
   position: absolute;
   width: 100%; }
 section#main .container-wrapper {
   background-color: whitesmoke; }
   section#main .container-wrapper.first {
     padding-top: 15px; }
 section#main footer {
   position: relative;
   padding-top: 10px; }


.blurb {

 width: 600px;
 margin: 0 auto;

} .blurb p {

 line-height: 1.8; 

} .blurb .curve {

 width: 33%; height: auto;
 min-width: 150px;
  
 
 border-radius: 50%;
 -webkit-shape-outside:circle();
 shape-outside:circle();

} .curve.left {

 margin-right:2rem;

} .curve.right {

 margin-left:2rem;

} .name {

font-size: 1.5em;
font-weight: bold;

} .left {

 float: left;

} .right {

 float: right;

} .textleft {

 text-align: left;

} .textright {

 text-align: right;
 padding-right: 5px;

}