File: D:/web/groundscrewcentre/css/styles.css
.product-list-item {
border: 1px solid #CCC;
text-align: center;
padding: 10px;
margin-top: 15px;
margin-bottom: 15px;
}
/* centres image if smaller than column width */
.product-list-item .img-responsive {
margin: 0 auto;
}
.product-list-item-image {
}
.product-list-item-review {
}
.product-list-item-name {
/* padding: 4px 8px 4px 8px; */
/*height: 45px; */
line-height: 1.5em;
height: 3em;
overflow: hidden;
}
.product-list-item-price {
padding-bottom: 4px;
/* height: 30px; */
}
/* (SS,30/5/18) */
.product-list-item-sale-banner, .product-detail-sale-banner{
background-color: red;
color: white;
font-weight: bold;
margin: 5px -10px 5px -10px;
padding: 5px;
font-size: 20px;
}
.product-detail-sale-banner {
margin: 10px 0px 5px 0px;
text-align: center;
}
/* to highlight the "new" added to new product news */
.new-product {
/* font-style: italic; */
color: red;
}
/* following used by apputils for ShowProductPriceV2 */
.price-sale {
font-weight: bold;
color: red;
}
.price-std {
font-weight: bold;
color: red;
}
.price-std-crossed-out {
text-decoration: line-through;
}
.price-actual-large {
font-size: 20px;
}
.price-save {
color: red;
}
.price-save-pc {
color: red;
}
/* basket styles */
table.basket {
border-collapse: collapse;
width: 100%;
}
table.basket th, table.basket td {
font-weight: bold;
padding: 4px;
}
table.basket th {
/* color: #fff; */
/* background-color: #999; */
}
table.basket td {
/* color: #000; */
/* background-color: #E0E0E0; */
border-bottom: 1px solid #B5B5B5;
font-weight: normal;
}
.bsk-thumbnail {
border: 1px solid #B5B5B5;
width: 75px;
height: 75px;
}
.bsk-prod-name {
text-decoration: none; /* underline; */
font-weight: normal; /* bold; */
}
.bsk-options-list {
font-size: 11px;
margin-top: 3px;
}
.bsk-prod-code {
font-weight: normal;
margin-top: 10px;
}
/*
#basket-info {
float: left;
width: 75%;
}
#basket-info p {
margin: 10px 5px 10px 5px;
}
#basket-totals {
float: right;
margin-top: 10px;
}
*/
table.basket-totals {
width: 100%;
border-spacing: 5px;
text-align: right;
}
table.basket-totals th {
font-weight: normal;
}
table.basket-totals td {
font-weight: bold;
}
/* end of basket styles */
/* for custom specification table */
.table-specification td, .table-specification th {
text-align: center;
}
/* for checkout order details table */
.table-order-master th {
width: 0%;
}
.table-order-master td {
width: 100%;
}
.table-order-detail th {
}
.table-order-detail td {
}
/* recent reviews (22/5/12) */
#recent-reviews {
margin-top: 0px;
/*border: 1px solid #BBB; */
}
#recent-reviews a {
/*color: #000; */ /* to override the default anchor color */
}
#recent-reviews-header {
padding: 0px;
font-weight: bold;
margin-bottom: 0px;
}
.recent-reviews-item {
margin-bottom: 0px;
}
.recent-reviews-number {
color: #444;
text-align: right;
}
.recent-reviews-name a {
padding-left: 3px;
/*font-size: 11px; */
}
.recent-reviews-text {
font-style: italic;
margin-bottom: 2px;
}
.recent-reviews-date {
color: #666;
padding-left: 3px;
/*font-size: 11px; */
}
#recent-reviews-footer {
padding-bottom: 0px;
font-weight: normal;
margin-bottom: 0px;
}
/* (SS,2/3/15) added #latest-news-footer */
#latest-news-footer {
margin-top: 15px;
}
/* reviews (SS,1/3/15) */
.review {
}
.review-header {
}
.review-date {
}
.review-title {
font-style: italic;
font-weight: bold;
}
.review-body {
font-style: italic;
}
/* for the magic zoom tool, product detail page */
.magiczoom_thumbnailsmall {
width: 76px;
/*
border: 1px solid #CCC !important;
padding: 0;
margin-bottom: 4px;
*/
}
/* gs calculator */
/* (SS,22/8/19) */
.gsc-subtitle {
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.gsc-content-col {
float: left;
width: 50%;
margin-left: 0px;
margin-right: 0px;
}
#gsc-error-message {
float: left;
text-align: center;
color: red;
width: 100%;
}
/* (SS,19/8/19) */
.usp-container {
background-color: #4E4F4E;
}
.usp-title {
text-align: center;
font-size: 30px;
font-weight: bold;
padding: 20px;
color: white;
}
.usp-grid-item {
border: 0;
text-align: center;
padding: 20px;
margin: auto;
min-height: 300px;
/*
margin-top: 15px;
margin-bottom: 15px;
*/
}
.usp-grid-item-bg1 {
background-color: #8FB04B;
}
.usp-grid-item-bg2 {
background-color: #4E4F4E;
}
.usp-grid-item-image {
max-width: 150px;
height: auto;
display: block;
text-align: center;
margin: 0 auto;
}
.usp-grid-item-name {
/*padding: 20px; */
font-size: 20px;
color: white;
font-weight: bold;
}
.usp-grid-item-extra-text {
font-size: 12px;
color: white;
}
.app-title {
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
background-color: #4E4F4E;
padding: 20px
}
/* (SS,30/8/19) */
.app-container {
background-color: #4E4F4E;
}
.app-grid-item {
/*
border: 0;
text-align: center;
padding: 20px;
margin: auto;
min-height: 300px;
*/
/*
margin-top: 15px;
margin-bottom: 15px;
*/
text-align: center;
padding: 0px;
margin: 0px;
background-color: #4E4F4E;
border: 1px solid white;
}
/* (SS,29/1/21) removed
.app-grid-item:hover {
background-color: grey;
}
*/
.app-grid-item-image {
height: auto;
display: block;
text-align: center;
margin: 0 auto;
}
.app-grid-item-name {
padding: 0px;
font-size: 22px;
color: white;
/*font-weight: bold; */
/* background-color: #303030;/*
max-width: 600px;
margin: 0 auto;
/*margin-top: -20px; */
}
.top-grid-item-name {
padding: 0px;
padding-bottom: 10px;
font-size: 16px;
color: white;
font-weight: bold;
}
.top-grid-item-name-black {
padding: 0px;
padding-bottom: 10px;
font-size: 16px;
color: black;
font-weight: bold;
}
/* (SS,10/10/19) for product detail accordion */
[data-toggle="collapse"] .fa:before {
content: "\f139";
}
[data-toggle="collapse"].collapsed .fa:before {
content: "\f13a";
}
/* (SS,16/10/19) for customer photos */
@media (min-width: 576px) {
.card-columns {
column-count: 1;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 2;
}
}
@media (min-width: 992px) {
.card-columns {
column-count: 3;
}
}
@media (min-width: 1200px) {
.card-columns {
column-count: 4;
}
}
/* following is for star rating from rating.css https://mdbootstrap.com/plugins/jquery/rating/ */
/* following not used */
.mdb-rating .rate-popover {
color: grey; }
.mdb-rating .live {
color: black; }
.mdb-rating .oneStar {
color: #44370f; }
.mdb-rating .twoStars {
color: #96781e; }
.mdb-rating .threeStars {
color: #e2b52e; }
.mdb-rating .fourStars {
color: #f1ba12; }
.mdb-rating .fiveStars {
color: #f3cb06; }
.mdb-rating .amber-text {
color: #ffc107 !important; }
/* (08/10/2020) */
.table-basket-group {
background-color: #F3F3F3;
}
.table-basket-group-header {
background-color: #E0E0E0;
}
/* for the installation page */
.benefits {
}
.benefits_old li {
display: block;
font-size: 18px;
line-height: 2.25em;
/* padding: 10px 0 0 0; */
margin: 17px 0;
line-height: 1.4em;
}
.benefits_old li:before {
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e067"; /*"\e013"; */
font-family: 'Glyphicons Halflings';
font-size: 25px;
float: left;
margin-top: 0px;
margin-left: -30px;
color: #5cb85c; /*#a3c942; */
}
.benefits li {
display: block;
margin: 17px 0;
}
.benefits li:before {
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\f00c";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
float: left;
margin-top: 0px;
margin-left: -30px;
color: #88AA43;
}
.install-criteria {
}
.install-criteria li {
display: block;
margin: 17px 0;
}
.install-criteria li:before {
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\f069"; /* "\f06a"; "\f12a"; "\f0f3"; "\f005"; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
float: left;
margin-top: 0px;
margin-left: -30px;
color: #88AA43;
}
/* for testimonials */
.span-testimonial {
border: 1px dashed #88AA43;
padding: 15px;
margin: 10px;
}
.span-testimonial img {
/*margin-right: 10px; */
margin-left: 10px;
}
/*
.span-testimonial .img-left {
float: left;
}
.span-testimonial .img-right {
float: right;
}
*/
.span-testimonial h3, h4 {
color: #294E1C; /*#294E1C; #88AA43*/
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
/*width: 500px; */
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
/*color: #383838; */
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
/* 23/11/20) */
/* for extra small, for larger see @media below */
.banner {
font-size: 1.25rem;
/*py-2*/
padding-top: 8px;
padding-bottom: 8px;
font-weight: bold;
color: white;
margin-bottom: 0px;
}
.banner-left {
padding-left: 30px;
}
.banner2 {
font-size: 1.25rem;
/*py-2*/
padding-top: 8px;
padding-bottom: 8px;
font-weight: bold;
color: white;
margin-bottom: 0px;
font-size:0.9rem;
}
.banner-left2 {
padding-left: 10px;
}
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
/*1rem = 16px*/
.banner {font-size:1.5rem;}
.banner-left {padding-left: 20px;}
.banner2 {font-size:1.2rem;}
.banner-left2 {padding-left: 10px;}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
.banner {font-size:2rem;}
.banner-left {padding-left: 30px;}
.banner2 {font-size:1.5rem;}
.banner-left2 {padding-left: 30px;}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.banner {font-size:2.5rem;}
.banner-left {padding-left: 50px;}
.banner2 {font-size:2.1rem;}
.banner-left2 {padding-left: 30px;}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.banner {font-size:3rem;}
.banner-left {padding-left: 50px;}
.banner2 {font-size:2.5rem;}
.banner-left2 {padding-left: 40px;}
}