/* # Reset CSS
Reset CSS is reset UserAgent default style

In most case, Reset CSS styles are overrided by other styles.

## Headings

reset Headings style as follows. [Structured CSS](#/style/structure.css) is overrided this styles.
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

## Lists

reset Listings style as follows (list-style-type is set 'none')
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

The order number is not displayed at the left side of list item.

```
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
```

*/

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
}

b,
strong {
    font-weight: bold;
}

p,
pre {
    margin: 0 0 1em;
}

pre,
code,
kbd,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    max-height: 500px;
    margin: 0 auto;
    padding: 0.8em;
    font-size: 95%;
}

small {
    font-size: 75%;
}

abbr[title],
acronym[title] {
    cursor: help;
    border-bottom: 1px dotted;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

li {
    margin-bottom: 0.5em;
    list-style-type: none;
}

form,
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

img,
a img {
    border: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

table {
    margin: 0 auto 2.5em;
    font-size: 100%;
    border-spacing: 0;
}

caption {
    margin-bottom: 0.2em;
}

th,
td {
    border-collapse: collapse;
}
/* #Chromeless.css

chromeless.css is used in the screen doesn't have standard header and footer, like login, error, upgrade screen.

```
<div class="chromeless">
  <div id="container" style="min-width:0" style="color: #2b2b2b; background-color: #f3f3f3; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;">
    <div id="brand">
      <img alt="Movable Type" src="../../mt-static/images/chromeless/mt_logo.png">
    </div>
    <div id="nav">
      <div class="step"></div>
      <div class="step_active"></div>
      <div class="step"></div>
    </div>

    <h1 id="page-title">Lorem ipsum dolor sit amet</h1>
    <div class="upgrade">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <form>
        <div class="actions-bar first-child last-child">
          <button type="submit" class="action primary button first-child last-child">
            Button
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
```
(top div emulates body element)

<h3>ready</h3>

```
<div class="ready">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
```

<h3>note</h3>

```
<div class="note">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
```

<h3>hint</h3>

```
<div class="hint">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
```

<h3>input hint</h3>

```
<input type="text">
<p class="input-hint">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
```

<h3>Navigation steps</h3>

```
<div id="nav">
  <div class="step"></div>
  <div class="step_active"></div>
  <div class="step"></div>
</div>
```

<h3>upgrade process</h3>

```
<div class="upgrade">
  <div id="upgrade-container" class="upgrade-process">
    <ul id="upgrade-progress">
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    </ul>
  </div>
</div>
```

<h3>progressbar</h3>

```
<div class="progressbar indeterminate ui-progressbar"><div class="ui-progressbar-value" style="width:50%"></div></div>
```

<h3>Packages List</h3>

.packages-list class is used in install wizard to list the perl modules

```
<dl id="packages-list">
  <dt><span class="module-name"><a target="cpan">Lorem::Ipsum</a></span></dt>
  <dd>
    <p class="module-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </dd>
</dl>
```

<h3>Action Bar</h3>

```
<div class="actions-bar">
  <button name="continue" type="submit" class="continue action primary button">
    Continue
  </button>
  <button name="retry" type="submit" id="retry-btn" style="display: inline;" class="retry action button">
    Retry
  </button>
  <button name="back" type="submit" class="goback action button">
    Back
  </button>
</div>
```

*/

body {
    color: #2b2b2b;
    background-color: #f3f3f3;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
}
.chromeless-wide {
    background-color: #ffffff;
}

a {
    color: #507ea4;
    outline: 0;
}
a:hover,
a:active {
    color: #839b5c;
    text-decoration: none;
}

ul li {
    list-style-type: disc;
    margin-left: 15px;
}
fieldset {
    margin: 0;
}

#page-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: normal;
}
h2 {
    font-weight: bold;
}
h3 {
    text-shadow: #fff 0 1px 0;
    margin-bottom: 20px;
}

.ready {
    font-weight: bold;
    color: #31b176;
}
.note {
    clear: both;
    padding: 10px 0 10px 0;
}
.hint {
    margin-top: 3px;
    color: #a3a3a2;
    font-size: 95%;
    font-style: Italic;
}
.input-hint {
    color:#a9a9a9;
}

.action-buttons {
    margin: 20px 0 15px;
}
.actions-bar {
    margin: 25px 0 0;
}
#container.show-actions-bar-top .actions-bar-top {
    display: block;
}
#container.show-actions-bar-bottom .actions-bar-bottom {
    display: block;
}

#container {
    position: relative;
    margin: 45px auto 30px;
    padding: 30px 30px 25px;
    border: 1px solid #c0c6c9;
    background-color: #fff;
    border-radius: 5px;
}

.chromeless #container {
    width: 550px;
}

.sign-in #container {
    width: 320px;
}

.chromeless-wide #container {
    min-width: 360px;
    width: auto;
    margin: 20px;
    padding: 0;
    border: 0;
    background-color: transparent;
}

#header {
    background: transparent #fff;
}
#header .comment_signin_title {
    margin-left: 20px;
}

#brand {
    width: 238px;
    height: 52px;
    margin: 0 0 20px;
    font-size: 26px;
    background: #fff url(../images/chromeless/mt_logo.png) center no-repeat;
}
#brand img,
#brand span {
    display: none;
}
#nav {
    position: absolute;
    top: 30px;
    right: 20px;
}
#nav .step {
    float: left;
    background: url('../images/chromeless/nav_off.png');
    height: 15px;
    width: 14px;
}
#nav .step_active {
    float: left;
    width: 14px;
    height: 15px;
    background: url('../images/chromeless/nav_on.png');
}

#sign-in #page-title {
    display: none;
}
#sign-in .text {
    font-size: 22px;
}
#sign-in .has-auth-icon input {
    padding-left: 22px;
    background-repeat: no-repeat;
    background-position: 3px center;
}
#forget-password {
    float: right;
    margin: 0 0 3px;
}
#sign-up {
    clear: both;
    margin: 20px 0 0;
    text-align: right;
}
.auth-option-info {
    margin-top: 20px;
    font-size: 90%;
}

#reset-password #container,
#change-password #container {
    width: 320px;
}

.upgrade .upgrade-process {
    position: relative;
    overflow: auto;
    margin: 10px 0;
    border: 1px solid #c0c6c9;
    padding: 10px;
    background-color: #fbfbfb;
    height: 200px;
    border-radius: 3px;
}
.upgrade #progressbar {
    margin: 25px 0 0;
}

ul#profile-data li {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
#profile_userpic-field .field-content label {
    display: block;
    margin-top: 5px;
}
#userpic-preview {
    margin-bottom: 10px;
}
.mt-profile-edit form {
    margin-bottom: 0.75em;
}
.custom-field-radio-list {
    margin-bottom: 0.25em;
}
.custom-field-radio-list li {
    list-style: none;
    margin-left: 0;
}

.mt-config-file-path {
    overflow: auto;
    overflow-x: auto;
    overflow-y: hidden;
    height: 2.75em;
    font-weight:bold;
}

