@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700|Open+Sans:400,400i,700,700i|Oswald');
/* =====================  reset/setup  ====================== */
footer,header,menu,nav,section,main {display:block}
#maindiv {overflow:hidden;}
section.designer {font-family:"Open Sans",Helvetica,Arial;font-size:13px;line-height:normal;position:relative;max-width:1200px;margin:0 auto}
section.designer *, .messagebox * {box-sizing:border-box;}
section.designer > h1 {margin:5px 0px;padding:0px;}
section.designer table {border-spacing:0;border-collapse:collapse;empty-cells:show;}
section.designer td {padding:2px 4px;vertical-align:middle;display:table-cell}
section.designer li {list-style-position:inside;}
section.designer nav li {list-style-type:none} 
section.designer img {max-width:100% !important;}
section.designer *:not(input) {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
input[type="file"] {width:0px;height:0px;position:absolute;left:-9999px;}
section.designer [data-type="inkcolor"],section.designer .quicklink,section.designer [data-control],section.designer [data-clickaction] {cursor:pointer;}
section.designer span[data-type="inkcolor"] {vertical-align:middle;display:inline-block;width:22px;height:22px;margin:0px 2px;border:1px solid #DDD}
section.designer input.qty {max-width:45px;}
section.designer input:not([type="radio"]):not([type="checkbox"]),section.designer select,section.designer textarea {border:1px solid #BBB;background:#FFF;color:#666;padding:2px 6px;font-family:Arial;font-size:1em}
section.designer input:not([type="radio"]):not([type="checkbox"]):active,section.designer select:active,section.designer textarea:active {border-color:#00b3ff;color:#000}
section.designer input:not([type="radio"]):not([type="checkbox"]):focus,section.designer select:focus,section.designer textarea:focus {border-color:#00b3ff;color:#000;}
section.designer input:not([type="radio"]):not([type="checkbox"]):disabled,section.designer select:disabled,section.designer textarea:disabled {border-color:#DDD;background-color:#DDD;color:#999;cursor:not-allowed}
section.designer input:not([type="radio"]):not([type="checkbox"]).error,section.designer textarea.error,section.designer input:not([type="radio"]):not([type="checkbox"]).error:focus,section.designer textarea.error:focus {border-color:#DB3E4A;background:#FFB;}
section.designer input[type="number"] {padding-right:0px !important;}
section.designer input[type="radio"],section.designer input[type="checkbox"],section.designer label {vertical-align:middle;}
section.designer input[type="checkbox"] + label {cursor:pointer;}
section.designer input:required,section.designer textarea:required {border-left:2px solid #f77b4a !important;}
section.designer .fa {text-align:center;width:1.28571em;}
section.designer label,.messagebox label {font-family:"Open Sans Condensed";font-weight:normal;font-size:15px;cursor:default}
table.names input,table.names select {padding:1px;min-width:35px;}
#dside img {max-width:60px;max-height:60px;}
input.hasval {background-color:#FF9;border-color:#0A0;color:#000}
button:focus,input:focus,textarea:focus,select:focus {outline:0;}
button,.button {background:#b0ca1d;color:#FFF;font-family:Oswald,cursive;font-size:14px;font-weight:normal;cursor:pointer;padding:2px 14px;text-transform:uppercase;min-width:80px;text-align:center;transition:all 0.2s;}
button:hover,.button:hover {background:#40314d;color:#FFF;text-decoration:none !important;}
button.delete {background-color:#C00;color:#FFA;}
button.disabled,.button.disabled {background:#DDD;color:#999;cursor:initial !important;}
.button {display:inline-block;cursor:pointer !important}
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.large,.button.large {font-size:2em;}
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}
h1,h2,h3,h4,h5,h6 {font-weight:normal;line-height:1.1em;text-transform:uppercase}
h1,h2 {font-size:1.8em;font-family:Oswald,cursive;margin:5px 0px;}
h3,h4,h5,h6 {font-size:1.4em;margin:5px 0px;font-family:Arial,Helvetica;}
section.cart h6 {color:#0066b3;font-weight:bold;font-size:1.3em}
.infoblock {width:100%;}
input.block {display:block;width:100%;margin:4px 0px;}

::placeholder {color:#BBB;font-style:italic}
::-webkit-input-placeholder {color:#BBB;font-style:italic}
::-moz-placeholder {color:#BBB;font-style:italic}
:-ms-input-placeholder {color:#BBB;font-style:italic}
::-ms-input-placeholder  {color:#BBB;font-style:italic}
:-moz-placeholder {color:#BBB;font-style:italic}

.center:not(.owl-item) {text-align:center;}
.fleft {float:left}
.fright {float:right}
.clear:after {content:"";display:block;clear:both;}
.hidden {display:none !important;}
.bordertop {border-top:1px solid #DDD;padding-top:10px;margin-top:10px;}
.info {font-family:"Open Sans Condensed";font-size:15px;line-height:17px;color:#777;}
.info.center {margin:4px 0px;}
.quicklink {text-align:right;margin-top:10px;font-style:italic;font-size:12px;}
.dicons {float:right;margin-right:10px;}

.input {cursor:pointer;color:#666}
.input:hover {color:#000;}
.input.selected {color:#0066b3;}
.input:before {font-family:FontAwesome;display:inline-block;margin-right:2px;color:#AAA;font-size:1em;vertical-align:middle;width:1.28571429em;text-align:center;font-size:1.2em}
.input.checkbox:before {content:"\f096";}
.input.checkbox.selected:before {content:"\f046";color:#0066b3}
.input.radio:before {content:"\f10c";}
.input.radio.selected:before {content:"\f192";color:#0066b3}

.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:#0B3E81;}
.spinner > img {cursor:pointer;position:relative;top:50%;transform:translateY(-50%);max-height:100%;margin:0px auto;border:3px solid #000}
.messagebox > div {border:1px solid #40314d;background:#FFF;width:90vw;max-width:350px;min-height:30px;margin:auto auto;position:relative;top:50%;transform:translateY(-50%);font-weight:normal;box-shadow:1px 1px 2px #999}
.messagebox > div > h3 {background:#40314d;color:#FFF;margin:0px;padding:0px 6px;font-size:16px;line-height:26px;font-weight:normal;cursor:move}
.messagebox > div > h3 > span.fa {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 button, .messagebox .button {margin-top:10px;font-size:18px;line-height:32px;padding:0 10px;}
.messagebox > div.alert {border-color:#C00;padding:0px}
.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:99998;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;font-size:3em;color:#0066b3}

table.form {margin:5px auto;width:auto;border:none;max-width:100%}
table.form td,table.colorme td {padding:2px 6px;border:none;text-align:left;}
table.form tr > td:first-child,table.colorme.firstgrey tr > td:first-child {text-align:right;white-space:nowrap;color:#999;}
table.form td.price,td.price {text-align:right;}
table.form tr:nth-of-type(even) td,table.colorme tr:nth-of-type(even) td {background:#F0F0F0;}
table.form tr:nth-of-type(odd) td,table.colorme tr:nth-of-type(odd) td {background:#FFF;}
table.form td > input,table.form td > textarea,table.form td > select {width:100%;}
table.nocolor td {background:none !important;}
table.form th {background:#00b3ff;color:#FFF;text-align:center;padding:2px 6px;font-weight:normal}
table.form:not(.names) > thead > tr > th:not(:first-child) {width:7em;max-width:80px;}

/* =====================  designer tool  ====================== */
#printform {display:none;position:absolute;left:-9999px;width:0px;height:0px}
#tracebox {font-family:courier;font-size:12px;line-height:12px;}
#tracebox pre {margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #AAA;}
.bordertop {border-top:1px solid #DDD;padding-top:10px;margin-top:10px;}
.info {font-family:"Open Sans Condensed";font-size:15px;line-height:17px;color:#777;}
.info.center {margin:4px 0px;}
.quicklink {text-align:right;margin-top:10px;font-style:italic;font-size:12px;}
.dicons {float:right;margin-right:10px;}

.dprogressbar,.dprogressbar div {height:15px;border-radius:4px;display:block;}
.dprogressbar {margin:10px;position:relative;background:#F0F0F0;}
.dprogressbar div {position:absolute;background:#b0ca1d;}
.dropdown .info {margin-top:10px;}
.dropdown .fabutton {width:35px;height:35px;line-height:33px;font-size:20px;cursor:pointer}
.thumb {display:inline-block;padding:0px;background-repeat:no-repeat;background-size:cover;background-position:50%;width:120px;height:120px;}
.startscreen {cursor:pointer;}
.messagebox > div.alert {border-color:#C00;background:#FFD;}
.messagebox > div.alert > div.boxtitle {background:#C00 !important}
.inch:after {content:"cm";font-size:0.6em;vertical-align:super}
.degress:after {content:"\00b0";}
div.middle {position:relative;height:100%}
div.middle > div {position:absolute;top:50%;transform:translateY(-50%);padding:5px;width:100%}
.greytext {font-weight:bold;color:#BBB;text-transform:uppercase;font-size:1.2em;}
div.margin {margin:0.7em 0px;}
div.margin:first-child {margin-top:0px;}
div.margin2 {margin:20px 0px !important;}
#dsideedittext div.margin {margin:0.5em 0px;}
p.input {margin:4px 0px;}
p.stepback {color:#0066b3;cursor:pointer;display:none;}
.bold {color:#0066b3;font-weight:normal;font-family:Oswald;font-size:14px}
div.controls:not(.block) {display:inline-block;}
div.controls.block {display:bock;}
div.controls:not(.block) + div.controls:not(.block) {margin-left:5px;}
div.controls.block + div.controls,div.controls + div.controls.block {margin-top:5px;}
div.controls > p,table.controls td {margin-bottom:4px;font-size:14px;line-height:13px;font-family:"Open Sans Condensed";color:#222}
.controls img {height:27px;max-height:27px !important;}
table.controls.icons {width:100%}
table.controls.icons > tbody > tr:first-of-type > td {padding-bottom:6px;}
table.controls td {white-space:nowrap;text-align:center;}
.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:11px;display:block}
.numstepperbox div.plusminus {cursor:pointer;background:#b0ca1d;color:#FFF}
.numstepperbox div.plusminus:hover,.numstepperbox div.plusminus:active {background:#40314d;color:#FFF;}
.numstepperbox div.plusminus > span.fa {font-size:20px}
.numstepperbox div.value {font-family:"Open Sans Condensed";min-width:50px;border-left:none;border-right:none;font-size:14px;line-height:14px;padding:0px;height:32px;overflow:hidden}
.bottom {padding-top:10px;margin-top:10px;border-top:1px solid #EEE;text-align:center}
.colorname {margin-left:2px;display:inline-block;vertical-align:middle;width:65px;overflow:hidden;color:#666;font-size:12px;text-transform:uppercase;line-height:12px}
div.controls.block .colorname {width:auto;}
div.controls select {vertical-align:middle;}
div.controls.c45 {width:40px;text-align:center}
.minibutton {margin:0px 4px;display:inline-block;background:#63cdff;line-height:22px;color:#FFF;cursor:pointer;padding:0px 6px}
.minibutton:hover {background:#0066b3;transition:background 0.5s;}
.minibutton.disabled,.minibutton.disabled:hover {background:#DDD;color:#999;cursor:initial}
.minibutton > span.fa {font-size:18pxem;text-align:center;width:1.28571em;}
.combo {position:relative;}
.combo > div {position:absolute;background:#FFF;padding:2px;border:1px solid #DDD;z-index:999;display:none;overflow:auto;max-height:160px}
.combo > p,.combo > div > p {cursor:pointer;}
.combo img {vertical-align: top;width:90px}
.combo > p {border:1px solid #DDD;padding-right:5px}
.combo > p:hover {border-color:#00b3ff}
.combo > p:after {font-family:FontAwesome;content:"\f0d7";margin-left:10px;font-size:1.5em;vertical-align:middle;color:#444}
.combo > p:hover:after {color:#00b3ff}
.combo > div > p:hover {background:#DDD}
#divdesigner table.form > thead > tr > th:not(:first-child) {width:auto !important;}
div.popup {z-index:9;}
.bluelarge {color:#0066b3;font-size:14px;font-weight:bold;font-family:Arial;}
.greylarge {color:#666;font-size:14px;font-weight:bold;font-family:Arial;margin-bottom:10px}
.msginfo {vertical-align:middle;margin-left:10px;font-style:italic;}
.mustlayer {display:none;}
.disabled img {filter: grayscale(100%);}

ul.actions {margin:10px;text-align:center;}
ul.actions > li {display:inline;cursor:pointer;color:#0066b3}
ul.actions > li + li {margin-left:10px;padding-left:10px;border-left:2px solid #DDD;}
#bottomcontrols .owl-controls {display:none !important;}

/* =====================  popup windows  ====================== */
#mainpanel {position:relative;}
div.popup {position:absolute;left:0px;top:0px;width:100%;height:100%;background:rgba(255,255,255,0.75);padding:2px;}
div.popup > div {border:2px solid #41324e;max-width:800px;max-height:100%;margin:0px auto;}
div.popup > div > h1 {background:linear-gradient(to bottom, #41324e 0%,#201728 100%);color:#FFF;padding:2px 6px;margin:0px;font-size:1.3em;text-shadow:none}
div.popup > div > h1 > span.fa-times {cursor:pointer;}
div.popup > div > div {padding:10px;overflow:auto;background:#FFF;max-height:100%}
div.flexboxes {display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap}
div.flexboxes > div {flex-grow:1;flex-shrink:2;min-width:135px;max-width:185px;width:20%;text-align:center;padding:5px;cursor:pointer}
div.flexboxes > div > p {height:26px;line-height:12px;overflow:hidden}

#designerwindows .messagebox {display:none;}
#designerwindows div.content > p {text-align:center;}
#designerwindows span.fa-spinner {color:#63cdff;}
div.designerpopup {background:rgba(255,255,255,0.5);z-index:999;position:absolute;top:0px;left:0px;width:100%;min-height:100%}
div.designerpopup > div {max-width:600px;margin:10px auto;border:1px solid #41324e;background:#FFF;padding:5px;}
div.designerpopup > div > h3 {background:linear-gradient(to bottom, #41324e 0%,#201728 100%);color:#FFF;margin:-5px -5px 5px -5px;padding:0px 6px;font-size:16px;line-height:26px;font-family:Oswald}
div.designerpopup > div > h3:after {content:"";display:block;clear:both;}
div.designerpopup > div > h3 > span.fa-times-circle {float:right;margin:4px;cursor:pointer;}
div.designerpopup > div > div {display:flex;justify-content:center;align-items:stretch;}
div.designerpopup > div > div > div:not(.fullwidth) {width:49%;}
div.designerpopup > div > div > div:first-of-type {margin-right:1%;}
div.designerpopup > div > div > div:last-of-type {margin-left:1%;}
div.designerpopup > div > div > div.fullwidth {width:100%;margin:0px;}
div.designerpopup h6 {color:#0066b3;font-weight:bold;font-size:1.1em;}
p.needhelp {text-align:right;margin-top:5px;}
p.needhelp > a {color:#1170b8;font-weight:bold;}

/* =====================  designer setup  ====================== */
#divdesigner {position:relative;width:100%;max-width:1050px;margin:0px auto;}
#divdesigner > div {width:100%;height:100%;background:#FFF;}

#dmain {flex-grow:0;flex-shrink:0;position:relative}
#dside {flex-grow:1;flex-shrink:2;position:relative;}
#dworkarea {display:flex;justify-content:center;align-items:stretch;}
.mobile {display:none !important;}
#dside > header {display:none;background:#40314d;color:#FFF;font-size:16px;text-align:right;padding:4px 8px;cursor:pointer}

/* =====================  top navigation  ====================== */
section.designer > header > nav.desktop {margin-bottom:5px;}
section.designer > header > nav,section.designer > header > nav > ul {width:100%;height:auto;}
section.designer > header li {list-style:none;border:1px solid #DDD;background:#FFF;cursor:pointer;padding:2px}
section.designer > header li > img {max-height:30px;width:30px;margin-right:2px;vertical-align:middle}
section.designer > header > nav.desktop > ul > li {display:inline-block;width:105px;}
section.designer > header > nav.desktop > ul > li:not(.disabled):hover {color:#ff0d0d;border-color:#ff0d0d;}
section.designer > header > nav.desktop > ul > li + li {margin-right:2px;}
section.designer > header > nav.desktop > ul > li > span {font-size:11px;line-height:normal;display:inline-block;vertical-align:middle;width:60px;max-height:32px;overflow:hidden;text-align:center}
section.designer > header > nav.desktop > ul > li > img {max-height:30px;width:30px;}
section.designer > header > nav.mobile > ul {display:flex;align-items:stretch;background:#FFF;}
section.designer > header > nav.mobile > ul > li {padding:4px;width:25%;flex-grow:2;flex-shrink:2;border:none}
section.designer > header > nav.mobile li > img {display:block;margin:0px auto}
section.designer > header > nav.mobile > ul > li > span {display:block;text-align:center;line-height:1em}
section.designer > header li.disabled {border-color:#DDD;background-color:#F0F0F0;cursor:initial !important}
section.designer > header li.disabled > span {color:#999;}
section.designer > header ul.addlayer {position:absolute;text-align:center;z-index:999}

section.designer > header > div.navline {display:flex;align-items:center;background:#FFF;}
section.designer > header > div.navline > div {padding:2px 6px;}
section.designer > header > div.navline > div.side {flex-grow:2;text-align:center}
section.designer > header > div.navline span.fa {font-size:1.8em;cursor:pointer}
section.designer > header > div.navline span.label {font-size:1.5em;}

button.showleftpanel {display:none}
button.showleftpanel.hidden:after {font-family:FontAwesome;content:"\f054";margin-left:10px;font-size:1.5em;text-align:center;width:1.28571em;vertical-align:middle}
button.showleftpanel.shown:before {font-family:FontAwesome;content:"\f053";margin-right:10px;font-size:1.5em;text-align:center;width:1.28571em;vertical-align:middle}

#dside {border:1px solid #DDD;background:#FFF;top:0px}
#dside > div {padding:5px;background:#FFF;color:#444;}
#dside > nav {border-bottom:1px solid #EEE;width:100%;height:auto}
#dside > nav > ul {display:flex;align-items:stretch;list-style:none;}
#dside > nav > ul > li {background:#FFF;color:#444;flex-grow:1;width:25%;cursor:pointer;font-size:0px;text-align:center;padding:8px}
#dside > nav > ul > li + li {border-left:1px solid #EEE;}
#dside > nav > ul > li.selected {background:#63cdff;color:#FFF}
#dside > nav > ul > li.disabled,#dside > nav > ul > li.notavailable {background:#EEE;cursor:default}

.mobilepanel {position:absolute;font-size:0px;top:5px;display:none;visibility:hidden}
.mobilepanel div > span {vertical-align:middle;display:inline-block;cursor:pointer;margin:2px;font-size:18px}
span.productcolor {border:1px solid #FFF;border-radius:50%;display:block;width:28px;height:28px}
span.circle {width:32px !important;height:32px;background:#63CDFF;border-radius:50%;text-align:center;line-height:28px;padding:2px;color:#FFF;display:inline-block;cursor:pointer}
span.circle.block {display:block;}
span.circle > img {vertical-align:middle;max-width:65%}
.mobilepanel.right {right:2px;}
.mobilepanel.right span.circle {background-color:#EEE;}
.mobilepanel span.circle > img {max-width:75%;}
.mobilepanel span.circle.red {background-color:#C00;}
.hidepanel {display:none;color:#0066b3;font-weight:bold;padding:4px;font-size:16px}

section.designer div.locations {position:absolute;background:#FFF;border:1px solid #63CDFF;z-index:99;display:none}
section.designer div.locations:after {content:"";display:block;clear:both;}
section.designer div.locations > div {border:1px solid #EEE;float:left;font-size:11px;margin:2px;padding:2px;text-align:center;cursor:pointer}
section.designer div.locations > div.selected {border-color:#63CDFF;}
section.designer div.locations > div:hover {border-color:#000;}
section.designer div.locations > div > img {display:block;margin:0px auto;width:60px;height:60px;}

/* =====================  bottom panel  ====================== */
#bottom {display:flex;align-items:stretch;}
#bottom {background:#EBEBEB;color:#0066b3}
#bottom > div {display:inline-block;padding:6px;cursor:pointer;font-size:1.15em;text-align:center;width:25%}
#bottom.single > div {width:100%;}
#bottom > div:not(.buynow):not(.disabled):hover {background-color:#DDD;}
#bottom > div > * {vertical-align:middle;}
#bottom > div > span {margin-left:10px;line-height:32px}
#bottom > div.buynow {background:#b0ca1d;color:#FFF;flex-grow:1;flex-shrink:2;}
#bottom > div.buynow:not(.disabled):hover {background-color:#0066b3;}
#bottom > div.disabled {background-color:#F5F5F5 !important;color:#CCC !important;cursor:initial !important;}
#bottom > div.disabled img {opacity:0.4;filter: grayscale(100%);}
#bottomcontrols {position:absolute;left:0px;bottom:65px;width:100%;z-index:779}
#bottomcontrols > div {width:100%;max-width:360px;border:2px solid #63cdff;background:#FFF;padding:5px;position:relative;display:none}
#bottomcontrols > div:after {top:100%;left:50%;border:20px solid transparent;border-top-color:#63cdff;content:" ";height:0;width:0;position:absolute;margin-left:-20px;}
#bottomcontrols > div.left:after {left:15%;}
#bottomcontrols > div.right:after {left:85%;}
#notes textarea {width:100%;height:160px;display:block;margin-top:10px}
#savedesign input,#sharedesign input {width:100%;display:block;margin-bottom:4px}
#sharedesign textarea {width:100%;height:60px;display:block;margin-bottom:4px}
#bottomcontrols > div#buydesign,#bottomcontrols > div#teamorder {max-width:520px;}
#buydesign.buy .quote {display:none;}
#buydesign.quote .buy {display:none;}
#savedesign input,#sharedesign input,#boxsavetemplate input,#boxsavetemplate select,#boxaddtostore input,#boxaddtostore select {width:100%;display:block;margin-bottom:4px}
#sharedesign textarea,#boxaddtostore textarea {width:100%;height:60px;display:block;margin-bottom:4px}
div.pcolors > span {margin:2px 4px;display:inline-block;}
div.pcolors > span > img {vertical-align:bottom;}

/* =====================  getting started panel  ====================== */
#dsidestart > div {padding:5px;}
#dsidestart h3 {font-weight:normal;font-size:1.4em;font-family:Oswald;margin:0px 0px 5px 0px;padding:0px}
#dsidestart img.fleft {width:70px;margin:0px 10px 10px 0px}
#dsidestart p {font-family:"Open Sans Condensed";font-size:14px;line-height:16px;color:#444;}
#dsidestart > div + div {border-top:1px solid #DDD}

/* =====================  MISC  ====================== */
#opendesign span.thumb {cursor:pointer;}
#opendesign input {display:block;width:100%;max-width:280px;margin:5px auto}
.jcarousel-wrapper {display:none;}
.jcarousel img {display:block;max-width:100%;max-height:100%;height:auto !important;width:100%;}
#divbuynow * {line-height:normal;}
#divbuynow .faback {line-height:36px;}
#divbuynow > div.fright,#divbuynow > div.fleft {margin:0px;height:565px;overflow:auto;}
#divbuynow h3 {font-size:20px;color:#63cdff;font-weight:normal;}
#boxbuynow .price {min-width:60px;}
#boxlowresimage p {text-align:left !important;}
div.line {background:url(/images/designer/line.png) center left repeat-x;text-align:center}
div.line > span {background:#f2f2f2;padding:0px 6px;color:#0066b3}
.iconline {font-family:Oswald;font-size:20px;line-height:34px;text-align:center;border-bottom:1px solid #DDD;padding-bottom:4px;margin-bottom:4px;}
.iconline > span.fa {font-size:1.4em;margin-right:10px;vertical-align:middle;}
.iconline > img {height:34px !important;margin-right:10px;vertical-align:bottom;}

/* =====================  color picker ====================== */
#cpicker > button > * {vertical-align:middle !important;}
#cpicker > button > span.fa {margin:0px;}
#cpicker > button > img {width:14px;height:14px;margin-right:5px;border:1px solid #AAA}
#cpicker > div {position:absolute;background:#FFF;border:1px solid #63cdff;padding:4px;max-width:155px;display:none;z-index:888}
#cpicker > div.formobile {left:40px;top:68px;}
#cpicker > div:after {content:"";display:block;clear:both;}
#cpicker > div > img {cursor:pointer;width:22px;height:22px;float:left;margin:1px;border:1px solid #DDD}
.inkcolors {border:1px solid #3C5984;background:#FFF;padding:2px;max-width:174px;max-height:220px;position:absolute;display:none;z-index:999;overflow:auto}
.inkcolors:after {content:"";display:block;clear:both;}
.inkcolors > span {display:block;float:left;width:22px;height:22px;margin:1px;cursor:pointer;border:1px solid #DDD;}

/* ===================== toolbox panel setup ====================== */
#dside > div > div:not(:first-child) {display:none;}
#dside h6 {font-size:30px;line-height:50px;color:#63cdff;}
#dside h6 > span.fa {width:50px;height:50px;line-height:46px;display:inline-block;text-align:center;border:2px solid #63cdff;border-radius:50%;margin-right:10px}
#dside .title {float:right;color:#0066b3;}
div.dsidepanel > h6 {text-align:center;line-height:normal !important}
.dropdown h5 {border: 1px solid #0066b3;font-family:Tahoma;font-size:15px;line-height:25px;cursor:pointer;padding:0px 5px 0px 10px;margin-top:10px;background:#F0F0F0}
.dropdown h5 span.fa {margin-right:10px;font-size:16px;}
.dropdown > div {display:none;}
.dropdown > h5 + div {margin-top:10px;}
#dsideedit > h1 {text-transform:uppercase;font-family:Tahoma;font-size:14px;color:#666;text-align:center;margin-top:0px}
.dsidepanel > * +  p {margin-top:10px;}
#dsidestart > div + div {margin-top:10px;}
#dsidestart > div > h6 > span.fa,#dsidestart > div > h6 {color:#0066b3;border-color:#0066b3}
#dsidebuttons {padding:10px 10px 0px 10px;}
#dsidebuttons button {margin:2px 0px !important;min-width:170px}

/* ===================== upload image ====================== */
#boxuploadwizard {display:none;}
#divmyimages {padding:5px;overflow:auto;height:180px;}
#divmyimages span.thumb {width:80px;height:80px;cursor:pointer;margin:3px;border:1px solid #CCC;border-radius:50%;}
.checker {padding:5px;background:url(/images/site/checker.jpg);;border:2px solid #C2C2C2;width:280px;height:280px;margin:5px auto;text-align:center}
.checker > img {max-height:100%;vertical-align:middle;}
p.imagepreview {text-align:center;}
p.imagepreview > span {cursor:pointer;color:#666;margin:0px 10px;font-size:0.8em}
p.imagepreview > span.selected {text-decoration:underline;color:#0066b3;font-size:0.9em}
#imageinklist,#clipinklist {text-align:center;margin:10px 5px;}

/* ===================== cliparts and upload====================== */
#dsideclip ul {list-style:none;margin:10px 0px}
#dsideclip ul:after {content:"";display:block;clear:both;}
#dsideclip ul > li {width:48%;margin:0.5%;float:left;display:block;cursor:pointer;font-family:"Open Sans Condensed";color:#444;font-size:16px;line-height:16px;padding:2px;border:none}
#dsideclip ul > li:hover {text-decoration:underline;color:#0066b3;border:none}
#dsideclip ul > li:not([data-parent="0"]) {display:none;}
#dsideclip ul > li > img {vertical-align:middle;margin-right:10px;max-height:24px}
#dsideclip div.search {background:#FFF;border:1px solid #DDD;display:flex;align-items:stretch;}
#dsideclip div.search > input {border:none;flex-grow:1;flex-shrink:1;}
#dsideclip div.search > span {border:none;flex-grow:0;flex-shrink:0;background:#63cdff;color:#FFF;cursor:pointer;line-height:24px;padding:0px 10px}
#dsideclip div.search > span.disabled {background:#DDD;color:#999;cursor:initial !important;}
#boxclipartwizard {display:none;}
#boxclipartwizard div.clipthumbs {height:280px;overflow:auto;padding:4px;margin:10px 0px}
#boxclipartwizard div.clipthumbs > div > div {cursor:pointer;width:105px;height:105px;float:left;border:1px solid #FFF;margin:2px;padding:2px;text-align:center}
#boxclipartwizard div.clipthumbs > div > div:hover {border-color:#DDD;}
#boxclipartwizard div.clipthumbs > div > div.selected {border-color:#0066b3;}
#boxclipartwizard div.clipthumbs > div > div > img {max-height:100%;position:relative;top:50%;transform:translateY(-50%);}

#boxclipartoptions div.thumb {width:120px;height:120px;float:left;text-align:center;font: 0/0 a;}
#boxclipartoptions div.thumb:before {content:' ';display:inline-block;vertical-align:middle;height:100%;}
#boxclipartoptions div.thumb > img {vertical-align:middle;display:inline-block;}
#boxclipartoptions div.adjustcolors {padding-left:140px;}
div.adjustcolors > p {padding-bottom:10px;text-align:center;}
div.adjustcolorline {text-align:center;line-height:normal}
div.adjustcolorline > span, span[data-type="inkcolor"],span.swatch {vertical-align:middle;display:inline-block;width:22px;height:22px;margin:2px;border:1px solid #DDD;cursor:pointer}
div.adjustcolorline > span.fa {border:none;font-size:16px}
p + div.adjustcolorline,div.adjustcolorline + div {margin-top:4px;}

#editartcolors > p {margin:5px 0px;}
#editartcolors button {margin-top:10px;}

div.qualityalert {border:1px solid #C00;background:#FFE;padding:4px;color:#C00;}
div.qualityalert .input {color:#C00;font-family:"Open Sans Condensed"}
div.qualitymeter {margin:5px 0px;text-align:center;}
div.qualitymeter > span {font-size:30px;color:#DDD}
div.qualitymeter > span:nth-child(1).selected {color:#19c127;}
div.qualitymeter > span:nth-child(2).selected {color:#059bca;}
div.qualitymeter > span:nth-child(3).selected {color:#C00;}

/* ===================== text options ====================== */
select[data-control="font"] {max-width:200px;}
#dsidetext input[type="text"],.droptext input[type="text"] {width:100%;display:block;padding:4px 8px;margin:4px 0px}
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.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;font-family:Oswald}
div.select:after {content:"\f0d7";font-family:FontAwesome;float:right;margin:2px;color:#000}
div.fonts {position:absolute;width:180px;background:#FFF;border:1px solid #BBB;padding:2px;display:none;z-index:999}
div.fonts > div {max-height:320px;overflow:auto;margin-top:5px;min-width:145px}
div.fonts > div > div {cursor:pointer;border:1px solid #FFF;min-height:20px;min-width:120px;text-align:center}
div.fonts > div > div.selected {border-color:#000}
div.fonts > div > div:hover {border-color:#0078bd}
div.fonts > div > div > img {height:20px;max-width:160px !important;vertical-align:middle}

table.form.names td,table.form.names th {padding:2px}
table.form.names > tbody > tr > td > span.fa-times{color:#C00;font-size:20px;cursor:pointer}
table.form.names > tbody > tr:first-of-type > td > span.fa-times{visibility:hidden;}
table.form.names select {max-width:90%;width:auto !important;padding:1px !important}
table.form.names input {padding:1px !important;}
table tfoot td.addline {text-align:left !important;cursor:pointer;padding:6px !important}
div.fornames {margin:4px auto;padding:2px;border:1px solid #DDD;max-height:250px;max-width:340px;overflow-y:scroll;}
div.fornames > table.form {margin-top:0px;margin-bottom:0px;width:100%}
.subtotals {font-family:Oswald;color:#999;}
.subtotals > span + span {margin-left:5px;}
.qtyall,.pricetotal,.totalqty,.priceeach {font-family:Oswald;color:#000;}
.qtyall .fa,.pricetotal .fa,.totalqty .fa,.priceeach .fa {color:#AAA;}
input.qty.hasval {background:#FF9;border-color:#63cdff;color:#000}

table.sizes {margin:5px auto;}
table.sizes td {padding:2px 6px;border:none;text-align:left;}
table.sizes tr > td:first-child {text-align:right;white-space:nowrap;color:#999;font-family:Oswald}
table.sizes td.priceeach {text-align:right;}
table.sizes tr:nth-of-type(even) td{background:#f0f5ff;}
table.sizes tr:nth-of-type(odd) td {background:#FFF;}}

/* ===================== text effects ====================== */
div.droptexteffect > div > p,div.droptext > div > p {min-height:22px;}
div.droptexteffect > div > p > span:first-of-type {cursor:pointer;display:inline-block;margin-right:5px;color:#AAA}
div.droptexteffect > div > p > span.selected {color:#3C5984;}
div.droptexteffect > div > p > span:first-of-type:before {content:"\f10c";font-family:FontAwesome;display:inline-block;margin-right:5px;color:#DDD;vertical-align:middle;width:1.28571429em;text-align:center}
div.droptexteffect > div > p > span.selected:first-of-type:before {content:"\f192";color:#3C5984}

/* ===================== flaoting controls ====================== */
#floating-controls {position:fixed;left:0;bottom:0;width:100%;background:#FFF;border:1px solid #b0ca1d;padding:4px;font-size:13px;z-index:777;visibility:hidden}
#floating-controls > header {font-size:0px;white-space:nowrap}
#floating-controls > header > div {display:inline-block;vertical-align:middle;font-size:14px}
#floating-controls > header > div.expander {background:#b0ca1d;color:#FFF;width:26px;height:26px;cursor:pointer;margin-right:5px;overflow:hidden}
#floating-controls > header > div.expander:before {content:"\f106";font-family:FontAwesome;font-size:26px;width:26px;line-height:26px;text-align:center;display:block;}
#floating-controls.open > header > div.expander:before {content:"\f107";}
#floating-controls > header div.closeds {padding-left:5px;}
#floating-controls > main {background:#FFF;padding:4px;display:none;margin-top:5px;font-size:12px;font-family:Arial,Helvetica,serif;min-height:auto}
#floating-controls > main > nav {border-bottom:1px solid #DDD;margin-bottom:5px;padding-bottom:5px;}
#floating-controls.open > main {display:block}
#floating-controls:not(.open) .openonly {display:none;}
#floating-controls.open .openonly {display:inline-block;}
#floating-controls select {vertical-align:middle;}
#floating-controls .input.checkbox:before {font-size:1.4em;}
#floating-controls .combo {display:inline-block;vertical-align:middle}
#floating-controls .combo img {max-height:16px;}
#floating-controls table.icons td {width:16.666%;}
#floating-controls .bordertop {padding-top:2px;margin-top:2px;}

/* =====================  owl carousel ====================== */
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px,0px,0px)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel .owl-item{float:left}
.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}
.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.grabbing{cursor:url(grabbing.png) 8 8,move}
.owl-origin{-webkit-perspective:1200px;-webkit-perspective-origin-x:50%;-webkit-perspective-origin-y:50%;-moz-perspective:1200px;-moz-perspective-origin-x:50%;-moz-perspective-origin-y:50%;perspective:1200px}
.owl-fade-out{z-index:10;-webkit-animation:fadeOut .7s both ease;-moz-animation:fadeOut .7s both ease;animation:fadeOut .7s both ease}
.owl-fade-in{-webkit-animation:fadeIn .7s both ease;-moz-animation:fadeIn .7s both ease;animation:fadeIn .7s both ease}
.owl-backSlide-out{-webkit-animation:backSlideOut 1s both ease;-moz-animation:backSlideOut 1s both ease;animation:backSlideOut 1s both ease}
.owl-backSlide-in{-webkit-animation:backSlideIn 1s both ease;-moz-animation:backSlideIn 1s both ease;animation:backSlideIn 1s both ease}
.owl-goDown-out{-webkit-animation:scaleToFade .7s ease both;-moz-animation:scaleToFade .7s ease both;animation:scaleToFade .7s ease both}
.owl-theme .owl-controls {text-align:center;position:absolute;width:100%;}
.owl-theme .owl-controls .owl-buttons div{color:#FFF;display:inline-block;zoom:1;*display:inline;margin:5px;padding:3px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background:#869791;filter:Alpha(Opacity=50);opacity:.5}
.owl-theme .owl-controls.clickable .owl-buttons div:hover{filter:Alpha(Opacity=100);opacity:1;text-decoration:none}
.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1;*display:inline}
.owl-theme .owl-controls .owl-page span{display:block;width:30px;height:15px;margin:2px;border-radius:20px;background:#EEE;border:1px solid #AAA;transition:all 0.75s}
.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{background:#201728;border-color:#000}
.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}
.owl-item.loading{min-height:150px;background:url(/images/site/wait.gif) no-repeat center center}
div.moreimages div.owl-item > div {padding:5px;}
/* ===================== common media queries ====================== */

@media (max-width:1000px){
  #dside {position:absolute;width:90vw;max-width:350px;z-index:888;}
  #dside:not(.showme) {display:none;}
  #dside.showme {display:block;}
  #dside > header {display:block;}
  #dmain {width:100%;padding:2px;}
  #dmainline {position:static}
  .desktop, #bottom {display:none !important;}
  .mobile:not(.navline) {display:block !important;}
  .mobile.navline {display:flex !important;}
  #floating-controls {visibility:visible !important;}  
  #bottomcontrols {top:-40px;bottom:unset !important;}
  #bottomcontrols > div {left:50% !important;transform:translateX(-50%);}
  #bottomcontrols > div:after {top:-40px;left:50% !important;border-top-color:transparent;border-bottom-color:rgb(99, 205, 255);}
}

@media (max-width:768px){
  #divdesigner > nav > ul > li {width:42px;text-align:center;}
  #divdesigner > nav > ul > li > span {display:none;}
  #cpicker > button {display:none;}
  .mobilepanel,.hidepanel {display:block;visibility:visible}
  #floating-controls {display:block;visibility:visible}  
  #dsidebuttons > button {display:block;margin:2px auto !important;width:100%}
}

@media (max-width:550px){
  div.designerpopup > div > div:not(.hidden) {display:block;}
  div.designerpopup > div > div > div {width:100% !important;margin:5px 0px !important}
}

@media (max-width:500px){
  .mobilepanel {top:5px;}
  #divdesigner > div > h2 .fleft,#divdesigner > div > h2 .fright {float:none;display:inline-block;}
  #divdesigner > div > h2 .title {display:block;margin:4px 0px;}
  section.designer > h1 {font-size:16px !important;}
  #foot {display:none;}
  #dmain {padding:0;}
}

@media (max-width:450px){
  #dside {top:80px}
  #boxproductinfo {display:none;}
  #maindiv {padding:0;}
  ul.addlayer img {width:50px !important;height:50px;max-height:50px !important;}  
  section.designer {position:unset;}
  #styleinfo {padding:2px;}
}