/***** STA: "jkall.css" *****/

/* 23Jul2010: I put this file into UTF-8 encoding; hoping this neither confuses
   Emacs, nor web browsers, nor me.  */

/* EMACS reference:
	comment-dwim		      M-;
  */

/* TERMINOLOGY:
   An HTML _element_ has a start-tag, content, and stop-tag.
	<tag attribute="value">content to be rendered</tag>

  A CSS _rule_ has
	selector {property1: value1 ; property2: value2 ; }

  THIS:		{property1: value1 ; property2: value2 ; }
  is a _declaration block_.  Each
		 property: value
  is a _declaration_.

    In CSS:  `background:' is a shorthand.  Its first potential
  argument is the value of `background-color'.

  First file has COLORS
    (fifs "~squash/Sites/CSS/0readme.css.txt")
    (fifs "~squash/Sites/baseref-jk.shtml")
    (fifs "~squash/Sites/CSS/jkcontent.css")

  I had "CSS class-names are, in principle, case-sensitive.  Apparently, different
  browers behave differently here", but am unsure where the info is from.

  (browse-url "http://www.w3.org/TR/CSS2/selector.html#pattern-matching")
  (browse-url "http://www.w3.org/TR/css3-selectors/#selectors")
  */

/* 15Jul2010: In "jkall.css", the @import works.
	@import url("/~squash/CSS/jk-show-accesskeys.css") ;
  However, it appears to be ignored in (fifs "userContent.css" "@import")
  23Aug2015: Changed the import cmd to
	@import url("/CSS/jk-show-accesskeys.css") ;
  I do not know if it works.
  */

/*  ENGINE:	BROWSER:
    Gecko:	Firefox (FF).  Thunderbird.  Seamonkey.	 Camino.  Galeon [gone]
    Webkit:	Safari.	 iCab.	(Google) Chrome.  Epiphany [used Gecko <2009].  OmniWeb. Real Player.
    Webkit:	[Discontinued, or buggy-reviewed] Midori. Arora. [QtWebKit] QupZilla
    KHTML:	Konqueror.  [Apparently Webkit is based on KHTML.]
    Presto:	Opera.
    Trident:	Internet Explorer (IE).
  */

/* font-family:
   'Brush Script MT'	;;Too cramped.
   'Comic Sans MS'	;; Nice, amusing.  Thick.
   'Apple Chancery'	;; Elegant script.
   cursive		;; On FF, seems to be the same as 'Apple Chancery'.
   fantasy ;; On FF Mac, a light open script.  Nice.  HOWEVER (Tuesday, 21Dec2021) on Ubuntu,
     after a FF update in (I think) 2020,  `fantasy' mapped to some asterisky-unreadable font.
     I never found how to fix it, so I deleted `fantasy' from "jkall.css".
  (fifs "../test-fonts.html" "Cursive")
  (browse-url "https://math.ufl.edu/~squash/test-fonts.html")
  (browse-url "http://www.w3schools.com/css/css_font.asp")
 */

/*  Access keys:
  (fifs "~/Sites/Include/accesskeys-jk.shtml" "accesskey=")
  (browse-url "http://squash.1gainesville.com/info.footnote.html#navigation")
  (fifs "jk-show-accesskeys.css" )
  */

/* "Eleven (11) elements are added to Transitional when compared with Strict:
    APPLET, BASEFONT, CENTER, DIR, FONT, IFRAME, ISINDEX, MENU, S,
    STRIKE, and U."

 JK: It seems both <S> and <STRIKE> were strikethrough.	 Now use <DEL> for deleted text.
    In place of <U>, underline, one /could/ use <INS>, for inserted-text.  But here,
    I should use CSS, since when I want underline it is rarely meaning "insertion".

    02Jun2010: My files use <font> and (fifs "~/Sites/info.lor.html" "<u>")
    Note that "org-mode.el" outputs <U>;
    see	 (fifs "~/Backup/megahtml.html"  "<u>")
   */

/* The <pre></pre> element  can contain all inline elements
  except:  <img>, <object>, <big>, <small>, <sup>, <sub>.
    15Jul2010: Despite the above, I find that `small' works in `pre'
  for FF, iCab, Opera.
    Alternative CSS is: {white-space: pre; font-family: monospace;}
 */

/*** STA: Experimental ***/
CODE {
  font-family:	Monaco,Consolas,'Courier New',Courier,monospace ; /* `Consolas' for MS users */
  font-size:		90%	;
  font-weight:		normal	;
  color:		#3498DB	;
  background-color:	yellow	;
  }


.rtl { /* _Tag <BDO>, bidirectional override, takes a "dir=" _attribute.
       A CSS _selector can take a "direction" _property. */
  unicode-bidi: bidi-override	;
  direction:	rtl		;
  }
/* You can make this hereditary via [the below "*" means "everything"]
      * { unicode-bidi: inherit ;  direction: inherit ; }
 */

/** :05Sep2015 **/

.test {   /*    color: green	 ; (fifs "~/Sites/teaching.html" "class=\"test\"")  */

   /*  #6495ED cornflowerblue */
  /* Worked */
  /*   -webkit-column-break-before: always	;  */
  /* Failed */
  /*
  -webkit-column-break-after:	avoid		;
  break-before:			column		;
             */
  }

.NBB { 			/* No Break Before*/
  /*    -webkit-column-break-before: avoid	; */
  }




/*** END: Experimental ***/


/* 27May2008: Finding images with no (or empty) title or alt.  We turn this on,
	      look at images, then fix, then turn this off. */
/*
img[alt=""] {border: 3px dotted red;}
img[title=""] {outline: 3px dotted purple;}
img:not([alt]) {border: 7px solid yellow;}
img:not([title]) {outline: 5px solid purple;}
   */

