/* Generic Icon Styles
 * --------------------------------------------------------------------- */
.ocms-icon {
    display: inline-block;
    vertical-align: middle;
}

/* 16px Icons
 * --------------------------------------------------------------------- */
.ocms-icon-16 {
    background-image: url(icons/16-blue-3.png) !important; /* Override the default jqueryui background image */
    background-repeat: no-repeat !important;
    background-position-x: 16px;                    /* If no second rule sets the x position, make the icon blank */
    width: 16px !important;
    height: 16px !important;
}

.progress16 {
    width: 16px !important;
    height: 16px !important;
    background: url(images/General/spinner_16-blue.gif) no-repeat !important;
}

.headerGear16 {
    background-position-x: 0;
}

.headerGear16:hover,
.ui-state-hover .headerGear16 {
    background-position-y: -16px;
}

.headerGear16:disabled,
.headerGear16.disabled,
.ui-state-disabled .headerGear16 {
    background-position-y: -32px;
}


.headerGlobe16 {
    background-position-x: -16px;
}

.headerGlobe16:hover,
.ui-state-hover .headerGlobe16 {
    background-position-y: -16px;
}

.headerGlobe16:disabled,
.headerGlobe16.disabled,
.headerGlobe16.contrast,
.ui-state-disabled .headerGlobe16 {
    background-position-y: -32px;
}

.headerGlobe16.active,
.ui-state-active .headerGlobe16 {
    background-position-y: -48px;
}


.headerHelp16 {
    background-position-x: -464px;
}

.headerHelp16:hover,
.ui-state-hover .headerHelp16 {
    background-position-y: -16px;
}

.headerHelp16:disabled,
.headerHelp16.disabled,
.ui-state-disabled .headerHelp16 {
    background-position-y: 32px;
}

.headerHelp16.active,
.ui-state-active .headerHelp16 {
    background-position-y: 48px;
}


.headerPerson16 {
    background-position-x: -32px;
}

.headerPerson16:hover,
.ui-state-hover .headerPerson16 {
    background-position-y: -16px;
}

.headerPerson16:disabled,
.headerPerson16.disabled,
.ui-state-disabled .headerPerson16 {
    background-position-y: -32px;
}


.bigX16 {
    background-position-x: -48px;
}

.bigX16:hover {
    background-position-y: -16px;
}

.bigX16:disabled,
.bigX16.disabled,
.ui-state-disabled .bigX16 {
    background-position-y: -32px;
}


.gear16 {
    background-position-x: -64px;
}

.gear16:hover,
.ui-state-hover .gear16 {
    background-position-y: -16px;
}

.gear16:disabled,
.gear16.disabled,
.ui-state-disabled .gear16 {
    background-position-y: -32px;
}


.lock16 {
    background-position-x: -80px;
}

.grayLock16 {
    background-position-x: -80px;
    background-position-y: -16px;
}

.lock16:disabled,
.lock16.disabled,
.ui-state-disabled .lock16 {
    background-position-y: -16px;
}


.key16 {
    background-position-x: -96px;
}

.grayKey16 {
    background-position-x: -96px;
    background-position-y: -16px;
}

.key16:disabled,
.key16.disabled,
.ui-state-disabled .key16 {
    background-position-y: -16px;
}


.page16 {
    background-position-x: -112px;
}

.whitePage16 {
    background-position-x: -112px;
    background-position-y: -16px;
}

.page16:hover,
.ui-state-hover .page16 {
    background-position-y: -32px;
}


.content16 {
    background-position-x: -128px;
}

.whiteContent16 {
    background-position-x: -128px;
    background-position-y: -16px;
}

.content16:hover,
.ui-state-hover .content16 {
    background-position-y: -32px;
}


.expandAll16 {
    background-position-x: -144px;
}

.expandAll16:hover:not(.disabled) {
    cursor: pointer;
}

.expandAll16:hover,
.ui-state-hover .expandAll16 {
    background-position-y: -16px;
}

.expandAll16:disabled,
.expandAll16.disabled,
.ui-state-disabled .expandAll16 {
    background-position-y: -32px;
}


.collapseAll16 {
    background-position-x: -160px;
}

