/* 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 */ } .slide BLOCKQUOTE:after { margin:-45px 0 45px; display:block; color:#444; font-weight:bold; content:attr(cite); } /* 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; } .slide PRE MARK { background:#FAFAA2; color:#000; font-style:normal; } .slide PRE MARK.important { background:#C00; color:#FFF; font-weight:normal; } /* Background */ .slide.bg SECTION { background:transparent; } .slide.bg SECTION:before { display:none; } .slide.bg IMG { position:absolute; top:0; left:0; z-index:-1; width:100%; } /* 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.bg { z-index:1; } .full .slide.bg:after, .full .slide.shout:after { content:''; } /* Inner Navigation */ .full .inner > * { opacity:0; } .full .inner > .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; }