/*

These are styles applied when you have a screen larger than 1100px OR have a shitty browser that does
not interpret @media queries (like IE6 or IE7).

*/

/* Width stuff */
.content-centered {
/*    width: 1038px;*/
}
#content {
/*    padding: 0px 10px;*/
}

#content-left {
/*    width: 728px;*/
}

#player-progress-outer {
/*    width: 510px !important;*/
}

#player-time-total {
/*    left: 575px !important;*/
}

@media screen and (max-width: 1099px) {

    html, html body {
        background: #FFF !important;
    }

    /* container is here because fucking ad code references it by #id */
    .content-centered {
        width: 980px;
    }

    #content-left {
        width: 670px;
    }

    /* take away top margin when site is small */
    #container {
        margin-top: 0px;
    }

    #content {
        padding: 0px /*!important*/;
    }

    /* bring the page contents back up because we're not showing a takeover anyway */
    #content-wrapper {
        width: 100% /*!important*/;
    }

    #album-premiere {
        width: 660px;
    }

    #zeitgeist-2011 #content-right {
        width: 445px /*!important*/;
        margin-left: 10px /*!important*/;
    }

    #player-nowplaying {
        width: 425px /*!important*/;
    }

}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* ipad portrait layout */
  html {
    width: 1010px;
  }
}