@charset "UTF-8";
/* Custom additions and overrides to JQM's defaults */

p {
	color:#575757;
}

.home_ico {
	background-image: url("images/glyph_home_ico.png");
	display:block;
	float:left;
	width:22px;
	height:22px;
	margin:0.5em!important;
}

.info_ico {
	background-image: url("images/glyph_info_ico.png");
	display:block;
	float:right;
	width:22px;
	height:22px;
	margin:0.5em!important;
}

.home_ico,
.info_ico {
	background-size: 22px 22px; /* To ensure higher-resolution versions fit. */
}

.custom_icon {
	background-color:transparent!important;
	box-shadow:none!important;
	-moz-box-shadow:none!important;
	-webkit-box-shadow:none!important;
	border:0;
}

.custom_icon span {
	display:none;
}

.ui-bar-a {
	background: url(images/shine.png), -moz-linear-gradient(top, #29783c 0%, #184723 100%); /* FF3.6+ */
	background: url(images/shine.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#29783c), color-stop(100%,#184723)); /* Chrome,Safari4+ */
	background: url(images/shine.png), -webkit-linear-gradient(top, #29783c 0%,#184723 100%); /* Chrome10+,Safari5.1+ */
	background: url(images/shine.png), -o-linear-gradient(top, #29783c 0%,#184723 100%); /* Opera 11.10+ */
	background: url(images/shine.png), -ms-linear-gradient(top, #29783c 0%,#184723 100%); /* IE10+ */
	background: url(images/shine.png), linear-gradient(to bottom, #29783c 0%,#184723 100%); /* W3C */
	background-repeat:no-repeat, repeat;
	background-position: center 0, 0 0;
	background-size:100% auto,auto;
}

.ui-bar-c {
	background-image: -moz-linear-gradient(top, #5a5a5b 0%, #242524 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a5a5b), color-stop(50%,#242524), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #5a5a5b 0%,#242524 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #5a5a5b 0%,#242524 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #5a5a5b 0%,#242524 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
	background-image: linear-gradient(to bottom, #5a5a5b 0%,#242524 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
	background-repeat: repeat;
	background-position: 0 0;
}

.clsCustomerLogoDiv {
	text-align: center;
}

.clsCustomerLogo {
	margin-top: 0.3em; /* Adjust this to vertically centre the logo. */
	max-height: 31px;
}

.ui-li-divider {
	color:#02652c;
	background-color:#f6f8f8;
	background: #fff; /* Old browsers */
	background: -moz-linear-gradient(top, #f6f8f8 0%, #f6f8f8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f8), color-stop(100%,#f6f8f8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f6f8f8 0%,#f6f8f8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f6f8f8 0%,#f6f8f8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f6f8f8 0%,#f6f8f8 100%); /* IE10+ */
	background: linear-gradient(to bottom, #f6f8f8 0%,#f6f8f8 100%); /* W3C */
	padding: .9em 15px;
	font-size: 18px;
	font-weight:normal;
	font-style:italic;
}

.ui-btn-inner {
	padding: 1.6em 15px;
	font-weight:normal;
	border:0;
}

.ui-li.ui-btn {
	border:0;
	border-top:1px solid #d8dbdb;
}

.ui-btn-inner a {
	padding-top:1em!important;
	padding-bottom:1em!important;
}

.ui-input-search {
	border-radius: 1.3em;
}

.oilpage h1 {
	font-size: 18px;
	font-weight:normal;
	font-style:italic;
	color:#02652c;
	margin-top:1em;
}

.oilpage h2, .or {
	font-size: 18px;
	font-weight:normal;
	color:#575757;
}

.or {
	text-align:center;
	margin:0.5em 0;
}

.oil_container {
	margin:0.5em;
	background-color:#fff;
	padding:0.5em;
	/* Make the container height expand downward to contain the floating img: */
	height: 1%; overflow: hidden;
}

.oil_container .clsLubeImageParent {
	float:left;
	margin-right:0.5em;
	margin-bottom:0.5em;
	width: 183px; /* Lube-supplier-specific. */
	max-width: 43%; /* To allow wide product name to show unbroken next to image, on iPhone 4. */
	text-align: center;
}

.icon {
	width:41px;
	height:40px;
	vertical-align: middle;
	margin-right: 0.8em;
	margin-left: 0.5em;
	display: inline-block; /* Necessary for Firefox, which would otherwise not honour the height setting.*/
}

.clsLubeQuantity span {
	font-style: italic;
}

.clsNoteHeading {
	font-style: italic;
	text-transform: uppercase;
}

.clsNoteText li {
	padding-top: 1em;
}

.clsNoteText li:first-child {
	padding-top: 0em;
}

div[id^="page"] ul.clsDrillDownList li[data-theme="b"] a {
	padding: 0px !important;
	padding-top: 5px !important;
	padding-right: 0.3em !important;
	padding-bottom: 6px !important;
}

div[id^="page"] ul li[data-theme="b"] .clsListItemText {
	display: inline-block !important;
	vertical-align: middle;
	white-space: normal !important; /* Allow list item text to wrap. "!important" is required otherwise it doesn't work. */
	margin-right: 5.2em;
}

div[id="page1"] ul li[data-theme="b"] .clsListItemText.clsListItemHasModelCount {
	margin-right: 8.2em;
}

div[id="page2"] ul li[data-theme="b"] .clsListItemText,
div[id="page3"] ul li[data-theme="b"] .clsListItemText,
div[id="page4"] ul li[data-theme="b"] .clsListItemText {
	margin-right: 2.5em;
}

.clsImgMinHeightSetter { /* Using min-height undoes the vertical-align effect, so set min-height this way. */
	visibility: hidden; /* Unnecessary since the width is 0. */
	width: 0.95em;
	margin-left: 0px;
	margin-right: 0px;
	/* Height is set by the icon class. */
}

div[data-role="header"] { /* Prevent a 1px border around title area. */
	border-style: none;
}

h3 {
	white-space: normal !important; /* Allow list item text to wrap. "!important" is required otherwise it doesn't work. */
	margin: 0px !important;
	margin-right: 0.5em !important;
	margin-left: 0.5em !important;
	vertical-align: middle !important;
	font-size: smaller !important;
	min-height: 2em !important;
}

#page1 h3 {
	font-size: inherit !important;
}

div[data-role="header"] {
	padding-top: 0.3em;
	padding-bottom: 0.5em;
}

.clsBackButtonUnderlay {
	float: left;
	height: 2.2em;
	background-color: red;
	font-size: 93%;
	padding-left: 2.9em; /* To represent the leftward arrow and its whitespace.  Suits when h3 font-size is "smaller". */
	padding-right: 1em;
	visibility: hidden;
}

.clsHeadingText {
	vertical-align: middle !important;
}

.clsHeadingImage {
	vertical-align: middle !important;
	height: 2.2em;
	width: 0px;
}

#page2 .clsHeadingImage
, #page3 .clsHeadingImage
, #page4 .clsHeadingImage
, #page5 .clsHeadingImage {
	display: none;
}

.ui-btn-corner-all {
	/* Without this, the button is square. */
	-moz-border-radius: 0.5em !important /*{global-radii-buttons}*/;
	-webkit-border-radius: 0.5em !important /*{global-radii-buttons}*/;
	border-radius: 0.5em !important /*{global-radii-buttons}*/;
}

.custom_icon { /* Otherwise the home icon's bottom gets rounded. */
	-moz-border-radius: 0em !important /*{global-radii-buttons}*/;
	-webkit-border-radius: 0em !important /*{global-radii-buttons}*/;
	border-radius: 0em !important /*{global-radii-buttons}*/;
}

.clsModelCount {
	float: right;
	position: relative;
	left: -1em;
}

.clsPageHasZeroModelCount {
	display: none;
}

#info h1 {
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
}

div[id^="idInfoPage"] h2 {
	font-size: 16px;
	font-weight: bold;
}

#info a.info_ico {
	visibility: hidden;
}

#idInfoPage1 li {
	font-weight: normal;
}

.clsAboutIfmHeading {
	text-align: center;
}

.clsAboutIfmHeadingChild {
	vertical-align: middle;
	margin-right: 1em;
}

.clsAboutIfmHeading .clsAboutIfmHeadingChild:last-child {
	display: inline-block;
	border: 2px solid LightGrey;
	border-radius: 16px;
	margin-right: 0em;
}

.clsAboutIfmHeadingImg {
	border: 2px solid white;
	border-radius: 15px;
	background-image: url(../IfmPeople.png);
	height: 50px;
	width: 50px;
}

div[id^="idInfoPage"] p:first-child {
	margin-top: 0em; /* Remove the top margin from the first <p>; it's unnecessary space */
}

div[id^="idInfoPage"] h2 + p {
	margin-top: 0px;
}
div[id^="idInfoPage"] h2 {
	margin-bottom: 0px;
}

#idRecentSearches {
	z-index: 2; /* Using 1 would put it at the same z-index as list item text. */
	position: absolute;
}

#idRecentSearches li:first-child {
	border-top-style: none;
	padding-top: 0px;
	padding-bottom: 0px;
	overflow: hidden;
}

.clsRecentSearchesClear, .clsRecentSearchesHide {
	margin-left: 2em;
	float: right;
	clear: right;
}

div[id^="idInfoPage"] li {
	font-weight: normal;
}

span.clsDataIssueDT {
}

a {
	outline-style: none; /* This removes the dotted line that would appear around anchors upon clicking. */
}

.clsLubeImage {
	display: inline-block;
}

.clsLubeImage img {
	width: 100%;
}

.oil_container ul {
	list-style-position: inside;
}

.oil_container li {
	margin-left: -3em; /* ITW-AAMTECH: Keep bullets out of the image. */
	padding-left: 2em;
	text-indent: -1em;
}

.clsCustomerHomeURL { /* Make the anchor properly enclose the logo, making its hover area correct. */
	display: inline-block;
}