@charset "utf-8";
/* TKG.com default/portfolio template Layout Document */

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

/* ------------------ Body and Wrappers ------------------ */
/* ------------------ Generic classes not present in the RTE ------------------ */
body{background:#1c1c1c url(/img/default/body-bg.png) repeat-y center top;}

	#bodyWrapper{
		width:922px;
		margin:0 auto;
		}
		
		#bodyTopper{
			float:left;
			width:902px;
			padding:0 0 40px 20px;
			background:url(/img/default/body-wrapper-bg.png) repeat-y center top;
			}
			
.access{position:absolute; left:-9000px;}
		
/* ------------------ Header Area ------------------ */
#header{
	position:relative;
	float:left;
	width:672px; min-height:108px;
	margin:0 0 0 -20px;
	padding:5px 20px 10px 230px;
	background:url(/img/default/header-bg.jpg) no-repeat center bottom;
	text-align:right;
	}

	#logo{
		position:absolute;
		left:60px; /*top:28px;*/ bottom:12px;
		}		
		#logo img{border:none;}
		
	#contactInfo{
		margin:.125em 0 2em;
		font-size:1.333em;
		font-weight:900;
		color:#fdba31;
		}
		
		#contactInfo a{text-decoration:none; color:#fdba31;}
			#contactInfo a:hover, #contactInfo a:focus{color:#fff; text-decoration:underline;}
		
	#slogan{
		margin:0;
		font-size:2em;
		color:#fff;
		}
		
		#slogan span{
			display:block;
			margin:.25em 0 0;
			font-size:.458em;
			}
		
/* ------------------ Main Navigation Access ------------------ */
#mainNav{
	position:relative;
	z-index:2;
	float:left;
	margin:0 0 1em 0; padding:8px 0 0 0;
	background:url(/img/default/mainnav-top-bg.png) no-repeat left top;
	}
	
	#mainNavInner{
		float:left;
		padding:0 0 6px;
		background:url(/img/default/mainnav-btm-bg.png) no-repeat left bottom;
		}
		
		#mainNav ul{
			float:left;
			width:860px;
			margin:0; padding:0 8px;
			background:url(/img/default/mainnav-mid-bg.png) no-repeat left center;
			}
			
			#mainNav li{
				position:relative;
				float:left;
				top:-4px;
				margin:0 3px -8px 0; padding:0 3px 0 0;
				background:none;
				text-align:center;
				}
				
				#mainNav a{
					display:block;
					padding:4px 0;				
					font-size:1.333em;
					font-weight:900;
					text-decoration:none;
					color:#fff;
					}
					#mainNav a:hover{background:url(/img/default/mainnav-on.png) no-repeat left center;}
					
			/* list item widths, using db-PageName */
			#MN-web-design-portfolio{width:109px;}
			#MN-web-marketing{width:144px;}
			#MN-web-development{width:182px;}
			#MN-web-hosting{width:144px;}
			#MN-tkg-news{width:78px;}
			#MN-meet-the-group{width:162px;}
			
/* ------------------ 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 2px;
	margin:0 0 0 -2px;
	}

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


/**/
#mainNav ul ul, #subMenusContainer ul{
	position:absolute;
	left:0;
	width:200px;
	margin:0; padding:5px 0 10px;
	background:#222;
	border:1px solid #545454;
	}
	

/**/
	#mainNav ul ul li, #subMenusContainer li{ 
		display:block;
		/*position:relative;*/ /* Delete this on live site to fix secondary nav alignment problem ie6 */
		float:none;
		margin:0; padding:0;
		background:none;
		}
		
		#mainNav ul ul a, #subMenusContainer a{
			display:block;
			width:182px; /* Would prefer EMS, but ran into a funky IE6-7 display block issue with no width */
			margin:0 4px; padding:6px 5px;
			background:url(/img/default/subnav-li-bg.png) no-repeat left bottom;
			font-size:1.083em;
			font-weight:900;
			text-align:left;
			text-decoration:none;
			color:#fff;
			}#mainNav ul ul a:hover, #subMenusContainer a:hover,
			#mainNav ul ul a:focus, #subMenusContainer a:focus{
				background:#fdba31 url(/img/default/subnav-li-bg.png) no-repeat left bottom; 
				color:#000;
				}
				
	/* ------------------ 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 ul, #mainNav ul li:hover ul ul{display:none;}
		
		#mainNav ul li li:hover ul{
			display:block;
			left:8em; top:1em;
			}

/* ------------------ Bread Crumb ------------------ */		
#breadCrumb{
	float:left;
	margin:.125em 0 .5em 20px;
	}
	
	#breadCrumb li{
		display:inline;
		margin:0 .5em 0 0; padding:0;
		background:none;
		color:#FDBA31;
		}
		
		#breadCrumb a{
			padding:0 .75em 0 0;
			background:url(/img/default/breadcrumb-a-bg.gif) no-repeat right center;
			color:#fff;
			}
			
			#breadCrumb a:hover, #breadCrumb a:focus{color:#FDBA31;}		

