Template:Team:Uppsala/stylesvision

From 2013.igem.org

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


  1. project-description {

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

.project-text { padding-top: px; }

.background-text { padding-top: px; }

  1. list-color {
       color:#22409a;;

}

  1. grid-matrix {

width: 64%; float: left; padding-top: 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.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(Chassi.png);

}

  1. grid-e {

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

       background-image: url(Society.png);

}

  1. grid-f {

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

       background-image: url(Safty.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; }

/* Grid pictures styling ends */

</style> </html>