/* EXEMPLO
<hr class="style-three">
    div class="code">
		<h2>Code</h2>
</style>
		</div>

		<hr class="style-two">
		<div class="code">
		<h2>Code</h2>
		<style>
*/

/* INICIO: Gradient color1 - color2 - color1 */
hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

/* INICIO: Gradient transparent - color - transparent */
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));
}
/* FIM: Gradient color1 - color2 - color1 */



/* INICIO: Double-color dashed line */
hr.style-three {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}
/* FIM: Double-color dashed line */

/* INICIO: Single-direction drop shadow */
hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
/* FIM: Single-direction drop shadow */


/* INICIO: Cloud */
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 */
}
/* FIM: Cloud */

/* INICIO: Inset, by Dan Eden */
hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* FIM: Inset, by Dan Eden */

/* INICIO: Flaired edges, by Tomas Theunissen */
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;
}
/* FIM: Flaired edges, by Tomas Theunissen */

/* INICIO: Glyph, by Harry Roberts */
hr.style-eight {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}
/* FIM: Glyph, by Harry Roberts */