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

body {
  margin: 0;
}

#main {
  background: url(chrome://theme/product_logo) no-repeat 0 6px;
  position: relative;
  margin: 0 auto;
  width: 920px;
  -webkit-transition: width .15s;
}

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

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

/* Most Visited */

#most-visited {
  position: relative;
  padding: 0;
  margin-bottom: 34px;
  height: 366px;
  -webkit-user-select: none;
  -webkit-transition: height .15s, opacity .15s;
}

.thumbnail-container {
  position: absolute;
  -webkit-transition: top .15s, left .15s;
  color: black;
  text-decoration: none;
  -webkit-transition: left .15s, top .15s;
}

.list > .thumbnail-container {
  -webkit-transition: left .15s, top .15s, width .15s;
  overflow: hidden;
}

/* hide outline in thumbnail view */
:not(.list) > .thumbnail-container:focus {
  outline: none;
}

.thumbnail,
.thumbnail-container > .title {
  width: 207px; /* natural size is 196 */
  height: 129px; /* 136 */
  -webkit-transition: width .15s, height .15s;
}

.thumbnail-wrapper {
  display: block;
  -webkit-background-size: 212px 132px;
  background: no-repeat 4px 4px;
  background-color: white;
  -webkit-border-radius: 5px;
  -webkit-transition: -webkit-background-size .15s;
  position: relative;
}

.filler * {
  visibility: hidden;
}

.filler {
  pointer-events: none;
}

.filler .thumbnail-wrapper {
  visibility: visible;
  border: 3px solid hsl(213, 60%, 92%);
}

.list > .filler * {
  visibility: hidden !important;
}

.filler .thumbnail {
  visibility: inherit;
  border: 1px solid white;
  padding: 0;
  background-color: hsl(213, 60%, 92%);
}

.edit-bar {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  padding: 3px;
  padding-bottom: 0;
  height: 17px; /* 23 - 2 * 3 */
  cursor: move;
  font-size: 100%;
  line-height: 17px;
  background: hsl(213, 54%, 95%);
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  position: relative;
  margin-top: 21px;
  margin-bottom: -21px;
  -webkit-transition: margin .15s, background .15s;
}

.edit-bar > * {
  display: block;
  position: relative;
}

.thumbnail-container:focus .edit-bar,
.thumbnail-container:hover .edit-bar {
  margin-top: 0;
  margin-bottom: 0;
  -webkit-transition-delay: .5s, 0s;

  /* We need background-color as well to get the fade out animation correct */
  background-color: hsl(213, 66%, 57%);
  background-image: -webkit-gradient(linear, left top, left bottom,
                                     from(hsl(213, 87%, 67%)),
                                     to(hsl(213, 66%, 57%)));
}

.edit-bar > .spacer {
  -webkit-box-flex: 1;
}

.edit-bar > .pin,
.edit-bar > .remove {
  width: 16px;
  height: 16px;
  cursor: pointer;
  background-image: no-repeat 50% 50%;
}

