html {
  /* This is needed because of chrome://theme/css/new_tab.css */
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: auto;
  -webkit-user-select: none;
  cursor: default;
}

html[mode=app-launcher] {
  height: auto;
}

#main {
  box-sizing: border-box;
  -webkit-transition: width .15s;
  margin: 0 auto;
  min-height: 100%;
}

body.loading #main {
  /* We start out hidden to prevent glitchiness as the app and most visited
  data flows in. */
  visibility: hidden;
}

#main,
.section,
.maxiview,
#login-container,
#notification-container,
#closed-sections-bar {
  width: 920px;
}

html[dir=rtl] #main {
  background-position-x: 100%;
}

html[mode=app-launcher] #main {
  min-height: 50px;
}

html[anim=false] *,
.no-anim, .no-anim *,
.loading * {
  -webkit-transition: none !important;
  -webkit-animation: none !important;
}

:link,
:visited,
.link {
  cursor: pointer;
  text-decoration: underline;
  color: hsla(213, 90%, 24%, 0.33333);
  -webkit-appearance: none;
  border: 0;
  background: none;
}

.link-color {
  color: hsl(213, 90%, 24%);
  text-decoration: none;
}

.hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* Notification */

#notification-container {
  position: fixed;
}

#notification {
  -webkit-transition: opacity .15s;
  position: relative;
  background-color: hsl(52, 100%, 80%);
  border: 1px solid rgb(211, 211, 211);
  border-radius: 6px;
  color: black;
  display: -webkit-box;
  font-weight: bold;
  margin: 2px auto;
  opacity: 0;
  padding: 7px 15px;
  pointer-events: none;
  white-space: nowrap;
  width: intrinsic;
  z-index: 2;
}

#notification.first-run {
  padding: 5px 13px; /* subtract the border width */
  border: 2px solid hsl(213, 55%, 75%);
  background-color: hsl(213, 63%, 93%);
  -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3);
  font-weight: normal;
}

#notification.promo {
  padding: 5px 13px; /* subtract the border width */
  border: 1px solid hsl(0, 0%, 80%);
  background-color: hsl(120, 93%, 93%);
  -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3);
  font-weight: normal;
}

#notification.promo a {
  color: rgb(0, 102, 204);
}

#notification-close {
  display: inline-block;
  border: 0;
  -webkit-margin-start: 10px;
  -webkit-margin-end: auto;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: no-repeat;
  background-color: transparent;
  background-image: url('chrome://theme/IDR_CLOSE_BAR');
  padding: 0;
}

#notification-close:hover,
#notification-close:focus {
  background-image: url('chrome://theme/IDR_CLOSE_BAR_H');
}

#notification-close:active {
  background-image: url('chrome://theme/IDR_CLOSE_BAR_P');
}

#notification > * {
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#notification.first-run > * {
  white-space: normal;
}

#notification.show {
  opacity: 1;
  pointer-events: all;
  -webkit-transition: opacity 1s;
}

#notification .link {
  color: rgba(0, 102, 204, 0.3);
  -webkit-padding-start: 20px;
}

#notification .link-color {
  color: rgb(0, 102, 204);
}

#notification > * > .blacklist-title {
  display: inline-block;
  max-width: 30ex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  background: no-repeat 0% 50%;
  padding: 2px;
  padding-left: 18px;
  background-size: 16px 16px;
  background-color: hsla(213, 63%, 93%, 0);
  display: block;
  line-height: 20px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 100%;
}

.item:visited,
.item:link {
  color: hsl(213, 90%, 24%);
}

html[dir=rtl] .item {
  background-position-x: 100%;
  padding-right: 18px;
  padding-left: 2px;
  text-align: right;
}

.window {
  overflow: visible; /* We use visible so that the menu can be a child and shown
                        on :hover. To get this to work we have to set visibility
                        to visible which unfortunately breaks the ellipsis for t
                        he window items */
  background-image: url('ntp/closed_window.png');
}

.window-menu {
  position: absolute;
  display: none;
  border: 1px solid #999;
  -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3);
  color: black;
  background-color: white;
  left: 0;
  white-space: nowrap;
  z-index: 2;
  padding: 2px;
  cursor: default;
  border-radius: 4px;
}

/* Made to look like a tooltip using vista/win7 look and feel.
   TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed
 */
#window-tooltip {
  color: #555;
  pointer-events: none;
  border: 1px solid rgb(118, 118, 118);
  border-radius: 3px;
  padding: 0 3px;
  background: -webkit-linear-gradient(white, rgb(228, 229, 240));
  width: auto;
  max-width: 300px;
}

.foreign-session-client {
  float: left;
  max-width: 114px; /* Selected so that we can fit 5 items in EN-US */
  font-weight: normal;
  margin: 0;
  position: relative;
}

html[dir=rtl] .foreign-session-client {
  float: right;
}

.foreign-session-client > p  {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 100%;
  margin: 0 10px;
}

#foreign-sessions .nav {
  max-width: none !important;
}

.nav > a {
  /* no icon */
  padding: 0;
}

.nav > a:after {
  content: '\u00bb'; /* raque gets flipped automatically in rtl */
  font-size: 115%;
  -webkit-padding-start: 2px;
}

#sync-status > div {
  border-radius: 6px;
  padding: 5px 0;
  margin: 10px 0 20px;
  white-space: nowrap;
  overflow-x: hidden;
}

#sync-status > div > * {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 106%;
  margin: 0;
}

.notification.hidden {
  opacity: 0;
  pointer-events: none;
}

/**
 * Unfortunately, there seems to be a bug in WebKit where this div doesn't
 * immediately get layout. It still doesn't have it in 'load', but gains it
 * sometime after.
 *
 * We detect this in the JS by looking for offsetWidth > 0, and when it occurs,
 * remove the 'nolayout' class.
 */
