Template:Evry/CSS

/* Evry iGEM team CSS (must go on top of our customized bootstrap) */ /* Adding some cool stuff. Bootstrap-like syntax, bootstrap-like colors, bootstrap-like style */ .bs-callout {

   padding: 20px;
   margin: 20px 0;
   border: 1px solid #eee;
   border-left-width: 5px;
   border-radius: 3px;

} .bs-callout h4 {

   margin-top: 0;
   margin-bottom: 5px;

} .bs-callout p:last-child {

   margin-bottom: 0;

} .bs-callout code {

   border-radius: 3px;

} .bs-callout+.bs-callout {

   margin-top: -5px;

} .bs-callout-default {

   border-left-color: #777;

} .bs-callout-default h4 {

   color: #777;

} .bs-callout-primary {

   border-left-color: #428bca;

} .bs-callout-primary h4 {

   color: #428bca;

} .bs-callout-success {

   border-left-color: #5cb85c;

} .bs-callout-success h4 {

   color: #5cb85c;

} .bs-callout-danger {

   border-left-color: #d9534f;

} .bs-callout-danger h4 {

   color: #d9534f;

} .bs-callout-warning {

   border-left-color: #f0ad4e;

} .bs-callout-warning h4 {

   color: #f0ad4e;

} .bs-callout-info {

   border-left-color: #5bc0de;

} .bs-callout-info h4 {

   color: #5bc0de;

}

/*

* Style used for the initial version of the wiki, not used anymore! *
*/

/* MOAR HEXAGONS */ /*.hexagon {

 position: relative;
 width: 120px;
 height: 100px;
 line-height: 100px;
 text-align: center;

}

.hexagon:before {

 position: absolute;
 content: "\2B21";
 font-size: 160px;
 z-index: 1;
 width: 100%; 
 height: 100%;
 left: 0;
 top: 0;  

}*/

/* centered elements */ .centered {

   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 100px; /* temporary to have small imgs */

}

/* Team page elements */ .col-people {

   cursor: pointer;

}

.col-people img {

   filter: contrast(100%) brightness(100%);
/*   transition: filter 0.2s ease 0s;*/
   -webkit-filter: contrast(100%) brightness(100%);

/* -webkit-transition: all 0.2s;

   -o-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;*/

}

.col-people p {

/*  transition: color 0.2s ease 0s;*/

}

.col-people:hover p {

  color: gray;
 /* transition: color 0.2s ease 0s;*/

}

.col-people:hover img {

   filter: contrast(110%) brightness(105%);
 /*  transition: filter 0.2s ease 0s;*/
   -webkit-filter: contrast(110%) brightness(105%);
/*   -webkit-transition: all 0.2s;
   -o-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;*/

} .active-people img, .active-people:hover img {

   filter: contrast(115%) brightness(110%);

/* transition: filter 0.2s ease 0s;*/

   -webkit-filter: contrast(115%) brightness(110%);
 /*  -webkit-transition: all 0.2s;
   -o-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;*/

}

.active-people p {

   color: gray;

}

/* Add space before row (used on sponsor page)*/ .top-spaced {

   margin-top:20px;

}

/* Sponsor pictures */ .sponsor-col{

 height:150px; //IE7fix
 line-height: 150px;

} .sponsor-img {

   width:100%;
   max-height:auto;
   filter: contrast(100%) brightness(100%);

/* transition: filter 0.2s ease 0s;*/

   -webkit-filter: contrast(100%) brightness(100%);

/* -webkit-transition: all 0.2s; */

 vertical-align: middle;
 margin-bottom:0.25em;

}

.sponsor-img:hover {

   filter: contrast(100%) brightness(110%);

/* transition: filter 0.2s ease 0s; */

   -webkit-filter: contrast(100%) brightness(110%);

/* -webkit-transition: all 0.2s; */ }

