Team:UNIK Copenhagen/template

From 2013.igem.org

(Difference between revisions)
 
(161 intermediate revisions not shown)
Line 2: Line 2:
<head>
<head>
<style type="text/css">
<style type="text/css">
 +
*{
*{
padding: 0px;
padding: 0px;
margin: 0px;
margin: 0px;
-
list-style: none;
 
}
}
Line 23: Line 23:
padding: 0px;
padding: 0px;
}
}
 +
body{
body{
-
background: white url(https://static.igem.org/mediawiki/2013/3/39/UNIK_Copenhagen_background.jpg) no-repeat fixed 50% 50%;
+
background-color: #cccccc;
-
    -webkit-background-size: cover;
+
background-image: url("https://static.igem.org/mediawiki/2013/b/ba/UNIK_Copenhagen_bg.png");
-
    -moz-background-size: cover;
+
-
    -o-background-size: cover;
+
-
    background-size: cover;
+
width: 100%;
width: 100%;
margin: 0 auto;
margin: 0 auto;
position: relative;
position: relative;
 +
background-attachment: fixed;
}
}
#top-section {
#top-section {
Line 37: Line 36:
}
}
#menubar *{
#menubar *{
-
color: transparent;
+
color: #666666;
background: transparent;
background: transparent;
margin: 0px;
margin: 0px;
padding: 5px;
padding: 5px;
 +
width: 100%;
 +
}
 +
#menubar.left-menu ul{
 +
margin-left: -5px;
 +
padding: 5px 3px 3px 5px;
 +
background: white;
 +
border-bottom-left-radius: 5px;
 +
border-bottom-right-radius: 5px;
 +
box-shadow: 0px 0px 5px #888888;
 +
-webkit-box-shadow: 0px 0px 5px #888888;
 +
-moz-box-shadow: 0px 0px 5px #888888;
}
}
#menubar.left-menu{
#menubar.left-menu{
width: 100%;
width: 100%;
}
}
-
#top-section:hover #menubar *{
+
#menubar.right-menu ul{
-
color: white;
+
padding: 5px 6px 3px 3px;
-
background: #336666;
+
}
}
#footer-box{
#footer-box{
-
z-index: 90;
+
background-color: rgba(50, 50, 50, 0.5);
-
position: fixed;
+
z-index: 100;
-
height: 30px;
+
height: 65px;
-
width: 99%;
+
position: absolute;
 +
width: 100%;
text-align: center;
text-align: center;
-
bottom:0px;
+
bottom: 20px;
border: none;
border: none;
-
border-top: 1px solid black;
 
}
}
#footer, #footer ul{
#footer, #footer ul{
-
z-index: 90;
+
font-size: 12px;
-
display: inline;
+
}
 +
#footer{
 +
width: 900px;
 +
margin: 0px auto
 +
}
 +
#footer a{
 +
color: white;
}
}
-
 
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
-
/*               Navigation Bar CSS                     */
+
/*                   Wrapper CSS                       */
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
-
#full_width{
 
-
position: relative;
 
-
background: #003333;
 
-
height: 30px;
 
-
top: 30px;
 
-
left: 0px;
 
-
right: 0px;
 
-
padding: 0px;
 
-
margin: 0px;
 
-
z-index:-5;
 
-
}
 
#wrapper{
#wrapper{
-
width:1200px;
+
display: block;
-
margin: auto;
+
position: relative;
 +
width:964px;
 +
min-height: 1000px;
 +
margin: 45px auto -5px auto;
 +
padding: 0px 10px 60px 10px;
z-index: 95;
z-index: 95;
 +
background: white;
 +
top:-10px;
 +
border-radius: 5px;
 +
box-shadow: 0px 0px 5px #888888;
 +
-webkit-box-shadow: 0px 0px 5px #888888;
 +
-moz-box-shadow: 0px 0px 5px #888888;
 +
}
 +
/*-------------------------------------------------------*/
 +
/*                Navigation Bar CSS                    */
 +
/*-------------------------------------------------------*/
 +
#nav{
 +
display: block;
 +
width: 940px;
 +
height: 38px;
 +
