/* cleva gehhl */

div:after {
    clear: both;
    display: block;
    content: " ";
}

/* general css */

* {
    font-family: Arial, Tahoma, Geneva, sans-serif;
}

html {
    color: #333;
}

button {
    cursor: pointer;
}

h1, h3 {
    margin-top:0;
}

/* main visible container */

#mystyle-customizer {
    max-width: 100%;
    margin: auto;
}


#main-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #FFFFFF;
    /* overflow: hidden; */
    min-width: 500px;
    /*border: 1px solid #ccc;*/
    min-height: 500px;
    height: 100%;
    padding: 0 5px;
}

#main-container.limited-width {
    max-width: 1100px;
    margin: auto;
}

#mystyle-logger-div {
    width: 500px;
    height: 500px;
    overflow: scroll;
    float: left;
    background-color: #FFAAAA;
    display: none;
    font-size: 11px;
    text-align: left;
    border: 1px solid black;
    padding: 2px;
}



/* controls pane */
#topcontrols-container {
    background: none;
    width: 450px;
    min-width: 450px;
    text-align: center;
    float: left;
    transition-duration: 1000ms;
    z-index: 1;
    position: relative;

}

div#topcontrols-container.minimized {
    /*margin-top: -48px;*/
    margin-top: -100px;
}

.topcontrols-subcontainer {
    background-color: rgba(0,0,0,0.35);
    text-align: center;
    margin: 0px;
    margin-right: 1px;
    float: left;
    vertical-align: middle;
    cursor: pointer;
    height: 80px;
    min-width: 111px;
    display: inline-block;
    box-shadow: 0 -10px 0px rgba(0,0,0,0);
    transition-duration: 500	ms;
    padding-top: 4px;
    position: relative;
    top: 0;
    width: 24%;
    overflow: hidden;
}

/* button bg gradient */
.topcontrols-subcontainer {

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c7c7c7+13,9e9e9e+99 */
background: rgb(199,199,199); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(199,199,199) 13%, rgb(158,158,158) 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgb(199,199,199) 13%,rgb(158,158,158) 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgb(199,199,199) 13%,rgb(158,158,158) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#9e9e9e',GradientType=0 ); /* IE6-9 */


}

.topcontrols-subcontainer:not(.active):hover,
.topcontrols-subcontainer:active {
    background: #80d583;
}

.topcontrols-subcontainer.active{

    color: rgba(0, 170, 7, 0.5);
    background: white;
    position: relative;
    padding-top: 0;
    transition-duration: 500ms;
    transition-delay: 0;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+35,eeeeee+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 35%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 35%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 35%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

}

.topcontrols-subcontainer.active .icon {
    margin-top: 10px;
    margin-bottom: 20px;
    transition-duration: 500ms;
    height: 60px;
    opacity: .85;
}

.topcontrols-subcontainer > * {
    pointer-events: none;
}

.topcontrols-subcontainer .icon {
    display: block;
    height: 42px;
    width: auto;
    margin: 4px auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 90%;
    transition-duration: 500ms;
    pointer-events: none;
}

.topcontrols-subcontainer .label {
    font-family: Tahoma, Verdana, Arial;
    font-size: 16px;
    color: white;
    transition-duration: 1000ms;
    font-weight: normal;
    letter-spacing: 1px;
    pointer-events: none;
}

.topcontrols-subcontainer.active .label {
    color: rgb(128, 213, 131);
    bottom: 0;
    position: relative;
    width: auto;
    text-align: center;
    display: block;
    margin-top: -13px;
    opacity: 0;
}

.topcontrols-subcontainer .icon.background  {
    background-image: url('../images/nav-icon-background-idle.png');
}


.topcontrols-subcontainer .icon.image-upload  {
    background-image: url('../images/nav-icon-images-idle.png');
}


.topcontrols-subcontainer .icon.text  {
    background-image: url('../images/nav-icon-text-idle.png');
}


.topcontrols-subcontainer .icon.verify  {
    background-image: url('../images/nav-icon-finish-idle.png');
}

.topcontrols-subcontainer.active .icon.background  {
    background-image: url('../images/nav-icon-background-active.png');
}


.topcontrols-subcontainer.active .icon.image-upload  {
    background-image: url('../images/nav-icon-images-active.png');
}


.topcontrols-subcontainer.active  .icon.text {
    background-image: url('../images/nav-icon-text-active.png');
}


.topcontrols-subcontainer.active .icon.verify {
    background-image: url('../images/nav-icon-finish-active.png');
}


#back-to-main-steps-btn .glyphicon {
    font-size: 26px;
    margin: 0px;
    float: none;
    color: #555;
    display: inline-block;
    text-align: center;
}

#back-to-main-steps {
    display: inline;
    width: auto;
    clear: both;
    float: none;
    left: 0;
    text-align: left;
    padding: 5px 5px 10px 5px;
    position: relative;
}

