@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700&display=swap');
/* ================= website setup ================= */
*[data-clickaction],*[data-control],*[data-href]:not(.disabled) {cursor:pointer !important;}
video,canvas,img,iframe {max-width:100%;}
footer,header,menu,nav,section,main {display:block;width:100%;max-width:100%;}
body {color:#222;}
#maindiv {padding:5px;max-width:1024px;}
#maindiv > main {box-sizing:border-box;}
#maindiv > main * {box-sizing:border-box;}
#maindiv > main table {border-spacing:0;border-collapse:collapse;empty-cells:show;}
#maindiv > main li {list-style-position:inside;list-style-type:none}
#maindiv > main *:not(input):not(textarea):not(select), .noselect {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
section.designer {background:#DDD;padding:4px;}
input, select, textarea {font-family::Arial,Helvetica;}
input[type="file"] {width:0px;height:0px;position:absolute;left:-9999px;}
input:not([type="radio"]):not([type="checkbox"]), select, textarea, .priceinput, div.numericstepper > span.value, div.combo > p {border:1px solid #BBB;background:#FFF;color:#666;padding:2px 6px;}
input:not([type="radio"]):not([type="checkbox"]):active,select:active,textarea:active {border-color:#77be40;color:#000}
input:not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus {border-color:#77be40;color:#000;}
input:not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled {border-color:#DDD;background-color:#DDD;color:#999;cursor:not-allowed}
input[name="qty"],input[name="zip"],input.short {width:5em !important;}
input[type="number"] {padding-right:0px !important;}
input[type="radio"],input[type="checkbox"],label:not(.button) {vertical-align:middle;}
input.error,textarea.error,input.error:focus,textarea.error:focus {border-color:#DB3E4A !important;background:#FFB !important;}
div.designerpopup input,div.designerpopup textarea {padding:4px 6px !important;font-size:14px;}
button:focus,input:focus,textarea:focus,select:focus {outline:0;}
button,.button,input[type="button"] {font-weight:normal;background:#77be40;border:1px solid #008f44;color:#FFF;vertical-align:middle}
button:hover,.button:hover,input[type="button"]:hover {background:#11466C;}
button.delete,.button.delete  {background-color:#C00;color:#FFA;}
button.disabled,.button.disabled,input[type="button"].disabled,.button.disabled,button.disabled:hover,.button.disabled:hover {background:#DDD;color:#999;cursor:initial !important;}
button.large,.button.large {display:block;width:100%;margin-top:5px;font-size:1.4em;}
button > span.fa,.button > span.fa {margin-right:10px}
button span.fa-chevron-right,.button span.fa-chevron-right {margin-right:0px;margin-left:10px;}
button > img,.button > img {margin-right:10px;vertical-align:middle;max-height:24px}
label.button {font-size:1.1em;line-height:1.3em}
div.bigbuttons > button {width:100%;display:block;font-size:1.25em}
div.bigbuttons > button + button {margin-top:5px;}
pre,#tracebox > p {margin:5px 0px;padding-left:5px;border-left:4px solid #DDD;font-size:12px;line-height:12px;font-family:courier;color:#000}
input[type="checkbox"] + label,.anchor {cursor:pointer;}
select[name="size"] {font-size:14px;}
#stage {width:100%}
.condens {font-family:'Open Sans Condensed',Arial,sans-serif;font-size:14px;line-height:14px;font-weight:normal;font-weight:300;font-style:normal}
.input.condens {font-size:16px;line-height:16px;}
i[data-option] {margin:0 4px;color:#999;}
  
html body .hidden {display:none !important;}
span.fa {text-align:center;width:1.28571em;}
.center {text-align:center;}
.fleft {float:left}
.fright {float:right}
.clear:after {content:"";display:block;clear:both;}
.block {display:block !important;width:100% !important;margin:2px 0px;}
.infoblock {border-top:1px solid #080;border-bottom:1px solid #080;color:#080;margin:0.5em 0px;padding:0.5em;background:rgba(0,180,0,0.05);text-align:center;font-weight:bold}
.gap {margin:10px 0px;padding:10px 0px;}
.gapdown {margin-bottom:5px;padding-bottom:5px;}
.pad5 {padding:5px;}
.inline {display:inline;}
.inliner > div {display:inline-block;vertical-align:top;margin:5px}
.inliner > div.inliner {margin:0;}
.border {border:1px solid #32A543;padding:5px;border-radius:6px;}
.border.disabled {border-color:#AAA;position:relative;}
.border.disabled:before {content:"";position:absolute;width:100%;height:100%;top:0px;left:0px;background:rgba(255,255,255,0.5);cursor:not-allowed;border-radius:6px;}
.note,.info {color:#999;font-style:italic;font-size:0.95em;}
.font2x {font-size:1.6em;}
.small {text-align:center;font-size:12px;line-height:12px;font-family:Arial,Helvetica;}
span.swatch, span[data-type="inkcolor"] {display:inline-block;width:22px;height:22px;border:1px solid #DDD;overflow:hidden;cursor:pointer;font-size:0px;vertical-align:middle;margin:1px;text-align:right}
span.swatch > span, span[data-type="inkcolor"] > span {display:inline-block;width:50%;height:100%}
.disabled {background-color:#DDD !important;border-color:#DDD !important;color:#FAFAFA !important;cursor:not-allowed !important;}
.disabled img {-ms-filter:grayscale(100%);-webkit-filter:grayscale(100%);filter:grayscale(100%);opacity:0.4}
div.disabled, section.disabled {position:relative;}
div.disabled:before, section.disabled:before {content:"";position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:9;cursor:not-allowed;background:rgba(200,200,200,0.05);}
div.row {display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch}
div.row > div {width:50%;margin:0px;padding:10px;}
#boxcart div.row > div {padding:0px 10px}
.inch:after, .feet:after, .foot:after  {vertical-align:top;font-weight:bold;}
.inch:after {content:"\2033";}
.feet:after,.foot:after {content:"\2032";}
.degres:after {content: "\00b0";}
p.line {border-top:1px solid #999;margin:10px 0px;position:relative}
p.line > span {display:block;font-weight:bold;padding:2px 6px;background:#FFF;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);}
div.editbox img {width:100%;max-width:32px;max-height:32px;}
div.editbox div.combo img {max-height:25px;max-width:120px;}
.relative {position:relative;}
.br {margin:4px 0px;}
div.help {display:inline-block;margin-left:5px;width:18px;height:18px;cursor:pointer;background:#008B00;color:#FFF;border-radius:50%}
div.help:before {content:"?";font-family:Arial,helvetica;font-size:14px;width:100%;display:block;;text-align:center;color:#FFF}
#boxhelp span[style] {font-size:14px !important;}

#productinfo {padding:5px 10px !important;margin:10px 0px;}
div.flex {display:flex;align-items:stretch;flex-wrap:nowrap}
div.flex > div {min-width:320px;}

div.items {text-align:center;}
div.items > a {display:inline-block;margin:5px;padding:5px;border:1px solid #DDD;}
div.items > a > img {display:block;margin:0px auto 5px auto;width:120px;height:120px;} 
div.sizepreview {display:inline-block;border:1px solid #AAA;box-shadow:0px 0px 4px #000;}

div.pcolors {display:inline-block;vertical-align:middle;border:1px solid #DDD;padding:2px 20px 2px 2px;cursor:pointer;position:relative;text-align:left;min-width:150px}
div.pcolors:after {content:"\f0d7";font-family:FontAwesome;color:#000;background:#FFF;width:12px;;position:absolute;right:1px;top:50%;transform:translateY(-50%);z-index:2}
div.pcolors img {vertical-align:middle;margin-right:10px;height:16px}
div.pcolors ul {background:#FFF;border:1px solid #DDD;padding:2px;position:absolute;left:0px;top:100%;display:none}
div.pcolors.open ul {display:block;z-index:99}
div.pcolors ul li {white-space:nowrap;padding:1px 2px}
div.pcolors ul li:hover {background:#FFE;}

.input {cursor:pointer;font-weight:normal}
.input:before {font-family:FontAwesome;display:inline-block;margin-right:5px;font-size:1em;vertical-align:middle;width:1.28571429em;text-align:center}
.input.checkbox:before {content:"\f096";} .input.checkbox.selected:before {content:"\f046";}
.input.radio:before {content:"\f10c";} .input.radio.selected:before {content:"\f192";}

.messagebox,.spinner {background:rgba(255,255,255,0.5);z-index:99998;position:fixed;top:0px;left:0px;width:100%;height:100%}
.spinner {text-align:center;}
.spinner > span {margin-top:25%;font-size:4em;color:#77be40;}
.spinner > img {cursor:pointer;position:relative;top:50%;transform:translateY(-50%);max-height:100%;margin:0px auto;}
.messagebox > div {border:1px solid #32A543;background:#FFF;max-width:350px;min-height:30px;margin:auto auto;position:relative;top:50%;transform:translateY(-50%);font-weight:normal;border-top-left-radius:8px;border-top-right-radius:8px}
.messagebox > div > h3 {background:#77be40;color:#FFF;margin:0px;padding:0px 6px;font-size:16px;line-height:26px;font-weight:normal;border-top-left-radius:6px;border-top-right-radius:6px}
.messagebox > div > h3 > span.fa {text-align:center;width:1.28571em;margin-right:5px}
.messagebox > div > h3 > span.fa-times-circle {float:right;cursor:pointer;margin:4px !important}
.messagebox > div > h3:after {content:"";display:block;clear:both;}
.messagebox div.boxcontent {padding:10px;}
.messagebox:not(.absolute) button {margin-top:10px;font-size:18px;line-height:32px;padding:0 10px;}
.messagebox > div.alert {border-color:#C00;}
.messagebox > div.alert > h3 {background:#C00;}
.messagebox > div.alert div.boxcontent {background:#FFB;color:#C00;}
.preloader {background:rgba(255,255,255,0.5);z-index:999;position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;cursor:pointer;}
.preloader > div {position:relative;top:50%;transform:translateY(-50%);max-height:100%;margin:0px auto;}
.preloader .fa-pulse {color:#000;font-size:24px;}
.floating {background:#FFF;padding:4px;border:2px solid #32A543;position:absolute;z-index:9999;max-width:600px}
.messagebox.absolute {position:absolute;top:0px;left:0px;right:0px;bottom:0px;}
.messagebox > div.floating {margin:0px;padding:0px;position:relative;max-width:600px;top:0px;transform:unset;}
.messagebox > div.floating > h3 {cursor:move;}

div.combo {position:relative;display:inline-block;vertical-align:middle}
div.combo > p {cursor:pointer;position:relative;padding-right:20px}
div.combo > p:after {font-family:FontAwesome;content:"\f0d7";position:absolute;right:3px;top:50%;transform: translateY(-50%);}
div.combo > div {position:absolute;background:#FFF;padding:2px 2px 2px 5px;border-left:1px solid #BBB;border-bottom:1px solid #BBB;border-right:1px solid #BBB;z-index:999;display:none;overflow:auto;max-height:100vh;width:130px;white-space:nowrap;}
div.combo.open > div {display:block;}
div.combo > div > p {cursor:pointer;color:#444}
div.combo > div > p:hover {background:#EEE;color:#FFF;}

/* ================= designer setup ================= */
#designer {display:flex;align-items:stretch;margin:4px 0px;position:relative}
#designer > main {min-height:auto;margin:0px;background:linear-gradient(to right,#EEE 0%,#FFF 30%,#FFF 70%,#EEE 100%);}
#designer a {font-weight:normal;font-size:inherit}

#designer > aside,#designer > main, #productinfo {padding:4px;border:1px solid #BBB;box-shadow:0 0 4px #BBB;}
/* aside */
#designer > aside {width:300px;margin-right:10px;flex-shrink:0;}
#designer > aside td {padding:2px 4px;}
#designer > aside > header {border:1px solid #DDD;background:linear-gradient(to bottom,#EEE 0%,#FFF 49%,#EEE 100%);padding:4px;margin-bottom:10px}
#designer > aside > header > h3 {margin:0px;padding:0px;}
#designer > aside > header > h3 > b {background:#000;color:#FFF;display:inline-block;padding:4px 8px;margin-right:10px;}
#designer > aside > header > h3 > span {border:1px solid #DDD;background:linear-gradient(to bottom,#EEE 0%,#FFF 49%,#EEE 100%);color:#444;display:inline-block;padding:4px 8px;cursor:pointer;min-width:60%;text-align:center}
#designer > aside > main {border:1px solid #DDD;background:linear-gradient(to right,#EEE 0%,#FFF 30%,#FFF 70%,#EEE 100%);padding:2px;height:calc(100% - 46px);max-height:100vh}
#designer > aside > main > nav > ul {padding:0px;margin-bottom:5px;display:flex;align-items:stretch}
#designer > aside > main > nav > ul > li {display:block;padding:2px;text-align:center;border:1px solid #DDD;background:#FFF;color:#444;font-size:0;width:22%;margin:1.5%;cursor:pointer;box-shadow:2px 2px 2px #444}
#designer > aside > main > nav > ul > li img {display:block;margin:0px auto 4px auto;width:100%;max-width:50px}
#designer > aside > main > nav > ul > li > span {font-family:Verdana,Arial;font-size:11px;}
#designer > aside > main > nav > ul > li:hover:not(.disabled) {box-shadow:0px 0px 4px #77be40}
#designer > aside > main > nav > ul > li.disabled {box-shadow:none;color:#777 !important;}
/* main */
#designer > main > header > section {margin:0px 5px 5px 0px;display:flex;align-items:stretch}
#designer > main > header > section > div + div {margin-left:5px;padding-right:2px}
#designer > main > header > section nav > ul {padding:0px;margin-bottom:5px;display:flex;align-items:stretch}
#designer > main > header > section nav > ul > li {display:block;padding:2px;text-align:center;border:1px solid #DDD;background:#FFF;color:#444;width:20%;max-width:100px;cursor:pointer}
#designer > main > header > section nav > ul > li > a {color:#444;}
#designer > main > header > section nav > ul > li img {display:block;margin:4px auto 0px auto;max-height:30px}
#designer > main > header > section nav > ul > li + li {margin-left:2px;}
#designer > main > header > section nav > ul > li:hover:not(.disabled) {box-shadow:0px 0px 2px #444}
#designer > main > header > nav {display:none}
#designer > main > header > nav > ul {display:flex;align-items:stretch;margin-bottom:5px}
#designer > main > header > nav > ul > li {display:block;padding:4px;text-align:center;border:1px solid #DDD;background:#FFF;color:#444;font-size:12px;width:25%;cursor:pointer}
#designer > main > header > nav > ul > li > img {display:block;margin:4px auto 0px auto;}

#designer h6 {font-size:16px;color:#000;}

.thumb {display:inline-block;background-repeat:no-repeat;background-size:90%;background-position:50%;width:70px;height:70px;border:1px solid #DDD;cursor:pointer}
.thumb:hover {border-color:#77be40;}
#boxdesigns div.my-designs {font-size:0;}
#boxdesigns div.my-designs:after {content:"";display:block;clear:both;}
#boxdesigns div.my-designs > span {width:20%;max-width:120px;float:left;padding:2px;margin:0;border:1px solid #EEE;cursor:pointer}
#boxdesigns div.my-designs > span:hover {border-color:#77be40;}

.w50 {width:50%;display:inline-block;vertical-align:middle;}
.mrl {margin-left:10px;margin-right:10px;}
.mtb {margin-top:10px;margin-bottom:10px;}
.margindown {margin-bottom:0.8em;}
.margin {margin-bottom:10px;margin-top:10px;}
.info.left {text-align:left !important}
.overlay {position:relative;}
.overlay:before {content:" ";position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:9;background:rgba(255,255,255,0.7);cursor:not-allowed}
.bluelarge {font-weight:bold;color:#77be40;font-size:1.2em;}
.bluelarge + * {margin-top:10px;}
.bordertop {margin-top:8px;padding-top:8px;border-top:1px solid #999;}
.quickjump {cursor:pointer;}
.colorname {color:#999;font-family:Arial,Helvetica,serif;font-size:11px;line-height:12px;font-weight:normal;display:inline-block;max-width:80px;overflow:hidden;vertical-align:middle}
.degress:after {content:"\00b0";}
.checker {padding:5px;background:url(/images/site/checker.jpg);border:2px solid #C2C2C2;width:280px;height:280px;margin:5px auto;text-align:center;position:relative}
.checker > img {max-height:100%;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);}

div.inline > input[type="number"] {max-width:70px;}
span[data-type="inkcolor"] {vertical-align:middle;display:inline-block;margin:0px 2px;border:1px solid #DDD;cursor:pointer;}

.numstepperbox {color:#777;background:#FFF;display:inline-block;vertical-align:middle;font-size:0px}
.numstepperbox > div {display:inline-block;background:#FFF;vertical-align:top;text-align:center;padding:2px;border:1px solid #777;font-size:12px}
.numstepperbox > div > span:not(.layerscale) {line-height:26px;}
.numstepperbox > div > span.layerscale {line-height:13px;display:block}
.numstepperbox div.plusminus {cursor:pointer;background:#EEE}
.numstepperbox div.plusminus:hover,.numstepperbox div.plusminus:active {background:#77be40;color:#FFF;}
.numstepperbox div.plusminus > span.fa {font-size:20px}
.numstepperbox div.value {min-width:50px;border-left:none;border-right:none;}

.dprogressbar,.dprogressbar div {height:15px;border-radius:4px;display:block;}
.dprogressbar {margin:10px;position:relative;background:#F0F0F0;}
.dprogressbar div {position:absolute;background:#77be40;}
p.colorpicker span.label {font-size:1.4em;margin-left:5px;cursor:pointer}

/* ================= header/footer navigation ================= */
#designer > header > nav > ul:after, #designer > footer > nav > ul:after {content:"";display:block;clear:both;}
#designer > header > nav > ul > li, #designer > footer > nav > ul > li {background:#77be40;color:#FFF;display:block;float:left;width:25%;padding:8px;cursor:pointer;text-align:center;font-size:1.2em}
#designer > header > nav > ul > li:not(.disabled):hover, #designer > footer > nav > ul > li:not(.disabled):hover {background:#50BBFF;}
#designer > header > nav > ul > li > span.label, #designer > footer > nav > ul > li > span.label {margin-left:5px;}
#designer > header > nav > ul > li + li, #designer > footer > nav > ul > li + li {border-left:1px solid rgba(255,255,255,0.5);}
#designer > header > section > ul {display:flex;align-items:stretch;border-top:1px solid #32A543;}
#designer > header > section > ul > li {background:#77be40;color:#FFF;display:inline-block;cursor:pointer;text-align:center;font-size:0px;padding:4px;width:100px}
#designer > header > section > ul > li:not(.disabled):hover {background-color:#50BBFF;}
#designer > header > section > ul > li > span {position:relative;top:50%;transform:translateY(-50%);font-family:Arial,Helvetica,TitlesHelvetica;display:block;}
#designer > header > section > ul > li > span > * {display:inline-block;vertical-align:middle;}
#designer > header > section > ul > li img {max-height:26px;vertical-align:middle;}
#designer > header > section > ul > li span.label {font-size:13px;line-height:13px;margin-left:5px}
#designer > header > section > ul > li span.fa {font-size:18px;}
#designer > header > section > ul > li:first-of-type {flex-grow:1;text-align:left;padding-left:10px}
#designer > header > section > ul > li:first-of-type span.label {font-size:16px;}
#designer > header > section > ul > li:last-of-type {flex-grow:1;text-align:right;padding-right:10px}
#designer > header > section > ul > li:last-of-type span.label {font-size:16px;}
#designer > footer > nav li.buyDesign {background-color:#77be40;}
/* cart */
button.buyNow {height:48px;}
#boxcart div.addons span.input {font-size:14px;}
#boxcart div.noflutes, #boxcart.quote div.flutes {display:none;}
#boxcart.quote div.step2 > div.row:first-child > div:first-of-type {display:none;}
#boxcart.quote div.step2 > div.row:first-child > div:last-of-type {width:100%}
table.pricing td,table.pricing th {padding:2px 6px;font-size:13px;border:1px solid #32A543}
table.pricing > thead td {text-align:center;font-weight:bold}
table.pricing > tbody td,table.pricing th {text-align:right;}
table.pricing > thead {background:#77be40;color:#FFF;}

/* =====================  popup windows  ====================== */
div.designerpopup {background:rgba(255,255,255,0.5);z-index:999;position:absolute;top:0px;left:0px;width:100%;min-height:100vh}
div.designerpopup > div {width:98%;max-width:600px;border:1px solid #32A543;background:#FFF;position:relative;border-top-left-radius:8px;border-top-right-radius:8px}
div.designerpopup > div > h3 {background:#77be40;color:#FFF;padding:0px 6px;font-size:16px;line-height:26px;margin:0px;font-weight:normal;cursor:move;border-top-left-radius:6px;border-top-right-radius:6px}
div.designerpopup > div > h3:after {content:"";display:block;clear:both;}
div.designerpopup > div > h3 > span.fa-times-circle {float:right;margin:4px;cursor:pointer;z-index:3}
div.designerpopup > div > div {padding:5px;max-height:90vh;overflow-y:auto;}
div.designerpopup h6 {color:#77be40;font-weight:bold;font-size:1.1em;}
div.designerpopup .info {line-height:1.05em;text-align:left}
div.popup {position:absolute;top:0px;left:0px;max-width:90%;background:#77be40;padding:4px;font-size:13px;z-index:99}
div.popup > span.fa {position:absolute;top:-20px;left:0px;color:#77be40;font-size:30px;}
div.popup.centerarrow > span.fa {left:50%;transform:translateX(-50%);}
div.popup > div {background:#FFF;color:#444;padding:2px;}
div.colorpicker {;max-width:378px;}
div.popup.colorpicker p {padding:5px;color:#FFF;font-size:16px;}
div.popup.showBorder {min-width:180px;}
div.sidepicker {right:2px;left:auto;}
div.sidepicker div.options {max-width:320px;padding:10px}
div.sidepicker div.options > div + div {margin-top:8px;padding-top:8px;border-top:1px solid #DDD;}
div.popup.sidepicker > span.fa {right:0px;left:auto}
div.inkcolors {border:1px solid #3C5984;background:#FFF;padding:2px;width:174px;position:absolute;display:none;z-index:999;}
div.inkcolors > div.latest {border-bottom:1px solid #EEE;margin-bottom:1px;padding-bottom:1px}
div.inkcolors > div.latest > i {display:block;text-align:center;color:#AAA}
div.inkcolors > div.matchpms {cursor:pointer;border-bottom:1px solid #EEE;margin-bottom:1px;padding-bottom:1px}
div.inkcolors > div.colors {overflow:auto;max-height:220px;padding:2px}
div.inkcolors > div.colors:after,div.inkcolors > div.latest:after {content:"";display:block;clear:both;}
div.inkcolors span {display:block;float:left;width:22px;height:22px;margin:1px;cursor:pointer;border:1px solid #DDD;}
table.bordervals td {padding:2px 6px;white-space:nowrap;}
div.colors {font-size:0;}
div.colors > span.input.checkbox {display:inline-block;}
div.colors > span.input.checkbox:before {font-size:14px;margin:0}

/* ================= controls ================= */
#designer > aside div.edit img {max-width:36px;max-height:36px;}
.toolboxline {padding:5px 0px;position:relative;}
.colorbutton:not(.disabled):before {font-family:FontAwesome;content:"\f0d7";margin-right:10px;font-size:1.25em;vertical-align:middle;width:1.28571429em;text-align:center;font-size:1.25em}
.colorbutton > img {width:14px;height:14px;margin-right:10px;vertical-align:middle;}
#spicker {position:absolute;background:#FFF;border:1px solid #77be40;padding:4px;display:none;right:140px}
#spicker:after {content:"";display:block;clear:both;}
#spicker > div {float:left;font-size:10px;text-align:center;padding:2px;border:1px solid #EEE;margin:2px;cursor:pointer}
#spicker > div.selected {border-color:#77be40;}
#spicker > div > img {width:120px;height:120px;display:block;margin:0px auto 4px auto}
div.select {display:inline-block;vertical-align:middle;border:1px solid #BBB;padding:2px 2px 2px 6px;color:#666;background:#FFF;cursor:pointer;width:150px;overflow:hidden;position:relative;height:22px;text-align:left}
div.select:after {content:"\f0d7";font-family:FontAwesome;color:#000;background:#FFF;width:12px;;position:absolute;right:1px;top:50%;transform:translateY(-50%);z-index:2}
div.select > span > img {vertical-align:middle;margin-right:10px;}
.fonts {position:absolute;max-width:320px;background:#FFF;border:1px solid #BBB;padding:2px;display:none;z-index:999}
.fonts > p {margin:2px 0px;}
.fonts > p > select {width:100%;display:block;}
.fonts > div {max-height:320px;overflow:auto;margin-top:5px;width:160px}
.fonts > div > div {cursor:pointer;border:1px solid #FFF;min-height:20px;min-width:120px;text-align:center}
.fonts > div > div.selected {border-color:#000}
.fonts > div > div:hover {border-color:#50BBFF}
.fonts > div > div > img {height:20px;max-width:160px !important;vertical-align:middle}
div.controls:not(.block) {display:inline-block;}
div.controls:not(.block) + div.controls:not(.block) {margin-left:5px;}
div.controls.block {display:block;}
div.controls.block + div.controls,div.controls + div.controls.block {margin-top:5px;}
div.controls > p {margin-bottom:4px;font-size:13px;line-height:13px;}
.controls:not(.icons) img {height:27px;max-height:27px !important;}
.controls.icons {margin:0px auto;}
.controls.icons img {width:28px;height:28px;cursor:pointer;}
.controls.icons td {padding:0px 4px;}
#controls {visibility:hidden;position:absolute;min-width:60px;max-width:260px;background:#77be40;padding:4px;border-radius:4px;font-size:13px;z-index:999;box-shadow:0px 0px 2px #000;top:10px;left:10px;}
#controls:before {bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(0,0,0,0);border-bottom-color:#77be40;border-width:10px;margin-left:-10px;}
#controls > header {font-size:0px;color:#FFF}
#controls > header > img {height:22px;cursor:pointer;vertical-align:middle;margin:0px 4px}
#controls > header > div {display:inline-block;vertical-align:middle;font-size:14px}
#controls > header > div.expander {width:26px;height:24px;cursor:pointer;}
#controls > header > div.expander:before {content:"\f107";font-family:FontAwesome;color:#FFF;font-size:24px;line-height:24px;text-align:center;display:block;width:26px}
#controls.open > header > div.expander:before {content:"\f106";}
#controls > header div.closeds {padding-left:5px;}
#controls > main {background:#FFF;padding:4px;display:none;margin-top:5px;font-size:12px;font-family:Arial,Helvetica,serif;min-height:auto}
#controls > main > nav {border-bottom:1px solid #DDD;margin-bottom:5px;padding-bottom:5px;}
#controls.open > main {display:block}
#controls:not(.open) .openonly {display:none;}
#controls.open .openonly {display:inline-block;}
#controls select {vertical-align:middle;}
#controls .input.checkbox:before {font-size:1.4em;}
#controls .combo {display:inline-block;vertical-align:middle}
#controls .combo img {max-height:16px;}
span.controlscheck {font-size:20px;vertical-align:middle;cursor:pointer;color:#DDD}
span.controlscheck:before {content:"\f096";font-family:FontAwesome;display:inline-block;vertical-align:middle;}
span.controlscheck.selected:before {content:"\f046";color:#0066B3}
div.clipcolors {text-align:center;}
div.alignlayer,div.stretchlayer {font-size:0px;position:absolute;white-space:nowrap;top:35px;left:-10px;background:#FFF;display:none;z-index:99}
div.alignlayer.show,div.stretchlayer.show {display:block;}
div.alignlayer span {display:inline-block;width:25px;height:25px}
div.alignlayer img {cursor:pointer;}
div.stretchlayer > div {font-size:12px;padding:2px;margin:2px;border:1px solid #DDD}

div.fader {width:100px;position:relative;height:4px;background:linear-gradient(to right,#EEE,#000);margin:12px 20px}
div.fader:before {content:url("/images/designer/ico-fade-down.png");position:absolute;left:-12px;top:50%;transform:translateY(-50%);}
div.fader:after {content:url("/images/designer/ico-fade-up.png");position:absolute;right:-12px;top:50%;transform:translateY(-50%);}
div.fader > span {content:"";width:12px;height:12px;display:block;background:#77be40;border:1px solid #000;position:absolute;top:-4px;cursor:pointer;z-index:9}

/* ================= wrappers ================= */
#divdesigner {display:flex;justify-content:center;align-items:stretch;}
#dside {flex-grow:1;flex-shrink:2;margin-right:10px;padding:5px;background:#FFF;border:1px solid #77be40;}
#stage {flex-grow:0;flex-shrink:0}

/* ================= toolbox ================= */
#dside > div:not(:first-child) {display:none;}
.dsidepanel > h1 {margin-bottom:1em !important;text-align:center;position:relative;font-size:1.4em;padding:0px 6px 0px 36px !important;line-height:38px !important}
.dsidepanel > h1 > span.fa-arrow-left {font-size:20px;width:30px;height:30px;line-height:26px;border:2px solid #FFF;position:absolute;cursor:pointer;left:4px;top:4px;border-radius:50%;}
#dsideedit > h1 {text-transform:uppercase;font-family:"Trebuchet MS";font-size:14px;text-align:center;margin-bottom:5px}
#dsidebuttons button {margin:2px 0px;min-width:170px;line-height:2em}
.dropdown h5 {background:#77be40;color:#FFF;font-size:14px;line-height:25px;cursor:pointer;padding:0px 5px 0px 10px;margin-top:5px;}
.dropdown h5:after {content:"";display:block;clear:both;}
.dropdown h5 span.fa {margin-right:5px;vertical-align:middle;}
.dropdown h5 span.title {float:right;}
.dropdown > div {display:none;}
.dropdown > h5 + div {margin-top:10px;}
#qualitymeter {width:100%;position:relative;height:30px;overflow:hidden;padding-top:5px;background:url(/images/site/slider-thumbs.png) center top no-repeat;display:block}
#qualitymeter > div {position:absolute;height:20px;width:600px;cursor:pointer;left:320px;background:#046D07}
#qualitymeter > div > div {display:block;width:80px;height:20px;float:left;text-align:center;line-height:20px}
#qualitymeter > div > div:nth-child(1) {background:linear-gradient(to right,#900000,#F00);color:#FFF}
#qualitymeter > div > div:nth-child(2) {background:linear-gradient(to right,#FF7B07,#FCF94E);color:#000;}
#qualitymeter > div > div:nth-child(3) {background:linear-gradient(to right,#FCF94E,#4BAF4F);color:#000;}
#qualitymeter > div > div:nth-child(4) {background:linear-gradient(to right,#4BAF4F,#046D07);color:#FFF;}
#qualitydpi {font-style:italic;color:#999;font-size:0.9em}
#qualitydpi > span {font-weight:bold;}
.inchsize {text-align:center;color:#999;width:45%;padding-left:10px;display:inline-block;vertical-align:middle}

/* ================= upload image ================= */
#boxuploadpop {display:none;}
#divmyimages {margin-top:10px;border:1px solid #EEE;padding:4px;height:190px;overflow-y:auto}
#divmyimages > div {padding:20px 10px;color:#CCC;text-transform:uppercase;font-size:22px;text-align:center}
#divmyimages > span.thumb {cursor:pointer;margin:2px}

/* ================= custom text ================= */
#dsidetext input[type="text"],#dsidetext textarea {display:block;width:100%;border:1px solid #77be40;font-size:1.2em;margin:0.5em 0px}
#dsidetext textarea {height:60px;display:none}
#boxtextwizard .padleft {padding-left:25px;}
#boxtextwizard input,#boxtextwizard textarea {width:100%;display:block;padding:4px;font-size:14px}
#boxtextwizard textarea {height:90px;}
#boxtextwizard .input {font-size:15px;}
div.droptext > div > *,div.droptexteffect > div > * {margin-bottom:4px;}
div.droptext span.fa,div.droptext select {margin-right:5px;}
span.textoutline,span.textshadow {cursor:pointer;display:inline-block;width:75px;color:#AAA}
span.textoutline.selected,span.textshadow.selected {color:#000}
span.textoutline:before,span.textshadow:before {content:"\f096";font-family:FontAwesome;display:inline-block;margin-right:5px;color:#DDD;vertical-align:middle;width:1.28571429em;text-align:center}
span.textoutline.selected:before,span.textshadow.selected:before {content:"\f046";color:#01A2AA}
span.faopt {border:1px solid #AAA;padding:2px 4px;cursor:pointer;font-size:16px;color:#AAA;margin:0px 1px !important}
span.faopt.selected {background:#3C5984;border-color:#3C5984;color:#FFF}

/* ================= cliparts ================ */
div.leftsidepanel {display:flex;align-items:stretch;border-top:1px solid #DDD;margin-top:4px;padding-top:4px;}
div.leftsidepanel > div:first-of-type {width:230px;margin-right:5px}
div.leftsidepanel > div:last-of-type {width:100%;flex-grow:1;}
#boxclipartwizard div.inline {display:inline-block;vertical-align:top;}
#boxclipartwizard div.inline + div.inline {margin-left:10px;}
#boxclipartwizard div.categories {border:1px solid #DDD;padding:2px;height:425px;overflow-y:auto;}
#boxclipartwizard div.categories li {list-style:none;cursor:pointer;font-family:Arial,Helvetica;font-size:14px;line-height:16px}
#boxclipartwizard div.categories li:before {content:"\f0da";font-family:FontAwesome;font-size:20px;display:inline-block;vertical-align:middle;color:#FFF;width:15px;}
#boxclipartwizard div.categories li.expander:before {content:"\f0da";color:#000}
#boxclipartwizard div.categories li.expander:not(.closed):before {content:"\f0d7";}
#boxclipartwizard div.categories li > span:before {content:"\f096";font-family:FontAwesome;font-size:15px;display:inline-block;vertical-align:middle;color:#AAA;width:20px;}
#boxclipartwizard div.categories li.selected > span:before {content:"\f046";color:#77be40}
#boxclipartwizard div.categories li > ul {margin-left:15px}
#boxclipartwizard div.categories li.closed > ul {display:none;}

#boxclipartwizard div.cliparts {border:1px solid #DDD;margin:5px 0px;padding:2px;height:405px;overflow:auto;position:relative}
#boxclipartwizard div.cliparts.disabled:before {content:" ";position:absolute;left:0px;top:0px;width:100%;height:100%;background:rgba(255,255,255,0.5);z-index:99}
#boxclipartwizard div.cliparts > img {width:13.2857%;margin:4px 0.5%;cursor:pointer;border:1px solid #FFF}
#boxclipartwizard div.cliparts > img:hover {border-color:#77be40;}

/* ================= responsive ================ */
@media(max-width:1000px){
  #designer {display:block}
  #designer > aside {margin:0px;display:none;position:absolute;}
  #designer > main {padding:4px;}
  #designer > main > header > nav {display:block}
  #designer > main > header > nav > ul > li > img {height:60px !important;}
  #controls {visibility:visible;}    
}
@media(max-width:710px){
  #designer > header > nav > ul > li > span.label, #designer > footer > nav > ul > li > span.label {display:none}
  #designer > header > nav > ul > li > span.fa, #designer > footer > nav > ul > li > span.fa {font-size:2em}
  #designer > header > section > ul > li {width:auto}
  #designer > header > section > ul > li:not(:first-of-type):not(:last-of-type) span.label {display:none;}
  div.flex {flex-wrap:wrap}
  div.flex > div {margin:5px;}  
}
@media(max-width:610px){
  table.centered.headertab td {display:block;text-align:center !important;width:100% !important;}  
  div.row {flex-wrap:wrap;}
  div.row > div {width:100%;}
}
@media(max-width:520px){
  #designer > main > header nav li span:not(.fa) {display:none;}
  button.buyNow {height:auto;min-height:36px}
}
@media(max-width:380px){
  #designer > main > header > nav > ul > li > img {height:40px !important;}
  #designer > header > nav > ul > li > span.fa, #designer > footer > nav > ul > li > span.fa {font-size:1.5em}
  #designer > header > nav > ul > li,#designer > footer > nav > ul > li {border-radius:0px !important;}
  #designer > header > section > ul > li span.label {display:none;}
  button.buyNow > img {display:none}
}