#attribution.nolayout {
  position: static;
  visibility: hidden;
}

#attribution {
  bottom: 5px;
  left: 8px;
  position: fixed;
  text-align: end;
}

html[dir=rtl] #attribution {
  left: auto;
  right: 8px;
}

#attribution.obscured {
  visibility: hidden;
}

html[hasattribution=false] #attribution > div {
  display: none;
}

.sync-button {
  font-size: inherit;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.section {
  position: fixed;
  font-size: 92%;
}

body.noscroll {
  overflow: hidden;
}

html[anim=true][enable-section-animations=true] .section {
  -webkit-transition: top .15s;
}

#login-container {
  display: none;
  margin-top: 5px;
  position: fixed;
  text-align: end;
}

/* A section in menu mode doesn't display its contents at all. Instead it is
rendered as a menu along the bottom of the screen. We have a separate class for
this so that when a hidden section is unhidden it can go back to its previous
collapsed state. */
.section.menu {
  display: none !important;
}

/* A disabled section is not rendered in the UI in any way. Examples of this
state include the 'recently closed' section when we have no data for it, or this
'sync status' section, when there is no status to display. We have a separate
class for this so that when a section is enabled, it can go back to its previous
menu and collapsed state. */
.section.disabled {
  display: none !important;
}

.section > h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 133%;
  font-weight: normal;
  margin: 0;
  position: relative;
}

.section:not([noexpand]) > h2 {
  cursor: pointer;
}

.section > h2 > .disclosure {
  position: absolute;
  left: -15px;
  margin-top: 50%;
  top: -5px;
}

html[dir=rtl] .section > h2 > .disclosure {
  left: auto;
  right: -15px;
  -webkit-transform: rotate(180deg);
}

html[anim=true] .section > h2 > .disclosure {
  -webkit-transition: -webkit-transform .15s;
}

.section:not(.collapsed) > h2 > .disclosure {
  -webkit-transform: rotate(90deg);
}

.section > h2 .back {
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 100%;
  height: 1.5em;
  z-index: 1;
}

.section > h2 span {
  -webkit-padding-end: 0.30em;
  position: relative;
  z-index: 2;
}

.section-close-button {
  -webkit-appearance: none;
  -webkit-transition: opacity .15s;
  background-color: transparent;
  background-image: url(chrome://theme/IDR_CLOSE_BAR);
  background-position: center center;
  background-repeat no-repeat;
  border: 0;
  height: 21px;
  margin-top: -10px;
  position: absolute;
  right: -21px;
  top: 50%;
  width: 21px;
  opacity: 0;
  z-index: 3;
}

html[dir=rtl] .section-close-button {
  left: -21px;
  right: auto;
}

.section > h2:hover .section-close-button,
.section-close-button:hover {
 opacity: 1;
}

.section-close-button:hover {
  background-image: url(chrome://theme/IDR_CLOSE_BAR_H);
}

#closed-sections-bar {
  position: fixed;
  text-align: end;
}

/* closed-sections-bar is bottom aligned for non-ChromeOS build. On ChromeOS,
it goes right under the sections. */
#closed-sections-bar:not([chromeos]) {
  bottom: 14px;
}

#closed-sections-bar > button {
  /* We hide all these buttons by default and turn them on when needed. */
  display: none;

  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  margin: 0;
  -webkit-margin-start: 1.5em;
  padding: 2px 0 0 0;

  /* Note: The font here should end up the same as .section > h2. A different
  percentage is needed because the parent element here has a different size. */
  font-family: Helvetica, Arial, sans-serif;
  font-size: 122%;
  font-weight: normal;
}

#closed-sections-bar > button > img {
  -webkit-transform: rotate(90deg);
  position: relative;
  top: -2px;
  margin-left: 1px;
}

.maxiview {
  padding: 5px 0 30px;
  position: absolute;
  -webkit-mask-attachment: fixed;
  opacity: 0;
}

.maxiview.opaque {
  opacity: 1;
}

.maxiview.collapsing {
  opacity: 0;
}

.maxiview.collapsed {
  display: none;
  opacity: 0;
}

html[anim=true][enable-section-animations=true] .maxiview {
  -webkit-transition: opacity .10s, top .15s;
}

html[anim=true][enable-section-animations=true] .miniview {
  -webkit-transition: opacity .15s;
}

.section > .miniview {
  display: none;
  margin: 10px 0 30px;
  white-space: nowrap;
  overflow-x: hidden;
}

.section.collapsed > * {
  display: none;
}

.section.collapsed > h2 {
  display: block;
}

.section.collapsed > .miniview {
  display: block;
  opacity: 0;
}

.section.collapsed > .miniview.opaque {
  opacity: 1;
}

.section.collapsed > h2 {
  margin-right: 0;
}

.miniview > span  {
  display: inline-block;
  max-width: 114px; /* Selected so that we can fit 5 items in EN-US */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 100%;
  margin: 0 10px;
}

.miniview > span:first-child {
  margin-left: 0;
}

.miniview > span:last-child {
  margin-right: 0;
}

/* small */

.small-layout #main,
.small-layout .section,
.small-layout .maxiview,
.small-layout #login-container,
.small-layout #notification-container,
.small-layout #closed-sections-bar {
  width: 692px;
}

.small-layout  #notification > * {
  max-width: 300px;
}

.small-layout  #notification > span > .blacklist-title {
  max-width: 15ex;
}

/* Ensure we have at least 10px horizontal marging. */
@media (max-width: 712px) {
  #main {
    margin-left: 10px;
    margin-right: 10px;
  }
}