﻿/*------------------------------------------------------------
Theme Name: Finanza Child Theme
Theme URI: http://demo.goodlayers.com/finanza
Description: Finanza Wordpress Theme
Author: Goodlayers
Author URI: http://www.goodlayers.com
Version: 1.01
Template: finanza-v1-01
*/
@import url("/wp-content/themes/finanza-v1-01/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */

/* Some cascade issues (explicitly styled header colours, for example)
prevent content in block-level links from changing colour. */
a:active *, a:hover *, a:focus *, a:link *, a:visited * {
    color: inherit;
}

/* Move menu to left, as per Steve's request. */
.gdlr-navigation-wrapper {
	margin-left: 32px;
	float: left;
}

.gdlr-social-share {
	/* Mostly this is so the social share buttons don't get lost at the bottom of a huge pile of vehicle applications in columnar layout. */
	float: left;
	clear: left;
}

/* Cartanium stuff */

li.widget {
	list-style: none;
	/* Make it match .gdlr-widget. */
	margin-bottom: 9px;
}

.widgettitle {
	/* Make it match .gdlr-widget-title. */
	color: #4c4e51;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 25px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cartanium-search-input {
	/* A bit of a mistake in the default styling, I'd have to say.
	They apply `max-width: 100;` but that makes >100% when there's padding. */
	box-sizing: border-box;
}

/* This selector doesn't need this sort of specificity to identify it;
it just needs the specificity to override other styles. */
.gdlr-page-title-wrapper.cartanium-page-title-wrapper {
	/* Take away the 56px padding, because we're going to put a search box in here,
	and the search box needs to be flush with the top of the wraper.
	This way the search box overlaps the banner image just like it does on the home page. */
	padding: 0;
}

.gdlr-page-title-wrapper.cartanium-page-title-wrapper:after {
	/* This is the first time I've ever used a clearfix for right floats only.
	It clears the right-floated eight-column page title,
	without clearing the left-floated search sidebar,
	which is supposed to hang down beyond the title wrapper
	into the content area. */
	content: '';
	display: block;
	clear: right;
	line-height: 0;
}

.gdlr-page-title-container.cartanium-page-title-container {
	padding: 56px 0;
}

.gdlr-page-title-container.cartanium-page-title-container .gdlr-page-title.cartanium-page-title {
	/* For some reason this is needed to make the title line up with the content below it. */
	margin-left: 16px;
	/* There are a couple background images used in rotation;
	we don't know which one it'll be, so surround the black text with a halo
	to offset it against a potentially dark image. */
	text-shadow: 0 0 6px #fff, 0 0 18px #fff, 0 0 48px #fff, 0 0 48px #fff, 0 0 48px #fff, 0 0 48px #fff, 0 0 48px #fff, 0 0 48px #fff;
}

.equivalent-part-numbers tr > :not(:first-child),
.product-specifications tr > :not(:first-child) {
    padding-left: 0.5em;
}

.equivalent-part-numbers tr > :not(:last-child),
.product-specifications tr > :not(:last-child) {
    padding-right: 0.5em;
}

.product-specifications th {
	background: inherit;
	color: inherit;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.product-specifications, .equivalent-part-numbers {
	margin-bottom: 18px;
}

/* We just magically know that this is the search box wrapper. Hooray for magical themes. */
.home .gdlr-left-sidebar {
    background-color: #eee;
    /*box-shadow: 0 3px 6px rgba(0,0,0,.4);*/
    z-index: 100;
    /* Drop this out of its box so it overlaps whatever comes afterwards. */
}

.cartanium-sidebar .gdlr-item-start-content, #cartanium-sidebar .gdlr-item-start-content {
	padding-top: 20px !important;
}

.home #gdlr-parallax-wrapper-1 {
	background-size: cover;
	background-position: center;
}

