/*
 * After compiling to CSS with Sass, you must add in the !YUI Compressor comments back into the CSS as seen below.
 * Sass removes them when compiling, they are needed to make compression work during the deployment process.
 */
@media only screen and /*!YUI Compressor */(max-device-width: 480px) and /*!YUI Compressor */(min-device-width: 0px), only screen and /*!YUI Compressor */(max-width: 480px) and /*!YUI Compressor */(min-width: 0px){
  #page-container {
    width: 480px;
    padding-top: 5px; }

  .mobile-only {
    display: block; }

  .desktop-only {
    display: none; }

  #top-container {
    width: 480px; }
    #top-container #top {
      width: 480px; }
      #top-container #top #hairtype-results {
        padding-left: 15px; }

  #header {
    width: 440px;
    height: 65px; }
    #header h1 {
      font-size: 18px;
      margin-top: 10px;
      line-height: 18px; }
    #header #logo > img {
      width: 200px; }
    #header.landing-page h1 {
      margin-top: 10px; }
    #header > .quiz-link {
      top: 66px; }

  #hairtype-header {
    width: 440px;
    height: auto; }
    #hairtype-header > .description {
      width: 440px;
      height: auto; }

  #nav {
    margin-bottom: 0; }
    #nav > li {
      width: 159px; }
      #nav > li:nth-child(3n+3) {
        border-right: 0; }
        #nav > li:nth-child(3n+3) > a {
          border-right: 0; }

  #body > * {
    margin: 7px 7px 0 7px; }

  .columns.four > .column.narrow {
    margin-right: 6px; }
  .columns.four > .column.wide {
    margin-right: 0; }
  .columns.hair-type > .column {
    width: 145px;
    margin-right: 10px; }
    .columns.hair-type > .column > a > img {
      width: 100px; } }