* { 
	margin: 0; padding: 0;
	style="margin: 0px;"
}	

a {
    margin: 20px auto 0 auto;
    font: 12px Arial, Helvetica, sans-serif;
    color: rgb(102,102,102);
    outline: none;
    list-style-type: none;
    text-decoration: none;
}

#imagecontent {
	display: none;
}

#container {
	margin: 20px auto 300 auto;
	text-align: left;
	width: 825px;
	height: 550px;
	background-position-x: center center;
	background-color: white;
}

#tophat	{
	position: inherit;
	margin-left: 9px;
}


/*---left side navbar parameters - with flash writeup---*/

#background {
	margin-left: 15px;
	float: left;
	width: 825 ;
	height: 330 ;
}	

#writeup {
	position: absolute; top: 137px;
	margin: -10px 0 0 15px;
	padding: 0px 10 0 0px;
	height: 330px;
}	

#navbar {
	position: absolute; top: 137px;
	margin-left: 15px;
}

#portfoliosidenav, #profilesidenav, #principalmapsidenav, #contactsidenav {
	background-color: rgb(250,250,250);
	position: absolute; top: 137px;
	margin: -10px 0 0 15px;
	padding: 14px 47 0 10px;
	text-align: left; 
	height: 316px;
	width: 65px;
	color: black;
	list-style-type: none;
	float: left;
}

#profilesidenav {
	width: 106px; 
}

#principalmapsidenav {
	padding-right: 5px;
	width: 107px;  
}

#contactsidenav {
	background-color: rgb(255,255,255);
	padding-right: 5px;
	height: 310px;
	width: 112px;  
}


/*---bottom navigation---*/

#bottomnav {
	list-style-type: none;
	margin-left: 50px;
}
#bottomnav li {
	float: left;
	padding-top: 20px;
	text-align: center;
	width: 180px;
	list-style-type: none;
	padding-bottom: 15px;
}
#bottomnav a:hover {
	color: black;	
}

#resnav {
	list-style-type: none;
	margin-left: 15px;
	padding-left: 120px;
	float:left;
	width: 825px;	
}
#resnav li {
	display: block;
	float: left;
	text-align: center;
	list-style-type: none;
	padding: 15px 30 15 30px;
}	
#resnav a:hover {
	color: black;	
}

#retailnav {
	list-style-type: none;
	margin-left: 15px;
	padding-left: 120px;
	float:left;
	width: 825px;
}
#retailnav a:hover {
	color: black;	
}
#retailnav li {
	display: block;
	float: left;
	text-align: center;
	list-style-type: none;
	padding: 15px 80 15 80px;
}

#civicnav {
	list-style-type: none;
	margin-left: 15px;
	padding-left: 120px;
	float:left;
	width: 825px;	
}
#civicnav a:hover {
	color: black;	
}
#civicnav li {
	display: block;
	float: left;
	text-align: center;
	list-style-type: none;
	padding: 15px 110 15 110px;
}

#commnav {
	list-style-type: none;
	margin-left: 15px;
	padding-left: 120px;
	float:left;
	width: 825px;	
}
#commnav li {
	display: block;
	float: left;
	text-align: center;
	list-style-type: none;
	padding: 15px 15 15 15px;
}	
#commnav a:hover {
	color: black;	
}

#principalbottomnav {
	list-style-type: none;
	margin-left: 15px;
	padding-left: 120px;
	float:left;
	width: 705px;
}
#principalbottomnav li {
	display: block;
	float: left;
	text-align: center;
	list-style-type: none;
	padding: 15px 145 15 145px;
}

#mapbottomnav {
	list-style-type: none;
	padding-left: 190px;
	background-color: white;
}
#mapbottomnav a {
	border-left-width: 5px;
	color: rgb(102,102,102);
}
#mapbottomnav a:hover {
	color: black;	
}
#mapbottomnav li {
	float: left;
	padding-top: 20px;
	text-align: center;
	width: 200px;
}

