@charset "utf-8";

/* © 2016
   Author: Jane Griffiths
   Last amended: 21/01/16
*/

/* SUBSET OF STYLES FOR GALLERY */
/* The url refs specified in this file will apply different 
background images according to the picture frame id.
First specify a jpeg for each picture frame id listed under the 
'larger screen sizes' section below; then specify a smaller jpeg for 
each picture frame id listed under the 'smaller screen sizes' section. 
Make sure that the larger and smaller versions you list for any particular 
id (e.g. pic01) show the same content (just at a different size).
Note that backgrounds are specified for the thumbnails purely as a means of preloading 
the images ready for the slideshow (as this prevents the images flickering on slower 
connections when the slideshow is played).

Please add the foreground thumbnail images (65px by 65px) to the relevant gallery's html page 
and include a suitable caption in the html.
*/


/* FOR LARGER SCREEN SIZES */
/* For each of the following, 
please ensure that the jpg you are using 
is either 600px wide or 450px high (or both) */

.picture_frame[id="pic01"], .thumbnail_frame[id="thumb01"] {
	background-image:url(images/gallery01/g01-01_main.jpg);
}

.picture_frame[id="pic02"], .thumbnail_frame[id="thumb02"] {
	background-image:url(images/gallery01/g01-02_main.jpg);
}

.picture_frame[id="pic03"], .thumbnail_frame[id="thumb03"] {
	background-image:url(images/gallery01/g01-03_main.jpg);
}

.picture_frame[id="pic04"], .thumbnail_frame[id="thumb04"] {
	background-image:url(images/gallery01/g01-04_main.jpg);
}

.picture_frame[id="pic05"], .thumbnail_frame[id="thumb05"] {
	background-image:url(images/gallery01/g01-05_main.jpg);
}

.picture_frame[id="pic06"], .thumbnail_frame[id="thumb06"] {
	background-image:url(images/gallery01/g01-06_main.jpg);
}

.picture_frame[id="pic07"], .thumbnail_frame[id="thumb07"] {
	background-image:url(images/gallery01/g01-07_main.jpg);
}

.picture_frame[id="pic08"], .thumbnail_frame[id="thumb08"] {
	background-image:url(images/gallery01/g01-08_main.jpg);
}

.picture_frame[id="pic09"], .thumbnail_frame[id="thumb09"] {
	background-image:url(images/gallery01/g01-09_main.jpg);
}

.picture_frame[id="pic10"], .thumbnail_frame[id="thumb10"] {
	background-image:url(images/gallery01/g01-10_main.jpg);
}

.picture_frame[id="pic11"], .thumbnail_frame[id="thumb11"] {
	background-image:url(images/gallery01/g01-11_main.jpg);
}

.picture_frame[id="pic12"], .thumbnail_frame[id="thumb12"] {
	background-image:url(images/gallery01/g01-12_main.jpg);
}


/* FOR SMALLER SCREENS (up to 640px) */
/* For each of the following, 
please ensure that the jpg you are using 
is either 300px wide or 225px high (or both) */

@media screen and (max-width: 640px) {
  .picture_frame[id="pic01"], .thumbnail_frame[id="thumb01"] {
	  background-image:url(images/gallery01/g01-01_smaller.jpg); /* use smaller jpg file here */
  }
  
  .picture_frame[id="pic02"], .thumbnail_frame[id="thumb02"] {
	  background-image:url(images/gallery01/g01-02_smaller.jpg); /* use smaller jpg file here */
  }
  
  .picture_frame[id="pic03"], .thumbnail_frame[id="thumb03"] {
	  background-image:url(images/gallery01/g01-03_smaller.jpg); /* use smaller jpg file here */
  }
  
  .picture_frame[id="pic04"], .thumbnail_frame[id="thumb04"] {
	  background-image:url(images/gallery01/g01-04_smaller.jpg); /* use smaller jpg file here */
  }
  
  .picture_frame[id="pic05"], .thumbnail_frame[id="thumb05"] {
	  background-image:url(images/gallery01/g01-05_smaller.jpg); /* use smaller jpg file here */
  }
  
  .picture_frame[id="pic06"], .thumbnail_frame[id="thumb06"] {
	  background-image:url(images/gallery01/g01-06_smaller.jpg);/* use smaller jpg file here */
  }
  
  .picture_frame[id="pic07"], .thumbnail_frame[id="thumb07"] {
	  background-image:url(images/gallery01/g01-07_smaller.jpg); /* use smaller jpg file here */
  }
  
  .picture_frame[id="pic08"], .thumbnail_frame[id="thumb08"] {
	  background-image:url(images/gallery01/g01-08_smaller.jpg); /* use smaller jpg file here */
  }

 .picture_frame[id="pic09"], .thumbnail_frame[id="thumb09"] {
	  background-image:url(images/gallery01/g01-09_smaller.jpg); /* use smaller jpg file here */
  }

.picture_frame[id="pic10"], .thumbnail_frame[id="thumb10"] {
	  background-image:url(images/gallery01/g01-10_smaller.jpg); /* use smaller jpg file here */
  }
.picture_frame[id="pic11"], .thumbnail_frame[id="thumb11"] {
	  background-image:url(images/gallery01/g01-11_smaller.jpg); /* use smaller jpg file here */
  }
.picture_frame[id="pic12"], .thumbnail_frame[id="thumb12"] {
	  background-image:url(images/gallery01/g01-12_smaller.jpg); /* use smaller jpg file here */
  }

}