@import url(http://fonts.lug.ustc.edu.cn/css?family=Mountains+of+Christmas:700);

*{margin:0px;
  padding:0px;
}

html{min-height:100%;}

body{
  min-height:100%;
  
  background: rgb(169,3,41);
background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );

}

.ribbon {
    display:block;
    width:200px;
    margin:30px auto 0 auto;
    padding:15px 20px;
    position: relative;
    font-family: 'Mountains of Christmas', cursive;
    font-size:32px;
    text-align:center;
  
    -moz-box-shadow:    6px 6px 25px 0px #000;
	  -webkit-box-shadow: 6px 6px 25px 0px #000;
  	box-shadow:         6px 6px 25px 0px #000;
  
    background: rgb(246,230,180);
  background: -moz-linear-gradient(top,  rgba(246,230,180,1) 0%, rgba(234,183,121,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(234,183,121,1)));
  background: -webkit-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(234,183,121,1) 100%);
  background: -o-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(234,183,121,1) 100%);
  background: -ms-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(234,183,121,1) 100%);
  background: linear-gradient(to bottom,  rgba(246,230,180,1) 0%,rgba(234,183,121,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#eab779',GradientType=0 );
}

.ribbon:after {
    content: " ";
    display:block;
    position: absolute;
    width: 240px;
    bottom:-20px;
    left:0px;
    height:30px;
    
    background: linear-gradient(-45deg, transparent 75%, #EAB779 75%) 0 50%,
                linear-gradient( 45deg, transparent 75%, #EAB779 75%) 0 50%;
  
  
    background: -moz-linear-gradient(135deg, transparent 75%, #EAB779 75%) 0 50%,
                -moz-linear-gradient( 45deg, transparent 75%, #EAB779 75%) 0 50%;
  
  
    background: -webkit-linear-gradient(135deg, transparent 75%, #EAB779 75%) 0 50%,
                -webkit-linear-gradient( 45deg, transparent 75%, #EAB779 75%) 0 50%
    
    ;
  
  
    background-repeat: repeat-x;
    background-size:10px 12px, 10px 12px;
}

.ribbon:before{
    content: " ";
    display:block;
    position: absolute;
    width: 240px;
    top:-20px;
    left:0px;
    height:30px;
    
  
  
    background: linear-gradient(135deg, transparent 75%, #f6e6b4 75%) 0 50%,
                linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%;
  
  
    background: -moz-linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%,
                -moz-linear-gradient( -45deg, transparent 75%, #f6e6b4 75%) 0 50%;
  
  
    background: -webkit-linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%,
                -webkit-linear-gradient( -45deg, transparent 75%, #f6e6b4 75%) 0 50%;
  
  
    background-repeat: repeat-x;
    background-size:10px 12px, 10px 12px;
}