Team:Groningen/CSS3

From 2013.igem.org

(Difference between revisions)
Line 75: Line 75:
   text-decoration: none;
   text-decoration: none;
   vertical-align: middle;
   vertical-align: middle;
 +
  width: 100px;
   }
   }
.button:hover {
.button:hover {

Revision as of 11:39, 31 July 2013

.table{

   width:auto;
   padding:5px;
   height:auto;
   display:table;     

}

/* Code for the characteristics for the tiles */

.tile{

   height:200px;  
   width:200px; 
   float:left;
   margin:0 5px 0 0;
   padding:2px;

}

/* Code for the characteristics for the tiles with text (made a seperate one so this one does not doe anything if you hover over*/

.tileText{

   height:200px;  
   width:200px; 
   float:left;
   margin:0 5px 0 0;
   padding:2px;

}

/* Color-code for the tiles */

.color1{

   background: #fff;

} .color2{

   background-color: transparent;

}

.color3{

   background:#fff;

}

.color4{

   background-color: #fff;

}

/* Color for the mouse hover */

.selection{

    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */

}

/* readmore button http://css-tricks.com/examples/ButtonMaker/# */

.button {

  border-top: 1px solid #80b9ff;
  background: #0067e5;
  background: -webkit-gradient(linear, left top, left bottom, from(#0047ab), to(#0067e5));
  background: -webkit-linear-gradient(top, #0047ab, #0067e5);
  background: -moz-linear-gradient(top, #0047ab, #0067e5);
  background: -ms-linear-gradient(top, #0047ab, #0067e5);
  background: -o-linear-gradient(top, #0047ab, #0067e5);
  padding: 3.5px 7px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: white;
  font-size: 11px;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  vertical-align: middle;
  width: 100px;
  }

.button:hover {

  border-top-color: #0047ab;
  background: #0047ab;
  color: #ffffff;
  }

.button:active {

  border-top-color: #1b435e;
  background: #1b435e;
  }