body { height: 100%; margin: 0; }
#content { padding-top: 100px; padding-bottom: 20px; }
#landing { background-color: #eee; }
.navbar ul.pagination { margin: 11px 0 0 0; font-size: 11px; }
.navbar li.text {
    color: @navbar-inverse-link-color;
    margin-top: 22px;
    font-size: 12px;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.previous a, .next a { cursor: pointer; }
.center { text-align: center; }
.jepso { color: #bf0080; }

.navbar img.logo { width: 48px; margin-top: 11px; margin-bottom: -5px; }

/* Landing page */
.jumbotron { position: relative; text-align: center; background: none}
.jumbotron h1 { font-size: 80px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); }
.jumbotron p { font-size: 24px; font-weight: 300; line-height: 1.25; margin-bottom: 30px; }
.masthead h1 { font-size: 120px; line-height: 1; letter-spacing: -2px; }

.ribbon { position: absolute; top: 0; right: 0; border: 0; z-index: 2000; }

/* About */
.svg > svg { width: 100%; }

/* Responsive */

// Code tags should break to not create overhanging artifacts
code { white-space: normal; }

// Long links have the same artifacts problem, so let's break them
a {word-wrap: break-word; }

@media (min-width: 768px) {
  span.hidden-xs { display: inline !important; }
}
@media (min-width: 979px) {
    .masthead { margin-top: -40px; padding: 0px 0 80px; margin-bottom: 0; }
}

@media (max-width: 979px) {
  .ribbon { display: none; }
  .masthead h1 { font-size: 70px; }
  .masthead { margin-top: -80px; }
  .jumbotron p { font-size: 18px; }
  .masthead .btn { margin-top: 20px; }
}

@media (max-width: 700px) {
  .jumbotron h1 { font-size: 60px; }
}
@media (max-width: 400px) {
  .jumbotron h1 { font-size: 40px; }
}


/* Sticky footer styles */
html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%; height: auto !important; height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -130px;
}

/* Set the fixed height of the footer here */
#push, #footer-wrapper { height: 130px; }
#footer-wrapper { background-color: #f5f5f5; }

