.additional-info {
    font-size:smaller;
    font-style:italic;
    }

.attn {
    text-decoration:underline;
    color:orange;
    }

p.subtitle {
    font-size:smaller;
    text-align:center;
    }

.title {
    text-align:center;
    }

#navBar p {
    font-size:14px;
    margin-left:0px;
    }

.solution {
    color: DarkGreen;
    }

.code-inline {
    background-color: #EAEACA;
    }
.code-block {
    background-color: #E0E0A0;
    }

     /* css tooltip sample is from:  http://www.menucool.com/    */
     /** TODO: don't have tooltip restrict to a span;
               fix the syntax: <a href="#" class="tooltip">  <div class="tooltip"> </div></a>
               or better, pre-process ixml:  <tooltip>blah blah<tip>popup extra info here</tip></tooltip>
      */

    .tooltip {outline:none;text-decoration:none;border-bottom:dotted 1px blue;}
    .tooltip strong {line-height:30px;}
    .tooltip > span 
    {
	    width:200px;
	    padding: 10px 20px;
	    margin-top: 20px;
	    margin-left: -85px;
	    opacity: 0;
	    visibility: hidden;
	    z-index: 10;	   
	    position: absolute;

	    font-family: Arial;
	    font-size: 12px;
	    font-style: normal;  
        	    
	    -webkit-border-radius: 3px;
	    -moz-border-radius: 3px;
	    -o-border-radius: 3px;
	    border-radius: 3px;
	    
	    
            -webkit-box-shadow: 2px 2px 2px #999;
	    -moz-box-shadow: 2px 2px 2px #999;		
	    box-shadow: 2px 2px 2px #999;	    
	    
	    -webkit-transition-property:opacity, margin-top, visibility, margin-left;
	    -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    -moz-transition-property:opacity, margin-top, visibility, margin-left;
	    -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    -o-transition-property:opacity, margin-top, visibility, margin-left;
	    -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    transition-property:opacity, margin-top, visibility, margin-left;
	    transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    }
    
    /*a.tooltip > span:hover,*/
	.tooltip:hover > span
	{
		opacity: 1;
		text-decoration:none;
		visibility: visible;
		overflow: visible;
		margin-top:50px;
		display: inline;
		margin-left: -60px;		
	}

	.tooltip span b {
    
		width: 15px;
		height: 15px;
		margin-left: 20px;
		margin-top: -19px;
			
		display: block;
		position: absolute;

		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
			
		-webkit-box-shadow: inset -1px 1px 0 #fff;
		-moz-box-shadow: inset 0 1px 0 #fff;
		-o-box-shadow: inset 0 1px 0 #fff;
		box-shadow: inset 0 1px 0 #fff;
			
		display: none\0/;
		*display: none;
	}
    
.tooltip > span {
	color: #FFFFFF; 

	background: #333333;
	background: -moz-linear-gradient(top, #333333 0%, #999999 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#999999));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );
	    
	border: 1px solid #000000;	     
}    
	  
.tooltip span b {
	background: #333333;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
}