/* * =================== root\aussiePlaces\includes\aussiePlaces.css ====================== * Bespoke CSS Stylesheet. Do not use any other Stylesheet except Google Font for h1. * Only for aussiePlaces pages within mikesalon.com . * Note that Image Viewer pages have their own stylesheet, imageViewer.css * * Invoke this stylesheet directly from in whereverSTATE.php pages. * Do not call head() in ms.com/includes/common.pho * * CSS Reference: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp * */ body { font-family: 'Trebuchet MS', Verdana, sans-serif; font-size: 1.2em; background: linen; } /* NAVIGATION */ nav a { color: gray; padding: 0; margin-right: 5px; border: none; text-decoration: none; background: white;} nav a:hover { background: gray; color: white;} /* SPLASH & HEADING */ .splash { position: relative;} .splash img {width: 100%} .splash h1 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 3em; font-style: normal;} .splash h2 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 2em; font-style: normal;} .splash h3 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 1.5em; font-style: normal;} .splash div.headings { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%);} .splash img.logo { width: 150px; position: absolute; top: 0; left: 0;} @media screen and (max-width: 1000px) { .splash h1 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 2em; font-style: normal; margin: 0;} .splash h2 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 1.5em; font-style: normal; margin: 0;} .splash h3 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 1.2em; font-style: normal; margin: 0;} } @media screen and (max-width: 700px) { .splash h1 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 1.5em; font-style: normal; margin: 0;} .splash h2 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 1.2em; font-style: normal; margin: 0;} .splash h3 { color: yellow; text-shadow: 2px 2px 0 black; font-family: "Lobster", sans-serif; font-size: 1.0em; font-style: normal; margin: 0;} } /* FONT AND TEXT LAYOUT */ .content { width: 94%; margin-left: 3%; } /* EXPANDABLE DETAILS */ details { background: black; color: white; padding: 0; width: auto;} summary { outline: none; font-size: 1.15em; list-style: none; } summary::-webkit-details-marker { display: none; } summary:before { background: #da291c; border-color: #da291c; border-radius: 15px; content: "+"; color: #fff; float: left; font-size: 1em; font-weight: bold; margin: -2px 10px 0 0; padding: 1px 0 3px 0; text-align: center; width: 30px; } details[open] summary:before { content: "-"; } /* IMAGE THUMBNAILS GRID */ .grid {display: flex; flex-wrap: wrap;} .cross {font-size: 2em; border: 1px solid black; background: white; cursor: pointer; position: absolute; top: 0; right: 0; width: 40px; height: 40px; text-align: center; padding:0; margin:0; padding: 0;} .modal {display:none; position:fixed; top:20px; left:20px; right: 20px; bottom: 20px; background:beige; object-fit:scale-down; overflow:hidden; border: 5px solid transparent; /* Required for border-image to work */ border-image: linear-gradient(to right, blue, green) 1; } .bigImage {max-width: 100%; max-height: 100%;} p {padding: 10px; text-align:justify;} cite { font-size: small;} footer {color: gray; text-align: right;} button { cursor: pointer; } .square { position: relative; margin: 5px; width: 300px; border: 5px groove black; border-radius: 15px;} .square:hover {border: 5px groove white;} .square a { margin: 0;} .square a img {width: 100%;} .footnote { font-size: small; font-style: italic; border: 1px solid black; background: beige; margin: 40px; max-width: 80%; float: left;} .footnote h3 { padding-left: 10px;} div.definition { font-size: smaller; font-style: italic; background: black; color: white; } .quirky { margin: 25px; padding: 15px; background: #BFE2F9; font-size: 0.8em; box-shadow: 20px 20px 10px grey; } /* 2026-08-15: Parchment Background styling developed with CoPilot */ body { background-image: /* softened horizontal grain */ linear-gradient( rgba(0,0,0,0.06) 1px, transparent 1px ), linear-gradient( rgba(0,0,0,0.05) 2px, transparent 2px ), linear-gradient( rgba(0,0,0,0.04) 1px, transparent 1px ), /* subtle vertical noise */ linear-gradient( 90deg, rgba(0,0,0,0.015) 1px, transparent 1px ), /* diagonal fibres (adds randomness) */ linear-gradient( 135deg, rgba(0,0,0,0.02) 1px, transparent 1px ), linear-gradient( 45deg, rgba(0,0,0,0.02) 1px, transparent 1px ), /* warm mottling (two scales) */ radial-gradient( rgba(210,180,140,0.05) 2px, transparent 2px ), radial-gradient( rgba(222,184,135,0.04) 3px, transparent 3px ); background-size: 100% 8px, /* softened horizontal grain */ 100% 18px, /* uneven thicker grain */ 100% 5px, /* fine secondary grain */ 3px 100%, /* vertical noise */ 140px 140px, /* diagonal fibres (large scale) */ 90px 90px, /* diagonal fibres (small scale) */ 160px 160px, /* warm mottling */ 220px 220px; /* larger warm mottling */ }