/*
 Author : Nick Rance

 - Credits
 - 	Main CSS from Gumby framework
 - 	Some CSS from Twitter Bootstrap - http://twitter.github.io/bootstrap/

*/

/* clexp added this to stop the page from popping all over the place */
html {
  overflow-y: scroll !important;
}

/* Ensure footer stays at bottom */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  flex: 1;
}

/* Footer positioning */
.container.nopad.bg {
  margin-top: auto;
  flex-shrink: 0;
}

/* Search Bar Styles */
.search-container {
  margin-left: auto;
}

.search-box {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 8px 0;
}

.search-box input[type="text"] {
  border: none;
  background: transparent;
  outline: none;
  padding: 4px 8px;
  font-size: 14px;
  width: 150px;
  color: #333;
}

.search-box input[type="text"]::placeholder {
  color: #999;
}

.search-box button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: #666;
  transition: color 0.2s ease;
}

.search-box button:hover {
  color: #3498db;
}

.search-box button i {
  font-size: 16px;
}

/* Mobile responsive search */
@media only screen and (max-width: 600px) {
  .search-box {
    margin: 4px 0;
  }

  .search-box input[type="text"] {
    width: 120px;
    font-size: 13px;
  }
}

/* Code Highlighting */
code,
pre {
  padding: 0 3px 2px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #333333;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

code {
  padding: 2px 4px;
  color: #d14;
  white-space: nowrap;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

pre.prettyprint {
  margin-bottom: 20px;
}

pre code {
  padding: 0;
  color: inherit;
  white-space: pre;
  white-space: pre-wrap;
  background-color: transparent;
  border: 0;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

/* Table
--------------------------------------------------------- */

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.table th {
  font-weight: bold;
}

.table thead th {
  vertical-align: bottom;
}

.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}

.table tbody + tbody {
  border-top: 2px solid #dddddd;
}

.table .table {
  background-color: #ffffff;
}

.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}

.table-bordered {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: #f5f5f5;
}

table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
  display: table-cell;
  float: none;
  margin-left: 0;
}

/* Navigation
--------------------------------------------------------- */
#banner strong {
  display: block;
}
#banner h1 {
  font-size: 3.25rem;
}

.no-touch .navbar ul li.active > a {
  background: #868d92;
}
/* Posts
--------------------------------------------------------- */

#post-list {
  margin-left: 0;
}
#post-list > li {
  list-style: none;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.tag-row {
  margin-top: 20px;
}

address {
  font-size: 14px;
  margin-bottom: 10px;
}

/* Typography
--------------------------------------------------------- */

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: #3498db;
}

a,
a:hover {
  color: #3498db;
}
a:focus {
  color: #34495e;
}

.btn a:hover,
.btn a:focus {
  color: #eee;
}

.label:hover,
.label:focus {
  color: #eee;
}

ul,
ol {
  margin-bottom: 0.273em;
  margin-left: 1.5em;
}

ul {
  list-style: disc outside;
}

ul.blank {
  list-style: none outside;
  margin-left: 0;
}

/* Footer
--------------------------------------------------------- */
.bg {
  background: #eee;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 5px solid #3498db;
}

/* Responsive fixes
--------------------------------------------------------- */
@media only screen and (max-width: 600px) {
  #banner h1 a {
    font-size: 22px !important;
    line-height: 24px;
  }
}

/* The class 'hentry' appears in the html, but not in the css
It also is not defined looking with chrome inspecting the
element.  The item <li> is the one I want to change. The 
following is clexp with flexbox and grid*/

.c_art_hdr {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 4fr 1fr;

  column-gap: 10px;
  row-gap: 5px;
}

.last_box {
  display: flex;
  flex-direction: column;
}

/* Navigation layout */
.navbar ul.columns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.navbar ul.columns li:not(.search-container) {
  margin-right: 20px;
}