/* this holds it all set width for allowable space (20px wider than shown image) */

div#ps 	{
	padding : 0;
 	width : auto; 
  	margin : auto;
  	width : 760px;  /* set width to allow for all the boxes in a row and adjust this when changing thumbnail sizes*/
	}



.ps_offset {
  	position : absolute;
  	margin-left : -2000px;
  	margin-top : -2000px;
	}							/* hides the accessible links from view but keeps 'em available */



div#ps ul {
	margin : 5px 0 70px 4%;
  	height : 60px;
	}							/* style the unordered list (note height) */



div#ps ul li { display: inline; }				/* make the list items show horizontally */


div#ps ul a {						
  	display : block;
  	float : left;
  	border : 1px solid #cd7000;
  	text-decoration : none;
  	margin : 0 5px 5px 0;
  	width : 80px;
  	height : 60px;
  	cursor : pointer;   /* this is for Opera only */
	}							/* set the links as blocks, size in px (must be floated) */



div#ps ul a:hover { border: 1px solid #000; }			/* set hover state border */


div#ps a img { border: 0; }					/* but remove border from images */



/* set focus position (width and height will match big photo size and list row width */
div#ps ul a#psa3:focus, div#ps ul a#psa3:active, div#ps ul a#psa7:focus, div#ps ul a#psa7:active { 
  margin-top : -807px; 
  width : 389px; /* adjust this only when changing thumbnail sizes */
  height : 584px;
  position : relative;
  cursor : default;   /* because I like it, if you don't, do use "cursor : default" */
}



/* set focus position (width and height will match big photo size and list row width */
div#ps ul a#psa1:focus, div#ps ul a#psa1:active, div#ps ul a#psa2:focus, div#ps ul a#psa2:active, div#ps ul a#psa4:focus, div#ps ul a#psa4:active, div#ps ul a#psa5:focus, div#ps ul a#psa5:active, div#ps ul a#psa6:focus, div#ps ul a#psa6:active { 
  margin-top : 807px;
  margin-left: 10%;
  width : 584px; /* adjust this only when changing thumbnail sizes */
  height : 389px;
  position : absolute;
  left:  auto;
  right: auto;
  top: 780px;
  cursor : default;   /* because I like it, if you don't, do use "cursor : default" */
}




/* set backgrounds for each state */
div#ps ul a#psa1 {
  background : #000 url(images/building.jpg) no-repeat 0 0;
}
div#ps ul a#psa1:hover {
  background : #222 url(images/building.jpg) no-repeat 0 0;
}
div#ps ul a#psa1:focus, div#ps ul a#psa1:active {
  background : #444 url(images/building.jpg) no-repeat 0 0;
}



/* set backgrounds for each state */
div#ps ul a#psa2 { background : #000 url(images/entrance.jpg) no-repeat 0 0; }
div#ps ul a#psa2:hover { background : #222 url(images/entrance.jpg) no-repeat 0 0; }
div#ps ul a#psa2:focus, div#ps ul a#psa2:active { background : #444 url(images/entrance.jpg) no-repeat 0 0; }



/* set backgrounds for each state */
div#ps ul a#psa3 { background : #000 url(images/mainoffice.jpg) no-repeat 0 0; }
div#ps ul a#psa3:hover { background : #222 url(images/mainoffice.jpg) no-repeat 0 0; }
div#ps ul a#psa3:focus, div#ps ul a#psa3:active { background : #444 url(images/mainoffice.jpg) no-repeat 0 0; }



/* set backgrounds for each state */
div#ps ul a#psa4 { background : #000 url(images/room1.jpg) no-repeat 0 0; }
div#ps ul a#psa4:hover { background : #222 url(images/room1.jpg) no-repeat 0 0; }
div#ps ul a#psa4:focus, div#ps ul a#psa4:active { background : #444 url(images/room1.jpg) no-repeat 0 0; }



/* set backgrounds for each state */
div#ps ul a#psa5 { background : #000 url(images/room2.jpg) no-repeat 0 0; }
div#ps ul a#psa5:hover { background : #222 url(images/room2.jpg) no-repeat 0 0; }
div#ps ul a#psa5:focus, div#ps ul a#psa5:active { background : #444 url(images/room2.jpg) no-repeat 0 0; }



/* set backgrounds for each state */
div#ps ul a#psa6 { background : #000 url(images/room3.jpg) no-repeat 0 0; }
div#ps ul a#psa6:hover { background : #222 url(images/room3.jpg) no-repeat 0 0; }
div#ps ul a#psa6:focus, div#ps ul a#psa6:active { background : #444 url(images/room3.jpg) no-repeat 0 0; }



/* set backgrounds for each state */
div#ps ul a#psa7 { background : #000 url(images/room4.jpg) no-repeat 0 0; }
div#ps ul a#psa7:hover { background : #222 url(images/room4.jpg) no-repeat 0 0; }
div#ps ul a#psa7:focus, div#ps ul a#psa7:active { background : #444 url(images/room4.jpg) no-repeat 0 0; }





/* this needs to be in conditional comment for IE only */
div#ps ul a#psa1:focus, div#ps ul a#psa1:active, div#ps ul a#psa2:focus, div#ps ul a#psa2:active, div#ps ul a#psa3:focus, div#ps ul a#psa3:active, div#ps ul a#psa4:focus, div#ps ul a#psa4:active, div#ps ul a#psa5:focus, div#ps ul a#psa5:active, div#ps ul a#psa6:focus, div#ps ul a#psa6:active, div#ps ul a#psa7:focus, div#ps ul a#psa7:active, div#ps ul a#psa8:focus, div#ps ul a#psa8:active {
  margin-top : -254px; /* adjust this only when changing thumbnail sizes */
  margin-left : -201px; /* adjust this as rows get longer */
}