/*
 * Devices
 * min 1200
 * min 1024
 * max 1024
 * max 768
 * max 640
 * max 480
 * max 320
 */

/* responsive utilities */
  #responsive-utils .hide-element {
    display: none !important;
    visibility: hidden !important;
  }
  #responsive-utils .show-element {
    display: block !important;
    visibility: visible !important;
  }
  #responsive-utils .full-size {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #responsive-utils .half-size {
    width: 50% !important;
  }
  #responsive-utils .container-desktop {
    width: 940px !important;
  }
  #responsive-utils .container-phone {
    width: 100% !important;
  }
  #responsive-utils .container-phone2 {
    width: 100% !important;
  }
  #responsive-utils .container-phone3 {
    width: 100% !important;
  }
  #responsive-utils .container-phone4 {
    width: 100% !important;
  }
  #responsive-utils .container-tablet {
    width: 720px !important;
  }
  #responsive-utils .container-large {
    width: 1140px !important;
  }
  #responsive-utils .container-phone {
    padding: 0 10px;
  }

/* Desktop */
  @media screen and (min-width: 820px) {
    .no-desktop {
      display: none !important;
      visibility: hidden !important;
    }

  }

  @media screen and (min-width: 1024px) {
    .no-desktop {
      display: none !important;
      visibility: hidden !important;
    }
    .on-desktop {
      display: block !important;
      visibility: visible !important;
    }
    div.container {
      width: 940px !important;
    }
  }


/* tablet landscape*/
  @media only screen and (max-width: 1024px) {
    .no-tablet-landscape,
    .no-tablet {
      display: none !important;
      visibility: hidden !important;
    }
    .on-tablet {
      display: block !important;
      visibility: visible !important;
    }
    div.container {
      width: 940px !important;
    }

    .metro fieldset {
      padding-top: 20px;
    }

  }


