Template:Team:Uppsala/styles

From 2013.igem.org

(Difference between revisions)
 
(131 intermediate revisions not shown)
Line 2: Line 2:
<style type="text/css">
<style type="text/css">
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
h1{ border:none;
-
    display: none;
+
padding-top: 10px;
-
}
+
-
#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;   
 
-
}
 
-
 
-
 
-
 
-
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;
}
}
-
 
body{
body{
Line 61: Line 19:
height: 100%;
height: 100%;
-
background-image: url(../image/bakgrund3.png); /* bakgrund för hela sidan */
+
background-image: url(../image/bakgrund3.png);  
}
}
-
+
 
-
#main_frame {
+
#header {
-
min-height: 1600px;
+
display: inline-block;
-
width: 950px;
+
position: relative;
-
margin: 20px auto;
+
width: 100%;
-
border: 1px solid ligth gray;
+
}
-
border-radius: 15px;
+
-
box-shadow: 0px 0px 30px rgba(110,110,110, .8);
+
-
background: white;
+
-
+
-
}
+
-
+
#logo_img{
#logo_img{
Line 99: Line 51:
background-image: url(https://static.igem.org/mediawiki/2013/e/e5/Menubar.png);
background-image: url(https://static.igem.org/mediawiki/2013/e/e5/Menubar.png);
background-repeat: no-repeat;
background-repeat: no-repeat;
-
background-position: center right;  
+
background-position:         center right;  
background-size: 93% 55px;
background-size: 93% 55px;
-
height: 55px;
+
height: 55px;
}
}
-
 
-
 
-
footer
 
-
{
 
-
padding: 20px;
 
-
height: 100px;
 
-
}
 
-
 
-
.home-knapp
 
-
{
 
-
position: relative;left:15px;top:-70px;
 
-
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 li:hover > ul {
+
        #main_content{
-
display: block;
+
        padding: 20px;
-
}
+
        }
-
+
-
nav ul {
+
-
list-style: none;
+
-
position: relative;
+
-
display: inline-table;
+
-
}
+
-
nav ul:after {
+
     
-
content: ""; clear: both; display: block;
+
-
}
+
-
+
-
nav ul li
+
-
{
+
-
padding-top: 0.6%;
+
-
float: left;
+
-
height: 50px;
+
 +
h1 {
 +
        color:#0089d1;
}
}
 +
 +
h3 {
 +
        color:#0089d1;
 +
}
 +
 +
#bottom-pic {
 +
width: 100%;
 +
height: 200px;
 +
margin-top: 50px;
 +
}
 +
 +
#team-div{
 +
width: 100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
border-top: 1px solid #22409a;
 +
clear: both;
 +
       
 +
 +
}
 +
 +
#team-pic{
 +
position: center;
 +
/*padding-top: 10px;*/
 +
margin-left: 100px;
 +
height:400px;
 +
width:700px;
-
nav ul li a {
+
margin-top:10px;
-
text-align: center;
+
         margin-bottom:20px;
-
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: relative;
 
-
top: 100%;
 
-
display: none;
 
-
z-index: 1;
 
}
}
-
nav ul ul li {
+
 
-
padding-top: 10px;
+
 
-
width: 150px;
+
.team-text {
-
float: none;  
+
float: right;
-
position: relative;
+
padding-left: 1px;
-
}
+
 
-
nav ul ul li a {
+
}
-
color: #fff;
+
 
-
font-weight: bold;
+
 
-
}
+
#profile-div{
-
nav ul ul li a:hover {
+
width: 100%;
-
background: #0089d1;
+
margin-left:auto;
-
}
+
margin-right:auto;
 +
border-bottom: 1px solid #22409a;
 +
margin-bottom: 0px;
 +
margin-top: 0px;
 +
clear: both;
 +
       
 +
}
 +
 
 +
#profile_pic{
 +
position: left;
 +
float:left;
 +
height:227px;
 +
width:210px;
 +
/*border:solid 3px;*/
 +
margin-top:20px;
 +
}
 +
 
 +
 
 +
#profile_pic_right{
 +
position: right;
 +
/* padding-top: px;*/
 +
float:right;
 +
height:227px;
 +
width:210px;
 +
/*border:solid 3px;*/
 +
margin-top:20px;
 +
 
 +
}
 +
 
 +
#container_right{
 +
height:240px;
 +
padding-top:0px;
 +
width:650px;
 +
/*border:solid 3px;*/
 +
float:right;
 +
margin-top:15px;
 +
}
 +
/*section * {border: solid 1px;}*/
 +
 
 +
 
 +
#container_left{
 +
height:240px;
 +
padding-top:0px;
 +
width:650px;
 +
/*border:solid 3px;*/
 +
float:left;
 +
margin-top:15px;
 +
}
 +
 
 +
 
 +
.profile-text {
 +
float: right;
 +
padding-left: 1px;
 +
 
 +
}
 +
 
 +
 
 +
#project-description {
 +
width: 100%;
 +
border-bottom: 1px solid #22409a;
 +