#packages-list dt {
    margin-bottom: 5px;
}
#packages-list dd {
    margin-bottom: 15px;
    color: #7B7C7D;
}
.module-name {
    font-weight: bold;
}
.module-name a {
    color: black;
    text-decoration: none;
}
.module-name a:hover {
    text-decoration: underline;
}
.module-description {
    margin-bottom: 5px;
}

#db_hint {
    margin-top: -10px;
    margin-bottom: 10px;
}
#db_hint p {
    margin-bottom: 3px;
}

#config_settings {
    margin-bottom: 10px;
}

.progressbar {
    height: 25px;
    border: 1px solid #c0c6c9;
    background: #fff;
    border-radius: 3px;
}
.progressbar.indeterminate {
    background: #c0c6c9 url(../images/progress-bar-indeterminate.gif) repeat;
}
.ui-progressbar .ui-progressbar-value {
    height:100%;
    background-color: #0076BF;
    background-image: -webkit-linear-gradient(#008ee5, #0076BF);
    background-image: -moz-linear-gradient(#008ee5, #0076BF);
    background-image: linear-gradient(#008ee5, #0076BF);
    border-radius: 3px 0 0 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

/* #From.css

Form.css is the set of styles for form related elements

## Base Structure

.field class is the container block for form field. It has two main ingredients, field-header and field content.
field-header is used for wrapping label element, field-content is used for wrapping form field like the following.

```
<div class="field">
  <div class="field-header">
    <label>Lorem ipsum</label>
  </div>
  <div class="field-content">
    <input type="text" class="text short" placeholder="Lorem ipsum">
  </div>
</div>
```

.field-left-label class set field header and content in line horizontally.

```
<div class="field field-left-label ">
  <div class="field-header">
    <label>Lorem ipsum</label>
  </div>
  <div class="field-content">
    <textarea class="text high">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea>
  </div>
</div>
```

.field-top-label class set field header and content in line vertically.

```
<div class="field field-top-label">
  <div class="field-header">
    <label>Lorem ipsum</label>
  </div>
  <div class="field-content">
    <input type="text" class="text short" placeholder="Lorem ipsum">
  </div>
</div>
```

If You want to set some fiel in one line, use .field-inline instead .field

```
<div class="field-inline">
  <div class="field-header">
    <label>Lorem ipsum</label>
  </div>
  <div class="field-content">
    <input type="checkbox" placeholder="Lorem ipsum">
  </div>
</div>
<div class="field-inline">
  <div class="field-header">
    <label>Lorem ipsum</label>
  </div>
  <div class="field-content">
    <input type="checkbox" placeholder="Lorem ipsum">
  </div>
</div>
```

*/

fieldset {
    margin-bottom: 3em;
}
.field {
    padding: 0;
    margin: 0 0 15px;
}
.field-left-label .field-header {
    float: left;
    width: 12em;
    margin-left: 0.8em;
    padding: 0.62em 0;
    text-align: right;
}
.field-left-label .field-content {
    margin-left: 14em;
    padding: 0.5em 0;
}
.field-top-label .field-header {
    margin-bottom: 5px;
}
.field-top-label .field-header label {
    vertical-align: baseline;
}
.field-top-label .field-content {
    margin: 3px 0;
}
.field-inline,
.field-inline .field-header,
.field-inline .field-content {
    display: inline;
}
.field-inline {
    margin-right: 10px;
}
.field-content-text {
    padding-top: 5px;
}
.field-no-header .field-header {
    display: none;
}
.field-no-header .field-content {
    margin-left: 0;
}
.field .hint {
    margin: 5px 0 0;
    font-size: 90%;
}
.field-top-label .hint {
    width: 100%;
}

input,
select,
textarea,
button,
.button {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
input {
    padding: 0 0.25em;
}
textarea {
    padding: 0.2em 0.25em;
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}
label textarea {
    margin-top: 0.62em;
}
input[type=checkbox],
input[type=radio] {
    padding: 0;
}
input[type=file] {
    background: #ffffff;
}
.text,
.button {
    line-height: normal;
}
.text::-moz-focus-inner,
.button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
## Text Filed

.text is for basic style for text field.

```
<p><input type="text" class="text" placeholder="text"></p>
```

<h3>Options for Width Control</h3>

You can choose optional classes from field width

```
<p><input type="text" class="text short" placeholder="short"></p>
<p><input type="text" class="text med" placeholder="medium"></p>
<p><input type="text" class="text full" placeholder="full"></p>
```

<h3>Options for Height Control</h3>

You can also set filed height with preset classes

```
<p><input type="text" class="text low" placeholder="low"></p>
<p><input type="text" class="text high" placeholder="high"></p>
<p><input type="text" class="text highest" placeholder="highest"></p>
```

<h3>Options for Input Type</h3>

You can choose optional classes from field type

```
<p><input type="text" class="text number" placeholder="number"></p>
<p><input type="text" class="text days" placeholder="days"></p>
<p>
  <input type="text" class="text date" placeholder="date">
  <input type="text" class="text time" placeholder="time">
  <input type="text" class="text min" placeholder="min">
</p>
<p><input type="text" class="text datetime" placeholder="datetime"></p>
<p><input type="text" class="text path" placeholder="path"></p>
<p><input type="text" class="text title" placeholder="title"></p>
<p><input type="text" class="text query" placeholder="query"></p>
```

<h3>On Error</h3>

If you want to show error on text fields, use .error class

```
<p><input type="text" class="text error" placeholder="Error"></p>
```

<h3>Disabled/Read Only</h3>

.disabled class is the style for text disabled (literally)

<p><input type="text" class="text disabled" placeholder="disabled"></p>

.readonly class is interchangeable with .disabled

<p><input type="text" class="text readonly" placeholder="read only"></p>

*/

.text {
    height: 1.75em;
    width: 75%;
    outline: 0;
    border: 1px solid #adadad;
    border-top-color: #323232;
    line-height: 1.3;
    background-color: #ffffff;
    color: #2b2b2b;
    border-radius: 2px;
}
.text.short,
.text.password {
    width: 180px;
}
.text.med {
    width: 50%;
}
.text.full,
.edit-screen .text {
    width: 100%;
    max-width: 100%;
}
.text.number,
.text.num,
.text.days {
    width: 4em;
    text-align: center;
}
.text.date {
    width: 7.5em;
}
.text.time,
.text.min {
    width: 5.5em;
}
.text.datetime {
    width: 10em;
}
.text.path {
    width: 12em;
    margin: 0 0.2em;
}
.text.low {
    min-height: 5em;
}
.text.high {
    min-height: 15em;
}
.text.highest {
    min-height: 35em;
}
.text.query {
    font-size: 150%;
}
.text.title {
    font-size: 200%;
    line-height: 1.2;
}
.text:hover,
.text:focus {
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.text:hover {
    border-color: #a0a0a0;
}
.text:focus {
    outline: 0;
    border-color: #0076BF;
}

.text.error{
    border-color: #bf241f;
}
.text.error:focus{
    border-color: #6d1418;
}


.text.disabled,
.text[disabled],
.text.readonly,
.text[readonly] {
    border-color: #dcdddd;
    background-color: #f3f3f3 ! important;
    box-shadow: none;
}
.text.disabled,
.text[disabled] {
    color: #9ea1a3;
}
.text.readonly,
.text[readonly] {
    cursor: text;
}

/* ## Select List

```
<div class="field">
  <div class="field-header">
    <label>Lorem ipsum</label>
  </div>
  <div class="field-content">
    <select>
      <option>Lorem ipsum</option>
    </select>
  </div>
</div>
```

<h3>On Error</h3>

set .error class at the select element.

```
<div class="field">
  <div class="field-header">
    <label>Lorem ipsum</label>
  </div>
  <div class="field-content">
    <select class="error">
      <option>Lorem ipsum</option>
    </select>
  </div>
</div>
```

*/



select {
    height: 1.75em;
    border: 1px solid #c0c6c9;
    font-size: 12px;
    box-shadow: 0 1px 0 #f3f3f3;
    white-space: nowrap;
}
.col select {
    width: 100%;
}
select.error {
    border-color: #c53d43 ! important;
}

/* -- Batch Edit */
#notification-listing-table input[type="text"],
.batch-edit input[type="text"] {
    width: 100%;
}

#notification-listing-table .url input[type="text"] {
    width: 60%;
}


/*
## Buttons

.button class is the style for standard button UI.

```
<butotn class="button">Lorem ipsum</button>
```

You can set .button class to a link as well

```
<a class="button">Lorem ipsum</a>
```

<h3>Options for Type</h3>

CMS buttons usually have one or two optional classes for button's action priority.

```
<button class="button action">Action</button>
<button class="button action primary">Primary</button>
```

<h3>Disabled</h3>

You can disable buttons adding disabled class.

```
<a class="button action disabled">Action</a>
<a class="button action primary disabled">Primary</a>
```

<h3>Split button</h3>

```
<div class="split">
  <a class="button action">Create New</a>
  <a class="toggle-button button detail-link"><img src="../../mt-static/images/arrow/arrow-toggle-black.png"></a>
  <div id="fav-actions" class="fav-actions detail" style="display: block;">
    <ul id="fav-actions-list">
      <li id="fav-action-entry" class="fav-action"><a class="fav-action-link">Entry</a></li>
      <li id="fav-action-page" class="fav-action"><a class="fav-action-link">Page</a></li>
      <li id="fav-action-asset" class="fav-action"><a class="fav-action-link">Asset</a></li>
      <li id="fav-action-blog" class="fav-action"><a class="fav-action-link">Blog</a></li>
    </ul>
  </div>
</div>
```

*/

.button {
    cursor: pointer;
    overflow: visible;
    display: inline-block;
    outline: none;
    margin-right: 5px;
    padding: 0 0.5em;
    vertical-align: middle;
    line-height: 1.75em;
    white-space: nowrap;
    border: 1px solid #666666;
    background-color: #ffffff;
    color: #1A1A1A;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.4);
    border-radius: 3px;
}
.button:focus {
    border-color: #0076BF;
}
.button:link,
.button:visited {
    color: #1A1A1A;
}
.button:hover {
    border-color: #323232;
    color: #000000;
    text-shadow: none;
    box-shadow: 0px 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
}
.button:active {
    background-color: #eeefef;
    background-image: -moz-linear-gradient(#eeefef, #f7f7f7);
    background-image: -webkit-linear-gradient(#eeefef, #f7f7f7);
    background-image: linear-gradient(#eeefef, #f7f7f7);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
    color: #323232;
}

.button.action {
    border-color: #7b7c7d;
    background-color: #666666;
    color: #fffffc;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(255,255,255,0.4);
}
.button.action:hover {
    border-color: #323232;
    background-color: #b2b2b2;
}
.button.action:active {
    background-color: #999999;
    background-image: -moz-linear-gradient(#999999, #8c8c8c);
    background-image: -webkit-linear-gradient(#999999, #8c8c8c);
    background-image: linear-gradient(#999999, #8c8c8c);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
}

.button.primary {
    border-color: #004B9A;
    background-color: #0076BF;
    background-image: -moz-linear-gradient(#0076BF, #006ea5);
    background-image: -webkit-linear-gradient(#0076BF, #006ea5);
    background-image: linear-gradient(#0076BF, #006ea5);
}
.button.primary:hover {
    border-color: #00437F;
    background: #008FD6;
}
.button.primary:active {
    background-color: #006DA3;
    background-image: -moz-linear-gradient(#005B88, #006DA3);
    background-image: -webkit-linear-gradient(#005B88, #006DA3);
    background-image: linear-gradient(#005B88, #006DA3);
}

.button.disabled,
.button.action.disabled,
.button.primary.disabled {
    border-color: #e6e6e6 ! important;
    cursor: default ! important;
    background: #f7f7f7 ! important;
    color: #e6e6e6 ! important;
    text-shadow: none ! important;
    box-shadow: none ! important;
}

.mt-edit-field-button {
    margin-left: 0.5em;
}

.inline-editor .button,
.inline-editor .ui-button {
    margin: 0 0 0 5px;
}

.split .button {
    float: left;
    height: 22px;
    margin: 0;
    font-size: 13px;
}
.split .action {
    min-width: 5.5em;
    border-radius: 2px 0 0 2px;
    line-height: 1.75em;
}
.split .toggle-button {
    position: relative;
    width: 22px;
    padding: 0;
    border-radius: 0 2px 2px 0;
}
.split .button:hover {
    box-shadow: none;
}
.split .detail {
    display: none;
    width: 100%;
    font-size: 90%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-helper-hidden-accessible {
    position: absolute;
}

#alignment .ui-button {
    width: 50px;
    margin: 0;
}

.field {
    zoom: 1;
}
.field:before,
.field:after {
    display: block;
    height: 0;
    visibility: hidden;
    content: "\0020";
}
.field:after {
    clear: both;
}

/* #Listing

listing.css declare the style around the listing blocks

The following example is copied from the entries listing blocks

```
<div id="listing" class="listing line has-filter">
  <div class="unit size1of1">
    <div id="actions-bar-top" class="actions-bar actions-bar-top line">
      <div class="button-actions actions">
        <a class="button">Publish</a>
        <a class="button">Delete</a>
      </div>
      <div class="plugin-actions actions">
        <select class="action_selector">
          <option value="0">
            Lorem ipsum
          </option>
          <options>
            dolor sit amet
          </options>
        </select>
        <button type="button" class="button mt-entry-listing-form-action">Go</button>
      </div>
      <div class="indicator" style="display: none;">
        <img alt="Loading..." src="../../mt-static/images/indicator.white.gif" class="first-child"> Loading...
      </div>
      <div class="pagination" style="display: block;">
        <span class="pagenav start disabled">« First</span>
        <span class="pagenav to-start disabled">‹ Prev</span>
        <span class="current-rows">1 - 25 of 455</span>
        <a class="pagenav to-end">Next ›</a>
        <a class="pagenav end">Last »</a>
      </div>
    </div>
    <div id="filter" class="filter-block">
      <div id="filter-header">
        <input type="hidden" id="filter_name" value="My Entries" class="hidden">
        <input type="hidden" id="filter_id" value="my_posts_on_this_context" class="hidden">
        <div class="mod filter-header">
          Filter: <a id="opener" class="open-dialog-link current-filter icon-right-wide">My Entries</a> <a id="allpass-filter">[ Remove Filter ]</a> <a id="toggle-filter-detail" class="toggle-button detail-link"><img src="../../mt-static/images/arrow/arrow-toggle-big.png" class="first-child"></a>
        </div>
      </div>
      <div id="filter-detail" class="detail" style="display: none;">
        <div id="filter-panel" class="mod selectfilter">
          <select id="item_list" class="first-child">
            <option value="">
              Select Filter Item...
            </option>
            <option value="author_name">
              Author Name
            </option>
          </select>
        </div>
        <div class="filteritem">
          <div class="filtertype type-current_user base-hidden">
            <div class="item-content">
              <input type="hidden" class="prop-hidden current_user-value hidden" value="" id="input-0" name="input-0">
              <input type="hidden" class="prop-hidden current_user-label hidden" value="" id="input-1" name="input-1">
              My Entries
            </div>
          </div>
          <span class="close-link clickable remove icon-remove icon16 action-icon">Remove item</span>
        </div>
        <div id="filter-action" class="mod">
          <button type="submit" id="apply" class="button action primary">Apply</button> <button type="button" id="save" class="button action disabled" disabled="disabled">Save</button> <button type="button" id="saveas" class="button action">Save As</button>
        </div>
      </div>
    </div>
    <div id="listing-table" class="listing-table-block">
      <div id="listing-table-overlay" class="overlay" style="display: none;"></div>
      <table id="entry-table" class="listing-table list-entry" cellpadding="0" cellspacing="0">
        <thead>
          <tr class="first-child">
            <th class="col head cb first-visible-child">
              <input type="checkbox" class="checkbox">
            </th>
            <th class="col head id num" style="display: none;">
              <a class="sort-link"><span class="col-label">ID</span></a>
            </th>
            <th class="col head title primary string">
              <a class="sort-link"><span class="col-label">Title</span></a>
            </th>
            <th class="col head author_name string">
              <a class="sort-link"><span class="col-label">Author</span></a>
            </th>
            <th class="col head category string">
              <a class="sort-link"><span class="col-label">Primary Category</span></a>
            </th>
            <th class="col head authored_on date sorted">
              <a class="sort-link"><span class="col-label">Publish Date</span></a>
            </th>
            <th class="col head modified_on date" style="display: none;">
              <a class="sort-link"><span class="col-label">Date Modified</span></a>
            </th>
            <th class="col head unpublished_on date" style="display: none;">
              <a class="sort-link"><span class="col-label">Unpublish Date</span></a>
            </th>
            <th class="col head comment_count num">
              <a class="sort-link"><span class="col-label">Comments</span></a>
            </th>
            <th class="col head ping_count num" style="display: none;">
              <a class="sort-link"><span class="col-label">Trackbacks</span></a>
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr class="first-child">
            <th class="col head cb first-visible-child">
              <input type="checkbox" class="checkbox">
            </th>
            <th class="col head id num" style="display: none;">
              <a class="sort-link"><span class="col-label">ID</span></a>
            </th>
            <th class="col head title primary string">
              <a class="sort-link"><span class="col-label">Title</span></a>
            </th>
            <th class="col head author_name string">
              <a class="sort-link"><span class="col-label">Author</span></a>
            </th>
            <th class="col head category string">
              <a class="sort-link"><span class="col-label">Primary Category</span></a>
            </th>
            <th class="col head authored_on date sorted">
              <a class="sort-link"><span class="col-label">Publish Date</span></a>
            </th>
            <th class="col head modified_on date" style="display: none;">
              <a class="sort-link"><span class="col-label">Date Modified</span></a>
            </th>
            <th class="col head unpublished_on date" style="display: none;">
              <a class="sort-link"><span class="col-label">Unpublish Date</span></a>
            </th>
            <th class="col head comment_count num">
              <a class="sort-link"><span class="col-label">Comments</span></a>
            </th>
            <th class="col head ping_count num" style="display: none;">
              <a class="sort-link"><span class="col-label">Trackbacks</span></a>
            </th>
          </tr>
        </tfoot>
        <tbody class="ui-selectable">
          <tr id="1081" class="even first-child">
            <td class="cb col">
              <input type="checkbox" name="id" value="1081">
            </td>
            <td class="col title string">
              <span class="icon status published">
                <a><img alt="Published" src="../../mt-static/images/status_icons/success.gif"></a>
              </span> <span class="title">
              <a>Lorem ipsum</a></span> <span class="view-link"><a target="_blank"><img src="../../mt-static/images/status_icons/view.gif"></a></span>
            </td>
            <td class="col author_name string">
              yyamaguchi
            </td>
            <td class="col category string">
              lorem
            </td>
            <td class="col authored_on date">
              Jul 12
            </td>
            <td class="col comment_count num">
              <a>0</a>
            </td>
          </tr>
          <tr id="456" class="odd">
            <td class="cb col">
              <input type="checkbox" name="id" value="456">
            </td>
            <td class="col title string">
              <span class="icon status published">
                <a><img src="../../mt-static/images/status_icons/success.gif"></a>
              </span> <span class="title"><a>consectetur adipisicing elit. </a></span> <span class="view-link"><a target="_blank"><img src="../../mt-static/images/status_icons/view.gif"></a></span>
              <p class="excerpt description" style="display: none;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit...
              </p>
            </td>
            <td class="col author_name string">
              yyamaguchi
            </td>
            <td class="col category string">
              ipsum
            </td>
            <td class="col authored_on date">
              Apr 28
            </td>
            <td class="col comment_count num">
              <a>0</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="actions-bar-bottom" class="actions-bar actions-bar-bottom line">
      <div class="button-actions actions">
        <a class="button">Publish</a> <a class="button">Delete</a>
      </div>
      <div class="plugin-actions actions">
        <select class="action_selector" name="plugin_action_selector">
          <option value="0">
            More actions...
          </option>
        </select> <button type="button" class="button mt-entry-listing-form-action">Go</button>
      </div>
      <div class="indicator" style="display: none;">
        <img src="../../mt-static/images/indicator.white.gif" class="first-child"> Loading...
      </div>
      <div class="pagination" style="display: block;">
        <span class="pagenav start disabled">« First</span>
        <span class="pagenav to-start disabled">‹ Prev</span>
        <span class="current-rows">1 - 25 of 455</span>
        <a class="pagenav to-end">Next ›</a><a class="pagenav end">Last »</a>
      </div>
    </div>
    <div id="listing-footer" class="footer-links mod">
      <ul>
        <li class="footer-link-item">
          <a class="icon-feed icon-left" title="" target="_blank">Entry Feed</a>
        </li>
      </ul>
    </div>
  </div>
</div>
```
*/

/* ## Listing Table

.listing-table class is used for the main table.

It has some common styles: fit width, round border, and white background.

```
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head primary">
        <span class="col-label">Lorem ipsum</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id">
      </td>
      <td class="col primary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
    </tr>
    <tr class="odd">
      <td class="cb col">
        <input type="checkbox" name="id">
      </td>
      <td class="col primary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
    </tr>
  </tbody>
</table>
```
*/

/* ## Listing Table Header

.head class is styling the header row

Different from the common column, .head class has no padding. So you should wrap header text with .col-label class like the following.

```
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head primary">
        <span class="col-label">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
      </th>
    </tr>
  </thead>
</table>
```

Listings usually has tfoot element has same functionalities as thead, so typical listing table is like the following structure.

```
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head primary">
        <span class="col-label">Lorem ipsum</span>
      </th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head primary">
        <span class="col-label">Lorem ipsum</span>
      </th>
    </tr>
  </tfoot>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id">
      </td>
      <td class="col primary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
    </tr>
    <tr class="odd">
      <td class="cb col">
        <input type="checkbox" name="id">
      </td>
      <td class="col primary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
    </tr>
  </tbody>
</table>
```
*/

/* ## Primary Column

Primary column set with auto which means its cell occupied the remained space in the table

```
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head">
        <span class="col-label">Basic Column</span>
      </th>
      <th class="col head primary">
        <span class="col-label">Primary Column</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id" value="1081">
      </td>
      <td class="col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="col primary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
    </tr>
  </tbody>
</table>
<br><br>
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head">
        <span class="col-label">Basic Column</span>
      </th>
      <th class="col head">
        <span class="col-label">Basic Column</span>
      </th>
      <th class="col head primary">
        <span class="col-label">Primary Column</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id">
      </td>
      <td class="col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="col primary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
    </tr>
  </tbody>
</table>
```
*/

/* ##Sortable Column

If table column has capabillity of sorting table, use .sorted and .sm class for styling sorted state

```
<table class="listing-table" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head target sorted">
        <a>
          <span class="col-label">Sorted descendently</span>
          <span class="sm desc"></span>
        </a>
      </th>
      <th class="col head target sorted">
        <a>
          <span class="col-label">Sorted ascendently</span>
          <span class="sm asc"></span>
        </a>
      </th>
      <th class="col head target">
        <a>
          <span class="col-label">Sortable column</span>
          <span class="sm"></span>
        </a>
      </th>
      <th class="col head primary">
          <span class="col-label">Sortable column</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id" value="1081">
      </td>
      <td class="col target">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="col target">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="col target">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="col primary">

      </td>
    </tr>
  </tbody>
</table>
```
*/

/* ## Column Types

You can adjust column width and some related styles with builtin classes like the following

```
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head num">
        <span class="col-label">num</span>
      </th>
      <th class="col head date">
        <span class="col-label">date</span>
      </th>
      <th class="col head id">
        <span class="col-label">id</span>
      </th>
      <th class="col head primary">
        <span class="col-label">Lorem ipsum dolor sit amet</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id" value="1081">
      </td>
      <td class="col num">
        9
      </td>
      <td class="col date">
        2112/9/3
      </td>
      <td class="col id">
        2112
      </td>
      <td class="col primary">
        .cb class is for checkbox cell
      </td>
    </tr>
  </tbody>
</table>
```

```
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head target">
        <span class="col-label">target</span>
      </th>
      <th class="col head primary">
        <span class="col-label">Lorem ipsum dolor sit amet</span>
      </th>
      <th class="col head view">
        <span class="col-label">view</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id" value="1081">
      </td>
      <td class="col target">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="col primary">
        primary column
      </td>
      <td class="col view">
        view
      </td>
    </tr>
  </tbody>
</table>
```

```
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head output-file">
        <span class="col-label">output-file</span>
      </th>
      <th class="col head publishing-method">
        <span class="col-label">publishing-method</span>
      </th>
      <th class="col head primary">
        <span class="col-label">Lorem ipsum dolor sit amet</span>
      </th>
      <th class="col head si">
        <span class="col-label">si</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id" value="1081">
      </td>
      <td class="col output-file">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="col publishing-method">
        Lorem ipsum dolor sit amet
      </td>
      <td class="col primary">
        primary column
      </td>
      <td class="col si">
        si
      </td>
    </tr>
  </tbody>
</table>
```
*/

/* ## Sub Classes

Listing framework has varios classes used inside table cell.

* .description
* .user-info
* .user-info-item
* .context-text
* .icon
* .comment.status
* .picture
* .action-link
* .role-item
* .action-path-item
* .log-metadata

```
<table class="listing-table">
  <thead>
    <tr>
      <th class="col head cb first-visible-child">
        <input type="checkbox" class="checkbox">
      </th>
      <th class="col head target">
        <span class="col-label">with description</span>
      </th>
      <th class="col head target">
        <span class="col-label">with icon</span>
      </th>
      <th class="col head target">
        <span class="col-label">archive path item</span>
      </th>
      <th class="col head si">
        <span class="col-label">si</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td class="cb col">
        <input type="checkbox" name="id" value="1081">
      </td>
      <td class="col target">
        <p>Lorem ipsum dolor sit amet<p>
        <p class="description">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </td>
      <td class="col target">
        <span class="icon status published"><a><img alt="Published" src="../../mt-static/images/status_icons/success.gif"></a></span>
        <span class="title">Lorem ipsum</span>
        <span class="view-link"><a target="_blank"><img src="../../mt-static/images/status_icons/view.gif"></a></span>
      </td>
      <td class="col target">
        <p class="archive-path-item">lorem/ipsum/dolor/sit/amet/consectetur/adipisicing/elit.html</p>
      </td>
      <td class="col si">
        si
      </td>
    </tr>
  </tbody>
</table>
```
*/

/* ##List Actions

If you add the buttons at the top or bottom of the listing, use .action-bar class

```
<div id="listing" class="listing line">
  <div class="unit size1of1">
    <div class="actions-bar line">
      <div class="button-actions actions">
        <a class="button">Publish</a>
        <a class="button">Delete</a>
      </div>
      <div class="plugin-actions actions">
        <select class="action_selector">
          <option value="0">
            More actions...
          </option>
        </select>
        <button type="button" class="button">Go</button>
      </div>
      <div class="pagination" style="display: block;">
        <span class="pagenav start disabled">« First</span>
        <span class="pagenav to-start disabled">‹ Prev</span>
        <span class="current-rows">1 - 25 of 455</span>
        <a class="pagenav to-end">Next ›</a>
        <a class="pagenav end">Last »</a>
      </div>
    </div>
  </div>
</div>
```
*/

/* ##Select Filter Dialog

```
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable" style="height: auto; width: 380px; top: 0; left: 0; display: block; position:relative">
  <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-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 class="filter-list-block">
        <h3 class="filter-list-label">
          Built in Filters
        </h3>
        <ul id="built-in-filters">
          <li class="filter line">
            <span class="filter-label"><a class="apply-link user-filter">Published Entries</a></span>
          </li>
          <li class="filter line">
            <span class="filter-label"><a href="#1" class="apply-link user-filter">Draft Entries</a></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```
(ui-* classes automatically added with jQuery UI library)

*/

/* ##Filter Block

Filter Block is at the top of listing table. User can filter the listing items with some conditions.

```
<div id="filter" class="filter-block">
  <div id="filter-header">
    <div class="mod filter-header">
      Filter: <a id="opener" class="open-dialog-link current-filter icon-right-wide">All Entries</a>
      <a id="toggle-filter-detail" class="toggle-button detail-link">
        <img src="../../mt-static/images/arrow/arrow-toggle-big.png" class="first-child">
      </a>
    </div>
  </div>
</div>
```

When a filter applied, 'remove filter' appears at the right side of Filter Link. 'remove filter' link has allpass-filter id.
```
<div id="filter" class="filter-block">
  <div id="filter-header">
    <div class="mod filter-header">
      Filter: <a id="opener" class="open-dialog-link current-filter icon-right-wide">My Filter</a> <a id="allpass-filter">[ Remove Filter ]</a> <a id="toggle-filter-detail" class="toggle-button detail-link"><img src="../../mt-static/images/arrow/arrow-toggle-big.png" class="first-child"></a>
    </div>
  </div>
</div>
```

<h3>Filter Details</h3>

Filter details block used for edit filter conditions. It has filter-deital id.

```
<div id="filter" class="filter-block active">
  <div id="filter-header">
    <div class="mod filter-header">
      Filter: <a id="opener" class="open-dialog-link current-filter icon-right-wide">New Filter</a>
      <a href="#" id="allpass-filter" style="display: inline-block;">[ Remove Filter ]</a>
      <a href="#" id="toggle-filter-detail" class="toggle-button detail-link">
        <img src="../..//mt-static/images/arrow/arrow-toggle-big.png">
      </a>
    </div>
  </div>
  <div id="filter-detail" class="detail" style="display: block;">
    <div id="filter-panel" class="mod selectfilter">
      <select id="item_list">
        <option value="">
          Select Filter Item...
        </option>
        <option disabled="disabled">
          Author Name
        </option>
        <option>
          Author Status
        </option>
      </select>
    </div>
    <div class="filteritem">
      <div class="filtertype type-author_name base-string">
        <div class="item-content">
          Author Name <select class="author_name-option">
            <option value="contains">
              contains
            </option>
          </select>
          <input type="text" class="prop-string author_name-string text med" value="" id="input-2" name="input-2">
          <span class="item-ctrl">
            <span class="item-action plus clickable icon-plus icon16 action-icon">Add</span>
            <span class="item-action minus clickable icon-minus icon16 action-icon" style="display: none;">Remove</span>
          </span>
        </div>
      </div>
      <span class="close-link clickable remove icon-remove icon16 action-icon">Remove item</span>
    </div>
    <div id="filter-action" class="mod">
      <button type="submit" id="apply" class="button action primary">Apply</button>
      <button type="button" id="save" class="button action">Save</button>
      <button type="button" id="saveas" class="button action" style="display: none;">Save As</button>
    </div>
  </div>
</div>
```

*/

/* ##Loading

When some works like ajax request are processing, listing-table-overlay is displayed and overlayed with transparent white.

note: base overlay style is declared at [structure.css](#/style/structure.css)

```
    <div id="listing-table" class="listing-table-block">
      <div id="listing-table-overlay" class="overlay"></div>
      <table id="entry-table" class="listing-table list-entry">
        <thead>
          <tr class="first-child">
            <th class="col head cb first-visible-child">
              <input type="checkbox" class="checkbox">
            </th>
            <th class="col head id num" style="display: none;">
              <a class="sort-link"><span class="col-label">ID</span></a>
            </th>
            <th class="col head title primary string">
              <a class="sort-link"><span class="col-label">Title</span></a>
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr class="first-child">
            <th class="col head cb first-visible-child">
              <input type="checkbox" class="checkbox">
            </th>
            <th class="col head id num" style="display: none;">
              <a class="sort-link"><span class="col-label">ID</span></a>
            </th>
            <th class="col head title primary string">
              <a class="sort-link"><span class="col-label">Title</span></a>
            </th>
          </tr>
        </tfoot>
        <tbody>
          <tr id="1081" class="even">
            <td class="cb col">
              <input type="checkbox" name="id" value="1081">
            </td>
            <td class="col title string">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </td>
          </tr>
          <tr id="456" class="odd">
            <td class="cb col">
              <input type="checkbox" name="id">
            </td>
            <td class="col title string">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </td>
          </tr>
        </tbody>
      </table>
    </div>
```

and .indicator class used for loading image like the following.

```
  <div class="indicator">
    <img alt="Loading..." src="../../mt-static/images/indicator.white.gif" class="first-child"> Loading...
  </div>
```

*/

/* ## Bottom Footer

listing-footer is the style for the footer beneath the listing table.

```
<div id="listing-footer" class="footer-links mod">
  <ul>
    <li class="footer-link-item">
      <a>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
    </li>
  </ul>
</div>
```
*/

/* ##Legacy Support

.legacy class supports for the legacy listing style

*/

.listing {
    margin-bottom: 50px;
}
#spam-log-listing {
    margin-bottom: 0;
}

#filter-header,
.listing-table-block {
    position: relative;
}

#listing-table-overlay {
    z-index: 400;
    width: 100%;
    height: 100%;
    background-color: #fbfbfb;
    border-radius: 0 0 3px 3px;
}

.listing-table {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #c0c6c9;
    table-layout: fixed;
    background-color: #ffffff;
    border-radius: 0 0 3px 3px;
}

.col {
    width: 13%;
    padding: 5px 8px;
    border: solid #fff;
    border-width: 1px 0 0;
    line-height: 18px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
}
tbody tr:first-child .col {
    border: 0;
}
.col.head {
    padding: 0;
    border-color: #c0c6c9;
    border-width: 0 0 1px 1px;
    line-height: 1;
    background-color: #e6e6e6;
    background-image: -moz-linear-gradient(#eeefef, #e6e6e6);
    background-image: -webkit-linear-gradient(#eeefef, #e6e6e6);
    background-image: linear-gradient(#eeefef, #e6e6e6);
    font-size: 85%;
    font-weight: bold;
    text-shadow: 0 1px 0 #f8fbf8;
    vertical-align: middle;
    word-wrap: normal;
}
.col.num {
    width: 10%;
}
.col.date {
    width: 12%;
}
.col.id {
    width: 4.5em;
}
.col.entry,
.col.target {
    width: 25%;
}
.col.cb,
.col.si {
    width: 2.6em;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}
.col.view {
    width: 4em;
}
.col.output-file {
    width: 40%;
}
.col.publishing-method {
    width: 17%;
}
.col.primary {
    width: auto;
    min-width: 15%;
}
thead .col.head.first-child {
    border-radius: 3px 0 0 0;
}
thead .col.head.last-child {
    border-radius: 0 3px 0 0;
}
.has-filter thead .col.head {
    border-radius: 0;
}
tfoot .col.head{
    border-width: 1px 0 0 1px;
}
.col.head.first-child,
.col.head.first-visible-child {
    border-left: 0;
}
.col.head a {
    display: block;
    position: relative;
    width: 100%;
    color: #1A1A1A;
    text-decoration: none;
}
.col.head a:hover {
    background-color: #eeefef;
    background-image: -moz-linear-gradient(#f7f7f7, #eeefef);
    background-image: -webkit-linear-gradient(#f7f7f7, #eeefef);
    background-image: linear-gradient(#f7f7f7, #eeefef);
}

.col.head.sorted {
    background: #e3f3fc;
}
.col.head.sorted:hover, 
.col.head.sorted a:hover{
    background: #cae5f8;
}
.col-label {
    display: block;
    width: 80%;
    margin-left: 5px;
    padding: 7px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col.head a:hover .col-label {
    color: #1A1A1A;
}
.sorted .col-label {
    color: #1A1A1A;
}
.sm {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 7px;
    height: 10px;
    margin-top: -5px;
    background: transparent center no-repeat;
    background-image: url(../images/arrow/arrow-sort-both.gif);
}
.sm.asc {
    background-image: url(../images/arrow/arrow-sort-top.gif);
}
.sm.desc {
    background-image: url(../images/arrow/arrow-sort-bottom.gif);
}

.col .description {
    margin: 0.75em 0 0;
    font-size: 90%;
}
.col .user-info {
    overflow: hidden;
}
.col .user-info-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col .content-text {
    overflow: hidden;
}
.col .icon {
    display: inline-block;
    min-width: 15px;
    margin-right: 3px;
    text-align: center;
}
.col .comment.status {
    float: left;
    margin-right: 5px;
}
.col .picture {
    margin-bottom: 0;
}
.col .userpic .icon {
    margin: 0;
}
.col .item-ctrl .action-link {
    margin-right: 5px;
}
.col .role-item {
    list-style-type: disc;
    list-style-position: inside;
    margin: 0 0 0 1.2em;
}
.col .archive-path-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.col .log-metadata pre {
    white-space: normal;
}

.list-entry .col.author_name,
.list-page .col.author_name {
  width: 10%;
}

.list-entry .col.category,
.list-page .col.category {
  width: 13%;
}

.list-entry .col.folder,
.list-page .col.folder {
  width: 9%;
}

.list-entry .col.date,
.list-page .col.date {
    width: 11%;
}

.list-entry .col.comment_count,
.list-page .col.comment_count {
  width: 8%;
}

.list-actions {
    float: left;
}

.listing .actions-bar {
    min-height: 22px;
}
.listing .button-actions,
.listing .plugin-actions {
    float: left;
    margin: 8px 10px 8px 0;
}
.pagination,
.indicator {
    font-family: Arial, sans-serif;
    font-size: 12px;
}
.pagination,
.actions-bar .indicator {
    float: right;
    height: 22px;
    margin: 8px 0;
    line-height: 22px;
}
.actions-bar .indicator img {
    margin-bottom: 0.2em;
    vertical-align: bottom;
}
.pagenav,
.current-rows {
    margin: 0 0.25em;
}
.current-rows {
    font-weight: bold;
}

.legacy.listing-table {
    border-radius: 3px;
}

.col.asset-thumbnail {
    width: 6em;
}
.col.asset-thumbnail .thumbnail {
    margin: 0 auto;
}
.asset-no-thumbnail .thumbnail {
    border: 0;
}
.col.asset-type-video .thumbnail {
    background: transparent url(../images/asset/video-45.png) no-repeat;
}
.col.asset-type-file .thumbnail {
    background: transparent url(../images/asset/file-45.png) no-repeat;
}
.col.asset-type-audio .thumbnail {
    background: transparent url(../images/asset/audio-45.png) no-repeat;
}

.filter-block {
    border: solid #c0c6c9;
    border-width: 1px 1px 0;
    background-color: #eeefef;
    border-radius: 3px 3px 0 0;
}
.filter-header #allpass-filter {
    display: inline-block;
    margin-left: 8px;
    color: #c53d43;
    font-size: 87%;
}
.filter-header .current-filter {
    background-image: url(../images/filter-list.png);
    text-decoration: none;
}
.filter-header .current-filter:hover {
    border-bottom: 0;
}
#filter-detail {
    border: solid #c0c6c9;
    border-width: 1px 0 0;
}
.filteritem {
    position: relative;
    margin: 0 8px;
    border: 1px solid #adadad;
    border-top-color: #cfd0d0;
    border-left-color: #cfd0d0;
    background-color: #fff;
}
.filteritem .item-content {
    padding: 10px;
}
.filteritem .item-ctrl {
    margin-left: 10px;
}

#dialog_filter {
    padding: 0 0 10px 10px;
}
#dialog_filter_content {
    min-height: 85px;
    max-height: 420px;
    padding-top: 0;
    overflow: auto;
}
#dialog_filter .filter-list-block {
    margin-top: 15px;
}
#dialog_filter .filter-list-label {
    margin: 0 0 5px;
}

#dialog_filter .filter {
    margin: 0 10px 1px 0;
    padding: 0 5px;
}
#dialog_filter .filter:hover {
    background-color: #e7e7eb;
}
#dialog_filter .filter.edit-mode {
    padding: 0;
}
#dialog_filter .filter.edit-mode:hover {
    background-color: transparent;
}
#dialog_filter .apply-link,
#dialog_filter .item-ctrl,
#dialog_filter .indicator {
    height: 23px;
    line-height: 23px;
}
#dialog_filter .apply-link {
    display: block;
    text-decoration: none;
}
.filter-label .apply-link {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#dialog_filter .item-ctrl {
    display: none;
    text-align: right;
}
#dialog_filter .filter:hover .item-ctrl {
    display: inline-block;
}
#dialog_filter .edit-mode .item-ctrl {
    display: inline-block;
    text-align: left;
}
#dialog_filter .item-ctrl a {
    margin-left: 5px;
}
#dialog_filter .tool-link {
    margin: 0 0 0 5px;
    vertical-align: top;
}
#dialog_filter .rename-link {
    color: #7b7c7d;
}
#dialog_filter .indicator {
    margin-left: 5px;
}


.col .asset-preview {
    display: none;
    margin-top: 10px;
}

#modal-search {
    margin-bottom: 10px;
}
.listing.selector {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 25px;
}
.panel-header {
    position: relative;
    padding: 10px 0;
}
.selected-items {
    min-height: 30px;
}

#listing-footer {
    margin-top: 30px;
    border: 1px solid #c0c6c9;
    background-color: #eeefef;
    border-radius: 3px;
}
.footer-link-item {
    display: inline-block;
    margin: 0 15px 0 0;
}

.ui-selectable-helper {
    display: none ! important;
}
/* #Message.css

message.css is the set of styles for status message. User can remove messages with close link at the right side of it.

## Message Type

* msg-success
* msg-alert
* msg-error
* msg-info
* msg-publishing

```
<div class="msg msg-success">
  <p class="msg-text">Success: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-alert">
  <p class="msg-text">Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-error">
  <p class="msg-text">Error: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-info">
  <p class="msg-text">Info: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-publishing">
  <p class="msg-text">On Publishing: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>
```

## Close-Set
msg class defaultly has margin top and bottom. If you want to remove margins, plus .full class

```
<div class="msg msg-success full">
  <p class="msg-text">Success: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-alert full">
  <p class="msg-text">Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>
```

# In-message List

```
<div class="msg msg-warning">
  <ul>
    <li><label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </label> <button class="button">Save</button></li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li>
  </ul>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>
```

# Validation Error

<h3>Inline Error Message</h3>

validate-error styles strings like the following.

```
<div class="field-content">
  <input type="text" class="text med error">
  <div>
    <label class="validate-error msg-error">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </label>
  </div>
</div>
```

msg-balloon shows error message like balloon.

```
<span class="validate-error-wrapper" style="position: relative; white-space: nowrap;">
  <input type="text" name="category_label" class="text short label error">
  <label style="position: absolute; left: 171.5px; top: -21px; z-index: 200;" class="msg-error msg-balloon validate-error">Lorem ipsum dolor sit amet</label>
</span>
```

*/

.msg {
    position: relative;
    margin: 10px 0;
    padding: 0.5em 0.75em;
    border-radius: 2px;
}
.msg.full {
    margin: 0;
    border-radius: 0;
}
.msg-success {
    background-color: #d8f8cd;
}
.msg-alert,
.msg-warning {
    background-color: #f3fcaf;
}
.msg-error {
    background-color: #ffd4d1;
}
.msg-info {
    background-color: #cae5f8;
}
.msg-publishing {
    margin: 15px 0 0;
    padding: 0.8em 0 0.8em 25px;
    background: transparent url(../images/ani-rebuild.gif) left center no-repeat;
}
.msg-text {
    margin: 0;
}

.msg ul {
    padding-left: 1.618em;
}
.msg li {
    list-style-type: disc;
}
.msg li label:hover {
    cursor: pointer;
    text-decoration: underline;
}

.close-link {
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -8px;
}

.msg .detail {
    margin: 10px 0 0;
}

p.zero-state {
    margin-bottom: 0;
}

#is-generic-website {
    margin: 0;
    padding: 0.75em 0;
    border-bottom: 1px solid #c8c2be;
    background-color: #f2f2b0;
    border-radius: 0;
}
#is-generic-website p {
    margin: 0 auto;
    padding: 0 20px;
    font-size: 95%;
}

