.floatr {float:right; background: #ffcc66; width:10em; margin:.125em 0 .25em .75em;  padding:.5em .5em .75em .5em; border:solid 2px #cc6666; text-align:center;
}
.floatrpix {float:right; background: #ffcc66; width:10em; margin:.125em 0em .25em .75em;  padding:.5em .5em .75em .5em; border:hidden; decoration:none; text-align:center;
}

.floatr a, .floatr a:visited { color:#330000; text-decoration:none;
     font-weight:900; padding-bottom:.1em; border-bottom:.1em solid #330000; }

.floatrpix a, .floatrpix a:visited { color:#330000; text-decoration:none;
     font-weight:900; padding-bottom:.1em; border-bottom:hidden; }

.floatr a:hover, .floatr a:focus, .floatr a:active,
.floatrpix a:hover, .floatrpix a:focus, .floatrpix a:active {display:block; color:white; background:rgb(255, 150, 5); border-bottom:none; text-decoration:none; padding-bottom:0; }

.floatrpix a:hover, .floatrpix a:focus, .floatrpix a:active {display:block; color:white; background:rgb(255, 150, 5); border:hidden; text-decoration:none; padding-bottom:.25em; }

.floatl {float:left; background: #ffcc66; width:13em; margin:.125em 0em .25em 0em;  padding:.5em .5em .75em .5em; border:solid 2px #cc6666; text-align:center;
}

.floatl a, .floatl a:visited { color:#330000; text-decoration:none;
     font-weight:900; padding-bottom:.1em; border-bottom:.1em solid #330000; }

.floatl a:hover, .floatl a:focus, .floatl a:active {display:block; color:white; background:rgb(255, 150, 5); border-bottom:none; padding-bottom:0; }


/* For .crop to work, insert image in a box with the .crop class applied then adjust parameters until image is where you wish it to be */

/* .crop, .crop1, .crop2, .crop3, */ .cropfloatr {
   float:left;
   margin:0em 0em 0em 0em; border-bottom:none; text-decoration:none;
   overflow:hidden;  /* this is important */
  }



.floatrpix {
   float:left;
   margin:0em 0em 0em 0em; border:hidden; text-decoration:none;
   overflow:hidden; /* this is important */
   }

/* .crop img, .crop1 img, .crop2 img, .crop3 img, */ .cropfloatr img, .floatrpix img { width:200%; margin:0em 0em 0em 0em;}

/* margin call is the heart of the technique, width simply changes the image's size. If .crop box is inside a container, that outer container decides overall width of the .crop dimensions despite how big the photo may be made to be. width:100% makes image shift left and get narrower, width 150% keeps box full column width and moves image to left */

/* .crop:hover, .crop1:hover, .crop2:hover, .crop3:hover,*/ cropfloatr:hover, .floatrpix:hover { overflow:hidden;}

/* .crop1 img:hover { margin:0em 0em 0em -13.13em;}*/

/* .crop2 img:hover { margin:0em 0em 0em -12.8379em;}*/

/* .crop3 img:hover { margin:0em 0em 0em -12.8379em;}
*/
.cropfloatr img:hover, .floatrpix img:hover {margin:0em 0em 0em -10.0em;}

.cropvid { border:solid 2px #cc6666;  }

.crop, .crop1, .crop2, .crop3 { /* this is just for testing how blocks work */ background:transparent; }

div[class^=crop1], div[class^=crop2], div[class^=crop3]  {z-index:0; width:width:14.85em;
   position: relative;  top:0em; left:0em; overflow:hidden;
  padding:0em 0em 0em 0em; margin:0em 0em 0em 0em; clip: rect(auto);}
.crop1 img, .crop2 img, .crop3 img { width:200%;
padding:0em 0em 0em 0em; margin:0em -14.85em -.18em 0em;  }
.crop1 img:hover, .crop2 img:hover, .crop3 img:hover { overflow:hidden; padding:0em 0em -.18em 0em; margin:0em 0em -.18em -14.85em;  }


.grow:hover { width:200%; position:relative; left:-16.5em;}

.pix { width:12.90em;}