text:
/* # Structure CSS
Structure CSS is for building layout structure and styling common UI

## Base Style

Structure CSS set the sorts of default styling for MT like the following.

Font

* Size: 13px
* Color: #1A1A1A
* Family: 'Helvetica Neue', Helvetica, Arial, sans-serif

```
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.
```

Background

* Color: #fffffc

Link

* Color: #0076BF
* Hover Color: #52A437
* Active Color: #04634f

```
<a href="http://movabletype.jp/">MovableType</a>
```

Headings

```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

PRE

```
<pre>
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.
</pre>.
```
*/

/* ## Base Structure

Basic Building Blocks

Base building blocks in MT are container, header(contains brand and menu-bar), content(contains main) and footer in the following structure.

* Container has 980 width at minimum (so, overflow the styleguid's content block..)
* Header block has 2 basic blocks, brand and menu-bar
* Content Main block has 2 basic blocks, content-header and content-body which has main-content block (**main-content block is very important because all main content is placed here**
)

```
<div>
  <div id="container">
    <div id="header">
      <div id="brand"></div>
      <div id="menu-bar"></div>
    </div>
    <div id="content">
      <div id="main">
        <div id="content-header">
          <h1>CONTENT HEADER</h1>
        </div>
        <div id="content-body">
          <div id="main-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <ul id="footer-nav" class="inline-nav">
      <li><a href="http://www.movabletype.org">MovableType.org</a></li>
    </ul>
  </div>
</div>
```

Conetnt/Menu

CMS screens usually have the menu block at the left side of content block and assign .has-menu-nav class at body element, like the flowing.

```
<div class="has-menu-nav">
  <div id="container">
    <div id="header">
      <div id="brand"></div>
      <div id="menu-bar"></div>
    </div>
    <div id="content">
      <div id="menu">
        MENU
      </div>
      <div id="main">
        <div id="content-header">
          CONTENT HEADER
        </div>
        <div id="content-body">
          <div id="main-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <ul id="footer-nav" class="inline-nav">
      <li><a href="http://www.movabletype.org">MovableType.org</a></li>
    </ul>
  </div>
</div>
```
(the top div emulates body element)

Related Contents

MT often shows the releted contents at the left side of content, like the following structure.

```
<div class="has-menu-nav has-related-content">
  <div id="container">
    <div id="header">
      <div id="brand"></div>
      <div id="menu-bar"></div>
    </div>
    <div id="content">
      <div id="menu">
        MENU
      </div>
      <div id="main">
        <div id="content-header">
          CONTENT HEADER
        </div>
        <div id="content-body">
          <div id="main-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
          <div id="related-content">
            RELATED CONTENT
          </div>
        </div>
    </div>
  </div>
  <div id="footer">
    <ul id="footer-nav" class="inline-nav">
      <li><a href="http://www.movabletype.org">MovableType.org</a></li>
    </ul>
  </div>
</div>
```
(the top div emulates body element)

Layout Example

```
<div class="has-menu-nav" style="background:white; border:1px solid #ddd">
  <div id="container" style="min-width: 100%">
    <div id="header">
      <div id="brand"><a><span><img src="../images/logo/movable-type-logo-mono.png"></span></a></div>
      <div id="menu-bar">
        <div id="selector-nav" class="unit size2of3 first-child">
          <a hre="#" class="toggle-button"><img src="../images/arrow/arrow-toggle.png"></a>
          <div id="current-scope">
            <ol id="selector-nav-list" class="line">
              <li id="current-website" class="current scope website">
                <em class="scope-label"><a>First Website</a></em>
              </li>
              <li id="current-blog" class="current scope blog">
                <em class="scope-label"><a>My Blog</a></em>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <div id="content">
      <div id="menu">
          <ul id="blog-wide-menu" class="menu-nav">
            <li id="menu-entry" class="item top-menu current top-menu-open active">
              <div>
                <a class="top-menu-link menu-link"><span class="menu-label">Entries</span></a>
                <a href="#" class="toggle-button"><img src="../images/arrow/arrow-toggle-big.png"></a>
              </div>
              </li>
            <li id="menu-tools" class="item top-menu last-child">
                <div>
                  <a class="top-menu-link menu-link"><span class="menu-label">Tools</span></a>
                  <a href="#" class="toggle-button"><img src="../images/arrow/arrow-toggle-big.png"></a>
                </div>
            </li>
          </ul>
      </div>
      <div id="main">
        <div id="content-header">
          <h1 id="page-title" class="title page">Manage Entries</h1>
        </div>
      </div>
    </div>
    <div id="footer">
      <ul id="footer-nav" class="inline-nav">
        <li><a href="http://www.movabletype.org">MovableType.org</a></li>
      </ul>
    </div>
  </div>
</div>
```
*/

/* ##Grid Class

You can easy build grid layout with the following styles.

1 grid

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

2 grids

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

3 grids

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

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

4 grids

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

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

5 grids

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

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

```
<div class="unit size2of5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="unit size3of5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
```
*/

/* ## Global Header

Header contains 3 main blocks, brand, menu-bar and utility nav

```
  <div class="blog">
    <div id="header">
      <div id="brand"><a><span><img src="../images/logo/movable-type-logo-mono.png"></span></a></div>
      <div id="utility-nav">
        <ul id="utility-nav-list">
          <li id="user"><a><img src="../../mt-static/support/assets_c/userpics/userpic-1-36x36.png" width="18" height="18" class="userpic"> <span class="username">yyamaguchi</span></a></li>
          <li id="help" class="help"><a>Help</a></li>
          <li id="logout"><a>Sign out</a></li>
        </ul>
      </div>
      <div id="menu-bar">
        <div id="selector-nav" class="unit size2of3 first-child">
          <a hre="#" class="toggle-button"><img src="../images/arrow/arrow-toggle.png"></a>
          <div id="current-scope">
            <ol id="selector-nav-list" class="line">
              <li id="current-website" class="current scope website">
                <em class="scope-label"><a>First Website</a></em>
              </li>
              <li id="current-blog" class="current scope blog">
                <em class="scope-label"><a>My Blog</a></em>
              </li>
            </ol>
          </div>
        </div>
        <div id="menu-bar-nav" class="unit size1of3">
          <ul id="menu-bar-icons">
            <li id="rebuild-site" class="nav-link">
              <a class="mt-rebuild" title="Publish Site"><span>Publish</span></a>
            </li>
            <li id="view-site" class="nav-link">
              <a><span>View Website</span></a>
            </li>
            <li id="cms-search" class="nav-link">
              <a href="#" class="detail-link"><span>Search Entries</span></a>
            </li>
          </ul>
          <div id="website-fav-actions-nav" class="fav-actions-nav split">
            <a class="action button">Create New</a>
            <a class="toggle-button button detail-link"><img src="../..//mt-static/images/arrow/arrow-toggle-black.png"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
```

Brand

```
<div class="system">
  <div id="header">
    <div id="brand"><a></a></div>
  </div>
</div>
```
(the top div emulates body element)

TIPS

When mouse hovered the brand logo (a), tips displayed like the following

```
<div class="system">
  <div id="header">
    <div id="brand">
      <a></a>
      <span class="tips">Your Dashboard</span>
    </div>
  </div>
</div>
```
(the top div emulates body element)

Utility Nav

Utitlity nav lists the sorts of global navigation. Navigation Items are positioned the top right side of header.

```
<div id="header">
  <div id="brand"></div>
  <div id="utility-nav">
    <ul id="utility-nav-list">
      <li id="user"><a><img src="../../mt-static/support/assets_c/userpics/userpic-1-36x36.png" width="18" height="18" class="userpic"> <span class="username">yyamaguchi</span></a></li>
      <li id="help" class="help"><a>Help</a></li>
      <li id="logout"><a>Sign out</a></li>
    </ul>
  </div>
</div>
```

Menu Bar

Menu Bar background color depends on body class is 'blog' or 'website'

Blog

```
  <div class="blog">
    <div id="header">
      <div id="menu-bar">
        <div id="selector-nav" class="unit size2of3 first-child">
          <a hre="#" class="toggle-button"><img src="../images/arrow/arrow-toggle.png"></a>
          <div id="current-scope">
            <ol id="selector-nav-list" class="line">
              <li id="current-website" class="current scope website">
                <em class="scope-label"><a>First Website</a></em>
              </li>
              <li id="current-blog" class="current scope blog">
                <em class="scope-label"><a>My Blog</a></em>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
```

Website
```
  <div class="website">
    <div id="header">
      <div id="menu-bar">
        <div id="selector-nav" class="unit size2of3 first-child">
          <a hre="#" class="toggle-button"><img src="../images/arrow/arrow-toggle.png"></a>
          <div id="current-scope">
            <ol id="selector-nav-list" class="line">
              <li id="current-website" class="current scope website">
                <em class="scope-label"><a>First Website</a></em>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
```

Scope Selector

.scope-selector class is the style for the dialog opened with Menu Bar toggle button

```
<div style="height:250px">
<div id="scope-selector" class="scope-selector" style="display:block">
  <div id="system-scope-list" class="scope-list system first-child">
    <ul>
      <li class="user-dashboard">
        <a class="scope-link">User Dashboard</a>
      </li>
      <li class="system-overview">
        <a class="scope-link">System Overview</a>
      </li>
    </ul>
  </div>
  <div id="fav-website-list" class="scope-list website">
    <span class="sticky-label scope-level website">Websites</span>
    <ul>
      <li><a class="scope-link">First Website</a></li>
    </ul>
  </div>
  <div id="fav-blog-list" class="scope-list blog">
    <span class="sticky-label scope-level blog">Blogs</span>
      <ul>
        <li><a class="scope-link">My Blog <span class="parent">(on First Website)</span></a></li>
        <li id="select-blog" class="select-another"><a class="mt-open-dialog scope-link">Select another blog...</a></li>
      </ul>
    </div>
    <div id="create-website-action">
      <ul class="create-action">
        <li id="create-website"><a class="create-link website">Create Website</a></li>
      </ul>
    </div>
    <div id="create-blog-action">
      <ul class="create-action">
        <li id="create-blog">
          <a class="create-link website">Create Blog (on First Website)</a>
        </li>
      </ul>
    </div>
</div>
</div>
```

Favorite Action

```
<div class="fav-actions-nav split active">
  <a class="action button">Create New</a>
  <a hre="#" class="toggle-button button detail-link" style="position:relative; height:22px"><img src="../images/arrow/arrow-toggle-black.png"></a>
  <div id="fav-actions" class="fav-actions detail last-child" 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>
```

Menu Bar Icons

```
<div class="website">
  <div id="header">
    <div id="menu-bar">
      <div id="selector-nav" class="unit size2of3"></div>
      <div id="menu-bar-nav" class="unit size1of3">
        <ul id="menu-bar-icons">
          <li id="rebuild-site" class="nav-link">
            <a class="mt-rebuild" title="Publish Site"><span>Publish</span></a>
          </li>
          <li id="view-site" class="nav-link">
            <a><span>View Website</span></a>
          </li>
          <li id="cms-search" class="nav-link">
            <a href="#" class="detail-link"><span>Search Entries</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

```
<div clasfs="blog">
  <div id="header">
    <div id="menu-bar">
      <div id="selector-nav" class="unit size2of3"></div>
      <div id="menu-bar-nav" class="unit size1of3">
        <ul id="menu-bar-icons">
          <li id="rebuild-site" class="nav-link">
            <a class="mt-rebuild" title="Publish Site"><span>Publish</span></a>
          </li>
          <li id="view-site" class="nav-link">
            <a><span>View Website</span></a>
          </li>
          <li id="cms-search" class="nav-link">
            <a href="#" class="detail-link"><span>Search Entries</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

Quick Seach Form

```
<div clasfs="blog">
  <div id="header">
    <div id="menu-bar" class="line">
      <div id="selector-nav" class="unit size2of3"></div>
      <div id="menu-bar-nav" class="unit size1of3">
        <ul id="menu-bar-icons">
          <li id="cms-search" class="nav-link last-child active">
            <a href="#" class="detail-link"><span>Search Entries</span></a>
            <div id="quick-search-form" class="detail search-form">
              <form id="basic-search" class="basic-search">
                <input accesskey="q" type="text" name="search" id="quick-search" autocomplete="off" class="search-query input-hint text" placeholder="Search Entries" value="" title="Search (q)">
                <button type="submit" class="button">Search</button>
              </form>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

Notification Indicator

When there are some notification messages from system, notification indicator is showed in the following structure.

```
<div clasfs="blog">
  <div id="brand"></div>
  <div id="header">
    <div id="menu-bar" class="line"></div>
    <div id="notification-indicator">
      <div id="notification-indicator-content">
        <p class="msg-text"><a>You have <strong>2 messages</strong> from the system.</a></p>
      </div>
    </div>
  </div>
</div>
```
*/

