/* WATSON MAIN CSS FILE */

/*************************************************/
/* GENERAL                                       */
/*************************************************/
html, body {
	margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        height:100%;
	background:#fff;
        min-width:600px;}    		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */

a:hover {
	background-color:  #0066FF; /*Normal  [#FF8000; Fall] [#139813; Winter]*/
	color: #FFFFFF;
	text-decoration:none;}

a.nobkg, a:hover.nobkg {background-color: transparent;}
span.searchlink {padding-left:3px; padding-right:3px; border:1px solid gray;margin-top:25px;}
span.searchlink a{text-decoration:none; color:black; font: normal bold 12px/14px Verdana, Arial, Helvetica, sans-serif;}
span.searchlink a:hover{text-decoration:underline; background:none;color:black;}
h1, h2, h3 {
	font:normal bold 20px/22px Verdana, Arial, Helvetica, sans-serif;
	color: #181512; 
	letter-spacing: -0.05em;
	padding: 0.25em 0px;
	border: 0;
	margin: 0;}
	 
h2 {font-size: 15px;line-height:17px;} 
h3 {
	font-size: 12px;
	line-height: 15px;
	padding-bottom: 0px;
	padding-top: 10px;}
h3.hdr{line-height:22px;padding:0.25em 0px;}
	
h4 {
	font:normal bold 12px/14px Verdana, Arial, Helvetica, sans-serif;
	color: #181512; 
	border: 0;
	margin: 0;}

h4.black {color: #000000;}

p {margin: 5px 0px;}
ol {margin: 5px 10px 5px -2em;}

fieldset{
	border: 1px solid #0066ff;
	width: 470px;}

legend{
	border: 1px solid #0066ff;
	background: #80b3ff;
	padding: 2px 6px;
	font: bold 12px/17px times;}

table tr td.bottom{border-bottom:1px solid black;padding-bottom:3px;}
table tr td.top{border-top:1px solid black}

/*************************************************/
/* PAGE FORMATTING                               */
/*************************************************/
#wrapper{
	height:100%;
	height: auto !important;
	min-height:100%;  
	margin: 0 auto -30px;
	border:1px solid white;}	/*If a border is put on the wrapper, the footer doesn't take up so much space*/

#header{
	position:absolute; 
	top:0;
	left:0;
	height:122px;}

#centercol, #centercol_short{
	margin-top:122px;
	margin-left:200px;
	margin-right:200px;
	min-height:600px;
	background: url(/images/midcolumn.gif) no-repeat;
	/*border: 1px solid blue;*/}
#centercol_short{min-height:400px;background: url(/images/midcolumn_short.gif) no-repeat;}

#leftcol{
	position:absolute;
	top:122px;
	left:0px;
	width:200px;
	/*border: 1px solid black;*/}
#leftcol h2{text-align:center;}

#rightcol, #rightcol_short{
	position:absolute;
	top:123px;
	right:1px;
	width:200px;
	min-height:600px;
	background: url(/images/right_menu.gif) no-repeat;
	/*border:1px solid green;*/}
#rightcol_short{min-height:400px;background: url(/images/right_menu_short.gif) no-repeat;}
#rightcol p.indent, #rightcol_short p.indent {
	margin-left:0.85em;text-indent:-0.85em;}	/* Use for rightcol links that wrap because they are too long. */
/*#rightcol h4.apps, #rightcol_short h4.apps{margin-bottom:0.5em;}*/

#footer {
	width:95%;
	margin-left:20px;
	height:30px;
	padding-top:5px;
	border-top:2px black solid;}


/*************************************************/
/* HEADER & FOOTER FORMATTING                    */
/*************************************************/
	
#header a span {display:none;}
#header a:hover{border:none;}
#header a:hover span {
	display:block;
	width:800px;
	position:absolute;
	color:#000; 
	background: #fff;
	top:106px;
	left:0px;
	text-indent:15px;
	text-align:left;
	z-index:100; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	font-style: normal; 
	line-height: 12pt; 
	font-weight: normal; 
	color: #000000; 
	letter-spacing: -0.05em;}

#header a.headbtn80, #header a.headbtn100, #header a.headbtn120, 
#header a.select80, #header a.select100, #header a.select120, 
#header td.search {
	display: block;
	height: 26px;
	text-decoration: none;
	color: white;
	font: bold 12px/28px sans-serif;
	text-align:center;}

#header a.headbtn80 {
	width: 80px;
	background: url(/images/header80.gif) no-repeat;}
#header a.headbtn80:hover {background: url(/images/header80_roll.gif) no-repeat;}

#header a.headbtn100 {
	width: 100px;
	background: url(/images/header100.gif) no-repeat;}
#header a.headbtn100:hover {background: url(/images/header100_roll.gif) no-repeat;}

#header a.headbtn120 {
	width: 120px;
	background: url(/images/header120.gif) no-repeat;}
#header a.headbtn120:hover {background: url(/images/header120_roll.gif) no-repeat;}

