Made gradient divider in GAIA signin screen.

chrome/browser/resources/chromeos/login/screen_gaia_signin.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 #signin-right {
   -webkit-margin-before: 80px;
   -webkit-margin-start: 30px;
   top: 60px;
   width: 200px;
 }
 
 #signin-right,
 #enterprise-info-container {
   font-size: 12px;
 }
 
-
 /*  For touch-optimized UI, make the links bigger. */
 @media (pointer:coarse) {
   #signin-right {
     font-size: 14px;
   }
 }
 
 .no-right-panel #signin-right {
   display: none;
 }
 
 .signin-text {
   color: #666;
   margin-top: 20px;
 }
 
 .signin-link {
   color: rgb(37, 79, 155);
   cursor: pointer;
   text-decoration: none;
 }
 
 .signin-link:focus {
   -webkit-transition: outline-color 200ms;
   /* Note: May use 1px solid here. */
   outline-color: rgb(77, 144, 254);
 }
 
+#gaia-signin-form-container,
 #signin-frame {
-  /* TODO(nkostylev): Figure out why height: 100% stopped working (gives
-    same resalt as not specifying it). Specifying content size from
-    .step-contents for now. Working at r182673, broken at r183121. */
+  height: 100%;

[Nikita (slow), 2013/03/05 14:05:53]

So seems that explicitly setting height=100% for parent element fixes that bug
when #signin-frame was only 150px even though it had height=100% specified.

Have you tested that this new layout works fine when GAIA iframe has captcha
image?

[dzhioev (left Google), 2013/03/05 15:28:56]

Yes, it's required for containing element to have explicitly set height in order
to make height work with percents.

No, I haven't tested it with captcha.

+}
+
+#gaia-signin-divider {
+  background: -webkit-gradient(
+                   linear, left top, left bottom,
+                   color-stop(0, #e3e3e3),
+                   color-stop(0.5, #cacaca),
+                   color-stop(1, #e3e3e3));
+  border: none;
+  width: 1px;
+}
+
+.no-right-panel #gaia-signin-divider {
+  display: none;
+}
+
+#signin-frame {
   background-color: transparent;
-  border-right: 1px solid lightgray;
-  height: 470px;
+  vertical-align: top;
   width: 340px;
 }
 
-html[dir=rtl] #signin-frame {
-  border-left: 1px solid lightgray;
-  border-right: none;
-}
-
-.no-right-panel #signin-frame {
-  border: none;
-}
-
 /* Position to be aligned with the login box in iframe  */
 #login-box {
   height: 31px;
   position: absolute;
   top: 77px;
   visibility: hidden;
   z-index: -1;
 }
 
 #enterprise-info-container {
   bottom: 10px;
   left: 0;
   position: absolute;
   right: 0;
   text-align: center;
 }
 
 #enterprise-info-container #enterprise-info {
   display: inline-block;
 }