/* ############################################################################################################################### */
/* Main style sheet for Ian's Shoelace Site */
/* Last updated: 10-Dec-2022 */
/* Widened Related Links from 250px to 300px
/* Copyright (c) 2007-2022 by Ian W. Fieggen */
/* ############################################################################################################################### */

/* 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; background-color:#9098A0;}
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;}
h1 + h2, 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;}
iframe {margin:0; padding:0; border:none; overflow:hidden;}
a {font-weight:bold; text-decoration:none;}
a:link {color:#2040A0;}
a:visited {color:#5000A0;}

/* Main layout grid */
#container {width:100%; min-height:100%;}
#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;}
#stickyfooter {position:fixed; z-index:2; bottom:0; width:100%; text-align:center; background-color:#9098A0;}

/* Header */
#header a {display:block; height:100px; background:url("ShoelaceRainbow.jpg"); background-size:250px 100px; 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.8em; 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.85em; 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-gc, #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 17.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-gc {background-position:0.2em -5.8em;}
#nav li ul li #nav-tw {background-position:0.2em -7.8em;}
#nav li ul li #nav-fb {background-position:0.2em -9.8em;}
#nav li ul li #nav-rs {background-position:0.2em -11.8em;}
#nav li ul li:first-child a {font-weight:bold; text-align:center; background-color:#1060B0;}
#nav li ul li a.active, #nav li ul li a.active:hover {color:#000000; font-weight:bold; text-shadow:none; background-color:#80C0FF;}

/* 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:8px 0; list-style-type:none; font-size:12px; 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:0; background-position:top -48px left -268px;}
#bc li a {margin:0; padding:8px 28px 8px 0; background-position:top 0 right -32px; text-decoration:none;}
#bc li span {margin:0; padding:8px 28px 8px 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:5px 5px 0 0; text-decoration:none; background-color:#B0B8C0;}
#tabs li a.active {border-style:solid; border-width:4px 4px 0 4px; border-color:#C0C8D0; font-weight:bold; background-color:#E0E8F0;}
#tabs + div {margin-top:0;}
#intro, #lacinggroup {margin-top:5px;}
#lacing {position:relative; height:370px;}
#lacing #vartext {position:absolute; top:0; left:0; width:100%; text-align:center; font-size:0.9em;}
#lacing #pairs {position:absolute; top:20px; left:50%; margin-left:-145px; text-align:center; font-size:0.9em;}
#lacing #steps {position:absolute; top:20px; left:50%; margin-left:105px; text-align:center; font-size:0.9em;}
#lacing #pairs div, #lacing #steps div {margin-bottom:2px; width:38px; border:1px solid #707070; font-size:1.4em; background-color:#808080;}
#lacing #diagram {position:absolute; top:20px; left:50%; margin-left:-100px; width:200px; height:320px; overflow:hidden;}
#lacing #diagram img {position:absolute;}
#lacing #controls {position:absolute; top:345px; left:0; width:100%; 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%; height:auto; border:1px solid #D0D0D0;}
#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;}
#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;}
#technique, #variations, #features, #notes {margin-top:5px;}
#variations span {padding:0px 6px 0px 6px; border:1px solid #707070; background-color:#C0C0C0;}
#knotsteps img, .steps img {border:1px solid #D0D0D0;}
#enlargediv {position:absolute; z-index:1; border:5px solid #4080D0; padding:10px; width:260px; text-align:center; font-size:0.9em; display:none; background-color:#FFFFFF;}
#enlargediv #standby {margin:60px; width:80px; height:80px; display:none;}
#enlargediv #pic {margin-bottom:5px;}
#enlargediv #enlargepic {height:auto;}
#lengths table {margin-bottom:10px; width:100%; border-collapse:collapse; table-layout:fixed; font-size:0.9em;}
#lengths table col {width:11%;}
#lengths table td {border:1px solid #909090; padding:4px 0; text-align:center; overflow:hidden;}
#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 h2 {padding:0.5em 15px;}
#support ul {margin:0; padding:0 10px; list-style-type:none;}
#support ul li {display:inline-block; margin:0; padding:0; font-size:0.85em;}
#support ul li a {display:inline-block; width:90px; margin:0 5px 10px 5px; padding:75px 0 8px 0; border-radius:5px; box-shadow:0 2px 3px #808890; background-size:60px 60px; background-position:center 10px; background-repeat:no-repeat; color:#122460; text-decoration:none; overflow:hidden; background-color:#C0C8D0;}
#support ul li a#sup-do {background-image:url("dollar-coin-flip-060x180.gif"); background-size:60px 180px;}
#sup-ap {background-image:url("Ians-Laces-app-0.png");}
#sup-ib {background-image:url("LacesBook1s.jpg");}
#sup-la {background-image:url("ShoelaceBundles0.jpg");}
#sup-ac {background-image:url("ShoelaceAccessories0.jpg");}
#sup-ob {background-image:url("ShoelaceBooks0.jpg");}
#sup-az {background-image:url("amazon-0.gif");}
#sup-fs {background-image:url("for-sale-0.gif");}

/* Sponsors */
#sponsors {padding:0 0 15px 0;}
#sponsors h3 {padding:0.5em 8px; text-align:center;}
#sponsors div {display:inline-block; width:160px; height:200px; margin:0 8px 15px 8px;}
#sponsors .ad1 {width:300px; max-width:300px; height:250px; max-height:250px;}

