/* Base class for material items*/
.material {

}

.material .icon {
    display: inline-block;
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    width: 24px;
    height: 24px;
}

/* Selection-related styling (e.g. checkboxes) */
.material.selection {
    display: inline-block;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.material.selection.disabled {
    cursor: default;
}

.material.selection .icon {
    margin: 12px;
}

.material.selection.focused,
.material.selection.pressed {
    background: #d1d1d1;
    border-radius: 50%;
}

/* Mini Selection button overrides */
.material.selection.mini {
    width: 40px;
    height: 40px;
    margin: 4px;
}

.material.selection.mini .icon {
    margin: 8px;
}

/* Action button-related styling */
.material.actionButton {
    display: inline-block;
    width: 56px;
    height: 56px;
    cursor: pointer;
}

.material.actionButton.disabled {
    cursor: default;
}

.material.actionButton .icon {
    margin: 16px;
}

.material.actionButton.focused,
.material.actionButton.pressed {
    background: #d1d1d1;
    border-radius: 50%;
}

/* Mini Action button overrides */
.material.actionButton.mini {
    width: 40px;
    height: 40px;
    margin: 4px;
}

.material.actionButton.mini .icon {
    margin: 8px;
}

/* Dropdown button-related styling */
.material.dropButton {
    display: inline-block;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.material.dropButton.disabled {
    cursor: default;
}

.material.dropButton .icon {
    margin: 12px;
}

.material.dropButton.focused,
.material.dropButton.pressed {
    background: #d1d1d1;
    border-radius: 50%;
}

/* Mini Selection button overrides */
.material.dropButton.mini {
    width: 40px;
    height: 40px;
    margin: 4px;
}

.material.dropButton.mini .icon {
    margin: 8px;
}

.material .icon.pause {
    background-position: 0 0;
}

.material.hover .icon.pause {
    background-position: -24px 0;
}

.material.focused .icon.pause {
    background-position: -48px 0;
}

.material.pressed .icon.pause {
    background-position: -72px 0;
}

.material.disabled .icon.pause {
    background-position: -96px 0;
}

.material.active .icon.pause {
    background-position: -120px 0;
}

.material .icon.play {
    background-position: 0 -24px;
}

.material.hover .icon.play {
    background-position: -24px -24px;
}

.material.focused .icon.play {
    background-position: -48px -24px;
}

.material.pressed .icon.play {
    background-position: -72px -24px;
}

.material.disabled .icon.play {
    background-position: -96px -24px;
}

.material.active .icon.play {
    background-position: -120px -24px;
}

.material .icon.cancel {
    background-position: 0 -48px;
}

.material.hover .icon.cancel {
    background-position: -24px -48px;
}

.material.focused .icon.cancel {
    background-position: -48px -48px;
}

.material.pressed .icon.cancel {
    background-position: -72px -48px;
}

.material.disabled .icon.cancel {
    background-position: -96px -48px;
}

.material.active .icon.cancel {
    background-position: -120px -48px;
}

.material .icon.arrow-l {
    background-position: 0 -72px;
}

.material.hover .icon.arrow-l {
    background-position: -24px -72px;
}

.material.focused .icon.arrow-l {
    background-position: -48px -72px;
}

.material.pressed .icon.arrow-l {
    background-position: -72px -72px;
}

.material.disabled .icon.arrow-l {
    background-position: -96px -72px;
}

.material.active .icon.arrow-l {
    background-position: -120px -72px;
}

.material .icon.arrow-d {
    background-position: 0 -96px;
}

.material.hover .icon.arrow-d {
    background-position: -24px -96px;
}

.material.focused .icon.arrow-d {
    background-position: -48px -96px;
}

.material.pressed .icon.arrow-d {
    background-position: -72px -96px;
}

.material.disabled .icon.arrow-d {
    background-position: -96px -96px;
}

.material.active .icon.arrow-d {
    background-position: -120px -96px;
}

.material.arrow-r .icon {
    background-position: 0 -120px;
}

.material.hover .icon.arrow-r {
    background-position: -24px -120px;
}

.material.focused .icon.arrow-r {
    background-position: -48px -120px;
}

.material.pressed .icon.arrow-r {
    background-position: -72px -120px;
}

.material.disabled .icon.arrow-r {
    background-position: -96px -120px;
}

.material.active .icon.arrow-r {
    background-position: -120px -120px;
}

.material .icon.arrow-u {
    background-position: 0 -144px;
}

.material.hover .icon.arrow-u {
    background-position: -24px -144px;
}

.material.focused .icon.arrow-u {
    background-position: -48px -144px;
}

.material.pressed .icon.arrow-u {
    background-position: -72px -144px;
}

.material.disabled .icon.arrow-u {
    background-position: -96px -144px;
}

.material.active .icon.arrow-u {
    background-position: -120px -144px;
}

.material .icon.check-on {
    background-position: 0 -168px;
}

.material.hover .icon.check-on {
    background-position: -24px -168px;
}

.material.focused .icon.check-on {
    background-position: -48px -168px;
}

.material.pressed .icon.check-on {
    background-position: -72px -168px;
}

.material.disabled .icon.check-on {
    background-position: -96px -168px;
}

.material.active .icon.check-on {
    background-position: -120px -168px;
}

.material .icon.check-off {
    background-position: 0 -192px;
}

.material.hover .icon.check-off {
    background-position: -24px -192px;
}

.material.focused .icon.check-off {
    background-position: -48px -192px;
}

.material.pressed .icon.check-off {
    background-position: -72px -192px;
}

.material.disabled .icon.check-off {
    background-position: -96px -192px;
}

.material.active .icon.check-off {
    background-position: -120px -192px;
}