/* Made by Stéphanie, Based on http://tecfa.unige.ch/guides/impress.js/impress-demo-1/impress-min-presi.css made by DKS */ /* ------------------------------------------------------------ Reset all HTML tags ------------------------------------------------------------ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* We set up styles with default font and nice gradient in the background. And yes, there is a lot of repetition there because of -prefixes but we don't want to leave anybody behind. */ body { font-family: 'PT Sans', sans-serif; min-height: 740px; background: rgb(215, 215, 215); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); } /* Now let's bring some text styles back ... */ b, strong { font-weight: bold } i, em { font-style: italic } /* ... and give links a nice look. */ a { color: inherit; text-decoration: none; padding: 0 0.1em; background: rgba(0,65,106,0.5); text-shadow: -1px -1px 2px rgba(100,100,100,0.9); border-radius: 0.2em; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } a:hover, a:focus { background: rgba(255,255,255,1); text-shadow: -1px -1px 2px rgba(100,100,100,0.5); } /* ------------------------------------------------------------ step - must be used in every step The basic one makes sure that not so modern browser can display Impress-enabled will add extra styling ------------------------------------------------------------ */ .step { position: relative; width: 900px; padding: 40px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-family: 'Open Sans', Arial, sans-serif; font-size: 30px; line-height: 1.5; } /* ... and we enhance the styles for impress.js. Basically we remove the margin and make inactive steps a little bit transparent. */ .impress-enabled .step { margin: 0; opacity: 0.2; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } .impress-enabled .step.active { opacity: 1 } /* ------------------------------------------------------------ slide - Steps that look like slides */ .slide { display: block; width: 900px; height: 700px; padding: 40px 60px; background-color: white; border: 1px solid rgba(0, 0, 0, .3); border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); color: rgb(102, 102, 102); text-shadow: 0 2px 2px rgba(0, 0, 0, .1); font-size: 32px; line-height: 1.1; letter-spacing: -1px; } .slide p { display: block; font-size: 40px; line-height: 40px; margin-top: 50px; } .slide q { display: block; font-size: 50px; line-height: 70px; margin-top: 50px; } .slide q big { white-space: nowrap; } .slide h1 { display: block; font-size: 100px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); -ms-transform: translateZ(50px); -o-transform: translateZ(50px); transform: translateZ(50px); } .slide ul { list-style-type: square; margin-left: 2em; } .slide ol { list-style-type: upper-roman; margin-left: 2em; } .slide li { display: list-item; } /* ------------------------------------------------------------ Une couleur différente pour le background de la slide stratégie */ .couleur1 { background-color:#E9FAF9; } /* ------------------------------------------------------------ normal Normal slide, like the "slide" but no slide decorations, see above for the styled elements */ .normal { display: block; width: 900px; text-align: center; font-size: 60px; line-height: 1.1; letter-spacing: -1px; } .normal q,p { display: block; font-size: 50px; line-height: 72px; margin-top: 50px; color:darkblue; } .normal q big { white-space: nowrap; } .normal h1 { display: block; font-size: 120px; } .normal ul { list-style-type: square; margin-left: 2em; } .normal ol { list-style-type: upper-roman; margin-left: 2em; } .normal li { display: list-item; } /* ------------------------------------------------------------ Note - a smaller area for notes that should pop up */ .note { width: 300px; height: 300px; font-size: 40px; text-align: center; } .note b { display: block; font-size: 60px; line-height: 1.1; } .note big { display: block; font-size: 80px; line-height: 1; } /* Thought - medium sized area really big fonts */ .thoughts { width: 1000px; height: 800px; font-size: 60px; text-align: center; } .thoughts p,q { display: block; font-size: 80px; line-height: 1.1; } .thoughts big,b { display: block; font-size: 100px; line-height: 1; } /* ------------------------------------------------------------ picture */ .picture { text-align: center; font-size: 30px; } .picture q { color:red; transform: translate(50px, 500px) rotate(-40deg); } .picture p { font-size: 20px; } /* The big overview, it does not have content of its own */ #overview { display: none } /* We also make other steps visible and give them a pointer cursor using the `impress-on-` class. */ .impress-on-overview .step { opacity: 1; cursor: pointer; } /* ------------------------------------------------------------ impress fallback In your HTML, you can insert a fallback message that will be displayed if impress detects that your browser can't handle it ... The library will automatically assing "impress-enabled" to a presentation if ok ------------------------------------------------------------ */ .fallback-message { font-family: sans-serif; line-height: 1.3; width: 780px; padding: 10px 10px 0; margin: 20px auto; border: 1px solid #E4C652; border-radius: 10px; background: #EEDC94; } .fallback-message p { margin-bottom: 10px; } .impress-supported .fallback-message { display: none; } /* In some browsers, the element positioned in 3D (especially when it's moved back along Z axis) is not clickable, because it falls 'behind' the element. All elements, except impress-enabled ones will be unclickable. */ .impress-enabled { pointer-events: none } .impress-enabled #impress { pointer-events: auto } /* There is one funny thing I just realized. Thanks to this workaround above everything except #impress element is invisible for click events. That means that the hint element is also not clickable. So basically all of this transforms and delayed transitions trickery was probably not needed at all... But it was fun to learn about it, wasn't it? */ /* That's all I have for you in this file. Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it for you. */