/*------ Major page sections ------*/ #header {width: 100%; background-image:url(/images/pawprint.jpg);} .body {width: 100%; clear: both; float: left; background-image: linear-gradient(#d9f1b8,#ffffff); } #LowerBody {width: 100%; clear: both; background-color: #cccccc; background-image: linear-gradient(#d9f1b8,#ffffff);} #footer {color: #333; background-image:url(/images/pawprint.jpg);} /*=======================================================*/ /*--*****---- stuff for cookie consent panel inside header ---*****---*/ .butcon { border-radius: 12px; width: 100px; background-color: lightblue; border: none; color: black; padding: 10px 16px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } #con {width: 100%; max-width: 500px; max-height: 80px; align-content: center; color: black; position: fixed; top: 0; left: 0; right: 0; bottom: 0; border: 8px black; background-color: rgba(255,128,128,0.85);} /*--*****---- logo and link images called from headnav ---*****---*/ @media only screen and (max-width: 940px) { .laptop {display: none;} .mobile {display: block;} #head {background-image:url(/images/pawprint.jpg); display: grid; grid-template-columns: 4% 40px 8% 40px 8% 40px 8% 40px 8% 40px ;} .itemn1 { grid-column: 1 / 11;} img.hedimg {width:100%; max-width:50px; display: block;} } @media only screen and (min-width: 941px) { .laptop {display: block;} .mobile {display: none;} #head {background-image:url(/images/pawprint.jpg); display: grid; grid-template-columns: 40% 5% 50px 5% 50px 5% 50px 5% 50px 5% 50px ; } .itemn1 { grid-column: 1 / 1;} img.hedimg {width:100%; max-width:60px; display: block;} } /*--*****---- called from search.php ---*****---*/ #livesearch {width: 95%; margin: 5px auto; margin-left: 5px; float: left; box-sizing: border-box; background-color: #fffacd;} /*--*****---- Navigation menu called from navigation.php ---*****---*/ /* navigation menu */ .sitenav { display: grid; grid-template-columns: 40% 30%; background-color: #d9f1b8; padding: 10px; grid-row-gap: 10px;} .item3 { grid-column: 1 / 3;} .buttnav { border-radius: 15px; width: 100px; height: 30px; background-color: yellow; border: 4px; color: black; padding: 5px 4px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);} #dropdown {display:flex; justify-content: center; align-items:center; background-image:url(/images/pawprint.jpg); } #title {display:flex; justify-content: center; flex-wrap: wrap; align-content: space-between; background-image:url(/images/pawprint.jpg); font-size:1.5em ;font-family:arial, verdana, sans-serif; font-weight:bold; height: 45px; } /* Navigation overlays */ .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(254, 253, 226); overflow-x: hidden; transition: 0.5s;} .overlay-content { position: relative; top: 10%; width: 100%; text-align: center; margin-top: 10px;} .overlay a { padding: 8px; text-decoration: none; font-size: 14px; color: #818181; display: block; transition: 0.3s;} .overlay a:hover, .overlay a:focus { color: #f1f1f1;} .overlay .closebtn { position: absolute; top: 40px; right: 45px; font-size: 14px; background-color: yellow; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border: 2px solid red; border-radius: 8px; } @media screen and (max-height: 450px) { .overlay a {font-size: 12px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; }} .items { display: grid; grid-template-columns: 40% 50%; padding: 10px; grid-row-gap: 10px;} img.navimg {width:100%; max-width:200px; display: block;} /*=======================================================*/ /*------ Body sub sections ------*/ body {font-family: Verdana, sans-serif; margin:0} #walk-text { width: 95%; margin: 5px auto; margin-left: 5px; float: left; box-sizing: border-box; } @media only screen and (max-width: 600px) { img.mobile {width:100%; max-width:300px; display: block;} } /* Style for navigation boxes (used if Java is disabled) */ .li {float: left; Width: 100px; height: 48px; text-decoration: none; font-size:0.9em; border: 2px solid #f6f6f6; background-color: #b5e4f0;} .li a { display: block; color: black; text-align: center; font-size:0.9em; padding: 6px 2px; text-decoration: none; background-color: #b5e4f0;} ul.nav {list-style-type: none; margin: 0; padding: 0; overflow: hidden; } ul.nav li {float: left; Width: 100px; height: 48px; text-decoration: none; font-size:0.9em; border: 2px solid #f6f6f6; background-color: #b5e4f0;} ul.nav li a { display: block; color: black; text-align: center; font-size:0.9em; padding: 6px 2px; text-decoration: none; background-color: #b5e4f0;} ul.nav li a:hover {background-color: #111; color: white;} /* Change the link color to #111 (black) on hover */ /* Slideshow container */ .mySlides { max-width: 100%; height: auto;} .slideshow-container { width: 100%; max-width: 400px; display: block; position: relative; margin: auto; background-color: rgb(204, 255, 153); } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -20px; color: coral; font-weight: bold; font-size: 12px; transition: 0.6s ease; user-select: none; border-radius: 0 25px 25px 0; background-color: rgba(0,0,0,0.4); } /* Position the "next button" to the right */ .next { right: 0; border-radius: 25px 0 0 25px;} /* for tablet screens: */ @media only screen and (min-width: 400px) { .prev, .next,.text {font-size: 12px; top: 50%;} } /* ok */ /* For bigger screens: */ @media only screen and (min-width: 900px) { .prev, .next,.text {font-size: 15px; top: 50%;} } /* ok */ /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);} /* Caption text */ .text { color: black; font-size: 15px; padding: 8px 0px 8px 0px; background-color: rgb(254, 253, 226); width: 100%; text-align: center;} /* ok */ /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;} @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1}} @keyframes fade { from {opacity: .4} to {opacity: 1}} /* ok */ /*=======================================================*/ /*------ Lower body sub sections ------*/ /* history and symbol sections - default for mobile phones: */ /* default for mobile phones: */ #history {width: 95%; margin: 5px auto; margin-left: 5px; float: left; box-sizing: border-box; background-image: linear-gradient(#d9f1b8,#ffffff);;} #symbols {width: 95%; background-color: #b5e4f0; display: block; margin-left: auto; margin-right: auto; } /* specific for bigger screens */ @media only screen and (min-width: 400px) { #history {width: 95%; margin: 5px auto; margin-left: 5px; float: left; box-sizing: border-box; } #symbols {width: 400px; background-color: #b5e4f0; } } /* walks near here section */ #wnm {width: 100%; max-width: 700px; display: block; align-content: center; margin: auto;} /* comments section */ #OldComment {width: 95%; margin: 10px auto; margin-left: 10px; float: center; box-sizing: border-box; background-color: #fffacd;} .nearHere { max-width: 200px; height: auto;} /*=======================================================*/ /*------ Footer sub sections ------*/ /*=======================================================*/ /*------ General Markup ------*/ .clear-both {clear:both; } .clear-left {clear:left; } .clear-right {clear:right; } .hidden {display:none;} .visible {display:block;} /* Style for main paragraphs and headings */ p {font-size:0.9em; text-align:left; font-family:arial, verdana, sans-serif; margin-left: 5px} p.banner {font-size:1em; text-align:center; font-family:arial, verdana, sans-serif; font-weight:bold; } p.img {color:black; font-size:0.85em; text-align:center; font-family:arial, verdana, sans-serif; font-weight:bold; } p.bold {color:black; font-size:0.9em; text-align:left; font-family:arial, verdana, sans-serif;} p.footer {color:black; font-size:0.9em; text-align:left; font-family:arial, verdana, sans-serif; } p.content {color:black; font-size:0.9em; text-align:left; font-family:arial, verdana, sans-serif; } p.centre {color:black; font-size:1em; text-align:center; font-family:arial, verdana, sans-serif; } h1,h2,h3,h4,h5,h6{margin-bottom:0.5em;} h2{font-size:1.2em; margin-top:25px; color:black; text-align:left; font-weight:bold;} h3{font-size:1.1em; margin-top:20px; color:green; text-align:left; font-weight:bold;} /* For tablets (66) */ @media only screen and (max-width: 940px) { h1{font-size:1.0em; margin-top:10px; color:blue; text-align:center; font-weight:bold;} h2{font-size:1em; margin-top:10px; color:black; text-align:left; font-weight:bold;} p {font-size:12pt; text-align:left; font-family:arial, verdana, sans-serif; } p.banner {font-size:16pt; text-align:center; font-family:arial, verdana, sans-serif; font-weight:bold; } p.title {color:black; font-size:14pt; text-align:center; font-family:arial, verdana, sans-serif; font-weight:bold; } p.img {color:black; font-size:12pt; text-align:center; font-family:arial, verdana, sans-serif; font-weight:bold; } } /* For bigger screens: (78) */ @media only screen and (min-width: 941px) { h1{font-size:1.1em; margin-top:10px; color:blue; text-align:center; font-weight:bold;} h2{font-size:1em; margin-top:10px; color:black; text-align:left; font-weight:bold;} p {font-size:12pt; text-align:left; font-family:arial, verdana, sans-serif; } p.banner {font-size:20pt; text-align:center; font-family:arial, verdana, sans-serif; font-weight:bold; } p.title {color:black; font-size:16pt; text-align:center; font-family:arial, verdana, sans-serif; font-weight:bold; } p.img {color:black; font-size:12pt; text-align:center; font-family:arial, verdana, sans-serif; font-weight:bold; } } .button { border-radius: 15px; width: 150px; height: 50px; background-color: yellow; border: 4px; color: black; padding: 5px 4px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);} /*=======================================================*/ /*------ Alternate navigation for index pages - used if javascript disabled ------*/ @media only screen and (min-width: 400px) { ul.nav li {width: 120px; height: 50px; font-size:12pt; } ul.nav li a { font-size:10pt; padding: 14px 4px; } } @media only screen and (min-width: 900px) { ul.nav li {Width: 150px; height: 60px; font-size:1em; } ul.nav li a { font-size:12pt; padding: 14px 4px; } } /*=======================================================*/ /* FILE ARCHIVED ON 17:11:27 Feb 14, 2022 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 09:46:27 May 14, 2026. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 0.536 exclusion.robots: 0.042 exclusion.robots.policy: 0.033 esindex: 0.008 cdx.remote: 6.156 LoadShardBlock: 49.99 (3) PetaboxLoader3.datanode: 175.199 (6) PetaboxLoader3.resolve: 382.998 (3) load_resource: 553.641 (2) loaddict: 109.355 */