/* CSS Document */
@import url("rocketsv2.css");
@import url("gallery.css");

/*title*/
#TitleJohn {
	width: 460px;
	height: 60px;
	background:url(page_titles/johnTitle.png) no-repeat;
	text-indent: -9999px;
	float:left;
}

	/* Adding the thumbnail images */
#content_gallery a.gallery, #content_gallery a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:2px solid #ffffff; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
	/*background-color:#f97aa0;*/
	  }
	  
#content_gallery a{
    height:70px; 
    w\idth:70px;
	}
  
  
  
  #content_gallery a.slide2a {
    background:url(john/john_21_t.jpg) no-repeat;
	/*background-color:#f97aa0;*/
   
    }
#content_gallery a.slide2b {
    background:url(john/john_22_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/
    }
#content_gallery a.slide2c {
    background:url(john/john_23_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/

    }
#content_gallery a.slide2d {
    background:url(john/john_24_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/

    }

#content_gallery a.slide2e {
    background:url(john/john_25_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/

    }
  
  
#content_gallery a.slidea {
    background:url(john/john_01_t.jpg) no-repeat;
	/*background-color:#f97aa0;*/
   
    }
#content_gallery a.slideb {
    background:url(john/john_02_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/
    }
#content_gallery a.slidec {
    background:url(john/john_03_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/

    }
#content_gallery a.slided {
    background:url(john/john_04_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/

    }
* html #content_gallery a.slided {

    }
#content_gallery a.slidee {
    background:url(john/john_05_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/

    }
#content_gallery a.slidef {
    background:url(john/john_06_t.jpg) no-repeat; 
		/*background-color:#f97aa0;*/

    }
* html #content_gallery a.slidef {

    }
#content_gallery a.slideg {
    background:url(john/john_07_t.jpg) no-repeat; 
		/*background-color:#f97aa0;*/

    }
#content_gallery a.slideh {
    background:url(john/john_08_t.jpg) no-repeat; 
		/*background-color:#f97aa0;*/

    }
#content_gallery a.slidei {
    background:url(john/john_09_t.jpg) no-repeat; 
		/*background-color:#f97aa0;*/

    }
#content_gallery a.slidej {
    background:url(john/john_10_t.jpg) no-repeat; 
		/*background-color:#f97aa0;*/

    }
#content_gallery a.slidek {
    background:url(john/john_11_t.jpg) no-repeat; 
	/*background-color:#f97aa0;*/

    }
* html #content_gallery a.slidek {

    }
#content_gallery a.slidel {
    background: url(images/artist_statement.png) no-repeat; 
	background-color:#ffffff;

    }
	
	

	/* change the thumbnail border color */
#content_gallery a.gallery:hover {
    border:2px solid #f97aa0; 
    }
	

	/*When no images are displayed I am left with an uninteresting blank area on the screen. This would look better if I had a default image with perhaps a gallery title displayed. I can do this by adding a background image to the #content_gallery div and, if this image is located in the same area as the span :hover, it will be hidden when I hover over a thumbnail images. */
	
	#content_gallery {
    background:#fff url(john/john_13.jpg) no-repeat;
    }