/* === project.css

You can import other .css files via:

    @import url("path/to/common.css");

To create a CSS rule for a specific name (ID), use the # as the leading
character.

Theme any widget named main_entry via .set_name():

    #main_entry {
      background-color: #f0a810;
    }

Theme all widgets with the style class entry

    .entry {
      color: #39f1f9;
    }

Here is an enter-button style:

    .enter_button{
      background: #669999;
      text-shadow: 1px 1px 5px black;
      border-radius: 3px;
      box-shadow: 0px 0px 5px black;
    }

Theme "spinbuttons" entries:

    spin_button.entry {
      color: #900185
    }

Theme any label within a notebook:

    notebook GtkLabel {
      color: #f90192;
    }

Theme active (pressed) buttons:

    button:active {
      background-color: #0274d9;
    }

Theme buttons with the mouse pointer on it (both are equivalent
but I prefer "hover"):

    button:hover,
    button:prelight {
      background-color: #3085a9;
    }

To give a widget a name via ruby-gtk3, you can use:

   .set_name()
   .set_name('background_colour_steelblue')

This gives that widget an ID.

    windows = Gtk.Window() 
    windows.set_name('main_window') 

Then, make use of #main_window as the ID-Selektor in CSS3:

    #main_window { 
      background-color: steelblue; 
    }

This will also be visible in the XML. Example for this:

   <object class="GtkWindow" id="main_window"> 

*/

/*
button {
  background-image: none;
  background-color: palegoldenrod;
}
*/

/*
button:hover label {
  color: blue;
}
*/

/*
 * Set the background-colour of the active button.
button:active {
  background-color: green;
}

*/

/*
 To denote the active-label in a button, try the following
 CSS rules:

button:active label {
  color: white;
}
*/

/*
 * Modify all labels globally next. As this is not great,
 * it has been commented out, but it is shown as an example
 * how users could style their own gtk-labels.
 */
/*
label {
  font-size:  30px;
  font-weight: 800;
  color: steelblue;
}
*/

/*
button:hover {
  background-color: lightblue;
}
*/

/*
 * Use some margin-properties next.
 */
.mar0,
.mar0px     { margin:  0px; }
.mar1px     { margin:  1px; }
.mar2px     { margin:  2px; }
.mar3px     { margin:  3px; }
.mar4px     { margin:  4px; }
.mar5px     { margin:  5px; }
.mar6px     { margin:  6px; }
.mar7px     { margin:  7px; }
.mar8px     { margin:  8px; }
.mar9px     { margin:  9px; }
.mar10px    { margin: 10px; }
.mar11px    { margin: 11px; }
.mar12px    { margin: 12px; }
.mar13px    { margin: 13px; }
.mar14px    { margin: 14px; }
.mar15px    { margin: 15px; }
.mar16px    { margin: 16px; }
.mar17px    { margin: 17px; }
.mar18px    { margin: 18px; }
.mar19px    { margin: 19px; }
.mar20px    { margin: 20px; }
.mar21px    { margin: 21px; }
.mar22px    { margin: 22px; }
.mar23px    { margin: 23px; }
.mar24px    { margin: 24px; }
.mar25px    { margin: 25px; }
.mar26px    { margin: 26px; }
.mar27px    { margin: 27px; }
.mar28px    { margin: 28px; }
.mar29px    { margin: 29px; }
.mar30px    { margin: 30px; }

.martb1px   { margin-top: 1px; margin-bottom: 1px; }
.martb2px   { margin-top: 2px; margin-bottom: 2px; }
.martb3px   { margin-top: 3px; margin-bottom: 3px; }

.transparent {
  background-color: transparent;
}

.tooltip_white_background {
  background-color: white;
}
    
#header1 {
  color:       royalblue;
  font-size:       3.0em;
  font-weight:       800;
}

#mars1em {
  margin-left:  1em;
  margin-right: 1em;
}

#entry1 {
  border: 1px solid black;
  background-color: rgb(255, 255, 204);
}

/*
 * This class is used, for instance, in the multimedia_paradise gem.
 */
#entry_yellow_background_and_slight_border {
  border: 1px solid black;
  background-color: rgb(255, 255, 204);
}

.mar0px  { margin:  0px; }

.no_box_shadow {
  box-shadow: none;
}

#button1 {
  color:   darkblue;
  border:  2px solid black;
  margin:  8px;
}

button1:hover {
  transition: 4000ms linear;
  background-color: lightblue;
}

/*
 * This variant has specifically been added for
 * tabble, now known as "application-menu".
 */
#button_lightgreen_to_olivedrab {
  background-image: none;
  color:            black;
  background-color: lightgreen;
  border:           3px solid black;
  margin:           4px;
  padding:          2px;
}

#button_lightgreen_to_olivedrab:hover {
  transition:       4000ms linear;
  background-color: olivedrab;
  color:            black;
}

.bblack3_and_padding {
  border:  3px solid black;
  padding: 5px;
}

.gold { color: gold; }


