/* secondary color: #12264A */
/* banner top: #F4F4F4 */

/* 
Headings:

font-family: 'Oswald', Arial;
font-style: normal;
font-weight: normal;

Body:
  font-family: Roboto;
  font-size: 18px;
*/

:root {
    --gs-primary-fg:       #ffffff;
    /* --gs-primary-fg:       hsl(46, 100%, 49%); &/ /* #FCC100 */
    
    /* --gs-primary-bg:       hsl(284, 84%, 20%); */
    /*--gs-primary-bg:       hsl(46, 100%, 49%);*/ /* #FCC100 */
    --gs-primary-bg:       hsl(219, 61%, 18%); /* #12264A */
    --gs-primary-bg-blue:       hsl(219, 61%, 18%); /* #12264A */

    /*--gs-primary-bg:       hsl( 0,  0%, 96%);*/  /* #F4F4F4 */

    /*
    --gs-primary-border:   hsl(46, 88%, 35%);
    --gs-primary-hover-bg: hsl(46, 100%, 58%);
   */
    
    --gs-primary-border:   hsl(219, 40%, 10%);
    --gs-primary-hover-bg: hsl(219, 61%, 25%); /* was 295 rather then 284 */



    --gs-secondary-bg:     #E7D821; 
    /*--gs-secondary-bg:     hsl(46,OD 100%, 49%);  */
    /*--gs-secondary-bg:     hsl(219, 60%, 18%);*/ /* was 295, and eurovision-lod had an hsla() alpha val of 0.7 */
    
    --gs-primary-text-fg: var(--gs-primary-fg);
    --gs-tab-bg:          var(--gs-primary-bg);

    
    --gs-bg: #fff;
    --gs-text:#2d4156;
    
    --gs-btn-primary-bg: #459e00;
    --gs-btn-primary-text: var(--cc-bg);
    --gs-btn-primary-hover-bg: #255500;
    --gs-btn-secondary-bg: #eaeff2;
    --gs-btn-secondary-text: var(--cc-text);
    --XX-overlay-bg: rgba(4, 6, 8, .85);
}

/* 
   cc => 'cookie consent'
   The library we use for this defines its own root vars
*/

:root {
    /*
    --cc-btn-primary-bg: hsl(284, 84%, 20%);
    --cc-btn-primary-hover-bg: hsl(295, 92%, 30%);
   */
    
    --cc-btn-primary-bg: hsl(46, 100%, 49%);
    --cc-btn-primary-hover-bg: hsl(46, 100%, 58%);

}




/* Override existing values */

#container {
	max-width: 1280px;
}

#topArea {
	max-width: 1280px;
}


/* Add any new CSS you require for the interface here! */

body { 
    background-color: #fff;
}

/* 
   Streetlife York has nav-bar and content in the same font (Roboto)
   Heading in XX
*/


body { 
    font-family: Roboto;
}


.ui-widget {
    font-family: Roboto;
    /* font-size: 18px; */    
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Roboto;
    /* font-size: 18px; */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', Arial;
    font-style: normal;
    font-weight: normal;
}
			  
/* control whether you want roundd corners or not */
/* => GS3 defines the follow to be 6pt */
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
  border-top-right-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
  border-top-left-radius: 0px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
  border-bottom-right-radius: 0px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
  border-bottom-left-radius: 0px;
}



#thewillow-header {
    background-color: #F4F4F4;
    border-bottom: 10px solid var(--gs-primary-bg-blue);
}

#topArea.ui-state-default {
    margin: auto;
    width: 100%;
    border: none;
    background-image: none;
    background-color: #F4F4F4;
    font-weight: bold;
    color:#000000;
}

#topArea.ui-state-default a,
#topArea.ui-state-default a:visited {
    color: #666666;    
}
    
#gs_banner {
    /*background-color: #F4F4F4;  */
    background-color: #FFFFFF; 
    color: #555555;
    border-bottom: black solid 2px;
}

.ui-widget-header {
    border: 1px solid #d4ccb0;
    background-image: none;
    background-color: var(--gs-primary-bg);
    color: #ffffff;
    font-weight: bold;
}


#gs-nav .ui-state-default, #bannerLinksTab .ui-state-default
/* #gs_footer.ui-widget-header, */
/* .collectionLink .ui-state-default */
{
    border: 1px solid #d4ccb0;
    background-image: none;
    background-color: var(--gs-secondary-bg) !important;
    color: #ffffff;
    font-weight: bold;

    /* The following should probably be moved over to default interface css */
    text-align: left;
    padding-left: 6px;
    
}


#quicksearcharea a {
     font-size: 120%;
}

/*
.ui-widget {
	font-family: "Open Sans", sans-serif;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: "Open Sans", sans-serif;
}
*/

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}

.ui-widget-content {
    /*border: 1px solid #dddddd; */
    border: none;
    background: #ffffff;
    /* color: #2d3748; */
}
/*
.ui-widget-content a {
	color: #2d3748;
}
.ui-widget-header {
	border: 1px solid #5a5a5a;
	background: #404040;
	color: #2d3748;
	font-weight: bold;
}
.ui-widget-header a {
	color: #2d3748;
}

*/


/* Based on: https://stackoverflow.com/questions/17838380/styling-jquery-ui-autocomplete */

.ui-menu .ui-menu-item {
    background:white;
    color: black;
    font-size:80%;
}



.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 var(--gs-primary-border);
    background-image: none;
    /*background-image: url(images/ui-icons_eeeeee_256x240.png); */
    background-color: var(--gs-primary-bg);
    font-weight: bold;
    color: var(--gs-primary-text-fg);
}


.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-primary-border); 
    background-image: none; 
    /*background-image: url(images/ui-icons_eeeeee_256x240.png); */
    background-color: var(--gs-primary-hover-bg);
}

.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 var(--gs-primary-text-fg); /* flash border same colour as text */
    background-color: var(--gs-primary-hover-bg);
    background-image: none; 
    /*background-image: url(images/ui-icons_eeeeee_256x240.png);  */
    font-weight: bold;
    color: var(--gs-primary-text-fg);
}


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


/*
jquery-ui main theme is different image, and tingediwth green :

  background-image: url(images/ui-icons_8DC262_256x240.png);

.ui-state-active .ui-icon, .ui-button:active .ui-icon {
    background-image: url(images/ui-icons_eeeeee_256x240.png);
}
*/


#usercommentlink a, #usercommentlogoutlink a {
  color: var(--gs-primary-bg) !important;
}

.usercommentheading {
    color: var(--gs-primary-bg) !important;
}


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


#titlearea {
    padding-top: 6px;
o}

#quicksearcharea {
    padding-top: 6px;
    padding-right: 4px;
}

#titlesearchcontainer {
    padding-bottom: 15px;
}


#commentssection.centrediv {
    width: 100%; 
    margin: 0;
}

#userMenuDiv {
    text-transform: none;
}

#gs_content {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.metadataTable{
    width: 100%;
}

#commentarea textarea {
    width: 100%;
}

#gs_content a {
    border-bottom: 1px solid #003FC5;
}

#gs_content a:hover {
    border-bottom: 2px solid #003FC5;
}