@charset "utf-8";

body		{ color: #2a2a2a; margin: 0; padding: 0 0 0 20px; background: #006600; }

/* Links ***********************************************************************************************/
a			{ outline: none; color: #000; text-decoration: underline; }
a:link		{ color: #2874a9; text-decoration: underline; }
a:visited	{ color: #2874a9; text-decoration: underline; }
a:hover		{ color: #2874a9; text-decoration: underline; }
a:active	{ color: #2874a9; text-decoration: underline; }

/* Layout elements ************************************************************************************/

#wrapper { width: 980px; }
	#selector { text-align: right; color: #fff; margin: 6px 0 0 0; }
		#selector form { display: inline; }
		#selector select { width: 110px; color: #333; background-color:#ccc; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 85%;}
		#selector select option { font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 2px; }
	#header { background: #000 url(../images/header_background.jpg) no-repeat top left; height: 146px; width: 980px; }

		#topNav { position: relative; width: 980px; height: 66px; border: solid red 0px; }
			#topNav ul { margin: 0; padding: 0; list-style: none; }
			#topNav ul li 	{ border: solid red 0px; position: absolute; top: 19px; }
			#topNav ul li a	{ height: 39px; text-indent: -3000px; display: block; background-position: bottom left; background-repeat: no-repeat; }
			#topNav ul li a:hover { background-position: top left; }
			#topNav ul li#home		{ top: 0px; left: 0px; border: solid red 0px; }
			#topNav ul li#home a	{ width: 246px; height: 120px; }			
			li#portfolio	{ left: 300px; }
			li#portfolio a	{ width: 123px; background-image: url(../images/topnav_portfolio.jpg); }
			li#about		{ left: 444px; }
			li#about a		{ width:  89px; background-image: url(../images/topnav_about.jpg); }
			li#articles		{ left: 556px; }
			li#articles a	{ width: 112px; background-image: url(../images/topnav_articles.jpg); }
			li#links		{ left: 692px; }
			li#links a		{ width:  79px; background-image: url(../images/topnav_links.jpg); }
			li#contact		{ left: 794px; }
			li#contact a	{ width: 104px; background-image: url(../images/topnav_contact.jpg); }
			body#portfolio li#portfolio a, body#about li#about a, body#articles li#articles a, 
			body#links li#links a, body#contact li#contact a { background-position: top left; }
			
			#icon	{ position: absolute; top: 19px; right: 16px; }
			#icon a	{ width: 39px; height: 39px; background: url(../images/header_icon_home.jpg) no-repeat top right; display: block; text-indent: -3000px; }
				/*#home #icon		{ background-image: url(../images/header_icon_home.jpg); }
				#portfolio #icon{ background-image: url(../images/header_icon_portfolio.jpg); }
				#about #icon	{ background-image: url(../images/header_icon_about.jpg); }
				#articles #icon	{ background-image: url(../images/header_icon_articles.jpg); }
				#links #icon	{ background-image: url(../images/header_icon_links.jpg); }
				#contact #icon	{ background-image: url(../images/header_icon_contact.jpg); }
				#services #icon	{ background-image: url(../images/header_icon_services.jpg); }*/
	
			#subNav { position: absolute; top: 70px; left: 230px; font-size: 85%; color: #ccc; letter-spacing: .15em; }
			#subNav a { color: #ccc; text-decoration: underline; }
			#subNav a:hover { color: #fff; text-decoration: underline; }
			
			h1	{ position: absolute; top: 70px; right: 16px; font-size: 93%; font-style: italic; color: #fff; font-weight: bold; letter-spacing: .15em; }
		
	#content { background: url(../images/main_background.gif) repeat-y top left; float: left;}


		#sideNav { margin-left: 5px; float: left; display: inline; }
		#sideNav h3 { background: url(../images/services_title.gif) top left no-repeat; }
		#sideNav h3 a { display: block; width: 250px; height: 109px; text-indent: -3000px; }
		#sideNavContent1 { background: url(../images/services_background.jpg) repeat-y top left; }
			#sideNavContent2 { background: url(../images/services_background_gradient.jpg) no-repeat top left; padding: 0 27px 0 23px; width: 233px; display: block;} /*1 of 2 adjust width to shift*/
			
			
			
			h4#testimonial { width: 164px; height: 140px; padding: 55px 20px 30px 28px; color: #003366; font-family: "Times New Roman", Times, serif;
				background: url(../images/testimonial_background.jpg) no-repeat top left; }
		#sideNavFooter {background: url(../images/services_footer.gif) no-repeat top left; width: 250px; height: 16px; }


		#mainContent { float: right; width: 667px; padding-top: 18px; padding-right: 25px; } /* 2 of 2 adjust padding-right to shift*/
			
			/*One wide column span*/
			.container3col { background: url(../images/content_3col_back.jpg) repeat-y top left; margin-bottom: 10px; }
			.container3col span { background: url(../images/content_3col_bottom.jpg) no-repeat bottom left; width: 667px; display: block; padding: 0 0 25px 0; }
			.container3col span h2 { width: 667px; height: 41px; text-indent: -3000px; background-image: url(../images/title_blank.jpg); background-position: top left; background-repeat: no-repeat; }
				body#home .container3col h2 	{  } /*add bg-image if a 3 column container is put on homepage that needs title*/
				body#services .container3col h2 { background-image: url(../images/title_services.jpg); }
				body#portfolio .container3col h2{ background-image: url(../images/title_portfolio.jpg); }
				body#about .container3col h2 	{ background-image: url(../images/title_about.jpg); }
				body#articles .container3col h2 { background-image: url(../images/title_articles.jpg); }
				body#links .container3col h2	{ background-image: url(../images/title_links.jpg); }
				body#contact .container3col h2	{ background-image: url(../images/title_contact.jpg); }
				
				#container3colContent { margin: 0 30px; }
			
			/*Two columns*/
			#mainContent2Col { float: left; width: 406px; }
			.container2col { background: url(../images/content_2col_back.jpg) repeat-y top left; margin-bottom: 10px;}
			.container2col h2 { width: 406px; height: 41px; text-indent: -3000px; }
			.container2col h2.latestAnnouncements { background: url(../images/title_latest-announcements.jpg) no-repeat top left; }
			.container2col span { background: url(../images/content_2col_bottom.jpg) no-repeat bottom left; width: 406px; display: block; padding: 0 0 15px 0; }

			dl#latestAnnouncements { float: left; width: 340px; margin: 10px 30px; padding: 0; display: inline; }
			dl#latestAnnouncements dt { background: url(../images/hrule_2col.jpg) no-repeat top center; width: 100%; float: left; margin: 0 0 10px 0; padding: 15px 0 0 0; font-size: 93%; color: #363738; border: solid green 0px;}
			dl#latestAnnouncements dt strong { font-size: 108%; color: #2874a9; font-weight: bold; display: block; }
			dl#latestAnnouncements dd { width: 235px; float: left; font-size: 85%; color: #363738; margin: 0 0 0 5px; display: inline; }
			dl#latestAnnouncements dd p { margin-bottom: 5px; }
			dl#latestAnnouncements dd.img { margin: 0; width: 100px; float: left; }
			dl#latestAnnouncements dd.img img { float: left; margin: 0; padding: 0px; border: 1px solid #ccc; border-bottom-color:#333; border-right-color:#666; } 
			dl#latestAnnouncements a { color: #2874a9; text-decoration: none; }
			dl#latestAnnouncements a:hover { text-decoration: underline; }

			#mainContent1Col { float: right; width: 229px; }
			.container1col { background: url(../images/content_1col_back.jpg) repeat-y top left; margin-bottom: 10px; }
			.container1col h2 { width: 229px; height: 41px; text-indent: -3000px; }
			.container1col h2.featuredClient { background: url(../images/title_featured-client.jpg) no-repeat top left; }

		/****Home Page Elements *****************/
			.featuredClientThumb { margin: 10px 0 0 35px; background: url(../images/featuredclient_thumb_background.jpg) no-repeat bottom left; padding-bottom: 30px; }
			.featuredClientThumb img {border: solid #ccc 1px; border-bottom-width: 0px; }
			.featuredClientDesc { width: 169px; text-align: center; margin: 0 30px; }
			.featuredClientDesc dt { color: #2874a9; font-weight: bold; }
			.featuredClientDesc dd { margin: 0; padding: 0; font-size: 93%; }
			
			.designTipsIndTip { width: 169px; text-align: center; margin: 0 30px; }
			.designTipsIndTip dt { color: #2874a9; font-weight: bold; font-style: italic; margin-top: 5px; }
			.designTipsIndTip dd.designTipsThumb {}
			.designTipsIndTip dd { margin: 10px 0 0 0; padding: 0; font-size: 93%; }
			
			.container1col h2.designTips { background: url(../images/title_design-tips.jpg) no-repeat top left; }
			.container1col span { background: url(../images/content_1col_bottom.jpg) no-repeat bottom left; width: 229px; display: block; padding: 0 0 15px 0; }
			.container1col span p { margin: 0 30px; }

	#footer { width: 980px; background: url(../images/footer_background.gif) no-repeat top left; text-align: center; color: #fff;}
	#footer a {color: #3399cc; }
	#footer a:hover { color: #66ccff;}
		#footerLinks { margin: 0px 0 0 293px; padding-top: 50px; }
		#footerLegal { margin: 5px 0 0 293px; padding-bottom: 30px; }


/* Miscellaneous classes for reuse ********************************************************************/
.flR { float: right; margin-left: 8px; }
.flL { float: left; margin-right: 8px; }
.flClear { clear:both; height:0; font-size: 1px; line-height: 0px; } /*placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

/* Content elements ***********************************************************************************/
h1		{  }
h2		{  }
h3		{  }
h4		{  }
h6		{  }
p		{  }

strong	{ font-weight: bold; }
em		{  }

dl	{  }
	dt	{  }
	dd	{  }

ol.list,ul.list	{ margin-left:2em; }
ol.list li		{ list-style: decimal outside; }
ul.list li 		{ list-style: disc outside; }