/*This is where you configure the margins and background settings for all pages in the site*/
/*------------------------------------------------------------------------------------------------------*/
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 0px;
	background: #fff url('http://wearehpi.org/images/hpi-bg.jpg') repeat-x top center; text-align: center;
}

/*This is where you configure the look and feel of all body text within the site*/
/*Also, be sure to update the body style in "\code\dhtml\editor\css\fck_editorarea.css" if you want the editor to reflect this style*/
/*------------------------------------------------------------------------------------------------------*/
table, .bodytext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000000;
}

.bodytextsmall {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000000;
}

/*This is where you configure the look and feel of all form fields within the site*/
/*------------------------------------------------------------------------------------------------------*/
.fieldtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000000;
}

/*This is where you configure the look and feel of all links that appear within body text within the site*/
/*------------------------------------------------------------------------------------------------------*/
a {
	text-decoration: underline;
	color: #990000;
}

a:hover {
	text-decoration: none;
	color: #993300;
}

/*This is where you configure the look and feel of all administrative headings within the site*/
/*------------------------------------------------------------------------------------------------------*/
.headingtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

/*This is where you configure the look and feel of the primary area nav links within the site*/
/*------------------------------------------------------------------------------------------------------*/

a.bodylinkprimary {
	text-decoration: underline;
	font-weight: bold;
	color: #333366;
	line-height: 16px;
}

a.bodylinkprimary:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #996600;
	line-height: 16px;
}

/*This is where you configure the look and feel of the secondary area nav links within the site*/
/*------------------------------------------------------------------------------------------------------*/
bodylinksecondarybullet {
	color: #000000;
}

a.bodylinksecondary {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #666666;
}

a.bodylinksecondaryactive {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.bodylinksecondary:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.bodylinksecondaryactive:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #666666;
}

/*This is where you configure the look and feel of the tertiary area nav links within the site*/
/*------------------------------------------------------------------------------------------------------*/
bodylinktertiarybullet {
	color: #000000;
}

a.bodylinktertiary {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.bodylinktertiaryactive {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.bodylinktertiary:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #666666;
}

a.bodylinktertiaryactive:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #666666;
}

/*This is where you configure the look and feel of the quinary area nav links within the site*/
/*------------------------------------------------------------------------------------------------------*/
bodylinkquinarybullet {
	color: #000000;
}

a.bodylinkquinary {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.bodylinkquinaryactive {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.bodylinkquinary:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #666666;
}

a.bodylinkquinaryactive:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #666666;
}

/*This is where you configure the look and feel of administrative links within the site*/
/*------------------------------------------------------------------------------------------------------*/
a.bodylinkadmin {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #990000;
}

a.bodylinkadmin:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #CC0000;
}

/*This is where you configure the look and feel of the sidebar system*/
/*------------------------------------------------------------------------------------------------------*/

.sidebar {
	background-color: #666666;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.sidebartext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #FFFFFF;
}

a.sidebarlink {
	text-decoration: underline;
	color: #B04D1C;
}

a.sidebarlink:hover {
	text-decoration: underline;
	color: #E38151;
}



/*Banner Text - White Contribution and Live Chat text*/
/*------------------------------------------------------------------------------------------------------*/

.bannertext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	line-height: 13px;
}


/*Horizontial Rule*/
/*------------------------------------------------------------------------------------------------------*/

hr {
	height: 1px;
	color: #E5E0CC;
	background-color: #E5E0CC;
}

/*Calendar*/
/*------------------------------------------------------------------------------------------------------*/

.calviewall {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	color: #666666;
	line-height: normal;
}

a.calviewall {
	text-decoration: underline;
	color: #666666;
}

a.calviewall:hover {
	text-decoration: none;
	color: #000000;
}

/*HPI Featured News and Headline News*/
/*------------------------------------------------------------------------------------------------------*/

.newstitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: #990000;
	line-height: normal;
}

.newsdate {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	color: #666666;
	line-height: normal;
}

a.readarticletext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-decoration: none;
	color: #666666;
}

a.readarticletext:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-decoration: underline;
	color: #000000;
}

/*--------------------------- FOOTER AREA ---------------------------*/

.xfoot {

width: 100%;
margin-top: 10px;
margin-left: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
color: #999999;
}

.xfoot h2 {
overflow:hidden;
padding: 0px 0px 10px 0px;
color: #b3b3b3;
font-weight: 400;
}

.xfoot a {
color: #999999;
}

.higher-foot {
margin-top: 10px;
width: 1100px; 
height: 0px;
margin: 0 auto;
font: 8pt Verdana, Arial, sans-serif;
font-weight: 400;
}



#subfooter { 
background:#000 url(http://wearehpi.org/images/footer-background.jpg);
background-repeat:repeat-x;
clear:both;
overflow:hidden;
text-align:left;
color:#fff;
margin-top:3px;
}
#subfooter a:link {
	color: #fff;
}
#subfooter a:visited {
	color: #fff;
}
#subfooter a:active,
#subfooter a:hover {
	color: #f00;
}