.collapseAll16:hover:not(.disabled) {
    cursor: pointer;
}

.collapseAll16:hover,
.ui-state-hover .collapseAll16 {
    background-position-y: -16px;
}

.collapseAll16:disabled,
.collapseAll16.disabled,
.ui-state-disabled .collapseAll16 {
    background-position-y: -32px;
}


.removeFromSiteMap16 {
    background-position-x: -176px;
}

.removeFromSiteMap16:hover:not(.disabled) {
    cursor: pointer;
}

.removeFromSiteMap16:hover,
.ui-state-hover .removeFromSiteMap16 {
    background-position-y: -16px;
}

.removeFromSiteMap16:disabled,
.removeFromSiteMap16.disabled,
.ui-state-disabled .removeFromSiteMap16 {
    background-position-y: -32px;
}


.favourite16 {
    background-position-x: -192px;
}

.favourite16:hover,
.ui-state-hover .favourite16 {
    background-position-y: -16px;
}

.favourite16:active,
.favourite16.active,
.ui-state-active .favourite16 {
    background-position-y: -32px;
}

.favourite16:disabled,
.favourite16.disabled,
.ui-state-disabled .favourite16 {
    background-position-y: -48px;
}


.pin16 {
    background-position-x: -208px;
}

.pin16:hover,
.ui-state-hover .pin16 {
    background-position-y: -16px;
}

.pin16:active,
.pin16.active,
.ui-state-active .pin16 {
    background-position-y: -32px;
}

.pin16:disabled,
.pin16.disabled,
.ui-state-disabled .pin16 {
    background-position-y: -48px;
}


.radioButton16 {
    background-position-x: -240px;
}

.radioButton16:hover,
.ui-state-hover .radioButton16 {
    background-position-y: -16px;
}

.radioButton16:active,
.radioButton16.active,
.ui-state-active .radioButton16 {
    background-position-y: -32px;
}

.radioButton16:disabled,
.radioButton16.disabled,
.ui-state-disabled .radioButton16 {
    background-position-y: -48px;
}


.add16 {
    background-position-x: -256px;
}

.add16:hover,
.ui-state-hover .add16 {
    background-position-y: -16px;
}

.add16:disabled,
.add16.disabled,
.ui-state-disabled .add16 {
    background-position-y: -32px;
}


.download16 {
    background-position-x: -288px;
}

.ocmsListSelected .download16 {
    background-position-y: -48px;
}

.download16:hover,
.ui-state-hover .download16,
.ocmsListSelected .download16:hover {
    background-position-y: -16px;
}

.download16:disabled,
.download16.disabled,
.ui-state-disabled .download16 {
    background-position-y: -32px;
}


.drag16 {
    background-position-x: -304px;
}

.drag16:hover,
.ui-state-hover .drag16 {
    background-position-y: -16px;
}

.drag16:disabled,
.drag16.disabled,
.ui-state-disabled .drag16 {
    background-position-y: -32px;
}


.info16 {
    background-position-x: -320px;
}

.warning16 {
    background-position-x: -320px;
    background-position-y: -16px;
}

.error16 {
    background-position-x: -320px;
    background-position-y: -32px;
}

.success16 {
    background-position-x: -320px;
    background-position-y: -48px;
}

.lCircleChevron16 {
    background-position-x: -336px;
}

.lCircleChevron16:hover,
.ui-state-hover .lCircleChevron16 {
    background-position-y: -16px;
}

.lCircleChevron16:active,
.lCircleChevron16.active,
.ui-state-active .lCircleChevron16 {
    background-position-y: -32px;
}

.lCircleChevron16:disabled,
.lCircleChevron16.disabled,
.ui-state-disabled .lCircleChevron16 {
    background-position-y: -48px;
}


.rCircleChevron16 {
    background-position-x: -352px;
}

.rCircleChevron16:hover,
.ui-state-hover .rCircleChevron16 {
    background-position-y: -16px;
}

.rCircleChevron16:active,
.rCircleChevron16.active,
.ui-state-active .rCircleChevron16 {
    background-position-y: -32px;
}

.rCircleChevron16:disabled,
.rCircleChevron16.disabled,
.ui-state-disabled .rCircleChevron16 {
    background-position-y: -48px;
}

