@charset "utf-8";

/** {*/
    /*margin: 0;*/
    /*padding: 0;*/
/*}*/

html {
    background-color: #f3f3f3;
}

body {
    width: 600px;
    margin: 0 auto;
    background-color: #f5f6f8;
    padding: 0 20px 20px 20px;
    border: 5px solid #e8e8e8;
}

img {
    display: block;
    margin: 0 auto;
}

h1 {
    color: #837aff;
    font-weight: normal;
    text-align: center;
    text-shadow: 3px 3px 1px #666666;
    cursor: pointer;
}

h2 {
    cursor: pointer;
}

table {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border: solid #e0e0dc;
    border-width: 1px 0 0 1px;
}

td, th {
    border: solid #e0e0dc;
    border-width: 0 1px 1px 0;
    padding: 6px 8px;
}

form {
    /* 居中表单 */
    margin: 0 auto;
    width: 400px;
    /* 显示表单的轮廓 */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* 确保所有label大小相同并正确对齐 */
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea {
    /* 确保所有文本输入框字体相同
       textarea默认是等宽字体 */
    font: 1em sans-serif;

    /* 使所有文本输入框大小相同 */
    width: 300px;
    box-sizing: border-box;

    /* 调整文本输入框的边框样式 */
    border: 1px solid #999;
}

input:focus, textarea:focus {
    /* 给激活的元素一点高亮效果 */
    border-color: #000;
}

textarea {
    /* 使多行文本输入框和它们的label正确对齐 */
    vertical-align: top;

    /* 给文本留下足够的空间 */
    height: 5em;
}

.button {
    /* 把按钮放到和文本输入框一样的位置 */
    padding-left: 90px; /* 和label的大小一样 */
}

button {
    /* 这个外边距的大小与label和文本输入框之间的间距差不多 */
    margin-left: .5em;
}