diff --git a/app/assets/images/content/icon_add.png b/app/assets/images/content/icon_add.png
new file mode 100644
index 000000000..0df0af051
Binary files /dev/null and b/app/assets/images/content/icon_add.png differ
diff --git a/app/assets/images/content/icon_facebook.png b/app/assets/images/content/icon_facebook.png
new file mode 100644
index 000000000..dcdb73fdc
Binary files /dev/null and b/app/assets/images/content/icon_facebook.png differ
diff --git a/app/assets/images/content/icon_gmail.png b/app/assets/images/content/icon_gmail.png
new file mode 100644
index 000000000..0a4c1f97c
Binary files /dev/null and b/app/assets/images/content/icon_gmail.png differ
diff --git a/app/assets/images/content/icon_google.png b/app/assets/images/content/icon_google.png
new file mode 100644
index 000000000..40750ef36
Binary files /dev/null and b/app/assets/images/content/icon_google.png differ
diff --git a/app/assets/images/content/icon_home.png b/app/assets/images/content/icon_home.png
new file mode 100644
index 000000000..e54be652b
Binary files /dev/null and b/app/assets/images/content/icon_home.png differ
diff --git a/app/assets/images/content/icon_twitter.png b/app/assets/images/content/icon_twitter.png
new file mode 100644
index 000000000..0856da375
Binary files /dev/null and b/app/assets/images/content/icon_twitter.png differ
diff --git a/app/assets/stylesheets/client/common.css.scss b/app/assets/stylesheets/client/common.css.scss
index c870cd259..e3ccab5b7 100644
--- a/app/assets/stylesheets/client/common.css.scss
+++ b/app/assets/stylesheets/client/common.css.scss
@@ -27,6 +27,5 @@ $translucent1: rgba(#000, 0.3);
$translucent2: rgba(#fff, 0.4);
$text: #f3f1ee;
-$gradient-diff: 30%;
-$link: $color8;
+$gradient-diff: 30%; $link: $color8;
$border: hsl(210, 50%, 45%);
diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss
index 90d4e6fd2..ae499ee93 100644
--- a/app/assets/stylesheets/client/jamkazam.css.scss
+++ b/app/assets/stylesheets/client/jamkazam.css.scss
@@ -77,43 +77,6 @@ label {
background-color: shade($color7, 10%);
}
-.screen {
- display:none;
-}
-
-.screen.secondary {
- border: 1px solid $ColorScreenPrimary;
- background-color:$ColorScreenBackground;
-}
-.buttonrow, .screen.secondary .footer {
- position: absolute;
- bottom:0px;
- right:0px;
- z-index:5;
- background-color:$translucent1;
- width:100%;
- /*text-align:right;*/
-}
-.screen.secondary .footer button {
- margin:1em 0em 1em 1em;
-}
-
-.screen.secondary .breadcrumb {
- margin-bottom:3em;
-}
-
-.screen.secondary .breadcrumb p {
- float:left;
-}
-
-.screen.secondary p {
- margin: .5em;
- cursor: pointer;
- font-size: 120%;
-}
-.screen.secondary p.current {
- font-weight: bold;
-}
.avatar {
display: block;
diff --git a/app/assets/stylesheets/client/screen_common.css.scss b/app/assets/stylesheets/client/screen_common.css.scss
new file mode 100644
index 000000000..b93afebdc
--- /dev/null
+++ b/app/assets/stylesheets/client/screen_common.css.scss
@@ -0,0 +1,92 @@
+/* Common styles used in screens */
+@import "client/common.css.scss";
+
+.screen {
+ display:none;
+}
+
+.screen.secondary {
+ border: 1px solid $ColorScreenPrimary;
+ background-color:$ColorScreenBackground;
+}
+
+.content-head {
+
+ height:21px;
+ padding:4px;
+ background-color:#ED3618;
+
+ h1 {
+ margin: 0px 0px 0px 0px;
+ padding:0;
+ float:left;
+ font-weight:100;
+ font-size:24px;
+ }
+
+
+ .content-nav {
+ float:right;
+ margin-right:10px;
+
+ .home-icon {
+ float:left;
+ margin-right:20px;
+ }
+
+ a.arrow-right {
+ float:left;
+ display:block;
+ margin-top:2px;
+ margin-right:10px;
+ width: 0;
+ height: 0;
+ border-top: 7px solid transparent;
+ border-bottom: 7px solid transparent;
+ border-left: 7px solid #FFF;
+ }
+
+ a.arrow-left {
+ float:left;
+ display:block;
+ margin-top:2px;
+ margin-right:20px;
+ width: 0;
+ height: 0;
+ border-top: 7px solid transparent;
+ border-bottom: 7px solid transparent;
+ border-right:7px solid #FFF;
+ }
+
+ }
+}
+
+.buttonrow, .screen.secondary .footer {
+ position: absolute;
+ bottom:0px;
+ right:0px;
+ z-index:5;
+ background-color:$translucent1;
+ width:100%;
+ /*text-align:right;*/
+}
+.screen.secondary .footer button {
+ margin:1em 0em 1em 1em;
+}
+
+.screen.secondary .breadcrumb {
+ margin-bottom:3em;
+}
+
+.screen.secondary .breadcrumb p {
+ float:left;
+}
+
+.screen.secondary p {
+ margin: .5em;
+ cursor: pointer;
+ font-size: 120%;
+}
+.screen.secondary p.current {
+ font-weight: bold;
+}
diff --git a/app/assets/stylesheets/screen_common.css.scss b/app/assets/stylesheets/screen_common.css.scss
new file mode 100644
index 000000000..aeb8ead26
--- /dev/null
+++ b/app/assets/stylesheets/screen_common.css.scss
@@ -0,0 +1 @@
+/* Styles used across multiple screens */
diff --git a/app/views/clients/_ftue1.html.erb b/app/views/clients/_ftue1.html.erb
new file mode 100644
index 000000000..28280984a
--- /dev/null
+++ b/app/views/clients/_ftue1.html.erb
@@ -0,0 +1,10 @@
+
+
+
+
Welcome to JamKazam!
+ <%= render "screen_navigation" %>
+
+
+
You'll need appropriate audio gear. Here are some links to where you can buy some.
+
Make sure your audio gear is plugged in, then CONTINUE.
+
+
+
Welcome to JamKazam!
+ <%= render "screen_navigation" %>
+
+
+
Next we'll show you how to hook up a cable for a loopback test, so we can test your latency.
+
Once your cables are all connected, then CONTINUE.
+
+
+
Welcome to JamKazam!
+ <%= render "screen_navigation" %>
+
+
+
TESTS happen on this page...
+
If everything looks good, then WE'RE DONE.
+