@media (min-width: 768px) {
	.home #content-section-1 .gdlr-color-wrapper {
		padding: 0;
		overflow: visible;
	}

	.home #content-section-1 .container {
		/* Because we use absolute positioning to drop the search box down past the top hero banner wrapper,
		make its container relative. */
		z-index: 1;
	}

	.home #content-section-1 .three.columns {
		/* There are mysterious clearfixes everywhere, and I can't get rid of them.
		Use this fake float instead. */
	    position: absolute;
	}
}

/* Make room beside the slideshow for the search forms. */
@media (min-width: 768px) and (max-width: 959px) {
	.cartanium-plugin-is-active.home .ms-slide-layers {
		margin-left: 256px;
		width: 512px !important;
		max-width: 512px !important;
	}
}

@media (min-width: 960px) and (max-width: 1139px) {
	.cartanium-plugin-is-active.home .ms-slide-layers {
		margin-left: 33.33333%;
		margin-right: 0;
		width: 66.66666% !important;
		max-width: 66.66666% !important;
	}
}

@media (min-width: 1140px) {
	.cartanium-plugin-is-active.home .ms-slide-layers {
		margin-left: 200px;
	}
}

/* Category tiles */
.category-info-item {
	text-align: center;
	margin-bottom: 2em;
}

.category-info-item-title {
	font-weight: bold;
}

.category-info-item-details {
	font-size: smaller;
}

.category-info-item .image-wrapper {
	/* Make the image centred along with the text. */
	display: inline-block;
}

.search-results .image-wrapper, 
.dynamic-kit-items .image-wrapper {
	margin-bottom: 1em;
}

/* Responsive styling for category tiles. */

@media (min-width: 560px) {
	.category-info-item {
		vertical-align: top;
	}

	.category-info-item {
		display: inline-block;
	}
}

@media (min-width: 960px) {
	/* Three columns. */
	.category-info-item {
		width: 31%;
		margin-right: 3.5%;
	}

	.category-info-item:nth-child(3n) {
		margin-right: 0;
	}
}

@media (min-width: 560px) and (max-width: 959px) {
	/* Two columns. */
	.category-info-item {
		width: 48%;
		margin-right: 4%;
	}

	.category-info-item:nth-child(2n) {
		margin-right: 0;
	}
}

/* Product detail page */

/* Logo sizing */
.summary-product-logo-wrapper-motive-gear, .summary-product-logo-wrapper-motive-gear-transmission {
    width: 101px;
    height: 49px;
}

.summary-product-logo-wrapper-motive-gear-performance-differential {
    width: 141px;
    height: 40px;
}

.summary-product-logo-wrapper-richmond-gear {
    width: 150px;
    height: 41px;
}

.summary-product-logo-wrapper-excel-from-richmond {
    width: 115px;
    height: 43px;
}

.product-info-section {
	/* Matches bottom margin of paragraphs. */
	margin-bottom: 20px;
	/* Most of the time these will be columns; hang them from the same horizontal lines. */
	vertical-align: top;
}

#california-

.full-product-thumbnails {
    margin: 1em 0 !important;
}

.full-product-thumbnails .image-wrapper {
    float: left;
    margin-right: .5em;
}

.product-single-container {
    overflow: hidden;
}

.product-single-container h1 {
    font-size: 2em;
}

.product-single-container h2 {
    font-size: 1.6em;
}

.product-single-container h3,
.product-single-container h4,
.product-single-container h5 {
    font-size: 1.3em;
}

/* Special styling for certain columns. */

/* Wanting the h3 to stand out a bit and needed a top margin for the 
titles in the far right column */
.product-single-container h3 {
	font-weight: 800;
	margin-top: 1em;
}

#Ubuntu,
#equivalent-part-numbers {
	/* 1em at the standard font size. */
	padding: 15px;
	box-sizing: border-box;
}

#equivalent-part-numbers {
	background: #eee;
	box-shadow: 0 3px 6px rgba(0,0,0,.4);
}

#california-proposition-65 {
    margin-top: 15px;
}