/* Notebook tree menu FTW */ .tree {

   min-height:20px;
   padding:10px;
   margin-bottom:20px;
   /*background-color:#fbfbfb;
   border:1px solid #999;
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
   -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)*/

} .tree li {

   list-style-type:none;
   margin:0;
   padding:10px 5px 0 5px;
   position:relative

} .tree li::before, .tree li::after {

   content:;
   left:-20px;
   position:absolute;
   right:auto

} .tree li::before {

   border-left:1px solid #999;
   bottom:50px;
   height:100%;
   top:0;
   width:1px

} .tree li::after {

   border-top:1px solid #999;
   height:20px;
   top:25px;
   width:25px

} .tree li span {

   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border:1px solid #999;
   border-radius:5px;
   display:inline-block;
   padding:3px 8px;
   text-decoration:none

} .tree li.parent_li>span {

   cursor:pointer

} .tree>ul>li::before, .tree>ul>li::after {

   border:0

} .tree li:last-child::before {

   height:30px

}

/* Scroll to top module css */

/* 'Scroll to top' div */

1. toTop {

   cursor: pointer;
   display: none;
   opacity: 0.7;
   width: 40px;
   height: 40px;
   position: fixed;
   bottom: 4px;
   right: 40px;

}

1. toTop:hover {

   transition: all 0.3s;
   opacity: 1;
   padding-bottom:55px;

}

.scrolltext { display:none;

   opacity: 1;
   font-size: 85%;
   width:100px;
   color: #808080;

}

/* Adding some more new CSS (trying a new layout, 30 of August) */

focus {

 outline: none;

}

.row {

 margin-right: 0;
 margin-left: 0;

}

.side-menu {

 position: fixed;
 width: 250px;
 height: calc(100% - 18px);
 background-color: #303f9f;

/* border-right: 1px solid #e7e7e7;*/

 transition: background-color 0.2s ease;

}

.side-menu .navbar {

 border: none;

}

.side-menu .nav li a, .side-menu .nav li a:focus { color: #E0E0E0; transition: color 0.2s ease; }

.side-menu .nav > li.active > a, .side-menu .nav > li > a:hover { color: white; background-color: #1a237e; transition: all 0.2s ease; }

.side-menu .nav > .active > a, .side-menu .nav > li.active > a, .side-menu .nav > .active > a:hover, .side-menu .nav > .active > a:focus { background-color: #1a237e; color: white; }

.side-menu .navbar-header {

 width: 100%;

/* border-bottom: 1px solid #e7e7e7; */ }

.side-menu .navbar-nav .active a {

 background-color: transparent;

/* margin-left: 1px; */

 border-left: 4px solid #7986cb;
 background-color:#1a237e;

} .side-menu .navbar-nav li {

 display: block;
 width: 100%;
 background-color: #303f9f;
/* border-bottom: 1px solid #e7e7e7;*/

} .side-menu .navbar-nav li a {

 padding: 15px;

} .side-menu .navbar-nav li a .glyphicon, .side-menu .navbar-nav li a .fa {

 padding-right: 10px;

}

.side-menu .dropdown li { padding-left:0;}

.side-menu .dropdown {

 border: 0;
 margin-bottom: 0;
 border-radius: 0;

/* background-color: green;*/

 box-shadow: none;

} .side-menu .dropdown .caret {

 float: right;
 margin: 9px 5px 0;

} .side-menu .dropdown .indicator {

 float: right;

} .side-menu .dropdown > a {

 /*border-bottom: 1px solid #e7e7e7;*/

} .side-menu .dropdown .panel-body {

 padding: 0;
 background-color: ;

} .side-menu .dropdown .panel-body .navbar-nav {

 width: 100%;

} .side-menu .dropdown .panel-body .navbar-nav li {

 padding-left: 0px;
/* border-bottom: 1px solid #e7e7e7;*/

} .side-menu .dropdown .panel-body .navbar-nav li > a { /*padding-left: 45px;*/ padding: 10px 10px 10px 52px; } .side-menu .dropdown .panel-body .navbar-nav li:last-child {

 border-bottom: none;

} .side-menu .dropdown .panel-body .panel > a {

 margin-left: -20px;
 padding-left: 35px;

} .side-menu .dropdown .panel-body .panel-body {

 margin-left: -15px;

} .side-menu .dropdown .panel-body .panel-body li {

 padding-left: 30px;

} .side-menu .dropdown .panel-body .panel-body li:last-child {

/* border-bottom: 1px solid #e7e7e7;*/

} .side-menu #search-trigger {

 background-color: #f3f3f3;
 border: 0;
 border-radius: 0;
 position: absolute;
 top: 0;
 right: 0;
 padding: 15px 18px;

} .side-menu .brand-name-wrapper {

 min-height: 100px;
 background-color: #303f9f;

} .side-menu .brand-name-wrapper .navbar-brand {

 display: block;

} .side-menu #search {

 position: relative;
 z-index: 1000;

} .side-menu #search .panel-body {

 padding: 0;

} .side-menu #search .panel-body .navbar-form {

 padding: 0;
 padding-right: 50px;
 width: 100%;
 margin: 0;
 position: relative;
 /*border-top: 1px solid #e7e7e7;*/

} .side-menu #search .panel-body .navbar-form .form-group {

 width: 100%;
 position: relative;

} .side-menu #search .panel-body .navbar-form input {

 border: 0;
 border-radius: 0;
 box-shadow: none;
 width: 100%;
 height: 50px;

} .side-menu #search .panel-body .navbar-form .btn {

 position: absolute;
 right: 0;
 top: 0;
 border: 0;
 border-radius: 0;
 background-color: #f3f3f3;
 padding: 15px 18px;

} /* Main body section */ .side-body {

 margin-left: 250px;

}

 .side-menu .navbar .navbar-header {
 background-color: #1a237e;
 border: none;
 }
 