.pad0       { padding: 0;  }
.pad0px     { padding: 0px;}
.pad1px     { padding: 1px;}
.pad2px     { padding: 2px;}
.pad3px     { padding: 3px;}
.pad4px     { padding: 4px;}
.pad5px     { padding: 5px;}
.pad6px     { padding: 6px;}
.pad7px     { padding: 7px;}
.pad8px     { padding: 8px;}
.pad9px     { padding: 9px;}
.pad10px    { padding: 10px;}
.pad11px    { padding: 11px;}
.pad12px    { padding: 12px;}
.pad13px    { padding: 13px;}
.pad14px    { padding: 14px;}
.pad15px    { padding: 15px;}
.pad16px    { padding: 16px;}
.pad17px    { padding: 17px;}
.pad18px    { padding: 18px;}
.pad19px    { padding: 19px;}
.pad20px    { padding: 20px;}
.pad21px    { padding: 21px;}
.pad22px    { padding: 22px;}
.pad32px    { padding: 32px;}
.pad41px    { padding: 41px;}
.pad0_1em   { padding: 0.1em;}
.pad0_2em   { padding: 0.2em;}
.pad0_3em   { padding: 0.3em;}
.pad0_4em   { padding: 0.4em;}
.pad0_5em   { padding: 0.5em;}
.pad0_6em   { padding: 0.6em;}
.pad0_7em   { padding: 0.7em;}
.pad0_75em  { padding: 0.75em;}
.pad0_8em   { padding: 0.8em;}
.pad0_9em   { padding: 0.9em;}
.p1em       { padding: 1em;}
.pad1em     { padding: 1em;}
.pad1       { padding: 1em;}
.d1em       { padding: 1em;}
.pad1_1em   { padding: 1.1em;}
.pad1_2em   { padding: 1.2em;}
.pad1_3em   { padding: 1.3em;}
.pad1_4em   { padding: 1.4em;}
.pad1_5em   { padding: 1.5em;}
.pad1_8em   { padding: 1.8em;}
.pad1_9em   { padding: 1.9em;}
.pad2em     { padding: 2em;}
.pad2       { padding: 2em;}
.d2em       { padding: 2em;}
.pad2_1em   { padding: 2.1em;}
.pad2_2em   { padding: 2.2em;}
.pad2_3em   { padding: 2.3em;}
.pad2_4em   { padding: 2.4em;}
.pad2_5em   { padding: 2.5em;}
.pad3em     { padding: 3em;}
.pad3       { padding: 3em;}
.d3em       { padding: 3em;}
.pad4em     { padding: 4em;}
.pad4       { padding: 4em;}
.pad5em     { padding: 5em;}
.pad5       { padding: 5em;}
.pad6em     { padding: 6em;}
.pad7em     { padding: 7em;}
.pad8em     { padding: 8em;}
.pad9em     { padding: 9em;}
.pad10em    { padding: 10em;}
.pad11em    { padding: 11em;}
.pad12em    { padding: 12em;}
.pad13em    { padding: 13em;}

.no_background_image { background-image: none; }

#on_hover_BG_orange:hover:active {
  background-color: orange;
}

#scrollbar1 slider {
  /* Size of the slider */
  min-width:      8px;
  min-height:     8px;
  border-radius: 15px;

  /* Padding around the slider */
  border: 3px solid transparent;
}

/*
 * The notebook1 variant is mostly for the FlexibleVte Widget.
 *
 */

.notebook1 tab {
  background: none;
  background-color: black;
  border: 0;
  border-color: springgreen;
  border-style: solid;
  border-width: 1px;
  padding:  8px;
  margin:   1px;
}

.notebook1 tab:checked {
  background-color: #000;
  background-image: none;
}

.notebook1 tab label {
  color: #ddd;
}

.notebook1 tab:checked label {
  color:       #76C802;
  font-weight: 700;
}

.notebook1 tab button {
  padding: 0;
  background-color: transparent;
  color: #ccc;
}

.notebook1 tab button:hover {
  background-image: none;
  border-color: tomato;
  border-style: solid;
  border-width: 2px;
}

.notebook1 header {
  background-color: #444;
}

.notebook1 .scrollbar {
  background-color: transparent;
}

.no_border {
  background-image: none;
  border: 0px solid darkblue;
}

/*
#custom_file_chooser_dialog {
  border: 1px solid black;
}
*/

/*
 * Next we can style a treeview widget.
 */
#treeview1.view header button {
  color: firebrick;
}

#scrollbar2 slider {
  /* Size of the slider */
  min-width:     12px;
  min-height:    12px;
  border-radius: 15px;

  /* Padding around the slider */
  border: 5px solid transparent;
}

/*
 * This can be used to style a gtk-entry.
 */
.default_entry {
  border: 1px solid black; /* bblack1 */
  background-color: rgb(248, 247, 224); /* BG_very_light_yellowish */
  padding: 8px; /* pad8px */
}

.bold_font {
  font-weight: 600;
}

.hack_30 {
  font-family: Hack;
  font-size: 30pt;
}

#scrollbar3 slider {
  /* Size of the slider */
  min-width:     28px;
  min-height:    20px;
  border-radius: 16px;

  /* Padding around the slider */
  border: 8px solid royalblue;
}

#scrollbar3 trough {
  background-color: transparent;
  background-repeat:  no-repeat;
  background-position: center;
}

.clear_background    {
  background-image: none;
}
