<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mlms13/pen/Jxtsy?depth=everything&order=popularity&page=6&q=statistics&show_forks=false" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<style class="cp-pen-styles">.sticker-tiles {
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}
.sticker-tiles li {
float: left;
margin: 16px 23px 16px 0;
position: relative;
}
.sticker-tiles li:before,
.sticker-tiles li:after {
bottom: 29px;
box-shadow: 0 30px 4px rgba(0, 0, 0, 0.5);
content: "";
height: 30px;
position: absolute;
width: 48%;
z-index: -1;
}
.sticker-tiles li:before {
left: 2%;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.sticker-tiles li:after {
right: 2%;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
.sticker-tiles li a {
background: #f4f4f4;
border: 1px solid;
border-color: #ddd #bbb #bbb #ddd;
color: #222;
display: block;
font: 14px sans-serif;
height: 42px;
line-height: 19px;
padding: 18px 10px 14px 56px;
position: relative;
text-decoration: none;
-webkit-transition: 340ms;
transition: 340ms;
width: 140px;
}
.sticker-tiles li a:hover {
background: #e8e8e2;
border-color: #ccc;
color: #000;
-webkit-transition: 120ms;
transition: 120ms;
}
.sticker-tiles li a:hover:after {
background-color: #e8e8e2;
}
.sticker-tiles li a:before {
background: #888;
background-image: -webkit-radial-gradient(left bottom, circle, rgba(0, 0, 0, 0.12) 50%, transparent 50%), -webkit-linear-gradient(rgba(0, 0, 0, 0.2), transparent);
background-image: radial-gradient(circle at left bottom, rgba(0, 0, 0, 0.12) 50%, transparent 50%), linear-gradient(rgba(0, 0, 0, 0.2), transparent);
border: 1px solid #fff;
border-radius: 2px;
box-shadow: 0 0 0 2px #888;
content: "";
height: 26px;
left: 10px;
padding-top: 6px;
position: absolute;
text-align: center;
top: 20px;
width: 32px;
}
.sticker-tiles li a:after {
background: #f4f4f4;
background-image: -webkit-linear-gradient(45deg, #fff 25%, #aaa 50%, transparent 50%);
background-image: linear-gradient(45deg, #fff 25%, #aaa 50%, transparent 50%);
border-left: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 4px;
content: "";
height: 10px;
left: 35px;
position: absolute;
top: 18px;
width: 10px;
}
.sticker-tiles li a.blue:before {
background-color: #0ad;
box-shadow: 0 0 0 2px #0ad;
}
.sticker-tiles li a.green:before {
background-color: #bada55;
box-shadow: 0 0 0 2px #bada55;
}
.sticker-tiles li a.purple:before {
background-color: #b6c;
box-shadow: 0 0 0 2px #b6c;
}
.sticker-tiles li a.camera:before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTNFRDgzOUI1OUJCMTFFMkI5QkJGOUI5QTg5RjY4MkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTNFRDgzOUM1OUJCMTFFMkI5QkJGOUI5QTg5RjY4MkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBM0VEODM5OTU5QkIxMUUyQjlCQkY5QjlBODlGNjgyRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBM0VEODM5QTU5QkIxMUUyQjlCQkY5QjlBODlGNjgyRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvZn+/AAAAGGSURBVHjazNTPK0RRFMBxb7yh8Ss/SlH+CRqR8mNGsbZSrGRB9paWkuyVBbYWpChbJaFsKDVFakYjxYyMFMbM8z3TmXpdb/LULEx9mnlv7j333HPPe5bjOBXl/FjlDhgwrhfwhZTKYvFPESVDlx3n5+cKQWNcSe4tt+AS7R7rDuHQ2Nks2lCJM+wWa7jMdw9q0VliI7e4gS2bQrXOsfX/jCZzLQGlVs2uyW+4wAfCqPNY4BOnWmNZIIQ+PNvucmITB3owOc1kGNPGAR4jYixyhG73oCVNewNTGMc6kpgxJkvW9WhEA1rRVEiCLb8iiSgSiLhObRAvmEPcdfJ5pKVceEJG76ekhlKHVTzqqvNGNivowjtGf+nCdEBrc1e84TEormNyfp8UObERPGDAY8yktk3Ib0BpjyhiOmlfeyyszSr9uY1evy+HYh/eazYSrB95nOAca+jwES9tNrb83sKeXo9hAjU+Xw2FgDF9fqWWQd1iVgfY+uT4OZAqJKx//4Ite8BvAQYAKdD4kw8ODi4AAAAASUVORK5CYII=);
}
.sticker-tiles li a.pie:before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTE3QkRBRUQ1OUJBMTFFMkIwRkZBODE1OEFGNTY3MDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTE3QkRBRUU1OUJBMTFFMkIwRkZBODE1OEFGNTY3MDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MTdCREFFQjU5QkExMUUyQjBGRkE4MTU4QUY1NjcwNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MTdCREFFQzU5QkExMUUyQjBGRkE4MTU4QUY1NjcwNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvncNcgAAAF0SURBVHjapNXBKwRRHMDxmbWFKIuDCwc3J2VL4i8QORDh5IIScnHYKJKT3CjacttSUhxctkTJgYN1duC4uVj2pOzB8336qbezM72Z9avPbLuv95vf773ZN65SygmIAYyiH6c4wBXecIFzFCtm6YQeHThW5bGBGD6N354w7Z3vTdaKvKqMdUlY8BlLy9hvjphRbBK12NSFO+FjHmnUmC034wM5xLESocK/WDNbPjIGrtHoWccwCYvo0cm6fQbP5EaHERLqyOg1nPBZF/247GIBD2gJua7JOJfegMFV5DGLLtkwW7Tpth4tbWwZG2druaBbrrfcdUg+S3BtJcakLb+4xCSmkEIWCUs+V7ey7yn7FcvSZh9uVPh40ZNG5Ms3UmhAJ7Iqety6XOoodQ45KXsG4/KoRI0x82DYVv+LE+/h8O5UH/dY9DsPl6qo7E6eUd/zUBuUw9MWX9hDkznfDXgFJOQvN4x2Y4NK8gp4xo60WhY/AgwA3exQQbR3pisAAAAASUVORK5CYII=);
}
.sticker-tiles li a.folder:before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REQzODIzMEQ1OUI5MTFFMjk1NzhGNTIzMzlGQTcyMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REQzODIzMEU1OUI5MTFFMjk1NzhGNTIzMzlGQTcyMTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERDM4MjMwQjU5QjkxMUUyOTU3OEY1MjMzOUZBNzIxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpERDM4MjMwQzU5QjkxMUUyOTU3OEY1MjMzOUZBNzIxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiblzhIAAACZSURBVHjaYvr//z8DGu4F4h9A/AWIzwOxEBY1ODEjiAACDiDWB2JbIO4EYiYGBJgJxAuAmIsBN2AG4ktA/BJmcvF/ysE2kFksUBtOAXENEP9gIA+wAvEDEANkoCkQhwPxbyD+T6aBIH0KQCwKMnAOEOsxUAe8AAW+DAP1ABsTA5XBqIGjBg5LA0F5+T20tPhNoVkgM94DBBgAdjSetlpz+1oAAAAASUVORK5CYII=);
}
</style></head><body>
<ul class="sticker-tiles">
<li><a class="blue camera" href="#">Photo Album: Staff Retreat 2012</a></li>
<li><a class="green pie" href="#">2012 Statistics: Charts and Graphs</a></li>
<li><a class="purple folder" href="#">Documents & Resources</a></li>
</ul>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >// Inspired by some sticker icons that
// I got from istockphoto awhile ago:
// http://www.istockphoto.com/stock-illustration-8968204-education-sticker-icons.php?st=0a31d2b
// Icons from Heydings Icon Font
// http://www.heydonworks.com/article/a-free-icon-web-font
// I converted to data URIs because Firefox
// wasn't playing nice with the whole cross-domain thing
//# sourceURL=pen.js
</script>
</body></html>
