/* Cuadros Amarillos */

/* Paso 1: El HTML y los cuadros básicos *
<ul>
  <li>
    <a href="#">
      <h2>Title #1</h2>
      <p>Text Content #1</p>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>Title #2</h2>
      <p>Text Content #2</p>
    </a>
  </li>
  […]
</ul>
*/

 *{
    margin:0;
    padding:0;
  }
  
  
  #notas table {
    background-color: transparent;
    font-size: 1.00em;
   }
   
  #notas table tr {
  background-color: transparent;
  }
  #notas h2,p{
    /*font-size:60%;*/
    font-weight:normal;
  }
  
  #notas ul,li{
    list-style:none;
  }
  
  #notas ul{
    overflow:hidden;
    padding:3em;
  }
  
  #notas ul li a{
    text-decoration:none;
    color:#000;
    background:#ffc;
    display:block;
    height:10em;
    width:10em;
    padding:1em;
  }
  #notas ul li{
    margin:1em;
    float:left;
  }
/* Paso 2: Sombras paralelas y Fuentes garabateadas*/

  /* <link  href="http://fonts.googleapis.com/css? family=Reenie+Beanie:regular"  rel="stylesheet" type="text/css">*/

  #notas ul li h2{
    color:#000;
    font-size:140%;
    font-weight:bold;
    padding-bottom:10px;
  }
  #notas ul li p{
    font-family:"Reenie Beanie",arial,sans-serif;
    font-size:140%;
  }
/* Sombra */
#notas ul li a{
    text-decoration:none;
    color:#000;
    background:#ffc;
    display:block;
    height:10em;
    width:10em;
    padding:1em;
    /* Firefox */
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    /* Safari+Chrome */
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    /* Opera */
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  }


  /* Paso 3: Inclinando las notas */

  #notas  ul li a{
    -webkit-transform:rotate(-6deg);
    -o-transform:rotate(-6deg);
    -moz-transform:rotate(-6deg);
  }


  /* Inclinación  Aleatoria */
  #notas ul li:nth-child(2n) a{
    -o-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
    position:relative;
    top:5px;
  }
  #notas ul li:nth-child(3n) a{
    -o-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    position:relative;
    top:-5px;
  }
  #notas ul li:nth-child(4n) a{
    -o-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    position:relative;
    top:-10px;
  }

/* Paso 4: Acercando las Notas Adhesivas durante el evento on Hover y Focus */

#notas ul li a:hover,ul li a:focus{
    -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
    -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
    box-shadow:10px 10px 7px rgba(0,0,0,.7);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    position:relative;
    z-index:5;
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
  }


  /*Paso 5: Añadiendo Transiciones Suaves y Colores*/

  #notas ul li a{
    text-decoration:none;
    color:#000;
    background:#ffc;
    display:block;
    height:18em;
    width:18em;
    padding:1em;
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  }


  #notas ul li:nth-child(2n) a{
    -o-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    position:relative;
    top:-5px;
    background:#ccf;
  }

  #notas ul li:nth-child(3n) a{
    -o-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
    position:relative;
    top:5px;
    background:#cfc;
  }

  #notas ul li:nth-child(4n) a{
    -o-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    position:relative;
    top:-5px;
    background:rgb(231, 192, 255);
  }  
  #notas ul li:nth-child(5n) a{
    -o-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
    position:relative;
    top:5px;
    background:rgb(155, 240, 255);
  }

  #notas ul li:nth-child(6n) a{
    -o-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
    position:relative;
    top:5px;
    background:#ffc;
  }
  

  #notas ul li:nth-child(2n) a:hover,ul li:nth-child(2n) a:focus{
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
  }

  #notas ul li:nth-child(3n) a:hover,ul li:nth-child(3n) a:focus{
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
  }
  #notas ul li:nth-child(4n) a:hover,ul li:nth-child(4n) a:focus{
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
  }
  #notas ul li:nth-child(5n) a:hover,ul li:nth-child(5n) a:focus{
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
  }
  #notas ul li:nth-child(6n) a:hover,ul li:nth-child(6n) a:focus{
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
  }