Difference between revisions of "Team:Stockholm/headertest"

(Created page with "<html> <head> <script src="https://2015.igem.org/Team:Stockholm/lightbox.min.js?action=raw&ctype=text/javascript"></script> <link rel="stylesheet" href="https://2015.igem.org/Te...")
 
Line 1: Line 1:
 
<html>
 
<html>
 +
<script src="https://2015.igem.org/Team:Stockholm/lightbox.min.js?action=raw&ctype=text/javascript"></script>
 +
<link rel="stylesheet" href="https://2015.igem.org/Team:stockholm/lightbox.min.css?action=raw&ctype=text/css" type="text/css">
 +
<head>
 +
  
−
<head>
+
</head>
−
<script src="https://2015.igem.org/Team:Stockholm/lightbox.min.js?action=raw&ctype=text/javascript"></script>
+
<center><body class="homepage">
−
<link rel="stylesheet" href="https://2015.igem.org/Team:stockholm/lightbox.min.css?action=raw&ctype=text/css" type="text/css">
+
<div id="page-wrapper">
−
</head>
+
  
−
<center><body class="homepage">
+
<!-- Header -->
−
<div id="page-wrapper">
+
<div id="header-wrapper">
 +
<div id="header" class="container">
  
−
<!-- Header -->
+
<!-- Logo -->
−
<div id="header-wrapper">
+
−
<div id="header" class="container">
+
  
−
<!-- Nav -->
+
<!-- Nav -->
−
<nav id="nav">
+
<nav id="nav">
−
 
+
<ul>
−
<ul>
+
<li><a class="icon-home" href="https://2015.igem.org/Team:Stockholm"><span>Home</span></a></li>
−
<li><a class="icon-home" href="https://2015.igem.org/Team:Stockholm"><span>Home</span></a></li>
+
<li><a class="icon-users" href="https://2015.igem.org/Team:Stockholm/Team"><span>Team</span></a>
−
<li><a class="icon-users" href="https://2015.igem.org/Team:Stockholm/Team"><span>Team</span></a></li>
+
−
<li><a href="https://2015.igem.org/Team:Stockholm/Description" class="icon-lab"><span>Project</span></a></li>
+
</li>
−
<li><a class="icon-clipboard" href="https://2015.igem.org/Team:Stockholm/Results"><span>Results</span></a></li>
+
<li>
−
<li><a class="icon-bubbles2" href="https://2015.igem.org/Team:Stockholm/ethics"><span>Practices</span></a></li>
+
<a href="https://2015.igem.org/Team:Stockholm/Description" class="icon-lab"><span>Project</span></a>
−
<li><a class="icon-gift" href="https://2015.igem.org/Team:Stockholm/Attributions"><span>Attributions</span></a></li>
+
−
</ul>
+
</li>
−
 
+
<li><a class="icon-clipboard" href="https://2015.igem.org/Team:Stockholm/Results"><span>Results</span></a>
−
</nav>
+
</li>
−
 
+
−
</div>
+
<li><a class="icon-bubbles2" href="https://2015.igem.org/Team:Stockholm/ethics"><span>Human practices</span></a>
−
</div>
+
−
</div>
+
</li>
−
 
+
−
</body>
+
−
</html>
+
 +
<li><a class="icon-gift" href="https://2015.igem.org/Team:Stockholm/Attributions"><span>Attributions</span></a>
 +
 +
</li>
  
 +
</ul>
 +
</nav>
 +
</div>
 +
 +
 +
</div>
 +
</div>
  
 
<style type="text/css">
 
<style type="text/css">
Line 39: Line 52:
 
#contentSub, #footer-box, #catlinks, #search-controls,
 
#contentSub, #footer-box, #catlinks, #search-controls,
 
#p-logo, .printfooter, .firstHeading, .visualClear {
 
#p-logo, .printfooter, .firstHeading, .visualClear {
−
display: none;
+
display: none;
 
}
 
}
  
  
−
body {
+
body {
−
+
   
−
background-color: #ffffff;
+
    background-color: #ffffff;
−
}
+
}
  
−
#globalWrapper, #content {
+
#globalWrapper, #content {
−
min-width: 600px;
+
      min-width: 600px;
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
Line 59: Line 72:
 
}
 
}
  