.edit-bar > .pin {
  background-image: url(chrome://theme/newtab_pin_off);
}

.edit-bar > .pin:hover {
  background-image: url(chrome://theme/newtab_pin_off_h);
}

.edit-bar > .pin:active {
  background-image: url(chrome://theme/newtab_pin_off_p);
}

.pinned .edit-bar > .pin {
  background-image: url(chrome://theme/newtab_pin_on);
}

.pinned .edit-bar > .pin:hover {
  background-image: url(chrome://theme/newtab_pin_on_h);
}

.pinned .edit-bar > .pin:active {
  background-image: url(chrome://theme/newtab_pin_on_p);
}

.edit-bar > .remove {
  background-image: url(chrome://theme/newtab_close);
}

.edit-bar > .remove:hover {
  background-image: url(chrome://theme/newtab_close_h);
}

.edit-bar > .remove:active {
  background-image: url(chrome://theme/newtab_close_p);
}

:link,
:visited,
.link {
  cursor: pointer;
  text-decoration: underline;
  color: hsl(213, 90%, 24%);
}

.thumbnail-container {
  text-decoration: none;
}

.thumbnail-container > .title {
  line-height: 16px;
  height: 16px;
  margin: 0;
  margin-top: 4px;
  font-size: 100%;
  font-weight: normal;
  padding: 0 3px;
  opacity: 1;
  -webkit-transition: opacity .15s, width .15s;
  color: black;
}

.thumbnail-container > .title > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: no-repeat 0 50%;
  -webkit-background-size: 16px;
  padding-left: 20px; /* we cannot use padding start here because even if we set
                         the direction we always want the icon on the same side
                      */
  padding-right: 0;
}

html[dir=rtl] .thumbnail-container > .title > div {
  background-position-x: 100%;
  padding-left: 0;
  padding-right: 20px;
  text-align: right;
}

.thumbnail {
  border: 3px solid hsl(213, 63%, 93%);
  padding: 1px;
  -webkit-border-radius: 5px;
  display: block;
  -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
  -webkit-transition: width .15s, height .15s, border-color .15s,
      -webkit-border-radius .15s, -webkit-box-shadow .15s;
}

.edit-mode-border {
  -webkit-border-radius: 4px;

  /* when dragged over we move this */
  position: relative;
  -webkit-transition: top .15s, left .15s;
}

.thumbnail-container:focus .thumbnail,
.thumbnail-container:hover .thumbnail {
  border-color: hsl(213, 66%, 57%);
  -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;

  background-image: -webkit-gradient(linear, left top, left bottom,
    from(hsla(0, 0%, 0%, 0)),
    color-stop(0.85, hsla(0, 0%, 47%, 0)),
    to(hsla(0, 0%, 47%, 0.2))
    );

  /* delay border radius transition as much as the edit bar slide delay */
  -webkit-transition-delay: 0, 0, 0, .5s, 0;
}

.thumbnail-container:focus > .edit-mode-border,
.thumbnail-container:hover > .edit-mode-border {
  background-color: hsl(213, 66%, 57%);
  -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
}

.dragging,
.dragging * {
  -webkit-transition: none !important;
}

.dragging > .title {
  opacity: 0;
}

.list > .dragging > .title {
  opacity: 1;
}

.hide {
  opacity: 0 !important;
  visibility: hidden !important;
}

@-webkit-keyframes 'fade-in' {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation: 'fade-in' .15s;
}

/* Notification */

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

#notification.first-run {
  padding: 5px 13px; /* subtract the border witdh */
  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 > * {
  display: table-cell;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

#notification .link {
  -webkit-margin-start: 20px;
}

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

/* List mode */

.list .thumbnail,
.list .edit-bar {
  display: none;
}

.list > .thumbnail-container {
  -webkit-box-sizing: border-box;
}

.list > .thumbnail-container > .title {
  font-size: 120%;
  line-height: 34px;
  height: 34px;
  color: hsl(213, 27%, 68%);
  width: 100%;
}

.list > .thumbnail-container {
  color: hsl(213, 27%, 68%);
  text-decoration: underline;
}

.list > .thumbnail-container > .title > div {
  text-decoration: none;
  color: rgb(6, 45, 117);
}

.item {
  background: no-repeat 0% 50%;
  padding: 2px;
  padding-left: 18px;
  -webkit-background-size: 16px;
  background-color: hsla(213, 63%, 93%, 0);
  display: block;
  line-height: 20px;
  -webkit-box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  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(chrome://theme/newtab_closed_window);
}

.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: hsla(213, 0%, 100%, .95);
  left: 0;
  white-space: nowrap;
  z-index: 2;
  padding: 1px;
  cursor: default;
}

.window-menu > hr {
  border: 0;
  border-top: 1px solid rgb(153, 153, 153);
  margin: 2px 0;
}

/* 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);
  -webkit-border-radius: 3px;
  padding: 0px 3px;
  background: -webkit-gradient(linear, left top, left bottom,
                               from(white),
                               to(rgb(228, 229, 240)));
  width: auto;
  max-width: 300px;
}

.hbox {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}

#recently-closed {
  -webkit-transition: opacity .15s;
  background-color: hsla(213, 60%, 92%, .4);
  border: 1px solid hsl(213, 60%, 92%);
  -webkit-border-radius: 5px;
  padding: 5px 0px;
  white-space: nowrap;
  overflow-x: hidden;
}

#recently-closed > * {
  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;
}

#recently-closed > h2,
#recently-closed .nav {
  max-width: none;
}
.nav > a {
  /* no icon */
  padding: 0;
}

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

#sync-status {
  -webkit-transition: height .15s, opacity .15s;
  background-color: hsla(213, 60%, 92%, .4);
  border: 1px solid hsl(213, 60%, 92%);
  -webkit-border-radius: 6px;
  padding: 5px 0;
  margin: 10px 0;
  white-space: nowrap;
  opacity: 0;
  overflow-x: hidden;
}

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

#view-toolbar {
  -webkit-user-select: none;
  text-align: right;
  position: relative;
  top: 15px;
}

html[dir='rtl'] #view-toolbar {
  text-align: left;
}

#view-toolbar > input {
  -webkit-appearance: none;
  background-color: transparent;
  width: 19px;
  height: 17px;
  margin: 0;
  border: 0;
  padding: 0;
  vertical-align: top;
  -webkit-margin-start: 5px;
  /* Do not show focus outline */
  outline: none;
}

#thumb-checkbox {
  background-image: url(chrome://theme/newtab_thumb_off);
}

#thumb-checkbox:hover,
#thumb-checkbox:focus {
  background-image: url(chrome://theme/newtab_thumb_off_h);
}

#thumb-checkbox:active {
  background-image: url(chrome://theme/newtab_thumb_off_p);
}

#thumb-checkbox:checked {
  background-image: url(chrome://theme/newtab_thumb_on);
}

#thumb-checkbox:checked:hover,
#thumb-checkbox:checked:focus {
  background-image: url(chrome://theme/newtab_thumb_on_h);
}

#thumb-checkbox:checked:active {
  background-image: url(chrome://theme/newtab_thumb_on_p);
}

#list-checkbox {
  background-image: url(chrome://theme/newtab_list_off);
}

#list-checkbox:hover,
#list-checkbox:focus {
  background-image: url(chrome://theme/newtab_list_off_h);
}

#list-checkbox:active {
  background-image: url(chrome://theme/newtab_list_off_p);
}

#list-checkbox:checked {
  background-image: url(chrome://theme/newtab_list_on);
}

#list-checkbox:checked:hover,
#list-checkbox:checked:focus {
  background-image: url(chrome://theme/newtab_list_on_h);
}

#list-checkbox:checked:active {
  background-image: url(chrome://theme/newtab_list_on_p);
}

#option-button {
  background-image: url(chrome://theme/newtab_option);
}

#option-button:hover,
#option-button:focus {
  background-image: url(chrome://theme/newtab_option_h);
}

#option-button:active {
  background-image: url(chrome://theme/newtab_option_p);
}

#option-menu {
  -webkit-user-select: none;
  position: absolute;
  right: 0;
  left: auto;
  top: 33px; /* Position this below the option button. The option button
                is positioned 15px from the top and has a height of 17px. We add
                one to get some spacing there as well: 15 + 17 + 1 = 33 */
  cursor: default;
  pointer-events: all;
  min-width: 175px;
}

html[dir='rtl'] #option-menu {
  right: auto;
  left: 0;
}

#option-menu > div {
  padding: 3px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#option-menu > [selected] {
  background-color: hsl(213, 66%, 57%);
  color: white;
}

