html {
background-color:#fafafa;
margin:0px;
padding:0px;
overflow-x:hidden;
text-align:center;
}
body {
display:inline-block;
margin:0px;
font-size:18px;
font-family: 'Source Sans Pro', arial, sans-serif;
color:#252525;
width:100%;
}
* {
transition:background-color 200ms linear;
-webkit-transition:background-color 200ms linear;
box-sizing:border-box;
}
#main {
width:100%;
padding:10px;
text-align:left;
}
.label {
font-variant:small-caps;
font-size:20px;
display:block;
margin-bottom:3px;
}
.formbutton {
font-variant:small-caps;
font-size:14px;
padding:4px;
vertical-align:middle;
}
.textfield {
padding:6px;
border:1px solid #cccccc;
margin-bottom:10px;
max-width:100%;
width:200px;
}
.ferror {
border:2px solid red !important;
}
.error {
color:red;
font-size:14px;
font-weigth:bold;
font-style:italic;
display:inline-block;
margin-top:-8px;
}
.cta {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
padding:10px;
background-color:#dddddd;
border:1px solid;
cursor:pointer;
font-size:18px;
font-weight:bold;
color:#000000;
text-decoration:none;
}
.cta:hover {
background-color:#eeeeee;
}
.overlay {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,.6);
z-index:10;
display:none;
}
.popholder {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:12;
text-align:center;
max-height:100%;
overflow:auto;
display:none;
}
.popup {
background-color:#fefefe;
padding:30px;
border:1px solid #cccccc;
display:inline-block;
max-width:100%;
box-sizing:border-box;
}
.table {
border-collapse:collapse;
overflow:auto;
display:block;
}
.table th {
padding:10px;
border:1px solid #dddddd;
background-color:#cccccc;
position:sticky;
top:0px;
}
.table td {
vertical-align:top;
border:1px solid #dddddd;
padding:10px;
}
.table .checkbox {
width:18px;
height:18px;
}
.table input[type="text"] {
padding:0px;
background:transparent;
border:0;
width:70px;
font-size:17px;
}
.table input[type="text"]:focus {
background-color:#f0eb93;
}
.or {margin-bottom:10px;}
.prog1 {
width:300px;
border:1px solid #999999;
display:inline-block;
margin-right:6px;
}
.prog2 {
width:0px;
height:15px;
background-color:#11bd3e;
}
.divider {
width:100%;
height:1px;
background-color:#252525;
}
.backlink {
color:#1c4b73;
font-size:16px;
text-decoration:none;
}
@media screen and (max-width:700px) {
#main {padding-left:10px !important;}
}
@media screen and (min-width:701px) {
#main {padding-left:210px !important;}
}
/**************************** SIDE PANEL *************************************/
@media screen and (max-width:700px) {
#sidepanel {display:none !important;}
}
@media screen and (min-width:701px) {
#mobhead {display:none !important;}
#mobpanel {display:none !important;}
}
#sidepanel {
width:200px;
background-color:#1c4b73;
position:fixed;
top:0px;
bottom:0px;
}
.menuitem {
display:block;
width:100%;
padding:8px;
color:#fafafa;
text-decoration:none;
font-variant:small-caps;
font-size:20px;
text-align:left;
letter-spacing:1px;
}
.menuitem.active {
background-color:#3671a3;
}
.menuitem:hover {
background-color:#3671a3;
}
#mobhead {
width:100%;
padding:8px;
background-color:#1c4b73;
text-align:left;
}
#iconmenu {
color:#fafafa;
}
#mobpanel {
background-color:#1c4b73;
position:absolute;
z-index:5;
width:100%;
display:none;
}
/**************************** BANNERS *************************************/
#newbanner {
display:none;
}
#banner_prog {
display:none;
}
#banner_prog .spinner {
display:inline-block;
width:25px;
height:25px;
position:relative;
top:4px;
}
.bannersec {
width:50%;
margin-right:100px;
position:relative;
display:inline-block;
vertical-align:top;
max-width:600px;
}
.bannersecM {
width:25%;
margin-right:0px;
}
.sectitle {
display:block;
padding:10px;
border:1px solid;
width:100%;
text-align:center;
margin-bottom:20px;
}
.bannerblock {
width:100%;
display:block;
margin-bottom:20px;
position:relative;
}
.bannerimg {
width:100%;
height:auto;
}
.bannerblock .checkbox {
position:absolute;
top:4px;
left:3px;
width:25px;
height:25px;
}
.bdelete {
position:absolute;
top:4px;
right:3px;
height:30px;
width:auto;
background-color:rgba(255,255,255,.6);
display:none;
cursor:pointer;
}
.bannerblock:hover > .bdelete {
display:block;
}
@media screen and (max-width:700px) {
.bannersec, .bannersecM {width:100%; margin-right:0px; display:block;}
}
/**************************** TOP ALERT PANEL *************************************/
#toptable .checkbox {
width:30px;
height:30px;
}
#toptable .textfield {
width:400px;
}
#toptable .submitbutton {
display:none;
}
/**************************** PRODUCT PANEL *************************************/
#filter .textfield {
width:180px;
background-color:#ffffff;
}
#prodtable .prodid {
text-decoration:underline;
color:blue;
cursor:pointer;
}
#prodtable .pthumb {
height:60px;
width:60px;
}
#prodtable .noimage {
width:60px;
height:60px;
background-color:#ffffff;
border:1px solid #dddddd;
}
/**************************** EDIT FORM *************************************/
#editform {
padding:20px;
}
#editform select {
background:transparent;
}
#editform .elabel {
display:inline-block;
width:100px;
margin-right:10px;
}
#editform .textfield {
width:300px;
}
#editform textarea, #editform .tox {
width:700px !important;
max-width:100%;
height:300px;
}
#editform .cta {
width:300px;
}
.note-editor {
width:100%;
max-width:700px;
}
/**************************** PRODUCT INVENTORY *************************************/
#inventory {
width:100%;
height:700px;
border:0;
}
#inventorylist {
padding:20px;
width:100%;
text-align:left;
}
#inventorylist .spinner {
display:none;
height:40px;
width:auto;
vertical-align:middle;
z-index:15;
position:relative;
}
/**************************** PRODUCT IMAGES *************************************/
#gallery {
width:100%;
height:600px;
border:0;
}
#productimages {
padding:20px;
width:100%;
text-align:left;
}
#picfile {display:none;}
#picform .spinner {
display:none;
height:40px;
width:auto;
vertical-align:middle;
z-index:15;
position:relative;
}
.imgblock {
display:inline-block;
width:200px;
vertical-align:top;
margin-right:30px;
margin-bottom:30px;
text-align:center;
position:relative;
}
.imgthumb {
width:100%;
height:auto;
margin-bottom:8px;
border:1px solid #dddddd;
}
.imgblock .check {
width:20px;
height:20px;
position:absolute;
top:2px;
right:2px;
z-index:2;
}
.button_primary {
width:30px;
height:30px;
}
.imgthumb.primary {
border:2px solid blue;
}
.imgdelete {
height:20px;
width:auto;
position:absolute;
right:2px;
bottom:50px;
}
.deleteconfirm {
padding:8px;
background-color:#ffffff;
box-shadow:0px 0px 5px #cccccc;
position:absolute;
bottom:30px;
width:100%;
display:none;
}
.deletebutton {
display:inline-block;
margin-left:6px;
margin-right:6px;
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:2px !important;
cursor:pointer;
}
.deletebutton:hover {color:blue;}
.imgcolor {
display:block;
width:100%;
margin-top:10px;
}
/**************************** ORDER DETAILS *************************************/
#details {
padding-left:20px;
display:inline-block;
}
#details select {padding:4px;}
#details .formbutton {display:none;}
.orderlabel {
display:inline-block;
font-weight:bold;
margin-bottom:10px;
width:100px;
text-align:right;
margin-right:10px;
}
.datefield, .datefield2 {
margin-left:10px;
display:none;
}
.notes {
width:67%;
max-width:500px;
height:80px;
}
.itemblock {
margin-bottom:30px;
}
.itempic {
display:inline-block;
width:100px;
}
.itempic img {
width:100%;
height:auto;
}
.detailfield {
display:inline-block;
width:350px;
padding-left:10px;
padding-right:20px;
padding-top:6px;
vertical-align:top;
}
.detailid {
display:block;
text-transform:uppercase;
font-size:12px;
}
.detailbrand {
display:block;
text-transform:uppercase;
font-size:14px;
margin-bottom:8px;
}
.totalfield {
display:inline-block;
vertical-align:top;
width:200px;
text-align:right;
font-weight:bold;
padding-top:6px;
}
.itemblock .totalfield {
padding-top:20px;
}
.break {
border-top:1px solid;
padding-top:10px;
margin-top:10px;
}
.dcode {
font-size:14px;
}
@media screen and (max-width:700px) {
.detailfield {width:70%;}
#details {padding-left:0px;}
}
@media screen and (max-width:900px) {
.itempic {display:block;}
.totalfield {width:100px;}
}
/**************************** DISCOUNT PAGE *************************************/
#addcode {
padding:20px;
border:1px solid;
display:inline-block;
}
#addcode #amount {width:100px;}
#addcode select {margin-right:10px;}
#addcode #codedesc {width:450px;}
.codedesc {width:300px !important;}
.code_delete {cursor:pointer;}
.code_delete img {
height:25px;
width:auto;
}
/**************************** VENDORS PAGE *************************************/
#addvendor {
padding:20px;
border:1px solid;
display:inline-block;
}
.vlabel {
width:140px;
display:inline-block;
text-align:right;
margin-right:6px;
}
.vendname, .vendemail {
width:300px !important;
}
.vendpass {
cursor:pointer;
font-size:12px;
text-decoration:underline;
}
#passform .popup {width:300px;}
#passform .textfield {width:100%;}
#passform .cta {
display:block;
margin-top:10px;
width:100%;
font-size:16px;
}
.cancel_pass {
display:inline-block;
position:relative;
top:8px;
font-size:14px;
text-decoration:underline;
cursor:pointer;
color:#666666;
}
/**************************** SUPPORT DESK *************************************/
.supportlabel {
display:inline-block;
width:60px;
margin-right:10px;
font-weight:bold;
margin-bottom:8px;
}
#memo {
width:100%;
max-width:600px;
height:200px;
}