/* 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.
 *
 * This is the stylesheet used by the WebUI login screen
 */

html {
  /* It's necessary to put this here instead of in body in order to get the
     background-size of 100% to work properly */
  height: 100%;
}

[hidden] {
  display: none !important;
}

#user-frame {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: fixed;
  /* hide the user frame until we're done loading */
  visibility: hidden;
  width: 100%;
}

/* The list holds all the user cards */
#user-list {
  display: table;
  height: 100%;
}

/* The user slider container contains the slider and the top and bottom
   horizontal lines. */
#user-slider-container {
  margin-top: -178px;
  position: absolute;
  top: 50%;
  width: 100%;
}

.user-card {
  display: table-cell;
  height: 100%; 
  padding: 29px;
  position: relative;
  vertical-align: middle;
}

.user.focus {
  background-color: #ececec;
}

.user-card-grayed {
  opacity: 0.4;
}

.user {
  text-align: center;
  width: 220px;
  height: 242px;
  padding-top: 20px;
}

.user-image {
  /* -webkit-mask-image set by JavaScript to the image source */
  -webkit-mask-size: 100% 100%;
  background-position: center; 
  background-repeat: no-repeat;
  height: 170px;
  margin: 4px;
  padding: 0px;
  width: 170px;
}

.delete-button {
  background-color: white;
  height: 16px;
  opacity: 0.5;
  position: absolute;
  right: 12px;
  top: 8px;
  width: 16px;
}

#add-user-box {
  margin-top: 48px;
}

.user-image-border-box {
  -webkit-border-radius: 2px;
  border-color: #cfcfcf;
  border-style: solid;
  border-width: 1px;
  height: 180px;
  margin: auto;
  position: relative;
  width: 180px;
}

.user span {
  color: black;
  font-size: 18px;
  line-height: 40px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  /* TODO(fsamuel, rbyers): why isn't ellipsis working? */
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user .user-login-box {
  margin-top: 4px;
}

.guest-login-box {
  text-align: center;
  width: 100%;
}

button.loginbutton {
  font-size: 16px;
  height: 32px;
  margin-top: 8px;
  width: 80%;
}

#add-user {
  height: 207px;
  width: 207px;
  background-image: url('chrome://theme/IDR_LOGIN_ADD_USER');
}