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

Grainger CPC
Global Styles [global.css]

Joe Morrow [joe.morrow@acquitygroup.com]
6/16/2009

Copyright © 2009 Acquity Group LLC

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


@import url("reset.css");

INPUT.disable{
	background-color:CCCCCC;
}



/* @group Global */
html, body {
	height: 100%;
	overflow: auto;
}

body {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

a:link {
	color: #13a;
	text-decoration: none;
}

a:visited {
	color: #059;
	text-decoration: none;
}

a:hover {
	color: #13a;
	text-decoration: underline;
}

a:active {
	color: #13a;
	text-decoration: none;
}

a.external {
	background: transparent url(../images/icons/external.gif) no-repeat top right;
	padding-right: 16px;
}

a.pdf {
	background: transparent url(../images/icons/pdf_icon.jpg) no-repeat top right;
	padding-right: 26px;
}

em,
strong {
	font-weight: bold;
	font-style: normal;
}

.left {
	float: left;
}

.right {
	float: right;
}

.hidden {
	height: 0 !important;
	line-height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	text-indent: -100000em !important;
	width: 0 !important;
}

/* @group Headings */
h1 {
	color: #000;
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 10px;
}

h2 {
	background: #999;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	margin: 1px;
	padding: 8px;
}

h3 {
	font-weight: bold;
	margin: 0 0 10px 0;
}

/* @end Headings */
/* @end Global */

/* @group General Navigation */
ul.nav li {
	display:inline;
	padding-left:4px;
	padding-right:8px;
	text-align:left;
}


ul.nav li.last {
	margin-right: 0;
	padding-right: 0;
}

li.selected li,
li.hover li {
	font-weight: normal;
}

li.selected,
li.hover,
li li.selected,
li li.hover {
	font-weight: bold;
}

ul.nav img {
	display: block;
}
/* @end General Navigation */

/* @group Form Fields */
#resetForm{
	text-align:center;
}

input.password,
input.text,
input.file,
select,
textarea {
	border: 1px solid #999;
	font: 12px Arial, Helvetica, sans-serif;
	padding: 1px 2px;
	margin-bottom: 10px;
	vertical-align: baseline;
	width: 150px;
}

body.safari textarea {
	resize: none;
}

input.submit {
	border: 0;
	font-weight: bold;
	padding: 0 3px 2px 3px;
	text-align: center;
	text-transform: uppercase;
	vertical-align: top;
	cursor: pointer;
}

textarea {
	overflow: auto;
}

label {
	font-weight: bold;
	vertical-align: baseline;
}

label.inline {
	font-weight: normal;
}

select {
	padding: 0;
	width: 156px;
}

.required {
	font-weight: bold;
}

.requiredField {
	font-weight: bold;
	color: #f00;
}

.disabled .required {
	display: none;
}
/* @end Form Fields */

/* @group Container */
#container {
	width: 991px;
}
/* @end Container */

/* @group Header */
#header {
	background: transparent url(../images/backgrounds/header.gif) repeat-x top left;
	clear: both;
	float: left;
	height: 114px;
	width: 991px;
}

#header a.logo {
	display: block;
	float: left;
}

#header ul.nav {
	display: block;
	float: left;
	margin-top: 20px;
}	

#header ul.nav li {
	background: transparent url(../images/icons/divider-header.gif) no-repeat center right;
}

#header ul.nav li.last {
	background: transparent;
}
/* @end Header */

/* @group Breadcrumb */
#breadcrumb {
	clear: left;
	float: left;
	margin-left: 14px;
	width: 650px;
}

#breadcrumb ul.nav {
	padding: 5px 0 15px 0;
}

#breadcrumb ul.nav li.last {
	background: transparent url(../images/icons/divider-breadcrumb.gif) no-repeat center left;
	margin: 0;
	padding-left: 16px;
	padding-right: 4px;
}	
/* @end Breadcrumb */

/* @group startover */
#startover {
	clear: right; 
	float: right;
	width: 327px;
	padding: 5px 0 0px 0;
}
/* @end startover */

/* @group Content */
#content {
	clear: both;
	float: left;
	margin-left: 14px;
	width: 977px;
}

/* @group Body */
#body {
	border: 1px solid #ccc;
	clear: both;
	float: left;
	margin-right: 15px;
	width: 707px;
}

#errorDiv LI{
	background: transparent url(../images/icons/alert-large.gif) no-repeat center left;
	color: #f00;
	font-weight: bold;
	margin: 15px 15px 5px 15px;
	padding: 10px 0px 10px 35px;
}

