FruitBank/Presentation/Nop.Web/Themes/CarHaven/Content/css/responsive-min-1001.css

1006 lines
17 KiB
CSS

@media all and (min-width: 1001px) {
:root {
--layout-outer-width: 984px;
}
/*** GLOBAL STYLES ***/
html:not(.html-home-page) .master-wrapper-content,
.html-home-page .topic-block,
.html-home-page .home-page-category-grid,
.html-home-page .news-list-homepage,
.html-home-page .home-page-polls,
.html-home-page .home-page-product-grid {
width: var(--layout-outer-width);
margin-inline: auto;
}
.center-2 {
float: right;
width: 73%;
}
.side-2 {
float: left;
width: 25%;
}
.page {
text-align: left;
}
.inputs {
text-align: left;
}
.inputs label {
display: inline-block;
width: 265px;
margin: 0 10px 0 0;
text-align: right;
}
.inputs input[type="text"],
.inputs input[type="email"],
.inputs input[type="tel"],
.inputs input[type="password"],
.inputs select {
min-height: 40px;
}
.inputs .option-list li {
margin: 0 10px 0 0;
}
.center-1 .buttons {
border-radius: var(--theme-border-radius);
}
.center-2 .inputs label {
width: 136px;
}
.inputs.accept-consent label {
width: auto;
}
.page-title a + h1 {
float: left;
}
.link-rss {
display: block;
float: right;
margin: 6px 0 0;
}
/*** Homepage Categories TABLES ***/
/* Target only the home page category grid */
.home-page-category-grid .category-item {
overflow: hidden;
}
.home-page-category-grid .item-box .picture,
.home-page-category-grid .item-box .picture a {
position: static;
margin: 0;
}
.home-page-category-grid .item-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
/* Style for each item */
.home-page-category-grid .item-grid .item-box {
width: 100%;
margin: 0;
grid-column: span 1;
grid-row: span 1;
}
.home-page-category-grid .item-box:nth-child(5n + 4),
.home-page-category-grid .item-box:nth-child(5n + 5) {
grid-column: span 1;
grid-row: span 1;
}
/* Every first item in a set of 5 spans 2 columns and 2 rows */
.home-page-category-grid .item-box:nth-child(5n + 1) {
grid-column: span 2;
grid-row: span 2;
}
/*** GLOBAL TABLES ***/
.cart tr {
width: auto;
margin: 0;
}
.cart label {
display: none;
}
.order-details-page .data-table tr {
width: auto;
margin: 0;
}
.order-details-page .data-table label {
display: none;
}
/*** HEADER ***/
.header-menu-toggle,
.close-header-menu {
display: none;
}
.header {
background: var(--white);
color: var(--dark);
}
.header .header-upper {
width: var(--layout-outer-width);
margin: auto;
padding: 10px 0;
}
.header-upper {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-selectors-wrapper {
float: left;
border: none;
padding: 0;
}
.header-selectors-wrapper > div {
width: auto;
min-width: 100px;
margin: 0 12px 0 0;
line-height: 43px;
}
.header-selectors-wrapper select {
height: 25px;
padding: 4px;
font-size: 12px;
}
.language-list {
text-align: left;
}
.header-links-wrapper {
float: right;
padding: 0;
}
.header-links li {
margin: 0 16px;
}
.header-links a,
.header-links span {
line-height: 1;
text-transform: none;
}
#topcartlink {
display: inline-block;
width: auto;
margin: 0;
padding: 0 18px;
}
#topcartlink > a {
line-height: 45px;
}
.flyout-cart {
position: absolute;
top: 100%;
right: 0;
z-index: 100;
width: 300px;
box-shadow: 0 0 2px rgba(0,0,0,0.25);
background-color: #fff;
}
.flyout-cart.active {
display: block;
}
.mini-shopping-cart {
padding: 12px;
text-align: left;
font-size: 14px;
}
.mini-shopping-cart .count {
padding: 5px 0 15px;
color: #444;
}
.mini-shopping-cart .count a {
margin: 0 2px;
font-weight: bold;
color: #444;
}
.mini-shopping-cart .items {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 0 0 20px;
}
.mini-shopping-cart .item {
overflow: hidden;
padding: 10px 0;
}
.mini-shopping-cart .picture {
float: left;
width: 70px;
text-align: center;
}
.mini-shopping-cart .picture a {
display: block;
position: relative;
overflow: hidden;
}
.mini-shopping-cart .picture a:before {
content: "";
display: block;
padding-top: 100%;
}
.mini-shopping-cart .picture img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
}
.mini-shopping-cart .picture + .product {
margin: 0 0 0 80px;
}
.mini-shopping-cart .name {
margin: 0 0 10px;
font-size: 14px;
}
.mini-shopping-cart .name a {
color: var(--theme-color);
}
.mini-shopping-cart .name a:hover,
.mini-shopping-cart .name a:focus {
color: var(--active-color);
}
.mini-shopping-cart .attributes {
margin: 5px 0;
color: #444;
}
.mini-shopping-cart .totals {
margin: 0 0 12px;
font-size: 14px;
color: #444;
}
.mini-shopping-cart .totals strong {
font-size: 16px;
color: #444;
}
.mini-shopping-cart .buttons {
margin: 0 0 5px;
}
.mini-shopping-cart button[type="button"] {
display: inline-block;
border: none;
background-color: var(--theme-color);
padding: 10px 20px;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
.mini-shopping-cart button[type="button"]:hover,
.mini-shopping-cart button[type="button"]:focus {
background-color: var(--active-color);
}
.header-lower {
display: table;
width: 100%;
}
.header-logo {
display: table-cell;
text-align: left;
vertical-align: middle;
font-size: 0;
}
.search-box form {
justify-content: flex-end;
}
.search-box input.search-box-text,
.search-box .search-box-button,
.search-box .search-box-category {
height: 40px;
}
.search-box input.search-box-text {
width: 440px;
}
/*** NAVIGATION ***/
.header-menu {
background: var(--dark);
}
.header-menu .top-menu {
position: relative;
z-index: 5;
width: var(--layout-outer-width);
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
.top-menu .sublist .parent-links {
display: none;
}
.menu-toggle,
.sublist-toggle {
display: none;
}
.header-menu > ul {
display: block !important; /* prevents toggle display:none on resize */
font-size: 0;
}
.header-menu > ul.mobile {
display: none !important;
}
.header-menu > ul > li {
display: inline-block;
padding: 0 15px;
vertical-align: middle;
position: relative;
}
.header-menu > ul > li:not(:last-child)::after {
content: "-";
display: block;
position: absolute;
right: 0;
top: 50%;
translate: 50% -50%;
font-size: 22px;
color: white;
}
.header-menu > ul > li:first-child {
border-left: none;
}
.header-menu > ul > li > a {
display: block;
padding: 5px 10px;
line-height: 20px;
font-size: 18px; /*reset zeroing*/
color: var(--white);
cursor: pointer;
}
.header-menu > ul > li > a:hover,
.header-menu > ul > li > a:focus {
color: var(--active-color);
}
.header-menu .sublist {
display: none;
position: absolute;
width: 200px;
box-shadow: 0 0 2px rgba(0,0,0,0.2);
background-color: #fff;
padding: 10px 0;
text-align: left;
}
.header-menu .sublist li {
position: relative;
}
.header-menu .sublist li a {
display: block;
position: relative;
padding: 10px 20px 10px 30px;
font-size: 16px;
color: var(--dark);
}
.header-menu .sublist li:hover > a,
.header-menu .sublist li:focus > a {
background-color: #f6f6f6;
color: var(--theme-color);
}
.header-menu ul li:hover > .sublist,
.header-menu ul li:focus > .sublist,
.header-menu ul li:focus-within > .sublist {
display: block;
}
.header-menu .sublist .sublist {
top: -10px;
left: 100% !important;
}
/*** FOOTER ***/
.footer {
/*background: #888 url(../images/footer-bg.jpg) center center no-repeat;*/
background-size: cover;
background-blend-mode: multiply;
}
.footer-upper {
width: var(--layout-outer-width);
padding: 55px 10px;
}
.footer-upper:after {
content: "";
display: block;
clear: both;
}
.footer-links {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
padding-block: 40px;
}
.footer-block {
width: calc(33% - 20px);
margin: 0;
text-align: center;
}
.footer-block .list {
margin: 0;
}
.newsletter-email input[type="text"] {
width: 200px;
}
.newsletter-email .newsletter-subscribe-button {
min-width: 100px;
padding: 0 5px;
}
.newsletter-validation .field-validation-valid {
text-align: left;
}
.footer-lower {
position: relative;
width: var(--layout-outer-width);
padding: 25px 5px;
display: flex;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.footer-lower > div {
width: 30%;
margin: 0;
}
.footer-lower > div:first-child {
text-align: left;
}
.footer-lower > div:last-child {
text-align: right;
}
.footer-block .title strong {
font-size: 22px;
}
.newsletter-email input[type="email"] {
width: 220px;
}
.theme-selector {
float: left;
margin: 0 0 0 15px;
}
/*** COLUMN ***/
.sidebar-toggle-btn,
.sidebar-close-btn {
display: none !important;
}
.product-filter .filter-title {
background-image: none;
font-size: 20px;
}
.product-filter .filter-title strong {
font-weight: bold;
}
.block {
float: none;
width: auto;
margin: 0 0 20px;
}
.block .title {
margin: 0;
background-image: none;
cursor: auto;
}
.block .title strong {
font-weight: bold;
}
.block .listbox {
display: block;
border-bottom: none;
}
.block a.product-picture {
display: inline-block;
position: relative;
width: 30%;
margin: 0 0 0 -15px;
vertical-align: middle;
text-align: center;
}
.block a.product-name {
vertical-align: middle;
}
.block a.product-picture + a.product-name {
width: 70%;
}
.block a.product-picture + a.product-name:before {
display: none;
}
/*** CATEGORY ***/
.sub-category-grid .item-box {
width: 30%;
}
.sub-category-grid .item-box:nth-child(2n+1) {
clear: none;
}
.sub-category-grid .item-box:nth-child(3n+1) {
clear: both;
}
.breadcrumb {
margin: 10px 0 10px;
}
.item-box .actual-price {
font-size: 18px;
}
.item-box .buttons {
text-align: left;
}
.center-1 .item-box {
width: calc(33.33% - 3%);
margin: 0 1.5% 50px;
}
.center-1 .product-grid .item-box:nth-child(2n+1) {
clear: none;
}
.center-1 .product-grid .item-box:nth-child(3n+1) {
clear: both;
}
/*** PRODUCT PAGE ***/
.gallery {
float: left;
width: 52%;
}
.picture-gallery .picture {
width: auto;
}
.video-gallery {
float: left;
width: auto;
}
.overview {
float: right;
width: 46%;
}
.rental-attributes {
overflow: hidden;
}
.rental-attributes .attribute-item {
float: left;
margin: 0 20px 0 0;
}
.rental-attributes .datepicker {
width: 160px;
text-align: left;
}
.attribute-squares li {
margin: 0 10px 10px 0;
}
.product-details-page .title {
text-align: left;
}
/*** PRODUCT REVIEWS ***/
.product-review-item .review-title {
max-width: 850px;
}
.write-review .review-rating div.name-description {
width: 265px;
margin: 0 5px 0 0;
text-align: right
}
.product-review-item .review-text {
display: table;
width: 100%;
table-layout: fixed;
}
.product-review-item .avatar {
display: table-cell;
vertical-align: top;
width: 120px;
}
.product-review-item .avatar img {
max-width: 100%;
}
.product-review-item .text-body {
display: table-cell;
vertical-align: top;
}
.product-review-item .avatar + .text-body {
padding: 0 0 0 20px;
}
/*** WISHLIST & COMPARE LIST ***/
.compare-products-page .page-title {
margin: 0 0 -1px;
}
.compare-products-page .clear-list {
position: absolute;
top: 7px;
right: 0;
}
.compare-products-table .full-description td {
display: table-cell;
}
.compare-products-table .full-description td p {
margin-top: 0;
}
/*** TOPICS ***/
.center-1 .topic-block-title {
text-align: center;
}
.topic-page p {
text-align: justify;
}
/*** REGISTRATION, LOGIN, ACCOUNT ***/
.gender span {
margin: 0 10px 0 0;
}
.gender span > * {
margin: 0 5px 0 0;
}
.date-of-birth select + select {
margin: 0 0 0 11px;
}
#check-availability-button {
display: block;
margin: 10px auto;
}
.login-page .customer-blocks {
overflow: hidden;
}
.login-page .new-wrapper {
float: left;
width: 49%;
margin: 0;
}
.login-page .returning-wrapper {
float: right;
width: 49%;
}
.login-page .returning-wrapper .form-fields {
min-height: 200px;
padding: 30px 0 0;
}
.login-page .returning-wrapper .inputs label {
width: 23%;
}
.login-page .returning-wrapper input[type="text"],
.login-page .returning-wrapper input[type="email"],
.login-page .returning-wrapper input[type="password"] {
width: 300px;
}
.login-page .buttons {
text-align: center;
}
.address-list-page .section,
.order-list-page .section,
.return-request-list-page .section {
display: block;
width: auto;
margin: 0 0 40px;
}
.address-list-page .buttons,
.order-list-page .buttons {
position: absolute;
top: 5px;
right: 10px;
}
.avatar-page .message-error,
.avatar-page .buttons {
text-align: left;
}
.registration-page .vat-note {
margin-left: 275px;
}
.registration-page .buttons {
text-align: center;
}
.customer-info-page .vat-note,
.customer-info-page .vat-status,
.customer-info-page .email-to-revalidate-note {
margin-left: 150px;
}
.customer-info-page .vat-status {
display: inline-block;
}
/*** SHOPPING CART ***/
.shopping-cart-page .cart-options {
overflow: hidden;
}
.shopping-cart-page .checkout-attributes {
float: left;
width: 565px;
margin: -30px 0 15px;
}
.shopping-cart-page .checkout-attributes .option-list > li {
margin: 5px 10px 5px 0;
}
.shopping-cart-page .selected-checkout-attributes {
float: right;
max-width: 395px;
margin: 15px 0;
}
/*** CHECKOUT ***/
.order-progress {
margin: -30px 0 50px;
}
.checkout-page .address-item {
width: 31%;
}
.checkout-page .terms-of-service {
text-align: center;
}
.payment-info .info {
padding: 30px 15px;
}
.payment-info .info td:first-child {
width: 265px !important;
margin: 0 10px 0 0;
text-align: right;
}
.payment-info .info td:only-child {
width: 100% !important;
}
.order-review-data .title,
.order-details-area .title,
.shipment-details-area .title {
text-align: left;
}
.opc .order-review-data ul {
text-align: left;
}
/*** SEARCH & SITEMAP ***/
.advanced-search .price-range {
margin-left: 114px;
}
/*** BLOG & NEWS ***/
.comment-list {
margin: 0 0 50px;
}
.news-list-homepage .news-items {
overflow: hidden;
text-align: left;
}
.news-list-homepage .news-item {
float: left;
width: 31.33333%;
margin: 0 1% 30px;
}
.news-list-homepage .news-item:nth-child(3n+1) {
clear: both;
}
.news-list-homepage .news-item:only-child {
float: none;
width: auto;
margin: 0 0 30px;
}
.news-list-homepage .news-head {
text-align: left;
}
.news-list-homepage .news-body {
text-align: justify;
}
/*** FORUM & PROFILE ***/
.forum-breadcrumb {
margin: -30px 0 30px;
}
.current-time {
float: right;
}
.forum-search-box {
float: left;
}
.forum-search-box .advanced {
text-align: left;
}
.forum-search-box .advanced a {
line-height: normal;
}
.forums-table-section td {
min-width: 150px;
}
.forums-table-section td:first-child {
min-width: 90px;
}
.forums-table-section .view-all {
text-align: right;
}
.topic-actions .pager.upper {
display: block;
max-width: 400px;
}
.forum-table .forum-details,
.forum-table .topic-details {
min-width: 225px;
}
.forum-table td {
padding: 20px;
}
.forum-edit-page textarea,
.private-message-send-page textarea {
width: 600px;
height: 250px;
}
.private-message-send-page .bb-code-editor-wrapper {
display: inline-block;
width: 400px;
margin: 10px 0;
vertical-align: middle;
}
}