/*
	HPA		- css
	Company - Otherwise Inc.
	author	- Yuan Zhang
*/
body {
	background: #ffffff;
	font-family:"Arial";
}
/* `Basic elements

----------------------------------------------------------------------------------------------------*/
a {	
	
	text-decoration: none;
}
a:hover { text-decoration: none;}
a.on { color: #80D6E5; }

/* `Top Section Elements
----------------------------------------------------------------------------------------------------*/
.Home #topSection {
	height: 139px;
	width:960px;
    margin-top:15px;
	margin-left:16px;
}
#topSection {
	height: 139px;
	width:960px;
    margin-top:15px;
	margin-left:16px;
}
	#topSection  .container_16 {
		position: relative;
	}
	#topSection #logo {
		position: absolute;
		top: 0px;
		left: 0px;
	}
	#topSection #contactBtn {
		position: absolute;
		top: 0px;
		left: 709px;
	}
/* `Navigation
----------------------------------------------------------------------------------------------------*/
ul#nav li.pagenav  ul, ul#nav li.page_item  ul{
	position: absolute;
	border-top:solid 1px #CACACA;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	padding-top:13px;
	list-style:none;

}
ul#nav li.page_item{
    font-weight: bold;
	padding:0;
	background: none;
	width:109px;
	color: #FFFFFF;
	margin-left: 2px;
	font-size: 11px;
	}
		ul#nav li.page_item a{
		    color: #4F4F4F;
			display: block;
			text-align:left;
			height: 16px;
			line-height: 16px;
			font-size: 11px;
			font-weight: bold;
			white-space: nowrap;
		}
		
	
ul#nav li.pagenav  ul  {	
	top: 0px;
	left: 108px;
	
}	
ul#nav li.page_item ul{	
	
	top: -1px;
	left:132px;
	display:none;
}


ul#nav li.pagenav ul li.current_page_item ul{display: block;}
ul#nav li.pagenav ul li.current_page_item  ul li ul{display: none;}
ul#nav li.pagenav ul li.current_page_ancestor ul{display: block;}
ul#nav li.pagenav ul li.current_page_ancestor ul li ul{display: none;}
ul#nav li.pagenav ul li.current_page_ancestor ul li.current_page_item ul{display: block;}
ul#nav li.pagenav ul li.current_page_ancestor ul li.current_page_ancestor ul {display: block;}

ul#nav li.pagenav ul li.page_item a,
ul#nav li.pagenav ul li.page_item ul li.page_item a,
ul#nav li.pagenav ul li.page_item ul li.page_item ul li.page_item a { color:#4F4F4F;}

ul#nav li.pagenav ul li.page_item a:hover,
ul#nav li.pagenav ul li.page_item ul li.page_item a:hover,
ul#nav li.pagenav ul li.page_item ul li.page_item ul li.page_item a:hover { color:#80D6E5;}

ul#nav li.pagenav ul li.current_page_item a,
ul#nav li.pagenav ul li.current_page_ancestor a,
ul#nav li.pagenav ul li.current_page_ancestor ul li.current_page_item a,
ul#nav li.pagenav ul li.current_page_ancestor ul li.current_page_ancestor a,
ul#nav li.pagenav ul li.current_page_ancestor ul li.current_page_ancestor ul li.current_page_item a { color:#80D6E5;}

/* `Site map elements
----------------------------------------------------------------------------------------------------*/
ul#sitemap {width:550px;}
ul#sitemap li.page_item{ list-style:none;
						float:left;
							margin-right:10px;
							margin-left:10px;
							vertical-align:top;
							width:160px;
						}
ul#sitemap li.page_item a{ font-size:13px;
						line-height:18px;
						color:#3E3E3E;
						margin-bottom:5px;
						font-weight:bold;
						}
ul#sitemap li.page_item a:hover{ color:#80D6E5;}
ul#sitemap li.page_item ul li.page_item a{ 		margin:0;
											color:#3E3E3E;
											font-size:12px;
											 padding:0px;
											 line-height:16px;
											 font-weight:normal;
						}
ul#sitemap li.page_item ul li.page_item a:hover{ color:#80D6E5;}
.Map div#designBy {
		width:400px;
		font-size:12px;
		line-height:18px;
		color:#3E3E3E;
		margin:20px 0 0 10px;
		font-weight:bold;
		}