/* ##Global Footer

MT has footer area at the bottom of screen which contains inline navigation, copyright and version string

```
<div id="footer">
  <ul id="footer-nav" class="inline-nav">
    <li><a href="http://www.movabletype.org">MovableType.org</a></li>
    <li><a href="http://plugins.movabletype.org/">Plugins</a></li>
    <li><a href="http://www.movabletype.org/documentation/">Documentation</a></li>
    <li><a href="http://wiki.movabletype.org/">Wiki</a></li>
    <li><a href="http://www.sixapart.jp/movabletype/support/">Support</a></li>
    <li><a href="http://forums.movabletype.org/">Forums</a></li>
    <li><a href="http://www.sixapart.jp/movabletype/feedback.html">Send Us Feedback</a></li>
  </ul>
  <div id="copyright">Copyright © 2001 Six Apart. All Rights Reserved.</div>
  <p id="version">
    <strong><a href="http://www.movabletype.org/">Movable Type</a> version 6.0</strong>
    with: <a href="http://www.sixapart.com/movabletype/pack/enterprise/">Advanced Pack 2.21</a>
  </p>
</div>
```

*/

/* ##Main Menu

```
<div id="menu" style="margin-left:0">
  <ul class="menu-nav">
    <li class="item top-menu first-child top-menu-open active current">
      <div>
        <a class="top-menu-link menu-link"><span class="menu-label">Blogs</span></a>
        <a class="toggle-button"><img src="../images/arrow/arrow-toggle-big-open.png"></a>
      </div>
      <ul class="sub-menu" style="display: block;">
        <li class="item"><a class="sub-menu-link menu-link current"><span class="menu-label">Manage</span></a></li>
        <li class="item"><a class="sub-menu-link menu-link"><span class="menu-label">New</span></a></li>
      </ul>
    </li>
    <li class="item top-menu">
      <div>
        <a class="top-menu-link menu-link"><span class="menu-label">Entries</span></a>
        <a class="toggle-button"><img src="../images/arrow/arrow-toggle-big.png"></a>
      </div>
    </li>
    <li class="item top-menu last-child">
      <div>
        <a class="top-menu-link menu-link"><span class="menu-label">Tools</span></a>
        <a class="toggle-button"><img src="../images/arrow/arrow-toggle-big.png"></a>
      </div>
    </li>
  </ul>
</div>
```

Current

The menu item currently seeing is added 'current' class

```
<div id="menu" style="margin-left:0">
  <ul class="menu-nav">
    <li class="item top-menu first-child top-menu-open current">
      <div>
        <a class="top-menu-link menu-link"><span class="menu-label">Blogs</span></a>
        <a class="toggle-button"><img src="../images/arrow/arrow-toggle-big.png"></a>
      </div>
    </li>
  </ul>
</div>
```

The sub menu also added 'current'

```
<div id="menu" style="margin-left:0">
  <ul class="menu-nav">
    <li class="item top-menu first-child top-menu-open active current">
      <div>
        <a class="top-menu-link menu-link"><span class="menu-label">Blogs</span></a>
        <a class="toggle-button"><img src="../images/arrow/arrow-toggle-big-open.png"></a>
      </div>
      <ul class="sub-menu" style="display: block;">
        <li class="item"><a class="sub-menu-link menu-link current"><span class="menu-label">Manage</span></a></li>
        <li class="item"><a class="sub-menu-link menu-link"><span class="menu-label">New</span></a></li>
      </ul>
    </li>
  </ul>
</div>
```
*/

/* ## Widget

Widget is the component block using as side menu item, tips, sorts of additional information and so on.

It has some incredients, header, buttons and tabs (some widgets has the footer named '.widget-footer', but no common styles for it).

Basic Structure

.widget class contains 2 main classes, .widget-header and .widget-content.

```
<div class="widget">
  <div class="widget-header"><h2>Widget Header</h2></div>
  <div class="widget-content">
    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>
```

No Header

You can hide header contents with .widget-no-header

```
<div class="widget widget-no-header">
  <div class="widget-header"><h2>Widget Header</h2></div>
  <div class="widget-content">
    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>
```

Header with Tab

If you want to add the tab bar in the widget header, add .tabbed class at the .widget element.

MT uses jQuery UI Tab for tab UI, you build like the following HTML blocks and execute jQuery('#my-widget').tabs() (.ui-* classes are automatically added with jQuery UI)

```
<div id="my-widget" class="widget tabbed ui-tabs ui-widget ui-widget-content ui-corner-all">
  <div class="widget-header" style="padding-bottom: 0">
    <div class="widget-action">
      <a class="widget-close-link"><span>close</span></a>
    </div>
    <div class="widget-label">
      <h2><span>Lorem ipsum dolor sit amet</span></h2>
      <div style="margin: 0 -10px">
        <ul class="tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" style="margin-bottom:0;">
          <li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active first-child">
            <a href="#lorem" class="ui-tabs-anchor">Lorem</a>
          </li>
          <li class="tab ui-state-default ui-corner-top">
            <a href="#ipsum" class="ui-tabs-anchor">ipsum</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="widget-content">
    <div id="lorem">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="ipsum" style="display:none">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div>
```

Action Link

You can add some action at the right side of widget header with .widget-action.

```
<div class="widget">
  <div class="widget-header">
    <div class="widget-action"><a class="widget-close-link" title="close widget"><span>close</span></a></div>
    <h2>Widget Header</h2>
  </div>
  <div class="widget-content">
    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>
```

Tabs

You can add tab links in widget content with ul.tabs and li.tab

```
<div class="widget">
  <div class="widget-header"><h2>Widget Header</h2></div>
  <div class="widget-content">
    <ul class="tabs">
        <li class="tab"><a>Item 1</a></li>
        <li class="tab"><a>Item 2</a></li>
    </ul>
    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 class="widget-footer"></div>
</div>
```

Living Exapmles for Widgets

**Entry Publishing Widget**

```
<div id="entry-publishing-widget" class="widget entry-publishing-widget" style="width:238px">
  <div class="widget-header">
    <div class="widget-action"></div>
    <div class="widget-label"><h2><span>Publishing</span></h2></div>
  </div>
  <div class="widget-content">
    <div id="status-field" class="field field-top-label ">
      <div class="field-header">
        <label id="status-label" for="status">Status</label>
      </div>
      <div class="field-content">
        <select name="status" id="status" class="full">
          <option value="1">Unpublished (Draft)</option>
          <option value="2" selected="selected">Published</option>
        </select>
      </div>
    </div>
    <div id="authored_on-field" class="field field-top-label">
      <div class="field-header">
        <label id="authored_on-label" for="authored_on">Publish Date</label>
      </div>
      <div class="field-content">
        <div class="date-time-fields">
          <input type="text" id="created-on" class="text date text-date hasDatepicker" name="authored_on_date" value="2013-07-12">
          <span class="separator"> @</span> <input type="text" class="text time " name="authored_on_time" value="14:02:33">
        </div>
      </div>
    </div>

    <div id="unpublished_on-field" class="field field-top-label">
      <div class="field-header">
        <label id="unpublished_on-label" for="unpublished_on">Unpublish Date</label>
      </div>
      <div class="field-content ">
        <div class="date-time-fields">
          <span class="unpublished-on-text">Not specified</span>
          <div id="unpublished-on" class="mt-edit-inputblock" style="display:none">
            <input type="text" id="unpublished-on-date" class="text date text-date hasDatepicker" name="unpublished_on_date" value="">
            <span class="separator"> @</span> <input type="text" id="unpublished-on-time" class="text time" name="unpublished_on_time" value="">
          </div>
          <button type="button" id="mt-edit-unpublished-on" class="button mt-edit-field-button">Edit</button>
        </div>
      </div>
    </div>

    <div id="basename-field" class="field field-top-label">
      <div class="field-header">
        <label id="basename-label" for="basename">Basename</label>
      </div>
      <div class="field-content">
        <span class="basename">
          <span class="basename-text">loremipsum</span>
          <input type="text" name="basename" id="basename" class="text full" value="loremipsum" style="display: none;">
        </span>
        <button type="button" id="mt-set-basename" class="mt-edit-field-button button">Edit</button>
        <p class="alert-warning-inline" id="basename-warning">
          <img src="../images/status_icons/warning.gif" alt="Warning" width="9" height="9">
          Warning: Changing this entry's basename may break inbound links.
        </p>
      </div>
    </div>

    <div id="revision-note-field" class="field field-top-label">
      <div class="field-header">
        <label id="revision-note-label" for="revision-note">Change note</label>
      </div>
      <div class="field-content">
        <input type="text" name="revision-note" id="revision-note" class="text full" value="">
      </div>
    </div>

    <div class="actions-bar">
      <div class="save-action">
        <button name="status" type="submit" title="Update this Entry" class="publish action primary button">Update</button>
      </div>
      <div class="preview-action">
        <button name="preview_entry" type="submit" accesskey="v" title="Preview this entry (v)" class="preview action button">
          Preview
        </button>
      </div>
    </div>

    <div class="delete-action">
      <a class="delete" accesskey="x">
        Delete
      </a>
    </div>
  </div>
</div>
```

**Categories Widget**

```
<div id="category-field" class="selector-active" style="width:238px">
  <div id="entry-category-widget" class="widget entry-category-widget">
    <div class="widget-header ">
      <div class="widget-action">
        <a class="category-toggle-link toggle-link hidden">edit</a>
        <a class="category-toggle-link toggle-link">close</a>
      </div>
      <div class="widget-label">
        <h2><span>Categories</span></h2>
      </div>
    </div>
    <div class="widget-content">
      <div id="category-field" class="field field-no-header">
        <div class="field-header">
          <label id="category-label" for="category">Category</label>
        </div>
        <div class="field-content">
          <div id="category-selector" class="category-selector">
            <div class="category-selector-header">
              <a class="add-category-new-parent-link">Add</a>
            </div>
            <div id="add-category-form" class="add-category-form hidden">
                <input id="add-category-input" class="add-category-input text" type="text" value="Add category">
                <a class="add-category-save-link"><span>Add</span></a>
                <a class="add-category-cancel-link"><span>Cancel</span></a>
            </div>
            <div id="category-selector-list" class="category-selector-list active-component">
              <input autocomplete="off" style="display: block; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; margin: 0px; border: 0px; padding: 0px; font-size: 0.1px; line-height: 0; opacity: 0;">
              <div class="list-item odd selected">
                <div style="text-align:left; margin-left:0px">
                  <a class="add-category-new-link"><span>Add</span> </a>
                  <div style="width: 165px;">
                    <input type="checkbox" name="add_category_id_6" class="add-category-checkbox"> Lorem ipsum
                  </div>
                </div>
              </div>
              <div class="list-item even">
                <div style="text-align:left; margin-left:0px">
                  <a class="add-category-new-link"><span>Add</span> </a>
                  <div style="width: 165px;">
                    <input type="checkbox" name="add_category_id_5" class="add-category-checkbox"> dolor sit amet
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div id="category-list">
            <ul class="category-list">
              <li class="primary"><strong>Lorem ipsum</strong>
                <a class="delete"> <span>Remove</span></a>
              </li>
            </ul>
          </div>
          <input id="category-ids" type="hidden" name="category_ids" value="6" class="hidden">
        </div>
      </div>
    </div>
  </div>
</div>
```
*/

