/*
  ==============
  General styles
  ==============
  */
  #container {
    font-family:Arial, Verdana, sans-serif;
    margin:1em 20%;
  }
  /*a { outline:none; }
  a:link,
  a:visited {
    color:#336;
  }*/
  a:hover code {
    color:#222;
  }
  code {
    font-size:1.25em;
    color:#664;
  }
  h2 {
    font-size:1.25em;
    margin-top:2em;
  }
  .fault {
    color:red;
  }
  .author {
    font-size:75%;
    text-align:right;
    border-top:3px solid #664;
    padding-top:2px;
  }
  .mainimg {
	  float:left;
	  padding: 10px;
	  background-color: #eee;
	  margin: 0 20px 2em 0;
	  border: 1px solid #aaa;
  }
  
  /*
  ================
  1. Plain Tooltip
  ================
  */
  
  a:link.tooltipbasic {
    position:relative;
	text-decoration:none;
  }
  a:hover.tooltipbasic {
    text-decoration:none; /* remove underline on tooltip */
  }
  a:hover.tooltipbasic:before {
		display: block;
		background: #eef;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#ccf), to(#eef));
		background: -moz-linear-gradient(#ccf, #eef);
		background: -o-linear-gradient(#ccf, #eef);
		background: linear-gradient(#ccf, #eef);
		content: attr(data-tooltip);
		position: absolute;
		color: #333;
		bottom: 2.8em;
		right: -35px;
		width: 8em;
		text-align: center;
		padding: 4px;
		border: 2px solid #999;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		border-radius: 6px;
		-webkit-box-shadow: -2px 2px 2px rgba(20, 20, 20, 0.4);
		-moz-box-shadow: -2px 2px 2px rgba(20, 20, 20, 0.4);
		-ms-box-shadow: -2px 2px 2px rgba(20, 20, 20, 0.4);
		-o-box-shadow: -2px 2px 2px rgba(20, 20, 20, 0.4);
		box-shadow: -2px 2px 2px rgba(20, 20, 20, 0.4);
		font-family: verdana;
		font-weight: bold;
		font-size: 13px;
	}
  
  /*
  ============================
  2. Arrow tooltip (first try)
  ============================
  */

  /* tooltip basic link styles */
  .tooltipAlpha a:link,
  .tooltipAlpha a:visited {
    position:relative;
    text-decoration:underline;
  }
  .tooltipAlpha a:hover {
    text-decoration:none; /* remove underline on tooltip text */
  }
  .tooltipAlpha a:hover:before {
    display:block;
    background:#efe;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#cfc), to(#efe));
    background:-moz-linear-gradient(#cfc, #efe);
    background:-o-linear-gradient(#cfc, #efe);
    background:linear-gradient(#cfc, #efe);
    content:attr(data-tooltip);
    position:absolute;
    color:#333;
    bottom:20px;/* ensure link is still visible under tooltip */
    right:0px;
    width:8em; /* a reasonable width to wrap the tooltip text */
    text-align:center;
    padding:4px;
    border:2px solid #9c9;
    -webkit-border-radius:6px;
       -moz-border-radius:6px;
        -ms-border-radius:6px;
         -o-border-radius:6px;
    border-radius:6px;
  }
  .tooltipAlpha {
    position:relative;
    visibility:hidden;
  }
  .tooltipAlpha a:link,
  .tooltipAlpha a:visited {
    position:relative;
    visibility:visible;
  }
  /* styles shared by both triangles */
  .tooltipAlpha:hover:before,
  .tooltipAlpha a:hover:after {
    content:"";
    position:absolute;
    border-style:solid;
    z-index:900; /* makes arrows appear above link text */
  }

  /* outer triangle: for border */
  .tooltipAlpha:hover:before {
    visibility:visible;
    bottom:6px; /* value = border-width*3 */
    right:40px; /* horizontal position of arrow */
    border-width:16px 16px 0;
    border-color:#9c9 transparent;
  }
  /* inner triangle: for fill */
  .tooltipAlpha a:hover:after {
    bottom:9px; /* value = 3 more than border-width*3 */
    right:42px; /* 2 more than above */
    border-width:14px 14px 0;
    border-color:#efe transparent;
  }

  /*
  ========================
  3. Arrow tooltip (final)
  ========================
  colours:
  #fcc | rgba(255,205,205,0.7)
  #fee | rgba(225,238,238,0.7)
  #333 | rgba(51,51,51,0.7)
  #c99 | rgba(204,153,153,0.7)
  */

  /* tooltip basic link styles */
  .tooltip:link,
  .tooltip:visited {
    position:relative;
    text-decoration:underline;
  }
  .tooltip:hover {
    text-decoration:none; /* remove underline on tooltip text */
  }

  /* tooltip body text */
  .tooltip:hover:before {
    display:block;
    background:#eee;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,205,205,0.9)), to(rgba(228,230,230,0.9)));
    background:-moz-linear-gradient(rgba(255,205,205,0.9), rgba(228,230,230,0.9));
    background:-o-linear-gradient(rgba(255,205,205,0.9), rgba(228,230,230,0.9));
    background:linear-gradient(rgba(255,205,205,0.9), rgba(228,230,230,0.9));
    content:attr(data-tooltip); /* this link attribute contains tooltip text */
    position:absolute;
    font-size:0.9em;
    color:rgba(51,51,51,0.9);
    bottom:20px;/* ensure link text is visible under tooltip */
    right:0px;  /* align both tooltip and link right edges */
    width:11em;  /* a reasonable width to wrap tooltip text */
    text-align:center;
    padding:4px;
    border:2px solid rgba(204,153,153,0.9);
    -webkit-border-radius:6px;
       -moz-border-radius:6px;
        -ms-border-radius:6px;
         -o-border-radius:6px;
            border-radius:6px;
    -webkit-box-shadow:-2px -2px 2px rgba(20,20,20,0.4);
       -moz-box-shadow:-2px -2px 2px rgba(20,20,20,0.4);
        -ms-box-shadow:-2px -2px 2px rgba(20,20,20,0.4);
         -o-box-shadow:-2px -2px 2px rgba(20,20,20,0.4);
            box-shadow:-2px -2px 2px rgba(20,20,20,0.4);
  }

  /* styles shared by both triangles */
  .tooltip:hover span:before,
  .tooltip:hover span:after {
    content:"";
    position:absolute;
    border-style:solid;
  }
  /* outer triangle: for border */
  .tooltip:hover span:before {
    bottom:5px; /* value = tooltip:hover:before (border-width*2)+1 */
    right:40px; /* controls horizontal position */
    border-width:16px 16px 0; /* top, right-left, bottom */
    border-color:rgba(204,153,153,0.9) transparent; /* top/bottom, right-left (lazy becasue bottom is 0) */
  }

  /* inner triangle: for fill */
  .tooltip:hover span:after {
    bottom:8px; /* value = tooltip:before (border-width*2) */
    right:42px; /* above 'right' value + 2 */
    border-width:14px 14px 0; /* 2 less than above */
    border-color:rgba(225,238,238,0.95) transparent; /* tweak opacity by eye/eyedropper to obscure outer triangle colour */
  }