/* Space out content a bit */
body {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-family: "Ubuntu", sans-serif;
  color: #000;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* Custom page header */
.header {
  padding-bottom: 1rem;
  /* border-bottom: .05rem solid #e5e5e5; */
}

.nav {
	font-size: 18px;
	font-weight: 100;
}

.thin-font {
	font-weight: 100;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 3rem;
}

/* Custom page footer */
.footer {
  padding-top: 1.5rem;
  color: #DDD;
  text-align: center;	
}

/* Customize container */
@media (min-width: 48em) {
  .container {
    max-width: 90rem; /* width of content */
  }
}
.container-narrow > hr {
  margin: 2rem 0;
}

.grumpypost .date {
  color: #AAA;
  font-size: 13px;
}
.media-body .date {
  color: #AAA;
  font-size: 13px;
}
.xxgrumpypost .xbtn {
  padding: .75rem 1.5rem;
  font-size: 1.5rem;
}

.indent {
	padding-left: 3px;
	margin-left: 15px;
	border-left: 2px solid #888;
	color: #888;
}

/* Supporting marketing content */
.marketing {
  margin: 3rem 0;
}
.marketing p + h4 {
  margin-top: 1.5rem;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 48em) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }

  /* Space out the masthead */
  .header {
    margin-bottom: 2rem;
  }

  /* Remove the bottom border on the jumbotron for visual effect */
  .grumpypost {
    border-bottom: 0;
  }
}

.media {
  margin-top: 0px;
  margin-bottom: 8px;
  margin-left: 12px;
  margin-right: 12px;
  padding: 10px;
  xborder: 1px;
  xborder-color: #aaa;
  xborder-style: solid;
  border-radius: 6px;
}

.grumpypost {
  margin-bottom: 32px;
  color: inherit;
  background-color: #f4f4f4;
  text-align: left;
  border-bottom: .5rem solid #eaeaea;
  padding-top: 15px;
  padding-bottom: 15px;
}
.grumpypost h1, h2, h3
.grumpypost .h1 .h2 .h3 {
  color: inherit;
  font-family: "Roboto", sans-serif;
}
.grumpypost .post-title {
	margin-bottom: 18px;
	font-size: 36px;
 	font-family: "Roboto", sans-serif;
}
.grumpypost p {
  margin-bottom: 20px;
  font-size: 17px;
  font-weight: 100;
}

.grumpypost .inlinecode {
 	font-family: "Courier", monospace;
  font-size: 18px;
  background-color: #DDDDDD;
	padding-left: 4px;
	padding-right: 4px;
  color: #800000;
}

.grumpypost .pre {
 	font-family: "Courier", monospace;
  	font-size: 17px;
	margin-bottom: 20px;
}

.add-comment {
	padding-left: 30px;
	padding-top: 20px;
}

.form-group-tight {
    margin-bottom: 5px;
}

.form-group-narrow-1 {
    width: 80%;
}
.form-group-narrow-2 {
    width: 40%;
}
.form-group-narrow-3 {
    width: 20%;
}

.odd {
	background-color: #f8f8f8;
}

.even {
	background-color: #f0f0f0;
}

.grumpypost img {
	image-orientation: from-image;
}
.grumpypost > hr {
  border-top-color: #aaa;
}
.unpublished {
  background-color: #e0e0ff;
}
.container .grumpypost,
.container-fluid .grumpypost {
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 12px;
}
.grumpypost .container {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .grumpypost {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .container .grumpypost,
  .container-fluid .grumpypost {
    padding-right: 40px;
    padding-left: 40px;
  }
  .grumpypost h1,
  .grumpypost .h1 {
    font-size: 63px;
  }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}