/* # Icons.css

## Basic Usage
icons.css has two main type of classes. One is to set background image, another is to allocate space for icon. The both types are usually used in combination.

```
<p class="icon-delete icon-left-wide">Lorem ipsum dolor sit amet</p>
```

## Use Icon as a Aciton Button

If you want to use icon as a button, use .action-icon and .icon16.

```
<a class="icon-delete icon16 action-icon">Delete</a>
<a class="icon-plus icon16 action-icon">Plus</a>
<a class="icon-minus icon16 action-icon">Minus</a>
<a class="icon-remove icon16 action-icon">Remove</a>
```

## Icon Positioning

These classes are to allocate space(padding) and to set position for icon

```
<p><span class="icon-delete icon-mini-left">Lorem ipsum dolor sit amet</span></p>
<p><span class="icon-delete icon-left">Lorem ipsum dolor sit amet</span></p>
<p><span class="icon-delete icon-left-wide">Lorem ipsum dolor sit amet</span></p>
<p><span class="icon-delete icon-left-xwide">Lorem ipsum dolor sit amet</span></p>

<p><span class="icon-delete icon-mini-right">Lorem ipsum dolor sit amet</span></p>
<p><span class="icon-delete icon-right">Lorem ipsum dolor sit amet</span></p>
<p><span class="icon-delete icon-right-wide">Lorem ipsum dolor sit amet</span></p>
<p><span class="icon-delete icon-right-xwide">Lorem ipsum dolor sit amet</span></p>
```

## Standard Icons

14 x 14 pixel icon

```
<p class="icon-delete icon-left-xwide">Delete (.icon-delete)</p>
<p class="icon-plus icon-left-xwide">Plus (.icon-plus)</p>
<p class="icon-minus icon-left-xwide">Minus (.icon-minus)</p>
<p class="icon-remove icon-left-xwide">Remove (.icon-remove)</p>
<p class="icon-plugins icon-left-xwide">Plugin (.icon-plugins)</p>
<p class="icon-plugin-action icon-left-xwide">Plugin Action (.icon-plugin-action)</p>
<p class="icon-search icon-left-xwide">Seach (.icon-search)</p>
<p class="icon-trackbacks icon-left-xwide">Trackbacks (.icon-trackbacks)</p>
<p class="icon-comments icon-left-xwide">Comments (.icon-comments)</p>
<p class="icon-log icon-left-xwide">Log (.icon-log)</p>
<p class="icon-import icon-left-xwide">Import (.icon-import)</p>
<p class="icon-settings icon-left-xwide">Settings (.icon-settings)</p>
<p class="icon-entry icon-left-xwide">Entry (.icon-entry)</p>
<p class="icon-page icon-left-xwide">Page (.icon-page)</p>
<p class="icon-user icon-left-xwide">User (.icon-user)</p>
<p class="icon-group icon-left-xwide">Group (.icon-group)</p>
<p class="icon-align-none icon-left-xwide">Align None (.icon-align-none)</p>
<p class="icon-align-left icon-left-xwide">Align Left (.icon-align-left)</p>
<p class="icon-align-center icon-left-xwide">Align Center (.icon-align-center)</p>
<p class="icon-align-right icon-left-xwide">Align Right (.icon-align-right)</p>
<p class="icon-action icon-left-xwide">Action (.icon-action)</p>
```

## Status Icons

9 x 9 pixel icon. They are used as an inline icon with text.

```
<p class="icon-batch icon-left-wide">Batch (.icon-batch)</p>
<p class="icon-feed icon-left-wide">Feed (.icon-feed)</p>
<p class="icon-feed-disabled icon-left-wide">Feed Disabled (.icon-feed-disabled)</p>
<p class="icon-download icon-left-wide">Download (.icon-download)</p>
<p class="icon-move icon-left-wide">Move (.icon-move)</p>
<p class="icon-create icon-left-wide">Create (.icon-create)</p>
<p class="icon-create-disabled icon-left-wide">Create Disabled (.icon-create-disabled)</p>
<p class="icon-success icon-left-wide">Success (.icon-success)</p>
<p class="icon-error icon-left-wide">Error (.icon-error)</p>
<p class="icon-neutral icon-left-wide">Neutral (.icon-nautral)</p>
<p class="icon-warning icon-left-wide">Warning (.icon-warning)</p>
<p class="icon-trusted icon-left-wide">Trusted User (.icon-trusted)</p>
<p class="icon-banned icon-left-wide">Banned User (.icon-banned)</p>
<p class="icon-authenticated icon-left-wide">Authenticated User (.icon-authenticated)</p>
<p class="icon-related icon-left-wide">Related Item (.icon-related)</p>
<p class="icon-publish icon-left-wide">Publish Status (.icon-publish)</p>
<p class="icon-draft icon-left-wide">Draft Status (.icon-draft)</p>
<p class="icon-future icon-left-wide">Futer Status (.icon-spam)</p>
<p class="icon-pending icon-left-wide">Pending Status (.icon-pending)</p>
<p class="icon-share icon-left-wide">Share (.icon-share)</p>
<p class="icon-spam icon-left-wide">Spam (.icon-spam)</p>
```

## Mini Icons

another 9 x 9 pixel icon.

```
<p><span class="icon-mini-view-site icon-left-wide">View Site (.icon-mini-view-site)</span></p>
<p><span class="icon-mini-settings icon-left-wide">Settings (.icon-mini-settings)</span></p>
<p><span class="icon-mini-delete icon-left-wide">Delete (.icon-mini-delete)</span></p>
<p><span class="icon-mini-rebuild icon-left-wide">Rebuild (.icon-mini-rebuild)</span></p>
<p><span class="icon-mini-dashboard icon-left-wide">Dashboard (.icon-mini-dashboard)</span></p>
<p><span class="icon-mini-templates icon-left-wide">Templates (.icon-mini-templates)</span></p>
<p><span class="icon-mini-trackbacks icon-left-wide">Trackbacks (.icon-mini-trackbacks)</span></p>
<p><span class="icon-mini-comments icon-left-wide">Comments (.icon-mini-comments)</span></p>
<p><span class="icon-mini-docs icon-left-wide">Document (.icon-mini-docs)</span></p>
<p><span class="icon-mini-entries icon-left-wide">Entries (.icon-mini-entries)</span></p>
<p><span class="icon-mini-new-entry icon-left-wide">Entry (.icon-mini-new-entry)</span></p>
<p><span class="icon-mini-pages icon-left-wide">Pages (.icon-mini-pages)</span></p>
<p><span class="icon-mini-new-page icon-left-wide">New Page (.icon-mini-new-page)</span></p>
<p><span class="icon-mini-assets icon-left-wide">Asset (.icon-mini-assets)</span></p>
<p><span class="icon-mini-new-asset icon-left-wide">New Asset (.icon-mini-new-asset)</span></p>
<p class="action-link-list"><span class="icon-action icon-left-wide">Action (.action-link-list .icon-action)</span></p>
```

## Edit Template Icons

Some icons are used inside .edit-template class only

```
<div class="edit-template">
<p><span class="icon-spinner icon-left-xwide">Spinner (.icon-spinner)</span></p>
<p class="active"><span class="icon-spinner icon-left-xwide">Spinner on Active (.active .icon-spinner)</span></p>
<p><span class="global-tmpl icon-left-xwide">Global Template (.global-tmpl)</span></p>
<p><span class="global-tmpl error icon-left-xwide">Global Template with Error (.global-tmpl.error)</span></p>
<p><span class="website-tmpl icon-left-xwide">Web Site Template (.website-tmpl)</span></p>
<p><span class="website-tmpl error icon-left-xwide">Web Site Template with Error (.website-tmpl.error)</span></p>
<p><span class="blog-tmpl icon-left-xwide">Blog Template (.blog-tmpl)</span></p>
<p><span class="blog-tmpl error icon-left-xwide">Blog Template with Error (.blog-tmpl.error)</span></p>
<p><span class="error-tmpl error icon-left-xwide">Error Template (.error-tmpl.error)</span></p>
</div>
```
*/

