From 2fc8a17b040737fbcafd37d7b623731a0032b4df Mon Sep 17 00:00:00 2001
From: Vadim Makeev <pepelsbey@gmail.com>
Date: Mon, 1 Aug 2011 01:42:17 +0400
Subject: [PATCH] multiline support for shout; middle class added for centering
 anything

---
 en.htm                         | 10 +++++++++-
 pictures/semantics.svg         |  6 ++++++
 ru.htm                         |  8 ++++++++
 themes/ribbon/styles/style.css | 18 +++++++++++++++++-
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 pictures/semantics.svg

diff --git a/en.htm b/en.htm
index 08082ad..a68b210 100755
--- a/en.htm
+++ b/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>
diff --git a/pictures/semantics.svg b/pictures/semantics.svg
new file mode 100644
index 0000000..66eadc5
--- /dev/null
+++ b/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>
diff --git a/ru.htm b/ru.htm
index 998a6c6..6f5f865 100755
--- a/ru.htm
+++ b/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>
diff --git a/themes/ribbon/styles/style.css b/themes/ribbon/styles/style.css
index b4adec9..8004da3 100644
--- a/themes/ribbon/styles/style.css
+++ b/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 {