User Uploads

dabblet.css

/**
 * User Uploads
 */


#wrapper {
	margin: 0 auto;
	width: 800px;
}

.userupload {
	text-align: center;
	background: #525252;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	border-radius: 13px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8) inset;
    color: #fff;
    padding: 25px;
    margin-top: 5em;
}

.paperclip {
    background: url('http://s.gravatar.com/images/gravatar-sprite.png');
	background-position: -240px 0;
	width: 31px;
	height: 78px;
	position: relative;
	top: -34px;
	left: -15px;
	z-index: 5000;
	display: block;
	float: left;
}

.unlocked {
    background: url('http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Lock-Unlock-icon.png') no-repeat;
	width: 48px;
	height: 48px;
	position: relative;
	top: -44px;
	right: -40px;
	z-index: 5000;
	display: block;
	float: right;
}

.locked {
    background: url('http://icons.iconarchive.com/icons/deleket/scrap/48/Lock-icon.png') no-repeat;
	width: 48px;
	height: 48px;
	position: relative;
	top: -44px;
	right: -40px;
	z-index: 5000;
	display: block;
	float: right;
}

dabblet.html

<div id="wrapper">

<div class="userupload">
<div class="paperclip"></div>
<div class="unlocked"></div>
  Buy Now
  <br />
  Buy Now
  <br />
  Buy Now
  <br />
</div>

<div class="userupload">
<div class="paperclip"></div>
<div class="locked"></div>
  Buy Now
  <br />
</div>

</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}