/**
 * biva.webroot/material/less/biva/api/special_issue_l/iframe.less
 *
 * @author Mitsutoshi Nakamura <mitsutoshi.nakamura.jp@gmail.com>
 */

@bower: '../../../../../../../bower_components';
@import '@{bower}/slick-carousel/slick/slick.less';
@import '@{bower}/slick-carousel/slick/slick-theme.less';

body {
    background: transparent;
    .special_issue_l {
        /**
         * 60 + 480 + 20 + 480 + 60
         *
         * 180
         * 16 * 1.5 * 2 + 20 = 68
         * 20
         * 180
         * 16 * 1.5 * 2 + 20 = 68
         * 30
         */
        @w1: 480px; // Image width
        @h1: 180px; // Image height
        @h2: 16 * 1.5 * 2 + 20px; // Caption height
        @h3: 30px; // Dots height
        @w: 60px + @w1 + 20px + @w1 + 60px;
        @h: @h1 + @h2 + 20px + @h1 + @h2 + @h3;
        width: @w;
        height: @h;
        margin: 0 auto;
        //background: rgba(0,0,0,.1);
        .slick-arrow {
            @size:40px;
            width: @size;
            height: @size;
            z-index: 9;
            &:before {
                font-size: @size;
                color: rgba(0,0,0,.2);
            }
        }
        .slick-prev {
            left: 10px;
        }
        .slick-next {
            right: 10px;
        }
        .slick-dots {
            margin: 0;
            bottom: 5px;
            z-index: 9;
        }
        .slide {
            width: @w;
            height: @h;
            ul {
                margin: 0 60px;
                padding: 0;
                list-style: none;
                li {
                    width: @w1;
                    height: @h1 + @h2;
                    display: block;
                    float: left;
                    &:nth-child(2n) {
                        margin-left: 20px;
                    }
                    &:nth-child(3),
                    &:nth-child(4) {
                        margin-top: 20px;
                    }
                    a {
                        display: block;
                        text-decoration: none;
                        background: rgba(255,255,255,.7);
                        //border: 1px solid #f00;
                        img {
                            width: @w1;
                            height: @h1;
                        }
                        .caption {
                            width: @w1 - 20px;
                            height: @h2 - 20px;
                            margin: 10px;
                            font-size: 16px;
                            line-height: 1.5;
                            text-align: center;
                            color: #333;
                            overflow: auto;
                        }
                    }
                }
            }
        }
    }
}