/* jQuery Gridly
 * Copyright 2013 Kevin Sylvestre
 *  1.1.4
 */
.gridly, .gridly > :not(.dragging) { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.gridly .dragging { z-index: 800; }

.example { position: relative; }

.example .brick { opacity: 1; cursor: pointer; position: relative; }
.example .brick .delete { display: block; color: white; background: rgba(255, 255, 255, 0.2); width: 40px; height: 40px; top: 0; right: 0; position: absolute; text-align: center; line-height: 40px; }
.example .brick.small { width: 140px; height: 140px; }
.example .brick.large { width: 300px; height: 300px; }
.example .brick.dragging { opacity: 0.8; }
.example .brick:nth-child(20n + 1) { background: #1abc9c; }
.example .brick:nth-child(20n + 2) { background: #16a085; }
.example .brick:nth-child(20n + 3) { background: #2ecc71; }
.example .brick:nth-child(20n + 4) { background: #27ae60; }
.example .brick:nth-child(20n + 5) { background: #3498db; }
.example .brick:nth-child(20n + 6) { background: #2980b9; }
.example .brick:nth-child(20n + 7) { background: #9b59b6; }
.example .brick:nth-child(20n + 8) { background: #8e44ad; }
.example .brick:nth-child(20n + 9) { background: #34495e; }
.example .brick:nth-child(20n + 10) { background: #2c3e50; }
.example .brick:nth-child(20n + 11) { background: #f1c40f; }
.example .brick:nth-child(20n + 12) { background: #f39c12; }
.example .brick:nth-child(20n + 13) { background: #e67e22; }
.example .brick:nth-child(20n + 14) { background: #d35400; }
.example .brick:nth-child(20n + 15) { background: #e74c3c; }
.example .brick:nth-child(20n + 16) { background: #c0392b; }
.example .brick:nth-child(20n + 17) { background: #ecf0f1; }
.example .brick:nth-child(20n + 18) { background: #bdc3c7; }
.example .brick:nth-child(20n + 19) { background: #95a5a6; }
.example .brick:nth-child(20n + 20) { background: #7f8c8d; }