/* banner and gsh harrier star log fade-in */
.wmass-logo img {
    /* top: 5%; */
    height: 110px;
    width: auto;
    opacity: 60%;
    margin-left: 30px;
    margin-top: 10px;
}

.banner-layout table {
    width: 100%;
}

.banner-layout table td {
     padding: 10px 15px 10px 15px;
}

.banner-layout table td:first-child {
     padding-left: 75px;
}

.banner-title-text {
    /*top: 5%;*/
    font-family: "Berlin Sans FB Demi", "Zen Dots", "Morga" , cursive;
    font-size: 44px;
    font-weight: bold;
    /* text-align: right; */
    color: white;
    text-shadow: 3px 3px 0px #33136c, -3px -3px 0px #33136c, 3px -3px 0px #33136c, -3px 3px 0px #33136c;
}


    @media screen and (min-width: 768px) and (max-width: 1440px) {
        .banner-title-text {
            font-size: 32px;
        }
    }

    @media screen and (min-width: 200px) and (max-width: 768px) {
        .banner-title-text {
            font-size: 24px;
        }
    }

#banner-back {
    width: 100%;
    height: 125px;
    position: relative;
    background: rgb(171,218,225); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(171,218,225,1) 0%, rgba(59,141,229,1) 30%, rgba(244,202,63,1) 63%, rgba(229,121,71,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(171,218,225,1) 0%,rgba(59,141,229,1) 30%,rgba(244,202,63,1) 63%,rgba(229,121,71,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgb(33, 22, 201) 0%, rgb(63, 137, 244) 30%, rgb(59, 141, 229) 63%, rgb(171, 217, 225) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abdae1', endColorstr='#e57947',GradientType=1 ); /* IE6-9 */
    border: 3px black solid;
}

#gsh-banner td {
    padding: 5px 20px 5px 20px; 
}

#banner-backimage, #banner-content  {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

#banner-content
{
    z-index: 10;
}

.gshlogo-parent {
  position: relative;
  top: 10px;
  left: 0;
}
.gshlogo-image1 {
  position: relative;
  top: 0;
  left: 0;
}

.gshlogo-image2 {
  position: absolute;
  top: 0px;
  left: 0px;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in2 {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	animation-duration:3s;
}

.fade-out {
	opacity:1;  /* make things invisible upon start */
	-webkit-animation:fadeOut ease-in 0;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeOut ease-in 0;
	animation:fadeOut ease-in 0;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in2.two {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

/*  -----------------------------------------  gsh harrier star log fade-in */


#results-grid {
	width: 100%;
	/* margin: 10px 10px; */
	height: 50vh;
	border: 2px darkblue solid;
	padding: 10px 10px;
}

#RESULTS-ROW > td:nth-child(2) {
    vertical-align: top;
}

#RESULTS-ROW > td:nth-child(1) {
    border-right: 3px solid #202020;
    vertical-align: top;
    width: 0.1%;
    white-space: nowrap;
background: #abdae1; /* Old browsers */
background: -moz-linear-gradient(top,  #abdae1 0%, #3b8de5 77%, #3b8de5 77%); /* FF3.6-15 */
background: -web-kit--linear-gradient(top,  #abdae1 0%,#3b8de5 77%,#3b8de5 77%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #abdae1 0%,#3b8de5 77%,#3b8de5 77%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abdae1', endColorstr='#3b8de5',GradientType=0 ); /* IE6-9 */
}

.navbar {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

.content {
}

#spacer {
    min-height: 260px;
    max-height: 260px;
}

.banner-left-side {
    position: relative;
}



#year_links {
    font-family: "Montserrat", sans-serif;
     font-weight: bold;
     border-spacing: 10px 10px;
     border-collapse: separate;
     list-style-type: none; 
     width: 100%;
     padding: 5px 5px 5px 10px;
}

.style1 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 14px;
	font-weight: bold;
	font-size: medium;
}
.style2 {
	font-family: "Comic Sans MS";
	font-size: medium;
}
.style6 {
	font-size: x-small;
	color: #6B6B07;
}
.style10 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.style11 {
	color: #800000;
}

    .style12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
}
.style13 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	text-align: right;
}
.style14 {
	text-align: right;
}
.style16 {
	border-width: 0px;
}
		
