/* Colors */

:root
{
    --green60: #397d2c;     /* 60 (text) */
    --green83: #669958;     /* 83 (midpoint of background pattern */
    --greend8: #d0decc;     /* D8 */
    --greeneb: #e8efe5;     /* EB = 83 @ 0.15 opacity */
    --greenf5: #f4f7f3;     /* F5 */

    --blue54: #1f668f;      /* 54 */
    --blue71: #2a89bf;      /* 71 (text/border) */
    --blue8e: #34abee;      /* 8E */
    --blueed: #e0f2fc;      /* ED = 8E @ 0.15 opacity */

    --rainbowred: rgb(192,48,48);
    --rainbowredtrans: rgb(192,48,48,0.85);
    --rainboworange: rgb(216,136,24);
    --rainboworangetrans: rgb(216,136,24,0.85);
    --rainbowyellow: rgb(176,176,20);
    --rainbowyellowtrans: rgb(176,176,20,0.85);
    --rainbowgreen: rgb(57,125,44);
    --rainbowgreentrans: rgb(57,125,44,0.85);
    --rainbowblue: rgb(64,64,224);
    --rainbowbluetrans: rgb(64,64,224,0.85);
    --rainbowcyan: rgb(42,137,191);
    --rainbowcyantrans: rgb(42,137,191,0.85);
    --rainbowpurple: rgb(140,81,255);
    --rainbowpurpletrans: rgb(140,81,255,0.85);

    --graytext: #666666;

    --failurered: #d44;
    --failureredlight: #fbb;
    --cautionyellow: #ff0;
    --cautionyellowlight: #ff8;
    --successgreen: #3d3;
    --successgreenlight: #bfb;

    --greentext: var(--green60);
    --greenborder: var(--green83);
    --bluetext: var(--blue71);
    --blueborder: var(--blue71);
    --pagebackground: var(--greend8);
    --lightbackground: var(--greenf5);

    --lrmargin: 15px;
    --lrmargininv: -15px;
}


/* Core styles */

body,select,input,textarea
{
    font-family:'PT Sans', Georgia;
    font-size:17px;
}

body
{
    background-color:var(--pagebackground);
    margin:0;
    padding:0;
}

h1,h2,h3,h4,h5
{
    color:var(--bluetext);
    text-align:left;
    line-height:110%;
    font-weight:normal;
}
h1
{
    font-size:200%;
    text-align:left;
}
@media screen and (max-width:480px) { h1 { font-size:160%; } }
h2
{
    padding:0;
    margin-top:35px;
    margin-bottom:10px;
    font-size:140%;
    text-transform:uppercase;
    letter-spacing:1px;
}
h3
{
    font-size:120%;
    font-weight:bold;
    letter-spacing:0.5px;
    margin-top:30px;
    margin-bottom:10px;
}
h2+h3
{
    margin-top:0;
}

img,input,select,textarea
{
    max-width:100%;
}

a
{
    color:var(--bluetext);
    text-decoration:none;
}
a:hover
{
    text-decoration:underline;
}
h1 a,h2 a,h3 a,h4 a,h5 a
{
    color:var(--bluetext);
}

#main>h1
{
    font-weight:normal;
    letter-spacing:1px;
    margin:0 var(--lrmargininv);
    padding:15px 0 15px 0;
    text-align:center;
    background-image:linear-gradient(to bottom, var(--blue54), var(--blue8e));
    color:white;
    white-space:nowrap;
    overflow:hidden;
}

b
{
    font-weight:bold;
    color:var(--greentext);
}

ul,ol
{
    padding-left:30px;
}
@media screen and (max-width:480px) { ul,ol { padding-left:20px; } }
ul li,ol li
{
    margin-bottom:10px;
}
ul li ul,ul li ol,ol li ul,ol li ol
{
    margin-top:3px;
}
ul li ul li,ul li ol li,ol li ul li,ol li ol li
{
    margin-bottom:3px;
}

table
{
    margin-left:auto;
    margin-right:auto;
    border-collapse:collapse;
}
table td,table th
{
    text-align:left;
    border:1px solid var(--greenborder);
    padding:5px 10px;
}
table th
{
    font-weight:bold;
    color:var(--greentext);
}

table.noborder td,table.noborder th
{
    border:none;
}

pre
{
    margin:0 10px;
    padding:10px;
    background-color:var(--lightbackground);
    font-size:80%;
    white-space:pre-wrap;
}

/* Generic styles */

