/*
Theme Name: Gabriel Mobile Product Search
Theme URI: http://www.pushtwentytwo.com/
Description: Custom developed WordPress theme for the Gabriel Mobile Product Search.
Version: 1.0
Author: pushtwentytwo
License: GNU General Public License

*/

@font-face {
	font-family: 'eurostile';
	src: url('fonts/EurostileLTStd-Demi.otf');
}

body {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555; padding: 0px; margin: 0px; background: #fff}

img {border: none;}

#container {width: 100%; max-width: 640px; min-width: 300px; margin: 0px auto; padding: 0px;  background: #fff}

#header {height: 56px; background: url('images/bg_header.png') top repeat-x; border-bottom: 2px solid #ee3124}
#header h1 {margin: 0px; padding: 0px; display: block; float: left; padding-left: 20px; width: 120px; padding-top: 13px; position: absolute; z-index: 5; text-align: center;}

#nav {width: 180px; text-align: right; padding-top: 16px; padding-right: 25px; float: right; position: relative;}
#nav a {
	background: url('images/btn_bg_repeat.png') top repeat-x;
	border: 2px solid #f8f8f8;
	border-radius: 5px;
	display:inline-block; 
	padding: 0px 6px; 
	line-height: 20px;
	text-transform: uppercase;
	color: #b7231c;
	text-decoration: none;
	font-weight: bold;
	margin-left: 6px;
} 

#nav a:first-child {margin-left: 15px;}

#main {min-height: 340px; padding-top: 1px;}

/* HOME PAGE */

/* .home {background: url('images/bg_home.jpg') top center no-repeat #efede5;} */
.normal {background: #FFF;}
.normal #content {background: #FFF; min-height: 260px}

#content a, #content span.link-like {color: #e52c23}

#searchBox {background: url('images/bg_search.png') bottom repeat-x #e92d23; margin: 0 15px 0px 15px; border: 2px solid #ee3124; border-radius: 5px;}
#searchBox h2, .header-box h2 {text-align: center; font-family: 'eurostile', Arial, Helvetica, sans-serif; padding: 25px 10px 5px 10px; border-radius: 3px 3px 0 0; margin: 0px; color: #e92d23;}
#searchBox h3 {color: #FFF; font-weight: normal; margin: 0px; padding:0px; margin-bottom: 5px;}

#searchBox .inner {padding: 10px;}
#searchBox select {display: block; width: 100%; margin-bottom: 10px; padding: 9px 7px; font-size: 15px; border-radius: 5px; border: 1px solid #666;}
#searchBox input {display: block; width: 160px; margin-bottom: 10px; padding: 9px 7px; font-size: 15px; border-radius: 5px; border: 1px solid #666; float:left}

#searchBox #partWrapper, #searchBox .partWrapper {background: url('images/bg_header.png') bottom repeat-x #ee3124; border-radius: 0px 0px 3px 3px;}
#searchBox .inner span.btn {
	background-image: linear-gradient(#fff, #dcdcdc);
	border: 2px solid #f8f8f8;
	border-radius: 5px;
	display:block; 
	text-align: center; 
	margin: 1px; 
	padding: 7px 5px;
	color: #b7231c;
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
}

#searchBox #goBTN {width: 50px; float:right; line-height: 18px;}
#searchBox #pv_part, #searchBox #oem_part, #searchBox #com_part {margin-bottom: 0px;}
#partSearchTable {margin-bottom: 7px; border-collapse: collapse}


#searchBox.alone h2 { border-radius: 3px; background: none; background-color: #fff; text-align: center;}
.home #content .search-callout{margin-top: 0;}

#searchBox.no-border {
  border: none;
}

.indvsearchbox {margin-top: 10px!important;}


#footer {color: #887e79; text-align: center; padding: 5px 0px;}
/* .page-footer {background:  url('images/bg_home.jpg') bottom center no-repeat; border-top: 1px solid #bbbbbb;} */
.home-footer div {padding: 10px;}
.page-footer div {padding: 15px;}

#searchFooter {text-align:center; padding: 20px 0px; background: #FFF}
#searchFooter a {color: #e52c23; text-transform:uppercase}

#content .search-callout {text-align: center; margin-top: 10px; margin-bottom: 0px; padding: 0 20px;}
#content .search-callout h3 a {color: #FFF; font-size: 16px; font-weight: bold; text-decoration: none}
#content .search-callout h3 {margin: 0px 0px 0px 0px;}
#content .search-callout .desc {font-size: 11px; font-style: italic; color: #FFF;}
.search-callout-spacer {height: 5px; clear: both}

#content .search-callout .search-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 180px;
    width: 100%;
    max-width: 400px;
    display: inline-block;
	position: relative;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 0 2px 7px #333;
    margin-bottom: 15px;
}

.search-image a {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
}

