Fixed media queries

build/less/404_500_errors.less

@@ -5,7 +5,7 @@
 .error-page {
   width: 600px;
   margin: 20px auto 0 auto;
-  @media screen and (max-width: @screen-sm) {
+  @media (max-width: @screen-sm-max) {
     width: 100%;
   }
   //For the error number e.g: 404
@@ -13,7 +13,7 @@
     float: left;
     font-size: 100px;
     font-weight: 300;
-    @media screen and (max-width: @screen-sm) {
+    @media (max-width: @screen-sm-max) {
       float: none;
       text-align: center;
     }
@@ -21,13 +21,13 @@
   //For the message
   > .error-content {
     margin-left: 190px;
-    @media screen and (max-width: @screen-sm) {
+    @media (max-width: @screen-sm-max) {
       margin-left: 0;
     }
     > h3 {
       font-weight: 300;
       font-size: 25px;
-      @media screen and (max-width: @screen-sm) {
+      @media(max-width: @screen-sm-max) {
         text-align: center;
       }
     }

build/less/header.less

@@ -8,11 +8,12 @@
   max-height: 100px;
   z-index: 1030;
   //Navbar
-  .navbar {
+  > .navbar {
     margin-bottom: 0;
     margin-left: @sidebar-width;
     border: none;
     min-height: @navbar-height;
+    border-radius: 0;
   }
   //Navbar Right Menu
   .navbar-custom-menu,
@@ -124,7 +125,7 @@
     }
   }
 
-  @media screen and (max-width: @screen-sm) {
+  @media (max-width: @screen-sm-max) {
     > .breadcrumb {
       position: relative;
       margin-top: 5px;

build/less/lockscreen.less

@@ -27,7 +27,7 @@
   font-size: 90px;
 }
 
-@media screen and (max-width: @screen-xs) {
+@media (max-width: @screen-xs-max) {
   .lockscreen .headline {
     font-size: 60px;
     margin-bottom: 40px;

build/less/mailbox.less

@@ -43,7 +43,7 @@
     }
   }
 
-  @media screen and (max-width: @screen-sm) {
+  @media (max-width: @screen-sm-max) {
     .nav-stacked {
       > li:not(.header) {
         float: left;

build/less/small-box.less

@@ -75,7 +75,7 @@
   }
 }
 
-@media screen and (max-width: @screen-xs) {
+@media (max-width: @screen-xs-max) {
   // No need for icons on very small devices
   .small-box {
     text-align: center;
@@ -86,5 +86,4 @@
       font-size: 12px;
     }
   }
-
 }

dist/css/AdminLTE.css

@@ -203,11 +203,12 @@ a:focus {
   max-height: 100px;
   z-index: 1030;
 }
-.main-header .navbar {
+.main-header > .navbar {
   margin-bottom: 0;
   margin-left: 230px;
   border: none;
   min-height: 50px;
+  border-radius: 0;
 }
 .main-header .navbar-custom-menu,
 .main-header .navbar-right {
@@ -308,7 +309,7 @@ a:focus {
 .content-header > .breadcrumb > li + li:before {
   content: '>\00a0';
 }
-@media screen and (max-width: 768px) {
+@media (max-width: 991px) {
   .content-header > .breadcrumb {
     position: relative;
     margin-top: 5px;
@@ -1133,7 +1134,7 @@ a:focus {
 .small-box:hover .icon {
   font-size: 95px;
 }
-@media screen and (max-width: 480px) {
+@media (max-width: 767px) {
   .small-box {
     text-align: center;
   }
@@ -2525,7 +2526,7 @@ table.text-center th {
 .mailbox .table-mailbox tr > td > a {
   color: #444;
 }
-@media screen and (max-width: 768px) {
+@media (max-width: 991px) {
   .mailbox .nav-stacked > li:not(.header) {
     float: left;
     width: 50%;
@@ -2563,7 +2564,7 @@ table.text-center th {
   margin: 10px 0 30px 0;
   font-size: 90px;
 }
-@media screen and (max-width: 480px) {
+@media (max-width: 767px) {
   .lockscreen .headline {
     font-size: 60px;
     margin-bottom: 40px;
@@ -2681,7 +2682,7 @@ table.text-center th {
   width: 600px;
   margin: 20px auto 0 auto;
 }
-@media screen and (max-width: 768px) {
+@media (max-width: 991px) {
   .error-page {
     width: 100%;
   }
@@ -2691,7 +2692,7 @@ table.text-center th {
   font-size: 100px;
   font-weight: 300;
 }
-@media screen and (max-width: 768px) {
+@media (max-width: 991px) {
   .error-page > .headline {
     float: none;
     text-align: center;
@@ -2701,7 +2702,7 @@ table.text-center th {
   margin-left: 190px;
   display: block;
 }
-@media screen and (max-width: 768px) {
+@media (max-width: 991px) {
   .error-page > .error-content {
     margin-left: 0;
   }
@@ -2710,7 +2711,7 @@ table.text-center th {
   font-weight: 300;
   font-size: 25px;
 }
-@media screen and (max-width: 768px) {
+@media (max-width: 991px) {
   .error-page > .error-content > h3 {
     text-align: center;
   }

documentation/index.html

@@ -25,6 +25,7 @@
       }
       .content-wrapper {
         background: #f9f9f9;
+        padding: 0 10px;
       }
       .page-header {
         border: 0;
@@ -61,6 +62,21 @@
         font-size: 16px;
         font-weight: 400;
       }
+      .eg{
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-block;
+        background: #f4f4f4;
+        padding: 5px;
+        border-bottom-right-radius: 3px;
+        border-top-left-radius: 3px;
+        border-bottom: 1px solid #eee;
+        border-right: 1px solid #eee;
+      }
+      .eg + * {
+        margin-top: 30px;
+      }
       .content {
         padding: 10px 25px;
       }
@@ -105,6 +121,10 @@
         pre .atn, code .atn { color: #404 }
         pre .atv, code .atv { color: #060 }
       }
+      .sidebar {
+        margin-top: 0;
+        padding-top: 0!important;
+      }
     </style>
   </head>
   <body class="skin-blue fixed" data-spy="scroll" data-target="#scrollspy">
@@ -270,13 +290,12 @@ AdminLTE/
 
           <section id='layout'>
             <h2 class='page-header'><span>Layout</span></h2>
-            <p class='lead'>The first thing that you probably want to do is understanding the layout
+            <p class='lead'>The layout consists of four major parts:</p>
-              of AdminLTE. The layout consists of four major parts:</p>
             <ul>
-              <li>Wrapper <code>.wrapper</code></li>
+              <li>Wrapper <code>.wrapper</code>. A div that wraps the whole site.</li>
-              <li>Main Header <code>.main-header</code></li>
+              <li>Main Header <code>.main-header</code>. Contains the logo and navbar.</li>
-              <li>Sidebar <code>.sidebar-wrapper</code></li>
+              <li>Sidebar <code>.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li>
-              <li>Content <code>.content-wrapper</code></li>
+              <li>Content <code>.content-wrapper</code>. Contains the page header and content.</li>
             </ul>
             <p>A full layout example for a quick start</p>
             <pre class='prettyprint'>
@@ -398,6 +417,145 @@ AdminLTE/
               navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide.
               The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for
               the top nav layout.</p>
+            <div class="box box-solid">
+              <div class="box-body" style="position: relative;">
+                <span class="eg">Main Header Example</span>
+                <header class="main-header" style="position: relative;">
+                  <!-- Logo -->
+                  <a href="index2.html" class="logo">AdminLTE</a>
+                  <!-- Header Navbar: style can be found in header.less -->
+                  <nav class="navbar" role="navigation" style="border: 0;">
+                    <!-- Sidebar toggle button-->
+                    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+                      <span class="sr-only">Toggle navigation</span>
+                    </a>
+                    <!-- Navbar Right Menu -->
+                    <div class="navbar-custom-menu">
+                      <ul class="nav navbar-nav">
+                        <!-- Messages: style can be found in dropdown.less-->
+                        <li class="dropdown messages-menu">
+                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <i class="fa fa-envelope-o"></i>
+                            <span class="label label-success">4</span>
+                          </a>
+                          <ul class="dropdown-menu">
+                            <li class="header">You have 4 messages</li>
+                            <li>
+                              <!-- inner menu: contains the actual data -->
+                              <ul class="menu">
+                                <li><!-- start message -->
+                                  <a href="#">
+                                    <div class="pull-left">
+                                      <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+                                    </div>
+                                    <h4>
+                                      Support Team
+                                      <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                                    </h4>
+                                    <p>Why not buy a new awesome theme?</p>
+                                  </a>
+                                </li><!-- end message -->                                
+                              </ul>
+                            </li>
+                            <li class="footer"><a href="#">See All Messages</a></li>
+                          </ul>
+                        </li>
+                        <!-- Notifications: style can be found in dropdown.less -->
+                        <li class="dropdown notifications-menu">
+                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <i class="fa fa-bell-o"></i>
+                            <span class="label label-warning">10</span>
+                          </a>
+                          <ul class="dropdown-menu">
+                            <li class="header">You have 10 notifications</li>
+                            <li>
+                              <!-- inner menu: contains the actual data -->
+                              <ul class="menu">
+                                <li>
+                                  <a href="#">
+                                    <i class="ion ion-ios-people info"></i> 5 new members joined today
+                                  </a>
+                                </li>                                
+                              </ul>
+                            </li>
+                            <li class="footer"><a href="#">View all</a></li>
+                          </ul>
+                        </li>
+                        <!-- Tasks: style can be found in dropdown.less -->
+                        <li class="dropdown tasks-menu">
+                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <i class="fa fa-flag-o"></i>
+                            <span class="label label-danger">9</span>
+                          </a>
+                          <ul class="dropdown-menu">
+                            <li class="header">You have 9 tasks</li>
+                            <li>
+                              <!-- inner menu: contains the actual data -->
+                              <ul class="menu">
+                                <li><!-- Task item -->
+                                  <a href="#">
+                                    <h3>
+                                      Design some buttons
+                                      <small class="pull-right">20%</small>
+                                    </h3>
+                                    <div class="progress xs">
+                                      <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                                        <span class="sr-only">20% Complete</span>
+                                      </div>
+                                    </div>
+                                  </a>
+                                </li><!-- end task item -->                                
+                              </ul>
+                            </li>
+                            <li class="footer">
+                              <a href="#">View all tasks</a>
+                            </li>
+                          </ul>
+                        </li>
+                        <!-- User Account: style can be found in dropdown.less -->
+                        <li class="dropdown user user-menu">
+                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                            <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+                            <span class="hidden-xs">Alexander Pierce</span>
+                          </a>
+                          <ul class="dropdown-menu">
+                            <!-- User image -->
+                            <li class="user-header">
+                              <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+                              <p>
+                                Alexander Pierce - Web Developer
+                                <small>Member since Nov. 2012</small>
+                              </p>
+                            </li>
+                            <!-- Menu Body -->
+                            <li class="user-body">
+                              <div class="col-xs-4 text-center">
+                                <a href="#">Followers</a>
+                              </div>
+                              <div class="col-xs-4 text-center">
+                                <a href="#">Sales</a>
+                              </div>
+                              <div class="col-xs-4 text-center">
+                                <a href="#">Friends</a>
+                              </div>
+                            </li>
+                            <!-- Menu Footer-->
+                            <li class="user-footer">
+                              <div class="pull-left">
+                                <a href="#" class="btn btn-default btn-flat">Profile</a>
+                              </div>
+                              <div class="pull-right">
+                                <a href="#" class="btn btn-default btn-flat">Sign out</a>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </nav>
+                </header>
+              </div>
+            </div>
             <pre class='prettyprint'>
 &LT;header class="main-header">
   &LT;a href="../../index2.html" class="logo">
@@ -587,6 +745,8 @@ AdminLTE/
   &LT;/nav>
 &LT;/header>
             </pre>
+            
+            
           </section>
 
           <!-- ============================================================= -->