html, body { margin: 0; padding: 0; } body { background: #383838; color: white; font-size: 1em; font-family: 'open sans' sans serif; font-weight: 400; font-variant: normal; font-style: normal; text-align: center; } body > div { border: 1px solid white; border-radius: 5px; display: inline-block; box-sizing : border-box; } #player { align-content: stretch; align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 10px; margin: 10px auto; width: 50%; } #player > div { display: inline-block; } #player #cover { align-self: auto; flex: 0 1 140px; height: 140px; background: white; border-radius: 5px; margin-bottom: 5px; order: 0; width: 140px; } #player #infos { align-self: auto; flex: 1 1 auto; order: 0; } #player #title { margin: 0; text-align: center; width: 100%; word-wrap: break-word; } #player #back, #player #next { display: inline; margin: 9px 5px 0 0; font-family: Arial; height: 25px; width: 47px; } #player #error { margin: 0; font-style: italic; color: red; font-size: small; text-align: center; display: none; } #player #error.open { display: block; } #player audio { width: 100%; max-height: 30px; display: inline-block; font-size: small; text-align: center; } #playlist { min-height: 300px; overflow: auto; text-align: left; margin-bottom: 6px; padding: 10px; width: 50%; } #playlist > ul { margin: 9px 0 9px 9px; } #playlist li { background-repeat: no-repeat; padding-left: 25px; line-height: 25px; } #playlist ul { list-style: none; padding-left: 0; } #playlist > ul ul { /* transition:height 1s linear;*/ overflow: hidden; height: 0; } #playlist li:active > ul, #playlist li.open > ul { height: auto; } #playlist .folder { background-image: url(/icons/folder.png); } #playlist .folder.open { background-image: url(/icons/folder.open.png); } #playlist .song { background-image: url(/icons/sound2.png); cursor: pointer; } #playlist li { font-style: italic; color: lime; } #playlist li:not(.playing) { font-style: normal; color: white; } @media (max-width: 768px) { #player { width : 96%; } #playlist { width : 96%; } }