@import url(http://fonts.googleapis.com/css?family=EB+Garamond); /* 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; } /* 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(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(255,255,255,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); } /* 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: 'PT Serif', georgia, 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.3; -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 } /* 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: 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-family: 'Open Sans', Arial, sans-serif; font-size: 30px; line-height: 36px; letter-spacing: -1px; } .slide q { display: block; font-size: 50px; line-height: 72px; margin-top: 100px; } .slide q strong { white-space: nowrap; } /* generic tag styling */ h1 { font-size: 40px; font-weight: bold; padding-bottom: 0.5em; border-bottom: 1px solid gray; margin-bottom: 1em; } h2 { font-size: 30px; font-weight: bold; padding-bottom: 0.2em; border-bottom: 1px solid gray; margin-top: 1.5em; } ul { list-style: disc; margin-top: 0.5em; padding-left: 1em; } li { margin-bottom: 0.6em; } dl { float: left; margin: 1em 0; padding: 0; } dt { clear: left; float: left; width: 4em; margin: 0; padding: 5px; font-weight: bold; } dd { float: left; width: 20em; margin: 0; padding: 5px; } table { margin-top: 0.5em; margin-bottom: 1em; font-size: 20px; } table tr { border-top: 1px solid gray; border-bottom: 1px solid gray; } table th { text-align: center; vertical-align: middle; font-weight: bold; width: 5em; height: 1.5em; } table td { height: 1.4em; vertical-align: middle; } table td.number { text-align: right; } pre { font-family: courier; font-size: 20px; line-height: 1.3em; margin-top: 0.5em; margin-bottom: 1em; } pre.shell { border: 1px solid black; padding: 0.5em; background: lightblue; color: black; } /*code { font-family: courier; font-size: 22px; background: lightblue; color: black; padding-top: 3px; padding-bottom: 3px; padding-left: 7px; padding-right: 7px; border: 1px solid black; border-radius: 10px; }*/ img.center { display: block; margin-left: auto; margin-right: auto; } #first img.logo { position: fixed; top: 100px; left: 0px; width: 100px; height: 100px; background: #003366; padding: 10px; } #first img.big-logo { position: fixed; top: 326px; left: 448px; width: 450px; } #first p.affiliation { background: #003366; position: fixed; top: 100px; left: 120px; width: 728px; height: 100px; font-family: 'EB Garamond', serif; color: white; padding-left: 50px; padding-top: 20px; border-left: 1px solid white; } #first p.affiliation:before { background: #003366; position: fixed; top: -10px; left: -121px; height: 10px; width: 100%; content: ""; } #first p.affiliation:after { background: #003366; position: fixed; top: 110px; left: -121px; height: 10px; width: 100%; content: ""; } #first p.title { position: fixed; top: 400px; left: 300px; color: black; font-size: 40px; } #first p.subtitle { position: fixed; top: 550px; left: 40px; color: black; /*font-size: 40px;*/ } .slide footer:before { background: #003366; border-bottom-left-radius: 10px; position: fixed; top: -1px; left: -381px; height: 38px; width: 270px; padding-top: 0.7em; padding-left: 5em; padding-right: 4em; font-family: 'EB Garamond', serif; color: white; font-size: 14px; line-height: 1em; border-top: 1px solid #003366; content: "UNIVERSITÀ DEGLI STUDI DI MILANO Dipartimento di Informatica"; } .slide footer:after { background: #003366; border-bottom-right-radius: 10px; position: fixed; top: -1px; left: 457px; height: 38px; width: 60px; padding-top: 0.7em; font-family: 'EB Garamond', serif; color: white; font-size: 14px; line-height: 1em; border-top: 1px solid #003366; content: ""; } .slide footer { background: white; width: 450px; height: 35px; padding-top: 0.7em; padding-left: 2em; font-size: 18px; color: black; line-height: 1em; position: fixed; top: 650px; left: 380px; border-top: 1px solid #003366; } .slide footer img { width: 40px; position: absolute; left: -370px; top: 3px; }