/* Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License */ @import url(fonts.css); @import url(reset.css); BODY { font:25px/1.8 'PT Sans', sans-serif; counter-reset:paging; } /* Slide ---------------------------------------- */ .slide:after { counter-increment:paging; content:counter(paging, decimal-leading-zero); } .slide section { padding:80px 120px 0; width:784px; height:560px; background:#FFF; color:#000; } .slide section:before { position:absolute; top:0; right:120px; width:40px; height:120px; background:url(../images/ribbon.svg) no-repeat; content:''; } /* Header */ .slide header { margin:0 0 58px; color:#666; font:bold 40px/1.13 'PT Sans Narrow', sans-serif; } /* Elements */ .slide p { margin:0 0 45px; } .slide p.note { color:#888; } .slide a { border-bottom:0.1em solid; color:#0174A7; text-decoration:none; } .slide a[target=_blank] { margin-right:22px; } .slide a[target=_blank]:after { position:absolute; margin-left:7px; font-family:'Target Blank'; content:'\005E'; } .slide b, .slide strong { font-weight:bold; } .slide i, .slide em { font-style:italic; } .slide kbd, .slide code { padding:3px 8px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; background:#FAFAA2; color:#000; -webkit-tab-size:4; -moz-tab-size:4; -o-tab-size:4; tab-size:4; font-family:'PT Mono', monospace; } /* Quote */ .slide blockquote { font-style:italic; } .slide blockquote:before { position:absolute; margin:-15px 0 0 -80px; color:#CCC; font:200px/1 'PT Sans', sans-serif; content:'\201C'; /* ldquo */ } /* Lists */ .slide ol, .slide ul { margin:0 0 45px; counter-reset:list; } .slide ul ul, .slide ol ul, .slide ol ol, .slide ul ol { margin:0 0 0 38px; } .slide ol > li:before, .slide ul > li:before { position:absolute; margin-left:-120px; width:100px; color:#BBB; text-align:right; } .slide ul > li:before { content:'\2022'; /* bull */ line-height:1.1; font-size:40px; } .slide ol > li:before { counter-increment:list; content:counter(list)'.'; } /* Code */ .slide pre { margin:0 0 45px; counter-reset:code; white-space:normal; } .slide pre code { display:block; padding:0; background:none; white-space:pre; } .slide pre code:before { position:absolute; margin:0 0 0 -120px; width:110px; color:#BBB; text-align:right; counter-increment:code; content:counter(code, decimal-leading-zero)'.'; } .slide pre mark { padding:3px 8px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; background:#FAFAA2; color:#000; font-style:normal; } .slide pre .important { background:#C00; color:#FFF; font-weight:normal; } .slide pre .comment { padding:0; background:none; color:#888; } /* Cover */ .slide.cover section { background:#000; overflow:hidden; } .slide.cover section:before { display:none; } .slide.cover img, .slide.cover svg, .slide.cover video, .slide.cover object { position:absolute; top:0; left:50%; z-index:-1; height:100%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); } .slide.cover.w img, .slide.cover.w svg, .slide.cover.w video, .slide.cover.w object { top:50%; left:0; width:100%; height:auto; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } /* Shout */ .slide.shout section:before { display:none; } .slide.shout h2 { position:absolute; top:50%; left:0; width:100%; text-align:center; line-height:1; font-size:150px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .slide.shout h2 a[target=_blank] { margin:0; } .slide.shout h2 a[target=_blank]:after { content:''; } /* Middle */ .middle { position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } /* List ---------------------------------------- */ .list { float:left; padding:80px 0 80px 100px; background:#585A5E url(../images/linen.png); } /* Caption */ .list .caption { color:#3C3D40; text-shadow:0 1px 1px #8D8E90; } .list .caption h1 { font:bold 50px/1 'PT Sans Narrow', sans-serif; } .list .caption a { color:#4B86C2; text-shadow:0 -1px 1px #1F3F60; text-decoration:none; } .list .caption a:hover { color:#5ca4ed; } /* Slide */ .list .slide { position:relative; float:left; margin:0 50px 0 0; padding:80px 0 0; } .list .slide:after { position:absolute; bottom:-45px; left:60px; color:#3C3D40; text-shadow:0 1px 1px #8D8E90; line-height:1; font-weight:bold; font-size:25px; } .list .slide:target:after { text-shadow:0 -1px 1px #1F3F60; color:#4B86C2; } .list .slide > div { position:relative; overflow:hidden; width:512px; height:320px; box-shadow:0 0 50px #3C3D40; border-radius:1px; background:rgba(0, 0, 0, 0.3); } .list .slide > div:hover { box-shadow: 0 0 0 10px rgba(60, 61, 64, 0.6), 0 0 50px #3C3D40; } .list .slide:target > div { box-shadow: 0 0 0 1px #305F8D, 0 0 0 10px #3C7CBD, 0 0 50px #3C3D40; } .list .slide section { -webkit-transform-origin:0 0; -webkit-transform:scale(0.5); -moz-transform-origin:0 0; -moz-transform:scale(0.5); -ms-transform-origin:0 0; -ms-transform:scale(0.5); -o-transform-origin:0 0; -o-transform:scale(0.5); transform-origin:0 0; transform:scale(0.5); } .list .slide section:after { position:absolute; top:0; right:0; bottom:0; left:0; content:''; } /* Small */ @media all and (max-width:1274px) { .list .slide:after { left:30px; } .list .slide > div { width:256px; height:160px; } .list .slide section { -webkit-transform:scale(0.25); -moz-transform:scale(0.25); -ms-transform:scale(0.25); -o-transform:scale(0.25); transform:scale(0.25); } } /* Full ---------------------------------------- */ .full { position:absolute; top:50%; left:50%; overflow:hidden; margin:-320px 0 0 -512px; width:1024px; height:640px; background:#000; } .full .caption { display:none; } .full .slide { position:absolute; visibility:hidden; } .full .slide:target { visibility:visible; } .full .slide:after { position:absolute; bottom:85px; left:120px; color:#BBB; line-height:1; } .full .slide section { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .full .slide.cover { z-index:1; } .full .slide.cover:after, .full .slide.shout:after { content:''; } /* Inner Navigation */ .full .next { opacity:0; } .full .next.active { opacity:1; -webkit-transition:opacity 0.5s linear; -moz-transition:opacity 0.5s linear; -ms-transition:opacity 0.5s linear; -o-transition:opacity 0.5s linear; transition:opacity 0.5s linear; } /* Progress */ .full .progress { position:absolute; right:118px; bottom:49px; left:118px; border-radius:7px; border:2px solid rgba(255, 255, 255, 0.2); } .full .progress DIV { width:0; height:10px; border-radius:5px; background:rgba(177, 177, 177, 0.4); -webkit-transition:width 0.2s linear; -moz-transition:width 0.2s linear; -ms-transition:width 0.2s linear; -o-transition:width 0.2s linear; transition:width 0.2s linear; } .full .progress-off { z-index:1; }