.gshadow
{
    clear:both;
    background-image:linear-gradient(to bottom, var(--greeneb), white 100px);
    border-top:2px solid var(--greenborder);
    margin-left:var(--lrmargininv);
    margin-right:var(--lrmargininv);
    padding-left:var(--lrmargin);
    padding-right:var(--lrmargin);
}
.bshadow
{

    clear:both;
    background-image:linear-gradient(to bottom, var(--blueed), white 100px);
    border-top:2px solid var(--blueborder);
    margin-left:var(--lrmargininv);
    margin-right:var(--lrmargininv);
    padding-left:var(--lrmargin);
    padding-right:var(--lrmargin);
}
.bshadow-section
{
    clear:both;
    background-image:linear-gradient(to bottom, var(--blueed), white 100px);
    border-top:2px solid var(--blueborder);
    margin:35px var(--lrmargininv);
    padding:0 var(--lrmargin);
    min-height:100px;
}
.gshadow>h2,.bshadow>h2,.bshadow-section>h2
{
    margin-top:15px;
}

.thick-separator
{
    margin-left:var(--lrmargininv);
    margin-right:var(--lrmargininv);
    padding-left:var(--lrmargin);
    padding-right:var(--lrmargin);
    border-top:15px solid var(--pagebackground);
    padding-top:15px;
}

.membersonly
{
    display:none;
}

.center
{
    text-align:center !important;
    margin-left:auto;
    margin-right:auto;
}

.right
{
    text-align:right;
}

.lefthalf,.righthalf
{
    display:inline-block;
    vertical-align:top;
    margin:0;
    padding:0;
    border:none;
    width:48%;
}
.lefthalf
{
    margin-right:1%;
}

.hoverexpand
{
    transition:transform 0.25s;
}
.hoverexpand:hover
{
    transform:scale(1.1,1.1);
}

.clear
{
    clear:both;
    height:1px;
}

span.wide
{
    display:inline;
}
div.wide
{
    display:block;
}
span.narrow,div.narrow
{
    display:none;
}

.subtitle
{
    font-size:80%;
    line-height:125%;
}

.caption
{
    font-size:85%;
    line-height:120%;
    text-align:center;
    margin-top:0;
    color:var(--graytext);
}

.divider
{
    margin:25px 0 25px;
    border-top:5px dotted var(--greenborder);
}

.icon64
{
    display:inline-block;
    width:64px;
    height:64px;
    margin:5px 5px 0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
}

.icon96
{
    display:inline-block;
    width:96px;
    height:96px;
    margin:5px 5px 0;
}

.fbicon
{
    background-image:url('/styles/finder-facebook-blue.png');
}
.twittericon,.twicon
{
    background-image:url('/styles/finder-x-blue.png');
}
.instagramicon,.igicon
{
    background-image:url('/styles/finder-instagram-blue.png');
}
.emailicon,.mailicon
{
    background-image:url('/styles/finder-email-blue.png');
}
.youtubeicon,.yticon
{
    background-image:url('/styles/finder-youtube-blue.png');
}
.webicon
{
    background-image:url('/styles/finder-website-blue.png');
}

.downloadicon
{
    background-image:url('/styles/download-250.png');
}
.pdficon
{
    background-image:url('/styles/pdf-icon.png');
}
.pngicon
{
    background-image:url('/styles/png-icon.png');
}
.jpegicon
{
    background-image:url('/styles/jpeg-icon.png');
}

.ticketsicon20
{
    display:inline-block;
    width:32px;
    height:17px;
    margin:3px 0 -3px;
    padding:0;
    background:transparent url('/styles/tickets.png') no-repeat center center;
    background-size:32px 17px;
    transition:transform 0.25s;
}
.ticketsicon20:hover
{
    transform:scale(1.25,1.25);
}

