/* Font Icons */
.icon {
    display: inline-block;
    font-family: 'ios7-icon';
    -webkit-text-rendering: geometricPrecision;
    -moz-text-rendering: geometricPrecision;
    -ms-text-rendering: geometricPrecision;
    -o-text-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-style: normal;
    text-shadow: none;
}

[class*="sa-"] {
    background-position: center;
    background-repeat: no-repeat;
}

/* Left Menu */
[class*="sa-side-"] {
    width: 44px;
    height: 44px;
}

.sa-side-home { background-image: url(../img/icon/home.png); }
.sa-side-typography { background-image: url(../img/icon/typography.png); }
.sa-side-widget { background-image: url(../img/icon/widgets.png); }
.sa-side-table { background-image: url(../img/icon/table.png); }
.sa-side-form { background-image: url(../img/icon/form.png); }
.sa-side-ui { background-image: url(../img/icon/ui.png); }
.sa-side-folder { background-image: url(../img/icon/folder.png); }
.sa-side-calendar { background-image: url(../img/icon/calendar.png); }
.sa-side-page { background-image: url(../img/icon/pages.png); }
.sa-side-chart { background-image: url(../img/icon/chart.png); }
.sa-side-photos { background-image: url(../img/icon/photos.png); }

/* Top Menu */
[class*="sa-top-"] {
    width: 40px;
    height: 48px;
    float: left;
}
.sa-top-message { background-image: url(../img/icon/message.png); }
.sa-top-updates { background-image: url(../img/icon/updates.png); }

/* Editor */
[class*="editor-"] {
   width: 13px;
   height: 22px;
   background-position: center;
   background-repeat: no-repeat;
   float: left;
}
.editor-text { background-image: url(../img/editor/text.png); }
.editor-bold { background-image: url(../img/editor/bold.png); }
.editor-italic { background-image: url(../img/editor/italic.png); }
.editor-underline { background-image: url(../img/editor/underline.png); }
.editor-unstyle { background-image: url(../img/editor/unstyle.png); }
.editor-unlist { background-image: url(../img/editor/unlist.png); }
.editor-orderlist { background-image: url(../img/editor/orderlist.png); }
.editor-align { background-image: url(../img/editor/align.png); }
.editor-line-height { background-image: url(../img/editor/line-height.png); }
.editor-table { background-image: url(../img/editor/table.png); }
.editor-link { background-image: url(../img/editor/link.png); }
.editor-picture { background-image: url(../img/editor/picture.png); }
.editor-video { background-image: url(../img/editor/video.png); }
.editor-full-screen { background-image: url(../img/editor/full-screen.png); }
.editor-code { background-image: url(../img/editor/code.png); }
.editor-help { background-image: url(../img/editor/help.png); }
.editor-font { background-image: url(../img/editor/font.png); }
.editor-heading { background-image: url(../img/editor/heading.png); }

/* List Icons */
[class*="sa-list-"] {
    display: inline-block;
    height: 21px;
    width: 21px;
    background-position: center;
    background-repeat: no-repeat;
}

.sa-list-add { background-image: url(../img/icon/add.png); }
.sa-list-refresh { background-image: url(../img/icon/refresh.png); }
.sa-list-move { background-image: url(../img/icon/move.png); }
.sa-list-delete { background-image: url(../img/icon/delete.png); }
.sa-list-back { background-image: url(../img/icon/back.png); }
.sa-list-forwad { background-image: url(../img/icon/forwad.png); }
.sa-list-day { background-image: url(../img/icon/day.png); }
.sa-list-week { background-image: url(../img/icon/week.png); }
.sa-list-month { background-image: url(../img/icon/month.png); }
.sa-list-spam { background-image: url(../img/icon/spam.png); }
.sa-list-archive { background-image: url(../img/icon/archive.png); }
.sa-list-list { background-image: url(../img/icon/list-view.png); }
.sa-list-vcard { background-image: url(../img/png/24/vcard.png); }
.sa-list-comment { background-image: url(../img/png/24/comments.png); }
.sa-list-secret { background-image: url(../img/png/24/user-secret.png); }
.sa-list-cc { background-image: url(../img/png/24/credit-card.png); }
.sa-list-cog { background-image: url(../img/png/24/cog.png); }
.sa-list-sign-out { background-image: url(../img/png/24/sign-out.png); }
.sa-list-sign-in { background-image: url(../img/png/24/sign-in.png); }
.sa-list-arrow-left { background-image: url(../img/png/24/arrow-left.png); }
.sa-list-arrow-right { background-image: url(../img/png/24/arrow-right.png); }
.sa-list-database { background-image: url(../img/png/24/database.png); }


/* Others */
#menu-toggle { background-image: url(../img/icon/menu.png); }

/* Form */
.sa-plus {
    width: 13px;
    height: 13px;
    background-image: url(../img/icon/plus-sm.png);
    display: inline-block;
}

