简约响应式布局样式

  1 @font-face {
  2   font-family: ‘FontAwesome‘;
  3   font-style: normal;
  4   font-weight: normal;
  5 }
  6 * {
  7   margin: 0;
  8   padding: 0;
  9 }
 10 body {
 11   background: #eee;
 12   color: #444;
 13   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
 14   font-size: 14px;
 15   text-shadow: 0 0 1px transparent;
 16   color:#505050;
 17 }
 18 @media screen and (max-width: 1260px) {
 19   body {
 20     margin: 0px;
 21   }
 22 }
 23 @media screen and (max-width: 600px) {
 24   body {
 25     font-size: 13px;
 26   }
 27 }
 28 h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}
 29 h1 {font-size: 1.8em;}
 30 h2 {font-size: 1.5em;}
 31 h3 {font-size: 1.3em;}
 32 a {text-decoration: none;color: #258fb8;}
 33 a:hover {text-decoration: underline;}
 34 #home{
 35     margin: 0 auto;
 36     width: 90%;
 37     background-color: #fff;
 38     padding: 20px;
 39     margin-top: 20px;
 40     margin-bottom: 20px;
 41     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 42     border-radius: 20px;
 43 }
 44 #tbCommentBody {width: 100%;}
 45 #blogTitle {width:22%;margin-top: -10px;text-align: center;}
 46 .alignright {float: right;}
 47 .clearfix {zoom: 1;}
 48 .clearfix:before,.clearfix:after {content: "";display: table;}
 49 .clearfix:after {clear: both;}
 50 #header, #main, #footer {width: 100%;margin: 0 auto;}
 51 @media screen and (max-width: 1260px) {
 52   #main {
 53     width: 100%;
 54   }
 55 }
 56 #mainContent {
 57   width: 75%;
 58   float: right;
 59   margin-left: 10px;
 60 }
 61 @media screen and (max-width: 1260px) {
 62   #main-col {
 63     width: 100%;
 64     margin-right: -300px;
 65   }
 66   #home {
 67       padding:0px;
 68       width:100%;
 69       margin-top: -20px;
 70       padding-top: 20px;
 71   }
 72 }
 73 @media screen and (max-width: 900px) {
 74   #main-col {
 75     margin-right: 0;
 76     float: none;
 77   }
 78 }
 79 @media screen and (max-width: 1260px) {
 80   #wrapper {
 81     margin-right: 300px;
 82   }
 83 }
 84 @media screen and (max-width: 900px) {
 85   #wrapper {
 86     margin-right: 0;
 87   }
 88 }
 89 #header {
 90   text-shadow: 0 0 1px #fff;
 91   margin: 20px auto 30px;
 92   position: relative;
 93   height: 60px;
 94   color: #999;
 95 }
 96 #header a {
 97   color: #999;
 98 }
 99 #header a:hover {