margin: 0 auto;
 +
border-bottom: 1px solid #cccccc;
 +
border-top: 1px solid #cccccc;
}
}
#nav li{
#nav li{
Line 87: Line 111:
list-style: none;
list-style: none;
float: left;
float: left;
-
background: #003333;
+
top: -1px;
-
top: 0px;
+
padding: 8px 0px 0px 0px;
-
padding: 0px;
+
margin: 0px;
margin: 0px;
z-index: 95;
z-index: 95;
}
}
#nav ul{
#nav ul{
-
line-height: 30px;
 
padding: 0px;
padding: 0px;
margin: 0px;
margin: 0px;
Line 103: Line 125:
visibility: hidden;
visibility: hidden;
z-index: 95;
z-index: 95;
 +
margin:1px 0px 0px 0px;
 +
background: white;
 +
box-shadow: 0px 0px 2px #888888;
 +
-webkit-box-shadow: 0px 0px 2px #888888;
 +
-moz-box-shadow: 0px 0px 2px #888888;
 +
}
 +
#nav ul ul li{
 +
border: none;
}
}
#nav ul li a{
#nav ul li a{
text-align: center;
text-align: center;
-
font-family: "Tahoma";
+
font-family: Helvetica;
-
font-weight: bold;
+
font-size: 14px;
text-decoration: none;
text-decoration: none;
-
height: 30px;
 
display: block;
display: block;
-
color: white;
+
height: 30px;
-
padding: 0px 23px 0px 23px;
+
color: #333333;
 +
padding: 0px 10px 0px 10px;
margin: 0px;
margin: 0px;
-
text-shadow: 1px 1px 3px black;
 
z-index: 95;
z-index: 95;
}
}
#nav ul li ul a{
#nav ul li ul a{
text-align: left;
text-align: left;
-
width:130px;
+
width:165px;
-
padding-left: 10px;
+
padding-left: 12px;
-
border-top: 1px solid white;
+
z-index: 95;
z-index: 95;
}
}
Line 130: Line 158:
visibility: visible;
visibility: visible;
z-index: 95;
z-index: 95;
 +
}
 +
#nav li:hover{
 +
border-bottom: 1px solid #990000;
 +
border-top: 1px solid #990000;
}
}
#nav li:hover a{
#nav li:hover a{
-
color: #99cc99;
 
z-index: 95;
z-index: 95;
 +
}
 +
#nav li li:hover{
 +
border: none;
}
}
#nav ul li:hover ul li a{
#nav ul li:hover ul li a{
-
background: #336666;
 
-
color: white;
 
z-index: 95;
z-index: 95;
}
}
#nav ul li:hover ul li a:hover{
#nav ul li:hover ul li a:hover{
-
color: #99ff99;
+
color: #990000;
z-index: 95;
z-index: 95;
 +
}
 +
 +
/*-------------------------------------------------------*/
 +
/*      Social Media  (hide facebook-count)            */
 +
/*-------------------------------------------------------*/
 +
#social_media{
 +
position: absolute;
 +
top: 150px;
 +
right: 30px;
 +
text-align: right;
 +
}
 +
/*-------------------------------------------------------*/
 +
/*                        Fonts                          */
 +
/*-------------------------------------------------------*/
 +
h1{
 +
font-family: Helvetica Neue;
 +
font-size: 24px;
 +
}
 +
h2{
 +
font-family: Helvetica Neue;
 +
font-size: 20px;
 +
}
 +
h3{
 +
font-family: Helvetica Neue;
 +
font-size: 18px;
 +
font-weight: normal;
 +
}
 +
h4{
 +
font-family: Helvetica Neue;
 +
font-size: 16px;
 +
}
 +
p,ol,ul{
 +
font-family: Baskerville;
 +
font-size: 16px;
 +
line-height: 25px;
}
}
Line 154: Line 221:
margin: auto;
margin: auto;
z-index:0;
z-index:0;
-
top: 60px;
+
top: 0px;
display:block;
display:block;
position: relative;
position: relative;
-
padding: 20px 30px 60px 30px;
+
padding: 20px 20px 60px 20px;
-
background: rgba(255, 255, 255, 0.6);;
+
}
 +