/* Extra media queries */
  @media only screen and (min-width: 881px) and (max-width: 960px) {

    div.container {
      width: 880px !important;
    }

    /* Ref Assign Tab control */
      .metro #day-tabs.tab-control .tabs > li {
        margin-left: 4px;
      }

      .metro #day-tabs.tab-control .tabs > li.disabled a,
      .metro #day-tabs.tab-control .tabs > li.disabled a:link,
      .metro #day-tabs.tab-control .tabs > li.disabled {
        font-size: 0.85em;
        line-height: 16px;
      }

      .metro #day-tabs.tab-control .tabs > li.disabled {
        margin-top: 8px;
      }

      .metro #day-tabs.tab-control .tabs > li > a {
        padding: 4px 9px;
      }


    /* spans */
      .metro .span1 {
        width: 55px !important;
      }
      .metro .span2 {
        width: 130px !important;
      }
      .metro .span3 {
        width: 205px !important;
      }
      .metro .span4 {
        width: 280px !important;
      }
      .metro .span5 {
        width: 355px !important;
      }
      .metro .span6 {
        width: 430px !important;
      }
      .metro .span7 {
        width: 505px !important;
      }
      .metro .span8 {
        width: 580px !important;
      }
      .metro .span9 {
        width: 655px !important;
      }
      .metro .span10 {
        width: 730px !important;
      }
      .metro .span11 {
        width: 803px !important;
      }
      .metro .span12 {
        width: 880px !important;
      }

    /* offsets */
      .metro .offset1 {
        margin-left: 75px !important;
      }
      .metro .offset1:not(:first-child) {
        margin-left: 95px !important;
      }
      .metro .offset2 {
        margin-left: 150px !important;
      }
      .metro .offset2:not(:first-child) {
        margin-left: 170px !important;
      }
      .metro .offset3 {
        margin-left: 225px !important;
      }
      .metro .offset3:not(:first-child) {
        margin-left: 245px !important;
      }
      .metro .offset4 {
        margin-left: 300px !important;
      }
      .metro .offset4:not(:first-child) {
        margin-left: 320px !important;
      }
      .metro .offset5 {
        margin-left: 375px !important;
      }
      .metro .offset5:not(:first-child) {
        margin-left: 395px !important;
      }
      .metro .offset6 {
        margin-left: 450px !important;
      }
      .metro .offset6:not(:first-child) {
        margin-left: 470px !important;
      }
      .metro .offset7 {
        margin-left: 525px !important;
      }
      .metro .offset7:not(:first-child) {
        margin-left: 545px !important;
      }
      .metro .offset8 {
        margin-left: 600px !important;
      }
      .metro .offset8:not(:first-child) {
        margin-left: 620px !important;
      }
      .metro .offset9 {
        margin-left: 675px !important;
      }
      .metro .offset9:not(:first-child) {
        margin-left: 695px !important;
      }
      .metro .offset10 {
        margin-left: 750px !important;
      }
      .metro .offset10:not(:first-child) {
        margin-left: 770px !important;
      }
      .metro .offset11 {
        margin-left: 825px !important;
      }
      .metro .offset11:not(:first-child) {
        margin-left: 845px !important;
      }
  }

  @media only screen and (min-width: 821px) and (max-width: 880px) {

    div.container {
      width: 820px !important;
    }

    /* Ref Assign Tab control */
      .metro #day-tabs.tab-control .tabs > li {
        margin-left: 3px;
      }
      .metro #day-tabs.tab-control .tabs > li.disabled a,
      .metro #day-tabs.tab-control .tabs > li.disabled a:link,
      .metro #day-tabs.tab-control .tabs > li.disabled {
        font-size: 0.8em;
        line-height: 15px;
      }

      .metro #day-tabs.tab-control .tabs > li.disabled {
        margin-top: 9px;
      }

      .metro #day-tabs.tab-control .tabs > li > a {
        padding: 3px 8px;
      }

    /* spans */
      .metro .span1 {
        width: 50px !important;
      }
      .metro .span2 {
        width: 120px !important;
      }
      .metro .span3 {
        width: 190px !important;
      }
      .metro .span4 {
        width: 260px !important;
      }
      .metro .span5 {
        width: 330px !important;
      }
      .metro .span6 {
        width: 400px !important;
      }
      .metro .span7 {
        width: 470px !important;
      }
      .metro .span8 {
        width: 540px !important;
      }
      .metro .span9 {
        width: 610px !important;
      }
      .metro .span10 {
        width: 680px !important;
      }
      .metro .span11 {
        width: 750px !important;
      }
      .metro .span12 {
        width: 820px !important;
      }

    /* offsets */
      .metro .offset1 {
        margin-left: 70px !important;
      }
      .metro .offset1:not(:first-child) {
        margin-left: 90px !important;
      }
      .metro .offset2 {
        margin-left: 140px !important;
      }
      .metro .offset2:not(:first-child) {
        margin-left: 160px !important;
      }
      .metro .offset3 {
        margin-left: 210px !important;
      }
      .metro .offset3:not(:first-child) {
        margin-left: 230px !important;
      }
      .metro .offset4 {
        margin-left: 280px !important;
      }
      .metro .offset4:not(:first-child) {
        margin-left: 300px !important;
      }
      .metro .offset5 {
        margin-left: 350px !important;
      }
      .metro .offset5:not(:first-child) {
        margin-left: 370px !important;
      }
      .metro .offset6 {
        margin-left: 420px !important;
      }
      .metro .offset6:not(:first-child) {
        margin-left: 440px !important;
      }
      .metro .offset7 {
        margin-left: 490px !important;
      }
      .metro .offset7:not(:first-child) {
        margin-left: 510px !important;
      }
      .metro .offset8 {
        margin-left: 560px !important;
      }
      .metro .offset8:not(:first-child) {
        margin-left: 580px !important;
      }
      .metro .offset9 {
        margin-left: 630px !important;
      }
      .metro .offset9:not(:first-child) {
        margin-left: 650px !important;
      }
      .metro .offset10 {
        margin-left: 700px !important;
      }
      .metro .offset10:not(:first-child) {
        margin-left: 720px !important;
      }
      .metro .offset11 {
        margin-left: 770px !important;
      }
      .metro .offset11:not(:first-child) {
        margin-left: 790px !important;
      }

  }