#body .error {
	background: transparent url(../images/icons/alert-large.gif) no-repeat center left;
	color: #f00;
	font-weight: bold;
	margin: 15px 15px 5px 15px;
	padding: 10px 0px 10px 35px;
}

/* @group Options */
#options {
	float: left;
	padding: 10px 15px 10px 10px;
}

#options.wide {
	width: 330px;
}

#options.narrow {
	width: 240px;
}

#options fieldset {
	margin: 0 0 20px 0;
}

#options fieldset fieldset {
	margin: 0;
}

#options legend {
	clear: both;
	font-weight: bold;
	margin-bottom: 10px;
}

#options legend span {
	color: #f00;
}

#options .note {
	clear: both;
	color: #666;
	float: left;
	font-size: 10px;
	margin-top: -5px;
	margin-bottom: 10px;
	margin-left: 115px !important;
}

/* @group Right */
#options fieldset label.right {
	float: none;
	margin-top: 0 !important;
	margin-bottom: 5px;
	margin-left: 66px;
	width: auto !important;
}

#options fieldset label.right input.checkbox,
#options fieldset label.right input.radio {
	margin-top: -2px;
	margin-right: 6px;
}

#options fieldset label.right input.text,
#options fieldset label.right input.password,
#options fieldset label.right select {
	margin-right: 5px;
}

#options fieldset.postbreak {
	border-bottom:1px solid #000000;
}


/* @end Right */
/* @group radios */
#options fieldset.selects input.vradio,
#options fieldset.selects label.sradio,
#options fieldset.selects input.sradio {
	clear:none;
	float:left;
	font-weight: normal;
	margin-top: 0 0 0 5px;
	text-align:center;
	width: 10px;
	
}
#options fieldset.selects label.vradio
{
	clear:none;
	float:left;
	font-weight: normal;
	margin-top: 0 0 0 5px;
	text-align:left;
	width: 150px;
	
}


#options fieldset.selects input.sradio {
	width:10px;
}
/* @end redios
/* @group Pictogram / Thumbnail */
#options fieldset.thumbnail legend {
	margin-bottom: 0;
}

#options fieldset.pictogram label.radio,
#options fieldset.thumbnail label {
	display: block;
	float: left;
	font-size: 9px;
	font-weight: normal;
	margin-right: 10px;
	margin-top: 10px;
	text-align: center;
	width: 72px;
}

#options fieldset.thumbnail label.logo {
	display: block;
	float: left;
	font-size: 9px;
	font-weight: normal;
	margin-right: 10px;
	margin-top: 10px;
	text-align: center;
	width: 144px;
	min-height: 85px;
}

#options fieldset.pictogram label.radio {
	margin-right: 6px;
	width: 30px;
}

#options fieldset.pictogram label.last,
#options fieldset.thumbnail label.last {
	margin-right: 0;
}

#options fieldset.pictogram img,
#options fieldset.thumbnail img {
	clear: both;
	margin-bottom: 5px;
}

#options fieldset.pictogram label span,
#options fieldset.thumbnail label span {
	clear: both;
	display: block;
	font-size: 10px;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

#options fieldset.pictogram label input,
#options fieldset.thumbnail label input {
	clear: both;
	margin-top: 5px;
}

#options fieldset.pictogram label input {
	margin-top: 5px;
}
#options fieldset.pictogram select {
    margin-right: 20px;
}
/* @end Pictogram / Thumbnail */

/* @group Fields / Selects / Text / Upload */
#options fieldset.fields label,
#options fieldset.text label,
#options fieldset.upload label,
#options fieldset.radios label.select,
#options fieldset.selects label,
#options fieldset.pictogram label.select {
	clear: both;
	display: block;
	float: left;
	font-weight: normal;
	margin: 3px 10px 0 0;
	margin-bottom: 10px;
	text-align: right;
	width: 70px;	
}


#options.xtra-wide {
	width: 330px;
}

#options.xtra-wide fieldset.fields label {
	width: 105px;
}
#options.xtra-wide fieldset.wideLabels label{
	width: 130px;

}


#options.smaller {
	width: 325px;
}

#options.smaller fieldset.fields label {
	width: 40px;
}

#options.smaller fieldset fieldset.compound2, 
#options.smaller fieldset fieldset.compound3 {
	clear: both;
}

#options.smaller .note {
	margin-left: 0px !important;
}

#options.bigger fieldset.selects label {
	width: 90px;
}

#options.bigger fieldset.selects select {
	width: 140px;
}

#options.bigger fieldset fieldset.compound2 {
	float: none !important;
}

