Further improved thumbnailPreview CSS

www/css/styles.css

@@ -39,6 +39,15 @@
     margin-bottom: 0px;
 }
 
+img.grayscale {
+    /* Firefox 10+, Firefox on Android */
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+    /* IE6-9 */
+    filter: gray;
+    /* Chrome 19+, Safari 6+, Safari 6+ iOS */
+    -webkit-filter: grayscale(100%);
+}
+
 /* Header
 -------------------------------------------------- */
 
@@ -83,6 +92,16 @@ ul.nav li.dropdown-append:hover > ul.dropdown-menu {
     width: 270px;
 }
 
+.thumbnails > .thumbnailParentSpan:last-child {
+    margin-right: 0;
+    margin-left: 0;
+}
+
+.thumbnails > .thumbnailParentSpan:not(:last-child) {
+    margin-right: 30px;
+    margin-left: 0;
+}
+
 .thumbnailParentSpan > div {
     min-height: 600px;
 }
@@ -106,6 +125,6 @@ ul.nav li.dropdown-append:hover > ul.dropdown-menu {
 }
 
 .thumbnailDisabled {
-    opacity: 0.4;
-    /*filter: alpha(opacity=40); *//* msie */
+    opacity: 0.75;
+    filter: alpha(opacity=75); /* msie */
 }

www/protected/components/views/thumbnailPreview.php

@@ -2,12 +2,12 @@
 /* @var $this ThumbnailPreview */
 ?>
 
-<li class="span3 thumbnailParentSpan">
+<li class="thumbnailParentSpan">
 	<div >
 		<div class="thumbnail <?php if (! $this->enabled) print("thumbnailDisabled"); ?>">
 			<div class="thumbnailInnerHead">
 				<a <?php if($this->enabled) echo 'href="'. $this->link . '"'; ?>>
-					<img style="width: 100%" src="<?php echo $this->image; ?>">
+					<img style="width: 100%" <?php if (! $this->enabled) print('class="grayscale"'); ?> src="<?php echo $this->image; ?>">
 				</a>
 			</div>
 			<div class="caption">