h3     {margin:18px 0 12px}
h3:before {position:relative;top:2px;content:'\2022';margin:0 4px;font-size:1.4em;line-height:0}
h2 span {font-size:.7em!important}
h3 span {font-size:.9em}

div.ye {margin-bottom:4px;text-align:center}
div.ye div {display:inline-block;margin:0 auto;padding:2px 5px;whi_te-space:nowrap;background-color:#FFFF00}
div.ye div span {color:#A0A0A0}





/* hide/show sections */
.hi1,.hi2,.hi3,.hi4,.hi5,.hi6,
.sh1,.sh2,.sh3,.sh4,.sh5,.sh6,.sh7,.sh8,
.co1,.co2,.co3,.co4,.co5,.co6 {display:none}  /* hide checkbox */
.hi1a,.hi2a,.hi3a,.hi4a,.hi5a,.hi6a,
.sh1a,.sh2a,.sh3a,.sh4a,.sh5a,.sh6a,.sh7a,.sh8a,
.co1a,.co2a,.co3a,.co4a,.co5a,.co6a {cursor:pointer}  /* cursor for label */
.hi1a span,.hi2a span,.hi3a span,.hi4a span,.hi5a span,.hi6a span,
.sh1a span,.sh2a span,.sh3a span,.sh4a span,.sh5a span,.sh6a span,.sh7a span,.sh8a span {position:relative;top:-1px;font-size:.9em;fon_t-size:.9rem;font-weight:normal;font-style:italic;color:#A0A0A0}  /* hide/show span text in heading */
.hi1 ~ .hi1a div,.hi2 ~ .hi2a div,.hi3 ~ .hi3a div,.hi4 ~ .hi4a div,.hi5 ~ .hi5a div,.hi6 ~ .hi6a div,
.sh1 ~ .sh1a div,.sh2 ~ .sh2a div,.sh3 ~ .sh3a div,.sh4 ~ .sh4a div,.sh5 ~ .sh5a div,.sh6 ~ .sh6a div,.sh7 ~ .sh7a div,.sh8 ~ .sh8a div {display:inline}

/* show/hide text button */
.co1a div,.co2a div,.co3a div,.co4a div,.co5a div,.co6a div {position:absolute;top:-20px;right:0;padding:4px;min-width:40px;font-size:.65em;fon_t-size:.65rem;text-align:center;color:#808080;background-image:url(imgs/overlay.png);background-repeat:repeat-x;background-position:0 -70px}
.co1a div,.co2a div,.co3a div,.co4a div,.co5a div,.co6a div {background-color:#FFC0C0}  /* button initially red */
.co1a div:last-child,.co2a div:last-child,.co3a div:last-child,.co4a div:last-child,.co5a div:last-child,.co6a div:last-child {background-color:#40FF40}  /* pressed button green */
.co1a div:last-child span,.co2a div:last-child span,.co3a div:last-child span,.co4a div:last-child span,.co5a div:last-child span,.co6a div:last-child span {position:relative;top:1px}  /* drop button text when pressed */
.co1:checked ~ .co1a div:first-child,
.co2:checked ~ .co2a div:first-child,
.co3:checked ~ .co3a div:first-child,
.co4:checked ~ .co4a div:first-child,
.co5:checked ~ .co5a div:first-child,
.co6:checked ~ .co6a div:first-child,
.co1:not(checked) ~ .co1a div:last-child,
.co2:not(checked) ~ .co2a div:last-child,
.co3:not(checked) ~ .co3a div:last-child,
.co4:not(checked) ~ .co4a div:last-child,
.co5:not(checked) ~ .co5a div:last-child,
.co6:not(checked) ~ .co6a div:last-child {display:none}
.co1:checked ~ .co1a div:last-child,
.co2:checked ~ .co2a div:last-child,
.co3:checked ~ .co3a div:last-child,
.co4:checked ~ .co4a div:last-child,
.co5:checked ~ .co5a div:last-child,
.co6:checked ~ .co6a div:last-child {display:block}
.hi1b,.hi2b,.hi3b,.hi4b,.hi5b,.hi6b,
.sh1b,.sh2b,.sh3b,.sh4b,.sh5b,.sh6b,.sh7b,.sh8b {position:relative}

.rp {padding-right:50px}  /* set right padding so button doesn't overlap */

/* hide visible sections */
.hi1:not(checked) ~ .hi1a span,
.hi2:not(checked) ~ .hi2a span,
.hi3:not(checked) ~ .hi3a span,
.hi4:not(checked) ~ .hi4a span,
.hi5:not(checked) ~ .hi5a span,
.hi6:not(checked) ~ .hi6a span,
.hi1:checked ~ .hi1b,
.hi2:checked ~ .hi2b,
.hi3:checked ~ .hi3b,
.hi4:checked ~ .hi4b,
.hi5:checked ~ .hi5b,
.hi6:checked ~ .hi6b {display:none}
.hi1:checked ~ .hi1a span,
.hi2:checked ~ .hi2a span,
.hi3:checked ~ .hi3a span,
.hi4:checked ~ .hi4a span,
.hi5:checked ~ .hi5a span,
.hi6:checked ~ .hi6a span {display:inline}

/* show hidden sections */
.sh1:checked ~ .sh1a span,
.sh2:checked ~ .sh2a span,
.sh3:checked ~ .sh3a span,
.sh4:checked ~ .sh4a span,
.sh5:checked ~ .sh5a span,
.sh6:checked ~ .sh6a span,
.sh7:checked ~ .sh7a span,
.sh8:checked ~ .sh8a span,
.sh1:not(checked) ~ .sh1b,
.sh2:not(checked) ~ .sh2b,
.sh3:not(checked) ~ .sh3b,
.sh4:not(checked) ~ .sh4b,
.sh5:not(checked) ~ .sh5b,
.sh6:not(checked) ~ .sh6b,
.sh7:not(checked) ~ .sh7b,
.sh8:not(checked) ~ .sh8b {display:none}
.sh1:checked ~ .sh1b,
.sh2:checked ~ .sh2b,
.sh3:checked ~ .sh3b,
.sh4:checked ~ .sh4b,
.sh5:checked ~ .sh5b,
.sh6:checked ~ .sh6b,
.sh7:checked ~ .sh7b,
.sh8:checked ~ .sh8b {display:inline}

.co1a,.co2a,.co3a {position:relative;display:block}
.co1a div,.co2a div,.co3a div {top:0}
/* hide visible sections */
.co1:checked ~ .co1b #tt tr:nth-child(even) td,
.co2:checked ~ .co2b #tt tr:nth-child(even) td,
.co3:checked ~ .co3b #tt tr:nth-child(even) td {padding-bottom:5px}
.co1:checked ~ .co1b #tt tr:nth-child(odd) td,
.co2:checked ~ .co2b #tt tr:nth-child(odd) td,
.co3:checked ~ .co3b #tt tr:nth-child(odd) td {display:none}


.sh8a b {font-weight:normal}



/* algorithms */
span.RH,span.LH,span.Rh,span.Lh,.al {font-family:monospace}
span.RH,span.LH,span.Rh,span.Lh {text-decoration:underline}
span.Rh span,span.Lh span,.al span,.rs {letter-spacing:-.15em}
span.RH {color:#C00000}
span.LH {color:#0000C0}
span.Rh {color:#18A818}
span.Lh {color:#C0C000}
.al,.bi {font-size:1.2em}

/* tables */
#rh  {margin:0 auto}
#rh.wp  {width:80%}
#rh th {padding:0 5px;color:#104050;font-size:1.4em}
#rh th:nth-child(odd) img {width:80px}
#rh th:nth-child(even) img {width:16px}

#ra  {margin:0 auto;font-size:1.4em}
#ra th,#ra td  {padding:0 5px}
#ra th,
#ra td {out_line:1px dotted #FF0000}
#ra th {text-align:left;white-space:nowrap}
#ra th:nth-child(2),
#ra th:nth-child(3) {font-size:.8em;font-weight:normal}
#ra td:nth-child(1) {text-align:right;white-space:nowrap}
#ra tr:nth-child(2) td:nth-child(1) {color:#000000}
#ra td:nth-child(2),
#ra td:nth-child(9) {width:2vw}
#ra tr:nth-child(2) td:nth-child(1),
#ra tr:nth-child(2) td:nth-child(2),
#ra tr:nth-child(2) td:nth-child(3),
#ra tr:nth-child(2) td:nth-child(4),
#ra tr:nth-child(2) td:nth-child(5),
#ra tr:nth-child(2) td:nth-child(6),
#ra tr:nth-child(2) td:nth-child(7),
#ra tr:nth-child(2) td:nth-child(8) {background-color:#FFFFFF}
#ra th:nth-child(2),
#ra th:nth-child(3),
#ra tr:nth-child(2) td:nth-child(11),
#ra tr:nth-child(2) td:nth-child(12),
#ra tr:nth-child(2) td:nth-child(13),
#ra tr:nth-child(2) td:nth-child(14),
#ra tr:nth-child(2) td:nth-child(15),
#ra tr:nth-child(3) td {color:#A0A0A0}
#ra tr:nth-child(2) td {border-top-width:2px;border-top-style:solid;border-top-color:#B0B0B0}
#ra tr td:last-child {border-right-width:2px;border-right-style:solid;border-right-color:#B0B0B0}
#ra tr:last-child td {border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#B0B0B0}
#ra td:nth-child(1) {border-left-width:2px;border-left-style:solid;border-left-color:#B0B0B0}

#rt th,
#rt td {out_line:1px solid #FF0000}
#rt   {margin:0 auto 8px}
#rt th:nth-child(3) {color:#B0B0B0;border-right-width:1px;border-right-style:solid;border-right-color:#B0B0B0}
#rt th:nth-child(4) {padding-left:3px;color:#B0B0B0;text-align:left}
#rt th:nth-child(4) span {font-weight:normal}
#rt td {padding:3px;vertical-align:top}
#rt tr:nth-child(even) td,
#rx tr:nth-child(1) td,
#rx tr:nth-child(4) td,
#rx tr:nth-child(7) td,
#rx tr:nth-child(10) td,
#rx tr:nth-child(13) td,
#rx tr:nth-child(16) td {border-top-width:1px;border-top-style:solid;border-top-color:#B0B0B0;height:1px}
#rt tr:nth-child(even) td:nth-child(1),
#rt tr:nth-child(even) td:nth-child(2) {padding-right:0;padding-left:0;font-size:1.2em}
#rt tr:nth-child(even) td:nth-child(1) {color:#B0B0B0}
#rt tr:nth-child(even) td:nth-child(2) {color:#104050;font-weight:bold;text-align:center}
#rt tr:nth-child(even) td:nth-child(3) {color:#B0B0B0;font-size:.8em;text-align:center;border-right-width:1px;border-right-style:solid;border-right-color:#B0B0B0}
#rt img {width:60px}
#rt tr:nth-child(even) td:nth-child(4),
#rt tr:nth-child(even) td:nth-child(5) {color:#000000;font-family:monospace;font-size:1.5em;white-space:nowrap}
#rt tr:nth-child(even) td:nth-child(5) {padding-left:50px}
#rt tr:nth-child(odd) td:nth-child(1) {color:#808080;font-size:.85em}
#rt tr:nth-child(odd) td:nth-child(1) span.ti {display:block;padding-left:25px;text-indent:-25px}
#rt tr:nth-child(odd) td:nth-child(2) {vertical-align:middle}
#rt tr:last-child td:nth-child(1) span.ti {padding-left:37px;text-indent:-37px}
#rt span.or {color:#B0B0B0;font-family:Arial,Helvetica,sans-serif;font-size:1.2rem}
#rt td.cw {width:1px}
#rt #l1,
#rx #l1 {margin-bottom:0}
#rt #l1 ul {padding-left:3px}
#rt #l1 ul li {padding:0 7px 0;text-indent:-15px}

#rx  {margin:0 auto;padding-top:2px;width:96%;font-size:.95em}
#rx img {position:relative;top:3px;width:16px;opacity:.4}
#rx td {padding:0 4px;vertical-align:top;out_line:1px solid #FF0000}
#rx tr:nth-child(1) td:nth-child(1),
#rx tr:nth-child(4) td:nth-child(1),
#rx tr:nth-child(7) td:nth-child(1),
#rx tr:nth-child(10) td:nth-child(1),
#rx tr:nth-child(13) td:nth-child(1),
#rx tr:nth-child(16) td:nth-child(1) {color:#A0A0A0;font-size:1.2em;border-right-width:1px;border-right-style:solid;border-right-color:#B0B0B0}
#rx tr:nth-child(1) td:nth-child(2),
#rx tr:nth-child(4) td:nth-child(2),
#rx tr:nth-child(7) td:nth-child(2),
#rx tr:nth-child(10) td:nth-child(2),
#rx tr:nth-child(13) td:nth-child(2),
#rx tr:nth-child(16) td:nth-child(2) {padding:2px 0 0 4px}

#rp   {width:100%;text-align:center}
#rp div {display:table-cell;font-size:1.8em;out_line:1px solid #FF0000}  /* "table-cell" makes all the blank (even) cells the same width */
#rp div:nth-child(odd) {text-decoration:underline #C0C0C0}
#rp div:nth-child(even) {width:24px}
#rp div.at {text-decoration:none;color:#000000}

div.rn {margin:0 auto;max-width:350px}
div.rn div {display:inline-block;margin:0 auto;text-align:left;color:#808080;font-size:.8rem}
div.rn p {margin:12px 0 0;border-top-width:1px;border-top-style:solid;border-top-color:#C0C0C0}
div.rn p:first-child,
div.rn h2 + p {border:none}
div.rn p span,
div.rn div div {margin-left:12px;word-spacing:-0.15em}
div.rn .gr {color:#808080}

p.bt {padding-top:4px;border-top-width:2px;border-top-style:solid;border-top-color:#C0C0C0}

/* show notes */
.co1:not(checked) ~ .co1b #rt th:nth-child(4) span,
.co1:not(checked) ~ .co1b #rt tr:nth-child(odd) td:nth-child(1),
.co1:not(checked) ~ .co1b #rt tr:nth-child(odd) td:nth-child(2),
.co1:not(checked) ~ .co1b #rt tr td span.xx,
.co2:not(checked) ~ .co2b div.rn,
.co3:not(checked) ~ .co3b div#rp,
.co3:not(checked) ~ .co3b p.gr {display:none}
.co1:checked ~ .co1b #rt tr:nth-child(odd) td:nth-child(1),
.co1:checked ~ .co1b #rt tr:nth-child(odd) td:nth-child(2) {display:table-cell}
.co1:checked ~ .co1b #rt tr td span.xx,
.co1:checked ~ .co1b #rt th:nth-child(4) span {display:inline}
.co1:checked ~ .co1b #rt tr:nth-child(even) td:nth-child(3) img {width:80px}
.co2:checked ~ .co2b div.rn {display:block}
.co3:checked ~ .co3b div#rp,
.co3:checked ~ .co3b p.gr {display:block}

div.rcc {position:relative;display:inline-block;margin:4px 0 0;height:44px;font-size:0}  /* container */
  div.rbg {position:absolute;top:10px;left:5px;width:calc(100% - 10px);height:30px;background-color:#404040;z-in_dex:20}  /* background */
  div.rcc div div.r {background-color:#FF0000}
  div.rcc div div.y {background-color:#FFFF00}
  div.rcc div div.g {background-color:#C0C0C0}
    div.rcl {position:absolute;top:4px;left:-0px;z-i_ndex:0}  /* front face */
    div.rct div,  /* top face */
    div.rcl div {display:inline-block;width:30px;height:30px;border-radius:5px;box-shadow: 2px -2px 2px RGBA(0,0,0,.3) inset, -2px 2px 2px RGBA(255,255,255,.7) inset}
    div.rct div {box-shadow: .5px .5px 1px RGBA(0,0,0,.3) inset;border-bottom-left-radius:0;border-bottom-right-radius:0}
    div.rcl:last-child {top:34px}
    div.rcl:last-child div {height:10px;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow: 2px 0px 2px RGBA(0,0,0,.3) inset, -2px 2px 2px RGBA(255,255,255,.7) inset}
div.rca {display:inline-block;padding:4px}
div.rca img {width:16px;opacity:.4}

.g3 div img.rc {margin:10px 10px 40px;max-width:calc(100vw - 60px);max-height:calc(100vh - 100px);min-width:288px;min-height:162px}  /* 16:9 landscape */
.g3 div span {z-index:3}
.g3 div div {top:10px;left:10px;transform:none;width:calc(100% - 20px);height:calc(100% - 50px);background:none;background-size:100% auto;z-index:4;out_line:solid 1px #FF0000}
.g3 p {bottom:10px;left:14px;width:calc(100% - 28px);text-align:center;font-size:1em;out_line:solid 1px #FF0000}
.g3 a.pr {top:10px;left:10px}
.g3 a.ne {right:10px}
.g3#i901 div div {background-image:url(imgs/RC-3x3x3-moves-0-L.png)}
.g3#i902 div div {background-image:url(imgs/RC-3x3x3-moves-3-alt-L.png)}
.g3#i903 div div {background-image:url(imgs/RC-3x3x3-moves-6-L.png)}
.g3#i904 div div {background-image:url(imgs/RC-4x4x4-moves-3a-L.png)}
.g3#i905 div div {background-image:url(imgs/RC-4x4x4-moves-3b-L.png)}
.g3#i906 div div {background-image:url(imgs/RC-4x4x4-moves-4-L.png)}
.g3#i907 div div {background-image:url(imgs/RC-4x4x4-moves-5-L.png)}
.g3#i908 div div {background-image:url(imgs/RC-3x3x3-moves-gift-wrap-L.png)}
.g3#i909 div div {background-image:url(imgs/RC-3x3x3-moves-superflip-L.png)}
.g3#i910 div div {background-image:url(imgs/RC-4x4x4-moves-cube-in-cube-L.png)}
.g3#i911 div div {background-image:url(imgs/RC-4x4x4-moves-stripes-L.png)}

div.pre {padding-left:36px;text-indent:-36px;font-family:monospace;font-size:.8em}
div.pre p {margin:0}

/* portrait screens */
@media only screen AND (orientation:portrait){
  .g3 div img.rc {margin-bottom:55px;max-height:calc(100vh - 115px);min-width:162px;min-height:288px;aspect-ratio:9/16}   /* 9:16 portrait */
  .g3 div div {height:calc(100% - 65px)}
  .g3 p {top:calc(100% - 44px);width:calc(100% - 85px);overflow:visible;white-space:normal;padding-left:57px;text-indent:-57px;text-align:left}
  .g3#i901 div div {background-image:url(imgs/RC-3x3x3-moves-0-P.png)}
  .g3#i902 div div {background-image:url(imgs/RC-3x3x3-moves-3-alt-P.png)}
  .g3#i903 div div {background-image:url(imgs/RC-3x3x3-moves-6-P.png)}
  .g3#i904 div div {background-image:url(imgs/RC-4x4x4-moves-3a-P.png)}
  .g3#i905 div div {background-image:url(imgs/RC-4x4x4-moves-3b-P.png)}
  .g3#i906 div div {background-image:url(imgs/RC-4x4x4-moves-4-P.png)}
  .g3#i907 div div {background-image:url(imgs/RC-4x4x4-moves-5-P.png)}
  .g3#i908 div div {background-image:url(imgs/RC-3x3x3-moves-gift-wrap-P.png)}
  .g3#i909 div div {background-image:url(imgs/RC-3x3x3-moves-superflip-P.png)}
  .g3#i910 div div {background-image:url(imgs/RC-4x4x4-moves-cube-in-cube-P.png)}
  .g3#i911 div div {background-image:url(imgs/RC-4x4x4-moves-stripes-P.png)}
}

/* screens <= 895px */
@media only screen AND (max-width:895px){
  #rt tr:nth-child(even) td:nth-child(1),
  #rt tr:nth-child(even) td:nth-child(2) {font-size:1.2em}
  #rt tr:nth-child(even) td:nth-child(5) {padding-left:10px}
  #rp div {font-size:1.6em}
  #r_p div.at {font-size:1.4em}
  div.sh8b .al {font-size:1em}
  div.sh8b h3 .al {font-size:1.2em}
  div.rcc {height:39px}
    div.rbg {top:10px;left:5px;width:calc(100% - 10px);height:25px}
    div.rct div,
    div.rcl div {width:25px;height:25px;border-radius:4px;box-shadow: 2px -2px 2px RGBA(0,0,0,.3) inset, -2px 2px 2px RGBA(255,255,255,.7) inset}
    div.rcl:last-child {top:29px}
    div.rcl:last-child div {height:8px}
}

/* screens <= 720px */
@media only screen AND (max-width:720px){
  #ra  {font-size:1.2em}
  #ra th,#ra td {padding:0 2px}
  #ra td:nth-child(2),
  #ra td:nth-child(9) {width:7%}
  di_v.sh8b .al {font-size:.75em}
}

/* screens <= 561px */
@media only screen AND (max-width:561px){
  #c2   {display:block;margin:0;width:100%}
  #c3   {display:block;margin:40px auto 56px;width:80%}
  #ra  {font-size:1.1em}
  #rh th:last-child {width:1px}
  #rt span.or {font-size:1rem}
  #rt tr:nth-child(even) td:nth-child(1),
  #rt tr:nth-child(even) td:nth-child(2) {font-size:1em}
  #rt tr:nth-child(even) td:nth-child(3) {font-size:.6em}
  #rt tr:nth-child(even) td:nth-child(4),
  #rt tr:nth-child(even) td:nth-child(5) {font-size:1.3em}
  .co1:checked ~ .co1b #rt tr:nth-child(even) td:nth-child(3) img {width:60px}
  #rp div {font-size:1.4em}
  #r_p div.at {font-size:1.2em}
}

/* screens <= 450px */
@media only screen AND (max-width:450px){
  di_v.sh8b .al {font-size:.75em}
  div.rcc {height:34px}
    div.rbg {top:10px;left:5px;width:calc(100% - 10px);height:20px}
    div.rct div,
    div.rcl div {width:20px;height:20px;border-radius:3px;box-shadow: 1.5px -1.5px 1.5px RGBA(0,0,0,.3) inset, -1.5px 1.5px 1.5px RGBA(255,255,255,.7) inset}
    div.rcl:last-child {top:24px}
    div.rcl:last-child div {height:7px;box-shadow: 1.5px 0px 1.5px RGBA(0,0,0,.3) inset, -1.5px 1.5px 1.5px RGBA(255,255,255,.7) inset}
  div.rca {display:inline-block;padding:4px 0}
  div.rca img {width:12px;opacity:.4}
}