/* Globals */
* {font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:100%; line-height:1.25em; font-size:1em;}
body {margin:0 auto; padding:0;}
p {margin:0 0 1em 0;}
p:last-child, p.ma8, p.ma6, p.plus, p.minus, p.equal, p.tick, p.cross {margin-bottom:0.25em;}
h1 {margin:0; padding:0.7em 0.5em 0.5em 0.5em; text-align:center; font-size:2.4em; font-weight:bold;}
h2 {margin:0; padding:0.5em 0; text-align:center; font-size:1.8em; font-weight:bold;}
h3 {margin:0; padding:1em 0 0.25em 0; font-size:1.2em; font-weight:bold;}
h4 {margin:0; padding:0.5em 0 0.25em 0; font-size:1.2em; font-weight:bold;}
h1 + h2, h1 + h3, h2 + h3, h3 + h3 {padding-top:0.5em;}
li {margin:0.5em 0;}
img {border:none; font-size:0.75em; color:#D00000; font-style:italic;}
hr {border:none; border-top:1px solid #C0C0C0;}
a {font-weight:bold; text-decoration:none;}
a:link {color:#2040A0;}
a:visited {color:#5000A0;}

/* Main layout grid */
#container {width:100%; min-height:100%; background-color:#D8E0E8;}
#header {grid-area:head; text-align:center; background-color:#F0F8FF;}
#nav {grid-area:nav; text-align:center; background-color:#E0E8F0;}
#bc {grid-area:bc; text-align:center; background-color:#C0C8D0;}
#main {grid-area:main; background-color:#FFFFFF;}
#support {grid-area:supp; text-align:center; background-color:#B0B8C0;}
#sponsors {grid-area:spon; text-align:center; background-color:#B0B8C0;}
#pagenav {grid-area:pnav; text-align:center; background-color:#C0C8D0;}
#credits {grid-area:cred; text-align:center; background-color:#D0D8E0;}
#websites {grid-area:web; text-align:center; background-color:#E0E8F0;}

/* Header */
#header a {display:block; background-image:url("shoelace-rainbow.jpg"); background-repeat:repeat-x;}

/* Top-level menu */
#nav {margin:0; padding:15px 0 0 0; list-style-type:none;}
#nav li {display:inline-block; position:relative; margin:0; padding:0;}
#nav li a {text-decoration:none;}
#nav li a span {display:block; width:60px; padding-top:65px; padding-bottom:5px; white-space:nowrap; overflow:hidden;}
#nav1, #nav2, #nav3, #nav4, #nav5, #nav6 {display:inline-block; margin:0 4px 30px 4px; border-radius:0.7em; box-shadow:0 2px 3px #182028; width:60px; height:60px; background-size:360px 60px; background-image:url("sprites-nav.png"); background-repeat:no-repeat; color:#122460; font-size:0.8em; font-weight:bold; background-color:#708090;}
#nav1 {background-position:0 0;}
#nav2 {background-position:-60px 0;}
#nav3 {background-position:-120px 0;}
#nav4 {background-position:-180px 0;}
#nav5 {background-position:-240px 0;}
#nav6 {background-position:-300px 0;}

/* Drop-down menus */
#nav li ul {display:block; position:absolute; margin:-5px 4px 0 4px; padding:8px 0; min-width:180px; max-width:220px; border-radius:0.5em; box-shadow:0 2px 3px #182028; background-color:#0050A0;}
#nav1d {left:0;}
#nav2d {left:-30px;}
#nav3d {left:-60px;}
#nav4d {right:-60px;}
#nav5d {right:-30px;}
#nav6d {right:0;}
#nav li ul li {display:block;}
#nav li ul li a {display:block; margin:0 8px; text-align:left; color:#FFFFFF; text-shadow:1px 1px 2px #000000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:normal;}
#nav li ul li #nav-em, #nav li ul li #nav-yt, #nav li ul li #nav-ig, #nav li ul li #nav-tw, #nav li ul li #nav-fb, #nav li ul li #nav-rs {padding-left:2em; background-image:url("sprites-connect.png"); background-size:1.6em 11.6em; background-repeat:no-repeat;}
#nav li ul li #nav-em {background-position:0.2em 0.2em;}
#nav li ul li #nav-yt {background-position:0.2em -1.8em;}
#nav li ul li #nav-ig {background-position:0.2em -3.8em;}
#nav li ul li #nav-tw {background-position:0.2em -5.8em;}
#nav li ul li #nav-fb {background-position:0.2em -7.8em;}
#nav li ul li #nav-rs {background-position:0.2em -9.8em;}
#nav li ul li:first-child a {font-weight:bold; text-align:center; background-color:#1060B0;}

/* Drop-down search */
#nav li form {margin:15px 0 5px 0;}
#cse-search-box input[type="text"] {width:90%; padding:5px; box-sizing:border-box; font-size:1.4em;}
#cse-search-box input[type="submit"] {margin:20px 5px 0 0; height:35px; box-sizing:border-box;}
#cse-search-box img {margin-top:20px; padding:5px; width:64px; height:24px; vertical-align:top; background-color:#FFFFFF;}

/* Breadcrumbs */
#bc {margin:0; padding:10px 0; list-style-type:none; font-size:13px; font-weight:bold;}
#bc li, #bc li a, #bc li span {display:inline-block; background-image:url("sprites-bc.png"); background-size:300px 176px; background-repeat:no-repeat;}
#bc li {margin:0 4px 0 0; padding:0 0 0 28px; background-position:top 0 left -268px;}
#bc li:last-child {margin-right:0; background-position:top -48px left -268px;}
#bc li a {margin:0; padding:8px 28px 9px 0; background-position:top 0 right -32px; text-decoration:none;}
#bc li span {margin:0; padding:8px 28px 9px 0; background-position:top -48px right -32px;}
#bc a:link, #bc a:visited {color:#122460;}

/* Main content items */
#main {padding:0 0 0.01em 0;}
#tabs {margin:0 0 0 30px; padding:0; font-size:0.9em;}
#tabs li {display:inline-block; margin:0; padding:0;}
#tabs li a {display:inline-block; margin:0 4px 0 0; padding:5px 10px; border-radius:0.3em 0.3em 0 0; text-decoration:none; background-color:#B0B8C0;}
#tabs li a.active {border-style:solid; border-width:4px 4px 0 4px; border-radius:0.4em 0.4em 0 0; border-color:#C0C8D0; font-weight:bold; background-color:#E0E8F0;}
#tabs + div {margin-top:0;}
#intro, #lacinggroup {margin-top:5px;}
#lacing {position:relative; width:290px; min-height:370px; margin:0 auto;}
#vartext {margin-bottom:3px; text-align:center; font-size:0.85em;}
#pairs {position:absolute; text-align:center; font-size:0.85em;}
#pairs div, #lacing #steps div {margin-bottom:2px; width:38px; border:1px solid #707070; background-color:#808080; font-size:1.4em;}
#lacing #diagram-box {position:absolute; z-index:1; left:45px; width:200px; height:320px; perspective:800px;}
#lacing #diagram {width:200px; height:320px; overflow:hidden; transition:transform 0.5s; transform-style:preserve-3d;}
#lacing #diagram img {position:absolute;}
#lacing #steps {position:absolute; left:250px; text-align:center; font-size:0.85em;}
#lacing #controls {margin:327px auto 0 auto; width:200px; text-align:center; font-size:0.9em;}
#lacing #controls img {margin-left:1px; margin-right:1px; width:36px; height:22px; border:1px solid #707070; background-color:#808080;}
#flipbook #diagram {padding:0 2px 2px 0; grid-area:fbd;}
#flipbook #diagram img {width:320px; max-width:100%; aspect-ratio:320/200; border:1px solid #D0D0D0;}
#flipbook #steps {min-width:0; grid-area:fbs;}
#flipbook #steps > div {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#flipbook #steps > div div {display:inline-block; margin:0 5px 2px 0; width:38px; border:1px solid #707070; font-size:1.25em; background-color:#808080; text-align:center;}
#flipbook #controls {width:auto; max-width:320px; height:auto; margin:5px 0; text-align:center; grid-area:fbc;}
#flipbook #controls img {margin-left:1px; margin-right:1px; width:36px; height:22px; border:1px solid #707070; background-color:#808080;}
#technique, #variations, #features, #notes {margin-top:5px;}
#variations span {padding:0px 6px 0px 6px; border:1px solid #707070; background-color:#C0C0C0;}
#enlargefig {position:absolute; z-index:1; visibility:hidden; width:80px; height:80px; margin:0; padding:10px; border:5px solid #4080D0; border-radius:0.7em; cursor:zoom-out; font-size:0.9em; overflow:hidden;}
#enlargepic, #enlargetxt {margin-bottom:10px;}
#closefig {width:140px; text-decoration:none; cursor:zoom-out;}
#lengths table {margin:0 auto 10px auto; width:max-content; max-width:100%; border:4px solid #C0C8D0; border-spacing:0; border-collapse:collapse;}
#lengths table tr:nth-child(even) {background-color:#FFFFFF;}
#lengths table tr:nth-child(odd) {background-color:#F8F8F8;}
#lengths table th, #lengths table td {border:1px solid #C0C8D0; padding:0.3em 0.5em; text-align:center; overflow:hidden;}
#lengths table th {border-bottom-width:2px; background-color:#E0E8F0;}
#feedback {max-height:1000px; overflow:auto;}
#rate table {margin:0 auto;}
#related {display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); grid-gap:10px; background-color:#E0E0E0;}
#related h2 {grid-column:1 / -1;}
#related div {min-height:80px; max-height:100px; padding:15px; overflow:hidden; background-color:#B8C0C8;}
#related div img {float:left; margin:0 10px 0 0; width:80px; height:80px;}
#related div .item {font-weight:bold;}
#related div p {margin:2px 0 0 90px; font-size:0.85em;}

/* Support */
#support {text-align:center;}
#support a {display:inline-block; width:160px; height:200px; background-image:url("tip-jar.png"); background-size:160px 200px; text-decoration:none;}

/* Sponsors */
#sponsors {padding:0 0 15px 0;}
#sponsors div {display:inline-block; width:160px; height:200px; margin:0 8px 15px 8px;}
#sponsors div img {width:160px; height:200px;}

/* Footer */
#pagenav {margin:0; padding:10px 0; list-style-type:none; font-size:13px; font-weight:bold;}
#pagenav li, #pagenav li a {display:inline-block; background-image:url("sprites-bc.png"); background-size:300px 176px; background-repeat:no-repeat;}
#pagenav li {margin:0 0 0 4px; padding:0 0 0 28px; background-position:top 0 left -268px;}
#pagenav li a {margin:0; text-decoration:none;}
#pagenav li:first-child {margin-left:0; padding:0 28px 0 0; background-position:top -96px right -268px;}
#pagenav li:first-child a {padding:8px 0 9px 30px; background-position:top 0 left -32px;}
#pagenav li:nth-child(2) a {padding:8px 28px 9px 0; background-position:top -96px right -32px;}
#pagenav li:last-child a {margin-left:0; padding:8px 28px 10px 0; background-position:top 0 right -32px;}
#pagenav a:link, #pagenav a:visited {color:#122460;}
#credits {padding:15px; font-size:0.9em;}
#websites {margin:0; padding:15px 0; font-size:0.9em; font-weight:normal;}
#websites a {display:inline-block; margin:10px 10px 0 0; padding:5px 0; width:60px; height:55px; box-shadow:0 2px 3px #606870; text-decoration:none; overflow:hidden; color:#122460; font-size:0.8em; font-weight:normal; background-color:#C0C8D0;}
#websites a:last-child {margin:10px 0 0 0;}
#websites img {margin:0 10px; width:40px; height:40px;}

/* Classes */
.block, .head, .section, .row, .tip, .warn p, #navicon, #pairs div, #steps div, #steps span, #controls img, #variations span, #related div, #websites a {border-radius:0.3em;}
.block {margin:30px 15px 15px 15px; min-width:290px; padding:15px; background-color:#F0F0F0;}
.boxed span, .boxed a {display:inline-block; margin:0.3em 0.3em 0.3em 0; border:1px solid #A0A0A0; border-radius:0.3em; background-color:#f8f8f8; padding:0.25em 0.5em; white-space:nowrap; text-decoration:none;}
.boxed span.active, .boxed a.active {border:1px solid #808040; background-color:#FFFF80; font-weight:bold;}
.head {margin:30px 15px 10px 15px; padding:15px; background-color:#E0E0E0;}
.section {margin:10px 15px; padding:15px; background-color:#E0E0E0;}
.section h3 {padding:0;}
.row {margin:10px 15px; padding:15px; min-height:80px; background-color:#F0F0F0;}
.row img {float:left; margin:0 15px 0 0; width:80px; height:80px;}
.row .item {font-size:1.1em; font-weight:bold;}
.hang80 {min-height:80px;}
.hang80 img {float:left; margin:0 15px 0 0; width:80px; height:80px;}
.row p, .hang80 p {margin-left:95px;}
.caption {font-size:0.9em;}
.hi {background-color:#FFFFA0;}
.gry {color:#808080;}
.red {color:#C00000;}
.grn {color:#007000;}
.new {color:#C00000; font-weight:bold; font-style:italic;}
.note {color:#C00000; font-weight:bold;}
.steps h3 {clear:both; border-top:10px solid #D0D0D0;}
.steps h3:first-child {padding-top:0; border-top:none;}
.steps img {float:right; margin:-2em 0 15px 15px; border:1px solid #D0D0D0;}
.gallery {clear:left;}
.gallery .thumbs {display:grid; grid-template-columns:repeat(auto-fill, 90px); justify-content:space-evenly;}
.gallery .thumbs a {width:90px; height:90px; overflow:hidden; white-space:nowrap; cursor:zoom-in;}
.gallery .thumbs a img {width:80px; height:80px; border:5px solid #F0F0F0;}
.gallery .caption {padding:10px 5px 5px 5px;}
.video {min-height:95px;}
.video img {float:left; margin:0 15px 0 0; width:160px; height:90px;}
.video p {margin-left:175px; padding-bottom:10px;}
.tip {margin:5px 40px 20px 40px; padding:8px 10px 10px 10px; border:1px solid #E0E090; font-size:0.9em; background-color:#FFFFB0;}
.block .tip {margin:5px 25px 20px 25px;}
.warn {margin:5px 0; text-align:center; font-size:0.9em; font-style:italic;}
.warn p {display:inline-block; padding:8px 10px; border:1px solid #B05050; background-color:#FFB0B0;}
.bbb {margin:25px; padding:0.5em; border:0.4em solid #000000; border-radius:0.5em; text-align:center; font-size:1.8em; background-color:#FFFF00;}
.transcript h3, .quotes h3 {padding-top:0;}
.transcript div {padding:1em 1.5em; border-top:10px solid #D0D0D0;}
.quotes div {padding:16px 16px; border-top:10px solid #D0D0D0; background-image:url("quotes-left.png"); background-size:16px 16px; background-position:16px 16px; background-repeat:no-repeat;}
.quotes div:nth-child(even), .transcript div:nth-child(even) {background-color:#F8F8F8;}
.quotes div:nth-child(odd), .transcript div:nth-child(odd) {background-color:#E8E8E8;}
.quotes div:last-child, .transcript div:last-child {border-bottom:10px solid #D0D0D0;}
.quotes div p {padding-left:24px; padding-right:24px;}
.quotes div p:nth-last-child(2) {background-image:url("quotes-right.png"); background-size:16px 16px; background-position:right bottom 4px; background-repeat:no-repeat;}
.quotes div p:last-child, .cite {color:#000060; font-size:0.9em; font-style:italic;}
.transcript div.comment {background-color:#E0F0E0; font-size:0.9em; font-style:italic;}
.quotes div.comment, .quotes div.comment p {background-color:#E0F0E0; background-image:none; font-style:italic;}
.transcript div.comment span, .quotes div.comment p span {color:#007000; font-weight:bold;}
.nodisplay {display:none;}
.hidden {visibility:hidden;}
.clear {clear:both;}
.block:after, .steps:after, .video:after, .il:after, .ir:after {content:""; display:block; clear:both;}

/* Hover effects */
a:hover, a:focus {text-decoration:underline; text-decoration-thickness:1px;}
#nav1:hover, #nav1:focus-within,
  #nav2:hover, #nav2:focus-within,
  #nav3:hover, #nav3:focus-within,
  #nav4:hover, #nav4:focus-within,
  #nav5:hover, #nav5:focus-within,
  #nav6:hover, #nav6:focus-within {color:#2040A0; background-color:#0050A0;}
#nav li ul {visibility:hidden; transition:visibility 100ms 20ms;}
#nav li:hover ul, #nav li:focus-within ul {visibility:visible; z-index:3;}
#nav li ul li {max-height:0; transition:max-height 100ms 20ms;}
#nav li:hover ul li, #nav li:focus-within ul li {max-height:999px;}
#nav li ul li a {max-height:0; padding:0 0 0 5px; transition:max-height 100ms 20ms, padding 200ms 20ms;}
#nav li:hover ul li a, #nav li:focus-within ul li a {max-height:999px; padding:6px 0 6px 5px;}
#nav li ul li a:hover, #nav li ul li a:focus {background-color:#2070C0;}
#nav li ul li a.active, #nav li ul li a.active:hover {color:#000000; font-weight:bold; text-shadow:none; background-color:#80C0FF;}
#bc a:hover, #bc a:focus,
  #main a:hover, #main a:focus,
  #tabs a:hover, #tabs a:focus,
  #pagenav a:hover, #pagenav a:focus,
  #credits a:hover, #credits a:focus,
  #websites a:link:hover, #websites a:link:focus, #websites a:visited:hover, #websites a:visited:focus {color:#C00000;}
#tabs a:hover, #tabs a:focus {background-color:#D0D8E0;}
#lacing #pairs div:hover, #lacing #pairs div:focus,
  #lacing #steps div:hover, #lacing #steps div:focus,
  #flipbook #steps > div div:hover, #flipbook #steps > div div:focus,
  #controls img:hover, #controls img:focus,
  #variations span:hover, #variations span:focus,
  .gallery .thumbs a img:hover, .gallery .thumbs a img:focus, .gallery .thumbs a:focus-within img {border-color:#C00000;}
.boxed a:not(.active):hover, .boxed span:not(.active):hover {border-color:#C00000; background-color:#FFE0E0; text-decoration:none;}
#websites a:link:hover, #websites a:link:focus, #websites a:visited:hover, #websites a:visited:focus {background-color:#B0B8C0;}

/* Lacing animations */
.e00, #ic {bottom:0;}
.e80, .e90, .e100, .e110, .e120 {bottom:-40px;}
.e70 {bottom:-20px;}
.e60, .e81, .e91, .e101, .e111, .e121 {bottom:0px;}
.e50, .e71 {bottom:20px;}
.e40, .e61, .e82, .e92, .e102, .e112, .e122 {bottom:40px;}
.e30, .e51, .e72 {bottom:60px;}
.e20, .e41, .e62, .e83, .e93, .e103, .e113, .e123 {bottom:80px;}
.e31, .e52, .e73 {bottom:100px;}
.e21, .e42, .e63, .e84, .e94, .e104, .e114, .e124 {bottom:120px;}
.e32, .e53, .e74 {bottom:140px;}
.e22, .e43, .e64, .e85, .e95, .e105, .e115, .e125 {bottom:160px;}
.e33, .e54, .e75 {bottom:180px;}
.e44, .e65, .e86, .e96, .e106, .e116, .e126 {bottom:200px;}
.e55, .e76 {bottom:220px;}
.e66, .e87, .e97, .e107, .e117, .e127 {bottom:240px;}
.e77 {bottom:260px;}
.e88, .e98, .e108, .e118, .e128 {bottom:280px;}
.e99, .e109, .e119, .e129 {bottom:320px;}
.e1010, .e1110, .e1210 {bottom:360px;}
.e1111, .e1211 {bottom:400px;}
.e1212 {bottom:440px;}
.v1 {clip:rect(0,200px,22px,0);}
.v2 {clip:rect(0,200px,62px,0);}
.v3 {clip:rect(0,200px,102px,0);}
.v4 {clip:rect(0,200px,142px,0);}
.v5 {clip:rect(0,200px,182px,0);}
.v6 {clip:rect(0,200px,222px,0);}
.v7 {clip:rect(0,200px,262px,0);}
.v8 {clip:rect(0,200px,302px,0);}
.v9 {clip:rect(0,200px,342px,0);}
.v10 {clip:rect(0,200px,382px,0);}
.v11 {clip:rect(0,200px,422px,0);}
.v12 {clip:rect(0,200px,462px,0);}

/* Tiny icons */
.ma0 {background-position:0 1;}
.ma1 {background-position:0 -30px;}
.ma2 {background-position:0 -60px;}
.ma3 {background-position:0 -90px;}
.ma4 {background-position:0 -120px;}
.ma5, .ms1 {background-position:0 -150px;}
.ma6 {background-position:0 -180px;}
.ma7 {background-position:0 -210px;}
.ma8 {background-position:0 -240px;}
.ma9 {background-position:0 -270px;}
.tick {background-position:0 -300px;}
.cross {background-position:0 -330px;}
.plus {background-position:0 -360px;}
.minus {background-position:0 -390px;}
.equal {background-position:0 -420px;}
.star, .star1, .star2, .star3, .star4, .star5 {background-position:0 -450px;}
.halfstar {background-position:0 -480px;}
.ma0, .ma1, .ma2, .ma3, .ma4, .ma5, .ma6, .ma7, .ma8, .ma9, .ms1 {background-image:url("sprites-tiny.png"); background-size:16px 512px; background-repeat:no-repeat; padding-left:16px; min-height:16px; max-height:32px;}
.tick, .cross, .plus, .minus, .equal, .star {background-image:url("sprites-tiny.png"); background-size:16px 512px; background-repeat:no-repeat; padding-left:16px; min-height:16px; max-height:32px;}
.star1, .star2, .star3, .star4, .star5, .halfstar {background-image:url("sprites-tiny.png"); background-size:16px 512px; background-repeat:repeat; height:16px;}
.star1, .halfstar {width:16px;}
.star2 {width:32px;}
.star3 {width:48px;}
.star4 {width:64px;}
.star5 {width:80px;}

/* Images */
.ic img, img.ic {display:block; margin:15px auto;}
.il img, img.il {float:left; margin:0 15px 10px 0; max-width:67%; height:auto;}
.ir img, img.ir {float:right; margin:0 0 10px 15px; max-width:67%; height:auto;}
.i80 img, img.i80 {width:80px; height:80px;}
.i100x160 img, img.i100x160 {width:100px; max-width:100%; aspect-ratio:100/160;}
.i160 img, img.i160 {width:160px; max-width:100%; aspect-ratio:160/160;}
.i200x320 img, img.i200x320 {width:200px; max-width:100%; aspect-ratio:200/320;}
.i240x80 img, img.i240x80 {width:240px; max-width:100%; aspect-ratio:240/80;}
.i240x160 img, img.i240x160 {width:240px; max-width:100%; aspect-ratio:240/160;}
.i240x180 img, img.i240x180 {width:240px; max-width:100%; aspect-ratio:240/180;}
.i240 img, img.i240 {width:240px; max-width:100%; aspect-ratio:240/240;}
.i240x320 img, img.i240x320 {width:240px; max-width:100%; aspect-ratio:240/320;}
.i320x200 img, img.i320x200 {width:320px; max-width:100%; aspect-ratio:320/200;}
.i320x240 img, img.i320x240 {width:320px; max-width:100%; aspect-ratio:320/240;}
.i320 img, img.i320 {width:320px; max-width:100%; aspect-ratio:320/320;}
.block.i80 ul {padding-left:20px;}
.block.i80 li {clear:both;}

/* Backgrounds */
.tb1 {background-color:#F8F8F8;}
.tb2 {background-color:#F0F0F0;}
.tb3 {background-color:#E8E8E8;}
.tb4 {background-color:#E0E0E0;}
.tb5 {background-color:#D8D8D8;}
.tb6 {background-color:#D0D0D0;}

/*####################################
/* 2x images for high density screens
/*####################################*/
@media only screen and (min-resolution:1.2x) {
#header a {background-image:url("shoelace-rainbow-x.jpg");}
#support a {background-image:url("tip-jar-x.png");}
.quotes div {background-image:url("quotes-left-x.png");}
.quotes div p:nth-last-child(2) {background-image:url("quotes-right-x.png");}
}

/*###############################################
/* Screen width 0 to 479
/* 48px nav, small header, 1 column, narrow tabs
/*###############################################*/
@media only screen and (max-width:479px) {
body {font-size:0.9em;}
#header img {width:256px; height:50px;}
#header a {height:50px; background-size:125px 50px;}
#nav {padding-top:10px;}
#nav li a span {width:48px; padding-top:53px;}
#nav1, #nav2, #nav3, #nav4, #nav5, #nav6 {margin:0 4px 25px 4px; width:48px; height:48px; background-size:288px 48px; font-size:0.7em;}
#nav2 {background-position:-48px 0;}
#nav3 {background-position:-96px 0;}
#nav4 {background-position:-144px 0;}
#nav5 {background-position:-192px 0;}
#nav6 {background-position:-240px 0;}
#bc {padding:7px 0; font-size:11px;}
#bc li, #bc li a, #bc li span {background-size:225px 132px;}
#bc li {margin:0 3px 0 0; padding:0 0 0 21px; background-position:top 0 left -201px;}
#bc li:last-child {background-position:top -36px left -201px;}
#bc li a {padding:5px 21px 6px 0; background-position:top 0 right -24px;}
#bc li span {padding:5px 21px 6px 0; background-position:top -36px right -24px;}
#tabs {margin-left:20px;}
#tabs li a {padding:5px 2px;}
#rate table span {display:none;}
#pagenav {padding:7px 0; font-size:11px;}
#pagenav li, #pagenav li a {background-size:225px 132px;}
#pagenav li {margin:0 0 0 3px; padding:0 0 0 21px; background-position:top 0 left -201px;}
#pagenav li:first-child {padding:0 21px 0 0; background-position:top -72px right -201px;}
#pagenav li:first-child a {padding:5px 0 6px 22px; background-position:top 0 left -24px;}
#pagenav li:nth-child(2) a {padding:5px 21px 6px 0; background-position:top -72px right -24px;}
#pagenav li:last-child a {padding:5px 21px 6px 0; background-position:top 0 right -24px;}
.il img, img.il, .ir img, img.ir {display:block; float:none; margin:10px 0; width:auto; max-width:100%;}
.i80.il img, img.i80.il {float:left; margin:0 15px 10px 0;}
.i80.ir img, img.i80.ir {float:right; margin:0 0 10px 15px;}
.steps img, .video img {display:block; float:none; margin:5px 0;}
.video p {margin-left:0;}
}

/*##################################
/* Screen width 480 to 639
/* 60px nav, small header, 1 column
/*##################################*/
@media only screen and (min-width:480px) and (max-width:639px) {
body {font-size:0.95em;}
#header img {width:256px; height:50px;}
#header a {height:50px; background-size:125px 50px;}
#tabs {margin-left:25px;}
#tabs li a {padding:5px;}
.i320x200 img, img.i320x200, .i320x240 img, img.i320x240, .i320 img, img.i320 {display:block; float:none; margin:10px 0;}
}

/*###################################
/* Screen width 640 to 799
/* 60px nav, medium header, 1 column
/*###################################*/
@media only screen and (min-width:640px) and (max-width:799px) {
#header img {width:512px; height:100px;}
#header a {height:100px; background-size:250px 100px;}
#lacing {float:right; margin:0 0 10px 15px;}
#technique h3 {padding:0;}
}

/*#########################################
/* Screen width 800+
/* 80px nav, medium header, 2 or 3 columns
/*#########################################*/
@media only screen and (min-width:800px) {
#header img {width:512px; height:100px;}
#header a {height:100px; background-size:250px 100px;}
#nav {padding-top:20px;}
#nav li a span {width:80px; padding-top:85px;}
#nav1, #nav2, #nav3, #nav4, #nav5, #nav6 {margin:0 4px 35px 4px; width:80px; height:80px; background-size:480px 80px;}
#nav2 {background-position:-80px 0;}
#nav3 {background-position:-160px 0;}
#nav4 {background-position:-240px 0;}
#nav5 {background-position:-320px 0;}
#nav6 {background-position:-400px 0;}
#nav li ul {margin-top:-10px}
#lacing {float:right; margin:0 0 10px 15px;}
#technique h3 {padding:0;}
#support h2, #sponsors h2 {font-size:1.2em;}
#sponsors div {display:block; margin:0 15px 15px 15px;}
}

/*####################################
/* Screen width 800 to 959
/* 80px nav, medium header, 2 columns
/*####################################*/
@media only screen and (min-width:800px) and (max-width:959px) {
#container {display:grid; grid-template-columns:minmax(0, 1fr) 190px; grid-template-rows:auto auto auto 300px auto auto auto auto; grid-template-areas:
  'head head'
  'nav  nav '
  'bc   bc  '
  'main supp'
  'main spon'
  'pnav pnav'
  'cred cred'
  'web  web '
;}
}

/*####################################
/* Screen width 960+
/* 80px nav, medium header, 3 columns
/*####################################*/
@media only screen and (min-width:960px) {
#container {display:grid; grid-template-columns:190px minmax(0, 1fr) 190px; grid-template-areas:
  'head head head'
  'nav  nav  nav '
  'bc   bc   bc  '
  'supp main spon'
  'pnav pnav pnav'
  'cred cred cred'
  'web  web  web '
;}
}

/*####################################################
/* Screen width 1280+
/* 80px nav, medium header, 3 columns, empty sidebars
/*####################################################*/
@media only screen and (min-width:1280px) {
body {font-size:1.1em;}
#container {display:grid; grid-template-columns:1fr 190px 880px 190px 1fr; grid-template-areas:
  'head head head head head'
  '.    nav  nav  nav  .   '
  '.    bc   bc   bc   .   '
  '.    supp main spon .   '
  '.    pnav pnav pnav .   '
  '.    cred cred cred .   '
  '.    web  web  web  .   '
;}
#support h2, #sponsors h2 {font-size:1.25em;}
#sponsors div {margin:0 auto 15px auto;}
}

/*###################
/* Screen width 640+
/* 2-column flipbook
/*###################*/
@media only screen and (min-width:640px) {
#flipbook {display:grid; grid-template-columns:minmax(1fr, 322px) 1fr; justify-content:center; grid-template-areas:
  'fbd fbs'
  'fbc fbs'
;}
#flipbook #steps {margin-left:8px;}
}

/*####################
/* Simplify printouts
/*####################*/
@media only print {
#nav, #bc, #tabs, #support, #sponsors, #pagenav, #websites {display:none;}
#feedback {max-height:none;}
h1, h2, h3 {page-break-after:avoid;}
img, table, tr, td {page-break-inside:avoid;}
.steps img  {margin-top:0;}
}

/*###########################################
/* Ian's Shoelace Site stylesheet
/* Copyright (c) 2007-2024 by Ian W. Fieggen
/*###########################################
/* Last updated: 31-Oct-2024:
/* • Odd quote rows now colored #E8E8E8
/*###########################################*/