/* 公共部分 */
body,h1,h2,h3,h4,h5,h6,hr,img,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,a,tr
	{
	margin: 0;
	padding: 0;
}

body,button,input,select,textarea {
	font-size: 14px;
	font-family: Microsoft YaHei, 微软雅黑, Verdana, sans-serif, 宋体;
	background-color: #fff;
	line-height: 18px;
}

body{
	background: url(../img/headerBg.gif) repeat-x;
}

ul,li {
	list-style: none;
}

a {
	text-decoration: none;
	color: #006cbf;
}

a:hover {
	color: #ff9600;
	cursor: pointer;
}

img,input {
	border: none;
}

.wrapper {
	/* max-width: 1000px; */
	margin: 0 auto;
}

#realtime-preview {
	max-width: 1000px;
}

.clearfix:after {
	clear: both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

.clearfix {
	display: block;
	height: 1%;
}

.texthidden {
	text-indent: -9999px;
	white-space: nowrap;
	line-height: 0;
}

.mr20 {
	margin-right: 20px;
}

#header {
	
	height: 50px;
	width:100%;
}

#logo {
	background: url(../img/logo.gif?20130730) no-repeat;
	line-height: 50px;
	cursor: pointer;
	width: 250px;
	height: 50px;
}

#mainSearch {
	float: right;
	margin-top: 10px;
}

.searchBox {
	height: 30px;
	line-height: 30px;
	padding: 0 15px 0 5px;
	background-color: #fff;
	color: #aaa;
	font-size: 14px;
	vertical-align: middle;
}

.searchButton {
	display: inline-block;
	padding: 2px 5px;
	margin-left: 20px;
	*height: 30px;
	height: 30px\9;
	background-color: #ff9600;
	font-size: 18px;
	color: #fff;
	cursor: pointer;
	vertical-align: middle;
}

.searchButton:hover {
	background-color: #ff8000;
}

#mainContent {
	
}

#footer {
	margin-top: 20px;
	background-color: #ececec;
	line-height: 30px;
}
/* END 公共部分 */

/*  INDEX  */
.column {
	margin-top: 10px;
}

.column h2 {
	color: #006cbf;
	font-size: 24px;
	font-weight: normal;
}

.used ul {
	margin-top: 20px;
}

.used  li {
	float: left;
	border: 1px solid #eee;
	margin-right: 10px;
	margin-bottom: 10px;
}

.used a,.coming a {
	height: 60px;
	width: 60px;
	display: block;
}

.latestTool {
	width: 300px;
	float: left;
	margin-top: 20px;
	padding: 10px;
	background-color: #f6fcff;
	position: relative;
	z-index: 1;
}

.latestTool dt {
	float: right;
	font-size: 18px;
	line-height: 24px;
}

.latestTool img {
	float: left;
	margin-right: 10px;
	width: 96px;
}

.toolDescription dt {
	width: 194px;
	overflow: hidden;
	white-space: nowrap; /*不显示的地方用省略号...代替*/
	text-overflow: ellipsis; /* 支持 IE */
	-o-text-overflow: ellipsis; /* 支持 Opera */
}

.latestTool .intro {
	height: 36px;
	float: right;
	width: 194px;
	margin: 5px 0;
	overflow: hidden;
}

.latestTool .tags,.detailTags {
	float: right;
	width: 194px;
	font-size: 12px;
	color: #909090;
}

.boxShadow {
	box-shadow:2px 2px 10px #AAA ;
	-moz-box-shadow: 2px 2px 10px #AAA ;
	-webkit-box-shadow: 2px 2px 10px #AAA ;
}

.detailTags {
	width: 294px;
}

.detail {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	width: 400px;
	padding: 10px;
	background-color: #dff5fe;
}

.detail dt {
	width: 294px;
}

.detailIntro {
	float: right;
	width: 294px;
	margin: 5px 0;
}

.coming  ul {
	margin-top: 20px;
}

.coming h2 {
	color: #aaa;
}

