/*

   BLACKBOARD
   ~~~~~~~~~~
  This is the stylesheet required to create the blackboard effect.
  
  -------------------------------------------
  HTML
  -------------------------------------------
  The calling HTML will look something like:
        <div class="bb">
          <div class="bbText">
            <!---- text to display goes from here ... ---->
            <span class="Hed Yel">Brilliant Jazz</span><br>
            <span class="Grn">Kid Tideman's allstars</span><br>
            <a href="dummy.htm" title="Clacton BF">Link &gt;</a> 
            at Clacton beer festival<br>
            <span class="Blu">Sat 29th Aug</span><br>
            <span class="Red">Well worth a trip</span>
            <hr>
            <a href="dummy.htm" title="No 10 petition">Link &gt;</a> 
            <span class=el>Have you signed the keep<br> music live petition yet?</span>
            <!---- ... to here ------------------------>
          </div>
          <div class="blackboardMask> </div>
        </div>
  • Text to display goes in the bbText div.
  • No additional markup gives a plain white script. 
  • <span>s are used for heading (Hed) and colours (Red,Yel,Blu,Grn)
  • As shown in the example Head can be combined with colours.
  
  -------------------------------------------
  Resizing
  -------------------------------------------
  The height and width values for ALL THREE divs
  AND a.bb need to be adjusted together.
 
  
  -------------------------------------------
  Images and layers (z-index)
  -------------------------------------------
  The back layer frame is wood.jpg.
  The middle layer is the text with the background blackboard2.gif
  The top layer - blackOverlay3.gif - is used as a mask to give the
  chalk effect.  (If you prefer the unmasked effect then simply
  remove or comment out the bbMask div.)

  -------------------------------------------
  Font resources
  -------------------------------------------
  Two Truetype fonts are used to give a handwritey effect.
  It is easy enough to change these for your favourite
  
  
  -------------------------------------------
  Links
  -------------------------------------------
  To make links work there is a hack going on!  The top layer
  would normally cover up the <a> tags thus making them inoperative.
  However by reducing the width of the top layer so it doesn't quite reach
  the RH edge of the black surface, and by sticking the links on the
  extreme right they poke out from under the covering layer and thus become
  clickable.
  
  
  
  
  
*/   


@font-face{
  font-family:Chalky;
  src:url(KingSan.ttf);
}
@font-face{
  font-family:CapOutline;
  src:url(Scrawllege.ttf);
}
  
div.bb{
  height:204px;     /* Call this value H */
  width:304px;      /* Call this value W */
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  -webkit-border-radius: 8px;
   border-radius: 8px;
  position:relative;
  background-image:url(wood.jpg);
  border:0px;
  margin:0px;
  z-index:0;
}
div.bbText{
  height:170px;  /* H-34 */
  width:270px;   /* W-34 */
  position:absolute;
  left:10px;
  top:10px;

  color:white;
  font-family: Chalky, Sans-serif !important;
  font-weight:bolder;
  font-size:120%;
  line-height:100%;

  display:block;
  background-image:url(blackboard2.jpg);
  border:2px solid grey;
  padding:5px;
  z-index:10;
}
div.bbMask{
  height:170px;  /* H-34 */
  width:270px;   /* W-34 */
  position:absolute;
  left:12px;
  top:12px;
  background-image:url(blackoverlay3.gif);
  filter:alpha(opacity=30);opacity: 0.3;
  display:block;
  z-index:20;
}  
.bb a{
  left:270px;   /* W-34 */
  display:block;
  height:17px;  
  width:42px;   
  position:absolute;
  padding-left:3px;
  float:right;
  background-color:yellow;
  border:1px outset black;
  color:black;
  font-family:sans-serif;
  font-weight:bold;
  font-size:60%;
  text-decoration:none;

}
.bb a:hover{
  color:red;
  border:1px dotted red;
  text-decoration:underline;
}
.bb span.Hed{font-family: CapOutline, Sans-serif;}
.bb span.Yel{color:yellow;}
.bb span.Red{color:#DE6A9B;}
.bb span.Grn{color:#61e182;}
.bb span.Blu{color:#24c6ee;}
.bb span.Whi{color:white;}