.Map div#designBy a{
		width:400px;
		font-size:12px;
		line-height:15px;
		color:#3E3E3E;
		font-weight:normal;
		}
	.Map div#designBy a:hover{ color:#80D6E5;}
/* `Middle Section Elements
----------------------------------------------------------------------------------------------------*/
.Home #middleSection{  margin:0 0 6px 16px;
                   width:960px;}
				   
#middleSection{  margin:0 0 0 16px;
				height:100%;
                   width:960px;}
#middleSection .container_16 {
		position: relative;
		padding:0;
	}
	
/* `Boxes -Homepage
----------------------------------------------------------------------------------------------------*/
/* Play List Elements
----------------------------------------------------------------------------------------------------*/
#scrollBar{
        background:#80D6E5;
		height:18px;
		width:960px;
		margin:0 0 6px 0;
		z-index:1002
		}
span.hideIndex{display:none;}		
.Home #scrollBar ul , .Interiors #scrollBar ul{ 
	height:17px;
	width:955px;
	margin:0;
	padding:0;
	padding-left:5px;
	list-style-type:none;
	display:block;
}			
.Home #scrollBar li, .Interiors #scrollBar li{
    float: left;
	height:8px; width:8px;
	cursor:pointer;
	display:block;
    margin:5px 0 5px 6px;
	background:#B9E8F1;
	font-size: 0px;
	color:#B9E8F1;
	}

.Home #scrollBar li:hover, .Home #scrollBar li.on, .Interiors #scrollBar li:hover, .Interiors #scrollBar li.on{background:#FFFFFF;}

#scrollBar li.split {
	cursor: default;
	color: #FFFFFF;
	font-size: 10px;
	line-height: 10px;
	background: none !important;
	margin: 3px 0 0 6px;
	text-align: center;
	width: 3px !important;
}
#projectBar{
		height:18px;
		width:750px;
		float:left;
		}
		
#projectBar ul { 
	height:17px;
	width:750px;
	margin:0;
	padding:0;
	list-style-type:none;
	display:block;
}			
#projectBar li {
    float: left;
	display:block;
    margin:0 3px 0 7px;
	font-size: 11.5px;
	color:#FFFFFF;
	font-weight:bold;
	
	}

#projectBar li a{
	font-size: 11.5px;
	color:#FFFFFF;
	font-weight:bold;
	
	}

#projectBar li a:hover, #projectBar li a.on{text-decoration: underline;}
		
.Projects #scrollImage img{ 
	display:none;
	overflow:hidden;
	position: relative;
	top: 0px;
	float: right
}
.Projects #scrollImage{ 
	display:block;
	width: 588px;
	overflow:hidden;
	position: relative;
	top: 0px;
}


.Home #scrollImage{width:960px;
              min-height:100px;
			  padding:0;
			  height:582px;
			  background-color: #4F5050;
			  }
.Home #scrollImage img{ display:block;position:absolute;overflow:hidden;
              width:960px;
			 
              }
			  
.Interiors #scrollImage {width:960px;
              min-height:100px;
			  padding:0;
			  height:493px;
			  background-color: #4F5050;
			  }
.Interiors #scrollImage a{ height:493px;width:960px;display:block;position:absolute;overflow:hidden;
              width:960px;
			 
              }
.Interiors #scrollBar div.split {width:2px; height:10px; float:left; margin:4px 2px 0 8px;background-color:#B9E8F1;}

#title-over{	position: absolute;
				bottom: 0px;
				font-family: Arial;
				font-size: 12px;
				color:#FFFFFF;
				font-weight:bold;
				z-index: 1102;
				height:25px;
				width:100%;
				/*background-image:url(../images/blue_bar.png);*/
				}
#title-over-text {
	padding:2px 10px;
	display: block;
	height:15px;

}
/* `Boxes -Project landing page
----------------------------------------------------------------------------------------------------*/
#div_column_one{width:238px; height:588px;float:left;margin-right:3px;}
#div_column_two{width:130px;height:588px;float:left;margin-right:3px;}
#div_column_three{width:586px;height:588px;float:left;}
#img_boxes{margin-bottom:3px;}
div.default_box {
border:0;
margin-bottom:3px;
}
#box_one a {
background-image:url(../images/project_landing/519SClinton.jpg);
display:block;
height:142px;
width:238px;
}

