From a69fdf56545285c15fce8115a7fb46bc786391f8 Mon Sep 17 00:00:00 2001
From: Vadim Makeev <pepelsbey@gmail.com>
Date: Sat, 23 Jul 2011 08:28:57 +0400
Subject: [PATCH] styles and demo slide for inner navigation

---
 index.htm                      | 13 +++++++++
 themes/ribbon/styles/style.css | 51 +++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/index.htm b/index.htm
index e67a9ff..561f386 100755
--- a/index.htm
+++ b/index.htm
@@ -144,6 +144,19 @@
 			</blockquote>
 		</section>
 	</div></div>
+	<div class="slide" id="InnerNavigation"><div>
+		<section>
+			<header>
+				<h2>Inner Navigation</h2>
+			</header>
+			<ol class="inner">
+				<li class="active">This tool is provided</li>
+				<li>Without warranty, guarantee</li>
+				<li>Or much in the way of explanation
+				<li>Erase your hard drive…</li>
+			</ol>
+		</section>
+	</div></div>
 	<div class="slide" id="ThankYou"><div>
 		<section>
 			<header>
diff --git a/themes/ribbon/styles/style.css b/themes/ribbon/styles/style.css
index fd8cce4..5184399 100644
--- a/themes/ribbon/styles/style.css
+++ b/themes/ribbon/styles/style.css
@@ -8,28 +8,26 @@ BODY {
 
 /* Slide
 ---------------------------------------- */
-.slide {
+.slide:after {
+	counter-increment:paging;
+	content:counter(paging, decimal-leading-zero);
 	}
-	.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:'';
 		}
-	.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 {
@@ -327,6 +325,19 @@ BODY {
 				content:'';
 				}
 
+/* Inner Navigation */
+.inner > * {
+	opacity:0;
+	-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;
+	}
+.inner > .active {
+	opacity:1;
+	}
+
 /* Progress */
 .full .progress {
 	position:absolute;