@charset "utf-8"; /* CSS Document */ body, html { min-width:auto; } body { font-family:'Roboto', sans-serif; color:#282828; overflow-x:hidden; height:100%; width:100%; } *::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar { background:#F9F7F7; /*transparent;*/ } *::-webkit-scrollbar-thumb { background:#22292C !important; -webkit-border-radius: 3px; border-radius: 3px; } /* *::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar { background:transparent; } *::-webkit-scrollbar-thumb { background:#b2b2b2 !important; -webkit-border-radius:4px; border-radius: 4px; } */ .clr { clear:both; } /* twitter bootstrap remove blue glow on input */ textarea:hover, input[type="text"]:hover, textarea:active, input[type="text"]:active, textarea:focus, input[type="text"]:focus, button:focus, button:active, button:hover, .btn:active, .btn.active { outline:0px !important; -webkit-appearance:none; box-shadow:none !important; -webkit-box-shadow:none !important; border-color:#A9A9A9 !important; } /* ================== */ /* Popup generic styling*/ body.pp-popup { height:auto; width:auto; font-family:'Roboto', Helvetica, Arial, sans-serif; font-size:12px; line-height:120%; } .pp-popup h3 { font-size:18px; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; line-height:120%; color:#282828; } .pp-popup h3 label { text-transform:none; } .pp-popup label, .pp-popup input, .pp-popup textarea, .pp-popup button, .pp-popup select { font-size:12px; } .pp-popup input, .pp-popup textarea, .pp-popup button, .pp-popup select { border-radius:0px; -webkit-border-radius::0px; -moz-border-radius:0px; } .pp-popup input[type="text"], .pp-popup input[type="password"], .pp-popup textarea, .pp-popup select { padding:6px; color:#7a8184; border: 1px solid #cccccc !important; } .pp-popup textarea { resize:none; } .pp-popup select { height:32px; } .pp-popup.pp-new-style { background:#F5F3F4; } .pp-popup.pp-new-style a { color:#0BC2D8 !important; } .pp-popup.pp-new-style a:hover { color:#00AAC1 !important; } .pp-popup.pp-new-style .btn { background: transparent; border: 1px solid #000; border-radius: 3px; text-transform: uppercase; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; letter-spacing: 1px; font-size: 11px; padding: 0px 30px 0px 30px; text-shadow: none; color:#000; line-height:36px; margin-bottom:10px; } .pp-popup.pp-new-style .btn:hover, .pp-popup.pp-new-style .btn:active { background: #0BC2D8 !important; border: 1px solid #0BC2D8 !important; } .pp-popup.pp-new-style .btn-compact { padding: 5px; line-height: 12px; font-size: 10px; box-sizing: border-box; margin: 0; } .pp-popup.pp-new-style .btn-inverse { background:#000; color:#fff; } .pp-popup.pp-new-style .pp-popup-section-header { background:#fff; padding:20px; border-bottom:1px solid #d7d7d7; } .pp-popup.pp-new-style .pp-popup-section-header .pp-popup-section-header-title { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 300; letter-spacing: 1px; font-size: 20px; text-align: left; line-height:120%; } .pp-popup.pp-new-style .pp-popup-section-header .pp-popup-section-header-subtitle { font-family: Roboto,sans-serif; -webkit-font-smoothing: antialiased; text-transform: none; letter-spacing: .5px; font-weight: 300; font-size: 13px; display: block; margin-top: 5px; line-height:120%; } .pp-popup.pp-new-style .pp-popup-section-content { padding:20px; } .pp-popup.pp-new-style .pp-popup-section-content .pp-popup-section-content-text { color: gray; font-family: Roboto,sans-serif; font-weight: 300; text-transform: uppercase; font-size: 11px; } .pp-popup.pp-new-style input[type="text"], .pp-popup.pp-new-style input[type="password"], .pp-popup.pp-new-style textarea, .pp-popup.pp-new-style select { border:1px solid #ffffff !important; box-shadow:none !important; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; border-radius:3px; outline: 0px !important; -webkit-appearance: none !important; } .pp-popup.pp-new-style .input-compact { margin:0 !important; } .pp-popup.pp-new-style .warn_txt { font-family: Roboto,sans-serif; font-size:12px; font-weight:300; color:#c00; } .pp-popup.pp-new-style img { mix-blend-mode:multiply; } /* ================== */ .pp-popup.pp-new-style-v1 { background:#FFFFFF; box-sizing:border-box; font-weight:300; } .pp-popup.pp-new-style-v1 label { font-weight:300; } .pp-popup.pp-new-style-v1 a { color:#0BC2D8 !important; } .pp-popup.pp-new-style-v1 a:hover { color:#00AAC1 !important; } .pp-popup.pp-new-style-v1 .btn { background:#EFEFF0; border: 1px solid #EFEFF0; border-radius: 3px; text-transform: uppercase; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; letter-spacing: 1px; font-size: 12px; padding: 0px 25px 0px 25px; text-shadow: none; color:#000; line-height:100%; height:40px; } .pp-popup.pp-new-style-v1 .btn:hover, .pp-popup.pp-new-style-v1 .btn:active { background: #0BC2D8 !important; border: 1px solid #0BC2D8 !important; } .pp-popup.pp-new-style-v1 .btn-compact { padding: 5px; line-height: 12px; font-size: 10px; box-sizing: border-box; margin: 0; height:24px; } .pp-popup.pp-new-style-v1 .btn-inverse { background:#22292C; border: 1px solid #22292C; color:#fff; } .pp-popup.pp-new-style-v1 .pp-popup-section-header { background:#fff; padding:20px; border-bottom:1px solid #d7d7d7; } .pp-popup.pp-new-style-v1 .pp-popup-section-header .pp-popup-section-header-title { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 300; letter-spacing: 1px; font-size: 20px; text-align: left; line-height:120%; } .pp-popup.pp-new-style-v1 .pp-popup-section-header .pp-popup-section-header-subtitle { font-family: Roboto,sans-serif; -webkit-font-smoothing: antialiased; text-transform: none; letter-spacing: .5px; font-weight: 300; font-size: 13px; display: block; margin-top: 5px; line-height:120%; } .pp-popup.pp-new-style-v1 .warn_txt { font-family: Roboto,sans-serif; font-size:12px; font-weight:300; color:#c00; } .pp-popup.pp-new-style-v1 img { mix-blend-mode:multiply; } .pp-popup.pp-new-style-v1 .pp-popup-section-content { padding: 20px; } .pp-popup.pp-new-style-v1 .pp-popup-section-content.full-screen { padding:0px; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .table-2-col { max-width:600px; font-family: Roboto,sans-serif; font-weight: 200; color: gray; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .table-2-col .col-1 { width:150px; } .pp-popup.pp-new-style-v1 .dimension-placeholder { width: 105px; float: left; padding-right: 12px; } .pp-popup.pp-new-style-v1 input#width, .pp-popup.pp-new-style-v1 input#height, .pp-popup.pp-new-style-v1 input#depth { background-position:center right 6px; background-repeat:no-repeat; background-size:16px; padding-right:24px; } .pp-popup.pp-new-style-v1 input#width { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-bg-width.png); } .pp-popup.pp-new-style-v1 input#height { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-bg-height.png); } .pp-popup.pp-new-style-v1 input#depth { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-bg-depth.png); } .pp-popup.pp-new-style-v1 .pp-popup-section-content .pp-popup-section-content-text { color:#999999; font-family: Roboto,sans-serif; font-weight: 300; text-transform: uppercase; font-size: 11px; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .pp-popup-section-content-subtext { color:#999999; font-family: Roboto,sans-serif; font-weight: 200; text-transform: uppercase; font-size: 9px; text-transform:none; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .pp-popup-section-content-text.ptop { margin-top:13px; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .pp-popup-section-content-text.pbottom { margin-bottom:13px; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .pp-popup-section-content-subtext.ptop { margin-top:8px; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .pp-popup-section-content-input-sub { margin-top:8px; text-align:right; padding-right:8px; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .pp-popup-section-content-input.full { width:340px; } .pp-popup.pp-new-style-v1 .pp-popup-section-content .pp-popup-section-content-input.one-third { width:105px; } .pp-popup.pp-new-style-v1 input[type="text"], .pp-popup.pp-new-style-v1 input[type="password"], .pp-popup.pp-new-style-v1 textarea, .pp-popup.pp-new-style-v1 select { /*border: 1px solid #E9E9E9 !important;*/ border: 1px solid #CCCCCC !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; border-radius: 3px; outline: 0px !important; -webkit-appearance: none !important; margin-bottom:0px; box-sizing: border-box; height:40px; padding-left: 13px; padding-right: 13px; line-height:20px; font-family: Roboto,sans-serif; font-weight: 300; letter-spacing: 0.5px; color: #23292C; font-size: 13px; } .pp-popup.pp-new-style-v1 textarea { height:100px; } .pp-popup.pp-new-style-v1 input[type="text"]:focus, .pp-popup.pp-new-style-v1 input[type="password"]:focus, .pp-popup.pp-new-style-v1 textarea:focus { border:1px solid #0BC2D8 !important; } /* ================== */ .pp-popup.pp-new-style-v1 .btn-popup-floating { font-family: 'Gotham SSm A', 'Gotham SSm B', 'Roboto', sans-serif; text-transform: uppercase; height: 50px; cursor: pointer; border:none; border-top: 1px solid #d7d7d7; background-color: #FFFFFF; color: #B2B2B2; font-size: 12px; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; position:fixed; bottom:0; width:50%; } .pp-popup.pp-new-style-v1 .btn-popup-floating:hover { background-color: #0BC2D8; color: #ffffff; } .pp-popup.pp-new-style-v1 .btn-left { left:0; border-right:1px solid #d7d7d7; } .pp-popup.pp-new-style-v1 .btn-right { right:0; } .pp-popup.pp-new-style-v1 .btn-full { left:0; right:0; width:100%; } /* ================== */ /* Radiobutton/Checkbox generic styling */ .input-wrapper { display: flex; float: left; margin-right: 20px; align-items: center; min-width: 20px; line-height:15px; } .input-wrapper label.input-thebox input { visibility: hidden; margin: 0; float: left; display: inline-block; } .input-wrapper > label.input-thebox > input:checked + .input-checked { background: #0BC2D8; width: 7px; height: 7px; position: absolute; margin-top: 3px; margin-left: 3px; } .input-wrapper label.input-thebox { display: block; float: left; margin-right: 5px; width: 13px; height: 13px; /*border: 1px solid #e9e9e9;*/ border: 1px solid #cccccc; cursor: pointer; margin-bottom:0px; background:#fff; } .input-wrapper label.input-thebox:hover { border: 1px solid #cccccc; } .input-wrapper label.input-label { margin-bottom:0px; } .pp-popup.pp-new-style .input-wrapper label.input-thebox { border:1px solid #ffffff !important; } /* ================== */ /* Select2 styling */ .select2-dropdown-open .select2-choice { -webkit-box-shadow:0px 0px !important; box-shadow:0px 0px !important; } .select2-container .select2-choice .select2-arrow, .select2-container .select2-choice, .select2-dropdown-open .select2-choice { background-image:none !important; filter:none !important; background:#FFFFFF !important; } .select2-dropdown-open .select2-choice { -webkit-box-shadow:0px 0px !important; box-shadow:0px 0px !important; } .select2-container .select2-choice .select2-arrow, .select2-container .select2-choice, .select2-dropdown-open .select2-choice { line-height: 33px; height: 33px; } .select2-container .select2-choice .select2-arrow, .select2-container .select2-choice, .select2-dropdown-open .select2-choice, .select2-drop-active { border-radius: 0px; } .select2-drop-active { border: none; } .select2-container .select2-choice .select2-arrow { top: 0px; border-left: none; } .select2-results .select2-highlighted { background: #0BC2D8; } .select2-results .select2-result-label { padding: 4px 7px; } .select2-choice { border: 1px solid #cccccc !important; } .pp-popup.pp-new-style .select2-choice, .pp-popup.pp-new-style-v1 .select2-choice { border: 1px solid #ffffff !important; border-radius:3px; box-sizing: border-box; } .select2-chosen { color: #7a8184; } .select2-arrow { margin-right: 10px; } .select2-container .select2-choice .select2-arrow b { display: block; width: 100%; height: 100%; background: transparent !important } .arrow-down:before, .arrow-down:after, .select2-arrow b:before, .select2-arrow b:after { content: ""; background: #0BC2D8; position: absolute; top: 25%; left: 50%; height: 30%; width: 1px; } .arrow-down:before, .select2-arrow b:before { transform-origin: right bottom; transform: rotate(-45deg); -webkit-transform-origin: right bottom; -webkit-transform: rotate(-45deg); } .arrow-down:after, .select2-arrow b:after { transform-origin: left bottom; transform: rotate(45deg); -webkit-transform-origin: left bottom; -webkit-transform: rotate(45deg); } .no-search .select2-search { display:none } /* ===================== */ .pp-popup.pp-new-style-v1 .select2-container .select2-choice .select2-arrow, .pp-popup.pp-new-style-v1 .select2-container .select2-choice, .pp-popup.pp-new-style-v1 .select2-dropdown-open .select2-choice { line-height: 40px; height: 40px; background:#F9F7F7 !important; } .pp-popup.pp-new-style-v1 .select2-container .select2-choice, .pp-popup.pp-new-style-v1 .select2-dropdown-open .select2-choice { border: 1px solid #E9E9E9 !important; border-radius:3px; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; } .pp-popup.pp-new-style-v1 .select2-drop.select2-drop-active { background:#F9F7F7 !important; font-size: 13px; font-weight: 300; letter-spacing: 0.5px; color:#999999; } .pp-popup.pp-new-style-v1 .select2-results .select2-highlighted { background: #F9F7F7; color: #0BC2D8; } .pp-popup.pp-new-style-v1 .arrow-down:before, .pp-popup.pp-new-style-v1 .arrow-down:after, .pp-popup.pp-new-style-v1 .select2-arrow b:before, .pp-popup.pp-new-style-v1 .select2-arrow b:after { top: 33%; left: 65%; height: 25%; } .pp-popup.pp-new-style-v1 form { margin:0px; } .pp-popup.pp-new-style-v1 .select2-container .select2-choice>.select2-chosen { font-size: 13px; color: #23292C; letter-spacing: 0.5px; font-weight: 300; } .pp-popup.pp-new-style-v1 .select2-drop { -moz-box-shadow: 0 2px 3px rgba(0,0,0,.15); -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.15); box-shadow: 0 2px 3px rgba(0,0,0,.15); } .pp-popup.pp-new-style-v1 .select2-drop.select2-drop-above { -moz-box-shadow: 0 -2px 3px rgba(0,0,0,.15); -webkit-box-shadow: 0 -2px 3px rgba(0,0,0,.15); box-shadow: 0 -2px 3px rgba(0,0,0,.15); } .pp-popup.pp-new-style-v1 .select2-drop.select2-drop-above.select2-drop-active { border-top:none; } /* ===================== */ /* Checkbox slider styling */ .styleSlideChoice { border-radius: 11px; border: 1px solid #e0e0e0; overflow: hidden; box-shadow: inset 0 0 5px rgba(0,0,0,.1); position: relative; height: 18px; width:54px; background:#fff; } input.switch { font-size: 10px; position: relative; display: inline-block; appearance: none; width: 100%; height: 2.0em; border-radius: 1em; margin: 0; padding: 0; outline: transparent solid 1px!important; cursor: pointer; border: none; opacity: 0; background: 0 0; user-select: none; transition: box-shadow .3s ease-in-out,padding .25s ease-in-out; transition-delay: .1s,0s; } input.switch, input.switch:checked { box-shadow: inset 0 0 0 1.1428571429em #fff!important; } input.switch:checked { transition-delay: 0s,0s; padding-left: 2.5em; } .form-title span.line-2, input.switch { line-height: 2em; } input#switch-1:checked+.view-cb { transform: translateX(200%); } input#switch-1+.view-cb { left: 2px; } input.switch:checked+.view-cb { transform: translateX(150%); } .newOnproductpage .styleSlideChoice .view-cb { left: 1px; } .styleSlideChoice .view-cb { position: absolute; height: 15px; width: 15px; top: 1px; left: 1px; left: 5px; pointer-events: none; border: 1px solid #cecece; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,.2); -moz-transition: transform 225ms ease; -o-transition: transform 225ms ease; -webkit-transition: transform 225ms ease; transition: transform 225ms ease; font-family: "Gotham SSm A","Gotham SSm B",Gotham,Montserrat,sans-serif; } .styleSlideChoice .view-cb::before { content: "in"; position: absolute; top: -1px; font-size: 10px; color: #282828; margin-left: -22px; font-weight:300; } .styleSlideChoice .view-cb::after { content: "cm"; position: absolute; top: -1px; font-size: 10px; color: #282828; margin-left: 22px; font-weight:300; } /* ===================== */ /* Hamburger menu */ .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { height: 2px; border-radius: 0px; width: 35px; } .hamburger-box { width: 35px; } .hamburger-inner:before { top:-8px; } .hamburger-inner:after { bottom: -8px; } /* ===================== */ #pp-mainheader-container { height:50px; background:#23292C; font-size:11px; position: relative; } #pp-mainheader-container #pp-mainheader-home { text-align:center; background:#798183; width:50px; height:50px; /*float:left;*/ cursor:pointer; position:absolute; left:0px; } #pp-mainheader-container #pp-mainheader-home:hover { background:#555555; } #pp-mainheader-container #pp-mainheader-home a { display:block; height:50px; } #pp-mainheader-container #pp-mainheader-home img { border:none; margin-top:14px; height:22px; } #pp-mainheader-container #pp-mainheader-tools-dropdown { width:200px; height:50px; /*float:left;*/ cursor:pointer; position:absolute; left:50px; } #pp-mainheader-container #pp-mainheader-tools-dropdown:hover { background:#555555; } #pp-mainheader-container #pp-mainheader-tools-dropdown .pp-dropdown-tools-logo-selected { margin-left:30px; margin-top:16px; } #pp-mainheader-container #pp-mainheader-tools-dropdown .pp-dropdown-toggle { margin-left:8px; margin-top:16px; } #pp-mainheader-container #pp-mainheader-tools-dropdown .pp-dropdown-tools-logo { height:18px; } #pp-mainheader-container #pp-mainheader-tools-dropdown #pp-mainheader-tools-dropdown-list { width:200px; position:absolute; top:50px; left:0px; z-index:10; background:#23292C; display:none; } #pp-mainheader-container #pp-mainheader-tools-dropdown #pp-mainheader-tools-dropdown-list .pp-mainheader-dropdown-option { padding-right:40px; padding-top:22px; padding-bottom:22px; text-align:right; } #pp-mainheader-container #pp-mainheader-tools-dropdown #pp-mainheader-tools-dropdown-list .pp-mainheader-dropdown-option:hover { background:#000000; } #pp-mainheader-container #pp-mainheader-tools-dropdown #pp-mainheader-tools-dropdown-list .pp-tools-checkbox { margin-left:8px; } #pp-mainheader-container #pp-mainheader-actions { height:50px; /*float:left;*/ display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; position:absolute; left:250px; width:1500px; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button { cursor:pointer; color:#fff; display:flex; flex-direction:row; align-content:center; justify-content:center; height: 100%; padding: 8px 15px; box-sizing: border-box; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button.overflow { visibility:hidden; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button#pp-mainheader-actions-dashboard.active { background-color: #f9f9f9!important; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button#pp-mainheader-actions-dashboard.active .pp-mainheader-actions-button-text { color:#00CDE0 !important; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button#pp-mainheader-actions-more { display:none; left: 0px; position: absolute; top: 0; width: 120px; height: 50px; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button#pp-mainheader-actions-more.active { display:flex; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button:hover { background:#555555; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button.disable { opacity:0.2; cursor:default; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button.disable:hover { background:transparent; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button img { height:14px; margin-top: auto; margin-bottom: auto; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button#pp-mainheader-actions-more img { height:6px; width:24px; padding-top: 3px; padding-bottom: 4px; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button#pp-mainheader-actions-more .pp-mainheader-actions-button img { height:14px; width:14px; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button .pp-mainheader-actions-button-text { color: #fff; margin-left: 9px; font-size: 11px; font-weight:300; margin-top: auto; margin-bottom: auto; white-space: nowrap; line-height:35px; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button.dropdown { position:relative; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button.dropdown .pp-mainheader-actions-button-dropdown { position:absolute; background: #23292C; display: flex; flex-direction: column; left: 0; top: 50px; width: 100%; z-index: 3; display:none; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button.dropdown .pp-mainheader-actions-button-dropdown a { color: #fff; display: block; line-height: 30px; padding-left: 10px; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button.dropdown .pp-mainheader-actions-button-dropdown a:hover { background:#555555; } #pp-mainheader-container #pp-mainheader-right { position:absolute; right:0; top:0; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; height: 100%; } #pp-mainheader-container #pp-mainheader-right .pp-mainheader-right-button { cursor: pointer; display: flex; flex-direction: row; align-items: center; border-right: 1px solid #2e3437; height: 100%; padding-left: 16px; padding-right: 16px; background-color: #22292c; justify-content: center; } #pp-mainheader-container #pp-mainheader-right .pp-mainheader-right-button:hover { background-color:#555555; } #pp-mainheader-container #pp-mainheader-right .pp-mainheader-right-button div { color: #8a8d8f; margin-right: 10px; } #pp-leftnav-container { border-left:20px solid #798183; width:230px; /*background:#F5F3F4;DEPRECATED v1.3 */ position:absolute; top:50px; left:0px; bottom:0px; z-index:1; } #pp-leftnav-container #pp-leftnav-menu-container { height:100px; display:none; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-left-section { width:230px; box-sizing:border-box; position:relative; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-left-section #pp-leftnav-slide-toggle { left: 50%; position: absolute; margin-left: -32px; top: 26px; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-right-section { position:absolute; top:0px; left:290px; right:0px; min-width:400px; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-right-section #pp-leftnav-menu-right-section-title { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size:30px; float:left; color:#0BC2D8; margin-top:40px; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-right-section #pp-leftnav-menu-right-section-search { float:right; margin-top: 36px; margin-right: 60px; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-right-section #pp-leftnav-menu-right-section-search input { color:#0BC2D8; border:0px; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:11px; padding:5px 10px; padding-left: 35px; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; width:200px; background: url(//cdn.christopherguy.com/projectplan/img/icon-search-blue.png) no-repeat; background-position: 9px; background-size: 14px 14px; background-color:#D6EDF1; outline: 0; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-right-section #pp-leftnav-menu-right-section-search input::placeholder { color: #0BC2D8; opacity: 1; } #pp-leftnav-container #pp-leftnav-type-container { height:40px; background:#ffffff; font-size:12px; padding-left:28px; line-height:40px; position:relative; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; display:none; } #pp-leftnav-container #pp-leftnav-type-container #pp-leftnav-type-left-section { width:202px; box-sizing:border-box; cursor:pointer; } #pp-leftnav-container #pp-leftnav-type-container #pp-leftnav-type-right-section { position:absolute; top:0px; left:290px; } .pp-leftnav-right-section { visibility:hidden; } #pp-leftnav-container .pp-leftnav-right-section-header, #pp-leftnav-container .pp-leftnav-right-section-project { float:left; } #pp-leftnav-container .pp-leftnav-right-section-actions { width:360px; } #pp-leftnav-container .pp-leftnav-right-section-actions .pp-leftnav-right-section-actions-action { float:left; margin-right:20px; cursor:pointer; opacity:0.8; } #pp-leftnav-container .pp-leftnav-right-section-actions .pp-leftnav-right-section-actions-action:hover { opacity:1.0; } #pp-leftnav-container .pp-leftnav-right-section-actions .pp-leftnav-right-section-actions-action img { margin-top:-3px; } #pp-leftnav-container .pp-leftnav-right-section-actions .pp-leftnav-right-section-actions-action.invisible { visibility:hidden; } #pp-leftnav-container .pp-leftnav-right-section-files { width:150px; } #pp-leftnav-container #pp-leftnav-type-container #pp-leftnav-type-dropdown-toggle-icon { float:right; margin-right:20px; margin-top:17px; } #pp-leftnav-container #pp-leftnav-type-container #pp-leftnav-type-list { position:absolute; left:0px; top:40px; z-index:1; width:230px; background:#ffffff; display:none; } #pp-leftnav-container #pp-leftnav-type-container #pp-leftnav-type-list a { color:#282828; } #pp-leftnav-container #pp-leftnav-type-container #pp-leftnav-type-list a:hover { color:#282828; text-decoration:none; } #pp-leftnav-container #pp-leftnav-type-container #pp-leftnav-type-list .pp-leftnav-type-option { height:40px; background:#ffffff; font-size:12px; padding-left:28px; line-height:40px; cursor:pointer; } #pp-leftnav-container #pp-leftnav-type-container #pp-leftnav-type-list .pp-leftnav-type-option:hover { background:#f3f3f3; } #pp-leftnav-list-container { position:absolute; top:140px; left:0px; right:0px; bottom:0px; overflow-y:auto; overflow-x:hidden; display:none; } #pp-leftnav-list-container .pp-leftnav-list-project-row { height:37px; line-height:37px; overflow:hidden; font-size:13px; border-left:5px solid #f5f3f4; position:relative; } #pp-leftnav-list-container .pp-leftnav-list-project-row.selected { border-left:5px solid #0BC2D8; background:#F9F9F9; /*font-weight:bold;*/ } #pp-leftnav-list-container .pp-leftnav-list-project-row.room-selected { /*font-weight:bold;*/ } #pp-leftnav-list-container .pp-leftnav-list-project-row .pp-leftnav-list-project-selected-arrow { width:5px; margin-right:17px; float:left; line-height:37px; padding-top:13px; } #pp-leftnav-list-container .pp-leftnav-list-project-row a { color:#7a8184; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; text-decoration:none; width: 185px; overflow-x: hidden; display: block; box-sizing:border-box; } #pp-leftnav-list-container .pp-leftnav-list-project-row a:hover { color:#282828; } #pp-leftnav-list-container .pp-leftnav-list-project-row.selected a { color:#282828; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-decoration:none; } #pp-leftnav-list-container .pp-leftnav-list-project-row .pp-leftnav-list-project-row-right-section, #pp-leftnav-list-container .pp-leftnav-list-room .pp-leftnav-list-room-row-right-section { position:absolute; top:0px; left:285px; color:#7a8184; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none; font-size:11px; } #pp-leftnav-list-container .pp-leftnav-list-room { height:30px; line-height:30px; border-left:5px solid #0BC2D8; background:#F9F9F9; overflow:hidden; font-size:11px; position:relative; } #pp-leftnav-list-container .pp-leftnav-list-room .pp-leftnav-list-room-selected-arrow { width:5px; margin-right:27px; float:left; line-height:30px; padding-top:8px; } #pp-leftnav-list-container .pp-leftnav-list-room a { color:#7a8184; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; text-decoration:none; width: 175px; overflow-x: hidden; display: block; box-sizing: border-box; } #pp-leftnav-list-container .pp-leftnav-list-room a:hover { color:#282828; } #pp-leftnav-list-container .pp-leftnav-list-room.selected a { color:#282828; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-decoration:none; } #pp-leftnav-list-container .pp-leftnav-list-newroom-container { border-left:5px solid #0BC2D8; background:#F9F9F9; padding-bottom:5px; } #pp-leftnav-list-container .pp-leftnav-list-newroom-container .pp-leftnav-list-newroom-btn { background:#B8BCBD; height:30px; line-height:30px; padding-left:17px; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; color:#fff; font-size:9px; margin-left:23px; margin-right:14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor:pointer; box-sizing: border-box; width: 183px; } #pp-leftnav-list-container .pp-leftnav-list-newroom-container .pp-leftnav-list-newroom-btn:hover { background:#b2b2b2; } #pp-leftnav-list-container .pp-leftnav-list-newroom-container .pp-leftnav-list-newroom-btn img { float:right; margin-top:8px; margin-right:10px; } #pp-leftnav-list-container .pp-leftnav-list-project-selected-padding { padding-top:10px; border-left:5px solid #2EB9CC; background:#F9F9F9; margin-bottom:10px; } #pp-leftnav-list-container #pp-leftnav-list-newproject-container { padding-top:20px; padding-bottom:20px; } #pp-leftnav-list-container #pp-leftnav-list-newproject-container .pp-leftnav-list-newproject-btn { background:#282828; height:40px; line-height:40px; color:#ffffff; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:11px; margin-left:28px; margin-right:14px; padding-left:17px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor:pointer; box-sizing: border-box; width: 183px; } #pp-leftnav-list-container #pp-leftnav-list-newproject-container .pp-leftnav-list-newproject-btn:hover { background:#0BC2D8; } #pp-leftnav-list-container #pp-leftnav-list-newproject-container .pp-leftnav-list-newproject-btn img { float:right; margin-top:12px; margin-right:12px; } #pp-main-container { position:absolute; top:50px; right:0px; left:20px; /* 250px FOR BEFORE V1.3 */ bottom:0px; background:#ffffff; padding-left:60px; padding-right:60px; min-width:610px; z-index:2; } #pp-main-container #pp-main-empty-container { display: table; width: 100%; height: 100%; } #pp-main-container #pp-main-empty-container #pp-main-empty-container-cell { text-align:center; display:table-cell; vertical-align:middle; } #pp-main-container #pp-main-empty-container #pp-main-empty-container-title { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:14px; color:#5BB7C9; margin-top:30px; margin-bottom:12px; } #pp-main-container #pp-main-empty-container #pp-main-empty-container-subtitle { font-family:Roboto, Helvetica, Arial, sans-serif; color:#282828; font-size:13px; line-height:120%; font-weight:300; } #pp-main-container .pp-main-tools-empty-container { display: table; width: 100%; height: 100%; margin-top:10px; } #pp-main-container .pp-main-tools-empty-container .pp-main-tools-empty-container-cell { text-align:center; display:table-cell; vertical-align:middle; } /* #pp-main-container .pp-main-tools-empty-container .pp-main-tools-empty-container-title { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:14px; color:#5BB7C9; margin-top:30px; margin-bottom:12px; } */ #pp-main-container .pp-main-tools-empty-container .pp-main-tools-empty-container-subtitle { font-family:Roboto, Helvetica, Arial, sans-serif; color:#282828; font-size:13px; line-height:120%; font-weight:300; margin-top:30px; } #pp-main-container #pp-main-body { overflow-y:auto; position:absolute; left:0px; right:0px; bottom:0px; top:135px; overflow-x:hidden; } #pp-main-container #pp-main-body #pp-main-body-products { position:relative; } #pp-main-container #pp-main-body #pp-main-body-styleplans, #pp-main-container #pp-main-body #pp-main-body-wallplans { display:none; text-align:center; padding: 40px 60px 20px 60px; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan { position: relative; width: 250px; height: 250px; margin: 0px 20px 40px 0; border-radius: 10px; background-color: #f9f9f9; overflow: hidden; text-align: left; cursor: pointer; color:#000; float:left; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover { padding: 20px 20px 0 20px; position: absolute; z-index: 1; width: 100%; height: 100%; box-sizing:border-box; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover .board_date, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover .board_date { font-size: 11px; line-height:26px; color:#00CDE0; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover .board_name, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover .board_name { color: #22292C; /*#0BC2D8;*/ /*#5380ff;*/ font-size: 12px; line-height:120%; font-family:"Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover .board_buttons, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover .board_buttons { position: absolute; display: none; bottom: 70px; font-size: 10px; margin: 0 -20px; width: 100%; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover .board_buttons>div, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover .board_buttons>div { text-align: center; padding: 8px; opacity: .8; border-radius: 5px; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover .board_buttons .board_button_text, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover .board_buttons .board_button_text { visibility: hidden; padding-bottom: 3px; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover .board_buttons img, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover .board_buttons img { height: 17px; margin-bottom: 7px; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_imagebg, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_imagebg { background: #f9f9f9 center center / contain no-repeat; position: relative; height: 180px; margin-top:70px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; cursor: pointer; overflow: hidden; } #pp-main-container #pp-main-body #pp-main-body-floorplans { display:none; } #pp-main-container #pp-main-header { padding-top:34px; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-left-section { float:left; } #pp-main-container #pp-main-header #pp-main-header-upper-section .pp-submain-name { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size:12px; color:#7a8184; /*#798183;*/ line-height:16px; text-transform:uppercase; letter-spacing: 2px; } #pp-main-container #pp-main-header #pp-main-header-upper-section .pp-main-name { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size:26px; color:#7a8184; /*#23292C;*/ line-height:32px; position:relative; cursor:pointer; text-transform:uppercase; letter-spacing: 3px; } #pp-main-container #pp-main-header #pp-main-header-upper-section .pp-title-footnote { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size:12px; color:#7a8184; /*#23292C;*/ line-height:120%; margin-top:3px; position:relative; text-transform:uppercase; letter-spacing: 3px; } #pp-main-container #pp-main-header #pp-main-header-upper-section .pp-main-project-selector { background:#fff; width:270px; position:absolute; z-index:5; margin-top:5px; display:none; box-shadow: 0px 1px 5px 0px #ccc; -moz-box-shadow: 0px 1px 5px 0px #ccc; -webkit-box-shadow: 0px 1px 5px 0px #ccc; } #pp-main-container #pp-main-header #pp-main-header-upper-section .pp-main-project-selector .pp-main-project-selector-item { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size:12px; color:#7a8184; /*#282828;*/ /*#798183;*/ line-height:20px; padding-left:12px; padding-right:12px; padding-top:8px; padding-bottom:8px; letter-spacing:2px; word-wrap:break-word; } #pp-main-container #pp-main-header #pp-main-header-upper-section .pp-main-project-selector .pp-main-project-selector-item:hover { /* background:#0BC2D8; color:#ffffff; */ background:#EAF5F7; color:#00C9DD; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section { float:right; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-btn { position:relative; float:left; margin-top:5px; text-align:center; color:#ffffff; width:50px; display:none; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-btn:hover { color:#798183; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-btn img { cursor:pointer; opacity:0.8; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-btn img:hover { opacity:1.0; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-btn .pp-main-project-action-btn-text { font-size:9px; font-weight: 200; letter-spacing: 1px; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-btn .pp-main-project-action-btn-dropdown { display:none; position:absolute; z-index:5; background:#f9f9f9; margin-top:-15px; text-align:left; width:58px; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-btn #pp-settings-pop-up { width:200px; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-btn .pp-main-project-action-btn-dropdown a { display: block; color: #282828; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom:5px; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:11px; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-sortby-btn { position:relative; background:#f9f9f9; /*#0BC2D8;*/ color:#22292C; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:11px; line-height:30px; width:205px; box-sizing:border-box; padding-left:14px; padding-right:12px; cursor:pointer; float:left; margin-left:30px; text-transform:uppercase; } /* #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-sortby-btn:hover { background:#00AAC1; } */ #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-sortby-btn img { float:right; margin-top:10px; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-sortby-btn .pp-main-project-action-sortby-list { position:absolute; top:30px; width:205px; box-sizing:border-box; left:0px; display:none; z-index:5; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-sortby-btn .pp-main-project-action-sortby-list .pp-main-project-action-sortby-option { background:#f9f9f9; /*#0BC2D8;*/ color:#80878B; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:11px; line-height:30px; padding-left:14px; padding-right:12px; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-sortby-btn .pp-main-project-action-sortby-list .pp-main-project-action-sortby-option:hover { /*background:#00AAC1;*/ background: #EAF5F7; color: #00C9DD; } /* ========================== */ #pp-main-container #pp-main-header #pp-main-header-lower-section { clear:both; height:53px; position:relative; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-padding { padding-top:14px; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-content { height: 39px; position: relative; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-content .pp-main-header-blue-line { height: 4px; background: #EAF3F4; position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 1; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-content .pp-main-header-section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-content .pp-main-header-section .pp-main-header-section-action-btn { color:#7a8184; /*#798183;*/ font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size:13px; float:left; line-height:35px; /*border-bottom:4px solid #EAF3F4;*/ margin-right:42px; cursor:pointer; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-content .pp-main-header-section .pp-main-header-section-action-btn.selected { color:#282828; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size:13px; border-bottom:4px solid #0BC2D8; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-right-section { display:flex; flex-direction:row; position:absolute; right:0; bottom:15px; z-index:2; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-right-section .pp-main-header-product-display-btn { filter: brightness(0%); opacity:0.2; height: 20px; width: 20px; background-position: center center; background-size:contain; background-repeat: no-repeat; cursor:pointer; margin-left:10px; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-right-section .pp-main-header-product-display-btn.active { opacity:1; filter:brightness(100%); } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-right-section .pp-main-header-product-display-list { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-product-display-list.png); } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-right-section .pp-main-header-product-display-grid { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-product-display-grid.png); } /* ========================== */ #pp-main-body #pp-main-body-floorplans { text-align:center; padding:40px 60px 20px 60px; } #pp-main-body #pp-main-body-floorplans a img { width:100%; max-width:800px; } /* ========================== */ #pp-main-body #pp-main-body-header-spacer { padding-top:40px; } #pp-main-body #pp-main-body-header-container { background:#f9f9f9; margin-left:60px; margin-right:60px; /*margin-top:40px;*/ padding:40px; page-break-inside:avoid; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-upper { clear:both; display:table; width:100%; table-layout:fixed; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-upper #pp-main-body-header-upper-vendor { display:table-cell; vertical-align:top; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-upper #pp-main-body-header-upper-logo { display:table-cell; width:180px; text-align:right; padding-left:40px; vertical-align:top; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-upper .pp-main-body-header-vendor-name { color:#282828; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:26px; line-height:30px; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-upper .pp-main-body-header-invoiceno { color:#7a8184; font-family:'Roboto', Helvetica, Arial, sans-serif; font-size:12px; margin-top:8px; margin-bottom:14px; line-height:18px; font-weight:300; } #pp-main-body #pp-main-body-header-container .pp-main-body-header-vendor-body { color:#7a8184; font-family:'Roboto', Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; font-weight:300; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-lower { clear:both; margin-top:60px; display:table; width:100%; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-lower.header-top { margin-top:0px; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-lower #pp-main-body-header-lower-client { display:table-cell; vertical-align:top; text-align:left; width:50%; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-lower #pp-main-body-header-lower-delivery { display:table-cell; vertical-align:top; text-align:left; padding-left:10px; width:50%; } #pp-main-body #pp-main-body-header-container #pp-main-body-header-lower .pp-main-body-header-lower-subtitle { color:#282828; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:18px; line-height:22px; margin-bottom:12px; text-transform:uppercase; } /* ========================== */ /* ========================== */ #pp-main-body #pp-main-body-product-list-container { padding-left:60px; padding-right:60px; font-family:'Roboto', Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container { display:table; width:100%; margin-top:60px; page-break-inside:avoid; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-image { display:table-cell; width:260px; vertical-align:top; text-align:center; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-image img { max-width:260px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content { display:table-cell; vertical-align:top; text-align:left; padding-left:20px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container { display:table; width:100%; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-left { display:table-cell; vertical-align:top; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-left .pp-main-body-product-list-row-content-product-name { color:#282828; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:26px; line-height:30px; margin-bottom:12px; text-transform:uppercase; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-left .pp-main-body-product-list-row-content-product-details .title { color:#282828; font-weight:300; vertical-align:top; font-size:12px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-left .pp-main-body-product-list-row-content-product-details .content { color:#7a8184; padding-left:10px; vertical-align:top; font-weight:300; font-size:12px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right { display:table-cell; vertical-align:top; width:325px; text-align:right; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn { color:#ffffff; text-align:center; width:50px; float:right; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn:hover { color:#B5B5B5 !important; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn .pp-main-body-product-list-action-btn-text { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:8px; letter-spacing:0px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn .pp-main-body-product-list-action-btn-icon { width:20px; height:20px; background-size: cover; background-repeat: no-repeat; background-position:top; margin:auto; cursor:pointer; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn .pp-main-body-product-list-action-btn-icon:hover, #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn .pp-main-body-product-list-action-btn-icon.active { background-position:0px 100%; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn #pp-main-body-product-list-action-btn-edit { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-edit-all-20170714.png); } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn #pp-main-body-product-list-action-btn-delete { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-delete-all-20170714.png); } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn #pp-main-body-product-list-action-btn-note { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-note-all-20170714.png); } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn #pp-main-body-product-list-action-btn-share { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-share-all.png); } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn #pp-main-body-product-list-action-btn-download { background-image: url(//cdn.christopherguy.com/projectplan/img/icon-download-all.png); } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-note-container { clear:both; padding-top:5px; display:none; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-note-container.active { display:block; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-note-container textarea { height:90px; width:300px; resize: none; font-family:'Roboto', Helvetica, Arial, sans-serif; font-size:12px; color:#7a8184; padding:10px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; font-weight:300; letter-spacing:0.5px; overflow-x:hidden; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-note-container input[type="button"] { display:none; background:#282828; color:#ffffff; border:0px; float:right; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:13px; padding:6px 8px; letter-spacing:1px; width:322px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-bottom { display:table-row; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-bottom .add_cart { background: #282828; color: #fff; padding: 0px 40px; border: none; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size: 11px; letter-spacing: 1px; border-radius: 3px; line-height:40px; height:40px; margin-top:10px; outline:none; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-bottom .add_cart:hover { background:#0BC2D8; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-bottom .add_cart.disabled { cursor:wait; background:#B8BCBD; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-bottom .add_cart.disabled:hover { background:#B8BCBD; } #pp-main-container #pp-main-body-product-list-empty-container { display: table; width: 100%; height: 100%; } #pp-main-container #pp-main-body-product-list-empty-container #pp-main-body-product-list-empty-container-cell { text-align:center; display:table-cell; vertical-align:middle; padding-top:50px; } #pp-main-container #pp-main-body-product-list-empty-container #pp-main-body-product-list-empty-container-title { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:14px; color:#5BB7C9; margin-top:30px; margin-bottom:12px; } #pp-main-container #pp-main-body-product-list-empty-container #pp-main-body-product-list-empty-container-subtitle { font-family:Roboto, Helvetica, Arial, sans-serif; color:#282828; font-size:13px; line-height:120%; font-weight:300; } #pp-main-container #pp-main-body-product-list-empty-container #pp-main-body-product-list-empty-container-cta { margin-top: 40px; margin-bottom:40px; } #pp-main-container #pp-main-body-product-list-empty-container .pp-main-body-product-list-empty-container-cta-btn { background: #282828; height: 40px; line-height: 40px; color: #ffffff; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size: 11px; margin-left: auto; margin-right: auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; width: 160px; padding-left: 15px; padding-right: 15px; } #pp-main-container #pp-main-body-product-list-empty-container .pp-main-body-product-list-empty-container-cta-btn:hover { background: #5BB7C9; } /* ========================== */ /* ========================== */ #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-room-header { margin-top:60px; padding-bottom:16px; border-bottom:2px solid #f4f4f4; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-room-header-wrapper { page-break-inside: avoid; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-room-header-icon { height:17px; width:21px; float:left; margin-top:6px; margin-right:12px; background-size:cover; background-repeat: no-repeat; background-position: top; background-image: url(//cdn.christopherguy.com/projectplan/img/icon-folder-open.png); } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-room-header-icon:hover { background-position: 0px 100%; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-room-header a { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:28px; color:#282828; text-transform:uppercase; line-height:110%; word-wrap:break-word; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-room-header a:hover { text-decoration:none; } /* ========================== */ /* ========================== */ #pp-main-body #pp-main-body-price-container { position:relative; padding:40px; /*background: #f9f9f9;*/ margin-left: 60px; margin-right: 60px; margin-top: 60px; margin-bottom:40px; font-family:'Roboto', Helvetica, Arial, sans-serif; color:#666666; /*#7a8184;*/ page-break-inside:avoid; font-size:12px; text-align:left; padding-right: 0px; width: 500px; float: right; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-text { color: #666666; font-weight: 300; font-family: 'Roboto', Helvetica, Arial, sans-serif; /* color:#282828; font-weight:500; */ } #pp-main-body #pp-main-body-price-container a { color:#0BC2D8; font-weight:500; text-decoration:underline; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-container { overflow-x:hidden; margin-bottom:30px; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-title { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size:20px; color:#282828; text-transform:uppercase; margin-bottom:12px; word-wrap:break-word; line-height:130%; border-bottom: 1px solid #ddd; padding-bottom: 10px; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-table { display:table; width:100%; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-table .pp-main-body-price-section-table-row { display:table-row; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-table .pp-main-body-price-section-table-row .pp-main-body-price-section-table-cell-left { display:table-cell; width:63%; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-table .pp-main-body-price-section-table-row .pp-main-body-price-section-table-cell-right { display:table-cell; width:37%; text-align:right; vertical-align:bottom; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-qty { font-family:'Roboto', Helvetica, Arial, sans-serif; margin-top:30px; font-weight:300; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-pricekey { font-family:'Roboto', Helvetica, Arial, sans-serif; font-weight:300; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-separator { border-top:1px solid #ddd; margin-bottom:30px; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-total-container .pp-main-body-price-grand-total { margin-bottom:30px; font-size:20px; color:#282828; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; text-transform:uppercase; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-total-container .pp-main-body-price-grand-total-after-tax { margin-top:30px; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-total-container .pp-main-body-price-grand-total-after-tax .pp-main-body-price-gtat-text { font-size:20px; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; color:#282828; text-transform:uppercase; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-total-container .pp-main-body-price-grand-total-after-tax .pp-main-body-price-gtat-value { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size:20px; color:#282828; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-atc { /* position:absolute; left:40px; top:50%; */ margin-top:30px; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-atc .add_cart_all { background: #282828; color: #fff; padding: 0px 40px; border: none; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; /* font-weight: 500; font-size: 13px; letter-spacing: 1px; */ border-radius: 3px; /* line-height:40px; height:40px; */ outline:none; /*margin-top:-20px;*/ width: 100%; line-height: 1.42857143; height: 50px; font-weight: 600; font-size: 16px; letter-spacing: 1.5px; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-atc .add_cart_all:hover { background:#0BC2D8; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-atc .add_cart_all.disabled { cursor:wait; background:#B8BCBD; } #pp-main-body #pp-main-body-price-container .pp-main-body-price-section-atc .add_cart_all.disabled:hover { background:#B8BCBD; } /* ========================== */ /* Only visible on print=y */ /* ========================== */ #pp-main-body .pp-main-body-print-project-title-container { margin-left: 60px; margin-right:60px; margin-top: 20px; } #pp-main-body .pp-main-body-print-project-subtitle { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:12px; color:#798183; line-height:16px; } #pp-main-body .pp-main-body-print-project-title { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size:28px; color:#23292C; line-height:32px; position:relative; cursor:pointer; } @media print { #pp-main-body .pp-main-body-product-list-row-image-custom { padding-left:30px; padding-right:30px; box-sizing:border-box; } } /* ========================== */ /* tooltip modal */ video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: calc(100% + 30px); /* Adjust as needed */ } .f { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .f-r { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .f-c { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .f-btw { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } .f-around { -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; } .f-ctr { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .f-rht { -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; justify-content: flex-end; } .f-st { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } .f-w { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .mdl { -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; } .btm { -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; align-items: flex-end; } .bsl { -webkit-align-items: baseline; -moz-align-items: baseline; -ms-align-items: baseline; align-items: baseline; } .f-start { -webkit-align-content: flex-start; -moz-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; } @media screen and (max-width: 1600px) { .f-ctr-16xx { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } } @media screen and (max-width: 1400px) { .f-ctr-13xx { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .f-rht-1400 { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } } @media screen and (max-width: 1180px) { .f-r-118x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .f-ctr-118x { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } .mdl-118x { -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; } .f-118x { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 992px) { .f-nw-99x { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .f-st-99x { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } } @media screen and (min-width: 1024px) { .f-nw-102x { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } @media screen and (max-width: 1024px) { .mdl-1024x { -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; } } @media screen and (max-width: 1023px) { .f-r-768x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 992px) { .f-l-rht { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } .mdl-99x { -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; } .f-c-99x, .f-r-99x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .f-rht-99x { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } .f-rht-still-99x { -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; justify-content: flex-end; } .f-ctr-99x { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .f-ctr-992x { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } } @media screen and (max-width: 768px) { .f-ctr-63x { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } .f-center-76x { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .f-btw-768x { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } .f-w-76x { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .f-ctr-76x { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .f-c-76x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .f-76x { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .f-r-76x { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .mdl-76x { -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; } .mdl-center-76x { -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; } } @media screen and (max-width: 767px) { .f-c-767 { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 681px) { .f-full-6x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .f-ctr-6x { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .f-btw-6x { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } } @media screen and (max-width: 600px) { .f-r-6x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .f-c-6x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 568px) { .f-r-568x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 380px) { .col-f-btw-38x { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } .f-r-380x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 1023px) { .f-c-102x { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 1024px) { .f-ctr-102x { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; border-radius: 5px 5px 0px 0px; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } /* Test Working for best performance on ipad */ .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before { display: table; content: ""; } .slick-track:after { display: table; content: ""; clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slider */ /* Icons */ @font-face { font-family: "slick"; font-weight: normal; font-style: normal; src: url("../../assets/css/fonts/slick.eot"); src: url("../../assets/css/fonts/slick.eot?#iefix") format("embedded-opentype"), url("../../assets/css/fonts/slick.woff") format("woff"), url("../../assets/css/fonts/slick.ttf") format("truetype"), url("../../assets/css/fonts/slick.svg#slick") format("svg"); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus { color: transparent; outline: none; background: transparent; } .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before { opacity: 1; /* add new for ipad */ will-change: opacity; } .slick-next:hover:before, .slick-next:focus:before { opacity: 1; will-change: opacity; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; opacity: 0.75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; will-change: inherit; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: "ÔåÉ"; } [dir='rtl'] .slick-prev:before { content: "ÔåÆ"; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: "ÔåÆ"; } [dir='rtl'] .slick-next:before { content: "ÔåÉ"; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 0.35; } .slick-dots li button:before { font-family: "slick"; font-size: 20px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: "•"; text-align: center; opacity: 0.10; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; will-change: opacity; } .slick-dots li.slick-active button:before { opacity: 0.75; color: black; } .tooltips-modal { position: fixed; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 999; width: 100%; top: 0; bottom: 0; left: 0; right: 0; transform: translateY(0%); -moz-transition: opacity 0.325s ease; -o-transition: opacity 0.325s ease; -webkit-transition: opacity 0.325s ease; transition: opacity 0.325s ease; } .tooltips-modal.-off { opacity: 0; pointer-events: none; } .tooltips-modal.-off .half-whole { transform: translateY(-5%); opacity: 0; } .tooltips-modal .close-overlay { position: fixed; width: 100%; height: 100%; } .tooltips-modal .dim { max-width: 810px; /*1036px;*/ width: 100%; margin-bottom: 20px; margin-top:-50px; } @media screen and (max-width: 1366px) { .tooltips-modal .dim { max-width: 810px; /*910px;*/ } } .tooltips-modal .dim input[type="checkbox"] { display: block; -moz-appearance: checkbox; -webkit-appearance: checkbox; appearance: checkbox; position: absolute; height: 12px; width: 12px; opacity: 0; margin:0px; } .tooltips-modal .dim input[type="checkbox"]:checked ~ .check { background-color: #7a8184; border-color: transparent; } .tooltips-modal .dim input[type="checkbox"]:checked ~ .check::before { content: "\2713"; margin-top: -4px; margin-left: 2px; /*"";*/ } .tooltips-modal .dim .check { display: block; height: 12px; width: 12px; border-radius: 3px; background-color: white; border: solid 1px #B2B2B2; margin:0px; } .tooltips-modal .dim .check::before { content: ""; font-family: "javavalley"; color: white; font-size: 12px; display: block; margin-left: 1px; margin-top: 1px; } .tooltips-modal .dim p.checkbox-label { font-weight: 100; margin:0px; margin-left: 8px; font-size: 12px; color: #fff; } .tooltips-modal .box-rel { width: 550px; height: 100%; overflow: hidden; position: relative; } .tooltips-modal .half-whole { position: absolute; transform: translateX(0); -moz-transition: opacity 0.4s ease, transform 0.475s ease; -o-transition: opacity 0.4s ease, transform 0.475s ease; -webkit-transition: opacity 0.4s ease, transform 0.475s ease; transition: opacity 0.4s ease, transform 0.475s ease; left: 0; top: 15vh; } .tooltips-modal .half-whole.-off { transform: translateX(100%); } .tooltips-modal .half-whole.-off:first-child { transform: translateX(-100%); } @media screen and (max-width: 1366px) { .tooltips-modal .half-whole { top: 3vh; } } @media screen and (max-width: 1024px) { .tooltips-modal .half-whole { top: 1vh; } } @media screen and (max-width: 768px) { .tooltips-modal .half-whole { top: 10vh; } } @media screen and (max-width: 500px) { .tooltips-modal .half-whole { position: fixed; top: 4vh; } .tooltips-modal .half-whole .main-container { width: 100vw; min-height: 540px; } .tooltips-modal .half-whole .main-container .img-preview img { max-height: 180px; } .tooltips-modal .half-whole .main-container .img-preview-parent { width: 120px; } .tooltips-modal .half-whole .main-container .img-preview-parent .img-preview { height: 120px; width: 120px; } .tooltips-modal .half-whole .main-container .img-preview-parent .img-preview img.thumbnail { min-width: 120px; min-height: 120px; max-width: 120px; } .tooltips-modal .half-whole .btn-bottom button { width: 100% !important; } } @media screen and (max-width: 350px) { .tooltips-modal .half-whole { top: 0; } .tooltips-modal .half-whole .main-container { min-height: 477px; padding-bottom: 20px; } .tooltips-modal .half-whole .main-container .img-preview img { max-height: 140px; } .tooltips-modal .half-whole .main-container .img-preview-parent { width: 90px; margin-top: 15px; } .tooltips-modal .half-whole .main-container .img-preview-parent .img-preview { height: 90px; width: 90px; } .tooltips-modal .half-whole .main-container .img-preview-parent .img-preview img.thumbnail { min-width: 90px; min-height: 90px; max-width: 90px; } .tooltips-modal .half-whole .main-container .m-30 { margin-top: 10px !important; } } .tooltips-modal .btn-bottom button.btn-fusion { width: 550px; padding: 20px; background-color: white; border: none; border-radius: 0px 0px 8px 8px; border-top: solid 1px #d7d7d7; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-size: 1em; color: #B2B2B2; letter-spacing: 1px; cursor: pointer; } .tooltips-modal .btn-bottom button.btn-fusion:focus { outline: none; } .tooltips-modal .btn-bottom button.btn-fusion:hover { color: #282828; } .tooltips-modal .btn-bottom button.btn-split { width: 100%; border: none; padding: 20px; background-color: white; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; border-top: solid 1px #d7d7d7; font-size: 1em; cursor: pointer; letter-spacing: 1px; color: #B2B2B2; border-radius: 0px 0px 8px 0px; } .tooltips-modal .btn-bottom button.btn-split:hover { background-color: #5BB7C9; color: black; border-color: transparent; } .tooltips-modal .btn-bottom .col.col-half:first-child button.btn-split { border-radius: 0px 0px 0px 8px; border-right: solid 1px #d7d7d7; } .tooltips-modal .btn-bottom .col.col-half:first-child button.btn-split:hover { border-color: transparent; } .tooltips-modal .close-overlay { position: fixed; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; } .tooltips-modal .tooltips-container { max-width: 850px; /*1070px;*/ width: 100%; } @media screen and (max-width: 1366px) { .tooltips-modal .tooltips-container { max-width: 850px; /*950px;*/ } } .tooltips-modal .tooltips-container .prev-button-slick, .tooltips-modal .tooltips-container .next-button-slick { height: 60px; width: 50%; position: absolute; border: none; cursor: pointer; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 500; background-color: white; border-top: solid 1px #d7d7d7; color: #B2B2B2; border-right: none; } .tooltips-modal .tooltips-container .prev-button-slick:focus, .tooltips-modal .tooltips-container .next-button-slick:focus { outline: none; } .tooltips-modal .tooltips-container .prev-button-slick:hover, .tooltips-modal .tooltips-container .next-button-slick:hover, .fabric-modal .tooltips-container .prev-button-slick:hover { background-color: #0BC2D8; color: #000; } .tooltips-modal .tooltips-container .prev-button-slick { border-radius: 0px 0px 0px 5px; bottom: -60px; border-right: solid 1px #d7d7d7; } .tooltips-modal .tooltips-container .next-button-slick { border-radius: 0px 0px 5px 0px; right: 0; } .tooltips-modal .tooltips-container .next-button-slick.single { width: 100%; border-radius: 0px 0px 5px 5px; } .tooltips-modal .tooltips-container .slick-dotted.slick-slider { margin: 0; } .tooltips-modal .tooltips-container .slick-dots { position: absolute; top: 92%; /*pointer-events: none;*/ height: 30px; } .tooltips-modal .tooltips-container .tooltips-child.tooltips-video-container { position:relative; } .tooltips-modal .tooltips-container .tooltips-child.tooltips-video-container video { position:absolute; left:0; right:0; bottom:0; width:100%; } .tooltips-modal .tooltips-container .tooltips-child { background-color: white; padding: 20px 35px 40px 25px; /*border-radius: 5px 5px 0px 0px;*/ background-size: cover; background-repeat: no-repeat; background-position: left; } @media screen and (min-width: 1600px) { .tooltips-modal .tooltips-container .tooltips-child { min-height: 420px; /*548px;*/ } } @media screen and (max-width: 1600px) { .tooltips-modal .tooltips-container .tooltips-child { min-height: 420px; /*548px;*/ } } @media screen and (max-width: 1366px) { .tooltips-modal .tooltips-container .tooltips-child { min-height: 420px; } } @media screen and (max-width: 450px) { .tooltips-modal .tooltips-container .tooltips-child { background-image: none !important; min-height: 420px; /*548px;*/ } } .tooltips-modal .tooltips-container .tooltips-child.off { display: none; } .tooltips-modal .tooltips-container .tooltips-child .mainContent { padding: 0px 0px; margin-top:40px; } @media screen and (max-width: 1366px) { .tooltips-modal .tooltips-container .tooltips-child .mainContent { padding: 0px 0px; } } .tooltips-modal .tooltips-container .tooltips-child .mainContent .col { margin:auto; width:50%; } .tooltips-modal .tooltips-container .tooltips-child i { color: #B2B2B2; font-size: 2em; margin-top: 4px; margin-right: 5px; } .tooltips-modal .tooltips-container .tooltips-child h5 { font-size: 1.2em; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; color: #B2B2B2; text-transform: uppercase; font-weight:300; } .tooltips-modal .tooltips-container .tooltips-child .content-section { margin: 0 auto; width: 100%; max-width: 320px; margin-top: 30px; margin-left:70px; } .tooltips-modal .tooltips-container .tooltips-child .content-section h3 { font-size: 2.3em; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; text-align: inherit; font-weight: 300; margin-bottom: 25px; } .tooltips-modal .tooltips-container .tooltips-child .content-section p { width: 320px; font-size: 17px; line-height: 1.6em; font-weight:300; letter-spacing:.5px; -webkit-font-smoothing:antialiased; } .tooltips-modal .tooltips-container .tooltips-child .content-section p b { font-weight: 500; } .tooltips-modal .tooltips-container .tooltips-child .content-section p span { text-transform: none; font-size: 0.95em; letter-spacing: 0; } .tooltips-modal .tooltips-container .buttonBottom { border-radius: 0px 0px 5px 5px; background-color: white; border-top: solid 1px #d7d7d7; overflow: hidden; z-index: 2; } .tooltips-modal .tooltips-container .buttonBottom button { border: none; font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; height: 60px; font-size: 18px; font-weight: 500; color: #b2b2b2; background-color: transparent; letter-spacing: 1px; cursor: pointer; } .tooltips-modal .tooltips-container .buttonBottom button:focus { outline: none; } .tooltips-modal .tooltips-container .buttonBottom button:hover { background-color: #5BB7C9; color: black; } .tooltips-modal .tooltips-container .buttonBottom .singleButton button { width: 100%; } .tooltips-modal .tooltips-container .buttonBottom .multipleButton button { width: 50%; } .tooltips-modal .tooltips-container .buttonBottom .multipleButton button:first-child { border-right: solid 1px #d7d7d7; } /* ========================== */ /* THIS IS TO SUPPORT RESPONSIVE LAYOUT FOR ACTION BUTTONS WIHTIN THE PROJECT HEADER. DEPRECATED SINCE V1.3 @media all and (max-width: 1560px) { #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-left-section { float:none; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section { float:none; margin-top:5px; margin-left:-17px; } #pp-main-container #pp-main-header #pp-main-header-upper-section #pp-main-header-upper-right-section .pp-main-project-action-sortby-btn { float:right; margin-left:0px; } #pp-main-container #pp-main-body { top:170px; } #pp-main-container #pp-main-header #pp-main-header-lower-section { height:39px; } #pp-main-container #pp-main-header #pp-main-header-lower-section .pp-main-header-lower-section-padding { padding-top:0px; } } */ @media all and (max-width: 1400px) { #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container { display:block; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-left { display:block; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right { display:block; text-align:left; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-row-action-container { margin-top:20px; margin-left:-12px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-btn { float:left; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-note-container { padding-left:12px; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-right .pp-main-body-product-list-action-note-container input[type="button"] { float:left; } #pp-main-body #pp-main-body-product-list-container .pp-main-body-product-list-row-container .pp-main-body-product-list-row-content .pp-main-body-product-list-row-content-container .pp-main-body-product-list-row-content-bottom { display:block; clear:both; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-right-section #pp-leftnav-menu-right-section-title { font-size:26px; margin-top:42px; } } @media all and (max-width: 1024px) { #pp-main-container { padding-left:40px; padding-right:40px; } #pp-main-body #pp-main-body-header-container { margin-left:40px; margin-right:40px; } #pp-main-body #pp-main-body-product-list-container { padding-left:40px; padding-right:40px; } #pp-main-body #pp-main-body-price-container { margin-left:40px; margin-right:40px; } #pp-main-body #pp-main-body-floorplans { padding:40px 40px 20px 40px; } #pp-main-container #pp-main-body #pp-main-body-styleplans, #pp-main-container #pp-main-body #pp-main-body-wallplans { padding: 40px 40px 20px 40px; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-right-section #pp-leftnav-menu-right-section-title { font-size:22px; margin-top:42px; } #pp-leftnav-container #pp-leftnav-menu-container #pp-leftnav-menu-right-section #pp-leftnav-menu-right-section-search { margin-top: 36px; margin-right: 20px; } } @media all and (min-width: 1025px) { #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan:hover .board_hover, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan:hover .board_hover { color: #fff!important; background-color: rgba(0,0,0,.5); } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan:hover .board_hover .board_date, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan:hover .board_hover .board_date { color: #fff!important; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan:hover .board_hover .board_name, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan:hover .board_hover .board_name { color: #fff!important; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover:hover .board_buttons, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover:hover .board_buttons { display: flex; justify-content: space-around; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover .board_buttons .board_button:hover, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover .board_buttons .board_button:hover { opacity: 1; } #pp-main-container #pp-main-body #pp-main-body-styleplans .styleplan .board_hover .board_buttons .board_button:hover .board_button_text, #pp-main-container #pp-main-body #pp-main-body-wallplans .wallplan .board_hover .board_buttons .board_button:hover .board_button_text { visibility: visible; } } @media all and (max-width: 1365px) { #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button { flex-direction: column; justify-content: flex-end!important; height:50px; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button img { height: 14px; width: 14px; margin: auto; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button .pp-mainheader-actions-button-text { margin-left:0px; line-height:15px; text-align:center; } } /* Target IEdge browser */ @supports (-ms-ime-align:auto) { #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button:hover { background:initial; } #pp-mainheader-container #pp-mainheader-actions .pp-mainheader-actions-button.dropdown .pp-mainheader-actions-button-dropdown a:hover { background:initial; } }