#options.bigger fieldset fieldset.compound2 input.text {
	height: 19px;
	width: 35px;
}

#options.bigger fieldset fieldset.compound2 select {
	width: 41px;
}

#options.bigger fieldset fieldset .note {
  margin-left: 50px !important;
}

#options fieldset.text input.button {
	clear: both;
	float: left;
	margin-left: 80px;
}

#options fieldset.fields input.text,
#options fieldset.fields input.password,
#options fieldset.fields select, 
#options fieldset.selects input.text,
#options fieldset.selects input.password,
#options fieldset.selects select,
#options fieldset.pictogram select,
#options fieldset.text input.text,
#options fieldset.text input.password,
#options fieldset.text select,
#options fieldset.upload input.text,
#options fieldset.upload input.password,
#options fieldset.upload select,
#options fieldset.upload input.file {
	display: block;
	float: left;
	width: 150px;
	margin-bottom:10px;
}
#options fieldset.selects input.promptText{
	float: left;
	width: 120px;
	margin-bottom:10px;
}
#options fieldset.selects input.promptButton{
	float: left;
	padding-left:2px;
	padding-right:2px;
}

body.safari #options fieldset.upload input.file {
	border: none;
	width: 235px;
}

#options fieldset.fields input.checkbox,
#options fieldset.fields input.radio,
#options fieldset.selects input.checkbox,
#options fieldset.selects input.radio,
#options fieldset.text input.checkbox,
#options fieldset.text input.radio,
#options fieldset.upload input.checkbox,
#options fieldset.upload input.radio {
	display: block;
	float: left;
}

#options fieldset.fields select, 
#options fieldset.selects select,
#options fieldset.text select,
#options fieldset.upload select {
	width: 156px;
}
#options fieldset.pictogram select {
    width: 200px;	
}

/* @end Fields / Selects / Text / Upload */

/* @group Compound */
#options fieldset fieldset.compound2,
#options fieldset fieldset.compound3 {
	float: left;
}

body.opera8 #options fieldset fieldset.compound2,
body.opera8 #options fieldset fieldset.compound3 {
	margin-bottom: 10px;
}

#options fieldset fieldset.compound2 input.text,
#options fieldset fieldset.compound2 input.password {
	width: 100px;
}

#options fieldset fieldset.compound2 select {
	width: 106px;
}

#options.narrow fieldset fieldset.compound2 input.text,
#options.narrow fieldset fieldset.compound2 input.password,
#options fieldset fieldset.compound3 input.text,
#options fieldset fieldset.compound3 input.password {
	width: 35px;
	height: 19px;
}

#options.smaller fieldset fieldset.compound3 input.text,
#options.smaller fieldset fieldset.compound3 input.password {
	width: 35px;
	height: 19px;
	margin-right: 10px;
}

#options.narrow fieldset fieldset.compound2 select,
#options fieldset fieldset.compound3 select {
	width: 41px;
}

#options fieldset fieldset.compound2 label.compound {
	clear: none;
	margin-left: 6px;
	padding-top: 3px;
	margin-bottom: 0;
}

#options fieldset fieldset.compound2 label.first {
	clear: none;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 3px;
}

#options fieldset fieldset.compound2 label.select select,
#options fieldset fieldset.compound2 label.text input {
	margin-top: -3px;
}

#options fieldset fieldset.compound3 label.compound {
	clear: none;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 0;
	width: auto;
}

#options fieldset fieldset.compound3 label.first {
	clear: none;
	margin-right: 6px;
	margin-bottom: 0;
	margin-left: 0;
	width: auto;
}
/* @end Compound */
/* @end Options */

/* @group Product */
#product {
	display: block;
	float: left;
	padding: 10px 0;
}

#product.narrow {
	width: 350px;
}

#product.wide {
	width: 432px;
}

#product.medium {
	width: 432px;
}


/* @group Description */
#description {
	margin: 15px 0;
}

#product.wide #description {
	float: left;
	margin: 0 10px 15px 0;
	width: 232px;
}

#product.narrow #description h1,
#product.narrow #description h2,
#product.narrow #description h3 {
	text-align:center;
}

#description h2 {
	background: transparent;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 12px 0;
	padding: 0;
}

#description h3 {
	margin-bottom: 12dpx;
}

#description p,
#description ul {
	line-height: 1.2;
	margin-bottom: 15px;
}
#description ul li {
	background: transparent url(../images/icons/bullet.gif) no-repeat 0 4px;
	padding-bottom: 4px;
	padding-left: 8px;
}

