/* General stuff */
.small-square, .medium-square, .large-square, .small-circle, .medium-circle, .large-circle, .small-triangle, .medium-triangle, .large-triangle{
    bottom: 0;
    position: absolute;
    z-index: 2; }

.small-square{
    background: rgba(40, 40, 40, 0.2);
    height: 2%;    
    width: 1%; }
    
.medium-square{
    background: rgba(40, 40, 40, 0.1);
    height: 4%;
    width: 2%; }
    
.large-square{
    background: rgba(40, 40, 40, 0.1);
    height: 8%;
    width: 4%; }
    
.small-circle{
    background: rgba(40, 40, 40, 0.2);
    -moz-border-radius: 50%;
    height: 4%;
    margin-bottom: -0.5%;
    width: 2%; }
    
.medium-circle{
    background: rgba(40, 40, 40, 0.1);
    -moz-border-radius: 50%;
    height: 8%;
    margin-bottom: -3%;    
    width: 4%; }
    
.large-circle{
    background: rgba(40, 40, 40, 0.1);
    -moz-border-radius: 50%;
    height: 16%;
    margin-bottom: -3%;       
    width: 8%; }
    
.small-triangle{
    border-top: 30px solid rgba(255, 255, 255, 0);
    border-right: 20px solid rgba(255, 255, 255, 0);
    border-bottom: 30px solid rgba(40, 40, 40, 0.2);
    border-left: 20px solid rgba(255, 255, 255, 0); }
    
.medium-triangle{
    border-top: 60px solid rgba(255, 255, 255, 0);
    border-right: 30px solid rgba(255, 255, 255, 0);
    border-bottom: 60px solid rgba(40, 40, 40, 0.1);
    border-left: 30px solid rgba(255, 255, 255, 0); }
    
.large-triangle{
    border-top: 120px solid rgba(255, 255, 255, 0);
    border-right: 60px solid rgba(255, 255, 255, 0);
    border-bottom: 120px solid rgba(40, 40, 40, 0.1);
    border-left: 60px solid rgba(255, 255, 255, 0); }
    
/* Left position. It could've been done easily with jQuery, but I set out to do this stuff with just CSS. */    
 .left1{ margin-left: 1%; }    
 .left2{ margin-left: 2%; }    
 .left3{ margin-left: 3%; }    
 .left4{ margin-left: 6%; }    
 .left5{ margin-left: 9%; }    
 .left6{ margin-left: 12%; }
 .left7{ margin-left: 15%; }    
 .left8{ margin-left: 18%; }    
 .left9{ margin-left: 21%; }
.left10{ margin-left: 24%; }    
.left11{ margin-left: 27%; }    
.left12{ margin-left: 30%; }
.left13{ margin-left: 33%; }    
.left14{ margin-left: 36%; }    
.left15{ margin-left: 39%; }
.left16{ margin-left: 42%; }    
.left17{ margin-left: 45%; }    
.left18{ margin-left: 48%; }
.left19{ margin-left: 52%; }    
.left20{ margin-left: 55%; }    
.left21{ margin-left: 58%; }
.left22{ margin-left: 61%; }
.left23{ margin-left: 64%; }    
.left24{ margin-left: 67%; }    
.left25{ margin-left: 70%; }
.left26{ margin-left: 73%; }    
.left27{ margin-left: 76%; }
.left28{ margin-left: 79%; }
.left29{ margin-left: 82%; }    
.left30{ margin-left: 85%; }    
.left31{ margin-left: 88%; }
.left32{ margin-left: 91%; }    
.left33{ margin-left: 94%; }