@charset "UTF-8";

<style>
* {
    box-sizing: border-box;
}

/* Center website */
.main {
    max-width: 1100px;
    margin: auto;
}

body {
    float: none;
    margin: auto:
    background-color: #f1f1f1;
    padding: 20px;
    font-family: Avenir, Arial;
    font-size: 16px;
}


h1 {
    color: #f00;
    font-size: 4.5vw;
    line-height: 10%;
    text-shadow: -1px 1px 2px #ffffff,
				  1px 1px 2px #ffffff,
				  1px -1px 0 #ffffff,
				  -1px -1px 0 #ffffff;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
    color: #f00;
}

p {
	font-size: 16px;
	}
p2 {
	font-size: 16px;
	}
	
p3 {
    text-align: center;
    font-size: 16px;
    color: #f00;
}


li a {text-decoration: none; color: #000080}
li a:hover {text-decoration: underline; color: #000080}

a {text-decoration: none; color: #0000a0}
a:hover {text-decoration: underline; color: #0000a0}

table, th, td {
  border: 2px solid white;
  background-color: #cccccc;
  border-collapse: collapse;
  padding: 5px;
  text-align: center;
}

.row {
    margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
    padding: 8px;
}

/* format container for email form */
.emailform {
    background-color: #e1f4fd;
    padding: 10px;
}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 47%;
    text-align: center;
    display: none; /* Hide all elements by default */
}
/* Create three equal columns that floats next to each other */
.column33 {
    float: left;
    width: 33%;
    text-align: center;
    display: none; /* Hide all elements by default */
}
/* Create one column */
.column100 {
    float: left;
    width: 100%;
    display: none; /* Hide all elements by default */
}
/* Create two column */
.column-guide {
    float: left;
    width: 47%;
    text-align: left;
    display: none; /* Hide all elements by default */
}
.column-sponsors {
    float: left;
    width: 47%;
    text-align: left;
    display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

.content0 {
    padding: 10px;
}

.contentBD {
    background-color: white;
    padding: 3px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 6px 8px;
  background-color: white;
  cursor: pointer;
}
.btn {
  border: 1px;
  outline: none;
  padding: 6px 8px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

/* Style the holiday guide buttons */
.btn-HG {
  border: none;
  outline: none;
  margin: 8px 0px 0px 0px;
  padding: 8px;
  cursor: pointer;
}

.btn-HG:hover {
  background-color: #c0e2ca;
}

.btn-HG.active {
  background-color: #00a651;
  color: white;
}

.TopStatic {
	position: relative;
	width: 100%;
	margin: 0 auto;
	vertical-align: top;
	border-bottom-color: #999;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.TopStatic img {
	vertical-align: middle;
} 

.TopStatic .TopStaticContent {
	position: absolute;
    bottom: 0;
    /* background: rgba(255, 255, 255, 0.65); white background with transparency */
    width: 100%;
    padding-left: 20px;
}


img {
    max-width: 100%;
    height: auto;
}

.mainText1 {
	width: 70%;
	display: inline-block;
	float: left;
	padding-right: 20px;
	}
	
aside.sidebarNav {
	width: 20%;	
	display: inline-block;
	float: left;
	padding: 20px;
	border-left: double #f1f1f1;
	/* background-color: #f1f1f1; */
	}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
    .column {
        width: 40%;
    }
}

.footer {
    max-width: 1100px;
    color: #999;
    clear: both;
    margin: auto;
	border-top-color: #999;
	border-top-style: solid;
	border-top-width: 1px;
}
.slcr a {
text-decoration:none;
color:#999;
}
.slcr a:hover {
text-decoration: underline;
color:#0000a0;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
    .column-guide {
        width: 100%;
    }
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .mainText1 {
        width: 98%;
    }

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    aside.sidebarNav {
        width: 85%;
    }

#HiddenINFO {
  width: 100%;
  text-align: left;
  background-color: #c0e2ca;
}
.button {
  background-color: #c0e2ca;
  color: white;
  border: 0;
}


</style>