html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 5px;
}
body {
background-color: #854b13;
overflow: hidden;
}
body, div, td, select, input, textarea {
font-family: 'Muli', 'Helvetica', 'Arial', sans-serif;
font-size: 1em;
}
#border-top, #border-bottom, #border-left, #border-right {
background: #fff;
position: fixed;
z-index: 200;
}
#border-left, #border-right {
top: 0; bottom: 0;
width: 10px;
}
#border-left { left: 0; }
#border-right { right: 0; }
#border-top, #border-bottom {
left: 0; right: 0;
height: 10px;
}
#border-top { top: 0; }
#border-bottom { bottom: 0; }
#container {
border: 0px solid #ff0000;
border: 0px solid #f00;
width: 100%;
height: 100%;
}
h1 img.logo {
width: 118px;
float: left;
margin-top: -1px;
margin-right: 11px;
}
h1 {
text-transform: uppercase;
color: #6866a1;
font-size: 1em;
padding-top: 2px;
padding-bottom: 5px;
background-color: #fff;
margin: 0;
}
#newConfigButton {
position: absolute;
right: 10px;
top: 12px;
font-size: 0.9em;
font-weight: 600;
}
#newConfigButton a:link, #newConfigButton a:visited, #newConfigButton a:hover {
text-decoration: none;
color: #6866a0;
}
#content-home.content, #content-main.content {
width: 100%;
height: 100%;
background: url(/images/bg-1.jpg) repeat-y;
background-size: 100%;
}
#content-home h2 {
position: absolute;
color: #ccc;
text-transform: uppercase;
font-size: 16px;
display: block;
width: 100%;
text-align: center;
top: 50%;
margin-top: -100px;
}
#tooltip-paneldrawer-firstopen {
width: 265px;
height: 45px;
z-index: 115;
position: absolute;
top: 155px;
left: 220px;
background-image: url(/images/bg-tooltip-paneldrawer-firstopen.svg);
background-repeat: no-repeat;
color: #68679f;
font-size: 1em;
font-weight: bold;
padding-top: 13px;
padding-left: 21px;
}
#seriesSelector {
margin: 0;
padding: 40px 0;
list-style: none;
text-align: center;
top: 50%;
position: absolute;
margin-top: -120px;
width: 100%;
}
#seriesSelector li {
display: inline-block;
width: 180px;
height: 180px;
margin: 10px;
}
#seriesSelector a {
background-color: rgba(0,0,0,0.2);
display: block;
width: 180px;
height: 180px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
#seriesSelector a img {
width: 100%;
}
#seriesSelector a:hover {
background-color: rgba(0,0,0,0.3);
}
#seriesSelector label {
display: block;
text-align: center;
text-transform: uppercase;
color: #efefef;
font-size: 15px;
margin-top: 10px;
}
#content-main {
}
#slots {
padding-left: 0;
clear: both;
top: 50%;
margin: 0 auto;
text-align: center;
height: 320px;
position: relative;
}
#orderPreview .slots {
margin-top: 0;
top: 0 !important;
left: 0;
}
#orderPreview .panelItem h3 {
font-size: 15px;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 0;
text-transform: uppercase;
}
#orderPreview .panelItem p {
margin-bottom: 0;
}
#orderPreview select {
width: 190px;
height: 30px;
margin-bottom: 12px;
border: 1px solid #b4b4b4;
color: #000;
font-size: 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background-color: #fff;
}
#orderPreview .required {
color: #d60000;
}
#orderPreview select.error {
border: 1px solid #d60000;
}
.slotContainer {
list-style: none;
width: 115px;
height: 320px;
display: inline-block;
margin-right: 1px;
position: relative;
}
.slotContainer.hasProxy .slotButton {
width: 230px;
}
.slotContainerProxy {
margin-right: 0px;
}
.slotContainerProxy .slotButton {
display: none;
}
.slot {
width: 115px;
height: 295px;
background-color: rgba(0,0,0,0.2);
}
.slotButton {
width: 115px;
height: 295px;
background-color: rgba(0,0,0,0);
position: absolute;
top: 0;
left: 0;
}
.slot-filledByProxy {
background-color: transparent;
}
.slotContainer .editing {
background-color: rgba(0,0,0,0.1);
}
.slotButton:hover {
background-color: rgba(0,0,0,0.1);
}
.slot-filledByProxy:hover {
background-color: transparent;
}
.slotAddButton {
width: 50px;
height: 50px;
top: 50%;
margin-top: -25px;
position: relative;
}
.slot .loading {
width: 32px;
height: 32px;
top: 50%;
margin-top: -16px;
position: relative;
}
.slotLabel {
font-size: 10px;
text-transform: uppercase;
color: #fff;
display: block;
margin-top: 10px;
}
.slotContainer .customComponentContainer {
position: absolute;
left: 0;
width: 115px;
height: 0px;
background-color: transparent;
}
.slotContainer .customComponentContainer-1 {
top: 31px;
}
.slotContainer .customComponentContainer-1.retractor {
top: 48px;
left: 23px;
}
.slotContainer.double .customComponentContainer-1.retractor {
top: 48px;
left: 12px;
}
.slotContainer .customComponentContainer-2 {
top: 106px;
}
.slotContainer .customComponentContainer-2.retractor {
top: 48px;
left: 81px;
}
.slotContainer .customComponentContainer-3 {
top: 181px;
}
.slotContainer .customComponentContainer-3.retractor {
top: 48px;
left: 150px;
}
.slotContainer .customComponentContainer .loading {
margin-top: 20px;
}
#panel .slotLabel {
display: inline-block;
}
#orderPreview .slotLabel {
color: #000;
}
#drawer {
display: none;
z-index: 100;
position: absolute;
background-color: #f0f0f0;
top: 0;
left: 0;
width: 260px;
border-top: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
}
#canvas {
background-color: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
z-index: 90;
position: absolute;
top: 0;
left: 0;
display: none;
}
#panelInspectorContainer {
background-color: transparent;
width: 400px;
height: 400px;
z-index: 110;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#panelInspector {
width: 325px;
height: 385px;
margin-left: auto;
margin-right: auto;
border: 0px solid #00f;
top: 50%;
position: relative;
}
#panelInspector.double {
width: 475px;
}
#panel, #panelInformation {
width: 150px;
height: 385px;
float: left;
color: #cccccc;
font-size: 12px;
}
#panel {
/*background-color: rgba(0,0,0,0.3);*/
margin-right: 25px;
}
#panel.double {
width: 300px;
}
#panelInformation {
text-align: left;
}
#panelInformation label {
color: #ccc;
display: inline-block;
width: 60px;
}
#panelInformation .description {
font-size: 0.9em;
}
#panelInformation .description .small {
font-size: 0.9em;
}
#panelInformation h2 {
color: #fff;
font-size: 16px;
margin-top: 0;
margin-bottom: 2px;
}
#panelInformation p {
margin-bottom: 0;
}
#panelInformation #addPanelButton {
background: url(/images/icon-add-white.png) no-repeat;
background-size: 15px;
background-position: right 7px top 7px;
}
body.mobile #panelInformation #addPanelButton {
background-position: 128px 7px;
}
#panelInformation #cancelPanelButton,
#panelInformation #closeInspectorButton2 {
background: url(/images/icon-close-purple.png) no-repeat;
background-size: 12px;
background-position: right 8px top 8px;
}
body.mobile #panelInformation #cancelPanelButton,
body.mobile #panelInformation #closeInspectorButton2 {
background-position: 130px 8px;
}
#panelInformation #deletePanelButton {
background: url(/images/icon-trash-purple.png) no-repeat;
background-size: 12px;
background-position: right 8px top 8px;
}
body.mobile #panelInformation #deletePanelButton {
background-position: 130px 8px;
}
#panelInformation #editPanelButton, #panelInformation #updatePanelButton {
background: url(/images/icon-ok-white.png) no-repeat;
background-size: 16px;
background-position: right 7px top 9px;
}
body.mobile #panelInformation #editPanelButton,
body.mobile #panelInformation #updatePanelButton {
background-position: 127px 9px;
}
#panelInformation #addPanelButton,
#panelInformation #updatePanelButton,
#panelInformation #cancelPanelButton,
#panelInformation #editPanelButton,
#panelInformation #deletePanelButton,
#panelInformation #movePanelButtonContainer,
#notification #okButton,
#panelInformation #closeInspectorButton2 {
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#panelInformation #addPanelButton a,
#panelInformation #updatePanelButton a,
#panelInformation #cancelPanelButton a,
#panelInformation #editPanelButton a,
#panelInformation #deletePanelButton a,
#notification #okButton a,
#panelInformation #closeInspectorButton2 a {
text-decoration: none;
display: block;
width: 132px;
height: 12px;
padding: 6px 9px 12px;
}
#panelInformation #addPanelButton a,
#panelInformation #updatePanelButton a,
#panelInformation #editPanelButton a,
#notification #okButton a {
color: #fff;
}
#panelInformation #cancelPanelButton a,
#panelInformation #deletePanelButton a,
#panelInformation #movePanelButtonContainer a,
#panelInformation #closeInspectorButton2 a {
color: #6866a0;
}
#panelInformation #movePanelLeftButton {
background: url(/images/icon-left-purple.png) no-repeat;
background-size: 9px;
background-position: 10px 8px;
}
#panelInformation #movePanelRightButton {
background: url(/images/icon-right-purple.png) no-repeat;
background-size: 9px;
background-position: 10px 8px;
}
#panelInformation #movePanelLeftButton, #panelInformation #movePanelRightButton {
text-decoration: none;
display: block;
width: 12px;
height: 12px;
padding: 6px 9px 12px;
float: left;
}
#notification #okButton {
width: 100px;
text-align: center;
float: left;
margin-left: 115px;
}
#notification #okButton a {
width: 82px;
}
#panelInformation #addPanelButton,
#panelInformation #updatePanelButton,
#panelInformation #editPanelButton,
#notification #okButton {
background-color: #6866a0;
}
#panelInformation #cancelPanelButton,
#panelInformation #deletePanelButton,
#panelInformation #cancelPanelButton,
#panelInformation #movePanelButtonContainer,
#panelInformation #closeInspectorButton2 {
background-color: #fff;
margin-top: 7px;
}
#panelInformation #cancelPanelButton.only {
margin-top: 37px;
}
#checkoutButton {
background: #6866a0 url(/images/icon-right-white.png) no-repeat;
background-size: 9px;
background-position: right 8px top 7px;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 225px;
z-index: 140;
position: absolute;
right: 25px;
bottom: 25px;
border: 1px solid #fff;
}
body.mobile #checkoutButton {
background-position: 208px 7px;
}
#sendButton {
background: #6866a0 url(/images/icon-right-white.png) no-repeat;
background-size: 9px;
background-position: right 8px top 7px;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 225px;
border: 1px solid #6866a0;
float: right;
margin-top: 14px;
margin-left: 5px;
margin-right: 14px;
}
body.mobile #sendButton {
background-position: 208px 7px;
}
#saveButton, #printButton, #backButton {
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 125px;
border: 1px solid #6866a0;
float: right;
margin-top: 14px;
margin-left: 5px;
}
#backButton {
text-align: right;
background: #fff url(/images/icon-left-purple.png) no-repeat;
background-size: 9px;
background-position: 8px 8px;
}
#printButton {
background: #fff url(/images/icon-print-purple.png) no-repeat;
background-size: 18px;
background-position: right 8px top 8px;
}
body.mobile #printButton {
background-position: 100px 8px;
}
#saveButton {
background: #fff url(/images/icon-star-purple.png) no-repeat;
background-size: 21px;
background-position: right 5px top 5px;
}
body.mobile #saveButton {
background-position: 100px 5px;
}
#checkoutButton a, #sendButton a {
text-decoration: none;
display: block;
width: 207px;
height: 12px;
padding: 6px 9px 12px;
color: #fff;
}
#saveButton a, #printButton a, #backButton a {
text-decoration: none;
display: block;
width: 107px;
height: 12px;
padding: 6px 9px 12px;
color: #6866a0;
}
#orderBlockerTop {
position: absolute;
background-color: #fff;
top: 37px;
left: 11px;
z-index: 530;
height: 50px;
}
#orderButtonContainer {
position: fixed;
background-color: rgba(255, 255, 255, 0.9);
bottom: 11px;
left: 11px;
z-index: 540;
height: 60px;
border-top: 1px solid #dcdcdc;
}
#orderPreviewCanvas {
background-color: #fff;
border: 1px solid #d8d8d8;
position: absolute;
z-index: 500;
}
#orderPreviewContainer {
overflow: scroll;
position: absolute;
z-index: 510;
top: 87px;
left: 1px;
background-color: #fff;
}
#orderPreview {
padding: 0 14px 30px;
}
#orderPreview p {
margin-top: 0;
margin-left: 25px;
margin-right: 25px;
font-size: 15px;
}
#orderPreview h2 {
margin-top: 30px;
text-transform: uppercase;
color: #6866a0;
font-size: 16px;
border-bottom: 1px solid #d8d8d8;
}
#orderPreview .orderDetailsCol1, #orderPreview .orderDetailsCol2 {
float: left;
width: 50%;
}
#orderPreview label {
display: block;
text-transform: uppercase;
font-size: 12px;
margin-bottom: 5px;
}
#orderPreview label.error {
color: #d60000;
}
#orderPreview input[type=text] {
width: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
border: 1px solid #b4b4b4;
color: #000;
font-size: 15px;
padding-left: 10px;
padding-right: 10px;
}
#orderPreview input[type=text].error {
border: 1px solid #d60000;
}
#orderPreview textarea {
width: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
border: 1px solid #b4b4b4;
color: #000;
font-size: 15px;
padding: 10px;
height: 125px;
}
#panelInformation #movePanelLeftButton {
border-right: 1px solid #b3b2cf;
}
#panelInformation #movePanelRightButton {
border-left: 1px solid #b3b2cf;
}
#panelInformation #movePanelLeftButton.disabled, #panelInformation #movePanelRightButton.disabled {
color: #e1e0ec;
}
#panelInformation #movePanelLeftButton.disabled {
background: url(/images/icon-left-purple-disabled.png) no-repeat;
background-size: 9px;
background-position: 10px 8px;
}
#panelInformation #movePanelRightButton.disabled {
background: url(/images/icon-right-purple-disabled.png) no-repeat;
background-size: 9px;
background-position: 10px 8px;
}
#panelInformation #movePanelButtonContainer label {
text-decoration: none;
display: block;
width: 70px;
height: 12px;
padding: 6px 9px 12px;
float: left;
text-align: center;
color: #6866a0;
}
#panelInformation .actions {
position: absolute;
top: 100%;
margin-top: -67px;
}
#panelInformation .actions-inspect {
margin-top: -104px;
}
#panelInformation .actions-inspect-remove {
margin-top: -144px;
}
#panel .loading {
position: relative;
top: 50%;
margin-top: -192px;
}
.panelImageCustom .loading {
/* For Custom panel */
position: absolute !important;
top: 50% !important;
margin-top: -16px !important;
margin-left: -16px;
}
.panelImageCustom .customComponentSlot {
width: 150px;
height: 90px;
display: block;
position: absolute;
/* background-color: rgba(0,0,0,0.5); */
left: 0px;
cursor: pointer;
}
.panelImageCustom .customComponentSlot.retractor {
width: 90px;
height: 104px;
display: block;
position: absolute;
/* background-color: rgba(0,0,0,0.5); */
left: 0px;
cursor: pointer;
}
.panelImageCustom .tinter {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
width: 150px;
height: 385px;
display: none;
}
#panel.double .panelImageCustom.retractor .tinter {
width: 300px;
}
.panelImageCustom .customComponentSlot-A {
top: 40px;
}
.panelImageCustom .customComponentSlot-A.retractor {
top: 63px;
left: 30px;
}
#panel.double .panelImageCustom .customComponentSlot-A.retractor {
top: 63px;
left: 15px;
}
.panelImageCustom .customComponentSlot-B {
top: 138px;
}
.panelImageCustom .customComponentSlot-B.retractor {
top: 63px;
left: 105px;
}
.panelImageCustom .customComponentSlot-C {
top: 236px;
}
.panelImageCustom .customComponentSlot-C.retractor {
top: 63px;
left: 195px;
}
#inspectNextSlotButton, #inspectPreviousSlotButton {
width: 26px;
height: 26px;
position: absolute;
top: 50%;
margin-top: -13px;
cursor: pointer;
}
#inspectNextSlotButton {
right: 15px;
}
#inspectPreviousSlotButton {
left: 15px;
}
#inspectNextSlotButton img, #inspectPreviousSlotButton img {
width: 100%;
}
#closeInspectorButton {
z-index: 120;
width: 26px;
height: 26px;
position: absolute;
display: none;
cursor: pointer;
}
#closeInspectorButton img {
width: 100%;
}
#closeCheckoutButton {
z-index: 560;
width: 26px;
height: 26px;
position: absolute;
right: 25px;
top: 45px;
cursor: pointer;
}
#closeCheckoutButton img {
width: 100%;
}
#orderTotalContainer {
z-index: 550;
color: #cccccc;
position: absolute;
top: 0;
left: 0;
font-size: 15px;
}
#orderTotalContainer.checkout {
color: #6866a0;
}
#orderTotalContainer .dollarSymbol, #orderTotalContainer .price {
color: #efefef;
}
#orderTotalContainer.checkout .dollarSymbol, #orderTotalContainer.checkout .price {
color: #6866a0;
}
#category-nav, #category-component-nav, #category-retractorcomponent-nav {
float: left;
width: 34px;
margin: 0;
padding: 4px 0 0 0;
background-color: #c1c1c1;
}
#category-nav li, #category-component-nav li, #category-retractorcomponent-nav li {
display: inline-block;
width: 34px;
border-bottom: 1px solid #a8a8a8;
background-color: #c1c1c1;
}
#category-nav li.first, #category-component-nav li.first, #category-retractorcomponent-nav li.first {
border-top: 1px solid #a8a8a8;
}
#category-nav li.selected, #category-component-nav li.selected, #category-retractorcomponent-nav li.selected {
background-color: #f0f0f0;
}
#category-nav li a, #category-component-nav li a, #category-retractorcomponent-nav li a {
display: inline-block;
width: 26px;
padding: 5px 7px 5px 3px;
}
#category-nav li img, #category-component-nav li img, #category-retractorcomponent-nav li img {
width: 100%;
}
#category-panel-container {
width: 225px;
height: 450px;
overflow: hidden;
border-right: 1px solid #e2e2e8;
}
#drawerOptions {
border-right: 1px solid #e2e2e8;
width: 225px;
float: left;
}
#category-filter {
width: 195px;
padding: 15px;
border-bottom: 1px solid #e2e2e8;
}
#category-filter select {
width: 190px;
height: 30px;
margin-bottom: 12px;
border: 1px solid #6866a0;
color: #9594bb;
font-size: 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
#category-filter select#filter-wiring {
margin-bottom: 0;
}
#category-panel {
left: 0px;
position: relative;
width: 195px;
height: 340px;
padding: 15px;
}
#category-panel.custom {
height: 340px;
}
.panel-item, .component-item {
float: left;
margin-right: 5px;
margin-bottom: 5px;
width: 58px;
height: 58px;
background-color: #fff;
border: 1px solid #b4b4b4;
text-align: center;
cursor: pointer;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.panel-item-selected, .component-item-selected {
border: 1px solid #6c6e6f;
}
.panel-item-edge, .component-item-edge {
margin-right: 0;
}
.panel-item img, .component-item img {
height: 54px;
width: auto;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
}
.component-item img {
height: 29px;
margin-top: 15px;
}
#category-pagination {
clear: both;
list-style: none;
padding-left: 0;
text-align: center;
}
#category-pagination-previous, #category-pagination-next {
width: 26px;
height: 26px;
margin-top: -38px;
}
#category-pagination-previous img, #category-pagination-next img {
width: 100%;
}
#category-pagination-previous {
float: left;
margin-left: 20px;
}
#category-pagination-next {
float: right;
margin-right: 20px;
}
#category-pagination li {
display: inline-block;
margin-right: 5px;
width: 10px;
height: 10px;
}
#category-pagination li img {
width: 100%;
}
#category-pagination li.selected a {
text-decoration: none;
font-weight: bold;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
/* Notification-specific styles */
#notificationContainer {
background-color: rgba(255,255,255,0.8);
width: 100%;
height: 100%;
position: fixed;
display: block;
top: 0;
left: 0;
z-index: 650;
}
#notification {
width: 330px;
background-color: #fff;
padding: 25px;
position: absolute;
left: 50%;
margin-left: -190px;
top: 50%;
margin-top: -103px;
-webkit-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.2);
box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.2);
}
#notification .icon {
width: 36px;
margin-right: 15px;
float: left;
}
#notification .icon img {
width: 100%;
}
#notification .content {
width: 279px;
float: left;
}
#notification p {
margin-top: 0;
}
#notification a:link, #notification a:visited, #notification a:hover {
color: #6866a0;
}
/* Preview-specific styles */
body.preview {
background-color: #fff;
}
body.preview #printButton {
margin-top: 14px;
margin-left: 5px;
margin-right: 14px;
}
body.preview .content {
background: none;
background-color: #fff;
}