#content .search-callout .light-vehicle {background-image: url('images/lightweight-vehicle.jpg');}
#content .search-callout .heavy-duty {background-image: url('images/heavy-duty-vehicle.jpg');}

/* MAIN MENU */
#main-menu {display: none; position: absolute; z-index: 6; top: 41px; right: 4%; background: url('images/main_menu_top.png') 254px top no-repeat}
#main-menu .inner {background: #000; background: rgba(0,0,0,0.85); width: 270px; padding: 5px 15px; border-radius: 7px; margin-top: 8px;}
#main-menu ul {list-style-type: none; margin: 0px; padding: 0px;}
#main-menu li {margin: 15px 0px; padding: 1px 0px;}
#main-menu li a {width: 254px; }
#nav #main-menu a:first-child {margin-left: 0px;}
#nav #main-menu a {
	background: url('images/btn_bg_repeat_dark.png') top repeat-x;
	color: #FFF;
	border: 1px solid #696969;
	padding: 2px 6px;
	/*text-transform: none;*/
	font-size: 12px;
}
#nav #main-menu li.current-menu-item a,#nav #main-menu a:hover {
	background: url('images/btn_bg_repeat_dark_active.png') top repeat-x;
	border: solid 1px #8b8b8b;	
}
#main-menu-close-overlay {position: absolute; z-index: 4; top: 0px; left: 0px; width: 100%; height: 100%; display: none;}

/* YMM SEARCH */

#ymmResults, #partResults, #hdResults {color: #000;}

#searchedFor .inner {padding: 8px 15px;}
#searchedFor .inner select {width: 100%;}
#searchedFor h2 {line-height: 1.25em; font-weight: bold; margin: 0px; padding: 0px;}
#searchedFor h2 span {font-weight: normal; font-size: 16px;}
#searchedFor .label {margin-bottom: 5px; color: #666666; margin-top: 8px;}
#searchedFor select {padding: 8px 7px; border: 1px solid #666; border-radius: 5px; font-size: 15px;}

#searchResults {background: #FFF; min-height: 200px}



#searchResults .result {padding: 7px 10px; margin: 0px 0px}
#searchResults .result .pic img {border: 1px solid #CCC;}
#searchResults .result .pic {padding-right: 10px;}
#searchResults .line {border-bottom: 1px solid #CCC; margin: 0px 0px;}
#searchResults .groupHeader {
	color: #000; 
	font-weight: bold; 
	background: url('images/bg_search_header.png') bottom repeat-x; 
	padding: 10px 0px 8px 0px; 
	text-align: center; 
	border-bottom: 2px solid #ee3124;
	font-size: 15px;
}
#searchResults .oddRow {background: #f8f7f2;}
.result {line-height: 1.25em;}
.result .info {width: 180px;}
#content .result h3 {color: #e52c23; margin: 0px; padding: 0px; font-size: 15px; margin-bottom: 3px;}
#content .result h3 a {color: #e52c23; text-decoration: none;}
#content .result h4 {color: #000; margin: 0px; padding:0px; font-size: 15px;}
#content .result h4 a  {color: #000; text-decoration: none;}
#content .result .details {margin-top: 5px; color: #666666}
.result .appNotes {margin-top: 5px; font-style: italic;}



.result .next {width: 40px;}
.result .next a {display: inline-block; margin-right: 10px; height: 60px; width: 40px; background: url('images/circular_arrow.png') right center no-repeat;}
.result table {width: 100%;}
.result table td.pic {width: calc(100% * (1/6));}
.result table td.info {width: calc(100% * (4/6));}
.result table td.next {width: calc(100% * (1/6)); text-align: right;}

#content #partSearch #searchResults #smallerResultNums span {font-size: 12px;}

.headerFilter {border-collapse: collapse; width:100%}
.clearFilterCol {text-align:right; padding-bottom: 2px; vertical-align:top}
.clearFilterCol2 {text-align:right;  vertical-align:top}

/* DETAILED PRODUCT SPECS PAGE */
#specsHeader {/*background: url('images/bg_home.jpg') center -100px no-repeat; background-size: cover;*/ padding: 15px 0px 14px 0px; border-bottom: 1px solid #CCC;}
#specsHeader h2 {line-height: 1.0em; font-weight: bold; margin: 0px; padding: 0px; color: #000; margin: 0px 0px; padding: 0px 10px}
#specsHeader h2 span {font-weight: normal; font-size: 12px; color: #666666;}
#specsPage .picHolder {text-align:center; padding: 18px 0px; position: relative; width: 300px; margin: 0 auto;}
#specsPage {background: #FFF;}
#specsPage .picHolder img {width: 298px; border: 1px solid #CCC}
#specsPage .picHolder img.notFound {width: 80px; }
#specsBody {margin: 0px 10px;}
#specsBody .lbNote {font-size: 10px; font-style: italic; margin: 5px 0;}