.style18 {
	border-width: 0;
	color: #800000;
}

    #cr-links-div table {
        width: 100%;
        border-spacing: 20px;
        border-collapse: collapse;
	    font-family: Consolas, monaco, monospace;
	    font-size: medium;
        font-weight: bold;
        color: blue;
}	

    #cr-links-div td {
        padding: 5px 1px 5px 1px;
        text-align: center;
    }
    
    #cr-links-div a {
        color: red;
    }

    #cr-links-div a:hover {
        background-color: darkblue;
        color: white;
        text-decoration: underline;
    }

    
#DIV-ALL-RESULTS {
    vertical-align: top;
    min-height: 80vh;
    height: 600px;
    max-height: 90vh;
    overflow-y: scroll;
    overflow-x: hidden;
    /* background-color: #F0F0F0; */
    /*border: 2px green solid;*/
}

.RACE_RESULTS_DIV {
        margin-left: 15px;
        display: block;
        width: 100%;
        /*
        max-height: 500px;
        overflow-y: scroll;
        */
    }

.race-date-part {
    font-family: "Chivo Mono", Consolas, Courier New, Courier, monospace;
    font-weight: 600;
}    

    .RACE_RESULTS_DIV table {
        border-collapse: collapse;
	    font-family: Verdana, Geneva, Tahoma, sans-serif;
	    font-size: 12pt;
        /* min-width: 50%; */
    width: clamp(300px, 900px, 1000px);}	

    .RACE_RESULTS_DIV td {
        padding: 2px 5px 2px 10px;
        text-align: left;
		border: 1px silver solid;
    }

#RESULT-ROW {
    vertical-align: top;
}

.RESULTS_YEAR_TITLE {
	font-size: 38px;
	color: #9f3b34;
	font-family: "Oxanium", "Montserrat", sans-serif;
	font-weight: 600;
	width: 100%;
	/* background-color: #888899; */
	/*padding: 2px 5px;*/
}

.RACE_RESULTS_DIV td:nth-child(1), .RACE_RESULTS_DIV td:nth-child(2), .RACE_RESULTS_DIV td:nth-child(3) {
    color: green;
    padding-left: 5px;
    padding-right: 3px;
    margin-left: 0px;
    margin-right: 0px;
    width: 1%;
    white-space: nowrap;
}


    .RACE_RESULTS_DIV td:nth-child(4) {
        padding-left: 15px;
        padding-right: 15px;
    }

    .RACE_RESULTS_DIV td:last-child {
        color: #595658;
        max-width: 130px;
    }

    .RACE_RESULTS_DIV tr:hover {
        background-color: cornflowerblue;
        color: white;
    }

    .RACE_RESULTS_DIV td:nth-child(1), .RACE_RESULTS_DIV td:nth-child(2) {
        border-right: 0;
    }

    .RACE_RESULTS_DIV td:nth-child(2), .RACE_RESULTS_DIV td:nth-child(3) {
        border-left: 0;
    }

    .RACE_RESULTS_DIV td:nth-child(3) {
	    border-right: 1px silver;
		padding-right: 5px;
	}

    .RACE_RESULTS_DIV tr:nth-child(odd) {
			background-color: #eeeeee;
	}
		


.other-results-table {
	border: 2px #DDDDAA outset;
	padding: 5px;
	margin: 10px 0px;
}

.style22 {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
	color: #800000;
}

.local-results {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 7px 3px;
    font-weight: bold;
    color: #FFFFCC;
    font-size: 18px;
	background: #999966;
	border: 2px #666633 outset;
    display: none;
}
    