−
@font-face {
+
@font-face {
−
font-family: 'icomoon';
+
font-family: 'icomoon';
−
src:url('https://static.igem.org/mediawiki/2015/d/d3/Sthlm_icomoon.eot');
+
src:url('https://static.igem.org/mediawiki/2015/d/d3/Sthlm_icomoon.eot');
−
src:url('https://static.igem.org/mediawiki/2015/d/d3/Sthlm_icomoon.eot') format('embedded-opentype'),
+
src:url('https://static.igem.org/mediawiki/2015/d/d3/Sthlm_icomoon.eot') format('embedded-opentype'),
 
url('https://static.igem.org/mediawiki/2015/5/5b/Sthlm_icomoon.ttf') format('truetype'),
 
url('https://static.igem.org/mediawiki/2015/5/5b/Sthlm_icomoon.ttf') format('truetype'),
 
url('https://static.igem.org/mediawiki/2015/f/fe/Sthlm_icomoon.woff') format('woff');
 
url('https://static.igem.org/mediawiki/2015/f/fe/Sthlm_icomoon.woff') format('woff');
−
+
−
font-weight: normal;
+
font-weight: normal;
−
font-style: normal;
+
font-style: normal;
−
}
+
}
  
−
[class^="icon-"], [class*=" icon-"] {
+
[class^="icon-"], [class*=" icon-"] {
−
font-family: 'icomoon';
+
font-family: 'icomoon';
−
speak: none;
+
speak: none;
−
font-style: normal;
+
font-style: normal;
−
font-weight: normal;
+
font-weight: normal;
−
font-variant: normal;
+
font-variant: normal;
−
text-transform: none;
+
text-transform: none;
−
line-height: 1;
+
line-height: 1;
  
−
/* Better Font Rendering =========== */
+
/* Better Font Rendering =========== */
−
-webkit-font-smoothing: antialiased;
+
-webkit-font-smoothing: antialiased;
−
-moz-osx-font-smoothing: grayscale;
+
-moz-osx-font-smoothing: grayscale;
−
}
+
}
  
−
.icon-home:before {
+
.icon-home:before {
−
content: "\e600";
+
content: "\e600";
−
}
+
}
−
.icon-bubbles2:before {
+
.icon-bubbles2:before {
−
content: "\e601";
+
content: "\e601";
−
}
+
}
−
.icon-users:before {
+
.icon-users:before {
−
content: "\e602";
+
content: "\e602";
−
}
+
}
−
.icon-gift:before {
+
.icon-gift:before {
−
content: "\e603";
+
content: "\e603";
−
}
+
}
−
.icon-lab:before {
+
.icon-lab:before {
−
content: "\e604";
+
content: "\e604";
−
}
+
}
−
.icon-clipboard:before {
+
.icon-clipboard:before {
−
content: "\e605";
+
content: "\e605";
−
}
+
}
  
  
Line 108: Line 121:
 
}
 
}
  
−
#nav > ul > li > a {
+
#nav > ul > li > a {
−
border: 0;
+
border: 0;
−
text-decoration: none;
+
text-decoration: none;
−
text-transform: uppercase;
+
text-transform: uppercase;
−
font-weight: 400;
+
font-weight: 400;
−
color: #777;
+
color: #777;
−
outline: 0;
+
outline: 0;
−
}
+
}
  
−
#nav > ul > li > a:before {
+
#nav > ul > li > a:before {
−
display: inline-block;
+
display: inline-block;
−
background: #878787;
+
background: #878787;
−
color: #e4e4e4;
+
color: #e4e4e4;
−
width: 1.65em;
+
width: 1.65em;
−
height: 1.65em;
+
height: 1.65em;
−
border-radius: 1.65em;
+
border-radius: 1.65em;
−
line-height: 1.65em;
+
line-height: 1.65em;
−
text-align: center;
+
text-align: center;
−
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
+
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
−
margin-right: 0.75em;
+
margin-right: 0.75em;
−
-moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
-moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
−
-webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
-webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
−
-o-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
-o-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
−
-ms-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
-ms-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
−
transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
−
}
+
}
  
−
#nav > ul > li > a > span {
+
#nav > ul > li > a > span {
−
-moz-transition: color 0.25s ease-in-out;
+
-moz-transition: color 0.25s ease-in-out;
−
-webkit-transition: color 0.25s ease-in-out;
+
-webkit-transition: color 0.25s ease-in-out;
−
-o-transition: color 0.25s ease-in-out;
+
-o-transition: color 0.25s ease-in-out;
−
-ms-transition: color 0.25s ease-in-out;
+
-ms-transition: color 0.25s ease-in-out;
−
transition: color 0.25s ease-in-out;
+
transition: color 0.25s ease-in-out;
−
}
+
}
  
−
#nav > ul > li.active > a:before, #nav > ul > li:hover > a:before {
+
#nav > ul > li.active > a:before, #nav > ul > li:hover > a:before {
−
background: #ED786A;
+
background: #ED786A;
−
color: #fff;
+
color: #fff;
−
}
+
}
  
−
#nav > ul > li.active > a > span, #nav > ul > li:hover > a > span {
+
#nav > ul > li.active > a > span, #nav > ul > li:hover > a > span {
−
color: #ED786A;
+
color: #ED786A;
−
}
+
}
  