#contactbottomnav {
	padding: 13px 42 20 310px;
	margin-top: 0px;
	text-align: justify;
	margin-left: 15px;
	color: black;
	list-style-type: none;
	float: left;
}
#contactbottomnav a {
	color: rgb(102,102,102);
}
#contactbottomnav a:hover {
	color: black;	
}
#contactbottomnav li {
	float: none;
	padding-top: 10px;
	text-align: left;
	width: 160px;
}

#telebottomnav {
	padding: 13px 12 20 50px;
	margin-top: 0px;
	text-align: justify;
	margin-left: 45px;
	color: black;
	list-style-type: none;
	float: left;
}
#telebottomnav a {
	border-left-width: 5px;
	color: black;
}
#telebottomnav li {
	float: none;
	padding-top: 12px;
	padding-right: inherit;
	text-align: right;
	width: 110px;
}

#end {
	float: center;
	padding: 50px 9 10 0px;
	list-style-type: none;
	text-decoration: none;
}
#end li{
	float: center;
	margin-top: 0px;
	text-align: center;
	font-size: inherit;
}


/*---lightbox - thumbnail images & text---*/

#freakout {
	background-color: rgb(250,250,250);
	opacity:.9;filter:alpha(opacity=20)
	text-align: justify;
	position: absolute; top: 137px; 
	height: 325px;
	margin: -10px 0 0 770px;
	padding: 5px 5 0 5px;
	color: black;
	list-style-type: none;
	float: left;
}

#freakout li {
	display: block;
	list-style-type: none;
	text-align: center;
	padding: 6px 0 6 0px;
}

#freakout .candelabra {
	display: block;
	list-style-type: none;
	font: 10px Arial, Helvetica, sans-serif;
	text-align: center;
	padding: 6px 0 6 0px;
}


/*--- lightbox ---*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox img{ width: auto; height: auto; }
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0; }
#hoverNav a{ outline: none; }

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); display: block; }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(images/prev_button.jpg) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/next_button.jpg) right 15% no-repeat; }

#imageDataContainer{ font: 10px Arial, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #000000; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none; }	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


/*---placement & reassurance of buttons in middle of left side navbar---*/

.michael {
	padding-bottom: 5px;
}
.michael a:hover {
	color: black;	
}

.dolores {
	padding-bottom: 100px;
}
.dolores a:hover {
	color: black;	
}

.history {
	padding-bottom: 5px;
}
.history a:hover {
	color: black;	
}

.scope {
	padding-bottom: 5px;
}
.scope a:hover {
	color: black;	
}

.licensing {
	padding-bottom: 5px;
}
.licensing a:hover {
	color: black;	
}

.publications {
	padding-bottom: 80px;
}
.publications a:hover {
	color: black;	
}

.map2a {
	padding-bottom: 100px;
}
.map2a a:hover {
	color: black;	
}

.contactmp2a {
	padding-bottom: 5px;
}
.contactmp2a:hover {
	color: black;	
}

/*---placement of additional buttons in middle of left side navbar---*/

#pg-michael .contact {
	padding-bottom: 45px;
}
#pg-mpedu .contact {
	padding-bottom: 45px;
}

#pg-dolores .contact {
	padding-bottom: 45px;
}
#pg-ddedu .contact {
	padding-bottom: 45px;
}

#pg-contact .contact {
	padding-bottom: 45px;
}
#pg-contactmp2a .contact {
	padding-bottom: 45px;
}

#pg-contactmp2a .genemail {
	padding-top: 15px;
}

/*---visited principal buttons on left side navbar---*/

#pg-michael .principals a {
	color: black;
	font-weight: bolder;
}
#pg-michael .michael a {
	color: black;
	font-weight: bolder;
}

#pg-mpedu .principals a {
	color: black;
	font-weight: bolder;
}
#pg-mpedu .michael a {
	color: black;
	font-weight: bolder;
}

#pg-dolores .principals a {
	color: black;
	font-weight: bolder;
}
#pg-dolores .dolores a {
	color: black;
	font-weight: bolder;
}

#pg-ddedu .principals a {
	color: black;
	font-weight: bolder;
}
#pg-ddedu .dolores a {
	color: black;
	font-weight: bolder;
}


