Stitched Header

Just a nice and simple header you can use for you're site to display a Heading and a Sub-Heading, with a nice gradient background and yellow stitching!

It should be pretty easy to understand.

HTML
Place this where you keep your html

<div id="headerBox">
    <div class="stitching" />
    <div id="headerText">
        <h1>Heading Text</h1>
        <h2>Sub Heading</h2>
    </div>
    <div class="stitching" />
</div>

CSS
Place this where you keep your css

#headerBox {
/* Red to Dark Red Gradient */
background-image: linear-gradient(to bottom, #FF0D0D 0%, #9C0000 100%);
background-image: -webkit-linear-gradient(top, #FF0D0D 0%, #9C0000 100%);
/* Slight Drop Shadow */
-webkit-box-shadow: 0px 3px 10px 1px #454545;
box-shadow: 0px 3px 10px 1px #454545;
/* Rounded Corners */
border-radius: 10px;
/* Sizing / Placement */
width: 780;
height: 100px;
margin-left: auto;
margin-right: auto;
padding: 10px;
padding-top: 5px;
padding-bottom:5px;
}

#headerBox .stitching {
/* Sizing / Placement */
width: 780px;
height: 0px;
/* Stitching */
border-top-width: 1px;
border-top-style: dashed;
border-top-color: yellow;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #9e9800;
}

#headerBox #headerText {
/* Sizing / Placement */
width: 780px;
height: 80px;
}

#headerBox #headerText h1 {
/* Placement */
text-align: right;
margin: 10px;
/* Text Style */
font-family: Arial;
color: #ff5c5c;
font-size: 25px;
text-shadow: 0px -1px 1px #8A0000;
}

#headerBox #headerText h2 {
/* Placement */
text-align: left;
/* Text Style */
font-family: Arial;
color: #fff;
font-size: 20px;
text-shadow: 0px -1px 1px #333;
}