/* Title: Lake Onalaska Protection and Rehabilitation District Author: Fritz Funk, Major update January 2022 ---------------------------------------------*/ /* Responsive technique uses grid template areas to control layout of where chunks like nav menus go */ /* first, reset styles, based on: https://elad2412.github.io/the-new-css-reset/ */ /*** The new CSS Reset - version 1.4.5 (last updated 13.1.2022) ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert;} *,*::before,*::after {box-sizing: border-box;} a {cursor: revert;} /* Reapply the pointer cursor for anchor tags */ ol, ul, menu {list-style: none;} /* Remove list styles (bullets/numbers) */ img {max-width: 100%;} /* For images to not be able to exceed their container */ table {border-collapse: collapse;} /* removes spacing between cells in tables */ textarea {white-space: revert;} /* revert the 'white-space' property for textarea elements on Safari */ :where([hidden]){display:none;} /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ /*** end of reset ***/ /* colors used - based on bluegill sunfish photo ---------------------------------------------- #ce6b0a bluegill orange belly #060314 bluegill opercular tab (dark blue) #313921 bluegill dark green back ---------------------------------------------- */ /* general styles: small screens first --------------------------------------------- */ a:link, a:visited {text-decoration: none;} img {max-width: 100%;} a img { border: none;} body { width: 100%; max-width: 900px; background: #060314; margin: 0 auto 1em auto; padding: 0 0 0 0; font-family: Roboto, "San Francisco", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif; /* Native system fonts for Android, IOS, Windows, Ubuntu/Mint listed first */ color: #3e4549; font-size: 100%; display: block; } /* header styles - all dimensions and fonts in px in header because of fixed size banner image(s) --------------------------------------------- */ header { height: 60px; min-height: 60px; background-color: #cbccca; display: block; border-radius: 6px; background-image: url(Canvasback60.png); background-position: top 0px left 300px; background-repeat: no-repeat; } header #BlueGill_Left img { width: auto; height: 60px; position: absolute; left: 0px; z-index: 2; } header #BlueGill_Right img { width: auto; height: 60px; position: absolute; left: 0px; z-index: 4; } header #BlueGill_Right_smallfish img { display: none;} h1 { width: auto; height: 60px; display: block; position: absolute; left: 0px; top: 1px; text-align: center; padding: 0 0 0px 130px; font-size: 19px; font-weight: bold; line-height: 18px; color: #00005a; font-style: italic; } h1 #H1_MiddleLine {text-align: center; display: block; white-space: nowrap; padding-top: 1px; padding-bottom: 1px; font-size: 14px; font-weight: normal; line-height: 17px; } #HamburgerIcon { width: auto; height: 60px; float: right; margin: 0 0 0 0; padding: 12px 2px 0 0; border-radius: 6px; color: #FF0000; background-color: #cbccca; font-size: 12px; line-height: 10px; text-align: center; vertical-align: middle; } #HamburgerIcon a {font-size: 60px; color: #FF0000; line-height: 18px; } #HamburgerIcon:target {display: none;} /* Turn off hamburger menu when standalone nav menu page is detected by URL fragment */ /* Main Content Styles --------------- */ main { display: block; background: #bdd4e5; padding: 0 1em 0 1em; border-radius: 6px; font-size: 1.1em; line-height:1.2em; color: #060314; } main h2 {margin: 0 0 .5em 0; padding: 0.75em 0 0 0; font-weight: bold; font-size: 1.4em; text-align: center; } main h3 {margin: 1.5em 0 0.5em 0; padding: 0 0 0 0; font-weight: bold; font-size: 1.2em; text-align: center; } main h4 {margin: 1em 0 0.2em 0; padding: 0 0 0 0; font-weight: bold; font-size: 1.2em; text-align: left; } main a:link, main a:visited { color: #000077; text-decoration: underline; } main a:hover { color: #0f6780; } main hr { /* fancy gradient partial-width line */ width: 80%; margin: auto; height: 2px; margin-top: 1em; margin-bottom: 1em; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } main ol {list-style: decimal; } main ul {list-style-type:disc; } main li {margin: 0 0 0.4em 3em; font-size: 1em; line-height: 1.1em; } main li:first-child {margin-top: 1em; } main p {margin: 0.5em 0 0 0;} figure { margin: 1em 0 1em 0;} figure img { display: block; width: 90%; height: auto; margin: 1em auto 0.25em auto;} figcaption { font-style: italic; text-align: center;} figcaption .ClickEnlarge {font-size: 0.8em;} strong {font-weight: bold;} .img_textflow figure {display: inline; margin: 0.1em 0 0.5em 0;} .img_textflow img {margin: 0 0 0.25em 0;} .img_center figure {width:fit-content; margin: 1em auto 0.25em auto;} .img_center img {width: fit-content; margin: 0 0 0.25em 0;} .floatright {float: right;} .floatleft {float: left; margin-right: 0.25em; margin-left: 0;} /* footer --------------------------------------------- */ #LastUpdated {color: gray; font-size: 0.8em; } footer {color: lightblue; font-size: 0.8em; margin: 0 0 0 0; padding: 0.5em 0 0 0; line-height: 0.9em;} footer a:link { text-decoration: underline;} /* nav styles --------------------------------------------- */ nav { width: 275px; background: #313921; border-radius: 6px; margin: 0 auto 15px auto; padding: 20px 0 0 15px; font-size: 14px; color: lightgray; line-height: 1.35em; /* color of non-link list items */ } nav a:link, nav a:visited { color: #bdd4e5; text-decoration: none; outline: none; } nav a:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.1);} nav ul ul {padding-left: 30px;} /* indent nested lists */ nav ul li a { display: block; width: 200px; border-radius: 6px; /* keeps the hover block wide and rounded */ padding-left: 10px; margin-left: -10px; /* -10 and +10 keep li that are not links lined up */ } nav li:last-child {padding-bottom: 5px;} #ex { float: right; margin: 0 40px 0 0;} /* The big "X" to "close" the standalone nav menu, returning to index.html */ #ex a {font-size: 40px; color: #FF0000; font-weight: 900; } /* Responsive for wider screens */ /* Reference screens: My HP: 1366x768, Moto G7 Power: 360x760 / 424x895 / 720x1520 Gail Kindle: 800x1280 */ @media (min-width: 900px) { body { display: grid; grid-template-areas: "bannerbar bannerbar" "leftbox maincontent" "bottombar bottombar"; grid-template-columns: 200px 3fr; column-gap: 5px; max-width: 1200px; } header {grid-area: bannerbar; } main {grid-area: maincontent;} nav {grid-area: leftbox; width: 200px;} footer {grid-area: bottombar;} header {width: auto; max-width: 1200px; height: 100px; min-height: 100px; background-image: url(Canvasback100.png); background-position: top 0px left 460px; } header #HamburgerIcon { display: none;} header #BlueGill_Right img { width: auto; height: 100px; position: static; float: left; z-index: 4;} header #BlueGill_Right_smallfish img { width: auto; height: 100px; position: absolute; top: 0px; z-index: 6; display: block; animation-name: slideInLeft1, TailKick; /* Small fish swims in from */ animation-duration: 3s, 3s; /* the left, kicking its tail */ animation-timing-function: ease-out, ease-out; /* partway through */ animation-delay: 0s, 3s; animation-iteration-count: 1, 1; } @keyframes slideInLeft1 { 0% {transform: translateX(-60%) translateY(-20%)} /*slide small fish in from left */ 100% {transform: translateX(-30%)} } @keyframes TailKick { 0% {transform: rotateY(20deg) translateX(-30%) } 20% {transform: rotateY(-25deg) translateX(-20%) } /*slide small fish in from left */ 100% {transform: translateX(0) } } header #BlueGill_Left img { display: none;} h1 {position: static; float: left; width: auto; height: 100px; display: block; padding: 8px 0 0px 10px; font-size: 28px; line-height: 28px; } h1 #H1_MiddleLine { padding: 1px 0 1px 0; font-size: 20px; font-weight: normal; line-height: 24px; } nav #ex {display: none;} } /* misc. specific styling (try to eliminate where possible....) ----------------- */ /* for WXOW figure etc */ div.img_textflo { margin: 0; border: 0; padding: 0.4em 0.8em 0.2em 0.8em; float: right; color: #000080; line-height: 1em; text-align: center; font-size: 0.9em; } #CenteredWebCamLink { text-align: center; font-style: italic;} #text_background { background-color: #fff; display: inline;} .ThumbnailBulletList li img { margin: 0 20px 10px 0; width: 100px; height: auto; min-width: 100px; } .ThumbnailBulletList li {display: list-item; list-style: none; margin: 10px 10px 20px 5px;} .ThumbnailBulletList a {white-space: nowrap;} .ThumbnailBulletList p { display: inline-flex; align-items: center; justify-content: left; flex-direction: row; padding-left: 0; } .LiteratureCited li {margin-top: 1em; list-style: none; margin-left: 3em; text-indent: -3em;}