#back-to-main-steps-btn {
    min-width: 50px;
    position: relative;
    z-index: 100;
}

#back-to-main-steps-btn label {
    display: none;
}

#back-to-main-steps:after {
    content: " ";
    clear: both;
    display: block;
    float: left;
    height: auto;
    border: 0;
    width: 100%;
}


div#step1-container:before,
div#step2-container:before,
div#step3-container:before,
div#step4-container:before,
div#step5-container:before {
    top: 0;
    left: 0;
    position: absolute;
    color: #eee;
    padding: 3px 6px 3px 8px;
    border-radius: 0 0 4px 0;
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    font-family: arial, sans-serif;
    transition-duration: 500ms;
}

div#step1-container.active:before,
div#step2-container.active:before,
div#step3-container.active:before,
div#step4-container.active:before,
div#step5-container.active:before {
    color: #EEE;
}

div#step1-container:before { content: "1"; }
div#step2-container:before { content: "2"; }
div#step3-container:before { content: "3"; }
div#step4-container:before { content: "4"; }

.mystyle-ui-component,
#sidecontrols-container .mystyle-ui-component {
    display: none;
}

div.menu-row {
    display: block;
    min-height: 50px;
    clear: both;
    padding: 2px 8px;
    margin: auto;
    max-width: 550px;
}


#mystyle-customizer-loading-screen {
    font-size: 24px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    display: block;
    height: auto;
    width: 100%;
    background: #CCC;
    color: white;
    top: 200px;
    z-index: 100;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,bbbbbb+100&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(187,187,187,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(187,187,187,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(187,187,187,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */


}

#mystyle-customizer-loading-screen > #mystyle-customizer-loading-bar {
    display: block;
    width: 1%;
    height: 10px;
    background: #00AA00;
}

#mystyle-customizer-loading-screen > #mystyle-customizer-loading-label {
    color: white;
}

span#mystyle-customizer-loading-logo-container {
    top: -10px;
    position: relative;
    transition-delay: 1000ms;
    transition-duration: 500ms;
    opacity: 1;
}

#start-ui {
    width: auto;
    margin-top: 50px;
    float: left;
    display: none;
    clear: left;
    color: #333;
    max-width: 450px;
    display: block;
}

#start-ui h1 {
    font-weight: normal;
    text-align: left;
    font-size: 34px;
    padding: 30px 20px;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 3px solid rgba(0, 170, 7, 1);
}


#get-from-url-wrapper hr {
    margin-top: 5px;
}



.topcontrols-subcontainer.active {
    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
    border-radius: 10px 10px 0 0;
    transition-duration: 500ms;
    border: 1px solid #DDD;
    border-bottom-color: white;
}

.menu-row:hover {
    background: white;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.menu-row > .btn {
    float: right;
    margin: 2px 1px;
    top: 0;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.menu-row > .btn:first-child {
    float: none;
}

.menu-row:hover > .btn {
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    position: relative;
    top: -1px;
    transition-duration: 300ms;
}

.menu-row:hover > .btn:hover {
    transition-duration: 0ms;
}

.topcontrols-container.minimized {
    margin-top: -80px;
}


.btn, .btn-default, .btn.selectedobject-subbutton {
    min-width: 80px;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
    vertical-align: middle;
}

.subcomponent .prompt-title {
    margin-bottom: 5px;
}

.subcomponent .prompt-buttons {
    padding: 15px;
}


.subcomponent .title-bar {
    display: block;
    position: relative;
}

div#text-add-title,
.subcomponent .title-bar.snap-top {
    text-align: center;
    display: block;
    margin: auto;
    float: none;
    position: absolute;
    top: 5px;
    width: 100%;
}

.selectedobject-subtitle {
    pointer-events: none;
}

.title-bar .selectedobject-subtitle,
.title-bar .subtitle {

    float: left;
    margin-left: 90px;
    margin-top: 5px;

    font-size: 20px;
    font-weight: normal;
    clear: none;
    text-align: left;
    color: #ababab;
}

.selectedobject-subtitle,
.subtitle {
    color: #555;
    font-size: 18px;
    font-weight: bold;
}


.selectedobject-subtitle {
    float: left;
    vertical-align: middle;
    padding-left: 5px;
    padding-top: 10px;
}

#selectedobject-text-title {

    margin-bottom: -45px;

}


.submenu .submenu-item .btn-delete {
    margin-top: 15px;
}

.btn-ui-component-back {
    float: none;
    font-size: 16px;
}

.button > *,
.glyphicon {
    pointer-events: none;
}

.button-label {
    pointer-events: none;
    vertical-align: middle;
    margin: 0;
    font-weight: bold;
}

/* hide admin buttons */
#admin-controls-container {
    display: none;
}

.sidecontrol-subtitle {
    font-size: 12px;
    max-height: 12px;
    max-width: 100%;
    overflow: hidden;
}

