@charset "UTF-8";
/* CSS Document */
/*The following allows older renderers to accept these modern standard blocks*/
:root {
  --main-blue-color: rgb(170,235,255);
	--main-yellow-color: rgb(255,235,170);
}
header, footer, section, article, nav, aside {
   display: block;
}
aside {
	float:right;
	padding:5px;
	border-style: solid;
	border-width:5px;
	border-color:var(--main-blue-color);
	background-color:var(--main-yellow-color);
}
aside *{
	margin-block-start:3px;
	margin-block-end:3px;
}
form {
  /*width: 400px;*/
  border: 1px solid black;
}
fieldset {
	max-width:40em;
}

figure {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

figure:hover {
  border: 1px solid #777;
}

figure img {
  width: 100%;
  height: auto;
}

figcaption {
  padding: 5px;
  text-align: center;
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 0 6px;
  float: left;
  width: 32%;
}
@media only screen and (max-width: 1400px) {
  .responsive {
    width: 49%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 600px) {
  .responsive {
    width: 100%;
  }
}
.gallery:after {
	  content: "";
  display: table;
  clear: both;
}
input, textarea {
	width:90%;
}
input[type="radio"]{
	width:2em;
}
input, textarea, label {
  margin: 5px;
	padding:5px;
}
label {
	padding-top:10px;
	padding-bottom:0px;
}
legend {
	font-size:150%;
}
p,li,h4,h5,dd,dt {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
dt{
	margin-top:5px;
	padding-left:1em;
	padding-top:2px;
	border-top:1px solid rgba(250,220,120,0.8);
}
dd{
	padding-left:2em;
	padding-bottom:5px;
	margin-bottom:5px;
	border-bottom:4px solid rgba(230,240,255,0.8);	
	border-right:2px solid rgba(230,240,255,0.8);
}
dd,dt{
	border-radius:10px;
	max-width:50em;
	margin-left:0px;
	padding-right:5px;
}
nav{
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:var(--main-blue-color);
}
nav li {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a {
}

/* Change the link color to #111 (black) on hover */
nav li a:hover {
  background-color:var(--main-yellow-color);
}
.banner {
	background-color:var(--main-yellow-color);
}
.banner * {
	margin:0px;
	padding-top:5px;
}

.dont-break-out {/*from https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/*/
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
	
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}
.overflow-ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.overflow-ellipses:hover {
  overflow: visible;
}
.twoCol {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-width: 400px;
	-moz-column-width: 400px;
	column-width: 400px;
  border-radius: 15px;
	padding:5px;
	border-bottom:4px solid var(--main-blue-color);
	border-right:2px solid var(--main-blue-color);
	clear:both;
  background-image: linear-gradient(rgba(250,250,250,0.2),rgba(230,230,230,0.2));
}
.twoCol * {
	margin-block-start:0em;
	margin-top:0em;
}