/* Copyright (C) 2007-2019 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
}

/* 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;
*/
}
  
div.com_bristle_jslib_css_Presentation_footerDIV 
{
        position:fixed;
        width:100%;
}

.com_bristle_jslib_css_Presentation_button
{
        font-size:larger;
        cursor:pointer;
        color:purple;
        background-color:lightblue;
        padding-top:0.2em;
        padding-bottom:0.1em;
        padding-left:0.5em;
        padding-right:0.5em;
        border-radius:1em;
        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:0em;
        margin-bottom:0em;
        margin-left:0em;
        /* Horizontal space between buttons and to right of rightmost button */
        margin-right:0.5em;
}

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

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

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