app.css

/* ------------------------------------------
  Reset ♥
  http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
---------------------------------------------*/
html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
  }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/* remember to define focus styles. Hee Haw */
:focus { outline: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  }


/* ------------------------------------------
  Typography
---------------------------------------------*/
html,body {
  color: #7A8387;
  background: #e7eef2;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  line-height: 1.5em;
  }

body,
textarea,
input { font: 13px/20px 'OpenSans', sans-serif; }

a {
  color: #526066;
  text-decoration: none;
  }
a:hover {
  color: #204859;
  }
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  }

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  }
h4, h5, h6 {
  }

h1 { font-size: 24px; }
h1 small { font-size: 13px; font-weight: normal; }
h2 { font-size: 24px; }
h2 small { font-size: 16px; }
h3 { font-size: 16px; font-weight: normal; }
h3 small { font-size: 14px; font-weight: normal; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }
h6 { font-size: 11px; font-weight: normal; }


/* Use border-box box model */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* ------------------------------------------
  Globals
---------------------------------------------*/
 
#main {
  padding-top: 60px;
  overflow:auto;
  padding-bottom: 60px; /* must be same height as the footer */
}

#post .inner  {
  position: relative;
}

/* ------------------------------------------
  Footer - a sticky one
---------------------------------------------*/


/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

#container { 
  min-height: 100%;
  min-width: 960px;
}

#footer {
  position: relative;
  margin-top: -60px; /* negative value of footer height */
  height: 60px;
  
  line-height: 60px;
  background: #e0e7eb;
  border-top: 1px solid #c3ccd0;
  clear:both;
}

#footer .footer-content {
  width: 960px;
  margin: 0 auto;
  font-size: 16px;
}


/* ------------------------------------------
  Startpage
---------------------------------------------*/

.dialog {
  position: relative;
  margin: 40px auto 0 auto;
  color: #7A8387;
  width: 340px;
}

#start .splash {
  text-align: center;
  background: #E0E7EB;
  font-family: 'OpenSans', sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.3em;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

#start .splash h2 {
  background: url('images/sprite.png') 128px 18px no-repeat;
  text-indent: -3000px;
  overflow: hidden;
  display: block;
  height: 160px;
}

.authorize {
  background: #c9d1d6;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  padding: 20px ;
}

.authorize p {margin-top: 0;}
  
.authorize a.button {
  display: block;
  background: #516066;
  padding: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family:'OpenSans', sans-serif; 
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
}
  .authorize a.button:hover { background: #475459;}

/* ------------------------------------------
  Repos listing
---------------------------------------------*/

body.start {
  
}

#start .owner {
  font-family: 'OpenSans', sans-serif;
  font-size: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 30px;
  width: 200px;
  background: url('images/sprite.png') 0px -545px no-repeat;
}

#start {
  padding-bottom: 20px;
  width: 960px;
  margin: 0 auto;
}

.repos {
  overflow: auto;
  padding: 10px 0;
}

.repos > a {
  font-family: 'OpenSans', sans-serif;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1);

  background:url('images/sprite.png') -450px -640px no-repeat;
  background-color: #E0E7EB;
  
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -webkit-transition: background-color 200ms linear;
  transition: background-color 200ms linear;

  -moz-border-radius: 3px 3px 0px 3px;
  -webkit-border-radius: 3px 3px 0px 3px;
  border-radius: 3px 3px 0px 3px;

  text-align: center;
  padding: 10px;
  position: relative;
  margin-right: 20px;
  margin-top: 20px;
  width: 140px;
  height: 180px;
  color: #444;
  display: block;
  float: left;
}

.repos > a:hover {
  background-color: #f0f5f7;
}

.repos > a .name {
  display: block;
  position: relative;
  top: 40%;
  margin: auto;
  font-size: 12px;
  text-align: center;
  overflow: hidden;
  word-wrap: break-word;
  color: #526066;
}

.repos > a:hover .name {
  color: #526066;
}