/* ## Common UI

Tabs

.ui-tabs is the style for jQuery UI Tabs (MT custmizes its style). .ui-* classes are automatically added by jQuery UI.

You can see the living example in the search-replace screen.

```
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="search-tabs-list tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all first-child">
    <li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active" ><a class="ui-tabs-anchor"><span>Entries</span></a></li>
    <li class="tab ui-state-default ui-corner-top"><a class="ui-tabs-anchor"><span>Comments</span></a></li>
    <li class="tab ui-state-default ui-corner-top"><a class="ui-tabs-anchor"><span>TrackBacks</span></a></li>
    <li class="tab ui-state-default ui-corner-top"><a class="ui-tabs-anchor"><span>Pages</span></a></li>
    <li class="tab ui-state-default ui-corner-top"><a class="ui-tabs-anchor"><span>Templates</span></a></li>
    <li class="tab ui-state-default ui-corner-top"><a class="ui-tabs-anchor"><span>Assets</span></a></li>
    <li class="tab ui-state-default ui-corner-top"><a class="ui-tabs-anchor"><span>Activity Log</span></a></li>
    <li class="tab ui-state-default ui-corner-top"><a class="ui-tabs-anchor"><span>Users</span></a></li>
  </ul>
</div>
```

Date Picker

.ui-datepicker class is the style for jQuery UI Data Picker

.ui-datepicker related classes automatically assigned by jQuery UI, so you might not assign this classes manually (All you have to do is calling jQeury UI Date Picker).

```
<div class="ui-datepicker" style="display:block">
  <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
      <a class="ui-datepicker-prev ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-w"><</span></a>
      <a class="ui-datepicker-next ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-e">></span></a>
      <div class="ui-datepicker-title">
          <span class="ui-datepicker-year">2013</span> <span class="ui-datepicker-month">- 07</span>
      </div>
  </div>
  <table class="ui-datepicker-calendar">
  <thead>
      <tr>
          <th class="ui-datepicker-week-end"><span title="Sunday">S</span></th>
          <th><span title="Monday">M</span></th>
          <th><span title="Tuesday">T</span></th>
          <th><span title="Wednesday">W</span></th>
          <th><span title="Thursday">T</span></th>
          <th><span title="Friday">F</span></th>
          <th class="ui-datepicker-week-end"><span title="Saturday">S</span></th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
          <td><a class="ui-state-default">1</a></td>
          <td><a class="ui-state-default">2</a></td>
          <td><a class="ui-state-default">3</a></td>
          <td><a class="ui-state-default">4</a></td>
          <td><a class="ui-state-default">5</a></td>
          <td class="ui-datepicker-week-end"><a class="ui-state-default">6</a></td>
      </tr>
      <tr>
          <td class="ui-datepicker-week-end"><a class="ui-state-default">7</a></td>
          <td><a class="ui-state-default">8</a></td>
          <td><a class="ui-state-default">9</a></td>
          <td><a class="ui-state-default">10</a></td>
          <td><a class="ui-state-default">11</a></td>
          <td><a class="ui-state-default">12</a></td>
          <td class="ui-datepicker-week-end"><a class="ui-state-default">13</a></td>
      </tr>
      <tr>
          <td class="ui-datepicker-week-end"><a class="ui-state-default">14</a></td>
          <td><a class="ui-state-default">15</a></td>
          <td class="ui-datepicker-days-cell-over ui-datepicker-today"><a class="ui-state-default ui-state-highlight ui-state-hover">16</a></td>
          <td><a class="ui-state-default">17</a></td>
          <td><a class="ui-state-default">18</a></td>
          <td><a class="ui-state-default">19</a></td>
          <td class="ui-datepicker-week-end"><a class="ui-state-default">20</a></td>
      </tr>
      <tr>
          <td class="ui-datepicker-week-end"><a class="ui-state-default">21</a></td>
          <td><a class="ui-state-default">22</a></td>
          <td><a class="ui-state-default">23</a></td>
          <td><a class="ui-state-default">24</a></td>
          <td><a class="ui-state-default">25</a></td>
          <td><a class="ui-state-default">26</a></td>
          <td class="ui-datepicker-week-end"><a class="ui-state-default">27</a></td>
      </tr>
      <tr>
          <td class="ui-datepicker-week-end"><a class="ui-state-default">28</a></td>
          <td><a class="ui-state-default">29</a></td>
          <td><a class="ui-state-default">30</a></td>
          <td><a class="ui-state-default">31</a></td>
          <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
          <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
          <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
      </tr>
  </tbody>
  </table>
</div>
```

Toggle Button

.toggle-button class styles the toggle button with related UI styles.

**Note**: toggle-button style is strongly depended on the parent position:relative element style (in especially width). You need to add the appreciate styles for it.

**with menu nav**

```
<div style="width:150px">
  <ul class="menu-nav">
    <li class="item top-menu top-menu-open">
      <div>
        <a class="top-menu-link menu-link">
          <span class="menu-label">Menu Item</span>
        </a>
        <a class="toggle-button">
          <img src="../images/arrow/arrow-toggle-big.png">
        </a>
      </div>
    </li>
  </ul>
</div>
```

**with filter-header**

filter-header class is used in the listings header

```
<div class="filter-block">
  <div id="filter-header">
    <div class="mod filter-header">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <a class="toggle-button">
        <img src="../images/arrow/arrow-toggle-big.png">
      </a>
    </div>
  </div>
</div>
```

**with selector-nav**

selector-nav class is used for button at the top left side of the header.

```
<div id="selector-nav">
  <a class="toggle-button">
    <img src="../images/arrow/arrow-toggle.png">
  </a>
</div>
```

Display Optins

Display Options has two ingredients, toggle button and detailed contents.

It's typically used with listing blocks, so more details at [listing.css](#/style/listing.css)

```
<div class="display-options">
  <a class="toggle-link">
    Display Options
    <span class="toggle-button">
      <img src="../images/arrow/arrow-toggle.png">
    </span>
  </a>
  <div class="display-options-detail detail" style="display: block;">
    <div class="field field-top-label">
      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>
```

Sortable Fields

.sort-enabled class adds handle UI for a sotable element.

```
<div id="tags-field" class="field field-top-label sort-enabled">
    <div class="field-header">
      <label>Lorem ipsum dolor sit amet</label>
    </div>
    <div class="field-content">
      <input type="text" class="text full">
    </div>
</div>
```

Object Navigation

.object-nav class is the style for a Object(entry/comment etc)'s navigation like the following

```
<ul class="object-nav">
  <li id="previous-link"><a>‹ Prev</a></li>
  <li id="next-link"><span>Next ›</span></li>
</ul>
```

Progress Bar

**start processing**

.progressbar is style for progress bar. .indeterminate class is used for start processing (so, you usually use the both .progressbar and .indeterminate classes)

```
<div id="progressbar" class="progressbar indeterminate"></div>
```

**on progress**

If you show the progress using jQuery UI progressbar, its style like the following (ui-* classes added by jQuery UI).

```
<div id="progressbar" class="progressbar ui-progressbar ui-widget ui-widget-content ui-corner-all">
  <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 28%;"></div>
</div>
```
*/

/* ## Common Styles

Images

Common styles for images

**picture**

.picture adds margin to top and bottom and clear:both

```
<div>
<p>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.</p>
</div>
<div class="picture">
  <img src="../styleguide/images/sample.jpg" />
</div>
<div>
<p>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.</p>
</div>
```

**.picture.small**

.picture.small is for small images like thumbnail

```
<div>
<p>
<span class="picture small">
<img src="../styleguide/images/sample_small.jpg" />
</span>
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.</p>
</div>
```

**.thumbnail**

.thumbnail adds border around image like the following

```
<div>
<p>
<span class="picture small thumbnail">
<img src="../styleguide/images/sample_small.jpg" />
</span>
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.</p>
</div>
```

.thumbnail also adds background image to clarify transparent area like PhotoShop

```
<div class="picture small thumbnail">
  <img src="../images/chromeless/mt_logo.png"/>
</div>
```

Sticky Label

Adds sticky labels like the following

```
<span class="sticky-label">Label</span>
<span class="sticky-label system">System</span>
<span class="sticky-label website">WebSite</span>
<span class="sticky-label blog">Blog</span>
<span class="sticky-label required">Required</span>
<span class="sticky-label inuse-userpic">UserPic</span>
```

If you want to add delete icon at the right side of label, add remove class
```
<div class="selected-items">
<span class="sticky-label">Item<span class="remove">x</span></span>
</div>
```

Horizontal List

.multiple-selection class positions list items horizontally.

```
<ul class="multiple-selection">
  <li><input type="checkbox" /> Lorem ipsum dolor</li>
  <li><input type="checkbox" /> sit amet</li>
  <li><input type="checkbox" /> consectetur adipisicing elit</li>
</ul>
```

If you want to separate each item with fixed width, use .fixed-width

```
<ul class="multiple-selection fixed-width">
  <li><input type="checkbox" /> Lorem ipsum dolor</li>
  <li><input type="checkbox" /> sit amet</li>
  <li><input type="checkbox" /> consectetur adipisicing elit</li>
</ul>
```

Hint

.hint is used for the additional information of setting item.

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

Contextual Help

```
<a id="formatting-help-link">?</a>
```

Inline Warning

.alert-warning-inline is styled for inline warnings

```
<div>
  <input />
  <p class="alert-warning-inline">
    <img src="../images/status_icons/warning.gif" width="9" height="9" /> Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit ( <a>read more details</a> ).
  </p>
</div>
```

Toggle link

used the link like 'Change Password' link

appearing cursor as pointer and show underline explicitly (underline disappeared on hover)

```
<a class="toggle-link">Change Password</a>
```

Open Dialog Link

This style is used for the link which opens the 'Select Filter' dialog at the header of the listing.

More details about listing style, see [listing.css](#/style/listing.css)

```
<div class="filter-block">
  <div id="filter-header">
    <div class="mod filter-header">
      Filter: <a class="open-dialog-link">All Entries</a>
    </div>
  </div>
</div>
```

Create link

.create-inline and the related classes used for the inline link to craate object.

```
<a class="icon-left icon-create">Create Archive Mapping</a>
```

System Information

.exception class is used show the system exepction message like the following

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet
    Details

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet

Process Log

```
<pre class="progress-log last-child">Backing up Movable Type
<span id="field">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
<span id="website">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
<span id="blog">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</pre>
```

*/

