/* Stack the two content containers */
.quickmenu { visible:false; display: block; width: 20%; }
.content { display:block;
           width:100%;
           margin:5px; }
.dropmenu {visible:true; display: block; width: 100%; }
.main,
.sidebar { display:block;
           width:100%;
           padding: 5px 5px 5px 5px;
           margin: 5px 5px 5px 5px; }
.loginbar { margin: 5px 5px 5px 5px;
            padding: 5px 5px 5px 5px;
            border: 1px black solid;
            border-radius: 5px; }

/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
	.main { float: left; width:68%; }
	.sidebar { float: left; width:30%; }
  .quickmenu { float: left;
               visible:true; }
  .dropmenu { float: left;
              display:none; }
	.content { float: left; width:80%; }
}

/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media all and (min-width: 50em){
	.main { width:74%; }
	.sidebar { width:25%; }
  .quickmenu { visible:true;  width: 15%; }
  .dropmenu { display:none; width: 100%; }
	.content { float: left; width:80%; }

	/* You can also tweak any other styles in a breakpoint */
	/* H1 { color: blue; font-size:1.2em } */
}