/*
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; }

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) repeat-x  }
a             { color:#009EBD; text-decoration:none;}
a:hover       { color:#009EBD; text-decoration:underline }

h1            { font-size:18px; color:#172163; margin:10px 0 5px 0; font-weight:bold; text-align:left; }
h2            { font-size:12px; color:#333333; margin:10px 0 5px 0; font-weight:bold; text-align:left; }
h3            { font-size:18px; color:#6C99C9; margin:10px 0 10px 0; font-weight:normal; text-align:left; }
h4            { font-size:17px; color:black; margin: 0 0 10px 0; font-weight:normal; text-align:left; }

p             { text-align:left; line-height:18px;}
.sm           { font-size:.8em }

/* :::::::::::::::::::::::::::::::  Mast, Top Nav, Drop Downs   ::::::::::::::::::::::::::::::::::::::: */
  .mastHead       { width:914px; height:95px; float:left; border:0px solid red; background-color:#FFFFFF; }
  
  .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; border:0px solid red; }
.midContain   { width:934px; margin: 20px 0 20px 0; overflow:hidden; }
.prodContain  { width:908px; height:168px; padding:12px 12px 12px 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 0 20px; list-style-image:url(../../images/rndbullet.gif) }
 ul.Bullet li { margin:5px 0 0px 0; line-height:13px;}

.prod      { width:138px; height:124px; margin:5px 13px 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:138px; border:0px 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;
}

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 a { color:#FFFFFF; font-weight:bold; }

.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: relative; top:0px; left:0px; height:23px; margin:0 0 0 20px; padding:0; background:#FFFFFF; border:0px solid #FFCC00; z-index:5; float:right}
	#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:0px 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; }	 	 

 	/* begin styles the drop downs */ 
		#mainnav li ul li a 		   { color: #A5A2A5; display: block; background:#F7F7F7; width: 160px;  padding-top:2px; padding-bottom: 3px; padding-left:11px; font-size: .9em; border-bottom:1px solid #D6DFE7; border-left:0px solid #D6DFE7; border-right: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 }	
	.footer a       { color:#999999; }
	.footer a:hover { color:#A0002C; }