.toccontainer{float:left;width:250px;background:rgba(255,255,255,0.5);border-radius:5px;overflow:auto;position:relative;margin:0 20px 20px 20px;padding-bottom:16px;z-index:10}
.toccontainer a{float:left;padding-left:10px}
.toccontainer .headentry{padding:10px;clear:both;overflow:auto}
.toccontainer .headentry span{float:left;cursor:pointer;width:20px;display:inline-block;width:12px;height:20px}
.toccontainer .headentry span.tocback{background:url('tableofcontents/images/chevron-back.png') no-repeat 50% 50%;background-size:7px 12px}
.toccontainer .tocentry span.tocforward{background:url('tableofcontents/images/chevron-forward.png') no-repeat 50% 50%;background-size:7px 12px}
.toccontainer .headentry a{font-family:'Source Sans Pro';font-size:14px;font-weight:700;color:#333;width:calc(100% - 20px)}
.toccontainer .tocentry{padding:7px 10px 7px 22px;clear:both;overflow:auto}
.toccontainer .tocentry a{font-family:'Source Sans Pro';font-size:14px;font-weight:400;color:#333;width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.toccontainer .tocentry span{float:right;cursor:pointer;width:12px;height:20px;padding 0 5px 0 5px}
.toccontainer .selected{background:#eaeaea}
.toccontainer a:hover{color:#ea7254}
@media(min-width :320px) and (max-width :800px){.toccontainer .headentry a{width:calc(100% - 52px)}
}
.loader{border:3px solid #e2e3e4;border-top:3px solid #cc092f;border-radius:50%;width:25px;height:25px;animation:spin 2s linear infinite;margin-top:20px}
@keyframes spin{0{transform:rotate(0)}
100%{transform:rotate(360deg)}
}