/* ==========================================================================
   概述

   1 = 基本样式
   2 = 版权声明
   3 = 选项
   4 = 上传
   5 = 服务条款
   6 = 安装
   7 = 管理
   8 = 下载页面

   ========================================================================== */

/* ==========================================================================
   1 = 基本样式
   ========================================================================== */

body {
  background: #efebe9; /* 背景颜色 */
  font-family: Arial, sans-serif; /* 字体类型 */
  margin: 0; /* 外边距 */
  line-height: 1.5; /* 行高 */
}

#content {
  padding: 2em; /* 内边距 */
  max-width: 90%; /* 限制最大宽度 */
  margin: 0 auto; /* 居中 */
}

h1 a {
  display: block; /* 块级显示 */
  background: url(logo-jirafeau.png) no-repeat; /* 背景图片 */
  background-size: contain; /* 背景图片自适应 */
  background-size: 100% 100%; /* 背景尺寸 */
  text-indent: -9999px; /* 文本缩进，隐藏文字 */
  width: 194px; /* 宽度 */
  height: 185px; /* 高度 */
  margin: 1em auto; /* 居中对齐 */
  position: relative; /* 相对定位 */
  left: 0.4em; /* 向左偏移 */
}

h2 {
  text-align: center; /* 居中对齐 */
  color: #795548; /* 字体颜色 */
}

fieldset {
  max-width: 100%; /* 限制最大宽度 */
  border: 0; /* 无边框 */
  padding: 1.5em; /* 内边距 */
  margin: 0 auto; /* 居中对齐 */
  border-radius: 8px; /* 圆角 */
  width: 20em; /* 宽度 */
  border: 7px dashed #bcaaa4; /* 虚线边框 */
  min-height: 15em; /* 最小高度 */
  min-width: 30em; /* 最小宽度 */
  position: relative; /* 相对定位 */
}

legend {
  padding: 0.5em 1em; /* 内边距 */
  background: #efebe9; /* 背景颜色 */
  color: #663D1C; /* 字体颜色 */
  font-size: 1.5em; /* 字体大小 */
  display: block; /* 块级显示 */
  min-width: 8em; /* 最小宽度 */
  text-align: center; /* 居中对齐 */
}

table a {
  color: #000; /* 链接颜色 */
}

table a:hover,
table a:focus {
  text-decoration: none; /* 无下划线 */
}

input[type="submit"] {
  background: #0D9CB2; /* 背景颜色 */
  border: 0; /* 无边框 */
  padding: 0.4em 2.2em; /* 内边距 */
  font-size: 1.1em; /* 字体大小 */
  color: #FFF; /* 字体颜色 */
  border-bottom: 5px solid #085B69; /* 下边框 */
  cursor: pointer; /* 指针样式 */
  margin: 10px; /* 外边距 */
}

select,
input[type="text"],
input[type="password"] {
  border: 1; /* 边框 */
  padding: 5px 5px; /* 内边距 */
  font-size: 1em; /* 字体大小 */
}

select { 
  width: 100%; /* 宽度 */
}

input[type="submit"]:hover,
input[type="submit"]:focus {
  border: 0; /* 无边框 */
  position: relative; /* 相对定位 */
  background: #085B69; /* 背景颜色 */
  border-bottom: 5px solid #0D9CB2; /* 下边框 */
  margin-bottom: 10px; /* 下外边距 */
}

.inner {
  margin-top: 3em; /* 上外边距 */
}

#upload fieldset {
  background: url(upload.png) no-repeat center; /* 背景图片 */
  transition: all 0.5s ease; /* 过渡效果 */
}

#upload fieldset:hover {
  border-color: #663D1C; /* 鼠标悬停时边框颜色 */
}

#upload > form {
  text-align: center; /* 居中对齐 */
}

#upload p {
  margin: 0; /* 无外边距 */
}

#file_select {
  position: relative; /* 相对定位 */
  width: 100%; /* 宽度 */
  height: 16em; /* 高度 */
  cursor: pointer; /* 指针样式 */
  opacity: 0; /* 透明度 */
}

