|
|
| Line 1: |
Line 1: |
| − | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
| + | body{background-color: blue} |
| − | /* ==========================================================================
| + | nav ul ul { |
| − | HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
| + | display: none; |
| − | ========================================================================== */
| + | |
| − | html,
| + | |
| − | button,
| + | |
| − | input,
| + | |
| − | select,
| + | |
| − | textarea {
| + | |
| − | color: #222;
| + | |
| | } | | } |
| − | body {
| + | |
| − | font-size: 1em;
| + | nav ul li:hover > ul { |
| − | line-height: 1.4;
| + | display: block; |
| | + | } |
| | + | nav ul { |
| | + | background: #efefef; |
| | + | background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); |
| | + | background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); |
| | + | background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); |
| | + | box-shadow: 0px 0px 9px rgba(0,0,0,0.15); |
| | + | padding: 0 20px; |
| | + | border-radius: 10px; |
| | + | list-style: none; |
| | + | position: relative; |
| | + | display: inline-table; |
| | } | | } |
| − | ::-moz-selection { | + | nav ul:after { |
| − | background: #b3d4fc;
| + | content: ""; clear: both; display: block; |
| − | text-shadow: none;
| + | } |
| | + | nav ul li { |
| | + | float: left; |
| | } | | } |
| − | ::selection { | + | nav ul li:hover { |
| − | background: #b3d4fc;
| + | background: #4b545f; |
| − | text-shadow: none;
| + | background: linear-gradient(top, #4f5964 0%, #5f6975 40%); |
| | + | background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); |
| | + | background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); |
| | + | } |
| | + | nav ul li:hover a { |
| | + | color: #fff; |
| | + | } |
| | + | |
| | + | nav ul li a { |
| | + | display: block; padding: 25px 40px; |
| | + | color: #757575; text-decoration: none; |
| | + | } |
| | + | nav ul ul { |
| | + | background: #5f6975; border-radius: 0px; padding: 0; |
| | + | position: absolute; top: 100%; |
| | } | | } |
| − | hr {
| + | nav ul ul li { |
| − | display: block;
| + | float: none; |
| − | height: 1px;
| + | border-top: 1px solid #6b727c; |
| − | border: 0;
| + | border-bottom: 1px solid #575f6a; |
| − | border-top: 1px solid #ccc;
| + | position: relative; |
| − | margin: 1em 0;
| + | } |
| − | padding: 0;
| + | nav ul ul li a { |
| | + | padding: 15px 40px; |
| | + | color: #fff; |
| | + | } |
| | + | nav ul ul li a:hover { |
| | + | background: #4b545f; |
| | + | } |
| | + | nav ul ul ul { |
| | + | position: absolute; left: 100%; top:0; |
| | } | | } |
| − | img {
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − | fieldset {
| |
| − | border: 0;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − | textarea {
| |
| − | resize: vertical;
| |
| − | }
| |
| − | .chromeframe {
| |
| − | margin: 0.2em 0;
| |
| − | background: #ccc;
| |
| − | color: #000;
| |
| − | padding: 0.2em 0;
| |
| − | }
| |
| − | /* ==========================================================================
| |
| − | Helper classes
| |
| − | ========================================================================== */
| |
| − | .hidden {
| |
| − | display: none !important;
| |
| − | visibility: hidden;
| |
| − | }
| |
| − | .visuallyhidden {
| |
| − | border: 0;
| |
| − | clip: rect(0 0 0 0);
| |
| − | height: 1px;
| |
| − | margin: -1px;
| |
| − | overflow: hidden;
| |
| − | padding: 0;
| |
| − | position: absolute;
| |
| − | width: 1px;
| |
| − | }
| |
| − | .visuallyhidden.focusable:active,
| |
| − | .visuallyhidden.focusable:focus {
| |
| − | clip: auto;
| |
| − | height: auto;
| |
| − | margin: 0;
| |
| − | overflow: visible;
| |
| − | position: static;
| |
| − | width: auto;
| |
| − | }
| |
| − | .invisible {
| |
| − | visibility: hidden;
| |
| − | }
| |
| − | .clearfix:before,
| |
| − | .clearfix:after {
| |
| − | content: " ";
| |
| − | display: table;
| |
| − | }
| |
| − | .clearfix:after {
| |
| − | clear: both;
| |
| − | }
| |
| − | .clearfix {
| |
| − | *zoom: 1;
| |
| − | }
| |
| − | .text-muted {
| |
| − | color: #848b8f;
| |
| − | }
| |
| − | /* ==========================================================================
| |
| − | Forms
| |
| − | ========================================================================== */
| |
| − | form input[type="text"],
| |
| − | form input[type="email"],
| |
| − | form input[type="number"],
| |
| − | form input[type="password"] {
| |
| − | background: #fff;
| |
| − | color: #777;
| |
| − | border: 1px solid #dddddd;
| |
| − | padding: 12px 15px;
| |
| − | width: 100%;
| |
| − | -webkit-transition: all 250ms ease-in-out;
| |
| − | -moz-transition: all 250ms ease-in-out;
| |
| − | -o-transition: all 250ms ease-in-out;
| |
| − | transition: all 250ms ease-in-out;
| |
| − | }
| |
| − | form input[type="text"]:focus,
| |
| − | form input[type="email"]:focus,
| |
| − | form input[type="number"]:focus,
| |
| − | form input[type="password"]:focus {
| |
| − | -webkit-box-shadow: none !important;
| |
| − | -moz-box-shadow: none !important;
| |
| − | box-shadow: none !important;
| |
| − | outline: none !important;
| |
| − | border-color: #f57e37;
| |
| − | }
| |
| − | label {
| |
| − | font-weight: normal;
| |
| − | }
| |
| − | /*
| |
| − | * jQuery FlexSlider v2.2.0
| |
| − | * http://www.woothemes.com/flexslider/
| |
| − | *
| |
| − | * Copyright 2012 WooThemes
| |
| − | * Free to use under the GPLv2 license.
| |
| − | * http://www.gnu.org/licenses/gpl-2.0.html
| |
| − | *
| |
| − | * Contributing author: Tyler Smith (@mbmufffin)
| |
| − | */
| |
| − | /* Browser Resets
| |
| − | *********************************/
| |
| − | .flex-container a:active,
| |
| − | .flexslider a:active,
| |
| − | .flex-container a:focus,
| |
| − | .flexslider a:focus {
| |
| − | outline: none;
| |
| − | }
| |
| − | .slides,
| |
| − | .flex-control-nav,
| |
| − | .flex-direction-nav {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | list-style: none;
| |
| − | }
| |
| − | /* Icon Fonts
| |
| − | *********************************/
| |
| − | /* Font-face Icons */
| |
| − | @font-face {
| |
| − | font-family: 'flexslider-icon';
| |
| − | src: url('../fonts/flexslider-icon.eot');
| |
| − | src: url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
| |
| − | font-weight: normal;
| |
| − | font-style: normal;
| |
| − | }
| |
| − | /* FlexSlider Necessary Styles
| |
| − | *********************************/
| |
| − | .flexslider {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − | .flexslider .slides > li {
| |
| − | display: none;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | }
| |
| − | /* Hide the slides before the JS is loaded. Avoids image jumping */
| |
| − | .flexslider .slides img {
| |
| − | width: 100%;
| |
| − | display: block;
| |
| − | }
| |
| − | .flex-pauseplay span {
| |
| − | text-transform: capitalize;
| |
| − | }
| |
| − | /* Clearfix for the .slides element */
| |
| − | .slides:after {
| |
| − | content: ".";
| |
| − | display: block;
| |
| − | clear: both;
| |
| − | visibility: hidden;
| |
| − | line-height: 0;
| |
| − | height: 0;
| |
| − | }
| |
| − | html[xmlns] .slides {
| |
| − | display: block;
| |
| − | }
| |
| − | * html .slides {
| |
| − | height: 1%;
| |
| − | }
| |
| − | /* No JavaScript Fallback */
| |
| − | /* If you are not using another script, such as Modernizr, make sure you
| |
| − | * include js that eliminates this class on page load */
| |
| − | .no-js .slides > li:first-child {
| |
| − | display: block;
| |
| − | }
| |
| − | /* FlexSlider Default Theme
| |
| − | *********************************/
| |
| − | .flexslider {
| |
| − | margin: 0;
| |
| − | background: transparent;
| |
| − | position: relative;
| |
| − | zoom: 1;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .flex-viewport {
| |
| − | max-height: 2000px;
| |
| − | -webkit-transition: all 1s ease;
| |
| − | -moz-transition: all 1s ease;
| |
| − | -o-transition: all 1s ease;
| |
| − | transition: all 1s ease;
| |
| − | }
| |
| − | .loading .flex-viewport {
| |
| − | max-height: 300px;
| |
| − | }
| |
| − | .flexslider .slides {
| |
| − | zoom: 1;
| |
| − | }
| |
| − | .carousel li {
| |
| − | margin-right: 5px;
| |
| − | }
| |
| − | /* Direction Nav */
| |
| − | .flex-direction-nav {
| |
| − | *height: 0;
| |
| − | }
| |
| − | .flex-direction-nav a {
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | width: 40px;
| |
| − | height: 40px;
| |
| − | margin: -20px 0 0;
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | z-index: 10;
| |
| − | overflow: hidden;
| |
| − | opacity: 0;
| |
| − | cursor: pointer;
| |
| − | -webkit-transition: all .3s ease;
| |
| − | -moz-transition: all .3s ease;
| |
| − | transition: all .3s ease;
| |
| − | }
| |
| − | .flex-direction-nav .flex-prev {
| |
| − | left: -50px;
| |
| − | }
| |
| − | .flex-direction-nav .flex-next {
| |
| − | right: -50px;
| |
| − | text-align: right;
| |
| − | }
| |
| − | .flexslider:hover .flex-prev {
| |
| − | opacity: 1;
| |
| − | left: 30px;
| |
| − | }
| |
| − | .flexslider:hover .flex-next {
| |
| − | opacity: 1;
| |
| − | right: 30px;
| |
| − | }
| |
| − | .flexslider:hover .flex-next:hover,
| |
| − | .flexslider:hover .flex-prev:hover {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .flex-direction-nav .flex-disabled {
| |
| − | opacity: 0!important;
| |
| − | filter: alpha(opacity=0);
| |
| − | cursor: default;
| |
| − | }
| |
| − | .flex-direction-nav a:before {
| |
| − | font-family: "flexslider-icon";
| |
| − | color: #fff;
| |
| − | font-size: 24px;
| |
| − | line-height: 1;
| |
| − | display: inline-block;
| |
| − | content: '\f001';
| |
| − | }
| |
| − | .flex-direction-nav a.flex-next:before {
| |
| − | content: '\f002';
| |
| − | }
| |
| − | /* Pause/Play */
| |
| − | .flex-pauseplay a {
| |
| − | display: block;
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | position: absolute;
| |
| − | bottom: 5px;
| |
| − | left: 10px;
| |
| − | opacity: 0.8;
| |
| − | z-index: 10;
| |
| − | overflow: hidden;
| |
| − | cursor: pointer;
| |
| − | color: #000;
| |
| − | }
| |
| − | .flex-pauseplay a:before {
| |
| − | font-family: "flexslider-icon";
| |
| − | font-size: 20px;
| |
| − | display: inline-block;
| |
| − | content: '\f004';
| |
| − | }
| |
| − | .flex-pauseplay a:hover {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .flex-pauseplay a.flex-play:before {
| |
| − | content: '\f003';
| |
| − | }
| |
| − | /* Control Nav */
| |
| − | .flex-control-nav {
| |
| − | width: 100%;
| |
| − | position: absolute;
| |
| − | bottom: -40px;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .flex-control-nav li {
| |
| − | margin: 0 6px;
| |
| − | display: inline-block;
| |
| − | zoom: 1;
| |
| − | *display: inline;
| |
| − | }
| |
| − | .flex-control-paging li a {
| |
| − | width: 11px;
| |
| − | height: 11px;
| |
| − | display: block;
| |
| − | background: #666;
| |
| − | background: rgba(0, 0, 0, 0.5);
| |
| − | cursor: pointer;
| |
| − | text-indent: -9999px;
| |
| − | -webkit-border-radius: 20px;
| |
| − | -moz-border-radius: 20px;
| |
| − | -o-border-radius: 20px;
| |
| − | border-radius: 20px;
| |
| − | -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
| |
| − | -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
| |
| − | -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
| |
| − | box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
| |
| − | }
| |
| − | .flex-control-paging li a:hover {
| |
| − | background: #333;
| |
| − | background: rgba(0, 0, 0, 0.7);
| |
| − | }
| |
| − | .flex-control-paging li a.flex-active {
| |
| − | background: #000;
| |
| − | background: rgba(0, 0, 0, 0.9);
| |
| − | cursor: default;
| |
| − | }
| |
| − | .flex-control-thumbs {
| |
| − | margin: 5px 0 0;
| |
| − | position: static;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .flex-control-thumbs li {
| |
| − | width: 25%;
| |
| − | float: left;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .flex-control-thumbs img {
| |
| − | width: 100%;
| |
| − | display: block;
| |
| − | opacity: .7;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | .flex-control-thumbs img:hover {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .flex-control-thumbs .flex-active {
| |
| − | opacity: 1;
| |
| − | cursor: default;
| |
| − | }
| |
| − | @media screen and (max-width: 860px) {
| |
| − | .flex-direction-nav .flex-prev {
| |
| − | opacity: 1;
| |
| − | left: 10px;
| |
| − | }
| |
| − | .flex-direction-nav .flex-next {
| |
| − | opacity: 1;
| |
| − | right: 10px;
| |
| − | }
| |
| − | }
| |
| − | #lightbox {
| |
| − | cursor: pointer;
| |
| − | position: fixed;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | background: #000000;
| |
| − | /* IE Fallback (Solid Colour) */
| |
| − | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);
| |
| − | background: rgba(0, 0, 0, 0.7);
| |
| − | -webkit-filter: none !important;
| |
| − | z-index: 99999;
| |
| − | }
| |
| − | #lightbox img {
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | border: 5px solid #fff;
| |
| − | box-shadow: 0 0 20px #000;
| |
| − | border-radius: 1px;
| |
| − | }
| |
| − | body.blurred > * {
| |
| − | -webkit-filter: blur(2px);
| |
| − | }
| |
| − | .lightbox-loading {
| |
| − | background: url(https://static.igem.org/mediawiki/2015/6/69/EPF_Lausanne_Loading.gif) center center no-repeat;
| |
| − | width: 31px;
| |
| − | height: 31px;
| |
| − | margin: -16px 0 0 -16px;
| |
| − | position: absolute;
| |
| − | top: 48%;
| |
| − | left: 50%;
| |
| − | }
| |
| − | .lightbox-caption {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | left: 0;
| |
| − | bottom: 0;
| |
| − | width: 100%;
| |
| − | text-align: center;
| |
| − | z-index: 1000;
| |
| − | background: #000;
| |
| − | background: rgba(0, 0, 0, 0.7);
| |
| − | }
| |
| − | .lightbox-caption p {
| |
| − | margin: 0 auto;
| |
| − | max-width: 70%;
| |
| − | display: inline-block;
| |
| − | *display: inline;
| |
| − | *zoom: 1;
| |
| − | padding: 10px;
| |
| − | color: #fff;
| |
| − | font-size: 12px;
| |
| − | line-height: 18px;
| |
| − | }
| |
| − | .lightbox-button {
| |
| − | position: absolute;
| |
| − | z-index: 9999;
| |
| − | background: no-repeat center center;
| |
| − | width: 32px;
| |
| − | height: 32px;
| |
| − | opacity: 0.4;
| |
| − | -webkit-transition: all 0.3s;
| |
| − | -moz-transition: all 0.3s;
| |
| − | -ms-transition: all 0.3s;
| |
| − | transition: all 0.3s;
| |
| − | }
| |
| − | .lightbox-button:hover,
| |
| − | .lightbox-button:focus {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: scale(1.4);
| |
| − | -moz-transform: scale(1.4);
| |
| − | -ms-transform: scale(1.4);
| |
| − | transform: scale(1.4);
| |
| − | }
| |
| − | .lightbox-close {
| |
| − | right: 10px;
| |
| − | top: 10px;
| |
| − | background-image: url('https://static.igem.org/mediawiki/2015/7/71/EPF_Lausanne_Close.png');
| |
| − | }
| |
| − | .lightbox-next {
| |
| − | right: 10px;
| |
| − | top: 48%;
| |
| − | background-image: url('https://static.igem.org/mediawiki/2015/5/5f/EPF_Lausanne_Next.png');
| |
| − | }
| |
| − | .lightbox-previous {
| |
| − | left: 10px;
| |
| − | top: 48%;
| |
| − | background-image: url('https://static.igem.org/mediawiki/2015/6/62/EPF_Lausanne_Previous.png');
| |
| − | }
| |
| − | /* ==========================================================================
| |
| − | Print styles
| |
| − | ========================================================================== */
| |
| − | @media print {
| |
| − | * {
| |
| − | background: transparent !important;
| |
| − | color: #000 !important;
| |
| − | /* Black prints faster: h5bp.com/s */
| |
| − | box-shadow: none !important;
| |
| − | text-shadow: none !important;
| |
| − | }
| |
| − | a,
| |
| − | a:visited {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − | a[href]:after {
| |
| − | content: " (" attr(href) ")";
| |
| − | }
| |
| − | abbr[title]:after {
| |
| − | content: " (" attr(title) ")";
| |
| − | }
| |
| − | /*
| |
| − | * Don't show links for images, or javascript/internal links
| |
| − | */
| |
| − | .ir a:after,
| |
| − | a[href^="javascript:"]:after,
| |
| − | a[href^="#"]:after {
| |
| − | content: "";
| |
| − | }
| |
| − | pre,
| |
| − | blockquote {
| |
| − | border: 1px solid #999;
| |
| − | page-break-inside: avoid;
| |
| − | }
| |
| − | thead {
| |
| − | display: table-header-group;
| |
| − | /* h5bp.com/t */
| |
| − | }
| |
| − | tr,
| |
| − | img {
| |
| − | page-break-inside: avoid;
| |
| − | }
| |
| − | img {
| |
| − | max-width: 100% !important;
| |
| − | }
| |
| − | @page {
| |
| − | margin: 0.5cm;
| |
| − | }
| |
| − | p,
| |
| − | h2,
| |
| − | h3 {
| |
| − | orphans: 3;
| |
| − | widows: 3;
| |
| − | }
| |
| − | h2,
| |
| − | h3 {
| |
| − | page-break-after: avoid;
| |
| − | }
| |
| − | }
| |
| − | /* ==========================================================================
| |
| − | Structure & Defaults
| |
| − | ========================================================================== */
| |
| − | html,
| |
| − | body {
| |
| − | font-size: 100%;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | }
| |
| − | body {
| |
| − | background: #ffffff;
| |
| − | color: #777777;
| |
| − | font-size: 13px;
| |
| − | line-height: 24px;
| |
| − | font-family: 'Open Sans', sans-serif;
| |
| − | }
| |
| − | a {
| |
| − | color: #39c8e2;
| |
| − | text-decoration: none !important;
| |
| − | -webkit-transition: color 200ms ease-in-out;
| |
| − | -moz-transition: color 200ms ease-in-out;
| |
| − | -o-transition: color 200ms ease-in-out;
| |
| − | transition: color 200ms ease-in-out;
| |
| − | }
| |
| − | a:hover {
| |
| − | color: #232323;
| |
| − | }
| |
| − | h1,
| |
| − | h2,
| |
| − | h3,
| |
| − | h4,
| |
| − | h5,
| |
| − | h6 {
| |
| − | font-family: 'Open Sans', sans-serif;
| |
| − | font-weight: 500;
| |
| − | }
| |
| − | /* ==========================================================================
| |
| − | Header
| |
| − | ========================================================================== */
| |
| − | .navbar {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − | .navbar-default .navbar-toggle {
| |
| − | background-color: #fff;
| |
| − | border-color: #fff;
| |
| − | font-size: 14px;
| |
| − | color: #39c8e2;
| |
| − | margin-top: 18px;
| |
| − | -webkit-border-radius: 0;
| |
| − | -webkit-background-clip: padding-box;
| |
| − | -moz-border-radius: 0;
| |
| − | -moz-background-clip: padding;
| |
| − | border-radius: 0;
| |
| − | background-clip: padding-box;
| |
| − | }
| |
| − | .navbar-default .navbar-toggle:hover,
| |
| − | .navbar-default .navbar-toggle:focus {
| |
| − | background-color: #fff;
| |
| − | border: 1px solid #fff;
| |
| − | }
| |
| − | .navbar-default .navbar-collapse,
| |
| − | .navbar-default .navbar-form {
| |
| − | border-color: #1eb0ca;
| |
| − | }
| |
| − | .navbar-default {
| |
| − | background-color: transparent;
| |
| − | border-color: transparent;
| |
| − | }
| |
| − | .navbar-header {
| |
| − | padding-bottom: 15px;
| |
| − | }
| |
| − | .navbar-default .navbar-nav > li > a {
| |
| − | color: #ffffff;
| |
| − | text-transform: uppercase;
| |
| − | font-size: 14px;
| |
| − | }
| |
| − | .navbar-default .navbar-nav > li > a:hover {
| |
| − | color: #fff;
| |
| − | }
| |
| − | .navbar-default .navbar-nav > li {
| |
| − | border-right: 1px solid #1eb0ca;
| |
| − | padding: 10px;
| |
| − | }
| |
| − | .navbar-default .navbar-nav > li:first-child {
| |
| − | border-left: 1px solid #1eb0ca;
| |
| − | }
| |
| − | .navbar-default .navbar-brand {
| |
| − | text-transform: uppercase;
| |
| − | font-size: 32px;
| |
| − | font-weight: 700;
| |
| − | color: #fff;
| |
| − | padding-top: 25px;
| |
| − | padding-bottom: 25px;
| |
| − | }
| |
| − | .navbar-default .navbar-brand:hover {
| |
| − | color: #fff;
| |
| − | }
| |
| − | .site-header {
| |
| − | background-color: #39c8e2;
| |
| − | color: #ffffff;
| |
| − | }
| |
| − | .site-slider {
| |
| − | position: relative;
| |
| − | z-index: 16;
| |
| − | }
| |
| − | .site-slider .slide {
| |
| − | position: relative;
| |
| − | }
| |
| − | .site-slider .overlay {
| |
| − | background-color: rgba(0, 0, 0, 0.3);
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | z-index: 9;
| |
| − | }
| |
| − | .site-slider .slider-caption {
| |
| − | position: absolute;
| |
| − | z-index: 12;
| |
| − | width: 100%;
| |
| − | top: 30%;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .site-slider .slider-caption .title {
| |
| − | width: 276px;
| |
| − | margin: 0 auto;
| |
| − | border: 4px solid #fff;
| |
| − | padding: 40px 40px 20px 40px;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .site-slider .slider-caption .title h2 {
| |
| − | margin: 0 0 20px 0;
| |
| − | font-size: 28px;
| |
| − | color: #fff;
| |
| − | text-transform: uppercase;
| |
| − | font-weight: 700;
| |
| − | }
| |
| − | .site-slider .slider-caption .slider-button {
| |
| − | color: #fff;
| |
| − | margin-top: 60px;
| |
| − | display: inline-block;
| |
| − | border: 2px solid #fff;
| |
| − | padding: 7px 45px;
| |
| − | text-transform: uppercase;
| |
| − | font-weight: 700;
| |
| − | -webkit-border-radius: 3px;
| |
| − | -webkit-background-clip: padding-box;
| |
| − | -moz-border-radius: 3px;
| |
| − | -moz-background-clip: padding;
| |
| − | border-radius: 3px;
| |
| − | background-clip: padding-box;
| |
| − | }
| |
| − | .first-section {
| |
| − | color: #fff;
| |
| − | position: relative;
| |
| − | z-index: 17;
| |
| − | padding: 80px 0;
| |
| − | margin-top: -86px;
| |
| − | background: url('https://static.igem.org/mediawiki/2015/2/25/EPF_Lausanne_Bg1.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .first-section h3 {
| |
| − | text-transform: uppercase;
| |
| − | font-weight: 700;
| |
| − | font-size: 24px;
| |
| − | }
| |
| − | .first-section .image-holder {
| |
| − | margin-top: 50px;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .second-section {
| |
| − | color: #333333;
| |
| − | position: relative;
| |
| − | z-index: 18;
| |
| − | padding: 80px 0;
| |
| − | margin-top: -40px;
| |
| − | background: url('https://static.igem.org/mediawiki/2015/6/68/EPF_Lausanne_Bg2.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .second-section .col-md-3 {
| |
| − | margin-top: 60px;
| |
| − | }
| |
| − | .second-section h4 {
| |
| − | font-size: 16px;
| |
| − | font-weight: 600;
| |
| − | }
| |
| − | .third-section {
| |
| − | color: #fff;
| |
| − | position: relative;
| |
| − | z-index: 19;
| |
| − | padding: 80px 0 20px 0;
| |
| − | margin-top: -20px;
| |
| − | background: url('https://static.igem.org/mediawiki/2015/d/d7/EPF_Lausanne_Bg3.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .third-section h2 {
| |
| − | color: #39c8e2;
| |
| − | font-weight: 700;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .third-section span {
| |
| − | display: block;
| |
| − | margin-bottom: 30px;
| |
| − | }
| |
| − | .third-section .col-md-6 {
| |
| − | margin-bottom: 60px;
| |
| − | }
| |
| − | .third-section ol {
| |
| − | margin-bottom: 30px;
| |
| − | }
| |
| − | .third-section ol li {
| |
| − | color: #39c8e2;
| |
| − | }
| |
| − | .third-section ol li h4 {
| |
| − | font-size: 15px;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .third-section ol li p {
| |
| − | margin: 0 0 20px 20px;
| |
| − | color: #fff;
| |
| − | }
| |
| − | .third-section ol li ol {
| |
| − | margin: 0 0 30px 20px;
| |
| − | }
| |
| − | .third-section ol.no-color li {
| |
| − | color: #fff;
| |
| − | }
| |
| − | .fourth-section {
| |
| − | color: #fff;
| |
| − | position: relative;
| |
| − | z-index: 19;
| |
| − | padding: 150px 0;
| |
| − | margin-top: -50px;
| |
| − | background: url('https://static.igem.org/mediawiki/2015/2/26/EPF_Lausanne_Bg4.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .fourth-section h2 {
| |
| − | font-size: 32px;
| |
| − | text-transform: uppercase;
| |
| − | font-weight: 700;
| |
| − | margin: 0 0 20px 0;
| |
| − | }
| |
| − | .fourth-section a {
| |
| − | font-size: 18px;
| |
| − | }
| |
| − | .fourth-section a:hover {
| |
| − | color: #39c8e2;
| |
| − | }
| |
| − | .page-h {
| |
| − | background: url('https://static.igem.org/mediawiki/2015/a/ad/EPF_Lausanne_Headerbg.png') no-repeat bottom center;
| |
| − | background-size: cover;
| |
| − | padding: 60px 0;
| |
| − | }
| |
| − | .page-h h3 {
| |
| − | font-size: 28px;
| |
| − | color: #fff;
| |
| − | text-transform: uppercase;
| |
| − | font-weight: 600;
| |
| − | }
| |
| − | .filter {
| |
| − | background: url('https://static.igem.org/mediawiki/2015/e/e6/EPF_Lausanne_Filterbg.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | padding: 50px 0;
| |
| − | margin-top: -60px;
| |
| − | }
| |
| − | .filter ul {
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | list-style: none;
| |
| − | }
| |
| − | .filter ul li {
| |
| − | display: inline-block;
| |
| − | margin: 0 20px;
| |
| − | color: #fff;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | .filter ul li.active {
| |
| − | color: #39c8e2;
| |
| − | }
| |
| − | .products {
| |
| − | background: url('https://static.igem.org/mediawiki/2015/9/92/EPF_Lausanne_Productsbg.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | padding: 120px 0 80px 0;
| |
| − | margin-top: -40px;
| |
| − | }
| |
| − | .products .thumb-p {
| |
| − | overflow: hidden;
| |
| − | position: relative;
| |
| − | -webkit-border-radius: 6px;
| |
| − | -webkit-background-clip: padding-box;
| |
| − | -moz-border-radius: 6px;
| |
| − | -moz-background-clip: padding;
| |
| − | border-radius: 6px;
| |
| − | background-clip: padding-box;
| |
| − | }
| |
| − | .products .thumb-p img {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .products .thumb-p .overlay-p {
| |
| − | background-color: #39c8e2;
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | -webkit-border-radius: 6px;
| |
| − | -webkit-background-clip: padding-box;
| |
| − | -moz-border-radius: 6px;
| |
| − | -moz-background-clip: padding;
| |
| − | border-radius: 6px;
| |
| − | background-clip: padding-box;
| |
| − | -webkit-transform: scaleY(0);
| |
| − | -moz-transform: scaleY(0);
| |
| − | -o-transform: scaleY(0);
| |
| − | -ms-transform: scaleY(0);
| |
| − | transform: scaleY(0);
| |
| − | -webkit-transition: all 200ms ease-in-out;
| |
| − | -moz-transition: all 200ms ease-in-out;
| |
| − | -o-transition: all 200ms ease-in-out;
| |
| − | transition: all 200ms ease-in-out;
| |
| − | }
| |
| − | .products .thumb-p .overlay-p a {
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | left: 50%;
| |
| − | margin: -7px 0 0 -8px;
| |
| − | font-size: 18px;
| |
| − | color: #fff;
| |
| − | }
| |
| − | .products .thumb-p:hover .overlay-p {
| |
| − | -webkit-transform: scaleY(1);
| |
| − | -moz-transform: scaleY(1);
| |
| − | -o-transform: scaleY(1);
| |
| − | -ms-transform: scaleY(1);
| |
| − | transform: scaleY(1);
| |
| − | }
| |
| − | .products .content-p {
| |
| − | margin-bottom: 40px;
| |
| − | }
| |
| − | .products .content-p h4 {
| |
| − | font-size: 16px;
| |
| − | font-weight: 700;
| |
| − | text-transform: uppercase;
| |
| − | color: #000;
| |
| − | margin: 15px 0 5px 0;
| |
| − | }
| |
| − | .products .content-p span {
| |
| − | font-size: 12px;
| |
| − | font-weight: 300;
| |
| − | text-transform: uppercase;
| |
| − | color: #000;
| |
| − | }
| |
| − | #Grid .mix {
| |
| − | display: none;
| |
| − | }
| |
| − | button.main-button,
| |
| − | .main-button {
| |
| − | background-color: #39c8e2;
| |
| − | color: #fff;
| |
| − | padding: 10px 15px;
| |
| − | text-transform: uppercase;
| |
| − | font-weight: 700;
| |
| − | outline: 0;
| |
| − | border: 0;
| |
| − | -webkit-border-radius: 4px;
| |
| − | -webkit-background-clip: padding-box;
| |
| − | -moz-border-radius: 4px;
| |
| − | -moz-background-clip: padding;
| |
| − | border-radius: 4px;
| |
| − | background-clip: padding-box;
| |
| − | }
| |
| − | .contact {
| |
| − | background: url('https://static.igem.org/mediawiki/2015/9/92/EPF_Lausanne_Contactbg.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | padding: 120px 0;
| |
| − | margin-top: -55px;
| |
| − | }
| |
| − | .contact fieldset {
| |
| − | margin-bottom: 30px;
| |
| − | }
| |
| − | .contact fieldset input,
| |
| − | .contact fieldset textarea {
| |
| − | width: 100%;
| |
| − | min-width: 100%;
| |
| − | max-width: 100%;
| |
| − | background: rgba(250, 250, 250, 0.7);
| |
| − | border: 1px solid #999;
| |
| − | color: #777;
| |
| − | }
| |
| − | .contact fieldset input:focus,
| |
| − | .contact fieldset textarea:focus {
| |
| − | border: 1px solid #39c8e2;
| |
| − | outline: 0;
| |
| − | }
| |
| − | .contact fieldset textarea {
| |
| − | padding: 15px;
| |
| − | }
| |
| − | .page-h.promotion {
| |
| − | padding-bottom: 100px;
| |
| − | }
| |
| − | .video-featured {
| |
| − | background: url('https://static.igem.org/mediawiki/2015/2/25/EPF_Lausanne_Bg1.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | padding: 160px 0;
| |
| − | margin-top: -130px;
| |
| − | }
| |
| − | .video-featured .video-holder {
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .video-featured .video-holder iframe {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .promotion-s {
| |
| − | background: url('https://static.igem.org/mediawiki/2015/8/8d/EPF_Lausanne_Promotionbg.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | padding: 180px 0 120px 0;
| |
| − | margin-top: -120px;
| |
| − | }
| |
| − | .product-left {
| |
| − | color: #444444;
| |
| − | padding-right: 30px;
| |
| − | }
| |
| − | .product-left h3 {
| |
| − | text-transform: uppercase;
| |
| − | font-size: 18px;
| |
| − | font-weight: 700;
| |
| − | }
| |
| − | .product-left .product-image {
| |
| − | margin-right: 15px;
| |
| − | float: left;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .product-content {
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .product-content h3 {
| |
| − | text-transform: uppercase;
| |
| − | font-size: 18px;
| |
| − | font-weight: 700;
| |
| − | }
| |
| − | .product-right {
| |
| − | padding-left: 30px;
| |
| − | color: #fff;
| |
| − | }
| |
| − | .product-right .product-image {
| |
| − | float: right;
| |
| − | overflow: hidden;
| |
| − | margin-left: 15px;
| |
| − | }
| |
| − | .site-footer {
| |
| − | position: relative;
| |
| − | z-index: 19;
| |
| − | padding: 100px 0 40px 0;
| |
| − | margin-top: -70px;
| |
| − | background: url('https://static.igem.org/mediawiki/2015/a/a7/EPF_Lausanne_Footerbg.png') no-repeat top center;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .site-footer ul.social {
| |
| − | width: 120px;
| |
| − | height: 120px;
| |
| − | overflow: hidden;
| |
| − | padding: 0;
| |
| − | margin: 0 auto;
| |
| − | list-style: none;
| |
| − | position: relative;
| |
| − | background: url('https://static.igem.org/mediawiki/2015/3/3d/EPF_LausanneSocialbg.png') no-repeat center;
| |
| − | }
| |
| − | .site-footer ul.social li {
| |
| − | display: inline-block;
| |
| − | position: absolute;
| |
| − | }
| |
| − | .site-footer ul.social li a {
| |
| − | width: 32px;
| |
| − | height: 32px;
| |
| − | text-align: center;
| |
| − | line-height: 32px;
| |
| − | -webkit-border-radius: 3px;
| |
| − | -webkit-background-clip: padding-box;
| |
| − | -moz-border-radius: 3px;
| |
| − | -moz-background-clip: padding;
| |
| − | border-radius: 3px;
| |
| − | background-clip: padding-box;
| |
| − | color: #fff;
| |
| − | }
| |
| − | .site-footer ul.social li.facebook {
| |
| − | top: 0;
| |
| − | left: 46px;
| |
| − | }
| |
| − | .site-footer ul.social li.facebook a {
| |
| − | background-color: #4c66a4;
| |
| − | }
| |
| − | .site-footer ul.social li.twitter {
| |
| − | top: 46px;
| |
| − | left: 0;
| |
| − | }
| |
| − | .site-footer ul.social li.twitter a {
| |
| − | background-color: #55acee;
| |
| − | }
| |
| − | .site-footer ul.social li.linkedin {
| |
| − | top: 46px;
| |
| − | left: 88px;
| |
| − | }
| |
| − | .site-footer ul.social li.linkedin a {
| |
| − | background-color: #006699;
| |
| − | }
| |
| − | .site-footer ul.social li.rss {
| |
| − | top: 88px;
| |
| − | left: 46px;
| |
| − | }
| |
| − | .site-footer ul.social li.rss a {
| |
| − | background-color: #fb6405;
| |
| − | }
| |
| − | .site-footer p {
| |
| − | display: block;
| |
| − | }
| |
| − | /* Medium devices (desktops, 992px and up) */
| |
| − | @media (max-width: 992px) {
| |
| − | .slider-button {
| |
| − | display: none;
| |
| − | }
| |
| − | }
| |
| − | /* Small devices (tablets, 768px and up) */
| |
| − | @media (max-width: 768px) {
| |
| − | .slider-caption {
| |
| − | display: none;
| |
| − | }
| |
| − | .first-section {
| |
| − | background-position: left;
| |
| − | margin-top: -20px;
| |
| − | }
| |
| − | .contact form {
| |
| − | margin-top: 60px;
| |
| − | }
| |
| − | .product-left {
| |
| − | color: #fff;
| |
| − | }
| |
| − | }
| |
| − | /* ==========================================================================
| |
| − | Media Queries
| |
| − | ========================================================================== */
| |
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}