/* N.B. seems to have color:black; as a default, so text color is not inherited by a
. But can't find where this is done or documented. */ /* */ /* To cancel ALIGN and text flowing around/beside Images, use:
*/ /*
*/ .hairline { border: 1px solid lightGray; } .hairlineul > li { border: 1px solid lightGray; } .hairline2 { background-color: lightGray; } /* substitute/better than 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.

) 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.

) 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

Assessment by pairwise ranking (a.k.a. "ACJ")

Eg2: mhealth.html

Petr Slovak: Protective factor boosting, ...   #petr

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 but change the style of the link (). 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. */ /*
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

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:

*/ /* 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
afterwards, in effect */ margin-bottom: 1em; /* makes that

*/ } /*

*/ /*
*/ 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. "

Slogan

". 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.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; font-size:140%; } /* class for DIV a bit like
 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 
by using LI (can then add color or other changes just to
  • */ 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:
      local fix */ /* Lists with an LF (

      ) 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

    • not inside
        means the last rules can be triggered when I don't want, because the LI never ends. Unless for them I do */ /* 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

        with this anyway.*/ /* would allow old HTML4 w/o css


        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 */ /* */ /* fixes unwanted blank line before first
      • s */ /* fixes unwanted blank line after titles */ /* *{border: 0px solid gray;} would be good BUT prevents old HTML syntax e.g.
  • */ p.indent { text-indent: 3em; margin-top: 0em; } /* does indent instead of blank line to denote new para */ /* must be after styles for ? Anyway, doesn't work at top of this file. */ /* Mite use it as, (with tag-id "cmcc"):   #cmcc

    Petr Slovak: Protective factor boosting, ...   #petr

    */ .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: */ /* HYPHENS new feature */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;