Applying the blue floating boxes only to the right column

Before our CSS code applied to all elements in the "main-inner" region of the page. By changing
.main-inner
to
.column-right-inner
we limit the sexy blue boxes to the right side of the blog.

I just realised that the moz / webkit / goog-ms box-shadows differ (see below). My mistake, too many trial and error tests, will soon be corrected.
Here is the full code:

.column-right-inner .widget {

position: relative;

margin: 60px 0 20px;

padding: 0 15px;

background-color: white;

$$$$border: 10px solid #BAD304;

border: 10px solid #33aaff;

-moz-box-shadow: 20px 20px 50px rgba(0, 0, 0, .2);

-webkit-box-shadow: 10 20 30px rgba(0, 0, 0, .2);

-goog-ms-box-shadow: 0 0 50px rgba(0, 0, 0, .2);

box-shadow: 40px 30px 30px rgba(0, 0, 0, .2);

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

-goog-ms-border-radius: 15px;

border-radius: 15px;

}

Some small touches to finalise the first version

The Blogger navbar is visually too "loud", we tone it down. That is done in the the Blogger Dashboard <Design -Page Elements>. If you want the navbar to disappear, simply add #navbar {display: none;} in the Advanced-Add CSS field.

Then there is the Blog Title color, we switch to a humble gray.

And thats it for now. later we will simplify the "post" element. Our initial design brief called for a simple and readable list of messages. Therefore we'll remove the border and shadow around the "post" section on the left of the blog.

The CSS code which transforms Simple to Floating Boxes

After applying the CSS changes

Before (Simple)

.main-inner .widget {

position: relative;

margin: 60px 0 20px;

padding: 0 15px;

background-color: white;

$$$$border: 10px solid #BAD304;

border: 10px solid #33aaff;

-moz-box-shadow: 20px 20px 50px rgba(0, 0, 0, .2);

-webkit-box-shadow: 10 20 30px rgba(0, 0, 0, .2);

-goog-ms-box-shadow: 0 0 50px rgba(0, 0, 0, .2);

box-shadow: 40px 30px 30px rgba(0, 0, 0, .2);

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

-goog-ms-border-radius: 15px;

border-radius: 15px;

}