/******************************************************************************
* styles.css
*******************************************************************************
* Purpose:  CSS stylesheet for the Bristle Software Web site.
* Usage:
* Assumptions:
* Effects:
* Anticipated Changes:
* Notes:
* Implementation Notes:
* Portability Issues:
* Revision History:
*   $Log$
******************************************************************************/

/* Default fonts
 */
body, 
th, 
td,
h1,
h2,
h3 {
        font-family:verdana,arial,helvetica;
        }

/* Body of the entire HTML document.
 */
body {
        background-color:white;
        color:black;
        background-image:url('modtextb.gif');
        }

/* Textual hyperlinks that have and haven't been recently visited.
 */
a:link {
        color:#CC3333;
        }
a:visited {
        color:#808080;
        }

/* Headers (H1, H2, H3, etc.)
 */
h1 {
        color:#993300;
        font-size:28pt;
        font-weight:bold;
        }
h2 {
        color:#666699;
        font-size:16pt;
        font-weight:bold;
        }
h3 {
        color:#993300;
        font-size:14pt;
        font-weight:bold;
        }

/* Banner title at the top of the page.
 */
.bannerTitle {
        font-family:verdana,arial,helvetica;
        color:#993300;
        font-size:28pt;
        font-weight:bold;
        }

/* Table of Contents title, and 
 * Details section title
 */
.tocTitle,
.detailsTitle {
        font-family:verdana,arial,helvetica;
        color:#666699;
        font-size:16pt;
        font-weight:bold;
        }

/* Tip titles
 */
.tipTitle {
        font-family:verdana,arial,helvetica;
        color:#993300;
        font-size:12pt;
        font-weight:bold;
        }

/* Copyright notice
 */
.copyright {
        font-family:verdana,arial,helvetica;
        font-size:8pt;
        }

/* Copyright notice
 */
.coding_guideline_name {
        font-family:verdana,arial,helvetica;
        font-weight:bold;
        }

.coding_guideline_body {
        font-family:verdana,arial,helvetica;
        font-weight:normal;
        }

/* Allow long URLs displayed as clickable links to wrap at word boundaries.
   See notes in ~/fred/bristle/jslib/com_bristle_jslib_Presentation.css
   for why to use word-break:break-word instead of word-wrap:break-word
   or overflow-wrap:break-word.
   Same for any HTML element that explicit uses the class name.
 */
a,
.allow_wrap_of_long_words {
        word-break:break-word;
        }

/* Allow breaking of words to wrap lines in all table cells and column 
   headers beyond the 1st column.  The 1st column is so often a short 
   code or a date or something small that looks better unwrapped.
   Note: This is intially aimed at the tables in 
         Internet.htm#domain_vs_subdomain, but seems generally useful
         for all Tips pages.  Hopefully, it doesn't break anything.
         If so, change it to operate only on tables with a specific
         classname.
   Note: Tried word-break:break-word instead of overflow-wrap:break-word
         but it wrapped at each char on narrow phones since the table
         was already so indented that there wasn't much page width left.
         Will this work better?  Try only on tables with classname 
         wrap_all_but_first_column while experimenting, until I'm sure
         it doesn't break tables in any other pages at the site.
 */
table.wrap_all_but_first_column td ~ td,
table.wrap_all_but_first_column th ~ th {
/*        overflow-wrap:break-word;*/
        word-break:break-word;
        }

/* Allow element to use at least 75% of the viewport (browser window) width 
   despite being so indented that there isn't much viewport width left.
   This keeps highly nested list elements from getting squeezed too narrow, 
   but may require thr user to scroll to the right to see the entire width.
   Note: This is intially aimed at the tables in 
         Internet.htm#domain_vs_subdomain, but seems generally useful
         for all Tips pages.  Hopefully, it doesn't break anything.
         If so, change it to operate only on tables with a specific
         classname.  
   Note: Try only on elements with explicit classname while experimenting, 
         until I'm sure it doesn't break anything in other pages at the 
         site.
   ?? Consider adding for all sufficiently nested list items?
   ?? And sufficiently blockquotes
   ?? Could select:  li li li li
   ?? Or even all list items as: li
   ?? Currently, this does even short list with single items, which
   ?? is not ideal because user scrolls right and immediately back 
   ?? left.  Better to let such short list items wrap.  How?
   ?? Limiting it 75vw, not 100vw, reduces that problem a lot.
 */
.allow_extra_width,
.allow_extra_width_in_nested_list_items,
.allow_extra_width_in_nested_list_items li {
        min-width: 75vw;
        }

/* No need to squeeze <blockquote> width any more than necessary.
   I use it only to add indentation on the left, not the right.
   ?? If this doesn't work out, start using <ul> instead for left 
   ?? indentation, even when it contains no <li> elements.
*/
blockquote {
  margin-right:0;
}