/*
  Robin Giles Ribera
  2013
*/

body {
  background: #fff;
  font-family: arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

#wrapper {
  width: 960px;
  margin: auto auto;
}

#sandbox {
  font-family: "goudy-bookletter-1911-2","Baskerville","Georgia", serif;
  overflow: hidden;
  text-align: center;
  margin: 100px auto;
  padding: 40px;
  width: 400px;
  height: 180px;
  z-index: 2;
  font-size: 16px;
  color: black;

  border: 2px solid rgb(21,11,11);
  border-radius: 15px;
  -moz-border-radius:15px;
 
  box-shadow: 0px 0px 20px rgba(255,255,255,1);
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,1),
                     0px 0px 20px rgba(255,255,255,1);

  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,1),
                  0px 0px 20px rgba(255,255,255,1);

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#444444), to(#999999));
  background-image: -moz-linear-gradient(0% 100% 90deg, #999999, #444444);

  border: 2px solid rgb(127, 0, 0);
  border: 2px solid rgba(255, 0, 0, 0.2);
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

/* cabecera
Margenes: 0 0 20px 0
Tama~no de fuente: font-size: 56px
Espacio entre palabras: 2px */
#sandbox h1 {
  margin: 0 0 20px 0;
  font-size: 56px;
  letter-spacing: 2px;

  font-weight: normal;
}

/*abbr
Cursor como "help"
Tama~no de fuente 30 % mas grande que el normal
Color #ff2166;
subrayado de 1px discontinuo y de color #888*/
#sandbox h1 abbr {
  cursor: help;
  font-size: 130%;
  color: #ff2166;
  border-bottom: 1px dashed #888;
}

/*p
Tamao de la fuente 30px
Altura de la linea: 50px
Sin margenes y con ancho automatico*/
#sandbox p {
  font-size: 30px;
  line-height: 50px;
  margin: 0 auto 0 auto;

  /* Blur 1px */
  text-shadow: 0px 0px 1px #333;
}

#sandbox {
  color: rgba(20,20,20,.6);
}

#sandbox::after {
  content: "";
  width: 80px; 
  height: 40px; 
  position: absolute;
  left: 30px;
  top: 10px;
  z-index: 10;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(top,  rgba(232,232,232,.9) 0%, rgba(232,232,232,.9) 1%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,.9)), color-stop(1%,rgba(232,232,232,.9)), color-stop(100%,rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top,  rgba(232,232,232,.9) 0%,rgba(232,232,232,.9) 1%,rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top,  rgba(232,232,232,.9) 0%,rgba(232,232,232,.9) 1%,rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top,  rgba(232,232,232,.9) 0%,rgba(232,232,232,.9) 1%,rgba(255,255,255,0) 100%);
  background: linear-gradient(top,  rgba(232,232,232,.9) 0%,rgba(232,232,232,.9) 1%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 );
  border-radius: 40px / 20px; 
}