.background-color-picker {
    height: 50px;
    width: 80px;
    background-image: none;
    padding: 2px;
    text-align: center;
}

/* not used but can show a gallery <ul> of user uploads*/
#background-image-list-container {
    /* display: none; */
}

#background-image-list {
    list-style:none;
    margin:0;
    padding:0;
}

#image-list li,
#graphics-image-list li,
#background-image-list li {
    background: #fff;
    border: 1px solid #ccc;
    text-align: center;
    padding: 5px;
    float: left;
    width: 97px;
    height: 70px;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
    margin: 4px;
    transition-duration: 300ms;
    overflow: hidden;
}


#image-list li:hover,
#graphics-image-list li:hover,
#background-image-list li:hover {

    top: -4px;
    padding: 1px;

}

#background-image-categories-wrapper,
#graphics-image-categories-wrapper,
#image-categories-wrapper,
.image-categories-wrapper {
    display: none;
}

.pagination-wrapper {
    float: right;
    text-align:left;
    padding-right: 5px;
}

.sidecontrols-subcontainer .pagination-wrapper {
    float: right;
    text-align:left;
    padding-right: 5px;
}

.pagination-wrapper h4 {
    margin-right: 15px;
}

div#graphics-image-page-wrapper,
div#background-image-page-wrapper {
    padding-left: 80px;
    margin-top: -60px;
    text-align: right;
}

.background-image-preview-img,
.graphics-image-preview-img,
.image-preview-img {
    width: auto;
    max-height: 320px;
    max-width: 95%;
    margin: 10px auto;
}

#background-image-preview-add-wrapper,
#graphics-image-preview-add-wrapper {
    text-align: center;
}

#background-image-preview-image-container,
#graphics-image-preview-image-container {
    text-align: center;
}

#design-complete-btn {
    cursor: pointer;
    min-width: 120px;
}

.btn#design-complete-btn span.glyphicon {
    top: 3px;
}

/* not used but can show a gallery <ul> of user uploads*/
#graphics-image-list-container {
    /* display: none; */
}

#graphics-image-preview-image-container {
    text-align: center;
}

/* keep hidden shit hidden from view! rendering etc. */
#hidden-container {}
#hidden-images-container {}
/* hidden classes */
.hidden-canvas {}
.hidden {
    display: none;
}


#image-list-container {

}

#image-list, #graphics-image-list, #background-image-list {
    list-style: none;
    margin: 0;
    padding: 15px 0px 0px 0px;
}

#image-list li img,
#graphics-image-list li img,
#background-image-list li img {
    vertical-align: middle;
    max-width: 100%;
    height: 100%;
    margin: auto;
    max-height: 100%;
    width: auto;
}

#image-upload-btn {
    cursor: pointer;
}
#image-upload-proxy-input {
    padding: 10px;
    height: 40px;
    float: left;
    width: 250px;
    margin: 5px 5px 5px 20px;
    font-size: 16px;
}

#image-upload-proxy-btn {
    margin: 15px auto 15px auto;
}

#image-upload-facebook-wrapper {
    display: none;
}

#preview-container {
    float: right;
}

#product-view-container {
    float: right;
    position: absolute;
    background-color: #FFFFFF;
    width: 500px;
    height: 500px;
    right: 0;
}

.btn-small .glyphicon:first-child {
    font-size: 18px;
    margin: 0px 6px -4px -2px;
    float: left;
}

.tip {
    font-size: 12px;
    color: #555;
    text-align: center;
    background: rgba(150,150,150,.1);
    padding: 15px;
    margin: 15px 15px 0 15px;
    border-radius: 10px;
    font-style: italic;
    position: relative;
}

.tip span.glyphicon:first-child {
    font-size: 24px;
    position: absolute;
    left: -5px;
    top: -8px;
    border: 1px solid white;
    border-radius: 20px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.4);
    display: block;
    padding: 1px;
    background: white;
}

.tip > h4, .tip > .subtitle {
    margin: -14px -13px 12px -13px;
    background: rgba(0,0,0,0.1);
    padding: 5px;
    font-size: 12px;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    font-weight: bold;
    color: #999;
    letter-spacing: initial;
    line-height: 12px;
    text-shadow: 0 1px 2px white;
}

.product-view-canvas {
    top: 0;
    left: 0;
    position: absolute;
}

.selectedobject-color-picker {
    height: 50px;
    width: 50px;
    background-image: none;
    padding: 2px;
}

#selectedobject-font-input {
    float: left;
}

#selectedobject-text-btn {
    float: right;
}

#selectedobject-font-viewer {
    display: block;
    width: 100%;
    overflow: hidden;
    font-size: 16px;
}

#selectedobject-font-wrapper .glyphicon {
    opacity: .5;
    margin: 7px 7px 7px -4px;
    float: left;
}

button#selectedobject-font-viewer label {
    margin: 5px 0 0 5px;
    padding: 0 0 0 5px;
}