.repos a .branches {
  position: absolute;
  background:url('images/sprite.png') -450px -640px no-repeat;
  background-color: #f0f5f7;
  -moz-border-radius: 3px 3px 0px 3px;
  -webkit-border-radius: 3px 3px 0px 3px;
  border-radius: 3px 3px 0px 3px;
  font-size: 12px;
  text-align: left;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  padding: 10px;
  overflow: auto;
  border-radius: 3px;
}

.repos a .branches .label {
  line-height: 27px;
  padding: 0 5px;
}

.repos a .branches .not-jekyll {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  color: #C52528;
  text-align: center;
  padding-top: 80px;
  padding-top: 45px;
  margin: auto;
  overflow: hidden;
  word-wrap: break-word;
}

  
.repos a .branches .branch {
  padding: 2px 5px;
  text-align: center;
}

.repos a .branches a.branch {
  display: block;
  color: #555;
}

.loading-branches {
  position: absolute;
  margin: auto;
  left: 0; right: 0; top: 0; bottom: 0;
  background: url('images/ajax-loader.gif') no-repeat;
  height: 40px;
  width: 44px;
  color: #444;
}

.repos a .branches a.branch:hover  {
  /*color: #eee;*/
  background: #E0E7EB;
}

.start .sites,
.dialog form {
  width: 240px;
  position: absolute;
  left: 50%;
  margin-left: -120px;
  }

ul.site li {
  position: relative;
  }

ul.site li a {
  display: block;
  border-bottom: 1px solid #eee;
  padding: 4px 0;
  }
  ul.site li a:hover {
    background: url(images/icons.png) no-repeat 220px -20px;
    }

/* User box */
#user {
  font-size:12px;
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  padding:5px;
  background:#eee;
  border-radius:0 0 0 5px;
  box-shadow:
  inset #ccc 0px 1px,
  inset #ddd 0px 0px 5px,
  #fff 0px 1px,
  #f8f8f8 0px 3px 3px;
  }
  #user img {
    border-radius:2px;
    width:30px;
    height:30px;
    vertical-align:middle;
    }
  #user .name,
  #user .logout {
    display:inline;
    padding:0 5px;
    }
  #user a { color:#222; }
  #user .logout a { color:#999; }

/* Form hint */
#hint {
  position: absolute;
  top: -30px;
  font-size: 20px;
  width: 100%;
  text-align: center;
  }


/* ------------------------------------------
  New post
---------------------------------------------*/

.step {
  background: white;
  padding: 20px 20px 40px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 318px;
  margin: 40px auto 0;
  border: 1px solid #CCC;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
  }
  .step form {
    width: 240px;
    margin: 0 auto;
    }

/* ------------------------------------------
  Posts
---------------------------------------------*/

#posts {
  padding: 30px 0;
  width: 960px;
  margin: 0 auto;
}


#publish_status {
  position: relative;
  height: 50px;
  }
  #publish_status.active {
    background: #fff;
    border: 1px solid #a0a0a0;
    }

.post-listing a.link {
  background:url('images/sprite.png') -450px -400px no-repeat;
  background-color: #E0E7EB; 
  float: left;
  width: 140px;
  height: 180px;
  margin: 0 20px 20px 0;
  padding: 10px;
  position: relative;
  color: #404040;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 3px 40px 3px 3px;
   -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -webkit-transition: background-color 200ms linear;
  }
  .post-listing a.link:hover { 
  background-color: #f0f5f7; 
  }

.post-listing a.link .filename {
  display: block;
  position: relative;
  top: 40%;
  margin: auto;
  font-size: 12px;
  text-align: center;
  font-family: 'OpenSans', sans-serif;
  overflow: hidden;
  word-wrap: break-word;
  color: #526066;
}

.post-listing a.link.folder .filename {
  color: rgba(255,255,255, 0.8);
  word-wrap: break-word;
  color: #526066;
}
.post-listing a.link.folder:hover .filename {
}

.post-listing a.link:hover .filename {
  color: #526066;
}

.post-listing a.link:hover {
  border-color: #a0a0a0;
  color: #404040;
}

.post-listing a.link:active {
  border-color: #526066;
}

