@charset "utf-8";
/* TDCI.com index Layout Document */

/* imports to typography and reset */
@import '/includes/default-copy.css';

/* ------------------ Body and Generic classes ------------------ */
body{
	background-color: #e7e7e7;
	background-image: url(../images/bkgrnd.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}
			
.center{width:1020px; margin:0 auto;}
			
.access{position:absolute; left:-9000px;}

div.fullRow{float:left; width:100%; margin:0 0 .25em;}
	
	div.halfRow{float:left; width:48%; margin:0 2% 0 0;}
	* html div.halfRow{margin:0 1.5% 0 0;}
	
		div.thirdRow{float:left; width:31%; margin:0 2% 0 0;}
		
			div.quarterRow{float:left; width:23%; margin:0 2% 0 0;}
					
				div.last{margin-right:0;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
		
/* ------------------ Branding Area ------------------ */
#brandingWrapper{
	float:left;
	width:100%;
/*	background:#fff url(../images/header-wrapper-bg.jpg) no-repeat center bottom;  */
	}
	
	#branding{
	position:relative;
	float:left;
	width:1000px;
	padding:5px;
	height: 65px;
	overflow: visible;
	background-color: #ffffff;/*	background:#FFFFFF url(/images/header-wrapper-bg.jpg) no-repeat center bottom;  */
		}

		#logo{
		position:absolute;
		left:25px;
		top:4px;
		float: left;
			}
			
		.home{
		position:absolute;
		left:515px;
		top:30px;
			}

		/* -=-=-=- Quick Search -=-=-=- */
		#quick-searchBox{
	float:right;
	width:300px;
	margin:15px 15px 0 0;
	background-position: top;
			}
			
			#quick-searchBox form{margin:0;}
			
				#searchField{
					float:left;
					width:215px; height:1.5em;
					margin:5px 0 0 0;
					}
					
				#btn-search{
					float:right;
					width:auto; height:auto;
					background:none; border:none;
					}

/* ------------------ Main Navigation ------------------ */
#mainNavWrapper{
	position:relative;
	z-index:2;
	float:left;
	width:100%;
/*		background:#014c8e url(/images/mainnav-wrapper-bg.png) repeat-x center top;  */
	}

	#mainNav{
	float:left;
	width:992px;
	margin:0;
	padding:0 0 0 20px;
		background:#d7d7d7 url(/images/mainnav-wrapper-bg.png) repeat-x left top;    
		}

		#mainNav li.mn-li-toplevel{
			position:relative;
			float:left;
			margin:0 5px 0 0; padding:0;
			background:none;
			text-align:center;
			}
		#mainNav li.mn-li-toplevel.last{margin:0;}
			
			#mainNav a.mn-a-toplevel{
				display:block;
				font-family:Segoe UI, Arial, Helvetica;
				font-size:0.95em;
				line-height:1.33em;
				text-decoration:none;
				color:#002c77;
				font-weight: 700;
						}
			#mainNav a.mn-a-toplevel:hover, #mainNav a.mn-a-toplevel:focus, #mainNav a.mn-a-toplevel.mainMenuParentBtnFocused{
			/* background:url(/images/mainnav-toplevel-on-left.png) no-repeat left top;  */
			text-decoration:underline;
				}
			
			#mainNav a.mn-a-toplevel span{
				display:block;
				padding:8px 0;
				}
			#mainNav a.mn-a-toplevel:hover span, #mainNav a.mn-a-toplevel:focus span, #mainNav a.mn-a-toplevel.mainMenuParentBtnFocused span
			{
			/* background:url(/images/mainnav-toplevel-on-right.png) no-repeat right top;  */
			}
				
				
		/* list item widths, using db-PageName */
		#mn-prod a.mn-a-toplevel{width:164px;}
		#mn-selling a.mn-a-toplevel{width:130px;}
		#mn-erp a.mn-a-toplevel{width:150px;}
		#mn-services a.mn-a-toplevel{width:110px;}
		#mn-customers a.mn-a-toplevel{width:120px;}
		#mn-news a.mn-a-toplevel{width:120px;}
		#mn-about a.mn-a-toplevel{width:100px;}
/*		#mn-support a.mn-a-toplevel{width:76px;}
		#mn-contact a.mn-a-toplevel{width:96px;} */
		
			
/* ------------------ Second Level ------------------ */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 6px;
	margin:0 0 0 -2px;
	}

#subMenusContainer{
	display:block;
	position:absolute;
	left:0; top:0;
	z-index:1000000000;
	width:100%;	height:0;
	overflow:visible;
	}

