/*/////////////////////////////////////////////////////////
//																			//
//							Parent HTML Styles						//
//																			//
/////////////////////////////////////////////////////////*/

body {
	background: #000;
	font-family: Arial;
	font-size: 13px;
	color: #fff;
}

h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 0;
}

h2 {
  font-size: 14px;
  font-weight: bold;
  margin: 0 5px 5px 5px;
}

h3 {
	font-size: 13px;
	font-weight: bold;
	margin: 0;
}

hr {
	clear: both;
	color: #e0e0e0;
	height: 2px;
	padding: 0;
}

p {
	margin: 10px 0;
}

	p.date {
		clear: both;
		font-size: 10px;
		color: #666;
	}

		p.date a:link, p.date a:active, p.date a:visited, p.date a:hover {
			color: #666;
			text-decoration: none;
		}

	p.col {
		margin: 0;
	}

	p.news {
		margin: 0 0 5px 0;
	}

a:link, a:active, a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #cd0c40;
}

/*/////////////////////////////////////////////////////////
//																			//
//							Custom HTML Styles						//
//																			//
/////////////////////////////////////////////////////////*/

/* body -> header 							  */
/* Main body holder for header elements. */
#header {
	width: 424px;
	height: 54px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding: 96px 0 0 3px;
	font-weight: bold;
	color: #fff;
	background-image: url(../images/logo.png);
}

	/* Sub-elements of header. Used to display elements */
	/* within header as desired		  	  					 */
	#header a:link, #header a:active, #header a:visited, #header a:hover {
		color: #fff;
		text-decoration: none;
	}

/* body -> footer 							  */
/* Main body holder for footer elements. */
#footer {
	width: 655px;
	height: auto;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	background: #000;
	font-size: 11px;
	color: #fff;
}

	/* Sub-elements of footer. Used to display elements */
	/* within footer as desired		  	  					 */
	#footer a:link, #footer a:active, #footer a:visited, #footer a:hover{
		color: #fff;
	}