A IMG		{ border:		none	; } /* Kill off borders */
IMG.inline	{ vertical-align:	middle	; }
/* 22Dec2009: T.abo kills off IMG borders.  I then removed the BORDER
   part of each	 <IMG ... BORDER="0">  except in ".shtml" files and
   files that don't import "jkall.css".
     WeIrDlY, if the BORDER is set within  <A>...</A>
   then it seems to be ignored.	 This holds for both
   HTML			<A><IMG ... BORDER="3"></A>
   and CSS		<A><IMG ... STYLE="border-width: 4px;"></A>
     Also: The same phenom happens whether  (fifs "jkall.css")
   has			A IMG { border-width:	0px ; }
   or			A IMG { border:		none; }
   */

IMG {
  padding: 0px; margin: 0px;
  }


abbr , acronym , .help {
  border-bottom: 2px dotted #333	;
  cursor:	help			;
  }

/* 27Apr2008: Puts space between LI-entries. */
LI { margin-bottom:	12px		; }


/*** Normal LINKS	  ***/
 /* SERVE: This CSS is for the webpages I SERVE, not view. */
A:link , A:visited { text-decoration:	underline	; }
A:link		{ color:		blue		; }
A:visited	{ color:		purple		; }

A:link:hover, A:visited:hover {
  background:		#FFFF90 /* hover-yellow */	;
  }