.subcomponent .title-bar {
    margin-bottom: 15px;
}

.selectedobject-wrapper-half .selectedobject-subtitle {
    float: left;
    text-align: center;
}

.btn, .btn-default, .btn.selectedobject-subbutton {
    min-width: 80px;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}

.btn.selectedobject-subbutton {
    min-width: 60px;
    min-height: 45px;
}

.menu-row button.btn.label-2-line > label {
    margin: -5px 0 0 0;
}

.selectedobject-subbutton-block {
    float: right;
    height: 50px;
    width: 80px;
    border-left: 4px solid #ffffff;
    background-color: #CCCCCC;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
    vertical-align: middle;
}

.selectedobject-wrapper,
.menu-row,
#sidecontrols-container {
    width: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.selectedobject-wrapper {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #ffffff 0%, #dbdbdb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dbdbdb));
    background: -webkit-linear-gradient(top, #ffffff 0%,#dbdbdb 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#dbdbdb 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#dbdbdb 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#dbdbdb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 );
    padding: 5px;
}

.selectedobject-wrapper {
    min-height: 50px;
    margin-left: 0;
    margin-bottom: 5px;
    background-color: #EEEEEE;
    width: auto;
}

.selectedobject-wrapper:after {
    clear: both;
    display: block;
    content: " ";
    height: 1px;
}



#sidecontrols-container {

    position: relative;
    float: left;
    clear: left;
    font-family: Tahoma, Verdana, Arial;

    background-color: #FFFFFF;
    max-height: 450px;
    min-height: 400px;
    padding-top: 5px;
    margin: 0;

    width: 447px;

    background: transparent;
    padding: 0;
    border: 0;

    z-index: 2;

    overflow: visible;
}

#sidecontrols-container:after {
    content: " ";
    height: 1px;
    clear: both;
    display: block;
    float: none;
}


.sidecontrols-subcontainer {
    text-align: left;
    display: none;
    min-width: 100%;
}

#main-container .panel {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100&0.9+0,0.85+100 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.9) 0%, rgba(238,238,238,0.85) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.9) 0%,rgba(238,238,238,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.9) 0%,rgba(238,238,238,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#d9eeeeee',GradientType=0 ); /* IE6-9 */
    border-radius: 0px 0px 4px 4px;
}

div.menu-row:after {
    clear: both;
    content: " ";
    display: block;
}

#main-container .panel {
    box-shadow: 0 5px 10px rgba(0,0,0,.25);
    border-top: 0;
    padding: 1px 1px 15px 1px;
}

#sidecontrols-container > .panel#text-container {
    padding-top: 5px;
    padding-bottom: 15px;
}

#sidecontrols-container > .panel {
    width: 100%;
    margin-bottom: 0;
}

#colorpicker-container.panel {
    padding: 0px;
}

#sidecontrols-container.subcontrol-active ul.customizer-submenu {
    display: none;
}

#sidecontrols-container ul.customizer-submenu {
    background: transparent;
    padding: 0;
    text-align: center;
    list-style: none;
    margin: -20px -10px;
    max-width: 500px;
    margin: auto;
    padding: 15px 0;
}

#sidecontrols-container ul.customizer-submenu {
    padding: 30px 0 15px 0;
    margin: auto;
}

.selectedobject-wrapper-half {
    width: 50%;
    display: block;
    marign: 0 1px 0 0;
}

.selectedobject-wrapper-half-left {
    float: left
}
.selectedobject-wrapper-half-right {
    float: left;
}


#selectedobject-text-input {
    padding: 10px;
    width: 100%;
    max-height: 160px;
    min-height: 160px;
    margin: 5px 5px 5px 5px;
    font-size: 28px;
}

#selectedobject-text-wrapper {
    height: auto;
    max-height: none;
}

#text-add-wrapper {
    max-height: none;
}

#text-list {
    list-style:none;
    margin:0;
    padding:0;
}

#text-list li {
    background: #fff;
    border: 1px solid #ccc;
    text-align:center;
    padding:5px;
    float:left;
    cursor: pointer;
    overflow: hidden;
    width: 90px;
    height: 75px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
    margin: 5px;
}
#text-list li div {
    vertical-align: middle;
    border:1px solid #474747;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#text-list-container {
    text-align: center;
}

#text-monogram-wrapper {
    display: none;
}

#text-text-input {
    padding: 10px;
    width: 98%;
    max-height: 145px;
    min-height: 145px;
    margin: 5px 5px 5px 5px;
    font-size: 26px;
}

#text-font-back-wrapper {

    text-align:left;
}

#text-font-back-btn {
    float: left;
}

#text-font-list {
    width: 100%;
    padding: 15px 0 0 0;
    clear: both;
    float: none;
    display: block;
}

.text-font-sample {
    font-size: 24px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ccc;
    text-align:center;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
    margin: 5px;
    overflow: hidden;
    white-space: nowrap;
    max-height: 48px;
    min-height: 48px;
}

