/* 全局重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #000; color: #ccc;
  font: 90% Arial, 宋体, sans-serif;
  line-height: 1.8;
}
a { color: #60d060; text-decoration: none; }
a:hover { text-decoration: underline; }
p, ul, ol, dl { margin-bottom: 15px; }

/* 标题样式 */
h1, h2, h3, .navmenu a {
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: 400; line-height: 1.4;
  color: #60d060;
}
h1 { font-size: 4.6em; }
h2 { font-size: 2.8em; margin-bottom: 10px; }
h3 { font-size: 1.8em; margin-bottom: 10px; }
h1 a:hover { color: #eee; text-decoration: none; }

/* 布局容器 */
#layout { margin: 40px auto; width: 960px; }
body.wider #layout { width: 1200px; }

/* 栅格系统 */
.row {
  width: 960px; margin: 20px auto;
  overflow: hidden;
}
body.wider .row { width: 1200px; }
.col {
  float: left; margin: 0 10px;
  overflow: hidden; display: inline;
}
.col img { max-width: 100%; }
.row .row { margin: 0 -10px; width: auto; display: inline-block; }

/* 12列宽度 */
.c1 {width:60px} .c2{width:140px} .c3{width:220px} .c4{width:300px}
.c5 {width:380px} .c6{width:460px} .c7{width:540px} .c8{width:620px}
.c9 {width:700px} .c10{width:780px} .c11{width:860px} .c12{width:940px}

/* 宽屏扩展栅格 */
body.wider .c1{width:80px}  body.wider .c2{width:180px}
body.wider .c3{width:280px} body.wider .c4{width:380px}
body.wider .c5{width:480px} body.wider .c6{width:580px}
body.wider .c7{width:680px} body.wider .c8{width:780px}
body.wider .c9{width:880px} body.wider .c10{width:980px}
body.wider .c11{width:1080px}body.wider .c12{width:1180px}

/* 导航菜单 */
.navmenu { line-height: 2.6; }
.navmenu a {
  font-size: 1.9em; margin: 0 20px 30px;
}
ul.menu {
  list-style: none; margin: 0; padding: 10px 0;
  border-top: 1px solid #333;
}
ul.menu li {
  text-align: center; font-size: 1.2em;
  margin-bottom: 10px; padding-bottom: 8px;
  color: #888; border-bottom: 1px solid #333;
}
ul.menu li a:hover { color: #eee; text-decoration: none; }

/* 辅助类 */
.slogan { color: #bbb; font-size: 1.2em; }
.alignleft { text-align: left; }
.alignright { text-align: right; }
.aligncenter { text-align: center; }
.alignjustify { text-align: justify; }
.nomargin { margin: 0; padding: 0; }
.larger { font-size: 1.2em; }
.smaller { font-size: 0.9em; }
.clear { clear: both; }
.hide { display: none; }
.border { border: 1px solid red; }

/* 图片对齐 */
img.alignleft, a img.alignleft { float: left; margin: 0 1em 1em 0; }
img.alignright, a img.alignright { float: right; margin: 0 0 1em 1em; }
img.aligncenter, a img.aligncenter { display: block; margin: 0 auto; }

/* 头部图片 */
.headerimage img { border-radius: 12px; }

/* 底部 */
#footer .col {
  color: #555; border-top: 1px dotted #1a1a1a;
  padding: 20px 0 0;
}
#footer p { text-align: center; }
#footer a {
  color: #555; border-bottom: 1px dotted #333;
}
#footer a:hover {
  color: #aaa; border-bottom: 1px dotted #888;
}

/* ==================== 浅色主题 ==================== */
body.light {
  background: #fff; color: #333;
  border-top: 4px solid #60d060;
  border-bottom: 8px solid #60d060;
}
body.light a:hover { color: #555; }
body.light h1 a:hover { color: #333; }
body.light h2 { color: #555; }
body.light ul.menu { border-color: #ddd; }
body.light ul.menu li { border-color: #ddd; }
body.light ul.menu li a:hover { color: #333; }
body.light .slogan { color: #888; }
body.light #footer .col { border-color: #ccc; }
body.light #footer a { border-color: #ddd; }
body.light #footer a:hover { border-color: #eee; color: #444; }

/* ==================== 移动端响应式 ==================== */
@media only screen and (max-width:960px) {
  #layout, body.wider #layout {
    width: auto; margin: 0; padding: 20px;
  }
  .row { width: 100%; }
  .col { width: 100%; margin: 0 0 20px; }
  h1 { margin: -15px auto 5px; }
  
  /* 移动端导航按钮样式 */
  .navmenu { margin: 0 0 -15px; }
  .navmenu a {
    font-size: 1.4em; display: inline-block;
    padding: 7px 12px; margin: 0 10px 8px 0;
    background: #111; border: 1px solid #222;
    border-radius: 10px;
  }
  .navmenu a.current { border-color: #444; }
  body.light .navmenu a {
    background: #fff; border-color: #eee;
  }
  body.light .navmenu a.current { border-color: #ddd; }
  
  .headerimage img { width: 100%; height: auto; }
}