.side-menu .navbar .navbar-header a{ color: white;

 }

/* small screen */ @media (max-width: 768px) {

 .side-menu {
   position: relative;
   width: 100%;
   height: 0;
   border-right: 0;

z-index: 1000;

 }
 .side-menu .brand-name-wrapper .navbar-brand {

/* display: inline-block; */ /* display: none; */

 }

.side-menu .brand-name-wrapper {

  display: none;

}

 /* Slide in animation */
 @-moz-keyframes slidein {
   0% {
     left: -250px;
   }
   100% {
     left: 10px;
   }
 }
 @-webkit-keyframes slidein {
   0% {
     left: -250px;
   }
   100% {
     left: 10px;
   }
 }
 @keyframes slidein {
   0% {
     left: -250px;
   }
   100% {
     left: 10px;
   }
 }
 @-moz-keyframes slideout {
   0% {
     left: 0;
   }
   100% {
     left: -250px;
   }
 }
 @-webkit-keyframes slideout {
   0% {
     left: 0;
   }
   100% {
     left: -250px;
   }
 }
 @keyframes slideout {
   0% {
     left: 0;
   }
   100% {
     left: -250px;
   }
 }
 /* Slide side menu*/
 /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
 .side-menu-container > .navbar-nav.slide-in {
   -moz-animation: slidein 200ms forwards;
   -o-animation: slidein 200ms forwards;
   -webkit-animation: slidein 200ms forwards;
   animation: slidein 200ms forwards;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 .side-menu-container > .navbar-nav {
   /* Add position:absolute for scrollable menu -> see top comment */
   position: fixed;
   left: -250px;
   width: 250px;
   top: 43px;
   height: 100%;
   border-right: 1px solid #e7e7e7;
   background-color: #303f9f;
   -moz-animation: slideout 200ms forwards;
   -o-animation: slideout 200ms forwards;
   -webkit-animation: slideout 200ms forwards;
   animation: slideout 200ms forwards;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 /* Uncomment for scrollable menu -> see top comment */
 /*.absolute-wrapper{
       width:285px;
       -moz-animation: slideout 200ms forwards;
       -o-animation: slideout 200ms forwards;
       -webkit-animation: slideout 200ms forwards;
       animation: slideout 200ms forwards;
       -webkit-transform-style: preserve-3d;
       transform-style: preserve-3d;
   }*/
 @-moz-keyframes bodyslidein {
   0% {
     left: 0;
   }
   100% {
     left: 250px;
   }
 }
 @-webkit-keyframes bodyslidein {
   0% {
     left: 0;
   }
   100% {
     left: 250px;
   }
 }
 @keyframes bodyslidein {
   0% {
     left: 0;
   }
   100% {
     left: 250px;
   }
 }
 @-moz-keyframes bodyslideout {
   0% {
     left: 250px;
   }
   100% {
     left: 0;
   }
 }
 @-webkit-keyframes bodyslideout {
   0% {
     left: 250px;
   }
   100% {
     left: 0;
   }
 }
 @keyframes bodyslideout {
   0% {
     left: 250px;
   }
   100% {
     left: 0;
   }
 }
 /* Slide side body*/
 .side-body {
   margin-left: 5px;
   margin-top: 70px;
   position: relative;
   -moz-animation: bodyslideout 200ms forwards;
   -o-animation: bodyslideout 200ms forwards;
   -webkit-animation: bodyslideout 200ms forwards;
   animation: bodyslideout 200ms forwards;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 .body-slide-in {
   -moz-animation: bodyslidein 200ms forwards;
   -o-animation: bodyslidein 200ms forwards;
   -webkit-animation: bodyslidein 200ms forwards;
   animation: bodyslidein 200ms forwards;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 /* Hamburger */
 .navbar-toggle {
   border: 0;
   float: left;
   padding: 18px;
   margin: 0;
   border-radius: 0;
   background-color:  #c5cae9;
 }

.navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; }

 /* Search */
 #search .panel-body .navbar-form {
   border-bottom: 0;
 }
 #search .panel-body .navbar-form .form-group {
   margin: 0;
 }
 .navbar-	 {
   /* this is probably redundant */
   position: fixed;
   z-index: 3;
   background-color: #303f9f;
 }
 /* Dropdown tweak */
 #dropdown .panel-body .navbar-nav {
   margin: 0;
 }

} /* Fonts !!! */ h1,h2,h3,h4,h5,h6 { font-family: 'Hind', sans-serif; font-weight: 400; }