/* ## Plugin Settings

```
<div id="list-plugins">
<div class="plugin-group">
  <h2 class="plugin-group-name">Individual Plugins</h2>
  <div class="plugin-list">
    <div class="plugin first-child">
      <div class="plugin-header">
        <h4 class="plugin-name">
          <a href="#" style="background-image: url('../images/plugin.gif')">Loem ipsum <span class="plugin-version">2.32</span></a>
        </h4>
        <div class="plugin-status">
          <span class="icon-left icon-success">Enabled</span>
          <a class="button">Disable</a>
        </div>
      </div>
      <div class="plugin-content ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="plugin-tabs-list tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
          <li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a class="icon-mini-left icon-mini-comments ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Info</a></li>
          <li class="tab ui-state-default ui-corner-top"><a class="icon-mini-left icon-mini-templates ui-tabs-anchor">Resources</a></li>
          <li class="tab ui-state-default ui-corner-top"><a class="icon-mini-left icon-mini-settings ui-tabs-anchor">Settings</a></li>
        </ul>
        <div class="ui-tabs-panel ui-widget-content ui-corner-bottom">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <div class="plugin-metadata">
            <ul class="plugin-metadata-list">
              <li><a class="icon-mini-left icon-mini-docs">Documentation</a></li>
              <li><a class="icon-mini-left icon-mini-view-site">Six Apart, Ltd.</a></li>
            </ul>
          </div>
        </div>
        <div class="resources ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: none;">
          <ul>
            <li><strong>Tags:</strong><MTLoremIpsum></li>
          </ul>
        </div>
        <div class="config ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: none;">
          <fieldset>
            <div id="rebuild_for_action_stream_events-field" class="field field-left-label ">
              <div class="field-header">
                <label id="rebuild_for_action_stream_events-label" for="rebuild_for_action_stream_events">Rebuild Indexes</label>
              </div>
              <div class="field-content ">
                <label><input type="checkbox" id="rebuild_for_action_stream_events" value="1" class="checkbox"> Enable rebuilding</label>
                <div class="hint">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
              </div>
            </div>
          </fieldset>

          <div class="actions-bar settings-actions-bar">
            <button mt:mode="save_plugin_config" type="submit" class="save action primary button">
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="plugin plugin-disabled disabled last-child">
      <div class="plugin-header">
        <h4 class="plugin-name">
          <span class="plugin-name-disabled">DolorSitAmet </span>
        </h4>

        <div class="plugin-status">
          <span class="icon-left icon-neutral">Disabled</span>
          <a class="button">Enable</a>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
```

Plugin expanded

```
<div id="list-plugins">
<div class="plugin-group">
  <h2 class="plugin-group-name">Individual Plugins</h2>
  <div class="plugin-list">
    <div class="plugin first-child last-child plugin-expanded">
      <div class="plugin-header">
        <h4 class="plugin-name">
          <a href="#" style="background-image: url('../images/plugin.gif')">Loem ipsum <span class="plugin-version">2.32</span></a>
        </h4>
        <div class="plugin-status">
          <span class="icon-left icon-success">Enabled</span>
          <a class="button">Disable</a>
        </div>
      </div>
      <div class="plugin-content ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="plugin-tabs-list tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
          <li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a class="icon-mini-left icon-mini-comments ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Info</a></li>
          <li class="tab ui-state-default ui-corner-top"><a class="icon-mini-left icon-mini-templates ui-tabs-anchor">Resources</a></li>
          <li class="tab ui-state-default ui-corner-top"><a class="icon-mini-left icon-mini-settings ui-tabs-anchor">Settings</a></li>
        </ul>
        <div class="ui-tabs-panel ui-widget-content ui-corner-bottom">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <div class="plugin-metadata">
            <ul class="plugin-metadata-list">
              <li><a class="icon-mini-left icon-mini-docs">Documentation</a></li>
              <li><a class="icon-mini-left icon-mini-view-site">Six Apart, Ltd.</a></li>
            </ul>
          </div>
        </div>
        <div class="resources ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: none;">
          <ul>
            <li><strong>Tags:</strong><MTLoremIpsum></li>
          </ul>
        </div>
        <div class="config ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: none;">
          <fieldset>
            <div id="rebuild_for_action_stream_events-field" class="field field-left-label ">
              <div class="field-header">
                <label id="rebuild_for_action_stream_events-label" for="rebuild_for_action_stream_events">Rebuild Indexes</label>
              </div>
              <div class="field-content ">
                <label><input type="checkbox" id="rebuild_for_action_stream_events" value="1" class="checkbox"> Enable rebuilding</label>
                <div class="hint">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
              </div>
            </div>
          </fieldset>

          <div class="actions-bar settings-actions-bar">
            <button mt:mode="save_plugin_config" type="submit" class="save action primary button">
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
```
*/

/* #Theme Settings

```
<div id="list-themes">
<div id="website-theme-group" class="theme-group">
  <h2 class="theme-group-name">Themes for Websites</h2>
  <div class="theme-list">
    <div class="theme first-child">
      <div class="theme-status">
        <span class="icon-left icon-success">In Use</span>
      </div>
      <div class="theme-thumbnail thumbnail picture small">
        <img src="../../mt-static/support/theme_thumbnails/classic_website/thumb-small.png" width="120" height="90">
      </div>
      <div class="theme-meta">
        <h3 class="theme-title"><a class="theme-detail-link toggle-link icon-left icon-spinner">Loem ipsum <span class="theme-version">1.2</span></a></h3>
        <div class="theme-author">
          Author: <a>Six Apart, Ltd.</a>
        </div>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="theme-details ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="theme-tabs-list ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
         <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a class="ui-tabs-anchor">Info</a></li>
        </ul>
        <div class="theme-info ui-tabs-panel ui-widget-content ui-corner-bottom">
          <h4 class="first-child">Theme Information</h4>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="theme last-child">
      <div class="theme-status">
        <a class="button uninstall-theme-link">Uninstall</a>
      </div>
      <div class="theme-thumbnail thumbnail picture small">
        <img src="../../mt-static/support/theme_thumbnails/professional_website/thumb-small.png" width="120" height="90" class="first-child">
      </div>
      <div class="theme-meta">
        <h3 class="theme-title"><a class="theme-detail-link toggle-link icon-left icon-spinner">Loem ipsum <span class="theme-version">1.2</span></a></h3>
        <div class="theme-author">
          Author: <a>Six Apart, Ltd.</a>
        </div>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="theme-details ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="theme-tabs-list ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
         <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a class="ui-tabs-anchor">Info</a></li>
        </ul>
        <div class="theme-info ui-tabs-panel ui-widget-content ui-corner-bottom">
          <h4 class="first-child">Theme Information</h4>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
```

Expand

```
<div id="list-themes">
<div id="website-theme-group" class="theme-group">
  <h2 class="theme-group-name">Themes for Websites</h2>
  <div class="theme-list">
    <div class="theme theme-expanded first-child">
      <div class="theme-status">
        <span class="icon-left icon-success">In Use</span>
      </div>
      <div class="theme-thumbnail thumbnail picture small">
        <img src="../../mt-static/support/theme_thumbnails/classic_website/thumb-small.png" width="120" height="90">
      </div>
      <div class="theme-meta">
        <h3 class="theme-title"><a class="theme-detail-link toggle-link icon-left icon-spinner">Loem ipsum <span class="theme-version">1.2</span></a></h3>
        <div class="theme-author">
          Author: <a>Six Apart, Ltd.</a>
        </div>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="theme-details ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="theme-tabs-list ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
         <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a class="ui-tabs-anchor">Info</a></li>
        </ul>
        <div class="theme-info ui-tabs-panel ui-widget-content ui-corner-bottom">
          <h4 class="first-child">Theme Information</h4>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="theme last-child">
      <div class="theme-status">
        <a class="button uninstall-theme-link">Uninstall</a>
      </div>
      <div class="theme-thumbnail thumbnail picture small">
        <img src="../../mt-static/support/theme_thumbnails/professional_website/thumb-small.png" width="120" height="90" class="first-child">
      </div>
      <div class="theme-meta">
        <h3 class="theme-title"><a class="theme-detail-link toggle-link icon-left icon-spinner">Loem ipsum <span class="theme-version">1.2</span></a></h3>
        <div class="theme-author">
          Author: <a>Six Apart, Ltd.</a>
        </div>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="theme-details ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="theme-tabs-list ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
         <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a class="ui-tabs-anchor">Info</a></li>
        </ul>
        <div class="theme-info ui-tabs-panel ui-widget-content ui-corner-bottom">
          <h4 class="first-child">Theme Information</h4>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
```
*/

/* ##Beta

When MT is beta version one, .mt-beta class is added at body element.

```
<div class="mt-beta">
  <div id="container">
    <div id="header">
      <div id="brand"><a></a><span class="tip">Your Dashboard</tip></div>
      <div id="menu-bar"></div>
    </div>
    <div id="content">
      <div id="main">
        <div id="content-header">
          <h1>CONTENT HEADER</h1>
        </div>
        <div id="content-body">
          <div id="main-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <div id="msg-beta"><p>Lorem ipsum dolor sit amet</p></div>
    <ul id="footer-nav" class="inline-nav">
      <li><a href="http://www.movabletype.org">MovableType.org</a></li>
    </ul>
  </div>
</div>
```
(the top div emulates body element)

*/