.rCircleChevron16.pointDown {
    transform: rotate(90deg);
}

.rCircleChevron16.pointUp {
    transform: rotate(270deg);
}

.drilldown16 {
    background-position-x: -368px;
    background-position-y: 0px;
}

.drilldown16:hover,
.ui-state-hover .drilldown16 {
    background-position-y: -16px;
}

.drilldown16:disabled,
.drilldown16.disabled,
.ui-state-disabled .drilldown16 {
    background-position-y: -32px;
}

.overture16 {
    background-position-x: -384px;
}

.whiteOverture16 {
    background-position-x: -384px;
    background-position-y: -16px;
}

.overture16:hover,
.ui-state-hover .overture16 {
    background-position-y: -32px;
}

.media16 {
     background-position-x: -400px;
 }

.whiteMedia16 {
    background-position-x: -400px;
    background-position-y: -16px;
}

.media16:hover,
.ui-state-hover .media16 {
    background-position-y: -32px;
}

.approvals16 {
    background-position-x: -432px;
}

.whiteApprovals16 {
    background-position-x: -432px;
    background-position-y: -16px;
}

.approvals16:hover,
.ui-state-hover .approvals16 {
    background-position-y: -32px;
}

.tasks16 {
    background-position-x: -416px;
}

.whiteTasks16 {
    background-position-x: -416px;
    background-position-y: -16px;
}

.tasks16:hover,
.ui-state-hover .tasks16 {
    background-position-y: -32px;
}

.crown16 {
    background-position-x: -448px;
}

.whiteCrown16 {
    background-position-x: -448px;
    background-position-y: -16px;
}

/* 12px Icons
 * --------------------------------------------------------------------- */
.ocms-icon-12 {
    background-image: url(icons/12-blue-3.png) !important; /* Override the default jqueryui background image */
    background-repeat: no-repeat !important;
    background-position-x: 12px;                    /* If no second rule sets the x position, make the icon blank */
    width: 12px !important;
    height: 12px !important;
}


.unpublished12 {
    background-position: 0 0;
}

.expired12 {
    background-position: 0 -12px !important;
}

.pendingapproval12, .success12 {
    background-position: 0 -24px;
}

.error12 {
    background-position: 0 -36px;
}


.doubleHChevron12 {
    background-position-x: -12px;
}

.doubleHChevron12:hover,
.ui-state-hover .doubleHChevron12 {
    background-position-y: -12px;
}

.doubleHChevron12.pointLeft {
    transform: rotateX(180deg);
}


.doubleVChevron12 {
    background-position-x: -24px;
    width: 11px !important;
    margin-right: 1px;  /* Add margin to ensure the icon still consumes 12px */
}

.doubleVChevron12:hover,
.ui-state-hover .doubleVChevron12 {
    background-position-y: -12px;
}

.doubleVChevron12.pointUp {
    transform: rotateX(180deg);
}

.doubleWhiteVChevron12 {
    background-position: -24px -24px;
}

.doubleWhiteVChevron12:hover,
.ui-state-hover .doubleVChevron12 {
    background-position-y: -36px;
}

.doubleWhiteVChevron12.pointUp {
    transform: rotateX(180deg);
}

.search12 {
    background-position: -35px 0;
}

.homepage12 {
    background-position: -48px 0;
}

.tabsList10 {
    position: absolute;
    right: 25px;
    top: 15px;
    cursor: pointer;
}


.menu12 {
    background-position-x: -60px;
}

.menu12:hover,
.ui-state-hover .menu12 {
    background-position-y: -12px;
}

.menu12:disabled,
.menu12.disabled,
.ui-state-disabled .drag16 {
    background-position-y: -24px;
}


.filter12 {
    background-position-x: -72px;
}
.filter12:hover,
.ui-state-hover .filter12 {
    background-position-y: -12px;
}
.filter12:active,
.filter12.active,
.filter12.filterApplied {
    background-position-y: -24px;
}

.lock12 {
    background-position-x: -84px;
}
.grayLock12 {
    background-position-y: -12px;
}

.linked12 {
    background-position-x: -96px;
}

.trash12 {
    background-position-x: -108px;
}

