/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }

h1 { font: bold 32px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 15px 0; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

#page-wrap { width: 480px; margin: 20px auto; }

.image-gallery { margin: 20px 0 0 0; }

figure { 
  width: 117px; 
  float: left; 
  margin: 0 5px 10px 0; 
  background: white;
  border: 3px solid white; 
  -webkit-box-shadow: 0 3px 10px #ccc; 
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(0deg); 
  -moz-transform: rotate(0deg);
  -webkit-transition: all 0.7s ease; 
  -moz-transition: all 1s ease;
  position: relative;
}

figcaption {
  color: #999;
  font-weight: normal; 
  text-align: center; 
  display: block; 
  font-size: 9px; 
  font-style: normal; 
}

figcaption_info {
  color: #999;
  font-weight: normal; 
  text-align: center; 
  display: block; 
  font-size: 7px; 
  font-style: normal; 
}

figure img { 
  width: 100%; /* Scale down */
}

figure:hover {
    -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}

figure:focus {
    outline: none;
    -webkit-transform: rotate(0deg) scale(2.5); -moz-transform: rotate(0deg) scale(2.5);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    z-index: 9999;
}

figure_big { 
  width: 160px; 
  float: left; 
  margin: 0 5px 10px 0; 
  background: white;
  border: 3px solid white; 
  -webkit-box-shadow: 0 3px 10px #ccc; 
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(0deg); 
  -moz-transform: rotate(0deg);
  -webkit-transition: all 0.7s ease; 
  -moz-transition: all 1s ease;
  position: relative;
}

figure_big img { 
  width: 100%; /* Scale down */
}

figure_big:hover {
    -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}

figure_big:focus {
    outline: none;
    -webkit-transform: rotate(0deg) scale(2.5); -moz-transform: rotate(0deg) scale(2.5);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    z-index: 9999;
}