/*----------------------------------------*\
  RESPONSIVE CSS
\*----------------------------------------*/


/*

    CONTENTS

    A) BASIC MOBILE RESETS
    B) HEADER & TOP MENUS
    C) MAIN CONTENT & SIDEBAR
    D) TOGGLE BUTTON & FLYOUT MENU
    E) UX ELEMENTS
    F) PAGE SPECIFIC STYLES
    G) FORMS

*/


/* Hide new elements (toggle button and flyout menu) above 900px */
.mobile-toggle-button,
.flyout-menu
{
    display: none;
}

/*
    redmine's body is set to min-width: 900px
    add first breakpoint here and start adding responsiveness
*/

@media all and (max-width: 899px)
{
    /*----------------------------------------*\
        A) BASIC MOBILE RESETS
    \*----------------------------------------*/

    /*
        apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
        this helps us to better deal with percentages and padding / margin
    */
    *,
    *:before,
    *:after
    {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    body,
    html
    {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    html
    {
        overflow-y: auto; /* avoid 2nd scrollbar on desktop */
    }

    body
    {
        min-width: 0; /* reset the min-width of 900px */

        -webkit-overflow-scrolling: touch;
    }


    body,
    input,
    select,
    textarea,
    button
    {
        font-size: 14px;  /* Set font-size for standard elements to 14px */
    }


    select
    {
        max-width: 100%;  /* prevent long names within select menues from breaking content */
    }


    #wrapper
    {
        position: relative;

        overflow-x: hidden; /* hide horizontal overflow */

        max-width: 100%;
    }

    #wrapper,
    #wrapper2
    {
        margin: 0;
    }

    /*----------------------------------------*\
        B) HEADER & TOP MENUS
    \*----------------------------------------*/

    #header
    {
        width: 100%;
        height: 64px; /* the height of our header on mobile */
        min-height: 0;
        margin: 0;
        padding: 0;

        border: none;
        background-color: #628db6;
    }

    /* Hide project name on mobile (project name is still visible in select menu) */
    #header h1
    {
        display: none !important;
    }

    /* reset #header a color for mobile toggle button */
    #header a.mobile-toggle-button
    {
        color: #f8f8f8;
    }


    /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */
    #top-menu,
    #header #main-menu
    {
        display: none;
    }

    /* the quick search within header holding search form and #project_quick_jump_box box*/
    #header #quick-search
    {
        float: none;
        clear: none; /* there are themes which set clear property, this resets it */

        max-width: 100%; /* reset max-width */
        margin: 0;

        background: inherit;
    }

    /* this represents the dropdown arrow to left of the mobile project menu */
    #header .jump-box-arrow:before
    {
        /* set a font-size in order to achive same result in different themes */
        font-family: Verdana, sans-serif;
        font-size: 2em;
        line-height: 64px;

        position: absolute;
        left: 0;

        width: 2em;
        padding: 0 .5em;
        /* achieve dropdwon arrow by scaling a caret character */

        content: '^';
        -webkit-transform: scale(1,-.8);
            -ms-transform: scale(1,-.8);
                transform: scale(1,-.8);
        text-align: right;
        pointer-events: none;

        opacity: .6;
    }

    /* styles for combobox within quick-search (#project_quick_jump_box) */
    #header #quick-search select
    {
        font-size: 1.5em;
        font-weight: bold;
        line-height: 1.2;

        position: absolute;
        top: 15px;
        left: 0;

        float: left;

        width: 100%;
        max-width: 100%;
        height: 2em;
        height: 35px;
        padding: 5px;
        padding-right: 72px;
        padding-left: 50px;

        text-indent: .01px;

        color: inherit;
        border: 0;
        -webkit-border-radius: 0;
                border-radius: 0;
        background: none;
        -webkit-box-shadow: none;
                box-shadow: none;
        /* hide default browser arrow */

        -webkit-appearance: none;
           -moz-appearance: none;
    }

    #header #quick-search form
    {
        display: none;
    }

    /*----------------------------------------*\
        C) MAIN CONTENT & SIDEBAR
    \*----------------------------------------*/

    #main
    {
        padding: 0;
    }

    #main.nosidebar #content,
    div#content
    {
        width: 100%;
        min-height: 0; /* reset min-height of #content */
        margin: 0;
    }


    /* hide sidebar and sidebar switch panel, since it's placed in mobile flyout menu */
    #sidebar,
    #sidebar-switch-panel
    {
        display: none;
    }

    .splitcontentleft
    {
        width: 100%; /* use full width */
    }

    .splitcontentright
    {
        width: 100%; /* use full width */
    }

    /*----------------------------------------*\
        D) TOGGLE BUTTON & FLYOUT MENU
    \*----------------------------------------*/

    /* Mobile toggle button */

    .mobile-toggle-button
    {
        font-size: 42px;
        line-height: 64px;

        position: relative;
        z-index: 10;

        display: block; /* remove display: none; of non-mobile version */
        float: right;

        width: 60px;
        height: 64px;
        margin-top: 0;

        text-align: center;

        border-left: 1px solid #ddd;
    }

    .mobile-toggle-button:hover,
    .mobile-toggle-button:active
    {
        text-decoration: none;
    }

    .mobile-toggle-button:after
    {
        font-family: Verdana, sans-serif;

        display: block;

        margin-top: -3px;

        content: '\2261';
    }

    /* search magnifier icon */
    .search-magnifier
    {
        font-family: Verdana;

        cursor: pointer;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(45deg);
             -o-transform: rotate(45deg);

        color: #bbb;
    }

    .search-magnifier--flyout
    {
        font-size: 25px;
        line-height: 54px;

        position: absolute;
        z-index: 1;
        left: 12px;
    }


    /* Flyout Menu */

    .flyout-menu
    {
        position: absolute;
        right: -250px;

        display: block; /* remove display: none; of non-mobile version */
        overflow-x: hidden;

        width: 250px;
        height: 100%;
        margin: 0;      /* reset margin for themes that define it */
        padding: 0;     /* reset padding for themes that define it */

        color: white;
        background-color: #3e5b76;
    }


    /* avoid zoom on search input focus for ios devices */
    .flyout-menu input[type='text']
    {
        font-size: 16px;
    }

    .flyout-menu h3
    {
        font-size: 11px;
        line-height: 19px;

        height: 20px;
        margin: 0;
        padding: 0;

        letter-spacing: .1em;
        text-transform: uppercase;

        color: white;
        border-top: 1px solid #506a83;
        border-bottom: 1px solid #506a83;
        background-color: #628db6;
    }

    .flyout-menu h4
    {
        color: white;
    }

    .flyout-menu h3,
    .flyout-menu h4,
    .flyout-menu > p,
    .flyout-menu > a,
    .flyout-menu ul li a,
    .flyout-menu__search,
    .flyout-menu__sidebar > div,
    .flyout-menu__sidebar > p,
    .flyout-menu__sidebar > a,
    .flyout-menu__sidebar > form,
    .flyout-menu > div,
    .flyout-menu > form
    {
        padding-left: 8px;
    }

    .flyout-menu .flyout-menu__avatar
    {
        margin-top: -1px; /* move avatar up 1px */
        padding-left: 0;
    }

    .flyout-menu__sidebar > form
    {
        display: block;
    }

    .flyout-menu__sidebar > form h3
    {
        margin-left: -8px;
    }

    .flyout-menu__sidebar > form label
    {
        display: inline-block;

        margin: 8px 0;
    }

    .flyout-menu__sidebar > form br  br
    {
        display: none;
    }

    /* Targets list containing checkboxes (e.g. activities sidebar) in flyout menu */
    .flyout-menu__sidebar form > ul
    {
        margin-left: -8px;
        padding-left: 0;
    }

    .flyout-menu__sidebar form > ul li
    {
        line-height: 39px;

        display: block;

        padding-left: 8px;

        border-top: 1px solid rgba(255,255,255,.1);
    }

    .flyout-menu__sidebar form > ul li:first-child
    {
        border-top: none;
    }

    .flyout-menu__sidebar form > ul li label
    {
        margin: 0;
    }

    .flyout-menu__sidebar form > ul li label a
    {
        line-height: 1;

        display: inline;

        padding-left: 0;

        border: none;
    }

    .flyout-menu ul
    {
        margin: 0;
        padding: 0;

        list-style: none;
    }

    .flyout-menu #watchers
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: -webkit-box;
        display:         flex;
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
    }

    .flyout-menu #watchers .contextual
    {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
                order: 3;
    }

    .flyout-menu #watchers h3
    {
        margin-left: -8px;
    }

    .flyout-menu #watchers ul li
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: -webkit-box;
        display:         flex;
                flex-direction: row;

        -webkit-flex-direction: row;
            -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -webkit-box-align: center;
                align-items: center;
    }

    .flyout-menu ul li a
    {
        line-height: 40px;

        display: block;
        overflow: hidden;

        height: 40px;

        white-space: nowrap;
        text-overflow: ellipsis;

        border-top: 1px solid rgba(255,255,255,.1);
    }

    .flyout-menu ul li:first-child a
    {
        line-height: 39px;

        height: 39px;

        border-top: none;
    }

    .flyout-menu a
    {
        color: white;
    }

    .flyout-menu ul li a:hover
    {
        text-decoration: none;
    }

    .flyout-menu ul li a.new-object,
    .new-object ~ .menu-children
    {
        display: none;
    }

    /* Left flyout search container */
    .flyout-menu__search
    {
        line-height: 54px;

        height: 64px;
        padding-top: 3px;
        padding-right: 8px;
    }

    .flyout-menu__search input[type='text']
    {
        line-height: 2;

        width: 100%;
        height: 38px;
        padding-left: 27px;

        vertical-align: middle;

        border: none;
        -webkit-border-radius: 3px;
                border-radius: 3px;
        background-color: #fff;
    }

    .flyout-menu__avatar
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        width: 100%;

        border-top: 1px solid rgba(255,255,255,.1);
    }


    .flyout-menu__avatar img.gravatar
    {
        width: 40px;
        height: 40px;
        padding: 0;

        vertical-align: top;

        border-width: 0;
    }

    .flyout-menu__avatar a
    {
        line-height: 40px;

        height: auto;
        height: 40px;

        text-decoration: none;

        color: white;
    }

    /* avatar */
    .flyout-menu__avatar a:first-child
    {
        line-height: 0;

        width: 40px;
        padding: 0;
    }

    .flyout-menu__avatar .user
    {
        padding-left: 15px;
    }

    /* user link when no avatar is present */
    .flyout-menu__avatar--no-avatar a.user
    {
        line-height: 40px;

        padding-left: 8px;
    }


    .flyout-is-active body
    {
        overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
    }

    html.flyout-is-active
    {
        overflow: hidden;
    }


    .flyout-is-active  #wrapper
    {
        right: 250px; /* when left flyout is active, move body to the right (same amount like flyout-menu's width) */

        overflow: visible;

        height: 100%;
    }

    .flyout-is-active .mobile-toggle-button:after
    {
        content: '\00D7'; /* close glyph */
    }

    .flyout-is-active #wrapper2
    {

    /*
     * only relevant for devices with cursor when flyout it active, in order to show,
     * that whole wrapper content is clickable and closes flyout menu
     */
        cursor: pointer;
    }


    #admin-menu
    {
        padding-left: 0;
    }

    #admin-menu li
    {
        padding-bottom: 0;
    }

    #admin-menu a,
    #admin-menu a.selected
    {
        line-height: 40px;

        padding: 0;
        padding-left: 32px !important;

        background-position: 8px 50%;
    }

    /*----------------------------------------*\
        E) UX ELEMENTS
    \*----------------------------------------*/

    .mobile-hide {display:none;}
    .mobile-show {display:initial;}

    /* Contextual Buttons */

    #content>.contextual
    {
        width: 100%;
        margin-bottom: .5em;
        padding-left: 0; /* reset left padding in order to use whole space */

        white-space: normal;

        color: transparent;
    }

    #content>.contextual a,
    p.buttons a
    {
        font-weight: bold;

        display: inline-block;

        margin: 5px 0;
        margin-right: 2px;
        padding: 9px 9px 9px 9px;

        border: 1px solid #ddd;
        -webkit-border-radius: 3px;
                border-radius: 3px;
        background-color: transparent;
        background-position-x: 4px;
    }

    #content>.contextual a.icon,
    p.buttons a.icon
    {
        padding-left: 25px;
    }

    .flyout-menu .contextual
    {
        float: none;
    }

    /* loading indicator */
    #ajax-indicator {
        width: 60%;
        left: 20%;
    }

    /* jquery ui dialogs */
    .ui-dialog
    {
        max-width: 98%;
        margin: 1%;
    }

    .ui-dialog .ui-dialog-content
    {
        padding-left: 0;
        padding-right: 0;
    }

    #filters-table {width:100%; float:none;}
    .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}

    /*----------------------------------------*\
        F) PAGE SPECIFIC STYLES
    \*----------------------------------------*/

    /* page /login */

    #login-form table
    {
        width: 100%;
    }

    #login-form input#username,
    #login-form input#password,
    #login-form input#openid_url
    {
        width: 100%;
        height: auto;
    }

    /* some themes add a margin to login page, remove it on mobile */
    .action-login #main
    {
        margin: 0;
    }

    div#activity dl, #search-results { margin-left: 0; }

    .version-overview table.progress {width:75%;}
    div#version-summary {float:none; width:100%; margin-left:0;}
    body.controller-versions.action-show div#roadmap .related-issues {width:100%;}

    /*----------------------------------------*\
        G) FORMS
    \*----------------------------------------*/

    /* tabular forms resets for mobile */
    .tabular p, .tabular.settings p {
        padding-left: 0;
    }

    .tabular label, .tabular.settings label {
        display: block;
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .tabular input, .tabular select, .tabular textarea {
        width: 100%;
        max-width: 100%;
    }

    .tabular input[type="checkbox"], .tabular input.date {
        width: auto;
        max-width: 95%;
    }

    /* new issue form */
    #all_attributes p:first-child {
        float: none !important;
    }

    #issue_is_private_label {
        display: inline;
    }

    span#watchers_inputs {
        width: 100%;
    }
}