/*
 * General Button Styling
 */

.button {
    display: inline-block;
}
.button .icon {
    display: inline-block;
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
}
.button.rightSep {
    padding-right: 3px;
    border-right: 1px solid #444444;
}
.button.leftSep {
    padding-left: 3px;
    border-left: 1px solid #444444;
}

/*
 * Toolbar buttons
 * All toolbar buttons are 44x44px
 */
.toolbar .button .icon {
    height: 44px;
    width: 44px;
}
.button.live .icon {
    background-position: 0 0;
}
.button.live.active .icon {
    background-position: -44px 0;
}
.button.search .icon {
    background-position: 0 -44px;
}
.button.search.active .icon {
    background-position: -44px -44px;
}
.button.settings .icon {
    background-position: 0 -88px;
}
.button.settings.active .icon {
    background-position: -44px -88px;
}
.button.layouts .icon {
    background-position: 0 -132px;
}
.button.sidebar .icon {
    background-position: 0 -176px;
}
.button.back .icon {
    background-position: 0 -220px;
}
.button.back.active .icon {
    background-position: -44px -220px;
}
.button.sort .icon {
    background-position: 0 -264px;
}
.button.sort.alpha .icon {
    background-position: 0 -308px;
}
.button.sort.reverseAlpha .icon {
    background-position: 0 -352px;
}
.button.newSearch .icon {
    background-position: 0 -396px;
}
.button.ptz .icon {
    background-position: 0 -440px;
}
.button.ptz.active .icon {
    background-position: -44px -440px;
}
.button.digitalPtzDewarp .icon {
    background-position: 0 -484px;
}
.button.digitalPtzDewarp.active .icon {
    background-position: -44px -484px;
}
.button.digitalPtzDualView .icon {
    background-position: 0 -528px;
}
.button.digitalPtzDualView.active .icon {
    background-position: -44px -528px;
}
.button.digitalPtzNormal .icon {
    background-position: 0 -572px;
}
.button.digitalPtzNormal.active .icon {
    background-position: -44px -572px;
}
.button.digitalPtzPanorama .icon {
    background-position: 0 -616px;
}
.button.digitalPtzPanorama.active .icon {
    background-position: -44px -616px;
}
.button.ptzPresets .icon {
    background-position: 0 -660px;
}
.button.ptzPresets.disabled .icon {
    background-position: -88px -660px;
}
.button.tour1 .icon {
    background-position: 0 -704px;
}
.button.tour1.active .icon {
    background-position: -44px -704px;
}
.button.tour2 .icon {
    background-position: 0 -748px;
}
.button.tour2.active .icon {
    background-position: -44px -748px;
}
.button.tour3 .icon {
    background-position: 0 -792px;
}
.button.tour3.active .icon {
    background-position: -44px -792px;
}
.button.tour4 .icon {
    background-position: 0 -836px;
}
.button.tour4.active .icon {
    background-position: -44px -836px;
}

.button.trashCan .icon {
    background-position: 0 -880px;
}

.button.trashCan.active .icon {
    background-position: -44px -880px;
}

.button.videoPush .icon {
    background-position: 0 -924px;
}

.button.videoPush.active .icon {
    background-position: -44px -924px;
}

.button.videoPushTour1 .icon {
    background-position: 0 -968px;
}

.button.videoPushTour1.active .icon {
    background-position: -44px -968px;
}

.button.videoPushTour2 .icon {
    background-position: 0 -1012px;
}

.button.videoPushTour2.active .icon {
    background-position: -44px -1012px;
}

.button.videoPushTour3 .icon {
    background-position: 0 -1056px;
}

.button.videoPushTour3.active .icon {
    background-position: -44px -1056px;
}

.button.videoPushTour4 .icon {
    background-position: 0 -1100px;
}

.button.videoPushTour4.active .icon {
    background-position: -44px -1100px;
}

.button.cameraSettings .icon {
    background-position: 0 -1144px;
}

.button.cameraSettings.active .icon {
    background-position: -44px -1144px;
}

.button.cameraSettings.disabled .icon {
    background-position: -88px -1144px;
}


/*
 * Search Controls buttons
 */
.searchControls .button .icon {
    height: 44px;
    width: 44px;
}
.searchControls .button.active {
    background-color: #7f7f7f;
}
.button.stepBack .icon {
    background-position: -176px 0;
}
.button.stepBack.active .icon {
    background-position: -220px 0;
}
.button.rewind .icon {
    background-position: -176px -44px;
}
.button.rewind.active .icon {
    background-position: -220px -44px;
}
.button.reverse .icon {
    background-position: -176px -88px;
}
.button.reverse.active .icon {
    background-position: -220px -88px;
}
.button.pause .icon {
    background-position: -176px -132px;
}
.button.pause.active .icon {
    background-position: -220px -132px;
}
.button.forward .icon {
    background-position: -176px -176px;
}
.button.forward.active .icon {
    background-position: -220px -176px;
}
.button.fastForward .icon {
    background-position: -176px -220px;
}
.button.fastForward.active .icon {
    background-position: -220px -220px;
}
.button.stepForward .icon {
    background-position: -176px -264px;
}
.button.stepForward.active .icon {
    background-position: -220px -264px;
}

