/*
  application.less contains all of the layout elements for the logged-in application state. This is styling
  for the editor UI ONLY. It relies heavily on global.less, which provides all form element styling and much
  of the generic UI found in the app - including during inline editing and the like.
*/
@import url('_buttons.less');

/* Layout Elements */

body {
  overflow:hidden;
}

#header {
  background-color:#eee;
  background-image:-moz-linear-gradient(top, #eee, #ddd);
  background-image:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
  border-bottom:1px solid #eee;
  border-top:1px solid #fff;
  height:35px;
  left:0;
  padding:0 10px;
  position:absolute;
  width:100%;
  z-index:2;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-shadow:#999 0 1px 2px;
  -webkit-box-shadow:#999 0 1px 2px;

  .float-right {
    line-height:35px;
  /*  margin-top:11px;*/
  }

  .float-right a {
    color:#000;
    display:inline-block;
    padding:0 7px;
  }

  .float-right a:hover {
    background-color:rgba(255, 255, 255, 0.3);
    text-decoration:underline;
  }
}

#logo {
  display:inline-block;
  padding-top:1px;
}

#content {
  height:100%;
  overflow:hidden;
  padding:36px 0 0 0;
  position:absolute;
  width:100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

#left {
  left:20px;
  position:absolute;
  top:51px;
  width:150px;

  .button {
    display:block;
    margin-bottom:10px;
  }

  ul {
    background-color:#ececec;
    background-image:-moz-linear-gradient(top, #f4f4f4, #ececec);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#ececec));
    list-style-type:none;
    margin:0;
    padding:0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;

    li.first {
      > a {
        border-top-color:#d4d4d4;
        -moz-border-radius-topleft:2px;
        -webkit-border-top-left-radius:2px;
      }

      a.expand {
        -moz-border-radius-topleft:0;
        -moz-border-radius-topright:2px;
        -webkit-border-top-left-radius:0;
        -webkit-border-top-right-radius:2px;
      }
    }

    li {
      margin:0;
      padding:0;

      a {
        #grandstand > .button-default;
        border-top-color:#f4f4f4;
        display:block;
        padding:5px;
        -moz-border-radius:0;
        -webkit-border-radius:0;
      }

      a:hover {
        #grandstand > .button-hover;
      }

      a:active {
        #grandstand > .button-active;
      }

      a.expand {
        float:right;
        margin-right:0;
        height:26px;
        line-height:26px;
        padding:0;
        width:15px;

        span {
          background:url(../images/icons/expand.png) center bottom no-repeat;
          display:block;
          height:16px;
          margin-top:4px;
          width:16px;
        }
      }

      ul {
        display:none;

        li a {
          font-size:10px;
          padding-left:20px;
        }
      }
    }

    li.expandable {
      > a {
        border-right-width:0;
      }

      > a.expand {
        border-right-width:1px;
      }
    }

    li.last a {
      -moz-border-radius-bottomleft:2px;
      -moz-border-radius-bottomright:2px;
      -webkit-border-bottom-left-radius:2px;
      -webkit-border-bottom-right-radius:2px;
    }

    li.expanded {
      a.expand span {
        background-image:url(../images/icons/collapse.png);
      }

      ul {
        display:block;
      }
    }
  }
}

#main {
  height:100%;
  padding:20px 20px 20px 190px;
  overflow-x:hidden;
  overflow-y:auto;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

#cover {
  background-color:#000;
  height:100%;
  left:0;
  opacity:0.6;
  position:fixed;
  top:0;
  width:100%;
  z-index:2;
}

#cover.loading {
  background-image:url(../images/spinner-dark.gif);
  background-position:center center;
  background-repeat:no-repeat;
}

#dialog {
  left:50%;
  margin-left:-200px;
  position:fixed;
  top:0;
  width:400px;
  z-index:3;
  -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  -webkit-border-bottom-left-radius:5px;
  -webkit-border-bottom-right-radius:5px;
  -moz-box-shadow:#333 0 1px 2px;
  -webkit-box-shadow:#333 0 1px 2px;

  h2 {
    background:#fafafa;
    border-bottom:1px solid #ddd;
    color:#555;
    font-size:10pt;
    margin:0 !important;
    padding:5px;
    text-shadow:#fff 0 1px 0;
  }

  form {
    border-top:1px solid #fff;
    margin:0;
  }

  form.two-pane {
    background:#d9dfe8;
    border-top-width:0;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
  }

  .destination {
    background-color:#fff;
    border-left:1px solid #aaa;
    height:100%;
    margin-left:200px;
  }

  .field {
    background:#f0f0f0;
    padding:10px;
  }

  .image {
    cursor:pointer;
  }

  .scrollable {
    /*    height:100%;*/
    overflow-x:hidden;
    overflow-y:auto;
    padding:10px 0;
    width:100%;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
  }

  .source {
    float:left;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    width:200px;

    .header {
      background-color:transparent !important;
      background-image:none !important;
      border-width:0 !important;
      color:#505d81;
      font-weight:bold;
      padding:10px 10px 5px 10px;
      text-shadow:#f1f5f8 0 1px 0;
      text-transform:uppercase;
    }

    a {
      border-top:1px solid #d9dfe8;
      color:#000;
      display:block;
      padding:5px 5px 5px 20px;
      text-decoration:none;
    }

    a.active {
      background:-webkit-gradient(linear, left top, left bottom, from(#63a4e2), to(#0066c0));
      border-top:1px solid #4691d6;
      color:#fff;
      text-shadow:#000 0 1px 0;
    }
  }

  .toolbar {
    #grandstand > .styled-toolbar;
    border-top:1px solid #888;
    clear:both;
    text-align:right;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;

    .button {
      border-color:#888;
    }
  }
}

#dialog.large {
  margin-left:-450px;
  width:900px;
}

#dialog.medium {
  margin-left:-300px;
  width:600px;
}