<!DOCTYPE html>
<html lang="ru">
<head>
    <title>cat market</title>
    <link rel="stylesheet" href="index.css">
    <meta charset="utf-8">
</head>
<body>
    <header>Бабуленькины котятки</header>
    <main>
        <div class="flex-wrapper">
            <div class="breed-menu">
                <label for="Bengal" class="breed">бенгальская</label>
                <label for="Siberian" class="breed">сибирская</label>
                <label for="Siamese" class="breed">сиамская</label>
                <label for="Angora" class="breed">ангорская</label>
            </div>
            <div class="photo-area">
                <input type="radio" name="breed" value="Bengal" id="Bengal">
                <input type="radio" name="breed" value="Siberian" id="Siberian">
                <input type="radio" name="breed" value="Siamese" id="Siamese">
                <input type="radio" name="breed" value="Angora" id="Angora">
                <img class="Bengal one-cell-image" src="files/1.jpg" title="Вася, 5 лет" alt="Бенгальский кот в профиль">
                <img class="Siberian two-cell-image" src="files/4.jpg" title="Дикси, 13 лет" alt="Сибирский кот боком стоит">
                <img class="Angora one-cell-image" src="files/7.jpg" title="Муня, 5 лет" alt="Ангорский кот сидит в полный рост">
                <img class="Siamese one-cell-image" src="files/6.jpg" title="Тимми, 1 год" alt="Сиамский кот облизывается">
                <img class="Bengal one-cell-image" src="files/2.jpg" title="Стартер, 3 года" alt="Бенгальский кот лежит анфас">
                <img class="Bengal two-cell-image" src="files/3.jpg" title="Пинни, 3 года" alt="Бенгальский кот потягивается">
                <img class="Siberian one-cell-image" src="files/5.jpg" title="Снежок, 8 лет" alt="Сибирский кот сидит анфас">
                <img class="Angora three-cell-image" src="files/8.jpg" title="Раффаелка, 7 лет" alt="Ангорский кот лежит">
            </div>
            <div class="breed-rating">
                <span class="rating-header">Рейтинг</span>
                <label for="in-descending-order">По убыванию</label>
                <input id="in-descending-order" type="checkbox">
                <div class="rating-lines">
                    <div class="Bengal-rating-card ">
                        бенгальская
                        <div class="rating-line">
                            <div class="Bengal-rating-bar"></div>
                            <div class="point">9</div>
                        </div>
                    </div>
                    <div class="Siberian-rating-card">
                        сибирская
                        <div class="rating-line">
                            <div class="Siberian-rating-bar"></div>
                            <div class="point">8</div>
                        </div>
                    </div>
                    <div class="Siamese-rating-card">
                        сиамская
                        <div class="rating-line">
                            <div class="Siamese-rating-bar"></div>
                            <div class="point">10</div>
                        </div>
                    </div>
                    <div class="Angora-rating-card">
                        ангорская
                        <div class="rating-line">
                            <div class="Angora-rating-bar"></div>
                            <div class="point">4</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer class="footer">
        <span>ООО Бабуленькины котятки, 2016</span>
        <address>Наш адрес: улица Котовая, д. 5</address>
    </footer>
</body>
</html>



body,
html
{
    margin: 0;
    padding: 0;
    background-color: #edebe9;
    height: 100%;
}

header
{
    font: bold 40px sans-serif;
    margin: 50px 0;
    text-align: center;
}

main,
.flex-wrapper,
.rating-line,
.rating-lines,
body
{
    display: flex;
}

main,
.rating-lines,
body
{
    flex-direction: column;
}

body
{
    flex-wrap: nowrap;
}

main
{
    justify-content: space-between;
    flex-grow: 1;
    flex-shrink: 0;
}

/*img*/
/*{*/
    /*margin: 5px;*/
/*}*/

.flex-wrapper
{
    justify-content: space-around;
}

.breed-menu
{
    flex-basis: 56px;
    margin-right: 5px;
    background-color: #dddad6;
    font-size: 30px;
}

.breed-menu label
{
    padding: 10px;
    border-bottom: ridge 2px;
}

.photo-area input
{
    display: none;
}

.one-cell-image
{
    flex-shrink: 4;
    flex-grow: 0;
}

.two-cell-image
{
    flex-shrink: 2;
    flex-grow: 2;
}

.three-cell-image
{
    flex-shrink: 1;
    flex-grow: 3;
}

[value='Bengal']:checked ~ .Bengal
{
    opacity: .5;
}

[value='Siberian']:checked ~ .Siberian
{
    opacity: .5;
}

[value='Siamese']:checked ~ .Siamese
{
    opacity: .5;
}

[value='Angora']:checked ~ .Angora
{
    opacity: .5;
}

.breed,
label
{
    display: block;
}

.photo-area
{
    min-width: 940px;
    flex-basis: 940px;
    justify-content: space-between;
}

.breed-rating
{
    background-color: #dddad6;
    padding: 20px 10px;
    align-self: flex-start;
}

.breed-rating label
{
    display: inline-block;
    padding-bottom: 20px;
}

.rating-header
{
    display: block;
    font-size: 30px;
    color: #f00;
}

.rating-line
{
    justify-content: space-between;
}

.Bengal-rating-bar,
.Siberian-rating-bar,
.Siamese-rating-bar,
.Angora-rating-bar
{
    height: 20px;
}

.Bengal-rating-bar
{
    background: linear-gradient(to right, green, white);
    width: 90px;
}

.Siberian-rating-bar
{
    background: linear-gradient(to right, yellow, white);
    width: 80px;
}

.Siamese-rating-bar
{
    background: linear-gradient(to right, green, white);
    width: 100px;
}

.Angora-rating-bar
{
    background: linear-gradient(to right, red, white);
    width: 40px;
}

.breed-rating input:checked ~ .rating-lines .Siamese-rating-card
{
    order: 0;
}

.breed-rating input:checked ~ .rating-lines .Bengal-rating-card
{
    order: 1;
}

.breed-rating input:checked ~ .rating-lines .Siberian-rating-card
{
    order: 2;
}

.breed-rating input:checked ~ .rating-lines .Angora-rating-card
{
    order: 3;
}

.footer
{
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
}