body {background-color: #999999}

#before-header  {
    display: flex;
    width: 100%;
    height: 300px;
    padding: 0.5%;
    overflow: hidden;
/*    border: 1px solid black; */
}

.half {
    width: 50%;
    height:50%;
}

.findmeaplace {
    width: 50%;
    height: 100%;
}

.threequarter {
    width: 75%;
    height: 75%
}

.before-header-left {flex: 1;
/*    width: 625px; */
    width: 32%;
/*    height: 300px;*/
    height: auto;
    float: left;
    border: 2px solid #FEFEFE;
    text-align: center;
    overflow: hidden;
}

#header-left {flex: 1;
    padding: .25%;
    width: 39%;
    height: auto;
    float: left;
/*    border: 2px solid #FEFEFE;*/
}

#header-right {flex: 1;
    padding: .50%;
    width: 59%;
    height: auto;
    float: left;
/*    border: 2px solid #FEFEFE;*/
}

.scrollable {flex: 2;
    height: 100%;
    overflow-y: scroll;
}

.credit {float: right;
    text-align: right;
    font-size: 10px;
    color: white;
}

.before-header-middle {
    flex: 1;
    width: 32%;
    max-width: 100%;
    height: auto;
    float:right;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
/*    background-image: url("../images/image4-a.png");*/
    background-image: url("../images/image3.jpeg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.welcome-text {justify-content: center;
    align-items: center;
    color: white;
    font-size: .8em;
}

.alert {
    background-color: yellow;
    color: red;
}

.alert a:is(:link)
    {background-color: yellow;
    color: red;
}

.alert a:is(:visited, :hover, :active) {
    background-color: yellow;
    color: darkred;
}

.cold {
    background-color: cyan;
    color: darkblue;
}

.ca   {
    background-color:  black;
    color: white;
    padding: 3%;
    border: 1px solid white;
    font-size: 16px;
}

.white-border {
    color: white;
    margin: 1%;
    border: 2px solid white;
}

.yellow_text {
    color: yellow;
}
.before-header-right {flex: 1;
/*    width: 625px; */
    width: 32%;
/*    height: 300px;*/
    height: auto;
    float: right;
    border: 2px solid #FEFEFE;
    overflow: hidden;
}

.header {text-align: center;
	width: 100%;
}

.right {width: 100%;
	float: right;
	height: 100%;
}

.left {width: 23%;
	float: left;
	margin-top: 1.50%;
	padding: 0.5%;
	font-family: Helvetica, sans-serif;
	color: gray;
}

.innerright {width: 49%;
	height: 100%;
	float: right;
}

.innerleft {width: 49%;
	height: 100%;
	float: left;
	position: relative;
	overflow: hidden;
	padding-top: 45%;
}

.calendar {position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 100%;
	height: 100%;
	frameborder: 0;
	scrolling: "no";
}

.video {padding: 10px;
	margin; 5px;
	min-width: 30%;
	min-height: 30%;
	max-width: 60%;
	max-height: 60%;
}

.gsale {border: 1px solid grey;
    font-weight: bold;
    color: white;
    background: linear-gradient(-45deg,blue,#1E90FF,#00BFFF,#B2FFFF,#CCCCFF);
    background-size: 200% 200%;
    font-family: arial, helvetica;
    font-size: 16px;
    width:100%;
    margin: auto;
    text-align: center;
    animation: gsalebgTransition 300s ease infinite;
}

.gsale img {max-height: 50%;
    max-width: 50%;
}

@keyframes gsalebgTransition {
    0% {
        background-position: 10% 0%;
    }
    50% {
        background-position: 91% 100%;
    }
    100% {
        background-position: 10% 0%;
    }
}

.left h3 {text-align: center;
	color: #FFFFFF;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	margin: .5%;
	padding: .5%;
	background: #e2e2e2;
	order: 1;
}

.tabs input[type="radio"] {
	display: none;
}

.tabs label {
	padding: .5%;
	background: #e2e2e2;
	font-weight: bold;
}

.tabs .tab{
	width: 100%;
	height: 100%;
	padding: .5%;
	background: #F0F0F0;
	order: 1;
	display: none;
}

.tabs input[type='radio']:checked + label + .tab {
	display: block;
}

.tabs input[type="radio"]:checked + label {
	background: #F0F0F0;
}

.pdf-container {display: flex;
	flex-wrap: wrap;
	padding: 1%;
}

.pdf-align {flex: 1;
	text-align: center;
	color: #2222FF;
}

.pdf-align img {max-width: 30%;
	max-height: 30%;
}

div iframe  {width: 100%;
    max-height: 100%;
}

.event  {background-color: #CCCCAA;
    margin-left: 20%;
    margin-right: 20%;
    border: dashed 3px blue;
    padding: 1%;
}

.event-right {width: 48%;
    float: right;
    text-align: left;
    font-family: Courier;
}
.event-left {width: 48%;
    text-align: left;
    font-family: Courier;
}

ul  {float: clear;}

.left {
    text-align:left;
}

.event h2,h3 {color: darkred;}

.event li {color: darkgreen;}

.tab5   {margin-left: 3em;
}

.nobullet   {list-style-type: none;
    font-size: 12px;
}

.bold   {font-weight: bold;
}

.center {text-align: center;
}

.white  {color: white;
}

.blue   {color: blue;
}

.red    {color: red;
}

.grey   {color: lightgrey;
}

.darkred {color: darkred;
}

.font12 {font-size: 12px;
}

.font24 {font-size: 24px;
}

.font48 {font-size: 48px;
}

.impinf {
    background-color: #777777;
    padding: none;
}

#Goldfine {
    width: 100%;
    height:100%;
    margin: auto;
    text-align: center;
}

video {max-width: 160;
        max-height: 284px;
        padding: 2%;
        border: 2px solid #aaaaaa;
}

.rr-image {
   display: flex;
   padding: 2%;
   justify-content: center;
   align-items: center;
   text-align: center;
   border: 1px solid lightgrey;
}

.rr-image img {
    width: 50%;
    height: 50%;
}

.round-rock {
    padding: 1%;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid white;
}

.board  {
    background-color: #CCCCCC;
    margin-left: 20%;
    margin-right: 20%;
    border: solid 2px white;
    padding: 1%;
}

#MoonwalkRR {
    max-width: 75%;
    max-height: 75%;
}