.style23 {
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size: 12pt;
}
   
.div-footer {
	background-color: #393656;
	border:  3px white outset;
}
    
.div-footer table {
	color: aqua;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
    margin: 0 auto;
}

.div-footer td {
	padding: 15px 20px 15px 20px;
}

#DIV-YEAR-LINKS {
    background-color: #303030;
}

.vertical-tab {
    font-family: 'Lato', sans-serif;
    display: table;
}

ul.nav.nav-tabs {
    /*background-color: #F0E0FF;*/
    color: #000040;
}


ul.nav {
    height: 60vh;
    /*width: 90%;*/
}

.vertical-tab, .nav-tabs, .year-links {
    font-size: 24px;
    display: table-cell;
    /*min-width: 25%; */
    /*width: 18%; */
    /*width: 100%; */
    vertical-align: top;
    border: none;
}

.vertical-tab .nav-tabs i {
   float: none;
   vertical-align: top;
   align-content: center;
   padding: 5px 10px;
}

.nav-tabs i, .year-links i {
   border: 2px solid transparent;
   border-bottom: 2px solid #E0E0C0;
}


.decade-nav {
   border-bottom: 2px solid transparent !important;
   margin-left: 40px;
}

.vertical-tab .nav-tabs i span, .vertical-tab .nav-tabs li i span, .year-links span {
     font-family: "Onanium", "Montserrat", sans-serif;
     font-weight: 600;
     align-content: center;
     padding: 5px 10px;
     color: #202070;
}

.vertical-tab .nav-tabs i span:hover, .year-links span:hover {
     color: gold;
}

.nav-tabs i:hover, .year-links i:hover {
    border-color: black;
    color: gold;
    transition: all 0.5s ease-in;
}

.year-links-no-results, .year-links-no-results span {
    color: gray
}

.year-links-no-results:hover, .year-links-no-results span:hover {
    color: #202060;
}

#gshlogo1 {
  position: relative;
  top: 0;
  left: 0;
  border: 0; 
  height: 85px;
}

#gshlogo2 {
  position: absolute;
  top: 0;
  left: 0;
  border: 0; 
  height: 85px;
    z-index: 99;
}

#gshlogo2:hover {
    transform: scale(1.20)
    translate(-7px, -3px);    
}

.vertical-tab .tab-content{
    color: #404040;
    background-color: rgba(0,0,0,0.07);
    text-align: justify;
    letter-spacing: 1px;
    line-height: 1.1em;
    padding: 15px 0px;
    border-radius: 0 20px 20px 0;
    display: table-cell;
    position: relative;
}
.vertical-tab .tab-content h3 {
    font-weight: 600;
    font-size: 16px;
    margin: 10px 5px 5px 0px;
}

.tab-content {
        font-family:  'Montserrat', sans-serif;
        font-size: medium;
}

.vertical-tab .tab-content h3 { 
    font-size: 1.3em; 
}

#header {
    margin-bottom: 20px;
}

@media only screen and  (max-width: 500px)  {
    .vertical-tab .nav-tabs{
        width: 100%; 
        display: block;
        border: none;
    }
    ul.nav {
        height: auto;
        /*width: 90%;*/
    }
}

 
    .vertical-tab .tab-content {
        padding: 20px 10px 10px;
        border-radius: 0;
        display: block;
    }

    .disabled {
      transition: background 0.25s ease;
    }

                
    .roster-updated {
        font-size: medium;
        font-weight: bold;
        color: darkblue;
        text-align: center;
        margin: 0 auto;
    }
    
    .gsh-author {
        font-family:  'Montserrat', sans-serif;
        font-size: small;
        font-weight: bold;
    }


.results-count {
	color: lightslategray;
	font-size: 22px;
	font-family: 'Consolas', monospace;
	vertical-align: middle;
	margin-left: 15px;
}