.icon16 {
    display: inline-block;
    width: 16px;
    height: 0px;
    padding-top: 16px;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-delete {
    background-image: url(../images/status_icons/icon-delete.png);
}
.icon-plus {
    background-image: url(../images/status_icons/icon-plus.png);
}
.icon-minus {
    background-image: url(../images/status_icons/icon-minus.png);
}
.icon-remove {
    background-image: url(../images/status_icons/icon-remove.png);
}

.action-icon {
    border-radius: 8px;
    vertical-align: middle;
}
.action-icon:hover {
    background-color: #c0c6c9;
}

.icon-left {
    padding-left: 14px;
    background-repeat: no-repeat;
    background-position: left center;
}
.icon-right {
    padding-right: 14px;
    background-repeat: no-repeat;
    background-position: right center;
}
.icon-mini-left {
    padding-left: 12px;
    background-repeat: no-repeat;
    background-position: left center;
}
.icon-mini-right {
    padding-right: 12px;
    background-repeat: no-repeat;
    background-position: right center;
}
.icon-left-wide {
    padding-left: 18px;
    background-repeat: no-repeat;
    background-position: left center;
}
.icon-right-wide {
    padding-right: 18px;
    background-repeat: no-repeat;
    background-position: right center;
}
.icon-left-xwide {
    padding-left: 22px;
    background-repeat: no-repeat;
    background-position: left center;
}
.icon-right-xwide {
    padding-right: 22px;
    background-repeat: no-repeat;
    background-position: right center;
}

.addnew { background-image: url(../images/status_icons/create.gif); }
.icon-batch { background-image: url(../images/status_icons/batch.gif); }
.icon-feed { background-image: url(../images/status_icons/feed.gif); }
.icon-download { background-image: url(../images/status_icons/download.gif); }
.icon-feed-disabled { background-image: url(../images/status_icons/feed-disabled.gif); }
.icon-move { background-image: url(../images/status_icons/move.gif); }
.icon-create { background-image: url(../images/status_icons/create.gif); }
.icon-create-disabled { background-image: url(../images/status_icons/create-disabled.gif); }
.icon-error { background-image: url(../images/status_icons/error.gif); }
.icon-success { background-image: url(../images/status_icons/success.gif); }
.icon-neutral { background-image: url(../images/status_icons/neutral.gif); }
.icon-warning { background-image: url(../images/status_icons/warning.gif); }
.icon-trusted { background-image: url(../images/status_icons/trusted.gif); }
.icon-banned { background-image: url(../images/status_icons/banned.gif); }
.icon-authenticated { background-image: url(../images/status_icons/authenticated.gif); }
.icon-related { background-image: url(../images/status_icons/related.gif); }
.icon-publish { background-image: url(../images/status_icons/success.gif); }
.icon-draft { background-image: url(../images/status_icons/draft.gif); }
.icon-future { background-image: url(../images/status_icons/future.gif); }
.icon-pending { background-image: url(../images/status_icons/warning.gif); }
.icon-share { background-image: url(../images/status_icons/share.gif);}
.icon-spam { background-image: url(../images/status_icons/warning.gif); }
.icon-unpublish { background-image: url(../images/status_icons/unpublished.gif); }


.icon-spinner { background-image: url(../images/arrow/spinner-right.png); }
.active .icon-spinner { background-image: url(../images/arrow/spinner-bottom.png); }

.edit-template .global-tmpl { background-image: url(../images/template/global.png); }
.edit-template .website-tmpl { background-image: url(../images/template/website.png); }
.edit-template .blog-tmpl { background-image: url(../images/template/blog.png); }
.edit-template .global-tmpl.error { background-image: url(../images/template/global-error.png); }
.edit-template .error-tmpl.error { background-image: url(../images/template/global-error.png); }
.edit-template .website-tmpl.error { background-image: url(../images/template/website-error.png); }
.edit-template .blog-tmpl.error { background-image: url(../images/template/blog-error.png); }

.edit-entry .stats-widget .icon-success { background-image: url(../images/status_icons/success-k.gif); }
.edit-entry .stats-widget .icon-view { background-image: url(../images/status_icons/view-k.gif); }
.edit-entry .stats-widget .icon-draft { background-image: url(../images/status_icons/draft-k.gif); }
.edit-entry .stats-widget .icon-future { background-image: url(../images/status_icons/future-k.gif); }
.edit-entry .stats-widget .icon-pending { background-image: url(../images/status_icons/warning-k.gif); }
.edit-entry .stats-widget .icon-spam { background-image: url(../images/status_icons/warning-k.gif); }

.icon-plugins { background-image: url(../images/nav_icons/color/plugins.gif); }
.icon-search { background-image: url(../images/nav_icons/color/search.gif); }
.icon-trackbacks { background-image: url(../images/nav_icons/color/trackbacks.gif); }
.icon-comments { background-image: url(../images/nav_icons/color/comments.gif); }
.icon-log { background-image: url(../images/nav_icons/color/log.gif); }
.icon-import { background-image: url(../images/nav_icons/color/import.gif); }
.icon-settings { background-image: url(../images/nav_icons/color/settings.gif); }
.icon-entry { background-image: url(../images/nav_icons/color/entry.gif); }
.icon-page { background-image: url(../images/nav_icons/color/page.gif); }

.icon-user { background-image: url(../images/nav_icons/color/user.gif); }
.icon-group { background-image: url(../images/nav_icons/color/group.gif); }

.icon-align { background-position: left top; }
.icon-align-none { background-image: url(../images/align_none.gif); }
.icon-align-left { background-image: url(../images/align_left.gif); }
.icon-align-center { background-image: url(../images/align_center.gif); }
.icon-align-right { background-image: url(../images/align_right.gif); }

.icon-plugin-action {
    background-image: url(../images/plugin-bullet.gif);
}
.icon-action {
    background-image: url(../images/action-bullet.gif);
}
.action-link-list .icon-action {
    background-image: url(../images/status_icons/action.png);
}


.icon-mini-view-site    { background-image: url(../images/nav_icons/mini/view-site.gif); }
.icon-mini-settings     { background-image: url(../images/nav_icons/mini/settings.gif); }
.icon-mini-delete       { background-image: url(../images/nav_icons/mini/delete.gif); }
.icon-mini-rebuild      { background-image: url(../images/nav_icons/mini/rebuild.gif); }
.icon-mini-dashboard    { background-image: url(../images/nav_icons/mini/dashboard.gif); }
.icon-mini-templates    { background-image: url(../images/nav_icons/mini/templates.gif); }
.icon-mini-comments     { background-image: url(../images/nav_icons/mini/comments.gif); }
.icon-mini-docs         { background-image: url(../images/nav_icons/mini/docs.gif); }
.icon-mini-trackbacks   { background-image: url(../images/nav_icons/mini/trackbacks.gif); }
.icon-mini-entries      { background-image: url(../images/nav_icons/mini/entries.gif); }
.icon-mini-new-entry    { background-image: url(../images/nav_icons/mini/entry-new.gif); }
.icon-mini-pages        { background-image: url(../images/nav_icons/mini/pages.gif); }
.icon-mini-new-page     { background-image: url(../images/nav_icons/mini/page-new.gif); }
.icon-mini-assets       { background-image: url(../images/nav_icons/mini/assets.png); }
.icon-mini-new-asset    { background-image: url(../images/nav_icons/mini/asset-new.gif); }
.icon-mini-delete span  { display: none; }

.si img,
.view img  {
    background-repeat: no-repeat;
    background-position: center;
}

.listing .status-publish img { background-image: url(../images/status_icons/success.gif); }
.listing .status-draft img { background-image: url(../images/status_icons/draft.gif); }
.listing .status-future img { background-image: url(../images/status_icons/future.gif); }
.listing .status-pending img { background-image: url(../images/status_icons/warning.gif); }
.listing .status-spam img { background-image: url(../images/status_icons/warning.gif); }
.listing .status-unpublish img { background-image: url(../images/status_icons/unpublished.gif); }
.listing .status-review img { background-image: url(../images/status_icons/warning.gif); }
.listing .status-trusted img { background-image: url(../images/status_icons/trusted.gif); }
.listing .status-banned img { background-image: url(../images/status_icons/banned.gif); }
.listing .status-authenticated img { background-image: url(../images/status_icons/authenticated.gif); }
.listing .user-status-enabled img { background-image: url(../images/status_icons/user-enabled.gif); }
.listing .user-status-disabled img { background-image: url(../images/status_icons/user-disabled.gif); }
.listing .user-status-pending img { background-image: url(../images/status_icons/user-pending.gif); }
.listing .group-status-enabled img { background-image: url(../images/status_icons/group-enabled.gif); }
.listing .group-status-disabled img { background-image: url(../images/status_icons/group-disabled.gif); }
.listing .role-status-active img { background-image: url(../images/status_icons/role-active.gif); }
.listing .role-status-inactive img { background-image: url(../images/status_icons/role-inactive.gif); }
.listing .status-email img { background-image: url(../images/status_icons/email.gif); }
.listing .status-link img { background-image: url(../images/status_icons/link.gif); }
.listing .status-view img { background-image: url(../images/status_icons/view.gif); }
.listing .status-unlinked img { background-image: url(../images/status_icons/neutral.gif); }
.listing .status-linked img { background-image: url(../images/status_icons/success.gif); }
.listing .status-uncached img { background-image: url(../images/status_icons/neutral.gif); }
.listing .status-cached img { background-image: url(../images/status_icons/success.gif); }
.listing .status-dynamic img { background-image: url(../images/status_icons/success.gif); }
.listing .status-static img { background-image: url(../images/status_icons/neutral.gif); }
.listing .status-rebuild img { background-image: url(../images/status_icons/success.gif); }
.listing .status-norebuild img { background-image: url(../images/status_icons/neutral.gif); }
.listing .status-enabled img { background-image: url(../images/status_icons/success.gif); }
.listing .status-disabled img { background-image: url(../images/status_icons/neutral.gif); }
.listing .status-missing img { background-image: url(../images/status_icons/warning.gif); }

.asset-icon-doc { background-image: url(../images/filetype_icons/doc_lg.gif); }
.asset-icon-eps { background-image: url(../images/filetype_icons/eps_lg.gif); }
.asset-icon-fla { background-image: url(../images/filetype_icons/fla_lg.gif); }
.asset-icon-gif { background-image: url(../images/filetype_icons/gif_lg.gif); }
.asset-icon-jpg { background-image: url(../images/filetype_icons/jpg_lg.gif); }
.asset-icon-mp3 { background-image: url(../images/filetype_icons/mp3_lg.gif); }
.asset-icon-mpg { background-image: url(../images/filetype_icons/mpeg_lg.gif); }
.asset-icon-pdf { background-image: url(../images/filetype_icons/pdf_lg.gif); }
.asset-icon-png { background-image: url(../images/filetype_icons/gif_lg.gif); }
.asset-icon-ppt { background-image: url(../images/filetype_icons/ppt_lg.gif); }
.asset-icon-psd { background-image: url(../images/filetype_icons/psd_lg.gif); }
.asset-icon-txt { background-image: url(../images/filetype_icons/txt_lg.gif); }
.asset-icon-xls { background-image: url(../images/filetype_icons/xls_lg.gif); }
.asset-icon-zip { background-image: url(../images/filetype_icons/zip_lg.gif); }

.listing .thumbnail img {
    background: none;
}
