/*----------
100907
expt- trying to use the sprite-nav concept to choose a page-image from a sprite of images

note- really don't need the pre-div reference to #page-image, ie
#page-image #one-image  

it is enough to just have #one-image, etc

each reference uses the sprite image, 
with background-position locating the proper portion of the sprite
----------------*/

* {margin:0;padding:0;}

body {
  	margin: 0px;   /* I added- omitting margin-8px margin is placed by default */
  	width: 100%; 

/*-------- 
font shorthand
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
--------*/

  font: 16px "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
 
img { border: none; }  /* fr Wdw-prevents a border around a link image */

p { margin: 0 0 0 0; }

#page-wrap {
	width: 960px; 
	margin: 25px auto 0 auto;
	position: relative;
	padding: 0 0 0 0;
}

.para-wrap {
	width: 700px; 
	margin: 10px 0 0 0;
	position: relative;
	padding: 0 0 0 0;
}

/*--------
NOTE: format below follows the apple sprites structure
I like it because I can write the code in #page-image one time,
and then just write a line for each background-position for each sprite

This format requires
#page-image div{foo}
#page-image div#pg-img-1{foo}

--------*/

#page-image div {
	background-image: url(images/sprite_123.jpg);  
  width: 240px;
  height: 180px; 
  cursor: default;
}

#page-image div#pg-img-1  { background-position: 0px -0px; }
#page-image div#pg-img-2  { background-position: 0px -180px; }
#page-image div#pg-img-3  { background-position: 0px -360px; }