#article{
 +
max-width: 630px;
 +
padding: 20px;
}
}
.image img{
.image img{
Line 169: Line 239:
display: block;
display: block;
margin: 10px;
margin: 10px;
-
font-style:italic;
+
font-size:14px;
-
font-size:12px;
+
font-family: Baskerville;
 +
line-height: 18px;
padding-left: 15px;
padding-left: 15px;
margin-bottom: 20px;
margin-bottom: 20px;
width: 400px;
width: 400px;
}
}
-
#smaller_image{
+
#smaller_image img{
-
width: 250px;
+
width: 250px;
-
}
+
-
.square_list ul li{
+
-
list-style-type: square;
+
-
margin-left: 20px;
+
-
}
+
-
.decimal_list ul li{
+
-
list-style-type: decimal;
+
-
margin-left: 20px;
+
}
}
.references{
.references{
 +
font-family: Baskerville;
 +
margin-top: 40px;
border-top: 1px solid gray;
border-top: 1px solid gray;
}
}
Line 194: Line 259:
}
}
#video{
#video{
-
margin: auto;
+
text-align: center;
-
z-index:50;
+
margin: auto;
 +
z-index:50;
}
}
Line 201: Line 267:
/*              Logos in navigation bar                  */
/*              Logos in navigation bar                  */
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
 +
#two_logos{
 +
height: 140px;
 +
}
#our_logo{
#our_logo{
-
margin: -20px 0px 0px 0px;
+
display: inline-block;
-
}
+
position: relative;
-
#our_logo img{
+
float: left;
-
 
+
margin: 30px 0px 0px 15px;
-
  box-shadow: 3px 3px 1px #ccc;
+
-
  -webkit-box-shadow: 3px 3px 1px #ccc;
+
-
  -moz-box-shadow: 3px 3px 1px #ccc
+
}
}
#iGEM_logo{
#iGEM_logo{
-
position:absolute;
+
display: inline-block;
-
margin: -28px 0px 0px 0px;
+
float: right;
 +
position:relative;
 +
margin: 15px 15px 0px 0px;
 +
top: 0px;
}
}
-
/*-------------------------------------------------------*/
+
#iGEM{
-
/*              Navigation Bar HTML                    */
+
position: relative;
-
/*-------------------------------------------------------*/
+
top: 0;
 +
left: 0;
 +
z-index: 100;
 +
}
 +
#no_wheel{
 +
z-index: 100;
 +
}
 +
#iGEM #wheel{
 +
width: 100px;
 +
height: 100px;
 +
display: block;
 +
position: absolute;
 +
top: 14px;
 +
left: 36px;
 +
z-index: -1;
 +
-webkit-transition-duration: 1s;
 +
-moz-transition-duration: 1s;
 +
-o-transition-duration: 1s;
 +
transition-duration: 1s;
 +
 +
-webkit-transform: rotate(0deg);
 +
-moz-transform: rotate(0deg);
 +
-o-transform: rotate(0deg);
 +
-ms-transform: rotate(0deg);
 +
 +
-webkit-transition-property: -webkit-transform;
 +
-moz-transition-property: -moz-transform;
 +
-o-transition-property: -o-transform;
 +
transition-property: transform;
 +
}
 +
 +
#no_wheel:hover + #wheel{
 +
-webkit-transform: rotate(360deg);
 +
-moz-transform: rotate(360deg);
 +
-o-transform: rotate(360deg);
 +
-ms-transform: rotate(360deg);
 +
z-index: -1;
 +
}
</style>
</style>
 +
 +
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 +
 +
<div id="fb-root"></div>
 +
<script>(function(d, s, id) {
 +
  var js, fjs = d.getElementsByTagName(s)[0];
 +
  if (d.getElementById(id)) return;
 +
  js = d.createElement(s); js.id = id;
 +
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
 +
  fjs.parentNode.insertBefore(js, fjs);
 +
}(document, 'script', 'facebook-jssdk'));</script>
 +
 +
 +
 +
 +
</head>
</head>
<body>
<body>
-
<div id="full_width"> </div>
 