/*---visitied buttons in middle of left side navbar---*/

#pg-history .profile a {
	color: black;
	font-weight: bolder;
}
#pg-history .history a {
	color: black;
	font-weight: bolder;
}

#pg-scope .profile a {
	color: black;
	font-weight: bolder;
}
#pg-scope .scope a {
	color: black;
	font-weight: bolder;
}

#pg-licensing .profile a {
	color: black;
	font-weight: bolder;
}
#pg-licensing .licensing a {
	color: black;
	font-weight: bolder;
}

#pg-publications .profile a {
	color: black;
	font-weight: bolder;
}
#pg-publications .publications a {
	color: black;
	font-weight: bolder;
}

#pg-clients .clients a {
	color: black;
	font-weight: bolder;
}
#pg-clients .residential a {
	color: black;
	font-weight: bolder;
}

#pg-retclients .clients a {
	color: black;
	font-weight: bolder;
}
#pg-retclients .retail a {
	color: black;
	font-weight: bolder;
}

#pg-civclients .clients a {
	color: black;
	font-weight: bolder;
}
#pg-civclients .civic a {
	color: black;
	font-weight: bolder;
}

#pg-comclients .clients a {
	color: black;
	font-weight: bolder;
}
#pg-comclients .commercial a {
	color: black;
	font-weight: bolder;
}

#pg-contact .contact a {
	color: black;
	font-weight: bolder;
}
#pg-contact .map2a a {
	color: black;
	font-weight: bolder;
}

#pg-contactmp2a .contact a {
	color: black;
	font-weight: bolder;
}
#pg-contactmp2a .contactmp2a a {
	color: black;
	font-weight: bolder;
}

/*---visited portfolio buttons in bottom navbar---*/

#pg-kentfield .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-kentfield .residential a {
	color: black;
	font-weight: bolder;
}
#pg-kentfield .kentfield a {
	color: black;
	font-weight: bolder;
}
#pg-fairfax1 .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-fairfax1 .residential a {
	color: black;
	font-weight: bolder;
}
#pg-fairfax1 .fairfax1 a {
	color: black;
	font-weight: bolder;
}
#pg-millvalley .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-millvalley .residential a {
	color: black;
	font-weight: bolder;
}
#pg-millvalley .millvalley a {
	color: black;
	font-weight: bolder;
}
#pg-fairfax2 .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-fairfax2 .residential a {
	color: black;
	font-weight: bolder;
}
#pg-fairfax2 .fairfax2 a {
	color: black;
	font-weight: bolder;
}

#pg-gap .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-gap .retail a {
	color: black;
	font-weight: bolder;
}
#pg-gap .gap a {
	color: black;
	font-weight: bolder;
}
#pg-maryspizza .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-maryspizza .retail a {
	color: black;
	font-weight: bolder;
}
#pg-maryspizza .maryspizza a {
	color: black;
	font-weight: bolder;
}
#pg-walgreens .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-walgreens .retail a {
	color: black;
	font-weight: bolder;
}
#pg-walgreens .walgreens a {
	color: black;
	font-weight: bolder;
}

#pg-civic .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-civic .civic a {
	color: black;
	font-weight: bolder;
}
#pg-civic .plaza a {
	color: black;
	font-weight: bolder;
}
#pg-hanen .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-hanen .civic a {
	color: black;
	font-weight: bolder;
}
#pg-hanen .hanen a {
	color: black;
	font-weight: bolder;
}

#pg-northgate .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-northgate .commercial a {
	color: black;
	font-weight: bolder;
}
#pg-northgate .northgate a {
	color: black;
	font-weight: bolder;
}
#pg-mixeduse .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-mixeduse .commercial a {
	color: black;
	font-weight: bolder;
}
#pg-mixeduse .mixeduse a {
	color: black;
	font-weight: bolder;
}
#pg-ti .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-ti .commercial a {
	color: black;
	font-weight: bolder;
}
#pg-ti .ti a {
	color: black;
	font-weight: bolder;
}
#pg-concierge .portfolio a {
	color: black;
	font-weight: bolder;
}
#pg-concierge .commercial a {
	color: black;
	font-weight: bolder;
}
#pg-concierge .concierge a {
	color: black;
	font-weight: bolder;
}