100   color: #258fb8;
101   text-decoration: none;
102 }
103 #header h1 {
104   font-weight: normal;
105   font-size: 30px;
106 }
107 #header h2 {
108   font-weight: normal;
109   font-size: 0.9em;
110   margin-top: 10px;
111   margin-left: 30px;
112 }
113 #header #navigator {
114   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
115   width: 100%;
116   font-size: 16px;
117     border-bottom: 1px solid #ededed;
118     border-top: 1px solid #ededed;
119     height: 50px;
120     line-height: 50px;
121     clear: both;
122     margin-top: 25px;
123 }
124 #header #navigator ul {
125   list-style: none;
126 }
127 #header #navigator ul li {
128   float: left;
129   width: 10%;
130   text-align: center;
131   margin-right: 15px;
132 }
133 #header .blogStats {
134   float: right;
135   font-size: 13px;
136 }
137 .topicListFooter {
138   margin-top:30px;
139   margin-bottom: 30px;
140   margin-right: 0 !important;
141 }
142 .topicListFooter a {
143   display: inline !important;
144   padding: 10px 20px;
145   background: #ddd;
146   color: #999;
147   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
148   text-shadow: 0 0 1px #fff;
149   border-radius: 5px;
150 }
151 .topicListFooter a:hover {
152   background: #258fb8;
153   color: #fff;
154   text-decoration: none;
155   text-shadow: none;
156 }
157 .topicListFooter .prev:before {
158   content: ‘\f053‘;
159   padding-right: 10px;
160   font-family: FontAwesome;
161 }
162 .topicListFooter .next:after {
163   content: ‘\f054‘;
164   padding-left: 10px;
165   font-family: FontAwesome;
166 }
167 article {
168   -webkit-box-shadow: 1px 2px 3px #ddd;
169   box-shadow: 1px 2px 3px #ddd;
170   background: #fff;
171 }
172 article.page {
173   padding-left: 20px;
174 }
175 article.page .icon {
176   display: none;
177 }
178 .postIcon:before {
179   content: ‘\f016‘;
180 }
181 article.photo .icon:before {
182   content: ‘\f030‘;
183 }
184 article.link .icon:before {
185   content: ‘\f0c1‘;
186 }
187 article.link .title a:after {
188   content: ‘\f08e‘;
189   color: #999;
190   font: 12px FontAwesome;
191   padding-left: 10px;
192   vertical-align: super;
193 }
194 /******************************************以下自定义样式***********************************************/
195 #MySignature{
196 border-top: 2px solid #ccc;
197     padding-top: 20px;
198 }
199 .pager{
200     border-bottom: 1px dashed #ddd;
201     padding-bottom: 30px;
202 margin-bottom: -30px;
203 }
204 #blog-calendar{
205   width:0px;
206   height:0px;
207   display: none !important;
208 }
209 #TopViewPostsBlock ul li{
210     white-space: nowrap;
211     overflow: hidden;
212     text-overflow: ellipsis;
213     width: 100%;
214     display: inline-block;
215     height: 30px;
216     line-height: 30px;
217 }
218 .day .dayTitle{
219       display: none !important;
220 }
221 //去掉广告
222 #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{
223     display: none !important;
224 }
225 .postTitle, .entrylistPosttitle {
226   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
227   font-size: 1.8em;
228   padding: 20px 20px 15px 0px;
229   background: #fff;
230   border-radius: 10px 10px 0px 0px;
231   white-space: nowrap;
232   overflow: hidden;
233   text-overflow: ellipsis;
234 }
235 .entrylistPostSummary, .postCon, .postBody {
236   /*padding: 0 20px 15px 0px;*/
237   -webkit-box-shadow: 1px 2px 3px #ddd;
238   box-shadow: 0 2px 0 #ddd;
239   background: #fff;
240   position: relative;
241 }
242 .postDesc, .entrylistItemPostDesc {
243   padding: 0px 20px 15px 0px;
244   color: #999;
245   font-size: 0.9em;
246   line-height: 16px;
247   position: relative;
248   min-height: 16px;
249   background: #fff;
250   border-bottom: 1px dashed #ccc;
251 }
252 #blog-calendar {
253   display: none;
254 }
255 @media screen and (max-width: 600px) {
256   .postCon {
257     padding-left: 0px;
258   }
259 }
260 .postIcon {
261   height: 0px;
262   margin-right: 25px;
263   position: relative;
264   top: 25px;
265   left: 25px;
266   color: #258fb8;
267 }
268 @media screen and (max-width: 600px) {
269   article header .icon {
270     display: none;
271   }
272 }
273 .postIcon:before {
274   position: absolute;
275   font: 32px FontAwesome;
276   top: 0;
277   left: 0;
278   width: 32px;
279   text-align: center;
280 }
281 article header time {
282   color: #999;
283   font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
284   margin-bottom: 5px;
285   display: block;
286   line-height: 1;
287 }
288 article header .title {
289   font-weight: normal;
290 }
291 article header .title a {
292   color: #444;
293 }
294 article header .title a:hover {
295   color: #258fb8;
296   text-decoration: none;
297 }
298 #cnblogs_post_body {
299   text-align: justify;
300   line-height: 1.6;
301 }
302 #cnblogs_post_body p,
303 #cnblogs_post_body blockquote,
304 #cnblogs_post_body ul,
305 #cnblogs_post_body ol,
306 #cnblogs_post_body dl,
307 #cnblogs_post_body table,
308 #cnblogs_post_body iframe,
309 #cnblogs_post_body h3,
310 #cnblogs_post_body h4,
311 #cnblogs_post_body h5,
312 #cnblogs_post_body h6,
313 #cnblogs_post_body .video-container {
314   margin-top: 15px;
315 }
316 #cnblogs_post_body blockquote {
317   border-top: 1px solid #ddd;
318   border-bottom: 1px solid #ddd;
319   font-style: italic;
320   font-family: "Georgia", serif;
321   font-size: 1.2em;
322   padding: 0 30px 15px;
323 }
324 #cnblogs_post_body blockquote footer {
325   border-top: none;
326   font-size: 0.8em;
327   line-height: 1;
328   margin: 20px 0 0;
329   padding-top: 0;
330 }
331 #cnblogs_post_body blockquote footer cite:before {
332   content: ‘—‘;
333   color: #ccc;
334   padding: 0 0.5em;
335 }
336 #cnblogs_post_body code,
337 #cnblogs_post_body pre {
338   font-family: Monaco, Menlo, Consolas, Courier New, monospace;
339 }
340 #cnblogs_post_body code {
341   background: #eee;
342   color: #666;
343   padding: 0 5px;
344   margin: 0 2px;
345   font-size: 0.9em;
346   border: 1px solid #ddd;
347   -webkit-border-radius: 3px;
348   border-radius: 3px;
349 }
350 #cnblogs_post_body pre {
351   background: #eee;
352   overflow: auto;
353   padding: 7px 15px;
354   -webkit-border-radius: 2px;
355   border-radius: 2px;
356 }
357 #cnblogs_post_body pre code {
358   background: none;
359   padding: 0;
360   margin: 0;
361   border: none;
362   -webkit-border-radius: 0;
363   border-radius: 0;
364 }
365 #cnblogs_post_body ul ul,
366 #cnblogs_post_body ol ul,
367 #cnblogs_post_body dl ul,
368 #cnblogs_post_body ul ol,
369 #cnblogs_post_body ol ol,
370 #cnblogs_post_body dl ol,
371 #cnblogs_post_body ul dl,
372 #cnblogs_post_body ol dl,
373 #cnblogs_post_body dl dl {
374   margin-top: 0;
375 }
376 #cnblogs_post_body h1,
377 #cnblogs_post_body h2 {
378   font-weight: bold;
379   border-bottom: 1px solid #ddd;
380   padding-bottom: 10px;
381   margin-top: 20px;
382 }
383 #cnblogs_post_body h3,
384 #cnblogs_post_body h4,
385 #cnblogs_post_body h5,
386 #cnblogs_post_body h6 {
387   font-weight: normal;
388   background: #eee;
389     border-radius: 6px;
390     color: Red;
391     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
392     height: 25px;
393     line-height: 25px;
394     margin: 18px 5px !important;
395     padding: 8px;
396     opacity: 0.8;
397     border: 1px dashed #aaa;
398 }
399 .postBody img, 
400 .entrylistPostSummary img, .postCon img,
401 .postBody video {
402   max-width: 100%;
403   height: auto;
404   border: none;
405 }
406 #cnblogs_post_body iframe {
407   border: none;
408 }
409 #cnblogs_post_body .caption {
410   display: block;
411   margin-top: 5px;
412   color: #999;
413   position: relative;
414   font-size: 0.9em;
415   padding-left: 25px;
416 }
417 #cnblogs_post_body .caption:before {
418   content: ‘\f040‘;
419   position: absolute;
420   font: 1.3em FontAwesome;
421   position: absolute;
422   left: 0;
423   top: 3px;
424 }
425 #cnblogs_post_body .video-container {
426   position: relative;
427   padding-bottom: 56.25%;
428   padding-top: 30px;
429   height: 0;
430   overflow: hidden;
431 }
432 #cnblogs_post_body .video-container iframe,
433 #cnblogs_post_body .video-container object,
434 #cnblogs_post_body .video-container embed {
435   position: absolute;
436   top: 0;
437   left: 0;
438   width: 100%;
439   height: 100%;
440   margin-top: 0;
441 }
442 #cnblogs_post_body .pullquote {
443   float: right;
444   border: none;
445   padding: 0;
446   margin: 1em 0 0.5em 1.5em;
447   text-align: left;
448   width: 45%;
449   font-size: 1.5em;
450 }
451 #blog-comments-placeholder, #comment_form {
452   padding: 20px;
453   background: #fff;
454   -webkit-box-shadow: 1px 10px 10px #ddd;
455   box-shadow: 10px 10px 10px #ddd;
456   margin-bottom: 50px;
457     border: 1px solid #ccc;
458 padding-top:0;
459 }
460 .feedback_area_title {
461   margin-bottom: 15px;
462   font-size: 1.8em;
463 }
464 .feedbackItem {
465   border-bottom: 1px dashed #CCC;
466   margin-bottom: 10px;
467   padding: 5px;
468 }
469 .color_shine {background: rgb(226, 242, 255);}
470 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
471 #comment_form .title {
472   font-weight: normal;
473   margin-bottom: 15px;
474 }
475 #ad_under_post_holder {
476   display: none;
477 }
478 .entrylistTitle {
479   color: #999;
480   font-weight: normal;
481   margin-bottom: 30px;
482   text-shadow: 0 0 1px #fff;
483 }
484 .entrylistTitle:before {
485   font-family: FontAwesome;
486   content: ‘\f07b‘;
487   padding-right: 15px;
488 }
489 .archive {
490   -webkit-box-shadow: 1px 2px 3px #ddd;
491   box-shadow: 1px 2px 3px #ddd;
492   border-bottom: 1px solid #ddd;
493   margin-bottom: 50px;
494 }
495 .archive article {
496   -webkit-box-shadow: none;
497   box-shadow: none;
498 }
499 .archive article .post-content {
500   margin-bottom: 0;
501 }
502 #sideBar{
503   width: 22%;
504   line-height: 1.8em;
505   float: left;
506 }
507 @media screen and (max-width: 900px) {
508   #sideBar {
509     float: none;
510     width: 100%;
511   }
512 }
513 .catListLink, .catListMyTeams, .catListComment, .catListFeedback {
514   display: none;
515 }
516 .search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank {
517   background: #fff;
518   -webkit-box-shadow: 1px 2px 3px #ddd;
519   box-shadow: 0px 5px 5px #ddd;
520   margin-bottom: 30px;
521   word-wrap: break-word;
522   border-radius: 10px;
523   margin-top: 10px;
524   border: 1px solid #ddd;
525 }
526 #blog-sidecolumn h3, .newsItem h3 {
527   padding: 15px 20px;
528   font-size: 1em;
529   border-bottom: 1px solid #ddd;
530   font-weight: normal;
531 }
532 #blog-sidecolumn ul, .newsItem #blog-news {
533   font-size: 0.9em;
534   padding: 15px 20px;
535 }
536 #blog-sidecolumn ul,
537 #blog-sidecolumn ol,
538 #blog-sidecolumn dl {
539   list-style: none;
540 }
541 #blog-sidecolumn ul ul,
542 #blog-sidecolumn ol ul,
543 #blog-sidecolumn dl ul,
544 #blog-sidecolumn ul ol,
545 #blog-sidecolumn ol ol,
546 #blog-sidecolumn dl ol,
547 #blog-sidecolumn ul dl,
548 #blog-sidecolumn ol dl,
549 #blog-sidecolumn dl dl {
550   list-style: disc;
551   margin-left: 20px;
552 }
553 #q {
554   background: #fff;
555   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
556   font-style: italic;
557   font-size: 1em;
558   padding: 10px 15px;
559   border: 1px solid #ddd;
560   width: 100%;
561   -webkit-box-sizing: border-box;
562   -moz-box-sizing: border-box;
563   box-sizing: border-box;
564   color: #999;
565   height: 100%;
566 }
567 #q:focus {
568   color: #444;
569 }
570 /*隐藏搜索框中的无用组件*/
571 .mySearch {
572   display: none;
573 }
574 
575 #sideBar .tag small {
576   margin-left: 15px;
577   color: #999;
578 }
579 #sideBar .tag small:before {
580   content: ‘(‘;
581 }
582 #sideBar .tag small:after {
583   content: ‘)‘;
584 }
585 #sideBar .twitter li {
586   border-bottom: 1px solid #ddd;
587   padding: 15px 20px;
588   font-size: 0.9em;
589 }
590 #sideBar .twitter li:last-of-type {
591   border-bottom: none;
592 }
593 #sideBar .twitter small {
594   display: block;
595   margin-top: 10px;
596   color: #999;
597   line-height: 1;
598 }
599 #sideBar .tagcloud .entry {
600   padding-right: 5px;
601 }
602 #sideBar .tagcloud a {
603   margin-right: 10px;
604   display: inline-block;
605 }
606 #footer {
607   color: #999;
608   margin-bottom: 50px;
609   font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
610   text-shadow: 0 0 1px #fff;
611   text-align:center;
612   margin: 30px 0px 50px;
613 }
614 .entry .gist {
615   background: #eee;
616   border: 1px solid #ddd;
617   margin-top: 15px;
618   padding: 7px 15px;
619   -webkit-border-radius: 2px;
620   border-radius: 2px;
621   text-shadow: 0 0 1px #fff;
622   line-height: 1.6;
623   overflow: auto;
624   color: #666;
625 }
626 .entry .gist .gist-file {
627   border: none;
628   font-family: inherit;
629   margin: 0;
630   font-size: 0.9em;
631 }
632 .entry .gist .gist-file .gist-data {
633   background: none;
634   border-bottom: none;
635 }
636 .entry .gist .gist-file .gist-data pre {
637   padding: 0 !important;
638   font-family: Monaco, Menlo, Consolas, Courier New, monospace;
639 }
640 .entry .gist .gist-file .gist-meta {
641   background: none;
642   color: #999;
643   margin-top: 5px;
644   padding: 0;
645   text-shadow: 0 0 1px #fff;
646   font-size: 100%;
647 }
648 .entry .gist .gist-file .gist-meta a {
649   color: #258fb8;
650 }
651 .entry .gist .gist-file .gist-meta a:visited {
652   color: #258fb8;
653 }
654 figure.highlight {
655   background: #eee;
656   border: 1px solid #ddd;
657   margin-top: 15px;
658   padding: 7px 15px;
659   -webkit-border-radius: 2px;
660   border-radius: 2px;
661   text-shadow: 0 0 1px #fff;
662   line-height: 1.6;
663   overflow: auto;
664   position: relative;
665   font-size: 0.9em;
666 }
667 figure.highlight figcaption {
668   color: #999;
669   margin-bottom: 5px;
670   text-shadow: 0 0 1px #fff;
671 }
672 figure.highlight figcaption a {
673   position: absolute;
674   right: 15px;
675 }
676 figure.highlight pre {
677   border: none;
678   padding: 0;
679   margin: 0;
680 }
681 figure.highlight table {
682   margin-top: 0;
683   border-spacing: 0;
684 }
685 figure.highlight .gutter {
686   color: #999;
687   padding: 7px 10px 7px 5px !important;
688   border-right: 1px solid #ddd;
689   text-align: right;
690 }
691 figure.highlight .code {
692   padding: 7px 7px 7px 10px !important;
693   border-left: 1px solid #fff;
694   color: #666;
695 }
696 pre .comment,
697 pre .template_comment,
698 pre .diff .header,
699 pre .doctype,
700 pre .pi,
701 pre .lisp .string,
702 pre .javadoc {
703   color: #93a1a1;
704   font-style: italic;
705 }
706 pre .keyword,
707 pre .winutils,
708 pre .method,
709 pre .addition,
710 pre .css .tag,
711 pre .request,
712 pre .status,
713 pre .nginx .title {
714   color: #859900;
715 }
716 pre .number,
717 pre .command,
718 pre .string,
719 pre .tag .value,
720 pre .phpdoc,
721 pre .tex .formula,
722 pre .regexp,
723 pre .hexcolor {
724   color: #2aa198;
725 }
726 pre .title,
727 pre .localvars,
728 pre .chunk,
729 pre .decorator,
730 pre .built_in,
731 pre .identifier,
732 pre .vhdl,
733 pre .literal,
734 pre .id {
735   color: #268bd2;
736 }
737 pre .attribute,
738 pre .variable,
739 pre .lisp .body,
740 pre .smalltalk .number,
741 pre .constant,
742 pre .class .title,
743 pre .parent,
744 pre .haskell .type {
745   color: #b58900;
746 }
747 pre .preprocessor,
748 pre .preprocessor .keyword,
749 pre .shebang,
750 pre .symbol,
751 pre .symbol .string,
752 pre .diff .change,
753 pre .special,
754 pre .attr_selector,
755 pre .important,
756 pre .subst,
757 pre .cdata,
758 pre .clojure .title {
759   color: #cb4b16;
760 }
761 pre .deletion {
762   color: #dc322f;
763 }
764 .feedbackListSubtitle { position: relative;}
765 .feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;}
766 .cnblogs_code_toolbar {display: none;}
767 #cnblogs_post_body {overflow: hidden;}
768 #cnblogs_post_body ol { padding-left: 40px;}
769 #cnblogs_post_body ul { margin-left: 35px;}
770 .fixedReadRank { position: fixed; top: 20px; width: 270px; }
771 .fixedRecRank { position: fixed; top: 360px; width: 270px; }
772 figure.highlight { margin-top: 0; padding: 0;}
773 figure table {width: 100%; margin: 0 !important;}
774 #cnblogs_post_body pre { padding: 0; }
775 #cnblogs_post_body th, #cnblogs_post_body td { padding: 0; }
776 .cnblogs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;}
777 .cnblogs_code th {border: 1px solid silver; padding: 3px;}
778 .cnblogs_code { padding: 0;}
779 /*评论标题*/
780 .feedback_area_title {
781     padding:10px;
782     font-size:24px;
783     font-weight:bold;
784     color:#aaa;
785     border-bottom:1px dashed #ccc;
786 }
787 .feedbackListSubtitle {
788     font-size:12px;
789     color:#888;
790 }
791 .feedbackListSubtitle a {
792     color:#888;
793 }
794 .comment_quote {
795     background:#FCFAAC;
796     padding:15px;
797     border:1px solid #CCC;
798 }
799 #commentform_title {
800     color:#aaa;
801     background-image:none;
802     background-repeat:no-repeat;
803     margin-bottom:10px;
804     padding:10px 20px 10px 10px;
805     font-size:24px;
806     font-weight:bold;
807     border-bottom:1px dashed #ccc;
808 }
809 /*评论框*/
810 #comment_form {
811     margin:10px 0;
812     padding:25px;
813     border-radius: 10px;
814     height: 343px;
815     overflow: hidden;
816 }
817 .commentform {
818     margin:10px 0;
819     padding:10px 20px;
820     background:#fff;
821 }
822 /*评论输入域*/
823 #tbCommentBody {
824     font-family:‘MIcrosoft Yahei‘;
825     margin-top:10px;
826     background:white;
827     color:#333;
828     border:2px solid #fff;
829     box-shadow:inset 0 0 8px #aaa;
830     height:120px;
831     font-size:14px;
832     min-height:120px;
833     border-radius: 10px;
834 }
835 /*评论条目*/
836 .feedbackItem {
837     font-size:14px;
838     line-height:24px;
839     margin:10px 0;
840     padding:20px;
841 }
842 .feedbackListSubtitle {
843     font-weight:normal;
844 }
845 
846 /*green_channel*/
847 #green_channel {
848     text:align:right;
849     padding-left:0px;
850     font-weight:normal;
851     font-size:13px;
852     width:100%;
853     border:1px dashed #ccc;
854     color:#fff;
855     border-radius:4px;
856     margin:5px auto;
857 }
858 @media screen and (max-width: 768px) {
859   body {
860     font-size: 13px;
861   }
862   #main{padding:0px !important;}
863   #mainContent{width: 92%;float: right;margin: 0px 4%;}
864   #sideBar {display: none;}
865   #blogTitle {width: 100%;float:none;margin: 20px auto 0 !important;}
866   #header{height:auto !important;margin: 20px auto 5px;}
867   #header #navigator{width: 100%;text-align: center;float:none;}
868   #header #navigator ul{width: 100%;margin-left: 6%;}
869   #header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;}
870   .postTitle, .entrylistPosttitle{font-size:14px;padding: 20px 20px 15px 0px;}
871   .postDesc, .entrylistItemPostDesc{padding: 0px 20px 15px 0px;}
872   #green_channel{padding:0px !important;}
873   #blog_stats{display: none;}
874   #home {
875       border-radius :0px;
876   }
877   .topicListFooter a {
878       padding: 0.5% 0.8%;
879   }
880 }
881 #blog-news label{box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;}
882 #div_digg{
883     padding: 5px;
884     border-radius: 5px;
885     position: fixed;
886     left: 0;
887     bottom: 80px;
888     width:80px;
889     z-index:100;
890     display: none;
891 }
892 .diggit{
893 background: url() no-repeat;
894     width: 60px;
895     height: 60px;
896 }
897 #div_digg .diggnum{
898 position: absolute;
899     bottom: -20px;
900     left: 6px;
901     background: #D0D0D0;
902     padding: 2px 0;
903     display: block;
904     color: #555;
905     font-size: 12px;
906     text-align: center;
907     width: 60px;
908     -moz-border-radius: 4px;
909     -webkit-border-radius: 4px;
910     font-weight: bold;
911 }
912 .buryit{
913 display: none;
914 }
915 /*scroll to top*/
916 #scrollTop div{
917     left:0;
918     overflow:hidden;
919     position:absolute;
920     top:0;
921     width:149px;
922     margin:0;
923     padding:0
924 }
925 #scrollTop .level-2{
926     background:url() no-repeat scroll -149px 0 transparent;
927     display:none;
928     height:250px;
929     opacity:0;
930     z-index:1
931 }
932 #scrollTop .level-3{
933     background:none repeat scroll 0 0 transparent;
934     cursor:pointer;
935     display:block;
936     height:150px;
937     z-index:2
938 }
939 #scrollTop{
940  background:url() no-repeat scroll 0 0 transparent;
941     cursor:default;
942     display:block;
943     height:250px;
944     overflow:hidden;
945     position:fixed;
946     right:0;
947     top:80%;
948     width:149px;
949     z-index:11;
950     margin:-125px 0 0;
951     padding:0
952 }
953 /*评论带头像，且支持旋转*/
954 .feedbackCon img:hover {
955 -webkit-transform: rotateZ(360deg);
956 -moz-transform: rotateZ(360deg);
957 -ms-transform: rotateZ(360deg);
958 -o-transform: rotateZ(360deg);
959 transform: rotateZ(360deg);
960 }
961  
962 .feedbackCon img {
963 border-radius: 40px;
964 -webkit-transition: all 0.6s ease-out;
965 -moz-transition: all 0.5s ease-out;
966 -ms-transition: all 0.5s ease-out;
967 -o-transition: all 0.5s ease-out;
968 transition: all 0.5s ease-out;
969 }
970 
971 /**---------------------------guanghe--------------------------------*/
972 .headermaintitle {
973     font-size: 35px;
974 }
975 #comment_form {
976     display: none;
977 }
978 #blog-comments-placeholder {
979     display: none;
980 }