/* Footer */
#pagenav {margin:0; padding:8px 0; list-style-type:none; font-size:12px; 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 8px; padding:0 0 0 28px; background-position:top 0 left -268px;}
#pagenav li:first-child {margin:0; padding:0 28px 0 0; background-position:top -96px right -268px;}
#pagenav li a {margin:0; padding:8px 28px 8px 0; background-position:top -96px right -32px; text-decoration:none;}
#pagenav li:first-child a {padding:8px 0 8px 30px; background-position:top 0 left -32px;}
#pagenav li:last-child a {background-position:top 0 right -32px;}
#pagenav a:link, #pagenav a:visited {color:#122460;}
#credits {padding:15px; font-size:0.9em;}
#websites {margin:0 0 50px 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;}

/* Sticky footer ad */
#stickyfooter .ad2 {width:320px; max-width:320px; height:50px; max-height:50px;}
#stickyfooter #hide {display:block; position:absolute; top:3px; right:3px; width:32px; height:32px; border-radius:5px; font-size:24px; font-weight:bold; text-decoration:none;}

/* 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:5px;}
.block {margin:30px 15px 15px 15px; padding:15px; background-color:#F0F0F0;}
.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 .img2 {float:right; margin:0 0 0 15px;}
.row .item {font-size:1.1em; font-weight:bold;}
.row p {margin-left:95px; margin-right:15px; font-size:0.9em;}
.hang80 {min-height:80px;}
.hang80 img {float:left; margin:0 15px 0 0; width:80px; height:80px;}
.hang80 .img2 {float:right;}
.hang160 {min-height:165px;}
.hang160 img {float:left; margin:0 15px 0 0; width:160px; height:160px;}
.hang160 .img2 {float:right;}
.hang240 {min-height:245px;}
.hang240 img {float:left; margin:5px 10px 0 0; width:240px; height:240px;}
.hang240 .img2 {float:right;}
.caption {font-size:0.9em;}
.cite {font-size:0.9em; font-style:italic; color:#000060;}
.new {color:#D00000; font-weight:bold; font-style:italic;}
.note {color:#D00000; 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;}
.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;}
.gallery .thumbs a img {width:80px; height:80px; border:5px solid #F0F0F0;}
.gallery .thumbs .caption {grid-column:1 / -1; padding: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.6em; text-align:center; font-size:1.8em; background-color:#FFFF00;}
.quotes h3, .transcript h3 {padding-top:0;}
.quotes div, .transcript div {padding:16px 10px; border-top:10px solid #D0D0D0;}
.quotes div:nth-child(even), .transcript div:nth-child(even) {background-color:#F8F8F8;}
.quotes div:last-child, .transcript div:last-child {border-bottom:10px solid #D0D0D0;}
.quotes div p:last-child {color:#000060; font-size:0.9em; font-style:italic;}
.ad1, .ad2 {display:block; margin:0 auto;}
.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;}
#bc a:hover, #bc a:focus,
  #main a:hover, #main a:focus,
  #tabs a:hover, #tabs a:focus,
  #support ul li a:link:hover, #support ul li a:link:focus, #support ul li a:visited:hover, #support ul li a:visited: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,
  #stickyfooter #hide:hover, #stickyfooter #hide: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;}
#support ul li a:link:hover, #support ul li a:link:focus, #support ul li a:visited:hover, #support ul li a:visited:focus {background-color:#D0D8E0;}
#sup-do:link:hover, #sup-do:link:focus, #sup-do:visited:hover, #sup-do:visited:focus {background-position:center -110px;}
#websites a:link:hover, #websites a:link:focus, #websites a:visited:hover, #websites a:visited:focus {background-color:#B0B8C0;}
#stickyfooter #hide:hover, #stickyfooter #hide:focus {background-color:#FFFFFF;}

/* Lacing animations */
.e00 {top:0;}
.e89 {top:-30px;}
.e78 {top:-10px;}
.e88, .e67 {top:10px;}
.e77, .e56 {top:30px;}
.e87, .e66, .e45 {top:50px;}
.e76, .e55, .e34 {top:70px;}
.e86, .e65, .e44, .e23 {top:90px;}
.e75, .e54, .e33, .e12 {top:110px;}
.e85, .e64, .e43, .e22 {top:130px;}
.e74, .e53, .e32, .e11 {top:150px;}
.e84, .e63, .e42, .e21 {top:170px;}
.e73, .e52, .e31 {top:190px;}
.e83, .e62, .e41 {top:210px;}
.e72, .e51 {top:230px;}
.e82, .e61 {top:250px;}
.e71 {top:270px;}
.e81 {top:290px;}
.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);}