/* Need this to display menus on hover if Javascript is disabled */
#mainNav .mn-li-toplevel:hover > ul {
	display:block;
}

/* Need this to hide menus on start/non-hover if Javascript is disabled */
#mainNav ul{
	display:none;
}

#mainNav ul, #subMenusContainer ul{
	position:absolute;
	left:0;
	/*width:15em;*/
	width:180px;
	margin:0;
	padding:0;
	background:#F4F4F4;
	border:2px double #999999;
	-moz-border-radius-topright:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-bottomleft:6px;
	-webkit-border-bottom-left-radius:6px;
	}
	
	#mainNav ul li, #subMenusContainer li{ 
		/*great place to use a background image as a divider*/
		display:block;
		float:none;
		margin:0; padding:0;
		background:none;
		}
		
		#mainNav ul a, #subMenusContainer a{
	display:block;
	/*width:176px;*/ /* Would prefer EMS, but ran into a funky IE6-7 display block issue with no width */
	margin:0;
	padding:6px 5px;
	background:url(/images/mainnav-2ndlevel-bg.png) no-repeat center bottom;
	font-size:0.95em;
	font-weight:700;
	text-align:left;
	text-decoration:none;
	color:#002c77;
			}
		#mainNav ul .last a, #subMenusContainer .last a{background:none;}
			#mainNav ul a:hover, #subMenusContainer a:hover,
			#mainNav ul a:focus, #subMenusContainer a:focus{
				background:#C0CAD6 url(/images/mainnav-2ndlevel-bg.png) no-repeat center bottom;
				}
			#mainNav ul .last a:hover, #subMenusContainer .last a:hover, #mainNav ul .last a:focus, #subMenusContainer .last a:focus{background:#C0CAD6;}
				
	/* ------------------ Second Level Non-Js ------------------ */ 
	/* For 2nd level, not sure about SEO implications
	#mainNav ul ul{display:none;}
		#mainNav ul li:hover ul{display:block;}
	*/	
		/*#mainNav ul ul, #mainNav li:hover ul{display:none;}*/
		
		#mainNav ul ul{ display:none; }
		
		#mainNav li li:hover ul{
			display:block;
			left:8em; top:1em;
			}

/* ------------------ Marketing Area ------------------ */
#marketingAreaWrapper{
	position:relative;
	z-index:1; 
	float:left;
	width:100%;
/*	background:url(/images/marketing-wrapper-bg.jpg) no-repeat center top;  */
	}
	
	#marketingArea{
	position: relative;
	width:1000px;
	padding:0;
	overflow: hidden;
/*	background:url(/images/marketing-wrapper-bg.jpg) no-repeat center top; */
		}
		
	
/* ------------------ Content Area ------------------ */		
#contentWrapperWrapper{
	float:left;
	width:100%;
		}
	
	#contentWrapper{
	position:relative;
	float:left;
	width:1000px;
	padding:0px 10 20px 0;
	margin: 0px;
	background-color: #fff;
/* 	background-image: url(../images/content-bkg.jpg);
	background-repeat: repeat-y;
	background-position: 177px;  */
			}

