/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */

.outer
{
  margin-left: 5px;
}

/* Stack the content containers, show or hide banner */
.single { display: block; width: 96%; margin-bottom: 5px; }
.double { display: block; width: 100%;  margin-bottom: 5px; }
.fullwidth { display: block; width:100 %; }
.narrow_banner { display: block; } 
.medium_banner { display: none; } 
.wide_banner { display: none; } 

/* First breakpoint at 800px */
/* Inherits mobile styles, but floats containers to make two columns */

@media all and (min-width: 800px){
.single { float: left; width: 48%; margin-right: 1%;  margin-top: 5px; }
.double { float: left; width: 96%;  margin-bottom: 5px; }
.wide_banner { display: none; } 
}

/* Banner breakpoint at 800px */
@media all and (min-width: 700px){
  .narrow_banner: { display: none; }
  .medium_banner: { display: block; } 
}

/* Second breakpoint at 1200px */
/* Adjusts column proportions, to make three columns*/
@media all and (min-width: 1200px){
.single { float: left; width: 32%; margin-right: 1%;  margin-top: 5px; }
.double { float: left; width: 65%; margin-right: 1%;  margin-bottom: 5px; }
.narrow_banner { display: none; } 
.medium_banner { display: none; } 
.wide_banner { display: block; } 
}