progressive-enhancement-3-11.css

/* =Color */
a:link, a:visited, a:active {
  color: rgb(22, 127, 53);
}
a:hover {
  color: rgb(242, 98, 42);
}

/* =Effects */
a {
  transition-duration: .25s;
}

progressive-enhancement-3-12.html

<link rel="stylesheet" type="text/css" href="c/main.css"/>
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="/c/ie8.css"/><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/c/ie7.css"/><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/c/ie6.css"/><![endif]-->

progressive-enhancement-3-13.css

@import 'not-for-IE7-or-below.css' screen;
@media screen, print, refrigerator {
  /* IE will get these rules */
}

progressive-enhancement-3-14.css

/* =Color */
.hproduct {
  border-color: #ccc
  color: #333;
}
@media screen {
  .hproduct {
    background: #000;
    color: #ccc;
  }
}
@media print {
  .hproduct {
    background: transparent;
    color: #000;
  }
}
/* … */

progressive-enhancement-3-15.css

@media (min-width:801px) {
  /* … */
}

progressive-enhancement-3-16.css

@media (min-device-width:1024px) and (max-width:989px),
            screen and (max-device-width:480px),
            (max-device-width:480px) and (orientation:landscape),
            (min-device-width:481px) and (orientation:portrait) {
  /* Layout for narrow browser, iPad in portrait mode, and iPhone/iPod Touch in landscape mode */
}
@media (min-device-width:1024px) and (max-width:509px),
       (max-device-width:480px) and (orientation:portrait) {
  /* Layout for narrowest browser and iPhone/iPod Touch in portrait mode */
}