Issue 2844 - Create Microsoft Edge coming soon landing page

static/css/index.css

 #content h1, #content h2
 {
   font-size: 16px;
 }
 
 #content .sprite
 {
   background-image: url(../img/sprite-index.png);
 }
 
@@ skipping 62 matching lines @@
 {
   background: #ffffff;
   padding: 10px;
   border: 1px solid #c9c9c9;
   box-shadow: 1px 1px 0 0 #dbdbdb;
 }
 
 #maxthon-instruction,
 html[lang^="zh_"] #content.maxthon #video,
 #content.maxthon #feature-free,
-#feature-maxthon, #edge-subscription, #edge-teaser
+#feature-maxthon
 {
   display: none;
 }
 
 html[lang^="zh_"] #content.maxthon #maxthon-instruction
 {
   display: inline-block;
   padding: 0px;
 }
 
 #content.maxthon #feature-maxthon
 {
   display: inline-block;
-}
-
-#content.edge #video
-{
-  display: none;
-}
-
-#content.edge #edge-subscription
-{
-  display: block;
 }
 
 #summary h1, #summary h2
 {
   font-weight: normal;
   margin: 0;
 }
 
 #summary h1
 {
@@ skipping 313 matching lines @@
 #platform-edge
 {
   background-position: -68px -171px;
 }
 
 #content.edge #platform-edge
 {
   background-position: -68px -151px;
 }
 
+#content h3.subscribe-header
+{
+  font-size: 18px;
+  margin-bottom: 0px;
+}
+
+#edge-subscription h3
+{
+  margin: 19px 0px 10px 0px;
+  color: #2d79c0;
+  font-weight: bold;
+  font-family: Arial;
+  font-size: 14px;
+}
+
+#edge-subscription
+{
+  margin: 0px 0px 10px 40px;
+}
+
+html[dir="rtl"] #edge-subscription
+{
+  margin: 0px 40px 10px 0px;
+}
+
+#edge-subscription input[type=email]
+{
+  border: solid 2px #a5a5a5;
+  padding: 0px 10px;
+  font-size: 14px;
+  font-family: Arial;
+  line-height: 36px;
+  height: 36px; /* IE 8 */
+}
+
+#edge-subscription input[type=email].placeholder
+{
+  color: #a5a5a5;
+}
+
+#edge-subscription button[type=submit]
+{
+  border: solid 1px #357ebd;
+  border-radius: 3px;
+  background-color: #428bca;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  width: 146px;
+  height: 40px;
+}
+
+
+#edge-subscription form > span, #edge-subscription form.success input,
+#edge-subscription form.success button, #other-browsers, #content.edge #video,
+#edge-subscription, #edge-teaser
+{
+  display: none;
+}
+
+#edge-subscription form .invalid-label
+{
+  margin-top: 15px;
+}
+
+#edge-subscription form.success .sucess-label,
+#edge-subscription form.invalid .invalid-label,
+#edge-subscription form.error .response-error,
+#content.edge #edge-subscription
+{
+  display: block;
+}
+
 .warning-platform,
 .disclaimer,
 #maxthon-notification
 {
   display: none;
   color: #D00;
   text-align: center;
   border: 1px solid #D00;
   padding: 5px;
   border-radius: 5px;
@@ skipping 189 matching lines @@
 #more-container.chrome #more-chrome,
 #more-container.opera #more-opera,
 #more-container.android #more-android,
 #more-container.internet-explorer #more-internet-explorer,
 #more-container.safari #more-safari,
 #more-container.yandex-browser #more-yandex-browser,
 #more-container.maxthon #more-maxthon
 #more-container.edge #more-edge
 {
   background-color: #dbd4c7;
-}
-#content h3.subscribe-header
-{
-  font-size: 18px;
-  margin-bottom: 0px;
-}
-
-#edge-subscription h3
-{
-  margin: 19px 0px 10px 0px;
-  color: #2d79c0;
-  font-weight: bold;
-  font-family: Arial;
-  font-size: 14px;
-}
-
-#edge-subscription
-{
-  margin: 0px 0px 10px 40px;

[saroyanm, 2015/09/23 12:44:21]

In general I'd be fan of not aligning this with the UL element indentation, but
now I see that in the mockup we are doing so, so in that case we should also
consider RTL direction. 
so please use html[dir="rtl"], to make it consistent with other RTL hacks in the
page.

-}
-
-#other-browsers
-{
-  display: none;
-}
-
-#subscribe-textbox
-{
-  border: solid 2px #a5a5a5;
-  margin-right: 0px;
-  padding-left: 10px;

[saroyanm, 2015/09/23 12:44:22]

Please use padding: 0px 10px; here to make it consistent with other similar
implementations.

-  padding-right: 10px;
-  font-size: 14px;
-  font-family: Arial;
-  line-height: 36px;
-  height: 36px; /* IE 8 */
-}
-
-#subscribe-textbox.placeholder
-{
-  color: #a5a5a5;
-}
-
-#subscribe-button
-{
-  border: solid 1px #357EBD;
-  border-radius: 3px;
-  background-color: #428BCA;
-  color: #FFFFFF;
-  font-size: 14px;
-  font-weight: bold;
-  min-width: 146px;

[saroyanm, 2015/09/23 12:44:21]

Please use width instead of min-width, so we will be sure that the button will
not exceed the limits for different translations.

-  height: 40px;
-  margin-left: 0px;
-}
-
-#subscribe-button span

[saroyanm, 2015/09/23 12:44:22]

Please remove this rule, we should also consider, longer text for translations,
also in Firefox the layout is broken, probably because of the font rendering
difference.
IMO in this case it's better for text to wrap.

-{
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-#subscribe-form .sucess-label, #subscribe-form .response-error,
-#subscribe-form .invalid-label, #subscribe-form.success input,
-#subscribe-form.success button

[saroyanm, 2015/09/23 12:44:21]

Probably can be merged with rule above (#other-browsers).

-{
-  display: none;
-}
-
-#subscribe-form .invalid-label
-{
-  margin-top: 15px;
-}
-
-#subscribe-form.success .sucess-label,
-#subscribe-form.invalid .invalid-label,
-#subscribe-form.error .response-error
-{
-  display: block;
-}
+}