body, form, input, select {
	font-size: 12pt;
	font-family: Arial, Helvetica, Verdana;
}

.clsCentrePanelAutoMargin {
	max-width: none;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	border-style: none;
}

#idPanel1Child {
	display: none;
}

#idPanel1WithLogo {
	font-size: 11px;
	height:66px;
	background-image: url(../Images/castrol_masthead_logoSliver.gif);
	background-repeat: repeat-x;
}

#idPanel1WithLogo img {
	border-style: none;
}

#idHeaderRight {
	float: right;
}

#idHeaderLinksContainer {
	text-align: right;
	margin-right: 3em;
	margin-top: -54px;
}

#idHeaderLinksContainer img {
	vertical-align: middle;
}

#idHeaderLinksContainer span {
	display: inline-block;
	width: 7em;
}

#idHeaderLinksContainer a {
	color: white;
	margin-bottom: 5px;
	display: block;
}

#idHeaderRight + div { /* The header's left part. */
	position: absolute; /* This takes this image out of the normal flow so that the floating image can slip underneath it. */
}

#idHeaderRight + div a { /* The anchor in the header's left part. */
	width: 110px;
	height: 29px;
}

.clsAd {
	float: right;
	margin-left: 1em;
	border-style: none;
}

#idHeading,
.clsLegendDiv,
#idHeadingLinks,
input[type=submit],
select,
option {
	font-family: Arial;
	font-stretch: condensed;
	font-size: 12pt;
}

#idDivInner {
	padding-right: 0em;
}

legend {
	font-size: x-large;
}

#idHeading {
	font-size: 280%;
	color: #007b32;
	text-transform: uppercase;
	margin-top: 0.5em;
}

#idHeadingLinks {
	clear: right;
	float: right;
	margin-top: 1em;
	margin-bottom: 1em;
}

#idHeadingLinks a {
	border: 1px solid black;
	text-transform: uppercase;
	padding: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	display: inline-block;
	color: black;
	text-decoration: none; /* This removes the underline that normally appears under hyperlinks. */
	margin-right: 4px;
}

#idHeadingLinks a:last-child {
	margin-right: 0px;
}

#idChoose {
	margin-top: 3em;
	margin-right: 1em;
}

.clsPanel2,
.clsResetAndChoose {
	margin-left: 1em;
	margin-right: 1em;
}

.clsResetAndChoose {
	margin-top: 3em;
}

a:hover { /* This has to come after all anchor(A)-related stuff, otherwise it doesn't work.*/
	color: red !important;
}

.clsResetDiv {
	clear: right;
}

@media (max-width: 416px) {
	.clsResetDiv {
		margin-top: 1em;
	}
}

.clsFieldsetDiv {
	background-color: #EDEDED;
	padding: 1em;
}

#idContentBetweenFieldSets + .clsFieldsetDiv {
	margin-top: 2em;
}

input[type="submit"] {
	color: white;
	font-weight: bold;
	background-color: #007b32;
	text-transform: uppercase;
	border-style: none;
	padding: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

input[type="text"] {
	padding: 0.5em;
	padding-left: 0.5em !important;
}

#idModelSearchContainer {
	margin-top: 0em;
}

select {
	border-style: none;
	padding: 0.4em;
}

.clsDrilldownListContainer {
	display: inline-block;
	vertical-align: top;
}

.clsDrilldownListContainer label {
	display: block;
}

.clsDrilldownListContainer,
#lblFragmentModelDesc {
	margin-top: 0.5em;
}

form {
	padding-bottom: 0em;
}

.clsResultsContainer {
	margin-top: 3em;
	margin-left: 1em;
}

.clsEquipmentMakeModelContainer {
	background-image: none;
	padding-left: 0px;
	min-height: 0px;
	padding-bottom: 3em;
}

.clsMakeDesc {
	color: #007b32;
}

.clsCompartment0,
.clsCompartment1 {
	background: url(../Images/BorderWithGraduation.JPG) repeat-x left top;
	padding: 1em;
	padding-top: 2em;
	padding-left: 0em;
	margin-left: 2em;
}

.clsCompartmentType {
	color: red;
}

.clsLubeProductName {
	color: #007b32;
	font-weight: bold;
}

.clsLubeQuantityAndNoteReferences a {
	color: black;
}

#frmModelSelection + .clsFooter {
	border-top-style: none;
	margin-top: 0em;
}

.clsResultsContainer + .clsFooter {
	margin-top: 5em;
}

.clsFooter {
	border-top-color: #dcdcdc;
	color: black;
	padding-bottom: 0em;
}

.clsFooter1,
.clsFooter2,
.clsFooter3 {
	margin-left: 1em;
	margin-right: 1em;
}
.clsFooter3 {
	display: none;
}

