/* Media.css */

#animationList {
	/*height: 100px;*/
	padding: 0;
}

#animationList .media-item {
	margin: 0;
	/*width: 100px;*/
}

/*#animationList .media-preview {
	width: 100px;
}*/

#animationList .media-details {
	font-size: 11px;
}

/* Animation Icons
================================================================== */
[class^="anim-"],[class*=" anim-"] { 
	background-position: -9px 3px, -27px -100px; 
	width: 100px; 
	height: 85px; 
	display: inline-block; 
	margin: 10px; 
}

.subtitle {
	color: #333;
	font-weight: bold;
	margin-top: 80px;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.subtitle:hover {
	overflow: visible;
}

#animationOptions .control-label {
	font-weight: bold;
	font-size: 12px;
}

/* None */
.anim-none { background-position: -9px 3px, 29px 9px; }

/* Fade */
.anim-fadein { background-position: -9px 3px, -1104px 3px; }
.anim-fadeout { background-position: -9px 3px, -1206px 3px; }

/* Move */
.anim-moveintop, .anim-moveoutbottom { background-position: -9px 3px, -999px 3px; }
.anim-moveinleft, .anim-moveoutright { background-position: -9px 3px, -700px -2px; }
.anim-moveinright, .anim-moveoutleft { background-position: -9px 3px, -804px -2px; }
.anim-moveinbottom, .anim-moveouttop { background-position: -9px 3px, -899px 3px; }

/* Rotate */
.anim-rotatein90ccw { background-position: -9px 3px, -1382px 3px; }
.anim-rotatein90cw { background-position: -9px 3px, -1308px 3px; }
.anim-rotatein180ccw { background-position: -9px 3px, -1588px 3px; }
.anim-rotatein180cw { background-position: -9px 3px, -1487px 3px; }
.anim-rotatein360ccw { background-position: -9px 3px, -1790px 3px; }
.anim-rotatein360cw { background-position: -9px 3px, -1691px 3px; }
.anim-rotatein720ccw { background-position: -9px 3px, -1878px 3px; }
.anim-rotatein720cw { background-position: -9px 3px, -1951px 3px; }

/* Scale */
.anim-scalein { background-position: -9px 3px, -395px 7px; }
.anim-scaleinx { background-position: -9px 3px, -178px -4px; }
.anim-scaleiny { background-position: -9px 3px, -77px 8px; }
.anim-scaleout { background-position: -9px 3px, -277px 7px; }
.anim-scaleoutx { background-position: -9px 3px, -604px -4px; }
.anim-scaleouty { background-position: -9px 3px, -499px 8px; }

/*  Custom */
.anim-rotatescaleflipin { background-position: -9px 3px, -2197px 5px; }
.anim-rotatescaleflipout { background-position: -9px 3px, -2054px 5px; }

[class^="anim-"]:hover,
[class*=" anim-"]:hover, 
.anim-selected {
	background-position-y: 87px, -94px;
}