#junk-message .junk-score {
    font-weight: bold;
    margin: 0 0 0.5em;
}

.dialog-msg-error {
    display: block;
}
.validate-error {
    display: inline-block;
    margin-top: 5px;
    background: transparent;
    color: #C53D43;
    font-size: 90%;
    font-weight: normal;
}
.msg-balloon {
    margin-top: 3px;
    padding: 0.3em 0.5em;
    background-color: #2b2b2b;
    color: #f3f3f3;
    border-radius: 2px;
    opacity: 0.8;
    -ms-filter: 'alpha(opacity=80)';
    filter: alpha(opacity=80);
}

.debug-panel {
    position: absolute;
    width: 100%;
    border-top: 1px solid #c8c2be;
    background-color: #f6bfbc;
    text-align: left;
}
.debug-panel.dialog-with-actions-bar {
    position: static;
    padding-bottom: 45px;
}
.debug-panel h3 {
    padding: 5px;
    font-size: 12px;
    margin: 0;
    background-color: #ec6d71;
    color: #f8fbf8;
    text-shadow: none;
}
.debug-panel-inner {
    padding: 5px;
    font-family: monospace;
    font-size: 10px;
    max-height: 200px;
    overflow: auto;
}
.debug-panel-inner li {
    margin: 0;
    padding: 0.2em 0.5em;
    white-space: pre;
}

