CSS Regions now only covers regions, flows, region breaks and region styling. Exclusions have been moved to the css-exclusions module and slots are not covered in this effort

Author: vhardy

css3-regions/Overview.html

@@ -0,0 +1,62 @@
+div.example:before {
+	top: -0.6em;
+	left: -2.5em;
+	width: 7.5em;
+	text-align: center;
+}
+
+div.example:before {
+	color: white;
+	background: #1976B9;
+	padding: 0.5em;
+	border: none;
+	border-radius: 0.4em;
+	box-shadow: black 2px 2px 2px;
+	margin-top: -0.5em;
+	left: -1em;
+}
+
+div.example {
+	background: #f4f4f4;
+	padding: 0.5em;
+	margin: 1em 0;
+	border: thin solid #999;
+	position: relative;
+	clear: both;
+}
+
+div.example {
+	color: #303030
+}
+
+div.issue {
+	color: red;
+	margin-top: 1em;
+	padding: 0.5em;
+	border-left: 5px solid red;
+	padding-left: 1em;
+	position: relative;
+	color: gray;
+	width: 50%;
+}
+
+div.issue:before {
+	content: "Issue " counter(issue);
+	background: none;
+	padding: 0;
+	margin: 0 0 0.7em 0;
+	border: none;
+	font-weight: bold;
+	color: gray;
+	display: block;
+}
+
+.issue {
+	counter-increment: issue;
+}
+
+.toggle {
+	font-size: smaller;
+	color: gray;
+	float: right;
+}

css3-regions/Overview.src.html

@@ -0,0 +1,31 @@
+(function() {
+
+    var defaultStyleText = 'default spec. style';
+    var additionalStyleText = "additional spec. style";
+    var toggle;
+
+
+    function toggleStyle() {
+        var st = document.getElementById('st');
+
+        if (st.disabled === true) {
+            st.disabled = false;
+            toggle.textContent = defaultStyleText;
+        } else {
+            st.disabled = true;
+            toggle.textContent = additionalStyleText;
+        }
+    }
+
+    window.onload = function() {
+        var divHead = document.getElementById('div-head');
+        toggle = document.createElement('a');
+
+		divHead.insertBefore(toggle, divHead.firstChild);
+        toggle.textContent = defaultStyleText;
+        toggle.setAttribute('class', 'toggle');
+        toggle.setAttribute('href', '#');
+        toggle.addEventListener("DOMActivate", toggleStyle, false);
+    };
+})();
+