/* Last updated: 28-Apr-2016 */

/* Globals */
* {line-height:1.25em;}
body {margin:0 auto; padding:0; background-color:#B0C0D0;}
p {margin:0.25em 0 0.75em 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.5em 0; background-color:#FFFF80; text-align:center;}
h2 {margin:0; padding:0.3em 0; text-align:center;}
h3 {margin:0; padding:1em 0 0 0;}
h2 + h3 {padding-top:0.5em;}
li {margin:0.5em 0;}
img {border:none;}
hr {border:none; border-top:1px solid #C0C0C0;}
iframe {margin:0; border:none; padding:0; overflow:hidden;}
a:link {color:#0000FF;}
a:visited {color:#800080;}

/* Fonts */
* {font-family:Arial, Helvetica, sans-serif; font-size:100%; -webkit-text-size-adjust:100%;}
body {font-size:1em;}
h1 {font-size:1.6em; font-weight:bold;}
h2 {font-size:1.3em; font-weight:bold;}
h3 {font-size:1em; font-weight:bold;}
#hr2, #fr1, #fr2, #fr3 {font-size:0.9em;}
#fr3 a {font-size:0.8em;}
#hr2 {font-style:italic;}
.row .item {font-weight:bold;}
.row p {font-size:0.9em;}
#nav {font-size:0.8em;}
#nav #navicon {font-size:1.8em;}
#nav .mh1 {font-size:1.2em; font-weight:bold; color:#FFFFFF;}
#nav .mh2 {font-size:1.1em; font-weight:bold; color:#FFFFFF;}
#nav .ms1 {font-weight:bold;}
#follow div {font-size:0.8em;}
#vartext {font-size:0.8em;}
#lacing #pairs, #lacing #steps {font-size:0.9em;}
#lacing #pairs div, #lacing #steps div {font-size:1.4em;}
#lacing #controls {font-size:0.8em;}
#flipbook #steps > div div  {font-size:1.25em}
#gallery #bigpic {font-size:0.8em;}
#gallery #thumbs, #gallery2 #thumbs2 {font-size:0;}
#gallery #thumbtext, #gallery2 #thumbtext {font-size:0.8em;}
#enlargediv {font-size:0.8em;}
#lengths table {font-size:0.8em;}
.caption {font-size:0.8em;}
.cite {font-size:0.8em; font-style:italic; color:#000060;}
.tip {font-size:0.8em;}
.warn {font-size:0.8em; font-style:italic;}
.note {color:#D00000; font-weight:bold;}
.new {color:#D00000; font-weight:bold; font-style:italic;}
#related div .item {font-size:0.9em; font-weight:bold;}
#related div p {font-size:0.8em;}

/* Layouts */
.section h3, #workarounds h3, #knotsteps h3 {padding:0;}
#container {margin:0 auto; min-width:320px; max-width:1280px; background-color:#C0D0E0;}
#header, #footer {text-align:center;}
#hr1 {background:url("shoelace/ShoelaceRainbow.jpg"); background-repeat:repeat-x;}
#hr2 {background-color:#D0E0F0; padding:10px 40px;}
#threecols {position:relative;}
#threecols, #footer {background:url("shoelace/ShoelaceBG.gif"); background-repeat:repeat-x; padding-top:16px;}
#nav {position:absolute; z-index:1; top:-34px; left:-175px; width:174px; border-right:1px solid #808080; border-bottom:1px solid #808080;}
#nav a {display:block; width:100%; height:16px;}
#nav div {white-space:nowrap; overflow:hidden;}
#nav .mh1 {width:100%; background-color:#4080D0; text-align:center; line-height:35px;}
#nav .mh2 {margin-top:10px; width:100%; background-color:#4080D0; text-align:center; line-height:30px;}
#nav .submenu {margin:0 0 2px 10px; border-bottom:1px solid #808080;}
#nav .ms1 {background-color:#FFFFFF;}
#navicon {position:absolute; top:0; left:175px; width:30px; height:30px; border:1px solid #808080; background-color:#D0D8E0;}
#cse-search-box input {margin:4px;}
#cse-search-box img  {margin:2px; width:64px; height:24px; vertical-align:top;}
#content {padding:0; background-color:#FFFFFF;}
.block {margin:30px 5px 5px 5px; background-color:#F0F0F0; padding:5px;}
.head {margin:30px 5px 5px 5px; background-color:#E0E0E0; padding:0.25em;}
.section {margin:5px; background-color:#E0E0E0; padding:5px;}
.row {margin:5px; min-height:80px; background-color:#F0F0F0; padding:5px;}
.row img {float:left; width:80px; height:80px; margin:0 10px 0 0;}
.row .img2 {float:right; margin:0 0 0 10px;}
.row p {margin-left:90px; margin-right:5px;}
.row .item {background-image:url("Sprites2.gif"); background-repeat:no-repeat; padding-left:16px; background-position:0 -150px;}
.hang80 {min-height:85px;}
.hang80 img {float:left; margin:5px 10px 0 0; width:80px; height:80px;}
.hang80 .img2 {float:right;}
.hang80 p, .hang80 h3 {margin-left:90px; margin-right:5px;}
.hang160 {min-height:165px;}
.hang160 img {float:left; margin:5px 10px 0 0; width:160px; height:160px;}
.hang160 .img2 {float:right;}
.hang160 p, .hang160 h3 {margin-left:170px; margin-right:5px;}
.hang240 {min-height:245px;}
.hang240 img {float:left; margin:5px 10px 0 0; width:240px; height:240px;}
.hang240 .img2 {float:right;}
.hang240 p, .hang240 h3 {margin-left:250px; margin-right:5px;}
#follow div {display:inline-block; width:80px; text-align:center; overflow:hidden;}
#intro, #lacinggroup, #knotgroup {margin-top:5px;}
#lacing {position:relative; height:370px;}
#lacing #vartext {position:absolute; top:0; left:0; width:100%; text-align:center;}
#lacing #pairs {position:absolute; top:20px; left:50%; margin-left:-145px; text-align:center;}
#lacing #steps {position:absolute; top:20px; left:50%; margin-left:105px; text-align:center;}
#lacing #pairs div, #lacing #steps div, #flipbook #steps > div div {margin-bottom:2px; width:38px; border:1px solid #707070; 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 #lugdiagram {margin:0 auto; width:200px; height:320px;}
#lacing #controls {position:absolute; top:345px; left:0; width:100%; text-align:center;}
#flipbook {position:relative; min-height:192px;}
#flipbook #diagram {position:absolute; width:242px; height:162px;}
#flipbook #diagram img {position:absolute; width:240px; height:160px; border:1px solid #D0D0D0;}
#flipbook #controls {position:absolute; top:167px; left:0; width:242px; text-align:center;}
#flipbook #steps {margin-left:247px;}
#flipbook #steps > div {overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}
#flipbook #steps > div div {display:inline-block; text-align:center;}
#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 {border:1px solid #707070; background-color:#C0C0C0; padding:0px 6px 0px 6px;}
#knotsteps div {clear:both; min-height:160px; margin-bottom:20px;}
#knotsteps div:last-child {margin-bottom:1px;}
#knotsteps img {margin-bottom:5px; width:240px; height:160px; border:1px solid #D0D0D0;}
#gallery {clear:left; min-height:330px;}
#gallery #bigpic {margin:4px; text-align:center;}
#gallery #bigpic img {width:260px; height:260px;}
#gallery #thumbs img, #gallery2 img {margin:0 2px 2px 0; width:80px; height:80px; border:4px solid #F0F0F0;}
#gallery #thumbtext, #gallery2 #thumbtext {margin:4px;}
#enlargediv {position:absolute; z-index:1; width:260px; border:4px solid #4080D0; background-color:#FFFFFF; padding:10px; text-align:center; display:none;}
#enlargediv #standby {margin:60px; width:80px; height:80px; display:none;}
#enlargediv #pic {margin-bottom:5px; width:260px;}
#vid {height:90px;}
#vid img {float:left; margin-right:8px; width:160px; height:90px;}
#vid p {margin-left:170px;}
#lengths table {margin-bottom:10px; width:100%; border-collapse:collapse; table-layout:fixed;}
#lengths table col {width:11%;}
#lengths table td {border:1px solid #909090; padding:4px 0; text-align:center; overflow:hidden;}
.tip {margin:5px 10% 5px 10%; border:1px solid #E0E090; background-color:#FFFFB0; padding:5px 7px 7px 7px;}
.warn {margin:5px 0; text-align:center;}
.warn p {display:inline-block; border:1px solid #B05050; background-color:#FFB0B0; padding:8px 10px;}
.quotes div {border-top:5px solid #D0D0D0; padding:5px 10px;}
.quotes div:last-child {border-bottom:5px solid #D0D0D0;}
.quotes div p:last-child {color:#000060; font-size:0.8em; font-style:italic;}
#rate table {margin:0 auto;}
#related {margin:20px 0 0 0; background-color:#D8F0C0; padding:5px 0;}
#related div {margin:0 5px 5px 5px; height:80px; background-color:#C8E0B0; padding:5px; overflow:hidden;}
#related div img {float:left; margin-right:5px; width:80px; height:80px;}
#sidebar {background-color:#D8F0C0; padding:5px 0 1px 0; text-align:center;}
#adfooter {background-color:#D8F0C0; padding:0 0 5px 0; text-align:center;}
#adfooter h2 {display:none;}
.nodisplay {display:none;}
.hidden {visibility:hidden;}
.ad160x200 {display:inline-block; margin:0 10px 20px 10px; width:160px; height:200px; background-color:#C8E0B0;}
.ad160x600 {display:none; margin:0 auto; width:160px; height:600px; background-color:#C8E0B0;}
.ad300x250 {display:inline-block; margin:0 auto; width:300px; height:250px; background-color:#C8E0B0;}
.ad468x60 {display:block; margin:0 auto 15px auto; width:468px; height:60px; background-color:#C8E0B0;}
.ad728x90 {display:none; margin:0 auto 15px auto; width:728px; height:90px; background-color:#C8E0B0;}
.adNNNxNNN {display:block; margin:0 auto 20px auto; width:300px; height:250px; background-color:#C8E0B0; overflow:hidden;}
#fr1 {background-color:#D0E0F0; padding:15px 0;}
#fr1 a {white-space:nowrap;}
#fr2 {background-color:#C0D0E0; padding:10px 0;}
#fr3 {background-color:#B0C0D0; padding:8px 0 0 0;}
#fr3 a {display:inline-block; margin:2px; padding:5px 0; width:60px; background-color:#D0E0F0; overflow:hidden; text-decoration:none;}
#fr3 img {margin:0 10px; width:40px; height:40px;}
.clear {clear:both;}

/* Hover effects */
#nav:hover {left:0; width:180px;}
#nav a:link:hover, a:visited:hover, #content a:hover, #footer a:hover {color:#FF2000;}
#lacing #pairs div:hover, #lacing #steps div:hover, #flipbook #steps > div div:hover, #controls img:hover, #variations span:hover, #gallery #thumbs a img:hover, #gallery2 a img:hover {border-color:#FF2000;}

/* 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 */
.ma1 {background-position:0 0;}
.ma2 {background-position:0 -30px;}
.ma3 {background-position:0 -60px;}
.ma4 {background-position:0 -90px;}
.ma5, .ms1 {background-position:0 -120px;}
.ma6 {background-position:0 -150px;}
.ma7 {background-position:0 -180px;}
.ma8 {background-position:0 -210px;}
.ma9 {background-position:0 -240px;}
.tick {background-position:0 -270px;}
.cross {background-position:0 -300px;}
.plus {background-position:0 -330px;}
.minus {background-position:0 -360px;}
.equal {background-position:0 -390px;}
.star, .star1, .star2, .star3, .star4, .star5 {background-position:0 -420px;}
.halfstar {background-position:0 -450px;}
.home {background-position:0 -480px;}
.info {background-position:0 -510px;}
.search {background-position:0 -540px;}
.sitemap {background-position:0 -570px;}
.support {background-position:0 -600px;}
.links {background-position:0 -630px;}
.help {background-position:0 -660px;}
.contact {background-position:0 -690px;}
.ma1, .ma2, .ma3, .ma4, .ma5, .ma6, .ma7, .ma8, .ma9, .ms1 {background-image:url("Sprites2.gif"); background-repeat:no-repeat; padding-left:16px; min-height:16px; max-height:32px;}
.tick, .cross, .plus, .minus, .equal, .star {background-image:url("Sprites2.gif"); background-repeat:no-repeat; padding-left:16px; min-height:16px; max-height:32px;}
.home, .info, .search, .sitemap, .support, .links, .help, .contact {background-image:url("Sprites2.gif"); background-repeat:no-repeat; padding-left:16px; min-height:16px; max-height:32px;}
.star1, .star2, .star3, .star4, .star5, .halfstar {background-image:url("Sprites2.gif"); 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; height:160px;}
.i200x320 img, img.i200x320 {width:200px; height:320px;}
.i160 img, img.i160 {width:160px; height:160px;}
.i240 img, img.i240 {width:240px; height:240px;}
.i320 img, img.i320 {width:320px; height:320px;}
.il img, img.il {float:left; margin:5px 10px 5px 0;}
.ir img, img.ir {float:right; margin:5px 0 5px 10px;}
.ic img, img.ic {display:block; margin:5px auto;}

/* Backgrounds */
.mb1 {background-color:#D0D8E0;}
.mb2 {background-color:#C0C8D0;}
.mb3 {background-color:#B0B8C0;}
.mb4 {background-color:#A0A8B0;}
.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 480 */
@media only screen and (max-width:480px) {
body {font-size:0.9em;}
#header img {width:256px; height:50px;}
#hr1 {height:50px; background-size:125px 50px;}
#nav a {height:25px;}
.block, .head, .section, .row, .tip, .warn p, #navicon, #pairs div, #steps div, #steps span, #controls img, #variations span, #related div, #fr3 a {border-radius:3px;}
.img2 {display:none;}
#week img {display:block;}
#rate table span {display:none;}
.ad468x60 {display:none;}
#fr1 a {margin:0 5px;}
#knotsteps h3 {float:left; margin-right:3px; width:55px; overflow:hidden;}
}
/* Screen width 481 to 640 */
@media only screen and (min-width:481px) and (max-width:640px) {
body {font-size:0.95em;}
#header img {width:256px; height:50px;}
#hr1 {height:50px; background-size:125px 50px;}
#nav a {height:22px;}
.block, .head, .section, .row, .tip, .warn p, #navicon, #pairs div, #steps div, #steps span, #controls img, #variations span, #related div, #fr3 a {border-radius:3px;}
#knotsteps img {float:right; margin:0 0 10px 10px;}
#fr1 a {margin:0 10px;}
}
/* Screen width 641 to 800 */
@media only screen and (min-width:641px) and (max-width:800px) {
#header img {width:512px; height:100px;}
#hr1 {height:100px; background-size:250px 100px;}
#hr2 {font-size:1em;}
#nav a {height:20px;}
.block, .head, .section, .row, .tip, .warn p, #navicon, #pairs div, #steps div, #steps span, #controls img, #variations span, #related div, #fr3 a {border-radius:4px;}
#lacing {float:right; margin:0 0 10px 15px; width:290px;}
#lugdiagram {float:right; margin:0 0 10px 15px;}
#technique h3 {padding:0;}
#gallery #bigpic {float:left; margin:4px 0 0 0; width:260px; height:260px;}
#gallery #thumbs {margin-left:266px;}
#gallery #thumbtext {margin-left:270px;}
#knotsteps img {float:right; margin:0 0 10px 10px;}
#related div {display:inline-block; margin:0 0 5px 1%; width:47%;}
#fr1 a {margin:0 20px;}
}
/* Screen width 801 to 960 */
@media only screen and (min-width:801px) and (max-width:960px) {
#header img {width:512px; height:100px;}
#hr1 {height:100px; background-size:250px 100px;}
#hr2 {font-size:1.1em;}
#nav {top:16px; left:0; width:180px; border-right:none;}
#nav #navicon {display:none;}
#nav a {height:20px;}
#content, #sidebar, #adfooter {margin:0 0 0 180px;}
.block, .head, .section, .row, .tip, .warn p, #navicon, #pairs div, #steps div, #steps span, #controls img, #variations span, #related div, #fr3 a {border-radius:4px;}
#lacing {float:right; margin:0 0 10px 15px; width:290px;}
#lugdiagram {float:right; margin:0 0 10px 15px;}
#technique h3 {padding:0;}
#gallery #bigpic {float:left; margin:4px 0 0 0; width:260px;}
#gallery #thumbs {margin-left:266px;}
#gallery #thumbtext {margin-left:270px;}
#knotsteps img {float:right; margin:0 0 10px 10px;}
#related div {display:inline-block; margin:0 0 5px 1%; width:47%;}
#fr1 a {margin:0 30px;}
}
/* Screen width 961 and above */
@media only screen and (min-width:961px) {
#header img {width:512px; height:100px;}
#hr1 {height:100px; background-size:250px 100px;}
#hr2 {font-size:1.1em;}
#nav {top:16px; left:0; width:180px; border-right:none;}
#nav #navicon {display:none;}
#nav a {height:20px;}
#content {margin:0 180px 0 180px;}
.block, .head, .section, .row, .tip, .warn p, #navicon, #pairs div, #steps div, #steps span, #controls img, #variations span, #related div, #fr3 a {border-radius:5px;}
.block {margin:30px 10px 10px 10px; padding:10px;}
.head {margin:30px 10px 10px 10px;}
.section, .row {margin:10px; padding:10px;}
.row img, .hang80 img, .hang160 img, .hang240 img {margin-right:15px;}
.row p, .hang80 p {margin-left:95px;}
.hang160 p {margin-left:175px;}
.hang240 p {margin-left:255px;}
.il img, img.il {margin:5px 15px 10px 0;}
.ir img, img.ir {margin:5px 0 10px 15px;}
.ic img, img.ic {margin:10px auto;}
#intro, #lacinggroup, #knotgroup {margin-top:10px;}
#intro {margin:10px; padding:10px;}
#lacing {float:right; margin:0 0 10px 15px; width:290px;}
#lugdiagram {float:right; margin:0 0 10px 15px;}
#technique h3 {padding:0;}
#gallery #bigpic {float:left; margin:4px 0 0 0; width:260px;}
#gallery #thumbs {margin-left:266px;}
#gallery #thumbtext {margin-left:270px;}
.tip {margin:10px 10% 10px 10%; padding:8px 10px 10px 10px;}
.warn {margin:10px 0;}
#vid p {margin-left:175px;}
#lengths table td {padding:6px;}
#knotsteps img {float:right; margin:0 0 15px 15px;}
#related {margin:25px -180px 0 -180px; padding:10px 170px 0 170px;}
#related div {display:inline-block; margin:0 0 10px 2%; width:44%; padding:10px;}
#related div img {margin-right:10px;}
#sidebar {position:absolute; top:16px; right:0; width:180px;}
#sidebar h2 {font-size:1em; line-height:1.6em;}
#adfooter {padding:0 0 10px 0;}
#adfooter h2 {display:block;}
.ad160x200 {margin:0 0 30px 0;}
.ad160x600 {display:block;}
.ad300x250 {display:none;}
.ad728x90 {display:block;}
.adNNNxNNN {margin:0 auto 30px auto; width:160px; height:600px;}
#fr1 a {margin:0 40px;}
}
/* Screen width 1281 and above */
@media only screen and (min-width:1281px) {
body {font-size:1.1em;}
#t1281plus {display:block;}
}