#option-menu > [command='show']:before,
#option-menu > [command='hide']:before {
  display: inline-block;
  width: 12px;
  content: '\00a0'; /* non breaking space */
  background-position: 0 50%;
  background-repeat: no-repeat;
}

html[dir='rtl'] #option-menu > [command='show']:before,
html[dir='rtl'] #option-menu > [command='hide']:before {
  background-position-x: 100%;
}

#option-menu > [command='hide']:before {
  background-image: url(chrome://theme/newtab_checkbox_black);
}

#option-menu > [selected][command='hide']:before {
  background-image: url(chrome://theme/newtab_checkbox_white);
}

/* Hard code thumbnail positions to improve initial layout speed */
#t0, #t4,
html[dir='rtl'] #t3,
html[dir='rtl'] #t7 {
  left: 0;
}

#t1, #t5,
html[dir='rtl'] #t2,
html[dir='rtl'] #t6 {
  left: 235px;
}

#t2, #t6,
html[dir='rtl'] #t1,
html[dir='rtl'] #t5 {
  left: 470px;
}

#t3, #t7,
html[dir='rtl'] #t0,
html[dir='rtl'] #t4 {
  left: 705px;
}

#t4, #t5, #t6, #t7 {
  top: 183px;
}

/* tip line */
#tip-line {
  margin-top: 40px;
  margin-bottom: 10px;
  text-align: center;
}

/* small */

@media (max-width: 920px) {

  #main {
    width: 692px;
  }

  #most-visited {
    height: 294px;
  }

  .thumbnail,
  .thumbnail-container > .title {
    width: 150px;
    height: 93px;
  }

  .thumbnail-container > .title {
    height: auto;
  }

  .thumbnail-wrapper {
    -webkit-background-size: 150px 93px;
  }

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

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

  #t0, #t4,
  html[dir='rtl'] #t3,
  html[dir='rtl'] #t7 {
    left: 0;
  }

  #t1, #t5,
  html[dir='rtl'] #t2,
  html[dir='rtl'] #t6 {
    left: 178px;
  }

  #t2, #t6,
  html[dir='rtl'] #t1,
  html[dir='rtl'] #t5 {
    left: 356px;
  }

  #t3, #t7,
  html[dir='rtl'] #t0,
  html[dir='rtl'] #t4 {
    left: 534px;
  }

  #t4, #t5, #t6, #t7 {
    top: 147px;
  }
}