Css-Icons.php

Quell Code

<h1>Íconos CSS. </h1>
<h2>Con un <code>span</code> .</h2>

 
<style type="text/css">
.spanNavicon {display: inline-block; 
margin: auto .9em .1em; 
width: .8em; height: .1em; 
border-color: black; 
border-style: solid none double; 
border-width: 0.1em 0 0.3em; 
}
</style>
<p><span class=spanNavicon></span> Navicon. [? (&amp;#8801;), operadores matemáticos 'idéntico a'; &#119064, (&amp;#119064;), símbolos musicales 'trigrama'; &#9776; (&amp;#9776;), I-Ching 'chien' o 'trigrama del cielo'.]</p>


<style type="text/css">
.spanSeticon1 { display: inline-block; 
position: relative; 
margin: auto .9em;
border-radius: 50%;
border: .13em dotted black; 
width: .65em; height: .65em; 
}
.spanSeticon1:before {content: ""; 
margin: -.05em; 
border: .3em double black; 
border-radius: 50%; 
display: block; 
height: .15em; width: .15em; 
}
@-moz-document url-prefix() { 
 .spanSeticon1 {border-radius: 20%; 
 border-width: .18em; 
 width: .5em; height: .5em; 
}
.spanSeticon1:before {margin: -.125em; 
}
</style>
<p><span class=spanSeticon1></span> Gear 1 (Seticon). [&#9881; (&amp;#9881;), símbolos varios 'engranaje'; &#9784; (&amp;#9784;), símbolos varios 'rueda de Dharma'.]</p>


<style type="text/css">
.spanSeticon2 {display: inline-block; 
position: relative; 
margin: auto .9em .1em; 
width: 0; height: 0; 
border: double 17px black; 
border-radius: 100%; 
}
.spanSeticon2:before {content: ""; 
position: absolute; 
top: -16px; left: -16px; 
height: 24px; width: 24px; 
border: 4px solid black; 
transform: rotate(22.5deg); 
border-radius: 10%; 
}
.spanSeticon2:after {content: ""; 
position: absolute; 
top: -16px; left: -16px; 
height: 24px; width: 24px; 
border: 4px solid black; 
transform: rotate(-22.5deg); 
border-radius: 10%; 
}
</style>
<p><span class=spanSeticon2></span> Gear 2 (Seticon).</p>


<style type="text/css">
.spanSeticon3 {display: inline-block; 
position: relative; 
margin: auto .95em .1em; 
width: .32em; height: .32em; 
border: .2em solid black; 
border-radius: 100%; 
}
.spanSeticon3:before {content: ""; 
position: absolute; 
top: -.3em; left: .065em; 
height: .2em; width: .2em; 
transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
transform-origin: .1em .46em;
-webkit-transform-origin: .1em .44em;
border-radius: 30%; 
background-color: black; 
box-shadow: 0 .74em 0 0 black, .365em .365em 0 0 black, -.365em .365em 0 0 black; 
}
.spanSeticon3:after {content: ""; 
position: absolute; 
top: -.3em; left: .065em; 
height: .2em; width: .2em; 
border-radius: 30%; 
background-color: black; 
box-shadow: 0 .74em 0 0 black, .365em .365em 0 0 black, -.365em .365em 0 0 black; 
}
</style>
<p><span class=spanSeticon3></span> Gear 3 (Seticon).</p>


<style type="text/css"> /* 6/Jul/2014 14:23 */
.spanAdjust {position: relative; 
display: inline-block; 
margin: 0 .92em -.05em; 
width: .7em; height: .6em; 
background-color: white; 
border: solid .05em black; 
border-radius: .1em; 
background-image: linear-gradient(to right, black, black .05em, white .05em, white .175em, black .175em, black .225em, white .225em, white .35em, black .35em, black .4em, white .4em, white 100%); 
background-position: center; 
background-size: .4em .4em;
background-repeat: no-repeat; 
}
.spanAdjust::before {content: ""; 
position: absolute; 
width: .13em; height: .12em; 
left: .11em; top: .16em; 
background-color: black; 
border-radius: 100%; 
box-shadow: .175em .16em 0 0 black, .355em .06em 0 0 black; 
}
</style>
<p><span class=spanAdjust></span> Adjust. Setting. [&#127898; (&amp;#127898;), símbolos varios y pictogramas 'deslizable de volumen'; &#127899; (&amp;#127899;), símbolos varios y pictogramas 'botones de control' o 'ajustes'.]</p>


<style type="text/css">
.spanTools {position: relative; 
display: inline-block; 
background-color: black; 
margin: auto .8em .3em; 
width: 1em; height: .2em; 
}
.spanTools:before {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
left: -.3em; top: -.15em; 
border-color: black; 
border-style: solid; 
border-width: .1em .2em .1em 0; 
border-radius: 25% 50% 50% 25%; 
}
.spanTools:after {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
left: .8em; top: -.15em; 
border-color: black; 
border-style: solid; 
border-width: .1em 0 .1em .2em; 
border-radius: 50% 25% 25% 50%; 
}
</style>
<p><span class=spanTools></span> Wrench 1 (Tools). [&#128295; (&amp;#128295;), símbolos varios y pictogramas 'llave inglesa (de boca fija)'.]</p>


<style type="text/css">
.spanFloppyDisk {position: relative; 
margin: auto .9em .1em; 
display: inline-block; 
width: .8em; height: .8em; 
border-radius: .1em 0 0 0; 
background-color: black; 
}
.spanFloppyDisk:before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
border-radius: 50%; 
border: .1em solid silver; 
top: .25em; left: .25em; 
background-color: black; 
}
.spanFloppyDisk:after {content: ""; 
position: absolute; 
display: block; 
top: 0; left: .22em; 
width: .1em; height: .1em; 
border-style: solid;
border-width: .05em .2em .05em .05em; 
border-color: silver; 
background-color: black; 
}
</style>
<p><span class=spanFloppyDisk></span> Floppy Disk (Save). [&#128190; (&amp;#128190;), símbolos varios y pictogramas 'disco flexible'.]</p>


<style type="text/css">
.spanClip {position: relative; 
display: inline-block; 
margin: auto .8em .2em; 
width: 40px; height: 10px; 
border-style: solid; 
border-width: 2px 2px 2px 0; 
border-color: black; 
border-radius: 0 4px 4px 0; 
}
.spanClip:before {content: ""; 
position: absolute; 
display: block; 
background-color: transparent; 
top: -8px; left: -20px; 
height: 16px; width: 50px; 
border-style: solid; 
border-color: black transparent black black; 
border-width: 2px; 
border-radius: 10px 0 0 10px; 
}
.spanClip:after {content: ""; 
position: absolute; 
display: block; 
background-color: transparent; 
top: -8px; left: 0; 
height: 22px; width: 62px; 
border-style: solid; 
border-color: black black black transparent; 
border-width: 2px; 
border-radius: 0 12px 12px 0; 
}
</style>
<p><span class=spanClip></span> Paper Clip (Attach). [&#128206; (&amp;#128206;) símbolos varios y pictogramas 'clip para papel'.]</p>


<style type="text/css"> /* 9/Oct/2015 22:13 */
.spanBookmark {position: relative; 
display: inline-block; 
margin: 0 1.2em -.05em; 
width: .2em; height: .65em; 
border-top: solid .14em black; 
box-shadow: inset 0 .04em 0 0 gainsboro; 
background-image: 
linear-gradient(45deg, transparent 20%, black 25%), 
linear-gradient(315deg, transparent 20%, black 25%); 
background-repeat: no-repeat; 
transform: rotate(50deg); 
}
</style>
<p><span class=spanBookmark></span> Bookmark. [&#128278; (&amp;#128278;), símbolos varios y pictogramas 'marcador de libros'.]</p>


<style type="text/css">
.spanFolder {display: inline-block; 
width: 1em; height: .6em; 
position: relative; 
margin: 0 .85em 0; 
background-color: black; 
border-radius : 10% 10% 0 0; 
}
.spanFolder:after {content: ""; 
display: block; 
width: .2em; height: 0; 
position: absolute; 
left: .05em; top: -.3em; 
border-style: solid; 
border-width: .15em; 
border-color: transparent transparent black; 
}
</style>
<p><span class=spanFolder></span> File Folder. [&#128193; (&amp;#128193;), símbolos varios y pictogramas 'carpeta de archivos'.]</p>


<style type="text/css"> /* 29/Jun/2014 15:00 */
.spanOpenFolder {display: inline-block; 
width: 1em; height: .6em; 
position: relative; 
margin: 0 .85em; 
background-color: black; 
border-radius : 10% 10% 0 0; 
}
.spanOpenFolder:before {content: ""; 
display: block; 
width: .2em; height: 0; 
position: absolute; 
left: .05em; top: -.3em; 
border-width: .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
.spanOpenFolder:after {content: ""; 
display: block; 
width: 1em; height: 0; 
position: absolute; 
left: -.06em; top: .2em; 
border-width: .4em .06em 0; 
border-style: solid; 
border-color: black transparent transparent; 
border-radius : 10% 10% 0 0; 
box-shadow: 0 -.03em 0 0 grey; 
}
</style>
<p><span class=spanOpenFolder></span> Open File Folder. [&#128194; (&amp;#128194;), &#128449; (&amp;#128449;), símbolos varios y pictogramas 'carpeta de archivos abierta'.]</p>


<style type="text/css">
.spanBreakFolder {display: inline-block; 
width: 0; height: .6em; 
position: relative; 
margin: 0 1em; 
border: none; 
border-left: solid .45em black; 
border-right: solid .15em transparent; 
border-radius : 10% 10% 0 0; 
background-image: linear-gradient(125deg, black, black .12em, transparent .12em, transparent 100%), 
linear-gradient(45deg, black, black .12em, transparent .12em, transparent 100%), 
linear-gradient(125deg, black, black .14em, transparent .14em, transparent 100%); 
background-size: .15em .2em; 
background-position: right -.15em top 0, right -.15em top .15em, right -.15em top .33em; 
background-repeat: no-repeat; 
transform: rotate(352deg); 
}
.spanBreakFolder:before {content: ""; 
display: block; 
width: .2em; height: 0; 
position: absolute; 
left: -.42em; top: -.285em; 
border-width: .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
.spanBreakFolder:after {content: ""; 
display: block; 
width: 0; height: .6em; 
position: absolute; 
left: .15em; top: .07em; 
border: none; 
border-left: solid .15em transparent; 
border-right: solid .2em black; 
border-radius : 0 10% 0 0; 
background-image: linear-gradient(125deg, transparent, transparent .12em, black .12em, black 100%), 
linear-gradient(45deg, transparent, transparent .12em, black .12em, black 100%), 
linear-gradient(125deg, transparent, transparent .12em, black .12em, black 100%); 
background-size: .15em .2em; 
background-position: -.15em 0, -.15em .15em, -.15em .4em; 
background-repeat: no-repeat; 
transform: rotate(12deg); 
}
</style>
<p><span class=spanBreakFolder></span> Break File Folder. ['carpeta de archivos dañada'.]</p>


<style type="text/css"> /* 8/Jul/2014 17:38 */
.spanZipFolder {display: inline-block; 
width: 1.2em; height: .8em; 
position: relative; 
margin: 0 .8em -.1em; 
background-image: 
repeating-linear-gradient(to right, silver, silver .06em, transparent .065em, transparent .14em), 
repeating-linear-gradient(to right, silver, silver .06em, transparent .065em, transparent .14em), 
linear-gradient(black, black); 
background-size: 1.2em .125em, 1.2em .125em, 100% 100%; 
background-repeat: no-repeat; 
background-position: .1625em .4em, .1em .35em, 0 0; 
border-radius : 10% 10% 0 0; 
}
.spanZipFolder::before {content: ""; 
display: block; 
width: .25em; height: 0; 
position: absolute; 
left: .08em; top: -.3em; 
border-width: .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
.spanZipFolder::after {content: ""; 
display: block; 
width: .12em; height: .1em; 
position: absolute; 
left: .83em; top: .39em; 
background-color: rgba(0,0,0,.7); 
border-width: .04em .05em .04em .2em; 
border-style: solid; 
border-color: dimgray; 
box-shadow: inset 0 0 0 .025em silver, 0 0 0 .03em silver; 
border-radius: .07em 0 0 .07em; 
-webkit-transform: rotate(343deg); 
transform: rotate(343deg); 
}
</style>
<p><span class=spanZipFolder></span> Zip Files Folder. ['carpeta de archivos comprimidos'.]</p>


<style type="text/css"> /* 15/Jun/2016 21:33 */
.spanAudioFolder1 {display: inline-block; 
width: 1.2em; height: .8em; 
position: relative; 
margin: 0 .8em -.1em; 
background: 
radial-gradient(circle, white 65%, transparent 75%) .29em .43em, 
radial-gradient(circle, white 65%, transparent 75%) .67em .52em, black; 
background-size: .2em .2em; 
background-repeat: no-repeat; 
border-radius : 10% 10% 0 0; 
}
.spanAudioFolder1::before {content: ""; 
display: block; 
width: .25em; height: 0; 
position: absolute; 
left: .08em; top: -.3em; 
border-width: .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
.spanAudioFolder1::after {content: ""; 
display: block; 
width: .33em; height: .26em; 
position: absolute; 
left: .45em; top: .2em; 
border-width: .14em .05em 0; 
border-style: solid; 
border-color: white; 
transform: skewy(10deg); 
}
</style>
<p><span class=spanAudioFolder1></span> Audio Files Folder 1. ['carpeta de archivos de audio'.]</p>


<style type="text/css"> /* 17/Jun/2016 11:14 */
.spanAudioFolder2 {display: inline-block; 
width: 1.2em; height: .8em; 
position: relative; 
margin: 0 .8em -.1em; 
background: black; 
border-radius : 10% 10% 0 0; 
}
.spanAudioFolder2::before {content: ""; 
display: block; 
width: .25em; height: 0; 
position: absolute; 
left: .08em; top: -.3em; 
border-width: .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
.spanAudioFolder2::after {content: ""; 
display: block; 
width: .15em; height: .2em; 
position: absolute; 
left: .44em; top: .17em; 
background: white; 
border-width: .16em .2em .16em 0; 
border-style: solid; 
border-color: black white black; 
}
</style>
<p><span class=spanAudioFolder2></span> Audio Files Folder 2. </p>



<style type="text/css"> /* 17/Jun/2016 12:13 */
.spanVideoFolder {display: inline-block; 
width: 1.2em; height: .8em; 
position: relative; 
margin: 0 .8em -.1em; 
background: black; 
border-radius : 10% 10% 0 0; 
}
.spanVideoFolder::before {content: ""; 
display: block; 
width: .25em; height: 0; 
position: absolute; 
left: .08em; top: -.3em; 
border-width: .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
.spanVideoFolder::after {content: ""; 
display: block; 
width: .46em; height: .46em; 
position: absolute; 
left: .36em; top: .2em; 
background: linear-gradient(silver,silver) content-box, black; 
border-width: 0 .06em; 
border-style: dotted; 
border-color: white; 
box-shadow: inset 0 0 0 .03em black; 
}
</style>
<p><span class=spanVideoFolder></span> Video Files Folder. ['carpeta de archivos de video'.]</p>


<style type="text/css"> /* 17/Jun/2016 11:53 */
.spanImageFolder {display: inline-block; 
width: 1.2em; height: .8em; 
position: relative; 
margin: 0 .8em -.1em; 
background: black; 
border-radius : 10% 10% 0 0; 
}
.spanImageFolder::before {content: ""; 
display: block; 
width: .25em; height: 0; 
position: absolute; 
left: .08em; top: -.3em; 
border-width: .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
.spanImageFolder::after {content: ""; 
display: block; 
width: .46em; height: .38em; 
position: absolute; 
left: .36em; top: .2em; 
background: radial-gradient(silver 50%, transparent 65%), 
radial-gradient(ellipse at left bottom, grey 68%, black 70%, transparent 77%), 
radial-gradient(ellipse at right bottom, grey 70%, black 75%), black; 
background-size: .14em .14em, .5em .3em, .35em .17em; 
background-position: .3em .02em, -.2em .1em, .22em .22em; 
background-repeat: no-repeat; 
border: solid .05em white; 
border-radius: .1em; 
}
</style>
<p><span class=spanImageFolder></span> Image Files Folder. ['carpeta de archivos de imágenes'.]</p>


<style type="text/css"> /* 18/Dic/2014 11:32 */
.spanListTable {position: relative; 
display: inline-block; 
margin: 0 .6em -.05em .8em; 
width: .875em; height: .6em; 
border-style: solid; 
border-width: .2em 0 0 .3em; 
border-color: rgba(0,0,0,.3); 
outline: solid .025em black; 
background: 
repeating-linear-gradient(to right, transparent, transparent .275em, black .275em, black .3em) 0 .025em, 
repeating-linear-gradient(transparent, transparent .175em, black .175em, black .2em) 0 .025em, 
silver; 
background-origin: border-box; 
}
</style>
<p><span class=spanListTable></span> Table, Tabulated Data. Grid.[&#9638; (&amp;#9638;), formas geométricas 'relleno cuadriculado'.]</p>


<style type="text/css"> /* 2/Abr/2014 0:29 */
.spanListSquared {position: relative; 
display: inline-block; 
margin: auto .8em .5em 1em; 
padding: .05em .05em .05em .07em; 
line-height: 0;
width: .6em; height: .1em; 
background-color: black; 
border-color: transparent black; 
border-style: solid; 
border-width: 0 0 0 .18em; 
background-clip: content-box;
}
.spanListSquared:before, .spanListSquared:after {content: ""; 
position: absolute; 
left: -.18em; top: .25em; 
padding: inherit; 
width: .6em; height: .1em; 
background-color: black; 
border-color: inherit; 
border-style: solid; 
border-width: inherit; 
background-clip: inherit;
}
.spanListSquared:after {top: .5em; 
}
</style>
<p><span class=spanListSquared></span> List. ['lista'.]</p>


<style type="text/css">
.spanSpeechBalloon {position: relative; 
display: inline-block; 
background-color: black; 
width: .9em; height: .5em; 
margin: 0 .9em .3em; 
border-radius: .2em; 
}
.spanSpeechBalloon:after {content: ""; 
display: block; 
width: 0; height: 0; 
position: absolute; 
left: .25em; top: .50em; 
border-style: solid;
border-width: .25em .15em 0 0; 
border-color: black transparent white; 
}
</style>
<p><span class=spanSpeechBalloon></span> Speech Balloon (Comment). [&#128172; (&amp;#128172;), símbolos varios y pictogramas 'globo de diálogo'.]</p>


<style type="text/css"> /* 21/Dic/2014 13:52 */
.spanDialog {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: .5em; height: .5em; 
border-style: solid; 
border-width: 0 .1em .1em .15em; 
border-color: black black black transparent; 
border-radius: 120% 100% 110% 0 / 100% 110% 100% 0; 
background-image: radial-gradient(circle, black, black .4em, transparent .41em, transparent 100%); 
background-position: 0 -.09em; 
background-origin: border-box; 
background-repeat: no-repeat; 
}
.spanDialog::before {content: ""; 
position: absolute; 
left: .1em; top: -.1em; 
width: .5em; height: .5em; 
border-style: solid; 
border-width: 0 .15em .1em .1em; 
border-color: grey transparent grey grey; 
border-radius: 100% 120% 0 110% / 110% 100% 0 100%; 
background-image: radial-gradient(circle, grey, grey .4em, transparent .41em, transparent 100%); 
background-position: 0 -.09em; 
background-origin: inherit; 
background-repeat: inherit; 
}
.spanDialog::after {content: ""; 
position: absolute; 
width: .3em; height: .1em; 
left: .32em; top: .1em; 
background-color: black; 
border-style: solid; 
border-width: .05em 0; 
border-color: black; 
box-shadow: inset -.07em 0 0 .025em grey; 
}
</style>
<p><span class=spanDialog></span> Two Speech Bubbles. Dialog. [&#128490; (&amp;#128490;), símbolos varios y pictogramas 'globos de diálogo' o 'conversación'.]</p>


<style type="text/css">
.spanReload {position: relative; 
display: inline-block; 
width: .7em; height: .7em; 
border-radius: 40% 50% 50% 50% / 50%; 
margin: 0 .9em .1em; 
border-style: solid; 
border-color: black; 
border-width: .05em .1em; 
}
.spanReload:before {content: ""; 
position: absolute; 
display: block; 
top: -.22em; left: .16em; 
width: 0; height: 0; 
border-style: solid; 
border-width: .2em .25em .2em .1em; 
border-color: transparent black transparent white; 
}
.spanReload:after {content: ""; 
position: absolute; 
display: block; 
top: .51em; left: .2em; 
width: 0; height: 0; 
border-style: solid; 
border-width: .2em .1em .25em .2em; 
border-color: transparent white transparent black; 
}
</style>
<p><span class=spanReload></span> Reload. [&#128260; (&amp;#128260;), símbolos varios y pictogramas 'flechas en círculo antihorario'.]</p>


<style type="text/css"> /* 6/Jul/2016 20:06 */
.spanReloadTime {position: relative; 
display: inline-block; 
margin: 0 .8em -.1em; 
width: .75em; height: .75em; 
background-color: white; 
border: solid .1em white; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .08em black; 
}
.spanReloadTime::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.03em; top: .08em; 
border-style: solid; 
border-width: .14em .14em .1em; 
border-color: black white white; 
transform: rotate(40deg); 
}
.spanReloadTime::after {content: ""; 
position: absolute; 
width: .15em; height: .2em; 
left: .33em; top: .17em; 
border-style: solid; 
border-width: 0 0 .05em .05em; 
border-color: black; 
}
</style>
<p><span class=spanReloadTime></span> Reload At Time. ['recarga con temporizador'.]</p>


<style type="text/css">
.spanShuffle {position: relative; 
display: inline-block; 
width: .8em; height: .5em; 
margin: 0 .95em .1em; 
background-color: white; 
background-image: radial-gradient(circle at right, transparent 0, transparent .15em, black .155em, black .25em, transparent .255em, transparent 100%), 
radial-gradient(circle at left, transparent, transparent .15em, black .155em, black .25em, white .255em, white 100%), 
linear-gradient(to bottom, black 0, black .1em, transparent .1em, transparent 100%); 
background-size: .25em 100%, .4em 100%, 100% .4em; 
background-repeat: no-repeat, no-repeat, repeat; 
background-position: .36em 0, .18em 0, 0 0; 
}
.spanShuffle:before {content: ""; 
position: absolute; 
display: block; 
top: -.07em; left: .7em; 
width: 0; height: 0; 
border-style: solid; 
border-width: .14em 0 .14em .14em; 
border-color: white black; 
}
.spanShuffle:after {content: ""; 
position: absolute; 
display: block; 
top: .32em; left: .7em; 
width: 0; height: 0; 
border-style: solid; 
border-width: .14em 0 .14em .14em; 
border-color: white black; 
}
</style>
<p><span class=spanShuffle></span> Shuffle. [&#128256; (&amp;#128256;), símbolos varios 'flechas cruzadas hacia la derecha'.]</p>


<style type="text/css"> /* 17/Abr/2015 20:06 */
.spanZoom\+ {position: relative; 
display: inline-block; 
margin: 0 1em .07em; 
width: .4em; height: .4em; 
border: solid .1em black; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .1em white; 
background: 
linear-gradient(to bottom, transparent, transparent 45%, black 46%, black 54%, transparent 55%, transparent 100%), 
linear-gradient(to right, white, white 45%, black 46%, black 54%, white 55%, white 100%); 
}
.spanZoom\+::before {content: ""; 
position: absolute; 
width: .4em; height: .1em; 
left: .31em; top: .42em; 
background-color: black; 
border-radius: .1em; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanZoom+></span> Zoom +. [&#8853; (&amp;#8853;), operadores matemáticos 'signo más en círculo'.]</p>


<style type="text/css"> /* 17/Abr/2015 20:09 */
.spanZoom- {position: relative; 
display: inline-block; 
margin: 0 1em .07em; 
width: .4em; height: .4em; 
border: solid .1em black; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .1em white; 
background: 
linear-gradient(to bottom, transparent, transparent 45%, black 46%, black 54%, transparent 55%, transparent 100%); 
}
.spanZoom-::before {content: ""; 
position: absolute; 
width: .4em; height: .1em; 
left: .31em; top: .42em; 
background-color: black; 
border-radius: .1em; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanZoom-></span> Zoom -. [&#8854; (&amp;#8854;), operadores matemáticos 'signo menos en círculo'.]</p>


<style type="text/css">
.spanMagnifyingGlass {position: relative; 
display: inline-block; 
width: .4em; height: .4em; 
margin: 0 1.1em .3em; 
border: .04em solid black;
border-radius: 50%; 
border-collapse: separate; 
box-shadow: inset 0 0 .15em .02em rgba(0, 0, 0, .7); 
}
.spanMagnifyingGlass:before {content: ""; 
position: absolute; 
display: block; 
width: .2em; height: .2em; 
border-radius: 0 100%; 
top: .35em; left: .35em; 
background-color: black; 
}
.spanMagnifyingGlass:after {content: ""; 
position: absolute; 
display: block; 
width: .2em; height: .2em; 
border-radius: 0 100%; 
top: .45em; left: .45em; 
background-color: black; 
}
</style>
<p><span class=spanMagnifyingGlass></span> Magnifying Glass (Zoom, Search). [&#128269; (&amp;#128269;), símbolos varios y pictogramas 'lupa hacia la izquierda'.]</p>


<style type="text/css"> /* 15/Mar/2015 18:55 */
.spanSearchInDoc {position: relative; 
display: inline-block; 
margin: 0 1em .02em 1em; 
width: .43em; height: .55em; 
border: solid .03em black; 
box-shadow: inset 0 0 0 .03em white; 
background-image: 
repeating-linear-gradient(white, white .05em, black .06em, black .08em, white .1em); 
}
.spanSearchInDoc::before {content: ""; 
position: absolute; 
width: .32em; height: .32em; 
left: 40%; top: 32%; 
border: solid .05em black; 
border-radius: 100%; 
background-image: 
repeating-linear-gradient(white, white .064em, black .064em, black .12em, white .13em); 
}
.spanSearchInDoc::after {content: ""; 
position: absolute; 
width: .23em; height: .08em; 
left: .5em; top: 99%; 
background-color: black; 
transform: rotate(40deg); 
}
</style>
<p><span class=spanSearchInDoc></span> Search in Document. ['búsqueda en documento'.]</p>


<style type="text/css">
.spanBell {position: relative; 
display: inline-block; 
width: .6em; height: .6em; 
border-radius: 50% 50% 0 0; 
margin: 0 .95em .2em; 
border-style: solid; 
border-color: white white black white; 
border-width: .1em; 
background-color: black; 
}
.spanBell:before {content: ""; 
position: absolute; 
display: block; 
top: .65em; left: .2em; 
width: 0; height: 0; 
border: solid .1em black; 
border-radius: 50%; 
}
.spanBell:after {content: ""; 
position: absolute; 
display: block; 
top: -.15em; left: .15em; 
width: .2em; height: .2em; 
border-radius: 30%; 
border: solid .05em black; 
}
</style>
<p><span class=spanBell></span> Bell (Alert, Alarm). [&#128276; (&amp;#128276;), símbolos varios y pictogramas 'campana'.]</p>


<style type="text/css">
.spanGlasses {display: inline-block; 
margin: auto .5em .3em .6em; 
position: relative; 
width: 1.55em; height: .2em; 
border: 0.075em solid black; 
border-width: .05em .05em 0 .04em; 
border-radius: 10% 50% 5% 5% / 40% 50% 40% 20%;
}
.spanGlasses:before {content: ""; display: block; 
position: absolute; 
top: -.18em; left: .755em;
width: .52em; height: .3em; 
border: 0.07em solid black;  
border-radius: 30% 40% 40% 60% / 30% 50% 40% 80%; 
}
.spanGlasses:after {content: ""; display: block; 
position: absolute; 
top: -.18em; left: .125em;
width: .52em; height: .3em; 
border: 0.07em solid black;  
border-radius: 40% 30% 60% 40% / 50% 30% 80% 40%; }
</style>
<p><span class=spanGlasses></span> Glasses (Text Zoom). [&#128083; (&amp;#128083;), símbolos varios y pictogramas 'anteojos'.]</p>

<style type="text/css">
.spanWheelChair {position: relative; 
display: inline-block; 
margin: auto .9em .2em 1.1em; 
width: .52em; height: .17em; 
background-color: white; 
border-style: solid;
border-width: .08em; 
border-color: black white black black; 
border-radius: 0 0 50%; 
transform: rotate(45deg); 
}
.spanWheelChair:before {content: ""; 
position: absolute; 
display: block; 
width: .12em; height: .12em; 
left: .24em; top: .13em; 
background-color: white; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: 0 0 0 .11em white, 0 0 0 .18em black, -.41em -.37em 0 .01em black;
}
.spanWheelChair:after {content: ""; 
position: absolute; 
display: block; 
width: .25em; height: .2em; 
left: -.04em; top: -.24em; 
background-color: white; 
border-style: solid; 
border-color: transparent black black; 
border-width: .06em .1em .1em 0; 
border-radius: 0 0 0 20%; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanWheelChair></span> Wheel Chair (Accessible). [&#9855; (&amp;#9855;), símbolos varios 'silla de ruedas'.]</p>


<style type="text/css">
.spanPick {position: relative; 
display: inline-block; 
margin: auto .95em .5em; 
width: .8em; height: .1em; 
border-style: solid; 
border-color: black transparent transparent; 
border-width: .1em 0; 
border-radius: 50%; 
transform: rotate(20deg); 
}
.spanPick:before {content: ""; 
position: absolute; 
display: block; 
width: .1em; height: .8em; 
left: .35em; top: -.15em; 
background-color: black; 
border-radius: 0 0 50% 50%; 
}
</style>
<p><span class=spanPick></span> Pick (Under Construction). [&#9935; (&amp;#9935;), símbolos varios 'pico'.]</p>


<style type="text/css"> /* 21/Mar/2014 23:23 */
.spanConstruction{position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .5em; height: .5em; 
border-style: solid; 
border-color: black gray; 
border-width: 0 .2em; 
}
.spanConstruction:before {content: ""; 
position: absolute; 
display: block; 
width: 1.3em; height: .3em; 
left: -.4em; top: -.3em; 
background-color: black; 
border-collapse: separate; 
background-image: linear-gradient(135deg, black 0, black 9.9%, yellow 10%, 
yellow 20%, black 20.1%, black 29.9%, yellow 30%, yellow 40%, black 40.1%, 
black 49.9%, yellow 50%, yellow 60%, black 60.1%, black 69.9%, yellow 70%, 
yellow 80%, black 80.1%, black 89.9%, yellow 90%, yellow 100%);
}
.spanConstruction:after {content: ""; 
position: absolute; 
display: block; 
width: .15em; height: .15em; 
left: -.3em; top: -.4em; 
background-color: orange; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: 0 0 .06em .05em darkorange, .95em 0 0 0 orange, .95em 0 .06em .05em darkorange; 
}
</style>
<p><span class=spanConstruction></span> Construction Sign, (Under Construction).[&#128679; (&amp;#128679;), símbolos de transportes y mapas 'señal de contrucción'.]</p>


<style type="text/css"> /* 14/Ago/2015 15:04 */
.spanBug {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .16em; height: .34em; 
border: solid .14em black; 
border-radius: .3em; 
}
.spanBug::before {content: ""; 
position: absolute; 
width: .64em; height: .11em; 
left: -.24em; top: .125em; 
background-color: black; 
border-radius: .06em; 
box-shadow: 0 -.145em 0 0 black, 0 .145em 0 0 black; 
}
.spanBug::after {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: -.05em; top: -.35em; 
border-style: solid; 
border-width: .08em; 
border-color: transparent black black transparent; 
border-radius: .1em; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanBug></span> Bug. Virus. Infection.[&#128027; (&amp;#128027;), símbolos varios y pictogramas 'bicho'.]</p>


<style type="text/css">
.spanScissors{position: relative; 
display: inline-block; 
margin: auto 1em .3em 1em; 
width: .7em; height: 0; 
border-style: solid; 
border-color: black transparent transparent; 
border-width: .1em 0; 
border-radius: 0 .2em / 0 .1em; 
transform: rotate(0deg); 
}
.spanScissors:before {content: ""; 
position: absolute; 
display: block; 
left: 0; top: -.07em; 
width: .7em; height: 0; 
border-style: solid; 
border-color: transparent transparent black; 
border-width: .1em 0; 
border-radius: .2em 0 / .1em 0; 
transform: rotate(50deg); 
}
.spanScissors:after {content: ""; 
position: absolute; 
display: block; 
width: .15em; height: .15em; 
left: -.12em; top: -.08em; 
background-color: white; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: 0 .03em 0 .06em black, .14em -.27em 0 .01em white, .15em -.28em 0 .06em black; 
}
</style>
<p><span class=spanScissors ></span> Scissors (Cut). [&#9986; (&amp;#9986;), dingbats 'tijeras'; &#9988;(&amp;#9988;), dingbats 'tijeras'.]</p>


<style type="text/css"> /* 18/Jul/2014 15:15 */
.spanPicture {position: relative; 
display: inline-block; 
margin: 0 .8em 0 .9em; 
width: .8em; height: .55em; 
background-color: white; 
border: solid .08em black; 
background-image: radial-gradient(circle, black, black .08em, white .1em, white 100%); 
background-size: .25em .25em; 
background-position: .07em .035em; 
background-repeat: no-repeat; 
}
.spanPicture::before, .spanPicture::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .255em; bottom: .05em; 
border-color: transparent transparent black; 
border-style: solid; 
border-width: 0 .26em .33em; 
}
.spanPicture::after {left: .13em; 
border-width: 0 .2em .24em; 
}
</style>
<p><span class=spanPicture></span> Picture. [&#128443; (&amp;#128443;), símbolos varios y pictogramas 'marco con imagen'.]</p>


<style type="text/css"> /* 5/Ago/2016 11:11 */
.spanImageNotFound {position: relative; 
display: inline-block; 
line-height: 0; 
margin: 0 1em -.03em; 
width: .58em; height: .7em; 
background-color: white; 
border: solid .03em black; 
box-shadow: .06em .06em .04em .0em rgba(0, 0, 0, .5); 
overflow: hidden; 
}
.spanImageNotFound::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
right: 0; top: 0; 
background-color: ; 
border-style: solid; 
border-width: .08em; 
border-color: black black white white; 
outline: solid .03em black; 
}
.spanImageNotFound::after {content: ""; 
display: block; 
width: 50%; height: 45%; 
margin: 36% auto; 
background-color: white; 
border: solid .03em grey; 
background-image: 
linear-gradient(to left bottom, transparent 40%, red 42%, red 58%, transparent 60%), 
linear-gradient(to right bottom, transparent 40%, red 42%, red 58%, transparent 60%); 
background-size: 50% 50%; 
background-repeat: no-repeat; 
background-position: 50% 50%; 
}
</style>
<p><span class=spanImageNotFound></span> Image Not Found. ['imagen no disponible'.]</p>


<style type="text/css"> /* 5/Ago/2016 14:18 */
.spanBrokenImage {position: relative; 
display: inline-block; 
line-height: 0; 
margin: 0 1em -.03em; 
width: .58em; height: .7em; 
background-color: lightblue; 
background-image: 
radial-gradient(circle, gold 70%, transparent 75%), 
radial-gradient(ellipse at bottom, green 40%, transparent 45%); 
background-size: .15em .15em, 170% 80%; 
background-repeat: no-repeat; 
background-position: .15em .1em, center bottom; 
border: solid .03em dimgrey; 
box-shadow: inset 0 0 0 .07em rgba(255,255,255,.3), 0 0 0 .04em white; 
}
.spanBrokenImage::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
right: 0; top: 0; 
border-style: solid; 
border-width: .08em; 
border-color: dimgrey dimgrey white white; 
outline: solid .03em dimgrey; 
}
.spanBrokenImage::after {content: ""; 
position: absolute; 
width: 125%; height: 28%; 
left: -20%; top: 57%; 
background: 
repeating-linear-gradient(50deg, transparent 0, transparent 25%, white 25%, white 35%, transparent 35%), 
repeating-linear-gradient(-50deg, transparent 0, transparent 25%, white 25%, white 35%, transparent 35%) .1em 0; 
background-repeat: repeat-x; 
transform: rotate(352deg); 
}
</style>
<p><span class=spanBrokenImage></span> Broken Image. ['imagen rota'.]</p>


<style type="text/css"> /* 30/Mar/2015 20:59 */
.spanColors {position: relative; 
display: inline-block; 
margin: 0 1.05em .2em; 
width: .5em; height: .5em; 
background-color: red; 
border-radius: 100%; 
box-shadow: .135em .24em 0 0 blue, -.135em .24em 0 0 yellow; 
}
.spanColors::before , .spanColors::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: .135em; top: .24em; 
background-color: rgba(50,50,255,.4); 
border-radius: inherit; 
}
.spanColors::after {
left: -.135em; 
background-color: rgba(255,255,0,.45); 
}
</style>
<p><span class=spanColors></span> Colors. ['colores'.]</p>


<style type="text/css"> /* 7/Ene/2017 13:33 */
.spanPaintBrush {position: relative; 
display: inline-block; 
margin: 0 .7em .3em 1em; 
width: .8em; height: .12em; 
background-color: black; 
border-style: double; 
border-width: 0 0 0 .15em; 
border-color: darkgrey; 
border-radius: 0 100% 100% 0 / 0 50% 50% 0; 
transform: rotate(.2rad); 
}
.spanPaintBrush::before {content: ""; 
position: absolute; 
width: .26em; height: .3em; 
left: -.5em; top: -.09em; 
background-color: dimgrey; 
border-radius: 100% 10% 100% 0; 
box-shadow: inset -.04em .04em .02em .05em dimgrey, inset -.04em .04em .03em .07em white; 
transform: rotate(45deg); 
}
.spanPaintBrush::after {content: ""; 
position: absolute; 
width: .14em; height: .15em; 
left: -.26em; top: -.015em; 
background-color: black; 
border-style: ; 
border-width: ; 
border-color: ; 
border-radius: 20% 30% 30% 20%; 
}
</style>
<p><span class=spanPaintBrush></span> Paint Brush. ['pincel'.]</p>


<style type="text/css">
.spanPencil{position: relative; 
display: inline-block; 
margin: 0 .6em -.1em 1.5em; 
width: 0; height: 0; 
border-style: ridge; 
border-color: transparent transparent transparent gray; 
border-width: .16em .3em; 
transform: rotate(45deg); 
}
.spanPencil:before {content: ""; 
position: absolute; 
display: block; 
width: .7em; height: .15em; 
left: -1.07em; top: -.15em; 
background-color: black; 
border-radius: 25% 0 0 25%; 
border-style: solid;
border-width: .08em 0 .08em .05em; 
border-color: black; 
border-collapse: separate; 
box-shadow: inset .02em 0 0 .025em white; 
}
</style>
<p><span class=spanPencil></span> Pencil (Write, Edit). [&#9998; (&amp;#9998;), dingbats 'lápiz abajo derecha'.]</p>


<style type="text/css">
.spanNib{position: relative; 
display: inline-block; 
margin: auto .8em .4em 1.45em; 
width: .35em; height: .1em; 
background-color: white; 
border-radius: .05em 1% 1% .05em; 
border-collapse: separate; 
box-shadow: -.35em 0 0 .15em black; 
}
.spanNib:before {content: ""; 
position: absolute; 
display: block; 
width: 0; height: 0; 
left: .08em; top: -.12em; 
border-style: solid;
border-width: .15em 0 0 .35em; 
border-color: transparent black white; 
border-collapse: separate; 
box-shadow: 0 .045em 0 0 white; 
}
.spanNib:after {content: ""; 
position: absolute; 
display: block; 
width: 0; height: 0; 
left: .08em; top: .08em; 
border-width: 0 0 .15em .35em; 
border-color: black black transparent; 
border-style: solid;
}
</style>
<p><span class=spanNib></span> Nib (Write). [&#10002; (&amp;#10002;), dingbats 'pluma (escribir)'.]</p>


<style type="text/css"> /* 18/Jul/2014 19:08 */
.spanPen1 {position: relative; 
display: inline-block; 
margin: auto .85em .4em; 
width: .06em; height: .15em; 
background-color: white; 
border-color: black; 
border-style: solid; 
border-width: 0 .42em 0 .56em; 
border-radius: .2em 1.1em 1.1em .2em / .2em .12em .12em .2em; 
transform: rotate(45deg); 
}
.spanPen1::before {content: ""; 
position: absolute; 
width: .4em; height: .06em; 
left: -.5em; top: -.08em; 
background-color: black; 
border-radius: .05em .05em 0 0; 
}
.spanPen1::after {content: ""; 
position: absolute; 
width: .08em; height: .05em; 
left: .5em; top: .045em; 
background-color: black; 
border-radius: 0 .05em .05em 0; 
}
</style>
<p><span class=spanPen1></span> Ballpoint Pen 1 (Write). [&#128394; (&amp;#128394;), símbolos varios y pictogramas 'birome', 'lapicera a bolilla'.]</p>


<style type="text/css"> /* 17/Jun/2016 13:22 */
.spanPen2 {position: relative; 
display: inline-block; 
margin: 0 .4em .25em .7em; 
width: 1.4em; height: .1em; 
border: solid .03em transparent; 
border-top-width: .05em; 
border-radius: .8em / 100%; 
background: linear-gradient(90deg, dimgrey 25%, transparent 27%), 
linear-gradient(90deg, black 90%, silver 92%, grey 95%) content-box, 
radial-gradient(ellipse at left bottom, dimgrey 70%, transparent 75%) 17% -.02em; 
background-size: auto, auto, 30% .077em; 
background-repeat: no-repeat; 
background-origin: border-box, content-box; 
transform: rotate(30deg); 
}
</style>
<p><span class=spanPen2></span> Ballpoint Pen 2. </p>


<style type="text/css"> /* 4/Ago/2014 13:34 */
.spanInk {position: relative; 
display: inline-block; 
margin: 0 1.15em -.1em; 
width: .4em; height: .26em; 
background-color: black; 
text-align: center; 
line-height: 0; 
border-radius: .08em; 
}
.spanInk::before {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
left: .25em; top: -.53em; 
border-color: transparent; 
border-style: solid; 
border-width: 0 0 .05em .05em; 
border-radius: 100% 0 80% 0; 
background-image: repeating-radial-gradient(circle at top right, black, transparent .04em), 
linear-gradient(to left top, transparent, transparent 46%, black 48%, black 52%, transparent 54%, transparent 100%); 
background-repeat: no-repeat, repeat; 
background-clip: content-box, border-box; 
}
.spanInk::after {content: ""; 
display: inline-block; 
position: relative; 
width: .22em; height: .2em; 
top: -.15em; 
background-color: black; 
border-color: black transparent; 
border-style: solid; 
border-width: .06em; 
background-clip: content-box; 
}
</style>
<p><span class=spanInk></span> Quill and Inkwell. ['pluma y tintero'.]</p>


<style type="text/css"> /* 5/Ene/2015 11:09 */
.spanIndent {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
background-color: white; 
border: solid .025em grey; 
background-image: 
repeating-linear-gradient(to bottom, black 0, black .06em, transparent .06em, transparent .1em); 
background-size: 75% 80%; 
background-repeat: no-repeat; 
background-position: center .08em; 
}
.spanIndent::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .05em; top: .275em; 
border-style: solid; 
border-width: .08em 0 .08em .1em; 
border-color: white white white black; 
box-shadow: 0 0 0 .04em white;  
}
</style>
<p><span class=spanIndent></span> Indented. ['texto indentado'.]</p>


<style type="text/css"> /* 4/Nov/2014 11:52 */
.spanTextJustify {display: inline-block; 
margin: 0 1em;
width: .6em; height: .7em; 
background-color: white; 
border: solid .025em grey; 
background-image: 
repeating-linear-gradient(to bottom, black 0, black .06em, transparent .06em, transparent .1em); 
background-size: 75% 80%; 
background-repeat: no-repeat; 
background-position: center .08em; 
}
</style>
<p><span class=spanTextJustify></span> Justify Align. ['texto justificado'.]</p>


<style type="text/css"> /* 4/Nov/2014 12:33 */
.spanTextLeft {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
background-color: white; 
border: solid .025em grey; 
background-image: linear-gradient(black, black), linear-gradient(black, black), 
linear-gradient(black, black), linear-gradient(black, black), 
linear-gradient(black, black), linear-gradient(black, black); 
background-size: 55% .04em, 65% .04em, 75% .04em, 40% .04em, 65% .04em, 50% .04em; 
background-position: .08em .08em, .08em .18em, .08em .28em, .08em .38em, .08em .48em, .08em .58em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanTextLeft></span> Left Align. ['texto alineación izquierda'.]</p>


<style type="text/css"> /* 4/Nov/2014 12:38 */
.spanTextRight {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
background-color: white; 
border: solid .025em grey; 
background-image: linear-gradient(black, black), linear-gradient(black, black), 
linear-gradient(black, black), linear-gradient(black, black), 
linear-gradient(black, black), linear-gradient(black, black); 
background-size: 55% .04em, 65% .04em, 75% .04em, 40% .04em, 65% .04em, 50% .04em; 
background-position: right .08em top .08em, right .08em top .18em, right .08em top .28em, right .08em top .38em, right .08em top .48em, right .08em top .58em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanTextRight></span> Right Align. ['texto alineación derecha'.]</p>


<style type="text/css"> /* 4/Nov/2014 12:44 */
.spanTextCenter {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
background-color: white; 
border: solid .025em grey; 
background-image: linear-gradient(black, black), linear-gradient(black, black), 
linear-gradient(black, black), linear-gradient(black, black), 
linear-gradient(black, black), linear-gradient(black, black); 
background-size: 55% .04em, 65% .04em, 75% .04em, 40% .04em, 65% .04em, 50% .04em; 
background-position: center .08em, center .18em, center .28em, center .38em, center .48em, center .58em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanTextCenter></span> Center Align. ['texto centrado'.]</p>


<style type="text/css">
.spanMail1 {position: relative; 
margin: auto .9em; 
border: solid 1px black; 
display: inline-block; 
width: .8em; height: .6em; 
overflow: hidden; 
}
.spanMail1:before {content: ""; 
position: absolute; 
width: .55em; height: .55em; 
top: .33em; left: .11em; 
border-collapse: separate; 
border-style: solid; 
border-width: 1px; 
border-color: black transparent transparent black; 
transform: rotate(45deg); 
}
.spanMail1:after {content: ""; 
position: absolute; 
top: -.3em; left: .11em; 
width: .55em; height: .55em; 
border-collapse: separate; 
border-style: solid; 
border-width: 1px; 
border-color: transparent black black transparent; 
box-shadow: inset 0 0 0 .15em white; 
transform: rotate(45deg); 
border-radius: .11em 0; 
}
</style>
<p><span class=spanMail1></span> Envelope 1 (Email). [&#9993; (&amp;#9993;), dingbats 'sobre'.]</p>


<style type="text/css">/*4/Mar/2014 11:28*/
.spanMail2 {margin: auto .9em .6em; 
position: relative; 
border-style: solid; 
border-width: 0 .38em .32em; 
border-color: gray transparent; 
display: inline-block; 
width: 4px; height: 0; 
}
.spanMail2:before {content: ""; 
position: absolute; 
top: .36em; left: -.35em; 
margin-top: -1px; 
display: block; 
width: 0; height: 0; 
outline: solid black 1px; 
border-style: solid; 
border-color: silver white white; 
border-width: .3em .4em; 
}
</style>
<p><span class=spanMail2></span> Envelope 2 (Email). </p>


<style type="text/css"> /* 26/Ago/2015 11:48 */
.spanCalendar {position: relative; 
display: inline-block; 
margin: 0 .8em -.07em .95em; 
width: .8em; height: .5em; 
background-color: white; 
border-style: solid; 
border-width: .16em .025em .025em; 
border-color: black; 
border-radius: .07em .07em 0 0; 
background-image: 
repeating-linear-gradient(to bottom, white, white .035em, transparent .035em, transparent .13em), 
repeating-linear-gradient(to right, white, white .035em, grey .035em, grey .13em); 
background-size: .653em .36em; 
background-repeat: no-repeat; 
background-position: center center; 
background-clip: content-box; 
}
.spanCalendar::before , .spanCalendar::after {content: ""; 
position: absolute; 
width: .06em; height: .2em; 
left: .14em; top: -.3em; 
background-color: black; 
border: solid .03em white; 
}
.spanCalendar::after {left: auto; 
right: .14em; 
}
</style>
<p><span class=spanCalendar></span> Calendar. [&#128467; (&amp;#128467;), símbolos varios y pictogramas 'calendario taco con espiral'; &#128197; (&amp;#128197;), símbolos varios y pictogramas 'calendario'.]</p>


<style type="text/css">
.spanLifeBuoy1{position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .7em; height: .7em; 
border-style: dotted; 
border-color: black; 
border-width: .04em; 
border-radius: .12em; 
}
.spanLifeBuoy1:before {content: ""; 
position: absolute; 
display: block; 
width: .35em; height: .4em; 
left: .025em; top: -.075em; 
border-radius: 50%; 
border-width: .23em .16em; 
border-color: red white; 
border-style: solid;
border-collapse: separate; 
transform: rotate(45deg); 
}
.spanLifeBuoy1:after {content: ""; 
position: absolute; 
display: block; 
width: .35em; height: .4em; 
left: .025em; top: -.075em; 
border-radius: 50%; 
border-width: .23em .16em; 
border-color: red transparent; 
border-style: solid;
transform: rotate(135deg); 
}
</style>
<p><span class=spanLifeBuoy1></span> Lifebuoy 1 (Help). ['salvavidas'.]</p>


<style type="text/css"> /* 23/Ago/2014 0:59 */
.spanLifeBuoy2 {position: relative; 
display: inline-block; 
margin: 0 .95em -.05em; 
width: .5em; height: .5em; 
border: solid .15em transparent; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .025em black, 0 0 0 .025em black; 
background-image: linear-gradient(white, white), 
linear-gradient(to bottom, transparent, transparent 40%, gainsboro 40%, gainsboro 60%, transparent 60%, transparent 100%), 
linear-gradient(to left, transparent, transparent 40%, gainsboro 40%, gainsboro 60%, transparent 60%, transparent 100%), 
radial-gradient(firebrick, firebrick, red, firebrick); 
background-size: .8em .8em; 
background-repeat: no-repeat; 
background-position: -.15em -.15em; 
background-clip: content-box, border-box, border-box, border-box; 
}
.spanLifeBuoy2::before {content: ""; 
position: absolute; 
width: .8em; height: .8em; 
left: -.165em; top: -.165em; 
border: dotted .025em black; 
border-radius: 30%; 
}
</style>
<p><span class=spanLifeBuoy2></span> Lifebuoy 2. </p>


<style type="text/css"> /* 19/Jul/2014 18:34 */
.spanClosedLock {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .52em; height: .4em; 
background-color: black; 
}
.spanClosedLock::before {content: ""; 
position: absolute; 
width: .22em; height: .2em; 
left: .06em; top: -.32em; 
border-color: black; 
border-style: solid; 
border-width: .1em .1em 0 .1em; 
border-radius: .2em .2em 0 0; 
}
.spanClosedLock::after {content: ""; 
position: absolute; 
width: .12em; height: .21em; 
right: 0; top: .07em; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .031em 0 .031em .031em; 
background-image: repeating-linear-gradient(to bottom, black 0, black .056em, white .058em, white .08em); 
}
</style>
<p><span class=spanClosedLock></span> Closed Lock. (Security)[&#128274; (&amp;#128274;), símbolos varios y pictogramas 'candado cerrado', 'seguridad'.]</p>


<style type="text/css"> /* 21/Jul/2014 11:06 */
.spanOpenLock {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .52em; height: .4em; 
background-color: black; 
}
.spanOpenLock::before {content: ""; 
position: absolute; 
width: .22em; height: .27em; 
left: -.05em; top: -.43em; 
border-color: black; 
border-style: solid; 
border-width: .1em .1em 0 .1em; 
border-radius: .2em .2em 0 .1em; 
-webkit-transform: rotate(340deg); 
transform: rotate(340deg); 
}
.spanOpenLock::after {content: ""; 
position: absolute; 
width: .12em; height: .21em; 
right: 0; top: .07em; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .031em 0 .031em .031em; 
background-image: repeating-linear-gradient(to bottom, black 0, black .056em, white .058em, white .08em); 
}
</style>
<p><span class=spanOpenLock></span> Open Lock. (Insecurity)[&#128275; (&amp;#128275;), símbolos varios y pictogramas 'candado abierto', 'inseguridad'.]</p>


<style type="text/css"> /* 21/Oct/2015 20:10 */
.spanOverCharge {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em; 
width: 1em; height: .7em; 
background-image: 
radial-gradient(circle, black .06em, transparent .08em), 
radial-gradient(circle, black .11em, transparent .13em), 
linear-gradient(to left bottom, transparent 45%, black 47%, black 53%, transparent 55%), 
linear-gradient(to left bottom, transparent 50%, black 50%), 
linear-gradient(to right bottom, transparent 50%, black 50%); 
background-size: .16em .16em, .26em .26em, .8em .3em, .1em .2em, .1em .2em; 
background-repeat: no-repeat; 
background-position: .125em .19em, .65em .3em, .1em .31em, .5em .5em, .4em .5em; 
}
.spanOverCharge::before {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .8em; top: .02em; 
border-style: solid; 
border-width: 0 .05em .05em 0; 
border-color: black; 
border-radius: .05em 0 0 0; 
transform: rotate(45deg); 
transform-origin: 0 0; 
background: linear-gradient(to left bottom, transparent 35%, black 40%, black 60%, transparent 65%); 
}
</style>
<p><span class=spanOverCharge></span> Overcharge. ['sobrecarga'.]</p>


<style type="text/css"> /* 24/Jul/2014 16:42 */
.spanShield {position: relative; 
display: inline-block; 
margin: 0 1.1em .1em; 
width: 0; height: .52em; 
border-color: silver silver grey grey; 
border-style: solid; 
border-width: 0 .25em; 
border-radius: 0 0 50% 50% / 0 0 60% 60%; 
}
.spanShield::before , .spanShield::after {content: ""; 
position: absolute; 
width: .5em; height: .6em; 
left: -.28em; top: -.15em; 
border-color: transparent black black; 
border-style: solid; 
border-width: .07em; 
border-radius: .2em .2em .3em .3em / .1em .1em .5em .5em; 
background-image: radial-gradient(ellipse at top, transparent 0, transparent .18em, black .21em, black .31em, transparent .32em, transparent 100%); 
background-size: .9em .18em; 
background-repeat: no-repeat; 
background-position: -.25em .01em; 
background-clip: border-box; 
clip: rect(0 .28em .8em 0); 
}
.spanShield::after {left: -.38em; 
background-position: -.14em .01em; 
clip: rect(0 .68em .8em .38em); 
}
</style>
<p><span class=spanShield></span> Shield (Protection, Security). [&#128737; (&amp;#128737;), símbolos de mapas y transporte 'escudo'.]</p>


<style type="text/css"> /* 5/Ago/2015 19:38 */
.spanShare {position: relative; 
display: inline-block; 
margin: 0 1.3em .15em 1em; 
width: .25em; height: .25em; 
background-color: black; 
border-radius: 100%; 
box-shadow: .45em .25em 0 0 black, .45em -.25em 0 0 black; 
}
.spanShare::before , .spanShare::after {content: ""; 
position: absolute; 
width: .4em; height: .05em; 
left: .2em; top: .25em; 
background-color: black; 
transform: rotate(30deg); 
}
.spanShare::after {
left: .18em; top: -.05em; 
transform: rotate(330deg); 
}
</style>
<p><span class=spanShare></span> Share. ['compartir'.]</p>


<style type="text/css"> /* 19/Feb/2017 13:45 */
.spanPointer {position: relative; 
display: inline-block; 
margin: 0 1.15em; 
width: .34em; height: .6em; 
background-image: 
linear-gradient(to right bottom, transparent 50%, darkgrey 50%), 
linear-gradient(darkgrey, darkgrey), 
linear-gradient(to left bottom, transparent 50%, darkgrey 50%); 
background-size: 50% 65%, 35% 40%; 
background-repeat: no-repeat; 
background-position: 0 0, center bottom, 100% 0; 
transform: rotate(335deg); 
}
.spanPointer::before {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: -.05em; top: -.05em; 
background: inherit; 
background-image: linear-gradient(to right bottom, transparent 50%, black 50%), 
linear-gradient(black, black), 
linear-gradient(to left bottom, transparent 50%, black 50%); 
}
</style>
<p><span class=spanPointer></span> Pointer. ['cursor' o 'puntero'.]</p>


<style type="text/css">
.spanLink1 {display: inline-block; 
background-color: black; 
width: .5em; height: .08em; 
margin: 0 1.1em .3em; 
border-radius: 25%; 
position: relative; 
}
.spanLink1:after {content: ""; 
position: absolute; 
top: -.15em; left: .3em; 
width: .4em; height: .25em; 
border: .08em solid black; 
border-radius: 40%; 
display: block; 
}
.spanLink1:before {content: ""; 
position: absolute; 
top: -.15em; left: -.35em; 
width: .4em; height: .25em; 
border: .08em solid black; 
border-radius: 40%; 
display: block; 
}
</style>
<p><span class=spanLink1></span> Link 1. [&#128279; (&amp;#128279;), símbolos varios y pictogramas 'enlace'; &#10968; (&amp;#10968;), operadores matemáticos suplementarios 'sobrepuesto ligado a infrapuesto'.]</p>


<style type="text/css">
.spanLink2 {display: inline-block; 
position: relative; 
margin: 0 1.2em .2em .95em; 
border: .08em solid black; 
border-radius: 40%; 
height: .25em; width: .4em; 
}
.spanLink2:before {content: ""; 
position: absolute; 
width: .4em; height: .25em; 
top: -.08em; left: .25em; 
border: .08em solid black; 
border-radius: 40%; 
display: block; 
background-color: white; 
box-shadow: -.025em .05em 0 0 white; 
}
.spanLink2:after {content: ""; 
position: absolute; 
width: .15em; height: .13em; 
top: -.075em; left: .18em; 
border-width: .08em; 
border-style: solid; 
border-color: black black transparent transparent; 
border-radius: 0 .2em .025em 0; 
display: block; 
box-shadow: inset -.05em .03em .01em .01em white, .025em -.05em 0 0 white; 
}
</style>
<p><span class=spanLink2></span> Link 2. </p>


<style type="text/css">
.spanLinkBreak1 {position: relative; 
display: inline-block; 
width: .4em; height: .25em; 
margin: auto 1em .2em; 
border: .1em dotted black; 
border-radius: 35%; 
}
.spanLinkBreak1:before {content: ""; 
position: absolute; 
top: .06em; left: -.4em; 
background-color: black; 
width: .5em; height: .12em; 
border-radius: .05em; 
}
.spanLinkBreak1:after {content: ""; 
position: absolute; 
top: .08em; left: .3em; 
background-color: black; 
width: .5em; height: .12em; 
border-radius: .05em; 
}
</style>
<p><span class=spanLinkBreak1></span> Break Link 1. ['enlace roto'.]</p>


<style type="text/css">
.spanLinkBreak2 {display: inline-block; 
position: relative; 
width: .5em; height: 0; 
margin: auto 1em .3em; 
border: .05em dashed black; 
border-radius: 20%; 
}
.spanLinkBreak2:after {content: ""; 
position: absolute; 
left: .4em; top: -.2em; 
width: .4em; height: .25em; 
border: .08em solid black; 
border-radius: 40%; 
}
.spanLinkBreak2:before {content: ""; 
position: absolute; 
left: -.43em; top: -.2em; 
width: .4em; height: .25em; 
border: .08em solid black; 
border-radius: 40%; 
}
</style>
<p><span class=spanLinkBreak2></span> Break Link 2.</p>


<style type="text/css"> /* 11/Ago/2014 14:26 */
.spanExternalLink {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .7em; height: .4em; 
background-color: white; 
border-top: solid .1em dimgrey; 
box-shadow: inset 0 .02em 0 0 black, 0 0 0 .02em black; 
}
.spanExternalLink::before {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: 65%; top: -65%; 
background-image: 
linear-gradient(to bottom left, black, black 25%, transparent 25%, transparent 100%), 
linear-gradient(to bottom right, transparent, transparent 38%, white 38%, white 40%, black 45%, black 55%, white 60%, white 62%, transparent 62%, transparent 100%); 
border-radius: 0 0 0 30%; 
}
</style>
<p><span class=spanExternalLink></span> External Link. ['enlace externo'.]</p>


<style type="text/css"> /* 10/Jul/2014 15:22 */
.spanDraggable {position: relative; 
display: inline-block; 
margin: 0 .95em -.1em; 
width: .7em; height: .7em; 
background-color: white; 
border: solid .03em grey; 
}
.spanDraggable::before {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: .1em; top: .1em; 
background-color: black; 
transform: rotate(45deg); 
}
.spanDraggable::after {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: .1em; top: .1em; 
background-image: 
linear-gradient(white, white), linear-gradient(white, white), 
linear-gradient(white, white), linear-gradient(white, white); 
background-size: .225em .225em; 
background-repeat: no-repeat; 
background-position: 0 0, right top, left bottom, right bottom; 
}
</style>
<p><span class=spanDraggable></span> Draggable 1. ['arrastrable', 'flecha NSEO'.]</p>


<style type="text/css"> /* 16/Jul/2014 17:58 */
.spanDragFullScreen {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .6em; height: .6em; 
background-color: black; 
border: solid .1em white; 
border-radius: .1em; 
transform: rotate(45deg); 
}
.spanDragFullScreen::before {content: ""; 
position: absolute; 
width: .5em; height: .35em; 
left: -.02em; top: .01em; 
background-color: black; 
border-style: solid; 
border-width: .13em .08em; 
border-color: white; 
transform: rotate(315deg); 
}
</style>
<p><span class=spanDragFullScreen></span> Draggable 2 / FullScreen 1. ['arrastrable / a pantalla completa'.]</p>


<style type="text/css"> /* 24/Jun/2014 15:31 */
.spanResize {position: relative; 
display: inline-block; 
margin: 0 .95em -.1em; 
width: .8em; height: .8em; 
border: solid .05em black; 
border-radius: .05em; 
background-image: linear-gradient(to bottom right, white, white 46%, black 48%, black 52%, white 54%, white 100%); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-position: 0 0; 
box-shadow: inset 0 0 0 .06em white; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.spanResize::before {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: -.05em; bottom: -.05em; 
background-color: white; 
border-color: white; 
border-style: solid; 
border-width: .06em .06em 0 0; 
border-radius: .05em; 
box-shadow: inset 0 0 0 .05em black, .03em -.03em 0 0 white; 
}
.spanResize::after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
right: .05em; top: .05em; 
border-color: black; 
border-style: solid; 
border-width: .05em .05em 0 0; 
}
</style>
<p><span class=spanResize></span> Resize. Fullscreen 2. [&#10530; (&amp;#10530;), flechas suplementarias - B 'flecha NE y SO'; &#8689; (&amp;#8689;), flechas 'flecha NO a esquina'; &#9713; (&amp;#9713;), formas geométricas 'cuadro con cuadrante inferior izquierdo'.]</p>


<style type="text/css"> /* 31/Ene/2015 11:53 */
.spanAspectRatio {position: relative; 
display: inline-block; 
margin: 0 .7em -.05em .8em; 
width: .9em; height: .6em; 
border: solid .08em black; 
border-radius: .15em; 
background-image: 
radial-gradient(circle, transparent, transparent .03em, black .05em, black .07em, transparent .1em, transparent 100%), 
radial-gradient(circle at right, transparent, transparent .03em, black .05em, black .07em, transparent .1em, transparent 100%); 
background-size: .2em .2em, .15em .2em; 
background-position: right .28em top .08em, right .24em top .08em; 
background-repeat: no-repeat; 
}
.spanAspectRatio::before , .spanAspectRatio::after {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: .02em; top: .1em; 
background-image: 
linear-gradient(to right bottom, black 0, black 12%, transparent 14%, transparent 86%, black 88%, black 100%), 
linear-gradient(to left bottom, transparent, transparent 46%, black 47%, black 53%,transparent 54%, transparent 100%); 
transform: rotate(45deg); 
}
.spanAspectRatio::after {
width: .6em; height: .6em; 
left: .15em; top: .1em; 
background-image: 
linear-gradient(to left bottom, black 0, black 10%, transparent 12%, transparent 88%, black 90%, black 100%), 
linear-gradient(to right bottom, transparent, transparent 47%, black 48%, black 52%,transparent 53%, transparent 100%); 
}
</style>
<p><span class=spanAspectRatio></span> Aspect Ratio (Proportional). </p>


<style type="text/css"> /* 7/Abr/2016 19:18 */
.spanPictureSlider {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .6em; height: .6em; 
border: solid .06em black; 
border-radius: .06em; 
background: 
radial-gradient(ellipse at bottom, dimgrey 45%, transparent 50%) -.8em .1em, 
radial-gradient(circle, silver 70%, transparent 75%) .3em .08em, 
radial-gradient(ellipse at bottom, grey 45%, transparent 50%) -.3em .2em, whitesmoke; 
background-size: 250% 100%, .2em .2em; 
background-repeat: no-repeat; 
}
.spanPictureSlider::before {content: ""; 
position: absolute; 
width: 0; height: 0;
left: .7em; top: .05em; 
border-style: solid; 
border-width: .25em 0 .25em .2em; 
border-color: transparent black; 
}
/*.spanPictureSlider::after {content: ""; 
position: absolute; 
width: 0; height: 0;
left: -.3em; top: .05em; 
border-style: solid; 
border-width: .25em .2em .25em 0; 
border-color: transparent black; 
}*/
</style>
<p><span class=spanPictureSlider></span> Picture Slider. ['carrusel de imágenes'.]</p>


<style type="text/css"> /* 11/Jul/2014 16:37 */
.spanUnDo {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: 1em; height: .6em; 
background-image: radial-gradient(circle, transparent 0, transparent .11em, black .125em, black .18em, transparent .19em, transparent 100%); 
background-size: .5em .5em; 
background-repeat: repeat-x; 
background-position: left 0 bottom 0; 
}
.spanUnDo::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .2675em; top: .03em; 
border-color: transparent transparent black black; 
border-style: solid; 
border-width: .0665em; 
}
.spanUnDo::after {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: .2em; top: 0; 
border-color: black transparent transparent; 
border-style: solid; 
border-width: .065em; 
border-radius: 100%; 
}
</style>
<p><span class=spanUnDo></span> UnDo. [&#9100; (&amp;#9100;), técnicos varios 'deshacer operación'.]</p>


<style type="text/css"> /* 11/Ene/2016 19:11 */
.spanReturn {position: relative; 
display: inline-block; 
margin: 0 1em; 
height: .35em; width: .5em; 
border-style: solid; 
border-color: transparent; 
border-width: 0 0 .1em .1em; 
background: 
linear-gradient(315deg, black, black 45%, transparent 50%, transparent 100%) left -.1em bottom .05em, 
linear-gradient(225deg, black, black 45%, transparent 50%, transparent 100%) left -.1em bottom -.1em; 
background-size: .15em .15em;
background-repeat: no-repeat; 
box-shadow: inset -.07em -.07em 0 0 black; 
}
</style>
<p><span class=spanReturn></span> Return. [&#9166; (&amp;#9166;), técnicos varios 'retorno (de carro)'.]</p>


<style type="text/css"> /* 1/Dic/2014 15:38 */
.spanCrop {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .4em; height: .4em; 
border-style: solid; 
border-width: .08em .08em 0 0; 
border-color: black; 
border-radius: 0 .07em 0 0; 
}
.spanCrop::before {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: .095em; top: -.18em; 
border-style: solid; 
border-width: 0 0 .08em .08em; 
border-color: black; 
border-radius: 0 0 0 .07em; 
box-shadow: inset .03em -.03em 0 0 white; 
}
</style>
<p><span class=spanCrop></span> Crop. ['recorte'.]</p>


<style type="text/css"> /* 1/Jul/2014 15:03 */
.spanOrderedZ {position: relative; 
display: inline-block; 
margin: 0 1em .25em; 
width: .76em; height: .5em; 
background-color: black; 
border: solid .04em silver; 
border-radius: .06em; 
}
.spanOrderedZ::before {content: ""; 
position: absolute; 
width: .8em; height: .5em; 
left: -.15em; top: .07em; 
background-color: black; 
border: solid .04em silver; 
border-radius: .06em; 
}
.spanOrderedZ::after {content: ""; 
position: absolute; 
width: .8em; height: .5em; 
left: -.24em; top: .17em; 
background-color: black; 
border: solid .04em silver; 
border-radius: .06em; 
}
</style>
<p><span class=spanOrderedZ></span> Ordered Z. [&#128464; (&amp;#128464;), símbolos varios y pictogramas 'páginas'; &#10064; (&amp;#10064;), dingbats 'cuadro blanco con sombra superior derecha'.]</p>


<style type="text/css"> /* 1/Jul/2014 15:03 */
.spanOrderedY {position: relative; 
display: inline-block; 
margin: 0 .95em -.3em; 
width: .92em; height: 1.35em; 
background-color: white; 
overflow: hidden; 
-webkit-transform: scaley(.6); 
transform: scaley(.6); 
}
.spanOrderedY::before {content: ""; 
position: absolute; 
width: .7em; height: .7em; 
left: .05em; top: .15em; 
background-color: black; 
border-style: double; 
border-width: 0 .1em .1em 0; 
border-color: black; 
border-radius: .06em; 
background-clip: content-box; 
box-shadow: inset -.04em -.04em 0 0 white; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanOrderedY::after {content: ""; 
position: absolute; 
width: .7em; height: .7em; 
left: .05em; top: .35em; 
border-style: double; 
border-width: 0 .1em .1em 0; 
border-color: black; 
border-radius: .06em; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanOrderedY></span> Ordered Y. ['ordenado vertical'; 'apilado'.]</p>


<style type="text/css"> /* 24/Ago/2014 13:17 */
.spanOpenMenu {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 1em; 
width: .6em; height: .6em; 
background-image: 
repeating-linear-gradient(black 0, black 16%, transparent 17%, transparent 33%); 
background-size: 100% 116.5%; 
}
.spanOpenMenu::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: 115%; top: 20%; 
border-style: solid; 
border-width: 0 .16em .16em; 
border-color: black transparent; 
}
.spanOpenMenu::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: 115%; bottom: 20%; 
border-style: solid; 
border-width: .16em .16em 0; 
border-color: black transparent; 
}
</style>
<p><span class=spanOpenMenu></span> Expand Menu. ['expandir menú'.]</p>


<style type="text/css"> /* 24/Ago/2014 13:27 */
.spanCloseMenu {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 1em; 
width: .6em; height: .6em; 
background-image: 
repeating-linear-gradient(black 0, black 16%, transparent 17%, transparent 33%); 
background-size: 100% 116.5%; 
}
.spanCloseMenu::before {content: ""; 
position: absolute; 
width: 1px; height: .1em; 
left: 115%; top: 16%; 
border-style: solid; 
border-width: .16em; 
border-color: black transparent; 
background-image: linear-gradient(black, black); 
background-size: 100% 60%; 
background-position: center; 
background-repeat: repeat-x; 
}
</style>
<p><span class=spanCloseMenu></span> Collapse Menu. ['colapsar menú'.]</p>


<style type="text/css"> /* 19/May/2016 14:18 */
.spanListTiled {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em 1em; 
width: .8em; height: .8em; 
background: linear-gradient(135deg, transparent 40%, white 44%, black 48%, black 52%, white 56%, transparent 60%), 
repeating-linear-gradient(black 0, black 30%, white 30%, white 35%, black 35%) right bottom, 
linear-gradient(90deg, transparent 45%, white 45%, white 55%, transparent 55%) left top, 
linear-gradient(black 45%, white 45%, white 55%, black 55%) left top; 
background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%; 
background-repeat: no-repeat; 
border-radius: 0 .06em 0 .06em; 
}
</style>
<p><span class=spanListTiled></span> List or Tiled. ['formato lista o mosaico'.]</p>


<style type="text/css"> /* 27/Nov/2016 15:31 */
.spanContextualMenu {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1.1em; 
width: .5em; height: .55em; 
background-color: silver; 
border-style: solid; 
border-width: .1em .03em .03em; 
border-color: black; 
background-image: 
repeating-linear-gradient(silver 0, silver .05em, grey .05em, grey .1em); 
background-size: 80% 90%; 
background-repeat: no-repeat; 
background-position: .05em 0; 
}
.spanContextualMenu::before {content: ""; 
position: absolute; 
width: 100%; height: .12em; 
left: 0; top: .1em; 
background-color: white; 
border: solid .05em dimgrey; 
box-sizing: border-box; 
}
.spanContextualMenu::after {content: ""; 
position: absolute; 
width: .24em; height: .24em; 
left: 85%; top: .2em; 
border-radius: 0 0 .2em; 
background-image: 
linear-gradient(to right bottom, black 40%, transparent 40%), 
linear-gradient(to left bottom, transparent 30%, black 30%, black 60%, transparent 60%); 
background-repeat: no-repeat; 
transform: skewy(25deg); 
}
</style>
<p><span class=spanContextualMenu></span> Contextual Menu. ['menú contextual'.]</p>

<style type="text/css"> /* 2/Jul/2014 21:49 */
.spanPreviousPage {position: relative; 
display: inline-block; 
margin: 0 1.1em .08em; 
width: .4em; height: .5em; 
border: solid .03em dimgrey; 
}
.spanPreviousPage::before {content: ""; 
position: absolute; 
left: .1em; top: .12em; 
width: .42em; height: .42em; 
background-image: linear-gradient(to left bottom, transparent, transparent 45%, black 47.5%, black 52.5%, transparent 55%, transparent 100%), linear-gradient(to right bottom, black , black 15%, transparent 20%, transparent 100%); 
transform: rotate(340deg); 
}
.spanPreviousPage::after {content: ""; 
position: absolute; 
left: .2em; top: .1em; 
width: .4em; height: .5em; 
border: solid .03em black; 
}
</style>
<p><span class=spanPreviousPage></span> Previous Page. [&#9111; (&amp;#9111;), técnicos varios 'página anterior'.]</p>


<style type="text/css"> /* 2/Jul/2014 21:56 */
.spanNextPage {position: relative; 
display: inline-block; 
margin: 0 1.1em .08em; 
width: .4em; height: .5em; 
border: solid .03em black; 
}
.spanNextPage::before {content: ""; 
position: absolute; 
left: .12em; top: .1em; 
width: .42em; height: .42em; 
background-image: linear-gradient(to left bottom, transparent, transparent 45%, black 47.5%, black 52.5%, transparent 55%, transparent 100%), linear-gradient(to left top, black , black 15%, transparent 20%, transparent 100%); 
transform: rotate(340deg); 
}
.spanNextPage::after {content: ""; 
position: absolute; 
left: .2em; top: .1em; 
width: .4em; height: .5em; 
border: solid .03em dimgrey; 
}
</style>
<p><span class=spanNextPage></span> Next Page. [&#9112; (&amp;#9112;), técnicos varios 'página siguiente'.]</p>


<style type="text/css"> /* 17/Jul/2014 18:42 */
.spanWWW {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .7em; height: .7em; 
background-color: black; 
border-radius: 100%; 
background-image: radial-gradient(circle at bottom, transparent 0, transparent .55em, silver .56em, silver .59em, transparent .61em, transparent 100%), 
radial-gradient(circle at left, transparent 0, transparent .55em, silver .56em, silver .59em, transparent .61em, transparent 100%), 
radial-gradient(circle at left, black 0, black .55em, silver .56em, silver .59em, black .61em, black 100%); 
background-size: 1.2em .7em, .7em 1.4em, .7em 1.4em; 
background-repeat: no-repeat; 
background-position: -.15em .05em, -.05em -.39em, -.03em .07em; 
}
.spanWWW::before {content: ""; 
position: absolute; 
width: .125em; height: .125em; 
left: .14em; top: .18em; 
background-color: white; 
border-radius: 100%; 
box-shadow: .31em -.06em 0 0 white, .27em .28em 0 0 white; 
}
</style>
<p><span class=spanWWW></span> World Wide Web. </p>


<style type="text/css">
.spanHome {display: inline-block; 
position: relative; 
margin: auto .85em .6em; 
border-style: solid; 
border-color: black transparent; 
height: 0; width: 0; 
border-width: 0 .5em .35em; 
}
.spanHome:before {content: ""; 
position: absolute; 
top: .3em; left: -.355em; 
display: block; 
width: .15em; height: .2em; 
border-style: solid; 
border-color: black; 
border-width: .2em .3em .1em; 
}
</style>
<p><span class=spanHome></span> Home. [&#8962; (&amp;#8962;) técnicos varios; &#127969; (&amp;#127969;) símbolos varios y pictogramas; &#127968; (&amp;#127968;), símbolos varios y pictogramas 'casa'.]</p>


<style type="text/css">/*4/Mar/2014 11:29*/
.spanDownload {display: inline-block; 
position: relative; 
margin: auto .9em .1em 1em; 
border-style: solid; 
border-color: black; 
height: .3em; width: .6em; 
border-width: 0 .08em .08em; 
}
.spanDownload:before {content: ""; 
position: absolute; 
top: -.05em; left: .1em; 
display: block; 
width: 0; height: 0; 
border-style: solid; 
border-color: black transparent transparent; 
border-width: .2em .2em 0; 
}
.spanDownload:after {content: ""; 
position: absolute; 
top: -.2em; left: .25em; 
display: block; 
width: .1em; height: .2em; 
background-color: black; 
}
</style>
<p><span class=spanDownload></span> Download. ['descarga de archivos'; &#128229; (&amp;#128229;), símbolos varios y pictogramas 'bandeja de entrada'.]</p>


<style type="text/css">/*4/Mar/2014 11:29*/
.spanUpload {display: inline-block; 
position: relative; 
margin: auto 1.2em .3em 1em; 
height: .3em; width: .47em; 
background-color: grey; 
border-radius: .3em; 
box-shadow: .3em .02em 0 -.02em grey, .15em -.16em 0 -.04em grey; 
}
.spanUpload:before {content: ""; 
position: absolute; 
top: .18em; left: .15em; 
display: block; 
width: 0; height: 0; 
border-style: solid; 
border-color: transparent transparent black; 
border-width: 0 .2em .2em; 
}
.spanUpload:after {content: ""; 
position: absolute; 
top: .32em; left: .3em; 
display: block; 
width: .1em; height: .2em; 
background-color: black; 
}
</style>
<p><span class=spanUpload></span> Upload. ['subida de archivos'.] </p>


<style type="text/css"> /* 7/Mar/2015 14:13 */
.spanPaperPlane {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: 0; height: 0; 
border-style: solid; 
border-width: .46em .45em .24em 0; 
border-color: transparent darkgrey transparent transparent; 
transform: rotatez(15deg); 
}
.spanPaperPlane::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .21em; top: -.45em; 
border-style: solid; 
border-width: .56em .13em .125em 0; 
border-color: transparent dimgrey transparent transparent; 
transform: rotatez(20deg); 
}
</style>
<p><span class=spanPaperPlane></span> Paper Plane. (Send, Share)['avión de papel'.]</p>


<style type="text/css"> /* 13/Abr/2014 11:58 */
.spanCode {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.1em; 
width: .6em; height: .6em; 
background-color: transparent; 
border-radius: .15em 0; 
box-shadow: .199em -.199em 0 -.1em black, -.199em .199em 0 -.1em black; 
background-image: linear-gradient(65deg, transparent, transparent .36em, black .375em, black .465em, transparent .48em, transparent 100%); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanCode></span> Source Code. ['código'.]</p>


<style type="text/css"> /* 1/Nov/2014 16:37 */
.spanTrashBin {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em 1.1em; 
width: .5em; height: .55em; 
background-color: black; 
border-style: double solid; 
border-width: .09em .07em 0; 
border-color: black white; 
border-radius: .05em .05em .16em .16em / .05em .05em .8em .8em; 
box-shadow: 0 -.05em 0 0 black; 
background-clip: content-box; 
}
.spanTrashBin::before {content: ""; 
display: block; 
width: .2em; height: .05em; 
margin: -.21em auto; 
border-style: solid; 
border-width: .07em .07em 0; 
border-color: black; 
border-radius: .1em .1em 0 0; 
}
.spanTrashBin::after {content: ""; 
display: block; 
width: .06em; height: .44em; 
margin: .34em auto; 
background-color: silver; 
border-radius: .08em; 
box-shadow: -.11em 0 0 0 silver, .11em 0 0 0 silver; 
}
</style>
<p><span class=spanTrashBin></span> Trash Bin. Wastebasket. [&#128465; (&amp;#128465;), símbolos varios y pictogramas 'cesto de basura'.]</p>


<style type="text/css"> /* 28/Abr/2014 14:19 */
.spanFilter {position: relative; 
display: inline-block; 
margin: auto 1.05em; 
width: .1em; height: .3em; 
background-color: black; 
border-color: black transparent; 
border-style: solid; 
border-width: .3em .25em 0; 
border-radius: 0 0 100% 100%; 
background-clip: content-box
}
.spanFilter:before {content: ""; 
position: absolute; 
width: .08em; height: .05em; 
left: .27em; top: -.3em; 
background-color: transparent; 
border: solid .05em black; 
border-radius: 50%; 
}
</style>
<p><span class=spanFilter></span> Funnel (Filter). ['embudo' o 'filtro'.]</p>


<style type="text/css"> /* 9/Jul/2014 17:29 */
.spanCompress {position: relative; 
display: inline-block; 
margin: 0 1.2em -.1em 1em; 
width: .12em; height: .8em; 
background-color: black; 
border-color: white white black; 
border-style: solid; 
border-width: 0 .2em .08em; 
border-radius: 0 0 .1em .1em; 
background-image: repeating-linear-gradient(35deg, silver 0, silver .015em, black .07em); 
}
.spanCompress::before {content: ""; 
position: absolute; 
width: .2em; height: .32em; 
left: -.07em; top: .1em; 
border-color: transparent; 
border-style: solid; 
border-width: .13em .15em .13em .25em; 
border-radius: .06em; 
background-image: linear-gradient(white, white), linear-gradient(black 0, black 20%, transparent 20%, transparent 80%, black 80%, black 100%); 
background-position: 0 0, 0 -.06em; 
background-size: 100% 100%, .7em .41em; 
background-clip: content-box, border-box; 
}
.spanCompress::after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .25em; top: .238em; 
background-color: dimgrey; 
border-color: transparent dimgrey; 
border-style: solid; 
border-width: .06em .1em; 
border-radius: .1em; 
background-clip: content-box; 
}
</style>
<p><span class=spanCompress></span> Compression. [&#128476; (&amp;#128476;), símbolos varios y pictogramas 'compresión de archivo'.]</p>


<style type="text/css"> /* 25/Jun/2014 15:03 */
.spanChecked {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em black; 
border-radius: .06em; 
}
.spanChecked::before {content: ""; 
position: absolute; 
width: .18em; height: .28em; 
left: .19em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .08em .05em .095em .02em; 
border-radius: 0 0 .04em; 
transform: rotate(40deg); 
}
</style>
<p><span class=spanChecked></span> Checked Mark. Pass. [&#9745; (&amp;#9745;), símbolos varios 'marcado en caja'; &#10003; (&amp;#10003;), dingbats 'marcado', 'visto bueno'.]</p>


<style type="text/css"> /* 25/Jun/2014 15:04 */
.spanBallot {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em black; 
border-radius: .06em; 
background-image: linear-gradient(to left top, transparent 0, transparent 45%, black 46%, black 54%, transparent 55%, transparent 100%), linear-gradient(to left bottom, white 0, white 45%, black 46%, black 54%, white 55%, white 100%); 
background-repeat: no-repeat; 
box-shadow: inset 0 0 0 .12em white; 
}
</style>
<p><span class=spanBallot></span> Unchecked Mark. Fail. [&#9746; (&amp;#9746;), símbolos varios 'balota en caja'; &#10007; (&amp;#10007;), dingbats 'balota', 'desmarcado explícito'.]</p>


<style type="text/css"> /* 17/Ago/2016 13:15 */
.spanEye2 {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .8em; height: .8em; 
border-radius: 90% 0; 
background: 
radial-gradient(circle, black 15%, silver 17%, silver 35%, black 37%); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanEye2></span> Eye 2. Viewed. [&#128065; (&amp;#128065;), símbolos varios y pictogramas 'ojo'.]</p>


<style type="text/css">
.spanHart {display: inline-block; 
width: 0; height: 0; 
margin: auto 1.3em .1em .8em; 
border-radius: 50% 50% 0 100% / 50% 50% 0 50%; 
border: .3em solid red; 
border-width: .3em; 
position: relative; 
}
.spanHart:before {content: ""; 
width: 0; height: 0; 
top: -.28em; left: .15em; 
border-radius: 50% 50% 100% 0 / 50% 50% 50% 0; 
border-style: solid; 
border-width: .3em; 
position: absolute; 
border-color: red; 
}
.spanHart:after {content: ""; 
width: 0; height: 0; 
top: .2em; left: -.15em; 
border-style: solid; 
border-color: red transparent transparent; 
border-width: .3em .38em; 
position: absolute; 
}
</style>
<p><span class=spanHart></span> Hart (Like). [&#9829; (&amp;#9829;), símbolos varios 'corazón'.]</p>


<style type="text/css">
.spanBrokenHart {display: inline-block; 
width: 0; height: 0; 
border-radius: 50% 50% 0 100% / 50% 50% 0 50%; 
border: .3em solid red; 
position: relative; 
margin: auto 1.4em .1em .7em; 
}
.spanBrokenHart:before {content: ""; 
width: 0; height: 0; 
border-radius: 50% 50% 100% 0 / 50% 50% 50% 0; 
border: solid red .3em; 
position: absolute; 
top: -.28em; left: .4em; 
}
.spanBrokenHart:after {content: ""; 
width: .05em; height: .35em; 
border-style: dotted; 
border-color: transparent red; 
border-width: .07em .07em .04em; 
position: absolute; 
top: -.08em; left: .25em; 
}
</style>
<p><span class=spanBrokenHart></span> Broken Hart, (Not Like?). [&#128148; (&amp;#128148;), símbolos varios y pictogramas 'corazón roto'.]</p>

<style type="text/css">
.spanAvatar {display: inline-block; 
width: .2em; height: 0; 
margin: auto .95em 0; 
border-radius: 50% 50% 0 0; 
border: .3em solid black; 
position: relative; 
}
.spanAvatar:before {content: ""; 
width: 0; height: 0; 
border-radius: 50%; 
border: solid black .2em; 
position: absolute; 
top: -.65em; left: -.1em; 
}
</style>
<p><span class=spanAvatar></span> Avatar. [&#128100; (&amp;#128100;), símbolos varios y pictogramas 'busto o avatar'.]</p>


<style type="text/css">
.spanCloud {display: inline-block; 
width: 1em; 
height: .8em; 
position: relative; 
border-radius: 50%; 
background-color: silver; 
margin: auto .9em .1em; 
}
.spanCloud:before {content: ""; 
width: .6em; height: .6em; 
position: absolute; 
border-radius: 50%; 
background-color: silver; 
top: .1em; left: .6em; 
}
.spanCloud:after {content: ""; 
width: .8em; height: .5em; 
position: absolute; 
border-radius: 50%; 
background-color: silver; 
top: .2em; left: -.25em; 
}
</style>
<p><span class=spanCloud></span> Cloud (Internet). [&#9729; (&amp;#9729;), símbolos varios 'nube'.]</p>


<style type="text/css"> /* 1/Abr/2015 19:57 */
.spanPassword {position: relative; 
display: inline-block; 
margin: 0 .5em .06em .7em; 
width: 1em; height: .36em; 
border: none; 
border-right: solid .36em silver; 
border-radius: .06em; 
box-shadow: inset -.02em 0 0 0 black, inset -.12em 0 0 0 white, 0 0 0 .025em black; 
background: 
radial-gradient(circle, black, black .065em, white .085em, white 100%); 
background-size: .225em 100%; 
background-repeat: repeat-x; 
background-position: left .03em center; 
background-clip: content-box;  
}
.spanPassword::before {content: ""; 
position: absolute; 
bottom: .04em; right: -.27em; 
width: .22em; height: .19em; 
border-style: solid; 
border-width: 0 0 .13em; 
border-color: lime lime black; 
border-radius: 100% 100% 0 0;
box-shadow: inset 0 .025em 0 .025em silver, inset 0 .05em 0 .06em black; 
}
</style>
<p><span class=spanPassword></span> Password. ['contraseña'; &#128272; (&amp;#128272;), símbolos varios y pictogramas 'candado con llave'.]</p>


<style type="text/css">
.spanKey {position: relative; 
display: inline-block; 
width: .17em; height: .17em; 
border-width: .2em .3em .2em .1em; 
border-style: solid; 
border-color: black; 
border-radius: 50%; 
margin: auto 1.35em .2em .8em; 
}
.spanKey::before {content: ""; 
position: absolute; 
width: .6em; height: 0;
border-color: black; 
border-width: .15em 0 .1em .1em; 
left: .45em; 
border-style: solid solid dotted; 
border-radius: 0 30% 20% 0; 
}
</style>
<p><span class=spanKey></span> Key (Password). [&#128273; (&amp;#128273;), símbolos varios y pictogramas 'llave'.]</p>


<style type="text/css">
.spanDoor {position: relative; 
display: inline-block; 
margin: auto .9em 0 1.3em; 
width: .2em; height: .25em; 
border-style: solid; 
border-color: black; 
border-width: .15em .15em .45em; 
}
.spanDoor:before {content: ""; 
position: absolute; 
width: .07em; height: .07em; 
border-radius: 50%; 
left: -.08em; top: .33em; 
background-color: white; 
}
.spanDoor:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
border-width: .2em; 
border-style: solid; 
border-color: transparent transparent transparent black; 
left: -.5em; top: .1em; 
overflow: hidden; 
}
</style>
<p><span class=spanDoor></span> Door, (Exit). [&#128682; (&amp;#128682;), símbolos de mapas y transporte 'puerta'.]</p>


<style type="text/css">
.spanHourGlass {position: relative; 
display: inline-block; 
margin: auto 1em 0 1.2em; 
width: .05em; height: .05em; 
background-color: gray; 
border-style: ridge solid; 
border-color: gray white; 
border-width: .3em .2em; 
border-radius: .1em
}
.spanHourGlass::before {content: ""; 
position: absolute; 
display: block; 
width: .6em; height: .1em; 
border-radius: .5em; 
left: -.28em; top: .33em; 
background-color: black; 
border-collapse: separate; 
box-shadow: 0 -.72em 0 0 black; 
}
.spanHourGlass::after {content: ""; 
position: absolute; 
display: block; 
width: 0; height: .66em; 
border-width: 0 .04em; 
border-style: solid; 
border-color: black; 
left: -.25em; top: -.3em; 
overflow: hidden; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: .488em 0 0 0 black; 
}
</style>
<p><span class=spanHourGlass></span> Hourglass, (Wait). [&#8987; (&amp;#8987;), &#9203; (&amp;#9203;), técnicos varios 'reloj de arena'.]</p>


<style type="text/css"> /* 22/Abr/2014 19:36 */
.spanChessHorse2 {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.2em; 
width: .1em; height: .5em; 
border-color: black black transparent transparent; 
border-style: solid; 
border-width: .05em .28em .1em .15em; 
border-radius: 500% 1100% 500% 100%; 
transform: rotate(15deg); 
box-shadow: .05em -.007em .0em .0em grey; 
}
.spanChessHorse2:before {content: ""; 
position: absolute; 
width: .2em; height: .32em; 
left: -.15em; top: -.09em; 
border-color: black transparent transparent; 
border-style: solid; 
border-width: .06em; 
border-radius: 100% 100% 90% 150%; 
transform: rotate(40deg); 
box-sha dow: inset -.02em -.01em .01em .09em black; 
background-image: radial-gradient(circle, white, white .025em, black .05em, black 100%); 
background-position: -.015em -.035em; 
background-clip: content-box; 
}
.spanChessHorse2:after {content: ""; 
position: absolute; 
width: .54em; height: .15em; 
left: 0; top: .45em; 
background-color: black; 
border-radius: 1.5em 1.5em .5em .5em / 1.3em 1.3em .5em .5em; 
transform: rotate(345deg); 
}
</style>
  <p><span class=spanChessHorse2></span> Chess Knight. Chess Horse. (Strategy) [&#9822; (&amp;#9822;), símbolos varios 'caballo de ajedrez'.]</p>


<style type="text/css"> /* 13/Jul/2014 18:38 */
.spanStopWatch {position: relative; 
display: inline-block; 
margin: 0 1.2em .23em 1.4em; 
width: .04em; height: .32em; 
background-color: black; 
border-color: black transparent; 
border-style: solid; 
border-width: .06em .03em 0; 
box-shadow: 0 -.02em 0 0 black, 0 .1em 0 .23em white; 
background-clip: content-box; 
}
.spanStopWatch::before {content: ""; 
position: absolute; 
width: .45em; height: .45em; 
left: -.255em; top: .02em; 
border-color: black; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: inset 0 0 .0em .03em white; 
}
.spanStopWatch::after {content: ""; 
position: absolute; 
width: .08em; height: .05em; 
left: .17em; top: .05em; 
background-color: black; 
border-radius: .02em; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanStopWatch></span> Stop Watch. [&#9201; (&amp;#9201;), técnicos varios 'cronómetro'.]</p>


<style type="text/css"> /* 18/Sep/2014 18:16 */
.spanMapMarker {position: relative; 
display: inline-block; 
margin: auto 1em .3em 1.2em; 
width: .44em; height: .53em; 
border-radius: 50%; 
background-image: radial-gradient(circle, white, white .09em, deeppink .12em, deeppink 100%)
}
.spanMapMarker:before {content: ""; 
position: absolute; 
border-style: solid; 
border-width: .23em .125em; 
width: .025em; height: 0; 
top: .48em; left: .09em; 
border-color: deeppink transparent transparent; 
}
</style>
<p><span class=spanMapMarker></span> Map Marker. ['marcador de mapa'.]</p>


<style type="text/css"> /* 1/Ago/2014 14:45 */
.spanGift {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.1em; 
width: .6em; height: .45em; 
background-image: 
linear-gradient(to top, transparent 0, transparent 45%, dimgrey 45%, dimgrey 55%, transparent 55%, transparent 100%), 
linear-gradient(to left, black 0, black 45%, dimgrey 45%, dimgrey 55%, black 55%, black 100%), 
linear-gradient(black, black); 
background-size: 87.5% 100%, 87.5% 100%, 100% 30%; 
background-repeat: no-repeat; 
background-position: center 0; 
}
.spanGift::before , .spanGift::after {content: ""; 
position: absolute; 
width: .11em; height: .07em; 
left: .1em; top: -.15em; 
border: solid .05em dimgrey; 
border-radius: .06em .09em 0 .09em; 
}
.spanGift::after {left: .3em; 
border-radius: .09em .06em .09em 0; 
}
</style>
<p><span class=spanGift></span> Gift. [&#127873; (&amp;#127873;), símbolos varios y pictogramas 'obsequio envuelto'.]</p>


<style type="text/css"> /* 21/May/2016 11:34 */
.spanMoneyBag {position: relative; 
display: inline-block; 
margin: 0 .7em -.2em 1em; 
width: .58em; height: .58em; 
border-style: solid; 
border-width: .18em; 
border-color: transparent; 
border-radius: 100% / 120% 120% 100% 100%; 
background: linear-gradient(white, white), 
linear-gradient(60deg, transparent 45%, black 50%), 
linear-gradient(120deg, black 50%,transparent  55%), black; 
background-size: .05em .45em, .2em .2em, .2em .2em; 
background-position: center, .085em -.14em, .286em -.144em; 
background-repeat: no-repeat; 
background-clip: content-box, border-box, border-box, content-box; 
}
.spanMoneyBag::before , .spanMoneyBag::after {content: ""; 
position: absolute; 
width: .13em; height: .12em; 
left: .185em; top: .11em; 
background-color: ; 
border-style: solid; 
border-width: .05em; 
border-color: white transparent white white; 
border-radius: 100%; 
transform: rotate(45deg); 
}
.spanMoneyBag::after {top: .27em; 
border-color: white white white transparent; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanMoneyBag></span> Money Bag. Pay. [&#128176; (&amp;#128176;), símbolos varios y pictogramas 'bolsa con dinero', "pago".]</p>


<style type="text/css">
.spanCreditCard1 {display: inline-block; 
margin: auto .85em .1em; 
width: 1em; height: 0; 
border-style: double solid solid; 
border-width: 0.55em 0 0.15em; 
border-color: white; 
border-radius: .05em; 
background-color: black; 
border-collapse-separate; 
box-shadow: 0 0 0 1px black; 
}
</style>
<p><span class=spanCreditCard1></span> Credit Card 1 (Payment). [&#128179; (&amp;#128179;), símbolos de mapas y transporte 'tarjeta de crédito'.]</p>


<style type="text/css">
.spanCreditCard2 {display: inline-block; 
margin: 0 .85em .1em; 
width: 1em; height: 0; 
border-style: double none solid; 
border-width: 0.55em 0 0.15em; 
border-color: silver; 
border-radius: .1em; 
background-color: black; 
/*outline: solid black 1px; */
}
</style>
<p><span class=spanCreditCard2></span> Credit Card 2 (Payment).</p>


<style type="text/css"> /* 9/Jul/2015 19:12 */
.spanBreakCreditCard {position: relative; 
display: inline-block; 
margin: 0 .7em 0 .85em; 
width: 1em; height: .7em; 
border: solid .03em transparent; 
border-radius: .1em; 
background: 
linear-gradient(70deg, transparent 40%, white 45%, white 55%, transparent 60%) center 0 border-box, 
linear-gradient(290deg, transparent 40%, white 45%, white 55%, transparent 60%) center .26em border-box, 
linear-gradient(70deg, transparent 40%, white 45%, white 55%, transparent 60%) center .51em border-box, 
linear-gradient(silver 25%, black 25%, black 45%, silver 45%) content-box, 
linear-gradient(black, black); 
background-size: .3em .26em, .3em .25em, .3em .26em, 100% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-origin: border-box, border-box, border-box, content-box; 
}
</style>
<p><span class=spanBreakCreditCard></span> Broken Credit Card. [tarjeta de crédito rota.]</p>


<style type="text/css"> /* 6/Ago/2016 11:12 */
.spanInsertCard {position: relative; 
display: inline-block; 
margin: 0 .7em .45em 1em; 
width: .75em; height: .05em; 
background-color: black; 
border: solid .05em darkgrey; 
border-radius: .05em; 
box-shadow: 0 0 0 .02em black; 
}
.spanInsertCard::before {content: ""; 
position: absolute; 
width: .15em; height: .48em; 
left: 0; top: .15em; 
background-color: black; 
border-style: solid; 
border-width: 0 .5em 0 .1em; 
border-color: grey; 
border-radius: .08em; 
transform: perspective(1em) rotateX(50deg); 
perspective-origin: .45em; 
}
.spanInsertCard::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .24em; top: .15em; 
border-style: solid; 
border-width: 0 .15em .08em; 
border-color: black transparent; 
}
</style>
<p><span class=spanInsertCard></span> Insert Card. ['inserte tarjeta'.]</p>


<style type="text/css"> /* 28/Sep/2014 14:39 */
.spanChipCard {position: relative; 
margin: auto .7em .1em .9em; 
width: 1em; height: .7em; 
border-radius: .08em; 
background-color: dimgrey; 
display: inline-block; 
}
.spanChipCard::before {content: ""; 
position: absolute; 
width: .25em; height: .25em; 
left: .1em; bottom: .1em; 
border-radius: .06em; 
background: radial-gradient(ellipse, gold, gold .05em, dimgrey .064em, dimgrey .08em, transparent .09em, transparent 100%), 
linear-gradient(transparent, transparent 25%, dimgrey 26%, dimgrey 39%, transparent 40%, transparent 60%, dimgrey 61%, dimgrey 74%, transparent 75%, transparent 100%), 
linear-gradient(90deg, gold, gold 45%, dimgrey 45%, dimgrey 55%, gold 55%, gold 100%); 
background-size: .18em .24em, 100% 100%, 100% 100%; 
background-position: center center; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanChipCard></span> Chip Card. ['tarjeta chip'.]</p>


<style type="text/css"> /* 6/Jun/2016 22:15 */
.spanProximityCard {position: relative; 
display: inline-block; 
margin: 0 .6em 0 .9em; 
width: 1em; height: .6em; 
border-style: solid; 
border-width: .05em; 
border-color: snow gainsboro gainsboro snow; 
border-radius: .08em; 
overflow: hidden; 
}
.spanProximityCard::before {content: ""; 
position: absolute; 
width: .06em; height: .26em; 
left: 0; top: 0; 
border: solid .17em whitesmoke; 
border-left-width: .86em; 
box-shadow: inset 0 0 .02em 0 grey; 
}
</style>
<p><span class=spanProximityCard></span> Proximity Card (Access). ['tarjeta de proximidad'.]</p>


<style type="text/css">
.spanCommerce{position: relative; 
display: inline-block; 
margin: 0 .7em 0 .8em; 
width: .3em; height: .5em; 
background-color: white; 
border-style: solid; 
border-color: dimgray; 
border-width: .3em .13em .085em .8em; 
}
.spanCommerce:before {content: ""; 
position: absolute; 
width: .5em; height: .33em; 
left: -.65em; top: 0; 
background-color: white; 
}
.spanCommerce:after {content: ""; 
position: absolute; 
width: .18em; height: .35em; 
left: -.802em; top: -.27em; 
background-color: red; 
border-radius: 0 0 .2em .2em;
border-collapse: separate; 
box-shadow: .18em 0 0 0 blue, .36em 0 0 0 red, .54em 0 0 0 blue, 
.72em 0 0 0 red, .9em 0 0 0 blue, 1.06em 0 0 0 red; 
}
</style>
<p><span class=spanCommerce></span> Commerce (Store). [&#127978; (&amp;#127978;), símbolos varios y pictogramas 'tienda o negocio de ventas'.]</p>

<style type="text/css">
.spanShopping{position: relative; 
display: inline-block; 
margin: auto 1em .2em 1.15em; 
width: .45em; height: .12em; 
background-color: white; 
border-style: solid; 
border-color: black transparent; 
border-width: .25em .13em .08em 0; 
border-radius: 0 0 .16em 0; 
}
.spanShopping:before {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: -.1em; top: .23em; 
background-color: black; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: .4em 0 0 0 black; 
}
.spanShopping:after {content: ""; 
position: absolute; 
width: .1em; height: .5em; 
left: -.12em; top: -.4em; 
border-style: solid; 
border-color: black black transparent transparent; 
border-width: .08em .08em 0 0; 
border-radius: 0 .08em 0;
}
</style>
<p><span class=spanShopping></span> Shopping Cart (Shop). ['carrito de compras'.]</p>

<style type="text/css">
.spanThumbUp {display: inline-block; 
position: relative; 
background-color: black; 
width: .45em; height: .54em; 
margin: auto 1em 0 1.3em; 
border-radius: 0 60% 40% 0; 
}
.spanThumbUp:before {content: ""; 
position: absolute; 
top:0 ; left: -.2em; 
background-color: black; 
width: .3em; height: .15em; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: .02em .14em 0 0 black, .07em .26em 0 0 black, .1em .38em 0 0 black; 
}
.spanThumbUp:after {content: ""; 
display: block; 
position: absolute; 
top:-.275em; left: .1em; 
background-color: black; 
width: .15em; height: .48em; 
border-radius: 50% 20% 0 0; 
transform: rotate(-35deg); 
}
</style>
<p><span class=spanThumbUp></span> Thumb Up (OK, Accept). [&#128077; (&amp;#128077;), símbolos varios y pictogramas 'pulgar arriba'.]</p>


<style type="text/css">
.spanThumbDown {display: inline-block; 
position: relative; 
background-color: black; 
width: .45em; height: .54em; 
margin: auto 1em .25em 1.3em; 
border-radius: 0 40% 60% 0; 
}
.spanThumbDown:before {content: ""; 
display: block; 
position: absolute; 
top:.39em; left: -.2em; 
background-color: black; 
width: .3em; height: .15em; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: .02em -.14em 0 0 black, .07em -.28em 0 0 black, .1em -.39em 0 0 black; 
}
.spanThumbDown:after {content: ""; 
display: block; 
position: absolute; 
top:.3em; left: .1em; 
background-color: black; 
width: .15em; height: .48em; 
border-radius: 0 0 20% 50%; 
transform: rotate(35deg); 
}
</style>
<p><span class=spanThumbDown></span> Thumb Down (Not Accept). [&#128078; (&amp;#128078;), símbolos varios y pictogramas'pulgar abajo'.]</p>


<style type="text/css"> /* 28/Sep/2014 22:58 */
.spanDatakey {position: relative; 
display: inline-block; 
margin: 0 1em -.03em 1.5em; 
width: .3em; height: .3em; 
background-color: black; 
border-radius: .06em; 
box-shadow: -.4em -.23em 0 -.1em black, -.26em -.23em 0 -.1em black, 
-.4em -.37em 0 -.1em black, -.26em -.37em 0 -.1em black, -.12em -.37em 0 -.1em black, 
-.4em -.5em 0 -.1em black, -.26em -.5em 0 -.1em black, -.12em -.5em 0 -.1em black; 
}
.spanDatakey::before {content: ""; 
position: absolute; 
width: .083em; height: .23em; 
left: 0; top: -.2em; 
border-style: solid; 
border-width: .025em 0 0; 
border-color: white; 
background-color: black; 
border-radius: .1em .1em 0 0 / .15em .15em 0 0; 
}
.spanDatakey::after {content: ""; 
position: absolute; 
width: .09em; height: .23em; 
left: -.09em; top: .04em; 
background-color: black; 
border-radius: .1em .1em 0 0 / .2em .2em 0 0; 
transform: rotate(310deg); 
}
</style>
<p><span class=spanDatakey></span> Datakey. ['ingreso de datos por teclado'.]</p>


<style type="text/css"> /* 31/Oct/2014 13:37 */
.spanTouch {position: relative; 
display: inline-block; 
margin: 0 1.1em -.03em 1.2em; 
width: .28em; height: .3em; 
border-style: solid; 
border-color: transparent; 
border-width: .35em 0 0 .2em; 
border-radius: 0 0 .06em .25em; 
background: radial-gradient(circle, transparent, transparent 17%, grey 40%, transparent 50%, darkgrey 60%, transparent 75%, transparent 100%) -.115em -.33em, black; 
background-size: .32em .32em; 
background-repeat: no-repeat; 
background-clip: border-box, content-box; 
}
.spanTouch::before {content: ""; 
position: absolute; 
width: .083em; height: .23em; 
left: 0; top: -.2em; 
border-style: solid; 
border-width: .025em 0 0; 
border-color: white; 
background-color: black; 
border-radius: .1em .1em 0 0 / .15em .15em 0 0; 
}
.spanTouch::after {content: ""; 
position: absolute; 
width: .09em; height: .23em; 
left: -.085em; top: .04em; 
background-color: black; 
border-radius: .1em .1em 0 0 / .2em .2em 0 0; 
transform: rotate(310deg); 
}
</style>
<p><span class=spanTouch></span> Touch Screen. ['pantalla táctil'.]</p>


<style type="text/css"> /* 7/Dic/2014 14:19 */
.spanBold {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .25em; height: .2em; 
border-style: solid; 
border-width: .1em .2em; 
border-color: black; 
border-radius: 0 100% 100% 0; 
}
.spanBold::before {content: ""; 
position: absolute; 
width: .2em; height: .15em; 
left: -.2em; top: -.35em; 
border-style: solid; 
border-width: .1em .2em; 
border-color: black; 
border-radius: 0 100% 100% 0; 
}
</style>
<p><span class=spanBold></span> Text Bold. [&#119809; (&amp;#119809;), símbolos matemáticos alfanuméricos 'B mayúscula negrita'.]</p>


<style type="text/css"> /* 7/Dic/2014 14:35 */
.spanItalic {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1em; 
width: .8em; height: .7em; 
background-image: 
linear-gradient(300deg, transparent, transparent 45%, black 46%, black 57%, transparent 58%, transparent 100%); 
background-repeat: no-repeat; 
}
.spanItalic::before , .spanItalic::after {content: ""; 
position: absolute; 
width: .32em; height: .1em; 
right: .1em; top: 0; 
background-color: black; 
border-radius: .05em; 
}
.spanItalic::after {top: auto; 
left: .07em; bottom: 0; 
}
</style>
<p><span class=spanItalic></span> Text Italic. [&#119920; (&amp;#119920;), símbolos matemáticos alfanuméricos 'I mayúscula cursiva'.]</p>


<style type="text/css"> /* 7/Dic/2014 14:50 */
.spanUnderline {position: relative; 
display: inline-block; 
margin: 0 1em -.08em; 
width: .75em; height: .7em; 
border: none; 
border-bottom: solid .08em black; 
}
.spanUnderline::before {content: ""; 
position: absolute; 
width: .33em; height: .555em; 
left: .08em; top: 0; 
background-color: ; 
border-style: solid; 
border-width: 0 .1em .14em .14em; 
border-color: black; 
border-radius: 0 0 50% 50%; 
}
.spanUnderline::after {content: ""; 
position: absolute; 
width: .28em; height: .1em; 
left: 0; top: 0; 
background-color: black; 
border-radius: .05em; 
box-shadow: .43em 0 0 0 black; 
}
</style>
<p><span class=spanUnderline></span> Text Underline. ['U mayúscula subrrayada'.]</p>


<style type="text/css"> /* 7/Dic/2014 15:22 */
.spanStrikeThrough {position: relative; 
display: inline-block; 
margin: 0 .95em .08em; 
width: .66em; height: .58em; 
border-style: solid; 
border-width: .1em .1em 0; 
border-color: black transparent; 
background-image: linear-gradient(90deg, transparent, transparent 41%, black 41%, black 59%, transparent 59%, transparent 100%), 
linear-gradient(transparent, transparent 41%, black 42%, black 50%, transparent 50%, transparent 100%); 
background-clip: content-box; 
}
.spanStrikeThrough::before {content: ""; 
position: relative; 
display: block; 
margin: auto; 
width: .2em; height: 0; 
top: 100%; 
border-style: solid; 
border-width: 0 .05em .08em; 
border-color: black transparent; 
}
</style>
<p><span class=spanStrikeThrough></span> Text Strike Through. [&#358; (&amp;#358;), latino extendido 'T mayúscula tachada'.]</p>


<style type="text/css"> /* 2/Feb/2015 20:34 */
.spanAlignLeft {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .6em; 
border: none; 
border-left: solid .08em black; 
background-image: linear-gradient(white, white 45%, black 45%, black 55%, white 55%, white 100%); 
}
.spanAlignLeft::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
top: .185em; left: 0;  
border-style: solid; 
border-width: .125em .16em .125em .03em; 
border-color: white black white white; 
}
</style>
<p><span class=spanAlignLeft></span> At Left. [&#8676; (&amp;#8676;), flechas 'flecha hacia barra izquierda'; &#11120; (&amp;#11120;), símbolos varios y flechas 'flecha hacia barra izquierda'.]</p>


<style type="text/css"> /* 2/Feb/2015 20:44 */
.spanAlignRight {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .6em; 
border: none; 
border-right: solid .08em black; 
background-image: linear-gradient(white, white 45%, black 45%, black 55%, white 55%, white 100%); 
}
.spanAlignRight::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
top: .185em; right: 0;  
border-style: solid; 
border-width: .125em .03em .125em .16em; 
border-color: white white white black; 
}
</style>
<p><span class=spanAlignRight></span> At Right. [&#8677; (&amp;#8677;), flechas 'flecha hacia barra derecha'; &#11122; (&amp;#11122;), símbolos varios y flechas 'flecha hacia barra derecha'.]</p>


<style type="text/css"> /* 2/Feb/2015 20:56 */
.spanAlignCenter {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-image: linear-gradient(90deg, transparent, transparent 35%, white 35%, white 43%, black 45%, black 55%, white 57%, white 70%, transparent 70%, transparent 100%), 
linear-gradient(white, white 45%, black 45%, black 55%, white 55%, white 100%); 
}
.spanAlignCenter::before {content: ""; 
display: block; 
width: .1em; height: 0; 
margin: .195em auto; 
border-style: solid; 
border-width: .12em .13em .12em .13em; 
border-color: transparent black; 
}
</style>
<p><span class=spanAlignCenter></span> At Center. ['flechas horizontales hacia barra en centro'.]</p>


<style type="text/css"> /* 2/Feb/2015 19:11 */
.spanAlignTop {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .5em; 
border: none; 
border-top: solid .08em black; 
background-image: linear-gradient(90deg, white, white 45%, black 45%, black 55%, white 55%, white 100%); 
}
.spanAlignTop::before {content: ""; 
display: block; 
width: 0; height: 0; 
margin: 0 auto; 
border-style: solid; 
border-width: .03em .12em .16em; 
border-color: white white black; 
}
</style>
<p><span class=spanAlignTop></span> At Top. [&#10514; (&amp;#10514;), flechas suplementarias-B 'flecha hacia barra superior'; &#11121; (&amp;#11121;), símbolos varios y flechas 'flecha hacia barra superior'.]</p>


<style type="text/css"> /* 2/Feb/2015 19:24 */
.spanAlignBottom {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .5em; 
border: none; 
border-top: solid .08em black; 
background-image: linear-gradient(90deg, white, white 45%, black 45%, black 55%, white 55%, white 100%); 
transform: rotatez(180deg); 
}
.spanAlignBottom::before {content: ""; 
display: block; 
width: 0; height: 0; 
margin: 0 auto; 
border-style: solid; 
border-width: .03em .12em .16em; 
border-color: white white black; 
}
</style>
<p><span class=spanAlignBottom></span> At Bottom. [&#10515; (&amp;#10515;), flechas suplementarias-B 'flecha hacia barra inferior'; &#11123; (&amp;#11123;), símbolos varios y flechas 'flecha hacia barra inferior'.]</p>


<style type="text/css"> /* 2/Feb/2015 19:44 */
.spanAlignMiddle {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .6em; 
background-image: linear-gradient(transparent, transparent 30%, white 30%, white 43%, black 45%, black 55%, white 57%, white 70%, transparent 70%, transparent 100%), 
linear-gradient(90deg, white, white 45%, black 45%, black 55%, white 55%, white 100%); 
}
.spanAlignMiddle::before {content: ""; 
display: block; 
width: 0; height: .1em; 
margin: .13em auto; 
border-style: solid; 
border-width: .13em .12em .13em; 
border-color: black transparent; 
}
</style>
<p><span class=spanAlignMiddle></span> At Middle. ['flechas verticales hacia barra en medio'.]</p>


<style type="text/css"> /* 17/May/2014 13:55 */
.spanNewspaper {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .5em; height: .65em; 
background-color: white; 
border: solid .03em silver; 
padding: .05em; 
background-image: 
linear-gradient(180deg, grey, grey .15em, white .15em, white .2em, transparent .2em, transparent 100%), 
linear-gradient(90deg, transparent, transparent 45.5%, white 45.5%, white 54.5%, transparent 54.5%, transparent 100%), 
repeating-linear-gradient(grey, grey .04em, transparent .04em, transparent .07em); 
background-clip: content-box; 
box-shadow: .05em .05em .04em 0 rgba(0,0,0,.4); 
}
.spanNewspaper:before {content: ""; 
position: absolute; 
width: 39%; height: 32%; 
left: .05em; top: .33em; 
background-color: black; 
overflow: hidden; 
}
</style>
<p><span class=spanNewspaper></span> Newspaper (News). [&#128240; (&amp;#128240;), símbolos varios y pictogramas 'diario', 'periódico', 'noticias'.]</p>


<style type="text/css"> /* 19/Abr/2015 11:59 */
.spanPostIt {position: relative; 
display: inline-block; 
margin: 0 .9em .03em; 
width: .8em; height: .4em; 
border-style: solid; 
border-width: 0 .1em .35em 0; 
border-color: transparent; 
background: 
radial-gradient(ellipse at right top, moccasin, moccasin 70%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.1) 100%), 
radial-gradient(ellipse at right top, transparent, transparent 70%, moccasin 70%, moccasin 100%), 
linear-gradient(moccasin, moccasin), moccasin; 
background-size: .1em .35em, .1em .35em, .7em .365em, 100% 100%; 
background-repeat: no-repeat; 
background-position: left bottom, right bottom, right .1em bottom 0, 0 0; 
background-clip: border-box, border-box, border-box, content-box; 
background-origin: border-box, border-box, border-box, content-box ; 
box-shadow: -.02em .05em .005em -.01em rgba(0,0,0,.1); 
transform: rotate(350deg); 
}
</style>
<p><span class=spanPostIt></span> Post It (Note).[&#128455; (&amp;#128455;), símbolos varios y pictogramas 'anotador (nota)'.]</p>


<style type="text/css"> /* 20/May/2016 11:37 */
.spanFlipChart {position: relative; 
display: inline-block; 
margin:  0 .9em; 
width: .8em; height: .8em; 
background: 
linear-gradient(135deg, transparent 40%, black 40%, black 60%, transparent 60%) left .25em bottom, 
linear-gradient(90deg, transparent 47%, black 47%, black 53%, transparent 53%), 
linear-gradient(45deg, transparent 40%, black 40%, black 60%, transparent 60%) left .4em bottom 0; 
background-size: .15em .15em, 100% 100%; 
background-repeat: no-repeat; 
}
.spanFlipChart::before {content: ""; 
position: absolute; 
width: 100% ; height: .5em; 
left: 0; top: .05em; 
background-color: whitesmoke; 
background-clip: content-box; 
border-style: solid; 
border-width: .033em .05em; 
border-color: black transparent; 
border-radius: .06em; 
box-shadow: inset 0 0 0 .03em black; 
box-sizing: border-box; 
}
</style>
<p><span class=spanFlipChart></span> Flip Chart (Presentation). ['rotafolio'.]</p>




<hr>



<style type="text/css">
.spanRecorder {position: relative; 
display: inline-block; 
background-color: black; 
width: .4em; height: .1em; 
margin: auto 1.15em .2em; 
}
.spanRecorder:before {content: ""; 
width: .15em; height: .15em; 
position: absolute; 
left: -50%; top: -250%; 
border: .1em solid black; 
border-radius: 50%; 
}
.spanRecorder:after {content: ""; 
width: .15em; height: .15em; 
position: absolute; 
left: 70%; top: -250%; 
border: .1em solid black; 
border-radius: 50%; 
}
</style>
<p><span class=spanRecorder></span> Tape Recorder. ['grabador (de cinta)'.]</p>


<style type="text/css">
.spanSpeaker {display: inline-block; 
margin: auto 1.1em 0; 
width: .3em; height: .5em; 
border-style: solid; 
border-color: white black; 
border-width: .2em .3em .2em 0; 
background-color: black; 
}
</style>
<p><span class=spanSpeaker></span> Speaker. [&#128264; (&amp;#128264;), símbolos varios y pictogramas'altavoz'.]</p>


<style type="text/css">
.spanSpeakerSound {display: inline-block; 
margin: auto 1.1em 0; 
width: .3em; height: .5em; 
position: relative; 
border-style: solid; 
border-color: white black; 
border-width: .2em .3em .2em 0; 
background-color: black; 
}
.spanSpeakerSound:after {content: ""; 
position: absolute; 
height: .6em; width: .6em; 
left: -.1em; top: -.3em; 
border-color: transparent black transparent transparent; 
border-width: .3em; 
border-radius: 50%;
border-style: double; 
}
</style>
<p><span class=spanSpeakerSound></span> Speaker Sound. [&#128266; (&amp;#128266;), símbolos varios y pictogramas'altavoz con ondas'.]</p>


<style type="text/css"> /* 20/Sep/2014 10:45 */
.spanSpeakerMute {position: relative; 
margin: auto 1.1em 0; 
display: inline-block; 
width: .3em; height: .5em; 
border-style: solid; 
border-color: white black; 
border-width: .2em .3em .2em 0; 
background-color: black; 
}
.spanSpeakerMute:after {content: ""; 
position: absolute; 
height: .35em; width: .35em; 
left: .75em; top: .1em; 
border-radius: .06em; 
background-image: linear-gradient(45deg, transparent, transparent 40%, black 42%, black 58%, transparent 60%, transparent 100%), 
linear-gradient(315deg, transparent, transparent 40%, black 42%, black 58%, transparent 60%, transparent 100%); 
}
</style>
<p><span class=spanSpeakerMute></span> Mute. [&#128263; (&amp;#128263;), símbolos varios y pictogramas 'altavoz cancelado', 'silencio'.]</p>


<style type="text/css"> /* 2/Ago/2015 14:01 */
.spanMegaphone {position: relative; 
display: inline-block; 
margin: 0 .9em .1em 1.25em; 
width: .5em; height: .3em; 
border-style: solid; 
border-width: .12em 0; 
border-color: transparent; 
background: 
radial-gradient(ellipse at left top, transparent 65%, black 70%), 
linear-gradient(black, black), 
radial-gradient(ellipse at left bottom, transparent 65%, black 70%) left bottom; 
background-size: .5em .12em, 100% 100%; 
background-repeat: no-repeat; 
background-clip: border-box, content-box; 
background-origin: border-box; 
transform: rotate(350deg); 
}
.spanMegaphone::before {content: ""; 
position: absolute; 
width: .14em; height: .24em; 
left: -.21em; top: 100%; 
background-color: black; 
border-style: solid; 
border-width: 0 .05em .07em 0; 
border-color: black transparent; 
border-radius: 0 0 .05em .08em; 
transform: rotate(350deg); 
background-clip: content-box; 
}
.spanMegaphone::after {content: ""; 
position: absolute; 
width: .37em; height: .3em; 
left: -.43em; top: 0; 
background-color: black; 
border-bottom: solid .04em white; 
border-radius: 100% 0 0 100%; 
}
</style>
<p><span class=spanMegaphone></span> Megaphone. [&#128227; (&amp;#128227;), símbolos varios y pictogramas 'megáfono'.]</p>


<style type="text/css"> /* 17/May/2016 18:39 */
.spanPhotoShutter {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .7em; height: .7em; 
border: solid .03em black; 
background: 
linear-gradient(37deg, black 25%, transparent 30%, transparent 70%, black 75%) center 0 no-repeat; 
background-size: .34em 100%; 
border-radius: 100%; 
overflow: hidden; 
}
.spanPhotoShutter::before, .spanPhotoShutter::after {content: ""; 
position: absolute; 
width: .34em; height: 100%; 
left: .18em; top: 0; 
background: inherit; 
transform: rotate(60deg); 
}
.spanPhotoShutter::after {
transform: rotate(120deg); 
}
</style>
<p><span class=spanPhotoShutter></span> Photographic Shutter. ['obturador fotográfico'.]</p>


<style type="text/css">
.spanCamera {position: relative; 
display: inline-block; 
width: .65em; height: .5em; 
margin: auto 1.05em .2em; 
background-color: black; 
}
.spanCamera:after {content: ""; 
position: absolute; 
top: .13em; left: .65em; 
width: 0; height: .1em;  
border-color: transparent black; 
border-width: .1em .2em .1em 0; 
border-style: solid; 
background-color: transparent; 
overflow: hidden; 
}
</style>
<p><span class=spanCamera></span> Camera. [&#127909; (&amp;#127909;) &#128247; &#128249; (&amp;#128249;), símbolos varios y pictogramas 'cámara'.]</p>


<style type="text/css">
.spanCamera2 {position: relative; 
display: inline-block; 
width: .8em; height: .5em; 
margin: auto .95em .1em; 
background-color: black; 
border-radius: 10%; 
}
.spanCamera2:before {content: ""; 
width: 0; height: 0; 
border: .2em double white; 
position: absolute; 
left: 25%; top: 14%; 
background-color: black; 
border-radius: 50%; 
}
.spanCamera2:after {content: ""; 
width: .2em; height: 0; 
position: absolute; 
left: 25%; top: -.2em; 
border-width: .1em; 
border-style: solid; 
border-color: transparent transparent black; 
}
</style>
<p><span class=spanCamera2></span> Camera (Photo). [&#x1f4f7; (&amp;#128247;), símbolos varios y pictogramas 'cámara fotográfica'.]</p>


<style type="text/css">
.spanCameraViewer {position: relative; 
margin: auto .8em .1em; 
display: inline-block; 
width: 40px; height: 26px; 
background-color: transparent; 
border-width: 2px; 
border-style: solid; 
border-color: black; 
border-radius: 4px; 
}
.spanCameraViewer:before {content: ""; 
width: 40px; height: 26px; 
position: absolute; 
left: -2px; top: -2px; 
background-color: transparent; 
border-width: 2px; 
border-style: solid; 
border-color: white; 
border-radius: 12px; 
}
.spanCameraViewer:after {content: ""; 
width: 10px; height: 10px; 
position: absolute; 
left: 14px; top: 7px; 
border-width: 1px; 
border-style: solid; 
border-color: black; 
border-radius: 50%; 
}
</style>
<p><span class=spanCameraViewer></span> Camera Viewer. [&#9974; (&amp;#9974;), otros símbolos 'square four corners' ('cuatro esquinas de cuadro', 'visor de cámara fotográfica').]</p>


<style type="text/css"> /* 19/Ago/2015 14:33 */
.spanSelfieStick {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: .8em; height: .04em; 
background-color: grey; 
border-style: solid; 
border-width: .03em 0 .03em .2em; 
border-color: transparent black; 
box-shadow: -.2em 0 0 0 black; 
background-clip: content-box; 
transform: rotate(340deg); 
transform-origin: left top; 
}
.spanSelfieStick::before {content: ""; 
position: absolute; 
width: .4em; height: .26em; 
left: .55em; top: -.15em; 
background-color: darkgrey; 
border-style: solid; 
border-width: .03em .03em .05em .05em; 
border-color: transparent transparent dimgrey dimgrey; 
box-shadow: inset -.025em 0 0 .037em black; 
border-radius: .1em .03em .1em .1em; 
background-clip: content-box; 
transform: rotate(20deg) skewy(15deg); 
}
.spanSelfieStick::after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: -.6em; top: -.2em; 
border: solid .03em black; 
border-radius: 100% 150% 0 150%; 
}
</style>
<p><span class=spanSelfieStick></span> Selfie Stick.</p>


<style type="text/css"> /* 29/Sep/2014 14:45 */
.spanMemoryCard {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .28em; height: .5em; 
background-color: black; 
border: solid .08em black; 
border-top-width: .025em; 
border-radius: .06em; 
background-image: repeating-linear-gradient(270deg, gold, gold 20%, black 20%, black 33%); 
background-clip: content-box; 
}
.spanMemoryCard::before {content: ""; 
position: absolute; 
width: .43em; height: .46em; 
right: 0em; bottom: -.08em; 
background-color: black; 
border-radius: .1em 0 0 .06em / .13em 0 0 .06em; 
}
.spanMemoryCard::after {content: ""; 
position: absolute; 
width: .27em; height: .14em; 
right: 0; top: .255em; 
background-color: black; 
border: solid .025em dimgrey; 
border-radius: .02em; 
}
</style>
<p><span class=spanMemoryCard></span> Memory Card. ['tarjeta de memoria'.]</p>


<style type="text/css"> /* 4/Feb/2015 10:40 */
.spanClapperboard {position: relative; 
display: inline-block; 
margin: 0 .9em -.03em; 
width: .7em; height: .4em; 
background-color: black; 
border: solid .025em black; 
border-radius: 0 0 .06em .06em; 
background: 
repeating-linear-gradient(60deg, black 0, black .08em, white .08em, white .16em), black; 
background-size: 100% .1em, 100% 100%; 
background-repeat: no-repeat; 
}
.spanClapperboard::before {content: ""; 
position: absolute; 
width: .7em; height: .07em; 
left: -.025em; top: -.1em; 
border: solid .025em black; 
background: 
repeating-linear-gradient(300deg, black 0, black .08em, white .08em, white .16em); 
background-size: 100% .1em; 
background-repeat: no-repeat; 
transform: rotatez(345deg); 
transform-origin: left bottom; 
}
</style>
<p><span class=spanClapperboard></span> Clapperboard. [&#127916; (&amp;#127916;), símbolos varios y pictogramas 'claqueta'.]</p>


<style type="text/css">
.spanBattery1 {display: inline-block; 
margin: auto .9em .1em; 
position: relative; 
background-color: black; 
width: .8em; height: .4em; 
}
.spanBattery1:after {content: ""; 
position: absolute; 
top: .1em; left: .8em; 
background-color: black; 
height: .2em; width: .1em; 
}
</style>
<p><span class=spanBattery1></span> Battery 1. [&#128267; (&amp;#128267;), símbolos varios y pictogramas'batería'.]</p>


<style type="text/css"> /* 1/Ene/2015 13:59 */
.spanBattery2 {position: relative; 
display: inline-block; 
margin: 0 .7em 0 1em; 
width: .8em; height: .43em; 
background-color: white; 
border: solid .075em black; 
}
.spanBattery2::before {content: ""; 
display: block; 
width: 53%; height: .09em; 
margin: -.15em auto; 
border-style: solid; 
border-width: 0 .15em; 
border-color: black; 
}
.spanBattery2::after {content: ""; 
display: block; 
width: 90%; height: .16em; 
margin: .255em auto; 
background-image: 
linear-gradient(transparent, transparent 30%, black 30%, black 70%, transparent 70%, transparent 100%), 
linear-gradient(transparent, transparent 30%, black 30%, black 70%, transparent 70%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 30%, black 30%, black 70%, transparent 70%, transparent 100%); 
background-size: .16em .16em; 
background-repeat: no-repeat; 
background-position: 0 0, right top; 
}
</style>
<p><span class=spanBattery2></span> Battery 2. UPS. ['batería de auto'.]</p>


<style type="text/css">
.spanBatteryFull {position: relative; 
margin: auto .9em .1em; 
display: inline-block; 
border-style: solid; 
border-color: black; 
border-width: .1em .1em .1em .8em; 
width: 0; height: .2em; 
}
.spanBatteryFull:after {content: ""; 
position: absolute; 
background-color: black; 
left: .1em; right: -.2em; 
height: .2em; width: .1em; 
}
</style>
<p><span class=spanBatteryFull></span> Battery Full.</p>


<style type="text/css">
.spanBatteryHalf {position: relative; 
display: inline-block; 
border-color: black; 
border-style: solid; 
border-width: .1em .1em .1em .5em; 
width: .3em; height: .2em; 
margin: auto .9em .1em; 
}
.spanBatteryHalf:after {content: ""; 
left: .4em; right: -.2em; 
position: absolute; 
background-color: black; 
height: .2em; width: .1em; 
}
</style>
<p><span class=spanBatteryHalf></span> Battery Half.</p>


<style type="text/css">
.spanBatteryEmpty {position: relative; 
display: inline-block; 
border-color: black; 
border-style: solid; 
width: .7em; height: .2em; 
margin: auto .9em .1em; 
border-width: .1em; 
}
.spanBatteryEmpty:after {content: ""; 
left: .8em; right: -.2em; 
position: absolute; 
background-color: black; 
height: .2em; width: .1em; 
}
</style>
<p><span class=spanBatteryEmpty></span> Battery Empty.</p>


<style type="text/css"> /* 28/Oct/2014 11:47 */
.spanMeter {position: relative; 
display: inline-block; 
margin: 0 .7em 0 .9em; 
width: .8em; height: .4em; 
border-style: solid; 
border-width: .1em .1em 0; 
border-color: transparent; 
border-radius: .5em .5em 0 0 / .4em .4em 0 0; 
box-shadow: inset 0 0 0 .025em black, 0 0 0 .04em black; 
background: 
radial-gradient(circle at bottom, black, black .1em, white .12em, white 100%) 0 0, 
linear-gradient(45deg, green, yellow 100%) 0 0, 
linear-gradient(to bottom, yellow, red 100%) right 0; 
background-size: 100% 100%, 50.1% 100%, 50.1% 100%; 
background-repeat: no-repeat; 
background-clip: content-box, border-box, border-box; 
background-origin: content-box, border-box, border-box; 
}
.spanMeter::before {content: ""; 
position: absolute; 
width: .1em; height: .4em; 
left: 45%; top: 0; 
background-image: 
linear-gradient(to left top, black, black 46%, transparent 54%, transparent 100%); 
}
</style>
<p><span class=spanMeter></span> Level Meter. ['medidor de nivel'; &#10971; (&amp;#10971;), operadores matemáticos suplementarios 'intersección transversal'.]</p>


<style type="text/css">
.spanDisk {position: relative; 
display: inline-block; 
width: .7em; height: .7em; 
margin: auto 1em .1em; 
overflow: hidden; 
border-width: .03em; 
border-style: solid; 
border-radius: 50%; 
border-color: black; 
box-shadow: 0 0 0 .02em grey; 
background-image: radial-gradient(circle, transparent .33em, white .33em, white .38em, transparent .38em, transparent 100%), 
radial-gradient(circle, transparent .05em, black .05em, black 100%); 
background-repeat: no-repeat; 
z-index: 1; 
}
.spanDisk:before {content: ""; 
position: absolute; 
width: 1.4em; height: 1.4em; 
background-color: white; 
border-radius: 50%; 
top: -.92em; left: -.92em; 
box-shadow: 1.125em 1.125em 0 0 white; 
z-index: -1; 
}
.spanDisk:after {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
top: .15em; left: .15em; 
border-radius: 50%; 
border: .03em solid white; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
box-shadow: inset 0 0 0 .03em black; 
background-image: radial-gradient(circle, transparent .1em, black .1em, black .14em, transparent .14em, transparent 100%), 
radial-gradient(circle, transparent .08em, white .08em, white 100%); 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanDisk></span> Disk (Optical, Vinyl LP). [&#128191; (&amp;#128191;), símbolos varios 'disco óptico'.]</p>


<style type="text/css">
.spanRadio {display: inline-block; 
position: relative; 
width: .7em; height: .04em; 
margin: auto .9em .1em; 
border-width: .1em .1em .35em; 
border-style: solid; 
border-color: black; 
background-color: transparent; 
}
.spanRadio:after {content: ""; 
position: absolute; 
width: .05em; height: .6em; 
background-color: black; 
border-width: .05em 0; 
top: -.6em; left: .25em; 
border-style: groove solid solid; 
border-color: gray transparent black; 
transform: rotate(60deg); 
-webkit-transform: rotate(60deg); 
}
.spanRadio:before {content: ""; 
position: absolute; 
width: .08em; height: .08em; 
background-color: black; 
top: -.02em; left: .5em; 
border-radius: 50%; 
box-shadow: -.42em .22em 0 black, -.42em .22em 0 .025em white, 
.062em .22em 0 black, .062em .22em 0 .025em white;
}
</style>
<p><span class=spanRadio></span> Radio. [&#128251; (&amp;#128251;), símbolos varios y pictogramas'radio-receptor'.]</p>


<style type="text/css"> /* 19/Jul/2014 11:40 */
.spanPote {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .55em; height: .55em; 
back ground-color: white; 
border-color: transparent; 
border-style: solid; 
border-width: .1em .14em 0 .06em; 
border-radius: 100%; 
background-image: radial-gradient(black, black .21em, white .22em, white .25em, transparent .26em, transparent 110%), 
radial-gradient(circle at bottom, white, white .65em, transparent .66em, transparent 100%), 
linear-gradient(transparent, transparent 42%, black 45%, black 52%, transparent 55%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 35%, black 38%, black 45%, transparent 48%, transparent 100%), 
linear-gradient(40deg, transparent, transparent 38%, black 41%, black 45%, transparent 48%, transparent 100%), 
linear-gradient(65deg, transparent, transparent 38%, black 41%, black 45%, transparent 48%, transparent 100%), 
linear-gradient(125deg, transparent, transparent 38%, black 41%, black 45%, transparent 48%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 38%, black 41%, black 45%, transparent 48%, transparent 100%); 
background-size: 100% 100%, 1em 1em, .8em .8em, .8em .8em, .8em .8em, .8em .8em, .8em .8em, .8em .8em; 
background-repeat: no-repeat; 
background-position: 0 0, -.15em -.0em, -.05em -.13em, -.03em -.13em, -.05em -.13em, -.05em -.13em, -.05em -.13em, -.03em -.11em; 
background-clip: content-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box; 
}
.spanPote::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .33em; top: .2em; 
background-color: white; 
border-radius: 100%; 
}
</style>
<p><span class=spanPote></span> Potentiometer 1. Volume Control. [&#127899; (&amp;#127899;), símbolos varios y pictogramas 'perillas de control'.]</p>


<style type="text/css"> /* 23/Mar/2016 18:36 */
.spanPote2 {position: relative; 
display: inline-block; 
margin: 0 .5em 0 .7em; 
width: 1.3em; height: .34em; 
border: inset .05em grey; 
border-radius: .08em; 
background-image: linear-gradient(black, black), 
linear-gradient(350deg, dimgrey 48%, silver 52%); 
background-size: 90% 16%, 100% 100%; 
background-repeat: no-repeat; 
background-position: center center; 
}
.spanPote2::before {content: ""; 
position: absolute; 
width: .026em; height: .24em; 
left: .2em; top: .03em; 
background-color: white; 
border-style: solid; 
border-width: .03em .06em; 
border-color: black; 
border-radius: .03em; 
}
</style>
<p><span class=spanPote2></span> Potentiometer 2. [&#127898; (&amp;#127898;), símbolos varios y pictogramas 'control deslizante'.]</p>


<style type="text/css">
.spanMic {display: inline-block; 
position: relative; 
width: .2em; height: .4em; 
border-radius: .1em; 
margin: auto 1.25em .4em; 
background-color: black; 
}
.spanMic:after {content: ""; 
position: absolute; 
width: .3em; height: .2em; 
border-radius: 0 0 50% 50%; 
border-width: 0 .05em .05em; 
top: .25em; left: -.1em; 
border-style: solid; 
border-color: transparent black black; 
}
.spanMic:before {content: ""; 
position: absolute; 
width: .05em; height: .15em; 
background-color: black; 
bottom: -.25em; left: .07em; 
}
</style>
<p><span class=spanMic></span> Microphone. [&#127908; (&amp;#127908;), símbolos varios y pictogramas'micrófono'.]</p>


<style type="text/css">
.spanHeadPhones {position: relative; 
margin: auto .95em .2em; 
display: inline-block; 
width: .6em; height: .6em; 
border-width: .1em .1em 0; 
border-style: solid; 
border-color: black; 
border-radius: 50% 50% 0 0; 
}
.spanHeadPhones:before {content: ""; 
position: absolute; 
width: .2em; 
height: .4em; 
background-color: black; 
left: -.2em; top: .3em; 
border-radius: 50% 0 0 50%; 
}
.spanHeadPhones:after {content: ""; 
position: absolute; 
width: .2em; height: .4em; 
background-color: black; 
left: .6em; top: .3em; 
border-radius: 0 50% 50% 0; 
}
</style>
<p><span class=spanHeadPhones></span> Head Phones. [&#127911; (&amp;#127911;), símbolos varios y pictogramas'auriculares'.]</p>


<style type="text/css">
.spanMusic {position: relative; 
width: .4em; height: .4em; 
border-width: .15em .05em 0; 
border-style: solid; 
border-color: black; 
margin: auto 1.1em .3em; 
display: inline-block; 
}
.spanMusic:before {content: ""; 
position: absolute; 
width: .25em; height: .25em; 
background-color: black; 
left: -.25em; top: .3em; 
border-radius: 50%; 
}
.spanMusic:after {content: ""; 
position: absolute; 
width: .25em; height: .25em; 
background-color: black; 
left: .2em; top: .28em; 
border-radius: 50%; 
}
</style>
<p><span class=spanMusic></span> Eighth Notes (Music). [&#127900; (&amp;#127900;), símbolos varios y pictogramas 'nota musical';&#9835; (&amp;#9835;), símbolos varios 'corcheas'; &#127925; (&amp;#127925;), símbolos varios y pictogramas 'nota musical'.]</p>


<style type="text/css">
.spanTwoWaySpeaker{display: inline-block; 
margin: auto 1.05em 0; 
width: .5em; 
height: .7em; 
background-color: black; 
border: .05em solid black; 
border-radius: .1em; 
}
.spanTwoWaySpeaker:before {content: ""; 
display: block; 
width: .12em; 
height: .12em; 
margin: .03em auto 0; 
border-radius: 50%; 
border: .05em solid white; 
}
.spanTwoWaySpeaker:after {content: ""; 
display: block; 
width: .15em; 
height: .15em; 
margin: .05em auto 0; 
border-radius: 50%; 
border: .125em double white; 
}
</style>
<p><span class=spanTwoWaySpeaker></span> Two Way Speaker. ['baffle de dos vías'.]</p>


<style type="text/css"> /* 25/Abr/2015 22:07 */
.spanShredderPaper {position: relative; 
display: inline-block; 
margin: 0 .85em .2em .9em; 
width: .8em; height: .23em; 
background-color: silver; 
border: solid .025em dimgrey; 
border-radius: .06em; 
}
.spanShredderPaper::before {content: ""; 
position: absolute; 
width: .4em; height: .55em; 
left: .15em; top: -.18em; 
background-color: white; 
border: solid .025em grey; 
border-bottom-style: dotted; 
background-image: 
linear-gradient(to right, white, white .035em, grey .035em, grey .05em); 
background-size: .05em .3em; 
background-repeat: repeat-x; 
background-position: left bottom; 
}
.spanShredderPaper::after {content: ""; 
position: absolute; 
width: inherit; height: 70%; 
left: 0; top: 0; 
background-color: silver; 
border-radius: .06em .06em 0 0; 
background-image: linear-gradient(dimgrey, dimgrey), 
radial-gradient(ellipse at bottom, dimgrey, dimgrey 70%, silver 70%, silver 100%), 
radial-gradient(circle, white, black .025em, black .045em, silver .05em, silver 100%); 
background-size: .54em .04em, .54em .08em, .1em .1em; 
background-repeat: no-repeat; 
background-position: .1em 0, left .1em bottom 0, right .05em top .06em; 
}
</style>
<p><span class=spanShredderPaper></span> Shredder Paper. ['destructor de documentos'.]</p>


<style type="text/css">
.spanKeyboard1{position: relative; 
display: inline-block; 
margin: auto .8em .25em; 
width: 1em; 
height: .45em; 
background-color: black; 
border: .01em solid black; 
border-radius: .1em; 
}
.spanKeyboard1:before {content: ""; 
position: absolute; 
display: block; 
width: .05em; 
height: .05em; 
left: .14em; 
top: .1em; 
background-color: white; 
border-collapse: separate; 
box-shadow: .1em 0 white, .2em 0 white, .3em 0 white, .4em 0 white, 
.5em 0 white, .6em 0 0 0 white, .7em 0 white, 0 .1em white, .1em .1em white, 
.2em .1em white, .3em .1em white, .4em .1em white, .5em .1em white, 
.6em .1em white, .7em .1em white, 0 .2em white, .1em .2em white, 
.6em .2em white, .7em .2em white; 
}
.spanKeyboard1:after {content: ""; 
position: absolute; 
display: block; 
width: .35em; 
height: .05em; 
left: .33em; 
top: .3em; 
background-color: white; 
}
</style>
<p><span class=spanKeyboard1></span> Keyboard 1 (Computer). [&#9000; (&amp;#9000;), técnicos varios 'teclado alfanumérico'.]</p>


<style type="text/css"> /*29/Sep/2014 16:15*/
.spanKeyboard2{position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: .9em; height: .4em; 
background-color: lime; 
border: .1em solid black; 
border-radius: .1em; 
background-image: 
repeating-linear-gradient(transparent, transparent .06em, black .06em, black .1em), 
repeating-linear-gradient(90deg, white, white .06em, black .06em, black .1em); 
background-position: .02em .02em; 
background-clip: content-box; 
}
.spanKeyboard2:before {content: ""; 
position: absolute; 
width: .35em; height: .055em; 
left: .31em; top: .335em; 
background-color: white; 
}
.spanKeyboard2:after {content: ""; 
position: absolute;
width: .4em; height: .3em; 
top: -.2em; left: .7em;
border-style: solid; 
border-width: .05em .05em 0 .05em;
border-color: black; 
border-radius: .2em .2em 0 0; 
z-index: -1; 
}
</style>
<p><span class=spanKeyboard2></span> Keyboard 2 (Computer). </p>


<style type="text/css">
.spanMouse1{position: relative; 
display: inline-block; 
margin: auto 1.1em .2em; 
width: .42em; 
height: .6em; 
background-color: black; 
border-radius: .15em .15em .2em .2em; 
}
.spanMouse1:after {content: ""; 
position: absolute; 
display: block; 
width: 20%; 
height: .2em; 
top: .07em; 
left: 41.5%;
background-color: white; 
border-radius: .05em; 
}
.spanMouse1:before {content: ""; 
position: absolute;
display: block; 
width: .025em; 
height: .32em; 
top: .04em; 
left: .02em;
border-style: solid; 
border-width: 0 .19em .025em;
border-color: white black; 
border-radius: 50% 50% 0 0; 
background-color: white; 
}
</style>
<p><span class=spanMouse1></span> Mouse 1 (Computer). ['maus, ratón'.]</p>


<style type="text/css"> /*29/Sep/2014 14:05*/
.spanMouse2{position: relative; 
display: inline-block; 
margin: 0 1.2em .1em; 
width: .03em; height: .29em; 
background-color: white; 
border-style: solid; 
border-color: black; 
border-width: 0 .15em .2em; 
border-radius: .15em .15em .2em .2em; 
}
.spanMouse2:after {content: ""; 
position: absolute; 
display: block; 
width: .06em; height: .17em; 
top: .03em; left: -100%; 
background-color: black; 
border: solid .025em white;
border-radius: .05em; 
}
.spanMouse2:before {content: ""; 
position: absolute;
width: .3em; height: .3em; 
top: -.2em; left: 0;
border-style: solid; 
border-width: .05em .05em 0 .05em;
border-color: black; 
border-radius: 50% 50% 0 0; 
}
</style>
<p><span class=spanMouse2></span> Mouse 2 (Computer).</p>


<style type="text/css">
.spanComputerScreen{position: relative; 
display: inline-block; 
margin: auto .95em .2em; 
width: .7em; height: .45em; 
background-color: transparent; 
border: .08em solid black; 
border-bottom-width: .12em; 
border-radius: .06em; 
}
.spanComputerScreen:after {content: ""; 
position: absolute; 
width: .06em; height: .06em; 
top: .48em; left: .57em;
background-color: red; 
border-radius: 50%; 
}
.spanComputerScreen:before {content: ""; 
position: absolute;
width: .2em; height: .06em; 
top: .56em; left: .085em;
border-style: solid; 
border-width: 0 .19em .07em;
border-color: black white; 
background-color: black; 
}
</style>
<p><span class=spanComputerScreen></span> Screen (Computer). [&#9114; (&amp;#9114;), técnicos varios 'monitor, pantalla de computadora'; &#8418; (&amp;#8418;), marcas diacríticas combinables para símbolos 'pantalla combinable'.]</p>


<style type="text/css"> /* 6/Jul/2014 15:30 */
.spanPrinter {position: relative; 
display: inline-block; 
margin: 0 1.05em -.1em; 
width: .5em; height: .8em; 
background-color: white; 
border: solid .04em grey; 
background-image: repeating-linear-gradient(to top, transparent, transparent 25%, dimgrey 25%, dimgrey 38%); 
background-size: 80% 40%; 
background-repeat: no-repeat; 
background-position: center bottom 0;
}
.spanPrinter::before {content: ""; 
position: absolute; 
width: .585em; height: .22em; 
left: -.24em; top: .18em; 
border-color: black black transparent; 
border-style: solid; 
border-width: .25em .2em 0; 
border-radius: .1em; 
box-shadow: 0 -.05em 0 0 white; 
}
.spanPrinter::after {content: ""; 
position: absolute; 
width: .06em; height: .06em; 
right: -.17em; top: .26em; 
background-color: black; 
border: solid .036em white; 
border-radius: 50%; 
}
</style>
<p><span class=spanPrinter></span> Printer. [&#128424; (&amp;#128424;), símbolos varios y pictogramas 'impresora'; &#128438; (&amp;#128438;), símbolos varios y pictogramas 'ícono de impresión'.]</p>


<style type="text/css"> /* 16/Jul/2014 12:39 */
.spanIC {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .52em; height: .52em; 
border: solid .1em transparent; 
border-radius: .2em; 
box-shadow: inset 0 0 0 .03em white; 
background-image: linear-gradient(black, black), 
repeating-linear-gradient(to top, black 0, black .04em, transparent .04em, transparent .08em), 
repeating-linear-gradient(to left, black 0, black .04em, transparent .04em, transparent .08em); 
background-size: 100% 100%, .8em .275em, .275em .8em; 
background-repeat: no-repeat; 
background-position: 0 0, -.12em .12em, .12em -.12em; 
background-clip: content-box, border-box, border-box; 
}
</style>
<p><span class=spanIC></span> CPU. Integrated Circuit 1. ['circuito integrado'.]</p>


<style type="text/css"> /* 19/Jun/2015 10:45 */
.spanIntegratedCircuit {position: relative; 
display: inline-block; 
margin: 0 .75em .06em; 
width: 1.12em; height: .4em; 
border-style: solid; 
border-width: .06em 0; 
border-color: transparent; 
background-image: 
radial-gradient(circle, black .06em, transparent .065em), 
linear-gradient(#444444, #444444), 
repeating-linear-gradient(90deg, darkgrey, darkgrey .08em, transparent .08em, transparent .16em); 
background-size: .15em .15em, 100% 100%, 1.06em 100%; 
background-repeat: no-repeat; 
background-position: .12em center, 0 0, .07em 0; 
background-clip: content-box, content-box, border-box; 
background-origin: content-box, content-box, border-box; 
}
</style>
<p><span class=spanIntegratedCircuit></span> Integrated Circuit 2. ['chip de circuito integrado'.]</p>


<style type="text/css"> /* 29/Ago/2015 23:18 */
.spanUSBPlug {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .4em; height: .31em; 
line-height: 0; 
background-color: black; 
border-radius: 0 0 .2em .2em / 0 0 .14em .14em; 
transform: rotate(50deg); 
}
.spanUSBPlug::before {content: ""; 
position: relative; 
display: block; 
margin: -.24em auto; 
width: .2em; height: .07em; 
border-style: solid; 
border-width: .1em .06em; 
border-color: black; 
background: linear-gradient(black, black) center center no-repeat; 
background-size: .06em 100%; 
}
.spanUSBPlug::after {content: ""; 
position: relative; 
display: block; 
margin: .48em auto; 
width: .144em; height: .2em; 
background-color: black; 
}
</style>
<p><span class=spanUSBPlug></span> USB Plug. ['conector USB'.]</p>


<style type="text/css"> /* 8/Nov/2014 10:25 */
.spanRJConnector {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .5em; height: .5em; 
background-color: darkgrey; 
border: solid .07em black; 
border-radius: .14em; 
}
.spanRJConnector::before {content: ""; 
position: absolute; 
width: .1em; height: .04em; 
left: .15em; top: .05em; 
background-color: black; 
border-style: solid; 
border-width: .05em .05em 0; 
border-color: darkgrey; 
bor der-radius: .04em; 
box-shadow: 0 .05em 0 0 black; 
}
.spanRJConnector::after {content: ""; 
position: absolute; 
width: .34em; height: .245em; 
left: .08em; top: .17em; 
border-radius: .04em; 
background: 
repeating-linear-gradient(to right, darkgrey, darkgrey .025em, black .05em, black .075em), black; 
background-size: .24em .1em; 
background-repeat: no-repeat; 
background-position: center bottom; 
}
</style>
<p><span class=spanRJConnector></span> RJ-Connector. ['conector americano tipo RJ'.]</p>


<style type="text/css"> /* 24/Jul/2014 15:12 */
.spanOpHeadset {position: relative; 
display: inline-block; 
margin: 0 1em .2em; 
width: .5em; height: .28em; 
border-color: black  black black; 
border-style: solid; 
border-width: 0 .06em 0 .14em; 
border-radius: .08em 0 .06em .08em; 
}
.spanOpHeadset::before {content: ""; 
position: absolute; 
left: -.06em; top: -.24em; 
width: .53em; height: .53em; 
border-color: black transparent black black; 
border-style: solid; 
border-width: .035em; 
border-radius: .7em .7em .35em .7em; 
transform: rotate(55deg);  
}
.spanOpHeadset::after {content: ""; 
position: absolute; 
width: .1em; height: .06em; 
left: .18em; top: .36em; 
background-color: black; 
border-radius: .03em; 
}
</style>
<p><span class=spanOpHeadset></span> Operator Headset. ['cabezal de operador telefónico'.]</p>


<style type="text/css"> /* 12/Ago/2014 13:32 */
.spanInPhone {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
border-color: transparent transparent transparent black; 
border-style: solid; 
border-width: .1em 0 .1em .18em; 
border-radius: 90% 0 0 90% / 120% 0 0 120%; 
transform: rotate(315deg); 
}
.spanInPhone::before {content: ""; 
position: absolute; 
width: .2em; height: .25em; 
left: -.05em; top: -.1em; 
background-color: black; 
border-radius: .1em .03em .03em .1em; 
box-shadow: 0 .66em 0 0 black; 
}
.spanInPhone::after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .25em; top: .18em; 
border-color: transparent transparent black black; 
border-style: solid; 
border-width: .06em; 
border-radius: .12em 0; 
background-image: 
linear-gradient(135deg, transparent, transparent 40%, black 44%, black 50%, black 50%, black 56%, transparent 60%, transparent 100%); 
background-repeat: no-repeat; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanInPhone></span> Incoming Call Phone. ['llamada entrante de teléfono'.]</p>


<style type="text/css"> /* 12/Ago/2014 13:47 */
.spanOutPhone {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
border-color: transparent transparent transparent black; 
border-style: solid; 
border-width: .1em 0 .1em .18em; 
border-radius: 90% 0 0 90% / 120% 0 0 120%; 
transform: rotate(315deg); 
}
.spanOutPhone::before {content: ""; 
position: absolute; 
width: .2em; height: .25em; 
left: -.05em; top: -.1em; 
background-color: black; 
border-radius: .1em .03em .03em .1em; 
box-shadow: 0 .66em 0 0 black; 
}
.spanOutPhone::after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .23em; top: .18em; 
border-color: black black transparent transparent; 
border-style: solid; 
border-width: .06em; 
border-radius: .12em 0; 
background-image: 
linear-gradient(135deg, transparent, transparent 40%, black 44%, black 50%, black 50%, black 56%, transparent 60%, transparent 100%); 
background-repeat: no-repeat; 
background-clip: border-box; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanOutPhone></span> Outgoing Call Phone. ['llamada saliente de teléfono'.]</p>


<style type="text/css"> /* 12/Ago/2014 14:16 */
.spanRingPhone {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
border-color: transparent transparent transparent black; 
border-style: solid; 
border-width: .1em 0 .1em .18em; 
border-radius: 90% 0 0 90% / 120% 0 0 120%; 
transform: rotate(315deg); 
}
.spanRingPhone::before {content: ""; 
position: absolute; 
width: .2em; height: .25em; 
left: -.05em; top: -.1em; 
background-color: black; 
border-radius: .1em .03em .03em .1em; 
box-shadow: 0 .66em 0 0 black; 
}
.spanRingPhone::after {content: ""; 
position: absolute; 
width: .45em; height: .45em; 
left: .15em; top: .12em; 
border-radius: 0 50% 0 0; 
background-image: 
radial-gradient(circle at bottom left, transparent, transparent 24%, black 26%, black 30%,transparent 32%, transparent 43%, black 45%, black 49%, transparent 52%, transparent 62%, black 64%, black 68%, transparent 70%, transparent 100%); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanRingPhone></span> Ringing Call Phone. ['teléfono sonando'.]</p>


<style type="text/css"> /* 12/Ago/2014 19:06 */
.spanEndPhone {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
border-color: transparent transparent transparent black; 
border-style: solid; 
border-width: .1em 0 .1em .18em; 
border-radius: 90% 0 0 90% / 120% 0 0 120%; 
transform: rotate(315deg); 
}
.spanEndPhone::before {content: ""; 
position: absolute; 
width: .2em; height: .25em; 
left: -.05em; top: -.1em; 
background-color: black; 
border-radius: .1em .03em .03em .1em; 
box-shadow: 0 .66em 0 0 black; 
}
.spanEndPhone::after {content: ""; 
position: absolute; 
width: .06em; height: .9em; 
left: -.05em; top: -.1em; 
border-radius: .1em; 
background-color: black; 
transform: rotate(100deg); 
box-shadow: 0 0 0 .03em white; 
}
/*
.spanEndPhone::after {content: ""; 
position: absolute; 
width: .35em; height: .35em; 
left: .2em; top: .2em; 
border-radius: 100%; 
background-image: 
linear-gradient(86deg, transparent, transparent 40%, black 42%, black 58%,transparent 60%, transparent 100%), 
linear-gradient(6deg, transparent, transparent 40%, black 42%, black 58%,transparent 60%, transparent 100%); 
}
*/
</style>
<p><span class=spanEndPhone></span> End Call Phone. ['fin llamada de teléfono'.]</p>


<style type="text/css"> /* 29/Nov/2014 16:58 */
.spanProgressPhone {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .7em; 
border-color: transparent transparent transparent black; 
border-style: solid; 
border-width: .1em 0 .1em .18em; 
border-radius: 90% 0 0 90% / 120% 0 0 120%; 
transform: rotate(315deg); 
}
.spanProgressPhone::before {content: ""; 
position: absolute; 
width: .21em; height: .25em; 
left: -.05em; top: -.1em; 
background-color: black; 
border-radius: .1em .03em .03em .1em; 
box-shadow: 0 .66em 0 0 black; 
}
.spanProgressPhone::after {content: ""; 
position: absolute; 
width: .22em; height: .23em; 
left: .34em; top: .14em; 
background-color: dimgray; 
border-color: transparent dimgray; 
border-style: solid; 
border-width: 0 0 .12em .15em; 
background-clip: content-box; 
transform: rotate(45deg); 
transform-origin: 0 0; 
}
</style>
<p><span class=spanProgressPhone></span> In Progress Call Phone. ['llamada de teléfono en curso', 'conversación telefónica'.]</p>


<style type="text/css"> /* 6/Oct/2014 21:27 */
.spanCashRegister {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .65em; height: .35em; 
border-style: solid; 
border-width: 0 .08em .08em; 
border-color: black transparent; 
background: linear-gradient(100deg, transparent, transparent .1em, black .13em, black 100%), 
linear-gradient(260deg, transparent, transparent .1em, black .13em, black 100%) right 0; 
background-origin: border-box; 
background-size: 51% 100%; 
background-repeat: no-repeat; 
box-shadow: 0 .1em 0 -.04em grey, 0 .11em 0 0 black; 
}
.spanCashRegister::before {content: ""; 
position: absolute; 
width: .22em; height: .12em; 
left: .35em; top: -.17em; 
background-image: linear-gradient(silver, silver), 
linear-gradient(90deg, transparent, transparent 30%, black 30%, black 70%, transparent 70%, transparent 100%); 
background-clip: content-box, border-box; 
border: none; 
border-bottom: solid .05em transparent; 
border-radius: .03em; 
box-shadow: inset 0 0 0 .038em black, -.26em .23em 0 -.02em silver; 
}
.spanCashRegister::after {content: ""; 
position: absolute; 
width: .25em; height: .22em; 
right: .06em; top: .1em; 
background-image: 
repeating-linear-gradient(black, black .03em, transparent .03em, transparent .06em), 
repeating-linear-gradient(90deg, white, white .03em, black .03em, black .06em); 
}
</style>
<p><span class=spanCashRegister></span> Cash Register. ['caja registradora'.]</p>






<hr>






<style type="text/css">
.spanAtom{position: relative; 
display: inline-block; 
margin: 0 .85em .3em; 
width: .2em; height: .2em; 
background-color: black; 
border-style: solid; 
border-color: white; 
border-width: .05em .4em; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: 0 0 0 .04em black;
}
.spanAtom:before , .spanAtom:after {content: ""; 
position: absolute; 
display: block; 
width: .2em; height: .2em; 
left: -.4em; top: -.05em; 
border-radius: 50%; 
border-width: .05em .4em; 
border-color: transparent; 
border-style: solid;
border-collapse: separate; 
box-shadow: 0 0 0 .04em black;
-webkit-transform: rotate(240deg); 
transform: rotate(240deg); 
}
.spanAtom:after {
-webkit-transform: rotate(120deg); 
transform: rotate(120deg); 
}
</style>
<p><span class=spanAtom></span> Atom (Nuclear Energy). [&#9883; (&amp;#9883;), símbolos varios 'átomo'.]</p>


<style type="text/css">
.spanBiohazard {position: relative; 
display: inline-block; 
margin: auto 1.15em .5em; 
width: .42em; height: .42em; 
background-color: transparent; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: 0 .08em 0 .06em black, .35em .45em 0 .01em white, 
.28em .42em 0 .06em black, -.28em .45em 0 .01em white, 
-.22em .42em 0 .06em black; 
}
.spanBiohazard:before {content: ""; 
position: absolute; 
width: .42em; height: .42em; 
left: -.02em; top: .28em; 
background-color: transparent; 
border-radius: 50%; 
border: .05em solid black; 
}
.spanBiohazard:after {content: ""; 
position: absolute; 
width: .23em; height: .23em; 
left: .12em; top: .43em; 
background-color: white; 
border-radius: 50%; 
}
</style>
<p><span class=spanBiohazard></span> Biohazard. [&#9763; (&amp;#9763;), símbolos varios 'riesgo biológico'.]</p>


<style type="text/css">
.spanRadioactive {position: relative; 
display: inline-block; 
margin: auto 1.05em; 
width: .2em; height: .2em; 
border-style: solid; 
border-color: transparent transparent black transparent; 
border-width: .4em .22em; 
border-radius: 60% 50% / 40% 50%; 
}
.spanRadioactive:before , .spanRadioactive:after {content: ""; 
position: absolute; 
left: -.2em; top: -.38em; 
width: .2em; height: .2em; 
border-style: solid; 
border-color: black transparent transparent; 
border-width: .4em .22em; 
border-radius: 60% 50% / 40% 50%; 
-webkit-transform: rotate(60deg); 
-ms-transform: rotate(60deg); 
transform: rotate(60deg); 
}
.spanRadioactive:after {
-webkit-transform: rotate(300deg); 
transform: rotate(300deg); 
}
</style>
<p><span class=spanRadioactive></span> Radioactive. [&#9762; (&amp;#9762;), símbolos varios 'radiación'.]</p>


<style type="text/css"> /* 4/Ago/2017 22:16 */
.spanChemicalWeapon {position: relative; 
display: inline-block; 
margin: 0 .85em -.1em; 
width: .85em; height: .85em; 
border: solid .06em black; 
border-radius: 100%; 
background: 
radial-gradient(circle, black .11em, white .12em, white .13em, transparent .15em), 
radial-gradient(circle, black 70%, transparent 75%) .07em .47em, 
radial-gradient(circle, black 70%, transparent 75%) .6em .47em, 
radial-gradient(circle, black 70%, transparent 75%) center .03em, 
linear-gradient(90deg, white .03em, black .03em, black .13em, white .13em) center top, 
linear-gradient(-30deg, transparent .32em, white .35em, black .36em, black .46em, white .47em, transparent .5em) left bottom, 
linear-gradient(30deg, transparent .32em, white .35em, black .36em, black .46em, white .47em, transparent .5em) right bottom, 
radial-gradient(circle, black .18em, white .2em); 
background-size:100% 100%, .2em .2em, .2em .2em, .2em .2em, .16em 50%, .5em .5em, .5em .5em, 100% 100%, 100% .4em; 
background-repeat: no-repeat; 
box-shadow: inset 0 0 0 .04em white; 
}
</style>
<p><span class=spanChemicalWeapon></span> Chemical Weapon. ['arma química'.]</p>


<style type="text/css">
.spanPeace{position: relative; 
display: inline-block; 
margin: auto .9em; 
width: .7em; height: .7em; 
border-style: solid; 
border-color: black; 
border-width: .1em; 
border-radius: 50%; 
}
.spanPeace:before {content: ""; 
position: absolute; 
width: .1em; height: .7em; 
left: .3em; top: 0; 
background-color: black; 
}
.spanPeace:after {content: ""; 
position: absolute; 
width: .35em; height: .35em; 
left: .068em; top: .35em; 
border-radius: 0 .05em;
border-width: .1em; 
border-color: black transparent transparent black; 
border-style: solid;
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanPeace></span> Peace. [&#9774; (&amp;#9774;), símbolos varios 'paz'.]</p>


<style type="text/css"> /* 6/Jun/2015 22:50 */
.spanHammerAndSickle {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .5em; height: .5em; 
border-style: solid; 
border-width: .02em .08em .1em .12em; 
border-color: black black black transparent; 
border-radius: 110% 105% 100% 100%; 
}
.spanHammerAndSickle::before {content: ""; 
position: absolute; 
width: .12em; height: .3em; 
left: -.1em; top: .45em; 
background-color: black; 
border-radius: .05em 0 40% 40%; 
transform: rotate(45deg); 
}
.spanHammerAndSickle::after {content: ""; 
position: absolute; 
width: .47em; height: .1em; 
left: .23em; top: .365em; 
background-color: black; 
border-style: solid; 
border-width: .08em 0; 
border-color: transparent; 
border-radius: 0 .08em .08em 0; 
background-clip: content-box; 
box-shadow: -.12em 0 0 -.02em black; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanHammerAndSickle></span> Hammer And Sickle. [&#9773; (&amp;#9773;), símbolos varios 'martillo y hoz'.]</p>


<style type="text/css"> /* 31/Jul/2014 22:29 */
.spanDanger {position: relative; 
display: inline-block; 
margin: 0 1.4em .5em 1.2em; 
width: .13em; height: .13em; 
background-color: white; 
border-radius: 100%; 
box-shadow: .22em 0 0 0 white, .11em .1em 0 -.03em white, .11em .025em 0 .16em black, 
.11em .239em 0 -.018em black, .03em .239em 0 -.02em black, .19em .239em 0 -.02em black, 
-.2em .22em 0 0 black, .43em .22em 0 0 black, 
-.23em .49em 0 0 black, .45em .49em 0 0 black, 
-.24em .3em 0 0 black, .47em .3em 0 0 black, 
-.2em .58em 0 0 black, .43em .58em 0 0 black; 
}
.spanDanger::before , .spanDanger::after {content: ""; 
position: absolute; 
width: .7em; height: .1em; 
left: -.16em; top: .43em; 
background-color: black; 
border-radius: .2em; 
transform: rotate(20deg); 
}
.spanDanger::after {transform: rotate(340deg); 
}
</style>
<p><span class=spanDanger></span> Skull And Crossbones (Danger). [&#128369; (&amp;#128369;), símbolos varios y pictogramas 'calavera con huesos cruzados', 'peligro'.]</p>


<style type="text/css"> /* 21/Abr/2016 14:00 */
.spanFuckYou {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.2em; 
width: .38em; height: .35em; 
border-radius: .1em .1em .3em .3em / .15em .1em .5em .5em; 
background-color: black; 
background-size: 100% 150%; 
}
.spanFuckYou::before {content: ""; 
position: absolute; 
width: .08em; height: .3em; 
left: .11em; top: -.27em; 
background-color: black; 
border-radius: .06em; 
box-shadow: -.09em .185em 0 0 black, .09em .18em 0 0 black, .175em .21em 0 0 black; 
}
.spanFuckYou::after {content: ""; 
position: absolute; 
width: .08em; height: .27em; 
left: -.06em; top: 0; 
background-color: black; 
border-radius: .05em .1em 0 100%; 
transform: rotate(330deg); 
}
</style>
<p><span class=spanFuckYou></span> Fuckyou. [&#128405; (&amp;#128405;), símbolos varios y pictogramas 'dorso de mano con dedo medio extendido'.]</p>


<style type="text/css"> /* 24/Ene/2016 18:40 */
.spanIron200 {position: relative; 
display: inline-block; 
margin: 0 .7em -.05em .8em; 
width: .9em; height: .55em; 
border-style: solid; 
border-width: .14em .1em .1em .1em; 
border-color: black black black transparent; 
border-radius: .5em .3em 0 0 / .2em .6em 0 0; 
}
.spanIron200::before {content: ""; 
position: absolute; 
width: 1em; height: .27em; 
left: -.2em; bottom: -.1em; 
border-style: inherit; 
border-width: .1em 0 .1em .1em; 
border-color: black; 
border-top-left-radius: 70% 100%; 
}
.spanIron200::after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .2em; top: .35em; 
background-color: black; 
border-radius: 100%; 
box-shadow: .2em 0 0 0 black, .4em 0 0 0 black; 
}
</style>
<p><span class=spanIron200></span> Ironing 200°C. ['planchado a 200°C'.]</p>


<style type="text/css"> /* 24/Ene/2016 18:43 */
.spanIron150 {position: relative; 
display: inline-block; 
margin: 0 .7em -.05em .8em; 
width: .9em; height: .55em; 
border-style: solid; 
border-width: .14em .1em .1em .1em; 
border-color: black black black transparent; 
border-radius: .5em .3em 0 0 / .2em .6em 0 0; 
}
.spanIron150::before {content: ""; 
position: absolute; 
width: 1em; height: .27em; 
left: -.2em; bottom: -.1em; 
border-style: inherit; 
border-width: .1em 0 .1em .1em; 
border-color: black; 
border-top-left-radius: 70% 100%; 
}
.spanIron150::after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .25em; top: .35em; 
background-color: black; 
border-radius: 100%; 
box-shadow: .3em 0 0 0 black; 
}
</style>
<p><span class=spanIron150></span> Ironing 150°C. ['planchado a 150°C'.]</p>


<style type="text/css"> /* 24/Ene/2016 18:45 */
.spanIron110 {position: relative; 
display: inline-block; 
margin: 0 .7em -.05em .8em; 
width: .9em; height: .55em; 
border-style: solid; 
border-width: .14em .1em .1em .1em; 
border-color: black black black transparent; 
border-radius: .5em .3em 0 0 / .2em .6em 0 0; 
}
.spanIron110::before {content: ""; 
position: absolute; 
width: 1em; height: .27em; 
left: -.2em; bottom: -.1em; 
border-style: inherit; 
border-width: .1em 0 .1em .1em; 
border-color: black; 
border-top-left-radius: 70% 100%; 
}
.spanIron110::after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .4em; top: .35em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanIron110></span> Ironing 110°C. ['planchado a 110°C'.]</p>


<style type="text/css"> /* 24/Ene/2016 19:00 */
.spanNotIron {position: relative; 
display: inline-block; 
margin: 0 .7em -.05em .8em; 
width: .9em; height: .55em; 
border-style: solid; 
border-width: .14em .1em .1em .1em; 
border-color: black black black transparent; 
border-radius: .5em .3em 0 0 / .2em .6em 0 0; 
}
.spanNotIron::before {content: ""; 
position: absolute; 
width: 1em; height: .27em; 
left: -.2em; bottom: -.1em; 
border-style: inherit; 
border-width: .1em 0 .1em .1em; 
border-color: black; 
border-top-left-radius: 70% 100%; 
}
.spanNotIron::after {content: ""; 
position: absolute; 
width: 1.4em; height: 1.4em; 
left: -.24em; top: -.4em; 
background-image: 
linear-gradient(black, black), linear-gradient(black, black); 
background-size: 5% 100%, 100% 5%; 
background-repeat: no-repeat; 
background-position: center 0, 0 center; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanNotIron></span> Do Not Iron. ['no planchar'.]</p>


<style type="text/css">
.spanNot{position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: 1em; height: auto; 
color: black; 
font-size: .8em; 
text-align: center; 
background-color: lime; 
}
.spanNot:before {content: ""; 
position: absolute; 
width: 1em; height: 1em; 
left: -.14em; top: -.05em; 
border-style: solid; 
border-color: rgba(255,0,0,.8); 
border-width: .14em; 
border-radius: 50%; 
}
.spanNot:after {content: ""; 
position: absolute; 
width: .14em; height: 1.1em; 
left: .435em; top: -.01em; 
background-color: rgba(255,0,0,.8); 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanNot title="El caracter de relleno está puesto como referencia."
style="cursor: help">?</span> Not Allowed, Prohibition. [&#8416; (&amp;#8416;), marcas combinables para símbolo 'barra inclinada encerrada en círculo combinables'; &#9033; (&amp;#9033;), técnicos varios 'barra inclinada en círculo (APL)'.]</p>


<style type="text/css">
.spanCrossMark{position: relative; 
display: inline-block; 
margin: 0 .7em 0 .85em; 
width: 1.2em; height: 1.2em; 
color: red; 
font-size: 100%; 
text-align: center; 
background-color: lime; 
}
.spanCrossMark:before {content: ""; 
position: absolute; 
width: 20%; height: 1em; 
left: 40%; top: 10%; 
background-color: black; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanCrossMark:after {content: ""; 
position: absolute; 
width: 20%; height: 1em; 
left: 40%; top: 10%; 
background-color: black; 
-webkit-transform: rotate(-45deg); 
transform: rotate(-45deg); 
}
</style>
<p><span class=spanCrossMark title="El caracter y el fondo de relleno 
están puestos como referencia." style="cursor: help">?</span> 
Disabled, Prohibition. [&#10060; (&amp;#10060;), otros símbolos 'marca en cruz'; &#10006; (&amp;#10006;), otros símbolos 'multiplicación', &#10007; (&amp;#10007;), otros símbolos 'balota, voto tachado'.]</p>

<style type="text/css">
.spanSilence{position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .8em; height: .8em; 
border: .05em solid black; 
border-radius: 50%; 
}
.spanSilence:before {content: ""; 
position: absolute; 
background-color: black; 
width: .15em; height: .2em; 
left: .21em; top: .15em; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: .23em 0 0 0 black; 
}
.spanSilence:after {content: ""; 
position: absolute; 
width: .13em; height: .13em; 
left: .36em; top: .34em; 
background-color: white; 
border-collapse: separate; 
box-shadow: .24em 0 0 0 white, .24em .24em 0 0 white, 
0 .24em 0 0 white, .12em .12em 0 .12em black; 
-webkit-transform-origin: left; 
transform-origin: left; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
z-index: -1; 
}
</style>
<p><span class=spanSilence></span> Silence, Don't talk. ['No hable'.]</p>


<style type="text/css">
.spanStop {background-color: red; 
display: inline-block; 
position: relative; 
width: .8em; height: .8em; 
margin: auto 1em .0em; 
border-radius: 50%; 
}
.spanStop:before {content: ""; 
position: absolute; 
top: 45%; left:8%; 
display: block; 
height: .15em; width: 85%; 
background-color: white; 
}
</style>
<p><span class=spanStop></span> Stop. No Entry.[&#9940; (&amp;#9940;), símbolos varios 'pare' o 'no pase'.]</p>


<style type="text/css"> /* 18/Ene/2015 15:30 */
.spanNoSmoking {position: relative; 
display: inline-block; 
margin: 0 1.1em .2em; 
width: .35em; height: .1em; 
background-color: black; 
border-style: solid solid solid groove; 
border-width: 0 .025em 0 .08em; 
border-color: black white black grey; 
box-shadow: .18em 0 0 0 black; 
background-clip: content-box; 
}
.spanNoSmoking::before {content: ""; 
position: absolute; 
width: .8em; height: .8em; 
left: -.25em; top: -.52em; 
background-color: ; 
border: solid .08em red; 
border-radius: 100%; 
background-image: 
linear-gradient(40deg, transparent, transparent 43%, red 45%, red 50%, transparent 52%, transparent 100%); 
}
.spanNoSmoking::after {content: ""; 
position: absolute; 
width: .4em; height: .3em; 
left: -.08em; top: -.31em; 
background-image: 
radial-gradient(ellipse at right bottom, transparent, transparent .11em, rgba(0,0,0,.5) .11em, rgba(0,0,0,.5) .14em, transparent .15em, transparent .16em, rgba(0,0,0,.5) .17em, rgba(0,0,0,.5) .2em, transparent .2em, transparent 100%), 
radial-gradient(ellipse at left top, transparent, transparent .11em, rgba(0,0,0,.5) .11em, rgba(0,0,0,.5) .14em, transparent .15em, transparent .16em, rgba(0,0,0,.5) .17em, rgba(0,0,0,.5) .2em, transparent .2em, transparent 100%); 
background-size: .2em .2em; 
background-repeat: no-repeat; 
background-position: left bottom, right top; 
}
</style>
<p><span class=spanNoSmoking></span> No Smoking. [&#128685; (&amp;#128685;), símbolos de mapas y transporte 'no fumar'.]</p>


<style type="text/css"> /*  */
.spanBarberPole {position: relative; 
display: inline-block; 
margin: 0 1.15em -.02em; 
width: .24em; height: .5em; 
border-style: solid; 
border-width: .05em; 
border-color: black transparent; 
background: 
linear-gradient(to left, rgba(0,0,0,.4), transparent),  
repeating-linear-gradient(38deg, red 0, red .1em, white .11em, white .19em, blue .2em, blue .3em, white .31em, white .39em); 
background-clip: content-box; 
}
.spanBarberPole::before {content: ""; 
position: absolute; 
width: .24em; height: .01em; 
left: -.035em; top: -.14em; 
border-style: double solid solid; 
border-width: .06em .04em .04em; 
border-color: black transparent; 
border-radius: 100% 100% 0 0; 
}
.spanBarberPole::after {content: ""; 
position: absolute; 
width: .26em; height: .01em; 
left: -.035em; top: auto; bottom: -.1em; 
border-style: solid solid double; 
border-width: 0 .04em .06em; 
border-color: black transparent; 
border-radius: 0 0 100% 100%; 
}
</style>
<p><span class=spanBarberPole></span> Barber Pole. [&#128136; (&amp;#128136;), símbolos varios y pictogramas 'barra de barbería'.]</p>


<style type="text/css">
.spanVeterinarian {position: relative; 
display: inline-block; 
background-color: white; 
width: .8em; height: .8em; 
margin: auto .9em; 
border: .08em solid black; 
border-radius: 50%; 
overflow: hidden; 
}
.spanVeterinarian:before {content: ""; 
position: absolute; 
top: .1em; left: .1em;
width: .6em; height: .6em; 
background-color: blue; 
}
.spanVeterinarian:after {content: ""; 
position: absolute; 
top: 0; left: 0;
width: .28em; height: .28em; 
background-color: white; 
box-shadow: .52em 0 0 0 white, 0 .52em 0 0 white, .52em .52em 0 0 white; 
}
</style>
<p><span class=spanVeterinarian></span> Veterinarian. ['veterinario, clínica veterinaria'.]</p>


<style type="text/css">
.spanNursing {position: relative; 
display: inline-block; 
background-color: white; 
width: .8em; height: .8em; 
margin: auto .9em; 
border: .08em solid black; 
border-radius: 50%; 
overflow: hidden; 
}
.spanNursing:before {content: ""; 
position: absolute; 
top: .1em; left: .1em;
width: .6em; height: .6em; 
background-color: red; 
}
.spanNursing:after {content: ""; 
position: absolute; 
top: 0; left: 0;
width: .28em; height: .28em; 
background-color: white; 
box-shadow: .52em 0 0 0 white, 0 .52em 0 0 white, .52em .52em 0 0 white; 
}
</style>
<p><span class=spanNursing></span> Nursing. ['enfermería, primeros auxilios'.]</p>


<style type="text/css">
.spanMedical {position: relative; 
display: inline-block; 
background-color: white; 
width: .8em; height: .8em; 
margin: auto .9em; 
border: .08em solid black; 
border-radius: 50%; 
overflow: hidden; 
}
.spanMedical:before {content: ""; 
position: absolute; 
top: .1em; left: .1em;
width: .6em; height: .6em; 
background-color: green; 
}
.spanMedical:after {content: ""; 
position: absolute; 
top: 0; left: 0;
width: .28em; height: .28em; 
background-color: white; 
box-shadow: .52em 0 0 0 white, 0 .52em 0 0 white, .52em .52em 0 0 white; 
}
</style>
<p><span class=spanMedical></span> Medical doctor. [&#9960; (&amp;#9960;), símbolos varios 'cruz en escudo'; 
&#127973; (&amp;#127973;), símbolos varios 'médico, hospital'; 
&#10133; (&amp;#10133;), dingbats 'signo de suma grueso'; 
&#10010; (&amp;#10010;), dingbats 'cruz griega gruesa'.]</p>


<style type="text/css"> /* 17/Ago/2014 12:26 */
.spanNurse {position: relative; 
display: inline-block; 
margin: 0 .9em -.16em; 
width: .38em; height: .42em; 
border-color: silver transparent transparent; 
border-style: solid; 
border-width: .25em; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .05em black; 
}
.spanNurse::before {content: ""; 
position: absolute; 
width: .07em; height: .125em; 
left: .12em; top: .245em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .05em .055em .125em .0em; 
border-radius: 0 .06em .1em .1em; 
}
.spanNurse::after {content: ""; 
position: relative; 
display: block; 
margin: -.19em auto; 
width: .15em; height: .15em; 
background-color: black; 
background-image: linear-gradient(silver 0, silver), linear-gradient(silver 0, silver), 
linear-gradient(silver 0, silver), linear-gradient(silver 0, silver); 
background-size: .05em .05em; 
background-repeat: no-repeat; 
background-position: 0 0, top 0 right 0, bottom 0 right 0, bottom 0 left 0; 
}
</style>
<p><span class=spanNurse></span> Nurse Silence. ['enfermera' (silencio).]</p>


<style type="text/css"> /* 17/Abr/2014 13:23 */
.spanAsclepius {position: relative; 
display: inline-block; 
margin: auto 1.15em 0; 
width: .4em; height: .8em; 
background-image: radial-gradient(ellipse at right, transparent 0, transparent .15em, black .155em, black .25em, transparent .255em, transparent 100%), 
radial-gradient(ellipse at left, transparent 0, transparent .1em, black .1em, black .18em, transparent .18em, transparent 100%), 
radial-gradient(ellipse at right, transparent 0, transparent .05em, black .05em, black .12em, transparent .12em, transparent 100%); 
background-size: .37em .25em, .25em .22em, .18em .16em; 
background-repeat: no-repeat; 
background-position: -.085em .18em, .185em .315em, .03em .45em; 
}
.spanAsclepius:before {content: ""; 
position: absolute; 
left: .16em; top: .1em; 
width: 0; height: 0; 
background-color: transparent; 
border-color: black transparent; 
border-style: solid; 
border-width: .7em .06em 0; 
}
.spanAsclepius:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .15em; top: .05em; 
border-color: transparent black black; 
border-style: solid; 
border-width: .05em .07em; 
border-radius: 100%; 
box-shadow: .1em .125em 0 -.015em black; 
}
</style>
<p><span class=spanAsclepius></span> Rod of Asclepius. Staff of Aesculapius. [&#9877; (&amp;#9877;), símbolos varios 'vara de Esculapio'.]</p>


<style type="text/css"> /* 10/May/2014 11:50 */
.spanScale1 {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .5em; height: .55em; 
border-color: transparent transparent black; 
border-style: solid; 
border-width: .05em .1em .1em; 
background-image: linear-gradient(90deg, transparent, transparent .2em, black .2em, black .3em, transparent .3em, transparent 100%), 
linear-gradient(black, black .05em, transparent .05em, transparent 100%); 
background-repeat: repeat-y, repeat-x; 
}
.spanScale1:before, .spanScale1:after {content: ""; 
position: absolute; 
width: .3em; height: .45em; 
left: -.22em; top: 0; 
border-radius: 0 0 .12em .12em; 
background-image: linear-gradient(black, black), 
linear-gradient(72deg, transparent, transparent .1em, black .12em, black .13em, transparent .15em, transparent 100%), 
linear-gradient(-72deg, transparent, transparent .1em, black .12em, black .13em, transparent .15em, transparent 100%); 
background-size: 100% .1em, 100% .35em, 100% .35em; 
background-position: 0 .35em, .15em 0, -.15em 0; 
background-repeat: no-repeat; 
}
.spanScale1:after {
left: .42em; 
}
</style>
<p><span class=spanScale1></span> Scales. Jurisprudence. [&#9878; (&amp;#9878;), símbolos varios 'balanza', 'jurisprudencia'.]</p>


<style type="text/css"> /* 1/Sep/2014 9:32 */
.spanJustice {position: relative; 
display: inline-block; 
margin: 0 1.1em -.08em .9em; 
width: .4em; height: .03em; 
background-color: black; 
border-style: double; 
border-width: 0 .12em .12em; 
border-color: black transparent; 
border-radius: 0 0 .05em .05em; 
background-clip: content-box; 
}
.spanJustice::before {content: ""; 
position: absolute; 
width: .23em; height: .32em; 
left: .2em; top: -.6em; 
background-color: black; 
border-style: solid; 
border-width: .05em; 
border-color: black transparent; 
border-radius: .06em; 
background-clip: content-box; 
box-shadow: inset 0 0 0 .025em white; 
transform: rotate(40deg);
}
.spanJustice::after {content: ""; 
position: absolute; 
width: .5em; height: .085em; 
left: .35em; top: -.25em; 
background-color: black; 
border-radius: .05em; 
transform: rotate(40deg);
}
</style>
<p><span class=spanJustice></span> Gavel (Justice). ['mallete, martillo de juez EUA' (justicia).]</p>


<style type="text/css"> /* 10/Abr/2016 19:05 */
.spanHearingAid {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .4em; height: .55em; 
background-color: white; 
border-style: solid; 
border-width: .08em .1em .15em .1em; 
border-color: black black black black; 
border-radius: 50% .5em 70% 50% / 50% 70% 70% 50%; 
transform: rotate(15deg); 
}
.spanHearingAid::before {content: ""; 
position: absolute; 
width: .16em; height: .16em; 
left: -.05em; top: .4em; 
background-color: black; 
border-style: solid; 
border-width: .15em; 
border-color: transparent transparent transparent white; 
border-radius: 100%; 
background-clip: content-box
}
.spanHearingAid::after {content: ""; 
position: absolute; 
width: .26em; height: .6em; 
left: -.1em; top: .1em; 
background-color: black; 
border-radius: 50% 50% 80% 80% / 70% 70% 100% 100%; 
transform: rotate(40deg); 
}
</style>
<p><span class=spanHearingAid></span> Hearing Aid. ['audífono'.]</p>


<style type="text/css"> /* 11/Jul/2014 14:55 */
.spanOnOff {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .45em; height: .45em; 
border: solid .1em black; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em white; 
}
.spanOnOff::before {content: ""; 
display: block; 
position: relative; 
margin: -.17em auto; 
width: .1em; height: .36em; 
background-color: black; 
border-radius: .05em; 
box-shadow: 0 0 0 .05em white; 
}
</style>
<p><span class=spanOnOff></span> On/Off. ['llave de encendido / apagado'.]</p>


<style type="text/css"> /* 1/Dic/2014 16:37 */
.spanBlueTooth {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .4em; height: .4em; 
border-style: solid; 
border-width: .08em; 
border-color: black black rgba(0,0,0,.0) rgba(0,0,0,.0); 
background-image: 
linear-gradient(to left bottom, transparent, transparent 37%, black 38%, black 50%, transparent 51%, transparent 100%), 
linear-gradient(to left, transparent, transparent .12em, black .12em, black .2em, transparent .2em, transparent 100%), 
linear-gradient(to bottom, white, white .12em, black .12em, black .2em, white .2em, white 100%); 
background-repeat: no-repeat, repeat-y, repeat-x; 
background-origin: content-box; 
transform: rotate(45deg); 
}
.spanBlueTooth::before {content: ""; 
position: absolute; 
width: .225em; height: .225em; 
right: -.11em; top: -.11em; 
background-color: white; 
}
</style>
<p><span class=spanBlueTooth></span> Bluetooth. </p>


<style type="text/css"> /* 16/Oct/2014 13:31 */
.spanUSB {position: relative; 
display: inline-block; 
margin: 0 .6em 0 .8em; 
width: .8em; height: .06em; 
border-style: solid; 
border-width: .3em .2em; 
border-color: transparent; 
background-image: 
radial-gradient(ellipse at bottom right, transparent, transparent .21em, black .23em, black .28em, transparent .3em, transparent 100%), 
radial-gradient(ellipse at top right, transparent, transparent .21em, black .23em, black .28em, transparent .3em, transparent 100%), 
radial-gradient(circle, black, black .1em, transparent .11em, transparent 100%), 
linear-gradient(black, black), 
radial-gradient(circle, black, black .09em, transparent .1em, transparent 100%), 
linear-gradient(black, black); 
background-size: .3em .25em, .3em .25em, .2em .2em, 100% 100%, .2em .2em, .18em .18em; 
background-position: right .55em top .05em, right .38em bottom .05em, 0 center, 0 0, .75em bottom, .6em .0em; 
background-clip: border-box, border-box, border-box, content-box; 
background-origin: border-box; 
background-repeat: no-repeat; 
}
.spanUSB::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
right: -.2em; top: -.09em; 
border-style: solid; 
border-width: .14em 0 .14em .22em; 
border-color: transparent black; 
}
</style>
<p><span class=spanUSB></span> USB.</p>


<style type="text/css"> /* 2/Jul/2017 14:17 */
.spanInDoor {position: relative; 
display: inline-block; 
margin: 0 .6em -.1em .9em; 
width: 1em; height: .8em; 
border: solid .03em black; 
border-radius: .06em; 
overflow: hidden; 
box-shadow: inset 0 0 0 .03em  white; 
background: 
linear-gradient(325deg, transparent 45%, dimgrey 47%, dimgrey 52%, lightgrey 55%) 0 0, 
linear-gradient(transparent .4em, dimgrey .4em, dimgrey .45em, lightgrey .45em) 0 -.05em, 
linear-gradient(35deg, white 45%, dimgrey 47%, dimgrey 52%, lightgrey 55%) right top, white; 
background-size: 50% .4em, 100% 110%; 
background-repeat: no-repeat; 
}
.spanInDoor::before {content: ""; 
position: absolute; 
width: .8em; height: .4em; 
left: .1em; top: .34em; 
background: linear-gradient(dimgrey, dimgrey) .2em bottom no-repeat, white; 
background-size: .16em .26em; 
border-style: solid; 
border-width: 0 .05em .05em; 
border-color: dimgrey; 
box-sizing: border-box; 
}
.spanInDoor::after {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
right: 0; bottom: .1em; 
background-image: 
linear-gradient(to right top, black 35%, transparent 37%), 
linear-gradient(to left top, transparent 40%, black 42%, black 58%, transparent 60%); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanInDoor></span> Indoor Only. ['para uso en interior'.]</p>


<style type="text/css"> /* 11/Dic/2015 18:25 */
.spanDoubleInsulation {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1em; 
width: .45em; height: .45em; 
border: solid .1em transparent; 
box-shadow: inset 0 0 0 .05em black, 0 0 0 .05em black; 
}
</style>
<p><span class=spanDoubleInsulation></span> Double Insulation. ['doble aislación eléctrica'.]</p>


<style type="text/css"> /* 28/Ene/2016 19:55 */
.spanDirectCurrent {position: relative; 
display: inline-block; 
margin: 0 .7em 0 .9em; 
width: 1em; height: .12em; 
border-style: solid none dashed; 
border-width: .07em; 
border-color: black; 
}
</style>
<p><span class=spanDirectCurrent></span> Direct Current. DC. [&#9107; (&amp;#9107;), técnicos varios 'corriente continua'.]</p>


<style type="text/css"> /* 28/Ene/2016 20:15 */
.spanAlternCurrent {position: relative; 
display: inline-block; 
margin: 0 .7em 0 .9em; 
width: 1em; height: .4em; 
background: 
radial-gradient(ellipse at bottom, transparent 53%, black 60%, black 65%, transparent 70%), 
linear-gradient(transparent 45%, black 45%, black 55%, transparent 55%), 
radial-gradient(ellipse at top, transparent 53%, black 60%, black 65%, transparent 70%) right bottom; 
background-size: 53% 53%, 100% 100%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanAlternCurrent></span> Altern Current. AC. [&#9190; (&amp;#9190;), técnicos varios 'corriente alterna'.]</p>


<style type="text/css"> /* 11/Dic/2015 20:01 */
.spanLightingRod {position: relative; 
display: inline-block; 
margin: 0 1.25em -.05em; 
width: .1em; height: .75em; 
background-color: black; 
}
.spanLightingRod::before {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
left: -.15em; top: 0; 
border-style: solid; 
border-width: 0 .1em .1em 0; 
border-color: black; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanLightingRod></span> Lighting Rod. ['pararrayos'.]</p>


<style type="text/css"> /* 11/Dic/2015 19:01 */
.spanElectricalGrounding1 {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .6em; height: .7em; 
border-radius: 0 0 100% 100% / 0 0 200% 200%; 
background: linear-gradient(black, black), 
repeating-linear-gradient(black 0, black 18%, transparent 18%, transparent 36%, black 36%); 
background-size: .074em 50%, 100% 50%; 
background-repeat: no-repeat; 
background-position: center top, left bottom; 
}
</style>
<p><span class=spanElectricalGrounding1></span> Electrical Grounding 1. [&#9178; (&amp;#9178;), técnicos varios 'conexión eléctrica a masa'.]</p>


<style type="text/css"> /* 11/Dic/2015 19:31 */
.spanElectricalGrounding2 {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .6em; height: .7em; 
background: linear-gradient(black, black); 
background-size: .08em .5em; 
background-repeat: no-repeat; 
background-position: center top; 
}
.spanElectricalGrounding2::before {content: ""; 
position: absolute; 
width: .4em; height: .2em; 
left: 0; bottom: 0; 
background-color: black; 
border-style: solid; 
border-width: .08em .06em 0 .06em; 
border-color: black; 
box-shadow: inset .165em 0 0 0 white, inset -.165em 0 0 0 white; 
transform: skewx(330deg); 
}
</style>
<p><span class=spanElectricalGrounding2></span> Electrical Grounding 2. ['conexión eléctrica a tierra mecánica'.]</p>


<style type="text/css">
.spanHighVoltage {position: relative; 
margin: auto 1.2em; 
display: inline-block; 
width: 0; height: 0; 
border-width: .6em .25em 0 0; 
border-color: transparent black; 
border-style: solid; 
vertical-align: top; 
}
.spanHighVoltage:before {content: ""; 
width: 0; height: 0; 
position: absolute; 
background-color: transparent; 
border-width: 0 0 .6em .25em; 
top: -.2em; left: .15em; 
border-color: transparent black; 
border-style: solid; 
}
</style>
<p><span class=spanHighVoltage></span> High Voltage. [&#9889; (&amp;#9889;), símbolos varios'alta tensión'; &#8961; (&amp;#8961;), técnicos varios 'flecha eléctrica (fin de transmisión)'; &#128498; (&amp;#128498;), símbolos varios y pictogramas 'de mal humor'.]</p>


<style type="text/css"> /* 22/Dic/2017 14:39 */
.spanElectricTransformer {position: relative; 
display: inline-block; 
margin: 0 .6em -.1em; 
width: 1.4em; height: .8em; 
border-style: solid; 
border-width: .05em 0; 
border-color: black; 
box-sizing: border-box; 
}
.spanElectricTransformer::before {content: ""; 
position: absolute; 
width: .6em; height: .8em; 
left: .4em; top: -.05em; 
background: 
radial-gradient(circle at left, transparent 35%, black 40%, black 70%, transparent 75%) repeat-y, 
radial-gradient(circle at right, transparent 35%, black 40%, black 70%, transparent 75%) right top repeat-y, white; 
background-size: .1em .2em; 
}
.spanElectricTransformer::after {content: ""; 
position: absolute; 
width: .04em; height: .9em; 
left: .58em; top: -.1em; 
border-style: double; 
border-width: 0 .1em; 
border-color: black; 
}
</style>
<p><span class=spanElectricTransformer></span> Electric Transformer. ['símbolo de transformador eléctrico'.]</p>


<style type="text/css"> /* 15/Dic/2014 15:17 */
.spanWarning {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .8em; height: .69em; 
background-image: 
linear-gradient(to right top, black 0, black 49%, transparent 51%, transparent 100%), 
linear-gradient(to left top, black 0, black 49%, transparent 51%, transparent 100%); 
background-size: 51% 100%; 
background-repeat: no-repeat; 
background-position: right 0, 0 0; 
}
.spanWarning::before {content: ""; 
display: block; 
width: .08em; height: .06em; 
margin: .22em auto; 
border-style: solid; 
border-width: .26em 0 .075em; 
border-color: white; 
}
.spanWarning:hover { 
background-image: 
linear-gradient(to right top, gold 0, gold 49%, transparent 51%, transparent 100%), 
linear-gradient(to left top, gold 0, gold 49%, transparent 51%, transparent 100%); 
}
.spanWarning:hover::before {border-color: black; 
}
</style>
<p><span class=spanWarning></span> Warning. [&#9888; (&amp;#9888;), símbolos varios 'precaución'.]</p>


<style type="text/css"> /* 19/Dic/2014 15:40 */
.spanInformation {display: inline-block; 
margin: 0 .95em; 
width: .65em; height: .65em; 
background-color: black; 
border: double .08em black; 
border-radius: 100%; 
background-clip: content-box; 
}
.spanInformation:hover {
background-color: mediumblue; 
border: double .08em mediumblue; 
}
.spanInformation::before {content: ""; 
position: relative; 
right: .02em; 
display: block; 
width: .135em; height: .135em; 
margin: .08em auto; 
background-color: white; 
border-radius: 100%; 
}
.spanInformation::after {content: ""; 
display: block; 
width: .1em; height: .2em; 
margin: .09em auto; 
background-color: white; 
border-style: solid; 
border-width: 0 .05em; 
border-color: transparent; 
background-clip: content-box; 
box-shadow: -.02em -.08em 0 -.02em white, 0 .05em 0 0 white; 
}
</style>
<p><span class=spanInformation></span> Information. [&#128712; (&amp;#128712;), símbolos de mapas y transporte 'información (con borde circular)'.]</p>


<style type="text/css"> /* 23/Dic/2014 13:20 */
.spanHelp {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .65em; height: .65em; 
background-color: black; 
border: double .08em black; 
border-radius: 150%; 
background-clip: content-box; 
}
.spanHelp:hover {
background-color: mediumblue; 
border: double .08em mediumblue; 
}
.spanHelp::before {content: ""; 
position: absolute; 
right: .16em; top: .1em; 
width: .16em; height: .16em; 
border-style: solid; 
border-width: .08em; 
border-color: white white transparent white; 
background- color: red; 
border-radius: 100%; 
transform: rotate(65deg); 
}
.spanHelp::after {content: ""; 
position: absolute; 
width: .09em; height: .05em; 
left: .28em; top: .345em; 
background-color: transparent; 
border-style: solid; 
border-width: .15em 0 .05em ; 
border-color: white; 
border-radius: .05em 0 0 0; 
}
</style>
<p><span class=spanHelp></span>  Help. Information 2. Questions.[&#10068; (&amp;#10068;), dingbats 'signo de pregunta decorativo'.]</p>


<style type="text/css"> /* 28/Mar/2016 19:41 */
.spanRecycle {position: relative; 
display: inline-block; 
margin: 0 .7em -.18em 1.4em; 
width: .5em; height: .4em; 
border-radius: 0 .2em .2em 0 / 0 .1em .3em 0; 
background: 
linear-gradient(135deg, black 25%, transparent 25%), 
linear-gradient(100deg, transparent 50%, black 53%, black 80%, transparent 83%) right top, 
linear-gradient(45deg, transparent 35%, black 35%, black 55%, transparent 55%); 
background-size: 100% 100%, .4em .36em; 
background-repeat: no-repeat; 
transform: rotate(315deg); 
}
.spanRecycle::before , .spanRecycle::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: .22em; top: -.58em; 
background: inherit; 
border-radius: inherit; 
transform: rotate(240deg); 
}
.spanRecycle::after {content: ""; 
left: -.39em; top: -.50em; 
transform: rotate(125deg); 
}
</style>
<p><span class=spanRecycle></span> Recycle. [&#9851; (&amp;#9851;), símbolos varios 'reciclable (negro)'.]</p>


<style type="text/css"> /* 11/Abr/2016 18:28 */
.spanFragile {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.1em; 
width: .1em; height: .6em; 
background-color: black; 
border-style: solid; 
border-width: 0 .2em .1em; 
border-color: black transparent; 
background: 
radial-gradient(ellipse at top, black 68%, transparent 75%), black; 
background-size: .5em .37em, 100% 100%; 
background-repeat: no-repeat; 
background-position: center 0; 
background-clip: border-box, content-box; 
background-origin: border-box, content-box; 
}
.spanFragile::before {content: ""; 
position: absolute; 
width: .2em; height: .26em; 
left: -.06em; top: 0; 
background: 
linear-gradient(60deg, black .07em, white .08em, white .12em, black .13em) center 0, 
linear-gradient(280deg, black .07em, white .08em, white .12em, black .13em) center .1em, 
linear-gradient(50deg, black .1em, white .1em, white .13em, black .13em) center .15em; 
background-size: .2em .1em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanFragile></span> Fragile. ['frágil'.]</p>


<style type="text/css"> /* 30/Jul/2017 11:55 */
.spanIrradiation {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em 1.1em; 
width: .7em; height: .7em; 
border-radius: 100%; 
background-image: 
linear-gradient(transparent .32em, white .32em, white .38em, transparent .38em), 
linear-gradient(45deg, transparent .32em, white .32em, white .38em, transparent .38em), 
linear-gradient(-45deg, transparent .32em, white .32em, white .38em, transparent .38em), 
linear-gradient(90deg, transparent .32em, white .32em, white .38em, transparent .38em), 
radial-gradient(circle, white .22em, green .25em); 
background-size: 100% 100%, 100% 70%, 100% 70%, 100% 50%, 100% 100%; 
background-repeat: no-repeat; 
}
.spanIrradiation::after {content: ""; 
position: absolute; 
width: .36em; height: .36em; 
left: .17em; top: .17em; 
border-radius: 100%; 
background-image: 
radial-gradient(circle at left bottom, green 65%, transparent 70%), 
radial-gradient(circle, green 60%, transparent 70%), 
radial-gradient(circle at right bottom, green 65%, transparent 70%); 
background-size: .2em .2em, .18em .18em; 
background-repeat: no-repeat; 
background-position: left bottom, center top, right bottom; 
}
</style>
<p><span class=spanIrradiation></span> Irradiated Food. ['alimento irradiado'.]</p>





<hr>


<style type="text/css"> /* 26/Sep/2014 18:10 */
.spanPinwheel {position: relative; 
display: inline-block; 
margin: 0 1.3em .1em .7em; 
width: .6em; height: .06em; 
background-color: green; 
transform: rotate(320deg); 
}
.spanPinwheel::before {content: ""; 
position: absolute; 
width: .6em; height: .6em; 
left: .5em; top: -.25em; 
background: 
linear-gradient(45deg, transparent, transparent 45%, magenta 55%, magenta 100%), 
linear-gradient(315deg, violet, violet 45%, transparent 55%, transparent 100%), 
linear-gradient(135deg, transparent, transparent 45%, magenta 55%, magenta 100%) 100% 0, 
linear-gradient(45deg, violet, violet 45%, transparent 55%, transparent 100%) 100% 0, 
linear-gradient(315deg, transparent, transparent 45%, magenta 55%, magenta 100%) 0 100%, 
linear-gradient(225deg, violet, violet 45%, transparent 55%, transparent 100%) 0 100%, 
linear-gradient(225deg, transparent, transparent 45%, magenta 55%, magenta 100%) 100% 100%, 
linear-gradient(135deg, violet, violet 45%, transparent 55%, transparent 100%) 100% 100%; 
background-repeat: no-repeat; 
background-size: 50% 50%; 
}
.spanPinwheel::after {content: ""; 
position: absolute; 
width: .08em; height: .08em; 
left: .725em; top: -.025em; 
background-color: yellow; 
border: dotted .04em darkorange; 
border-radius: 100%; 
}
</style>
<p><span class=spanPinwheel></span> Pinwheel. [&#128967; (&amp;#128967;), formas geométricas extendidas 'estrella de cuatro puntas con colores divididos'.]</p>


<style type="text/css"> /* 1/Dic/2014 15:20 */
.spanPalette {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: .8em; height: .4em; 
background-color: black; 
border-style: solid; 
border-width: 0 .2em .15em 0; 
border-color: black white; 
border-radius: 50% 40% 50% 50%; 
transform: rotate(350deg); 
}
.spanPalette::before {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
right: .1em; top: .1em; 
background-color: darkgrey; 
border-radius: 100%; 
box-shadow: -.17em -.03em 0 0 grey, -.34em 0 0 0 silver, 
-.48em .1em 0 0 dimgrey, -.35em .24em 0 0 grey; 
}
.spanPalette::after {content: ""; 
position: absolute; 
width: .2em; height: .1em; 
right: .07em; bottom: -.08em; 
background-color: white; 
border-radius: 100%; 
}
</style>
<p><span class=spanPalette></span> Artist Palette. [&#127912; (&amp;#127912;), símbolos varios y pictogramas 'paleta de pintor'.]</p>


<style type="text/css">
.spanFolded {position: relative; 
margin: 0 .85em 0; 
display: inline-block; 
border-color: black transparent gray; 
width: .8em; height: 0; 
border-style: solid; 
border-width: .2em .1em; 
}
.spanFolded:before {content: ""; 
display: block; 
width: .8em; height: 0; 
position: absolute; 
left: -.1em; top: -.6em; 
border-color: black transparent gray; 
border-style: solid; 
border-width: .2em .1em; 
}
</style>
<p><span class=spanFolded></span> Folded Paper ['papel plegado'.]  </p>


<style type="text/css"> /* 11/Ago/2017 16:17 */
.spanSharpener {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: 1em; height: .6em; 
border-radius: .03em; 
box-sha dow: inset 0 0 .15em .02em rgba(0, 0, 0, .7); 
background-image: 
radial-gradient(ellipse at top, transparent .25em, dimgrey .25em), 
radial-gradient(ellipse at bottom, transparent .25em, dimgrey .25em); 
background-size: 100% .5em; 
background-repeat: no-repeat; 
background-position: center top -.14em, center bottom -.14em; 
transform: rotate(20deg); 
}
.spanSharpener::before {content: ""; 
position: absolute; 
width: .86em; height: .15em; 
left: .1em; top: .18em; 
background-color: silver; 
border-style: solid; 
border-width: 0 0 .06em; 
border-color: whitesmoke; 
border-radius: .14em 0 0 0; 
box-shadow: 0 .02em .02em 0 black; 
}
.spanSharpener::after {content: ""; 
position: absolute; 
width: .04em; height: .1em; 
left: .48em; top: .21em; 
background-color: gainsboro; 
border-style: solid; 
border-width: 0 .03em; 
border-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanSharpener></span> Pencil Sharpener. ['sacapuntas'.]</p>


<style type="text/css"> /* 12/Feb/2016 19:28 */
.spanStapler {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: 1.1em; height: .1em; 
background-color: silver; 
border-style: solid; 
border-width: 0 .05em .06em .08em; 
border-color: black transparent; 
border-radius: .1em 0 0 0; 
box-shadow: inset 0 -.04em 0 0 dimgrey; 
background-clip: content-box; 
}
.spanStapler::before {content: ""; 
position: absolute; 
width: 1em; height: .1em; 
left: 0; top: -.34em; 
background-color: silver; 
border-style: solid; 
border-width: .2em .06em .06em; 
border-color: dimgrey dimgrey transparent transparent; 
border-radius: 50% 50% 0 0 / 10% 30% 0 0; 
background-clip: content-box; 
transform: rotate(6deg); 
}
.spanStapler::after {content: ""; 
position: absolute; 
width: .3em; height: .25em; 
right: .0em; top: -.19em; 
background-color: dimgrey; 
box-shadow: inset .04em .04em 0 0 grey; 
border-radius: 100% 0 0 0; 
}
</style>
<p><span class=spanStapler></span> Stapler. ['engrapadora' o 'abrochadora'.]</p>


<style type="text/css"> /* 28/Mar/2015 14:41 */
.spanAdhesiveTape {position: relative; 
display: inline-block; 
margin: 0 .75em; 
width: 1.1em; height: .8em; 
border-radius: 0 0 .2em .3em / 0 0 .2em .6em; 
background-image: 
radial-gradient(ellipse at top, transparent, transparent .33em, black .35em, black 100%), 
radial-gradient(circle, transparent, transparent .09em, dimgrey .1em, dimgrey .14em, darkgrey .15em, darkgrey .29em, transparent .3em, transparent 100%), 
linear-gradient(to right bottom, transparent, transparent 45%, darkgrey 47%, darkgrey 53%, transparent 55%, transparent 100%); 
background-size: 130% 60%, .6em .6em, .65em .285em; 
background-repeat: no-repeat; 
background-position: 80% bottom, 90% 0, 0 .075em; 
}
</style>
<p><span class=spanAdhesiveTape></span> Adhesive Tape. ['cinta adhesiva'.]</p>


<style type="text/css"> /* 18/Jul/2015 15:31 */
.spanLabel1 {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .38em; height: .7em; 
border-radius: .2em .2em .1em .1em / .35em .35em .1em .1em; 
background: 
radial-gradient(circle, transparent .05em, black .065em) 0 -.57em; 
background-size: 100% 200%; 
transform: rotate(60deg); 
}
.spanLabel1::before {content: ""; 
position: absolute; 
width: .12em; height: .34em; 
left: .1em; top: -.21em; 
border-style: solid; 
border-width: 0 .03em .03em; 
border-color: transparent black black; 
border-radius: 0 50% 60% 100% / 0 60% 100% 100%; 
}
</style>
<p><span class=spanLabel1></span> Label 1. [&#127991; (&amp;#127991;), símbolos varios y pictogramas 'etiqueta'.]</p>


<style type="text/css"> /* 18/Jul/2015 15:31 */
.spanLabel2 {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .38em; height: .7em; 
border-radius: .1em; 
background: 
radial-gradient(white .05em, transparent .06em), 
linear-gradient(black, black), 
linear-gradient(130deg, transparent 35%, black 40%), 
linear-gradient(230deg, transparent 35%, black 40%); 
background-position: .13em .08em, 0 .2em, 0 0, 95% 0; 
background-size: .1em .1em, 100% 100%, 55% .2em, 55% .2em; 
background-repeat: no-repeat; 
transform: rotate(280deg); 
}
.spanLabel2::before {content: ""; 
position: absolute; 
width: .32em; height: .2em; 
left: .03em; top: -.07em; 
border-style: solid; 
border-width: 0 .03em .03em; 
border-color: transparent black black; 
border-radius: 0 50% 60% 100% / 0 60% 100% 100%; 
box-shadow: .018em .018em 0 0 rgba(255,255,255,.5); 
}
</style>
<p><span class=spanLabel2></span> Label 2. </p>


<style type="text/css"> /* 24/Mar/2014 17:09 */
.spanRibbon {position: relative; 
display: inline-block; 
margin: 0 1.8em .2em .85em; 
width: .1em; height: 0; 
border-color: grey black grey transparent; 
border-style: solid; 
border-width: .1em; 
}
.spanRibbon:before {content: ""; 
position: absolute; 
width: .1em; height: 0; 
left: .6em; top: -.08em; 
border-color: grey transparent grey black; 
border-style: solid; 
border-width: .1em; 
}
.spanRibbon:after {content: ""; 
position: absolute; 
width: .577em; height: .2em; 
left: .1em; top: -.2em; 
background-color: grey; 
border-color: transparent black transparent white; 
border-style: solid; 
border-width: 0 .01em; 
</style>
<p><span class=spanRibbon></span>Ribbon Tag. ['cinta decorativa para marcar'.]</p>


<style type="text/css">
.spanPin1 {position: relative; 
display: inline-block; 
background-color: black; 
width: 10px; height: 10px; 
margin: auto 1.2em .6em; 
border-radius: 50%; 
}
.spanPin1:before {content: ""; 
background-color: black; 
position: absolute; 
top: 0; left: 4px; 
width: 2px; height: .7em; 
}
</style>
<p><span class=spanPin1></span> Pin, Round Pushpin. [&#128205; (&amp;#128205;), símbolos varios y pictogramas 'alfiler de cabeza redonda'; &#10991; (&amp;#10991;), operadores matemáticos suplementarios 'linea vertical con círculo arriba'.]</p>

<style type="text/css">
.spanPin2 {position: relative; 
display: inline-block; 
background-color: black; 
width: .2em; height: .3em; 
margin: auto 1.15em .35em; 
border-width: .08em .1em .1em; 
border-style: solid; 
border-color: black white; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
border-radius: .1em .1em 0 0;
}
.spanPin2:before {content: ""; 
background-color: black; 
position: absolute; 
top: 0; left: .08em; 
width: 2px; height: .75em; 
border-radius: 0 0 .05em; 
}
</style>
<p><span class=spanPin2></span> Pin, Pushpin. [&#128204; (&amp;#128204;), símbolos varios y pictogramas 'alfiler marcador'.]</p>


<style type="text/css"> /* 2/Ago/2015 13:21 */
.spanNoose {position: relative; 
display: inline-block; 
margin: 0 .7em .15em 1em; 
width: .7em; height: .4em; 
border: solid .075em black; 
border-radius: 50%; 
}
.spanNoose::before {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .25em; top: .3em; 
background-color: white; 
border: solid .075em black; 
border-radius: 50% 50% 50% 0; 
transform: scalex(-1.3) rotate(220deg); 
}
.spanNoose::after {content: ""; 
position: absolute; 
width: .2em; height: .25em; 
left: .25em; top: .4em; 
border-style: solid; 
border-width: .075em 0 0 .075em; 
border-color: black; 
border-radius: 80% 0 0 0; 
}
</style>
<p><span class=spanNoose></span> Noose. ['lazo corredizo'.]</p>


<style type="text/css"> /* 22/Dic/2017 13:55 */
.spanRibbonBow {position: relative; 
display: inline-block; 
margin: 0 .6em .18em .9em; 
width: .2em; height: .2em; 
border-style: solid; 
border-width: .2em .4em; 
border-color: transparent black; 
border-radius: 50% / 40%; 
}
.spanRibbonBow::before {content: ""; 
position: absolute; 
width: .1em; height: .3em; 
left: -.1em; top: .15em; 
border-style: solid; 
border-width: .1em .16em .16em; 
border-color: black black transparent; 
border-radius: 120% 120% 0 0; 
}
.spanRibbonBow::after {content: ""; 
position: absolute; 
width: .22em; height: .22em; 
left: -.02em; top: -.02em; 
background-color: black; 
border: solid .03em white; 
border-radius: 35%; 
}
</style>
<p><span class=spanRibbonBow></span> Ribbon Bow. [&#127872; (&amp;#127872;), símbolos varios y pictogramas 'moño de cinta'.]</p>


<style type="text/css"> /* 26/Sep/2014 13:54 */
.spanShakingHands {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em 1.3em; 
width: .45em; height: 0; 
border-style: solid; 
border-width: .45em 0 .45em; 
border-color: darkgrey darkgrey transparent; 
border-radius: .3em .3em .3em .2em / .3em .3em .1em .2em; 
background-image: 
repeating-linear-gradient(to left, darkgrey, darkgrey 20%, transparent 20%, transparent 26%); 
background-size: .4em 100%; 
background-position: right 0 top 0; 
background-origin: border-box; 
background-repeat: no-repeat; 
transform: rotate(45deg); 
}
.spanShakingHands::before {content: ""; 
position: absolute; 
left: -.4em; top: -.05em; 
width: 0; height: .45em; 
border-style: solid; 
border-width: 0 .45em 0 .45em; 
border-color: dimgrey transparent dimgrey dimgrey; 
border-radius: .3em .1em .2em .3em / .3em .3em .2em .3em; 
background-image: 
repeating-linear-gradient(to top, dimgrey, dimgrey 20%, transparent 20%, transparent 26%); 
background-size: 100% .4em; 
background-position: right 0 bottom 0; 
background-origin: border-box; 
background-repeat: no-repeat; 
}
.spanShakingHands::after {content: ""; 
position: absolute; 
width: .07em; height: .22em; 
left: 0; top: -.05em; 
background-color: darkgrey; 
border-bottom-right-radius: .05em .1em; 
transform: rotate(25deg); 
transform-origin: 50% 0; 
}
</style>
<p><span class=spanShakingHands></span> Shaking Hands. ['estrechar las manos'.]</p>


<style type="text/css"> /* 8/Oct/2014 18:15 */
.spanHand {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .42em; height: .38em; 
border-radius: 0 0 .4em .4em; 
background-image: radial-gradient(ellipse at top left, transparent, transparent .08em, black .1em, black 100%); 
background-size: 100% 150%; 
}
.spanHand::before {content: ""; 
position: absolute; 
width: .06em; height: .4em; 
right: 0; top: -.22em; 
background-color: black; 
border-radius: .06em; 
box-shadow: -.085em -.06em 0 0 black, -.175em -.08em 0 0 black, -.27em -.04em 0 0 black; 
}
.spanHand::after {content: ""; 
position: absolute; 
width: .07em; height: .25em; 
left: -.025em; top: -.05em; 
background-color: black; 
border-radius: .05em; 
transform: rotate(350deg); 
}
</style>
<p><span class=spanHand></span> Raised Hand. [&#9995; (&amp;#9995;), dingbats 'mano abierta'.]</p>


<style type="text/css">
.spanEye1 {position: relative; 
display: inline-block; 
width: .8em; height: .32em; 
border-width: .04em 0; 
border-color: black; 
border-style: solid; 
border-radius: .8em / .4em; 
margin: auto 1em .2em; 
}
.spanEye1:before {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
background-color: black; 
left: .25em; top: 0; 
border-radius: 50%; 
border-width: .1em; 
border-color: white; 
border-style: double; 
}
</style>
<p><span class=spanEye1></span> Eye 1. [&#128065; (&amp;#128065;), símbolos varios y pictogramas 'ojo'.]</p> 


<style type="text/css"> /* 26/Mar/2014 10:04 */
.spanTooth {position: relative; 
display: inline-block; 
margin: 0 1.3em .3em 1.1em; 
width: .3em; height: .35em; 
background-color: white; 
border-color: grey transparent transparent grey; 
border-style: solid; 
border-width: .05em 0 0 .05em; 
border-radius: .15em .15em .1em .15em / .15em .15em .1em .3em; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.spanTooth:before {content: ""; 
position: absolute; 
width: .3em; height: .35em; 
background-color: white; 
left: .16em; top: -.04em; 
border-color: grey grey transparent transparent; 
border-style: solid; 
border-width: .05em .05em 0 0; 
border-radius: .15em .15em .15em .1em / .15em .15em .25em .1em; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.spanTooth:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .06em; top: .26em; 
border-color: white white transparent white; 
border-style: solid; 
border-width: .08em .17em .4em .15em; 
border-radius: .1em .1em .3em .3em; 
background-image: linear-gradient(60deg, transparent 0, transparent .18em, grey .185em, grey 100%), 
linear-gradient(110deg, grey 0, grey .12em, transparent .12em, transparent 100%); 
background-size: .34em .26em; 
background-repeat: no-repeat; 
background-position: -.1em .08em, -.12em .07em; 
border-collapse: separate; 
box-shadow: .08em -.01em 0 -.03em grey, -.08em -.01em 0 -.03em grey; 
}
</style>
<p><span class=spanTooth></span> Tooth. ['diente', 'molar'.]</p>


<style type="text/css">
.spanKiss {position: relative; 
display: inline-block; 
width: .8em; height: .8em; 
background-color: red; 
border-radius: 50% 0; 
border-collapse: separate; 
box-shadow: inset -.1em -.1em .6em .05em rgba(255, 255, 255, 0.5); 
margin: 0 1em; 
}
.spanKiss:before {content: ""; 
position: absolute; 
display: block; 
top: .25em; left: .25em; 
width: .3em; height: .3em; 
background-color: white; 
border-radius: 50% 0; 
border-collapse: separate; 
box-shadow: inset .025em .025em .07em .06em rgba(255, 0, 0, .9); 
}
.spanKiss:after {content: ""; 
position: absolute; 
display: block; 
top: .025em; left: .025em; 
width: .15em; height: .15em; 
border-radius: 0 0 50%; 
background-color: white; 
border-collapse: separate; 
box-shadow: .03em .03em .1em .02em rgba(255, 255, 255, .7); 
}
</style>
<p><span class=spanKiss></span> Kiss. [&#128139; (&amp;#128139;), símbolos varios y pictogramas 'marca de beso'; &#128482; (&amp;#128482;), símbolos varios y pictogramas 'labios'; &#128143; (&amp;#128143;), símbolos varios y pictogramas 'beso'.]</p>


<style type="text/css"> /* 6/Mar/2015 13:41 */
.spanHeartArrow {position: relative; 
display: inline-block; 
margin: 0 .7em 0 1.4em; 
width: .5em; height: .75em; 
background-color: red; 
border-radius: .5em .5em 0 .1em; 
transform: rotatez(315deg); 
transform-origin: left bottom; 
}
.spanHeartArrow::after {content: ""; 
position: absolute; 
width: .5em; height: .75em; 
background-color: red; 
left: -100%; top: 0; 
border-radius: .5em .5em .1em 1em; 
transform: rotatez(90deg); 
transform-origin: right bottom; 
}
.spanHeartArrow::before {content: ""; 
position: absolute; 
width: .24em; height: 1.22em; 
left: .12em; top: -.15em; 
background: 
linear-gradient(315deg, transparent, transparent 7%, dimgrey 9%, dimgrey 18%, transparent 20%, transparent 83%, dimgrey 86%, dimgrey 90%, transparent 93%, transparent 100%), 
linear-gradient(black, black) center top, 
linear-gradient(45deg, transparent, transparent 7%, dimgrey 9%, dimgrey 18%, transparent 20%, transparent 83%, dimgrey 86%, dimgrey 90%, transparent 93%, transparent 100%) .12em 0; 
background-size: 48% 100%, .036em 90%; 
background-repeat: no-repeat; 
background -position: .36em 0, .18em 0, 0 0; 
transform: rotate(145deg); 
}
</style>
<p><span class=spanHeartArrow></span> Heart with Arrow. (Love)[&#128152; (&amp;#128152;), símbolos varios y pictogramas 'corazón con flecha'.]</p>


<style type="text/css"> /* 28/Oct/2015 22:58 */
.spanReflector {position: relative; 
display: inline-block; 
margin: 0 .75em -.05em; 
width: 1.2em; height: .8em; 
background-color: black; 
border-radius: .08em; 
background-image: 
linear-gradient(silver, silver), 
linear-gradient(45deg, transparent 35%, darkgrey 40%, darkgrey 60%, transparent 65%), 
linear-gradient(315deg, transparent 35%, darkgrey 40%, darkgrey 60%, transparent 65%), 
linear-gradient(55deg, transparent 35%, silver 40%, silver 60%, transparent 65%), 
linear-gradient(305deg, transparent 35%, silver 40%, silver 60%, transparent 65%),
radial-gradient(circle, darkgrey .06em, transparent .07em), 
linear-gradient(to right bottom, transparent 43%, lightgoldenrodyellow 60%), 
linear-gradient(to right top, transparent 43%, lightgoldenrodyellow 60%); 
background-size: .036em .44em, .12em .12em, .12em .12em, .12em .13em, .12em .14em, .1em .1em, 1.1em .15em, 1.1em .15em; 
background-repeat: no-repeat; 
background-position: .23em .3em, .25em .6em, .11em .6em, .3em .31em, .3em .07em, .19em .27em, .1em .1em, .1em .25em; 
}
.spanReflector::before {content: ""; 
position: absolute; 
width: .21em; height: .15em; 
left: .13em; top: .15em; 
background-color: lightgrey; 
border-style: solid; 
border-width: .03em .1em .03em 0; 
border-color: transparent silver; 
border-radius: .06em 0 0 .06em; 
background-clip: content-box; 
}
</style>
<p><span class=spanReflector></span> Reflector. ['reflector para iluminación'.]</p>


<style type="text/css">
.spanSatelliteAntenna {position: relative; 
display: inline-block; 
width: 0; height: 0; 
border-radius: 20% 50%; 
margin: auto .9em .4em; 
border-style: solid; 
border-color: transparent transparent black black; 
border-width: .5em; 
}
.spanSatelliteAntenna:before {content: ""; 
position: absolute; 
display: block; 
top: -.08em; left: -.08em; 
width: 0; height: 0; 
border: solid .08em black; 
}
.spanSatelliteAntenna:after {content: ""; 
position: absolute; 
display: block; 
top: .35em; left: -.27em; 
width: .2em; height: .2em; 
border-style: solid; 
border-width: .1em; 
border-color: transparent transparent black black; 
}
</style>
<p><span class=spanSatelliteAntenna></span> Satellite Antenna. [&#128225; (&amp;#128225;), símbolos varios y pictogramas 'antena de satélite'.]</p>


<style type="text/css"> /* 25/Sep/2014 12:32 */
.spanSatellite {position: relative; 
display: inline-block; 
margin: 0 .7em .1em; 
width: 1.2em; height: .3em; 
border: solid .025em dimgrey; 
background-image: repeating-linear-gradient(to left, transparent, transparent .07em, silver .07em, silver .1em),
repeating-linear-gradient(darkgrey, darkgrey .05em, silver .05em, silver .08em); 
transform: rotate(320deg); 
}
.spanSatellite::before {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: .33em; top: -.14em; 
background-color: silver; 
border: solid .03em grey; 
border-radius: 100%; 
box-shadow: 0 .15em 0 -.05em grey; 
}
.spanSatellite::after {content: ""; 
position: absolute; 
width: .05em; height: 0; 
left: .485em; top: -.34em; 
border-style: groove solid solid; 
border-width: .08em .1em .45em .1em; 
border-color: dimgrey transparent grey transparent; 
border-radius: .15em .15em .1em .1em / .2em .2em .2em .2em; 
}
</style>
<p><span class=spanSatellite></span> Satellite. [&#128752; (&amp;#128752;), símbolos de transportes y mapas 'satélite'.]</p>


<style type="text/css">
.spanRocket {position: relative; 
display: inline-block; 
width: .8em; height: .8em; 
border-radius: 100% 0; 
margin: 0 .9em .2em 1em; 
background-color: black; 
}
.spanRocket:after {content: ""; 
position: absolute; 
display: block; 
top: .28em; left: .32em; 
width: .15em; height: .15em; 
border-radius: 50%; 
border: solid .02em silver; 
background-color: white; 
}
.spanRocket:before {content: ""; 
position: absolute; 
display: block; 
top: .55em; left: -.4em; 
width: .25em; height: .25em; 
border-radius: 35%; 
border-style: solid; 
border-width: .2em; 
border-color: black black transparent transparent; 
}
</style>
<p><span class=spanRocket></span> Rocket. [&#128640; (&amp;#128640;), símbolos de mapas y transporte 'cohete'.]</p>


<style type="text/css"> /* 25/Ago/2015 18:29 */
.spanScooter {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .14em; height: .32em; 
background-color: black; 
border: solid .025em white; 
border-radius: .07em; 
box-shadow: 0 -.18em 0 .065em dimgrey; 
}
.spanScooter::before {content: ""; 
position: absolute; 
width: .52em; height: .22em; 
left: -.185em; top: -.4em; 
background-image: 
radial-gradient(circle, lightgrey .07em, black .08em, grey .1em, transparent .11em), 
linear-gradient(black, black); 
background-size: 100% 100%, 100% .07em; 
background-repeat: no-repeat; 
background-position: 0 0, 0 .08em; 
}
</style>
<p><span class=spanScooter></span> Scooter. [&#127949; (&amp;#127949;), símbolos varios y pictogramas 'motocicleta'; 'motoneta'.]</p>


<style type="text/css"> /* 22/Ago/2015 20:15 */
.spanAmbulance {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: 1.2em; height: .52em; 
background-color: aliceblue; 
border: solid .04em grey; 
border-radius: .6em .05em .05em .1em / .5em .05em .1em .1em; 
background-image: 
linear-gradient(green, green), linear-gradient(green, green), 
linear-gradient(to right, silver .38em, dimgrey .38em), linear-gradient(dimgrey, dimgrey); 
background-size: .08em .17em, .17em .08em, .4em .24em, 100% .025em; 
background-repeat: no-repeat; 
background-position: .745em .05em, .7em .1em, 0 .03em, 0 .28em; 
background-clip: content-box; 
}
.spanAmbulance::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .11em; top: .41em; 
background-color: white; 
border: solid .08em black; 
border-radius: 100%; 
box-shadow: .8em .006em 0 -.07em white, .8em 0 0 0 black; 
}
.spanAmbulance::after {content: ""; 
position: absolute; 
width: .74em; height: .06em; 
left: .33em; top: -.13em; 
background-color: lavender; 
border-style: solid; 
border-width: .04em .08em .02em .1em; 
border-color: grey limegreen; 
border-radius: .08em .05em .05em 0; 
}
</style>
<p><span class=spanAmbulance></span> Ambulance. [&#128657; (&amp;#128657;), símbolos de transportes y mapas 'ambulancia'.]</p>


<style type="text/css">
.spanTruck1{position: relative; 
display: inline-block; 
margin: auto 1.1em .2em .9em; 
width: .7em; height: .5em; 
background-color: black; 
border-radius: 10%; 
}
.spanTruck1:before {content: ""; 
position: absolute; 
display: block; 
width: .2em; height: .15em; 
left: .73em; top: .1em; 
background-color: white; 
border-radius: 0 .15em 0 0 / 0 .2em 0 0; 
border-width: .05em .05em .20em; 
border-color: black; 
border-style: solid;
}
.spanTruck1:after {content: ""; 
position: absolute; 
display: block; 
width: .2em; height: .2em; 
left: .2em; top: .4em; 
background-color: black; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: 0 0 0 .03em white, .55em 0 0 .01em black, .55em 0 0 .03em white;
}
</style>
<p><span class=spanTruck1></span> Truck 1. [&#9951; (&amp;#9951;), símbolos varios 'camión'.]</p>

<style type="text/css">
.spanTruck2{position: relative; 
display: inline-block; 
margin: auto 1em .2em 1.1em; 
width: .7em; height: .6em; 
background-color: black; 
border-radius: .08em; 
box-shadow: 0 0 0 .025em white, 0 -.12em 0 .1em black;
}
.spanTruck2:before {content: ""; 
position: absolute; 
display: block; 
width: .6em; height: .2em; 
left: .05em; top: .05em; 
background-color: white; 
border-radius: .08em .08em 0 0; 
}
.spanTruck2:after {content: ""; 
position: absolute; 
display: block; 
width: .15em; height: .15em; 
left: .1em; top: .35em; 
background-color: white; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: .36em 0 0 0 white, 
0 .18em 0 .02em black, .36em .18em 0 .02em black; 
}
</style>
<p><span class=spanTruck2></span> Truck 2. </p>


<style type="text/css"> /* 22/Oct/2014 14:48 */
.spanTruck3 {position: relative; 
display: inline-block; 
margin: 0 1.3em 0 .6em; 
width: .9em; height: .28em; 
border-bottom-right-radius: 1.5em 1em; 
background-image: 
radial-gradient(circle, white, white .025em, black .04em, black .09em, white .11em, white .12em, transparent .12em, transparent 100%),
linear-gradient(black, black); 
background-size: .4em .25em, 100% .1em; 
background-repeat: repeat-x, no-repeat; 
background-position: left bottom, 0 0; 
}
.spanTruck3::before {content: ""; 
position: absolute; 
width: .65em; height: .58em; 
left: 1.2em; top: -.3em; 
border-radius: 0 .3em 0 0; 
background-image: 
linear-gradient(silver, silver), 
radial-gradient(circle, white, white .025em, black .04em, black .09em, white .11em, white .12em, transparent .12em, transparent 100%), 
linear-gradient(black, black); 
background-size: .23em .15em, .31em .25em, 100% .45em; 
background-repeat: no-repeat, repeat-x, no-repeat; 
background-position: right .06em, left bottom, 0 0; 
}
.spanTruck3::after {content: ""; 
position: absolute; 
width: 1.5em; height: .31em; 
left: -.08em; top: -.35em; 
background-color: black; 
border-style: solid; 
border-width: 0 .04em .025em 0; 
border-color: white; 
border-radius: 0 .1em 0 0; 
}
</style>
<p><span class=spanTruck3></span> Truck 3. Articulated Lorry. [&#128667; (&amp;#128667;), símbolos de mapas y transporte 'camión articulado'.]</p>


<style type="text/css"> /* 7/Ago/2015 19:18 */
.spanMinibus {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: 1.1em; height: .46em; 
background-color: black; 
border: solid .08em black; 
border-radius: .7em .15em .05em .1em / .5em .15em .1em .1em; 
background-image: 
linear-gradient(to right, white .4em, black .4em, black .48em, white .48em, white .74em, black .74em, black .82em, white .82em); 
background-size: 100% .2em; 
background-repeat: no-repeat; 
background-position: 0 .03em; 
background-clip: content-box; 
}
.spanMinibus::before , .spanMinibus::after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .11em; top: .41em; 
background-color: white; 
border: solid .08em black; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em white; 
}
.spanMinibus::after {left: .8em; 
}
</style>
<p><span class=spanMinibus></span> Minibus. [&#128656; (&amp;#128656;), símbolos de transportes y mapas 'minibus'.]</p>


<style type="text/css"> /* 28/Jul/2014 16:04 */
.spanForklift {position: relative; 
display: inline-block; 
margin: 0 1.1em .05em; 
width: .43em; height: .3em; 
border-color: black; 
border-style: solid; 
border-width: 0 .1em .22em 0; 
background-image: linear-gradient(black, black), 
linear-gradient(125deg, transparent, transparent 30%, black 40%, black 50%, transparent 55%, transparent 100%); 
background-size: 50% .1em, 100% .3em; 
background-repeat: no-repeat; 
background-position: right 0 top 0, 0 0; 
}
.spanForklift::before {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .05em; top: .44em; 
background-color: black; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: .25em -.026em 0 .01em black, 
.25em -.021em 0 .035em white; 
}
.spanForklift::after {content: ""; 
position: absolute; 
width: .2em; height: .55em; 
left: -.28em; top: -.1em; 
border-color: transparent black black transparent; 
border-style: solid double; 
border-width: .04em .08em .05em 0; 
}
</style>
<p><span class=spanForklift></span> Forklift. ['montacargas'.]</p>


<style type="text/css"> /* 19/Ago/2014 15:27 */
.spanBulldozer {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .65em; height: .3em; 
backg round-color: lime; 
border-color: black black; 
border-style: solid; 
border-width: .045em .045em .25em .12em; 
border-radius: 0 .7em 0 .2em; 
background-clip: content-box; 
}
.spanBulldozer::before {content: ""; 
position: absolute; 
width: .69em; height: .25em; 
left: -.07em; top: .36em; 
background-color: black; 
border: dotted .033em white; 
border-radius: .25em; 
background-image: radial-gradient(circle, black, black .04em, white .04em, white .09em, black .09em, black 100%); 
background-size: .225em 100%; 
background-repeat: repeat-x; 
background-position: center 0; 
}
.spanBulldozer::after {content: ""; 
position: absolute; 
width: .22em; height: .15em; 
left: .7em; top: .32em; 
border-style: solid; 
border-color: transparent transparent black black; 
border-width: .13em 0 0 .05em;
background-image: radial-gradient(ellipse at top right, transparent 0, transparent .2em, black .21em, black 100%); 
background-clip: content-box; 
}
</style>
<p><span class=spanBulldozer></span> Bulldozer. ['topadora'.]</p>


<style type="text/css"> /* 12/Ago/2015 20:54 */
.spanLoadingShovel {position: relative; 
display: inline-block; 
margin: 0 .8em 0 1em; 
width: .85em; height: .18em; 
border-bottom: solid .27em dimgrey; 
border-top: solid .05em dimgrey; 
border-radius: .3em .08em .08em .05em / .4em .08em .08em .05em; 
background: 
linear-gradient(115deg, transparent .25em, transparent .43em, dimgrey .44em); 
background-size: 100% .25em; 
}
.spanLoadingShovel::before {content: ""; 
position: absolute; 
width: .65em; height: .5em; 
right: .08em; bottom: .05em; 
border-right: solid .12em black; 
border-left: solid .3em transparent; 
border-radius: 0 .08em .1em 0; 
background: 
radial-gradient(ellipse at left top, transparent 50%, dimgrey 55%, dimgrey 80%, transparent 85%) .05em .05em, 
linear-gradient(to bottom, black .1em, transparent .11em); 
background-size: .3em .25em, 100% 100%; 
background-repeat: no-repeat; 
background-clip: border-box, content-box; 
background-origin: border-box; 
transform: rotate(10deg); 
}
.spanLoadingShovel::after {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .05em; top: .3em; 
background-color: white; 
border: solid .08em black; 
border-radius: 100%; 
box-shadow: .5em 0 0 -.07em white, .5em 0 0 0 black; 
}
</style>
<p><span class=spanLoadingShovel></span> Loading Shovel. ['pala de carga'.]</p>


<style type="text/css"> /* 31/Ago/2015 20:34 */
.spanCraneHoist {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .13em; height: .65em; 
border-style: solid; 
border-width: 0 .08em .13em .04em; 
border-color: black transparent; 
border-radius: .1em .1em 0 0; 
box-shadow: inset 0 0 0 .025em black; 
background-image: 
repeating-linear-gradient(315deg, transparent, transparent .05em, black .065em, black .075em, transparent .085em), 
repeating-linear-gradient(45deg, transparent, transparent .05em, black .065em, black .075em, transparent .085em); 
background-clip: content-box; 
}
.spanCraneHoist::before {content: ""; 
position: absolute; 
width: .8em; height: .12em; 
left: -.13em; top: -.025em; 
border-bottom: solid .07em black; 
border-radius: 0 .7em .5em 0; 
background-image: 
linear-gradient(190deg, transparent .12em, black .135em, black .135em, transparent .15em); 
background-size: .6em 100%; 
background-repeat: no-repeat; 
background-position: right top; 
background-clip: content-box; 
}
.spanCraneHoist::after {content: ""; 
position: absolute; 
width: .4em; height: .26em; 
left: .4em; top: .16em; 
border-bottom: solid .08em dimgrey; 
background-image: 
linear-gradient(220deg, transparent .12em, black .135em, black .135em, transparent .15em), 
linear-gradient(black, black), 
linear-gradient(140deg, transparent .12em, black .135em, black .135em, transparent .15em); 
background-size: 40% 50%, .025em .2em; 
background-repeat: no-repeat; 
background-position: right 18% bottom, center top, left 18% bottom; 
background-clip: content-box; 
}
</style>
<p><span class=spanCraneHoist></span> Crane Hoist. ['torre grúa'.]</p>


<style type="text/css"> /* 23/Jun/2015 13:26 */
.spanCraneHook {position: relative; 
display: inline-block; 
margin: 0 1.25em -.05em; 
width: .26em; height: .26em; 
border-style: solid; 
border-width: 0 .03em .03em 0; 
border-color: black; 
border-radius: 100% / 120% 120% 80% 80%; 
box-shadow: inset -.04em -.03em .0em .04em black; 
}
.spanCraneHook::before {content: ""; 
position: absolute; 
width: .1em; height: .47em; 
left: .05em; top: -.55em; 
border-style: solid; 
border-width: 0 .04em .1em; 
border-color: black; 
border-radius: 0 0 30% 30%; 
}
.spanCraneHook::after {content: ""; 
position: absolute; 
width: .35em; height: .4em; 
left: -.03em; top: -.45em; 
background: 
radial-gradient(circle, black .06em, silver .08em, transparent .09em), 
linear-gradient(30deg, white 10%, transparent 10%, transparent 90%, white 90%), 
linear-gradient(330deg, white 10%, transparent 10%, transparent 90%, white 90%), 
repeating-linear-gradient(20deg, black, black .06em, #bbbb00 .06em, #bbbb00 .1em); 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanCraneHook></span> Crane Hook. ['guinche de grua'.]</p>


<style type="text/css"> /* 28/Jul/2014 15:13 */
.spanWarehouse {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .6em; height: .3em; 
border-color: black; 
border-style: solid; 
border-width: .14em .14em .025em; 
box-shadow: inset 0 0 0 .025em white; 
background-image: repeating-linear-gradient(black, black 20%, white 20%, white 24%); 
}
.spanWarehouse::before {content: ""; 
position: absolute; 
width: .84em; height: .3em; 
left: -.12em; top: -.455em; 
background-color: black; 
border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
}
</style>
<p><span class=spanWarehouse></span> Warehouse. ['depósito, galpón'.]</p>


<style type="text/css"> /* 22/Abr/2014 11:06 */
.spanFactory {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .7em; height: .35em; 
border-color: transparent black black; 
border-style: solid; 
border-width: .1em 0 .3em .15em; 
background-image: linear-gradient(325deg, black 0, black 50%, transparent 50%, transparent 100%); 
background-size: .25em .15em; 
background-repeat: repeat-x; 
background-position: .2em .2em; 
}
.spanFactory:before {content: ""; 
position: absolute; 
width: .15em; height: .1em; 
left: .06em; top: .45em; 
background-color: white; 
box-shadow: .2em 0 0 0 white, .4em 0 0 0 white; 
}
.spanFactory:after {content: ""; 
position: absolute; 
width: .13em; height: .1em; 
left: -.1em; top: -.15em; 
background-color: rgba(128,128,128,.5); 
border-radius: 100%; 
box-shadow: .08em .02em 0 0 rgba(128,128,128,.5), .15em 0 0 0 rgba(128,128,128,.5); 
}
</style>
<p><span class=spanFactory></span> Factory. [&#127981; (&amp;#127981;), símbolos varios y pictogramas 'industria'.]</p>


<style type="text/css"> /* 1/May/2014 18:50 */
.spanBuilding {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .5em; height: .7em; 
border-color: black; 
border-style: solid; 
border-width: .1em .1em .2em; 
background-image: linear-gradient(90deg, transparent, transparent .2em, black .2em, black .3em, transparent .3em, transparent 100%), 
repeating-linear-gradient(white, white .1em, black .1em, black .2em); 
background-size: 100% .8em; 
}
.spanBuilding:before {content: ""; 
position: absolute; 
width: .025em; height: .32em; 
right: 0; bottom: -.18em; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: 0 .105em; 
}
</style>
<p><span class=spanBuilding></span> Office Building. [&#127970; (&amp;#127970;), símbolos varios y pictogramas 'edificio'.]</p>


<style type="text/css"> /* 17/Ago/2014 19:41 */
.spanHospital {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .75em; height: .35em; 
background-color: black; 
border-radius: .08em 0 .08em .08em; 
background-image: 
repeating-linear-gradient(to right, white 0, white .1em, transparent .1em, transparent .2em), 
repeating-linear-gradient(to right, white 0, white .1em, transparent .1em, transparent .2em); 
background-size: .5em .085em; 
background-repeat: no-repeat; 
background-position: center .085em, center .22em; 
}
.spanHospital::before {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
right: 0; top: -.38em; 
background-color: green; 
border-radius: .08em .08em 0 0; 
background-image: 
linear-gradient(black, black), linear-gradient(black, black), 
linear-gradient(black, black), linear-gradient(black, black); 
background-size: .16em .16em; 
background-repeat: no-repeat; 
background-position: 0 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0; 
box-shadow: inset 0 0 0 .085em black; 
}
</style>
<p><span class=spanHospital></span> Hospital. [&#127973; (&amp;#127973;), símbolos varios y pictogramas 'hospital'.]</p>


<style type="text/css"> /* 5/Ago/2014 15:23 */
.spanMill {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .3em; height: .53em; 
border-bottom: solid .025em black; 
border-radius: 40% 40% 0 0 / 90% 90% 0 0; 
box-shadow: inset 0 .25em 0 .09em black; 
}
.spanMill::before {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: -.1em; top: -.1em; 
background-image: 
linear-gradient(to top right, transparent, transparent 43%, black 44%, black 56%, transparent 57%, transparent 100%), 
linear-gradient(to top left, transparent, transparent 43%, black 44%, black 56%, transparent 57%, transparent 100%); 
}
</style>
<p><span class=spanMill></span> Mill. ['molino de viento'.]</p>


<style type="text/css"> /* 19/Sep/2015 22:05 */
.spanLighthouse {position: relative; 
display: inline-block; 
margin: 0 .7em -.08em 1em; 
width: .8em; height: .75em; 
background-color: black; 
border: solid .05em black; 
border-radius: .1em; 
background-image: 
radial-gradient(circle at bottom, grey .075em, black .08em), 
linear-gradient(280deg, transparent .15em, black .17em), 
linear-gradient(80deg, transparent .15em, black .17em), 
repeating-linear-gradient(25deg, dimgrey 0, dimgrey .12em, darkgrey .12em, darkgrey .24em, dimgrey .24em); 
background-size: 100% .1em, 50% .55em, 50% .55em, 100% .55em; 
background-repeat: no-repeat; 
background-position: center 0, left bottom, right bottom, center bottom; 
}
.spanLighthouse::before {content: ""; 
position: absolute; 
width: .1em; height: .06em; 
left: 0; top: .1em; 
border-style: solid; 
border-width: .04em .35em; 
border-color: black transparent black; 
box-shadow: inset 0 0 0 .1em grey; 
background-image: 
radial-gradient(ellipse, white, grey); 
background-clip: border-box; 
background-origin: border-box; 
}
</style>
<p><span class=spanLighthouse></span> Lighthouse. ['faro de navegación'.]</p>


<style type="text/css"> /* 6/Ago/2016 18:44 */
.spanSolarPanel {position: relative; 
display: inline-block; 
margin: 0 .5em -.05em 1.1em; 
width: 1em; height: .7em; 
background: linear-gradient(silver, black) .73em .4em no-repeat, lightsteelblue; 
background-size: .05em .3em; 
}
.spanSolarPanel::before {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: .4em; bottom: 0; 
background-color: dimgrey; 
background-image: radial-gradient(circle, gainsboro 45%, transparent 55%); 
background-size: .1em .1em; 
border-style: solid; 
border-width: 0 .025em .025em 0; 
border-color: black; 
transform: perspective(1em) rotateY(-50deg) rotateX(50deg); 
}
.spanSolarPanel::after {content: ""; 
position: absolute; 
width: .18em; height: .18em; 
left: .05em; top: .05em; 
border: solid .05em transparent; 
border-radius: 100%; 
background: 
linear-gradient(transparent 45%, orange 46%, orange 54%, transparent 55%), 
linear-gradient(90deg, transparent 45%, orange 46%, orange 54%, transparent 55%), 
linear-gradient(45deg, transparent 45%, orange 47%, orange 53%, transparent 55%), 
linear-gradient(315deg, transparent 45%, orange 47%, orange 53%, transparent 55%), 
orange content-box; 
background-repeat: no-repeat; 
background-origin: border-box; 
}
</style>
<p><span class=spanSolarPanel></span> Solar Panel. ['panel solar fotovoltaico'.]</p>





<h3>Con animaciones.</h3>


<style type="text/css"> /* 8/Jun/2016 14:39 */
.spanSpeakerSoundAnimated {position: relative; 
display: inline-block; 
margin: 0 .6em; 
width: .2em; height: .3em; 
background-color: black; 
border-style: solid; 
border-width: .15em .2em .15em 0; 
border-color: transparent black; 
background-clip: content-box; 
}
.spanSpeakerSoundAnimated::before {content: ""; 
position: absolute; 
width: 0; height: .1em; 
left: .4em; top: -.155em; 
background-color: transparent; 
border-style: solid; 
border-width: .3em .36em .3em 0; 
border-color: rgba(255,255,255,.99) transparent; 
border-radius: 0 .36em .36em 0; 
background-image: 
repeating-radial-gradient(circle at left, transparent 0, transparent .06em, black .065em, black .1em, transparent .11em); 
background-size: 100% 100%; 
background-position: 0 center; 
background-repeat: no-repeat; 
background-origin: border-box; 
animation: ondas 1s infinite normal linear; 
}
@keyframes ondas {
  0% {background-size: 100% 100%; background-position: 0 center; }
  100% {background-size: 100% 300%; background-position: .1em center; }
}
</style>
<p><span class=spanSpeakerSoundAnimated></span> Animated Speaker Sound. ['altavoz con ondas animado'.]</p>


<style type="text/css"> /* 29/Jun/2014 15:57 */
.spanAnimatedFolder {display: inline-block; 
width: 1em; height: .6em; 
position: relative; 
margin: 0 .3em; 
background-color: black; 
border-radius : 10% 10% 0 0; 
}
.spanAnimatedFolder::before {content: ""; 
display: block; 
width: .2em; height: 0; 
position: absolute; 
left: .05em; top: -.3em; 
border-width: .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
.spanAnimatedFolder::after {content: ""; 
display: block; 
width: 1em; height: 0; 
position: absolute; 
left: 0; top: 0; 
border-width: .6em 0 0; 
border-style: solid; 
border-color: black transparent transparent; 
border-radius : 10% 10% 0 0; 
box-shadow: 0 0 0 0 grey; 
transition: all 500ms 250ms; 
}
.spanAnimatedFolder:hover::after {content: ""; 
display: block; 
width: 1em; height: 0; 
position: absolute; 
left: -.06em; top: .2em; 
border-width: .4em .06em 0; 
border-style: solid; 
border-color: black transparent transparent; 
border-radius : 10% 10% 0 0; 
box-shadow: 0 -.03em 0 0 grey; 
transition: all 500ms 250ms; 
}
</style>
<p><span class=spanAnimatedFolder></span> Animated File Folder. ['carpeta de archivos animada' (<samp>:hover</samp>).]</p>


<style type="text/css">
.spanBatteryCharge {position: absolute; 
left: .8em; top: .5em; 
background-color: black; 
display: block; 
height: .25em; width: .1em; 
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-name: carga;
animation-name: carga;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
}

@-webkit-keyframes carga {
from {width: .1em; }
to {width: .8em; }
}
@keyframes carga {
from {width: .1em; }
to {width: .8em; }
}
.spanBatteryCharge:before {content: ""; 
position: absolute; 
left: 0; top: -.05em; 
border-style: solid; 
border-color: black; 
display: block; 
height: .2em; width: .6em; 
border-width: .1em; 
}
.spanBatteryCharge:after {content: ""; 
position: absolute; 
left: .78em; top: .05em; 
background-color: black; 
display: block; 
height: .2em; width: .1em; 
}
</style>
<p style="position: relative; padding-left: 3em; margin: .15em" ><span 
class=spanBatteryCharge></span> Battery Charging. ['batería cargando'.]</p>


<style type="text/css"> /* 9/Ago/2016 22:00 */
.spanRechargeableBattery {position: relative; 
display: inline-block; 
margin: 0 .5em; 
width: .58em; height: .58em; 
background-color: white; 
border: solid .07em black; 
border-radius: 100%; 
box-shadow: 0 0 0 .1em white; 
}
.spanRechargeableBattery::before {content: ""; 
display: block; 
margin: .13em auto; 
width: .14em; height: .27em; 
background-color: black; 
border: solid .05em black; 
box-shadow: .01em -.1em 0 -.06em black; 
background-image: linear-gradient(#0f0, #0f0); 
background-size: 100% 100%; 
background-position: left bottom; 
background-repeat: no-repeat; 
animation: descargabat 8s infinite ease-in-out; 
}
.spanRechargeableBattery::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .2em; top: -.13em; 
border-style: solid; 
border-width: .1em .1em .1em .06em; 
border-color: white black white white; 
border-radius: 50% 0 0 50%; 
transform: rotate(360deg); 
transform-origin: center .42em; 
animation: recargabat 8s infinite ease-out; 
}

@keyframes recargabat {
  0%,50% {transform: rotate(360deg); }
  100% {transform: rotate(0deg); }
}
@keyframes descargabat {
  0% {background-size: 100% 100%; background-image: linear-gradient(#0f0, #0f0) }
  30% {background-size: 100% 40%; background-image: linear-gradient(#fd0, #fd0) }
  50%,100% {background-size: 100% 20%; background-image: linear-gradient(#f00, #f00) }
}
</style>
<p><span class=spanRechargeableBattery></span> Animated Rechargeable Battery. ['batería recargable animada'.]</p>


<style type="text/css"> /* 21/Abr/2016 10:58 */
.spanAnimatedConstruction {position: relative; 
display: inline-block; 
margin: 0 .4em -.05em; 
width: 1.1em; height: .55em; 
background: 
repeating-linear-gradient(45deg, black 0, black .1em, yellow .1em, yellow .2em) center .02em, 
linear-gradient(black, black), 
linear-gradient(90deg, dimgrey 25%, transparent 25%, transparent 75%, dimgrey 75%) center .02em; 
background-size: 1em .2em, 100% .24em, 74% 100%; 
background-repeat: no-repeat; 
}
.spanAnimatedConstruction::before, .spanAnimatedConstruction::after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .16em; top: -.2em; 
background-color: orangered; 
border: solid .03em rgba(255,0,0,.5); 
border-radius: 100%; 
box-shadow: 0 0 .1em 0 transparent; 
animation: constr 1s infinite normal step-start; 
}
.spanAnimatedConstruction::after {left: .7em; 
animation-delay: 500ms; 
}

@keyframes constr {
  0% {background-color: orangered; box-shadow: 0 0 .1em .03em transparent; }
  50% {background-color: orange; box-shadow: 0 0 .1em .03em darkorange; }
}
</style>
<p><span class=spanAnimatedConstruction></span> Animated Construction. ['señal de construcción animada'.]</p>


<style type="text/css"> /* 3/Abr/2015 17:49 */
.spanRainCloud {position: relative; 
display: inline-block; 
margin: 0 .7em .25em; 
width: .6em; height: .2em; 
background-color: silver; 
border-radius: .2em; 
box-shadow: inset -.05em -.05em .05em .0em rgba(0, 0, 0, .2); 
}
.spanRainCloud::before {content: ""; 
position: absolute; 
width: .4em; height: .15em; 
left: .08em; top: -.15em; 
background-color: silver; 
border-radius: .15em .15em 0 0; 
}
.spanRainCloud::after {content: ""; 
position: absolute; 
width: .55em; height: .26em; 
left: .08em; top: .23em; 
background- color: lime; 
border-radius: 0 .1em 0 0; 

background-image: 
repeating-linear-gradient(60deg, transparent, transparent .08em, black .09em, black .1em, transparent .11em), 
repeating-linear-gradient(60deg, transparent, transparent .08em, black .09em, black .1em, transparent .11em); 
background-size: 100% .08em; 
background-repeat: no-repeat; 
background-position: 0 0, .006em .1em; 
animation: lluvia 1.3s infinite normal linear; 
}

@keyframes lluvia {
  0% {height: 0; }
 40% {height: 0; }
 70% {height: .26em; }
100% {height: .26em; }
}
</style>
<p><span class=spanRainCloud></span> Cloud with Rain. [&#127783; (&amp;#127783;), símbolos varios y pictogramas 'nube con lluvia animada'.]</p>


<style type="text/css"> /* 3/Jul/2016 11:05 */
.spanBeatingHeart {position: relative; 
display: inline-block; 
margin: 0 .6em; 
width: .7em; height: .7em; 
background: 
radial-gradient(ellipse, red .18em, transparent .19em), 
linear-gradient(50deg, transparent 50%, red 52%) left bottom, 
radial-gradient(ellipse, red .18em, transparent .19em) right top, 
linear-gradient(310deg, transparent 50%, red 52%)right bottom; 
background-size: .4em .5em, .35em .35em; 
background-repeat: no-repeat; 
animation: corazon 1500ms infinite normal ease-in-out; 
}
@keyframes corazon {
  0%, 100% {transform: scale(1.1); }
  70% {transform: scale(1); }
}
</style>
<p><span class=spanBeatingHeart></span> Beating Heart. ['corazón latiendo animado'.]</p>


<style type="text/css">
.spanFireAnimated {position: relative; 
display: inline-block; 
border-style: ridge; 
width: 0; height: 0; 
margin: .5em 1em 0 .6em; 
border-collapse: separate; 
border-width: .7em .2em .1em; 
border-color: rgb(225, 190, 0) transparent; 
border-radius: 0 .3em 50% 50%  / 0 .3em 50% 50%; 
box-shadow: 0 -.1em .1em .1em rgba(255, 150, 0, .9); 
-webkit-animation: llama0 1100ms infinite alternate ease-in-out; 
animation: llama0 1100ms infinite alternate ease-in-out; 
}
@-webkit-keyframes llama0{
from {border-radius: .3em 0 50% 50%  / .3em 0 50% 50%; }
  to {border-radius: 0 .3em 50% 50%  / 0 .3em 50% 50%; }
}
@keyframes llama0{
from {border-radius: .3em 0 50% 50%  / .3em 0 50% 50%; }
  to {border-radius: 0 .3em 50% 50%  / 0 .3em 50% 50%; }
}
.spanFireAnimated:before {content: ""; 
position: absolute; 
display: block; 
width: .7em; height: .7em; 
border-radius: 80% 0; 
top: -.65em; left: -.15em; 
background-color: red; 
border-collapse: separate; 
opacity: .6; 
box-shadow: inset .1em .05em .1em .08em rgba(255, 250, 0, .9); 
-webkit-animation: llama1 700ms infinite alternate ease-out; 
animation: llama1 700ms infinite alternate ease-out; 
}
@-webkit-keyframes llama1{
from {width: .8em; height: .6em; 
      top: -.55em; left: -.25em; 
      box-shadow: inset .1em .05em .1em .08em rgba(255, 250, 0, .9); 
      background-color: red; 
     }
  to {width: .7em; height: .7em; 
      top: -.65em; left: -.15em; 
      box-shadow: inset .1em .05em .1em .08em rgba(250, 255, 0, .6); 
      background-color: orange; 
     }
}
@keyframes llama1{
from {width: .8em; height: .6em; 
      top: -.55em; left: -.25em; 
      box-shadow: inset .1em .05em .1em .08em rgba(255, 250, 0, .9); 
      background-color: red; 
     }
  to {width: .7em; height: .7em; 
      top: -.65em; left: -.15em; 
      box-shadow: inset .1em .05em .1em .08em rgba(250, 255, 0, .6); 
      background-color: orange; 
     }
}
.spanFireAnimated:after {content: ""; 
position: absolute; 
display: block; 
width: .5em; height: .9em; 
border-radius: 1% 99% 1% 99%; 
opacity: .5; 
top: -.8em; left: -.5em; 
background-color: red; 
border-collapse: separate; 
box-shadow: inset .06em -.1em .12em .05em rgba(225, 200, 0, .9); 
-webkit-animation: llama2 600ms infinite alternate ease-in; 
animation: llama2 600ms infinite alternate ease-in; 
}
@-webkit-keyframes llama2{
from {width: .6em; height: .8em; 
      top: -.7em; left: -.55em; 
      box-shadow: inset .06em -.1em .12em .05em rgba(200, 250, 0, .9); 
      background-color: red; 
     }
  to {width: .5em; height: .9em; 
      top: -.8em; left: -.5em; 
      box-shadow: inset .06em -.1em .12em .05em rgba(255, 255, 0, .6); 
      background-color: orange; 
     }
}
@keyframes llama2{
from {width: .6em; height: .8em; 
      top: -.7em; left: -.55em; 
      box-shadow: inset .06em -.1em .12em .05em rgba(200, 250, 0, .9); 
      background-color: red; 
     }
  to {width: .5em; height: .9em; 
      top: -.8em; left: -.5em; 
      box-shadow: inset .06em -.1em .12em .05em rgba(255, 255, 0, .6); 
      background-color: orange; 
     }
}
</style>
<p><span class=spanFireAnimated></span> Fire, Flame. ['fuego animado'.]</p>


<style type="text/css"> /* 19/Sep/2014 14:10 */
.spanHalfOrange {position: relative; 
display: inline-block; 
margin: 0 .6em 0 .6em; 
width: .6em; height: .6em; 
background-color: orange; 
border: solid .025em darkorange; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .04em floralwhite, .035em .01em 0 -.01em darkorange; 
background-image: 
linear-gradient(20deg, transparent, transparent 45%, floralwhite 48%, floralwhite 53%, transparent 55%, transparent 100%),
linear-gradient(140deg, transparent, transparent 45%, floralwhite 48%, floralwhite 53%, transparent 55%, transparent 100%),
linear-gradient(260deg, transparent, transparent 45%, floralwhite 48%, floralwhite 53%, transparent 55%, transparent 100%); 
background-repeat: no-repeat; 
transition: margin 1s linear; 
}
.spanHalfOrange:hover {
margin: 0 .9em 0 .3em; 
transition: margin 1s linear; 
}
.spanHalfOrange:hover::after {
left: .7em; 
transition: left 1s linear; 
}
.spanHalfOrange::before {content: ""; 
position: absolute; 
width: .13em; height: .13em; 
left: .23em; top: .23em; 
background-color: floralwhite; 
border-radius: 100%; 
}
.spanHalfOrange::after {content: ""; 
position: absolute; 
width: .65em; height: .65em; 
left: -.02em; top: -.05em; 
background-color: peachpuff; 
border-radius: 100%; 
box-shadow: inset -.1em -.15em .1em .21em darkorange; 
transition: left 1s linear; 
}
</style>
<p><span class=spanHalfOrange></span> Animated Orange. ['naranja animada' (<samp>:hover</samp>).]</p>


<style type="text/css"> /* 5/May/2014 11:09 */
.spanClockAnimated {position: relative; 
display: inline-block; 
margin: 0 .7em 0 .4em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockAnimated:before , .spanClockAnimated:after {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; 
background-color: black; 
-webkit-transform-origin: 50% bottom; 
transform-origin: 50% bottom; 
-webkit-animation: needles 5s infinite normal linear; 
animation: needles 5s infinite normal linear; 
}
.spanClockAnimated:after {height: 30%; 
top: 20%; 
-webkit-animation: needles 60s infinite normal linear; 
animation: needles 60s infinite normal linear; 
}
@keyframes needles {
form {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to {-webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
</style>
<p><span class=spanClockAnimated></span> Animated Clock Face. </p>


<style type="text/css">/*16/Mar/2014 23:23*/
.spanButterfly3 {position: relative; 
display: inline-block; 
margin: auto 1.5em .5em .3em; 
width: .1em; height: .15em; 
left: .505em; top: -.13em; 
border-color: transparent black black; 
border-style: solid; 
border-width: .025em; 
border-radius: 40% 40% 80% 80% / 40% 40% 100% 100%; 
}
.spanButterfly3:after {content: ""; 
position: absolute; 
display: block; 
width: .07em; height: .6em; 
left: .015em; top: .12em; 
background-color: maroon; 
border-radius: .1em .1em .1em .1em / .1em .1em 2em 2em; 
}
.spanButterfly3:before {content: ""; 
position: absolute; 
display: block; 
width: 1.2em; height: .65em; 
left: -.55em; top: .1em; 
-webkit-transform: scalex(.3); 
transform: scalex(.3); 
background-color: transparent; 
border-radius: .4em .4em 1.5em 1.5em / .5em .5em 1.5em 1.5em; 
background-image: radial-gradient(ellipse at top , transparent 0, transparent 20%, orange 25%, blueviolet 72%, transparent 72% ), 
radial-gradient(circle at bottom, transparent 0, transparent 15%, red 22%, blueviolet 60%, transparent 70% ); 
background-size: 115% .4em, 67% .5em; 
background-position: -.1em -.03em, .2em .15em; 
background-repeat: no-repeat; 
-webkit-transition: -webkit-transform 1s ease; 
transition: transform 1s ease; 
}
.spanButterfly3:hover::before {
-webkit-transform: scalex(1); 
transform: scalex(1); 
transition: transform 1s ease, -webkit-transform 1s ease; 
}
</style>
<p><span class=spanButterfly3></span> Butterfly. ['mariposa animada' (<samp>:hover</samp>).]</p>


<style type="text/css"> /* 24/Mar/2014 19:49 */
.spanPoopAnim{position: relative; 
display: inline-block; 
margin: 0 .8em .35em; 
width: .25em; height: .12em; 
background-color: black; 
border-radius: .3em .3em .1em .1em / .2em .2em .075em .075em; 
box-shadow: .01em .1em 0 .06em black, -.1em .2em 0 .04em black, 
.1em .2em 0 .045em black; 
}
.spanPoopAnim:before {content: ""; 
position: absolute; 
display: block; 
width: .02em; height: .02em; 
left: .4em; top: -.1em; 
background-color: black; 
border-style: solid; 
border-width: .03em; 
border-color: white silver; 
-webkit-animation: mosca0 1.7s infinite normal ease-in; 
animation: mosca0 1.7s infinite normal ease-in; 
}
@keyframes mosca0 {
   0% {left: .4em; top: -.1em; border-color: white silver; }
  25% {left: .05em; top: -.2em; border-color: white grey; }
 50% {left: -.4em; top: -.13em; border-color: white silver; }
 75% {left: 0; top: .07em; border-color: white grey; }
100% {lef 0t: .4em; top: -.1em; border-color: white silver; }
}
.spanPoopAnim:after {content: ""; 
position: absolute; 
display: block; 
width: .02em; height: .02em; 
left: -.2em; top: 0; 
background-color: black; 
border-style: solid; 
border-width: .03em; 
border-color: white silver; 
-webkit-animation: mosca1 1.7s infinite normal linear; 
animation: mosca1 1.7s infinite normal linear; 
}
@keyframes mosca1 {
   0% {left: -.2em; top: 0; border-color: white silver; }
  25% 0 {left: .16em; top: .08em; border-color: white grey; }
 50% {left: .35em; top: 0; border-color: white silver; }
 75% {left: 0; top: -.12em; border-color: white grey; }
100% {left: -.2em; top: 0; border-color: white silver; }
}
</style>
<p><span class=spanPoopAnim></span>  Poop with Flies. ['caca con moscas animadas'.]</p>



<style type="text/css"> /* 23/May/2014 12:45 */
.spanScrewAnim {position: relative; 
display: inline-block; 
margin: 0 .7em -.1em; 
width: .2em; height: .7em; 
text-align: center; 
background-color: black; 
border-color: black transparent; 
border-style: solid; 
border-width: .15em .16em 0; 
border-radius: .05em .05em 100% 100%; 
background-image: repeating-linear-gradient(25deg, black, grey .08em); 
background-position: 0 0; 
background-clip: content-box; 
box-shadow: inset 0 .05em 0 0 black; 
-webkit-animation: rosca 4s infinite normal linear;
animation: rosca 5800ms infinite normal linear;
}
@-webkit-keyframes rosca {
from {background-position: 0 0; } 
  to {background-position: 0 .7em; } 
}
@keyframes rosca {
from {background-position: 0 0; } 
  to {background-position: 0 .7em; } 
}
.spanScrewAnim:before {content: ""; 
display: block; 
margin: -.15em auto; 
width: .07em; height: .07em; 
background-color: white; 
-webkit-animation: giro 600ms infinite alternate linear;
animation: giro 600ms infinite alternate linear;
}
@-webkit-keyframes giro {
  0% {width: .07em; } 
 50%, 100% {width: 0; } 
}
@keyframes giro {
  0% {width: .07em; } 
 50%, 100% {width: 0; } 
}
</style>
<p><span class=spanScrewAnim></span> Screwing. ['tornillo animado.]</p>


<style type="text/css"> /* 6/Ago/2016 14:08 */
.spanAnimInsertCard {position: relative; 
display: inline-block; 
margin: 0 .5em .1em .7em; 
width: .8em; height: .5em; 
background: linear-gradient(black .1em, darkgrey .1em, darkgrey .15em, transparent .15em); 
border-radius: .05em; 
overflow: hidden; 
}
.spanAnimInsertCard::after {content: ""; 
position: absolute; 
width: .7em; height: .05em; 
left: 0; top: 0; 
border: solid .06em transparent; 
border-color: darkgrey darkgrey transparent; 
border-radius: inherit; 
}
.spanAnimInsertCard::before {content: ""; 
position: absolute; 
width: .12em; height: .48em; 
left: .1em; top: .07em; 
background-color: black; 
border: solid 0 grey; 
border-width: 0 .38em 0 .1em; 
border-radius: .08em; 
transform: perspective(1em) rot
ateX(50deg); 
perspective-origin: .45em; 
transition: top 1s linear; 
}
.spanAnimInsertCard:hover::before {top: -.38em; 
transition: top 1s linear; 
}
</style>
<p><span class=spanAnimInsertCard></span> Inserting Card. 'insertando tarjeta' (<samp>:hover</samp>).]</p>


<style type="text/css"> /* 25/Mar/2016 18:16 */
.spanNewtonCradle {position: relative; 
display: inline-block; 
margin: 0 .6em -.05em; 
width: .6em; height: .65em; 
border-style: solid; 
border-width: 0 .15em; 
border-color: transparent; 
box-shadow: 0 -.04em 0 0 black; 
background-image: 
radial-gradient(circle, black .096em, transparent .11em), 
linear-gradient(to right, transparent 40%, black 45%, black 55%, transparent 60%); 
background-size: .2em 1.1em; 
background-repeat: repeat-x; 
background-clip: content-box; 
background-origin: content-box; 
}
.spanNewtonCradle::before, .spanNewtonCradle::after {content: ""; 
position: absolute; 
width: .2em; height: .65em; 
left: -.2em; top: 0; 
background: inherit;
--myTurn: rotate(25deg);
transform-origin: top center; 
animation: pendulum 1500ms infinite normal ease-in-out; 
}
.spanNewtonCradle::after {
left: auto; right: -.2em;
animation-name: pendulum; 
animation-delay: 750ms;
--myTurn: rotate(-25deg);
}
/* The animation with custom declarations, courtesy of Kseso. */
@keyframes pendulum {
  0%, 50%, 100% {transform: rotate(0); }
  25% {transform: var(--myTurn); }
}
</style>
<p><span class=spanNewtonCradle></span> Newton's Cradle. ['bolas de Newton animadas'.]</p>


<style type="text/css"> /* 9/May/2015 20:20 */
.spanRedButtonAnim {position: relative; 
display: inline-block; 
margin: 0 .55em; 
width: 1.1em; height: .3em; 
border: none; 
border-bottom: solid.025em dimgrey; 
border-radius: 100%; 
background-image: linear-gradient(90deg, darkgrey, dimgrey); 
cursor: -webkit-grab; cursor: -moz-grab;
}
.spanRedButtonAnim::before {content: ""; 
position: absolute; 
width: .8em; height: .46em; 
left: .15em; bottom: .1em; 
border: none; 
border-bottom: solid.025em maroon; 
border-radius: .4em / .15em; 
background-image: linear-gradient(90deg, red, maroon); 
background-clip: content-box; 
}
.spanRedButtonAnim::after {content: ""; 
position: absolute; 
width: .8em; height: .25em; 
left: .15em; bottom: .34em; 
background: crimson; 
border-radius: inherit; 
}
.spanRedButtonAnim:hover::before {
height: .26em; 
border-top: solid .3em transparent; 
}
.spanRedButtonAnim:hover::after {
bottom: .26em; 
}
</style>
<p><span class=spanRedButtonAnim></span> Red Button. ['botón rojo animado' (<samp>:hover</samp>).]</p>


<style type="text/css"> /* 27/Mar/2016 13:58 */
.spanBarberPoleAnim {position: relative; 
display: inline-block; 
margin: 0 1em -.02em; 
width: .24em; height: .5em; 
border-style: solid; 
border-width: .05em; 
border-color: black transparent; 
background: 
linear-gradient(to left, rgba(0,0,0,.4), transparent),  
repeating-linear-gradient(38deg, red 0, red .1em, white .11em, white .19em, blue .2em, blue .3em, white .31em, white .39em); 
background-clip: content-box; 
animation: barbero 2500ms infinite linear;
}
.spanBarberPoleAnim::before {content: ""; 
position: absolute; 
width: .24em; height: .01em; 
left: -.035em; top: -.14em; 
border-style: double solid solid; 
border-width: .06em .04em .04em; 
border-color: black transparent; 
border-radius: 100% 100% 0 0; 
}
.spanBarberPoleAnim::after {content: ""; 
position: absolute; 
width: .26em; height: .01em; 
left: -.035em; top: auto; bottom: -.1em; 
border-style: solid solid double; 
border-width: 0 .04em .06em; 
border-color: black transparent; 
border-radius: 0 0 100% 100%; 
}
@keyframes barbero {
  0% {background-position: 0 0; }
  100% {background-position: 0 .5em; }
}
</style>
<p><span class=spanBarberPoleAnim></span> Animated Barber Pole. ['barra animada de barbería'.]</p>


<style type="text/css">
.spanGlobeAnimated {position: relative; 
display: inline-block; 
background-color: black; 
width: 22px; height: 2px; 
margin: auto 1.2em .4em .3em; 
border-collapse: separate; 
box-shadow: 20px 0 0 0 black, 
19px 11px 0 0 black, 3px 11px 0 0 black, 
19px -10px 0 0 black, 3px -10px 0 0 black; 
}
.spanGlobeAnimated:before {content: ""; 
display: block; 
width: 40px; height: 40px; 
position: absolute; 
left: 0; top: -20px; 
border: 2px solid black; 
border-radius: 20px; 
}
.spanGlobeAnimated:after {content: ""; 
display: block; 
width: 20px; height: 40px; 
position: absolute; 
left: 0; top: -20px; 
border: 2px solid black; 
border-radius: 1px 40px 40px 1px / 40px; 

-webkit-animation-name: mundo;
animation-name: mundo;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; 
-webkit-animation-direction: normal; 
animation-direction: normal; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
/*animation: mundo 1s infinite normal linear; */
}
@keyframes mundo {
  0% {width: 20px; left: 20px; border-radius: 1px 40px 40px 1px / 40px; }
  50% {width: 18px; left: 11px; border-radius: 18px / 40px; }
  100% {width: 20px; left: 0; border-radius: 40px 1px 1px 40px / 40px; }
}
@-webkit-keyframes mundo {
  0% {width: 20px; left: 20px; border-radius: 1px 40px 40px 1px / 40px; }
  50% {width: 18px; left: 11px; border-radius: 18px / 40px; }
  100% {width: 20px; left: 0; border-radius: 40px 1px 1px 40px / 40px; }
}
</style>
<p><span class=spanGlobeAnimated></span> Earth Globe Rotation. </p>

<style type="text/css">
.spanGlobeAnimatedOp {position: static; 
margin: auto 1.3em 0 1.05em; 
display: inline-block; 
width: 20px; height: 40px; 
border: 2px solid black; 
border-radius: 1px 40px 40px 1px / 40px; 
animation: mundoOp 1s infinite normal linear forwards; 
-webkit-animation: mundoOp 1s infinite normal linear forwards; 
}
.spanGlobeAnimatedOp:before {content: ""; 
display: block; 
width: 40px; height: 40px; 
position: absolute; 
left: 0; top: 0; 
border: 2px solid black; 
border-radius: 20px; 
}
.spanGlobeAnimatedOp:after {content: ""; 
display: block; 
position: absolute; 
left: 0; top: 20px; 
width: 22px; height: 2px; 
border-collapse: separate; 
box-shadow: 20px 0 0 0 black, 19px 11px 0 0 black, 3px 11px 0 0 black, 
19px -10px 0 0 black, 3px -10px 0 0 black; 
background-color: black; 
}

@keyframes mundoOp {
from {width: 20px; margin-left: 20px; margin-right: 0; border-radius: 1px 40px 40px 1px/40px; }
to {width: 20px; margin-left: 0; margin-right: 20px; border-radius: 40px 1px 1px 40px/40px; }
}
@-webkit-keyframes mundoOp {
from {width: 20px; margin-left: 20px; margin-right: 0; border-radius: 1px 40px 40px 1px/40px; }
to {width: 20px; margin-left: 0; margin-right: 20px; border-radius: 40px 1px 1px 40px/40px; }
}
</style>
<p style="position: relative; left: -1.1em; " ><span class=spanGlobeAnimatedOp></span> Earth Globe Rotation (Opera 12). </p>

<hr>
<p><small>A <a href="http://codepen.io/solipsistacp/details/yKczv/" title="[Ctrl] + click">Íconos CSS. Parte dos</a>. | A <a href="http://codepen.io/solipsistacp/details/tceoG/" title="[Ctrl] + click">Íconos CSS. Parte tres</a>.</small></p>

<style type="text/css">
.spanDoubleQuotationLeft {position: relative; 
display: inline-block; 
margin: 0 1.35em .1em 1em; 
width: .3em; height: .4em; 
background-color: black; 
border-radius: 50% ; 
border-collapse: separate; 
box-shadow: .4em 0 0 0 black; 
}
.spanDoubleQuotationLeft:before {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: .02em; top: -.15em; 
border-radius: 50%; 
border-width: .043em .02em 0 0; 
border-color: black transparent transparent black; 
border-style: solid;
transform: rotate(-70deg); 
}
.spanDoubleQuotationLeft:after {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: .42em; top: -.15em; 
border-radius: 50%; 
border-width: .043em .02em 0 0; 
border-color: black transparent transparent black; 
border-style: solid;
transform: rotate(-70deg); 
}
</style>
<p><span class=spanDoubleQuotationLeft></span> Double Quotation Left. [&#10077; (&amp;#10077;), dingbats 'doble comilla izquierda'.]</p>


<style type="text/css">
.spanDoubleQuotationRight {position: relative; 
display: inline-block; 
margin: 0 1.35em .1em 1em; 
width: .3em; height: .4em; 
background-color: black; 
border-radius: 50% ; 
border-collapse: separate; 
box-shadow: .4em 0 0 0 black; 
}
.spanDoubleQuotationRight:before {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: -.24em; top: .05em; 
border-radius: 50%; 
border-width: 0 0 .043em .02em; 
border-color: transparent black black transparent; 
border-style: solid;
-webkit-transform: rotate(-70deg); 
transform: rotate(-70deg); 
}
.spanDoubleQuotationRight:after {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: .18em; top: .05em; 
border-radius: 50%; 
border-width: 0 0 .043em .02em; 
border-color: transparent black black transparent; 
border-style: solid;
transform: rotate(-70deg); 
}
</style>
<p><span class=spanDoubleQuotationRight></span> Double Quotation Right. [&#10078; (&amp;#10078;), dingbats 'doble comilla derecha'.]</p>


<style type="text/css">
.spanMediumLeftParenthesis {position: relative; 
display: inline-block; 
margin: 0 .7em 0 1.3em; 
width: .5em; height: .8em; 
border-style: solid; 
border-color: transparent black; 
border-width: 0 0 0 .1em; 
border-radius: 50%; 
}
</style>
<p><span class=spanMediumLeftParenthesis></span> Medium Left Parenthesis. [&#10088; (&amp;#10088;), dingbats 'paréntesis izquierdo'.]</p>


<style type="text/css">
.spanMediumRightParenthesis {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .5em; height: .8em; 
border-style: solid; 
border-color: transparent black; 
border-width: 0 .1em 0 0; 
border-radius: 50%; 
}
</style>
<p><span class=spanMediumRightParenthesis></span> Medium Right Parenthesis. [&#10089; (&amp;#10089;), dingbats 'paréntesis derecho'.]</p>


<style type="text/css">
.spanLeftTortoiseShellBracket {position: relative; 
display: inline-block; 
margin: auto .8em 0 1.3em; 
width: .5em; height: .8em; 
border-style: solid; 
border-color: transparent black; 
border-width: .03em 0 .03em .08em; 
border-radius: 80% / 30%; 
}
</style>
<p><span class=spanLeftTortoiseShellBracket></span> Left Tortoise Shell Bracket. [&#10098; (&amp;#10098;), dingbats 'corchete izquierdo'.]</p>


<style type="text/css">
.spanRightTortoiseShellBracket {position: relative; 
display: inline-block; 
margin: auto 1.23em 0 .9em; 
width: .5em; height: .8em; 
border-style: solid; 
border-color: transparent black; 
border-width: .03em .08em .03em 0; 
border-radius: 80% / 30%; 
}
</style>
<p><span class=spanRightTortoiseShellBracket></span> Right Tortoise Shell Bracket. [&#10099; (&amp;#10099;), dingbats 'corchete derecho'.]</p>


<style type="text/css">
.spanMediumLeftPointingAngleBracket {position: relative; 
display: inline-block; 
margin: 0 1em .1em 1.2em; 
width: .4em; height: .4em; 
border-style: solid; 
border-color: transparent transparent black black; 
border-width: 0 0 .08em .08em; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanMediumLeftPointingAngleBracket></span> Medium Left-Pointing Angle Bracket, Less Than. [&#10092; (&amp;#10092;), dingbats 'paréntesis angular izquierdo'.]</p>


<style type="text/css">
.spanMediumRightPointingAngleBracket {position: relative; 
display: inline-block; 
margin: 0 1.2em .1em 1em; 
width: .4em; height: .4em; 
border-style: solid; 
border-color: black black transparent transparent; 
border-width:.08em .08em 0 0 ; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanMediumRightPointingAngleBracket></span> Medium Right-Pointing Angle Bracket, Less Than. [&#10093; (&amp;#10093;), dingbats 'paréntesis angular derecho'.]</p>


<style type="text/css">
.spanLeftPointingAngleQuotation {position: relative; 
display: inline-block; 
margin: 0 1em .1em 1.2em; 
width: .25em; height: .25em; 
border-style: solid; 
border-color: transparent transparent black black; 
border-width: .1em; 
border-radius: 30% 0; 
transform: rotate(45deg); 
}
.spanLeftPointingAngleQuotation:before {content: ""; 
position: absolute; 
left: .1em; top: -.3em; 
width: .25em; height: .25em; 
border-style: solid; 
border-color: transparent transparent black black; 
border-width: .1em; 
border-radius: 30% 0; 
}
</style>
<p><span class=spanLeftPointingAngleQuotation></span> Left-Pointing Angle Quotation Mark. [&#10094; (&amp;#10094;), dingbats 'doble comilla angular izquierda'.]</p>

<style>.spanRightPointingAngleQuotation {position: relative; 
display: inline-block; 
margin: 0 1.2em .1em 1em; 
width: .25em; height: .25em; 
border-style: solid; 
border-color: black black transparent transparent; 
border-width: .1em; 
border-radius: 30% 0; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanRightPointingAngleQuotation:before {content: ""; 
position: absolute; 
left: .1em; top: -.3em; 
width: .25em; height: .25em; 
border-style: solid; 
border-color: black black transparent transparent; 
border-width: .1em; 
border-radius: 30% 0; 
}
</style>
<p><span class=spanRightPointingAngleQuotation></span> Right-Pointing Angle Quotation Mark. [&#10095; (&amp;#10095;), dingbats 'doble comilla angular derecha'.]</p>


<style type="text/css">
.spanMediumLeftCurlyBracket{position: relative; 
display: inline-block; 
margin: 0 1.1em .1em 1.3em; 
width: .15em; height: .15em; 
border-radius: 50% 0; 
border-width: 0 0 .06em .06em; 
border-color: transparent transparent black black; 
border-style: solid;
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanMediumLeftCurlyBracket:before {content: ""; 
position: absolute; 
width: .2em; height: .3em; 
left: -.2em; top: -.3em; 
border-radius: 120% 0 120% 20%; 
border-width: .01em .01em .01em .1em; 
border-color: black transparent transparent black; 
border-style: solid;
transform: rotate(-45deg); 
}
.spanMediumLeftCurlyBracket:after {content: ""; 
position: absolute; 
width: .2em; height: .3em; 
left: .13em; top: .03em; 
border-radius: 20% 120% 0 120%; 
border-width: .01em .01em .01em .1em; 
border-color: transparent transparent black black; 
border-style: solid;
transform: rotate(-45deg); 
}
</style>
<p><span class=spanMediumLeftCurlyBracket></span> Medium Left Curly Bracket. [&#10100; (&amp;#10100;), dingbats 'llave izquierda'.]</p>


<style type="text/css">
.spanMediumRightCurlyBracket{position: relative; 
display: inline-block; 
margin: 0 1em .1em 1.4em; 
width: .15em; height: .15em; 
border-radius: 50% 0; 
border-width: .06em .06em 0 0; 
border-color: black black transparent transparent; 
border-style: solid;
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanMediumRightCurlyBracket:before {content: ""; 
position: absolute; 
width: .2em; height: .3em; 
left: -.3em; top: -.2em; 
border-radius: 0 120% 20% 120%; 
border-width: .01em .1em .01em .01em; 
border-color: black black transparent transparent; 
border-style: solid;
-webkit-transform: rotate(-45deg); 
transform: rotate(-45deg); 
}
.spanMediumRightCurlyBracket:after {content: ""; 
position: absolute; 
width: .2em; height: .3em; 
left: .04em; top: .14em; 
border-radius: 120% 20% 120% 0; 
border-width: .01em .1em .01em .01em; 
border-color: transparent black black transparent; 
border-style: solid;
-webkit-transform: rotate(-45deg); 
transform: rotate(-45deg); 
}
</style>
<p><span class=spanMediumRightCurlyBracket></span> Medium Right Curly Bracket. [&#10101; (&amp;#10101;), dingbats 'llave derecha'.]</p>


<style type="text/css"> /* 12/Ene/2016 16:43 */
.spanPlusMinus {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: .7em; height: .7em; 
background-image: 
linear-gradient(125deg, transparent 45%, black 47%, black 53%, transparent 55%); 
}
.spanPlusMinus::before {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .05em; top: .08em; 
background-image: 
linear-gradient(90deg, transparent 36%, black 38%, black 62%, transparent 64%), 
linear-gradient(transparent 36%, black 38%, black 62%, transparent 64%); 
}
.spanPlusMinus::after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
right: .05em; bottom: .08em; 
background-image: 
linear-gradient(transparent 36%, black 38%, black 62%, transparent 64%); 
}
</style>
<p><span class=spanPlusMinus></span> Plus Or Minus. [&#8723; (&amp;#8723;), operadores matemáticos 'menos o más'; &#177; (&amp;#177;), latino suplementario 1 'más-menos'.]</p>


<style type="text/css"> /* 27/Nov/2016 16:11 */
.spanReferenceMark {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .6em; 
border-radius: .05em; 
background: 
linear-gradient(to left bottom, transparent 45%, black 46%, black 54%, transparent 55%), 
linear-gradient(to right bottom, transparent 45%, black 46%, black 54%, transparent 55%), 
linear-gradient(white, white) center center, 
linear-gradient(to bottom, transparent 43%, black 43%, black 57%, transparent 57%), 
linear-gradient(to right, transparent 43%, black 43%, black 57%, transparent 57%), white; 
background-size: 100% 100%, 100% 100%, 70% 70%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanReferenceMark></span> Reference Mark. [&#8251; (&amp;#8251;), puntuación general 'marca de referencia'.]</p>


<style type="text/css"> /* 23/Ene/2016 17:58 */
.spanAsterisk {position: relative; 
display: inline-block; 
margin: 0 1.25em; 
width: .12em; height: .7em; 
background-color: black; 
}
.spanAsterisk::before , .spanAsterisk::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: 0; top: 0; 
background-color: inherit; 
transform: rotate(60deg); 
}
.spanAsterisk::after {transform: rotate(120deg); 
}
</style>
<p><span class=spanAsterisk></span> Asterisk. [&#128950; (&amp;#128950;), formas geométricas extendido 'asterisco de seis brazos medio'; &#128952; (&amp;#128952;), formas geométricas extendido 'asterisco de seis brazos grueso'; 
&#10033; (&amp;#10033;), dingbats 'asterisco grueso'.]</p>


<style type="text/css"> /* 23/Ene/2016 18:41 */
.spanOctothorpe {position: relative; 
display: inline-block; 
margin: 0 .95em .12em; 
width: .7em; height: .15em; 
border-style: solid; 
border-width: .1em 0; 
border-color: black; 
box-sizing: content-box; 
}
.spanOctothorpe::before {content: ""; 
position: absolute; 
width: .15em; height: .7em; 
left: .17em; top: -.28em; 
border-style: inherit; 
border-width: 0 .1em; 
border-color: inherit; 
box-sizing: inherit; 
transform: skewx(-10deg); 
}
</style>
<p><span class=spanOctothorpe></span> Number Sign. Octothorpe.[&#35; (&amp;#35;), latino básico 'numeral'.]</p>


<style type="text/css"> /* 26/Jun/2014 17:17 */
.spanArroba {position: relative; 
display: inline-block; 
margin: 0 1em 0 .9em; 
width: .7em; height: .7em; 
border-color: transparent transparent black black; 
border-style: solid; 
border-width: .09em .02em .1em .1em; 
border-radius: 100%; 
box-sha dow: inset 0 0 .15em .02em rgba(0, 0, 0, .7); 
background-image: radial-gradient(ellipse, transparent 0, transparent .045em, black .07em, black .13em, transparent .15em, transparent 100%), 
linear-gradient(black, black); 
background-size: .35em .46em, .09em .36em; 
background-repeat: no-repeat; 
background-position: .07em .14em, .325em .18em; 
-webkit-transform: rotate(10deg); 
transform: rotate(10deg); 
}
.spanArroba::before {content: ""; 
position: absolute; 
width: .58em; height: .55em; 
left: -.099em; top: -.045em; 
border-color: black black transparent transparent; 
border-style: solid; 
border-width: .09em .1em; 
border-radius: 100%; 
}
.spanArroba::after {content: ""; 
position: absolute; 
width: .25em; height: .4em; 
left: .225em; top: .045em; 
border-color: transparent transparent black transparent; 
border-style: solid; 
border-width: .09em; 
border-radius: 100%; 
}
</style>
<p><span class=spanArroba></span> Commercial At. [&#64; (&amp;#64;), latino básico 'arroba'.]</p>


<style type="text/css"> /* 5/Sep/2014 11:36 */
.spanDollar {position: relative; 
display: inline-block; 
margin: 0 1.25em -.05em; 
width: .04em; height: .8em; 
border-style: solid; 
border-width: 0 .073em; 
border-color: black; 
}
.spanDollar::before , .spanDollar::after {content: ""; 
position: absolute; 
left: -.21em; top: .36em; 
width: .3em; height: .22em; 
border-style: solid; 
border-width: .08em; 
border-color: black black black transparent; 
border-radius: 50% 50% 50% 40%; 
transform: rotate(20deg); 
}
.spanDollar::after { top: .06em; 
border-color: black transparent black black; 
border-radius: 50% 40% 50% 50%; 
}
</style>
<p><span class=spanDollar></span> Dollar. [&#36; (&amp;#36;), símbolos monetarios 'dólar'; &#128178; (&amp;#128178;), símbolos varios y pictogramas 'dólar en negrita'.]</p>


<style type="text/css"> /* 5/Sep/2014 13:38 */
.spanEuro {position: relative; 
display: inline-block; 
margin: 0 1em -.03em 1.1em; 
width: .45em; height: .58em; 
border-style: solid; 
border-width: .09em; 
border-color: black transparent black black; 
border-radius: .3em .3em .3em .3em / .4em .4em .3em .4em; 
}
.spanEuro::before {content: ""; 
position: absolute; 
width: .55em; height: .05em; 
left: -.2em; top: .24em; 
border-style: solid; 
border-width: .07em 0; 
border-color: black; 
transform: skewx(330deg); 
}
</style>
<p><span class=spanEuro></span> Euro. [&#8364; (&amp;#8364;), símbolos monetarios 'euro'.]</p>


<style type="text/css"> /* 5/Sep/2014 14:46 */
.spanYen {position: relative; 
display: inline-block; 
margin: 0 1.3em -.01em 1.25em; 
width: .1em; height: .3em; 
background-color: black; 
}
.spanYen::before {content: ""; 
position: absolute; 
width: .24em; height: .24em; 
left: -.16em; top: -.625em; 
border-style: solid; 
border-width: .1em; 
border-color: transparent black black transparent; 
border-radius: 100% 0 .06em 0; 
transform: rotate(45deg); 
}
.spanYen::after {content: ""; 
position: absolute; 
width: .4em; height: .06em; 
left: -.137em; top: -.18em; 
border-style: solid; 
border-width: .08em 0; 
border-color: black; 
</style>
<p><span class=spanYen></span> Yen. [&#165; (&amp;#165;), símbolos monetarios 'yen'.]</p>


<style type="text/css"> /* 5/Sep/2014 15:08 */
.spanPound {position: relative; 
display: inline-block; 
margin: 0 1.1em -.02em; 
width: .55em; height: .24em; 
border-bottom: solid .1em black; 
background-image: radial-gradient(ellipse at top left, transparent 0, transparent .15em, black .155em, black .245em, transparent .255em, transparent 100%); 
background-size: .28em .45em; 
background-repeat: no-repeat; 
}
.spanPound::before {content: ""; 
position: absolute; 
width: .25em; height: .25em; 
left: .15em; top: -.4em; 
border-style: solid; 
border-width: .1em; 
border-color: black transparent transparent black; 
border-radius: 100%; 
transform: rotate(30deg); 
}
.spanPound::after {content: ""; 
position: absolute; 
width: .4em; height: .05em; 
left: 0; top: -.14em; 
border-style: solid; 
border-width: .07em 0; 
border-color: black; 
}
</style>
<p><span class=spanPound></span> Pound. [&#163; (&amp;#163;), símbolos monetarios 'libra'.]</p>


<style type="text/css"> /* 5/Sep/2014 15:15 */
.spanCent {position: relative; 
display: inline-block; 
margin: 0 1.15em .05em; 
width: .3em; height: .36em; 
border-style: solid; 
border-width: .08em; 
border-color: black transparent black black; 
border-radius: 100%; 
}
.spanCent::before {content: ""; 
position: absolute; 
width: .06em; height: .7em; 
left: .11em; top: -.17em; 
background-color: black; 
}
</style>
<p><span class=spanCent></span> Cent. [&#162; (&amp;#162;), símbolos monetarios 'centavo'.]</p>


<style type="text/css"> /* 6/Sep/2014 11:33 */
.spanCurrency {position: relative; 
display: inline-block; 
margin: 0 1.1em .1em; 
width: .35em; height: .35em; 
border: solid .12em transparent; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .08em black, inset 0 0 0 .3em white; 
background-image: 
linear-gradient(to bottom right, transparent, transparent 45%, black 47%, black 53%, transparent 55%, transparent 100%), 
linear-gradient(to bottom left, transparent, transparent 45%, black 47%, black 53%, transparent 55%, transparent 100%); 
background-origin: border-box; 
}
</style>
<p><span class=spanCurrency></span> Currency. [&#164; (&amp;#164;), símbolos monetarios 'moneda corriente'.]</p>


<style type="text/css"> /* 30/Dic/2014 14:26 */
.spanInfinity {position: relative; 
display: inline-block; 
margin: 0 .8em .05em; 
width: 1.05em; height: .5em; 
transform: scaley(.9); 
}
.spanInfinity::before , .spanInfinity::after {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
left: auto; top: 0; 
border: solid .1em black; 
border-radius: 100% 0 100% 100%; 
transform: rotate(45deg); 
}
.spanInfinity::after {right: 0; 
border-radius: 100% 100% 100% 0; 
}
</style>
<p><span class=spanInfinity></span> Infinity. [&#8734; (&amp;#8734;), operadores matemáticos 'infinito'; 'lemniscata'.]</p>


<style type="text/css"> /* 4/Jul/2014 22:11 */
.spanLozenge {position: relative; 
display: inline-block; 
margin: 0 .95em -.1em; 
width: .8em; height: .8em; 
-webkit-transform: scalex(.75); 
transform: scalex(.75); 
}
.spanLozenge::before {content: ""; 
position: absolute; 
width: .565em; height: .565em; 
left: .1em; top: .1em; 
border: solid .1em black; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanLozenge></span> Lozenge. [&#9674; (&amp;#9674;), formas geométricas 'Losange'.]</p>


<style type="text/css"> /* 27/Mar/2015 13:17 */
.spanSymetry {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .3em; height: .7em; 
border-style: solid; 
border-width: 0 .3em; 
border-color: transparent; 
background: linear-gradient(black, black), 
linear-gradient(black, black) left center, 
linear-gradient(black, black) left bottom; 
background-size: 100% .15em; 
background-repeat: no-repeat; 
background-clip: content-box, border-box; 
background-origin: content-box, border-box; 
}
</style>
<p><span class=spanSymetry></span> Symetry. [&#9007; (&amp;#9007;), técnicos varios 'simetría'.]</p>


<style type="text/css"> /* 16/Jul/2015 13:35 */
.spanProjective {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1em; 
width: .7em; height: .4em; 
border: none; 
border-top: solid .1em black; 
background: 
linear-gradient(312deg, transparent 25%, black 30%, black 40%, transparent 45%), 
linear-gradient(48deg, transparent 25%, black 30%, black 40%, transparent 45%) right top; 
background-size: 50% 100%; 
background-repeat: no-repeat; 
background-clip: content-box; 
}
</style>
<p><span class=spanProjective></span> Projective. [&#8965; (&amp;#8965;), técnicos varios 'proyectiva'.]</p>


<style type="text/css"> /* 16/Jul/2015 13:40 */
.spanPerspective {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1em; 
width: .7em; height: .4em; 
border: none; 
border-top: double .2em black; 
background: 
linear-gradient(312deg, transparent 25%, black 30%, black 40%, transparent 45%), 
linear-gradient(48deg, transparent 25%, black 30%, black 40%, transparent 45%) right top; 
background-size: 50% 100%; 
background-repeat: no-repeat; 
background-clip: content-box; 
}
</style>
<p><span class=spanPerspective></span> Perspective. [&#8966; (&amp;#8966;), técnicos varios 'perspectiva'.]</p>


<style type="text/css"> /* 11/Ene/2016 18:37 */
.spanDiameter {position: relative; 
display: inline-block; 
margin: 0 .8em 0 1em; 
width: .5em; height: .5em; 
border: solid .1em transparent; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .05em black; 
background: linear-gradient(135deg, transparent 45%, black 47%, black 53%, transparent 55%) no-repeat; 
}
</style>
<p><span class=spanDiameter></span> Diameter. [&#8960; (&amp;#8960;), técnicos varios 'diámetro'.]</p>


<style type="text/css"> /* 17/May/2016 10:12 */
.spanCelsius {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .8em; height: .7em; 
}
.spanCelsius::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: 0; top: .05em; 
background-color: ; 
border: solid .05em black; 
border-radius: 100%; 
}
.spanCelsius::after {content: ""; 
position: absolute; 
width: .4em; height: .5em; 
left: .3em; top: 0; 
border-style: solid; 
border-width: .1em; 
border-color: black transparent black black; 
border-radius: .3em; 
}
</style>
<p><span class=spanCelsius></span> Degree Celsius. [&#8451; (&amp;#8451;), símbolos con letras 'grado celsius'.]</p>


<style type="text/css"> /* 17/May/2016 10:20 */
.spanFahrentheit {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .8em; height: .7em; 
}
.spanFahrentheit::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: 0; top: .05em; 
border: solid .05em black; 
border-radius: 100%; 
}
.spanFahrentheit::after {content: ""; 
position: absolute; 
width: .35em; height: .55em; 
left: .3em; top: .03em; 
border-style: solid; 
border-width: .1em 0 0 .1em; 
border-color: black; 
background: linear-gradient(black, black) 0 .17em no-repeat; 
background-size: 70% .1em; 
}
</style>
<p><span class=spanFahrentheit></span> Degree Fahrentheit. [&#8457; (&amp;#8457;), símbolos con letras 'grado fahrentheit'.]</p>







<hr>



<style type="text/css">/*2/Mar/2014 23:20*/
.spanSnow {position: relative; 
display: inline-block; 
width: .3em; height: 1em; 
margin: 0 1.3em 0 1.1em; 
background-image: linear-gradient(to left, transparent, transparent .13em, black .13em, black .17em, transparent .17em, transparent 100%), 
repeating-linear-gradient(45deg, transparent 0, transparent 15%, black 16%, black .1em), 
repeating-linear-gradient(315deg, transparent 0, transparent 15%, black 16%, black .1em), 
repeating-linear-gradient(315deg, transparent 0, transparent 15%, black 16%, black .1em), 
repeating-linear-gradient(45deg, transparent 0, transparent 15%, black 16%, black .1em); 
background-position: 0 0, 0 0, .17em 0, 0 .525em, .17em .525em; 
background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; 
background-repeat: no-repeat; 
}
.spanSnow:before, .spanSnow:after {content: ""; 
display: block; 
width: inherit; height: inherit; 
position: absolute; 
left: 0; top: 0; 
background-image: inherit; 
background-position: inherit; 
background-size: inherit; 
background-repeat: inherit; 
transform: rotate(60deg); 
}
.spanSnow:after {content: ""; 
transform: rotate(300deg); 
}
</style>
<p><span class=spanSnow></span> Snowflake (Cool). [&#10052; (&amp;#10052;) dingbats 'cristal de nieve' ('frío'); &#10054; (&amp;#10054;) dingbats 'cristal de nieve multichevrón'.]</p>


<style type="text/css">/*16/Mar/2014 23:22*/
.spanCoolHot {position: relative; 
display: inline-block; 
width: .3em; height: 1em; 
margin: 0 1.2em 0 1.15em; 
background-image: linear-gradient(to left, transparent 0, transparent .13em, blue .13em, blue .2em, transparent .2em, transparent 100%), 
linear-gradient(45deg, transparent 0, transparent .3em, blue .3em, blue .37em, transparent .37em, transparent 100%), 
linear-gradient(315deg, transparent 0, transparent .3em, blue .3em, blue .37em, transparent .37em, transparent 100%); 
background-position: 0 0, -.05em .015em, .175em .02em; 
background-size: 100% 100%, 50% 50%, 50% 50%; 
background-repeat: no-repeat; 
transform: rotate(60deg); 
}
.spanCoolHot:before {content: ""; 
display: block; 
width: inherit; height: inherit; 
position: absolute; 
left: 0; top: 0; 
background-image: inherit; 
background-position: inherit; 
background-size: inherit; 
background-repeat: inherit; 
transform: rotate(60deg); 
}
.spanCoolHot:after {content: ""; 
position: absolute; 
width: .65em; height: 1em; 
left: -.24em; top: .15em; 
background-image: linear-gradient(to left, transparent 0, transparent .13em, blue .13em, blue .18em, transparent .18em, transparent 100%), 
linear-gradient(45deg, transparent 0, transparent .15em, blue .15em, blue .2em, transparent .2em, transparent 100%), 
linear-gradient(315deg, transparent 0, transparent .33em, blue .33em, blue .395em, transparent .395em, transparent 100%), 
radial-gradient(circle at right, orange, orange 35%, red 55%, white 76%, white 100%); 
background-position: 0 0, .5em .54em, .5em .05em, 0 0; 
background-size: 100% 100%, .15em 50%, .15em 51%, .5em 100%; 
background-repeat: no-repeat; 
transform: rotate(300deg); 
}
</style>
<p><span class=spanCoolHot></span> Air conditioning (cooling / heating). ['aire acondicionado frío / calor'.]</p>


<style type="text/css">
.spanTermometer1 {position: relative; 
display: inline-block; 
background-color: black; 
width: .1em; height: 1em; 
margin: 0 1.3em; 
border-radius: .05em; 
}
.spanTermometer1:before {content: ""; 
display: block; 
width: .3em; height: .3em; 
position: absolute; 
left: -.1em; top: .8em; 
background-color: black; 
border-radius: 50%; 
}
</style>
<p><span class=spanTermometer1></span> Thermometer 1 (Temperature, Climate). [&#127777; (&amp;#127777;) unicode no válido 'termómetro'.]</p>

<style type="text/css">
.spanTermometer2 {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .125em; height: .125em; 
background-color: crimson; 
border-radius: 50%; 
border: .08em solid black; 
}
.spanTermometer2:before {content: ""; 
display: block; 
background-color: crimson; 
width: .035em; height: .85em; 
border-radius: .08em .08em 0 0; 
border-color: black; 
border-style: solid; 
border-width: .075em .075em 0; 
position: absolute; 
left: -.03em; top: -.95em; 
}
</style>
<p><span class=spanTermometer2></span> Thermometer 2.</p>


<style type="text/css"> /* 26/Feb/2015 22:01 */
.spanWind {position: relative; 
display: inline-block; 
margin: 0 .5em -.03em .8em; 
width: 1.3em; height: .8em; 
background: 
radial-gradient(circle at left, transparent, transparent .09em, grey .1em, grey .13em, transparent .14em, transparent 100%) 1em .09em, 
linear-gradient(grey, grey) .3em .28em, 
radial-gradient(circle at left, transparent, transparent .05em, grey .06em, grey .09em, transparent .1em, transparent 100%) .7em 0, 
linear-gradient(grey, grey) 0 .14em, 
radial-gradient(circle at left, transparent, transparent .09em, grey .1em, grey .13em, transparent .14em, transparent 100%) .81em .44em, 
linear-gradient(grey, grey) .12em .44em, 
radial-gradient(circle at left, transparent, transparent .05em, grey .06em, grey .09em, transparent .1em, transparent 100%) .5em .6em, 
linear-gradient(grey, grey) -.16em .6em; 
background-size: .14em .24em, .7em .05em, .1em .2em, .7em .05em ; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanWind></span> Wind. ['viento'.]</p>


<style type="text/css"> /* 23/Mar/2014 9:31 */
.spanCyclone {position: relative; 
display: inline-block; 
margin: auto 1.15em .2em; 
width: .35em; height: .35em; 
background-color: black; 
border: solid .028em grey; 
border-radius: 50%; 
box-shadow: inset 0 0 .1em .05em white; 
}
.spanCyclone:before {content: ""; 
position: absolute; 
width: .6em; height: .7em; 
left: -.03em; top: -.26em; 
border-color: black; 
border-style: solid; 
border-width: 0 .05em .01em 0; 
border-radius: 50%; 
box-shadow: inset -.07em -.03em .06em .025em black; 
}
.spanCyclone:after {content: ""; 
position: absolute; 
width: .6em; height: .7em; 
left: -.26em; top: -.1em; 
border-color: black; 
border-style: solid; 
border-width: .01em 0 0 .05em; 
border-radius: 50%; 
box-shadow: inset .07em .03em .06em .025em black; 
}
</style>
<p><span class=spanCyclone></span>  Cyclone. [&#127744; (&amp;#127744;), símbolos varios y pictogramas 'ciclón'.]</p>


<style type="text/css"> /* 21/Mar/2014 23:10 */
.spanRain {position: relative; 
display: inline-block; 
width: 1.3em; height: .8em; 
margin: auto .7em .1em .7em; 
background-image: linear-gradient(315deg, transparent 0, transparent .05em, black .05em, black .08em, transparent .08em, transparent 100%); 
background-position: 0 0; 
background-size: .2em .2em; 
border-radius: 60% 30% 50% 30%; 
}
</style>
<p><span class=spanRain></span> Rain. [&#9926; (&amp;#9926;), símbolos varios 'lluvia'.]</p>


<style type="text/css"> /* 12/Abr/2014 14:47 */
.spanRainbow {position: relative; 
display: inline-block; 
margin: 0 1em 0 .65em; 
width: 1.3em; height: .8em; 
background-color: lightskyblue; 
background-image: radial-gradient(ellipse at center bottom, transparent 0, transparent 28%, red 28%, red 30%, orange 38%, yellow 45%, lime 52%, royalblue 58%, indigo 63%, magenta 68%, magenta 70%, transparent 70%, transparent 100%); 
background-size: 100% 90%; 
background-repeat: no-repeat; 
background-position: 0 90%; 
border-radius: .15em .15em 0 0; 
}
</style>
<p><span class=spanRainbow></span>Rainbow. [&#127752; (&amp;#127752;), símbolos varios y pictogramas 'arcoiris'.]</p>


<style type="text/css"> /* 11/Jul/2015 12:49 */
.spanFog {position: relative; 
display: inline-block; 
margin: 0 .7em -.1em; 
width: 1.3em; height: .8em; 
border-radius: 130%; 
}
.spanFog::before , .spanFog::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: 0; top: 0; 
background: repeating-linear-gradient(rgba(150,150,150,.3) 20%, rgba(200,200,200,.5) 30%, rgba(160,160,160,.3) 50%, rgba(150,150,150,.2) 20%); 
border-radius: 120%; 
transform: rotate(4deg); 
}
.spanFog::after {
background: repeating-linear-gradient(rgba(180,180,180,.2) 20%, rgba(150,150,150,.3) 30%, rgba(190,190,190,.2) 50%); 
border-radius: 100%; 
box-shadow: inset 0 0 .25em .05em white; 
transform: rotate(-4deg); 
}
</style>
<p><span class=spanFog></span> Foggy. [&#127745; (&amp;#127745;), símbolos varios y pictogramas 'brumoso'; &#127787; (&amp;#127787;), símbolos varios y pictogramas 'niebla'.]</p>


<style type="text/css"> /* 27/Dic/2014 22:20 */
.spanComet {position: relative; 
display: inline-block; 
margin: 0 .7em 0 .9em; 
width: .9em; height: .17em; 
border-style: double; 
border-width: .2em .25em .2em 0; 
border-color: black transparent transparent; 
border-radius: 100%; 
transform: rotate(15deg); 
}
.spanComet::before , .spanComet::after {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: -.28em; top: .0em; 
background: 
radial-gradient(circle at right top, transparent, transparent .19em, black .2em, black  100%) right top, 
radial-gradient(circle at left top, transparent, transparent .19em, black .2em, black  100%) left top, 
radial-gradient(circle at right bottom, transparent, transparent .19em, black .2em, black  100%) right bottom, 
radial-gradient(circle at left bottom, transparent, transparent .19em, black .2em, black  100%) left bottom; 
background-size: 50.1% 50.1%; 
background-repeat: no-repeat; 
transform: rotate(10deg); 
}
.spanComet::after {transform: rotate(55deg); 
}
</style>
<p><span class=spanComet></span> Comet. Star of Bethlehem. [&#9732; (&amp;#9732;), símbolos varios 'cometa'; 'estrella de Belén'.]</p>


<style type="text/css"> /* 18/Jul/2014 21:33 */
.spanStar {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 1em; 
width: 0; height: 0; 
border-color: black transparent transparent; 
border-style: solid; 
border-width: .23em .3em; 
}
.spanStar::before, .spanStar::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.38em; top: -.28em; 
border: inherit; 
border-width: .2em .3em; 
transform: rotate(70deg); 
}
.spanStar::after {left: -.2em; 
transform: rotate(-70deg); 
}
</style>
<p><span class=spanStar></span> Star. [&#9733; (&amp;#9733;), símbolos varios 'estrella negra'.]</p>


<style type="text/css"> /* 23/Jun/2014 17:20 */
.spanSaturn {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .7em; height: .7em; 
background-image: linear-gradient(330deg, #ddd, #333, #888, #555, #ddd); 
border-radius: 50%; 
-webkit-transform: rotate(30deg); 
transform: rotate(30deg); 
}
.spanSaturn::before {content: ""; 
position: absolute; 
width: .86em; height: .5em; 
left: -.38em; top: -.12em; 
border-color: grey; 
border-style: ridge groove groove ridge; 
border-width: .2em .3em; 
border-radius: 50%; 
-webkit-transform: scaley(.4); 
transform: scaley(.4); 
}
.spanSaturn::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: 0; top: 0; 
border: inherit; 
border-radius: inherit; 
background: inherit; 
clip: rect(0 .7em .35em 0); 
}
</style>
<p><span class=spanSaturn></span> Saturn. ['Saturno'.]</p>


<style type="text/css"> /* 2/May/2014 23:19 */
.spanSun1 {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .6em; height: .6em; 
background-color: white; 
border-color: transparent; 
border-style: solid; 
border-width: .15em; 
border-radius: 50%; 
box-shadow: inset 0 0 0 .08em white, 
inset 0 0 0 .13em black, 
inset 0 0 0 .4em white; 
background-image: 
linear-gradient(-45deg, transparent, transparent 47%, black 48%, black 52%, transparent 53%, transparent 100%), 
linear-gradient(45deg, transparent, transparent 47%, black 48%, black 52%, transparent 53%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46%, black 47%, black 53%, transparent 54%, transparent 100%), 
linear-gradient(0deg, transparent, transparent 46%, black 47%, black 53%, transparent 54%, transparent 100%); 
background-size: .75em .75em; 
background-position: -.075em -.075em; 
}
</style>
<p><span class=spanSun1></span> Sun 1 (Bright). [&#9728; (&amp;#9728;), símbolos varios 'sol negro'; &#9788; (&amp;#9788;), símbolos varios 'sol blanco'; &#128262; (&amp;#128262;), símbolos varios y pictogramas 'brillo alto'.]</p>


<style type="text/css">
.spanSun2 {background: black; 
display: inline-block; 
position: relative; 
width: .7em; height: .7em; 
margin: 0 1.1em .1em .95em; 
}
.spanSun2:before {content: ""; 
position: absolute; 
top: 0; left: 0;
height: .7em; width: .7em; 
background-color: black; 
transform: rotate(30deg); 
}
.spanSun2:after {content: ""; 
position: absolute; 
top: 0; left: 0;
height: .7em; width: .7em; 
background: black; 
transform: rotate(60deg); 
}
</style>
<p><span class=spanSun2></span> Sun 2. </p>


<style type="text/css">
.spanMoon {background-color: black; 
display: inline-block; 
position: relative; 
width: .8em; height: .8em; 
border-radius: 50%; 
margin: 0 .95em .1em; 
}
.spanMoon:before {content:""; 
background-color: white; 
display: block; 
position: absolute; 
overflow: hidden; 
width: .6em; height: .6em; 
border-radius: 50%; 
top: .1em; left: .25em; 
}
</style>
<p><span class=spanMoon></span> Moon (Sleep). [&#127769; (&amp;#127769;), símbolos varios y pictogramas 'luna'.]</p>


<style type="text/css">
.spanFullMoon {display: inline-block; 
width: .8em; height: .8em; 
border: .05em solid black; 
border-radius: 50%; 
margin: 0 .9em .1em; 
}
</style>
<p><span class=spanFullMoon></span> Full Moon. [&#127765;; (&amp;#127765;), símbolos varios y pictogramas 'luna llena'.]</p>


<style type="text/css">
.spanFirstQuarterMoon {display: inline-block; 
position: relative; 
overflow: hidden; 
width: .4em; height: .8em; 
border: .05em solid black; 
border-left-width: .45em; 
border-radius: 50%; 
margin: 0 .9em .1em; 
}
</style>
<p><span class=spanFirstQuarterMoon></span> First Quarter Moon (Contrast). [&#127763; (&amp;#127763;), símbolos varios y pictogramas 'cuarto de luna inicial'.]</p>


<style type="text/css">
.spanNewMoon {background-color: black; 
display: inline-block; 
width: .9em; height: .9em; 
border-radius: 50%; 
margin: 0 .9em .1em; 
}
</style>
<p><span class=spanNewMoon></span> New Moon. [&#127761; (&amp;#127761;), símbolos varios y pictogramas 'luna nueva'.]</p>


<style type="text/css">
.spanLastQuarterMoon {display: inline-block; 
position: relative; 
overflow: hidden; 
width: .4em; height: .8em; 
border: .05em solid black; 
border-right-width: .45em; 
border-radius: 50%; 
margin: 0 .9em .1em; 
}
</style>
<p><span class=spanLastQuarterMoon></span> Last Quarter Moon. [&#127767; (&amp;#127767;), símbolos varios y pictogramas 'cuarto de luna final'.]</p>


<style type="text/css"> /* 25/Jun/2014 14:12 */
.spanWavyFlag {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .6em; height: .48em; 
background-image: 
radial-gradient(ellipse at bottom, black, black .16em, transparent .17em, transparent 100%), 
radial-gradient(ellipse at top, black, black .16em, transparent .17em, transparent 100%), 
radial-gradient(ellipse at bottom, transparent 0, transparent .14em, black .15em, black 100%), 
radial-gradient(ellipse at top, transparent 0, transparent .14em, black .15em, black 100%), 
linear-gradient(black, black), linear-gradient(black, black); 
background-size: .3em .1em, .3em .1em, .3em .1em, .3em .1em, .3em .2em, .3em .2em; 
background-repeat: no-repeat; 
background-position: 0 0, .3em .38em, 0 .3em, .3em .08em, 0 .1em, .3em .18em; 
border-bottom: solid .2em transparent; 
box-shadow: -.05em 0 0 0 black; 
}
</style>
<p><span class=spanWavyFlag></span> Wavy Flag. [&#127988; (&amp;#127988;), símbolos varios y pictogramas 'bandera ondeante'; &#9873; (&amp;#9873;), símbolos varios 'bandera negra'.]</p>


<style type="text/css"> /* 18/Sep/2014 19:02 */
.spanFoldedMap {position: relative; 
margin: 0 .9em 0 .8em; 
display: inline-block; 
border-color: dimgray transparent silver; 
width: .8em; height: 0; 
border-style: solid; 
border-width: .2em .1em; 
}
.spanFoldedMap:before {content: ""; 
display: block; 
width: .8em; height: 0; 
position: absolute; 
left: -.1em; top: -.6em; 
border-color: dimgray transparent silver; 
border-style: solid; 
border-width: .2em .1em; 
}
.spanFoldedMap:after {content: ""; 
display: block; 
width: .2em; height: .2em; 
position: absolute; 
left: .45em; top: -.65em; 
background-color: deeppink; 
border: solid .03em red; 
border-radius: .15em  .1em 0 .1em; 
background-image: radial-gradient(circle, white, white .05em, deeppink .06em, deeppink 100%); 
transform: rotate(45deg) skewy(10deg) skewx(10deg); 
}
</style>
<p><span class=spanFoldedMap></span> Folded Map ['mapa plegado']. </p>


<style type="text/css">
.spanPositionIndicator {position: relative; 
display: inline-block; 
margin: 0 1.1em .2em; 
width: .3em; 
height: .3em; 
border-radius: 50%; 
border: .05em solid black; 
}
.spanPositionIndicator:before {content: ""; 
position: absolute; 
width: .05em; 
height: .8em; 
left: .12em; 
top: -.25em; 
background-color: black; 
}
.spanPositionIndicator:after {content: ""; 
position: absolute; 
width: .6em; 
height: .05em; 
left: -.15em; 
top: .12em; 
background-color: black; 
}
</style>
<p><span class=spanPositionIndicator></span> Position Indicator. [&#8982; (&amp;#8982;), técnicos varios 'marcador de posición'.]</p>


<style type="text/css">
.spanGlobe1 {position: relative; 
display: inline-block; 
background-color: black; 
width: .6em; height: .6em; 
margin: 0 1em .3em; 
border-radius: 50%; 
}
.spanGlobe1:before {content: ""; 
display: block; 
width: .7em; height: .7em; 
position: absolute; 
left: -.1em; top: -.1em; 
border-style: solid;
border-width: .05em; 
border-color: transparent black black transparent; 
border-radius: 50%; 
}
.spanGlobe1:after {content: ""; 
width: 0; height: 0; 
position: absolute; 
left: .15em; top: .55em; 
border-style: solid;
border-width: .15em; 
border-color: transparent transparent black; 
}
</style>
<p><span class=spanGlobe1></span> Earth Globe 1. ['globo terráqueo, mapamundi'.]</p>


<style type="text/css">
.spanGlobe2 {position: relative; 
display: inline-block; 
background-color: black; 
width: 22px; height: 2px; 
margin: 0 1.6em .4em .8em; 
border-collapse: separate; 
box-shadow: 20px 0 0 0 black, 
19px 11px 0 0 black, 3px 11px 0 0 black, 
19px -10px 0 0 black, 3px -10px 0 0 black; 
}
.spanGlobe2:before {content: ""; 
display: block; 
width: 30px; height: 40px; 
position: absolute; 
left: 0; top: -20px; 
border: 2px solid black; 
border-radius: 20px 10px 10px 20px / 20px; 
}
.spanGlobe2:after {content: ""; 
display: block; 
width: 30px; height: 40px; 
position: absolute; 
left: 10px; top: -20px; 
border: 2px solid black; 
border-radius: 10px 20px 20px 10px / 20px; 
}
</style>
<p><span class=spanGlobe2></span>Earth Globe 2. [&#127760; (&amp;#127760;), símbolos varios y pictogramas 'globo terráqueo con meridianos'.]</p>


<style type="text/css">
.spanGlobe3 {position: relative; 
margin: 0 1.1em -.1em .8em; 
display: inline-block; 
width: 1em; height: 1em; 
border: solid .05em black; 
border-radius: 100%; 
background: radial-gradient(ellipse at bottom, transparent, transparent .4em, black .43em, black .49em, transparent .52em, transparent 100%) center bottom, 
radial-gradient(ellipse at right, transparent, transparent .73em, black .75em, black .78em, transparent .8em, transparent 100%) right center, 
linear-gradient(black, black) 0 center, 
radial-gradient(ellipse at top, transparent, transparent .4em, black .43em, black .49em, transparent .52em, transparent 100%) center 0, 
radial-gradient(ellipse at left, transparent, transparent .73em, black .75em, black .78em, transparent .8em, transparent 100%) left center; 
background-size: 200% 50%, 100% 200%, 100% .05em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanGlobe3></span>Earth Globe 3.</p>


<style type="text/css">
.spanAmericas {position: relative; 
display: inline-block; 
border: 1px solid black; 
width: 1em; height: 1em; 
margin: 0 .9em -.1em .8em; 
border-radius: 50%; 
}
.spanAmericas:before {content: ""; 
position: absolute; 
top: .12em; left: .2em; 
width: 0; height: 0; 
border-width: .4em .3em 0 .23em;
border-color: black transparent transparent; 
border-style: solid; 
}
.spanAmericas:after {content: ""; 
position: absolute; 
top: .52em; left: .45em; 
width: 0; height: 0; 
border-width: .1em 0 .35em .3em;
border-color: transparent transparent transparent black; 
border-style: solid; 
}
</style>
<p><span class=spanAmericas></span> Americas. [&#127758; (&amp;#127758;), símbolos varios y pictogramas 'globo terráqueo con Américas'.]</p>


<style type="text/css"> /* 23/Jun/2015 14:24 */
.spanSeaWave {position: relative; 
display: inline-block; 
margin: 0 .7em -.12em; 
width: 1.2em; height: .7em; 
background: radial-gradient(circle at top, transparent .11em, lightblue .12em); 
background-repeat: repeat-x; 
background-size: .24em .25em; 
overflow: hidden; 
}
.spanSeaWave::before , .spanSeaWave::after {content: ""; 
position: absolute; 
left: -.06em; top: .12em; 
width: 1.4em; height: .25em; 
background: radial-gradient(circle at top, transparent .11em, royalblue .12em); 
background-repeat: repeat-x; 
background-size: .24em .25em; 
}
.spanSeaWave::after {
left: -.03em; top: .25em; 
background: radial-gradient(circle at top, transparent .11em, mediumblue .12em); 
background-repeat: inherit; 
background-size: inherit; 
}
</style>
<p><span class=spanSeaWave></span> Sea Waves. Water Wave. [&#127754; (&amp;#127754;), símbolo 'ola de agua', 'ondas de mar'.]</p>


<style type="text/css"> /* 28/sep/2014 9:48 */
.spanAnchor {position: relative; 
display: inline-block; 
margin: 0 1em 0; 
width: .6em; height: .45em; 
border-color: transparent transparent black; 
border-style: solid; 
border-width: .0em 0 .1em; 
border-radius: 0 0 .3em .3em; 
background-image: linear-gradient(to left, transparent, transparent 43.5%, black 44%, black 56%, transparent 56.5%, transparent 100%); 
background-clip: content-box; 
background-repeat: no-repeat; 
}
.spanAnchor::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
top: -.2em; left: .2em; 
border: solid .06em black; 
border-radius: 100%; 
}
.spanAnchor::after {content: ""; 
position: absolute; 
margin: .07em .17em .1em; 
width: .26em; height: .08em; 
background-color: black; 
}
</style>
<p><span class=spanAnchor></span> Anchor. [&#9875; (&amp;#9875;), símbolos varios 'ancla'.]</p>


<style type="text/css"> /* 8/Dic/2015 20:43 */
.spanBullseye {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .6em; 
border: solid .03em black; 
border-radius: 100%; 
background-image: 
radial-gradient(circle, white .17em, black .18em, black .19em, transparent .2em), 
radial-gradient(circle, black .027em, transparent .03em), 
radial-gradient(circle, black .027em, silver .03em); 
background-size: 100% 100%, .18em .18em, .25em .25em; 
background-position: center center; 
background-clip: content-box; 
transform: rotatez(15deg); 
}
</style>
<p><span class=spanBullseye></span> bullseye. [&#9678; (&amp;#9678;), formas geométricas 'ojo de buey'.]</p>


<style type="text/css">
.spanSailBoat {position: relative; 
display: inline-block; 
background-color: white; 
margin: 0 1.3em .1em; 
width: .03em; height: .68em; 
border-color: white black; 
border-style: solid; 
border-width: 0 .06em; 
}
.spanSailBoat:before {content: ""; 
position: absolute; 
width: .05em; height: 0; 
left: -.39em; top: -.02em; 
border-style: solid; 
border-width: 0 .36em .45em; 
border-color: black transparent; 
z-index: -1; 
}
.spanSailBoat:after {content: ""; 
position: absolute; 
width: .6em; height: 0; 
left: -.55em; top: .48em; 
border-color: black transparent; 
border-style: solid; 
border-width: .28em .2em 0 .3em; 
border-radius: 0 .2em /.5em
}
</style>
<p><span class=spanSailBoat></span> Sail Boat (Yacht Harbour). [&#9973; (&amp;#9973;), otros símbolos 'velero, marina'.]</p>


<style type="text/css"> /* 26/Ene/2015 12:21 */
.spanBoatRudder {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .76em; height: .76em; 
background: 
radial-gradient(ellipse, black, black 65%, transparent 75%, transparent 100%), 
radial-gradient(ellipse, black, black 65%, transparent 75%, transparent 100%), white; 
background-size: .07em 120%, 120% .07em; 
background-repeat: no-repeat; 
background-position: center center; 
}
.spanBoatRudder::before {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
background: inherit; 
background-color: transparent; 
transform: rotatez(45deg); 
}
.spanBoatRudder::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
background-image: 
radial-gradient(circle, black, black .07em, transparent .075em, transparent .2em, black .21em, black .27em, transparent .28em, transparent 100%); 
}
</style>
<p><span class=spanBoatRudder></span> Boat Rudder. ['timón de barco'.]</p>


<style type="text/css"> /* 18/Ago/2014 18:31 */
.spanTrain {position: relative; 
display: inline-block; 
margin: 0 1.1em .15em 1em; 
width: .6em; height: .5em; 
background-color: white; 
border-radius: .1em; 
box-shadow: inset 0 -.03em 0 .115em black; 
}
.spanTrain::before {content: ""; 
position: absolute; 
width: .45em; height: .45em; 
left: .015em; top: .46em; 
border-color: black transparent transparent black; 
border-style: solid; 
border-width: .06em; 
border-radius: .1em 0 0 0; 
transform: rotate(45deg); 
}
.spanTrain::after {content: ""; 
position: absolute; 
width: .06em; height: .06em; 
left: .26em; top: -.04em; 
background-color: silver; 
border: solid .03em black; 
border-radius: 100%; 
box-shadow: -.15em .4em 0 0 white, .14em .4em 0 0 white; 
}
</style>
<p><span class=spanTrain></span> Train. [&#128646; (&amp;#128646;), símbolos de mapa y transporte 'tren'.]</p>


<style type="text/css">
.spanAirplane {position: relative; 
display: inline-block; 
background-color: black; 
margin: 0 .75em .3em; 
width: 1.2em; height: .2em; 
border-radius: 50% 40% 40% 50%; 
}
.spanAirplane:before {content: ""; 
position: absolute; 
width: .1em; height: .4em; 
left: .05em; top: -.1em; 
background-color: black; 
border-radius: 50%; 
}
.spanAirplane:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .55em; top: -.48em; 
border-style: solid; 
border-width: .6em .25em; 
border-color: transparent transparent transparent black; 
border-radius: 20% 0 0 20%; 
}
</style>
<p><span class=spanAirplane></span> Airplane (Airport). [&#9992; (&amp;#9992;), dingbats 'aeroplano, aeropuerto'.]</p>


<style type="text/css"> /* 19/Dic/2017 21:46 */
.spanArrival {position: relative; 
display: inline-block; 
margin: 0 .6em 0 .9em; 
width: 1.1em; height: .7em; 
border: none; 
border-bottom: solid .05em black; 
}
.spanArrival::before {content: ""; 
position: absolute; 
width: 1em; height: .6em; 
left: .05em; bottom: .2em; 
background-image: 
radial-gradient(ellipse at bottom, black, black 30%, transparent 35%), 
linear-gradient(50deg, black 15%, transparent 17%); 
background-size: 600% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-position: center .14em, 0 0; 
border-radius: 0 0 30% 50% / 0 0 10% 10%; 
transform: rotatez(10deg); 
}
.spanArrival::after {content: ""; 
position: absolute; 
width: .15em; height: .5em; 
left: 50%; bottom: .2em; 
background-color: black; 
border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
transform: rotatez(340deg); 
transform-origin: left bottom; 
}
</style>
<p><span class=spanArrival></span> Airplane Arriving (Airport). [&#128748; (&amp;#128748;), símbolos de mapas y transporte 'avión arribando'.]</p>


<style type="text/css"> /* 19/Dic/2017 21:55 */
.spanDeparture {position: relative; 
display: inline-block; 
margin: 0 .6em 0 .9em; 
width: 1.1em; height: .7em; 
border: none; 
border-bottom: solid .05em black; 
}
.spanDeparture::before {content: ""; 
position: absolute; 
width: 1em; height: .6em; 
left: 0; bottom: .2em; 
background-image: 
radial-gradient(ellipse at bottom, black, black 30%, transparent 35%), 
linear-gradient(50deg, black 15%, transparent 17%); 
background-size: 600% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-position: center .14em,  0 0; 
border-radius: 0 0 30% 50% / 0 0 10% 10%; 
transform: rotatez(350deg); 
}
.spanDeparture::after {content: ""; 
position: absolute; 
width: .15em; height: .5em; 
left: 50%; bottom: .2em; 
background-color: black; 
border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
transform: rotatez(320deg); 
transform-origin: left bottom; 
}
</style>
<p><span class=spanDeparture></span> Airplane Departure (Airport). [&#128747; (&amp;#128747;), símbolos de mapas y transporte 'avión despegando'.]</p>


<style type="text/css"> /* 3/Oct/2014 13:32 */
.spanCopter {position: relative; 
display: inline-block; 
margin: 0 .8em .05em; 
width: 1em; height: .4em; 
border-radius: .1em .35em .2em 1.5em / .1em .45em .2em .5em; 
box-shadow: .1em .18em 0 -.15em white, .13em .23em 0 -.15em black; 
background-image: radial-gradient(ellipse at bottom left, white, white .5em, black .52em, black 100%), 
radial-gradient(circle at top right, silver, silver .3em, black .32em, black 95%); 
background-size: .6em .4em, 50% 100%; 
background-position: left bottom, right top; 
background-repeat: no-repeat; 
}
.spanCopter::before {content: ""; 
position: absolute; 
width: .06em; height: .1em; 
left: .15em; top: -.15em; 
background-color: black; 
border-style: solid; 
border-width: .06em .45em 0; 
border-color: black white; 
}
.spanCopter::after {content: ""; 
position: absolute; 
width: .04em; height: .1em; 
left: -.1em; top: -.06em; 
background-color: silver; 
border-style: double solid; 
border-width: .05em .095em; 
border-color: black rgba(0,0,0,.5); 
border-radius: 100%; 
}
</style>
<p><span class=spanCopter></span> Helicopter. [&#128641; (&amp;#128641;), símbolos de mapa y transporte 'helicóptero'.]</p>


<style type="text/css"> /* 14/Jun/2014 15:30 */
.spanAircraftBallon {position: relative; 
display: inline-block; 
margin: 0 1.1em .3em 1.05em; 
width: .45em; height: .4em; 
border: solid 1px dimgrey; 
border-radius: 50% 50% 60% 60% / 50% 50% 80% 80%; 
background-image: radial-gradient(circle, transparent 0, transparent .25em, darkslategrey .26em, dimgrey 100%), 
radial-gradient(circle, silver 0, silver .25em, dimgrey .26em, darkslategrey 100%); 
background-size: 200% 200%; 
background-repeat: no-repeat; 
background-position: -.07em -.2em, -.39em -.2em; 
}
.spanAircraftBallon::before {content: ""; 
position: absolute; 
width: .17em; height: 0; 
left: .09em; top: .3em; 
border-color: transparent transparent black; 
border-style: solid; 
border-width: .3em .05em .1em; 
border-radius: 0 0 .05em .05em / 0 0 .15em .15em; 
background-image: linear-gradient(90deg, transparent 0, transparent .12em, black .13em, black .14em, transparent .15em, transparent 100%), 
linear-gradient(80deg, transparent 0, transparent .12em, black .13em, black .145em, transparent .155em, transparent 100%), 
linear-gradient(278deg, transparent 0, transparent .115em, black .125em, black .14em, transparent .15em, transparent 100%); 
background-size: .26em .25em; 
background-repeat: no-repeat; 
background-position: -.052em -.2em, -.13em -.21em, .035em -.22em; 
background-clip: border-box; 
}
.spanAircraftBallon::after {content: ""; 
position: absolute; 
width: .1em; height: .04em; 
left: .068em; top: .355em; 
background-color: black; 
border-color: black transparent transparent; 
border-style: solid; 
border-width: .1em; 
background-clip: content-box; 
}
</style>
<p><span class=spanAircraftBallon></span> Aircraft Ballon. ['globo aerostático'.]</p>



<style type="text/css"> /* 30/Jun/2014 16:26 */
.spanBriefcase {position: relative; 
display: inline-block; 
margin: 0 .9em .05em; 
width: .86em; height: .52em; 
background-color: black; 
border-radius: .05em; 
background-image: 
radial-gradient(ellipse at top, black, black 64%, grey 68%, grey 70%, black 75%, black 100%); 
background-size: 1.72em .52em; 
background-position: -.43em -.25em; 
background-repeat: no-repeat; 
}
.spanBriefcase:before {content: ""; 
position: relative; 
display: block; 
margin: 24.5% auto; 
width: .15em; height: .1em; 
background-color: white; 
}
.spanBriefcase:after {content: ""; 
position: absolute; 
width: .19em; height: .1em; 
left: .29em; top: -.1em; 
background-color: transparent; 
border-color: black; 
border-style: solid; 
border-width: .05em .05em 0; 
border-radius: 30% 30% 0 0; 
}
</style>
<p><span class=spanBriefcase></span> Briefcase. [&#128188; (&amp;#128188;), símbolos varios y pictogramas 'portafolios'.]</p>


<style type="text/css"> /* 6/Abr/2014 19:19 */
.spanBag {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .86em; height: .52em; 
background-color: black; 
border-radius: .1em; 
}
.spanBag:before {content: ""; 
position: absolute; 
width: 54%; height: 100%; 
left: 23%; top: 0; 
border-color: white; 
border-style: solid; 
border-width: 0 .06em; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.spanBag:after {content: ""; 
position: absolute; 
width: .19em; height: .1em; 
left: .29em; top: -.1em; 
background-color: transparent; 
border-color: black; 
border-style: solid; 
border-width: .05em .05em 0; 
}
</style>
<p><span class=spanBag></span> Baggage. ['valija', 'maleta'.]</p>


<style type="text/css"> /* 6/Abr/2014 22:49 */
.spanBagClaim1 {position: relative; 
display: inline-block; 
margin: 0 .9em .1em; 
width: .86em; height: .52em; 
background-color: black; 
border-radius: .1em; 
background-image: linear-gradient(to right, transparent, transparent 23%, white 23.5%, white 28%, transparent 28.5%, transparent 73%, white 73.5%, white 78%, transparent 78.5%, transparent 100%); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-position: 0 0; 
}
.spanBagClaim1:before {content: ""; 
position: absolute; 
width: .19em; height: .1em; 
left: .29em; top: -.1em; 
background-color: transparent; 
border-color: black; 
border-style: solid; 
border-width: .05em .05em 0; 
}
.spanBagClaim1:after {content: ""; 
position: absolute; 
width: 1em; height: .03em; 
left: -.05em; top: .545em; 
border-color: black; 
border-style: dotted solid solid; 
border-width: .13em 0 .03em; 
}
</style>
<p><span class=spanBagClaim1></span> Baggage Claim 1. [&#128708; (&amp;#128708;), símbolos de mapa y transporte 'cinta de equipaje'.]</p>

<style type="text/css"> /* 6/Abr/2014 22:59 */
.spanBagClaim2 {position: relative; 
display: inline-block; 
margin: 0 .9em .1em; 
width: .86em; height: .52em; 
background-color: black; 
border-radius: .1em; 
background-image: linear-gradient(to right, transparent, transparent 23%, white 23.5%, white 28%, transparent 28.5%, transparent 73%, white 73.5%, white 78%, transparent 78.5%, transparent 100%); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-position: 0 0; 
}
.spanBagClaim2:before {content: ""; 
position: absolute; 
width: .19em; height: .1em; 
left: .29em; top: -.1em; 
background-color: transparent; 
border-color: black; 
border-style: solid; 
border-width: .05em .05em 0; 
}
.spanBagClaim2:after {content: ""; 
position: absolute; 
width: 1em; height: .15em; 
left: -.05em; top: .51em; 
border-color: black; 
border-style: solid; 
border-width: 0 0 .03em; 
background-image: radial-gradient(circle, black, black .05em, transparent .05em, transparent 100%); 
background-size: .17em .15em; 
background-repeat: repeat-x; 
background-position: -.02em 0; 
}
</style>
<p><span class=spanBagClaim2></span> Baggage Claim 2.</p>


<style type="text/css"> /* 30/Sep/2014 13:09 */
.spanElevator {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .5em; height: .6em; 
border: none; 
border-top: solid .12em transparent; 
box-shadow: inset 0 0 0 .03em black; 
background-image: 
radial-gradient(circle, black , black .06em, transparent .08em, transparent 100%),
linear-gradient(black, black), 
linear-gradient(white, white); 
background-size: .205em .2em, .05em .11em, 100% 100%; 
background-repeat: repeat-x, no-repeat; 
background-position: .05em .06em, center -.1em, 0 0; 
background-clip: border-box; content-box; 
}
.spanElevator::before , .spanElevator::after {content: ""; 
position: absolute; 
width: .04em; height: 0; 
left: .082em; top: .24em; 
border-style: solid; 
border-width: 0 .06em .3em; 
border-color: black transparent; 
}
.spanElevator::after {left: .27em; 
border-width: .3em .06em 0; 
}
</style>
<p><span class=spanElevator></span> Elevator. ['ascensor'.]</p>


<style type="text/css"> /* 21/Mar/2014 23:08 */
.spanEscalator {position: relative; 
display: inline-block; 
background-color: white; 
width: .26em; height: .13em; 
margin: 0 1.45em 0 .85em; 
border-style: solid; 
border-width: .08em; 
border-color: black; 
border-radius: .2em; 
box-shadow: .63em -.44em 0 -.06em white, .61em -.44em 0 0 black; 
}
.spanEscalator:before {content: ""; 
position: absolute; 
top: -.53em; left: .35em;
width: .06em; height: .6em; 
background-color: black; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
box-shadow: .19em .06em 0 .01em black, .1em .01em 0 .05em white; 
}
.spanEscalator:after {content: ""; 
position: absolute; 
top: -.05em; left: .55em;
width: .1em; height: .1em; 
background-color: white; 
border-style: solid; 
border-width: .05em; 
border-color: white white black black;  /* DOWN */
border-color: black black white white;  /* UP */
background-image: linear-gradient(315deg, white 0, white 34%, black 34%, black 66%, white 66%, white 100%); 
}
</style>
<p><span class=spanEscalator></span> Escalator (Up). ['escalera mecánica hacia arriba'.]</p>


<style type="text/css"> /* 1/Jun/2014 17:01 */
.spanStairs1 {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: 1em; height: .7em; 
background-image: linear-gradient(150deg, white, white 50%, transparent 50.5%, transparent 55%, black 55.5%, black 60%, white 60.5%, white 100%), repeating-linear-gradient(transparent, transparent .04em, black .045em, black .07em); 
background-size: 100% 100%, 100% .5em; 
background-repeat: no-repeat; 
background-position: 0 0, 0 .12em; 
}
.spanStairs1::before {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .18em; top: .1em; 
border-color: black black transparent transparent; 
border-style: solid; 
border-width: .05em .05em .1em .1em; 
border-radius: .06em 0 .06em .1em; 
-moz-box-sizing: border-box;
box-sizing: border-box;
background-image: linear-gradient(315deg, white, white .325em, black .33em, black .38em, transparent .385em, transparent 100%); 
background-size: .35em .35em; 
background-repeat: no-repeat; 
background-position: -.1em -.05em; 
-webkit-transform: rotate(15deg); 
transform: rotate(15deg); 
}
</style>
<p><span class=spanStairs1></span> Stairs 1. ['escaleras'.]</p>


<style type="text/css"> /* 2/Jun/2014 16:45 */
.spanStairs2 {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .9em; height: .6em; 
border: solid .03em black; 
border-bottom: solid .1em black; 
background-color: white; 
background-image: linear-gradient(45deg, transparent, transparent .445em, black .45em, black .565em, transparent .58em, transparent  100%); 
background-size: 1em .6em; 
background-repeat: no-repeat; 
background-position: -.09em .09em; 
}
.spanStairs2::before {content: ""; 
position: absolute; 
width: .8em; height: .2em; 
left: .05em; top: .2em; 
background-image: 
linear-gradient(315deg, black 25%, transparent 25%),
linear-gradient(45deg, black 25%, transparent 25%);    
background-size: .2em .2em; 
background-repeat: repeat-x; 
background-position: -.1em 0; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanStairs2::after {content: ""; 
content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .55em; top: .1em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .1em .05em .05em .1em; 
border-radius: .1em 0 0 0; 
-moz-box-sizing: border-box;
box-sizing: border-box;
background-image: linear-gradient(45deg, white, white .215em, black .22em, black .28em, white .285em, white 100%); 
background-size: .35em .35em; 
background-repeat: no-repeat; 
background-position: -.1em -.1em; 
}
</style>
<p><span class=spanStairs2></span> Stairs 2. </p>


<style type="text/css"> /* 17/Jul/2014 14:49 */
.spanStairs3 {position: relative; 
display: inline-block; 
margin: 0 1.15em -.07em; 
width: .4em; height: .77em; 
background-image: linear-gradient(275deg, transparent, transparent .31em, black .33em, black .385em, white .4em, white 100%), 
linear-gradient(85deg, transparent, transparent .31em, black .33em, black .385em, white .4em, white 100%), 
repeating-linear-gradient(to top, white, white .07em, black .07em, black .1em); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-position: 0 0; 
}
.spanStairs2::before {content: ""; 
position: absolute; 
width: .8em; height: .2em; 
left: .05em; top: .2em; 
background-image: 
linear-gradient(315deg, black 25%, transparent 25%),
linear-gradient(45deg, black 25%, transparent 25%);	
background-size: .2em .2em; 
background-repeat: repeat-x; 
background-position: -.1em 0; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanStairs2::after {content: ""; 
content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .55em; top: .1em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .1em .05em .05em .1em; 
border-radius: .1em 0 0 0; 
-moz-box-sizing: border-box;
box-sizing: border-box;
background-image: linear-gradient(45deg, white, white .215em, black .22em, black .28em, white .285em, white 100%); 
background-size: .35em .35em; 
background-repeat: no-repeat; 
background-position: -.1em -.1em; 
}
</style>
<p><span class=spanStairs3></span> Stairs 3. [&#30446; (&amp;#30446;), otros caracteres (han) 'ojo (radical 109)'.]</p>


<style type="text/css"> /* 1/Abr/2014 13:39 */
.spanShower {position: relative; 
display: inline-block; 
margin: 0 1.4em 0 1.1em; 
background-color: aliceblue; 
width: .5em; height: .35em; 
border-color: black transparent transparent; 
border-style: solid; 
border-width: .15em 0 0; 
border-radius: .2em .2em 0 0; 
background-image: radial-gradient(ellipse, black 0, black .02em, transparent .025em, transparent 100%); 
background-size: .08em .1em; 
background-repeat: repeat; 
}
.spanShower:before {content: ""; 
position: absolute; 
width: .26em; height: .15em; 
left: .2em; top: -.3em; 
border-color: black; 
border-style: solid; 
border-width: .08em 0 0 .08em; 
border-radius: .1em 0 0; 
}
</style>
<p><span class=spanShower></span>Shower. [&#128703; (&amp;#128703;), símbolos de mapa y transporte 'ducha'.]</p>

<style type="text/css">
.spanToilet1{position: relative; 
display: inline-block; 
margin: 0 .9em .3em; 
width: .7em; height: .5em; 
border-style: solid; 
border-color: black; 
border-width: 0 .2em .35em 0; 
border-radius: 0 .1em .15em .3em / 0 .2em .3em .2em; 
}
.spanToilet1:before {content: ""; 
position: absolute; 
width: .15em; height: .45em; 
left: .08em; top: .4em; 
border-color: black;
border-style: solid; 
border-width: 0 0 .25em .58em; 
border-radius: 20% 0 15% 60% ; 
 }
</style>
<p><span class=spanToilet1></span> Toilet 1, W.C. [&#128701; (&amp;#128701;), símbolos de mapa y transporte 'inodoro, baño'.]</p>

<style type="text/css">
.spanToilet2{position: relative; 
display: inline-block; 
margin: 0 .9em .3em; 
width: .7em; height: .5em; 
border-style: solid; 
border-color: black; 
border-width: 0 .22em .35em 0; 
border-radius: 0 .1em .15em .3em / 0 .2em .3em .2em; 
}
.spanToilet2:before {content: ""; 
position: absolute; 
width: .6em; height: .3em; 
left: .15em; top: .8em; 
background-color: black;
border-radius: 0 15% 15% .3em ; 
 }
.spanToilet2:after {content: ""; 
position: absolute; 
width: .6em; height: .1em; 
left: .08em; top: .39em; 
background-color: black;
border-radius: .05em; 
}
</style>
<p><span class=spanToilet2></span> Toilet 2, W.C.</p>


<style type="text/css">
.spanMan1 {position: relative; 
display: inline-block; 
background-color: black; 
width: .4em; height: .5em; 
margin: 0 1.1em .3em; 
border-radius: .1em .1em 0 0; 
}
.spanMan1:before {content: ""; 
position: absolute; 
top: -.2em; left: .1em;
width: .2em; height: .2em; 
background-color: black; 
border-radius: 50%; 
}
.spanMan1:after {content: ""; 
position: absolute; 
top: .5em; left: 0;
width: .2em; height: .3em; 
background-color: black; 
border-style: solid;
border-color: black white white; 
border-width: .05em .1em 0;}
</style>
<p><span class=spanMan1></span> Man 1. [&#128104; (&amp;#128104;), símbolos varios y pictogramas 'varón'.]</p>

<style type="text/css">
.spanWoman1 {position: relative; 
display: inline-block; 
background-color: black; 
width: .34em; height: .4em; 
margin: auto 1.05em .3em; 
border-radius: .15em .15em 0 0; 
border-style: solid; 
border-width: 0 .1em .3em; 
border-color: black white; 
}
.spanWoman1:before {content: ""; 
position: absolute; 
top: -.2em; left: .08em;
width: .2em; height: .2em; 
background-color: black; 
border-radius: 50% 50% 25% 25%; 
}
.spanWoman1:after {content: ""; 
position: absolute; 
top: .7em; left: .05em;
width: .05em; height: 0; 
background-color: red; 
border-style: solid;
border-color: black white white; 
border-width: .2em .1em 0; 
}
</style>
<p><span class=spanWoman1></span> Woman 1. [&#128105; (&amp;#128105;), símbolos varios y pictogramas 'mujer'.]</p>


<style type="text/css"> /* 27/Jun/2015 17:38 */
.spanMan2 {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .2em; height: .26em; 
background-color: black; 
border-style: solid; 
border-width: 0 .15em; 
border-color: transparent; 
text-align: center; 
box-shadow: 0 -.06em 0 0 black; 
line-height: 0; 
background-clip: content-box; 
}
.spanMan2::before {content: ""; 
display: inline-block; 
margin: .15em auto; 
position: relative; 
width: .12em; height: .12em; 
left: auto; top: -.36em; 
background-color: black; 
border-radius: 100%; 
}
.spanMan2::after {content: ""; 
position: absolute; 
width: .2em; height: .24em; 
left: 0; top: 100%; 
border-style: solid; 
border-width: 0 .08em; 
border-color: transparent black; 
box-sizing: border-box; 
}
</style>
<p><span class=spanMan2></span> Man 2. </p>


<style type="text/css"> /* 27/Jun/2015 17:59 */
.spanWoman2 {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .2em; height: .26em; 
border-style: solid; 
border-width: 0 .14em; 
border-color: transparent; 
text-align: center; 
box-shadow: 0 -.055em 0 0 black; 
line-height: 0; 
background: linear-gradient(80deg, black 70%, transparent 75%) right top no-repeat, 
linear-gradient(280deg, black 70%, transparent 75%) left top no-repeat; 
background-size: 50.5% 100%; 
background-clip: content-box; 
}
.spanWoman2::before {content: ""; 
display: inline-block; 
margin: .15em auto; 
position: relative; 
width: .1em; height: .11em; 
left: auto; top: -.357em; 
background-color: black; 
border-radius: 100% 100% 0 0; 
border-style: solid; 
border-width: .028em; 
border-color: black black transparent; 
background-clip: content-box; 
}
.spanWoman2::after {content: ""; 
display: block;
position: relative; 
margin: -.25em auto; 
width: .16em; height: .23em; 
border-style: solid; 
border-width: 0 .07em; 
border-color: transparent black; 
box-sizing: border-box; 
}
</style>
<p><span class=spanWoman2></span> Woman 2. </p>


<style type="text/css">
.spanMale {position: relative; 
display: inline-block; 
border: .13em solid black; 
width: .3em; height: .3em; 
margin: 0 1.05em .1em; 
border-radius: 50%; 
-webkit-transform: rotate(-125deg); 
transform: rotate(-125deg); 
}
.spanMale:before {content: ""; 
position: absolute; 
top: .4em; left: .1em; 
width: .12em; height: .2em; 
background-color: black; 
}
.spanMale:after {content: ""; 
position: absolute; 
top: .5em; left: -.05em; 
width: 0; height: 0; 
border-style: solid; 
border-width: .2em .2em 0; 
border-color: black transparent; 
}
</style>
<p><span class=spanMale></span> Male. [&#9794; (&amp;#9794;), símbolos varios 'masculino'.]</p>


<style type="text/css">
.spanFemale {position: relative; 
display: inline-block; 
border: .13em solid black; 
width: .3em; height: .3em; 
margin: 0 1.05em .1em; 
border-radius: 50%; 
}
.spanFemale:before {content: ""; 
position: absolute; 
top: .4em; left: .1em; 
width: .12em; height: .3em; 
background-color: black; 
}
.spanFemale:after {content: ""; 
position: absolute; 
top: .5em; left: -.005em; 
width: .3em; height: .12em; 
background-color: black; 
}
</style>
<p><span class=spanFemale></span> Female. [&#9792; (&amp;#9792;), símbolos varios 'femenino'.]</p>


<style type="text/css"> /* 11/Jun/2016 11:27 */
.spanGirlFace {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em 1em; 
width: .8em; height: .77em; 
background-color: black; 
border-radius: .35em .35em .1em .1em / .4em .4em .2em .2em; 
overflow: hidden; 
}
.spanGirlFace::before {content: ""; 
position: absolute; 
width: .5em; height: .75em; 
left: .15em; top: 0; 
background: 
radial-gradient(ellipse, black 17%, transparent 22%) .02em .24em repeat-x, 
radial-gradient(ellipse at top, black .1em, transparent .1em) center .58em no-repeat, 
white; 
background-size: .24em .3em, 60% .068em; 
border-radius: 0 0 .35em .35em; 
}
.spanGirlFace::after {content: ""; 
position: absolute; 
width: 100%; height: .27em; 
left: 0; top: 0; 
background: 
radial-gradient(ellipse at left top, black 75%, white 80%) .1em 0, 
radial-gradient(ellipse at right top, black 75%, white 80%) .4em 0, black; 
background-size: .3em 100%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanGirlFace></span> Girl Face. [&#128103; (&amp;#128103;), símbolos varios y pictogramas 'chica'.]</p>


<style type="text/css"> /* 25/May/2014 15:04 */
.spanPram {position: relative; 
display: inline-block; 
margin: 0 1em .12em; 
width: .05em; height: 0; 
border-color: transparent black black; 
border-style: solid; 
border-width: .3em; 
border-radius: 100%; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanPram:before {content: ""; 
position: absolute; 
width: .05em; height: .3em; 
left: .21em; top: -.45em; 
background-color: black; 
border-radius: .05em; 
}
.spanPram:after {content: ""; 
position: absolute; 
width: .23em; height: .23em; 
left: .05em; top: .28em; 
background-color: black; 
border-color: black; 
border-style: solid; 
border-width: .03em; 
border-radius: 100%; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
box-shadow: inset 0 0 0 .05em white, .3em -.3em 0 -.08em black, 
.3em -.3em 0 -.03em white, .3em -.3em 0 0 black; 
}

</style>
<p><span class=spanPram></span> Baby Carriage, Pram. ['cochecito de bebé'.]</p>


<style type="text/css"> /* 21/Ene/2015 12:31 */
.spanBabyBottle {position: relative; 
display: inline-block; 
margin: 0 1em -.03em 1.2em; 
width: .22em; height: .48em; 
background-color: silver; 
border: solid .05em grey; 
border-radius: .08em; 
background-image: 
repeating-linear-gradient(to bottom, gray, gray .04em, silver .04em, silver .065em); 
background-size: 40% 75%; 
background-repeat: no-repeat; 
background-position: right top .08em; 
}
.spanBabyBottle::before {content: ""; 
position: absolute; 
width: .22em; height: .07em; 
left: 0; top: -.165em; 
background-color: lightsalmon; 
border: none; 
border-bottom: solid .05em coral; 
border-color: ; 
border-radius: .08em .08em 0 0; 
}
.spanBabyBottle::after {content: ""; 
display: block; 
width: .06em; height: .1em; 
margin: -.25em auto; 
background-color: lightsalmon; 
border-radius: .05em .05em 0 0; 
}
</style>
<p><span class=spanBabyBottle></span> Baby Bottle. [&#127868; (&amp;#127868;), símbolos varios y pictogramas 'biberón' o 'mamadera'.]</p>


<style type="text/css"> /* 2/Sep/2014 14:52 */
.spanPacifier {position: relative; 
display: inline-block; 
margin: 0 1.1em .45em 1.4em; 
width: .12em; height: .07em; 
background-color: black; 
border-style: solid; 
border-width: .07em .03em 0; 
border-color: black transparent; 
background-clip: content-box; 
transform: rotate(45deg); 
}
.spanPacifier::before {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
left: -.16em; top: .18em; 
border-style: solid; 
border-width: .05em .07em .1em; 
border-color: black; 
border-radius: 100%; 
box-shadow: 0 -.58em 0 -.08em black; 
}
.spanPacifier::after {content: ""; 
position: absolute; 
width: .08em; height: .12em; 
left: -.36em; top: .06em; 
background-color: black; 
border-style: solid; 
border-width: .1em .4em 0; 
border-color: black transparent; 
border-radius: .8em .8em 100% 100% / .12em .12em 100% 100%; 
background-clip: content-box; 
}
</style>
<p><span class=spanPacifier></span> Pacifier. Dummy. ['chupete'.]</p>


<style type="text/css"> /* 24/Ago/2014 19:04 */
.spanBaby1 {position: relative; 
display: inline-block; 
margin: 0 1.15em .35em; 
width: .25em; height: .25em; 
border-style: solid; 
border-width: 0 .08em .08em; 
border-color: transparent black black; 
border-radius: .12em .12em .16em .16em / .16em; 
background-image: radial-gradient(black, black .09em, transparent .1em, transparent 100%); 
background-position: center; 
}
.spanBaby1::before {content: ""; 
position: absolute; 
width: .09em; height: .26em; 
left: -.0em; top: .45em; 
background-color: black; 
border-radius: .05em / .18em .18em .05em .05em; 
box-shadow: .16em 0 0 0 black; 
}
.spanBaby1::after {content: ""; 
position: absolute; 
width: .23em; height: .14em; 
left: .01em; top: .33em; 
background-color: black; 
border-top: solid .08em black; 
border-radius: .05em .05em .15em .15em / .05em .05em .25em .25em; 
box-shadow: inset 0 .025em 0 0 white, 0 .017em 0 0 white;
}
</style>
<p><span class=spanBaby1></span> Baby 1. [&#128700; (&amp;#128700;), símbolos de mapa y transporte 'bebé'; &#128118; (&amp;#128118;), símbolos varios y pictogramas 'bebé'.]</p>


<style type="text/css"> /* 31/Ago/2014 17:10 */
.spanBaby2 {position: relative; 
display: inline-block; 
margin: 0 1.2em .2em; 
width: .3em; height: .3em; 
border-style: solid; 
border-width: 0 0 .28em; 
border-color: black; 
border-radius: .05em; 
background-image: radial-gradient(circle, black, black .13em, transparent .135em, transparent 100%); 
}
.spanBaby2::before, .spanBaby2::after {content: ""; 
position: absolute; 
width: .1em; height: .28em; 
left: -.1em; top: .285em; 
background-color: black; 
border-radius: .04em .04em .15em .15em; 
box-shadow: .23em .235em 0 .008em black; 
transform: rotate(40deg); 
}
.spanBaby2::after {left: .3em; 
box-shadow: -.23em .235em 0 .008em black; 
transform: rotate(-40deg); 
}
</style>
<p><span class=spanBaby2></span> Baby 2. </p>


<style type="text/css"> /* 17/Nov/2014 13:43 */
.spanBaby3 {position: relative; 
display: inline-block; 
margin: 0 1.1em .2em; 
width: .53em; height: .28em; 
background-color: black; 
border-radius: .3em .2em .45em .25em / .3em .4em .3em .3em; 
box-shadow: -.23em .2em 0 -.0749em black; 
}
.spanBaby3::before {content: ""; 
position: absolute; 
width: .32em; height: .12em; 
left: .39em; top: .2em; 
background-color: black; 
border-radius: 0 .2em .2em .2em / 0 .2em .2em .2em; 
transform: rotate(60deg); 
}
.spanBaby3::after {content: ""; 
position: absolute; 
width: .25em; height: .25em; 
left: .46em; top: -.16em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanBaby3></span> Baby 3. </p>


<style type="text/css">
.spanMother {position: relative; 
display: inline-block; 
background-color: black; 
width: .32em; height: .5em; 
margin: 0 1.1em .3em 1.2em; 
border-radius: .1em .3em 0 0 / .1em .5em 0 0; 
}
.spanMother:before {content: ""; 
position: absolute; 
top: -.17em; left: .02em;
width: .165em; height: .167em; 
background-color: black; 
border-radius: 50% 50% 50% 0; 
box-shadow: .09em .2em 0 -.01em black; 
}
.spanMother:after {content: ""; 
position: absolute; 
top: .05em; left: .05em;
width: .08em; height: .26em; 
background-color: black; 
border: solid .03em white;
border-radius: .1em; 
box-shadow: .02em .35em 0 .01em black; 
}
</style>
<p><span class=spanMother></span> Mother, Priority for pregnant women. ['prioridad a embarazadas'.]</p>


<style type="text/css"> /* 13/Ago/2014 16:27 */
.spanCondom1 {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .34em; height: .65em; 
background-color: black; 
border-radius: .22em .22em 0 0; 
}
.spanCondom1::before {content: ""; 
display: block; 
width: .125em; height: .125em; 
margin: -.11em auto; 
background-color: black; 
border-radius: .1em .1em 0 0; 
}
.spanCondom1::after {content: ""; 
position: absolute; 
width: .46em; height: .08em; 
left: -.055em; bottom: -.08em; 
background-color: black; 
}
</style>
<p><span class=spanCondom1></span> Condom 1. ['preservativo'.]</p>


<style type="text/css"> /* 13/Ago/2014 20:02 */
.spanCondom2 {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .4em; height: .4em; 
border-style: solid; 
border-color: silver; 
border-width: .08em; 
border-radius: 100%; 
}
.spanCondom2::before {content: ""; 
position: absolute; 
width: .6em; height: .6em; 
top: -.16em; left: -.16em; 
border-style: solid dotted; 
border-color: transparent grey; 
border-width: .05em .1em; 
background-image: linear-gradient(to bottom, rgba(100,100,100,.7), rgba(100,100,100,.2) .2em, rgba(100,100,100,.2) .6em, rgba(100,100,100,.7) 100%), 
linear-gradient(to right, grey, grey .1em, transparent .1em, transparent .61em, grey .61em, grey .8em); 
background-position: -.04em -.1em, -.055em -.1em; 
background-size: .61em .75em, .72em 100%; 
background-repeat: no-repeat, repeat-y; 
}
.spanCondom2::after {content: ""; 
position: absolute; 
width: .13em; height: .1em; 
left: .1em; top: .1em; 
border-style: solid; 
border-color: silver silver silver transparent; 
border-width: .04em; 
border-radius: 100%; 
}
</style>
<p><span class=spanCondom2></span> Condom 2. </p>


<style type="text/css"> /* 7/Jun/2014 22:04 */
.spanDeafness {position: relative; 
display: inline-block; 
margin: 0 1.1em .25em 1.2em; 
width: .3em; height: .31em; 
background-color: white; 
border-color: black black black transparent; 
border-style: solid solid; 
border-width: .06em; 
border-radius: .4em .4em .5em .2em / .4em .4em .5em .2em; 
-webkit-transform: rotate(-50deg); 
transform: rotate(-50deg); 
background-image: linear-gradient(80deg, white, white 48%, transparent 48.5%, transparent 100%), 
radial-gradient(circle, transparent, transparent 29%, black 30%, black 49%, transparent 50.5%, transparent 100%); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
}
.spanDeafness::before {content: ""; 
position: absolute; 
width: .15em; height: .13em; 
left: -.275em; top: .17em; 
background-color: transparent; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .1em .06em .06em; 
border-radius: 0 0 100% 100%; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanDeafness::after {content: ""; 
position: absolute; 
width: .4em; height: .07em; 
left: -.4em; top: .15em; 
background-color: transparent; 
border-color: black; 
border-style: solid; 
border-width: 0 .15em 0 .4em; 
border-radius: .05em; 
}
</style>
<p><span class=spanDeafness></span> Deafness. ['hipoacusia', 'sordera'.]</p>


<style type="text/css"> /* 1/Jun/2014 15:21 */
.spanBraille {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .7em; 
border: solid .03em dimgrey; 
border-radius: .06em; 
}
.spanBraille::before, .spanBraille::after {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .08em; top: .08em; 
background-color: black; 
border-radius: 100%; 
box-shadow: 0 .2em 0 0 black, 0 .4em 0 0 black; 
}
.spanBraille::after {left: .3em; 
}
</style>
<p><span class=spanBraille></span> Braille. Tiphlography. [&#10303; (&amp;#10303;), patrones braille 'signo generador (123456)', 'accesibilidad lectura invidentes'.]</p>


<style type="text/css"> /* 19/Jul/2016 11:09 */
.spanOuroboros {position: relative; 
display: inline-block; 
margin: 0 1em .45em 1.1em; 
width: .1em; height: .01em; 
background-color: black; 
border-style: solid; 
border-width: .14em .15em .12em .18em; 
border-color: black black black transparent; 
border-radius: 49% 45% 50% 50%; 
box-shadow: inset 0 0 .15em .02em rgba(0, 0, 0, .7); 
background-clip: content-box; 
transform: rotate(5deg); 
}
.spanOuroboros::before {content: ""; 
position: absolute; 
width: .7em; height: .55em; 
left: -.4em; top: -.05em; 
border-style: solid; 
border-width: 0 .12em .13em; 
border-color: black; 
border-radius: 100%; 
box-shadow: inset -.08em .01em 0 0 black, .01em -.01em 0 0 black; 
transform: rotate(350deg); 
}
.spanOuroboros::after {content: ""; 
position: absolute; 
width: .055em; height: .055em; 
left: .03em; top: -.08em; 
background-color: silver; 
border-radius: 100%; 
}
</style>
<p><span class=spanOuroboros></span> Ouroboros (Cyclicality). ['uróboro (ciclos eternos)'.]</p>


<style type="text/css"> /* 10/Ago/2016 15:37 */
.spanEyeProvidence {position: relative; 
display: inline-block; 
margin: 0 .7em -.17em .8em; 
width: 1em; height: .8em; 
border-style: solid; 
border-width: .05em; 
border-color: transparent transparent black; 
background: 
linear-gradient(to right bottom, transparent 48%, black 50%, black 53%, white 55%), 
linear-gradient(to left bottom, transparent 48%, black 50%, black 53%, white 55%) right top; 
background-size: 50% 100%; 
background-repeat: no-repeat; 
background-origin: border-box; 
}
.spanEyeProvidence::before {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: .27em; top: .32em; 
border: solid .04em black; 
border-radius: 100% 0 100% 0; 
transform: rotate(45deg); 
background: radial-gradient(circle, black .06em, white .075em, white .1em, black .11em, black .13em, white .15em) center center no-repeat; 
}
</style>
<p><span class=spanEyeProvidence></span> Eye of Providence. ['ojo de la providencia'.]</p>


<style type="text/css"> /* 26/Jul/2014 13:57 */
.spanYingYang {position: relative; 
display: inline-block; 
margin: 0 .9em 0 .9em; 
width: .8em; height: .8em; 
border: solid 1px black; 
border-radius: 100%; 
background-image: linear-gradient(to bottom, white, white 50%, black 50%, black 100%); 
}
.spanYingYang::before , .spanYingYang::after {content: ""; 
position: absolute; 
width: 50%; height: 50%; 
left: 0; top: 25%; 
background-color: white; 
border: solid .13em black; 
border-radius: 100%; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.spanYingYang::after {left: 50%; 
background-color: black; 
border-color: white; 
}
</style>
<p><span class=spanYingYang></span> Ying Yang (Taijitu). [&#9775; (&amp;#9775;), símbolos varios 'ying-yang'.]</p>


<style type="text/css"> /* 25/May/2015 20:26 */
.spanMenorah {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .84em; height: .6em; 
background-image: 
radial-gradient(circle at top, transparent, transparent .09em, black .1em, black .13em, transparent .145em, 
transparent .215em, black .226em, black .255em, transparent .27em, 
transparent .34em, black .35em, black .38em, transparent .4em), 
radial-gradient(circle at top, black, black .045em, transparent .05em), 
linear-gradient(black, black); 
background-size: .84em .5em, .12em .05em, .05em 100%; 
background-repeat: no-repeat, repeat-x; 
background-position: center .04em, 0 0; 
}
.spanMenorah::before {content: ""; 
position: absolute;
width: .2em; height: 0; 
bottom: 0; left: .12em; 
border-style: solid; 
border-width: 0 .2em .06em; 
border-color: black transparent; 
}
</style>
<p><span class=spanMenorah></span> Menorah. ['menorá'.]</p>


<style type="text/css"> /* 27/May/2015 19:52 */
.spanStarCrescent {position: relative; 
display: inline-block; 
margin: 0 .9em -.1em; 
width: .8em; height: .8em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: inset .125em 0 0 .11em black; 
}
.spanStarCrescent::before {content: ""; 
position: absolute; 
width: .2em; height: .26em; 
left: .42em; top: .28em; 
background: 
linear-gradient(to right bottom, transparent, transparent 49%, white 51%, white 100%) left bottom, 
linear-gradient(to right bottom, white, white 49%, black 51%, black 100%), 
linear-gradient(to left bottom, transparent, transparent 49%, white 51%, white 100%) right bottom, 
linear-gradient(to left bottom, white, white 49%, black 51%, black 100%) right bottom; 
background-size: .1em .08em, .1em .24em; 
background-repeat: no-repeat; 
}
.spanStarCrescent::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .37em; top: .37em; 
border-style: solid; 
border-width: .08em .15em 0; 
border-color: black transparent; 
}
</style>
<p><span class=spanStarCrescent></span> Star And Crescent. [&#9770; (&amp;#9770;), símbolos varios 'luna creciente y estrella'.]</p>


<style type="text/css"> /* 14/Dic/2014 17:43 */
.spanDavidStar {position: relative; 
display: inline-block; 
margin: 0 1em .15em .9em; 
width: .66em; height: .325em; 
background- color: lime; 
border-style: solid; 
border-width: .075em; 
border-color: black transparent; 
box-sizing: content-box; 
}
.spanDavidStar::before , .spanDavidStar::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: -.06em; top: -.06em; 
border: inherit; 
box-sizing: inherit; 
transform: rotate(120deg); 
}
.spanDavidStar::after {transform: rotate(-120deg); 
}
</style>
<p><span class=spanDavidStar></span> Star of David. [&#10017; (&amp;#10017;), dingbats 'estrella de David'.]</p>


<style type="text/css"> /* 14/Dic/2014 17:57 */
.spanLatinCross {display: inline-block; 
margin: 0 1.1em -.05em; 
width: .54em; height: .8em; 
background-image: 
linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: .15em 100%, 100% .15em; 
background-repeat: no-repeat; 
background-position: center 0, 0 .22em; 
}
</style>
<p><span class=spanLatinCross></span> Latin Cross. [&#10013; (&amp;#10013;),  dingbats 'cruz latina'.]</p>


<style type="text/css"> /* 14/Dic/2014 18:34 */
.spanAnkh {position: relative; 
display: inline-block; 
margin: 0 1.1em -.05em; 
width: .54em; height: .8em; 
background-image: 
linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: .15em 61.5%, 100% .13em; 
background-repeat: no-repeat; 
background-position: center bottom, 0 center; 
transform: scalex(.9); 
}
.spanAnkh::before {content: ""; 
display: block; 
margin: 0 auto; 
width: .11em; height: .11em; 
border: solid .11em black; 
border-radius: 100% 100% 0 100%; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanAnkh></span> Ankh. [&#9765; (&amp;#9765;), símbolos varios 'cruz ansada'; &#78585; (&amp;#78585;), jeroglifos egipcios 'S034'.]</p>


<style type="text/css"> /* 17/Dic/2014 18:14 */
.spanSvastiCross {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .1em black; 
background-image: 
linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: .1em 100%, 100% .1em; 
background-repeat: no-repeat; 
background-position: center top, left center; 
}
.spanSvastiCross::before {content: ""; 
position: absolute; 
width: .8em; height: .8em; 
left: -.1em; top: -.1em; 
background: 
linear-gradient(white, white) left .1em top 0, 
linear-gradient(white, white) right 0 top .1em, 
linear-gradient(white, white) right .1em bottom -.1em, 
linear-gradient(white, white) left 0 bottom .1em; 
background-size: .25em .25em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanSvastiCross></span> Right-Facing Svasti Cross. [&#4053; (&amp;#4053;), tibetano 'cruz esvástica con giro derecho'.]</p>


<style type="text/css"> /* 4/Ene/2015 8:55 */
.spanSaintAndrewCross {display: inline-block; 
margin: 0 1em -.05em; 
width: .7em; height: .8em; 
background-image: 
linear-gradient(305deg, transparent, transparent 42%, black 44%, black 56%, transparent 60%, transparent 100%), 
linear-gradient(55deg, transparent, transparent 42%, black 44%, black 56%, transparent 60%, transparent 100%);
}
</style>
<p><span class=spanSaintAndrewCross></span> Saint Andrew's Cross. ['cruz de San Andrés'; &#9587; (&amp;#9587;), dibujo de cajas 'cruce en diagonal'.]</p>


<style type="text/css"> /* 4/Ene/2015 9:11 */
.spanSaintPeterCross {display: inline-block; 
margin: 0 1.1em -.05em; 
width: .54em; height: .8em; 
background-image: 
linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: .15em 100%, 100% .15em; 
background-repeat: no-repeat; 
background-position: center 0, 0 .43em; 
}
</style>
<p><span class=spanSaintPeterCross></span> Saint Peter's Cross. ['cruz de San Pedro'; &#11832; (&amp;#11832;), puntuación suplementaria 'obelisco invertido'.]</p>


<style type="text/css"> /* 31/Ene/2016 11:00 */
.spanOrthodoxCross {position: relative; 
display: inline-block; 
margin: 0 1em ; 
top: -.08em; 
width: .6em; height: .7em; 
text-align: center; 
padding-top: .1em; 
line-height: 0; 
background-image: 
linear-gradient(90deg, black, black), 
linear-gradient(black, black); 
background-size: .1em 100%, 100% .1em; 
background-repeat: no-repeat; 
background-position: center 0, 0 .26em; 
}
.spanOrthodoxCross::after {content: ""; 
width: .36em; height: .5em; 
display: inline-block; 
background-color: ; 
border-top: solid .1em black; 
background: 
linear-gradient(15deg, transparent .1em, black .11em, black .19em, transparent .2em) left bottom no-repeat; 
background-size: 100% .2em; 
}
</style>
<p><span class=spanOrthodoxCross></span> Orthodox Cross. [&#9766; (&amp;#9766;), símbolos varios 'cruz ortodoxa'.]</p>


<style type="text/css"> /* 31/Ene/2016 11:00 */
.spanCelticCross {position: relative; 
display: inline-block; 
margin: 0 1em ; 
top: -.08em; 
width: .6em; height: .7em; 
text-align: center; 
padding-top: .1em; 
line-height: 0; 
background-image: 
linear-gradient(90deg, black, black), 
linear-gradient(black, black), 
radial-gradient(circle, transparent 50%, black 55%, black 70%, transparent 75%); 
background-size: .1em 100%, 100% .1em, .4em .4em; 
background-repeat: no-repeat; 
background-position: center 0, 0 .26em, center .1em; 
}
</style>
<p><span class=spanCelticCross></span> Celtic Cross. [&#128328; (&amp;#128328;), símbolos varios y pictogramas 'cruz celta'.]</p>


<style type="text/css"> /* 2/Jul/2016 14:42 */
.spanAlphaOmega {position: relative; 
display: inline-block; 
margin: 0 .6em -.05em .7em; 
width: 1.3em; height: .7em; 
background-color: white; 
}
.spanAlphaOmega::before, .spanAlphaOmega::after {content: ""; 
position: absolute; 
width: .6em; height: 100%; 
left: 0; top: 0; 
background: 
linear-gradient(290deg, transparent .18em, black .2em, black .28em, transparent .3em), 
linear-gradient(black, black) center .4em, 
linear-gradient(70deg, transparent .18em, black .2em, black .28em, transparent .3em) .3em 0; 
background-size: .3em 98%, .3em .1em; 
background-repeat: no-repeat; 
}
.spanAlphaOmega::after {left: .7em; 
background: 
linear-gradient(90deg, black 35%, white 35%, white 65%, black 65%), 
radial-gradient(circle, transparent .195em, black .205em, black .29em, transparent .3em), 
linear-gradient(black, black); 
background-size: 50% .215em, .6em 100%, 90% .1em; 
background-repeat: no-repeat; 
background-position: center bottom, 0 -.05em; 
}
</style>
<p><span class=spanAlphaOmega></span> Alpha & Omega. ['Alfa y Omega'.]</p>


<style type="text/css"> /* 30/Ene/2016 23:51 */
.spanChakana {position: relative; 
display: inline-block; 
margin: 0 .85em -.1em; 
width: .9em; height: .9em; 
background: 
linear-gradient(to right, black .3em, transparent .3em, transparent .6em, black .6em) left center, 
linear-gradient(to bottom, black .3em, transparent .3em, transparent .6em, black .6em) center top; 
background-size: 100% .3em, .3em 100%; 
background-repeat: no-repeat; 
}
.spanChakana::before {content: ""; 
position: absolute; 
margin: auto; 
width: .7em; height: .7em; 
left: 0; top: 0; right: 0; bottom: 0; 
background-image: 
radial-gradient(circle, transparent .14em, black .15em); 
}
</style>
<p><span class=spanChakana></span> Inca Cross. Chakana. ['cruz tawa chacana' o 'cruz inca'.]</p>


<style type="text/css"> /* 17/Dic/2014 11:39 */
.spanRealMaltese {position: relative; 
display: inline-block; 
margin: 0 1.15em 0; 
width: 0; height: 0; 
border-style: solid; 
border-width: .35em .2em; 
border-color: black transparent; 
background-clip: content-box; 
box-shadow: -.15em 0 0 0 white, .15em 0 0 0 white; 
}
.spanRealMaltese::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.35em; top: -.2em; 
border-style: solid; 
border-width: .2em .35em; 
border-color: transparent black; 
}
.spanRealMaltese::after {content: ""; 
position: absolute; 
width: .7em; height: .7em; 
left: -.35em; top: -.35em; 
background: 
linear-gradient(to left top, transparent, transparent 47%, white 52%, white 100%) .35em 0, 
linear-gradient(to right top, transparent, transparent 47%, white 52%, white 100%) right 0 top .35em, 
linear-gradient(to left top, white, white 47%, transparent 52%, transparent 100%) right .35em bottom 0, 
linear-gradient(to right top, white, white 47%, transparent 52%, transparent 100%) left 0 bottom .35em, 
linear-gradient(to right top, white, transparent 47%, white 52%, white 100%) right .35em top 0, 
linear-gradient(to left top, white, white 47%, transparent 52%, transparent 100%) right 0 bottom .35em, 
linear-gradient(to right top, white, white 47%, transparent 52%, transparent 100%) left .35em bottom 0, 
linear-gradient(to left top, transparent, transparent 47%, white 52%, white 100%) 0 .35em; 
background-size: .2em .1em, .1em .2em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanRealMaltese></span> Original Maltese Cross. </p>


<style type="text/css"> /* 15/Dic/2014 9:15 */
.spanMalteseCross {display: inline-block; 
margin: 0 1em -.05em; 
width: .7em; height: .7em; 
background: 
radial-gradient(ellipse at right, transparent, transparent 60%, black 62%, black 100%) right center, 
radial-gradient(ellipse at top, transparent, transparent 60%, black 62%, black 100%) center top, 
radial-gradient(ellipse at left, transparent, transparent 60%, black 62%, black 100%) left center, 
radial-gradient(ellipse at bottom, transparent, transparent 60%, black 62%, black 100%) center bottom; 
background-size: 52% 130%, 130% 52%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanMalteseCross></span> Patty Maltese Cross. [&#10016; (&amp;#10016;),  dingbats 'cruz de Malta', 'cruz heráldica paté'.]</p>


<style type="text/css"> /* 14/Dic/2014 18:14 */
.spanGreekCross {display: inline-block; 
margin: 0 1em -.05em; 
width: .7em; height: .7em; 
background-image: 
linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: .15em 100%, 100% .15em; 
background-repeat: no-repeat; 
background-position: center 0, 0 center; 
}
</style>
<p><span class=spanGreekCross></span> Greek Cross. [&#10010; (&amp;#10010;),  dingbats 'cruz griega'.]</p>


<style type="text/css"> /* 4/Ene/2015 8:37 */
.spanSaltireCross {display: inline-block; 
margin: 0 1em -.05em; 
width: .7em; height: .7em; 
background-image: 
linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: .15em 100%, 100% .15em; 
background-repeat: no-repeat; 
background-position: center 0, 0 center; 
transform: rotatez(45deg); 
}
</style>
<p><span class=spanSaltireCross></span> Saltire Cross. [&#128940; (&amp;#128940;), formas geométricas extendidas 'cruz aspada gruesa', 'sotuer'.]</p>


<style type="text/css"> /* 20/Jul/2014 20:10 */
.spanBarCode {position: relative; 
display: inline-block; 
margin: 0 .85em; 
width: .8em; height: .5em; 
border: solid .08em black; 
border-radius: .15em; 
box-shadow: inset 0 0 0 .07em white; 
background-image: linear-gradient(to right, 
black 0, black .1em, white .1em, white .15em, 
black .15em, black .19em, white .19em, white .23em, 
black .23em, black .29em, white .29em, white .33em, 
black .33em, black .36em, white .36em, white .4em, 
black .4em, black .48em, white .48em, white .5em, 
black .5em, black .53em, white .53em, white .56em, 
black .56em, black 100%); 
background-size: .6em 100%; 
background-repeat: no-repeat; 
background-position: center 0; 
}
</style>
<p><span class=spanBarCode></span> Barcode. ['código de barras'.]</p>


<style type="text/css"> /* 12/Dic/2014 13:24 */
.spanBill {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: 1em; height: .6em; 
background-color: white; 
border: solid .06em black; 
background-image: 
radial-gradient(circle at top left, black, black .13em, transparent .14em, transparent 100%), 
radial-gradient(circle at top right, black, black .13em, transparent .14em, transparent 100%), 
radial-gradient(circle at bottom left, black, black .13em, transparent .14em, transparent 100%), 
radial-gradient(circle at bottom right, black, black .13em, transparent .14em, transparent 100%); 
}
.spanBill::before {content: ""; 
display: block; 
width: .4em; height: .5em; 
margin: .05em auto; 
background-color: black; 
border-radius: 50%; 
background-image: 
linear-gradient(300deg, white, white 48%, transparent 52%, transparent 100%), 
linear-gradient(white, white), 
linear-gradient(white, white); 
background-size: .08em .08em, .1em .36em, .18em .05em; 
background-repeat: no-repeat; 
background-position: .08em .085em, center center, center .385em; 
}
</style>
<p><span class=spanBill></span> Bill. Banknote. [&#128180; (&amp;#128180;), símbolos varios y pictogramas 'billete con yen'; 
&#128181; (&amp;#128181;), símbolos varios y pictogramas 'billete con dólar'; 
&#128182; (&amp;#128182;), símbolos varios y pictogramas 'billete con euro'; 
&#128183; (&amp;#128183;), símbolos varios y pictogramas 'billete con libra'.]</p>


<style type="text/css"> /* 12/Dic/2014 15:58 */
.spanCoin {position: relative; 
display: inline-block; 
margin: 0 1.05em -.02em; 
width: .6em; height: .6em; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .03em black, 0 0 0 .03em black, -.06em 0 0 .025em black; 
background-color: white; 
background-image: 
linear-gradient(300deg, black, black 48%, transparent 52%, transparent 100%), 
linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: .08em .08em, .12em .36em, .18em .05em; 
background-repeat: no-repeat; 
background-position: .175em .085em, center .08em, center .395em; 
transform: scalex(.9); 
}
.spanCoin::before {content: ""; 
display: block; 
width: .4em; height: .4em; 
margin: .05em auto; 
border-radius: 50%; 
border-style: dotted; 
border-width: .05em; 
border-color: transparent transparent dimgrey; 
}
</style>
<p><span class=spanCoin></span> Coin. ['moneda'.]</p>


<style type="text/css"> /* 12/Mar/2015 19:18 */
.spanWeddingRing {position: relative; 
display: inline-block; 
margin: 0 1.3em .1em .7em; 
width: .6em; height: .3em; 
border-style: solid; 
border-width: .03em .05em .12em .05em; 
border-color: gold; 
border-radius: 100% 100% 100% 100% / 100% 100% 120% 120%; 
box-shadow: inset 0 .03em 0 .035em goldenrod; 
transform: rotatez(350deg); 
}
.spanWeddingRing::before {content: ""; 
position: absolute; 
left: 120%; top: 0; 
width: .6em; height: .3em; 
border-style: solid; 
border-width: .03em .05em .12em .05em; 
border-color: gold; 
border-radius: 100% 100% 100% 100% / 100% 100% 120% 120%; 
box-shadow: inset 0 .03em 0 .035em goldenrod; 
transform: rotatez(20deg); 
}
</style>
<p><span class=spanWeddingRing></span> Wedding Rings. [&#128141; (&amp;#128141;), símbolos varios y pictogramas 'anillo de joyería'; 
&#9900; (&amp;#9900;), símbolos varios 'círculo blanco' o 'anillo'.]</p>


<style type="text/css"> /* 26/May/2015 17:20 */
.spanMarriage {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: 1.3em; height: .7em; 
background: 
radial-gradient(circle, transparent, transparent .14em, black .15em, black .24em, transparent .25em, transparent 100%) .28em center,
radial-gradient(circle, transparent, transparent .14em, black .15em, black .24em, transparent .25em, transparent 100%) right .28em center; 
background-size: .5em .5em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanMarriage></span> Marriage. [&#9901; (&amp;#9901;), símbolos varios 'casados'.]</p>


<style type="text/css"> /* 26/May/2015 17:15 */
.Couple {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: 1.3em; height: .7em; 
background: 
radial-gradient(circle, transparent, transparent .14em, black .15em, black .24em, transparent .25em, transparent 100%) .1em center, 
linear-gradient(black, black) center center, 
radial-gradient(circle, transparent, transparent .14em, black .15em, black .24em, transparent .25em, transparent 100%) right .1em center; 
background-size: .5em .5em, .2em .1em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=Couple></span> Unmarried Partnership. Couple. [&#9903; (&amp;#9903;), símbolos varios 'pareja de hecho'.]</p>


<style type="text/css"> /* 26/May/2015 17:03 */
.spanDivorce {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: 1.3em; height: .7em; 
background: 
radial-gradient(circle, transparent, transparent .14em, black .15em, black .24em, transparent .25em, transparent 100%) 0 center, 
linear-gradient(90deg, transparent, transparent .6em, black .6em, black .7em, transparent .7em, transparent 100%) 0 center, 
radial-gradient(circle, transparent, transparent .14em, black .15em, black .24em, transparent .25em, transparent 100%) right center; 
background-size: .5em .5em, 100% 100%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanDivorce></span> Divorce. [&#9902; (&amp;#9902;), símbolos varios 'divorciados'.]</p>


<style type="text/css"> /* 12/Feb/2015 12:00 */
.spanCrape {position: relative; 
display: inline-block; 
margin: 0 .9em -.02em; 
width: .8em; height: .8em; 
border: solid .05em grey; 
border-radius: 100%; 
background-image: radial-gradient(ellipse at bottom, transparent, transparent 10%, grey 10%, grey 70%, transparent 70%, transparent 100%); 
background-position: center .1em; 
background-size: .1em .12em; 
background-repeat: no-repeat; 
}
.spanCrape:before, .spanCrape:after {content: ""; 
position: absolute; 
width: .2em; height: .5em; 
left: .32em; top: .1em; 
border-color: black transparent transparent black; 
border-style: solid; 
border-width: 0 0 .1em .12em; 
border-radius: .4em .1em 0 0 / .3em .2em 0 0; 
-webkit-transform: rotate(-37deg); 
transform: rotate(-37deg); 
box-shadow: inset 0 .025em 0 0 black, 0 -.025em 0 0 black; 
}
.spanCrape:after {left: .17em; 
border-color: black black transparent transparent; 
border-width: 0 .12em .1em 0; 
border-radius: .1em .4em 0 0 / .2em .3em 0 0; 
-webkit-transform: rotate(37deg); 
transform: rotate(37deg); 
}
</style>
<p><span class=spanCrape></span> Crape Mourning. [&#127895; (&amp;#127895;), símbolos varios y pictogramas 'cinta de recordación', 'crespón de luto'.]</p>


<style type="text/css"> /* 10/Jul/2014 16:12 */
.spanCoffin {position: relative; 
display: inline-block; 
margin: -1.5em .85em -.7em; 
width: 1em; height: 2.2em; 
-webkit-transform: scaley(.3); 
transform: scaley(.3); 
overflow: hidden; 
}
.spanCoffin::before {content: ""; 
position: absolute; 
width: 1.2em; height: 1.2em; 
left: -.28em; top: .35em; 
border: solid .08em black; 
background-image: 
linear-gradient(to right top, black, black .51em, white .51em, white 1.4em, black 1.4em, black 100%); 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanCoffin></span> Coffin. [&#9904; (&amp;#9904;), símbolos varios 'ataúd'.]</p>


<style type="text/css"> /* 11/Jul/2014 16:09 */
.spanUrn {position: relative; 
display: inline-block; 
margin: 0 1.1em .3em; 
width: .185em; height: 0; 
border-color: black transparent transparent; 
border-style: solid; 
border-width: .45em .18em 0; 
}
.spanUrn::before {content: ""; 
position: absolute; 
width: .32em; height: .5em; 
left: -.17em; top: -.27em; 
background-color: white; 
border-color: transparent black black; 
border-style: solid; 
border-width: .1em .1em .1em; 
border-radius: .3em .3em .2em .2em / .4em; 
background-clip: content-box; 
}
.spanUrn::after {content: ""; 
position: absolute; 
width: .068em; height: 0; 
top: -.38em; left: -.04em; 
border-color: white transparent transparent; 
border-style: solid; 
border-width: .3em .11em 0; 
}
</style>
<p><span class=spanUrn></span> Funeral Urn. [&#9905; (&amp;#9905;), símbolos varios 'urna funeraria'.]</p>


<style type="text/css"> /* 30/Oct/2014 16:46 */
.spanCemetery {position: relative; 
display: inline-block; 
margin: 0 1.2em .4em; 
width: .1em; height: .23em; 
background-color: black; 
border-style: solid; 
border-width: 0 .15em; 
border-color: transparent; 
background-clip: content-box; 
box-shadow: 0 .1em 0 0 black; 
}
.spanCemetery::before , .spanCemetery::after {content: ""; 
position: absolute; 
left: -.42em; top: .44em; 
width: inherit; height: inherit; 
background: inherit; 
border: inherit; 
box-shadow: inherit; 
}
.spanCemetery::after {left: .16em; 
}
</style>
<p><span class=spanCemetery></span> Headstone Graveyard. Cemetery. [&#9980; (&amp;#9980;), símbolos varios 'cementerio'.]</p>


<style type="text/css"> /* 24/Dic/2014 17:00 */
.spanChurch {position: relative; 
display: inline-block; 
margin: 0 .8em -.08em; 
width: .85em; height: .8em; 
background-color: white; 
border-style: solid; 
border-width: .06em .11em .07em; 
border-color: black; 
border-radius: .1em; 
background-image: 
linear-gradient(black, black), 
linear-gradient(35deg, transparent, transparent .25em, black .26em, black 100%), 
linear-gradient(325deg, transparent, transparent .25em, black .26em, black 100%); 
background-size: .5em .45em, .4em .3em, .35em .3em; 
background-repeat: no-repeat; 
background-position: right top, left top, left top; 
background-clip: content-box; 
}
.spanChurch::before {content: ""; 
position: absolute; 
width: .12em; height: .18em; 
left: .12em; top: 0; 
background-image: linear-gradient(white, white), linear-gradient(white, white); 
background-repeat: no-repeat; 
background-size: .025em 100%, 100% .025em; 
background-position: center top, left top 25%; 
box-shadow: 0 .6em 0 .02em black, .32em .57em 0 -.02em black, 
.44em .57em 0 -.02em black, .56em .57em 0 -.02em black;
}
.spanChurch::after {content: ""; 
position: absolute; 
width: .12em; height: .17em; 
left: .115em; top: .27em; 
background-color: black; 
border-radius: 100% 100% 0 0; 
}
</style>
<p><span class=spanChurch></span> Church. [&#9962; (&amp;#9962;), símbolos varios 'iglesia'.]</p>


<style type="text/css"> /* 19/Mar/2014 11:09 */
.spanTheater {position: relative; 
display: inline-block; 
width: 1.3em; height: 1em; 
margin: 0 .7em -.1em; 
background-image: radial-gradient(ellipse at top, transparent 0, transparent .06em, black .06em, black .35em, white .35em, white .37em, transparent .37em, transparent 100%), 
radial-gradient(ellipse at top, transparent 0, transparent .06em, black .06em, black .35em, transparent .35em, transparent 100%); 
background-position: 0 0, .54em .12em; 
background-size: .8em .9em; 
background-repeat: no-repeat; 
}
.spanTheater:before, .spanTheater:after {content: ""; 
position: absolute; 
top: .35em; left: .275em;
width: .25em; height: .15em; 
border-width: 0 0 .08em 0; 
border-style: solid; 
border-color: white; 
border-radius: .3em; 
box-shadow: -.1em -.2em 0 -.08em white, .1em -.2em 0 -.08em white; 
}
.spanTheater:after {top: .6em; left: .83em;
border-width: .08em 0 0 0; 
box-shadow: -.1em -.33em 0 -.08em white, .1em -.33em 0 -.08em white; 
}
</style>
<p><span class=spanTheater></span>  Two Masks Of Drama (Theater). [&#127917; (&amp;#127917;), símbolos varios y pictogramas 'dos carátulas de artes teatrales'.]</p>


<style type="text/css"> /* 7/Nov/2014 10:43 */
.spanFountain {position: relative; 
display: inline-block; 
margin: 0 1.1em .09em; 
width: .46em; height: .46em; 
border: none; 
border-bottom: solid .15em black; 
border-radius: 0 0 .15em .15em / 0 0 .16em .16em; 
background-image: 
radial-gradient(circle at bottom, black, black .06em, transparent .08em, transparent 100%), 
radial-gradient(ellipse, transparent, transparent .12em, grey .14em, grey .145em, transparent .16em, transparent 100%), 
radial-gradient(ellipse, transparent, transparent .12em, grey .14em, grey .145em, transparent .16em, transparent 100%), 
radial-gradient(ellipse, transparent, transparent .12em, grey .14em, grey .145em, transparent .16em, transparent 100%), 
radial-gradient(ellipse, transparent, transparent .12em, grey .14em, grey .145em, transparent .16em, transparent 100%); 
background-size: 100% 100%, .28em .55em, .28em .55em, .28em .55em, .28em .55em; 
background-repeat: no-repeat; 
background-position: 0 0, -.05em .2em, -.05em .05em, right -.05em top, right -.05em top .23em; 
}
.spanFountain::before {content: ""; 
position: absolute; 
width: .5em; height: .08em; 
left: -.015em; top: .6em; 
background-color: black; 
border-radius: .3em .3em 0 0 / .09em .09em 0 0; 
}
</style>
<p><span class=spanFountain></span> Fountain. [&#9970; (&amp;#9970;), símbolos varios 'fuente'.]</p>


<style type="text/css">
.spanFilm1 {position: relative; 
display: inline-block; 
background-color: black; 
border-style: dotted; 
border-width: 0 .1em; 
border-color: white;
width: .6em; height: .8em; 
margin: 0 .95em; 
outline: solid black 1px; 
}
</style>
<p><span class=spanFilm1></span> Movie Film. [&#127902; (&amp;#127902;), símbolos varios y pictogramas 'cuadros de película'; &#127910; (&amp;#127910;), símbolos varios y pictogramas 'cinematógrafo, proyección de film'.]</p>

<style type="text/css">
.spanFilm2 {position: relative; 
display: inline-block; 
background-color: black; 
border-style: dotted; 
border-width: 0 .1em; 
border-color: white;
width: .6em; height: .8em; 
margin: 0 .95em; 
outline: solid black 1px; 
}
.spanFilm2:before {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: .08em; top: .2em; 
border-radius: 50%; 
background-color: black; 
border-width: .04em; 
border-color: white; 
border-style: ridge groove groove ridge;
}
.spanFilm2:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .26em; top: .3em; 
border-width: .13em 0 .13em .15em; 
border-color: transparent transparent transparent white; 
border-style: solid;
overflow: hidden; 
}
.spanFilm2:hover:after {content: ""; 
position: absolute; 
width: .22em; height: .22em; 
top: .33em; left: .2em;
background-color: white; 
border: none; 
}
</style>
<p><span class=spanFilm2></span> Play / Stop Film. ['iniciar / parar video'.]</p>


<style type="text/css"> /* 2/Feb/2015 12:43 */
.spanClosedCaption {position: relative; 
display: inline-block; 
margin: 0 .9em .15em; 
width: .8em; height: .46em; 
background-color: white; 
border: solid .08em black; 
border-radius: .15em; 
text-align: center; 
vertical-align: middle; 
line-height: 0; 
}
.spanClosedCaption::before , .spanClosedCaption::after {content: ""; 
display: inline-block; 
margin: .08em .03em; 
width: .1em; height: .15em; 
border-style: solid; 
border-width: .08em; 
border-color: black transparent black black; 
border-radius: .12em; 
}
</style>
<p><span class=spanClosedCaption></span> Closed Caption. </p>


<style type="text/css"> /* 29/Sep/2015 18:59 */
.spanHotelBed {position: relative; 
display: inline-block; 
margin: 0 .85em .17em; 
width: .9em; height: .36em; 
background-color: white; 
border-style: solid; 
border-width: 0 0 .12em .1em; 
border-color: black; 
box-shadow: 0 -.04em 0 .04em white; 
box-sizing: border-box; 
background-image: 
radial-gradient(circle, black, black .08em, white .09em), 
radial-gradient(ellipse at bottom, black, black 65%, transparent 70%); 
background-size: .2em .2em, 100% 70%; 
background-repeat: no-repeat; 
background-position: left bottom, right bottom; 
}
.spanHotelBed::before {content: ""; 
position: absolute; 
width: inherit; height: .15em; 
left: -.1em; bottom: -.24em; 
background-color: white; 
border-style: solid; 
border-width: 0 .1em; 
border-color: black; 
box-shadow: 0 .04em 0 .04em white; 
box-sizing: inherit; 
}
</style>
<p><span class=spanHotelBed></span> Sleeping Accommodation. Bed 2. [&#128716; (&amp;#128716;), símbolos de mapa y transporte 'hotel para pernoctar'.]</p>


<style type="text/css"> /* 18/Ago/2014 12:34 */
.spanHotel {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .75em; height: .35em; 
background-color: black; 
border-radius: .08em 0 .08em .08em; 
background-image: 
repeating-linear-gradient(to right, white 0, white .1em, transparent .1em, transparent .2em), 
repeating-linear-gradient(to right, white 0, white .1em, transparent .1em, transparent .2em); 
background-size: .5em .085em; 
background-repeat: no-repeat; 
background-position: center .085em, center .22em; 
}
.spanHotel::before {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
right: 0; top: -.38em; 
background-color: silver; 
border-radius: .08em .08em 0 0; 
background-image: 
linear-gradient(black, black), linear-gradient(black, black); 
background-size: .1em .16em; 
background-repeat: no-repeat; 
background-position: center 0, center bottom 0; 
box-shadow: inset 0 0 0 .09em black; 
}
</style>
<p><span class=spanHotel></span> Hotel. [&#127976; (&amp;#127976;), símbolos varios y pictogramas 'hotel'.]</p>


<style type="text/css"> /* 2/Jul/2014 20:14 */
.spanMuseum {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .8em; height: .4em; 
border-color: black; 
border-style: solid; 
border-width: .08em 0; 
}
.spanMuseum::after {content: ""; 
display: block; 
width: .629em; height: .285em; 
margin: .26em auto .03em auto; 
border: none; 
border-style: solid; 
border-color: black; 
border-width: .05em 0; 
background-image: repeating-linear-gradient(to right, transparent 0, transparent .03em, black .03em, black .13em, transparent .13em, transparent .16em); 
background-position: center 0; 
box-shadow: inset 0 .025em 0 0 white; 
}
.spanMuseum::before {content: ""; 
display: block; 
width: 0; height: 0; 
margin: -.213em auto; 
border-color: black transparent; 
border-style: solid; 
border-width: 0 .35em .16em; 
}
</style>
<p><span class=spanMuseum></span> Museum. [&#127963; (&amp;#127963;), símbolos varios y pictogramas 'edificio clásico', 'museo'.]</p>


<style type="text/css"> /* 29/Abr/2015 21:04 */
.spanFatherSon {position: relative; 
display: inline-block; 
margin: 0 1em -.05em 1.3em; 
width: 0; height: .36em; 
border-style: solid; 
border-width: .2em .18em 0; 
border-color: transparent black; 
border-radius: .3em .3em 0 0 / .2em .2em 0 0; 
}
.spanFatherSon::before {content: ""; 
position: absolute; 
width: inherit; height: .23em; 
left: -.53em; bottom: 0; 
border: inherit; 
border-radius: inherit; 
box-shadow: .03em 0 0 0 white; 
}
.spanFatherSon::after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: -.11em; top: -.35em; 
background-color: black; 
border-radius: 100%; 
box-shadow: -.34em .14em 0 0 black; 
}
</style>
<p><span class=spanFatherSon></span> Father and Son. Teacher and Student. ['padre e hijo' o 'maestro y alumno'.]</p>


<style type="text/css">
.spanGraduationCap{position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .8em; height: .55em; 
background-color: black; 
border-radius: .4em / .2em; 
}
.spanGraduationCap:before {content: ""; 
position: absolute; 
width: .6em; height: .6em; 
border: .025em solid white; 
left: .12em; top: -.3em; 
background-color: black; 
-webkit-transform: rotate(105deg) skewx(36deg) skewy(-47deg);
transform: rotate(105deg) skewx(36deg) skewy(-47deg);
}
.spanGraduationCap:after {content: ""; 
position: absolute; 
width: .42em; height: .4em; 
left: .4em; top: .07em; 
border-width: .04em .06em; 
border-radius: 20% 0; 
border-color: white black transparent transparent; 
border-style: ridge;
}
</style>
<p><span class=spanGraduationCap></span> Graduation Cap. [&#127891; (&amp;#127891;), símbolos varios y pictogramas 'birrete de graduado'.]</p>

<style type="text/css">
.spanBook{position: relative; 
display: inline-block; 
margin: 0 .85em; 
width: 1em; height: .65em; 
background-color: whitesmoke; 
border-collapse: separate; 
background-image: linear-gradient(to left bottom, silver, white 100%);
background-position: 0 100%; 
background-size: 50% 100%; 
background-repeat: no-repeat; 
box-shadow: 0 .05em 0 .025em dimgray; 
}
.spanBook:before {content: ""; 
position: absolute; 
width: .3em; height: .65em; 
left: 23%; top: 0; 
background-color: lightgrey; 
-webkit-transform: skewY(35deg);
-webkit-transform-origin: 100%;
transform: skewY(35deg);
transform-origin: 100%;
}
.spanBook:after {content: ""; 
position: absolute; 
width: .3em; height: .1em; 
left: .6em; top: .15em; 
border-width: .1em 0; 
border-color: dimgray transparent; 
border-style: double;
}
</style>
<p><span class=spanBook></span> Open Book. [&#128214; (&amp;#128214;), símbolos varios y pictogramas 'libro abierto'.]</p>


<style type="text/css"> /* 16/Jul/2014 14:39 */
.spanNewTestament {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .53em; height: .6em; 
border-radius: 0 0 0 .08em; 
background-color: black; 
box-shadow: inset 0 0 0 .14em black; 
background-image: 
linear-gradient(transparent, transparent 36%, white 36%, white 45%, transparent 45%, transparent 100%), 
linear-gradient(to left, black, black 45%, white 45%, white 55%, black 55%, black 100%); 
}
.spanNewTestament::before {content: ""; 
position: absolute; 
width: .53em; height: .13em; 
left: 0; top: -.1em; 
border-color: black transparent black black; 
border-style: solid; 
border-width: .04em; 
border-radius: .05em 0 0 .05em; 
background-image: radial-gradient(circle at right, transparent 0, transparent .03em, silver .03em, silver 100%); 
background-size: .55em .07em; 
background-repeat: no-repeat; 
background-position: right -.018em top 0; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
</style>
<p><span class=spanNewTestament></span> New Testament. Christian Bible. ['Nuevo Testamento'.]</p>


<style type="text/css">
.spanFerrisWheel {position: relative; 
display: inline-block; 
width: .6em; height: .6em; 
margin: 0 .95em .1em; 
border-radius: 50%; 
border: .08em double black;
}
.spanFerrisWheel:before {content: ""; 
display: block; 
width: 0; height: 0; 
position: absolute; 
left: .15em; top: .25em; 
border-style: solid; 
border-color: transparent transparent black; 
border-width: 0 .15em .5em;
}
.spanFerrisWheel:after {content: ""; 
display: block; 
width: .15em; height: .15em; 
position: absolute; 
left: -.14em; top: .2em; 
background-color: black; 
border-radius: 50% 50% 0 0; 
box-shadow: .7em 0 0 0 black, .175em -.275em 0 0 black, 
.525em -.275em 0 0 black, .57em .325em 0 0 black, .175em .325em 0 0 black; 
}
</style>
<p><span class=spanFerrisWheel></span> Ferris Wheel (Fair). [&#127905; (&amp;#127905;), símbolos varios y pictogramas 'juego de vuelta al mundo'.]</p>


<style type="text/css"> /* 1/Oct/2014 12:58 */
.spanBridge {position: relative; 
display: inline-block; 
margin: 0 .6em .15em; 
width: 1.3em; height: .47em; 
border: none; 
border-bottom: solid .08em black; 
box-shadow: inset 0 -.025em 0 0 white; 
background-image: radial-gradient(circle at top, white 0, white .3em, black .32em, black .36em, white .37em, white .39em, transparent .395em, transparent 100%), 
repeating-linear-gradient(90deg, white, white .035em, black .042em, black .08em); 
background-size: .6em .5em, 120% 100%; 
background-position: center 0; 
}
.spanBridge::before , .spanBridge::after {content: ""; 
position: absolute; 
width: .08em; height: .7em; 
left: .28em; top: -.02em; 
background-color: black; 
border-style: solid; 
border-width: 0 .03em .08em; 
border-color: black transparent; 
border-radius: .1em .1em 0 0; 
background-clip: content-box; 
}
.spanBridge::after {left: .89em; 
}
</style>
<p><span class=spanBridge></span> Bridge. [&#127753; (&amp;#127753;), símbolos varios y pictogramas 'puente colgante'.]</p>


<style type="text/css">
.spanPotableWater {position: relative; 
display: inline-block; 
margin: auto 1em .2em; 
width: .5em; height: .12em; 
border-style: solid; 
border-color: black; 
border-width: .15em .15em 0 0; 
border-radius: 0 .2em .05em 0; 
}
.spanPotableWater:before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .08em; top: -.35em; 
border-style: solid; 
border-radius: 30% 30% 0 0 ; 
border-width: .08em .15em 0; 
background-color: black; 
border-color: black white; 
}
.spanPotableWater:after {content: ""; 
position: absolute; 
width: .25em; height: .3em; 
left: .15em; top: -.22em; 
background-color: black; 
border-radius: 30% 30% 50% 50%; 
}
</style>
<p><span class=spanPotableWater></span> Tap (Potable Water). [&#128688; (&amp;#128688;), símbolos de mapa y transporte 'agua potable'.]</p>


<style type="text/css"> /* 6/Ago/2014 14:43 */
.spanSnorkels {position: relative; 
display: inline-block; 
margin: 0 1.15em .1em 1em; 
line-height: 0; 
width: .46em; height: .2em; 
text-align: center; 
background-color: white; 
border: solid .05em black; 
border-radius: .1em .1em .15em .15em; 
}
.spanSnorkels::before {content: ""; 
position: relative; 
display: inline-block; 
width: .18em; height: .1em; 
margin-top: .15em; 
background-color: white; 
border-color: black transparent transparent; 
border-style: solid; 
border-width: .05em; 
border-radius: .13em .13em 0 0 / .2em .2em 0 0; 
background-clip: content-box; 
}
.spanSnorkels::after {content: ""; 
position: absolute; 
width: .3em; height: .55em; 
left: .15em; top: -.21em; 
border-color: black black black transparent; 
border-style: solid; 
border-width: 0 .08em .08em; 
border-radius: 0 0 .35em .5em / 0 0 .35em .5em; 
}
</style>
<p><span class=spanSnorkels></span> Goggles and Snorkel. ['antiparras y snorkel'.]</p>


<style type="text/css"> /* 24/Jun/2015 19:46 */
.spanFishingPole {position: relative; 
display: inline-block; 
margin: 0 1em -.2em; 
width: .6em; height: .8em; 
border-style: solid; 
border-width: .025em .05em 0 .025em; 
border-color: black black transparent; 
border-radius: 0 100% 0 0; 
box- shadow: inset 0 0 .15em .02em rgba(0, 0, 0, .7); 
}
.spanFishingPole::before {content: ""; 
position: absolute; 
width: .14em; height: .22em; 
left: -.115em; top: .5em; 
background-color: black; 
border-style: solid; 
border-width: 0 .04em .08em; 
border-color: transparent; 
border-radius: 100%; 
background: 
linear-gradient(to right bottom, transparent .07em, black .08em), 
linear-gradient(to left bottom, transparent .07em, black .08em), black; 
background-size: 50.5% .1em; 
background-repeat: no-repeat; 
background-position: left bottom, right bottom; 
background-clip: border-box, border-box, content-box; 
background-origin: border-box, border-box, content-box; 
}
.spanFishingPole::after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .48em; top: .5em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanFishingPole></span> Fishing Pole. [&#127907; (&amp;#127907;), símbolos varios y pictogramas 'caña de pescar con pescado'.]</p>


<style type="text/css">
.spanTent {position: relative; 
display: inline-block; 
margin: 0 .65em .2em; 
width: .6em; height: 0; 
border-style: solid; 
border-color: transparent transparent black; 
border-width: 0 .4em .6em; 
}
.spanTent:before {content: ""; 
position: absolute; 
left: -.4em; top: 0; 
width: 0; height: 0; 
border-style: solid; 
border-color: transparent transparent gray; 
border-width: 0 .4em .6em; 
}
.spanTent:after {content: ""; 
position: absolute; 
width: .25em; height: .3em; 
left: -.12em; top: .3em; 
background-color: silver; 
border-radius: 30% 30% 0 0; 
}
</style>
<p><span class=spanTent></span> Tent (Camping). [&#9978; (&amp;#9978;), símbolos varios 'tienda de campamento, carpa.'.]</p>


<style type="text/css"> /* 25/Jul/2014 18:34 */
.spanTrailerHome {position: relative; 
display: inline-block; 
margin: 0 .85em .1em; 
width: .7em; height: .2em; 
border-color: black; 
border-style: solid; 
border-width: .13em .15em .33em; 
border-radius: .18em; 
background-image: linear-gradient(to left, white, white 50%, black 50%, black 60%, white 60%, white 100%); 
}
.spanTrailerHome::before {content: ""; 
position: absolute; 
width: .18em; height: .18em; 
left: .25em; top: .48em; 
background-color: black; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em white; 
}
.spanTrailerHome::after {content: ""; 
position: absolute; 
width: 0; height: .05em; 
left: .75em; top: .45em; 
border-color: transparent black; 
border-style: solid; 
border-width: .02em 0 .02em .3em; 
}
</style>
<p><span class=spanTrailerHome></span> Trailer (Home). ['casa rodante'.]</p>


<style type="text/css">
.spanBike1 {position: relative; 
display: inline-block; 
margin: 0 1.2em .2em; 
width: .18em; height: .16em; 
background-color: white; 
border-radius: .1em 15% 25% 0; 
border-width: .1em .1em .1em 0; 
border-color: black black black lime; 
border-style: solid;
-webkit-transform: rotate(-45deg); 
transform: rotate(-45deg); 
}
.spanBike1:before {content: ""; 
position: absolute; 
width: .1em; height: .26em; 
left: -.05em; top: .165em; 
background-color: black; 
border-radius: .05em; 

}
.spanBike1:after {content: ""; 
position: absolute; 
width: .14em; height: .14em; 
left: .24em; top: -.24em; 
background-color: black; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: -.55em .2em 0 .05em white, -.55em .2em 0 .13em black, 
-.06em .7em 0 .05em white, -.06em .7em 0 .13em black;
}
</style>
  <p><span class=spanBike1></span> Bicycle 1, Bicyclist (Bike-way). [&#128692; (&amp;#128692;), símbolos de mapa y transporte 'ciclista'; &#128690; (&amp;#128690;), símbolos de mapa y transporte 'bicicleta'.]</p>


<style type="text/css"> /* 22/Dic/2014 18:26 */
.spanBike2 {position: relative; 
display: inline-block; 
margin: 0 1em .58em 1.3em; 
width: .25em; height: .07em; 
background-color: black; 
border-radius: 0 .07em 0 0; 
box-shadow: -.24em .14em 0 .025em black; 
}
.spanBike2::before {content: ""; 
position: absolute; 
width: .36em; height: .36em; 
left: -.48em; top: .3em; 
border-radius: 100%; 
box-shadow: .73em .02em 0 0 white, 
0 0 0 .05em black, .73em .02em 0 .05em black; 
}
.spanBike2::after {content: ""; 
position: absolute; 
display: inline-block; 
left: -.49em; top: .12em; 
width: .66em; height: .66em; 
border: none; 
border-right: solid .35em transparent; 
background-image: 
linear-gradient(to right bottom, transparent, transparent 40%, black 42%, black 58%, transparent 60%, transparent 100%), 
linear-gradient(to left bottom, transparent, transparent 40%, black 42%, black 58%, transparent 60%, transparent 100%), 
linear-gradient(to left bottom, transparent, transparent 40%, black 42%, black 58%, transparent 60%, transparent 100%), 
linear-gradient(to right bottom, transparent, transparent 40%, black 42%, black 58%, transparent 60%, transparent 100%),
linear-gradient(transparent, transparent 88%, black 88%, black 100%),
linear-gradient(transparent, transparent 88%, black 88%, black 100%); 
background-size: 50% 50%; 
background-repeat: no-repeat; 
background-position: 0 0, right top, left bottom, right bottom; 
background-clip: content-box; 
box-shadow: 0 -.06em 0 0 black; 
transform: rotate(65deg) scaleX(.5); 
}
</style>
<p><span class=spanBike2></span> Bicycle 2. </p>


<style type="text/css"> /* 26/Jun/2016 14:16 */
.spanSpeedBoat {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: 1.2em; height: .23em; 
border-style: solid; 
border-width: .16em 0 .1em 0; 
border-color: transparent; 
border-radius: 1.2em .6em .5em 1em / .45em .5em .5em .6em; 
background: linear-gradient(black .05em, silver .075em, silver .1em, black .125em); 
background-clip: content-box; 
transform: rotate(5deg); 
}
.spanSpeedBoat::before {content: ""; 
position: absolute; 
width: .6em; height: .19em; 
left: .22em; top: -.09em; 
background-color: ; 
border-style: solid; 
border-width: .06em .16em 0 .05em; 
border-color: black transparent transparent black; 
border-radius: 70% 40% 0 10% / 100% 40% 0 80%; 
transform: rotate(15deg); 
}
.spanSpeedBoat::after {content: ""; 
position: absolute; 
width: .12em; height: .3em; 
left: 1.07em; top: -.29em; 
border: none; 
border-left: solid .03em black; 
border-top-right-radius: 100% 20%; 
background: 
linear-gradient(340deg, transparent .09em, black .1em) no-repeat; 
background-size: .12em .15em; 
}
</style>
<p><span class=spanSpeedBoat></span> Speed Boat. [&#128676; (&amp;#128676;), símbolos de transportes y mapas 'lancha de velocidad'.]</p>


<style type="text/css"> /* 19/Sep/2014 13:17 */
.spanKayak {position: relative; 
display: inline-block; 
margin: 0 .6em -.1em .65em; 
width: 1.4em; height: 1em; 
}
.spanKayak::before {content: ""; 
position: absolute; 
width: .8em; height: .8em; 
left: .3em; top: .1em; 
background-color: black; 
border-radius: 100% 5%; 
background-image:radial-gradient(circle, grey, grey .13em, black .15em, black 100%); 
transform: rotate(45deg) skewx(-15deg) skewy(-15deg); 
}
.spanKayak::after {content: ""; 
position: absolute; 
width: .04em; height: .7em; 
left: .6em; top: 0; 
background-color: black; 
border-style: solid; 
border-width: .15em .06em; 
border-color: black transparent; 
border-radius: .05em; 
background-clip: content-box; 
box-shadow: 0 -.2em 0 -.025em black, 0 .2em 0 -.025em black; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanKayak></span> Kayak. </p>


<style type="text/css"> /* 7/Ene/2015 12:53 */
.spanSwords {position: relative; 
display: inline-block; 
margin: 0 .8em 0 1.2em; 
width: .6em; height: .8em; 
}
.spanSwords::before , .spanSwords::after {content: ""; 
position: absolute; 
width: .3em; height: 1em; 
left: 0; top: 0; 
background-image: 
radial-gradient(ellipse at bottom, black, black 50%, transparent 60%, transparent 100%), 
radial-gradient(ellipse, black, black 70%, transparent 90%, transparent 100%), 
radial-gradient(ellipse, black, black 60%, transparent 80%, transparent 100%); 
background-size: 100% .14em, .065em .2em, .05em 100%; 
background-repeat: no-repeat; 
background-position: center .7em, center bottom, center top; 
transform: rotate(45deg); 
}
.spanSwords::after {transform: rotate(315deg); 
}
</style>
<p><span class=spanSwords></span> Crossed Swords. [&#9876; (&amp;#9876;), símbolos varios 'espadas cruzadas', 'esgrima'.]</p>


<style type="text/css"> /* 3/Ago/2014 0:23 */
.spanBowArrow {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .7em; height: .7em; 
background-image: 
linear-gradient(to bottom left, black 0, black .1em, transparent .12em, transparent .5em, black .52em, black .53em, transparent .54em, transparent 100%), 
linear-gradient(to bottom right, transparent 0, transparent 47.5%, black 48%, black 52%, transparent 52.5%, transparent 100%); 
background-repeat: no-repeat, no-repeat, repeat; 
border-radius: 0 0 0 .8em
}
.spanBowArrow::before {content: ""; 
position: absolute; 
width: .05em; height: .05em; 
left: .03em; bottom: .03em; 
border-color: black black transparent transparent; 
border-style: double; 
border-width: .08em; 
}
.spanBowArrow::after {content: ""; 
position: absolute; 
width: .64em; height: .64em; 
left: 0; top: 0; 
border-color: black; 
border-style: solid; 
border-width: .06em .06em 0 0; 
border-radius: 0 .6em 0 0 / 0 .6em 0 0; 
}
</style>
<p><span class=spanBowArrow></span> Bow and Arrow (Archery). ['arco y flecha'.]</p>


<style type="text/css"> /* 15/Abr/2014 23:44 */
.spanArrowTarget {position: relative; 
display: inline-block; 
margin: 0 1.05em 0; 
width: .3em; height: .4em; 
border-color: black; 
border-style: double; 
border-width: .15em; 
border-radius: 50%; 
-webkit-transform: scalex(.8); 
transform: scalex(.8); 
box-shadow: inset 0 0 0 .08em white, .04em 0 0 0 black; 
background-color: black; 
background-clip: padding-box; 
}
.spanArrowTarget:before {content: ""; 
position: absolute; 
left: -.35em; top: .13em; 
width: .4em; height: .04em; 
background-color: black; 
border-color: transparent black; 
border-style: solid; 
border-width: .05em 0 .05em .1em; 
box-shadow: inset 0 0 .03em .0065em white; 
background-clip: content-box; 
}
.spanArrowTarget:after {content: ""; 
position: absolute; 
width: .05em; height: .04em; 
left: -.48em; top: .13em; 
background-color: black; 
border-color: black white; 
border-style: solid; 
border-width: .05em 0 .05em .1em; 
}
</style>
<p><span class=spanArrowTarget></span> On target. Direct hit. [&#127919; (&amp;#127919;), símbolos varios y pictogramas 'acierto' o 'flecha en el blanco'.]</p>


<style type="text/css"> /* 23/Dic/2015 21:57 */
.spanDart {position: relative; 
display: inline-block; 
margin: 0 1.4em .05em .8em; 
width: .15em; height: .4em; 
border-right: solid .25em navy; 
border-radius: .1em .3em .3em .1em / .2em; 
background: radial-gradient(ellipse at left, transparent 35%, black 40%) 0 center; 
background-size: .15em 140%; 
}
.spanDart::before {content: ""; 
position: absolute; 
width: 1em; height: .14em; 
left: 0; top: .14em; 
border-right: solid .3em transparent; 
background: 
radial-gradient(ellipse at right, black 65%, transparent 70%) 0 center content-box, 
radial-gradient(ellipse at left, grey 65%, transparent 70%) .5em center content-box, 
radial-gradient(ellipse at left, grey 65%, transparent 70%) .9em center border-box; 
background-size: 80% 100%, 80% 100%, .3em 28%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanDart></span> Dart. ['dardo'.]</p>


<style type="text/css"> /* 3/Mar/2015 19:27 */
.spanSkateboard {position: relative; 
display: inline-block; 
margin: 0 .75em .2em; 
width: 1.2em; height: .3em; 
border-radius: 0 .1em .7em .05em / 0 .1em .4em .05em; 
box-shadow: inset 0 -.1em 0 -.05em black; 
}
.spanSkateboard::before , .spanSkateboard::after {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .1em; top: .28em; 
background-color: black; 
border: solid .04em grey; 
border-radius: 100%; 
box-shadow: .06em 0 0 -.012em black; 
}
.spanSkateboard::after {left: .8em; 
box-shadow: -.06em 0 0 -.012em black; 
}
</style>
<p><span class=spanSkateboard></span> Skateboard. ['patineta'.]</p>


<style type="text/css">
.spanTrophy {
display: inline-block; 
position: relative; 
width: .8em; height: .4em; 
border-style: solid; 
border-color: transparent; 
border-width: .4em 0 0 0; 
border-radius: 45%; 
margin: 0 .95em .3em; 
border-collapse: separate; 
box-shadow: inset 0 0 0 .06em black;
}
.spanTrophy::before {
content: ''; 
position: absolute; 
top: -.18em; left: .2em; 
width: .4em; height: .7em; 
background-color: black; 
border-radius: 100% / 30% 30% 180% 180%;
}
.spanTrophy::after {
content: ''; 
position: absolute; 
top: -.15em; left: .25em; 
width: .3em; height: .1em; 
background-color: white; 
border-radius: 100%;
border-collapse: separate; 
box-shadow: 0 .69em 0 .02em black; 
}
</style>
<p><span class=spanTrophy></span> Trophy, Cup. [&#127942; (&amp;#127942;), símbolos varios y pictogramas 'trofeo, copa'.]</p>


<style type="text/css">
.spanMedal {display: inline-block; 
border-width: .1em; 
border-color: goldenrod; 
border-style: ridge; 
width: .25em; height: .3em; 
background-color: gold; 
border-radius: 50% 50% 0 0; 
margin: 0 1.1em; 
position: relative; 
}
.spanMedal:before {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
background-color: goldenrod; 
left: -.1em; top: -.5em; 
border-radius: 50%; 
border: .05em dotted yellow; 
}
</style>
<p><span class=spanMedal></span> Medal. [&#127894; (&amp;#127894;), &#127941;(&amp;#127941;), unicode no válido 'medalla'.]</p>


<style type="text/css"> /* 24/Sep/2014 10:37 */
.spanSoccer {position: relative; 
display: inline-block; 
margin: 0 .7em -.1em .8em; 
width: 1em; height: .6em; 
background-color: green; 
border: solid .06em green; 
border-radius: .06em; 
box-shadow: inset 0 0 0 .025em white; 
background-image: radial-gradient(circle, transparent 0, transparent .1em, white .11em, white .13em, transparent .14em, transparent 100%),
linear-gradient(to left, transparent, transparent 48%, white 48.5%, white 51.5%, transparent 52%, transparent 100%); 
background-repeat: no-repeat; 
}
.spanSoccer::before , .spanSoccer::after {content: ""; 
position: absolute; 
width: .1em; height: .2em; 
left: 0; top: .175em; 
border: solid .03em white; 
}
.spanSoccer::after {left: auto; 
right: 0; 
}
</style>
<p><span class=spanSoccer></span> Football Soccer Grid. ['campo de fútbol'.]</p>


<style type="text/css"> /* 7/Ene/2016 19:04 */
.spanRugby {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: .8em; height: .8em; 
background-color: dimgrey; 
border-radius: 10% 85% 10% 85%; 
background-image: 
radial-gradient(circle at left top, transparent .25em, black .26em, black .3em, transparent .31em), 
radial-gradient(circle at right bottom, transparent .25em, black .26em, black .3em, transparent .31em); 
background-repeat: no-repeat; 
}
.spanRugby::before {content: ""; 
position: absolute; 
width: 50%; height: 20%; 
left: 25%; top: 40%; 
background-image: 
linear-gradient(90deg, transparent 0, transparent .05em, black .05em, black .09em, transparent .09em), 
linear-gradient(dimgrey 38%, black 38%, black 62%, dimgrey 62%); 
background-size: 24% 100%, 100% 100%; 
background-repeat: repeat, no-repeat; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanRugby></span> Rugby Ball. [&#127945; (&amp;#127945;), símbolos gráficos y pictogramas 'pelota de rugby'; 'fútbol americano'.]</p>


<style type="text/css"> /* 6/Mar/2015 14:16 */
.spanBeachBall {position: relative; 
display: inline-block; 
margin: 0 .9em -.1em 1em; 
width: .8em; height: .8em; 
background-color: red; 
border-radius: 100%; 
box-shadow: inset .05em -.04em .13em .05em rgba(0,0,0,.5), inset -.3em .08em 0 -.1em lime, inset .33em .08em 0 -.1em blue; 
overflow: hidden; 
transform: rotatez(320deg); 
}
.spanBeachBall::before {content: ""; 
position: absolute; 
width: 50%; height: .15em; 
left: 25%; top: -.02em; 
background-color: orange; 
border: dotted .03em maroon; 
border-radius: 0 0 100% 100%; 
}
</style>
<p><span class=spanBeachBall></span> Beach Ball. ['pelota de playa'.]</p>


<style type="text/css"> /* 27/Jul/2014 16:56 */
.spanGolf {position: relative; 
display: inline-block; 
margin: 0 1.25em; 
width: .18em; height: .55em; 
border-color: transparent transparent black black; 
border-style: solid; 
border-width: 0 0 .12em .06em; 
border-radius: 0 0 .08em .1em; 
transform: rotate(345deg); 
}
.spanGolf::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .18em; top: .4em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanGolf></span> Golf. [&#127948; (&amp;#127948;), símbolos varios y pictogramas 'golf', 'golfista'.]</p>


<style type="text/css">
.spanBasketBall {position: relative; 
display: inline-block; 
background-color: black; 
width: .8em; height: .8em; 
margin: 0 .9em 0 1em; 
border-radius: 50%; 
overflow: hidden; 
}
.spanBasketBall:before {content: ""; 
display: block; 
width: .8em; height: .8em; 
position: absolute; 
left: -.25em; top: -.55em; 
border: solid .05em white; 
border-radius: 50%; 
}
.spanBasketBall:after {content: ""; 
display: block; 
width: .8em; height: .8em; 
position: absolute; 
left: .2em; top: .5em; 
border: solid .05em white; 
border-radius: 50%; 
}
</style>
<p><span class=spanBasketBall></span> Basket Ball. [&#127936; (&amp;#127936;), símbolos varios y pictogramas 'pelota de basquet y aro'.]</p>


<style type="text/css"> /* 15/Ago/2014 14:24 */
.spanTennis {position: relative; 
display: inline-block; 
margin: 0 1.1em .15em; 
width: .5em; height: .5em; 
border: solid .03em black; 
border-radius: .35em .35em .5em .15em / .5em .35em .35em .15em; 
background-image: radial-gradient(circle, transparent, transparent .23em, black .24em, black .26em, white .27em, white 100%), 
repeating-linear-gradient(45deg, transparent, transparent .035em, black .036em, black .05em), 
repeating-linear-gradient(315deg, transparent, transparent .035em, black .036em, black .05em); 
background-position: .02em -.02em; 
}
.spanTennis::before {content: ""; 
position: absolute; 
width: .1em; height: .0em; 
left: -.2em; top: .4em; 
background-color: black; 
border-color: black transparent; 
border-style: solid; 
border-width: 0 .03em .4em; 
border-radius: 0 0 .06em .06em; 
background-clip: content-box; 
transform: rotate(45deg); 
}
.spanTennis::after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .35em; top: .6em; 
background-color: grey; 
border-radius: 100%; 
background-image: radial-gradient(circle at right, transparent 0, transparent .05em, black .06em, black .08em, transparent .085em, transparent 100%), 
radial-gradient(circle at left, transparent 0, transparent .05em, black .06em, black .08em, transparent .085em, transparent 100%); 
background-size: .1em 100%; 
background-repeat: no-repeat; 
background-position: .1em 0, 0 0; 
}
</style>
<p><span class=spanTennis></span> Tennis. [&#127934; (&amp;#127934;), símbolos varios y pictogramas 'raqueta y pelota de tenis'.]</p>


<style type="text/css"> /* 31/Dic/2015 19:48 */
.spanTableTennis {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1.3em; 
width: .4em; height: .4em; 
background: linear-gradient(black 15%, grey 15%); 
border-radius: 1.2em 1.2em 1.5em 1.5em / 1.6em ; 
}
.spanTableTennis::before {content: ""; 
position: absolute; 
width: .08em; height: .23em; 
left: .15em; top: -.2em; 
background-color: black; 
border-radius: .04em; 
box-shadow: -.44em .36em 0 0 black; 
}
.spanTableTennis::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: -.45em; top: -.2em; 
background: linear-gradient(grey 85%, black 85%); 
border-radius: 1.5em 1.5em 1.2em 1.2em  / 1.6em; 
}
</style>
<p><span class=spanTableTennis></span> Table Tennis. ['ping-pong' o 'tenis de mesa'.]</p>


<style type="text/css"> /* 31/Jul/2015 22:54 */
.spanBilliards {position: relative; 
display: inline-block; 
margin: 0 .6em -.1em; 
width: 1.5em; height: .1em; 
border-radius: .05em; 
box- shadow: inset 0 0 .15em .02em rgba(0, 0, 0, .7); 
box-sizing: ; 
background-image: 
radial-gradient(ellipse, black 70%, transparent 78%); 
background-size: 120% 100%; 
background-position: 110% 0; 
}
.spanBilliards::before {content: ""; 
position: absolute; 
width: .13em; height: .13em; 
left: .7em; top: -.45em; 
background-color: white; 
border: solid .04em dimgrey; 
border-radius: 100%; 
box-shadow: -.23em 0 0 0 black, -.11em -.19em 0 0 grey, 
-.35em .2em 0 0 dimgrey, -.12em .2em 0 0 black, .12em .2em 0 0 grey; 
}
</style>
<p><span class=spanBilliards></span> Billiards. [&#127921; (&amp;#127921;), símbolos varios y pictogramas 'billar'.]</p>


<style type="text/css"> /* 2/Ene/2016 16:35 */
.spanBowling {position: relative; 
display: inline-block; 
margin: 0 1.2em 0 1.1em; 
top: -.1em; 
width: .26em; height: .45em; 
background-color: black; 
line-height: 0; 
text-align: center; 
box-shadow: .2em -.05em 0 0 #444, -.2em -.05em 0 0 #444; 
border-radius: .14em .14em .11em .11em / .3em .3em .22em .22em; 
}
.spanBowling::before {content: ""; 
position: relative; 
display: inline-block; 
width: .12em; height: .25em; 
left: auto; top: -.27em; 
background-color: black; 
box-shadow: .2em -.05em 0 0 #444, -.2em -.05em 0 0 #444; 
border-radius: .1em .1em .07em .07em / .15em .15em .22em .22em; 
}
.spanBowling::after {content: ""; 
position: absolute; 
width: .07em; height: .07em; 
left: .6em; top: .2em; 
background-color: black; 
box-shadow: .06em .04em 0 0 black, .06em -.03em 0 0 black, .08em .06em 0 .16em dimgrey; 
border-radius: 100%; 
}
</style>
<p><span class=spanBowling></span> Bowling. [&#127923; (&amp;#127923;), símbolos varios y pictogramas 'bowling'; 'juego de bolos'.]</p>


<style type="text/css"> /* 11/Jun/2015 13:30 */
.spanBowlingBall {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1em; 
width: .7em; height: .7em; 
background-color: dimgrey; 
border-radius: 100%; 
box-shadow: inset -.08em -.08em .06em 0 black; 
}
.spanBowlingBall::before {content: ""; 
position: absolute; 
width: .08em; height: .08em; 
left: .22em; top: .22em; 
background-color: black; 
box-shadow: -.06em -.1em 0 0 black, -.13em .015em 0 0 black; 
border-radius: inherit; 
}
</style>
<p><span class=spanBowlingBall></span> Bowling Ball. ['bola de bowling'.]</p>


<style type="text/css"> /* 2/Ene/2016 16:35 */
.spanBowlingPin {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
top: -.1em; 
width: .26em; height: .46em; 
background-color: khaki; 
line-height: 0; 
text-align: center; 
box-shadow: 0 -.1em 0 -.05em green, inset -.03em -.02em .05em 0 darkkhaki; 
border-radius: .13em .13em .11em .11em / .3em .3em .22em .22em; 
}
.spanBowlingPin::before {content: ""; 
position: relative; 
display: inline-block; 
width: .12em; height: .26em; 
left: auto; top: -.27em; 
background-color: khaki; 
box-shadow: inset -.02em .02em .02em -.02em darkkhaki; 
border-radius: .1em .1em .07em .07em / .15em .15em .21em .21em; 
}
</style>
<p><span class=spanBowlingPin></span> Bowling Pin. ['palo de bowling'.]</p>


<style type="text/css"> /* 12/Mar/2015 14:10 */
.spanNunchaku {position: relative; 
display: inline-block; 
margin: 0 1em .15em 1.7em; 
width: 0; height: .24em; 
background-color: silver; 
border-style: dashed; 
border-width: .027em; 
border-color: black; 
}
.spanNunchaku::before , .spanNunchaku::after {content: ""; 
position: absolute; 
width: .71em; height: .06em; 
left: -.8em; top: -.07em; 
background-color: black; 
border: none; 
border-right: solid .04em white; 
border-radius: .03em .05em .05em .03em; 
box-shadow: 0 0 0 .03em black; 
}
.spanNunchaku::after {
top: .215em; 
}
</style>
<p><span class=spanNunchaku></span> Nunchaku. ['nunchacos'.]</p>


<style type="text/css"> /* 2/Jun/2015 14:29 */
.spanDumbbells {position: relative; 
display: inline-block; 
margin: 0 .7em .25em; 
width: 1.3em; height: .1em; 
background-color: black; 
border-radius: .02em; 
}
.spanDumbbells::before , .spanDumbbells::after {content: ""; 
position: absolute; 
width: .12em; height: .3em; 
left: .05em; top: -.18em; 
background-color: black; 
border-style: solid; 
border-width: .08em 0; 
border-color: transparent; 
box-shadow: .12em 0 0 0 black; 
background-clip: content-box; 
}
.spanDumbbells::after {
left: auto; right: .05em;  
box-shadow: -.12em 0 0 0 black; 
}
</style>
<p><span class=spanDumbbells></span> Dumbbells. ['pesas'.]</p>


<style type="text/css"> /* 2/Ago/2016 14:49 */
.spanHandGrip {position: relative; 
display: inline-block; 
margin: 0 1.1em .5em; 
width: .4em; height: .05em; 
background-color: black; 
border-style: solid; 
border-width: .06em .06em .06em 0; 
border-color: transparent black transparent; 
border-radius: 0 .05em .05em 0; 
background-clip: content-box; 
box-shadow: .4em 0 0 -.01em black;  
}
.spanHandGrip::after {content: ""; 
position: absolute; 
left: -.15em; top: 0; 
width: .22em; height: .22em; 
border: solid .06em black; 
border-radius: 100%; 
box-shadow: .023em .023em 0 0 white; 
}
.spanHandGrip::before {content: ""; 
position: absolute; 
left: 0; top: .23em; 
width: inherit; height: inherit; 
background-color: inherit; 
border: inherit; 
border-radius: inherit; 
background-clip: inherit; 
box-shadow: inherit;  
transform: rotate(25deg); 
transform-origin: left center; 
}
</style>
<p><span class=spanHandGrip></span> Hand Grip. ['tensor de gimnasia para manos'.]</p><style type="text/css"> /* 25/Jul/2014 15:41 */
.spanSteeringWheel {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .6em; 
border: solid .1em black; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .035em white; 
background-image: 
radial-gradient(circle, white 0, white .16em, transparent .17em, transparent 100%), 
radial-gradient(circle, white 0, white .16em, transparent .17em, transparent 100%), 
radial-gradient(circle at bottom, black 0, black .42em, white .44em, white 100%); 
background-size: .5em .5em, .5em .5em, .6em .6em; 
background-repeat: no-repeat; 
background-position: -.16em .275em, .285em .275em, 0 0; 
}
.spanSteeringWheel::before {content: ""; 
display: block; 
width: .12em; height: .1em; 
margin: .26em auto; 
background-color: white; 
border-radius: 100%; 
}
</style>
<p><span class=spanSteeringWheel></span> Steering Wheel. ['volante de auto'.]</p>


<style type="text/css"> /* 20/Sep/2014 9:39 */
.spanMotoHelmet {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .75em; height: .65em; 
background-color: black; 
border-radius: .5em .5em .1em .3em / .4em .4em .2em .4em; 
overflow: hidden; 
}
.spanMotoHelmet::before {content: ""; 
position: absolute; 
width: .05em; height: .1em; 
left: .35em; top: .24em; 
background-color: silver; 
border-style: solid; 
border-width: 0 .45em .3em 0; 
border-color: black silver; 
border-radius: .05em 0 .4em .1em / .05em 0 .3em .5em; 
}
</style>
<p><span class=spanMotoHelmet></span> Moto Helmet. ['casco para motocicleta'.]</p>


<style type="text/css"> /* 23/Jun/2014 18:05 */
.spanMonoculars {position: relative; 
display: inline-block; 
margin: 0 1.1em .25em; 
width: .4em; height: .18em; 
background-color: black; 
border-left: solid 1px white; 
border-radius: .15em; 
box-shadow: -.26em -.01em 0 -.04em black; 
}
.spanMonoculars::before {content: ""; 
position: absolute; 
width: .45em; height: .25em; 
left: .27em; top: -.029em; 
background-color: black; 
border-left: solid 1px white; 
border-radius: .12em; 
}
.spanMonoculars::after {content: ""; 
position: absolute; 
width: .14em; height: .2em; 
left: .55em; top: .0em; 
background-color: white; 
border-radius: .12em; 
}
</style>
<p><span class=spanMonoculars></span> Monoculars. ['catalejos'; &#128301; (&amp;#128301;), símbolos varios y pictogramas 'telescopio'.]</p>


<style type="text/css"> /* 7/Ago/2014 20:03 */
.spanBinoculars {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .64em; height: .3em; 
background-color: black; 
border-color: black transparent; 
border-style: double solid; 
border-width: 0 .05em .13em; 
border-radius: .15em .15em 0 0; 
background-clip: content-box; 
}
.spanBinoculars::before {content: ""; 
display:block; 
margin: -.24em auto; 
width: .5em; height: .2em; 
background-color: black;  
border-color: black transparent; 
border-style: double solid; 
border-width: .13em .03em 0; 
background-clip: content-box; 
}
.spanBinoculars::after {content: ""; 
display:block; 
margin: -.325em auto; 
width: .1em; height: .16em; 
background-color: black;  
border-color: white; 
border-style: solid; 
border-width: .16em 0 .36em; 
border-radius: .04em; 
}
</style>
<p><span class=spanBinoculars></span> Binoculars. ['binoculares, largavistas'.]</p>


<style type="text/css"> /* 26/Jun/2015 13:35 */
.spanTrafficCone {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.1em; 
width: .4em; height: .54em; 
border-style: solid; 
border-width: 0 .07em .06em; 
border-color: red white; 
border-radius: 0 0 .2em .2em / 0 0 .1em .1em; 
background: 
linear-gradient(102deg, white 46%, transparent 49%), 
linear-gradient(258deg, white 46%, transparent 49%), 
linear-gradient(to right,yellow, gold), 
linear-gradient(to right, orange, orangered); 
background-size: 50% 100%, 50% 100%, 100% .15em, 100% 100%; 
background-repeat: no-repeat; 
background-position: 0 0, right top, left 60%; 
}
</style>
<p><span class=spanTrafficCone></span> Traffic Cone. ['cono de seguridad para tránsito'.]</p>


<style type="text/css"> /* 8/Feb/2015 16:43 */
.spanGasPump {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .4em; height: .5em; 
background-color: white; 
border-style: solid; 
border-width: .1em .05em .1em; 
border-color: black transparent; 
border-radius: .2em .2em 0 0; 
box-shadow: inset 0 -.25em 0 .1em black; 
}
.spanGasPump::before {content: ""; 
position: absolute; 
width: .04em; height: .2em; 
left: .44em; top: .3em; 
background- color: lime; 
border-style: solid; 
border-width: 0 .05em .05em; 
border-color: black; 
border-radius: 0 0 .1em .1em; 
}
.spanGasPump::after {content: ""; 
position: absolute; 
width: .2em; height: .27em; 
left: 100%; top: .04em; 
background-image: 
radial-gradient(circle, white, white .02em, black .03em, black .05em, transparent .06em, transparent 100%), 
radial-gradient(ellipse at left bottom, transparent, transparent .135em, black .14em, black .175em, transparent .18em, transparent 100%), 
radial-gradient(circle at left bottom, transparent, transparent .035em, black .04em, black .08em, transparent .085em, transparent 100%); 
background-size: .1em .1em, .18em .28em, .1em .1em; 
background-repeat: no-repeat; 
background-position: center center, 0 0, left bottom; 
background-clip: border-box; 
background-origin: border-box; 
}
</style>
<p><span class=spanGasPump></span> Fuel Pump. [&#9981; (&amp;#9981;), símbolos varios 'bomba de combustible'.]</p>


<style type="text/css"> /* 12/Jun/2015 11:29 */
.spanTwoWay {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .52em; height: .52em; 
background-color: yellow; 
border: solid .06em black; 
background-image: 
linear-gradient(45deg, black 45%, yellow 55%), 
linear-gradient(45deg, yellow 45%, black 55%); 
background-size: .16em .16em; 
background-repeat: no-repeat; 
background-position: .06em center, right .06em center; 
border-radius: .08em; 
transform: rotate(-45deg); 
}
.spanTwoWay::before {content: ""; 
position: absolute; 
width: .125em; height: .3em; 
left: .135em; top: .12em; 
border-style: solid; 
border-width: 0 .06em; 
border-color: black; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanTwoWay></span> Two-Way Right Traffic. [&#9943; (&amp;#9943;), símbolos varios 'tráfico doble sentido a mano izquierda con fondo blanco'.]</p>


<style type="text/css">
.spanTrafficLight1 {position: relative; 
display: inline-block; 
margin: auto 1.15em 0; 
width: .28em; height: .8em; 
background-color: #aaaaaa; 
border-radius: .08em .08em .05em .05em; 
border: .05em solid dimgray; 
}
.spanTrafficLight1:before {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .04em; top: .07em; 
background-color: #555555; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: -.01em -.045em 0 .016em black, 
-.015em .26em 0 .016em #8e8e8e, -.015em .235em 0 .016em black, 
-.015em .52em 0 .016em #666666, -.015em .5em 0 .016em black;
}
.spanTrafficLight1:after {content: ""; 
position: absolute; 
width: .2em; height: .12em; 
left: .0372em; top: .8em; 
background-color: black; 
}
.spanTrafficLight1:hover {
background-color: yellow; 
}
.spanTrafficLight1:hover:before {
background-color: red; 
box-shadow: -.01em -.045em 0 .016em black, 
-.015em .26em 0 .016em #ffaa00, -.015em .235em 0 .016em black, 
-.015em .52em 0 .016em lime, -.015em .5em 0 .016em black;
}
</style>
  <p><span class=spanTrafficLight1></span> Traffic Light 1. [&#128678; (&amp;#128678;), símbolos de mapa y transporte 'semáforo urbano'.]</p>


<style type="text/css"> /* 16/Abr/2015 19:06 */
.spanTrafficLight2 {position: relative; 
display: inline-block; 
margin: 0 1em -.03em 1.1em; 
width: .3em; height: .55em; 
border-style: solid; 
border-width: 0 .1em; 
border-color: transparent; 
background-image: 
linear-gradient(45deg, transparent, transparent 45%, black 50%, black 100%), 
linear-gradient(315deg, transparent, transparent 45%, black 50%, black 100%); 
background-size: .1em .2em; 
background-repeat: repeat-y; 
background-position: 0 0, right top; 
background-origin: border-box; 
}
.spanTrafficLight2::before {content: ""; 
position: absolute; 
left: .11em; top: -.2em; 
width: .3em; height: .1em; 
border-style: solid; 
border-width: .08em 0 0 .08em; 
border-color: black transparent transparent black; 
border-radius: .1em 0 0 0; 
}
.spanTrafficLight2::after {content: ""; 
position: absolute; 
left: .0em; top: -.05em; 
width: .2em; height: .6em; 
border-style: solid; 
border-width: .05em .05em; 
border-color: black; 
border-radius: .05em; 
background: 
radial-gradient(circle, transparent, transparent .06em, black .08em, black 100%), 
linear-gradient(to bottom, red, red 33%, yellow 33%, yellow 66%, lime 66%, lime 100%); 
background-size: .2em .2em, 100% 100%; 
}
</style>
<p><span class=spanTrafficLight2></span> Traffic Light 2. </p>


<style type="text/css"> /* 25/Jul/2014 18:01 */
.spanDirSignal {position: relative; 
display: inline-block; 
margin: 0 1.3em; 
width: .07em; height: .8em; 
background-color: black; 
border-radius: .03em .03em 0 0; 
}
.spanDirSignal::before {content: ""; 
position: absolute; 
width: .45em; height: .15em; 
left: -.45em; top: .05em; 
background-image: linear-gradient(135deg, white, white .1em, transparent .1em, transparent 100%), 
linear-gradient(45deg, white, white .1em, black .1em, black 100%); 
}
.spanDirSignal::after {content: ""; 
position: absolute; 
width: .45em; height: .15em; 
left: .05em; top: .22em; 
background-image: linear-gradient(135deg, transparent, transparent .35em, white .35em, white 100%), 
linear-gradient(45deg, black, black .35em, white .35em, white 100%); 
}
</style>
<p><span class=spanDirSignal></span> Direction Signal. ['señal de dirección'.]</p>


<style type="text/css"> /* 1/Dic/2014 8:19 */
.spanSplitArrow {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .6em; 
background-image: 
linear-gradient(to bottom left, transparent, transparent 45%, black 46%, black 54%, transparent 55%, transparent 100%), 
linear-gradient(to bottom right, transparent, transparent 45%, black 46%, black 54%, transparent 55%, transparent 100%), 
linear-gradient(to bottom left, black 0, black .15em, transparent .16em, transparent 100%), 
linear-gradient(to bottom right, black 0, black .15em, white .16em, white 100%); 
background-repeat: no-repeat; 
}
.spanSplitArrow::before {content: ""; 
position: absolute; 
width: 100%; height: 50%; 
left: 0; bottom: 0; 
background-color: black; 
border-style: solid; 
border-width: 0 .255em; 
border-color: white; 
box-sizing: border-box; 
}
</style>
<p><span class=spanSplitArrow></span> Split Arrow. ['flecha dividida' o 'bifurcación'.]</p>


<style type="text/css"> /* 30/Dic/2014 11:50 */
.spanRoad {position: relative; 
display: inline-block; 
margin: 0 .85em -.06em; 
width: 1em; height: .8em; 
background: 
repeating-linear-gradient(black 0, black .04em, white .04em, white .13em)center top, 
linear-gradient(290deg, black 0, black 49%, silver 51%, silver 100%), 
linear-gradient(70deg, black 0, black 49%, silver 51%, silver 100%) right top; 
background-size: .03em 100%, 50.1% 100%, 50.1% 100%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanRoad></span> Road. Motorway. [&#128739; (&amp;#128739;), símbolos de transportes y mapas 'ruta', 'autopista' o 'camino asfaltado'.]</p>


<style type="text/css"> /* 9/May/2015 20:10 */
.spanRedButton {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: 1.1em; height: .3em; 
border: none; 
border-bottom: solid.025em dimgrey; 
border-radius: 100%; 
background-image: linear-gradient(90deg, darkgrey, dimgrey); 
}
.spanRedButton::before {content: ""; 
position: absolute; 
width: .8em; height: .46em; 
left: .15em; bottom: .1em; 
border: none; 
border-bottom: solid.025em maroon; 
border-radius: .4em / .15em; 
background-image: linear-gradient(90deg, red, maroon); 
background-clip: content-box; 
}
.spanRedButton::after {content: ""; 
position: absolute; 
width: .8em; height: .25em; 
left: .15em; bottom: .34em; 
background: crimson; 
border-radius: inherit; 
}
</style>
<p><span class=spanRedButton></span> Red Button. ['botón rojo'; &#128306; (&amp;#128306;), símbolos varios y pictogramas 'botón negro'.]</p>





<hr>






<style type="text/css">
.spanBarChart {background-color: lime; 
display: inline-block; 
background-color: blue;
position: relative; 
width: .3em; height: .8em; 
margin: 0 1.2em .1em; 
border-bottom: .1em ridge black; 
}
.spanBarChart:before {content: ""; 
position: absolute; 
bottom: -.1em; left: -.3em; 
display: block; 
width: .3em; 
height: .6em; 
background-color: red; 
border-bottom: .1em ridge black; 
}
.spanBarChart:after {content: ""; 
position: absolute; 
bottom: -.1em; left: .3em; 
display: block; 
width: .3em; height: .35em; 
background-color: green; 
border-bottom: .1em ridge black; 
}
</style>
<p><span class=spanBarChart></span> Bar Chart. [&#128202; (&amp;#128202;), símbolos varios y pictogramas 'gráfico de barras'.]</p>

<style type="text/css">
.spanPieChart1 {background-color: blue; 
display: inline-block; 
position: relative; 
overflow: hidden; 
width: .8em; height: .8em; 
border: none; 
border-radius: 50%; 
margin: 0 .95em .1em; 
}
.spanPieChart1:before {content: ""; 
position: absolute; 
top: 0; left:53%; 
display: block; 
height: 0; width: 0; 
border-color: red; 
border-style: solid; 
border-width: .4em .4em 0 0; 
border-radius: 0 100% 0 0; 
}
</style>
<p><span class=spanPieChart1></span> Pie Chart1. [&#9684; (&amp;#9684;), forma geométrica 'círculo con cuadrante superior derecho negro'.]</p>

<style type="text/css">
.spanPieChart2 {background-color: blue; 
display: inline-block; 
position: relative; 
width: 0; height: 0; 
border-width: .4em; 
border-style: solid; 
border-color: lime yellow fuchsia red; 
border-radius: 50%; 
margin: 0 .95em .1em; 
}
.spanPieChart2:before {content: ""; 
position: absolute; 
top: -.4em; left: -.4em; 
display: block; 
height: 0; width: 0; 
border: .4em solid; 
-webkit-transform: rotate(30deg); 
transform: rotate(30deg); 
border-color: lime transparent blue; 
border-radius: 50%; 
}
/*.spanPieChart2:after {content: ""; 
position: absolute; 
top: -.4em; left: -.4em; 
display: block; 
height: 0; width: 0; 
border: .4em solid blue; 
border-top-color: transparent; 
border-radius: 50%; 
}*/
</style>
<p><span class=spanPieChart2></span> Pie Chart2.</p>

<style type="text/css">
.spanChart {position: relative; 
display: inline-block; 
margin: 0 .75em; 
width: 1.2em; height: .8em; 
outline: 1px solid black; 
border-bottom: .1em solid silver; 
border-left: .1em solid silver; 
background-image: repeating-linear-gradient(0deg, white, white .09em, gray .09em, gray .1em); 
}
.spanChart:before {content: ""; 
position: absolute; 
top: .2em; left: .3em; 
width: .035em; height: .5em; 
background-color: black; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
box-shadow: .28em -.45em 0 0 black; 
}
.spanChart:after {content: ""; 
position: absolute; 
top: .25em; left: .55em; 
width: .035em; height: .3em; 
background-color: black; 
-webkit-transform: rotate(330deg); 
transform: rotate(330deg); 
}
</style>
<p><span class=spanChart></span> Chart Upwards. [&#128200; (&amp;#128200;), símbolos varios y pictogramas 'gráfico en alza'; &#128480; (&amp;#128480;), símbolos varios y pictogramas 'gráfico de stock'.]</p>







<hr>







<style type="text/css"> /* 20/May/2014 23:52 */
.spanTicTacToe {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .9em; height: .9em; 
background-image: 
repeating-linear-gradient(transparent, transparent .286em, black .29em, black .313em), 
repeating-linear-gradient(90deg, transparent, transparent .284em, black .29em, black .313em), 
repeating-linear-gradient(41deg, transparent, transparent 46%, black 46%, black 54%), 
repeating-linear-gradient(-41deg, transparent, transparent 46%, black 46%, black 54%), 
radial-gradient(transparent, transparent .08em, black .09em, black .11em, transparent .12em, transparent 100%), 
radial-gradient(transparent, transparent .08em, black .09em, black .11em, transparent .12em, transparent 100%); 
background-size: 100% 95%, 95% 100%, .25em .31em, .24em .3em, .6em .6em, .3em .3em; 
background-position: 0 0, 0 0, .34em 0, .34em 0, -.155em -.15em, 0 .6em; 
background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, no-repeat; 
}
</style>
<p><span class=spanTicTacToe></span> Tic Tac Toe Game. ['juego de tatetí'.]</p>


<style type="text/css">
.spanPuzzle1 {margin: 0 1em .2em 1.05em; 
position: relative; 
display: inline-block; 
width: .6em; height: .6em;
border-radius: .05em; 
background-color: black; 
transform: rotate(130deg); 
-webkit-transform: rotate(130deg); 
}
.spanPuzzle1:before {content: ""; 
position: absolute; 
top: .15em; left: .55em; 
width: .25em; height: .25em; 
background-color: black; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: -.75em 0 0 0 black, -.37em -.22em 0 0 white, 
-.38em .28em 0 0 white; 
}
</style>
<p><span class=spanPuzzle1></span> Puzzle 1 (Add On, Complement). ['pieza de rompecabezas'] </p>


<style type="text/css"> /* 1/May/2014 23:20 */
.spanPuzzle2 {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.2em; 
width: .5em; height: .5em; 
background-color: black; 
border-radius: .05em; 
}
.spanPuzzle2:before, .spanPuzzle2:after {content: ""; 
position: absolute; 
width: .18em; height: .18em; 
left: .15em; top: -.17em; 
background-color: black; 
border-radius: 50%; 
box-shadow: .2em .31em 0 -.01em white; 
}
.spanPuzzle2:after {left: -.17em; top: .15em; 
box-shadow: .31em .2em 0 -.01em white; 
}
</style>
<p><span class=spanPuzzle2></span> Puzzle 2. </p>


<style type="text/css"> /* 23/Abr/2014 22:19 */
.spanChessKingB {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: white; 
border-color: black; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em white; 
}
.spanChessKingB:before {content: ""; 
display: block; 
margin: .18em auto 0; 
width: .2em; height: .2em; 
border-color: transparent white white; 
border-style: solid; 
border-width: .17em .06em 0; 
border-radius: 50%; 
background-clip: border-box; 
background-image: 
radial-gradient(circle, black 0, black .07em, transparent .07em, transparent 100%), 
radial-gradient(circle, black 0, black .1em, transparent .1em, transparent 100%), 
linear-gradient(90deg, transparent 0, transparent 43%, black 43%, black 62%, transparent 62%, transparent 100%); 
background-repeat: repeat-x, no-repeat, no-repeat; 
background-size: .15em .12em, 100% 100%, 100% 100%; 
background-position: -.045em -.12em, 0 -.06em, 0 -.15em; 
}
.spanChessKingB:after {content: ""; 
display: block; 
margin: -.08em auto; 
width: .03em; height: .2em; 
border-color: black; 
border-style: solid; 
border-width: .05em .15em .1em; 
border-radius: .11em .11em 0 0 / .2em .2em 0 0;
background-image: repeating-linear-gradient(transparent 0, transparent 30%, black 30%, black 45%, transparent 45%); 
}
</style>
  <p><span class=spanChessKingB></span>Black Chess King. [&#9818; (&amp;#9818;), símbolos varios 'rey negro de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 15:27 */
.spanChessQueenB {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: white; 
border-color: black; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em white; 
}
.spanChessQueenB:before {content: ""; 
display: block; 
margin: .2em auto 0; 
width: .2em; height: .2em; 
background-color: black; 
border-color: transparent white white; 
border-style: solid; 
border-width: .1em .07em; 
border-radius: 50%; 
background-clip: border-box; 
background-image: radial-gradient(circle at top, white 0, white .06em, black .06em, black 100%); 
background-repeat: repeat-x; 
background-size: .1em .1em; 
background-position: 0 -.1em; 
}
.spanChessQueenB:after {content: ""; 
display: block; 
margin: -.1em auto; 
width: .03em; height: .2em; 
border-color: black; 
border-style: solid; 
border-width: .05em .15em .1em; 
border-radius: .11em .11em 0 0 / .2em .2em 0 0;
background-image: 
}
</style>
  <p><span class=spanChessQueenB></span>Black Chess Queen. [&#9819; (&amp;#9819;), símbolos varios 'reina negra de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 10:17 */
.spanChessTowerB {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: white; 
border-color: black; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em white; 
}
.spanChessTowerB:before {content: ""; 
position: absolute; 
width: .3em; height: .4em; 
left: .158em; top: .35em; 
background-color: black; 
border-color: black white; 
border-style: solid; 
border-width: .1em; 
background-image: 
linear-gradient(90deg, transparent 0, transparent .22em, white .22em, white .24em, transparent .24em, transparent 100%)
}
.spanChessTowerB:after {content: ""; 
position: absolute; 
width: .15em; height: .07em; 
left: .128em; top: .26em; 
background-color: black; 
box-shadow: .2em 0 0 0 black, .4em 0 0 0 black; 
}
</style>
  <p><span class=spanChessTowerB></span>Black Chess Rook. Chess Tower. [&#9820; (&amp;#9820;), símbolos varios 'torre negra de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 16:01 */
.spanChessBishopB {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: white; 
border-color: black; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em white; 
}
.spanChessBishopB:before {content: ""; 
display: block; 
margin: .25em auto 0; 
width: .025em; height: .27em; 
background-color: white; 
border-color: transparent black; 
border-style: solid; 
border-width: 0 .1em; 
border-radius: 50%; 
box-shadow: 0 -.18em 0 -.075em black; 
}
.spanChessBishopB:after {content: ""; 
display: block; 
margin: 0 auto; 
width: .07em; height: 0; 
border-color: black transparent; 
border-style: solid; 
border-width: .05em .24em .25em; 
border-radius: 100%; 
}
</style>
  <p><span class=spanChessBishopB></span>Black Chess Bishop. [&#9821; (&amp;#9821;), símbolos varios 'alfil negro de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 12:01 */
.spanChessHorseB {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: white; 
border-color: black; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em white; 
}
.spanChessHorseB:before {content: ""; 
position: absolute; 
width: .21em; height: .3em; 
left: .14em; top: .2em; 
border-color: black transparent transparent; 
border-style: solid; 
border-width: .07em; 
border-radius: 100% 100% 90% 150%; 
background-clip: content-box; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
background-image: 
radial-gradient(circle, white 0, white .025em, black .03em, black 100%); 
background-position: .18em -.06em; 
}
.spanChessHorseB:after {content: ""; 
position: absolute; 
top: .23em; left: .16em; 
width: .11em; height: .51em; 
border-color: black black transparent transparent; 
border-style: solid; 
border-width: .06em .31em .11em .16em; 
border-radius: 500% 1100% 500% 100%; 
}
</style>
  <p><span class=spanChessHorseB></span>Black Chess Knight. Chess Horse. [&#9822; (&amp;#9822;), símbolos varios 'caballo negro de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 15:27 */
.spanChessPawnB {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: white; 
border-color: black; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .02em white; 
}
.spanChessPawnB:before {content: ""; 
position: absolute; 
width: .07em; height: 0; 
left: .29em; top: .5em; 
background-color: black; 
border-color: black white; 
border-style: solid; 
border-width: .05em .09em .25em; 
}
.spanChessPawnB:after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .325em; top: .35em; 
background-color: black; 
border-radius: 50%; 
}
</style>
  <p><span class=spanChessPawnB></span>Black Chess Pawn. [&#9823; (&amp;#9823;), símbolos varios 'peón negro de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 22:54 */
.spanChessKingW {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em black; 
}
.spanChessKingW:before {content: ""; 
display: block; 
margin: .18em auto 0; 
width: .2em; height: .2em; 
border-color: transparent black black; 
border-style: solid; 
border-width: .17em .06em 0; 
border-radius: 50%; 
background-clip: border-box; 
background-image: 
radial-gradient(circle, white 0, white .07em, transparent .07em, transparent 100%), 
radial-gradient(circle, white 0, white .1em, transparent .1em, transparent 100%), 
linear-gradient(90deg, transparent 0, transparent 43%, white 43%, white 62%, transparent 62%, transparent 100%); 
background-repeat: repeat-x, no-repeat, no-repeat; 
background-size: .15em .12em, 100% 100%, 100% 100%; 
background-position: -.045em -.12em, 0 -.06em, 0 -.15em; 
}
.spanChessKingW:after {content: ""; 
display: block; 
margin: -.08em auto; 
width: .03em; height: .2em; 
border-color: white; 
border-style: solid; 
border-width: .05em .15em .1em; 
border-radius: .11em .11em 0 0 / .2em .2em 0 0;
background-image: repeating-linear-gradient(transparent 0, transparent 30%, white 30%, white 45%, transparent 45%); 
}
</style>
  <p><span class=spanChessKingW></span>White Chess King. [&#9812; (&amp;#9812;), símbolos varios 'rey blanco de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 22:54 */
.spanChessQueenW {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em black; 
}
.spanChessQueenW:before {content: ""; 
display: block; 
margin: .2em auto 0; 
width: .2em; height: .2em; 
background-color: white; 
border-color: transparent black black; 
border-style: solid; 
border-width: .1em .07em; 
border-radius: 50%; 
background-clip: border-box; 
background-image: radial-gradient(circle at top, black 0, black .06em, white .06em, white 100%); 
background-repeat: repeat-x; 
background-size: .1em .1em; 
background-position: 0 -.1em; 
}
.spanChessQueenW:after {content: ""; 
display: block; 
margin: -.1em auto; 
width: .03em; height: .2em; 
border-color: white; 
border-style: solid; 
border-width: .05em .15em .1em; 
border-radius: .11em .11em 0 0 / .2em .2em 0 0;
background-image: 
}
</style>
  <p><span class=spanChessQueenW></span>White Chess Queen. [&#9813; (&amp;#9813;), símbolos varios 'reina blanca de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 22:53 */
.spanChessTowerW {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em black; 
}
.spanChessTowerW:before {content: ""; 
position: absolute; 
width: .3em; height: .4em; 
left: .158em; top: .35em; 
background-color: white; 
border-color: white black; 
border-style: solid; 
border-width: .1em; 
background-image: 
linear-gradient(90deg, transparent 0, transparent .22em, black .22em, black .24em, transparent .24em, transparent 100%)
}
.spanChessTowerW:after {content: ""; 
position: absolute; 
width: .15em; height: .07em; 
left: .128em; top: .26em; 
background-color: white; 
box-shadow: .2em 0 0 0 white, .4em 0 0 0 white; 
}
</style>
  <p><span class=spanChessTowerW></span>White Chess Rook. Chess Tower. [&#9814; (&amp;#9814;), símbolos varios 'torre blanca de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 22:53 */
.spanChessBishopW {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em black; 
}
.spanChessBishopW:before {content: ""; 
display: block; 
margin: .25em auto 0; 
width: .025em; height: .27em; 
background-color: black; 
border-color: transparent white; 
border-style: solid; 
border-width: 0 .1em; 
border-radius: 50%; 
box-shadow: 0 -.18em 0 -.075em white; 
}
.spanChessBishopW:after {content: ""; 
display: block; 
margin: 0 auto; 
width: .07em; height: 0; 
border-color: white transparent; 
border-style: solid; 
border-width: .05em .24em .25em; 
border-radius: 100%; 
}
</style>
  <p><span class=spanChessBishopW></span>White Chess Bishop. [&#9815; (&amp;#9815;), símbolos varios 'alfil blanco de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 22:53 */
.spanChessHorseW {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em black; 
}
.spanChessHorseW:before {content: ""; 
position: absolute; 
width: .21em; height: .3em; 
left: .14em; top: .2em; 
border-color: white transparent transparent; 
border-style: solid; 
border-width: .07em; 
border-radius: 100% 100% 90% 150%; 
background-clip: content-box; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
background-image: 
radial-gradient(circle, black 0, black .025em, white .03em, white 100%); 
background-position: .18em -.06em; 
}
.spanChessHorseW:after {content: ""; 
position: absolute; 
top: .23em; left: .16em; 
width: .11em; height: .51em; 
border-color: white white transparent transparent; 
border-style: solid; 
border-width: .06em .31em .11em .16em; 
border-radius: 500% 1100% 500% 100%; 
}
</style>
  <p><span class=spanChessHorseW></span>White Chess Knight. Chess Horse. [&#9816; (&amp;#9816;), símbolos varios 'caballo blanco de ajedrez'.]</p>

<style type="text/css"> /* 23/Abr/2014 22:53 */
.spanChessPawnW {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .8em; 
overflow: hidden; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
box-shadow: 0 0 0 .03em black; 
}
.spanChessPawnW:before {content: ""; 
position: absolute; 
width: .07em; height: 0; 
left: .29em; top: .5em; 
background-color: white; 
border-color: white black; 
border-style: solid; 
border-width: .05em .09em .25em; 
}
.spanChessPawnW:after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .325em; top: .35em; 
background-color: white; 
border-radius: 50%; 
}
</style>
  <p><span class=spanChessPawnW></span>White Chess Pawn. [&#9817; (&amp;#9817;), símbolos varios 'peón blanco de ajedrez'.]</p>


<style type="text/css">
.spanDice1 {margin: 0 1em .2em; 
position: relative; 
display: inline-block; 
width: .8em; height: .8em;
border-radius: .12em; 
background-color: silver; 
}
.spanDice1:before {content: ""; 
position: absolute; 
top: 50%; left: 50%; 
transform: translateX(-50%) translateY(-50%); 
-webkit-transform: translateX(-50%) translateY(-50%); 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanDice1></span> Dice Face 1. [&#9856; (&amp;#9856;), símbolos varios 'dado con cara as'.] </p>

<style type="text/css">
.spanDice2 {margin: 0 1em .2em; 
position: relative; 
display: inline-block; 
width: .8em; height: .8em;
border-radius: .12em; 
background-color: silver; 
}
.spanDice2:before {content: ""; 
position: absolute; 
top: 15%; left: 15%; 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
}
.spanDice2:after {content: ""; 
position: absolute; 
bottom: 15%; right: 15%; 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanDice2></span> Dice Face 2. [&#9857; (&amp;#9857;), símbolos varios 'dado con cara dos'.] </p>

<style type="text/css">
.spanDice3 {margin: 0 1em .2em; 
position: relative; 
display: inline-block; 
width: .8em; height: .8em;
border-radius: .12em; 
background-color: silver; 
}
.spanDice3:before {content: ""; 
position: absolute; 
top: 50%; left: 50%; 
transform: translateX(-50%) translateY(-50%); 
-webkit-transform: translateX(-50%) translateY(-50%); 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
border-collapse: separate; 
box-shadow: -.22em -.22em 0 0 black, .22em .22em 0 0 black; 
}
</style>
<p><span class=spanDice3></span> Dice Face 3. [&#9858; (&amp;#9858;), símbolos varios 'dado con cara tres'.] </p>

<style type="text/css">
.spanDice4 {margin: 0 1em .2em; 
position: relative; 
display: inline-block; 
width: .8em; height: .8em;
border-radius: .12em; 
background-color: silver; 
}
.spanDice4:before {content: ""; 
position: absolute; 
top: .1em; left: .1em; 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
border-collapse: separate; 
box-shadow: 0 .44em 0 0 black; 
}
.spanDice4:after {content: ""; 
position: absolute; 
top: .1em; right: .1em; 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
border-collapse: separate; 
box-shadow: 0 .44em 0 0 black; 
}
</style>
<p><span class=spanDice4></span> Dice Face 4. [&#9859; (&amp;#9859;), símbolos varios 'dado con cara cuatro'.] </p>

<style type="text/css">
.spanDice5 {margin: 0 1em .2em; 
position: relative; 
display: inline-block; 
width: .8em; height: .8em;
border-radius: .12em; 
background-color: silver; 
}
.spanDice5:before {content: ""; 
position: absolute; 
top: 50%; left: 50%; 
transform: translateX(-50%) translateY(-50%); 
-webkit-transform: translateX(-50%) translateY(-50%); 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
border-collapse: separate; 
box-shadow: -.22em .22em 0 0 black, .22em -.22em 0 0 black, -.22em -.22em 0 0 black, .22em .22em 0 0 black; 
}
</style>
<p><span class=spanDice5></span> Dice Face 5. [&#9860; (&amp;#9860;), símbolos varios 'dado con cara cinco'.] </p>

<style type="text/css">
.spanDice6 {margin: 0 1em .2em; 
position: relative; 
display: inline-block; 
width: .8em; height: .8em;
border-radius: .12em; 
background-color: silver; 
}
.spanDice6:before {content: ""; 
position: absolute; 
top: .1em; left: .1em; 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
border-collapse: separate; 
box-shadow: 0 .44em 0 0 black, 0 .225em 0 0 black; 
}
.spanDice6:after {content: ""; 
position: absolute; 
top: .1em; right: .1em; 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100%; 
border-collapse: separate; 
box-shadow: 0 .44em 0 0 black, 0 .225em 0 0 black; 
}
</style>
<p><span class=spanDice6></span> Dice Face 6. [&#9861; (&amp;#9861;), símbolos varios 'dado con cara seis'.] </p>


<style type="text/css"> /* 2/Jun/2015 15:16 */
.spanWhiteDraughtsMan {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: 1em; height: .4em; 
background-color: darkgrey; 
border-radius: 0 0 100% 100%; 
}
.spanWhiteDraughtsMan::before {content: ""; 
position: absolute; 
width: .6em; height: .05em; 
left: 0; top: -.2em; 
background-color: grey; 
border: double .2em darkgrey; 
border-radius: 100%; 
box-shadow: 0 .03em 0 0 grey;
}
</style>
<p><span class=spanWhiteDraughtsMan></span> White Draughts Man. [&#9920; (&amp;#9920;), símbolos varios 'ficha de damas blanca'.]</p>


<style type="text/css"> /* 2/Jun/2015 15:30 */
.spanWhiteDraughtsKing {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em; 
width: 1em; height: .4em; 
background-color: darkgrey; 
border-radius: 0 0 100% 100%; 
}
.spanWhiteDraughtsKing::after {content: ""; 
position: absolute; 
width: .6em; height: .05em; 
left: 0; top: -.4em; 
background-color: grey; 
border: double .2em darkgrey; 
border-radius: 100%; 
box-shadow: 0 .03em 0 0 grey;
}
.spanWhiteDraughtsKing::before {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: 0; top: -.2em; 
background-color: inherit; 
border-radius: inherit; 
box-shadow: 0 .035em 0 0 grey;
}
</style>
<p><span class=spanWhiteDraughtsKing></span> White Draughts King. [&#9921; (&amp;#9921;), símbolos varios 'ficha de damas blanca coronada'.]</p>


<style type="text/css"> /* 2/Jun/2015 15:05 */
.spanBlackDraughtsMan {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: 1em; height: .4em; 
background-color: black; 
border-radius: 0 0 100% 100%; 
}
.spanBlackDraughtsMan::before {content: ""; 
position: absolute; 
width: .6em; height: .05em; 
left: 0; top: -.2em; 
background-color: dimgrey; 
border: double .2em black; 
border-radius: 100%; 
box-shadow: 0 .03em 0 0 silver;
}
</style>
<p><span class=spanBlackDraughtsMan></span> Black Draughts Man. [&#9922; (&amp;#9922;), símbolos varios 'ficha de damas negra'.]</p>


<style type="text/css"> /* 2/Jun/2015 15:31 */
.spanBlackDraughtsKing {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em; 
width: 1em; height: .4em; 
background-color: black; 
border-radius: 0 0 100% 100%; 
}
.spanBlackDraughtsKing::after {content: ""; 
position: absolute; 
width: .6em; height: .05em; 
left: 0; top: -.4em; 
background-color: dimgrey; 
border: double .2em black; 
border-radius: 100%; 
box-shadow: 0 .03em 0 0 silver;
}
.spanBlackDraughtsKing::before {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: 0; top: -.2em; 
background-color: inherit; 
border-radius: inherit; 
box-shadow: 0 .035em 0 0 silver;
}
</style>
<p><span class=spanBlackDraughtsKing></span> Black Draughts King. [&#9923; (&amp;#9923;), símbolos varios 'ficha de damas negra coronada'.]</p>


<style type="text/css"> /* 10/Ago/2017 18:42 */
.spanCasinoChip {position: relative; 
display: inline-block; 
margin: 0 1.2em 0 .7em; 
width: .5em; height: .5em; 
border: dashed .08em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em indigo; 
background-image: 
radial-gradient(circle, indigo 45%, white 50%, white 55%, indigo 60%); 
}
.spanCasinoChip::before , .spanCasinoChip::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: .6em; top: -.1em; 
background-image: 
radial-gradient(circle, blue 45%, white 50%, white 55%, blue 60%); 
border: inherit; 
border-radius: inherit; 
box-shadow: 0 0 0 .05em blue; 
}
.spanCasinoChip::after {
left: .3em; top: .08em; 
background-image: 
radial-gradient(circle, darkgreen 45%, white 50%, white 55%, darkgreen 60%); 
box-shadow: 0 0 0 .05em darkgreen; 
}
</style>
<p><span class=spanCasinoChip></span> Casino Chip. ['fichas de casino'.]</p>


<style type="text/css"> /* 7/May/2014 14:57 */
.spanPokerCards {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 1.2em; 
width: .37em; height: .6em; 
background-color: white; 
border-color: silver; 
border-style: solid; 
border-width: .002em; 
border-radius: .04em; 
box-shadow: .01em .015em .005em .005em rgba(0,0,0,.5); 
-webkit-transform: rotate(30deg); 
transform: rotate(30deg); 
background-image: 
radial-gradient(circle, red 0, red 55%, transparent 55%, transparent 100%), 
linear-gradient(-50deg, transparent 0, transparent 40%, red 40%, red 100%); 
background-size: .18em .18em, .1em .1em; 
background-repeat: no-repeat; 
background-position: .125em .15em, .18em .27em; 
}
.spanPokerCards::before, .spanPokerCards::after {content: ""; 
position: absolute; 
left: -.18em; top: .06em; 
width: .37em; height: .6em; 
background-color: white; 
border-color: silver; 
border-style: solid; 
border-width: .002em; 
border-radius: .04em; 
box-shadow: .005em .015em .005em .005em rgba(0,0,0,.5); 
-webkit-transform: rotate(-28deg); 
transform: rotate(-28deg); 
background-image: 
radial-gradient(circle, black 0, black 50%, transparent 50%, transparent 100%), 
radial-gradient(circle, black 0, black 50%, transparent 50%, transparent 100%), 
radial-gradient(circle, black 0, black 50%, transparent 50%, transparent 100%); 
background-size: .16em .16em; 
background-repeat: no-repeat; 
background-position: .11em .142em, .1em .2em, .17em .23em; 
}
.spanPokerCards:after {left: -.29em; top: .2em; 
box-shadow: .002em .018em .005em .005em rgba(0,0,0,.5); 
-webkit-transform: rotate(-53deg); 
transform: rotate(-53deg); 
background-image: 
linear-gradient(-50deg, white 0, white 20%, transparent 20%, transparent 80%, white 80%, white 100%), 
linear-gradient(50deg, transparent 0, transparent 20%, red 20%, red 80%, transparent 80%, transparent 100%); 
background-size: .15em .18em; 
background-repeat: no-repeat; 
background-position: .11em .2em; 
}
</style>
<p><span class=spanPokerCards></span> Playing Cards. ['naipes'.]</p>


<style type="text/css"> /* 27/Mar/2015 12:35 */
.spanRubik {position: relative; 
display: inline-block; 
margin: 0 1.2em -.1em .8em; 
width: .63em; height: .63em; 
border: solid .025em black; 
border-radius: .03em; 
background-color: red; 
background-image: 
repeating-linear-gradient(to bottom, transparent, transparent 28%, black 30%, black 36%), 
repeating-linear-gradient(to right, transparent, transparent 28%, black 30%, black 36%); 
background-clip: content-box; 
}
.spanRubik::before , .spanRubik::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: 100%; top: -.025em; 
border: inherit; 
border-radius: inherit; 
background-color: lime; 
background-image: inherit; 
background-clip: inherit; 
transform: skewy(325deg) scalex(.53); 
transform-origin: 0 center; 
}
.spanRubik::after {
left: -.03em; top: -.675em; 
background-color: blue; 
transform: skewx(305deg) scaley(.35); 
transform-origin: 0 bottom; 
}
</style>
<p><span class=spanRubik></span> Rubik's Cube. ['cubo de Rubik'.]</p>


<style type="text/css"> /* 20/Ene/2015 18:11 */
.spanSimon {position: relative; 
display: inline-block; 
margin: 0 1em -.03em; 
width: .6em; height: .6em; 
border: solid .08em transparent; 
border-radius: 100%; 
background-image: 
linear-gradient(90deg, dimgrey, black), 
linear-gradient(dimgrey, black), 
linear-gradient(lime, lime 50%, gold 50%, gold 100%), 
linear-gradient(tomato, tomato 50%, dodgerblue 50%, dodgerblue 100%), 
linear-gradient(320deg, black, dimgrey); 
background-size: 100% .07em, .07em 100%, 50% 100%, 50% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-position: left center, center top, 0 0, right top, 0 0; 
background-clip: border-box, border-box, content-box, content-box; 
background-origin: border-box; 
}
.spanSimon::before {content: ""; 
position: relative; 
display: block; 
margin: .145em auto; 
width: .25em; height: .25em; 
background -color: grey; 
border: solid .05em black; 
border-radius: 100%; 
background-image: 
linear-gradient(dimgrey, dimgrey, silver, silver); 
}
.spanSimon::after {content: ""; 
position: absolute; 
width: .05em; height: .05em; 
left: .235em; top: .35em; 
background-color: blue; 
border-radius: 50%; 
box-shadow: .095em 0 0 0 red; 
}
</style>
<p><span class=spanSimon></span> Simon Game. ['juego Simon'.]</p>


<style type="text/css"> /* 25/Ago/2015 13:29 */
.spanPackman {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: 0; height: 0; 
background-color: ; 
border-style: solid; 
border-width: .36em; 
border-color: gold transparent gold gold; 
border-radius: 100%; 
}
.spanPackman::before {content: ""; 
position: absolute; 
width: .08em; height: .08em; 
left: -.14em; top: -.17em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanPackman></span> Packman. </p>




<hr>

<style type="text/css"> /* 12/Mar/2016 20:22 */
.spanAlligator {position: relative; 
display: inline-block; 
margin: 0 .85em .1em .75em; 
width: .9em; height: .3em; 
border-style: solid; 
border-width: 0 .07em .055em 0; 
border-color: black; 
border-radius: 0 .3em .4em .1em / 0 .26em .24em .1em; 
background-image: 
radial-gradient(ellipse farthest-side at bottom, black 95%, transparent 100%); 
background-size: .65em .14em; 
background-repeat: no-repeat; 
background-position: left .24em bottom -.02em; 
}
.spanAlligator::before {content: ""; 
position: absolute; 
width: .35em; height: .1em; 
left: .0em; top: .09em; 
border-style: solid; 
border-width: 0 0 .055em; 
border-color: black; 
border-radius: 0 0 0 .05em; 
background-image: 
radial-gradient(ellipse, black 70%, lime 75%); 
background-size: .18em .1em; 
background-repeat: no-repeat; 
background-position: .2em .045em; 
background-clip: content-box; 
transform: rotate(25deg); 
}
.spanAlligator::after {content: ""; 
position: absolute; 
width: .075em; height: .2em; 
left: .36em; top: .27em; 
background-color: black; 
border-radius: 0 .1em .2em .03em / 0 .2em 200% .03em ; 
box-shadow: .21em -.21em 0 0 black; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanAlligator></span> Crocodile. Alligator. [&#128010; (&amp;#128010;), símbolos varios y pictogramas 'cocodrilo'.]</p>


<style type="text/css"> /* 9/Mar/2016 16:50 */
.spanElephant {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.1em; 
width: .14em; height: .3em; 
background-color: ; 
border-style: solid; 
border-width: .36em .15em 0; 
border-color: grey; 
border-radius: 100% 100% 10% 10% / 50% 50% 100% 100%; 
background: radial-gradient(ellipse at left bottom, transparent 42%, grey 50%)0 -.03em, 
radial-gradient(ellipse at right bottom, transparent 42%, grey 50%) right 0 top -.03em; 
background-size: 55% 100%; 
background-repeat: no-repeat; 
background-clip: content-box; 
}
.spanElephant::before {content: ""; 
position: absolute; 
width: .38em; height: .46em; 
left: -.12em; top: -.4em; 
background-color: grey; 
border-radius: 100% 100% 100% 100% / 100% 100% 120% 120%; 
box-shadow: -.2em -.02em 0 -.02em grey, .2em -.02em 0 -.02em grey, 
inset 0 .02em .01em .02em darkgrey; 
}
.spanElephant::after {content: ""; 
position: absolute; 
width: .05em; height: .07em; 
left: -.05em; top: -.17em; 
background-color: black; 
border-radius: 100%; 
box-shadow: .17em 0 0 0 black; 
}
</style>
<p><span class=spanElephant></span> Elephant. [&#128024; (&amp;#128024;), símbolos varios y pictogramas 'elefante'.]</p>


<style type="text/css"> /* 24/Oct/2014 18:47 */
.spanPig {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: .78em; height: .6em; 
border: solid .12em rgba(0,255,0,.0); 
border-radius: 100%; 
box-shadow: inset 0 0 0 .3em pink; 
background: 
linear-gradient(pink, pink) -.1em .21em, 
linear-gradient(pink, pink) .18em .51em, 
linear-gradient(pink, pink) .47em .51em, 
linear-gradient(45deg, transparent, transparent 50%, pink 55%, pink 100%) .02em 0; 
background-size: .16em .15em; 
background-repeat: no-repeat; 
}
.spanPig::before {content: ""; 
position: absolute; 
width: .24em; height: .18em; 
left: .735em; top: .18em; 
border-radius: .3em .3em 0 0 / .2em .2em 0 0; 
background-image: 
radial-gradient(ellipse, transparent, transparent .04em, pink .05em, pink .08em, transparent .09em, transparent 100%), 
radial-gradient(ellipse, transparent, transparent .04em, pink .05em, pink .08em, transparent .09em, transparent 100%); 
background-size: .35em .38em; 
background-repeat: no-repeat; 
background-position: -.1em -.13em, -.02em -.14em; 
}
.spanPig::after {content: ""; 
position: absolute; 
width: .05em; height: .05em; 
left: .1em; top: .17em; 
background-color: black; 
border: solid .027em white; 
border-radius: 100%; 
}
</style>
<p><span class=spanPig></span> Pig. [&#128022; (&amp;#128022;), símbolos varios y pictogramas 'cerdo'.]</p>


<style type="text/css"> /* 2/May/2016 21:01 */
.spanToucan {position: relative; 
display: inline-block; 
margin: 0 .8em .4em 1.2em; 
width: .52em; height: .28em; 
border-radius: .3em .2em .2em .15em; 
background: 
radial-gradient(circle, black 40%, white 50%, white 65%, transparent 70%) .11em .05em, 
radial-gradient(ellipse at right, gold 50%, black 55%), 
linear-gradient(to bottom, darkorange 55%, transparent 55%); 
background-size: .1em .1em, 45% 100%, 100% 100%; 
background-repeat: no-repeat; 
}
.spanToucan::before {content: ""; 
position: absolute; 
width: .45em; height: .22em; 
left: -.51em; top: .11em; 
background-color: black; 
border-style: solid; 
border-width: .1em .25em .1em 0em; 
border-color: transparent black transparent transparent; 
border-radius: 0 10% 200% 100% / 0 50% 200% 200%; 
background-clip: content-box; 
transform: rotate(25deg); 
}
.spanToucan::after {content: ""; 
position: absolute; 
width: .25em; height: .15em; 
left: -.3em; top: .48em; 
border-radius: 40% 200% 150% 40% / 40% 80% 80% 40%; 
background: 
radial-gradient(ellipse, black 60%, transparent 80%) center center, 
radial-gradient(ellipse at right top, black 60%, transparent 70%), 
radial-gradient(ellipse at right bottom, black 60%, transparent 70%) 0 100%; 
background-size: 100% 50%; 
background-repeat: no-repeat; 
transform: rotate(330deg); 
}
</style>
<p><span class=spanToucan></span> Toucan. ['tucán'.]</p>


<style type="text/css"> /* 26/Mar/2014 12:32 */
.spanOwl {position: relative; 
display: inline-block; 
margin: 0 1.4em 0 1em; 
width: .5em; height: .65em; 
border: solid .05em black; 
border-radius: .15em .15em .5em .5em; 
background-image: radial-gradient(circle farthest-side at left, black 0, black .2em, transparent .2em, transparent 100%), 
radial-gradient(circle farthest-side at right, black 0, black .2em, transparent .2em, transparent 100%), 
linear-gradient(45deg, transparent 0, transparent 50%, black 51%, black 100%), 
linear-gradient(315deg, transparent 0, transparent 50%, black 51%, black 100%); 
background-size: 50% 100%, 50% 100%, .06em .085em, .06em .085em; 
background-repeat: no-repeat; 
background-position: 0 .12em, .25em .12em, .2em .24em, .25em .24em; 
}
.spanOwl:before, .spanOwl:after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .02em; top: .02em; 
padding: .03em; 
background-color: black; 
border-color: black; 
border-style: solid; 
border-width: .03em; 
border-radius: 50%; 
background-clip: content-box; 
}
.spanOwl:after {left: .27em; top: .02em; 
}
</style>
<p><span class=spanOwl></span>Owl. ['lechuza'.]</p>

<style type="text/css">
.spanPenguin1 {position: relative; 
display: inline-block; 
width: .3em; height: .8em; 
margin: 0 1.15em .2em; 
border-style: solid; 
border-color: silver; 
border-width: .0em .08em .0em .0em; 
border-radius: 90% 0 60%; 
background-color: black; 
}
.spanPenguin1:before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .4em; 
border-style: solid; 
border-color: transparent orange; 
border-width: .08em 0 .08em .08em; 
}
.spanPenguin1:after {content: ""; 
position: absolute; 
width: .1em; height: .05em; 
top: .79em; left: .15em; 
border-style: solid; 
border-color: black transparent orange orange; 
border-width: 0 .05em .05em; 
}
</style>
<p><span class=spanPenguin1></span> Penguin 1. [&#128039; (&amp;#128039;), símbolos varios y pictogramas 'pingüino'.]</p>

<style type="text/css">
.spanPenguin2{position: relative; 
display: inline-block; 
margin: 0 1.1em .1em; 
width: .26em; height: .7em; 
border-style: solid; 
border-color: black; 
border-width: .15em .025em .025em .2em; 
border-radius: 200% 20% 120% 0; 
background-color: white; 
}
.spanPenguin2:before {content: ""; 
width: 0; height: 0; 
border-style: solid; 
border-color: transparent black; 
border-width: .05em 0 .06em .12em; 
left: .25em; top: -.1em; 
position: absolute; 
}
.spanPenguin2:after {content: ""; 
position: absolute; 
width: .1em; height: .05em; 
left: .0em; top: .7em; 
border-width: 0 0 .095em .095em; 
border-color: black; 
border-style: double;
}
</style>
<p><span class=spanPenguin2></span> Penguin 2.</p>

<style type="text/css">
.spanWhale{position: relative; 
display: inline-block; 
margin: 0 .95em .2em; 
width: .8em; height: .35em; 
border-radius: 70% 350% 80% 70% / 100% 400% 50% 90%; 
background-color: black; 
}
.spanWhale:before {content: ""; 
width: .4em; height: .3em; 
border-style: solid; 
border-color: black; 
border-width: 0 0 .12em 0; 
border-radius: 50%; 
left: .6em; top: -.06em; 
position: absolute; 
}
.spanWhale:after {content: ""; 
width: .3em; height: .3em; 
border-style: solid; 
border-color: black; 
border-width: 0 0 .12em 0; 
border-radius: 50%; 
left: .8em; top: -.15em; 
position: absolute; 
}
</style>
<p><span class=spanWhale></span> Whale. [&#128011; (&amp;#128011;), símbolos varios y pictogramas 'ballena'.]</p>


<style type="text/css"> /* 10/Mar/2016 18:51 */
.spanStingray {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .6em; height: .6em; 
background-color: dimgrey; 
border-style: solid; 
border-width: .06em .06em 0 0; 
border-color: grey grey transparent transparent; 
border-radius: .2em 0 .2em .08em; 
box- shadow: inset 0 0 .15em .02em rgba(0, 0, 0, .7); 
background-clip: content-box; 
transform: rotate(45deg); 
}
.spanStingray::before {content: ""; 
position: absolute; 
width: .02em; height: .02em; 
left: .75em ; top: -.55em; 
background-color: dimgrey; 
border-style: solid; 
border-width: .1em .05em .6em; 
border-color: dimgrey transparent; 
border-radius: .1em .1em .1em .1em / .2em .2em .7em .7em; 
transform: rotate(45deg); 
background-clip: content-box; 
}
.spanStingray::after {content: ""; 
position: absolute; 
width: .06em; height: .06em; 
left: .1em; top: .35em; 
background-color: black; 
box-shadow: .1em .1em 0 0 black; 
border-radius: 100%; 
}
</style>
<p><span class=spanStingray></span> Stingray. ['mantarraya'.]</p>


<style type="text/css"> /* 6/Jul/2015 14:01 */
.spanJellyfish {position: relative; 
display: inline-block; 
margin: 0 .9em .3em; 
width: .8em; height: .32em; 
background-color: rgba(0, 0, 0, .7); 
border-radius: 100% 100% 40% 40% / 150% 150% 40% 40%; 
}
.spanJellyfish::before , .spanJellyfish::after {content: ""; 
position: absolute; 
width: .54em; height: .23em; 
left: .13em; top: .28em; 
background-image: 
radial-gradient(ellipse at right, transparent 35%, black 40%, black 60%, transparent 65%); 
background-size: .08em 100%; 
background-repeat: repeat-x; 
background-position: 0 0, .07em .22em; 
}
.spanJellyfish::after {left: .2em; top: .465em; 
background-image: 
radial-gradient(ellipse at left, transparent 35%, black 40%, black 60%, transparent 65%); 
}
</style>
<p><span class=spanJellyfish></span> Jellyfish. ['medusa' o 'aguaviva'.]</p>


<style type="text/css"> /* 20/Jul/2015 18:23 */
.spanGoldfish {position: relative; 
display: inline-block; 
margin: 0 1.1em .4em; 
width: .4em; height: .3em; 
background-color: orange; 
border-radius: 60% 0 60% 0 / 60% 0 80% 0; 
box-shadow: .41em .21em 0 .02em rgba(255, 100, 0, .5); 
transform: rotate(355deg); 
}
.spanGoldfish::before {content: ""; 
position: absolute; 
width: .35em; height: .25em; 
left: 0; top: .51em; 
background-color: orange; 
box-shadow: .4em -.1em 0 .03em rgba(255, 100, 0, .5); 
border-radius: 0 100%; 
transform: rotate(10deg); 
}
.spanGoldfish::after {content: ""; 
position: absolute; 
width: .6em; height: .6em; 
left: -.25em; top: .12em; 
background-color: darkorange; 
border-radius: 10% 70%; 
background-image: 
radial-gradient(black .04em, silver .06em, transparent .07em); 
background-size: .1em .1em; 
background-repeat: no-repeat; 
background-position: .2em .1em; 
box-shadow: inset -.05em -.05em .02em -.02em darkorange, 
inset .05em -.05em .04em -.02em gold, .4em .4em 0 -.1em rgba(255, 140, 0, .7); 
transform: rotate(320deg); 
}
</style>
<p><span class=spanGoldfish></span> Goldfish. [&#128033; (&amp;#128033;), símbolos varios y pictogramas 'pez globo'; 'pez dorado' o 'carassius'.]</p>


<style type="text/css">
.spanFishbowl{position: relative; 
display: inline-block; 
margin: 0 .85em .02em; 
width: .9em; height: .7em; 
border-radius: 100% 100% 80% 80%; 
background-color: none; 
border-color: transparent silver silver; 
border-width: .18em .06em .12em; 
border-style: solid; 
background-image: linear-gradient(to bottom, transparent .21em, gainsboro .21em, gainsboro 100%); 
-webkit-background-clip: padding; 
background-clip: padding-box; 
}
.spanFishbowl:before {content: ""; 
width: .16em; height: .14em; 
background-color: grey; 
border-style: solid; 
border-color: grey; 
border-width: 0 .12em; 
border-radius: 50%; 
left: .2em; top: .38em; 
position: absolute; 
}
.spanFishbowl:after {content: ""; 
width: .0em; height: .0em; 
border-style: solid; 
border-color: transparent grey transparent transparent; 
border-width: .12em; 
border-radius: 50%; 
left: .45em; top: .34em; 
position: absolute; 
}
</style>
<p><span class=spanFishbowl></span> Fish in Bowl. [&#128031; (&amp;#128031;), símbolos varios y pictogramas 'pescado'.]</p>


<style type="text/css"> /* 18/May/2014 14:04 */
.spanCage {position: relative; 
display: inline-block; 
margin: 0 1em -.1em; 
padding: .05em; 
width: .4em; height: .6em; 
border-color: transparent; 
border-style: solid; 
border-width: .1em .1em .2em; 
border-radius: .5em .5em 0 0; 
box-shadow: inset 0 0 0 .025em black, .06em -.03em .01em 0 black; 
background-image: radial-gradient(ellipse at center bottom, transparent, transparent .21em, black .215em, black .23em, transparent .235em, transparent 100%), 
radial-gradient(ellipse at center bottom, transparent, transparent .21em, black .215em, black .23em, transparent .235em, transparent 100%), 
linear-gradient(180deg, black, black .03em, transparent .03em, transparent .17em, transparent .32em, black .32em, black .34em, transparent .35em, transparent .47em, black .47em, black 100%), 
repeating-linear-gradient(90deg, transparent, transparent .08em, black .08em, black .1em); 
background-size: .45em .2em, .45em .2em, 100% .55em, 100% .55em; 
background-position: -.07em 0, .13em 0, 0 .19em, 0 .19em; 
background-repeat: no-repeat; 
background-clip: padding-box; 
}
.spanCage:before {content: ""; 
position: absolute; 
width: .15em; height: .2em; 
left: .19em; top: .3em; 
background-color: black; 
border-color: black; 
border-style: solid; 
border-width: .05em 0 .03em 0; 
border-radius: 200% 20% 130% 0; 
}
.spanCage:after {content: ""; 
position: absolute; 
width: .04em; height: .04em; 
left: .28em; top: .32em; 
background-color: silver; 
border-radius: 100%; 
box-shadow: -.05em -.39em 0 .02em black
}
</style>
<p><span class=spanCage></span> Bird in Cage. ['jaula con pájaro'.]</p>


<style type="text/css"> /* 18/May/2015 19:56 */
.spanBird1 {position: relative; 
display: inline-block; 
margin: 0 .75em; 
width: 1.1em; height: .7em; 
background-image: 
repeating-radial-gradient(ellipse, black, black 40%, white 47%, white 70%, transparent 74%, transparent 100%), 
linear-gradient(320deg, darkgrey,darkgrey 50%, transparent 50%, transparent), 
radial-gradient(circle at bottom, grey, grey .27em, transparent .29em, transparent 100%), 
radial-gradient(ellipse at top, grey, grey .5em, transparent .51em, transparent 100%); 
background-size: .15em .15em, .11em .1em, 50% 51%, 1em 63%; 
background-repeat: no-repeat; 
background-position: .22em .11em, 0 .2em, .1em -.07em, left .1em bottom 0; 
transform: rotate(10deg); 
}
.spanBird1::before {content: ""; 
position: absolute; 
width: .46em; height: .45em; 
left: .45em; top: .12em; 
background-color: silver; 
border-radius: 100% 0 160% 100%; 
transform: scaley(.8) rotate(8deg); 
}
.spanBird1::after {content: ""; 
position: absolute; 
width: .05em; height: .12em; 
left: .63em; bottom: -.105em; 
border-style: solid; 
border-width: 0 .04em; 
border-color: grey; 
transform: rotate(350deg); 
}
</style>
<p><span class=spanBird1></span> Bird 1. [&#128038; (&amp;#128038;), símbolos varios y pictogramas 'ave'.]</p>


<style type="text/css"> /* 12/Jul/2015 20:27 */
.spanBird2 {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .4em; height: .5em; 
background-color: dimgrey; 
border-style: solid; 
border-width: .03em .06em .17em 0; 
border-color: dimgrey dimgrey transparent; 
border-radius: .45em / .45em .55em .2em .8em; 
background-clip: content-box; 
}
.spanBird2::before {content: ""; 
position: absolute; 
width: .38em; height: .235em; 
left: 0; top: -.16em; 
background-color: dimgrey; 
border-style: solid; 
border-width: 0 0 .07em .085em; 
border-color: transparent transparent dimgrey transparent; 
border-radius: .5em .34em .2em 0 / .3em .32em .2em 0; 
transform: rotate(30deg); 
background-image: radial-gradient(white .015em, transparent .025em); 
background-size: .1em .1em; 
background-position: .05em .09em; 
background-repeat: no-repeat; 
background-clip: content-box; 
}
.spanBird2::after {content: ""; 
position: absolute; 
width: .07em; height: .11em; 
left: .15em; top: 99%; 
border-style: solid; 
border-width: 0 .038em; 
border-color: dimgrey; 
}
</style>
<p><span class=spanBird2></span> Bird 2. </p>


<style type="text/css"> /* 5/Feb/2015 16:08 */
.spanDove {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: .8em; height: .5em; 
border-style: solid; 
border-width: .1em .06em .1em .1em; 
border-color: transparent; 
border-radius: 0 15% 42% 0 / 0 20% 56% 0; 
background: 
radial-gradient(ellipse, white, white 70%, transparent 70%, transparent 100%), 
radial-gradient(ellipse at bottom, grey, grey 70%, white 70%, white 100%), 
radial-gradient(ellipse at left top, white, white 50%, transparent 50%, transparent 100%), 
radial-gradient(circle, silver, silver .1em, rgba(192,192,192,0) .13em, rgba(192,192,192,0) 100%), 
radial-gradient(circle at right top, transparent, transparent 55%, dimgrey 65%, dimgrey 65.5%, transparent 66%, transparent 70%, dimgrey 75%, dimgrey 100%), 
linear-gradient(30deg, silver, silver 60%, grey 65%, grey 100%); 
background-size: .055em .1em, .22em .15em, 1.05em .82em, .22em .22em, 100% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-position: right top .1em, right top, 0 0, right .08em top .25em, 0 0, 0 0; 
background-clip: border-box, border-box, content-box, content-box, content-box, content-box; 
background-origin: border-box; 
}
.spanDove::before {content: ""; 
position: absolute; 
width: .15em; height: .1em; 
left: .53em; top: .48em; 
background-image: 
radial-gradient(ellipse at bottom, transparent, transparent 40%, dimgrey 40%, dimgrey 70%, transparent 70%, red 100%), 
linear-gradient(70deg, transparent, transparent 30%, dimgrey 35%, dimgrey 45%, transparent 50%, transparent 100%); 
background-size: 100% 30%, 100% 100%; 
background-repeat: no-repeat; 
background-position: left bottom; 
}
</style>
<p><span class=spanDove></span> Dove. [&#128330; (&amp;#128330;), símbolos varios y pictogramas 'paloma de la paz'.]</p>


<style type="text/css"> /* 12/Jul/2014 9:40 */
.spanTurtle {position: relative; 
display: inline-block; 
margin: 0 1.25em .55em; 
width: .2em; height: .2em; 
background-color: dimgrey; 
border-radius: 50%; 
-webkit-transform: scalex(.9); 
transform: scalex(.9); 
}
.spanTurtle::before {content: ""; 
position: absolute; 
width: .2em; height: .13em; 
left: -.28em; top: .15em; 
background-color: dimgrey; 
border-radius: 50%; 
box-shadow: .55em 0 0 0 dimgrey, .52em .45em 0 0 dimgrey, .05em .45em 0 0 dimgrey; 
}
.spanTurtle::after {content: ""; 
position: absolute; 
left: -.2em; top: .15em; 
width: .6em; height: .6em; 
background-color: black; 
border-radius: 100%; 
background-image: 
radial-gradient(circle, black 0, black .23em, transparent .24em, transparent 100%), 
radial-gradient(circle, black 0, black .23em, transparent .24em, transparent 100%), 
radial-gradient(circle, black 0, black .23em, transparent .24em, transparent 100%), 
radial-gradient(circle, black 0, black .23em, transparent .24em, transparent 100%), 
radial-gradient(circle, black 0, black .23em, grey .24em, grey 100%), 
radial-gradient(circle, black 0, black .23em, grey .24em, grey 100%),
linear-gradient(300deg, grey, grey .26em, transparent .28em, transparent 100%), 
linear-gradient(240deg, grey, grey .26em, transparent .28em, transparent 100%), 
linear-gradient(55deg, grey, grey .26em, transparent .28em, transparent 100%), 
linear-gradient(120deg, grey, grey .26em, transparent .28em, transparent 100%); 
background-size: .55em .55em, .55em .55em .55em .55em, .55em .55em .55em .55em, .55em .55em, 100% 100%, 100% 100%, 100% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-position: -.38em -.18em, .4em -.18em, -.38em .24em, .4em .24em, center -.38em, center .4em, 0 0, 0 0, 0 0, 0 0; 
}
</style>
<p><span class=spanTurtle></span> Turtle. [&#128034; (&amp;#128034;), símbolos varios y pictogramas 'tortuga'.]</p>


<style type="text/css"> /* 10/Mar/2015 16:34 */
.spanFrog {position: relative; 
display: inline-block; 
margin: 0 1em -.08em; 
width: .62em; height: .16em; 
background-color: transparent; 
border-radius: 100% 40% 60% 40%; 
box-shadow: inset .32em 0 0 .05em green; 
}
.spanFrog::before {content: ""; 
position: absolute; 
width: .7em; height: .7em; 
left: -.18em; top: -.61em; 
background-color: yellowgreen; 
border-radius: 70% 10% 50% 25%; 
box-shadow: inset .23em .1em 0 .17em green; 
}
.spanFrog::after {content: ""; 
position: absolute; 
width: .32em; height: .25em; 
left: .05em; top: -.75em; 
background-image: 
radial-gradient(circle, black, black .03em, white .04em, white .075em, black .09em, transparent .1em, transparent 100%), 
radial-gradient(circle, black, black .03em, white .04em, white .075em, black .09em, transparent .1em, transparent 100%); 
background-size: .2em .2em; 
background-repeat: no-repeat; 
background-position: left bottom, right top; 
}
</style>
<p><span class=spanFrog></span> Frog. [&#128056; (&amp;#128056;), símbolos varios y pictogramas 'cara de rana'.]</p>


<style type="text/css"> /* 23/Ene/2015 12:31 */
.spanSnail {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: 1.2em; height: .16em; 
background-color: maroon; 
border-radius: 100% .1em .3em 100% / .1em .1em .1em .1em; 
}
.spanSnail::before {content: ""; 
position: absolute; 
width: .12em; height: .18em; 
right: .03em; top: -.18em; 
border: solid .04em transparent; 
border-radius: 0 0 100% 100%; 
box-shadow: inset 0 -.03em 0 .03em maroon; 
background-image: 
radial-gradient(sienna, sienna 50%, transparent 60%, transparent 100%), 
radial-gradient(sienna, sienna 50%, transparent 60%, transparent 100%); 
background-size: .08em .08em; 
background-repeat: no-repeat; 
background-position: 0 0, right top; 
background-origin: border-box; 
}
.spanSnail::after {content: ""; 
position: absolute; 
width: .6em; height: .45em; 
left: .13em; top: -.5em; 
background-color: peru; 
border-style: solid; 
border-width: 0 .1em .1em; 
border-color: peru transparent peru peru; 
border-radius: 100% 100% .1em 100% / 100% 100% .5em 100%; 
background-image: 
radial-gradient(ellipse at left, transparent, transparent .2em, chocolate .21em, saddlebrown .24em, transparent .26em, transparent 100%), 
radial-gradient(ellipse at right, transparent, transparent .15em, saddlebrown .16em, chocolate .19em, transparent .21em, transparent 100%), 
radial-gradient(ellipse at left, peru, peru .1em, chocolate .11em, saddlebrown .14em, transparent .16em, transparent 100%); 
background-size: .35em .7em, .25em .44em, .15em .2em; 
background-repeat: no-repeat; 
background-position: .25em 0, 0 .05em, .22em .25em; 
background-clip: content-box; 
}
</style>
<p><span class=spanSnail></span> Snail. [&#128012; (&amp;#128012;), símbolos varios y pictogramas 'caracol de tierra'.]</p>


<style type="text/css"> /* 20/Oct/2014 14:12 */
.spanBat {position: relative; 
display: inline-block; 
margin: 0 .75em; 
width: 1.2em; height: .7em; 
background-color: black; 
background-image: 
radial-gradient(ellipse at top, white, white .25em, transparent .25em, transparent 100%), 
radial-gradient(ellipse at top, transparent, transparent .1em, white .1em, white 100%), 
radial-gradient(ellipse at top, white, white .5em, transparent .5em, transparent 100%), 
radial-gradient(ellipse at right bottom, white, white .24em, black .24em, black 100%), 
radial-gradient(ellipse at right bottom, white, white .5em, black .51em, black 100%), 
radial-gradient(ellipse at left bottom, white, white .24em, black .24em, black 100%), 
radial-gradient(ellipse at left bottom, white, white .5em, black .51em, black 100%); 
background-repeat: no-repeat; 
background-size: .5em .4em, .25em .15em, 1em .12em, .24em .4em, .48em .35em, .24em .4em, .48em .35em;  
background-position: center top, center bottom, center top, right top, right bottom, left top, left bottom; 
}
.spanBat::before {content: ""; 
display: block; 
margin: .29em auto; 
width: .05em; height: .3em; 
background-color: black; 
border-style: solid; 
border-width: .05em .04em .08em; 
border-color: white black; 
}
</style>
<p><span class=spanBat></span> Bat. ['murciélago'.]</p>


<style type="text/css"> /* 1/May/2015 11:43 */
.spanCat {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
vertical-align: middle; 
line-height: 0; 
text-align:  center; 
width: .4em; height: .4em; 
background-color: black; 
border-radius: .4em .4em .3em .3em / .5em .5em .3em .3em; 
}
.spanCat::before {content: ""; 
position: relative; 
display: inline-block; 
top: -.2em; 
width: .052em; height: .1em; 
border-style: solid; 
border-width: .07em .09em .1em; 
border-color: white transparent transparent; 
border-radius: 0 0 .1em .1em; 
background: 
radial-gradient(ellipse, yellow, yellow 60%, black 70%, black 100%), 
radial-gradient(ellipse, yellow, yellow 60%, black 70%, black 100%), black; 
background-size: .025em .06em, .025em .06em; 
background-repeat: no-repeat; 
background-position: .061em .1em, right .061em top .1em; 
background-origin: border-box; 
}
.spanCat::after {content: ""; 
position: absolute; 
width: .16em; height: .34em; 
left: .26em; bottom: .025em; 
border-style: solid; 
border-width: .05em; 
border-color: transparent black black transparent; 
border-radius: 0 .2em .2em 0 / 0 .4em .2em 0; 
}
</style>
<p><span class=spanCat></span> Cat. [&#128008; (&amp;#128008;), símbolos varios y pictogramas 'gato'.]</p>


<style type="text/css"> /* 27/Mar/2014 19:14 */
.spanCatEyes {position: relative; 
display: inline-block; 
margin: 0 1em 0 .8em; 
width: 1.2em; height: .8em; 
border-radius: 0 0 .55em .55em; 
background-image: radial-gradient(circle farthest-side at top, transparent 0, transparent 1.15em, black 1.15em, black 100%); 
background-size: 100% 250%; 
background-repeat: no-repeat; 
background-position: 0 -1em; 
}
.spanCatEyes:before, .spanCatEyes:after{content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: .1em; top: .2em; 
background-color: orange; 
border-radius: .01em 150%; 
background-image: radial-gradient(circle at bottom right, transparent 0, transparent .13em, black .13em, black .18em, orange .18em, orange 100%), 
radial-gradient(circle at top left, orange 0, orange .11em, black .11em, black .2em, orange .2em, orange 100%); 
background-size: 80% 80%; 
background-repeat: no-repeat; 
background-position: -.04em -.03em, .12em .11em; 
transform: rotate(350deg); 
}
.spanCatEyes:after {left: .7em; top: .2em; 
border-radius: 150% .01em; 
background-image: radial-gradient(circle at top right, transparent 0, transparent .13em, black .13em, black .18em, orange .18em, orange 100%), 
radial-gradient(circle at bottom left, orange 0, orange .11em, black .11em, black .2em, orange .2em, orange 100%); 
background-position: -.03em .12em, .11em -.02em; 
transform: rotate(10deg); 
}
</style>
<p><span class=spanCatEyes></span>Cat Eyes. [&#128049; (&amp;#128049;), símbolos varios y pictogramas 'cara de gato', 'ojos de gato'.]</p>


<style type="text/css"> /* 1/May/2014 17:03 */
.spanCrab {position: relative; 
display: inline-block; 
margin: 0 1em -.03em; 
width: .7em; height: .64em; 
border-color: rgba(255,255,255,.1); 
border-style: solid; 
border-width: .138em .138em .13em; 
border-radius: .42em .42em .62em .62em; 
background-image: linear-gradient(orangered,orangered), 
radial-gradient(transparent, transparent .28em, orangered .3em, orangered .33em, transparent .36em, transparent 100%), 
radial-gradient(transparent, transparent .28em, orangered .3em, orangered .33em, transparent .36em, transparent 100%), 
radial-gradient(transparent, transparent .28em, orangered .3em, orangered .33em, transparent .36em, transparent 100%), 
radial-gradient(circle at top, transparent, transparent .17em, orangered .19em, orangered .22em, transparent .23em, transparent 100%); 
background-size: 100% 100%, 180% 180%, 180% 180%, 180% 180%, 150% 100%; 
background-position: 0 0, -.08em .02em, -.3em .02em, -.19em .05em, -.1em -.13em; 
background-repeat: no-repeat; 
background-clip: padding-box, border-box, border-box, border-box, border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.spanCrab:before , .spanCrab:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.08em; top: -.26em; 
border-color: transparent orangered orangered; 
border-style: solid; 
border-width: .11em; 
border-radius: 50%; 
}
.spanCrab:after {left: .32em; top: -.26em; 
box-shadow: -.135em .12em 0 -.06em black, 
-.245em .12em 0 -.06em black; 
}
</style>
<p><span class=spanCrab></span> Crab. ['cangrejo'.]</p>


<style type="text/css"> /* 27/Oct/2014 13:28 */
.spanCaterpillar {position: relative; 
display: inline-block; 
margin: 0 .75em .13em 1.7em; 
width: .18em; height: .18em; 
background-color: black; 
border-radius: 100% 100% 0 100%; 
box-shadow: -.1em .1em 0 0 black, -.2em .2em 0 0 black, 
-.32em .28em 0 0 black, -.44em .36em 0 0 black, -.52em .48em 0 0 black, 
-.6em .6em 0 0 black, -.7em .7em 0 0 black; 
transform: rotate(45deg); 
}
.spanCaterpillar::before {content: ""; 
position: absolute; 
width: .1em; height: .08em; 
right: -.05em; top: -.11em; 
background-color: grey; 
border-style: solid; 
border-width: .01em .06em .07em .04em; 
border-color: black; 
border-radius: 100%; 
}
.spanCaterpillar::after {content: ""; 
position: absolute; 
width: .11em; height: .1em; 
left: -.73em; top: .83em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanCaterpillar></span> Caterpillar. ['oruga'.]</p>


<style type="text/css">/*14/Mar/2014 13:21*/
.spanButterfly1 {position: relative; 
display: inline-block; 
margin: 0 .6em 0 .9em; 
width: 1.2em; height: .8em; 
background-color: transparent; 
border-radius: .2em .2em .8em .8em; 
background-image: radial-gradient(ellipse at left, transparent 0, transparent .1em, coral .2em, skyblue .6em, transparent .6em ), 
radial-gradient(ellipse at right, transparent 0, transparent .1em, coral .2em, skyblue .6em, transparent .6em ); 
background-size: .6em .7em; 
background-position: 0 0, .6em 0; 
background-repeat: no-repeat; 
-webkit-transform: rotate(320deg); 
transform: rotate(320deg); 
}
.spanButterfly1:before {content: ""; 
position: absolute; 
width: .07em; height: .6em; 
left: .55em; top: .1em; 
background-color: maroon; 
border-radius: .1em .1em .1em .1em / .1em .1em 2em 2em; 
}
.spanButterfly1:after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .495em; top: -.1em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .025em; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanButterfly1></span> Butterfly1. ['mariposa'.]</p>

<style type="text/css">/*16/Mar/2014 23:23*/
.spanButterfly2 {position: relative; 
display: inline-block; 
margin: 0 .7em 0 .8em; 
width: 1.2em; height: .65em; 
background-color: transparent; 
border-radius: .4em .4em 1.5em 1.5em / .5em .5em 1.5em 1.5em; 
background-image: radial-gradient(ellipse at top, transparent 0, transparent .22em, fuchsia .3em, red .7em, transparent .7em ), 
radial-gradient(circle at bottom, transparent 0, transparent .07em, orange .2em, red .35em, transparent .45em ); 
background-size: 1.4em .4em, .8em .5em; 
background-position: -.1em -.03em, .2em .15em; 
background-repeat: no-repeat; 
}
.spanButterfly2:before {content: ""; 
position: absolute; 
width: .07em; height: .6em; 
left: .57em; top: .08em; 
background-color: maroon; 
border-radius: .1em .1em .1em .1em / .1em .1em 2em 2em; 
}
.spanButterfly2:after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .505em; top: -.13em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .025em; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanButterfly2></span> Butterfly2. ['mariposa'.]</p>


<style type="text/css"> /* 8/May/2014 14:16 */
.spanBee {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .6em; height: .4em; 
border: solid .1em transparent; 
border-radius: .6em / .45em; 
background-image: radial-gradient(circle, black 0, black .045em, transparent .055em, transparent 100%), 
radial-gradient(circle at right, orange 0, orange .26em, black .28em, black .33em, orange .35em, orange .4em, black .42em, black .45em, orange .48em, orange .51em, black .53em, black .56em, orange .58em,orange 100%), 
linear-gradient(170deg, transparent 0, transparent 48%, black 51%, black 100%); 
background-repeat: no-repeat; 
background-position: .19em -.05em, 0 -.45em, -.15em .2em; 
background-size: 100% 100%, 100% 300%, .2em .04em; 
background-clip: content-box, content-box, border-box; 
}
.spanBee:before, .spanBee:after {content: ""; 
position: absolute; 
width: .2em; height: .3em; 
left: 0; top: -.3em; 
background-color: silver; 
border: solid .03em grey; 
border-radius: .2em .3em .08em .4em / .25em .65em .08em .4em; 
-webkit-transform: rotate(-5deg); 
transform: rotate(-5deg); 
}
.spanBee:before {left: .21em; 
border-radius: .3em .2em .4em .08em / .65em .25em .4em .08em; 
-webkit-transform: rotate(5deg); 
transform: rotate(5deg); 
z-index: -1; 
}
</style>
<p><span class=spanBee></span> Honeybee. [&#128029; (&amp;#128029;), símbolos varios y pictogramas 'abeja'.]</p>


<style type="text/css"> /* 16/Abr/2014 20:32 */
.spanLadybug {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .5em; height: .55em; 
border: solid transparent .08em; 
border-radius: 100%; 
box-shadow: inset 0 0 0 1em orangered; 
background-image: linear-gradient(0deg, transparent 0, transparent 44%, black 44%, black 50%, transparent 50%, transparent 100%), 
linear-gradient(45deg, transparent 0, transparent 45%, black 45%, black 50%, transparent 50%, transparent 100%), 
linear-gradient(315deg, transparent 0, transparent 45%, black 45%, black 50%, transparent 50%, transparent 100%); 
-webkit-transform: rotate(335deg); 
transform: rotate(335deg); 
}
.spanLadybug:before {content: ""; 
position: absolute; 
width: .16em; height: .07em; 
left: .175em; top: -.07em; 
background-color: black; 
border-radius: 200% 200% 1% 1%; 
}
.spanLadybug:after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .1em; top: .1em; 
background-color: yellow; 
border-radius: 50%; 
box-shadow: .2em 0 0 0 yellow, -.04em .13em 0 0 chartreuse, 
.2em .25em 0 0 yellow, .25em .13em 0 0 chartreuse, .0em .25em 0 0 yellow; 
}
</style>
<p><span class=spanLadybug></span> Ladybug. Lady Beetle. [&#128030; (&amp;#128030;), símbolos varios y pictogramas 'vaquita de sanantonio'.]</p>


<style type="text/css"> /* 14/Jul/2014 16:49 */
.spanBeetle {position: relative; 
display: inline-block; 
margin: 0 1.2em -.1em .95em; 
width: .5em; height: .6em; 
border: solid .15em transparent; 
border-radius: 100%; 
box-shadow: inset .003em 0 0 .03em black; 
background-image: linear-gradient(to left, white, white .24em, black .24em, black .275em, white .275em, white 100%), 
linear-gradient(black, black), 
radial-gradient(ellipse at top, transparent 0, transparent .31em, black .31em, black .37em, transparent .37em, transparent 100%), 
radial-gradient(ellipse at bottom, transparent 0, transparent .31em, black .31em, black .37em, transparent .37em, transparent 100%); 
background-size: 100% 100%, 1em .05em, .8em .2em, .8em .2em; 
background-repeat: no-repeat; 
background-position: 0 0, -.2em .25em, -.15em .04em, -.15em .33em; 
background-clip: content-box, border-box, border-box, border-box; 
}
.spanBeetle::before {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .15em; top: -.09em; 
background-color: white; 
border: solid .04em black; 
border-radius: 1.5em; 
}
.spanBeetle::after {content: ""; 
position: absolute; 
width: .25em; height: .15em; 
left: .1em; top: -.02em; 
background-color: white; 
border: solid .04em black; 
border-radius: 1.5em; 
}
</style>
<p><span class=spanBeetle></span>Beetle. ['escarabajo'.]</p>


<style type="text/css"> /* 13/Abr/2016 12:07 */
.spanCochineal {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.2em; 
width: .35em; height: .55em; 
border-radius: .3em / .5em; 
background: 
repeating-radial-gradient(circle at top, dimgrey 0, dimgrey .08em, darkgrey .09em, darkgrey .1em, dimgrey .13em); 
background-size: 100% 200%; 
background-position: center -.14em; 
transform: rotate(35deg); 
}
.spanCochineal::before, .spanCochineal::after {content: ""; 
position: absolute; 
width: .16em; height: .1em; 
left: 0; top: -.06em; 
border-style: solid; 
border-width: .035em 0 0 0; 
border-color: dimgrey; 
border-radius: .06em; 
transform: rotate(15deg); 
}
.spanCochineal::after {left: .18em; 
transform: rotate(345deg); 
}
</style>
<p><span class=spanCochineal></span> Cochineal. ['cochinilla (insecto)'.]</p>


<style type="text/css"> /* 9/Ago/2014 13:15 */
.spanAnt {position: relative; 
display: inline-block; 
margin: 0 .85em -.1em; 
width: .32em; height: .2em; 
border: solid .37em transparent; 
border-radius: 100%; 
background-image: linear-gradient(black, black), 
radial-gradient(ellipse at left bottom, transparent 0, transparent .45em, black .46em, black .49em, transparent .5em, transparent 100%), 
radial-gradient(circle at left bottom, transparent 0, transparent .15em, black .16em, black .19em, transparent .2em, transparent 100%), 
linear-gradient(295deg, transparent 0, transparent .09em, black .1em, black .12em, transparent .13em, transparent 100%), 
linear-gradient(45deg, transparent 0, transparent .09em, black .1em, black .12em, transparent .13em, transparent 100%); 
background-size: 100% 100%, .68em .5em, .3em .3em, .16em .17em, .16em .16em; 
background-repeat: no-repeat; 
background-position: 0 0, -.3em -.18em, .08em .03em, .015em .15em, -.23em -.13em; 
background-clip: content-box, border-box, border-box, border-box, border-box;
}
.spanAnt::before {content: ""; 
position: absolute; 
width: .34em; height: .23em; 
left: .3em; 
background-color: black; 
border-radius: 100% 100% 0 100%; 
}
.spanAnt::after {content: ""; 
position: absolute; 
width: .19em; height: .17em; 
left: -.17em; top: -.06em; 
background-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanAnt></span> Ant. [&#128028; (&amp;#128028;), símbolos varios y pictogramas 'hormiga'.]</p>


<style type="text/css"> /* 8/Sep/2014 19:41 */
.spanDragonfly {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: .75em; height: .08em; 
backgro und-color: black; 
border-style: solid; 
border-width: .1em .15em .15em 0; 
border-color: transparent; 
border-radius: .2em 0 0 .4em; 
background-image: radial-gradient(ellipse, black 0, black .16em, transparent .17em, transparent 100%), 
linear-gradient(black, black), linear-gradient(black, black), 
linear-gradient(45deg, transparent, transparent .1em, black .1em, black .13em, transparent .13em, transparent 100%), 
linear-gradient(-45deg, transparent, transparent .1em, black .1em, black .13em, transparent .13em, transparent 100%); 
background-size: .35em .2em, 100% 100%, .03em .15em, .15em .12em, .15em .12em; 
background-repeat: no-repeat; 
background-position: right -.1em top -.08em, 0 0, .7em .1em, .71em .1em, .57em .1em; 
background-clip: border-box, content-box, border-box, border-box, border-box; 
}
.spanDragonfly::before {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
top: -.12em; left: .8em; 
background-color: dimgrey; 
border-radius: 100%; 
box-shadow: inset .04em -.02em 0 .012em black; 
}
.spanDragonfly::after {content: ""; 
position: absolute; 
width: .26em; height: .55em; 
left: .57em; top: -.6em; 
border-radius: 0 0 .13em .13em / 0 0 .3em .3em; 
background-image: radial-gradient(ellipse, rgba(0,0,0,.3), rgba(0,0,0,.3) .1em, transparent .1em, transparent 100%), radial-gradient(ellipse, rgba(0,0,0,.3), rgba(0,0,0,.3) .1em, transparent .1em, transparent 100%); 
background-size: .19em 100%; 
background-repeat: no-repeat; 
background-position: 0 0, .08em 0; 
}
</style>
<p><span class=spanDragonfly></span> Dragonfly. ['libélula'.]</p>


<style type="text/css"> /* 30/Dic/2015 10:46 */
.spanSpider {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em .9em; 
width: 1em; height: .8em; 
border-radius: 0 0 50% 50%; 
background: 
radial-gradient(circle, transparent .51em, black .52em, black .55em, transparent .56em) -.33em .22em, 
radial-gradient(circle, transparent .51em, black .52em, black .55em, transparent .56em) -.15em .22em, 
linear-gradient(90deg, transparent 48%, dimgrey 48%, dimgrey 52%, transparent 52%) center top, 
radial-gradient(circle, transparent .51em, black .52em, black .55em, transparent .56em) -.02em .17em, 
radial-gradient(circle, transparent .51em, black .52em, black .55em, transparent .56em) -.47em .17em; 
background-size: 150% 150%, 150% 150%, 100% 40%; 
background-repeat: no-repeat; 
}
.spanSpider::before {content: ""; 
position: absolute; 
width: .25em; height: .3em; 
left: .37em; top: .16em; 
background-color: black; 
border-radius: 100% 100% 100% 100% / 100% 100% 150% 150%; 
}
.spanSpider::after {content: ""; 
position: absolute; 
width: .08em; height: .08em; 
left: .42em; top: .42em; 
background-color: transparent; 
border-style: solid; 
border-width: .04em .04em 0; 
border-color: black; 
border-radius: 100%; 
}
</style>
<p><span class=spanSpider></span> Spider. [&#128375; (&amp;#128375;), símbolos varios y pictogramas 'araña'.]</p>


<style type="text/css"> /* 28/Jul/2017 21:20 */
.spanParamecium {position: relative; 
display: inline-block; 
margin: 0 .4em 0 .9em; 
width: 1.2em; height: .5em; 
background-color: gainsboro; 
border: dotted 2px black; 
border-radius: 100% 60% 100% 120% / 100% 90% 150% 100%; 
box-shadow: inset 0 0 0 1px black; 
background-image: 
radial-gradient(ellipse at center top, black 60%, transparent 70%), 
radial-gradient(ellipse, grey 70%, transparent 70%), 
radial-gradient(circle, dimgrey 65%, transparent 75%), 
linear-gradient(120deg, transparent 42%, dimgrey 48%, dimgrey 52%, transparent 58%), 
linear-gradient(-120deg, transparent 42%, dimgrey 48%, dimgrey 52%, transparent 58%), 
linear-gradient(0deg, transparent 42%, dimgrey 48%, dimgrey 52%, transparent 58%); 
background-size: 40% 20%, 25% 30%, 10% 25%, 20% 60%, 20% 60%, 30% 60%; 
background-position: 70% 0, 80% 60%, 25% 50%, 22% 45%, 22% 45%, 18% 45%; 
background-clip: content-box; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanParamecium></span> Paramecium. ['paramecio'.]</p>




<hr>


<style type="text/css"> /* 26/Abr/2014 17:20 */
.spanClockOne {position: relative; 
display: inline-block; 
margin: auto 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockOne:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockOne:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46%; top: 50%; 
background-color: black; 
-webkit-transform: rotate(210deg); 
transform: rotate(210deg); /*transform: rotate(220deg); for 30 min.*/
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockOne></span> Clock Face One Oclock. [&#128336; (&amp;#128336;), símbolos varios y pictogramas 'reloj con una en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:27 */
.spanClockTwo {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockTwo:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockTwo:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 45%; top: 49%; 
background-color: black; 
-webkit-transform: rotate(240deg); /*transform: rotate(250deg); for 30 min.*/
transform: rotate(240deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockTwo></span> Clock Face Two Oclock. [&#128337; (&amp;#128337;), símbolos varios y pictogramas 'reloj con dos en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:29 */
.spanClockThree {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockThree:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockThree:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46.5%; top: 49%; 
background-color: black; 
-webkit-transform: rotate(270deg); /*transform: rotate(280deg); for 30 min.*/
transform: rotate(270deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockThree></span> Clock Face Three Oclock. (History) [&#128338; (&amp;#128338;), símbolos varios y pictogramas 'reloj con tres en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:31 */
.spanClockFour {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockFour:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockFour:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46.5%; top: 49%; 
background-color: black; 
-webkit-transform: rotate(300deg); /*transform: rotate(310deg); for 30 min.*/
transform: rotate(300deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockFour></span> Clock Face Four Oclock. [&#128339; (&amp;#128339;), símbolos varios y pictogramas 'reloj con cuatro en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:32 */
.spanClockFive {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockFive:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockFive:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 47.5%; top: 50%; 
background-color: black; 
-webkit-transform: rotate(330deg); /*transform: rotate(340deg); for 30 min.*/
transform: rotate(330deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockFive></span> Clock Face Five Oclock. [&#128340; (&amp;#128340;), símbolos varios y pictogramas 'reloj con cinco en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:34 */
.spanClockSix {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockSix:before {content: ""; 
position: absolute; 
width: 5.5%; height: 75%; 
left: 46.65%; top: 10%; /*top: 17%; for 30 min.*/
background-color: black; 
}
</style>
<p><span class=spanClockSix></span> Clock Face Six Oclock. [&#128341; (&amp;#128341;), símbolos varios y pictogramas 'reloj con seis en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:37 */
.spanClockSeven {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockSeven:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockSeven:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46%; top: 50%; 
background-color: black; 
-webkit-transform: rotate(30deg); /*transform: rotate(45deg); for 30 min.*/
transform: rotate(30deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockSeven></span> Clock Face Seven Oclock. [&#128342; (&amp;#128342;), símbolos varios y pictogramas 'reloj con siete en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:38 */
.spanClockEight {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockEight:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockEight:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46.5%; top: 49%; 
background-color: black; 
-webkit-transform: rotate(60deg); /*transform: rotate(75deg); for 30 min.*/
transform: rotate(60deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockEight></span> Clock Face Eight Oclock. [&#128343; (&amp;#128343;), símbolos varios y pictogramas 'reloj con ocho en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:39 */
.spanClockNine {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockNine:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockNine:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46.5%; top: 49%; 
background-color: black; 
-webkit-transform: rotate(90deg); /*transform: rotate(110deg); for 30 min.*/
transform: rotate(90deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockNine></span> Clock Face Nine Oclock. [&#128344; (&amp;#128344;), símbolos varios y pictogramas 'reloj con nueve en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:41 */
.spanClockTen {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockTen:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockTen:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46.5%; top: 49%; 
background-color: black; 
-webkit-transform: rotate(120deg); /*transform: rotate(140deg); for 30 min.*/
transform: rotate(125deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockTen></span> Clock Face Ten Oclock. [&#128345; (&amp;#128345;), símbolos varios y pictogramas 'reloj con diez en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 17:43 */
.spanClockEleven {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockEleven:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
.spanClockEleven:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46.5%; top: 49%; 
background-color: black; 
-webkit-transform: rotate(150deg); /*transform: rotate(170deg); for 30 min.*/
transform: rotate(150deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
}
</style>
<p><span class=spanClockEleven></span> Clock Face Eleven Oclock. [&#128346; (&amp;#128346;), símbolos varios y pictogramas 'reloj con once en punto'.]</p>

<style type="text/css"> /* 26/Abr/2014 16:34 */
.spanClockTwelve {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .6em; height: .6em; 
background-color: white; 
border: solid .03em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .05em black; 
background-image: radial-gradient(black, black 9%, white 13%, white 55%, transparent 55%, transparent 100%), 
linear-gradient(transparent, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(30deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(60deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(120deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%), 
linear-gradient(150deg, transparent, transparent 46.5%, black 46.5%, black 53.5%, transparent 53.5%, transparent 100%); 
}
.spanClockTwelve:before {content: ""; 
position: absolute; 
width: 5.5%; height: 40%; 
left: 46.65%; top: 10%; /*top: 50%; for 30 min.*/
background-color: black; 
}
/*for 30 min.
.spanClockTwelve:after {content: ""; 
position: absolute; 
width: 5%; height: 35%; 
left: 46.5%; top: 49%; 
background-color: black; 
-webkit-transform: rotate(195deg); 
transform: rotate(195deg); 
-webkit-transform-origin: 47% 10%; 
transform-origin: 47% 10%; 
*/
</style>
<p><span class=spanClockTwelve></span> Clock Face Twelve Oclock. [&#128347; (&amp;#128347;), símbolos varios y pictogramas 'reloj con doce en punto'.]</p>



<h3>Con un <code>span</code> y caracteres.</h3>


<style type="text/css"> /* 14/Ene/2016 15:21 */
.spanContinuousUnderline {position: relative; 
display: inline-block; 
margin: 0 1em 0 .9em; 
top: -.15em; 
width: 1.6em; height: .75em; 
background-color: white; 
font: bold .75em/.5 sans-serif; 
}
.spanContinuousUnderline::before {content: "a…"; 
text-decoration: underline; 
}
</style>
<p><span class=spanContinuousUnderline></span> Continuous Underline. [&#9089; (&amp;#9089;), técnicos varios 'subrrayado continuo'.]</p>


<style type="text/css"> /* 14/Ene/2016 14:46 */
.spanDiscontinuousUnderline {position: relative; 
display: inline-block; 
margin: 0 .7em; 
top: -.1em; 
width: 1.2em; height: .7em; 
background-color: white; 
font: bold 1em/0 sans-serif; 
}
.spanDiscontinuousUnderline::before, .spanDiscontinuousUnderline::after {
content: "a"; 
font: bold .8em/.8 sans-serif; 
display: inline-block; 
margin: 0 .05em; 
height: .85em; 
border-bottom: solid .07em black; 
}
</style>
<p><span class=spanDiscontinuousUnderline></span> Discontinuous Underline. [&#9090; (&amp;#9090;), técnicos varios 'subrrayado discontinuo'.]</p>


<style type="text/css"> /* 14/Ene/2016 14:11 */
.spanEmphasis {position: relative; 
display: inline-block; 
margin: 0 .55em; 
font: oblique bold 1em/.5 sans-serif; 
padding-left: .37em; 
width: 1.1em; height: .7em; 
background-color: white; 
border-radius: .3em; 
background-image: 
linear-gradient(transparent 43%, black 45%, black 55%, transparent 57%), 
linear-gradient(330deg,transparent 46%, black 48%, black 52%, transparent 54%), 
linear-gradient(30deg,transparent 46%, black 48%, black 52%, transparent 54%); 
}
.spanEmphasis::before {content: "a"; 
display: inline-block; 
height: 100%; width: 65%; 
background-color: white; 
border-radius: 100% 50% 100% 50%; 
}
</style>
<p><span class=spanEmphasis></span> Emphasis. [&#9091; (&amp;#9091;), técnicos varios 'énfasis'.]</p>


<style type="text/css"> /* 16/Ene/2016 16:33 */
.spanInsertion {position: relative; 
display: inline-block; 
margin: 0 .7em; 
top: -.25em; 
width: 1.2em; height: .7em; 
background-color: white; 
font: bold 1em/0 sans-serif; 
text-align: center; 
background-image: 
radial-gradient(ellipse at left bottom, transparent 55%, black 60%, black 70%, transparent 75%), 
radial-gradient(ellipse at right bottom, transparent 55%, black 60%, black 70%, transparent 75%); 
background-size: 20% 50%; 
background-repeat: no-repeat; 
background-position: left 40% bottom 0, right 40% bottom 0; 
}
.spanInsertion::before {content: "a"; 
font: bold .6em/.6 sans-serif; 
display: inline-block; 
margin: -.1em .05em 0; 
height: .85em; 
}
</style>
<p><span class=spanInsertion></span> Insertion. [&#9088; (&amp;#9088;), técnicos varios 'inserción'.]</p>


<style type="text/css"> /* 16/Ago/2016 19:06 */
.spanBottleTag {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .4em; height: .35em; 
border-style: solid; 
border-width: .08em .08em .25em 0; 
border-color: dimgrey; 
border-radius: .05em .3em .05em .05em; 
background: radial-gradient(circle at right top, transparent 40%, dimgrey 45%); 
background-clip: content-box; 
}
.spanBottleTag::before {content: ""; 
position: absolute; 
width: .1em; height: .05em; 
left: 0; top: -.18em; 
background-color: black; 
border-style: solid; 
border-width: 0 .04em .04em; 
border-color: black transparent; 
background-clip: content-box; 
}
.spanBottleTag::after {content: "H2O"; 
position: absolute; 
font: 900 15%/2 sans-serif; 
color: black; 
text-align: center; 
width: 90%; height: 70%; 
left: 15%; top: 80%; 
background-color: gainsboro; 
border-radius: 10%; 
overflow: hidden; 
}
</style>
<p><span class=spanBottleTag></span> Bottle with Tag. ['bidón con etiqueta'.]</p>


<style type="text/css">
.spanMovil {margin: 0 1.8em 0 1.6em; 
border-style: solid; 
border-color: black; 
border-width: 0.2em 0.1em; 
text-align: center; 
line-height: 1.1em; 
font-size: .6em; 
border-radius: .2em; 
color: black; 
display: inline-block; 
width: .6em; height: .8em; 
overflow: hidden; 
/* background-color: white; */
}
</style>
<p><span class=spanMovil>…</span> Movil. [&#128241; (&amp;#128241;), símbolos varios y pictogramas 'teléfono móvil'.]</p>

<style type="text/css">

</style>
<p><span class=spanMovil>=</span> <span class=spanMovil>?</span> <span class=spanMovil>?</span> Movil.</p>


<style type="text/css"> /* 30/Nov/2014 12:42 */
.spanCompass {position: relative; 
display: inline-block; 
margin: 0 1em 0 .9em; 
width: .6em; height: .6em; 
background-color: lime; 
border: solid .07em white; 
border-radius: 100%; 
box-shadow: 0 0 0 .04em black; 
background-image: linear-gradient(60deg, white, white 40%, transparent 42%, transparent 58%, white 60%, white 100%), linear-gradient(35deg, white, white 40%, black 42%, black 58%, white 60%, white 100%); 
}
.spanCompass::before , .spanCompass::after {content: "NS"; 
position: absolute; 
width: 1em; height: 3em; 
left: 1.07em; top: -.9em; 
font: 900 .22em/2.2 serif; 
text-align: center; 
letter-spacing: 1em; 
word-break: break-all; 
}
.spanCompass::after {content: "W?"; 
left: .165em; top: -.2em; 
transform: rotate(270deg); 
}
</style>
<p><span class=spanCompass></span> Compass. ['brújula'.]</p>


<style type="text/css">
.spanWiFi1 {background-color: transparent; 
margin: 0 .6em 0 .7em; 
display: inline-block; 
text-align: center; 
width: 1em; height: .6em; 
border-radius: 50%; 
border-style: double; 
font: 900 90%/.6 sans-serif; 
border-color: transparent black; 
border-width: .1em .3em; 
padding: 0 .05em; 
}
</style>
<p><span class=spanWiFi1>¡</span> WiFi 1. [&#128246; (&amp;#128246;), símbolos varios y pictogramas 'antena con ondas'.]</p>


<style type="text/css"> /* 15/May/2016 15:42 */
.spanWiFi2 {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em 1em; 
width: .8em; height: .8em; 
background-color: black; 
border-radius: 100%; 
}
.spanWiFi2::before {content: "Wi"; 
position: absolute; 
font: 900 .3em/1.2 sans-serif; 
color: white; 
padding-left: .15em; 
width: 3em; height: 1.2em; 
left: -.48em; top: .46em; 
border: solid .3em black; 
border-radius: .7em; 
background-image: radial-gradient(ellipse at left top, black 60%, white 70%), 
radial-gradient(at right bottom, white 60%, black 70%), 
linear-gradient(to right, black 1.7em, white 1.7em); 
background-size: .42em .4em, .4em .4em, 100% 100%; 
background-repeat: no-repeat; 
background-position: left 1.25em bottom -.1em, 1.65em 0, 0 0; 
}
.spanWiFi2::after {content: "Fi"; 
position: absolute; 
font: 900 .3em/1.2 sans-serif; 
color: black; 
width: 1.5em; height: 1.2em; 
left: 1.7em; top: .76em; 
}
</style>
<p><span class=spanWiFi2></span> Wi-Fi 2. </p>


<style type="text/css">
.spanSpeechBalloonText {position: relative; 
display: inline-block; 
margin: 0 1.5em 0 2.2em; 
padding: 2px; 
border: 3px solid black; 
font: bold 12px sans-serif; 
border-radius: 12px; 
width: 50px; height: 25px; 
top: -24px; 
}
.spanSpeechBalloonText:before {content: ""; 
display: block; 
width: 0; height: 0; 
position: absolute; 
left: 10px; top: 29px; 
border-style: solid;
border-width: 16px 13px 0 0; 
border-color: black transparent; 
}
.spanSpeechBalloonText:after {content: ""; 
display: block; 
width: 0; height: 0; 
position: absolute; 
left: 13px; top: 29px; border-style: solid;
border-width: 10px 6px 0 0; 
border-color: white transparent; 
}
</style>
<p><span class=spanSpeechBalloonText>ABC ...</span> Speech Balloon with Text. [&#128172; (&amp;#128172;), símbolos varios y pictogramas 'globo de diálogo con texto'.]</p>


<style type="text/css"> /* 5/Ago/2014 12:31 */
.spanBlackBoard {position: relative; 
display: inline-block; 
margin: 1em 3em 1em 3.5em; 
padding: 1px; 
width: 4em; height: 2.8em; 
background-color: black; 
float: left; 
font: bold .25em/1.1 cursive; 
text-align: center; 
color: white; 
border-color: white; 
border-style: solid; 
border-width: 0 .3em 1px; 
box-shadow: 0 .2em 0 0 black; 
}
.spanBlackBoard::before {content: ""; 
position: absolute; 
width: .8em; height: .3em; 
left: 1em; bottom: 0; 
background-color: grey; 
z-index: 2; 
}
.spanBlackBoard::after {content: ""; 
position: absolute; 
width: 100%; height: 100%; 
left: 0; top: 0; 
background-image: 
linear-gradient(transparent, transparent 3px, rgba(0,0,0,.5) 3px, rgba(0,0,0,.5) 4px, transparent 4px, transparent 6px, rgba(0,0,0,.5) 6px, rgba(0,0,0,.5) 7px, transparent 7px, transparent 10px, rgba(0,0,0,.5) 10px, rgba(0,0,0,.5) 11px, transparent 11px, transparent 12px, rgba(0,0,0,.5) 12px); 
background-size: 13px 13px; 
}
</style>
<p><span class=spanBlackBoard>A B C<br>1+2=3</span> Blackboard with Text. ['pizarra'.]</p>


<style type="text/css"> /* 2/Oct/2015 15:00 */
.spanTextOpen {position: relative; 
display: inline-block; 
margin: 0 .8em .05em 1.3em; 
width: .4em; height: .4em; 
border-style: solid; 
border-width: .03em; 
border-color: black transparent transparent black; 
transform: rotate(45deg); 
}
.spanTextOpen::before {content: ""; 
position: absolute; 
width: .04em; height: .04em; 
left: -.02em; top: -.02em; 
background-color: white; 
border: solid .03em black; 
border-radius: 100%; 
}
.spanTextOpen::after {content: "OPEN"; 
position: absolute; 
width: 4em; height: 1.4em; 
left: -.6em; top: .7em; 
font: bold .2em sans-serif; 
text-align: center; 
background-color: white; 
border: solid .14em black; 
transform: rotate(-45deg); 
}
</style>
<p><span class=spanTextOpen></span> Open. ['Abierto' o 'Negocio Abierto'.]</p>


<style type="text/css"> /* 8/Jun/2015 22:46 */
.spanMailCounter {position: relative; 
display: inline-block; 
margin: 0 2em .5em 4em; 
padding-top: .15em; 
padding-left: .045em; 
padding-right: .35em; 
vertical-align: middle; 
width: 2.4em; height: 2em; 
font: bold .3em/1.1 sans-serif; 
text-align: right; 
color: black; 
background-color: white; 
}
.spanMailCounter::after {content: ""; 
position: absolute; 
width: 1em; height: 1em; 
right: 0; top: 0; 
border: solid .25em red; 
border-radius: 100%; 
}
.spanMailCounter::before {content: ""; 
position: absolute; 
width: 2em; height: 1.3em; 
left: 0; bottom: 0; 
border-radius: .18em; 
background-image: 
linear-gradient(35deg, transparent, transparent .8em, white .9em, white 1em, transparent 1.1em, transparent 100%), 
linear-gradient(325deg, transparent, transparent .2em, white .3em, white .4em, transparent .5em, transparent 100%), 
radial-gradient(circle at right top, transparent, transparent .6em, black .65em, white .65em, white .75em, black .8em, black 100%); 
background-size: 54% 100%, 25% 50%, 100% 100%; 
background-repeat: no-repeat; 
background-position: 0 0, 65% 50%; 
}
</style>



<h1>Íconos CSS. <small>Parte 3. (A <a href="http://codepen.io/solipsistacp/details/uHbhI/" title="[Ctrl] + click">Parte 1</a>. A <a href="http://codepen.io/solipsistacp/details/yKczv/" title="[Ctrl] + click">Parte 2</a>.)</small></h1>
<h2>Con un <code>span</code> .</h2>


<style type="text/css"> /* 21/Jun/2014 19:02 */
.spanBarrow {position: relative; 
display: inline-block; 
margin: 0 .9em .25em .5em; 
width: .7em; height: .05em; 
border-color: black transparent; 
border-style: solid; 
border-width: .3em .15em 0 .4em; 
border-radius: .3em .1em 0 0; 
background-clip: content-box; 
}
.spanBarrow::before {content: ""; 
position: absolute; 
width: .75em; height: .35em; 
left: -.15em; top: -.08em; 
border-color: transparent transparent black black; 
border-style: solid; 
border-width: 0 0 .05em .06em; 
-webkit-transform: rotate(160deg); 
transform: rotate(160deg); 
box-shadow: -.68em .16em 0 -.16em black;
}
.spanBarrow::after {content: ""; 
position: absolute; 
width: .16em; height: .16em; 
left: -.31em; top: -.03em; 
border: solid .05em black; 
border-radius: 50%; 
}
</style>
<p><span class=spanBarrow></span> Barrow. ['carretilla'.]</p>


<style type="text/css"> /* 20/May/2015 22:15 */
.spanShovel {position: relative; 
display: inline-block; 
margin: 0 1.2em .2em .85em; 
width: .65em; height: .1em; 
background-color: dimgrey; 
border-style: solid; 
border-width: .04em 0; 
border-color: transparent; 
box-shadow: .1em 0 0 0 darkgrey; 
background-clip: content-box; 
}
.spanShovel::before {content: ""; 
position: absolute; 
width: .12em; height: .18em; 
left: -.2em; top: -.09em; 
border: solid .07em grey; 
border-radius: .08em .2em .2em .08em / .08em .1em .1em .08em; 
}
.spanShovel::after {content: ""; 
position: absolute; 
width: .45em; height: .4em; 
right: -.55em; top: -.128em; 
background-color: lightgray; 
border-radius: .1em .3em .3em .1em / .1em; 
box-shadow: inset -.05em 0 .1em .15em darkgrey; 
}
</style>
<p><span class=spanShovel></span> Shovel. ['pala'.]</p>


<style type="text/css"> /* 7/Sep/2014 14:54 */
.spanTapeMeasure {position: relative; 
display: inline-block; 
margin: 0 1.3em 0 .7em; 
width: .65em; height: .65em; 
border: solid .025em white; 
border-radius: 100% 100% 0 100%; 
background-image: radial-gradient(circle, black, black .18em, white .19em, white .23em, black .24em, black 100%); 
}
.spanTapeMeasure::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .5em; top: -.0em; 
border-style: solid; 
border-width: .07em; 
border-color: black black transparent transparent; 
border-radius: 0 .08em 0 0; 
}
.spanTapeMeasure::after {content: ""; 
position: absolute; 
width: .45em; height: .06em; 
left: .68em; top: .54em; 
border-style: solid; 
border-width: 0 .06em .05em 0; 
border-color: black; 
}
</style>
<p><span class=spanTapeMeasure></span> Tape-Measure. ['cinta métrica'.]</p>


<style type="text/css"> /* 19/May/2014 12:09 */
.spanHandDrill {position: relative; 
display: inline-block; 
margin: 0 .9em .2em .6em; 
width: .8em; height: .08em; 
border-color: transparent black transparent transparent; 
border-style: solid; 
border-width: .12em .14em .12em .32em; 
border-radius: 0 .12em .12em 0; 
box-shadow: inset 0 0 .2em .1em black; 
background-image: linear-gradient(black, black), 
repeating-linear-gradient(45deg, black, black .03em, transparent .06em); 
background-size: 100% 100%, 100% .04em; 
background-position: 0 0, 0 .015em; 
background-clip: content-box, border-box; 
background-repeat: no-repeat, repeat-x; 
}
.spanHandDrill:before {content: ""; 
position: absolute; 
width: .28em; height: .23em; 
left: .2em; top: 0; 
background-color: white; 
border-color: white black black; 
border-style: solid; 
border-width: .06em .08em .08em; 
border-radius: 0 0 .12em .12em; 
}
.spanHandDrill:after {content: ""; 
position: absolute; 
width: .17em; height: .14em; 
left: -.05em; top: -.03em; 
background-color: black; 
border-radius: 100% 0 0 100%; 
}
</style>
<p><span class=spanHandDrill></span> Hand Drill. ['berbiquí'.]</p>


<style type="text/css"> /* 19/May/2014 16:39 */
.spanCutter {position: relative; 
display: inline-block; 
margin: 0 .9em .2em; 
width: .8em; height: .15em; 
background-color: gray; 
border-color: black; 
border-style: solid; 
border-width: .07em .15em .07em .07em; 
border-radius: .05em .14em .14em .05em; 
z-index: auto; 
}
.spanCutter:before {content: ""; 
position: absolute; 
width: .1em; height: .17em; 
left: .6em; top: -.04em; 
background-color: black; 
border-color: silver silver dimgrey dimgrey; 
border-style: solid; 
border-width: .03em .02em; 
}
.spanCutter:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.24em; top: -.025em; 
border-color: gray gray transparent transparent; 
border-style: solid; 
border-width: .1em .06em; 
box-shadow: .1em 0 0 0 gray; 
z-index: -1; 
}
</style>
<p><span class=spanCutter></span> Cutter. ['cortante' o 'trincheta'.]</p>


<style type="text/css"> /* 23/Jun/2014 19:34 */
.spanMagnet {position: relative; 
display: inline-block; 
margin: 0 1.25em 0 .9em; 
width: .4em; height: .3em; 
border-color: black; 
border-style: solid; 
border-width: .14em 0 .14em .14em; 
border-radius: 50% 0 0 50%; 
}
.spanMagnet::before , .spanMagnet::after {content: ""; 
position: absolute; 
width: .14em; height: .14em; 
left: .3em; top: -.16em; 
border-color: transparent; 
border-style: solid; 
border-width: .03em .07em; 
border-radius: .09em; 
box-shadow: inset 0 0 0 .025em black, 
.03em 0 0 0 black, .06em 0 0 0 white, 
.09em 0 0 0 black; 
}
.spanMagnet::after {top: .28em; 
}
</style>
<p><span class=spanMagnet></span> Magnet. ['imán'; &#8834; (&amp;#8834;), operadores matemáticos 'subconjunto'.]</p>


<style type="text/css"> /* 2/Ene/2015 18:52 */
.spanWrench {position: relative; 
display: inline-block; 
margin: 0 1em .12em .3em; 
width: 1.2em; height: .22em; 
background-color: black; 
border-style: solid; 
border-width: .07em .21em .1em .07em; 
border-color: transparent black transparent transparent; 
border-radius: .2em 0 0 .23em; 
background-image: 
radial-gradient(circle, white, white 43%, black 47%, black 100%); 
background-size: .22em .22em; 
background-repeat: no-repeat; 
background-position: .025em center; 
background-clip: content-box; 
}
.spanWrench::before {content: ""; 
position: absolute; 
width: .02em; height: .02em; 
left: 1.35em; top: -.22em; 
border-style: solid; 
border-width: .35em .3em .3em .3em; 
border-color: transparent rgba(0,0,0,.99) black; 
border-radius: 100% 100% 100% 0; 
background-image: 
linear-gradient(135deg, transparent, transparent 35%, white 37%, white 100%), 
radial-gradient(circle, black, black .26em, transparent .28em, transparent 100%); 
background-clip: border-box; 
background-repeat: no-repeat; 
background-origin: border-box; 
transform: rotate(45deg); 
}
.spanWrench::after {content: ""; 
position: absolute; 
width: .1em; height: .23em; 
left: 1.45em; top: .0em; 
background-image: 
repeating-linear-gradient(20deg, dimgrey, dimgrey .05em, silver .05em, silver .07em); 
}
</style>
<p><span class=spanWrench></span> Wrench 2. [&#128295; (&amp;#128295;), símbolo 'llave francesa'.]</p>


<style type="text/css">
.spanHammer {position: relative; 
display: inline-block; 
background-color: black; 
width: .15em; height: .8em; 
margin: 0 1.25em; 
border-radius: .05em; 
}
.spanHammer:after {content: ""; 
display: block; 
width: .35em; height: 0; 
position: absolute; 
left: -.2em; top: 0; 
border-width: 0 0 .15em .15em; 
border-style: solid; 
border-color: transparent transparent black; 
}
</style>
<p><span class=spanHammer></span> Hammer. [&#128296; (&amp;#128296;), símbolo 'martillo'.]</p>


<style type="text/css"> /* 5/Ene/2015 15:49 */
.spanPliers {position: relative; 
display: inline-block; 
margin: 0 .9em .1em; 
width: .6em; height: .17em; 
border-style: solid; 
border-width: .1em .14em .1em 0; 
border-color: black; 
border-radius: .5em .6em .6em .5em / .1em .3em .3em .1em; 
transform: rotatez(325deg); 
}
.spanPliers::before {content: ""; 
position: absolute; 
width: .21em; height: .025em; 
left: .65em; top: -.03em; 
background-color: white; 
border-style: solid; 
border-width: .12em 0 .12em .12em; 
border-color: black; 
border-radius: .15em .22em .22em .15em / .15em .1em .1em .15em; 
}
.spanPliers::after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .76em; top: .04em; 
background-color: white; 
border-radius: 100%; 
box-shadow: .03em 0 0 0 white, -.125em 0 0 -.02em silver; 
}
</style>
<p><span class=spanPliers></span> Pliers. ['pinza' o 'alicate'.]</p>


<style type="text/css"> /* 29/Jun/2015 22:41 */
.spanSaw1 {position: relative; 
display: inline-block; 
margin: 0 .8em .1em; 
width: .9em; height: .13em; 
border-style: solid; 
border-width: .1em 0; 
border-color: transparent; 
background: 
linear-gradient(to right top, transparent 50%, black 50%), 
linear-gradient(to right bottom, transparent 47%, black 53%), black; 
background-size: .08em.1em, 100% .1em; 
background-repeat: repeat-x, no-repeat; 
background-position: left bottom, left top; 
background-clip: border-box, border-box, content-box; 
background-origin: border-box, border-box, content-box; 
transform: rotate(5deg); 
}
.spanSaw1::before {content: ""; 
position: absolute; 
width: .1em; height: .21em; 
left: .87em; top: -.13em; 
border-style: solid; 
border-width: .07em .08em .06em .1em; 
border-color: black; 
border-radius: .05em .05em .1em .05em / .05em .05em .15em .05em; 
box-shadow: -.03em 0 0 0 white;
transform: rotate(-10deg); 
}
</style>
<p><span class=spanSaw1></span> Handsaw. ['serrucho'.]</p>


<style type="text/css"> /* 18/Oct/2015 17:17 */
.spanSaw2 {position: relative; 
display: inline-block; 
margin: 0 .7em .1em; 
width: 1em; height: .25em; 
border-style: solid solid dotted; 
border-width: .08em .08em .035em; 
border-color: black black dimgrey; 
border-radius: .2em .2em 0 0; 
box-shadow: inset 0 -.02em 0 0 dimgrey; 
}
.spanSaw2::before {content: ""; 
position: absolute; 
width: .3em; height: .13em; 
left: 1.05em; bottom: -.03em; 
background-color: black; 
border-radius: .25em / .15em; 
}
</style>
<p><span class=spanSaw2></span> Hacksaw. ['sierra de arco'.]</p>


<style type="text/css"> /* 13/Ene/2015 17:17 */
.spanRasp {position: relative; 
display: inline-block; 
margin: 0 1.4em .2em .5em; 
width: .8em; height: .16em; 
border: none; 
border-top: solid .08em dimgrey; 
background-image: 
repeating-linear-gradient(45deg, grey, grey .02em, transparent .02em, transparent .04em, grey .05em), 
repeating-linear-gradient(-45deg, grey, grey .02em, black .02em, black .04em, grey .05em); 
}
.spanRasp::before {content: ""; 
position: absolute; 
width: .16em; height: .1em; 
left: 100%; top: -.06em; 
background-color: dimgrey; 
border-style: solid; 
border-width: .07em 0 .07em .1em; 
border-color: transparent black transparent dimgrey; 
background-clip: content-box; 
}
.spanRasp::after {content: ""; 
position: absolute; 
width: .55em; height: .2em; 
left: 1.05em; top: -.059em; 
background-color: black; 
border-radius: .16em; 
}
</style>
<p><span class=spanRasp></span> Rasp. Lime. ['lima' o 'escofina'.]</p>


<style type="text/css"> /* 17/May/2014 14:33 */
.spanTriangularRuler {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 .8em; 
width: .7em; height: .7em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .05em; 
background-image: 
linear-gradient(315deg, white, white .36em, transparent .36em, transparent .44em, black .44em, black .49em, white .5em, white 100%), 
repeating-linear-gradient(45deg, transparent, transparent .05em, black .05em, black .075em); 
background-repeat: no-repeat; 
}
.spanTriangularRuler:before {content: ""; 
position: absolute; 
width: .05em; height: .05em; 
bottom: .075em; right: .075em; 
background-color: white; 
border: solid .04em black; 
border-radius: 100%; 
}
</style>
<p><span class=spanTriangularRuler></span> Triangular Ruler. [&#128208; (&amp;#128208;), símbolos varios y pictogramas 'escuadra de dibujo'.]</p>


<style type="text/css"> /* 13/Ene/2015 12:55 */
.spanBowSpringCompass {position: relative; 
display: inline-block; 
margin: 0 1.15em -.03em; 
width: .44em; height: .9em; 
background-image: linear-gradient(black, black), 
linear-gradient(290deg, transparent, transparent .24em, black .255em, black .295em, transparent .315em, transparent 100%), 
linear-gradient(70deg, transparent, transparent .24em, black .255em, black .295em, transparent .315em, transparent 100%); 
background-size: .068em .1em, .3em .73em, .3em .73em; 
background-position: center top, -.05em .2em, right -.05em top .2em; 
background-repeat: no-repeat; 
transform: rotatez(50deg); 
}
.spanBowSpringCompass::before {content: ""; 
display: block; 
width: .2em; height: .2em; 
margin: .1em auto; 
border-style: solid; 
border-width: .06em; 
border-color: black black transparent; 
border-radius: 100%; 
}
.spanBowSpringCompass::after {content: ""; 
position: absolute; 
width: .42em; height: .03em; 
left: 0; top: .5em; 
background-color: black; 
border-style: solid; 
border-width: .06em .06em .06em 0; 
border-color: transparent black; 
background-clip: content-box; 
}
</style>
<p><span class=spanBowSpringCompass></span> Bow-Spring Compass (Precision). ['balustrín'.]</p>


<style type="text/css"> /* 3/Mar/2016 20:37 */
.spanElectricSaw {position: relative; 
display: inline-block; 
margin: 0 .8em .2em; 
width: .16em; height: .25em; 
border-style: solid; 
border-width: .15em .7em .15em .1em; 
border-color: grey grey grey black; 
border-radius: .1em .4em .1em .06em / .1em .3em .1em .15em; 
transform: rotate(10deg); 
}
.spanElectricSaw::before {content: ""; 
position: absolute; 
width: .7em; height: .7em; 
left: .15em; top: -.05em; 
background-color: black; 
border-style: solid; 
border-width: .1em; 
border-color: black transparent transparent black; 
border-radius: 100%; 
background-clip: content-box; 
box-shadow: inset .05em .05em 0 0 black, inset 0 0 0 .25em silver; 
transform: rotate(35deg); 
}
.spanElectricSaw::after {content: ""; 
position: absolute; 
width: 1.1em; height: .55em; 
left: .08em; top: -.2em; 
border-bottom: solid .04em black; 
background-image: radial-gradient(ellipse, black .07em, dimgrey .08em, dimgrey .1em, transparent .1em); 
background-position: .55em 0; 
background-size: .2em .2em; 
background-repeat: no-repeat; 
transform: rotate(-10deg); 
}
</style>
<p><span class=spanElectricSaw></span> Electric Saw. ['sierra circular eléctrica'.]</p>


<style type="text/css"> /* 5/Ene/2017 14:31 */
.spanCarpenterStapler {position: relative; 
display: inline-block; 
margin: 0 .85em; 
width: .55em; height: .18em; 
border-style: solid; 
border-width: .16em .1em .14em .3em; 
border-color: black; 
border-radius: 0 .18em .08em 0; 
box -shadow: inset 0 0 .15em .02em rgba(0, 0, 0, .7); 
}
.spanCarpenterStapler::before {content: ""; 
position: absolute; 
width: .6em; height: .1em; 
left: -.16em; top: -.38em; 
background-color: black; 
border-style: solid; 
border-width: .08em 0 .12em .1em; 
border-color: transparent transparent transparent black; 
border-radius: .08em 0 .5em 0 / .1em 0 .2em 0; 
box-shadow: -.14em .02em 0 0 black; 
background-clip: content-box; 
transform: rotate(350deg); 
}
</style>
<p><span class=spanCarpenterStapler></span> Carpenter Stapler. ['engrapadora de carpintero'.]</p>


<style type="text/css"> /* 19/May/2014 16:39 */
.spanScrew {position: relative; 
display: inline-block; 
margin: 0 1.2em -.1em 1.1em; 
width: .2em; height: .7em; 
text-align: center; 
background-color: black; 
border-color: black transparent; 
border-style: solid; 
border-width: .15em .16em 0; 
border-radius: .05em .05em 100% 100%; 
background-image: repeating-linear-gradient(25deg, black, grey .08em); 
background-clip: content-box; 
box-shadow: inset 0 .05em 0 0 black; 
}
.spanScrew:before {content: ""; 
display: block; 
margin: -.15em auto; 
width: .07em; height: .07em; 
background-color: white; 
}
</style>
<p><span class=spanScrew></span> Screw. ['tornillo'.]</p>


<style type="text/css"> /* 13/Oct/2015 16:24 */
.spanScrewdriver {position: relative; 
display: inline-block; 
margin: 0 .9em .1em .8em; 
width: .7em; height: .12em; 
background-color: grey; 
border-style: solid; 
border-width: .1em .12em .1em .06em; 
border-color: black; 
border-radius: .2em .1em .1em .2em; 
}
.spanScrewdriver::before {content: ""; 
position: absolute; 
width: .55em; height: .12em; 
left: .8em; top: 0; 
background-color: darkgrey; 
border-style: solid; 
border-width: .026em .12em .026em 0; 
border-color: white darkgrey; 
box-sizing: border-box; 
box-shadow: .13em 0 0 -.005em darkgrey; 
background-clip: content-box; 
}
</style>
<p><span class=spanScrewdriver></span> Screwdriver. [ 'destornillador' o 'desarmador'.]</p>


<style type="text/css"> /* 7/Sep/2015 19:04 */
.spanHexNut {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .7em; height: .6em; 
background: 
radial-gradient(circle, white .15em, transparent .17em), 
linear-gradient(60deg, white 17%, transparent 18%) right bottom, 
linear-gradient(120deg, white 17%, transparent 18%), 
linear-gradient(240deg, white 17%, transparent 18%) right top, 
linear-gradient(300deg, white 17%, transparent 18%) right bottom, black; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanHexNut></span> Hexagonal Nut. [&#128297; (&amp;#128297;), símbolos varios y pictogramas 'tuerca y tornillo'; 
&#11042; (&amp;#11042;), símbolos varios y flechas 'hexágono negro'; 
&#9187; (&amp;#9187;), técnicos varios 'aro de benceno con círculo'.]</p>


<style type="text/css"> /* 13/Sep/2016 12:27 */
.spanHexKey {position: relative; 
display: inline-block; 
margin: 0 1em -.06em 1.3em; 
width: .2em; height: .4em; 
border-style: ridge; 
border-width: .06em 0 0 .06em; 
border-color: dimgrey; 
border-radius: .1em 0 0 0; 
box-shadow: inset .03em .03em 0 0 darkgrey; 
}
.spanHexKey::before {content: ""; 
position: absolute; 
width: .3em; height: .55em; 
left: -.2em; top: -.2em; 
border: inherit; 
border-width: .08em 0 0 .08em; 
border-radius: .12em 0 0 0; 
box-shadow: inset .04em .04em 0 0 darkgrey; 
}
.spanHexKey::after {content: ""; 
position: absolute; 
width: .4em; height: .7em; 
left: -.4em; top: -.4em; 
border: inherit; 
border-width: .1em 0 0 .1em; 
border-radius: .15em 0 0 0; 
box-shadow: inset .05em .05em 0 0 darkgrey; 
}
</style>
<p><span class=spanHexKey></span> Hex Keys. ['llaves allen'.]</p>


<style type="text/css"> /* 27/May/2014 17:11 */
.spanAxe {position: relative; 
display: inline-block; 
margin: 0 1.3em .5em .95em; 
width: .1em; height: .1em; 
background-color: black; 
border-color: transparent black white; 
border-style: solid; 
border-width: .05em .1em .05em .2em; 
border-radius: 0 .25em 0 0 / 0 .18em 0 0; 
background-clip: content-box; 
-webkit-transform: rotate(320deg); 
transform: rotate(320deg); 
}
.spanAxe:before {content: ""; 
position: absolute; 
left: 0; top: -.06em; 
width: .08em; height: .7em; 
background-color: black; 
border-radius: .05em .05em .04em .04em / .7em .7em .04em .04em; 
}
</style>
<p><span class=spanAxe></span> Axe. ['hacha'.]</p>


<style type="text/css"> /* 22/May/2014 21:22 */
.spanPaintRoller {position: relative; 
display: inline-block; 
margin: 0 1.5em 0 .9em; 
width: .28em; height: .7em; 
background-color: black; 
border-radius: .06em; 
box-shadow: .14em -.08em 0 -.02em white, .125em -.1em 0 -.01em black; 
}
.spanPaintRoller:before {content: ""; 
position: absolute; 
width: .2em; height: .42em; 
left: .365em; top: -.07em; 
border-color: transparent transparent black black; 
border-style: solid; 
border-width: .036em; 
border-radius: 0 0 0 .06em; 
}
.spanPaintRoller:after {content: ""; 
position: absolute; 
width: .4em; height: .1em; 
left: .5em; top: .32em; 
background-color: black; 
border-color: white black; 
border-style: solid; 
border-width: .04em 0 .04em .05em; 
border-radius: 0 .07em .07em 0; 
}
</style>
<p><span class=spanPaintRoller></span> Paint Roller. ['rodillo de pintor'.]</p>


<style type="text/css"> /* 21/Jun/2014 13:55 */
.spanBucket {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .5em; height: 0; 
border-color: grey transparent; 
border-style: solid; 
border-width: .6em .12em .1em; 
border-radius: 0 0 .35em .35em; 
background-image: linear-gradient(black, black); 
background-position: -.1em -.52em; 
background-size: .1em .05em; 
background-repeat: repeat-x; 
border-collapse: separate; 
}
.spanBucket::before {content: ""; 
position: absolute; 
width: .74em; height: .25em; 
left: -.165em; top: -.53em; 
border-color: transparent black black; 
border-style: solid; 
border-width: 0 .05em .05em; 
border-radius: .4em .4em .8em .8em / .3em .3em .6em .6em; 
border-collapse: separate; 
}
.spanBucket::after {content: ""; 
position: absolute; 
width: .65em; height: .1em; 
left: -.1em; top: -.66em; 
background-color: silver; 
border: solid .025em grey; 
border-radius: .4em / .15em; 
border-collapse: separate; 
}
</style>
<p><span class=spanBucket></span> Bucket. ['balde' o 'cubo'.](bug IE?)</p>


<style type="text/css"> /* 11/Ago/2016 17:16 */
.spanJerrican {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.3em; 
width: .3em; height: .65em; 
background: linear-gradient(transparent .12em, black .12em); 
border-style: solid; 
border-width: .05em .05em 0 0; 
border-color: black; 
border-radius: 0 .1em .1em 0; 
}
.spanJerrican::before {content: ""; 
position: absolute; 
width: .22em; height: .7em; 
left: -.235em; top: -.05em; 
background: linear-gradient(135deg, transparent .15em, black .16em); 
border-right: solid .03em black; 
border-radius: 0 0 0 .1em; 
}
.spanJerrican::after {content: ""; 
position: absolute; 
width: .05em; height: .15em; 
left: -.26em; top: -.05em; 
background-color: black; 
border-right: double .08em black; 
border-radius: .03em 0 0 .03em; 
background-clip: content-box; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanJerrican></span> Jerrican. ['bidón para líquidos'.]</p>


<style type="text/css"> /* 7/Feb/2016 12:45 */
.spanHelmetWork {position: relative; 
display: inline-block; 
margin: 0 1em .16em; 
width: .63em; height: .24em; 
background-color: hotpink; 
border-radius: .07em .07em .3em .3em / .1em .1em .2em .2em; 
}
.spanHelmetWork::before {content: ""; 
position: absolute; 
width: .35em; height: .4em; 
left: .07em; top: -.13em; 
background-color: lightpink; 
border: solid .08em hotpink; 
border-radius: 0 0 80% 80% / 0 0 100% 100%; 
}
.spanHelmetWork::after {content: ""; 
position: absolute; 
width: .52em; height: .28em; 
left: 0; top: -.38em; 
background-color: grey; 
border-style: solid; 
border-width: .06em; 
border-color: transparent transparent grey; 
border-radius: .5em .5em .1em .1em / .5em .5em .1em .1em; 
background-image: linear-gradient(grey, grey), 
linear-gradient(white, white); 
background-size: .13em 90%, .18em 100%; 
background-repeat: no-repeat; 
background-position: center top; 
background-clip: content-box; 
}
</style>
<p><span class=spanHelmetWork></span> Helmet Work. Construction Worker. [&#128119; (&amp;#128119;), símbolos varios y pictogramas 'operario de construcción'; 'casco de protección para trabajo'.]</p>


<style type="text/css"> /* 7/Abr/2015 15:42 */
.spanRope {position: relative; 
display: inline-block; 
margin: 0 1.8em .15em .6em; 
width: .16em; height: .3em; 
background-color: burlywood; 
border-radius: 0 .16em; 
box-shadow: .16em .12em 0 0 tan, .32em .24em 0 0 burlywood, 
.48em .36em 0 0 tan, .64em .48em 0 0 burlywood, 
.8em .6em 0 0 tan, .96em .72em 0 0 burlywood; 
transform: rotate(-35deg); 
}
.spanRope::before , .spanRope::after {content: ""; 
position: absolute; 
width: .12em; height: .2em; 
left: -.15em; top: -.06em; 
border-style: solid; 
border-width: .02em 0 .02em .1em; 
border-color: white transparent; 
border-radius: 0 0 .1em 0; 
transform: rotate(35deg); 
background: linear-gradient(burlywood, burlywood), 
repeating-linear-gradient(tan, white 15%); 
background-clip: content-box, border-box; 
background-origin: content-box, border-box; 
}
.spanRope::after {
left: 1.05em; top: .84em; 
border-style: solid; 
border-width: .02em .1em .02em 0; 
border-radius: .1em 0 0 0; 
}
</style>
<p><span class=spanRope></span> Rope. ['soga'.]</p>


<style type="text/css"> /* 10/Ago/2014 12:56 */
.spanSackBarrow {position: relative; 
display: inline-block; 
margin: 0 1.1em .15em 1.2em; 
width: .3em; height: .5em; 
border-color: transparent transparent black black; 
border-style: solid; 
border-width: 0 .08em .06em .05em; 
background-image: linear-gradient(black, black), linear-gradient(black, black); 
background-size: .25em .2em, .18em .13em; 
background-position: left .025em bottom .025em, left .025em bottom .25em; 
background-repeat: no-repeat; 
background-clip: content-box; 
-webkit-transform: rotate(325deg); 
transform: rotate(325deg); 
}
.spanSackBarrow::before {content: ""; 
position: absolute; 
width: .08em; height: .08em; 
left: -.14em; bottom: -.14em; 
background-color: white; 
border: solid .08em black; 
border-radius: 100%; 
box-shadow: 0 0 0 .02em white; 
}
.spanSackBarrow::after {content: ""; 
position: absolute; 
width: .12em; height: .07em; 
left: -.21em; top: -.09em; 
border-color: transparent; 
border-style: solid; 
border-width: 0 .1em 0 0; 
border-radius: .08em; 
background-image: linear-gradient(black, black), 
linear-gradient(transparent, transparent 20%, black 20%, black 80%, transparent 80%, transparent 100%); 
background-clip: content-box, border-box; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanSackBarrow></span> Sack Barrow. ['carretilla de carga'.]</p>


<style type="text/css"> /* 16/May/2015 20:43 */
.spanPlunger {position: relative; 
display: inline-block; 
margin: 0 .9em -.1em; 
width: .8em; height: .1em; 
text-align: center; 
background-color: black; 
line-height: 0; 
border-radius: .08em; 
background-clip: content-box; 
}
.spanPlunger::before {content: ""; 
display: block; 
width: .148em; height: .4em; 
margin: -.8em auto 0; 
background-color: dimgrey; 
background-clip: content-box; 
line-height: 0; 
border-style: solid; 
border-width: .05em .05em 0; 
border-color: transparent transparent black; 
border-radius: .15em .15em 0 0; 
box-shadow: inset -.03em .01em .03em .02em silver, 0 .1em 0 -.021em black; 
}
.spanPlunger::after {content: ""; 
display: block;
width: .72em; height: .28em; 
margin: .07em auto 0; 
background-color: silver; 
line-height: 0; 
border-radius: .4em .4em 0 0; 
box-shadow: inset .14em -.03em .08em .08em black; 
}
</style>
<p><span class=spanPlunger></span> Plunger. ['destapador de desagües'.]</p>


<style type="text/css"> /* 19/Sep/2014 22:31 */
.spanWall {position: relative; 
display: inline-block; 
margin: 0 .6em; 
width: 1.4em; height: .68em; 
border: none; 
border-bottom: solid .05em grey; 
background-image: 
repeating-linear-gradient(to right, firebrick, firebrick .34em, dimgrey .34em, dimgrey .365em); 
overflow: hidden; 
}
.spanWall::before , .spanWall::after {content: ""; 
position: absolute; 
width: 1.45em; height: .4em; 
left: 0; top: .12em; 
border-style: solid; 
border-width: .025em 0; 
border-color: dimgrey; 
background-image: 
repeating-linear-gradient(to right, firebrick, firebrick .34em, dimgrey .34em, dimgrey .365em); 
background-position: -.18em 0; 
}
.spanWall::after {top: .26em; 
width: inherit; height: .12em; 
background-position: 0 0; 
}
</style>
<p><span class=spanWall></span> Wall. ['muro'.]</p>


<style type="text/css"> /* 1/Ago/2017 19:35 */
.spanSeesaw {position: relative; 
display: inline-block; 
margin: 0 1.1em .05em; 
width: .24em; height: .26em; 
border-style: solid; 
border-width: .18em .1em 0 .1em; 
border-color: black; 
border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
}
.spanSeesaw::before {content: ""; 
position: absolute; 
width: 1.5em; height: .04em; 
left: -.7em; top: -.3em; 
border-radius: .1em; 
border-style: solid; 
border-width: .1em; 
border-color: transparent transparent black; 
background-image: 
radial-gradient(ellipse at bottom, black 70%, transparent 70%), 
radial-gradient(ellipse at bottom, black 70%, transparent 70%); 
background-size: .3em .06em; 
background-repeat: no-repeat; 
background-position: left bottom, right bottom; 
background-clip: content-box; 
transform: rotate(15deg); 
transform-origin: center bottom; 
}
.spanSeesaw::after {content: ""; 
position: absolute; 
width: .66em; height: .14em; 
left: -.24em; top: -.34em; 
border-style: solid; 
border-width: .05em; 
border-color: transparent black; 
border-radius: .15em .15em 0 0; 
transform: rotate(15deg); 
transform-origin: center bottom; 
}
</style>
<p><span class=spanSeesaw></span> Seesaw. ['subibaja'.]</p>



<style type="text/css"> /* 15/Sep/2014 21:28 */
.spanGardenFence {position: relative; 
display: inline-block; 
margin: 0 1.7em 0 .85em; 
width: .12em; height: .5em; 
background-color: black; 
border-radius: .05em .05em 0 0 / .2em .2em 0 0; 
box-shadow: .15em 0 0 0 black, .3em 0 0 0 black, 
.45em 0 0 0 black, .6em 0 0 0 black, .75em 0 0 0 black; 
}
.spanGardenFence::before {content: ""; 
position: absolute; 
width:.97em; height: .08em; 
left: -.05em; top: .13em; 
background-color: black; 
box-shadow: 0 .2em 0 0 black; 
}
</style>
<p><span class=spanGardenFence></span> Garden Fence. ['cerco de jardín', 'empalizada'.]</p>


<style type="text/css"> /* 30/Sep/2014 20:45 */
.spanPoolWater {position: relative; 
display: inline-block; 
margin: 0 1em -.03em .9em; 
width: .66em; height: .35em; 
border-style: solid; 
border-width: .15em .05em .05em; 
border-color: white; 
box-shadow: 0 .05em 0 .05em black; 
background-image: radial-gradient(circle at top, transparent 0, transparent .05em, black .055em, black .08em, transparent .085em, transparent 100%); 
background-size: .14em .12em; 
background-repeat: repeat; 
background-position: center .03em; 
}
.spanPoolWater::before , .spanPoolWater::after {content: ""; 
position: absolute; 
width: .1em; height: .3em; 
left: .01em; top: -.3em; 
border-style: solid; 
border-width: 0 .035em 0 .04em; 
border-color: black black transparent transparent; 
border-radius: .08em .06em 0 0; 
box-shadow: inset 0 .03em 0 0 black; 
background-image: repeating-linear-gradient(transparent, transparent .04em, black .05em, black .065em); 
background-repeat: no-repeat; 
background-position: center .08em; 
background-origin: border-box; 
}
.spanPoolWater::after {left: -.13em; 
background-image: none; 
}
</style>
<p><span class=spanPoolWater></span> Pool Water. ['piscina con agua'.]</p>


<style type="text/css"> /* 9/May/2014 12:41 */
.spanWindow1 {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .7em; height: .5em; 
border: solid .08em black; 
background-color: lightgrey; 
background-image: radial-gradient(ellipse, white, white 30%, lightgrey 60%), 
radial-gradient(circle, lightslategray, lightslategray 70%, transparent 72%, transparent 100%); 
background-size: .35em .15em, .15em .15em; 
background-position: .4em .25em, .1em .08em; 
background-repeat: no-repeat; 
}
.spanWindow1:before {content: ""; 
position: absolute; 
width: .69em; height: .5em; 
left: -.29em; top: -.1em; 
border-color: transparent grey; 
border-style: solid; 
border-width: .1em .3em; 
box-shadow: -.03em 0 0 0 dimgray, .03em 0 0 0 dimgray; 
}
</style>
<p><span class=spanWindow1></span> Window 1. ['ventana abierta'.]</p>


<style type="text/css"> /* 9/May/2014 13:46 */
.spanWindow2 {position: relative; 
display: inline-block; 
margin: 0 1.2em 0 1em; 
width: .35em; height: .6em; 
/*width: .7em; */
border-color: transparent; 
border-style: solid; 
border-width: .04em .1em 0; 
box-shadow: inset 0 0 0 .05em dimgray, 0 -.03em 0 0 black; 
/*background-image: linear-gradient(90deg, transparent, transparent 46%, dimgray 46%, dimgray 54%, transparent 54%, transparent 100%); 
background-clip: content-box; */
}
.spanWindow2:before {content: ""; 
position: absolute; 
width: .28em; height: .73em; 
left: -.03em; top: -.09em; 
background-image: radial-gradient(ellipse at top left, rgba(0,0,0,.4), rgba(0,0,0,.4) 30%, thistle 40%, rgba(0,0,0,.5) 50%, thistle 60%, rgba(0,0,0,.4) 70%, transparent 71%, transparent 100%), 
linear-gradient(75deg, rgba(0,0,0,.4), rgba(0,0,0,.4) 20%, thistle 40%, rgba(0,0,0,.5) 50%, thistle 60%, rgba(0,0,0,.4) 70%, transparent 71%, transparent 100%); 
background-size: 100% 60%, 65% 50%; 
background-position: 0 0, 0 100%; 
background-repeat: no-repeat;
}
/*.spanWindow2:after {content: ""; 
position: absolute; 
width: .16em; height: .73em; 
right: -.05em; top: -.09em; 
background-image: 
linear-gradient(92deg, rgba(0,0,0,.4), rgba(0,0,0,.4) 10%, thistle 20%, rgba(0,0,0,.5) 40%, thistle 60%, rgba(0,0,0,.4) 80%, thistle 81%, transparent 100%); 
border-radius: 0 0 .05em .03em; 
}*/
</style>
<p><span class=spanWindow2></span> Window 2. ['ventana con cortinado'.]</p>


<style type="text/css"> /* 5/Dic/2015 22:16 */
.spanBarrel {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .6em; height: .7em; 
border: solid .032em maroon; 
border-radius: .15em / .5em; 
background-image: 
radial-gradient(ellipse, transparent 58%, maroon 65%, maroon 68%, transparent 70%), 
radial-gradient(ellipse, transparent 48%, maroon 60%, maroon 73%, transparent 75%), 
linear-gradient(maroon 8%, tan 8%, tan 30%, maroon 30%, maroon 35%, tan 30%, tan 65%, maroon 70%, tan 70%, tan 92%, maroon 92%); 
background-size: 72% 140%, 28% 130%, 100% 100%; 
background-repeat: no-repeat; 
background-position: center center; 
}
</style>
<p><span class=spanBarrel></span> Barrel. ['barril'.]</p>


<style type="text/css"> /* 22/Feb/2016 14:51 */
.spanBroom {position: relative; 
display: inline-block; 
margin: 0 .65em 0 1.4em; 
width: .56em; height: .38em; 
border-radius: .2em 0 0 .2em; 
background-image: 
repeating-radial-gradient(ellipse at right, sandybrown 0, sandybrown .015em, sienna .03em, sienna .045em), 
repeating-linear-gradient(sandybrown 0, sandybrown .015em, sienna .03em, sienna .045em); 
background-size: .26em 100%, 100% 100%; 
background-repeat: no-repeat; 
transform: rotate(30deg); 
}
.spanBroom::before {content: ""; 
position: absolute; 
width: .02em; height: 100%; 
left: .24em; top: 0; 
background-color: rgba(100,100,100,.6); 
border-style: dashed; 
border-width: 0 .03em; 
border-color: black; 
}
.spanBroom::after {content: ""; 
position: absolute; 
width: .8em; height: .1em; 
left: -.85em; top: .13em; 
background-color: tan; 
border-style: solid; 
border-width: .025em .08em .025em 0; 
border-color: transparent sandybrown; 
border-radius: .15em 0 0 .15em; 
background-clip: content-box; 
}
</style>
<p><span class=spanBroom></span> Broom. ['escoba'.]</p>


<style type="text/css"> /* 6/Sep/2014 20:06 */
.spanVacuum {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .22em; height: .6em; 
background-color: transparent; 
border-style: solid; 
border-width: .06em .06em; 
border-color: black black transparent; 
border-radius: .25em .25em 0 0; 
transform: rotate(45deg); 
}
.spanVacuum::before {content: ""; 
position: absolute; 
left: .1em; top: .12em; 
width: .31em; height: .43em; 
border-style: solid; 
border-width: 0 .12em .12em 0; 
border-color: transparent; 
border-radius: 80% 0 0 30% / 110% 0 0 30%; 
transform: rotate(-45deg); 
background-image: radial-gradient(circle, white 0, white .04em, black .05em, black .1em, white .108em, white .125em, transparent .13em, transparent 100%), 
linear-gradient(black, black), linear-gradient(white, white); 
background-size: .3em .3em, 100% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-position: .11em .22em, 0 0, .02em 0; 
background-clip: border-box, content-box; 
}
.spanVacuum::after {content: ""; 
position: absolute; 
width: .1em; height: 0; 
left: -.11em; top: .63em; 
border-style: solid; 
border-width: 0 .07em .06em; 
border-color: black transparent; 
transform: rotate(-45deg); 
}
</style>
<p><span class=spanVacuum></span> Vacuum. ['aspiradora'.]</p>


<style type="text/css"> /* 25/Dic/2014 14:24 */
.spanCurtain {position: relative;
display: inline-block; 
margin: 0 .8em -.07em .7em; 
width: 1.2em; height: .8em; 
background-image: 
radial-gradient(ellipse at left top, grey, black, dimgrey, black, dimgrey, grey, black, black .36em, transparent .38em, transparent 100%), 
radial-gradient(ellipse at right top, grey, black, dimgrey, black, dimgrey, grey, black, black .36em, transparent .38em, transparent 100%),
radial-gradient(ellipse at left bottom, dimgrey, grey, black, dimgrey, black, grey, dimgrey .22em, transparent .24em, transparent 100%),
radial-gradient(ellipse at right bottom, dimgrey, grey, black, dimgrey, black, grey, dimgrey .22em, transparent .24em, transparent 100%), 
radial-gradient(ellipse at top, black, grey, dimgrey, black, dimgrey, grey, dimgrey 55%, transparent 60%, transparent 100%); 
background-size: .4em .35em, .4em .35em, .24em .6em, .24em .6em, 1em .17em; 
background-repeat: no-repeat; 
background-position: left top, right top, left bottom, right bottom, center top; 
}
</style>
<p><span class=spanCurtain></span> Curtain. ['cortinado' o 'telón de teatro'.]</p>


<style type="text/css">
.spanBed1 {position: relative; 
display: inline-block; 
border-style: solid; 
margin: 0 .85em .1em; 
border-width: .22em .08em .15em; 
background-color: black; 
width: .8em; height: .15em; 
border-color: transparent black; 
border-radius: 40% 0 0; 
background-clip: content-box; 
}
.spanBed1:before {content: ""; 
position: absolute; 
top: -.1em; left: .6em;
width: .2em; height: .1em; 
background-color: black; 
border-radius: 50%; 
}
</style>
<p><span class=spanBed1></span> Bed 1. [&#128719; (&amp;#128719;), símbolos de mapas y transportes 'cama'.]</p>


<style type="text/css"> /* 20/Sep/2014 21:27 */
.spanCouch {position: relative; 
display: inline-block; 
margin: 0 .8em .1em; 
width: .81em; 
/*width: .415em; this value for single couch */
height: .3em; 
border-style: solid; 
border-width: 0 .16em .18em; 
border-color: black; 
border-radius: .1em; 
}
.spanCouch::before {content: ""; 
position: absolute; 
width: .36em; height: .36em; 
left: .03em; top: -.15em; 
background-color: black; 
border-radius: .08em; 
box-shadow: -.16em .45em 0 -.1em black, .57em .45em 0 -.1em black, 
.39em 0 0 0 black; 
/*box-shadow: -.16em .45em 0 -.1em black, 
.2em .45em 0 -.1em black; this values for single couch */ ; 
}
.spanCouch::after {content: ""; 
position: absolute; 
width: .75em; 
/*width: .36em; this value for single couch */
height: .06em; 
left: .03em; bottom: .015em; 
background-color: black; 
border-radius: .03em; 
}
</style>
<p><span class=spanCouch></span> Couch. [&#128715; (&amp;#128715;), símbolos de mapas y transportes 'sofá'.]</p>


<style type="text/css">
.spanChair {position: relative; 
display: inline-block; 
margin: 0 1.1em .1em; 
width: .35em; height: .2em; 
border-style: solid; 
border-width: 0 .1em .4em; 
border-color: transparent black; 
border-radius: 15% 20% 0 0; 
background-color: black; 
background-clip: content-box; 
}
.spanChair:before {content: ""; 
position: absolute; 
top: -.4em; left: -.1em;
width: .1em; height: .4em; 
background-color: black; 
border-radius: .05em .05em 0; 
}
</style>
<p><span class=spanChair></span> Chair. [&#9281; (&amp;#9281;), OCR 'silla'; &#128186; (&amp;#128186;), símbolo 'butaca'.]</p>


<style type="text/css"> /* 7/May/2014 17:18 */
.spanTable {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 1em; 
width: .5em; height: .45em; 
border: solid .05em transparent; 
border-top-color: black; 
background-image: radial-gradient(circle at bottom, transparent 0, transparent .19em, black .2em, black .26em, transparent .27em, transparent 100%), 
linear-gradient(90deg, transparent, transparent .21em, black .22em, black .28em, transparent .29em, transparent 100%); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-position: 0 0; 
}
.spanTable:before {content: ""; 
position: absolute; 
width: .8em; height: .07em; 
left: -.15em; top: -.156em; 
background-color: black; 
border-radius: .1em; 
}
</style>
<p><span class=spanTable></span> Table. ['mesa'.]</p>


<style type="text/css"> /* 26/Oct/2014 19:22 */
.spanDesk {position: relative; 
display: inline-block; 
margin: 0 .85em; 
width: .9em; height: .6em; 
border-style: solid; 
border-width: .08em .06em 0; 
border-color: black; 
}
.spanDesk::before {content: ""; 
position: absolute; 
width: .35em; height: .33em; 
right: 0; top: 0; 
background-image: 
radial-gradient(circle, white, white .025em, transparent .025em, transparent 100%), 
linear-gradient(to top, black 0, black .085em, white .085em, white 100%); 
background-size: .11em .11em, 100% .11em; 
background-repeat: repeat-y; 
background-position: center top, 0 0; 
}
</style>
<p><span class=spanDesk></span> Desk. ['escritorio'.]</p>


<style type="text/css"> /* 22/Ago/2014 16:09 */
.spanSafeBox {position: relative; 
display: inline-block; 
margin: 0 .9em .05em; 
width: .7em; height: .45em; 
background-color: black; 
border: solid .1em black; 
border-radius: .12em; 
box-shadow: inset 0 0 0 .04em white; 
background-image: radial-gradient(circle, black, black .06em, white .07em, white .1em, black .11em, black 100%), 
repeating-linear-gradient(to right, transparent, transparent .05em, black .06em, black .08em), 
repeating-linear-gradient(white, white .05em, black .06em, black .08em); 
background-size: .2em .2em, .2em .2em, .2em .2em; 
background-repeat: no-repeat; 
background-position: .1em .12em, .4em .125em, .4em .125em; 
}
.spanSafeBox::before {content: ""; 
position: absolute; 
width: .32em; height: .1em; 
left: .05em; top: .5em; 
border-color: transparent black; 
border-style: solid; 
border-width: 0 .15em; 
}
</style>
<p><span class=spanSafeBox></span> Safe Box. ['caja de seguridad'.]</p>


<style type="text/css"> /* 20/Ago/2014 13:16 */
.spanBath {position: relative; 
display: inline-block; 
margin: 0 .75em .1em; 
width: 1em; height: .3em; 
background-color: black; 
border-style: double solid; 
border-width: .14em .1em 0; 
border-color: black transparent; 
border-radius: 0 0 .3em .3em; 
background-clip: content-box; 
}
.spanBath::before {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: .21em; top: .12em; 
border-color: black transparent transparent black; 
border-style: solid; 
border-width: .08em; 
transform: rotate(45deg); 
}
.spanBath::after {content: ""; 
position: absolute; 
width: .1em; height: .15em; 
left: .08em; top: -.35em; 
border-color: black transparent transparent black; 
border-style: solid; 
border-width: .07em; 
border-radius: .2em .2em 0 0; 
}
</style>
<p><span class=spanBath></span> Bath. [&#128704; (&amp;#128704;), símbolos de transportes y mapas 'bañera'.]</p>


<style type="text/css"> /* 2/Ago/2016 13:59 */
.spanMixerTap {position: relative; 
display: inline-block; 
margin: 0 1.2em 0 1em; 
width: .35em; height: .62em; 
back ground-color: black; 
border-radius: .1em 0 0 0; 
background-image: linear-gradient(silver, silver), 
linear-gradient(90deg, grey 1%, black); 
background-size: 100% .06em, 100% 100%; 
background-position: 0 .14em, 0 0; 
background-repeat: no-repeat; 
}
.spanMixerTap::before {content: ""; 
position: absolute; 
width: .6em; height: .08em; 
left: -.02em; top: .01em; 
background-color: black; 
background-clip: content-box; 
border-left: solid .1em transparent; 
border-radius: 0 .07em .02em 60%; 
transform: rotate(-5deg); 
transform-origin: 0 0; 
box-shadow: .28em .3em 0 .02em black; 
}
.spanMixerTap::after {content: ""; 
position: absolute; 
width: .14em; height: .32em; 
left: .85em; top: .31em; 
border-radius: 0 0 50% 50% / 0 0 50% 50%; 
background: 
radial-gradient(circle at top, black .07em, transparent .08em), 
radial-gradient(ellipse, silver .035em, transparent .045em) center .06em; 
background-size: 100% .076em, 60% .3em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanMixerTap></span> Mixer Tap. ['grifo monomando' o 'canilla monocomando'.]</p>



<style type="text/css"> /* 7/May/2014 16:11 */
.spanLamp1 {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 1em; 
width: .45em; height: .55em; 
border-color: transparent transparent black; 
border-style: solid; 
border-width: .05em .05em .1em .1em; 
border-radius: 50% 50% 0 0; 
box-shadow: inset .06em .04em 0 .025em black; 
}
.spanLamp1:before {content: ""; 
position: absolute; 
width: .6em; height: .15em; 
left: .09em; top: -.02em; 
background-color: black; 
border: solid .04em white; 
border-radius: .2em; 
-webkit-transform: rotate(55deg); 
transform: rotate(55deg); 
}
.spanLamp1:after {content: ""; 
position: absolute; 
width: .25em; height: .5em; 
left: .35em; top: -.07em; 
background-color: black; 
border-radius: .25em 0 0 .25em; 
-webkit-transform: rotate(55deg); 
transform: rotate(55deg); 
}
</style>
<p><span class=spanLamp1></span> Desktop Lamp. ['lámpara de escritorio'.]</p>


<style type="text/css"> /* 31/May/2014 16:05 */
.spanPlug1 {position: relative; 
display: inline-block; 
margin: 0 .8em .1em 1.1em; 
width: .24em; height: .4em; 
border-color: transparent silver transparent black; 
border-style: solid; 
border-width: 0 .22em 0 .35em; 
border-radius: .4em 0 0 .4em; 
background-image: linear-gradient(transparent, transparent 12%, goldenrod 12%, goldenrod 27%, transparent 27%, transparent 73%, goldenrod 73%, goldenrod 88%, transparent 88%, transparent 100%); 
background-size: 70% 100%; 
background-repeat: no-repeat; 
}
.spanPlug1::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .285em; top: .035em; 
background-color: black; 
border-radius: 50%; 
box-shadow: 0 .23em .001em 0 black; 
}
.spanPlug1::after {content: ""; 
position: absolute; 
width: .3em; height: .1em; 
left: -.6em; top: .14em; 
background-color: black; 
}
</style>
<p><span class=spanPlug1></span> Electrical Plug 1. [&#128268; (&amp;#128268;), símbolos varios y pictogramas 'ficha electricidad'.]</p>


<style type="text/css"> /* 7/Jul/2015 17:19 */
.spanPlug2 {position: relative; 
display: inline-block; 
margin: 0 1.7em 0 .6em; 
width: .32em; height: .4em; 
background-color: black; 
border-style: solid; 
border-width: .08em 0 .08em .08em; 
border-color: transparent; 
border-radius: 150% 0 0 150% / 100% 0 0 100%; 
box-shadow: .085em 0 0 -.015em black; 
background-clip: content-box; 
}
.spanPlug2::before {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: 1em; top: -.08em; 
background-color: inherit; 
border: inherit; 
border-width: .08em .08em .08em 0; 
border-radius: 0 150% 150% 0 / 0 100% 100% 0; 
box-shadow: -.085em 0 0 -.015em black; 
background-clip: inherit; 
}
.spanPlug2::after {content: ""; 
position: absolute; 
width: .45em; height: .08em; 
left: -.3em; top: .15em; 
background-color: black; 
border-radius: .08em; 
box-shadow: 1.5em 0 0 0 black, 1em -.09em 0 0 black, 1em .095em 0 0 black; 
}
</style>
<p><span class=spanPlug2></span> Electrical Plug 2. </p>


<style type="text/css"> /* 3/Sep/2016 12:25 */
.spanOldTV {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: .74em; height: .6em; 
background-image: radial-gradient(ellipse at bottom, black .07em, transparent .08em), 
linear-gradient(transparent .07em, black .08em); 
background-position: center top; 
background-size: .18em .07em, 100% 100%; 
background-repeat: no-repeat; 
}
.spanOldTV::before {content: ""; 
position: absolute; 
width: .18em; height: .17em; 
left: .26em; top: -.2em; 
border-style: solid; 
border-width: 0 .03em .03em 0; 
border-color: black; 
transform: rotate(45deg); 
}
.spanOldTV::after {content: ""; 
posi tion: relative; 
display: block; 
width: 80%; height: 70%; 
margin: .11em auto; 
line-height: 0; 
background-color: grey; 
border-radius: .1em; 
}
</style>
<p><span class=spanOldTV></span> Old TV. [&#128250; (&amp;#128250;), símbolos varios y pictogramas 'televisor (antiguo)'.]</p>


<style type="text/css"> /* 7/Oct/2015 17:54 */
.spanElecRingbell {position: relative; 
display: inline-block; 
margin: 0 1.1em .12em .95em; 
width: .5em; height: .5em; 
background-color: darkgrey; 
border: solid .025em grey; 
border-radius: 100%; 
box-shadow: inset .05em -.05em .06em .01em grey, inset 0 0 0 .2em gainsboro;
}
.spanElecRingbell::before {content: ""; 
position: absolute; 
width: .08em; height: .26em; 
left: .48em; top: .2em; 
border-style: solid; 
border-width: .08em .05em 0 0; 
border-color: black; 
border-radius: 0 100% 100% 0; 
transform: rotate(35deg); 
}
.spanElecRingbell::after {content: ""; 
position: absolute; 
width: .6em; height: .14em; 
left: 0; top: .48em; 
background-color: dimgrey; 
border-radius: .05em .06em 0 0; 
}
</style>
<p><span class=spanElecRingbell></span> Electrical Ringbell. [&#9086; (&amp;#9086;), técnicos varios 'campanilla eléctrica'.]</p>


<style type="text/css"> /* 12/Dic/2014 17:40 */
.spanIncandescentLamp {position: relative; 
display: inline-block; 
margin: 0 1.2em -.03em 1.1em; 
width: .3em; height: .26em; 
border-style: solid; 
border-width: .06em .06em .03em; 
border-color: black transparent transparent; 
border-radius: 0 0 80% 80%; 
background-image: 
radial-gradient(ellipse, black, black 70%, transparent 80%, transparent 100%), 
linear-gradient(black, black); 
background-size: 100% .08em, .1em .06em, 100% .4em; 
background-repeat: repeat-y, no-repeat; 
background-position: 0 0, center bottom; 
background-clip: content-box, border-box; 
background-origin: content-box, border-box; 
}
.spanIncandescentLamp::before {content: ""; 
position: absolute; 
width: .45em; height: .45em; 
left: -.125em; top: -.5em; 
border-style: solid; 
border-width: .05em; 
border-color: black black transparent; 
border-radius: 100%; 
}
.spanIncandescentLamp::after {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
left: -.04em; top: -.4em; 
border-style: solid; 
border-width: .04em; 
border-color: black transparent transparent; 
border-radius: 100%; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanIncandescentLamp></span> Incandescent Lamp. Electric Bulb. [&#128161; (&amp;#128161;), símbolos varios y pictogramas 'lámpara incandescente'.]</p>


<style type="text/css"> /* 12/Abr/2015 14:17 */
.spanCFL1 {position: relative; 
display: inline-block; 
margin: 0 1.2em .18em; 
width: .05em; height: .12em; 
border-style: solid; 
border-width: 0 .075em; 
border-color: darkgrey; 
}
.spanCFL1::before {content: ""; 
position: absolute; 
width: .2em; height: .088em; 
left: -.135em; top: -.33em; 
background-color: darkgrey; 
border-radius: .1em; 
box-shadow: -.03em .1em 0 0 darkgrey, .09em .1em 0 0 darkgrey, 
-.06em .2em 0 0 darkgrey, .07em .2em 0 0 darkgrey, 
-.09em .3em 0 0 darkgrey, .05em .3em 0 0 darkgrey; 
transform: rotate(345deg); 
}
.spanCFL1::after {content: ""; 
position: absolute; 
width: .27em; height: .11em; 
left: -.11em; top: .12em; 
border-style: solid; 
border-width: 0 .0em .12em; 
border-color: transparent; 
border-radius: .03em .03em .1em .1em / .03em .03em .2em .2em; 
background: 
repeating-linear-gradient(to bottom, silver 0, silver .015em, black .03em), 
linear-gradient(black, black), dimgrey; 
background-size: .15em .1em, .08em .03em, 100% 100%; 
background-repeat: no-repeat; 
background-position: center .1em, center bottom, 0 0; 
background-clip: border-box, border-box, content-box; 
background-origin: border-box, border-box, content-box; 
}
</style>
<p><span class=spanCFL1></span> Compact Fluorescent Lamp 1. ['lámpara fluorescente' o 'lámpara de bajo consumo'.]</p>


<style type="text/css"> /* 24/Abr/2015 11:10 */
.spanCFL2 {position: relative; 
display: inline-block; 
margin: 0 1.3em .3em 1.2em; 
width: .09em; height: .4em; 
background-color: lightgray; 
border-radius: .1em .1em 0 0; 
box-shadow: .125em 0 0 lightgray; 
}
.spanCFL2::before {content: ""; 
position: absolute; 
width: .265em; height: .15em; 
left: -.02em; top: .4em; 
border-style: solid; 
border-width: 0 0 .12em; 
border-color: transparent; 
border-radius: .03em .03em .1em .1em / .03em .03em .2em .2em; 
background: 
repeating-linear-gradient(to bottom, silver 0, silver .015em, black .03em), 
linear-gradient(grey, grey), darkgrey; 
background-size: .15em .1em, .075em .04em, 100% 100%; 
background-repeat: no-repeat; 
background-position: center .12em, center bottom, 0 0; 
background-clip: border-box, border-box, content-box; 
background-origin: border-box, border-box, content-box; 
}
</style>
<p><span class=spanCFL2></span> Compact Fluorescent Lamp 2. </p>


<style type="text/css"> /* 11/Oct/2015 15:34 */
.spanLantern {position: relative; 
display: inline-block; 
margin: 0 1.2em .17em .7em; 
width: .55em; height: .16em; 
background-color: black; 
border-style: solid; 
border-width: .09em .12em .09em 0; 
border-color: transparent black; 
border-radius: .15em 0 0 .15em; 
box-shadow: inset -.025em 0 0 0 white, .1em 0 0 -.025em black; 
background-clip: content-box; 
transform: rotate(15deg); 
transform-origin: right bottom; 
}
.spanLantern::before {content: ""; 
position: absolute; 
width: .6em; height: .4em; 
left: .72em; top: -.1em; 
border-radius: 0 .1em .1em 0 / 0 .2em .2em 0; 
background: linear-gradient(10deg, transparent 35%, rgba(255,215,0,.7) 40%) left bottom, 
linear-gradient(170deg, transparent 35%, rgba(255,215,0,.7) 40%); 
background-size: 100% 50.1%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanLantern></span> Electric Torch. Lantern [&#128294; (&amp;#128294;), símbolos varios y pictogramas 'linterna de mano'.]</p>


<style type="text/css"> /* 20/Dic/2017 19:33 */
.spanSewingMachine {position: relative; 
display: inline-block; 
margin: 0 .7em; 
width: .7em; height: .25em; 
background-image: linear-gradient(black, black), linear-gradient(black, black); 
background-size: .25em .22em, .03em .3em; 
background-repeat: no-repeat; 
background-position: -.03em -.1em, .1em -.08em; 
border-style: solid; 
border-width: .25em .35em .15em .1em; 
border-color: black black black transparent; 
border-radius: 40% 20% 10% 10% / 60% 20% 10% 10%; 
}
.spanSewingMachine::before {content: ""; 
position: absolute; 
width: .18em; height: 0; 
left: .45em; top: -.44em; 
border: solid .1em transparent; 
border-bottom: solid .08em black; 
}
.spanSewingMachine::after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .75em; top: -.05em; 
background-color: black; 
border: solid .05em white; 
border-radius: 100%; 
}
</style>
<p><span class=spanSewingMachine></span> Sewing Machine. ['máquina de coser'.]</p>


<style type="text/css"> /* 22/Sep/2014 10:32 */
.spanIron {position: relative; 
display: inline-block; 
margin: 0 .8em .05em; 
width: .65em; height: 0; 
border-style: ridge; 
border-width: 0 .1em .25em .3em; 
border-color: grey transparent; 
border-radius: 0 0 .3em .08em / 0 0 .15em .08em; 
}
.spanIron::before {content: ""; 
position: absolute; 
width: .38em; height: .2em; 
left: 0; top: -.27em; 
border-style: solid; 
border-width: .08em .18em .025em .1em; 
border-color: dimgrey dimgrey dimgrey transparent; 
border-radius: 0 .2em 0 0 / 0 .2em 0 0; 
}
.spanIron::after {content: ""; 
position: absolute; 
width: .2em; height: .07em; 
left: .14em; top: -.07em; 
background-color: black; 
}
</style>
<p><span class=spanIron></span> Iron. ['plancha'.]</p>


<style type="text/css"> /* 24/Nov/2014 16:36 */
.spanAirFan {position: relative; 
display: inline-block; 
margin: 0 1.1em -.03em; 
width: .4em; height: .6em; 
border: solid .04em transparent; 
border-bottom: solid .08em black; 
background: linear-gradient(90deg, transparent, transparent 45%, black 45%, black 55%, transparent 55%, transparent 100%) no-repeat left 0 bottom 0; 
background-size: 100% 50%; 
}
.spanAirFan::before {content: ""; 
position: absolute; 
width: .5em; height: .5em; 
left: -.08em; top: -.05em; 
border: solid .03em black; 
border-radius: 100%; 
background-image: 
radial-gradient(circle, black, black .03em, white .04em, white .06em, black .07em, black .08em, transparent .09em, transparent 100%), 
radial-gradient(circle at top, black, black .12em, transparent .13em, transparent 100%), 
radial-gradient(circle at bottom, black, black .12em, transparent .13em, transparent 100%), 
radial-gradient(circle at right, black, black .12em, transparent .13em, transparent 100%), 
radial-gradient(circle at left, black, black .12em, transparent .13em, transparent 100%); 
background-size: .2em .2em; 
background-repeat: no-repeat; 
background-position: center center, left .02em top .22em, right .02em bottom .22em, right .22em top .02em, left .22em bottom .02em; 
background-origin: content-box; 
transform: rotate(35deg); 
}
</style>
<p><span class=spanAirFan></span> Tabletop Fan. ['ventilador de mesa'.]</p>


<style type="text/css"> /* 3/Ago/2014 15:50 */
.spanNightLamp {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .06em; height: .4em; 
background-color: black; 
border-color: black transparent; 
border-style: solid; 
border-width: 0 .25em .06em; 
background-clip: content-box; 
}
.spanNightLamp::before {content: ""; 
position: absolute; 
width: 0; height: .17em; 
left: .16em; top: .1em; 
border-color: black; 
border-style: dotted; 
border-width: 0 .04em 0 0; 
}
.spanNightLamp::after {content: ""; 
position: absolute; 
width: .2em; height: 0; 
left: -.33em; top: -.25em; 
border-color: black transparent; 
border-style: solid; 
border-width: 0 .25em .4em; 
}
</style>
<p><span class=spanNightLamp></span> Night Lamp. ['velador' o 'lámpara de noche'.]</p>


<style type="text/css"> /* 1/Jun/2015 13:39 */
.spanPersonalScales {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: .8em; height: .75em; 
background-color: black; 
border-radius: .08em .08em .3em .3em / .16em .16em .5em .5em; 
box-shadow: inset 0 -.03em 0 .05em black; 
background-image: 
radial-gradient(ellipse, dimgrey, dimgrey 62%, black 65%, black 100%); 
background-size: .3em .4em, .4em 100%, 100% .4em; 
background-repeat: repeat-x; 
background-position: .1em .3em, .18em 0, 0 0; 
}
.spanPersonalScales::before {content: ""; 
position: absolute; 
width: .22em; height: .11em; 
left: .28em; top: .08em; 
background-color: white; 
border: none; 
border-top: solid .035em white; 
border-radius: 120% 120% 0 0; 
background-image: linear-gradient(70deg, white, white 30%, black 31%, black 39%, white 40%, white 100%); 
}
</style>
<p><span class=spanPersonalScales></span> Personal Bathroom Scales. ['balanza para baño'.]</p>


<style type="text/css"> /* 20/Nov/2015 16:07 */
.spanRazorBlade {position: relative; 
display: inline-block; 
margin: 0 .6em -.05em .7em; 
width: 1.1em; height: .7em; 
border-style: solid; 
border-width: 0 .1em; 
border-color: white; 
border-radius: .16em / .06em; 
background: linear-gradient(grey 3%, black 7%, black 93%, grey 97%); 
}
.spanRazorBlade::before {content: ""; 
position: absolute; 
width: 1.3em; height: .4em; 
left: -.15em; top: .1em; 
border-style: solid; 
border-width: .05em; 
border-color: transparent; 
border-radius: .21em; 
box-sizing: content-box; 
background: radial-gradient(circle, white 70%, transparent 75%) center center, 
radial-gradient(circle, white 70%, transparent 75%) right 20% center, 
radial-gradient(circle, white 70%, transparent 75%) 20% center, 
radial-gradient(ellipse, white 70%, transparent 75%) right 32% center, 
radial-gradient(ellipse, white 70%, transparent 75%) 32% center, 
radial-gradient(ellipse, white 70%, transparent 75%) right 12% center, 
radial-gradient(ellipse, white 70%, transparent 75%) 12% center, 
linear-gradient(white, white) center center, 
linear-gradient(black, black), 
linear-gradient(90deg, white 10%, transparent 10%, transparent 90%, white 90%) 0 -.05em; 
background-size: .11em .11em, .11em .11em, .11em .11em, .05em .18em, .05em .18em, .05em .18em, .05em .18em, 70% 10%, 100% 100%, 100% 130%; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanRazorBlade></span> Razor Blade. ['hoja de afeitar'.]</p>


<style type="text/css"> /* 18/May/2014 20:32 */
.spanComb {position: relative; 
display: inline-block; 
margin: 0 .85em .3em; 
width: .93em; height: .15em; 
border-color: black; 
border-style: solid; 
border-width: 0 .04em .12em; 
border-radius: 0 0 .1em .1em / 0 0 .06em .06em; 
background-image: repeating-linear-gradient(90deg, transparent, transparent .03em, black .03em, black .06em); 
background-position: center center; 
-webkit-transform: rotate(315deg); 
transform: rotate(315deg); 
}
</style>
<p><span class=spanComb></span> Comb. ['peine'.]</p>


<style type="text/css"> /* 11/Sep/2015 21:51 */
.spanToothbrush {position: relative; 
display: inline-block; 
margin: 0 1em .05em; 
width: .43em; height: 0; 
border-style: solid; 
border-width: .04em 0 .08em .1em; 
border-color: transparent black black; 
border-radius: .04em 0 0 .05em; 
box-shadow: -.3em 0 0 0 black; 
transform: rotate(340deg); 
transform-origin: -.3em 100%;
}
.spanToothbrush::after {content: ""; 
position: absolute; 
width: .34em; height: .1em; 
left: .442em; bottom: -.08em; 
border-style: solid; 
border-width: 0 0 .1em; 
border-color: black; 
border-radius: 0 0 .05em 0; 
background: 
repeating-linear-gradient(90deg, dimgrey 0, dimgrey .015em, transparent .03em) center no-repeat, lightgrey; 
background-size: 90% 100%; 
}
</style>
<p><span class=spanToothbrush></span> Toothbrush. ['cepillo de dientes'.]</p>


<style type="text/css"> /* 3/Sep/2014 13:00 */
.spanToiletPaper {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .6em; height: .7em; 
border-radius: .3em 0 0 0; 
box-shadow: inset .4em 0 0 0 silver; 
}
.spanToiletPaper::before {content: ""; 
position: absolute; 
width: .33em; height: .5em; 
left: .43em; top: .05em; 
border-radius: .3em .3em .3em 0 / .45em .4em .4em 0; 
background-image: radial-gradient(ellipse, grey 0, grey .05em, black .06em, black .075em, silver .09em, silver .155em, darkgrey .16em, darkgrey 100%); 
}
</style>
<p><span class=spanToiletPaper></span> Toilet Paper. ['rollo de papel higiénico'.]</p>


<style type="text/css"> /* 4/Sep/2015 17:12 */
.spanBathBrush {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .08em; height: .8em; 
border-style: solid; 
border-width: 0 .12em; 
border-color: transparent; 
border-radius: 0 0 .15em .15em; 
background: 
radial-gradient(ellipse, white .03em, black .04em), 
repeating-linear-gradient(0deg, black 0, black .04em, transparent .04em, transparent .07em), black; 
background-size: .05em .08em, 100% .3em; 
background-repeat: no-repeat; 
background-position: center top .03em, center bottom; 
background-clip: border-box, border-box, content-box; 
background-origin: border-box; 
}
</style>
<p><span class=spanBathBrush></span> Bath Brush. ['escobilla de baño'.]</p>


<style type="text/css"> /* 6/Mar/2015 18:46 */
.spanHairDryer {position: relative; 
display: inline-block; 
margin: 0 .8em .08em 1em; 
width: .55em; height: .5em; 
border-style: solid; 
border-width: .22em .08em 0 .18em; 
border-color: black transparent transparent black; 
border-radius: 50% 0 0 0; 
}
.spanHairDryer::before {content: ""; 
position: absolute; 
width: .21em; height: .21em; 
left: -.25em; top: -.25em; 
background-color: grey; 
border: solid .15em black; 
border-radius: 100%; 
}
.spanHairDryer::after {content: ""; 
position: absolute; 
width: .3em; height: .55em; 
left: -.12em; top: .145em; 
border-style: solid; 
border-width: .05em 0 .04em .06em; 
border-color: transparent transparent black black; 
border-radius: .4em 0 0 .2em / .5em 0 0 .2em; 
}
</style>
<p><span class=spanHairDryer></span> Hair Dryer. ['secador de cabello'.]</p>


<style type="text/css"> /* 20/Ago/2014 23:28 */
.spanAlarmClock {position: relative; 
display: inline-block; 
margin: 0 1.05em .03em; 
width: .45em; height: .45em; 
background-color: white; 
border: solid .06em black; 
border-radius: 100%; 
box-shadow: 0 -.035em 0 .0em white, -.16em -.24em 0 -.14em black, .16em -.24em 0 -.14em black; 
}
.spanAlarmClock::before {content: ""; 
position: absolute; 
width: .3em; height: .3em; 
left: .04em; top: .3em; 
border-color: black transparent transparent black; 
border-style: solid; 
border-width: .06em 0 0 .06em; 
z-index: -1; 
transform: rotate(45deg); 
}
.spanAlarmClock::after {content: ""; 
position: absolute; 
width: .1em; height: .16em; 
left: .2em; top: .05em; 
border-color: transparent transparent black black; 
border-style: solid; 
border-width: 0 0 .06em .06em; 
}
</style>
<p><span class=spanAlarmClock></span> Alarm Clock. [&#9200; (&amp;#9200;), técnicos varios 'reloj despertador'.]</p>


<style type="text/css"> /* 16/Jul/2014 21:58 */
.spanWatch {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .6em; height: .8em; 
background-image: radial-gradient(circle, white 0, white .16em, black .175em, black .22em, transparent .24em, transparent 100%), 
radial-gradient(ellipse, black, black .15em, transparent .15em, transparent 100%); 
background-size: 100% 100%, .3em 1.2em; 
background-repeat: no-repeat; 
background-position: -.03em 0, .13em -.2em; 
}
.spanWatch::before {content: ""; 
position: absolute; 
width: .06em; height: .08em; 
left: .202em; top: .297em; 
border-color: black; 
border-style: solid; 
border-width: 0 .05em .05em 0; 
}
.spanWatch::after {content: ""; 
position: absolute; 
width: .035em; height: .08em; 
left: .5em; top: .35em; 
background-color: black; 
border-radius: 0 .02em .02em 0; 
}
</style>
<p><span class=spanWatch></span> Watch. [&#8986; (&amp;#8986;), técnicos varios 'reloj de pulsera']</p>


<style type="text/css"> /* 23/Jul/2014 12:18 */
.spanCalculator {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .7em; 
background-color: black; 
border-radius: .05em; 
background-image: repeating-linear-gradient(to bottom, 
black 0, black .04em, transparent .04em, transparent .085em), 
linear-gradient(to left, 
white 0, white 20%, transparent 21%, transparent 27%, 
white 27%, white 47%, transparent 47%, transparent 54%, 
white 53%, white 73%, transparent 74%, transparent 80%, 
white 80%, white 100%); 
background-size: .4em .42em; 
background-repeat: no-repeat; 
background-position: center .23em; 
}
.spanCalculator::before {content: ""; 
display: block; 
width: .4em; height: .12em; 
margin: .06em auto; 
background-color: white; 
border-radius: .015em; 
}
</style>
<p><span class=spanCalculator></span> Pocket Calculator. [&#128425; (&amp;#128425;), símbolos varios y pictogramas 'calculadora de bolsillo'.]</p>


<style type="text/css"> /* 7/Mar/2015 9:57 */
.spanOldTelephone {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .64em; height: .38em; 
border-radius: .24em .24em 0 0; 
background-image: 
radial-gradient(circle, black, black .09em, white .1em, white .14em, black .15em, black 100%); 
}
.spanOldTelephone::before {content: ""; 
position: absolute; 
width: .22em; height: .1em; 
left: .2em; top: -.09em; 
background-color: black; 
border-radius: .2em .2em 0 0 / .1em .1em 0 0; 
}
.spanOldTelephone::after {content: ""; 
position: absolute; 
left: -.08em; top: -.21em; 
width: .4em; height: .06em; 
border-style: solid; 
border-width: .1em .2em .06em; 
border-color: black black transparent; 
border-radius: .13em .13em 0 0; 
}
</style>
<p><span class=spanOldTelephone></span> Old Black Telephone. [&#9742; (&amp;#9742;), símbolos varios 'teléfono negro'.]</p>


<style type="text/css"> /* 15/Dic/2014 13:48 */
.spanRemoteControl {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .4em; height: .4em; 
border-style: double; 
border-width: .18em; 
border-color: dimgrey transparent transparent; 
border-radius: 100%; 
transform: rotate(45deg); 
}
.spanRemoteControl::before {content: ""; 
position: relative; 
display: block; 
width: .125em; height: .12em; 
margin: .33em auto; 
background-color: black; 
border: outset .03em white; 
border-radius: .03em; 
box-shadow: 0 -.2em 0 -.07em silver; 
z-index: 2; 
}
.spanRemoteControl::after {content: ""; 
position: absolute; 
width: .3em; height: .45em; 
left: .05em; top: .12em; 
background-color: black; 
border-radius: .06em; 
}
</style>
<p><span class=spanRemoteControl></span> Remote Control. ['control remoto'.]</p>


<style type="text/css"> /* 14/Nov/2014 23:21 */
.spanOldKey {position: relative; 
display: inline-block; 
margin: 0 1.3em .2em 1em; 
width: .45em; height: .08em; 
background-color: black; 
border-radius: .03em; 
}
.spanOldKey::before {content: ""; 
position: absolute; 
width: .05em; height: .14em; 
left: .4em; top: -.03em; 
background-color: black; 
border-radius: .03em; 
box-shadow: .05em -.02em 0 0 black, .05em .02em 0 0 black, 
-.38em -.05em 0 0 black, -.34em -.024em 0 -.006em black, -.3em -.05em 0 0 black; 
}
.spanOldKey::after {content: ""; 
position: absolute; 
width: .4em; height: .44em; 
left: .48em; top: -.18em; 
background-image: 
radial-gradient(circle, transparent, transparent .05em, black .06em, black .1em, transparent .11em, transparent 100%), 
radial-gradient(circle, transparent, transparent .05em, black .06em, black .1em, transparent .11em, transparent 100%), 
radial-gradient(circle, transparent, transparent .05em, black .06em, black .1em, transparent .11em, transparent 100%), 
radial-gradient(circle, transparent, transparent .05em, black .06em, black .1em, transparent .11em, transparent 100%); 
background-size: .21em .21em; 
background-repeat: no-repeat; 
background-position: right center, left center, center top, center bottom; 
}
</style>
<p><span class=spanOldKey></span> Old Key. [&#128477; (&amp;#128477;), símbolos varios y pictogramas 'llave antigua'.]</p>


<style type="text/css"> /* 9/Ene/2015 11:48 */
.spanKeyHole {position: relative; 
display: inline-block; 
margin: 0 1.2em 0 1.1em; 
width: .25em; height: .33em; 
border-style: solid; 
border-width: 0 .08em .08em; 
border-color: black transparent; 
border-radius: 0 0 .1em .1em; 
background: 
linear-gradient(278deg, transparent, transparent .29em, black .31em, black .36em, transparent .38em, transparent 100%), 
linear-gradient(82deg, transparent, transparent .29em, black .31em, black .36em, transparent .38em, transparent 100%); 
background-origin: border-box; 
}
.spanKeyHole::before {content: ""; 
position: absolute; 
width: .24em; height: .24em; 
left: -.08em; top: -.27em; 
border-style: solid; 
border-width: .08em; 
border-color: black black transparent; 
border-radius: 60%; 
}
</style>
<p><span class=spanKeyHole></span> Key Hole. ['ojo de cerradura'.]</p>


<style type="text/css"> /* 22/Abr/2015 18:10 */
.spanTurnTable {position: relative; 
display: inline-block; 
margin: 0 .95em -.05em; 
width: .8em; height: .7em; 
background-color: silver; 
border: solid .03em black; 
border-width: ; 
border-color: ; 
border-radius: .06em; 
background-image: 
radial-gradient(circle, grey, grey .04em, black .045em, silver .055em, silver 100%), 
radial-gradient(circle, dimgrey, dimgrey .02em, darkorange .05em, darkorange .1em, black .13em, black .25em, grey .26em, grey .27em, gainsboro .28em, silver 100%); 
background-size: .1em .1em, 100% 100%; 
background-repeat: no-repeat; 
background-position: .05em .55em, -.05em -.025em; 
}
.spanTurnTable::before {content: ""; 
position: absolute; 
width: .1em; height: .4em; 
left: .59em; top: .1em; 
border-style: solid; 
border-width: 0 .04em .04em 0; 
border-color: transparent dimgrey; 
border-radius: 0 0 .2em 0; 
}
.spanTurnTable::after {content: ""; 
position: absolute; 
width: .06em; height: .11em; 
left: .66em; top: .48em; 
background-color: black; 
border -style: solid; 
border -width: 0 .007em .05em .007em; 
border -color: black silver; 
border-radius: .07em .07em 0 0; 
box- shadow: 0 .07em 0 0 black; 
transform: rotate(30deg); 
transform-origin: center top; 
}
</style>
<p><span class=spanTurnTable></span> Turntable. ['bandeja giradisco'.]</p>


<style type="text/css">
.spanPiano{position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .8em; height: .2em; 
border-style: solid; 
border-color: black; 
border-width: .25em .05em .03em; 
border-radius: .1em 0 .06em .06em / .3em 0 .06em .06em; 
background-color: white;
}
.spanPiano:before {content: ""; 
position: absolute; 
width: .5em; height: .25em; 
left: .339em; top: -.48em; 
background-color: black; 
border-radius: 60% 60% 0 0 / 90% 70% 0 0; 
}
.spanPiano:after {content: ""; 
position: absolute; 
width: .05em; height: .15em; 
left: .05em; top: 0; 
background-color: black; 
border-collapse: separate; 
box-shadow: .08em 0 0 0 black, .2em 0 0 0 black, 
.28em 0 0 0 black, .36em 0 0 0 black, 
.48em 0 0 0 black, .55em 0 0 0 black, 
.68em 0 0 0 black; 
}
</style>
<p><span class=spanPiano></span> Piano. [&#127929; (&amp;#127929;), símbolo 'teclado musical'.]</p>


<style type="text/css"> /* 8/Ago/2014 22:48 */
.spanTrumpet {position: relative; 
display: inline-block; 
margin: 0 .95em .2em; 
width: .65em; height: .09em; 
background-color: black; 
border-color: transparent transparent transparent black; 
border-style: solid; 
border-width: .22em 0 .22em .15em; 
border-radius: .2em 0 0 .2em; 
background-clip: content-box; 
}
.spanTrumpet::before {content: ""; 
position: absolute; 
width: .35em; height: .1em; 
left: .06em; top: .06em; 
border: solid .05em black; 
border-radius: .1em; 
}
.spanTrumpet::after {content: ""; 
position: absolute; 
width: .05em; height: .14em; 
left: 100%; top: -.03em; 
background-color: black; 
border-radius: 100% 0 0 100%; 
}
</style>
<p><span class=spanTrumpet></span> Trumpet. [&#127930; (&amp;#127930;), símbolos varios y pictogramas 'clarín', 'trompeta'.]</p>


<style type="text/css"> /* 15/Abr/2016 20:26 */
.spanSax {position: relative; 
display: inline-block; 
margin: 0 1.05em .16em; 
width: .18em; height: .48em; 
border-style: solid; 
border-width: .08em .18em 0 .12em; 
border-color: black black transparent transparent; 
border-top-right-radius: 62% 100%; 
transform: skewx(15deg); 
}
.spanSax::before {content: ""; 
position: absolute; 
width: .08em; height: .16em; 
left: .18em; top: .34em; 
border-style: solid; 
border-width: 0 .19em .14em .16em; 
border-color: black; 
border-radius: 0 0 .3em .3em; 
}
.spanSax::after {content: ""; 
position: absolute; 
width: .25em; height: .065em; 
left: .37em; top: .31em; 
background-color: black; 
border-radius: 100%; 
box-shadow: -.28em -.04em 0 -.01em black, 
-.29em -.12em 0 -.01em black, -.3em -.2em 0 -.01em black; 
}
</style>
<p><span class=spanSax></span> Saxophone. [&#127927; (&amp;#127927;), símbolos varios y pictogramas 'saxofón'.]</p>


<style type="text/css"> /* 20/Abr/2016 10:28 */
.spanXylophone {position: relative; 
display: inline-block; 
margin: 0 .6em 0 .9em; 
width: 1em; height: .6em; 
background: 
linear-gradient(to left bottom, white 45%, transparent 55%), 
radial-gradient(circle, white .035em, transparent .04em) center bottom, 
repeating-linear-gradient(to right, black 0, black .12em, white .12em, white .1535em) center top; 
background-size: 100% .14em, .15em .11em, 1em 100%; 
background-repeat: no-repeat, repeat-x; 
}
.spanXylophone::before {content: ""; 
position: absolute; 
width: 1em; height: .11em; 
left: 0; top: 0; 
background: 
radial-gradient(circle, white .035em, transparent .04em) center bottom repeat-x;
background-size: .15em .11em; 
transform: rotate(8deg); 
transform-origin: left bottom; 
}
.spanXylophone::after {content: ""; 
position: absolute; 
width: .4em; height: .05em; 
left: .9em; top: .06em; 
background-color: black; 
border-style: solid; 
border-width: .05em 0 .05em .1em; 
border-color: transparent black; 
border-radius: 40% 0 0 40%; 
background-clip: content-box; 
transform: rotate(35deg); 
}
</style>
<p><span class=spanXylophone></span> Xylophone. ['xilofón'.]</p>


<style type="text/css"> /* 23/Mar/2016 17:58 */
.spanElectricGuitar {position: relative; 
display: inline-block; 
margin: 0 1em 0 .8em; 
width: .75em; height: .56em; 
border-radius: 0 50% 50% 0 / 0 30% 30% 0; 
background-image: 
linear-gradient(grey, grey), radial-gradient(ellipse, black 65%, transparent 70%), 
radial-gradient(ellipse at right, transparent 32%, black 37%, black 65%, transparent 70%); 
background-size: .08em .22em, .5em 100%, .35em 86%; 
background-repeat: no-repeat; 
background-position: left .12em center, 0 0, right center; 
transform: rotate(340deg); 
}
.spanElectricGuitar::before {content: ""; 
position: absolute; 
width: .65em; height: .12em; 
left: .55em; top: .22em; 
background-color: black; 
}
.spanElectricGuitar::after {content: ""; 
position: absolute; 
width: .26em; height: .15em; 
left: 1.16em; top: .16em; 
border-style: solid; 
border-width: .05em 0; 
border-color: transparent; 
border-radius: 0 0 50% 0; 
background: 
repeating-linear-gradient(to right, black 0, black 10%, transparent 12%, transparent 40%), black; 
background-size: 80% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-position: .03em 0; 
background-clip: border-box, content-box; 
background-origin: border-box; 
}
</style>
<p><span class=spanElectricGuitar></span> Electric Guitar. [&#127928; (&amp;#127928;), símbolos varios y pictogramas 'guitarra (eléctrica)'.]</p>


<style type="text/css"> /* 23/Abr/2016 17:30 */
.spanAccordion {position: relative; 
display: inline-block; 
margin: 0 .75em; 
width: 1em; height: .68em; 
background-color: red; 
background-image: 
repeating-linear-gradient(to left, black 0, black .12em, grey .12em, grey .16em, black .18em); 
}
.spanAccordion::before {content: ""; 
position: absolute; 
width: .22em; height: .65em; 
left: -.09em; top: -.03em; 
border: solid .05em black; 
background: 
repeating-linear-gradient(transparent 0, transparent .054em, black .055em, black .11em) .1em 0, 
repeating-linear-gradient(white 0, white .07em, black .07em, black .094em); 
background-size: 60% 100%, 100% 100%; 
background-repeat: no-repeat; 
}
.spanAccordion::after {content: ""; 
position: absolute; 
width: .25em; height: .65em; 
left: 1em; top: -.03em; 
border: solid .05em black; 
background: 
radial-gradient(white .028em, white .03em, black .04em); 
background-size: .1em .1em; 
background-position: center; 
}
</style>
<p><span class=spanAccordion></span> Accordion. ['acordeón'.]</p>


<style type="text/css"> /* 29/Abr/2016 19:12 */
.spanTambourine {position: relative; 
display: inline-block; 
margin: 0 .7em -.1em .8em; 
width: 1.1em; height: .9em; 
}
.spanTambourine::before {content: ""; 
position: absolute; 
width: .22em; height: .22em; 
left: .45em; top: 0; 
background-color: dimgrey; 
border-radius: 100%; 
box-shadow: .26em .12em 0 0 dimgrey, .38em .36em 0 0 dimgrey, 
-.26em .12em 0 0 dimgrey, -.38em .36em 0 0 dimgrey; 
}
.spanTambourine::after {content: ""; 
position: absolute; 
width: .7em; height: .55em; 
left: .135em; top: .08em; 
border-style: solid; 
border-width: .08em .08em .13em; 
border-color: navy; 
border-radius: 100% 100% 75% 75%; 
box-shadow: inset 0 0 .05em .01em white, 0 0 .04em .01em white; 
}
</style>
<p><span class=spanTambourine></span> Tambourine. ['pandereta'.]</p>


<style type="text/css"> /* 10/May/2016 21:50 */
.spanSikus {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em 1em; 
width: .8em; height: .8em; 
background: 
linear-gradient(to left, black, grey), 
linear-gradient(to left, black, grey) .17em .1em, 
linear-gradient(to left, black, grey) .33em .2em, 
linear-gradient(to left, black, grey) .49em .3em, 
linear-gradient(to left, black, grey) .65em .4em; 
background-size: .14em 100%; 
background-repeat: no-repeat; 
}
.spanSikus::before {content: ""; 
position: absolute; 
width: .9em; height: .08em; 
left: -.05em; top: .56em; 
background-color: dimgrey; 
border-radius: .03em; 
}
</style>
<p><span class=spanSikus></span> Sikus. Syrinx. ['sikus' o 'siringa'.]</p>


<style type="text/css"> /* 26/Jul/2016 14:53 */
.spanGong {position: relative; 
display: inline-block; 
margin: 0 .8em -.03em 1em; 
width: .6em; height: .68em; 
border-style: solid; 
border-width: .06em .06em 0; 
border-color: maroon; 
background-image: 
radial-gradient(circle, darkgoldenrod 14%, gold 16%, gold 36%, goldenrod 40%, goldenrod 48%, transparent 50%), 
linear-gradient(maroon, maroon), 
linear-gradient(90deg, grey .05em, transparent .05em, transparent .15em, grey .15em); 
background-size: 100% 100%, 100% .05em, .2em .1em; 
background-repeat: no-repeat; 
background-position: center -.1em, 0 .5em, center 0; 
}
.spanGong::before, .spanGong::after {content: ""; 
position: absolute; 
width: .005em; height: .6em; 
left: -.15em; top: -.13em; 
background-color: ; 
border-style: solid; 
border-width: .14em .14em .1em; 
border-color: maroon transparent; 
border-radius: .1em .1em 0 0; 
}
.spanGong::after {left: .5em; 
background-image: 
linear-gradient(indianred, indianred), 
radial-gradient(ellipse, indianred 70%, transparent 75%); 
background-size: .035em .4em, .09em .1em; 
background-repeat: no-repeat; 
background-position: .18em 0, .16em .35em; 
background-origin: border-box; 
background-clip: border-box; 
}
</style>
<p><span class=spanGong></span> Gong. </p>


<style type="text/css"> /* 3/Jun/2015 21:58 */
.spanHarp {position: relative; 
display: inline-block; 
margin: 0 1em -.01em; 
width: .5em; height: .6em; 
border-style: solid; 
border-width: .06em .06em .1em .08em; 
border-color: black; 
border-radius: .1em .5em .7em .1em / .1em .2em .6em .1em; 
background-image: 
linear-gradient(80deg, black, black 12%, transparent 18%, transparent 100%), 
repeating-linear-gradient(80deg, transparent, transparent 4%, grey 6%, grey 8%, transparent 10%); 
background-repeat: no-repeat; 
transform: rotate(10deg); 
}
.spanHarp::before {content: ""; 
position: absolute; 
width: .2em; height: .06em; 
left: -.1em; top: .6em; 
background-color: black; 
border-style: solid; 
border-width: 0 .2em .1em; 
border-color: transparent transparent black; 
background-clip: content-box; 
transform: rotate(350deg); 
}
</style>
<p><span class=spanHarp></span> Harp. ['arpa'.]</p>


<style type="text/css"> /* 26/May/2016 19:26 */
.spanOilLamp {position: relative; 
display: inline-block; 
margin: 0 .6em 0; 
width: 1.2em; height: .3em; 
background-color: black; 
border-style: solid; 
border-width: .2em .25em .18em 0; 
border-color: transparent; 
border-radius: .5em .45em .5em 1em / .2em .3em .5em .6em; 
background: 
radial-gradient(ellipse, black .05em, transparent .07em), 
radial-gradient(ellipse at bottom, black .23em, transparent .25em), black; 
background-size: .16em .12em, .6em .15em; 
background-repeat: no-repeat; 
background-position: center -.02em, center .05em; 
background-clip: border-box, border-box, content-box; 
background-origin: border-box, border-box, content-box; 
}
.spanOilLamp::before {content: ""; 
position: absolute; 
width: .66em; height: .15em; 
left: .4em; top: .28em; 
background-color: black; 
border-radius: .5em .5em 0 0; 
}
.spanOilLamp::after {content: ""; 
position: absolute; 
width: .15em; height: .2em; 
left: 1.15em; top: -.14em; 
border: solid .08em black; 
border-radius: .2em .12em .2em .1em / .2em .12em .25em .1em; 
}
</style>
<p><span class=spanOilLamp></span> Oil Lamp. ['lámpara de aceite'.]</p>


<style type="text/css"> /* 24/Ene/2015 23:14 */
.spanBasket1 {position: relative; 
display: inline-block; 
margin: 0 .95em -.05em; 
width: .75em; height: .8em; 
}
.spanBasket1::before {content: ""; 
position: absolute; 
width: .64em; height: .8em; 
left: 0; top: 0; 
border: solid .06em black; 
border-radius: .4em / .4em .4em .6em .6em; 
clip: rect(0, .9em, .8em, 0); 
background-image: 
linear-gradient(black, black), 
repeating-linear-gradient(35deg, transparent, transparent .1em, black .11em, black .15em, transparent .16em), 
repeating-linear-gradient(325deg, silver, silver .1em, black .11em, black .15em, silver .16em), 
linear-gradient(black, black); 
background-position: 0 44%, center .35em, center .35em, left bottom; 
background-size: 100% .06em, 100% .35em, 100% .35em, 100% .1em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanBasket1></span> Basket 1. Shop. ['cesta', 'compras'.]</p>


<style type="text/css"> /* 27/Ago/2015 19:50 */
.spanBasket2 {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em .9em; 
width: .9em; height: .4em; 
border-top: solid .1em black; 
background: 
linear-gradient(80deg, white 22%, black 25%, black 40%, transparent 43%), 
linear-gradient(280deg, white 22%, black 25%, black 40%, transparent 43%) right top, 
repeating-linear-gradient(to top, black, black 20%, white 22%, white 34%, black 36%); 
background-size: 50% 100%, 50% 100%, 100% 100%; 
background-repeat: no-repeat; 
}
.spanBasket2::before , .spanBasket2::after {content: ""; 
position: absolute; 
width: .07em; height: .33em; 
left: .1em; bottom: .43em; 
background-color: black; 
border: solid .03em white; 
border-radius: 0 0 .12em .12em; 
transform: rotate(42deg); 
transform-origin: center bottom; 
}
.spanBasket2::after {left: auto; right: .1em; 
transform: rotate(331deg); 
}
</style>
<p><span class=spanBasket2></span> Basket 2. </p>


<style type="text/css"> /* 24/Mar/2014 14:50 */
.spanUmbrella {position: relative; 
display: inline-block; 
margin: 0 .95em .25em; 
width: .8em; height: .4em; 
border-radius: 1em 1em 0 0; 
background-image: radial-gradient(circle at bottom, transparent 0, transparent .13em, black .13em, black 100%); 
background-size: .2em 115%; 
background-repeat: repeat-x; 
background-position: 0 0; 
}
.spanUmbrella:before {content: ""; 
position: absolute; 
width: .16em; height: .75em; 
left: .21em; top: -.1em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .05em .05em .05em 0; 
border-radius: 0 0 .2em .2em / 0 0 .2em .3em; 
}
</style>
<p><span class=spanUmbrella></span> Umbrella. [&#9730; (&amp;#9730;), símbolos varios 'sombrilla', 'paraguas'.]</p>


<style type="text/css"> /* 27/Sep/2014 16:03 */
.spanWallet {position: relative; 
display: inline-block; 
margin: 0 1.1em .05em; 
width: .55em; height: .4em; 
background-color: black; 
border: dotted .035em white; 
border-radius: 0 .06em .06em .04em; 
box-shadow: 0 0 0 .1em black, 0 -.05em 0 .1em grey; 
}
.spanWallet::before {content: ""; 
position: absolute; 
width: .33em; height: .2em; 
right: -.15em; top: .085em; 
background-color: black; 
border: dotted .025em white; 
border-right: solid .025em black; 
border-radius: .1em 0 0 .1em; 
background: radial-gradient(circle, white, white .045em, black .06em, black 100%) -.07em 0; 
}
</style>
<p><span class=spanWallet></span> Wallet. ['billetera, cartera'.]</p>


<style type="text/css"> /* 6/Ene/2015 12:33 */
.spanBelt {position: relative; 
display: inline-block; 
margin: 0 1.8em .1em .45em; 
width: .2em; height: .25em; 
border: solid .06em grey; 
border-left-width: .08em; 
border-radius: .06em; 
}
.spanBelt::before {content: ""; 
position: absolute; 
width: .5em; height: .23em; 
left: .2em; top: .01em; 
background-color: black; 
border-style: solid; 
border-width: 0 .2em 0 .8em; 
border-radius: 0 .5em .5em 0 / 0 .2em .2em 0; 
background-image: radial-gradient(circle, white, white .03em, black .04em, black 100%);
background-size: .1em .1em; 
background-repeat: repeat-x; 
background-position: right center; 
}
.spanBelt::after {content: ""; 
position: absolute; 
width: .28em; height: .03em; 
left: -.05em; top: .115em; 
background-color: silver; 
border-radius: 50%; 
box-shadow: 0 0 0 .015em dimgrey; 
}
</style>
<p><span class=spanBelt></span> Belt. ['cinturón de vestir'.]</p>


<style type="text/css"> /* 19/Feb/2017 13:11 */
.spanGloves {position: relative; 
display: inline-block; 
margin: 0 .8em 0 1.2em; 
width: .4em; height: .7em; 
border-style: solid; 
border-width: .06em; 
border-color: transparent transparent darkgrey; 
border-radius: .2em .2em 0 0; 
background: 
repeating-linear-gradient(to right, transparent 0, transparent .09em, white .09em, white .12em, transparent .12em), darkgrey; 
background-size: 100% 40%; 
background-repeat: repeat-x; 
background-clip: content-box; 
background-origin: content-box; 
transform: rotate(30deg); 
}
.spanGloves::before {content: ""; 
position: absolute; 
width: .12em; height: .22em; 
left: .3em; top: .3em; 
background-color: darkgrey; 
box-shadow: -.25em .13em 0 -.01em grey; 
border-style: solid; 
border-width: .025em; 
border-color: white white transparent; 
border-radius: 100% 100% 0 0; 
transform: rotate(20deg); 
}
.spanGloves::after {content: ""; 
position: absolute; 
width: .4em; height: .7em; 
left: -.35em; top: .1em; 
border: inherit; 
border-bottom-color: grey; 
border-radius: inherit; 
background: inherit; 
background-color: grey; 
transform: rotate(-40deg); 
}
</style>
<p><span class=spanGloves></span> Gloves. ['guantes'.]</p>


<style type="text/css"> /* 10/Ago/2015 16:13 */
.spanFlipFlops {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .7em; height: .65em; 
}
.spanFlipFlops::before , .spanFlipFlops::after {content: ""; 
position: absolute; 
width: .3em; height: .63em; 
left: 0; top: 0; 
border-radius: .2em .2em .18em .18em / .2em .2em .4em .4em; 
background: 
linear-gradient(to top, grey .25em, transparent .1em), 
radial-gradient(ellipse, grey 40%, black 45%, black 60%, transparent 65%) center .03em,
linear-gradient(black, black) center .03em, grey; 
background-size: 100% 100%, .3em .5em, .05em .1em; 
background-repeat: no-repeat; 
box-shadow: 0 0 0 .02em black; 
}
.spanFlipFlops::after {
left: auto; right: 0; 
}
</style>
<p><span class=spanFlipFlops></span> Flip Flops. ['chancletas'.]</p>


<style type="text/css"> /* 25/Ago/2014 19:06 */
.spanSlippers {position: relative; 
display: inline-block; 
margin: 0 1.5em .4em .9em; 
width: .38em; height: .5em; 
background-color: black; 
border-radius: .2em .2em .15em .15em; 
box-shadow: .55em 0 0 0 black; 
}
.spanSlippers::before , .spanSlippers::after {content: ""; 
position: absolute; 
width: .14em; height: .2em; 
left: .038em; top: .35em; 
background-color: silver; 
border-style: solid; 
border-width: .085em; 
border-color: transparent black black; 
border-radius: .3em .3em .2em .2em; 
}
.spanSlippers::after {left: .605em; 
}
</style>
<p><span class=spanSlippers></span> Slippers. ['pantuflas'.]</p>


<style type="text/css"> /* 26/Ago/2014 17:51 */
.spanHighHeeledShoe {position: relative; 
display: inline-block; 
margin: 0 1.4em 0 .9em;
width: .45em; height: .18em; 
background-color: black; 
border-radius: .65em 0 .2em .08em / .25em 0 .2em .06em; 
}
.spanHighHeeledShoe::before {content: ""; 
position: absolute; 
width: .75em; height: .22em; 
left: .25em; top: -.215em; 
background-color: black; 
border-radius: 0 0 .3em .4em / 0 0 .3em .12em; 
transform: rotate(320deg); 
}
.spanHighHeeledShoe::after {content: ""; 
position: absolute; 
width: .2em; height: .47em; 
left: .74em; top: -.31em; 
border-radius: 0 .2em 0 0 / 0 .3em 0 0; 
background-image: linear-gradient(105deg, black 0, black 45%, transparent 55%, transparent 100%); 
}
</style>
<p><span class=spanHighHeeledShoe></span> High Heeled Shoe. [&#128096; (&amp;#128096;), símbolos varios y pictogramas 'calzado de taco alto', 'stiletto'.]</p>


<style type="text/css"> /* 10/Oct/2015 20:17 */
.spanSocks {position: relative; 
display: inline-block; 
margin: 0 1.3em 0 .9em; 
width: .3em; height: .65em; 
background-color: black; 
border-radius: .1em .1em .3em .3em; 
background-image: repeating-linear-gradient(to left, grey .05em, transparent .11em); 
background-size: 100% .18em; 
background-repeat: no-repeat; 
}
.spanSocks::before {content: ""; 
position: absolute; 
width: .65em; height: .3em; 
left: 0; bottom: 0; 
background-color: black; 
border-radius: .3em .5em .3em .3em / .3em .3em .3em .3em; 
transform: rotate(30deg); 
transform-origin: left center; 
box-shadow: .5em -.3em 0 0 black; 
}
.spanSocks::after {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: .58em; top: 0; 
border-radius: inherit; 
background: inherit; 
}
</style>
<p><span class=spanSocks></span> Socks. ['medias' o 'calcetines'.]</p>


<style type="text/css"> /* 16/Feb/2015 14:03 */
.spanHat {position: relative; 
display: inline-block; 
margin: 0 .85em .03em; 
width: .8em; height: .35em; 
background-color: black; 
border-style: solid; 
border-width: .01em 0 .18em .18em; 
border-color: transparent transparent grey; 
border-radius: .36em .25em .11em .1em; 
background-clip: content-box; 
}
.spanHat::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.15em; top: .27em; 
border-style: solid; 
border-width: .13em .53em; 
border-color: transparent black black transparent; 
border-radius: 0 .16em .16em .1em / 0 .13em .13em .1em; 
}
.spanHat::after {content: ""; 
position: absolute; 
width: .14em; height: .28em; 
left: -.14em; top: .22em; 
background-color: black; 
border-radius: .13em 0 0 .13em; 
transform: rotatez(40deg); 
}
</style>
<p><span class=spanHat></span> Hat. ['sombrero' o 'funyi'.]</p>


<style type="text/css"> /* 7/Feb/2015 20:10 */
.spanCap {position: relative; 
display: inline-block; 
margin: 0 1.2em 0 .8em; 
width: .7em; height: .25em; 
border: none; 
border-left: solid .07em transparent; 
border-radius: 0 0 1.2em 4em / 0 0 1.5em 2em; 
background: 
radial-gradient(ellipse, dimgrey, dimgrey .08em, transparent .1em, transparent), dimgrey; 
background-size: .2em .1em, 100% 100%; 
background-clip: border-box, content-box; 
background-origin: border-box;
background-repeat: no-repeat; 
transform: rotatez(350deg); 
}
.spanCap::before {content: ""; 
position: absolute; 
width: .8em; height: .5em; 
left: .35em; top: -.25em; 
background-color: grey; 
border-radius: 200% 200% 100% 100% / 300% 300% 50% 50%; 
transform: rotatez(25deg); 
}
</style>
<p><span class=spanCap></span> Cap. ['gorra'.]</p>


<style type="text/css"> /* 1/Jun/2015 16:10 */
.spanWorkoutWear {position: relative; 
display: inline-block; 
margin: 0 1.1em .22em; 
width: .38em; height: .42em; 
border: none; 
border-bottom: solid .05em black; 
background-image: 
radial-gradient(circle at top, transparent, transparent 30%, black 35%, black 100%), 
radial-gradient(ellipse at right top, transparent, transparent 65%, black 70%, black 100%), 
radial-gradient(ellipse at left top, transparent, transparent 65%, black 70%, black 100%), 
linear-gradient(110deg, black, black 30%, grey 30%, grey 40%, black 40%, black 50%, grey 50%, grey 60%, black 50%); 
background-size: 50% 55%, 26.8% 55%, 26.8% 55%, 100% 50%;
background-repeat: no-repeat; 
background-position: center 0, right top, 0 0, left bottom; 
}
.spanWorkoutWear::before {content: ""; 
position: absolute; 
width: .38em; height: .22em; 
left: 0; top: 120%; 
border-radius: 0 0 50% 50% / 0 0 100% 100%; 
background-image: 
radial-gradient(ellipse at right bottom, transparent, transparent 48%, black 50%, black 100%), 
radial-gradient(ellipse at left bottom, transparent, transparent 48%, black 50%, black 100%); 
background-size: 55% 100%;
background-repeat: no-repeat; 
background-position: right top, 0 0; 
}
</style>
<p><span class=spanWorkoutWear></span> Workout Wear. ['remera de corredor'; 'ropa deportiva'.]</p>


<style type="text/css"> /* 8/Sep/2014 17:03 */
.spanClothespins {position: relative; 
display: inline-block; 
margin: 0 .8em .15em .6em; 
width: .8em; height: .025em; 
background-color: white; 
border-style: solid; 
border-width: .18em .1em .18em .4em; 
border-color: black transparent; 
border-radius: .1em .08em .08em .1em / .1em .2em .2em .1em ; 
}
.spanClothespins::before {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .04em; top: -.075em; 
border: solid .035em silver; 
border-radius: 100%; 
box-shadow: .3em 0 0 -.04em white, .5em 0 0 0 white; 
}
.spanClothespins::after {content: ""; 
position: absolute; 
width: .4em; height: .03em; 
left: .1em; top: .06em; 
background-color: silver; 
border-radius: .02em; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanClothespins></span> Clothespins. ['broches para la ropa'.]</p>


<style type="text/css"> /* 7/Oct/2014 22:07 */
.spanClothesHanger {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .7em; height: .25em; 
border: solid .08em black; 
border-radius: .35em .35em 0 0; 
}
.spanClothesHanger::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .25em; top: -.35em; 
border-style: solid; 
border-width: .05em; 
border-color: black black transparent; 
border-radius: 100%; 
transform: rotate(45deg); 
}
.spanClothesHanger::after {content: ""; 
position: relative; 
width: .05em; height: .2em; 
margin: -.2em auto; 
display: block; 
background-color: black; 
}
</style>
<p><span class=spanClothesHanger></span> Clothes Hanger. ['percha para ropa'.]</p>


<style type="text/css"> /* 22/Sep/2014 11:28 */
.spanSafetyPin {position: relative; 
display: inline-block; 
margin: 0 .65em .15em; 
width: 1.4em; height: .25em; 
border: solid .05em black; 
border-left-color: transparent; 
border-radius: 1em / .3em; 
}
.spanSafetyPin::before {content: ""; 
position: absolute; 
width: .34em; height: .3em; 
right: -.1em; top: -.05em; 
border-style: solid; 
border-width: .03em .03em .03em 0; 
border-color: black; 
border-radius: 0 .3em .3em .2em; 
background-image: radial-gradient(ellipse at left, transparent, transparent .19em, black .21em, black 100%); 
background-size: .4em .2em; 
background-position: 0 center; 
}
.spanSafetyPin::after {content: ""; 
position: absolute; 
width: .16em; height: .16em; 
left: -.05em; top: 0; 
border: solid .05em black; 
border-radius: .2em; 
}
</style>
<p><span class=spanSafetyPin></span> Safety Pin. ['alfiler de gancho'.]</p>


<style type="text/css"> /* 4/Abr/2015 15:03 */
.spanThreadSpool {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .35em; height: .4em; 
border-style: solid; 
border-width: .1em .1em; 
border-color: maroon transparent; 
box-shadow: 0 .04em 0 0 maroon, 0 -.04em 0 0 maroon; 
background: 
repeating-linear-gradient(7deg, silver, silver .02em, gray .04em); 
background-clip: content-box; 
}
.spanThreadSpool::before {content: ""; 
position: absolute; 
width: .4em; height: .2em; 
left: 100%; top: 95%; 
border-style: solid; 
border-width: .03em .03em .03em 0; 
border-color: lightgrey lightgrey transparent transparent; 
border-radius: 0 100% 100% 0; 
}
.spanThreadSpool::after {content: ""; 
position: absolute; 
width: .04em; height: .8em; 
left: 170%; top: -.2em; 
background-image: 
radial-gradient(ellipse, gainsboro, gainsboro 70%, transparent 75%, transparent 100%), 
radial-gradient(ellipse, grey, grey 70%, transparent 75%, transparent 100%); 
background-position: center top .02em, center top -.15em; 
background-repeat: no-repeat; 
background-size: 50% .1em, 100% 120%; 
transform: rotate(15deg); 
}
</style>
<p><span class=spanThreadSpool></span> Thread Spool And Needle. ['carrete de hilo y aguja'.]</p>


<style type="text/css"> /* 27/Mar/2015 23:06 */
.spanButton {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 1em; 
width: .5em; height: .5em; 
background-color: lightgrey; 
border-style: solid; 
border-width: .06em .055em .055em .06em; 
border-color: silver; 
border-radius: 100%; 
box-shadow: inset .03em .03em .02em .0em rgba(0,0,0,.7), 
.025em .025em .0em .0em rgba(0,0,0,.5); 
}
.spanButton::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .145em; top: .145em; 
background-color: black; 
border-radius: 100%; 
box-shadow: .15em 0 0 0 black, 
0 .15em 0 0 black, .15em .15em 0 0 black; 
}
</style>
<p><span class=spanButton></span> Button. ['botón'.]</p>


<style type="text/css"> /*  */
.spanWoolBall {position: relative; 
display: inline-block; 
margin: 0 .95em; 
width: .7em; height: .7em; 
border-radius: 100%; 
box-shadow: inset -.08em -.08em .15em .01em rgba(0, 0, 0, .7); 
background: 
repeating-linear-gradient(90deg, grey 0, gainsboro .04em, dimgrey .07em) 50% 0, 
repeating-linear-gradient(140deg, grey 0, gainsboro .04em, dimgrey .07em); 
background-size: 50% 100%, 100% 100%; 
background-repeat: no-repeat; 
}
.spanWoolBall::before {content: ""; 
position: absolute; 
width: .4em; height: .1em; 
left: .4em; top: .53em; 
border-style: solid; 
border-width: .045em; 
border-color: transparent grey grey transparent; 
border-radius: 0 100% 100% 0; 
}
</style>
<p><span class=spanWoolBall></span> Wool Ball. ['ovillo de lana'.]</p>


<style type="text/css"> /* 26/May/2014 19:02 */
.spanExtinguisher {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .3em; height: .75em; 
background-color: red; 
border-radius: .2em; 
background-image: 
radial-gradient(circle at top, red, red .33em, burlywood .34em, burlywood .48em, red .49em, red 100%); 
}
.spanExtinguisher:before {content: ""; 
position: absolute; 
width: .15em; height: .07em; 
left: -.18em; top: -.1em; 
background-color: darkred; 
border-color: transparent grey transparent black; 
border-style: solid ridge solid solid; 
border-width: .05em .07em .05em .3em; 
border-radius: .1em .15em 0 .1em; 
background-clip: content-box; 
}
.spanExtinguisher:after {content: ""; 
position: absolute; 
width: .06em; height: .06em; 
left: .12em; top: -.15em; 
background-color: silver; 
border: solid .03em grey; 
border-radius: 50%; 
}
</style>
<p><span class=spanExtinguisher></span>  Extinguisher. ['matafuegos, extinguidor'.]</p>


<style type="text/css"> /* 11/Oct/2015 19:37 */
.spanFireHose {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: .8em; height: .8em; 
background-color: ; 
border: solid .03em red; 
border -radius: 100%; 
out line: solid .03em red; 
box- shadow: 0 0 .0em 1em lime; 
background-image: 
radial-gradient(circle, maroon .11em, red .12em, red .15em, transparent .17em), 
radial-gradient(circle, transparent .36em, maroon .36em), 
repeating-radial-gradient(circle at bottom, silver .05em, black .06em, silver .11em), 
repeating-radial-gradient(circle at top, silver .05em, black .06em, silver .11em); 
background-size: 100% 100%, 100% 100%, 100% 52%, 100% 52%; 
background-repeat: no-repeat; 
background-position: 0 0, 0 0, .06em 0, left bottom; 
background-clip: content-box; 
background-origin: ; 
}
.spanFireHose::before {content: ""; 
position: absolute; 
width: .04em; height: .12em; 
left: .025em; top: .1em; 
background-color: gold; 
border-style: solid; 
border-width: 0 .03em .12em; 
border-color: goldenrod transparent; 
border-radius: 90% 90% 0 0; 
background-clip: content-box; 
}
</style>
<p><span class=spanFireHose></span> Fire Hose. ['manguera contra incendio'.]</p>


<style type="text/css"> /* 1/Feb/2015 15:19 */
.spanCeilingFan {position: relative; 
display: inline-block; 
margin: 0 .77em -.1em; 
width: 1.1em; height: .8em; 
background: linear-gradient(black, black) no-repeat center top; 
background-size: .06em .35em; 
}
.spanCeilingFan::before {content: ""; 
position: absolute; 
width: 1.1em; height: 1.1em; 
left: 0; top: -.15em; 
border-radius: .1em; 
background-image: 
linear-gradient(45deg, transparent, transparent 40%, black 45%, black 55%, transparent 60%, transparent 100%), 
linear-gradient(-45deg, transparent, transparent 40%, black 45%, black 55%, transparent 60%, transparent 100%); 
transform: rotatex(70deg); 
z-index: -1; 
}
.spanCeilingFan::after {content: ""; 
display: block; 
margin: .44em auto; 
width: .28em; height: .08em; 
background-color: dimgrey; 
border: none; 
border-top: double .05em silver; 
border-radius: 0 0 .06em .06em; 
z-index: auto; 
}
</style>
<p><span class=spanCeilingFan></span> Ceiling Fan. ['ventilador de techo'.]</p>


<style type="text/css"> /* 31/Dic/2014 11:58 */
.spanAirCond {display: inline-block; 
margin: 0 .2em 0 1.6em; 
position: relative; 
width: .6em; height: .6em; 
border-style: solid; 
border-width: .06em .06em .06em .3em; 
border-color: black; 
border-radius:.06em; 
background: 
radial-gradient(ellipse at right, transparent, transparent 60%, black 62%, black 100%) right center, 
radial-gradient(ellipse at top, transparent, transparent 60%, black 62%, black 100%) center top, 
repeating-linear-gradient(black, black .02em, transparent .025em, transparent .078em), 
radial-gradient(ellipse at left, transparent, transparent 60%, black 62%, black 100%) left center, 
radial-gradient(ellipse at bottom, silver, silver 60%, black 62%, black 100%) center bottom; 
background-size: 51% 130%, 130% 51%, 100% 100%; 
}
.spanAirCond::before {content: ""; 
position: absolute; 
left: -1.7em; top: -.06em; 
width: 1.3em; height: .4em; 
border-radius: .25em .25em .1em .1em / .1em; 
background: 
linear-gradient(black, black) center top, 
repeating-linear-gradient(lightgrey, lightgrey .03em, transparent .03em, transparent .08em) center .12em, black; 
background-size: .12em .27em, 1em .25em; 
background-repeat: no-repeat; 
}
.spanAirCond::after {content: ""; 
position: absolute; 
left: -.6em; bottom: .05em; 
width: .25em; height: .15em; 
border-style: solid; 
border-width: 0 0 .08em .08em; 
border-color: black; 
border-radius: 0 0 0 .12em; 
}
</style>
<p><span class=spanAirCond></span> Air Conditioner (Split System). ['aire acondicionado (split)'.]</p>


<style type="text/css"> /* 3/Dic/2014 14:13 */
.spanLaundry {position: relative; 
display: inline-block; 
margin: 0 1em -.06em; 
width: .7em; height: .8em; 
border-radius: .06em .06em .08em .08em; 
background: 
linear-gradient(black, black) right top, 
radial-gradient(circle, white, white .04em, black .05em, black 100%) .035em 0, 
linear-gradient(to bottom, black 0, black .15em, white .15em, white .185em, black .185em, black 100%); 
background-size: .23em .15em, .15em .15em, 100% 100%; 
background-repeat: no-repeat, repeat-x, no-repeat; 
}
.spanLaundry::before {content: ""; 
display: block; 
margin: .27em auto; 
width: .3em; height: .3em; 
background-color: black; 
border: solid .07em white; 
border-radius: 100%; 
background: radial-gradient(circle at top, white, white .05em, transparent .056em, transparent 100%), 
linear-gradient(to bottom, white, white .13em, black .13em, black 100%); 
background-size: .1em .1em, 100% 100%; 
background-repeat: repeat-x, no-repeat; 
background-position: 0 center, 0 0; 
background-clip: content-box; 
transform: rotate(10deg); 
}
</style>
<p><span class=spanLaundry></span> Washing Machine. Laundry. ['lavarropas' o 'lavandería'.]</p>


<style type="text/css"> /* 22/Dic/2014 13:08 */
.spanMicroWave {position: relative; 
display: inline-block; 
margin: 0 .65em -.05em; 
width: 1.2em; height: .55em; 
border: solid .14em black; 
border-right-width: .1em; 
border-radius: .1em; 
background: 
radial-gradient(white, white .09em, transparent .1em, transparent 100%) right bottom, 
repeating-linear-gradient(90deg, transparent, transparent .06em, black .06em, black .09em) right top, 
repeating-linear-gradient(white, white .06em, black .06em, black .09em) right top, 
linear-gradient(black, black) right top; 
background-size: .25em .2em, .245em .28em, .245em .28em, .38em 100%; 
background-repeat: no-repeat; 
}
.spanMicroWave::before {content: ""; 
position: absolute; 
width: .7em; height: .25em; 
left: .07em; bottom: .0em; 
border: none; 
border-bottom: solid .08em black; 
background: 
radial-gradient(ellipse at top, black, black 70%, transparent 75%, transparent 100%); 
}
</style>
<p><span class=spanMicroWave></span> Microwave Kitchen. ['horno de microondas'.]</p>


<style type="text/css"> /* 13/Ago/2017 17:23 */
.spanKitchenExtr {position: relative; 
display: inline-block; 
margin: 0 .8em .28em; 
width: .24em; height: .24em; 
background-color: darkgrey; 
border-style: solid; 
border-width: 0 .36em .2em .36em; 
border-color: silver transparent; 
box-shadow: 0 .14em 0 0 darkgrey; 
background-clip: content-box; 
}
.spanKitchenExtr::before {content: ""; 
position: absolute; 
width: .06em; height: .06em; 
left: .26em; bottom: -.3em; 
background-color: gainsboro; 
border-radius: 100%; 
box-shadow: .1em 0 0 0 dimgrey, .2em 0 0 0 dimgrey; 
}
.spanKitchenExtr::after {content: ""; 
position: absolute; 
width: .7em; height: .2em; 
left: -.22em; top: .6em; 
background-image: 
radial-gradient(circle at left, transparent 45%, black 50%, black 55%, transparent 60%); 
background-size: .1em .1em; 
}
</style>
<p><span class=spanKitchenExtr></span> Kitchen Air Extractor. ['extractor de aire para cocina'.]</p>


<style type="text/css"> /* 16/Nov/2014 20:05 */
.spanStove {position: relative; 
display: inline-block; 
margin: 0 1.2em -.05em .9em; 
width: .6em; height: .6em; 
border: solid .03em black; 
border-radius: .06em; 
background-image: 
radial-gradient(circle, dimgrey, dimgrey .07em, gainsboro .075em, gainsboro .12em, black .125em, black .135em, white .14em, white 100%); 
background-size: 50% 50%; 
}
.spanStove::before {content: ""; 
position: absolute; 
width: .12em; height: 100%; 
left: 100%; top: -.025em; 
border: solid .03em black; 
border-radius: .04em; 
background-image: 
linear-gradient(gainsboro, gainsboro 12%, transparent 12%, transparent 88%, gainsboro 88%, gainsboro 100%), 
radial-gradient(circle at bottom, black, black 30%, transparent 35%, transparent 100%), 
linear-gradient(90deg, transparent, transparent 40%, gainsboro 40%, gainsboro 60%, transparent 60%, transparent 100%), 
radial-gradient(circle at top, black, black 30%, gainsboro 35%, gainsboro 100%); 
background-size: 100% 100%, 100% 20%; 
}
</style>
<p><span class=spanStove></span> Stove. ['anafe'.]</p>


<style type="text/css"> /* 22/Nov/2014 14:16 */
.spanRefrigerator {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .44em; height: .74em; 
border: solid .05em black; 
border-radius: .08em; 
box-shadow: -.11em .205em 0 -.175em black, .11em .205em 0 -.175em black; 
box-sizing: border-box; 
background-image: linear-gradient(white, white .2em, black .2em, black .245em, white .245em, white 100%); 
}
.spanRefrigerator::before , .spanRefrigerator::after {content: ""; 
position: absolute; 
width: .03em; height: .1em; 
left: .04em; top: .025em; 
border: solid .03em black; 
border-left-width: 0; 
}
.spanRefrigerator::after {height: .14em; 
top: .27em; 
}
</style>
<p><span class=spanRefrigerator></span> Refrigerator. ['heladera', 'refrigerador'.]</p>


<style type="text/css"> /* 25/Nov/2014 13:22 */
.spanElectricMixer {position: relative; 
display: inline-block; 
margin: 0 1.05em .27em; 
width: .38em; height: .1em; 
border-style: solid; 
border-width: .1em .22em .2em 0; 
border-color: transparent; 
border-radius: .1em .08em .07em .08em; 
background-image: 
linear-gradient(white, white), 
radial-gradient(circle at left, white, white .05em, black .06em, black 100%), 
linear-gradient(black, black); 
background-size: 100% 100%, .1em .1em; 
background-repeat: no-repeat; 
background-position: 0 0, .38em 0; 
background-clip: content-box, border-box, border-box; 
background-origin: content-box, content-box, border-box; 
}
.spanElectricMixer::before {content: ""; 
position: absolute; 
width: .1em; height: .15em; 
left: .35em; top: .5em; 
border-radius: .05em; 
box-shadow: 0 0 0 .025em black, .07em 0 0 0 white, .075em 0 0 .025em black; 
}
.spanElectricMixer::after {content: ""; 
position: absolute; 
width: .12em; height: .32em; 
left: .34em; top: .3em; 
border-style: solid; 
border-width: .05em .05em 0; 
border-color: black transparent; 
box-shadow: inset 0 .03em 0 .03em black; 
}
</style>
<p><span class=spanElectricMixer></span> Electric Mixer. ['batidora eléctrica de cocina'.]</p>


<style type="text/css"> /* 12/May/2014 13:01 */
.spanKitchenScale {position: relative; 
display: inline-block; 
margin: 0 .85em; 
width: .72em; height: .45em; 
background-color: black; 
border-color: black white white; 
border-style: solid; 
border-width: .18em .16em 0; 
border-radius: .1em .1em .3em .3em / .1em .1em .2em .2em; 
box-shadow: inset 0 -.035em 0 .07em white; 
}
.spanKitchenScale:before {content: ""; 
position: absolute; 
width: .05em; height: .03em; 
left: .13em; top: .14em; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: .02em .34em .02em .1em; 
}
</style>
<p><span class=spanKitchenScale></span> Kitchen Scale. ['balanza de cocina'.]</p>


<style type="text/css"> /* 10/Ene/2016 15:27 */
.spanElectricToaster {position: relative; 
display: inline-block; 
margin: 0 1.1em .25em; 
width: .4em; height: .4em; 
border: solid .03em maroon; 
border-radius: .08em; 
box-shadow: inset 0 0 .08em 0 maroon; 
background-color: moccasin; 
}
.spanElectricToaster::before {content: ""; 
position: absolute; 
width: 1em; height: .5em; 
left: -.22em; top: .2em; 
border-style: solid; 
border-width: 0 0 .06em; 
border-color: transparent; 
border-radius: .1em .1em .12em .12em; 
box-shadow: inset 0 0 0 .03em dimgrey; 
background: 
linear-gradient(90deg, transparent 40%, black 40%, black 60%, transparent 60%, transparent 100%), silver; 
background-size: .5em .06em, 100% 100%; 
background-repeat: repeat-x; 
background-position: left bottom; 
background-clip: border-box, content-box; 
background-origin: border-box; 
}
.spanElectricToaster::after {content: ""; 
position: absolute; 
width: .14em; height: .14em; 
left: .48em; top: .4em; 
background-color: transparent; 
border: solid .036em black; 
border-radius: 100%; 
background-image: 
linear-gradient(40deg, grey 40%, black 45%, black 55%, grey 60%); 
}
</style>
<p><span class=spanElectricToaster></span> Electric Toaster. ['tostador eléctrico'.]</p>


<style type="text/css"> /* 28/Ene/2015 18:26 */
.spanMate {position: relative; 
display: inline-block; 
margin: 0 1.2em .2em 1.4em; 
width: .05em; height: .3em; 
background-color: grey; 
border-style: solid; 
border-width: .3em .035em 0; 
border-color: grey transparent; 
background-clip: content-box; 
transform: rotatez(30deg); 
}
.spanMate::before {content: ""; 
position: absolute; 
width: .45em; height: .4em; 
left: -.18em; top: .05em; 
background-color: silver; 
border: none; 
border-top: solid .15em silver; 
border-radius: .2em / .2em .2em .3em .3em; 
box-shadow: inset .1em .05em .1em .1em dimgrey; 
clip: rect(.05em .45em .55em 0); 
transform: rotatez(330deg); 
}
</style>
<p><span class=spanMate></span> Mate. </p>


<style type="text/css">
.spanCofeeCup {position: relative; 
display: inline-block; 
background-color: black; 
margin: 0 .95em .2em; 
width: .8em; height: .5em; 
border-radius: 10% 10% 50% 50%; 
}
.spanCofeeCup:before {content: ""; 
position: absolute; 
top: .45em; left: -.1em; 
width: .8em; height: 0; 
border-style: solid; 
border-color: black transparent transparent; 
border-width: .1em; 
}
.spanCofeeCup:after {content: ""; 
position: absolute; 
top: .05em; left: -.2em; 
width: .1em; height: .1em; 
border-radius: 50%; 
border-color: black; 
border-width: .1em; 
border-style: solid; 
}
</style>
<p><span class=spanCofeeCup></span> Coffe Cup (Java). [&#9982; (&amp;#9982;), símbolo "taza de café"; &#127861; (&amp;#127861;), símbolo 'taza de té sin asa'.]</p>

<style type="text/css"> /* 20/Dic/2014 11:10 */
.spanTeaCup {position: relative; 
display: inline-block; 
margin: 0 .8em 0 .75em; 
width: 1.2em; height: .65em; 
border: none; 
border-bottom: solid .13em black; 
border-radius: 0 0 .4em .4em / 0 0 .1em .1em; 
background-image: 
radial-gradient(ellipse at top, black , black .5em, transparent .5em, transparent 100%); 
background-repeat: no-repeat; 
background-position: center .15em; 
}
.spanTeaCup::before {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
right: -.03em; top: .22em; 
border: solid .08em black; 
border-radius: 0 80% 100% 120%; 
}
.spanTeaCup::after {content: ""; 
position: absolute; 
width: .18em; height: .22em; 
left: .1em; top: .15em; 
border: none; 
border-top: solid .2em transparent; 
border-radius: .07em .07em 0 0 / .3em .3em 0 0; 
background-image: 
linear-gradient(silver, silver); 
background-size: .025em 100%; 
background-repeat: repeat-y; 
background-position: center 0; 
background-clip: border-box; 
box-shadow: inset 0 0 0 .025em lightgrey, inset 0 0 0 .1em black; 
}
</style>
<p><span class=spanTeaCup></span> Tea Cup. [&#127861; (&amp;#127861;), símbolos varios y pictogramas 'taza de té sin asa'; &#9982; (&amp;#9982;), símbolos varios 'taza con fondo negro'.]</p>


<style type="text/css">
.spanBeer {position: relative; 
display: inline-block; 
background-color: black; 
margin: auto 1.1em .1em 1em; 
width: .6em; height: .8em; 
border-radius: 20% / 40% 40% 20% 20%; 
}
.spanBeer:after {content: ""; 
position: absolute; 
top: .15em; left: -.25em; 
width: .1em; height: .2em; 
border-radius: 50% 20% 50% 40%; 
border-color: black; 
border-width: .1em; 
border-style: solid; 
}
</style>
<p><span class=spanBeer></span> Beer Mug. [&#127866; (&amp;#127866;), símbolo 'chop de cerveza'.]</p>

<style type="text/css">
.spanGoblet{position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .1em; height: .4em; 
background-color: gray; 
border-style: ridge solid solid; 
border-color: gray white; 
border-width: .3em .3em .1em; 
}
.spanGoblet:before {content: ""; 
position: absolute; 
width: .15em; height: .1em; 
left: .08em; top: -.22em; 
background-color: rgba(100, 180, 0, .7); 
border-radius: 50%; 
}
.spanGoblet:after {content: ""; 
position: absolute; 
width: .35em; height: .15em; 
left: -.45em; top: -.32em; 
border-radius: 20% 0; 
border-width: .05em; 
border-color: gray transparent transparent gray; 
border-style: solid;
-webkit-transform: rotate(50deg); 
transform: rotate(50deg); 
}
</style>
<p><span class=spanGoblet></span> Goblet (Cocktail Glass). [&#127864; (&amp;#127864;), símbolo 'copa de cóctel'.]</p>


<style type="text/css"> /* 26/Abr/2016 12:42 */
.spanWhiskey {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em 1em; 
width: .7em; height: .6em; 
background-color: rgba(220,220,220,.4); 
border-style: solid; 
border-width: 0 .03em .15em .03em; 
border-color: rgba(150,150,150,.7); 
border-radius: 0 0 .05em .05em / 0 0 .12em .12em; 
box-shadow: inset 0 -.3em 0 0 rgba(255, 180, 0, .6); 
background-clip: content-box; 
}
.spanWhiskey::before , .spanWhiskey::after {content: ""; 
position: absolute; 
width: .18em; height: .18em; 
left: .13em; top: .26em; 
background-color: rgba(255,255,255,.5); 
border-radius: .04em; 
box-shadow: 0 0 .02em .0em darkgrey; 
transform: rotate(15deg); 
}
.spanWhiskey::after {left: .45em; 
transform: rotate(50deg); 
}
</style>
<p><span class=spanWhiskey></span> Whiskey. ['vaso con güiski'.]</p>


<style type="text/css">
.spanWineGlass{position: relative; 
display: inline-block; 
margin: 0 1.2em .34em; 
width: .3em; height: .41em; 
background-color: black; 
border-radius: 17% 17% 53% 53% / 70% 70% 46% 46%; 
}
.spanWineGlass:before {content: ""; 
position: absolute; 
width: .06em; height: .2em; 
left: .125em; top: .41em; 
background-color: black; 
}
.spanWineGlass:after {content: ""; 
position: absolute; 
width: .3em; height: .05em; 
left: .02em; top: .6em; 
background-color: black; 
border-radius: 50%  50%  0  0; 
}
</style>
<p><span class=spanWineGlass></span> Wine Glass. [&#127863; (&amp;#127863;), símbolo 'copa de vino'.]</p>


<style type="text/css"> /* 21/Nov/2014 19:35 */
.spanCorkscrew {position: relative; 
display: inline-block; 
margin: 0 1.3em -.08em; 
width: .16em; height: .7em; 
border-style: solid; 
border-width: .07em 0 0 0; 
border-color: black; 
background-image: 
repeating-linear-gradient(18deg, transparent, transparent .05em, black .06em, black .09em, transparent .1em, transparent .12em), 
repeating-linear-gradient(342deg, transparent, transparent .05em, black .06em, black .09em, transparent .1em, transparent .12em); 
background-size: .16em .6em; 
background-repeat: no-repeat; 
background-position: 0 0, 0 .05em; 
transform: rotate(50deg); 
}
.spanCorkscrew::before {content: ""; 
position: absolute; 
width: .18em; height: .1em; 
left: -.235em; top: -.05em; 
background-color: black; 
border-style: solid; 
border-width: .035em .23em; 
border-color: transparent black; 
border-radius: .02em / .06em; 
background-clip: content-box; 
}
.spanCorkscrew::after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .0em; bottom: -.05em; 
background-color: transparent; 
border-radius: 0 100% 0 0; 
box-shadow: 0 -.05em 0 0 black; 
}
</style>
<p><span class=spanCorkscrew></span> Corkscrew. ['sacacorchos'.]</p>


<style type="text/css"> /* 21/Dic/2014 14:28 */
.spanBottle {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .1em; height: .25em; 
background-color: silver; 
border-style: solid; 
border-width: .19em 0 .12em .18em; 
border-color: black; 
border-radius: .18em .18em 0 0; 
}
.spanBottle::before {content: ""; 
position: absolute; 
width: .1em; height: .2em; 
left: -.095em; top: -.335em; 
background-color: black; 
border-style: solid; 
border-width: 0 .03em; 
border-color: transparent; 
box-shadow: 0 -.05em 0 0 black; 
background-clip: content-box; 
}
</style>
<p><span class=spanBottle></span> Bottle. ['botella'.]</p>


<style type="text/css"> /* 20/May/2014 17:53 */
.spanHotPot {position: relative; 
display: inline-block; 
margin: 0 .8em .22em; 
width: 1em; height: .1em; 
border: solid .05em black; 
border-radius: .1em; 
}
.spanHotPot:before {content: ""; 
position: absolute; 
width: .8em; height: .45em; 
left: .1em; top: -.12em; 
background-color: black; 
border-radius: .05em .05em .2em .2em; 
}
.spanHotPot:after {content: ""; 
position: absolute; 
width: .6em; height: .26em; 
left: .2em; top: -.43em; 
background-image: 
radial-gradient(circle at right, transparent 0, transparent .07em, black .09em, black .11em, transparent .13em, transparent 100%), 
radial-gradient(circle at left, transparent 0, transparent .07em, black .09em, black .11em, transparent .13em, transparent 100%); 
background-size: .2em .12em; 
background-repeat: repeat-x; 
background-position: .148em 0, 0 .122em; 
}
</style>
<p><span class=spanHotPot></span> Hot Pot. ['olla caliente'.]</p>


<style type="text/css"> /* 6/Ene/2017 17:38 */
.spanCheeseGrater {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.1em; 
width: .4em; height: .2em; 
border-style: solid; 
border-width: 0 .05em .6em; 
border-color: transparent white; 
box-shadow: inset 0 0 0 .05em black, inset 0 0 0 .2em white, 0 .05em 0 0 black; 
background-image: 
radial-gradient(ellipse, white 20%, transparent 30%), 
radial-gradient(ellipse, white 20%, black 30%); 
background-size: .12em .22em; 
background-repeat: repeat; 
background-position: center .1em, .09em 0; 
background-clip: border-box; 
}
</style>
<p><span class=spanCheeseGrater></span> Cheese Grater. ['rallador de queso'.]</p>


<style type="text/css"> /* 2/Sep/2014 21:36 */
.spanPancakeTurner {position: relative; 
display: inline-block; 
margin: 0 .7em .1em 1.45em; 
width: .55em; height: .5em; 
border-radius: .1em; 
box-shadow: inset 0 0 0 .08em black; 
background-image: 
linear-gradient(black 0, black 20%, transparent 20%, transparent 30%, black 30%, black 45%, transparent 45%, transparent 55%, black 55%, black 70%, transparent 70%, transparent 80%, black 80%, black 100%); 
}
.spanPancakeTurner::before {content: ""; 
position: absolute; 
width: .36em; height: .06em; 
left: -.37em; top: .16em; 
background-color: black; 
border-style: solid; 
border-width: .05em 0 .05em .06em; 
border-color: transparent black; 
border-radius: .05em 0 0 .05em; 
box-shadow: -.35em 0 0 0 black; 
background-clip: content-box; 
}
</style>
<p><span class=spanPancakeTurner></span> Pancake Turner. ['espátula para panqueques'.]</p>


<style type="text/css"> /* 17/May/2014 22:24 */
.spanSoupLadle {position: relative; 
display: inline-block; 
margin: 0 1.3em .1em 1.3em; 
width: .15em; height: .55em; 
border-color: black transparent transparent black; 
border-style: solid; 
border-width: .03em; 
border-radius: .12em .1em 0 0 / .55em .15em 0 0; 
}
.spanSoupLadle:before {content: ""; 
position: absolute; 
width: .25em; height: .15em; 
left: -.27em; top: .52em; 
background-color: black; 
border-radius: 0 0 .2em .2em; 
}
</style>
<p><span class=spanSoupLadle></span> Soup Ladle. ['cucharón de sopa'.]</p>


<style type="text/css"> /* 17/May/2014 23:02 */
.spanKitchenMixer {position: relative; 
display: inline-block; 
margin: 0 1.3em .4em; 
width: .08em; height: .35em; 
background-color: black; 
border-radius: .05em / .05em .05em .3em .3em; 
}
.spanKitchenMixer:before, .spanKitchenMixer:after {content: ""; 
position: absolute; 
width: .27em; height: .27em; 
left: -.08em; top: .4em; 
border: solid .03em black; 
border-radius: .7em 0 .5em .2em / .5em 0 .5em .2em; 
-webkit-transform: rotate(-55deg); 
transform: rotate(-55deg); 
}
.spanKitchenMixer:after {left: -.15em; 
border-radius: .5em 0 .5em .2em / .5em 0 .7em .2em; 
-webkit-transform: rotate(-35deg); 
transform: rotate(-35deg); 
}
</style>
<p><span class=spanKitchenMixer></span> Kitchen Mixer. ['batidor de cocina'.]</p>




<style type="text/css"> /* 6/Ene/2017 10:39 */
.spanKitchenColander {position: relative; 
display: inline-block; 
margin: 0 .6em .04em .8em; 
width: 1em; height: .5em; 
text-align: center; 
line-height: 0; 
border-style: solid; 
border-width: .08em; 
border-color: black transparent transparent transparent; 
border-radius: 0 0 100% 100% / 0 0 150% 150%; 
background-image: 
radial-gradient(circle, transparent 30%, black 40%); 
background-size: .1em .1em; 
background-clip: content-box; 
box-shadow: inset 0 .04em 0 .08em black; 
}
.spanKitchenColander::before {content: ""; 
display: block; 
width: .4em; height: 0; 
margin: .4em auto; 
border-style: solid; 
border-width: 0 .15em .2em; 
border-color: transparent transparent black; 
}
.spanKitchenColander::after {content: ""; 
position: absolute; 
width: 1em; height: .1em; 
left: -.2em; top: .06em; 
border-style: solid; 
border-width: 0 .2em; 
border-color: black; 
border-radius: .05em; 
}
</style>
<p><span class=spanKitchenColander></span> Kitchen Colander. ['colador de cocina'.]</p>


<style type="text/css"> /* 17/May/2014 22:04 */
.spanSkillet {position: relative; 
display: inline-block; 
margin: 0 1.3em .1em .9em; 
width: .6em; height: .25em; 
background-color: black; 
border-radius: 100% / 80% 80% 120% 120%; 
}
.spanSkillet:before {content: ""; 
position: absolute; 
width: .4em; height: .06em; 
left: .55em; top: .08em; 
background-color: black; 
border-radius: .25em .035em .035em .25em / .03em; 
}
.spanSkillet:after {content: ""; 
position: absolute; 
width: .55em; height: .1em; 
left: .025em; top: .025em; 
background-color: silver; 
border-radius: 100% / 120%; 
box-shadow: inset 0 .05em 0 0 grey; 
}
</style>
<p><span class=spanSkillet></span> Skillet, Pan. [&#127859; (&amp;#127859;), símbolos varios y pictogramas 'cocinando'.]</p>


<style type="text/css"> /* 7/Jul/2016 21:42 */
.spanMezzaluna {position: relative; 
display: inline-block; 
margin: 0 .6em; 
width: 1em; height: .1em; 
border-style: solid; 
border-width: 0 .15em .28em; 
border-color: grey transparent; 
border-radius: 0 0 1em 1em / 0 0 .6em .6em; 
}
.spanMezzaluna::before, .spanMezzaluna::after {content: ""; 
position: absolute; 
width: .13em; height: .32em; 
left: 0em; top: -.3em; 
background-color: maroon; 
border-style: solid; 
border-width: .05em; 
border-color: transparent transparent maroon; 
border-radius: 100%; 
background-clip: content-box; 
}
.spanMezzaluna::after {left: .78em; 
}
</style>
<p><span class=spanMezzaluna></span> Mezzaluna Knife. ['cuchilla medialuna de cocina'.]</p>


<style type="text/css"> /* 25/Nov/2014 17:17 */
.spanKettle {position: relative; 
display: inline-block; 
margin: 0 .95em -.03em; 
width: .76em; height: .8em; 
border: none; 
border-bottom: solid .05em black; 
background-image: 
radial-gradient(circle at bottom, black, black .37em, transparent .385em, transparent 100%), 
radial-gradient(circle, black, black .08em, transparent .095em, transparent .23em, black .25em, black .285em, transparent .295em, transparent 100%); 
background-repeat: no-repeat; 
background-position: 0 0, 0 -.01em; 
}
.spanKettle::before {content: ""; 
position: absolute; 
width: .16em; height: .12em; 
left: -.06em; top: .5em; 
background-color: black; 
transform: rotate(35deg); 
}
</style>
<p><span class=spanKettle></span> Kettle. ['pava de cocina'.]</p>


<style type="text/css"> /* 28/Nov/2014 10:39 */
.spanJug {position: relative; 
display: inline-block; 
margin: 0 1.2em 0 1.1em; 
width: .45em; height: .6em; 
background-color: black; 
border-radius: 0 0 .05em .05em; 
}
.spanJug::before {content: ""; 
position: absolute; 
width: .12em; height: .3em; 
left: .34em; top: .05em; 
border-style: solid; 
border-width: .12em .08em .06em .08em; 
border-color: black; 
border-radius: .1em .2em .12em .16em / .1em .12em .12em .16em; 
transform: rotate(350deg); 
}
.spanJug::after {content: ""; 
position: absolute; 
width: .15em; height: .2em; 
left: 0; top: .08em; 
background-color: black; 
transform: rotate(330deg); 
transform-origin: 0 100%; 
}
</style>
<p><span class=spanJug></span> Jug. ['jarra' o 'juguera'.]</p>


<style type="text/css"> /* 14/Jun/2015 11:16 */
.spanCoffeePot {position: relative; 
display: inline-block; 
margin: 0 1.1em 0 1em; 
width: .58em; height: .48em; 
border: solid .03em black; 
border-top-width: .05em; 
border-radius: .5em .5em .45em .45em / .6em .6em .4em .4em; 
box-shadow: inset 0 0 .025em .01em gainsboro; 
background-image: linear-gradient(gainsboro 50%, black 50%); 
}
.spanCoffeePot::before {content: ""; 
position: absolute; 
width: .29em; height: .06em; 
left: .04em; top: -.144em; 
background-color: black; 
border-style: solid; 
border-width: .09em .1em 0 .13em; 
border-color: black transparent; 
border-radius: .2em .12em 0 0 / .04em .12em 0 0; 
background-clip: content-box; 
transform: rotate(10deg); 
}
.spanCoffeePot::after {content: ""; 
position: absolute; 
width: .285em; height: .36em; 
left: .375em; top: -.1em; 
border-style: solid; 
border-width: .06em .08em .13em 0; 
border-color: black black transparent; 
border-radius: 0 60% 0 0 / 0 78% 0 0; 
transform: rotate(355deg); 
}
</style>
<p><span class=spanCoffeePot></span> Coffee Pot. ['jarra de café'.]</p>


<style type="text/css"> /* 17/Ago/2014 18:10 */
.spanJar {position: relative; 
display: inline-block; 
margin: 0 1.15em; 
width: .45em; height: .55em; 
background-color: black; 
border-radius: .12em; 
}
.spanJar::before {content: ""; 
position: relative; 
display: block; 
width: .32em; height: 0; 
margin: -.055em auto; 
border-color: grey transparent; 
border-style: ridge solid; 
border-width: .075em .01em 0; 
box-shadow: 0 -.075em 0 .01em black; 
}
.spanJar::after {content: ""; 
position: absolute; 
width: 50%; height: 46%; 
right: 0; top: .15em; 
background-color: grey; 
}
</style>
<p><span class=spanJar></span> Jar. ['frasco'.]</p>


<style type="text/css"> /* 25/Ene/2015 15:31 */
.spanMilkBottle {position: relative; 
display: inline-block; 
margin: 0 1.2em -.03em 1em; 
width: .3em; height: .6em; 
background-color: darkgrey; 
border: solid .07em grey; 
border-radius: .2em .2em .1em .1em / .5em .5em .1em .1em; 
background-image: 
radial-gradient(ellipse at top, darkgrey, darkgrey 50%, gainsboro 60%, gainsboro 100%), 
linear-gradient(gainsboro, gainsboro), 
radial-gradient(ellipse at bottom, gainsboro, gainsboro 50%, darkgrey 60%, darkgrey 100%); 
background-size: 55% .06em, 100% .3em, 55% .06em; 
background-repeat: no-repeat; 
background-position: right 0 top .3em, left bottom, 0 .25em; 
}
.spanMilkBottle::before {content: ""; 
display: block; 
width: 90%; height: .08em; 
margin: -.08em auto; 
background-color: black; 
border-radius: .05em; 
}
.spanMilkBottle::after {content: ""; 
position: absolute; 
width: .16em; height: .3em; 
left: .55em; bottom: -.07em; 
background-color: silver; 
border-style: solid; 
border-width: .03em .04em .04em; 
border-color: darkgrey; 
border-radius: 0 0 .1em .1em / 0 0 .05em .05em; 
background-image: 
radial-gradient(ellipse at top, silver, silver .06em, gainsboro .07em, gainsboro 100%), 
linear-gradient(gainsboro, gainsboro); 
background-size: 120% .05em, 120% .3em; 
background-repeat: no-repeat; 
background-position: center .12em; 
}
</style>
<p><span class=spanMilkBottle></span> Milk Bottle and Glass. ['botella de leche y vaso'.]</p>





<hr>



<style type="text/css">
.spanEgg {position: relative; 
display: inline-block; 
background-color: black; 
width: .55em; height: .8em; 
margin: 0 1.1em; 
border-radius: 50% / 60% 60% 40% 40%; 
}
.spanEgg:hover {
background-color: burlywood; 
}
</style>
<p><span class=spanEgg></span> Egg. ['huevo'.]</p>


<style type="text/css"> /* 23/Ago/2014 12:57 */
.spanRoastChicken {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1.1em; 
width: .75em; height: .65em; 
background-color: coral; 
border: solid .05em coral; 
border-radius: .55em .65em .3em .4em; 
box-shadow: inset -.032em .1em 0 -.05em wheat; 
box-sizing: border-box; 
}
.spanRoastChicken::before {content: ""; 
position: absolute; 
width: .4em; height: .12em; 
left: -.28em; top: .18em; 
background-color: tan; 
border-radius: .1em; 
transform: rotate(55deg); 
}
.spanRoastChicken::after {content: ""; 
position: absolute; 
width: .42em; height: .38em; 
left: -.15em; top: .21em; 
background-color: coral; 
border-color: wheat; 
border-style: solid; 
border-width: .03em 0 0 0; 
border-radius: 100%; 
box-shadow: -.325em -.305em 0 -.135em tan, -.225em -.385em 0 -.135em tan; 
}
</style>
<p><span class=spanRoastChicken></span> Roast Chicken. [&#127831; (&amp;#127831;), símbolos varios y pictogramas 'pata de ave cocida'.]</p>


<style type="text/css"> /* 4/Jun/2014 13:54 */
.spanFriedEgg {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .8em; height: .7em; 
background-color: azure; 
border-color: bisque burlywood burlywood bisque; 
border-style: solid; 
border-width: .0248em; 
border-radius: 50% 40% 70% 50% / 50% 40% 60% 50%; 
}
.spanFriedEgg::before {content: ""; 
position: absolute; 
width: .3em; height: .4em; 
left: -.12em; top: .15em; 
background-color: inherit; 
border-color: bisque; 
border-style: solid; 
border-width: 0 0 0 .0248em; 
border-radius: 100% 0 0 150% / 100% 0 0 80%; 
}
.spanFriedEgg::after {content: ""; 
position: absolute; 
width: .35em; height: .35em; 
left: .25em; top: .15em; 
background-color: yellow; 
border-radius: 50%; 
box-shadow: inset -.03em -.04em .05em 0 orange; 
}
</style>
<p><span class=spanFriedEgg></span> Fried Egg. [&#127859; (&amp;#127859;), símbolos varios y pictogramas 'cocinando', 'huevo frito'.]</p>


<style type="text/css">
.spanPizza {position: relative; 
display: inline-block; 
width: 0; height: 0; 
border-radius: .4em .4em 0 0; 
margin: 0 1em 0; 
border-style: solid; 
border-color: tan transparent; 
border-width: .8em .4em 0; 
transform: rotate(35deg); 
}
.spanPizza:before {content: ""; 
position: absolute; 
left: -.34em; top: -.7em; 
width: 0; height: 0; 
border-radius: .4em .4em 0 0; 
border-style: solid; 
border-color: bisque transparent; 
border-width: .7em .34em 0; 
}
.spanPizza:after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
background-color: green; 
left: -.1em; top: -.25em; 
box-shadow: 0 -.3em 0 0 green, -.05em -.22em 0 0 green, 
.07em -.16em 0 0 green, 0 -.35em 0 0 green, 
.02em -.28em 0 .12em tomato; 
border-radius: 50%; 
}
</style>
<p><span class=spanPizza></span> Slice of Pizza. [&#127829; (&amp;#127829;), símbolos varios 'porción de pizza'.]</p>


<style type="text/css"> /* 21/Sep/2014 14:56 */
.spanSpaghetti {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: 1.15em; height: .5em; 
border: none; 
border-bottom: solid .1em grey; 
border-radius: 0 0 .1em .1em; 
box-shadow: inset 0 -.03em 0 0 white; 
background-image: radial-gradient(ellipse at bottom, transparent, transparent .15em, white .15em, tan .19em, white .2em, tan .24em, white .25em, tan .29em, white .3em, transparent .3em, transparent 100%), 
repeating-radial-gradient(circle at bottom, white 0, white .01em, tan .05em), 
radial-gradient(ellipse at bottom, transparent 0, transparent .15em, white .15em, tan .19em, white .2em, tan .24em, white .25em, tan .29em, white .3em, tan .34em, white .35em, white 100%), 
repeating-radial-gradient(circle at bottom, white 0, white .01em, tan .05em); 
background-repeat: no-repeat; 
background-size: .65em .3em, 
.35em .2em, 
.75em .4em, 
.35em .2em; 
background-position: left .05em bottom 0, 
left .15em bottom 0, 
left .35em bottom 0, 
left .65em bottom 0; 
}
.spanSpaghetti::before {content: ""; 
position: absolute; 
width: .2em; height: .6em; 
left: .85em; top: -.15em; 
border-bottom-left-radius: .1em .15em; 
background-image: radial-gradient(ellipse at bottom, transparent, transparent .04em, slategray .05em, slategray .055em, transparent .07em, transparent 100%), 
linear-gradient(to left, transparent, transparent 35%, slategray 50%, transparent 65%, transparent 100%), 
linear-gradient(to left, transparent, transparent 25%, slategray 50%, transparent 75%, transparent 100%); 
background-size: .18em .25em, 100% 100%, 100% 50%; 
background-position: center bottom 0, center 0, center 0; 
background-repeat: no-repeat; 
transform: rotate(40deg); 
}
</style>
<p><span class=spanSpaghetti></span> Spaghetti Bowl. [&#127837; (&amp;#127837;), símbolos varios y pictogramas 'fuente con espaguetis'.]</p>


<style type="text/css"> /* 19/Mar/2015 22:52 */
.spanMussel {position: relative; 
display: inline-block; 
margin: 0 .7em -.03em .9em; 
width: .9em; height: .6em; 
border: solid .03em dimgrey; 
border-radius: 100% 50% 90% 20%; 
box-shadow: inset 0 0 .1em .03em grey; 
background-image: 
radial-gradient(ellipse, gainsboro, orange 35%, silver 45%, silver 100%); 
background-position: center; 
}
.spanMussel::before {content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: -.05em; top: 0; 
border-radius: inherit; 
box-shadow: inset -.1em -.1em .3em -.03em black; 
background-image: 
repeating-radial-gradient(ellipse at left, grey, grey .15em, dimgrey .2em, silver .23em, grey .25em); 
background-size: 80% 120%; 
transform: rotate(-20deg); 
transform-origin: 0 100%; 
}
</style>
<p><span class=spanMussel></span> Mussel. ['mejillón'.]</p>


<style type="text/css"> /* 6/Dic/2015 22:44 */
.spanCheesseSlice {position: relative; 
display: inline-block; 
margin: 0 .9em -.08em; 
width: .8em; height: .8em; 
background-color: navajowhite; 
border-radius: .1em; 
overflow: hidden; 
}
.spanCheesseSlice::before {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: -.04em; top: .15em; 
background-color: white; 
border-radius: 100%; 
box-shadow: .7em .4em 0 0 white, .4em -.2em 0 -.02em white, 
.1em .34em 0 -.025em white, .3em .2em 0 -.04em white, .55em .13em 0 -.03em white; 
}
</style>
<p><span class=spanCheesseSlice></span> Cheesse Slice. [&#129472; (&amp;#129472;), símbolos suplementarios y pictogramas 'porción de queso'; 'feta de queso'.]</p>


<style type="text/css"> /* 14/Sep/2014 19:02 */
.spanHotDog {position: relative; 
display: inline-block; 
margin: 0 1em .1em; 
width: .8em; height: .4em; 
background-color: sandybrown; 
border-radius: .15em; 
}
.spanHotDog::before {content: ""; 
position: absolute; 
width: 1em; height: .16em; 
left: -.1em; top: .12em; 
border-radius: .1em; 
background-image: 
radial-gradient(ellipse at bottom, transparent, transparent .05em, yellow .05em, yellow .09em, transparent .09em, transparent 100%), 
radial-gradient(ellipse at top, transparent, transparent .05em, yellow .05em, yellow .09em, transparent .09em, transparent 100%), 
linear-gradient(to bottom, salmon, lightcoral, salmon); 
background-size: .3em .08em, .3em .08em, 100% 100%; 
background-repeat: repeat-x; 
background-position: 0 0, .15em .08em; 
box-shadow: inset .07em 0 0 0 salmon, inset -.07em 0 0 0 salmon; 
}
</style>
<p><span class=spanHotDog></span> Hot Dog. ['salchicha en pan'.]</p>


<style type="text/css">
.spanHamburger1 {position: relative; 
display: inline-block; 
width: 1em; height: .15em; 
border-radius: .1em; 
margin: 0 .9em .4em; 
background-color: black; 
}
.spanHamburger1:before {content: ""; 
position: absolute; 
width: 1em; height: .3em; 
background-color: silver; 
left: 0; top: -.3em; 
border-radius: 50% 50% 20% 20%; 
}
.spanHamburger1:after {content: ""; 
position: absolute; 
width: 1em; height: .3em; 
background-color: silver; 
left: 0; top: .15em; 
border-radius: 20% 20% 50% 50%; 
}
</style>
<p><span class=spanHamburger1></span> Hamburger 1. [&#127828; (&amp;#127828;), símbolo 'hamburguesa'.]</p>


<style type="text/css"> /* 12/Oct/2014 14:02 */
.spanHamburger2 {position: relative; 
margin: 0 .9em .05em; 
display: inline-block; 
width: 1em; height: .12em; 
border-style: solid; 
border-color: goldenrod; 
border-width: .3em 0; 
border-radius: .4em / .2em; 
}
.spanHamburger2:before {content: ""; 
margin: 0 auto; 
display: block; 
width: .9em; height: .12em; 
background-color: maroon; 
border-radius: .05em; 
}
.spanHamburger2:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
border-style: solid; 
border-width: .2em .3em 0; 
border-color: yellow transparent transparent; 
left: .2em; top: 0; 
}
</style>
<p><span class=spanHamburger2></span> Hamburger 2. </p>


<style type="text/css"> /* 9/Mar/2015 16:08 */
.spanEmpanada {position: relative; 
display: inline-block; 
margin: 0 .5em -.05em .9em; 
width: 1em; height: .5em; 
border-style: solid; 
border-width: .14em .12em 0; 
border-color: transparent; 
border-radius: 1em 1em .15em .15em; 
box-shadow: inset 0 .05em .15em .07em gold; 
background: 
linear-gradient(sandybrown, sandybrown), 
repeating-radial-gradient(circle, gold, goldenrod .1em, darkgoldenrod .14em, gold .18em); 
background-size: 100% 100%, 250% 200%; 
background-clip: content-box, border-box; 
background-origin: content-box, border-box; 
transform: rotatez(345deg); 
transform-origin: 0 100%; 
}
</style>
<p><span class=spanEmpanada></span> Empanada. </p>


<style type="text/css">
.spanBread1 {position: relative; 
display: inline-block; 
width: .8em; height: .6em; 
border-radius: .3em .3em .2em .2em; 
margin: 0 1em; 
background-color: white; 
box-shadow: 0 0 0 1px black; 
}
.spanBread1:before {content: ""; 
position: absolute; 
width: .8em; height: .3em; 
background-color: white; 
left: 0; top: -.2em; 
border-radius: 50% 50% 20% 20%; 
box-shadow: 0 0 0 1px black; 
}
.spanBread1:after {content: ""; 
position: absolute; 
width: .675em; height: .1em; 
background-color: white; 
left: .06em; top: .05em; 
}
</style>
<p><span class=spanBread1></span> Sliced Bread 1. [&#127838; (&amp;#127838;), símbolo 'pan' o 'rebanada de pan de molde'.]</p>


<style type="text/css">
.spanBread2 {position: relative; 
display: inline-block; 
width: .8em; height: .6em; 
border-radius: .3em .3em .2em .2em; 
margin: 0 1em; 
background-color: gray; 
}
.spanBread2:before {content: ""; 
position: absolute; 
width: .8em; height: .3em; 
background-color: gray; 
left: 0; top: -.2em; 
border-radius: 50% 50% 20% 20%; 
}
</style>
<p><span class=spanBread2></span> Sliced Bread 2. </p>


<style type="text/css">
.spanBread3 {position: relative; 
display: inline-block; 
width: .55em; height: .4em; 
border-radius: .21em .21em .15em .15em; 
margin: 0 1.1em .1em; 
background-color: white; 
box-shadow: 0 0 0 1px chocolate, 6px -6px 0 1px sandybrown, 5px -5px 0 1px sandybrown, 
4px -4px 0 1px sandybrown, 3px -3px 0 1px sandybrown, 
2px -2px 0 1px sandybrown, 1px -1px 0 1px sandybrown; 
}
.spanBread3:before {content: ""; 
position: absolute; 
width: .55em; height: .21em; 
background-color: white; 
left: 0; top: -.15em; 
border-radius: 50% 50% 20% 20%; 
box-shadow: 0 0 0 1px chocolate, 6px -6px 0 1px sandybrown, 5px -5px 0 1px sandybrown, 
4px -4px 0 1px sandybrown, 3px -3px 0 1px sandybrown, 
2px -2px 0 1px sandybrown, 1px -1px 0 1px sandybrown; 
}
.spanBread3:after {content: ""; 
position: absolute; 
width: .425em; height: .1em; 
background-color: white; 
left: .06em; top: .05em; 
}
</style>
<p><span class=spanBread3></span> Bread 1. [&#127838; (&amp;#127838;), símbolo 'pan de molde'.]</p>


<style type="text/css"> /* 4/Jun/2014 14:58 */
.spanBread4 {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: 1em; height: .6em; 
background-color: gold; 
border-radius: 150% 110% 150% 100%/ 150% 90% 150% 80%; 
box-shadow: inset -.05em -.05em .15em 0 goldenrod, inset 0 0 .1em .1em gold; 
background-image: linear-gradient(-15deg, gold, gold 45%, transparent 45.5%, transparent 100%), 
radial-gradient(transparent, transparent 40%, peru 40.5%, peru 46%, transparent 48.5%, transparent 60%, peru 65.5%, peru 69%, transparent 70.5%, transparent 80%, peru 80.5%, peru 85%, transparent 85.5%, transparent 100%); 
background-size: 100% 100%, 120% 120%; 
background-position: 0 0, -.4em .08em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanBread4></span> Bread 2. ['pan'.]</p>


<style type="text/css"> /* 30/Jul/2014 14:34 */
.spanCroissant {position: relative; 
display: inline-block; 
margin: 0 .85em -.05em 1.1em; 
width: .8em; height: .5em; 
border-color: orange transparent; 
border-style: solid; 
border-width: .2em .025em 0; 
border-radius: 100%; 
transform: rotate(320deg); 
}
.spanCroissant::before {content: ""; 
display: block; 
width: .6em; height: .5em; 
margin: -.25em auto; 
border-color: coral transparent; 
border-style: solid; 
border-width: .24em .1em 0; 
border-radius: 100%; 
}
.spanCroissant::after {content: ""; 
display: block; 
width: .32em; height: .34em; 
margin: -.83em auto; 
border-color: chocolate transparent; 
border-style: solid; 
border-width: .34em .14em 0; 
border-radius: 120% 120% 60% 60% / 150% 150% 20% 20%; 
}
</style>
<p><span class=spanCroissant></span> Croissant. ['medialuna', 'cruasán'.]</p>


<style type="text/css">
.spanDoughnut {display: inline-block; 
border-width: .3em; 
border-color: chocolate; 
border-style: groove ridge ridge groove; 
width: .3em; height: .3em; 
border-radius: 50%; 
margin: 0 1em 0; 
position: relative; 
}
.spanDoughnut:before {content: ""; 
position: absolute; 
width: .18em; height: .2em; 
background-color: pink; 
left: .3em; top: -.15em; 
border-radius: 30% 40% 50% 25%; 
}
.spanDoughnut:after {content: ""; 
position: absolute; 
width: .1em; height: .15em; 
background-color: pink; 
left: .4em; top: 0; 
border-radius: 25% 30% 40% 50%; 
}
</style>
<p><span class=spanDoughnut></span> Doughnut. [&#127849; (&amp;#127849;), símbolo 'rosquilla'.]</p>


<style type="text/css"> /* 29/Ene/2015 20:46 */
.spanPretzel {position: relative; 
display: inline-block; 
margin: 0 1em -.03em; 
width: .55em; height: .35em; 
border: solid .15em darkorange; 
border-radius: 100% 120% 20% 100% / 100% 200% 10% 100%; 
}
.spanPretzel::before {content: ""; 
position: absolute; 
width: .55em; height: .35em; 
left: .18em; top: -.22em; 
border: inherit; 
border-radius: 120% 100% 100% 20% / 200% 100% 100% 10%; 
transform: rotatez(335deg); 
}
</style>
<p><span class=spanPretzel></span> Pretzel. </p>


<style type="text/css"> /* 6/Dic/2015 21:59 */
.spanCrackers {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em 1.1em; 
width: .75em; height: .75em; 
border-radius: .1em; 
background: 
radial-gradient(circle at bottom, transparent .06em, black .07em, black .09em, transparent .1em) center top, 
radial-gradient(circle at left, transparent .06em, black .07em, black .09em, transparent .1em) right center, 
radial-gradient(circle at top, transparent .06em, black .07em, black .09em, transparent .1em) center bottom, 
radial-gradient(circle at right, transparent .06em, black .07em, black .09em, transparent .1em) left center; 
background-size: .1em .1em; 
background-repeat: repeat-x, repeat-y; 
}
.spanCrackers::before {content: ""; 
position: absolute; 
margin: auto; 
width: .33em; height: .33em; 
left: 0; top: 0; right: 0; bottom: 0; 
background-image: 
radial-gradient(circle, black .025em, transparent .035em); 
background-size: .12em .12em; 
background-position: center center; 
}
</style>
<p><span class=spanCrackers></span> Crackers. [&#127850; (&amp;#127850;), símbolos varios y pictogramas 'galleta'; 'galleta de agua'.]</p>


<style type="text/css">
.spanCoffeeBean{position: relative; 
display: inline-block; 
margin: 0 1.15em .3em; 
width: .6em; height: .1em; 
border-style: solid; 
border-color: firebrick; 
border-width: .15em 0; 
border-radius: 50%; 
background-color: maroon; 
}
</style>
<p><span class=spanCoffeeBean></span> Coffee Bean. ['grano de café'.]</p>


<style type="text/css"> /* 21/Mar/2014 10:16 */
.spanBirthdayCake {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .8em; height: .4em; 
background-color: brown; 
border-radius: 1em / .2em; 
}
.spanBirthdayCake:before {content: ""; 
position: absolute; 
width: .8em; height: .12em; 
left: 0; top: .01em; 
background-color: sandybrown; 
border: dotted .025em red; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
border-radius: 1em / .2em; 
}
.spanBirthdayCake:after {content: ""; 
position: absolute; 
width: .04em; height: .25em; 
left: .35em; top: -.3em; 
background-color: burlywood; 
border-color: darkorange white; 
border-style: solid; 
border-width: .1em .01em 0; 
border-radius: .03em .03em 0 0; 
}
</style>
<p><span class=spanBirthdayCake></span> Birthday Cake. [&#127874; (&amp;#127874;), símbolos varios y pictogramas 'torta de cumpleaños'.]</p>


<style type="text/css"> /* 20/Dic/2015 17:19 */
.spanPastafrola {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .7em; height: .7em; 
border-radius: 100%; 
box-shadow: inset 0 0 .06em .05em sandybrown; 
background: 
repeating-linear-gradient(130deg, transparent 0, transparent .04em, peru .05em, peru .07em, transparent .1em), 
repeating-linear-gradient(40deg, transparent 0, transparent .04em, peru .05em, peru .07em, transparent .1em), 
linear-gradient(tomato, crimson, red, firebrick, red, crimson, red); 
}
</style>
<p><span class=spanPastafrola></span> Pastafrola. </p>


<style type="text/css"> /* 9/Dic/2015 11:44 */
.spanCandycane {position: relative; 
display: inline-block; 
margin: 0 .8em 0 .85em; 
width: 1em; height: .2em; 
border-style: solid; 
border-width: .12em .12em .12em .08em; 
border-color: transparent transparent transparent white; 
border-radius: 0 .24em .24em .16em; 
background: 
radial-gradient(circle at right, transparent .055em, white .06em), 
linear-gradient(white, white), 
repeating-linear-gradient(45deg, lemonchiffon 0, moccasin .05em, red .06em, red .12em); 
background-size: .85em .13em, 100% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-clip: border-box, content-box; 
background-origin: border-box, content-box; 
transform: rotate(340deg); 
transform-origin: 0 90%; 
}
</style>
<p><span class=spanCandycane></span> Candycane. ['bastón de caramelo'.]</p>


<style type="text/css"> /* 3/Abr/2015 13:57 */
.spanCandy {position: relative; 
display: inline-block; 
margin: 0 .75em; 
width: .6em; height: .45em; 
border-style: solid; 
border-width: .05em .3em; 
border-color: transparent; 
border-radius: 100%; 
box-shadow: inset 0 -.08em .05em 0 rgba(0, 0, 0, .2); 
background-image: 
repeating-radial-gradient(ellipse at right top, red, red 6%, orange 7%, orange 12%, red 13%), 
radial-gradient(ellipse at left, crimson, crimson .23em, transparent .25em, transparent 100%), 
radial-gradient(ellipse at right, crimson, crimson .23em, transparent .25em, transparent 100%), 
radial-gradient(ellipse, crimson, crimson 70%, transparent 80%, transparent 100%); 
background-size: 100% 100%, .3em 70%, .3em 70%, 98% .2em; 
background-repeat: no-repeat; 
background-position: 0 0, .07em center, right .07em center, center center; 
background-clip: content-box, border-box, border-box, border-box; 
background-origin: border-box; 
transform: rotate(340deg); 
}
</style>
<p><span class=spanCandy></span> Candy. [&#127852; (&amp;#127852;), símbolos varios y pictogramas 'caramelo'.]</p>


<style type="text/css"> /* 11/Jun/2015 14:05 */
.spanLollipop {position: relative; 
display: inline-block; 
margin: 0 .9em .1em 1.2em; 
width: .5em; height: .49em; 
border-style: solid; 
border-width: .03em 0; 
border-color: rgba(230,230,230,.5) transparent rgba(0,0,0,.3); 
border-radius: 100%; 
background: 
repeating-radial-gradient(circle at left, red, orange, red, yellow, lime, yellow, red, orange, red) 50% 10%, 
repeating-radial-gradient(circle at right, red, orange, red, yellow, lime, yellow, red, orange, red); 
background-size: 100% 50%; 
transform: rotate(330deg); 
}
.spanLollipop::before {content: ""; 
position: absolute; 
width: .5em; height: .04em; 
left: -.46em; top: .23em; 
background-color: rosybrown; 
border-radius: .04em; 
}
</style>
<p><span class=spanLollipop></span> Lollipop. [&#127853; (&amp;#127853;), símbolos varios y pictogramas 'chupetín paleta'.]</p>


<style type="text/css"> /* 21/Sep/2014 12:43 */
.spanChocolate {position: relative; 
display: inline-block; 
margin: 0 .7em 0 1em; 
width: 1.15em; height: .6em; 
border: solid .025em transparent; 
background-image: 
linear-gradient(steelblue, steelblue), 
linear-gradient(to bottom, transparent, transparent 30%, sienna 30%, sienna 30%, transparent 35%, transparent 65%, sienna 67%, sienna 70%, transparent 70%, transparent 100%), 
linear-gradient(to left, chocolate, chocolate 30%, sienna 30%, sienna 30%, chocolate 35%, chocolate 65%, sienna 67%, sienna 70%, chocolate 70%, chocolate 100%); 
background-size: .6em .6em; 
background-repeat: repeat-y; 
background-position: -.0em 0, right 0 top 0, right 0 top 0; 
background-clip: border-box, content-box, content-box; 
background-origin: border-box, content-box, content-box; 
box-shadow: -.15em 0 0 0 steelblue; 
}
.spanChocolate::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .47em; top: -.025em; 
border-style: solid; 
border-width: .18em .12em .2em 0; 
border-color: steelblue papayawhip transparent transparent; 
border-radius: .05em 0 0 .1em / .1em 0 0 .1em; 
}
.spanChocolate::after {content: ""; 
position: absolute; 
width: .025em; height: .05em; 
left: .41em; top: .2em; 
background-color: papayawhip; 
border-style: solid; 
border-width: .22em .16em .15em 0; 
border-color: transparent papayawhip steelblue transparent; 
border-radius: .05em 0 0 .07em / .1em 0 0 .05em; 
background-clip: content-box; 
}
</style>
<p><span class=spanChocolate></span> Chocolate Bar. [&#127851; (&amp;#127851;), símbolos varios y pictogramas 'barra de chocolate'.]</p>


<style type="text/css"> /* 21/Mar/2015 11:51 */
.spanDessert {position: relative; 
display: inline-block; 
margin: 0 1.1em -.03em 1.2em; 
width: .45em; height: .47em; 
border: nonoe; 
border-top: solid .3em transparent; 
border-radius: .08em 0 0 0; 
background-image: 
radial-gradient(ellipse at top, silver, grey .25em, transparent .27em, transparent 100%), 
radial-gradient(ellipse at left, transparent, transparent .2em, grey .23em, grey 100%), 
radial-gradient(ellipse at right, transparent, transparent .2em, grey .23em, grey 100%), 
linear-gradient(60deg, transparent, transparent 20%, dimgrey 21%, dimgrey 25%, transparent 26%, transparent 100%); 
background-size: 100% .2em, 52% 100%, 52% 100%, 100% .4em; 
background-repeat: no-repeat; 
background-position: center top, left top, right top, 0 -.4em; 
}
.spanDessert::before {content: ""; 
position: absolute; 
width: .25em; height: .07em; 
left: .1em; top: -.18em; 
background-color: hotpink; 
border-radius: .05em; 
box-shadow: -.04em .055em 0 0 hotpink, .04em .055em 0 0 hotpink, 
-.09em .115em 0 0 hotpink, .09em .115em 0 0 hotpink; 
}
.spanDessert::after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .18em; top: -.26em; 
background-color: red; 
border-radius: 100%; 
}
</style>
<p><span class=spanDessert></span> Dessert. ['postre'; &#127854; (&amp;#127854;), símbolos varios y pictogramas 'flan'; &#127848; (&amp;#127848;), símbolos varios y pictogramas 'postre helado'.]</p>


<style type="text/css"> /* 8/Jul/2014 15:46 */
.spanIceCream {position: relative; 
display: inline-block; 
margin: 0 1.2em .45em 1.3em; 
width: .3em; height: .3em; 
background-color: chocolate; 
border-radius: 100%; 
}
.spanIceCream::before {content: ""; 
position: absolute; 
width: .27em; height: .27em; 
left: -.1em; top: .09em; 
background-color: pink; 
border-radius: 100%; 
box-shadow: .19em .03em 0 0 navajowhite; 
}
.spanIceCream::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.03em; top: .32em; 
border-color: transparent rgba(255,255,255,.99) white; 
border-style: solid; 
border-width: .5em .18em .1em .18em; 
border-radius: .08em .08em .008em .008em / .08em .08em .008em .008em; 
background-image: repeating-linear-gradient(45deg, transparent, transparent .03em, goldenrod .04em, goldenrod .055em), 
repeating-linear-gradient(-45deg, transparent, transparent .03em, goldenrod .04em, goldenrod .055em), 
linear-gradient(gold, gold);
background-size: .4em .5em; 
}
</style>
<p><span class=spanIceCream></span> Soft Ice Cream. [&#127846; (&amp;#127846;), símbolos varios y pictogramas 'cucurucho con helado'.]</p>


<style type="text/css"> /* 13/Feb/2015 21:34 */
.spanAvocado {position: relative; 
display: inline-block; 
margin: 0 1.2em .03em .7em; 
width: .75em; height: .5em; 
background-color: lemonchiffon; 
border: solid .025em darkgreen; 
border-radius: 150% 60% 60% 150% / 100% 90% 90% 100%; 
transform: rotatez(30deg); 
}
.spanAvocado::before {content: ""; 
position: absolute; 
width: .26em; height: .26em; 
left: .37em; top: .13em; 
background-color: saddlebrown; 
box-shadow: .01em .02em .015em .01em rgba(0, 0, 0, .3); 
border-radius: 100%; 
}
.spanAvocado::after {content: ""; 
position: absolute; 
width: .7em; height: .5em; 
left: .65em; top: -.35em; 
background-color: darkgreen; 
border-radius: 150% 60% 60% 150% / 100% 90% 90% 100%; 
box-shadow: inset -.05em .05em .05em .1em rgba(0, 0, 0, .3); 
transform: rotatez(60deg); 
}
</style>
<p><span class=spanAvocado></span> Avocado. ['palta' o 'aguacate'.]</p>


<style type="text/css">
.spanApple {position: relative; 
display: inline-block; 
width: .4em; height: .55em; 
margin: 0 1em .1em 1.4em; 
background-color: red; 
border-radius: 1.5em 1em 1.2em .9em / 1em 1.6em 1.8em .9em;
}
.spanApple:before {content: ""; 
position: absolute; 
top: 0; left: -.24em; 
width: .4em; height: .55em; 
background-color: transparent; 
border-radius: 1em 1.5em 1em 1.2em / 1.6em 1em 1em 1.8em; 
background-image: radial-gradient(circle, white 0, white .05em, red .15em, red 100%); 
background-position: -.05em -.1em; 
}
.spanApple:after {content: ""; 
position: absolute; 
top: -.23em; left: -.02em; 
width: .1em; height: 0; 
background-color: transparent; 
border-radius: 0 2em .8em 0 / 0 2em .8em 0; 
border-style: solid; 
border-color: lime lime green white; 
border-width: .17em .08em .05em .12em; 
-webkit-transform: rotate(75deg); 
transform: rotate(75deg); 
}
</style>
<p><span class=spanApple></span> Apple. [&#127822; (&amp;#127822;), símbolos varios y pictogramas 'manzana roja'.]</p>


<style type="text/css"> /* 27/Jul/2014 17:35 */
.spanBanana {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .45em; height: .9em; 
border-color: yellow; 
border-style: ridge; 
border-width: 0 .2em 0 0; 
border-radius: 100%; 
box-shadow: inset -.02em 0 .03em -.02em dimgrey;
transform: rotate(60deg); 
}
.spanBanana::before {content: ""; 
position: absolute; 
width: .04em; height: .12em; 
left: .3em; top: -.09em; 
background-color: maroon; 
transform: rotate(330deg); 
}
</style>
<p><span class=spanBanana></span> Banana. [&#127820; (&amp;#127820;), símbolos varios y pictogramas 'banana'.]</p>


<style type="text/css"> /* 19/Sep/2014 10:12 */
.spanOrange {position: relative; 
display: inline-block; 
margin: 0 1.4em 0 .9em; 
width: .5em; height: .5em; 
background-color: orange; 
border: solid .025em darkorange; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .04em floralwhite, .035em .01em 0 -.01em darkorange; 
background-image: 
linear-gradient(20deg, transparent, transparent 45%, floralwhite 48%, floralwhite 53%, transparent 55%, transparent 100%),
linear-gradient(140deg, transparent, transparent 45%, floralwhite 48%, floralwhite 53%, transparent 55%, transparent 100%),
linear-gradient(260deg, transparent, transparent 45%, floralwhite 48%, floralwhite 53%, transparent 55%, transparent 100%); 
background-repeat: no-repeat; 
}
.spanOrange::before {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .19em; top: .19em; 
background-color: floralwhite; 
border-radius: 100%; 
}
.spanOrange::after {content: ""; 
position: absolute; 
width: .55em; height: .55em; 
left: .57em; top: -.05em; 
background-color: peachpuff; 
border-radius: 100%; 
box-shadow: inset -.1em -.15em .12em .17em darkorange; 
}
</style>
<p><span class=spanOrange></span> Orange Fruit. ['naranja'.]</p>


<style type="text/css"> /* 11/Sep/2014 22:33 */
.spanPear {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .45em; height: .4em; 
background-color: lime; 
border-radius: .45em .45em .3em .4em / .4em .4em .3em .3em; 
box-shadow: inset -.15em -.05em .1em .13em limegreen; 
}
.spanPear::before {content: ""; 
position: absolute; 
width: .3em; height: .28em; 
left: .08em; top: -.18em; 
background-color: lime; 
border-radius: .2em .25em .1em .1em / .2em .2em .1em 0; 
box-shadow: inset -.15em .05em .07em .05em limegreen; 
}
.spanPear::after {content: ""; 
position: absolute; 
width: .05em; height: .12em; 
left: 46%; top: -.35em; 
border-style: solid; 
border-width: .05em; 
border-color: transparent transparent transparent olive; 
border-radius: 100% 0 0 0; 
}
</style>
<p><span class=spanPear></span> Pear. [&#127824; (&amp;#127824;), símbolos varios y pictogramas 'pera'.]</p>


<style type="text/css"> /* 3/Jun/2014 22:30 */
.spanPineapple {position: relative; 
display: inline-block; 
margin: 0 1.2em 0 1.3em; 
width: .4em; height: .6em; 
background-color: sandybrown; 
border-radius: .25em .25em .4em .4em / .8em .8em .5em .5em; 
background-image: repeating-linear-gradient(45deg, transparent, transparent .05em, maroon .055em, maroon .08em), 
repeating-linear-gradient(-45deg, transparent, transparent .04em, maroon .05em, maroon .08em); 
box-shadow: inset .035em .03em .15em 0 gold, 
inset -.02em -.1em .1em 0 firebrick, 
0 -.11em 0 -.06em sandybrown; 
}
.spanPineapple::before {content: ""; 
position: absolute; 
width: .02em; height: .08em; 
left: .12em; top: -.31em; 
background-color: brown; 
background-clip: content-box; 
border-color: transparent green saddlebrown green; 
border-style: groove ridge solid; 
border-width: .1em .07em .03em .07em; 
border-radius: 35%; 
box-shadow: 0 .05em 0 0 maroon; 
}
.spanPineapple::after {content: ""; 
position: absolute; 
width: .03em; height: .05em; 
left: .07em; top: -.22em; 
background-color: maroon; 
background-clip: content-box; 
border-color: transparent green transparent green; 
border-style: groove ridge; 
border-width: .13em .12em .06em .12em; 
border-radius: 40%; 
}
</style>
<p><span class=spanPineapple></span> Pineapple. [&#127821; (&amp;#127821;), símbolos varios y pictogramas 'ananá'.]</p>


<style type="text/css"> /* 9/Jun/2014 22:34 */
.spanGrapes {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .6em; height: .6em; 
background-image: 
radial-gradient(circle, indigo, indigo .05em, transparent .08em, transparent 100%), 
radial-gradient(circle, indigo, indigo .05em, transparent .08em, transparent 100%), 
radial-gradient(circle, indigo, indigo .05em, transparent .08em, transparent 100%), 
radial-gradient(circle, indigo, indigo .05em, transparent .08em, lime 100%); 
background-size: .15em .12em, .175em .12em, .2em .12em, .12em .12em; 
background-repeat: repeat-x, repeat-x, repeat-x, no-repeat; 
background-position: 0 .12em, .06em .24em, .1em .35em, .23em .46em; 
border-radius: 0 0 .4em .4em / 0 0 .9em .9em; 
}
.spanGrapes::before {content: ""; 
position: absolute; 
width: .05em; height: .01em; 
left: .125em; top: -.1em; 
border-color: transparent green green; 
border-style: solid; 
border-width: .1em .12em .1em .12em; 
border-radius: 50%; 
}
.spanGrapes::after {content: ""; 
position: absolute; 
width: .06em; height: .15em; 
left: .25em; top: -.18em; 
border-color: darkgreen transparent transparent darkgreen; 
border-style: solid; 
border-width: .05em .0em .0em .05em; 
border-radius: .2em .15em .1em .1em / .2em .1em  .1em .1em; 
}
</style>
<p><span class=spanGrapes></span> Grapes. [&#127815; (&amp;#127815;), símbolos varios y pictogramas 'uvas'.]</p>


<style type="text/css"> /* 4/Oct/2014 19:21 */
.spanLemon {position: relative; 
display: inline-block; 
margin: 0 .7em 0 1.3em; 
width: .7em; height: .7em; 
background-color: yellow; 
border: solid .02em lemonchiffon; 
border-radius: 1.1em .1em 1.1em .65em; 
box-shadow: inset -.08em 0 .2em 0 chartreuse; 
transform: rotate(30deg); 
}
.spanLemon::before {content: ""; 
position: absolute; 
left: -.5em; top: .45em; 
width: .5em; height: .5em; 
background-color: #ee3; 
border: solid .025em yellow; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .04em floralwhite, -.035em .01em 0 -.01em greenyellow; 
background-image: 
linear-gradient(20deg, transparent, transparent 48%, floralwhite 48%, floralwhite 53%, transparent 53%, transparent 100%),
linear-gradient(140deg, transparent, transparent 48%, floralwhite 48%, floralwhite 53%, transparent 53%, transparent 100%),
linear-gradient(260deg, transparent, transparent 48%, floralwhite 48%, floralwhite 53%, transparent 53%, transparent 100%); 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanLemon></span> Lemon. [&#127819; (&amp;#127819;), símbolos varios y pictogramas 'limón'.]</p>


<style type="text/css"> /* 5/Oct/2014 14:53 */
.spanPeach {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.1em; 
width: .7em; height: .7em; 
background-image: radial-gradient(ellipse at bottom right, gold, gold 63%, orange 63%, orange 64%, gold 70%, gold 100%); 
background-size: 100% 80%; 
background-position: -20% 50%; 
border-radius: 1.1em .7em 1.1em .2em; 
box-shadow: inset 0 -.1em .1em .02em goldenrod; 
transform: rotate(320deg) skewx(15deg) skewy(5deg); 
}
.spanPeach::before {content: ""; 
position: absolute; 
width: 0; height: .035em; 
left: .59em; top: .058em; 
border-style: solid; 
border-width: .05em .16em .05em .1em; 
border-color: transparent green; 
border-radius: .06em 0 .08em .06em; 
}
.spanPeach::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .5em; top: .18em; 
border-style: inset; 
border-width: .15em; 
border-color: green; 
border-radius: 50% 0; 
transform: rotate(310deg); 
}
</style>
<p><span class=spanPeach></span> Peach. [&#127825; (&amp;#127825;), símbolos varios y pictogramas 'durazno' o 'melocotón'.]</p>


<style type="text/css"> /* 9/Jun/2014 16:32 */
.spanWaterMelon {position: relative; 
display: inline-block; 
margin: 0 .8em .1em; 
width: 1.2em; height: .5em; 
background-color: tomato; 
border: solid limegreen .03em; 
border-top: 0; 
border-radius: .05em .05em 1.1em 1.1em / .05em .05em .9em .9em; 
box-shadow: inset 0 0 .13em .03em snow; 
}
.spanWaterMelon::before, .spanWaterMelon::after {content: ""; 
position: absolute; 
width: 1em; height: .1em; 
left: 5%; top: .13em; 
background-image: radial-gradient(ellipse at right, black 0, black .06em, transparent .08em, transparent 100%); 
background-size: .24em .12em; 
background-repeat: repeat-x; 
}
.spanWaterMelon::after {width: .6em; 
left: 30%; top: .25em; 
background-image: radial-gradient(ellipse at left, black 0, black .06em, transparent .08em, transparent 100%); 
}
</style>
<p><span class=spanWaterMelon></span> Watermelon. [&#127817; (&amp;#127817;), símbolos varios y pictogramas 'sandía'.]</p>


<style type="text/css"> /* 3/Sep/2014 11:42 */
.spanCherries {position: relative; 
display: inline-block; 
margin: 0 1.2em .3em; 
width: .4em; height: .4em; 
border-style: solid; 
border-width: .05em 0 0 .05em; 
border-color: green; 
border-radius: 100% 0 0 0; 
background-image: radial-gradient(ellipse at right, transparent 0, transparent .09em, green .1em, green .145em, transparent .155em, transparent 100%); 
background-size: .15em .6em; 
background-repeat: no-repeat; 
background-position: .25em -.1em; 
}
.spanCherries::before, .spanCherries::after {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: -.3em; top: .3em; 
background-color: coral; 
border-radius: 100%; 
box-shadow: inset -.08em -.08em .2em 0 darkred;
}
.spanCherries::after {left: .17em; top: .38em; 
}
</style>
<p><span class=spanCherries></span> Cherries. [&#127826; (&amp;#127826;), símbolos varios y pictogramas 'cerezas', 'guindas'.]</p>


<style type="text/css"> /* 3/Oct/2014 19:24 */
.spanStrawberry {position: relative; 
display: inline-block; 
margin: 0 1.1em -.05em; 
width: .6em; height: .6em; 
border-radius: .2em .2em .5em .5em / .2em .2em 1em 1em; 
background-image: radial-gradient(circle, maroon, maroon 1.5px, red 1.5px, red 100%); 
background-size: 5px 5px; 
}
.spanStrawberry::before {content: ""; 
position: absolute; 
width: .4em; height: .15em; 
left: .11em; top: -.11em; 
border-radius: 100% 100% 0 0; 
background-image: radial-gradient(ellipse at top, yellowgreen, yellowgreen 65%, transparent 68%, transparent 100%), 
radial-gradient(ellipse, yellowgreen, yellowgreen 60%, transparent 63%, transparent 100%); 
background-size: 100%, 50% 100%; 
background-position: -.18em 0, center 0; 
background-clip: content-box, border-box; 
background-repeat: repeat-x, no-repeat; 
}
.spanStrawberry::after {content: ""; 
position: absolute; 
width: .035em; height: 0; 
left: .25em; top: -.26em; 
border-style: solid; 
border-width: .16em .05em .05em; 
border-color: yellowgreen transparent; 
border-radius: .08em 0 .06em .06em; 
}
</style>
<p><span class=spanStrawberry></span> Strawberry. [&#127827; (&amp;#127827;), símbolos varios y pictogramas 'frutilla' o 'fresa'.]</p>


<style type="text/css"> /* 3/Oct/2014 18:07 */
.spanPumpkin {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: 1em; height: .6em; 
background-image: 
radial-gradient(ellipse, rgba(255,140,0,.5), rgba(255,140,0,.5) 55%, rgba(255,69,0,.5) 60%, rgba(255,69,0,.5) 65%, transparent 67%, transparent 100%), 
radial-gradient(ellipse, rgba(255,140,0,.5), rgba(255,140,0,.5) 55%, rgba(255,69,0,.5) 60%, rgba(255,69,0,.5) 65%, transparent 67%, transparent 100%), 
radial-gradient(ellipse, darkorange, darkorange 55%, orangered 60%, orangered 65%, transparent 67%, transparent 100%), 
radial-gradient(ellipse, darkorange, darkorange 55%, orangered 60%, orangered 65%, transparent 67%, transparent 100%), 
radial-gradient(ellipse, darkorange, darkorange 55%, orangered 60%, orangered 65%, transparent 67%, transparent 100%); 
background-size: 68% 100%; 
background-repeat: no-repeat; 
background-position: right 0, left 0, center 0; 
}
.spanPumpkin::before {content: ""; 
position: absolute; 
width: .035em; height: 0; 
left: .45em; top: -.16em; 
border-style: solid; 
border-width: .16em .05em .1em; 
border-color: green transparent; 
border-radius: .08em 0 .06em .06em; 
}
</style>
<p><span class=spanPumpkin></span> Pumpkin. ['calabaza, zapallo'.]</p>


<style type="text/css"> /* 24/Sep/2014 14:33 */
.spanBeans {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .6em; height: .6em; 
background-color: olive; 
border: solid .06em seagreen; 
border-radius: 1em 0; 
}
.spanBeans::before {content: ""; 
position: absolute; 
width: .18em; height: .18em; 
left: .35em; top: .08em; 
background-color: darkseagreen; 
border-radius: 100%; 
box-shadow: -.15em .16em 0 0 darkseagreen, 
-.3em .3em 0 0 darkseagreen; 
}
.spanBeans::after {content: ""; 
position: absolute; 
left: -.38em; top: -.1em; 
width: .7em; height: .7em; 
background-image: linear-gradient(olivedrab, olivedrab), 
linear-gradient(to right bottom, transparent, transparent 46%, olivedrab 48%, olivedrab 52%, transparent 54%, transparent 100%); 
background-position: 0 0, -.1em .1em; 
background-clip: content-box, border-box; 
border: solid; 
border-width: 0 0 .1em .1em; 
border-color: transparent; 
border-radius: 1em 0 1em .05em; 
transform: rotate(330deg); 
}
</style>
<p><span class=spanBeans></span>Beans. ['arvejas'.]</p>


<style type="text/css"> /* 7/Dic/2015 10:30 */
.spanOnion {position: relative; 
display: inline-block; 
margin: 0 1em .05em 1.4em; 
width: .25em; height: .18em; 
border-radius: 0 .05em .05em 0; 
background: 
radial-gradient(ellipse at right, transparent 40%, green 50%,green 75%, transparent 80%), 
radial-gradient(ellipse at left, green 70%, transparent 75%) left center no-repeat; 
background-size: 100% 100%, 100% 50%; 
transform: rotate(30deg); 
}
.spanOnion::before {content: ""; 
position: absolute; 
width: .35em; height: .56em; 
left: -.33em; top: -.22em; 
background-color: sandybrown; 
border-radius: .05em .4em .4em .05em; 
}
.spanOnion::after {content: ""; 
position: absolute; 
width: .3em; height: .54em; 
left: -.47em; top: -.21em; 
border-radius: 50%; 
background: 
repeating-radial-gradient(ellipse, palegoldenrod, palegoldenrod .03em, goldenrod .05em); 
}
</style>
<p><span class=spanOnion></span> Onion. ['cebolla'.]</p>


<style type="text/css"> /* 4/May/2015 22:43 */
.spanTomato {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .7em; height: .45em; 
background-color: red; 
border: solid .03em red; 
border-radius: .4em .4em .4em .4em / .4em .4em .4em .4em; 
box-shadow: inset .08em 0 .035em -.003em coral; 
}
.spanTomato::before {content: ""; 
position: absolute; 
width: .36em; height: .15em; 
left: .2em; top: -.13em; 
border-radius: 0 0 .2em .2em; 
background: radial-gradient(circle at left bottom, green, green 70%, transparent 70%, transparent 100%) 0 0, 
radial-gradient(circle at right bottom, green, green 70%, transparent 70%, transparent 100%) .18em 0, 
radial-gradient(ellipse, green 80%, transparent 80%) center top; 
background-size: .18em .18em, .18em .18em, .08em .2em; 
background-repeat: no-repeat; 
}
</style>
<p><span class=spanTomato></span> Tomato. [&#127813; (&amp;#127813;), símbolos varios y pictogramas 'tomate'.]</p>


<style type="text/css"> /* 6/Abr/2015 20:19 */
.spanCarrot {position: relative; 
display: inline-block; 
margin: 0 1.1em -.2em 1.24em; 
width: .06em; height: 0; 
border-style: solid; 
border-width: .8em .14em 0.1em; 
border-color: transparent rgba(255,255,255,.99) white; 
border-radius: .15em .15em .01em .01em; 
background: 
linear-gradient(darkorange, darkorange .1em, orangered .12em, orangered 100%), 
linear-gradient(darkorange, darkorange .1em, orangered .12em, orangered 100%), darkorange; 
background-size: .15em .13em, .15em .13em, 100% 100%; 
background-repeat: repeat-y, repeat-y; 
background-position: .05em .05em, right top, 0 0; 
background-origin: border-box; 
transform: rotate(-45deg); 
}
.spanCarrot::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: -.09em; top: -1.02em; 
border-style: solid; 
border-width: .08em; 
border-color: transparent green green transparent; 
border-radius: .1em 0 .07em 0; 
background: linear-gradient(45deg, transparent, transparent 30%, green 30%, green 70%, transparent 70%, transparent 100%); 
background-repeat: no-repeat; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanCarrot></span> Carrot. ['zanahoria'.]</p>


<style type="text/css"> /* 20/Dic/2017 14:38 */
.spanCorn {position: relative; 
display: inline-block; 
margin: 0 1em -.1em 1.2em; 
width: .36em; height: 1em; 
background: 
repeating-linear-gradient(sandybrown .01em, transparent .02em, transparent .05em, sandybrown .06em), 
repeating-linear-gradient(90deg, sandybrown .01em, transparent .02em, transparent .07em, sandybrown .08em), navajowhite; 
border-radius: 50% / 60% 60% 20% 20%; 
box-shadow: inset -.1em -.1em .15em .02em rgba(205,133,63,.5); 
transform: rotatez(40deg); 
}
.spanCorn::before , .spanCorn::after {content: ""; 
position: absolute; 
width: .24em; height: .7em; 
left: .08em; top: .32em; 
background-color: yellowgreen; 
border-radius: 60% / 80% 80% 20% 20%; 
transform: rotatez(330deg); 
transform-origin: center bottom; 
}
.spanCorn::after {width: .2em; height: .9em; 
top: .12em; 
box-shadow: inset -.05em 0 .06em 0 limegreen; 
transform: rotatez(25deg); 
}
</style>
<p><span class=spanCorn></span> Corn. Ear Of Maize. [&#127805; (&amp;#127805;), símbolos varios y pictogramas 'mazorca de maíz'.]</p>




<hr>



<style type="text/css"> /* 24/Ago/2014 12:32 */
.spanStethoscope {position: relative; 
display: inline-block; 
margin: 0 1.3em .3em 1.1em; 
width: .25em; height: .3em; 
border-style: solid; 
border-width: .02em .06em .06em; 
border-color: transparent black black; 
border-radius: .3em .3em .4em .4em / .3em .3em .5em .5em; 
}
.spanStethoscope::before {content: ""; 
position: absolute; 
width: .25em; height: .25em; 
left: .1em; top: .31em; 
border-style: solid; 
border-width: 0 .06em .06em; 
border-color: black; 
border-radius: 0 0 70% 70% / 0 0 80% 80%; 
}
.spanStethoscope::after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .32em; top: .22em; 
background-color: black; 
border: solid .03em black; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .04em white, 
-.37em -.3em 0 -.07em black, -.23em -.3em 0 -.07em black; 
}
</style>
<p><span class=spanStethoscope></span> Stethoscope. ['estetoscopio'.]</p>


<style type="text/css"> /* 1/Abr/2014 12:57 */
.spanBandaid {position: relative; 
display: inline-block; 
margin: 0 1.2em; 
width: .2em; height: .25em; 
background-color: sandybrown; 
border-color: sandybrown; 
border-style: solid; 
border-width: .25em .05em; 
border-radius: .1em; 
background-image: radial-gradient(circle, yellow 0, yellow .015em, transparent .015em, transparent 100%); 
background-size: .045em .045em; 
background-repeat: repeat; 
box-shadow: inset .01em .01em .01em .0em gold, inset -.01em -.01em .01em .0em peru; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}
</style>
<p><span class=spanBandaid></span> Bandaid. ['curita'.]</p>


<style type="text/css">
.spanPill1 {position: relative; 
display: inline-block; 
width: .5em; height: .4em;
border-radius: 50% 0 0 50%; 
background-color: black; 
margin: 0 1.3em .2em .9em; 
}
.spanPill1:before {content: ""; 
position: absolute; 
width: .5em; height: .4em; 
border-radius: 0 50% 50% 0; 
background-color: dimgray; 
top: 0; left: .5em; 
}
</style>
<p><span class=spanPill1></span> Pill 1. [&#128138; (&amp;#128138;), símbolo 'cápsula' o 'píldora'.]</p>

<style type="text/css">
.spanPill2 {margin: auto .9em .2em; 
display: inline-block; 
width: .45em; height: .35em;
border-radius: .175em; 
border-width: .025em .025em .025em .55em; 
border-color: black; 
border-style: solid; 
overflow: hidden; 
}
</style>
<p><span class=spanPill2></span> Pill 2. </p>


<style type="text/css"> /* 14/Sep/2014 19:33 */
.spanBlister {position: relative; 
display: inline-block; 
margin: 0 .85em .1em; 
width: 1em; height: .4em; 
border-style: solid; 
border-width: 0 .05em; 
border-color: black; 
border-radius: .05em; 
background-image: radial-gradient(circle, transparent 0, transparent .05em, grey .07em, black .08em, black 100%); 
background-size: .2em .2em; 
background-position: 0 0; 
background-clip: content-box; 
}
</style>
<p><span class=spanBlister></span> Blister whit Pills. ['blister con pastillas'.]</p>


<style type="text/css"> /* 11/May/2015 19:16 */
.spanPrescriptionDrugs {position: relative; 
display: inline-block; 
margin: 0 1.6em 0 .6em; 
width: .36em; height: .9em; 
border: solid .04em white; 
border-radius: .2em; 
background: linear-gradient(black, black 46%, white 46%, white 50%, black 50%, black 100%); 
transform: rotate(45deg); 
transform-origin: center bottom; 
}
.spanPrescriptionDrugs::before {content: ""; 
position: absolute; 
width: .37em; height: .37em; 
left: 70%; top: 25%; 
border: inherit; 
border-radius: 100%; 
background: linear-gradient(black, black 42%, white 46%, white 54%, black 58%, black 100%); 
transform: rotate(310deg); 
}
.spanPrescriptionDrugs::after {content: ""; 
position: absolute; 
width: .6em; height: .6em; 
left: 120%; top: -60%; 
background-color: white; 
border: inherit;
border-radius: 100%; 
background-image: 
linear-gradient(white, white), linear-gradient(black, black); 
background-size: .21em .16em, .25em .2em; 
background-repeat: no-repeat; 
background-position: .1em .135em; 
box-shadow: inset 0 0 0 .045em black; 
}
</style>
<p><span class=spanPrescriptionDrugs></span> Prescription Drugs. ['drogas recetadas', 'horario de medicamentos'.]</p>


<style type="text/css">
.spanSyringe {margin: 0 .9em 0 1.6em; 
position: relative; 
display: inline-block; 
width: .25em; height: .1em; 
background-color: black; 
border-style: solid; 
border-width: .15em .05em .15em 0; 
border-color: white black white white; 
transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
}
.spanSyringe:before {content: ""; 
position: absolute; 
top: -.185em; left: -.6em; 
width: .6em; height: .2em; 
background-color: black; 
border-radius: .2em 0 0 .2em; 
border-width: .15em .09em .15em 0; 
border-color: white black white white; 
border-style: solid; 
}
.spanSyringe:after {content: ""; 
position: absolute; 
top: 50%; left: -.9em; 
width: .3em; height: 1px; 
background-color: black; 
}
</style>
<p><span class=spanSyringe></span> Syringe. [&#128137; (&amp;#128137;), símbolos varios 'jeringa'.]</p>


<style type="text/css"> /* 10/Oct/2015 17:44 */
.spanDropper {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.3em; 
width: .18em; height: .31em; 
line-height: 0; 
text-align: center; 
background-color: black; 
border-style: solid; 
border-width: .1em .1em .06em; 
border-color: transparent transparent black; 
border-radius: .3em .3em 0 0; 
background-clip: content-box; 
transform: rotate(300deg); 
transform-origin: center .7em; 
}
.spanDropper::before {content: ""; 
display: inline-block; 
width: .14em; height: .6em; 
margin-top: .35em; 
background-color: silver; 
border-radius: 0 0 90% 90%; 
}
.spanDropper::after {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: -.05em; top: 1em; 
background-color: lightskyblue; 
border-radius: 200% 0 200% 150%; 
}
</style>
<p><span class=spanDropper></span> Dropper. ['gotero'.]</p>


<style type="text/css"> /* 26/Mar/2014 20:02 */
.spanMicroscope {position: relative; 
display: inline-block; 
margin: 0 1.2em .14em; 
width: .22em; height: .22em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .08em; 
border-radius: .4em; 
}
.spanMicroscope:before {content: ""; 
position: absolute; 
width: .44em; height: .1em; 
left: 0; top: -.12em; 
background-image: linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: 100% .05em, .3em 1em; 
background-repeat: no-repeat; 
background-position: 0 .025em, .06em 0; 
-webkit-transform: rotate(315deg); 
transform: rotate(315deg); 
}
.spanMicroscope:after {content: ""; 
position: absolute; 
width: .15em; height: .04em; 
left: -.06em; top: .15em; 
background-color: black; 
border-radius: .08em; 
border-collapse: separate; 
box-shadow: .08em .16em 0 .025em black, .16em .16em 0 .025em black; 
}
</style>
<p><span class=spanMicroscope></span> Microscope. [&#128300; (&amp;#128300;), símbolos varios y pictogramas 'microscopio'.]</p>


<style type="text/css"> /* 5/Mar/2016 12:12 */
.spanTestTube {position: relative; 
display: inline-block; 
margin: 0 1.2em -.16em; 
width: .2em; height: 1em; 
border-style: solid; 
border-width: .06em .04em .04em; 
border-color: skyblue transparent transparent; 
border-radius: 0 0 .2em .2em; 
box-shadow: inset 0 -.05em .03em .03em skyblue; 
background: repeating-linear-gradient(transparent 0, transparent .05em, dimgrey .05em, dimgrey .08em) top .1em right 0, 
linear-gradient(310deg, lightblue 56%, aliceblue 60%); 
background-repeat: no-repeat; 
background-size: .1em .7em, 100% 100%; 
background-clip: content-box; 
transform: rotate(50deg); 
}
</style>
<p><span class=spanTestTube></span> Test Tube. ['tubo de ensayo'.]</p>


<style type="text/css"> /* 21/May/2016 21:32 */
.spanLabFlask {position: relative; 
display: inline-block; 
margin: 0 1em .05em; 
width: .2em; height: .3em; 
background-color: silver; 
border-style: solid; 
border-width: .05em .2em .28em; 
border-color: silver transparent grey; 
border-radius: .2em .2em 0 0 / .3em .3em 0 0; 
box-shadow: inset 0 -.1em 0 0 grey; 
background-clip: content-box; 
}
.spanLabFlask::before {content: ""; 
position: absolute; 
width: .62em; height: .1em; 
left: -.21em; top: .55em; 
background-color: grey; 
border-radius: .1em; 
}
</style>
<p><span class=spanLabFlask></span> Lab Flask. ['matraz de laboratorio'.]</p>


<style type="text/css">
.spanDNA1 {position: relative; 
display: inline-block; 
background-color: white; 
width: .3em; height: .3em; 
margin: 0 1.2em .3em; 
border-style: solid; 
border-width: 0 .08em; 
border-color: transparent black transparent grey; 
border-radius: 100% 0; 
background-image: repeating-linear-gradient(to bottom left, transparent 0, transparent 12%, black 13%, black 25%); 
}
.spanDNA1:before, .spanDNA1:after {content: ""; 
position: absolute; 
top: -.29em; left: .3em;
background-color: white; 
width: .3em; height: .3em; 
border-style: solid; 
border-width: 0 .08em; 
border-color: transparent grey transparent black; 
border-radius: 100% 0; 
background-image: repeating-linear-gradient(to bottom left, transparent 0, transparent 12%, black 13%, black 25%); 
}
.spanDNA1:after {content: ""; 
top: .29em; left: -.45em;
border-radius: 100% 0; 
}
</style>
<p><span class=spanDNA1></span> DNA1. ['cadena de ADN'.]</p>

<style type="text/css">
.spanDNA2 {position: relative; 
display: inline-block; 
background-color: white; 
width: .15em; height: .2em; 
margin: 0 1.3em .3em; 
border-style: solid; 
border-width: 0 .08em; 
border-color: transparent black transparent grey; 
border-radius: 100%; 
-webkit-transform: skewx(315deg) skewy(45deg); 
transform: skewx(315deg) skewy(45deg); 
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 12%, black 13%, black 25%); 
}
.spanDNA2:before, .spanDNA2:after {content: ""; 
position: absolute; 
top: -.21em; left: -.08em;
background-color: white; 
width: .15em; height: .2em; 
border-style: solid; 
border-width: 0 .08em; 
border-color: transparent grey transparent black; 
border-radius: 40% 20% 100% 50%; 
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 12%, black 13%, black 25%); 
}
.spanDNA2:after {content: ""; 
top: .2em; left: -.04em;
border-radius: 60% 50% 50% 20%; 
}
</style>
<p><span class=spanDNA2></span> DNA2.</p>


<style type="text/css"> /* 10/Abr/2015 13:24 */
.spanCrutch {position: relative; 
display: inline-block; 
margin: 0 1em .15em; 
width: .65em; height: .15em; 
border-style: solid; 
border-width: .08em .08em .08em 0; 
border-color: black; 
border-radius: 0 .4em .4em 0 / 0 .2em .2em 0 ; 
background-image: 
linear-gradient(to right, transparent, transparent .25em, black .25em, black .31em, transparent .31em, transparent 100%); 
transform: rotate(20deg); 
}
.spanCrutch::before {content: ""; 
position: absolute; 
width: .1em; height: .385em; 
left: -.1em; top: -.13em; 
background-color: black; 
border-radius: .05em; 
}
.spanCrutch::after {content: ""; 
position: absolute; 
width: .45em; height: .07em; 
left: 100%; top: 0em; 
background-color: black; 
border-style: solid; 
border-width: .05em .12em .05em 0; 
border-color: transparent black; 
border-radius: 0 .05em .05em 0; 
background-clip: content-box; 
}
</style>
<p><span class=spanCrutch></span> Crutch. ['muleta'.]</p>






<hr>




<style type="text/css"> /* 10/Jul/2016 16:23 */
.spanWhistle {position: relative; 
display: inline-block; 
margin: 0 1.3em 0 .7em; 
width: .5em; height: .5em; 
backg round-color: black; 
border-style: solid; 
border-width: .05em; 
border-color: transparent black black; 
border-radius: 100%; 
background: linear-gradient(90deg, black 47%, transparent 47%, transparent 80%, black 80%), black;
background-clip: border-box, content-box; 
transform: rotate(10deg); 
}
.spanWhistle::before {content: ""; 
position: absolute; 
width: .55em; height: .2em; 
left: .4em; top: -.04em; 
background-color: black; 
border-style: solid; 
border-width: .05em; 
border-color: transparent black transparent transparent; 
border-radius: 0 .06em .06em 0; 
background-clip: content-box; 
}
.spanWhistle::after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: -.14em; top: -.05em; 
border: solid .05em black; 
border-radius: 100%; 
}
</style>
<p><span class=spanWhistle></span> Whistle. ['silbato'.]</p>


<style type="text/css"> /* 5/Mar/2015 13:26 */
.spanBalloon {position: relative; 
display: inline-block; 
margin: 0 1em .25em; 
width: .5em; height: .5em; 
background-color: yellow; 
border-radius: 150% / 120% 120% 180% 180%; 
box-shadow: inset -.1em -.1em .2em .03em darkorange; 
}
.spanBalloon::before {content: ""; 
position: absolute; 
width: .2em; height: .3em; 
left: .045em; top: 100%; 
border-style: solid; 
border-width: 0 .025em .025em 0; 
border-color: dimgrey; 
border-radius: 0 0 100% 0 / 0 0 80% 0; 
}
.spanBalloon::after {content: ""; 
position: absolute; 
width: .04em; height: .025em; 
left: .2em; top: 100%; 
background-color: orangered; 
border-style: solid; 
border-width: 0 .04em .06em; 
border-color: darkorange transparent; 
border-radius: 20%; 
background-clip: content-box; 
}
</style>
<p><span class=spanBalloon></span> Balloon. [&#127880; (&amp;#127880;), símbolos varios y pictogramas 'globo decorativo'.]</p>


<style type="text/css"> /* 4/May/2015 13:27 */
.spanMask {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .84em; height: .55em; 
border-style: solid; 
border-width: .05em 0 0 .05em; 
border-color: transparent black; 
}
.spanMask::before , .spanMask::after {content: ""; 
position: absolute; 
width: .46em; height: .28em; 
left: -.04em; top: 0; 
border-radius: 0 .4em .4em .2em / 0 .1em .3em .28em; 
background: radial-gradient(ellipse, white, white 30%, black 35%, black 100%) center, black; 
background-size: 100% 50%; 
background-repeat: no-repeat; 
}
.spanMask::after {
left: auto; right: 0; top: 0; 
border-radius: .4em 0 .2em .4em / .1em 0 .28em .3em; 
}
</style>
<p><span class=spanMask></span> Mask. Anonymous. ['máscara' o 'anónimo'.]</p>


<style type="text/css"> /* 28/Jun/2014 12:27 */
.spanBirthdayHat {position: relative; 
display: inline-block; 
margin: 0 1.4em .1em 1.1em; 
width: 0; height: 0em; 
background-color: red; 
border-color: transparent rgba(255,255,255,.99); 
border-style: solid; 
border-width: 0 .2em .6em .2em; 
border-radius: 0 0 .15em .15em; 
background-image: repeating-radial-gradient(circle at top right, orange 0, orange .13em, green .131em, green .28em); 
background-size: .4em .6em; 
background-repeat: no-repeat; 
background-position: -.2em 0; 
box-shadow: 0 .05em 0 -.02em magenta; 
z-index: auto; 
}
.spanBirthdayHat::before {content: ""; 
position: absolute; 
width: .4em; height: .16em; 
left: -.12em; top: .5em; 
background-color: white; 
border-color: black; 
border-style: solid; 
border-width: .025em; 
border-radius: 0% 80% 60% 50%; 
z-index: -1; 
}
.spanBirthdayHat::after {content: ""; 
position: absolute; 
width: .15em; height: .02em; 
left: -.01em; top: -.09em; 
background-color: white; 
border: ridge .06em red; 
border-right: solid .05em white; 
border-radius: 59% 30% 30% 0; 
}
</style>
<p><span class=spanBirthdayHat></span>Birthday Hat. ['bonete de cumpleaños'.]</p>


<style type="text/css"> /* 31/Jul/2014 21:46 */
.spanViking {position: relative; 
display: inline-block; 
margin: 0 .9em .1em; 
width: .8em; height: .41em; 
background-color: black; 
border-bottom: dotted .08em black; 
border-radius: .4em .4em 0 0; 
box-shadow: 0 .03em 0 0 black; 
background-clip: content-box; 
}
.spanViking::before {content: ""; 
position: absolute; 
width: 1em; height: .4em; 
left: -.1em; top: -.28em; 
border-radius: 0 0 .8em .8em; 
box-shadow: 0 .15em 0 0 black; 
}
</style>
<p><span class=spanViking></span> Viking Helmet. ['casco víking'.]</p>


<style type="text/css">
.spanCrown1 {display: inline-block; 
border-width: .3em .1em 0; 
border-color: goldenrod white; 
border-style: solid; 
width: 1em; height: 0; 
margin: 0 .75em .3em; 
position: relative; 
}
.spanCrown1:before {content: ""; 
position: absolute; 
width: 1.2em; height: 0; 
background-color: transparent; 
left: 0; top: -.4em; 
border-width: .17em 0 0; 
border-color: white; 
border-style: dotted; 
}
.spanCrown1:after {content: ""; 
position: absolute; 
width: 1em; height: .05em; 
left: .0em; top: -.12em; 
background-color: red; 
}
</style>
<p><span class=spanCrown1></span> Crown 1. [&#128081; (&amp;#128081;) símbolos varios 'corona'.]</p>


<style type="text/css">
.spanCrown2 {display: inline-block; 
background-color: chocolate; 
border-width: .25em .1em 0; 
border-color: goldenrod white; 
border-style: double solid; 
width: .9em; height: 0; 
margin: 0 .8em .1em; 
position: relative; 
}
.spanCrown2:before {content: ""; 
position: absolute; 
left: -6%; 
width: 1em; height: 0; 
margin: -.4em auto auto; 
border-width: .125em 0 0; 
border-color: red; 
border-style: dotted; 
}
.spanCrown2:after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .24em; top: -.6em; 
border-width: .1em .2em; 
border-color: gold; 
border-style: solid; 
border-radius: .4em .4em .2em .2em / .2em .2em; 
}
</style>
<p><span class=spanCrown2></span> Crown 2. </p>


<style type="text/css"> /* 2/Nov/2014 13:56 */
.spanDiamond {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .7em; height: .6em; 
background-image: 
linear-gradient(245deg, transparent, transparent .27em, silver .28em, silver 100%), 
linear-gradient(115deg, transparent, transparent .27em, silver .28em, silver 100%), 
linear-gradient(225deg, transparent, transparent .13em, darkgrey .14em, darkgrey 100%), 
linear-gradient(135deg, transparent, transparent .13em, grey .14em, grey 100%), 
linear-gradient(110deg, grey, grey .14em, transparent .15em, transparent 100%), 
linear-gradient(250deg, grey, grey .14em, transparent .15em, transparent 100%), 
linear-gradient(230deg, darkgrey, darkgrey .26em, transparent .27em, transparent 100%), 
linear-gradient(130deg, silver, silver .26em, transparent .27em, transparent 100%); 
background-size: 51% .21em, 51% .21em, 51% .21em, 51% .21em, 51% .39em, 51% .39em, 51% .39em, 51% .39em; 
background-repeat: no-repeat; 
background-position: right 0, 0 0, right 0, 0 0, right .21em, 0 .21em, 0 .21em, right .21em; 
}
</style>
<p><span class=spanDiamond></span> Diamond. ['diamante'.]</p>


<style type="text/css">
.spanPhantom{position: relative; 
display: inline-block; 
margin: 0 1em .2em; 
width: .75em; height: .85em; 
background-color: black; 
border-radius: 50% 50% 0 0; 
}
.spanPhantom:before {content: ""; 
position: absolute; 
display: block; 
width: .15em; height: .15em; 
left: .2em; top: .2em; 
background-color: white; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: .25em 0 0 0 white, -.2em .6em 0 .022em black, -.05em .55em 0 .022em white, 
.1em .6em 0 .022em black, .25em .55em 0 .022em white, .4em .6em 0 .022em black; 
}
</style>
<p><span class=spanPhantom></span> Phantom. ['fantasma'.]</p>

<style type="text/css"> /* 1/Abr/2014 21:20 */
.spanSkull {position: relative; 
display: inline-block; 
margin: 0 1.1em .1em; 
width: .6em; height: .5em; 
background-color: black; 
border-radius: 50%; 
}
.spanSkull:before {content: ""; 
position: absolute; 
width: .03em; height: .01em; 
left: .155em; top: .3em; 
background-color: white; 
border-color: black rgba(0,0,0,.99) transparent; 
border-style: solid; 
border-width: 0 .15em .3em; 
border-radius: 0 0 .1em .1em; 
background-image: linear-gradient(white 0, white 100%), 
linear-gradient(black 0, black 100%); 
background-size: 1.2em .02em, 1em 1em; 
background-repeat: repeat-x; 
background-position: 0 .21em, 0 .1em; 
background-clip: border-box; 
}
.spanSkull:after {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .12em; top: .18em; 
background-color: white; 
border-radius: 50%; 
box-shadow: .26em 0 0 0 white; 
}
</style>
<p><span class=spanSkull></span> Skull. [&#128128; (&amp;#128128;), símbolos varios y pictogramas 'calavera'.]</p>


<style type="text/css"> /* 31/Oct/2015 15:05 */
.spanGrimReaper {position: relative; 
display: inline-block; 
margin: 0 1.1em -.05em; 
width: .3em; height: .55em; 
background-color: black; 
border-style: solid; 
border-width: .1em .1em 0 .1em; 
border-color: transparent transparent black white; 
border-radius: 80% 45% 0 0 / 100% 100% 0 0; 
background-image: 
radial-gradient(ellipse, black 70%, transparent 75%), 
radial-gradient(ellipse, black 70%, transparent 75%), 
radial-gradient(ellipse, white 70%, black 75%), 
radial-gradient(ellipse, white 70%, black 75%); 
background-size: .04em .045em, .04em .045em, .145em .08em, .07em .08em; 
background-repeat: no-repeat; 
background-position: .23em -.04em, .18em -.04em, .15em -.055em, .2em -.015em; 
}
.spanGrimReaper::before {content: ""; 
position: absolute; 
width: 0; height: .7em; 
left: -.11em; top: -.13em; 
border-style: solid; 
border-width: .1em .04em 0 .2em; 
border-color: grey sienna transparent transparent; 
transform: rotate(320deg); 
}
.spanGrimReaper::after {content: ""; 
position: absolute; 
width: .11em; height: .08em; 
left: .15em; top: .3em; 
background-image: repeating-linear-gradient(white 0, white .015em, transparent .025em, white .03em); 
border-radius: 0 40% 50% 20%; 
}
</style>
<p><span class=spanGrimReaper></span> Grim Reaper. ['Parca'.]</p>


<style type="text/css"> /* 10/Nov/2014 12:39 */
.spanAngel {position: relative; 
display: inline-block; 
margin: .06em 1em 0; 
width: .8em; height: .5em; 
border-radius: .25em .25em 0 0; 
background: 
radial-gradient(circle at top left, gainsboro, gainsboro .4em, transparent .45em, transparent 100%), 
radial-gradient(circle at top right, gainsboro, gainsboro .4em, transparent .45em, transparent 100%) right top; 
background-size: 50% 100%; 
background-repeat: no-repeat; 
}
.spanAngel::before {content: ""; 
position: absolute; 
width: .05em; height: 0; 
left: .18em; top: -.3em; 
border-style: solid; 
border-width: .3em .2em .6em; 
border-color: transparent transparent skyblue; 
border-radius: 0 0 .2em .2em; 
background-image: 
radial-gradient(circle, pink, pink .1em, transparent .12em, transparent 100%); 
background-size: 100% .3em; 
background-repeat: no-repeat; 
background-position: center .04em; 
background-origin: border-box; 
}
.spanAngel::after {content: ""; 
display: block; 
margin: -.275em auto; 
width: .18em; height: .04em; 
border-style: solid; 
border-width: .025em .07em; 
border-color: lightskyblue; 
border-radius: .3em / .1em; 
}
</style>
<p><span class=spanAngel></span> Angel. [&#128124; (&amp;#128124;), símbolos varios y pictogramas 'ángel'.]</p>


<style type="text/css"> /* 21/Jun/2014 19:10 */
.spanWand {position: relative; 
display: inline-block; 
margin: 0 .9em .4em; 
width: .6em; height: .05em; 
background-color: black; 
border-color: white; 
border-style: solid; 
border-width: 0 .2em; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
box-shadow: 0 0 0 .02em black; 
}
.spanWand:before {content: ""; 
position: absolute; 
width: .07em; height: .07em; 
top: .15em; left: -.4em; 
background-color: dimgrey; 
box-shadow: .4em -.4em 0 0 grey, .3em .1em 0 0 grey; 
}
</style>
<p><span class=spanWand></span> Wand. ['varita mágica'.]</p>


<style type="text/css">
.spanCrystalBall {position: relative; 
display: inline-block; 
width: .7em; height: .7em; 
border-radius: 50%; 
margin: .5em 1em 0; 
background-color: silver; 
border-collapse: separate; 
box-shadow: inset 0 -.04em .1em .02em rgba(0, 0, 0, .7); 
}
.spanCrystalBall:before {content: ""; 
position: absolute; 
display: block; 
top: .1em; left: .4em; 
width: .1em; height: .1em; 
background-color: white; 
border-radius: 50%; 
}
.spanCrystalBall:after {content: ""; 
position: absolute; 
display: block; 
top: .25em; left: -.05em; 
width: .6em; height: .3em; 
border-style: solid; 
border-width: .1em; 
border-color: transparent transparent black transparent; 
}
</style>
<p><span class=spanCrystalBall></span> Crystal Ball. [&#128302; (&amp;#128302;), símbolos varios y pictogramas 'bola de cristal'.]</p>


<style type="text/css"> /* 28/Jul/2014 14:36 */
.spanAbacus {position: relative; 
display: inline-block; 
margin: 0 .9em -.1em; 
width: .7em; height: .7em; 
border-color: transparent transparent black; 
border-style: solid; 
border-width: .08em; 
box-shadow: inset 0 0 0 .06em black; 
background-image: repeating-linear-gradient(transparent, transparent 33%, black 33%, black 36%); 
background-clip: content-box; 
}
.spanAbacus::before , .spanAbacus::after {content: ""; 
position: absolute; 
width: 15%; height: 20%; 
left: .1em; top: 26%; 
background-color: black; 
border-radius: .05em; 
box-shadow: .11em 0 0 0 black; 
}
.spanAbacus::after {top: 60%; 
box-shadow: .13em 0 0 0 black, .36em 0 0 0 black; 
}
</style>
<p><span class=spanAbacus></span> Abacus. ['ábaco'.]</p>


<style type="text/css"> /* 3/Feb/2015 15:32 */
.spanPinceNez {position: relative; 
display: inline-block; 
margin: 0 1.2em .15em; 
width: .18em; height: .21em; 
border-style: solid; 
border-width: .06em .06em .12em; 
border-color: black black transparent; 
border-radius: 100%; 
}
.spanPinceNez::before , .spanPinceNez::after {content: ""; 
position: absolute; 
width: .35em; height: .35em; 
left: .185em; top: -.1em; 
background-color: gainsboro; 
border: solid .06em black; 
border-radius: 100%; 
}
.spanPinceNez::after {left: -.45em;
box-shadow: -.23em .14em 0 -.19em white, -.23em .14em 0 -.15em black; 
}
</style>
<p><span class=spanPinceNez></span> Pince-nez. ['quevedos'.]</p>


<style type="text/css">
.spanSpiderWeb {position: relative; 
display: inline-block; 
margin: 0 1.3em .45em; 
width: 6px; height: 1px; 
background-color: black; 
border-collapse: separate; 
box-shadow: -2px 15px 0 0 black, 4px 15px 0 0 black, 
6px 20px 0 0 black, 0 20px 0 0 black, 
-6px 20px 0 0 black, -6px -10px 0 0 black, 
0 -10px 0 0 black, 6px -10px 0 0 black, 4px -6px 0 0 black, 
-2px -6px 0 0 black, 0 10px 0 0 black, 8px 5px 0 0 black, 
14px 5px 0 0 black, -14px 5px 0 0 black, -8px 5px 0 0 black;
}
.spanSpiderWeb:before {content: ""; 
position: absolute; 
display: block; 
left: 4px; top: 3px; 
width: 6px; height: 1px; 
background-color: black; 
border-collapse: separate; 
box-shadow: 3px -7px 0 0 black, -3px -7px 0 0 black, 0 -11px 0 0 black, 
-6px -11px 0 0 black, 6px -11px 0 0 black, 6px 20px 0 0 black, 
0 20px 0 0 black, -6px 20px 0 0 black, -3px 14px 0 0 black, 
2px 14px 0 0 black, 15px 4px 0 0 black, 9px 4px 0 0 black, 
-15px 4px 0 0 black, 0 9px 0 0 black, -9px 4px 0 0 black;
-webkit-transform: rotate(60deg); 
-moz-transform: rotate(60deg); 
-ms-transform: rotate(60deg); 
transform: rotate(60deg); 
}
.spanSpiderWeb:after {content: ""; 
position: absolute; 
display: block; 
left: -4px; top: 3px; 
width: 6px; height: 1px; 
background-color: black; 
border-collapse: separate; 
box-shadow: 3px -5px 0 0 black, 6px -11px 0 0 black, 
-3px -5px 0 0 black, 0 -11px 0 0 black, 
-6px -11px 0 0 black, -5px 20px 0 0 black, -5px 20px 0 0 black, 
0 20px 0 0 black, 6px 20px 0 0 black, 3px 15px 0 0 black, 
-2px 15px 0 0 black, 9px 5px 0 0 black, 15px 5px 0 0 black, 
-14px 5px 0 0 black, -8px 5px 0 0 black, 0 10px 0 0 black;
-webkit-transform: rotate(300deg); 
-moz-transform: rotate(300deg); 
-ms-transform: rotate(300deg); 
transform: rotate(300deg); 
}
</style>
<p><span class=spanSpiderWeb></span> Spiderweb (Web, Internet). ['telaraña'.]</p>


<style type="text/css"> /* 24/May/2015 20:29 */
.spanTrident {position: relative; 
display: inline-block; 
margin: 0 .8em .08em; 
width: 1.2em; height: .34em; 
border-radius: 200% 0 0 200%; 
background-image: radial-gradient(ellipse at left, black, black 66%, transparent 75%, transparent); 
background-position: 0 center; 
background-size: 100% .08em; 
background-repeat: no-repeat; 
transform: rotate(340deg); 
}
.spanTrident::before {content: ""; 
position: absolute; 
width: .3em; height: .32em; 
right: 0; top: 0; 
border-style: solid; 
border-width: .025em 0 .025em .05em; 
border-color: black; 
border-radius: .5em 0 0 .5em; 
}
</style>
<p><span class=spanTrident></span> Trident. [&#128305; (&amp;#128305;), símbolos varios y pictogramas 'tridente heráldico'; 
&#9798; (&amp;#9798;), símbolos varios 'neptuno'.]</p>


<style type="text/css"> /* 28/Nov/2015 21:38 */
.spanBauhaus {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .7em; height: .7em; 
background-color: white; 
border: solid .045em black; 
border-radius: 100%; 
background-image: 
linear-gradient(black,black), 
linear-gradient(black,black), 
linear-gradient(black,black), 
linear-gradient(black,black), 
linear-gradient(black,black), 
linear-gradient(black,black); 
background-size: .08em .12em, .04em .17em, .045em .46em, .18em .03em, .14em .03em; 
background-repeat: no-repeat; 
background-position: .32em .58em, .4em .44em, .44em 0, .26em .57em, .34em .44em; 
background-clip: content-box; 
}
.spanBauhaus::before {content: ""; 
position: absolute; 
width: .065em; height: .065em; 
left: .22em; top: .2em; 
background-color: black; 
border-style: solid; 
border-width: 0 0 .04em .045em; 
border-color: white; 
box-shadow: .02em -.02em 0 .015em black, .12em .3em 0 -.025em black; 
}
</style>
<p><span class=spanBauhaus></span> Bauhaus. </p>


<style type="text/css"> /* 29/Nov/2014 22:39 */
.spanLis {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .7em; height: .7em; 
background:  
radial-gradient(circle, white, white .14em, transparent .14em, transparent 100%) .01em .14em, 
radial-gradient(circle, black, black .15em, transparent .16em, transparent 100%) -.01em .07em, 
radial-gradient(ellipse at right, white, white .04em, black .05em, black .1em, transparent .1em, transparent 100%) 34% -.18em, 
radial-gradient(ellipse at left, white, white .04em, black .05em, black .1em, transparent .1em, transparent 100%) right 34% top -.18em, 
radial-gradient(circle, white, white .14em, transparent .14em, transparent 100%) right .01em top .14em, 
radial-gradient(circle, black, black .15em, transparent .16em, transparent 100%) right -.01em top .07em, white; 
background-size: 45% 100%, 45% 100%, 25% 110%, 25% 110%; 
background-repeat: no-repeat; 
}
.spanLis::before {content: ""; 
display: block; 
margin: .42em auto; 
width: .2em; height: .2em; 
border-style: solid; 
border-width: .08em .06em; 
border-color: black transparent transparent; 
background-image: 
radial-gradient(circle at top right, white, white .08em, black .08em, black 100%), 
radial-gradient(circle at top left, white, white .08em, black .08em, black 100%), 
radial-gradient(circle at bottom right, white, white .08em, black .08em, black 100%), 
radial-gradient(circle at bottom left, white, white .08em, black .08em, black 100%); 
background-position: right top, left top, right bottom, left bottom; 
background-size: 50% 50%; 
background-repeat: no-repeat; 
background-clip: content-box; 
}
</style>
<p><span class=spanLis></span> Fleur de Lis. [&#9884; (&amp;#9884;), símbolos varios 'flor de lis'.]</p>


<style type="text/css"> /* 24/Sep/2014 11:10 */
.spanWheatSpike {position: relative; 
display: inline-block; 
margin: 0 1.3em -.05em; 
width: .03em; height: .8em; 
background-color: goldenrod; 
}
.spanWheatSpike::before ,.spanWheatSpike::after {content: ""; 
position: absolute; 
width: .15em; height: .2em; 
left: -.17em; top: 0; 
background-color: goldenrod; 
border-radius: 0 .15em; 
box-shadow: 0 .2em 0 0 goldenrod, 0 .4em 0 0 goldenrod; 
}
.spanWheatSpike::after {left: .06em; 
border-radius: .15em 0; 
}
</style>
<p><span class=spanWheatSpike></span> Wheat Spike. ['espiga de trigo'.]</p>


<style type="text/css"> /* 27/Jul/2014 18:38 */
.spanClover {position: relative; 
display: inline-block; 
margin: 0 1.2em .1em; 
width: 0; height: 0; 
border-color: black transparent; 
border-style: solid; 
border-width: .28em .18em; 
border-radius: .2em / .4em; 
transform: rotate(340deg); 
}
.spanClover::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.27em; top: -.17em; 
border-color: transparent black; 
border-style: solid; 
border-width: .18em .28em; 
border-radius: .4em / .2em; 
}
.spanClover::after {content: ""; 
position: absolute; 
width: .2em; height: .3em; 
left: -.07em; top: .13em; 
border-color: transparent black transparent transparent; 
border-style: solid; 
border-width: 0 .05em .05em .05em; 
border-radius: .3em / .5em; 
}
</style>
<p><span class=spanClover></span> Four Leaf Clover. [&#127808; (&amp;#127808;), símbolos varios y pictogramas '<i>trébol</i> de cuatro hojas'.]</p>


<style type="text/css">
.spanBouquet {position: relative; 
display: inline-block; 
width: 0; height: 0; 
margin: 0 1.3em 0 1em; 
border-style: solid solid groove; 
border-color: gray transparent; 
border-width: .5em .2em .2em; 
border-radius: 0 0 50% 50%;
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
transform: rotate(45deg); 
}
.spanBouquet:before {content: ""; 
position: absolute; 
top: -.75em; left: -.1em; 
width: .1em; height: .1em; 
background-color: pink; 
border-radius: 100%; 
border-collapse: separate; 
box-shadow: 0 .03em 0 .05em red,
.05em -.21em 0 0 pink, .06em -.2em 0 .05em #ff0000, 
.1em .09em 0 0 pink, .1em .1em 0 .06em #660000, 
.25em .12em 0 0 white, .24em .1em 0 .05em #ff9999, 
-.14em -.04em 0 0 pink, -.1em -.04em 0 .07em #990000, 
-.14em .13em 0 0 pink, -.14em .1em 0 .07em #ee6600, 
.23em -.1em 0 0 pink, .2em -.08em 0 .06em #cc0000, 
0em .03em 0 .15em green; 
}

</style>
<p><span class=spanBouquet></span> Bouquet. [&#127799; (&amp;#128144;), símbolo 'ramo de flores'.]</p>

<style type="text/css">
.spanTulip {position: relative; 
display: inline-block; 
width: 0; height: 0; 
margin: 0 1em .3em; 
border-style: solid; 
border-color: black transparent; 
border-width: 0 .35em .5em; 
border-radius: 0 0 50% 50%;
}
.spanTulip:before {content: ""; 
position: absolute; 
top: .15em; left: -.1em; 
width: .5em; height: .6em; 
background-color: black; 
border-radius: 100% 0 80% 40%; 
border-collapse: separate; 
box-shadow: 0 0 0 .025em white;
}
.spanTulip:after {content: ""; 
position: absolute; 
top: .15em; left: -.4em; 
width: .5em; height: .6em; 
background-color: black; 
border-radius: 0 100% 30% 70%; 
border-collapse: separate; 
box-shadow: 0 0 0 .025em white;
}
</style>
<p><span class=spanTulip></span> Tulip. [&#127799; (&amp;#127799;), símbolo 'tulipán'.]</p>


<style type="text/css"> /* 31/May/2014 21:30 */
.spanFlower {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .6em; height: .6em; 
background-image: radial-gradient(orange 0, orange 19%, transparent 20.5%, transparent 100%), 
radial-gradient(circle, rgba(130,0,75,.5) 0, rgba(255,100,255,.3) .12em, indigo .15em, transparent .16em, transparent 100%); 
background-size: 100% 100%, .3em .3em; 
background-repeat: repeat; 
background-position: 0 0; 
}
.spanFlower::before, .spanFlower::after{content: ""; 
position: absolute; 
width: inherit; height: inherit; 
left: 0; top: 0; 
background-image: inherit; 
background-size: inherit; 
background-repeat: inherit; 
background-position: inherit; 
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.spanFlower::after {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
</style>
<p><span class=spanFlower></span> Flower. Florette. [&#10048; (&amp;#10048;), dingbats 'rosetón (gráfico)'; &#127989; (&amp;#127989;), símbolos varios y pictogramas 'rosetón (gráfico)'.]</p>


<style type="text/css"> /* 4/Dic/2014 13:44 */
.spanFlowerLeaf {position: relative; 
display: inline-block; 
margin: 0 1.3em 0 1.1em; 
width: .6em; height: .7em; 
border-radius: 0 0 100% 100%; 
background-image: 
radial-gradient(circle at left bottom, green, green .29em, transparent .3em, transparent 100%), 
radial-gradient(circle at right bottom, green, green .29em, transparent .3em, transparent 100%), 
linear-gradient(90deg, transparent, transparent 45%, green 45%, green 55%, transparent 55%, transparent 100%); 
}
.spanFlowerLeaf::before {content: ""; 
display: block; 
width: .15em; height: .15em; 
margin: .1em auto; 
background-color: yellow; 
border-radius: 100%; 
box-shadow: .115em .055em 0 .01em darkorange, -.115em .055em 0 .01em darkorange, 
.11em -.075em 0 .01em darkorange, -.115em -.075em 0 .01em darkorange, 
0 -.125em 0 .01em darkorange, 0 .125em 0 .01em darkorange; 
}
</style>
<p><span class=spanFlowerLeaf></span>Flower with Leaf. [&#9880; (&amp;#9880;), símbolos varios 'flor'.]</p>


<style type="text/css"> /* 21/Oct/2014 16:19 */
.spanLeaf1 {position: relative; 
display: inline-block; 
margin: 0 1.3em .2em 1em; 
width: .4em; height: .3em; 
border-radius: 0 .2em .2em .2em / 0 .15em .15em .25em; 
background-image: 
linear-gradient(to bottom left, yellowgreen 0, yellowgreen 45%, olivedrab 48%, olivedrab 52%, yellowgreen 55%, yellowgreen 100%); 
transform: rotate(30deg); 
}
.spanLeaf1::before {content: ""; 
position: absolute; 
width: .4em; height: .3em; 
left: .3em; top: 0; 
border-radius: .2em 0 .2em .2em / .15em 0 .25em .15em; 
background-image: 
linear-gradient(to bottom right, yellowgreen 0, yellowgreen 45%, olivedrab 48%, olivedrab 52%, yellowgreen 55%, yellowgreen 100%); 
}
.spanLeaf1::after {content: ""; 
position: absolute; 
width: .4em; height: .4em; 
left: .1em; top: -.2em; 
border-style: solid; 
border-width: 0 .1em .1em 0; 
border-color: transparent; 
border-radius: 0 .35em 0 .35em; 
background: 
linear-gradient(to bottom left, transparent 0, transparent 47%, olivedrab 48%, olivedrab 52%, transparent 53%, transparent 100%), yellowgreen; 
background-clip: border-box, content-box; 
background-origin: border-box, content-box; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanLeaf1></span> Leaf 1. [&#127810; (&amp;#127810;), símbolos varios y pictogramas 'hoja cayendo'.]</p>


<style type="text/css"> /* 4/Nov/2014 19:27 */
.spanLeaf2 {position: relative; 
display: inline-block; 
margin: 0 1.1em -.1em 1em; 
width: .4em; height: .4em; 
border-style: solid; 
border-width: .0em .2em .2em .0em; 
border-color: transparent; 
border-radius: 0 .5em .3em .4em / 0 .4em .3em .5em; 
background: 
radial-gradient(ellipse at left bottom, transparent, transparent 60%, limegreen 63%, limegreen 65%, transparent 65%, transparent 100%), forestgreen; 
background-size: 70% 100%, 100% 100%; 
background-repeat: no-repeat; 
background-position: 30% 0, 0 0; 
background-clip: border-box, content-box; 
background-origin: border-box, content-box; 
transform: rotate(320deg); 
}
.spanLeaf2::before {content: ""; 
position: absolute; 
left: .37em; top: .05em; 
width: .4em; height: .4em; 
border-style: solid; 
border-width: .0em .0em .15em .15em; 
border-color: inherit; 
border-radius: .4em 0 .3em .3em / .25em 0 .4em .3em; 
background: 
radial-gradient(ellipse at right bottom, transparent, transparent 60%, limegreen 63%, limegreen 65%, transparent 65%, transparent 100%), forestgreen; 
background-size: inherit; 
background-repeat: inherit; 
background-position: right 30% top 0, 0 0; 
background-clip: inherit; 
background-origin: inherit; 
transform: rotate(40deg); 
}
</style>
<p><span class=spanLeaf2></span> Leaf 2. </p>


<style type="text/css"> /* 28/Dic/2014 11:52 */
.spanLeaf3 {position: relative; 
display: inline-block; 
margin: 0 .8em; 
width: 1.2em; height: .73em; 
overflow: hidden; 
background: 
radial-gradient(ellipse, green, green 65%, transparent 65%, transparent 100%) right .2em bottom 0, 
radial-gradient(ellipse, green, green 65%, transparent 65%, transparent 100%) center top, 
linear-gradient(green, green) center bottom, 
linear-gradient(green, green) center bottom .05em, 
radial-gradient(ellipse, green, green 65%, transparent 65%, transparent 100%) left .2em bottom 0; 
background-size: .35em .1em, .15em 85%, .03em .3em, .3em .03em; 
background-repeat: no-repeat; 
}
.spanLeaf3::before , .spanLeaf3::after {content: ""; 
position: absolute; 
width: .77em; height: .77em; 
left: .11em; top: -.12em; 
background-image: 
radial-gradient(ellipse, green, green 65%, transparent 65%, transparent 100%), 
radial-gradient(ellipse, green, green 65%, transparent 65%, transparent 100%), 
linear-gradient(green, green), 
linear-gradient(green, green); 
background-size: 80% .15em, .15em 80%, .1em .03em, .03em .1em; 
background-repeat: no-repeat; 
background-position: right bottom, 0 0, left .1em bottom .07em, left .07em bottom .1em; 
transform: rotate(300deg); 
}
.spanLeaf3::after {left: .31em; 
transform: rotate(330deg); 
}
</style>
<p><span class=spanLeaf3></span> Leaf 3. </p>


<style type="text/css"> /* 30/Oct/2014 16:27 */
.spanMapleLeaf {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .3em; height: .1em; 
border-style: solid; 
border-width: .3em .1em .4em; 
border-color: transparent white; 
border-radius: 0 0 100% 100%; 
background-image: 
linear-gradient(90deg, black, black), 
linear-gradient(190deg, black, black .3em, transparent .3em, transparent 100%), 
linear-gradient(170deg, black, black .3em, transparent .3em, transparent 100%), 
linear-gradient(290deg, black, black .16em, transparent .16em, transparent 100%), 
linear-gradient(70deg, black, black .16em, transparent .16em, transparent 100%), 
linear-gradient(335deg, black, black .32em, transparent .32em, transparent 100%), 
linear-gradient(25deg, black, black .32em, transparent .32em, transparent 100%); 
background-size:  10% 40%, 100% 51%, 100% 51%, 51% 51%, 51% 51%, 100% 51%, 100% 51%; 
background-repeat: no-repeat; 
background-position: center bottom, 0 bottom, 0 bottom, 0 0, right 0, 0 0, 0 0, .18em 0, 0 0; 
background-origin: border-box; 
}
.spanMapleLeaf::before , .spanMapleLeaf::after {content: ""; 
position: absolute; 
left: .24em; top: -.08em; 
width: 0; height: .25em; 
border-style: solid; 
border-width: .15em .18em 0; 
border-color: rgba(255,0,0,.0) black; 
border-radius: .2em .2em 0 0 / .5em .5em 0 0; 
background-image: 
linear-gradient(70deg, black, black 35%, transparent 35%, transparent 100%), 
linear-gradient(290deg, black, black 35%, transparent 35%, transparent 100%); 
background-size: 51% 50%; 
background-repeat: no-repeat; 
background-position: right 0, 0 0; 
background-origin: border-box; 
transform: rotate(55deg); 
clip: rect(.0em .31em .6em .05em); 
}
.spanMapleLeaf::after {left: -.29em; 
transform: rotate(-55deg); 
}
</style>
<p><span class=spanMapleLeaf></span> Maple Leaf. [&#127809; (&amp;#127809;), símbolos varios y pictogramas 'hoja de arce'.]</p>


<style type="text/css"> /* 15/Sep/2014 18:08 */
.spanMushroom {position: relative; 
display: inline-block; 
margin: 0 1em .3em; 
width: .7em; height: .4em; 
background-color: red; 
border-radius: .5em .5em .3em .3em / .4em .4em .15em .15em; 
background-image: radial-gradient(ellipse at bottom, gold, gold .18em, red .3em, red 100%); 
background-size: 100% .08em; 
background-repeat: no-repeat; 
background-position: center .328em; 
}
.spanMushroom::before {content: ""; 
position: absolute; 
width: .25em; height: .3em; 
left: .23em; top: .37em; 
background-color: maroon; 
border-radius: .14em .14em .1em .1em / .2em .2em .1em .1em; 
}
.spanMushroom::after {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: .1em; top: .1em; 
background-color: white; 
border-radius: 100%; 
box-shadow: .17em .1em 0 0 white, .27em -.05em 0 0 white, .45em .14em 0 0 white; 
}
</style>
<p><span class=spanMushroom></span> Mushroom. [&#127812; (&amp;#127812;), símbolos varios y pictogramas 'seta'.]</p>


<style type="text/css"> /* 11/Jul/2015 15:40 */
.spanCactus {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em 1.1em; 
width: .6em; height: .8em; 
background-image: 
radial-gradient(ellipse, red .06em, transparent .08em), 
radial-gradient(circle, green .075em, transparent .1em), 
radial-gradient(circle, green .06em, transparent .08em), 
radial-gradient(circle, green .06em, transparent .08em), 
linear-gradient(green, green); 
background-size: .16em .12em, .18em .18em, .14em .14em, .15em .14em, .18em .6em; 
background-repeat: no-repeat; 
background-position: center 0, center .095em, 0 .14em, right -.01em top .25em, center bottom; 
}
.spanCactus::before , .spanCactus::after {content: ""; 
position: absolute; 
width: .13em; height: .16em; 
left: 0; top: .23em; 
background-color: transparent; 
border-style: solid; 
border-width: 0 .13em .13em .13em; 
border-color: transparent green green; 
border-radius: 0 0 0 .18em; 
}
.spanCactus::after {
left: auto; top: .34em; right: 0; 
border-radius: 0 0 .18em 0; 
}
</style>
<p><span class=spanCactus></span> Cactus. [&#127797; (&amp;#127797;), símbolos varios y pictogramas 'cacto'.]</p>


<style type="text/css"> /* 18/Ene/2015 14:05 */
.spanLabrys {position: relative; 
display: inline-block; 
margin: 0 .8em .2em 1.2em; 
width: .16em; height: .2em; 
background-color: black; 
border-style: solid groove solid ridge; 
border-width: .14em .24em; 
border-color: white dimgrey; 
border-radius: 45%; 
background-clip: content-box; 
transform: rotatez(45deg); 
}
.spanLabrys::before {content: ""; 
display: block; 
width: .1em; height: .8em; 
margin: -.06em auto; 
background-color: black; 
border-radius: .06em; 
}
</style>
<p><span class=spanLabrys></span> Labrys. Doubleheaded Axe. ['hacha bipena de guerra'.]</p>


<style type="text/css"> /* 24/Feb/2016 19:58 */
.spanFetter {position: relative; 
display: inline-block; 
margin: 0 1.5em 0 .6em; 
width: .5em; height: .5em; 
background-color: grey; 
border-radius: 100%; 
box-shadow: inset -.1em -.1em .1em .1em black; 
}
.spanFetter::before {content: ""; 
position: absolute; 
width: .8em; height: .03em; 
left: .45em; top: .25em; 
background-color: dimgrey; 
border-style: dashed; 
border-width: .03em; 
border-color: dimgrey transparent; 
background-clip: content-box; 
}
.spanFetter::after {content: ""; 
position: absolute; 
width: .36em; height: .2em; 
left: 1.25em; top: .18em; 
background-color: white; 
border-style: solid; 
border-width: .03em 0; 
border-color: grey transparent silver; 
border-radius: 100%; 
box-shadow: inset 0 .06em 0 0 dimgrey, 0 .06em 0 0 grey; 
}
</style>
<p><span class=spanFetter></span> Fetter. ['grillete'.]</p>


<style type="text/css"> /* 23/Ago/2015 20:14 */
.spanHandcuffs {position: relative; 
display: inline-block; 
margin: 0 1em .2em 1.2em; 
width: .36em; height: 0; 
background-color: ; 
border: dotted .036em black; 
transform: rotate(330deg); 
}
.spanHandcuffs::before , .spanHandcuffs::after {content: ""; 
position: absolute; 
width: .22em; height: .26em; 
left: -.36em; top: -.16em; 
border-style: solid; 
border-width: .048em .078em .048em .048em; 
border-color: black; 
border-radius: 100% 85% 75% 100%; 
}
.spanHandcuffs::after { left: .4em; 
border-width: .048em .048em .048em .078em; 
border-radius: 85% 100% 100% 75%; 
}
</style>
<p><span class=spanHandcuffs></span> Handcuffs. ['esposas'.]</p>


<style type="text/css"> /* 8/Nov/2015 15:48 */
.spanPistol {position: relative; 
display: inline-block; 
margin: 0 .6em .05em .9em; 
width: .9em; height: .4em; 
border-style: solid; 
border-width: .215em .1em 0 0; 
border-color: black transparent; 
border-radius: .08em .1em 0 .03em; 
background-image: 
linear-gradient(105deg, transparent .09em, black .11em, black .33em, transparent .35em); 
background-repeat: no-repeat; 
}
.spanPistol::before {content: ""; 
position: absolute; 
width: .16em; height: .11em; 
left: .27em; top: .0em; 
border-style: solid; 
border-width: .03em .045em .045em .11em; 
border-color: black; 
border-bottom-right-radius: .1em .2em; 
}
</style>
<p><span class=spanPistol></span> Pistol. [&#128299; (&amp;#128299;), símbolos varios y pictogramas 'pistola'.]</p>


<style type="text/css"> /* 13/Oct/2014 14:58 */
.spanTank {position: relative; 
display: inline-block; 
margin: 0 .8em .2em; 
width: .4em; height: 0; 
border-style: solid; 
border-width: .06em .25em .11em .3em; 
border-color: transparent black black transparent; 
box-shadow: 0 .05em 0 0 black; 
}
.spanTank::before {content: ""; 
position: absolute; 
width: .35em; height: .05em; 
left: -.33em; top: -.2em; 
background-color: black; 
background-clip: content-box; 
border-style: solid; 
border-width: .075em .1em .055em .04em; 
border-color: white black white black; 
border-radius: .15em .05em .12em .1em; 
box-shadow: inset -.02em 0 0 0 white, .35em 0 0 -.02em black; 
}
.spanTank::after {content: ""; 
position: absolute; 
width: .8em; height: .14em; 
left: -.25em; top: .15em; 
border: dotted .04em black; 
border-radius: .04em .04em .15em .15em / .04em .04em .1em .1em; 
background: 
radial-gradient(circle, black, black .06em, transparent .06em, transparent 100%), 
radial-gradient(circle, black, black .04em, transparent .04em, transparent 100%), 
radial-gradient(circle, black, black .04em, transparent .04em, transparent 100%), darkgrey; 
background-repeat: repeat-x, no-repeat, no-repeat; 
background-size: .22em .12em, .07em .07em, .07em .07em; 
background-position: center bottom, 0 0, top right; 
background-clip: content-box; 
}
</style>
<p><span class=spanTank></span> Tank of War. ['tanque de guerra'.]</p>


<style type="text/css"> /* 5/Nov/2014 15:38 */
.spanCannon {position: relative; 
display: inline-block; 
margin: 0 .9em 0 .8em; 
width: 1em; height: .28em; 
background-color: black; 
border-radius: 1.3em .2em .2em 1.3em / .1em .2em .2em .1em; 
transform: rotate(25deg); 
transform-origin: right bottom; 
}
.spanCannon::before {content: ""; 
position: absolute; 
width: .14em; height: .14em; 
left: .55em; top: .18em; 
border: solid .07em black; 
border-radius: 100%; 
box-shadow: inset 0 0 0 .03em white, 0 0 0 .03em white; 
}
.spanCannon::after {content: ""; 
position: absolute; 
width: .1em; height: .05em; 
left: .75em; top: -.15em; 
border-style: solid; 
border-width: .03em .03em .1em; 
border-color: black transparent black black; 
border-radius: 100% 100% 0 0; 
}
</style>
<p><span class=spanCannon></span> Cannon of War. ['cañón de guerra'.]</p>


<style type="text/css"> /* 9/Dic/2015 19:33 */
.spanHandGrenade {position: relative; 
display: inline-block; 
margin: 0 1em 0 1.2em; 
width: .35em; height: .5em; 
bor der: solid .025em black; 
border-radius: 50% 50% 40% 40%; 
box-shadow: inset 0 0 0 .025em black; 
background: 
repeating-linear-gradient(transparent 0, transparent .09em, silver .09em, silver .12em, black .1em), 
repeating-linear-gradient(to right, black 0, black .075em, silver .075em, silver .1em, black .1em) center bottom; 
}
.spanHandGrenade::before {content: ""; 
position: absolute; 
width: .25em; height: .45em; 
left: -.03em; top: .03em; 
border-style: solid; 
border-width: .05em 0 0 .08em; 
border-color: black transparent transparent black; 
border-radius: 70% 0 100% 70% / 100%; 
transform: rotate(20deg); 
transform-origin: right top; 
}
.spanHandGrenade::after {content: ""; 
position: absolute; 
width: .2em; height: .12em; 
left: .07em; top: -.08em; 
background-color: black; 
border-radius: .04em; 
}
</style>
<p><span class=spanHandGrenade></span> Hand Grenade. ['granada de mano'.]</p>


<style type="text/css"> /* 23/Mar/2014 11:20 */
.spanCollision {position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: 1em; height: .8em; 
background-color: transparent; 
background-image: radial-gradient(circle, transparent 0, transparent .3em, black .3em, black .35em, transparent .35em, transparent 100%),
radial-gradient(circle, transparent 0, transparent .35em, black .35em, black .4em, transparent .4em, transparent 100%), 
radial-gradient(circle, transparent 0, transparent .25em, black .25em, black .3em, transparent .3em, transparent 100%), 
radial-gradient(circle, transparent 0, transparent .3em, black .3em, black .35em, transparent .35em, transparent 100%), 
radial-gradient(circle, transparent 0, transparent .15em, black .15em, black .2em, transparent .2em, transparent 100%), 
radial-gradient(circle, transparent 0, transparent .15em, black .15em, black .2em, transparent .2em, transparent 100%), 
radial-gradient(circle, black 0, black .05em, transparent .17em, transparent 100%); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-position: .5em -.3em, .53em .4em, -.09em .5em, -.55em .09em, -.35em -.35em, .01em -.44em, 0 0; 
border-radius: .4em; 
}
</style>
<p><span class=spanCollision></span>  Collision. [&#128165; (&amp;#128165;), símbolos varios y pictogramas 'golpe', 'choque'.]</p>


<style type="text/css"> /* 21/Mar/2014 18:52 */
.spanTNT {position: relative; 
display: inline-block; 
margin: 0 .85em; 
width: 1em; height: .3em; 
background-color: grey; 
border-radius: .1em / .2em; 
}
.spanTNT:before {content: ""; 
position: absolute; 
width: .15em; height: .3em; 
right: 0; top: .0em; 
background-color: silver; 
border-radius: .1em / .2em; 
}
.spanTNT:after {content: ""; 
position: absolute; 
width: .2em; height: .2em; 
left: .9em; top: -.06em; 
border-color: transparent black black transparent; 
border-style: solid; 
border-width: .03em; 
border-radius: 50%; 
box-shadow: .05em -.2em .1em -.05em red; 
}
</style>
<p><span class=spanTNT></span> Dynamite. ['dinamita'.]</p>

<style type="text/css"> /* 21/Mar/2014 23:01 */
.spanBomb {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .5em; 
background-color: black; 
border: .025em solid black; 
border-radius: 100%; 
border-collapse: separate; 
box-shadow: inset 0 .09em .02em -.03em white; 
}
.spanBomb:before {content: ""; 
position: absolute; 
width: .2em; height: .08em; 
left: .15em; top: -.16em; 
background-color: transparent; 
border-color: transparent transparent black; 
border-style: solid; 
border-width: 0 0 .08em 0; 
background-image: linear-gradient(to right, transparent 0, transparent .08em, black .08em, black .12em, transparent .12em, transparent 100%); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-position: 0 0; 

}
.spanBomb:after {content: ""; 
position: absolute; 
width: .07em; height: .07em; 
left: .17em; top: -.28em; 
background-color: yellow; 
border-color: rgba(235,120,0,.5); 
border-style: solid; 
border-width: .06em; 
border-radius: 50%; 
}
</style>
<p><span class=spanBomb></span> Bomb. [&#128163; (&amp;#128163;), símbolos varios y pictogramas 'bomba'.]</p>


<style type="text/css"> /* 16/Sep/2014 17:51 */
.spanSkyrocket {position: relative; 
display: inline-block; 
margin: 0 1.25em .05em; 
width: .15em; height: .55em; 
border: solid .025em black; 
box-shadow: inset -.05em 0 .05em 0 rgba(0, 0, 0, .7); 
background-image: 
repeating-linear-gradient(-45deg, black, black .095em, transparent .1em, transparent .17em); 
transform: rotate(45deg); 
}
.spanSkyrocket::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.09em; top: -.19em; 
border-style: solid; 
border-width: 0 .175em .19em; 
border-color: black transparent; 
}
.spanSkyrocket::after {content: ""; 
position: absolute; 
width: .02em; height: .35em; 
left: -.02em; top: .55em; 
background-color: black; 
}
</style>
<p><span class=spanSkyrocket></span> Skyrocket. ['cañita voladora'.]</p>


<style type="text/css">
.spanFireWorks{position: relative; 
display: inline-block; 
margin: 0 .9em; 
width: .8em; height: .8em; 
background-color: black; 
border: dotted white .05em; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: 0 0 .03em .05em black;
-webkit-transform: rotate(0deg); 
-ms-transform: rotate(0deg); 
transform: rotate(0deg); 
}
.spanFireWorks:before {content: ""; 
position: absolute; 
display: block; 
width: .6em; height: .6em; 
left: .05em; top: 0; 
border-radius: 50%; 
border: dotted white .05em; 
}
.spanFireWorks:after {content: ""; 
position: absolute; 
display: block; 
width: .4em; height: .4em; 
left: .15em; top: .1em; 
border-radius: 50%; 
border: dotted white .05em; 
border-collapse: separate; 
box-shadow: inset 0 0 .1em .1em white; 
}
</style>
<p><span class=spanFireWorks></span> Fireworks. [&#127878; (&amp;#127878;), símbolos varios y pictogramas 'fuegos artificiales'.]</p>


<style type="text/css">
.spanFire {position: relative; 
display: inline-block; 
border-style: ridge; 
width: 0; height: 0; 
margin: .5em 1.15em 0; 
border-collapse: separate; 
border-width: .7em .2em .1em; 
border-color: rgb(225, 190, 0) transparent; 
border-radius: .3em 0 50% 50%  / .3em .2em 50% 50%; 
box-shadow: 0 -.1em .1em .1em rgba(255, 150, 0, .9); 
}
.spanFire:before {content: ""; 
position: absolute; 
display: block; 
width: .8em; height: .6em; 
border-radius: 100% 0; 
top: -.55em; left: -.25em; 
background-color: red; 
border-collapse: separate; 
opacity: .6; 
box-shadow: inset .1em .05em .1em .08em rgba(255, 250, 0, .9); 
}
.spanFire:after {content: ""; 
position: absolute; 
display: block; 
width: .6em; height: .8em; 
border-radius: 1% 99% 1% 99%; 
opacity: .5; 
top: -.7em; left: -.55em; 
background-color: red; 
border-collapse: separate; 
box-shadow: inset .06em -.1em .12em .05em rgba(225, 200, 0, .9); 
}
</style>
<p><span class=spanFire></span> Fire. [&#128293; (&amp;#128293;), símbolos varios y pictogramas 'fuego'.]</p>


<style type="text/css"> /* 11/Jul/2015 12:17 */
.spanCandle {position: relative; 
display: inline-block; 
margin: 0 1em -.05em; 
width: .6em; height: .5em; 
line-height: 0; 
border-style: solid; 
border-width: 0 0 .1em; 
border-color: dimgrey; 
border-radius: 0 0 80% 80% / 0 0 30% 30%; 
background: linear-gradient(90deg, transparent 38%, navajowhite 38%, peachpuff 62%, transparent 62%); 
}
.spanCandle::before {content: ""; 
position: absolute; 
width: .1em; height: .1em; 
left: 95%; top: .4em; 
border: solid .04em dimgrey; 
border-radius: 100%; 
}
.spanCandle::after {content: ""; 
display: block; 
margin: -.18em auto; 
width: .15em; height: .15em; 
left: .2em; top: -.2em; 
background-color: yellow; 
border-radius: 0 100% 100% 100%; 
box-shadow: inset .01em .01em .02em .05em orange; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanCandle></span> Candle. [&#128367; (&amp;#128367;), símbolos varios y pictogramas 'vela', 'candil'.]</p>


<style type="text/css"> /* 2/Ago/2015 11:00 */
.spanEasterEgg {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .55em; height: .7em; 
background-color: black; 
border-radius: 75% / 100% 100% 50% 50%; 
background-image: 
radial-gradient(ellipse, silver 60%, transparent 65%), 
radial-gradient(ellipse, silver 60%, transparent 65%), 
radial-gradient(ellipse, silver 60%, transparent 65%), 
radial-gradient(ellipse, silver 60%, transparent 65%), 
radial-gradient(circle, silver 50%, transparent 55%); 
background-size: .1em .05em; 
background-repeat: repeat-x; 
background-position: 0 .15em, .05em .18em, 0 .51em, .05em .48em, center center; 
}
</style>
<p><span class=spanEasterEgg></span> Easter Egg. ['huevo de Pascua'.]</p>


<style type="text/css"> /* 14/Jul/2015 14:01 */
.spanXmasWreath {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em; 
width: .8em; height: .8em; 
background-color: lightgreen; 
border-radius: 100%; 
background-image: 
radial-gradient(white 35%, transparent 35%), 
repeating-linear-gradient(limegreen .035em, transparent .05em, transparent .075em), 
repeating-linear-gradient(110deg, green .035em, transparent .05em, transparent .075em), 
repeating-linear-gradient(40deg, olivedrab .035em, transparent .05em, transparent .075em); 
}
.spanXmasWreath::before {content: ""; 
position: absolute; 
width: .16em; height: .18em; 
left: .25em; top: .06em; 
background-color: goldenrod; 
border-style: solid; 
border-width: .08em; 
border-color: transparent transparent goldenrod; 
border-radius: 50% 50% 0 0; 
background-clip: content-box; 
transform: rotate(350deg); 
}
.spanXmasWreath::after {content: ""; 
position: absolute; 
width: .14em; height: .26em; 
left: .25em; top: .55em; 
border-style: solid; 
border-width: .05em .08em; 
border-color: red red transparent; 
border-radius: 40% 40% 0 0 / 80% 80% 0 0; 
}
</style>
<p><span class=spanXmasWreath></span> Christmas Wreath. ['corona de Navidad'.]</p>


<style type="text/css"> /* 16/Sep/2015 21:11 */
.spanChristmasBall {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
width: .5em; height: .5em; 
border-radius: 100%; 
box- shadow: inset -.06em -.06em .13em .13em red; 
background: radial-gradient(circle, white .03em, transparent .09em, transparent) -.1em -.08em, red; 
}
.spanChristmasBall::before {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
left: .18em; top: -.06em; 
background-color: red; 
border-style: solid; 
border-width: 0 .03em; 
border-color: transparent; 
box-shadow: 0 -.08em 0 -.01em green; 
background-clip: content-box; 
}
.spanChristmasBall::after {content: ""; 
position: absolute; 
width: .065em; height: .065em; 
left: .198em; top: -.25em; 
background-color: ; 
border: solid .045em green; 
border-radius: 100%; 
}
</style>
<p><span class=spanChristmasBall></span> Christmas Ball. ['bola de navidad'.]</p>


<style type="text/css">
.spanChristmasTree{position: relative; 
display: inline-block; 
margin: 0 1.1em .1em; 
width: 0; height: 0; 
border-width: 0 .3em .6em; 
border-color: green transparent; 
border-style: solid;
}
.spanChristmasTree:before {content: ""; 
position: absolute; 
display: block; 
width: .1em; height: .1em; 
left: -.05em; top: -.15em; 
background-color: goldenrod; 
border-radius: 50%; 
border-collapse: separate; 
border-collapse: separate; 
box-shadow: 0 0 .1em .06em goldenrod, 0 .3em .02em 0 red, 
.06em .46em .02em 0 red, -.1em .55em .02em 0 red, .15em .62em .02em 0 red; 
}
.spanChristmasTree:after {content: ""; 
position: absolute; 
display: block; 
width: .2em; height: .1em; 
left: -.1em; top: .6em; 
background-color: maroon; 
}
</style>
<p><span class=spanChristmasTree></span> Christmas Tree. [&#127876; (&amp;#127876;),  símbolos varios y pictogramas 'árbol de Navidad'.]</p>


<style type="text/css">
.spanTree1{position: relative; 
display: inline-block; 
margin: 0 1.2em 0; 
width: 0; height: 0; 
border-style: solid; 
border-color: maroon transparent; 
border-width: .1em .15em .6em; 
border-radius: .1em; 
}
.spanTree1:before {content: ""; 
position: absolute; 
display: block; 
width: .8em; height: .5em; 
left: -.4em; top: -.35em; 
background-color: rgba(0, 255, 0, .5); 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: inset .04em -.04em .1em .05em rgba(0, 128, 0, .8), 
inset -.04em -.04em .1em .05em rgba(0, 255, 0, 1); 
}
.spanTree1:after {content: ""; 
position: absolute; 
display: block; 
width: .08em; height: .08em; 
background-color: orange; 
border-radius: 50%; 
border-collapse: separate; 
box-shadow: -.05em -.13em 0 0 crimson, -.31em -.22em 0 0 orange, 
-.29em -.08em .03em .02em orange, .05em -.25em .07em .02em crimson, 
-.18em -.3em .03em 0 red, .15em -.15em .05em 0 tomato, 
-.2em 0 .03em .01em crimson, .15em -.02em .02em 0 orange; 
}
</style>
<p><span class=spanTree1></span> Tree 1. [&#127795; (&amp;#127795;), símbolos varios y pictogramas 'árbol'.]</p>


<style type="text/css">
.spanTree2{position: relative; 
display: inline-block; 
margin: 0 1.25em 0; 
width: .18em; height: .6em; 
background-color: black; 
}
.spanTree2:before {content: ""; 
position: absolute; 
display: block; 
width: .5em; height: .5em; 
left: -.32em; top: -.35em; 
border-radius: 50%; 
border-collapse: separate; 
background-color: dimgray; 
box-shadow: .1em -.3em 0 0 dimgray, .3em -.26em 0 0 dimgray, 
.34em .08em 0 .01em dimgray; 
}

.spanTree2:hover{
background-color: maroon; 
}
.spanTree2:hover:before {
background-color: green; 
box-shadow: .1em -.3em 0 0 green, .3em -.26em 0 0 green, 
.34em .08em 0 .01em green; 
}

</style>
<p><span class=spanTree2></span> Tree 2. </p>


<style type="text/css"> /* 7/Jun/2015 11:14 */
.spanSnowman {position: relative; 
display: inline-block; 
margin: 0 1.1em .36em; 
width: .4em; height: .3em; 
background-color: lightgrey; 
border-radius: 100%; 
box-shadow: inset 0 -.025em 0 0 darkgrey, 0 .31em 0 .1em lightgrey; 
background-image: 
radial-gradient(ellipse, black, black 70%, transparent 75%, transparent 100%), 
radial-gradient(ellipse, black, black 70%, transparent 75%, transparent 100%),
linear-gradient(to right top, transparent, transparent 50%, black 50%, black 100%); 
background-size: .05em .09em, .05em .09em, .14em .055em; 
background-repeat: no-repeat; 
background-position: .12em .07em, .21em .07em, .03em .155em; 
}
.spanSnowman::before {content: ""; 
position: absolute; 
width: .13em; height: .04em; 
left: .14em; top: -.05em; 
background-color: black; 
border-style: solid; 
border-width: 0 .065em .04em; 
border-color: black transparent; 
background-clip: content-box; 
transform: rotate(15deg); 
}
.spanSnowman::after {content: ""; 
position: absolute; 
width: .2em; height: .35em; 
left: 85%; top: .13em; 
border: none; 
border-top: dotted .035em black; 
background-image: 
linear-gradient(90deg, transparent, transparent 40%, black 45%, black 55%, transparent 60%, transparent 100%); 
box-shadow: inset 0 .035em 0 0 black; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanSnowman></span> Snowman. [&#9731; (&amp;#9731;), símbolos varios 'muñeco de nieve'.]</p>


<style type="text/css"> /* 21/Sep/2014 21:02 */
.spanShell {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em 1.1em; 
width: .8em; height: .7em; 
background-color: lavender; 
border-radius: .4em .4em .38em .38em /.25em .25em .6em .6em; 
box-shadow: inset 0 0 .15em .02em rgba(0, 0, 0, .1); 
background-image: 
linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0) 40%, lightsteelblue 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%), 
radial-gradient(ellipse at top, rgba(255,255,255,0), rgba(255,255,255,0) 55%, lightsteelblue 70%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100%); 
background-size: .8em .8em, .5em .8em; 
background-repeat: no-repeat; 
background-position: center 0; 
transform: rotate(15deg); 
}
.spanShell::before {content: ""; 
position: absolute; 
width: .25em; height: .25em; 
left: -.15em; bottom: -.1em; 
background-color: aliceblue; 
border-radius: 100%; 
box-shadow: inset -.04em 0 .05em .05em lightblue; 
}
</style>
<p><span class=spanShell></span> Shell and Pearl. ['ostra con perla'.]</p>


<style type="text/css"> /* 5/Abr/2014 18:52 */
.spanGibbet{position: relative; 
display: inline-block; 
margin: 0 1.1em 0; 
width: .4em; height: .6em; 
border-style: solid dotted solid solid;
border-color: black; 
border-width: .1em .0333em .2em .1em; 
background-image: linear-gradient(315deg, transparent 0, transparent .61em, black .61em, black .64em, transparent .64em, transparent 100%); 
}
.spanGibbet:before {content: ""; 
position: absolute; 
display: block; 
width: .1em; height: .5em; 
background-color: white; 
left: .4em; top: .3em; 
}
.spanGibbet:after {content: ""; 
position: absolute; 
display: block; 
width: .17em; height: .17em; 
background-color: white; 
left: .3em; top: .17em; 
border-radius: 0 50% 50% 50%; 
border: .0333em dotted black; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
}

</style>
<p><span class=spanGibbet></span> Gibbet. ['horca, cadalso'.]</p>


<style type="text/css"> /* 11/Mar/2015 17:29 */
.spanIndianCarp {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .75em; height: .6em; 
transform: scalex(.6); 
}
.spanIndianCarp::before {content: ""; 
position: absolute; 
width: .6em; height: .6em; 
left: 0; top: 0; 
border-style: solid; 
border-width: .15em 0 0 .15em; 
border-color: transparent; 
border-radius: 15% 0 100% 0; 
box-shadow: inset .18em .18em 0 0 grey, inset .6em .6em 0 0 black; 
background-image: 
linear-gradient(black, black), 
linear-gradient(black, black); 
background-size: .04em 150%, 150% .04em; 
background-repeat: no-repeat; 
background-position: -.04em -.15em, -.15em -.04em; 
background-clip: border-box; 
background-origin: content-box; 
transform: rotatez(45deg); 
}
.spanIndianCarp::after {content: ""; 
position: absolute; 
width: .04em; height: 100%; 
left: 48%; top: -.1em; 
background-color: black; 
}
</style>
<p><span class=spanIndianCarp></span> Indian Carp. ['carpa indigena'.]</p>


<style type="text/css"> /* 22/Feb/2015 14:18 */
.spanIgloo {position: relative; 
display: inline-block; 
margin: 0 .85em -.03em; 
width: 1em; height: .55em; 
border: solid .025em black; 
border-radius: .6em .6em .06em .06em; 
background: 
repeating-linear-gradient(to right, white, white .34em, black .34em, black .365em) .025em 0; 
overflow: hidden; 
}
.spanIgloo::before {content: ""; 
position: absolute; 
width: 1.45em; height: .17em; 
left: .02em; top: .16em; 
border-style: solid; 
border-width: .025em 0; 
border-color: black; 
background: 
repeating-linear-gradient(to right, white, white .34em, black .34em, black .365em) -.18em 0; 
}
.spanIgloo::after {content: ""; 
position: absolute; 
bottom: 0; left: .23em; 
width: .24em; height: .26em; 
border: solid .07em white; 
border-bottom: none; 
border-radius: .22em .22em 0 0; 
background-color: black; 
box-shadow: 0 0 0 .028em black; 
}
</style>
<p><span class=spanIgloo></span> Igloo. ['iglú'.]</p>


<style type="text/css"> /* 26/Mar/2015 21:30 */
.spanPyramid {position: relative; 
display: inline-block; 
margin: 0 .9em -.05em 1em; 
width: .7em; height: .65em; 
border: none; 
border-right: solid .21em transparent; 
background-image: 
linear-gradient(to bottom right, transparent, transparent 50%, darkgrey 51%, darkgrey 100%), 
linear-gradient(to bottom left, transparent, transparent 50%, darkgrey 51%, darkgrey 100%), 
linear-gradient(333deg, transparent, transparent 39%, dimgrey 41%, dimgrey 100%), 
linear-gradient(227deg, transparent, transparent 48%, dimgrey 50%, dimgrey 100%); 
background-size: 61% 100%, 41.5% 100%, 30% 21%, 53% 83%; 
background-repeat: no-repeat; 
background-position: 0 0, 100% 0, right bottom, right top; 
background-clip: content-box, content-box, border-box, border-box; 
background-origin: content-box, content-box, border-box, border-box; 
transform: rotate(5deg); 
transform-origin: 50% 0; 
}
</style>
<p><span class=spanPyramid></span> Pyramid. ['pirámide'.]</p>


<style type="text/css"> /* 25/Oct/2015 12:35 */
.spanChaplin {position: relative; 
display: inline-block; 
margin: -.1em 1em .2em .9em; 
width: .8em; height: .15em; 
background-color: black; 
line-height: 0; 
border-radius: 80%; 
}
.spanChaplin::before {content: ""; 
position: relative; 
display: block; 
margin: auto; 
width: .48em; height: .36em; 
top:-.3em ; 
background-color: black; 
border-radius: 50% 50% 0 0; 
}
.spanChaplin::after {content: ""; 
position: relative; 
display: block; 
margin: auto; 
width: .1em; height: 0; 
top: .01em; 
border-style: solid; 
border-width: 0 .045em .09em; 
border-color: black transparent; 
}
</style>
<p><span class=spanChaplin></span> Chaplin. </p>


<style type="text/css"> /* 4/Dic/2015 21:32 */
.spanMickey {position: relative; 
display: inline-block; 
margin: 0 1.07em; 
width: .5em; height: .5em; 
background-color: black; 
border-radius: 100%; 
}
.spanMickey::before , .spanMickey::after {content: ""; 
position: absolute; 
width: .28em; height: .28em; 
left: -.14em; top: -.17em; 
background-color: black; 
border-radius: 110% 90% 110% 90%; 
}
.spanMickey::after {
left: .34em; top: -.17em; 
border-radius: 90% 110% 90% 110%; 
}
</style>
<p><span class=spanMickey></span> Mickey Mouse. Disney.</p>


<style type="text/css"> /* 24/Oct/2015 14:52 */
.spanMoe {position: relative; 
display: inline-block; 
margin: 0 1.05em; 
line-height: 0; 
border: solid .05em transparent; 
border-radius: .3em .3em .3em .3em / .3em .3em .43em .43em; 
background: linear-gradient(black .35em, transparent .35em) 0 -.05em no-repeat border-box, white content-box; 
}
.spanMoe::before {content: ""; 
display: inline-block; 
width: .48em; height: .6em; 
border: solid .03em black; 
border-radius: .3em .3em .3em .3em / .3em .3em .43em .43em; 
}
</style>
<p><span class=spanMoe></span> Moe (The Three Stooges).</p>


<style type="text/css"> /* 24/Oct/2015 16:39 */
.spanLarry {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .48em; height: .6em; 
line -height: 0; 
border: solid .03em black; 
border-radius: .3em .3em .28em .28em / .3em .3em .43em .43em; 
background-color: white; 
}
.spanLarry::before {content: ""; 
position: absolute; 
left: -.08em; top: .05em; 
width: .16em; height: .16em; 
background: black; 
border-radius: 100%; 
box-shadow: -.03em .1em 0 0 black, -.03em .2em 0 0 black, 
.48em 0 0 0 black, .51em .1em 0 0 black, .51em .2em 0 0 black; 
}
</style>
<p><span class=spanLarry></span> Larry (The Three Stooges).</p>


<style type="text/css"> /* 24/Oct/2015 14:28 */
.spanCurly {position: relative; 
display: inline-block; 
margin: 0 1.1em; 
width: .5em; height: .6em; 
border: solid .03em black; 
border-radius: .3em .3em .3em .3em / .3em .3em .35em .35em; 
box-shadow: inset -.01em .045em .015em -.04em rgba(0, 0, 0, .7), 
inset 0 -.2em 0 0 white; 
background: radial-gradient(ellipse, white 80%, rgba(0, 0, 0, .6) 90%) .25em -.03em; 
}
</style>
<p><span class=spanCurly></span> Curly (The Three Stooges).</p>


<style type="text/css"> /* 14/Ago/2016 10:12 */
.spanSpectrum {position: relative; 
display: inline-block; 
margin: 0 .8em -.05em 1em; 
width: .8em; height: .8em; 
border-style: solid; 
border-width: .14em; 
border-color: darkolivegreen transparent; 
border-radius: 100%; 
box-sizing: border-box; 
background: radial-gradient(red .08em, orange, yellow, lime, royalblue, fuchsia, fuchsia, white); 
background-origin: border-box; 
box-shadow: 0 0 0 .03em silver; 
}
.spanSpectrum::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: -.12em; top: .15em; 
border-style: solid; 
border-width: .14em .4em; 
border-color: transparent darkolivegreen; 
transform: rotate(60deg); 
border-radius: 60%; 
}
</style>
<p><span class=spanSpectrum></span> Spectrum (Captain Scarlet and the Mysterons). </p>


<style type="text/css"> /* 18/Mar/2015 14:28 */
.spanLanceLonginus {position: relative; 
display: inline-block; 
margin: 0 1.2em .3em; 
width: .22em; height: .1em; 
border-style: solid; 
border-width: 0 .03em; 
border-color: black; 
border-radius: .1em; 
background-image: 
repeating-linear-gradient(-35deg, transparent, transparent 16%, black 18%, black 25%), 
repeating-linear-gradient(35deg, transparent, transparent 16%, black 18%, black 25%); 
background-size: 100% 110%; 
background-position: 0 25%; 
}
.spanLanceLonginus::before {content: ""; 
position: absolute; 
width: .6em; height: .04em; 
left: -.6em; top: 25%; 
background-color: black; 
}
.spanLanceLonginus::after {content: ""; 
position: absolute; 
width: .8em; height: .24em; 
left: 110%; top: -60%; 
border: none ; 
border-left: solid .03em black; 
border-radius: .2em .1em .1em .2em / .1em; 
background-image: 
linear-gradient(transparent, transparent 20%, black 20%, black 30%, transparent 30%, transparent 45%, white 45%, white 55%, transparent 55%, transparent 70%, black 70%, black 80%, transparent 80%, transparent 100%), 
radial-gradient(ellipse, white, white 60%, black 68%, black 100%); 
background-size: 100% 100%, 55% 60%; 
background-position: .1em center; 
}
</style>
<p><span class=spanLanceLonginus></span> Lance of Longinus (Evangelion). ['lanza de Longinos'.]</p>


<style type="text/css"> /* 25/Ago/2015 13:17 */
.spanTimeTunnel {position: relative; 
display: inline-block; 
margin: .3em .85em; 
width: 1em; height: .78em; 
vertical-align: top; 
line-height: 0; 
text-align: center; 
border-radius: 100%; 
background-image: 
radial-gradient(black, transparent 55%), 
linear-gradient(60deg, darkgrey 40%, grey 45%, transparent 50%), 
linear-gradient(300deg, silver 40%, grey 45%, transparent 50%), 
repeating-radial-gradient(ellipse, transparent, transparent .04em, black .05em, black .09em, transparent .1em); 
background-size: 100% 100%, .2em .3em, .2em .3em; 
background-repeat: no-repeat; 
background-position: 0 0, .48em bottom, .28em bottom; 
}
.spanTimeTunnel::before {content: ""; 
display: inline-block; 
width: .66em; height: .36em; 
margin-top: .18em; 
border-style: solid; 
border-width: .04em; 
border-color: transparent rosybrown; 
border-radius: 100%; 
}
</style>
<p><span class=spanTimeTunnel></span> The Time Tunnel. ['El Túnel del Tiempo'.]</p>


<style type="text/css"> /* 8/Ago/2015 20:58 */
.spanJupiterTwo {position: relative; 
display: inline-block; 
margin: 0 .6em .05em; 
width: 1.4em; height: .5em; 
background-color: black; 
background-image: 
radial-gradient(ellipse at bottom, transparent 70%, white 72%), 
linear-gradient(120deg, silver .15em, black .15em, black .175em, silver .175em, silver .26em, black .26em, black .28em, silver .28em, silver .37em, black .37em), 
radial-gradient(ellipse at top, black 80%, white 82%); 
background-size: 100% 70%, 50% .16em, 100% 80%; 
background-repeat: no-repeat; 
background-position: 0 0, 0 .13em, left bottom; 
background-clip: content-box; 
}
.spanJupiterTwo::before {content: ""; 
position: absolute; 
width: .4em; height: 0; 
left: .37em; top: 100%; 
border-style: solid; 
border-width: .08em .12em 0; 
border-color: transparent white; 
background-image: 
repeating-linear-gradient(90deg, darkgrey 0, darkgrey .07em, black .07em, black .09em); 
background-origin: border-box; 
}
.spanJupiterTwo::after {content: ""; 
position: absolute; 
width: .2em; height: .08em; 
left: .58em; top: -.08em; 
background-color: dimgrey; 
border-radius: 100% 100% 0 0; 
}
</style>
<p><span class=spanJupiterTwo></span> Jupiter-2 (Lost In Space). </p>


<style type="text/css"> /* 13/Abr/2016 17:40 */
.spanUmbrellaCorp {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1em; 
width: .7em; height: .7em; 
overflow: hidden; 
background: 
radial-gradient(circle, ivory .02em, black .03em, black .05em, transparent .06em) center center, 
linear-gradient(315deg, transparent 50%, dimgrey 50%) left top, 
linear-gradient(225deg, transparent 50%, dimgrey 50%) left bottom, 
linear-gradient(135deg, transparent 50%, dimgrey 50%) right bottom, 
linear-gradient(45deg, transparent 50%, dimgrey 50%) right top, red; 
background-size: 28% 28%; 
background-repeat: no-repeat; 
outline: solid .08em dimgrey; 
}
.spanUmbrellaCorp::before {content: ""; 
position: absolute; 
width: .06em; height: .06em; 
left: 0; top: .22em; 
border-style: solid; 
border-width: .11em .33em; 
border-color: transparent ivory; 
}
.spanUmbrellaCorp::after {content: ""; 
position: absolute; 
width: .06em; height: .06em; 
left: .22em; top: 0; 
border-style: solid; 
border-width: .33em .11em; 
border-color: ivory transparent; 
}
</style>
<p><span class=spanUmbrellaCorp></span> Umbrella Corporation (Resident Evil).</p>


<style type="text/css"> /* 13/Jul/2014 16:33 */
.spanStarfleet {position: relative; 
display: inline-block; 
margin: 0 1em; 
width: .85em; height: .55em; 
border-color: transparent; 
border-style: solid; 
border-width: .05em; 
border-radius: 100%; 
background-image: linear-gradient(goldenrod, goldenrod), 
linear-gradient(to left, gold, darkgoldenrod); 
background-repeat: no-repeat; 
background-size: .85em .55em; 
background-position: -.05em -.05em; 
background-clip: content-box, border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.spanStarfleet::before {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .2em; top: -.24em; 
border-color: transparent transparent transparent darkgrey; 
border-style: solid; 
border-width: .45em .26em .5em; 
border-radius: .1em 0 0 0; 
-webkit-transform: rotate(20deg); 
transform: rotate(20deg); 
box-shadow: -.035em .002em 0 -.008em grey; 
}
.spanStarfleet::after {content: ""; 
position: absolute; 
width: 0; height: 0; 
left: .245em; top: -.3em; 
border-color: transparent darkgrey transparent transparent; 
border-style: solid; 
border-width: .45em .15em .5em; 
border-radius: 0 .1em 0 0; 
-webkit-transform: rotate(342deg); 
transform: rotate(342deg); 
box-shadow: .035em .005em 0 -.008em silver; 
}
</style>
<p><span class=spanStarfleet></span> Starfleet Insignia (Star Trek). </p>


<style type="text/css"> /* 12/Jul/2014 18:32 */
.spanEnterprise {position: relative; 
display: inline-block; 
margin: 0 .75em; 
width: 1.3em; height: .45em; 
background-image: 
radial-gradient(ellipse, black 0, black .1em, transparent .125em, transparent 100%), 
radial-gradient(ellipse, black 0, black .3em, transparent .305em, transparent 100%), 
linear-gradient(-45deg, transparent, transparent .1em, black .105em, black .2em, transparent .205em, transparent 100%), 
linear-gradient(70deg, transparent, transparent .15em, black .16em, black .22em, transparent .23em, transparent 100%); 
background-size: .35em .2em, .55em .15em, .2em .2em, .3em .25em; 
background-repeat: no-repeat; 
background-position: .85em .015em, .35em .24em, .68em .12em, .34em .1em; 
}
.spanEnterprise::before {content: ""; 
position: absolute; 
width: .46em; height: .1em; 
left: 0; top: 0; 
background-color: black; 
border-color: black grey black dimgrey; 
border-style: solid; 
border-width: 0 .1em 0 .08em; 
border-radius: .06em .07em .07em .03em; 
box-shadow: .7em .06em 0 -.025em black; 
}
</style>
<p><span class=spanEnterprise></span> Enterprise NCC·1701 (Star Trek). </p>


<style type="text/css"> /* 2/Feb/2016 13:56 */
.spanHeavyMetal {position: relative; 
display: inline-block; 
margin: 0 .8em .1em .9em; 
width: 1em; height: .22em; 
background-color: coral; 
border-style: solid; 
border-width: .16em 0 0 0; 
border-color: grey; 
border-radius: 1em 1em 1.5em 1.5em / 1em; 
background: linear-gradient(grey, grey) center bottom no-repeat, coral; 
background-size: 86% 100%; 
}
.spanHeavyMetal::after {content: ""; 
position: absolute; 
width: .1em; height: .15em; 
left: .36em; top: -.27em; 
background-color: black; 
border-radius: 100%; 
box-shadow: .2em 0 0 0 black; 
}
.spanHeavyMetal::before {content: ""; 
position: absolute; 
width: .7em; height: .6em; 
left: .1em; top: -.38em; 
border-style: solid; 
border-width: .1em .06em; 
border-color: dimgrey; 
border-radius: 100%; 
background: 
radial-gradient(circle, coral 50%, dimgrey 50%) center .19em no-repeat, dimgrey; 
background-size: 360% 260%; 
}
</style>
<p><span class=spanHeavyMetal></span> Starship (Heavy Metal). ['nave espacial de «So Beautiful And So Dangerous»'.]</p>


<style type="text/css"> /* 31/Ago/2014 19:21 */
.spanUFO {position: relative; 
display: inline-block; 
margin: 0 .9em .2em; 
width: 1em; height: .03em; 
border-style: solid; 
border-width: .14em 0 0; 
border-color: black transparent; 
border-radius: .6em .6em 0 0 / .25em .25em 0 0; 
}
.spanUFO::before {content: ""; 
position: absolute; 
width: .42em; height: 0; 
left: .28em; top: -.27em; 
border-style: solid; 
border-width: .2em 0; 
border-color: black transparent transparent; 
border-radius: 100%; 
}
.spanUFO::after {content: ""; 
position: absolute; 
width: .15em; height: .15em; 
left: .415em; top: -.085em; 
background-color: black; 
border-radius: 100%; 
box-shadow: -.28em 0 0 0 black, .29em 0 0 0 black; 
}
</style>
<p><span class=spanUFO></span> U.F.O. ['O.V.N.I.'.]</p>


<style type="text/css">
.spanAlien{position: relative; 
display: inline-block; 
margin: 0 1.05em 0; 
width: .65em; height: .8em; 
background-color: grey; 
border-radius: .9em .9em .9em .9em / .9em .9em 2em 2em; 
}
.spanAlien:before {content: ""; 
position: absolute; 
display: block; 
width: .2em; height: .2em; 
background-color: black; 
left: .37em; top: .25em; 
border-radius: 100% 20% 100% 20%; 
box-shadow: -.16em .3em 0 -.07em black; 
}
.spanAlien:after {content: ""; 
position: absolute; 
display: block; 
width: .2em; height: .2em; 
background-color: black; 
left: .08em; top: .25em; 
border-radius: 20% 100% 20% 100%; 
box-shadow: .16em .3em 0 -.07em black; 
}

</style>
<p><span class=spanAlien></span> Extraterrestrial Alien. [&#128125; (&amp;#128125;), símbolo 'alienígena'.]</p>


<style type="text/css"> /* 2/Dic/2014 17:18 */
.spanDrop {position: relative; 
display: inline-block; 
margin: 0 .95em -.1em; 
width: .8em; height: .8em; 
transform: scalex(.75); 
}
.spanDrop::before {content: ""; 
position: absolute; 
width: .6em; height: .6em; 
left: .1em; top: .16em; 
background-color: grey; 
border-radius: 0 100% 160% 100%; 
box-shadow: inset .34em -.05em .17em .04em black; 
transform: rotate(45deg); 
}
</style>
<p><span class=spanDrop></span> Droplet. [&#128167; (&amp;#128167;), símbolos varios y pictogramas 'gota'.]</p>


<style type="text/css"> /* 27/Ago/2016 10:30 */
.spanTetradactyly {position: relative; 
display: inline-block; 
margin: 0 .8em 0 .9em; 
width: 1em; height: .7em; 
background: 
radial-gradient(ellipse, black 65%, transparent 70%) .32em 0, 
radial-gradient(ellipse, black 65%, transparent 70%) center bottom -.05em, 
radial-gradient(ellipse, black 60%, transparent 70%) .52em 0; 
background-size: .16em .24em, .55em .48em; 
background-repeat: no-repeat; 
border-radius: 0 0 60% 60% / 0 0 80% 80%; 
}
.spanTetradactyly::after, .spanTetradactyly::before {content: ""; 
position: absolute; 
width: .16em; height: .23em; 
left: .1em; top: .1em; 
background-color: black; 
border-radius: 50%; 
transform: rotate(345deg); 
}
.spanTetradactyly::after {left: .7em; 
transform: rotate(15deg); 
}
</style>
<p><span class=spanTetradactyly></span> Tetradactyly. ['tetradáctilo'.]</p>


<style type="text/css"> /* 4/May/2015 14:34 */
.spanFootprint1 {position: relative; 
display: inline-block; 
margin: 0 .7em -.05em; 
width: 1.4em; height: .7em; 
}
.spanFootprint1::before , .spanFootprint1::after {content: ""; 
position: absolute; 
width: .8em; height: .3em; 
left: 0; top: 0; 
border-radius: 75% 120% 120% 75% / 90% 100% 100% 90%; 
background: 
linear-gradient(90deg, black, black 30%, transparent 30%, transparent 36%, black 38%, black 100%); 
transform: rotate(355deg); 
}
.spanFootprint1::after {
left: auto; top: auto; right: 0; bottom: 0; 
transform: rotate(3deg); 
}
</style>
<p><span class=spanFootprint1></span> Footprint 1. Shoe Prints. [&#128099; (&amp;#128099;), símbolos varios y pictogramas 'huellas de pie'.]</p>


<style type="text/css"> /* 6/Ago/2015 20:45 */
.spanFootprint2 {position: relative; 
display: inline-block; 
margin: 0 .9em 0 1.5em; 
width: .25em; height: .38em; 
background-color: black; 
border-radius: 35% 70% 40% 30%; 
}
.spanFootprint2::before {content: ""; 
position: absolute; 
width: .1em; height: .11em; 
left: -.29em; bottom: .03em; 
background-color: black; 
border-style: solid; 
border-width: .05em .13em 0; 
border-color: transparent black; 
border-radius: 0 0 30% 20% / 0 0 60% 40%; 
background-clip: content-box; 
transform: rotate(10deg); 
}
.spanFootprint2::after {content: ""; 
position: absolute; 
left: -.545em; top: .105em; 
width: .335em; height: .25em; 
background-color: black; 
border-radius: 45% 60% 50% 50%; 
box-shadow: .695em .1em 0 -.098em black, .705em .015em 0 -.095em black, 
.695em -.07em 0 -.095em black, .655em -.145em 0 -.095em black, .59em -.225em 0 -.085em black, 
.68em .1em 0 -.09em white, .7em .015em 0 -.08em white, 
.69em -.07em 0 -.08em white, .65em -.15em 0 -.08em white, .6em -.22em 0 -.085em white; 
}
</style>
<p><span class=spanFootprint2></span> Footprint 2. </p>


<style type="text/css"> /* 21/Mar/2014 23:10 */
.spanPoop{position: relative; 
display: inline-block; 
margin: 0 .9em 0; 
width: 1em; height: .3em; 
background-color: black; 
border-radius: .3em .3em .1em .1em / .2em .2em .05em .05em; 
}
.spanPoop:before {content: ""; 
position: absolute; 
top: -.24em; left: .28em; 
display: block; 
width: .5em; height: .2em; 
background-color: black; 
border-radius: .3em .3em .1em .1em / .2em .2em .05em .05em; 
box-shadow: -.02em .18em 0 .1em black; 
}
.spanPoop:after {content: ""; 
position: absolute; 
display: block; 
width: .06em; height: .06em; 
left: .4em; top: -.36em; 
border-style: solid; 
border-width: .0em .08em .1em .1em; 
border-color: transparent black black transparent; 
border-radius: 100% 80% 50% 0; 
}

</style>
<p><span class=spanPoop></span>  Pile of Poop. [&#128169; (&amp;#128169;), símbolos varios y pictogramas 'caca'.]</p>



<hr>



<h3>Con más de un <code>span</code>.</h3>

<style type="text/css">
.spanFork {position: relative; 
display: inline-block; 
border-style: solid; 
border-color: black white; 
border-width: 0 .05em .5em; 
width: .05em; height: .3em; 
background-color: black; 
}
.spanFork:before {content: ""; 
position: absolute; 
border-style: solid; 
left: -.085em; 
background-color: transparent; 
top: 0; 
display: block; 
border-width: 0 .05em .1em; 
width: .15em; height: .2em; 
border-radius: 0 0 50% 50%; 
border-color: black; 
}

/*CON px, PARA MAYOR PRECISIÓN Y AJUSTE*/
.spanFork {position: relative; 
display: inline-block; 
border-style: solid; 
border-color: black white; 
border-width: 0 2px 22px; 
width: 2px; height: 18px; 
background-color: black; 
}
.spanFork:before {content: ""; 
position: absolute; 
border-style: solid; 
left: -.085em; 
background-color: transparent; 
top: 0; 
display: block; 
border-width: 0 2px 5px; 
width: 6px; height: 10px; 
border-radius: 0 0 50% 50%; 
border-color: black; 
}

.spanKnife {position: relative; 
display: inline-block; 
border-style: solid; 
border-color: black white; 
border-width: 0 2px 22px; 
width: 2px; height: 1px; 
background-color: black; 
}
.spanKnife:before {content: ""; 
position: absolute; 
left: -1px; top: -18px; 
width: 4px; height: 23px; 
background-color: black; 
border-radius: 50% 0 0 10%; 
}

.spanPlate {position: relative; 
display: inline-block; 
width: .35em; height: .3em; 
margin: 0 .2em; 
border-radius: 50%; 
border: .2em double black; 
background-color: white; 
}

/*CON px, PARA MAYOR PRECISIÓN Y AJUSTE*/
.spanPlate {position: relative; 
display: inline-block; 
width: 22px; 
height: 22px; 
margin: 0 12px; 
border-radius: 50%; 
border: 10px double black; 
background-color: white; 
}

.spanSpoon {position: relative; 
display: inline-block; 
border-style: solid; 
border-color: black white; 
border-width: 0 .05em .5em; 
width: .05em;
height: .3em; 
background-color: black; 
}
.spanSpoon:before {content: ""; 
position: absolute; 
background-color: black; 
width: .15em; height: .28em; 
margin: auto -.05em; 
border-radius: 50% / 50% 50% 40% 40%; 
}

/*CON px, PARA MAYOR PRECISIÓN Y AJUSTE*/
.spanSpoon {position: relative; 
display: inline-block; 
border-style: solid; 
border-color: black white; 
border-width: 0 2px 22px; 
width: 2px;
height: 16px; 
background-color: black; 
}
.spanSpoon:before {content: ""; 
position: absolute; 
background-color: black; 
width: 10px; height: 15px; 
margin: -2px -4px; 
border-radius: 50% / 50% 50% 40% 40%; 
}
</style>
<p><span class=spanFork></span> <span class=spanKnife></span> Fork and Knife. [&#127860; (&amp;#127860;), símbolo 'tenedor y cuchillo'.]</p>

<p><span class=spanFork></span> <span class=spanPlate></span> <span class=spanKnife></span> Fork, Plate and Knife. [&#127869; (&amp;#127869;), unicode no válido 'tenedor, plato y cuchillo'.]</p>

<p><span class=spanFork></span> <span class=spanPlate></span> <span class=spanKnife></span> <span class=spanSpoon></span> Fork, Plate, Knife and Spoon. ['tenedor, plato, cuchillo y cuchara'.]</p>


<style type="text/css">
.spanEye {position: relative; 
display: inline-block; 
width: .8em; height: .32em; 
border-width: .04em 0; 
border-color: black; 
border-style: solid; 
border-radius: .8em / .4em; 
margin: auto .9em .2em; 
}
.spanEye:before {content: ""; 
position: absolute; 
width: .12em; height: .12em; 
background-color: black; 
left: .25em; top: 0; 
border-radius: 50%; 
border-width: .1em; 
border-color: white; 
border-style: double; 
}
</style>
<p><span class=spanEye style="margin: auto 0 .2em"></span> <span class=spanEye></span> Eyes. [&#128064; (&amp;#128064;), símbolo 'ojos'.]</p>


<hr>
<p><small>A <a href="http://codepen.io/solipsistacp/details/uHbhI/" title="[Ctrl] + click">Íconos CSS. Parte uno</a>. | A <a href="http://codepen.io/solipsistacp/details/yKczv/" title="[Ctrl] + click">Íconos CSS. Parte dos</a>.</small></p>
<style>
  p {font-size: 2.5em; 
margin-left: 1em; 
color: dimgray; 
font-family: quivira, "arial unicode ms", "dejavu serif", "dejavu sans condensed", "dejavu serif condensed", "dejavu sans", "dejavu sans mono", "ms mincho", "titus cyberbit basic", "lucida sans unicode",  sans-serif; 
}
p span {color: black; 
}
h3 {text-decoration: underline; 
font-size: 1.2em; 
}
code {font-size: 110%; 
}

strong {font-size: small; font-weight: 900; margin: auto .5em; bottom: .5em; 
border: 3px dashed coral; padding: 2px 4px; position: relative; 
}
strong:before {content: "NEW?"; color: red; 
-webkit-animation: nuevo 600ms infinite alternate linear; 
animation: nuevo 600ms infinite alternate linear; 
}
@-webkit-keyframes nuevo {
from {color: red; background-color: transparent;}
  to {color: white; background-color: red}
}
@keyframes nuevo {
from {color: red; background-color: transparent;}
  to {color: white; background-color: red}
}

  
</style>