/*
https://www.w3schools.com/cssref/css_colors.asp
https://www.w3schools.com/colors/colors_picker.asp
*/
:root {
	--cc-btn-primary-bg: LightSteelBlue;	
}

/* This style sheet is used by the garish collection as an
  example of modifying the appearance */

/* notes about style sheets.

   Colours - The most portable way to specify colours is to use the
     #xxxxxx notation, which is in hex for red, green, and blue.  eg black
     is #000000, red is #ff0000, blue is #0000ff and white is #ffffff.
     This may seem confusing at first, but you can't count on colour names
     being the same across all browsers and platforms. For example,
     linux/x11 has hundreds of colours with names such as DarkOliveGreen
     and PaleVioletRed. However, simple colour names should work with most
     browsers...

*/
   

/* set defaults for the HTML body */
body {
 /* set the face. The first one in the list found will be used, so
    have reasonable fall-backs */
 /* use a serif font windows uses "times new roman", "times" on mac/linux */
  font-family: times new roman, times, serif; 
}

 /* you can set a background colour, but a lot of the images/buttons are
    designed to blend into a white background. */
/* Note, this didn't seem to work when placed into above body definition */
body.bgimage {
  background-color: LightSteelBlue;
}

.choose_style {
	padding: 10px 20px;
	background: #f5f3e5; /* same as page background */
}

.choose_style a {
	color: black;
}


/* background for .ui-widget-content should match background-color for #container and #gs_content 
Note that the full background property needs to be overridden on .ui-widget-content for this to take effect. */
.ui-widget-content { 
	border: none;
	background: #f5f3e5;
}

/* paragraph text - this will override the settings above for text inside
 <p>....</p> tags. */

p {
 color: Black;/* DarkSlateGrey */
 font-weight: normal;
}

/* headings */
h1, h2, h3, h4 {
 /* use a sans-serif font - arial on windows, helvetica on mac/linux */
 font-family: arial, helvetica, sans-serif;
 color: SteelBlue; 
}

#titlearea h2, #titlearea h1, #titlearea h3, #titlearea h4 {
	color: #edf2f7; /* LightCyan #edf2f7 lighter than LightSteelBlue */
}

#gs_banner {
	background: SteelBlue;
	color: white;
}

#topArea, #viewAndZoomOptions {
	background: SteelBlue;
	color: white;
}

.ui-state-default, .ui-widget-content .ui-state-default {
	border: 1px solid SteelBlue;
	background: SteelBlue;	
}

.ui-button, .ui-widget-header, .ui-widget-header .ui-state-default {
	background: #a5bcd9; /* #a5bcd9 slightly darker than LightSteelBlue*/
	color: White; /* #325d81 or #2b506e for darker than SteelBlue*/
}

/*
#gs-nav .ui-state-default {
	background: GoldenRod;
	color: White;
}
*/

.ui-button:hover, .ui-widget-header .ui-state-default:hover {
	background: LightSkyBlue;	
}

.ui-state-active a, .ui-state-active a:link {
	color: #396a93; /* #325d81 or #2b506e for darker than SteelBlue*/
}
