Template: aspect-ratio locked Divs floating to center with outline

dabblet.css

/**
 * Template: aspect-ratio locked Divs floating to center with outline
 */

.container {
	text-align: center;
}

.image-wrapper {
	display: inline-block;
	width: 100%;
	max-width: 600px;
	
	background-size:100%;
	background: url(http://i.imgur.com/VkUpwPi.png) no-repeat;
}

.image {
	width:100%;
	height:0;
	padding-top:66.667%; /* 4x3 aspect ratio */ 
	
	position: relative; /* necessary to keep the position: absolute contained*/
}

.image-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	
	/*background: url(http://i.imgur.com/HeYHtzI.png);*/
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 5px solid rgba(0,0,0,0.5);
}

dabblet.html

<div class="container">
	<div class="image-wrapper">
		<div class="image">
			<div class="image-overlay"></div>
		</div>
	</div>
	<div class="image-wrapper">
		<div class="image">
			<div class="image-overlay"></div>
		</div>
	</div>
	<div class="image-wrapper">
		<div class="image">
			<div class="image-overlay"></div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}