/* For Higher DPI */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (   min--moz-device-pixel-ratio: 1.25),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 1.25),
only screen and (                min-resolution: 120dpi),
only screen and (                min-resolution: 1.25dppx) {

    /* Left Menu */
    .sa-side-typography, .sa-side-widget, .sa-side-table, .sa-side-ui, .sa-side-folder { background-size: 23px 21px; }

    .sa-side-home { background-image: url(../img/icon/home%402x.png); background-size: 25px 25px; }
    .sa-side-typography { background-image: url(../img/icon/typography%402x.png); }
    .sa-side-widget { background-image: url(../img/icon/widgets%402x.png); }
    .sa-side-table { background-image: url(../img/icon/table%402x.png); }
    .sa-side-form { background-image: url(../img/icon/form%402x.png); background-size: 19px 25px; }
    .sa-side-ui { background-image: url(../img/icon/ui%402x.png);  }
    .sa-side-folder { background-image: url(../img/icon/folder%402x.png); }
    .sa-side-calendar { background-image: url(../img/icon/calendar%402x.png); background-size: 23px 23px; }
    .sa-side-page { background-image: url(../img/icon/pages%402x.png); background-size: 25px 21px; }
    .sa-side-chart { background-image: url(../img/icon/chart%402x.png); background-size: 24px 19px; }
    .sa-side-photos { background-image: url(../img/icon/photos%402x.png); background-size: 23px 19px; }
    
    /* Top Menu */
    .sa-top-message { background-image: url(../img/icon/message%402x.png); background-size: 25px 17px; }
    .sa-top-updates { background-image: url(../img/icon/updates%402x.png); background-size: 25px 25px; }

    /* Editor */
    .editor-text { background-image: url(../img/editor/text%402x.png); background-size: 11px 13px; }
    .editor-bold { background-image: url(../img/editor/bold%402x.png); background-size:  10px 13px;}
    .editor-italic { background-image: url(../img/editor/italic%402x.png); background-size: 5px 13px; }
    .editor-underline { background-image: url(../img/editor/underline%402x.png); background-size: 10px 13px; }
    .editor-unstyle { background-image: url(../img/editor/unstyle%402x.png); background-size: 11px 13px; }
    .editor-unlist { background-image: url(../img/editor/unlist%402x.png); background-size: 13px 13px; }
    .editor-orderlist { background-image: url(../img/editor/orderlist%402x.png); background-size: 13px 13px; }
    .editor-align { background-image: url(../img/editor/align%402x.png); background-size: 13px 13px; }
    .editor-line-height { background-image: url(../img/editor/line-height%402x.png); background-size: 11px 13px; }
    .editor-table { background-image: url(../img/editor/table%402x.png); background-size: 13px 13px; }
    .editor-link { background-image: url(../img/editor/link%402x.png); background-size: 9px 13px; }
    .editor-picture { background-image: url(../img/editor/picture%402x.png); background-size: 13px 13px; }
    .editor-video { background-image: url(../img/editor/video%402x.png); background-size: 13px 13px; }
    .editor-full-screen { background-image: url(../img/editor/full-screen%402x.png); background-size: 13px 13px; }
    .editor-code { background-image: url(../img/editor/code%402x.png); background-size: 10px 13px;}
    .editor-help { background-image: url(../img/editor/help%402x.png); background-size: 10px 13px; }
    .editor-font { background-image: url(../img/editor/font%402x.png); background-size: 10px 13px; }
    .editor-heading { background-image: url(../img/editor/heading%402x.png); background-size: 10px 13px; }

    /* List Icons */    
    .sa-list-add { background-image: url(../img/icon/add%402x.png); background-size: 19px 19px;  }
    .sa-list-refresh { background-image: url(../img/icon/refresh%402x.png); background-size: 18px 19px; }
    .sa-list-move { background-image: url(../img/icon/move%402x.png); background-size: 19px 19px; }
    .sa-list-delete { background-image: url(../img/icon/delete%402x.png); background-size: 15px 19px; }
    .sa-list-back { background-image: url(../img/icon/back%402x.png); background-size: 12px 21px; }
    .sa-list-forwad { background-image: url(../img/icon/forwad%402x.png); background-size: 12px 21px; }
    .sa-list-day { background-image: url(../img/icon/day%402x.png); background-size: 21px 21px; }
    .sa-list-week { background-image: url(../img/icon/week%402x.png); background-size: 21px 21px; }
    .sa-list-month { background-image: url(../img/icon/month%402x.png); background-size: 21px 21px; }
    .sa-list-spam { background-image: url(../img/icon/spam%402x.png); background-size: 17px 17px; }
    .sa-list-archive { background-image: url(../img/icon/archive%402x.png); background-size: 17px 17px; }

    /* Form */
    .sa-plus { background-image: url(../img/icon/plus-sm%402x.png); background-size: 13px 13px; }
    
    /* Others */
    #menu-toggle { background-image: url(../img/icon/menu%402x.png); background-size: 18px 13px; }
    .main-search { background-image: url(../img/icon/search%402x.png); background-size: 25px 25px; }
    .tile-config > .tile-menu { background-image: url(../img/icon/tile-actions%402x.png); background-size: 13px 3px; }
    .message-search:not(:focus) { background-image: url(../img/icon/search%402x.png); background-size: 25px 25px; }
}