/* Copyright (C) 2007-2020 Bristle Software, Inc.
*  
*  This program is free software; you can redistribute it and/or modify
*  it under the terms of the GNU General Public License as published by
*  the Free Software Foundation; either version 1, or (at your option)
*  any later version.
*  
*  This program is distributed in the hope that it will be useful,
*  but WITHOUT ANY WARRANTY; without even the implied warranty of
*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*  GNU General Public License for more details.
*  
*  You should have received a copy of the GNU General Public License
*  along with this program; if not, write to the Free Software
*  Foundation, Inc.
*/

/******************************************************************************
* com_bristle_jslib_Presentation.css
*******************************************************************************
* Purpose:  
*       CSS stylesheet for the Bristle Software JavaScript Presentation Library
* Usage:
*       - The typical scenario for using this file is...
*               <link rel='stylesheet' 
*                     type='text/css' 
*                     href='com_bristle_jslib_Presentation.css'>
*         ... Use stylesheet like any other CSS stylesheet ...
* Assumptions:
*       - None.
* Effects:
*       - None.
* Anticipated Changes:
* Notes:
* Implementation Notes:
* Portability Issues:
* Revision History:
*   $Log$
******************************************************************************/

/* Have to explicitly tell browsers to respect the EXIF info stored in the
   image about how the image should be rotated.  Otherwise, images taken with
   a camera held sideways (portrait vs landscape) and then rotated on a 
   Mac or other computer (which produces EXIF info, but doesn't otherwise
   affect the actual pixels of the image) are shown without the EXIF
   rotation and are still sideways, or upside down, or whatever.  Why is 
   this not the default for all browsers!?!?!
*/
img
{
   image-orientation: from-image
}

body
{
    /* Clean, contemporary font, per Roy Sewall */
    font-family: Calibri, sans-serif;
}

/* Div to hold the body of each slide
*/
div.com_bristle_jslib_css_Presentation_slideContentDIV 
{
/* Note: Don't do this.  It's not as useful as using position:fixed for the 
         footer.  Scroll bars on the div are distracting.
        position:absolute;
        height:500px;
        overflow:auto;
*/
}
  
/* Buttons or other elements inside the slide that should be shown when 
   the slide is shown standalone, but hidden when the slide is shown in 
   the context of a slideshow.
*/
div.com_bristle_jslib_css_Presentation_slideContentDIV .com_bristle_jslib_css_Presentation_hide_during_slideshow
{
        display:none;
}

/* Slide footer */
div.com_bristle_jslib_css_Presentation_footerDIV 
{
        position:fixed;
        width:100%;
}

/* All buttons, including nested buttons and their outer buttons
   and all button-sized text
*/
.spanSlideNumber,
.spanSlideCount,
.com_bristle_jslib_css_Presentation_button_font_size,
.com_bristle_jslib_css_Presentation_outerButton,
.com_bristle_jslib_css_Presentation_button,
.com_bristle_jslib_css_Presentation_outerButton .com_bristle_jslib_css_Presentation_button
{
        /* Seems like a good size on phones, tablets and computers.
           Express it in px, not as "large" to avoid sometimes being the
           wrong size on some phones.
        */
        font-size:18px;
}

/* All buttons, including nested buttons and their outer buttons */
.com_bristle_jslib_css_Presentation_outerButton,
.com_bristle_jslib_css_Presentation_button,
.com_bristle_jslib_css_Presentation_outerButton .com_bristle_jslib_css_Presentation_button
{
        cursor:pointer;
        color:purple;
        background-color:lightblue;
        /* Keep the top/bottom padding of all buttons the same, including 
           nested buttons, and the outer buttons that enclose them.
           Otherwise, the borders of the nested buttons don't align at 
           top/bottom with those of the enclosing button.
           Note: With Calibri font in Firefox (but not Chrome or Safari),
                 setting both top/bottom to 0rem looks good at bottom, 
                 but cramped at top.
                 Setting just the top to 0.1rem looks better in Firefox, 
                 but noticeably asymmetric in Chrome and Safari. 
                 Setting both to 0.1rem works best, even though it's a 
                 little asymmetric in Firefox.
                 ??Setting top to non-zero causes buttons to overlap
                 ??slightly when they wrap to 2 rows on a narrow screen.
                 ??Switching buttons from SPAN to DIV may fix this, or
                 ??at least allow us to use top-margin, which may fix it.
        */
        padding-top:0.1rem;
        padding-bottom:0.1rem;
        /* A little left and right padding looks good */
        padding-left:0.5rem;
        padding-right:0.5rem;
        /* Keep the radius at font height plus top and bottom padding for a
           nice rounded semi-circular curve at each end.
        */
        border-radius:1.2rem;
        /* A thin black border makes the buttons look crisper.  Per Brita. */
        border-width:1px;
        border-style:solid;
        border-color:black;
        /* Top and bottom margins seem to be ignored on Mac Firefox and Mac 
           Chrome.  Also on Mac Safari and iPad.  Why?  See:
           - https://www.thecodingfox.com/blog/collapsing-margins */
        margin-top:0rem;
        margin-bottom:0rem;
        margin-left:0rem;
        /* Horizontal space between buttons and to right of rightmost button */
        margin-right:0.5rem;
        /* No.  SPAN elements have no width.
        min-width:3rem;
        */
}

