/* MIXINS & VARS */
/* Chart Positioniong fix */
#main article {
  margin-right: -2px;
  margin-bottom: -2px; }
  #main article.home {
    margin-bottom: 12px; }
/* hide everythign with .mobile class by default */
.mobile {
  display: none !important;
  visibility: hidden; }
@media only screen  and (max-width: 1157px) {
  .ex-link.row li a{padding: 12px 10px;}

}
@media only screen  and (max-width: 959px) {
  /* 4 col, full nav */
  .yrbanner{width:100%;max-width: 195px;margin: 6% 0 0 3%;}
  .ex-link.row li img{width:100px;}
  .ex-link.row li a{padding: 12px 10px;}
  #container {
    min-width: 0;
    float: 0 auto; }

  #header {
    min-width: 0; }
    #header #header_inner header {
      width: 720px; }

  #calendar_input {
    left: 150px; }

  #toggle #toggle_inner {
    width: 730px; }

  #nav #nav_inner {
    width: 734px; }
    #nav #nav_inner a {
      width: 146px; }
      #nav #nav_inner a.current {
        background: url("../images/navtab-small.png") no-repeat; }
  .btn-set{
    width: 146px;
  }
  #HS_btn{
    background-size: 100% !important;
    margin-top: -19px;
  }
  #main {
    width: 730px; }

  #copyright {
    width: 620px; }

  #footer {
    margin-left: -3px;
    overflow: hidden; }
    #footer #footer_inner {
      width: 684px;
      padding-left: 12px; }
      #footer #footer_inner #footer_left .label {
        display: none !important;
        visibility: hidden; }
      #footer #footer_inner #footer_right {
        width: 200px; }
        #footer #footer_inner #footer_right .label {
          display: none !important;
          visibility: hidden; }

  /* Contact forn */
  #contact_popup {
    margin-left: -108px; }

  /* THE TEXT VIEW */
  #print #print_inner, .print_extra #print_inner {
    width: 640px;
    margin-left: -380px; }
    #print #print_inner #p_head, .print_extra #print_inner #p_head {
      width: 640px; }
    #print #print_inner #print_body, .print_extra #print_inner #print_body {
      width: 640px; }
      #print #print_inner #print_body th.p_status, #print #print_inner #print_body td.p_status, .print_extra #print_inner #print_body th.p_status, .print_extra #print_inner #print_body td.p_status {
        display: none !important;
        visibility: hidden; } }
