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,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 {
+	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: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;