#specsBody p, #specsBody h2, #specsBody h3 {padding-left: 3px; padding-right: 3px}
#specsBody h3 {padding-bottom: 5px; border-bottom: 1px solid #CCC; color: #000; margin-bottom: 10px;}
#specsBody .conBox {padding-bottom: 5px;}
#specsTable .spec, .specsTable .spec {font-weight: bold; padding-right: 10px;}
#specsTable, .specsTable {margin: 0px 3px;}
#specsTable td, .specsTable td {vertical-align: top;}
#specsBody #whereUsed {width: 95%; margin: 0px auto 0px auto; border-collapse: collapse; border-bottom: 1px solid #CCC}
#specsBody #whereUsed {text-align:left;}
#specsBody #whereUsed .notes {font-style: italic;}
#specsBody #whereUsed th {color: #333; border-bottom: 1px solid #CCC;}
#specsBody #whereUsed tr.evenRow td {background: #f8f7f2;}
#specsBody #whereUsed td, #specsBody #whereUsed th {padding-left: 5px; padding-right: 5px; text-align:left}

#specsBody #whereUsed tr.attribs td {border-top: 1px solid #CCC; padding-top: 7px; padding-bottom: 7px; }
#specsBody #whereUsed tr.attribs td:first-child {border-left: 1px solid #e6e6e6;}
#specsBody #whereUsed tr.attribs td:last-child {border-right: 1px solid #e6e6e6;}
#specsBody #whereUsed tr.notesRow td {padding-bottom: 7px; padding-top: 3px; font-size: 11px; border: 1px solid #e6e6e6; border-top: none; border-bottom: 1px solid #CCC}

/* PAGINATION */
.paginationLinks {margin-left: 0px; padding-left: 0px; text-align:center}

