/* headding */

.headding01,
.headding02,
.headding05,
.headding06{
    position:relative;
    padding:5px 10px;
    font-weight: bold;
    line-height: 1.2;
    color:#4477a1;
    background:#fff;
    text-shadow:
        1px 1px 0 #fff,
        2px 2px 0 #999;
    border:#4477a1 solid 3px;
    background-image: -webkit-gradient(linear, left top, right bottom,
            from(            rgba(255, 255, 255, 0.0)),
            color-stop(0.4, rgba(255, 255, 255, 0.0)),
            color-stop(0.4, rgba(0, 0, 0, 0.1)),
            color-stop(0.6, rgba(0, 0, 0, 0.1)),
            color-stop(0.6, rgba(255, 255, 255, 0.0)),
            to(                rgba(255, 255, 255, 0.0))
            );
    background-image: -webkit-linear-gradient(top -45deg,
            transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
            );
    background-image: -moz-linear-gradient(top -45deg,
            transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
            );
    background-image: -o-linear-gradient(top -45deg,
            transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
            );
    background-image: linear-gradient(to bottom -45deg,
            transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
            );
    background-size:4px 4px;
}
.headding01:before,
.headding05:before,
.headding06:before{
    content:" ";
    position:absolute;
    top:100%;
    left:24px;
    width:0;
    height:0;
    border-width:12px;
    border-style:solid;
    border-color:transparent;
    border-top-color:#4477a1;
}
.headding01:after,
.headding05:after,
.headding06:after{
    content:" ";
    position:absolute;
    top:100%;
    left:28px;
    width:0;
    height:0;
    border-width:8px;
    border-style:solid;
    border-color:transparent;
    border-top-color:#f0f0f0;
    z-index:1;
}
.headding02:before{
    content:" ";
    position:absolute;
    bottom:100%;
    left:24px;
    width:0;
    height:0;
    border-width:12px;
    border-style:solid;
    border-color:transparent;
    border-bottom-color:#4477a1;
}
.headding02:after{
    content:" ";
    position:absolute;
    bottom:100%;
    left:28px;
    width:0;
    height:0;
    border-width:8px;
    border-style:solid;
    border-color:transparent;
    border-bottom-color:#f0f0f0;
    z-index:1;
}

.headding03 {
    background: #7db9e8; /* Old browsers */
    background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #207cca 51%, #1e5799 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* W3C */
    padding:12px 10px;
    color:#FFF;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    text-shadow:1px 1px 2px #333;
    -webkit-box-shadow:inset 0 0 50px rgba(0,0,0, 0.1);
    }

.headding04,
.headding07{
    margin:0 0 30px 0;
    padding:12px 10px;
    border-left:5px solid #8fc31f;
    background: #22ac38;
    color:#FFF;
    }
.headding07{
    border-left:5px solid #eaba1b;
    background: #d06503;
    }


.headding05{
    color:#d06503;
    border:#d06503 solid 3px;
}
.headding05:before{
    border-top-color:#d06503;
}
.headding05:after{
    border-top-color:#f0f0f0;
}

.headding06{
    color:#22ac38;
    border:#22ac38 solid 3px;
}
.headding06:before{
    border-top-color:#22ac38;
}
.headding06:after{
    border-top-color:#22ac38;
}