body 
{font: 75%/160% Arial, Helvetica, sans-serif; width: 700px; margin: 50px auto;}
a { color: #00F; text-decoration: none; }  a:visited { color: #00F;} a:hover { color: #F00;}
ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }


/* gradient 2 */
.gradient2 h1 {font: bold 310%/100% "Lucida Grande", Arial, sans-serif;position: relative; margin: 30px 0 50px;color: #000000 ;text-transform: uppercase; letter-spacing: -2px;}
.gradient2 h1 span { background: url(images/gradient-glossy.png) repeat-x;position: absolute;display: block;width: 100%;height: 18px;}
.gradient2 a { color: #F00; text-decoration: none; } .gradient2 a:visited { color: #F00;}.gradient2 a:hover { color: #00F;}


/* gradient 2A */
.gradient2A h1 {font: bold 310%/100% "Lucida Grande", Arial, sans-serif;position: relative; margin: 30px 0 50px;color: #FF0000 ;text-transform: uppercase; letter-spacing: -2px;}
.gradient2A h1 span { background: url(images/gradient-glossy.png) repeat-x;position: absolute;display: block;width: 100%;height: 18px;}
.gradient2A a { color: #F00; text-decoration: none; } .gradient2A a:visited { color: #F00;}.gradient2A a:hover { color: #00F;}


/* gradient 4A */
.gradient4A { background: #000 url(images/gradient-shine.png) repeat-x left bottom; padding: 30px 0 40px 30px; margin: 30px 0 50px; }
.gradient4A h1 { font: normal 340%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0;}
.gradient4A h1 span { background: url(images/gradient-dark.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px;}
.gradient4A h2 { font: bold 150%/100% "Lucida Grande", Arial, sans-serif; color: #FFF; margin: 10px 0 0; 10px}
.gradient4A a { color: #FFF; text-decoration: none; } .gradient4A a:visited { color: #FFF;}.gradient4A a:hover { color: #00F;}


/* gradient 4 */
.gradient4 { background: #000 url(images/gradient-shine.png) repeat-x left bottom; padding: 30px 0 40px 30px; margin: 30px 0 50px; }
.gradient4 h1 { font: normal 340%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0;}
.gradient4 h1 span { background: url(images/gradient-dark.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px;}
.gradient4 h2 { font: bold 150%/100% "Lucida Grande", Arial, sans-serif; margin: 10px 0 0; 10px}
.gradient4 a { color: #FFF; text-decoration: none; } .gradient4 a:visited { color: #FFF;}.gradient4 a:hover { color: #F00;}


/* gradient 5 */ 
.gradient5 { background: #000; padding: 30px 0 30px 50px; margin: 30px 0 20px; color: #FFFFFF}
.gradient5 h1 { font: normal 330%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; letter-spacing: -1px;}
.gradient5 h1 span { background: url(images/gradient-shine.png) repeat-x; position: absolute; display: block; width: 100%; height: 34px;}
.gradient5 h2 { font: bold 150%/100% "Lucida Grande", Arial, sans-serif; margin: 10px 0 0; 10px}
.gradient5 a { color: #FFF; text-decoration: none; } .gradient5 a:visited { color: #FFF;}.gradient5 a:hover { color: #F00;}

/* full example */

.full1 .leadin { background: url(images/leadinLF.jpg) no-repeat; padding: 45px 0 0 45px; height: 255px; overflow: hidden;}
.full1 a { color: #FFF; text-decoration: none; } .full1 a:visited { color: #FFF;} .full1 a:hover { color: #00F;}
.full1 h1 { font: bold 340%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; width: 390px;}
.full1 h1 span { background: url(images/gradient-dark.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px;}
.full1 h2 { font: bold 150%/100% "Lucida Grande", Arial, sans-serif; margin: 10px 0 0; color: #F00;}

.content { background: #e8e8e8 url(images/content.gif) repeat-x; padding: 30px 10px 10px; border: solid 1px #ccc; border-top: none;}
.full2 h3 { font: normal 210%/100% Arial, sans-serif; position: relative; margin: 0; color: #000000;}
.full2 h3 span { background: url(images/gradient-full.png) repeat-x; position: absolute; display: block; width: 100%; height: 21px;}
.full2 a { color: #F00; text-decoration: none; } .full2 a:visited { color: #F00;} .full2 a:hover { color: #00F;}
.full p { margin: 10px 0 25px;}








/* ------------------------------
PAGE STRUCTURE
------------------------------ */

div.spacer{clear:both; height:10px; display:block;}
div.spacer1{clear:both; height:150px; display:block;}