/*
Author:

Tim Ferman | Tim@TimFerman.com
Date: April 2008

*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
.cleaner { clear:both; }
a {cursor:pointer;}
a:active, a:focus { outline: none; outline-style:none}
.cleaner { clear:both; }
strong	{font-weight: bold; }
em	{ font-style:italic;}

body          { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#555555; text-align:left; line-height:16px; background:url(../../images/common/water-bodybg.jpg) #d2e9f1 repeat-x  }
a             { color:#009EBD; text-decoration:underline;}
a:hover       { color:#045b6c; text-decoration:underline }

h2            { font-size:16px; color:#333333; margin:10px 0 5px 0; font-weight:400; text-align:left; }
h3            { font-size:14px; color:#1c2977; margin:10px 0 5px 0; font-weight:bold; text-align:left; }
p             { text-align:left; line-height:18px; margin-bottom: 10px; margin-top:5px; }
.sm           { font-size:.8em }
h3.lcol       { font-size:15px; color:#1c2977; margin:10px 0 5px 0; font-weight:bold; text-align:left;  }

.vit { color:#FFFFFF; }

/* :::::::::::::::::::::::::::::::  Mast, Top Nav, Drop Downs   ::::::::::::::::::::::::::::::::::::::: */
  .mastHead       { width:914px; height:95px; float:left; border:0px solid red; background-color:#FFFFFF; position: relative; }
  
  .logo           { width:135px; height:64px; float:left; margin:18px 0 20px 28px; padding:0;    }

  .utils          {  height:25px; float:right; border:0px solid #3366FF; color: #00ABCD; margin:10px 0px 30px 0; padding:0; text-align:right;  }
  .utils a        { font-size:.9em;  } 
  .divider        { width:3px; height:12px; display:block; border-left:1px solid #CCCCCC }
  .utils ul       { list-style:none; float:left; }
  .utils ul li 	  { margin:0px 10px 0px 0; padding:0 10px 0 0; float:left; text-align: left; border-right:1px dashed #CCCCCC}
  .utils img      { margin-right:5px; }

/*:: Building Blocks :: */
.mainContain  { width:934px; border:0px solid red; /*overflow:hidden;*/ }
.mastContain  { width:934px; height:95px; padding:0; margin:20px 0 0 0; position: relative; }
.midContain   { width:934px; margin: 20px 0 20px 0; overflow:hidden; }
.prodContain  { width:908px; height:168px; padding:12px; background:url(../../images/home/box3bg.png); text-align:center; }


/* ::::::::::::::::::::::: HOME :::::::::::::::*/

/*.midCol1     { float:left; width:642px; height: 358px; padding:0; margin:0; border:0px solid #FFFFFF; background: url("img/girl_flower.png") no-repeat top left; position: relative; }*/
/*.midCol1     { float:left; width:642px; height: 358px; padding:0; margin:0; border:0px solid #FFFFFF; background: url("img/girl_face.png") no-repeat top left; position: relative; }*/
.midCol1     { float:left; width:642px; height: 358px; padding:0; margin:0; background-color:transparent; background: url("img/girl_grass.png") no-repeat top left; position: relative; }

.midCol2      { float:left; width:290px; height:340px; padding:0; margin:0; border:0px solid #FFCC00; background:#00ABCD;  }

.intro          { width:260px; margin:6px; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; color:#FFFFFF; line-height:24px; text-align:left; }
.intro a        { font-weight:bold; color:#FFFFFF;}
.controls       { width:246px; margin:16px 0 10px 0; height:42px; background:url(../../images/home/bluebreak.gif) repeat-x; }
.controls .item     { float:left; margin:10px 6px 0 0; }
.controls .item img { margin:2px; }
.spotlight          { border:0px solid red; width: 236px; padding:0 10px 0px 10px; background:#009EBD; }
.spotlight img      { margin-top:30px; }

 ul           { text-align:left; }
 ul.Bullet    { margin: 3px 0 20px 20px; list-style-image:url(img/bullet.gif); line-height:1.2em; }
 ul.Bullet li { margin:5px 0 0px 0; line-height:13px;}


.prod      { width:142px; height:124px; margin:5px 10px 0px 0; display:block; text-align:center; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; size:12px; float:left; line-height:14px; }
.prod a    { color:#99FFFF; font-weight:bold; }
.prod div  { width:139px; border:1px solid #FFFFFF; margin:0 0 4px 0}

/* start javascript popup area */
#productShowcaseBar { width: 624px; height: 68px; position: absolute; bottom: 7px; left: 10px; background-image: url("img/bg_productShowcaseBar.png"); background-repeat: no-repeat; background-position: center; background-color:transparent; filter:alpha(opacity=70); moz-opacity: .7; opacity: .7;
}
#line { width: 1px; height: 58px; background-color: #8CD6E4; position: absolute; left: 320px; bottom: 11px; }

.midCol1 .actuator { position: absolute; width: 291px; height: 58px; cursor: pointer; z-index: 3; background-color:transparent; }

#productShowcase_left { left: 7px; bottom: 17px; background: url("img/bg_productPopup_left_off.png") transparent top left no-repeat; }
#productShowcase_right { right: 7px; bottom: 17px; background: url("img/bg_productPopup_right_off.png") transparent top right no-repeat; }

.midCol1 .productShowcaseBackground { filter:alpha(opacity=90); moz-opacity: .9; opacity: .9; z-index: 2; display: none; background-position: top left; background-repeat: no-repeat; position: absolute; width: 627px; height: 335px; bottom: 17px; left: 0; background-color:transparent;
}

.midCol1 .productShowcaseContents { display: none; width: 627px; height: 277px; position: absolute; top: 6px; left: 7px; z-index: 3; text-align: left; background-color:transparent; }



/* ::::: Sub Page Left Column :::::  */
#subWrapper	{ width:934px; float: left; }

.leftCol	{ float: left; width: 666px; margin-right: 15px; _margin-right: 10px; text-align: left; margin-top: 40px; }
.leftCol h1	{ font-size: 28px; color: #1c2977; font-family: Verdana, Arial, Helvetica, sans-serif; padding-bottom: 13px; padding-top: 5px; }
.leftCol .txt	{ color: #666; font-size: 12px; line-height: 18px; margin-bottom: 22px; }

.leftCol .prodBox	{ background: url(img/bg_prodBox.png) no-repeat; width: 114px; height: 154px; float: left; margin: 0 3px 3px 0; text-align: center; padding: 11px 8px 11px 8px;}
.leftCol .prodBox a	{ color: #00839d; text-decoration: none; }
.leftCol .prodBox a:hover	{ text-decoration: underline; }

.leftCol .lgBox			{ float: left; width:663px; background: url(img/bg_boxRoundBottom.png) no-repeat bottom; padding-bottom: 9px; margin-top: 20px; }
.leftCol .lgBox .top	{ float: left; width:663px; background: url(img/bg_boxRoundTop.png) no-repeat; padding-top: 8px; }
.leftCol .lgBox .fill	{ float: left; background: #fff; width: 623px; padding: 15px 20px; font-size: 12px; }

/* ::::: Landing Pages */

#lp .leftCol	            { float: left; width: 666px; margin-right: 15px; _margin-right: 10px; text-align: left; margin-top: 20px; }
#lp h1	                    { font-size: 20px; color: #1c2977; font-family: Verdana, Arial, Helvetica, sans-serif; padding-bottom: 13px; }
#lp .leftCol .lgBox			{ float: left; background: url(img/bg_boxRoundBottom.png) no-repeat bottom; padding-bottom: 9px; margin-top: 0px; }
#lp .leftCol .lgBox .top	{ float: left; background: url(img/bg_boxRoundTop.png) no-repeat; padding-top: 8px; }
#lp .leftCol .lgBox .fill	{ float: left; background: #fff; width: 623px; padding: 15px 20px; font-size: 12px; }

.specialPageHero          { width:622px; height:172px; overflow:hidden; }
.promo1                   { background:url(../../images/special/HdrBg_picturethis.jpg) no-repeat; }
.promo2                   { background:url(../../images/special/HdrBg_offer.jpg) no-repeat; }

.heroCopy                   { float:right; width:322px; height:164px; padding:10px; color:#FFFFFF; }
.specialSteps               { width:640px; height:161px; background:url(../../images/special/processBG.gif) no-repeat; overflow:visible; }
.specialSteps .step         { width:115px; height:115px; float:left; margin-top:42px; color:#1c2977; font-size:11px; position:relative; }
.one                  { left:10px; }
.two                  { left:56px; }
.three                { left:106px; }
.four                 { left:154px; }

.logos                  { margin:15px 0 15px 0; font-size:10px; color:#999999; }
.logos .item            { float:left; margin:3px 2px 0 0; }

ul.callout            { list-style:url(img/bullet.gif); text-align:left; color: #FFFFFF; margin:0 0 20px 20px; padding:0; display:block; line-height:1.2em; }
ul.callout li         { margin-top:10px; color: #FFFFFF; }


/* Carousel */
 #lcMid		            { padding: 0px 0 0 0px; margin: 0 0 15px 0px; position: relative; overflow:hidden; border:0px solid #990000; height:180px; } /*carousel*/
/*carousel css*/
	#mycarousel 			{ display:block; float: left; margin: 0 0 0 16px; padding: 0; overflow:visible; height:171px; width:626px;  border:0px solid #000099; background:url(../../images/special/carouselBG.gif) no-repeat; }
	.carouselInner			{ float: left; overflow:hidden; margin: 15px 0 0 0; padding: 0; height:200px;}
	ul 					    { margin: 15px 0 0 0px; padding: 0; }
	.jcarousel-list li 		{ width: 126px; margin-right: 5px; height:150px; }
	.jcarousel-list li a 	{ display:block;  }
	
	.jcarousel-list li.first 	{ width: 126px; margin-left:-10px; margin-right: 5px; height:150px; }
	.jcarousel-list l.firsti a 	{ display:block;  }
	
	/*The button-elements are added statically in the HTML document to illustrate how to cutomize the prev/next controls.*/
	.jcarousel-next 			{ position: relative; top: 70px; right: 22px; float: right; cursor: pointer; margin-left:6px } /*right arrow*/
	.jcarousel-next-disabled 	{ cursor: default; }
	.jcarousel-prev 			{ position: relative; top: 70px; left: -15px; float: left; cursor: pointer; margin-right:-6px } /*left arrow*/
	.jcarousel-prev-disabled 	{ cursor: default; }




/* ::::: Sub Page Right Column :::::  */
.rightCol		{ float: left; width: 253px; margin-top: 18px; }
.rightCol h1	{ font-size: 18px; color: #fff; font-weight: normal; font-family: Verdana, Arial, Helvetica, sans-serif; margin-bottom: 13px; }

.rightCol select	{ width: 197px; height: 20px; margin: 0 0 5px 7px; }
.rightCol input		{ float: right; margin-right: 9px; }

.rightCol .boxWrap	{ float: left; width: 253px; margin-bottom: 3px; }
.rightCol .boxTop	{ background: url(img/bg_rightColTop.png) no-repeat; width: 253px; height: 11px; }
.rightCol .boxFill	{ float: left; background: url(img/bg_rightColFill.png) repeat-y; width: 229px; text-align: left; padding: 0 12px; padding-bottom: 1px; }


.rightCol .boxBottom	{ float: left; background: url(img/bg_rightColBottom.png) no-repeat; width: 253px; height: 11px; }

.rightCol .innerLeft	{ width: 75px; float: left; margin: 0 11px 0 7px; }
.rightCol .innerRight	{ width: 126px; float: left; font-size: 13px; color: #FFF; font-family:Tahoma, Arial, Helvetica, sans-serif; }
.rightCol .txt			{ font-size: 13px; color: #FFF; font-family: Tahoma, Arial, Helvetica, sans-serif; }
.rightCol a.bold	{ font-weight: bold; color: #fff; text-decoration: none; }
.rightCol a.bold:hover	{ text-decoration: underline; }

.lineBreak	{ background: url(img/dottedGrayLine.gif) repeat-x; height: 2px; clear: both; margin: 6px 5px 6px 9px; }


a.arrows { background: url("img/arrows.gif") right center no-repeat; color: white; padding-right: 10px; }
a.arrows:hover { color: white; }

#productShowcase_left_background { background-image: url("img/bg_productShowcaseContents_left.png"); left: 7px;
	/*  suck it*/}
#productShowcase_right_background { background-image: url("img/bg_productShowcaseContents_right.png"); left: 10px; background-color:transparent; }

.productShowcaseContents .panel { height: 259px; float: left; position: relative; }

.productShowcaseContents a.arrows { position: absolute; bottom: 10px; left: 20px; }

.productShowcaseContents .courses { width: 174px; padding: 18px 21px 0 18px; background: url("img/bg_productShowcaseContents_divider.gif") right 53px no-repeat; }

.productShowcaseContents .courses dl { margin: 0; padding: 0; }

.productShowcaseContents .courses dl dt,
.productShowcaseContents .courses dl dd
{
	padding-left: 9px;
}
.productShowcaseContents .courses dl dt { background: url("img/bullet.gif") left center no-repeat; color: black; }
.productShowcaseContents dt.last { margin-top: 0 !important; }
.productShowcaseContents .courses dl dd { color: white; font-size: 9px !important; line-height: normal; margin-bottom: 15px; }
.productShowcaseContents .products { padding: 18px 0 0 16px; }
.productShowcaseContents .products .product { width: 121px; height: 129px; background-color: red; float: left; background: url("img/bg_product.png") no-repeat center top; margin-right: 8px; }

.products .product .image { width: 109px; height: 117px; overflow: hidden; position: relative; top: 6px; left: 6px; }
.products .product .image img { width: 109px; height: 117px; }

.products .product .caption { color: white; font-size: 9px; text-align: center; line-height: normal; margin-top: 10px; }
.products .product .caption a { display: block; }
.products .product .caption a,
.products .product .caption a:hover { color: white; }


/* start main nav */
	#mainnav {width:714px; position: absolute; top: 63px; right: 3px; height:23px; margin:0 0 0 20px; padding:0; background:#FFFFFF; border:0px solid #FFCC00; z-index:1000; }
	#mainnav img 		 {float:left;}	
	#mainnav img.nofloat {float:none;}
	/* with international menu item */
	#mainnav ul 	{margin:0 0px 0 0; padding:0; list-style:none; float:left; border:0px solid green; }
	
	#mainnav ul li 	{margin:0px 0 0px 0; padding:0; float:left; position:relative; text-align: left; border:1px solid FFCC00;}
	#mainnav ul a   {text-decoration: none; padding:0; }
	#mainnav li ul  {margin: 0 0 0 0; width: 1px; position: absolute; left: 0; top: 0;  display: none; z-index: 100; }
	 /* Fix IE. Hide from IE Mac \*/
	 * html #mainnav ul li   {float: left; height: 1%; }
	 * html #mainnav ul li a {float: left; height: 1%; }
	 	
	 #mainnav li:hover ul, #mainnav li.over ul {display: block; position: absolute; top:0;}

 /* need to reset the padding and the width for the menu images.  They should not have any of the effects of the menu */	
	 #mainnav li ul li.home a		{width:66px; height:23px; padding:0px; border:0; }
	 #mainnav li ul li.training a	{width:184px; height:23px; padding:0; border:0; }
	 #mainnav li ul li.products a	{width:154px; height:23px; padding:0; border:0; }	 
	 #mainnav li ul li.supplies a	{width:139px; height:23px; padding:0; border:0; }
	 #mainnav li ul li.about a	    {width:171px; height:23px; padding:0; border:0; }
	 
	 #mainnav li ul li ul.third { position: absolute; left: 172px; display:none;}
	 #mainnav li ul li:hover ul.third, #mainnav li.over ul.third {display: block; position: absolute; top:0px; z-index: 100; border-left:0;}
	 #mainnav li ul li ul.thirdlast {position: absolute; left: -153px; display:none;}
	 #mainnav li ul li:hover ul.thirdlast, #mainnav li.over ul.thirdlast {display: block; position: absolute; top:0; z-index: 100;}	 	 

 	/* begin styles the drop downs */ 
		#mainnav li ul li a 		   { color: #FFF; display: block; background: url(img/bg_dropdown.png) no-repeat; width: 160px;  padding-top:2px; padding-bottom: 3px; padding-left:11px; font-size: .9em; border-bottom:1px solid #D6DFE7; z-index: 100;} 

		#mainnav li ul li a:hover 	   { color: #F7FFEF	; background:#2470AC;}
	/* ends styles the drop downs */ 
	
	.breadcrumbs           { height:20px;  background:url(../../images/breakerBGgray.gif) 0 18px repeat-x; text-align:left; font-size:.8em; margin:0px 0 10px 0px; border:0px solid red; color:#2470AC; padding:0 0 4px 0;}  
		  
	.breadcrumbs b { font-weight:bold; color:#333333}   
	.pageHead      { margin:4px 0 4px 0; border:0px solid  red; text-align:left;}	  
		  
		  
	.footer         { width:926px; margin-top:20px; height:50px; text-align:left; color:#999999; font-size:10px; clear: both; }	
	.footer a       { color:#999999; }
	.footer a:hover { color:#A0002C; }
	
	
	
	ul.courses      { list-style-type:none; margin-bottom:30px; }
	ul.courses li   { float:left; display:inline-block; margin-bottom:5px; }
    ul.courses li a { border-right:1px solid #CCCCCC; padding:0 5px 0 3px; }