Template:Team:Uppsala/stylesvision

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
 
-
<style type="text/css">
 
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 
-
    display: none;
 
-
}
 
-
#top-section {
 
-
    border: none;
 
-
    height: 0px;
 
-
}
 
-
 
-
#content {
 
-
    border: none;
 
-
    width: 99.5%;
 
-
    height: 99.5%;
 
-
    background-image: url("https://static.igem.org/mediawiki/2013/2/26/Background.png");
 
-
    position: fixed;
 
-
    overflow: auto;
 
-
    repeat-x;   
 
-
}
 
-
 
-
body {
 
-
 
-
background-image: url(https://static.igem.org/mediawiki/2013/2/26/Background.png); /* bakgrund för hela sidan */
 
-
border: none;
 
-
font-family : Tahoma, sans-serif;
 
-
}
 
-
 
-
h1 {
 
-
color: #0089d1;
 
-
}
 
-
 
-
/*
 
-
p {
 
-
color: #22409a;
 
-
}
 
-
*/
 
-
 
-
#main_frame {
 
-
 
-
min-height: 600px;
 
-
width: 950px;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
background-color: #fff;
 
-
border: 1px solid light gray;
 
-
border-radius:                                        15px;
 
-
box-shadow: 0px 0px 30px rgba(110,110,110, .8);
 
-
}
 
-
 
-
#header {
 
-
width:100%;
 
-
margin-left:auto;
 
-
margin-right:auto;
 
-
}
 
-
 
-
section {
 
-
min-height: 500px;
 
-
padding: 20px;
 
-
}
 
-
 
-
header {
 
-
display: inline-block;
 
-
position: relative;
 
-
width: 100%;
 
-
}
 
-
 
-
#igem_logo {
 
-
width: 500px;
 
-
padding: 10px;
 
-
padding-top: 30px;
 
-
float: right;
 
-
}
 
-
 
-
 
-
 
-
#logo {
 
-
width: 300px;
 
-
float: left;
 
-
}
 
-
 
-
 
-
 
-
#n_container {
 
-
padding-top: 1px;
 
-
height::100px;
 
-
width:950px;
 
-
clear:both;
 
-
}
 
-
 
-
#button_1 {
 
-
position: relative;left:15px;top:-15px;
 
-
float:left;
 
-
}
 
-
 
-
#navbar {
 
-
background-color: #22409a;
 
-
margin-top: 60px;
 
-
width: 94%;
 
-
margin-left: 6%;
 
-
height: 55px;
 
-
vertical-align: middle;
 
-
text-align: center
 
-
}
 
-
 
-
 
-
.sublogo {
 
-
 
-
width: 150px;
 
-
margin-left: 475px;
 
-
 
-
}
 
-
 
-
.logo {
 
-
padding-top: 40px;
 
-
width: 200px;
 
-
float: left;
 
-
}
 
-
 
-
 
-
.navbar-text {
 
-
 
-
 
-
}
 
-
 
-
/* NAVBAR code begins */
 
-
 
-
.nav {
 
-
margin-right:auto;
 
-
margin-left:80px;
 
-
padding:10px;
 
-
/*
 
-
border-top-right-radius: 50px;
 
-
border-top-left-radius: 50px;
 
-
border-bottom-right-radius: 50px;
 
-
border-bottom-left-radius: 50px;
 
-
*/
 
-
border:solid 3px;
 
-
height:29px;
 
-
width:900px;
 
-
/*position:absolute;top:100px;left:100px;*/
 
-
border:hidden;
 
-
 
-
}
 
-
 
-
#h {
 
-
border:solid 3px;
 
-
height:30px;
 
-
width:100px;
 
-
}
 
-
 
-
.nav ul {
 
-
list-style:none; margin:0px; padding:0px;
 
-
 
-
}
 
-
.nav li {
 
-
float:left;width:100px;background-color:#22409a;text-align:center;position:relative;height:30px;
 
-
 
-
}
 
-
.nav li ul li {
 
-
float:none;width:100px;text-align:left;padding-left:5px; border:solid 1px;border-color:black; background-color:#6EC4FF;height:30px;
 
-
}
 
-
.nav a {
 
-
text-decoration:none;color:black;
 
-
 
-
}
 
-
.nav li ul {
 
-
position:absolute;top:30px;left:0px;visibility:hidden;
 
-
}
 
-
.nav li:hover {
 
-
background-color:#1883FF;
 
-
/*text-decoration:underline;color:#333;*/
 
-
font-size:18px;
 
-
}
 
-
.nav li:hover ul {
 
-
visibility:visible;
 
-
}
 
-
.content {
 
-
clear:both;
 
-
}
 