#header a.select80 {
	width: 80px;
	background: url(/images/header80_select.gif) no-repeat;}

#header a.select100{
	width: 100px;
	background: url(/images/header100_select.gif) no-repeat;}

#header a.select120 {
	width: 120px;
	background: url(/images/header120_select.gif) no-repeat;}
#header td.search{
	width: 15px;
	background: url(/images/search.gif) no-repeat;}
#header td.searchbox{
	width: 245px;
	background: url(/images/search2.gif) no-repeat;}

#header input{
	background: #ffffff;
	font: bold 12px/17px sans-serif;
	border: 1px solid #191512;}

#header input.searchbutton {
	background: #bfbfbf;
	border: 2px outset #d0d0d0;
	font: normal 10px/17px sans-serif;
	width: 50px;
	height: 23px;
	color: black;}
#header span.link {
	position:absolute;
	left:0px;
	top:103px;
	text-indent:15px;}

#header span.nolink {
	font: normal normal 10px/10px Verdana, Arial, Helvetica, sans-serif;  
	color: black; 
	letter-spacing: -0.05em; 
	background-color: #FFFFFF;}

#footer span{
	padding-left:5px;
	padding-right:5px;
	border-left:1px solid gray;}
#footer span.first{border:none;padding-left:0px;}
#footer p{text-align:center;}

#navlink a, #navlink a:hover{
	font: normal normal 12px/14px Verdana, Arial, Helvetica, sans-serif;
	padding:none;
	margin:none;
	border:none;
	background-color: #FFFFFF;
	color: #FFFFFF;}
/*************************************************/
/* MENU STYLES                                   */
/*************************************************/

/* Vertical Links Menu with span notes */

#links ul, #links ul ul{
	width:175px;
	left:0px;
	padding-left:0px;
	margin-left:10px;
	margin-top:0;
	margin-bottom:90px;	 /* Space for span notes*/
	border:1px solid #808080;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	font-style: normal; 
	line-height: 22px; 
	font-weight: normal;  
	letter-spacing: -0.05em;
	background: #ececec;}

#links ul li{
	list-style-type:none;
	position:relative;}
		 
#links ul li:hover, 
#links ul li.CSStoHighlight{color: black;}

#links ul li.gray{color:gray;text-indent:17px;}

#links ul li.gray:hover, 
#links ul li.gray.CSStoHighlight{color: gray;}

#links ul li ul{		 
	display: none;
	position: absolute;
	top: -1px;
	left: 165px;}

#links ul li:hover ul{display: block;}
#links ul li ul.CSStoShow {display: block;} /*for IE */
   
#links a {
	display: block; 
	width:175px;
	text-align:left; 
	text-decoration: none;
	text-indent:17px;
	font: normal 9px/22px Verdana, Arial, Helvetica, sans-serif;
	color: black;
	background: url(/images/button2.gif) no-repeat;}

#links a.expand{background: url(/images/button2_expand.gif) no-repeat;}

#links a:hover {
	width:175px;
	color: black;
 
	background: url(/images/button1.gif) no-repeat;
	border:none;}		/*Border statement required for IE to work*/

#links a.expand:hover{background: url(/images/button1_expand.gif) no-repeat;}

#links a span {display: none;text-indent:0;}	/* For span notes */
#links a:hover span {
	display: block;
	position: absolute;
	left: 0;
	width: 155px;
	padding: 10px; 
	margin-left: 0px; 
	z-index: 100;
	color: black;
	background: #efefef;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	font: 10px Verdana, sans-serif; text-align: left;}

#links a:hover span.c2  {left:-176px;}	/* Second column needs to move left 176 px */
#links a:hover span.r1  {top:205px;}
#links a:hover span.r2  {top:183px;}
#links a:hover span.r3  {top:161px;}	/* When coding #links lists in html, the */
#links a:hover span.r4  {top:139px;}	/* last link should be r9, and work your */
#links a:hover span.r5  {top:117px;}	/* way back up.  So, the first row would */
#links a:hover span.r6  {top:95px;}	/* be r6 if your list only contains      */
#links a:hover span.r7  {top:73px;}	/* four links.  Add the c2 style to the  */
#links a:hover span.r8  {top:51px;}	/* link if they are in an expanded list. */
#links a:hover span.r9  {top:29px;}
#links a:hover span.r10 {top:7px;}	/* the second column may go down past the*/
#links a:hover span.r11 {top:-14px;}	/* first when expanded.                  */

/* Expanding memu */
#menu {
font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	font-style: normal; 
	line-height: 12pt; 
	font-weight: normal; 
	color: #000000; 
	letter-spacing: -0.05em; }

#menu ul {margin: 0px; padding: 0px;}
#menu ul li ul {margin-left:10px;}
#menu ul li {
	display: block;
	position: relative;
	list-style-type: none;}

