/* So you like the style of impress.js demo? Or maybe you are just curious how it was done? You couldn't find a better place to find out! Welcome to the stylesheet impress.js demo presentation. Please remember that it is not meant to be a part of impress.js and is not required by impress.js. I expect that anyone creating a presentation for impress.js would create their own set of styles. But feel free to read through it and learn how to get the most of what impress.js provides. And let me be your guide. Shall we begin? */ /* We start with a good ol' reset. That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ You can probably argue if it is needed here, or not, but for sure it doesn't do any harm and gives us a fresh start. */ 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } /* Now here is when interesting things start to appear. 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:'FrutigerLTW01-45Light', sans-serif; } /* 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; 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 { } .page-footer-logo{ position: fixed; left: 20px; bottom: 20px; height: 40px; } .page-footer-logo.right{ right: 20px; left: auto; } /* Because the main point behind the impress.js demo is to demo impress.js we display a fallback message for users with browsers that don't support all the features required by it. All of the content will be still fully accessible for them, but I want them to know that they are missing something - that's what the demo is about, isn't it? And then we hide the message, when support is detected in the browser. */ .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; } /* Now let's style the presentation steps. We start with basics to make sure it displays correctly in everywhere ... */ .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:'FrutigerLTW01-45Light', sans-serif; font-size: 48px; 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.1; z-index: 500; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } #webdesign.step.past{ opacity: 0.9; } .impress-enabled .step.future { opacity: 0; } .impress-enabled .step.active { opacity: 1; z-index: 1000; } /* These 'slide' step styles were heavily inspired by HTML5 Slides: http://html5slides.googlecode.com/svn/trunk/styles.css ;) They cover everything what you see on first three steps of the demo. */ .slide { display: block; width: 900px; height: 700px; padding: 40px 60px; background-color: #ffffff; 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-family:'FrutigerLTW01-45Light', sans-serif; font-size: 30px; line-height: 150%; letter-spacing: -1px; } .slide .logo{ margin-bottom: 50px; } h1{ font-family:'FrutigerLTW01-77BlackCn', sans-serif; color: #666666; } .slide h1{ font-size: 60px; line-height: 120%; margin-bottom: 40px; font-weight: normal; } . .links a{ display: block; } .slide .date{ position: absolute; bottom: 20px; right: 40px; font-size: 16px; } .slide .spacer{ margin-bottom: 40px; } .slide .right{ position: absolute; right: 20px; } .slide .full{ display: block; width: 100%; height: auto; } .slide ul{ list-style-type: disc; } .slide ul ul{ list-style-type: disc; font-size: 80%; } .slide ul li{ margin-left: 40px; } .slide ul ul li{ margin-left: 60px; } .slide ul.features.pros{ color: #79a064; } .slide ul.features.cons{ color: #cc0000; } .slide ul.features{ float: left; width: 50%; list-style-type: none; float: left; width: 50%; list-style-type: none; } .slide ul.features li{ position: relative; } .slide ul.features li:before{ position: absolute; left: -30px; top: 10px; font-size: 80%; display:inline-block;font-family:"Ionicons";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } .step ul.icons li{ position: relative; margin-left: 35px; } .step ul.icons li:before{ position: absolute; left: -35px; top: 21px; font-size: 60%; display:inline-block;font-family:"Ionicons";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } .step ul.icons.chevron li:before{ content:"\f125"; } .step ul.icons.check li:before{ content:"\f122"; color: #79a064; } .slide ul.features.pros li:before{ content:"\f122"; } .slide ul.features.cons li:before{ content:"\f2d7"; } .slide q { display: block; font-size: 50px; line-height: 72px; margin-top: 100px; } .slide q strong { white-space: nowrap; } .step p{ line-height: 120%; margin-bottom: 30px; font-size: 30px; } .step ul{ list-style-type: disc; font-size: 30px; margin-left: 30px; margin-bottom: 30px; float: left; line-height: 120%; } .step ul li{ margin-bottom: 10px; } .step h1{ font-size: 49px; } h1.title-start{ font-size: 60px; line-height: 100%; margin-bottom: 30px; } h1.title-start span{ display: block; font-size: 120px; line-height: 100%; } h1.title-start span small{ font-size: 80px; } .golive-large{ font-family:'FrutigerLTW01-77BlackCn', sans-serif; font-size: 240px; display: block; text-align: center; line-height: 100%; margin: 0; padding: 0; color: #666666; } .golive-small{ font-family:'FrutigerLTW01-77BlackCn', sans-serif; font-size: 140px; display: block; text-align: center; line-height: 100%; margin: 0; padding: 0; color: #666666; } .step img{ float: right; height: auto; display: inline-block; } #step-1 img{ width: 300px; } #step-2 img{ width: 300px; margin-top: -30px; margin-right: 30px; } #step-3 img{ width: 360px; margin-top: 20px; margin-right: 20px; } #step-4 img{ width: 360px; margin-left: 10px; } #step-5 img{ width: 360px; margin-left: 10px; } #step-6 img{ width: 310px; } #step-7 img{ width: 380px; margin-top: 40px; } #step-8 img{ width: 280px; margin-top: -100px; margin-right: 20px; } #step-9 img{ width: 300px; margin-top: -80px; margin-right: -90px; } #step-10 img{ width: 320px; margin-top: -30px; } #golive img{ width: 280px; margin-top: -220px; } #golive.active img{ -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 4s; /* Firefox < 16 */ -ms-animation: fadein 4s; /* Internet Explorer */ -o-animation: fadein 4s; /* Opera < 12.1 */ animation: fadein 4s; } .btn-holder{ clear: both; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* The last step is an overview. There is no content in it, so we make sure it's not visible because we want to be able to click on other steps. */ #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; } .future{ visibility: hidden; } .imagelightbox-arrow { position: fixed; display: block; cursor: pointer; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #666666; font-size: 30px; line-height: 60px; bottom: 60px; width: 60px; z-index: 9999999; opacity: 0.6; background-color: rgba(255,255,255, 0.6); } .imagelightbox-arrow.right:after { content: "\f105"; } .imagelightbox-arrow.left:after { content: "\f104"; } .imagelightbox-arrow.right { padding-right: 20px; right: 0; text-align: right; } .imagelightbox-arrow.left { padding-left: 20px; left: 0; text-align: left; } .imagelightbox-arrow.hidden{ display: none; } @media only screen and (min-width: 560px){ .imagelightbox-arrow.right, .imagelightbox-arrow.left { font-size: 45px; line-height: 90px; width: 90px; text-align: center; padding: 0; } } #golive{ text-align: center; } .btn-large{ text-align: left; display: inline-block; clear: both; box-sizing: border-box; -moz-box-sizing: border-box; border: 1px solid rgba(17, 95, 185, 0.3); cursor: pointer; margin-top: 80px; padding: 15px 60px 15px 20px; font-family: 'FrutigerLTW01-77BlackCn'; font-size: 20px; color: #ffffff; text-decoration: none; position: relative; line-height: 24px; border-radius: 5px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#115fb9+0,115fb9+23,115fb9+100&0.9+0,0.8+100 */ background: -moz-linear-gradient(top, rgba(17,95,185,0.8) 0%, rgba(17,95,185,0.9) 23%, rgba(17,95,185,0.9) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,95,185,0.8)), color-stop(23%,rgba(17,95,185,0.9)), color-stop(100%,rgba(17,95,185,0.9))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(17,95,185,0.8) 0%,rgba(17,95,185,0.9) 23%,rgba(17,95,185,0.9) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(17,95,185,0.8) 0%,rgba(17,95,185,0.9) 23%,rgba(17,95,185,0.9) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(17,95,185,0.8) 0%,rgba(17,95,185,0.9) 23%,rgba(17,95,185,0.9) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(17,95,185,0.8) 0%,rgba(17,95,185,0.9) 23%,rgba(17,95,185,0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6115fb9', endColorstr='#cc115fb9',GradientType=0 ); /* IE6-9 */ text-shadow: 1px 1px 2px rgba(255,255,255,0.1); } .btn-large:after{ content:"\f101"; display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; position: absolute; right: 20px; font-size: 40px; line-height: 40px; top: 50%; margin-top: -20px; box-sizing: border-box; -moz-box-sizing: border-box; } .btn-large:hover{ background: -moz-linear-gradient(top, rgba(17,95,185,0.9) 0%, rgba(17,95,185,0.8) 23%, rgba(17,95,185,0.8) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,95,185,0.9)), color-stop(23%,rgba(17,95,185,0.8)), color-stop(100%,rgba(17,95,185,0.8))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(17,95,185,0.9) 0%,rgba(17,95,185,0.8) 23%,rgba(17,95,185,0.8) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(17,95,185,0.9) 0%,rgba(17,95,185,0.8) 23%,rgba(17,95,185,0.8) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(17,95,185,0.9) 0%,rgba(17,95,185,0.8) 23%,rgba(17,95,185,0.8) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(17,95,185,0.9) 0%,rgba(17,95,185,0.8) 23%,rgba(17,95,185,0.8) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6115fb9', endColorstr='#cc115fb9',GradientType=0 ); /* IE6-9 */ color: #ffffff; } body:not(.impress-supported) { box-sizing: border-box; -moz-box-sizing: border-box; } body:not(.impress-supported) .imagelightbox-arrow{ position: absolute; bottom: 0; } body:not(.impress-supported) .step{ display: none; width: 100%; margin: 0; padding: 0 20px 0 20px; box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } body:not(.impress-supported) .step p{ line-height: 120%; margin-bottom: 20px; font-size: 16px; } body:not(.impress-supported) .step ul{ list-style-type: disc; font-size: 16px; margin-left: 20px; margin-bottom: 20px; line-height: 120%; float: left; } body:not(.impress-supported) .step h1{ font-size: 24px; } body:not(.impress-supported) h1.title-start{ font-size: 20px; line-height: 100%; margin-bottom: 30px; } body:not(.impress-supported) h1.title-start span{ display: block; font-size: 35px; line-height: 100%; } body:not(.impress-supported) h1.title-start span small{ font-size: 20px; } body:not(.impress-supported) .golive-large{ font-size: 80px; } body:not(.impress-supported) .golive-small{ font-size: 60px; } body:not(.impress-supported) #step-1 img{ width: 25%; } body:not(.impress-supported) #step-2 img{ width: 25%; margin-top: 0; } body:not(.impress-supported) #step-3 img{ width: 25%; } body:not(.impress-supported) #step-4 img{ width: 25%; } body:not(.impress-supported) #step-5 img{ width: 25%; } body:not(.impress-supported) #step-6 img{ width: 25%; } body:not(.impress-supported) #step-7 img{ width: 25%; } body:not(.impress-supported) #step-8 img{ width: 25%; } body:not(.impress-supported) #step-9 img{ width: 25%; margin-top: -40px; margin-right: 0; } body:not(.impress-supported) #step-10 img{ width: 25%; } body:not(.impress-supported) #golive img{ width: 30%; margin-top: -60px; }