﻿/**
    Файл:    <шаблон>/css/_common/article.css
    Раздел:  Наиболее популярные стили статьи
    Автор:   BVP
 */

/*  Вступительный текст */
.arp-content {
    padding:   5% 5%;
    font-size: 1.1em;
}

/*  Раздел статьи */
.ars-content {
    padding:    1% 5% 4%;
    font-size:  1.1em;
    text-align: center;
}

/*  Список, маркированный строчными русскими буквами: а), б), ... */
ul.arl-cyr-small {
    list-style:none;
}
ul.arl-cyr-small li:nth-child(1):before { content:'а) ' }
ul.arl-cyr-small li:nth-child(2):before { content:'б) ' }
ul.arl-cyr-small li:nth-child(3):before { content:'в) ' }
ul.arl-cyr-small li:nth-child(4):before { content:'г) ' }
/*  Снять комментарий, если понадобится больше
ul.arl-cyr-small li:nth-child(5):before { content:'д) ' }
ul.arl-cyr-small li:nth-child(6):before { content:'е) ' }
ul.arl-cyr-small li:nth-child(7):before { content:'ж) ' }
ul.arl-cyr-small li:nth-child(8):before { content:'з) ' }
ul.arl-cyr-small li:nth-child(9):before { content:'и) ' }
ul.arl-cyr-small li:nth-child(10):before{ content:'к) ' }
*/

/*  Список, нумерованный в виде ссылок на документы: [1], [2], ... */
ul.arl-refs {
    list-style-type: none;
    counter-reset:   item;
}
ul.arl-refs li {
    text-indent: -3.7em;
    padding-left: 3.7em;
}
ul.arl-refs li:before {
    content: '['counter(item)']';
    counter-increment: item;
}

/*  Фото в статье */
.art-img-100 {          /* фото на всю ширину страницы */
    width: 100%;
    margin-bottom: 1.5em;
}
.art-img-top-left,      /* фото сверху слева */
.art-img.img-left {
    width:  30%;
    float:  left;
    margin: 0 2em 1em 0;
}
.art-img-top-right,     /* фото сверху справа */
.art-img.img-right {
    width:  30%;
    float:  right;
    margin: 0 0 1em 2em;
}
.art-img-small {
    width: 20%;
}
.art-img,
.art-img-max {
    width: 100%;
}
.art-img-auto {
    width: auto;
}

/*  Фото в статье с увеличением */
.ai-boxplus {
    cursor: zoom-in;
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
}

@media only screen and (max-width : 1000px) 
{
    .arp-content {
        font-size: 1.05em;
    }
    .art-img-top-left,
    .art-img.img-left,
    .art-img-top-right,
    .art-img.img-right {
        width: 35%;
    }
    #nav-buttons > * {
        padding: .45em 1em;
    }
}

@media only screen and (max-width : 800px) 
{
    .arp-content {
        padding: 6% 3%;
        font-size: 1em;
    }
    .art-img-top-left,
    .art-img.img-left {
        width:  40%;
        margin: 0 1.5em .5em 0;
    }
    .art-img-top-right,
    .art-img.img-right {
        width:  40%;
        margin: 0 0 .5em 1.5em;
    }
}

@media only screen and (max-width : 500px) 
{
    .arp-content {
        padding: 8% 2%;
    }
    .art-img-top-left,
    .art-img.img-left,
    .art-img-top-right,
    .art-img.img-right {
        width:  100%;
        margin: 0 0 1em 0;
    }
}

@media only screen and (max-width : 480px) 
{
    .arp-content {
        font-size: 1.05em;
    }
}

@media only screen and (max-width : 400px) 
{
    .arp-content {
        padding: 10% 1%;
    }
}