.debug-panel-inner li:hover {
    background-color: #f2a0a1;
}

#notification_dashboard .widget-content {
    padding: 10px 0 0 0;
}
#notification_dashboard li {
    display: block;
    padding: 0 10px;
}
#notification_dashboard .item {
    display: block;
}
#notification_dashboard .clickable:hover {
    cursor: pointer;
    color: #507ea4;
}
#notification_dashboard .detail {
    display: block;
    border-bottom: 1px solid #c0c6c9;
    padding: 0.5em 0.5em 0.5em 14px;
    color: #7b7c7d;
}

#notification_dashboard li:last-child .detail {
    border-bottom: none;
}
/* #Utilities.css

utilities.css is the short circuit for the frequently used styles.

<h3>hidden</h3>

set display: none;

```
<div class="hidden" style="height: 200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div class="visible" style="background-color:lightblue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>visible</h3>

```
<div class="visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>invisible</h3>

set visibility: hidden;

```
<div class="invisible" style="height: 200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div class="visible" style="background-color:lightblue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>clickable</h3>

set cursor style to pointer

```
<div class="clickable">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>

```

<h3>overflow-auto</h3>

You can scroll overflow block

```
<div style="height: 150px">
  <div class="overflow-auto" style="width: 300px; position:absolute;">
    <div style="width: 400px; background-color:lightblue">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 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>
```

<h3>overflow-hidden</h3>

You cannot scroll overflow block

```
<div style="height: 150px">
  <div class="overflow-hidden" style="width: 300px; position:absolute;">
    <div style="width: 400px; background-color:lightblue">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 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>
```

<h3>inline</h3>

```
<div class="inline" style="background-color: lightblue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div class="inline" style="background-color: lightgreen">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>float left</h3>

```
<div class="fl" style="background-color: lightblue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div style="background-color: lightgreen">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>float right</h3>

```
<div class="fr" style="background-color: lightblue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div style="background-color: lightgreen">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>border radius: all</h3>

```
<div class="rall" style="background-color: lightblue; padding: 10px; width: 300px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>border radius: rtop</h3>

```
<div class="rtop" style="background-color: lightblue; padding: 10px; width: 300px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>border radius: rleft</h3>

```
<div class="rleft" style="background-color: lightblue; padding: 10px; width: 300px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>border radius: rright</h3>

```
<div class="rright" style="background-color: lightblue; padding: 10px; width: 300px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>border radius: rbottom</h3>

```
<div class="rbottom" style="background-color: lightblue; padding: 10px; width: 300px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>odd</h3>

colors background to light grey

```
<div style="padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div class="odd" style="padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>highlight</h3>

```
<div class="highlight" style="padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>disabled</h3>

```
<div class="disabled" style="padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

<h3>code</h3>

use monospace font

```
<div class="code" style="padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
```

*/

.hidden {
    display: none !important;
}
.visible {
    display: block;
}
.invisible {
    visibility: hidden;
}
.clickable {
    cursor: pointer;
}
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.inline {
    display: inline;
}
.nowrap {
    white-space: nowrap;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.rall {
    border-radius: 5px;
}
.rtop {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rleft {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.rright {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.rbottom {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.odd {
    background-color: #fbfbfb;
}
.selected {
    background-color: #e7e7eb;
}
.highlight {
    background-color: #f8f4e6;
}
.disabled {
    color: #c0c6c9 ! important;
}
.code {
    font-family: monospace;
}