#menu ul li img {cursor: pointer;}
#menu ul li.closed {list-style-type: circle;}
#menu ul li ul.closed {display: none;}
#menu ul li ul.opened {display: block;}
#menu ul li a.close, #menu ul li a.open {text-decoration: none;}
#menu ul li ul li{padding-left:1em;text-indent:-1em;}	/* if a listitem goes to 2 lines, indent */

/* SiteMap Expanding Menu */

#sitemap table {width: 400px; border: 1px solid gray;}
#sitemap a {text-decoration: none;}
#sitemap tr td {border-bottom: 1px solid gray;}
#sitemap tr td.file {border-left: 1px solid gray;text-indent:2px;}
#sitemap img.close, #sitemap img.open {cursor: pointer;}

#sitemap tr.closed {display: none;}

#sitemap tr.opened {display: clear;}
#sitemap tr.last td {border-bottom: none;}

/*************************************************/
/* TEXT STYLES                                   */
/*************************************************/

/* Standard text style */
.body {  
	font: normal normal 12px/14px Verdana, Arial, Helvetica, sans-serif;  
	color: #000000; 
	letter-spacing: -0.05em;}
.body li{line-height:15px;}
ul.body {margin-top:5px;}		/* reduce the top margin for lists in text */
.text {margin-bottom:10px;}		/* add to paragraphs with the body style for spacing */
.spacer{margin-bottom:60px;}		/* add to elements at the bottom of centercol */

/* For navigation links in the header space */
.link a, .link a:hover {		
	font: normal normal 10px/10px Verdana, Arial, Helvetica, sans-serif;  
	color: #000000; 
	letter-spacing: -0.05em; 
	text-decoration:none;
	background-color: #FFFFFF;}

.bluetext{color: #0066FF;}

.redhighlight {				/* For customer survey and RFQ forms */
	background-color: #FFC0C0;
	color: #FF1010; }

.textbox{margin:10px;}



/*************************************************/
/* TEXT BOXES                                    */
/*************************************************/

.blackbox, .graybox {
	font: normal normal 12px/14px Verdana, Arial, Helvetica, sans-serif;
	border:1px solid black;
	max-width:800px;
	padding: 5px;
	margin: 5px 0px;}
.graybox {border: 2px solid #999999;}
.graybox div.eg{margin-left:3em;padding-left:2em;width:19em;border:1px dotted #b5caf4;}



/* Solid blue border, light blue background */
.bluebox {
	font: normal normal 12px/14px Verdana, Arial, Helvetica, sans-serif; 
	background: #E3EAF9;
	padding: 2px;
	border: 2px #0065FF solid;
	margin: 5px 0px;}
.bluebox h2{
	font-style:italic; 
	font-weight:bold;
	font-size:13px;
	line-height:15px;
 	color:black;}
.bluebox p{margin:0px 5px 5px 5px;}

/* For the featured product on the main products page */
.productbox {
	float: right;
	padding: 5px;
	margin: 5px;
	background: #E3EAF9;
	width: 400px;
	border: 2px #0065FF solid;
	-webkit-border-radius:20px;
	-khtml-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;}
.productbox h3 {padding-top:0px;}
.productbox img {float:right;margin:5px;}

/* Left Column Box */
.lcbwrap{margin:0px 5px}
.leftcolbox{
	border: 1px solid #e4eafc;
	background: #e4eafc;
	padding: 3px;}
.leftcolbox h2{font-size:12px;}
.leftcolbox img{margin-bottom:5px;}

/* Right Column Box */
.rightcolbox {margin-bottom:10px;}
.rightcolbox p{margin-top:0px;}
.rightcolbox h4{width:65%;border-bottom:1px solid #b5caf4;}

/* Link Menu */
.linkmenu{			
	width:198px; 		
	margin:0;
	border-left: 1px solid black; border-right:1px solid black;
	background:white;
	}
.linkmenu h3{padding-top:0;padding-bottom:0.1em;}
.linkmenu h4{padding-top:0;padding-bottom:0.25em;}
.linkmenu h4.space{padding-top:0.75em;}

.linktop{width:200px;height:20px;margin:10px 0px 0px 0px;background: url(/images/linkmenu_top.gif) no-repeat;}
.linkbottom{width:200px;height:20px;margin:0px 0px 10px 0px;background: url(/images/linkmenu_bot.gif) no-repeat;}


.linkmenutext{margin-left:10px; margin-right:15px;}
.linkmenu p{
	margin-left:0px;
	margin-bottom:0px;
	font:normal normal 12px/14px Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: -0.05em;}
.linkmenu p.list{padding-left:1em;text-indent:-1em;}



/*************************************************/
/* MISCELLANEOUS                                 */
/*************************************************/

#Img_hdr {text-align:center;}
#Img_text {text-align:center;}
#Product_Img {display:block;margin:5px auto 5px;}	/*Center the image */
.margin_img{display:block;margin:10px auto 5px;}
.train{min-width:338px; min-height:170px;background: url(/images/train.gif) no-repeat center;}
.topbottom{border-left:0px;border-right:0px;}