/* =============================================================================
'	Title    : Primary CSS for web-application
'	File     : includes/default.css
'	Author   : eek-1 (13 Dec 2007)
'	Modified : eek-1 (17 Jan 2008)
'	Rev.     : 1
'============================================================================ */


/* Deprecated --------------------------------------------------------------- */

body
{
	background:#ffffff;
	margin:0; padding:0;
	font:normal 10px verdana, tahoma, arial, sans-serif;
}

a:link, a:visited	{ color:#990000; font-weight:bolder; text-decoration:none;		}
a:hover, a:active	{ color:#ff0000; font-weight:bolder; text-decoration:underline;	}
a.disabled			{ color:#ACACAC; font-weight:bolder; text-decoration:none;}


/* sub-content */
.btd	{ border:1px #fcfcfc solid; margin:10px; padding:3px; height:23px; background:#f9f9f9; text-align:right; }
.ltd	{ padding:3px; vertical-align:top; width:160px; max-width:160px; min-width:160px; height:20px; min-height:22px; }
.rtd	{ padding:3px; vertical-align:top; width:auto; }


/* -----------------------------------------------------------------------------
	tables:
	tbl1 = standard
	tbl2 = standard in form
	tbl4 = lite
	tbl5 = lite in form
	tbl6 = lite search
	tbl7 = dashboard
*/
th { padding:3px; color:#908070; }
.tblMini td	{ padding:2px;	border:1px #ddd solid; }
.tblMini	{ margin:4px 0; border:1px #000 solid; border-collapse:collapse; }
.tblMini .lbl	{ background:#eee; }
.tblMini .val	{ background:#fff; }
.tbl0      { margin:0; padding:0; border:0; border-collapse:collapse; }
.tbl1      { margin:0; padding:0; border:1px #cccccc solid; border-collapse:separate; width:100%; border-spacing:0; }
.tbl2      { margin:0; padding:0; border:1px #cccccc solid; border-collapse:separate; width:100%; border-spacing:0; }

.tblsml    { margin:0; padding:0; border-collapse:collapse; width:100%; }
.tbl1 th   { background:#e3e2e2; color:#908070; border:1px #e3e2e2 solid; font-size:9px; font-weight:bold; margin:0; padding:3px; vertical-align:middle; }
.tbl2 th   { background:#e3e2e2; color:#908070; border:1px #e3e2e2 solid; font-size:9px; font-weight:bold; margin:0; padding:3px; vertical-align:middle; }
.tbl1 td   { color:#666666; border:1px #f5f5f5 solid; margin:0; padding:3px 1px; vertical-align:top; }
.tbl2 td   { color:#666666; border:1px #dddddd solid; margin:0; padding:3px 1px; vertical-align:top; }
.tblsml td { color:#666666; border:0; margin:0; padding:1px; vertical-align:top; }

.row0 { background:#dddddd; }
.row1 { background:#fcfcfc; }
.row2 { background:#f6f6f6; }
.row_highlight,
.row3 { background:#f3f3f3; }
.row4 { background:#ecf0ff; color:darkred; font-weight:bold; text-decoration:underline; cursor:pointer; }
.row4 td { color:darkred; }
.warn		{ color:#ff0000; font-weight:bolder; }

.non		{ display:none }

.hid table	{ border:none; border:0; border-collapse:collapse; margin:0; padding:0; }
.hid td		{ border:none; border:0; margin:0; padding:0; }
.hid th		{ border:none; border:0; }

/* Forms - form elements styling are best avoided */

form, input { margin:0; padding:0; }
input.txt	{ background:#ffffff; color:#2f4f4f; font:normal 11px "Courier New", courier, monospace;  height:17px; vertical-align:middle; margin:0; padding:0px; }
input.tro	{ border:none; background:none; color:#996633; font:bold 10px verdana, tahoma, arial, helvetica, sans-serif; cursor:default; }
input.ro	{ background:transparent; cursor:default; }
input.req	{ background:#fffacd; color:#000000; }
th input.th	{ font:normal 9px verdana, tahoma, arial, sans-serif; }
.btn, .btn1, .btn2, .cal, .clc { cursor:pointer; }
input.btn	{ font:bold 10px tahoma, verdana, arial, sans-serif; min-height:19px; text-align:center; vertical-align:middle; padding-left:3px; padding-right:3px; }
button		{ font:bold 10px tahoma, verdana, arial, sans-serif; min-height:19px; text-align:center; vertical-align:middle; padding-left:3px; padding-right:3px; }
input.cal	{ background:url(../images/layout/frm_cal.gif) center center no-repeat; border:0; margin:0; padding:0; height:19px; width:20px; vertical-align:middle; }
input.chk	{ /* checkboxes are almost impossible to be styled */ }
select		{ background:#ffffff; color:#2f4f4f; font:normal 11px "Courier New", courier, monospace;  vertical-align:middle; margin:0; padding:0; }
select.req	{ background:#fffacd; color:#000000; }
/* IE fix */
select.req option { background:transparent }
select.req	{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fffacd, endColorstr=#fffacd) }

textarea	{ background:#ffffff; color:#2f4f4f; font:normal 11px "Courier New", courier, monospace;  vertical-align:middle; margin:0; padding:1px; }
textarea.req{ background:#fffacd; color:#000000; }
input.rdo	{ vertical-align:middle; width:20px; }
input.rdo.req { background:transparent; }

td.lbl		{ height:2em; }
label, .lbl	{ color:#555555; font:bold 10px verdana, tahoma, arial, helvetica, sans-serif; }
.fix,.val	{ color:#996633; font:bold 10px verdana, tahoma, arial, helvetica, sans-serif; }
.pricing	{ font:normal 9px arial; }
.msg		{ background:#eeeeee; color:#332211; font-weight:bolder; padding:4px; }
.msgBox		{
	font-size:12px;
	font-weight:bold;
	border:1px #000 dotted;
	background:#ffc;
	margin	:1em 8em 2em;
	padding	:1em;
	text-align:center;
}
.msgBox h6 { font:normal 9px Verdana; margin:1ex; padding:0; color:#808080 }
/* iframes - no/border, no/scroll */
.ifb, .ifbs	{ border: 1px #cccccc solid; }
.copy		{ color:#999999; font:normal 9px arial, tahoma, sans-serif; padding:30px 0 10px 0; text-align:center; }

/* Notice box, the slightly yellow ones that you don't often see */
.notice				{ background:#fffacd; color:#888888; border:1px #888888 dotted; font:9px Verdana, Tahoma, Arial, Helvetica, sans-serif; margin:15px; padding:10px; }
.notice .subject	{ color:#dc143c; font-weight:bold; }
.notice a			{ font-weight:bold; }

/* Notice box type 2, often used after submit changes to an item */
.notice2			{ background:#e0ffff; color:#888888; border:1px #888888 dotted; font:9px Verdana, Tahoma, Arial, Helvetica, sans-serif; margin:15px; padding:10px; }
.notice2 .subject	{ color:#0000cd; font-weight:bold; text-transform:uppercase; }


.wauto	{ width:auto;}
.w5		{ width:5%;  }	.w10	{ width:10%; }
.w15	{ width:15%; }	.w20	{ width:20%; }
.w25	{ width:25%; }	.w30	{ width:30%; }
.w35	{ width:35%; }	.w40	{ width:40%; }
.w45	{ width:45%; }	.w50	{ width:50%; }
.w55	{ width:55%; }	.w60	{ width:60%; }
.w65	{ width:65%; }	.w70	{ width:70%; }
.w75	{ width:75%; }	.w80	{ width:80%; }
.w85	{ width:85%; }	.w90	{ width:90%; }
.w95	{ width:95%; }	.w98	{ width:98%; }
.w99	{ width:99%; }	.w100	{ width:100%;}
.txtl	{ text-align:left;		}	.txtr	{ text-align:right;		}
* .txtc	{ text-align:center;	}	.txtj	{ text-align:justify;	}
.vat	{ vertical-align:top;	}	.vab	{ vertical-align:bottom;}
.fll	{ float:left;			}	.flr	{ float:right;			}
.flc	{ clear:both;			}
.vis	{ visibility:visible	}	.invis	{ visibility:hidden		}
.marg1	{ margin:1ex			}	.marg2	{ margin:2ex			}

div .on		{ display:block;			}
tbody .on	{ display:table-row-group;	}
.off		{ display:none;				}
.b0			{ border:0;					}
.b1			{ border:1px inset;				}
.lbox		{ width:1.5em; height:70%; display:inline-block }

/* Animations --------------------------------------------------------------- */
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.afi	{ opacity:0; animation:fadeIn ease-in 1; animation-fill-mode:forwards; animation-duration:1s; }
.aw1	{ animation-delay:0.5s; }
.aw2	{ animation-delay:1.0s; }
.aw3	{ animation-delay:1.5s; }
.aw4	{ animation-delay:2.0s; }

#progress_div , #panel_div
{
margin:0px 0px 0px 0px;
position:fixed;
height: 200%;
width:100%;
z-index:9999;
padding-top:200px;
padding-left:50px;
background:url('../images/ovl_dim.gif') center fixed;
text-align:center;
/*
clear:none;
background-color:#666666;
border:1px solid #000000;*/
}

.scroll{
	height:350px;
	overflow:auto;
	margin:0; padding:5px; border:0;
/*	scrollbar-face-color: #6095C1;
	scrollbar-highlight-color: #C2D7E7;
	scrollbar-3dlight-color: #85AECF;
	scrollbar-darkshadow-color: #427AA8;
	scrollbar-shadow-color: #315B7D;
	scrollbar-arrow-color: #FFFFFF;
	scrollbar-track-color: #4DECF8S;*/
	text-align:justify;
	background-color:lightgrey;
}
* html .scroll{
	overflow-y: scroll; 
	overflow-x: hidden;
}

.scrollx{
	height:280px;
	overflow:auto;
	margin:0; padding:2px; border:0;
	text-align:justify;
	background-color:lightgrey;
}
* html .scrollx{
	overflow-y: scroll; 
	overflow-x: hidden;
}

/* pop up div (draw shadow) */
.style2
{
  border:1px solid #555; 
  position:relative; 
  padding:5px;
  font-weight:normal;
  background-color: lightgrey;
  left:-5px; /* expose the shadow */
  top:-5px; /* expose the shadow */
}

.shadow
{
	display: block; 
	/*border:1px solid #ddd; */
	position:relative;
	margin:1em 0;
	/*background-color: #bbb;*/
}

/* Redo ===================================================================== */


/* headers */
.hdr	{
	background:#7f0006 url(img/menu_bg.png) center left no-repeat;
	border-top:1px #000000 solid; border-bottom:2px #711 solid; border-collapse:collapse;
	margin:0; padding:0;
	height:60px; width:100%;
	vertical-align:middle;
}
.hdr a:link, .hdr a:visited { color:#ffffff; text-decoration:underline;	}
.hdr a:hover, .hdr a:active { color:#ff0000; text-decoration:underline;	}
.hdr input { border:0; background:transparent; color:#fff; font:bold 9px verdana, tahoma, arial, sans-serif; }
.hdr td { padding-right:1em }
.hdr th {
	color:#ffffff;
	margin:0; padding:0;
	font:bold small-caps 19px tahoma, arial, helvetica, sans-serif;
	letter-spacing:2px; word-spacing:0.3em; text-indent:2em; text-align:left; vertical-align:middle; white-space:nowrap;
	text-shadow: 0px 0px 5px rgba(0,0,0, 1);
}

#altMenu
{
	margin:0; padding:1ex; min-height:1.5em;
	border-top: 1px #333 solid; background:#000; color:#ccc;
	font:normal 10px Verdana, Tahoma, sans-serif; text-align:right;
}
#altMenu a:link	, #altMenu a:visited	{ color:#eee; text-decoration:none; font-weight:bold; }
#altMenu a:hover, #altMenu a:active		{ color:#fe3; text-decoration:underline	}
#wr_notify { float:left }

#popLevel
{
	display:none;
	position:absolute;
	top:0; left:0; right:5px;
	width:100%;
	background:#ddd;
	z-index:9;
	border:#333 1px solid;
	border-bottom:#999 3px solid;
	padding:1em;
}
#popLevel th { color:#333; font-size:10px; }

/* Body section */
#content	{ background:url(img/body_bg.png) top left repeat-x; padding:3ex 1ex; }
.content	{ margin-left:20px; clear:both; }

/* Page menu */
#menu				{ border:0; padding:0; margin:0 0 1em; height:80px; clear:both; background:transparent; font:normal 9px verdana, tahoma, arial, sans-serif; text-align:center; vertical-align:top; }
#menu div,
#menu .itm			{ float:left; height:72px; }
#menu div,
#menu .itm			{ border:1px #ffffff solid; cursor:pointer; padding:2px; width:80px; }
#menu div:hover,
#menu .itm:hover,
#menu .itm1			{ border:1px #cccccc solid; cursor:pointer; padding:2px; width:80px; background:#ddd url(img/shades.png); }
#menu .sep:hover,
#menu .sep			{ border:0; padding:0; background:url(img/sep.gif) top center repeat-y; width:4px; }
#menu .itm0			{ border:0; width:auto; }

#resultList			{ margin:1em 0 1em; border-right:1px #99bce8 solid; }

/* Search form */
.tbl3      { width:100%; margin:0; padding:0; background:#f8f8ff url(img/tabc.png) top left repeat-x; border:1px #c5c5c5 solid; }
.tbl3 td   { margin:0; padding:3px; color:#808080; font-weight:bold; font-size:10px; vertical-align:middle; }
.tbl3 th   { margin:0; padding:3px; color:#000000; font-weight:bold; font-size:12px; vertical-align:middle; }
.tbl3 tr:first-child th:first-child { padding-left:42px; background:url(../images/ovl_mag.gif) bottom left no-repeat; opacity:.3; text-shadow:2px 1px 0px #fff,3px 2px 0px rgba(0,0,0,.3); }

/* Tabs */
.tabs		{ clear:both; width: 100%; border:0; border-bottom:2px #b62d2d solid;	border-collapse:collapse;			text-align:  left; font:normal 9px verdana, tahoma, arial, sans-serif; margin-top:1.5em; }
.tab0		{ clear:both; width: auto; border:0; text-align:center; font:bold   9px verdana, tahoma, arial, sans-serif; padding:0px; vertical-align:middle; }
.tab		{ float: left; width: 98px; border:0; text-align:center; font:bold   9px verdana, tahoma, arial, sans-serif; padding:2px; vertical-align:middle; cursor:pointer; color:#666666; height:26px; background:url(img/tabs.png) 0   0px no-repeat; }
.tab1		{ width: 98px; border:0; text-align:center; font:bold   9px verdana, tahoma, arial, sans-serif; padding:2px; vertical-align:middle; cursor:pointer; color:#000000; height:26px; background:url(img/tabs.png) 0   0px no-repeat; }
.tab:hover	{ width: 98px; border:0; text-align:center; font:bold   9px verdana, tahoma, arial, sans-serif; padding:2px; vertical-align:middle; cursor:pointer; color:#000000; height:26px; background:url(img/tabs.png) 0   0px no-repeat; text-decoration:underline; }
.tab2		{ float: left; width: 98px; border:0; text-align:center; font:bold   9px verdana, tahoma, arial, sans-serif; padding:2px; vertical-align:middle; cursor:pointer; color:#ffffff; height:26px; background:url(img/tabs.png) 0 -30px no-repeat; text-decoration:underline; }
.tabx		{ width:4px; border:0; border-bottom:2px #e6e6e6 solid; }
.sub,
.tabc		{ background:#f8f8ff url(img/tabc.png) top left repeat-x; border:1px #c5c5c5 solid; margin:0; padding:4px; }
.tabc th,


/* Form elements */
.sub th	{ padding:5px; background:#eeeeee; border:1px #fcf9f3 solid; color:#666666; font:bold 10px verdana, tahoma, arial, sans-serif; }
select, textarea, .txt,
input.txt	{ border:1px #ccc solid; vertical-align:middle; margin:0; padding:0; background:#fff url(img/input_bg.gif) top left repeat-x; }
input.txt	{ background:#ffffff; color:#2f4f4f; font:normal 11px "Courier New", courier, monospace;  height:17px; vertical-align:middle; margin:0; padding:0px; }
input.req	{ background:#fffacd url(img/input_req_bg.gif) top left repeat-x; color:#000000; }
input.tro	{ border:none; background:transparent; color:#996633; font:bold 10px verdana, tahoma, arial, helvetica, sans-serif; cursor:default;display:inline;width:auto }
input.iro	{ color:#996633; background:#eeeeee; font-weight:bolder; }
input.ro	{ background:transparent; cursor:default; }
input.rdo	{ vertical-align:middle; width:20px; }
input.rdo.req { background:transparent; }

select		{ color:#2f4f4f; font:normal 11px "Courier New", courier, monospace;  vertical-align:middle; margin:0; padding:0; }
select.req	{ background:#fffacd url(img/input_req_bg.gif) top left repeat-x; color:#000000; }
textarea	{ color:#2f4f4f; font:normal 11px "Courier New", courier, monospace;  vertical-align:middle; margin:0; padding:1px; }
textarea.req{ background:#fffacd url(img/input_req_bg.gif) top left repeat-x; color:#000000; }

optgroup		{ background:#b0c4de; background:#4169e1; color:#ffffff; font-weight:bold; }
option			{ background:#ffffff; color:#000; }
option.hl 		{ background:#e6e6fa; }

label, .lbl	{ color:#555555; font:bold 10px verdana, tahoma, arial, helvetica, sans-serif; }
.val,.fix	{ color:#996633; font:bold 10px verdana, tahoma, arial, helvetica, sans-serif; height:23px }

.tip,.note,.nfo { font-style:italic;font-weight:lighter }
.txt:hover,input.txt:hover,select:hover,textarea:hover	{ border:1px #778899 solid; }
.txt:focus,input.txt:focus,select:focus,textarea:focus	{ border:1px #ff0000 solid; }
.tro:hover,input.tro:hover,.tro:focus,input.tro:focus		{ border:1px solid transparent }
select.tro:hover,textarea.tro:hover,
select.tro:focus,textarea.tro:focus						{ border:1px solid transparent; }
/* Form elements - disabled */
input.txt:disabled,input.req:disabled,input[type="text"]:disabled,select:disabled,textarea:disabled { border:1px dotted #999;background:transparent; color:#996633; font:bold 12px monospace; -moz-appearance:none; text-indent:0.01px; text-overflow:' '}
input[type="button"]:disabled,input[type="submit"]:disabled,button:disabled { visibility:hidden }
input[type="number"]:disabled { width:auto }
.nohover:hover { border:1px solid transparent; }

@media print
{
	.no-print { display:none }
}

#footer-wrap {
	width: 960px;
	height: 76px;
	padding: 0px;
	margin: 10px auto;
	margin-bottom: 0px;
}

#footer-container {
	width: 960px;
	height: 76px;
	padding: 5px;
	margin: 10px auto;
	background: transparent url(http://www.valvoline.com/images/common/backgrounds/header.jpg) no-repeat top left;
	position: relative;
	color:white;
}

#footer {
	display: block;
	width: 265px;
	height: 61px;
	background: transparent url(http://www.valvoline.com/images/common/logo.png) no-repeat top left;
	position: absolute;
	top: 30px;
	left: 10px;
}
}

/* Loader/viewer */
.vam-helper { display:inline-block;height:100%;vertical-align:middle; }
#scrLoader
{
	position:fixed;left:0;top:0;right:0;bottom:0;
	background:#fff url('data:image/gif;base64,R0lGODlhigAJAKECAH19fcvLy////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFGQACACwAAAAAigAJAAACZoyPeSLgD+NjskZqM85189t8kkImnuicqCqyn8vBWUkHsnV3ITrtPJCTBCO10hBy7P2US6CPl3QUSVFn09qsap+oqWJ7BWe5LfLHazLH1Bo2zq0Lw0foxRwkz4/1y7qd/yO2JPhTAAAh+QQFGQADACwAAAAAJgAJAAACJoSPeTPhD+NTNDGJY93g5s9V3oeF1EhqptWk0sq6L7y08kQb6F0AACH5BAUZAAMALBQAAAAmAAkAAAImhI95M+EP41M0MYlj3eDmz1Xeh4XUSGqm1aTSyrovvLTyRBvoXQAAIfkEBRkAAwAsKAAAACYACQAAAiaEj3kz4Q/jUzQxiWPd4ObPVd6HhdRIaqbVpNLKui+8tPJEG+hdAAAh+QQFGQADACw8AAAAJgAJAAACJoSPeTPhD+NTNDGJY93g5s9V3oeF1EhqptWk0sq6L7y08kQb6F0AACH5BAUZAAMALFAAAAAmAAkAAAImhI95M+EP41M0MYlj3eDmz1Xeh4XUSGqm1aTSyrovvLTyRBvoXQAAIfkEARkAAwAsZAAAACYACQAAAiaEj3kz4Q/jUzQxiWPd4ObPVd6HhdRIaqbVpNLKui+8tPJEG+hdAAA7') center center no-repeat;
	background-color:rgba(255,255,255,0.6);
	text-align:center;
}
#scrLoader span
{
	/* Helper for vertical alignment */
	display:inline-block;height:100%;vertical-align:middle;
}
#scrLoader img
{
	max-width:90%;max-height:90%;vertical-align:middle;
	border:10px #fff solid;
	box-shadow			: 0px 0px 4px 4px rgba(0,0,0,0.25);
	-moz-box-shadow		: 0px 0px 4px 4px rgba(0,0,0,0.25);
	-webkit-box-shadow	: 0px 0px 4px 4px rgba(0,0,0,0.25);
}

/* Image gallery */

.nmGallery
{
	margin-top:1em;
}
.nmGallery div
{
	float				:left;
	width				:160px;
	height				:160px;
	margin				:10px;
	border				:5px #fff solid;
	background-position	:center center;
	background-repeat	:no-repeat;
	background-size		:contain;
	box-shadow			:4px 4px 4px 4px rgba(0,0,0,0.25);
	-moz-box-shadow		:4px 4px 4px 4px rgba(0,0,0,0.25);
	-webkit-box-shadow	:4px 4px 4px 4px rgba(0,0,0,0.25);
	text-align			:center;
}
.nmGallery div:hover
{
	box-shadow			:4px 4px 5px 5px rgba(0,0,0,0.75);
	-moz-box-shadow		:4px 4px 5px 5px rgba(0,0,0,0.75);
	-webkit-box-shadow	:4px 4px 5px 5px rgba(0,0,0,0.75);	
}
.nmGallery div img
{
	max-width:100%;max-height:90%;
}
.nmGallery div a
{
	display:block;text-align:right;margin-bottom:5px;
	font:normal 9px Verdana,Helvetica,sans-serif; color:#ccc;
	visibility:hidden;
}
.nmGallery div:hover a	{ visibility:visible; }
.nmGallery div a:hover { color:#f00;text-decoration:none; }

.nmGallery .new
{
	cursor:pointer;
	background-color:#eee;color:#fff;
	font:bold 112px Verdana, sans-serif;
	text-shadow: 0px 0px 5px rgba(150, 150, 150, 1);;
}

/* Slideshow ================================================================ */
@font-face { font-family:dense;		src:url(dense.ttf);		}
@font-face { font-family:cantarell;	src:url(cantarell.ttf);	}
.slider
{
	position	:relative;
	margin		:0 auto;
	width		:640px;
	height		:320px;
	font		:normal 12px cantarell,tahoma,sans-serif;
	background:#000; color:#fff;
	text-shadow:1px 1px 8px rgba(0,0,0,1);
	border		:8px solid #fff;
	box-shadow	:2px 2px 4px #999;
}
.slider:hover { box-shadow:2px 2px 8px #000; cursor:pointer; }
.slider > div
{
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	background:#000; color:#fff;
	text-align:left;
}
.slider > div ul
{
	position	:absolute;
	bottom		:0;
	left		:0;
	margin		:0;
	padding		:0 0 1ex;
	width		:100%;
	list-style:none;
	background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB4CAYAAAAzOJiAAAAAPUlEQVQoz2NgQAZMTAwMDIxMDAwMzEwwLhrBjIWLXwex6qhjACVuQZPAqYSJsPE0cR/FdiBkKfEREYHDCAAyGgHoipOiTQAAAABJRU5ErkJggg==) top left repeat-x;
}
.slider > div li
{
	padding-left:8px;
}
.slider > div li:last-child	{ padding-bottom:1ex; }
.slider > div li:first-child	{ font:normal 40px dense,Impact,Arial,sans-serif; }