jlyu/dabblet.css

## dabblet.css


body {
	padding: 0px;
	margin: 0px;
	font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "STHeiti", "Monaco";
	background-color: #D6D4D2;
	background-image: url("/static/img/bg.png");
	min-width: 900px;
}


a:link, a:visited, a:active {
	color: #2e8b57;
	text-decoration: none;
}

a:hover {
	color: #A52A2A;
	text-decoration: non-underline;
}


/* id */

#respond form {
	margin:0;
	padding:0;
}
#respond p{ margin: 8px 0 10px 0; }
#respond input[type="text"] { width: 40%; }
#respond textarea {
	width: 80%;
	height: 100px;
}
#respond label { color: #696969; }

#others { width:68%; }

#respond input, #respond textarea, #others {
	background-color: #fff;
	border: 2px solid rgba(128, 128, 160, 0.15);
	padding: 6px;
	font-family:"PT Serif, Georgia, Helvetica Neue, Arial, sans-serif, Monaco";
	color: #4b4b4b;
	font-size: 14px;
	-webkit-border-radius: 5px;
	margin-bottom: 8px;
	margin-top: -12px;
}


#respond input:focus, #respond textarea:focus {
	border: 2px dotted #efefef;
	background-color: rgba(238, 238, 238, 1);
}

#respond .submit {
	position:relative;
	left: 80%;
	top: 10px;
	border: none;
	cursor: pointer;
	color: #EEE; font-size: 20px;
	background-color: #777;
	padding: 10px 40px 10px 40px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.42);
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.46);
	border-bottom: 1px solid rgba(0, 0, 0, 0.42);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	background: -webkit-gradien(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #999),
	    color-stop(0.62, #ccc)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #999 23%,
	    #ccc 62%
	);
}

#respond .submit:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #666;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #666),
	    color-stop(0.62, #999)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #666 23%,
	    #999 62%
	);
}

#respond .submit:active { position: relative; top: 1px; }

#comment-box {
	width: 1024px;
	margin: 30px auto 0px auto;
	background-color: #FFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 8px;
	border: 2px solid rgba(0,0,0,0.25);
	padding: 10px;
	font-size: 14px;
	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 10.42);
	-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 10.42);
}

#reply-box {
	width: 1000px;
	margin: 10px auto 0px auto;
	background-color: #FFECEC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 8px;
	border: 2px solid rgba(0,0,0,0.45);
	padding: 10px;
	color: #696969;
	font-size: 14px;
	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42);
	-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42);
}

#more-reply-box {
	width: 1000px;
	margin: 10px auto 0px auto;
	background-color: #EEE;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 8px;
	border: 2px solid rgba(0,0,0,0.45);
	padding: 10px;
	color: #1C1C1C;
	font-size: 14px;
	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42);
	-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42);
}


/* class */
.secretmsg {
	 color: #A52A2A;
	 margin: 10px 0px 10px 10px;
	 background-color: transparent;
	 background-repeat: repeat-y;
}


.sep {
	margin: 10px 0px 10px 0px;
	border-top: 2px solid #f0f0f0;
}

.guest {
	color: #296386;
}

.reply_btn {
	float: right

}

.topline{
	padding-top:3em;
	padding-left:15em;
}


## dabblet.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Chain GuestBook</title>
<!--
        <link rel="stylesheet" href="style.css" media="all" type="text/css" />
        <script type="text/javascript" src="xxx.js" ></script>
-->
</head>

<body>


<hr />

<div id="respond" class="topline">
<form action="/" method="post" id="commentform">

<p></p>
<textarea name="comment" id="commentbox" placeholder="Leave your message here.." tabindex="1"></textarea>

<p><input type="text" id="author" name="author" placeholder="访客昵称(必须)" required tabindex="2" />
<label for="name">Name (required)</label></p>

<p><input type="text" id="email" name="email" placeholder="留下你的邮箱,第一时间获悉主人的回复" required tabindex="3" />
<label for="email">Email (required, not published)</label></p>

