* {margin: 0; padding: 0;}



body {background: white url('https://imgcraft.io/images/layout/TPRPOS_BKGD.gif'); font-family: Verdana, sans-serif; font-size: 12px; line-height: 18px; color: #999;}



a img {border: 0;}

a {color: #666; text-decoration: none;}

a:hover{text-decoration:underline;}



ul {list-style-type: none;}

ul.inline li{display:inline;}

ul.inline li:not(:first-child):before{

	content:"| ";

}



h1, h2 {color: #666; text-transform: uppercase;}

h1 {font-size: 12px;}

h2 {font-size: 11px;}



hr {

  background-color: #ddd;

  border : 0;

  clear: both;

  height : 1px;

  margin : 19px 0 20px;

}



p {margin-bottom: 20px;}

#sidebar p/*.instructions*/ {font-size: 11px; line-height: 14px; margin-bottom: 10px;}

#sidebar p img {margin-top: 10px;}

#sidebar p a {text-decoration: underline;}



p.order_info {color: #333;}





/* basic layout */



#container {background: white; width: 800px; margin: 0 auto;}



/*#header {position: relative; height: 90px; width: inherit; background: url('https://imgcraft.io/images/layout/SM_POS_header_bg_7-2014_v1.gif') no-repeat;}*/

#header {position: relative; height: 90px; width: inherit; background: url('https://imgcraft.io/images/layout/header_feb_2020.jpg') no-repeat;}

/*.html-version #header{background: url('https://imgcraft.io/images/layout/header_7-2014_v1.jpg') no-repeat;}*/

.html-version #header{background: url('https://imgcraft.io/images/layout/header_feb_2020.jpg') no-repeat;}

html-version #header



body.quickstart #header,

body.order_confirmation #header {position: relative; height: 90px; width: inherit;}



ul#site_navigation {position: absolute; top: 23px; right: 0;}

ul#site_navigation li {float: left;}

ul#site_navigation li a {display: block;}



#footer {background: #808285 url('https://imgcraft.io/images/layout/SM_POS_footer_bg.gif') repeat-x; padding: 25px 20px 15px; text-align: center; color: white;}

#footer a {color: inherit;}

#footer p {margin-bottom: 0;}

#footer p span {text-transform: uppercase;}



#header, #footer, .clear {clear: both;}



.clear {clear: both;}



#content img.clear{display: block}





/* sidebar */



#sidebar {float: left; width: 160px; padding: 0 20px 0 30px; margin-top: 20px; /*margin-right: -1px;*/ margin-bottom: 20px; border-right: 1px solid #b3b3b3;}







/* content */



#content {float: left; width: 529px; padding: 0 25px; margin-top: 20px; margin-bottom: 20px; border-left: 1px solid #b3b3b3; margin-left: -1px;}



.product_information {padding: 20px 0;}



/* tabs */

.tabs{margin-bottom:10px;}

.tabs:after{

	clear:both;

	content:"";

	display:block;

/*	border-bottom: 1px solid #7f7f7f;*/

}

.tabs li a{

	border: 1px solid #999;

	border-width:0 0 1px 1px;

	display: inline;

	float: left;

	padding: 3px 10px;

	border-radius: 0 0 3px 3px;

	margin:0;

}

.tabs li a:hover{

	margin-bottom:-2px;

	padding-top:5px;

}

.tabs li a:hover, .tabs li.active a{

	background:#eee;

	color:#333;

}

ul.tabs li:last-child a{

	border-right: 1px solid #999;



}

.account h2{

	margin-bottom: 10px;

}

.account form .unit{padding:10px 0;}

.account input[type=text], .account input[type=password], .account textarea{max-width:240px;}

.account input[type=submit], .account button[type=submit]{

  margin-bottom: 20px;

	float: right;

}

.account button, #order-search button{

	background:#0f0;

	border:none;

	color:white;

	cursor:pointer;

	font-size:14px;

	font-weight:bold;

	height:24px;

	margin:12px 24px 0 0;

	padding:0 5px;

	position:relative;

	text-transform:uppercase;

}

.account button:after, #order-search button:after{

	border-width:12px 0 12px 12px;

    border-color:transparent transparent transparent #0f0;

    border-style:solid;

    top:0;

    content:'';

    position:absolute;

    right:-12px;

}

.account table{

	border-collapse:collapse;

	border-spacing:0;

}

.account th{

	border-bottom:1px solid #eee;

}

.account th, .account td{

	padding:5px 0;

}

.account th{

	text-align:left;

	width:120px;

	vertical-align:top;

}

.user {

	padding: 10px 10px 0 10px;

	border: 1px solid #999;

	margin-bottom: 10px;

	background: #eee;

}

.notice, .error {

	background-color: #ffe9e9;

	color: black;

}

.notice.login {

	float: right;

	padding: 5px;

	text-align: left;

	font-weight: bold;

	width: 164px;



}

.callout {

	border: 1px solid #999;

	float: left;

	font-size: 18px;

	font-weight: bold;

	margin-right: 10px;

}

.callout a:link, .callout a:visited {

	background-color: #0f0;

	color: white;

	display: block;

	padding: 20px;

	text-align: center;

	text-decoration: none;

	width: 200px;

}

.callout a:hover {

	color: #00009d;

}

/** Callout over-rides (Added Nov. 22, 2019 by Punch) **/

.callout,

.callout-fullwidth {

  float : left;

  height : 74px;

  display : table !important;

}

.callout a {

  height : 54px;

  vertical-align : middle;

  display: table-cell !important;

}

.callout-fullwidth {

  clear : both;

  float : right;

  margin-top: 10px;

  font-size : 10px;

}

/** end callout over-rides **/	

.account-nav {

	margin: 20px 0;

	border-top: 1px solid #999;

}

.account-nav li a {

	display: block;

	padding: 5px;

	border-bottom: 1px solid #999;

}

.account-nav li a:hover {

	background-color: #00009d;

	color: white;

	text-decoration: none;

}

.account-nav li.active a {

	background-color: #808285;

	color: white;

}



/* Orders */

#order-search{padding-left:200px;}

#order-search input{display:inline-block;}

#order-search input[type=text]{width:160px;}

#order-search button{margin:0;}

#my-orders-table th{font-weight:normal;}

#my-orders-table th, #my-orders-table td{

	padding:5px;

	vertical-align:top;

}

#my-orders-table .date, #my-orders-table .store{width:100px;}

.order-summary td{cursor:pointer;}

.order-summary td, .order-details td{

	background:#e9e9e9;

	color:#666;

}

.order-summary.odd td, .order-summary.odd + .order-details td{background:#f9f9f9;}

.order-numbers{margin-bottom:40px;}

.order-numbers th, .order-numbers td{

	border:0;

	color:#444;

	padding:0 10px 0 0 !important;

}

.order-numbers th{

	text-align:right;

	white-space:nowrap;

	width:10%;

}

.order-actions li{display:inline;}

.order-actions a{

	background:#666;

	border-radius:3px;

	color:#fff;

	display:inline-block;

	padding:0 5px 2px;

}

.order-actions a:hover{

	background:#999;

	color:#eee;

	text-decoration:none;

}



/*

#member_street_address{

	width: 340px;

}

*/



/* step 1 */

div.product_images {padding: 0 10px; border-top: 1px solid #999;}

div.product_images a {

  display: block;

  float: left;

  margin: 0 10px;

  min-height: 145px;

}



/* step 2 */

.brand_logo {float: right; margin-bottom: -15px;}



table {font-size: 11px; width: 100%;}



body.step2 .column_wrapper {padding: 20px 0; border-top: 1px solid #7f7f7f;}



/* steps 2 & 3 */



.column {width: 250px;}

.column.left {float: left;}

.column.right {float: right;}

.column.right p {margin-bottom: 10px; text-align: center;}



table {margin-bottom: 10px;}

table tr th {text-align: left;}



#larger_image {position: absolute; top: 0; right: 0; background: white; border: 1px solid #333; padding: 10px; cursor: pointer;}



/* step 3 */

body.step3 .column_wrapper {padding: 20px 0 10px;}



.clear.column_title {border-bottom: 1px solid #7f7f7f; height: 19px;}

.column_title h1{

	background:#808285;

	color:#fff;

	display:inline-block;

	font-weight:normal;

	min-height:19px;

	padding:0 5px;

	position:relative;

}

.column_title h1:after{

		border-width: 0 20px 20px 0;

	    border-color: transparent transparent #808285 transparent;

	    border-style: solid;

	    top:0;

	    content: '';

	    position:absolute;

	    right:-20px;

}



/* step 4 */

.make_changes {

  background-color: red;

  color: #fff;

  display: inline-block;

  /*font-weight: 700;*/

  height: 21px;

  line-height: 21px;

  padding-right: 10px;

  position: relative;

  text-align: right;

  text-transform: uppercase;

  width: 190px;

}



.make_changes:hover,

.make_changes:focus {

  text-decoration: none;

  /*background-color: #000;*/

}



.make_changes::after {

  border-color: #fff transparent;

  border-style: solid;

  border-width: 11px 11px 11px 0;

  content: '';

  height: 0;

  left: 0;

  position: absolute;

  top: 0;

  width: 0;

}



body.quickstart .clear.column_title {height: 20px; display: block;}



form input, form textarea {border: 1px solid #999; padding: 2px 3px; background: white;}

form .remove_border {border: 0; background: transparent;}



.form_section, .error {margin-bottom: 30px; border: 1px solid #CCC; padding: 10px 15px; clear: both;}

.form_section p {margin: 5px 0; line-height: 15px;}

.form_section p span {width: 12em; display: block; float: left; text-align: right; margin-right: 5px; padding-top: 4px;}



body.order_confirmation .form_section p {color: #333;}

body.order_confirmation .form_section .selection_title {margin-top: 20px;}

body.order_confirmation .form_section p span {float: none; padding-top: 0; text-align: left; color: #666;}



.form_section p.radio_selection span {float: none; display: inline; padding: 5px; margin: 0 10px;}

.form_section p.radio_selection span.selected {background: #999; color: white;}

.form_section p.radio_selection {text-align: left;}



.form_section p.radio_selection.format span {float: none; display: inline; padding: 5px; margin: 0 5px;}



#freeform h2, body.order_confirmation h2 {background-color: #CCC; /*float: left;*/ padding: 5px 7px; font-size: 9px; letter-spacing: 2px; width: 200px; line-height: 11px;}



.cursor {cursor: pointer;}



.focus {border: 1px solid #666; background: #e8e8e8;}



/* Error highlighting for form validation */
.highlighted {
    color: #cc0000 !important;
    background-color: #ffe6e6 !important;
    border: 2px solid #cc0000 !important;
    text-transform: uppercase;
}

/* Radio button group error highlighting */
.radio_highlighted {
    background: #cc0000 !important;
    padding: 8px 10px !important;
    color: white !important;
    border-radius: 3px;
}

.radio_highlighted span.this_required {
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 10px;
}

/* Ensure delivery address errors are visible */
#delivery_one .highlighted,
#delivery_two .highlighted,
#delivery_address_1 .highlighted,
#delivery_address_2 .highlighted {
    background-color: #ffe6e6 !important;
    color: #cc0000 !important;
    border: 2px solid #cc0000 !important;
}



.sub_selection {background: #999; color: white; padding: 10px; border-top: 1px dotted white;}



form .sub_selection input {color: #333;}



p.selection_title {text-transform: uppercase; font-size: 10px; letter-spacing: 2px; color: #666; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #666;}



input, textarea {font-family: verdana; font-size: 12px;}



p label em {color: #666;}



.readonly {color: #666; border-color: white;}



#submit {border: 0;}



.alerts {background: red; padding: 10px; position: absolute; width: 300px; color: white;}



@keyframes fadeout{

	from {opacity:1;}

	to {opacity:0;}

}



@-webkit-keyframes fadeout /* Safari and Chrome */

{

	from {opacity:1;}

	to {opacity:0;}

}

.success{

	background:#0f0;

	color:white;

	font-weight:bold;

	opacity:0;

	padding:10px;



	animation-name: fadeout;

	animation-duration: 5s;

	animation-iteration-count:1;

	/* Safari and Chrome: */

	-webkit-animation-name: fadeout;

	-webkit-animation-duration: 5s;

	-webkit-animation-iteration-count:1;



}



.hidden {position: absolute; top: -9999px;}





.minimum-notice {

	color: red;

	margin: 1em 0;

	font-weight: bold;

}





#sidebar .assistance-message {

  color: #00009D;

  color: #fff;

  font-weight: bold;

  background-color: #00009D;

  padding: .5em;



}

#sidebar .assistance-message a {

  color: #fff;

}



@media (min-width:400px) {

  #sidebar a[href^="tel"] {

    color: inherit;

    text-decoration: none;

  }



}





/* Links at the bottom of the "home" page  */

.callout {

  display: inline-block;

  float: none;

}

.callout a:link, .callout a:visited {

  padding: 10px;

  width: 141px;

}



/* Home Page videos */

.login-video__wrapper {

  display: inline-block;

  width: 240px;

}



.login-video__wrapper:first-child {

  margin-right: 10px;

}



.login-video__block {

  height: 0;

  max-width: 100%;

  overflow: hidden;

  padding-bottom: 56.25%;

  position: relative;

}



.login-video__frame {

  height: 100%;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%;

}





.order-options {

  

}



.order-options .order-option {

  float: left;

  display: inline;

  width: 40%;

  margin-right: 5%;

}



.order-options .order-option h3 {

  font-size: 12px;

  color: #00009D;

}



.order-options .order-option a {

  background-color: #0f0;

  color: white;

  display: block;

  padding: 15% 5%;

  text-align: center;

  text-decoration: none;

  width: 90%;

  border: 1px solid #999;

  font-size: 18px;

  font-weight: bold;

  margin-right: 10px;

  margin-bottom: 15px;

  min-height: 75px;

}



.order-options .order-option a h4 {

  font-size: 27px !important;

  margin-bottom: 5px;

  top: -10px;

  position: relative;

  color: #00009D;

}



/* hover effect on start page*/

.order-option .box a:hover{

  color: #00009d;

}



.order-options .order-option p {

  padding-left: 15px;

}



.brand-select {

  display: block;

  float: left;

  margin: 0 10px;

  min-height: 140px;

  margin-bottom: 10px;

}



.brand-select a {

  

}



.brand-select input {

  width: 30px;

  margin-left: auto;

  margin-right: auto;

  display: block;

}



div.product_images.multi_brand a {

  display: block;

  float: none;

  min-height: 140px;

  margin: 0;

}



.brand_logo.multi_brand {

  float: left;

  display: inline-block;

  margin-right: 20px;

  margin-bottom: 15px;

  height: 135px;

}



.brand-prices-fields {

  margin-bottom: 25px;

}



.brand-prices-fields input[type=text] {

  width: 50%;

}





.next-btn {

  border: 0;

  background-color: #0f0; 

  padding: 5px 10px; 

  color: #fff; 

  font-weight: 800; 

  text-transform: uppercase;

  cursor: pointer;

}

.viewcart-btn{
  
  margin-right: 5px;
  
}


/** Callout over-rides (Added Nov. 22, 2019 by Punch) **/

.callout,

.callout-fullwidth {

  float : left;

  height : 74px;

  display : table !important;

}

.callout a {

  height : 54px;

  vertical-align : middle;

  display: table-cell !important;

}

.callout-fullwidth {

  clear : both;

  float : right;

  margin-top: 10px;

  font-size : 12px;

}

.callout-fullwidth a {

    text-decoration : underline;

}



.callout-reorder-labels-notice{

  clear : both;

  float : right;

  margin-top: 10px;

  width: 216px;

  font-size: 9px;

  word-spacing: -1.3px;

  height: auto;

}



.callout-reorder-labels-notice p{

  margin-bottom: 0px;

  color:rgb(62,52,36);

}



.callout.two-big a:link, .callout.two-big a:visited {

  width: 230px;

}

/** end callout over-rides **/	



/** css  of popup **/

/* Popup container - can be anything you want */

.popup {

  position: relative;

  display: inline-block;

  cursor: pointer;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



/* The actual popup */

.popup .popuptext {

  visibility: hidden;

  width: 214px;

  background-color: #555;

  color: #fff;

  text-align: center;

  border-radius: 6px;

  padding: 10px 8px;

  position: absolute;

  z-index: 1;

  bottom: 110%;

  left: 18%;

  margin-left: -80px;

  text-align: initial;

}

.quantity_popup .popuptext{
  bottom: 140%;
}

/* Popup arrow */

.popup .popuptext::after {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  margin-left: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: #555 transparent transparent transparent;

}



/* Toggle this class - hide and show the popup */

.popup .show {

  visibility: visible;

  -webkit-animation: fadeIn 1s;

  animation: fadeIn 1s;

}



/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {

  from {opacity: 0;} 

  to {opacity: 1;}

}



@keyframes fadeIn {

  from {opacity: 0;}

  to {opacity:1 ;}

}

/** end of the css of the popup **/



/* css of the FAQ */

.faq_images{margin-top:3px;}



.faq_image{

  height: auto;

  width: 100%;

  float: left;

  border:1px solid #CCC;

  margin-bottom: 4px;

}



.faq_vidoes{

  clear: both;

  width:100%;

}



.faq_vidoe_wrapper{

  display: inline-block;

  width: 49%;

  border: 1px solid #CCC;

}



.faq_video{

  height: 100%;

  width: 100%;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 12px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  transition: 0.4s;

  margin-top: 8px;

}



.accordion-active, .accordion:hover {

  background-color: #ccc;

}



.accordion:after {

  content: '\002B';

  color: #777;

  font-weight: bold;

  float: right;

  margin-left: 5px;

  font-size:15px;

}



.accordion-active:after {

  content: "\2212";

}



.accordion-panel {

  padding: 0 4px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

/*css of the FAQ */



/* notice for downloadable template */

.downloadable_template_notice{

  clear:both;

  padding: 1px 0 5px 0px;

}



.downloadable_template_notice a{

  font-weight: bold;

  color: white;

  text-decoration: underline;

}

/* Fix calendar width */
.ui-datepicker {
    width: 17em;
    padding: 0.2em 0.2em 0;
}

/* Fix button alignment */
.ui-datepicker-trigger {
    vertical-align: middle;
    cursor: pointer;
}

/* Ensure date input looks correct */
.ui-datepicker-input {
    padding: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}