source: documented-examples/trunk/style-e/style/gs3-style-olive-purple.css@ 36371

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