@import "colors.less";
@import "globals.less";
@import "mixins.less";

@sitebar_height: 24px;
@mainbar_height: 24px;

@sidebar_width: 200px;

body > header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-width: 0;
  z-index: @zindex_header;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

body.sitebar > header {
  position: absolute;
}

body > header #site-iphone-back {
  display: none;
}


/* Guestbar */
#guestbanner {
  display: none;
  background: @color_button;
  color: #fff;
  border-bottom: 1px solid @color_border_dark;
  padding: 10px 0;
  margin: auto;
  text-align: center;
  font-size: 15px;
  width: @site_editor_width;
  max-width: @site_max_width;
  margin-bottom:0px;
  margin-left: @site_left_margin;

  a {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
  }
}



body.guestbanner #guestbanner {
  display: block;
}

#guestbanner .banner-close {
  font-size: 30px;
  float: right;
  position: relative;
  top: -5px;
  left: -7px;
}

/* Sitebar */

@sitebar_width: 250px;
#sitebar {
  position: fixed !important;
  display: block !important;
  left: @sitebar_width * -1;
  top: 0;
  bottom: 0;
  width: @sitebar_width;
  height: auto;
  box-shadow: inset -3px 0px 6px -5px #333;
  z-index: @zindex_header;
  transition: all 200ms @site_fancy_transition;
  overflow-y: auto;
  overflow-x: hidden;
  color: #444;
  background-color: #222;
}

body.sitebar #sitebar {
  display: block;
}

body.guestbanner #sitebar {
  display: none;
}

#sitebar-heading {
  margin-top: 10px;
  margin-left: 18px;
}

#sitebar-heading a {
  color: #fff;
  text-transform: uppercase;
}

.sitebar-open #sitebar {
  left: 0;
}

body.sitebar-open,
body.sitebar-open > header,
body.sitebar-open #site-toggle {
  margin-left: @sitebar_width !important;
}

body.sitebar-open {
  overflow-x: hidden;
  width: 100%;
}

#domain-list {
  margin: 0 auto;
  line-height: 23px;
  width: auto;
  margin-top: 55px;

  .domain-item {
    height: 24px;
    color: @color_reverse_text_color;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 1px;
    display: block;
    width: @sitebar_width;
    text-align: left;
  }

  .domain-item:hover,
  .domain-item.selected {
    background-color: transparent;
    border-left: 5px solid #fff;
  }

  .domain-item-overflow {
    display: none;
    overflow: visible;
    margin-left: -3px;
  }

  .domain-item-new {
    letter-spacing: 0;
  }

  .domain-item-overflow .hp-ui-button,
  .domain-item > a {
    background-color: inherit;
    line-height: 24px;
    display: inline-block;
    width: @sitebar_width - 18px * 2;
    height: 24px;
    color: #777;
    padding: 0 18px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 200;
    letter-spacing: 1px;
  }

  .domain-item-overflow .hp-ui-button .hp-ui-button-arrow {
    border-top: 5px solid #fff;
  }

  .domain-item a:hover {
    text-decoration: none;
  }

  .domain-item.drop-active {
    background-color: #444;
  }

  .domain-item.drop-hover a{
    color: #fff;
  }



  .domain-item.drop-hover a {
    cursor: inherit;
  }

  .domain-item:hover > a,
  .domain-item.selected > a {
    color: #fff;
    margin-left: -5px;
  }
}

#domain-list .domain-item > #create-space {
  color: @color_actionable;
}

.domain-item-overflow .hp-ui-button {
  border: 1px solid transparent;
}

#feedbackbutton:hover {
  background-color: @color_actionable !important;
  background-image: none;
}

.sitebar-open #feedbackbutton {
  display: none;
}

#site-toggle {
  position: fixed;
  top: 10px;
  left: 10px;
  border: 0;
  background-color: transparent;
  font-size: 25px;
  color: @color_border;
  margin-left: 0;
  transition: all 200ms @site_fancy_transition;
  z-index: @zindex_header + 1;
}

#site-toggle:active {
  box-shadow: none;
}

#site-toggle:hover {
  color: @color_actionable;
}

#enable-video {
  display: none;
}

/* Branding */

#padbar {
  position: relative;
  margin: 0 auto;
  width: ~"calc(@{site_editor_width} - @{mainbar_padding} - @{mainbar_padding})";
  max-width: ~"calc(@{site_max_width} - @{mainbar_padding} - @{mainbar_padding})";
  padding: 10px @mainbar_padding;
  background-color: @color_bg_transparent;
}

#site-banner {
  display: none;
}

#mainbar {
  width: 100%; /*@new_pad_width - @mainbar_padding * 2;*/
}

#domain-list, #mainbar, #padbar {
  transition: all 200ms @site_fancy_transition;
}

#topbarBrand,
#mainbar,
#account {
  display: inline-block;
  vertical-align: top;
}

body.mini-header #padbar {
  display:none;
}

@topbar_extra_width: 500px;

