/* Buid Multi-Aperture Finished Products */ /*html { overflow-y: scroll; height: 100%}*/ /* add to main site when tested */ #BuildMultiFrame {padding:0px 0px 10px 0px; line-height:1.4em; width:100%; font-size:12px; min-height: 760px} #BuildMultiFrame h1,#BuildMultiFrame h2,#BuildMultiFrame h3 {margin-top:0px; padding-top:0px; color:#3C3C3C} #BuildMultiFrame h1 {margin:0 0 5px 5px; float:left; font-size: 24px;} #BuildMultiFrame h2 {font-size: 12px} #BuildMultiFrame h3 {font-size: 11px} #BuildMultiFrame a {outline: none} #BuildMultiFrame .no-text-selection { -webkit-user-select: none; /* disable text selection */ -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; -ms-user-select: none; user-select: none} .navLinkBack {display:none;} #BuildMultiFrame .can-select-text { -webkit-user-select: text; /* disable text selection */ -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; -ms-user-select: text; user-select: text } .qq-upload-list {background-color:#FCFCFC; border-radius:3px; padding:0 5px 5px 5px !important; z-index:2; position:relative} .textCustom { height: 100px; width:400px; font-family:'Nella Sue'; font-size:40px; line-height: 1.1em; text-align:center; margin-top:10px; margin-right:10px; margin-bottom:10px; padding-top:5px; vertical-align:middle; resize:vertical} .design-mode {background-color:hotpink !important} #BuildMultiFrame #mfHeaderBar {height:40px; margin-top:5px; font-size: 14px} #BuildMultiFrame .subHeading {padding:10px 15px; background-color:#fff} #BuildMultiFrame .subHeading h2 { font-weight: bold; font-size: 22px; margin: 6px 0 0 0} #BuildMultiFrame .subHeading h3 { font-weight: bold; font-size: 18px; margin: 6px 0 6px 0} #BuildMultiFrame .subHeading h4 { font-weight: bold; font-size: 16px; margin: 6px 0 6px 0} #BuildMultiFrame .subHeading > span { display: block; margin: 10px 3px 9px 0; line-height: 1.2em; font-size: 16px; font-weight: normal} #BuildMultiFrame #divNavBar { width: 100%; display: inline-block; min-height: 50px; padding: 10px 15px; background-color: #FFF; } #BuildMultiFrame #divNavBar ul { display: inline-flex; padding-top: 5px; list-style-type: none; font-size: 14px; color: #FFF } #BuildMultiFrame #divNavBar li { display: inline; line-height: 18px; margin: 0px; font-size: 14px } #BuildMultiFrame #divNavBar li:first-child { margin-left:-40px; } #BuildMultiFrame #divNavBar ul a { line-height: 18px; padding: 5px 12px 5px 5px; background-image: url('images/Arrow.png'); background-position: right; background-repeat: no-repeat; margin-left: 0px; color: #444; text-align: right; font-size: 16px } #BuildMultiFrame #divNavBar #navLnkConfirm { background-image: none } #BuildMultiFrame #divNavBar a.selected { background-image: url('images/ArrowSelected.png'); color: #0762D9 } #BuildMultiFrame #divNavBar a.disabled { background-image: url('images/ArrowDisabled.png'); text-decoration: none; color: #999 } #BuildMultiFrame .navLinkNext {min-width:100px; float:right; margin:0 10px 5px 0} #BuildMultiFrame .btnDisabled, .navLinkNext.btnDisabled { opacity: .3} #BuildMultiFrame .navLinkBack {float:left; margin:0 10px 5px 0} #bottomnNavButtons {width:100%; height:60px; display:inline-block; padding:10px 60px 10px 50px; } #bottomnNavButtons #navLinkNext4 {float:right; margin: 0; width: 120px; } #bottomnNavButtons #navLinkBack4 {float:left; margin: 0; } #uxCustomiseLayout1, #uxCustomiseLayout2 { display: none; } #BuildMultiFrame a:hover img{visibility:hidden} #previewWall {background-color:#f5f7f6; padding-left:25px; padding-right:25px} #previewWall #uxMainImage {padding:0; margin-top:40px; margin-bottom:40px; -webkit-box-shadow: 2px 2px 12px #111; -moz-box-shadow: 2px 2px 12px #111; box-shadow: 2px 2px 12px #111} #PreviewZoom #PreviewDownloadLink {margin-right:33%} /* Preview box */ #BuildMultiFrame #mfPreview { width: 320px; min-height: 624px; float: right; margin: 0 15px 0 0; background-color: #f5f7f6; border: 1px solid #E6E6E6; z-index: 1010;display:none; } #BuildMultiFrame #mfPreview h2 { width: 70px; float: left; margin: 7px 0 0 10px; font-size: 18px; font-weight: normal} #BuildMultiFrame #mfPreview .mfPreview-top a { color: #333} #BuildMultiFrame #mfPreview .lnk-wall-colour { height: 20px; float: right; margin: 7px 7px 0 0; padding-left: 25px; background-image: url('images/paint.svg'); background-position: left top; background-repeat: no-repeat} #BuildMultiFrame #mfPreview .lnk-preview-zoom { height: 20px; float: right; margin: 7px 23px 0 0; padding-left: 25px; background-image: url('images/zoom.svg'); background-position: left top; background-repeat: no-repeat} #BuildMultiFrame #mfPreview #displayPreview { width: 100px; position: absolute; top: 180px; left: -70px; z-index: 820; font-size: 16px; border: none; border-top-left-radius: 6px; border-top-right-radius: 6px; outline: none; background-color:#407272; color: white; cursor: pointer; padding: 10px; -webkit-box-shadow: -1px -1px 2px #bbb; box-shadow: -2px -2px 2px #bbb; -webkit-animation: fadein .2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein .2s; /* Firefox < 16 */ -o-animation: fadein .2s; /* Opera < 12.1 */ animation: fadein .2s; transition: .2s} #BuildMultiFrame #mfPreview #displayPreview:hover { -webkit-animation: fadein .2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein .2s; /* Firefox < 16 */ -o-animation: fadein .2s; /* Opera < 12.1 */ animation: fadein .2s; transition: .2s; background-color: #8fbbbc} #BuildMultiFrame #mfPreview .mfPreview-top { width: 318px; height: 32px; background-color: rgba(235, 235, 235, 0.5); /*margin: 0-15px 0 -15px*/} #BuildMultiFrame #mfPreview .background-close-msg { color: #777; font-style: italic; margin-left:15px;} #BuildMultiFrame #mfPreview #mfPreview-middle { width: 100%; height: 300px; margin:0 8px;} #BuildMultiFrame #mfPreview #mfPreview-middle table { width: 300px; height: 300px; } #BuildMultiFrame #mfPreview #mfPreview-middle table td { width: 300px; height: 300px; vertical-align: middle; text-align: center} #BuildMultiFrame #mfPreview #mfPreview-middle #imgPreview { -moz-box-shadow: 3px 3px 7px #202020; -webkit-box-shadow: 3px 3px 7px #202020; box-shadow: 3px 3px 7px #202020 } #BuildMultiFrame #mfPreview #mfPreview-bottom { width: 100%; height: 20px; margin:0 10px;} #BuildMultiFrame #mfPreview #mfPreview-bottom #imgPrevLoading { float: left; position: relative; z-index: 2; top: -157px; left: 152px } #BuildMultiFrame #mfPreview #mfPreview-bottom #imgPrevLoading.hide-me { display: none } #BuildMultiFrame #mfPreview #uxCustomiseLayoutDiv { margin-left: 92px; position: relative; top: -5px; margin-bottom: 15px; } #BuildMultiFrame #mfPreview #mfPreviewNavBtns {float:right; margin:0 20px 15px 25px;} #BuildMultiFrame #mfPreview #navLinkNext3 { display: none } .rotate { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg) } #BuildMultiFrame #fpSummary {width:300px; overflow:hidden; padding:8px 2px 8px 12px; margin:5px 0 16px 9px; background-color:#FEFEFE; border:1px solid #DDDDDD} #BuildMultiFrame #fpSummary h2 {margin-bottom:9px; font-size:18px !important; font-weight:bold} #BuildMultiFrame #fpSummary #sumTop {width:100%; min-height:317px;} #BuildMultiFrame #fpSummary #sumTop h2 {margin-left:0px; width:100%} #BuildMultiFrame #fpSummary #sumTop > div { float: left; line-height: 1.2em; margin-bottom: 8px; color: #333333 } #BuildMultiFrame #fpSummary #sumTop .label { width: 90px; float: left; margin-right: 4px; padding: 0; line-height: 1.15em; color: black; text-align: left; font-size: 14px; font-weight: normal; white-space: normal } #BuildMultiFrame #fpSummary #sumTop .value { width: 185px; float: left; font-weight: bold; padding: 0; line-height: 1.15em; color: black; font-size: 14px; font-weight: bold; white-space: normal; /*font-family:Kalam;*/ } #BuildMultiFrame #fpSummary #sumTop .not-chosen { color: #d41d21; font-size: 14px; font-weight: bold } #BuildMultiFrame #fpSummary #sumBottom {width:100%; height:28px; float:left} #BuildMultiFrame #fpSummary #sumBottom .start-over { float: left; margin: 15px 0 0 10px; font-size: 11px; font-weight: bold } #BuildMultiFrame #fpSummary #sumBottom #closePreview { margin-left: 55px } /*.sticky { position: fixed; top: 10px;*/ /*right:50px;*/ /*margin: 0;*/ /*width:calc(33.33% - 25px);*/ /*}*/ .abs { position: absolute; bottom: 30px; /*right:10px;*/ /*width:calc(33.33% - 10px);*/} #BuildMultiFrame #WallColourDialog { width: 320px; position: fixed; display:none; padding:3px; background-color: #407272} #BuildMultiFrame #WallColourDialog h2 {display:inline; margin-left:8px; line-height:24px; font-size:14px; font-weight:normal; color:#FFF} #BuildMultiFrame #WallColourDialog .wc-close {width:20px; height:20px; font-size:20px; margin-right:8px; float:right; color:#fff} #BuildMultiFrame #WallColourDialog .wc-top { width: 100%; background-color: #407272} #BuildMultiFrame #WallColourDialog .wc-bottom {width:100%; display:inline-block; background-color: #FFF} #BuildMultiFrame #WallColourDialog .wc-bottom .subtle {width:298px; display:inline-block; margin:10px 0 0 8px} #BuildMultiFrame #WallColourDialog .wc-bottom .vivid { width: 298px; display: inline-block; margin: 10px 0 10px 8px} #BuildMultiFrame #WallColourDialog .wc-thumb {width:31px; height:27px; float:left; margin:3px; border:1px solid #D2D2D2} #BuildMultiFrame #WallColourDialog .wc-thumb.wc-highlight {border:1px solid #577aae} /* Stages bar */ #BuildMultiFrame #fpStagesBar { float: left; margin-left: 8px; padding-top: 10px } #BuildMultiFrame #fpStagesBar a:hover { width: 17px; margin: 1px 0 0 0 } #BuildMultiFrame #fpStagesBar .message { float: right; overflow: visible; color: #d41d21; font-size: 18px; line-height: 1em; font-weight: bold } /* Z-index of #mask must lower than #boxes .window */ #mask {position:absolute; z-index:9000; background-color:#000; display:none; left:0; top:0} #maskLocked {width:100%; height:100vh; position:fixed; left:0; top:0; z-index:1031; background-color:#000; display:none; opacity:0.5;} #BuildMultiFrame .window {position:absolute; display:none; z-index:9999; padding:20px; -moz-box-shadow:0 0 10px 5px #999; -webkit-box-shadow: 0 0 10px #999} #BuildMultiFrame #PreviewZoom {display:none; border:1px solid Silver; position:absolute} #BuildMultiFrame #LoadingSplash {width:300px; height:100px; display:none; background-color:#FFF; border:solid 4px #29a511; border-radius:10px} #BuildMultiFrame #LoadingSplash p {width:100%; text-align:center; font-size:18px; line-height:1.3em;margin-top:14px} #BuildMultiFrame .loading-text {padding-left:10px; color:Maroon} #BuildMultiFrame .div-loading { width: 100%; height: 50px} #BuildMultiFrame .div-loading p { font-size: 26px; text-align: center; margin-top: 30px} #BuildMultiFrame .div-loading img { width: 16px; height: 16px} #BuildMultiFrame #fpChooseProductCat {width:100%; height:100%} /*#BuildMultiFrame #fpChooseProductCat #imgTest {min-width:300px; min-height:300px; float:left}*/ /*#BuildMultiFrame #fpChooseProductCat #productsCatPanel ul {width:135px; float:left; margin-right:10px; padding:10px 0; background-color:#FFF;} #BuildMultiFrame #fpChooseProductCat #productsCatPanel li {width:120px; height:27px; line-height:14px; float:left; margin:1px 5px 2px 5px; list-style-type:none; background-color:#f1f1f1; font-size:14px; text-align:left; border:0px solid #FFF} #BuildMultiFrame #fpChooseProductCat #productsCatPanel li a {width:120px; display:inline-block; line-height:16px; padding:5px 10px; color:#333; text-decoration:none} #BuildMultiFrame #fpChooseProductCat #productsCatPanel li a:hover {color:#FFF; background-color:#577aae} #BuildMultiFrame #fpChooseProductCat #productsCatPanel li .categorySelected {border:none; background-color:#a3d796; Color:#156121} #BuildMultiFrame #fpChooseProductCat #productsCatPanel li a:hover.categorySelected {background-color:#a3d796;Color:#156121}*/ #BuildMultiFrame #fpChooseProductCat .t a {width:18px; height:18px; float:right; padding:0px; margin-right:2px; background-image:url('images/info.svg'); background-repeat:no-repeat; position:relative; top:-14px} #BuildMultiFrame #fpChooseProductCat .t a:hover {margin-right:1px; margin-top:1px} #BuildMultiFrame #fpChooseProductCat #productsCatPanel #frameSlidePanel {display:table} #BuildMultiFrame #fpChooseProductCat .frameSlide {width:132px; float:left; margin:0px 3px 20px 0px; padding:3px; background-color:#fff; outline:1px solid #ddd; } #BuildMultiFrame #fpChooseProductCat .frameSlide:hover { background-color: #577aae; outline: 1px solid #577aae; } #BuildMultiFrame #fpChooseProductCat .frameSlide .t {width:126px; border:3px solid #fff; background-color:#fff} #BuildMultiFrame #fpChooseProductCat .frameSlide .b {width:126px; height: 44px; padding:1px 0 0 3px; background-color:#FFF} #BuildMultiFrame #fpChooseProductCat .frameSlide .b p {line-height:1.1em;font-size:12px;} #BuildMultiFrame #fpChooseProductCat .frameSlide .b p .ovf-code {display:block} #BuildMultiFrame #fpChooseProductCat .frameSlide.frameSelected { background-color: #a3d796; outline: 1px solid #a3d796; } #BuildMultiFrame #fpChooseProductCat .frameSlide.frameSelected .name {color:#156121} #BuildMultiFrame #fpChooseProductCat .frame-filter { margin: 4px 0 6px 0; font-size: 16px; } #BuildMultiFrame #fpChooseProductCat .frame-filter input { border: 0; color: #407272; font-weight: bold; } #BuildMultiFrame #fpChooseProductCat #sliderFrameWidth, #BuildMultiFrame #fpChooseProductCat #sliderFrameDepth { max-width: 300px; margin: 0 15px 20px 0; } #BuildMultiFrame #fpChooseProductCat .ui-slider-handle { width: 3em; height: 1.6em; top: 50%; margin-top: -.8em; text-align: center; line-height: 1.6em; } #BuildMultiFrame #fpChooseProductCat #frameFilterButtons {display:inline-block; width:100%;} #BuildMultiFrame #fpChooseProductCat #frameFilterButtons button {width:50%; max-width:170px; float: left; font-size: 16px; background-color: #fafafa; border: 1px solid #666; padding: 7px 15px; } #BuildMultiFrame #fpChooseProductCat #frameFilterButtons #btnFrameColour { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #BuildMultiFrame #fpChooseProductCat #frameFilterButtons #btnFrameRange { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: none; } #BuildMultiFrame #fpChooseProductCat #frameFilterButtons .frameFilterSelected { background-color: #407272; color:#fff;} #BuildMultiFrame #fpChooseProductCat #btnOpenFrameFilter {min-width:130px; font-size:18px;} #BuildMultiFrame #fpChooseProductCat #btnOpenFrameFilter img { width:18px; height:21px; margin:0 11px 3px 0; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters { width: 100%; max-width:390px; height: 100vh; display: none; position: fixed; top: 0; left: 0; z-index: 1033; padding:24px 18px; overflow-y:auto; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters h3 { margin:0; padding:0 0 12px 0; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #btnCloseFrameFilter { width:40px; height:40px; float:right; margin:12px 12px 0 0; padding:2px; font-size:34px; border:1px solid #aaa; border-radius:4px; background-color:#fdfdfd; color:#777;} #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter { display: inline-block; width: 100%; margin: 15px 0 180px 0; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button { width: 100%; height: 30px; border: none; border-radius: 0; font-size:14px; margin:0 0 2px 0; text-align:left; padding:0 15px 0 15px; background-color:#f1f1f1; line-height:21px; color:#2e2e2e;} #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button.btnFrameColour { padding: 0 15px 0 15px; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button .frame-colour {width:20px; height:20px; float:left; margin:0 15px 0 0} #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button:hover { color: #FFF !important; background-color: #577aae !important } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter .frameFilterQty {float:right; text-align:right;} #BuildMultiFrame #fpChooseProductCat #divFrameMouldings {float:left; min-height:176px; width:100%;} #BuildMultiFrame #fpChooseProductCat #divFrameMouldings #NoFramesMsg {margin:45px 15px 15px 15px; font-weight:bold; font-size:18px; text-align:center;} #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button.categorySelected { border: none; background-color: #a3d796 !important; color: #156121 !important } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button:hover.categorySelected { background-color: #a3d796 !important; color: #156121 !important } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter .clearance { color: #d41d21 !important } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button.filter-no-frames { background-color: #fafafa; color:#787878; } #BuildMultiFrame #fpChooseProductCat #frameOutOfRangeWarning {display:none; text-align:center; font-weight:bold; font-size:16px;} .mount-price { font-size: 11px } #uxInfoPopup #detailProductImgTopPopup { width: 100%} #uxInfoPopup img {width:100%; border:1px solid #CCCCCD} #uxInfoPopup h2 {margin:0} #uxInfoPopup h3 {margin-top:0px; font-size:16px; font-weight:bold; margin-top:20px} /* WINDOW Mount Options */ #BuildMultiFrame #mfChooseMounts {width:100%; height:100%; display:none} #BuildMultiFrame #mfChooseMounts .mount-instructions {margin:10px 0px 8px 5px; display:block; line-height:1.2em; font-size:12px} #BuildMultiFrame #mfChooseMounts #mountPanel {margin-top:20px} #BuildMultiFrame #mfChooseMounts .mount-qty-panel {border:0; margin-left:0px} #BuildMultiFrame #mfChooseMounts .mount-qty-panel ul {width:112px; float:left; margin:0 15px; padding:10px 0; background-color:#FFF;} #BuildMultiFrame #mfChooseMounts .mount-qty-panel li {width:100px; height:22px; line-height:12px; float:left; list-style-type:none; margin:3px 5px 2px 5px; border:0px solid White; font-size:12px; text-align:left; background-color:#f1f1f1} #BuildMultiFrame #mfChooseMounts .mount-qty-panel li a {width:100px;line-height:12px; padding:5px; display:inline-block; color:#3C3C3C; text-decoration:none} #BuildMultiFrame #mfChooseMounts .mount-qty-panel li a:hover {background-color:#577aae;color:#FFFFFF} #BuildMultiFrame #mfChooseMounts .mount-qty-panel li a.mount-qty-selected {border:none; background-color:#a3d796; color:#156121} #BuildMultiFrame #mfChooseMounts .mount-config-panel h2 {font-size:16px; text-align:center; font-weight: bold; margin-top: 10px; width:114px} #BuildMultiFrame #mfChooseMounts .mount-config-panel h3 { font-weight: normal} #BuildMultiFrame #mfChooseMounts .mount-config-panel .top-mount-panel {width:140px; height:200px; float:left; border-top:0px solid Silver; margin:5px 0 0 40px} #BuildMultiFrame #mfChooseMounts .mount-config-panel .middle-mount-panel {width:140px; height:200px; float:left; border-top:0px solid Silver; margin-top:5px} #BuildMultiFrame #mfChooseMounts .mount-config-panel .bottom-mount-panel {width:140px; height:200px; float:left; border-top:0px solid Silver; margin-top:5px} #BuildMultiFrame #mfChooseMounts .subHeading {display:inline-block} #BuildMultiFrame #mfChooseMounts #windowMountHdrImg {margin:20px 0 16px 0} #BuildMultiFrame #mfChooseMounts #windowMountHdrImg img {display: block; margin:0 auto} #BuildMultiFrame #mfChooseMounts .mount-btn { width: 114px; min-height: 157px; padding: 6px; margin: 0 12px 10px 0; border: 1px solid #DDD; background-color:#F3F3F3} #BuildMultiFrame #mfChooseMounts .mount-btn img {width:100px; height:100px} #BuildMultiFrame #mfChooseMounts .mount-btn p {text-align:center; font-size:14px; line-height:1.3em; margin:7px 0 2px 0} #BuildMultiFrame #mfChooseMounts .mount-btn-hover {background-color:#577aae} #BuildMultiFrame #mfChooseMounts .mount-btn-hover p {color: #FFF} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel {height:600px; border:0px solid Silver; margin-top:0px; padding:15px; padding-top:0px} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel img {border:3px solid #f1f1f1} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel img:hover {border:3px solid #577aae} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel #KeylineInstructionsDiv {width:100%; padding:15px; margin-bottom:20px; background-color:#fff; font-size:14px} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel .keyline { width: 123px; height: 125px; float: left; padding: 5px 7px 7px 7px; margin: 0 5px 8px 0; background-color: #f1f1f1; -webkit-box-shadow:1px 1px 4px #E4E4E4; box-shadow:1px 1px 4px #E4E4E4} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel .keyline h3 {text-align:center; line-height:1.2em; margin-top:0px; font-size:11px} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel .keyline.keySelected {background-color:#a3d796} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel .keyline.keySelected img {border:3px solid #a3d796} #BuildMultiFrame #mfChooseMounts .mount-config-panel .no-mount-panel .keyline.keySelected h3 {color:#156121} #BuildMultiFrame #mfChooseMounts .subHeading p {margin:9px 0 6px 5px; font-size:16px} #BuildMultiFrame #PickMountDialog {width:590px; height:380px; border:3px solid White} #BuildMultiFrame #PickMountDialog.window {padding:3px; background-color:#8FA1B1} #BuildMultiFrame #PickMountDialog .close {width:16px; height:16px; float:right; margin:0px; padding:0px; background-image:url('images/close.png'); background-repeat:no-repeat} #BuildMultiFrame #PickMountDialog .pmd-top {width:590px; height:20px; background-color:#8FA1B1} #BuildMultiFrame #PickMountDialog .mount-thmb-disable {opacity:1} .clearer { height: 0; line-height: 1px; margin: 0; padding: 0; clear: both; display: block; font-size: 1px} #PickMountDialog h3{margin:2px 0 6px 0; font-size:20px} .mount-thmb { width: 78px; /*height: 76px;*/ padding: 3px; margin: 0 12px 12px 0; border: 1px solid #ECECEC; background-color: #F3F3F3; -webkit-box-shadow:1px 1px 4px #E4E4E4; box-shadow:1px 1px 4px #E4E4E4} .mount-thmb img {width:70px; height:70px} .mount-thmb:hover {background-color:#577aae} .mount-thmb:hover p {color: #FFF} .win-mount-name {font-size:11px; line-height:12px; text-align:center; min-height:24px; margin:2px 1px 0 1px} #PickMountDialog .pmd-name {font-size:18px; margin:8px 0 6px 0} #mount-card-choice-title {margin:7px 0 3px 0} /* Layouts and Sizes */ #BuildMultiFrame .categoryMenu { background-color:white; margin-top: 10px} #BuildMultiFrame #mfChooseLayout {width:100%; height:100%; display:none} #BuildMultiFrame #mfChooseLayout #sizePanel { width:100%; border: 0; display:inline-block; padding:0 10px 0 8px; margin-bottom:20px} #BuildMultiFrame #mfChooseLayout #sizePanel .orientation-hdr {height:25px} #BuildMultiFrame #mfChooseLayout #sizePanel .orientation-hdr.hdr-portrait {height:35px; padding-top:10px} #BuildMultiFrame #mfChooseLayout #sizePanel .orientation-hdr h3 {font-size:14px} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize {height:50px; border:none; background-color:white; text-align:center; color:#3C3C3C; padding-top:0px; margin-bottom:10px; width:48% !important; margin-right:1.7%} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize:hover {background-color:#577aae;color:#FFFFFF} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize.sizeSelected {background-color:#a3d796 !important; color:#156121} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize .name {width:80%; font-size:16px; padding:15px 0 0 0; margin:0; height:50px; display:block; line-height:14px} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize .name span:before {content:"\a"; white-space: pre} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize a.add-layout {width:18px; height:18px; position:absolute; right:4px; top:4px; background-image:url('images/add.svg')} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize .div-ratio {float:left; width:20%; transform:translate(-12px, 3px); opacity:0.8} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize .div-ratio p {border:1px solid #999;display:inline-block; border-radius:2px; padding:0px 3px; text-align:left} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize:hover .div-ratio p {border:1px solid #fff} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize .frameSize-inner {float:right; width:79.99%; transform:translate(-5px,0px)} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize .name.inch {position:absolute; z-index:1} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize .name.cm { position:absolute; z-index:2; display:block} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions {width:100%; height:99px; display:inline-block; margin:18px 0 0 0; padding:8px 0 0 8px; background-color:#FFF} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions label {display:inline; margin:0 8px 0 3px; font-size:14px; font-weight:normal; line-height:25px} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions label:last-child {margin-right:0 !important} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions h2 {font-size:16px; font-weight:bold; margin:7px 0 0 7px} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions h3 {font-size:14px; font-weight:bold; margin:12px 0 4px 0} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions #divMeasurement {float:left; display:inline-block; width:34.5%; padding-left:10px} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions #divAspectRatio {float:left; display:inline-block; width:65.45%;margin-bottom:8px} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize.tooBig, #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize.tooSmall { opacity: 0.45 !important} #BuildMultiFrame #mfChooseLayout #frameSizeWarningMsg {display:none; font-size:16px; font-weight:bold; text-align:center} #chkAdditional {zoom:1.5} #lblchkAdditional {font-size:14px; transform:translate(0,-5px); color:#3C3C3C} #BuildMultiFrame #mfChooseLayout .noSizeSeleced {margin-left:10px; color:Silver} #BuildMultiFrame #mfChooseLayout #layoutPanel {margin-top:5px; min-height:300px} #BuildMultiFrame #mfChooseLayout #layoutPanel .layoutSlide {float:left; margin:3px 7px 7px 5px; padding:6px; border:none; background-color:#f1f1f1; width:150px; position:relative} #BuildMultiFrame #mfChooseLayout #layoutPanel .layoutSlide:hover {color:#ffffff; background-color:#577aae} #BuildMultiFrame #mfChooseLayout #layoutPanel .layoutSlide a.regenerate-thumbnail {background-image:url('images/refresh.svg'); right:2px; bottom:2px; width:16px; height:16px; position:absolute} #BuildMultiFrame #mfChooseLayout #layoutPanel .layoutSlide.layoutSelected {float:left; margin:3px 7px 7px 5px; padding:6px; border:none; color:#156121; background-color:#a3d796} #BuildMultiFrame #mfChooseLayout #layoutPanel .layoutImage {display:block; margin:0 auto} #BuildMultiFrame #mfChooseLayout #layoutPanel .layoutName {width:100%; height:28px; padding-top:2px; text-align:center; line-height:1.1em} /* Product Options */ #BuildMultiFrame #mfChooseOptions {width:100%; height:100%; display:none} #BuildMultiFrame #mfChooseOptions h2 {margin:10px 0px 8px 0px; line-height:1.2em; font-size:14px; font-weight:bold} #BuildMultiFrame #mfChooseOptions h3 {padding-top:10px; font-weight:bold} #BuildMultiFrame #mfChooseOptions h3.opt2, #BuildMultiFrame #mfChooseOptions h3.opt3, #BuildMultiFrame #mfChooseOptions h3.opt4 {padding-top: 25px} #BuildMultiFrame #option1Div, #BuildMultiFrame #option2Div, #BuildMultiFrame #option3Div, #BuildMultiFrame #option4Div {float:left; margin-left:5px; color:#3c3c3c} #BuildMultiFrame #mfChooseOptions .option-thmb {border:2px solid #F1F1F1; width:120px; float:left; margin:4px 6px 0px 2px; background-color:#F1F1F1} #BuildMultiFrame #mfChooseOptions .option-thmb img {width:76px; height:76px; margin:2px 2px 0px 2px; float:left; background-color:White} #BuildMultiFrame #mfChooseOptions .option-thmb .option-thmb-text { width:126px; height:76px; margin:2px 2px 0px 0px; float:left} #BuildMultiFrame #mfChooseOptions .option-thmb .option-thmb-title {Width:120px; font-size:10px; font-weight:bold; line-height:1.1em; float:left; margin-top:6px; margin-left:4px} #BuildMultiFrame #mfChooseOptions .option-thmb .option-thmb-description {Width:120px; font-size:10px; line-height:1.1em; float:left; margin-left:4px; margin-top:2px} #BuildMultiFrame #mfChooseOptions .option-thmb.hilighted {border-color: #577AAE} #BuildMultiFrame #mfChooseOptions .option-thmb.selected {border-color: #A3D796; background-color:#A3D796} #BuildMultiFrame #mfChooseOptions .mf-hanging-kit {margin-top:12px; line-height:1.2em; font-size:15px; color:#3c3c3c} #BuildMultiFrame #mfChooseOptions .mf-hanging-kit-choices {margin-left: auto; margin-right: auto; color: #3c3c3c; width: 230px} #BuildMultiFrame #mfChooseOptions .mf-hanging-kit .mf-hanging-kit-thumb { border:2px solid #F1F1F1; width:208px; float:left; margin:4px 2px 0px 2px; text-align:center; line-height:1.4em; vertical-align:middle; background-color:#F1F1F1} #BuildMultiFrame #mfChooseOptions .mf-hanging-kit-thumb.mf-hanging-kit-hilighted {border-color: #577AAE} #BuildMultiFrame #mfChooseOptions .mf-hanging-kit-thumb.mf-hanging-kit-selected {border-color: #A3D796; background-color:#A3D796} #BuildMultiFrame #mfChooseOptions .glazing-choices {color: #3c3c3c; margin-left: auto; margin-right: auto; width: 220px} #BuildMultiFrame #mfChooseOptions .glazing-thmb { border:2px solid #F1F1F1; width:208px; height:108px; margin:4px 2px 0px 2px; background-color:#F1F1F1} #BuildMultiFrame #mfChooseOptions .glazing-thmb img {width:100px; height:100px; margin:2px 2px 0px 2px; float:left; background-color:White} #BuildMultiFrame #mfChooseOptions .glazing-thmb .glazing-thmb-text {height:76px; margin:2px 2px 0px 0px} #BuildMultiFrame #mfChooseOptions .glazing-thmb .glazing-thmb-title {font-size:12px; font-weight:bold; line-height:1.1em; margin-top:6px; margin-left:4px} #BuildMultiFrame #mfChooseOptions .glazing-thmb .glazing-thmb-description {font-size:10px; line-height:1.1em; margin-left:4px; margin-top:2px} #BuildMultiFrame #mfChooseOptions .glazing-hilighted {border-color: #577AAE} #BuildMultiFrame #mfChooseOptions .glazing-selected {border-color: #A3D796; background-color:#A3D796} #BuildMultiFrame #mfChooseOptions .packaging {width:650px; margin-top:12px} #BuildMultiFrame #mfChooseOptions .packaging-choices {width:650px; margin-left:5px; color:#3c3c3c} #BuildMultiFrame #mfChooseOptions .packaging-thmb { border: 2px solid #F1F1F1; width: 100%; height: 108px; margin: 4px 2px 12px 2px; background-color: #F1F1F1; display: block} #BuildMultiFrame #mfChooseOptions .packaging-thmb img {width:100px; height:100px; margin:2px 2px 0px 2px; float:left; background-color:White} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text { Width: 250px; height: 100px; float: left; margin: 2px 2px 0px 0px} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text .packaging-thmb-title { width: 100%; font-size: 14px; font-weight: bold; line-height: 1.1em; margin: 6px 0 0 8px} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text .packaging-thmb-description { width: 100%; font-size: 12px; line-height: 1.2em; margin: 6px 0 0 8px} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text .packaging-thmb-description span { font-weight: bold; font-size: 12px} #BuildMultiFrame #mfChooseOptions .packaging-hilighted {border-color: #577AAE} #BuildMultiFrame #mfChooseOptions .packaging-selected {border-color: #A3D796; background-color:#A3D796} #BuildMultiFrame #mfChooseOptions .packaging > p {font-size:16px} #BuildMultiFrame #mfChooseOptions .glazing > p {font-size:16px} #BuildMultiFrame #mfChoosePaper { display: none; } #BuildMultiFrame #mfChoosePaper .paper-choices {width:98%; margin-left:3px; color:#3c3c3c; } #BuildMultiFrame #mfChoosePaper .paper-thmb { border:2px solid #EBEBEB; width:100%; height:147px; margin:4px 1px 12px 1px; background-color:#EBEBEB; display:block} #BuildMultiFrame #mfChoosePaper .paper-thmb img {width:36%; height:100px; max-width:100px; float:left; margin:2px 2px 0px 2px; border:1px solid #ccc; background-color:White} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text {Width: 61.7%; height: 139px; float:left; margin: 2px 2px 0px 0px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text .paper-thmb-title {width: 100%; font-size: 14px; font-weight: bold; line-height: 1.1em; margin: 6px 0 0 7px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text .paper-thmb-description {width:100%; font-size: 12px; line-height: 1.18em; margin: 6px 0 0 7px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text .paper-thmb-description span { font-weight: bold; font-size: 12px} #BuildMultiFrame #mfChoosePaper .paper-hilighted {border-color: #577AAE} #BuildMultiFrame #mfChoosePaper .paper-selected {border-color: #A3D796; background-color:#A3D796} #BuildMultiFrame #mfChoosePaper .mf-paper-type > p {margin:6px 0 5px 5px; font-size:16px} /* Image Selection */ #BuildMultiFrame #mfChooseImages {width:100%; height:100%; display:none} #BuildMultiFrame #mfChooseImages #imageSelectors {float:left; width:100%} #BuildMultiFrame #mfChooseImages #imageSelectors .image-selector {min-height:112px; margin-top:0px; margin-bottom:9px; background-color:#FFF;} #BuildMultiFrame #mfChooseImages #imageSelectors .is-top {background:#407272; color:#FFF} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom {min-height:84px; width:100%; background-color:#FFF} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-image {float:left; background-color:#FFF} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-image img {width:68px;height:68px;float:left; margin:7px 10px 0 4px; border:1px solid #8FA1B1} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-image .fileName {margin-top:7px; font-size:13px; line-height:1.2em; word-wrap:break-word} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload {width:210px; min-height:69px; float:left; margin-top:2px; margin-bottom:0px; padding-left:10px; padding-top:5px; background-color:#FFF; border-left:1px solid #8FA1B1; border-right:1px solid #8FA1B1} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload .upload-control {float:left; width:272px; height:35px} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload .upload-control a {display:inline-block; margin-top:2px} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload .upload-control .file-uploader {overflow:visible} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload .from-collection {float:left; width:272px} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload .from-collection a {background-image:url('images/btnCollection.png'); background-position:left top; background-repeat:no-repeat; width:160px; height:28px; float:left; margin:1px 0 4px 0} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload .from-collection a:hover {background-position:0 -28px} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload .or-span {width:30px; height:26px; line-height:26px; float:left; text-align:center} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-buttons {height:80px; float:left; touch-action: none} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-buttons a {float:left; clear:both; line-height:1em; touch-action: none} #BuildMultiFrame #mfChooseImages a.btnCrop { Width: 140px; height: 28px; margin-top: 9px; margin-left: 8px; padding: 4px; text-align:center; font-size:13px; line-height: 14px; background-color:#156121; color:#FFF; -webkit-border-radius:4px; border-radius:4px} #BuildMultiFrame #mfChooseImages a.checkCrop { color: #FFF; background-color: #d41d21} #BuildMultiFrame #mfChooseImages #imageSelectors h2 {display:inline-block; margin-left:10px; margin-top:3px; margin-bottom:3px; font-size:14px; font-weight:normal; color:#FFF} #BuildMultiFrame #mfChooseImages #imageSelectors .node-number { color:#FFF; margin:0 0 0 6px; padding:2px 6px 2px 6px; display:inline-block; font-size:16px; font-weight:bold} #BuildMultiFrame #mfChooseImages input {zoom:1.5; font-size:18px} #BuildMultiFrame #mfChooseImages label {font-size:18px; padding:0 15px 0 5px;} #BuildMultiFrame #mfChooseImages #divFrameOnly { font-size: 18px; margin-bottom: 10px; padding:15px; background-color:#f6f6f6; color:#222; } #BuildMultiFrame #mfChooseImages #divFrameOnly p { font-size: 16px; margin:4px 0 9px 0; line-height:20px; } #BuildMultiFrame #uxPrintFrame { color: #407272 } @font-face { font-family: 'Nella Sue'; src: url("/fonts/nellasue-webfont.woff") format('woff')} /* Text Selection */ #BuildMultiFrame #mfChooseText {width:100%; height:100%; display:none} #BuildMultiFrame #mfChooseText #textSelectors {float:left; width:100%} #BuildMultiFrame #mfChooseText #textSelectors .text-selector {min-height:98px; margin-top:0px; margin-bottom:8px; background-color:#FFF;} #BuildMultiFrame #mfChooseText #textSelectors .it-top {background:#407272; color:White} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom {min-height:80px; border:1px solid #407272; width:100%; background-color:white} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom .it-image {float:left; background-color:White} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom .it-image img {width:66px;height:66px;float:left; margin-left:7px; margin-top:6px; margin-right:10px; border:1px solid #8FA1B1} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom .it-image .fileName {margin-top:7px; font-size:12px; line-height:1.2em} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom .it-buttons {height:80px; float:left; touch-action: none} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom .it-buttons a {float:left; clear:both; line-height:1em; touch-action: none} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom label { padding:10px; font-weight:normal; font-size:20px; min-width:130px} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom input[type='text'] { padding:10px; font-weight:normal; font-size:25px; border-radius:4px; margin:2px; width:350px; font-family:'Nella Sue'} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom .fontDrop { padding:5px; font-weight:normal; font-size:15px; border-radius:4px; width:150px; margin-right:10px} #BuildMultiFrame #mfChooseText #textSelectors .it-bottom .fontSizeDrop { padding:5px; font-weight:normal; font-size:15px; border-radius:4px; width:80px; margin-right:10px} #BuildMultiFrame #mfChooseText #textSelectors h2 {display:inline-block; margin-left:10px; margin-top:3px; margin-bottom:0px; font-size:12px; font-weight:normal; color:White} #BuildMultiFrame #mfChooseText #textSelectors .node-number {background-color:White; color:Black; margin:0px; padding-left:3px; padding-right:3px; display:inline-block} #myCollection .collectionList {padding:0px 6px 7px 6px; border: 1px #ddd solid} #myCollection .collectionList h2 {font-size:20px} #myCollection .collectionList .cd-links a {display:block; padding:7px 5px 7px 8px; margin-bottom:5px; background-color:#f1f1f1; color:#3c3c3c} #myCollection .collectionList .cd-links a:hover {background-color:#577aae; color:#fff; text-decoration:none} #myCollection .collectionList .cd-links a.cd-selected:hover {background-color:#577aae !important} #myCollection .collectionList .cd-links .cd-selected {background-color:#a3d796 !important; text-decoration:none} #myCollection .slide-panel { margin:10px} #myCollection .slide-panel .cdImageSlideContainer {height:200px; padding:0px 5px 10px 5px} #myCollection .slide-panel .cdImageSlide {height:190px; border:1px solid #e1e1e1; text-align:center; word-wrap:break-word; overflow:hidden; background-color:#fbfbfb; } #myCollection .slide-panel .cdImageSlide img { margin-top:10px; border:1px solid #f1f1f1} #myCollection .slide-panel .cdImageSlide .imageName {display:block; color:#333; font-size:11px; line-height:13px} #myCollection .slide-panel .cdImageSlide:hover {background-color:#577aae} #myCollection .slide-panel .cdImageSlide:hover > span{color:#fff !important} #BuildMultiFrame #EditImageDialog {width: 500px; border:3px solid #F1F1F1;padding:4px; background-color:#F1F1F1; min-width:314px} #BuildMultiFrame #EditImageDialog h2 {float:left; margin-left:10px; font-size:16px; font-weight:normal; line-height:1.2em; color:#FFF; display:inline} #BuildMultiFrame #EditImageDialog h2 .node-number {background-color:#FFF; color:#222; margin:0 0 0 4px; padding:2px 3px 3px 3px; display:inline-block; line-height:1.1em} #BuildMultiFrame #EditImageDialog .close {width:16px; height:16px; float:right; background-image:url('images/close.png'); background-repeat:no-repeat} #BuildMultiFrame #EditImageDialog .ei-top {height:32px; background-color:#407272; touch-action: none; padding:5px;min-width:300px} #BuildMultiFrame #EditImageDialog .ei-bottom {background-color:#F1F1F1; touch-action: none; min-width:300px} #BuildMultiFrame #EditImageDialog .ei-bottom table.tbl1 {clear:both} #BuildMultiFrame #EditImageDialog .ei-bottom table.tbl2 {width:600px} #BuildMultiFrame #EditImageDialog .ei-bottom .ei-buttonbar { height: 36px; background-color: #F1F1F1; width:100%} #BuildMultiFrame #EditImageDialog .ei-bottom .ei-buttonbar .rotations {width:142px; height:28px; float:right; margin-top:7px; padding:5px 5px 2px 5px; line-height:1.6em} #BuildMultiFrame #EditImageDialog .rotateACW {width:28px; height:28px; float:left; background-image:url('images/rotateleft.png'); background-repeat:no-repeat; background-position:center; background-color:#407272;border-radius:3px} #BuildMultiFrame #EditImageDialog .rotateCW { width: 28px; height: 28px; float: left; background-image: url('images/rotateright.png'); background-repeat: no-repeat; background-position: center; background-color:#407272; border-radius: 3px} #BuildMultiFrame #EditImageDialog a:hover.rotateACW {background-image:url('images/rotateleftHover.png')} #BuildMultiFrame #EditImageDialog a:hover.rotateCW {background-image:url('images/rotaterightHover.png')} #BuildMultiFrame #EditImageDialog .rotateTitle {width:70px; float:left; text-align:center; color:#333; font-size:16px; margin-top:2px} #BuildMultiFrame #EditImageDialog .ei-bottom select {width:105px; height:28px; float:left; margin-left:10px; margin-top:12px} #BuildMultiFrame #EditImageDialog .ei-bottom .okBtn {width:90px; float:right; margin:1px 12px 3px 0} #BuildMultiFrame #EditImageDialog .ei-bottom .cancelBtn {width:80px; float:right; margin:1px 10px 3px 0} #BuildMultiFrame #EditImageDialog .tbl2 img {text-align:center} /* Other Frame options */ #BuildMultiFrame {display:inline-block} #BuildMultiFrame .mfconfirm h2 { font-size: 16px !important} #BuildMultiFrame .mfconfirm p { margin: 11px 9px 9px 5px; line-height: 1.4em; font-size: 16px} #BuildMultiFrame .mfconfirm .clearer {margin-bottom:40px} #BuildMultiFrame .mfconfirm .qty-label {width:120px; height:26px; padding-top:3px; float:left} #BuildMultiFrame .mfconfirm #txtQty {width:40px; height:20px; text-align:center; padding:0px} #BuildMultiFrame .mfconfirm .message { display: block; clear: left; margin: 20px 0px 0px 5px; line-height: 1.2em; font-size: 12px; color: #d41d21} .centredBuilder { margin-left: auto; margin-right: auto; width: 360px} .centredProduct { margin-left: auto; margin-right: auto; width: 310px; padding-left: 20px} .centredKeylines { margin-left: auto; margin-right: auto; width: 270px; padding-left: 10px} .imageSelectorPanel { padding: 0} .textSelectorPanel { padding: 0} select option[disabled] { display: none} .cropBlackAndWhite { -webkit-filter: grayscale(100%); filter: grayscale(100%)} .cropSepia { -webkit-filter: sepia(100%); filter: sepia(100%)} /* Small devices (tablets, 768px and up) SM */ @media(min-width:168px) { #BuildMultiFrame #fpChooseProductCat .frameSlide {margin-right:15px} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom {float:left} } @media(min-width:360px) { .centredBuilder { margin-left: auto; margin-right: auto; width: 360px} #BuildMultiFrame #mfPreview { margin: 0 9px 0 0} } @media(min-width: 460px) { .centredProduct { margin-left: auto; margin-right: auto; width: 450px; padding-left: 20px} #BuildMultiFrame #mfChooseOptions .glazing-choices { margin-left: auto; margin-right: auto; width: 430px} #BuildMultiFrame #mfChooseOptions .mf-hanging-kit-choices { margin-left: auto; margin-right: auto; width: 430px} .centredKeylines { margin-left: auto; margin-right: auto; width: 400px} } @media(min-width:580px) { .centredBuilder { margin-left: auto; margin-right: auto; width: 520px} .centredKeylines { margin-left: auto; margin-right: auto; width: 530px} } @media(min-width:600px) { .centredProduct { margin-left: auto; margin-right: auto; width: 590px; padding-left: 20px} } @media(min-width:700px){ #BuildMultiFrame #mfChooseOptions .glazing-choices { margin-left: auto; margin-right: auto; width: 640px} } /* Small devices (tablets, 768px and up) SM */ @media(min-width:768px) { #BuildMultiFrame #fpContent {width:381px; float:left; min-height:950px;} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom { float: left} #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload { width: 180px} #BuildMultiFrame #mfChooseImages a.btnCrop { Width: 140px} #BuildMultiFrame #mfChooseImages #imageSelectors .image-selector { min-height: 172px} #BuildMultiFrame #mfChooseMounts .mount-config-panel .top-mount-panel { margin: 5px 0 0 0} #BuildMultiFrame #mfChoosePaper .paper-choices { width: 100%} #BuildMultiFrame #mfChoosePaper .paper-thmb { width: 98%; height:127px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text { Width: 247px; height:119px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text .paper-thmb-title {font-size: 12px; margin: 6px 0 0 4px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text .paper-thmb-description { font-size: 11px; margin: 6px 0 0 4px} #BuildMultiFrame #mfChooseOptions .packaging-thmb { width: 300px} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text { Width: 170px} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text .packaging-thmb-title { font-size: 12px; margin: 6px 0 0 4px} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text .packaging-thmb-description { font-size: 11px; margin: 6px 0 0 4px} #BuildMultiFrame #mfChooseOptions .glazing-choices { margin: auto; width: 100%} #BuildMultiFrame #mfChooseOptions .mf-hanging-kit-choices { margin: 0; width: 100%} #BuildMultiFrame #mfPreview { z-index: 810; margin: 0 0 0 0 } #BuildMultiFrame #fpSummary #sumBottom #closePreview { display: none } #BuildMultiFrame #mfPreview #navLinkNext3 { display: block; } #BuildMultiFrame #mfPreview .background-close-msg { display:none; } .centredBuilder { margin-left: 40px; margin-right: auto; width: 680px} .centredProduct { margin-left: auto; margin-right: auto; width: 310px; padding-left: 0} .centredKeylines { margin-left: 0; margin-right: 0; width: 430px; padding-left: 0} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize {height:50px; border:none; background-color:white; text-align:center; color:#3C3C3C; padding-top:0px; margin-bottom:10px; width:48.5% !important; margin-right:1.5%} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize .name { width: 120px} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize:hover {background-color:#577aae;color:#FFFFFF} #BuildMultiFrame #mfChooseLayout #sizePanel { min-height:398px; width:400px; padding:0 8px 0 0} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions label {margin:0 8px 0 4px; font-size:13px} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize {width: 48.3% !important} #bottomnNavButtons { display: none; float: right; } #displayPreview {display:none} #BuildMultiFrame #fpChooseProductCat #divFrameFilters { width: 50%; max-width: 360px; } } /* Medium devices (desktops, 992px and up) MD */ @media(min-width:992px) { #BuildMultiFrame #fpContent { width: 603px; } #BuildMultiFrame #fpChooseProductCat .frameSlide {margin-right:15px;} #BuildMultiFrame #fpChooseProductCat .frameSlide:nth-child(4n) { margin-right: 0 } #BuildMultiFrame #mfChooseImages #imageSelectors .is-bottom .is-upload {width:210px} #BuildMultiFrame #mfChooseImages a.btnCrop { Width: 160px} #BuildMultiFrame #mfChooseImages #imageSelectors .image-selector { min-height: 112px} #BuildMultiFrame #mfChooseLayout #sizePanel {min-height:413px; width:630px} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize {width:31.5% !important} #BuildMultiFrame #mfChooseLayout #sizePanel .frameSize:nth-child(3n){margin-right:1%; margin-left:0} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions label {margin:0 9px 0 5px; font-size:14px} #BuildMultiFrame #mfChooseLayout #layoutPanel { min-height: 600px} #BuildMultiFrame #mfChoosePaper .paper-choices { width: 100%; margin-left: 3px; color: #3c3c3c} #BuildMultiFrame #mfChoosePaper .paper-thmb {width: 286px; display: inline-block; margin: 4px 5px 0 2px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text { Width: 172px; height: 119px} #BuildMultiFrame #mfChooseOptions .packaging-thmb { width: 290px; display: inline-block; margin: 4px 2px 0 2px} .centredBuilder { margin-left: 0; margin-right: 0; width: 650px; padding: 0} .centredProduct { margin-left: auto; margin-right: auto; width: 590px; padding-left: 0} .centredKeylines { margin-left: 0; margin-right: 0; width: 520px; padding: 0} } /* Large devices (large desktops, 1200px and up) LG */ @media(min-width:1200px) { #maskLocked { display: none !important; } #BuildMultiFrame #fpContent { width: 800px; min-height:950px; } #BuildMultiFrame #fpChooseProductCat .frameSlide { margin-right: 5px; } #BuildMultiFrame #fpChooseProductCat #btnOpenFrameFilter { display: none; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters { display: block !important; float:left; min-height:654px; position: relative; width: 215px; height: auto; margin-bottom:20px; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #btnCloseFrameFilter {display:none;} #BuildMultiFrame #fpChooseProductCat #divFrameFilters .frame-filter input {text-align:center;} #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter { margin: 15px 0 0 0; } #BuildMultiFrame #fpChooseProductCat #divFrameMouldings {margin: 0 0 0 20px; padding:10px; width:565px; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button.btnFrameColour { padding: 0 15px 0 5px; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button .frame-colour { width: 15px; margin: 0 5px 0 0 } body { padding-right: 0px !important } html { overflow-y: scroll !important} #BuildMultiFrame #mfChoosePaper .paper-thmb { width: 368px; margin: 14px 14px 5px 7px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text { Width: 247px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text .paper-thmb-title {font-size: 13px; display:block} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text .paper-thmb-description { font-size: 11px; line-height: 1.2em} #BuildMultiFrame #mfChooseOptions .packaging-thmb { width: 308px; margin: 12px 14px 4px 2px} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text { Width: 188px} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text .packaging-thmb-title { font-size: 13px; display: block} #BuildMultiFrame #mfChooseOptions .packaging-thmb .packaging-thmb-text .packaging-thmb-description { font-size: 11px; line-height: 1.2em} .centredBuilder { margin-left: 0; margin-right: 0; width: 810px; padding: 0} .centredKeylines { margin-left: 0; margin-right: 0; width: 640px; padding: 0} .mount-config-panel { display: table} #BuildMultiFrame #mfChooseLayout #layoutPanel { min-height: 700px } #BuildMultiFrame #mfChooseLayout #layoutHdr {width:137px; float:left; min-height:300px} #BuildMultiFrame #mfChooseLayout #sizeCatList {width:132px} #BuildMultiFrame #mfChooseLayout #sizeCatList ul {width:112px; float:left; display:inline-block; margin:0; padding:10px 0; background-color:#FFF;} #BuildMultiFrame #mfChooseLayout #sizeCatList li {width:100px; height:28px; line-height:16px; float:left; list-style-type:none; margin:3px 5px 2px 5px; border:0px solid #FFF; font-size:14px; text-align:left; background-color:#f1f1f1} #BuildMultiFrame #mfChooseLayout #sizeCatList li a {width:100px;line-height:16px; padding:5px; display:inline-block; color:#3C3C3C; text-decoration:none} #BuildMultiFrame #mfChooseLayout #sizeCatList li a:hover {background-color:#577aae;color:#FFF} #BuildMultiFrame #mfChooseLayout #sizeCatList li a.categorySelected {border:none; background-color:#a3d796; color:#156121} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions {width:112px; height:286px; margin:10px 0 20px 0; padding:8px 0 0 8px; overflow:hidden} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions label {} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions label:after {content:"\a"; white-space: pre} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions h2 {margin:4px 0 0 2px} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions #divMeasurement {float:none; width:112px; height:81px; padding-left:0} #BuildMultiFrame #mfChooseLayout #advancedSizeOptions #divAspectRatio {float:none; display:inline-block; width:112px; height:168px} #BuildMultiFrame #mfChooseLayout #sizePanel { float:left; width:661px; min-height: 0; padding:0 0 0 8px} #BuildMultiFrame #mfChooseLayout #sizePanel #sizesCol1 {margin:0 -15px 0 0px} #BuildMultiFrame #mfChooseMounts #windowMountHdrTxt { float: left; width: 50%} #BuildMultiFrame #mfChooseMounts #windowMountHdrImg { float: left; width: 50%; margin:0} #BuildMultiFrame #mfChooseMounts #windowMountHdrImg img { float: right} } @media(min-width:1400px) { #BuildMultiFrame #fpContent { width: 1000px; } #BuildMultiFrame #fpChooseProductCat #divFrameMouldings { width: 728px; padding:12px } #BuildMultiFrame #fpChooseProductCat .frameSlide { margin-right: 11px; } #BuildMultiFrame #fpChooseProductCat .frameSlide:nth-child(4n) { margin-right: 11px; } #BuildMultiFrame #fpChooseProductCat .frameSlide:nth-child(5n) { margin-right: 0 } #BuildMultiFrame #fpChooseProductCat #divFrameFilters { width: 252px; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button.btnFrameColour { padding: 0 15px 0 11px; } #BuildMultiFrame #fpChooseProductCat #divFrameFilters #divFrameFilter button .frame-colour { width: 22px; margin: 0 11px 0 0 } #BuildMultiFrame #mfChooseLayout #layoutPanel { min-height: 800px } #BuildMultiFrame #mfChooseMounts #windowMountHdrTxt {width: 55%} #BuildMultiFrame #mfChooseMounts #windowMountHdrImg {width: 45%} #BuildMultiFrame #mfChoosePaper .paper-choices { width: 100%; margin-left: 3px; color: #3c3c3c} #BuildMultiFrame #mfChoosePaper .paper-thmb { width: 293px; margin: 4px 12px 9px 2px} #BuildMultiFrame #mfChoosePaper .paper-thmb .paper-thmb-text { Width: 178px} }