#idFooterCustomAfter {
	background: url(../Images/GraduatedShimLightDark.jpg) bottom left repeat-x;
	border: 1px solid #b3b3b3;
	border-top-color: #dcdcdc;
}

#idFooterCustomAfter * li {
	display: inline-block;
	padding-right: 1em;
	padding-left: 1em;
	background: url(../Images/VerticalBar.jpg) right center no-repeat;
}

#idFooterCustomAfter * li:last-child {
	padding-right: 0em;
	background-image: none;
}

#idFooterCustomAfter > ul {
	list-style-type: none;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	text-align: center; /* Centre the Infomedia parts. The Castrol and "Back to top" parts are floated left and right respectively */
}

.clsFooterItemFloatedLeft {
	float: left;
}

#idFooterItemFloatedRight {
	background-image: none !important; /* Remove the right hand vertical bar for the last list item. */
	float: right;
}

#idFooterCustomAfter * a {
	color: #007b32; /* Castrol's green */
}

#idFooterItemFloatedRight a,
.clsFooterItemFloatedLeft a {
	text-decoration: none;
}

.clsProductOr {
	font-style: italic;
}

.clsAd,
.clsAd img {
	max-width: 100%;
}

#idPanel1WithLogo > div:nth-child(2),
#idPanel1WithLogo > div:nth-child(2) img {
	max-width: 100%;
}

@media (max-width: 403px) {
	#idHeaderRight {
		display: none;
	}

	#idPanel1WithLogo {
		background-image: none;
	}
}

@media (max-width: 528px) {
	.clsAd {
		margin-left: 0em;
	}

	.clsCompartment0,
	.clsCompartment1 {
		margin-left: 0em;
	}

}

/*
.clsLubeImage ~ .clsLubeProductNameDiv,
.clsLubeImage ~ .clsVerboseProductDescription,
.clsProductHasImage,
.clsLubeImage ~ .clsProductHyperlinkExtra {
	padding-left: 170px; / * To make space for the left-floated product image... * /
}

.clsProductHyperlinkExtra span {
	padding-left: 1.5em;
	text-transform: uppercase;
	/ * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f2f2+0,ebebeb+50,dddddd+51,cfcfcf+100 * /
	background: url(../Images/RightArrowhead.png) no-repeat 5px center;
	background: url(../Images/RightArrowhead.png) no-repeat 5px center #f2f2f2; / * Old browsers * /
	background: url(../Images/RightArrowhead.png) no-repeat 5px center, -moz-linear-gradient(top,  #f2f2f2 0%, #ebebeb 50%, #dddddd 51%, #cfcfcf 100%); / * FF3.6+ * /
	background: url(../Images/RightArrowhead.png) no-repeat 5px center, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(50%,#ebebeb), color-stop(51%,#dddddd), color-stop(100%,#cfcfcf)); / * Chrome,Safari4+ * /
	background: url(../Images/RightArrowhead.png) no-repeat 5px center, -webkit-linear-gradient(top,  #f2f2f2 0%,#ebebeb 50%,#dddddd 51%,#cfcfcf 100%); / * Chrome10+,Safari5.1+ * /
	background: url(../Images/RightArrowhead.png) no-repeat 5px center, -o-linear-gradient(top,  #f2f2f2 0%,#ebebeb 50%,#dddddd 51%,#cfcfcf 100%); / * Opera 11.10+ * /
	background: url(../Images/RightArrowhead.png) no-repeat 5px center, -ms-linear-gradient(top,  #f2f2f2 0%,#ebebeb 50%,#dddddd 51%,#cfcfcf 100%); / * IE10+ * /
	background: url(../Images/RightArrowhead.png) no-repeat 5px center, linear-gradient(to bottom,  #f2f2f2 0%,#ebebeb 50%,#dddddd 51%,#cfcfcf 100%); / * W3C * /
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#cfcfcf',GradientType=0 ); /* IE6-9 * /
}
*/

/* Per-compartment note text --------------------------------------------------------------------

.clsLubeQuantityAsterisk {
	display: block;
}

.clsNotesInlineWithCompartmentContainer {
	float: right;
	max-width: 50%;
	margin-top: 1em;
	border: 2px solid #ededed; / * light grey * /
	border-radius: 5px;
	padding: 0.5em;
}

@media (max-width: 664px) {
	.clsNotesInlineWithCompartmentContainer {
		max-width: 80%;
	}
}

.clsNoteTextHeading {
	font-style: italic;
}

.clsNotesInlineWithCompartment {
	padding-left: 1em; / * Expose the list-style type. * /
}
*/

/* Castrol-specific -----------------------------------------------------------------------------*/

.clsNotesInlineWithCompartmentContainer {
	border: 2px solid #007b32; /* Castrol green */
}

.clsRefersToPartic {
	border-color: red; /* Castrol red */
	background-color: #ededed; /* light grey */
}

/* ----------------------------------------------------------------------------------------------*/