﻿.center-2, .side-2 {
    margin: 0;
    min-height: 100px;
}

.side-2:after {
    content: "";
    display: block;
    clear: both;
}

.block {
    max-width: 600px;
    min-height: 50px;
    margin: auto;
    text-align: left;
}

    .block .title {
        position: relative;
        margin: 0 0 10px;
        border-bottom: 1px solid #ddd;
        background: #f6f6f6 url(../images/toggle-gray.png) right 14px no-repeat;
        padding: 12px 30px 12px 10px;
        font-size: 20px;
        color: #444;
        cursor: pointer;
    }

        .block .title strong {
            font-weight: normal;
        }

    .block .listbox {
        display: none;
        border-bottom: 1px solid #ddd;
        padding: 10px 5px;
    }

    .block .list li {
        padding: 5px 0 5px 15px;
    }

    .block .list a {
        display: inline-block;
        position: relative;
        padding: 5px 0;
        font-size: 18px;
        color: #444;
        -webkit-transition: all 0.1s ease;
        transition: all 0.1s ease;
    }

    .block .list .active > a {
        color: #000;
    }

        .block .list a:before {
            content: "";
            position: absolute;
            top: 12px;
            left: -15px;
            width: 5px;
            height: 5px;
            background-color: #ddd;
        }

.page {
    min-height: 200px;
    text-align: center;
}

.page-title {
    min-height: 50px;
    margin: 0 0 25px;
    border-bottom: 1px solid #ddd;
    padding: 6px 10px;
}

.pager {
    margin: 0 0 20px;
}

    .pager ul {
        text-align: right;
        font-size: 0;
    }

    .pager li {
        display: inline-block;
        margin: 0 5px;
        vertical-align: top;
    }

        .pager li a, .pager li span {
            display: block;
            min-width: 35px;
            min-height: 35px;
            border: 1px solid #ddd;
            background-color: #eee;
            padding: 8px;
            text-align: center;
            font-size: 17px;
            cursor: pointer;
            color: #444;
        }

        .pager li span {
            border-color: transparent;
            background-color: #000;
            color: #fff;
        }

        .pager li.next-page * {
            background-image: url(../images/next.png);
        }

        .pager li.previous-page *, .pager li.next-page *, .pager li.first-page *, .pager li.last-page * {
            background-position: center;
            background-repeat: no-repeat;
            font-size: 0;
            color: #fff;
        }

@media (min-width: 1024px) {
    .side-2 {
        float: left;
        width: 25%;
    }

    .center-2 {
        float: right;
        width: 73%;
    }

    .block {
        float: none;
        width: auto;
        margin: 0 0 20px;
    }

        .block .title {
            margin: 0;
            border-bottom: 1px solid #ddd;
            background: none;
            cursor: auto;
        }

            .block .title strong {
                font-weight: 700;
            }

        .block .listbox {
            display: block;
            border-bottom: none;
        }

    .page {
        text-align: left;
    }
}