#subfooter {
	margin:5px auto 0;
	position:relative;
	width:950px;
	margin-top:-28px;
	margin-bottom:15px;
	
	
}
#subfooter a {
	margin-left:0px;
	margin-top:50px;
	font-weight:normal;
	margin-bottom:15px;
	font-size:11px;
}
#subfooter p {
	margin-left:10px;
	font-weight:normal;
	line-height:25px;
	font-size:11px;
}
#subfooter #vcard {
	float:left;
	margin-bottom:0;
}
#linkage {
		float:right;
		margin-top:-110px;
		margin-right:10px;
}
#subfooter #copyright {
	float:right;
	margin-bottom:0;
}


	
/*------------------------------------------------*/
/*--------------------[SIDEBAR]-------------------*/
/*------------------------------------------------*/
 
 #primary { margin-right: 15px; } 
 
#sidebar { float: left; width: 300px; margin-top: -79px; font-size: 12px; color: #626262;  }
	#sidebar .sidebar-block-top { width: 295px; height: 12px; background: url('http://wearehpi.org/images/shadow.chat.jpg') no-repeat; }
	#sidebar .sidebar-block-bottom { width: 295px; height: 25px; background: url('http://wearehpi.org/images/bar.footer.png') no-repeat; margin-bottom: 20px; }
	#sidebar .sidebar-block { width: 300px; background: url('http://wearehpi.org/images/sidebar-block-bg.png')  repeat-y; padding: 0px 15px 15px 15px; position: relative; }
		#sidebar .sidebar-block img { padding: 1px; border: 0px solid #ececec; margin-bottom: 5px; display: inline; }
	#sidebar h3 { color: #4E000B; font-size: 17px; padding: 14px 0px 5px; letter-spacing:-1px; }
	#sidebar h3.with-icon { width: 230px; }
	#sidebar .sidebar-block .sidebar-icon { position: absolute; top: 8px; right: 28px; padding: 0px; border: 0px; }
	#sidebar p.testimonials { font-family: Georgia, serif; color: #7a7a7a; font-style: italic; line-height: 20px; }
	#sidebar .sidebar-block .latest-post { clear: both; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #f1f1f1; }
		#sidebar .sidebar-block .latest-post img { float: left; margin-right: 15px; }
		#sidebar .sidebar-block .latest-post h4 { padding: 5px 0px; font-size: 13px; }
			#sidebar .sidebar-block .latest-post h4 a { color: #397faa; }
			#sidebar .sidebar-block .latest-post p a { font-size: 11px; }
	#sidebar .sidebar-block img.icons { border: none; float: left; margin: 8px 5px 0px 0px; }
	#sidebar ul { list-style-position: inside; list-style-type: none; }
		#sidebar ul li { padding: 0px 0px 5px; }
	ul#twitter_update_list { list-style-position: outside; list-style-type: none; }
		ul#twitter_update_list li { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #eeeeee; }
	a#twitter-link { float: right; border: 1px solid #ffffff; background: #dfdfdf; padding: 2px 7px 4px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #727272; margin-top: 3px; }
	a#twitter-link:hover { font-weight: normal; background: #959595; color: #ffffff; }

#sidebar h3.bordered { border-bottom: 1px solid #b5b5b5; padding: 0px 0px 10px; }
div.sidebar-inner { padding: 10px 0px 20px; }
div#ads { padding: 0px 0px 5px 0px; }
	div#ads img { margin-bottom: 2px; }

#sidebar .sidebar-block  div.latest-post img { padding: 0px; border: 0px; }

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]------*/
/*------------------------------------------------*/