#upload.file-selected #file_select {
  opacity: 1; /* 透明度 */
  height: 2em; /* 高度 */
}

#upload.file-selected fieldset {
  background-image: none; /* 无背景图片 */
}


/* ==========================================================================
   2 = 版权声明
   ========================================================================== */

#copyright {
  text-align: center; /* 居中对齐 */
  font-size: 0.8em; /* 字体大小 */
  color: #795548; /* 字体颜色 */
  margin: 3em auto; /* 外边距 */
}

#copyright a {
  color: #795548; /* 链接颜色 */
  text-decoration: none; /* 无下划线 */
}

#copyright a:hover,
#copyright a:focus {
  text-decoration: underline; /* 下划线 */
}

/* ==========================================================================
   3 = 选项
   ========================================================================== */

#options {
  position: relative; /* 相对定位 */
  z-index: 10; /* 层叠顺序 */
  width: 100%; /* 宽度 */
  height: 90%; /* 高度 */
}

#options tr { 
  height: 2.7em; /* 行高 */
}

#option_table tr:first-child {
  width: 100%; /* 宽度 */
  height: 100%; /* 高度 */
}

#option_table td:first-child {
  /* 留空以便扩展 */
}

#options input[type="submit"] {
  position: relative; /* 相对定位 */
  margin: 1em auto; /* 外边距 */
}

/* ==========================================================================
   4 = 上传
   ========================================================================== */

#upload_finished,
#uploading,
.message,
.info,
.error {
  text-align: left; /* 设置文本左对齐 */
  color: #795548; /* 设置字体颜色为棕色 */
  padding-left: 3em; /* 设置左侧内边距为3倍字体大小 */
}

#upload_finished > p:nth-child(1) {
  color: #0D9CB2; /* 字体颜色 */
  font-weight: bold; /* 字体加粗 */
}

#upload_finished div p:nth-child(1) {
  font-weight: bold; /* 字体加粗 */
}

#upload_finished a {
  text-decoration: none; /* 无下划线 */
  color: #795548; /* 字体颜色 */
}

#uploading a {
  font-weight: bold; /* 字体加粗 */
  text-decoration: none; /* 无下划线 */
  color: #795548; /* 字体颜色 */
}

#uploaded_percentage {
  font-size: 2em; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
}

#upload_finished a:hover,
#uploading a:hover,
#upload_finished a:focus,
#uploading a:focus {
  text-decoration: underline; /* 下划线 */
}

.message,
.error {
  text-align: center; /* 设置文本居中显示 */
  color: #d55548; /* 字体颜色 */
  font-style: italic; /* 斜体 */
  font-weight: bold; /* 加粗 */
}

#upload_link_email {
  margin-left: 10px; /* 左外边距 */
}

#upload_image_email {
  padding-left: 20px; /* 左内边距 */
  padding-bottom: 15px; /* 下内边距 */
  background: url(email.png) no-repeat; /* 背景图片 */
}

/* ==========================================================================
   5 = 服务条款
   ========================================================================== */

textarea[readonly="readonly"] {
  border: 0; /* 无边框 */
  color: #795548; /* 字体颜色 */
  font-family: Arial, sans-serif; /* 字体类型 */
  background: none; /* 无背景 */
  margin: auto; /* 自动外边距 */
  display: block; /* 块级显示 */
}

textarea[readonly="readonly"] + p,
textarea[readonly="readonly"] + p + p {
  text-align: center; /* 居中对齐 */
  color: #795548; /* 字体颜色 */
}

textarea[readonly="readonly"] + p a,
textarea[readonly="readonly"] + p + p a {
  font-weight: bold; /* 字体加粗 */
  text-decoration: none; /* 无下划线 */
  color: #795548; /* 字体颜色 */
}

textarea[readonly="readonly"] + p a:hover,
textarea[readonly="readonly"] + p + p a:hover,
textarea[readonly="readonly"] + p a:focus,
textarea[readonly="readonly"] + p + p a:focus {
  text-decoration: underline; /* 下划线 */
}

/* ==========================================================================
   6 = 安装
   ========================================================================== */

