--- a/html/geek.css	Fri Jun 01 04:26:17 2012 +0900
+++ b/html/geek.css	Wed Jun 13 04:13:43 2012 +0900
@@ -1,34 +1,22 @@
-body 
-{
-	background: white;
-}
-
-span.must
+span.must, span.required
 {
-	display: block;
-	background: lime;
-}
-
-span.may
-{
-	display: block;
-	background: yellow;
+	background-color: #d6ffb9;
+	box-shadow: 0 0 6px 6px lime;
 }
 
-span.mustnot
+span.mustnot, span.shallnot, span.shouldnot
 {
-	display: block;
-	background: #ff69b4;
+	background-color: #ffe3e3;
+	box-shadow: 0 0 6px 6px red;
 }
 
-.method-name 
-{
-	font-style: italic;
+span.shall, span.should, span.recommended {
+	background-color: #d6eeff;
+	box-shadow: 0 0 6px 6px #0985d8;
 }
 
-.infonormative
+span.may, span.optional
 {
-	color: gray;
-	font-style: italic;
-}
-
+	background-color: #ffffd6;
+	box-shadow: 0 0 6px 6px yellow;
+}
\ No newline at end of file

--- a/html/spec.css	Fri Jun 01 04:26:17 2012 +0900
+++ b/html/spec.css	Wed Jun 13 04:13:43 2012 +0900
@@ -19,6 +19,7 @@
   color: black;
   background-color: #D9E6F8;
   font-size: large;
+  font-style: italic;
 }
 
 .parameter-name {
@@ -159,15 +160,6 @@
 	border-left-style: solid;
 }
 
-
-/* style for heading links */
-a[id]:hover:after { 
-  content: "   #" attr(id) " § "; 
-  font-size: 80%;
-  color: #ccc;
-  text-decoration: none;
-}
-
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: inherit !important;
   font-weight: inherit !important;
@@ -175,17 +167,6 @@
   font-style: inherit !important;
 }
 
-.inline {
-  display: inline;
-  border-left: none;
-  border-right: none;
-  padding: 0em;
-}
-
-.value {
-  color: #191970;
-}
-
 .typeCell {
   background-color: #cfcfcf;
 }
@@ -205,19 +186,23 @@
 
 a.eventtype code {
   font-size: 1.13em;
+  color: #ff6d00;
 }
 
-.keyname {
+/* Denotes a key value (the value of the KeyboardEvent.key property) */
+.key {
   color: #191970;
   background-color: #b0e0e6;
 }
 
-.charval {
+/* Denotes a char value (the code-point for the character) */
+.char {
   color: #191970;
   background-color: #98fb98;
 }
 
-.charrep {
+/* Denotes a char value (an example glyph for the character) */
+.glyph {
   color: #191970;
   background-color: #ffe4b5;
 }
@@ -275,3 +260,36 @@
 }
 ol.algo li:before { content: counters(section, ".") ". "; }
 ol.algo li ol.algo li { margin-left: -1em; }
+
+#turnOnConformanceHighlighting {
+	position: fixed;
+	font-size: 12pt;
+	padding: 5px;
+	background-color: red;
+	color: white;
+	width: 400px;
+	left: 0;
+	opacity: 1;
+	bottom: 0;
+	-webkit-transform-origin: top left;
+	-moz-transform-origin: top left;
+	-ms-transform-origin: top left;
+	-o-transform-origin: top left;
+	transform-origin: top left;
+	
+	-webkit-transform: rotate(-90deg);
+	-moz-transform: rotate(-90deg);
+	-ms-transform: rotate(-90deg);
+	-o-transform: rotate(-90deg);
+	transform: rotate(-90deg);
+
+	-webkit-transition: opacity 0.2s linear, bottom 0.3s ease-in;
+	-moz-transition: opacity 0.2s linear, bottom 0.3s ease-in;
+	-ms-transition: opacity 0.2s linear, bottom 0.3s ease-in;
+	-o-transition: opacity 0.2s linear, bottom 0.3s ease-in;
+	transition: opacity 0.2s linear, bottom 0.3s ease-in;
+}
+#turnOnConformanceHighlighting[class=off] {
+	opacity: 0;
+	bottom: 100px;
+}
\ No newline at end of file