.text-font-sample:hover {

    background-image: -webkit-linear-gradient(top,#337ab7 0,#265a88 100%);
    background-image: -o-linear-gradient(top,#337ab7 0,#265a88 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));
    background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #245580;

    color: white;
}

#selectedobject-font-family {

}

#selectedobject-font-input {
    display: none;
}

#selectedobject-textalign-wrapper,
#selectedobject-font-wrapper {
    display: block;
    padding: 5px;
}

#selectedobject-textalign-wrapper > * {
    float: none;
    margin: auto;
    min-width: 55px;
}

#verify-container {

    max-width: 460px;
    margin: auto;

}

div#verify-inner .menu-row {
    max-width: 460px;
}

#verify-email-input,
#verify-email-confirm-input {
    padding: 10px;
    height: 40px;
    float: right;
    width: 320px;
    margin: 10px 5px 5px 15px;
    font-size: 14pt;
    border: 1px inset #aaa;
}

#verify-inner input[type='checkbox'] {
    margin: -4px -5px 6px -10px;
}

/* fabric styles, TODO: move up with main styles */
#color-opacity-controls { margin-bottom: 5px; }

#text-controls { display: inline-block; vertical-align: top; margin-left: 10px; border: 1px dotted #ccc; padding: 10px; width: 220px; }
#text-controls textarea { float: left; margin-right: 10px; }

#text-controls-additional { display: inline-block; vertical-align: top; border: 1px dotted #ccc; padding: 10px; }
#text-controls-additional button { vertical-align: top; display: block; margin-bottom: 7px; }

#text { position: relative; width: 300px; height: 200px; }
#text-cmd-linethrough { text-decoration: line-through; }
#text-cmd-underline { text-decoration: underline; }
#text-cmd-overline { text-decoration: overline; }
#text-cmd-italic { font-style: italic; }
#text-cmd-shadow { text-shadow: rgb(100,100,100) 1px 1px 3px; }



/* ADMIN MENU */

#admin-menu {
    display: none;
    width: 300px;
    min-height: 100px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    border-top: 5px solid grey;
    padding: 15px;
    text-align: center;
    background: rgba(0,0,0,.05);
    bottom: 5px;
    right: 5px;

}

#admin-menu:before {
    content: "admin menu";
    position: absolute;
    top: 0;
    left: 0;
    background: grey;
    color: lightgrey;
    font-size: 10px;
    padding: 2px;
}

/* PRODUCT NAV MENUS */

.inner-product-view-controls {
    text-align: center;
    display: inline-block;
    padding: 4px 20px 6px 20px;
    background: rgba(0,0,0,.05);
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
    margin-top: -5px;
    border-radius: 0 0 10px 10px;
}

select, select > option {
    cursor: pointer;
}

select.switch-side-menu {
    font-size: 16px;
    padding: 4.5px 20px;
}

#side-menu-container {
    display: inline-block;
    margin: 4px 15px 0 15px;
    top: 2px;
}

.inner-product-view-controls {
    text-align: center;
}

#side-menu-container button.side-stepper {
    padding: 6px 7px 6px 7px;
    position: relative;
    margin: 0 -1px;
    top: 2px;
}

select.switch-side-menu {
    background: #80d583;
    color: white;
    font-weight: bold;
}

#product-view-controls-container {
    max-width: 500px;
    min-width: 400px;
    width: 100%;
    float: right;
    z-index: 10;
    position: absolute;
    text-align: center;
    top: 0;
    right: 0;
    display: none;
}

#design-preview-btn {
    color: white;
    width: 100px;
    background: #7db9e8;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #7db9e8 0%, #1e5799 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(100%,#1e5799));
    background: -webkit-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
    background: -o-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
    background: -ms-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
    background: linear-gradient(to bottom, #7db9e8 0%,#1e5799 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 );
    font-weight: normal;
    text-shadow: none;
}

.button {

    -moz-box-shadow: inset 0px 1px 3px 1px #c7c7c7;
    -webkit-box-shadow: inset 0px 1px 3px 1px #c7c7c7;
    box-shadow: inset 0px 1px 3px 1px #c7c7c7;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #787878), color-stop(1, #383838) );
    background: -moz-linear-gradient( center top, #787878 5%, #383838 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#787878', endColorstr='#383838');
    background-color: #787878;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-left-radius: 6px;
    text-indent: 0;
    border: 1px solid #474747;
    display: inline-block;
    color: #ffffff;
    font-family: Arial;
    font-size: 30px;

    font-style: normal;
    height: 50px;
    line-height: 50px;
    width: auto;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0px #000000;
    padding: 4px 25px;
}

.button:hover {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #383838), color-stop(1, #787878) );
    background: -moz-linear-gradient( center top, #383838 5%, #787878 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#383838', endColorstr='#787878');
    background-color: #383838;
}


#product-view-container .button {

    width: 30%;

}


/* RESPONSIVE CONDITIONS */

/* wide enough for side by side */
@media all and (min-width: 950px) {

    #product-view-container {
	position: absolute;
	float: right;
	right: 0;
    }
}

