/*
 * =================== root\includes\common.css ======================
 * Common Stylesheet for all mikesalon.com pages,
 * except that Image Viewer pages have their own stylesheet, imageViewer.css
 *
 * Groups, like themes, aussiePlaces, events define local styling in head().
 * Typically for splash header fonts and body background-color.
 * Groups do not use local .css stylesheets.
 * */

/* BODY 
body texture is defined at the bottom of this page 
*/
body {  
    font-family: 'Trebuchet MS', Verdana, sans-serif; 
    font-size: 1.2em; 
    margin: 0;
}

/*  TOPLINE NAVIGATION */
nav {  
    position: relative;
    z-index: 2;          /* keeps nav above splash */
    background: transparent;
}
nav a { color: black; 
    padding: 0; 
    margin-right: 5px; 
    border: none; 
    text-decoration: none; 
    background: white; 
    opacity: 50%;
}
nav a:hover { 
    background: black; 
    color: white;
}

/* SPLASH IMAGES & HEADING, RESPONSIVE */
.splash { 
    position: relative;
    top: -25px;
    margin: 0;
    padding: 0;
    z-index: 1;
}
.splash img {
    display: block;
    width: 100vw; 
    margin: 0;
    padding: 0;
}

.splash h1 { color: yellow; text-shadow: 2px 2px 0 black; font-size: 3em; font-style: normal;}
.splash h2 { color: yellow; text-shadow: 2px 2px 0 black; font-size: 2em; font-style: normal;}
.splash h3 { color: yellow; text-shadow: 2px 2px 0 black; 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: 10px; left: 0; }

@media screen and (max-width: 1000px) {
  .splash h1 { color: yellow; text-shadow: 2px 2px 0 black; font-size: 2em; font-style: italic; margin: 0;}
  .splash h2 { color: yellow; text-shadow: 2px 2px 0 black; font-size: 1.5em; font-style: italic; margin: 0;}
  .splash h3 { color: yellow; text-shadow: 2px 2px 0 black; font-size: 1.2em; font-style: italic; margin: 0;}
}

@media screen and (max-width: 700px) {
  .splash h1 { color: yellow; text-shadow: 2px 2px 0 black; font-size: 1.5em; font-style: oblique; margin: 0;}
  .splash h2 { color: yellow; text-shadow: 2px 2px 0 black; font-size: 1.2em; font-style: oblique; margin: 0;}
  .splash h3 { color: yellow; text-shadow: 2px 2px 0 black; font-size: 1.0em; font-style: oblique; margin: 0;}
}

.splashText {color: yellow; text-align: center; position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); text-shadow: 2px 2px 0 black;}



/* CONTENT */
.content {
  position: relative;
  z-index: 1;              /* ensures content sits below nav */
}

/* MARGINS WITHIN PAGE CONTENT */
.content { width: 94%; margin: 0; text-align: center;}

/* SQUARE MENU BUTTONS */
button { cursor: pointer; }
.square { 
    position: relative; 
    margin: 5px; 
    width: 250px; 
    border: 5px groove black; 
    border-radius: 15px; 
    padding: 0; 
    overflow: hidden;
}
.square:hover {border: 5px groove white;}
.square a { position: relative; margin: 0; overflow: hidden;}
.square a img {height: 260px; position: relative; margin: auto; overlap: hidden;}

/* FONTS WITHIN SQUARES */
.square h3.squareText {
    color: yellow; 
    text-align: center; 
    position: absolute; 
    top: -150px; left: 50%; 
    transform: translate(-50%, -50%); 
    text-shadow: 2px 2px 0 black;
}

/* PARAGRAPHS & TEXT */
p {padding: 10px; text-align:justify;}

/* SPECIAL SEGMENTS */
cite { font-size: small;}
.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;}
.footnote img {height: 80px;}
.bigImage {max-width: 100%; max-height: 100%;}

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; }

/* FOOTER */
footer {color: gray; text-align: right;}

/* UNDER RECONSTRUCTION */
.underConstruction {
    position: relative;
    left: 10%;
    border: 5px solid white;
    color: white;
    background: black;
    text-align: center;
    width: 80%;
}

/* EXPANDABLE BOX 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;
}

/* TEXTURED BACKGROUND */
body {
    background-image:
        /* main diagonal streaks */
        repeating-linear-gradient(
            35deg,
            rgba(0,0,0,0.12) 0px,
            rgba(0,0,0,0.12) 1px,
            transparent 3px,
            transparent 5px
        ),
        /* secondary softer streaks */
        repeating-linear-gradient(
            35deg,
            rgba(0,0,0,0.05) 0px,
            rgba(0,0,0,0.05) 1px,
            transparent 6px,
            transparent 8px
        ),
        /* subtle warm tint */
        linear-gradient(
            155deg,
            rgba(210,180,140,0.03),
            rgba(255,255,255,0.02)
        );
    background-size:
        80px 80px,   /* smaller grain tile */
        160px 160px, /* secondary grain */
        100%;
}