/* tablet portrait */
  @media only screen and (min-width: 721px) and (max-width: 820px) {

    html {
      font-size: 60%;
    }

    /* Ref Assign Tab control */
      .metro #day-tabs.tab-control .tabs > li {
        margin-left: 3px;
      }
      .metro #day-tabs.tab-control .tabs > li a,
      .metro #day-tabs.tab-control .tabs > li a:link,
      .metro #day-tabs.tab-control .tabs > li {
        font-size: 0.8em;
      }
      .metro #day-tabs.tab-control .tabs > li.disabled a,
      .metro #day-tabs.tab-control .tabs > li.disabled a:link,
      .metro #day-tabs.tab-control .tabs > li.disabled {
        font-size: 0.75em;
        line-height: 14px;
      }

      .metro #day-tabs.tab-control .tabs > li.disabled {
        margin-top: 8px;
      }

      .metro #day-tabs.tab-control .tabs > li > a {
        padding: 3px 7px;
      }

    /* spans */
      .metro .span1 {
        width: 40px !important;
      }
      .metro .span2 {
        width: 100px !important;
      }
      .metro .span3 {
        width: 160px !important;
      }
      .metro .span4 {
        width: 220px !important;
      }
      .metro .span5 {
        width: 280px !important;
      }
      .metro .span6 {
        width: 340px !important;
      }
      .metro .span7 {
        width: 400px !important;
      }
      .metro .span8 {
        width: 460px !important;
      }
      .metro .span9 {
        width: 520px !important;
      }
      .metro .span10 {
        width: 580px !important;
      }
      .metro .span11 {
        width: 640px !important;
      }
      .metro .span12 {
        width: 700px !important;
      }

    /* offsets */
      .metro .offset1 {
        margin-left: 60px !important;
      }
      .metro .offset1:not(:first-child) {
        margin-left: 80px !important;
      }
      .metro .offset2 {
        margin-left: 120px !important;
      }
      .metro .offset2:not(:first-child) {
        margin-left: 140px !important;
      }
      .metro .offset3 {
        margin-left: 180px !important;
      }
      .metro .offset3:not(:first-child) {
        margin-left: 200px !important;
      }
      .metro .offset4 {
        margin-left: 240px !important;
      }
      .metro .offset4:not(:first-child) {
        margin-left: 260px !important;
      }
      .metro .offset5 {
        margin-left: 300px !important;
      }
      .metro .offset5:not(:first-child) {
        margin-left: 320px !important;
      }
      .metro .offset6 {
        margin-left: 360px !important;
      }
      .metro .offset6:not(:first-child) {
        margin-left: 380px !important;
      }
      .metro .offset7 {
        margin-left: 420px !important;
      }
      .metro .offset7:not(:first-child) {
        margin-left: 440px !important;
      }
      .metro .offset8 {
        margin-left: 480px !important;
      }
      .metro .offset8:not(:first-child) {
        margin-left: 500px !important;
      }
      .metro .offset9 {
        margin-left: 540px !important;
      }
      .metro .offset9:not(:first-child) {
        margin-left: 560px !important;
      }
      .metro .offset10 {
        margin-left: 600px !important;
      }
      .metro .offset10:not(:first-child) {
        margin-left: 620px !important;
      }
      .metro .offset11 {
        margin-left: 660px !important;
      }
      .metro .offset11:not(:first-child) {
        margin-left: 680px !important;
      }

  }

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

    /* Ref Assign Tab control */
      .metro #day-tabs.tab-control .tabs > li {
        margin-left: 3px;
      }
      .metro #day-tabs.tab-control .tabs > li a,
      .metro #day-tabs.tab-control .tabs > li a:link,
      .metro #day-tabs.tab-control .tabs > li {
        font-size: 0.8em;
      }
      .metro #day-tabs.tab-control .tabs > li.disabled a,
      .metro #day-tabs.tab-control .tabs > li.disabled a:link,
      .metro #day-tabs.tab-control .tabs > li.disabled {
        font-size: 0.75em;
        line-height: 14px;
      }

      .metro #day-tabs.tab-control .tabs > li.disabled {
        margin-top: 11px;
      }

      .metro #day-tabs.tab-control .tabs > li > a {
        padding: 3px 7px;
      }

    .navigation-bar .pull-menu {
      display: block !important;
      text-decoration: none;
    }
    .no-tablet-portrait,
    .no-tablet {
      display: none !important;
      visibility: hidden !important;
    }
    .on-tablet,
    .on-tablet-portrait {
      display: block !important;
      visibility: visible !important;
    }
    div.container {
      width: 720px !important;
    }
    .navigation-bar {
      position: relative !important;
    }
    .navigation-bar .pull-menu {
      display: block !important;
    }
    .navigation-bar .element {
      float: none !important;
    }
    .navigation-bar .element-divider {
      display: none !important;
    }
    .navigation-bar .element-menu {
      position: relative;
      float: none;
      display: block;
      width: 100% !important;
      background-color: inherit;
      z-index: 1000;
    }
    .navigation-bar .element-menu li {
      display: block !important;
      float: none !important;
      width: 100%;
    }
    .navigation-bar .element-menu li a {
      display: block !important;
      float: none !important;
      width: 100%;
    }
    .navigation-bar .element-menu li .dropdown-menu {
      position: relative !important;
      left: 0;
    }

    .navigation-bar .element-menu .dropdown-toggle {
      color: inherit;
      position: relative;
    }
    .navigation-bar .element-menu .dropdown-toggle:after {
      position: absolute;
      left: 100% !important;
      margin-left: -15px;
    }
    .navigation-bar .element-menu .dropdown-menu .dropdown-toggle:after {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }
  }

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

    html {
      font-size: 60%;
    }


    .no-tablet-portrait,
    .no-tablet {
      display: none !important;
      visibility: hidden !important;
    }
    .on-tablet {
      display: block !important;
      visibility: visible !important;
    }
    div.container {
      width: 620px !important;
    }
    .grid:not(.fluid) > .row {
      margin: 0;
    }
    .grid:not(.fluid) > .row > [class*="span"] {
      width: 300px !important;
      margin-left: 0 !important;
      margin-bottom: 5px;
    }
    .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {
      margin-left: 20px !important;
    }
    .grid:not(.fluid) > .row .span12,
    .grid:not(.fluid) > .row .span7,
    .grid:not(.fluid) > .row .span8,
    .grid:not(.fluid) > .row .span9,
    .grid:not(.fluid) > .row .span10,
    .grid:not(.fluid) > .row .span11 {
      width: 620px !important;
    }
    .grid:not(.fluid) > .row .span12:nth-child(even),
    .grid:not(.fluid) > .row .span7:nth-child(even),
    .grid:not(.fluid) > .row .span8:nth-child(even),
    .grid:not(.fluid) > .row .span9:nth-child(even),
    .grid:not(.fluid) > .row .span10:nth-child(even),
    .grid:not(.fluid) > .row .span11:nth-child(even) {
      margin-left: 0 !important;
    }
    .grid:not(.fluid) > .row .row {
      margin: 0;
    }
    .grid:not(.fluid) > .row .row [class*="span"] {
      width: 300px !important;
      margin-left: 0 !important;
      margin-bottom: 20px;
    }
    .grid:not(.fluid) > .row .row [class*="span"]:nth-child(even) {
      margin-left: 20px !important;
    }
    .grid:not(.fluid) > .row .row .span12,
    .grid:not(.fluid) > .row .row .span7,
    .grid:not(.fluid) > .row .row .span8,
    .grid:not(.fluid) > .row .row .span9,
    .grid:not(.fluid) > .row .row .span10,
    .grid:not(.fluid) > .row .row .span11 {
      width: 720px !important;
    }
    .grid:not(.fluid) > .row .row .span12:nth-child(even),
    .grid:not(.fluid) > .row .row .span7:nth-child(even),
    .grid:not(.fluid) > .row .row .span8:nth-child(even),
    .grid:not(.fluid) > .row .row .span9:nth-child(even),
    .grid:not(.fluid) > .row .row .span10:nth-child(even),
    .grid:not(.fluid) > .row .row .span11:nth-child(even) {
      margin-left: 0 !important;
    }
    .navigation-bar,
    .navbar {
      position: relative !important;
    }
    .navigation-bar .pull-menu,
    .navbar .pull-menu {
      display: block !important;
    }
    .navigation-bar .element,
    .navbar .element {
      float: none !important;
    }
    .navigation-bar .element-divider,
    .navbar .element-divider {
      display: none !important;
    }
    .navigation-bar .element-menu,
    .navbar .element-menu {
      position: relative;
      float: none;
      width: 100% !important;
      background-color: inherit;
      z-index: 1000;
    }
    .navigation-bar .element-menu li,
    .navbar .element-menu li {
      display: block !important;
      float: none !important;
      width: 100%;
    }
    .navigation-bar .element-menu li a,
    .navbar .element-menu li a {
      display: block !important;
      float: none !important;
      width: 100%;
    }
    .navigation-bar .element-menu li .dropdown-menu,
    .navbar .element-menu li .dropdown-menu {
      position: relative !important;
      left: 0;
    }
    .navigation-bar .element-menu .dropdown-toggle,
    .navbar .element-menu .dropdown-toggle {
      color: inherit;
      position: relative;
    }
    .navigation-bar .element-menu .dropdown-toggle:after,
    .navbar .element-menu .dropdown-toggle:after {
      position: absolute;
      left: 100% !important;
      margin-left: -15px;
    }
    .navigation-bar .element-menu .dropdown-menu .dropdown-toggle:after,
    .navbar .element-menu .dropdown-menu .dropdown-toggle:after {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .metro .navigation-bar ul#main-menu.element-menu > li:first-child a {
      border-top: 1px solid #eee;
    }

    /* Margin is set to zero for small screen, because text is removed from some buttons and only the icons appear
       - this makes the buttons square instead of slightly rectangle */
      .metro .on-left {
        margin-right: 0;
      }/*A*/

    /* Fix up the main navigation so the name of user is closer to the left side of the nav * /
      .metro .navigation-bar span strong {
        margin-left: -10px;
      }/ *A*/

    /* Fix Headings */
      .metro h1 {
        font-size: 3.4rem;
      }

      .metro h4 {
        font-size: 2.1rem;
        line-height: 110%;
      }/*A*/

    /* FORM UPDATES */
      .metro div.container form .grid .row.ntm {
        margin-top: 10px;
      }

      .metro div.container form .grid fieldset .row.ntm {
        margin-top: 0;
      }

      .metro fieldset {
        padding: 20px 10px 10px 10px;
      }

      .metro div.container .grid .row label {
        font-size: 90%;
      }

      .metro div.container .grid .row label.right {
        text-align: left;
        margin-left: 5px;
      }/*A*/

  }