/* vertical layout (too narrow for side by side layout) */
@media all and (max-width: 949px) {


    #main-container {
	height: 100%;
    }

    #preview-container {
	float: right;
    }

    .product-view-canvas {
	top: 0;
	left: 0;
	position: absolute;
    }

    #sidecontrols-container {
	position: relative;
	float: left;
	clear: left;

    }


}

/* PORTRAIT MODE WITH NAV ON BOTTOM */

/* needs enough space for 2 near 1:1 aspect ratio blocks, so needs aspect ratio of 1/2 or less */
/* @media (max-width: 949px) and ( max-aspect-ratio: 1/2 ) and (max-height: 975px),
(max-width: 949px) and (max-height:  975px)*/
@media ( max-aspect-ratio: 1/1 ) and (max-width: 1200px)
{

    body, html {
	overflow: hidden;
	width: 100vw;
	height: 100vh;
    }

    #main-container {
	padding: 0;
	height: 100%;
    }

    #product-view-container {
	float: none;
	clear: both;
	position: relative;
	display: block;
	margin: auto;
    }


    #mystyle-customizer {
	min-width: 500px;
	min-height: 500px;
    }

    #topcontrols-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: auto;
	border-bottom: 1px solid #CCC;
    }

    .topcontrols-subcontainer {
        width: calc(25% - 1px);
    }

    div#topcontrols-container.minimized {
	bottom: -100px;
	top: auto;
    }

    #sidecontrols-container {
	position: fixed;
	bottom: 80px;
	left: 0;
	right: 0;
	min-height: 0;
	z-index: 6;
	display: block;
	float: none;
	width: 100%;
    }

    #sidecontrols-container:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
	box-shadow: 0 0px 14px rgba(0,0,0,.2);
	border: 0;
	z-index: -1;
    }

    div#start-ui {
	position: fixed;
	z-index: 10;
	bottom: 100px;
	margin: 0;
	padding: 0;
    }

    #sidecontrols-container #main-container .panel {
	margin: 0;
    }

    #product-view-controls-container {
	width: 100vw;
	max-width: none;
	height: 30px;
    }

    .topcontrols-subcontainer .label {
	font-size: 18px;
	font-weight: normal;
	height: 90px;
    }

    .topcontrols-subcontainer.active {
	margin-top: -10px;
	box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
	height: 90px;
    }

}

/* iphone 4 and 5 portrait width */
@media all and (width: 640px) {


}

/* iphone 5 landscape width */
@media all and (width: 1136px) {


}


/* iphone 4 landscape width */
@media all and (width: 960px) {


}

input[type='checkbox'] {
    -webkit-appearance:none;
    height:50px;
    width: 50px;
    background:white;
    border-radius:10px;
    background-image: none;
    border:2px solid #555;
    box-shadow: 2px 2px 4px rgba(0,0,0,.25);
}
input[type='checkbox']:checked,
input.required[type='checkbox']:checked {
    background: #7bbf6a;
    background-image: url(../images/checkmark.png);
    border-color: #EEE;
}

input.required[type='checkbox']{
    border: 2px solid #DD0000;
}



verify-container input[type="checkbox"] {
    border-radius: 10px;
}

#colorpicker-container {
    display: none;
}


/* colorpicker styles */
#colorpicker-canvas {
    cursor: crosshair;
    border: 0;
    margin: auto;
    display: block;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    max-width: 100%;
}

div#colorpicker-container > .menu-row:first-child {
    max-width: 100%;
}

.colorpicker-controls {
    /* display: none; */
    float: left;
    /* margin: 10px; */
}
.colorpicker-controls > div {
    overflow: hidden;
    padding: 5px;
    float: left;
}

#colorpicker-hexVal {
    padding: 10px;
    height: 40px;
    margin: 5px 5px 5px 20px;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
    float: right;
}

#colorpicker-close {
    float: left;
}

.colorpicker-preview {
    /* background: url(../images/select.png) repeat scroll center center transparent; */
    border-radius: 4px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    cursor: pointer;
    width: 60px;
    min-height: 40px;
    min-width: 50px;
    border: 1px solid #9c9c9c;
    float: right;
    margin-left: 5px;
    background-color: #FFAA33;
}

.btn:hover .colorpicker-preview,
button:hover .colorpicker-preview,
.colorpicker-preview:hover {
    border-color: white;
}

#design-complete-container {
    margin-top: 30px;
    transition-duration: 500ms;
    margin-top: 30px;
    padding: 30px;
    padding-bottom: 60px;
    border-top: 5px solid #4c87bf;
}

#design-complete-wrapper {
    text-align: center;
    padding: 30px;
    margin: 0px -2px 15px -2px;
}

