@import '../base-ui/reset';
@import '../base-ui/functions';
@import '../base-ui/mixins';

$headerHeight: 70px;

html,
body {
    background: #fff;
}

body {
    padding-top: px2rem($headerHeight);
}

header {
    background: rgba(#000, .87);
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    line-height: px2rem($headerHeight);
    text-align: center;
    font-size: px2rem(28px);
    color: #fff;

    a {
        display: inline-block;
        padding: 0 px2rem(10px);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;

        &::before {
            content: "☚";
            display: inline-block;
        }

        &:active {
            color: #f60;
        }
    }
}

.main {
    padding: px2rem(15px) 0;

    .split {
        width: 100%;
        height: 0;
        border-bottom: 1px dashed #ddd;
    }

    .describe {
        @include radiusSeparated(4px, 4px, 8px, 8px);

        margin-bottom: px2rem(45px);
        padding-bottom: px2rem(30px);
        border: 2px solid #f2f1f1;

        > .title {
            overflow: hidden;
            position: relative;
            padding: px2rem(15px) 0;
            text-align: center;
            font-size: px2rem(28px);
            font-weight: bold;
            border-bottom: 1px solid #eee;
            background: #f8f8f8;
        }

        .it {
            margin-bottom: px2rem(15px);

            .title {
                padding-left: px2rem(30px);
                border-left: 4px solid #000;
                border-right: 4px solid #000;
                font-size: px2rem(24px);
            }
        }
    }

    &.main_index {
        ul {
            li {
                a {
                    padding: 0 px2rem(15px);
                    display: block;
                    line-height: 2;
                    font-size: px2rem(32px);
                    color: #000;

                    &:active {
                        background: #ccc;
                    }
                }

                &:nth-child(2n) {
                    background: #eee;
                }
            }
        }
    }
}

footer {
    background: #eee;
}