/* Because we added a background colour to the interchange wrapper,
we can't see the lines in the table anymore. Make them darker. */
#equivalent-part-numbers td,
#equivalent-part-numbers th {
	border-color: #ddd;
}

/*#dynamic-kits {
	border: 1px solid #ccc;
}*/

/* Product image & padding mage doesn't need to be as large. 
Title needs some extra space */
#dynamic-kits .summary-product-info {
    padding: 0;
}

#dynamic-kits .image-wrapper {
    max-width: 100px;
}

/* Needed a bit of seperation between products */
/*.dynamic-kits section {
    border-bottom: 1px solid #cbcaca;
}

.dynamic-kits section:last-child {
    border-bottom: none; 
}
*/
#dynamic-kits,
#no-associated-parts-container {
    box-sizing: border-box;
    padding: 1.7em;
    border: 1px solid #ccc;
}

/* Make specs and interchange tables full-width */
.product-specifications,
.equivalent-part-numbers {
	width: 100%;
}

.cartanium-sidebar .gdlr-item-start-content {
	padding: 1em !important;
}

#short-desc-downloads .gdlr-button {
	margin-top: 2em;
}

.product-information {
	clear: left;
}

/* Responsive styling. */

@media (min-width: 960px) and (max-width: 1119px) {
	/* The negative margin trick doesn't quite work for percentages;
	it makes the wrapper 103.5% wide,
	and all the widths and right margins of the child columns are scaled up 3.5% to take advantage of that 

extra space. */
	.product-columns-wrapper {
		margin-right: -4%;
	}

	.product-info-section:not(#long-description):not(#downloads):not(#short-description) {
		float: left;
		width: 46%;
		/*width: 46.15384615%; 48% ÷ 104% */
		margin-right: 3.84615385%; /* 4% Ã· 104% */
	}

	#dynamic-kits {
		/* Holy cow, the selectors inside :not() add specificity?
		Well, let's blow that two-ID-one-class selector above out of the water. */
		float: right !important;
	}
}

@media (min-width: 1120px) {
	.product-columns-wrapper {
		margin-right: -3.5%;
	}

	.product-info-section:not(#long-description):not(#downloads):not(#product-line-description):not(#short-description) {
		float: left;
		width: 28.9%;
		/*width: 29.95169082%; 31% Ã· 103.5% */
		margin-right: 3.38164251%; /* 3.5% Ã· 103.5% */
	}

	#dynamic-kits {
		float: right !important;
	}

	/* Two columns for the product line description. */
	#product-line-description {
		clear: left;
		/* width: 63.28502415%; 65% ÷ 103.5% */
 
		/* width: 200%; */ 
	}

	/* Steve wanted the size just a bit smaller*/
	ul.vehicle-applications {
	    font-size: .7em;
	}
}

/* Where to Buy plugin */

/* Make the location form a nice compact, centred block above the map and the nationals. */
#location-form {
    display: table;
    margin: 1em auto;
    text-align: center;
    overflow: hidden;
    font-size: 1.25em;
}

.location-form-field,
.location-form-divider {
	display: table-row;
}

.postal-code-submit {
	/* Finanza adds weird bottom margin to button elements.
	Get rid of it because it's throwing off the layout of our lovely form. */
	margin-bottom: 0;
}

/* Put horizontal rules to the left and right of the divider. */
.location-form-divider-label {
    display:  inline-block;
    position: relative;
}

.location-form-divider-label::before, .location-form-divider-label::after {
    position:  absolute;
    content: '';
    height: 0;
    top:  50%;
    border-top: 1px solid #ccc;
    width: 2000px;
}

.location-form-divider-label::before {
    right: 100%;
    margin-right: 1em;
}

.location-form-divider-label::after {
    left:  100%;
    margin-left: 1em;
}

.location-form-field input, .location-form-field button {
	font-size: inherit;
	font-family: inherit;
}

/* Intrinsic ratio box, AKA Uncle Dave's Ol' Padded Box */
.local-stores-map-wrapper {
	height: 0;
	position: relative;
}

