Template:Team:Uppsala/index-style

From 2013.igem.org

(Difference between revisions)
Amaron (Talk | contribs)
(Created page with "- Dropdown list code ends: h1 { color:#0089d1; } h3 { color:#0089d1; } #bottom-pic { width: 100%; height: 200px; margin-top: 50px; } /* Code for the...")
Newer edit →

Revision as of 19:30, 22 August 2013

/*Dropdown list code ends */


h1 {

       color:#0089d1;

}

h3 {

       color:#0089d1;

}

  1. bottom-pic {

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


/* Code for the size of content section */

#main_frame { min-height: 1800px; 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;

} /* Content section size code ends */


#main_frame { min-height: 1800px; 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;

}


h1 {

       color:#0089d1;

}

h3 {

       color:#0089d1;

}

  1. bottom-pic {

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

  1. team-div{

width: 100%; margin-left:auto; margin-right:auto; /*border-top: 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; }