styles and demo slide for inner navigation

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>

themes/ribbon/styles/style.css

@@ -8,13 +8,11 @@ BODY {
 
 /* Slide
 ---------------------------------------- */
-.slide {
+.slide:after {
-	}
-	.slide:after {
 	counter-increment:paging;
 	content:counter(paging, decimal-leading-zero);
 	}
-	.slide SECTION {
+.slide SECTION {
 	padding:80px 120px 0;
 	width:784px;
 	height:560px;
@@ -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;