@media (max-width: 942px) {
	.local-stores-map-wrapper {
		/* 3:2 ratio */
		padding-bottom: 66.6666666%;
	}
}

@media (min-width: 943px) {
	.local-stores-map-wrapper {
		/* 2:1 ratio */
		padding-bottom: 50%;
	}
}

#local-stores-map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.stores-wrapper {
	margin: 2em 0;
}

.stores {
	list-style: none;
	margin-left: 0;
}

.store {
	box-sizing: border-box;
	margin-bottom: 1.5em;
	padding: 1em;
	background-color: #f1f1f1;
}

.store-logo {
	max-width: 120px;
	margin-left: 15px !important;
}

.store-info-website {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 751px) {
	/* Two columns. */
	.stores:after {
		content: '';
		display: table;
		clear: both;
	}

	.store {
		float: left;
		width: 48%;
	}

	.store:nth-child(odd) {
		margin-right: 4%;
	}
}

.local-store-name:before {
	font-size: 0.75em;
	font-weight: bold;
	/* Hard to centre this thing on the line of text. Manually adjust it. */
	position: relative;
	top: -0.1em;
}



/* -----------------------------------------------------------------------------------
NINJA FORMS
----------------------------------------------------------------------------------- */

/* Why there is an inset style on the input fields, I do not know. */
input {
    border-style: none !important;
}

/* Darkening the border */
input, textarea, select {
	border: 1px solid #c0c0c0 !important;
}

/* Forcing more than 6px padding on the fields */
input,
input[type="text"], 
input[type="email"],
input[type="password"], 
textarea {
	padding: 1em;
}

/* Finanza parallax background image */

.gdlr-color-wrapper, .gdlr-parallax-wrapper {
	    background-position: center center;
	    background-size: cover;
}

#white-text h1,
#white-text h2,
#white-text h3,
#white-text h4,
#white-text h5,
#white-text h6,
#white-text p {
	color: #fff !important;
}

.contact-form-address-fields {
    width: 25%;
    float: left !important;
    clear: none !important;
    padding-right: 1em;
}

.no-right-padding {
	padding-right: 0 !important;
}

@media (max-width: 768px) {

	.contact-form-address-fields {
	    width: 100%;
	    float: none !important;
	    padding-right: 0 !important;
	}

	.city-container,
	.state-container {
		padding: 0;
	}

}



/* -----------------------------------------------------------------------------------
FEB 2019 UPDATE TO EZLINK SEARCH RESULTS STYLING
----------------------------------------------------------------------------------- */

.search-results .summary-product {
    border: 5px solid #d6d6d6;
}


/*#post-9 .search-results .section-container, .gdlr-item-start-content, .gdlr-parallax-wrapper, .gdlr-color-wrapper {
	padding-top: 0px;
}*/

#post-9 h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	margin-bottom: 2px;
	font-weight: 400;
}
#post-9 p {
	margin-bottom: 0px;
}

/*li.widget, #Home_Page_Search_Form .widget {
	padding: 0.5em !important;
}*/

.home .widget_cartaniumsearchform_keyword_search,
.home .widget_cartaniumsearchform_inventory_search {
    padding: .5em !important;
}

.widget_cartaniumsearchform_keyword_search,
.widget_cartaniumsearchform_inventory_search {
    padding: 2em !important;
}

.search-results .summary-product {
	border: 5px solid #d6d6d6;
}

p{
	margin-bottom:5px;
}
.search-results .summary-product {
	margin: 5px 0;
}

.search-results .breadcrumbs {
	margin: 5px 0;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 5px;
	line-height:1;
}

.widgettitle {
	line-height:1;
	margin-bottom: 5px;
}

.product-info-section {
	font-size:0.75rem;
}
.fancybox-close {
	top: 15px;
}

.clearfix:before,
.clearfix:after {
   content: '\0020';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

#product-images .image-sizer{
	margin-top:2px;
}