/* Buttons that are nested inside other buttons */
.com_bristle_jslib_css_Presentation_outerButton .com_bristle_jslib_css_Presentation_button
{
        /* No right margin for nested buttons.  Prevents right border of
           nested button from aligning with that of the enclosing button.
           Also leaves extra space to the right of each nested button.
        */
        margin-right:0rem;
}

/* Buttons that contain nested buttons */
.com_bristle_jslib_css_Presentation_outerButton
{
        padding-left:0rem;
        padding-right:0rem;
}

/* Buttons and button-sized text on small screens 
   Note: Per site: https://www.app-press.com/documentation/device-screen-sizes
         iPhone and Android phone sizes can be as wide as 1280px in landscape
         mode, and iPad and Android tablets can be as narrow as 1440px in 
         portrait mode.  This should select all phones, in portrait or 
         landscape modes, but no tablets.
         ?? Bug: This simpler selector:
         ??    @media all and (max-width:1280px)
         ?? selects Fred's iPad Mini in landscape mode also.  For some
         ?? reason, in landscape mode it reports a narrower width than in
         ?? portrait mode, so we have to explicitly check for landscape mode.
         ?? Useful info at http://stephen.io/mediaqueries/
*/
@media all and (max-width:1280px) and (orientation:portrait)
{
    .spanSlideNumber,
    .spanSlideCount,
    .com_bristle_jslib_css_Presentation_button_font_size,
    .com_bristle_jslib_css_Presentation_outerButton,
    .com_bristle_jslib_css_Presentation_button,
    .com_bristle_jslib_css_Presentation_outerButton .com_bristle_jslib_css_Presentation_button
    {
        /* Seems like a good size on narrow portrait screen.
           Express it in px, not as "2.0rem" to avoid sometimes being the
           wrong size on some phones.
        */
        font-size:32px;
    }
}

/* The table used for a single slide thumbnail in album mode */
.com_bristle_jslib_css_Presentation_album_slideTABLE
{
        padding-top:0em;
        padding-bottom:0em;
        padding-left:0em;
        padding-right:0em;
        border-width:0px;  /* ?? Does 1px make the margin work?  */
        border-style:solid;
        border-color:black;
        /* Top and bottom margins seem to be ignored on Mac Firefox and Mac 
           Chrome.  Why?  But not on Mac Safari, and not on iPad.  See:
           - https://www.thecodingfox.com/blog/collapsing-margins */
        margin-top:0em;
        margin-bottom:0em;
        margin-left:0em;
        margin-right:0em;
        /* Flow slide thumbnails into multiple rows as page gets wider */
        display:inline;
}

/* Thumbnail images in album mode */
.com_bristle_jslib_css_Presentation_album_slideTABLE img
{
        padding-top:0em;
        padding-bottom:0em;
        padding-left:0em;
        padding-right:0em;
        /* 1 pixel black border makes the picture look crisper, especially
           pics with light edges, like sky, etc.  Per Brita. */
        border-width:1px;
        border-style:solid;
        border-color:black;
        margin-top:0em;
        margin-bottom:0em;
        margin-left:0em;
        margin-right:0em;
}

/* The table used for a single slide in slideshow mode */
.com_bristle_jslib_css_Presentation_slideshow_slideTABLE
{
        /* Space above bottom border to separate from "Return to Album" 
           button below caption.  Per Brita. */
        padding-top:0em;
        padding-bottom:0.5em;
        padding-left:0em;
        padding-right:0em;
        /* 3 pixel black border frames the slide nicely.  Per Brita. */
        border-width:3px;
        border-style:solid;
        border-color:black;
        /* Space below border to separate from footer with slide count and 
           button.  Per Brita. */
        margin-top:0em;
        margin-bottom:1em;
        margin-left:0em;
        margin-right:0em;
}

