.media-icon:before {
  width: 3rem;
  height: 3rem;
  position: absolute;
  content: "";
  background: url(media_icons.png) no-repeat;
  background-size: 3rem 130rem;
}

button.media-icon,
a[role="button"].media-icon {
  padding: 0 2rem 0 4rem;
  text-align: left;
  position: relative;
  color: #717171;
}

button.media-icon:before,
a[role="button"].media-icon:before {
  left: 0.5rem;
  top: 0.3rem;
}

section[role="region"] > header:first-child .icon.media-icon:before {
  top: 1rem;
  left: 0;
}

section[role="region"] > header:first-child menu[type="toolbar"] a:last-child .icon.media-icon:before, 
section[role="region"] > header:first-child menu[type="toolbar"] button:last-child .icon.media-icon:before {
  top: 1rem;
  left: 0;
}

section[role="region"] > header:first-child > button .icon.media-icon:before, 
section[role="region"] > header:first-child > a .icon.media-icon:before {
  left: -0.5rem;
}

[role="toolbar"] button {
  position: relative;
}

[role="toolbar"] .media-icon:before {
  left: 1.25rem;
  top: 0.5rem;
}

[data-type="list"] aside.icon {
  top: 1.5rem;
  height: 4.5rem;
}

[role="tablist"].bottom > [role="tab"] > a.media-icon:before {
  top: 0.5rem;
}

[aria-disabled="true"] .media-icon:before,
[disabled].media-icon:before {
  opacity: 0.3;
}

.camera-cameraback:before { background-position:  -0px -0px; }
.camera-camerafront:before { background-position:  -0px -30px; }
.camera-flashauto:before { background-position:  -0px -60px; }
.camera-flashoff:before { background-position:  -0px -90px; }
.camera-flashon:before { background-position:  -0px -120px; }
.camera-gridview:before { background-position:  -0px -150px; }
.camera-select:before { background-position:  -0px -180px; }
.camera:before { background-position:  -0px -210px; }
.gallery-crop1x1:before { background-position:  -0px -240px; }
.gallery-crop2x3:before { background-position:  -0px -270px; }
.gallery-crop3x2:before { background-position:  -0px -300px; }
.gallery-editphoto:before { background-position:  -0px -330px; }
.gallery-freecrop:before { background-position:  -0px -360px; }
.gallery-slideshow:before { background-position:  -0px -390px; }
.media-albumfilter:before { background-position:  -0px -425px; }
.media-albumfilter:hover:before,
.media-albumfilter:active:before { background-position:  -0px -465px; }
.media-alphabetical:before { background-position:  -0px -500px; }
.media-artistfilter:before { background-position:  -0px -535px; }
.media-artistfilter:hover:before,
.media-artistfilter:after:before { background-position:  -0px -575px; }
.media-date:before { background-position:  -0px -610px; }
.media-gridview:before { background-position:  -0px -645px; }
.media-gridview:hover:before,
.media-gridview:active:before { background-position:  -0px -685px; }
.media-pause:before { background-position:  -0px -720px; }
.media-play:before { background-position:  -0px -750px; }
.media-playlistfilter:before { background-position:  -0px -785px; }
.media-playlistfilter:hover:before,
.media-playlistfilter:active:before { background-position:  -0px -825px; }
.media-repeatinfinite:before { background-position:  -0px -860px; }
.media-repeatoff:before { background-position:  -0px -890px; }
.media-repeatonce:before { background-position:  -0px -920px; }
.media-seekbackward:before { background-position:  -0px -950px; }
.media-seekfroward:before { background-position:  -0px -980px; }
.media-shuffleoff:before { background-position:  -0px -1010px; }
.media-shuffleon:before { background-position:  -0px -1040px; }
.media-skipbackwards:before { background-position:  -0px -1070px; }
.media-skipforward:before { background-position:  -0px -1100px; }
.media-songsfilter:before { background-position:  -0px -1135px; }
.media-songsfilter:hover:before,
.media-songsfilter:active:before { background-position:  -0px -1175px; }
.media-stop:before { background-position:  -0px -1210px; }
.undo:before { background-position:  -0px -1240px; }
.videorecorder:before { background-position:  -0px -1270px; }