#SmokeyMos {
    max-width: 60%;
    max-height: 60%;
}

.strikethrough {
    text-decoration:  line-through;
}

.url-link {
    color: red;
}

.Stalnaker {
    text-align: left;
    max-width: 100%;
    margin: auto;
}
.wilco-image {
   display: flex;
   padding: 2%;
   justify-content: center;
   align-items: center;
   text-align: center;
   border: 1px solid lightgrey;
   color: white;
}

.williamson-county a:not(.exclude){
   color: #444444;
}

.williamson-county a:not(.exclude) a:is(:link){
   color: #444444;
}

.williamson-county a:not(.exclude) a:is(:visited, :hover, :active){
   color: white;
}

/*.williamson-county a:not(.exclude) {
    background-color: yellow;
    color: darkred;
}*/

#Halloween {
    max-width: 100%;
    margin: auto;
    text-align: center;
    background-color: #000000;
    color: #CC5500;
    animation: halloweenbgTransition 5s infinite alternate, halloweencolorTransition 5s infinite alternate;
}

@keyframes halloweenbgTransition {
    0% {
        background-color: #000000;
    }
    100% {
        background-color: #CC5500;
    }
}

@keyframes halloweencolorTransition {
    0% {
        color: #CC5500;
    }
    100% {
        color: #000000;
    }
}

#Christmas {
    max-width: 100%;
    margin: auto;
    text-align: center;
    background-color: green;
    color: red;
    animation: christmasbgTransition 15s infinite alternate, christmascolorTransition 15s infinite alternate;
}

@keyframes christmasbgTransition {
    0% {
        background-color: green;
    }
    100% {
        background-color: red;
    }
}

@keyframes christmascolorTransition {
    0% {
        color: red;
    }
    50% {
        color: gold;
    }
    100% {
        color: green;
    }
}

.veterans_day {
    width: 100%;
    height: 350px;
    background-image: url('./images/happy-veterans-day-background-free-vector.jpg');
    border: 5px solid red;
    animation: VDColorChange 10s infinite alternate;
}

@keyframes VDColorChange {
    0%   { border-color: red; }
    50%  { border-color: white; }
    100% {border-color: blue; }
}


.streets {
    display: flex;
    align-items: stretch;
}

.streets_cell {
    padding:  .5%;
    min-height: 100%;
    border: solid 1px black;
    text-align: center;
    font-size: 80%;
    font-weight: bold;
}