Sizes

dabblet.css

#invite{
min-width:200px;
max-width:400px;
width:200px;
height:108px;
border:1px solid #274d72;
border-left:0;
border-right:0;
margin:20px auto;
background: rgb(120,162,200);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc4YTJjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTc3YjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(120,162,200,1) 0%, rgba(57,119,177,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(120,162,200,1)), color-stop(100%,rgba(57,119,177,1)));
background: -webkit-linear-gradient(top, rgba(120,162,200,1) 0%,rgba(57,119,177,1) 100%);
background: -o-linear-gradient(top, rgba(120,162,200,1) 0%,rgba(57,119,177,1) 100%);
background: -ms-linear-gradient(top, rgba(120,162,200,1) 0%,rgba(57,119,177,1) 100%);
background: linear-gradient(to bottom, rgba(120,162,200,1) 0%,rgba(57,119,177,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78a2c8', endColorstr='#3977b1',GradientType=0 );}
#center{
width:160px;
height:70px;
margin:10px auto;
padding:5px;
border-radius:10px;
border:2px solid #4979a7;
box-shadow:inset 0 0 2px rgba(255,255,255,0.3);
text-align:center;
font-weight:bold;
color:#fff;
text-shadow:0 -1px 0 #3768a2;
background: rgb(120,162,200);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc4YTJjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTc3YjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(120,162,200,1) 0%, rgba(57,119,177,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(120,162,200,1)), color-stop(100%,rgba(57,119,177,1)));
background: -webkit-linear-gradient(top, rgba(120,162,200,1) 0%,rgba(57,119,177,1) 100%);
background: -o-linear-gradient(top, rgba(120,162,200,1) 0%,rgba(57,119,177,1) 100%);
background: -ms-linear-gradient(top, rgba(120,162,200,1) 0%,rgba(57,119,177,1) 100%);
background: linear-gradient(to bottom, rgba(120,162,200,1) 0%,rgba(57,119,177,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78a2c8', endColorstr='#3977b1',GradientType=0 );
}


#before_rack{
float:left;
margin:-2px -23px;
background:url(https://dl.dropbox.com/u/94346812/yoin/ui/img/border_ti.png) no-repeat;
width:30px;height:120px;}

#after_rack{
float:right;
margin-top:-106px;
margin-right:-30px;
background:url(https://dl.dropbox.com/u/94346812/yoin/ui/img/broder_ti2.png) no-repeat;
width:30px;height:120px;}

.price{
font-size:35px;
font-weight:900;
padding:0;}
.price:after{
	content:'€';
}
.menos:before{
	content:'-';
}
p{
margin:-5px 35px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
font-size:25px;
letter-spacing:3px;}


/* Sizes */

#invite:first-child{
width:400px;
}
#invite:first-child #center{
width:360px;}

#invite:last-child{
min-width:200px;
max-width:400px;
width:200px;
}

dabblet.html

<div id="invite">
<div id="before_rack">
	
</div>

<div id="center">

<span class="menos price">199,99</span>
<p>olà hombre</p>
</div>
<div id="after_rack">
	
</div>
</div>
<hr>
<div id="invite">
<div id="before_rack">
	
</div>

<div id="center">

<span class="menos price">2</span>
<p>invitar</p>
</div>
<div id="after_rack">
	
</div>
</div>
<hr>
<img src="https://dl.dropbox.com/u/94346812/yoin/ui/img/invitar.png"> <- this is an image

settings.json

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