#box_two a {
background-image:url(../images/project_landing/SilverTower.jpg);
display:block;
height:295px;
width:238px;
}
#box_three a {
background-image:url(../images/project_landing/MDA_Apartments.jpg);
display:block;
height:139px;
width:238px;
}
#box_four a {
background-image:url(../images/project_landing/CarrResidence.jpg);
display:block;
height:142px;
width:130px;
}
#box_five a {
background-image:url(../images/project_landing/571WPolk.jpg);
display:block;
height:437px;
width:130px;
}
#box_six a {
background-image:url(../images/project_landing/TheVueonApache.jpg);
display:block;
height:142px;
width:586px;
}
#box_seven a {
background-image:url(../images/project_landing/HPAOffice.jpg);
display:block;
height:207px;
width:344px;
margin-right:3px;
float:left;
}
#box_eight a {
background-image:url(../images/project_landing/211NClinton.jpg);
display:block;
height:207px;
width:239px;
float:left;
}
#box_nine a {
background-image:url(../images/project_landing/PrivateResidence.jpg);
display:block;
height:227px;
width:586px;
}
#box_one a:hover,#box_four a:hover,#box_six a:hover{background-position:0 -142px;}
#box_two a:hover{background-position:0 -295px;}
#box_three a:hover{background-position:0 -139px;}
#box_five a:hover{background-position:0 -437px;}
#box_seven a:hover,#box_eight a:hover{background-position:0 -207px;}
#box_nine a:hover{background-position:0 -227px;}
/* `Project Gallery
----------------------------------------------------------------------------------------------------*/
.Projects #gallery{
	float: right;
	width: 588px;          
}

#galleryBar{
        float: right;
		max-width:200px;
		min-width:10px;
		height:18px;
		z-index:1002;
		}
		
#galleryBar ul { 
	height:17px;
	padding-right:5px;
	list-style-type:none;
	display:block;
}			
#galleryBar li{
    float: left;
	height:8px; width:8px;
	cursor:pointer;
	display:block;
    margin:5px 0 5px 6px;
	background:#B9E8F1;
	font-size: 0px;
	color:#B9E8F1;
	text-indent: -9999px;
	overflow: hidden;
	font-size: 0px;
	}
	
#galleryBar li:hover, #galleryBar li.on{background:#FFFFFF;}


#magnify {height:14px;
         width:14px;
		 float:right;
		 margin-top:7px;
		 }
#magnify a{height:14px;
          width:14px;
          background:url(../images/magnify_icon.gif) no-repeat scroll 0 0;
		 }
/* `Columns style
----------------------------------------------------------------------------------------------------*/
#leftColumn {
			float: left;
			width:575px;
			padding-right:98px;
			
			}
.Projects #leftColumn{width:327px;
	                padding-right:45px;
					}
.Contact #leftColumn{width:285px;
                    padding-right:85px;}
			
#rightColumn{float: right;}

.Contact #rightColumn{
						padding-top:24px;		
						}
.Principals #rightColumn{width:287px;}
.Projects #rightColumn{width:588px;}
#lblAttachment {color:#A3A3A3;
				font-size:12px;
				}
/* `Boxes About pages
----------------------------------------------------------------------------------------------------*/

#copy {  
		 padding:24px 0 0 0;
			
			}
#copy a { color:#4F4F4F;}
#copy a:hover{color:#80D6E5;}
#copy h2{color:#3E3E3E;
			  font-size: 20px;
			  line-height:22px;
			  margin-bottom:10px;
			  font-weight: bold;	  
		}
#copy h3{color:#3E3E3E;
			  font-size: 17px;
			  line-height:20px;
			  margin-bottom:5px;
			  font-weight: bold;	  
		}
#copy h1{color:#3E3E3E;
			  font-size: 30px;
			  line-height:24px;
			  margin-bottom:24px;		  
			  font-weight: bold;		  
		}
.About #copy p {	color:#909090;
			font-size:22px;
			line-height:24px;
			margin-bottom:22px;
			}
.Contact #copy h2{color:#80D6E5; 
			}
.Contact #copy p{color:#909090;
			  font-size: 20px;
			  line-height:22px;
			  margin-bottom:3px;
			font-weight:normal;
			  
			}
#copy p  {	color:#4F4F4F;
			font-size:12px;		
			line-height:16px;
			margin-bottom:15px;

			}
#paraNav  {margin:0;padding:0}
#paraNav li{list-style:none;margin:0;padding:0}
#paraNav li a { font-size:12px;		  
			  line-height:18px;
			  color:#343232;
			  margin-bottom:0px;
			  font-weight: bold;
				}
