:root {
--dark-high-contrast: #274d25;
--dark-base: #97d391;
--light-base: #cdffcd;
--navigation-background : linear-gradient(0deg, var(--light-base),var(--dark-base));
--navigation-background-header : linear-gradient(180deg,var(--light-base),var(--dark-base));
--navigation-background-default: #77b379;
--body-width: 1000px;
}
#mc_embed_signup input.button {
background-color: var(--dark-high-contrast);
}
h1.companyLogo {
text-indent : -9999px;
width : 316px;
height : 125px;
/*
* background-image : url('/catalog/usermods/logo.autumn.png');
* background-image : url('/catalog/usermods/logo.christmas.png');
*/
background-image : url('/catalog/usermods/logo.spring.png?refresh=20250402171107');
background-size : 316px 125px;
background-repeat: no-repeat;
border : 0px solid red;
}
.headerBarOverMasthead.fullWidthBarBkg {
background: radial-gradient(circle at 75% 0, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 0, .5) 5%, rgba(150, 213, 168, 0) 20%),
linear-gradient(0, #94d3b7, #d0fff1) !important;
}
BODY,
B,
TD,margin-top
P {
COLOR : #111111;
line-height: 133%;
}
* {
font-family: trebuchet, arial, sans-serif;
}
body {
FONT-SIZE: 14px;
padding : 0;
margin : 0;
}
td {
font-size: .9em;
}
div.divTable {
display: table;
}
div.divTr {
display: table-row;
}
div.divTd {
display: table-cell;
}
div.divTh {
display : table-cell;
font-weight: bold;
}
div.divPrice {
text-align : right;
white-space: nowrap;
&:before {
content: "$ "
}
}
div.yeomanPrices {
position: relative;
width : 100%;
.divTr {
&:nth-child(even) {
background-color: rgba(0, 0, 0, .05)
}
.divTd {
padding : .5em;
vertical-align: top;
line-height : 150%;
}
}
}
div.divRight {
text-align: right;
}
div#mainContainer {
position : relative;
width : var(--body-width);
margin : auto;
margin-left : auto;
margin-right: auto;
}
table.contentBody {
width: var(--body-width);
}
img.product-image {
width: 300px;
}
li {
line-height: 133%;
}
#tblFeatured {
border-top: 1px solid #611400;
}
/* Info Box WITHOUT Headings */
.CPbox1 {
color : #dfefdf;
font-weight : bold;
background-color : #611400;
xbackground-color: #7b2800;
xborder-right : 2px solid #BE6B43;
xborder-top : 2px solid #BE6B43;
}
.CPbox1 A:link {
color : #dfefdf;
font-size : 8pt;
font-weight : 400;
text-decoration: none
}
.CPbox1 A:visited {
color : #dfefdf;
font-size : 8pt;
font-weight : 400;
text-decoration: none
}
.CPbox1 A:hover {
color : #ffffff;
font-size : 8pt;
font-weight : 400;
text-decoration: underline
}
/* Info Box WITH Headings ( H = Heading cell ; B = Body cell ) */
.CPbox2 {
font-family: trebuchet, arial, sans-serif;
font-size : 12px;
color : #333333;
border : 0px solid silver;
width : 195px;
h2 {
margin: .5em 0;
}
ul {
list-style-type: none;
margin : 0;
padding : 0;
li {
padding : .75em;
border : 1px solid silver;
border-width: 1px 1px 0 1px;
&:last-child {
border-bottom: 1px solid silver;
}
}
}
a {
text-decoration: none;
color : #333333;
&:hover {
color: #888888;
}
}
}
.CPbox2H {
color : #ffffff;
xbackground-color: #7b2800;
bxackground-color: #611400;
padding : 2px
}
.CPbox2H B {
COLOR: #ffffff;
}
*/ .CPbox2H {
color : #333;
padding: 2px
}
.CPbox2H B {
COLOR: #333;
}
.CPbox2B {
COLOR: #333333;
/* BACKGROUND-COLOR: #F1EFDB; */
A:link,
A:visited {
COLOR : #333333;
FONT-SIZE : 10px;
TEXT-DECORATION: none
}
{
COLOR : #333333;
FONT-SIZE : 10px;
TEXT-DECORATION: none
}
A:hover {
COLOR : #996666;
FONT-SIZE : 10px;
TEXT-DECORATION: underline
}
}
/* Box - Page Headings */
.CPpageHead {
BORDER-BOTTOM : 2px solid #CCCCCC;
PADDING-BOTTOM: 4px
}
/* Box - Page Navigation */
.CPpageNav {
BACKGROUND-COLOR: #EEEEEE
}
/* Box - General Headings */
.CPgenHeadings {
BACKGROUND-COLOR: #EEEEEE
}
/* Box - Product Image (Home page) */
.CPhomeImg {
BxACKGROUND-COLOR: #F5F5F5;
BORDER : 0px solid #CCCCCC
}
/* Box - Product Description (Home page) */
.CPhomeDesc {
BORDER-BOTTOM: 0px solid #CCCCCC
}
/* Horizontal and Vertical lines */
.CPlines {
BACKGROUND-COLOR: #CCCCCC
}
/* Product Short Description (Except Detail page) */
.CPprodDesc {
FONT-SIZE: 1em;
}
/* Product Short Description (Detail page only) */
.CPprodDescDet {
FONT-SIZE: 11pt
}
/* Product Long Description */
.CPprodDescLong {}
/* Product Detail */
.CPprodDet {}
/* Product SKU */
.CPprodSKU {}
/* Product Price - Text Label */
.CPprodPriceT {
COLOR: #800000
}
/* Product Price - Price Value */
.CPprodPriceV {}
/* Product List Price - Text Label */
.CPprodLPriceT {
font-size: 12px;
}
/* Product List Price - Price Value */
.CPprodLPriceV {
TEXT-DECORATION: line-through
}
/* Product Sale Price - Text Label */
.CPprodSPriceT {
color: #f00;
}
/* Product Sale Price - Price Value */
.CPprodSPriceV {
color: #f00;
}
/* Free Shipping text */
.CPfreeShipMsg {
COLOR: #888888
}
/* In Stock text */
.CPinStock {
COLOR: #888888
}
/* Out of Stock text */
.CPoutStock {
COLOR: red
}
/* No Image text */
.CPnoImgT {
COLOR: #800000
}
/* Category List */
.CPcatDescList {}
/* Category Description - No products linked to it */
.CPcatDesc {}
/* Category Description - Has products linked to it */
.CPcatDescProd {
FONT-WEIGHT: bold
}
/* Option Description for "Optional" options */
.CPoptDesc {
FONT-STYLE: italic
}
/* Option Select box */
.CPoptSel,
.CPoptTxt {
FONT-FAMILY: Verdana, Arial, helvetica;
FONT-SIZE : 14px;
width : 100%;
}
/* ------------------- */
/* ADDED - Version 2.3 */
/* ------------------- */
/* Box - 2, 3 and 4 Column Layout for product list page */
.CPcolsView {
BACKGROUND-COLOR: #F5F5F5;
BORDER : 1px solid #CCCCCC
}
.CPcolsView A:link {
COLOR : #000099;
TEXT-DECORATION: none
}
.CPcolsView A:visited {
COLOR : #000099;
TEXT-DECORATION: none
}
.CPcolsView A:hover {
COLOR : #996666;
TEXT-DECORATION: underline
}
/* System Messages */
.CPsysMsg {
FONT-SIZE: 10pt
}
.CPsysMsgErr {
COLOR : red;
FONT-SIZE: 10pt
}
.CPsysMsgURL {
FONT-SIZE: 10pt
}
/* ------------------- */
/* ADDED - Version 2.4 */
/* ------------------- */
/* Highlights used in search results */
.CPhighlight {
COLOR : #000000;
BACKGROUND-COLOR: #ffff66
}
/* ------------------- */
/* ADDED - Version 2.5 */
/* ------------------- */
/* Radio Button options */
.CPoptRadio {
FONT-FAMILY: Verdana, Arial, helvetica;
FONT-SIZE : 8pt
}
/* Option Description for "Mandatory" options*/
.CPoptDescM {
FONT-STYLE: italic;
color : Red
}
.NoScreen {
display: none;
}
.contentLeft {
text-align: left;
}
#moreInfo {
text-align: left;
display : block;
}
#moreInfo h1 {
font-size : 14px;
font-weight: bold;
}
#moreInfo h2 {
font-size : 12px;
font-weight: bold;
}
#MoreInfoTab {
width : 100%;
text-align: left;
float : left;
cursor : hand;
display : block;
border-top: 1px solid gray;
}
h2#mcvisa {
position : absolute;
/* left : 650; */
right : 1em;
top : 70px;
background-repeat : no-repeat;
background-position: 0px 0px;
text-indent : -9999px;
height : math(74*.7)px;
width : math(130*.7)px;
background-image : url('/catalog/company/creditcards-logo.png');
background-size : contain;
resize : both;
/*
height : 66px;
width : 50px;
background-image : url('/catalog/usermods/visa-mc-50.jpg');
*/
}
div#facebookContainer {
position: absolute;
left : 375;
top : 50;
height : 32px;
width : 200;
border : 0px solid silver;
}
div#facebookContainer a {
position: absolute;
display : block;
}
div#facebookContainer a#caption {
font-weight : bold;
font-size : 14px;
color : #008;
text-decoration: none;
left : 0;
top : 10px;
}
div#facebookContainer a#caption:hover {
text-decoration: underline;
color : #3333FF;
}
div#facebookContainer a#icon {
width : 32px;
height : 32px;
border : 0px solid silver;
background-image : url('/catalog/userimages/facebook.png');
background-repeat : no-repeat;
background-position: 0px 0px;
left : 170;
top : 0px;
text-indent : -9999px;
}
div#facebookContainer a#icon:hover {
background-position: 0px -32px;
}
div#mailinglist {
position: absolute;
left : 375px;
top : -9100px;
height : 32px;
width : 220px;
border : 0px solid silver;
}
div#mailinglist a {
font-weight : bold;
font-size : 14px;
color : #008;
text-decoration: none;
left : 0;
top : 10px;
}
div#mailinglist a:hover {
text-decoration: underline;
color : #3333FF;
}
div#masthead {
width : 990px;
border : 0px solid red;
margin : auto;
margin-right: auto;
margin-left : auto;
padding : 5px;
height : 160px;
position : relative;
background : #fff;
h1 {
position: absolute;
left : 10;
top : 0;
border : 0px solid red;
}
div#searchForm {
position: absolute;
border : 0px solid blue;
width : 200px;
left : 810px;
top : 80px;
}
div#cartSummary {
line-height: 1.5em;
position : absolute;
border : 0px solid green;
width : 160px;
right : 1em;
top : 0;
font-size : .9em;
text-align : right;
div.cartStatus {
width: 100%;
}
h3 {
margin: .5em 0;
}
}
}
div#cartStatus2 {
line-height: 1.5em;
position : absolute;
border : 0px solid green;
width : 160px;
right : 1em;
top : 0;
font-size : .9em;
text-align : right;
h3 {
margin: .5em 0;
}
}
nav#topnavigation {
position : relative;
border : 0px dashed green;
border-bottom: 0px solid #ddd;
padding : .3rem;
overflow : hidden;
font-size : .8rem;
/* background: #dfdfdf; */
background : var(--navigation-background-default);
background : var(--navigation-background);
border-radius: 8px;
overflow : hidden;
height: 2rem;
width: var(--body-width);
margin: auto auto 1rem auto;
display: block;
position: relative;
ul {
top: 50%;
transform: translateY(-50%);
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
li {
float : left;
white-space: nowrap;
border : 0px blue solid;
a {
white-space : nowrap;
display : inline-block;
padding : 1rem 1rem;
font-size : 1.2em;
color : #000;
text-decoration: none;
border : 0px solid red;
background : transparent;
&:hover {
color : #888;
text-decoration: none;
background : rgba(255, 255, 255, .4);
}
}
}
&#navigation1 {
}
&#navigation2 {
position: absolute;
width : 300;
right : 0;
}
}
}
nav#topNavigation ul#navigation1 li.b1,
nav#topNavigation ul#navigation2 li.b1 {
border-right: 0px solid silver;
}
a.general:link,
a.general:visited {
color : #008;
font-size : 10pt;
font-family : verdana, arial, sans-serif;
text-decoration: none;
}
a.general:active,
a.general:hover {
color : #00F;
text-decoration: underline;
}
.warning {
color : red;
font-weight: bold;
}
.p13 {
font-size : 13px;
line-height: 150%;
}
a.viewButton:link,
a.viewButton:visited {
display : block;
width : 44px;
height : 14px;
border : 0px solid red;
background-image : url(/catalog/usermods/butt_view.png);
background-position: 0px 0px;
background-repeat : no-repeat;
text-indent : -99999px;
}
a.viewButton:active,
a.viewButton:hover {
background-position: 0px -14px;
}
.dimmed {
color: #999;
}
.discountedRow {
background-color: #cfefcf;
}
a.saOrderLink {
display : inline-block;
width : 16px;
height : 16px;
border : 0px solid red;
overflow : hidden;
text-indent: 32px;
margin : 0 8px;
}
a.orderEdit {
background: url(../icons/silk/pencil.png) no-repeat 0 0 transparent;
}
a.orderInvoice {
background: url(../icons/silk/page.png) no-repeat 0 0 transparent;
}
a.orderDelete {
background: url(../icons/silk/cross.png) no-repeat 0 0 transparent;
}
tr.everyother,
tr.oddRow {
background-color: #DDDDDD;
}
tr.noteveryother,
tr.evenRow {
background-color: #EEEEEE;
}
span.langOurPrice,
b.CPprodPriceV {
font-size: 1.2em;
}
span.langOurPrice {
display: none;
}
.fullWidthBarBkg {
/* background: #cccccc; */
background: var(--navigation-background-default);
background: var(--navigation-background);
}
.fullWidthBarBkg.headerBarOverMasthead {
background: var(--navigation-background-default);
background: var(--navigation-background-header);
}
.websiteWidth {
width : 980px;
margin: auto;
}
#bottomOuterContainer {
width : 100%;
margin-top: 2em;
#bottomContainer {
padding : 1em;
font-size: 12px;
#divBottomLinks {
display: flex;
font-size;
.8em;
div {
border: 0px solid red;
width : 25%;
ul {
list-style-type: none;
margin : 0;
padding : 0;
li {
line-height: 150%;
a {
text-decoration: none;
color : navy;
&:hover {
text-decoration: underline;
color : blue;
}
}
}
}
}
}
}
}
#homepageFeaturedProducts {
margin-top: 3em;
img {
width: 100px;
}
}
.headerBarOverMasthead {
padding : 4px;
height : 30px;
position : fixed;
top : 0;
width : 100vw;
z-index : 999;
transition: height .5s;
#cartStatus2 {
transition: top .5s;
position : absolute;
top : -80px;
right : 0;
}
.headerbarLinksContainer {
position: relative;
.headerbarLinks {
position : absolute;
top : -23px;
right : 0;
margin : 0;
list-style-type: none;
/*background: rgba(255, 255, 255, .7);*/
/*background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 5%, rgba(255, 255, 255, .7) 95%, rgba(255, 255, 255, 0) 100%);*/
.fa {
margin-right: .4em;
}
li {
padding : .5rem 2rem;
float : right;
.searchbox {
border-radius: 5px;
border : 1px solid gray;
padding : 4px;
}
a {
color : #333;
text-decoration: none;
&:hover {
color : #66F;
text-decoration: underline;
}
}
}
}
}
}
#tblMasthead {
margin-top: 45px;
}
#headerbarCompanyLogo {
position : relative;
top : -90px;
left : 10px;
transition: top .5s;
h1 {
background-size: 158px 62px;
width : 159px;
height : 62px;
}
}
body.nav-up {
#headerbarCompanyLogo {
top: -10px;
}
.headerBarOverMasthead {
height : 72px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .7);
#cartStatus2 {
right: 0;
top : 15px;
}
}
#tblMasthead {}
}
#tblProductOptions {
font-size: 12px;
&:after {
content: "";
display: table;
clear : both;
}
input,
select,
.CPoptDescM,
.CPbox2H {
font-size : 1.5em;
color : #333;
font-style: inherit;
}
.productoptionrow {
margin-top: 1em;
}
.pricingblock {
text-align: right;
font-size : 14px;
.listprice,
pricesavings {
font-size: .9em;
}
.productprice {
font-size: 1.4em;
color : #666 !important;
margin : 1em 0;
}
}
.prodview-layout {
width: 100%;
.product-rightColumn {
text-align: right;
}
}
}
div#carousel {
ul {
width : 790px;
height : 393px;
overflow : hidden;
margin : 0;
padding : 0;
list-style-type: none;
li {
float: left;
}
}
}
.seamlyne_button_lg,
button.cartButton {
border-radius: 5px;
padding : .25em 2em;
font-size : 12px;
font-weight : bold;
}
#divPopin {
box-shadow : 0 0 48px rgba(0, 0, 0, .5);
position : fixed;
width : 800px;
height : 600px;
overflow : hidden;
background : #FFFFFF;
border : 1px solid black;
top : 50%;
left : 50%;
transform : translateX(-50%) translateY(-50%);
border-radius: 10px;
.dialogContent {
padding : 1em;
position: relative;
}
.titlebar {
background : buttonface;
padding : 1em;
font-weight : bold;
margin : .2em;
border-radius: 8px;
}
iframe {
width : 100%;
height: 90%;
border: 0;
}
}
.cartViewLineItemDescription {
margin-bottom: 1em;
}
.clsErrText {
color: #F00;
}
.errorField,
.clsErr {
box-shadow: 0 0 4px red;
}
.lnkTooltip {
text-decoration : underline;
text-decoration-style: dashed;
background : #FF8;
font-size : smaller;
cursor : help;
}
a.fakebutton {
display : inline-block;
border-radius : 5px;
padding : .25em 2em;
font-size : 12px;
font-weight : bold;
color : rgb(0, 102, 0);
border : 1px solid gray;
text-decoration: none;
&:active {
margin: 2px 2px 0 0;
}
}
div#divSafariWarning {
border : 2px solid red;
padding : 2em;
text-align: justify;
margin : 2em;
background: #ffa;
p {
margin-bottom: 1em;
}
h2 {
font-size: 1.2em;
}
}
.trumbowyg-box {
box-sizing: border-box;
.trumbowyg-editor-box {
box-sizing: border-box;
background-color: #FFF;
.trumbowyg-editor {
padding: .5rem;
max-width: 900px;
box-sizing: border-box;
& * {
font-size: 1rem;
}
p:first-child {
margin-top: 0;
}
}
}
}