<!-- http://html5snippets.com/snippets/10-css-lifted-corner-drop-shadow# -->

<!-- I´ve used the same style in the URL above as a start point, but with LESS, to be implemented in a 320andup template -->


<div class="scaffolding shape-rounded shadow lifted-1"></div>

<div class="scaffolding shape-curved shadow lifted-2"></div>

<div class="scaffolding shape-weird shadow lifted-3"></div>

<div class="scaffolding shape-ellipse shadow lifted-4"></div>

<div class="scaffolding shape- shadow lifted-5"></div>

<div class="scaffolding shape- shadow lifted-6"></div>

<div class="scaffolding shape- shadow lifted-7"></div>

<div class="scaffolding shape- shadow lifted-8"></div>

<div class="scaffolding shape- shadow lifted-9"></div>

<div class="scaffolding shape- shadow lifted-10"></div>

<div class="scaffolding shape- shadow lifted-11"></div>

<div class="scaffolding shape- shadow lifted-12"></div>

<div class="scaffolding shape- shadow lifted-13"></div>

<div class="scaffolding shape- shadow lifted-13"></div>

// ===== Variables ========
@white: #fff;
@width: 10%;
@height: 100px;


// ===== Mixins ==========

.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
-webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); }

//new implementation to fix two shadows in the same class, since I´ve notice the second nestled ".drop-shadow" kills the first. Thisone should be added in the mixins.less file in your 320andup project.

.drop-shadow-and-inset(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1, @x-axis-i: 0, @y-axis-i: 1px, @blur-i: 2px, @alpha-i:0.1) {
-webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha), @x-axis-i @y-axis-i @blur-i rgba(0, 0, 0, @alpha-i) inset;
-moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha), @x-axis-i @y-axis-i @blur-i rgba(0, 0, 0, @alpha-i) inset;
box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha), @x-axis-i @y-axis-i @blur-i rgba(0, 0, 0, @alpha-i) inset; }

.rotate(@deg) {
  -webkit-transform: rotate(@deg);   
  -moz-transform: rotate(@deg);  
  -ms-transform: rotate(@deg);  
  -o-transform: rotate(@deg);
  transform: rotate(@deg);
}

.skew(@x: 0, @y: 0) {
-webkit-transform : skew(@x, @y);
-moz-transform : skew(@x, @y);
-ms-transform : skew(@x, @y);
-o-transform : skew(@x, @y);
transform : skew(@x, @y); }

.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-webkit-border-top-right-radius : @topright;
-webkit-border-bottom-right-radius : @bottomright;
-webkit-border-bottom-left-radius : @bottomleft;
-webkit-border-top-left-radius : @topleft;
-moz-border-radius-topright : @topright;
-moz-border-radius-bottomright : @bottomright;
-moz-border-radius-bottomleft : @bottomleft;
-moz-border-radius-topleft : @topleft;
border-top-right-radius : @topright;
border-bottom-right-radius : @bottomright;
border-bottom-left-radius : @bottomleft;
border-top-left-radius : @topleft;
-webkit-background-clip : padding-box;
-moz-background-clip : padding;  
background-clip : padding-box; }

.div-radius-4xy(@x-tr: 0, @x-bt: 0, @x-bl: 0, @x-tl: 0, @y-tr: 0, @y-bt: 0, @y-bl: 0, @y-tl: 0) {
border-radius: @x-tl @x-tr @x-br @x-bl/@y-tl @y-tr @y-br @y-bl; 
-webkit-border-radius: @x-tl @x-tr @x-br @x-bl/@y-tl @y-tr @y-br @y-bl; 
-moz-border-radius: @x-tl @x-tr @x-br @x-bl/@y-tl @y-tr @y-br @y-bl; 
}

.div-radius-xy(@x, @y) {
 border-radius: @x/@y; 
-webkit-border-radius: @x/@y;
-moz-border-radius: @x/@y;
}

// ===== Main Classes ======

.scaffolding {
    position:relative;
    float:left;
    height: @height;
    width: (@width * 3);    
    padding:1em; 
    margin:2em 4em 1em;
  
}

.shape-rounded {
    .border-radius(4px, 4px, 4px, 4px);
}

.shape-curved {
    .div-radius-xy(82px, 43px);
}

.shape-weird {
    
}

.shape-ellipse {
    .div-radius-xy(50%, 50%);
}

.shadow {
    background-color: @white;
   .drop-shadow-and-inset(0, 2px, 6px, 0.5, 0, 0, 40px, 0.3);   
}


.shadow:before,
.shadow:after {
    content:"";
    position:absolute; 
    z-index:-2;
}
 
.shadow p {
    font-size:16px;
    font-weight:bold;
}