#install fieldset,
#install + fieldset {
  width: auto; /* 宽度自动 */
  max-width: 50em; /* 最大宽度 */
  border: 7px dashed #bcaaa4; /* 虚线边框 */
}

#install table,
#install + fieldset table {
  width: 100%; /* 宽度 */
  border-collapse: collapse; /* 合并边距 */
}

#install td,
#install + fieldset td {
  padding: 0.5em 1em; /* 内边距 */
  border-bottom: 0; /* 无下边框 */
}

#install td:empty {
  width: 13.1em; /* 宽度 */
}

#install table form:nth-child(odd),
#install + fieldset tr:nth-child(odd) {
  background: #bcaaa4; /* 背景颜色 */
}

#install fieldset > form {
  margin-top: 2em; /* 上外边距 */
  text-align: center; /* 居中对齐 */
}

#install form {
  display: table; /* 表格显示 */
  width: 100%; /* 宽度 */
}

#install td:last-child { 
  text-align: left; /* 左对齐 */
}

#install .info { 
  width: 19em; /* 宽度 */
}

#install input[type="submit"] {
  min-width: 10.5em; /* 最小宽度 */
}

#install + fieldset table {
  font-size: 0.9em; /* 字体大小 */
}

#install + fieldset td:first-child input[type="submit"] {
  background: none; /* 无背景 */
  padding: 0; /* 无内边距 */
  color: #000; /* 字体颜色 */
  font-weight: bold; /* 字体加粗 */
  border-bottom: 0; /* 无下边框 */
}

#install + fieldset td:first-child input[type="submit"]:hover,
#install + fieldset td:first-child input[type="submit"]:focus {
  text-decoration: underline; /* 下划线 */
}

/* ==========================================================================
   7 = 管理
   ========================================================================== */

#admin fieldset,
#admin + fieldset {
  width: auto; /* 宽度自动 */
  max-width: 60em; /* 最大宽度 */
  border: 7px dashed #bcaaa4; /* 虚线边框 */
}

#admin table,
#admin + fieldset table {
  width: 100%; /* 宽度 */
  border-collapse: collapse; /* 合并边距 */
  border-bottom: 2px solid #FFF; /* 下边框 */
}

#admin td,
#admin + fieldset td {
  padding: 0.5em 1em; /* 内边距 */
  border: 2px solid #FFF; /* 边框 */
  border-bottom: 0; /* 无下边框 */
}

#admin td:empty {
  width: 13.1em; /* 宽度 */
}

#admin table form:nth-child(odd),
#admin + fieldset tr:nth-child(odd) {
  background: #bcaaa4; /* 背景颜色 */
}

#admin fieldset > form {
  margin-top: 2em; /* 上外边距 */
  text-align: center; /* 居中对齐 */
}

#admin form {
  display: table; /* 表格显示 */
  width: 100%; /* 宽度 */
}

#admin td:last-child { 
  text-align: left; /* 左对齐 */
}

#admin .info { 
  width: 19em; /* 宽度 */
}

#admin input[type="submit"] {
  min-width: 10.5em; /* 最小宽度 */
}

#admin + fieldset table {
  font-size: 0.9em; /* 字体大小 */
}

#admin + fieldset td:first-child input[type="submit"] {
  background: none; /* 无背景 */
  padding: 0; /* 无内边距 */
  color: #000; /* 字体颜色 */
  font-weight: bold; /* 字体加粗 */
  border-bottom: 0; /* 无下边框 */
}

#admin + fieldset td:first-child input[type="submit"]:hover,
#admin + fieldset td:first-child input[type="submit"]:focus {
  text-decoration: underline; /* 下划线 */
}

/* ==========================================================================
   8 = 下载页面
   ========================================================================== */

#self_destruct {
  font-weight: bold; /* 字体加粗 */
  color: red; /* 字体颜色 */
  background-image: url('pixel_bomb.png'); /* 背景图片 */
  background-size: 40px 40px; /* 背景尺寸 */
  background-repeat: no-repeat; /* 背景不重复 */
  padding-left: 40px; /* 左内边距 */
  padding-top: 10px; /* 上内边距 */
  padding-bottom: 10px; /* 下内边距 */
}