new layout

app/assets/stylesheets/projects.css.scss

@@ -525,22 +525,28 @@ h4.dash-tabs {
   }
 }
 
-body header,
-h4.middle-panel { 
-
+body header { 
+  position:absolute;
+  width:100%;
+  padding:0;
+  margin:0;
+  top:0;
+  left:0;
   background: #999; /* for non-css3 browsers */
-
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#EAEAEA'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#EAEAEA)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #FAFAFA,  #EAEAEA); /* for firefox 3.6+ */ 
-
-  margin: 0; 
   border-bottom: 1px solid #ccc; 
-  padding: 10px 20px;
-  font-size: 11px;
-  //background: #F7F7F7;
-  height:30px;
 
+  height:50px;
+
+  .wrapper { 
+    margin:auto;
+    width:980px;
+    padding: 10px 0;
+    font-size: 11px;
+    position:relative;
+  }
   .project_name {
     float:left;
     width:235px;

app/assets/stylesheets/style.scss

@@ -74,7 +74,10 @@ $blue_link: "#2fa0bb";
 /* eo Vars */
 
 html{ -webkit-font-smoothing:antialiased; }
-body{font-size: 12px; background-color: #F5F5F5;}
+body { 
+  font-size: 12px; 
+  background-color: #F7F7F7;
+}
 a{text-decoration: none; font-weight: bold; color: #444}
 a:hover{color: #555}
 /* Typography */
@@ -330,7 +333,12 @@ body.login-page{background-color: #f1f1f1; padding-top: 10%}
 
 /* General */
 #container{background-color: white; overflow: hidden; }
-body.collapsed #container{margin: auto; width: 980px; border: 1px solid rgba(0,0,0,.22); border-top: 0; box-shadow: 0 0 0px 4px rgba(0,0,0,.04)}
+body.collapsed #container{ 
+  margin: auto;
+  margin-top:51px;
+  width: 980px;
+  border-top: 0;
+}
 
 /* Header */
 header{
@@ -429,7 +437,16 @@ header{margin-bottom: 0; clear: both; position:relative;}
 .right{float: right;}
 
 /* Account box */
-header .account-box{position: absolute; right: 0; top: 8px; z-index: 10000; width: 128px;  font-size: 11px; float: right; display: block; cursor: pointer;}
+header .account-box{ 
+  position: absolute; 
+  right: 0; 
+  top: 8px;
+  z-index: 10000;
+  width: 128px;
+  font-size: 11px;
+  float: right;
+  display: block;
+  cursor: pointer;}
 header .account-box img{ border-radius: 4px; right: 20px; position: absolute; width: 38px; height: 38px; display: block; box-shadow: 0 1px 2px black; top:-3px;}
 header .account-box img:after{
   content: " ";
@@ -625,7 +642,7 @@ body.project-page h2.icon .project-name i.arrow{float: right;
 body.project-page h2.icon span{  background-position:  -78px -68px; }
 body.project-page .project-container{ position: relative; float: left; width: 100%; height: 100%; padding-bottom: 10px;}
 body.project-page .page-title{margin-bottom: 0}
-body.project-page .project-sidebar {width: 110px;  left: 0; top: 0; height: 100%; bottom: 0;  position: absolute; float: left; display: inline-block; background: #F7F7F7; padding: 20px 0 20px 2%; margin: 0; border-right: 1px solid #ddd; }
+body.project-page .project-sidebar {width: 110px;  left: 0; top: 0; height: 100%; bottom: 0;  position: absolute; float: left; display: inline-block; background: #F7F7F7; padding: 20px 0 20px 0; margin: 0; border-right: 1px solid #ddd; }
 
 body.projects-page input.text.git-url { font-size: 12px; border-radius: 5px; color: #666; box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; padding:  8px 0 8px 30px;  margin-bottom: 20px;  background: white url('images.png') no-repeat 8px -40px; width: 136px}
 body.projects-page input.text.git-url {margin:10px 0 0 }
@@ -651,7 +668,7 @@ body.project-page .project-sidebar aside a.current {
   border: 1px solid #2FA0BB;
   border-radius:5px;
 }
-body.project-page .project-content{ padding: 20px; display: block; margin-left: 130px; min-height: 600px}
+body.project-page .project-content{ padding: 20px; display: block; margin-left: 110px; min-height: 600px}
 body.project-page .project-content h2{ margin-top: 6px}
 body.project-page .project-content .button.right{margin-left: 20px}
 body.project-page table .commit a{color: #{$blue_link}}

app/views/layouts/_head_panel.html.haml

 / Page Header
 %header.top_panel_holder
+  .wrapper
     %div.top_links_holder
       = link_to root_path, :class => "top_link home", :title => "Home" do 
         = image_tag "Home-UI.PNG", :width => 26
@@ -37,7 +38,7 @@
     -#.search
       = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
     / .login-top
-- if current_user
+  - if current_user
     = javascript_tag do
       $(function(){
       $("#search").autocomplete({
@@ -46,7 +47,7 @@
       });
       });
 
-- if current_user.require_ssh_key?
+  - if current_user.require_ssh_key?
     #no_ssh_key_defined.big-message.error
       %p
         No SSH Key is defined. You won't be able to use any Git command!. Click #{link_to( 'here', keys_path )} to add one!