feat(character): add mounts

static/css/character-talents.css

@@ -3,28 +3,11 @@
 	display: none;
 }
 
-.iconmedium {
-	width: 44px;
-	height: 44px;
-	position: relative;
-	display: inline-block;
-	overflow: visible;
-}
-
-.iconmedium .talent {
-	width: 36px;
-	height: 36px;
-	left: 4px;
-	top: 4px;
-	position: absolute;
-	background-repeat: no-repeat;
-}
-
 .iconmedium.empty .icon-border {
 	background-position: 0px 0px;
 }
 
-.iconmedium.empty .talent {
+.iconmedium.empty .icon {
 	filter: grayscale(100%);
 	opacity: 0.7;
 }
@@ -37,14 +20,6 @@
 	background-position: -42px 0px;
 }
 
-.iconmedium .border {
-	width: 44px;
-	height: 44px;
-	left: 0px;
-	top: 0px;
-	background-repeat: no-repeat;
-}
-
 .iconmedium .icon-border {
 	width: 42px;
 	height: 42px;
@@ -54,22 +29,10 @@
 	background-repeat: no-repeat;
 }
 
-.iconmedium a {
-	width: 38px;
-	height: 38px;
-	position: absolute;
-	left: 3px;
-	top: 3px;
-}
-
 .iconmedium a span {
 	display: none;
 }
 
-.iconmedium a:hover {
-	background-position: 0 0;
-}
-
 .iconmedium::after {
 	content: attr(rank);
 	background-color: black;

static/css/character.css

@@ -1,14 +1,8 @@
-#item-slot-template {
+#item-slot-template,
+#mount-template {
 	display: none;
 }
 
-.iconlarge {
-	width: 68px;
-	height: 68px;
-	position: relative;
-	display: inline-block;
-}
-
 .iconlarge .inventory-slot {
 	width: 56px;
 	height: 56px;
@@ -16,38 +10,18 @@
 	top: 6px;
 	position: absolute;
 	background-repeat: no-repeat;
-}
-
-.iconlarge .icon {
-	width: 56px;
-	height: 56px;
-	left: 6px;
-	top: 6px;
-	position: absolute;
-	background-repeat: no-repeat;
-}
-
-.iconlarge .border {
-	width: 68px;
-	height: 68px;
-	position: absolute;
-	left: 0;
-	top: 0;
-	background-repeat: no-repeat;
-}
-
-.iconlarge a {
-	width: 62px;
-	height: 62px;
-	position: absolute;
-	left: 3px;
-	top: 3px;
-}
-
-.iconlarge a:hover {
-	background-position: 0 0;
+	z-index: -2;
 }
 
 .wowhead-tooltip .whtt-sellprice {
 	display: none;
 }
+
+#mounts {
+	max-width: 400px;
+}
+
+#char-options td {
+	vertical-align: top;
+	padding-right: 32px;
+}

static/css/icons.css

@@ -0,0 +1,75 @@
+.iconmedium {
+	width: 44px;
+	height: 44px;
+	position: relative;
+	display: inline-block;
+	overflow: visible;
+}
+
+.iconmedium .icon {
+	width: 36px;
+	height: 36px;
+	left: 4px;
+	top: 4px;
+	position: absolute;
+	background-repeat: no-repeat;
+	z-index: -1;
+}
+
+.iconmedium .border {
+	width: 44px;
+	height: 44px;
+	left: 0px;
+	top: 0px;
+	background-repeat: no-repeat;
+}
+
+.iconmedium a {
+	width: 38px;
+	height: 38px;
+	position: absolute;
+	left: 3px;
+	top: 3px;
+}
+
+.iconmedium a:hover {
+	background-position: 0 0;
+}
+
+.iconlarge {
+	width: 68px;
+	height: 68px;
+	position: relative;
+	display: inline-block;
+}
+
+.iconlarge .icon {
+	width: 56px;
+	height: 56px;
+	left: 6px;
+	top: 6px;
+	position: absolute;
+	background-repeat: no-repeat;
+	z-index: -1;
+}
+
+.iconlarge .border {
+	width: 68px;
+	height: 68px;
+	position: absolute;
+	left: 0;
+	top: 0;
+	background-repeat: no-repeat;
+}
+
+.iconlarge a {
+	width: 62px;
+	height: 62px;
+	position: absolute;
+	left: 3px;
+	top: 3px;
+}
+
+.iconlarge a:hover {
+	background-position: 0 0;
+}