diff --git a/README.md b/README.md
index a0abf8d..22f78fb 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ An experimental Origami component to implement a responsive crossword.
    * $ `obt build`
 * deploy locally as described in the [Origami build tools doc](https://github.com/Financial-Times/origami-build-tools#developing-modules-locally)
    * $ `obt demo --runServer --watch`
-   * $ see a demo of it running at http://localhost:8080/demos/local/basic.html
+   * see a demo of it running at http://localhost:8080/demos/local/basic.html
 * [Bower linking a component](https://oncletom.io/2013/live-development-bower-component/)
 * general Origami [Developer Guide](http://origami.ft.com/docs/developer-guide/)
 
diff --git a/demos/src/basic.mustache b/demos/src/basic.mustache
index b4d5685..f6f29cc 100644
--- a/demos/src/basic.mustache
+++ b/demos/src/basic.mustache
@@ -1,6 +1,6 @@
-<div style="width: 100%;">
+<div style="width: 100%;" id="main-container">
 	<div class="o-crossword" data-o-component="o-crossword" data-o-crossword-data="https://cdn.rawgit.com/ftlabs/o-crossword/001d79ac8f4146c244e64760f60a42c788e12ddc/demos/examples/crossword_ft_daily_2016_03_03_15179_ADA_REFORMAT.json">
-		<ul class="o-crossword-clues"></ul>
 		<table class="o-crossword-table"></table>
+    <ul class="o-crossword-clues"></ul>
 	</div>
 </div>
\ No newline at end of file
diff --git a/main.scss b/main.scss
index 9290576..2d487cc 100644
--- a/main.scss
+++ b/main.scss
@@ -7,6 +7,7 @@ $o-crossword-is-silent: true !default;
 @import "src/scss/color-use-cases";
 @import "src/scss/mixins";
 @import "src/scss/base";
+@import "src/scss/orientation";
 
 @if ($o-crossword-is-silent == false) {
 	@include oCrosswordAll;
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index 1639e6e..27f7fc0 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -165,7 +165,7 @@
 				padding-bottom: 0.5em;
 				margin-left: 1em;
 				.has-hover {
-					color: green;
+					color: grey;
 				}
 			}
 		}
@@ -283,3 +283,4 @@
 		}
 	}
 }
+
diff --git a/src/scss/_color-use-cases.scss b/src/scss/_color-use-cases.scss
index 5325699..9d12cb6 100644
--- a/src/scss/_color-use-cases.scss
+++ b/src/scss/_color-use-cases.scss
@@ -1,7 +1,7 @@
 @include oColorsSetUseCase(o-crossword, background, 'white');
-@include oColorsSetUseCase(o-crossword-border, border, 'section-green');
-@include oColorsSetUseCase(o-crossword-empty, background, 'section-green');
-@include oColorsSetUseCase(o-crossword-hidden-across, background, 'section-light-green');
-@include oColorsSetUseCase(o-crossword-hidden-down, background, 'section-light-blue');
-@include oColorsSetUseCase(o-crossword-hidden-across, text, 'section-light-green');
-@include oColorsSetUseCase(o-crossword-hidden-down, text, 'section-light-blue');
+@include oColorsSetUseCase(o-crossword-border, border, 'black');
+@include oColorsSetUseCase(o-crossword-empty, background, 'black');
+@include oColorsSetUseCase(o-crossword-hidden-across, background, 'grey-tint1');
+@include oColorsSetUseCase(o-crossword-hidden-down, background, 'grey-tint1');
+@include oColorsSetUseCase(o-crossword-hidden-across, text, 'black');
+@include oColorsSetUseCase(o-crossword-hidden-down, text, 'black');
diff --git a/src/scss/_orientation.scss b/src/scss/_orientation.scss
new file mode 100644
index 0000000..ca43397
--- /dev/null
+++ b/src/scss/_orientation.scss
@@ -0,0 +1,12 @@
+//below forces portrait mode on mobile phones
+//it uses "min-aspect-ratio" to detect landscape,
+//since keyboard popping will make "orientation" wrong in some cases
+@media screen and (min-aspect-ratio: 13/9) and (max-width: 767px) {
+  #main-container {
+    background-color: #4f1828;
+    transform: rotate(-90deg);
+    width: 100% /* screen width */ ;
+    height: 100% /* screen height */ ;
+    overflow: scroll;
+  }
+}
\ No newline at end of file