restructure

public/src/css/songselect.css

@@ -0,0 +1,129 @@
+@-webkit-keyframes bgscroll {
+    from {background-position:0 0;}
+    to {background-position:-200px 0;}
+}
+
+@keyframes bgscroll {
+    from {background-position:0 0;}
+    to {background-position:-200px 0;}
+}
+
+#song-select{
+	width: 100%;
+	height:100%;
+	background: url('/assets/img/bg-pattern-1.png');
+	animation: bgscroll 3s infinite linear;
+	-webkit-animation: bgscroll 3s infinite linear;
+}
+
+#song-container{
+    width:98%;
+	height:80%;
+	padding: 5% 1% 1% 1%;
+    text-align: center;
+}
+
+ul li{
+    list-style:none;
+}
+
+.difficulties{
+    float:left;
+    display:inline-block;
+    width:70%;
+    height: 100%;
+}
+
+.song-title-char {
+    text-align: center;
+    width: 45px;
+    display: block;
+}
+
+.song-title-char:before {
+    content: attr(alt);
+    position: absolute;
+    -webkit-text-stroke: 0.25em #000;
+    z-index: -1;
+}
+
+.song-title{
+    float: right;
+    width: 45px;
+    padding: 10px 2px;
+    word-wrap: break-word;
+    font-size: 22pt;
+    color: white;
+    position: relative;
+    z-index: 1;
+    line-height: 28px;
+}
+
+.song-title-space {
+    line-height: 25px;
+}
+
+.song{
+    font-size: 14pt;
+    width: 50px;
+	margin-right:15px;
+	height:100%;
+    color: black;
+    display: inline-block;
+    background: rgba(255, 220, 47, 0.90);
+    border: 7px outset #f4ae00;
+    box-shadow: 2px 2px 10px black;
+    overflow: hidden;
+	cursor: pointer;
+}
+
+.opened{
+	width:375px;
+}
+
+.difficulty{
+	display:none;
+    cursor:pointer;
+    width: 35px;
+    height: 70%;
+    border-radius: 5px;
+    display: inline-block;
+    margin: 5px;
+    float: left;
+    background:white;
+    border:10px solid #ae7a26;
+    position:relative;
+}
+
+.difficulty .diffname{
+    word-wrap: break-word;
+    width: 20px;
+    display: block;
+    margin: auto;
+    margin-top:10px;
+    font-size: 20pt;
+    margin-left: 6px;
+}
+
+.difficulty .stars{
+    position:absolute;
+    color: #f12b69;
+    margin-left: -17px;
+    width:100%;
+    bottom:10px;
+}
+
+.difficulty:hover{
+    border-color:#fa5d3a;
+    color:white;
+    background:#0c6577;
+}
+
+.difficulty:hover .diffname{
+    -webkit-text-stroke-width: 1px;
+   -webkit-text-stroke-color: black;
+}
+
+.difficulty:hover .stars{
+    color:white;
+}