Template:Team:Uppsala/styles

From 2013.igem.org

Revision as of 15:22, 17 August 2013 by Sabrijamal (Talk | contribs)

<style type="text/css">

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
   display: none;

}

  1. top-section { 
   border: none;
   height: 0px;

}

  1. content { 
   border: none;
   width: 99.5%;
   height: 99.5%;
   background-image: url("Background.png");
   position: fixed;
   overflow: auto;
   repeat-x;

}



*{ margin: 0px; padding: 0px; border: none; }


body{

width: 100%; height: 100%;

background-image: url(../image/bakgrund3.png); }

#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(Menubar.png); background-repeat: no-repeat; background-position: center right; background-size: 93% 55px; height: 55px; } 

       #main_content{
        padding: 20px;
       }

       .home-knapp {
               
               position:					relative;left:15px;top:-72px;
               margin-bottom:-71px;

width: 15%; float: left; z-index: 2; 

       }


.nav-text { padding-right: 10px; z-index: 1;

}

#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; 

       top:            -4px;

display: inline-table; }

#nav ul:after { content: ""; clear: both; display: block; }

  1. nav ul li

{ padding-top: 0.8%; float: left; height: 49px;

} 

       #nav ul li a 
       {
               text-align:                     center;

display: block; }

.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;

}

  1. nav ul ul

{ background: #22409a; border-radius: 0px; padding: 0px; 

       margin-left:            0px;

position: absolute; top: 90%; } #nav ul ul li { width: 150px; float: none; position: relative; } #nav ul ul li a { 

                       padding-top:    8%;

color: #fff; font-weight: bold; 

                       text-decoration:	none;

} #nav ul ul li a:hover { background: #0089d1; }

h1 { 

       color:#0089d1;

}

  1. bottom-pic {

width: 100%; height: 200px; margin-top: 50px; }

  1. team-div{

width: 100%; margin-left:auto; margin-right:auto; border-bottom: 1px solid #22409a; clear: both; }

  1. team-pic{

position: center; /*padding-top: 10px;*/ margin-left: 100px; height:400px; width:700px; border:solid 3px; margin-top:10px;

}


.team-text { float: right; padding-left: 1px;

}


  1. profile-div{

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

  1. profile_pic{

position: left; float:left; height:270px; width:250px; /*border:solid 3px;*/ margin-top:20px; }


  1. profile_pic_right{

position: right; /* padding-top: px;*/ float:right; height:270px; width:250px; /*border:solid 3px;*/ margin-top:20px;

}

  1. container_right{

height:270px; padding-top:0px; width:650px; /*border:solid 3px;*/ float:right; margin-top:15px; } /*section * {border: solid 1px;}*/


  1. container_left{

height:270px; padding-top:0px; width:650px; /*border:solid 3px;*/ float:left; margin-top:15px; }


.profile-text { float: right; padding-left: 1px;

}


  1. project-description {

width: 100%; border-bottom: 1px solid #22409a; padding-bottom: 10px; 

       clear:both

}


  1. grid-matrix {

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

       padding-bottom: 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_%281%29.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(Chassi2_%281%29.png);

}

  1. grid-e {

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

       background-image: url(Society_and_safety.png);

}

  1. grid-f {

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

       background-image: url(20130816124745%21Achievements.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; }

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