/*
 * Metro UI CSS
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT License
 *
 * responsive.less
 */

/* Landscape phone to portrait tablet */
@import "routines.less";

@tileSmall:             120px;
@tileLarge:             250px;
@tileMargin:            5px;
@tileDouble:            @tileSmall * 2 + @tileMargin * 2;
@tileTriple:            @tileSmall * 3 + @tileMargin * 4;
@tileQuadro:            @tileSmall * 4 + @tileMargin * 6;


@media (max-width: 767px) {
    body {
        padding-right: 10px;
        padding-left: 10px !important; //TODO найти и уничтожить
    }

    [class*="span"], .hero-unit {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    [class*="offset"], .hero-unit {
        margin-left: 0;
    }

    table {
        thead {
            tr {
                th {
                    font-size: 9pt;
                }
            }
        }

        tbody {
            tr {
                td {
                    font-size: 10pt;
                }
            }
        }
    }

    h1 {font-size: 30pt;}
    h2 {font-size: 16pt;}

    .nav-bar {
        .nav-bar-inner {
            .pull-menu {
                display: inline-block;
            }

            & > .divider {
                //display: none;
                float: none !important;
            }

            .element {
                float: none;
            }

            & > ul.menu {
                display: none;
                float: none;
                margin: 5px;

                & > li {
                    display: block;
                    float: none;
                    width: 100%;
                    margin-left: 0;
                    padding-left: 5px;
                    //border-bottom: 1px #ccc solid;

                    a {
                        display: block;
                        float: none;
                    }

                    .dropdown-menu {
                        position: relative;
                        width: 100%;
                        border: 0;
                    }
                }
            }

            [data-role=dropdown] {
                margin-right: 20px !important;
                & > a {
                    cursor: pointer;
                    &:before {
                        position: absolute;
                        content: "\203A";
                        display: block;
                        font-size: 1.4em;
                        left: 100%;
                        margin-left: -10px;
                        top: 8px;
                        .rotate(90deg);
                    }
                }
            }

        }
    }

    .page-control {
        position: relative;
    }

    .page-control .menu-pull {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAADFJREFUeNpidHd3/89AQ8DEQGMw9C0YBaOAcsA4mpNHc/IoGM3JozmZCgAAAAD//wMAc2MFkuS0c50AAAAASUVORK5CYII=");
        display: block;
        width: 24px;
        height: 24px;
        float: right;
        margin-top: 10px;
        margin-right: 10px;
        cursor: pointer;
    }
    .page-control .menu-pull-bar {
        display: block;
        width: 100%;
        height: 44px;
        border: 1px solid #CCC;
        border-bottom: 0px;
        background-color: rgba(217, 217, 217, 0.16);
        padding: 10px 0px 10px 20px;
        color: #2D89EF;
    }
    .page-control ul {
        width: 100%;
        height: auto;
        margin: 0px;
        position: relative;
        padding: 0px 20px 10px 20px;
        border: 1px solid #CCC;
        border-bottom: 0px;
        border-top: 0px;
        display: none;
    }
    .page-control ul li {
        display: block;
        float: left;
        width: 100%;
        padding-left: 0;
        line-height: 32px;
        position: relative;
        height: auto;
    }
    .page-control ul li:first-child {
        margin-left: 0px;
    }
    .page-control ul li.active {
        border: 0px;
        background-color: rgba(0, 0, 0, 0);
    }
    .page-control ul li.active a {
        color: #1e1e1e;
    }
    .page-control ul li a {
        width: 100%;
        text-align: left;
    }
    .page-control ul li a:hover {
        background: #464646;
        color: #fff;
    }
    .page-control .frames {
        margin-top: 0px;
    }

    .tile {
        width: @tileSmall;
        height: @tileSmall;

        &.double {
            width: @tileDouble;
        }
        &.triple {
            width: @tileTriple;
        }
        &.quadro {
            width: @tileQuadro;
        }
        &.double-vertical {
            height: @tileDouble;
        }
        &.triple-vertical {
            height: @tileTriple;
        }
        &.quadro-vertical {
            height: @tileQuadro;
        }

    }

    .tile {
        .tile-content {
            padding: 5px 10px;
        }

        &.icon {
            & > .tile-content {
                img {
                    width: 48px;
                    height: 48px;
                    margin-left: -24px;
                    margin-top: -24px;
                }
            }
        }

        .brand, .tile-status {
            & > .badge {
                width: 26px;
                height: 28px;
                right: 0;
                font-size: 9pt;
            }

            & > .name {
                margin-left: 10px;
            }

            & > .icon {
                width: 24px;
                height: 24px;
                margin: 5px 10px;
            }

            & > .text {
                left: 40px;
                right: 40px;
                font-size: 8pt;
            }
        }
    }
}