@media only screen and (max-width: 770px) {
  #calendar {
    float: right;
    margin-right:20px;
  }
  #calendar_input {
    float:right;
    left: 40px;
  }
  p#calendar_heading{ 
    float: right;
  }
  #calendar_button{ 
    float: right;
  }
}
@media only screen and (max-width: 759px) {
  /* 3 col & under, full mobile version */
  
  .ex-link.row li img{width:50px;}
  .ex-link.row li a{padding: 18px 5px;}
  .mobile {
    display: block !important;
    visibility: visible; }

  .fullsite {
    display: none !important;
    visibility: hidden; }

  #toggle {
    padding-top: 10px;
    height: auto; }
    #toggle #toggle_inner {
      width: 550px; }
      #toggle #toggle_inner a {
        font-size: 12px;
        font-weight: bold; }
        #toggle #toggle_inner a#print_btn, #toggle #toggle_inner a#print_compilations_btn {
          color: #555;
          padding-right: 17px; }

  #nav {
    height: auto;
    background: url("../images/mobile-nav-bar.jpg") no-repeat center 0, url("../images/header-line.png") no-repeat center 48px;
    z-index: 0;
    position: relative; }
    #nav #nav_inner {
      min-height: 5px;
      padding-top: 48px;
      width: auto;
      position: relative; }
      #nav #nav_inner #mobile_current {
        position: absolute;
        top: 0;
        padding: 9px 0 0 11px;
        color: #333;
        font-size: 16px;
        line-height: 32px;
        text-indent: 6px;
        width: 206px;
        cursor: pointer; }
        #nav #nav_inner #mobile_current #mobile_nav_button {
          width: 22px;
          height: 22px;
          background: url("../images/calendar_button.png") no-repeat center;
          padding: 5px;
          float: left;
          cursor: pointer; }
          .btn-set{
            width: 100%;
          }
          #HS_btn{
                color: #000 !important;
                 margin-top: 0px; 
                background: url('../images/header_bg.jpg') no-repeat center 10% !important;
          }
      #nav #nav_inner nav {
        width: 100%;
        overflow: hidden; }
        #nav #nav_inner nav .nav_divider {
          display: none !important;
          visibility: hidden; }
        #nav #nav_inner nav a {
          height: 42px;
          padding-left: 16px;
          font-size: 14px;
          float: none;
          clear: both;
          text-align: left;
          width: auto;
          background: url("../images/mobile-nav-dark.jpg") repeat-x;
          color: #f5f1e5; }
          #nav #nav_inner nav a.current, #nav #nav_inner nav a:hover, #nav #nav_inner nav a:active {
            background: url("../images/mobile-nav-red.jpg") repeat-x; }
          #nav #nav_inner nav a#S_btn {
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.45)), color-stop(18%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: -o-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-dark.jpg") repeat-x; }
          #nav #nav_inner nav a#S_btn.current, #nav #nav_inner nav a#S_btn:hover, #nav #nav_inner nav a#S_btn:active {
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-red.jpg") repeat-x;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.45)), color-stop(18%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), url("../images/mobile-nav-red.jpg") repeat-x;
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-red.jpg") repeat-x;
            background: -o-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-red.jpg") repeat-x;
            background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-red.jpg") repeat-x;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-nav-red.jpg") repeat-x; }
          #nav #nav_inner nav a#ANZ_btn {
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(82%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.45))), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-dark.jpg") repeat-x;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-dark.jpg") repeat-x; }
          #nav #nav_inner nav a#ANZ_btn.current, #nav #nav_inner nav a#ANZ_btn:hover, #nav #nav_inner nav a#ANZ_btn:active {
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-red.jpg") repeat-x;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(82%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.45))), url("../images/mobile-nav-red.jpg") repeat-x;
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-red.jpg") repeat-x;
            background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-red.jpg") repeat-x;
            background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-red.jpg") repeat-x;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.45) 100%), url("../images/mobile-nav-red.jpg") repeat-x; }
          #nav #nav_inner nav a span {
            line-height: 42px; }

  #header {
    height:130px;/*168px;*/
    z-index: 100;
    position: relative; }
    #header #header_inner {
      width: auto;
      background-size:cover;
      height: 130px;/*168px;*/
      padding: 0 16px; }
      #header_inner header{
        height: 100%;
      }
      #header #header_inner header {
        width: 100%; }
      #header #header_inner #calendar {
        /*margin-top: 136px;*/
        top: 136px;
        margin-top: 0;
        position: absolute;
        right: 11px;
        width: 200px; }

        #header #header_inner #calendar #calendar_button {
          margin-top: 9px;
          background:url('../images/calendar_button.png') no-repeat;
          width:22px;
          float:right;
        }
        #header #header_inner #calendar #calendar_button p{ display:none; }

        #header #header_inner #calendar #calendar_icon {
          background: url("../images/mobile-calendar.png") no-repeat;
          width: 24px;
          height: 23px;
          position: relative;
          float: right;
          margin-top: 7px;
          cursor: pointer; }
        #header #header_inner #calendar #calendar_input {
          margin-top: -2px;
          left: 7px; }
      #header #header_inner #logo {
        /*left: 50%;
        margin-left: -112px;
        position: relative;*/

        text-align: center;
        display: block;
        /*margin: 0 auto;*/
        width: 100%;
         }
      .yrbanner{display: none;}
      .yrbanner-2 {
        display: block;
        max-width: 290px;
        margin: 2% auto 0;
        display: block;
        /*padding-top: 10px;*/
      }
  #main {
    width: 550px;
    padding-bottom: 20px;
    /* copy pages */ }
    #main .copy_page {
      width: 600px;
      margin-left: -25px; }

  #copyright {
    width: 460px; }

  #footer {
    margin-left: 0;
    position: relative; }
    #footer #footer_inner {
      width: auto;
      padding-left: 24px;
      border-right: 0;
      border-left: 0;
      -webkit-border-top-left-radius: 0;
      -webkit-border-top-right-radius: 0;
      -moz-border-top-left-radius: 0;
      -moz-border-top-right-radius: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
      #footer #footer_inner #footer_left a {
        padding: 5px 26px 4px 20px; }
      #footer #footer_inner #footer_right {
        width: 92px; }

  /* THE TEXT VIEW */
  #print #print_inner, .print_extra #print_inner {
    width: 480px;
    margin-left: -300px;
    height: 100%; }
    #print #print_inner #p_head, .print_extra #print_inner #p_head {
      width: 480px; }
    #print #print_inner #print_page, .print_extra #print_inner #print_page {
      position: absolute;
      top: 0;
      right: 60px; }
    #print #print_inner #p_calendar_heading, .print_extra #print_inner #p_calendar_heading {
      margin-top: 60px; }
    #print #print_inner #print_body, .print_extra #print_inner #print_body {
      width: 480px; }
      #print #print_inner #print_body th.p_label, #print #print_inner #print_body td.p_label, .print_extra #print_inner #print_body th.p_label, .print_extra #print_inner #print_body td.p_label {
        display: none !important;
        visibility: hidden; }

  /* The video fix!!! Finally worked this sucker out. 
  Looks like youtube has some event killing javascript for all clicks
  over video which makes the click on close not work */
  #no-flash.iPhone {
    padding: 9% 0 0 9%;
    width: 82%;
    height: 82%; } }
