"

From 2014.igem.org

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {

 z-index: 2;

}

.isotope-hidden.isotope-item {

 pointer-events: none;
 z-index: 1;

}

/**** Isotope CSS3 transitions ****/

.isotope, .isotope .isotope-item {

 -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
     -ms-transition-duration: 0.8s;
      -o-transition-duration: 0.8s;
         transition-duration: 0.8s;

}

.isotope {

 -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
     -ms-transition-property: height, width;
      -o-transition-property: height, width;
         transition-property: height, width;

}

.isotope .isotope-item {

 -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
     -ms-transition-property:     -ms-transform, opacity;
      -o-transition-property:         top, left, opacity;
         transition-property:         transform, opacity;

}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {

 -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
     -ms-transition-duration: 0s;
      -o-transition-duration: 0s;
         transition-duration: 0s;

}

/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling {

 -webkit-transition: none;
    -moz-transition: none;
     -ms-transition: none;
      -o-transition: none;
         transition: none;

}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */ /*html, body {

 height: 100%;

}*/

1. container {

 border: 1px solid #666;
 padding: 5px;
 margin-bottom: 20px;

}

.element {

 width: 110px;
 height: 110px;
 margin: 5px;
 float: left;
 overflow: hidden;
 position: relative;
 background: #888;
 color: #222;
 -webkit-border-top-right-radius: 1.2em;
     -moz-border-radius-topright: 1.2em;
         border-top-right-radius: 1.2em;

}

.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); } .element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } .element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } .element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } .element.transition { background: #0F8; background: hsl( 144, 100%, 50%); } .element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } .element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } .element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } .element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } .element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }

.element * {

 position: absolute;
 margin: 0;

}

.element .symbol {

 left: 0.2em;
 top: 0.4em;
 font-size: 3.8em;
 line-height: 1.0em;
 color: #FFF;

} .element.large .symbol {

 font-size: 4.5em;

}

.element.fake .symbol {

 color: #000;

}

.element .name {

 left: 0.5em;
 bottom: 1.6em;
 font-size: 1.05em;

}

.element .weight {

 font-size: 0.9em;
 left: 0.5em;
 bottom: 0.5em;

}

.element .number {

 font-size: 1.25em;
 font-weight: bold;
 color: hsla(0,0%,0%,.5);
 right: 0.5em;
 top: 0.5em;

}

.variable-sizes .element.width2 { width: 230px; }

.variable-sizes .element.height2 { height: 230px; }

.variable-sizes .element.width2.height2 {

 font-size: 2.0em;

}

.element.large, .variable-sizes .element.large, .variable-sizes .element.large.width2.height2 {

 font-size: 3.0em;
 width: 350px;
 height: 350px;
 z-index: 100;

}

.clickable .element:hover {

 cursor: pointer;

}

.clickable .element:hover h3 {

 text-shadow:
   0 0 10px white,
   0 0 10px white
 ;

}

.clickable .element:hover h2 {

 color: white;

}