/*********************************
 * CSS @media projection rules (not print or screen)
 *
 * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
 * 2) screen     -> outline mode (display all slides-at-once on screen) 
 * 3) print      -> print (and print preview)
 *
 * toggle between projection/screen (that is, slideshow/outline) mode using t-key
 */

//////////////////////////////////////
// note: this is a less extendend css script, to learn more about less; see lesscss.org) 


html,
body,
.presentation { margin: 0; padding: 0; }


.slide { display: none;   /* note: only display current slide in projection mode */
         position: absolute;
         top: 0; left: 0; 
         margin: 0;
         padding: 2% 4% 0% 4%;         /* css note: order is => top right bottom left  */
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         width: 100%; height: 100%;    /* css note: lets use border-box; no need to add padding+border to get to 100% */
         overflow-x: hidden; overflow-y: auto;
         z-index: 2;
       }

.slide.current { display: block; }  /* note: only display current slide in projection mode */


/*****
 *  layout block structure:
 *
 *  .layout
 *    > #header
 *    > #footer
 */

.layout {
  
  #header, header {  position: fixed;
                     top: 0; left: 0;
                     width: 100%; height: 0.5em;
                     z-index: 1;
                   }
   
  #footer, footer {  position: fixed;
           top: auto; bottom: 0;
           padding: 1em 0;   /* css note: order is => 1st top,bottom; 2nd right,left */
           width: 100%; height: 4em;
           z-index: 5;
    
           /* todo: move font-size and font-style to blank.css */    
           font-size: 100%; font-weight: bold; 
 
           /* todo: move font-size and font-style to blank.css */

           h1 { display: block; margin: 0; padding: 0 1em; font-size: 50%; }
           h2 { display: block; margin: 0; padding: 0 1em; font-size: 50%; font-style: italic; }
   }
}



/*********************************
 * general text-alignment classes
 */

.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }


/*********************************
 * general _absolute_ font-size classes
 */

.small    { font-size: 97%; }
.x-small  { font-size: 88%; }
.xx-small { font-size: 82%; }

.large    { font-size: 103%; }
.x-large  { font-size: 112%; }
.xx-large { font-size: 118%; }

/*********************************
 * general _relative_ font-size classes
 */
 
.smaller  { font-size: 82%; }
.larger   { font-size: 118%; }