#description ul ul {
	padding-top: 4px;
	margin-left: 1.0em;
	margin-bottom: 0;
}
/* @end Description */

/* @group Image */
#image {
	text-align:center;
}
#product.wide #image {
	float: right;
	text-align: right;
	width: 190px;
}

#product.wide #image img {
	margin-bottom: 10px;
}
/* @end Image */
/* @end Product */
/* @end Body */

/* @group Information */
#information {
	float: left;
	width: 250px;
}

/* @group Supplier */
#supplier {
	border: 1px solid #ccc;
	margin-bottom: 15px;
}

#supplier img {
	display: block;
	margin: 15px auto;
}
/* @end Supplier */

/* @group Help */
#help {
	border: 1px solid #ccc;
}

#help h3 {
	display: block;
	font-weight: bold;
	margin: 10px;
}

#help div.links {
	min-height: 100px;
	padding: 0 10px 10px 10px;
}

body.opera8 #help div.links,
body.safari2 #help div.links {
	height: auto;
	overflow: auto;
}

#help ul li {
	background: transparent url(../images/icons/bullet.gif) no-repeat 0 4px;
	padding-left: 8px;
	padding-bottom: 4px;
}
/* @end Help */

/* @group Contact */
#contact {
	background: transparent;
	color: #f00;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.2;
	margin: 10px 0;
}

#contact span {
	color: #666;
	font-weight: normal;
}
/* @end Contact */
/* @end Information */
/* @end Content */

/* @group Results */
#results {
	clear: both;
	float: left;
	margin: 15px 15px 15px 14px;
	width: 977px;
}

#results h2 {
	background: transparent;
	color: #000;
	margin: 0;
}

#results .error {
	background: transparent url(../images/icons/alert-large.gif) no-repeat center left;
	clear: both;
	color: #f00;
	float: left;
	font-weight: bold;
	margin-left: 10px;
	padding: 15px 15px 15px 35px;
	width: 917px;
}

/* @group Table */
#results table {
	border: 1px solid #ccc;
	border-top: 25px solid #f00;
}

#results table th,
#results table td {
	font-size: 11px;
	line-height: 15px;
	padding: 10px;
	vertical-align: middle;
}

#results table th {
	border-top: 1px solid #fff;
	color: #666;
	font-weight: bold;
	line-height: 25px;
	white-space: nowrap;
}

#results table thead tr {
	background: #ccc url(../images/backgrounds/gray-grad-n.gif) repeat-x top left;
}

#results table .thumbnail {
	width: 75px;
}

#results table .description {
	line-height: 12px;
}
#results table .dimension {
	text-align: center;
	white-space: nowrap;
}

#results table .thumbnail,
#results table .quantity,
#results table .price {
	text-align: center;
}

#results table .select {
	text-align: center;
}

#results table .left {
	border-left: 1px solid #ccc;
	float: none;
}

#results table .right {
	border-right: 1px solid #ccc;
	float: none;
}

#results table td.quantity,
#results table td.price {
	white-space: nowrap;
}
/* @end Table */

/* @group Submit */
#results fieldset.submit {
	background: #999;
	display: block;
	float: left;
	padding: 2px 20px 2px 10px;
	vertical-align: middle;
	width: 947px;
}

#results fieldset.submit label.confirm {
	background: #fff url(../images/icons/alert-large.gif) no-repeat 5px center;
	border: 1px solid #f00;
	display: block;
	float: right;
	padding: 5px;
	width: 300px;
	vertical-align: middle;
}

#results fieldset.submit label.confirm span {
	display: block;
	float: left;
	font-size: 10px;
	font-weight: bold;
	margin: 0 0 0 30px;
	width: 245px;
}

#results fieldset.submit label.confirm input {
	display: block;
	float: right;
	vertical-align: middle;
}

#results fieldset.submit label.text {
	float: right;
	margin: 10px 0 0 20px;
	vertical-align: middle;
}

#results fieldset.submit input.text {
	border: 1px solid #666;
	float: right;
	margin: 7px 0 0 5px;
	width: 35px;
	vertical-align: middle;
}

#results fieldset.submit input.image {
	float: right;
	margin-top: 7px;
	margin-left: 20px;
	vertical-align: middle;
}
/* @end Submit */
/* @end Results */

/* @group Footer */
#footer {
	clear: both;
	float: left;
	margin-left: 14px;
	padding-bottom: 20px;
	width: 977px;
	text-align:center;
}

/* @group Disclaimer */
#disclaimer {
	margin-top: 5px;
	font-size: 11px;
}

#disclaimer h3 {
	margin-bottom: 5px;
}