/* Phones landscape : change alignment of labels */
  @media only screen and (max-width: 640px) {
    html {
      font-size: 60%;
    }

    /* Fix location of dropdown arrow */
    .metro .navigation-bar .pull-menu:before,
    .metro .navbar .pull-menu:before {
      font-size: 20pt;
      top: 10px;
      left: 10px;
    }

    .metro .navigation-bar .element-menu > li > a.dropdown-toggle:after,
    .metro .navbar .element-menu > li > a.dropdown-toggle:after {
      margin-left: -35px;
      margin-top: -20px;
    }

    .no-phone-landscape,
    .no-phone {
      display: none !important;
      visibility: hidden !important;
    }
    .on-phone {
      display: block !important;
      visibility: visible !important;
    }
    div.container {
      width: 100% !important;
      padding: 0 5px;
    }
    .metro nav.container.navigation-bar-content {
      padding: 0;
    }
    .grid:not(.fluid) > .row {
      margin: 0;
    }
    .grid:not(.fluid) > .row > [class*="span"] {
      width: 100% !important;
      margin: 0 !important;
      margin-bottom: 5px !important;
    }
    .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {
      margin-left: 0 !important;
    }
    .grid:not(.fluid) > .row .span12 {
      width: 100% !important;
    }
    .grid:not(.fluid) > .row .row {
      margin: 0;
    }
    .grid:not(.fluid) > .row .row > [class*="span"] {
      width: 100% !important;
      margin: 0 !important;
      margin-bottom: 5px !important;
    }
    .grid:not(.fluid) > .row .row > [class*="span"]:nth-child(even) {
      margin-left: 0 !important;
    }
    .grid:not(.fluid) > .row .row .span12 {
      width: 100% !important;
    }

  }

