@import "reset.css";

body{ font-family: Arial, Helvetica, sans-serif; }

#wrap{ 	width: 100%; }

#container { position:absolute; top:50%; left:50%; width:800px; height:600px; margin-top:-300px; margin-left:-400px; text-align:left; }
	#container p.clear{ font-size: 0; }

#container #header{ overflow: hidden; }
	#header h1{ display: block; height: 30px; width: 170px; overflow: hidden; float: left; padding: 0; margin: 0; font-size: xx-small;}
	#header h1 span{ position: absolute; background: url(/media/28/phblogo.jpg) top left no-repeat; height: 30px; width: 170px; }

	#header ul#mainMenu{ display: block; float: left; height: 26px; border-top: 2px solid #909A68; border-bottom: 2px solid #909A68; width: 584px; margin-left: 10px; padding-left: 36px; }
		ul#mainMenu li{ display: block; float: left; font-size: small;}
		ul#mainMenu li a{ display: block; padding: 6px 22px; text-decoration: none; color: #000;}
		ul#mainMenu li a:hover, #home ul#mainMenu li.home a, #whoWeAre ul#mainMenu li.whoWeAre a, #whatWeDo ul#mainMenu li.whatWeDo a, #whatsNew ul#mainMenu li.whatsNew a, #howToReachUs ul#mainMenu li.howToReachUs a{ background: #999; color: #fff;}

#container #leftBar{ width: 168px; height: 530px; margin-top: 10px; margin-bottom: 0; float: left; border-right: 2px #BA5915 solid; clear: left; }
	#leftBar h3{ font-weight: bold; font-size: 16px; text-transform: lowercase; margin-bottom: 15px; }
	#leftBar a{ text-decoration: none; color: #000; }

	#leftBar ul#subMenu{  list-style-type: none; text-transform: lowercase; }
		ul#subMenu li{ margin-bottom: 20px; font-size: 14px; }
		ul#subMenu li a.current{ font-weight: bold; }

		ul#subMenu #subSubMenu{ margin: 10px 0 0 14px; list-style-type: square; }
			ul#subMenu li #subSubMenu li{ font-size: 12px; margin-bottom: 3px;}

#leftBar #thumbs { width: 162px; height: 195px; position: absolute; top: 371px; left: 0px; }
		h4.thumbs{ font-size: 12px; font-weight: normal; color: #000; text-transform: lowercase; clear: left; text-align: left; position: absolute; top: 445px; width: 162px; padding: 3px 0; margin-left: 4px; border-top: 2px #9A9A9A solid; }
		#thumbs img.growImage, #thumbs img.keepImage{ width: 50px; height: 61px; position: absolute; overflow: hidden; float: left; border: 6px solid #FFF; }
		#thumbs img.currentImage{ width: 60px; height: 73px; position: absolute; overflow: hidden; float: left; border: 6px solid #FFF; z-index: 3; }
		#thumbs .clear { clear: both; font-size: 0; }
         /*
            To compensate for the border that is included around the images (refer to the AutoCAD file):
               - the "non-current" thumbs are shifted "up" 2 pixels and "left" 6 pixels,
               - the "currentImage" thumbs in row 2 are shifted "up" 8 pixels,
               - the "currentImage" thumbs in column 2 are shifted "left" 6 pixels, and
               - the "currentImage" thumbs in row 3 are shifted "up" 2 pixels.
            These tweaks ensure that the "non-current" thumbnail images align with the left and bottom of the menu area and that the "currentImage"
            thumbnails are overlaid properly.

            Important!!
               These shifts assume that the currentImage thumbs are scaled 1.2 times from the non-current thumbs (see variables "x_scale" and
               "y_scale" in the "growImage.js" file).
         */
		#thumbs .row1 { top: -2px; }
		#thumbs .row2 { top: 65px; }
		#thumbs .row3 { top: 132px; }
		#thumbs .col1 { left: -6px; }
		#thumbs .col2 { left: 50px; }
		#thumbs .col3 { left: 106px; }
		#thumbs .currentImage.col2 { left: 45px; }
		#thumbs .currentImage.col3 { left: 96px; }
		#thumbs .currentImage.row2 { top: 58px; }
		#thumbs .currentImage.row3 { top: 120px; }

#container #rightBar{ width: 630px; margin-top: 10px; float: left; }
	#rightBar h2{ display: block; overflow: hidden; width: 620px; height: 120px; margin-left: 10px; margin-bottom: 0; }
	#rightBar h2 span{ position: absolute; width: 620px; height: 120px; overflow: hidden; }
	#rightBar h4{ margin-bottom: 10px; }

	#rightBar #blocks{ margin-top: 10px; }
		#blocks .quarterBlock{ display: inline; width: 305px; height: 195px; float: left; margin: 0 0 10px 10px; overflow: hidden;}
			#rightBar, #blocks, #blockThree, #blockFour, #blockFive, #textBlock { margin-bottom: 0!important; }
			#blockSix{ margin-bottom: 10px; }
		#blocks .horizontalBlock{ display: inline; width: 620px; height: 195px; float: left; margin-left: 10px; }
		#blocks .verticalBlock{ display: inline; width: 305px; height: 400px; float: left; margin-left: 10px; }
			.verticalBlock #blockOne{ margin: 0; }
			.verticalBlock #blockThree{ margin: 10px 0 0; }

		#blocks #textBlock { display: inline; width: 466px; margin-left: 10px; float: left; height: 400px; overflow: auto; }
		#blocks #photosBlock { display: inline; width: 144px; margin: 0 0 0 10px; float: left; height: 400px; overflow: hidden; }
			#photosBlock img { width: 144px; height: 92px; margin-bottom: 10px;  }

	#galleryImages{ display: none; }

#container #footer{ border-top: 2px solid #909A68; width: 100%; margin-top: 10px; }
	#footer p{ float: left; margin: 4px 0 0; }
	#footer p#copyright{ float: right; }












/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
.projheading {
font-size: 15px;
font-weight: bold;
margin-bottom: 0px;
}

.projlocation {
font-size: 13px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}

.projbullets {
font-size: 13px;
list-style: none;
padding:5px 0px 0px 0px;
}

.miscHeading {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
}

.bodytext {
font-size: 13px;
line-height: 110%;
margin-bottom: 5px;
}