/*
html, body {
font-family: Verdana, Calibri, Helvetica, sans-serif;
font-size: 18px;
line-height: 24px;
color: #444;
}
*/
/* Modifications to basic css:
=============================================================================*/
/*
#content-wrapper {
background: #D2C0B4;
background: #F2E4DB;
}
*/
h1, h2, h3, h4, h5, h6 {
color: #784F26;
padding-left:0.5rem;
}
body {
min-height: 100vh;
color: #372D23;
/* padding-bottom: 23rem; for sticky footer */
}
/* page headings with h1 */
.pgHdng {
background: linear-gradient(to bottom, #F4D89D, #fff);
font-family: 'Lucida Handwriting';
font-size:48px;
text-shadow: -2px -2px #fff;
padding-top: 0.5rem;
padding-left: 1rem;
}
h2, h3 {
margin-top: 2rem;
padding:0.5rem;
background: linear-gradient(to right, #EFDECD, #fff);
max-width:500px;
}
.footerH3 {
background: linear-gradient(to left, #EFDECD, #fff);
}
.jmbtrn-1 { /* jumbotron line 1 */
line-height: 1.5rem;
font-size: 1.4rem;
color: #5A3E20;
text-align: center;
}
.jmbtrn-2 { /* jumbotron line 2 */
line-height: 1.8rem;
font-size: 1.6rem;
color: #5A3E20;
text-align: center;
}
.ftr {
position: fixed;
bottom: 0;
width: 100%;
height: 100px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background: linear-gradient(to right, #D5B493, #F9EEE3) !important;
margin: 1rem auto 0 !important;
}
/* footer:
=============================================================================*/
#footer {
/* for sticky footer:
position: fixed;
bottom: 0; */
max-width: 1100px;
background: #F4E1CE;
}
/* Modifications to jumbotron:
=============================================================================*/
.jumbotron {
margin: 0 auto;
width: 100%;
background-color: transparent;
background-image: url("./images/jumbotronDefault.png");
background-repeat: no-repeat !important;
background-position: center;
/* background-size: contain; rather crop width, and keep constant height. */
}
/* Modifications to nav:
=============================================================================*/
.navbar {
margin: 0 auto !important;
max-width: 1100px;
background: linear-gradient(to right, #F9EEE3, #D5B493) !important;
background-repeat: no-repeat !important;
background-size: contain;
}
.navbar .navbar-brand {
background: transparent;
color: #7A3E20;
font-size: 24px;
}
.nav-link {
font-size: 1.2rem;
font-weight: normal !important;
color: #7A3E20 !important;
}
.nav-link:hover {
background: #fff !important;
}
.navbar-item {
background: #fff !important;
color: #333 !important;
margin-top: 0.3rem;
}
.dropdown-item:hover, .dropdown-item:focus {
background-color: #FEF4DE;
}
.dropdown-divider {
border-top:1px solid #ccc;
}
/*
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
color: #333 !important;
margin-top: 0.3rem;
}
*/
/* Modifications to Carousel:
=============================================================================*/
.carousel-control-next,
.carousel-control-prev {
border: none;
opacity: .5;
}
.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
opacity: .7;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
width: 50px;
height: 50px;
border: 3px solid #666;
background-color: grey;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * *
* card: override "min-width" in _card.scss:141 *
* so that in narrow window the cards do not *
* shrink to useless, but stack instead. *
* * * * * * * * * * * * * * * * * * * * * * * * * */
.card {
min-width: 190px !important;
max-width: 300px !important;
margin: 1rem 0;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * *
* col-sm-4: prevent shrinking to useless width, *
* make them stack instead.
* * * * * * * * * * * * * * * * * * * * * * * * * */
.col-sm-4 {
min-width: 240px;
}
/* row margin right + left: */
.row {
margin-left: 0.4rem;
margin-right: 0.4rem;
}
/* wrapper for pages with scrolling procduct list table with sticky th rows: */
#head-container {
position: fixed;
top: 0;
z-index: 9999 !important;
width: 98%;
height: 100px;
background: #fff;;
border: 0px solid green;
}
/* testimonial paragraph between top and bottom image: */
.testim {
max-width: 350px;
position: relative;
z-index: 1;
background : #FEF4DE;
margin: 0;
padding: 1rem 1rem 1rem 2rem;
}
/* sticky table header */
.header {
position: sticky;
top: 0;
line-height: 1.1rem;
padding: 0.5rem 0.2rem;
}
.header th {
height: 60px;
font-weight: 600;
}
.nrCell {
text-align: right;
padding-right: 5px;
}
/* Zebra striping */
tr:nth-of-type(even) {
background: #fff;
}
tr:nth-of-type(odd) {
background: #fef4de;
}
th {
background: #f4d89c;
/* font-size: 1.2em;
font-weight: bold; */
/* padding: 6px; avoid conflict with other style sheets? */
/* border: 1px solid #fee; */
}
td {
text-align: left;
vertical-align: top;
/* padding: 6px; avoid conflict with other style sheets? */
/* border: 1px solid #ccc; */
}
th, td {
border: 0px solid grey;
padding: 5px;
}
/* Separators
-------------------------------------------------- */
hr { border-top: 1px solid silver; }
.sep10 { height: 10px; border: none; }
.sep20 { height: 20px; border: none; }
.sep30 { height: 30px; border: none; }
.sep40 { height: 40px; border: none; }
.sep50 { height: 50px; border: none; }
.sep60 { height: 60px; border: none; }
.sep70 { height: 70px; border: none; }
.sep80 { height: 80px; border: none; }
.sep90 { height: 90px; border: none; }
.sep100 { height: 100px; border: none; }
/* Indent
-------------------------------------------------- */
.indent_10 { margin-left: 10px; }
.indent_20 { margin-left: 20px; }
.indent_30 { margin-left: 30px; }
.indent_40 { margin-left: 40px; }
.indent_50 { margin-left: 50px !important; }
.indent_60 { margin-left: 60px; }
.indent_70 { margin-left: 70px; }
.indent_80 { margin-left: 80px; }
.indent_90 { margin-left: 90px; }
.indent_100 { margin-left: 100px; }
.indent_150 { margin-left: 150px; }
.indent_200 { margin-left: 200px; }
/* general stuff:
=============================================================================*/
.col-sm-4 {
padding: 1rem 2rem !important;
}
.card {
border: 2px solid #ddd !important;
}
.prod {
margin-top: 2rem !important;
}
.img200 {
display: block;
margin: 0 auto;
width: 200px;
height: auto;
}
.img120 {
display: block;
margin-left: 0px;
width: 120px;
height: auto;
}
.descr {
font-size: 1.15rem;
padding: 0 5px;
}
.sellPack {
float: right;
}
.prc120 {
font-size: 1.5rem;
font-weight: bold;
}
.prc200 {
font-size: 1.7rem;
font-weight: bold;
}
.prc120box {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 60, 0.7);
border: 1px solid grey;
border-radius: 10px;
padding: 0 0.2rem;
}
.prc120reg {
font-size: 1.3rem;
line-height: 1.3rem;
padding-top: 0.2rem;
/* text-decoration: line-through; */
float: right !important;
font-weight: normal;
color: #999;
/* add ' shadow' to mimick stroke:
text-shadow: 0 0 3px #255; */
/* add 'stroke' to the font; support may not be consistent! https://css-tricks.com/adding-stroke-to-web-text/
color: silver;
-webkit-text-fill-color: silver; /* Will override color (regardless of order) * /
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666; */
}
.prc120spc {
font-size: 2.2rem;
line-height: 1.8rem;
font-weight: bold;
color: #c33;
/* add ' shadow' to mimick stroke: */
text-shadow: 0 0 10px #fff;
}
/* place-holder color:
=============================================================================*/
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: silver !important;
opacity: 1 !important; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: silver;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: silver;
}
/* ========== R E V I E W T H E S E ================================== */
/* input and readonly fields */
.readOnlyFld_R {
background: transparent;
border: none;
text-align: right;
}
.nInputFld_R {
text-align: right;
}
.readOnlyFld_L, .readOnlyFld_R, .sInputFld disabled, .nInputFld disabled
.btn.disabled, .btn:disabled {
border: 0px solid #ddd !important;
background: #aaa !important;
/* color: #999 !important; */
}
.btn-md {
font-size: 1.2rem;
}
/* ===================================================================== */