/*
  Textbook Style Guide 
*/

/* Required list template */
div.textbook_box {
  display: block;
  margin: 1em 0px 2em 0px;
  padding: .5em;
  -moz-border-radius: 4px 4px 0px 0px;
  -webkit-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px; /* future proofing */
  -khtml-border-radius: 4px 4px 0px 0px; /* for old Konqueror browsers */
}
div.textbook_box h3 {
  font-size: 1.5em;
  font-weight: bold;
  display: block;
  float: left;
  margin-top: -25px !important;
  margin-bottom: 0px;
  margin-left: 5px;
  margin-right:0px;
  background-color:#fafafa;
  border:2px solid;
  padding:4px 6px;
  letter-spacing:.06em;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px; /* future proofing */
  -khtml-border-radius: 4px; /* for old Konqueror browsers */
}
div.textbook_box_required {
  border:#e98 2px solid;
}
div.textbook_box_required h3{
  color:#e98;
}
div.textbook_box_required li:before{
  background: #e98;
}
div.textbook_box_required li:hover:before{
 font-weight:bold;
 border: .3em solid #e98;
 background: #fff;
}
/* Optional list color shift */
div.textbook_box_optional {
  border:#80c0e0 2px solid;
}
div.textbook_box_optional h3{
  color: #80c0e0;
}
div.textbook_box_optional li:before{
  background: #80c0e0;
}
div.textbook_box_optional li:hover:before{
 font-weight:bold;
 border: .3em solid #80c0e0;
 background: #fff;
}

div.textbook_box ol, div.textbook_box ul{
  counter-reset: li; /* Initiate a counter */
  list-style: none; /* Remove default numbering */
  *list-style: decimal; /* Keep using default numbering for IE6/7 */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0px 0px 0px 14px;
  margin: 30px 20px 20px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

div.textbook_box li{
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .7em 0 !important;
  background: #eee;
  color: #444;
  text-decoration: none;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  border-radius: .3em; /* future proofing */
  -khtml-border-radius: .3em; /* for old Konqueror browsers */
  transition: all .3s ease-out;  
}

div.textbook_box li:hover{
  background: #e0e0e0;
}

div.textbook_box li:before{
  content: counter(li);
  counter-increment: li;
  position: absolute;  
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em; /* future proofing */
  -khtml-border-radius: 2em; /* for old Konqueror browsers */
  transition: all .3s ease-out;
}