#design-complete-wrapper hr {
    margin: 30px auto;
}

#design-complete-btn {
    float: right;
}


div#verify-pub-wrapper.menu-row, #verify-copyright-wrapper.menu-row {
    width: 100%;
    margin: auto;
    display: block;
    float: none;
    position: relative;
    clear: both;
    text-align: left;
    padding: 4px 2px 4px 19px;
    border: 0;
}

#verify-pub-label, #verify-copyright-label {
    font-size: 13pt;
    font-weight: normal;
}

div#design-complete-btn-wrapper {
    padding-top: 8px;
    padding-bottom: 0;
    margin-bottom: 0px;
}

#verify-email-label, #verify-email-confirm-label {
    position:relative;

}

div#verify-email-confirm-label {
    margin-bottom: 15px;
}

div#verify-email-confirm-label label,
div#verify-email-label label {
    margin-top: 10px;
    position: absolute;
}



.ui-back-top-row {
    padding: 5px;
    /* margin-top: -28px; */
}

ul.customizer-submenu > li {
    list-style-type: none;
    text-align: center;
}

.customizer-submenu li div.menu-row {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 5px;
    text-align:left;
}

.customizer-submenu li div.menu-row h3:first-child,
ul li div.menu-row h3:first-child,
div.menu-row h3:first-child {
    vertical-align: top;
    padding-top: 10px;
    color: #555;
    font-size: 18px;
    display: inline-block;
    margin: 0;
    text-align: left;
    font-weight: normal;
    padding: 15px 15px 0 20px;
}

#submenu-selectedobject-container {
    display: none;
}

#submenu-selectedobject-container.control-active ul.customizer-submenu button {
    display: inline;
    width: auto;
}

#submenu-selectedobject-container.control-active button label,
.btn-ui-component-back label {
    display: none;
}

.selectedobject-wrapper > .btn-default,
.selectedobject-wrapper > .btn.selectedobject-subbutton {
    float: right;
}

.selectedobject-wrapper > .btn-default:first-child,
.selectedobject-wrapper > .btn.selectedobject-subbutton:first-child {
    float: none;
}

ul.customizer-submenu li button {
    display: inline-block;
    position: relative;
    width: 86%;
    max-width: 100%;
    min-width: 300px;
    margin: auto 5px;
    padding: 12px;
    font-size: 20px;
    text-align: left;
    padding-left: 1em;
    float: none;
    margin-bottom: 10px;
    min-height: 60px;
}

ul.customizer-submenu li button .small {
    margin-bottom: -5px;
}

ul.customizer-submenu li button .glyphicon {
    font-size: 32px;
    margin-left: 15px;
    float: right;
    transition-duration: 333ms;
    pointer-events: none;
    font-size: 38px;
    margin-top: -3px;
    margin-bottom: -50px;
    padding: 0;
    position: relative;
    right: 0;
    margin-right: 10px;
}

ul.customizer-submenu li button:hover .glyphicon {
    font-size: 46px;
    right: -4px;
    margin-top: -7px;
    margin-bottom: -15px;
}


.menu-row > label {
    font-size: 16px;
}

.menu-row > label:first-child {
    margin-top: 15px;
    margin-left: 10px;
}

button label,
.button label,
.btn label {
    font-weight: inherit;
    transition-duration: 333ms;
    cursor: pointer;
    pointer-events: none;
    margin: 2px 0 0;
}

.customizer-submenu button:hover label {
    padding-left: .4em;

}

.selectedobject-wrapper-button {
    display: inline-block;
    position: relative;
    width: auto;
    max-width: 100%;
    min-width: 100%;
    margin-right: 5px;
    margin-left: 5px;
    padding: .6em;
    font-size: 18px;
    text-align: left;
    padding-left: 1em;
}


.selectedobject-wrapper-button .glyphicon {
    margin-right: 1em;
    margin-left: 1em;
    float: right;
    transition-duration: 333ms;
    pointer-events: none;
}

.selectedobject-wrapper-button label {
    font-weight: inherit;
    transition-duration: 333ms;
    cursor: pointer;
}

.sidecontrols-row {
    margin-top: 0px;
    padding: 0px;
}

.sidecontrols-subcontainer > h3.subtitle:first-child,
.sidecontrols-subcontainer > div:first-child > h3.subtitle:first-child {
    text-align: center;
    padding: 1px;
    font-size: 28px;
    font-weight: normal;
    color: #465249;

}

.sidecontrols-subcontainer > div:first-child > h3.subtitle:first-child {
    margin: -10px 0px 5px 0;
}


.click-disabled {
    pointer-events: none;
}

.click-enabled {
    cursor: pointer;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    select,
    textarea,
    input {
	font-size: 36px;
    }
}

#clickblock-container {
    pointer-events: none;
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
}