/*
 * Thumbnails
 */
.thumbnail {
    display: inline-block;
    position: absolute;
    left: 0;
}
.thumbnail .icon {
    height: 80px;
    width: 80px;
    display: inline-block;
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
}
.thumbnail.selected .icon {
    border: 1px solid white;
    border-radius: 5px;
}
.thumbnail.noCamera .icon {
    background-position: -352px 0;
}
.thumbnail.noCamera.active .icon {
    background-position: -432px 0;
}
.thumbnail.softTrigger .icon {
    background-position: -352px -80px;
}
.thumbnail.softTrigger.active .icon {
    background-position: -432px -80px;
}
.thumbnail.layout1 .icon {
    background-position: -352px -160px;
}
.thumbnail.layout2 .icon {
    background-position: -352px -240px;
}
.thumbnail.layout4 .icon {
    background-position: -352px -320px;
}
.thumbnail.layout6 .icon {
    background-position: -352px -400px;
}
.thumbnail.layout7 .icon {
    background-position: -352px -480px;
}
.thumbnail.layout8 .icon {
    background-position: -352px -560px;
}
.thumbnail.layout9 .icon {
    background-position: -352px -640px;
}
.thumbnail.layout10 .icon {
    background-position: -352px -720px;
}
.thumbnail.layout12 .icon {
    background-position: -352px -800px;
}
.thumbnail.layout13 .icon {
    background-position: -352px -880px;
}
.thumbnail.layout16 .icon {
    background-position: -352px -960px;
}
.thumbnail.layout20 .icon {
    background-position: -352px -1040px;
}
.thumbnail.layout25 .icon {
    background-position: -352px -1120px;
}
.thumbnail.layout30 .icon {
    background-position: -352px -1200px;
}
.thumbnail.layout36 .icon {
    background-position: -352px -1280px;
}
.thumbnail.layout48 .icon {
    background-position: -352px -1360px;
}
.thumbnail.eventMonitor .icon {
    background-position: -352px -1440px;
}

/*
 * Indicator icons
 * 16x16px icons used in lists to indicate the list type.
 */
.indicator {
    display: inline-block;
}
.indicator .icon {
    height: 16px;
    width: 16px;
    display: inline-block;
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
}
.indicator.selectedCamera .icon, .indicator.selectedItem .icon {
    background-position: -672px 0;
}
.indicator.staleImage .icon {
    background-position: -672px -16px;
}
.indicator.tourItem .icon {
    background-position: -672px -32px;
}
.indicator.viewItem .icon {
    background-position: -672px -48px;
}
.indicator.viewNew .icon {
    background-position: -672px -64px;
}
.indicator.folder .icon {
    background-position: -672px -80px;
}
.indicator.star .icon {
    background-position: -672px -96px;
}
.indicator.server .icon {
    background-position: -672px -112px;
}
.indicator.webService .icon {
    background-position: -672px -128px;
}
.indicator.ptz .icon {
    background-position: -672px -144px;
}

.indicator.fullscreen .icon {
    background-position: -672px -160px;
}

/*
 * List status icons
 * 24x24px icons used in lists to indicate status of the item.
 */
.status {
    display: inline-block;
}
.status .icon {
    height: 24px;
    width: 24px;
    display: inline-block;
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
}
.status.loss .icon {
    background-position: -736px 0;
}
.status.ptz .icon {
    background-position: -736px -24px;
}
.status.unsupported .icon {
    background-position: -736px -48px;
}

/*
 * Miscellaneous 24x24px icons
 */
.misc24 .icon {
    height: 24px;
    width: 24px;
    display: inline-block;
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
}

.misc24.showAllCameras .icon {
    background-position: -736px -72px;
}
.misc24.groupFactory .icon {
    background-position: -736px -96px;
}
.misc24.groupOffice .icon {
    background-position: -736px -120px;
}
.misc24.groupCourt .icon {
    background-position: -736px -144px;
}
.misc24.groupSkyscraper .icon {
    background-position: -736px -168px;
}
.misc24.groupStation .icon {
    background-position: -736px -192px;
}
.misc24.groupHouse .icon {
    background-position: -736px -216px;
}

/*
 * List selection icons
 * 26x26px icons used in lists to select items.
 */
.selection {
    display: inline-block;
}

.selection .icon {
    height: 26px;
    width: 26px;
    display: inline-block;
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
}

.selection.checkbox .icon {
    background-position: -832px 0;
}

.selection.checkbox.active .icon {
    background-position: -858px 0;
}

.selection.checkbox.disabled .icon {
    background-position: -884px 0;
}