−
#nav {
+
#nav {
−
position: absolute;
+
position: absolute;
−
top: 1em;
+
top: 1em;
−
left: 0;
+
left: 0;
−
width: 100%;
+
width: 100%;
−
}
+
}
  
−
#nav > ul > li {
+
#nav > ul > li {
−
display: inline-block;
+
display: inline-block;
−
padding-right: 2em;
+
padding-right: 2em;
−
}
+
}
  
−
#nav > ul > li:last-child {
+
#nav > ul > li:last-child {
−
padding-right: 0;
+
padding-right: 0;
−
}
+
}
  
−
#nav > ul > li > a {
+
#nav > ul > li > a {
−
display: block;
+
display: block;
−
}
+
}
  
−
#nav > ul > li > a > span {
+
#nav > ul > li > a > span {
−
font-size: 0.85em;
+
font-size: 0.85em;
−
letter-spacing: 3px;
+
letter-spacing: 3px;
−
}
+
}
  
−
#nav > ul > li > ul {
+
#nav > ul > li > ul {
−
display: none;
+
display: none;
−
}
+
}
  
−
.dropotron {
+
.dropotron {
−
text-align: left;
+
text-align: left;
−
border: solid 1px #e5e5e5;
+
border: solid 1px #e5e5e5;
−
border-radius: 4px;
+
border-radius: 4px;
−
background: #fff;
+
background: #fff;
−
background: rgba(255, 255, 255, 0.965);
+
background: rgba(255, 255, 255, 0.965);
−
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
−
padding: 0.75em 0 0.5em 0;
+
padding: 0.75em 0 0.5em 0;
−
min-width: 12em;
+
min-width: 12em;
−
margin-top: calc(-0.5em + 1px);
+
margin-top: calc(-0.5em + 1px);
−
margin-left: -2px;
+
margin-left: -2px;
−
}
+
}
  
−
.dropotron.level-0 {
+
.dropotron.level-0 {
−
margin-top: 1.5em;
+
margin-top: 1.5em;
−
margin-left: -1em;
+
margin-left: -1em;
−
}
+
}
  
−
.dropotron.level-0:after {
+
.dropotron.level-0:after {
−
content: '';
+
content: '';
−
display: block;
+
display: block;
−
position: absolute;
+
position: absolute;
−
left: 1.25em;
+
left: 1.25em;
−
top: calc(-0.75em + 1px);
+
top: calc(-0.75em + 1px);
−
border-left: solid 0.75em rgba(255, 255, 255, 0);
+
border-left: solid 0.75em rgba(255, 255, 255, 0);
−
border-right: solid 0.75em rgba(255, 255, 255, 0);
+
border-right: solid 0.75em rgba(255, 255, 255, 0);
−
border-bottom: solid 0.75em #fff;
+
border-bottom: solid 0.75em #fff;
−
}
+
}
  
−
.dropotron.level-0:before {
+
.dropotron.level-0:before {
−
content: '';
+
content: '';
−
display: block;
+
display: block;
−
position: absolute;
+
position: absolute;
−
left: 1.25em;
+
left: 1.25em;
−
top: -0.75em;
+
top: -0.75em;
−
border-left: solid 0.75em rgba(255, 255, 255, 0);
+
border-left: solid 0.75em rgba(255, 255, 255, 0);
−
border-right: solid 0.75em rgba(255, 255, 255, 0);
+
border-right: solid 0.75em rgba(255, 255, 255, 0);
−
border-bottom: solid 0.75em #ccc;
+
border-bottom: solid 0.75em #ccc;
−
}
+
}
  
−
.dropotron span, .dropotron a {
+
.dropotron span, .dropotron a {
−
display: block;
+
display: block;
−
padding: 0.3em 1em 0.3em 1em;
+
padding: 0.3em 1em 0.3em 1em;
−
border: 0;
+
border: 0;
−
border-top: solid 1px #f0f0f0;
+
border-top: solid 1px #f0f0f0;
−
outline: 0;
+
outline: 0;
−
}
+
}
  
−
.dropotron li:first-child > span, .dropotron li:first-child > a {
+
.dropotron li:first-child > span, .dropotron li:first-child > a {
−
border-top: 0;
+
border-top: 0;
−
padding-top: 0;
+
padding-top: 0;
−
}
+
}
  
−
.dropotron li:hover > span, .dropotron li:hover > a {
+
.dropotron li:hover > span, .dropotron li:hover > a {
−
-moz-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-moz-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
−
-webkit-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-webkit-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
−
-ms-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-ms-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
−
transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
−
color: #ed786a;
+
color: #ed786a;
−
}
+
}
−
</style>
+
</style>
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Revision as of 12:51, 2 September 2015