/* ##Other Styles
structure.css has some other specific styles for some screens

Tags Field

tags-field related classes are mainly used for tags field in Edit Entry screen

```
<div id="tags-field" class="field field-top-label sort-enabled" style="position: relative; opacity: 1; z-index: 0;">
  <div class="field-header first-child">
    <label id="tags-label">Tags</label>
  </div>
  <div class="field-content  last-child">
    <input type="text" name="tags" id="tags" class="text full" value="L">
    <div id="tags-suggestion">
      <div id="tags_completion" style="display: block;"><div class="complete-highlight">Lorem</div></div>
    </div>
  </div>
</div>
```

**Suggestion Block**

```
    <div id="tags-suggestion">
      <div id="tags_completion" style="display: block;"><div class="complete-highlight">Lorem</div></div>
    </div>
```

Add New Category Form

```
<div class="category-selector">
  <div id="add-category-form" class="add-category-form">
    <input id="add-category-input" class="add-category-input text" type="text" value="Add category">
    <a class="add-category-save-link"><span>Add</span></a>
    <a class="add-category-cancel-link"><span>Cancel</span></a>
  </div>
</div>
```

Template Option

```
<div class="edit-template">
<div id="template-options" class="active">
  <div id="template-options-header" class="line">
    <div class="template-options-toggle">
        <a　class="icon-left icon-spinner">Template Options</a>
      </div>
      <div class="template-options-summary">Enabled Mappings: Entry</div>
    </div>
    <div id="template-options-content">
      <div id="linked_file-field" class="field field-top-label">
        <div class="field-header">
          <label id="linked_file-label" for="linked_file">Link to File</label>
        </div>
        <div class="field-content">
          <input type="text" name="linked_file" id="linked_file" class="text" tabindex="8" value="" maxlength="255">
        </div>
      </div>
      <div id="archive_mapping-field" class="field field-top-label">
        <div class="field-header">
          <label id="archive_mapping-label" for="archive_mapping">Archive Mapping</label>
        </div>
        <div class="field-content field-content-text">
        <p><a class="icon-left icon-create">Create Archive Mapping</a></p>
        <div id="msg-block"></div>
        <div class="create-inline" id="create-inline-mapping">
          <label for="new_archive_type"><strong>Type</strong></label>
          <select name="new_archive_type" id="new_archive_type" tabindex="9">
            <option value="Individual">Entry</option>
          </select>

          <span class="buttons">
            <a class="button">Add</a>
            <a class="button">Cancel</a>
          </span>
        </div>
        <div id="template-maps">
          <div id="templatemap-listing" class="listing  hide_actions">
            <table id="templatemap-listing-table" class="legacy listing-table  hide_actions templatemap-listing-table compact">
              <thead>
                <tr>
                  <th class="col head archive-type"><span class="col-label">Type</span></th>
                  <th class="col head archive-path primary"><span class="col-label">Path</span></th>
                  <th class="col head publish-options"><span class="col-label">Publishing</span></th>
                  <th class="col head archive-delete si"><span>Delete</span></th>
                </tr>
              </thead>
              <tbody>
                <tr id="18" class="odd">
                  <td class="col archive-type">Entry</td>
                  <td class="col archive-path">
                    <select id="archive_file_sel_18" class="tmpl-path">
                      <option value="%y/%m/%-f">yyyy/mm/entry-basename.html</option>
                    </select>
                    <input type="text" class="tmpl-path tmpl-path-custom hidden text" value="%y/%m/%f">
                  </td>
                  <td class="col publish-options">
                    <select name="map_build_type_18" id="build-type" class="half-width">
                      <option value="1" selected="selected">Statically (default)</option>
                    </select>
                  </td>
                  <td class="col archive-delete si"><a class="icon16 icon-delete">Delete</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="hint">Learn more about <a>publishing settings</a></div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
```

Editor Toolbar

.editor-toolbar is used at Edit Template screen

```
<div id="template-body-field" class="field field-no-header ">
    <div class="field-header">
      <label id="template-body-label" for="template-body">Template Body</label>
    </div>
    <div class="field-content">

    <div id="template-editor-toolbar" class="template editor-toolbar toolbar">
      <button type="button" id="syntaxon" class="command-highlight-on toolbar button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" title="Syntax highlighting On" role="button" aria-disabled="false"><span class="ui-button-text"><span class="button-label">Syntax highlighting On</span></span></button><button type="button" id="syntaxoff" class="command-highlight-off toolbar button active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" title="Syntax highlighting Off" role="button" aria-disabled="false"><span class="ui-button-text"><span class="button-label">Syntax highlighting Off</span></span></button>
    </div>
    <div id="textarea-enclosure" class="editor">
      <textarea name="text" id="text" class="monospace text full" tabindex="3" style="display: inline-block;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </textarea>
    </div>
    </div>
</div>
```

Search Replace

```
<div class="search-replace">
<div id="search-bar" class="line">
  <div id="search-bar-search-field" class="mod">
    <div id="search-field" class="field field-top-label">
    <div class="field-header"><label id="search-label" for="search">Search</label></div>
    <div class="field-content"><input type="text" name="search" id="search" class="text query" value=""></div>
  </div>
  <ul id="search-bar-advanced-search" class="multiple-selection">
      <li><label for="case"><input type="checkbox" id="case" name="case" value="1" class="cb checkbox"> Case Sensitive</label></li>
      <li><label for="is_regex"><input type="checkbox" id="is_regex" name="is_regex" value="1" class="cb checkbox"> Regex Match</label></li>
  </ul>
  <div id="limited-fields" class="mod advanced-options">
    <div id="entry-fields">
      <ul class="multiple-selection">
        <li><label for="search_cols-basename"><input type="checkbox" checked="checked" class="cb checkbox"> Basename</label></li>
        <li><label for="search_cols-keywords"><input type="checkbox"checked="checked" class="cb checkbox"> Keywords</label></li>
      </ul>
    </div>
  </div>
  <div id="date-range" class="mod advanced-options">
    <label for="datefrom">From:</label> <input type="text" name="from" id="from" class="text-date text date hasDatepicker" value="">
    <label for="dateto">To:</label> <input type="text" name="to" id="to" class="text-date text date last-child hasDatepicker" value="">
  </div>
  <div class="actions-bar last-child">
    <button id="search-button" class="search action primary button">Search</button>
  </div>
</div>
</div>
```
(the top div emulates body element)

*/

/* ##System-wide tweaks

structure.css also has system-wide tweaks to address various issues.

Widgets Styles

tweaks for the following widgets

* news-widget (MT News)
* include-form (Templates Widget)
* entry-status-widget
* entry-publishing-widget
* category-selector (Categories widget)
* Feedback Widget
* Asset List Widget
* available-column-items, installed-widgets (Edit Widget Set)

Base Styles for specific features

sorts of base styles for the following UI/features.

* Action Bar ([listing.css](#/style/listing.css))
* CodeMirror Line Numbers
* Page Folder
* Edit Comment screen (around commenter)
* archive mapping
* Preview Content
* system-check
* has-licence-field
* system_email_address-field
* new_user_theme_thumb
* process-msg

Width tweaks

width tweaks for the following class

* list-revision-dialog
* date-time-fields
* default_categories-table
* default_folders-table

Padding/Margin tweaks

padding/margin tweaks for the following class

* status field in edit comment/ping screen
* asset_details (asset option)
* asset-preview
* related-assets
* setting-auth-status-field
* template_set (Export Theme)
* template-group (Export Theme)

Clearfix

including Clearfix style

Legacy Support

legacy supports for the following class
* asset-listing-table
* tmpl-type-name

*/

html,
body {
    height: 100%;
}
body {
    color: #1A1A1A;
    background-color: #ffffff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
}

a, a:link, a:visited{
    color: #0076BF;
    outline: 0;
}
a:hover{
    color: #52A437;
    text-decoration: none;
}
a:active{
    color: #04634f;
    text-decoration: none;
}

h2, h3, h4, h5, h6 {
    margin: 1em 0;
    font-weight: bold;
}
h2 {
    font-size: 115%;
}
h3, h4, h5, h6 {
    font-size: 100%;
}

pre {
    margin: 10px 0 0;
    border: 1px solid #c0c6c9;
    background-color: #f3f3f3;
    color: #666666;
}

.hint {
    width: 75%;
    color: #a3a3a2;
    font-size: 95%;
    font-style: Italic;
}

.alert-warning-inline {
    margin: 5px 0 0;
    font-size: 95%;
}
.alert-warning-inline,
.alert-warning-inline a {
    color: #f39800;
}

.picture {
    clear: both;
    position: relative;
    margin: 1.5em 0;
}
.picture.small {
    float: left;
    margin: 0 10px 0.5em 0;
}
.picture img {
    height: auto;
}
.thumbnail img,
.userpic img {
    border: 1px solid #c0c6c9;
}
.userpic {
    position: relative;
}
.userpic .icon {
    position: absolute;
    right: 0;
    bottom: 0;
}
#userpic-preview {
    margin-bottom: 10px;
}
.thumbnail {
    background: #f3f3f3 url(../images/thumbnail-bg.png) repeat top left;
}
.asset-thumb {
    width: 45px;
    height: 45px;
}
.asset-thumb.asset-type-icon {
    border: 0;
    background: none;
}

.sticky-label {
    display: inline-block;
    padding: 0.2em 0.5em;
    line-height: 1.3;
    background-color: #adadad;
    color: #fff;
    font-size: 80%;
    border-radius: 2px;
}
.sticky-label.required,
.sticky-label.inuse-userpic {
    margin-left: 10px;
}

.sticky-label.system {
    background-color: #666666;
}
.sticky-label.website {
    background-color: #52A437;
}
.sticky-label.blog {
    background-color: #0076BF;
}
.selected-items .sticky-label {
    margin-bottom: 1px;
    padding-right: 0;
    text-decoration: none;
}
.selected-items .sticky-label .remove {
    float: right;
    padding: 0 0.3em;
    margin: 0 0.3em;
    background-color: #dcdddd;
    color: #1A1A1A;
}
.selected-items .sticky-label .remove:hover {
    background-color: #1A1A1A;
    color: #fff;
}

.multiple-selection {
    display: inline-block;
}
.multiple-selection li {
    display: inline-block;
    margin: 0 15px 5px 0;
}
.fixed-width.multiple-selection li {
    width: 250px;
    margin: 0 0 5px;
}

.overlay,
.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    opacity: 0.7;
    -ms-filter: 'alpha(opacity=70)';
    filter: alpha(opacity=70);
}

.toggle-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #e6e6e6;
    background-image: -moz-linear-gradient(#eeefef, #e6e6e6);
    background-image: -webkit-linear-gradient(#eeefef, #e6e6e6);
    background-image: linear-gradient(#eeefef, #e6e6e6);
    border-left: 1px solid #c0c6c9;
    text-align: center;
}
.toggle-button:hover {
    background-color: #fafafa;
    background-image: -webkit-linear-gradient(#fafafa, #e9eaea);
    background-image: -moz-linear-gradient(#fafafa, #e9eaea);
    background-image: linear-gradient(#fafafa, #e9eaea);
}
.active .toggle-button {
    background-color: #eeefef;
    background-image: -moz-linear-gradient(#e6e6e6, #eeefef);
    background-image: -webkit-linear-gradient(#e6e6e6, #eeefef);
    background-image: linear-gradient(#e6e6e6, #eeefef);
}
.toggle-button img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2px 0 0 -4px;
}

.menu-nav .toggle-button {
    width: 20px;
}

.filter-header .toggle-button {
    width: 30px;
    border-radius: 0 3px 0 0;
}
.filter-header .toggle-button img,
.menu-nav .toggle-button img {
    margin: -3px 0 0 -5px;
}

.toggle-link {
    cursor: pointer;
    background: transparent;
    color: #666666;
    text-decoration: underline;
}

.toggle-link:link,
.toggle-link:visited {
    color: #666666;
}

.toggle-link:hover,
.toggle-link:active {
    text-decoration: none;
}

.detail {
    clear: both;
}

.open-dialog-link {
    border-bottom: 1px dotted;
    color: #666666;
    text-decoration: none;
}

.open-dialog-link:link,
.open-dialog-link:visited {
    color: #666666;
}

.open-dialog-link:hover {
    border-bottom: 0;
}

.progressbar {
    height: 2em;
    border: 1px solid #c0c6c9;
    background: #fff;
    border-radius: 2px;
}
.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);
}

.item-action {
    margin-left: 8px;
}

.option {
    margin: 10px 0;
}

.metadata-item {
    line-height: 1.2;
    margin-bottom: 0.5em;
}
.metadata-item strong {
    margin-right: 0.5em;
}

.ui-tabs .ui-tabs-hide {
    display: none;
}
.ui-tabs-nav,
ul.tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid #c0c6c9;
}
.ui-tabs-nav li,
ul.tabs li {
    line-height: 1;
    display: inline-block;
    margin: 0 0 -1px 0;
    border: 1px solid #c0c6c9;
    background-color: #f3f3f3;
    font-size: 85%;
    border-radius: 2px 2px 0 0;
    box-shadow: inset 0 -1px 0px 0 rgba(0, 0, 0, 0.03);
}
.ui-tabs-nav li.first-child,
ul.tabs li.first-child {
    margin-left: 10px;
}
.ui-tabs-nav li.ui-tabs-selected,
ul.tabs li.selected-tab,
.ui-tabs-nav li.ui-tabs-active,
ul.tabs li.active-tab {
    border-bottom-color: #fff;
    background-color: #fff;
    box-shadow: none;
}
.ui-tabs-nav li.ui-state-hover {
    background-color: #fff;
}
.ui-tabs-nav li a,
ul.tabs li a {
    display: block;
    padding: 5px 10px;
    color: #1A1A1A;
    text-decoration: none;
    outline: 0;
}

.ui-datepicker {
    display: none;
    width: 200px;
    border: 1px solid #c0c6c9;
    background-color: #fff;
    padding: 2px;
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
    background-color: #0076BF;
}
.ui-datepicker .ui-datepicker-title {
    line-height: 22px;
    height: 22px;
    font-weight: bold;
    color: white;
    text-align: center;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 15px;
    height: 15px;
    margin-bottom: 2px;
    color: white;
    text-align: center;
}
.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}
.ui-datepicker .ui-datepicker-next {
    right: 2px;
}
.ui-datepicker table {
    width: 100%;
    margin: 0;
    font-size: 95%;
}
.ui-datepicker th {
    padding: 0.7em 0.5em 0;
    text-align: center;
    font-weight: bold;
    font-family: monospace;
}
.ui-datepicker thead .ui-datepicker-week-end {
    color: #666666;
}
.ui-datepicker thead span[title=sunday] {
    color: #f55;
}
.ui-datepicker span[title=saturday] {
    color: #3b83f3;
}
.ui-datepicker td {
    padding: 1px;
}
.ui-datepicker .ui-state-default {
    border: 1px solid #c0c6c9;
    background-color: #f3f3f3;
}
.ui-datepicker .ui-state-hover {
    border-color: #666666;
    background-color: #c0c6c9;
}
.ui-datepicker .ui-state-highlight {
    border-color: #ebd147;
    background-color: #fbf9ee;
}
.ui-datepicker a {
    display: block;
    padding: 0.2em;
    text-align: right;
    text-decoration: none;
    color: #333;
}
.ui-datepicker,
.ui-datepicker .ui-datepicker-header,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    border-radius: 2px;
}

#container {
    position: relative;
    height: auto;
    min-width: 980px;
    min-height: 100%;
}
#content {
    position: relative;
    height: auto;
    margin: 0;
    padding: 15px 15px 20px;
}
.has-menu-nav #content {
    margin-left: 168px;
}