.post-listing a.link.folder {
  background:url('images/sprite.png') -450px -150px no-repeat;
  background-color: #E0E7EB;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -webkit-transition: background-color 200ms linear;
  }
  .post-listing a.link.folder:hover { 
    background-color: #f0f5f7; 
    }

.post-listing a.link.new .button {
  background: #516066 url('images/sprite.png') -440px -90px no-repeat;
  text-indent: 10px;
  padding: 5px;
  margin: 70px 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-transform: uppercase;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  }
  .post-listing a.link.new .button:hover { background: #475459 url('images/sprite.png') -440px -90px no-repeat; }
/* ------------------------------------------
  Post
---------------------------------------------*/


.document-menu {
  padding: 0 20px;
  height: 60px;
  background: #667880;
  overflow: visible;
  line-height: 40px;

  -moz-transition: background 200ms linear;
  -o-transition: background 200ms linear;
  -webkit-transition: background 200ms linear;
  transition: background 200ms linear;
  z-index: 2000;
}

#post.sticky-menu .document-menu {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
}

#post.sticky-menu .document {
  margin-top: 60px;
}

#post.published .document-menu {
  background: #90bb74;
}

#post.published .metadata {
  background: #73965d;
}

.document-menu .options {
  display: none;
  background: #667880;
  -moz-transition: background 200ms linear;
  -o-transition: background 200ms linear;
  -webkit-transition: background 200ms linear;
  transition: background 200ms linear;
}

#post.published .document-menu .options {
  background: #90bb74;
}

.document-menu-content {
  width: 960px;
  margin: 0 auto;
  color: #E7EEF2;
  font-weight: bold;
  position: relative;
}

.document-menu-content .status {
  position: absolute;
  left: -50px;
  width: 50px;
  height: 60px;
  background-image:url('images/sprite.png');
  background-position: -290px -185px;
}

#post.published .document-menu-content .status {
  background-position: -290px -285px;
}

.document-menu-content .menu-item {
  background: rgba(0,0,0, 0.2);
  line-height: 40px;
  margin: 10px 0;
}

.document-menu-content .menu-item state {
  background: none;
}

.document-menu-content .menu-item.preview {
  background-image:url('images/sprite.png');
  background-position: -438px 15px;
  background-repeat: no-repeat;
  width: 40px;
  padding: 0;
}

.document-menu-content .menu-item.preview.active {
  background-color: rgba(0,0,0, 0.6);
}

.document-menu-content .menu-item.meta {
  background-image:url('images/sprite.png');
  background-position: -288px 14px;
  padding-left: 35px;
  padding-right: 10px;
}

.document-menu-content .menu-item.meta.active {
  background-color: rgba(0,0,0, 0.6);
}

.document-menu-content a {
  color: #E7EEF2;
}

