Template:Team:Uppsala/styles

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
 +
<html>
<style type="text/css">
<style type="text/css">
Line 21: Line 22:
 +
-
h1 {
 
-
color: #0089d1;
 
-
}
 
-
 
-
p {
 
-
color: #22409a;
 
-
}
 
-
 
-
 
-
 
-
section {
 
-
min-height: 1300px;
 
-
padding: 20px;
 
-
}
 
-
 
-
header {
 
-
display: inline-block;
 
-
position: relative;
 
-
width: 100%;
 
-
}
 
-
 
-
 
-
 
-
 
*{
*{
margin: 0px;
margin: 0px;
padding: 0px;
padding: 0px;
-
                padding-top: 0px;
 
border: none;
border: none;
}
}
 +
section, footer, nav{
 +
display: block;
 +
}
-
 
body{
body{
Line 61: Line 40:
height: 100%;
height: 100%;
-
background-image: url(../image/bakgrund3.png); /* bakgrund för hela sidan */
+
background-image: url(../image/bakgrund3.png);  
}
}
Line 74: Line 53:
}
}
-
+
 
 +
header {
 +
display: inline-block;
 +
position: relative;
 +
width: 100%;
 +
}
#logo_img{
#logo_img{
Line 103: Line 87:
height: 55px;
height: 55px;
}
}
-
+
nav {
 +
}
 +
section
 +
{
 +
min-height: 1300px;
 +
padding: 20px;
 +
}
 +
footer
footer
{
{
Line 113: Line 104:
.home-knapp
.home-knapp
{
{
-
position: relative;left:15px;top:-70px;
+
position: relative;left:15px;top:-84px;
width: 15%;
width: 15%;
float: left;
float: left;
Line 123: Line 114:
padding-right: 10px;
padding-right: 10px;
z-index: 1;
z-index: 1;
-
/*-webkit-transition: -webkit-transform 0.1s, background 0.1s;*/
+
}
}
#list_type1{width: 110px;}#list_type2{width: 80px;}#list_type3{width: 120px;}#list_type4{width: 150px;}
#list_type1{width: 110px;}#list_type2{width: 80px;}#list_type3{width: 120px;}#list_type4{width: 150px;}
 +
nav ul ul {
 +
display: none;
 +
z-index: 1;
 +
}
nav ul li:hover > ul {
nav ul li:hover > ul {
Line 145: Line 140:
nav ul li  
nav ul li  
{
{
-
padding-top: 0.6%;
+
padding-top: 1.4%;
float: left;
float: left;
-
height: 50px;
+
height: 44px;
}
}
Line 154: Line 149:
text-align: center;
text-align: center;
display: block;
display: block;
-
text-decoration:         none;
+
text-decoration: none;
}
}
.nav-text2{
.nav-text2{
Line 182: Line 177:
border-radius: 0px;  
border-radius: 0px;  
padding: 0px;  
padding: 0px;  
-
position: relative;
+
position: absolute;  
top: 100%;
top: 100%;
-
display: none;
 
-
z-index: 1;
 
}
}
nav ul ul li {
nav ul ul li {
Line 191: Line 184:
width: 150px;
width: 150px;
float: none;  
float: none;  
-
+
position: relative;
}
}
nav ul ul li a {
nav ul ul li a {
Line 200: Line 193:
background: #0089d1;
background: #0089d1;
}
}
 +
 +
#bottom-pic {
 +
width: 100%;
 +
height: 200px;
 +
margin-top: 50px;
 +
}
 +
 +
#project-description {
 +
padding-top: 30px;
 +
width: 100%;
 +
border-bottom: 1px solid #22409a;
 +
padding-bottom: 10px;
 +
}
 +
 +
 +
#grid-matrix {
 +
width: 64%;
 +
float: left;
 +
padding-top: 20px;
 +
}
 +
 +
#sidebar {
 +
width: 34%;
 +
float: right;
 +
padding-top: 20px;
 +
}
 +
 +
#twitter-feed {
 +
padding-top:20px;
 +
}
 +
 +
#grid-a {
 +
width: 276.5px; float: left;
 +
height: 276.5px; border: 3px solid;
 +
background-image: url(https://static.igem.org/mediawiki/2013/1/1f/Background-new.png);
 +
}
 +
 +
#grid-b {
 +
width: 276.5px; float: right;
 +
height: 276.5px; border: 3px solid;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/1/18/Vision.png);
 +
}
 +
 +
#grid-c {
 +
width: 276.5px; float: left;
 +
height: 276.5px; border: 3px solid;
 +
margin-top: 20px;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/a/a7/Metabolic_engineering.png);
 +
 +
}
 +
 +
#grid-d {
 +
width: 276.5px; float: right;
 +
height: 276.5px; border: 3px solid;
 +
margin-top: 20px;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/1/1b/Chassi.png);
 +
}
 +
 +
#grid-e {
 +
width: 276.5px; float: left;
 +
height: 276.5px; border: 3px solid;
 +
margin-top: 20px;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/f/fd/Society.png);
 +
}
 +
 +
#grid-f {
 +
width: 276.5px; float: right;
 +
height: 276.5px; border: 3px solid;
 +
margin-top: 20px;
 +
        background-image: url(https://static.igem.org/mediawiki/2013/6/6f/Safty.png);
 +
}
 +
 +
 +
/* Hover effect on grid pictures begin */
 +
 +
#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;
 +
}
 +
 +
#grid-a img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#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;
 +
}
 +
 +
#grid-b img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#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;
 +
}
 +
 +
#grid-c img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#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;
 +
}
 +
 +
#grid-d img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#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;
 +
}
 +
 +
#grid-e img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
#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;
 +
}
 +
 +
#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;
 +
}

Revision as of 19:11, 15 August 2013