Template:Team:Uppsala/test

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/*
+
<html>
-
baby blue #b6e6fd; RGB(182,230,253)
+
-
blue #0089d1; RGB(0,137,209)
+
-
dark blue #22409a; RGB(34,64,154)
+
-
+
-
<style type="text/css">
+
-
@-moz-document url-prefix() {
+
-
h1 {
+
-
color: red;
+
-
}
+
-
}
+
-
</style>
+
-
*/
+
-
+
-
+
-
<html>
+
<style type="text/css">
<style type="text/css">
 +
 +
 +
/* http://meyerweb.com/eric/tools/css/reset/
 +
  v2.0 | 20110126
 +
  License: none (public domain)
 +
*/
 +
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, sup, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td,
 +
article, aside, canvas, details, embed,
 +
figure, figcaption, footer, header, hgroup,
 +
menu, nav, output, ruby, section, summary,
 +
time, mark, audio, video {
 +
  margin: 0;
 +
  padding: 0;
 +
  border: 0;
 +
  font-size: 100%;
 +
  font: inherit;
 +
  vertical-align: baseline;
 +
}
 +
/* HTML5 display-role reset for older browsers */
 +
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section {
 +
  display: block;
 +
}
 +
body {
 +
  line-height: 1;
 +
}
 +
ol, ul {
 +
  list-style: none;
 +
}
 +
blockquote, q {
 +
  quotes: none;
 +
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
  content: '';
 +
  content: none;
 +
}
 +
table {
 +
  border-collapse: collapse;
 +
  border-spacing: 0;
 +
}
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
Line 35: Line 71:
}  
}  
 +
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: 1400px;
-
margin: 0px;
+
width: 950px;
-
padding: 0px;
+
margin-left: auto;
-
border: none;
+
margin-right: auto;
 +
background-color: #fff;
 +
border: 1px solid light gray;
 +
border-radius:                                        15px;
 +
box-shadow: 0px 0px 30px rgba(110,110,110, .8);
}
}
-
/*
 
-
html, body{
 
-
width: 100%;
 
-
height: 100%;
 
-
}*/
 
-
section, footer, nav{
+
#header {
-
display: block;
+
width:100%;
-
}
+
margin-left:auto;
-
+
margin-right:auto;
-
body{
+
}
-
+
 
-
width: 100%;
+
section {
-
height: 100%;
+
min-height: 1300px;
-
+
padding: 20px;
-
background-image: url(../image/bakgrund3.png); /* bakgrund för hela sidan */
+
}
-
}
+
-
+
-
#main_frame {
+
-
min-height: 1600px;
+
-
width: 950px;
+
-
margin: 20px auto;
+
-
border: 1px solid ligth gray;
+
-
border-radius: 15px;
+
-
box-shadow: 0px 0px 30px rgba(110,110,110, .8);
+
-
background: white;
+
-
+
-
}
+
-
header {
+
header {
display: inline-block;
display: inline-block;
position: relative;
position: relative;
-
width: 100%;
+
width: 100%;
}
}
 +
 +
#igem_logo {
 +
width: 500px;
 +
padding: 10px;
 +
padding-top: 30px;
 +
float: right;
 +
}
 +
-
#logo_img{
+
 
-
position: relative;
+
#logo {
-
padding: 10px;
+
width: 300px;
-
}
+
float: left;
-
+
}
-
#header img.logo{
+
 
-
float: left;
+
#home-knapp {
-
width: 150px;
+
position: relative;
-
}
+
z-index: 1;
-
+
float: left;
-
#igem_logo{
+
}
-
position: relative;
+
 
-
padding: 10px;
+
 
 +
 
 +
#n_container {
 +
padding-top: 1px;
 +
height::100px;
 +
width:950px;
 +
clear:both;
}
}
 +