#content-body {
    margin-top: 15px;
}
#menu {
    float: left;
    width: 150px;
    margin-left: -168px;
    margin-bottom: 100px;
}
#main {
    float: left;
    width: 100%;
    margin-bottom: 100px;
}
#footer {
    position: absolute;
    bottom: 0;
    clear: both;
    width: 100%;
}

.has-related-content #content-body {
    margin-right: 218px;
}
#dashboard.has-related-content #content-body,
.edit-screen #content-body {
    margin-right: 260px;
}
.has-related-content #main-content {
    float: left;
    clear: left;
}
#related-content {
    float: right;
    clear: right;
    width: 200px;
    margin-right: -218px;
}
#dashboard.has-related-content #related-content,
.edit-screen #related-content {
    width: 240px;
    margin-right: -258px;
}

.unit {
    float: left;
}

.size1of1 {
    float: none;
    width: 100%;
}
.size1of2 {
    width: 50%;
}
.size1of3 {
    width: 33.33333%;
}
.size2of3 {
    width: 66.66666%;
}
.size1of4 {
    width: 25%;
}
.size3of4 {
    width: 75%;
}
.size1of5 {
    width: 20%;
}
.size2of5 {
    width: 40%;
}
.size3of5 {
    width: 60%;
}
.size4of5 {
    width: 80%;
}

.mod {
    padding: 8px;
    position: relative;
}

#header {
    position: relative;
    height: 60px;
}

#header.has-notification {
    height: 90px;
}

#brand {
    height: 32px;
    background: #1A1A1A;
}
#brand img {
    visibility: hidden;
}
#brand a,
.preview-screen #brand {
    display: block;
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 10;
    width: 128px;
    height: 32px;
    text-decoration: none;
    background: #1A1A1A url(../images/logo/movable-type-logo-word.png) center 3px no-repeat;
    outline: 0;
}
.website #brand a,
.website.preview-screen #brand,
.system #brand a,
.system.preview-screen #brand {
    background-image: url(../images/logo/movable-type-logo-word.png);
}
#brand a:hover{
    opacity: 0.75;
}
#brand span.tips {
    display: block;
    position: absolute;
    top: 8px;
    left: 152px;
    color: #666666;
    text-transform: uppercase;
}

#utility-nav {
    position: absolute;
    color: #9ea1a3;
    top: 0;
    right: 0;
    height: 100%;
    font-size: 95%;
}
#utility-nav-list {
    margin-right: 15px;
}
#utility-nav li {
    display: inline-block;
    height: 32px;
    margin: 0;
    padding: 0;
    line-height: 32px;
}
#utility-nav a {
    padding: 0 0 0 0.5em;
    color: #c0c6c9;
    text-decoration: none;
}
#utility-nav a:hover {
    color: #f3f3f3;
    text-decoration: underline;
}
#utility-nav #user a {
    padding-right: 10px;
    border-right: 1px solid #666666;
}
#utility-nav #user a:hover {
    text-decoration: none;
}
#utility-nav #user a:hover span {
    text-decoration: underline;
}
#utility-nav #user .userpic {
    margin-top: -1px;
    border: 1px solid #c0c6c9;
    vertical-align: middle;
}
#utility-nav #help {
    margin-right: 0.5em;
}

#menu-bar {
    position: relative;
    height: 28px;
    width: 100%;
    background-color: #666666;
}
.website #menu-bar {
    background-color: #52A437;
}
.blog #menu-bar {
    background-color: #0076BF;
}

#selector-nav {
    position: relative;
    z-index: 500;
    height: 28px;
}
#selector-nav .toggle-button {
    background: transparent;
    position: absolute;
    top: 50%;
    left: 15px;
    width: 16px;
    height: 16px;
    border: none;
    margin: -9px 10px 0 0;
}
#selector-nav .toggle-button:hover{
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(0,0,0,0.1);
}
.scope {
    float: left;
    max-width: 100%;
    height: 28px;
    margin: 0;
    padding: 0 3px 0 0;
    color: #f3f3f3;
    font-size: 115%;
    overflow: hidden;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.blog .scope {
    max-width: 70%;
}
.scope.website {
    background-color: #52A437;
}
.blog .scope.website {
    max-width: 30%;
}
.scope.user,
.scope.system,
.scope.website {
    padding-left: 40px;
}
.scope.blog:before {
    content: '\00a0';
    float: left;
    width: 20px;
    height: 28px;
    background: transparent url(../images/selector-nav-separator_blog.png) left center no-repeat;
}
.scope a {
    outline: 0;
    color: #f3f3f3;
    text-decoration: none;
}
.scope a:hover {
    color: #f3f3f3;
    text-decoration: underline;
}
.scope-label {
    line-height: 28px;
    font-style: normal;
}

.scope-selector {
    display: none;
    position: absolute;
    top: 28px;
    left: 10px;
    min-width: 320px;
    max-width: 100%;
    border: 1px solid #adadad;
    border-top: 0;
    background-color: #f3f3f3;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.show-selector .scope-selector {
    display: block;
}
.scope-list,
.create-action {
    border-top: 1px solid #dcdddd;
}
.sticky-label.scope-level {
    margin: 0 0 5px;
    font-size: 100%;
    border-radius: 0 0 2px 0;
}
.scope-selector li {
    margin: 0;
    font-weight: normal;
}
.scope-selector a {
    display: block;
    padding: 5px 8px 5px 15px;
    line-height: 15px;
    overflow: hidden;
    color: #1A1A1A;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.scope-selector a:hover {
    text-decoration: none;
    background-color: #666666;
    color: #fff;
    opacity: 1;
    -ms-filter: 'alpha(opacity=100)';
    filter: alpha(opacity=100);

}
.scope-list.website a:hover {
    background-color: #52A437;
}
.scope-list.blog a:hover {
    background-color: #0076BF;
}
.parent {
    display: inline;
    margin-left: 5px;
    font-size: 85%;
    font-weight: normal;
}
.select-another {
    text-align: right;
}
.scope-selector div.last-child li.last-child a {
    border-radius: 0 0 3px 3px;
}

#menu-bar-nav {
    top: 0;
    right: 0;
    z-index: 500;
    height: 28px;
}
#menu-bar-nav a {
    outline: 0;
}

.fav-actions-nav {
    position: relative;
    top: 3px;
    z-index: 600;
    float: right;
}
.fav-actions-nav .action.button,
.fav-actions-nav .toggle-button {
  padding: 0 0.5em;
    border-color: #f8b500;
    background-color: #ffd900;
    background-image: -moz-linear-gradient(#ffd900, #f8b500);
    background-image: -webkit-linear-gradient(#ffd900, #f8b500);
    background-image: linear-gradient(#ffd900, #f8b500);
    color: #1A1A1A;
    text-shadow: none;
    box-shadow: 1px 1px 2px #666666;
}
.fav-actions-nav .action.button:hover,
.fav-actions-nav .toggle-button:hover {
    border-color: #c89932;
    background-color: #ffdd1a;
    background-image: -moz-linear-gradient(#ffdd1a, #ffbf13);
    background-image: -webkit-linear-gradient(#ffdd1a, #ffbf13);
    background-image: linear-gradient(#ffdd1a, #ffbf13);
}
.fav-actions-nav .action.button:active,
.fav-actions-nav.active .toggle-button {
    background-color: #c89932;
    background-image: -moz-linear-gradient(#ffbf13, #ffdd1a);
    background-image: -webkit-linear-gradient(#ffbf13, #ffdd1a);
    background-image: linear-gradient(#ffbf13, #ffdd1a);
}
.fav-actions {
    border: 1px solid #adadad;
    border-top: 0;
    background-color: #fbfbfb;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.fav-action {
    margin: 0;
}
.fav-action-link {
    display: block;
    padding: 5px;
    line-height: 15px;
    text-decoration: none;
}
.fav-action-link:hover {
    background-color: #f3f3f3;
    color: #1A1A1A;
}
.fav-action.last-child .fav-action-link {
    border-radius: 0 0 2px 2px;
}

#menu-bar-icons {
    float: right;
    height: 100%;
    margin: 0 15px 0 8px;
}
#menu-bar-icons li {
    float: left;
    margin: 0;
}
#menu-bar-icons li a {
    display: block;
    width: 30px;
    height: 28px;
    color: #f3f3f3;
    background-position: center;
    background-repeat: no-repeat;
}
#rebuild-site a {
    background-image: url(../images/nav-icon-publish.png);
}
#view-site a {
    background-image: url(../images/nav-icon-view.png);
}
#cms-search a {
    position: static;
    background-image: url(../images/search-submit.png);
    border: 0;
}
#menu-bar-icons li.active a,
#menu-bar-icons li a:hover {
    background-color: #333333;
}
#rebuild-site a span,
#view-site a span,
#cms-search a span,
#blog-dashboard a span {
    display: none;
}

#quick-search-form {
    position: absolute;
    top: 28px;
    right: 15px;
    z-index: 500;
    padding: 8px;
    border-top: 1px solid #c0c6c9;
    background-color: #9ea1a3;
    text-align: right;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
#basic-search .text,
#basic-search .button {
    margin: 0;
    box-shadow: none;
}
#basic-search .search-query {
    width: 200px;
}

