/********************************* * 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) * * toogle between slideshow/outline mode using t-key */ html, body, .presentation { margin: 0; padding: 0; } .slide { display: none; position: absolute; top: 0; left: 0; margin: 0; padding: 2% 4% 0% 4%; /* css note: order is => top right bottom left */ width: 92%; height: 95%; /* css note: to get to 100% add padding/border/margin */ overflow-x: hidden; overflow-y: auto; z-index: 2; } #slide1 { display: block; } .notes { display: none; } /* handout notes/note (use note? handout? notes? */ /********* format layout block * * .layout * > #header * > #footer * > #controls (holding navigation controls) * > #navLinks * > #toggle * > #navList * > #jumplist * > #currentSlide (e.g. 1/7) * */ .layout { display: block; } #header { position: fixed; top: 0; left: 0; width: 100%; height: 0.5em; z-index: 1; } #footer { position: fixed; top: auto; bottom: 0; padding: 1em 0; /* css note: order is => 1st top,bottom; 2nd right,left */ width: 100%; height: 1em; 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 */ #footer h1 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; } #footer h2 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; font-style: italic; } /************************* * format for navigation controls */ #controls { position: fixed; left: 60%; bottom: 0; width: 40%; z-index: 100; text-align: right; font: bold 1.2em Verdana, Helvetica, sans-serif; } #controls :focus { outline: 1px dotted white;} #controls #navLinks { text-align: right; margin: 0; visibility: hidden; } #controls #navLinks a { padding: 0; margin: 0 0.5em; cursor: pointer; border: none; } #controls #navLinks :link, #controls #navLinks :visited {text-decoration: none; } #controls #navList #jumplist { background: white; color: black; } /************************* * format for * currentSlide block ( e.g. 2/20 ) */ #currentSlide { position: fixed; left: 45%; bottom: 1em; width: 10%; z-index: 10; text-align: center; font-size: 0.8em; } #currentSlide :link, #currentSlide :visited { text-decoration: none; }