@charset "UTF-8";
/* CSS Document */

.reflection { position:relative; }
.reflection img {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv; opacity:0.20;
    filter: alpha(opacity='20');
}

/*  commented out the below, it adds a strip under the image, between the image and the reflection
#shade {box-shadow: 0px 3px 3px #888888; }*/

/*width and max-width to match the screenshots class, in imageblock2 and overlay2
*/
.image-block2 { width:100%; max-width:300px; margin:0px 5px; float:left; }

/*i changed the height from a number below to 100 percent, to make it responsive.  
*/
/*this below is dark gray to match the ping pong background (grid background color)
*/.overlay2 { position:absolute; top:0px; left:0px; width:100%; max-width:300px; height:100%;
background-image: -moz-linear-gradient( center bottom, rgb(51,51,51) 80%, rgba(51,51,51,0) 92%);
background-image: -o-linear-gradient( rgba(51,51,51,0) 18%, rgb(51,51,51) 20%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.80, rgb(51,51,51)), color-stop(0.92, rgba(51,51,51,0)));
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}

/*this below is all white
*//*.overlay2 { position:absolute; top:0px; left:0px; width:100%; max-width:300px; height:100%;
background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 80%, rgba(255,255,255,0) 92%);
background-image: -o-linear-gradient( rgba(255,255,255,0) 18%, rgb(255,255,255) 20%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.80, rgb(255,255,255)), color-stop(0.92, rgba(255,255,255,0)));
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}*/

.spacing {
	padding:20px;
}