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

/* 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...

*/
  
html {	
	background-color: Thistle;
	color: Indigo;	
}

/* Set background colour for container, gs_content to same as background for .ui-widget-content. 
Note that the full background property needs to be overridden on .ui-widget-content for this to take effect. */
#container, #gs_content {
	background-color: White;
}
.ui-widget-content { 
	border: none;
	background: White;
}

b, i, pre {
	color: Indigo;
}
  
/* 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;   
  margin: auto;
  width: 70%;
}

#container, #topArea {
 max-width: 100%;	
}

#topArea {
	margin: auto;
	
}

.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,
.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 Indigo;
}


.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; }


 /* 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: Purple;
}


#gs_banner {
	background: YellowGreen;
	color: white;
	height: 160px;
}

.choose_style {	
	font-weight: bold;
	background: YellowGreen;
	color: Purple;
	padding: 10px 20px 0px 20px;	
}

.choose_style a {	
	color: Indigo;
	/*text-decoration: none;*/
}
.choose_style a:hover {
	color: Gold;
}


#gs-nav {
	position: relative;
	top: -80px;
	/*margin-bottom: -60px;*/	
}

#gs-nav li {
	float: none;
	display: block;
	width: 10%;
	border-bottom: 1px solid Indigo;
}

#titlearea {
	float: right;
}

#titlearea h2 {
	padding-right: 20px;
}

#quicksearcharea {
	clear: both;
	float: right;
}

#quicksearcharea form {
	float: right;
	
}

#quicksearcharea ul {
	clear: both;
}

#gs-nav a, #quicksearcharea a {
	color: Purple;
}


/* 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: Indigo; 
}

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


#topArea, #viewAndZoomOptions {
	background: Purple;
	color: Indigo;
}

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

.ui-button, .ui-widget-header, .ui-widget-header .ui-state-default {
	background: Gold; /* #a5bcd9 slightly darker than LightSteelBlue*/
	color: Indigo; /* #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: Violet;	
}

#gs_footer {
	background: Purple;
}

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