.example .arrow {
display: none;
height: 28px;
margin: 10px auto;
width: 300px;
position: relative;
background-repeat: no-repeat;
}
.example .arrow em {
display: block;
position: absolute;
top: 0;
right: 0;
height: 28px;
width: 19px;
background-repeat: no-repeat;
}
.example .arrow div {
height: 8px;
position: relative;
top: 10px;
margin: 0 5px;
font-size: 1px; /* for IE */
background-color: #d9d9d9;
}
.example .arrow-full {
display: block;
background-image: url({{{componentAssets}}}/arrow-left.png);
}
.example .arrow-full em {
background-image: url({{{componentAssets}}}/arrow-right.png);
}
.example .arrow-out {
display: block;
}
.example .arrow-out em {
background-image: url({{{componentAssets}}}/arrow-right.png);
}
.example .arrow-in {
display: block;
background-image: url({{{componentAssets}}}/arrow-left.png);
}