* {
  7     box-sizing: border-box;
  8     transition: all 0.5s;
  9 }
 10 
 11 ::selection {
 12     color: #F99;
 13 }
 14 
 15 ::-moz-selection {
 16     color: #F99;
 17 }
 18 
 19 body {
 20     color: lightgray;
 21     margin: 0;
 22     padding: 0;
 23     font-size: 14px;
 24     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 25 }
 26 
 27 h3 {
 28     font-size: 15px;
 29     font-weight: bold
 30 }
 31 
 32 ul {
 33     padding: 0;
 34     list-style: none;
 35 }
 36 
 37 a {
 38     color: gray;
 39     text-decoration: none;
 40 }
 41 
 42 a:hover {
 43     color: #E30;
 44 }
 45 
 46 
 47 /*header*/
 48 
 49 #header {
 50     height: 300px;
 51 }
 52 
 53 #blogTitle {
 54     font-size: 24px;
 55     text-align: center;
 56 }
 57 
 58 #navigator {
 59     text-align: center;
 60 }
 61 
 62 #navList li {
 63     display: inline-block;
 64 }
 65 
 66 .blogStats {
 67     width: 240px;
 68     margin: auto;
 69     border-radius: 1em;
 70     background: #C4E17F linear-gradient(to right, #C4E17F, #C4E17F 12.5%, #F7FDCA 12.5%, #F7FDCA 25%, #FECF71 25%, #FECF71 37.5%, #F0776C 37.5%, #F0776C 50%, #DB9DBE 50%, #DB9CBE 62.5%, #C49CDE 62.5%, #C49CDE 75%, #669AE1 75%, #669AE1 87.5%, #62C2E4 87.5%, #62C2E4) repeat scroll 0% 0%;
 71     background-size: 200%;
 72     animation: conveyor 4s ease infinite;
 73 }
 74 
 75 
 76 /*main*/
 77 
 78 #main {
 79     margin: auto;
 80     padding: 0 20px;
 81 }
 82 
 83 @media (min-width: 768px) {
 84     #main {
 85         width: 100%;
 86     }
 87 }
 88 
 89 @media (min-width: 992px) {
 90     #main {
 91         width: 90%;
 92     }
 93 }
 94 
 95 @media (min-width: 1200px) {
 96     #main {
 97         width: 80%;
 98     }
 99 }
