/* styles.css */
body {
      font-family: Arial, sans-serif;
      margin: 20px;
      padding: 0;
      background-color: #fff;
}
        
h1 {
    color: #333;
}
p {
    color: #666;
}

.wechat {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            max-width: 75.5%;
            margin: 50px auto;
            align-content: center;
            text-align:center;
            padding-bottom:10px;
        }

.tabs {
    width: 80%;
    margin: 50px auto;
}
.tab-links {
    list-style: none;
    padding: 0;
}
.tab-links a {
    display: inline-block;
    padding: 10px 20px;
    background: #f0f0f0;
    margin-right: 5px;
    text-decoration: none;
    color: #333;
}
.tab-links a.active {
    background: #4CAF50;
    color: white;
}
.tab-content > div {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
}

.tab-content > div.active-content {
    display: block;
}

.wrap{padding:15px 20px 20px 20px;}
.wrap_center{width:960px;margin:0 auto;}

.tcms_box{position:relative;margin-bottom:20px;padding:15px 20px;border:1px solid #ccc;border-radius:3px;background:#fff;box-shadow:0 0 5px #ccc;
*zoom:1;}
.tcms_box:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

/* 文章分类
------------------------------ */
.tcms_sort{float:left;width:100px;}
.tcms_sort a{position:relative;float:left;color:#38e;}
.tcms_sort a:hover{text-decoration:underline;}
	.tcms_sort{float:none;width:auto;margin-bottom:5px;padding-bottom:10px;border-bottom:1px dashed #ddd;}
	.tcms_sort dt{float:left;font-size:12px;line-height:24px;}
	.tcms_sort dd{float:left;margin-left:5px;}
.tcms_sort dd.n a{padding:0 5px;border-radius:3px;background-color:#38e;color:#fff;}

/* 文章列表
------------------------------ */
.tcms_list{float:left;width:100%;}
.tcms_list .list{font-size:14px;line-height:30px;}
.tcms_list .list li{position:relative;zoom:1;}
.tcms_list .list .s{margin-right:4px;color:#999;font-style:normal;}
.tcms_list .list .date{position:absolute;top:0;right:0;color:#777;}

/* 文章标题
------------------------------ */
.tcms_title{padding:10px 20px;}
.tcms_title h1{float:left;padding:10px 0;font:bold 30px/40px "\5fae\8f6f\96c5\9ed1";}
.tcms_title a{color:#777;}
.tcms_title a:hover{color:#333;}
.tcms_title .attr{float:right;color:#777;text-align:right;line-height:30px;}
.tcms_title .author{}
.tcms_title .relate{}

/* 文章内容
------------------------------ */
.tcms_info{font:14px/1.7 "\5b8b\4f53";}
.tcms_info p{margin:0.5em 0;}
.tcms_info blockquote{position:relative;margin:0 0 10px 0;padding:20px 40px;border:1px solid #ddd;border-radius:3px;background:#f3f3f3;}
.tcms_info blockquote:before{content:"“";position:absolute;top:0;left:5px;color:#ddd;font:bold 56px/1 Arial;text-shadow:1px 1px 0 #fff,-1px -1px 0 #ccc;}
.tcms_info blockquote:after{content:"”";position:absolute;bottom:0;right:5px;color:#ddd;font:bold 56px/0.5 Arial;text-shadow:1px 1px 0 #fff,-1px -1px 0 #ccc;}
.tcms_info pre{position:relative;margin:10px 0;padding:25px 20px 10px;border:1px solid #ddd;border-radius:3px;background:#f3f3f3;color:#333;word-wrap:break-word;}
.tcms_info code{font-family:Consolas,Monaco,Courier,"Courier New";font-size:12px;}
.tcms_info code:before{content:"Code Examples";position:absolute;top:10px;left:10px;color:#bbb;font:bold 12px/1 Arial;text-shadow:1px 1px 0 #fff;}
.tcms_info code.html:before{content:"HTML Code";}
.tcms_info code.css:before{content:"CSS Code";}
.tcms_info code.js:before{content:"JavaScript Code";}
.tcms_info code.php:before{content:"PHP Code";}
.tcms_info code ol{list-style:decimal inside;}
.tcms_info table{border-collapse:collapse;font-size:14px;line-height:1.7;}
.tcms_info table th,
.tcms_info table td{padding:3px 5px;border:1px solid #ccc;}
.tcms_info table th{background:#ffc;}

/* 标签
------------------------------ */
.tcms_taglink dt{margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed #ccc;font:bold 14px/20px "\5fae\8f6f\96c5\9ed1";}
.tcms_tag dd{display:inline;margin-right:10px;font-size:12px;line-height:24px;}
.tcms_ref{margin-top:10px;}
.tcms_ref dd{font-size:12px;line-height:24px;}
.tcms_ref dd em{margin:0 6px 0 0;padding:2px 5px;border-radius:2px;background:#ddd;font:10px Tahoma;}


@media screen and (max-width:1079px){
	.fixed_tool{left:auto;right:10px;margin-left:0;}
}

@media screen and (max-width:999px){
	.wrap_center{width:auto;}
	.fixed_tool{display:none;}
}

@media screen and (max-width:799px){
	.tcms_sort{float:none;width:auto;margin-bottom:5px;padding-bottom:10px;border-bottom:1px dashed #ddd;}
	.tcms_sort dt{float:left;font-size:12px;line-height:24px;}
	.tcms_sort dd{float:left;margin-left:10px;}
	.tcms_sort dd.n a:after{display:none;}
	
	.tcms_list{width:100%;}
	
	.tcms_title h1{float:none;}
	.tcms_title .attr{float:none;line-height:24px;text-align:left;}
	.tcms_title .relate{display:none;}
	
	.comment_list li{width:auto;}
}

@media screen and (max-width:599px){
	.wrap{padding:0;}
	.tcms_box{padding:15px;border:none;border-radius:0;box-shadow:0 1px 2px #999}
	
	.tcms_sort dt,
	.tcms_sort dd{width:25%;margin-left:0;}
	
	.tcms_list .list{font-size:12px;line-height:18px;}
	.tcms_list .list li{padding:8px 0;border-bottom:1px dashed #eee;}
	.tcms_list .list .date{display:none;}
	
	.tcms_title h1{padding:0 0 5px 0;font-size:18px;line-height:24px;}
	
}

@media screen and (max-width:479px){
	.tcms_sort dt,
	.tcms_sort dd{width:33%;}
	
	.tcms_list .list .date{display:none;}
}