/*
    This was originally on code libs but moved to our SVN so it can be modified.

	1.0	jQuery-UI mods
	2.0	Customerfocus UI
		2.1 Modal
		2.2 Buttons and Icons
		2.3 Icon Menus
	3.0	Artworktool(TM)
	4.0	VS

*/

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* 1.0 jQuery-UI mods
   ---------------------------------------------------------------------- */
.ui-notitlebar .ui-dialog-titlebar {display:none}
.ui-dialog.ui-nopadding {padding:0 !important;}

/* 2.0 Codecore UI
   ---------------------------------------------------------------------- */
.no-left-margin{
    margin-left:0 !important;
}
.no-right-margin{
    margin-right:0 !important;
}
.no-margin{
    margin:0 !important;
}

.ccui-spinner {
    height:60px;
    width:60px;
    margin:0 auto;
    position:absolute;
    -webkit-animation: rotation 1.5s infinite linear;
    -moz-animation: rotation 1.5s infinite linear;
    -o-animation: rotation 1.5s infinite linear;
    animation: rotation 1.5s infinite linear;
    border-left:6px solid rgba(128,128,128,.15);
    border-right:6px solid rgba(128,128,128,.15);
    border-bottom:6px solid rgba(128,128,128,.15);
    border-top:6px solid rgba(128,128,128,.8);
    border-radius:100%;
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}

.ccui-loader {
    position:relative;
}
.ccui-loader div{
    position:absolute;
    top:0;
    left:0;
    -webkit-animation: moveacross 5s infinite linear;
    -moz-animation: moveacross 5s infinite linear;
    -o-animation: moveacross 5s infinite linear;
    animation: moveacross 5s infinite linear;
    border-top:5px solid rgba(128,128,128,.8);
}
@-webkit-keyframes moveacross {
    from {margin-left:0%; width:1%}
    50%{margin-left:0%; width:100%}
    to {margin-left:99%; width:1%}
}
@-moz-keyframes moveacross {
    from {margin-left:0%; width:1%}
    50%{margin-left:0%; width:100%}
    to {margin-left:99%; width:1%}
}
@-o-keyframes moveacross {
    from {margin-left:0%; width:1%}
    50%{margin-left:0%; width:100%}
    to {margin-left:99%; width:1%}
}
@keyframes moveacross {
    from {margin-left:0%; width:1%}
    50%{margin-left:0%; width:100%}
    to {margin-left:99%; width:1%}
}

.ccdev{
    opacity:0.6;
    font-family:"Courier New", Courier, monospace;
    background:#000;
    color:#6F0;
    padding:10px;
}
/* -- */

/* 2.1 Modal
   ---------------------------------------------------------------------- */

.ccui-modal-wrapper{
    /*
        full window overlay
    */
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:120%;
}

.ccui-modal-overlay{
    /*
        darken background if required
    */
    background:#000;
    background:rgba(0, 0, 0, 0.5);
}

.ccui-modal-iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
    position:absolute;
}

.ccui-modal-container{
    /*
        this is given the correct width and height and margin
        everything is inside this which is inside ccui-modal-wrapper
    */
    position: relative;
}

.ccui-modal{
    border:1px solid #999;
    background-color:rgba(255, 255, 255, 0.8);
    position: absolute;
    top:0;
    left:0;
    width:100%;
}
.ccui-modal.has-titlebar{
    padding-top:40px;
}
.ccui-modal-titlebar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background:#CCC;
}
.ccui-modal-titlebar p{
    line-height:40px;
    margin:0 10px;
    font-weight:bold;
    float:left;
    font-size:20px;
}
.ccui-modal-titlebar .ccui-btnset{
    float:right;
}
.ccui-modal-titlebar .ccui-btn{
    margin-right:10px;
}

#ccui-iframe{
    width:95%;
    min-width:95%;
    height:99%;
    min-height:99%;
    border:0;
}
.ccui-btn#ccui-modal-close{
    z-index:103;
}

.loading-vsample{
    background:#fff url(images/loading-vsample.png) no-repeat center;
}
.loading-artworktool{
    background:#fff url(images/loading-artworktool.png) no-repeat center;
}


/* 2.2 Buttons and Icons
   ---------------------------------------------------------------------- */