100 
101 
102 /*mainContent*/
103 
104 #mainContent {
105     float: left;
106     margin: 0 auto;
107     padding: 20px;
108 }
109 
110 @media (min-width: 768px) {
111     #mainContent {
112         width: 100%;
113     }
114 }
115 
116 @media (min-width: 992px) {
117     #mainContent {
118         width: 77.5%;
119     }
120 }
121 
122 @media (min-width: 1200px) {
123     #mainContent {
124         width: 80%;
125     }
126 }
127 
128 
129 /*article*/
130 
131 .day,
132 .commentform,
133 .entrylistItem,
134 #sideBar,
135 #post_detail,
136 #blog-comments-placeholder,
137 #myposts {
138     margin: 0px auto 40px;
139     padding: 20px;
140     border-radius: 5px;
141     background: #333;
142     background: repeating-linear-gradient(to bottom, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px), repeating-linear-gradient(60deg, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px), repeating-linear-gradient(-60deg, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px);
143 }
144 
145 .day:hover,
146 .commentform:hover,
147 .entrylistItem:hover,
148 #sideBar:hover,
149 #post_detail:hover,
150 #blog-comments-placeholder:hover,
151 #myposts:hover {
152     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
153 }
154 
155 .dayTitle {
156     float: left;
157     margin-right: 20px;
158 }
159 
160 .postCon,
161 .entrylistPostSummary {
162     margin: 10px auto;
163 }
164 
165 .postDesc,
166 .entrylistItemPostDesc {
167     text-align: right;
168 }
169 
170 .dayTitle,
171 .postTitle {
172     font-size: 20px;
173 }
174 
175 
176 /*option*/
177 
178 #green_channel {
179     float: right;
180     width: auto;
181     border: none;
182     margin: 15px 0;
183 }
184 
185 #green_channel a {
186     float: left;
187     margin: 0 0 0 10px;
188     background: none;
189     box-shadow: none;
190     text-shadow: none;
191     border-radius: 3px;
192     vertical-align: middle;
193 }
194 
195 #author_profile {
196     float: left;
197     width: auto;
198     margin: 9px 10px;
199 }
200 
201 .author_avatar {
202     margin: 3px 10px;
203     padding: 0;
204     border-radius: 5px;
205 }
206 
207 .diggword {
208     display: none;
209 }
210 #green_channel #green_channel_weibo,
211 #green_channel #green_channel_wechat {
212     padding: 0px 2px;
213 }
214 #div_digg {
215     margin: 14px auto;
216     padding: 10px 0;
217 }
218 
219 .diggit,
220 .buryit {
221     color: white;
222     width: 56px;
223     height: 24px;
224     margin: 1px;
225     padding: 0 6px;
226     text-align: right;
227     position: relative;
228     border-radius: 3px;
229 }
230 
231 .diggit {
232     background: #9C9;
233     animation: pulse 1s ease-in infinite;
234 }
235 
236 .buryit {
237     background: #99C;
238 }
239 
240 .diggit:before,
241 .buryit:before {
242     top: 3px;
243     left: 6px;
244     position: absolute;
245     font-weight: bold;
246 }
247 
248 .diggit:before {
249     color: red;
250     content: "♥";
251 }
252 
253 .buryit:before {
254     color: black;
255     content: "♠";
256 }
257 
258 .diggnum,
259 .burynum {
260     color: white;
261 }
262 
263 
264 /*comment title*/
265 
266 .feedback_area_title,
267 #commentform_title {
268     font-size: 16px;
269     font-weight: bold;
270 }
271 
272 #commentform_title {
273     padding: 0;
274     background-image: none;
275 }
276 
277 
278 /*comment*/
279 
280 .feedbackItem {
281     margin-top: 20px;
282     border-top: 1px solid #CC9;
283 }
284 
285 .feedbackListSubtitle {
286     margin: 10px 0;
287 }
288 
289 .feedbackManage {
290     float: right;
291 }
292 
293 div.commentform input.author {
294     color: lightgray;
295     padding: 0;
296     font-size: 14px;
297     border: none;
298     background-color: transparent;
299     background-image: none;
300 }
301 
302 #comment_nav,
303 .commentbox_title_right {
304     float: right;
305 }
306 
307 .commentbox_title,
308 .comment_textarea {
309     min-width: 100%;
310 }
311 
312 
313 /*sideBar*/
314 
315 #sideBar {
316     float: left;
317     margin: 20px auto 0;
318     display: none !important;
319 }
320 
321 @media (min-width: 992px) {
322     #sideBar {
323         width: 22.5%;
324         display: block !important;
325     }
326 }
327 
328 @media (min-width: 1200px) {
329     #sideBar {
330         width: 20%;
331         display: block !important;
332     }
333 }
334 
335 #blog-calendar {
336     margin: 10px auto;
337     padding: 10px;
338     font-size: 12px;
339     border-radius: 5px;
340     background: rgba(153, 204, 153, 0.6);
341 }
342 
343 .input_my_zzk,
344 .btn_my_zzk,
345 .comment_btn,
346 #commentbox_opt a,
347 div.commentform textarea {
348     margin: 2px auto;
349     padding: 2px 5px;
350     border: none;
351     border-radius: 3px;
352     background: rgba(255, 255, 255, 0.5);
353 }
354 
355 .input_my_zzk,
356 input.btn_my_zzk {
357     width: 100%;
358     height: 25px;
359 }
360 
361 #commentbox_opt a {
362     color: black;
363     font-size: 12px;
364     padding: 4px 10px;
365 }
366 
367 .btn_my_zzk:hover,
368 .comment_btn:hover,
369 .input_my_zzk:hover,
370 .input_my_zzk:focus,
371 .comment_textarea:hover,
372 .comment_textarea:focus,
373 #commentbox_opt a:hover {
374     outline: 0;
375     color: white;
376     background: rgba(153, 153, 204, 0.5);
377 }
378 
379 
380 /*footer*/
381 
382 #footer {
383     margin-top: 20px;
384     padding: 10px;
385     text-align: center;
386 }
387 
388 
389 /*AD Kill*/
390 
391 #under_post_news,
392 #under_post_kb {
393     display: none;
394 }
395 
396 
397 /*animation*/
398 
399 @keyframes conveyor {
400     0% {
401         background-position: 0% 0%;
402     }
403     50% {
404         background-position: 100% 0%;
405     }
406     100% {
407         background-position: 0% 0%;
408     }
409 }
410 
411 @keyframes pulse {
412     50% {
413         outline-color: rgba(136, 187, 136, 0.9);
414         box-shadow: 0px 0px 1px 4px rgba(136, 187, 136, 0.9), 0px 0px 1px 8px rgba(153, 204, 153, 0.5);
415     }