.news {
  margin-left: 3em;
  margin-bottom: 3em;
  max-width: 450px;
}

.news h1 {
   font-weight: bold;
   font-size: 17px;
   text-align: left;
}

.aside {
  background-color: #AAB7FF; /*#0094FF;*/
  padding: 15px;
  color: #000;
  /*text-align: center;*/
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-top-left-radius:1.2em; border-bottom-right-radius:1.2em;
}

.bside {
  background-color: #D8FF2B; /*#267F00;*/
  padding: 15px;
  color: #000;
  /*text-align: center;*/
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-top-left-radius:1.2em; border-bottom-right-radius:1.2em;
}

/* unvisited link */
.news a:link {
  color: black;
  /*  background-color: #C0C0C0;*/
  font: 1.2em DejaVu Sans, calibri, georgia, arial;
  /*text-decoration: none;*/
}

/*
.news > p:active > a,
.news > p:hover > a {
  */
/* selected link */
.news a:active {
  color: black; 
  background-color: yellow;
  font: 1.2em DejaVu Sans, calibri, georgia, arial;
  text-decoration: underline;
}

/* mouse over link */
.news a:hover {
  color: black;
  background-color: blue;
}

/* visited link */
.news a:visited
{
  color: #808080; 
}

@media only screen and (max-width: 480px) {

  .news {
    margin-left: 0;
    margin-bottom: 5px;
  }

  .news h1 {
     font-weight: 200;
     font-size: 14px;
     text-align: left;
  }

  .aside {
    background-color: #33B5E5;
    padding: 5px;
    color: #ffffff;
    /*text-align: center;*/
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-top-left-radius:1em; border-bottom-right-radius:1em;
  }

  .bside {
    background-color: #567EE2;
    padding: 5px;
    color: #ffffff;
    /*text-align: center;*/
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-top-left-radius:1em; border-bottom-right-radius:1em;
  }

}