/* gradient 1 */
.tsc_gradient1 h1 { font: bold 330%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 30px 0 20px; color: #464646; }
.tsc_gradient1 h1 span { background: url(images/gradient-white.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; }
/* gradient 2 */
.tsc_gradient2 h1 {
	font-family: 'Roboto Condensed', sans-serif;
	position: relative;
	color: #000;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 15px;
	margin-left: 0;
	line-height: normal;
	text-decoration: none;	
}
.tsc_gradient2 h1 span {
	position: absolute;
	display: block;
	width: 100%;
	height: 18px;
	color: #000;
	text-decoration: none;
	
}

.tsc_gradient2 h100 {
	font-family: 'Roboto Condensed', sans-serif;
	position: relative;
	color: #666;
	text-transform: uppercase;
	margin-right: 5px;
	margin-bottom: 10px;
	line-height: 30px;
	text-decoration: none;
	font-size: 14px;
}

.tsc_gradient2 a { color: #000; text-decoration: none; }
.tsc_gradient2 a:visited { color: #000; }
.tsc_gradient2 a:hover { color: #555; }
/* gradient 3 */
.tsc_gradient3 { background: #d7e1e3; padding: 30px 10px; padding: 30px 0 30px 30px; }
.tsc_gradient3 h1 { font: bold 280%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #000; letter-spacing: -2px }
.tsc_gradient3 span { background: url(images/gradient-grey.png) repeat-x; position: absolute; display: block; width: 100%; height: 29px; }
/* gradient 4 */
.tsc_gradient4 { background: #000 url(images/gradient4-bg.png) repeat-x left bottom; padding: 30px 0 30px 30px; margin: 30px 0 20px; }
.tsc_gradient4 h1 { font: normal 340%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; }
.tsc_gradient4 h2 { font: normal 150%/100% "Lucida Grande", Arial, sans-serif; margin: 10px 0 0; color: #b7b7b7; }
.tsc_gradient4 span { background: url(images/gradient-dark.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px; }
/* gradient 5 */
.tsc_gradient5 { background: #000; padding: 30px 0 30px 30px; margin: 30px 0 20px; }
.tsc_gradient5 h1 { font: normal 330%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; letter-spacing: -1px; }
.tsc_gradient5 h1 span { background: url(images/gradient-shine.png) repeat-x; position: absolute; display: block; width: 100%; height: 64px; }
/* gradient 6 */
.tsc_gradient6 { background: #000; padding: 30px 0 30px 30px; margin: 30px 0 20px; }
.tsc_gradient6 h1 { font: bold 310%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; text-transform: uppercase; letter-spacing: -2px; }
.tsc_gradient6 h1 span { background: url(images/gradient-dark-stripe.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px; }
/* gradient 7 */
.tsc_gradient7 { background: #000; padding: 30px 0 30px 30px; margin: 30px 0 20px; }
.tsc_gradient7 h1 { font: bold 310%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; text-transform: uppercase; letter-spacing: -2px; }
.tsc_gradient7 h1 span { background: url(images/gradient-dark-stripe-hz.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px; }
/* pattern */
.pattern { background: #000; padding: 30px 0 30px 30px; margin: 30px 0 20px; }
.pattern h1 { font: bold 600%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; text-transform: uppercase; letter-spacing: -6px; }
.pattern h1 span { background: url(images/pattern-zebra.png); position: absolute; display: block; width: 100%; height: 100px; }
/* jquery */
.jquery h1 { font: bold 280%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 30px 0 0; color: #464646; }
.jquery h1 span { background: url(images/gradient-white.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; }
.jquery p { margin: 10px 0 50px; }
/* full example */
.tsc_full .leadin { background: url(images/leadin.jpg) no-repeat; padding: 140px 0 0 50px; height: 140px; overflow: hidden; }
.tsc_full h1 { font: normal 340%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; width: 390px; }
.tsc_full h1 span { background: url(images/gradient-dark.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px; }
.tsc_full h2 { font: normal 150%/100% "Lucida Grande", Arial, sans-serif; margin: 10px 0 0; color: #b7b7b7; }
.tsc_full .content { background: #e8e8e8 url(images/content.gif) repeat-x; padding: 30px 30px 10px; border: solid 1px #ccc; border-top: none; }
.tsc_full h3 { font: normal 210%/100% Arial, sans-serif; position: relative; margin: 0; color: #464646; }
.tsc_full h3 span { background: url(images/gradient-full.png) repeat-x; position: absolute; display: block; width: 100%; height: 21px; }
.tsc_full p { margin: 10px 0 25px; }