<p><input type="text" id="url" name="url" placeholder="你来自哪里" tabindex="4" />
<label for="email">Webpage (Optional)</label></p>

<p>
<div id="others">

<input type="checkbox" name="secretwords" />
<label for="secretwords">遵守<a href="/" target="_blank">发言规则</a></label>

<input type="checkbox" name="secretwords" />
<label for="secretwords">悄悄话?</label>

<input name="submit" class="submit" type="button" id="submit" tabindex="5" value="留言" />

</div>

</p>


</form>
</div>

<div class="sep"></div>


<div id="comment-box">
<div class="comments" comment_id="1">
	<div class="content">
		<div class="guest"><a href="/" target="_blank">Guest_Name</a>
			<span class="post_by">  | 2012-05-14 16:56:11</span>
			<span class="reply_btn"> ·Reply </span>
		</div>
		<p class="secretmsg"><img src="http://t3.qpic.cn/mblogpic/1a8e3cfcd1fd486601b6/2000"></img><strong>该留言仅主人可看</strong></p>
	</div>
</div>
</div>


<div id="comment-box">
<div class="comments" comment_id="2">
	<div class="content">
		<div class="guest">Guest_Name
			<span class="post_by">  | 2012-05-14 16:56:11</span>
			<span class="reply_btn"> ·Reply </span>
		</div>
	<p class="text">1 一阵好一阵不好，周期性变化 2 6-7 有时三四十分钟午觉 3 是的（可能做不到每天做不到十五分钟但上下浮动不超过两天五分钟</p>

<div id="reply-box">
	<p class="text">chain: 已回复</p>

</div>

<div id="more-reply-box">
	<p class="text">Guest_Name: 再回复</p>
</div>


</div>
</div>
</div>


</body>
</html>