/*
-
#header img.igem_logo{
+
#button_1 {
-
width: 400px;
+
position: relative;left:15px;top:-15px;
-
float: right;
+
float:left;
-
}
+
-
+
-
#navbar {
+
-
background-image: url(../image/layout/menubar.png);
+
-
background-repeat: no-repeat;
+
-
background-position: center right;
+
-
background-size: 93% 55px;
+
-
height: 55px;
+
-
}
+
-
nav {
+
-
}
+
-
+
-
section
+
-
{
+
-
min-height: 1300px;
+
-
padding: 20px;
+
-
}
+
-
+
-
footer
+
-
{
+
-
padding: 20px;
+
-
height: 100px;
+
-
}
+
-
+
-
.home-knapp
+
-
{
+
-
position: relative;left:15px;top:-84px;
+
-
width: 15%;
+
-
float: left;
+
-
z-index: 2;
+
}  
}  
-
.nav-text
+
#navbar {
-
{
+
background-color: #22409a;
-
padding-right: 10px;
+
margin-top: 60px;
-
z-index: 1;
+
width: 94%;
-
/*-webkit-transition: -webkit-transform 0.1s, background 0.1s;*/
+
margin-left: 6%;
-
}
+
height: 55px;
-
+
vertical-align: middle;
-
#list_type1{width: 110px;}#list_type2{width: 80px;}#list_type3{width: 120px;}#list_type4{width: 150px;}
+
text-align: center;
-
+
-
nav ul ul {
+
-
display: none;
+
-
z-index: 1;
+
}
}
 +
*/
-
nav ul li:hover > ul {
+
.sublogo {
-
display: block;
+
-
}
+
-
+
-
nav ul {
+
-
list-style: none;
+
-
position: relative;
+
-
display: inline-table;
+
-
}
+
-
nav ul:after {
+
width: 150px;
-
content: ""; clear: both; display: block;
+
margin-left: 475px;
-
}
+
-
+
-
nav ul li
+
-
{
+
-
padding-top: 1.4%;
+
-
float: left;
+
-
height: 44px;
+
}
}
-
+
 
-
nav ul li a {
+
.logo {
-
text-align: center;
+
padding-top: 40px;
-
display: block;
+
width: 200px;
-
text-decoration: none;
+
float: left;
}
}
-
.nav-text2{
 
-
width: 90px;
 
-
position: relative;
 
-
top: -30px;
 
-
z-index: 1;
 
-
}
 
-
 
-
nav ul li:hover
 
-
{
 
-
background: #0089d1;
 
-
}
 
-
nav ul li:hover img.nav-text2{
 
-
background: none;
 
-
z-index: 3;
 
-
}
 
-
nav ul li:hover li .nav-text
 
-
{
 
-
background: #0089d1;
 
-
 
-
}
 
-
nav ul ul
+
 
-
{
+
.navbar-text {  
-
background: #22409a;
+
 
-
border-radius: 0px;
+
 
-
padding: 0px;
+
-
position: absolute;
+
-
top: 100%;
+
}
}
-
nav ul ul li {
+
 
-
padding-top: 10px;
+
/* NAVBAR code begins */
-
width: 150px;
+
 
-
float: none;  
+
 
-
position: relative;
+
/*
-
}
+
 
-
nav ul ul li a {
+
.nav ul {
-
color: #fff;
+
  text-align: left;
-
font-weight: bold;
+
  display: inline;
-
}
+
  margin: 0;
-
nav ul ul li a:hover {
+
  padding: 15px 4px 17px 0;
-
background: #0089d1;
+
  list-style: none;
-
}
+
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 +
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 +
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 +
}
 +
.nav ul li {
 +
  font: bold 12px/18px sans-serif;
 +
  display: inline-block;
 +
  margin-right: -4px;
 +
  position: relative;
 +
  padding: 15px 20px;
 +
  background: #fff;
 +
  cursor: pointer;
 +
  -webkit-transition: all 0.2s;
 +
  -moz-transition: all 0.2s;
 +
  -ms-transition: all 0.2s;
 +
  -o-transition: all 0.2s;
 +
  transition: all 0.2s;
 +
}
 +
.nav ul li:hover {
 +
  background: #555;
 +
  color: #fff;
 +
}
 +
.nav ul li ul {
 +
  padding: 0;
 +
  position: absolute;
 +
  top: 48px;
 +
  left: 0;
 +
  width: 150px;
 +
  -webkit-box-shadow: none;
 +
  -moz-box-shadow: none;
 +
  box-shadow: none;
 +
  display: none;
 +
  opacity: 0;
 +
  visibility: hidden;
 +
  -webkit-transiton: opacity 0.2s;
 +
  -moz-transition: opacity 0.2s;
 +
  -ms-transition: opacity 0.2s;
 +
  -o-transition: opacity 0.2s;
 +
  -transition: opacity 0.2s;
 +
}
 +
.nav ul li ul li {  
 +
  background: #555;
 +
  display: block;
 +
  color: #fff;
 +
  text-shadow: 0 -1px 0 #000;
 +
}
 +
.nav ul li ul li:hover { background: #666; }
 +
.nav ul li:hover ul {
 +
  display: block;
 +
  opacity: 1;
 +
  visibility: visible;
 +
}
 +
 
 +
.a {
 +
width: 100px; height: 60px;
 +
padding-bottom: 30px;
 +
}
 +
 
 +
*/
 +
 
 +
}
 +
