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

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .span1  {width: 42px;}
    .span2  {width: 104px;}
    .span3  {width: 166px;}
    .span4  {width: 228px;}
    .span5  {width: 290px;}
    .span6  {width: 352px;}
    .span7  {width: 414px;}
    .span8  {width: 476px;}
    .span9  {width: 538px;}
    .span10 {width: 600px;}
    .span11 {width: 662px;}
    .span12 {width: 724px;}

    .offset1  {margin-left: 62px; }
    .offset2  {margin-left: 124px;}
    .offset3  {margin-left: 186px;}
    .offset4  {margin-left: 248px;}
    .offset5  {margin-left: 310px;}
    .offset6  {margin-left: 372px;}
    .offset7  {margin-left: 434px;}
    .offset8  {margin-left: 496px;}
    .offset9  {margin-left: 558px;}
    .offset10 {margin-left: 620px;}
    .offset11 {margin-left: 682px;}
    .offset12 {margin-left: 744px;}

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

            & > .divider {
                display: none;
            }

            .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);
                    }
                }
            }

        }
    }

}