footer { padding: 30px 0; border-top: 1px solid #e5e5e5; background-color: #f5f5f5; }

footer .right { float: right; margin-right: 20px; }

footer p { padding-left: 20px; margin-bottom: 0; color: #777; }

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #push, #footer-wrapper { height: 240px; }
  footer .right { float: inherit; text-align: center; margin-bottom: 20px; }
  h1.topic-title { font-size: 30px; word-wrap: break-word; }
  .comment-body {
      font-size: 14px;
      margin-bottom: 13px;
      word-wrap: break-word;

      li blockquote { padding-left: 0px; padding-right: 0px; }
  }

}

// Navbar styles
@media (max-width: 767px) {
  .navbar img.logo { margin-left: 10px; margin-right: -12px; }
}


/* Listing specific styles */
ul.topics { list-style: none; padding-bottom: 40px; margin: 0px; padding-left: 0px; }
.topic-title:first-child, .topic-title:last-child{ border-top-left-radius: 3px; border-top-right-radius: 3px; }
li.topic-title { padding: 5px; background-color: #fff; border: 1px solid #e5e5e5; margin-bottom: -1px; }

.topic-title a { color: #444; text-decoration: none; }
.topic-title h4 {
  margin-top: 5px; margin-bottom: 0px;
  /*4 properties below are imp for trailing ellipsis*/
  max-width: 800px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.topic-title p { font-size: 14px; color: #777; margin-bottom: 0px; margin-left: 37px; max-width: 800px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
span.message-count { padding-left: 15px; }
@media (max-width: 767px) {
  .topic-title h4 { font-size: 16px; }
  .topic-title p { margin-left: 0px; }
  li.topic-title { padding: 10px; }
}

/* Topic specific styles */

@media (min-width: 1200px) {
  .row.fragment-highlight { border-left: solid 2px #E78B24; margin-left: -32px; }
}
@media (max-width: 1199px) {
  .fragment-highlight .comment-wrapper { border: solid 1px #E78B24; }
}

.profile-image img { border-radius: 4px; width: 100%; }

.comment-wrapper { border: 1px solid #CACACA; margin-bottom: 20px; }
.comment-header {
  height: 33px; padding: 0 10px 0 6px; border-bottom: 1px solid #ccc; background-color: #e1e1e1;
  background-image: -moz-linear-gradient(#f8f8f8, #e1e1e1);
  background-image: -webkit-linear-gradient(#f8f8f8, #e1e1e1);
  background-image: linear-gradient(#f8f8f8, #e1e1e1);
  background-repeat: repeat-x; font-size: 12px; line-height: 33px; vertical-align: middle;
}

.comment-header ul.buttons { float: right; display: inline-block; vertical-align: middle; font-size: 13px; list-style: none; line-height: 31px; }
.comment-header ul.buttons li { list-style-type: none; float: left; margin: 0 0 0 8px; line-height: 31px; }
.comment-header ul.buttons .link {
  color: #939AA0;
  margin: 0 2px 0 1px;
  position: relative;
  top: 2px;
  outline: none;
  transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in 0;
}
.comment-header ul.buttons .link:hover, .comment-header ul.buttons .link:focus { color: #333; text-decoration: none; }
.comment-body {
    padding: 10px;
    font-size: 16px;
    background: white;
    blockquote { border-left: 2px solid #B4B4B4; background: #E9E9E9; }
    blockquote, blockquote p { font-size: 14px; }
    blockquote code { font-size: 12px; border: none; background: none; }
    textarea {
        font-family: @font-family-monospace;
        font-size: 13px;
    }
}

.comment-body pre { font-size: 14px; line-height: 20px; }
.comment-body code { font-size: 14px; line-height: 18px; }

.comment-body pre { padding: 6.5px; }

.comment-body h1 {
  font-size: 1.5em;
}
.comment-body h2 {
  font-size: 1.3em;
}
.comment-body h3 {
  font-size: 1.1em;
}
.comment-body h4 {
  font-size: 1em;
}
.comment-body h1 code, .comment-body h2 code, .comment-body h3 code, .comment-body h4 code {
  font-size: 1em;
  color: black;
}

/* Notes styles */
@media (max-width: 767px) {
  h2, h3 { padding-left: 10px; }
}
.notes { background: white; border: 1px solid #CACACA; border-radius: 4px; font-size: 16px; padding: 15px; }

.notes p { padding: 0px; }

.notes code { font-size: 14px; line-height: 20px; }
.notes pre { font-size: 12px; line-height: 18px; }

/* Make some buttons look like links */

button.link
{ font-size: 13px; line-height: 31px; border: 0; -webkit-appearance: none; vertical-align: baseline; background-color: transparent; padding: 0; display: inline; text-align: left; }

textarea {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 100%;
    resize: vertical;
    min-height: 300px;
    margin-bottom: 1em;
    font-family: @font-family-monospace;
    font-size: 13px;
}

.topic-title {
  margin-bottom: 1em;
}


/* Algolia Search Autocomplete */
.aa-input-container {
  display: inline-block;
  position: relative; }
.aa-input-search {
  width: 300px;
  border: 1px solid rgba(228, 228, 228, 0.6);
  padding: 6px 28px 6px 12px;
  margin: 10px 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  .aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
    display: none; }
.aa-input-icon {
  height: 16px;
  width: 16px;
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  fill: #e4e4e4; }
.aa-dropdown-menu {
  background-color: #fff;
  border: 1px solid rgba(228, 228, 228, 0.6);
  min-width: 300px;
  margin-top: 10px;
  box-sizing: border-box; }
.aa-suggestion {
  padding: 12px;
  cursor: pointer;
}
.aa-suggestion + .aa-suggestion {
    border-top: 1px solid rgba(228, 228, 228, 0.6);
}
  .aa-suggestion:hover, .aa-suggestion.aa-cursor {
    background-color: rgba(241, 241, 241, 0.35); }
