html {
    background: black;
    color: white;
    background: url(everybody/img/radiotower.jpg);
}
body {
    font-size: 115%;
    margin: 0;
    padding: 0;
    overflow: auto;
}
/* workaround for lack of transparent PNGs in IE 6 */
img {
    behavior: url(everybody/css/iepngfix/iepngfix.htc);
}

img.guideicon {
    margin-left: 3px;
    vertical-align: middle;
}

div#top {
    width: 100%;
    height: 4em;
    background-color: black;
    position: absolute;
    top: 0;
}
div#bottom {
    width: 100%;
    background-color: black;
    color: white;
    position: absolute;
    bottom: 0;
    border: 0;
    margin: 0;
}

div#top {
    text-align: center;
}
div#top div.trackcontrols img {
    margin: 0 1em 0 1em;
}
div#top div.organizational {
    position: absolute;
    top: 5px;
    right: 5px;
}

div#bottom div.metadata {
    padding: 8px 0 0 8px;
    float: left;
    text-align: left;
}
div#bottom div.viral {
    padding: 8px 8px 0 0;
    font-size: 80%;
    text-align: right;
    color: white;
}

div.metadata .creator,
div.metadata .info a { color: gray; }
div.metadata .title { color: white; }
div.metadata p, div.viral p {
padding: 0;
margin: 5px 0 5px 0;
}

div#bottom div.viral input {
    width: 4em;
    font-family: Courier-New, Courier-New, Courier, monospace;
    margin-right: 3px;
    border: 0;
    padding: 3px;
}
div#bottom div.viral { margin-top: 1em }
div.viral a { color: gray; }

div#bottom hr {
    color: black;
    background-color: black;
    border: 0;
} 

/* set up the download panel in the center of the bottom controls */
div#bottom { text-align: center }
div#bottom div.viral { float: right }
div#bottom div.download { margin-top: 1em }
div#bottom div.download a { color: gray; }

/* fix centering problem.  The width of these divs is fluid and has layout.  This affects the position of the center div, which wanders left and right when we advance through the playlist and is never quite aligned with the track controls.  To fix that we take these divs out of the layout, but without actually moving them. */
div.metadata, div.viral {
position: absolute;
}
div#bottom { /* make room for metadata to be taller than download panel */
min-height: 5.5em;
    
    /* IE6-only: borked box model needs more height */
    _height: 6em;
    
}
div.viral { right: 0 }


/* put these items away when a fatal error happens.  these items are also hidden until initialization is complete. */
.error .hideonerror { 
    visibility: hidden;
}
div#crisis {
    text-align: center;
    color: white;
    font-size: 125%;
    /* push this down underneath the edge of the top control strip */
    margin-top: 6em;
    /* will be switched on in the event of a fatal error */
    display: none; 
}
div#crisis p.emoticon {
    margin: 2em;
    color: red;
}

div#linkback {
position: absolute;
bottom: 5.5em;
right: 25%;
background-color: #ccc;
padding: 3px;
}
div#linkback a {
font-size: 10px;
color: gray;
}

    
/*****************************************
 * The following CSS will only get used if javascript is off.
*****************************************/
body.nojavascript div#fallback { display: block; }
/* hide everything except the fallback */
body.nojavascript div#top, body.nojavascript div#bottom { display: none }
/* neutralize styles from the full scale site to ensure that the fallback text is visible */
body.nojavascript html { background: white; }
/* as pretty as possible, in case CSS is working */
body.nojavascript  {
    text-align: center;
    padding: 4em;
    font-size: 125%;
    color: black;
    background: white;
    height: 40em; /* keep html background from peeking through */
    padding: 0;
    margin: 0;
}
body.nojavascript table, body.nojavascript tr, body.nojavascript td { border: 0 }