/*
Basics
*/
body {
  background: #f4f4f4 none repeat scroll 0 0;
}

svg {
  fill: rgb(${rgb});
}

.no-touch #btn_mainmenu:hover,
.touch #btn_mainmenu:active,
.touch #btn_mainmenu.active,
.no-touch button:hover,
.touch button:active
.touch button.active {
  background: rgba(${rgb}, 0.2) none repeat scroll 0 0;
}

button[on="true"] {
  background-color: rgba(${rgb}, 0.3);
}

/*
Flipbook
*/

#btn-prev svg,
#btn-next svg {
  fill: rgba(${rgb}, 0.4);
}

.no-touch #btn-prev:hover svg,
.no-touch #btn-next:hover svg,
.touch #btn-prev:active svg,
.touch #btn-next:active svg,
.touch #btn-prev.active svg,
.touch #btn-next.active svg {
  fill: rgba(${rgb}, 0.8);
}


/*
PublicationsPanel
*/

#publicationsPanel {
  border-top: 1px solid rgb(${rgb});
  background-color: rgba(${rgb}, 0.3);
}

.no-touch body[publications-visible="false"] #publicationsPanel:hover,
.touch body[publications-visible="false"] #publicationsPanel:active {
  border-top: 1px solid rgb(${rgb});
  background-color: rgba(${rgb}, 0.3);

}

.pubThumbImage.currentPublication  {
  border-color: rgba(${rgb}, 0.3);
}

.no-touch .pubThumbImage:hover,
.touch .pubThumbImage:active,
.touch .pubThumbImage.active {
  border-color: rgb(${rgb});
}

.pubThumbTitle {
  font-family: "Open Sans Light", sans-serif;
  font-size: 21px;
  font-weight: normal;
}


/*
Thumbspanel
*/

#thumbspanel {
  background-color: #dfdfdf;
}

.no-touch .pgThumbContainer:hover,
.touch .pgThumbContainer:active,
.touch .pgThumbContainer.active {
  border-color: rgba(${rgb}, 0.8);
}

.pgThumbContainer.current {
  border-color: rgba(${rgb}, 0.3);
}

.sectionHead > .sectionExpandBtn,
.sectionHead > .sectionCollapseBtn {
  background-color: rgba(${rgb}, 0.5);
}

.no-touch .sectionHead > span:hover,
.touch .sectionHead > span:active,
.touch .sectionHead > span.active {
  background-color: rgba(${rgb}, 0.5);
}

.sectionThumbs {
  border-color: rgba(${rgb}, 0.8);
}

.no-touch .pgThumbContainer:hover .pageLabel,
.touch .pgThumbContainer:active .pageLabel,
.touch .pgThumbContainer.active .pageLabel {
  background-color: rgba(${rgb}, 0.8);
}

/*
Search Panel
*/

#searchBtn.enabled {
  background-color: rgba(${rgb}, 0.4);
}

.no-touch .searchResult:hover,
.touch .searchResult:active {
  border-color: rgba(${rgb}, 0.8);
}

.currentPage .resultPageNo {
  color: rgba(${rgb}, 0.7);
}

#searchpanel .matchingText > mark {
  background-color: rgba(${rgb}, 0.4);
}

#srLabel[hasResults="true"] {
  border-bottom: 2px solid #ccc;
}

/*
Server Search Panel
*/

.moreResultsBtn {
  background-color: rgba(${rgb}, 0.2);
}

.no-touch #btnAbortSearch.enabled:hover,
.touch #btnAbortSearch.enabled:active,
.touch #btnAbortSearch.enabled.active {
   background-color: rgba(${rgb}, 0.8);
   color: white; /* Remove this line to prevent the font color from changing from black to white. */
}

.no-touch .moreResultsBtn:hover,
.touch .moreResultsBtn:active,
.touch .moreResultsBtn.active {
  background-color: rgba(${rgb}, 0.8);
  color: white; /* Remove this line to prevent the font color from changing from black to white. */
}

.no-touch .lessResultsBtn:hover,
.touch .lessResultsBtn:active,
.touch .lessResultsBtn.active {
  background-color: rgba(${rgb}, 0.8);
  color: white; /* Remove this line to prevent the font color from changing from black to white. */
}

.currentPage .resultPageThumbContainer {
  border-color: rgba(${rgb}, 0.4);
}

.currentPublication .searchResultPubIcon > svg {
  fill: rgb(${rgb});
}

.no-touch .resultPageThumbContainer:hover .pageLabel,
.touch .resultPageThumbContainer:active .pageLabel,
.touch .resultPageThumbContainer.active .pageLabel {
  background-color: rgba(${rgb}, 0.8);
}

.no-touch .resultPageThumbContainer:hover,
.touch .resultPageThumbContainer:active,
.touch .resultPageThumbContainer.active {
  border-color: rgba(${rgb}, 0.8);
}

#btnAbortSearch.enabled,
.moreResultsBtn,
.lessResultsBtn {
  background: rgba(${rgb}, 0.4);
}

#searchBtn.enabled {
  background-color: rgba(${rgb}, 0.4);
}

.no-touch #searchBtn.enabled:hover,
.touch #searchBtn.enabled:active,
.touch #searchBtn.enabled.active {
  background-image: url("../img/search_white.svg");
  background-color: rgba(${rgb}, 0.8);
}

/*
Modals
*/

.modalBtn {
  border-color: rgba(${rgb}, 0.2);
  color: rgba(${rgb}, 0.2);
}

.modal-dialog .modal-headline {
  border-color: rgba(${rgb}, 0.1);
}

a {
  color: rgb(${rgb});
}

a:hover,
a:active {
  color: rgb(${rgb});
}

.no-touch .thumbContainer:hover,
.touch .thumbContainer:active,
.touch .thumbContainer.active {
  border: 5px solid rgba(${rgb}, 0.5);
}

/*
Article
 */

.article {
  background-color: rgba(${rgb}, 0.2);
}

.no-touch .article:hover,
.touch .article:active  {
  background-color: rgba(${rgb}, 0.5);
}

.article-corner {
  stroke: rgb(${rgb});
}

.article-corner,
.flipbook .page .article-corner img {
  display: none;
}

/*
Loading animation
*/

.spinner > div {
  background-color: rgba(${rgb}, 0.4);
}