Template:Team:Uppsala/styles
From 2013.igem.org
Line 34: | Line 34: | ||
color: #22409a; | color: #22409a; | ||
} | } | ||
- | + | ||
#main_frame { | #main_frame { | ||
Line 64: | Line 64: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#bottom-pic { | #bottom-pic { | ||
Line 221: | Line 73: | ||
#project-description { | #project-description { | ||
- | |||
width: 100%; | width: 100%; | ||
margin-left:auto; | margin-left:auto; | ||
Line 227: | Line 78: | ||
border-bottom: 1px solid #22409a; | border-bottom: 1px solid #22409a; | ||
padding-bottom: 10px; | padding-bottom: 10px; | ||
+ | clear: both; | ||
+ | position: relative; | ||
+ | top: -50px; | ||
} | } | ||
Line 384: | Line 238: | ||
/* Grid pictures styling ends */ | /* Grid pictures styling ends */ | ||
- | + | /* | |
- | </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> | ||
+ | */ | ||
+ | |||
+ | *{ | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | border: none; | ||
+ | } | ||
+ | /* | ||
+ | html, body{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | }*/ | ||
+ | |||
+ | section, footer, nav{ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | body{ | ||
+ | |||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | |||
+ | 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 { | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #logo_img{ | ||
+ | position: relative; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #header img.logo{ | ||
+ | float: left; | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | #igem_logo{ | ||
+ | position: relative; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #header img.igem_logo{ | ||
+ | width: 400px; | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | #navbar { | ||
+ | background-image: url(../image/layout/menubar.png); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center right; | ||
+ | background-size: 93% 55px; | ||
+ | height: 55px; | ||
+ | } | ||
+ | |||
+ | |||
+ | 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 | ||
+ | { | ||
+ | padding-right: 10px; | ||
+ | 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;} | ||
+ | |||
+ | nav ul ul { | ||
+ | display: none; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | nav ul li:hover > ul { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | nav ul { | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | display: inline-table; | ||
+ | } | ||
+ | |||
+ | nav ul:after { | ||
+ | content: ""; clear: both; display: block; | ||
+ | } | ||
+ | |||
+ | nav ul li | ||
+ | { | ||
+ | padding-top: 1.4%; | ||
+ | float: left; | ||
+ | height: 44px; | ||
+ | |||
+ | } | ||
+ | |||
+ | nav ul li a { | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .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 | ||
+ | { | ||
+ | background: #22409a; | ||
+ | border-radius: 0px; | ||
+ | padding: 0px; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | } | ||
+ | nav ul ul li { | ||
+ | padding-top: 10px; | ||
+ | width: 150px; | ||
+ | float: none; | ||
+ | position: relative; | ||
+ | } | ||
+ | nav ul ul li a { | ||
+ | color: #fff; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | nav ul ul li a:hover { | ||
+ | background: #0089d1; | ||
+ | } |
Revision as of 16:01, 15 August 2013
*/ *{ margin: 0px; padding: 0px; border: none; } /* html, body{ width: 100%; height: 100%; }*/ section, footer, nav{ display: block; } body{ width: 100%; height: 100%; 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 { display: inline-block; position: relative; width: 100%; } #logo_img{ position: relative; padding: 10px; } #header img.logo{ float: left; width: 150px; } #igem_logo{ position: relative; padding: 10px; } #header img.igem_logo{ width: 400px; float: right; } #navbar { background-image: url(../image/layout/menubar.png); background-repeat: no-repeat; background-position: center right; background-size: 93% 55px; height: 55px; } 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 { padding-right: 10px; 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;} nav ul ul { display: none; z-index: 1; } nav ul li:hover > ul { display: block; } nav ul { list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { padding-top: 1.4%; float: left; height: 44px; } nav ul li a { text-align: center; display: block; text-decoration: none; } .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 { background: #22409a; border-radius: 0px; padding: 0px; position: absolute; top: 100%; } nav ul ul li { padding-top: 10px; width: 150px; float: none; position: relative; } nav ul ul li a { color: #fff; font-weight: bold; } nav ul ul li a:hover { background: #0089d1; }