.vl-style1 {
    border-left: 4px solid green;
    height: 100px;
}


hr.style1 {
    border-top: 1px solid #8c8b8b;
}


hr.style2 {
    border-top: 3px double #8c8b8b;
}

hr.style3 {
    border-top: 1px dashed #8c8b8b;
}

hr.style4 {
    border-top: 1px dotted #8c8b8b;
}

hr.style5 {
    background-color: #fff;
    border-top: 2px dashed #8c8b8b;
}


hr.style6 {
    background-color: #fff;
    border-top: 2px dotted #8c8b8b;
}

hr.style7 {
    border-top: 1px solid #8c8b8b;
    border-bottom: 1px solid #fff;
}


hr.style8 {
    border-top: 1px solid #8c8b8b;
    border-bottom: 1px solid #fff;
}

    hr.style8:after {
        content: '';
        display: block;
        margin-top: 2px;
        border-top: 1px solid #8c8b8b;
        border-bottom: 1px solid #fff;
    }

hr.style9 {
    border-top: 1px dashed #8c8b8b;
    border-bottom: 1px dashed #fff;
}

hr.style10 {
    border-top: 1px dotted #8c8b8b;
    border-bottom: 1px dotted #fff;
}


hr.style11 {
    height: 6px;
    background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}


hr.style12 {
    height: 6px;
    background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.style14 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}


hr.style15 {
    border-top: 4px double #8c8b8b;
    text-align: center;
}

    hr.style15:after {
        content: '\002665';
        display: inline-block;
        position: relative;
        top: -15px;
        padding: 0 10px;
        background: #f0f0f0;
        color: #8c8b8b;
        font-size: 18px;
    }

hr.style16 {
    border-top: 1px dashed #8c8b8b;
}

    hr.style16:after {
        content: '\002702';
        display: inline-block;
        position: relative;
        top: -12px;
        left: 40px;
        padding: 0 3px;
        background: #f0f0f0;
        color: #8c8b8b;
        font-size: 18px;
    }


hr.style17 {
    border-top: 1px solid #8c8b8b;
    text-align: center;
}

    hr.style17:after {
        content: '§';
        display: inline-block;
        position: relative;
        top: -14px;
        padding: 0 10px;
        background: #f0f0f0;
        color: #8c8b8b;
        font-size: 18px;
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        transform: rotate(60deg);
    }


hr.style18 {
    height: 30px;
    border-style: solid;
    border-color: #8c8b8b;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

    hr.style18:before {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: #8c8b8b;
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }

hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.style-five {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}

    hr.style-five:after { /* Not really supposed to work, but does */
        content: "\00a0"; /* Prevent margin collapse */
    }

hr.style-seven {
    overflow: visible; /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

    hr.style-seven:before { /* Not really supposed to work, but does */
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: black;
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }