/* 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:      -o-transform, 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; }
/**** Base styles ****/



/* required for containers to inherit vertical size from window */

#container { /* border: 1px solid #666;*/
 /* padding: 5px;*/
  margin-bottom: 20px; width:100%; margin:0 auto; }
.element { width: 229px; height: 152px; margin: 5px; float: left; overflow: hidden; position: relative; background: #888; color: #222; }
.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: 468px; }
.variable-sizes .element.height2 { height: 315px; }
.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; }
/**** Example Options ****/

#options { padding-bottom: 1.0em; }
#options h3 { margin-bottom: 0.2em; font-size: 15px; }
#options h4 { font-weight: bold; }
#options ul { margin: 0; list-style: none; }
#options ul ul { margin-left: 1.5em; }
#options li { float: left; margin-bottom: 0.2em; }
#options li a { display: block; padding: 0.4em 0.5em; /*background-color: #DDD*/; color: #222; font-weight: bold; text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); background-image:    -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); background-image:     -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); background-image:      -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); background-image:         linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); text-transform: uppercase; }
#options li a:hover {/* background-color: #5BF; */}
#options li a:active {/* background-color: #39D; -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); */}
#options li a { /*border-left:  1px solid hsla( 0, 0%, 100%, 0.3 ); border-right: 1px solid hsla( 0, 0%, 0%, 0.2 );*/ }
#options li:first-child a { border-radius: 7px 0 0 7px; border-left: none; }
#options li:last-child a { border-radius: 0 7px 7px 0; }
#options li a.selected { /*background-color: #13F*/ text-shadow: none; color: #f10905; }
/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
