BFH Style Box

dabblet.css

/*
 * BFH Style Box
*/

* { margin: 0; padding: 0; }

body {
	background-color: #D7C8AF;
}

.bfh-content {
	height: 400px;
	width: 600px;
	border: 2px solid black;
	background-color: #C5BBA7;
	margin: auto;
	padding: 20px;
	margin-top: 20%;
	font-family: 'Century Gothic', 'Arial';
	position: relative;	
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    
}
	.bfh-content:after {
		content: "";
		height: 400px;
		width: 600px;
		padding: 20px;
		background-color: #A19683;
		position: absolute;
		left: 0;
		top: 9px;
		z-index: -1;		
        -moz-transform: scale(1) rotate(-4deg) translate(0px, 0px) skew(0deg, 0deg);
		-webkit-transform: scale(1) rotate(-4deg) translate(0px, 0px) skew(0deg, 0deg);
        -o-transform: scale(1) rotate(-4deg) translate(0px, 0px) skew(0deg, 0deg);
        -ms-transform: scale(1) rotate(-4deg) translate(0px, 0px) skew(0deg, 0deg);
        transform: scale(1) rotate(-4deg) translate(0px, 0px) skew(0deg, 0deg);      
		-webkit-border-radius: 6px;
    	-moz-border-radius: 6px;
    	border-radius: 6px;
	}
	.bfh-content img {
		position: absolute;
		z-index: 99;
		left: -240px;
		top: 50px;
	}
	.bfh-content .video {
		margin-top: 30px;
		z-index: 1000;
	}
	.bubble {
		font-family: 'Allan';
		font-size: 22px;
		background-color: white;
		position: absolute;
		top: -75px;
		left: -100px;
		z-index: 100;
		height: 90px;
		text-align: center;
		width: 263px;
		line-height: 90px;
		text-transform: uppercase;
		border: 2px solid black;		
   		 -webkit-border-radius: 1px;
    	-moz-border-radius: 1px;
   		 border-radius: 1px; 
        -moz-transform: scale(1) rotate(-2deg) translate(0px, 0px) skew(0deg, 0deg);
		-webkit-transform: scale(1) rotate(-2deg) translate(0px, 0px) skew(0deg, 0deg);
        -o-transform: scale(1) rotate(-2deg) translate(0px, 0px) skew(0deg, 0deg);
        -ms-transform: scale(1) rotate(-2deg) translate(0px, 0px) skew(0deg, 0deg);
        transform: scale(1) rotate(-2deg) translate(0px, 0px) skew(0deg, 0deg);          
	}
		.bubble:after {
			content: "";
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
			border-right: 20px solid transparent;
			border-bottom: 27px solid white;
			position: absolute;
			bottom: -18px;
			left: -35px;
       		 -moz-transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);
			-webkit-transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);
        	-o-transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);
        	-ms-transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);
        	transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);             
		}
	.bfh-content h2 {
		text-shadow: 2px
 		1px 0 black, 2px 1px 0 black, -2px 1px 0 black, -2px -1px 0 black, 2px 
		-1px 0 black, 1px 2px 0 black, 1px 2px 0 black, -1px 2px 0 black, -1px 
		-2px 0 black, 1px -2px 0 black, 2px 2px 0 black, 2px 2px 0 black, -2px 
		2px 0 black, -2px -2px 0 black, 2px -2px 0 black, 1px 1px 0 black, 1px 
		1px 0 black, -1px 1px 0 black, -1px -1px 0 black, 1px -1px 1px black;
		color: white;		
        -moz-border-radius-topleft: 4px;
        -moz-border-radius-topright: 4px;
        -moz-border-radius-bottomright: 0px;
        -moz-border-radius-bottomleft: 0px;
        -webkit-border-radius: 4px 4px 0px 0px;
        border-radius: 4px 4px 0px 0px;        
		background-color: #8B342F;
		font-size: 16px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		width: 96%;
		padding-left: 2%;
		padding-right: 2%;
		top: 0;
		left: 0;
		text-align: right;
		border-bottom: 2px solid black;
	}
		.bfh-content h2:before {
			content: "";
			width: 370px;
			height: 20px;
			position: absolute;
			top: -2px;
			left: -2px;
			background-color: #D7C8AF;
			border-bottom-right-radius: 6px;
			border: 2px solid black;
			border-top: none;
			border-left: none;
			z-index: 20;
		}
		.bfh-content h2:after {
			content: "";
			color: #8B342F;
			width: 0;
			height: 0;
			border-left: 26px solid transparent;
			border-right: 0px solid transparent;
			border-bottom: 27px solid #8B342F;		
			position: absolute;
			top: -3px;
			left: 344px;
			z-index: 30;
		}
			

dabblet.html

<link href='http://fonts.googleapis.com/css?family=Allan:bold' rel='stylesheet' type='text/css'>
<div class="bfh-content">
	<img src="http://cdn.battlefieldheroes.com/en/static/20120419100012/user/../images/registration/register_form_cta_bg.png">
	<p class="bubble">The game is launching!</p>
	<h2>Awesome Trailer</h2>
	<iframe class="video" height="360" frameborder="0" width="600" allowfullscreen="" src="//www.youtube.com/embed/videoseries?list=PL4D7337BCA9F22ABD&amp;wmode=transparent&amp;autohide=1&amp;rel=0&amp;showinfo=0"></iframe>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}