/****************** WIDGET PANE ************/
.widgetPane{ font-family: Arial, Helvetica, sans-serif; font-size: 15px; z-index: 1; text-align: left;}
.widgetPane .titles{ box-sizing: border-box; list-style: none; padding:0; margin:0;}
.widgetPane .titles li{ box-sizing: border-box; display:inline-block; margin:0; padding:3px 5px; border: 1px #666 solid; border-top-right-radius: 8px; border-top-left-radius: 8px; height: 24px; cursor:pointer; background-color: #555; background-image: linear-gradient(to top, #333, #555); background-image: -webkit-linear-gradient(to top, #333, #555); background-image: -moz-linear-gradient(to top, #333, #555);}
.widgetPane .titles li.activeWidget{ background-color: #444; background-image: linear-gradient(to top, #222, #444); background-image: -webkit-linear-gradient(to top, #222, #444); background-image: -moz-linear-gradient(to top, #222, #444); border-bottom: none;}
.widgetPane .widgets{ background-color: #000; box-sizing: border-box; overflow: hidden; width: 100%; height: 100%;}
.widgetPane .widgets section{ box-sizing: border-box; display: none; overflow: auto; background-color: #222; width: 100%; height: 100%;}
.widgetPane .widgets section.activeWidget{ display:block;}
.widgetPane .left{ float:left;}
.widgetPane .right{ float:right;}

/****************** SLIDES WIDGET ************/
.widgetPane .slidesWidget{ position: relative; height: 100%;}
.widgetPane .slidesWidget ul{ list-style: none; margin: 0; padding: 0; height: 100%; overflow: auto;}
.widgetPane .left{ float:left;}
.widgetPane .right{ float:right;}
.widgetPane .slidesWidget .slidesHolder li{ margin:0; padding:0; height: 100%; line-height: 100%; text-align: center; display:none; cursor: pointer;}
.widgetPane .slidesWidget .slidesHolder li:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.001em;}
.widgetPane .slidesWidget .slidesHolder li img{ max-width: 100%; max-height: 100%; vertical-align: middle;}
.widgetPane .slidesWidget .slidesHolder li.active{}
.widgetPane .slidesWidget .previous, .widgetPane .slidesWidget .next{ box-sizing: border-box; line-height: 30px; position: absolute; border: 1px #666 solid; color: #DDD; font-weight: bold; padding: 0 5px; vertical-align: middle; background-color: #555; cursor: pointer; background-image: linear-gradient(to top, #333, #555); background-image: -webkit-linear-gradient(to top, #333, #555); background-image: -moz-linear-gradient(to top, #333, #555); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
.widgetPane .slidesWidget .previous{ left:-2px;}
.widgetPane .slidesWidget .next{ right:-2px;}

/****************** SLIDES INDEX WIDGET ************/
.widgetPane .slidesIndexWidget{ position: relative; height: 100%;}
.widgetPane .slidesIndexWidget ul{ text-align:center; list-style: none; margin: 0; padding: 0; height: 100%; overflow: auto;}
.widgetPane .slidesIndexWidget .slidesHolder li{ display: inline-block; margin:5px; padding:0; height: 140px; width: 140px; line-height: 140px; text-align: center;  cursor: pointer;}
.widgetPane .slidesIndexWidget .slidesHolder li:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.001em;}
.widgetPane .slidesIndexWidget .slidesHolder li img{ max-width: 100%; max-height: 100%; vertical-align: middle;}
.widgetPane .slidesIndexWidget .slidesHolder li.active{ background-color: #444;}

/****************** TRANSCRIPTION WIDGET ************/
.widgetPane .transcriptionWidget{ position: relative; height: 100%; overflow: hidden;}
.widgetPane .transcriptionWidget .textHolder{ display:block; height:100%; overflow:auto;}
.widgetPane .transcriptionWidget .textHolder img{ float:left; width:50px; margin-right:8px;}
.widgetPane .transcriptionWidget .textHolder p{ font-size: 0.8em; padding: 8px; border: 1px #444 solid; margin: 0; cursor: pointer;}
.widgetPane .transcriptionWidget .textHolder p:after{ content:" "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.widgetPane .transcriptionWidget .textHolder p.active{ background-color: #444;}
.widgetPane .transcriptionWidget .textHolder .found{ box-shadow: 0 0 10px #ff0; background-color: #ff0; font-weight: bold; color: #333;}

/****************** TOPICS WIDGET ************/
.widgetPane .topicWidget{ position: relative; height: 100%; overflow: hidden;}
.widgetPane .topicWidget .textHolder{ display:block; height:100%; overflow:auto;}
.widgetPane .topicWidget .textHolder p{ font-size: 0.8em; padding: 8px; border: 1px #444 solid; margin: 0; cursor: pointer;}
.widgetPane .topicWidget .textHolder p:hover{ background-color: #444;}
.widgetPane .topicWidget .textHolder p .text{}
.widgetPane .topicWidget .textHolder p .time{ float:right;}
.widgetPane .topicWidget .textHolder p.active{ background-color: #444;}

/****************** WIDGET GENERIC CONTROL BAR ************/
.widgetPane .controlBar{ position: absolute; bottom: 0; height: 30px; width: 100%; padding: 0; box-sizing: border-box; border-right: 1px #333 double; border-left: 1px #333 double; background-color: #444; background-image: linear-gradient(to top, #333, #555); background-image: -webkit-linear-gradient(to top, #333, #555); background-image: -moz-linear-gradient(to top, #333, #555);}
.widgetPane .controlBar button{ background-color: none; font-size: 15px; color: #FFF; border: none; display: inline-block; border-right: 1px #333 double; border-left: 1px #333 double; cursor:pointer; margin: 0; width: 30px; height: 100%; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none;}
.widgetPane .controlBar button.search{ border-radius: 10px; height: 20px; margin: 5px 4px 0 0; background-color: #757575; }
.widgetPane .controlBar .link{ background-color: #400; font-size: 19px; color: #DDD; background: linear-gradient(to top, #300, #500); background: -webkit-linear-gradient(to top, #300, #500); background: -moz-linear-gradient(to top, #300, #500);}
.widgetPane .controlBar .link.linked{ background-color: #040; background: linear-gradient(to top, #030, #050); background: -webkit-linear-gradient(to top, #030, #050); background: -moz-linear-gradient(to top, #030, #050);}
.widgetPane .controlBar .searchField{ margin: 5px;}
.widgetPane .controlBar .search{ width: auto;}