From: Jean-Philippe Lang <jp_lang@yahoo.fr>
Date: Sun, 6 Dec 2015 11:14:28 +0000 (+0000)
Subject: Merged r14955.
X-Git-Tag: 3.2.0~5
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=33ea4193c52883887ea62dc076eb6676b573f4fa;p=redmine.git

Merged r14955.

git-svn-id: http://svn.redmine.org/redmine/branches/3.2-stable@14956 e93f8b46-1217-0410-a6f0-8f06a7374b81
---

diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
index 73b40875d..981850c02 100644
--- a/public/stylesheets/responsive.css
+++ b/public/stylesheets/responsive.css
@@ -2,828 +2,692 @@
   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
-
+  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;
+.flyout-menu {
+  display: none;
 }
 
 /*
-    redmine's body is set to min-width: 900px
-    add first breakpoint here and start adding responsiveness
+  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;
-    }
+  /*----------------------------------------*\
+    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;
+  }
 
-    .flyout-is-active body
-    {
-        overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
-    }
+  .splitcontentleft {
+    width: 100%;
+  }
 
-    html.flyout-is-active
-    {
-        overflow: hidden;
-    }
+  .splitcontentright {
+    width: 100%;
+  }
 
+  /*----------------------------------------*\
+    D) TOGGLE BUTTON & FLYOUT MENU
+  \*----------------------------------------*/
+
+  .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;
+    color: #bbb;
+
+    cursor: pointer;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+  }
+
+  .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
+  \*----------------------------------------*/
 
-    .flyout-is-active  #wrapper
-    {
-        right: 250px; /* when left flyout is active, move body to the right (same amount like flyout-menu's width) */
+  /* page /login */
 
-        overflow: visible;
+  #login-form table {
+    width: 100%;
+  }
 
-        height: 100%;
-    }
+  #login-form input#username,
+  #login-form input#password,
+  #login-form input#openid_url {
+    width: 100%;
+    height: auto;
+  }
 
-    .flyout-is-active .mobile-toggle-button:after
-    {
-        content: '\00D7'; /* close glyph */
-    }
+  /* some themes add a margin to login page, remove it on mobile */
+  .action-login #main {
+    margin: 0;
+  }
 
-    .flyout-is-active #wrapper2
-    {
+  div#activity dl, #search-results {margin-left: 0;}
 
-    /*
-     * 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;
-    }
+  .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%;}
 
-
-    #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%;
-    }
+  /*----------------------------------------*\
+    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%;
+  }
 }
 
 @media all and (max-width: 599px) {