#notification-indicator {
    height: 30px;
    background-color: #e6eae3;
    width: 100%;
}

#notification-indicator-content {
    padding: 0.5em 0.75em;
}

.menu-nav {
    position: relative;
    background-color: #ffffff;
}
.menu-nav em {
    font-style: normal;
}
.menu-nav li {
    margin: 0;
}
.menu-label {
    display: block;
    line-height: 17px;
}
.menu-link {
    display: block;
    text-decoration: none;
    outline: 0;
}
.menu-link:hover {
    color: #1A1A1A;
}

.top-menu-link {
    margin-right: 20px;
}
.current .top-menu-link {
    background-color: #e6e6e6;
    background-image: -moz-linear-gradient(#eeefef, #e6e6e6);
    background-image: -webkit-linear-gradient(#eeefef, #e6e6e6);
    background-image: linear-gradient(#eeefef, #e6e6e6);
    color: #1A1A1A;
    font-weight: bold;
    text-shadow: 0 1px 0 #f8fbf8;
}
.current .top-menu-link:hover {
    background-color: #eeefef;
    background-image: -moz-linear-gradient(#f7f7f7, #eeefef);
    background-image: -webkit-linear-gradient(#f7f7f7, #eeefef);
    background-image: linear-gradient(#f7f7f7, #eeefef);
}
.top-menu div {
    position: relative;
}
.top-menu .menu-label {
    padding: 5px;
}

.sub-menu {
    display: none;
    background-color: #fbfbfb;
    font-size: 90%;
}
.current .sub-menu {
    display: block;
}
.sub-menu-link:hover {
    background-color: #f3f3f3;
}
.sub-menu-link.current {
    background-color: #e3f3fc;
    color: #1A1A1A;
}
.sub-menu .menu-label {
    padding: 3px 5px;
}

.top-menu div,
.sub-menu {
    border: solid #c0c6c9;
    border-width: 1px 1px 0;
}
.top-menu.last-child div,
.top-menu.last-child .sub-menu {
    border-width: 1px;
}
.top-menu-open.last-child .sub-menu {
    border-top-width: 0;
}

.menu-nav,
.top-menu.first-child.last-child div {
    border-radius: 3px;
}
.top-menu.last-child div,
.top-menu.last-child .sub-menu {
    border-radius: 0 0 3px 3px;
}
.top-menu.last-child .toggle-button {
    border-radius: 0 0 3px 0;
}
.current.first-child .top-menu-link {
    border-radius: 3px 0 0 0;
}
.top-menu.first-child.last-child .toggle-button {
    border-radius: 0 3px 3px 0;
}
.top-menu.first-child div,
.top-menu-open.first-child.last-child div {
    border-radius: 3px 3px 0 0;
}
.top-menu.first-child .toggle-button,
.top-menu-open.first-child.last-child .toggle-button {
    border-radius: 0 3px 0 0;
}
.top-menu-open.last-child div,
.top-menu-open.last-child .toggle-button {
    border-radius: 0;
}

#content-header {
    position: relative;
}
.title.page {
    font-size: 150%;
    font-weight: normal;
}
.title.panel {
    margin-bottom: 10px;
}

.action-link-list {
    margin-top: 5px;
}
.action-link-list li {
    display: inline-block;
    margin-right: 10px;
}

.object-nav {
    position: absolute;
    top: 0;
    right: 0;
}
.object-nav span {
    color: #9ea1a3;
}
.object-nav li {
    display: inline-block;
    line-height: 1;
    margin: 0;
}
.object-nav li a,
.object-nav li span {
    display: inline-block;
    text-decoration: none;
    padding: 0.3em 0.5em;
    background-color: #f3f3f3;
    outline: 0;
    border-radius: 2px;
}
.object-nav li a:hover {
    text-decoration: underline;
}

#display_image-field {
    margin-top: 0;
}
#system_users-field .listing {
    margin-bottom: 10px;
}

.create-inline {
    display: none;
    margin: 10px 0;
    padding: 0.62em;
    border: 1px solid #c0c6c9;
    background-color: #f3f3f3;
}

.widget .actions-bar {
    margin-bottom: 0;
}
.display-options .actions-bar {
    margin-bottom: 8px;
}
.create-inline .actions-bar {
    margin-left: 14em;
}
.plugin-actions {
    float: right;
    margin: 3px 0 0;
}

.autosave-notification {
    margin-top: 1em;
}

.widget {
    margin-bottom: 15px;
    border: 1px solid #c0c6c9;
    background-color: #fff;
    border-radius: 3px;
}
.widget-header {
    position: relative;
    padding: 5px 8px;
    line-height: 15px;
    background-color: #e6e6e6;
    background-image: -moz-linear-gradient(#eeefef, #e6e6e6);
    background-image: -webkit-linear-gradient(#eeefef, #e6e6e6);
    background-image: linear-gradient(#eeefef, #e6e6e6);
    border-radius: 3px 3px 0 0;
}
.widget-no-header .widget-header {
    display: none;
}
.widget-header h2,
.widget-header h3,
.widget-header h4,
.widget-header h5,
.widget-header h6 {
    margin: 0;
    font-size: 100%;
    font-weight: bold;
}
.tabbed .widget-label h2,
.tabbed .widget-label h3,
.tabbed .widget-label h4,
.tabbed .widget-label h5,
.tabbed .widget-label h6 {
    display: none;
}
.widget-action {
    float: right;
}
.widget-close-link {
    display: inline-block;
    height: 15px;
    width: 15px;
    background: url(../images/widget/widget-icons.png) -33px 0 no-repeat;
}
.widget-close-link span {
    display: none;
}
.widget-content {
    padding: 10px;
    border-top: 1px solid #c0c6c9;
}
.tabbed .widget-content,
.widget-no-header .widget-content {
    border: 0;
}

.loaded-revision .status-widget {
    background-color: #f2f2b0;
}

.user .personal-stats-widget {
    clear: both;
    background-color: transparent;
}
.personal-stats-widget .user-pic {
    position: relative;
    width: 50px;
    height: 50px;
}
.personal-stats-widget .user-stats-upper {
    margin-left: 70px;
    min-height: 60px;
}
.personal-stats-widget .icon {
    padding-left: 15px;
    background-repeat: no-repeat;
}
.personal-stats-widget .user-stats-count-list li {
    float: left;
    width: 90px;
}
.personal-stats-widget .icon-entry {
    background-image: url(../images/nav_icons/mini/entries.gif);
}
.personal-stats-widget .icon-page {
    background-image: url(../images/nav_icons/mini/pages.gif);
}
.personal-stats-widget .icon-comment {
    background-image: url(../images/nav_icons/mini/comments.gif);
}
.personal-stats-widget .icon-draft {
    background-image: url(../images/nav_icons/mini/entry-new.gif);
}

#favorite_blogs .widget-header {
    padding-bottom: 0;
}
#favorite_blogs #favorite-blogs-tabs {
    margin: 0 -10px;
}
#favorite_blogs #favorite-blogs-tabs ul.tabs {
    margin-bottom: 0;
    width: 100%;
}
.favorite-blogs-widget .widget-content {
    padding-right: 0;
}
.blog-name {
    margin-top: 0;
    font-size: 115%;
}
.favorite-blogs-widget .blog-container {
    max-height: 455px;
    overflow: auto;
}
.favorite-blogs-widget .msg {
    margin-right: 10px;
}
.favorite-blogs-widget .blog-content {
    position: relative;
    margin: 0 10px 0 0;
    padding: 10px;
}
.favorite-blogs-widget .thumbnail {
    margin-bottom: 0;
}
.favorite-blogs-widget .blog-meta {
    margin-right: 120px;
    margin-left: 135px;
}
.favorite-blogs-widget .blog-name {
    margin-bottom: 3px;
}
.favorite-blogs-widget .blog-link {
    margin-bottom: 10px;
    overflow: hidden;
    font-size: 90%;
    text-overflow: ellipsis;
    white-space: pre;
}
.favorite-blogs-widget .blog-link a {
    color: #666666;
}
.favorite-blogs-widget .blog-description {
    margin-bottom: 10px;
    font-size: 90%;
}
.favorite-blogs-widget .blog-control li {
    display: inline;
    margin-left: 5px;
    padding-right: 5px;
    border-right: 1px solid #c0c6c9;
    font-size: 90%;
}
.favorite-blogs-widget .blog-control li.first-child {
    margin-left: 0;
}
.favorite-blogs-widget .blog-control li.last-child {
    padding: 0;
    border: 0;
}
.favorite-blogs-widget .blog-action {
    position: absolute;
    top: 10px;
    right: 10px;
}
.favorite-blogs-widget .blog-action a.button {
    width: 100px;
    margin: 0;
    text-align: center;
}
.favorite-blogs-widget .select-website,
.favorite-blogs-widget .select-blog {
    margin-top: 10px;
    text-align: right;
}
.favorite-blogs-widget .select-website a,
.favorite-blogs-widget .select-blog a {
    margin-right: 10px;
}

.blog-stats-widget {
    min-height: 480px;
}
#blog-stats-widget-tabs {
    margin: 0 -10px;
}
.blog-stats-widget-panel {
    overflow: hidden;
}
.blog-stats-widget embed {
    display: block;
    width: 540px;
    height: 120px;
    margin: 0 auto;
}
.blog-stats-widget .stats-summary {
    text-align: center;
}

.blog-stats-widget .tab-panel-header {
    margin: 20px 0 10px;
    font-weight: bold;
}

.object-list-widget .content {
    padding: 0 10px 10px;
    padding-left: 22px;
    background-repeat: no-repeat;
    background-position: 8px 16px;
    overflow: hidden;
}
.object-list-widget .content p {
    margin-bottom: .5em;
}
.object-list-widget .content .meta {
    color: #9ea1a3;
}
.blog-stats-widget-panel .view-all {
    margin-top: 10px;
    text-align: right;
}

#comment-panel .content {
    padding-top: 10px;
}
.blog-stats-widget .comment-status-publish {
    background-image: url(../images/status_icons/success.gif);
}
.blog-stats-widget .comment-status-pending {
    background-image: url(../images/status_icons/warning.gif);
}

.blog-stats-widget .entry-status-publish {
    background-image: url(../images/status_icons/success.gif);
}
.blog-stats-widget .entry-status-review {
    background-image: url(../images/status_icons/warning.gif);
}
.blog-stats-widget .entry-status-spam {
    background-image: url(../images/status_icons/warning.gif);
}
.blog-stats-widget .entry-status-draft {
    background-image: url(../images/status_icons/draft.gif);
}
.blog-stats-widget .entry-status-future {
    background-image: url(../images/status_icons/future.gif);
}

.blog-stats-widget #tag-cloud {
    margin: 10px 0;
}
.blog-stats-widget #tag-cloud-list li {
    display: inline;
    padding-right: 10px;
}
.blog-stats-widget .tag-1 {
    font-size: 24px;
}
.blog-stats-widget .tag-2 {
    font-size: 22px;
}
.blog-stats-widget .tag-3 {
    font-size: 20px;
}
.blog-stats-widget .tag-4 {
    font-size: 18px;
}
.blog-stats-widget .tag-5 {
    font-size: 16px;
}
.blog-stats-widget .tag-6 {
    font-size: 14px;
}