/* ------------------ Additional Info Area ------------------ */
#aditInfo{
	float:left;
	width:180px;
	padding-left: 8px;
	}
	
	.adit-box{
	float:left;
	width:170px;
	margin:0 0 1.0em;
		}
	
		.adit-header{
	position:relative;
	height:30px;
	overflow:hidden;
	margin:0 0 0.2em 3px;
	padding:5px 0 0 21px;
/*	background:url(../images/orng-sidebar.jpg) no-repeat left;  */
	padding:5px 0 0 3px;
	font-size:14px;
	line-height:1.33em;
	font-weight: bold;
	font-style: oblique;
	color:#f89a19;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-shadow: 0.1em 0.1em 0.2em #999;
			}

		.adit-header-left{
	position:relative;
		height:30px;
	overflow:hidden;
	margin:0 0 0.2em 3px;
	padding:5px 0 0 3px;
	font-size:14px;
	line-height:1.33em;
	font-weight: bold;
	font-style: oblique;
	color:#f89a19;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-shadow: 0.1em 0.1em 0.2em #999;
			}

			
		.adit-content{padding:10px 0 0 10px;}

		.adit-download{
	text-align:left;
	font-family: Segoe UI, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #002c77;
	line-height: 1.2em;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
			}

		.adit-download a{color: #002c77; text-decoration:none;}
		.adit-download a:hover, a:focus {color: #3173ac;}		
					
/* -=-=-=- Additional Info Sub-nav -=-=-=- */
		#adit-subnav .adit-content{
	padding:0 5px 0 0;
}
		
			#adit-subnav li.sn-toplevel{
				margin:0;
				padding:0;
				background:none;
				border-bottom:1px solid #f89a19;
				font-family: Segoe UI, Arial, Helvetica, sans-serif;
				font-size: 0.85em;
				font-weight: bold;
				color: #002C77;
					}
				
				#adit-subnav li.sn-toplevel a.sn-toplevel{
					display:block;
					padding:5px;
					text-decoration:none;
					color:#002C77;
						}
				#adit-subnav li.sn-toplevel a:hover, #adit-subnav li.sn-toplevel a:focus, 
				#adit-subnav li.sn-toplevel.active a.sn-toplevel{background:url(/images/subnav-toplevel-bg-on.png) repeat-y right top;}
				
		/* -+-+- Second Level -+-+- */
				#adit-subnav li.sn-secondlevel{margin:0; padding:0; background:none;}
				
					#adit-subnav li.sn-secondlevel a{
						display:block;
						padding:2px 0px 2px 10px;
						text-decoration:none;
						font-family: Segoe UI, Arial, Helvetica, sans-serif;
						font-size: 0.85em;
						font-weight: bold;
						color:#666666;
						margin: 0px;
							}
					#adit-subnav li.sn-secondlevel a:hover, #adit-subnav li.sn-secondlevel a:focus,
				    #adit-subnav li.sn-secondlevel a.active{background:url(/images/subnav-secondlevel-bg-on.png) repeat-y right top;}
					
}
					
						
						#adit-subnav li.sn-secondlevel span{
							display:block;
							padding:5px;
						/*	border-top-width: 1px;
							border-top-style: solid;
							border-top-color: #cccccc; */
							}
						#adit-subnav li.sn-secondlevel.last span{border:none;}

	/* -=-=-=- Additional Info Testimonials -=-=-=- */
		#adit-testimonials blockquote{margin:.6em 0 1em 0;}
	
		#adit-testimonials blockquote p{}
	
		#adit-testimonials .qn-testimonial-img{
			float:left;
			margin:0 5px 0 0;
			}
		
/* ------------------ Content ------------------ */
#content{
	float:left;
	width:560px;
	padding:0 0 0 20px;
	}

	.nxtbutton{
	float:right;
	padding:0;
	margin-top: 20px;
	margin-right: 30px;
		}

			
/* ------------------ Extras (news, testimonials, training, search form) ------------------ */
#extras{
	float:right;
	width:180px;
	margin:5px 0 0;
	}
	
	.extras-box{
	float:left;
	width:180px;
	margin:0 6pt 2em 0px;
			}
	
		.extras-header{
			display:block;
			height:36px;
			overflow:hidden;
			margin:0 0 0.2em;
			padding:8px 0 0 20px;
			background:url(/images/extras-subheaders-bg.png) no-repeat left top;
			font:bold 1.2em/1.33em Verdana, Arial, Helvetica;
			text-shadow:1px 1px 4px #000;
			color:#fff;
					}
			.extras-header a, .extras-header span{text-decoration:none; color:#fff;}
			
		.extras-content{
			padding:0 10px 0 10px;
			}
	
	/* -=-=-=- Public Training Button -=-=-=- */
	#btn-public-training{
	margin-top: 10px;
}
	
	
	/* -=-=-=- Reduced Screen Images -=-=-=- */
	#imgBox{
	margin-top: 10px;
	margin-right: 20px;
		}
		#imgBox .screen-img{
			text-align:center;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 11px;
			color: #002c77;
			line-height: 1.2em;
			}

	#imgBox .extra-border{
	border: 1px solid #CCCCCC;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom:10px;
	padding-left: 10px;
	background-color: #Ffffff;
		}

