✨

less/character-sheet.less

@@ -146,11 +146,12 @@
         flex-direction: column;
         align-items: center;
         width: 200px;
+        height: 400px;
         border-right: #5e0000;
     }
 
     .imgBox {
-        height: 165px;
+        height: 170px;
         width: 180px;
         padding: 0 20px;
         background-color: #b0b0b0;
@@ -160,8 +161,8 @@
         -o-border-radius: 15px;
 
 		position: absolute;
-		bottom: 0;
-		left: 0;
+		top: 120;
+		left: 20;
     }
 
     .imgBox:after {
@@ -171,7 +172,8 @@
 		height: 0;
         float: left;
         position: absolute;
-        left: 20px;
+        left: 0px;
+        bottom: 0px
 	}
 
     .screen {
@@ -194,6 +196,75 @@
         justify-content: center;
 	}
 
+    div#topPicture
+	{
+		margin: 6px auto;
+		width: 40px;
+	}
+
+	div#buttontopPicture1, div#buttontopPicture2
+	{
+		height: 8px;
+		width: 8px;
+		background-color: #c00d0d;
+		border: 1px solid #000;
+		float: left;
+
+		border-radius: 15px;
+		-webkit-border-radius: 15px;
+		-moz-border-radius: 15px;
+		-o-border-radius: 15px;
+	}
+
+	div#buttontopPicture1
+	{
+		margin-right: 20px;
+	}
+
+	div#buttonbottomPicture
+	{
+		height: 26px;
+		width: 26px;
+		background-color: #c00d0d;
+		margin-left: 35px;
+		float: left;
+
+		border-radius: 30px;
+		-webkit-border-radius: 30px;
+		-moz-border-radius: 30px;
+		-o-border-radius: 30px;
+
+		box-shadow: -2px 1px #5e0000;
+		-webkit-box-shadow: -2px 1px #5e0000;
+		-moz-box-shadow: -2px 1px #5e0000;
+		-o-box-shadow: -2px 1px #5e0000;
+
+		background: linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+		background: -webkit-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+		background: -moz-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+		background: -o-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+	}
+
+	div#speakers
+	{
+		float: right;
+		width: 75px;
+		height: 25px;
+		margin-right: 20px;
+	}
+
+	div.sp
+	{
+		height: 3px;
+		margin-bottom: 5px;
+		background-color: #494949;
+
+		border-radius: 30px;
+		-webkit-border-radius: 30px;
+		-moz-border-radius: 30px;
+		-o-border-radius: 30px;
+	}
+
     .charImg {
 		max-height: 95px;
 		max-width: 125px;
@@ -202,12 +273,18 @@
     }
 
     .vertLine {
-        height: 100%;
+        position: absolute;
+        height: 400px;
+        float: left;
+        left: 200px;
+        bottom: 0px;
         width: 5px;
         background-color: #5e0000;
     }
 
     .menuBox {
         background-color: #5e0000;
+        border: none;
+        padding: 0px 10px;
     }
 }