.letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 26px auto 0;
#  max-width: 550px;
  max-width: 80%;
  min-height: 300px;
  padding: 24px;
  position: relative;
  width: 80%;
}

.letter:before, .letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.letter:before {
  background: #fafafa;
#  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  box-shadow: 0 0 30px rgba(0,0,0,0.2);
#  left: -5px;
  left: 0px;
#  top: 4px;
  top: 30px; 
  transform: rotate(-2.5deg);
}

.letter:after {
  background: #f6f6f6;
#  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
#  right: -3px;
  right: -15px;
#  top: 1px;
  top: 15px;
  transform: rotate(1.4deg);
}



.letter h2 {
  #background:#e2e2ff;
  #padding: 3px;
  margin-left: 0px;
  background: url('Header2.png');
  background-size: contain;
  background-repeat: no-repeat;
  #         top  rig bot lef
  #padding: 25px 0px 5px 0px;
  padding: 7px 0px 7px 0px;
}

.h2_pad {
  padding-left: 10px;
}






.ribbon{
    position:relative;
#    width:340px; /*40px larger than container*/
    width:105%;
#    height:30px;
    height:40px;
    text-align:left;
    left:-40px; /*move leftwards 20px so that it extends 20px in each side of container*/
    top:3px;
    bottom:15px;
#    background-color:#999;
    background-color:#5555ff;
    font: bold 30px Sans-Serif;
    color: #fff;
}

.ribbon:before{ /*handle left corner*/
    content:'';
    width:0;
    height:0;
    
#    border-color: transparent #666 #666 transparent;
    border-color: transparent #bbe #bbe transparent;

    border-style:solid;
    border-width:5px 10px;
    
    position:absolute;
    left:0;
    top:-10px;
}

.ribbon:after{ /*handle right corner*/
    content:'';
    width:0;
    height:0;
    
#    border-color: transparent transparent #666 #666;
    border-color: transparent transparent #bbe #bbe;
    border-style:solid;
    border-width:5px 10px;
    
    position:absolute;
    right:0;
    top:-10px;
}




.header-blueprint {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
#  width: 320px;
  width: 100%;
#  height: 320px;
  height:40px;
  border: none;
#  font: normal 100%/normal Arial, Helvetica, sans-serif;
#  color: rgba(255,255,255,1);
  font: bold 30px Sans-Serif;
  color: #fff;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #00f;
  -moz-border-radius: 35px;
  border-radius: 35px;
}

.header-blueprint-double {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
#  width: 320px;
  width: 100%;
#  height: 320px;
  height:120px;
  border: none;
#  font: normal 100%/normal Arial, Helvetica, sans-serif;
#  color: rgba(255,255,255,1);
  font: bold 30px Sans-Serif;
  color: #fff;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #00f;
  -moz-border-radius: 35px;
  border-radius: 35px;
}




section.gradient button {
  color: #fff;
#  text-shadow: -2px 2px #346392;
# I like the orange here  background-color: #ff9664;
  background-color: #00D0FF;
  background-image: linear-gradient(top, #6496c8, #346392);
  padding:6px 12px 8px 12px;
  border: none;

  box-shadow: inset 0 0 0 1px #27496d;
  border-radius: 15px;

  -moz-border-radius:10px;
  -moz-box-shadow: -2px -2px 10px rgba(0,0,0,.25) inset, 2px 2px 10px white inset;

  -ms-border-radius:10px;
  -ms-box-shadow: -2px -2px 10px rgba(0,0,0,.25) inset, 2px 2px 10px white inset;

  -o-border-radius:10px;
  -o-box-shadow: -2px -2px 10px rgba(0,0,0,.25) inset, 2px 2px 10px white inset;

  -webkit-border-radius:10px;
  -webkit-box-shadow: -2px -2px 10px rgba(0,0,0,.25) inset, 2px 2px 10px white inset;
}

section.gradient button:hover,
section.gradient button.hover {
# border line black  box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047;

  box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  -moz-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  -ms-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  -o-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;

  padding:6px 12px 8px 12px;
}

section.gradient button:active,
section.gradient button.active {
#  box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047;
  box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  -moz-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  -ms-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  -o-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;
  padding:7px 11px 7px 13px;
}

section.gradient A:link {
  color:#000000;
  text-decoration: none;
}



.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}




.sidebar {
    font: 12px sans-serif;
    float: right;
    width: 50%;
    background: #b4bec5;
    marting-top: 10px;
    margin-left: 10px;
    marting-bottom: 10px;
    padding: 10px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}