#paraNav li a:hover, #paraNav li a.on {color:#80D6E5;}
.sideImage {

			position:relative;
			float:right;}

#tipBox.floatbox{ background:url(../images/tipbox.gif) no-repeat scroll 0 0;
				   font-size:11px;
				   color:white;
				   padding:7px 4px 3px 6px;
					line-height:13px;
				   }

/* `Boxes About pages --Service columns
----------------------------------------------------------------------------------------------------*/
.ch1{	float:left;
		padding-right:10px;
		vertical-align:top;
		width:230px;

}
li.ch{	
		list-style: none;
		margin:0;
		color:#3E3E3E;
		font-size:12px;
		 padding:0px;
		 line-height:16px;
		}

div.ch h3{font-size:13px;
		 line-height:18px;
		 color:#3E3E3E;
		 margin-bottom:5px;
		 }
/* `Contact page elements
----------------------------------------------------------------------------------------------------*/
#contactNav{
		list-style:none;
		margin-top:50px;
        }
#contactNav li{margin:0px;}
#contactNav li a{	color:#3E3E3E;
				font-weight:bold;
				font-size:12px;}
#contactNav li a:hover{color:#80D6E5;}

.submit{background:#80D6E5;
		height:26px;
		color:#FFFFFF;
		border:0;
		font-weight:bold;
		font-size:16px;
		line-height:18px;
		padding:0 5px 2px 5px;
		margin-right:13px;
		}
#txtEmail .error{border:1px solid red;}

input, textarea{	background:transparent url(../images/input_bg.gif) no-repeat scroll 0 0;
		color:#A3A3A3;
		border:0;
		font-size:12px;
		padding-left:11px;
		padding-top:3px;
		margin-bottom:16px;
		overflow: hidden;  
		}
.Contact h3{
		font-weight:bold;
		font-size:18px;
		line-height:28px;
		color:#3E3E3E;
		}
#selSubject{
			margin-bottom:13px;}

input.error, textarea.error{	background:transparent url(../images/input_bg.gif) no-repeat scroll 0 0;
		color:#A3A3A3;
		border:2px solid red;
		font-size:12px;
		padding-left:11px;
		padding-top:3px;
		margin-bottom:16px;
		overflow: hidden;  
		}
label.error{color:red; margin-top:1px;}
/* `Honor page table Elements
----------------------------------------------------------------------------------------------------*/
#honorsTable{	text-align:left; 
				border:0;
				margin-top:5px;}
#honorsTable th{
		color:#3E3E3E;
		font-weight:bold;
		font-size:13px;
		line-height:18px;
		width:319px;
		border-bottom:1px solid #CACACA;
		text-align:left;
}
#honorsTable td{	color:#4F4F4F; 
				font-size:12px;
				border-bottom:1px dashed #CACACA;
				padding:3px 20px 3px 0;
				}
#honorsTable td a {	color:#4F4F4F; }
#honorsTable td a:hover{	color:#80D6E5;
				}

#honorsTable .fcolumn{	font-weight:bold;
						font-style:italic; }
#lastRow td{border:0;}
/* `Footer Section Elements
----------------------------------------------------------------------------------------------------*/
.Home #footerSection , .Projects #footerSection, .Interiors #footerSection {
            margin:27px 0 31px 16px;
			width:960px;
			font-weight: bold;
			}
#footerSection {
            margin:56px 0 52px 16px;
			width:960px;
			position: relative;
			clear: both;
			}
#footerSection  .container_16 {
		position: relative;
		padding:0;
	}

#fnav  { 
	float: left;
	margin:0;
	padding:0;
}	
	#fnav li {
	    text-align:left;
		list-style: none;
		background: none;
		float: left;
		height: 11px;
		line-height: 11px;
		font-weight: bold;
	    color:#A6A6A6;
		padding: 0px;
		margin:0px;
		font-size: 10px;
	}	
		#fnav li a { color:#A6A6A6; }
		#fnav li a:hover, #fnav li a.on { color: #80D6E5; }
	
	a#footer_icon{position: absolute;
	             margin-top:-3px;
	            right:0px;
				width:22px;
				height:18px;
				background:transparent url(../images/footer_icon.gif) no-repeat scroll 0 0;
				}
    a#footer_icon:hover, a#footer_icon.on{background-position:0 -18px;}
			

			
.clearBoth {
	clear: both;
}
/* to disable textarea resize on webkit browsers - Ivan */
textarea {
    resize: none;
}