.wrapper {
  display: flex;  
  flex-flow: row wrap;
  /*font-weight: bold;*/
  
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}


.wrapper2 {
  display: flex;  
  flex-flow: row wrap;
  justify-content: flex-start;
}

.box-left {
    float: left;
    padding-right: 20px;
}


.header {
   height: 80px;
   font-family: Georgia, Helvetica;
   font-size: 25px;
}

.footer {
	padding-left: 5px;
	padding-top: 5px;
	height: 30px;
	font-family: Verdana, Helvetica;
	font-size: 10px;
        text-align: center; 
	background-color: #709f30;
}

.main {
  text-align: left;
  background-color: white;
  margin-top: 0;
  padding: 5px;
  border-left: dashed 1px gray;
}  

.aside-1 {
  padding: 5px;
  background-color: #709f30;
  /*float: left;*/
  text-align: left; 
}

.aside-1 .linkbox 
{
	margin-bottom: 15px;
}

.aside-1 .linkbox h2 
{
	margin-bottom: 5px;
	margin-top: 5px;
	margin-left: -5px;
	margin-right: -5px;
	padding-left: 5px;
	text-transform: uppercase;
	background-color: #f4e295;
	font-size: 12px;
	border-top: dashed 1px gray;
	border-bottom: dashed 1px gray;
}

.aside-1 .linkbox a 
{
	color: black;
}

.aside-1 .linkbox a:hover 
{
	color: red;
}


.aside-2 {
  background: hotpink;
}


.ruler2 
{
	/*margin-left: 26%;*/
	color: black;
	background-color: #f4e295;
	border-bottom: dashed 1px gray;
	border-top: dashed 1px gray;
	padding-top: 10px;
	padding-bottom: 10px;
}

.ruler2 a 
{
	text-decoration: none;
	/*font-size: 16px;*/
	font-weight: bold;
	line-height: 40px;
	color: black;
	padding-left: 10px;
	padding-right: 10px;
}

.ruler2 a:hover 
{
	background-color: #709f30;
}



@media all and (min-width: 600px) {
 .aside { flex: 1 0 0; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .footer  { order: 3; }
}

body {
  /* padding: 2em;*/
  margin: 0; 
  font-family: Georgia;
  background-color: #709f30;
}