/* Popup options panel */
#com_bristle_jslib_Presentation_divOptions
{
        /* Position options panel in a fixed location, so it doesn't move
           if the user scrolls.
        */
        position:fixed;
        /* Top is overridden dynamically by JS code, but uses this value
           as the offset from the top of divSlideContent, rather than 
           from the top of the window.  So, the options panel always 
           stays aligned with the top of divSlideContent, regardless of 
           window size, font size, etc.  For many slides, the user never
           scrolls because the JS code sizes the slide to fit the entire
           window.  But when the user DOES scroll, the options panel 
           intentionally does NOT scroll away.
        */
        top:10;
        /* This right offset looks good with the top offset above.  For a
           typical photo album slide, the top right corner of the options
           panel aligns nicely with the visible top and right borders of
           the slide.
        */
        right:19;
        /* White, with 0.6 opacity of the background only */
        background-color:rgba(255, 255, 255, 0.6);
        /* Max value to keep it on top */
        z-index: 2147483638;
        border-width:1px;
        border-style:solid;
        border-color:black;
        padding-right:2rem;
        padding-left:2rem;
        padding-top:1rem;
        padding-bottom:1rem;
}

/* Options panel buttons */
#com_bristle_jslib_Presentation_divOptions .com_bristle_jslib_css_Presentation_button
{
        /* Light blue, with 0.6 opacity of the background only */
        background-color:rgba(173, 216, 230, 0.6);
}

/* Shims for spacing */
.com_bristle_jslib_css_Presentation_small_vertical_space
{
        font-size:2px;
}

/* Divs used to show error messages */
.com_bristle_jslib_Presentation_divJavaScriptDisabled,
.com_bristle_jslib_Presentation_divErrorLoadingFirstSlide,
.com_bristle_jslib_Presentation_divErrorLoadingSlide
{
        font-size:x-large;
        padding-top:2rem;
        padding-bottom:2rem;
        padding-left:2rem;
        padding-right:2rem;
        max-width:50rem;
        /* Left align the contents of the frame */
        text-align:left;
        /* Show a thick, solid, black frame */
        border-width:3px;
        border-style:solid;
        border-color:red;
        /* Center the div, including its border in the screen width */
        margin: auto;
        margin-top:10px;
        margin-bottom:10px;
}

.com_bristle_jslib_Presentation_divErrorLoadingFirstSlide table,
.com_bristle_jslib_Presentation_divErrorLoadingSlide table
{
        /* Without this, font size is not inherited in tables used to 
           lay out the error message.  So it defaults to the wrong size.
        */
        font-size:inherit;
}

/* Allow words to break and wrap to new lines */
.spanCaption,
.com_bristle_jslib_Presentation_anchorImageFileName,
.com_bristle_jslib_Presentation_spanImageFileName,
.com_bristle_jslib_Presentation_allowWordWrap,
.com_bristle_jslib_Presentation_divJavaScriptDisabled,
.com_bristle_jslib_Presentation_divErrorLoadingFirstSlide,
.com_bristle_jslib_Presentation_divErrorLoadingSlide
{
    /* Also considered:
           word-wrap: break-word;
           overflow-wrap: break-word;
       Per https://css-tricks.com/almanac/properties/o/overflow-wrap/
       - word-wrap is old, was unique to IE, gradually supported elsewhere,
         now replaced by overflow-wrap
       - word-break is not strictly related to overflow prevention.
         It's used for non-English words.
       Overall, overflow-wrap seemed like the best choice.  But from 
       trial and error, I see that word-break works best.  It allows
       long words to split and wrap to keep all thumbnail slides the
       width of their pictures, not growing wider to prevent wrapping 
       of their filenames.
    */
    word-break:break-word;
}

/* Captions in the slideshow */
.com_bristle_jslib_css_Presentation_slideshow_slideTABLE .spanCaption
{
    /* Set font size in pixels.  Was having trouble with it being very small 
       on some phones.  Perhaps other units like em or rem would have worked
       just as well?
    */
    font-size:28px;
}

/* Captions in the album */
.com_bristle_jslib_css_Presentation_album_slideTABLE .spanCaption
{
    font-size:18px;
}

/* Image file names in the slideshow */
.com_bristle_jslib_css_Presentation_slideshow_slideTABLE .com_bristle_jslib_Presentation_anchorImageFileName,
.com_bristle_jslib_css_Presentation_slideshow_slideTABLE .com_bristle_jslib_Presentation_spanImageFileName
{
    /* Set font size in pixels.  Was having trouble with it being very large 
       on some phones.  Perhaps other units like em or rem would have worked
       just as well?
    */
    font-size:16px;
}

/* Image file names in the slideshow */
.com_bristle_jslib_css_Presentation_album_slideTABLE .com_bristle_jslib_Presentation_anchorImageFileName,
.com_bristle_jslib_css_Presentation_album_slideTABLE .com_bristle_jslib_Presentation_spanImageFileName
{
    /* Set font size in pixels.  Was having trouble with it being very large 
       on some phones.  Perhaps other units like em or rem would have worked
       just as well?
    */
    font-size:12px;
}