Add some basic utility classes for typography and images

css/style.css

@@ -224,6 +224,29 @@ hr {
 
 abbr { text-decoration: underline dotted; }
 
+/*** UTILITIES ***/
+
+.align-left { text-align: left; }
+.align-center { text-align: center; }
+.align-right { text-align: right; }
+.align-justify { text-align: justify; }
+
+.image { display: block; margin: 0 auto; }
+.image.xsmall { width: 20%; }
+.image.small { width: 40%; }
+.image.large { width: 60%; }
+.image.xlarge { width: 80%; }
+.image.float-left { float: left; margin: 1em 2em 1em 0; }
+.image.float-right { float: right; margin: 1em 0 1em 2em; }
+.image img { display: block; width: 100%; }
+
+@media (max-width: 767px) {
+    .image.xsmall { width: 60%; }
+    .image.small { width: 80%; }
+    .image.large, .image.xlarge { width: 100%; }
+    .image.float-left, .image.float-right { float: none; margin: 0 auto; }
+}
+
 /*** TABLES ***/
 
 table { border-spacing: 0; }