/* Copyright (c) 2011 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.
 */

/* TODO(fsamuel, nkostylev): RTL support for the OOBE and Login screens. */

body {
  /* Don't highlight links when they're tapped.  Safari has bugs here that
    show up as flicker when dragging in some situations */
  -webkit-tap-highlight-color: transparent;
  /* Don't allow selecting text - can occur when dragging */
  -webkit-user-select: none;
  background: -webkit-gradient(radial, center center, 0, center center, 400, 
                               from(#fefefe), to(#efefef));
  font-family: 'Droid Sans', Arial, sans-serif;
  font-size: 14px;
  padding: 10px;
}

#topshadow {
  -webkit-mask: -webkit-gradient(linear, left top, right top,
                                 from(rgba(0,0,0,0)),
                                 color-stop(0.5, black),
                                 to(rgba(0,0,0,0)));
  -webkit-mask-clip: padding-box;
  background: -webkit-gradient(linear, left top, left bottom,
                               from(rgba(0,0,0,0.3)), to(rgba(0,0,0,0.0)));
  border: none;
  border-top: 1px solid rgba(0,0,0,0.5);
  height: 4px;
  opacity: 0.3;
}
 
#bottomshadow {
  -webkit-mask: -webkit-gradient(linear, left top, right top,
                                 from(rgba(0,0,0,0)),
                                 color-stop(0.5, black),
                                 to(rgba(0,0,0,0)));
  -webkit-mask-clip: padding-box;
  background: -webkit-gradient(linear, left bottom, left top,
                               from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0.0)));
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.5);
  height: 2px;
  opacity: 0.3;
}

input[type='text'],
input[type='password'],
select {
/* TODO(nkostylev): Remove this after merging the login screen with the OOBE. */
  font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

input[type='text'],
input[type='password'] {
  -webkit-border-radius: 3px;
  -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1), 
                      0 1px 0 white,
                      0 0 1px transparent,
                      0 0 1px transparent,
                      0 0 1px transparent;
  -webkit-margin-end: 7px;  
  -webkit-margin-start: 2px;
  -webkit-transition: -webkit-box-shadow 100ms, background 100ms, border 500ms;  
  border: 1px solid #a0a0a0;
  font-size: 13px;
  font-weight: 400;    
  padding: 4px 6px; 
}

input[type='text'].number,
input[type='password'].number {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

html[dir='rtl'] input[type='text'].number,
html[dir='rtl'] input[type='password'].number {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
} 

input[type='text']::-webkit-input-placeholder,
input[type='password']::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder:focus,
input[type='password']::-webkit-input-placeholder:focus{
  color: #a0a0a0;
}

input[type='text']:first-child,
input[type='password']:first-child {
  -webkit-margin-start: 0;
}

input[type='text']:last-child,
input[type='password']:last-child {
  -webkit-margin-end: 0;
}

input[type='text']:focus,
input[type='text'].focus,
input[type='password']:focus,
input[type='password'].focus {
  -webkit-transition: -webkit-box-shadow 200ms, background 200ms, border 200ms;
  -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15),
                      0 1px 0 transparent,
                      0 0 1px #c0c0c0, 
                      0 0 1px #c0c0c0, 
                      0 0 1px #c0c0c0;
  background: #f8f8f8;
  border-color: #4080fa;
  outline: none;
}

input[type='text'].small,
input[type='password'].small {
  width: 2em;
}

input[type='text'].invalid:not(:focus),
input[type='text'].invalid:not(:focus) {
  background: #fff0f0;
  color: #601414;
}

input.emailbox {
  margin-bottom: 20px;
}
 
input.editbox {
  height: 26px;
  padding: 8px 5px 0;
  width: 170px;
}

/* Forms: Buttons */

button {
  -webkit-box-shadow: inset 0 1px 2px white, 
                      0 1px 2px rgba(0, 0, 0, .2);
  -webkit-margin-end: 4px;
  -webkit-margin-start: 4px;
  -webkit-padding-end: 14px;
  -webkit-padding-start: 14px;
  -webkit-user-select: none;  
  background: -webkit-linear-gradient(#fafafa, #dcdcdc);
  border: 1px solid #a0a0a0;
  border-radius: 3px; 
  cursor: default;
  font-size: 13px;
  font-weight: 400;    
  margin: 0;
  padding-bottom: 4px;
  padding-top: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

button.default {
  -webkit-padding-end: 21px;
  -webkit-padding-start: 21px;
  border-color: #808080;
  border-width: 2px;
  font-weight: 600;
  padding-top: 7px;
  padding-bottom: 7px;
}

button.increment,
button.decrement {
  -webkit-padding-end: 8px;
  -webkit-padding-start: 8px;
  font-weight: 600;  
  width: 25px;
}

button.increment {
  -webkit-margin-start: -11px !important;
  border-radius: 0;
}

button.decrement {  
  -webkit-margin-start: -8px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

button:disabled,
button.disabled {
  opacity: 0.5;
}

button:not(:disabled):not(.disabled):hover,
button.hover,
.delete-button:hover {  
  -webkit-box-shadow: inset 0 1px 2px white, 
                      0 2px 4px rgba(0, 0, 0, .2);                                            
  background: -webkit-linear-gradient(#fff, #e6e6e6);
  text-shadow: 0 1px 0 #fff;
}

button:not(:disabled):not(.disabled):active,
button.active {
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);       
  background: -webkit-linear-gradient(#f0f0f0, #bebebe);    
  border-color: #808080;
  padding-bottom: 3px;
  padding-top: 5px;
  position: relative;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  top: 1px;
}

.delete-button:active {
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);       
  background: -webkit-linear-gradient(#f0f0f0, #bebebe);    
  border-color: #808080;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

button.default:not(:disabled):not(.disabled):active,
button.default.active {
  padding-bottom: 6px;
  padding-top: 8px;
}

button:first-child,
input[type='text'] + button {
  -webkit-margin-start: 0;
}