.paginationLinks li {float: left; list-style-type: none; margin: 0px 4px; border: 1px solid #DDD;}
.paginationLinks a, .paginationLinks span.disabledLink {background: url('images/silver_grad.jpg') top repeat-x; text-decoration: none;  display:block; padding: 5px 7px; }
 
.paginationLinks span {display:block; padding: 5px 7px;}
.paginationLinks span.disabled {color: #999999; /*font-weight: bold;*/ background: url('images/silver_grad.jpg') top repeat-x;}
.paginationLinks li.paginationTitle {border: 1px solid transparent; color: #666666; display: none;}
.paginationLinks a:hover { text-decoration: underline}
/*.paginationLinks li.currentPagination {}*/
.paginationLinks li.currentPagination a {font-weight: bold; background: #E6E6E6}



/* BOOKMARK MESSAGES */

.bookmarkMSG {display:none; position: absolute; z-index: 10; top: 0px;}
#iphoneMSG {margin-top: 220px; width: 100%; text-align: center;}
#androidMSG {margin-top: 290px;}

/* GENERAL */
.error {font-weight: bold; color: #000; font-style:italic; text-align:center;}
.clearBoth {clear: both;}
.highlight {background: #FF9;}

/* FOOTNOTES */
a.small, span.footnote a {font-size: 10px; vertical-align: text-top; font-weight: normal; color: #555555; line-height: 12px}

#content .result h3 .footnote a {color: #555555;}

#footnoteList {padding: 10px 15px; border-top: 1px solid #CCC;}
#footnoteListSpecs {padding: 5px 5px 20px 5px;}
#footnoteList h5, #footnoteListSpecs h5 {font-size: 13px; margin: 0px 0px 5px 0px;}
#footnoteList p, #footnoteListSpecs p {margin: 5px 0px; font-size: 11px; font-style: italic;}

#footnotesSpacer {background: #FFF; height: 30px;}


/* HD VEHICLE SEARCH */

/*#hdResults #searchedFor h2 {}*/
#hdResults #searchedFor h2 span.series {font-size: 16px; font-weight: bold}

#hdResults #searchedFor .inner span.btn {
	background: url('images/btn_bg_repeat.png') bottom repeat-x #fff;
	border: 1px solid #bbb;
	border-radius: 5px;
	display:block; 
	text-align: center; 
	margin: 1px; 
	padding: 9px 5px;
	color: #b7231c;
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
	width: 40px;
}

#order {margin-top: 3px; width: 70px;}

#hdResults #com_make {width: 100px;}
#hdResults #com_series {width: 100px;}

#searchedFor input#oem_part, #searchedFor input#com_part {font-size: 15px; padding: 9px 7px; border: 1px solid #666; border-radius: 5px; width: 194px; margin-right: 3px;}

.headerSearchAgain p.label {margin: 0px; padding: 0px;}
.headerSearchAgain td {padding: 0px}
.headerSearchAgain td select {margin-right: 3px;}

.search-break {
	background: url('images/bg_search_header.png') center repeat-x; 
	height: 16px;
	text-align: center; 
	border-bottom: 2px solid #ee3124;
	font-size: 15px;
}

.hd-result {padding: 15px 25px;}
.hd-result .header {clear: both; margin-bottom: 5px;}
.hd-result .header .oem-num, .hd-result .header .comp-num {float: left; width: 200px; font-weight: bold; font-size: 14px;}
.hd-result .header .loc {float: right; color: #666666}
.hd-result .vehicle {margin-bottom: 10px; clear:both; color: #666666}

/*.hd-result .images {margin-bottom: 10px;}
.hd-result .images img {border: 1px solid #CCC; clear: both; display: block; width: 80px; height: 60px;}
.hd-result .images .gab-part {float: left; width: 120px;}
.hd-result .images .upgrade-part {float: right; width: 120px;}
.hd-result .images .val {font-weight: bold;}
.hd-result .images .part-num {margin-top: 2px;}*/

.hd-result .images {width: 100%; margin-bottom: 10px; border-collapse: collapse}
.hd-result .images td {width: 50%; vertical-align:top}
.hd-result .images td.gab-part { text-align: left; padding-right: 25px;}
.hd-result .images td.upgrade-part { text-align: left;}
.hd-result .images .label {color: #000;}
.hd-result .images .pic img {border: 1px solid #CCC; width: 80px; height: 60px; margin: 2px 0px; padding: 5px 20px; background: #FFF}
.hd-result .images .part-num a {font-weight: bold; text-decoration: none; font-size: 14px;}
.hd-result .images div.na {border: 1px dashed #CCC; width: 80px; height: 60px; margin: 2px 0px; padding: 5px 20px; text-align: center; color: #AAA; line-height: 60px}

.hd-result .add-info {color: #666;}
.hd-result .add-info .label {font-weight: bold;}
.hd-result .add-info .val {font-style: italic;}

#specsBody #whereUsed td.hdMake, #specsBody #whereUsed td.hdSeries {padding: 7px;}
#specsBody #whereUsed td.addDesc {padding: 0px 7px 7px 7px; font-style: italic; font-size: 0.9em;}
#specsBody #whereUsed tr.mainRow {border-top: 1px solid #CCC;}
#specsBody .hdWhereUsed tbody {border-left: 1px solid #CCC; border-right: 1px solid #CCC;}
#specsBody .hdWhereUsed tbody td {vertical-align: top;}

.hint {color: #999; font-size: 0.9em;}

#mobile-home-buttons {
	text-align: center; 
	max-width: 270px; 
	margin: 20px auto 0px auto;
}

#mobile-home-buttons img {
	width: 100%;
	display: block;	
}

.button-spacer {
	height: 5px;
}

.text-right {
	text-align: right;
}


#specsPage .picHolder img.image-thumbs {
	width: 100%;
}

.row.thumb-list {
	padding: 5px 0;
	text-align: center;
}

.thumb-ctn {
	display: inline-block;
	width: 75px;
	margin: 13px 9px;
}

/* 12 COL RESPONSIVE GRID SYSTEM */
.row::after {
	display: table;
	clear: both;
	content: '';
	float: none;
}

[class*="col-"] {
	float: left;
	padding: 0 2px;
	box-sizing: border-box;
}

.col-1 {width: calc(100% * (1/12));}
.col-2 {width: calc(100% * (2/12));}
.col-3 {width: calc(100% * (3/12));}
.col-4 {width: calc(100% * (4/12));}
.col-5 {width: calc(100% * (5/12));}
.col-6 {width: calc(100% * (6/12));}
.col-7 {width: calc(100% * (7/12));}
.col-8 {width: calc(100% * (8/12));}
.col-9 {width: calc(100% * (9/12));}
.col-10 {width: calc(100% * (10/12));}
.col-11 {width: calc(100% * (11/12));}
.col-12 {width: calc(100% * (12/12));}


.pop-code-overlay {width: 114px; height: 67px; position: absolute}
.pop-code-overlay.PopCode_N {background: url('images/flags/flag-new.png') left top no-repeat; }
.pop-code-overlay.PopCode_FF {background: url('images/flags/flag-coming-soon.png') left top no-repeat; }

#pv_search table td.prodImg a.pop-code-overlay {position: absolute; width: 140px; height: 60px; margin-top: -10px; margin-left: -10px; display: none}

.status-message {margin: 20px auto 10px auto; text-align: center; width: 300px;}
.status-message .inner {display: inline-block; padding: 7px 15px; background: #f8f7f2; border: 1px solid #b2b2b2}
.status-message .icon {vertical-align: middle; padding-right: 10px;}
.status-message .text {font-size: 13px; font-style: italic; text-align: left;}



















.home .search-image {
    display: none!important;
}

.home #content .search-callout{
		padding: 10px 20px;
}