

#rightColumn .appicon64 {
	-webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
	        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}


.appicon64 {
	position: relative;
	width: 64px;
	height: 64px;
	margin: 12px;
	
	background: #fff;
	
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	        border-radius: 10px;
	
	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
	        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
	
    background: -webkit-linear-gradient(top, #111, #444);
	background:    -moz-linear-gradient(top, #111, #444);
	background:         linear-gradient(top, #111, #444);
}


.appicon64 > .gloss {
	height: 31px;
	width: 64px;
    position: relative;
    position: absolute;
    
	-webkit-border-top-right-radius: 14px;
	   -moz-border-top-right-radius: 14px;
	        border-top-right-radius: 14px;
	
	-webkit-border-top-left-radius: 14px;
	   -moz-border-top-left-radius: 14px;
	        border-top-left-radius: 14px;
	
	-webkit-border-bottom-right-radius: 43px 7px;
	   -moz-border-bottom-right-radius: 43px 7px;
	        border-bottom-right-radius: 43px 7px;
	
	-webkit-border-bottom-left-radius: 36px 7px;
	   -moz-border-bottom-left-radius: 36px 7px;
	        border-bottom-left-radius: 36px 7px;
	
	-webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.6);
  	   -moz-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.6);
	        box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.6);
	
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
	background:    -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
	background:         linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
}


.appicon64 > .icon {
    height: 64px;
	width: 64px;
	position: relative;
}

.appicon64 > .icon > img,
.appicon64 > .icon > a > img {
    /*height: 58px;
    width: 58px;
    padding: 3px;*/

    width: 64px;
    height: 64px;
    padding: 0px;
	
	position: relative;
}












.appicon64 > .info {
    position: absolute;
    z-index: 1000;
    width: 250px;
    right: 0px;
    top: 0px;
    padding: 8px;
    
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1.0);
    font-size: 13px;
    
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 1.0);
    background: rgba(0, 0, 0, 0.9);
    
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 1.0);
       -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 1.0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 1.0);
    
    opacity: 0.0;
    
    -webkit-transition: opacity 0.3s ease-in-out;
       -moz-transition: opacity 0.3s ease-in-out;
            transition: opacity 0.3s ease-in-out;
}


.appicon64 > .icon:hover + .info {
    position: absolute;
    opacity: 1.0;
}



.appicon64 > .info strong {
    font-weight: bold;
}


/* Without moving the positions, if the info overlaps
   another element in layout, even though the opacity
   is 0, it will prevent :hover on those other elements */

.appicon64 > .info.onLeft { right: 10000px; top: 0px; }
.appicon64 > .icon:hover + .info.onLeft { right: 80px; top: 0px; }

.appicon64 > .info.onRight { left: 80px; top: 0px; }
.appicon64 > .icon:hover + .info.onRight { left: 10000px; top: 0px; }

.appicon64 > .info.onBottom { left: -10000px; top: 80px; }
.appicon64 > .icon:hover + .info.onBottom { left: -86px; top: 80px; }



