/* FAQ specific overrides */

/* This file contains specific overrides and other styles needed for the Unicode FAQ.

   Assumptions: The way the indentation alternates for the questions from the
   main text is implemented with zero margin on the quesitons and positive margins
   on other contents. 
   
   Other assumptions made: the main text on each FAQ page is inside a div with
   the class "contents". Any file divided into sections with an <h2> is also grouped
   into separte <section> elements.

   All tables in the text should be of class="faq" with classes "center" and "noborder"
   mixed in as needed. "border" is needed only for nested tables. "border" and  
   "noborder" can alternate when nesting, but this will work only for a first level of
   nested table. Tables of the same kind can be nested deeper.

   All tables of contents are enclosed in a <nav class="faqtoc">. Multi-section TOCs 
   and consist of <h2> and <ul class="faq">. Single level toc are a single <ul class="faq">.
   
   Use of this style sheet requires the use of an html5 doctype.
   
   This style sheet uses two images: q_icon.jpg and point-icon.jpg
   
   NOTE: in the following comments "fix:" indicates a style override to the standard stylesheet.
         if the standard_styles.css is updated, these would be duplicate and can be removed.
        
   The index page now uses a <dl> elment with CSS columns.
*/

/* required for html 5 */
img { border: 0; }

/* generic font definition for p for the FAQ */
p, p.a, p.q { font-family: Verdana, Arial, Geneva, sans-serif; 
    font-size: 110%;
    line-height: 150%; 	
	font-weight: 400; 
	font-style: normal; }

p, p.a {
    margin-right: 1.5em; 
    margin-left: 1.04em;
}

/* various overrides for the p.q */
p.q {   
    margin-left: 0; margin-right: 0; 
    line-height: 140%;
    font-size: 134%; 
}

