@charset "utf-8";
/* CSS Document */

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 40px;
  font-family: 'Lato', helvetica, arial, sans-serif; font-size: 16px; color: #222;
  background-color: #1B3A00;
  color: #444;
}

a {
     text-decoration: none ;
  }
a:hover
  {
    text-decoration:underline;
    cursor:pointer;
   }

h1, p {
  margin: 0 0 .2em 0;
}

.wrapper {
  max-width: 940px;
  margin: 0 20px;
  display: grid;
  grid-gap: 0px;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
}



@media screen and (min-width: 500px) {

  /* no grid support? */
  .sidebar {
    float: left;
    width: 19.1489%;
	border-right: 1px solid #1B3A00; height:100%;

  }

  .content {
    float: right;
    width: 79.7872%;
	text-align:center;
  }

  .wrapper {
    margin: 0 auto;
    grid-template-columns: 1fr 3fr;
  }
  
  li
{    
    height : 25px;
    margin-bottom : 25px;
	list-style:none;
}
  
  .header, .footer {
    grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
  }

}

.wrapper > * {
  background-color: #ffffcc;
  color: #000000;
  border-radius: 1px;
  padding: 20px;
  /*font-size: 150%;*/
  /* needed for the floated layout*/
  margin-bottom: 10px;
}

/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}