/*
  global.less contains the styling for rendering the grandstand UI in any context, assuming
  it lives somewhere underneath a .grandstand item. This will allow you to take global UI
  elements and apply them externally or internally - whatever you feel like.
*/
@import url('_buttons.less');

body, html {
  min-height:100%;
}

body.grandstand {
  background-color:#fff;
  background-image:-moz-linear-gradient(top, #fff, #eee);
  background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  font:12px Arial, sans-serif;
  margin:0;
  padding:0;
}

.grandstand {
  /* HTML Tags (excluding form input elements) */
  a {
    cursor:pointer;
    text-decoration:none;
  }

  a img {
    border-width:0;
  }

  form {
    label, .label {
      color:#666;
      display:block;
      font:bold 12px Arial;
      margin-bottom:3px;
    }

    .field {
      margin:0;
      overflow:hidden;
      padding:10px 5px;
    }
  }

  h1, h2 {
    font-family:'Calibiri', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    .button {
      margin-left:10px;
      vertical-align:center;
    }
  }

  h1 {
    margin:0 0 10px 0;
    font-size:16pt;
  }

  h2 {
    display:block !important;
    margin:0 0 5px 0;
    font-size:14pt;
  }
  
  table {
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
  }

  table {
    tbody, tr {
      width:100%;
    }
  }


  /* Tag-specific classes */
  select.error {
    border:1px solid #f00;
  }

  select.multiple {
    min-height:55px;
    min-width:150px;
  }

  select.small {
    width:50px;
  }

  textarea.small {
    height:32px;
    width:180px;
  }

  textarea.wysiwyg {
    display:block;
    height:400px;
    width:100%;
  }

  textarea.error, input.error {
    border:1px solid #f00 !important;
  }

  tr.item {
    background-color:#fff;
  }

  tr.item.odd {
    background-color:#edf3fe;
  }

  tr.item td {
    padding:5px;
  }

  tr.item td.icon {
    background-position:5px 2px;
    padding-left:25px;
  }

  /* General Classes */
  .container {
    float:left;
    margin:0 0 10px 10px;
    padding:0 !important;
    width:220px;
  }

  .container.gallery img {
    display:none;
  }

  .container.gallery a img, .container.image img {
    display:block;
    padding:10px;
  }

  .container:hover {
    background-color:#ececec;
  }

  .dropdown {
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-box-shadow:#444 0 2px 2px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-box-shadow:#444 0 2px 2px;
  }

  .grid {
    border-collapse:collapse;
    border:1px solid #aaa;

    thead th {
      background:#eee;
      padding:5px;
      text-align:left;
    }

    tbody {
      tr.row {
        td {
          border-top:1px solid #aaa;
          padding:5px;
        }

        td.actions {
          text-align:right;
        }
      }

      tr.one {
        background-color:#fff;
      }

      tr.two {
        background-color:#edf3fe;
      }
    }
  }

  .grey {
    color:#666;
  }

  .header {
    background-color:#a7a7a7;
    background-image:-moz-linear-gradient(top, #cacaca, #a7a7a7);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#a7a7a7));
    border-bottom:1px solid #888;
    overflow:hidden;
    padding:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
  }

  .header .float-left {
    cursor:move;
    font-weight:bold;
  }


  .button {
    #grandstand > .button-default;
  }

  .button::-moz-focus-inner {
    border:none;
    padding:0 !important;
  }

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

  .button:active, .button.active {
    #grandstand > .button-hover;
    #grandstand > .button-active;
  }

  .button.default {
    #grandstand > .button-grey;
  }

  .button.default:hover {
    #grandstand > .button-grey-hover;
  }

  .button.default:active {
    #grandstand > .button-grey-active;
  }

  .center {
    text-align:center;
  }

  .error {
    margin-top:5px;
  }

  .errors label {
    color:#f00;
  }

  .errors input.text, .errors select, .errors textarea {
    border:1px solid #f00;
  }

  .float-left {
    float:left;
  }

  .float-right {
    float:right;
  }

  .icon {
    background-position:left top;
    background-repeat:no-repeat;
    display:inline-block;
    min-height:16px;
    padding-left:20px;
  }

  .button:hover .icon, .icon:hover {
    background-position:left bottom;
  }

  .button.has-icon {
    padding-left:5px;
  }

  .icon.add {
    background-image:url(../images/icons/add.png);
  }

  .icon.delete {
    background-image:url(../images/icons/delete.png);
  }

  .icon.edit {
    background-image:url(../images/icons/edit.png);
  }

  .icon.error {
    background-image:url(../images/icons/error.png);
  }

  .icon.gallery {
    background-image:url(../images/icons/gallery.png);
  }

  .icon.galleries {
    background-image:url(../images/icons/galleries.png);
  }

  .icon.image {
    background-image:url(../images/icons/image.png);
  }

  .icon.okay {
    background-image:url(../images/icons/okay.png);
  }

  .icon.pages {
    background-image:url(../images/icons/pages.png);
  }

  .icon.posts {
    background-image:url(../images/icons/posts.png);
  }

  .icon.processing {
    background-image:url(../images/icons/processing.gif);
    background-position:left bottom;
  }

  .icon.upload {
    background-image:url(../images/icons/upload.png);
  }

  .icon.users {
    background-image:url(../images/icons/users.png);
  }

  h1.icon {
    line-height:48px;
    padding-left:58px;
  }

  .inset {
    background-color:#f5f5f5;
    padding:10px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-box-shadow:inset #888 0 1px 2px;
    -webkit-box-shadow:inset #888 0 1px 2px;

    .button {
      -moz-box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0;
      -webkit-box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0;
    }
  }

  .inset.icon {
    background-position:5px 5px;
    display:block;
    padding-left:68px;
  }

  .notification {
    bottom:20px;
    position:fixed;
    text-align:center;
    width:100%;
    z-index:4;
  }

  .notification .inner {
    background:rgba(0, 0, 0, 0.7);
    color:#fff;
    display:inline-block;
    font-size:24pt;
    margin:0 auto;
    padding:10px 20px;
    -moz-border-radius:70px;
    -webkit-border-radius:70px;
  }

  .progress-bar {
    background:url(../images/background-progress-bar.png) repeat-x left center;
    margin:0;
    padding:0 !important;
    width:200px;

    .progress {
      background:url(../images/background-progress.gif) repeat-x;
      height:11px;
      width:0;
    }
  }

  .progress-bar.complete .progress {
    background-image:url(../images/background-progress-complete.gif);
    width:100%;
  }

  .right {
    text-align:right;
  }

  /* Form Elements */
  select {
    padding:2px;
  }

  textarea {
    height:50px;
  }

  input.text, textarea {
    background:#fff url(../images/background-input.gif) repeat-x;
    border-bottom:1px solid #ddd;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-top:1px solid #7d7d7d;
    padding:3px;
    width:370px;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
  }

  input.text.medium {
    width:180px;
  }

  input.text.oversized {
  /*  display:block;*/
    font-size:18px;
    width:100%;
  }

  input.half.text.oversized {
    width:183px;
  }

  input.text.small {
    width:94px;
  }

  input.text.tiny {
    width:50px;
  }

  input.replace.unedited, textarea.replace.unedited {
    color:#777 !important;
  }

  /* jQuery UI */
  .ui-tabs-hide {
    display:none;
  }
}