<div id="wrapper">
<div id="wrapper">
 +
<div id="two_logos">
 +
<div id="iGEM_logo"><a href="https://2013.igem.org">
 +
<div id="iGEM">
 +
<img id="no_wheel" src="https://static.igem.org/mediawiki/2013/d/d9/UNIK_Copenhagen_iGEM_no_wheel.png" width="150">
 +
<div id="wheel"><img src="https://static.igem.org/mediawiki/2013/3/31/UNIK_Copenhagen_iGEM_the_wheel.png" width="100"></div>
 +
</div></a></div>
 +
<div id="our_logo"><a href="https://2013.igem.org/Team:UNIK_Copenhagen"><img src="https://static.igem.org/mediawiki/2013/2/23/UNIK_Copenhagen_our_logo_darker.jpg" width="200"></a></div>
 +
</div>
<div id="nav">
<div id="nav">
<ul>
<ul>
-
<li><div id="our_logo"><a href="https://2013.igem.org/Team:UNIK_Copenhagen"><img src="https://static.igem.org/mediawiki/2013/8/8e/UNIK_Copenhagen_our_logo.png" width="150"></a></div></li>
 
-
 
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen">Home</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen">Home</a></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project">Project</a>
+
<li><a href="#">Project</a>
<ul>
<ul>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project">Overview</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project">Overview</a></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Theory">Theory</a></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/ExperimentalApproach">Experimental Approach</a></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/ExperimentalDesign">Experimental Design</a></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Results">Results</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Results">Results</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project/Applications">Applications</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project/Applications">Applications</a></li>
Line 239: Line 365:
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Attributions">Attributions</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Attributions">Attributions</a></li>
</ul></li>
</ul></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team">Team</a>
+
<li><a href="#">Team</a>
<ul>
<ul>
-
<li><a href="https://igem.org/Team.cgi?year=2013">Official Team Profile</a></li>
+
<li><a href="https://igem.org/Team.cgi?id=1094">Official Team Profile</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team">Meet the team</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team">Meet the team</a></li>
 +
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Danish_collaboration">The Danish Collaboration</a></li>
</ul></li>
</ul></li>
<li><a href="#">Safety and Ethics</a><ul>
<li><a href="#">Safety and Ethics</a><ul>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/OpenSource">Open Source</a></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Safety">Safety</a></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Safety">Safety Sheets</a></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/OpenSource">Ethics</a></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Outreach">Outreach Activities</a></li>
+
</ul></li>
</ul></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledge">Bricks of Knowledge</a><ul>
+
<li><a href="#">Bricks of Knowledge</a><ul>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledge">Invitation</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledge">Invitation</a></li>
-
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledgeMovie">BoK -the movie</a></li>
+
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/BricksOfKnowledgeMovieBricks">Bricks of Knowledge</a></li>
</ul></li>
</ul></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/TheCphStrain">The CPH Strain</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/TheCphStrain">The CPH Strain</a></li>
 +
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Press">Press</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Sponsors">Sponsors</a></li>
<li><a href="https://2013.igem.org/Team:UNIK_Copenhagen/Sponsors">Sponsors</a></li>
-
<li><div id="iGEM_logo"><a href="https://2013.igem.org"><img src="https://static.igem.org/mediawiki/2013/4/4e/UNIK_Copenhagen_iGEM_logo.png" width="100px"></a></div></li>
 
</ul>
</ul>
 +
<div id="social_media">
 +
<a href="https://twitter.com/iGEMCopenhagen" class="twitter-follow-button" data-show-screen-name="false" data-show-count="false" data-lang="en">Follow @twitterapi</a>
 +
 +
<a href="https://twitter.com/iGEMCopenhagen" class="twitter-share-button" data-count="none"  data-lang="en">Tweet</a>
 +
 +
<div class="fb-like" data-href="https://www.facebook.com/pages/IGEM-Copenhagen-2013/1393917120824679?fref=ts" data-width="The pixel width of the plugin" data-height="25" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
</div>
</div>
 +
</div>
</div>
-
</body>
 
-
</html>
 

Latest revision as of 14:28, 4 October 2013