.btn-inverse {
    color: #ffffff;
    background-color: #363636;
    border-color: #BBBBBB;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.open .dropdown-toggle.btn-inverse {
    color: #ffffff;
    background-color: #222222;
    border-color: #BBBBBB;
}

.btn-inverse:active,
.btn-inverse.active,
.open .dropdown-toggle.btn-inverse {
    background-image: none;
    color: #ffffff;
}

.btn-inverse.disabled,
.btn-inverse[disabled],
fieldset[disabled] .btn-inverse,
.btn-inverse.disabled:hover,
.btn-inverse[disabled]:hover,
fieldset[disabled] .btn-inverse:hover,
.btn-inverse.disabled:focus,
.btn-inverse[disabled]:focus,
fieldset[disabled] .btn-inverse:focus,
.btn-inverse.disabled:active,
.btn-inverse[disabled]:active,
fieldset[disabled] .btn-inverse:active,
.btn-inverse.disabled.active,
.btn-inverse[disabled].active,
fieldset[disabled] .btn-inverse.active {
    color: #ffffff;
    background-color: #363636;
    border-color: #BBBBBB;
}

.btn-inverse:hover button,
.btn-inverse:hover div {
    color: #ffffff;
}

.btn-inverse:active button,
.btn-inverse:hover div {
    color: #ffffff;
}

.parent-click {
    cursor: pointer;
}

.center {
    text-align:center;
}

.instructions {

}

input#image-upload-proxy-input {
    font-size: 18px;
    margin: auto;
    float: none;
    display: block;
    width: 80%;
    margin-bottom: 10px;
}

/* SPECIAL THEMES / SKINS */

/* TODO: move these to individual stylesheets */
body.steps-circles .topcontrols-subcontainer {
    border-radius: 80px;
}



/* this needs to be at the bottom of the stylesheet to override display settings */
#sidecontrols-container,
#render-print-btn,
#render-web-btn,
#render-thumb-btn,
#render-show-export-btn,
#render-show-design-btn,
#export-print-btn,
#export-web-btn,
#export-thumb-btn,
#apicall-mobilerenderupload-btn,
#apicall-mobiledesignadd-btn,
#verify-btn,
#render-all-btn,
#step-selectedobject-container,
#pattern-btn,
#selectedobject-container,
#selectedobject-left-control-wrapper,
#selectedobject-top-control-wrapper,
#selectedobject-scale-control-wrapper,
#scale-text,
#layer-to-back-btn,
#layer-to-front-btn,
#text-align-wrapper,
#text-background-wrapper,
#text-stroke-wrapper
#text-font-size-wrapper
#text-line-height-wrapper,
#text-controls-additional,
#text-text-input-old,
#angle-control-range,
#flip-horizontal-btn,
#flip-vertical-btn,
#selectedobject-angle-control-wrapper,
#selectedobject-opacity-control-wrapper,
#opacity-control-text,
#opacity-control-range,
#angle-control-text,
#angle-control-range,
#scale-control-range,
#scale-control-text,
#canvas-to-xml-btn,
#text-menu-container,
#text-add-wrapper,
#text-list-container,
#back-to-main-steps,
#get-from-url-wrapper,
#image-list-container,
.subcomponent
{
    display: none;
}


#design-buy-btn {
    display: none;
}

body.mystyle-preview-mode #design-buy-btn {
    display: initial;
}

body.mystyle-preview-mode #topcontrols-container,
body.mystyle-preview-mode #start-ui,
body.mystyle-preview-mode #sidecontrols-container,
body.mystyle-preview-mode #product-view-controls-container #side-menu-container
{
    display: none !important;
}

body.mystyle-preview-mode #product-view-container,
body.mystyle-preview-mode #product-view-controls-container
{
    text-align: center;
    display: block;
    position: relative;
    float: none;
    margin: auto;
}

body #design-preview-btn .glyphicon-eye-close {
    display: none;
}

body.mystyle-preview-mode #design-preview-btn .glyphicon-eye-close {
    display: inline-block;
}

body.mystyle-preview-mode #design-preview-btn .glyphicon-eye-open {
    display: none;
}


button span.small.subtext {
    display: block;
    font-size: 12px;
    font-weight: normal;
}



/* fancies */

#design-complete-container > .ani-gradient-bar {
    border-radius: 4px 4px 0 0;
    margin: 0 -2px;
    color: white;
    padding: 3px 6px;
    font-size: 10px;
}


/* dark blue to medium blue gradient animation */
.ani-gradient-bar {

background: linear-gradient(270deg, #004472, #1a82d7);
background-size: 400% 400%;

-webkit-animation: BlueGradient1 4s ease infinite;
-moz-animation: BlueGradient1 4s ease infinite;
-o-animation: BlueGradient1 4s ease infinite;
animation: BlueGradient1 4s ease infinite;

}

@-webkit-keyframes BlueGradient1 {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes BlueGradient1 {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-o-keyframes BlueGradient1 {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes BlueGradient1 {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}