/*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&																							   &&
&& Below are the elements for displaying the page contents, as desired. &&
&&																							   &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/*	

/* body -> pageContainer 																*/
/*	Main Page container. Most elements reside within this parent element */
#pageContainer {
	width: 655px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

	/* body -> pageContainer -> img.popup 		  	  */
	/* Used with popup images within e.g. Projects */
	img.popup {
		position: absolute;
		visibility: hidden;
		width: 651px;
		z-index: 10;
		left: 0;
		top: 0;
		border: 2px solid #d8d8d9;
	}
	
	img.popupClose {
		position: absolute;
		visibility: hidden;
		width: 21px;
		z-index: 20;
		left: 628px;
		top: 6px;
	}

	/* body -> pageContainer -> info_left 		  */
	/* Main body holder for info_left elements. */
	#info_left {
	  float: left;
	  padding: 5px 0 0 5px;
	  width: 322px;
	  height: 19px;
	  background: #000;
	  font-weight: bold;
	  font-size: 12px;
	  text-align: left;
	  color: #000;
	}

		/* Sub-elements of info_left. Used to display elements */
		/* within info_left as desired		  	  					 */
		#info_left img {
			border: 0;
			vertical-align: top;
			padding: 2px 4px 0 9px;
		}
	
	/* body -> pageContainer -> info_right 		*/
	/* Main body holder for info_right elements. */
	#info_right	{
		  float: right;
		  padding: 5px 9px 0 0;
		  width: 319px;
		  height: 19px;
		  background: #000;
		  font-weight: bold;
		  font-size: 12px;
		  text-align: right;
		  color: #fff;
		}

		/* Sub-elements of info_right. Used to display elements */
		/* within info_right as desired		  	  					  */
		#info_right img {
			border: 0;
			vertical-align: top;
			padding: 2px 4px 0 9px;
		}

	/* body -> pageContainer -> menu 		*/
	/* Main body holder for menu elements. */
	#menu	{
	  padding: 8px 0 0 0;
	  width: 655px;
	  height: 27px;
	  background: #000;
	  font-weight: bold;
	  font-size: 16px;
	  text-align: left;
	  color: #fff;
	  background-image: url(../images/menu_bg.png);
	  display: inline;
	  float: left;
	}
	
		/* Sub-elements of menu. Used to display elements */
		/* within menu as desired		  	  					  */
		#menu a:link, #menu a:active, #menu a:visited {
			color: #fff
		}

		#menu a:hover {
			color: #d1d2d4;
		}


	/* body -> pageContainer -> pageSubContainter 										  */
	/* Sub container for the page. All elements below reside within this element */
	#pageSubContainer {
		width: 655px;
		background: #000;
		padding: 15px 0 0 0;
		float: right;
	}
		
		/* body -> pageContainer -> pageSubContainter -> artcileBoxTitle */
		/* Title segment for all article elements 							  */
		#articleBoxTitle {
			font-size: 18px;
			font-weight: bold;
			background: #fff;
			width: 645px;
			height: 23px;
			float: left;
			margin-top: 0;
			padding: 5px 0 0 10px;
			background-image: url(../images/content-top.png);
		}

		/* body -> pageContainer -> pageSubContainter -> articleBox */
		/* Main body holder for all article elements 					*/
		#articleBox {
			background: #000;
			width: 620px;
			height: auto;
			padding: 5px 20px 20px 15px;
			background-image: url(../images/content-bg.png);
			float: left;
		}

			/* Sub-elements of articleBox. Used to display elements */
			/* within articles within articleBox as desired		  	  */
			#articleBox img {
				border: 0;
				vertical-align: top;
				padding: 10px 5px 0 10px;
			}

			#articleBox img.rArticle {
				border: 0;
				float: right;
				vertical-align: top;
				padding: 5px 0;
			}

			#articleBox img.lArticle {
				border: 0;
				float: left;
				vertical-align: top;
				padding: 4px 5px 5px 0;
			}

			#articleBox img.contact {
				border: 0;
				float: left;
				vertical-align: top;
				padding: 4px 15px 0 0;
			}
			
			#articleBox h2.product {
				font-size: 14px;
				font-weight: bold;
				margin: 5px 0 2px 0;
				color: #cb6464;
			}
				
			#articleBox img.projectThumb {
				border: 0;
				vertical-align: top;
				padding: 4px;
				cursor: pointer;
			}
		
		/* body -> pageContainer -> pageSubContainter -> articleBoxFooter */
		/* Footer for all article elements 											*/
		#articleBoxFooter {
			background: #000;
			width: 645px;
			height: 8px;
			float: left;
			margin-top: 0;
			padding: 5px 0 0 10px;
			background-image: url(../images/content-bottom.png);
		}

		/* body -> pageContainer -> pageSubContainter -> featureBoxBg */
		/* Main body holder for all feature elements 					  */
		#featureBoxBg {
			background: #fff;
			width: 470px;
			height: 305px;
			float: left;
			padding: 0 0 0 10px;
			background-image: url(../images/feature_bg.png);
		}

			/* body -> pageContainer -> pageSubContainter -> featureBoxBg -> featureBox */
			/* Used to display a feature elements main body 									 */
			#featureBox {
				background: transparent;
				width: 445px;
				height: 285px;
				float: left;
				padding: 5px 20px 20px 10px;
			}
			
				/* Sub-elements of featureBox. Used to display elements */
				/* within features within featureBox as desired		  	  */
				#featureBox img.lArticle {
					border: 0;
					float: left;
					vertical-align: top;
					padding: 7px 5px 0 0;
				}

		/* body -> pageContainer -> pageSubContainter -> newsBoxBg */
		/* Main body holder for all news elements 					  */
		#newsBoxBg {
			background: #fff;
			width: 150px;
			height: 305px;
			float: right;
			padding: 0 0 0 10px;
			background-image: url(../images/news_bg.png);
		}

			/* body -> pageContainer -> pageSubContainter -> newsBoxBg -> newsBox */
			/* Used to display a news element summary 									 */
			#newsBox {
				background: transparent;
				width: 135px;
				height: 275px;
				padding: 5px 20px 20px 10px;
			}


		/* body -> pageContainer -> pageSubContainter -> productBoxBg */
		/* Main body holder for all product elements 					  */
		#productBoxBg {
			background: #fff;
			width: 645px;
			/*height: 153px;*/
			height: 163px;
			padding: 0 0 0 10px;
			background-image: url(../images/product_bg.png);
			float: left;
		}
		
			#productBoxBg h1.productTitle {
			  font-size: 18px;
			  font-weight: bold;
			  margin: 19px 0 0 0;
			}
			
			/* body -> pageContainer -> pageSubContainter -> productBoxBg -> productBox */
			/* Used to display product elements 													 */
			#productBox {
				background: transparent;
				width: 625px;
				height: 143px;
				padding: 8px 20px 0 10px;
				margin: 0;
			}

				/* Sub-elements of productBox. Used to display elements */
				/* within products within productBox as desired		  	  */
				#productBox img.product {
					border: 0;
					float: left;
					vertical-align: top;
					padding: 0 10px 0 10px;
				}