#cc-talker-indicator{
    background:#ccc;
    color:#000;
    font-size:12px;
    padding:5px;
    display:block;
    width:auto;
    position:fixed;
    bottom:0;
}
#cc-talker-indicator b{
    background:#0F0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.ccui-btn, a.ccui-btn{
    border:0;
    background:#333;
    color:#fff !important;
    text-decoration:none !important;
    font-size:18px;
    cursor:pointer;
    padding:0 8px;
    height:32px;
    line-height:32px;
    margin:5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    text-align:center;
}
.ccui-btn-large, a.ccui-btn-large{
    font-size:24px;
    height:64px;
    line-height:64px;
}
.ccui-btn-small, a.ccui-btn-small{
    font-size:14px;
    height:24px;
    line-height:24px;
}
.ccui-btn-joinright{
    margin-right:0;
    border-right:1px solid #999;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ccui-btn-joinleft{
    margin-left:0;
    border-left:1px solid #999;
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.ccui-btn-iconleft{
    padding-left:0;
}
.ccui-btn-iconright{
    padding-right:0;
}
.ccui-icon.clickable{
    cursor:pointer;
}

/* css generated by CCFUI Icons cheat sheet */
.ccui-icon, .ccui-icon-ondark, .ccui-icon-small{
    width:32px;
    height:32px;
    background-color:#e0e0e0;
    background-image:url(images/ccui-icons-000000.png);
    background-repeat:no-repeat;
    display:inline-block;
    vertical-align:text-bottom;
    background-size:480px 384px;
}
.ccui-icon-ondark{
    background-color:#333;
    background-image:url(images/ccui-icons-ffffff.png);
}
.ccui-icon-small{
    width:24px;
    height:24px;
    background-size:384px 307.2px;
}
/* icon row 1 */
.ccui-icon-select{
    background-position:4px 4px;
}
.ccui-icon-refresh{
    background-position:-44px 4px;
}
.ccui-icon-text{
    background-position:-92px 4px;
}
.ccui-icon-image{
    background-position:-140px 4px;
}
.ccui-icon-shape{
    background-position:-188px 4px;
}
.ccui-icon-zoom{
    background-position:-236px 4px;
}
.ccui-icon-zoom-in{
    background-position:-284px 4px;
}
.ccui-icon-zoom-out{
    background-position:-332px 4px;
}
.ccui-icon-zoom-fit{
    background-position:-380px 4px;
}
.ccui-icon-zoom-pixels{
    background-position:-428px 4px;
}
/* icon row 2 */
.ccui-icon-layers{
    background-position:4px -44px;
}
.ccui-icon-layer-forward{
    background-position:-44px -44px;
}
.ccui-icon-layer-back{
    background-position:-92px -44px;
}
.ccui-icon-visible{
    background-position:-140px -44px;
}
.ccui-icon-invisible{
    background-position:-188px -44px;
}
.ccui-icon-unlocked{
    background-position:-236px -44px;
}
.ccui-icon-locked{
    background-position:-284px -44px;
}
.ccui-icon-trash{
    background-position:-332px -44px;
}
.ccui-icon-settings{
    background-position:-380px -44px;
}
.ccui-icon-palette{
    background-position:-428px -44px;
}
/* icon row 3 */
.ccui-icon-save{
    background-position:4px -92px;
}
.ccui-icon-share{
    background-position:-44px -92px;
}
.ccui-icon-time{
    background-position:-92px -92px;
}
.ccui-icon-undo{
    background-position:-140px -92px;
}
.ccui-icon-redo{
    background-position:-188px -92px;
}
.ccui-icon-flyout-left{
    background-position:-236px -92px;
}
.ccui-icon-flyout-right{
    background-position:-284px -92px;
}
.ccui-icon-faces{
    background-position:-332px -92px;
}
.ccui-icon-360{
    background-position:-380px -92px;
}
.ccui-icon-textimage{
    background-position:-428px -92px;
}
/* icon row 4 */
.ccui-icon-cross{
    background-position:4px -140px;
}
.ccui-icon-tick{
    background-position:-44px -140px;
}
.ccui-icon-download{
    background-position:-92px -140px;
}
.ccui-icon-chevron-left{
    background-position:-140px -140px;
}
.ccui-icon-chevron-right{
    background-position:-188px -140px;
}
.ccui-icon-caret-left{
    background-position:-236px -140px;
}
.ccui-icon-caret-right{
    background-position:-284px -140px;
}
.ccui-icon-plus{
    background-position:-332px -140px;
}
.ccui-icon-enquiry{
    background-position:-380px -140px;
}
.ccui-icon-cart{
    background-position:-428px -140px;
}
/* icon row 5 */
.ccui-icon-help{
    background-position:4px -188px;
}
.ccui-icon-info{
    background-position:-44px -188px;
}
.ccui-icon-alert{
    background-position:-92px -188px;
}
.ccui-icon-rewind{
    background-position:-140px -188px;
}
.ccui-icon-fastforward{
    background-position:-188px -188px;
}
.ccui-icon-triangle-left{
    background-position:-236px -188px;
}
.ccui-icon-triangle-right{
    background-position:-284px -188px;
}
.ccui-icon-pause{
    background-position:-332px -188px;
}
.ccui-icon-stop{
    background-position:-380px -188px;
}
.ccui-icon-new-window{
    background-position:-428px -188px;
}
/* icon row 6 */
.ccui-icon-deleted{
    background-position:4px -236px;
}
.ccui-icon-success{
    background-position:-44px -236px;
}
.ccui-icon-goto-start{
    background-position:-236px -236px;
}
.ccui-icon-goto-end{
    background-position:-284px -236px;
}
.ccui-icon-cut{
    background-position:-332px -236px;
}
.ccui-icon-copy{
    background-position:-380px -236px;
}
.ccui-icon-paste{
    background-position:-428px -236px;
}
/* icon row 7 */
.ccui-icon-list{
    background-position:4px -284px;
}

.ccui-icon-columns{
    background-position:-44px -284px;
}
.ccui-icon-thumbnails{
    background-position:-92px -284px;
}
.ccui-icon-flyoutmenu-left{
    background-position:-140px -284px;
}
.ccui-icon-flyoutmenu-right{
    background-position:-188px -284px;
}
.ccui-icon-rotate-clockwise{
    background-position:-236px -284px;
}
.ccui-icon-rotate-counter-clockwise{
    background-position:-284px -284px;
}
.ccui-icon-attach{
    background-position:-332px -284px;
}
.ccui-icon-email{
    background-position:-380px -284px;
}
.ccui-icon-edit{
    background-position:-428px -284px;
}

/* small icon row 1 */
.ccui-icon-small.ccui-icon-select{
    background-position:2px 2px;
}
.ccui-icon-small.ccui-icon-refresh{
    background-position:-36px 2px;
}
.ccui-icon-small.ccui-icon-text{
    background-position:-74px 2px;
}
.ccui-icon-small.ccui-icon-image{
    background-position:-113px 2px;
}
.ccui-icon-small.ccui-icon-shape{
    background-position:-151px 2px;
}
.ccui-icon-small.ccui-icon-zoom{
    background-position:-190px 2px;
}
.ccui-icon-small.ccui-icon-zoom-in{
    background-position:-228px 2px;
}
.ccui-icon-small.ccui-icon-zoom-out{
    background-position:-266px 2px;
}
.ccui-icon-small.ccui-icon-zoom-fit{
    background-position:-305px 2px;
}
.ccui-icon-small.ccui-icon-zoom-pixels{
    background-position:-343px 2px;
}
/* small icon row 2 */
.ccui-icon-small.ccui-icon-layers{
    background-position:2px -36px;
}
.ccui-icon-small.ccui-icon-layer-forward{
    background-position:-36px -36px;
}
.ccui-icon-small.ccui-icon-layer-back{
    background-position:-74px -36px;
}
.ccui-icon-small.ccui-icon-visible{
    background-position:-113px -36px;
}
.ccui-icon-small.ccui-icon-invisible{
    background-position:-151px -36px;
}
.ccui-icon-small.ccui-icon-unlocked{
    background-position:-190px -36px;
}
.ccui-icon-small.ccui-icon-locked{
    background-position:-228px -36px;
}
.ccui-icon-small.ccui-icon-trash{
    background-position:-266px -36px;
}
.ccui-icon-small.ccui-icon-settings{
    background-position:-305px -36px;
}
.ccui-icon-small.ccui-icon-palette{
    background-position:-343px -36px;
}
/* small icon row 3 */
.ccui-icon-small.ccui-icon-save{
    background-position:2px -74px;
}
.ccui-icon-small.ccui-icon-share{
    background-position:-36px -74px;
}
.ccui-icon-small.ccui-icon-time{
    background-position:-74px -74px;
}
.ccui-icon-small.ccui-icon-undo{
    background-position:-113px -74px;
}
.ccui-icon-small.ccui-icon-redo{
    background-position:-151px -74px;
}
.ccui-icon-small.ccui-icon-flyout-left{
    background-position:-190px -74px;
}
.ccui-icon-small.ccui-icon-flyout-right{
    background-position:-228px -74px;
}
.ccui-icon-small.ccui-icon-faces{
    background-position:-266px -74px;
}
.ccui-icon-small.ccui-icon-360{
    background-position:-305px -74px;
}
.ccui-icon-small.ccui-icon-textimage{
    background-position:-343px -74px;
}
/* small icon row 4 */
.ccui-icon-small.ccui-icon-cross{
    background-position:2px -113px;
}
.ccui-icon-small.ccui-icon-tick{
    background-position:-36px -113px;
}
.ccui-icon-small.ccui-icon-download{
    background-position:-74px -113px;
}
.ccui-icon-small.ccui-icon-chevron-left{
    background-position:-113px -113px;
}
.ccui-icon-small.ccui-icon-chevron-right{
    background-position:-151px -113px;
}
.ccui-icon-small.ccui-icon-caret-left{
    background-position:-190px -113px;
}
.ccui-icon-small.ccui-icon-caret-right{
    background-position:-228px -113px;
}
.ccui-icon-small.ccui-icon-plus{
    background-position:-266px -113px;
}
.ccui-icon-small.ccui-icon-enquiry{
    background-position:-305px -113px;
}
.ccui-icon-small.ccui-icon-cart{
    background-position:-343px -113px;
}
/* small icon row 5 */
.ccui-icon-small.ccui-icon-help{
    background-position:2px -151px;
}
.ccui-icon-small.ccui-icon-info{
    background-position:-36px -151px;
}
.ccui-icon-small.ccui-icon-alert{
    background-position:-74px -151px;
}
.ccui-icon-small.ccui-icon-rewind{
    background-position:-113px -151px;
}
.ccui-icon-small.ccui-icon-fastforward{
    background-position:-151px -151px;
}
.ccui-icon-small.ccui-icon-triangle-left{
    background-position:-190px -151px;
}
.ccui-icon-small.ccui-icon-triangle-right{
    background-position:-228px -151px;
}
.ccui-icon-small.ccui-icon-pause{
    background-position:-266px -151px;
}
.ccui-icon-small.ccui-icon-stop{
    background-position:-305px -151px;
}
.ccui-icon-small.ccui-icon-new-window{
    background-position:-343px -151px;
}
/* small icon row 6 */
.ccui-icon-small.ccui-icon-deleted{
    background-position:2px -190px;
}
.ccui-icon-small.ccui-icon-success{
    background-position:-36px -190px;
}
.ccui-icon-small.ccui-icon-goto-start{
    background-position:-190px -190px;
}
.ccui-icon-small.ccui-icon-goto-end{
    background-position:-228px -190px;
}
.ccui-icon-small.ccui-icon-cut{
    background-position:-266px -190px;
}
.ccui-icon-small.ccui-icon-copy{
    background-position:-305px -190px;
}
.ccui-icon-small.ccui-icon-paste{
    background-position:-343px -190px;
}
/* small icon row 7 */
.ccui-icon-small.ccui-icon-list{
    background-position:2px -228px;
}
.ccui-icon-small.ccui-icon-columns{
    background-position:-36px -228px;
}
.ccui-icon-small.ccui-icon-thumbnails{
    background-position:-74px -228px;
}
.ccui-icon-small.ccui-icon-flyoutmenu-left{
    background-position:-113px -228px;
}
.ccui-icon-small.ccui-icon-flyoutmenu-right{
    background-position:-151px -228px;
}
.ccui-icon-small.ccui-icon-rotate-clockwise{
    background-position:-190px -228px;
}
.ccui-icon-small.ccui-icon-rotate-counter-clockwise{
    background-position:-228px -228px;
}
.ccui-icon-small.ccui-icon-attach{
    background-position:-266px -228px;
}
.ccui-icon-small.ccui-icon-email{
    background-position:-305px -228px;
}
.ccui-icon-small.ccui-icon-edit{
    background-position:-343px -228px;
}
/* --- */

/* 2.3 Icon Menus
   ---------------------------------------------------------------------- */
.ccui-placer{ /* placed before an element allowing an overlay that moves with the element but doesn't upset the element. */
    position:relative;
    height:0;
    width:0;
    overflow:visible;
    clear:none;
}
.ccui-placer-positioner{
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}
.ccui-flyoutwrapper{
    position:absolute;
    display:inline-block;
    opacity:0.9;
}
.ccui-flyoutwrapper-bottom{
    bottom:0;
    left:0;
    top:auto;
}
.ccui-flyoutwrapper-top{
    top:0;
    left:0;
    bottom:auto;
}
.ccui-flyoutwrapper .ccui-icon{
    margin:1px;
}
/* 3.0 Artworktool
   ---------------------------------------------------------------------- */

.artworktool-modal-contents > iframe{
    width:100%;
    height:100%;
}
.artworktool-modal-contents{
    z-index:1039;
    position:absolute;
    top:0;
    left:0;
}
#artworktool-filesavemask{
    background:url(images/buttonmask-artworktool.png) no-repeat left top;
    position:absolute;
    top:0;
    left:1px;
    width:250px;
    height:61px;
    z-index:1040;
}
#artworktool-buttons{
    position:absolute;
    top:10px;
    right:50px;
    height:45px;
    z-index:1040;
}

.artworktool-background-image-stretch{
    background-size: 100% 100%, auto auto;
    background-repeat: no-repeat;
    background-position: center center;
}
.artworktool-background-image-fit{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* 4.0 VS
   ---------------------------------------------------------------------- */
.technologovs-wrapper{
    position:relative;
    display:inline-block;
    clear:none;
    overflow:hidden;
}