#mainwrap { width: 942px; margin: 0px auto; text-align: left; }
	#header { position: relative; z-index: 2;  }
		#logo { margin: 35px 0px 00px 220px; }
		div#search { position: absolute; top: 60px; right: 0px; width: 172px; height: 29px; background: url('http://www.villebillies.com/images/searchbar-bg.png') no-repeat; }
			#search fieldset { position: relative; }
			#search fieldset input#search-field { margin: 5px 0px 0px 9px; background: none; border: 0 none; padding: 0; color: #9ba9b1; font-size: 12px; width: 130px; }
			#search fieldset input#searchsubmit { position: absolute; top: 5px; right: 12px; }
	#content-wrap { background: #fff url('http://wearehpi.org/images/content-top-bg.png') no-repeat top left; width: 955px; float: left; margin-top: 0px; padding: 0px 0px 0px; }
		#main-content { width: 620px; float: left; display: inline; margin: 0px 15px 0px 20px; z-index:-200; }
		div#main-content.fullwidth { width: 862px; }
			#main-content h1 { font-size: 30px; margin-top:8px; }
			#main-content h2 { font-size: 25px; letter-spacing:-1px; margin-top:8px;}
			#main-content h3 { font-size: 21px; margin-bottom: 10px; letter-spacing:-1px; }
			#main-content h4 { font-size: 17px; margin: 5px 0px 8px; }
			#main-content h5 { font-size: 15px; margin: 5px 0px 8px; }
			#main-content h5 { font-size: 14px; margin: 5px 0px 8px; }
			body#home #main-content h2 { margin: 0px 0px 12px; }
			body#home #main-content h3 { margin: 2px 0px 2px; }
			body#home #main-content div.service { width: 140px; float: left; margin-right: 40px; }
			body#home #main-content div.service.last { margin-right: 0px; }
			body#home #main-content div.service p { padding: 12px 0px 25px; font-size: 12px; }
			#main-content ul#project-categories { float: left; margin-bottom: 30px; list-style-position: outside; list-style-type: none;  }
			ul#project-categories li { float: left; margin-right: 12px; }
			ul#project-categories li a { border: 1px solid #f1f1f1; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: url('http://www.villebillies.com/images/project-cats-bg.png') repeat-x; display: block; height: 24px; padding: 2px 10px 0px; color: #aaaaaa; font-size: 12px; }
					ul#project-categories li a:hover, ul#project-categories li.active a { color: #1b4d70; }
			div.projects { float: left; clear: both; width: 892px; display: inline; margin-left: -40px; padding-bottom: 30px; }
				div.project-wrapper { width: 254px; border: 1px solid #d9d9d9; background: #ffffff; float: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 0px 0px 0px 40px; display: inline; }
					div.project-wrapper img { padding: 5px 6px; border: 1px solid #d9d9d9; border-width: 0px 0px 1px; margin: -1px; }
					div.project-wrapper p { font-size: 11px; padding: 0px 5px 4px; color: #626262; }
					#main-content div.project-wrapper h3 { font-size: 14px; padding: 5px 5px 4px; margin: 0px; color: #1b4460; }
					#main-content ol, #main-content ul { margin: 0px 0px 10px; list-style-position: inside; }   
					#main-content ul { list-style-type: none; }
					#main-content ol { list-style-type: decimal; }
					#main-content ol li ol, #main-content ul li ul { margin-left: 20px; margin-bottom: 3px; }
					#main-content blockquote { font-style: italic; padding: 5px 0px 0px 20px; margin: 0px 0px 20px 20px; border-left: 1px solid  #cacaca; }
			    .wp-pagenavi { text-align: left; }
				.wp-pagenavi.padright { padding: 0px 16px 0px 0px; }
				.wp-pagenavi a { color: #6c6c6c; font-size: 12px; }
				.wp-pagenavi a:hover { font-weight: bold; }
				.wp-pagenavi span.current { font-weight: bold; }
				.wp-pagenavi a.prev, .wp-pagenavi a.next { border: 1px solid #ffffff; background: #dfdfdf; padding: 2px 7px 4px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #727272; }
				.wp-pagenavi a.prev:hover, .wp-pagenavi a.next:hover { font-weight: normal; background: #959595; color: #ffffff; }
				.wp-pagenavi a, .wp-pagenavi span { margin-right: 5px; }
			    div#featured-project { padding: 40px 42px 0px 40px; float:left; width: 860px; }
				div#featured-project #pagename-content { float:left; padding: 0px; }
				div#featured-project #slide { float: left; width: 100%; position: relative; }
				div#featured-project #slide #project-description { float: left; width: 365px; padding: 28px 0px 0px; }
				div#featured-project #slide #project-description p { color: #656565; font-size: 14px; line-height: 23px; }
				div#featured-project #slide #project-description h3 { font-size: 21px; padding-bottom: 20px; }
				div#featured-project #slide #project-description h3 a { color: #3a3a3a; }
				div#featured-project #slide img.project { margin-top: 21px; float: right; }
				div#featured-project #slide div#ribbon { position: absolute; top: 20px; right: -2px; background: url('http://www.villebillies.com/images/featured-ribbon.png') no-repeat; width: 90px; height: 89px; }
			    div.post { border-bottom: 1px solid #e3e3e3; padding-bottom: 10px; margin-bottom: 20px; }
				p.metainfo { margin: -8px 0px 7px; font-size: 11px; color: #7f7e7e; }
	            #content-bottom { background: url('http://www.villebillies.com/images/content-bottom-bg.png') no-repeat; width: 942px; float: left; height: 1px; }
				
				/*  Sub Navigation - sidebar contentRight
----------------------------------------------------------------------------------------------------*/

#subNavigation {
	
	font-size:10px;
	border-top:0px solid #ddd;
	list-style:none;
	}
	

#subNavigation h3 {	
	border-bottom:0px solid #ddd;
	padding-left:10px;
	list-style:none;
	margin-top: -30px;
	}
		
#subNavigation ul {
	color:#666;
	margin:0;
	border:none;
	line-height:35px;
	list-style:none;
	}
		
#subNavigation li {
	border-bottom:0px solid #ddd;
	margin:0;	
	list-style:none;
	}

#subNavigation li a {
	display:block;
	padding-left:15px;
	text-decoration:none;	
	list-style:none;
	border-bottom:1px solid #ddd;
	
	
	}	

#subNavigation li a:hover {
	color:#000;
	background:#666;
	background:transparent url(http://wearehpi.org/images/subNav.png) bottom no-repeat;
	list-style:none;
	}
	
	
	.textwidget {
		list-style:none;
	}
	
	.textwidget a {
		list-style:none;
	}
	
	#subNavigation ul upcoming {
		margin-top: -10px;
	}