.menu-item {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.menu-item:hover {
  background: rgba(0,0,0, 0.3);
}

.document-menu-content .menu-item.meta {
  margin-left: 20px;
}

.document-menu-content .filename input {
  font-family: Menlo, monospace;
  background: transparent;
  border: none;
  height: 40px;
  font-size: 16px;
  color: #555;
  color: #e7eef2;
  width: 400px;
  padding: 0 5px;
  margin: 10px 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.document-menu-content .filename .state {
  position: absolute;
  left: 420px;
  top: 15px;
  width: 50px;
  height: 30px;
}

.document-menu-content .filename .state.loading {
  background: url('images/ajax-loader.gif') center center no-repeat;
}

.document-menu-content .filename .state.error {
  background-image:url('images/sprite.png');
  background-position: -300px -200px;
}

.document-menu-content .filename .state.success {
  background-image:url('images/sprite.png');
  background-position: -300px -300px;
}

.document-menu-content .filename input:hover, .document-menu-content .filename input:focus {
  background-color: rgba(0,0,0, 0.2);
  color: #e7eef2;
}

.document-menu .options {
  position: absolute;
  top: 60px;
  right: 0px;
  width: 200px;
  z-index: 3000;
  border-radius: 0 0 5px 5px;
}


.document-menu .options .publish-state {
  padding: 0 20px;
}

.document-menu .options .actions {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 0 0 5px 5px;
}

.document-menu .options .actions .button {
  display: block;
  text-align: center;
  background: rgba(0,0,0, 0.2);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.document-menu .options .actions .button:hover {
  background: rgba(0,0,0, 0.4);
}

.document-menu-content .menu-item.save-state {
  background: none;
  }
  .document-menu-content .menu-item.save-state:hover {
  background: none;
  }

.document-menu-content .state .button.save { 
  background: rgba(0,0,0, 0.2); 
  width: 100px; 
  text-align: center;
  line-height: 40px;
  margin-left: 1px;
  margin: 0px;
  height: 40px;
  border-radius: 0px 4px 4px 0px;
  margin-left: 1px;
  }

.document-menu-content .state .button.save:hover { background: rgba(0,0,0, 0.4); }

.document-menu-content .save-state {
  margin-left: 20px;
}

.document-menu-content .save-state:hover {
  background: rgba(0,0,0, 0.2);
}


.document-menu-content .state .button {
  display: block;
  float:left;
  color: #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 5px;
  line-height: 30px;
  height: 30px;
  padding: 0 12px;
}

.document-menu-content .state .button.toggle-options {
  background-image: url('images/sprite.png');
  background-position: -288px -437px;
  width: 50px;
  padding: 0;
  height: 40px;
  margin: 0;
  border-radius: 3px 0 0 3px;
  background-color: rgba(0, 0, 0, .2);
}

.document-menu-content .state .button:hover {
  background-color: rgba(0,0,0, 0.4);
}

.document-menu-content .state .button.inactive, .document-menu-content .state .button.inactive:hover {
  text-shadow: none;
  background:#eee;
  color:#bbb;
  border-color:#dfdfdf;
  box-shadow: none;
}

.document-menu-content .state .button.error, .document-menu-content .state .button.error:hover {
  color: red;
}

.document-menu-content .state .options {
  background: rgba(0,0,0, 0.3);
  color: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-left: 10px;
  padding: 8px;
}

.document .metadata {
  overflow: hidden;
  background: #526066;
  color: #CCC;
  z-index: 1000;
  -moz-transition: background 100ms linear;
  -o-transition: background 100ms linear;
  -webkit-transition: background 100ms linear;
  transition: background 100ms linear;
}

.document .metadata-content .CodeMirror {
  color: #F0F0F0;
}

.document .metadata-content {
  padding: 20px 0px;
  width: 960px;
  margin: 0 auto;
}

.document .metadata #raw_metadata {
  background: #444;
  color: #eee;
}

.state p,
.state .button-padding {
  float: left;
  }
  .state p {
    color: #526066;
    font-weight: normal;
    font-size: 11px;
    line-height: 35px;
    margin: 0;
    }

.document {
  min-height: 400px;
  position: relative;
  overflow:hidden;
}

.document .surface {
  width: 200%;
  -moz-transition: margin-left 300ms linear;
  -o-transition: margin-left 300ms linear;
  -webkit-transition: margin-left 300ms linear;
  transition: margin-left 300ms linear;
  margin-left: 0%;
  overflow: hidden;
}

.document .surface.preview {
  margin-left: -100%;
  overflow:hidden;
}


.document .content-wrapper {
  padding-top: 20px;
  width: 50%;
  float: left;
  position: relative;
}

.document .content-preview-wrapper {
  position: relative;
  padding-top: 20px;
  width: 50%;
  float: left;
}

.document .content-preview, .document .content {
  padding: 20px 0px;
  width: 960px;
  margin: 0 auto;
}

.document .document-preview {

}


/* ------------------------------------------
  Rendered Markdown
---------------------------------------------*/

.post-content {
  background: #fff;
  padding: 100px;
  font-family: 'OpenSans', sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.5em;
  border: 1px solid #C3CCD0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0),0 0 10px rgba(0, 0, 0, 0.1);
  }

.post-content .title { 
  font-size: 36px; 
  line-height: 1.5em;
  margin-bottom: 20px; 
  font-weight: bold;
  border-bottom: 1px solid #C3CCD0;
  padding-bottom: 20px;
  }

.post-content h1 { font-size: 36px; margin-bottom: 20px;}
.post-content h2 { font-size: 24px; margin-bottom: 20px;}
.post-content h3, .post-content h4, .post-content h5, .post-content h6 { 
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  }

.post-content blockquote {
  padding-left: 19px;
  border-left: 1px solid #C3CCD0;
  font-style: italic;
}

.post-content ul {
  margin-left: 0px;
  padding-left: 20px;
  list-style: disc;
}

.post-content ol {
  margin-left: 0px;
  padding-left: 20px;
  list-style: decimal;
}

.post-content img {
  max-width: 100%;
}

.post-content .meta {
  margin-top: 30px;
  font-size: 12px;
  text-transform: uppercase;
  border-top: 1px solid #C3CCD0;
}

.post-content a {
  border-bottom: 1px dashed #C3CCD0;}

.post-content p {
  margin-bottom: 20px;
  }

.post-content p:last-child {
  margin-bottom: 20px;
  }
  
.post-content code {
  font-family: Menlo, monospace;
  font-size: 12px;
  zoom: 1;
  color: #E7EEF2;
}

.post-content pre {
  background: #526066;
  padding: 10px;
}

.post-content pre code {
  border: none;
}

.post-content hr {
  margin: 5px 0 4px 0;
  border-top: 1px solid #C3CCD0;
  border-bottom: 0;
  border-radius: 5px;
}

/* ------------------------------------------
  About
---------------------------------------------*/

#container .about {
  width: 960px;
  margin: 30px auto;
  background: white;
}

/* ------------------------------------------
  Logbook
---------------------------------------------*/

.help {
  width: 960px;
  margin: 30px auto;
}

.help .articles {
  overflow: auto;

}

.help .articles .article {
  
  overflow: hidden;

  /*background: rgba(255,255,255, 0.6);*/
  /*background: #E0E7EB;*/


  -moz-transition: opacity 200ms linear;
  -o-transition: opacity 200ms linear;
  -webkit-transition: opacity 200ms linear;
  transition: opacity 200ms linear;

  font-size: 16px;
  position: relative;
  margin-right: 40px;
  margin-top: 20px;
  width: 200px;
  height: 200px;
  color: #444;
  display: block;
  float: left;
  opacity: 0.8;

}

.help .articles .article .title {
  padding: 5px 0;
}

.help .articles .article .descr {
  color: #7A8387;
  font-size: 12px;
}

.help .articles .article:hover {
  opacity: 1.0;
}


.help-article {
  width: 960px;
  margin: 30px auto;
}

/* ------------------------------------------
  Notifications
---------------------------------------------*/

#notification .notification{
  text-align: center;
  width: 600px;
  margin: 60px auto;
  padding: 20px;
  font-size: 30px;
  line-height: 34px;
  font-weight: bold;
}

ul.form li {
  position: relative;
}

label.error {
  color: #E73C58;
  position: absolute;
  right: 5px;
  top: 23px;
  font-size: 12px;
}

/* ------------------------------------------
  Class Helpers
---------------------------------------------*/
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

* html .clearfix { height: 1%; } /* IE6 */
*:first-child + html .clearfix { min-height: 1%; } /* IE7 */

.icon {
  background: transparent url(images/icons.png) no-repeat 0 0;
  width: 20px;
  height: 20px;
  display: block;
  text-indent: -999em;
}
.fl { float: left; }
.fr { float: right; }
.clear { clear: both; }

.inner      { padding: 0px 0px 40px; }
.hidden     { display: none; }
.centered   { text-align: center; }
.scrolling  { overflow: auto; }
.clipping   { overflow: hidden; }


/* ------------------------------------------
  ios and small screen alterations
---------------------------------------------*/
 @media all and (max-width: 480px) {
  #post .inner {
    width: 100%;
    margin: 0;
    padding: 20px 0 40px;
    }
  .toggle-mode {
    right: 0;
    }
  }