/* gray with notebook spiral and  grass2gray border at bottom of banner. */
:root {
  --bigbg: url(https://www.goldengategraphics.com/ss/css/bg_notbk-body.gif);
  --nbbgradient: url(https://www.goldengategraphics.com/ss/css/bg_grass2gray.png);
  --aside1bg: url(https://www.goldengategraphics.com/ss/css/bg_notbk_leftw414.gif);
  --aside1TextColor: black; /* text color black  to contrast with light background */  
  --aside1TextShadow:  1px 0 0 transparent,
    -1px 0 0 transparent,
    0 1px 0 transparent,
    0 -1px 0 transparent,
    1px 1px 0 transparent,
    -1px 1px 0 transparent,
    1px -1px 0 transparent,
    -1px -1px 0 transparent,
	2px 0 0 transparent,
    -2px 0 0 transparent,
    0 2px 0 transparent,
    0 -2px 0 transparent,
    2px 2px 0 transparent,
    -2px 2px 0 transparent,
    2px -2px 0 transparent,
    -2px -2px 0 transparent,
	3px 0 0 transparent,
    -3px 0 0 transparent,
    0 3px 0 transparent,
    0 -3px 0 transparent,
    3px 3px 0 transparent,
    -3px 3px 0 transparent,
    3px -3px 0 transparent,
    -3px -3px 0 transparent;
  --aside1a: url(bg_nav_gray.png); 
  --aside1aHover: url(bg_nav_hover_gray.png);
  --main2bg: url(bg_notbk-body.gif); 
  --aside3bg: url(https://www.goldengategraphics.com/ss/css/bg_burnt-gray.png);
  --aside3a: url(bg_gray.png);
  --aside3aHover: url(bg_nav_gray.png);
  --footerbg: url(bg_gray.png); 
  --footera: url(bg_gray.png); 
  --footeraHover: url(bg_nav_hover_gray.png);
  --outline-color: white;
  --cbBackground: linear-gradient(45deg, silver, DarkSlateGray);
  --cbBorder:  5Px solid LightSlateGray;
  --cbHoverBox-shadow: 0 0 15px rgba(192, 192, 192, 0.5); /* silver hue - or try 0 0 15px rgba(47, 79, 79, 0.5); for darker glow. Might add new box-shadow property and javascript to delay the following  inset 0 0 10px rgba(70, 70, 70, 0.4); */
  --cbHoverBackground: linear-gradient(45deg, DarkSlateGray, silver); 
  --cbActiveBackground:  DarkSlateGray; 
  --cbActiveTextColor: silver;
  --cbBeforeBackground: radial-gradient( 
    circle, 
    rgba(192, 192, 192, 0.2), 
    LightGray
  ) ;  /* Silver-like reflection  or try rgba(211, 211, 211, 0.3) Brighter metallic glow or try  rgba(169, 169, 169, 0.25) Cooler steel-like effect*/
  --cbHover-activeBackground:  linear-gradient(45deg, DarkSlateGray, silver);
  --cbHover-activeBox-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
  --cbVisitedBackground:  linear-gradient(45deg, silver, DarkSlateGray);
  --cbVisitedBorder: 5Px solid LightSlateGray;
}

 #aside1 .text {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -epub-hyphens: auto;
  hyphens: auto;
} 

#aside1 .text {
  padding-right: 19%;
 }
 #aside1   {
  margin-right: 1%;
 }


/* Small screen - mobile phones, increase text padding to avoid it overlapping the spiral binding of the notebook */
@media screen and (max-width: 607px) {
#aside1 .text  {
  padding-right: 20%;
 }
 
}
/* Medium screen - tablets */
@media screen and (min-width: 607px) and (max-width: 992px) {
:root {
  --aside1bg: url(https://www.goldengategraphics.com/ss/css/bg_notbk_leftw305.gif);
 }
}