## settings.json
{"view":"split","fontsize":"50","seethrough":"","prefixfree":"1","page":"css"}



	body {
	padding: 0px;
	margin: 0px;
	font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "STHeiti", "Monaco";
	background-color: #D6D4D2;
	background-image: url("/static/img/bg.png");
	min-width: 900px;
	}


	a:link, a:visited, a:active {
	color: #2e8b57;
	text-decoration: none;
	}

	a:hover {
	color: #A52A2A;
	text-decoration: non-underline;
	}


	/* id */

	#respond form {
	margin:0;
	padding:0;
	}
	#respond p{ margin: 8px 0 10px 0; }
	#respond input[type="text"] { width: 40%; }
	#respond textarea {
	width: 80%;
	height: 100px;
	}
	#respond label { color: #696969; }

	#others { width:68%; }

	#respond input, #respond textarea, #others {
	background-color: #fff;
	border: 2px solid rgba(128, 128, 160, 0.15);
	padding: 6px;
	font-family:"PT Serif, Georgia, Helvetica Neue, Arial, sans-serif, Monaco";
	color: #4b4b4b;
	font-size: 14px;
	-webkit-border-radius: 5px;
	margin-bottom: 8px;
	margin-top: -12px;
	}


	#respond input:focus, #respond textarea:focus {
	border: 2px dotted #efefef;
	background-color: rgba(238, 238, 238, 1);
	}

	#respond .submit {
	position:relative;
	left: 80%;
	top: 10px;
	border: none;
	cursor: pointer;
	color: #EEE; font-size: 20px;
	background-color: #777;
	padding: 10px 40px 10px 40px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.42);
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.46);
	border-bottom: 1px solid rgba(0, 0, 0, 0.42);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	background: -webkit-gradien(
	linear,
	left bottom,
	left top,
	color-stop(0.23, #999),
	color-stop(0.62, #ccc)
	);
	background: -moz-linear-gradient(
	center bottom,
	#999 23%,
	#ccc 62%
	);
	}

	#respond .submit:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #666;
	background: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.23, #666),
	color-stop(0.62, #999)
	);
	background: -moz-linear-gradient(
	center bottom,
	#666 23%,
	#999 62%
	);
	}

	#respond .submit:active { position: relative; top: 1px; }

	#comment-box {
	width: 1024px;
	margin: 30px auto 0px auto;
	background-color: #FFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 8px;
	border: 2px solid rgba(0,0,0,0.25);
	padding: 10px;
	font-size: 14px;
	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 10.42);
	-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 10.42);
	}

	#reply-box {
	width: 1000px;
	margin: 10px auto 0px auto;
	background-color: #FFECEC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 8px;
	border: 2px solid rgba(0,0,0,0.45);
	padding: 10px;
	color: #696969;
	font-size: 14px;
	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42);
	-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42);
	}

	#more-reply-box {
	width: 1000px;
	margin: 10px auto 0px auto;
	background-color: #EEE;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 8px;
	border: 2px solid rgba(0,0,0,0.45);
	padding: 10px;
	color: #1C1C1C;
	font-size: 14px;
	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42);
	-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42);
	}


	/* class */
	.secretmsg {
	color: #A52A2A;
	margin: 10px 0px 10px 10px;
	background-color: transparent;
	background-repeat: repeat-y;
	}


	.sep {
	margin: 10px 0px 10px 0px;
	border-top: 2px solid #f0f0f0;
	}

	.guest {
	color: #296386;
	}

	.reply_btn {
	float: right

	}

	.topline{
	padding-top:3em;
	padding-left:15em;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Chain GuestBook</title>
	<!--
	<link rel="stylesheet" href="style.css" media="all" type="text/css" />
	<script type="text/javascript" src="xxx.js" ></script>
	-->
	</head>

	<body>



	<hr />

	<div id="respond" class="topline">
	<form action="/" method="post" id="commentform">

	<p></p>
	<textarea name="comment" id="commentbox" placeholder="Leave your message here.." tabindex="1"></textarea>

	<p><input type="text" id="author" name="author" placeholder="访客昵称(必须)" required tabindex="2" />
	<label for="name">Name (required)</label></p>

	<p><input type="text" id="email" name="email" placeholder="留下你的邮箱,第一时间获悉主人的回复" required tabindex="3" />
	<label for="email">Email (required, not published)</label></p>

	<p><input type="text" id="url" name="url" placeholder="你来自哪里" tabindex="4" />
	<label for="email">Webpage (Optional)</label></p>

	<p>
	<div id="others">

	<input type="checkbox" name="secretwords" />
	<label for="secretwords">遵守<a href="/" target="_blank">发言规则</a></label>

	<input type="checkbox" name="secretwords" />
	<label for="secretwords">悄悄话?</label>

	<input name="submit" class="submit" type="button" id="submit" tabindex="5" value="留言" />

	</div>

	</p>


	</form>
	</div>

	<div class="sep"></div>


	<div id="comment-box">
	<div class="comments" comment_id="1">
	<div class="content">
	<div class="guest"><a href="/" target="_blank">Guest_Name</a>
	<span class="post_by"> \| 2012-05-14 16:56:11</span>
	<span class="reply_btn"> ·Reply </span>
	</div>
	<p class="secretmsg"><img src="http://t3.qpic.cn/mblogpic/1a8e3cfcd1fd486601b6/2000"></img><strong>该留言仅主人可看</strong></p>
	</div>
	</div>
	</div>


	<div id="comment-box">
	<div class="comments" comment_id="2">
	<div class="content">
	<div class="guest">Guest_Name
	<span class="post_by"> \| 2012-05-14 16:56:11</span>
	<span class="reply_btn"> ·Reply </span>
	</div>
	<p class="text">1 一阵好一阵不好，周期性变化 2 6-7 有时三四十分钟午觉 3 是的（可能做不到每天做不到十五分钟但上下浮动不超过两天五分钟</p>

	<div id="reply-box">
	<p class="text">chain: 已回复</p>

	</div>

	<div id="more-reply-box">
	<p class="text">Guest_Name: 再回复</p>
	</div>



	</div>
	</div>
	</div>


	</body>
	</html>