/**
*   Polaroid CSS3 Styles based on the great idea and implementation by zurb. 
*   http://www.zurb.com/playground/css3-polaroids 
*/


ul.polaroids { 
   width: 880px; margin: 60px -40px 18px -50px; 
}
ul.polaroids li { display: inline; }
ul.polaroids a {
   color:#333 !important;
   background: #fff; 
   display: inline; 
   float: left; 
   margin: 0 0 27px 20px; 
   width: auto; 
   padding: 10px 10px 15px; 
   text-align: center; 
   font-family: "Permanent Marker", sans-serif; 
   text-decoration: none; 
   color: #333; 
   font-size: 18px; 
   -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
   -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
   box-shadow: 0 3px 6px rgba(0,0,0,.25);  
   -webkit-transform: rotate(-2deg); 
   -webkit-transition: -webkit-transform .15s linear; 
   -moz-transform: rotate(-2deg); 
}
ul.polaroids img { display: block; width: 180px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }



ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a{ -webkit-transform: none; position: relative; top: -15px;  -moz-transform: none; }
ul.polaroids li:last-child a{ margin-top:-40px; position: relative; top: 15px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); }

ul.polaroids li.messy a { margin-top: -45px; margin-left: 120px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
ul.polaroids li.messy:nth-child(even) a {  -webkit-transform: rotate(3deg);  -moz-transform: rotate(3deg); }


ul.polaroids li a:hover { 
    color:#444 !important;
    position: relative; z-index: 5;
    -webkit-box-shadow: 0 10px 26px rgba(0,0,0,.25); 
    -moz-box-shadow: 0 10px 26px rgba(0,0,0,.25);
    box-shadow: 0 10px 26px rgba(0,0,0,.25); 
}