/* CSS Document */

/* general styling */



img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ text-align:center; display:block; margin:0 auto; }

.content { min-width:420px; max-width: 1100px; margin: auto; padding: 3em; }

body {
  font-family: Calibri, "Open Sans", sans-serif;
  font-size: 1.1em;
  line-height: 1.3em;
  color:#666;
  background: #ccebff;
}



h3, strong {font-size: 1.3em; font-weight:700; padding-bottom: 1em; }

a:link, a:visited, a:hover, a:active { font-weight:500; text-decoration:none; color:#666; }

p { padding-bottom: .8em; }


table {
  border: 1px solid #FFF;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption { font-size: 1.5em; margin: .5em 0 .75em; }

table tr { padding: .35em; }

table th,
table td {
  padding: .625em;
  text-align: center;
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table { border: 0; }

  table caption { font-size: 1.3em; }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 0px;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 0px;
    display: block;
    font-size: .8em;
    text-align: left;
	margin: 0 15%;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);

  }
  
  table td:last-child { border-bottom: 0; }
}

/* TEXT & IMAGE STYLING */