.video-container
{
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    margin-bottom:20px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* Structural styles */

#innerbody
{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    box-sizing:border-box;
}

#header
{
    display:block;
    text-align:center;
    width:100%;
    height:175px;
    margin:0;
    padding:0;
    background-color:var(--green83);
    background-image:url('/styles/header-logo.png'), url('/styles/gscc-background.jpg');
    background-size:contain, cover;
    background-position:center;
    background-repeat:no-repeat;
}

#main
{
    padding:0 var(--lrmargin);
    background-color:white;
}

#footer
{
    margin:20px var(--lrmargininv) 0;
    padding:3px 0 6px;
    font-size:60%;
    text-align:center;
    color:var(--graytext);
    background-color:var(--pagebackground);
}

/* Year list styles */

.yearlist
{
    margin:20px 0;
    text-align:center;
}

.yearlist .year
{
    display:inline-block;
    border:2px solid var(--greenborder);
    margin:-1px;
    padding:10px 0;
}
.yearlist .year a
{
    color:var(--greentext);
    padding:10px 20px;
}
.yearlist .year:hover a
{
    background-color:var(--bluetext);
    color:white;
    text-decoration:none;
    cursor:pointer;
}
.yearlist .year.current a
{
    background-color:var(--green60);
    color:white;
}

/* Button styles */

.button
{
    display:inline-block;
    min-width:100px;
    font-size:20px;
    line-height:24px;
    padding:5px 25px;
    margin:10px 5px;
    cursor:pointer;
    text-align:center;
    background-image:linear-gradient(to bottom, var(--blue71), var(--blue8e));
    background-color:var(--blue8e);
    border:2px solid var(--blueborder);
    color:white;
    border-radius:20px;
    user-select:none;
    filter:drop-shadow(2px 2px 2px var(--blue54));
}
.button:hover
{
    background-image:none;
}
.button.disabled,.button.disabled:hover
{
    background-image:none;
    background-color:var(--graytext);
    color:darkgray;
    cursor:default;
    border-color:var(--graytext);
    filter:none;
}
.button a
{
    color:white;
}
.button a:hover
{
    text-decoration:none;
}

.buttonsrow
{
    margin:15px 0 5px;
    text-align:center;
}
.buttonsrow .button
{
    box-sizing:border-box;
    max-width:30%;
    white-space:nowrap;
/*    overflow:hidden;*/
    margin-left:0;
    margin-right:1%;
}
.button.small
{
    font-size:17px;
    padding:1px 10px;
}

/* Photo gallery styles */

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

.gallery .container
{
    display:inline-block;
    padding:2px;
}

.gallery img
{
    max-width:300px;
    max-height:300px;
}

/* Search box styles */

.searchbox
{
    border-top:1px solid var(--blueborder);
    border-bottom:1px solid var(--blueborder);
    text-align:center;
    margin:25px var(--lrmargininv);
    background:var(--blueed);
}

.searchbox h1,.searchbox h2
{
    margin-top:0;
    margin-bottom:20px;
    color:var(--bluetext);
}

.searchbox .inner
{
    padding:20px var(--lrmargin);
    display:inline-block;
    text-align:left;
}
@media screen and (max-width:720px) { .searchbox .inner { border-left:none; border-right:none; padding:20px var(--lrmargin); } }

.searchbox .inner .row
{
    margin:0 0 25px;
}
.searchbox .inner .row:last-of-type
{
    margin-bottom:0;
}

.searchbox .inner .row .item
{
    display:inline-block;
    vertical-align:top;
}

.searchbox .inner .row input[type="text"]
{
    font-size:90%;
    padding:2px;
}

.searchbox .button
{
    font-size:90%;
    letter-spacing:0.5px;
    min-width:100px;
    padding:1px 15px;
    margin-left:4px;
    margin-right:4px;
}

.searchbox .buttonsrow
{
    margin-bottom:0;
}

.searchbox .spinner
{
    display:inline-block;
    width:16px;
    height:16px;
    padding:0 5px;
}
.searchbox .spinner.active
{
    background:transparent url('/styles/search-spinner.gif') no-repeat center center;
}

/* Ripple spinner */

/* Example:
<div id='please-wait'>
 <div id='please-wait-spinner-background' class='spinner-overlay-background'></div>
 <div id='please-wait-spinner' class='spinner-overlay'>
  <div class='spinner-container'>
   <div class='lds-ripple'><div></div><div></div></div>
  </div>
 </div>
 <div id='please-wait-spinner-text' class='spinner-text'><span style='visibility:hidden'>...</span>Loading...</div>
</div>
*/

.spinner-overlay-background
{
    z-index:2;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.25;
}
.spinner-overlay
{
    z-index:3;
    position:absolute;
    left:0;
    top:calc(50% - 150px);
    width:100%;
    height:300px;
    border-top:4px solid var(--greenborder);
    border-bottom:4px solid var(--greenborder);
    background-color:var(--lightbackground);
}
.spinner-container
{
    position:absolute;
    left:calc(50% - 100px);
    top:calc(50% - 100px);
    width:200px;
    height:200px;
}
.spinner-text
{
    z-index:4;
    position:absolute;
    left:0;
    top:calc(50% - 20px);
    width:100%;
    height:40px;
    font-size:40px;
    font-weight:bold;
    line-height:40px;
    text-align:center;
}

.lds-ripple
{
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
}
.lds-ripple div
{
    position: absolute;
    border: 4px solid var(--green60);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2)
{
    animation-delay: -0.5s;
}
.lds-ripple div:nth-child(3)
{
    animation-delay: -1.0s;
}
@keyframes lds-ripple
{
    0% {
        top: 100px;
        left: 100px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100%
    {
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

/* Media adjustments */

@media screen and (max-width:999px) {
    #innerbody
    {
        border:none;
    }
}

@media screen and (max-width:767px) {
    .lefthalf,.righthalf
    {
        display:block;
        width:100%;
    }
    .yearlist .year
    {
        padding:7px 0;
    }
    .yearlist .year a
    {
        padding:7px 15px;
    }
}

@media screen and (max-width:576px) {
    span.wide,div.wide
    {
        display:none;
    }
    span.narrow
    {
        display:inline;
    }
    div.narrow
    {
        display:block;
    }
    .yearlist .year
    {
        padding:5px 0;
    }
    .yearlist .year a
    {
        padding:5px 10px;
    }
}

@media screen and (max-width:399px) {
}

@media screen and (max-width:319px) {
    #main
    {
        padding:10px 2px 2px;
    }
}