/* Retro Music Portal
   Neocities friendly
*/

body {
    margin:0;
    padding:0;
    background:#16052f;
    font-family:Verdana, Arial, sans-serif;
    font-size:11px;
    color:#222;
}


/* Main fixed-width portal */

.page {

    width:760px;
    margin:15px auto;

    background:#eee;

    border-left:3px solid #7d4bc1;
    border-right:3px solid #3b176b;

    box-shadow:0 0 15px #000;

}


/* HEADER */

.header {

    height:80px;

    background:
    linear-gradient(
        to bottom,
        #8b62d6,
        #3e176d
    );

    padding:10px;

    color:white;

}


.logo {

    float:left;

    font-size:32px;

    font-weight:bold;

    letter-spacing:-2px;

    text-shadow:
    2px 2px #32105d;

    margin-top:15px;

}


.search {

    float:right;

    margin-top:25px;

}


.search input {

    width:190px;

    height:18px;

    border:2px inset white;

}


.search button {

    height:24px;

    background:#ffcc00;

    border:2px outset #fff;

    font-weight:bold;

    font-size:11px;

}


/* NAVIGATION */

.nav {

    background:
    linear-gradient(
        #5f39a0,
        #2b104f
    );

    padding:7px;

    text-align:center;

    border-top:1px solid #c7aaff;

    border-bottom:3px solid #14052b;

}


.nav a {

    color:white;

    font-weight:bold;

    text-decoration:none;

    margin:0 8px;

}


.nav a:hover {

    color:#ffd800;

    text-decoration:underline;

}



/* COLUMNS */


.left {

    width:160px;

    vertical-align:top;

    padding:8px;

    background:#ddd;

}



.main {

    width:430px;

    vertical-align:top;

    padding:8px;

    background:white;

}



.right {

    width:160px;

    vertical-align:top;

    padding:8px;

    background:#ddd;

}



/* BOXES */


.box {

    border:1px solid #777;

    background:#fff;

    margin-bottom:10px;

}



.title {

    padding:4px;

    color:white;

    font-weight:bold;

    background:

    linear-gradient(
        #9068db,
        #442079
    );

    border-bottom:2px solid #28104b;

}



/* SIDE MENU */


ul {

    list-style:none;

    margin:0;

    padding:5px;

}


li {

    padding:5px;

    border-bottom:1px dotted #999;

    color:#32105e;

    cursor:pointer;

}


li:hover {

    background:#eee0ff;

    color:#000;

}



/* IMAGES */


.box img {

    width:140px;

    height:auto;

    margin:8px;

}



/* FOOTER */


.footer {

    background:#29104c;

    color:white;

    text-align:center;

    padding:12px;

    font-size:10px;

}

/* FEATURED STATIONS */


.station {

display:flex;

padding:8px;

border-bottom:1px solid #ccc;

background:#fafafa;

}


.station img {

width:70px;

height:70px;

margin-right:10px;

border:2px solid #777;

}


.station-info {

font-size:11px;

}


.play {

background:
linear-gradient(
#fff,
#bbb
);

border:2px outset #fff;

font-size:11px;

font-weight:bold;

cursor:pointer;

}



/* PLAYER */


.player {

display:flex;

padding:10px;

background:#eee;

}


.album img {

width:80px;

height:80px;

border:2px solid #555;

}


.track {

margin-left:12px;

}


.bar {

width:220px;

height:10px;

background:#aaa;

border:1px inset white;

}


.progress {

width:65%;

height:100%;

background:#6b3bb5;

}


.control {

background:#ddd;

border:2px outset white;

font-size:12px;

margin-right:3px;

}

.box + .box {

margin-top:8px;

}


.box {

box-shadow:
inset 0 0 3px #fff;

}

/* RETRO DETAILS */


/* Page texture */

body {

background:
#16052f url("assets/tile-bg.gif");

}


/* Glossy tabs */

.nav a {

display:inline-block;

padding:3px 8px;

border-left:1px solid #bfa7ff;

border-top:1px solid #bfa7ff;

border-right:1px solid #180630;

border-bottom:1px solid #180630;

background:
linear-gradient(
#7550c5,
#32105e
);

}


.nav a:hover {

background:
linear-gradient(
#ffd85a,
#d99500
);

color:#220044;

}


/* NEW badge */

.new {

background:#ff0000;

color:white;

font-size:9px;

font-weight:bold;

padding:1px 3px;

border:1px solid #700;

}


/* Small links */

.small-links {

font-size:10px;

text-align:center;

padding:8px;

}


.small-links a {

color:white;

text-decoration:none;

margin:5px;

}


.small-links a:hover {

text-decoration:underline;

}


/* Retro loading animation */

.loading {

width:150px;

height:12px;

border:1px solid #333;

background:#ddd;

margin:auto;

}


.loading span {

display:block;

height:100%;

width:40%;

background:#6738ad;

animation:load 2s infinite;

}


@keyframes load {

0% {

width:5%;

}


50% {

width:90%;

}


100% {

width:5%;

}

}



/* Make buttons feel old-school */

button {

cursor:pointer;

font-family:Verdana;

}


button:active {

border-style:inset;

}