.content {
 +
clear:both;
 +
}
 +
 
 +
 
 +
.igem_logo  {
 +
width: 400px;
 +
float: right;
 +
}
 +
 
 +
 
 +
#bottom-pic {
 +
width: 100%;
 +
height: 200px;
 +
margin-top: 50px;
 +
}
 +
 
 +
#project-description {
 +
padding-top: 30px;
 +
width: 100%;
 +
border-bottom: 1px solid #22409a;
 +
padding-bottom: 10px;
 +
}
 +
 
 +
.project-text {
 +
padding-top: px;
 +
}
 +
 
 +
.first-background-text {
 +
padding-top: px;
 +
}
 +
 
 +
.second-background-text {
 +
padding-top: px;
 +
}
 +
 
 +
#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;
 +
}
 +
 
 +
/* Grid pictures styling ends */
 +
 
 +
 
 +
 
 +
#drop-down ul {
 +
  text-align: left;
 +
  display: inline;
 +
  margin: 0;
 +
  /*padding: 15px 4px 17px 0;*/
 +
  list-style: none;
 +
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 +
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 +
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 +
}
 +
#drop-down ul li {
 +
  font: bold 12px/18px sans-serif;
 +
  display: inline-block;
 +
  margin-right: -4px;
 +
  position: relative;
 +
  padding: 6.5px 0px;
 +
  background: #22409a;
 +
  cursor: pointer;
 +
  -webkit-transition: all 0.2s;
 +
  -moz-transition: all 0.2s;
 +
  -ms-transition: all 0.2s;
 +
  -o-transition: all 0.2s;
 +
  transition: all 0.2s;
 +
}
 +
#drop-down ul li:hover {
 +
  background: #0089d1;
 +
  color: #fff;
 +
}
 +
#drop-down ul li ul {
 +
  padding: 0;
 +
  position: absolute;
 +
  top: 54px;
 +
  left: 0;
 +
  width: 150px;
 +
  -webkit-box-shadow: none;
 +
  -moz-box-shadow: none;
 +
  box-shadow: none;
 +
  display: none;
 +
  opacity: 0;
 +
  visibility: hidden;
 +
  -webkit-transiton: opacity 0.2s;
 +
  -moz-transition: opacity 0.2s;
 +
  -ms-transition: opacity 0.2s;
 +
  -o-transition: opacity 0.2s;
 +
  -transition: opacity 0.2s;
 +
}
 +
#drop-down ul li ul li {
 +
  background: #22409a;
 +
  display: block;
 +
  color: #fff;
 +
  text-shadow: 0 -1px 0 #000;
 +
}
 +
#drop-down ul li ul li:hover { background: #0089d1; }
 +
#drop-down ul li:hover ul {
 +
  display: block;
 +
  opacity: 1;
 +
  visibility: visible;
 +
}
 +
 
 +
#drop-down ul li a {
 +
  display: block;
 +
  text-decoration: none;
 +
  color: #fff;
 +
  font-size: 14px;
 +
  padding-left: 5px;
 +
  z-index: 122112122
 +
}
 +
 
 +
 
 +
 
 +
#navbar {
 +
  width: 900px;
 +
  height: 60px;
 +
  background-color: #22409a;
 +
  margin-left: 50px;
 +
  margin-top: 75px;
 +
}
 +
 
 +
.ad {
 +
margin-left: 5px;
 +
}
 +
 
 +
 
 +
</style>
 +
</html>

Revision as of 18:16, 15 August 2013

Retrieved from "http://2013.igem.org/Template:Team:Uppsala/test"