.trash12:hover,
.ui-state-hover .trash12 {
    background-position-y: -12px;
}

.edit12 {
    background-position-x: -120px;
}

.edit12:hover,
.ui-state-hover .edit12 {
    background-position-y: -12px;
}

/* 10px Icons
 * --------------------------------------------------------------------- */
.ocms-icon-10 {
    background-image: url(icons/10-blue-2.png) !important; /* Override the default jqueryui background image */
    background-repeat: no-repeat !important;
    background-position-x: 10px;                    /* If no second rule sets the x position, make the icon blank */
    width: 10px !important;
    height: 10px !important;
}


.hChevron10 {
    background-position-x: 0;
    width: 6px !important;
    margin: 0 2px;  /* Add margin to ensure the icon still consumes 10px */
}

.hChevron10:hover,
.ui-state-hover .hChevron10 {
    background-position-y: -10px;
}

.hChevron10.contrast:hover,
 .ui-state-hover .hChevron10.contrast {
     background-position-y: -50px;
 }

.hChevron10:disabled,
.hChevron10.disabled,
.ui-state-disabled .hChevron10 {
    background-position-y: -20px;
}

.whiteBackground .hChevron10,
.ocmsListSelected .hChevron10 {
    background-position-y: -30px;
}

.whiteBackground .hChevron10:hover,
.ocmsListSelected .hChevron10:hover {
    background-position-y: -40px;
}

.hChevron10.pointLeft {
    transform: rotateY(180deg);
}

.hChevron10.pointDown {
    transform: rotate(90deg);
}


.vChevron10, .tabsList10 {
    background-position-x: -6px;
    height: 6px !important;
    margin: 2px 0;  /* Add margin to ensure the icon still consumes 10px */
}

.vChevron10:hover,
.tabsList10:hover,
.ui-state-hover .vChevron10,
.ui-state-hover .tabsList10 {
    background-position-y: -6px;
}

.vChevron10:disabled,
.vChevron10.disabled,
.tabsList10:disabled,
.tabsList10.disabled,
.ui-state-disabled .vChevron10,
.ui-state-disabled .tabsList10 {
    background-position-y: -12px;
}

.vChevron10.pointUp,
.tabsList10.pointUp {
    transform: rotateX(180deg);
}


.smallX10 {
    background-position-x: -16px;
}

.smallX10:hover {
    background-position-y: -10px;
}

.smallX10:disabled,
.smallX10.disabled,
.ui-state-disabled .smallX10 {
    background-position-y: -20px;
}

.smallXWhite10,
.darkBackground .smallX10 {
    background-position-x: -16px;
    background-position-y: -40px;
}

.smallXWhite10:hover,
.darkBackground .smallX10:hover {
    background-position-y: -30px;
}

.smallXWhite10:disabled,
.smallXWhite10.disabled,
.ui-state-disabled .smallXWhite10,
.darkBackground .smallX10:disabled,
.darkBackground .smallX10.disabled,
.darkBackground .ui-state-disabled.smallX10 {
    background-position-y: -50px;
}


.resizeHandle10 {
    background-position-x: -26px;
}


.send10 {
    background-position-x: -46px;
}

.send10:hover,
.ui-state-hover .send10 {
    background-position-y: -10px;
}

.send10:disabled,
.send10.disabled,
.ui-state-disabled .send10 {
    background-position-y: -20px;
}


.add10 {
    background-position-x: -36px;
}

.add10:hover,
.ui-state-hover .add10 {
    background-position-y: -10px;
}

.add10:disabled,
.add10.disabled,
.ui-state-disabled .add10 {
    background-position-y: -20px;
}


.checkmark10 {
    background-position-x: -46px;
}

.checkmark10:hover,
.ui-state-hover .checkmark10 {
    background-position-y: -10px;
}

.checkmark10:disabled,
.checkmark10.disabled,
.ui-state-disabled .checkmark10 {
    background-position-y: -20px;
}


.vGChevron10 {
    background-position-x: -56px;
    height: 6px !important;
    margin: 2px 0;  /* Add margin to ensure the icon still consumes 10px */
}