padding-bottom: 10px;
 +
        clear:both
 +
 
 +
}
 +
 
 +
 
 +
#grid-matrix {
 +
width: 64%;
 +
float: left;
 +
padding-top: 20px;
 +
        padding-bottom: 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/f/f1/Vision_%281%29.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/6/68/Chassi2_%281%29.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/5/50/Society_and_safety.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/archive/6/64/20130816124745%21Achievements.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;
 +
}
 +
 
 +
/* CSS parts starts here */
 +
 
 +
#sub_content_parts{
 +
width:100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
border-bottom: 1px solid #22409a;
 +
margin-bottom: 10px;
 +
margin-top:10px;
 +
clear:both;
 +
position:relative;
 +
}
 +
 
 +
#parts_title{
 +
height:30px;
 +
width:200px;
 +
border:solid 3px;
 +
overflow:auto;
 +
}
 +
 
 +
#parts_text{
 +
height:270px;
 +
width:800px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#chassi{
 +
height:270px;
 +
width:800px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#carotenoid{
 +
height:270px;
 +
width:800px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#resveratrol{
 +
height:270px;
 +
width:800px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#saffron{
 +
height:270px;
 +
width:800px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#sweetner{
 +
height:270px;
 +
width:800px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#chromoprotein_collection{
 +
height:270px;
 +
width:800px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#parts_table{
 +
height:270px;
 +
width:800px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
/* CSS for parts ends here */
 +
 
 +
 
 +
/* CSS for the button instructors & supervisors in team starts here */
 +
 
 +
#sub_content_advisor{
 +
width:100%;
 +
height:4000px;
 +
border:solid 3px;
 +
}
 +
 
 +
#advisor_title{
 +
height:50px;
 +
width:800px;
 +
/*border:solid 3px;*/
 +
overflow:auto;
 +
float:left;
 +
}
 +
 
 +
#advisor1{
 +
height:270;
 +
width:250;
 +
float:left;
 +
border:solid 3px;
 +
clear:both;
 +
margin-left:100px;
 +
margin-top:10px;
 +
}
 +
 
 +
#advisor2{
 +
height:270;
 +
width:250;
 +
float:right;
 +
margin-top:10px;
 +
border:solid 3px;
 +
margin-right:100px;
 +
}
 +
 +
#advisor_text1{
 +
height:270;
 +
width:350;
 +
float:left;
 +
border:solid 3px;
 +
clear:both;
 +
margin-left:50px;
 +
margin-top:10px;
 +
}
 +
 
 +
#advisor_text2{
 +
height:270;
 +
width:350;
 +
float:right;
 +
border:solid 3px;
 +
margin-right:50px;
 +
margin-top:10px;
 +
}
 +
 
 +
#sub_content_instructor{
 +
width:100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
border-bottom: 1px solid #22409a;
 +
margin-bottom: 10px;
 +
margin-top:10px;
 +
clear:both;
 +
position:relative;
 +
/*border: yellow solid 3px;*/
 +
}
 +
 
 +
#instructor_title{
 +
height:50px;
 +
width:800px;
 +
border: solid 3px;
 +
overflow:auto;
 +
float:left;
 +
margin-top:10px;
 +
}
 +
 
 +
#instructor_left{
 +
height:270;
 +
width:250;
 +
float:left;
 +
border:solid 3px;
 +
clear:both;
 +
margin-top:10px;
 +
}
 +
 
 +
#instructor_text_right{
 +
height:270px;
 +
width:645px;
 +
float:right;
 +
margin-top:10px;
 +
border:solid 3px;
 +
}
 +
 
 +
#instructor_right{
 +
height:270;
 +
width:250;
 +
float:right;
 +
border:solid 3px;
 +
margin-top:20px;
 +
}
 +
 
 +
#instructor_text_left{
 +
height:270;
 +
width:640;
 +
float:left;
 +
border:solid 3px;
 +
margin-top:20px;
 +
}
 +
 
 +
/* CSS for the button instructors & supervisors in team ends here */
 +
 
 +
/* CSS for attribution starts here*/
 +
 
 +
#attribution_title{
 +
height:30px;
 +
width:800px;
 +
border:solid 3px;
 +
float:left;
 +
overflow:auto;
 +
}
 +
 
 +
#sub_cont{
 +
width:100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
border-bottom: 1px solid #22409a;
 +
margin-bottom: 10px;
 +
margin-top:10px;
 +
clear:both;
 +
position:relative;
 +
/*border: yellow solid 3px;*/
 +
}
 +
 
 +
#attribution1{
 +
height:270px;
 +
width:250px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:110px;
 +
}
 +
 
 +
#attribution1_text{
 +
height:270px;
 +
width:640px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#attribution2{
 +
height:270px;
 +
width:250px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
#attribution2_text{
 +
height:270px;
 +
width:640px;
 +
border:solid 3px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:10px;
 +
}
 +
 
 +
/* CSS for attribution ends here*/

Latest revision as of 16:43, 10 September 2013