#topbarBrand {
  position: absolute;
  top: 11px;
  left: -1 * @names_padding - @names_inner_padding - @topbar_extra_width;
  padding-right: @names_padding + @names_inner_padding;
  width: @topbar_extra_width;
  text-align: right;
  text-shadow: @color_white_text_shadow 0px 1px;
  color: @color_reverse_text_color;
  font-size: 20px;
  letter-spacing: 1px;
}

#topbarBrandFullName {
  max-width: 200px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#topbarBrand:hover {
  text-decoration: none;
}

#mainbar {
  height: @mainbar_height;
  text-align: left;
}


/* Search */

#createpadbox {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 100%;
}

#createpadbox .icon-search {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 1px;
  left: 2px;
  color: @color_toolbar;
  z-index: 10;
  font-size: 22px;
  opacity: 1;
  transition: color 0.2s ease-in;
}

.sprite-icons-loupe {
  width: 13px;
  height: 13px;
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 10;
  opacity: 0.8;
}

#createpadlink {
  padding-right: 3px;
}

#createpadlink .hp-ui-button-content,
#editbutton .hp-ui-button-content {
  transition: color 0.2s ease-in;
}

@zindex_createpadentry: 10;
@createpadentry_padding: 25px;
#createpadentry {
  border: 0px;
  padding: 2px 0px 2px 2px;
  border-radius: 3px;
  line-height: 15px;
  height: 18px;
  width: calc(~"100% - @{createpadentry_padding}");
  background-color: transparent;
  border: 1px solid transparent;
  color: #fff;
  font-weight: lighter;
  font-size: 16px;
  font-family: @base_font_new;
  padding-left: @createpadentry_padding;
  z-index: @zindex_createpadentry;
  position: relative;
  transition: all 200ms @site_fancy_transition;
}

.pro-body #createpadentry {
  width: 200px;
}

#createpadentry_placeholder {
  padding-left: 24px;
  margin-top: -1px;
}

#createpadform {
  z-index: 1; /* go above main toolbar. */
  display: inline-block;
  position: relative;
  vertical-align: top;
}

#createpadform2 {
  margin-left: -2px;
  display: inline-block;
  position: relative;
  vertical-align: top;
}

body:not(.search-focused) #createpadform2,
body:not(.search-focused) #createpadentry {
  width: 100px !important;
}

.search-focused #createpadform2 {
  width: calc(~"100% - @{topbar_brand_max_width} - 180px"); /* width - max width of sitebar name - icons. */
}

#settingsbutton .hp-ui-button-content {
  transition: color 0.2s ease-in;
}

#createpadbox:hover .icon-search,
#createpadbox.search-focused .icon-search {
  color: #fff;
}

#settingsbutton {
  position: absolute;
  top: 7px;
  right: 45px;
}

#settingsbutton .hp-ui-button-arrow {
  display: none;
}

#settingsbutton ul {
  border: 0;
}

#settingsbutton .hp-ui-button-menu-wrapper {
  top: 2px;
  left: 4px;
}

#pad-moderator-link {
  display: none;
}

#createpadlink,
#editbutton,
#settingsbutton {
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: none !important;
  margin-top: -1px;
}

#createpadlink .hp-ui-button-content,
#editbutton .hp-ui-button-content,
#settingsbutton .hp-ui-button-content {
  color: @color_toolbar !important;
  font-size: 24px;
  line-height: 24px;
}

#createpadlink .hp-ui-button-content {
  padding: 0 7px;
}

#createpadlink:hover .hp-ui-button-content,
#editbutton:hover .hp-ui-button-content,
#settingsbutton:hover .hp-ui-button-content {
  color: #fff !important;
}

.edit-mode #editbutton .icon-edit:before {
  content: '\e62f';
  color: #fff !important;
}



/* Toolbar */
#toolbar {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 127px;
  text-align: center;
  transition: all 150ms ease-in;
  z-index: @zindex_createpadentry;
}

.edit-mode #toolbar {
  width: auto;
  overflow: visible;
}

#toolbar .hp-ui-button-group,
#insertbutton {
  margin-left: 4px;
  float: left;
}

#toolbar .hp-ui-button-content {
  font-size: 17px;
  color: @color_toolbar;
  padding: 0 5px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  transition: color 0.2s ease-in;
}

#toolbar .hp-ui-button:hover .hp-ui-button-content {
  color: #fff;
}

#mainbar .hp-ui-button-content:before {
  line-height: 16px;
}

#toolbar .toolbar-main,
#header1button,
#header2button {
  display: none;
}

#debugmenu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: @zindex_important;
}


#toolbar .hp-linkbutton-wrapper {
  margin-left: 0;
}

#toolbar-arrow {
  display: none;
  width: 6px;
  height: 9px;
  position: absolute;
  right: -5px;
  top: 17px;
}

.edit-mode #toolbar #toolbar-arrow {
  display: block;
}

#toolbar button {
  border: 0 !important;
  background-color: transparent;
  color: @color_toolbar;
  box-shadow: none !important;
  height: 33px;
  width: 0;
  overflow: hidden;
  transition: width 150ms ease-in;
}

