/* #Dialog.css

dialog.css is the set of styles for modal dialog

## Dialog

.mt-dialog class is the container block for the modal dialog. It usually has one iframe element which body element has dialog class.

```
<body class="has-dialog">
  <div style="height: 300px">
    <div class="mt-dialog" style="height: 300px; display: block; position:absolute">
      <span>Close</span>
      <iframe id="mt-dialog-iframe" frameborder="0" width="50px" style="height: 300px;"></iframe>
    </div>
    <div class="mt-dialog-overlay overlay" style="display: block; height: 100%"></div>
  </div>
</body>
```
(the above code set position:absolute to mt-dialog class for style guide layout, but usualy applied position:fixed)

<h3>stop Body overflow</h3>

.has-dialog class is usually added at body element with dialog opening, which make body overflow:hidden

<h3>dialog overlay</h3>

.mt-dialog-overlay overlays main content, so user can manipulate dialog contents only.

```
<div class="mt-dialog-overlay overlay" style="display: block;"></div>
```

<h3>Comment Reply Dialog</h3>

Reply comment form is build on dialog, so some specific styles are in dialog.css

```
<div class="dialog dialog-screen">
  <div id="container">
    <div id="content">
      <div id="content-header">
        <h1 id="page-title" class="title page">Reply to comment</h1>
      </div>
      <div id="content-body">
        <form id="comments-form">
          <div id="comment">
            <p class="comment-meta">On
              <span class="comment-date">Jul 10, 2013</span>,
              <span class="commenter-name">yyamaguchi</span>commented on
              <span class="entry-title">Lorem ipsum</span>
            </p>
            <div class="comment-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>
          </div>

          <div id="comment-reply-field" class="field field-top-label ">
            <div class="field-header">
              <label id="comment-reply-label" for="comment-reply">Your reply:</label>
            </div>
            <div class="field-content ">
              <textarea name="comment-reply" id="comment-reply" class="text full high"></textarea>
            </div>
          </div>
          <div class="actions-bar actions-bar-bottom line">
            <button id="action button  publish-comment-action" class="save action primary button">Submit</button>
            <button type="submit" class="action button mt-close-dialog">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
```
(the above html is called within modal dialog's iframe)

## UI-Dialog

ui-dialog, used in Filter Option dialog, is the small dialog generated by jQuery UI.

```
<div style="height:150px"></div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable" style="height: auto; width: 380px; top: 30px; left: 30px; display: block;">
  <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Select Filter</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close">
      <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
      <span class="ui-button-text">close</span>
    </button>
  </div>
  <div id="dialog_filter" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 101px; max-height: none; height: auto;">
    <div class="dialog-msg-block"></div>
    <div id="dialog_filter_content">
      <div class="filter-list-block">
        <h3 class="filter-list-label">My Filters</h3>
        <ul id="user-filters" class="editable">
          <li class="filter line"><a href="#" id="new_filter" class="icon-mini-left addnew create-new apply-link">Create New</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

*/


body.has-dialog {
    overflow: hidden;
}

.mt-dialog-overlay {
    display: none;
    z-index: 2000;
    width: 100%;
    min-width: 960px;
    height: 200%;
}
#mt-dialog-iframe {
    border-radius: 3px;
}

.mt-dialog,
.ui-dialog {
    position: absolute;
    border: 1px solid #c0c6c9;
    background-color: #fffffc;
    border-radius: 3px;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.3);
    z-index: 1002;
}
.mt-dialog {
    display: none;
    position: fixed;
    z-index: 2001;
    top: 30px;
    left: 50%;
    width: 960px;
    margin-left: -480px;
}
.mt-dialog span {
    display: none;
}

.dialog-screen .actions-bar-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  background-color: #fff;
  border-top: 1px solid #c0c6c9;
}

.dialog-screen .actions-bar-bottom.has-pagination {
  position: static;
  padding: 0;
  border: none;
}

.ui-dialog.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}

.dialog #container {
    width: 100%;
    min-width: 100%;
    margin: 0 auto;
}

.mt-dialog img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
}
.dialog .progress {
    position: absolute;
    top: 1em;
    right: 0;
    line-height: 1;
}

.dialog .view-site-link {
    float: right;
    margin: 4px 2px 0 4px;
}
.dialog .view-site-link img {
    background-image: url(../images/status_icons/view.gif);
}

.ui-dialog-titlebar {
    padding: 10px;
    line-height: 1.1;
}
.ui-dialog-buttonpane {
    padding: 1px 10px;
}
.ui-dialog-title {
    font-size: 125%;
}
.ui-dialog-titlebar-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    padding: 1px;
    background-image: url(../images/widget/widget-icons.png);
    background-position: -32px 0;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0 none transparent;
}
.alert .ui-dialog-titlebar-close,
.save .ui-dialog-titlebar-close {
    display: none;
}
.ui-dialog-titlebar-close span {
    display: none;
}
.ui-dialog-content {
    padding: 1px 10px 10px;
    overflow: auto;
}
.dialog .actions-bar {
    margin: 50px 0 0;
}
.listing-panel-options {
    margin-bottom: 50px;
}

#include_prefs {
    border: 1px solid #c0c6c9;
    background-color: #f3f3f3;
    border-radius: 3px;
}
#save_settings-field {
    background-color: #fff;
    margin: 10px 0 0;
    padding: 10px;
}
#alignment li {
    display: inline;
}

.dialog #comments-form #comment {
    height: 120px;
    margin-bottom: 20px;
    padding: 8px;
    border: 1px solid #c8c2be;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f3f3f3;
    border-radius: 2px;
}
.dialog #comments-form #comment .comment-meta {
    color: #7b7c7d;
    margin-bottom: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid #c8c2be;
}
.dialog #comments-form #comment .commenter-name,
.dialog #comments-form #comment .entry-title {
    font-weight: bold;
}
.dialog #comments-form #comment-reply-field #comment-reply {
    margin-bottom: 30px;
}