.page-header { /* font-size: 110%!important; */ } p, li { font-family: 'Open Sans', sans-serif; font-weight: 400; }

.side-menu a { /*text-transform:uppercase;*/ }

.side-footer {

 width: 100%;
 position: absolute;
 bottom: 0;

border-top: 4px #7986cb solid; padding-top: 15px; /* height: 0px; */

 bottom: 0;
 background-color: #1a237e;

}

/* Using a star (*) here is overkill and bad practice. But it is nearly 3 am. */ .side-menu .nav li.current-panel, .side-menu .nav li.current-panel * { background-color: #1a237e; }

.side-menu .navbar-brand {

   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   text-align: center;
   margin: auto;

padding-top: 5px; }

/* Footer icons ftw */ .side-footer a {

   padding-right: 0!important;

}

.side-footer a span, .side-footer a:visited span { color: #7986cb; transition: all 0.2s ease; }

.side-footer a span:hover { color: white; transition: all 0.2s ease; }

.side-footer a span:hover .fa-inverse { color: #303f9f; transition: color 0.2s ease; }

h1 {  font-weight: 400 !important; }

.side-body a, .side-body a:visited {

   color: #1ABC9C;
   text-decoration: none;
   padding-bottom: 1px;
   border-bottom: 1px #DDDDDD solid;
   transition: border 0.2s ease;

}

.side-body a:hover, .side-body a:focus { border-bottom: 1px #1ABC9C solid; transition: border 0.2s ease; }

.page-section { margin-bottom: 45px; }

/* Reference list format */ .references { line-height: 1.6em; }

body { line-height: 1.5em; }

/* Top navigation menu */

1. top-menu {

   z-index: 1;
   background: white;

/* height: 40px; */

   width: 100%;

}

1. top-menu ul {

display: block; text-align: center; }

1. top-menu li {

   display: inline-block;
   padding: 0;
   margin: 0;
   list-style: none;

}

1. top-menu a {

   text-decoration: none;
   border-bottom: 0;
   display: block;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 15px;
   padding-right: 15px;
   text-align: center;
   -webkit-transition: .2s all ease-out;
   -moz-transition: .2s all ease-out;
   transition: .2s all ease-out;
   border-top: 3px solid white;
   color: #aaa;
   text-decoration: none;

}

1. top-menu a:hover {

   color: #1a237e;

text-decoration: none; border-bottom: 0; }

1. top-menu li.active a {

   border-bottom: 4px solid #1a237e;
   color: #1a237e;

}

1. top-menu.stick {

 position: fixed;
 top: 18px; /* Added 18px for igem bar */
 background-color: rgba(255, 255, 255, 1);
 z-index: 10000;

}