#pie 
   {
      font-size: 80%;
      color: #222;
      background: #fff;
      margin: 1em 1.5em;
      font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
   }

   body 
   {
      font-size: 80%;
      color: #222;
      background: #fff;
      padding: 0.25em;
      font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
      box-sizing: border-box;
   }
 
   a[href] 
   {
      color: #436976;
      background-color: transparent;
   }

   h1, h2, h3, h4, h5, h6 
   {
      background-color: transparent;
      margin: 0;
      padding-top: 0.6em;
      font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
   }

   h1 
   {
      margin-bottom: 0.5em;
      border-bottom: 1px solid #fcb101;
      font-size: 130%;
   }

   h2 
   {
      margin-bottom: 0.5em;
      border-bottom: 1px solid #baa;
      font-size: 120%;
   }

   h3 
   {
      margin-bottom: 0.5em;
      text-decoration: underline;
      font-size: 110%;
   }

   h4 
   {
      font-size: 110%;
   }

   h5 
   {
      font-size: 100%;
      font-weight: bold;
   }

   h6 
   {
      font-size: 80%;
      font-weight: bold;
   }
   
   li
   {
      margin-bottom: 5px;
   }
   
   li a
   {
   	  font-weight: bold;
   	  text-decoration: none;
   } 
   
   /* styling for divs with dynamic size but given aspect ratio */ 

   .ratio_box {
      position: relative;
      width: 100%;
   }
   
   .content {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
   }
   
	.chart-bg {
		background-color: rgba(255,255,255,0.5);
		border: 3px solid transparent;
	}
   
@media screen and (max-aspect-ratio: 4/3) {
   .ratio_box:before {
      content: "";
      display: block;
      padding-top: 75%;  /* ratio 4:3 */
   }
}

@media screen and (min-aspect-ratio: 4/3) {
   .ratio_box:before {
      content: "";
      display: block;
      padding-top: 60%; /* ratio 5:3 */
   }
}