multiline support for shout; middle class added for centering anything

en.htm

@@ -82,6 +82,14 @@
 			</ol>
 		</section>
 	</div></div>
+	<div class="slide" id="InTheMiddle"><div>
+		<section>
+			<header>
+				<h2>In the Middle</h2>
+			</header>
+			<object data="pictures/semantics.svg" type="image/svg+xml" width="300" height="300" class="middle"></object>
+		</section>
+	</div></div>
 	<div class="slide bg" id="Picture"><div>
 		<section>
 			<header>
@@ -125,7 +133,7 @@
 	<div class="slide shout" id="Shout"><div>
 		<section>
 			<header>
-				<h2>Shout!</h2>
+				<h2>Warning<br>Message</h2>
 			</header>
 		</section>
 	</div></div>

pictures/semantics.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256.155 256.155">
+  <title>HTML5 Semantics Logo</title>
+  <polygon id="chevron" fill="#0174A7" points="128.106,0 0,64.744 0,107.32 128.106,42.577 256.155,107.32 256.155,64.744"/>
+  <use xlink:href="#chevron" y="74.316" />
+  <use xlink:href="#chevron" y="148.653" />
+</svg>

ru.htm

@@ -82,6 +82,14 @@
 			</ol>
 		</section>
 	</div></div>
+	<div class="slide" id="InTheMiddle"><div>
+		<section>
+			<header>
+				<h2>Посередине</h2>
+			</header>
+			<object data="pictures/semantics.svg" type="image/svg+xml" width="300" height="300" class="middle"></object>
+		</section>
+	</div></div>
 	<div class="slide bg" id="Picture"><div>
 		<section>
 			<header>

themes/ribbon/styles/style.css

@@ -195,11 +195,15 @@ BODY {
 	position:absolute;
 	top:50%;
 	left:0;
-	margin:-80px 0 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 {
 		margin:0;
@@ -208,6 +212,18 @@ BODY {
 			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 {