jia.xu rocketxujia

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
body{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}


## dabblet.css

* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/

#content_container{display:table-cell;vertical-align: middle; }
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

## dabblet.css

.min {
   min-height: 100px;
   height:auto !important;
   height: 100px;
}

div{ border: 1px solid red;}


## dabblet.css
.facebook {
	position:absolute;
	top:0px;
	background: #3B5A98;
	border: 20px solid rgba(134,134,134,0.5);
	padding: 10px;
	color: #fff;
	text-align: center;
	width: 150px;
	height: 65px;

## dabblet.css
.box{
	width:300px;
	height:300px;
	border: 20px dashed red;
 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYq

## dabblet.css
*{
      margin: 0;
      padding: 0;
    }
    .coke {
      width: 600px;
      height: 400px;
      overflow: auto;
    }

## dabblet.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  h1 {
    width: 1em;
    font-size: 40px;

## dabblet.css
.min {
   min-height: 100px;
   height:auto !important;
   height: 100px;
}

.min-width {
   min-width: 100px;
   width:auto !important;
   width: 100px;

## dabblet.css
.block{
  float:left;
}

.input-wrap{
  display: inline-block;
  width: 180px;
  border: 1px solid red;
}

## dabblet.css
.wrap{
	height:200px;
	background: #f0f0f0;
	display: table;
	width: 100%;
}
.ui-box-vertical{
	display:table-cell;
	vertical-align: middle;
	background: #999;
	/**
	* The first commented line is your dabblet’s title
	*/
	body{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	}

	* { margin: 0; padding: 0; }
	#page{display:table;overflow:hidden;margin:0px auto;}
	:first-child+html #page {position:relative;}/ie7*/
	* html #page{position:relative;}/ie6/

	#content_container{display:table-cell;vertical-align: middle; }
	:first-child+html #content_container{position:absolute;top:50%;}/ie7*/
	* html #content_container{position:absolute;top:50%;}/ie6/

	.min {
	min-height: 100px;
	height:auto !important;
	height: 100px;
	}

	div{ border: 1px solid red;}
	.facebook {
	position:absolute;
	top:0px;
	background: #3B5A98;
	border: 20px solid rgba(134,134,134,0.5);
	padding: 10px;
	color: #fff;
	text-align: center;
	width: 150px;
	height: 65px;
	.box{
	width:300px;
	height:300px;
	border: 20px dashed red;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYq
	*{
	margin: 0;
	padding: 0;
	}
	.coke {
	width: 600px;
	height: 400px;
	overflow: auto;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>

	<style>
	h1 {
	width: 1em;
	font-size: 40px;
	.block{
	float:left;
	}

	.input-wrap{
	display: inline-block;
	width: 180px;
	border: 1px solid red;
	}
	.wrap{
	height:200px;
	background: #f0f0f0;
	display: table;
	width: 100%;
	}
	.ui-box-vertical{
	display:table-cell;
	vertical-align: middle;
	background: #999;