.blog-stats-widget .author {
    padding: 10px;
}
.blog-stats-widget .auth-icon {
    width: 12px;
    height: 12px;
}
.blog-stats-widget .author h4 {
    margin-top: 5px;
}

.site-stats-widget #widget-container {
    padding: 10px;
}
.site-stats-widget #select_blog_id {
    margin-left: 3px;
    max-width: 450px;
}
.site-stats-widget .up-left-column {
    float: left;
}
.site-stats-widget .up-right-column {
    float: right;
}
.site-stats-widget .down-column {
    height: 200px;
}
.site-stats-widget .clear {
    clear: both;
}
.site-stats-widget .stats-for {
    margin-bottom: 10px;
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-widget #news-widget-tabs {
    margin: 0 -10px 15px;
}
.news-widget .news-widget-list {
    display: none;
}
.most-recent-entry .excerpt {
    margin-top: 10px;
}

.include-from {
    display: block;
    margin-left: 20px;
    font-size: 85%;
}
.tmpl-label.error {
    color: #9e3d3f;
}

#asset-listing-table .asset-thumb a span {
    display: none;
}
#asset-listing-table .asset-thumbnail .asset-type-youtube .asset-thumb a img {
    margin-left: -25px;
    margin-top: -9px;
}
#asset-listing-table .status-missing .as-asset-type {
    background: url(../images/status_icons/warning.gif) no-repeat left center;
    padding-left: 15px;
}
.asset-image {
    background-image: url(../images/asset-image.gif);
}

#page-revison-listing,
#entry-revision-listing,
#template-revision-listing {
    margin-bottom: 0;
    padding: 0;
}
.list-revision-dialog .col.datetime {
    width: 25%;
}
.list-revision-dialog .col.status {
    width: 24%;
}
.list-revision-dialog .col.created-by {
    width: 18%;
}

.tmpl-type-name {
    margin-bottom: 3px;
}

.edit-comment #status-field,
.edit-ping #status-field,
.edit-author .user-status-disabled,
.edit-group .group-status-disabled {
    position: relative;
    padding: 10px 0 10px;
}
#comment-feedback-rating,
#ping-feedback-rating {
    margin-top: 10px;
}
#status-field .listing {
    margin-bottom: 0;
}

#text-field {
    position: static;
}
.editor-toolbar {
    padding: 8px;
    border: solid #c0c6c9;
    border-width: 1px 1px 0;
    background-color: #f3f3f3;
    border-radius: 3px 3px 0 0;
}
.editor-toolbar .button {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    border-radius: 0;
}
.editor {
    display: block;
    position: relative;
    padding: 0;
    border-top: 0;
    background-color: #fff;
}

#editor-content-iframe {
    border: 1px solid #adadad;
}

.editor textarea,
.editor iframe {
    width: 100%;
    min-width: 100%;
    height: 550px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0;
}
.editor textarea {
    padding: 8px;
    font-size: 14px;
    font-family: monospace;
    line-height: 1.3;
}

.edit-entry #title-field {
    padding: 0;
}
.edit-entry #permalink-field .field-content {
    color: #666666;
}

.sort-enabled {
    margin-bottom: 15px;
    padding: 0;
    border: 1px solid #c0c6c9;
    background-color: #fff;
    border-radius: 3px;
}
.sort-enabled:hover {
    border: 1px solid #adadad;
    border-top-color: #cfd0d0;
    border-left-color: #cfd0d0;
}
.sort-enabled .field-header {
    margin-bottom: 10px;
    padding: 5px 10px;
    border-bottom: 1px solid #fff;
    background-image: url(../images/sort_handle.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    border-radius: 3px 3px 0 0;
}
.sort-enabled .field-header:hover {
    cursor: move;
}
.sort-enabled .field-header label {
    margin-left: 20px;
}
.sort-enabled .field-content {
    padding: 0 10px 10px;
}
.placeholder {
    margin-bottom: 15px;
    border: 1px dashed #c0c6c9;
    background-color: #fbfbfb;
}

#template-editor-toolbar {
    text-align: right;
}
#textarea-enclosure {
    background-color: #fff;
    border-radius: 0 0 2px 2px;
}

.button.command-highlight-on,
.button.command-highlight-off {
    margin: 0;
    background-image: url(../images/buttons/toolbar/toggle-highlight.gif);
}
.button.command-highlight-on:hover,
.button.command-highlight-off:hover {
    background-image: url(../images/buttons/toolbar/toggle-highlight-hover.gif);
}
.button.command-highlight-on.active,
.button.command-highlight-off.active {
    background-image: url(../images/buttons/toolbar/toggle-highlight-active.gif);
}
.button.command-highlight-off,
.button.command-highlight-off:hover {
    width: 23px;
    border-left: 1px solid #c0c6c9;
    background-position: -22px 0;
}
.button.toolbar .button-label {
    display: none;
}

.CodeMirror-gutter-text pre {
    padding: 0.4em 0.3em 0 0;
    overflow: hidden;
    border-right: 1px solid #dcdddd;
    color: #a3a3a2;
    text-align: right;
    font-family: monospace;
}

#tags-field {
    position: relative;
    height: auto;
    overflow: visible;
}
#tags-suggestion {
    position: relative;
    top: -1px;
    left: 2px;
    width: 100%;
}
#tags_completion {
    display: none;
    min-width: 200px;
    max-width: 100%;
    position: absolute;
    z-index: 50;
    border: 1px solid #c0c6c9;
    background-color: #f3f3f3;
}
#tags_completion div {
    padding: 2px 5px;
}
#tags_completion .complete-highlight {
    color: #1A1A1A;
    background-color: #dcdddd;
}

#entry-status-widget {
    position: relative;
}
#entry-status-widget .status {
    position: absolute;
    top: 5px;
    right: 10px;
}

#edit-page #basename-field {
    word-break: break-all;
}

#edit-page #basename {
    width: 180px;
}

#entry-publishing-widget .save-action,
#entry-publishing-widget .preview-action {
    float: left;
    width: 107px;
}
#entry-publishing-widget .preview-action {
    float: right;
}
#entry-publishing-widget .actions-bar .button {
    width: 100%;
    margin: 0;
}
#entry-publishing-widget .delete-action {
    margin-top: 5px;
    text-align: right;
}
#entry-publishing-widget a.delete {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding-left: 17px;
    background: transparent url(../images/delete.gif) left bottom no-repeat;
    color: #666666;
}
#entry-publishing-widget a.delete:hover {
    background-position: left top;
    color: #9e3d3f;
}

#entry-publishing-widget .basename-text {
    word-wrap: break-word;
    word-break: break-all;
    display: inline-block;
}

.edit-entry .date-time-fields .post-date {
    width: 7em;
}
.edit-entry .date-time-fields .post-time {
    width: 5.5em;
}
.date-time-fields .scheduled {
    margin: 5px 0 0 0;
}

#category-field {
    margin: 0;
}
.category-selector {
    max-width: 600px;
    margin: 0 0 30px;
}
.edit-entry .category-selector {
    margin-bottom: 10px;
}

.category-selector a {
    display: inline-block;
    margin-right: 2px;
    text-decoration: none;
}
.category-selector-header {
    padding: 0 0 5px;
    text-align: right;
}
.category-selector-list {
    height: 120px;
    padding: 3px;
    border: 1px solid #c0c6c9;
    background: #fff;
    overflow: auto;
    overflow-x: hidden;
    clear: both;
}
.category-selector-list .list-item {
    clear: both;
    margin-bottom: 2px;
    padding: 1px 2px 1px 0;
}
.category-selector-list .list-item label {
    display: inline-block;
    margin-left: 5px;
    overflow: hidden;
    white-space: nowrap;
}

.category-selector-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 11px;
}
.category-selector-list::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border: 2px solid #fff;
    border-radius: 8px;
}
.category-selector-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.5);
}
.list-item-hover {
    background: #dcdddd;
}
.add-category-new-link {
    float: right;
    width: 9px;
    height: 9px;
    margin-top: 3px;
}
.list-item-hover .add-category-new-link {
    background: url(../images/status_icons/create.gif) no-repeat left center;
}
.add-category-save-link {
    width: 9px;
    height: 9px;
    margin-left: 4px;
    background: url(../images/status_icons/create.gif) no-repeat left center;
}
.add-category-cancel-link {
    width: 9px;
    height: 9px;
    margin-left: 4px;
    background: url(../images/status_icons/error.gif) no-repeat left center;
}
.add-category-new-parent-link {
    padding-left: 11px;
    background: url(../images/status_icons/create.gif) no-repeat left center;
}
.add-category-new-link span,
.add-category-save-link span,
.add-category-cancel-link span {
    display: none;
}

.add-category-form {
    white-space: nowrap;
}
.category-selector .add-category-form .add-category-input {
    width: 80%;
    margin: 3px 0 5px 2px;
}
.category-selector #add-category-form .add-category-input {
    margin-left: 0;
}
.add-category-checkbox {
    margin-left: 2px;
}
.category-toggle-link {
    position: absolute;
    top: 5px;
    right: 10px;
}
.edit-page .add-category-toggle-link {
    position: static;
}
#category-list strong {
    padding-left: 13px;
    background: url(../images/status_icons/primary.png) no-repeat 0 50%;
}
#category-list a {
    text-decoration: none;
}
#category-list a.primary {
    padding-left: 13px;
    color: #0076BF;
}
#category-list .focus a.primary {
    background: url(../images/status_icons/primary-disabled.png) no-repeat 0 50%;
}
#category-list .delete {
    padding-right: 9px;
}
#category-list .focus .delete {
    background: url(../images/status_icons/close-disabled.gif) no-repeat right center;
}
#category-list .focus .delete:hover {
    background: url(../images/status_icons/close.gif) no-repeat right center;
}
#category-list .delete span {
    display: none;
}
.add-new-category-link {
    float: right;
    padding-left: 11px;
    background: url(../images/status_icons/create.gif) no-repeat left center;
    position: relative;
    right: 2px;
    top: 9px;
}
.edit-page .add-new-category-link {
    float: none;
    position: static;
}

.change-folder-link {
    padding-left: 11px;
    background: url(../images/status_icons/create.gif) no-repeat left center;
}

#allow-feedback-field li {
    position: relative;
}
.feedback-count {
    position: absolute;
    right: 0;
}
.comments-link a,
.pings-link a {
    display: inline-block;
    min-height: 18px;
    padding-left: 20px;
    background-position: left center;
    background-repeat: no-repeat;
}
.comments-link a {
    background-image: url(../images/nav_icons/color/comments.gif);
}
.pings-link a {
    background-image: url(../images/nav_icons/color/trackbacks.gif);
}
#ping-urls-field {
    margin-bottom: 0;
}

#asset_container .widget-content-inner {
   padding: 0px 10px 10px;
}
.asset-list-header {
    margin-bottom: 5px;
    text-align: right;
}
.add-new-asset-link {
    padding-left: 11px;
    background: url(../images/status_icons/create.gif) no-repeat left center;
    text-decoration: none;
}
ul#asset-list li {
    position: relative;
    padding: 5px 0 0 18px;
    line-height: 1.2;
    background-repeat: no-repeat;
    background-position: left center;
}
ul#asset-list li#empty-asset-list {
    padding-left: 0;
}
ul#asset-list li a.asset-title {
    display: inline-block

repository: saahov/movabletype

repo_name: saahov/movabletype

gha_language: Perl