/*
 Theme Name: Rating Broker Theme
 Theme URI: http://rating-broker.com
 Author: Your Name
 Author URI: http://example.com
 Description: A custom WordPress theme based on the provided HTML template for rating-broker.com
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: rating-broker-theme
 Tags: blog, finance, broker
*/

body {
    padding: 0;
    margin: 0;
    background: #d8e5ee url("images/body.jpg") center top no-repeat fixed;
    text-align: center;
    font: 12px Arial;
    color: #373737;
}

.main {
    width: 1100px;
    margin: 0 auto;
    background: #f3f6fa;
    position: relative;
    min-height: 850px;
}

.foncv {
    background: #f3f6fa;
    float: left;
    margin: 10px 0 0 0;
    width: 850px;
}

.content {
    width: 850px;
    text-align: justify;
    float: left;
}

.con {
    font-size: 19px;
    width: 810px;
    margin: 0 auto;
    color: black;
    font-family: serif;
}

.rbaner {
    width: 240px;
    margin: 0px 0px 0 0;
    float: right;
}

.top-menu {
    height: 103px;
    background: #eff3f3;
    margin: 0 auto;
    border: 1px solid #000;
    display: flex;
}

.top-menu-link {
    float: left;
    height: 103px;
    background: #eff3f3;
    border-right: 1px #dedede solid;
    padding: 0 31px;
    position: relative;
    line-height: 140px;
    font-family: 'Ubuntu Condensed', sans-serif;
    color: #34495e;
    font-size: 18px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-menu-link:hover {
    color: #ff9847;
}

.top-menu-link span {
    position: absolute;
    width: 36px;
    height: 36px;
    display: block;
    left: 50%;
    margin: 0 0 0 -18px;
    top: 18px;
    background: url("images/top-menu-link.png") no-repeat;
    transition: background-position 0.3s ease;
}

.back1 span { background-position: 0 0; }
.back2 span { background-position: -36px 0; }
.back3 span { background-position: -72px 0; }
.back4 span { background-position: -108px 0; }
.back5 span { background-position: -144px 0; }
.back6 span { background-position: -180px 0; }
.back7 span { background-position: -216px 0; }
.back8 span { background-position: -252px 0; }

.top-menu-link:hover span {
    background-position-y: -182px; /* Сдвиг на нижнюю иконку для всех */
}

.back1:hover span { background-position: 0 -182px; }
.back2:hover span { background-position: -36px -185px; }
.back3:hover span { background-position: -72px -185px; }
.back4:hover span { background-position: -108px -185px; }
.back5:hover span { background-position: -144px -185px; }
.back6:hover span { background-position: -180px -185px; }
.back7:hover span { background-position: -216px -185px; }
.back8:hover span { background-position: -252px -185px; }



.top-line {
    background: url("images/top-line.png");
    height: 66px;
    position: relative;
}

.side-block {
    background-color: #f3f6fa;
    background: linear-gradient(to bottom, #f3f6fa 0%, #f9fafc 100%);
    border: 1px solid #DFE5EE;
    position: relative;
    margin-bottom: 20px;
}

.block-title {
    padding: 10px 0px 0px 0px;
    font-size: 17px;
    font-weight: bold;
}

.site-menu li a {
    display: block;
    overflow-y: hidden;
    font-size: 16px;
    color: #54595f;
    margin: 0 0px;
    line-height: 31px;
    border-bottom: 1px solid #dee1e6;
    border-top: 1px solid #ffffff;
    text-decoration: none;
}

.site-menu li a:hover {
    margin: 0;
    color: #67717c;
    background-color: #e6edf7;
    box-shadow: inset 0 1px 0 #d3dae3, inset 5px 0 0 #5c7fa7;
    background: linear-gradient(to right, #e6edf7 0%, #f1f5fa 94%);
}

.footer {
    background-color: #EFF3F3;
    margin: 0 auto;
    width: 1100px;
    min-height: 50px;
    border: 1px solid #000;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 50px;
}

.shet {
    width: 235px;
    position: absolute;
    bottom: 60px;
    right: 10px;
}

.clr {
    clear: both;
}

.list {
    border-collapse: collapse;
    width: 100%;
}

.list th, .list td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.list th {
    background-color: #f6f6f6;
    font-weight: bold;
}

.list td {
    background-color: #fff;
}

.list img {
    max-width: 100px;
    height: auto;
}

.broker-link {
    color: #34495e;
    text-decoration: none;
    font-size: 14px;
}

.broker-link:hover {
    color: #1a252f;
    text-decoration: underline;
}

.button {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    text-align: center;
    text-decoration: none;
    color: #34495e;
    font-size: 12px;
    width: 70px;
}

.button:hover {
    background-color: #e6edf7;
}

ins {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("images/icon-mio.png") no-repeat;
}
del {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("images/icon-mip.png") no-repeat;
}
ins {
    background-position: 0 0;
}

del {
    background-position: -16px 0;
}

.logform {
    padding: 10px;
}

.logform p {
    margin: 5px 0;
}

.logform input[type="text"],
.logform input[type="password"] {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
}

.logform input[type="submit"] {
    padding: 5px 10px;
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    cursor: pointer;
}

.logform input[type="submit"]:hover {
    background-color: #e6edf7;
}

.commentlist {
    list-style: none;
    padding: 0;
}

.commentlist li {
    margin-bottom: 20px;
}

.comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-author img {
    margin-right: 10px;
}

.comment-date {
    font-size: 12px;
    color: #666;
}

.comment-content {
    margin-bottom: 10px;
}

.reply a {
    color: #34495e;
    text-decoration: none;
}

.reply a:hover {
    text-decoration: underline;
}

.addcomment {
    margin-top: 20px;
}

.editorcomm textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .main {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px;
    }

    .foncv {
        width: 100%;
        margin: 0;
        float: none;
    }

    .content {
        width: 100%;
    }

    .rbaner {
        width: 100%;
        margin: 10px 0 0 0;
        float: none;
    }

    .top-menu {
        height: auto;
        flex-direction: column;
        border: none;
    }

    .top-menu-link {
        float: none;
        height: 50px;
        line-height: 50px;
        padding: 0 15px;
        border-bottom: 1px solid #dedede;
        border-right: none;
    }

    .top-menu-link span {
        top: 7px;
    }

    .footer {
        width: 100%;
        position: relative;
        margin-top: 20px;
    }

    .shet {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 10px 0;
        text-align: center;
    }
}