/*
Polaroid

Usage: 
<div class="polaroid">
  <p>Sarah, Dec '02</p>
  <img src="http://lorempixum.com/200/200/people/1" />
</div>
*/

/*@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');*/

.polaroid {
  position: relative;
}

.polaroid img {
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}

.polaroid p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: -3px;
/*  font: 400 18px/1, cursive;*/
  color: #888;
  font-size: 12pt;
}


/*
Multiple Borders

Usage:
<div class="multiple-borders">
  <img src="http://lorempixum.com/400/200/nature/1" />
</div>
*/

.multiple-borders {
  -webkit-box-shadow:
    		0px 0px 0px 2px rgba(0,0,0,0.6),
                0px 0px 0px 14px #fff,
                0px 0px 0px 18px rgba(0,0,0,0.2),
                6px 6px 8px 17px #555;
  
     -moz-box-shadow:
    		0px 0px 0px 2px rgba(0,0,0,0.6),
                0px 0px 0px 14px #fff,
                0px 0px 0px 18px rgba(0,0,0,0.2),
                6px 6px 8px 17px #555;
  
          box-shadow:
    		0px 0px 0px 2px rgba(0,0,0,0.6),
                0px 0px 0px 14px #fff,
                0px 0px 0px 18px rgba(0,0,0,0.2),
                6px 6px 8px 17px #555;
}

/*
Vignette

Usage:
<div class="vignette">
</div>
*/

.vignette {
  background: url("http://lorempixum.com/400/200/nature/5");
  width: 400px; height: 200px;
  -webkit-box-shadow:
    		inset 0 0 50px #000,
                inset 0 0 50px #000,
                inset 0 0 50px #000;
  
     -moz-box-shadow:
    		inset 0 0 50px #000,
                inset 0 0 50px #000,
                inset 0 0 50px #000;
  
          box-shadow:
    		inset 0 0 50px #000,
                inset 0 0 50px #000,
                inset 0 0 50px #000;
}

/*
Grunge

Usage:
<div class="grunge">
</div>
*/

.grunge {
  background: url("http://lorempixum.com/400/200/technics/4");
  width: 400px; height: 200px;
  margin: 50px;
  -webkit-box-shadow: inset 0 0 20px black;
     -moz-box-shadow: inset 0 0 20px black;
          box-shadow: inset 0 0 20px black;
}

.grunge:hover {
  background: url("http://designshack.net/wp-content/uploads/imagetreatments-texture3.png"), url("http://lorempixum.com/400/200/technics/4");
}