/*  Copyright 2006-2007 Patrick R. Michaud (pmichaud@pobox.com)
    This file is wsextra.css; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published
    by the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.  */


/*  The "rollover" style handles rollover images and text.  It works
    by using absolute positioning to cause the "rollover" component
    to display on top of the "non-rollover" component, and sets the
    rollover as invisible (via opacity) until the mouse hovers over the
    component. 
*/
.rollover { 
  position:absolute; 
  opacity:0; -moz-opacity:0; filter:alpha(opacity=0); 
}
.rollover:hover 
  { opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }

/*  These are here for browsers that don't understand "opacity". */
.rollover * { visibility:hidden; }
.rollover:hover * { visibility:visible; }


/*  A sidenote is a fixed-width frame with smaller text. */
.sidenote { width:200px; font-size: smaller; }
/*  A postit is a sidenote with a yellow background. */
.postit { background-color: #ffffa1; }
/*  These are bold title styles for sidenotes and postits. */
.notetitle { font-weight:bold; }
.postit .notetitle { padding: 0px 4px; background-color: #ffe53e; }


/*  A "left-right indent", indenting both sides. */
.lrindent { margin-left:40px; margin-right:40px; }

/*  A "left indent" */
.lindent { margin-left:40px;  }
/*  A "right indent" */
.rindent { margin-right:40px;  }


/*  This provides a rounded background for a component. */
.round {
  min-height:40px;
  padding: 15px 20px 15px 20px;
  background-color: #f7f7f7;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
}

.nine {font-size:.9em;}

.nobold{font-weight:normal;}

/* Colors are in wsplus.php!! since then they work*/

/* Example Styles ********************************************** */

/*  These are my example bars - Linda. */
.exa_bar {

  margin: 6px 0px 0px 10px;
  padding:5px;  
  color:#000066;
  background-color:#eeeeee;
  }
.exa_bar1 {
  font-size:.9em;
  margin: 3px 0px 0px 25px;
   }
.exa_2 {
  margin: 3px 0px 6px 10px;
  }
.exa_ans {
  margin: 3px 0px 0px 25px;
  padding-left:5px;
  width:95%;
  color:#000066;
  background-color:#eeeeff;
  }
 /*=========================================================== */
/*  These are my practice bars - Linda. Currently only pra_ans is different from example bars. */ 

.pra_bar {

  margin: 6px 0px 0px 10px;
  padding:5px;  
  color:#000066;
  background-color:#eeeeee;
  }
.pra_bar1 {
  font-size:.9em;
  margin: 3px 0px 0px 25px;
  }
.pra_bar2 {
  margin: 3px 0px 6px 10px;
  }
.pra_ans {
  margin: 3px 0px 0px 20px;
  padding-left:10px;
  width:95%;
  color:#000066;
  background-color:#eeeeff;
  }
  
  
.ex_bar {
margin-top:3px; margin-bottom:3px;
  min-height:20px;
  padding: 5px 10px 5px 10px;
  color:#000066;
  background-color:#ddddee;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }
.ex_bar1 {
margin-top:3px; margin-bottom:0px;
  min-height:20px;
  padding: 5px 5px 5px 5px;
  width:97%; 
  margin-left:25px;
  color:#000066;
  background-color:#eeeeff;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }
.ex_bar2 {
margin-top:3px; margin-bottom:0px;
 min-height:20px;
  padding: 5px 5px 5px 5px;
  width:94%;
  margin-left:45px;
  color:#000066;
  background-color:#ddddee;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }
.ex_ans {
margin-top:3px; margin-bottom:0px;
 min-height:20px;
  padding: 5px 5px 5px 5px;
  width:94%;
  margin-left:45px;
  color:#000066;
  background-color:#eecccc;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }

  
 /*  This is my glossary entry - Linda. */
.glo {
 min-height:18px;
  padding: 5px 20px 5px 20px;
  color:#000066; 
  font-family:Tahoma, Arial;
  background-color:#ffeeee;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }

 
/*  These are my navigator bars - Linda. */
.nav_bar {
 min-height:18px;
  padding: 5px 20px 5px 20px;
  float:right;
  width:500px;
  font-weight:600;
  text-align: right;
  background-color:#eeeeff;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }
  /*  This is my navigator bar - Linda. */
.nav_bar4 {
 min-height:18px;
  padding: 5px 20px 5px 20px;
  float:right;
  width:400px;
  font-weight:600;
  text-align: right;
  background-color:#eeeeff;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }
  /*  This is my navigator bar - Linda. */
.nav_bar3 {
 min-height:18px;
  padding: 5px 20px 5px 20px;
  float:right;
  width:300px;
  font-weight:600;
  text-align: right;
  background-color:#eeeeff;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }
  /*  This is my navigator bar - Linda. */
.nav_bar2 {
 min-height:18px;
  padding: 5px 20px 5px 20px;
  float:right;
  width:200px;
  font-weight:600;
  text-align: right;
  background-color:#eeeeff;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }
  /*  This is my navigator bar - Linda. */
.nav_bar1 {
 min-height:18px;
  padding: 5px 20px 5px 20px;
  float:right;
  width:80px;
  font-weight:600;
  text-align: right;
  background-color:#eeeeff;
  border:1px solid  #9999cc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  }




/*  The "tip", "important", and "warning" styles provide colored
    backgrounds and associated icons. */
.tip {
  padding-left: 80px;
  background: #ddffdd url(file:///C|/Documents%20and%20Settings/Robertf/Local%20Settings/Temporary%20Internet%20Files/Content.IE5/KT1CSZIK/tip.gif) no-repeat 20px;
}

.important {
  padding-left: 80px;
  background: #ffffcc url(file:///C|/Documents%20and%20Settings/Robertf/Local%20Settings/Temporary%20Internet%20Files/Content.IE5/KT1CSZIK/important.gif) no-repeat 20px;
}

.warning {
  padding-left: 80px;
  background: #ffdddd url(file:///C|/Documents%20and%20Settings/Robertf/Local%20Settings/Temporary%20Internet%20Files/Content.IE5/KT1CSZIK/warning.gif) no-repeat 20px;
}

.up {
  padding-right: 40px;
  background: #ffdddd url(file:///C|/Documents%20and%20Settings/Robertf/Local%20Settings/Temporary%20Internet%20Files/Content.IE5/KT1CSZIK/up.gif) no-repeat 20px;
}


/* many other useful styles */

.uppercase { text-transform: uppercase; }        /* all uppercase */
.lowercase { text-transform: lowercase; }        /* all lowercase */
.capitalize { text-transform: capitalize; }      /* ucfirst */
.small-caps { font-variant: small-caps; }        /* small-caps */
.smaller { font-size: smaller; }                 /* smaller text */
.larger { font-size: larger; }                   /* larger text */
.b, .bold { font-weight: 600; }                 /* bold text */
.i, .italic { font-style: italic; }              /* italic text */
.u, .underline { text-decoration: underline; }   /* underline */
.absolute { position: absolute; }                /* absolute positioning */
.relative { position: relative; }                /* relative positioning */

.above3 {margin-top:3px; margin-bottom:0px}
.sm8 {font-size:.8em};
.sm9 {font-size:.9em};

/* a style for code blocks */
.code { 
  font-family:'Lucida Console','Andale Mono','Courier New',Courier, monospace;
  font-size: 0.9em;
  line-height:1.2em;
  white-space: pre; 
}
.code .vspace { margin-top:0px; }
.code pre { font-size:100%; }


/* outline numbering for ordered lists -- use %outline% on the
   first list item to enable it. */
ol.outline { list-style-type:upper-roman; }
ol.outline ol { list-style-type:upper-alpha; }
ol.outline ol ol { list-style-type:decimal; }
ol.outline ol ol ol { list-style-type:lower-roman; }
ol.outline ol ol ol ol { list-style-type:lower-alpha; }