/* ------------------ Content Wrapper ------------------ */			
#contentWrapper{
	position:relative;
	z-index:1;
	float:left;
	background:#fff url(/img/default/contentwrapper-mid-bg.png) repeat-y left top;
	}
	
	#contentWrapperTop{
		float:left;
		padding:14px 0 0 0;
		background:url(/img/default/contentwrapper-top-bg.png) no-repeat left top;
		}
		
		#contentWrapperBtm{
			float:left;
			padding:0 0 4px;
			background:url(/img/default/contentwrapper-btm-bg.png) no-repeat left bottom;
			}
			
			#contentWrapperFlare{
				float:left;
				width:811px; min-height:400px;
				padding:0 15px 76px 50px;
				background:url(/img/default/contentwrapper-flare-bg.png) repeat-y right top;
				}
				
			
/* ------------------ Content ------------------ */
#content{
	float:left;
	width:545px;
	}	
	
	#content h1{
		position:relative;
		left:-30px;
		}
		
/* ------------------ Related Pages ------------------ */
#pageChildren{margin:2em 0 0 0;}
	
	#pageChildren h2{margin:.125em 0 .5em;}
	
		#pageChildren li{
			display:inline;
			margin:0 .5em 0 0; padding:0 1em 0 0;
			background:url(/img/default/pageChildren-li-bg.gif) no-repeat right center;
			font-size:.916em;
			}
		#pageChildren li.last{background:none;}

/* ------------------ Extras (image gallery, related files, form) ------------------ */
#extras{
	float:right;
	width:225px;
	color:#fff;
	}
	
	#extras a{color:#FDBA31;}
	
	/* ------------------ Image Gallery ------------------ */
	#imageGallery{margin:.125em 0 1em;}
	
		#imageGallery li{
			float:left;
			width:65px;
			margin:.125em 10px 1em 0; padding:0;
			background:none;
			}
			
			#imageGallery a{display:block;}
				
				#imageGallery img{
					width:63px;
					border:1px solid #fff;
					}

	/* ------------------ Short Form ------------------ */
	#extras form li{width:97%; margin-right:0;}
	
		#extras input, #extras textarea, #extrasselect{
			opacity:.75;
			border-color:#555;
			}
	
	#submit{margin-right:42%; text-align:right;}
	
	#extras #submit{width:95%; margin-right:0;}
						
		#submit input{
			display:inline;
			width:108px; height:33px;
			background:none; border:none;
			}	

/* ------------------ Utility Wrapper ------------------ */
#utilityWrapper{
	width:922px;
	margin:0 auto;
	}	
	
	#utilityWrapperInner{
		float:left;
		width:902px;
		padding:20px 0 20px 20px;
		background:#1c1c1c url(/img/default/body-bg.png) repeat-y center top;
		}

/* ------------------ Utility ------------------ */		
#utility{
	float:left;
	margin:0 0 1em;
	padding:10px 0 0 0;
	background:url(/img/default/utility-bg.png) no-repeat left top;
	}
	
	#utilityBtm{
		float:left;
		padding:0 0 10px;
		background:url(/img/default/utility-bg.png) no-repeat left bottom;
		}
		
		#utilityInner{
			float:left;
			width:842px;
			padding:0 20px;
			background-color:#494949;
			color:#fff;
			}

/* ------------------ Utility Nav ------------------ */	
#utilityNav{
	float:left;
	width:522px;
	}
	
	#utilityNav ul{
		float:left;
		width:126px;
		margin:0 40px 0 0;
		}
		
		#utilityNav li{
			margin:0 0 .25em; padding:0;
			background:none;
			font-size:.916em;
			}
			
			#utilityNav a{
				text-decoration:none;
				color:#fff;
				}
				#utilityNav a:hover, #utilityNav a:focus{text-decoration:underline; color:#fdba31;}
			

/* ------------------ Awards Area ------------------ */	
#awardsArea{
	float:right;
	width:300px;
	padding:30px 0 0 0;
	text-align:right;
	}
	
	#awardsArea li{
		float:right;
		margin:0 0 0 30px; padding:0;
		background:none;
		}
		#awardsArea img{border:none;}
			
/* ------------------ Legal and Address ------------------ */	
#legal-address{
	float:left;
	width:100%;
	font-size:.916em;
	text-align:center;
	color:#b2b2b2;
	}
	
	#legal-address address{font-style:normal;}
	
	#legal-address .street-address, #legal-address .region{margin:0 .6em 0 0;}

	#legal-address cite{
		display:block;
		font-style:normal;
		color:#b2b2b2;
		}
		
/* ------------------ MediaBox Advanced ------------------ */	
#mbOverlay{
	position:absolute;
	z-index:9998;
	left:0;
	width: 100%;
	background-color:#222;
	cursor:pointer;
	}

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

#mbOverlay.mbOverlayIE{background: transparent url(/inc/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(/inc/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, Verdana, 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, Verdana, 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(/inc/script/mootools/mediabox/images/BlackClose.gif) no-repeat center;
	margin: 0;
	outline: none;
}

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

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

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

#mbError {
	position: relative;
	top: 30%;
	font-family: Myriad, Verdana, 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;
}