File: D:/web/circ.itp/css/styles.css
@charset "utf-8";
/* CSS Document */
.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;
font-size: larger; /* to replaced the big tag */
/* height: 30px; */
}
/* (SS,1/6/17) */
.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;
}
/* (SS,21/2/24) */
.stock-info {
/*
display: inline;
white-space: nowrap;
text-align: center;
vertical-align: baseline;
font-weight: 700;
line-height: 1;
*/
padding: 0.3em 0.6em 0.3em;
font-size: 130%;
color: #fff;
border-radius: 0.4em;
background-color: #d9534f;
}
/* 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;
}
.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;
}
/* (SS,6/7/22) replaced 75% with 100% */
#basket-info {
float: left;
width: 100%; /* 600px */
}
#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;
padding-right: 10px; /* (SS,11/6/24) */
}
table.basket-totals td {
font-weight: bold;
}
/* end of basket styles */
/* for custom specification table */
.table-specification td, .table-specification th {
text-align: center;
}
/* (SS,28/6/24) for delivery tables */
.table-delivery-pallet td, .table-delivery-pallet th {
text-align: center;
}
.table-delivery-matrix td, .table-delivery-matrix th {
text-align: center !important;
}
.table-delivery-matrix th, .table-delivery-pallet th {
vertical-align: bottom;
}
/* (SS,12/6/24) apply smaller font-size for specification table no smaller devices */
/* following is iPhone 15 Pro Max width */
@media (max-width: 430px) {
.table-specification td, .table-specification th {
font-size: 0.9rem;
}
}
/* following is iPhone 15 width */
@media (max-width: 393px) {
.table-specification td, .table-specification th {
font-size: 0.8rem;
}
}
/* following is iPhone SE width */
@media (max-width: 375px) {
.table-specification td, .table-specification th {
font-size: 0.7rem;
}
}
/* (SS,28/6/24) apply smaller font-size for delivery matrix table no smaller devices */
/* following is iPhone 15 Pro Max width */
@media (max-width: 800px) {
.table-delivery-matrix td, .table-delivery-matrix th {
font-size: 0.7rem;
}
.table-delivery-pallet td, .table-delivery-pallet th {
font-size: 0.7rem;
}
}
@media (max-width: 430px) {
.table-delivery-matrix td, .table-delivery-matrix th {
font-size: 0.5rem;
}
.table-delivery-pallet td, .table-delivery-pallet th {
font-size: 0.5rem;
}
}
/* 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) */
/* modified to make similar to new trustpilot versions below */
#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-top: 0px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
*/
}
.recent-reviews-title {
/*
font-size: 18px;
padding-top: 5px;
padding-bottom: 10px;
font-weight: bold;
*/
font-weight: bold;
/* font-style: italic; */
/* (SS,13/5/24) added following to truncate to 2 lines, from https://albertwalicki.com/learn/solutions/how-to-limit-text-to-n-lines */
/* (SS,18/6/24) changed to 1 line */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /* number of lines to show */
line-clamp: 1;
-webkit-box-orient: vertical;
}
.recent-reviews-text {
/*
margin-bottom: 2px;
*/
font-size: small;
/* (SS,13/5/24) added following to truncate to 5 lines, from https://albertwalicki.com/learn/solutions/how-to-limit-text-to-n-lines */
/* (SS,17/6/24) changed from 5 to 3 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
line-clamp: 3;
-webkit-box-orient: vertical;
}
.recent-reviews-date {
/*
color: #777;
padding-left: 3px;
float: right;
*/
font-size: small;
/*font-weight: bold; */
}
.recent-reviews-name, .recent-reviews-name a {
/*
padding-left: 0px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 12px;
*/
font-size: small;
font-weight: bold;
}
#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;
}
/* recent reviews for Trustpilot (13/5/21) */
#recent-reviews-tp {
margin-top: 0px;
}
#recent-reviews-header-tp {
padding: 0px;
font-weight: bold;
font-size: 18px;
margin-top: 5px;
margin-bottom: 10px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
text-align: center;
}
#recent-reviews-header-tp a {
text-decoration: none; /* remove underline shown after link clicked */
color: #000; /* to override the default anchor color */
}
#recent-reviews-header-tp a:hover {
text-decoration: none; /* remove underline from hover over */
color: #428bca;
}
.recent-reviews-item-tp {
margin-top: 0px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.recent-reviews-title-tp {
font-size: 18px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
}
.recent-reviews-title-tp a {
color: black;
}
.recent-reviews-text-tp {
margin-bottom: 2px;
}
.recent-reviews-date-tp {
color: #777;
padding-left: 3px;
float: right;
}
#recent-reviews-footer-tp {
padding-bottom: 0px;
font-weight: normal;
margin-bottom: 0px;
}
/* reviews (SS,1/3/15) */
.review {
}
.review-header {
}
.review-date {
}
.review-title {
font-style: italic;
font-weight: bold;
}
.review-body {
font-style: italic;
}
/* (SS,27/2/24) */
.review-footer {
margin-top: -20px;
}
/* (SS,21/2/24) added following for larger glyphicon star size used in reviews */
/* (SS,25/4/24) replaced 1.7 with 1.5 in Bootstrap 5 */
.review-stars-big {font-size: 1.5em}
/*
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
*/
.review-rating-text-big {
font-size: 1.3em;
vertical-align: bottom; /* (SS,25/4/24) changed from top to bottom */
}
/* (SS,25/4/24) added following for Bootstrap 5 */
.review-stars-full {
/*color: var(--bs-orange); */
color: #FFA41C; /* from Amazon */
margin-right: 0.1em;
}
.review-stars-empty {
color: var(--bs-gray-300);
margin-right: 0.1em;
}
/* for the magic zoom tool, product detail page */
.magiczoom_thumbnailsmall {
width: 76px;
/*
border: 1px solid #CCC !important;
padding: 0;
margin-bottom: 4px;
*/
}
/* (SS,26/1/16) */
.main-section {
margin-bottom: 10px;
}
/* (SS,15/9/15) */
.bottom-section {
padding-top: 15px;
}
/* btu calculator */
.btu-calc-subtitle {
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.btu-calc-content-col {
float: left;
width: 33.33%; /* (SS,22/2/24) was 50% */
margin-left: 0px;
margin-right: 0px;
}
/* (SS,22/2/24) old to be deleted */
.btu-calc-content-col-old {
float: left;
width: 50%;
margin-left: 0px;
margin-right: 0px;
}
/* (SS,22/2/24) */
.btu-calc-content-50 {
float: left;
width: 50%;
margin-left: 0px;
margin-right: 0px;
}
.btu-calc-content-50s {
display:block;
width: 150px;
}
#btu-error-message, #btu-view-suitable {
float: left;
text-align: center;
color: red;
width: 100%;
}
#btu-view-suitable a{
color: black;
text-decoration: underline;
}
/* (SS,21/2/24) used in BTC calculator to pad left and right */
.btu-padding {
padding-left: 2px;
padding-right: 2px;
}
/* (SS,24/2/24) following used in the compact modal */
.btu-padding-compact {
padding-left: 0px;
padding-right: 0px;
margin-bottom: 10px;
}
/* ordered list with heading used to size the number sequence */
.ol-with-heading {
font-size: 24px;
}
.ol-with-heading p {
font-size: 14px;
}
/* diagonal banner */
.ribbon_wrapLt,
.ribbon_wrapRt,
.ribbon_banner,
.ribbon_wraps { position:absolute; }
.ribbon_banner {
-webkit-box-shadow:0px 3px 5px rgba(0,0,0,.5);
-moz-box-shadow:0px 3px 5px rgba(0,0,0,.5);
box-shadow:0px 3px 5px rgba(0,0,0,.5);
}
.ribbon_wraps {
-webkit-transform-origin:100% 50%;
-moz-transform-origin:100% 50%;
-ms-transform-origin:100% 50%;
-o-transform-origin:100% 50%;
transform-origin:100% 50%;
}
.ribbon_wrapLt,
.ribbon_wrapRt {
-webkit-transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
transform-origin:50% 100%;
}
.ribbon_wraps {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.ribbon_wrapLt {
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg);
}
.ribbon_wrapRt {
-webkit-transform:rotate(225deg);
-moz-transform:rotate(225deg);
-ms-transform:rotate(225deg);
-o-transform:rotate(225deg);
transform:rotate(225deg);
}
.ribbon_holder { /*as overlay*/ position:absolute; left:-6px; top:-6px;
width:150px; height:150px; overflow:hidden; background:transparent; }
.ribbon_holder { /*with image*/ position:relative; left:0px; top:0px;
width:300px; height:375px; overflow:hidden; background:transparent 6px 6px no-repeat;}
.ribbon_wraps { width:204px; height:48px; left:-60px; top:-24px; overflow:hidden; }
.ribbon_wrapLt { width:30px; height: 6px; left:-15px; bottom:50%; background:#622; }
.ribbon_wrapRt { width:30px; height: 6px; right:-15px; bottom:50%; background:#622; }
.ribbon_banner { width:204px; height:24px; right:0px; top:0px; line-height:24px;
text-align:center; font-weight:bold; font-family:arial;
font-size:12px; color:#fff; background:#c00; }
/* (SS,14/5/24) old Bootstrap 3 version commented out
.usp2 {
}
.usp2 li {
display: block;
font-size: 18px;
line-height: 2.25em;
margin: 17px 0;
line-height: 1.4em;
}
.usp2 li:before {
content: "\e067";
font-family: 'Glyphicons Halflings';
font-size: 25px;
float: left;
margin-top: 0px;
margin-left: -30px;
color: #5cb85c;
}
*/
.usp3 {
}
.usp3 li {
display: block;
line-height: 1.75em;
}
/* (SS,6/3/24) new Bootstrap 5 version using Font Awesome */
.usp3 li:before {
content: "\f058";
font-family: 'Font Awesome 6 Pro';
font-weight: 900; /* chooses solid version as mentioned in solid.css */
font-size: 1.25em;
float: left;
margin-left: -30px;
color: var(--bs-success);
}
/* (SS,20/11/15) */
.visit-other-site-section-1, .visit-other-site-section-2 {
color: white;
text-align: center;
background: #001d38;
padding: 15px;
padding-bottom: 20px;
margin-top: 20px;
margin-bottom: 0px;
border-radius: 6px;
}
.visit-other-site-section-1 h3, .visit-other-site-section-2 h3 {
background: 0; /* did try "initial" but it didn't work in IE */
margin-top: 0px;
padding-top: 0px;
font-weight: bold;
/* text-shadow: 2px 2px white; */
text-shadow: 1px 1px 2px black, 0 0 15px black, 0 0 5px darkblue;
font-size: 20px;
}
.visit-other-site-section-1 {
background: transparent url(/banner/banner-door-hardware-v3-site-link-background-3.jpg) no-repeat 0 0;
background-size: 100%;
}
.visit-other-site-section-2 {
background: transparent url(/banner/banner-yard1.jpg) no-repeat 0 0;
background-size: 100%;
}
@media (min-width: 768px) {
.visit-other-site-section-1 {
background-size: 120%;
}
.visit-other-site-section-2 {
background-size: 120%;
}
}
/* (SS,4/5/16) */
@media (max-width: 400px) {
.btn-section {
font-size: 15px;
padding: 5px;
margin: -10px;
}
}
@media (max-width: 500px) {
.visit-other-site-section-1, .visit-other-site-section-2 {
margin-bottom: -10px;
}
.visit-other-site-section-1 h3, .visit-other-site-section-2 h3 {
font-size: 18px;
}
}
.btn-strong {
font-weight: bold;
}
/* (SS,11/2/16) */
#product-detail-sharing {
margin-top: 10px;
margin-bottom: 10px;
}
/* (SS,5/6/17) sale banner */
/* help from https://stackoverflow.com/questions/35647044/boostrap-how-to-stick-a-button-over-an-image-when-re-sizing */
.banner-sale{
margin-top: 10px;
}
/*
.banner-sale-btn-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.banner-sale-btn-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
/*height: 50%;
}
*/
/* (SS,22/4/24) used to turn the paint option square images into circular ones, see https://www.webfx.com/blog/web-design/circular-images-css/ */
.circular--square { border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-bottom-left-radius: 50% 50%; }
/* (SS,10/6/24) */
.product-option-error {
color: red;
}
/* (SS,17/6/24) */
/* (SS,17/6/24) added following to truncate to 3 lines, from https://albertwalicki.com/learn/solutions/how-to-limit-text-to-n-lines */
/*
.highlights-product-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
*/
/* (SS,20/6/24) */
.blog-post-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
/* (SS,28/4/25 */
.bestseller-text-3l {
/* font-size: small; */
/* line-height: 1.3 !important;*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
.bestseller-text-4l {
/*
font-size: small; */
line-height: 1.3 !important;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
}