@@ -1549,7 +1549,6 @@ button.close {

 .header {

   background:#f5f5f5;

   border-bottom:1px solid #e5e5e5;

-  margin-bottom:10px;

   overflow:hidden;

 }

@@ -1606,5 +1605,35 @@ button.close {

   padding-left:8px;

 }

+.project-header {

+  background:#fafafa;

+  border-bottom: 1px solid #eee;

+  margin-bottom:10px;

+  overflow:hidden;

+  padding:14px 0 10px 0;

+}

+

+.project-header-left {

+  float:left;

+  width:50%;

+  overflow:hidden;

+}

+

+.project-header-right {

+  float:left;

+  width:50%;

+  overflow:hidden;

+}

+

+.project-header-right-container {

+  float:right;

+  overflow:hidden;

+}

+

+.project-header-btn-container {

+  float:left;

+  margin-right:4px;

+}

+

 /* Markdown */

 .markdown-body{padding:40px 40px;font-family:"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body:before{display:table;content:""}.markdown-body:after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0 !important}.markdown-body>*:last-child{margin-bottom:0 !important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#c00}.markdown-body .anchor{display:inline-block;padding-right:2px;margin-left:-18px}.markdown-body .anchor:focus{outline:none}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:1em;margin-bottom:16px;font-weight:bold;line-height:1.4}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#000;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 tt,.markdown-body h1 code,.markdown-body h2 tt,.markdown-body h2 code,.markdown-body h3 tt,.markdown-body h3 code,.markdown-body h4 tt,.markdown-body h4 code,.markdown-body h5 tt,.markdown-body h5 code,.markdown-body h6 tt,.markdown-body h6 code{font-size:inherit}.markdown-body h1{padding-bottom:0.3em;font-size:2.25em;line-height:1.2;border-bottom:1px solid #eee}.markdown-body h1 .anchor{line-height:1}.markdown-body h2{padding-bottom:0.3em;font-size:1.75em;line-height:1.225;border-bottom:1px solid #eee}.markdown-body h2 .anchor{line-height:1}.markdown-body h3{font-size:1.5em;line-height:1.43}.markdown-body h3 .anchor{line-height:1.2}.markdown-body h4{font-size:1.25em}.markdown-body h4 .anchor{line-height:1.2}.markdown-body h5{font-size:1em}.markdown-body h5 .anchor{line-height:1.1}.markdown-body h6{font-size:1em;color:#777}.markdown-body h6 .anchor{line-height:1.1}.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre{margin-top:0;margin-bottom:16px}.markdown-body hr{height:4px;padding:0;margin:16px 0;background-color:#e7e7e7;border:0 none}.markdown-body ul,.markdown-body ol{padding-left:2em}.markdown-body ul.no-list,.markdown-body ol.no-list{padding:0;list-style-type:none}.markdown-body ul ul,.markdown-body ul ol,.markdown-body ol ol,.markdown-body ol ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:16px}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body blockquote{padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body table{display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table th{font-weight:bold}.markdown-body table th,.markdown-body table td{padding:6px 13px;border:1px solid #ddd}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body img{max-width:100%;box-sizing:content-box;background-color:#fff}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #ddd}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:#333}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:0;padding-top:0.2em;padding-bottom:0.2em;margin:0;font-size:85%;background-color:rgba(0,0,0,0.04);border-radius:3px}.markdown-body code:before,.markdown-body code:after,.markdown-body tt:before,.markdown-body tt:after{letter-spacing:-0.2em;content:"\00a0"}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body pre{word-wrap:normal}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.markdown-body pre code:before,.markdown-body pre code:after,.markdown-body pre tt:before,.markdown-body pre tt:after{content:normal}.markdown-body kbd{display:inline-block;padding:3px 5px;font-size:11px;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:solid 1px #ccc;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.markdown-body blockquote{padding:0 0 0 40px;border:0 none}

@@ -59,48 +59,54 @@

 </div>

 % if (!$no_project_header && (defined $user || defined $project)) {

-  <div>

+  <div class="project-header">

     <div class="container">

-      <div>

-        <div>

-          <ul class="breadcrumb" style="margin:0;background:none;padding-left:0;font-size:16px;">

-            <li><a href="<%= url_for('/') %>"><i class="icon-home"></i></a></li>

+      <div class="project-header-left">

+        <ul class="breadcrumb" style="margin:0;background:none;padding-left:0;font-size:16px;">

+          <li><a href="<%= url_for('/') %>"><i class="icon-home"></i></a></li>

+          /

+          <li><a href="<%= url_for("/$user") %>"><%= $user %></a></li>

+          % if (defined $project) {

             /

-            <li><a href="<%= url_for("/$user") %>"><%= $user %></a></li>

-            % if (defined $project) {

-              /

-              <li><b><a href="<%= url_for("/$user/$project") %>"><%= $project %></a></b></li>

-            % }

-            

-            % if ($is_private_project) {

-              <i class="icon icon-lock" style="margin-left:5px;margin-right:5px"></i>

-            % }

-            

-            % if (defined $original_project) {

-              (

-                forked from

-                <a href="<%= url_for("/$original_user/$original_project") %>">

-                  <%= "$original_user/$original_project" %>

-                </a>

-              )

-            % }

-          </ul>

+            <li><b><a href="<%= url_for("/$user/$project") %>"><%= $project %></a></b></li>

+          % }

+          

+          % if ($is_private_project) {

+            <i class="icon icon-lock" style="margin-left:5px;margin-right:5px"></i>

+          % }

+          

+          % if (defined $original_project) {

+            (

+              forked from

+              <a href="<%= url_for("/$original_user/$original_project") %>">

+                <%= "$original_user/$original_project" %>

+              </a>

+            )

+          % }

+        </ul>

+      </div>

+      <div class="project-header-right">

+        <div class="project-header-right-container">

+          % if (defined $project) {

+            <div class="project-header-btn-container">

+              <a class="btn" href="<%= url_for("/$user/$project/network") %>" >Network</a>

+            </div>

+            <div class="project-header-btn-container">

+              % if ($logined && $current_user ne $user ) {

+                <a href="<%= url_for("/$user/$project/fork") %>" class="btn">Fork</a>

+              % } else {

+                <button class="btn disabled" disabled>Fork</button>

+              % }

+            </div>

+            <div class="project-header-btn-container">

+              % if ($logined && $user eq session('user')) {

+                <a class="btn" href="<%= url_for("/$user/$project/settings") %>">Settings</a>

+              % } else {

+                <button class="btn disabled" disabled>Settings</button>

+              % }

+            </div>

+          % }

         </div>

-        % if (defined $project) {

-          <div>

-            <a class="btn" href="<%= url_for("/$user/$project/network") %>" >Network</a>

-            % if ($logined && $current_user ne $user ) {

-              <a href="<%= url_for("/$user/$project/fork") %>" class="btn">Fork</a>

-            % } else {

-              <button class="btn disabled" disabled>Fork</button>

-            % }

-            % if ($logined && $user eq session('user')) {

-              <a class="btn" href="<%= url_for("/$user/$project/settings") %>">Settings</a>

-            % } else {

-              <button class="btn disabled" disabled>Settings</button>

-            % }

-          </div>

-        % }

       </div>

     </div>

   </div>