Raised Hugoware Block

<div class="block orange" >
  This is a raised block
</div>

<div class="block green" >
  This is another raised block<br />
  That has some more content<br />
  And isn't all on the same line<br />
</div>

<a class="block blue" href="#shiny" >
  This block is a link!
</a>

.block {
  border-radius : 5px;
  border-width : 1px;
  border-style : solid;
  margin-bottom : 40px;

  color : #fff;
  display : block;
  position : relative;
  text-decoration : none;
}

.block.orange {
  border-color : #ff9000;
  border-top-color : #e6b97f;

  background: #d79135;
  background: -moz-linear-gradient(top, #d79135 0%, #cd7401 100%);
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#d79135), color-stop(100%,#cd7401));
  background: -webkit-linear-gradient(top, #d79135 0%,#cd7401 100%);
  background: -o-linear-gradient(top, #d79135 0%,#cd7401 100%);
  background: -ms-linear-gradient(top, #d79135 0%,#cd7401 100%);
  background: linear-gradient(top, #d79135 0%,#cd7401 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#d79135', endColorstr='#cd7401',GradientType=0 );

  box-shadow : 0 1px 0 #954a0e
    , 0 2px 0 #954a0e
    , 0 3px 0 #954a0e
    , 0 4px 0 #954a0e
    , 0 5px 0 #954a0e
    , 0 6px 0 #954a0e
    , 0 7px 0 #954a0e
    , 0 11px 13px 1px rgba(0,0,0,.7);
}

.block.green {
  border-color : #81c42a;
  border-top-color : #adc98d;

  background: #6eb91c;
  background: -moz-linear-gradient(top, #6eb91c 0%, #5b951d 100%);
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#6eb91c), color-stop(100%,#5b951d));
  background: -webkit-linear-gradient(top, #6eb91c 0%,#5b951d 100%);
  background: -o-linear-gradient(top, #6eb91c 0%,#5b951d 100%);
  background: -ms-linear-gradient(top, #6eb91c 0%,#5b951d 100%);
  background: linear-gradient(top, #6eb91c 0%,#5b951d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#6eb91c', endColorstr='#5b951d',GradientType=0 );

  box-shadow : 0 1px 0 #3f751e
    , 0 2px 0 #3f751e
    , 0 3px 0 #3f751e
    , 0 4px 0 #3f751e
    , 0 5px 0 #3f751e
    , 0 6px 0 #3f751e
    , 0 7px 0 #3f751e
    , 0 11px 13px 1px rgba(0,0,0,.7);
}

.block.blue {
  border-color : #2a81c4;
  border-top-color : #8db5c9;

  background: #1d6c95;
  background: -moz-linear-gradient(top, #4b8bab 0%, #1d6c95 100%);
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#4b8bab), color-stop(100%,#1d6c95));
  background: -webkit-linear-gradient(top, #4b8bab 0%,#1d6c95 100%);
  background: -o-linear-gradient(top, #4b8bab 0%,#1d6c95 100%);
  background: -ms-linear-gradient(top, #4b8bab 0%,#1d6c95 100%);
  background: linear-gradient(top, #4b8bab 0%,#1d6c95 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#4b8bab', endColorstr='#1d6c95',GradientType=0 );

  box-shadow : 0 1px 0 #1f374f
    , 0 2px 0 #1f374f
    , 0 3px 0 #1f374f
    , 0 4px 0 #1f374f
    , 0 5px 0 #1f374f
    , 0 6px 0 #1f374f
    , 0 7px 0 #1f374f
    , 0 11px 13px 1px rgba(0,0,0,.7);
}

.block.blue:hover {
  background: #8DB5C9;
  background: -moz-linear-gradient(top, #8DB5C9 0%, #1d6c95 100%);
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#8DB5C9), color-stop(100%,#1d6c95));
  background: -webkit-linear-gradient(top, #8DB5C9 0%,#1d6c95 100%);
  background: -o-linear-gradient(top, #8DB5C9 0%,#1d6c95 100%);
  background: -ms-linear-gradient(top, #8DB5C9 0%,#1d6c95 100%);
  background: linear-gradient(top, #8DB5C9 0%,#1d6c95 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#8DB5C9', endColorstr='#1d6c95',GradientType=0 );
}