:root {
    --gs-primary-font:     "Open Sans", OpenSans, sans-serif;    
    --gs-primary-bg-col:   rgb(64,64,64); 
    /*--gs-primary-bg-col:   rgb(12,90,115); */
    --gs-primary-fg-col:   rgb(255,255,255);
    /*--gs-secondary-bg-col: rgb(12,90,115);*/
    --gs-secondary-bg-col: rgb(64,64,64)
    --gs-highlight-bg-col: rgb(12,80,105);
}


:root {
    --gs-tabletop-primary-fg-col: #fff;
    /* --gs-tabletop-primary-bg-col: #29e; */
    --gs-tabletop-primary-bg-col: var(--gs-primary-bg-col);
}



html {
    background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
    background-size: cover;
}


body {
    font-family: var(--gs-primary-font);    
    color: var(--gs-tabletop-primary-fg-col);
}

select {
    font-family: var(--gs-primary-font);
}

.tabletop-button {
    background-color: var(--gs-tabletop-primary-bg-col);
    color: var(--gs-tabletop-primary-fg-col);;
}

#gs-control-bar {
    color: var(--gs-tabletop-primary-fg-col);
    background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
}

#gs-control-bar-toggle {
    background-color: var(--gs-tabletop-primary-bg-col);
    color: var(--gs-tabletop-primary-fg-col);
}

#gs-home-open {
    /*
    background-color: var(--gs-tabletop-primary-bg-col);
    color: var(--gs-tabletop-primary-fg-col);
   */
    /* reverse colors */
    background-color: var(--gs-tabletop-primary-fg-col);
    color: var(--gs-tabletop-primary-bg-col);
}

#gs-css-root-primary {
    display: none;
    color: var(--gs-tabletop-primary-fg-col);
    background-color: var(--gs-tabletop-primary-bg-col);   
}



/* Greenstone interface custom styling */




.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid rgb(50,50,50);
    background-image: none;
    background-color: var(--gs-primary-bg-col);
    font-weight: bold;
    color: var(--gs-primary-fg-col);
}



.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    border: 1px solid var(--gs-highlight-bg-col);
    background-image: none;
    background-color: var(--gs-secondary-bg-col);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid rgb(240,240,240);
    background-color: var(--gs-highlight-bg-col);
    background-image: none;
    font-weight: bold;
    color: var(--gs-primary-fg-col);
}


.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: var(--gs-primary-fg-col);
    background-color: var(--gs-secondary-bg-col);
}


#usercommentlink a, #usercommentlogoutlink a {
  color: var(--gs-secondary-bg-col);
}


.navList {
    background-color: var(--gs-secondary-bg-col);;
}