/* N.B. <TABLE> seems to have color:black; as a default, so text color is not
inherited by a <table>.  But can't find where this is done or documented.
*/

/*
<LINK rel="stylesheet" type="text/css" href="/~steve/php/css/css1" >
*/

/*
To cancel ALIGN and text flowing around/beside Images, use:
<BR style="clear: both;"> <qBR>
*/

/* <UL class="sp hairline"> */   /* <table class=hairline> */
.hairline { border: 1px solid lightGray; }
.hairlineul > li { border: 1px solid lightGray; }
.hairline2 { background-color: lightGray; }

/* substitute/better than <BIG> tag */
.reallybig, span.reallybig { font-size:130%;   text-decoration:underline;  }
.reallysmall { Qcolor:#c9c; font-size:60%;  font-weight: normal;  }

.mysmall { font-size:80%;  font-style: italic; }
.small { font-size:80%;  Qfont-style: italic; }
li.mysmall, span.mysmall { font-size:80%;  font-style: italic; }
li.mysmall a:visited {color:#c9c;}
li.mysmall a:link {color:#99f;}

/* I need a style/CSS approach to headings (esp. <H1>) where part of the header
is styled differently.  */
/* 80% looks right in normal text.  60% in H1.  ? in H3 */
/* 3 issues: size; bold/not;  (also underline, italics);  and spacing. */
.header1small {  font-weight:normal; font-size:60%;}
.headersmall {  font-weight:normal; font-size:80%;}

/* Headercont is for normal text on same line as header.
	Almost like a subheading / subtitle for an essay */
.headercont {  font-weight:normal; font-size:medium;}
.headercont::before { content:"\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 "; }


/* I need a style/CSS approach to headings (esp. <H1>) where part of the header
is styled differently. 
May also be what is wanted for having # anchor in small print beside larger print.
Eg1: apr.html
	<H1>Assessment by pairwise ranking
		<span style=" font-size:60%;">(a.k.a. "ACJ")</span></H1>

Eg2: mhealth.html
	<H3 id=petr>Petr Slovak: Protective factor boosting, ...
		<span class=anchor>&nbsp; <A href="#petr">#petr</A></span></H3>
	Below anchor is defined as:
		.anchor { font-style:italic;  font-weight:normal; font-size:70%; }
		h1 > span.anchor {  font-size:40%;  }
This is specially coded for this case of anchor tags marking a header.
*/

/* N.B. To change how a URL-link's text is styled, don't use <span> but change
the style of the link (<A>).  Changing its font (color) changes also :visited
etc.  Can cancel its ul and bold there too.  */

/* Indented both margins.  For quotes? */
	/* DIV comes with BR, but not P, before and after.  */
/* <DIV class="indent nogap">  use nogap to leave no blankline above the div */
/* line-height: 150%;  Line spacing 1.5. */
div.indent { font-size:90%;  Qfont-style: italic; 
	border: 0px solid green;
	width: 80%; margin: 0 auto;
		/* margin-left: +3em; margin-right: +3em; margin: auto +3em; */
	}
div.indent.nogap { margin-top: -1em; }

Qdiv.small { font-size:80%;  margin-left: +3em; color: #990; }
	/* This is for small font comments under / adj. to normal font */
	/* It has small font;  indent rightwards;  olive colour. */

/*  ROTATE PIC */
/* .rotate?? are about an animation that onhover, makes a pic (say) rotate */
	/* Each one has parts defined in 1-3 places */
.imgspan {
	overflow:hidden; width:60px; height:70px;
	border-radius: 50%;
	border: 3px solid orange; 
	Qfloat:left;   Qmargin-right: 1em; /* Do these inline, in the HTML */
}

.rotate1, .rotate9, .rotate8, .rotate3, .rotate2 { border-color: red; }
.rotate1:hover,
.rotate2:hover,
.rotate3:hover,
.rotate8:hover,
.rotate9:hover
	{ border-color: green;    Qopacity:0.5; }

.rotate1, .rotate9, .rotate8, .rotate2, .rotate3 {
    -webkit-transition-duration: 1.1s;
    -moz-transition-duration: 1.1s;
    -o-transition-duration: 1.1s;
    transition-duration: 1.1s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

/* Define amount /number of rotation (to fit into the overall time) */

.rotate1:hover {
    -webkit-transform:rotate(360deg); /* this one for safari */
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg); 
}
.rotate2:hover { /* 2 revolutions */
	-webkit-transition-property: -webkit-transform;
	-Qwebkit-transition-duration: 1s;
    /*-webkit-transform:Qrotate(360deg); */
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.1s; 
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-countL: 2;
}
.rotate3:hover { /* 3 revolutions */  /* Now works */
    -webkit-transform:rotate(1080deg); /* this one for safari */
}
.rotate8:hover { /* 8 revolutions */
    -webkit-transform:rotate(360deg); /* this one for safari */
    -webkit-animation-iteration-count: 8;  /*infinite; */
}
.rotate9:hover { /* 10 revolutions */
    -webkit-transform:rotate(3600deg); /* this one for safari */
    -moz-transform:rotate(3600deg);
    -o-transform:rotate(3600deg);
    Qtransform:rotate(3600deg); 
}

/*  ANIMATION 
https://css-tricks.com/snippets/css/keyframe-animation-syntax/

keyframes: specs the code for the changing styles: the start and stop cases.
	45% specs a stage 45% of the way from start to finish.
A spec of just one frame at 70% has effect of short period of special color;
	longer period at default or perm. color.
animation: blinkertgt4 0.5s steps(1) 0s 3 normal;  Obviously a bundled prop.

animation-name: blinkertgt4;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-iteration-count: infinite; (or 3)
animation-direction: reverse;

My accompanying class e.g. ".blink2" calls the keyframes; and perhaps
permanently changes something about the object's style.

I.E. HERE MY USAGE IS:  class .blink3 --> animation: vals; --> keyframes: val;
*/

.Qblink1 { background: #FFFFC0;
	  -webkit-animation: blinker1 0.5s linear 0s 3 normal; 
}
@-webkit-keyframes blinker1 {
	from {background: #FFFF50;}  /* pale yellow */
	50% {background: #FF5555;}  /* pale red */
	to {background: #FFFF50;}
}

.Qblink2 {
	background: yellow;
	-webkit-animation: blinker2 0.5s linear 0s 5 normal; 
}
@-webkit-keyframes blinker2 { to {background: red;} }

.Qblink3 {
	background: #CCCCCC; /* light gray */
	-webkit-animation: blinker3 0.5s linear 0s 3 normal; 
}
@-webkit-keyframes blinker3 {
	from {color: black; Qbackground: white;}
	50% {color: white; Qbackground: lightgray;}
	to {color: black; Qbackground: white;}
	/* Attempt at inverse-video effect */
}
.Qblink4 {
	background-color: #FFC;
	-webkit-animation: blinker4 0.5s steps(1) 0s 3 normal; 
}

/* Three blinkers for use with targets; differ in tmp. color shown */
/* All blink on/off 3 times with red; ends with static value yellow */
				/* These colors just temp. used. */ 
@-webkit-keyframes blinkertgt33 { 70% {background-color: #ddd;} }
@-webkit-keyframes blinkertgt3 { 70% {background-color: #F55;} }
@-webkit-keyframes blinkertgt4 { 70% {background-color: #888;} }
@-webkit-keyframes blinkertgt5 { 70% {background-color: #F55;} } /* pale red. */ 

/* This is to zero out any prior settings, so main definitions just say
							what they change. */ 
.targ0 :target, .blink0,
.targ1 :target, .blink1,
.targ2 :target, .blink2,
.targ3 :target, .blink3,
.targ33 :target, .blink33,
.targ333 :target, .blink333,
.targ4 :target, .blink4,
.targ5 :target, .blink5   	/* must NOT be comma on last this last line */
{   /* Steady defaults. To clear any settings elsewhere.  */
	background-color: inherit;
	-webkit-animation: initial;
	/*-webkit-animation: x; Also works to zero it because first property
		should be a name [blinkertgt3] */
}

.targ1 :target, .blink1 { background-color: #FFF; } /* steady white */
.targ2 :target, .blink2 { background-color: #FFC; } /* steady yellow */
.targ33 :target, .blink33 { 		/* flashing pale gray; perm initial */
	-webkit-animation: blinkertgt33 0.5s steps(1) 0s 1 normal; 
}
.targ333 :target, .blink333 { /* flashing pale gray; perm initial */
	-webkit-animation: blinkertgt33 0.5s steps(1) 0s 3 normal; 
}
.targ3 :target, .blink3 { /* flashing red  */
	-webkit-animation: blinkertgt3 0.5s steps(1) 0s 3 normal; 
}
.targ4 :target, .blink4 { /* flashing, perm. yellow */
	background-color: #FFC;
	-webkit-animation: blinkertgt4 0.5s steps(1) 0s 3 normal; 
}
/* This is default for target.  To disable as default, del. 1st line.  */
:target,
.targ5 :target, .blink5 {  /* flashing red / perm. yellow */
	background-color: #FFC;
	-webkit-animation: blinkertgt5 0.5s steps(1) 0s 3 normal; 
}

/* TARGETS use.
	Main use is to set a default for all (scroll-to) targets, when animation
	is run once when a scroll-to target is done.
	And by setting a .targN class to a doc/BODY / part of a doc,
		then get the effect only there.

	But if the class is def. (as it is now for .target5) for unconditional
	application, then any time that object with the class is redrawn, it
	will have the animation applied; including when page first opened/reloaded.
	How-to:
	Leave default as is.
	In doc concerned, set BODY - .target0 to override all :target use
		in that doc generally.
	And set .target4 (say) in part of it (a DIV), to reinstall some use
		of :target in that style.
	But this doesn't let me use .target on, say, repainting events or
	onclick.
	doc.
*/


/* Better MOTTO */
/* Doesn't suffer from being expanded to 100% width.
	Does get DIV property of having a <P> in effect before and after.  */

div.bettermotto {
	display: inline-block;  font-size:120%;
        border: 3px solid green;   padding: 1em;   border-radius:25px;
}

/* Example use of MOTTO:
<DIV class=bettermotto>
	<B>Bold title text</B>: &nbsp;
	<A href="link to pdfDoc"  target="new">Descrip</A>
</DIV><P>
*/



/* General common properties for .mottos */
div.motto, div.motto1, div.motto2, div.mottoPanel { 
	border: 5px double gray;    width:58%;
	margin-top: 1em;  /* Space (LF) above, but not below. */
	margin-left: auto; margin-right:auto;    font-size:110%;
	text-align: center;
	border-radius:1em;
		qbox-shadow: 1px 1px 1px 1px black;
	padding: 13px;
}

div.motto::before, div.mottotitle::before
{	content:"Slogan";
	text-decoration:underline;   font-weight: bold;
	display:block; /* does <BR> afterwards, in effect */
	margin-bottom: 1em; /* makes that <P> */
}
/* <DIV class='motto ' Qstyle="background-color:inherit;" > */
/* <DIV class='motto2' style='border-color: green;'>  */
div.motto, div.motto1 { background-color: #ffd; }
div.motto2 {border: 2px solid gray;    width:80%; } /* and not title */
div.mottobg { background-color: #dfd; }
div.mottoPanel { text-align: left;   width:90%; }
/*  TYPES OF MOTTO CLASS
	motto: for simple motto, just give the text and it adds "Slogan"
	(motto1: Not used: same as motto)
	motto2: Give text, and a header using e.g. "<h4>Slogan</h4>".  Wider.
	mottobg: motto plus a different bg colour.
	mottoPanel: Panel is for, not a single phrase,
		but a block e.g. summary made prominent over rest of document. 
	e.g. <DIV class='motto2 mottobg'>
*/


div.motto3, span.motto3 {border: 1px solid blue;    font-size:"110%;" }

div.motto h1,   div.motto h2,   div.motto h3,   div.motto h4,
div.motto1 h1,   div.motto1 h2,   div.motto1 h3,   div.motto1 h4
	{qcolor: blue;
	qfont-size: 99%;   /* size same as surroundings */
	text-align: center;  text-decoration:underline;   font-weight: bold;
	margin-left:auto;  margin-right:auto; 
	margin-bottom: 1em;   margin-top: 0em;
}

/* ---- */
span.bigcap { font-size:140%;   color: red; }
.mypre { white-space: pre-wrap; qcolor:red;} 
	/* class for DIV a bit like <PRE> for using LFs to break lines */

.plainbox {
	Qbackground-color: LightGreen;  Qmargin: 3em;  Qborder-radius:25px; 
	padding: 1em;
	width: 95%;   margin-left: auto; margin-right:auto;
	border: 1px solid green;   
}
div.box {
	background-color: LightGreen; qmargin: 3em; padding: 1em;
	width: 80%;   margin-left: auto; margin-right:auto;
	border: 1px solid gray;    border-radius:25px; 
	qfont-size:100%; 
}

ul.none > li, ol.none > li { qcolor: green;  margin-top: 1em; margin-bottom: 1em; }
ul.none {list-style-type: none; padding:0; qmargin:0; }
	/* to give me the use of lists using <BR> by using LI (can then add
		color or other changes just to <LI style= ... ) */

/* classes named for Border colors, to be handy. */
.border-red { border: 1px solid red;  }
.bordergreen { border: 1px solid green;  }
.border-green { border: 1px solid green;  }
.border-blue { border: 1px solid blue;  }
.border-orange { border: 1px solid orange;  }
.border-yellow { border: 1px solid yellow;  }
.border-gray { border: 1px solid gray;  }
.border-purple { border: 1px solid purple;  }
.border-pink { border: 1px solid pink;  }

/* classes named for background colors, to be handy. */
.BGpink { background-color: #ffe9e9; }
.BGyellow { background-color: #ffffc0; }
.BGblue { background-color: #b0d0ff; }
.BGmauve { background-color: #e9e9ff; }
.BGgreen { background-color: #e9ffe9; }
.BGgray { background-color: lightGray }

/* classes named for font colors, to be handy. */
.blue { color: blue; }
.pink {color:#f69; } 
.red, .dullred { color: firebrick; } /* dull red */
.brightred { color: red; } /* pillar box red */
.green { color: green; }
.gray { color: gray; }
.purple { color: purple; }

.right { text-align: right; }
.italic, .em { font-style: italic; }
.bold { font-weight: bold; }    .unbold { font-weight: normal; }
.ul {  text-decoration:underline; }
.ub { font-weight: bold;  text-decoration:underline; }


/* the following is temporarily disabled while I sort out tables */
* {  qborder: 0 solid black; } 
	/* give a border style and color as default because some things won't work without them */

input {border: 1px solid black; border-radius:25px;  background-color: white;}
	/* put buttons' style back */


span.bigli li {qcolor: red; margin-bottom: 1em;}
/* surround OL/all the LIs with a <SPAN class='bigli'> */

ul, ol { margin-top: 0; qcolor: red;}
p + ul {margin-top: -1em; qcolor: green;}
p + ol {margin-top: -1em; qcolor: yellow;}
li > ul {margin-top: 0; qcolor: blue;}
li > ol {margin-top: 0; qcolor: blue;}

/* Cancel indents in bullet lists: obey page left margin */
	.lm { Qmargin-left: 5em; }
.lm { padding-left: 1.2em; } 
	/* .lm { padding-left: 0; } /* gets rid of bullets too. */

.nogap { margin-top: -1em; }
ul.nogap, ol.nogap, li.nogap { margin-top: -1em; }
/* OR: <UL style="margin-top: -1em;">    local fix */

/* Lists with an LF (<P>) between each point. */
ul.sp, ol.sp { qcolor: green;  margin-top: auto; margin-bottom: auto; }
ul.sp > li, ol.sp > li { qcolor: green;  margin-top: 1em; margin-bottom: 1em; }

/* Lists with square brackets [3] as the bullet. */
ol.square { counter-reset: o-counter 0; list-style-type: none; }
ol.square li { text-indent: -1.3em;  }
ol.square li:before {
  content: '[' counter(o-counter) '] ';
  counter-increment: o-counter;
}

/* trying to get text to justify both margins
div.justify p:after { content: ""; display: inline-block; width: 100%; }
*/


/* My bad habit of having some <LI> not inside <UL> means the last rules can
be triggered when I don't want, because the LI never ends.  Unless for them I
do </LI>
*/

/*
Order matters here.
	It's the last one that matches that fires
p + ul,ol {margin-top: -1em; color: brown;} bad syntax
*/

h1,h2 { margin-left:auto;  margin-right:auto; } /* centered */
h2,h3,h4,table,form {margin-bottom: 0; }


li > .clear { margin-top: -1em; }
.clear { clear: both; Qborder: 1px solid green; }
.clear:before, 
.clear:after { Qvisibility: hidden; display: table; content: " "; }
.clear:after { clear: both; }

.picbind:after { clear: both; }


hr {border: 1px solid gray; background-color: gray; clear: both; }
hr.green {border: 1px solid green; background-color: green; clear: both; }
/* will stop wrap of text round IMGs.  But may want to put in a <P> with this
	anyway.*/
/* would allow old HTML4  w/o css <HR size?=1..8 width:90%> to work.  */

hr.faint {border: 1px dotted #aaa;
	  border-style: dotted none;
	  background-color:inherit;    Qwidth: 100% }
/* But if dotted/dashed, need to set background-color not to same as border,
	but to "inherit". */
/* Perhaps need fix to get 100% width of page inside lists */


/* <LINK rel="stylesheet" type="text/css" href="/~steve/php/css/css1" /> */
/* fixes unwanted blank line before first <LI>s */
/* fixes unwanted blank line after titles */

/*
*{border: 0px solid gray;}
	would be good BUT prevents old HTML syntax e.g. <TABLE border=2>
*/

p.indent { text-indent: 3em; margin-top: 0em; }
	/* does indent instead of blank line to denote new para */

/* must be after styles for <A> ?  Anyway, doesn't work at top of this file. */
/* Mite use it as, (with tag-id "cmcc"):
	<span class=anchor>&nbsp; <A id=cmcc href="#cmcc">#cmcc</A></span>  
	<H3 id=petr>Petr Slovak: Protective factor boosting, ...
	<span class=anchor>&nbsp; <A href="#petr">#petr</A></span></H3>
*/
.anchor { font-style:italic;  font-weight:normal; font-size:70%; }
h1 > span.anchor {  font-size:40%;  }
/*
span.anchor > a:visited, a:link, a:hover, a:active { color:pink;  }
span.anchor >  a:hover, a:active { color:yellow;  }
*/

/* Need not only css1 include, but also jscript include:
<SCRIPT type="text/javascript" src="/~steve/php/java/model.js"></SCRIPT>
*/

/* HYPHENS new feature */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;