#imgBox .extra-title{
	display:block;
	margin:0.5em 0 0em;
	font:1.2em/1.33em Segoe UI;
	color:#002C77;
	padding-top: 5px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 15px;
	background-color: #F0F0F0;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px none #CCCCCC;
	border-left: 1px solid #CCCCCC;
	}



	/* -=-=-=- Resource Navigation -=-=-=- */
	
	
	#resource-nav{
	background:url(/images/resource-nav-top.png) no-repeat left top;
	padding-top: 8px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
	float: left;
	width: 156px;
	margin-left: 15px;
		}
		
		#resource-nav-btm{
			float:left;
			padding:0 0 9px;
			background:url(/images/resource-nav-btm.png) no-repeat left bottom;
					}
			
			#resource-nav-inner{
				float:left;
				width:140px;
				padding:0 0 0 16px;
				background:url(/images/resource-nav-mid.png) repeat-y left top;
				font-family: Arial, Helvetica, sans-serif;
				font-size: .85em;
				color: #072D4D;
				font-weight: bold;
						}
				
				#resource-nav h2{
					font-size:1.05em;
					line-height:1.33em;
					font-style:normal;
					font-weight:bold;
					padding-left: 6px;
					padding-bottom: 2px;
									}
									
					#resource-nav li{
						width:125px;
						margin:0 0 4px;
						padding:0;
						background:url(/images/resource-nav-btn-btm.png) no-repeat left bottom;
						}
						
						#resource-nav a{
							display:block;
							width:117px;
							min-height:18px;
							padding:2px 0 2px 12px;
							background:url(/images/resource-nav-btn-top.png) no-repeat left top;
							font-family:Arial, Helvetica;
							text-decoration:none;
							color:#072d4d;
							}
						#resource-nav a:hover, #resource-nav a:focus{color:#f89a19;}


	/* -=-=-=-=-=-=-=-=-=-=-=-=- Logo Boxes  -=-=-=-=-=-=-=-=-=-=-=-=- */
	
	
	#logo-box{
	background:url(/images/logo-box-top.png) no-repeat left top;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
	width: 470px;
	margin-bottom: 20px;
			}
		
		#logo-box-btm{
		padding:0 0 11px;
		background:url(/images/logo-box-btm.png) no-repeat left bottom;
					}
			
		#logo-box-inner{
			padding:0 0 0 0px;
			background:url(/images/logo-box-inner.png) repeat-y left top;
			width: 468px;
				}
				
.logoList{
	margin:0px 0 0 0px;
	padding-left: 5px;
	overflow: auto;
		}

	.logoList .logoList-image{
	padding:5px 0;
	float: left;
	width: 132px;
	background-position: center;
	text-align: center;
		}

	.logoList li{
	margin:0 0 0 120px;
	width: 300px;
	list-style-type: none;
	background-image: none;
		}

	.logoList .logoList-header{
	display:block;
	font-weight:900;
	text-decoration:none;
	font-size: 1.1em;
	padding-bottom: 3px;
		}
		
	.logoList .logoList-info{
	display:block;
	width:300px;
	overflow:hidden;
	font-size:0.98em;
	line-height:1.33em;
	color: #333;
		}

	.logoList .logoList-icon{
	display:block;
	overflow:hidden;
	font-size:0.95em;
	line-height:1.33em;
	color: #333;
	padding-left: 15px;
	padding-top: 6px;
		}

		.logoList .logoList-icon a{color: #002c77; text-decoration:none;}
		.logoList .logoList-icon a:hover, a:focus {color: #3173ac;}		

			
/* ------------------ Utility ------------------ */		
#utilityWrapper{
	float:left; 
	width:100%; 
	/* background:#6c9dc1 url(/images/index-utility-bg.png) no-repeat center top; */ 
	/* border-top:1px solid #0f385d; */
	}
	
	#utility{
	float:left;
	width:1020px;
	padding:10px 0 5px;
	/*background:#6c9dc1 url(/images/index-utility-bg.png) no-repeat center top; */
	color:#333333;
		}
	
	#utilityLower{
	float:left;
	width:972px;
	padding:4px 20px 0px;
	font-family: Segoe UI, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #002c77;
	background-color: #e7e7e7;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #f1a054;
	border-right-color: #f1a054;
	border-bottom-color: #f1a054;
	border-left-color: #f1a054;
	height: 40px;
	border-right-style: none;
	border-left-style: none;
		}
		.utility-right{
	float: right;
	padding-right: 20px;
			}

	/* -=-=-=- Utility Nav and Secondary Utility Nav -=-=-=- */	
	#utilityNav{
	padding:0 0px 0 30px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	}

		#utilityNav li{
	float:left;
	background:none;
	font-weight:900;
	font-size: 9px;
	font-family: Segoe UI, Arial;
	line-height: 18px;
	padding-left: 5px;
			}
		#utilityNav li.last{margin:0;}
			
		#un-product{
	width:150px;
	padding-top: 10px;
}
		#un-selling{
			width:150px;
			padding-top: 10px;
}
		#un-erp{
			width:135px;
			padding-top: 10px;
}
		#un-services{
			width:115px;
			padding-top: 10px;
}
		#un-customers{
			width:140px;
			padding-top: 10px;
}
		#un-news{
			width:80px;
			padding-top: 10px;
}
		#un-about{
			width:110px;
			padding-top: 10px;
}
		#un-contact{width:75px;}
		#un-sitemap{width:60px;}
			
			#utilityNav a{
				text-decoration:none;
				color:#666666;
				font-size: 9px;
				font-family: Segoe UI ,Arial;
				line-height: 1.1em;
					}
				#utilityNav a:hover, #utilityNav a:focus{text-decoration:underline; color:#f89a19;}	
	
			
			#utilityNav ul li{
				float:none;
				margin:0 0 0.6em 0px;
				font-size:9px;
				font-weight:500;
				font-family: Segoe UI ,Arial;
				line-height: 1.1em;
				}
				
			#utilityNav ul a{
				color:#999999;
					}
				#utilityNav ul a:hover, #utilityNav ul a:focus{text-decoration:underline; color:#f89a19;}	

	/* -=-=-=- Copy Info -=-=-=- */
	#copyInfo{
		display:inline;
		background:url(/images/cite-copy.gif) no-repeat left center;
		padding:0 0 0 30px;
		font-size:1em; line-height:1.33em;
		font-style:normal;
		color:#c6e3fc;
		}
		
		#copyInfo img{margin:0 0 0 10px;}
			
	
	/* -=-=-=- Legal and Address -=-=-=- */
	#legal-address{margin:.2em 0;}
		
		#legal-address{font-style:normal;}
		
		#legal-address .street-address, #legal-address .postal-code{
			 margin:0 .5em 0 0;padding:0 .5em 0 0;
			 border-right:1px solid #c6e3fc;
			 }
		
	/* -=-=-=- TKG Brand -=-=-=- */
	#tkg-brand a{text-decoration:none; color:#fff;}
		#tkg-brand a:hover, #legal-address a:focus{color:#f89a19;}
		

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
/* ------------------ Media Box Advanced ------------------ */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */	
#mbOverlay{
	position:absolute;
	z-index:9998;
	left:0;
	width: 100%;
	background-color:#222;
	cursor:pointer;
	}

