body 
{ 
  color: #000000; 
  background-color: #FFFFFF; 
}

.ToolTip 
{ 
  color: red;   
  border-bottom: 1px dotted #000;
  cursor: help; 
}


/* example   <abbr title="Three Letter Abbreviaztion">TLA</abbr>  */

acronym             {  /* default style for acronym */
                      border-bottom: 1px dashed black;
                      cursor: help;
                    }

                      /* default mouseover style for acronym */
acronym:hover:after { content: " (" attr(title) ") "; }

abbr                { /* default style for abbr */
                      border-bottom: 1px dashed black;
                      cursor: help;
                    }



/* use this class, like this
   <div class="noprint">Navigation Box</div>
   and it will display on mon itor, but not
   on print preview or printout.
*/
.noprint     {}

@media print {
                .noprint {display: none}
             }



.lyrics{
      width: 80%;

      font-style: italic; 
      margin: 0px 10px 0px 10px; 
      padding: 5px 100px 5px 10px; 
      background-color: #f7fcdc; 
      background-image: url('http://keellings.com/layout/clef.png'); 
      background-position: top right; 
      background-repeat: no-repeat; 
      border-left: 10px solid #b7d83b; 
      border-top: 1px solid #b7d83b; 
      border-right: 1px solid #b7d83b; 
      border-bottom: 1px solid #b7d83b; 

}

# for use with ,q> and </q>
# q:before { content: open-quote; }
# q:after { content: close-quote; }


.quote{
      width: 80%;

      font-style: italic; 
      margin: 0px 10px 0px 10px; 
      padding: 5px 100px 5px 10px; 
      background-color: #f7fcdc; 
      background-position: top right; 
      background-repeat: no-repeat; 
      border-left: 10px solid #b7d83b; 
      border-top: 1px solid #b7d83b; 
      border-right: 1px solid #b7d83b; 
      border-bottom: 1px solid #b7d83b; 

}



.boxed {
margin:6px 6px 6px 6px;
padding: 4px;
border: 1px solid #999;
} 


/* Blockquote style. 

blockquote {padding: 5px;
	font-size: 12px; text-align: left; line-height: 15pt; }
*/

blockquote { 
  color: gray; 
  margin: 15px 30px 0 10px; 
  padding-left:  20px; 
  border-left:   15px solid #eeff00; 
  background: #ffffcc;
} 

blockquote { 
      font-style: italic; 
      margin: 0px 10px 0px 10px; 
      padding: 5px 100px 5px 10px; 
      background-color: #f7fcdc; 
      background-image: url('http://keellings.com/graham/blog/images/quote.jpg'); 
      background-position: top right; 
      background-repeat: no-repeat; 
      border-left: 10px solid #b7d83b; 
      border-top: 1px solid #b7d83b; 
      border-right: 1px solid #b7d83b; 
      border-bottom: 1px solid #b7d83b; 
      } 

blockquote:first-letter  { 
color: red; font-size: 300%; float: left ; 
} 


/* from http://www.sitepoint.com/examples/pullquotes/ */
.pullquote {
	width: 20%;
	float:right;
	font-size:125%;
	line-height:140%;
	margin:10px;
	background: url(pq_closequote.gif) no-repeat bottom right !important;
	background /**/:url(); /* removing quote graphic in IE5+ */
	padding:0px 25px 5px 0px;
}
.pullquote:first-letter {
	background: url(pq_openquote.gif) no-repeat left top !important;
	padding:5px 2px 10px 35px!important;
	padding /**/:0px; 	/* resetting padding in IE5+ */
	background /**/: url(); /* removing quote graphic in IE5+ */
}