/* this holds it all. set width for allowable space (20px wider than shown image) */
div#ps 
{
  position:relative;
  top:400px;
  left:-150px;
  padding : 0; 
  margin : auto;
  width : 400px; 
  border:solid 1px red; /* set width to allow for all the boxes in a row and adjust this when changing thumbnail sizes*/
}

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

/* for h2 heading, but an option if h2 is pre-styled (note width) */
div#ps h2 { 
  margin : 60px 0 15px 4%;
  font-weight : normal;
  color : #669900; 
  width : 260px;
}

/* this the same as h2 above, may be optional (do note the width) */
div#ps p { 
  margin : 15px 0 15px 4%;
  font-size : 0.85em; 
  width : 260px; 
}

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

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

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

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

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

/* set fous 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#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 : -207px; 
  left:250px;
  width : 350px; /* adjust this only when changing thumbnail sizes */
  height : 200px;
  position : absolute;
  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(../photos/ps_fish.jpg) no-repeat 0 0;
}
div#ps ul a#psa1:hover {
  background : #222 url(../photos/ps_fish_over.jpg) no-repeat 0 0;
}
div#ps ul a#psa1:focus, div#ps ul a#psa1:active {
  background : #444 url(../photos/ps_fish_on.jpg) no-repeat 0 0;
}

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

/* set backgrounds for each state */
div#ps ul a#psa3 {
  background : #000 url(../photos/ps_man.jpg) no-repeat 0 0;
}
div#ps ul a#psa3:hover {
  background : #222 url(../photos/ps_man_over.jpg) no-repeat 0 0;
}

div#ps ul a#psa3:focus, div#ps ul a#psa3:active {
  background : #444 url(../photos/ps_man_on.jpg) no-repeat 0 0;
}

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

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

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

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

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

/* rinse and repeat as needed */

/* 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 */
}

/* End Styles */