body { padding: 0px; background: none;}
      #colour-palette { height: 35px; width: 645px; margin: 12px 0 7px 0; float:left; padding: 8px 10px 0 10px;
       background: #555;
        border-radius: 8px;
       
        box-shadow: 2px 2px 2px #ccc;
      
        box-sizing:content-box;
        display:none;
      }
      #colour-palette .box { width: 28px; height: 28px; border: 1px solid #222; float:right; margin-right:7px; border-radius: 4px; cursor:pointer;}
      #colour-palette .more-colours { color:#aaa; float:right; font-size:13px; margin:8px 10px 0 4px; border-bottom: 1px solid #888; padding:0; cursor: pointer;}
      #colour-palette .more-colours:hover { color:#d00; border-color: #d00}
      #colour-palette .user-colours { float:right; }
      .toolbar-section
      {
        padding-top: 10px;
        padding-left: 20px;
        background: #f2f5f6;
        -webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color-stop(0.75, #1a82f7), to(#FFFFFF));
        -webkit-border-bottom-right-radius: 8px;
        -webkit-border-bottom-left-radius: 8px;
        -moz-border-radius-bottomright: 8px;
        -moz-border-radius-bottmleft: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        box-shadow: 2px 2px 2px #ccc;
        border-top:1px solid #ddd;
        box-sizing:content-box;
        float:left;
      }
      .toolbar-section-one
      {
        /*margin: 0 0 0 100px;*/
        width: 210px; height: 40px;   
      }
      @-moz-document url-prefix() { 
        .toolbar-section-one
        {
          margin: 0 0 0 20px;
          width: 210px; 
        }
      }

       .toolbar-section-two
       {
        width:212px;  height: 40px; margin-left:50px;
       }
        @-moz-document url-prefix() { 
        .toolbar-section-two
        {
          margin: 0 0 0 20px;
          margin-left:60px;
        }
      }

       .toolbar-section-three
       {
        width:45px;  height: 40px; margin-left:60px;
       }

       @-moz-document url-prefix() { 
          .toolbar-section-three 
          {
            margin-left: 60px;
          }
        }
       
      .toolbar i { float:left;}
      .toolbar { clear:both;}
      .help-link { position: relative;  font-size: 13px; display:block; float:left; top: 10px;}
      .toolbar .icon-label
      { 
       font-size:13px; display:block; float:right; width: 55px; font-weight: normal; padding: 0 0 0 10px; box-shadow: none; text-shadow:none; font-family: raleway;
      }
     
     .social-container
     {
      width:880px;
       clear:both;
     }
      .social
      {
       background: #f2f5f6; /* Old browsers */
        -webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color-stop(0.75, #1a82f7), to(#FFFFFF));
        -webkit-border-top-right-radius: 8px;
        -webkit-border-top-left-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-topleft: 8px;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        box-shadow: 2px 2px 2px #ccc;
        box-sizing:content-box;
        width: 180px;
        height: 25px;
        padding: 6px 0 6px 12px;
        float:right;
      }

      @-moz-document url-prefix() { 
        .social
        {
         background: #f2f5f6; /* Old browsers */
          -webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color-stop(0.75, #1a82f7), to(#FFFFFF));
          -webkit-border-top-right-radius: 8px;
          -webkit-border-top-left-radius: 8px;
          -moz-border-radius-topright: 8px;
          -moz-border-radius-topleft: 8px;
          border-top-right-radius: 8px;
          border-top-left-radius: 8px;
          box-shadow: 2px 2px 2px #ccc;
          box-sizing:content-box;
          width: 180px;
          height: 40px;
          padding: 6px 0 6px 12px;
          float:right;
        }
      }
      .social button 
      {
        background: none;
        border:none;
        padding:0;
        margin:0;
        font-weight: normal;
        font-size:12px;
        color:#666;
        text-decoration: none;
      }
      .social img 
      {
        padding-right: 6px;
      }

      .text-toolbar
      {
        display:none; 
        margin: 0;
        padding: 10px 10px 2px 10px;
        max-width: 648px;
        background: #eee; /* Old browsers */
        box-shadow: 2px 2px 2px #ddd;
        border-left:1px solid #ccc;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        box-sizing:content-box;
        border-bottom-right-radius: 6px;
      }

      .text-toolbar select
      {
        position: relative;
        top: -2px;
        -webkit-appearance: none !important;
        background: #fafafa url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
        background-position-x: 97%;
        background-position-y: center;
        border: 1px solid #cccccc;
        padding: 0.44444rem;
        font-size: 0.77778rem;
        -webkit-border-radius: 0;
        border-radius: 0; 
      }
 
      .text-toolbar select:hover {
        background: #f3f3f3 url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
        background-position-x: 97%;
        background-position-y: center;
        border-color: #999999;
      }

      #text-content { width: 221px; height: 30px; position: relative; top: -2px; margin-bottom: 0;}
      #font-name, #font-size { margin-bottom:0;}
      

      .image-toolbar
      {
        display:none; 
       
        margin: 0 auto;
        padding:10px 15px 7px 15px;
        background: #eeeeee;
        box-shadow: 2px 2px 2px #ddd;
        border-left:1px solid #ccc;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        border-bottom-right-radius: 6px;
       }
      .image-toolbar .ortext
      {
        width: 10%;
        padding-left:10px;
        padding-right:10px;
        position:relative; top: 48px;
        color:#888;
        font-style: italic;
        text-align: center;
      }
      #upload-button a { padding-left: 10px; color:#555; font-size: 12px; display:block; padding: 4px 0 4px 0; border-bottom:1px dashed #888;}
      #upload-button i { color:#333; font-size:18px; padding: 0 5px 0 0; position:relative; top: 2px;}
      #upload-button a:hover { color:#a66 !important;}
      #upload-button a:hover i { color:#e44 !important;}

      #searchgo
      {
        background: #ddd;
        border: 1px solid #aaa;
        border-left:none;
      }

      #tagSearch
      {
         margin:5px 0 10px 0;
      }

      #tagSearch_chosen 
      {
        width:310px;
        height:30px;

      }

      #tagSearch_chosen .chosen-choices
      {
        height:30px;
      }

      #searchgo:hover
      {
        cursor: pointer;
      }

    
      #upload-button 
      {
        padding: 0 0 0 15px;
        font-weight: normal;
       
      }
     

      .text-toolbar label { padding:5px 8px 0 0; font-weight: bold; float:left;}
      .text-toolbar input, .text-toolbar select {  margin-right:20px; float:left; -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px; }
      .text-toolbar .text-icon
      { 
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px; 
        border: 1px solid #aaa; 
        display:inline-block; 
        text-align:center; 
        width: 40px; 
        height:30px; 
        padding: 8px 5px; 
        font-size:15px; 
        color:#000; 
        margin-right: 5px; 
        text-shadow: 2px 2px 2px #bbb;
        background:#ccc;
        float:left;
        position: relative;
        top:-3px;
        font-weight: normal;
      }

      .text-toolbar #colorSelector { float:left; width: 38px; height: 30px; -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
        border: 1px solid #aaa; 
      position: relative;
        top:-4px; width:40px;}
      .text-toolbar #colorSelector .selector { height: 30px; -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; }
      .text-toolbar #colorWheel { height: 120px; width: 120px; float:right; position:relative; clear:both; background:#ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #aaa; top: 5px; display:none; z-index: 999 }

      .toolbar .icon { font-size: 25px; color:#000; margin-right: 9px; margin-left:9px; text-shadow: 2px 2px 2px #999; display:block; float:left;}
      .toolbar .fa-check-square { color:#4b4; text-shadow: none; position:relative; top:3px;}
      .needsave { color:#f44!important; }
      .toolbar .icon:hover, .text-toolbar .text-icon:hover { color:#f00; cursor: pointer; position:relative;  text-shadow: none;}
      .toolbar .fa-check-square:hover { color: #4b4; position:relative; top:5px; left: 2px;}
      .toolbar .active, .text-toolbar .active { color:#900; text-shadow: none; }
      .text-toolbar .active { background: #ccc;}
      .toolbar .disabled, .text-toolbar .disabled { color:#66a; position:relative; top:2px; left:2px; text-shadow: none; }
      .toolbar .disabled:hover, .text-toolbar .disabled:hover {color:#66a; position:relative; top:2px; left:2px; text-shadow: none;}
     
      svg { z-index: 2;}
      .toolbar-container { width:100%;}
      .artwork-container { width: 100%; height:100%; min-height: 250px; position:relative;  background:#fff;}
      .product-images { width:100%; height:100%; z-index:1; position: absolute; top: 0; left: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
      .customer_artwork { position: absolute; }
      .white-padder {  width:100%; background: #fff; display: inline-block; overflow: hidden;  -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; border:1px solid #aaa; position:relative;}
   
      #artwork-area { overflow: hidden; }
      #upload-container { display:none; }
      
      #scratch-canvas {display:none;}
      .spinner { background-image: url('../images/spinner.gif'); position:relative; top:3px; width: 32px; height:32px;}

      #laser-message { position:absolute; left:200px; bottom:-70px; font-size:11px; margin: 0 auto;  }
      #hide-laser-preview { position:absolute; left:400px; bottom:-18px; width:150px; font-size:11px; margin: 0 auto; margin-top:10px; display:none;}
      .helper { color:#f0f0f0; padding: 5px 10px; background: #444; border:1px solid #000; opacity: 0.8; border-radius: 4px; font-size: 12px;}
      .tooltip { font-size: 13px;}
      #stockResults {  display:none; clear: left; position:relative; top: 10px; height: 170px overflow:hidden;}
      #searchAnimation{ margin-left: auto; margin-right:auto; width:220px; display:block; }

      .orbit-container { height: 180px; background:none; padding:5px 0 5px 5px; }
      .orbit-container .orbit-prev, .orbit-container .orbit-next { top: auto; bottom: 0; height:20px; background: none; text-indent: 0px !important; width: 100px !important; text-indent: 0px !important; color: inherit; line-height: inherit;}
      .orbit-container .orbit-prev>span, .orbit-container .orbit-next>span { border:none; display:inline; position: inherit; left: 0; height: auto !important; width: auto !important; }
      .orbit-content li { padding-left: 5px; background: #fff}
      .orbit-container .orbit-prev:hover, .orbit-container .orbit-next:hover { background: none;}

      #stockResults .frame { height: 120px; width:120px; white-space: nowrap; text-align: center; margin: 1em 0;}
      #stockResults .framehelper { display:inline-block; height:100%; vertical-align: middle;}
      .stock-thumb {  max-width: 120px; max-height: 120px}
      .stock-label { font-size:12px; background:#eee; width:120px; height:20px; padding-top: 10px; text-align: center; }
      .stock-label .foreground { background: #eee; color:#000;}
      .stock-label .background { background: #2ba6cb; color:#fff;}


      #print-area-warning { position: absolute; left: 240px; z-index:1000; font-size:13px; display: none; opacity:0.7; pointer-events:none; background-color: #c60f13;
        color: #fff; -webkit-border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-topright: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px; padding: 3px 12px;}

      #delete-message { position: absolute; left: 450px; bottom:0px; z-index:1001; font-size:13px;  display:none; pointer-events:none;  background-color: #0F6EC6;
        color: #fff; -webkit-border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-topright: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px; padding: 3px 12px;}

      .tag-container
      {
        width:300px; height:150px; overflow-y: auto; overflow-x: hidden; position:absolute;
      }
      .tag-container table
      {
        width:290px;
      }

      .tag-container td:hover
      {
        background:#aaf;
      }

      #font-name { float:left; margin-right: 15px !important;}
      .dd-selected { padding: 4px 5px !important; }

      .grid-overlay { display:none;  background-color: #f7f3ef; background-size:100% 100%; z-index:999; position:absolute; pointer-events:none;}
      .showme { color: #D7F500; font-weight: bold; pointer-events: all; text-decoration: underline;}
      .showme:hover { color:#D7F500; }
      .hideme { color: #D7F500; font-weight: bold; pointer-events: all; display:none; text-decoration: underline;}
      .hideme:hover { color:#D7F500; }
      .deleteall { color: #D7F500; font-weight: bold; pointer-events: all;  text-decoration: underline;}
      .deleteall:hover { color:#D7F500; }

      .filterContainer { width: 500px; margin: 0 auto; background:#eee; border:1px solid #ddd; padding: 10px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; font-size:11px;}
      .filterContainer ul { list-style: none; }
      .filterContainer li { margin: 0 5px 0 22px; float:left; }
      .filterContainer input { margin: 0 5px 0 0; float:left;}
      .filterContainer label { float:left; font-weight: normal; margin-top: -3px;}
      .filterContainer .filtertitle { font-weight:bold; float:left; }
      .resultsContainer { margin-top: 10px; position:relative;}

      input[placeholder], [placeholder], *[placeholder] {
   color:#666;
}

#canvas-outer { border:1px solid #808080; width: 100%; display:none;}
.orbit-slides-container { overflow:hidden; height: 130px !important;}
.orbit-slides-container .th.radius { margin-top: 1px;}
.backlink {  position: absolute; left: 10px; top: 0px; height: 100%; width: 35px; font-size:11px; text-decoration: underline; background:#f00; -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
display:none; position: absolute;
  left: 0;}

.image-toolbar .backlink-inner { height: 100%; transform: rotate(90deg);
  transform-origin: left top 0; position:relative; left: 20px; top: 110px;}

.text-toolbar .backlink-inner { height: 100%; transform: rotate(90deg);
  transform-origin: left top 0; position:relative; left: 20px; top: 35px;}


  #preview { max-height: 250px; max-width:250px; width: 25%; float: right; position: absolute; top: 0px; right: 0px; height: auto;}
  #preview_message { float:right; position:absolute; right:0; top: 200px; text-transform: uppercase; color: #888; font-size: 12px;}
  #preview-spinner { width: 14px; height:14px;}

  #help-container { width:60%; clear:both; margin-left:80px; display:none; padding-top:5px;}


  /*
  Icon Font: fontcustom
*/

@font-face {
  font-family: "fontcustom";
  src: url("./fontcustom_e47651c53e1a3b046e270a69548f7407.eot");
  src: url("./fontcustom_e47651c53e1a3b046e270a69548f7407.eot?#iefix") format("embedded-opentype"),
       url("./fontcustom_e47651c53e1a3b046e270a69548f7407.woff") format("woff"),
       url("./fontcustom_e47651c53e1a3b046e270a69548f7407.ttf") format("truetype"),
       url("./fontcustom_e47651c53e1a3b046e270a69548f7407.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before { content: attr(data-icon); }

[data-icon]:before,
.icon-bottom-layer:before,
.icon-top-layer:before {
  font-family: "fontcustom";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.icon-bottom-layer:before { content: "\f100"; }
.icon-top-layer:before { content: "\f101"; }

/*
  Icon Font: showgrid
*/

@font-face {
  font-family: "showgrid";
  src: url("./showgrid_4cd0558027c4b1a77de237de61631ecc.eot");
  src: url("./showgrid_4cd0558027c4b1a77de237de61631ecc.eot?#iefix") format("embedded-opentype"),
       url("./showgrid_4cd0558027c4b1a77de237de61631ecc.woff") format("woff"),
       url("./showgrid_4cd0558027c4b1a77de237de61631ecc.ttf") format("truetype"),
       url("./showgrid_4cd0558027c4b1a77de237de61631ecc.svg#showgrid") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "showgrid";
    src: url("./showgrid_4cd0558027c4b1a77de237de61631ecc.svg#showgrid") format("svg");
  }
}

[data-icon]:before { content: attr(data-icon); }

[data-icon]:before,
.icon-showgrid:before {
  display: inline-block;
  font-family: "showgrid";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.icon-showgrid:before { content: "\f100"; }
.icon-showgrid { margin-top: 3px;}
#is_searching{
      position: relative;
    width: 150px;
    height: 28px;
    right: 0;
    float: right;
    top: -40px;
    padding: 4px 10px;
    color:#a2a2a2;
     background: #ffd;
     display: none;

}

#image_types
{
  font-size:12px;
  margin-left:-10px;
}
#image_types input
{
  margin: 0 4px 5px 10px;
}


.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-aclonica {
    width: 90px;
    height: 18px;
    background-position: -5px -5px;
}

.sprite-acme {
    width: 55px;
    height: 18px;
    background-position: -105px -5px;
}

.sprite-allura {
    width: 70px;
    height: 18px;
    background-position: -170px -5px;
}

.sprite-archivonarrow {
    width: 134px;
    height: 18px;
    background-position: -5px -33px;
}

.sprite-balthazar {
    width: 99px;
    height: 18px;
    background-position: -149px -33px;
}

.sprite-candal {
    width: 88px;
    height: 18px;
    background-position: -5px -61px;
}

.sprite-cinzel {
    width: 83px;
    height: 18px;
    background-position: -103px -61px;
}

.sprite-clickerscript {
    width: 82px;
    height: 18px;
    background-position: -5px -89px;
}

.sprite-cookie {
    width: 52px;
    height: 18px;
    background-position: -196px -61px;
}

.sprite-dosis {
    width: 45px;
    height: 18px;
    background-position: -97px -89px;
}

.sprite-exo {
    width: 36px;
    height: 18px;
    background-position: -152px -89px;
}

.sprite-gildadisplay {
    width: 110px;
    height: 18px;
    background-position: -5px -117px;
}

.sprite-gochihand {
    width: 135px;
    height: 18px;
    background-position: -125px -117px;
}

.sprite-inder {
    width: 54px;
    height: 18px;
    background-position: -198px -89px;
}

.sprite-montaga {
    width: 73px;
    height: 18px;
    background-position: -5px -145px;
}

.sprite-novaslim {
    width: 106px;
    height: 18px;
    background-position: -88px -145px;
}

.sprite-novasquare {
    width: 106px;
    height: 18px;
    background-position: -5px -173px;
}

.sprite-nunito {
    width: 74px;
    height: 18px;
    background-position: -121px -173px;
}

.sprite-oleoscript {
    width: 76px;
    height: 18px;
    background-position: -5px -201px;
}

.sprite-orbitron {
    width: 105px;
    height: 18px;
    background-position: -91px -201px;
}

.sprite-oregano {
    width: 51px;
    height: 18px;
    background-position: -204px -145px;
}

.sprite-overlock {
    width: 85px;
    height: 18px;
    background-position: -5px -229px;
}

.sprite-poiretone {
    width: 101px;
    height: 18px;
    background-position: -100px -229px;
}

.sprite-prata {
    width: 61px;
    height: 18px;
    background-position: -205px -173px;
}

.sprite-roboto {
    width: 75px;
    height: 18px;
    background-position: -5px -257px;
}

.sprite-ruluko {
    width: 64px;
    height: 18px;
    background-position: -206px -201px;
}

.sprite-sniglet {
    width: 54px;
    height: 18px;
    background-position: -211px -229px;
}

.sprite-specialelite {
    width: 133px;
    height: 18px;
    background-position: -90px -257px;
}

.sprite-spinnaker {
    width: 90px;
    height: 18px;
    background-position: -250px -5px;
}

.sprite-yesevaone {
    width: 134px;
    height: 18px;
    background-position: -233px -257px;
}

#progress
{
    width: 40%;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 3px;
    height: 23px;
}

#progress .bar
{
  width:0; background:#3b7; height:15px; background-position: left;
}

#progress .green
{
   background:url('../images/greenbar.gif'); 
}

#progress .orange
{
  width:0; background:url('../images/orangebar.gif'); 
}

#progress .text
{
    width: 100%;
    text-align: center;
    position: relative;
    top: -15px;
    font-size: 12px;
    padding-top: 2px;
    color: #666;
}

#delete-helper
{
  float:left; display:none; margin-left: 5px; padding-top: 5px;
}

#print_template
{
  float:right; padding: 5px 10px; border: 1px solid #999; border-top: none; background: #d3bc3c; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; 
}

#print_template a { color:#63581c; }
#print_template:hover a { color:#fff; }