Redesigned posted images look

static/cranefly/css/cranefly.css

@@ -956,10 +956,9 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .markdown blockquote blockquote{background-color:#ffffff;border:1px solid #f2f2f2;border-radius:3px;padding:14px;}
 .markdown code{background-color:#333333;border:none;color:#eeeeee;font-size:14px;}
 .markdown pre{background-color:#222222;padding:7px 14px;}.markdown pre code{background:none;border:none;color:#eeeeee;font-size:11.9px;}
-.markdown img{border-radius:3px;box-shadow:0px 0px 4px #555555;margin:10px 0px;}
-.markdown .md-img{overflow:auto;}.markdown .md-img .md-img-span{margin:10px 0px;float:none;}.markdown .md-img .md-img-span .md-img-wrap{background-color:#eeeeee;border:1px solid #ffffff;border-radius:4px;box-shadow:0px 0px 2px #999999;margin:3px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg{background-color:#ffffff;border-radius:3px;padding:10px;text-align:center;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg img{border-radius:3px;box-shadow:none;}
-.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error{background:url('../img/img_broken.jpg');border-radius:3px;padding:50px 0px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error span{background-color:#333333;border-radius:5px;opacity:0.8;filter:alpha(opacity=80);padding:7px 14px;margin:0px auto;color:#ffffff;text-shadow:0px 1px 0px #000000;}
-.markdown .md-img .md-img-span .md-img-wrap .md-img-label{display:block;padding:7px 14px;color:#333333;}.markdown .md-img .md-img-span .md-img-wrap .md-img-label:hover,.markdown .md-img .md-img-span .md-img-wrap .md-img-label:active{color:#333333;text-decoration:none;}
+.markdown img{background-color:#ffffff;border-radius:3px;box-shadow:0px 0px 4px #555555;margin:10px 0px;}
+.markdown .md-img{overflow:auto;margin:10px 0px;}.markdown .md-img .md-img-span{float:none;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg{text-align:center;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error{background:url('../img/img_broken.jpg');border-radius:3px;padding:50px 0px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error span{background-color:#333333;border-radius:5px;opacity:0.8;filter:alpha(opacity=80);padding:7px 14px;margin:0px auto;color:#ffffff;text-shadow:0px 1px 0px #000000;}
+.markdown .md-img .md-img-span .md-img-wrap .md-img-label{display:block;margin-top:-4.05px;color:#999999;font-size:11.9px;text-align:center;}.markdown .md-img .md-img-span .md-img-wrap .md-img-label:hover,.markdown .md-img .md-img-span .md-img-wrap .md-img-label:active{color:#333333;text-decoration:none;}
 .markdown pre,.markdown blockquote,.markdown iframe{margin-top:20px;margin-bottom:20px;}.markdown pre>:first-child,.markdown blockquote>:first-child,.markdown iframe>:first-child{margin-top:0px;}
 .markdown pre>:last-child,.markdown blockquote>:last-child,.markdown iframe>:last-child{margin-bottom:0px;}
 .index-sidebar{position:relative;bottom:9px;}

static/cranefly/css/cranefly/markdown.less

@@ -93,6 +93,7 @@
   }
 
   img {
+    background-color: @white;
     border-radius: @baseBorderRadius;
     box-shadow: 0px 0px 4px @gray;
     margin: (@baseLineHeight / 2) 0px;
@@ -100,30 +101,15 @@
 
   .md-img {
     overflow: auto;
+    margin: (@baseLineHeight / 2) 0px;
 
     .md-img-span {
-      margin: (@baseLineHeight / 2) 0px;
       float: none;
 
       .md-img-wrap {
-        background-color: @grayLighter;
-        border: 1px solid @white;
-        border-radius: @baseBorderRadius + 1px;
-        box-shadow: 0px 0px 2px @grayLight;
-        margin: 3px;
-
-        .md-img-bg {
-          background-color: @white;
-          border-radius: @baseBorderRadius;
-          padding: (@baseLineHeight / 2);
-          
+        .md-img-bg {          
           text-align: center;
 
-          img {
-            border-radius: @baseBorderRadius;
-            box-shadow: none;
-          }
-
           .md-img-error {
             background: url('../img/img_broken.jpg');
             border-radius: @baseBorderRadius;
@@ -144,9 +130,11 @@
 
         .md-img-label {
           display: block;
-          padding: (@baseFontSize / 2) @baseFontSize;
+          margin-top: (@baseLineHeight - @fontSizeSmall) / -2;
 
-          color: @grayDark;
+          color: @grayLight;
+          font-size: @fontSizeSmall;
+          text-align: center;
 
           &:hover, &:active {
             color: @textColor;