#mbOverlay.mbOverlayFF{background:transparent url(/includes/script/mootools/mediabox/images/80.png) repeat;}

#mbOverlay.mbOverlayIE{background: transparent url(/includes/script/mootools/mediabox/images/50.gif) repeat;}

#mbCenter, #mbBottomContainer{
	position:absolute;
	z-index:9999;
	left:50%;
	overflow:hidden;
	background-color:#000;
}

.mbLoading{background: #000 url(/includes/script/mootools/mediabox/images/BlackLoading.gif) no-repeat center;}

#mbImage {
	position:absolute;
	left:0; top:0;
	border: 10px solid #000;
	background-repeat: no-repeat;
/*	Sets the style for inline content, if no style is given	*/
	font-family: Myriad, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color:#fff;
	text-align: left;
}

/*	Sets the style for inline content, if no style is given	*/
#mbImage a, #mbImage a:link, #mbImage a:visited{color: #ddd;}

/*	Sets the style for inline content, if no style is given	*/
#mbImage a:hover, #mbImage a:active {
	color: #fff;
}

#mbBottom {
	font-family: Myriad, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #999;
	text-align: left;
	background:#000;
	border: 10px solid #000;
	border-top-style: none;
}

#mbTitle {
	display: inline;
	color: #fff;
	font-weight: bold;
	line-height: 20px;
	font-size: 12px;
}

#mbNumber {
	display: inline;
	color: #999;
	line-height: 14px;
	font-size: 10px;
}

#mbCaption {
	display: block;
	color: #999;
	line-height: 14px;
	font-size: 10px;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
	display: block;
	float: right;
	height: 20px;
	width: 46px;
	background: transparent url(/includes/script/mootools/mediabox/images/BlackClose.gif) no-repeat center;
	margin: 0;
	outline: none;
}

#mbPrevLink {
	width: 69px;
	background: transparent url(/includes/script/mootools/mediabox/images/BlackPrevious.gif) no-repeat center;
}

#mbNextLink {
	width: 41px;
	background: transparent url(/includes/script/mootools/mediabox/images/BlackNext.gif) no-repeat center;
}

#mbCloseLink {
	width: 46px;
	background: transparent url(/includes/script/mootools/mediabox/images/BlackClose.gif) no-repeat center;
}

#mbError {
	position: relative;
	top: 30%;
	font-family: Myriad, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	border: 10px solid #700;
	padding: 20px 10px 30px;
	margin: auto;
}