.vGChevron10:hover,
.ui-state-hover .vGChevron10 {
    background-position-y: -6px;
}

.vGChevron10:disabled,
.vGChevron10.disabled,
.ui-state-disabled .vGChevron10 {
    background-position-y: -12px;
}

.vGChevron10.pointUp {
    transform: rotateX(180deg);
}

.vGChevron10.pointLeft{
    transform: rotateZ(90deg);
}

.vGChevron10.pointRight{
    transform: rotateZ(-90deg);
}

.drag10 {
    background-position-x: -66px;
}

.ocmsListSelected .drag10 {
    background-position-y: -10px;
}

.drag10:hover,
.ui-state-hover .drag10,
.ocms-draghandle:hover,
.ui-state-hover .ocms-draghandle,
.ocmsListSelected .drag10:hover {
    background-position-y: -20px;
}

.drag10:disabled,
.drag10.disabled,
.ui-state-disabled .drag10,
.ocms-draghandle:disabled,
.ocms-draghandle.disabled,
.ui-state-disabled .ocms-draghandle {
    background-position-y: -20px;
}

.ocms-draghandle {
    background-image: url(icons/10-blue-2.png) !important;
    background-repeat: no-repeat !important;
    width: 10px !important;
    height: 10px !important;
    background-position-x: -66px;
}

/* Other Chevron Icons (breadcrumbs & previous/next buttons)
 * --------------------------------------------------------------------- */
.previousPage {
    background-image: url(icons/chevron-blue-2.png) !important; /* Override the default jqueryui background image */
    background-repeat: no-repeat !important;
    background-position-x: 0;
    width: 5px !important;
    height: 8px !important;
}

.previousPage:hover,
.ui-state-hover .previousPage {
    background-position-y: -8px;
}

.previousPage:disabled,
.previousPage.disabled,
.ui-state-disabled .previousPage {
    background-position-y: -16px;
}


.nextPage {
    background-image: url(icons/chevron-blue-2.png) !important; /* Override the default jqueryui background image */
    background-repeat: no-repeat !important;
    background-position-x: -10px;
    width: 5px !important;
    height: 8px !important;
}

.nextPage:hover,
.ui-state-hover .nextPage {
    background-position-y: -8px;
}

.nextPage:disabled,
.nextPage.disabled,
.ui-state-disabled .nextPage {
    background-position-y: -16px;
}


.breadcrumbSeparator {
    background: url(icons/chevron-blue-2.png) no-repeat -20px 0;
    width: 5px;
    height: 8px;
    margin: 0 10px;
}


.whiteChevron {
    background: url(icons/chevron-blue-2.png) no-repeat -20px -16px;
    width: 5px;
    height: 8px;
    margin: 0 1px 0 2px;    /* Ensure width and height are the same (8px) */
}

.whiteChevron.pointUp {
    transform: rotate(270deg);

}

.whiteChevron.pointRight {
    /* Default */
}

.whiteChevron.pointDown {
    transform: rotate(90deg);
}

.whiteChevron.pointLeft {
    transform: rotateY(180deg);
}

/* Column Sorting Icons
 * --------------------------------------------------------------------- */
.ocms-icon-Sort {
    background-image: url(icons/sort-blue-2.png) !important; /* Override the default jqueryui background image */
    background-repeat: no-repeat !important;
    background-position-x: 8px;                       /* If no second rule sets the x position, make the icon blank */
    width: 8px !important;
}

.ascendingSort {
    background-position-x: 0;
    height: 5px;
}

.ascendingSort:hover,
.ui-state-hover .ascendingSort {
    background-position-y: -5px;
}


.descendingSort {
    background-position-x: -8px;
    height: 5px;
    margin-top: 5px;
}

.descendingSort:hover,
.ui-state-hover .descendingSort {
    background-position-y: -5px;
}


.isSortableSort {
    background-position-x: -16px;
    height: 12px;
}

.isSortableSort:hover,
.ui-state-hover .isSortableSort {
    background-position-y: -12px;
}

.ocms-icon-preview-36 {
    background-image: url(icons/preview_36.png) !important; /* Override the default jqueryui background image */
    background-repeat: no-repeat !important;
    width: 36px !important;
    height: 36px !important;
}