/*---left side navbar placement & reassurance---*/

.portfolio {
	padding-bottom: 5px;
}
.portfolio a:hover {
	color: black;	
}

.profile {
	padding-bottom: 5px;
}
.profile a:hover {
	color: black;	
}

.principals {
	padding-bottom: 5px;
}
.principals a:hover {
	color: black;	
}

.clients {
	padding-bottom: 5px;
}
.clients a:hover {
	color: black;	
}

.contact {
	padding-bottom: 25px;
}
.contact a:hover {
	color: black;	
}

.residential {
	padding-bottom: 5px;
}
.residential a:hover {
	color: black;	
}

.retail {
	padding-bottom: 5px;
}
.retail a:hover {
	color: black;	
}

.civic {
	padding-bottom: 5px;
}
.civic a:hover {
	color: black;	
}

.commercial {
	padding-bottom: 80px;
}
.commercial a:hover {
	color: black;	
}

.login {
	padding-bottom: 5px;
}
.login a:hover {
	color: black;	
}

.home {
	padding-bottom: 5px;
}
.home a:hover {
	color: black;	
}

<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }


/* Safari */

.webkit #portfoliosidenav, #profilesidenav, #principalmapsidenav, #contactsidenav {
	background-color: rgb(250,250,250);
	position: absolute; top: 137px;
	margin: -10px 0 0 15px;
	padding: 14px 47 0 10px;
	text-align: left; 
	height: 316px;
	width: 65px;
	color: black;
	list-style-type: none;
	float: left;
}	
#portfoliosidenav li { 
	margin: -5px 0 0 0px; 
}

#profilesidenav { 
	padding-right: 4px;
	width: 107px; 
}
#profilesidenav li { 
	margin: -5px 0 0 0px; 
}

#principalmapsidenav {
	padding-right: 4px;
	width: 107px;  
}
#principalmapsidenav li { 
	margin: -5px 0 0 0px; 
}

#contactsidenav {
	background-color: rgb(255,255,255);
	height: 310px;
	width: 112px;  
}
#contactsidenav li { 
margin: -5px 0 0 0px; 
}


/* Firefox */

@-moz-document url-prefix()
{
#writeup {
	position: absolute; top: 140px;
	margin: -10px 0 0 15px;
	height: 320px;
}	
#portfoliosidenav, #profilesidenav, #principalmapsidenav, #contactsidenav {
	background-color: rgb(250,250,250);
	position: absolute; top: 140px;
	margin: -10px 0 0 15px;
	padding: 14px 47 0 10px;
	text-align: left; 
	height: 316px;
	width: 65px;
	color: black;
	list-style-type: none;
	float: left;
}	
#portfoliosidenav li { 
	margin: -5px 0 0 0px; 
}

#profilesidenav {
	padding-bottom: 1px;
	padding-right: 5px;
	width: 106px; 
}
#profilesidenav li { 
	margin: -5px 0 0 0px; 
}

#principalmapsidenav {
	padding-right: 5px;
	width: 107px;  
}
#principalmapsidenav li { 
	margin: -5px 0 0 0px; 
}

#contactsidenav {
	background-color: rgb(255,255,255);
	height: 310px;
	width: 112px;  
}
#contactsidenav li { 
margin: -5px 0 0 0px; 
}

#freakout {
	background-color: rgb(250,250,250);
	opacity:.9;filter:alpha(opacity=20)
	text-align: justify;
	position: absolute; top: 140px; 
	height: 325px;
	margin: -10px 0 0 770px;
	padding: 5px 5 0 5px;
	color: black;
	list-style-type: none;
	float: left;
}
#freakout li {
	display: block;
	list-style-type: none;
	text-align: center;
	padding: 4px 0 4 0px;
}
#freakout .candelabra {
	display: block;
	list-style-type: none;
	font: 10px Arial, Helvetica, sans-serif;
	text-align: center;
	padding: 4px 0 4 0px;
}
}