.edit-mode #toolbar button {
  width: 30px;
  overflow: visible;
}

#toolbar button .icon-indent,
#toolbar button .icon-outdent,
#toolbar button .icon-insert,
#toolbar button .icon-photo {
  margin-top: 2px;
}

#editbutton {
  position: absolute;
  right: 90px;
  top: 10px;
}

#toolbar .hp-ui-button-group {
  display: inline-block;
  margin-top: 5px;
  margin-left: 0;
  float: none;
  border: 1px solid transparent;
  vertical-align: top;
  transition: all 100ms ease-in;
}

.edit-mode #toolbar .hp-ui-button-group {
  padding: 0 5px;
  border: 1px solid #4b4b4b;
  border-right: 0;
  background-color: #000;
}

.edit-mode #toolbar #toolbar-attach-group {
  border-right: 1px solid #4b4b4b;
}

#toolbar #toolbar-attach-group button {
  width: 0.01px; /* Not 0 exactly to fix weird rendering in Safari 7. */
  overflow: hidden;
  transition: width 150ms ease-in;
}

.edit-mode #toolbar #toolbar-attach-group #attachbutton,
.edit-mode #toolbar #toolbar-attach-group.open button {
  width: 30px;
  overflow: visible;
}

#toolbar-attach-group #attachbutton .icon-insert {
  transition: all 100ms ease-in;
}

#toolbar-attach-group.open #attachbutton .icon-insert {
  .transform(~"rotate(-45deg)");
}

#toolbar-attach-group.open #attachbutton .hp-ui-button-content {
  color: #fff;
}

#toolbar .hp-ui-button-group + .hp-ui-button-group.toolbar-show {
  margin-left: -1px;
  border-left: 0;
}


/* Account */

#account {
  width: @sidebar_width;
  text-align: left;
  display: none;
  position: absolute;
  top: 35px;
  left: 15px;
  margin-left: 0;
  margin-top: 5px;
}

.sitebar-open #account {
  display: block;
}

#faccountnav {
  margin-left: -4px;
  height: 15px;
  line-height: @mainbar_height;
}

#faccountnav > a {
  font-size: 13px;
  color: #fff;
  margin-left: 7px;
}

#account-dropdown {
  font-size: 13px;
  letter-spacing: 0px;
  background-color: transparent;

  .hp-ui-button-content {
    color: #777;
  }

  .hp-ui-button-arrow {
    border-top: 5px solid #777;
  }

  .profile-pic {
    float: left;
    width: 45px;
    height: 45px;
    border-radius: 5px;
  }

  .profile-name {
    display: block;
  }

  .profile-email {
    display: block;
    padding-left: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 11px;
  }

  .hp-ui-button-list-ul {
    min-width: 200px !important;

    li:first-child {
      text-align: right;
    }

    li:first-child a {
      padding: 5px 10px;
    }

    li:first-child:hover {
      color: #fff;
    }
  }
}

#topbarBrand {
  display: none;
}

#topbarBrand2 {
  display: inline-block;
  color: @color_toolbar;
  opacity: 1;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 300;
  font-family: @base_font_new;
  text-align: center;
  margin-top: 5px;
  margin-right: 7px;
  letter-spacing: 1px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  position: relative;
  transition: color 0.2s ease-in;
}

#topbarBrand3 {
  display: inline-block;
  color: @color_toolbar;
  opacity: 1;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: @base_font_new;
  text-align: center;
  margin-top: 5px;
  margin-left: 35%;
  margin-right: 35%;
  letter-spacing: 1px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 0;
  position: absolute;
  left: 0;
  right: 0;
  transition: all 0.2s ease-in;
}

.edit-mode #topbarBrand3,
.search-focused #topbarBrand3 {
  opacity: 0;
}

#topbarBrand2:hover,
#topbarBrand3:hover {
  color: #fff;
}

body #topbarBrand2 .icon-home {
  font-size: 24px;
  vertical-align: top;
  margin-top: -4px;
}

body.edit-mode #topbarBrandFullName2,
body.search-focused #topbarBrandFullName2 {
  display: none;
}

/* Old feature: banner for sites */
/*
body.hasBanner:not(.mobile-web) > header {
  background: linear-gradient(to top, fade(@color_shadow, 0%) 0,fade(@color_shadow, 75%) 30%, @color_shadow 80%);
}

body.hasBanner:not(.mobile-phone) {
  #site-banner {
    display: block;
    width: @site_editor_width;
    max-width: @site_max_width;
    overflow: hidden;
    height: @banner_height_full;
    margin-left: 15%;
    background-size: cover;
    background-clip: content-box;
  }

  #padbar {
    position: absolute;
    bottom: 0;
  }
}

body.hasSitebar.hasBanner.pro-body:not(.mobile-phone) #padpage {
  margin-top: @banner_height_full + 10px;
  padding-top: 0;
}

body.hasSitebar.hasBanner.propad:not(.mobile-phone) #padpage {
  margin-top: @banner_height_full;
  padding-top: 0;
}
*/
