/* This might just break EVERYTHING */
#wrapper { overflow: visible; }

#landing-main { margin: 0 auto;  margin-top:25px; border-top: 1px dotted #fea634; margin-bottom:2em; border-bottom: none; margin-left:1em; margin-right:1em; }

@media screen and (max-width : 768px) {
#landing-main {	margin: 0;}
}

#colophon { margin: 0; }

.cta {
   display: block;
   color: white;
   text-align: center;
   background: #fea634;
   padding: 10px 0;
   font-size: 18px;
   text-transform: uppercase;
}
.cta:hover {
  background: #E8962C;
  color: white;
}

.stretch {
   display: inline-block;
   width: 100%;
}
.banner-posts {
   width: 100%;
   display: table;
   text-align: justify;
   margin-bottom: 10px;
}
.banner-posts .banner-post, .banner-posts .banner-recent {
   position: relative;
   display: table-cell;
   vertical-align: top;
   box-sizing: border-box;
   text-align: left;
   padding-top: 10px;
}
.banner-border {
	border-bottom: 1px dotted #fea634;
	margin-bottom: 1em;
}
@media screen and (max-width : 768px) {
   /* These silly important statements are to overwrite the styles  */
   /* down bellow. I think it's more readable with all the relevant */
   /* styles in one place, instead of all at the bottom */
   .banner-posts .banner-post, .banner-posts .banner-recent {
      width: auto !important;
      display: block;
      padding: 10px;
      border: none !important;
      /* margin-bottom: 20px; */
   }
}
.banner-posts .banner-post h2, .banner-posts .banner-recent h2 {
   text-transform: uppercase;
   font-weight: 500;
}
.banner-posts .banner-post h2 {
   /* margin-bottom:0; */
}
.banner-posts .banner-post a.more, .banner-posts .banner-recent a.more {
   display: block;
   position: absolute;
   bottom: 15px;
   left: 0;
   color: #fea634;
   font-size: 18px;
   font-family:'Courier New', courier;
}
.banner-posts .banner-recent a.more {
   left: 10px;
}
@media screen and (max-width : 768px) {
   .banner-posts .banner-post a.more, .banner-posts .banner-recent a.more {
      position: static;
   }
}
.banner-posts span.date {
   display: block;
   margin-bottom: 15px;
}
.banner-posts .entry-content {
   border-bottom: none;
}
@media screen and (max-width : 768px) {
   .banner-posts .entry-content {
      margin-bottom: 0;
      padding-bottom: 0;
   }
}
.banner-posts .entry-content p {
   font-size: 16px;
}
.banner-posts .entry-header h2.super-title {
   /* margin-bottom: 15px !important; */
   font-size: 36px !important;
}
.banner-posts span.date {
   display: block;
   margin-bottom: 20px;
}
.banner-posts span.pre-title {
   font-size: 18px;
   font-family:'Courier New', courier;
   display: block;
   color: #fea634;
   margin-bottom: 15px;
}
.banner-posts .banner-post {
   width: 66.666667%;
   padding-right: 2%;
   border-right: 10px solid white;
}
.banner-posts .banner-post.login {
   width: 100%;
   padding-right: 2%;
   border-right: 10px solid white;
}
.banner-posts .banner-recent {
   /* background: #fffaf0; */
   background: white;
   width: 33.333333%;
   padding: 10px;
   border-radius: 0px;
   padding-bottom: 50px;
}
.banner-posts .banner-recent.previous-articles {
   /* border-left: 1px dotted #fea634; */
}
@media screen and (max-width : 768px) {
   .banner-posts .banner-recent.previous-articles {
      border-top: 1px dotted #fea634 !important;
   }
   .banner-posts .banner-post.podcast {
      border-top: 1px dotted #fea634 !important;
   }
   .banner-posts .banner-recent {
      padding-bottom: 10px;
   }
   .banner-border {
		display: none;
}
}

.banner-recent h2 {
   margin-bottom: 15px;
   line-height: 1.2;
   text-transform: uppercase;
   font-weight: 500;
   font-size: 18px;
   /* color: #8e8e8e; */
}
.banner-recent.sponsor h2,.banner-recent.membership h2 {
   font-size: 24px;
}