#disclaimer ul {
	line-height: 1.2;
	margin-bottom: 15px;
}

#disclaimer ul li {
	background: transparent url(../images/icons/bullet.gif) no-repeat 0 4px;
	padding-bottom: 4px;
	padding-left: 8px;
}

#disclaimer ul ul {
	padding-top: 4px;
	margin-left: 1.0em;
	margin-bottom: 0;
}
/* @end Disclaimer */

/* @group Navigation */
#footer ul.nav {
	font-size: 10px;
	text-align: center;
	line-height: 1.4;
	width: 60%;
	margin: 20px auto 2px auto;
}

#footer ul.nav li {
	background: transparent url(../images/icons/divider-footer.gif) no-repeat center right;
}

#footer ul.nav li.last {
	background: transparent;
}
/* @end Navigation */

/* @group Copyright */
#copyright {
	font-size: 10px;
	text-align: center;
}
/* @end Copyright */
/* @end Footer */

/* @group Dimensions */
#image.dims {
    margin-top: 10px;	
}
#horizontalArrow {
	width: 208px;	
	position: relative;
	height: 5px;
	text-align: center;
}
#leftArrow {
	width: 75px;
	height: 17px;
	background: transparent url(../images/backgrounds/leftHorizontalArrow.png) no-repeat center right;
}
#horizontalText {	
	margin-top: -15px;
}
#rightArrow {
	width: 75px;
    height: 17px;
    background: transparent url(../images/backgrounds/rightHorizontalArrow.png) no-repeat center right;
    float: right;
    margin-top: -14px;
}
#verticalArrow {
	height: 180px;    
    position: relative;
    float: right;
    width: 5px;
    margin-right: 130px;
    margin-top: -220px;
    text-align:center;
    line-height:25px;
    vertical-align: middle;
    
}
#upArrow {
	width: 17px;
    height: 75px;
    background: transparent url(../images/backgrounds/upVerticalArrow.png) no-repeat center right;
}
#verticalText {   
	width: 60px; 
}
#downArrow {
	width: 17px;
    height: 75px;
    background: transparent url(../images/backgrounds/downVerticalArrow.png) no-repeat center right;
}




/* @end Dimensions */

/* grainger styles */
#contentLeft {
	position : relative; 
	float : left; 
	top : 10px; 
	width : 153px; 
	padding : 0; 
	margin: 0;
}
#contentCenter {
	position : relative; 
	float : left; 
	left : 7px; 
	top : 10px; 
	width : 615px;
}
.ArBlackBold10 {
	font-family : Arial; 
	font-size : 12px; 
	color: #000000; 
	font-weight : 600;
}
.alertBox {
	background-color: #EFEFEF; 
	margin: 20px 0px 10px 0px; 
	padding: 10px; 
	border : 1px solid #CCCCCC;
}
.alertBoxIndent {
	margin-left: 32px;
}
.ArBlack10LineSpc160 {
	font-family : Arial; 
	font-size : 12px; 
	color: #000000; 
	font-weight : normal; 
	line-height : 1.6;
}
.ImagoBlackXBold28 {
	  font-family : Arial; 
	  font-size : 28px; 
	  color: #000000; 
	  font-weight : bold;
}

 
.disclaimer {
	margin-bottom: 10px;
}

label.read-only {
	display:inline;
	float: left;
	text-align:right;
	width: 70px;
}

div.read-only {
	display: block;
	margin: 10px;
}

div.string-value {
	margin-left: 75px;
	margin-top: 10px;
	font-weight : normal;
}

div.supplier-login {
	float:right;
	margin: 10px;
}

/*
	CANVAS for drawing images
*/
#CANVAS {position:relative}
.ROTATE_180 {
	height:20px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';			
}
.ROTATE_180 SHAPE{
	filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';			
}

.ROTATE_90 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';			
}

.ROTATE_270 {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';			
}


/*
	Image Selector classes
*/
.is_container {overflow-x:scroll !important; max-width:330px; border:1px solid #CCCCCC}
.is_container TABLE {table-layout:fixed; width:auto}
.is_container TD {padding:2px; text-align:center; vertical-align:middle;}
.is_textDesc {width:330px; text-align:center}
.is_selected {background-color:#9999FF;}
.is_open {border:3px solid #FFFFFF;}
TD.is_open:Hover{background-color:#FFFF66;border:3px solid #FFFF66; }

#numLines li {float:left;}

/*
BRADY STUFF
*/
.errorText {float:left; color:FF0000; text-indent:40;}
.errorText IMG {height:11px;}

#product_desc p {margin-top:15px}