// out: ../mycss/style.css, sourcemap: true, compress: true //@red: #dd3333; @black:black; @red: @black; @pink: @black; // @buttonHover: #e8479f; //@buttonHover: lighten(@pink,10); //@blue: #46629e; @blue: @black; @buttonHover: @blue; @darkBlue: @black; @lightGray: @black; @border: @black; @disabledBackground: @lightGray; @darkGray: darken(#909090,20); @validGreen: #3c763d; @siteWidth: 1200px; @menuHeight: 60px; @choiceShaddow: 2px 4px 5px 0 rgba(0, 0, 0, 0.75); @choiceShaddowLight: 2px 4px 5px 0 rgba(0, 0, 0, 0.05); #fineUploader{ #sizingCalc { margin-top: -10px; color: @black; font-size: 18px; margin-bottom: 10px; } } b{ font-weight: bold; } .requiredMark{ color:@red; } .theMessage{ font-size: 26px; background-color: darkgray; top: 8px; position: relative; b{ font-weight: bold; } } #suggestedSizes{ display: none; } .mainWraps() { padding: 0 10px; max-width: @siteWidth; margin: 0 auto; } body { background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.3em; .mainSettings; a{ color:@darkBlue; &:hover{ color:@red; } } #leftContainer .loaderImage{ color: @pink!important; } .redColor { color: @red!important; } .pinkColor{ color:@pink; } #header { background-color: white; border-bottom: 1px solid black; #headerWrap { height: @menuHeight; .mainWraps; } } #content { #MainWrapper { .mainWraps; } } footer { height: 10px; } } .mainSettings() { .ourRed{ color:@red!important; } input[type="checkbox"] { margin-right: 4px; margin-left: 4px; } input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"] { border: 1px solid @border; padding: 7px; margin: 5px 0; box-sizing: border-box; height: 35px; &:disabled { .disabedSettings; } } .disabled .custom-select-label { .disabedSettings; } .disabedSettings() { color: @darkGray; cursor: not-allowed; background-color: @disabledBackground; } strong { font-weight: bold!important; } h1, h2, h3, h4, h5, h6 { font-size: 14px; /*font-variant: small-caps;*/ text-transform: none; font-weight: 200; color: @red; margin-bottom: 0; } h1 { font-size: 34px; padding-bottom: 0; margin-bottom: 10px; } h2 { font-weight: normal; line-height: 32px; font-size: 24px; } li { margin: 2px 0; } i { font-style: italic; } select { height: 30px; } textarea { border: 1px solid @border; font-size: 13px; padding: 8px 15px; margin-right: 1%; width: 100%; box-sizing: border-box; } span.customSelect { background-color: white; padding: 5px 7px; border: 1px solid @border; border-radius: 0; } .customSelectInner { background: url("/images/customSelect-arrow.gif") no-repeat scroll right center transparent; padding-right: 22px; } .custom-select, .custom-select-label { background-color: white; height: 34px; line-height: 33px; position: relative; width: 100%; display: block; } .custom-select { margin-bottom: -2em; z-index: 2; opacity: 0; -webkit-appearance: none; } #wrapLink { margin-bottom: 10px; display: block; } .custom-select-label { padding-left: 0.5em; border: 1px solid @border; margin: 0; padding-right: 20px; &:after { content: ""; display: block; border: 10px solid transparent; border-top-color: @red; position: absolute; top: 50%; right: 1.5em; margin-top: -3px; } } } .moreInfo { cursor: pointer; font-size: 16px; margin-left: 10px; } .noPreviewAvailable { border: 1px solid @darkGray; width: 100px !important; height: 100px !important; padding: 29px 26px 26px; font-size: 10px; color: @darkGray; } .ui-datepicker-header { background-color: @pink !important; background-image: none; } .ourBlue { color: @blue; } .orderFormContainerRadio label { margin-left: -5px; margin-right: 10px; } .requiredField { box-sizing: border-box; color: @red; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-size: 14px; font-size-adjust: none; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; letter-spacing: 0; line-height: 18.2px; list-style-image: none; list-style-position: outside; list-style-type: none; margin-left: 4px; text-alignlefttext-indent: 0; } .ourBlueHover:hover { color: @blue!important; text-decoration: none; } .getStartedCol { padding: 0 20px; margin-bottom: 30px; } .cartTotalsTable label { margin-left: 10px; } .requestAProof input { margin-left: 5px; } .requestAProof label { margin-left: 20px; } .addImageCart { color: @red; font-size: 22px; top: 10px; position: relative; &:hover { color: @blue; text-decoration: none; } } .tooltipster-base { background-color: white; } .page-getstarted-canvas .page-header h2, .page-getstarted-metal .page-header h2, .page-getstarted-paper .page-header h2 { text-transform: uppercase; font-size: 24px; } ul.fa-ul > li > i.fa-circle { position: relative; top: -1px; left: 1px; font-size: 10px; } .tooltipster-base img { width: atuo; height: auto; max-width: 200px; max-height: 200px; } .wrapTooltip { max-width: 200px; } .priceNavLink { font-size: 16px; } .qq-gallery .qq-upload-list li { height: 116px !important; width: 80%; max-width: 100%; } .getStartedBox { background-color: @lightGray; color: black!important; min-height: 350px; padding: 10px 5px 20px; margin-top: 10px; &:hover { .transition(0.3s); .scale(1.05); .box-shadow(@choiceShaddow)!important; .cta-button { background: @blue!important; } } * { text-decoration: none!important; color: black!important; } .title { color: black!important; text-align: center; text-transform: uppercase; display: table; margin: 8px auto; font-weight: bold; font-size: 22px; line-height: 25px; min-height: 40px; } img { max-width: 100%!important; max-height: 140px; } .description { color: black!important; text-align: left; display: table; margin: 0px auto; font-size: 12px; padding: 5px 13px; .li{ color: @darkGray!important; } } .cta-button { text-transform: uppercase; display: table; margin: 0 auto; font: normal normal 18px arial; } .imagePush { min-height: 160px; } .buttonPush { min-height: 235px; } .imagePush > img { display: table; margin: 10px auto; } } .frontPageSizeText { font-size: 20px; line-height: 28px; color: @red; clear: both; padding: 10px; max-width: 685px; margin: 0 auto; } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: @blue; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .progress-bar-striped, .progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } .progress-bar-info { background-color: #5bc0de; } .tooltipster-content { color: black; } .qq-gallery .qq-file-info { padding: 6px 6px 4px !important; max-width: 100px; margin: 0 auto; } @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress-bar.active, .progress.active .progress-bar { animation-name: progress-bar-stripes; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } .page-header { /*padding-bottom: 9px;*/ margin: 15px 0; /*border-bottom: 1px solid #eee;*/ } .page-header h1 { font-size: 24px; text-transform: uppercase; } .text-center { text-align: center; } #fineUploader { max-width: 600px; margin: 0 auto; } #shippingCalculatorDiv .custom-select-label { width: 100%!important; } .red { color: @red; } .sizeLabel { margin-left: 6px; } .qq-upload-button { border: none!important; } #alertify { border: 1px solid black; top: 70px; } #sizeDiv .custom-select-label, #sizeStaicDiv .custom-select-label { width: 225px!important; } .fancyboxlink { color: @red; cursor: pointer !important; &:hover{ color:@blue; } } .host-order-gicleecanvasprinting-com #logo { margin-top: 12px; } /*input, select{ -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }*/ // .entry h2 { // color: black; // font-weight: 200; // padding: 20px 0; // } // // .entry p { // line-height: 22px; // } .ng-touched.ng-invalid { border: 1px solid @red; } #browserNotification { width: 100%; text-align: center; width: 100%; text-align: center; min-height: 50px; } #browserNotText { padding-top: 10px; } #logoArea { float: left; } #menuDiv { float: right; } select { font-size: 16px; height: 35px !important; border: none; } #sizeTable td { padding-top: 10px; } #checkoutNavTop { float: right; } #checkoutNav { float: right; clear: both; margin-top: 20px; } #ImageCenterDiv, #ImageCenterWrap, #ImageDiv { display: table; } #ImageCenterWrap { margin: 0 auto; } .custom-select-label { margin: 0 !important; } #sizeTable > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) { width: 40px; } #sizeImage p { line-height: 20px; } #ImageOptionsTable > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) { padding-left: 20px; vertical-align: middle; } #checkoutForm, .form { margin: 10px 0; input[type="email"], input[type="password"], input[type="tel"], input[type="text"], select { width: 100%; } label { margin-top: 10px; display: block; } .cartTotalsTable label { margin-top: 0; display: inline-block; } label.custom-select-label { margin-bottom: 15px !important; width: 100% !important; } div { margin: 5px 0; } } .borderWithPadding .page-header:first-child { margin-top: 0; } .groupInput { display: inline-block; width: 100%; margin: 0 !important; } .groupInput label { display: inline-block; width: 49% !important; float: left; } .groupInput label:last-child { float: right; } #message { text-align: center; } #myAccountNav li { border-bottom: 1px solid @border; cursor: pointer; color: @red; padding: 5px 0; } #myAccountNav .selected { color: @blue; } #myAccountNav { margin-bottom: 15px; } .fakelink { text-decoration: underline; color: @red; cursor: pointer!important; } .page-my-account .borderWithPadding .page-header { margin-top: 0; } .page-my-account .borderWithPadding h2 { display: inline-block; color: black; } .page-login .borderWithPadding h2 { display: inline-block; color: black; } .myaccount_user_container { border-top: 1px solid @border; border-bottom: 1px solid @border; padding: 25px 0; } .myaccount_user_container span { display: table-cell; padding: 25px 0; border-right: 1px solid @border; } .myaccount_user_container span:last-child { border: none!important; } .borderWithPadding { box-sizing: border-box; border: 1px solid @border; padding: 40px; margin-top: 10px; } .cartTableWrap { border: 1px solid @border; padding: 40px; margin: 15px 0 0; } .cartTableWrap h2 { color: black; font-weight: normal; } .cartTableWrap hr { margin: 10px 0; } .cartTable { padding: 10px; width: 100%; } .expdate { display: inline-block; } .payment_box { // background-color: @lightGray !important; padding: 10px; } #payment label { display: inline; } #payment li { padding-top: 5px; } .paymentMethodIcon { max-width: 50px; margin-left: 6px; } #paypalImage { width: 80px; height: auto; } .form-row { padding-top: 15px; } #payment label.custom-select-label { margin-bottom: 0 !important; display: block; } #payment label.custom-select-label, #payment select { width: 120px !important; } #payment .expdateyear label.custom-select-label, #payment .expdateyear select { width: 80px !important; } #paypal_pro_payflow-card-number { width: 160px !important; display: block; } #paypal_pro_payflow-card-cvc { width: 50px !important; display: block; } #noneLabel { width: 139px; height: 136px; border: 1px solid #000; padding-top: 55px; padding-left: 37px; } .centerText { text-align: center; } .paddingTB10 { padding: 10px 0; } .couponCodeInput.valid { border: @validGreen 1px solid !important; } .couponCodeInput.error { border: @red 1px solid !important; } .couponCode * { vertical-align: middle; } .couponCode input { height: 28px; width: 90px !important; padding: 4px 7px; } .couponCode label { margin-top: 0 !important; display: inline !important; font-size: 13px; } .tdPrice, .tdQuantity { vertical-align: middle; } .cartTotalsTable { width: 100%; margin-bottom: 5px; tr { border-bottom: 1px solid @border; padding: 5px; } td { padding: 5px; &:nth-child(2) { text-align: right; } &:nth-child(1) { font-weight: bold; } } } .cartTable { td, th { vertical-align: middle; padding: 5px; } th { text-align: left; font-weight: bold; } tr { border-bottom: 1px solid black; padding: 5px; } } .ProductNameTable tr { border-top: 1px solid @border; border-bottom: none; padding: 5px; &:first-child { border-top: none; } &.lastVisible { border-bottom: none; } } .previewImage { max-height: 100px; max-width: 100px; height: auto; width: auto; margin-right: 30px; vertical-align: top; } .removeItem { vertical-align: middle; border: 1px solid @border; padding: 5px; color: @red; cursor: pointer; } #shippingCalculatorDiv { margin-right: 5px; float: left; } .cartTotals, #cartTotals, #cartTotalsCheckout, #shippingCalculatorDiv { border: 1px solid @border; padding: 10px; margin-bottom: 10px; width: 49%; } #shippingCalculatorDiv select { width: 100%; } #cartTotals,.cartTotals { float: right; } .floatright { float: right; } #logo { margin:0px !important; max-width: 100%; max-height: 60px; } #bigOr { margin: 20px 0 10px; font-size: 20px; } /* Buttons*/ .uploadButtonCenter { margin: 0 auto; display: table !important; float: none !important; } #uploadFromFacebook { background-color: #3b5998; color: white; border: none; font-size: 20px; padding: 10px 30px; margin: 10px; line-height: 22px; } #ImagePriceWrapWraps, #leftContainer { max-width: 49% !important; } #congratulationsDiv { font-size: 15px; div { display: inline-block; display: inline-block; max-width: 77%; vertical-align: middle; a { display: table; margin: 0 auto; } } img { vertical-align: middle; max-height: 43px; height: auto; width: auto; } } #customSizeDiv .custom-select-label { width: 80px!important; } .cta-button.btn-sm { font-size: 14px; padding: 6px 10px; } .cta-button:focus { outline-style: none; border-width: 0; outline: 0; } #MenuCTA .cta-button { padding: 7px 0 7.5px; min-width: 150px; font-size: 12px; } .hentry .entry a.cta-button:hover { color: #ffffff !important; } .getStartedBox:hover .cta-button { border: 0 solid #5e78e0; background-color: #e8479f; background: -webkit-gradient(linear, left top, left bottom, from(#ff1952), to(#ff0c7f)); background: -moz-linear-gradient(top, #ff1952, #ff0c7f); background: linear-gradient(to bottom, #ff1952, #ff0c7f); color: #ffffff !important; text-decoration: none !important; text-transform: uppercase; } .cta-button:disabled { opacity: 0.5; color: rgb(153, 153, 153) !important; } .cta-button { outline-style: none; border-width: 0; display: inline-block; text-align: center; vertical-align: middle; padding: 8px 21px; border-radius: 0; background-color: @red !important; font: normal normal 21px arial; color: white !important; text-decoration: none; text-transform: uppercase; cursor: pointer; cursor: hand; &:hover { background-color: @buttonHover !important; color: white !important; text-decoration: none !important; text-transform: uppercase; } &:focus { text-transform: uppercase; outline: 0; } } .intButtons { width: 300px; cursor: pointer; } #slider-text .cta-button { margin-top: 18px; font-size: 20px; width: 170px; } /* End Buttons */ .propContainer { display: inline-block; margin: 0 30px; text-align: center; } #MainChecklist h4 { margin: 0 !important; font-size: 17px !important; } #topMenuGS { background-color: @pink; color: white; padding: 5px 10px; } #topMenuGS:hover { background-color: @pink; } .getStartedButton { font-size: 25px !important; } #choicesTable { display: table; margin: 0 auto; } // li.fusion-custom-menu-item:nth-child(3) .fusion-custom-menu-item-contents { // min-width: 180px; // } #choicesTable td:nth-child(1) { text-align: right; font-weight: bold; } #choicesTable td { padding-top: 7px; } #choicesTable td:nth-child(2) { padding-left: 5px; } #NameOrNumber, #RotateDiv { display: none !important; } #nextStep { clear: both; display: block; float: right; margin-top: 10px; border-top: 1px solid @border; border-top-width: 1px; border-top-style: solid; border-top-color: @border; width: 100%; text-align: center; padding: 7px; box-sizing: border-box; font-size: 13px; } #nextStep span { color: @red; } textarea { color: black !important; } #PriceImageDiv {} #sizeMessage { margin: 2px 0 10px 25px; } #sizeDiv, #sizeStaicDiv { margin: 5px 21px 16px !important; } #leftContainerControls { clear: both; } .optionSelected { border: 2px solid @red !important; .box-shadow(@choiceShaddow); } .optionLabelDiv:hover { .box-shadow(@choiceShaddow); } .optionLabelDiv label { height: 180px; display: block; } .optionLabelDiv img { height: auto; width: auto; max-width: 150px !important; max-height: 150px !important; } .optionLabelDiv input { display: none !important; } .optionLabelDiv { display: inline-block; margin: 4px 4px 15px; } .optionLabelDiv span { display: block; text-align: center; } .spacer { border-top: 1px solid @lightGray; margin: 12px; clear: both; } #ImagePriceWrapWraps { width: 570px; float: right; } .options { padding: 10px; } #btn-addToCart, #btn-next { float: right; } #optionsPageWrap { min-height: 500px; } #styleImageTable select { width: 200px; } #leftContainer { float: left; } #leftContainerPanel table { width: 100%; } #ImageCenterWrap { max-height: 500px; } #mirrorWrapNote { top: -10px; position: inherit; color: @red; } #uploadFileText { line-height: 26px; color: #2A718E; font-size: 20px; font-weight: bold; display: none; } #ImageOnFileText { line-height: 22px; color: #2A718E; font-size: 20px; font-weight: bold; margin-bottom: 4px; } #sizeDiv { height: 30px; margin: 5px; } #toolWindow { height: 75px; margin-bottom: 5px; width: 100%; } #btn-doCrop { float: right; } #howTopCropPage { margin-left: 10px; } #btn-crop { margin-left: 25px; } #cropImage { max-width: 50% !important; max-height: 50% !important; } #cropContainer { clear: both; } #cropWindowDiv { max-height: 80%; max-width: 100%; } #leftControls { float: left; } #CustomSizeCrop { width: 240px; display: inline-block; } .cropSize { width: 70px !important; } #content-div { /*min-height:530px;*/ max-width: 620px; overflow: hidden; } #ImageDiv { background-color: #FFFFFF; } #pricePush { min-height: 470px; } #Comments { /*resize: none;*/ height: 34px; } .largeImage { color: @red; } #ImagePriceWrap { width: 570px; /* margin-top: 43px;*/ margin-right: 10px; max-width: 100%; max-height: 350px; } #ImageCenterDiv { position: relative; display: table; margin: 0 auto; padding: 0; overflow: hidden; width: 100%; } #VisibleImageArea { visibility: hidden; border: 1px solid black; } #PreviewImage { max-width: 600px; max-height: 300px; height: auto; width: auto; position: relative; } #ImageWrapperDiv { max-height: 600px; padding-left: 30px; padding-top: 20px; background-color: white; padding: 10px 20px 10px 10px; border-width: 1px; border-style: solid; border-color: @border; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; box-shadow: -5px -2px 5.94px 0 rgba(0, 0, 0, 0.07); } .tag-pill { background-color: @red!important; } #priceDiv { margin: 10px auto; width: 315px; text-align: center; padding-top: 8px; padding-bottom: 7px; font-size: 20px; background-color: #FFF; border-width: 1px; border-style: solid; border-color: @border; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; } .shaddowBox { /*box-shadow: 1px 1px 17px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2) !important; border-radius: 2px;*/ border: 1px solid @border; } #ImageOptionsTable { /*border-collapse:collapse !important;*/ } #ImageOptionsTable td { border: none !important; vertical-align: top; font-size: 14px; } #styleImage > table:nth-child(2) { float: left; } .colorpicker { left: 571px !important; top: 930px !important; } #styleImage { min-height: 340px; } #ImageDiv img { /*box-shadow: 3px 4px 8.1px 1.9px rgba(0, 0, 0, 0.35);*/ padding: 0 !important; } #btn-add { float: right !important; position: absolute; margin-left: 868px !important; margin-top: 436px !important; } #btn-rotate, #btn-rotate2 { height: 28px; padding: 0; margin: 0; } .fancybox-overlay { z-index: 9998000; } .fancybox-wrap { z-index: 9999000 !important; } table.ProductNameTable td:first-child { font-weight: bold; } #RotateDiv {} .imageOptions td { border: none; } .imageOptions { background-color: white; width: 522px; padding: 5px; margin-bottom: 20px; float: left; max-width: 100%; } #frameDiagram { text-decoration: underline; } #UploadFileDiv { text-align: center; } #ImageOnFileDiv { float: right; width: 49%; text-align: center; line-height: 14px; display: none; } #bottomNote { line-height: 14px; clear: both; } #status { color: @pink; margin-top: 15px; font-size: 14px; } #copyrightNotice { line-height: 14px; margin-top: 200px; text-align: center; width: 90%; margin: 8px auto 0; } #CustomHeight, #CustomWidth { width: 60px; } #btn-upload { /*padding: 20px 60px;*/ } #CanvasWrapDiv li { list-style-image: none !important; list-style: none !important; } .tcsd { margin-top: 50px !important; } #file1 { position: absolute; left: -9999px; } #priceNotice { display: none; color: @red !important; margin-top: 20px; font-size: 15px; } #PaperTypeDiv label { padding-top: 4px; } #checkout-text { visibility: hidden; height: 0; } .optionWrapper input { display: none; } .fancybox-wrap { z-index: 10000; } #cart_totals small { visibility: hidden; } #checkout-button2 { margin-top: 0; font-family: 'PT Sans Narrow', sans-serif; float: right !important; padding: 10px 10px 10px 7px; } #place_order2 { float: right !important; margin-top: -5px; } #checkoutContactUs { position: absolute; margin-left: 475px; margin-top: -490px; } #checkoutPhone { position: absolute; margin-left: 475px; margin-top: -522px; color: black !important; } .validator { color: @red; margin-top: 15px; font-size: 30px; vertical-align: top; } .ordersText { font-size: 11px; line-height: 15px; } input[type=button], input[type=submit] { -webkit-appearance: none !important; border-radius: 0 !important; } #cropImage {} #cropWindow { height: auto; width: auto; max-height: 420px; max-width: 420px; } #dropperImage { max-width: 98%; max-height: 98%; } .ImageColorPickerWrapper canvas { cursor: crosshair; } .ImageColorPickerCanvas { max-width: 98%; max-height: 98%; margin: 0 auto; display: table; } .centered { display: table; margin: 0 auto; float: none; text-align: center; } .imageOptions, .imageOptions .customSelect, .imageOptions button, .imageOptions input, .imageOptions textarea { font-size: 1em !important; } .imageOptions h2 { font-size: 1.2em !important; margin-bottom: 0.1em !important; margin-top: 0.1em !important; } .WrongImage { font-size: 14px !important; } .colpick { margin-top: -133px; margin-left: 24%; } #useDropDown { font-size: 12px; } #expyear { width: 76px !important; } /* PAPER OPTIONS */ #PaperTypeDiv { clear: both; } #paperDescriptions { display: none; margin-top: -300px; width: 408px; float: right; padding-right: 10px; font-size: 12px; line-height: 14px; padding-bottom: 14px; } #paperDescriptions span { display: inline-block; } #PaperTypeDiv > h1 { position: absolute; margin-top: -37px; margin-left: 360px; font-size: 20px; } /* CANVAS WRAP OPTIONS */ ul#input_6_12 { width: 820px !important; } ul#input_6_12 label { display: inline-block; vertical-align: bottom; width: 111px; height: 275px; padding-left: 7px; margin-top: 14px; cursor: pointer; font-size: 12px; } ul#input_6_12 label p { /*margin-left: 14px;*/ text-transform: capitalize; } .optionWrapper img { cursor: pointer !important; } .optionWrapper label { cursor: pointer !important; } .optionWrapper { display: inline-block; width: 140px; height: 140px; margin-left: 10.5px; cursor: pointer; vertical-align: top; margin-bottom: 10px; cursor: pointer; } .optionWrapperImage { vertical-align: top; width: 136px; height: 166px; display: inline-block; margin-left: 13.5px; margin-top: 11px; cursor: pointer; } #frameNone { position: absolute; margin: 62px 0 0 30px !important; } ul#input_6_12 .gchoice_12_0 label { /*height: 295px;*/ } ul#input_6_12 label:hover { .box-shadow(@choiceShaddow); } .optionWrapper:hover { display: inline-block; .box-shadow(@choiceShaddow); } #framesWrapper {} /*div.optionWrapper:nth-child(5){ margin-top:18px; }*/ .selectedChoice { border: 2px solid @red !important; .box-shadow(@choiceShaddow); } #framesLeft p { margin-top: 10px; margin-left: 6px; margin-bottom: 14px; } .framesOption { /*display:none;*/ position: absolute; margin: 116px 0 2px 22px; } .frameBlackWGold p { margin-left: 37px !important; } .frameBlack p { margin-left: 64px !important; } .frameBlack input { margin-left: 44px; } .frameWhite p { margin-left: 64px !important; } .frameWhite input { margin-left: 44px; } .frameBlackWSilver p { margin-left: 31px !important; } .frameBlackWSilver input { margin-left: 15px; } .optionWrapper p { margin-left: 40px !important; margin-bottom: 0; margin-top: -2px !important; } #framesDiv img { /*margin-left:20px;*/ padding: 0; width: 110px; height: 110px; } #framesWrapper { clear: both; } #framesDiv { margin-bottom: 17px; width: 760px; float: right; margin-right: 15px; } .wrapOptions { padding: 0 !important; max-height: 200px; } .wrapSideWrapper { width: 90px; display: inline-block; margin-left: -73px; overflow: hidden; height: 300px; margin-top: -30px; padding-top: 30px; } .wrapSidePreview div { float: right; } .wrapOptionsContainer { width: 110px; overflow: hidden; height: 230px; margin-left: 0; padding-top: 16px; } .wrapContain { vertical-align: top; display: inline-block; width: 90px; } .wrapSidePreview { -webkit-perspective: 600px; -moz-perspective: 600px; -o-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(500px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: perspective(500px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); -o-transform: perspective(500px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: perspective(500px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); transform: perspective(500px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); margin-right: -13px; } .wrapContain2, .wrapSidePreview {} #input_6_12 > li.gchoice_12_4 > label > div > div.wrapSideWrapper > div { margin-top: 1px; } .wrapContain2 { overflow: hidden; -webkit-perspective: 600px; -moz-perspective: 600px; -o-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(500px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); -moz-transform: perspective(500px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); -o-transform: perspective(500px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); -ms-transform: perspective(500px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); transform: perspective(500px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); margin-left: -12px; } #input_6_12 > li.gchoice_12_4 > label > div > div.wrapContain > div { margin-top: -50px; height: 300px; overflow-x: hidden; padding-top: 50px; } #input_6_12 > li.gchoice_12_4 > label > div > div.wrapContain > div > div { margin-left: -30px; } ul#input_6_12 li input { margin: 246px 8px 0 20px; position: absolute; display: none; } ul#input_6_12 .selectedChoice p { margin-top: -2px !important; } ul#input_6_12 li { float: left !important; width: 104px; margin: -12px 8px 0 10px; height: 310px; } #sizeImage > table:nth-child(3) > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(2) > span:nth-child(2) { margin-left: 8px; } #additionalInfo input, #additionalInfo textarea { width: 90%; } #optionsDiv div { max-width: 100%; } #input_6_12 div { max-width: none; } ul#input_6_12 { width: 100% !important; margin-top: 14px; /*margin-left: -32px;*/ } .optionWrapper img { width: 110px !important; padding: 2px !important; margin-left: 12px; max-width: 100% !important; } .colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input { padding: 0 12px 0 0; } table.ProductNameTable tbody tr { height: 20px; } #imageName { color: black; } .ProductNameTable { min-width: 33%; } .thumnail-image { float: left; display: inline-block; } .fancybox-skin { border: 1px solid @border; border-radius: 0; } .hiddenCanvas { display: none; } .td.product-quantity { min-width: 110px !important; } #checkoutContact { width: 36%; display: inline-block; } #checkoutContact h5 { font-size: 1.2em; margin: 6px 0; } .place-order { margin-top: 20px; } .cgp-customer-details, .cgp-order-details { display: block !important; } #ProductNameTable > tbody:nth-child(1) > tr { height: 20px; } #cvv { width: 60px !important; } #addImageRow { height: 44px; } #addImageButton { float: right; } div.sticky-queue { height: 93px; width: 135px; z-index: 100000; background: none; border: none; box-shadow: none; } img.sticky-close { top: -4px; } div.sticky-note { padding: 0; width: 130px; margin-top: -15px; margin-left: -10px; } .sticky-note > img:nth-child(1) { max-width: 100%!important; } .border-bottom-left, .border-bottom-right { border-bottom: none!important; } .orderFormField { clear: both; margin-top: 15px; } .orderFormContainerRadio li { float: left; margin-right: 5px; } ul.orderFormContainerRadio { display: table; } .orderFormField { input[type='number'], input[type='text'], textarea { width: 100%; } & > label:first-child { font-weight: bold; margin-bottom: 10px; } input[type='radio'] { margin-right: 10px; } .custom-select-label { width: auto!important; } } .orderFormField_description { margin-bottom: 10px; } .orderFormNotes { display: block; margin-bottom: 10px; font-size: 12px; } .qq-uploader{ max-height: 280px!important; } .qq-gallery .qq-upload-list li.qq-upload-success, li.qq-in-progress { margin: 1px auto !important; display: table!important; } #framesPopup { .popUpInner(130px,130px); } #barPopup, #printTypePopup, #wrapPopup { .popUpInner(200px,200px); } .popUpInner(@height:200px, @width:200px) { img { .autoSizeImage(@height,@height); margin: 0 auto; } div { text-align: center; } span { display: inline-block; } } .fancybox-inner .row { margin: 0 !important; } .strikethrough { text-decoration: line-through; color: @red; } #shippingNote { font-size: 12.9px; } #shippingNoteCustom { font-size: 20px; } #shippingNote a, #shippingNoteCustom a { font-style: italic; } .alertify-message { font-size: 18px; margin-bottom: 10px; } #alertify-cancel { font-size: 20px; background-color: @red; } #alertify-ok { font-size: 20px; background-color: @red; } .alertify-button:focus { box-shadow: none; } #cropMessage { font-style: italic; } #colorPicker { height: 50px; width: 50px; border: 1px solid black; display: inline-block; } #colorPickerMessage { display: inline-block; margin-left: 5px; top: -12px; position: relative; } #VisibleImageArea, #leftPreview, #rightPreview { float: left; } #bottomPreview { clear: both; } #bottomPreview, #leftPreview, #rightPreview, #topPreview { border: 1px solid black; overflow: hidden; display: none!important; } .autoSizeImage(@width:100, @height:100) { height: auto; width: auto; max-width: @width; max-height: @height; } @import "nav.less"; @import "responsive.less"; //@import "Custom.less"; @import "elements.less"; /* Mixin */ // @base: @darkBlue; // @lighter1: lighten(spin(@base, 120), 10%); // @lighter2: lighten(spin(@base, 120), 20%); // @darker1: darken(spin(@base, -120), 10%); // @darker2: darken(spin(@base, -120), 20%); // // /* Implementation */ // .test{ // width:100px; // height:100px // } // .one {background-color: @base;} // .two {background-color: @lighter1;} // .three {background-color: @lighter2;} // .four {background-color: @darker1;} // .five {background-color: @darker2;}