.lifted-1:before,
.lifted-1:after { 
    bottom:15px;
    width: (@width * 5);
    height:20%;
    max-width:300px;
    .drop-shadow(0, 15px, 10px, 0.7);
}

.lifted-1:before {
    left:10px;
    .rotate(-6deg);
}
 
.lifted-1:after {
    right:10px; 
    .rotate(6deg);
}

.lifted-2:before,
.lifted-2:after { 
    bottom:15px;
    width: (@width * 5);
    height:20%;
    max-width:300px;
   .drop-shadow(0, 15px, 10px, 0.5);
}

.lifted-2:before {
    left:10px;
    .rotate(-3deg);
}
 
.lifted-2:after {
    right:10px; 
    .rotate(3deg);
}


.lifted-3:before,
.lifted-3:after { 
    bottom:15px;
    width: (@width * 5);
    height:50%;
    max-width:100px;     
}

.lifted-3:before {
    .drop-shadow(-49px, 9px, 10px, 0.7); 
    left:20px;
    .skew(30deg);
}
 
.lifted-3:after {
    .drop-shadow(49px, 9px, 10px, 0.7);
    right:20px; 
    .skew(-30deg);
}

.lifted-4:before,
.lifted-4:after { 
    bottom:15px;
    width: (@width * 4);
    height:40%;
    max-width:100px;
}

.lifted-4:before {
    left:20px;
    .drop-shadow(-37px, 13px, 5px, 0.5);
    .skew(20deg);
}
 
.lifted-4:after {
    right:20px; 
    .drop-shadow(37px, 13px, 5px, 0.5);
    .skew(-20deg);
}

.lifted-5:before { 
    bottom:15px;
    width: (@width * 5);
    height:50%;
    max-width:100px;
    .drop-shadow(-49px, 9px, 10px, 0.7); 
    left:20px;
    .skew(30deg);
}


.lifted-6:after {
    bottom:15px;
    width: (@width * 4);
    height:40%;
    max-width:100px;
    left:20px; 
    .drop-shadow(-37px, 13px, 5px, 0.5);
    .skew(20deg);
}

.lifted-7:after { 
    bottom:15px;
    width: (@width * 5);
    height:50%;
    max-width:100px;
    .drop-shadow(49px, 9px, 10px, 0.7); 
    right:20px;
    .skew(-30deg);
}

.lifted-8:after {
    bottom:15px;
    width: (@width * 4);
    height:40%;
    max-width:100px;
    right:20px; 
    .drop-shadow(37px, 13px, 5px, 0.5);
    .skew(-20deg);
}

.lifted-9:after {
    bottom:15px;
    width: (@width * 9.6);
    height:25%;
    left:(@width * 0.2); 
    .drop-shadow(0, 25px, 35px, 0.7);
    .border-radius(50%, 50%, 50%, 50%);    
}

.lifted-10:after {
    bottom:15px;
    width: (@width * 9.6);
    height:12%;
    left:(@width * 0.2); 
    .drop-shadow(0, 21px, 25px, 0.5);
    .border-radius(50%, 50%, 50%, 50%);    
}

.lifted-11:before {
    top:15px;
    width: (@width * 9.6);
    height:25%;
    left:(@width * 0.2); 
    .drop-shadow(0, -18px, 35px, 0.7);
    .border-radius(50%, 50%, 50%, 50%);    
}

.lifted-11:after {
    bottom:15px;
    width: (@width * 9.6);
    height:25%;
    left:(@width * 0.2); 
    .drop-shadow(0, 25px, 35px, 0.7);
    .border-radius(50%, 50%, 50%, 50%);    
}

.lifted-12:before {
    top:15px;
    width: (@width * 9.6);
    height:12%;
    left:(@width * 0.2); 
    .drop-shadow(0, -15px, 25px, 0.5);
    .border-radius(50%, 50%, 50%, 50%);    
}

.lifted-12:after {
    bottom:15px;
    width: (@width * 9.6);
    height:12%;
    left:(@width * 0.2); 
    .drop-shadow(0, 21px, 25px, 0.5);
    .border-radius(50%, 50%, 50%, 50%);    
}

.lifted-13:before {
    right:-10px;
    width: 20px;
    height:20px;
    top: (@height /2); 
    .drop-shadow(2px, 0, 10px, 0.7);
    .border-radius(50%, 50%, 50%, 50%);
    background-color: #555;
    cursor: pointer;
}

.lifted-13:after {
    content:"";
    left:-10px;
    width: 20px;
    height:20px;
    top: (@height /2); 
    .drop-shadow(-2px, 0, 10px, 0.7);
    .border-radius(50%, 50%, 50%, 50%);
    background-color: #555;
    cursor: pointer;
  
    &:hover { /*it does not work... I guess smthg might be wrong*/
      left:-15px;
      width: 30px;
      height:30px;
    }
}