/* 
	project: studio 6 (fixed + mobile)
*/

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font: .8em Tahoma, "Trebuchet MS", sans-serif;
    line-height: 1.6em;
    background: #fff url(images/bg.gif) repeat-x;
    color: #000;
}

a { color: #EB0000; text-decoration: none; }
a:hover { color: #808080; text-decoration: underline; }

p { 
    margin: 0 0 15px 0; 
    text-align: justify;
}

h1 { font: normal 2.8em Georgia, "Times New Roman", Arial; color: #444; }
h2 { font: normal 1.7em Georgia, "Times New Roman", Arial; margin-bottom: 10px; padding-bottom: 3px; color: #333; border-bottom: 1px solid #eee; }

img { border: 0; max-width: 100%; height: auto; }

/* ===== LAYOUT ===== */
#content {
    width: 1158px;
    margin: 25px auto;
}

#logo {
    margin: 10px 0 20px 0;
    width: 340px;
    float: left;
}

#menu {
    float: right;
    padding: 40px 0 0;
    margin-bottom: 38px;
}

#menu li {
    font-size: 1.1em;
    display: inline;
}

#menu li a {
    float: left;
    width: 87px;
    padding: 2px 0 7px;
    text-align: center;
    margin-left: 10px;
    color: #636365;
}

#menu li a.current {
    background: #fff url(images/button.gif) no-repeat;
    color: #fff;
}

#menu li a:hover {
    text-decoration: none;
    color: #000;
    background: #fff url(images/button_grey.gif) no-repeat;
}

.clear { clear: both; }

.caption {
    background: #fff url(images/title.gif) no-repeat;
    padding-left: 18px;
    height: 35px;
    color: #fff;
}

#left {
    width: 200px;
    float: left;
    margin-bottom: 20px;
}

#center {
    width: 728px;
    float: left;
    margin-left: 15px;
}

#right {
    width: 200px;
    float: right;
}

/* ===== СТАТЬЯ (РЕШЕНИЕ ПРОБЛЕМЫ) ===== */
.article-text {
    padding: 0 20px; /* 🔥 отступ слева и справа */
}

/* нормальный текст */
.article-text p {
    margin: 0 0 15px 0;
}

/* заголовки */
.article-text h1,
.article-text h2,
.article-text h3 {
    margin-bottom: 10px;
}

/* списки */
.article-text ul,
.article-text ol {
    padding-left: 25px;
}

/* картинки */
.article-text img {
    max-width: 100%;
    height: auto;
}

/* ===== BOX ===== */
.box {
    background: #eee;
    padding: 10px;
}

.box li {
    list-style: none;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 10px;
}

/* ===== FOOTER ===== */
#footer {
    font-size: .84em;
    clear: both;
    padding: 10px;
    background: #eee;
}

#footer a { color: #444; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {

    #content {
        width: 100%;
        margin: 0;
        padding: 10px;
    }

    #logo {
        float: none;
        width: 100%;
        text-align: center;
    }

    #menu {
        float: none;
        width: 100%;
        padding: 10px 0;
        text-align: center;
    }

    #menu li {
        display: block;
        margin-bottom: 5px;
    }

    #menu li a {
        float: none;
        display: block;
        width: auto;
        margin: 0;
    }

    #left, #center, #right {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }

    .article-text {
        padding: 10px;
    }

    body {
        font-size: 16px;
    }

    p {
        text-align: left;
    }

    .adsbygoogle {
        width: 100% !important;
        height: auto !important;
    }
}