/* ------------------------------------------------------------------------------------------------------------- * Cheap Pine * ------------------------------------------------------------------------------------------------------------- * Display font * -----------------------------------------------------------------------------------------------------------*/ @font-face { font-family: 'CheapPine-Sans'; src: url("../fonts/cheap-pine/style_199154.eot"); src: url("../fonts/cheap-pine/style_199154.eot?#iefix") format("embedded-opentype"), url("../fonts/cheap-pine/style_199154.woff") format("woff"), url("../fonts/cheap-pine/style_199154.ttf") format("truetype"), url("../fonts/cheap-pine/style_199154.svg#CheapPine-Sans") format("svg"); } @font-face { font-family: 'CheapPine-Shadow'; src: url("../fonts/cheap-pine/style_199155.eot"); src: url("../fonts/cheap-pine/style_199155.eot?#iefix") format("embedded-opentype"), url("../fonts/cheap-pine/style_199155.woff") format("woff"), url("../fonts/cheap-pine/style_199155.ttf") format("truetype"), url("../fonts/cheap-pine/style_199155.svg#CheapPine-Shadow") format("svg"); } @font-face { font-family: 'CheapPine'; src: url("../fonts/cheap-pine/style_199156.eot"); src: url("../fonts/cheap-pine/style_199156.eot?#iefix") format("embedded-opentype"), url("../fonts/cheap-pine/style_199156.woff") format("woff"), url("../fonts/cheap-pine/style_199156.ttf") format("truetype"), url("../fonts/cheap-pine/style_199156.svg#CheapPine") format("svg"); } /* ------------------------------------------------------------------------------------------------------------- * PT Sans * ------------------------------------------------------------------------------------------------------------- * Sans Mono: Book, Bold * -----------------------------------------------------------------------------------------------------------*/ @font-face { font-family: 'PTSansNarrowRegular'; src: url("../fonts/pt-sans/PTN57F-webfont.eot"); src: url("../fonts/pt-sans/PTN57F-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/PTN57F-webfont.woff") format('woff'), url("../fonts/pt-sans/PTN57F-webfont.ttf") format('truetype'), url("../fonts/pt-sans/PTN57F-webfont.svg#PTSansNarrowRegular") format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSansCaptionBold'; src: url("../fonts/pt-sans/PTC75F-webfont.eot"); src: url("../fonts/pt-sans/PTC75F-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/PTC75F-webfont.woff") format('woff'), url("../fonts/pt-sans/PTC75F-webfont.ttf") format('truetype'), url("../fonts/pt-sans/PTC75F-webfont.svg#PTSansCaptionBold") format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSansCaptionRegular'; src: url("../fonts/pt-sans/PTC55F-webfont.eot"); src: url("../fonts/pt-sans/PTC55F-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/PTC55F-webfont.woff") format('woff'), url("../fonts/pt-sans/PTC55F-webfont.ttf") format('truetype'), url("../fonts/pt-sans/PTC55F-webfont.svg#PTSansCaptionRegular") format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSansBoldItalic'; src: url("../fonts/pt-sans/PTS76F-webfont.eot"); src: url("../fonts/pt-sans/PTS76F-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/PTS76F-webfont.woff") format('woff'), url("../fonts/pt-sans/PTS76F-webfont.ttf") format('truetype'), url("../fonts/pt-sans/PTS76F-webfont.svg#PTSansBoldItalic") format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSansBold'; src: url("../fonts/pt-sans/PTS75F-webfont.eot"); src: url("../fonts/pt-sans/PTS75F-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/PTS75F-webfont.woff") format('woff'), url("../fonts/pt-sans/PTS75F-webfont.ttf") format('truetype'), url("../fonts/pt-sans/PTS75F-webfont.svg#PTSansBold") format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSansItalic'; src: url("../fonts/pt-sans/PTS56F-webfont.eot"); src: url("../fonts/pt-sans/PTS56F-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/PTS56F-webfont.woff") format('woff'), url("../fonts/pt-sans/PTS56F-webfont.ttf") format('truetype'), url("../fonts/pt-sans/PTS56F-webfont.svg#PTSansItalic") format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSansRegular'; src: url("../fonts/pt-sans/PTS55F-webfont.eot"); src: url("../fonts/pt-sans/PTS55F-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/PTS55F-webfont.woff") format('woff'), url("../fonts/pt-sans/PTS55F-webfont.ttf") format('truetype'), url("../fonts/pt-sans/PTS55F-webfont.svg#PTSansRegular") format('svg'); font-weight: normal; } /* custom font: */ /*@font-face { font-family: 'PT Sans'; src: url("../fonts/pt-sans/PTS55F-webfont.eot"); src: url("../fonts/pt-sans/PTS55F-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/PTS55F-webfont.woff") format('woff'), url("../fonts/pt-sans/PTS55F-webfont.ttf") format('truetype'), url("../fonts/pt-sans/PTS55F-webfont.svg#PTSansRegular") format('svg'); font-weight: normal; }*/ /*@font-face { font-family: 'PT Sans'; src: url("../fonts/pt-sans/source/PTS55F_W.eot"); src: url("../fonts/pt-sans/source/PTS55F_W.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/source/PTS55F_W.woff") format('woff'), url("../fonts/pt-sans/source/PTS55F_W.ttf") format('truetype'), url("../fonts/pt-sans/source/PTS55F_W.svg#PTSans-Regular") format('svg'); font-weight: 700; font-style: normal; }*/ @font-face { font-family: 'PT Sans'; font-style: normal; src: url("../fonts/pt-sans/source/PTS55F_W.eot"); src: local('PT Sans'), url("../fonts/pt-sans/source/PTS55F_W.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/source/PTS55F_W.woff") format('woff'), url("../fonts/pt-sans/source/PTS55F_W.ttf") format('truetype'), url("../fonts/pt-sans/source/PTS55F_W.svg#PTSans-Regular") format('svg'); } @font-face { font-family: 'PT Sans'; font-style: italic; src: url("../fonts/pt-sans/source/PTS56F_W.eot"); src: local('PT Sans Italic'), url("../fonts/pt-sans/source/PTS56F_W.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/source/PTS56F_W.woff") format('woff'), url("../fonts/pt-sans/source/PTS56F_W.ttf") format('truetype'), url("../fonts/pt-sans/source/PTS56F_W.svg#PTSans-Italic") format('svg'); } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: bold; src: url("../fonts/pt-sans/source/PTS75F_W.eot"); src: local('../fonts/pt-sans/source/PT Sans Bold'), url("../fonts/pt-sans/source/PTS75F_W.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/source/PTS75F_W.woff") format('woff'), url("../fonts/pt-sans/source/PTS75F_W.ttf") format('truetype'), url("../fonts/pt-sans/source/PTS75F_W.svg#PTSans-Bold") format('svg'); } @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: bold; src: url("../fonts/pt-sans/source/PTS76F_W.eot"); src: local('PT Sans Bold Italic'), url("../fonts/pt-sans/source/PTS76F_W.eot?#iefix") format('embedded-opentype'), url("../fonts/pt-sans/source/PTS76F_W.woff") format('woff'), url("../fonts/pt-sans/source/PTS76F_W.ttf") format('truetype'), url("../fonts/pt-sans/source/PTS76F_W.svg#PTSans-BoldItalic") format('svg'); } /* ------------------------------------------------------------------------------------------------------------- * DejaVu * ------------------------------------------------------------------------------------------------------------- * Sans Mono: Book, Bold * -----------------------------------------------------------------------------------------------------------*/ @font-face { font-family: 'DejaVuSansMonoBook'; src: url("../fonts/dejavu/DejaVuSansMono-webfont.eot"); src: url("../fonts/dejavu/DejaVuSansMono-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/dejavu/DejaVuSansMono-webfont.woff") format("woff"), url("../fonts/dejavu/DejaVuSansMono-webfont.ttf") format("truetype"), url("../fonts/dejavu/DejaVuSansMono-webfont.svg#DejaVuSansMonoBook") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'DejaVuSansMonoBold'; src: url("../fonts/dejavu/DejaVuSansMono-Bold-webfont.eot"); src: url("../fonts/dejavu/DejaVuSansMono-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/dejavu/DejaVuSansMono-Bold-webfont.woff") format("woff"), url("../fonts/dejavu/DejaVuSansMono-Bold-webfont.ttf") format("truetype"), url("../fonts/dejavu/DejaVuSansMono-Bold-webfont.svg#DejaVuSansMonoBold") format("svg"); font-weight: normal; font-style: normal; } /* ------------------------------------------------------------------------------------------------------------- * Blockletters * ------------------------------------------------------------------------------------------------------------- * Handwritten * -----------------------------------------------------------------------------------------------------------*/ @font-face { font-family: 'BloklettersPotlood'; src: url("../fonts/blockletters/Blokletters-Potlood-webfont.eot"); src: url("../fonts/blockletters/Blokletters-Potlood-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/blockletters/Blokletters-Potlood-webfont.woff") format("woff"), url("../fonts/blockletters/Blokletters-Potlood-webfont.ttf") format("truetype"), url("../fonts/blockletters/Blokletters-Potlood-webfont.svg#BloklettersPotlood") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'BloklettersBalpen'; src: url("../fonts/blockletters/Blokletters-Balpen-webfont.eot"); src: url("../fonts/blockletters/Blokletters-Balpen-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/blockletters/Blokletters-Balpen-webfont.woff") format("woff"), url("../fonts/blockletters/Blokletters-Balpen-webfont.ttf") format("truetype"), url("../fonts/blockletters/Blokletters-Balpen-webfont.svg#BloklettersBalpen") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'BloklettersViltstift'; src: url("../fonts/blockletters/Blokletters-Viltstift-webfont.eot"); src: url("../fonts/blockletters/Blokletters-Viltstift-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/blockletters/Blokletters-Viltstift-webfont.woff") format("woff"), url("../fonts/blockletters/Blokletters-Viltstift-webfont.ttf") format("truetype"), url("../fonts/blockletters/Blokletters-Viltstift-webfont.svg#BloklettersViltstift") format("svg"); font-weight: normal; font-style: normal; } /* 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: 'PT Sans', sans-serif; min-height: 740px; background: rgb(0,0,0); background-color: #f9faeb; } /* Now let's bring some text styles back ... */ b, strong { font-weight: bold } i, em { font-style: italic } /* 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: 'PT Sans'; line-height: 1.3; width: 1280px; 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; } /* 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; } /* basic styles: */ a { color: #9CB03B; text-decoration: none; padding: 0 0.1em; background: transparent; text-shadow: 0px; border-radius: 0em; transition: 0s; } a:hover, a:focus { background: rgba(255,255,255,1); /* text-shadow: -1px -1px 2px rgba(100,100,100,0.5);*/ } /* HEADLINES: */ h1, h2, h3, h4, h5 { color: rgb(0,0,0); font-family: 'CheapPine-Sans'; } h1, h2 { margin-bottom: -4px; font-weight: bold; color: #9CB03B; } h1 { font-size: 2em; line-height: 0.88em; padding: 30px; } h1.small { font-size: 1.687em; } h2 { font-size: 1.5em; line-height: 1.5em; margin-bottom: 0.2em; } p { margin-bottom: 1em; } img.preloader { width: 4px; height: 4px; margin: 3px; } /* Now let's style the presentation steps. We start with basics to make sure it displays correctly in everywhere ... */ .slide { position: relative; margin: 20px auto; box-sizing: border-box; display: block; width: 1280px; height: 1024px; padding: 0px 0px; /* background-color: #dce5b1;*/ border: 1px solid rgba(0, 0, 0, .3); /* border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1);*/ color: rgb(0,0,0); text-shadow: 0 2px 2px rgba(0, 0, 0, .1); font-family: 'PT Sans'; font-size: 40px; line-height: 55px; overflow: hidden; } div.headline { background-color: #dce5b1; } ol, ul { list-style: disc outside; margin-left: 55px; } li { display: list-item; margin-bottom: 10px; } li li { font-size: 35px; line-height: 45px; } sup { vertical-align: super; font-size: 25px; line-height: 5px; } sub { vertical-align: sub; font-size: 25px; line-height: 5px; } .right { text-align: right; right: 0px; } div.header { position: relative; z-index: 10; border-top: 0; border-bottom: 15px solid; border-image:url("../img/border.png") 15 0 17 0 repeat; background: #e8e9da; border-radius: 0; padding: 0px; } div.content { padding: 15px 30px; background-color: #f9faeb; position: absolute; background-clip: padding-box; clear: both; position: relative; overflow: visible; top: 0;/*-14px;*/ height: auto; bottom:0px; /* height: 1024px;*/ } div.footer { border-top: 15px solid; border-bottom: 0; border-image:url("../img/border_footer.png") 15 0 17 0 repeat; background-color: #575756; border-radius: 0; position: absolute; bottom: 0px; width: 100%; text-align: center; font-size: 75%; } .center { display: block; margin-left: auto; margin-right: auto; text-align: center; } .middle { display: block; margin-top: auto; margin-bottom: auto; } /* ... 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: 1; transition: opacity 0s; } .impress-enabled .step.active { opacity: 1 } .slide.future, .slide.past, .step.future, .step.past, .substep.future { opacity: 0; transition: 0.2s; pointer-events: none; } .step.present, .step.active { opacity: 1; transition: 0.2s; pointer-events: auto; } /* And as the last thing there is a workaround for quite strange bug. It happens a lot in Chrome. I don't remember if I've seen it in Firefox. Sometimes the element positioned in 3D (especially when it's moved back along Z axis) is not clickable, because it falls 'behind' the element. To prevent this, I decided to make non clickable by setting pointer-events property to `none` value. Value if this property is inherited, so to make everything else clickable I bring it back on the #impress element. If you want to know more about `pointer-events` here are some docs: https://developer.mozilla.org/en/CSS/pointer-events There is one very important thing to notice about this workaround - it makes everything 'unclickable' except what's in #impress element. So use it wisely ... or don't use at all. */ .impress-enabled { pointer-events: none; } .impress-enabled #impress { pointer-events: none; }