@charset "utf-8"; @font-face { font-family: "Acre"; url("/fonts/ACRE-MEDIUM.OTF") format("opentype"); } /* This style defines everything that goes between the tags. It's pretty much the default, although later styles may override it. */ body { font-family: Trebuchet MS, Verdana, Arial, sans-serif; /* default font. May need to be instaled on the website */ text-align: center; /* Centers all the elements, including text */ background: gray; /* default background color; also defines the behavior of any graphic*/ color: black; /* default text color */ } .disabled { /* prevent right-clicking (or any kind of clicking) on any element with this class */ pointer-events: none; } /* define the 1st 3 heading styles give all the same font, shadow the text, and no spacing around --*/ h1, h2, h3 { font-family: Acre, sans-serif; color: white; text-shadow: 1px 1px 1px black; margin: 0px; } h1 { font-size: 32px; /*default for older bitty browsers */ /* for browsers that support clamp(), minimum 32 px, maximum 72 px, mid-range 4.5% window size */ font-size: clamp(32px, 4.5vw, 72px); margin-bottom: 4px; /* add 4 pixels of space below the header */ } h2 { font-size: 24px; font-size: clamp(24px, 4vw, 64px); margin-bottom: 6px; /* six pixels underneath */ } h3 { font-size: 20px; font-size: clamp(20px, 3vw, 40px); font-style: italic; /* a cumbersome replacement of the tag, but it works */ margin-top: -0.2em; margin-bottom: .4em; } p { /* default paragraph style */ font-size: 14px; font-size: clamp(14px, 1.8vw, 26px); color: #112; /* make the paragraphs a light brown */ } p.copy { /* copyright notice at the bottom of every page */ color: black; font-size: 12px; font-size: clamp(12px, 1.5vw, 22px); margin: 4px; } img { border-radius: 6px; /* give all pictures rounded corners */ height: auto; /* resize for different screens */ width: auto; max-width: 100%; /* ... but don't go overboard */ } a { /* don't change color of the links */ color: inherit; } span.sh { /* proposed formatting for the word "Sheerio" */ } /* this style defines the major "blocks" of each page, as well as the galleries */ div.gallery { width: 100%; /* as wide as the screen, at least for small screens */ /* define the top, right, bottom, and left margins; left and right are auto so they center on the page */ margin: 0px auto 3px auto; /* background: rgba(95, 95, 95); */ } div.gridthree, div.gridfour, div.gridfive { /* define 3, 4, and 5 column grids for displaying thumbnails */ display: grid; grid-template-columns: 99%; /* default to single column for small browsers */ align-items: center; justify-content: space-evenly; /* spreads them out horizontally */ row-gap: 12px; /* just like CELLSPACING, but only vertically */ } /*
*/ div.subgallery img { /* This defines the images */ max-height: 128px; /* they're no taller than this ...*/ max-width: 128px; /* or wider than this, either */ border: 2px solid white; /* and they have a nice "playing card" border */ } div.gridfour a {text-decoration: none;} /* style the thunmbnail links in the LOS section */ div.subgallery img.hilite {border-color: orange;} h3.hilite {color: orange;} /* thumbs have accompanying text on page_one; give them a small bottom margin */ div.subgallery p { margin: 0px 0px 4px 0px; } div.subgallery h3 { margin-top: -0.2em; margin-bottom: .4em; } div.textbox { /* box for descriptive text, usually in the Sets Galleries */ padding: 0px 4px; /* a little whitespace on the sides */ } div.textbox p { /* define the paragraphs that appear in those textboxes */ text-align: justify; font-family: Verdana, Arial, sans-serif; font-size: clamp(16px, 2vw, 26px); } div.textbox strong { /* highlight brand names in the Sets Galleries - an alternative to italics */ } div.linkbox { /* style the boxes for the banners on the link page */ padding: 15px; margin: 15px auto; width: 80%; max-width: 900px; background: rgba(255,228,196, .1); } div.linkbox p {margin: 0px;} /* the element at the top of the page - first thing the surfer sees. */ div.topbar { background: rgba(64, 224, 208, 0.6); /* make background turquoise and slightly opaque */ border-color: #00ffff; /* and a nice aqua border */ } /* banner image that switches to a bigger one for larger screens */ img.topbanner { content: url(/logos/sheerio-logo-300.png); /* default for itty bitty screens */ } div.bottombar { /* style the links box that appears on the bottom of every page */ background: rgba(0, 0, 0, .7); /* make background slightly opaque */ } div.button { /* style the buttons that appear on the bottom of each page */ /* font-size: clamp(40px, 8vw, 90px); /* this just styles the middle arrow */ width: 100%; display: block; } div.button p { color: white; margin: 0px; } div.button a { text-decoration: none; /* don't underline the links */ color: white; /* and don't change the color, either */ } ul { /* Define how an unordered (bullet) list looks */ list-style: none; /* Remove default bullets */ } li { margin-left: -10px; color: black; text-align: left; font-size: 14px; font-size: clamp(14px, 1.8vw, 24px); } ul li::before { content: "●"; /* Add the magic bullet */ color: gold; /* Change the color */ font-weight: bold; /* If you want it to be bold */ font-size: x-large; /* bigger is always better */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ } ul ul li::before { /* change the color of a sublist */ color: red; } li strong { /* highlight dates in the "What's New" box */ color: gold; } sup { /* shrink the superscripts (for things like ® and ™ */ font-size: .8em; } /* We're not using floats, but if do, we'll need this below them to keep them from spilling out of the container */ div.clear {clear: both;} @media only screen and (min-width: 400px) { /* adjust for bigger screens (wider than 400 pixels */ img.topbanner { /* bigger screen gets a bigger logo */ content: url(/logos/sheerio-logo-500.png); } div.gridthree, div.gridfour, div.gridfive { grid-template-columns: repeat(2, 49%); /* for bigger phones, use 2 columns with 49% width */ } div.button { float: left; width: 100%; } } @media only screen and (min-width: 600px) { div.gallery { /* turn on the borders for bigger screens */ border: 2px solid white; border-radius: 16px; /* rounded corners */ width: 90%; /* 90% of the wscreen width */ padding: 6px; /* similar to CELLPADDING - add space around the inner border */ max-width: 1100px; /* no wider than 1100 pixels */ margin-bottom: 12px; /* add some space below each gallery box so they're not touching */ } img.topbanner { content: url(/logos/sheerio-logo-800.png); } div.gridthree, div.gridfour, div.gridfive { grid-template-columns: repeat(3, 33%); /* 3 columns for small browsers */ } div.button { width: 33%; } div.button p {text-align:left} div.linkbox { border-radius: 6px; border: 2px solid #D2B48C; /* tan border */ } div.bio { width: 45%; float: left; text-align: left; margin-left: 3%; } } @media only screen and (min-width: 800px) { div.gridfour, div.gridfive { grid-template-columns: repeat(4, 25%); /* 4 columns for Daily Galleries */ } div.linkbox { max-width: 900px; } li { font-weight: bold; } } /* large size */ @media only screen and (min-width: 1000px) { div.gridfive { grid-template-columns: repeat(5, 20%); /* 5 columns for the big galleries */ } img.topbanner { content: url(/logos/sheerio-logo-1100.png); } } }