@charset "utf-8";
/* CSS Document */

/* a la lista le damos una dimensión y le colocamos los márgenes necesarios */
ul.polaroids {
  list-style-type: none;
  width: 400px;
  height:250px;
  text-decoration: none;
  
}
ul.polaroids li {
  display:inline;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* cada enlace contiene una imagen y es donde definimos los colores y las propeidades de los textos */
ul.polaroids a {
  display: inline;
  float: left;
  position: absolute;
  margin: 10px 30px;
  padding: 10px;
  width: auto;
  /* las propiedades gráficas */
  background-color: #FFF;
  /* las propiedades de los textos */
  font-family: Tahoma;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  
  /* por defecto, rotamos las imágenes */
  -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);

  /* y la transición */
  -webkit-transition: -webkit-transform .15s linear;
}
ul.polaroids a:link {
	
  font-family: Tahoma;
  text-align: center;
  text-decoration: none;
  margin:0;
  margin-top:30px;
}


/* cada imagen (en este caso las dimensiono todas iguales pero, pueden ser diferentes) */
  ul.polaroids img {display: block;
  margin-bottom: 10px;
  height: 200px;
  width: 400px;
}
/* esto es lo que agregará el texto contenido en el atributo title */
ul.polaroids a:after{
  content: attr(title);
  text-decoration: none;
}
/* utilizando la pseudo-clase nth-child hacemos que algunas imágenes se muestren diferentes */
/* no usamos filtros para IE porque esta pseudo-clase no es reconocida */
ul.polaroids li:nth-child(even) a {
  -moz-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
}
ul.polaroids li:nth-child(3n) a {
  background-color: #AAA;
  color: #589;
  position: relative;
  top: -5px;
  -moz-transform: none;
  -webkit-transform: none;
   }
ul.polaroids li:nth-child(5n) a {
  background-color:#DDD;
  color:#BEF;
  position: relative;
  right: 5px;
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
 }
ul.polaroids li:nth-child(8n) a {
  position: relative;
  right: 5px;
  top: 8px;
}
/* una opción es definir una clase con una característica especial, diferenciada del resto */
ul.polaroids li.messy a {
  background-color: #FEA;
  margin: 20px 150px;
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}
/* por último, el efecto hover es el que lanza las transiciones */
ul.polaroids li a:hover {
  position: relative;
  z-index: 5;
  -moz-box-shadow: 0px 0px 5px #c7c7c7 inset,0px 0px 0px #c7c7c7;
  -webkit-box-shadow:0px 0px 5px #c7c7c7 inset,0px 0px 0px #c7c7c7;
  -moz-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  transform: scale(1.25,1.25);
  -ms-transform: scale(1.25,1.25);
}


/* Texto de salidas porfesionales */


ul.polaroid_pie li{
list-style-type:circle;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
background-image:none;
color:#292929;
}