retouches finales

css/06-rwd.css

@@ -1,56 +1,77 @@
 /* ----------------------------- */
-/* ==desktop and retina medias   */
+
+/* ==desktop and HD devices      */
+
 /* ----------------------------- */
+
 @media (min-width: 480px) {
   /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
 }
+
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
   /* Style adjustments for retina devices */
 }
+
 /* ---------------------------------- */
-/* ==Responsive large / medium / tiny */
+
+/* ==Responsive large / small / tiny  */
+
 /* ---------------------------------- */
+
 @media (min-width: 1024px) {
   /* layouts for large screens */
+
   .large-hidden {
     display: none !important;
   }
+
   .large-visible {
     display: block !important;
   }
+
   .large-no-float {
     float: none;
   }
+
   .large-inbl {
     display: inline-block;
     float: none;
     vertical-align: top;
   }
+
   .large-row {
     display: table;
     table-layout: fixed;
     width: 100% !important;
   }
+
   .large-col {
     display: table-cell;
     vertical-align: top;
   }
+
   /* widths for large screens */
+
   .large-w25 {
     width: 25% !important;
   }
+
   .large-w33 {
     width: 33.3333% !important;
   }
+
   .large-w50 {
     width: 50% !important;
   }
+
   .large-w66 {
     width: 66.6666% !important;
   }
+
   .large-w75 {
     width: 75% !important;
   }
+
   .large-w100,
   .large-wauto {
     display: block !important;
@@ -61,13 +82,17 @@
     margin-right: 0 !important;
     border: 0;
   }
+
   /* margins for large screens */
-  .large-ma0 {
+
+  .large-man {
     margin: 0 !important;
   }
 }
+
 @media (max-width: 480px) {
   /* quick reset in small resolution and less */
+
   .w600p,
   .w700p,
   .w800p,
@@ -76,46 +101,60 @@
     width: auto;
     float: none;
   }
+
   /* layouts for small screens */
+
   .small-hidden {
     display: none !important;
   }
+
   .small-visible {
     display: block !important;
   }
+
   .small-no-float {
     float: none;
   }
+
   .small-inbl {
     display: inline-block;
     float: none;
     vertical-align: top;
   }
+
   .small-row {
     display: table !important;
     table-layout: fixed !important;
     width: 100% !important;
   }
+
   .small-col {
     display: table-cell !important;
     vertical-align: top !important;
   }
+
   /* widths for small screens */
+
   .small-w25 {
     width: 25% !important;
   }
+
   .small-w33 {
     width: 33.3333% !important;
   }
+
   .small-w50 {
     width: 50% !important;
   }
+
   .small-w66 {
     width: 66.6666% !important;
   }
+
   .small-w75 {
     width: 75% !important;
   }
+
   .small-w100,
   .small-wauto {
     display: block !important;
@@ -126,13 +165,21 @@
     margin-right: 0 !important;
     border: 0;
   }
+
   /* margins for small screens */
-  .small-ma0 {
+
+  .small-man {
     margin: 0 !important;
   }
+
+  .small-pan {
+    padding: 0 !important;
+  }
 }
+
 @media (max-width: 320px) {
   /* quick tiny resolution reset */
+
   .mod,
   .col,
   fieldset {
@@ -144,65 +191,83 @@
     margin-right: 0 !important;
     border: 0;
   }
+
   .w300p,
   .w400p,
   .w500p {
     width: auto;
     float: none;
   }
+
   .row {
     display: block !important;
     width: 100% !important;
   }
+
   /* layouts for tiny screens */
+
   .tiny-hidden {
     display: none !important;
   }
+
   .tiny-visible {
     display: block !important;
   }
+
   .tiny-no-float {
     float: none;
   }
+
   .tiny-inbl {
     display: inline-block;
     float: none;
     vertical-align: top;
   }
+
   .tiny-row {
     display: table !important;
     table-layout: fixed !important;
     width: 100% !important;
   }
+
   .tiny-col {
     display: table-cell !important;
     vertical-align: top !important;
   }
+
   th,
   td {
     display: block !important;
     width: auto !important;
     text-align: left !important;
   }
+
   thead {
     display: none;
   }
+
   /* widths for tiny screens */
+
   .tiny-w25 {
     width: 25% !important;
   }
+
   .tiny-w33 {
     width: 33.3333% !important;
   }
+
   .tiny-w50 {
     width: 50% !important;
   }
+
   .tiny-w66 {
     width: 66.6666% !important;
   }
+
   .tiny-w75 {
     width: 75% !important;
   }
+
   .tiny-w100,
   .tiny-wauto {
     display: block !important;
@@ -213,8 +278,14 @@
     margin-right: 0 !important;
     border: 0;
   }
+
   /* margins for tiny screens */
-  .tiny-ma0 {
+
+  .tiny-man {
     margin: 0 !important;
   }
-}
+
+  .tiny-pan {
+    padding: 0 !important;
+  }
+}