/* Phones portrait */
  @media only screen and (max-width: 480px) {
    html {
      font-size: 45%;
    }
    .no-phone-landscape,
    .no-phone {
      display: none !important;
      visibility: hidden !important;
    }
    div.container {
      width: 100% !important;
    }
    .metro .grid > .row .span12,
    .metro .row .span7,
    .metro .grid > .row .span7,
    .metro .grid > .row .span8,
    .metro .grid > .row .span9,
    .metro .grid > .row .span10,
    .metro .grid > .row .span11,
    .metro .grid > .row .row .span12,
    .metro .grid > .row .row .span7,
    .metro .grid > .row .row .span8,
    .metro .grid > .row .row .span9,
    .metro .grid > .row .row .span10,
    .metro .grid > .row .row .span11  {
      width: 100% !important;
    }

    .metro .grid > .row .span6,
    .metro .grid > .row .span5,
    .metro .grid > .row .span4,
    .metro .grid > .row .span3,
    .metro .grid > .row .span2,
    .metro .grid > .row .span1,
    .metro .grid > .row .row .span6,
    .metro .grid > .row .row .span5,
    .metro .grid > .row .row .span4,
    .metro .grid > .row .row .span3,
    .metro .grid > .row .row .span2,
    .metro .grid > .row .row .span1  {
      width: 50% !important;
    }

    /* keep iframes from getting too wide */
    .metro div.container iframe {
      max-width: 100%!important;
    }

    .metro .grid .row fieldset[class*="span"] {
      margin-left: 0;
    }

    /* Window/Lightbox */
      .metro .window {
        min-width: 280px!important;
        max-width: 460px!important;
        max-height: 600px!important;
        overflow: auto;
      }

      .metro .window img {
        max-height: 200px;
      }

      .metro .window .test-email-window .row.ntm.padding10 div.right {
        text-align: center;
      }

      .metro .window .table.condensed.small-text tr th,
      .metro .window .table.condensed.small-text tr td {
        font-size: 0.7em!important;
        line-height: 1.4em;
      }
      .metro .window .table.condensed.small-text tr td a {
        font-size: 0.1em;
        display: block;
        width: 100%;
        height: auto;
        padding: 2px;
        background-color: #bf5a15!important;
        color: #fff!important;
      }



    /* Default for messaging on pages set to left align */
      .metro div.container .grid .row.no_show.no_print p,
      .metro div.container .grid .row.no_show.no_print a.button {
        text-align: left;
      }

    /* UPDATED FOR - 2017/2018 */

      /* HEADER */
        .metro div.container header.grid .row .span7 {
          width: 100%!important;
          margin-left: 0;
        }

        .metro div.container header.grid .row .span7 h2 {
          margin: 5px 0 0 0;
          line-height: 35px;
        }
        
        .metro div.container header.grid .row .span7 + .span5.right {
          width: 100%!important;
          margin-left: 0;
          background-color: #1b6eae !important;
          text-align: left;
          padding: 0 0 0 10px;
          border-bottom: 1px solid #bbb;
        }
        
        .metro div.container header.grid .row .span7 + .span5.right h2 {
          color: #fff;
          font-size: 0.9em;
          margin: 3px 0;
        }

        .metro div.container header.grid .row .span7 + .span5.right h2 > span.hidden {
          display: block!important;
          float: left;
          padding-right: 5px;
          color: #DDD;
        }
        
        .metro div.container header.grid .logo {
          margin-right: 5px;
        }

        .metro .navigation-bar ul#team-centre {
          display: block!important;
        }

        .metro .navigation-bar ul#team-centre li {
          float: left!important;
          width: 40px!important;
        }
        .metro .navigation-bar ul#team-centre li > a {
          width: 100%!important;
          height: 44px!important;
          padding-left: 12px!important;
        }

        .metro .navigation-bar ul#team-centre li > a > span {
          display: none!important;
        }

        .metro .navigation-bar #active-team {
          background-color: #000;
        }
        .metro .navigation-bar #active-team ul {
          display: block!important;
        }
        .metro .navigation-bar #active-team ul li {
          line-height: 12px;
          font-size: 11px;
          padding: 7px 10px;  
        }
        .metro #contacts-menu {
          border-left: none!important;
        }


      /* BODY */
        .metro > .container > div.grid > div.row > div.span3 {
          width: 100%!important;
        }

        .metro > .container > div.grid > div.row > div.span9 .row .span3,
        .metro > .container > div.grid > div.row > div.span9 .row .span6 {
          width: 100%!important;
        }

      /* Home */
        .metro > .container .fluid.grid.home-page > div.row > div.span8 {
          width: 100%!important;
        }

        .metro > .container .fluid.grid.home-page .row .span4 {
          width: 100%!important;
          margin-left: 0;
        }

        .metro > .container .fluid.grid.home-page .row .span4 .toolbar {
          margin-top: 10px;
        }

      /* Headings */
        .metro div.container h2 {
          font-size: 16px;
          line-height: 18px;
        }
        .metro div.container h3 {
          font-size: 12px;
          line-height: 14px;
        }
        .metro div.container h4 {
          font-size: 9px;
          line-height: 11px;
        }

      /* Easy Selector : Used on numerous pages, 1 label, 1 selector, optional buttons */
        .metro div.container .grid form div.easy-selector {

        }
        .metro div.container .grid form div.easy-selector label.span3 {
          padding-left: 10px;
          width: 28%!important;
        }
        .metro div.container .grid form div.easy-selector div.input-control.select {
          width: 67%!important;
        }
        .metro div.container .grid form div.easy-selector div.span2,
        .metro div.container .grid form div.easy-selector div.span3 {
          margin-top: 10px;
          width: 100%!important;
        }
        .metro div.container .grid form div.easy-selector div.span12 {
          font-size: 0.85em;
          line-height: 1.5em;
        }

      /* Facility Availability Report */
        .metro table#facility-availability-report {
          width: 100%;
          overflow: hidden;
        }

        .metro table#facility-availability-report tbody td.button-holder {
          width: 110px; /* for the first column */
        }

        .metro table#facility-availability-report tbody td.button-holder .image-button {
          font-size: 10px!important;
          line-height: 12px!important;
          min-height: 28px;
          text-align: left;
          padding: 4px 24px 4px 4px ;
        }

        .metro div.container .grid table#facility-availability-report thead tr th {
          font-weight: 400;
          font-size: 9px;
          line-height: 11px;
          padding: 10px 2px;
          text-align: center!important;
          vertical-align: middle;
        }

        .metro div.container .grid table#facility-availability-report thead tr th:last-child {
          font-size: 8px;
        }

      /* Event Report */
        .metro table#event-report tbody td.button-holder {
          width: 120px!important; /* for the first column */
        }

        .metro table#event-report tbody td.button-holder .image-button {
          font-size: 10px!important;
          line-height: 12px!important;
          min-height: 28px;
        }

        .metro div.container .fluid.grid table#event-report thead tr th {
          font-weight: 400;
          font-size: 9px;
          line-height: 11px;
          padding: 10px 2px;
          text-align: center!important;
          vertical-align: middle;
        }

      /* Forms */
        .metro div.container table thead th {
          padding-top: 10px;
          font-size: 8pt;
          line-height: 9.4pt;
        }

        .metro div.container .fluid.grid .row label.span3 {
          width: 100%!important;
          margin-left: 0!important;
        }

        .metro div.container .fluid.grid .row div.span4,
        .metro div.container .fluid.grid .row div.span5,
        .metro div.container .fluid.grid .row div.span6,
        .metro div.container .fluid.grid .row div.span7,
        .metro div.container .fluid.grid .row div.span8,
        .metro div.container .fluid.grid .row div.span9 {
          width: 100%!important;
          margin-left: 0!important;
        }

        .metro div.container .fluid.grid .row label.span2 {
          width: 42%!important;
        }
        .metro div.container .fluid.grid .row label.span2 span.helper {
          font-size: 9px!important;
          line-height: 11px;
        }

        .metro div.container .fluid.grid .row label.span4 {
          font-size: 1em;
          line-height: 1.2em;
        }
        .metro div.container .fluid.grid form .row:last-child {
          margin-top: 10px!important;
        }
        .metro div.container .fluid.grid .row .span4 {
          width: 100%!important;
          margin-left: 0;
        }

        .metro div.container .fluid.grid .row .span6 select {
          width: 98%!important;
          margin-left: 1%;
        }

        .metro div.container .fluid.grid div[id^=errmsg_] {
          text-align: left;
          font-size: 0.95em;
          line-height: 1.6em;
        }

      /* Tables (eg, contacts) */
        .metro div.container .row table.table {
          max-width: 100%!important;
          overflow: auto!important;
        }
        .metro div.container .row table.table th,
        .metro div.container .row table.table td {
          padding: 6px;
          font-size: 9px;
          line-height: 11px;
        }

      /* Multi Select (two columns) */
        .metro div.container .fluid.grid .multi-select .span2 {
          margin: 0;
          padding: 4% 2%;
          width: 24%!important;
        }

        .metro div.container .fluid.grid .multi-select .span2 button {
          font-size: 0.9em!important;
          padding-left: 5px;
          padding-right: 5px;
        }

        .metro div.container .fluid.grid .multi-select .span2 button [class*="icon-"] {
          display: block;
        }

        .metro div.container .fluid.grid.profile-page .frame .row.multi-select .span4,
        .metro div.container .fluid.grid .multi-select .span4 {
          margin-left: 0!important;
          padding-left: 0!important;
          width: 38%!important;
        }

        .metro div.container .fluid.grid .multi-select .span4 label,
        .metro div.container .fluid.grid .multi-select .span4 label span.floatright {
          margin-top: 0;
          text-align: center;
          float: none;
          display: block;
        }
        .metro div.container .fluid.grid .multi-select .span4 label span.floatright {
          font-size: 0.9em;
        }

        .metro div.container .fluid.grid .multi-select .span4 select {
          font-size: 0.8em;
          min-height: 128px;
          padding: 1px;
        }
        .metro div.container .fluid.grid .multi-select .span4 select option {
          height: 1.8em;
          padding: 0.3em 0.2em;
          overflow: hidden;
        }


  }

  /* Small */
  @media only screen and (max-width: 360px) {
    html {
      font-size: 40%;
    }
    .no-phone-portrait,
    .no-phone {
      display: none !important;
      visibility: hidden !important;
    }
    .container {
      width: 100% !important;
    }
  }

  /* Very Small (iPhone5 and under) */
  @media only screen and (max-width: 320px) {
    html {
      font-size: 40%;
    }
    .no-phone-portrait,
    .no-phone {
      display: none !important;
      visibility: hidden !important;
    }
    .container {
      width: 100% !important;
    }

    .metro ul.tabs li {

      line-height: 16px;
    }

    .metro .tab-control .tabs > li > a {
      padding: 2px 4px;
    }

  }