.coming  li {
	float: left;
	border: 1px solid #eee;
	margin-right: 10px;
	margin-bottom: 10px;
}

.advise {
	margin: 30px 0 30px 20px;
	font-size: 16px;
	color: #333;
}

.toolActive {
	z-index: 998;
}

/* END INDEX  */
/*  tools  */

/*  public  */
#header { /*  重置header  */
	/*background: #006cbf url(../img/headerBg.gif) left bottom repeat-x;*/
	height: 55px;
	position: relative;
	z-index: 1;
}

#mainContent textarea,#mainContent input[type='text'] { /*  定义textarea和input边框样式  */
	border: 1px solid #ccc;
}

.toolButton { /*  定义Button样式  */
	padding: 0 10px;
	margin: 5px;
	line-height: 33px;
	height: 33px;
	width: auto;
	overflow: visible;
	background-color: #eaf8ff;
	border-bottom: 1px solid #a8e6ff;
	border-right: 1px solid #a8e6ff;
	border-top: 1px solid #fafdff;
	border-left: 1px solid #fafdff;
	font-weight: bold;
	cursor: pointer;
	color: #666;
	vertical-align: middle;
}

.toolButton:hover {
	color: #006cbf;
}

.buttonSelected { /*  定义Button选中样式  */
	background-color: #bfeaff;
	border-bottom: 1px solid #65d2ff;
	border-right: 1px solid #65d2ff;
	color: #0061ab;
}

.toolUsing {
	margin-top: 30px;
}

.toolInput { /*  定义input样式  */
	line-height: 30px;
	height: 30px;
	width: 300px;
	padding: 0 5px;
	vertical-align: middle;
}

.toolLabel { /*  定义label样式  */
	font-weight: bold;
	color: #006cbf;
}

/*  description  */
.description {
	background-color: #dff5fe;
	padding: 15px 10px;
	margin-top: -4px;
}

.description h2,.intro,.tags {
	width: 874px;
	float: right;
}

.description h2 {
	line-height: 24px;
	font-size: 18px;
}

.description .img {
	float: left;
	margin-right: 10px;
	width: 96px;
}

.description .intro {
	margin: 5px 0;
}

.description .tags {
	font-size: 12px;
	color: #909090;
}

.toolName {
	line-height:24px;
	font-size: 24px;
	color: #777;
	margin-top: 10px;
}
/* 　END description  */

/*  END public  */

/*  左右版式  */
.leftBar {
	float: left;
}

/* .rightBar {
	float: right;
} */

.leftBar textarea,.rightBar textarea {
	width: 410px;
	height: 500px;
}

/* .operateLR {
	float: left;
	width: 136px;
	text-align: center;
	margin: 30px 5px 0 5px;
} */
/*  END 左右版式  */

/*  上下版式  */
.topBar textarea,.bottomBar textarea {
	width: 998px;
	height: 200px;
}

/*  END 上下版式  */

/*  工具切换
.toolsTab {
	margin-bottom: 10px;
	line-height: 40px;
	background-color: #f6fcff;
	font-size: 18px;
}
  

.toolsTab li {
	float: left;
	padding: 0 10px;
	background-color: #e8e8e8;
	color: #000;
	cursor: pointer;
	border-right:1px solid #ccc;
}

.toolsTab li.focus {
	margin-right: 1px;
	margin-top: -1px;
	background-color: #0f5992;
	color: #fff;
	line-height: 42px;
}
*/
/*  END 工具切换  */

/*  表格样式  */
.toolTable {
	text-align: center;
	line-height: 36px;
	border-collapse: collapse;
	border: none;
	margin: 10px 0 20px 0;
}

.toolTable caption {
	margin-bottom: 20px;
	font-size: 24px;
	color: #777;
}

.toolTable th,.toolTable td {
	border: solid #ccc 1px;
}

.toolTable th {
	color: #006cbf;
}

.separateColor {
	background-color: #f4f4f4;
}
/*  END 表格样式  */