/* some color changes to make the "Q" parts stand out more */
p.q { color: #606060; background-color: #FAFAFA; } 

/* a light border and breathing room */
p.q { border: solid 1px #D9D9D9; 
  border-radius: 3px; 
  padding-bottom: 4px; padding-top:4px; 
  margin-bottom: .5em; }

/* use hanging indent, so that any multiline text wraps correctly respecting the widths of the Q */
p.q { text-indent: -1.55em; padding-left: 1.8em; }

/* fix: must override font-family/size from standard_styles */
li { font-family: Verdana, Arial, Geneva, sans-serif; 	}
	
/* prevent cascading font size */
li p, li p.a { font-size: 100%; }


/* fix: prevent list items from spreading vertically, just because they contain <P> elements */
li p {margin:0; }

/* fix: make nested lists use squares, not open circles */
ul { list-style: disc; }
ul { margin-left:.25em; padding-left:0em; } 
ol { margin-left:.5em; padding-left:0em; } 
ul ul { list-style-type:square; }
ol ul { list-style-type:square; }
ul ol li {font-size: 91%; line-height: 110%;} /* make secondary lists more condensed */
ul ul li {font-size: 91%; line-height: 110%;} /* make secondary lists more condensed */
ol ul li {font-size: 91%; line-height: 110%;} /* make secondary lists more condensed */
ol ol li {font-size: 91%; line-height: 110%;} /* make secondary lists more condensed */



/* in the faq, the outermost ul needs extra padding */
ul { padding-left: 2em;    margin-left: 16px; margin-right: 16px; }
ol { padding-left: 2em;    margin-left: 16px; margin-right: 16px; }
/* nested list, less padding */
td ul { padding-left: 1em; padding-bottom:.15em;}
td ol { padding-left: 1em; padding-bottom:.15em;}
ul ul { padding-left: 1em; padding-bottom:.15em;}
ol ul { padding-left: 1em; padding-bottom:.15em;}
ol ol { padding-left: 1em; padding-bottom:.15em;}
ul ol { padding-left: 1em; padding-bottom:.15em;}
ul li { padding-left: .15em; margin-left: 0;  }
ul p.a, ul p { margin-left: 0em; padding-left: 0em; }
ol p.a, pl p { margin-left: 0em; padding-left: 0em; }

/* this works only for a ul/ol inside a table in a faq */
td ul li {line-height: 125%; } 
td ol li {line-height: 125%;} 

/* fix: prevent li background from orverrideing "changed" status */
ul.changed li { background-color: inherit; }
ol.changed li { background-color: inherit; }

td ul { padding-left:1em; margin-left:.75px }

/* ensure lists inherit standard font settings */
ul {font-family: Verdana, Arial, Geneva, sans-serif;
    line-height: 150%;
    font-size: 110%; }
ol {    font-family: Verdana, Arial, Geneva, sans-serif;
    line-height: 150%;
    font-size: 110%; }
    
/* some custom marker styles */
ol.custom-marker {
  counter-reset: list;
}

ol.custom-marker > li {
  list-style: none;
  counter-increment: list;
}

ol.custom-marker.parens-after.decimal > li::marker {
  content: counter(list) ")\a0";
}

ol.custom-marker.parens-after.lower-alpha > li::marker {
  content: counter(list, lower-alpha) ")\a0";
}

ol.custom-marker.parens-around.lower-alpha > li::marker {
  content: "(" counter(list, lower-alpha) ")\a0";
}

ol.custom-marker.parens-around.decimal > li::marker {
  content: "(" counter(list) ")\a0";
}

/* fix: the standard_styles is missing a style for character names */
/* to use this style, type the name in UPPER CASE */
span.name   {text-transform: lowercase; font-variant: small-caps; font-size: 95% }

/* fix: the standard_styles does not define this value, so it becomes browser dependent */
/* later: do this for all heading styles... */
h1 { margin-top: .45em; margin-bottom: .25em; }

h1 { font-weight: normal;
      font-size: 180%;
      font-family: Verdana, Arial, Geneva, sans-serif;
      color: #333;
      line-height: 167%;
      }

/* match headers other than h1 */
h2 { font-family: Verdana, Arial, Geneva, sans-serif; }

td { font-family: Verdana, Arial, Geneva, sans-serif; }
th { font-family: Verdana, Arial, Geneva, sans-serif; }
        
/* rationale: the standard_styles does not have a good "basic" table. */
table.faq { border-width:1px; border-style:solid; border-color:#A0A0A0;
                border-collapse:collapse; padding:0.2em; margin-left:1em; font-size:1em} 
                
        table.faq th { border-width:1px; border-style:solid; border-color:#A0A0A0;
               padding:.3em .6em; text-align: left; } 
        table.faq td {border-width:1px; border-style:solid; border-color:#A0A0A0;
                padding:.3em .6em; text-align: left;  }
		/* rationale: use gray for bold table headings, to differentiate between headings and contents */
        table.faq th, table.faq th p { color: #808080; background-color:#F8F8F8; font-weight:bold;}

        table.faq th p {  font-size: 100%; margin:0;}
        table.faq td p {  font-size: 100%; margin:0;}
        table.faq td p+p {margin-top: 0.25em; }

        

/* Why is there a border on the header in the no-border header style? The color is so close to
   the background color that it's not seen as a border, rather it serves to make the background
   rectangle look more "crisp" */

/* noborder overrides the table and cell borders, but retains a small border around <th> to aid contrast */
table.noborder /*, table table.noborder */ { border-style:none; border-width:0; border-collapse:collapse; } 
        table.noborder th /*, table table.noborder th */ { border:solid 1px #F0F0F0;  } 
        table.noborder td /*, table.table.noborder td */ { border-style:none;    }
        
/* prevent explicit override from outer noborder  table. Works for one level of nesting */
table.border, table table.border { border-width:1px; border-style:solid; border-color:#A0A0A0; border-collapse:collapse; } 
		table.border th /*, table table.border th */ { border-width:1px; border-style:solid; border-color:#A0A0A0;  }
		table.border td /*, table table.border td */ {border-width:1px; border-style:solid; border-color:#A0A0A0; }




/* tables where headers act as section dividers (mh: multi-header) need a more distinct header style */
table.mh th p.a, table.mh th p { 
    color:#828282; 
    font-size:103%;
    border-left: solid 4px #D0D0D0; 
    padding-left: .5em; padding-top:4px; padding-bottom:4px;
}
table.mh th {
    border-bottom-color:  #606060; 
    border-bottom-width: 1px;
    padding-top:0; padding-left:0; padding-bottom:0; 
}
table.mh td p.a, table.mh td p { font-size: 91%;}
table.mh tr td:first-child { padding-left: 1em; }

table.center     { margin: 0 auto; }



/* faq-specific tweak for this style, revise if font-family gets changed */
span.name {text-transform: lowercase; font-variant: small-caps; font-size: 100% }

/* for editors notes (not review notes) */
span.note { font-size:80%; line-height:55%; }





pre {margin-left: 16px; margin-right: 16px;}



/* provide a container style to allow font change on other, contained elements */
div.faq    {font-family: Verdana, Arial, Geneva, sans-serif;}
div.faq p  {font-family: Verdana, Arial, Geneva, sans-serif;}
div.faq td {font-family: Verdana, Arial, Geneva, sans-serif;}
div.faq th {font-family: Verdana, Arial, Geneva, sans-serif;}



/* Styles for the opening ul containing the table of contents, to make it a series of boxes running down the left */

/* define a floting list without bullets */
ul.faq { width:29%; float: right; list-style:none; } /* with removal of right margin go to 29% */

/* position so the stack of boxes starts slightly below the first Q */
ul.faq  { position:relative; top:1.1em;}

/* set a white backround for the entire list, so Q headings don't visbly dive under the stack of boxes */
ul.faq { background-color: #FFFFF8; }
/* set margins and paddings to separate the list from surrounding text */
ul.faq {  margin-top:0; padding-top:0; 
          margin-left:2px; padding-left:2px; 
          margin-bottom:.75em; padding-bottom:0em; 
          margin-right: 0; padding-right:0}

/* these next ones are needed because the li in the navigation list do not contain <p> */
ul.faq li { font-family: Verdana, Arial, Geneva, sans-serif; } 

/* tighten up the lines just a bit, 115 is less than if unspecified */
ul.faq li { line-height:115%; font-size: 90%;}

/* min height to fit the background image */
ul.faq li { min-height: 20px; }

/* define the look of each list item as a box */
ul.faq li { border: solid 1px #D5D5D5;  }

/* try to give the nav boxes just a hint of a raised appearance */
ul.faq li { border-bottom-color: #909090; }
ul.faq li { border-right-color: #989898; }
ul.faq li { border-right-width: 2px; }
ul.faq li { border-bottom-width: 2px; }

ul.faq li { border-radius: 3px; }

/* style the background and margins */
ul.faq li { background-color: #F5F5F5;  }
ul.faq li { padding-bottom: 4px; padding-top:4px; padding-right:4px; padding-left:4px; padding-left: .5em; }
ul.faq li { margin-bottom: 5px; margin-top:2px;  }

/* use a background image to mark navigation boxes as "Q" */
ul.faq li { background-image:url(images/q_icon.jpg); background-repeat:no-repeat; background-position: 2px 2px; }
ul.faq li { padding-left: 28px; } /* larger padding to fit image of "Q" */

/* match "link" to "visited" color in navigation list for faq - these links are all targeting the current
   page after all, and having checkerboard of colors in this case isn't really useful */
/* because of the way pseudo elements work, best to repeat the full set of styles in order LoVe, HAte 
    NOTE: the order of active and hover is wrong in standard_style.css, preventing active from being triggered. */
ul.faq a:link { color: #660000; text-decoration:none; }
ul.faq a:visited { color: #660000; text-decoration:none; }
ul.faq a:hover { color:  #1A1A99; text-decoration:underline;/*#ff3333;*/ }
ul.faq a:active { color:  #1A1A99; /*#ff3333;*/ }

ul.faq li a:link {color: #333; text-decoration:none; }
ul.faq li a:visited { color: #333; text-decoration:none; }
ul.faq li a:hover { color: #1A1A99; text-decoration:underline; /*#ff3333; */}
ul.faq li a:active { color: #1A1A99; /*#ff3333; */ }

/* this is a nifty little style to turn the attribution links into something less prominent than the red link
   NOTE: make sure the link is inside a paragraph of */
   
p.a a[href*="attribution"] { color: #808080; text-decoration:none; background-color:inherit;  }
p.a a[href*="attribution"] { font-size: 60%;  position:relative; top:-.18em; padding-left:1px; padding-right:1px; }  

p a[href*="attribution"] { color: #808080; text-decoration:none; background-color:inherit;  }
p a[href*="attribution"] { font-size: 60%;  position:relative; top:-.18em; padding-left:1px; padding-right:1px; }  

/* styles for the table of contents navigation section  which floats right */
nav.faqtoc { float: right; width: 29%;  margin-left:2px; padding-left:4px; background-color:#FFFFFE; max-width:33%; }
nav.faqtoc ul.faq { width:auto; float: none;}
nav.faqtoc ul.faq li { margin-top:0 }  /* if there are section titles, no margins */
nav.faqtoc h2 { font-size:90%; font-weight:normal; 
            margin-bottom:0; padding-bottom:0; 
            position: relative; top: 1em; 
            background-image:url('images/point_icon.jpg'); background-repeat:no-repeat; background-position:4px 50%;padding-left:1.9em;
            border: solid 2px #E0E0E0; /*#660000; */
			border-bottom:none; padding-top:6px; padding-bottom: 2px; margin-left:4px; }
nav.faqtoc h2 a { text-decoration: none; }
nav.faqtoc h2 a:hover { text-decoration: underline; }




/* --- the following are currently not used in the FAQ, other than the page about FAQ maintenance */
/* start (unused)

/* fix: reduce the width of standard sidebar notes, add margin */
/* rationale: the current "note" is too wide and has no margin so text can bump into it,
              especially, when it's justified. Having a more narrow note would improve
              other pages on the site as welll */
table.sidebar { width:30%; margin-left:15px; margin-top:0; margin-bottom: .5em; padding-top:0;}
td.sidebar { padding-left:.30em; padding-top:.25em; padding-bottom:.25em; padding-right:.15em;}
td.sidebarTitle { padding-left:.20em; }

/* fix: alternative version - less color, slight 3D by wider bottom/right borders */
table.sidenote { width:30%; float:right; margin-left:15px; margin-top:0; margin-bottom: .5em; margin-right:4px; 
                padding-left:.30em; padding-top:.25em; padding-bottom:.25em; padding-right:.15em;
                 border: solid 1px #C0C0C0; border-collapse:collapse;
                  border-bottom-width:2px; border-right-width:2px }
td.sidenoteTitle { border-bottom: solid 1px #808080; background-color:#D8D8d8; color: #787878; }
td.sidenote {  padding-left:.20em; background-color: #FEFEFE; border:none; color: #505050;}

/* --- end (unused) --- */

dl {
	margin-left: 1em;
	line-height:150%;
}
dt, dl {
	font-family:Verdana, Arial, Geneva, sans-serif;
	font-size:110%;
}

dt { font-weight: bold;  }
dd { margin-bottom: .5em; }
/* the faqindex is a container for the listings for the main index on the faq */
div.faqindex { 
   max-width:100%;	
   padding-left:10px; 
   padding-right: 10px; 
   border-top: solid 1px #5555FF; /*#BB0000;*/ 
   border-bottom: solid 1px #5555FF; /* #BB0000; */
} 

/* the index is done as a definition list, so set some styles here, for dl, dd and dt elements */
div.faqindex dt { font-weight:normal; }
div.faqindex dt a {padding-left:.25em;}
div.faqindex dt a { text-decoration: none; font-weight:bold; }
div.faqindex dt { text-indent: -1.25em; margin-left: 1em; } /* handle wrapping faq topics */

div.faqindex dd { padding-left: .5em; margin-bottom: .35em; }
div.faqindex dd { color: #606060; }
div.faqindex dd { font-size:95%; }

div.faqindex dt a:link{ color:#666; }
div.faqindex dt a:visited{ color: #666;; }
div.faqindex dt a:hover{ color: #1A1A99; /* #880000;  */text-decoration: underline; }
div.faqindex dt a:active{ color: #1A1A99; /*#880000; */ text-decoration: underline;  }


div.faqindex dl { 
  line-height:150%; font-family: Verdana, Arial, Geneva, sans-serif;
  margin-top: 0;  
  margin-bottom: 0;
  padding: 0;
  column-count: 2; 
  column-rule: solid 1px #5555FF; /* #BB0000; */
  column-gap:4em; 
  column-fill:balance;
  }
  
div.faqindex dt { break-after:avoid; }
div.faqindex dd { break-inside: avoid; }
div.faqindex dt+dd { break-before: avoid; }


/* text at the head of the page that's not in q/a formatting */
div.intro p, div.intro p.a { margin-left: 0; }

/* fix: coloring red/green for table cells */
.fails {    background-color: #FFcccc;
}
.works {    background-color: #ccFFcc;
}
.highlight {    background-color: #FFFFcc;
}

/* make sure these styles work within an answer */
.fails p.a, .fails p {    background-color: #FFcccc;
}
.works p.a, .works p {    background-color: #ccFFcc;
}
.highlight p.a, .highlight p {    background-color: #FFFFcc;
}


/* this is for the main contents, excluding header and footer */
main { 
  padding-left: 3em;
  padding-right: .8em; 
  padding-top: 0.5em;
  padding-bottom: 1em;
  vertical-align: top;
  }

/* Style settings specific to the page header design. */

/* Note: these will need to also go into standard_styles_5.css */

header {
    font-weight: bold;
    border-bottom: 10px solid #EAEAFE; /* #999999; */
    padding: 3px .5em 2px 3px;
    background-color:  #5555FF; /* #990000;*/
    color: white;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 1em;
}

header a:link {
    color: white;
}
header a:visited {
    color: white;
}
header a:active {
    color: white; /*#FF3333; */
}
header a:hover {
    color: #B0B0B0; /*#FF3333; */
}

header nav a {
    font-size: 90%;
}

#headercore {
    /* These three lines keep logo and page title together and on the left side. */
    display: inline-block;
    flex-grow: 1;
    align-self: flex-end;
}

#headercore img {
    vertical-align: middle;
    margin-right: 10px;
}

/* End header styles */

/* Styles for cleaned up footer element */

footer img
{
   padding-top: 2px;
   /* change to em based for high DPI devices *
   width:216px; 
   height:50px;*/
   width: 21.6em;
   height: 5em;
   border: 0;
}

footer>div
{
  margin: 0 auto;
  text-align:center;
}

footer>hr { width:50%; } 

/* end footer styles */

/* section styles */
section { padding-bottom: .5em; }

section+section { border-top: 1px solid gray; }

section>h2 { margin-top: 1.75em;}

section table:last-child {margin-bottom: 1em;}
/* end section styles */

/* subtle link for glossed items */
a.glossarylink:link,
a.glossarylink:visited,
a.glossarylink:hover,
a.glossarylink:active  
{
  color: inherit; 
  text-decoration: none;
  border-bottom: 1px dotted  #5555FF; 
  padding-bottom: 1px;
}

a.glossarylink:hover
a.glossarylink:active  
{
  background-color: #EEEEEE;
}

/* override main style sheet */
a:link, 
a:visited,
a:hover,
a:active
{
	color: #3030FF;  
	/* color gives a contrast of 7:1 on white backgtound 
	   and 3;1 with ordinary text, while only a bit more
	   saturated than logo color. Flatten link/visited distinciton
	   as it's not possible to have two distinct values with the
	   required contrast values by luminance alone. */
}

/* in case we need an override
table.mh td p a:link{
	color: #3030FF!important; 
}
table.mh td p a:visited {
	color: #3030FF!important;
}*/



/* enable for local edits */
.changed	 	{ background-color: #FFFF00; border-style: dotted; border-width: 1px; }
.removed	 	{ text-decoration: line-through; background-color: #FFFF00; border-style: dotted; border-width: 1px; }
.reviewnote 	{ background-color: #FFFF80; color: #CC0000; border-style: dashed; border-width: 1px; }
/* these @medis instructions are tentative */
@media screen and (max-width: 500px) {
body { font-size: 80%; }
main { hyphens: auto; }
}

@media screen and (max-width: 600px), (orientation: portrait)  { 
div.faqindex dl {
        column-count:1;
        }
nav.faqtoc {
		display:none;
	    }
main { 
		padding-left: 1.5em; 
		
}



@media screen and (min-width: 700px) {
div.faqindex dl {
        column-count:2;
        }
nav.faqtoc {
		display: block;
		}
}