@media only screen and (max-width: 579px) {
	
	/* Calendar Year Drop down */
	#year_dd {
		width: 250px;
	}
	#year_dd a {
		padding: 2px 10px;
	}
	
  .week_tab{
    margin-top:0px;
    top:10px !important;
  }
  /* 2 col & under */
  #toggle #toggle_inner {
    width: 370px; }

  #main {
    width: 370px;
    /* copy pages */ }
    #main .copy_page {
      width: 440px;
      margin-left: -35px; }

  #copyright {
    width: 320px; }

  #footer #footer_inner {
    padding-left: 12px; }
    #footer #footer_inner #footer_left a {
      padding: 5px 18px 4px 12px; }

  /* THE TEXT VIEW */
  #print #print_inner, .print_extra #print_inner {
    width: 440px;
    margin-left: -234px;
    padding: 0 14px 20px 14px; }
    #print #print_inner #p_head, .print_extra #print_inner #p_head {
      width: 440px; }
    #print #print_inner #print_page, .print_extra #print_inner #print_page {
      right: 38px; }
    #print #print_inner #print_body, .print_extra #print_inner #print_body {
      width: 440px; }
      #print #print_inner #print_body th#p_first_th, .print_extra #print_inner #print_body th#p_first_th {
        text-align: center;
        padding-left: 0px; }
      #print #print_inner #print_body td.p_this_week, .print_extra #print_inner #print_body td.p_this_week {
        padding-right: 0px; }

  /* THE MORE INFO BUY/DOWNLOAD VIEW */
  .more_info {
    width: 270px;
    margin-left: -135px;
    height: 266px;
    margin-top: -133px; }
    .more_info .mi_top {
      width: 250px; }
      .more_info .mi_top .mi_title {
        width: 183px;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -icab-text-overflow: ellipsis;
        -khtml-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis; }
        .more_info .mi_top .mi_title span {
          width: 183px;
          overflow: hidden; }
    .more_info .mi_left {
      display: none !important;
      visibility: hidden; }
    .more_info .mi_right {
      height: 196px; }
    .more_info .mi_close {
      position: absolute;
      top: 0;
      right: 0; } }
@media only screen and (max-width: 399px) {
  .week_tab{
    margin-top:0px;
    top:10px !important;
  }
  #toggle #toggle_inner a#print_btn, #toggle #toggle_inner a#print_compilations_btn{padding-right: 28px;}
  #logo img{width:100%;height:auto;}
  /* 1 col */
  #toggle #toggle_inner {
    width: 180px; }
    #toggle #toggle_inner #print_btn, #toggle #toggle_inner #print_compilations_btn {
      margin-right: 5px;
      padding-left: 0;
      margin-right: 0; }
    #toggle #toggle_inner #view_spotify {
      margin-right: 0;
      padding-left:10px;
      padding-right: 17px;
       }

  #main {
    /*width: 190px;*/
	  width: 210px;
    /* copy pages */ }
    #main .copy_page {
      width: 300px;
      margin-left: -55px; }

  #copyright {
    width: 190px; }

  #footer #footer_inner {
    padding-left: 10px; }
    #footer #footer_inner #footer_left a {
      padding: 5px 12px 4px 6px; }

  /* THE TEXT VIEW */
  #print #print_inner, .print_extra #print_inner {
    width: 300px;
    margin-left: -160px;
    padding: 0 10px 20px 10px; }
    #print #print_inner #p_head, .print_extra #print_inner #p_head {
      width: 300px; }
    #print #print_inner #print_page, .print_extra #print_inner #print_page{
      display: none !important;
      visibility: hidden; }
    #print #print_inner #p_calendar_heading, .print_extra #print_inner #p_calendar_heading{
      float: left;
      margin-top: 10px; }
    #print #print_inner #print_body, .print_extra #print_inner #print_body{
      width: 300px; }
      #print #print_inner #print_body th#p_first_th, .print_extra #print_inner #print_body th#p_first_th{
        text-align: left;
        padding-right: 10px; }
      #print #print_inner #print_body td.p_this_week, .print_extra #print_inner #print_body td.p_this_week {
        padding-right: 10px;
        padding-left: 0; }
      #print #print_inner #print_body td.p_title_artist, .print_extra #print_inner #print_body td.p_title_artist {
        padding-right: 5px; } 
}