/* Styles common to WebUI pages that share the options pages style */
body {
  cursor: default;
  font-size: 13px;
}

a:link {
  color: rgb(63, 110, 194);
}

a:active {
  color: rgb(37, 64, 113);
}

#navbar-content-title {
  -webkit-padding-end: 24px;
  -webkit-user-select: none;
  color: #53637d;
  cursor: pointer;
  font-size: 200%;
  font-weight: normal;
  margin: 0;
  padding-bottom: 14px;
  padding-top: 13px;
  text-align: end;
  text-shadow: white 0 1px 2px;
}

#main-content {
  display: -webkit-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#navbar {
  margin: 0;
}

#navbar-container {
  -webkit-border-end: 1px solid #c6c9ce;
  background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #eaeef3),
              -webkit-linear-gradient(left, #eaeef3, #eaeef3 97%, #d3d7db);
  position: fixed;
  bottom: 0;
  /* We set both left and right for the sake of RTL. */
  left: 0;
  right: 0;
  top: 0;
  width: 216px;
  z-index: 2;
}

html[dir='rtl'] #navbar-container {
  background: -webkit-linear-gradient(rgba(234, 238, 243, 0), #EAEEF3),
              -webkit-linear-gradient(right, #EAEEF3, #EAEEF3 97%, #D3D7DB);
}

html.hide-menu #navbar-container {
  display: none;
}

#navbar-container > ul {
  -webkit-user-select: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar-item {
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  color: #426dc9;
  cursor: pointer;
  display: block;
  font-size: 105%;
  outline: none;
  padding: 7px 0;
  text-align: end;
  text-shadow: white 0 1px 1px;
  -webkit-padding-end: 24px;
}

.navbar-item:focus {
  border-bottom: 1px solid #8faad9;
  border-top: 1px solid #8faad9;
}

.navbar-item-selected {
  -webkit-box-shadow: 0px 1px 0px #f7f7f7;
  background: -webkit-linear-gradient(left, #bbcee9, #bbcee9 97%, #aabedc);
  border-bottom: 1px solid #8faad9;
  border-top: 1px solid #8faad9;
  color: black;
  text-shadow: #bbcee9 0 1px 1px;
}

#mainview {
  -webkit-box-align: stretch;
  -webkit-padding-start: 216px;
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

html.hide-menu #mainview {
  -webkit-padding-start: 0;
}

#mainview-content {
  min-height: 100%;
  position: relative;
}

#page-container {
  box-sizing: border-box;
  max-width: 888px;
  min-width: 600px;
  padding: 0 24px;
}

div.checkbox,
div.radio {
  margin: 5px 0;
  color: #444;
}

div.disabled {
  color: #888;
}

/* TEXT */
input[type='password'],
input[type='text'],
input[type='url'],
input:not([type]) {
  -webkit-border-radius: 2px;
  border: 1px solid #aaa;
  font-size: inherit;
  padding: 3px;
}

/* CHECKBOX, RADIO */
input[type=checkbox],
input[type=radio] {
  margin-left: 0;
  margin-right: 0;
  position: relative;
  top: 1px;
}

/* Checkbox and radio buttons have different sizes on different platforms. The
 * following rules have platform specific tweaks.
 * TODO(arv): Test the vertical position on Linux and CrOS as well.
 */

label > input[type=checkbox],
label > input[type=radio] {
  opacity: 0.7;
  margin-top: 1px;
}

html[os=mac] label > input[type=checkbox],
html[os=mac] label > input[type=radio] {
  margin-top: 2px;
}

html[os=chromeos] label > input[type=checkbox],
html[os=chromeos] label > input[type=radio] {
  top: 2px;
}

/* Checkbox and radio hover visuals.
 * Their appearance when checked is set to be the same.
 */
label:hover > input[type=checkbox]:not([disabled]),
label:hover > input[type=radio]:not([disabled]),
label > input:not([disabled]):checked {
  opacity: 1;
}

label:hover > input[type=checkbox]:not([disabled]) ~ span,
label:hover > input[type=radio]:not([disabled]) ~ span,
label > input:not([disabled]):checked ~ span {
  color: #222;
}

/* This will 'disable' the label associated with any input whose next sibling is
 * the span containing the label (usually a checkbox or radio).
 */
label > input[disabled] ~ span {
  color: #888;
}

/* Elements that need to be LTR even in an RTL context, but should align
 * right. (Namely, URLs, search engine names, etc.)
 */
html[dir='rtl'] .weakrtl {
  direction: ltr;
  text-align: right;
}

/* Input fields in search engine table need to be weak-rtl. Since those input
 * fields are generated for all cr.ListItem elements (and we only want weakrtl
 * on some), the class needs to be on the enclosing div.
 */
html[dir='rtl'] div.weakrtl input {
    direction: ltr;
    text-align: right;
}

html[dir='rtl'] .favicon-cell.weakrtl {
  -webkit-padding-end: 22px;
  -webkit-padding-start: 0;
}

/* weakrtl for selection drop downs needs to account for the fact that
 * Webkit does not honor the text-align attribute for the select element.
 * (See Webkit bug #40216)
 */
html[dir='rtl'] select.weakrtl {
  direction: rtl;
}

html[dir='rtl'] select.weakrtl option {
  direction: ltr;
}

/* WebKit does not honor alignment for text specified via placeholder attrib.
 * This CSS is a workaround. Please remove once WebKit bug is fixed.
 * https://bugs.webkit.org/show_bug.cgi?id=63367
 */
html[dir='rtl'] input.weakrtl::-webkit-input-placeholder,
html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
  direction: rtl;
}

.page h1 {
  -webkit-padding-end: 24px;
  -webkit-user-select: none;
  border-bottom: 1px solid #eeeeee;
  color: #53637d;
  font-size: 200%;
  font-weight: normal;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 13px;
  text-shadow: white 0 1px 2px;
}