A:link:hover   { color: navy				; }
A:visited:hover{ color: #990000				; }

A:link:active, A:visited:active {
  background:		  #FFFF10 /* active-yellow */	;
  }
A:link:active	 { color: green				; }
A:visited:active { color: red				; }


.PrevNext { /* Navigation */
  float: left ;
  font-size:	90%	;
  font-variant: small-caps ;
  }

/*** PRINTING	  ***/
h1, h2, h3, h4, h5 {
  -webkit-column-break-after 	avoid ;
  page-break-after:		avoid ;
  break-after:			avoid ;
  }

table , .GreenEmf , .BlueEmf , .BrownRedEmf , .CornflowerEmf {
 -webkit-column-break-inside:	avoid ; /* Chrome, Safari, Opera */
          page-break-inside:	avoid ; /* Firefox */
               break-inside:	avoid ; /* IE 10+ */
  }
  /*  The following  is too assertive.
  .BrownRedEmf		{ page-break-before: always ; }
    */

 /*  03Dec2006: Note that when printing a page, "noscreen" options are
     invoked.  So search for both "noscreen" and "print" in files
     in directories "Include/" and "CSS/".

 To UNDO t.fol on an individual page or element, adjoin
	.noscreen {display: inline ; }
 or	.noscreen {display: inherit ; }
 or	.noscreen {display: block ; }

 in the appropriate STYLE stanza of the individual page.  The "inline" was
 needed for my "modified-thispage.shtml" inclusion.

 To undue it globally, either delete t.fol, or replace "screen" by, say,
 "aural".  */
@media screen {
  .noscreen {display: none		; }
  }
/* 25Jun2008: T.fol works on FF on MacOS.  I use it on my teaching page. */
@media print {
  .noprint	{display:	none	; }
  .printlarge	{font-size:	145%	; }
  .pagebreakbefore { page-break-before: always; } /* Put this on content, e.g a DIV */
  /* I don't sknow that the does anything */
   body { width: 100%;	margin: 0;	padding: 0; }
   }

/*  T.fol seems to over-riden by the print-dialog on my Mac, in FF, Chrome, and Safari.
@page:left{
  @bottom-left { content: "Page " counter(page) " of " counter(pages); }
  }
 */

LI {
  -webkit-column-break-inside: avoid ; /* Chrome, Safari, Opera */
	    page-break-inside: avoid ; /* Firefox */
		 break-inside: avoid ; /* IE 10+ */
 /* Sunday, 01Jan2017: I had
  display:	inline-block ;
 here, but this removed bullets, numbers.  Instead, if I find one of my pages with a UL that
 needs this, make a special class.
 */
  }



/*** OPTIONAL.	      ***/
/* These are classes that I redefine in individual files */
/*
    .optional {
      font-size:	80%	;
      margin-top:	2pt	;
      }
  */
.hide-optional	.optional { display: none ; }
.show-optional	.optional { display: inline ; }
.enlarge-optional .optional {
  font-size:	110%	;
  margin-top:	2pt	;
  }

.hide-element { display: none	; }
.show-element { display: inline ; }



/*** LISTS	  ***/
/* .lessindent {padding-left:	0.3em; margin-left:	0.3em; } */

.tight {
  /*		Top	Right	Bottom	Left */
  padding:	0	0	0	0	;
  margin: 	7px	0	0	0	;
  }

OL.tight > LI , UL.tight > LI {
  /*		Top	Right	Bottom	Left */
  padding:	0	0	0	0	;
  margin: 	0	0	0	12px	;
  }

.new-topic {
    /*   color:		red ; */
  list-style-position:	outside ;
  list-style-type:	circle	; 
/*    */
  margin-top:	25px		;
  font-size:	110%		;
  }


 DIV > OL , DIV > UL {padding-left: 0.7em ; padding-right: 0px ; }
 DIV > OL , DIV > UL {margin-left:  0.7em ; margin-right:  0px ; }


/*** BLOCKS and BOXES	  ***/
.wordydisplay {	    /* Like my LaTeX "\display". Used on SPAN,
  you can put this inside of a <P></P>	pair. */
    display:		block			;
    margin-left:	20%			;
    margin-right:	20%			;
    /*	   width:	       50% ; */
    margin-top:		0.6em			;
    margin-bottom:	0.6em			;
    }

.jkcite { /* Often used with BLOCKQUOTE */
  border-style: solid				;
  border-color: blue				;
  border-width: 0px	0px	0px	1px	;
  /*		Top	Right	Bottom	Left */
  padding:	0px	0px	0px	9px	;
  margin:	3px				;
  }


  /* T.fol corresponds to verbatim. */
.jkpre , .jkpre2 {
  white-space:	pre				;
  word-spacing: normal				;
  padding-top:	0				;
  margin:	0				;
  }
.jkpre { /* Sometimes used with BrownRedEmf */
  font-family:	monospace			;
  }
.jkpre2 {
  font-family:	inherit				;
  }

.vcenter { /* Box with contents vertically centered.  */
  display:		table-cell		;
  vertical-align:	middle			;
  }

DL.QuesResp { /* 17Jul2010: Question/response. E.g
		<DL class="QuesResp"> <DT>When?</DT><DD>Now!</DD> </DL>
                 DL means "Definition List".
		*/
  font-family:	sans-serif, arial, Verdana	;
     }
DL.QuesResp DT {
  color:	#CD853F ; /* peru, from lightkav */
  font-style:	italic		;
  margin-top:	1.5ex		;
     }
DL.QuesResp DD {
  font-style:	normal		;
  color:	#654321		;
  text-indent:	1em		;
  margin-left:	1em		;
     }
DL.QuesResp DD:first-letter {
  color:	Maroon		;
  font-weight:	bold		;
  font-size:	120%		;
  margin-top :	0.1ex		;
  padding-bottom:  0pt		;
  }


/*** Box shapers, modifiers  ***/
.corner4big, .corner4med, .corner4tiny, .corner3, .corner2 {
  /*		Top	Right	Bottom	Left */
  padding:	2ex	1em	2ex    1em	;
  border-style:		solid			;
  border-width:		2pt			;
  background-color:	white			;
  color:		black			;
  }
.corner4big {
  border-radius: 20pt ; -moz-border-radius: 20pt ;  -webkit-border-radius: 20pt ; }
.corner4med {
  border-radius: 12pt ; -moz-border-radius: 12pt ;  -webkit-border-radius: 12pt ; }
.corner4tiny {
  border-radius:  8pt ; -moz-border-radius:  8pt ;  -webkit-border-radius:  8pt ; }

 /* For elliptical corners: The Gecko engine (Mozilla, FF, Camino) supports
     the shorthand using a "/".	 It seems that Webkit (Safari, iCab, Chrome)
     requires 4 attributes, specifying two values (hor-radius, vert-radius)
     per corner.
   */
 /* Webkit (Safari, etc) does not support putting
    4 values for attribute -webkit-border-radius so I need to specify
    all 4 if I want different values.
   */
.corner3 {	/*	NE   NW	  SE   SW  */
  border-radius:	 0pt 36pt 36pt 36pt	;
 -moz-border-radius:	 0pt 36pt 36pt 36pt	;
  /* The slash in the below line does something special; only works for Mozilla
     -moz-border-radius: 20pt 48pt / 0pt 36pt	; */
  -webkit-border-top-left-radius:	0	;
  -webkit-border-top-right-radius:	36pt	;
  -webkit-border-bottom-right-radius:	36pt	;
  -webkit-border-bottom-left-radius:	36pt	;
  }

.cornerNWSE {
  border-radius: 36pt 0 ; -moz-border-radius: 36pt 0 ;
  -webkit-border-top-left-radius:	 0	;
  -webkit-border-top-right-radius:	36pt	;
  -webkit-border-bottom-right-radius:	 0	;
  -webkit-border-bottom-left-radius:	36pt	;
  }

.cornerNESW {
  border-radius: 36pt 0 ; -moz-border-radius: 36pt 0 ;
  /* -moz-border-radius: 20pt 48pt / 0pt 36pt	; */
  -webkit-border-top-left-radius:	36pt	;
  -webkit-border-top-right-radius:	 0	;
  -webkit-border-bottom-right-radius:	36pt	;
  -webkit-border-bottom-left-radius:	 0	;
  }



.corner2 {
  border-radius: 0 36pt ; -moz-border-radius: 0 36pt ;
  /* -moz-border-radius: 20pt 48pt / 0pt 36pt	; */
  -webkit-border-top-left-radius:	 0	;
  -webkit-border-top-right-radius:	36pt	;
  -webkit-border-bottom-right-radius:	 0	;
  -webkit-border-bottom-left-radius:	36pt	;
  }

.corner1 {	/*	NE   NW	  SE   SW  South-east corner is rounded */
  border-radius:	 0pt  0pt 36pt	0pt	;
  -moz-border-radius:	 0pt  0pt 36pt	0pt	;
  -webkit-border-bottom-right-radius:	36pt	;
  }


/* FinProj : Final project
   CourseAnn : Course announce
  */
.bkgdFloral { background-color: #FFFAF0	; /* floralwhite */ }
.bkgdWhite  { background-color: white	; }


.bordered , .GreenEmf , .BlueEmf , .BlackEmf , .DanceEmf, .BrownRedEmf , .RedEmf , .CornflowerEmf
  , .OLD , .BookEmf , .czars , .FinProj , .CourseAnn {
  display:		block			;
  border-style:		solid			;
  border-width:		3pt			;
  /*		Top	Right	Bottom	Left */
  padding:	2ex	1em	2ex    1.5em	;
  margin:	1.5ex	1pt	1.5ex    2pt	;
  /* 05Dec2006	*/
  max-width:	60em				;
  min-width:	32em				;
  }

.DanceEmf {border-width:	1pt		;
 -webkit-column-break-inside: avoid 	; /* Chrome, Safari, Opera */
          page-break-inside:  avoid 	; /* Firefox */
               break-inside:  avoid 	; /* IE 10+ */
  background-color:	white			;
  border-radius: 8pt ; -moz-border-radius:  8pt ;  -webkit-border-radius:  8pt ;
  /*		Top	Right	Bottom	Left */
  padding:	1pt	0.5em	1ex    1em	;
  margin:	4ex	1pt	8pt    1pt	;
  max-width:	42em				;
  }
.GreenEmf , .BlueEmf , .BlackEmf , .RedEmf , .CornflowerEmf , .FinProj , .CourseAnn {
  background-color:	white   ;
  }
.OLD { border-color:	#990000	;  /* red2 JK-DFT */ }

.CourseAnn ,  .FinProj , .czars {
  border-radius: 12pt ; -moz-border-radius: 12pt ;  -webkit-border-radius: 12pt ;
  }
body.klasse0		.CourseAnn   /* klasse0 is my "generic math-class" */
 , body.klasse0		.FinProj
 , body.klasse0		.czars		{
  border-color:		purple   ;
  }
body.klasse1		.CourseAnn   /* klasse1 is my 1st class of the day */
 , body.klasse1		.FinProj
 , body.klasse1		.czars		{
  border-color:		#90EE90	 ; /* lightgreen */
  }
body.klasse2		.CourseAnn   /* klasse2 is my 2nd class of the day */
 , body.klasse2		.FinProj
 , body.klasse2		.czars		{
  border-color:		#ADD8E6	 ; /* lightblue */
  }
DIV.klasse0 {
  background-color:	purple	 ;
  }
DIV.klasse1 {
  background-color:	#90EE90	 ;
  }
DIV.klasse2 {
  background-color:	#ADD8E6	 ; /* lightblue */
  }
DIV.FinProj  {
  font-family: cursive, 'Comic Sans MS', arial, Verdana, sans-serif ;
  border-style:		double				;
  border-width:		6pt				;
  }
DIV > H3  ,  DIV > H4  ,  DIV > H5 {
  margin-top:  6pt					;
  }
.CourseAnn + .CourseAnn {
  background-color:	#FFFAF0 ;  /* floralwhite */
  }
.CourseAnn + .CourseAnn + .CourseAnn {
  background-color:	#90EE91	;  /* lightgreen ALTERED */
  }
UL.CourseAnn { /*	Top	Right	Bottom	Left */
  padding:		10px	3px	1px	20px		;
  }
DIV.CourseAnn { font-size:	90%	;  }

		/* EMF = Emphasized.  */
.commentary:before , .commentary:after , .commentary  {
  color:	#6495ED ; /* cornflowerblue */
  }
.commentary:before	{content: "[" }
.commentary:after	{content: "]" }
.commentary:before , .commentary:after   {
  font-size:	110%	;
  font-style:	normal	;
  }
.commentary  {
  font-size:	75%	;
  font-style:	italic	;
  font-family:	"Comic Sans MS", cursive	;
  }

.course-recent  .BookEmf
  ,  .course-past  .BookEmf
  , .OLD  .BookEmf  { /* This last is BookEmf inside-of OLD */
  background-color:	white				;
  }

.GreenEmf	{ border-color: green	; }
.BlueEmf	{ border-color: navy	; }
.RedEmf		{ border-color: red ;  /*  */	 }
.BrownRedEmf	{ border-color: #990000 ;  /* red2 JK-DFT */	 }
.CornflowerEmf	{ border-color: #6495ED ;  /* cornflowerblue */	 }

.czars {
  border-style:		double			;
  border-width:		4pt			;
  /*		Top	Right	Bottom	Left */
  padding:	0px	3px	0px	3px	;
  color:		black			;
  background-color:	#FFFAF0 ;  /* floralwhite */
  }
.czars TR {
  text-align:	center				;
  }
.czars TABLE {
  width:		100%			;
  padding:	1px	10px	 1px	 0px	;
  }
.czars TH {
  font-variant:		small-caps		;
  }
.czars TD {
  color:		green			;
  font-style:		italic			; /* italic normal oblique inherit */
  font-family:	'Comic Sans MS', cursive
    , arial, Verdana, sans-serif	;
  }


.TmpEmf {  /* Temporary  emphasis */
  /* color:	#6495ED 		;   cornflowerblue */
  color:	#FF8C00 		; /* Dark Orange */
  font-family:	sans-serif, arial, Verdana	;
  font-size:	110%				;
  font-variant:	small-caps			;
  font-style:	italic				;
  font-weight:	bold				;
  }
.BookEmf { /* Emphasized.  Used in DIV */
  background-color:	#FFFAF0		  /* floralwhite */	;
  border-color:		#6495ED /* cornflowerblue */		;
  border-radius: 20pt ; -moz-border-radius: 20pt ;  -webkit-border-radius: 20pt ;
  }
.BookTitle , .JourTitle {
  color:		#A0522D /* sienna */			;
  }
.BookTitle {  /* Used with span title of book. */
  font-style:		italic					;
  font-size:		110%					;
  }
.JourTitle {  /* Used with span title of a Journal. */
  font-variant:		small-caps				;
  font-style:		normal					;
  font-size:		100%					;
  }
.BookKav {  /* book kavanah.  Used with span  for Author, ISBN */
  color:		#6495ED /* cornflowerblue */		;
  font-family:		sans-serif, arial, Verdana		;
  font-size:		110%					;
  font-variant:		small-caps				;
  font-style:		italic					;
  font-weight:		bold					;
  }
.CallNum {		/* Call-number of a book */
  color:		#6495ED /* cornflowerblue */		;
  white-space:		nowrap					;
  word-spacing:		-0.05em					;
  font-family:		sans-serif, arial, Verdana		;
  font-variant:		normal					;
  font-weight:		normal					;
  }

TABLE { /* 01Jun2010: I want this for schedule-card tables.  Do I want it for all tables? */
  empty-cells: hide ;	/* show */
  }

TABLE.book {  /* book.	Used with TABLE	 for Author, ISBN */
  font-size:		95%					;
  width:		60%					;
  color:		#A0522D /* sienna */			;
  }
TABLE.book  TD:first-child
 , TABLE.book  TD:first-child + TD + TD { /* Book.  Used with TD  for Author, ISBN */
  text-align:		right					;
  color:		#6495ED /* cornflowerblue */		;
  font-family:		sans-serif, arial, Verdana		;
  font-size:		95%					;
  font-variant:		small-caps				;
  font-style:		italic					;
  font-weight:		bold					;
  }

.OLD { /* For an old, yellowed section. */
  background-color:	#FFFFE0 /* lightyellow */		;
  border-style:		dashed					;
  padding:		8pt					;
  margin:		2pt					;
  }

.OLD  .OLD
 , .course-recent  .OLD
 , .course-past    .OLD
  { /* This is an OLD inside of an OLD or similar */
  background-color:	#FAEBD7 /* antiquewhite #FAEBD7 */		;
  border-style:		dotted					;
  }



/* SECTION HEADERS	*/
/*			*/
H1 , H2 , H3 , H4 , H5 , H6 {
  color:		#990000	   /* red2 */			;
  background-color:	transparent				;
  font-family:		sans-serif, cursive, arial, Verdana		;
  font-weight:		normal					;
  font-style:		normal					;
  margin-bottom:	0em					;
  margin-left:		0em					;
  }

.ICON {	     /* If an Hn title is next to an icon. */
  text-align: center						;
  }

H1 { font-size: 220% ; }
H2 { font-size: 180% ; }
H3 { font-size: 150% ; }
H4 { font-size: 140% ; }
H5 { font-size: 120% ;   padding-bottom: 0pt ;}
H6 { font-size: 110% ; }
H2 , H5 {
  font-variant:		small-caps				;
  }
H5,H6 {
  font-family:		Verdana, arial, sans-serif		;
  margin-left:		4em					;
  }


H4 {
}


/*** PARAGRAPHS	  ***/
P {
    -webkit-hyphens:	auto		;
    -moz-hyphens:	auto		;
    hyphens:		auto		;
  }



.eddress , .url , .bandmusic {
  -webkit-hyphens: none ; -moz-hyphens: none ; hyphens: none ;
  }

P {
  text-indent:		0em		;
  margin-top :		0pt		;
  margin-bottom :	0pt		;
  }
P + P  {
  text-indent:		1.5em		;
  margin-top :		2pt		;
  }

P.friendly:first-letter , P.economist:first-letter {
  color:	red			;
  font-weight:	bold			;
  font-size:	200%			;
  float:	left			;
  margin-top :	0pt			;
  padding-top:	0pt			;
  /*   text-indent:	0em ; */
  }

.initial:first-letter {
  color:	red			;
  font-weight:	bold			;
  font-size:	200%			;
  }

P.friendly ,   P.economist:first-line {
  color:	#A0522D /* sienna */	;
  }

 /* P.friendly:first-letter ,  P.friendly:first-line */
 /* Comic, funny */
P.friendly {
  font-family:	'Comic Sans MS', cursive, arial, Verdana, sans-serif	;
  }

.comic {
  font-family:	'Comic Sans MS', cursive, arial, Verdana, sans-serif	;
  color:	#A0522D /* sienna */				;
  font-style:	italic						;
  font-size:	100%						;
  }

.brownSentence {
  font-family:	'Comic Sans MS', cursive, arial, Verdana, sans-serif	;
  color:	#A0522D /* sienna */				;
  }

.ComicNoColor {
  font-family:	'Comic Sans MS', cursive, arial, Verdana, sans-serif	;
  font-style:	italic						;
  }

P.economist:first-line {
  font-family:	arial, Verdana, sans-serif			;
  font-variant: small-caps					;
  font-style:	italic						;
  }



/*** Modifying inline elements	***/
.big110 , .large , .kav4 {font-size:	110%	; }
.big120 {	font-size:	120%	; }
.big130 {	font-size:	130%	; }
.big140 {	font-size:	140%	; }
.big180 {	font-size:	180%	; }
.big220 {	font-size:	220%	; }
.normal100 {	font-size:	100%	; }
.small	{	font-size:	 90%	; }
.tiny	{	font-size:	 80%	; }
.tiny70 {	font-size:	 70%	; }
.tiny60 {	font-size:	 60%	; }
.tiny50 {	font-size:	 50%	; }


.smallcaps , .textsc {
  font-variant:		small-caps				;
  }

.smallcomment {
  font-size:	80%	;
  color:	black	;
  }

.bigkav {  /* size=big kavanah.	 Used with span */
  font-size:		120%				;
  }
.kav4   {  /* Heavy kavanah.  Was heavykav  */
  color:	#990000	 /* red2, For headings */	;
  }
.kav3 {	 /* Medium kavanah.  Was medkav	 */
   color:	#A0522D /* sienna */			;
  }
.lightkav { /* Light kavanah.  Was lightkav  */
  color:	#CD853F /* peru */			;
  }
.gentlekav {  /* Gentle kavanah.  Was gentlekav */
  color:	#6495ED /* cornflowerblue */		;
  font-family:		sans-serif, arial, Verdana	;
  font-size:		90%				;o
  font-style:		italic				;
  }
.kavGr , .kavBl , .kavOr {
  font-weight:	normal					;
  font-family:	'Comic Sans MS', cursive, Verdana	;
  }
.kavGr { /* Green kavanah.  Was called greenkav */
  color:	green					;
  }
.kavGrNofont {
  color:	green					;
  }
.kavBl { /* Blue kavanah.  Was called bluekav */
  color:	blue					;
  }
.kavBlNofont {
  color:	blue					;
  }
.kavOr { /* Orange kavanah. */
  color:	orange					;
  }
.kavRd { /* Red kavanah */
  color:	red					;
  }
.kavItalicRd { /* Red kavanah */
  color:	red					;
  font-style:	italic					;
  }
.kavCy { /* Cyan kavanah; no font change. */
  color:	#6495ED
  }

/* T.fol is for my javascript StatusBar_Report function. */
.StatusNew {
    /*   font-size:	110%					; */
  font-style:	normal					;
  color:	#CD853F /* peru */			;
  /* 
  background-color: lightblue ;h
 */
  }
.StatusOld {
  color:	lightgray				;
  font-style:	italic					;
  background-color: normal ;
  }


.DanceDescr {  /* 17May2016: For the DIV that has the dance-description  */
 -webkit-column-break-inside:	avoid ; /* Chrome, Safari, Opera */
          page-break-inside:	avoid ; /* Firefox */
               break-inside:	avoid ; /* IE 10+ */
 /*   background-color:	orange		; */
  }

.data { /* For the timing-info from recorded music.  Change class name. */
  color:	black	;
  font-size:	70%	;
  font-style:	normal	;
  }

/* ♪  ♫  */

tune { 
  display:	block				;
  /*		Top	Right	Bottom	Left */
  margin: 	0	0	8px	40px	;
  padding:	0	0	0	0	;
  }

tune:before , tune:after { 
  content: 	"♫"				; 
  color:	green				;
  }

tune:before { 
  padding:	0	13px	0	0	;
	    }

tune:after { 
  padding:	0	0	0	15px	;
	    }


.bandmusic { /* For the name of the band. */
  color:	#CD853F /* peru */			;
  font-family:	'Comic Sans MS', cursive, Verdana	;
  font-style:	italic					;
  }
.songtitle {  /* Title, song title  */
  color:	#A0522D /* sienna */		;
  font-family:	cursive, Verdana	;
  font-style:	italic				;
  }
.dancetitle {  /* Title, dance title  */
  color:	#A0522D /* sienna */			;
  font-family:	'Comic Sans MS', cursive, Verdana	;
  font-style:	italic					;
  }
.idx { /* Index of song/dance in a playlist */
    color:	red	;
    font-size:	100%	;
    font-style:	normal	;
  }
.person { /* person  */
  color:	#CD853F /* peru */			;
  font-family:	'Comic Sans MS', cursive, Verdana	;
  font-style:	normal					;
  }
.place {
  color:       #A0522D /* sienna  #CD853F */		;
  font-family:	helvetica				;
  font-style:	italic					;
  }
.engine { /* For naming browser-engines. */
  color:	#A0522D /* sienna */	;
  font-family:	sans-serif, arial, Verdana ;
  font-style:	italic			;
  text-align:	right			;
  }
.brow { /* Browser */
  color:	#990000	 /* red2 */	;
  font-family:	"Gill Sans"		;
  }



/*** JK Webpage TYPES	  ***/
.secret		{ background-color:	#FFFAF0 /* floralwhite */	;
  /* background-image: url(/Ibackgrounds/jkback.secret.gif)	; */
  }
.course-future	{ background-color:	#E0FFFF;  margin: -6pt;  padding: 10pt;}
.course-curr	{ background-color:	white				; }
.course-recent	{ background-color:	#FFFFE0 /* Lightyellow	*/	; }
.course-past	{ background-color:	#FFFACD /* lemonchiffon  */	; }
.articles	{ background-color:	#B0E0E6 /* powderblue	*/	; }
  /* Background colors for my contra pages */
 /* #FFFACD lemonchiffon  */
 /* #FFFAF0 floralwhite	*/
.info0special	{ background-color:	#B0E0E6  ; }
.info1special	{ background-color:	#FFF8C6 /* Pale yellow	*/	; }
.info2special	{ background-color:	#F6DDCC /* Peach	*/	; }
.info3special	{ background-color:	#D6EAF8 /* Light blue	*/	; }
.info4special	{ background-color:	#2FD4C9 /* 21E2D5 05FEED 1FCBCB medium-aqua? */	; }
.info5special	{ background-color:	#EBDEF0 /* Light purple */	; }
.info6special	{ background-color:	#C3FDB8 /* Green-ish	*/	; }
.info7special	{ background-color:	#9FE2BF /* Green-ish	*/	; }
.info8special	{ background-color:	#ECF3A9 /* Bright lime	*/	; }
.info9special	{ background-color:	#FBD6DC /* Reddish	*/	; }



 /* `url' computes relative to where it, the style rule, is located.
  23Aug2015: Apparently not.  It appears the url is computed
  relative to the root of the webserver.  On Pa Apache, it is relative
  to the value of `DocumentRoot', which is now "/Users/squash/Sites".  */
.infodoc { background-image:	url("/Ibackgrounds/jkback.info.gif")	; }
.tiling	 { background-image:	url("/Ibackgrounds/jkback.tiling.gif")	; }


 /* Corresponding H1 TYPES  */
body.course-past H1:before
 , body.course-recent H1:before
 , body.course-curr H1:before {
  content: URL(/Images/jk.course.page.gif)		;
  }
body.course-past  H1
 , body.course-recent H1
 , body.course-curr   H1  {
  font-family:	sans-serif					;
  font-size:	240%						;
  font-weight:	normal						;
  }
body.articles  H1:before  {
  content: URL(/Images/jk.articles.gif)			;
  }


/*** JK COURSE-MATERIAL	  ***/
 /* I use this to  put the course-number   in upper-right of page.
  The color and font (gray and Comic) need to match what is in
    (fifs "~squash/Sites/Include/modified.shtml")
    (fifs "~squash/Sites/Include/thispage.shtml")
  */
DIV.jkcourse {
  text-align:	right						;
  font-size:	80%						;
  font-style:	normal						;
  font-family:	monospace					;
  color:	#990000	   /* red2 */				;
  padding:	0pt						;
  }
DIV.jkcourse:before {
  content:	"Course:  "					;
  color:	gray						;
  font-family:	"Comic Sans MS", cursive, Verdana		;
  }
DIV.jkcourse:after {
  font-style:	italic						;
  content:	"Prof. King"					;
  }


@media screen {		    /*	For the SCREEN, scrunch a bit. */
  div.jkcourse {
    margin-top: -4pt						;
    }
  }


/*** DELIMITER CONSTRUCTS    ***/
 /* 15Jul2010: This is the HTML Q tag, for quote;  search for Q and q.
  An advantage of using <Q></Q> over &ldquo;&rdquo; is that the former
  is style-able.
     Color-wise, I treat certain delimeters such as
		< >	and	& ;
  similarly.  Good color combinations:
	DELIMETER-SYMBOLS	THAT WHICH IS DELIMITED
	gray			DarkSlateGray #2F4F4F
	darkgray		lightSlateGray
   */
.ent , .tgs , .tge , .tg { /* ENTity.  TaG-Start <P>.  TaG-End </P>.  TaG.  Used on SPAN */
  background-color:	transparent	;
  font-family:		Monaco		;
  font-style:		normal		;
  font-size:		80%		;
  }

.ent:before { content: "&" }	.ent:after { content: ";" }
.ent:before , .ent:after { color: #DAA520 ; /* Goldenrod */ }
.ent			 { color: #B8860B ; /* DarkGoldenrod */ }

.tgs:before { content: "⟨"  }	.tgs:after { content: "⟩" }
.tge:before { content: "⟨/" }	.tge:after { content: "⟩" }
.tgs:before , .tgs:after , .tge:before , .tge:after , .tg:before , .tg:after {
  color: #900  /* red2 */	;
  }
.tg:before { content: "⟨"  attr(title) "⟩" }
.tg:after  { content: "⟨/" attr(title) "⟩" }



/* QUOTES */
 Q { color: #2F4F4F /* DarkSlateGray */ ; }   /* The quoted material */
 Q:before , Q:after {
  color:		gray	;
  font-size:		150%	;
  vertical-align:	-10%	; /* text-top is good too. */
  } /* Someday correct font-size and vertical-align for the French|German quotes.
 Using `vertical-align:	 text-top' is acceptable for the magnified English quotes, but
 puts French/German quotes too low.  Note `vertical-align:  text-top' is similar
 to `vertical-align: top', but is better when the quote is embedded in a magnified container.
   */
 /* 23Jul2010: "In-line quotations".  From
   (browse-url "http://members.chello.nl/b.kroonspecker/opera/styles/user/Quotes.css")
   */
Q:before { content: open-quote	; }
Q:after	 { content: close-quote	; }

 /* "Use correct quotes for the parent element's language".  JK: These are apparently Unicode.
  To put the unicode char \201C into an HTML file, use:
    Decimal:	 &#8220;
    Hexidecimal: &#x201C;
  The "x" is telling me that the entity is written in hexidecimal. (In HTML, both
  the decimal and hexidecimal allow a variable	number of "digits".)
    The ways I know to directly put left-double-quote into my HTML file are:
	“	”	Directly type the character; this may need UTF-8 encoding.
	&ldquo;	&rdquo;	Named reference.  This /is/ case-sensitive.

  [or &#x201c; since case-insensitive in HTML, selon Wikipedia].
  */
 Q			     { quotes: '\201C' '\201D' '\2018' '\2019'	; } /* All languages */
:lang(de) > Q, Q[lang|="de"] { quotes: '\00BB' '\00AB' '\2039' '\203A'	; } /* German */
:lang(fr) > Q, Q[lang|="fr"] { quotes: '\00AB' '\00BB'			; } /* French */

Q.huge:before { /* Fanciful */
  font-size:		1700%					;
  vertical-align:	-30%					;
  }
Q.huge:after  {
  font-size:		300%					;
  vertical-align:	 0%					;
  }


/* Used for a phoney url, e.g post to list 9999-L
	Post to <SPAN CLASS="url">math-l</SPAN>
   or for a real URL that, while public, doesn't need the traffic.
   */
.url {
  color:	 #A0522D /* sienna */				 ;
  font-family:	 monospace					 ;
  }
/*  Use t.fol as in:
    <SPAN CLASS="mostlydead" TITLE="http://Pompeii.html">today, 79 AD, our
       city's view of the lovely Mount Vesuvius</SPAN>
  On the webpage, this displays the URL.
    */

.mostlydead { /* text-decoration:  line-through ; */
  user-select:  text                     ;
  color:	#4682B4 /* SteelBlue */ ; /* Faded blue link */
  }
/* 
 */
.mostlydead:after {		/* Was called "urlbroken" and "linkdead". */
  content: " <" attr(TITLE)attr(HREF)attr(SRC) ">" ;
  user-select:  text		;
  color:	gray		;
  font-family:	monospace	;
  font-size:	81%		;
  }
    /* 
    .mostlydead:before {
      content: " <" attr(TITLE)attr(HREF)attr(SRC) ">" ;
      user-select:  text                     ;
      color:	red			;
      font-family:	monospace		;
      font-size:	91%			;
      }
     */



.eddress { /* For an eddress */
 color:		#008B8B /* darkcyan */				;
 font-family:	monospace					;
 }

.sig { /* Signature  */
  font-family:	'Comic Sans MS', 'Zapfino',  cursive, Verdana	;
  font-style:	italic						;
  font-size:	100%						;
  margin:	0pt						;
  }

.attn { /* Attention  */
  font-family:	'Zapfino', 'Comic Sans MS', cursive, Verdana	;
  font-style:	italic						;
  font-size:	110%						;
  margin:	5pt						;
  }


.disabled { /* Indicating an HTML button etc. is disabled. */
  background-color: lightgray !important ;
  color:	gray			;
}


/*** CSS3 on the horizon ***/
.col2 , .col3 , .col4 , .colAdapt {
  text-align: left ;	/* justify */
  }
.col2 {
 /*  -moz-column-width: auto ;	 -webkit-column-width: auto ; */
  column-count: 2 ; -moz-column-count:	  2 ;	-webkit-column-count:	 2 ;
  column-gap: 2em ; -moz-column-gap:	2em ;	-webkit-column-gap:    2em ;
 /*  column-fill: balance ;05Sep2015: Removed, then put back.    */
   /* 05Sep2015: Removed, then put back.    */
  }
.col3 {
  column-count:	  3 ;  -moz-column-count:    3 ;   -webkit-column-count:    3 ;
  column-gap: 1.5em ;  -moz-column-gap:	 1.5em ;   -webkit-column-gap:	1.5em ;
  -moz-column-rule: 2px solid #990000 ; -webkit-column-rule: 2px solid #990000 ; column-rule: 2px solid #990000 ;
  /* #c4c8cc; */
  }
.col4 {
  column-count: 4   ;  -moz-column-count: 4   ; -webkit-column-count: 4	  ;
  column-gap: 0.3em ;  -moz-column-gap: 0.3em ; -webkit-column-gap: 0.3em ;
  -moz-column-rule: 1px solid #990000 ; -webkit-column-rule: 1px solid #990000 ; column-rule: 1px solid #990000 ;
  }
.colAdapt { /* Gecko maxes at 5 cols.  Webkit seems to be unlimited. */
  -moz-column-count: auto ;   -webkit-column-count: auto ;
  -moz-column-width: 12em ;   -webkit-column-width: 12em ;
  -moz-column-gap:    0.3em ;	-webkit-column-gap:    0.3em ;
  -moz-column-rule: 1px solid #990000 ; -webkit-column-rule: 1px solid #990000 ;
  }

/*** Dance CSS.	 Eventually put in separate file ***/
.LftGents:before { 	/* Lines up on Left  <SPAN class="LftGents"></SPAN>	*/
  content: "Gents"		;
 /*
  content: "Larks"	;
  */
  color:	Navy	;
  font-size:	110%	;
  }
.LfGent:before { 	/* Lines up on Left  <SPAN class="LfGent"></SPAN>	*/
  content: "Gent"	;
 /*
  content: "Lark"	;
  */
  color:	Navy	;
  font-size:	110%	;
  }

.RgtLadies:before { 	/* Lines up on Right   <SPAN class="RgtLadies"></SPAN>	*/
  content: "Ladies"		;
 /*
  content: "Robins"	;
  */
  color:	MediumOrchid	;
  }
.RtLady:before { 	/* Lines up on Right   <SPAN class="RtLady"></SPAN>	*/
  content: "Lady"		;
 /*
  content: "Robin"	;
  */
  color:	MediumOrchid	;
  }



.GypseeR:before {
  content: "R-shoulder-round"	;
  color:	brown		;
 /*
  content: "gypsy"		;
  */
  }
.LGypsee:before {
  content: "Left-shoulder-round"	;
  color:	red		;
 /*
  content: "Left-shoulder gypsy"	;
  */
  }
.GypseeStar:before {
  content: "Criss-cross star"	;
  color:	brown		;
 /*
  content: "gypsy-star"	;
  */
  }
.GypseeR:before , .LGypsee:before , .GypseeStar:before {
 /*
  font-style:	italic	;
  font-size:	110%	;
  */
  }

.A1:before, .A2:before, .B1:before, .B2:before, .C1:before, .C2:before, .D1:before, .D2:before {
  font-family:	sans-serif, arial, Verdana	;
  font-style:	italic				;
  }

.A1:before , .B1:before , .C1:before , .D1:before {color: #4169E1 ; /* RoyalBlue */ }
.A1 , .B1 , .C1 , .D1	{color: #006400 ; /* DarkGreen */ }
.A2:before,  .B2:before , .C2:before,  .D2:before {color: #6495ED ; /* cornflowerblue */ }
.A2 , .B2 , .C2 , .D2	{color: SeaGreen ; }

.hold .A1 , .hold .B1 , .hold .C1 , .hold .D1 {color: Gray ; }
.hold .A2 , .hold .B2 , .hold .C2 , .hold .D2 {color: LightGray ; }

.A1:before	{content: "A1: "}
.A2:before	{content: "A2: "}
.B1:before	{content: "B1: "}
.B2:before	{content: "B2: "}
.C1:before	{content: "C1: "}
.C2:before	{content: "C2: "}
.D1:before	{content: "D1: "}
.D2:before	{content: "D2: "}

.A1 , .A2 , .B1 , .B2 , .C1 , .C2 , .D1 , .D2 {
  font-family:	sans-serif, arial, Verdana	;
  font-style:	normal				;
  display : inline	; /* 05Sep2015: Was `inline', then `inline-block', now `inline'.
  `inline' doesn't cause a linebreak when I put Alt- in front, for an
  alternate version of part of the dance.  */
  }

.A1 + BR , .A2 + BR , .B1 + BR , .B2 + BR , .C1 + BR , .C2 + BR , .D1 + BR , .D2 + BR {
  margin-bottom : 7px	;
  }


/*
table.triplet {
  display: inline		;
  color:	#990000		;
  border-style: solid		;
  border-spacing: 0		;
  border-color: brown brown brown red	;
  border-width: 1px			;
  font-size:	90%		;
  margin-right: 2px		;
  vertical-align: super ;
  }
  */

.triplet { 	/* CSS, for triplet dances */
  display:	inline-block		;
  vertical-align: middle		;
  /*		Top	Right	Bottom	Left */
  margin:	0px	0px	2px	0px ;
  padding:	0px	1px	0px	2px ;
  border-color: brown	brown	brown	red ; /* The red shows where the caller+band are. */
  border-width: 1px	1px	1px	2px ;
  border-style: solid			;
  font-size:	80%			;
  font-family:	Monaco,Consolas,'Courier New',Courier,monospace ; /* `Consolas' for MS users */
  letter-spacing: 2px			;
  line-height:	1.0			;
  color:	#990000			;
  background-color: #FFFAF0 /* floralwhite */	;
	}


.HtmlSqur {		/* HTML Square, for square-dances */
  display:	inline-block		;
  vertical-align: middle		;
  /*		Top	Right	Bottom	Left */
  margin:	0px	0px	2px	0px ;
  padding:	1px	1px	2px	2px ;
  border-color: brown	brown	orange	brown ; /* The red shows where the caller+band are. */
  border-width: 1px	1px	2px	1px ;
  border-style: solid			;
  font-size:	80%			;
  font-family:	Monaco,Consolas,'Courier New',Courier,monospace ; /* `Consolas' for MS users */
  letter-spacing: 2px			;
  line-height:	1.0			;
  color:	#990000			;
  background-color: #FFFAF0 /* floralwhite */	;
	}


/* Javascript | dynamic HTML stuff */
.InputNicer {
  color:		blue	;
  background-color:	lightblue	;
  font-size:		12px	;
  width:		30px	;
  padding:		0	;
  margin:		0	;
  }
.ButtonNicer {
  color:		red	;
  background-color:	yellow	;
  margin:		0	;
  margin-top:		4px	;
  padding:		1px	;
  border-radius:  8px ; -moz-border-radius:  8px ;  -webkit-border-radius:  8px ;
  outline:		none	;
  }


/***** END: "jkall.css" *****/