-
 
-
 
-
.igem_logo  {
 
-
width: 400px;
 
-
 
-
float: right;
 
-
}
 
-
 
-
#a { width: 90px; height:35px;
 
-
 
-
}
 
-
 
-
#b {
 
-
width: 100px; height:35px;
 
-
}
 
-
 
-
#part {
 
-
width: 90px; height:35px;
 
-
}
 
-
 
-
.team {
 
-
width: 90px; height:35px; background-color:#6EC4FF
 
-
 
-
}
 
-
 
-
#hp { height:35px;
 
-
 
-
}
 
-
 
-
#att {
 
-
width: 140px; height:35px;
 
-
}
 
-
 
-
#note {
 
-
width: 130px; height:35px;
 
-
}
 
-
 
-
#bottom-pic {
 
-
width: 100%;
 
-
height: 200px;
 
-
margin-top: 10px;
 
-
}
 
#project-description {
#project-description {

Revision as of 22:17, 15 August 2013


  1. project-description {

padding-top: 30px; width: 100%; margin-left:auto; margin-right:auto; border-bottom: 1px solid #22409a; padding-bottom: 10px; }

.project-text { padding-top: px; }

.background-text { padding-top: px; }

  1. list-color {
       color:#22409a;;

}

  1. grid-matrix {

width: 64%; float: left; padding-top: 20px; }

  1. sidebar {

width: 34%; float: right; padding-top: 20px; }

  1. twitter-feed {

padding-top:20px; }

  1. grid-a {

width: 276.5px; float: left; height: 276.5px; border: 3px solid; background-image: url(Background-new.png); }

  1. grid-b {

width: 276.5px; float: right; height: 276.5px; border: 3px solid;

       background-image: url(Vision.png);

}

  1. grid-c {

width: 276.5px; float: left; height: 276.5px; border: 3px solid; margin-top: 20px;

       background-image: url(Metabolic_engineering.png);

}

  1. grid-d {

width: 276.5px; float: right; height: 276.5px; border: 3px solid; margin-top: 20px;

       background-image: url(Chassi.png);

}

  1. grid-e {

width: 276.5px; float: left; height: 276.5px; border: 3px solid; margin-top: 20px;

       background-image: url(Society.png);

}

  1. grid-f {

width: 276.5px; float: right; height: 276.5px; border: 3px solid; margin-top: 20px;

       background-image: url(Safty.png);

}


/* Hover effect on grid pictures begin */

  1. grid-a img {
 -webkit-transition: opacity 0.2s ease-in-out;
 -moz-transition: opacity 0.2s ease-in-out;
 -o-transition: opacity 0.2s ease-in-out;
 transition: opacity 0.2s ease-in-out;

}

  1. grid-a img.top:hover {
 opacity:0;

}

  1. grid-b img {
 -webkit-transition: opacity 0.2s ease-in-out;
 -moz-transition: opacity 0.2s ease-in-out;
 -o-transition: opacity 0.2s ease-in-out;
 transition: opacity 0.2s ease-in-out;

}

  1. grid-b img.top:hover {
 opacity:0;

}

  1. grid-c img {
 -webkit-transition: opacity 0.2s ease-in-out;
 -moz-transition: opacity 0.2s ease-in-out;
 -o-transition: opacity 0.2s ease-in-out;
 transition: opacity 0.2s ease-in-out;

}

  1. grid-c img.top:hover {
 opacity:0;

}

  1. grid-d img {
 -webkit-transition: opacity 0.2s ease-in-out;
 -moz-transition: opacity 0.2s ease-in-out;
 -o-transition: opacity 0.2s ease-in-out;
 transition: opacity 0.2s ease-in-out;

}

  1. grid-d img.top:hover {
 opacity:0;

}

  1. grid-e img {
 -webkit-transition: opacity 0.2s ease-in-out;
 -moz-transition: opacity 0.2s ease-in-out;
 -o-transition: opacity 0.2s ease-in-out;
 transition: opacity 0.2s ease-in-out;

}

  1. grid-e img.top:hover {
 opacity:0;

}

  1. grid-f img {
 -webkit-transition: opacity 0.2s ease-in-out;
 -moz-transition: opacity 0.2s ease-in-out;
 -o-transition: opacity 0.2s ease-in-out;
 transition: opacity 0.2s ease-in-out;

}

  1. grid-f img.top:hover {
 opacity:0;

}

/* Hover effect in grid pictures end Grid pictures styling begin */

.top { width: 277px; }

.grid-pic { width: 276.5px; }

.grid-test { width: 200px; }

/* Grid pictures styling ends */

</style> </html>