/* Podcast */
.banner-post.podcast {
   background: white;
   overflow: visible;
   position: relative;
}
.podcast .entry-header h2 {
	font-size: 18px;
}

/* Adding the appearance of an extend background */
/* Moved to the linked list section */
.banner-post.podcast:after {
}
@media screen and (max-width : 768px) {
   .banner-post.podcast {
      margin-bottom: 10px;
   }
   .banner-post.podcast:after {
      display: none;
   }
}

.banner-post.podcast h2 {
   padding-bottom: 20px !important;
}
.banner-post.podcast .entry-content {
   margin-bottom: 0;
   padding-bottom:0;
}

.banner-post.login h2 {
   padding-bottom: 20px !important;
}
.banner-post.entry-header h2 {
	font-weight: 500;
}

.banner-post.login .entry-content {
   margin-bottom: 0;
   padding-bottom:0;
}
.banner.post.login {
   background: #fffaf0;

}

/* Sponsor */
.banner-recent.sponsor {
   background: #F1F1F1;
   overflow: visible;
   position: relative;
}
.banner-recent.sponsor p {
   font-style: italic;
}

/* Links */
.banner-post.links {
   padding-bottom: 40px;
   background: #fffaf0;
   border: none;
}
.banner-post.links:after {
   content: '';
   display: block;
   background: #fffaf0;
   width: 10px;
   position: absolute;
   top: 0;
   bottom: 0;
   left: -10px;
}
@media screen and (max-width : 768px) {
   .banner-post.links:after {
      display: none;
   }
}
.banner-post.links .link-title h2 {
}
.banner-post.links .link-title a {
   font-size: 18px;
   text-decoration: none;
   border-bottom: 1px dotted #fea634;
   margin-bottom:0;
}
.banner-post.links .entry-content {
   margin-bottom:0;
}

/* Linked List (members only) */
.banner-post.links .section-title {
   line-height: 1;
   font-size: 24px;
   font-weight: 500;
   margin-bottom: 15px;
}
.banner-recent.membership {
   background: #fffaf0;
   border-left: 1px dotted #fea634;
}
@media screen and (max-width : 900px) {
   .banner-recent.membership {
      padding-bottom: 50px;
      border-left: none;
   }
}
@media screen and (max-width : 768px) {
   .banner-recent.membership {
      border-top: 1px dotted #fea634 !important;
   }
}
@media screen and (max-width : 900px) {
   .banner-recent.membership {
      padding-bottom: 10px;
   }
}
.banner-recent.membership li {
   font-weight: bold;
   list-style: none;
   margin-bottom: 15px;
}
.banner-recent.membership a.cta {
   position: absolute;
   bottom: 10px;
   left: 10px;
   right: 10px;
}
@media screen and (max-width : 900px) {
   .banner-recent.membership a.cta {
      font-size: 14px;
   }
}
@media screen and (max-width : 768px) {
   .banner-recent.membership a.cta {
      position: static;
      margin-top: 10px;
      font-size: 18px;
   }
}

@media screen and (max-width : 800px) {}
@media screen and (max-width : 768px) {}
@media screen and (max-width : 480px) {}


#archives {
   box-sizing: border-box;
   text-align: justify;
}
.col-two {
   vertical-align: top;
   margin: 0;
   box-sizing: border-box;
   display: inline-block;
   width: 48%;
   padding: 0 2%;
   margin-bottom: 10px;
}
@media screen and (max-width : 768px) {
   .col-two {
      width: 100%;
      padding: 0 2%;
      padding-top: 30px;
      margin-bottom: 10px;
   }
   .col-two:first-child {
      border-top: none;
      padding-top: 20px;
   }
}
#archives .archive-post {
   text-align: left;
}
#archives .archive-post h2 {
   line-height: 1.1;
   font-size: 1.5em;
   font-weight: 500;
}
#archives .archive-post p {
   text-align: left;
}
#archives .archive-post a{
	color: #fea634;
}
#archives .archive-border {
	border-bottom: 1px dotted #fea634;
	margin-bottom: 1.5em;
}

/* Archive page. Refactor this later if we go the Sass route */