/* Tiny icons */
.ma0 {background-position:0 0;}
.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, .row .item {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;}
.row .item, .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 */
.i80 img, img.i80 {width:80px; height:80px;}
.i100x160 img, img.i100x160 {width:100px; max-width:100%; height:auto;}
.i200x320 img, img.i200x320 {width:200px; max-width:100%; height:auto;}
.i240x80 img, img.i240x80 {width:240px; max-width:100%; height:auto;}
.i240x160 img, img.i240x160 {width:240px; max-width:100%; height:auto;}
.i320x200 img, img.i320x200 {width:320px; max-width:100%; height:auto;}
.i160 img, img.i160 {width:160px; max-width:100%; height:auto;}
.i240 img, img.i240 {width:240px; max-width:100%; height:auto;}
.i320 img, img.i320 {width:320px; max-width:100%; height:auto;}
.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;}

/* 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;}
.ob1 {background-color:#D8F0C0;}
.ob2 {background-color:#C8E0B0;}
.ob3 {background-color:#B8D0A0;}

/* ############################################################################################################################### */
/* Screen width 0 to 479 */
/* 48px nav, small header, 1 column, narrow tabs, 320x50 footer ad */
/* ############################################################################################################################### */
@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;}
#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, #pagenav {font-size:9px; font-weight:bold;}
#bc {padding:6px 0;}
#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:6px 21px 6px 0; background-position:top 0 right -24px;}
#bc li span {padding:6px 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:6px 0;}
#pagenav li, #pagenav li a {background-size:225px 132px;}
#pagenav li {margin:0 0 0 6px; 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 a {padding:6px 21px 6px 0; background-position:top -72px right -24px;}
#pagenav li:first-child a {padding:6px 0 6px 22px; background-position:top 0 left -24px;}
#pagenav li:last-child a {background-position:top 0 right -24px;}
.img2 {display:none;}
.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;}
.video img, .steps img {display:block; float:none; margin:5px 0;}
.video p {margin-left:0;}
}
/* ############################################################################################################################### */
/* Screen width 480 to 639 */
/* 60px nav, small header, 1 column, 320x50 footer ad */
/* ############################################################################################################################### */
@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;}
.img2 {display:none;}
}
/* ############################################################################################################################### */
/* Screen width 640 to 799 */
/* 60px nav, medium header, 1 column, 320x50 footer ad */
/* ############################################################################################################################### */
@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; width:290px;}
#technique h3 {padding:0;}
}
/* ############################################################################################################################### */
/* Screen width 800+ */
/* 80px nav, medium header, 2 or 3 columns, 468x60 footer ad */
/* ############################################################################################################################### */
@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; width:290px;}
#technique h3 {padding:0;}
#support h2, #sponsors h2 {font-size:1.2em;}
#support ul, #support ul li {display:block;}
#support ul li a {display:block; margin:0 auto 15px auto; width:110px;}
#sponsors div {display:block; margin:0 0 15px 0;}
#sponsors .ad1 {width:160px; max-width:160px; height:600px; max-height:600px; margin:0 0 15px 0;}
#websites {margin-bottom:60px;}
#stickyfooter .ad2 {width:468px; max-width:468px; height:60px; max-height:60px;}
}
/* ############################################################################################################################### */
/* Screen width 800 to 959 */
/* 80px nav, medium header, 2 columns, 468x60 footer ad */
/* ############################################################################################################################### */
@media only screen and (min-width:800px) and (max-width:959px) {
#container {display:grid; grid-template-columns:minmax(0, 1fr) 160px; grid-template-areas:
  'head head'
  'nav  nav '
  'bc   bc  '
  'main supp'
  'main spon'
  'main spon'
  'pnav pnav'
  'cred cred'
  'web  web '
;}
}
/* ############################################################################################################################### */
/* Screen width 960+ */
/* 80px nav, medium header, 3 columns, 728x90 footer ad */
/* ############################################################################################################################### */
@media only screen and (min-width:960px) {
#container {display:grid; grid-template-columns:160px minmax(0, 1fr) 160px; grid-template-areas:
  'head head head'
  'nav  nav  nav '
  'bc   bc   bc  '
  'supp main spon'
  'pnav pnav pnav'
  'cred cred cred'
  'web  web  web '
;}
#websites {margin-bottom:90px;}
#stickyfooter .ad2 {width:728px; max-width:728px; height:90px; max-height:90px;}
}
/* ############################################################################################################################### */
/* Screen width 1280+ */
/* 80px nav, medium header, 3 columns, empty sidebars, 728x90 footer ad */
/* ############################################################################################################################### */
@media only screen and (min-width:1280px) {
body {font-size:1.1em;}
#container {display:grid; grid-template-columns:1fr 200px 880px 200px 1fr; grid-template-areas:
  'head head head head head'
  '.    supp nav  spon .   '
  '.    supp bc   spon .   '
  '.    supp main spon .   '
  '.    supp pnav spon .   '
  '.    supp cred spon .   '
  '.    supp web  spon .   '
;}
#support h2, #sponsors h2 {font-size:1.25em;}
#sponsors div, #sponsors .ad1 {margin:0 auto 15px auto;}
}
/* ############################################################################################################################### */
/* Screen width breakpoints 360+, 400+, 480+ */
/* Hanging indents and 2-column flipbook */
/* ############################################################################################################################### */
@media only screen and (min-width:360px) {
.hang80 p, .hang80 h3 {margin-left:95px; margin-right:15px;}
}
@media only screen and (min-width:400px) {
.hang160 p, .hang160 h3 {margin-left:175px; margin-right:15px;}
}
@media only screen and (min-width:480px) {
.hang240 p, .hang240 h3 {margin-left:255px; margin-right:15px;}
#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, #stickyfooter {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;}
}